diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
index f936dab..eade6b9 100644
--- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
@@ -1,20 +1,99 @@
 <script setup lang="ts">
-import { ref } from "vue";
-
-const edit = ref<boolean>(true);
-const halfDay = ref<string>("day");
+import { ref, reactive, watch } from "vue"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
+import { useCounterMixin } from "@/stores/mixin"
 
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+const edit = ref<boolean>(true)
+const halfDay = ref<string>("day")
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+})
+// ข้อมูลทั้งก้อน form
+const formData = reactive<FormData>({
+	leaveNo: "",
+	startLeaveDate: null,
+	endLeaveDate: null,
+	contractTel: "",
+	leaveTotal: "",
+	leaveContactTel: "",
+	leaveContactLocation: "",
+	leaveDetail: "",
+	file: [],
+})
+
+const leaveNoRef = ref<object | null>(null)
+const startLeaveDateRef = ref<object | null>(null)
+const endLeaveDateRef = ref<object | null>(null)
+const contractTelRef = ref<object | null>(null)
+const leaveTotalRef = ref<object | null>(null)
+const leaveContactTelRef = ref<object | null>(null)
+const leaveContactLocationRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
+const fileRef = ref<object | null>(null)
+
+const FormRef: FormRef = {
+	leaveNo: leaveNoRef,
+	startLeaveDate: startLeaveDateRef,
+	endLeaveDate: endLeaveDateRef,
+	contractTel: contractTelRef,
+	leaveTotal: leaveTotalRef,
+	leaveContactTel: leaveContactTelRef,
+	leaveContactLocation: leaveContactLocationRef,
+	leaveDetail: leaveDetailRef,
+	file: fileRef,
+}
+
+watch(props.data, async () => {
+	// console.log("data==>", props.data)
+	formData.leaveNo = props.data.leaveNo
+	formData.startLeaveDate = props.data.startLeaveDate
+	formData.endLeaveDate = props.data.endLeaveDate
+	formData.contractTel = props.data.contractTel
+	formData.leaveTotal = props.data.leaveTotal
+	formData.leaveContactTel = props.data.leaveContactTel
+	formData.leaveDetail = props.data.leaveDetail
+	formData.file = props.data.file
+})
+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)) {
+		props.onSubmit()
+	}
+}
 </script>
 
 <template>
-  <div>
-    <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
+	<form @submit.prevent.stop="onValidate">
+		<div>
+			<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+			<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+			<!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
     <ul>
       <li>เขียนที่</li>
       <li>ลาตั้งแต่วันที่</li>
@@ -32,200 +111,184 @@ const props = defineProps({
       (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
     </p> -->
 
-    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-    <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"
-          dense
-          outlined
-          v-model="Writeat"
-          label="เขียนที่"
-          :readonly="!edit"
-          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-        />
+			<div class="col-12 row q-col-gutter-md q-pa-md">
+				<div class="col-xs-12 col-sm-12">
+					<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"
+								ref="leaveNoRef"
+								for="leaveNoRef"
+								dense
+								outlined
+								v-model="formData.leaveNo"
+								label="เขียนที่"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'เขียนที่'}`]"
+							/>
 
-        <div class="col-md-4 col-sm-12">
-          <q-radio v-model="halfDay" val="day" label="ลาทั้งวัน" />
-          <q-radio
-            v-model="halfDay"
-            val="half_day_morning"
-            label="ลาครึ่งวันเช้า"
-          />
-          <q-radio
-            v-model="halfDay"
-            val="half_day_afternoon"
-            label="ลาครึ่งวันบ่าย"
-          />
-        </div>
+							<div class="col-md-4 col-sm-12">
+								<q-radio v-model="halfDay" val="day" label="ลาทั้งวัน" />
+								<q-radio v-model="halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" />
+								<q-radio v-model="halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" />
+							</div>
 
-        <datepicker
-          class="col-md-3 col-sm-12"
-          menu-class-name="modalfix"
-          v-model="dateLeaveStart"
-          :locale="'th'"
-          autoApply
-          borderless
-          :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
-              hide-bottom-space
-              :readonly="!edit"
-              class="full-width datepicker"
-              :model-value="
-                dateLeaveStart != null ? date2Thai(dateLeaveStart) : 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-md-3 col-sm-12"
+								menu-class-name="modalfix"
+								v-model="formData.startLeaveDate"
+								:locale="'th'"
+								autoApply
+								borderless
+								: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="startLeaveDateRef"
+										for="startLeaveDateRef"
+										hide-bottom-space
+										:readonly="!edit"
+										class="full-width datepicker"
+										:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : 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-md-3 col-sm-12"
-          menu-class-name="modalfix"
-          v-model="dateLeaveEnd"
-          :locale="'th'"
-          autoApply
-          borderless
-          :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
-              hide-bottom-space
-              :readonly="!edit"
-              class="full-width datepicker"
-              :model-value="
-                dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : 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-2 col-sm-12"
-          dense
-          outlined
-          type="number"
-          v-model="dateTotal"
-          label="จำนวนวันที่ลา"
-          readonly
-          :rules="[(val) => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-        />
+							<datepicker
+								class="col-md-3 col-sm-12"
+								menu-class-name="modalfix"
+								v-model="formData.endLeaveDate"
+								:locale="'th'"
+								autoApply
+								borderless
+								: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="endLeaveDateRef"
+										for="endLeaveDateRef"
+										hide-bottom-space
+										:readonly="!edit"
+										class="full-width datepicker"
+										:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : 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-2 col-sm-12"
+								dense
+								outlined
+								ref="leaveTotalRef"
+								for="leaveTotalRef"
+								type="number"
+								v-model="formData.leaveTotal"
+								label="จำนวนวันที่ลา"
+								readonly
+								:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+							/>
 
-        <q-input
-          class="col-3"
-          dense
-          outlined
-          v-model="tel"
-          mask="(###)-###-####"
-          unmasked-value
-          label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-          :readonly="!edit"
-          :rules="[
-            (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-          ]"
-        />
+							<q-input
+								class="col-3"
+								dense
+								outlined
+								ref="leaveContactTelRef"
+								for="leaveContactTelRef"
+								v-model="formData.leaveContactTel"
+								mask="(###)-###-####"
+								unmasked-value
+								label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+							/>
 
-        <q-input
-          class="col-md-9 col-sm-12"
-          dense
-          outlined
-          v-model="locationAbsence"
-          label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-          :readonly="!edit"
-          :rules="[
-            (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-          ]"
-        />
+							<q-input
+								class="col-md-9 col-sm-12"
+								dense
+								outlined
+								ref="leaveContactLocationRef"
+								for="leaveContactLocationRef"
+								v-model="formData.leaveContactLocation"
+								label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+							/>
 
-        <q-input
-          type="textarea"
-          class="col-md-12 col-sm-12"
-          dense
-          outlined
-          v-model="detail"
-          label="รายละเอียด"
-          :readonly="!edit"
-          :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-        />
+							<q-input
+								type="textarea"
+								class="col-md-12 col-sm-12"
+								dense
+								outlined
+								ref="leaveDetailRef"
+								for="leaveDetailRef"
+								v-model="formData.leaveDetail"
+								label="รายละเอียด"
+								:readonly="!edit"
+							/>
 
-        <q-file
-          v-model="files"
-          dense
-          label="เอกสารประกอบ"
-          outlined
-          use-chips
-          multiple
-          class="q-pl-sm col-6"
-        >
-          <template v-slot:prepend>
-            <q-icon name="attach_file" color="primary" />
-          </template>
-        </q-file>
+							<q-file v-model="formData.file" @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 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>
+							<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 formData.file" :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>
+			</div>
+		</div>
+		<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="บันทึก" />
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
index 9032f3d..6f1bf8b 100644
--- a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
@@ -1,20 +1,106 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive, watch } from "vue"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
+import { useCounterMixin } from "@/stores/mixin"
 
-const edit = ref<boolean>(false);
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+const edit = ref<boolean>(true)
+const halfDay = ref<string>("day")
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+})
+// ข้อมูลทั้งก้อน form
+const formData = reactive<FormData>({
+	leaveNo: "",
+	wifeName: "",
+	brithDate: null,
+	startLeaveDate: null,
+	endLeaveDate: null,
+	contractTel: "",
+	leaveTotal: "",
+	leaveContactTel: "",
+	leaveContactLocation: "",
+	leaveDetail: "",
+	file: [],
+})
+
+const leaveNoRef = ref<object | null>(null)
+const wifeNameRef = ref<object | null>(null)
+const brithDateRef = ref<object | null>(null)
+const startLeaveDateRef = ref<object | null>(null)
+const endLeaveDateRef = ref<object | null>(null)
+const contractTelRef = ref<object | null>(null)
+const leaveTotalRef = ref<object | null>(null)
+const leaveContactTelRef = ref<object | null>(null)
+const leaveContactLocationRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
+const fileRef = ref<object | null>(null)
+
+const FormRef: FormRef = {
+	leaveNo: leaveNoRef,
+	wifeName: wifeNameRef,
+	brithDate: brithDateRef,
+	startLeaveDate: startLeaveDateRef,
+	endLeaveDate: endLeaveDateRef,
+	contractTel: contractTelRef,
+	leaveTotal: leaveTotalRef,
+	leaveContactTel: leaveContactTelRef,
+	leaveContactLocation: leaveContactLocationRef,
+	leaveDetail: leaveDetailRef,
+	file: fileRef,
+}
+
+watch(props.data, async () => {
+	// console.log("data==>", props.data)
+	formData.leaveNo = props.data.leaveNo
+	formData.wifeName = props.data.wifeName
+	formData.brithDate = props.data.brithDate
+	formData.startLeaveDate = props.data.startLeaveDate
+	formData.endLeaveDate = props.data.endLeaveDate
+	formData.contractTel = props.data.contractTel
+	formData.leaveTotal = props.data.leaveTotal
+	formData.leaveContactTel = props.data.leaveContactTel
+	formData.leaveDetail = props.data.leaveDetail
+	formData.file = props.data.file
+})
+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)) {
+		props.onSubmit()
+	}
+}
 </script>
 
 <template>
-  <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-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+		<!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร
     <ul>
       <li>เขียนที่</li>
       <li>ชื่อภรรยา</li>
@@ -28,8 +114,230 @@ const props = defineProps({
       <li>เอกสารประกอบ</li>
     </ul>
     <p>
-      *หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา
-      (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
-    </p>
-  </div>
+      *หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
+    </p> -->
+		<div class="col-12 row q-col-gutter-md q-pa-md">
+			<div class="col-xs-12 col-sm-12">
+				<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"
+							ref="leaveNoRef"
+							for="leaveNoRef"
+							dense
+							outlined
+							v-model="formData.leaveNo"
+							label="เขียนที่"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'เขียนที่'}`]"
+						/>
+
+						<div class="col-md-3 col-sm-12">
+							<q-input
+								class="col-12 col-sm-12"
+								ref="leaveNoRef"
+								for="leaveNoRef"
+								dense
+								outlined
+								v-model="formData.wifeName"
+								label="ชื่อภรรยา"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
+							/>
+						</div>
+
+						<datepicker
+							class="col-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.brithDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							: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="startLeaveDateNoRef"
+									for="startLeaveDateNoRef"
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.brithDate != null ? date2Thai(formData.brithDate) : 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-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.startLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							: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="startLeaveDateNoRef"
+									for="startLeaveDateNoRef"
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : 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-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.endLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							: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="endLeaveDateRef"
+									for="endLeaveDateRef"
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : 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="formData.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+						/>
+
+						<q-input
+							class="col-9"
+							dense
+							outlined
+							ref="leaveContactTelRef"
+							for="leaveContactTelRef"
+							v-model="formData.leaveContactTel"
+							mask="(###)-###-####"
+							unmasked-value
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
+
+						<q-input
+							class="col-md-12 col-sm-12"
+							dense
+							outlined
+							ref="leaveContactLocationRef"
+							for="leaveContactLocationRef"
+							v-model="formData.leaveContactLocation"
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+						/>
+
+						<q-input
+							type="textarea"
+							class="col-md-12 col-sm-12"
+							dense
+							outlined
+							ref="leaveDetailRef"
+							for="leaveDetailRef"
+							v-model="formData.leaveDetail"
+							label="รายละเอียด"
+							:readonly="!edit"
+						/>
+
+						<q-file v-model="formData.file" @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 formData.file" :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>
+		</div>
+	</form>
+	<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="บันทึก" />
+	</div>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
index b5a776e..5cd5f2c 100644
--- a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
@@ -1,31 +1,317 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive, watch } from "vue"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
+import { useCounterMixin } from "@/stores/mixin"
 
-const edit = ref<boolean>(false);
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+const edit = ref<boolean>(true)
+const halfDay = ref<string>("day")
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+})
+// ข้อมูลทั้งก้อน form
+const formData = reactive<FormData>({
+	leaveNo: "",
+	lastYearVacation: "",
+	currentVacation: "",
+	startLeaveDate: null,
+	endLeaveDate: null,
+	contractTel: "",
+	leaveTotal: "",
+	leaveContactTel: "",
+	leaveContactLocation: "",
+	leaveDetail: "",
+	file: [],
+})
+
+const leaveNoRef = ref<object | null>(null)
+const lastYearVacationRef = ref<object | null>(null)
+const currentVacationRef = ref<object | null>(null)
+const startLeaveDateRef = ref<object | null>(null)
+const endLeaveDateRef = ref<object | null>(null)
+const contractTelRef = ref<object | null>(null)
+const leaveTotalRef = ref<object | null>(null)
+const leaveContactTelRef = ref<object | null>(null)
+const leaveContactLocationRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
+const fileRef = ref<object | null>(null)
+
+const FormRef: FormRef = {
+	leaveNo: leaveNoRef,
+	lastYearVacation: lastYearVacationRef,
+	currentVacation: currentVacationRef,
+	startLeaveDate: startLeaveDateRef,
+	endLeaveDate: endLeaveDateRef,
+	contractTel: contractTelRef,
+	leaveTotal: leaveTotalRef,
+	leaveContactTel: leaveContactTelRef,
+	leaveContactLocation: leaveContactLocationRef,
+	leaveDetail: leaveDetailRef,
+	file: fileRef,
+}
+
+watch(props.data, async () => {
+	// console.log("data==>", props.data)
+	formData.leaveNo = props.data.leaveNo
+	formData.lastYearVacation = props.data.lastYearVacation
+	formData.currentVacation = props.data.currentVacation
+	formData.startLeaveDate = props.data.startLeaveDate
+	formData.endLeaveDate = props.data.endLeaveDate
+	formData.contractTel = props.data.contractTel
+	formData.leaveTotal = props.data.leaveTotal
+	formData.leaveContactTel = props.data.leaveContactTel
+	formData.leaveDetail = props.data.leaveDetail
+	formData.file = props.data.file
+})
+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)) {
+		props.onSubmit()
+	}
+}
 </script>
 
 <template>
-  <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-  <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  <div>
-    ลาพักผ่อน
-    <ul>
-      <li>จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา (Auto)</li>
-      <li>จำนวนวันลาพักผ่อนประจำปีปัจจุบัน (Auto)</li>
-      <li>ลาตั้งแต่วันที่</li>
-      <li>ลาถึงวันที่</li>
-      <li>จำนวนวันที่ลา (frontend คำนวนให้ Auto)</li>
-      <li>ตัวเลือกให้ลาครึ่งวันเช้า หรือครึ่งวันบ่ายได้</li>
-      <li>ที่อยู่ที่ติดต่อได้ระหว่างลา (textarea)</li>
-      <li>หมายเลขโทรศัพท์</li>
-      <li>รายละเอียด (ไม่บังคับกรอก)</li>
-      <li>เอกสารประกอบ</li>
-    </ul>
-  </div>
+	<!-- <div>
+		ลาพักผ่อน
+		<ul>
+			<li>เขียนที่</li>
+			<li>จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา (Auto)</li>
+			<li>จำนวนวันลาพักผ่อนประจำปีปัจจุบัน (Auto)</li>
+			<li>ลาตั้งแต่วันที่</li>
+			<li>ลาถึงวันที่</li>
+			<li>จำนวนวันที่ลา (frontend คำนวนให้ Auto)</li>
+			<li>ตัวเลือกให้ลาครึ่งวันเช้า หรือครึ่งวันบ่ายได้</li>
+			<li>ที่อยู่ที่ติดต่อได้ระหว่างลา (textarea)</li>
+			<li>หมายเลขโทรศัพท์</li>
+			<li>รายละเอียด (ไม่บังคับกรอก)</li>
+			<li>เอกสารประกอบ</li>
+		</ul>
+	</div> -->
+	<form @submit.prevent.stop="onValidate">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+		<div class="col-12 row q-col-gutter-md q-pa-md">
+			<div class="col-xs-12 col-sm-12">
+				<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"
+							ref="leaveNoRef"
+							for="leaveNoRef"
+							dense
+							outlined
+							v-model="formData.leaveNo"
+							label="เขียนที่"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'เขียนที่'}`]"
+						/>
+
+						<div class="col-md-6 col-sm-12">
+							<q-input
+								class="col-12 col-sm-12"
+								ref="lastYearVacationRef"
+								for="lastYearVacationRef"
+								dense
+								readonly
+								outlined
+								v-model="formData.lastYearVacation"
+								label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
+							/>
+						</div>
+						<div class="col-md-6 col-sm-12">
+							<q-input
+								class="col-12 col-sm-12"
+								ref="currentVacationRef"
+								for="currentVacationRef"
+								dense
+								readonly
+								outlined
+								v-model="formData.currentVacation"
+								label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
+							/>
+						</div>
+
+						<datepicker
+							class="col-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.startLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							: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="startLeaveDateRef"
+									for="startLeaveDateRef"
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : 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-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.endLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							: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="endLeaveDateRef"
+									for="endLeaveDateRef"
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : 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="formData.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+						/>
+
+						<q-input
+							class="col-3"
+							dense
+							outlined
+							ref="leaveContactTelRef"
+							for="leaveContactTelRef"
+							v-model="formData.leaveContactTel"
+							mask="(###)-###-####"
+							unmasked-value
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
+
+						<q-input
+							class="col-md-12 col-sm-12"
+							dense
+							outlined
+							ref="leaveContactLocationRef"
+							for="leaveContactLocationRef"
+							v-model="formData.leaveContactLocation"
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+						/>
+
+						<q-input
+							type="textarea"
+							class="col-md-12 col-sm-12"
+							dense
+							outlined
+							ref="leaveDetailRef"
+							for="leaveDetailRef"
+							v-model="formData.leaveDetail"
+							label="รายละเอียด"
+							:readonly="!edit"
+						/>
+
+						<q-file v-model="formData.file" @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 formData.file" :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>
+		</div>
+		<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="บันทึก" />
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
index 5f21384..d7ebd63 100644
--- a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
@@ -1,19 +1,80 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive, watch } from "vue"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
+import { useCounterMixin } from "@/stores/mixin"
 
-const edit = ref<boolean>(false);
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+const edit = ref<boolean>(true)
+const halfDay = ref<string>("day")
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+})
+// ข้อมูลทั้งก้อน form
+const formData = reactive<FormData>({
+	leaveNo: "",
+	startLeaveDate: null,
+	endLeaveDate: null,
+	leaveDetail: "",
+	file: [],
+})
+
+const leaveNoRef = ref<object | null>(null)
+const startLeaveDateRef = ref<object | null>(null)
+const endLeaveDateRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
+const fileRef = ref<object | null>(null)
+
+const FormRef: FormRef = {
+	leaveNo: leaveNoRef,
+	startLeaveDate: startLeaveDateRef,
+	endLeaveDate: endLeaveDateRef,
+	leaveDetail: leaveDetailRef,
+	file: fileRef,
+}
+
+watch(props.data, async () => {
+	// console.log("data==>", props.data)
+	formData.leaveNo = props.data.leaveNo
+	formData.startLeaveDate = props.data.startLeaveDate
+	formData.endLeaveDate = props.data.endLeaveDate
+	formData.leaveDetail = props.data.leaveDetail
+	formData.file = props.data.file
+})
+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)) {
+		props.onSubmit()
+	}
+}
 </script>
 
 <template>
-  <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-  <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  <div>
+	<!-- <div>
     ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
     <ul>
       <li>เขียนที่</li>
@@ -30,5 +91,155 @@ const props = defineProps({
       รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะ หลังจากกดบันทึกแล้วแสดงเอกสาร docx ให้ดาวน์โหลด เพื่อกรอก
       และเพิ่มให้อัพโหหลดเอกสารกลับเข้ามาในระบบ
     </p>
-  </div>
+  </div> -->
+	<form @submit.prevent.stop="onValidate">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+		<div class="col-12 row q-col-gutter-md q-pa-md">
+			<div class="col-xs-12 col-sm-12">
+				<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"
+							ref="leaveNoRef"
+							for="leaveNoRef"
+							dense
+							outlined
+							v-model="formData.leaveNo"
+							label="เขียนที่"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'เขียนที่'}`]"
+						/>
+
+						<datepicker
+							class="col-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.startLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							: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="startLeaveDateRef"
+									for="startLeaveDateRef"
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : 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-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.endLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							: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="endLeaveDateRef"
+									for="endLeaveDateRef"
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : 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="formData.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+						/> -->
+
+						<q-input
+							type="textarea"
+							class="col-md-12 col-sm-12"
+							dense
+							outlined
+							ref="leaveDetailRef"
+							for="leaveDetailRef"
+							v-model="formData.leaveDetail"
+							label="รายละเอียด"
+							:readonly="!edit"
+						/>
+
+						<q-file v-model="formData.file" @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 formData.file" :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>
+		</div>
+		<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="บันทึก" />
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index abb9be8..f242f3f 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@@ -1,41 +1,415 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive, watch } from "vue"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
+import { useCounterMixin } from "@/stores/mixin"
 
-const edit = ref<boolean>(false);
+const mixin = useCounterMixin()
+const { date2Thai, arabicNumberToText } = mixin
+const edit = ref<boolean>(true)
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+})
+// ข้อมูลทั้งก้อน form
+const formData = reactive<FormData>({
+	leaveNo: "",
+	startLeaveDate: null,
+	endLeaveDate: null,
+	leaveTotal: "", //จำนวนวันลา
+	salary: 0, //เงินเดือนปัจจุบัน
+	spouseName: "", //ชื่อคู่สมรส
+	spousePosition: "", //ตำแหน่งคู่สมรส
+	spouseLevel: "", //ระดับคู่สมรส
+	dutyCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
+	followHistoryCountry: "", //ประวัติการลาติดตามคู่สมรส
+	followHistoryTime: "",
+	followHistoryStart: null,
+	followHistoryEnd: null,
+	leaveDetail: "", //รายละเอียดการลา
+	file: [], //เอกสารปะกอบ
+})
+const formattSalary = arabicNumberToText(formData.salary)
+const leaveNoRef = ref<object | null>(null)
+const startLeaveDateRef = ref<object | null>(null)
+const endLeaveDateRef = ref<object | null>(null)
+const salaryRef = ref<object | null>(null)
+const leaveTotalRef = ref<object | null>(null)
+const spouseNameRef = ref<object | null>(null)
+const leaveContactLocationRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
+const spousePositionRef = ref<object | null>(null)
+const spouseLevelRef = ref<object | null>(null)
+const dutyCountryRef = 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 fileRef = ref<object | null>(null)
+
+const FormRef: FormRef = {
+	leaveNo: leaveNoRef, //เขียนที่***
+	startLeaveDate: startLeaveDateRef, //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: endLeaveDateRef, //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: leaveTotalRef, //จำนวนวันลา
+	salary: salaryRef, //เงินเดือนปัจจุบัน
+	spouseName: spouseNameRef, //หมายเลขที่ติดต่อขณะลา
+	spousePosition: spousePositionRef, //ตำแหน่งคู่สมรส
+	spouseLevel: spouseLevelRef, //ระดับคู่สมรส
+	dutyCountry: dutyCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
+	followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
+	followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
+	followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
+	followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
+	leaveDetail: leaveDetailRef, //รายละเอียดการลา
+	leaveContactLocation: leaveContactLocationRef, //สถานที่ติดต่อขณะลา
+	file: fileRef,
+}
+
+watch(props.data, async () => {
+	// console.log("data==>", props.data)
+	formData.leaveNo = props.data.leaveNo
+	formData.startLeaveDate = props.data.startLeaveDate
+	formData.endLeaveDate = props.data.endLeaveDate
+	formData.leaveTotal = props.data.leaveTotal
+	formData.leaveDetail = props.data.leaveDetail
+	formData.file = props.data.file
+})
+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)) {
+		props.onSubmit()
+	}
+}
 </script>
 
 <template>
-  <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-  <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  <div>
-    ลาติดตามคู่สมรส
-    <ul>
-      <li>เขียนที่</li>
-      <li>ลาตั้งแต่วันที่</li>
-      <li>ลาถึงวันที่</li>
-      <li>มีกำหนด กี่ปี กี่เดือน กี่วัน (คำนวนจากทาง frontend Auto)</li>
-      <li>เงินเดือนปัจจุบัน (Auto)</li>
-      <li>
-        เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ
-      </li>
-      <li>ชื่อคู่สมรส</li>
-      <li>ตำแหน่งคู่สมรส</li>
-      <li>ระดับคู่สมรส</li>
-      <li>ไปปฏิบัติราชการ ณ ประเทศ</li>
-      <li>ระดับคู่สมรส</li>
-      <li>
-        ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย ประกอบด้วย ประเทศ, เป็นเวลา กี่ปี
-        กี่เดือน กี่วัน, ตั้งแต่วันที่, ถึงวันที่ (ในกรณีลาติดต่อกับครั้งก่อน
-        รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน ข้อมูลมาจาก API (Auto))
-      </li>
-      <li>รายละเอียด (ไม่บังคับกรอก)</li>
-      <li>เอกสารประกอบ</li>
-    </ul>
-  </div>
+	<!-- <div>
+		ลาติดตามคู่สมรส
+		<ul>
+			<li>เขียนที่</li>
+			<li>ลาตั้งแต่วันที่</li>
+			<li>ลาถึงวันที่</li>
+			<li>มีกำหนด กี่ปี กี่เดือน กี่วัน (คำนวนจากทาง frontend Auto)</li>
+			<li>เงินเดือนปัจจุบัน (Auto)</li>
+			<li>เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ</li>
+			<li>ชื่อคู่สมรส</li>
+			<li>ตำแหน่งคู่สมรส</li>
+			<li>ระดับคู่สมรส</li>
+			<li>ไปปฏิบัติราชการ ณ ประเทศ</li>
+			<li>ระดับคู่สมรส</li>
+			<li>
+				ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย ประกอบด้วย ประเทศ, เป็นเวลา กี่ปี กี่เดือน กี่วัน, ตั้งแต่วันที่, ถึงวันที่ (ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน
+				กี่วัน ข้อมูลมาจาก API (Auto))
+			</li>
+			<li>รายละเอียด (ไม่บังคับกรอก)</li>
+			<li>เอกสารประกอบ</li>
+		</ul>
+	</div> -->
+	<form @submit.prevent.stop="onValidate">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+		<div class="col-12 row q-col-gutter-md q-pa-md">
+			<div class="col-xs-12 col-sm-12">
+				<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"
+							ref="leaveNoRef"
+							for="leaveNoRef"
+							dense
+							outlined
+							v-model="formData.leaveNo"
+							label="เขียนที่"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'เขียนที่'}`]"
+						/>
+
+						<div class="col-md-4 col-sm-12">
+							<q-input class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalary" label="เงินเดือนปัจจุบัน" readonly />
+						</div>
+
+						<datepicker
+							class="col-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.startLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							: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="startLeaveDateRef"
+									for="startLeaveDateRef"
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : 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-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.endLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							: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="endLeaveDateRef"
+									for="endLeaveDateRef"
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : 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-2 col-sm-12"
+							dense
+							outlined
+							ref="leaveTotalRef"
+							for="leaveTotalRef"
+							type="number"
+							v-model="formData.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+						/>
+						<div class="col-md-3 col-sm-12">
+							<q-input
+								class="col-12 col-sm-12"
+								ref="spouseNameRef"
+								for="spouseNameRef"
+								dense
+								outlined
+								v-model="formData.spouseName"
+								label="ชื่อคู่สมรส"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
+							/>
+						</div>
+						<div class="col-md-3 col-sm-12">
+							<q-input
+								class="col-12 col-sm-12"
+								ref="spousePositionRef"
+								for="spousePositionRef"
+								dense
+								outlined
+								v-model="formData.spousePosition"
+								label="ตำแหน่งคู่สมรส"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
+							/>
+						</div>
+						<div class="col-md-3 col-sm-12">
+							<q-input
+								class="col-12 col-sm-12"
+								ref="spouseLevelRef"
+								for="spouseLevelRef"
+								dense
+								outlined
+								v-model="formData.spouseLevel"
+								label="ระดับคู่สมรส"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
+							/>
+						</div>
+						<div class="col-md-3 col-sm-12">
+							<q-input
+								class="col-12 col-sm-12"
+								ref="dutyCountryRef"
+								for="dutyCountryRef"
+								dense
+								outlined
+								v-model="formData.dutyCountry"
+								label="ไปปฏิบัติราชการ ณ ประเทศ"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
+							/>
+						</div>
+						<div class="col-12 row q-pa-sm q-col-gutter-sm">
+							<div class="col-md-12 col-sm-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
+
+							<q-input class="col-md-4 col-sm-12" dense outlined ref="followHistoryRef" for="followHistoryRef" v-model="formData.followHistoryCountry" label="ประเทศ" readonly />
+							<q-input class="col-md-4 col-sm-12" dense outlined ref="followHistoryRef" for="followHistoryRef" v-model="formData.followHistoryTime" label="เป็นเวลา" readonly />
+							<datepicker
+								class="col-md-2 col-sm-12"
+								menu-class-name="modalfix"
+								v-model="formData.followHistoryStart"
+								:locale="'th'"
+								autoApply
+								borderless
+								: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="followHistoryStartRef"
+										for="followHistoryStartRef"
+										hide-bottom-space
+										:readonly="!edit"
+										class="full-width datepicker"
+										:model-value="formData.followHistoryStart != null ? date2Thai(formData.followHistoryStart) : 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-md-2 col-sm-12"
+								menu-class-name="modalfix"
+								v-model="formData.followHistoryEnd"
+								:locale="'th'"
+								autoApply
+								borderless
+								: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="followHistoryEndRef"
+										for="followHistoryEndRef"
+										hide-bottom-space
+										:readonly="!edit"
+										class="full-width datepicker"
+										:model-value="formData.followHistoryEnd != null ? date2Thai(formData.followHistoryEnd) : 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>
+
+						<q-input
+							type="textarea"
+							class="col-md-12 col-sm-12"
+							dense
+							outlined
+							ref="leaveDetailRef"
+							for="leaveDetailRef"
+							v-model="formData.leaveDetail"
+							label="รายละเอียด"
+							:readonly="!edit"
+						/>
+
+						<q-file v-model="formData.file" @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 formData.file" :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>
+		</div>
+		<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="บันทึก" />
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/interface/request/FollowSpouseForm.ts b/src/modules/05_leave/interface/request/FollowSpouseForm.ts
new file mode 100644
index 0000000..403a597
--- /dev/null
+++ b/src/modules/05_leave/interface/request/FollowSpouseForm.ts
@@ -0,0 +1,39 @@
+interface FormData {
+	leaveNo: string //เขียนที่***
+	startLeaveDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: Date | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: string //จำนวนวันลา
+	salary: number //เงินเดือนปัจจุบัน
+	spouseName: string //ชื่อคู่สมรส
+	spousePosition: string //ตำแหน่งคู่สมรส
+	spouseLevel: string //ระดับคู่สมรส
+	dutyCountry: string //ไปปฏิบัติราชการ ณ ประเทศ
+	followHistoryCountry: string //ประวัติการลาติดตามคู่สมรสประเทศ
+	followHistoryTime: string //ประวัติการลาติดตามคู่สมรสประเทศ
+	followHistoryStart: Date | null //ประวัติการลาติดตามคู่สมรสประเทศ
+	followHistoryEnd: Date | null //ประวัติการลาติดตามคู่สมรสประเทศ
+	leaveDetail: string //รายละเอียดการลา
+	file: File[] | null //เอกสารปะกอบ
+}
+
+interface FormRef {
+	leaveNo: object | null //เขียนที่***
+	startLeaveDate: object | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: object | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: object | null //จำนวนวันลา
+	salary: object | null //เงินเดือนปัจจุบัน
+	spouseName: object | null //หมายเลขที่ติดต่อขณะลา
+	spousePosition: object | null //ตำแหน่งคู่สมรส
+	spouseLevel: object | null //ระดับคู่สมรส
+	dutyCountry: object | null //ไปปฏิบัติราชการ ณ ประเทศ
+	followHistoryCountry: object | null //ประวัติการลาติดตามคู่สมรสประเทศ
+	followHistoryTime: object | null //ประวัติการลาติดตามคู่สมรสประเทศ
+	followHistoryStart: object | null //ประวัติการลาติดตามคู่สมรสประเทศ
+	followHistoryEnd: object | null //ประวัติการลาติดตามคู่สมรสประเทศ
+	leaveDetail: object | null //รายละเอียดการลา
+	leaveContactLocation: object | null //สถานที่ติดต่อขณะลา
+	file: object | null //เอกสารปะกอบ
+	[key: string]: any
+}
+
+export type { FormData, FormRef }
diff --git a/src/modules/05_leave/interface/request/HelpWifeForm.ts b/src/modules/05_leave/interface/request/HelpWifeForm.ts
new file mode 100644
index 0000000..c0f9282
--- /dev/null
+++ b/src/modules/05_leave/interface/request/HelpWifeForm.ts
@@ -0,0 +1,31 @@
+interface FormData {
+	leaveNo: string //เขียนที่***
+	wifeName: string //ชื่อภรรยา
+	brithDate: Date | null //วันที่คลอด
+	startLeaveDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: Date | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: string //จำนวนวันลา
+	contractTel: string //หมายเลขโทรศัพท์ที่ติดต่อได้
+	leaveContactTel: string //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: string //รายละเอียดการลา
+	leaveContactLocation: string //สถานที่ติดต่อขณะลา
+	file: File[] | null //เอกสารปะกอบ
+	[key: string]: any
+}
+
+interface FormRef {
+	leaveNo: object | null //เขียนที่***
+	startLeaveDate: object | null //*วัน เดือน ปีเริ่มต้นลา
+	wifeName: object | null //ชื่อภรรยา
+	brithDate: object | null //วันที่คลอด
+	endLeaveDate: object | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: object | null //จำนวนวันลา
+	contractTel: object | null //หมายเลขโทรศัพท์ที่ติดต่อได้
+	leaveContactTel: object | null //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: object | null //รายละเอียดการลา
+	leaveContactLocation: object | null //สถานที่ติดต่อขณะลา
+	file: object | null //เอกสารปะกอบ
+	[key: string]: any
+}
+
+export type { FormData, FormRef }
diff --git a/src/modules/05_leave/interface/request/SickForm.ts b/src/modules/05_leave/interface/request/SickForm.ts
index 02783eb..56b9b51 100644
--- a/src/modules/05_leave/interface/request/SickForm.ts
+++ b/src/modules/05_leave/interface/request/SickForm.ts
@@ -7,8 +7,21 @@ interface FormData {
 	leaveContactTel: string //หมายเลขที่ติดต่อขณะลา
 	leaveDetail: string //รายละเอียดการลา
 	leaveContactLocation: string //สถานที่ติดต่อขณะลา
-	file: File | null //เอกสารปะกอบ
+	file: File[] | null //เอกสารปะกอบ
 	[key: string]: any
 }
 
-export type { FormData }
+interface FormRef {
+	leaveNo: object | null //เขียนที่***
+	startLeaveDate: object | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: object | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: object | null //จำนวนวันลา
+	contractTel: object | null //หมายเลขโทรศัพท์ที่ติดต่อได้
+	leaveContactTel: object | null //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: object | null //รายละเอียดการลา
+	leaveContactLocation: object | null //สถานที่ติดต่อขณะลา
+	file: object | null //เอกสารปะกอบ
+	[key: string]: any
+}
+
+export type { FormData, FormRef }
diff --git a/src/modules/05_leave/interface/request/VacationForm.ts b/src/modules/05_leave/interface/request/VacationForm.ts
new file mode 100644
index 0000000..119d4ca
--- /dev/null
+++ b/src/modules/05_leave/interface/request/VacationForm.ts
@@ -0,0 +1,31 @@
+interface FormData {
+	leaveNo: string //เขียนที่***
+	lastYearVacation: string //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา
+	currentVacation: string //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน
+	startLeaveDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: Date | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: string //จำนวนวันลา
+	contractTel: string //หมายเลขโทรศัพท์ที่ติดต่อได้
+	leaveContactTel: string //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: string //รายละเอียดการลา
+	leaveContactLocation: string //สถานที่ติดต่อขณะลา
+	file: File[] | null //เอกสารปะกอบ
+	[key: string]: any
+}
+
+interface FormRef {
+	leaveNo: object | null //เขียนที่***
+	startLeaveDate: object | null //*วัน เดือน ปีเริ่มต้นลา
+	lastYearVacation: object | null //ชื่อภรรยา
+	currentVacation: object | null //วันที่คลอด
+	endLeaveDate: object | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: object | null //จำนวนวันลา
+	contractTel: object | null //หมายเลขโทรศัพท์ที่ติดต่อได้
+	leaveContactTel: object | null //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: object | null //รายละเอียดการลา
+	leaveContactLocation: object | null //สถานที่ติดต่อขณะลา
+	file: object | null //เอกสารปะกอบ
+	[key: string]: any
+}
+
+export type { FormData, FormRef }
diff --git a/src/modules/05_leave/interface/request/WorkInternationalForm.ts b/src/modules/05_leave/interface/request/WorkInternationalForm.ts
new file mode 100644
index 0000000..3b7952a
--- /dev/null
+++ b/src/modules/05_leave/interface/request/WorkInternationalForm.ts
@@ -0,0 +1,18 @@
+interface FormData {
+	leaveNo: string //เขียนที่***
+	startLeaveDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: Date | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveDetail: string //รายละเอียดการลา
+	file: File[] | null //เอกสารปะกอบ
+}
+
+interface FormRef {
+	leaveNo: object | null //เขียนที่***
+	startLeaveDate: object | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: object | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveDetail: object | null //รายละเอียดการลา
+	file: object | null //เอกสารปะกอบ
+	[key: string]: any
+}
+
+export type { FormData, FormRef }
diff --git a/src/modules/05_leave/views/SampleForm.vue b/src/modules/05_leave/views/SampleForm.vue
index 5950011..92b1bcc 100644
--- a/src/modules/05_leave/views/SampleForm.vue
+++ b/src/modules/05_leave/views/SampleForm.vue
@@ -1,81 +1,65 @@
 <script setup lang="ts">
-import { reactive, ref, watch } from "vue";
+import { reactive, ref, watch } from "vue"
 
-import SickForm from "@/modules/05_leave/componenst/Forms/01_SickForm.vue";
-import HelpWifeBirthForm from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue";
-
-const type = ref<number>(0);
+import SickForm from "@/modules/05_leave/componenst/Forms/01_SickForm.vue"
+import HelpWifeBirthForm from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue"
+import VacationForm from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue"
+import FollowSpouseForm from "@/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue"
+import WorkInternationalForm from "@/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue"
+const type = ref<number>(0)
 const typeOption = reactive([
-  { id: 0, name: "" },
-  { id: 1, name: "ลาป่วย" },
-  { id: 2, name: "ลากิจ" },
-  { id: 3, name: "ลาคลอด" },
-  { id: 4, name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
-]);
+	{ id: 0, name: "" },
+	{ id: 1, name: "ลาป่วย" },
+	{ id: 2, name: "ลากิจ" },
+	{ id: 3, name: "ลาคลอด" },
+	{ id: 4, name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
+	{ id: 5, name: "ลาพักผ่อน" },
+	{ id: 6, name: "ลาติดตามคู่สมรส" },
+	{ id: 7, name: "ลาไปปฏิบัติงานในองค์การระหว่างประเทศ" },
+])
 
 async function onSubmit() {
-
+	console.log("testOnsub")
 }
 
 watch(
-  () => type.value,
-  () => {
-    // save store
-    console.log("ประเภทการลา===>", type.value);
-  }
-);
+	() => type.value,
+	() => {
+		// save store
+		console.log("ประเภทการลา===>", type.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
-          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 icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
+				<div>ยื่นใบลา</div>
+			</div>
 
-      <q-card bordered>
-        <form>
-          <div class="col-12 row q-col-gutter-md q-pa-md">
-            <div class="col-xs-12 col-sm-12">
-              <q-select
-                filled
-                v-model="type"
-                :options="typeOption"
-                label="ประเภทการลา"
-                option-value="id"
-                option-label="name"
-                map-options
-                emit-value
-              />
+			<q-card bordered>
+				<form>
+					<div class="col-12 row q-col-gutter-md q-pa-md">
+						<div class="col-xs-12 col-sm-12">
+							<q-select filled v-model="type" :options="typeOption" label="ประเภทการลา" option-value="id" option-label="name" map-options emit-value />
 
-              <SickForm v-if="type == 1 || type == 2 || type == 3" />
-              <HelpWifeBirthForm v-if="type == 4" />
-            </div>
-          </div>
+							<SickForm v-if="type == 1 || type == 2 || type == 3" />
+							<HelpWifeBirthForm v-if="type == 4" />
+							<VacationForm v-if="type == 5" />
+							<FollowSpouseForm v-if="type == 6" />
+							<WorkInternationalForm v-if="type == 7" />
+						</div>
+					</div>
 
-          <q-separator />
-          <div class="row col-12 q-pa-md">
-            <q-space />
-            <q-btn
-              id="submitForm"
-              unelevated
-              dense
-              class="q-px-md items-center btnBlue"
-              label="บันทึก"
-              @click="onSubmit"
-            />
-          </div>
-        </form>
-      </q-card>
-    </div>
-  </div>
+					<q-separator />
+					<div class="row col-12 q-pa-md">
+						<q-space />
+						<q-btn id="submitForm" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" @click="onSubmit" />
+					</div>
+				</form>
+			</q-card>
+		</div>
+	</div>
 </template>