diff --git a/src/api/leave/api.leave.ts b/src/api/leave/api.leave.ts
index 7ef7858..29515f2 100644
--- a/src/api/leave/api.leave.ts
+++ b/src/api/leave/api.leave.ts
@@ -2,6 +2,7 @@ import env from "../index"
 
 const retirementResign = `${env.API_URI}/retirement`
 const leave = `${env.API_URI}/leave`
+const holiday = `${env.API_URI}/metadata/holiday/`
 
 export default {
 	listUser: () => `${retirementResign}/resign/user`,
@@ -24,4 +25,6 @@ export default {
 	leaveCheck: () => `${leave}/user/check`,
 	leaveReport: (id: string) => `${leave}/report/${id}`,
 	leaveSendReport: () => `${leave}/report-template/docx`,
+
+	listHolidayHistoryYearMonth: (year: number, month: number) => `${holiday}${year}/${month}`,
 }
diff --git a/src/modules/05_leave/components/Calendar.vue b/src/modules/05_leave/components/Calendar.vue
index e5b8307..636acd1 100644
--- a/src/modules/05_leave/components/Calendar.vue
+++ b/src/modules/05_leave/components/Calendar.vue
@@ -1,153 +1,184 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import { useQuasar } from "quasar";
-import keycloak from "@/plugins/keycloak";
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { ref, onMounted, watch } from "vue"
+import { useQuasar } from "quasar"
+import keycloak from "@/plugins/keycloak"
+import http from "@/plugins/http"
+import config from "@/app.config"
 
 /**import calendar*/
-import FullCalendar from "@fullcalendar/vue3";
-import dayGridPlugin from "@fullcalendar/daygrid";
-import type { CalendarOptions } from "@fullcalendar/core";
-import timeGridPlugin from "@fullcalendar/timegrid";
-import interactionPlugin from "@fullcalendar/interaction";
-import allLocales from "@fullcalendar/core/locales-all";
-import listPlugin from "@fullcalendar/list";
+import FullCalendar from "@fullcalendar/vue3"
+import dayGridPlugin from "@fullcalendar/daygrid"
+import type { CalendarOptions } from "@fullcalendar/core"
+import timeGridPlugin from "@fullcalendar/timegrid"
+import interactionPlugin from "@fullcalendar/interaction"
+import allLocales from "@fullcalendar/core/locales-all"
+import listPlugin from "@fullcalendar/list"
 
 /** import type*/
-import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
-import type {
-  DataCalendar,
-  LeaveType,
-} from "@/modules/05_leave/interface/response/leave";
+import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts"
+import type { DataCalendar, LeaveType } from "@/modules/05_leave/interface/response/leave"
 
 /** import componest*/
-import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
+import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue"
 
 /** import stort*/
-import { useCounterMixin } from "@/stores/mixin";
+import { useCounterMixin } from "@/stores/mixin"
 
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
-  mixin;
+const mixin = useCounterMixin()
+const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai, dateToISO } = mixin
 
-const $q = useQuasar();
+const $q = useQuasar()
 
-const emit = defineEmits(["update:dateYear"]);
+const emit = defineEmits(["update:dateYear"])
 
-const fullName = ref<string>("");
-const mainData = ref<DataCalendar[]>([]);
+const fullName = ref<string>("")
+const mainData = ref<DataCalendar[]>([])
 
-const keycloakId = ref<string>(
-  keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : ""
-);
+const keycloakId = ref<string>(keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : "")
 
 /**
  * Option ของปฏิทิน
  */
-const fullCalendar = ref<any>(); //ref calendar
-const calendarOptions = ref<CalendarOptions>({
-  plugins: [
-    dayGridPlugin,
-    timeGridPlugin,
-    interactionPlugin, // needed for dateClick
-    listPlugin,
-  ],
-  headerToolbar: false,
-  initialView: "dayGridMonth",
-  initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
-  selectable: true,
-  dayMaxEvents: true,
-  weekends: true,
-  locale: "th",
-  locales: allLocales,
-  expandRows: true,
-  nowIndicator: true,
-  height: "100%",
-  eventColor: "#4CAF4F",
-  eventTextColor: "#fff",
-  eventBorderColor: "#50a5fc",
-  displayEventTime: false,
-  editable: true,
-  events: [],
-});
+const fullCalendar = ref<any>() //ref calendar
+const calendarOptions = ref<any>({
+	plugins: [
+		dayGridPlugin,
+		timeGridPlugin,
+		interactionPlugin, // needed for dateClick
+		listPlugin,
+	],
+	headerToolbar: false,
+	initialView: "dayGridMonth",
+	initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
+	selectable: true,
+	dayMaxEvents: true,
+	weekends: true,
+	locale: "th",
+	locales: allLocales,
+	expandRows: true,
+	nowIndicator: true,
+	height: "100%",
+	eventColor: "#4CAF4F",
+	eventTextColor: "#fff",
+	eventBorderColor: "#50a5fc",
+	displayEventTime: false,
+	editable: true,
+	events: [],
+})
 
 const dateMonth = ref<DataDateMonthObject>({
-  month: new Date().getMonth(),
-  year: new Date().getFullYear(),
-});
+	month: new Date().getMonth(),
+	year: new Date().getFullYear(),
+})
 
 /** function เรียกข้อมูล calendar*/
 async function fetchDataCalendar() {
-  showLoader();
-  await http
-    .post(config.API.leaveCalendar(), {
-      year: dateMonth.value.year,
-    })
-    .then((res) => {
-      mainData.value = res.data.result;
+	showLoader()
+	await http
+		.post(config.API.leaveCalendar(), {
+			year: dateMonth.value.year,
+		})
+		.then(res => {
+			mainData.value = res.data.result
 
-      const double_name = [
-        ...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId)),
-      ];
-      filterLists.value = [];
-      for (let i = 1; i <= double_name.length; i++) {
-        const name = double_name[i - 1];
-        const filterName = {
-          id: name,
-          name: convertKeycloakId(name),
-          color: name === keycloakId.value ? "green" : "grey",
-        };
+			const double_name = [...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId))]
+			filterLists.value = []
+			for (let i = 1; i <= double_name.length; i++) {
+				const name = double_name[i - 1]
+				const filterName = {
+					id: name,
+					name: convertKeycloakId(name),
+					color: name === keycloakId.value ? "green" : "grey",
+				}
+				filterLists.value.push(filterName)
+			}
+			console.log(double_name)
 
-        filterLists.value.push(filterName);
-      }
+			if (filterVal.value.length !== 0) {
+				const data = mainData.value.filter((e: any) => e.keycloakId === keycloakId.value)
 
-      if (filterVal.value.length !== 0) {
-        const data = mainData.value.filter(
-          (e: any) => e.keycloakId === keycloakId.value
-        );
+				const event = data
+					.filter((x: any) => x.status != "REJECT" && x.status != "DELETE")
+					.map((e: DataCalendar) => ({
+						id: e.id,
+						title: `${e.fullName} (${e.leaveTypeName})`,
+						start: e.leaveStartDate,
+						end: new Date(new Date(e.leaveEndDate).setHours(23, 59, 59)).toISOString(),
+						allDay: e.leaveStartDate === e.leaveEndDate ? true : false,
+						color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
+						textColor: "black",
+					}))
+				calendarOptions.value.events = event
+				console.log(calendarOptions.value.events)
+			}
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+		})
+	await fetchData()
+}
 
-        const event = data
-          .filter((x: any) => x.status != "REJECT" && x.status != "DELETE")
-          .map((e: DataCalendar) => ({
-            id: e.id,
-            title: `${e.fullName} (${e.leaveTypeName})`,
-            start: e.leaveStartDate,
-            end: new Date(
-              new Date(e.leaveEndDate).setHours(23, 59, 59)
-            ).toISOString(),
-            allDay: e.leaveStartDate === e.leaveEndDate ? true : false,
-            color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
-            textColor: "black",
-          }));
-        calendarOptions.value.events = event;
-      }
-    })
-
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+/**
+ * fetch วันหยุดในปฏิทิน
+ */
+const fetchData = async () => {
+	showLoader()
+	await http
+		.get(config.API.listHolidayHistoryYearMonth(dateMonth.value.year, dateMonth.value.month + 1))
+		.then(res => {
+			const dataNormal = res.data.result.normal
+			const dataSixDays = res.data.result.sixDays
+			const data = dataNormal
+			const event = data.map((e: any) => ({
+				id: e.id,
+				title: `${e.name} `,
+				start: e.holidayDate,
+				end: new Date(new Date(e.holidayDate).setHours(23, 59, 59)).toISOString(),
+				allDay: e.holidayDate === e.holidayDate ? true : false,
+				color: " #CCE5FF",
+				textColor: "#0080FF",
+			}))
+			calendarOptions.value.events = [...calendarOptions.value.events, ...event]
+			// const dataSix = dataSixDays
+			// const eventSix = dataSix.map((e: any) => ({
+			// 	id: e.id,
+			// 	title: `${e.name} `,
+			// 	start: e.holidayDate,
+			// 	end: new Date(new Date(e.holidayDate).setHours(23, 59, 59)).toISOString(),
+			// 	allDay: e.holidayDate === e.holidayDate ? true : false,
+			// 	color: "#FFE5CC",
+			// 	textColor: "#FF8000",
+			// }))
+			// calendarOptions.value.events = [...calendarOptions.value.events, ...eventSix]
+			console.log(calendarOptions.value.events)
+		})
+		.catch(e => {
+			messageError($q, e)
+		})
+		.finally(async () => {
+			hideLoader()
+		})
 }
 
 function convertKeycloakId(id: any) {
-  const filterName = mainData.value.find((e: any) => e.keycloakId === id);
-  return filterName?.fullName;
+	const filterName = mainData.value.find((e: any) => e.keycloakId === id)
+	return filterName?.fullName
 }
 
-const leaveType = ref<LeaveType[]>([]);
+const leaveType = ref<LeaveType[]>([])
 /** function เรียกประเภทการลา */
 async function fectOptionType() {
-  await http
-    .get(config.API.leaveType())
-    .then(async (res) => {
-      leaveType.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+	await http
+		.get(config.API.leaveType())
+		.then(async res => {
+			leaveType.value = res.data.result
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
 }
 
 /**
@@ -155,234 +186,172 @@ async function fectOptionType() {
  * @param val datepicker แบบเลือกปีและเดือน
  */
 function monthYearThai(val: DataDateMonthObject) {
-  if (val == null) return "";
-  else return monthYear2Thai(val.month, val.year);
+	if (val == null) return ""
+	else return monthYear2Thai(val.month, val.year)
 }
 
 /** function อัปเดท Calendar */
 async function updateMonth() {
-  await fetchDataCalendar();
-  const calen = fullCalendar.value.getApi();
-  const date = new Date(dateMonth.value.year, dateMonth.value.month);
-  calen.gotoDate(date);
+	await fetchDataCalendar()
+	await fetchData()
+	const calen = fullCalendar.value.getApi()
+	const date = new Date(dateMonth.value.year, dateMonth.value.month)
+	calen.gotoDate(date)
 }
 
-const modal = ref<boolean>(false);
-const leaveId = ref<string>("");
+const modal = ref<boolean>(false)
+const leaveId = ref<string>("")
 
 /**
  * function openPopupDateail
  * @param id การลา
  */
 async function onCilckview(id: string) {
-  modal.value = true;
-  leaveId.value = id;
+	modal.value = true
+	leaveId.value = id
 }
 
 /** function closePopup*/
 async function onClickClose() {
-  modal.value = false;
+	modal.value = false
 }
 
 /** filter calendar left */
-const filterLists = ref<any>([]);
-const filterVal = ref<any>([]);
+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.keycloakId === item &&
-            e.status != "REJECT" &&
-            e.status != "DELETE"
-        )
-        .map((e) => ({
-          id: e.id,
-          title: `${e.fullName} (${e.leaveTypeName})`,
-          start: e.leaveStartDate,
-          end: new Date(
-            new Date(e.leaveEndDate).setHours(23, 59, 59)
-          ).toISOString(),
-          allDay: e.leaveStartDate === e.leaveEndDate ? true : false,
-          color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
-          textColor: "black",
-        }));
-    });
-    const allEventData = [].concat(...eventData);
-    calendarOptions.value.events = allEventData;
-  }
-);
+	() => filterVal.value,
+	() => {
+		const eventData = filterVal.value.map((item: any) => {
+			return mainData.value
+				.filter((e: DataCalendar) => e.keycloakId === item && e.status != "REJECT" && e.status != "DELETE")
+				.map(e => ({
+					id: e.id,
+					title: `${e.fullName} (${e.leaveTypeName})`,
+					start: e.leaveStartDate,
+					end: new Date(new Date(e.leaveEndDate).setHours(23, 59, 59)).toISOString(),
+					allDay: e.leaveStartDate === e.leaveEndDate ? true : false,
+					color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
+					textColor: "black",
+				}))
+		})
+		const allEventData = [].concat(...eventData)
+		calendarOptions.value.events = allEventData
+	}
+)
 
 onMounted(async () => {
-  filterVal.value.push(keycloakId.value);
-
-  await fetchDataCalendar();
-  await fectOptionType();
-});
+	filterVal.value.push(keycloakId.value)
+	await fetchDataCalendar()
+	await fectOptionType()
+})
 </script>
 
 <template>
-  <div class="row">
-    <div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm row">
-      <q-card class="col-12" flat bordered>
-        <div class="q-gutter-sm col-12">
-          <q-list class="rounded-borders q-pt-sm" dense>
-            <q-item
-              v-for="(item, i) in filterLists"
-              :key="i"
-              tag="label"
-              v-ripple
-            >
-              <q-checkbox
-                size="sm"
-                v-model="filterVal"
-                :val="item.id"
-                :color="item.color"
-              />
-              <q-item-section>
-                <q-item-label>{{ item.name }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </div>
-      </q-card>
-    </div>
+	<div class="row">
+		<div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm row">
+			<q-card class="col-12" flat bordered>
+				<div class="q-gutter-sm col-12">
+					<q-list class="rounded-borders q-pt-sm" dense>
+						<q-item v-for="(item, i) in filterLists" :key="i" tag="label" v-ripple>
+							<q-checkbox size="sm" v-model="filterVal" :val="item.id" :color="item.color" />
+							<q-item-section>
+								<q-item-label>{{ item.name }}</q-item-label>
+							</q-item-section>
+						</q-item>
+					</q-list>
+				</div>
+			</q-card>
+		</div>
 
-    <div class="col-sm-12 col-md-9 row">
-      <div class="q-mt-sm col-12">
-        <div class="row col-12 q-gutter-sm">
-          <div class="demo-app-main">
-            <q-card
-              bordered
-              flat
-              class="q-pa-sm q-mb-sm col-12 row bg-grey-1 shadow-0"
-            >
-              <div class="items-center col-12 row q-col-gutter-sm">
-                <!-- filter เลือกเดือนปี -->
-                <datepicker
-                  v-model="dateMonth"
-                  :locale="'th'"
-                  autoApply
-                  month-picker
-                  :enableTimePicker="false"
-                  @update:modelValue="updateMonth"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      :model-value="monthYearThai(dateMonth)"
-                      dense
-                      outlined
-                      bg-color="white"
-                      style="width: 130px"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-            </q-card>
+		<div class="col-sm-12 col-md-9 row">
+			<div class="q-mt-sm col-12">
+				<div class="row col-12 q-gutter-sm">
+					<div class="demo-app-main">
+						<q-card bordered flat class="q-pa-sm q-mb-sm col-12 row bg-grey-1 shadow-0">
+							<div class="items-center col-12 row q-col-gutter-sm">
+								<!-- filter เลือกเดือนปี -->
+								<datepicker v-model="dateMonth" :locale="'th'" autoApply month-picker :enableTimePicker="false" @update:modelValue="updateMonth">
+									<template #year="{ year }">{{ year + 543 }}</template>
+									<template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
+									<template #trigger>
+										<q-input :model-value="monthYearThai(dateMonth)" dense outlined bg-color="white" style="width: 130px">
+											<template v-slot:prepend>
+												<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+											</template>
+										</q-input>
+									</template>
+								</datepicker>
+							</div>
+						</q-card>
 
-            <div class="main-content">
-              <FullCalendar
-                ref="fullCalendar"
-                class="demo-app-calendar"
-                :options="calendarOptions"
-              >
-                <template v-slot:eventContent="arg">
-                  <div
-                    class="row col-12 items-center no-wrap"
-                    :style="`background: + ${arg.event.color}`"
-                  >
-                    <div
-                      class="textHover col-10"
-                      @click="onCilckview(arg.event.id)"
-                    >
-                      {{ arg.event.title }}
-                    </div>
-                  </div>
-                </template>
-              </FullCalendar>
-            </div>
-          </div>
-        </div>
-        <div class="row q-col-gutter-lg justify-end">
-          <div class="items-center row">
-            <q-icon
-              size="10px"
-              color="green-7"
-              name="mdi-circle"
-              class="q-mr-sm"
-            />
-            <span class="text-caption text-grey-8">การลาของฉัน</span>
-          </div>
-          <div class="items-center row">
-            <q-icon
-              size="10px"
-              color="grey-6"
-              name="mdi-circle"
-              class="q-mr-sm"
-            />
-            <span class="text-caption text-grey-8">การลาของบุคคลอื่น</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+						<div class="main-content">
+							<FullCalendar ref="fullCalendar" class="demo-app-calendar" :options="calendarOptions">
+								<template v-slot:eventContent="arg">
+									<div class="row col-12 items-center no-wrap" :style="`background: + ${arg.event.color}`">
+										<div class="textHover col-10" @click="onCilckview(arg.event.id)">
+											{{ arg.event.title }}
+										</div>
+									</div>
+								</template>
+							</FullCalendar>
+						</div>
+					</div>
+				</div>
+				<div class="row q-col-gutter-lg justify-end">
+					<div class="items-center row">
+						<q-icon size="10px" color="blue" name="mdi-circle" class="q-mr-sm" />
+						<span class="text-caption text-grey-8">วันหยุด</span>
+					</div>
+					<div class="items-center row">
+						<q-icon size="10px" color="green-7" name="mdi-circle" class="q-mr-sm" />
+						<span class="text-caption text-grey-8">การลาของฉัน</span>
+					</div>
+					<div class="items-center row">
+						<q-icon size="10px" color="grey-6" name="mdi-circle" class="q-mr-sm" />
+						<span class="text-caption text-grey-8">การลาของบุคคลอื่น</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 
-  <DialogDetail
-    :modal="modal"
-    :leaveId="leaveId"
-    :onClickClose="onClickClose"
-    :leaveType="leaveType"
-  />
+	<DialogDetail :modal="modal" :leaveId="leaveId" :onClickClose="onClickClose" :leaveType="leaveType" />
 </template>
 
 <style scope lang="scss">
 .main-content {
-  height: 70vh;
+	height: 70vh;
 }
 
 .padding-content {
-  padding: 10px;
+	padding: 10px;
 }
 
 .demo-app-main {
-  flex-grow: 1;
-  /* padding: 3em; */
+	flex-grow: 1;
+	/* padding: 3em; */
 }
 
 .fc {
-  /* the calendar root */
-  max-width: 1100px;
-  margin: 0 auto;
-  background-color: white;
-  border-radius: 10px;
+	/* the calendar root */
+	max-width: 1100px;
+	margin: 0 auto;
+	background-color: white;
+	border-radius: 10px;
 }
 
 .fc-day-today {
-  background-color: #f8f8f8 !important;
+	background-color: #f8f8f8 !important;
 }
 
 .fc-day-today .fc-daygrid-day-number {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  /* border: 2px solid #17a259; */
-  /* border-radius: 50%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	/* border: 2px solid #17a259; */
+	/* border-radius: 50%;
   height: 25px;
   width: 25px;
   font-weight: bold;
@@ -391,123 +360,123 @@ onMounted(async () => {
 }
 
 .fc-day-today .fc-daygrid-day-frame {
-  padding: 5%;
+	padding: 5%;
 }
 
 .fc .fc-button-group > .fc-button {
-  color: black;
-  background-color: #fafafa;
-  border: none;
+	color: black;
+	background-color: #fafafa;
+	border: none;
 }
 
 .fc .fc-button-group > .fc-button:active {
-  color: white;
-  background-color: #22a15e;
-  border: none;
+	color: white;
+	background-color: #22a15e;
+	border: none;
 }
 
 .fc .fc-button-group > .fc-button.fc-button-active {
-  color: white;
-  background-color: #22a15e;
-  border: none;
+	color: white;
+	background-color: #22a15e;
+	border: none;
 }
 
 .fc-header-toolbar {
-  background-color: white;
-  padding: 0px 10px 0px 10px;
-  border-radius: 10px 10px 0px 0px;
+	background-color: white;
+	padding: 0px 10px 0px 10px;
+	border-radius: 10px 10px 0px 0px;
 }
 
 .fc .fc-scrollgrid-liquid > thead {
-  background-color: white;
+	background-color: white;
 }
 
 .dp-custom-cell {
-  border-radius: 50%;
+	border-radius: 50%;
 }
 
 .dp__today {
-  border: 1px solid var(--q-primary);
+	border: 1px solid var(--q-primary);
 }
 
 .dp__range_end,
 .dp__range_start,
 .dp__active_date {
-  background: var(--q-primary);
-  color: var(--dp-primary-text-color);
+	background: var(--q-primary);
+	color: var(--dp-primary-text-color);
 }
 
 .datepicker .q-field__label {
-  padding-left: 5px;
+	padding-left: 5px;
 }
 
 .datepicker .q-field__messages {
-  padding-left: 20px;
+	padding-left: 20px;
 }
 
 .datepicker .q-field__native {
-  padding-left: 5px;
-  color: var(--q-primary) !important;
+	padding-left: 5px;
+	color: var(--q-primary) !important;
 }
 
 .datepicker .q-field__prepend {
-  padding-left: 6px;
+	padding-left: 6px;
 }
 
 .datepicker .q-field__append {
-  padding-right: 6px;
+	padding-right: 6px;
 }
 
 .datepicker .q-field__after {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  font-weight: 500;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	font-weight: 500;
 }
 
 .fc .fc-popover {
-  z-index: 6000;
+	z-index: 6000;
 }
 
 .fc-direction-ltr .fc-daygrid-event.fc-event-end,
 .fc-direction-rtl .fc-daygrid-event.fc-event-start {
-  cursor: pointer;
+	cursor: pointer;
 }
 
 .subName {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  font-weight: 500;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	font-weight: 500;
 }
 
 .subInput {
-  display: flex;
-  align-items: center;
+	display: flex;
+	align-items: center;
 }
 
 .fc-event {
-  overflow: hidden;
-  border-color: transparent !important;
-  font-weight: 500;
+	overflow: hidden;
+	border-color: transparent !important;
+	font-weight: 500;
 }
 
 .fc-event-main {
-  text-align: left;
-  padding: 0px 5px;
+	text-align: left;
+	padding: 0px 5px;
 }
 
 .fc-direction-ltr .fc-daygrid-event.fc-event-end,
 .fc-direction-rtl .fc-daygrid-event.fc-event-start {
-  padding-left: 0px;
+	padding-left: 0px;
 }
 
 .fc-theme-standard td,
 .fc-theme-standard th {
-  border: 1px solid #ebe9f1;
+	border: 1px solid #ebe9f1;
 }
 
 .textHover:hover {
-  color: var(--q-primary);
+	color: var(--q-primary);
 }
 </style>
diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index fc1cd43..46cc9da 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -1,241 +1,270 @@
 <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 { 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 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 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"
+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 dataStore = useLeaveStore();
+const { convertStatud } = dataStore;
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  success,
+  dialogConfirm,
+} = mixin;
 
-const $q = useQuasar()
+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,
-	},
-})
+  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>("")
+const titleMain = ref<string>("รายละเอียดการลาของ");
+const titleMainCancle = ref<string>("รายละเอียดการยกเลิกการลาของ");
+const titleName = ref<string>("");
 /**checkForm Form การลา*/
-const checkForm = ref<string>("")
+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: "",
-})
+  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(),
-})
+  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,
-})
+  writeAt: "",
+  reason: "",
+  doc: null,
+});
 /**Validate ข้อมูล */
-const writeAtRef = ref<Object | null>(null)
-const reasonRef = ref<Object | null>(null)
-const docRef = ref<Object | null>(null)
+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,
-}
+  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()
-		})
+  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();
+    });
 }
 
 /**
@@ -244,33 +273,33 @@ async function fetchDataDetail(id: string) {
  * @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"
-		}
-	}
+  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";
+    }
+  }
 }
 
 /**
@@ -278,199 +307,260 @@ function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
  * @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
+  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()
-		})
+      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)
-	}
+  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()
-		})
+  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.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)
-		}
-	}
-)
+      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" />
+  <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" />
+          <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
+          <FormChildbirth
+            v-else-if="checkForm === 'FormChildbirth'"
+            :data="formData"
+          />
 
-					<!-- ลาพักผ่อน -->
-					<FormHoliday v-else-if="checkForm === 'FormHoliday'" :data="formData" />
+          <!-- ลาพักผ่อน -->
+          <FormHoliday
+            v-else-if="checkForm === 'FormHoliday'"
+            :data="formData"
+          />
 
-					<!-- ลาอุปสมบท -->
-					<FormUpasom v-else-if="checkForm === 'FormUpasom'" :data="formData" />
+          <!-- ลาอุปสมบท -->
+          <FormUpasom v-else-if="checkForm === 'FormUpasom'" :data="formData" />
 
-					<!-- ลาประกอบพิธีฮัจญ์ -->
-					<FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
+          <!-- ลาประกอบพิธีฮัจญ์ -->
+          <FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
 
-					<!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
-					<FormCheckSelect v-else-if="checkForm === 'FormCheckSelect'" :data="formData" />
+          <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
+          <FormCheckSelect
+            v-else-if="checkForm === 'FormCheckSelect'"
+            :data="formData"
+          />
 
-					<!-- ลาไปศึกษา -->
-					<FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" />
+          <!-- ลาไปศึกษา -->
+          <FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" />
 
-					<!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
-					<FormLeaveToTraining v-else-if="checkForm === 'FormLeaveToTraining'" :data="formData" />
+          <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
+          <FormLeaveToTraining
+            v-else-if="checkForm === 'FormLeaveToTraining'"
+            :data="formData"
+          />
 
-					<!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
-					<FormLeaveToWorkInternational v-else-if="checkForm === 'FormLeaveToWorkInternational'" :data="formData" />
+          <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
+          <FormLeaveToWorkInternational
+            v-else-if="checkForm === 'FormLeaveToWorkInternational'"
+            :data="formData"
+          />
 
-					<!-- ลาติดตามคู่สมรส -->
-					<FormSpouse v-else-if="checkForm === 'FormSpouse'" :data="formData" />
+          <!-- ลาติดตามคู่สมรส -->
+          <FormSpouse v-else-if="checkForm === 'FormSpouse'" :data="formData" />
 
-					<!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
-					<FormVocationalRehabilitation v-else-if="checkForm === 'FormVocationalRehabilitation'" :data="formData" />
-				</div>
+          <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
+          <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>
+        <div
+          flat
+          class="col-xs-6 col-sm-6"
+          v-if="props.leaveStatus === 'CANCEL'"
+        >
+          <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
+            outlined
+            dense
+          />
+          <q-file
+            ref="docRef"
+            outlined
+            v-model="formDelete.doc"
+            label="เลือกไฟล์เอกสารหลักฐาน"
+            :rules="[(val) => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
+            lazy-rules
+            use-chips
+            dense
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" />
+            </template>
+          </q-file>
+        </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>
+    <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/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
new file mode 100644
index 0000000..62fe770
--- /dev/null
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -0,0 +1,509 @@
+<script setup lang="ts">
+import { ref, reactive, watch, computed, onMounted } from "vue";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/05_leave/interface/request/SickForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const router = useRouter();
+const {
+  date2Thai,
+  dateToISO,
+  dialogConfirm,
+  success,
+  messageError,
+  fails,
+  showLoader,
+  hideLoader,
+} = mixin;
+const edit = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  }
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataSick = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveRange: "ALL",
+  leaveTotal: "",
+  leaveLast: null,
+  leaveNumber: "",
+  leaveAddress: "",
+  leaveDetail: "",
+  leaveDocument: [],
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveRangeRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
+const leaveLastRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const FormRef: FormRef = {
+  leaveWrote: leaveWroteRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveRange: leaveRangeRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+async function fileUploadDoc(files: any) {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+}
+
+/**
+ * function รีเซทค่า leaveStartDate เเละ leaveEndDate
+ */
+function resetDate() {
+  if (
+    formDataSick.leaveRange === "MORNING" ||
+    formDataSick.leaveRange === "AFTERNOON"
+  ) {
+    formDataSick.leaveStartDate = null;
+    formDataSick.leaveEndDate = null;
+  }
+  console.log("testnull");
+}
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function onValidate() {
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    //   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("leaveDocument", formDataSick.leaveDocument);
+    formData.append("type", formDataSick.type);
+    formData.append("leaveRange", formDataSick.leaveRange);
+    formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate));
+    formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate));
+    formData.append("leaveWrote", formDataSick.leaveWrote);
+    formData.append("leaveAddress", formDataSick.leaveAddress);
+    formData.append("leaveNumber", formDataSick.leaveNumber);
+    formData.append("leaveDetail", formDataSick.leaveDetail);
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataSick.leaveStartDate ?? null,
+      EndLeaveDate: formDataSick.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataSick.leaveTotal =
+          data.totalDate - data.sumDateWork - data.sumDateHoliday;
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
+ */
+const isReadOnly = computed(() => {
+  const conditionleaveRange =
+    formDataSick.leaveRange === "MORNING" ||
+    formDataSick.leaveRange === "AFTERNOON";
+  if (conditionleaveRange) {
+    formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null
+    formDataSick.leaveTotal = 0.5;
+  } else {
+    formDataSick.leaveTotal = null;
+  }
+  return conditionleaveRange;
+});
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+function resetEndDate(type: string) {
+  if (type === "day") {
+    formDataSick.EndLeaveDate === null;
+  }
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataSick.leaveWrote = props.data.leaveWrote;
+    formDataSick.leaveStartDate = new Date(props.data.leaveStartDate);
+    formDataSick.leaveEndDate = new Date(props.data.leaveEndDate);
+    formDataSick.contractTel = props.data.contractTel;
+    formDataSick.leaveTotal = props.data.leaveTotal;
+    formDataSick.leaveNumber = props.data.leaveNumber;
+    formDataSick.leaveDetail = props.data.leaveDetail;
+    // formDataSick.leaveDocument = props.data.leaveDocument;
+    formDataSick.leaveAddress = props.data.leaveAddress;
+    formDataSick.leaveAddress = props.data.leaveAddress;
+  }
+});
+</script>
+
+<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          hide-bottom-space
+          bg-color="white"
+          outlined
+          v-model="formDataSick.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <div class="col-12 col-md-4 col-sm-12">
+          <q-radio
+            v-model="formDataSick.leaveRange"
+            val="ALL"
+            label="ลาทั้งวัน"
+            checked-icon="task_alt"
+          />
+          <q-radio
+            v-model="formDataSick.leaveRange"
+            val="MORNING"
+            label="ลาครึ่งวันเช้า"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+          <q-radio
+            v-model="formDataSick.leaveRange"
+            val="AFTERNOON"
+            label="ลาครึ่งวันบ่าย"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+        </div>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formDataSick.leaveStartDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :readonly="!edit"
+              @update:model-value="formDataSick.leaveEndDate = null"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
+                  hide-bottom-space
+                  :readonly="!edit"
+                  bg-color="white"
+                  class="full-width cursor-pointer inputgreen"
+                  :model-value="
+                    formDataSick.leaveStartDate != null
+                      ? date2Thai(formDataSick.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'ลาตั้งแต่วันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                  style="color: var(--q-primary)"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <datepicker
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formDataSick.leaveEndDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :readonly="!formDataSick.leaveStartDate"
+              @update:model-value="FetchCheck(), isReadOnly"
+              :min-date="formDataSick.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  :readonly="!formDataSick.leaveStartDate"
+                  :class="inputEdit(isReadOnly)"
+                  :model-value="
+                    formDataSick.leaveEndDate != null
+                      ? date2Thai(formDataSick.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'ลาถึงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-input
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              bg-color="white"
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="formDataSick.leaveTotal"
+              label="จำนวนวันที่ลา"
+              readonly
+              hide-bottom-space
+            />
+            <q-input
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              outlined
+              ref="leaveLastRef"
+              for="leaveLastRef"
+              v-model="dataStore.leaveLast"
+              label="ลาครั้งสุดท้ายเมื่อวันที่"
+              readonly
+              hide-bottom-space
+              bg-color="white"
+            />
+          </div>
+        </div>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              dense
+              outlined
+              ref="leaveNumberRef"
+              for="leaveNumberRef"
+              v-model="formDataSick.leaveNumber"
+              mask="(###)-###-####"
+              hide-bottom-space
+              bg-color="white"
+              unmasked-value
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
+              dense
+              outlined
+              ref="leaveAddressRef"
+              for="leaveAddressRef"
+              v-model="formDataSick.leaveAddress"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+              hide-bottom-space
+              bg-color="white"
+            />
+          </div>
+        </div>
+        <q-input
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataSick.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+          bg-color="white"
+        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-file
+              for="leaveDocumentRef"
+              v-model="formDataSick.leaveDocument"
+              dense
+              label="เอกสารประกอบ"
+              outlined
+              use-chips
+              bg-color="white"
+              class="col-12 q-pl-sm col-12"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+          </div>
+        </div>
+        <div class="col-12 col-sm-6 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in formDataSick.leaveDocument"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <q-separator class="q-mt-sm" />
+
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
new file mode 100644
index 0000000..a20752f
--- /dev/null
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -0,0 +1,422 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const mixin = useCounterMixin();
+const router = useRouter();
+const $q = useQuasar();
+const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
+  mixin;
+const edit = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataBirth = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "",
+  leaveLast: "",
+  leaveNumber: "",
+  leaveAddress: "",
+  leaveDetail: "",
+  leaveDocument: [],
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveTotalRef = 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 = {
+  leaveWrote: leaveWroteRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+async function fileUploadDoc(files: any) {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+}
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function onValidate() {
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataBirth.leaveDocument.length > 0) {
+    // 	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)
+    // }
+    formData.append("leaveDocument", formDataBirth.leaveDocument);
+    formData.append("type", formDataBirth.type);
+    formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate));
+    formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate));
+    formData.append("leaveWrote", formDataBirth.leaveWrote);
+    formData.append("leaveAddress", formDataBirth.leaveAddress);
+    formData.append("leaveNumber", formDataBirth.leaveNumber);
+    formData.append("leaveDetail", formDataBirth.leaveDetail);
+
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataBirth.leaveStartDate ?? null,
+      EndLeaveDate: formDataBirth.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataBirth.leaveTotal = data.totalDate;
+        // formDataBirth.leaveLast = data.sumDateWork
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataBirth.leaveWrote = props.data.leaveWrote;
+    formDataBirth.leaveStartDate = props.data.leaveStartDate;
+    formDataBirth.leaveEndDate = props.data.leaveEndDate;
+    formDataBirth.leaveTotal = props.data.leaveTotal;
+    formDataBirth.leaveNumber = props.data.leaveNumber;
+    formDataBirth.leaveDetail = props.data.leaveDetail;
+    // formDataBirth.leaveDocument = props.data.leaveDocument;
+  }
+});
+</script>
+
+<!-- ฟอร์มลาคลอดบุตร-->
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          outlined
+          v-model="formDataBirth.leaveWrote"
+          label="เขียนที่"
+          hide-bottom-space
+          bg-color="white"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataBirth.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+          @update:model-value="formDataBirth.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveStartDateRef"
+              for="leaveStartDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataBirth.leaveStartDate != null
+                  ? date2Thai(formDataBirth.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataBirth.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          @update:model-value="fetchCheck()"
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!formDataBirth.leaveStartDate"
+          :min-date="formDataBirth.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              for="leaveEndDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!formDataBirth.leaveStartDate"
+              class="full-width datepicker"
+              :model-value="
+                formDataBirth.leaveEndDate != null
+                  ? date2Thai(formDataBirth.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-3 col-sm-6"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataBirth.leaveTotal"
+          label="จำนวนวันที่ลา"
+          bg-color="white"
+          readonly
+          hide-bottom-space
+        />
+        <q-input
+          class="col-12 col-md-3 col-sm-6"
+          dense
+          outlined
+          ref="leaveLastRef"
+          for="leaveLastRef"
+          v-model="dataStore.leaveLast"
+          label="ลาครั้งสุดท้ายเมื่อวันที่"
+          readonly
+          hide-bottom-space
+          bg-color="white"
+        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveNumberRef"
+              for="leaveNumberRef"
+              v-model="formDataBirth.leaveNumber"
+              mask="(###)-###-####"
+              unmasked-value
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveAddressRef"
+              for="leaveAddressRef"
+              v-model="formDataBirth.leaveAddress"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+        <q-input
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          bg-color="white"
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataBirth.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <q-file
+          for="leaveDocumentRef"
+          hide-bottom-space
+          v-model="formDataBirth.leaveDocument"
+          @added="fileUploadDoc"
+          dense
+          bg-color="white"
+          label="เอกสารประกอบ"
+          outlined
+          use-chips
+          multiple
+          class="q-pl-sm col-12"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+        </q-file>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in formDataBirth.leaveDocument"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <q-separator class="q-mt-sm" />
+
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
new file mode 100644
index 0000000..ec398eb
--- /dev/null
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -0,0 +1,507 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/05_leave/interface/request/HelpWifeForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const mixin = useCounterMixin();
+const router = useRouter();
+const $q = useQuasar();
+const {
+  date2Thai,
+  calculateDurationYmd,
+  dateToISO,
+  dialogConfirm,
+  fails,
+  success,
+  messageError,
+} = mixin;
+const edit = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataHelpWife = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  wifeDayName: "",
+  wifeDayDateBorn: null,
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "",
+  leaveNumber: "",
+  leaveAddress: "",
+  leaveDetail: "",
+  leaveDocument: [],
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const wifeDayNameRef = ref<object | null>(null);
+const wifeDayDateBornRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveTotalRef = 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 = {
+  leaveWrote: leaveWroteRef,
+  wifeDayName: wifeDayNameRef,
+  wifeDayDateBorn: wifeDayDateBornRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function onValidate() {
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataHelpWife.leaveDocument.length > 0) {
+    // 	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)
+    // }
+    formData.append("leaveDocument", formDataHelpWife.leaveDocument);
+    formData.append("type", formDataHelpWife.type);
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataHelpWife.leaveStartDate)
+    );
+    formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate));
+    formData.append("leaveWrote", formDataHelpWife.leaveWrote);
+    formData.append("leaveAddress", formDataHelpWife.leaveAddress);
+    formData.append("leaveNumber", formDataHelpWife.leaveNumber);
+    formData.append("leaveDetail", formDataHelpWife.leaveDetail);
+    formData.append("wifeDayName", formDataHelpWife.wifeDayName);
+    formData.append(
+      "wifeDayDateBorn",
+      dateToISO(formDataHelpWife.wifeDayDateBorn)
+    );
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataHelpWife.leaveStartDate,
+    formDataHelpWife.leaveEndDate
+  );
+  formDataHelpWife.leaveTotal = newLeaveTotal;
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataHelpWife.leaveStartDate ?? null,
+      EndLeaveDate: formDataHelpWife.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataHelpWife.leaveTotal =
+          data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        // formDataHelpWife.leaveLast = data.totalDate
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    // console.log("data==>", props.data)
+    formDataHelpWife.leaveWrote = props.data.leaveWrote;
+    formDataHelpWife.wifeDayName = props.data.wifeDayName;
+    formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
+    formDataHelpWife.leaveStartDate = props.data.leaveStartDate;
+    formDataHelpWife.leaveEndDate = props.data.leaveEndDate;
+    formDataHelpWife.leaveTotal = props.data.leaveTotal;
+    formDataHelpWife.leaveNumber = props.data.leaveNumber;
+    formDataHelpWife.leaveDetail = props.data.leaveDetail;
+    // formDataHelpWife.leaveDocument = props.data.leaveDocument;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          outlined
+          hide-bottom-space
+          bg-color="white"
+          v-model="formDataHelpWife.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataHelpWife.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+          @update:model-value="formDataHelpWife.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveStartDateRef"
+              for="leaveStartDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataHelpWife.leaveStartDate != null
+                  ? date2Thai(formDataHelpWife.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataHelpWife.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          @update:model-value="updateLeaveTotal, fetchCheck()"
+          week-start="0"
+          :readonly="!formDataHelpWife.leaveStartDate"
+          :min-date="formDataHelpWife.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              for="leaveEndDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!formDataHelpWife.leaveStartDate"
+              class="full-width datepicker"
+              :model-value="
+                formDataHelpWife.leaveEndDate != null
+                  ? date2Thai(formDataHelpWife.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataHelpWife.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+          hide-bottom-space
+          bg-color="white"
+        />
+        <div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
+          <q-input
+            class="col-12 col-sm-12"
+            ref="wifeDayNameRef"
+            for="wifeDayNameRef"
+            dense
+            bg-color="white"
+            outlined
+            hide-bottom-space
+            v-model="formDataHelpWife.wifeDayName"
+            label="ชื่อภรรยา"
+            :readonly="!edit"
+            :rules="[(val) => !!val || `${'ชื่อภรรยา'}`]"
+          />
+        </div>
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataHelpWife.wifeDayDateBorn"
+          :locale="'th'"
+          autoApply
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="wifeDayDateBornRef"
+              for="wifeDayDateBornRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataHelpWife.wifeDayDateBorn != null
+                  ? date2Thai(formDataHelpWife.wifeDayDateBorn)
+                  : null
+              "
+              :label="`${'วันที่คลอด'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              ref="leaveNumberRef"
+              for="leaveNumberRef"
+              v-model="formDataHelpWife.leaveNumber"
+              mask="(###)-###-####"
+              unmasked-value
+              hide-bottom-space
+              bg-color="white"
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveAddressRef"
+              for="leaveAddressRef"
+              v-model="formDataHelpWife.leaveAddress"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+        <q-input
+          hide-bottom-space
+          bg-color="white"
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataHelpWife.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <q-file
+          bg-color="white"
+          ref="leaveDocumentRef"
+          v-model="formDataHelpWife.leaveDocument"
+          @added="fileUploadDoc"
+          dense
+          label="เอกสารประกอบ"
+          outlined
+          use-chips
+          multiple
+          class="q-pl-sm col-12"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+        </q-file>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in formDataHelpWife.leaveDocument"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
new file mode 100644
index 0000000..4ef27e3
--- /dev/null
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -0,0 +1,501 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from "vue";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/05_leave/interface/request/VacationForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+/** Use */
+const $q = useQuasar();
+const dataStore = useLeaveStore();
+const mixin = useCounterMixin();
+const router = useRouter();
+const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
+  mixin;
+const edit = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataVacation = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveRange: "ALL",
+  restDayOldTotal: "",
+  restDayCurrentTotal: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "",
+  leaveNumber: "",
+  leaveAddress: "",
+  leaveDetail: "",
+  leaveDocument: [],
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const restDayOldTotalRef = ref<object | null>(null);
+const restDayCurrentTotalRef = ref<object | null>(null);
+const leaveRangeRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveTotalRef = 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 = {
+  leaveWrote: leaveWroteRef,
+  leaveRange: leaveRangeRef,
+  restDayOldTotal: restDayOldTotalRef,
+  restDayCurrentTotal: restDayCurrentTotalRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function onValidate() {
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataVacation.leaveDocument.length > 0) {
+    // 	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)
+    // }
+    formData.append("leaveDocument", formDataVacation.leaveDocument);
+    formData.append("type", formDataVacation.type);
+    formData.append("leaveRange", formDataVacation.leaveRange);
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataVacation.leaveStartDate)
+    );
+    formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate));
+    formData.append("leaveWrote", formDataVacation.leaveWrote);
+    formData.append("leaveAddress", formDataVacation.leaveAddress);
+    formData.append("leaveNumber", formDataVacation.leaveNumber);
+    formData.append("leaveDetail", formDataVacation.leaveDetail);
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataVacation.leaveStartDate ?? null,
+      EndLeaveDate: formDataVacation.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataVacation.leaveTotal =
+          data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        // formDataVacation.leaveLast = data.totalDate
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function รีเซทค่า leaveStartDate เเละ leaveEndDate
+ */
+function resetDate() {
+  if (
+    formDataVacation.leaveRange === "MORNING" ||
+    formDataVacation.leaveRange === "AFTERNOON"
+  ) {
+    formDataVacation.leaveStartDate = null;
+    formDataVacation.leaveEndDate = null;
+  }
+  console.log("testnull");
+}
+
+/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
+const isReadOnly = computed(() => {
+  const conditionleaveRange =
+    formDataVacation.leaveRange === "MORNING" ||
+    formDataVacation.leaveRange === "AFTERNOON";
+  if (conditionleaveRange) {
+    formDataVacation.leaveEndDate = formDataVacation.leaveStartDate; // Set formDataVacation.leaveEndDate to null
+    formDataVacation.leaveTotal = 0.5;
+  } else {
+    formDataVacation.leaveTotal = null;
+  }
+  return conditionleaveRange;
+});
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    // console.log("data==>", props.data)
+    formDataVacation.leaveWrote = props.data.leaveWrote;
+    formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
+    formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
+    formDataVacation.leaveStartDate = props.data.leaveStartDate;
+    formDataVacation.leaveEndDate = props.data.leaveEndDate;
+    formDataVacation.leaveTotal = props.data.leaveTotal;
+    formDataVacation.leaveNumber = props.data.leaveNumber;
+    formDataVacation.leaveDetail = props.data.leaveDetail;
+    // formDataVacation.leaveDocument = props.data.leaveDocument;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          hide-bottom-space
+          bg-color="white"
+          outlined
+          v-model="formDataVacation.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+        <div class="col-12 col-md-4 col-sm-6">
+          <q-radio
+            v-model="formDataVacation.leaveRange"
+            val="ALL"
+            label="ลาทั้งวัน"
+            checked-icon="task_alt"
+          />
+          <q-radio
+            v-model="formDataVacation.leaveRange"
+            val="MORNING"
+            label="ลาครึ่งวันเช้า"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+          <q-radio
+            v-model="formDataVacation.leaveRange"
+            val="AFTERNOON"
+            label="ลาครึ่งวันบ่าย"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+        </div>
+        <q-input
+          class="col-12 col-md-4 col-sm-6"
+          ref="restDayOldTotalRef"
+          for="restDayOldTotalRef"
+          dense
+          hide-bottom-space
+          bg-color="white"
+          readonly
+          outlined
+          v-model="dataStore.restDayTotalOld"
+          label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
+        />
+
+        <q-input
+          class="col-12 col-md-4 col-sm-6"
+          ref="restDayCurrentTotalRef"
+          for="restDayCurrentTotalRef"
+          dense
+          readonly
+          hide-bottom-space
+          bg-color="white"
+          outlined
+          v-model="dataStore.leaveRemain"
+          label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
+        />
+
+        <datepicker
+          class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataVacation.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+          @update:model-value="formDataVacation.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveStartDateRef"
+              for="leaveStartDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataVacation.leaveStartDate != null
+                  ? date2Thai(formDataVacation.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataVacation.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          @update:model-value="fetchCheck()"
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="isReadOnly"
+          :min-date="formDataVacation.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              for="leaveEndDateRef"
+              hide-bottom-space
+              bg-color="white"
+              class="full-width datepicker"
+              :readonly="isReadOnly"
+              :model-value="
+                formDataVacation.leaveEndDate != null
+                  ? date2Thai(formDataVacation.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          bg-color="white"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataVacation.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+          hide-bottom-space
+        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveNumberRef"
+              for="leaveNumberRef"
+              v-model="formDataVacation.leaveNumber"
+              mask="(###)-###-####"
+              unmasked-value
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveAddressRef"
+              for="leaveAddressRef"
+              v-model="formDataVacation.leaveAddress"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+        <q-input
+          type="textarea"
+          hide-bottom-space
+          bg-color="white"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataVacation.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <q-file
+          ref="leaveDocumentRef"
+          bg-color="white"
+          v-model="formDataVacation.leaveDocument"
+          @added="fileUploadDoc"
+          dense
+          label="เอกสารประกอบ"
+          outlined
+          use-chips
+          multiple
+          class="q-pl-sm col-12"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+        </q-file>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in formDataVacation.leaveDocument"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
new file mode 100644
index 0000000..2b80f39
--- /dev/null
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -0,0 +1,671 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  calculateDurationYmd,
+  fails,
+  dateToISO,
+  success,
+  messageError,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const ordainDayLocationNumberRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+const leavebirthDateRef = ref<object | null>(null);
+const leavegovernmentDateRef = ref<object | null>(null);
+const totalLeaveRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const ordainDayOrdinationRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const ordainDayLocationAddressRef = ref<object | null>(null);
+const ordainDayBuddhistLentAddressRef = ref<object | null>(null);
+const ordainDayLocationNameRef = ref<object | null>(null);
+const ordainDayBuddhistLentNameRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataOrdination = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leavegovernmentDate: new Date(),
+  leavebirthDate: new Date(),
+  leaveStartDate: null,
+  leaveEndDate: null,
+  totalLeave: new Date(),
+  ordainDayOrdination: new Date(),
+  ordainDayLocationName: "",
+  ordainDayLocationNumber: null,
+  ordainDayLocationAddress: "",
+  ordainDayBuddhistLentName: "",
+  ordainDayBuddhistLentAddress: "",
+  ordainDayStatus: "true",
+  leaveDocument: null,
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: OrdinationForm = {
+  leaveWrote: leaveWroteRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leavebirthDate: leavebirthDateRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  totalLeave: totalLeaveRef,
+  ordainDayOrdination: ordainDayOrdinationRef,
+  ordainDayLocationName: ordainDayLocationNameRef,
+  ordainDayLocationNumber: ordainDayLocationNumberRef,
+  ordainDayLocationAddress: ordainDayLocationAddressRef,
+  ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
+  ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+function onValidate() {
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataOrdination.leaveDocument.length > 0) {
+    // 	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)
+    // }
+    formData.append("leaveDocument", formDataOrdination.leaveDocument);
+    formData.append("type", formDataOrdination.type);
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataOrdination.leaveStartDate)
+    );
+    formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate));
+    formData.append(
+      "ordainDayOrdination",
+      dateToISO(formDataOrdination.ordainDayOrdination)
+    );
+    formData.append(
+      "ordainDayLocationName",
+      formDataOrdination.ordainDayLocationName
+    );
+    formData.append(
+      "ordainDayLocationNumber",
+      formDataOrdination.ordainDayLocationNumber
+    );
+    formData.append(
+      "ordainDayLocationAddress",
+      formDataOrdination.ordainDayLocationAddress
+    );
+    formData.append(
+      "ordainDayBuddhistLentName",
+      formDataOrdination.ordainDayBuddhistLentName
+    );
+    formData.append(
+      "ordainDayBuddhistLentAddress",
+      formDataOrdination.ordainDayBuddhistLentAddress
+    );
+    formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus);
+    formData.append("leaveWrote", formDataOrdination.leaveWrote);
+    formData.append("leaveDetail", formDataOrdination.leaveDetail);
+    formData.append(
+      "leavebirthDate",
+      dateToISO(formDataOrdination.leavebirthDate)
+    );
+    formData.append(
+      "leavegovernmentDate",
+      dateToISO(formDataOrdination.leavegovernmentDate)
+    );
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataOrdination.leaveStartDate ?? null,
+      EndLeaveDate: formDataOrdination.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        // formDataOrdination.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+        formDataOrdination.leaveTotal = data.totalDate;
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataOrdination.leaveStartDate,
+    formDataOrdination.leaveEndDate
+  );
+  formDataOrdination.leaveTotal = newLeaveTotal;
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataOrdination.leaveWrote = props.data.leaveWrote;
+    formDataOrdination.leaveStartDate = props.data.leaveStartDate;
+    formDataOrdination.leaveEndDate = props.data.leaveEndDate;
+    formDataOrdination.totalLeave = props.data.leaveTotal;
+    formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
+    formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName;
+    formDataOrdination.ordainDayLocationNumber =
+      props.data.ordainDayLocationNumber;
+    formDataOrdination.ordainDayLocationAddress =
+      props.data.ordainDayLocationAddress;
+    formDataOrdination.ordainDayBuddhistLentName =
+      props.data.ordainDayBuddhistLentName;
+    formDataOrdination.ordainDayBuddhistLentAddress =
+      props.data.ordainDayBuddhistLentAddress;
+    formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
+    formDataOrdination.leaveDetail = props.data.leaveDetail;
+    // formDataOrdination.leaveDocument = props.data.leaveDocument;
+  }
+});
+</script>
+
+<!-- ฟอร์ม ลาอุปสมบท -->
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate" class="full-width">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          bg-color="white"
+          hide-bottom-space
+          v-model="formDataOrdination.leaveWrote"
+          label="เขียนที่"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataOrdination.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          @update:model-value="formDataOrdination.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              bg-color="white"
+              dense
+              ref="leaveStartDateRef"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formDataOrdination.leaveStartDate != null
+                  ? date2Thai(formDataOrdination.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataOrdination.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          @update:model-value="updateLeaveTotal, fetchCheck()"
+          :readonly="!formDataOrdination.leaveStartDate"
+          :enableTimePicker="false"
+          :min-date="formDataOrdination.leaveStartDate"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              bg-color="white"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formDataOrdination.leaveEndDate != null
+                  ? date2Thai(formDataOrdination.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :readonly="!formDataOrdination.leaveStartDate"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          bg-color="white"
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataOrdination.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+          hide-bottom-space
+        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formDataOrdination.leavegovernmentDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              readonly
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  ref="leavegovernmentDateRef"
+                  dense
+                  bg-color="white"
+                  hide-bottom-space
+                  readonly
+                  class="full-width"
+                  :model-value="
+                    formDataOrdination.leavegovernmentDate != null
+                      ? date2Thai(formDataOrdination.leavegovernmentDate)
+                      : null
+                  "
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <datepicker
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formDataOrdination.leavebirthDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              readonly
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  ref="leavebirthDateRef"
+                  dense
+                  bg-color="white"
+                  hide-bottom-space
+                  readonly
+                  class="full-width"
+                  :model-value="
+                    formDataOrdination.leavebirthDate != null
+                      ? date2Thai(formDataOrdination.leavebirthDate)
+                      : null
+                  "
+                  :label="`${'วันเดือนปีเกิด'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันเดือนปีเกิด'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+
+        <div class="q-pl-sm text-weight-bold text-dark col-12">
+          เคยบวชหรือไม่
+        </div>
+        <div class="col-12">
+          <q-radio
+            v-model="formDataOrdination.ordainDayStatus"
+            val="true"
+            label="เคยบวช"
+            checked-icon="task_alt "
+            hide-bottom-space
+          />
+          <q-radio
+            v-model="formDataOrdination.ordainDayStatus"
+            val="false"
+            label="ไม่เคยบวช"
+            checked-icon="task_alt"
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataOrdination.ordainDayOrdination"
+          :locale="'th'"
+          autoApply
+          full-width
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              ref="ordainDayOrdinationRef"
+              dense
+              bg-color="white"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formDataOrdination.ordainDayOrdination != null
+                  ? date2Thai(formDataOrdination.ordainDayOrdination)
+                  : null
+              "
+              :label="`${'วันอุปสมบท'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <q-input
+          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+          dense
+          hide-bottom-space
+          ref="ordainDayLocationNameRef"
+          bg-color="white"
+          outlined
+          full-width
+          v-model="formDataOrdination.ordainDayLocationName"
+          label="ชื่อวัด"
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+        />
+
+        <q-input
+          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+          ref="ordainDayLocationNumberRef"
+          dense
+          full-width
+          outlined
+          v-model="formDataOrdination.ordainDayLocationNumber"
+          bg-color="white"
+          mask="(###)-###-####"
+          unmasked-value
+          hide-bottom-space
+          label="หมายเลขโทรศัพท์"
+          :rules="[(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
+        />
+        <q-input
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          ref="ordainDayLocationAddressRef"
+          bg-color="white"
+          outlined
+          hide-bottom-space
+          v-model="formDataOrdination.ordainDayLocationAddress"
+          label="ที่อยู่"
+          :rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
+          type="textarea"
+        />
+
+        <div class="q-pl-sm text-weight-bold text-dark col-12">
+          สถานที่จำพรรษา
+        </div>
+        <q-input
+          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+          dense
+          ref="ordainDayBuddhistLentNameRef"
+          bg-color="white"
+          hide-bottom-space
+          outlined
+          v-model="formDataOrdination.ordainDayBuddhistLentName"
+          label="ชื่อวัด"
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+        />
+
+        <q-input
+          class="col-12 cursor-pointer inputgreen"
+          dense
+          ref="ordainDayBuddhistLentAddressRef"
+          bg-color="white"
+          outlined
+          v-model="formDataOrdination.ordainDayBuddhistLentAddress"
+          label="ที่อยู่"
+          :rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
+          type="textarea"
+          hide-bottom-space
+        />
+        <q-input
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          bg-color="white"
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataOrdination.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            ref="leaveDocumentRef"
+            v-model="formDataOrdination.leaveDocument"
+            @added="fileUploadDoc"
+            dense
+            label="เอกสารประกอบ"
+            outlined
+            bg-color="white"
+            multiple
+            use-chips
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.fileName }}
+                  </q-item-label>
+
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <q-separator class="q-mt-sm" />
+
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
new file mode 100644
index 0000000..c73e3e2
--- /dev/null
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -0,0 +1,442 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const router = useRouter();
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  calculateDurationYmd,
+  fails,
+  messageError,
+  success,
+  dateToISO,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const leavegovernmentDateRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataHaji = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leavegovernmentDate: new Date(),
+  leaveStartDate: null,
+  leaveEndDate: null,
+  totalLeave: new Date(),
+  hajjDayStatus: "true",
+  leaveDocument: null,
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: HajiForm = {
+  leaveWrote: leaveWroteRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+function onValidate() {
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataHaji.leaveDocument.length > 0) {
+    // 	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)
+    // }
+    formData.append("leaveDocument", formDataHaji.leaveDocument);
+    formData.append("type", formDataHaji.type);
+    formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate));
+    formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate));
+    formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
+    formData.append("leaveWrote", formDataHaji.leaveWrote);
+    formData.append("leaveDetail", formDataHaji.leaveDetail);
+    formData.append(
+      "leavegovernmentDate",
+      dateToISO(formDataHaji.leavegovernmentDate)
+    );
+    props.onSubmit(FormData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataHaji.leaveStartDate ?? null,
+      EndLeaveDate: formDataHaji.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        // formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+        formDataHaji.leaveTotal = data.totalDate;
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataHaji.leaveStartDate,
+    formDataHaji.leaveEndDate
+  );
+  formDataHaji.leaveTotal = newLeaveTotal;
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataHaji.leaveWrote = props.data.leaveWrote;
+    formDataHaji.leavegovernmentDate = props.data.leavegovernmentDate;
+    formDataHaji.leaveStartDate = props.data.leaveStartDate;
+    formDataHaji.leaveEndDate = props.data.leaveEndDate;
+    formDataHaji.totalLeave = props.data.totalLeave;
+    formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
+    formDataHaji.leaveDetail = props.data.leaveDetail;
+    // formDataHaji.leaveDocument = props.data.leaveDocument;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate" class="full-width">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataHaji.leaveWrote"
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          label="เขียนที่"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              v-model="formDataHaji.leaveStartDate"
+              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+              @update:model-value="formDataHaji.leaveEndDate = null"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leaveStartDateRef"
+                  bg-color="white"
+                  class="full-width datepicker"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  :label="`${'ลาตั้งแต่วันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                  :model-value="
+                    formDataHaji.leaveStartDate != null
+                      ? date2Thai(formDataHaji.leaveStartDate)
+                      : null
+                  "
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <datepicker
+              v-model="formDataHaji.leaveEndDate"
+              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+              @update:model-value="updateLeaveTotal"
+              :readonly="!formDataHaji.leaveStartDate"
+              :min-date="formDataHaji.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leaveEndDateRef"
+                  class="full-width datepicker"
+                  bg-color="white"
+                  outlined
+                  dense
+                  :readonly="!formDataHaji.leaveStartDate"
+                  hide-bottom-space
+                  :label="`${'ลาถึงวันที่'}`"
+                  @update:model-value="fetchCheck()"
+                  :model-value="
+                    formDataHaji.leaveEndDate != null
+                      ? date2Thai(formDataHaji.leaveEndDate)
+                      : null
+                  "
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <q-input
+              class="col-12 col-md-2 col-sm-6"
+              dense
+              outlined
+              bg-color="white"
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="formDataHaji.leaveTotal"
+              label="จำนวนวันที่ลา"
+              readonly
+              hide-bottom-space
+            />
+            <datepicker
+              v-model="formDataHaji.leavegovernmentDate"
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              readonly
+              week-start="0"
+              :locale="'th'"
+              :enableTimePicker="false"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavegovernmentDateRef"
+                  bg-color="white"
+                  class="full-width"
+                  outlined
+                  dense
+                  readonly
+                  hide-bottom-space
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :model-value="
+                    formDataHaji.leavegovernmentDate != null
+                      ? date2Thai(formDataHaji.leavegovernmentDate)
+                      : null
+                  "
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+
+        <div class="q-pl-sm text-weight-bold text-dark col-12">
+          เคยไปประกอบพิธีฮัจญ์หรือไม่
+        </div>
+        <div class="col-12">
+          <q-radio
+            v-model="formDataHaji.hajjDayStatus"
+            val="true"
+            checked-icon="task_alt"
+            label="เคย"
+          />
+          <q-radio
+            v-model="formDataHaji.hajjDayStatus"
+            val="false"
+            checked-icon="task_alt"
+            label="ไม่เคยไปประกอบพิธีฮัจญ์"
+          />
+        </div>
+
+        <q-input
+          v-model="formDataHaji.leaveDetail"
+          class="col-12 q-mt-sm cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            v-model="formDataHaji.leaveDocument"
+            bg-color="white"
+            label="เอกสารประกอบ"
+            use-chips
+            @added="fileUploadDoc"
+            dense
+            outlined
+            multiple
+            hide-bottom-space
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.fileName }}
+                  </q-item-label>
+
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
new file mode 100644
index 0000000..5de9cec
--- /dev/null
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -0,0 +1,493 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const router = useRouter();
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  calculateDurationYmd,
+  dateToISO,
+  success,
+  messageError,
+  fails,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+const absentDaySummonRef = ref<object | null>(null);
+const absentDayLocationRef = ref<object | null>(null);
+const absentDayRegistorDateRef = ref<object | null>(null);
+const absentDayGetInRef = ref<object | null>(null);
+const absentDayAtRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataMilitary = reactive<any>({
+  type: dataStore.typeId,
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: 0,
+  leaveDocument: null,
+  leaveWrote: "",
+  absentDaySummon: "",
+  absentDayLocation: "",
+  absentDayRegistorDate: null,
+  absentDayGetIn: "",
+  absentDayAt: "",
+  leaveDetail: "",
+});
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: MilitaryForm = {
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveWrote: leaveWroteRef,
+  absentDaySummon: absentDaySummonRef,
+  absentDayLocation: absentDayLocationRef,
+  absentDayRegistorDate: absentDayRegistorDateRef,
+  absentDayGetIn: absentDayGetInRef,
+  absentDayAt: absentDayAtRef,
+  leaveDetail: leaveDetailRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+function onValidate() {
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataMilitary.leaveDocument.length > 0) {
+    // 	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)
+    // }
+    formData.append("leaveDocument", formDataMilitary.leaveDocument);
+    formData.append("type", formDataMilitary.type);
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataMilitary.leaveStartDate)
+    );
+    formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate));
+    formData.append("absentDaySummon", formDataMilitary.absentDaySummon);
+    formData.append("absentDayLocation", formDataMilitary.absentDayLocation);
+    formData.append(
+      "absentDayRegistorDate",
+      dateToISO(formDataMilitary.absentDayRegistorDate)
+    );
+    formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn);
+    formData.append("absentDayAt", formDataMilitary.absentDayAt);
+    formData.append("leaveWrote", formDataMilitary.leaveWrote);
+    formData.append("leaveDetail", formDataMilitary.leaveDetail);
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataMilitary.leaveStartDate ?? null,
+      EndLeaveDate: formDataMilitary.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        // formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+        formDataMilitary.leaveTotal = data.totalDate;
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataMilitary.leaveStartDate,
+    formDataMilitary.leaveEndDate
+  );
+  formDataMilitary.leaveTotal = newLeaveTotal;
+  console.log("test");
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataMilitary.leaveWrote = props.data.leaveWrote;
+    formDataMilitary.leaveStartDate = props.data.leaveStartDate;
+    formDataMilitary.leaveEndDate = props.data.leaveEndDate;
+    formDataMilitary.leaveTotal = props.data.leaveTotal;
+    formDataMilitary.absentDaySummon = props.data.absentDaySummon;
+    formDataMilitary.absentDayLocation = props.data.absentDayLocation;
+    formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate;
+    formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
+    formDataMilitary.absentDayAt = props.data.absentDayAt;
+    formDataMilitary.leaveDetail = props.data.leaveDetail;
+    // formDataMilitary.leaveDocument = props.data.leaveDocument;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          bg-color="white"
+          hide-bottom-space
+          v-model="formDataMilitary.leaveWrote"
+          label="เขียนที่"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataMilitary.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          @update:model-value="formDataMilitary.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              bg-color="white"
+              dense
+              ref="leaveStartDateRef"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formDataMilitary.leaveStartDate != null
+                  ? date2Thai(formDataMilitary.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataMilitary.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          @update:model-value="updateLeaveTotal, fetchCheck()"
+          :readonly="!formDataMilitary.leaveStartDate"
+          :min-date="formDataMilitary.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              bg-color="white"
+              hide-bottom-space
+              :readonly="!formDataMilitary.leaveStartDate"
+              class="full-width datepicker"
+              :model-value="
+                formDataMilitary.leaveEndDate != null
+                  ? date2Thai(formDataMilitary.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          bg-color="white"
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataMilitary.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+          hide-bottom-space
+        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              ref="absentDaySummonRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              v-model="formDataMilitary.absentDaySummon"
+              label="ได้รับหมายเรียกของ"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
+            />
+
+            <q-input
+              ref="atRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              v-model="formDataMilitary.absentDayLocation"
+              label="ที่"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกที่'}`]"
+            />
+          </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataMilitary.absentDayRegistorDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="absentDayRegistorDateRef"
+                  bg-color="white"
+                  hide-bottom-space
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataMilitary.absentDayRegistorDate != null
+                      ? date2Thai(formDataMilitary.absentDayRegistorDate)
+                      : null
+                  "
+                  :label="`${'ลงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <q-input
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              ref="absentDayGetInRef"
+              outlined
+              v-model="formDataMilitary.absentDayGetIn"
+              label="ให้เข้ารับการ"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
+            />
+
+            <q-input
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              ref="absentDayAtRef"
+              v-model="formDataMilitary.absentDayAt"
+              label="ณ ที่"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอก ณ ที่'}`]"
+            />
+          </div>
+        </div>
+
+        <q-input
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          bg-color="white"
+          outlined
+          v-model="formDataMilitary.leaveDetail"
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            v-model="formDataMilitary.leaveDocument"
+            dense
+            label="เอกสารประกอบ"
+            outlined
+            bg-color="white"
+            multiple
+            hide-bottom-space
+            use-chips
+            @added="fileUploadDoc"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.fileName }}
+                  </q-item-label>
+
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
new file mode 100644
index 0000000..91a4072
--- /dev/null
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -0,0 +1,646 @@
+<script setup lang="ts">
+import { reactive, ref, computed, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  calculateDurationYmd,
+  fails,
+  dateToISO,
+  success,
+  messageError,
+  arabicNumberToText,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leavebirthDateRef = ref<object | null>(null);
+const leavegovernmentDateRef = ref<object | null>(null);
+const leaveSalaryRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const studyDayScholarshipRef = ref<object | null>(null);
+const studyDayCountryRef = ref<object | null>(null);
+const studyDayUniversityNameRef = ref<object | null>(null);
+const studyDayDegreeLevelRef = ref<object | null>(null);
+const studyDaySubjectRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataStudy = reactive<any>({
+  type: dataStore.typeId, //
+  leaveWrote: "", //
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leavebirthDate: new Date(),
+  leavegovernmentDate: new Date(),
+  leaveSalary: 10000,
+  leaveSalaryText: arabicNumberToText(10000),
+  leaveNumber: "",
+  leaveAddress: "",
+  studyDayScholarship: "",
+  studyDayCountry: "",
+  studyDayUniversityName: "", //
+  studyDayDegreeLevel: "", //
+  studyDaySubject: "", //
+  leaveDocument: "", //
+  leaveDetail: "",
+  leaveTotal: "",
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: studyDaySubjectForm = {
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leavebirthDate: leavebirthDateRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leaveSalary: leaveSalaryRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  studyDayScholarship: studyDayScholarshipRef,
+  studyDayCountry: studyDayCountryRef,
+  studyDayUniversityName: studyDayUniversityNameRef,
+  studyDayDegreeLevel: studyDayDegreeLevelRef,
+  studyDaySubject: studyDaySubjectRef,
+  leaveWrote: leaveWroteRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+function onValidate() {
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataStudy.leaveDocument.length > 0) {
+    // 	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)
+    // }
+    formData.append("leaveDocument", formDataStudy.leaveDocument);
+    formData.append("type", formDataStudy.type); //
+    formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)); //
+    formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)); //
+    formData.append("studyDaySubject", formDataStudy.studyDaySubject);
+    formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel);
+    formData.append(
+      "leavegovernmentDate",
+      dateToISO(formDataStudy.leavegovernmentDate)
+    );
+    formData.append("leavebirthDate", dateToISO(formDataStudy.leavebirthDate));
+    formData.append(
+      "studyDayUniversityName",
+      formDataStudy.studyDayUniversityName
+    );
+    formData.append("studyDayCountry", formDataStudy.studyDayCountry);
+    formData.append("leaveWrote", formDataStudy.leaveWrote); //
+    formData.append("leaveDetail", formDataStudy.leaveDetail); //
+    formData.append("studyDayScholarship", formDataStudy.studyDayScholarship);
+    formData.append("leaveAddress", formDataStudy.leaveAddress); //
+    formData.append("leaveNumber", formDataStudy.leaveNumber); //
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataStudy.leaveStartDate ?? null,
+      EndLeaveDate: formDataStudy.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataStudy.leaveTotal =
+          data.fetchCheck - data.sumDateWork - data.sumDateHoliday;
+        // formDataStudy.leaveLast = data.fetchCheck
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataStudy.leaveStartDate,
+    formDataStudy.leaveEndDate
+  );
+  formDataStudy.leaveTotal = newLeaveTotal;
+  console.log("test");
+}
+
+/**
+ * แปลงตัวเลขเงินเดือน
+ */
+const formattedleaveSalary = computed(() => {
+  return dataStore.salary !== null
+    ? dataStore.salary.toLocaleString("th-TH")
+    : "";
+});
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataMilitary.leaveWrote = props.data.leaveWrote;
+    formDataMilitary.leaveStartDate = props.data.leaveStartDate;
+    formDataMilitary.leaveEndDate = props.data.leaveEndDate;
+    formDataMilitary.leaveTotal = props.data.leaveTotal;
+    formDataMilitary.leavebirthDate = props.data.leavebirthDate;
+    formDataMilitary.leavegovernmentDate = props.data.leavegovernmentDate;
+    formDataMilitary.leaveSalary = props.data.leaveSalary;
+    formDataMilitary.leaveSalaryText = props.data.leaveSalaryText;
+    formDataMilitary.leaveNumber = props.data.leaveNumber;
+    formDataMilitary.leaveAddress = props.data.leaveAddress;
+    formDataMilitary.studyDayScholarship = props.data.studyDayScholarship;
+    formDataMilitary.studyDayCountry = props.data.studyDayCountry;
+    formDataMilitary.studyDayUniversityName = props.data.studyDayUniversityName;
+    formDataMilitary.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
+    formDataMilitary.studyDaySubject = props.data.studyDaySubject;
+    // formDataMilitary.leaveDocument = props.data.leaveDocument;
+    formDataMilitary.leaveDetail = props.data.leaveDetail;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataStudy.leaveWrote"
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          label="เขียนที่"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          v-model="formDataStudy.leaveStartDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :enableTimePicker="false"
+          :locale="'th'"
+          @update:model-value="formDataStudy.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveStartDateRef"
+              class="full-width datepicker"
+              bg-color="white"
+              outlined
+              dense
+              lazy-rules
+              hide-bottom-space
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :model-value="
+                formDataStudy.leaveStartDate != null
+                  ? date2Thai(formDataStudy.leaveStartDate)
+                  : null
+              "
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          v-model="formDataStudy.leaveEndDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :locale="'th'"
+          @update:model-value="updateLeaveTotal, FetchCheck()"
+          :readonly="!formDataStudy.leaveStartDate"
+          :enableTimePicker="false"
+          :min-date="formDataStudy.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveEndDateRef"
+              class="full-width datepicker"
+              outlined
+              dense
+              lazy-rules
+              bg-color="white"
+              hide-bottom-space
+              :label="`${'ลาถึงวันที่'}`"
+              :readonly="!formDataStudy.leaveStartDate"
+              :model-value="
+                formDataStudy.leaveEndDate != null
+                  ? date2Thai(formDataStudy.leaveEndDate)
+                  : null
+              "
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          bg-color="white"
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataStudy.leaveTotal"
+          label="มีกำหนด"
+          readonly
+          hide-bottom-space
+        />
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              v-model="formDataStudy.leavegovernmentDate"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              readonly
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavegovernmentDateRef"
+                  class="full-width"
+                  bg-color="white"
+                  outlined
+                  readonly
+                  dense
+                  hide-bottom-space
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :model-value="
+                    dataStore.dateAppoint != null
+                      ? date2Thai(dataStore.dateAppoint)
+                      : null
+                  "
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <datepicker
+              v-model="formDataStudy.leavebirthDate"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              readonly
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavebirthDateRef"
+                  class="full-width"
+                  bg-color="white"
+                  outlined
+                  dense
+                  readonly
+                  hide-bottom-space
+                  :label="`${'วันเดือนปีเกิด'}`"
+                  :model-value="
+                    dataStore.birthDate != null
+                      ? date2Thai(dataStore.birthDate)
+                      : null
+                  "
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <q-input
+              v-model="formattedleaveSalary"
+              ref="leaveSalaryRef"
+              class="col-12 col-sm-6 col-md-3"
+              bg-color="white"
+              dense
+              outlined
+              readonly
+              label="เงินเดือนปัจจุบัน"
+            />
+
+            <q-input
+              v-model="dataStore.salaryText"
+              ref="leaveSalaryRef"
+              class="col-12 col-sm-6 col-md-3"
+              bg-color="white"
+              dense
+              readonly
+              outlined
+              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
+            />
+          </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              v-model="formDataStudy.studyDayUniversityName"
+              ref="studyDayUniversityNameRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ชื่อสถานศึกษา"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
+            />
+
+            <q-input
+              v-model="formDataStudy.studyDayDegreeLevel"
+              ref="studyDayDegreeLevelRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ชั้นปริญญา"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
+            />
+
+            <q-input
+              v-model="formDataStudy.studyDaySubject"
+              ref="studyDaySubjectRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ศึกษาวิชา"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
+            />
+
+            <q-input
+              v-model="formDataStudy.studyDayCountry"
+              ref="studyDayCountryRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ประเทศ"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
+            />
+
+            <q-input
+              v-model="formDataStudy.studyDayScholarship"
+              ref="studyDayScholarshipRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ด้วยทุน"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+            />
+
+            <q-input
+              v-model="formDataStudy.leaveNumber"
+              ref="leaveNumberRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              unmasked-value
+              hide-bottom-space
+              mask="(###)-###-####"
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              v-model="formDataStudy.leaveAddress"
+              ref="leaveAddressRef"
+              class="col-12 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              hide-bottom-space
+              :rules="[
+                (val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+
+        <q-input
+          v-model="formDataStudy.leaveDetail"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            v-model="formDataStudy.leaveDocument"
+            bg-color="white"
+            dense
+            outlined
+            multiple
+            use-chips
+            @added="fileUploadDoc"
+            label="เอกสารประกอบ"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.fileName }}
+                  </q-item-label>
+
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
new file mode 100644
index 0000000..3a23e6f
--- /dev/null
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -0,0 +1,622 @@
+<script setup lang="ts">
+import { reactive, ref, computed, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useQuasar } from "quasar";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  arabicNumberToText,
+  calculateDurationYmd,
+  fails,
+  dateToISO,
+  success,
+  messageError,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataTrain = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leavebirthDate: new Date(),
+  leavegovernmentDate: new Date(),
+  leaveSalary: 10000,
+  leaveSalaryText: arabicNumberToText(10000),
+  leaveNumber: "",
+  leaveAddress: "",
+  studyDayScholarship: "",
+  studyDayCountry: "",
+  studyDayTrainingSubject: "",
+  studyDayTrainingName: "",
+  leaveDocument: "",
+  leaveDetail: "",
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leavebirthDateRef = ref<object | null>(null);
+const leavegovernmentDateRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const studyDayScholarshipRef = ref<object | null>(null);
+const studyDayCountryRef = ref<object | null>(null);
+const studyDayTrainingSubjectRef = ref<object | null>(null);
+const studyDayTrainingNameRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: TrainForm = {
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leavebirthDate: leavebirthDateRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  studyDayScholarship: studyDayScholarshipRef,
+  studyDayCountry: studyDayCountryRef,
+  studyDayTrainingSubject: studyDayTrainingSubjectRef,
+  studyDayTrainingName: studyDayTrainingNameRef,
+  leaveWrote: leaveWroteRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+function onValidate() {
+  const hasError = [];
+
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataTrain.leaveDocument.length > 0) {
+    // 	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)
+    // } //
+    formData.append("leaveDocument", formDataTrain.leaveDocument);
+    formData.append("type", formDataTrain.type); //
+    formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)); //
+    formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)); //
+    formData.append("studyDayCountry", formDataTrain.studyDayCountry);
+    formData.append(
+      "leavegovernmentDate",
+      dateToISO(formDataTrain.leavegovernmentDate)
+    );
+    formData.append("leavebirthDate", dateToISO(formDataTrain.leavebirthDate));
+    formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName);
+    formData.append(
+      "studyDayTrainingSubject",
+      formDataTrain.studyDayTrainingSubject
+    );
+    formData.append("leaveWrote", formDataTrain.leaveWrote); //
+    formData.append("leaveDetail", formDataTrain.leaveDetail); //
+    formData.append("studyDayScholarship", formDataTrain.studyDayScholarship);
+    formData.append("leaveAddress", formDataTrain.leaveAddress); //
+    formData.append("leaveNumber", formDataTrain.leaveNumber); //
+    formData.append("leaveSalaryText", formDataTrain.leaveSalaryText); //
+    formData.append("leaveSalary", formDataTrain.leaveSalary); //
+    formData.append("leaveTotal", formDataTrain.leaveTotal); //
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataTrain.leaveStartDate ?? null,
+      EndLeaveDate: formDataTrain.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        // formDataTrain.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+        // formDataTrain.leaveTotal = data.totalDate
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataTrain.leaveStartDate,
+    formDataTrain.leaveEndDate
+  );
+  formDataTrain.leaveTotal = newLeaveTotal;
+  console.log("test");
+}
+
+/**
+ * แปลงตัวเลขเงินเดือน
+ */
+const formattedSalary = computed(() => {
+  return formDataTrain.leaveSalary !== null
+    ? formDataTrain.leaveSalary.toLocaleString("th-TH")
+    : "";
+});
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataTrain.leaveWrote = props.data.leaveWrote;
+    formDataTrain.leaveStartDate = props.data.leaveStartDate;
+    formDataTrain.leaveEndDate = props.data.leaveEndDate;
+    formDataTrain.leavebirthDate = props.data.leavebirthDate;
+    formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate;
+    formDataTrain.leaveSalary = props.data.leaveSalary;
+    formDataTrain.leaveSalaryText = props.data.leaveSalaryText;
+    formDataTrain.leaveNumber = props.data.leaveNumber;
+    formDataTrain.leaveAddress = props.data.leaveAddress;
+    formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
+    formDataTrain.studyDayCountry = props.data.studyDayCountry;
+    formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
+    formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
+    formDataTrain.leaveDetail = props.data.leaveDetail;
+    // formDataTrain.leaveDocument = props.data.leaveDocument;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataTrain.leaveWrote"
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          label="เขียนที่"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          v-model="formDataTrain.leaveStartDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :enableTimePicker="false"
+          :locale="'th'"
+          @update:model-value="formDataTrain.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveStartDateRef"
+              class="full-width datepicker"
+              bg-color="white"
+              outlined
+              dense
+              lazy-rules
+              hide-bottom-space
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :model-value="
+                formDataTrain.leaveStartDate != null
+                  ? date2Thai(formDataTrain.leaveStartDate)
+                  : null
+              "
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          v-model="formDataTrain.leaveEndDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          @update:model-value="updateLeaveTotal, FetchCheck()"
+          week-start="0"
+          :readonly="!formDataTrain.leaveStartDate"
+          :locale="'th'"
+          :enableTimePicker="false"
+          :min-date="formDataTrain.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveEndDateRef"
+              class="full-width datepicker"
+              outlined
+              dense
+              lazy-rules
+              bg-color="white"
+              hide-bottom-space
+              :label="`${'ลาถึงวันที่'}`"
+              :readonly="!formDataTrain.leaveStartDate"
+              :model-value="
+                formDataTrain.leaveEndDate != null
+                  ? date2Thai(formDataTrain.leaveEndDate)
+                  : null
+              "
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          bg-color="white"
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataTrain.leaveTotal"
+          label="มีกำหนด"
+          readonly
+          hide-bottom-space
+        />
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              v-model="formDataTrain.leavegovernmentDate"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              readonly
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavegovernmentDateRef"
+                  class="full-width"
+                  outlined
+                  readonly
+                  bg-color="white"
+                  dense
+                  hide-bottom-space
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :model-value="
+                    formDataTrain.leavegovernmentDate != null
+                      ? date2Thai(formDataTrain.leavegovernmentDate)
+                      : null
+                  "
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <datepicker
+              v-model="formDataTrain.leavebirthDate"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              readonly
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavebirthDateRef"
+                  class="full-width"
+                  bg-color="white"
+                  outlined
+                  dense
+                  readonly
+                  hide-bottom-space
+                  :label="`${'วันเดือนปีเกิด'}`"
+                  :model-value="
+                    formDataTrain.leavebirthDate != null
+                      ? date2Thai(formDataTrain.leavebirthDate)
+                      : null
+                  "
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(---black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <q-input
+              v-model="formattedSalary"
+              class="col-12 col-sm-6 col-md-3"
+              bg-color="white"
+              dense
+              outlined
+              readonly
+              label="เงินเดือนปัจจุบัน"
+            />
+
+            <q-input
+              v-model="formDataTrain.leaveSalaryText"
+              class="col-12 col-sm-6 col-md-3"
+              dense
+              readonly
+              outlined
+              bg-color="white"
+              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
+            />
+          </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              v-model="formDataTrain.studyDayTrainingSubject"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              ref="studyDayTrainingSubjectRef"
+              bg-color="white"
+              dense
+              outlined
+              label="ด้าน/หลักสูตร"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
+            />
+
+            <q-input
+              v-model="formDataTrain.studyDayTrainingName"
+              ref="studyDayTrainingNameRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ณ สถานที่"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
+            />
+
+            <q-input
+              v-model="formDataTrain.studyDayCountry"
+              ref="studyDayCountryRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              label="ประเทศ"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
+            />
+
+            <q-input
+              v-model="formDataTrain.studyDayScholarship"
+              ref="studyDayScholarshipRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ด้วยทุน"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+            />
+
+            <q-input
+              v-model="formDataTrain.leaveNumber"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              ref="leaveNumberRef"
+              dense
+              outlined
+              unmasked-value
+              hide-bottom-space
+              bg-color="white"
+              mask="(###)-###-####"
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              v-model="formDataTrain.leaveAddress"
+              ref="leaveAddressRef"
+              class="col-12 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              hide-bottom-space
+              :rules="[
+                (val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+
+        <q-input
+          v-model="formDataTrain.leaveDetail"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            v-model="formDataTrain.leaveDocument"
+            bg-color="white"
+            dense
+            outlined
+            multiple
+            label="เอกสารประกอบ"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.fileName }}
+                  </q-item-label>
+
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
new file mode 100644
index 0000000..100ec11
--- /dev/null
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -0,0 +1,461 @@
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted } from "vue";
+import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+import genReport from "@/plugins/genreport";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } =
+  mixin;
+const edit = ref<boolean>(true);
+const router = useRouter();
+const isSave = ref<boolean>(false);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataWorkInternational = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveDetail: "",
+  leaveDocument: null,
+  leaveDraftDocument: null,
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const FormRef: FormRef = {
+  leaveWrote: leaveWroteRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveDetail: leaveDetailRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const nameFileDraft = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function onValidate() {
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  // ถ้า Validate ผ่านให้บันทึกข้อมูล
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // //
+    // if (formDataWorkInternational.leaveDocument.length > 0) {
+    // 	const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataWorkInternational.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+
+    if (formDataWorkInternational.leaveDocument) {
+      formData.append("leaveDocument", formDataWorkInternational.leaveDocument);
+    }
+
+    if (formDataWorkInternational.leaveDraftDocument) {
+      formData.append(
+        "leaveDraftDocument",
+        formDataWorkInternational.leaveDraftDocument
+      );
+    }
+    formData.append("type", formDataWorkInternational.type); //
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataWorkInternational.leaveStartDate)
+    ); //
+    formData.append(
+      "leaveEndDate",
+      dateToISO(formDataWorkInternational.leaveEndDate)
+    ); //
+    formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
+    formData.append("leaveDetail", formDataWorkInternational.leaveDetail); //
+    props.onSubmit(FormData);
+  }
+}
+
+//download function
+async function onClickDownloadFile(id: string, fileName: string) {
+  // showLoader();
+  await http
+    .get(config.API.leaveReport(id))
+    .then(async (res) => {
+      const data = res.data.result;
+      await genReport(data, fileName);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
+      EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataWorkInternational.leaveTotal =
+          data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        // formDataWorkInternational.leaveLast = data.totalDate
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataWorkInternational.leaveWrote = props.data.leaveWrote;
+    formDataWorkInternational.leaveStartDate = new Date(
+      props.data.leaveStartDate
+    );
+    formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
+    formDataWorkInternational.leaveDetail = props.data.leaveDetail;
+    // formDataWorkInternational.leaveDocument = props.data.leaveDocument;
+    // formDataWorkInternational.leaveDraftDocument =
+    //   props.data.leaveDraftDocument;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          hide-bottom-space
+          bg-color="white"
+          for="leaveWroteRef"
+          dense
+          outlined
+          v-model="formDataWorkInternational.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataWorkInternational.leaveStartDate"
+          :locale="'th'"
+          hide-bottom-space
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+          @update:model-value="formDataWorkInternational.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveStartDateRef"
+              for="leaveStartDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataWorkInternational.leaveStartDate != null
+                  ? date2Thai(formDataWorkInternational.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataWorkInternational.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          @update:model-value="FetchCheck()"
+          week-start="0"
+          :readonly="!formDataWorkInternational.leaveStartDate"
+          :min-date="formDataWorkInternational.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              for="leaveEndDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!formDataWorkInternational.leaveStartDate"
+              class="full-width datepicker"
+              :model-value="
+                formDataWorkInternational.leaveEndDate != null
+                  ? date2Thai(formDataWorkInternational.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <!-- <q-input
+							class="col-md-3 col-sm-12"
+							dense
+							outlined
+							ref="leaveTotalRef"
+							for="leaveTotalRef"
+							type="number"
+							v-model="formDataWorkInternational.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+						/> -->
+
+        <q-input
+          hide-bottom-space
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          bg-color="white"
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataWorkInternational.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <q-file
+          ref="fileRef"
+          bg-color="white"
+          v-model="formDataWorkInternational.leaveDocument"
+          @added="fileUploadDoc"
+          dense
+          label="เอกสารประกอบ"
+          outlined
+          use-chips
+          class="q-pl-sm col-12"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+        </q-file>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in formDataWorkInternational.leaveDocument"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <div
+      v-if="
+        formDataWorkInternational.leaveWrote &&
+        formDataWorkInternational.leaveEndDate &&
+        formDataWorkInternational.leaveStartDate
+      "
+      class="q-mt-md"
+    >
+      <div style="display: flex; align-items: center">
+        <q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
+        <div class="q-pl-sm text-weight-bold text-dark">
+          ดาวน์โหลด/อัปโหลดแบบฟอร์ม
+        </div>
+      </div>
+      <q-card class="bg-grey-1 q-pa-sm" bordered>
+        <div class="row">
+          <div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
+            <div class="column q-mx-xs">
+              <div class="q-pl-sm text-weight-bold text-dark text-center">
+                ดาวน์โหลด
+              </div>
+              <q-btn
+                color="primary"
+                icon="download"
+                label="ดาวน์โหลดแบบฟอร์ม"
+                @click="
+                  onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
+                "
+              />
+            </div>
+          </div>
+          <div class="col-10 col-sm-5 col-md-4 q-my-sm">
+            <div class="column q-mx-xs">
+              <div class="q-pl-sm text-weight-bold text-dark text-center">
+                อัปโหลด
+              </div>
+              <q-file
+                v-model="formDataWorkInternational.leaveDraftDocument"
+                dense
+                label="แบบฟอร์ม"
+                outlined
+                bg-color="white"
+                accept=".pdf"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+          <!-- <div class="col-md-1 self-end q-mb-sm">
+						<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
+							><q-tooltip>อัปโหลด</q-tooltip></q-btn
+						>
+					</div> -->
+        </div>
+      </q-card>
+    </div>
+
+    <div v-if="!isSave">
+      <q-separator class="q-mt-sm" />
+      <div class="row col-12 q-pt-md">
+        <q-space />
+        <q-btn
+          id="onSubmit"
+          type="submit"
+          unelevated
+          dense
+          class="q-px-md items-center btnBlue"
+          label="บันทึก"
+          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        >
+        <q-btn
+          v-if="data"
+          id="onSubmit"
+          type="button"
+          unelevated
+          dense
+          class="q-px-md items-center q-ml-sm"
+          color="primary"
+          label="ยื่นใบลา"
+          @click="onConfirm"
+          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        >
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
new file mode 100644
index 0000000..58d292b
--- /dev/null
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -0,0 +1,681 @@
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from "vue";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/05_leave/interface/request/FollowSpouseForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const router = useRouter();
+const {
+  dialogConfirm,
+  date2Thai,
+  arabicNumberToText,
+  calculateDurationYmd,
+  dateToISO,
+  fails,
+  success,
+  messageError,
+} = mixin;
+const edit = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataFollowSpouse = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "", //จำนวนวันลา
+  leaveSalaryText: 25000,
+  leaveSalary: 25000, //เงินเดือนปัจจุบัน
+  coupleDayName: "", //ชื่อคู่สมรส
+  coupleDayPosition: "", //ตำแหน่งคู่สมรส
+  coupleDayLevel: "", //ระดับคู่สมรส
+  coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
+  followHistoryCountry: "ลาว", //ประวัติการลาติดตามคู่สมรส
+  followHistoryTime: "0 วัน",
+  followHistoryStart: new Date(),
+  followHistoryEnd: new Date(),
+  leaveDetail:
+    "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
+  leaveDocument: [], //เอกสารปะกอบ
+});
+
+/** แปลงตัวแปร Salary */
+const formattleaveSalaryText = arabicNumberToText(
+  formDataFollowSpouse.leaveSalaryText
+);
+const formattSalary = computed(() => {
+  return formDataFollowSpouse.leaveSalary !== null
+    ? formDataFollowSpouse.leaveSalary.toLocaleString("th-TH")
+    : "";
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveSalaryRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
+const coupleDayNameRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const coupleDayPositionRef = ref<object | null>(null);
+const coupleDayLevelRef = ref<object | null>(null);
+const coupleDayLevelCountryRef = ref<object | null>(null);
+const followHistoryCountryRef = ref<object | null>(null);
+const followHistoryTimeRef = ref<object | null>(null);
+const followHistoryStartRef = ref<object | null>(null);
+const followHistoryEndRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const FormRef: FormRef = {
+  leaveWrote: leaveWroteRef, //เขียนที่***
+  leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
+  leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
+  leaveTotal: leaveTotalRef, //จำนวนวันลา
+  leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
+  coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
+  coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
+  coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
+  coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
+  followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
+  followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
+  followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
+  followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
+  leaveDetail: leaveDetailRef, //รายละเอียดการลา
+  leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function onValidate() {
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataFollowSpouse.leaveDocument.length > 0) {
+    // 	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)
+    // } //
+    formData.append("leaveDocument", formDataFollowSpouse.leaveDocument);
+    formData.append("type", formDataFollowSpouse.type); //
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataFollowSpouse.leaveStartDate)
+    ); //
+    formData.append(
+      "leaveEndDate",
+      dateToISO(formDataFollowSpouse.leaveEndDate)
+    ); //
+    formData.append(
+      "followHistoryStart",
+      dateToISO(formDataFollowSpouse.followHistoryStart)
+    ); //
+    formData.append(
+      "followHistoryEnd",
+      dateToISO(formDataFollowSpouse.followHistoryEnd)
+    ); //
+    formData.append("leaveWrote", formDataFollowSpouse.leaveWrote); //
+    formData.append("leaveDetail", formDataFollowSpouse.leaveDetail); //
+    formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText); //
+    formData.append("leaveSalary", formDataFollowSpouse.leaveSalary); //
+    formData.append(
+      "followHistoryTime",
+      formDataFollowSpouse.followHistoryTime
+    ); //
+    formData.append(
+      "followHistoryCountry",
+      formDataFollowSpouse.followHistoryCountry
+    ); //
+    formData.append(
+      "coupleDayLevelCountry",
+      formDataFollowSpouse.coupleDayLevelCountry
+    ); //
+    formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel); //
+    formData.append(
+      "coupleDayPosition",
+      formDataFollowSpouse.coupleDayPosition
+    ); //
+    formData.append("coupleDayName", formDataFollowSpouse.coupleDayName); //
+    formData.append("leaveTotal", formDataFollowSpouse.leaveTotal); //
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null,
+      EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataFollowSpouse.leaveTotal =
+          // data.totalDate - data.sumDateWork - data.sumDateHoliday;
+          formDataFollowSpouse.leaveTotal = data.totalDate;
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataFollowSpouse.leaveStartDate,
+    formDataFollowSpouse.leaveEndDate
+  );
+  formDataFollowSpouse.leaveTotal = newLeaveTotal;
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
+    formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate);
+    formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
+    formDataFollowSpouse.leaveDetail = props.data.leaveDetail;
+    formDataFollowSpouse.leaveDocument = props.data.leaveDocument;
+    formDataFollowSpouse.leaveTotal = props.data.leaveTotal;
+    formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText;
+    formDataFollowSpouse.leaveSalary = props.data.leaveSalary;
+    formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
+    formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition;
+    formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
+    formDataFollowSpouse.coupleDayLevelCountry =
+      props.data.coupleDayLevelCountry;
+    formDataFollowSpouse.followHistoryCountry = props.data.followHistoryCountry;
+    formDataFollowSpouse.followHistoryTime = props.data.followHistoryTime;
+    formDataFollowSpouse.followHistoryStart = props.data.followHistoryStart;
+    formDataFollowSpouse.followHistoryEnd = props.data.followHistoryEnd;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          hide-bottom-space
+          bg-color="white"
+          outlined
+          v-model="formDataFollowSpouse.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+          @update:model-value="formDataFollowSpouse.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveStartDateRef"
+              for="leaveStartDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataFollowSpouse.leaveStartDate != null
+                  ? date2Thai(formDataFollowSpouse.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          week-start="0"
+          @update:model-value="updateLeaveTotal, FetchCheck()"
+          :readonly="!formDataFollowSpouse.leaveStartDate"
+          :min-date="formDataFollowSpouse.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              for="leaveEndDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!formDataFollowSpouse.leaveStartDate"
+              class="full-width datepicker"
+              :model-value="
+                formDataFollowSpouse.leaveEndDate != null
+                  ? date2Thai(formDataFollowSpouse.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          bg-color="white"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataFollowSpouse.leaveTotal"
+          label="เป็นเวลา"
+          readonly
+          hide-bottom-space
+        />
+        <div class="col-12 col-md-6 col-sm-12">
+          <q-input
+            hide-bottom-space
+            bg-color="white"
+            class="col-12 col-sm-12"
+            ref="leaveSalaryRef"
+            for="leaveSalaryRef"
+            dense
+            outlined
+            v-model="formattSalary"
+            label="เงินเดือนปัจจุบัน"
+            readonly
+          />
+        </div>
+        <div class="col-12 col-md-6 col-sm-12">
+          <q-input
+            hide-bottom-space
+            bg-color="white"
+            class="col-12 col-sm-12"
+            ref="leaveSalaryRef"
+            for="leaveSalaryRef"
+            dense
+            outlined
+            v-model="formattleaveSalaryText"
+            label="เงินเดือนปัจจุบัน"
+            readonly
+          />
+        </div>
+
+        <div class="col-md-3 col-sm-12">
+          <q-input
+            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            hide-bottom-space
+            ref="coupleDayNameRef"
+            for="coupleDayNameRef"
+            dense
+            bg-color="white"
+            outlined
+            v-model="formDataFollowSpouse.coupleDayName"
+            label="ชื่อคู่สมรส"
+            :readonly="!edit"
+            :rules="[(val) => !!val || `${'ชื่อคู่สมรส'}`]"
+          />
+        </div>
+        <div class="col-md-3 col-sm-12">
+          <q-input
+            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            hide-bottom-space
+            ref="coupleDayPositionRef"
+            for="coupleDayPositionRef"
+            dense
+            outlined
+            bg-color="white"
+            v-model="formDataFollowSpouse.coupleDayPosition"
+            label="ตำแหน่งคู่สมรส"
+            :readonly="!edit"
+            :rules="[(val) => !!val || `${'ตำแหน่งคู่สมรส'}`]"
+          />
+        </div>
+        <div class="col-md-3 col-sm-12">
+          <q-input
+            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            ref="coupleDayLevelRef"
+            for="coupleDayLevelRef"
+            dense
+            hide-bottom-space
+            outlined
+            bg-color="white"
+            v-model="formDataFollowSpouse.coupleDayLevel"
+            label="ระดับคู่สมรส"
+            :readonly="!edit"
+            :rules="[(val) => !!val || `${'ระดับคู่สมรส'}`]"
+          />
+        </div>
+        <div class="col-md-3 col-sm-12">
+          <q-input
+            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            ref="coupleDayLevelCountryRef"
+            for="coupleDayLevelCountryRef"
+            hide-bottom-space
+            dense
+            outlined
+            bg-color="white"
+            v-model="formDataFollowSpouse.coupleDayLevelCountry"
+            label="ไปปฏิบัติราชการ ณ ประเทศ"
+            :readonly="!edit"
+            :rules="[(val) => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
+          />
+        </div>
+        <div class="text-weight-bold text-dark col-12">
+          ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย
+        </div>
+        <datepicker
+          class="col-12 col-md-3 col-sm-12"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.followHistoryStart"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          readonly
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="followHistoryStartRef"
+              for="followHistoryStartRef"
+              hide-bottom-space
+              readonly
+              bg-color="white"
+              class="full-width"
+              :model-value="
+                formDataFollowSpouse.followHistoryStart != null
+                  ? date2Thai(formDataFollowSpouse.followHistoryStart)
+                  : null
+              "
+              :label="`${'ตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--black)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <datepicker
+          class="col-12 col-md-3 col-sm-12"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.followHistoryEnd"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          readonly
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="followHistoryEndRef"
+              for="followHistoryEndRef"
+              hide-bottom-space
+              bg-color="white"
+              readonly
+              class="full-width"
+              :model-value="
+                formDataFollowSpouse.followHistoryEnd != null
+                  ? date2Thai(formDataFollowSpouse.followHistoryEnd)
+                  : null
+              "
+              :label="`${'ถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--black)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-3 col-sm-12"
+          dense
+          outlined
+          hide-bottom-space
+          bg-color="white"
+          ref="followHistoryCountryRef"
+          for="followHistoryCountryRef"
+          v-model="formDataFollowSpouse.followHistoryCountry"
+          label="ประเทศ"
+          :rules="[(val) => !!val || `${'กรุณาเลือกประเทศ'}`]"
+          readonly
+        />
+        <q-input
+          class="col-12 col-md-3 col-sm-12"
+          dense
+          outlined
+          :readonly="formDataFollowSpouse.followHistoryTime !== ''"
+          hide-bottom-space
+          bg-color="white"
+          ref="followHistoryTimeRef"
+          for="followHistoryTimeRef"
+          v-model="formDataFollowSpouse.followHistoryTime"
+          label="เป็นเวลา"
+        />
+
+        <q-input
+          hide-bottom-space
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          bg-color="white"
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataFollowSpouse.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <q-file
+          ref="fileRef"
+          bg-color="white"
+          v-model="formDataFollowSpouse.leaveDocument"
+          @added="fileUploadDoc"
+          dense
+          label="เอกสารประกอบ"
+          outlined
+          use-chips
+          multiple
+          class="q-pl-sm col-12"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+        </q-file>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in formDataFollowSpouse.leaveDocument"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
new file mode 100644
index 0000000..aa10f03
--- /dev/null
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -0,0 +1,437 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+import genReport from "@/plugins/genreport";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } =
+  mixin;
+const router = useRouter();
+const edit = ref<boolean>(true);
+const isSave = ref<boolean>(false);
+const files = ref<any>(null);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataRehabilitation = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveDocument: "",
+  leaveDetail: "",
+  leaveDraftDocument: null,
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: RehabilitationForm = {
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveWrote: leaveWroteRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+function onValidate() {
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // 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) //
+    // }
+
+    // if (formDataRehabilitation.leaveDocument.length > 0) {
+    // 	const blob = formDataRehabilitation.leaveDocument.slice(0, formDataRehabilitation.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataRehabilitation.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // } //
+    formData.append(
+      "leaveDraftDocument",
+      formDataRehabilitation.leaveDraftDocument
+    );
+    formData.append("leaveDocument", formDataRehabilitation.leaveDocument);
+    formData.append("type", formDataRehabilitation.type); //
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataRehabilitation.leaveStartDate)
+    ); //
+    formData.append(
+      "leaveEndDate",
+      dateToISO(formDataRehabilitation.leaveEndDate)
+    ); //
+    formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
+    formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
+    props.onSubmit(formData);
+  }
+}
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const nameFileDraft = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null,
+      EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        // formDataRehabilitation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+        // formDataRehabilitation.leaveTotal = data.totalDate
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+//download function
+async function onClickDownloadFile(id: string, fileName: string) {
+  showLoader();
+  await http
+    .get(config.API.leaveReport(id))
+    .then(async (res) => {
+      console.log(res);
+      const data = res.data.result;
+      await genReport(data, fileName);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataRehabilitation.leaveWrote = props.data.leaveWrote;
+    formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
+    formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
+    formDataRehabilitation.leaveDetail = props.data.leaveDetail;
+    // formDataRehabilitation.leaveDocument = props.data.leaveDocument;
+    // formDataRehabilitation.leaveDraftDocument =
+    //   props.data.leaveDraftDocument;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataRehabilitation.leaveWrote"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          dense
+          outlined
+          bg-color="white"
+          label="เขียนที่"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          v-model="formDataRehabilitation.leaveStartDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :enableTimePicker="false"
+          :locale="'th'"
+          @update:model-value="formDataRehabilitation.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveStartDateRef"
+              class="full-width datepicker"
+              bg-color="white"
+              outlined
+              dense
+              lazy-rules
+              hide-bottom-space
+              :model-value="
+                formDataRehabilitation.leaveStartDate != null
+                  ? date2Thai(formDataRehabilitation.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          v-model="formDataRehabilitation.leaveEndDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :locale="'th'"
+          @update:model-value="FetchCheck()"
+          :readonly="!formDataRehabilitation.leaveStartDate"
+          :enableTimePicker="false"
+          :min-date="formDataRehabilitation.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveEndDateRef"
+              class="full-width datepicker"
+              outlined
+              dense
+              lazy-rules
+              bg-color="white"
+              hide-bottom-space
+              :readonly="!formDataRehabilitation.leaveStartDate"
+              :model-value="
+                formDataRehabilitation.leaveEndDate != null
+                  ? date2Thai(formDataRehabilitation.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <q-input
+          v-model="formDataRehabilitation.leaveDetail"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            v-model="formDataRehabilitation.leaveDocument"
+            @added="fileUploadDoc"
+            use-chips
+            bg-color="white"
+            dense
+            outlined
+            multiple
+            label="เอกสารประกอบ"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.fileName }}
+                  </q-item-label>
+
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <div
+      v-if="
+        formDataRehabilitation.leaveWrote &&
+        formDataRehabilitation.leaveStartDate &&
+        formDataRehabilitation.leaveEndDate
+      "
+      class="q-mt-md"
+    >
+      <div style="display: flex; align-items: center">
+        <q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
+        <div class="q-pl-sm text-weight-bold text-dark">
+          ดาวน์โหลด/อัปโหลดแบบฟอร์ม
+        </div>
+      </div>
+      <q-card class="bg-grey-1 q-pa-sm" bordered>
+        <div class="row">
+          <div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
+            <div class="column q-mx-xs">
+              <div class="q-pl-sm text-weight-bold text-dark text-center">
+                ดาวน์โหลด
+              </div>
+              <q-btn
+                color="primary"
+                icon="download"
+                label="ดาวน์โหลดแบบฟอร์ม"
+                @click="
+                  onClickDownloadFile(
+                    '08dc05c8-4cfd-4603-81f8-92a401571717',
+                    'แบบฟอร์ม'
+                  )
+                "
+              />
+            </div>
+          </div>
+          <div class="col-10 col-sm-5 col-md-4 q-my-sm">
+            <div class="column q-mx-xs">
+              <div class="q-pl-sm text-weight-bold text-dark text-center">
+                อัปโหลด
+              </div>
+              <q-file
+                v-model="formDataRehabilitation.leaveDraftDocument"
+                use-chips
+                dense
+                label="แบบฟอร์ม"
+                outlined
+                bg-color="white"
+                multiple
+                accept="application/pdf"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+          <!-- <div class="col-md-1 self-end q-mb-sm">
+						<q-btn v-if="formDataRehabilitation.leaveDraftDocument != null" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
+							><q-tooltip>อัปโหลด</q-tooltip></q-btn
+						>
+					</div> -->
+        </div>
+      </q-card>
+    </div>
+
+    <div v-if="!isSave">
+      <q-separator class="q-mt-sm" />
+      <div class="row col-12 q-pt-md">
+        <q-space />
+        <q-btn
+          id="onSubmit"
+          type="submit"
+          unelevated
+          dense
+          class="q-px-md items-center btnBlue"
+          label="บันทึก"
+          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        >
+        <q-btn
+          v-if="data"
+          id="onSubmit"
+          type="button"
+          unelevated
+          dense
+          class="q-px-md items-center q-ml-sm"
+          color="primary"
+          label="ยื่นใบลา"
+          @click="onConfirm"
+          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        >
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/src/modules/05_leave/components/FormLeave/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
new file mode 100644
index 0000000..6e62e10
--- /dev/null
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { reactive, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+const mixin = useCounterMixin();
+const dataStore = useLeaveStore();
+const { date2Thai } = mixin;
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  model: {
+    type: String,
+    default: "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formData = reactive<FormData>({
+  dateStart: new Date(),
+  subject: "เรื่อง",
+  who: "เรียนผู้ใด",
+  requestName: "ชื่อผู้ยื่น",
+  position: "ตำแหน่ง",
+  level: "ระดับ",
+  ocRequest: "สังกัด",
+  leaveabsentDaySummon: "2",
+  leaveUse: "1",
+  leaveRemaining: "1",
+});
+
+onMounted(() => {
+  dataStore.typeLeave = "";
+});
+</script>
+
+<template>
+  <q-card bordered class="q-pa-md bg-grey-1">
+    <div class="col-12 row q-pa-sm q-col-gutter-sm">
+      <datepicker
+        class="col-12 col-sm-4"
+        menu-class-name="modalfix"
+        v-model="dataStore.dateSendLeave"
+        :locale="'th'"
+        autoApply
+        borderless
+        :enableTimePicker="false"
+        week-start="0"
+        readonly
+      >
+        <template #year="{ year }">
+          {{ year + 543 }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ parseInt(value + 543) }}
+        </template>
+        <template #trigger>
+          <q-input
+            outlined
+            dense
+            bg-color="white"
+            hide-bottom-space
+            readonly
+            class="full-width"
+            :model-value="
+              dataStore.dateSendLeave != null
+                ? date2Thai(dataStore.dateSendLeave)
+                : null
+            "
+            :label="`${'วันที่ยื่นใบลา'}`"
+            :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
+          >
+            <template v-slot:prepend>
+              <q-icon
+                name="event"
+                class="cursor-pointer inputblack"
+                style="color: var(--black)"
+              >
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+      <q-input
+        class="col-12 col-sm-4"
+        dense
+        bg-color="white"
+        outlined
+        readonly
+        v-model="dataStore.typeLeave"
+        label="เรื่อง"
+      />
+      <q-input
+        class="col-12 col-sm-4"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.dear"
+        label="เรียน"
+      />
+      <q-input
+        class="col-12 col-sm-3"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.fullName"
+        label="ชื่อผู้ยื่นขอ"
+      />
+      <q-input
+        class="col-12 col-sm-3"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.positionName"
+        label="ตำแหน่งผู้ยื่นขอ"
+      />
+      <q-input
+        class="col-12 col-sm-3"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.positionLevelName"
+        label="ระดับผู้ยื่นขอ"
+      />
+      <q-input
+        class="col-12 col-sm-3"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.organizationName"
+        label="สังกัดผู้ยื่นขอ"
+      />
+      <q-input
+        v-if="props.model === 'LV-005'"
+        class="col-12 col-sm-4"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.leaveLimit"
+        label="จำนวนสิทธิ์การลาที่ได้รับ"
+      />
+      <q-input
+        class="col-12 col-sm-4"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.leaveTotal"
+        label="จำนวนสิทธิ์การลาที่ใช้ไป"
+      />
+      <q-input
+        v-if="props.model === 'LV-005'"
+        class="col-12 col-sm-4"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.leaveRemain"
+        label="จำนวนสิทธิ์การลาคงเหลือ"
+      />
+    </div>
+  </q-card>
+</template>
diff --git a/src/modules/05_leave/components/Forms/01_SickForm.vue b/src/modules/05_leave/components/Forms/01_SickForm.vue
deleted file mode 100644
index 99693c6..0000000
--- a/src/modules/05_leave/components/Forms/01_SickForm.vue
+++ /dev/null
@@ -1,441 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, computed } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const router = useRouter()
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails, showLoader, hideLoader } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataSick = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveRange: "ALL",
-	leaveTotal: "",
-	leaveLast: null,
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveRangeRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const leaveLastRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveRange: leaveRangeRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataSick.leaveWrote = props.data.leaveWrote
-	formDataSick.leaveStartDate = props.data.leaveStartDate
-	formDataSick.leaveEndDate = props.data.leaveEndDate
-	formDataSick.contractTel = props.data.contractTel
-	formDataSick.leaveTotal = props.data.leaveTotal
-	formDataSick.leaveNumber = props.data.leaveNumber
-	formDataSick.leaveDetail = props.data.leaveDetail
-	formDataSick.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-async function fileUploadDoc(files: any) {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/**
- * function รีเซทค่า leaveStartDate เเละ leaveEndDate
- */
-function resetDate() {
-	if (formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON") {
-		formDataSick.leaveStartDate = null
-		formDataSick.leaveEndDate = null
-	}
-	console.log("testnull")
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	showLoader()
-	const formData = new FormData()
-	//   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("leaveDocument", formDataSick.leaveDocument)
-	formData.append("type", formDataSick.type)
-	formData.append("leaveRange", formDataSick.leaveRange)
-	formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate))
-	formData.append("leaveWrote", formDataSick.leaveWrote)
-	formData.append("leaveAddress", formDataSick.leaveAddress)
-	formData.append("leaveNumber", formDataSick.leaveNumber)
-	formData.append("leaveDetail", formDataSick.leaveDetail)
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then(() => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-		.finally(() => {
-			hideLoader()
-		})
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataSick.leaveStartDate ?? null,
-			EndLeaveDate: formDataSick.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
- */
-const isReadOnly = computed(() => {
-	const conditionleaveRange = formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON"
-	if (conditionleaveRange) {
-		formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null
-		formDataSick.leaveTotal = 0.5
-	} else {
-		formDataSick.leaveTotal = null
-	}
-	return conditionleaveRange
-})
-
-function inputEdit(val: boolean) {
-	return {
-		"full-width cursor-pointer ": val,
-		"full-width cursor-pointer inputgreen": !val,
-	}
-}
-
-function resetEndDate(type: string) {
-	if (type === "day") {
-		formDataSick.EndLeaveDate === null
-	}
-}
-</script>
-
-<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="formDataSick.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<div class="col-12 col-md-4 col-sm-12">
-					<q-radio v-model="formDataSick.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
-					<q-radio v-model="formDataSick.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
-					<q-radio v-model="formDataSick.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
-				</div>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="formDataSick.leaveStartDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							:readonly="!edit"
-							@update:model-value="formDataSick.leaveEndDate = null"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="leaveStartDateRef"
-									for="leaveStartDateRef"
-									hide-bottom-space
-									:readonly="!edit"
-									bg-color="white"
-									class="full-width cursor-pointer inputgreen"
-									:model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : null"
-									:label="`${'ลาตั้งแต่วันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-									style="color: var(--q-primary)"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="formDataSick.leaveEndDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							:readonly="!formDataSick.leaveStartDate"
-							@update:model-value="FetchCheck(), isReadOnly"
-							:min-date="formDataSick.leaveStartDate"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="leaveEndDateRef"
-									for="leaveEndDateRef"
-									hide-bottom-space
-									bg-color="white"
-									:readonly="!formDataSick.leaveStartDate"
-									:class="inputEdit(isReadOnly)"
-									:model-value="formDataSick.leaveEndDate != null ? date2Thai(formDataSick.leaveEndDate) : null"
-									:label="`${'ลาถึงวันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-						<q-input
-							class="col-12 col-md-3 col-sm-6"
-							dense
-							bg-color="white"
-							outlined
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							v-model="formDataSick.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							hide-bottom-space
-						/>
-						<q-input
-							class="col-12 col-md-3 col-sm-6"
-							dense
-							outlined
-							ref="leaveLastRef"
-							for="leaveLastRef"
-							v-model="dataStore.leaveLast"
-							label="ลาครั้งสุดท้ายเมื่อวันที่"
-							readonly
-							hide-bottom-space
-							bg-color="white"
-						/>
-					</div>
-				</div>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-							dense
-							outlined
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="formDataSick.leaveNumber"
-							mask="(###)-###-####"
-							hide-bottom-space
-							bg-color="white"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
-							dense
-							outlined
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="formDataSick.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-							hide-bottom-space
-							bg-color="white"
-						/>
-					</div>
-				</div>
-				<q-input
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataSick.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-					bg-color="white"
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-file for="leaveDocumentRef" v-model="formDataSick.leaveDocument" dense label="เอกสารประกอบ" outlined use-chips bg-color="white" class="col-12 q-pl-sm col-12">
-							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
-							</template>
-						</q-file>
-					</div>
-				</div>
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in formDataSick.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/Forms/03_Birth.vue b/src/modules/05_leave/components/Forms/03_Birth.vue
deleted file mode 100644
index 74a8348..0000000
--- a/src/modules/05_leave/components/Forms/03_Birth.vue
+++ /dev/null
@@ -1,391 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue"
-import { useQuasar } from "quasar"
-import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const mixin = useCounterMixin()
-const router = useRouter()
-const $q = useQuasar()
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataBirth = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "",
-	leaveLast: "",
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveTotalRef = 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 = {
-	leaveWrote: leaveWroteRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataBirth.leaveWrote = props.data.leaveWrote
-	formDataBirth.leaveStartDate = props.data.leaveStartDate
-	formDataBirth.leaveEndDate = props.data.leaveEndDate
-	formDataBirth.leaveTotal = props.data.leaveTotal
-	formDataBirth.leaveNumber = props.data.leaveNumber
-	formDataBirth.leaveDetail = props.data.leaveDetail
-	formDataBirth.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-async function fileUploadDoc(files: any) {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataBirth.leaveStartDate ?? null, EndLeaveDate: formDataBirth.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataBirth.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataBirth.leaveLast = data.sumDateWork
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataBirth.leaveDocument.length > 0) {
-	// 	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)
-	// }
-	formData.append("leaveDocument", formDataBirth.leaveDocument)
-	formData.append("type", formDataBirth.type)
-	formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate))
-	formData.append("leaveWrote", formDataBirth.leaveWrote)
-	formData.append("leaveAddress", formDataBirth.leaveAddress)
-	formData.append("leaveNumber", formDataBirth.leaveNumber)
-	formData.append("leaveDetail", formDataBirth.leaveDetail)
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-</script>
-
-<!-- ฟอร์มลาคลอดบุตร-->
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					outlined
-					v-model="formDataBirth.leaveWrote"
-					label="เขียนที่"
-					hide-bottom-space
-					bg-color="white"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataBirth.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="formDataBirth.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="formDataBirth.leaveStartDate != null ? date2Thai(formDataBirth.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataBirth.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					@update:model-value="FetchCheck()"
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!formDataBirth.leaveStartDate"
-					:min-date="formDataBirth.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!formDataBirth.leaveStartDate"
-							class="full-width datepicker"
-							:model-value="formDataBirth.leaveEndDate != null ? date2Thai(formDataBirth.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-3 col-sm-6"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataBirth.leaveTotal"
-					label="จำนวนวันที่ลา"
-					bg-color="white"
-					readonly
-					hide-bottom-space
-				/>
-				<q-input
-					class="col-12 col-md-3 col-sm-6"
-					dense
-					outlined
-					ref="leaveLastRef"
-					for="leaveLastRef"
-					v-model="dataStore.leaveLast"
-					label="ลาครั้งสุดท้ายเมื่อวันที่"
-					readonly
-					hide-bottom-space
-					bg-color="white"
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="formDataBirth.leaveNumber"
-							mask="(###)-###-####"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="formDataBirth.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-				<q-input
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataBirth.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file
-					for="leaveDocumentRef"
-					hide-bottom-space
-					v-model="formDataBirth.leaveDocument"
-					@added="fileUploadDoc"
-					dense
-					bg-color="white"
-					label="เอกสารประกอบ"
-					outlined
-					use-chips
-					multiple
-					class="q-pl-sm col-12"
-				>
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in formDataBirth.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue
deleted file mode 100644
index 5c64c58..0000000
--- a/src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue
+++ /dev/null
@@ -1,447 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const mixin = useCounterMixin()
-const router = useRouter()
-const $q = useQuasar()
-const { date2Thai, calculateDurationYmd, dateToISO, dialogConfirm, fails, success, messageError } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataHelpWife = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	wifeDayName: "",
-	wifeDayDateBorn: null,
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "",
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const wifeDayNameRef = ref<object | null>(null)
-const wifeDayDateBornRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveTotalRef = 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 = {
-	leaveWrote: leaveWroteRef,
-	wifeDayName: wifeDayNameRef,
-	wifeDayDateBorn: wifeDayDateBornRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataHelpWife.leaveWrote = props.data.leaveWrote
-	formDataHelpWife.wifeDayName = props.data.wifeDayName
-	formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn
-	formDataHelpWife.leaveStartDate = props.data.leaveStartDate
-	formDataHelpWife.leaveEndDate = props.data.leaveEndDate
-	formDataHelpWife.leaveTotal = props.data.leaveTotal
-	formDataHelpWife.leaveNumber = props.data.leaveNumber
-	formDataHelpWife.leaveDetail = props.data.leaveDetail
-	formDataHelpWife.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataHelpWife.leaveStartDate, formDataHelpWife.leaveEndDate)
-	formDataHelpWife.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataHelpWife.leaveStartDate ?? null, EndLeaveDate: formDataHelpWife.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataHelpWife.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataHelpWife.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataHelpWife.leaveDocument.length > 0) {
-	// 	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)
-	// }
-	formData.append("leaveDocument", formDataHelpWife.leaveDocument)
-	formData.append("type", formDataHelpWife.type)
-	formData.append("leaveStartDate", dateToISO(formDataHelpWife.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate))
-	formData.append("leaveWrote", formDataHelpWife.leaveWrote)
-	formData.append("leaveAddress", formDataHelpWife.leaveAddress)
-	formData.append("leaveNumber", formDataHelpWife.leaveNumber)
-	formData.append("leaveDetail", formDataHelpWife.leaveDetail)
-	formData.append("wifeDayName", formDataHelpWife.wifeDayName)
-	formData.append("wifeDayDateBorn", dateToISO(formDataHelpWife.wifeDayDateBorn))
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					outlined
-					hide-bottom-space
-					bg-color="white"
-					v-model="formDataHelpWife.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataHelpWife.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="formDataHelpWife.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="formDataHelpWife.leaveStartDate != null ? date2Thai(formDataHelpWife.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataHelpWife.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					week-start="0"
-					:readonly="!formDataHelpWife.leaveStartDate"
-					:min-date="formDataHelpWife.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!formDataHelpWife.leaveStartDate"
-							class="full-width datepicker"
-							:model-value="formDataHelpWife.leaveEndDate != null ? date2Thai(formDataHelpWife.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataHelpWife.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-					bg-color="white"
-				/>
-				<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
-					<q-input
-						class="col-12 col-sm-12"
-						ref="wifeDayNameRef"
-						for="wifeDayNameRef"
-						dense
-						bg-color="white"
-						outlined
-						hide-bottom-space
-						v-model="formDataHelpWife.wifeDayName"
-						label="ชื่อภรรยา"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
-					/>
-				</div>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataHelpWife.wifeDayDateBorn"
-					:locale="'th'"
-					autoApply
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="wifeDayDateBornRef"
-							for="wifeDayDateBornRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="formDataHelpWife.wifeDayDateBorn != null ? date2Thai(formDataHelpWife.wifeDayDateBorn) : null"
-							:label="`${'วันที่คลอด'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="formDataHelpWife.leaveNumber"
-							mask="(###)-###-####"
-							unmasked-value
-							hide-bottom-space
-							bg-color="white"
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="formDataHelpWife.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-				<q-input
-					hide-bottom-space
-					bg-color="white"
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataHelpWife.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file
-					bg-color="white"
-					ref="leaveDocumentRef"
-					v-model="formDataHelpWife.leaveDocument"
-					@added="fileUploadDoc"
-					dense
-					label="เอกสารประกอบ"
-					outlined
-					use-chips
-					multiple
-					class="q-pl-sm col-12"
-				>
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in formDataHelpWife.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/Forms/05_VacationForm.vue b/src/modules/05_leave/components/Forms/05_VacationForm.vue
deleted file mode 100644
index 2fed01c..0000000
--- a/src/modules/05_leave/components/Forms/05_VacationForm.vue
+++ /dev/null
@@ -1,442 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, computed } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-
-/** Use */
-const $q = useQuasar()
-const dataStore = useLeaveStore()
-const mixin = useCounterMixin()
-const router = useRouter()
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataVacation = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveRange: "ALL",
-	restDayOldTotal: "",
-	restDayCurrentTotal: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "",
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const restDayOldTotalRef = ref<object | null>(null)
-const restDayCurrentTotalRef = ref<object | null>(null)
-const leaveRangeRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveTotalRef = 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 = {
-	leaveWrote: leaveWroteRef,
-	leaveRange: leaveRangeRef,
-	restDayOldTotal: restDayOldTotalRef,
-	restDayCurrentTotal: restDayCurrentTotalRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataVacation.leaveWrote = props.data.leaveWrote
-	formDataVacation.restDayOldTotal = props.data.restDayOldTotal
-	formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal
-	formDataVacation.leaveStartDate = props.data.leaveStartDate
-	formDataVacation.leaveEndDate = props.data.leaveEndDate
-	formDataVacation.leaveTotal = props.data.leaveTotal
-	formDataVacation.leaveNumber = props.data.leaveNumber
-	formDataVacation.leaveDetail = props.data.leaveDetail
-	formDataVacation.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-
-	console.log("save")
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataVacation.leaveStartDate ?? null, EndLeaveDate: formDataVacation.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataVacation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataVacation.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataVacation.leaveDocument.length > 0) {
-	// 	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)
-	// }
-	formData.append("leaveDocument", formDataVacation.leaveDocument)
-	formData.append("type", formDataVacation.type)
-	formData.append("leaveRange", formDataVacation.leaveRange)
-	formData.append("leaveStartDate", dateToISO(formDataVacation.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate))
-	formData.append("leaveWrote", formDataVacation.leaveWrote)
-	formData.append("leaveAddress", formDataVacation.leaveAddress)
-	formData.append("leaveNumber", formDataVacation.leaveNumber)
-	formData.append("leaveDetail", formDataVacation.leaveDetail)
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function รีเซทค่า leaveStartDate เเละ leaveEndDate
- */
-function resetDate() {
-	if (formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON") {
-		formDataVacation.leaveStartDate = null
-		formDataVacation.leaveEndDate = null
-	}
-	console.log("testnull")
-}
-
-/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
-const isReadOnly = computed(() => {
-	const conditionleaveRange = formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON"
-	if (conditionleaveRange) {
-		formDataVacation.leaveEndDate = formDataVacation.leaveStartDate // Set formDataVacation.leaveEndDate to null
-		formDataVacation.leaveTotal = 0.5
-	} else {
-		formDataVacation.leaveTotal = null
-	}
-	return conditionleaveRange
-})
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="formDataVacation.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<div class="col-12 col-md-4 col-sm-6">
-					<q-radio v-model="formDataVacation.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
-					<q-radio v-model="formDataVacation.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
-					<q-radio v-model="formDataVacation.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
-				</div>
-				<q-input
-					class="col-12 col-md-4 col-sm-6"
-					ref="restDayOldTotalRef"
-					for="restDayOldTotalRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					readonly
-					outlined
-					v-model="dataStore.restDayTotalOld"
-					label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
-				/>
-
-				<q-input
-					class="col-12 col-md-4 col-sm-6"
-					ref="restDayCurrentTotalRef"
-					for="restDayCurrentTotalRef"
-					dense
-					readonly
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="dataStore.leaveRemain"
-					label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
-				/>
-
-				<datepicker
-					class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataVacation.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="formDataVacation.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="formDataVacation.leaveStartDate != null ? date2Thai(formDataVacation.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataVacation.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					@update:model-value="FetchCheck()"
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="isReadOnly"
-					:min-date="formDataVacation.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							class="full-width datepicker"
-							:readonly="isReadOnly"
-							:model-value="formDataVacation.leaveEndDate != null ? date2Thai(formDataVacation.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					bg-color="white"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataVacation.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="formDataVacation.leaveNumber"
-							mask="(###)-###-####"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="formDataVacation.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-				<q-input
-					type="textarea"
-					hide-bottom-space
-					bg-color="white"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataVacation.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file
-					ref="leaveDocumentRef"
-					bg-color="white"
-					v-model="formDataVacation.leaveDocument"
-					@added="fileUploadDoc"
-					dense
-					label="เอกสารประกอบ"
-					outlined
-					use-chips
-					multiple
-					class="q-pl-sm col-12"
-				>
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in formDataVacation.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/Forms/06_OrdinationForm.vue b/src/modules/05_leave/components/Forms/06_OrdinationForm.vue
deleted file mode 100644
index 4fb6d86..0000000
--- a/src/modules/05_leave/components/Forms/06_OrdinationForm.vue
+++ /dev/null
@@ -1,545 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, watch } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const router = useRouter()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Array,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const ordainDayLocationNumberRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-const leavebirthDateRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const totalLeaveRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const ordainDayOrdinationRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const ordainDayLocationAddressRef = ref<object | null>(null)
-const ordainDayBuddhistLentAddressRef = ref<object | null>(null)
-const ordainDayLocationNameRef = ref<object | null>(null)
-const ordainDayBuddhistLentNameRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataOrdination = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leavegovernmentDate: new Date(),
-	leavebirthDate: new Date(),
-	leaveStartDate: null,
-	leaveEndDate: null,
-	totalLeave: new Date(),
-	ordainDayOrdination: new Date(),
-	ordainDayLocationName: "",
-	ordainDayLocationNumber: null,
-	ordainDayLocationAddress: "",
-	ordainDayBuddhistLentName: "",
-	ordainDayBuddhistLentAddress: "",
-	ordainDayStatus: "true",
-	leaveDocument: null,
-})
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: OrdinationForm = {
-	leaveWrote: leaveWroteRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leavebirthDate: leavebirthDateRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	totalLeave: totalLeaveRef,
-	ordainDayOrdination: ordainDayOrdinationRef,
-	ordainDayLocationName: ordainDayLocationNameRef,
-	ordainDayLocationNumber: ordainDayLocationNumberRef,
-	ordainDayLocationAddress: ordainDayLocationAddressRef,
-	ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
-	ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-// // Watch for changes in leaveEndDate and update leaveTotal accordingly
-// watch(formDataOrdination.leaveEndDate, async () => {
-// 	if (formDataOrdination.leaveStartDate !== undefined && formDataOrdination.leaveEndDate !== undefined) {
-// 		const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
-// 		formDataOrdination.leaveTotal = newLeaveTotal
-// 		console.log(newLeaveTotal)
-// 	}
-// 	// Update the leaveTotal value
-// 	console.log("test")
-// })
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataOrdination.leaveStartDate ?? null, EndLeaveDate: formDataOrdination.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataOrdination.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataOrdination.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataOrdination.leaveDocument.length > 0) {
-	// 	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)
-	// }
-	formData.append("leaveDocument", formDataOrdination.leaveDocument)
-	formData.append("type", formDataOrdination.type)
-	formData.append("leaveStartDate", dateToISO(formDataOrdination.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate))
-	formData.append("ordainDayOrdination", dateToISO(formDataOrdination.ordainDayOrdination))
-	formData.append("ordainDayLocationName", formDataOrdination.ordainDayLocationName)
-	formData.append("ordainDayLocationNumber", formDataOrdination.ordainDayLocationNumber)
-	formData.append("ordainDayLocationAddress", formDataOrdination.ordainDayLocationAddress)
-	formData.append("ordainDayBuddhistLentName", formDataOrdination.ordainDayBuddhistLentName)
-	formData.append("ordainDayBuddhistLentAddress", formDataOrdination.ordainDayBuddhistLentAddress)
-	formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus)
-	formData.append("leaveWrote", formDataOrdination.leaveWrote)
-	formData.append("leaveDetail", formDataOrdination.leaveDetail)
-	formData.append("leavebirthDate", dateToISO(formDataOrdination.leavebirthDate))
-	formData.append("leavegovernmentDate", dateToISO(formDataOrdination.leavegovernmentDate))
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
-	formDataOrdination.leaveTotal = newLeaveTotal
-}
-</script>
-
-<!-- ฟอร์ม ลาอุปสมบท -->
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate" class="full-width">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					bg-color="white"
-					hide-bottom-space
-					v-model="formDataOrdination.leaveWrote"
-					label="เขียนที่"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataOrdination.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="formDataOrdination.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							bg-color="white"
-							dense
-							ref="leaveStartDateRef"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="formDataOrdination.leaveStartDate != null ? date2Thai(formDataOrdination.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataOrdination.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					:readonly="!formDataOrdination.leaveStartDate"
-					:enableTimePicker="false"
-					:min-date="formDataOrdination.leaveStartDate"
-					week-start="0"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							bg-color="white"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="formDataOrdination.leaveEndDate != null ? date2Thai(formDataOrdination.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!formDataOrdination.leaveStartDate"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataOrdination.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-4 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="formDataOrdination.leavegovernmentDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							readonly
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									ref="leavegovernmentDateRef"
-									dense
-									bg-color="white"
-									hide-bottom-space
-									readonly
-									class="full-width"
-									:model-value="formDataOrdination.leavegovernmentDate != null ? date2Thai(formDataOrdination.leavegovernmentDate) : null"
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							class="col-12 col-md-4 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="formDataOrdination.leavebirthDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							readonly
-							:enableTimePicker="false"
-							week-start="0"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									ref="leavebirthDateRef"
-									dense
-									bg-color="white"
-									hide-bottom-space
-									readonly
-									class="full-width"
-									:model-value="formDataOrdination.leavebirthDate != null ? date2Thai(formDataOrdination.leavebirthDate) : null"
-									:label="`${'วันเดือนปีเกิด'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกวันเดือนปีเกิด'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-					</div>
-				</div>
-
-				<div class="q-pl-sm text-weight-bold text-dark col-12">เคยบวชหรือไม่</div>
-				<div class="col-12">
-					<q-radio v-model="formDataOrdination.ordainDayStatus" val="true" label="เคยบวช" checked-icon="task_alt " hide-bottom-space />
-					<q-radio v-model="formDataOrdination.ordainDayStatus" val="false" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
-				</div>
-
-				<div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataOrdination.ordainDayOrdination"
-					:locale="'th'"
-					autoApply
-					full-width
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							ref="ordainDayOrdinationRef"
-							dense
-							bg-color="white"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="formDataOrdination.ordainDayOrdination != null ? date2Thai(formDataOrdination.ordainDayOrdination) : null"
-							:label="`${'วันอุปสมบท'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input
-					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-					dense
-					hide-bottom-space
-					ref="ordainDayLocationNameRef"
-					bg-color="white"
-					outlined
-					full-width
-					v-model="formDataOrdination.ordainDayLocationName"
-					label="ชื่อวัด"
-					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-				/>
-
-				<q-input
-					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-					ref="ordainDayLocationNumberRef"
-					dense
-					full-width
-					outlined
-					v-model="formDataOrdination.ordainDayLocationNumber"
-					bg-color="white"
-					mask="(###)-###-####"
-					unmasked-value
-					hide-bottom-space
-					label="หมายเลขโทรศัพท์"
-					:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
-				/>
-				<q-input
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					ref="ordainDayLocationAddressRef"
-					bg-color="white"
-					outlined
-					hide-bottom-space
-					v-model="formDataOrdination.ordainDayLocationAddress"
-					label="ที่อยู่"
-					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
-					type="textarea"
-				/>
-
-				<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่จำพรรษา</div>
-				<q-input
-					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-					dense
-					ref="ordainDayBuddhistLentNameRef"
-					bg-color="white"
-					hide-bottom-space
-					outlined
-					v-model="formDataOrdination.ordainDayBuddhistLentName"
-					label="ชื่อวัด"
-					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-				/>
-
-				<q-input
-					class="col-12 cursor-pointer inputgreen"
-					dense
-					ref="ordainDayBuddhistLentAddressRef"
-					bg-color="white"
-					outlined
-					v-model="formDataOrdination.ordainDayBuddhistLentAddress"
-					label="ที่อยู่"
-					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
-					type="textarea"
-					hide-bottom-space
-				/>
-				<q-input
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					bg-color="white"
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataOrdination.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<div class="col-12 col-sm-6">
-					<q-file ref="leaveDocumentRef" v-model="formDataOrdination.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined bg-color="white" multiple use-chips>
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/Forms/07_HajjForm.vue b/src/modules/05_leave/components/Forms/07_HajjForm.vue
deleted file mode 100644
index 4b5327c..0000000
--- a/src/modules/05_leave/components/Forms/07_HajjForm.vue
+++ /dev/null
@@ -1,354 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const router = useRouter()
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, fails, messageError, success, dateToISO } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Array,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataHaji = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leavegovernmentDate: new Date(),
-	leaveStartDate: null,
-	leaveEndDate: null,
-	totalLeave: new Date(),
-	hajjDayStatus: "true",
-	leaveDocument: null,
-})
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: HajiForm = {
-	leaveWrote: leaveWroteRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataHaji.leaveStartDate ?? null, EndLeaveDate: formDataHaji.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataHaji.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataHaji.leaveDocument.length > 0) {
-	// 	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)
-	// }
-	formData.append("leaveDocument", formDataHaji.leaveDocument)
-	formData.append("type", formDataHaji.type)
-	formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate))
-	formData.append("hajjDayStatus", formDataHaji.hajjDayStatus)
-	formData.append("leaveWrote", formDataHaji.leaveWrote)
-	formData.append("leaveDetail", formDataHaji.leaveDetail)
-	formData.append("leavegovernmentDate", dateToISO(formDataHaji.leavegovernmentDate))
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataHaji.leaveStartDate, formDataHaji.leaveEndDate)
-	formDataHaji.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate" class="full-width">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="formDataHaji.leaveWrote"
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					label="เขียนที่"
-					hide-bottom-space
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							v-model="formDataHaji.leaveStartDate"
-							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-							@update:model-value="formDataHaji.leaveEndDate = null"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leaveStartDateRef"
-									bg-color="white"
-									class="full-width datepicker"
-									outlined
-									dense
-									hide-bottom-space
-									:label="`${'ลาตั้งแต่วันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-									:model-value="formDataHaji.leaveStartDate != null ? date2Thai(formDataHaji.leaveStartDate) : null"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							v-model="formDataHaji.leaveEndDate"
-							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-							@update:model-value="updateLeaveTotal"
-							:readonly="!formDataHaji.leaveStartDate"
-							:min-date="formDataHaji.leaveStartDate"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leaveEndDateRef"
-									class="full-width datepicker"
-									bg-color="white"
-									outlined
-									dense
-									:readonly="!formDataHaji.leaveStartDate"
-									hide-bottom-space
-									:label="`${'ลาถึงวันที่'}`"
-									@update:model-value="FetchCheck()"
-									:model-value="formDataHaji.leaveEndDate != null ? date2Thai(formDataHaji.leaveEndDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<q-input
-							class="col-12 col-md-2 col-sm-6"
-							dense
-							outlined
-							bg-color="white"
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							v-model="formDataHaji.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							hide-bottom-space
-						/>
-						<datepicker
-							v-model="formDataHaji.leavegovernmentDate"
-							class="col-12 col-md-4 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							readonly
-							week-start="0"
-							:locale="'th'"
-							:enableTimePicker="false"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavegovernmentDateRef"
-									bg-color="white"
-									class="full-width"
-									outlined
-									dense
-									readonly
-									hide-bottom-space
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="formDataHaji.leavegovernmentDate != null ? date2Thai(formDataHaji.leavegovernmentDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-					</div>
-				</div>
-
-				<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจญ์หรือไม่</div>
-				<div class="col-12">
-					<q-radio v-model="formDataHaji.hajjDayStatus" val="true" checked-icon="task_alt" label="เคย" />
-					<q-radio v-model="formDataHaji.hajjDayStatus" val="false" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจญ์" />
-				</div>
-
-				<q-input v-model="formDataHaji.leaveDetail" class="col-12 q-mt-sm cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="formDataHaji.leaveDocument" bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined multiple hide-bottom-space>
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/Forms/08_MilitaryForm.vue b/src/modules/05_leave/components/Forms/08_MilitaryForm.vue
deleted file mode 100644
index 3618973..0000000
--- a/src/modules/05_leave/components/Forms/08_MilitaryForm.vue
+++ /dev/null
@@ -1,412 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const router = useRouter()
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError, fails } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-const absentDaySummonRef = ref<object | null>(null)
-const absentDayLocationRef = ref<object | null>(null)
-const absentDayRegistorDateRef = ref<object | null>(null)
-const absentDayGetInRef = ref<object | null>(null)
-const absentDayAtRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Array,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataMilitary = reactive<any>({
-	type: dataStore.typeId,
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: 0,
-	leaveDocument: null,
-	leaveWrote: "",
-	absentDaySummon: "",
-	absentDayLocation: "",
-	absentDayRegistorDate: null,
-	absentDayGetIn: "",
-	absentDayAt: "",
-	leaveDetail: "",
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: MilitaryForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveWrote: leaveWroteRef,
-	absentDaySummon: absentDaySummonRef,
-	absentDayLocation: absentDayLocationRef,
-	absentDayRegistorDate: absentDayRegistorDateRef,
-	absentDayGetIn: absentDayGetInRef,
-	absentDayAt: absentDayAtRef,
-	leaveDetail: leaveDetailRef,
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataMilitary.leaveStartDate ?? null, EndLeaveDate: formDataMilitary.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataMilitary.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataMilitary.leaveDocument.length > 0) {
-	// 	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)
-	// }
-	formData.append("leaveDocument", formDataMilitary.leaveDocument)
-	formData.append("type", formDataMilitary.type)
-	formData.append("leaveStartDate", dateToISO(formDataMilitary.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate))
-	formData.append("absentDaySummon", formDataMilitary.absentDaySummon)
-	formData.append("absentDayLocation", formDataMilitary.absentDayLocation)
-	formData.append("absentDayRegistorDate", dateToISO(formDataMilitary.absentDayRegistorDate))
-	formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn)
-	formData.append("absentDayAt", formDataMilitary.absentDayAt)
-	formData.append("leaveWrote", formDataMilitary.leaveWrote)
-	formData.append("leaveDetail", formDataMilitary.leaveDetail)
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataMilitary.leaveStartDate, formDataMilitary.leaveEndDate)
-	formDataMilitary.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					bg-color="white"
-					hide-bottom-space
-					v-model="formDataMilitary.leaveWrote"
-					label="เขียนที่"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataMilitary.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="formDataMilitary.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							bg-color="white"
-							dense
-							ref="leaveStartDateRef"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="formDataMilitary.leaveStartDate != null ? date2Thai(formDataMilitary.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataMilitary.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					:readonly="!formDataMilitary.leaveStartDate"
-					:min-date="formDataMilitary.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							bg-color="white"
-							hide-bottom-space
-							:readonly="!formDataMilitary.leaveStartDate"
-							class="full-width datepicker"
-							:model-value="formDataMilitary.leaveEndDate != null ? date2Thai(formDataMilitary.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataMilitary.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							ref="absentDaySummonRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							v-model="formDataMilitary.absentDaySummon"
-							label="ได้รับหมายเรียกของ"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
-						/>
-
-						<q-input
-							ref="atRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							v-model="formDataMilitary.absentDayLocation"
-							label="ที่"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
-						/>
-					</div>
-				</div>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-							menu-class-name="modalfix"
-							v-model="formDataMilitary.absentDayRegistorDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="absentDayRegistorDateRef"
-									bg-color="white"
-									hide-bottom-space
-									class="full-width datepicker"
-									:model-value="formDataMilitary.absentDayRegistorDate != null ? date2Thai(formDataMilitary.absentDayRegistorDate) : null"
-									:label="`${'ลงวันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<q-input
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							ref="absentDayGetInRef"
-							outlined
-							v-model="formDataMilitary.absentDayGetIn"
-							label="ให้เข้ารับการ"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							ref="absentDayAtRef"
-							v-model="formDataMilitary.absentDayAt"
-							label="ณ ที่"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอก ณ ที่'}`]"
-						/>
-					</div>
-				</div>
-
-				<q-input class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" dense bg-color="white" outlined v-model="formDataMilitary.leaveDetail" type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="formDataMilitary.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space use-chips @added="fileUploadDoc">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/Forms/09_StudyForm.vue b/src/modules/05_leave/components/Forms/09_StudyForm.vue
deleted file mode 100644
index c11e9cc..0000000
--- a/src/modules/05_leave/components/Forms/09_StudyForm.vue
+++ /dev/null
@@ -1,528 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, computed } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const router = useRouter()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError, arabicNumberToText } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leavebirthDateRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const leaveSalaryRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const studyDayScholarshipRef = ref<object | null>(null)
-const studyDayCountryRef = ref<object | null>(null)
-const studyDayUniversityNameRef = ref<object | null>(null)
-const studyDayDegreeLevelRef = ref<object | null>(null)
-const studyDaySubjectRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Array,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataStudy = reactive<any>({
-	type: dataStore.typeId, //
-	leaveWrote: "", //
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leavebirthDate: new Date(),
-	leavegovernmentDate: new Date(),
-	leaveSalary: 10000,
-	leaveSalaryText: arabicNumberToText(10000),
-	leaveNumber: "",
-	leaveAddress: "",
-	studyDayScholarship: "",
-	studyDayCountry: "",
-	studyDayUniversityName: "", //
-	studyDayDegreeLevel: "", //
-	studyDaySubject: "", //
-	leaveDocument: "", //
-	leaveDetail: "",
-	leaveTotal: "",
-})
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: studyDaySubjectForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leavebirthDate: leavebirthDateRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leaveSalary: leaveSalaryRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	studyDayScholarship: studyDayScholarshipRef,
-	studyDayCountry: studyDayCountryRef,
-	studyDayUniversityName: studyDayUniversityNameRef,
-	studyDayDegreeLevel: studyDayDegreeLevelRef,
-	studyDaySubject: studyDaySubjectRef,
-	leaveWrote: leaveWroteRef,
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataStudy.leaveStartDate ?? null, EndLeaveDate: formDataStudy.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataStudy.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataStudy.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataStudy.leaveDocument.length > 0) {
-	// 	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)
-	// }
-	formData.append("leaveDocument", formDataStudy.leaveDocument)
-	formData.append("type", formDataStudy.type) //
-	formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)) //
-	formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)) //
-	formData.append("studyDaySubject", formDataStudy.studyDaySubject)
-	formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel)
-	formData.append("leavegovernmentDate", dateToISO(formDataStudy.leavegovernmentDate))
-	formData.append("leavebirthDate", dateToISO(formDataStudy.leavebirthDate))
-	formData.append("studyDayUniversityName", formDataStudy.studyDayUniversityName)
-	formData.append("studyDayCountry", formDataStudy.studyDayCountry)
-	formData.append("leaveWrote", formDataStudy.leaveWrote) //
-	formData.append("leaveDetail", formDataStudy.leaveDetail) //
-	formData.append("studyDayScholarship", formDataStudy.studyDayScholarship)
-	formData.append("leaveAddress", formDataStudy.leaveAddress) //
-	formData.append("leaveNumber", formDataStudy.leaveNumber) //
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataStudy.leaveStartDate, formDataStudy.leaveEndDate)
-	formDataStudy.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-
-/**
- * แปลงตัวเลขเงินเดือน
- */
-const formattedleaveSalary = computed(() => {
-	return dataStore.salary !== null ? dataStore.salary.toLocaleString("th-TH") : ""
-})
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="formDataStudy.leaveWrote"
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					label="เขียนที่"
-					hide-bottom-space
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					v-model="formDataStudy.leaveStartDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:enableTimePicker="false"
-					:locale="'th'"
-					@update:model-value="formDataStudy.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveStartDateRef"
-							class="full-width datepicker"
-							bg-color="white"
-							outlined
-							dense
-							lazy-rules
-							hide-bottom-space
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:model-value="formDataStudy.leaveStartDate != null ? date2Thai(formDataStudy.leaveStartDate) : null"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					v-model="formDataStudy.leaveEndDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:locale="'th'"
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					:readonly="!formDataStudy.leaveStartDate"
-					:enableTimePicker="false"
-					:min-date="formDataStudy.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveEndDateRef"
-							class="full-width datepicker"
-							outlined
-							dense
-							lazy-rules
-							bg-color="white"
-							hide-bottom-space
-							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!formDataStudy.leaveStartDate"
-							:model-value="formDataStudy.leaveEndDate != null ? date2Thai(formDataStudy.leaveEndDate) : null"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataStudy.leaveTotal"
-					label="มีกำหนด"
-					readonly
-					hide-bottom-space
-				/>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							v-model="formDataStudy.leavegovernmentDate"
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							readonly
-							:enableTimePicker="false"
-							:locale="'th'"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavegovernmentDateRef"
-									class="full-width"
-									bg-color="white"
-									outlined
-									readonly
-									dense
-									hide-bottom-space
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="dataStore.dateAppoint != null ? date2Thai(dataStore.dateAppoint) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							v-model="formDataStudy.leavebirthDate"
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							readonly
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavebirthDateRef"
-									class="full-width"
-									bg-color="white"
-									outlined
-									dense
-									readonly
-									hide-bottom-space
-									:label="`${'วันเดือนปีเกิด'}`"
-									:model-value="dataStore.birthDate != null ? date2Thai(dataStore.birthDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<q-input v-model="formattedleaveSalary" ref="leaveSalaryRef" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
-
-						<q-input
-							v-model="dataStore.salaryText"
-							ref="leaveSalaryRef"
-							class="col-12 col-sm-6 col-md-3"
-							bg-color="white"
-							dense
-							readonly
-							outlined
-							label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
-						/>
-					</div>
-				</div>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							v-model="formDataStudy.studyDayUniversityName"
-							ref="studyDayUniversityNameRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ชื่อสถานศึกษา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
-						/>
-
-						<q-input
-							v-model="formDataStudy.studyDayDegreeLevel"
-							ref="studyDayDegreeLevelRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ชั้นปริญญา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
-						/>
-
-						<q-input
-							v-model="formDataStudy.studyDaySubject"
-							ref="studyDaySubjectRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ศึกษาวิชา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
-						/>
-
-						<q-input
-							v-model="formDataStudy.studyDayCountry"
-							ref="studyDayCountryRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ประเทศ"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
-						/>
-
-						<q-input
-							v-model="formDataStudy.studyDayScholarship"
-							ref="studyDayScholarshipRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ด้วยทุน"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-						/>
-
-						<q-input
-							v-model="formDataStudy.leaveNumber"
-							ref="leaveNumberRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							unmasked-value
-							hide-bottom-space
-							mask="(###)-###-####"
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							v-model="formDataStudy.leaveAddress"
-							ref="leaveAddressRef"
-							class="col-12 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-
-				<q-input v-model="formDataStudy.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="formDataStudy.leaveDocument" bg-color="white" dense outlined multiple use-chips @added="fileUploadDoc" label="เอกสารประกอบ">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/Forms/10_TrainForm.vue b/src/modules/05_leave/components/Forms/10_TrainForm.vue
deleted file mode 100644
index 23e2d60..0000000
--- a/src/modules/05_leave/components/Forms/10_TrainForm.vue
+++ /dev/null
@@ -1,506 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, computed } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useQuasar } from "quasar"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const router = useRouter()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Array,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataTrain = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leavebirthDate: new Date(),
-	leavegovernmentDate: new Date(),
-	leaveSalary: 10000,
-	leaveSalaryText: arabicNumberToText(10000),
-	leaveNumber: "",
-	leaveAddress: "",
-	studyDayScholarship: "",
-	studyDayCountry: "",
-	studyDayTrainingSubject: "",
-	studyDayTrainingName: "",
-	leaveDocument: "",
-	leaveDetail: "",
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leavebirthDateRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const studyDayScholarshipRef = ref<object | null>(null)
-const studyDayCountryRef = ref<object | null>(null)
-const studyDayTrainingSubjectRef = ref<object | null>(null)
-const studyDayTrainingNameRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: TrainForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leavebirthDate: leavebirthDateRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	studyDayScholarship: studyDayScholarshipRef,
-	studyDayCountry: studyDayCountryRef,
-	studyDayTrainingSubject: studyDayTrainingSubjectRef,
-	studyDayTrainingName: studyDayTrainingNameRef,
-	leaveWrote: leaveWroteRef,
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataTrain.leaveStartDate ?? null, EndLeaveDate: formDataTrain.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataTrain.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataTrain.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataTrain.leaveDocument.length > 0) {
-	// 	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)
-	// } //
-	formData.append("leaveDocument", formDataTrain.leaveDocument)
-	formData.append("type", formDataTrain.type) //
-	formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)) //
-	formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)) //
-	formData.append("studyDayCountry", formDataTrain.studyDayCountry)
-	formData.append("leavegovernmentDate", dateToISO(formDataTrain.leavegovernmentDate))
-	formData.append("leavebirthDate", dateToISO(formDataTrain.leavebirthDate))
-	formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName)
-	formData.append("studyDayTrainingSubject", formDataTrain.studyDayTrainingSubject)
-	formData.append("leaveWrote", formDataTrain.leaveWrote) //
-	formData.append("leaveDetail", formDataTrain.leaveDetail) //
-	formData.append("studyDayScholarship", formDataTrain.studyDayScholarship)
-	formData.append("leaveAddress", formDataTrain.leaveAddress) //
-	formData.append("leaveNumber", formDataTrain.leaveNumber) //
-	formData.append("leaveSalaryText", formDataTrain.leaveSalaryText) //
-	formData.append("leaveSalary", formDataTrain.leaveSalary) //
-	formData.append("leaveTotal", formDataTrain.leaveTotal) //
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataTrain.leaveStartDate, formDataTrain.leaveEndDate)
-	formDataTrain.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-
-/**
- * แปลงตัวเลขเงินเดือน
- */
-const formattedSalary = computed(() => {
-	return formDataTrain.leaveSalary !== null ? formDataTrain.leaveSalary.toLocaleString("th-TH") : ""
-})
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="formDataTrain.leaveWrote"
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					label="เขียนที่"
-					hide-bottom-space
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					v-model="formDataTrain.leaveStartDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:enableTimePicker="false"
-					:locale="'th'"
-					@update:model-value="formDataTrain.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveStartDateRef"
-							class="full-width datepicker"
-							bg-color="white"
-							outlined
-							dense
-							lazy-rules
-							hide-bottom-space
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:model-value="formDataTrain.leaveStartDate != null ? date2Thai(formDataTrain.leaveStartDate) : null"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					v-model="formDataTrain.leaveEndDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					week-start="0"
-					:readonly="!formDataTrain.leaveStartDate"
-					:locale="'th'"
-					:enableTimePicker="false"
-					:min-date="formDataTrain.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveEndDateRef"
-							class="full-width datepicker"
-							outlined
-							dense
-							lazy-rules
-							bg-color="white"
-							hide-bottom-space
-							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!formDataTrain.leaveStartDate"
-							:model-value="formDataTrain.leaveEndDate != null ? date2Thai(formDataTrain.leaveEndDate) : null"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataTrain.leaveTotal"
-					label="มีกำหนด"
-					readonly
-					hide-bottom-space
-				/>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							v-model="formDataTrain.leavegovernmentDate"
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							readonly
-							:enableTimePicker="false"
-							:locale="'th'"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavegovernmentDateRef"
-									class="full-width"
-									outlined
-									readonly
-									bg-color="white"
-									dense
-									hide-bottom-space
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="formDataTrain.leavegovernmentDate != null ? date2Thai(formDataTrain.leavegovernmentDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							v-model="formDataTrain.leavebirthDate"
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							readonly
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavebirthDateRef"
-									class="full-width"
-									bg-color="white"
-									outlined
-									dense
-									readonly
-									hide-bottom-space
-									:label="`${'วันเดือนปีเกิด'}`"
-									:model-value="formDataTrain.leavebirthDate != null ? date2Thai(formDataTrain.leavebirthDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(---black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<q-input v-model="formattedSalary" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
-
-						<q-input v-model="formDataTrain.leaveSalaryText" class="col-12 col-sm-6 col-md-3" dense readonly outlined bg-color="white" label="เงินเดือนปัจจุบัน (ตัวอักษร)" />
-					</div>
-				</div>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							v-model="formDataTrain.studyDayTrainingSubject"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							ref="studyDayTrainingSubjectRef"
-							bg-color="white"
-							dense
-							outlined
-							label="ด้าน/หลักสูตร"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
-						/>
-
-						<q-input
-							v-model="formDataTrain.studyDayTrainingName"
-							ref="studyDayTrainingNameRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ณ สถานที่"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
-						/>
-
-						<q-input
-							v-model="formDataTrain.studyDayCountry"
-							ref="studyDayCountryRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							label="ประเทศ"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
-						/>
-
-						<q-input
-							v-model="formDataTrain.studyDayScholarship"
-							ref="studyDayScholarshipRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ด้วยทุน"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-						/>
-
-						<q-input
-							v-model="formDataTrain.leaveNumber"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							ref="leaveNumberRef"
-							dense
-							outlined
-							unmasked-value
-							hide-bottom-space
-							bg-color="white"
-							mask="(###)-###-####"
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							v-model="formDataTrain.leaveAddress"
-							ref="leaveAddressRef"
-							class="col-12 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-
-				<q-input v-model="formDataTrain.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="formDataTrain.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/Forms/11_WorkInternationalForm.vue b/src/modules/05_leave/components/Forms/11_WorkInternationalForm.vue
deleted file mode 100644
index 50c4ef2..0000000
--- a/src/modules/05_leave/components/Forms/11_WorkInternationalForm.vue
+++ /dev/null
@@ -1,402 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue"
-import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-import genReport from "@/plugins/genreport"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
-const edit = ref<boolean>(true)
-const router = useRouter()
-const isSave = ref<boolean>(false)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataWorkInternational = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveDetail: "",
-	leaveDocument: [],
-	leaveDraftDocument: null,
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataWorkInternational.leaveWrote = props.data.leaveWrote
-	formDataWorkInternational.leaveStartDate = props.data.leaveStartDate
-	formDataWorkInternational.leaveEndDate = props.data.leaveEndDate
-	formDataWorkInternational.leaveDetail = props.data.leaveDetail
-	formDataWorkInternational.leaveDocument = props.data.leaveDocument
-	formDataWorkInternational.leaveDraftDocument = props.data.leaveDraftDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const nameFileDraft = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-//download function
-async function onClickDownloadFile(id: string, fileName: string) {
-	// showLoader();
-	await http
-		.get(config.API.leaveReport(id))
-		.then(async res => {
-			console.log(res)
-			const data = res.data.result
-			await genReport(data, fileName)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			// hideLoader();
-		})
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
-			EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataWorkInternational.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataWorkInternational.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// //
-	// if (formDataWorkInternational.leaveDocument.length > 0) {
-	// 	const blob = formDataWorkInternational.leaveDocument.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("leaveDocument", formDataWorkInternational.leaveDocument)
-	formData.append("leaveDraftDocument", formDataWorkInternational.leaveDraftDocument)
-	formData.append("type", formDataWorkInternational.type) //
-	formData.append("leaveStartDate", dateToISO(formDataWorkInternational.leaveStartDate)) //
-	formData.append("leaveEndDate", dateToISO(formDataWorkInternational.leaveEndDate)) //
-	formData.append("leaveWrote", formDataWorkInternational.leaveWrote) //
-	formData.append("leaveDetail", formDataWorkInternational.leaveDetail) //
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					hide-bottom-space
-					bg-color="white"
-					for="leaveWroteRef"
-					dense
-					outlined
-					v-model="formDataWorkInternational.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataWorkInternational.leaveStartDate"
-					:locale="'th'"
-					hide-bottom-space
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="formDataWorkInternational.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="formDataWorkInternational.leaveStartDate != null ? date2Thai(formDataWorkInternational.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataWorkInternational.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					@update:model-value="FetchCheck()"
-					week-start="0"
-					:readonly="!formDataWorkInternational.leaveStartDate"
-					:min-date="formDataWorkInternational.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!formDataWorkInternational.leaveStartDate"
-							class="full-width datepicker"
-							:model-value="formDataWorkInternational.leaveEndDate != null ? date2Thai(formDataWorkInternational.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<!-- <q-input
-							class="col-md-3 col-sm-12"
-							dense
-							outlined
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							type="number"
-							v-model="formDataWorkInternational.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-						/> -->
-
-				<q-input
-					hide-bottom-space
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					bg-color="white"
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataWorkInternational.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file
-					ref="fileRef"
-					bg-color="white"
-					v-model="formDataWorkInternational.leaveDocument"
-					@added="fileUploadDoc"
-					dense
-					label="เอกสารประกอบ"
-					outlined
-					use-chips
-					multiple
-					class="q-pl-sm col-12"
-				>
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in formDataWorkInternational.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<div v-if="formDataWorkInternational.leaveWrote && formDataWorkInternational.leaveEndDate && formDataWorkInternational.leaveStartDate" class="q-mt-md">
-			<div style="display: flex; align-items: center">
-				<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
-				<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
-			</div>
-			<q-card class="bg-grey-1 q-pa-sm" bordered>
-				<div class="row">
-					<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
-						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
-							<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile('08dc05c8-4cfd-4603-81f8-92a401571717', 'แบบฟอร์ม')" />
-						</div>
-					</div>
-					<div class="col-10 col-sm-5 col-md-4 q-my-sm">
-						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
-							<q-file v-model="formDataWorkInternational.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept=".pdf">
-								<template v-slot:prepend>
-									<q-icon name="attach_file" color="primary" />
-								</template>
-							</q-file>
-						</div>
-					</div>
-					<!-- <div class="col-md-1 self-end q-mb-sm">
-						<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
-							><q-tooltip>อัปโหลด</q-tooltip></q-btn
-						>
-					</div> -->
-				</div>
-			</q-card>
-		</div>
-
-		<div v-if="!isSave">
-			<q-separator class="q-mt-sm" />
-			<div class="row col-12 q-pt-md">
-				<q-space />
-				<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-			</div>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue
deleted file mode 100644
index 3f81ef6..0000000
--- a/src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue
+++ /dev/null
@@ -1,581 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, computed, onMounted } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import { useQuasar } from "quasar"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const router = useRouter()
-const { dialogConfirm, date2Thai, arabicNumberToText, calculateDurationYmd, dateToISO, fails, success, messageError } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataFollowSpouse = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "", //จำนวนวันลา
-	leaveSalaryText: 25000,
-	leaveSalary: 25000, //เงินเดือนปัจจุบัน
-	coupleDayName: "", //ชื่อคู่สมรส
-	coupleDayPosition: "", //ตำแหน่งคู่สมรส
-	coupleDayLevel: "", //ระดับคู่สมรส
-	coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
-	followHistoryCountry: "ลาว", //ประวัติการลาติดตามคู่สมรส
-	followHistoryTime: "0 วัน",
-	followHistoryStart: new Date(),
-	followHistoryEnd: new Date(),
-	leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
-	leaveDocument: [], //เอกสารปะกอบ
-})
-
-/** แปลงตัวแปร Salary */
-const formattleaveSalaryText = arabicNumberToText(formDataFollowSpouse.leaveSalaryText)
-const formattSalary = computed(() => {
-	return formDataFollowSpouse.leaveSalary !== null ? formDataFollowSpouse.leaveSalary.toLocaleString("th-TH") : ""
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveSalaryRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const coupleDayNameRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const coupleDayPositionRef = ref<object | null>(null)
-const coupleDayLevelRef = ref<object | null>(null)
-const coupleDayLevelCountryRef = ref<object | null>(null)
-const followHistoryCountryRef = ref<object | null>(null)
-const followHistoryTimeRef = ref<object | null>(null)
-const followHistoryStartRef = ref<object | null>(null)
-const followHistoryEndRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef, //เขียนที่***
-	leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
-	leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
-	leaveTotal: leaveTotalRef, //จำนวนวันลา
-	leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
-	coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
-	coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
-	coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
-	coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
-	followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
-	followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
-	followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
-	followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
-	leaveDetail: leaveDetailRef, //รายละเอียดการลา
-	leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataFollowSpouse.leaveWrote = props.data.leaveWrote
-	formDataFollowSpouse.leaveStartDate = props.data.leaveStartDate
-	formDataFollowSpouse.leaveEndDate = props.data.leaveEndDate
-	formDataFollowSpouse.leaveTotal = props.data.leaveTotal
-	formDataFollowSpouse.leaveDetail = props.data.leaveDetail
-	formDataFollowSpouse.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null, EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataFollowSpouse.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataFollowSpouse.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataFollowSpouse.leaveDocument.length > 0) {
-	// 	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)
-	// } //
-	formData.append("leaveDocument", formDataFollowSpouse.leaveDocument)
-	formData.append("type", formDataFollowSpouse.type) //
-	formData.append("leaveStartDate", dateToISO(formDataFollowSpouse.leaveStartDate)) //
-	formData.append("leaveEndDate", dateToISO(formDataFollowSpouse.leaveEndDate)) //
-	formData.append("followHistoryStart", dateToISO(formDataFollowSpouse.followHistoryStart)) //
-	formData.append("followHistoryEnd", dateToISO(formDataFollowSpouse.followHistoryEnd)) //
-	formData.append("leaveWrote", formDataFollowSpouse.leaveWrote) //
-	formData.append("leaveDetail", formDataFollowSpouse.leaveDetail) //
-	formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText) //
-	formData.append("leaveSalary", formDataFollowSpouse.leaveSalary) //
-	formData.append("followHistoryTime", formDataFollowSpouse.followHistoryTime) //
-	formData.append("followHistoryCountry", formDataFollowSpouse.followHistoryCountry) //
-	formData.append("coupleDayLevelCountry", formDataFollowSpouse.coupleDayLevelCountry) //
-	formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel) //
-	formData.append("coupleDayPosition", formDataFollowSpouse.coupleDayPosition) //
-	formData.append("coupleDayName", formDataFollowSpouse.coupleDayName) //
-	formData.append("leaveTotal", formDataFollowSpouse.leaveTotal) //
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataFollowSpouse.leaveStartDate, formDataFollowSpouse.leaveEndDate)
-	formDataFollowSpouse.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="formDataFollowSpouse.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataFollowSpouse.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="formDataFollowSpouse.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="formDataFollowSpouse.leaveStartDate != null ? date2Thai(formDataFollowSpouse.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataFollowSpouse.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					:readonly="!formDataFollowSpouse.leaveStartDate"
-					:min-date="formDataFollowSpouse.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!formDataFollowSpouse.leaveStartDate"
-							class="full-width datepicker"
-							:model-value="formDataFollowSpouse.leaveEndDate != null ? date2Thai(formDataFollowSpouse.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					bg-color="white"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataFollowSpouse.leaveTotal"
-					label="เป็นเวลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="col-12 col-md-6 col-sm-12">
-					<q-input
-						hide-bottom-space
-						bg-color="white"
-						class="col-12 col-sm-12"
-						ref="leaveSalaryRef"
-						for="leaveSalaryRef"
-						dense
-						outlined
-						v-model="formattSalary"
-						label="เงินเดือนปัจจุบัน"
-						readonly
-					/>
-				</div>
-				<div class="col-12 col-md-6 col-sm-12">
-					<q-input
-						hide-bottom-space
-						bg-color="white"
-						class="col-12 col-sm-12"
-						ref="leaveSalaryRef"
-						for="leaveSalaryRef"
-						dense
-						outlined
-						v-model="formattleaveSalaryText"
-						label="เงินเดือนปัจจุบัน"
-						readonly
-					/>
-				</div>
-
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						hide-bottom-space
-						ref="coupleDayNameRef"
-						for="coupleDayNameRef"
-						dense
-						bg-color="white"
-						outlined
-						v-model="formDataFollowSpouse.coupleDayName"
-						label="ชื่อคู่สมรส"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
-					/>
-				</div>
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						hide-bottom-space
-						ref="coupleDayPositionRef"
-						for="coupleDayPositionRef"
-						dense
-						outlined
-						bg-color="white"
-						v-model="formDataFollowSpouse.coupleDayPosition"
-						label="ตำแหน่งคู่สมรส"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
-					/>
-				</div>
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						ref="coupleDayLevelRef"
-						for="coupleDayLevelRef"
-						dense
-						hide-bottom-space
-						outlined
-						bg-color="white"
-						v-model="formDataFollowSpouse.coupleDayLevel"
-						label="ระดับคู่สมรส"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
-					/>
-				</div>
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						ref="coupleDayLevelCountryRef"
-						for="coupleDayLevelCountryRef"
-						hide-bottom-space
-						dense
-						outlined
-						bg-color="white"
-						v-model="formDataFollowSpouse.coupleDayLevelCountry"
-						label="ไปปฏิบัติราชการ ณ ประเทศ"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
-					/>
-				</div>
-				<div class="text-weight-bold text-dark col-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
-				<datepicker
-					class="col-12 col-md-3 col-sm-12"
-					menu-class-name="modalfix"
-					v-model="formDataFollowSpouse.followHistoryStart"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					readonly
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="followHistoryStartRef"
-							for="followHistoryStartRef"
-							hide-bottom-space
-							readonly
-							bg-color="white"
-							class="full-width"
-							:model-value="formDataFollowSpouse.followHistoryStart != null ? date2Thai(formDataFollowSpouse.followHistoryStart) : null"
-							:label="`${'ตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<datepicker
-					class="col-12 col-md-3 col-sm-12"
-					menu-class-name="modalfix"
-					v-model="formDataFollowSpouse.followHistoryEnd"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					readonly
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="followHistoryEndRef"
-							for="followHistoryEndRef"
-							hide-bottom-space
-							bg-color="white"
-							readonly
-							class="full-width"
-							:model-value="formDataFollowSpouse.followHistoryEnd != null ? date2Thai(formDataFollowSpouse.followHistoryEnd) : null"
-							:label="`${'ถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-3 col-sm-12"
-					dense
-					outlined
-					hide-bottom-space
-					bg-color="white"
-					ref="followHistoryCountryRef"
-					for="followHistoryCountryRef"
-					v-model="formDataFollowSpouse.followHistoryCountry"
-					label="ประเทศ"
-					:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
-					readonly
-				/>
-				<q-input
-					class="col-12 col-md-3 col-sm-12"
-					dense
-					outlined
-					:readonly="formDataFollowSpouse.followHistoryTime !== ''"
-					hide-bottom-space
-					bg-color="white"
-					ref="followHistoryTimeRef"
-					for="followHistoryTimeRef"
-					v-model="formDataFollowSpouse.followHistoryTime"
-					label="เป็นเวลา"
-				/>
-
-				<q-input
-					hide-bottom-space
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					bg-color="white"
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataFollowSpouse.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file
-					ref="fileRef"
-					bg-color="white"
-					v-model="formDataFollowSpouse.leaveDocument"
-					@added="fileUploadDoc"
-					dense
-					label="เอกสารประกอบ"
-					outlined
-					use-chips
-					multiple
-					class="q-pl-sm col-12"
-				>
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in formDataFollowSpouse.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/Forms/13_RehabilitationForm.vue b/src/modules/05_leave/components/Forms/13_RehabilitationForm.vue
deleted file mode 100644
index 341c32c..0000000
--- a/src/modules/05_leave/components/Forms/13_RehabilitationForm.vue
+++ /dev/null
@@ -1,381 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-import genReport from "@/plugins/genreport"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
-const router = useRouter()
-const edit = ref<boolean>(true)
-const isSave = ref<boolean>(false)
-const files = ref<any>(null)
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Array,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataRehabilitation = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveDocument: "",
-	leaveDetail: "",
-	leaveDraftDocument: null,
-})
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: RehabilitationForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveWrote: leaveWroteRef,
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const nameFileDraft = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null, EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataRehabilitation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataRehabilitation.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-//download function
-async function onClickDownloadFile(id: string, fileName: string) {
-	// showLoader();
-	await http
-		.get(config.API.leaveReport(id))
-		.then(async res => {
-			console.log(res)
-			const data = res.data.result
-			await genReport(data, fileName)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			// hideLoader();
-		})
-}
-
-// //download function
-// async function onClickUpload() {
-// 	// showLoader();
-// 	const data = {
-// 		template: "leave16",
-// 		reportName: "docx-report",
-// 		data: {
-// 			leaveWrote: "",
-// 			dateSendLeave: "",
-// 			leaveTypeName: "",
-// 			dear: "",
-// 			fullname: "",
-// 			fullnameEng: "",
-// 			positionName: "",
-// 			positionLeaveName: "",
-// 			organizationName: "",
-// 			leaveDateStart: "",
-// 			leaveDateEnd: "",
-// 		},
-// 	}
-// 	await http
-// 		.post(config.API.leaveReport())
-// 		.then(async res => {
-// 			console.log(res)
-// 			const data = res.data.result
-// 			await genReport(data, "รายงาน")
-// 		})
-// 		.catch(err => {
-// 			messageError($q, err)
-// 		})
-// 		.finally(() => {
-// 			// hideLoader();
-// 		})
-// }
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// 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) //
-	// }
-
-	// if (formDataRehabilitation.leaveDocument.length > 0) {
-	// 	const blob = formDataRehabilitation.leaveDocument.slice(0, formDataRehabilitation.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataRehabilitation.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// } //
-	formData.append("leaveDraftDocument", formDataRehabilitation.leaveDraftDocument)
-	formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
-	formData.append("type", formDataRehabilitation.type) //
-	formData.append("leaveStartDate", dateToISO(formDataRehabilitation.leaveStartDate)) //
-	formData.append("leaveEndDate", dateToISO(formDataRehabilitation.leaveEndDate)) //
-	formData.append("leaveWrote", formDataRehabilitation.leaveWrote) //
-	formData.append("leaveDetail", formDataRehabilitation.leaveDetail) //
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="formDataRehabilitation.leaveWrote"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					dense
-					outlined
-					bg-color="white"
-					label="เขียนที่"
-					hide-bottom-space
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					v-model="formDataRehabilitation.leaveStartDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:enableTimePicker="false"
-					:locale="'th'"
-					@update:model-value="formDataRehabilitation.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveStartDateRef"
-							class="full-width datepicker"
-							bg-color="white"
-							outlined
-							dense
-							lazy-rules
-							hide-bottom-space
-							:model-value="formDataRehabilitation.leaveStartDate != null ? date2Thai(formDataRehabilitation.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					v-model="formDataRehabilitation.leaveEndDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:locale="'th'"
-					@update:model-value="FetchCheck()"
-					:readonly="!formDataRehabilitation.leaveStartDate"
-					:enableTimePicker="false"
-					:min-date="formDataRehabilitation.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveEndDateRef"
-							class="full-width datepicker"
-							outlined
-							dense
-							lazy-rules
-							bg-color="white"
-							hide-bottom-space
-							:readonly="!formDataRehabilitation.leaveStartDate"
-							:model-value="formDataRehabilitation.leaveEndDate != null ? date2Thai(formDataRehabilitation.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input v-model="formDataRehabilitation.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="formDataRehabilitation.leaveDocument" @added="fileUploadDoc" use-chips bg-color="white" dense outlined multiple label="เอกสารประกอบ">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<div v-if="formDataRehabilitation.leaveWrote && formDataRehabilitation.leaveStartDate && formDataRehabilitation.leaveEndDate" class="q-mt-md">
-			<div style="display: flex; align-items: center">
-				<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
-				<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
-			</div>
-			<q-card class="bg-grey-1 q-pa-sm" bordered>
-				<div class="row">
-					<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
-						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
-							<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile('08dc05c8-4cfd-4603-81f8-92a401571717', 'แบบฟอร์ม')" />
-						</div>
-					</div>
-					<div class="col-10 col-sm-5 col-md-4 q-my-sm">
-						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
-							<q-file v-model="formDataRehabilitation.leaveDraftDocument" use-chips dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept="application/pdf">
-								<template v-slot:prepend>
-									<q-icon name="attach_file" color="primary" />
-								</template>
-							</q-file>
-						</div>
-					</div>
-					<!-- <div class="col-md-1 self-end q-mb-sm">
-						<q-btn v-if="formDataRehabilitation.leaveDraftDocument != null" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
-							><q-tooltip>อัปโหลด</q-tooltip></q-btn
-						>
-					</div> -->
-				</div>
-			</q-card>
-		</div>
-
-		<div v-if="!isSave">
-			<q-separator class="q-mt-sm" />
-			<div class="row col-12 q-pt-md">
-				<q-space />
-				<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-			</div>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/Forms/Form.vue b/src/modules/05_leave/components/Forms/Form.vue
deleted file mode 100644
index bbe45a9..0000000
--- a/src/modules/05_leave/components/Forms/Form.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, onMounted } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const dataStore = useLeaveStore()
-const { date2Thai, success, messageError } = mixin
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	model: {
-		type: String,
-		default: "",
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<FormData>({
-	dateStart: new Date(),
-	subject: "เรื่อง",
-	who: "เรียนผู้ใด",
-	requestName: "ชื่อผู้ยื่น",
-	position: "ตำแหน่ง",
-	level: "ระดับ",
-	ocRequest: "สังกัด",
-	leaveabsentDaySummon: "2",
-	leaveUse: "1",
-	leaveRemaining: "1",
-})
-
-onMounted(async () => {
-	// await FetchProfile()
-})
-</script>
-<template>
-	<q-card bordered class="q-pa-md bg-grey-1">
-		<div class="col-12 row q-pa-sm q-col-gutter-sm">
-			<datepicker class="col-12 col-sm-4" menu-class-name="modalfix" v-model="formData.dateStart" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0" readonly>
-				<template #year="{ year }">
-					{{ year + 543 }}
-				</template>
-				<template #year-overlay-value="{ value }">
-					{{ parseInt(value + 543) }}
-				</template>
-				<template #trigger>
-					<q-input
-						outlined
-						dense
-						bg-color="white"
-						hide-bottom-space
-						readonly
-						class="full-width"
-						:model-value="dataStore.dateSendLeave != null ? date2Thai(dataStore.dateSendLeave) : null"
-						:label="`${'วันที่ยื่นใบลา'}`"
-						:rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
-					>
-						<template v-slot:prepend>
-							<q-icon name="event" class="cursor-pointer inputblack" style="color: var(--black)"> </q-icon>
-						</template>
-					</q-input>
-				</template>
-			</datepicker>
-			<q-input class="col-12 col-sm-4" dense bg-color="white" outlined readonly v-model="dataStore.typeLeave" label="เรื่อง" />
-			<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.dear" label="เรียน" />
-			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.fullName" label="ชื่อผู้ยื่นขอ" />
-			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.positionName" label="ตำแหน่งผู้ยื่นขอ" />
-			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.positionLevelName" label="ระดับผู้ยื่นขอ" />
-			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.organizationName" label="สังกัดผู้ยื่นขอ" />
-			<q-input v-if="props.model === 'LV-005'" class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveLimit" label="จำนวนสิทธิ์การลาที่ได้รับ" />
-			<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveTotal" label="จำนวนสิทธิ์การลาที่ใช้ไป" />
-			<q-input v-if="props.model === 'LV-005'" class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveRemain" label="จำนวนสิทธิ์การลาคงเหลือ" />
-		</div>
-	</q-card>
-</template>
diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index 0ca26b1..cea050d 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -176,6 +176,13 @@ onMounted(async () => {
         <q-td key="status" :props="props">
           <div class="col-12 row items-center">
             <div @click="onClickView(props.row.id, props.row.status)">
+              <q-icon
+                v-if="props.row.status == 'DRAFT'"
+                size="10px"
+                color="light-grey"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
               <q-icon
                 v-if="props.row.status == 'APPROVE'"
                 size="10px"
@@ -217,6 +224,11 @@ onMounted(async () => {
             <q-space />
 
             <q-btn
+              v-if="
+                props.row.status != 'DELETE' &&
+                props.row.status != 'REJECT' &&
+                props.row.status != 'CANCEL'
+              "
               flat
               icon="mdi-dots-vertical"
               color="grey-8"
@@ -228,11 +240,6 @@ onMounted(async () => {
               <q-menu>
                 <q-list>
                   <q-item
-                    v-if="
-                      props.row.status != 'DELETE' &&
-                      props.row.status != 'REJECT' &&
-                      props.row.status != 'CANCEL' 
-                    "
                     clickable
                     v-close-popup
                     @click="onClickView(props.row.id, 'CANCEL')"
diff --git a/src/modules/05_leave/components/Table.vue b/src/modules/05_leave/components/Table.vue
index 6408fcd..238497f 100644
--- a/src/modules/05_leave/components/Table.vue
+++ b/src/modules/05_leave/components/Table.vue
@@ -91,6 +91,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
   updatePagination(currentPage.value, pagination.value.rowsPerPage);
 });
 </script>
+
 <template>
   <div class="q-py-sm row">
     <q-card bordered flat class="q-py-sm q-pl-sm col-12 row bg-grey-1 shadow-0">
diff --git a/src/modules/05_leave/components/formEdit/Form.vue b/src/modules/05_leave/components/formEdit/Form.vue
deleted file mode 100644
index 92a6e4a..0000000
--- a/src/modules/05_leave/components/formEdit/Form.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, onMounted } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const dataStore = useLeaveStore()
-const { date2Thai, success, messageError } = mixin
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	model: {
-		type: String,
-		default: "",
-	},
-	leaveTypeId: {
-		type: String,
-		default: "",
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	data: {
-		type: Object,
-		required: true,
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-// const formData = reactive<FormData>({
-// 	dateStart: new Date(),
-// 	subject: "เรื่อง",
-// 	who: "เรียนผู้ใด",
-// 	requestName: "ชื่อผู้ยื่น",
-// 	position: "ตำแหน่ง",
-// 	level: "ระดับ",
-// 	ocRequest: "สังกัด",
-// 	leaveabsentDaySummon: "2",
-// 	leaveUse: "1",
-// 	leaveRemaining: "1",
-// })
-/**
- *ตัวแปร profile ที่จะส่งออก
- */
-const dateSendLeave = ref<Date>() //วันที่ยื่นใบลา
-const leaveTypeName = ref<string>("") //Name ประเภทการลา
-const dear = ref<string>("") //เรียน
-const fullName = ref<string>("") //คำนำหน้า ชื่อ นามสกุล ผู้ยื่นขอ
-const positionName = ref<string>("") //ตำแหน่งผู้ยื่นขอ
-const positionLevelName = ref<string>("") //ระดับผู้ยื่นขอ
-const organizationName = ref<string>("") //สังกัดผู้ยื่นขอ
-const leaveLimit = ref<number>(0) //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
-const leaveTotal = ref<number>(0) //ลาไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
-const leaveRemain = ref<number>(0) //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
-const restDayTotalOld = ref<number>(0) //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา
-const birthDate = ref<Date>() //วันเกิด
-const dateAppoint = ref<Date>() //วันที่เข้ารับราชการ
-const salary = ref<number>(0) //เงินเดือนปัจจุบัน
-const salaryText = ref<string>("") //เงินเดือนปัจจุบัน(ภาษาไทย)
-const leaveLast = ref<any>()
-const restDayCurrentTotal = ref<string>("")
-//ดึงข้อมูล profile จาก API
-async function fetchProfile() {
-	console.log(props.leaveTypeId)
-
-	await http
-		.post(config.API.leaveProfile(), { type: props.leaveTypeId })
-		.then((res: any) => {
-			const data = res.data.result
-			dateSendLeave.value = data.dateSendLeave
-			leaveTypeName.value = data.leaveTypeName
-			dear.value = data.dear
-			fullName.value = data.fullName
-			positionName.value = data.positionName
-			positionLevelName.value = data.positionLevelName
-			organizationName.value = data.organizationName
-			leaveLimit.value = data.leaveLimit
-			leaveTotal.value = data.leaveTotal
-			leaveRemain.value = data.leaveRemain
-			restDayTotalOld.value = data.restDayTotalOld
-			birthDate.value = data.birthDate
-			dateAppoint.value = data.dateAppoint
-			salary.value = data.salary
-			salaryText.value = data.salaryText
-			leaveLast.value = date2Thai(data.leaveLast) !== "0001-01-01T00:00:00" ? date2Thai(data.leaveLast) : "-"
-			restDayCurrentTotal.value = data.restDayCurrentTotal
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-onMounted(async () => {
-	await setTimeout(() => fetchProfile(), 500)
-})
-</script>
-<template>
-	<q-card bordered class="q-pa-md bg-grey-1">
-		<div class="col-12 row q-pa-sm q-col-gutter-sm">
-			<datepicker class="col-12 col-sm-4" menu-class-name="modalfix" v-model="dateSendLeave" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0" readonly>
-				<template #year="{ year }">
-					{{ year + 543 }}
-				</template>
-				<template #year-overlay-value="{ value }">
-					{{ parseInt(value + 543) }}
-				</template>
-				<template #trigger>
-					<q-input
-						outlined
-						dense
-						bg-color="white"
-						hide-bottom-space
-						readonly
-						class="full-width"
-						:model-value="dateSendLeave != null ? date2Thai(dateSendLeave) : null"
-						:label="`${'วันที่ยื่นใบลา'}`"
-						:rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
-					>
-						<template v-slot:prepend>
-							<q-icon name="event" class="cursor-pointer inputblack" style="color: var(--black)"> </q-icon>
-						</template>
-					</q-input>
-				</template>
-			</datepicker>
-			<q-input class="col-12 col-sm-4" dense bg-color="white" outlined readonly v-model="leaveTypeName" label="เรื่อง" />
-			<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dear" label="เรียน" />
-			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="fullName" label="ชื่อผู้ยื่นขอ" />
-			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="positionName" label="ตำแหน่งผู้ยื่นขอ" />
-			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="positionLevelName" label="ระดับผู้ยื่นขอ" />
-			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="organizationName" label="สังกัดผู้ยื่นขอ" />
-			<q-input v-if="leaveTypeName === 'ลาพักผ่อน'" class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="leaveLimit" label="จำนวนสิทธิ์การลาที่ได้รับ" />
-			<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="leaveTotal" label="จำนวนสิทธิ์การลาที่ใช้ไป" />
-			<q-input v-if="leaveTypeName === 'ลาพักผ่อน'" class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="leaveRemain" label="จำนวนสิทธิ์การลาคงเหลือ" />
-		</div>
-	</q-card>
-</template>
diff --git a/src/modules/05_leave/components/formEdit/formEdit_Birth.vue b/src/modules/05_leave/components/formEdit/formEdit_Birth.vue
deleted file mode 100644
index 128b12c..0000000
--- a/src/modules/05_leave/components/formEdit/formEdit_Birth.vue
+++ /dev/null
@@ -1,391 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue"
-import { useQuasar } from "quasar"
-import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const mixin = useCounterMixin()
-const router = useRouter()
-const $q = useQuasar()
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataBirth = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "",
-	leaveLast: "",
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveTotalRef = 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 = {
-	leaveWrote: leaveWroteRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataBirth.leaveWrote = props.data.leaveWrote
-	formDataBirth.leaveStartDate = props.data.leaveStartDate
-	formDataBirth.leaveEndDate = props.data.leaveEndDate
-	formDataBirth.leaveTotal = props.data.leaveTotal
-	formDataBirth.leaveNumber = props.data.leaveNumber
-	formDataBirth.leaveDetail = props.data.leaveDetail
-	formDataBirth.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-async function fileUploadDoc(files: any) {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataBirth.leaveStartDate ?? null, EndLeaveDate: formDataBirth.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataBirth.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataBirth.leaveLast = data.sumDateWork
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataBirth.leaveDocument.length > 0) {
-	// 	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)
-	// }
-	formData.append("leaveDocument", formDataBirth.leaveDocument)
-	formData.append("type", formDataBirth.type)
-	formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate))
-	formData.append("leaveWrote", formDataBirth.leaveWrote)
-	formData.append("leaveAddress", formDataBirth.leaveAddress)
-	formData.append("leaveNumber", formDataBirth.leaveNumber)
-	formData.append("leaveDetail", formDataBirth.leaveDetail)
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-</script>
-
-<!-- ฟอร์มลาคลอดบุตร-->
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					outlined
-					v-model="props.data.leaveWrote"
-					label="เขียนที่"
-					hide-bottom-space
-					bg-color="white"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateStart"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="props.data.leaveDateEnd = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateEnd"
-					:locale="'th'"
-					autoApply
-					@update:model-value="FetchCheck()"
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!props.data.leaveDateStart"
-					:min-date="props.data.leaveDateStart"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!props.data.leaveDateStart"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-3 col-sm-6"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="props.data.leaveTotal"
-					label="จำนวนวันที่ลา"
-					bg-color="white"
-					readonly
-					hide-bottom-space
-				/>
-				<q-input
-					class="col-12 col-md-3 col-sm-6"
-					dense
-					outlined
-					ref="leaveLastRef"
-					for="leaveLastRef"
-					v-model="dataStore.leaveLast"
-					label="ลาครั้งสุดท้ายเมื่อวันที่"
-					readonly
-					hide-bottom-space
-					bg-color="white"
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="props.data.leaveNumber"
-							mask="(###)-###-####"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="props.data.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-				<q-input
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="props.data.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file
-					for="leaveDocumentRef"
-					hide-bottom-space
-					v-model="props.data.leaveDocument"
-					@added="fileUploadDoc"
-					dense
-					bg-color="white"
-					label="เอกสารประกอบ"
-					outlined
-					use-chips
-					multiple
-					class="q-pl-sm col-12"
-				>
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/formEdit/formEdit_FollowSpouse.vue b/src/modules/05_leave/components/formEdit/formEdit_FollowSpouse.vue
deleted file mode 100644
index 7e1fa0a..0000000
--- a/src/modules/05_leave/components/formEdit/formEdit_FollowSpouse.vue
+++ /dev/null
@@ -1,570 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, computed, onMounted } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import { useQuasar } from "quasar"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const router = useRouter()
-const { dialogConfirm, date2Thai, arabicNumberToText, calculateDurationYmd, dateToISO, fails, success, messageError } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataFollowSpouse = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "", //จำนวนวันลา
-	leaveSalaryText: 25000,
-	leaveSalary: 25000, //เงินเดือนปัจจุบัน
-	coupleDayName: "", //ชื่อคู่สมรส
-	coupleDayPosition: "", //ตำแหน่งคู่สมรส
-	coupleDayLevel: "", //ระดับคู่สมรส
-	coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
-	followHistoryCountry: "ลาว", //ประวัติการลาติดตามคู่สมรส
-	followHistoryTime: "0 วัน",
-	followHistoryStart: new Date(),
-	followHistoryEnd: new Date(),
-	leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
-	leaveDocument: [], //เอกสารปะกอบ
-})
-
-/** แปลงตัวแปร Salary */
-const formattleaveSalaryText = arabicNumberToText(props.data.leaveSalaryText)
-const formattSalary = computed(() => {
-	return props.data.leaveSalary !== null ? props.data.leaveSalary.toLocaleString("th-TH") : ""
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveSalaryRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const coupleDayNameRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const coupleDayPositionRef = ref<object | null>(null)
-const coupleDayLevelRef = ref<object | null>(null)
-const coupleDayLevelCountryRef = ref<object | null>(null)
-const followHistoryCountryRef = ref<object | null>(null)
-const followHistoryTimeRef = ref<object | null>(null)
-const followHistoryStartRef = ref<object | null>(null)
-const followHistoryEndRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef, //เขียนที่***
-	leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
-	leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
-	leaveTotal: leaveTotalRef, //จำนวนวันลา
-	leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
-	coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
-	coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
-	coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
-	coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
-	followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
-	followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
-	followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
-	followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
-	leaveDetail: leaveDetailRef, //รายละเอียดการลา
-	leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataFollowSpouse.leaveWrote = props.data.leaveWrote
-	formDataFollowSpouse.leaveStartDate = props.data.leaveStartDate
-	formDataFollowSpouse.leaveEndDate = props.data.leaveEndDate
-	formDataFollowSpouse.leaveTotal = props.data.leaveTotal
-	formDataFollowSpouse.leaveDetail = props.data.leaveDetail
-	formDataFollowSpouse.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null, EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataFollowSpouse.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataFollowSpouse.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataFollowSpouse.leaveDocument.length > 0) {
-	// 	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)
-	// } //
-	formData.append("leaveDocument", formDataFollowSpouse.leaveDocument)
-	formData.append("type", formDataFollowSpouse.type) //
-	formData.append("leaveStartDate", dateToISO(formDataFollowSpouse.leaveStartDate)) //
-	formData.append("leaveEndDate", dateToISO(formDataFollowSpouse.leaveEndDate)) //
-	formData.append("followHistoryStart", dateToISO(formDataFollowSpouse.followHistoryStart)) //
-	formData.append("followHistoryEnd", dateToISO(formDataFollowSpouse.followHistoryEnd)) //
-	formData.append("leaveWrote", formDataFollowSpouse.leaveWrote) //
-	formData.append("leaveDetail", formDataFollowSpouse.leaveDetail) //
-	formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText) //
-	formData.append("leaveSalary", formDataFollowSpouse.leaveSalary) //
-	formData.append("followHistoryTime", formDataFollowSpouse.followHistoryTime) //
-	formData.append("followHistoryCountry", formDataFollowSpouse.followHistoryCountry) //
-	formData.append("coupleDayLevelCountry", formDataFollowSpouse.coupleDayLevelCountry) //
-	formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel) //
-	formData.append("coupleDayPosition", formDataFollowSpouse.coupleDayPosition) //
-	formData.append("coupleDayName", formDataFollowSpouse.coupleDayName) //
-	formData.append("leaveTotal", formDataFollowSpouse.leaveTotal) //
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataFollowSpouse.leaveStartDate, formDataFollowSpouse.leaveEndDate)
-	formDataFollowSpouse.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="props.data.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateStart"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="props.data.leaveDateEnd = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateEnd"
-					:locale="'th'"
-					autoApply
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					:readonly="!props.data.leaveDateStart"
-					:min-date="props.data.leaveDateStart"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!props.data.leaveDateStart"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					bg-color="white"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="props.data.leaveTotal"
-					label="เป็นเวลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="col-12 col-md-6 col-sm-12">
-					<q-input
-						hide-bottom-space
-						bg-color="white"
-						class="col-12 col-sm-12"
-						ref="leaveSalaryRef"
-						for="leaveSalaryRef"
-						dense
-						outlined
-						v-model="formattSalary"
-						label="เงินเดือนปัจจุบัน"
-						readonly
-					/>
-				</div>
-				<div class="col-12 col-md-6 col-sm-12">
-					<q-input
-						hide-bottom-space
-						bg-color="white"
-						class="col-12 col-sm-12"
-						ref="leaveSalaryRef"
-						for="leaveSalaryRef"
-						dense
-						outlined
-						v-model="formattleaveSalaryText"
-						label="เงินเดือนปัจจุบัน"
-						readonly
-					/>
-				</div>
-
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						hide-bottom-space
-						ref="coupleDayNameRef"
-						for="coupleDayNameRef"
-						dense
-						bg-color="white"
-						outlined
-						v-model="props.data.coupleDayName"
-						label="ชื่อคู่สมรส"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
-					/>
-				</div>
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						hide-bottom-space
-						ref="coupleDayPositionRef"
-						for="coupleDayPositionRef"
-						dense
-						outlined
-						bg-color="white"
-						v-model="props.data.coupleDayPosition"
-						label="ตำแหน่งคู่สมรส"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
-					/>
-				</div>
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						ref="coupleDayLevelRef"
-						for="coupleDayLevelRef"
-						dense
-						hide-bottom-space
-						outlined
-						bg-color="white"
-						v-model="props.data.coupleDayLevel"
-						label="ระดับคู่สมรส"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
-					/>
-				</div>
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						ref="coupleDayLevelCountryRef"
-						for="coupleDayLevelCountryRef"
-						hide-bottom-space
-						dense
-						outlined
-						bg-color="white"
-						v-model="props.data.coupleDayLevelCountry"
-						label="ไปปฏิบัติราชการ ณ ประเทศ"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
-					/>
-				</div>
-				<div class="text-weight-bold text-dark col-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
-				<datepicker
-					class="col-12 col-md-3 col-sm-12"
-					menu-class-name="modalfix"
-					v-model="props.data.followHistoryStart"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					readonly
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="followHistoryStartRef"
-							for="followHistoryStartRef"
-							hide-bottom-space
-							readonly
-							bg-color="white"
-							class="full-width"
-							:model-value="props.data.followHistoryStart != null ? date2Thai(props.data.followHistoryStart) : null"
-							:label="`${'ตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<datepicker
-					class="col-12 col-md-3 col-sm-12"
-					menu-class-name="modalfix"
-					v-model="props.data.followHistoryEnd"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					readonly
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="followHistoryEndRef"
-							for="followHistoryEndRef"
-							hide-bottom-space
-							bg-color="white"
-							readonly
-							class="full-width"
-							:model-value="props.data.followHistoryEnd != null ? date2Thai(props.data.followHistoryEnd) : null"
-							:label="`${'ถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-3 col-sm-12"
-					dense
-					outlined
-					hide-bottom-space
-					bg-color="white"
-					ref="followHistoryCountryRef"
-					for="followHistoryCountryRef"
-					v-model="props.data.followHistoryCountry"
-					label="ประเทศ"
-					:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
-					readonly
-				/>
-				<q-input
-					class="col-12 col-md-3 col-sm-12"
-					dense
-					outlined
-					:readonly="props.data.followHistoryTime !== ''"
-					hide-bottom-space
-					bg-color="white"
-					ref="followHistoryTimeRef"
-					for="followHistoryTimeRef"
-					v-model="props.data.followHistoryTime"
-					label="เป็นเวลา"
-				/>
-
-				<q-input
-					hide-bottom-space
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					bg-color="white"
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="props.data.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file ref="fileRef" bg-color="white" v-model="props.data.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/formEdit/formEdit_Hajj.vue b/src/modules/05_leave/components/formEdit/formEdit_Hajj.vue
deleted file mode 100644
index 8a85f9a..0000000
--- a/src/modules/05_leave/components/formEdit/formEdit_Hajj.vue
+++ /dev/null
@@ -1,354 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const router = useRouter()
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, fails, messageError, success, dateToISO } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataHaji = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leavegovernmentDate: new Date(),
-	leaveStartDate: null,
-	leaveEndDate: null,
-	totalLeave: new Date(),
-	hajjDayStatus: "true",
-	leaveDocument: null,
-})
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: HajiForm = {
-	leaveWrote: leaveWroteRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataHaji.leaveStartDate ?? null, EndLeaveDate: formDataHaji.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataHaji.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataHaji.leaveDocument.length > 0) {
-	// 	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)
-	// }
-	formData.append("leaveDocument", formDataHaji.leaveDocument)
-	formData.append("type", formDataHaji.type)
-	formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate))
-	formData.append("hajjDayStatus", formDataHaji.hajjDayStatus)
-	formData.append("leaveWrote", formDataHaji.leaveWrote)
-	formData.append("leaveDetail", formDataHaji.leaveDetail)
-	formData.append("leavegovernmentDate", dateToISO(formDataHaji.leavegovernmentDate))
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(props.data.leaveStartDate, props.data.leaveEndDate)
-	props.data.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate" class="full-width">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="props.data.leaveWrote"
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					label="เขียนที่"
-					hide-bottom-space
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							v-model="props.data.leaveDateStart"
-							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-							@update:model-value="props.data.leaveDateEnd = null"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leaveStartDateRef"
-									bg-color="white"
-									class="full-width datepicker"
-									outlined
-									dense
-									hide-bottom-space
-									:label="`${'ลาตั้งแต่วันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-									:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							v-model="props.data.leaveDateEnd"
-							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-							@update:model-value="updateLeaveTotal"
-							:readonly="!props.data.leaveDateStart"
-							:min-date="props.data.leaveDateStart"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leaveEndDateRef"
-									class="full-width datepicker"
-									bg-color="white"
-									outlined
-									dense
-									:readonly="!props.data.leaveDateStart"
-									hide-bottom-space
-									:label="`${'ลาถึงวันที่'}`"
-									@update:model-value="FetchCheck()"
-									:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<q-input
-							class="col-12 col-md-2 col-sm-6"
-							dense
-							outlined
-							bg-color="white"
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							v-model="props.data.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							hide-bottom-space
-						/>
-						<datepicker
-							v-model="props.data.leavegovernmentDate"
-							class="col-12 col-md-4 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							readonly
-							week-start="0"
-							:locale="'th'"
-							:enableTimePicker="false"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavegovernmentDateRef"
-									bg-color="white"
-									class="full-width"
-									outlined
-									dense
-									readonly
-									hide-bottom-space
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="props.data.leavegovernmentDate != null ? date2Thai(props.data.leavegovernmentDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-					</div>
-				</div>
-
-				<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจญ์หรือไม่</div>
-				<div class="col-12">
-					<q-radio v-model="props.data.hajjDayStatus" val="true" checked-icon="task_alt" label="เคย" />
-					<q-radio v-model="props.data.hajjDayStatus" val="false" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจญ์" />
-				</div>
-
-				<q-input v-model="props.data.leaveDetail" class="col-12 q-mt-sm cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="props.data.leaveDocument" bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined multiple hide-bottom-space>
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/formEdit/formEdit_HelpWifeBirth.vue b/src/modules/05_leave/components/formEdit/formEdit_HelpWifeBirth.vue
deleted file mode 100644
index f78d8f9..0000000
--- a/src/modules/05_leave/components/formEdit/formEdit_HelpWifeBirth.vue
+++ /dev/null
@@ -1,436 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const mixin = useCounterMixin()
-const router = useRouter()
-const $q = useQuasar()
-const { date2Thai, calculateDurationYmd, dateToISO, dialogConfirm, fails, success, messageError } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataHelpWife = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	wifeDayName: "",
-	wifeDayDateBorn: null,
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "",
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const wifeDayNameRef = ref<object | null>(null)
-const wifeDayDateBornRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveTotalRef = 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 = {
-	leaveWrote: leaveWroteRef,
-	wifeDayName: wifeDayNameRef,
-	wifeDayDateBorn: wifeDayDateBornRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataHelpWife.leaveWrote = props.data.leaveWrote
-	formDataHelpWife.wifeDayName = props.data.wifeDayName
-	formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn
-	formDataHelpWife.leaveStartDate = props.data.leaveStartDate
-	formDataHelpWife.leaveEndDate = props.data.leaveEndDate
-	formDataHelpWife.leaveTotal = props.data.leaveTotal
-	formDataHelpWife.leaveNumber = props.data.leaveNumber
-	formDataHelpWife.leaveDetail = props.data.leaveDetail
-	formDataHelpWife.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataHelpWife.leaveStartDate, formDataHelpWife.leaveEndDate)
-	formDataHelpWife.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataHelpWife.leaveStartDate ?? null, EndLeaveDate: formDataHelpWife.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataHelpWife.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataHelpWife.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataHelpWife.leaveDocument.length > 0) {
-	// 	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)
-	// }
-	formData.append("leaveDocument", formDataHelpWife.leaveDocument)
-	formData.append("type", formDataHelpWife.type)
-	formData.append("leaveStartDate", dateToISO(formDataHelpWife.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate))
-	formData.append("leaveWrote", formDataHelpWife.leaveWrote)
-	formData.append("leaveAddress", formDataHelpWife.leaveAddress)
-	formData.append("leaveNumber", formDataHelpWife.leaveNumber)
-	formData.append("leaveDetail", formDataHelpWife.leaveDetail)
-	formData.append("wifeDayName", formDataHelpWife.wifeDayName)
-	formData.append("wifeDayDateBorn", dateToISO(formDataHelpWife.wifeDayDateBorn))
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					outlined
-					hide-bottom-space
-					bg-color="white"
-					v-model="props.data.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateStart"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="props.data.leaveDateEnd = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateEnd"
-					:locale="'th'"
-					autoApply
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					week-start="0"
-					:readonly="!props.data.leaveDateStart"
-					:min-date="props.data.leaveDateStart"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!props.data.leaveDateStart"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="props.data.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-					bg-color="white"
-				/>
-				<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
-					<q-input
-						class="col-12 col-sm-12"
-						ref="wifeDayNameRef"
-						for="wifeDayNameRef"
-						dense
-						bg-color="white"
-						outlined
-						hide-bottom-space
-						v-model="props.data.wifeDayName"
-						label="ชื่อภรรยา"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
-					/>
-				</div>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.wifeDayDateBorn"
-					:locale="'th'"
-					autoApply
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="wifeDayDateBornRef"
-							for="wifeDayDateBornRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="props.data.wifeDayDateBorn != null ? date2Thai(props.data.wifeDayDateBorn) : null"
-							:label="`${'วันที่คลอด'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="props.data.leaveNumber"
-							mask="(###)-###-####"
-							unmasked-value
-							hide-bottom-space
-							bg-color="white"
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="props.data.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-				<q-input
-					hide-bottom-space
-					bg-color="white"
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="props.data.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file bg-color="white" ref="leaveDocumentRef" v-model="props.data.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/formEdit/formEdit_Military.vue b/src/modules/05_leave/components/formEdit/formEdit_Military.vue
deleted file mode 100644
index 899c007..0000000
--- a/src/modules/05_leave/components/formEdit/formEdit_Military.vue
+++ /dev/null
@@ -1,412 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const router = useRouter()
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError, fails } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-const absentDaySummonRef = ref<object | null>(null)
-const absentDayLocationRef = ref<object | null>(null)
-const absentDayRegistorDateRef = ref<object | null>(null)
-const absentDayGetInRef = ref<object | null>(null)
-const absentDayAtRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataMilitary = reactive<any>({
-	type: dataStore.typeId,
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: 0,
-	leaveDocument: null,
-	leaveWrote: "",
-	absentDaySummon: "",
-	absentDayLocation: "",
-	absentDayRegistorDate: null,
-	absentDayGetIn: "",
-	absentDayAt: "",
-	leaveDetail: "",
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: MilitaryForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveWrote: leaveWroteRef,
-	absentDaySummon: absentDaySummonRef,
-	absentDayLocation: absentDayLocationRef,
-	absentDayRegistorDate: absentDayRegistorDateRef,
-	absentDayGetIn: absentDayGetInRef,
-	absentDayAt: absentDayAtRef,
-	leaveDetail: leaveDetailRef,
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataMilitary.leaveStartDate ?? null, EndLeaveDate: formDataMilitary.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataMilitary.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataMilitary.leaveDocument.length > 0) {
-	// 	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)
-	// }
-	formData.append("leaveDocument", formDataMilitary.leaveDocument)
-	formData.append("type", formDataMilitary.type)
-	formData.append("leaveStartDate", dateToISO(formDataMilitary.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate))
-	formData.append("absentDaySummon", formDataMilitary.absentDaySummon)
-	formData.append("absentDayLocation", formDataMilitary.absentDayLocation)
-	formData.append("absentDayRegistorDate", dateToISO(formDataMilitary.absentDayRegistorDate))
-	formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn)
-	formData.append("absentDayAt", formDataMilitary.absentDayAt)
-	formData.append("leaveWrote", formDataMilitary.leaveWrote)
-	formData.append("leaveDetail", formDataMilitary.leaveDetail)
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(props.data.leaveDateStart, props.data.leaveDateEnd)
-	props.data.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					bg-color="white"
-					hide-bottom-space
-					v-model="props.data.leaveWrote"
-					label="เขียนที่"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateStart"
-					:locale="'th'"
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="props.data.leaveDateEnd = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							bg-color="white"
-							dense
-							ref="leaveStartDateRef"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateEnd"
-					:locale="'th'"
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					:readonly="!props.data.leaveDateStart"
-					:min-date="props.data.leaveDateStart"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							bg-color="white"
-							hide-bottom-space
-							:readonly="!props.data.leaveDateStart"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="props.data.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							ref="absentDaySummonRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							v-model="props.data.absentDaySummon"
-							label="ได้รับหมายเรียกของ"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
-						/>
-
-						<q-input
-							ref="atRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							v-model="props.data.absentDayLocation"
-							label="ที่"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
-						/>
-					</div>
-				</div>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-							menu-class-name="modalfix"
-							v-model="props.data.absentDayRegistorDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="absentDayRegistorDateRef"
-									bg-color="white"
-									hide-bottom-space
-									class="full-width datepicker"
-									:model-value="props.data.absentDayRegistorDate != null ? date2Thai(props.data.absentDayRegistorDate) : null"
-									:label="`${'ลงวันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<q-input
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							ref="absentDayGetInRef"
-							outlined
-							v-model="props.data.absentDayGetIn"
-							label="ให้เข้ารับการ"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							ref="absentDayAtRef"
-							v-model="props.data.absentDayAt"
-							label="ณ ที่"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอก ณ ที่'}`]"
-						/>
-					</div>
-				</div>
-
-				<q-input class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" dense bg-color="white" outlined v-model="props.data.leaveDetail" type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="props.data.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space use-chips @added="fileUploadDoc">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/formEdit/formEdit_Ordinationvue.vue b/src/modules/05_leave/components/formEdit/formEdit_Ordinationvue.vue
deleted file mode 100644
index 8813b83..0000000
--- a/src/modules/05_leave/components/formEdit/formEdit_Ordinationvue.vue
+++ /dev/null
@@ -1,545 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, watch } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const router = useRouter()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const ordainDayLocationNumberRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-const leavebirthDateRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const totalLeaveRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const ordainDayOrdinationRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const ordainDayLocationAddressRef = ref<object | null>(null)
-const ordainDayBuddhistLentAddressRef = ref<object | null>(null)
-const ordainDayLocationNameRef = ref<object | null>(null)
-const ordainDayBuddhistLentNameRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataOrdination = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leavegovernmentDate: new Date(),
-	leavebirthDate: new Date(),
-	leaveStartDate: null,
-	leaveEndDate: null,
-	totalLeave: new Date(),
-	ordainDayOrdination: new Date(),
-	ordainDayLocationName: "",
-	ordainDayLocationNumber: null,
-	ordainDayLocationAddress: "",
-	ordainDayBuddhistLentName: "",
-	ordainDayBuddhistLentAddress: "",
-	ordainDayStatus: "true",
-	leaveDocument: null,
-})
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: OrdinationForm = {
-	leaveWrote: leaveWroteRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leavebirthDate: leavebirthDateRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	totalLeave: totalLeaveRef,
-	ordainDayOrdination: ordainDayOrdinationRef,
-	ordainDayLocationName: ordainDayLocationNameRef,
-	ordainDayLocationNumber: ordainDayLocationNumberRef,
-	ordainDayLocationAddress: ordainDayLocationAddressRef,
-	ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
-	ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-// // Watch for changes in leaveEndDate and update leaveTotal accordingly
-// watch(formDataOrdination.leaveEndDate, async () => {
-// 	if (formDataOrdination.leaveStartDate !== undefined && formDataOrdination.leaveEndDate !== undefined) {
-// 		const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
-// 		formDataOrdination.leaveTotal = newLeaveTotal
-// 		console.log(newLeaveTotal)
-// 	}
-// 	// Update the leaveTotal value
-// 	console.log("test")
-// })
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataOrdination.leaveStartDate ?? null, EndLeaveDate: formDataOrdination.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataOrdination.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataOrdination.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataOrdination.leaveDocument.length > 0) {
-	// 	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)
-	// }
-	formData.append("leaveDocument", formDataOrdination.leaveDocument)
-	formData.append("type", formDataOrdination.type)
-	formData.append("leaveStartDate", dateToISO(formDataOrdination.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate))
-	formData.append("ordainDayOrdination", dateToISO(formDataOrdination.ordainDayOrdination))
-	formData.append("ordainDayLocationName", formDataOrdination.ordainDayLocationName)
-	formData.append("ordainDayLocationNumber", formDataOrdination.ordainDayLocationNumber)
-	formData.append("ordainDayLocationAddress", formDataOrdination.ordainDayLocationAddress)
-	formData.append("ordainDayBuddhistLentName", formDataOrdination.ordainDayBuddhistLentName)
-	formData.append("ordainDayBuddhistLentAddress", formDataOrdination.ordainDayBuddhistLentAddress)
-	formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus)
-	formData.append("leaveWrote", formDataOrdination.leaveWrote)
-	formData.append("leaveDetail", formDataOrdination.leaveDetail)
-	formData.append("leavebirthDate", dateToISO(formDataOrdination.leavebirthDate))
-	formData.append("leavegovernmentDate", dateToISO(formDataOrdination.leavegovernmentDate))
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
-	formDataOrdination.leaveTotal = newLeaveTotal
-}
-</script>
-
-<!-- ฟอร์ม ลาอุปสมบท -->
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate" class="full-width">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					bg-color="white"
-					hide-bottom-space
-					v-model="props.data.leaveWrote"
-					label="เขียนที่"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateStart"
-					:locale="'th'"
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="props.data.leaveDateEnd = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							bg-color="white"
-							dense
-							ref="leaveStartDateRef"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateEnd"
-					:locale="'th'"
-					autoApply
-					borderless
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					:readonly="!props.data.leaveDateStart"
-					:enableTimePicker="false"
-					:min-date="props.data.leaveDateStart"
-					week-start="0"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							bg-color="white"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!props.data.leaveDateStart"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="props.data.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-4 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="props.data.leavegovernmentDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							readonly
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									ref="leavegovernmentDateRef"
-									dense
-									bg-color="white"
-									hide-bottom-space
-									readonly
-									class="full-width"
-									:model-value="props.data.leavegovernmentDate != null ? date2Thai(props.data.leavegovernmentDate) : null"
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							class="col-12 col-md-4 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="props.data.leavebirthDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							readonly
-							:enableTimePicker="false"
-							week-start="0"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									ref="leavebirthDateRef"
-									dense
-									bg-color="white"
-									hide-bottom-space
-									readonly
-									class="full-width"
-									:model-value="props.data.leavebirthDate != null ? date2Thai(props.data.leavebirthDate) : null"
-									:label="`${'วันเดือนปีเกิด'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกวันเดือนปีเกิด'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-					</div>
-				</div>
-
-				<div class="q-pl-sm text-weight-bold text-dark col-12">เคยบวชหรือไม่</div>
-				<div class="col-12">
-					<q-radio v-model="props.data.ordainDayStatus" val="true" label="เคยบวช" checked-icon="task_alt " hide-bottom-space />
-					<q-radio v-model="props.data.ordainDayStatus" val="false" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
-				</div>
-
-				<div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.ordainDayOrdination"
-					:locale="'th'"
-					autoApply
-					full-width
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							ref="ordainDayOrdinationRef"
-							dense
-							bg-color="white"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="props.data.ordainDayOrdination != null ? date2Thai(props.data.ordainDayOrdination) : null"
-							:label="`${'วันอุปสมบท'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input
-					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-					dense
-					hide-bottom-space
-					ref="ordainDayLocationNameRef"
-					bg-color="white"
-					outlined
-					full-width
-					v-model="props.data.ordainDayLocationName"
-					label="ชื่อวัด"
-					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-				/>
-
-				<q-input
-					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-					ref="ordainDayLocationNumberRef"
-					dense
-					full-width
-					outlined
-					v-model="props.data.ordainDayLocationNumber"
-					bg-color="white"
-					mask="(###)-###-####"
-					unmasked-value
-					hide-bottom-space
-					label="หมายเลขโทรศัพท์"
-					:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
-				/>
-				<q-input
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					ref="ordainDayLocationAddressRef"
-					bg-color="white"
-					outlined
-					hide-bottom-space
-					v-model="props.data.ordainDayLocationAddress"
-					label="ที่อยู่"
-					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
-					type="textarea"
-				/>
-
-				<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่จำพรรษา</div>
-				<q-input
-					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-					dense
-					ref="ordainDayBuddhistLentNameRef"
-					bg-color="white"
-					hide-bottom-space
-					outlined
-					v-model="props.data.ordainDayBuddhistLentName"
-					label="ชื่อวัด"
-					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-				/>
-
-				<q-input
-					class="col-12 cursor-pointer inputgreen"
-					dense
-					ref="ordainDayBuddhistLentAddressRef"
-					bg-color="white"
-					outlined
-					v-model="props.data.ordainDayBuddhistLentAddress"
-					label="ที่อยู่"
-					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
-					type="textarea"
-					hide-bottom-space
-				/>
-				<q-input
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					bg-color="white"
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="props.data.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<div class="col-12 col-sm-6">
-					<q-file ref="leaveDocumentRef" v-model="props.data.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined bg-color="white" multiple use-chips>
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/formEdit/formEdit_Rehabilitation.vue b/src/modules/05_leave/components/formEdit/formEdit_Rehabilitation.vue
deleted file mode 100644
index 1dc1ce7..0000000
--- a/src/modules/05_leave/components/formEdit/formEdit_Rehabilitation.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-import genReport from "@/plugins/genreport"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
-const router = useRouter()
-const edit = ref<boolean>(true)
-const isSave = ref<boolean>(false)
-const files = ref<any>(null)
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		required: true,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	leaveId: {
-		type: String,
-		require: true,
-	},
-})
-
-// /** ข้อมูล v-model ของฟอร์ม */
-// const formDataRehabilitation = reactive<any>({
-// 	type: dataStore.typeId,
-// 	leaveWrote: "",
-// 	leaveStartDate: null,
-// 	leaveEndDate: null,
-// 	leaveDocument: "",
-// 	leaveDetail: "",
-// 	leaveDraftDocument: null,
-// })
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: RehabilitationForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveWrote: leaveWroteRef,
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const nameFileDraft = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			// await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: props.data.leaveTypeId ?? null, StartLeaveDate: props.data.leaveDateStart ?? null, EndLeaveDate: props.data.leaveDateEnd ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				props.data.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-console.log(props.leaveId)
-
-//download function
-async function onClickDownloadFile(id: string, fileName: string) {
-	// showLoader();
-	await http
-		.get(config.API.leaveReport(id))
-		.then(async res => {
-			console.log(res)
-			const data = res.data.result
-			await genReport(data, fileName)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			// hideLoader();
-		})
-}
-
-// /**
-//  * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
-//  */
-// async function saveFormData() {
-// 	const formData = new FormData()
-// 	formData.append("leaveDraftDocument", formDataRehabilitation.leaveDraftDocument)
-// 	formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
-// 	formData.append("type", formDataRehabilitation.type) //
-// 	formData.append("leaveStartDate", dateToISO(formDataRehabilitation.leaveStartDate)) //
-// 	formData.append("leaveEndDate", dateToISO(formDataRehabilitation.leaveEndDate)) //
-// 	formData.append("leaveWrote", formDataRehabilitation.leaveWrote) //
-// 	formData.append("leaveDetail", formDataRehabilitation.leaveDetail) //
-
-// 	await http
-// 		.post(config.API.leaveUser(), formData)
-// 		.then((res: any) => {
-// 			success($q, "บันทึกสำเร็จ")
-
-// 			router.push(`/leave`)
-// 		})
-// 		.catch((e: any) => {
-// 			messageError($q, e)
-// 		})
-// }
-</script>
-
-<template>
-	<form @submit.prevent="onValidate">
-		<div style="display: flex; align-items: center">
-			<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
-			<div class="q-pl-sm text-weight-bold text-dark header">แก้ไขข้อมูล</div>
-		</div>
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="props.data.leaveWrote"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					dense
-					outlined
-					bg-color="white"
-					label="เขียนที่"
-					hide-bottom-space
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<datepicker
-					v-model="props.data.leaveDateStart"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:enableTimePicker="false"
-					:locale="'th'"
-					@update:model-value="props.data.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveStartDateRef"
-							class="full-width datepicker"
-							bg-color="white"
-							outlined
-							dense
-							lazy-rules
-							hide-bottom-space
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					v-model="props.data.leaveDateEnd"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:locale="'th'"
-					@update:model-value="FetchCheck()"
-					:readonly="!props.data.leaveDateStart"
-					:enableTimePicker="false"
-					:min-date="props.data.leaveDateStart"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveEndDateRef"
-							class="full-width datepicker"
-							outlined
-							dense
-							lazy-rules
-							bg-color="white"
-							hide-bottom-space
-							:readonly="!props.data.leaveDateEnd"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input v-model="props.data.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="props.data.leaveDocument" @added="fileUploadDoc" use-chips bg-color="white" dense outlined multiple label="เอกสารประกอบ">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<div class="q-mt-md">
-			<div style="display: flex; align-items: center">
-				<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-				<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
-			</div>
-			<q-card class="bg-grey-1 q-pa-sm" bordered>
-				<div class="row">
-					<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
-						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
-							<q-btn
-								color="primary"
-								icon="download"
-								label="ดาวน์โหลดแบบฟอร์ม"
-								@click="onClickDownloadFile('08dc01fd-51b0-4fbc-8447-ecad084a15b8', 'ฟอร์มการลาไปฟื้นฟูสมรรถภาพด้านอาชีพ')"
-							/>
-						</div>
-					</div>
-					<div class="col-10 col-sm-5 col-md-4 q-my-sm">
-						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
-							<q-file v-model="props.data.leaveDraftDocument" use-chips dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept="application/pdf">
-								<template v-slot:prepend>
-									<q-icon name="attach_file" color="primary" />
-								</template>
-							</q-file>
-						</div>
-					</div>
-					<div class="col-md-1 self-end q-mb-sm">
-						<q-btn v-if="props.data.leaveDraftDocument != ''" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
-					</div>
-				</div>
-			</q-card>
-		</div>
-
-		<div v-if="!isSave">
-			<q-separator class="q-mt-sm" />
-			<div class="row col-12 q-pt-md">
-				<q-space />
-				<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-			</div>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/formEdit/formEdit_Sick.vue b/src/modules/05_leave/components/formEdit/formEdit_Sick.vue
deleted file mode 100644
index 8ce898d..0000000
--- a/src/modules/05_leave/components/formEdit/formEdit_Sick.vue
+++ /dev/null
@@ -1,445 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, computed } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const router = useRouter()
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails, showLoader, hideLoader } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	leaveId: {
-		type: String,
-		require: true,
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataSick = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveRange: "ALL",
-	leaveTotal: "",
-	leaveLast: null,
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveRangeRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const leaveLastRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveRange: leaveRangeRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataSick.leaveWrote = props.data.leaveWrote
-	formDataSick.leaveStartDate = props.data.leaveStartDate
-	formDataSick.leaveEndDate = props.data.leaveEndDate
-	formDataSick.contractTel = props.data.contractTel
-	formDataSick.leaveTotal = props.data.leaveTotal
-	formDataSick.leaveNumber = props.data.leaveNumber
-	formDataSick.leaveDetail = props.data.leaveDetail
-	formDataSick.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-async function fileUploadDoc(files: any) {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/**
- * function รีเซทค่า leaveStartDate เเละ leaveEndDate
- */
-function resetDate() {
-	if (formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON") {
-		formDataSick.leaveStartDate = null
-		formDataSick.leaveEndDate = null
-	}
-	console.log("testnull")
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	showLoader()
-	const formData = new FormData()
-	//   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("leaveDocument", formDataSick.leaveDocument)
-	formData.append("type", formDataSick.type)
-	formData.append("leaveRange", formDataSick.leaveRange)
-	formData.append("leaveStartDate", dateToISO(formDataSick.leaveDateStart))
-	formData.append("leaveEndDate", dateToISO(formDataSick.leaveDateEnd))
-	formData.append("leaveWrote", formDataSick.leaveWrote)
-	formData.append("leaveAddress", formDataSick.leaveAddress)
-	formData.append("leaveNumber", formDataSick.leaveNumber)
-	formData.append("leaveDetail", formDataSick.leaveDetail)
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then(() => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-		.finally(() => {
-			hideLoader()
-		})
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: props.data.leaveTypeId ?? null,
-			StartLeaveDate: formDataSick.leaveDateStart ?? null,
-			EndLeaveDate: formDataSick.leaveDateEnd ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
- */
-const isReadOnly = computed(() => {
-	const conditionleaveRange = formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON"
-	if (conditionleaveRange) {
-		formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null
-		formDataSick.leaveTotal = 0.5
-	} else {
-		formDataSick.leaveTotal = null
-	}
-	return conditionleaveRange
-})
-
-function inputEdit(val: boolean) {
-	return {
-		"full-width cursor-pointer ": val,
-		"full-width cursor-pointer inputgreen": !val,
-	}
-}
-
-function resetEndDate(type: string) {
-	if (type === "day") {
-		formDataSick.EndLeaveDate === null
-	}
-}
-</script>
-
-<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล{{ dataStore.leaveLast }}</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="props.data.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<div class="col-12 col-md-4 col-sm-12">
-					<q-radio v-model="props.data.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
-					<q-radio v-model="props.data.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
-					<q-radio v-model="props.data.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
-				</div>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="props.data.leaveDateStart"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							:readonly="!edit"
-							@update:model-value="props.data.leaveEndDate = null"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="leaveStartDateRef"
-									for="leaveStartDateRef"
-									hide-bottom-space
-									:readonly="!edit"
-									bg-color="white"
-									class="full-width cursor-pointer inputgreen"
-									:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-									:label="`${'ลาตั้งแต่วันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-									style="color: var(--q-primary)"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="props.data.leaveDateEnd"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							:readonly="!props.data.leaveDateStart"
-							@update:model-value="FetchCheck(), isReadOnly"
-							:min-date="props.data.leaveDateStart"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="leaveEndDateRef"
-									for="leaveEndDateRef"
-									hide-bottom-space
-									bg-color="white"
-									:readonly="!props.data.leaveDateStart"
-									:class="inputEdit(isReadOnly)"
-									:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-									:label="`${'ลาถึงวันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-						<q-input
-							class="col-12 col-md-3 col-sm-6"
-							dense
-							bg-color="white"
-							outlined
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							v-model="props.data.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							hide-bottom-space
-						/>
-						<q-input
-							class="col-12 col-md-3 col-sm-6"
-							dense
-							outlined
-							ref="leaveLastRef"
-							for="leaveLastRef"
-							v-model="dataStore.leaveLast"
-							label="ลาครั้งสุดท้ายเมื่อวันที่"
-							readonly
-							hide-bottom-space
-							bg-color="white"
-						/>
-					</div>
-				</div>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-							dense
-							outlined
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="props.data.leaveNumber"
-							mask="(###)-###-####"
-							hide-bottom-space
-							bg-color="white"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
-							dense
-							outlined
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="props.data.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-							hide-bottom-space
-							bg-color="white"
-						/>
-					</div>
-				</div>
-				<q-input
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="props.data.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-					bg-color="white"
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-file for="leaveDocumentRef" v-model="props.data.leaveDocument" dense label="เอกสารประกอบ" outlined use-chips bg-color="white" class="col-12 q-pl-sm col-12">
-							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
-							</template>
-						</q-file>
-					</div>
-				</div>
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/formEdit/formEdit_Study.vue b/src/modules/05_leave/components/formEdit/formEdit_Study.vue
deleted file mode 100644
index f7d0b2a..0000000
--- a/src/modules/05_leave/components/formEdit/formEdit_Study.vue
+++ /dev/null
@@ -1,528 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, computed } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const router = useRouter()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError, arabicNumberToText } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leavebirthDateRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const leaveSalaryRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const studyDayScholarshipRef = ref<object | null>(null)
-const studyDayCountryRef = ref<object | null>(null)
-const studyDayUniversityNameRef = ref<object | null>(null)
-const studyDayDegreeLevelRef = ref<object | null>(null)
-const studyDaySubjectRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataStudy = reactive<any>({
-	type: dataStore.typeId, //
-	leaveWrote: "", //
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leavebirthDate: new Date(),
-	leavegovernmentDate: new Date(),
-	leaveSalary: 10000,
-	leaveSalaryText: arabicNumberToText(10000),
-	leaveNumber: "",
-	leaveAddress: "",
-	studyDayScholarship: "",
-	studyDayCountry: "",
-	studyDayUniversityName: "", //
-	studyDayDegreeLevel: "", //
-	studyDaySubject: "", //
-	leaveDocument: "", //
-	leaveDetail: "",
-	leaveTotal: "",
-})
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: studyDaySubjectForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leavebirthDate: leavebirthDateRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leaveSalary: leaveSalaryRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	studyDayScholarship: studyDayScholarshipRef,
-	studyDayCountry: studyDayCountryRef,
-	studyDayUniversityName: studyDayUniversityNameRef,
-	studyDayDegreeLevel: studyDayDegreeLevelRef,
-	studyDaySubject: studyDaySubjectRef,
-	leaveWrote: leaveWroteRef,
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataStudy.leaveStartDate ?? null, EndLeaveDate: formDataStudy.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataStudy.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataStudy.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataStudy.leaveDocument.length > 0) {
-	// 	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)
-	// }
-	formData.append("leaveDocument", formDataStudy.leaveDocument)
-	formData.append("type", formDataStudy.type) //
-	formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)) //
-	formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)) //
-	formData.append("studyDaySubject", formDataStudy.studyDaySubject)
-	formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel)
-	formData.append("leavegovernmentDate", dateToISO(formDataStudy.leavegovernmentDate))
-	formData.append("leavebirthDate", dateToISO(formDataStudy.leavebirthDate))
-	formData.append("studyDayUniversityName", formDataStudy.studyDayUniversityName)
-	formData.append("studyDayCountry", formDataStudy.studyDayCountry)
-	formData.append("leaveWrote", formDataStudy.leaveWrote) //
-	formData.append("leaveDetail", formDataStudy.leaveDetail) //
-	formData.append("studyDayScholarship", formDataStudy.studyDayScholarship)
-	formData.append("leaveAddress", formDataStudy.leaveAddress) //
-	formData.append("leaveNumber", formDataStudy.leaveNumber) //
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataStudy.leaveStartDate, formDataStudy.leaveEndDate)
-	formDataStudy.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-
-/**
- * แปลงตัวเลขเงินเดือน
- */
-const formattedleaveSalary = computed(() => {
-	return dataStore.salary !== null ? dataStore.salary.toLocaleString("th-TH") : ""
-})
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="props.data.leaveWrote"
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					label="เขียนที่"
-					hide-bottom-space
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					v-model="props.data.leaveDateStart"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:enableTimePicker="false"
-					:locale="'th'"
-					@update:model-value="props.data.leaveDateEnd = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveStartDateRef"
-							class="full-width datepicker"
-							bg-color="white"
-							outlined
-							dense
-							lazy-rules
-							hide-bottom-space
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					v-model="props.data.leaveDateEnd"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:locale="'th'"
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					:readonly="!props.data.leaveDateStart"
-					:enableTimePicker="false"
-					:min-date="props.data.leaveDateStart"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveEndDateRef"
-							class="full-width datepicker"
-							outlined
-							dense
-							lazy-rules
-							bg-color="white"
-							hide-bottom-space
-							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!props.data.leaveDateStart"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="props.data.leaveTotal"
-					label="มีกำหนด"
-					readonly
-					hide-bottom-space
-				/>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							v-model="props.data.leavegovernmentDate"
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							readonly
-							:enableTimePicker="false"
-							:locale="'th'"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavegovernmentDateRef"
-									class="full-width"
-									bg-color="white"
-									outlined
-									readonly
-									dense
-									hide-bottom-space
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="dataStore.dateAppoint != null ? date2Thai(dataStore.dateAppoint) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							v-model="props.data.leavebirthDate"
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							readonly
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavebirthDateRef"
-									class="full-width"
-									bg-color="white"
-									outlined
-									dense
-									readonly
-									hide-bottom-space
-									:label="`${'วันเดือนปีเกิด'}`"
-									:model-value="dataStore.birthDate != null ? date2Thai(dataStore.birthDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<q-input v-model="formattedleaveSalary" ref="leaveSalaryRef" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
-
-						<q-input
-							v-model="dataStore.salaryText"
-							ref="leaveSalaryRef"
-							class="col-12 col-sm-6 col-md-3"
-							bg-color="white"
-							dense
-							readonly
-							outlined
-							label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
-						/>
-					</div>
-				</div>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							v-model="props.data.studyDayUniversityName"
-							ref="studyDayUniversityNameRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ชื่อสถานศึกษา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
-						/>
-
-						<q-input
-							v-model="props.data.studyDayDegreeLevel"
-							ref="studyDayDegreeLevelRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ชั้นปริญญา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
-						/>
-
-						<q-input
-							v-model="props.data.studyDaySubject"
-							ref="studyDaySubjectRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ศึกษาวิชา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
-						/>
-
-						<q-input
-							v-model="props.data.studyDayCountry"
-							ref="studyDayCountryRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ประเทศ"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
-						/>
-
-						<q-input
-							v-model="props.data.studyDayScholarship"
-							ref="studyDayScholarshipRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ด้วยทุน"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-						/>
-
-						<q-input
-							v-model="props.data.leaveNumber"
-							ref="leaveNumberRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							unmasked-value
-							hide-bottom-space
-							mask="(###)-###-####"
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							v-model="props.data.leaveAddress"
-							ref="leaveAddressRef"
-							class="col-12 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-
-				<q-input v-model="props.data.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="props.data.leaveDocument" bg-color="white" dense outlined multiple use-chips @added="fileUploadDoc" label="เอกสารประกอบ">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/formEdit/formEdit_Vacation.vue b/src/modules/05_leave/components/formEdit/formEdit_Vacation.vue
deleted file mode 100644
index f6a0d30..0000000
--- a/src/modules/05_leave/components/formEdit/formEdit_Vacation.vue
+++ /dev/null
@@ -1,431 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, computed } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-
-/** Use */
-const $q = useQuasar()
-const dataStore = useLeaveStore()
-const mixin = useCounterMixin()
-const router = useRouter()
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataVacation = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveRange: "ALL",
-	restDayOldTotal: "",
-	restDayCurrentTotal: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "",
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const restDayOldTotalRef = ref<object | null>(null)
-const restDayCurrentTotalRef = ref<object | null>(null)
-const leaveRangeRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveTotalRef = 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 = {
-	leaveWrote: leaveWroteRef,
-	leaveRange: leaveRangeRef,
-	restDayOldTotal: restDayOldTotalRef,
-	restDayCurrentTotal: restDayCurrentTotalRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataVacation.leaveWrote = props.data.leaveWrote
-	formDataVacation.restDayOldTotal = props.data.restDayOldTotal
-	formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal
-	formDataVacation.leaveStartDate = props.data.leaveStartDate
-	formDataVacation.leaveEndDate = props.data.leaveEndDate
-	formDataVacation.leaveTotal = props.data.leaveTotal
-	formDataVacation.leaveNumber = props.data.leaveNumber
-	formDataVacation.leaveDetail = props.data.leaveDetail
-	formDataVacation.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-
-	console.log("save")
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataVacation.leaveStartDate ?? null, EndLeaveDate: formDataVacation.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataVacation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataVacation.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataVacation.leaveDocument.length > 0) {
-	// 	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)
-	// }
-	formData.append("leaveDocument", formDataVacation.leaveDocument)
-	formData.append("type", formDataVacation.type)
-	formData.append("leaveRange", formDataVacation.leaveRange)
-	formData.append("leaveStartDate", dateToISO(formDataVacation.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate))
-	formData.append("leaveWrote", formDataVacation.leaveWrote)
-	formData.append("leaveAddress", formDataVacation.leaveAddress)
-	formData.append("leaveNumber", formDataVacation.leaveNumber)
-	formData.append("leaveDetail", formDataVacation.leaveDetail)
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function รีเซทค่า leaveStartDate เเละ leaveEndDate
- */
-function resetDate() {
-	if (formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON") {
-		formDataVacation.leaveStartDate = null
-		formDataVacation.leaveEndDate = null
-	}
-	console.log("testnull")
-}
-
-/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
-const isReadOnly = computed(() => {
-	const conditionleaveRange = formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON"
-	if (conditionleaveRange) {
-		formDataVacation.leaveEndDate = formDataVacation.leaveStartDate // Set formDataVacation.leaveEndDate to null
-		formDataVacation.leaveTotal = 0.5
-	} else {
-		formDataVacation.leaveTotal = null
-	}
-	return conditionleaveRange
-})
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="props.data.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<div class="col-12 col-md-4 col-sm-6">
-					<q-radio v-model="props.data.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
-					<q-radio v-model="props.data.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
-					<q-radio v-model="props.data.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
-				</div>
-				<q-input
-					class="col-12 col-md-4 col-sm-6"
-					ref="restDayOldTotalRef"
-					for="restDayOldTotalRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					readonly
-					outlined
-					v-model="dataStore.restDayTotalOld"
-					label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
-				/>
-
-				<q-input
-					class="col-12 col-md-4 col-sm-6"
-					ref="restDayCurrentTotalRef"
-					for="restDayCurrentTotalRef"
-					dense
-					readonly
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="dataStore.leaveRemain"
-					label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
-				/>
-
-				<datepicker
-					class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateStart"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="props.data.leaveDateEnd = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateEnd"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					@update:model-value="FetchCheck()"
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="isReadOnly"
-					:min-date="props.data.leaveDateStart"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							class="full-width datepicker"
-							:readonly="isReadOnly"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					bg-color="white"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="props.data.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="props.data.leaveNumber"
-							mask="(###)-###-####"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="props.data.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-				<q-input
-					type="textarea"
-					hide-bottom-space
-					bg-color="white"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="props.data.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file ref="leaveDocumentRef" bg-color="white" v-model="props.data.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/components/formEdit/formEdit_WorkInternational.vue b/src/modules/05_leave/components/formEdit/formEdit_WorkInternational.vue
deleted file mode 100644
index bd98c5c..0000000
--- a/src/modules/05_leave/components/formEdit/formEdit_WorkInternational.vue
+++ /dev/null
@@ -1,407 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue"
-import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-import genReport from "@/plugins/genreport"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
-const edit = ref<boolean>(true)
-const router = useRouter()
-const isSave = ref<boolean>(false)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataWorkInternational = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveDetail: "",
-	leaveDocument: [],
-	leaveDraftDocument: null,
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataWorkInternational.leaveWrote = props.data.leaveWrote
-	formDataWorkInternational.leaveStartDate = props.data.leaveStartDate
-	formDataWorkInternational.leaveEndDate = props.data.leaveEndDate
-	formDataWorkInternational.leaveDetail = props.data.leaveDetail
-	formDataWorkInternational.leaveDocument = props.data.leaveDocument
-	formDataWorkInternational.leaveDraftDocument = props.data.leaveDraftDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const nameFileDraft = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-//download function
-async function onClickDownloadFile(id: string, fileName: string) {
-	// showLoader();
-	await http
-		.get(config.API.leaveReport(id))
-		.then(async res => {
-			console.log(res)
-			const data = res.data.result
-			await genReport(data, fileName)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			// hideLoader();
-		})
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
-			EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataWorkInternational.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataWorkInternational.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// //
-	// if (formDataWorkInternational.leaveDocument.length > 0) {
-	// 	const blob = formDataWorkInternational.leaveDocument.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("leaveDocument", formDataWorkInternational.leaveDocument)
-	formData.append("leaveDraftDocument", formDataWorkInternational.leaveDraftDocument)
-	formData.append("type", formDataWorkInternational.type) //
-	formData.append("leaveStartDate", dateToISO(formDataWorkInternational.leaveStartDate)) //
-	formData.append("leaveEndDate", dateToISO(formDataWorkInternational.leaveEndDate)) //
-	formData.append("leaveWrote", formDataWorkInternational.leaveWrote) //
-	formData.append("leaveDetail", formDataWorkInternational.leaveDetail) //
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					hide-bottom-space
-					bg-color="white"
-					for="leaveWroteRef"
-					dense
-					outlined
-					v-model="props.data.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateStart"
-					:locale="'th'"
-					hide-bottom-space
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="formDataWorkInternational.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateEnd"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					@update:model-value="FetchCheck()"
-					week-start="0"
-					:readonly="!props.data.leaveDateStart"
-					:min-date="props.data.leaveDateStart"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!props.data.leaveDateStart"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<!-- <q-input
-							class="col-md-3 col-sm-12"
-							dense
-							outlined
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							type="number"
-							v-model="formDataWorkInternational.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-						/> -->
-
-				<q-input
-					hide-bottom-space
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					bg-color="white"
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="props.data.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file
-					ref="fileRef"
-					bg-color="white"
-					v-model="formDataWorkInternational.leaveDocument"
-					@added="fileUploadDoc"
-					dense
-					label="เอกสารประกอบ"
-					outlined
-					use-chips
-					multiple
-					class="q-pl-sm col-12"
-				>
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in formDataWorkInternational.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<div class="q-mt-md">
-			<div style="display: flex; align-items: center">
-				<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
-				<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
-			</div>
-			<q-card class="bg-grey-1 q-pa-sm" bordered>
-				<div class="row">
-					<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
-						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด{{ formDataWorkInternational.typeId }}</div>
-							<q-btn
-								color="primary"
-								icon="download"
-								label="ดาวน์โหลดแบบฟอร์ม"
-								@click="onClickDownloadFile('08dc01fd-51b0-4fbc-8447-ecad084a15b8', 'ฟอร์มการลาไปฟื้นฟูสมรรถภาพด้านอาชีพ')"
-							/>
-						</div>
-					</div>
-					<div class="col-10 col-sm-5 col-md-4 q-my-sm">
-						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
-							<q-file v-model="formDataWorkInternational.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept=".pdf">
-								<template v-slot:prepend>
-									<q-icon name="attach_file" color="primary" />
-								</template>
-							</q-file>
-						</div>
-					</div>
-					<div class="col-md-1 self-end q-mb-sm">
-						<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
-							><q-tooltip>อัปโหลด</q-tooltip></q-btn
-						>
-					</div>
-				</div>
-			</q-card>
-		</div>
-
-		<div v-if="!isSave">
-			<q-separator class="q-mt-sm" />
-			<div class="row col-12 q-pt-md">
-				<q-space />
-				<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-			</div>
-		</div>
-	</form>
-</template>
diff --git a/src/modules/05_leave/interface/index/main.ts b/src/modules/05_leave/interface/index/main.ts
index be276d1..d1ff669 100644
--- a/src/modules/05_leave/interface/index/main.ts
+++ b/src/modules/05_leave/interface/index/main.ts
@@ -1,5 +1,3 @@
-import type { S } from "@fullcalendar/core/internal-common"
-
 interface OptionData {
 	id: string | undefined
 	name: string | undefined
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index cd8885b..105f7a4 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -80,7 +80,6 @@ export const useLeaveStore = defineStore("Leave", () => {
         code: "LV-000",
       },
     ];
-    console.log(typeOptionsMain.value);
 
     const optionType = data.map((e: TypeLeave) => ({
       id: e.id,
@@ -99,6 +98,7 @@ export const useLeaveStore = defineStore("Leave", () => {
   /** สถานะของการลา */
   const statusOptionsMain = ref<any[]>([
     { id: "ALL", name: "ทั้งหมด" },
+    { id: "DRAFT", name: "แบบร่าง" },
     { id: "NEW", name: "ใหม่" },
     { id: "PENDING", name: "กำลังดำเนินการ" },
     { id: "APPROVE", name: "อนุมัติ " },
@@ -133,8 +133,9 @@ export const useLeaveStore = defineStore("Leave", () => {
         break;
     }
   }
+
   /** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
-  const optionsSpecific = ref([
+  const optionsSpecific = ref<OptionData[]>([
     { id: "s0", name: "ลาไปศึกษาต่อ", code: "s0" },
     { id: "s1", name: "ลาฝึกอบรม", code: "s1" },
     { id: "s2", name: "ลาปฎิบัติการวิจัย", code: "s2" },
@@ -142,18 +143,19 @@ export const useLeaveStore = defineStore("Leave", () => {
   ]);
 
   /** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจญ์*/
-  const optionsOrdination = ref([
-    { id: "0", name: "ลาอุปสมบท", code: "0" },
-    { id: "1", name: "ลาประกอบพิธีฮัจญ์", code: "1" },
+  const optionsOrdination = ref<OptionData[]>([
+    { id: 'b1', name: "ลาอุปสมบท", code: 'b1' },
+    { id: 'b2', name: "ลาประกอบพิธีฮัจญ์", code: 'b2' },
   ]);
 
   /** data table filter & column ของรายการลา */
-  const visibleColumns = ref<String[]>([
+  const visibleColumns = ref<string[]>([
     "no",
     "leaveTypeName",
     "dateSendLeave",
     "status",
   ]);
+
   const columns = ref<QTableProps["columns"]>([
     {
       name: "no",
@@ -192,6 +194,7 @@ export const useLeaveStore = defineStore("Leave", () => {
       style: "font-size: 14px; width:10%;",
     },
   ]);
+
   /**
    *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา
    * @param item ประเภทแบบฟอร์ม
@@ -265,6 +268,7 @@ export const useLeaveStore = defineStore("Leave", () => {
   const salaryText = ref<string>(""); //เงินเดือนปัจจุบัน(ภาษาไทย)
   const leaveLast = ref<any>();
   const restDayCurrentTotal = ref<string>("");
+
   //ดึงข้อมูล profile จาก API
   async function fetchProfile() {
     await http
@@ -286,10 +290,7 @@ export const useLeaveStore = defineStore("Leave", () => {
         dateAppoint.value = data.dateAppoint;
         salary.value = data.salary;
         salaryText.value = data.salaryText;
-        leaveLast.value =
-          date2Thai(data.leaveLast) !== "0001-01-01T00:00:00"
-            ? date2Thai(data.leaveLast)
-            : "-";
+        leaveLast.value = data.leaveLast != "0001-01-01T00:00:00" ? date2Thai(data.leaveLast) : "-";
         restDayCurrentTotal.value = data.restDayCurrentTotal;
       })
       .catch((e: any) => {
@@ -297,6 +298,46 @@ export const useLeaveStore = defineStore("Leave", () => {
       });
   }
 
+  async function fetchProfileOld(data: any) {
+    dateSendLeave.value = data.dateSendLeave;
+    typeLeave.value = data.leaveTypeName;
+    dear.value = data.dear;
+    fullName.value = data.fullName;
+    positionName.value = data.positionName;
+    positionLevelName.value = data.positionLevelName;
+    organizationName.value = data.organizationName;
+    leaveLimit.value = data.leaveLimit;
+    leaveTotal.value = data.leaveTotal;
+    leaveRemain.value = data.leaveRemain;
+    restDayTotalOld.value = data.restDayTotalOld;
+    birthDate.value = data.birthDate;
+    dateAppoint.value = data.dateAppoint;
+    salary.value = data.salary;
+    salaryText.value = data.salaryText;
+    leaveLast.value = data.leaveLast != "0001-01-01T00:00:00" ? date2Thai(data.leaveLast) : "-";
+    restDayCurrentTotal.value = data.restDayCurrentTotal;
+  }
+
+  function resetForm2() {
+    dateSendLeave.value = undefined;
+    leaveTypeName.value = "";
+    dear.value = "";
+    fullName.value = "";
+    positionName.value = "";
+    positionLevelName.value = "";
+    organizationName.value = "";
+    leaveLimit.value = 0;
+    leaveTotal.value = 0;
+    leaveRemain.value = 0;
+    restDayTotalOld.value = 0;
+    birthDate.value = undefined;
+    dateAppoint.value = undefined;
+    salary.value = 0;
+    salaryText.value = "";
+    leaveLast.value = undefined;
+    restDayCurrentTotal.value = "";
+  }
+
   return {
     tabValue,
     typeOptions,
@@ -340,5 +381,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     leaveLast,
     restDayCurrentTotal,
     convertStatud,
+    resetForm2,
+    fetchProfileOld,
   };
 });
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index a106e1e..be16b5a 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -1,56 +1,53 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue"
-import { useQuasar } from "quasar"
-import { useRouter, useRoute } from "vue-router"
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
 
-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"
-import type { QForm } from "quasar"
-import { useCounterMixin } from "@/stores/mixin"
+import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue";
+import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue";
+import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue";
+import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue";
+import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue";
+import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue";
+import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue";
+import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue";
+import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue";
+import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue";
+import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue";
+import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue";
+import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue";
 
-const dataStore = useLeaveStore()
-const { fetchLeaveType } = dataStore
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, success, messageError } = mixin
-const router = useRouter()
-const route = useRoute()
-const myform = ref<QForm | null>(null)
-const $q = useQuasar()
+const dataStore = useLeaveStore();
+const { fetchLeaveType } = dataStore;
+const mixin = useCounterMixin();
+const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
 
-const model = ref<string>("")
-const modelSpecific = ref<string>("")
+const router = useRouter();
+const route = useRoute();
+const myform = ref<QForm | null>(null);
+const $q = useQuasar();
 
-onMounted(async () => {
-	await fectOptionType()
-})
+const model = ref<string>("");
+const modelSpecific = ref<string>("");
 
 /**
  * ดึงค่าประเภทการลาจาก Api
  */
 async function fectOptionType() {
-	await http
-		.get(config.API.leaveType())
-		.then(async res => {
-			const data = res.data.result
-			await fetchLeaveType(data)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
+  await http
+    .get(config.API.leaveType())
+    .then(async (res) => {
+      const data = res.data.result;
+      await fetchLeaveType(data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }
 
 function inputEdit(val: boolean) {
@@ -60,85 +57,177 @@ function inputEdit(val: boolean) {
   };
 }
 
+function onSubmit(postData: FormData) {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .put(config.API.leaveUser(), postData)
+      .then(() => {
+        success($q, "บันทึกสำเร็จ");
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+onMounted(async () => {
+  if (dataStore.options.length == 0) {
+    await fectOptionType();
+  }
+});
 </script>
 
 <template>
-	<div class="col-12 row justify-center">
-		<div class="col-xs-12 col-sm-12 col-md-11">
-			<div class="toptitle text-white col-12 row items-center">
-				<q-btn to="/leave" icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
-				<div>ยื่นใบลา</div>
-			</div>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          to="/leave"
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+        />
+        <div>สร้างใบลา</div>
+      </div>
 
-			<q-form ref="myform" class="col-12">
-				<q-card bordered>
-					<div class="col-12 row q-col-gutter-md q-pa-md">
-						<div class="col-xs-12 col-sm-12">
-							<div style="display: flex; align-items: center">
-								<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
-								<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div>
-							</div>
-							<div class="q-py-sm q-px-lg">
-								<div class="row">
-									<q-select
-										dense
-										class="col-12 col-sm-6 col-md-4 inputgreen"
-										outlined
-										v-model="model"
-										:options="dataStore.options"
-										option-value="code"
-										option-label="name"
-										emit-value
-										map-options
-										prefix="ประเภทใบลา :"
-										@update:model-value="dataStore.typeConvert(model, null), (modelSpecific = ''), dataStore.fetchProfile()"
-									/>
-								</div>
-								<div class="row q-mt-sm">
-									<div class="col-12 col-sm-6 col-md-3" v-if="model === 'LV-006' || model === 'LV-008'">
-										<q-select
-											dense
-											outlined
-											v-model="modelSpecific"
-											:options="model === 'LV-006' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
-											option-value="code"
-											option-label="name"
-											emit-value
-											map-options
-											prefix="ประเภทการลา :"
-											@update:model-value="dataStore.typeConvert(model, modelSpecific)"
-										/>
-									</div>
-								</div>
+      <q-form ref="myform" class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-md q-pa-md">
+            <div class="col-xs-12 col-sm-12">
+              <div style="display: flex; align-items: center">
+                <q-icon
+                  name="mdi-numeric-1-circle"
+                  size="20px"
+                  color="primary"
+                />
+                <div class="q-pl-sm text-weight-bold text-dark">
+                  เลือกประเภทการลา
+                </div>
+              </div>
+              <div class="q-py-sm q-px-lg">
+                <div class="row">
+                  <q-select
+                    dense
+                    class="col-12 col-sm-6 col-md-4 inputgreen"
+                    outlined
+                    v-model="model"
+                    :options="dataStore.options"
+                    option-value="code"
+                    option-label="name"
+                    emit-value
+                    map-options
+                    prefix="ประเภทใบลา :"
+                    @update:model-value="
+                      dataStore.typeConvert(model, null),
+                        (modelSpecific = ''),
+                        dataStore.fetchProfile()
+                    "
+                  />
+                </div>
 
-								<!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจญ์||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
-							</div>
+                <div class="row q-mt-sm">
+                  <div
+                    class="col-12 col-sm-6 col-md-3"
+                    v-if="model === 'LV-006' || model === 'LV-008'"
+                  >
+                    <q-select
+                      dense
+                      outlined
+                      v-model="modelSpecific"
+                      :options="
+                        model === 'LV-006'
+                          ? dataStore.optionsOrdination
+                          : dataStore.optionsSpecific
+                      "
+                      option-value="code"
+                      option-label="name"
+                      emit-value
+                      map-options
+                      prefix="ประเภทการลา :"
+                      @update:model-value="
+                        dataStore.typeConvert(model, modelSpecific)
+                      "
+                    />
+                  </div>
+                </div>
+              </div>
 
-							<div>
-								<div style="display: flex; align-items: center">
-									<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
-									<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลา</div>
-								</div>
-								<FormPart2 :model="model" />
-							</div>
-						</div>
-						<div v-if="model" class="col-12">
-							<SickForm v-if="model === 'LV-001' || model === 'LV-002'" />
-							<FormBirth v-if="model === 'LV-003'" />
-							<HelpWifeBirthForm v-if="model === 'LV-004'" />
-							<VacationForm v-if="model === 'LV-005'" />
-							<OrdinationForm v-if="model === 'LV-006' && modelSpecific === '0'" />
-							<HajjForm v-if="model === 'LV-006' && modelSpecific === '1'" />
-							<MilitaryForm v-if="model === 'LV-007'" style="width: 100%" />
-							<StudyForm v-if="model === 'LV-008' && modelSpecific === 's0'" style="width: 100%" />
-							<TrainForm v-if="model === 'LV-008' && modelSpecific != 's0' && modelSpecific != ''" />
-							<WorkInternationalForm v-if="model === 'LV-009'" />
-							<FollowSpouseForm v-if="model === 'LV-010'" />
-							<RehabilitationForm v-if="model === 'LV-011'" />
-						</div>
-					</div>
-				</q-card>
-			</q-form>
-		</div>
-	</div>
+              <div>
+                <div style="display: flex; align-items: center">
+                  <q-icon
+                    name="mdi-numeric-2-circle"
+                    size="20px"
+                    color="primary"
+                  />
+                  <div class="q-pl-sm text-weight-bold text-dark">
+                    ข้อมูลการลา
+                  </div>
+                </div>
+                <FormPart2 :model="model" />
+              </div>
+            </div>
+
+            <div class="col-12">
+              <SickForm
+                v-if="model === 'LV-001' || model === 'LV-002'"
+                :on-submit="onSubmit"
+              />
+              <FormBirth v-if="model === 'LV-003'" :on-submit="onSubmit" />
+              <HelpWifeBirthForm
+                v-if="model === 'LV-004'"
+                :on-submit="onSubmit"
+              />
+              <VacationForm v-if="model === 'LV-005'" :on-submit="onSubmit" />
+              <OrdinationForm
+                v-if="model === 'LV-006' && modelSpecific == 'b1'"
+                :on-submit="onSubmit"
+              />
+              <HajjForm
+                v-if="model === 'LV-006' && modelSpecific == 'b2'"
+                :on-submit="onSubmit"
+              />
+              <MilitaryForm
+                v-if="model === 'LV-007'"
+                style="width: 100%"
+                :on-submit="onSubmit"
+              />
+              <StudyForm
+                v-if="model === 'LV-008' && modelSpecific === 's0'"
+                style="width: 100%"
+                :on-submit="onSubmit"
+              />
+              <TrainForm
+                v-if="
+                  model === 'LV-008' &&
+                  modelSpecific != 's0' &&
+                  modelSpecific != ''
+                "
+                :on-submit="onSubmit"
+              />
+              <WorkInternationalForm
+                v-if="model === 'LV-009'"
+                :on-submit="onSubmit"
+              />
+              <FollowSpouseForm
+                v-if="model === 'LV-010'"
+                :on-submit="onSubmit"
+              />
+              <RehabilitationForm
+                v-if="model === 'LV-011'"
+                :on-submit="onSubmit"
+              />
+            </div>
+          </div>
+        </q-card>
+      </q-form>
+    </div>
+  </div>
 </template>
diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index c566f07..152e147 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -1,430 +1,423 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue"
+import { ref, onMounted, reactive, computed } from "vue";
 
 //import form
-import FormPart2 from "@/modules/05_leave/components/formEdit/Form.vue"
-import WorkInternational from "../components/formEdit/formEdit_WorkInternational.vue"
-import Rehabilitation from "../components/formEdit/formEdit_Rehabilitation.vue"
-import Sick from "../components/formEdit/formEdit_Sick.vue"
-import FollowSpouse from "../components/formEdit/formEdit_FollowSpouse.vue"
-import Birth from "../components/formEdit/formEdit_Birth.vue"
-import Vacation from "../components/formEdit/formEdit_Vacation.vue"
-import HelpWifeBirth from "../components/formEdit/formEdit_HelpWifeBirth.vue"
-import Ordination from "../components/formEdit/formEdit_Ordinationvue.vue"
-import Haji from "../components/formEdit/formEdit_Hajj.vue"
-import Millitary from "../components/formEdit/formEdit_Military.vue"
-import Study from "../components/formEdit/formEdit_Study.vue"
+import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue";
+import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue";
+import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue";
+import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue";
+import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue";
+import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue";
+import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue";
+import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue";
+import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue";
+import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue";
+import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue";
+import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue";
+import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue";
 
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import { useRoute } from "vue-router"
-import router from "@/router"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useLeaveStore } from "@/modules/05_leave/store"
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import router from "@/router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useLeaveStore } from "@/modules/05_leave/store";
 
-const route = useRoute()
-const personalId = ref<string>(route.params.id as string)
-console.log(personalId.value)
-const leaveId = ref<string>("")
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { messageError, showLoader, hideLoader, dialogConfirm, success, date2Thai, dateToISO } = mixin
+const route = useRoute();
+const personalId = ref<string>(route.params.id as string);
+const leaveId = ref<string>("");
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  success,
+  date2Thai,
+  dateToISO,
+} = mixin;
 
-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 titleName = ref<string>("")
-const model = ref<string>("")
-const modelSpecific = ref<string>("")
+const titleName = ref<string>("");
 /** Form รายละเอียดข้อมูล*/
 const formData = reactive<any>({
-	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: "",
-})
+  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: "",
+  leaveLast: "",
+});
 
-/**เมื่อเริ่มโหลดหน้า
- * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
- */
-onMounted(() => {
-	fetchDataDetail(personalId.value)
-	dataStore.fetchProfile()
-})
-
-/**
- * get ข้อมูลเก่ากรณีแก้ไขข้อมูล
- */
-const data = reactive<any>({
-	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: "",
-})
 /**
  * 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)
-			console.log(formData.leaveDateStart)
-			formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate)
-			console.log(formData.leaveDateEnd)
-			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()
-		})
-}
-console.log(formData)
+  showLoader();
+  await http
+    .get(config.API.leaveUserId(id), {})
+    .then(async (res) => {
+      const data = await res.data.result;
 
-/**
- * function check ประเภทการลา
- * @param leaveTypeId  ประเภทการลา
- * @param leaveTypeName  ประเภทการลา
+      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.leaveStartDate = data.leaveStartDate;
+      // console.log(formData.leaveDateStart)
+      formData.leaveEndDate = data.leaveEndDate;
+      // console.log(formData.leaveDateEnd)
+      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 ?? "-";
+      formData.leaveLast = data.leaveLast ?? "-";
+      // checkLeaveType(formData.leaveTypeId, formData.leaveTypeName)
+
+      dataStore.fetchProfileOld(data);
+      dataStore.typeId = formData.leaveTypeId;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+const model = computed(() => {
+  return (
+    dataStore.options.find((x) => x.id == formData.leaveTypeId)?.code ?? ""
+  );
+});
+
+const modelSpecific = computed(() => {
+  const code = dataStore.options.find(
+    (x) => x.id == formData.leaveTypeId
+  )?.code;
+
+  if (code == "LV-006" && formData.leaveTypeName == 'ลาอุปสมบท') {
+    return "b0";
+  } else if (code == "LV-006" && formData.leaveTypeName == 'ลาประกอบพิธีฮัจญ์') {
+    return "b1";
+  } else if (code == "LV-008" && formData.leaveTypeName == 'ลาไปศึกษาต่อ') {
+    return "s0";
+  } else if (code == "LV-008" && formData.leaveTypeName == 'ลาฝึกอบรม') {
+    return "s1";
+  } else if (code == "LV-008" && formData.leaveTypeName == 'ลาปฎิบัติการวิจัย') {
+    return "s2";
+  } else if (code == "LV-008" && formData.leaveTypeName == 'ลาดูงาน') {
+    return "s3";
+  } else {
+    return "";
+  }
+});
+
+function onSubmit(postData: FormData) {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .put(config.API.leaveUser() + "/" + formData.id, postData)
+      .then(() => {
+        success($q, "บันทึกสำเร็จ");
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**เมื่อเริ่มโหลดหน้า
+ * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
  */
-/**checkForm Form การลา*/
-const checkForm = ref<string>("")
-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"
-		}
-	}
-}
-
-/**
- * บันทึกข้อมูลที่เเก้ไข
- * @param id ระบุ บุคคล
- */
-function onSubmit(formData: FormData) {
-	// dialogConfirm($q, () => putData(formData));
-	console.log(personalId.value)
-}
-
-// function putData(formData: any) {
-//   showLoader();
-//   http
-//     .put(config.API.meetingById(personalId.value), {
-//       round: formData.rounded ?? "",
-//       tittle: formData.title,
-//       dateStart: dateToISO(formData.dateMeetingStart),
-//       dateEnd: dateToISO(formData.dateMeetingEnd),
-//       result: formData.consider,
-//       duration: formData.period,
-//     })
-//     .then((res) => {
-//       success($q, "บันทึกข้อมูลสำเร็จ");
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(async () => {
-//       hideLoader();
-//       router.push(`/evaluate/meeting`);
-//     });
-// }
+onMounted(() => {
+  fetchDataDetail(personalId.value);
+});
 </script>
+
 <template>
-	<div class="col-12 row justify-center">
-		<div class="col-xs-12 col-sm-12 col-md-11">
-			<div class="toptitle text-white col-12 row items-center">
-				<q-btn to="/leave" icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
-				<div>แก้ไขยื่นใบลา {{ formData.leaveTypeName }} {{ leaveId }}</div>
-			</div>
-			<q-form ref="myform" class="col-12">
-				<q-card bordered>
-					<div class="col-12 row q-col-gutter-md q-pa-md">
-						<div class="col-xs-12 col-sm-12">
-							<div style="display: flex; align-items: center">
-								<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
-								<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div>
-							</div>
-							<div class="q-py-sm q-px-lg">
-								<div class="row">
-									<q-select
-										dense
-										class="col-12 col-sm-6 col-md-4 inputgreen"
-										outlined
-										v-model="formData.leaveTypeName"
-										option-value="code"
-										option-label="name"
-										emit-value
-										map-options
-										prefix="ประเภทใบลา :"
-									/>
-								</div>
-								<div class="row q-mt-sm">
-									<div class="col-12 col-sm-6 col-md-3" v-if="model === 'LV-006' || model === 'LV-008'">
-										<q-select
-											dense
-											outlined
-											v-model="modelSpecific"
-											:options="model === 'LV-006' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
-											option-value="code"
-											option-label="name"
-											emit-value
-											map-options
-											prefix="ประเภทการลา :"
-											@update:model-value="dataStore.typeConvert(model, modelSpecific)"
-										/>
-									</div>
-								</div>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          to="/leave"
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+        />
+        <div>แก้ไขข้อมูลการ{{ formData.leaveTypeName }} {{ leaveId }}</div>
+      </div>
+      <q-form ref="myform" class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-md q-pa-md">
+            <div class="col-xs-12 col-sm-12">
+              <div style="display: flex; align-items: center">
+                <q-icon
+                  name="mdi-numeric-1-circle"
+                  size="20px"
+                  color="primary"
+                />
+                <div class="q-pl-sm text-weight-bold text-dark">
+                  เลือกประเภทการลา
+                </div>
+              </div>
+              <div class="q-py-sm q-px-lg">
+                <div class="row">
+                  <q-select
+                    dense
+                    class="col-12 col-sm-6 col-md-4 inputgreen"
+                    outlined
+                    v-model="formData.leaveTypeName"
+                    option-value="code"
+                    option-label="name"
+                    emit-value
+                    map-options
+                    prefix="ประเภทใบลา :"
+                  />
+                </div>
+                <div class="row q-mt-sm">
+                  <div
+                    class="col-12 col-sm-6 col-md-3"
+                    v-if="model === 'LV-006' || model === 'LV-008'"
+                  >
+                    <q-select
+                      dense
+                      outlined
+                      v-model="modelSpecific"
+                      :options="
+                        model === 'LV-006'
+                          ? dataStore.optionsOrdination
+                          : dataStore.optionsSpecific
+                      "
+                      option-value="code"
+                      option-label="name"
+                      emit-value
+                      map-options
+                      prefix="ประเภทการลา :"
+                      @update:model-value="
+                        dataStore.typeConvert(model, modelSpecific)
+                      "
+                    />
+                  </div>
+                </div>
+              </div>
 
-								<!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจญ์||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
-							</div>
-							<div>
-								<div style="display: flex; align-items: center">
-									<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
-									<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลา</div>
-								</div>
-								<FormPart2 :model="model" :data="formData" :leaveTypeId="formData.leaveTypeId" />
-							</div>
-						</div>
-						<div class="col-12">
-							<Sick :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาป่วย' || formData.leaveTypeName === 'ลากิจส่วนตัว'" :data="formData" :leaveId="leaveId" />
-							<Birth :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาคลอดบุตร'" :data="formData" :leaveId="leaveId" />
-							<HelpWifeBirth :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาไปช่วยเหลือภริยาที่คลอดบุตร'" :data="formData" :leaveId="leaveId" />
-							<Vacation :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาพักผ่อน'" :data="formData" :leaveId="leaveId" />
-							<Ordination :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาอุปสมบทหรือการลาประกอบพิธีฮัจญ์ฯ'" :data="formData" :leaveId="leaveId" />
-							<Haji :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาอุปสมบทหรือการลาประกอบพิธีฮัจญ์ฯ'" :data="formData" :leaveId="leaveId" />
-							<Millitary :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล'" :data="formData" :leaveId="leaveId" />
-							<WorkInternational ::on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาไปปฏิบัติงานในองค์การระหว่างประเทศ'" :data="formData" :leaveId="leaveId" />
-							<Study :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน'" :data="formData" :leaveId="leaveId" />
-							<FollowSpouse :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาติดตามคู่สมรส'" :data="formData" :leaveId="leaveId" />
-							<Rehabilitation :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ'" :data="formData" :leaveId="leaveId" />
-						</div>
-						<!-- <div class="toptitle col-12 row items-center">
-			<q-btn icon="mdi-arrow-left" unelevated round dense flat color="" class="q-mr-sm" @click="router.push(`/evaluate/meeting`)" />
-			<div class="text-white q-pl-sm">ยื่นขอลา {{ formData.leaveTypeName }} {{ leaveId }}</div>
-		</div>
-
-		<WorkInternational v-if="checkForm === 'FormLeaveToWorkInternational'" :on-submit="onSubmit" :data="formData" />
-		v-if="checkForm === 'FormVocationalRehabilitation'" -->
-					</div>
-				</q-card>
-			</q-form>
-		</div>
-	</div>
+              <div>
+                <div style="display: flex; align-items: center">
+                  <q-icon
+                    name="mdi-numeric-2-circle"
+                    size="20px"
+                    color="primary"
+                  />
+                  <div class="q-pl-sm text-weight-bold text-dark">
+                    ข้อมูลการลา
+                  </div>
+                </div>
+                <FormPart2
+                  :model="model"
+                  :data="formData"
+                  :leaveTypeId="formData.leaveTypeId"
+                />
+              </div>
+            </div>
+            <div class="col-12">
+              <SickForm
+                v-if="model === 'LV-001' || model === 'LV-002'"
+                :data="formData"
+                :on-submit="onSubmit"
+              />
+              <FormBirth
+                v-if="model === 'LV-003'"
+                :data="formData"
+                :on-submit="onSubmit"
+              />
+              <HelpWifeBirthForm
+                v-if="model === 'LV-004'"
+                :data="formData"
+                :on-submit="onSubmit"
+              />
+              <VacationForm
+                v-if="model === 'LV-005'"
+                :data="formData"
+                :on-submit="onSubmit"
+              />
+              <OrdinationForm
+                v-if="model === 'LV-006' && modelSpecific === 'b0'"
+                :data="formData"
+                :on-submit="onSubmit"
+              />
+              <HajjForm
+                v-if="model === 'LV-006' && modelSpecific === 'b1'"
+                :data="formData"
+                :on-submit="onSubmit"
+              />
+              <MilitaryForm
+                v-if="model === 'LV-007'"
+                style="width: 100%"
+                :data="formData"
+                :on-submit="onSubmit"
+              />
+              <StudyForm
+                v-if="model === 'LV-008' && modelSpecific === 's0'"
+                style="width: 100%"
+                :data="formData"
+                :on-submit="onSubmit"
+              />
+              <TrainForm
+                v-if="
+                  model === 'LV-008' &&
+                  modelSpecific != 's0' &&
+                  modelSpecific != ''
+                "
+                :data="formData"
+                :on-submit="onSubmit"
+              />
+              <WorkInternationalForm
+                v-if="model === 'LV-009'"
+                :data="formData"
+                :on-submit="onSubmit"
+              />
+              <FollowSpouseForm
+                v-if="model === 'LV-010'"
+                :data="formData"
+                :on-submit="onSubmit"
+              />
+              <RehabilitationForm
+                v-if="model === 'LV-011'"
+                :data="formData"
+                :on-submit="onSubmit"
+              />
+            </div>
+          </div>
+        </q-card>
+      </q-form>
+    </div>
+  </div>
 </template>
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 714be82..53fce09 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -1,395 +1,503 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import type { LeaveItem } from "@/modules/05_leave/interface/index/main"
-import type { QTableProps } from "quasar"
+import { ref, onMounted, computed } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { LeaveItem } from "@/modules/05_leave/interface/index/main";
+import type { QTableProps } from "quasar";
 
-import CalendarView from "@/modules/05_leave/components/Calendar.vue"
-import ListView from "@/modules/05_leave/components/ListView.vue"
+import CalendarView from "@/modules/05_leave/components/Calendar.vue";
+import ListView from "@/modules/05_leave/components/ListView.vue";
 
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
 
-const mixin = useCounterMixin()
-const leaveStore = useLeaveStore()
-const { showLoader, hideLoader, messageError } = mixin
+const mixin = useCounterMixin();
+const leaveStore = useLeaveStore();
+const { showLoader, hideLoader, messageError } = mixin;
 
-const router = useRouter()
-const $q = useQuasar()
+const router = useRouter();
+const $q = useQuasar();
 
-const filterLeaveType = ref(["ลาป่วย", "ลากิจส่วนตัว", "ลาพักผ่อน"])
+const filterLeaveType = ref(["ลาป่วย", "ลากิจส่วนตัว", "ลาพักผ่อน"]);
 
-const itemPie = ref<LeaveItem[]>([])
-const knob = ref(80)
+const itemPie = ref<LeaveItem[]>([]);
+const knob = ref(80);
 const columns = ref<QTableProps["columns"]>([
-	{
-		name: "no",
-		align: "left",
-		label: "ลำดับ",
-		sortable: true,
-		field: "no",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:5%;",
-	},
-	{
-		name: "leaveTypeName",
-		align: "left",
-		label: "ประเภทการลา",
-		sortable: true,
-		field: "leaveTypeName",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:15%;",
-	},
-	{
-		name: "leaveLimit",
-		align: "left",
-		label: "โควตาวันลา",
-		sortable: true,
-		field: "leaveLimit",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:15%;",
-	},
-	{
-		name: "leaveExtend",
-		align: "left",
-		label: "วันลาสะสม",
-		sortable: true,
-		field: "leaveExtend",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:15%;",
-	},
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:5%;",
+  },
+  {
+    name: "leaveTypeName",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "leaveTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "leaveLimit",
+    align: "left",
+    label: "โควตาวันลา",
+    sortable: true,
+    field: "leaveLimit",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "leaveExtend",
+    align: "left",
+    label: "วันลาสะสม",
+    sortable: true,
+    field: "leaveExtend",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
 
-	{
-		name: "leaveCountSend",
-		align: "left",
-		label: "จำนวนยื่นขอลา (วัน)",
-		sortable: true,
-		field: "leaveCountSend",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:15%;",
-	},
-	{
-		name: "leaveCountApprove",
-		align: "left",
-		label: "จำนวนที่อนุมัติ (วัน)",
-		sortable: true,
-		field: "leaveCountApprove",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:15%;",
-	},
-	{
-		name: "leaveCountReject",
-		align: "left",
-		label: "จำนวนที่ไม่อนุมัติ (วัน)",
-		sortable: true,
-		field: "leaveCountReject",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:15%;",
-	},
-	{
-		name: "leaveCountDelete",
-		align: "left",
-		label: "จำนวนที่ยกเลิก (วัน)",
-		sortable: true,
-		field: "leaveCountDelete",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:15%;",
-	},
-])
-const row = ref<any>([])
-const pagination = ref({ rowsPerPage: 15 })
+  {
+    name: "leaveCountSend",
+    align: "left",
+    label: "จำนวนยื่นขอลา (วัน)",
+    sortable: true,
+    field: "leaveCountSend",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "leaveCountApprove",
+    align: "left",
+    label: "จำนวนที่อนุมัติ (วัน)",
+    sortable: true,
+    field: "leaveCountApprove",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "leaveCountReject",
+    align: "left",
+    label: "จำนวนที่ไม่อนุมัติ (วัน)",
+    sortable: true,
+    field: "leaveCountReject",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "leaveCountDelete",
+    align: "left",
+    label: "จำนวนที่ยกเลิก (วัน)",
+    sortable: true,
+    field: "leaveCountDelete",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+]);
+const row = ref<any>([]);
+const pagination = ref({ rowsPerPage: 15 });
 
 /** function เรียกข้อมูลตารางสถิติการลา*/
 async function fetchStatsTable() {
-	// modalStatsTable.value = true;
-	showLoader()
-	await http
-		.get(config.API.leaveStats())
-		.then(res => {
-			const data = res.data.result
-			console.log(data)
-			const stat = filterLeaveType.value.map(e => {
-				return data
-					.filter((el: any) => el.leaveTypeName === e)
-					.map((el: any) => ({
-						text: el.leaveTypeName,
-						color: el.leaveTypeName === "ลาพักผ่อน" ? "text-pink-5" : el.leaveTypeName === "ลากิจส่วนตัว" ? "text-deep-purple" : "text-indigo",
-						value: el.leavePercent,
-						all: el.leaveLimit,
-						use: el.leaveCountApprove,
-						remain: Number(el.leaveLimit) - Number(el.leaveCountApprove),
-					}))
-			})
-			stat.forEach(item => itemPie.value.push(...item))
+  // modalStatsTable.value = true;
+  showLoader();
+  await http
+    .get(config.API.leaveStats())
+    .then((res) => {
+      const data = res.data.result;
+      const stat = filterLeaveType.value.map((e) => {
+        return data
+          .filter((el: any) => el.leaveTypeName === e)
+          .map((el: any) => ({
+            text: el.leaveTypeName,
+            color:
+              el.leaveTypeName === "ลาพักผ่อน"
+                ? "text-pink-5"
+                : el.leaveTypeName === "ลากิจส่วนตัว"
+                ? "text-deep-purple"
+                : "text-indigo",
+            value: el.leavePercent,
+            all: el.leaveLimit,
+            use: el.leaveCountApprove,
+            remain: Number(el.leaveLimit) - Number(el.leaveCountApprove),
+          }));
+      });
+      stat.forEach((item) => itemPie.value.push(...item));
 
-			row.value = data.map((e: any) => ({
-				leaveTypeName: e.leaveTypeName,
-				leaveLimit: e.leaveTypeName === "ลาพักผ่อน" ? e.leaveLimit : e.leaveTypeName === "ลากิจส่วนตัว" ? "-" : "-",
-				leaveExtend: e.leaveTypeName === "ลาพักผ่อน" ? e.leaveExtend : e.leaveTypeName === "ลากิจส่วนตัว" ? "-" : "-",
-				leavePercent: e.leavePercent,
-				leaveCountSend: e.leaveCountSend,
-				leaveCountApprove: e.leaveCountApprove,
-				leaveCountReject: e.leaveCountReject,
-				leaveCountDelete: e.leaveCountDelete,
-			}))
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			hideLoader()
-		})
+      row.value = data.map((e: any) => ({
+        leaveTypeName: e.leaveTypeName,
+        leaveLimit:
+          e.leaveTypeName === "ลาพักผ่อน"
+            ? e.leaveLimit
+            : e.leaveTypeName === "ลากิจส่วนตัว"
+            ? "-"
+            : "-",
+        leaveExtend:
+          e.leaveTypeName === "ลาพักผ่อน"
+            ? e.leaveExtend
+            : e.leaveTypeName === "ลากิจส่วนตัว"
+            ? "-"
+            : "-",
+        leavePercent: e.leavePercent,
+        leaveCountSend: e.leaveCountSend,
+        leaveCountApprove: e.leaveCountApprove,
+        leaveCountReject: e.leaveCountReject,
+        leaveCountDelete: e.leaveCountDelete,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
-const modalStatsTable = ref<boolean>(false)
+const modalStatsTable = ref<boolean>(false);
 function onClickOpenStat() {
-	modalStatsTable.value = true
+  modalStatsTable.value = true;
 }
 
 /** function redirectTo  ยื่นใบลา*/
 async function addAbsence() {
-	router.push(`/leave/add`)
+  await leaveStore.resetForm2();
+  router.push(`/leave/add`);
 }
 
 /**
  * find ข้อมูลจาก api
  */
 const filteredItems = computed(() => {
-	return itemPie.value.filter(item => item.text === "ลาพักผ่อน")
-})
+  return itemPie.value.filter((item) => item.text === "ลาพักผ่อน");
+});
 const filteredSick = computed(() => {
-	return itemPie.value.filter(item => item.text === "ลาป่วย")
-})
+  return itemPie.value.filter((item) => item.text === "ลาป่วย");
+});
 const filteredBusi = computed(() => {
-	return itemPie.value.filter(item => item.text === "ลากิจส่วนตัว")
-})
+  return itemPie.value.filter((item) => item.text === "ลากิจส่วนตัว");
+});
+
 onMounted(async () => {
-	await fetchStatsTable()
-})
+  await fetchStatsTable();
+});
 </script>
 
 <template>
-	<div class="col-12 row justify-center">
-		<div class="col-xs-12 col-sm-12 col-md-11">
-			<div class="toptitle text-white col-12 row items-center">
-				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
-				<div>รายการลา</div>
-			</div>
-		</div>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.go(-1)"
+        />
+        <div>รายการลา</div>
+      </div>
+    </div>
 
-		<div class="col-xs-12 col-sm-12 col-md-11 row">
-			<!-- สถิติการลา -->
-			<div class="col-12 row q-pb-sm">
-				<q-card bordered class="col-12 row">
-					<div class="row col-12 items-center q-px-md q-py-sm">
-						<div class="text-weight-bold">สถิติการลา</div>
-						<q-space />
-						<q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" @click="onClickOpenStat" label="ตารางสถิติการลา" />
-					</div>
-					<div bordered class="col-6 row justify-center q-px-md q-pb-md q-col-gutter-sm" v-for="item in filteredItems" :key="item.text">
-						<div class="col-xs-12 col-sm-12">
-							<q-card bordered flat class="col-12 row shadow-0 no-wrap" v-if="item.text === 'ลาพักผ่อน'">
-								<div class="col-xs-12 col-sm-8 row justify-center q-py-md">
-									<div class="col-12 row items-center justify-center q-pb-sm">
-										<q-knob readonly v-model="item.value" show-value size="60px" :thickness="0.15" track-color="grey-3" class="text-indigo">
-											<span class="text-subtitle2 text-weight-bold">{{ item.value }}</span>
-										</q-knob>
-									</div>
-									<div class="col-12 text-center text-weight-medium">ลาพักผ่อน</div>
-								</div>
-								<div class="row gt-xs"><q-separator vertical /></div>
-								<div class="col-xs-12 col-sm-4 gt-xs row">
-									<div class="col-12 row text-dark text-body2 items-center">
-										<div class="col-12 row q-pa-xs q-px-md row">
-											<span class="text-grey-7 col-6">ได้รับ</span>
-											<span class="text-weight-bold">{{ item.all }}</span>
-										</div>
-										<div class="col-12"><q-separator /></div>
-										<div class="col-12 row q-pa-xs q-px-md">
-											<span class="text-grey-7 col-6">ใช้ไป</span>
-											<span class="text-weight-bold">{{ item.use }}</span>
-										</div>
-										<div class="col-12"><q-separator /></div>
-										<div class="col-12 row q-pa-xs q-px-md">
-											<span class="text-grey-7 col-6">คงเหลือ</span>
-											<span class="text-weight-bold">{{ item.remain }}</span>
-										</div>
-									</div>
-								</div>
-							</q-card>
-						</div>
-					</div>
-					<div class="col-6 row">
-						<div bordered class="col-12 row justify-center q-px-md q-pb-md q-col-gutter-sm" v-for="item in filteredSick" :key="item.text">
-							<div class="col-xs-12 col-sm-12 row q-col-gutter-sm">
-								<div class="col-12 row" v-if="item.text === 'ลาป่วย'">
-									<q-card bordered flat class="shadow-0 col-12 fit row items-center q-px-lg">
-										<div class="text-subtitle2 col-4">ลาป่วย</div>
-										<div class="text-subtitle2 col-8">
-											<span class="text-grey-7 q-pr-md">ใช้ไป</span>
-											<span class="text-weight-bold">{{ item.use }}</span>
-											<!-- <span class="text-grey-7 q-pl-md">ลา</span> -->
-										</div>
-									</q-card>
-								</div>
-							</div>
-						</div>
-						<div bordered class="col-12 row justify-center q-px-md q-pb-md q-col-gutter-sm" v-for="item in filteredBusi" :key="item.text">
-							<div class="col-xs-12 col-sm-12 row q-col-gutter-sm">
-								<div class="col-12 row" v-if="item.text === 'ลากิจส่วนตัว'">
-									<q-card bordered flat class="shadow-0 col-12 fit row items-center q-px-lg">
-										<div class="text-subtitle2 col-4">ลากิจส่วนตัว</div>
-										<div class="text-subtitle2 col-8">
-											<span class="text-grey-7 q-pr-md">ใช้ไป</span>
-											<span class="text-weight-bold">{{ item.use }}</span>
-											<!-- <span class="text-grey-7 q-pl-md">ลา</span> -->
-										</div>
-									</q-card>
-								</div>
-							</div>
-						</div>
-					</div>
-				</q-card>
-			</div>
+    <div class="col-xs-12 col-sm-12 col-md-11 row">
+      <!-- สถิติการลา -->
+      <div class="col-12 row q-pb-sm">
+        <q-card bordered class="col-12 row">
+          <div class="row col-12 items-center q-px-md q-py-sm">
+            <div class="text-weight-bold">สถิติการลา</div>
+            <q-space />
+            <q-btn
+              dense
+              flat
+              class="text-blue"
+              icon="mdi-chart-line-variant"
+              @click="onClickOpenStat"
+              label="ตารางสถิติการลา"
+            />
+          </div>
+          <div
+            bordered
+            class="col-6 row justify-center q-px-md q-pb-md q-col-gutter-sm"
+            v-for="item in filteredItems"
+            :key="item.text"
+          >
+            <div class="col-xs-12 col-sm-12">
+              <q-card
+                bordered
+                flat
+                class="col-12 row shadow-0 no-wrap"
+                v-if="item.text === 'ลาพักผ่อน'"
+              >
+                <div class="col-xs-12 col-sm-8 row justify-center q-py-md">
+                  <div class="col-12 row items-center justify-center q-pb-sm">
+                    <q-knob
+                      readonly
+                      v-model="item.value"
+                      show-value
+                      size="60px"
+                      :thickness="0.15"
+                      track-color="grey-3"
+                      class="text-indigo"
+                    >
+                      <span class="text-subtitle2 text-weight-bold">{{
+                        item.value
+                      }}</span>
+                    </q-knob>
+                  </div>
+                  <div class="col-12 text-center text-weight-medium">
+                    ลาพักผ่อน
+                  </div>
+                </div>
+                <div class="row gt-xs"><q-separator vertical /></div>
+                <div class="col-xs-12 col-sm-4 gt-xs row">
+                  <div class="col-12 row text-dark text-body2 items-center">
+                    <div class="col-12 row q-pa-xs q-px-md row">
+                      <span class="text-grey-7 col-6">ได้รับ</span>
+                      <span class="text-weight-bold">{{ item.all }}</span>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-12 row q-pa-xs q-px-md">
+                      <span class="text-grey-7 col-6">ใช้ไป</span>
+                      <span class="text-weight-bold">{{ item.use }}</span>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-12 row q-pa-xs q-px-md">
+                      <span class="text-grey-7 col-6">คงเหลือ</span>
+                      <span class="text-weight-bold">{{ item.remain }}</span>
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+          <div class="col-6 row">
+            <div
+              bordered
+              class="col-12 row justify-center q-px-md q-pb-md q-col-gutter-sm"
+              v-for="item in filteredSick"
+              :key="item.text"
+            >
+              <div class="col-xs-12 col-sm-12 row q-col-gutter-sm">
+                <div class="col-12 row" v-if="item.text === 'ลาป่วย'">
+                  <q-card
+                    bordered
+                    flat
+                    class="shadow-0 col-12 fit row items-center q-px-lg"
+                  >
+                    <div class="text-subtitle2 col-4">ลาป่วย</div>
+                    <div class="text-subtitle2 col-8">
+                      <span class="text-grey-7 q-pr-md">ใช้ไป</span>
+                      <span class="text-weight-bold">{{ item.use }}</span>
+                      <!-- <span class="text-grey-7 q-pl-md">ลา</span> -->
+                    </div>
+                  </q-card>
+                </div>
+              </div>
+            </div>
+            <div
+              bordered
+              class="col-12 row justify-center q-px-md q-pb-md q-col-gutter-sm"
+              v-for="item in filteredBusi"
+              :key="item.text"
+            >
+              <div class="col-xs-12 col-sm-12 row q-col-gutter-sm">
+                <div class="col-12 row" v-if="item.text === 'ลากิจส่วนตัว'">
+                  <q-card
+                    bordered
+                    flat
+                    class="shadow-0 col-12 fit row items-center q-px-lg"
+                  >
+                    <div class="text-subtitle2 col-4">ลากิจส่วนตัว</div>
+                    <div class="text-subtitle2 col-8">
+                      <span class="text-grey-7 q-pr-md">ใช้ไป</span>
+                      <span class="text-weight-bold">{{ item.use }}</span>
+                      <!-- <span class="text-grey-7 q-pl-md">ลา</span> -->
+                    </div>
+                  </q-card>
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card>
+      </div>
 
-			<div class="row col-12">
-				<!-- แสดงปฏิทิน -->
-				<div class="col-12 row">
-					<q-card bordered class="q-pa-md col-12">
-						<div class="row col-12">
-							<div class="row items-center">
-								<div class="q-ml-sm">
-									<q-btn round dense flat size="13px" class="q-px-sm" @click="addAbsence">
-										<q-icon name="mdi-plus" size="22px" color="blue" />
-										<q-tooltip>ยื่นใบลา</q-tooltip>
-									</q-btn>
-								</div>
-							</div>
-							<q-space />
-							<div class="justify-center row items-center">
-								<!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
-								<q-tabs v-model="leaveStore.tabValue" indicator-color="transparent" align="left" active-color="activetab" class="text-nativetab" inline-label dense>
-									<q-btn
-										name="calendar"
-										round
-										size="12px"
-										flat
-										icon="mdi-calendar-month"
-										@click="leaveStore.tabValue = 'calendar'"
-										:color="leaveStore.tabValue == 'calendar' ? 'primary' : 'grey-6'"
-										class="q-mr-sm"
-									>
-										<q-tooltip>ปฏิทิน</q-tooltip>
-									</q-btn>
-									<q-separator vertical inset />
-									<q-btn
-										name="list"
-										round
-										size="12px"
-										flat
-										icon="mdi-format-list-bulleted"
-										@click="leaveStore.tabValue = 'list'"
-										:color="leaveStore.tabValue == 'list' ? 'primary' : 'grey-6'"
-										class="q-ml-sm"
-									>
-										<q-tooltip>รายการ</q-tooltip>
-									</q-btn>
-								</q-tabs>
-							</div>
-						</div>
-						<div class="col-12">
-							<CalendarView v-if="leaveStore.tabValue === 'calendar'" />
-						</div>
+      <div class="row col-12">
+        <!-- แสดงปฏิทิน -->
+        <div class="col-12 row">
+          <q-card bordered class="q-pa-md col-12">
+            <div class="row col-12">
+              <div class="row items-center">
+                <div class="q-ml-sm">
+                  <q-btn
+                    round
+                    dense
+                    flat
+                    size="13px"
+                    class="q-px-sm"
+                    @click="addAbsence"
+                  >
+                    <q-icon name="mdi-plus" size="22px" color="blue" />
+                    <q-tooltip>สร้างใบลา</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
+              <q-space />
+              <div class="justify-center row items-center">
+                <!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
+                <q-tabs
+                  v-model="leaveStore.tabValue"
+                  indicator-color="transparent"
+                  align="left"
+                  active-color="activetab"
+                  class="text-nativetab"
+                  inline-label
+                  dense
+                >
+                  <q-btn
+                    name="calendar"
+                    round
+                    size="12px"
+                    flat
+                    icon="mdi-calendar-month"
+                    @click="leaveStore.tabValue = 'calendar'"
+                    :color="
+                      leaveStore.tabValue == 'calendar' ? 'primary' : 'grey-6'
+                    "
+                    class="q-mr-sm"
+                  >
+                    <q-tooltip>ปฏิทิน</q-tooltip>
+                  </q-btn>
+                  <q-separator vertical inset />
+                  <q-btn
+                    name="list"
+                    round
+                    size="12px"
+                    flat
+                    icon="mdi-format-list-bulleted"
+                    @click="leaveStore.tabValue = 'list'"
+                    :color="
+                      leaveStore.tabValue == 'list' ? 'primary' : 'grey-6'
+                    "
+                    class="q-ml-sm"
+                  >
+                    <q-tooltip>รายการ</q-tooltip>
+                  </q-btn>
+                </q-tabs>
+              </div>
+            </div>
+            <div class="col-12">
+              <CalendarView v-if="leaveStore.tabValue === 'calendar'" />
+            </div>
 
-						<div class="col-12">
-							<ListView v-if="leaveStore.tabValue === 'list'" />
-						</div>
-					</q-card>
-				</div>
-			</div>
-		</div>
-	</div>
+            <div class="col-12">
+              <ListView v-if="leaveStore.tabValue === 'list'" />
+            </div>
+          </q-card>
+        </div>
+      </div>
+    </div>
+  </div>
 
-	<!-- modal ตารางสถิติการลา -->
-	<q-dialog v-model="modalStatsTable" persistent>
-		<q-card style="min-width: 85%">
-			<q-card-section class="row items-center q-pa-sm">
-				<div class="text-bold q-pl-sm">ตารางสถิติการลา</div>
-				<q-space />
-				<q-btn icon="close" unelevated round dense v-close-popup style="color: #ff8080; background-color: #ffdede" />
-			</q-card-section>
-			<q-separator />
-			<q-card-section class="q-p-md row">
-				<q-table flat bordered dense :rows="row" :columns="columns" row-key="leaveTypeName" class="custom-table2 col-12" hide-bottom v-model:pagination="pagination">
-					<template v-slot:header="props">
-						<q-tr :props="props">
-							<q-th v-for="col in props.cols" :key="col.name" :props="props">
-								<span class="text-weight-medium">{{ col.label }}</span>
-							</q-th>
-						</q-tr>
-					</template>
-					<template v-slot:body="props">
-						<q-tr :props="props" class="cursor-pointer">
-							<q-td v-for="col in props.cols" :key="col.name" :props="props">
-								<div v-if="col.name == 'no'">
-									{{ props.rowIndex + 1 }}
-								</div>
-								<div v-else>
-									{{ col.value }}
-								</div>
-							</q-td>
-						</q-tr></template
-					></q-table
-				>
-			</q-card-section>
-		</q-card>
-	</q-dialog>
+  <!-- modal ตารางสถิติการลา -->
+  <q-dialog v-model="modalStatsTable" persistent>
+    <q-card style="min-width: 85%">
+      <q-card-section class="row items-center q-pa-sm">
+        <div class="text-bold q-pl-sm">ตารางสถิติการลา</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          v-close-popup
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="q-p-md row">
+        <q-table
+          flat
+          bordered
+          dense
+          :rows="row"
+          :columns="columns"
+          row-key="leaveTypeName"
+          class="custom-table2 col-12"
+          hide-bottom
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </q-tr></template
+          ></q-table
+        >
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style lang="scss" scoped>
 .borderTop {
-	border-top: 1px solid #ededed;
-	border-bottom: 1px solid #ededed;
+  border-top: 1px solid #ededed;
+  border-bottom: 1px solid #ededed;
 }
 .custom-table2 {
-	.q-table tr:nth-child(odd) td {
-		background: white;
-	}
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
 
-	.q-table tr:nth-child(even) td {
-		background: #f8f8f8;
-	}
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
 
-	.q-table thead tr {
-		background: #ecebeb;
-	}
+  .q-table thead tr {
+    background: #ecebeb;
+  }
 
-	.q-table thead tr th {
-		position: sticky;
-	}
+  .q-table thead tr th {
+    position: sticky;
+  }
 
-	.q-table td:nth-of-type(2) {
-		z-index: 3 !important;
-	}
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
 
-	.q-table th:nth-of-type(2),
-	.q-table td:nth-of-type(2) {
-		position: sticky;
-		left: 0;
-		z-index: 1;
-	}
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
 
-	/* this will be the loading indicator */
-	.q-table thead tr:last-child th {
-		/* height of all previous header rows */
-		top: 48px;
-	}
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
 
-	.q-table thead tr:first-child th {
-		top: 0;
-	}
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
 }
 </style>
diff --git a/src/modules/06_evaluate/components/DialogMain.vue b/src/modules/06_evaluate/components/DialogMain.vue
index 2d7c8ba..0e300cd 100644
--- a/src/modules/06_evaluate/components/DialogMain.vue
+++ b/src/modules/06_evaluate/components/DialogMain.vue
@@ -12,6 +12,7 @@ const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useEvaluateStore();
+const slide = ref<string>('1');
 
 const { dialogConfirm } = mixin;
 
@@ -38,6 +39,7 @@ function prevStep() {
 }
 
 function onCklicNext() {
+<<<<<<< HEAD
   dialogConfirm(
     $q,
     () => {
@@ -50,6 +52,10 @@ function onCklicNext() {
     "ยืนยันการดำเนินการ",
     "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
   );
+=======
+  const type = props.menu ? props.menu.val?.toLowerCase() : "";
+  router.push(`/evaluate/add/${type}`);
+>>>>>>> develop
 }
 
 const thumbStyle = ref<any>({
@@ -75,180 +81,244 @@ watch(props, () => {
 
 <template>
   <q-dialog v-model="props.modal">
-    <q-card style="width: 800px; max-width: 90vw">
+    <q-card style="width: 800px; max-width: 90vw; border-radius: 20px">
       <DialogHeader
+        class="text-center text-edit"
         :tittle="`ขั้นตอนการ${props.menu ? props.menu.label : ''}`"
         :close="props.close"
         elevated
       />
       <q-separator />
+        <q-carousel
+          v-model="slide"
+          transition-prev="scale"
+          transition-next="scale"
+          swipeable
+          animated
+          control-type="regular"
+          control-color="grey-5"
+          navigation
+          padding
+          arrows
+          
+          height="auto"
+          class="text-dark rounded-borders"
+        >
+        <template v-slot:navigation-icon="{ active, btnProps, onClick }">
+        <q-btn v-if="active" size="xs" :icon="btnProps.icon" color="edit" flat round dense @click="onClick" />
+        <q-btn v-else size="xs" :icon="btnProps.icon" color="grey" flat round dense @click="onClick" />
+      </template>
+          <q-carousel-slide name="1" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page1.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">ตรวจสอบคุณสมบัติ</div>
+								</div>
+                ตรวจสอบคุณสมบัติของตนเอง เพื่อทำการยื่นขอประเมิน
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-      <q-scroll-area
-        :thumb-style="thumbStyle"
-        :bar-style="barStyle"
-        style="height: 500px"
-      >
-        <q-card-section class="q-pt-none">
-          <p class="q-mt-md">
-            การ{{ props.menu ? props.menu.label : "" }}มีทั้งหมด 9 ขั้นตอน
-          </p>
+          
+          <q-carousel-slide name="2" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page2.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">จัดเตรียมเอกสารเล่ม 1</div>
+								</div>
+                ดาวน์โหลดเอกสารต้นแบบ ทำการกรอกข้อมูลในฟอร์มให้ครบ และอัปโหลดเข้าสู่ระบบ
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-          <q-stepper
-            v-model="step"
-            class="q-pt-none"
-            vertical
-            animated
-            flat
-            ref="stepper"
-            :bordered="false"
-            header-nav
-          >
-            <q-step
-              keep-alive
-              :name="1"
-              prefix="1"
-              title="ตรวจสอบคุณสมบัติ"
-              icon="settings"
-              :done="step > 1"
-            >
-              ตรวจสอบคุณสมบัติของตนเอง เพื่อทำการยื่นขอประเมิน
-              โดยมีหัวข้อตรวจสอบดังนี้
-              <ol>
-                <li>คุณวุฒิการศึกษา</li>
-                <li>ประวัติการรับราชการ</li>
-                <li>ประสบการณ์ในการปฏิบัติงาน</li>
-                <li>
-                  ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
-                </li>
-                <li>
-                  มีคุณสมบัติตรงตามคุณสมบัติเฉพาะ สำหรับตำแหน่งที่กำหนด
-                  ในมาตรฐานกำหนดตำแหน่ง
-                </li>
-                <li>
-                  มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ และ/หรือ
-                  คุณวุฒิเพิ่มเติมครบถ้วนตามที่ ก.ก. กำหนด (แพทย์พยาบาล
-                  วิศวกรโยธา สถาปนิก ฯลฯ)
-                </li>
-                <li>
-                  มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคย
-                  ดำรงตำแหน่งในสายงานที่จะคัดเลือก
-                  ตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก
-                </li>
-              </ol>
-            </q-step>
+          <q-carousel-slide name="3" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page3.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">ตรวจสอบเอกสารเล่ม 1</div>
+								</div>
+                ทำการตรวจสอบความถูกต้องของเอกสารเล่ม 1 และยืนยันการยื่นเอกสาร
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-            <q-step
-              :name="2"
-              prefix="2"
-              title="จัดเตรียมเอกสารเล่ม 1"
-              :done="step >= 2"
-            >
-              ดาวน์โหลดเอกสารต้นแบบ ทำการกรอกข้อมูลในฟอร์มให้ครบ
-              และอัปโหลดเข้าสู่ระบบ โดยมีรายการเอกสารดังนี้
-              <ol>
-                <li>แบบพิจารณาคุณสมบัติบุคคล</li>
-                <li>แบบแสดงรายละเอียดการเสนอผลงาน</li>
-                <li>
-                  แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
-                  (เอกสารแบบ ก.)
-                </li>
-                <li>แบบประเมินคุณลักษณะบุคคล</li>
-                <li>แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)</li>
-                <li>ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)</li>
-              </ol>
-            </q-step>
+          <q-carousel-slide name="4" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page4.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">รอตรวจสอบคุณสมบัติ</div>
+								</div>
+                ขั้นตอนนี้คำขอของคุณจะถูกส่งไปยังเจ้าหน้าที่ที่รับผิดชอบ และทางเจ้าหน้าที่จะทำการตรวจสอบคุณสมบัติ
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-            <q-step
-              :name="3"
-              prefix="3"
-              title="ตรวจสอบเอกสารเล่ม 1"
-              :done="step >= 3"
-            >
-              ทำการตรวจสอบความถูกต้องของเอกสารเล่ม 1 และยืนยันการยื่นเอกสาร
-            </q-step>
+          <q-carousel-slide name="5" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page5.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-5-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">ประกาศบนเว็บไซต์</div>
+								</div>
+                เอกสารที่เกี่ยวข้องจะถูกประกาศขึ้นบนเว็บไซต์เป็นเวลา 30 วัน
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-            <q-step
-              :name="4"
-              prefix="4"
-              title="รอตรวจสอบคุณสมบัติ"
-              :done="step >= 4"
-            >
-              ขั้นตอนนี้คำขอของคุณจะถูกส่งไปยังเจ้าหน้าที่ที่รับผิดชอบ
-              และทางเจ้าหน้าที่จะทำการตรวจสอบคุณสมบัติ
-            </q-step>
+          <q-carousel-slide name="6" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page6.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-6-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">จัดเตรียมเอกสารเล่ม 2</div>
+								</div>
+                ผู้ประเมินทำการอัปโหลดเอกสารเล่ม 2 โดยมีระยะเวลาการส่งผลงานหลังจากประกาศบนเว็บไซต์แล้ว 6 เดือน
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-            <q-step
-              :name="5"
-              prefix="5"
-              title="ประกาศบนเว็บไซต์"
-              :done="step >= 5"
-            >
-              เอกสารที่เกี่ยวข้องจะถูกประกาศขึ้นบนเว็บไซต์เป็นเวลา 30 วัน
-            </q-step>
+          <q-carousel-slide name="7" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page7.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-7-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">ตรวจสอบเอกสารเล่ม 2</div>
+								</div>
+                ทำการตรวจสอบความถูกต้องของเอกสารเล่ม 2 และยืนยันการยื่นเอกสาร
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-            <q-step
-              :name="6"
-              prefix="6"
-              title="จัดเตรียมเอกสารเล่ม 2"
-              :done="step >= 6"
-            >
-              ผู้ประเมินทำการอัปโหลดเอกสารเล่ม 2
-              โดยมีระยะเวลาการส่งผลงานหลังจากประกาศบนเว็บไซต์แล้ว 6 เดือน
-            </q-step>
+          <q-carousel-slide name="8" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page8.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-8-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">รอพิจารณาผล</div>
+								</div>
+                เจ้าหน้าที่ทำการพิจารณาผลการประเมิน และดำเนินการดาวน์โหลดเอกสารต้นแบบ กรอกข้อมูลในฟอร์มให้ครบ และอัปโหลดเข้าสู่ระบบ
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-            <q-step
-              :name="7"
-              prefix="7"
-              title="ตรวจสอบเอกสารเล่ม 2"
-              :done="step >= 7"
-            >
-              ผู้ประเมินทำการตรวจสอบเอกสารเล่ม 2 และยืนยันการยื่นเอกสาร
-            </q-step>
+          <q-carousel-slide name="9" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page9.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-9-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">เสร็จสิ้น</div>
+								</div>
+                เสร็จสิ้นการประเมิน
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-            <q-step :name="8" prefix="8" title="รอพิจารณาผล" :done="step >= 8">
-              เจ้าหน้าที่ทำการพิจารณาผลการประเมิน
-              และดำเนินการดาวน์โหลดเอกสารต้นแบบ กรอกข้อมูลในฟอร์มให้ครบ
-              และอัปโหลดเข้าสู่ระบบ
-              โดยมีรายการเอกสารที่เกี่ยวข้องกับการประเมินดังนี้
-              <ol>
-                <li>
-                  แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน
-                  (เอกสารแบบ ค)
-                </li>
-                <li>บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)</li>
-                <li>แบบประเมินผลงาน (เอกสารหมายเลข 16)</li>
-                <li>แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)</li>
-                <li>แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)</li>
-                <li>แบบสรุปผลการประเมิน (เอกสารแบบ ง)</li>
-              </ol>
-
-              ผู้ประเมินสามารถแก้ไขเอกสารเล่ม 2 โดยการอัปโหลดเอกสารเล่ม 2
-              (ฉบับแก้ไข) ได้
-            </q-step>
-
-            <q-step :name="9" prefix="9" title="เสร็จสิ้น" :done="step >= 9">
-              เสร็จสิ้นการประเมิน
-            </q-step>
-          </q-stepper>
-        </q-card-section>
-      </q-scroll-area>
 
+        </q-carousel>
       <q-separator />
-      <q-card-actions align="right">
+      <q-card-actions align="right" class="bg-edit q-px-md">
         <q-btn
-          v-if="step > 1"
+          style="border-radius: 10px; padding: 5px 20px"
           unelevated
+          icon-right="mdi-arrow-right"
           outline
-          color="public"
-          label="ก่อนหน้า"
-          @click="prevStep()"
-        />
-        <q-btn
-          unelevated
-          :outline="!(step == 9)"
-          color="public"
-          :label="step == 9 ? 'ดำเนินการต่อ' : 'ถัดไป'"
-          @click="step == 9 ? onCklicNext() : nextStep()"
+          color="white"
+          label="ข้าม"
+          @click="onCklicNext()"
         />
       </q-card-actions>
     </q-card>
diff --git a/src/modules/06_evaluate/components/img/page1.png b/src/modules/06_evaluate/components/img/page1.png
new file mode 100644
index 0000000..d2ab191
Binary files /dev/null and b/src/modules/06_evaluate/components/img/page1.png differ
diff --git a/src/modules/06_evaluate/components/img/page2.png b/src/modules/06_evaluate/components/img/page2.png
new file mode 100644
index 0000000..b7cf99c
Binary files /dev/null and b/src/modules/06_evaluate/components/img/page2.png differ
diff --git a/src/modules/06_evaluate/components/img/page3.png b/src/modules/06_evaluate/components/img/page3.png
new file mode 100644
index 0000000..1ce33d6
Binary files /dev/null and b/src/modules/06_evaluate/components/img/page3.png differ
diff --git a/src/modules/06_evaluate/components/img/page4.png b/src/modules/06_evaluate/components/img/page4.png
new file mode 100644
index 0000000..30f6451
Binary files /dev/null and b/src/modules/06_evaluate/components/img/page4.png differ
diff --git a/src/modules/06_evaluate/components/img/page5.png b/src/modules/06_evaluate/components/img/page5.png
new file mode 100644
index 0000000..a456250
Binary files /dev/null and b/src/modules/06_evaluate/components/img/page5.png differ
diff --git a/src/modules/06_evaluate/components/img/page6.png b/src/modules/06_evaluate/components/img/page6.png
new file mode 100644
index 0000000..90f9c16
Binary files /dev/null and b/src/modules/06_evaluate/components/img/page6.png differ
diff --git a/src/modules/06_evaluate/components/img/page7.png b/src/modules/06_evaluate/components/img/page7.png
new file mode 100644
index 0000000..0f066fb
Binary files /dev/null and b/src/modules/06_evaluate/components/img/page7.png differ
diff --git a/src/modules/06_evaluate/components/img/page8.png b/src/modules/06_evaluate/components/img/page8.png
new file mode 100644
index 0000000..f8c4b4f
Binary files /dev/null and b/src/modules/06_evaluate/components/img/page8.png differ
diff --git a/src/modules/06_evaluate/components/img/page9.png b/src/modules/06_evaluate/components/img/page9.png
new file mode 100644
index 0000000..28fc7c9
Binary files /dev/null and b/src/modules/06_evaluate/components/img/page9.png differ