From 17d80c773aad2d70a1885b3590f7c206838323b1 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Tue, 14 Nov 2023 17:36:48 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui=20?=
 =?UTF-8?q?=E0=B9=83=E0=B8=99=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/componenst/Forms/01_SickForm.vue | 283 ++++++++++--------
 .../Forms/{03_ฺBirth.vue => 03_Birth.vue}      |  29 +-
 .../componenst/Forms/04_HelpWifeBirthForm.vue |  37 ++-
 .../componenst/Forms/05_VacationForm.vue      |  55 ++--
 .../Forms/11_WorkInternationalForm.vue        |  20 +-
 .../componenst/Forms/12_FollowSpouseForm.vue  |  47 ++-
 src/modules/05_leave/views/AddPage.vue        |   2 +-
 7 files changed, 285 insertions(+), 188 deletions(-)
 rename src/modules/05_leave/componenst/Forms/{03_ฺBirth.vue => 03_Birth.vue} (93%)

diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
index 3781d1d..9a85ca6 100644
--- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
@@ -112,6 +112,7 @@ function onValidate() {
 					ref="leaveNoRef"
 					for="leaveNoRef"
 					dense
+					hide-bottom-space
 					outlined
 					v-model="formData.leaveNo"
 					label="เขียนที่"
@@ -119,145 +120,165 @@ function onValidate() {
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 
-				<div class="col-md-4 col-sm-12">
+				<div class="col-12 col-md-4 col-sm-12">
 					<q-radio v-model="formData.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
 					<q-radio v-model="formData.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" />
 					<q-radio v-model="formData.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" />
 				</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
+				<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="formData.startLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
 							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+						>
+							<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-12 col-md-3 col-sm-6"
+							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-12 col-md-2 col-sm-6"
+							dense
+							outlined
+							ref="leaveTotalRef"
+							for="leaveTotalRef"
+							type="number"
+							v-model="formData.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+						/>
+					</div>
+				</div>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<q-input
+							class="col-12 col-md-3 col-sm-6"
+							dense
+							outlined
+							ref="leaveContactTelRef"
+							for="leaveContactTelRef"
+							v-model="formData.leaveContactTel"
+							mask="(###)-###-####"
+							hide-bottom-space
+							unmasked-value
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
+
+						<q-input
+							class="col-12 col-md-9 col-sm-6"
+							dense
+							outlined
+							ref="leaveContactLocationRef"
+							for="leaveContactLocationRef"
+							v-model="formData.leaveContactLocation"
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+							hide-bottom-space
+						/>
+					</div>
+				</div>
+				<q-input
+					type="textarea"
+					class="col-12 col-md-12 col-sm-12"
+					dense
+					outlined
+					ref="leaveDetailRef"
+					for="leaveDetailRef"
+					v-model="formData.leaveDetail"
+					label="รายละเอียด"
+					:readonly="!edit"
+				/>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<q-file
+							ref="fileRef"
+							for="fileRef"
+							v-model="formData.file"
+							@added="fileUploadDoc"
+							dense
+							label="เอกสารประกอบ"
+							outlined
+							use-chips
+							multiple
+							class="col-12 q-pl-sm col-12"
+							:rules="[val => !!val || `${'กรุณาเลือกไฟล์'}`]"
 						>
 							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+								<q-icon name="attach_file" color="primary" />
 							</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 || `${'กรุณากรอกจำนวนวัน'}`]"
-				/>
-
-				<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
-					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
-					ref="fileRef"
-					for="fileRef"
-					v-model="formData.file"
-					@added="fileUploadDoc"
-					dense
-					label="เอกสารประกอบ"
-					outlined
-					use-chips
-					multiple
-					class="q-pl-sm col-12"
-					:rules="[val => !!val || `${'กรุณาเลือกไฟล์'}`]"
-				>
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
+						</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>
diff --git a/src/modules/05_leave/componenst/Forms/03_ฺBirth.vue b/src/modules/05_leave/componenst/Forms/03_Birth.vue
similarity index 93%
rename from src/modules/05_leave/componenst/Forms/03_ฺBirth.vue
rename to src/modules/05_leave/componenst/Forms/03_Birth.vue
index d7be057..77b774b 100644
--- a/src/modules/05_leave/componenst/Forms/03_ฺBirth.vue
+++ b/src/modules/05_leave/componenst/Forms/03_Birth.vue
@@ -112,16 +112,18 @@ function onValidate() {
 					outlined
 					v-model="formData.leaveNo"
 					label="เขียนที่"
+					hide-bottom-space
 					:readonly="!edit"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 
 				<datepicker
-					class="col-md-3 col-sm-12"
+					class="col-12 col-md-3 col-sm-12"
 					menu-class-name="modalfix"
 					v-model="formData.startLeaveDate"
 					:locale="'th'"
 					autoApply
+					hide-bottom-space
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
@@ -154,12 +156,13 @@ function onValidate() {
 				</datepicker>
 
 				<datepicker
-					class="col-md-3 col-sm-12"
+					class="col-12 col-md-3 col-sm-12"
 					menu-class-name="modalfix"
 					v-model="formData.endLeaveDate"
 					:locale="'th'"
 					autoApply
 					borderless
+					hide-bottom-space
 					:enableTimePicker="false"
 					week-start="0"
 					:readonly="!edit"
@@ -190,8 +193,9 @@ function onValidate() {
 					</template>
 				</datepicker>
 				<q-input
-					class="col-md-2 col-sm-12"
+					class="col-12 col-md-2 col-sm-12"
 					dense
+					hide-bottom-space
 					outlined
 					ref="leaveTotalRef"
 					for="leaveTotalRef"
@@ -203,9 +207,10 @@ function onValidate() {
 				/>
 
 				<q-input
-					class="col-4"
+					class="col-12 col-md-4 col-sm-12"
 					dense
 					outlined
+					hide-bottom-space
 					ref="leaveContactTelRef"
 					for="leaveContactTelRef"
 					v-model="formData.leaveContactTel"
@@ -217,9 +222,10 @@ function onValidate() {
 				/>
 
 				<q-input
-					class="col-md-12 col-sm-12"
+					class="col-12 col-md-12 col-sm-12"
 					dense
 					outlined
+					hide-bottom-space
 					ref="leaveContactLocationRef"
 					for="leaveContactLocationRef"
 					v-model="formData.leaveContactLocation"
@@ -228,11 +234,22 @@ function onValidate() {
 					: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-input
+					type="textarea"
+					class="col-12 col-md-12 col-sm-12"
+					dense
+					outlined
+					ref="leaveDetailRef"
+					for="leaveDetailRef"
+					v-model="formData.leaveDetail"
+					label="รายละเอียด"
+					:readonly="!edit"
+				/>
 
 				<q-file
 					ref="fileRef"
 					for="fileRef"
+					hide-bottom-space
 					v-model="formData.file"
 					@added="fileUploadDoc"
 					dense
diff --git a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
index 8c74862..e1878af 100644
--- a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
@@ -128,22 +128,24 @@ function 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"
+					class="col-12 col-12 col-sm-12"
 					ref="leaveNoRef"
 					for="leaveNoRef"
 					dense
 					outlined
+					hide-bottom-space
 					v-model="formData.leaveNo"
 					label="เขียนที่"
 					:readonly="!edit"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 				<datepicker
-					class="col-md-4 col-sm-12"
+					class="col-12 col-md-4 col-sm-12"
 					menu-class-name="modalfix"
 					v-model="formData.startLeaveDate"
 					:locale="'th'"
 					autoApply
+					hide-bottom-space
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
@@ -176,12 +178,13 @@ function onValidate() {
 				</datepicker>
 
 				<datepicker
-					class="col-md-4 col-sm-12"
+					class="col-12 col-md-4 col-sm-12"
 					menu-class-name="modalfix"
 					v-model="formData.endLeaveDate"
 					:locale="'th'"
 					autoApply
 					borderless
+					hide-bottom-space
 					:enableTimePicker="false"
 					week-start="0"
 					:readonly="!edit"
@@ -212,24 +215,26 @@ function onValidate() {
 					</template>
 				</datepicker>
 				<q-input
-					class="col-md-4 col-sm-12"
+					class="col-12 col-md-4 col-sm-12"
 					dense
 					outlined
 					ref="leaveTotalRef"
 					for="leaveTotalRef"
 					type="number"
+					hide-bottom-space
 					v-model="formData.leaveTotal"
 					label="จำนวนวันที่ลา"
 					readonly
 					:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
 				/>
-				<div class="col-md-4 col-sm-12">
+				<div class="col-12 col-md-4 col-sm-12">
 					<q-input
 						class="col-12 col-sm-12"
 						ref="wifeNameRef"
 						for="wifeNameRef"
 						dense
 						outlined
+						hide-bottom-space
 						v-model="formData.wifeName"
 						label="ชื่อภรรยา"
 						:readonly="!edit"
@@ -238,12 +243,13 @@ function onValidate() {
 				</div>
 
 				<datepicker
-					class="col-md-4 col-sm-12"
+					class="col-12 col-md-4 col-sm-12"
 					menu-class-name="modalfix"
 					v-model="formData.brithDate"
 					:locale="'th'"
 					autoApply
 					borderless
+					hide-bottom-space
 					:enableTimePicker="false"
 					week-start="0"
 					:readonly="!edit"
@@ -275,7 +281,7 @@ function onValidate() {
 				</datepicker>
 
 				<q-input
-					class="col-4"
+					class="col-12 col-md-4 col-sm-12"
 					dense
 					outlined
 					ref="leaveContactTelRef"
@@ -283,15 +289,17 @@ function onValidate() {
 					v-model="formData.leaveContactTel"
 					mask="(###)-###-####"
 					unmasked-value
+					hide-bottom-space
 					label="หมายเลขโทรศัพท์ที่ติดต่อได้"
 					:readonly="!edit"
 					:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
 				/>
 
 				<q-input
-					class="col-md-12 col-sm-12"
+					class="col-12 col-md-12 col-sm-12"
 					dense
 					outlined
+					hide-bottom-space
 					ref="leaveContactLocationRef"
 					for="leaveContactLocationRef"
 					v-model="formData.leaveContactLocation"
@@ -300,7 +308,18 @@ function onValidate() {
 					: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-input
+					hide-bottom-space
+					type="textarea"
+					class="col-12 col-md-12 col-sm-12"
+					dense
+					outlined
+					ref="leaveDetailRef"
+					for="leaveDetailRef"
+					v-model="formData.leaveDetail"
+					label="รายละเอียด"
+					:readonly="!edit"
+				/>
 
 				<q-file ref="fileRef" v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
 					<template v-slot:prepend>
diff --git a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
index 94562b4..5799a45 100644
--- a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
@@ -107,50 +107,36 @@ function onValidate() {
 </script>
 
 <template>
-	<!-- <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> -->
 	<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">
+			<div class="row q-pa-sm q-col-gutter-sm">
 				<q-input
 					class="col-12 col-sm-12"
 					ref="leaveNoRef"
 					for="leaveNoRef"
 					dense
+					hide-bottom-space
 					outlined
 					v-model="formData.leaveNo"
 					label="เขียนที่"
 					:readonly="!edit"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
-				<div class="col-md-4 col-sm-12">
+				<div class="col-12 col-md-4 col-sm-6">
 					<q-radio v-model="formData.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
 					<q-radio v-model="formData.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" />
 					<q-radio v-model="formData.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" />
 				</div>
 				<q-input
-					class="col-md-4 col-sm-12"
+					class="col-12 col-md-4 col-sm-6"
 					ref="lastYearVacationRef"
 					for="lastYearVacationRef"
 					dense
+					hide-bottom-space
 					readonly
 					outlined
 					v-model="formData.lastYearVacation"
@@ -158,22 +144,24 @@ function onValidate() {
 				/>
 
 				<q-input
-					class="col-md-4 col-sm-12"
+					class="col-12 col-md-4 col-sm-6"
 					ref="currentVacationRef"
 					for="currentVacationRef"
 					dense
 					readonly
+					hide-bottom-space
 					outlined
 					v-model="formData.currentVacation"
 					label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
 				/>
 
 				<datepicker
-					class="col-md-3 col-sm-12"
+					class="col-12 col-md-3 col-sm-6"
 					menu-class-name="modalfix"
 					v-model="formData.startLeaveDate"
 					:locale="'th'"
 					autoApply
+					hide-bottom-space
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
@@ -206,11 +194,12 @@ function onValidate() {
 				</datepicker>
 
 				<datepicker
-					class="col-md-3 col-sm-12"
+					class="col-12 col-md-3 col-sm-6"
 					menu-class-name="modalfix"
 					v-model="formData.endLeaveDate"
 					:locale="'th'"
 					autoApply
+					hide-bottom-space
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
@@ -242,9 +231,10 @@ function onValidate() {
 					</template>
 				</datepicker>
 				<q-input
-					class="col-md-3 col-sm-12"
+					class="col-12 col-md-3 col-sm-12"
 					dense
 					outlined
+					hide-bottom-space
 					ref="leaveTotalRef"
 					for="leaveTotalRef"
 					type="number"
@@ -255,9 +245,10 @@ function onValidate() {
 				/>
 
 				<q-input
-					class="col-3"
+					class="col-12 col-md-3 col-sm-12"
 					dense
 					outlined
+					hide-bottom-space
 					ref="leaveContactTelRef"
 					for="leaveContactTelRef"
 					v-model="formData.leaveContactTel"
@@ -269,9 +260,10 @@ function onValidate() {
 				/>
 
 				<q-input
-					class="col-md-12 col-sm-12"
+					class="col-12 col-md-12 col-sm-6"
 					dense
 					outlined
+					hide-bottom-space
 					ref="leaveContactLocationRef"
 					for="leaveContactLocationRef"
 					v-model="formData.leaveContactLocation"
@@ -280,7 +272,18 @@ function onValidate() {
 					: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-input
+					type="textarea"
+					hide-bottom-space
+					class="col-12 col-md-12 col-sm-12"
+					dense
+					outlined
+					ref="leaveDetailRef"
+					for="leaveDetailRef"
+					v-model="formData.leaveDetail"
+					label="รายละเอียด"
+					:readonly="!edit"
+				/>
 
 				<q-file ref="fileRef" v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
 					<template v-slot:prepend>
diff --git a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
index 88fb942..3b53fc1 100644
--- a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
@@ -131,6 +131,7 @@ function onSubmit() {
 				<q-input
 					class="col-12 col-sm-12"
 					ref="leaveNoRef"
+					hide-bottom-space
 					for="leaveNoRef"
 					dense
 					outlined
@@ -141,10 +142,11 @@ function onSubmit() {
 				/>
 
 				<datepicker
-					class="col-md-3 col-sm-12"
+					class="col-12 col-md-6 col-sm-6"
 					menu-class-name="modalfix"
 					v-model="formData.startLeaveDate"
 					:locale="'th'"
+					hide-bottom-space
 					autoApply
 					borderless
 					:enableTimePicker="false"
@@ -178,11 +180,12 @@ function onSubmit() {
 				</datepicker>
 
 				<datepicker
-					class="col-md-3 col-sm-12"
+					class="col-12 col-md-6 col-sm-6"
 					menu-class-name="modalfix"
 					v-model="formData.endLeaveDate"
 					:locale="'th'"
 					autoApply
+					hide-bottom-space
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
@@ -226,7 +229,18 @@ function onSubmit() {
 							: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-input
+					hide-bottom-space
+					type="textarea"
+					class="col-12 col-md-12 col-sm-12"
+					dense
+					outlined
+					ref="leaveDetailRef"
+					for="leaveDetailRef"
+					v-model="formData.leaveDetail"
+					label="รายละเอียด"
+					:readonly="!edit"
+				/>
 
 				<q-file ref="fileRef" v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
 					<template v-slot:prepend>
diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index 4b945ca..5163a2e 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@@ -155,6 +155,7 @@ function onValidate() {
 					ref="leaveNoRef"
 					for="leaveNoRef"
 					dense
+					hide-bottom-space
 					outlined
 					v-model="formData.leaveNo"
 					label="เขียนที่"
@@ -162,11 +163,12 @@ function onValidate() {
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 				<datepicker
-					class="col-md-4 col-sm-12"
+					class="col-12 col-md-4 col-sm-12"
 					menu-class-name="modalfix"
 					v-model="formData.startLeaveDate"
 					:locale="'th'"
 					autoApply
+					hide-bottom-space
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
@@ -199,12 +201,13 @@ function onValidate() {
 				</datepicker>
 
 				<datepicker
-					class="col-md-4 col-sm-12"
+					class="col-12 col-md-4 col-sm-12"
 					menu-class-name="modalfix"
 					v-model="formData.endLeaveDate"
 					:locale="'th'"
 					autoApply
 					borderless
+					hide-bottom-space
 					:enableTimePicker="false"
 					week-start="0"
 					:readonly="!edit"
@@ -235,9 +238,10 @@ function onValidate() {
 					</template>
 				</datepicker>
 				<q-input
-					class="col-md-4 col-sm-12"
+					class="col-12 col-md-4 col-sm-12"
 					dense
 					outlined
+					hide-bottom-space
 					ref="leaveTotalRef"
 					for="leaveTotalRef"
 					type="number"
@@ -246,16 +250,17 @@ function onValidate() {
 					readonly
 					:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
 				/>
-				<div class="col-md-3 col-sm-12">
-					<q-input class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalary" label="เงินเดือนปัจจุบัน" readonly />
+				<div class="col-12 col-md-3 col-sm-12">
+					<q-input hide-bottom-space class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalary" label="เงินเดือนปัจจุบัน" readonly />
 				</div>
-				<div class="col-md-6 col-sm-12">
-					<q-input class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalaryText" label="เงินเดือนปัจจุบัน" readonly />
+				<div class="col-12 col-md-6 col-sm-12">
+					<q-input hide-bottom-space class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalaryText" label="เงินเดือนปัจจุบัน" readonly />
 				</div>
 
 				<div class="col-md-3 col-sm-12">
 					<q-input
 						class="col-12 col-sm-12"
+						hide-bottom-space
 						ref="spouseNameRef"
 						for="spouseNameRef"
 						dense
@@ -269,6 +274,7 @@ function onValidate() {
 				<div class="col-md-3 col-sm-12">
 					<q-input
 						class="col-12 col-sm-12"
+						hide-bottom-space
 						ref="spousePositionRef"
 						for="spousePositionRef"
 						dense
@@ -285,6 +291,7 @@ function onValidate() {
 						ref="spouseLevelRef"
 						for="spouseLevelRef"
 						dense
+						hide-bottom-space
 						outlined
 						v-model="formData.spouseLevel"
 						label="ระดับคู่สมรส"
@@ -297,6 +304,7 @@ function onValidate() {
 						class="col-12 col-sm-12"
 						ref="dutyCountryRef"
 						for="dutyCountryRef"
+						hide-bottom-space
 						dense
 						outlined
 						v-model="formData.dutyCountry"
@@ -308,11 +316,12 @@ function onValidate() {
 				<div class="col-12 row q-pa-sm q-col-gutter-sm">
 					<div class="col-md-12 col-sm-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
 					<datepicker
-						class="col-md-3 col-sm-12"
+						class="col-12 col-md-3 col-sm-12"
 						menu-class-name="modalfix"
 						v-model="formData.followHistoryStart"
 						:locale="'th'"
 						autoApply
+						hide-bottom-space
 						borderless
 						:enableTimePicker="false"
 						week-start="0"
@@ -344,11 +353,12 @@ function onValidate() {
 						</template>
 					</datepicker>
 					<datepicker
-						class="col-md-3 col-sm-12"
+						class="col-12 col-md-3 col-sm-12"
 						menu-class-name="modalfix"
 						v-model="formData.followHistoryEnd"
 						:locale="'th'"
 						autoApply
+						hide-bottom-space
 						borderless
 						:enableTimePicker="false"
 						week-start="0"
@@ -380,9 +390,10 @@ function onValidate() {
 						</template>
 					</datepicker>
 					<q-input
-						class="col-md-3 col-sm-12"
+						class="col-12 col-md-3 col-sm-12"
 						dense
 						outlined
+						hide-bottom-space
 						ref="followHistoryCountryRef"
 						for="followHistoryCountryRef"
 						v-model="formData.followHistoryCountry"
@@ -390,9 +401,10 @@ function onValidate() {
 						:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
 					/>
 					<q-input
-						class="col-md-3 col-sm-12"
+						class="col-12 col-md-3 col-sm-12"
 						dense
 						outlined
+						hide-bottom-space
 						ref="followHistoryTimeRef"
 						for="followHistoryTimeRef"
 						v-model="formData.followHistoryTime"
@@ -401,7 +413,18 @@ function onValidate() {
 					/>
 				</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-input
+					hide-bottom-space
+					type="textarea"
+					class="col-12 col-md-12 col-sm-12"
+					dense
+					outlined
+					ref="leaveDetailRef"
+					for="leaveDetailRef"
+					v-model="formData.leaveDetail"
+					label="รายละเอียด"
+					:readonly="!edit"
+				/>
 
 				<q-file ref="fileRef" v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
 					<template v-slot:prepend>
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index dc9e850..cc9b582 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -5,7 +5,7 @@ import { useRouter, useRoute } from "vue-router"
 
 import Form from "@/modules/05_leave/componenst/Forms/Form.vue"
 import Form3 from "@/modules/05_leave/componenst/Forms/01_SickForm.vue"
-import FormBirth from "@/modules/05_leave/componenst/Forms/03_ฺBirth.vue"
+import FormBirth from "@/modules/05_leave/componenst/Forms/03_Birth.vue"
 import Form4 from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue"
 import Form5 from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue"
 import Form6 from "@/modules/05_leave/componenst/Forms/06_OrdinationForm.vue"