From 73c3f24ad5d7e3733c00707233c327961564ce15 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Mon, 18 Dec 2023 14:18:34 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B5=E0=B9=83=E0=B8=99=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/components/Forms/01_SickForm.vue | 810 ++++++++----------
 .../05_leave/components/Forms/03_Birth.vue    |  12 +-
 .../components/Forms/04_HelpWifeBirthForm.vue |  16 +-
 .../components/Forms/05_VacationForm.vue      |  12 +-
 .../components/Forms/06_OrdinationForm.vue    |  20 +-
 .../05_leave/components/Forms/07_HajjForm.vue |   8 +-
 .../components/Forms/08_MilitaryForm.vue      |  18 +-
 .../components/Forms/09_StudyForm.vue         |  22 +-
 .../components/Forms/10_TrainForm.vue         |  20 +-
 .../Forms/11_WorkInternationalForm.vue        |   8 +-
 .../components/Forms/12_FollowSpouseForm.vue  |  16 +-
 .../Forms/13_RehabilitationForm.vue           |   8 +-
 .../05_leave/components/Forms/Form.vue        |   1 +
 13 files changed, 444 insertions(+), 527 deletions(-)

diff --git a/src/modules/05_leave/components/Forms/01_SickForm.vue b/src/modules/05_leave/components/Forms/01_SickForm.vue
index a9cb73e..2cfac39 100644
--- a/src/modules/05_leave/components/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/components/Forms/01_SickForm.vue
@@ -1,510 +1,426 @@
 <script setup lang="ts">
-import { ref, reactive, watch, computed } from "vue";
-import type {
-  FormData,
-  FormRef,
-} from "@/modules/05_leave/interface/request/SickForm";
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
+import { ref, reactive, watch, computed } from "vue"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
+import { useCounterMixin } from "@/stores/mixin"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useQuasar } from "quasar"
+import { useRouter } from "vue-router"
 
 /** Use */
-const dataStore = useLeaveStore();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const router = useRouter();
-const {
-  date2Thai,
-  dateToISO,
-  dialogConfirm,
-  success,
-  messageError,
-  fails,
-  showLoader,
-  hideLoader,
-} = mixin;
-const edit = ref<boolean>(true);
+const dataStore = useLeaveStore()
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const router = useRouter()
+const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails, showLoader, hideLoader } = mixin
+const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  data: {
-    type: Object,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+})
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataSick = reactive<any>({
-  type: dataStore.typeId,
-  leaveWrote: "",
-  leaveStartDate: null,
-  leaveEndDate: null,
-  halfDay: "day",
-  leaveTotal: "",
-  leaveLast: null,
-  leaveNumber: "",
-  leaveAddress: "",
-  leaveDetail: "",
-  leaveDocument: [],
-});
+	type: dataStore.typeId,
+	leaveWrote: "",
+	leaveStartDate: null,
+	leaveEndDate: null,
+	halfDay: "day",
+	leaveTotal: "",
+	leaveLast: null,
+	leaveNumber: "",
+	leaveAddress: "",
+	leaveDetail: "",
+	leaveDocument: [],
+})
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null);
-const leaveStartDateRef = ref<object | null>(null);
-const leaveEndDateRef = ref<object | null>(null);
-const halfDayRef = ref<object | null>(null);
-const leaveTotalRef = ref<object | null>(null);
-const leaveLastRef = ref<object | null>(null);
-const leaveNumberRef = ref<object | null>(null);
-const leaveAddressRef = ref<object | null>(null);
-const leaveDetailRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null)
+const leaveStartDateRef = ref<object | null>(null)
+const leaveEndDateRef = ref<object | null>(null)
+const halfDayRef = ref<object | null>(null)
+const leaveTotalRef = ref<object | null>(null)
+const leaveLastRef = ref<object | null>(null)
+const leaveNumberRef = ref<object | null>(null)
+const leaveAddressRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
-  leaveWrote: leaveWroteRef,
-  leaveStartDate: leaveStartDateRef,
-  leaveEndDate: leaveEndDateRef,
-  halfDay: halfDayRef,
-  leaveTotal: leaveTotalRef,
-  leaveNumber: leaveNumberRef,
-  leaveAddress: leaveAddressRef,
-  leaveDetail: leaveDetailRef,
-};
+	leaveWrote: leaveWroteRef,
+	leaveStartDate: leaveStartDateRef,
+	leaveEndDate: leaveEndDateRef,
+	halfDay: halfDayRef,
+	leaveTotal: leaveTotalRef,
+	leaveNumber: leaveNumberRef,
+	leaveAddress: leaveAddressRef,
+	leaveDetail: leaveDetailRef,
+}
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, async () => {
-  // console.log("data==>", props.data)
-  formDataSick.leaveWrote = props.data.leaveWrote;
-  formDataSick.leaveStartDate = props.data.leaveStartDate;
-  formDataSick.leaveEndDate = props.data.leaveEndDate;
-  formDataSick.contractTel = props.data.contractTel;
-  formDataSick.leaveTotal = props.data.leaveTotal;
-  formDataSick.leaveNumber = props.data.leaveNumber;
-  formDataSick.leaveDetail = props.data.leaveDetail;
-  formDataSick.leaveDocument = props.data.leaveDocument;
-});
+	// console.log("data==>", props.data)
+	formDataSick.leaveWrote = props.data.leaveWrote
+	formDataSick.leaveStartDate = props.data.leaveStartDate
+	formDataSick.leaveEndDate = props.data.leaveEndDate
+	formDataSick.contractTel = props.data.contractTel
+	formDataSick.leaveTotal = props.data.leaveTotal
+	formDataSick.leaveNumber = props.data.leaveNumber
+	formDataSick.leaveDetail = props.data.leaveDetail
+	formDataSick.leaveDocument = props.data.leaveDocument
+})
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
 async function fileUploadDoc(files: any) {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
 }
 
 /**
  * function รีเซทค่า leaveStartDate เเละ leaveEndDate
  */
 function resetDate() {
-  if (
-    formDataSick.halfDay === "half_day_morning" ||
-    formDataSick.halfDay === "half_day_afternoon"
-  ) {
-    formDataSick.leaveStartDate = null;
-    formDataSick.leaveEndDate = null;
-  }
-  console.log("testnull");
+	if (formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon") {
+		formDataSick.leaveStartDate = null
+		formDataSick.leaveEndDate = null
+	}
+	console.log("testnull")
 }
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
-  const hasError = [];
-  for (const key in FormRef) {
-    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-      const property = FormRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    onSubmit();
-  }
+	const hasError = []
+	for (const key in FormRef) {
+		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+			const property = FormRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		onSubmit()
+	}
 }
 
 /** ฟังก์ชั่น บันทึก */
 const onSubmit = async () => {
-  dialogConfirm(
-    $q,
-    async () => {
-      await saveFormData();
-    },
-    "ยืนยันการยื่นใบลา",
-    "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-  );
-};
+	dialogConfirm(
+		$q,
+		async () => {
+			await saveFormData()
+		},
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
+	)
+}
 
 /**
  * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
  */
 async function saveFormData() {
-  showLoader();
-  const formData = new FormData();
-  //   if (formDataSick.leaveDocument.length > 0) {
-  //     const blob = formDataSick.leaveDocument.slice(
-  //       0,
-  //       formDataSick.leaveDocument[0].size
-  //     );
-  //     const newFile = new File(blob, nameFile.value, {
-  //       type: formDataSick.leaveDocument[0].type,
-  //     });
-  //     formData.append("leaveDocument", newFile);
-  //   }
+	showLoader()
+	const formData = new FormData()
+	//   if (formDataSick.leaveDocument.length > 0) {
+	//     const blob = formDataSick.leaveDocument.slice(
+	//       0,
+	//       formDataSick.leaveDocument[0].size
+	//     );
+	//     const newFile = new File(blob, nameFile.value, {
+	//       type: formDataSick.leaveDocument[0].type,
+	//     });
+	//     formData.append("leaveDocument", newFile);
+	//   }
 
-  formData.append("leaveDocument", formDataSick.leaveDocument);
-  formData.append("type", formDataSick.type);
-  formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate));
-  formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate));
-  formData.append("leaveWrote", formDataSick.leaveWrote);
-  formData.append("leaveAddress", formDataSick.leaveAddress);
-  formData.append("leaveNumber", formDataSick.leaveNumber);
-  formData.append("leaveDetail", formDataSick.leaveDetail);
-  await http
-    .post(config.API.leaveUser(), formData)
-    .then(() => {
-      success($q, "บันทึกสำเร็จ");
-      router.push(`/leave`);
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+	formData.append("leaveDocument", formDataSick.leaveDocument)
+	formData.append("type", formDataSick.type)
+	formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate))
+	formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate))
+	formData.append("leaveWrote", formDataSick.leaveWrote)
+	formData.append("leaveAddress", formDataSick.leaveAddress)
+	formData.append("leaveNumber", formDataSick.leaveNumber)
+	formData.append("leaveDetail", formDataSick.leaveDetail)
+	await http
+		.post(config.API.leaveUser(), formData)
+		.then(() => {
+			success($q, "บันทึกสำเร็จ")
+			router.push(`/leave`)
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
+		.finally(() => {
+			hideLoader()
+		})
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true);
+const isLeave = ref<boolean>(true)
 async function FetchCheck() {
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataSick.leaveStartDate ?? null,
-      EndLeaveDate: formDataSick.leaveEndDate ?? null,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      if (data.isLeave === true) {
-        formDataSick.leaveTotal =
-          data.totalDate - data.sumDateWork - data.sumDateHoliday;
-      } else {
-        fails($q, "ไม่สามารถลาได้");
-      }
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
+	await http
+		.post(config.API.leaveCheck(), {
+			type: dataStore.typeId ?? null,
+			StartLeaveDate: formDataSick.leaveStartDate ?? null,
+			EndLeaveDate: formDataSick.leaveEndDate ?? null,
+		})
+		.then((res: any) => {
+			const data = res.data.result
+			isLeave.value = data.isLeave
+			if (data.isLeave === true) {
+				formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+			} else {
+				fails($q, "ไม่สามารถลาได้")
+			}
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
 }
 
 /**
  * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
  */
 const isReadOnly = computed(() => {
-  const conditionHalfDay =
-    formDataSick.halfDay === "half_day_morning" ||
-    formDataSick.halfDay === "half_day_afternoon";
-  if (conditionHalfDay) {
-    formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null
-    formDataSick.leaveTotal = "0.5 วัน ";
-  } else {
-    formDataSick.leaveTotal = null;
-  }
-  return conditionHalfDay;
-});
+	const conditionHalfDay = formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon"
+	if (conditionHalfDay) {
+		formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null
+		formDataSick.leaveTotal = "0.5 วัน "
+	} else {
+		formDataSick.leaveTotal = null
+	}
+	return conditionHalfDay
+})
 </script>
 
 <!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
 <template>
-  <div style="display: flex; align-items: center">
-    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  </div>
-  <form @submit.prevent.stop="onValidate">
-    <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-sm-12"
-          ref="leaveWroteRef"
-          for="leaveWroteRef"
-          dense
-          hide-bottom-space
-          bg-color="white"
-          outlined
-          v-model="formDataSick.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit"
-          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-        />
+	<div style="display: flex; align-items: center">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	</div>
+	<form @submit.prevent.stop="onValidate">
+		<q-card bordered class="q-pa-md bg-grey-1">
+			<div class="col-12 row q-pa-sm q-col-gutter-sm">
+				<q-input
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
+					ref="leaveWroteRef"
+					for="leaveWroteRef"
+					dense
+					hide-bottom-space
+					bg-color="white"
+					outlined
+					v-model="formDataSick.leaveWrote"
+					label="เขียนที่"
+					:readonly="!edit"
+					:rules="[val => !!val || `${'เขียนที่'}`]"
+				/>
 
-        <div class="col-12 col-md-4 col-sm-12">
-          <q-radio
-            v-model="formDataSick.halfDay"
-            val="day"
-            label="ลาทั้งวัน"
-            checked-icon="task_alt"
-          />
-          <q-radio
-            v-model="formDataSick.halfDay"
-            val="half_day_morning"
-            label="ลาครึ่งวันเช้า"
-            checked-icon="task_alt"
-            @update:model-value="resetDate"
-          />
-          <q-radio
-            v-model="formDataSick.halfDay"
-            val="half_day_afternoon"
-            label="ลาครึ่งวันบ่าย"
-            checked-icon="task_alt"
-            @update:model-value="resetDate"
-          />
-        </div>
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
-              v-model="formDataSick.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  :readonly="!edit"
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataSick.leaveStartDate != null
-                      ? date2Thai(formDataSick.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'ลาตั้งแต่วันที่'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+				<div class="col-12 col-md-4 col-sm-12">
+					<q-radio v-model="formDataSick.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
+					<q-radio v-model="formDataSick.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
+					<q-radio v-model="formDataSick.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
+				</div>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<datepicker
+							class="col-12 col-md-3 col-sm-6"
+							menu-class-name="modalfix"
+							v-model="formDataSick.leaveStartDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+							:readonly="!edit"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									ref="leaveStartDateRef"
+									for="leaveStartDateRef"
+									hide-bottom-space
+									:readonly="!edit"
+									bg-color="white"
+									class="full-width datepicker cursor-pointer inputgreen"
+									:model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : null"
+									:label="`${'ลาตั้งแต่วันที่'}`"
+									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+									style="color: var(--q-primary)"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
 
-            <datepicker
-              class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
-              v-model="formDataSick.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="isReadOnly"
-              @update:model-value="FetchCheck()"
-              :min-date="
-                formDataSick.leaveStartDate
-                  ? new Date(
-                      formDataSick.leaveStartDate.getTime() * 60 * 60 * 1000
-                    )
-                  : null
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="isReadOnly"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataSick.leaveEndDate != null
-                      ? date2Thai(formDataSick.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'ลาถึงวันที่'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-input
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              bg-color="white"
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="formDataSick.leaveTotal"
-              label="จำนวนวันที่ลา"
-              readonly
-              hide-bottom-space
-            />
-            <q-input
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveLastRef"
-              for="leaveLastRef"
-              v-model="dataStore.leaveLast"
-              label="ลาครั้งสุดท้ายเมื่อวันที่"
-              readonly
-              hide-bottom-space
-              bg-color="white"
-            />
-          </div>
-        </div>
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <q-input
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveNumberRef"
-              for="leaveNumberRef"
-              v-model="formDataSick.leaveNumber"
-              mask="(###)-###-####"
-              hide-bottom-space
-              bg-color="white"
-              unmasked-value
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
+						<datepicker
+							class="col-12 col-md-3 col-sm-6"
+							menu-class-name="modalfix"
+							v-model="formDataSick.leaveEndDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+							:readonly="isReadOnly"
+							@update:model-value="FetchCheck()"
+							:min-date="formDataSick.leaveStartDate ? new Date(formDataSick.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									ref="leaveEndDateRef"
+									for="leaveEndDateRef"
+									hide-bottom-space
+									bg-color="white"
+									:readonly="isReadOnly"
+									class="full-width datepicker cursor-pointer inputgreen"
+									:model-value="formDataSick.leaveEndDate != null ? date2Thai(formDataSick.leaveEndDate) : null"
+									:label="`${'ลาถึงวันที่'}`"
+									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
+						<q-input
+							class="col-12 col-md-3 col-sm-6"
+							dense
+							bg-color="white"
+							outlined
+							ref="leaveTotalRef"
+							for="leaveTotalRef"
+							v-model="formDataSick.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							hide-bottom-space
+						/>
+						<q-input
+							class="col-12 col-md-3 col-sm-6"
+							dense
+							outlined
+							ref="leaveLastRef"
+							for="leaveLastRef"
+							v-model="dataStore.leaveLast"
+							label="ลาครั้งสุดท้ายเมื่อวันที่"
+							readonly
+							hide-bottom-space
+							bg-color="white"
+						/>
+					</div>
+				</div>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<q-input
+							class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+							dense
+							outlined
+							ref="leaveNumberRef"
+							for="leaveNumberRef"
+							v-model="formDataSick.leaveNumber"
+							mask="(###)-###-####"
+							hide-bottom-space
+							bg-color="white"
+							unmasked-value
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
 
-            <q-input
-              class="col-12 col-md-9 col-sm-6"
-              dense
-              outlined
-              ref="leaveAddressRef"
-              for="leaveAddressRef"
-              v-model="formDataSick.leaveAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-              ]"
-              hide-bottom-space
-              bg-color="white"
-            />
-          </div>
-        </div>
-        <q-input
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12"
-          dense
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataSick.leaveDetail"
-          label="รายละเอียด"
-          :readonly="!edit"
-          bg-color="white"
-        />
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <q-file
-              for="leaveDocumentRef"
-              v-model="formDataSick.leaveDocument"
-              dense
-              label="เอกสารประกอบ"
-              outlined
-              use-chips
-              bg-color="white"
-              class="col-12 q-pl-sm col-12"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
-          </div>
-        </div>
-        <div class="col-12 col-sm-6 row" v-if="!edit">
-          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-            <div class="q-pl-sm text-weight-bold text-dark">
-              เอกสารเพิ่มเติม
-            </div>
-          </div>
-          <q-card bordered flat class="full-width">
-            <q-list separator>
-              <q-item
-                v-for="(file, index) in formDataSick.leaveDocument"
-                :key="index"
-                class="q-my-xs"
-              >
-                <q-item-section>
-                  <q-item-label class="full-width ellipsis">
-                    {{ file.name }}
-                  </q-item-label>
-                  <q-item-label caption> </q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </div>
-    </q-card>
+						<q-input
+							class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
+							dense
+							outlined
+							ref="leaveAddressRef"
+							for="leaveAddressRef"
+							v-model="formDataSick.leaveAddress"
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+							hide-bottom-space
+							bg-color="white"
+						/>
+					</div>
+				</div>
+				<q-input
+					type="textarea"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+					dense
+					outlined
+					ref="leaveDetailRef"
+					for="leaveDetailRef"
+					v-model="formDataSick.leaveDetail"
+					label="รายละเอียด"
+					:readonly="!edit"
+					bg-color="white"
+				/>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<q-file for="leaveDocumentRef" v-model="formDataSick.leaveDocument" dense label="เอกสารประกอบ" outlined use-chips bg-color="white" class="col-12 q-pl-sm col-12">
+							<template v-slot:prepend>
+								<q-icon name="attach_file" color="primary" />
+							</template>
+						</q-file>
+					</div>
+				</div>
+				<div class="col-12 col-sm-6 row" v-if="!edit">
+					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+					</div>
+					<q-card bordered flat class="full-width">
+						<q-list separator>
+							<q-item v-for="(file, index) in formDataSick.leaveDocument" :key="index" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.name }}
+									</q-item-label>
+									<q-item-label caption> </q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-list>
+					</q-card>
+				</div>
+			</div>
+		</q-card>
 
-    <q-separator class="q-mt-sm" />
+		<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>
+		<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/components/Forms/03_Birth.vue b/src/modules/05_leave/components/Forms/03_Birth.vue
index 87d9f44..113c052 100644
--- a/src/modules/05_leave/components/Forms/03_Birth.vue
+++ b/src/modules/05_leave/components/Forms/03_Birth.vue
@@ -180,7 +180,7 @@ async function saveFormData() {
 		<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-sm-12 cursor-pointer inputgreen"
 					ref="leaveWroteRef"
 					for="leaveWroteRef"
 					dense
@@ -194,7 +194,7 @@ async function saveFormData() {
 				/>
 
 				<datepicker
-					class="col-12 col-md-3 col-sm-12"
+					class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					v-model="formDataBirth.leaveStartDate"
 					:locale="'th'"
@@ -233,7 +233,7 @@ async function saveFormData() {
 				</datepicker>
 
 				<datepicker
-					class="col-12 col-md-3 col-sm-12"
+					class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					v-model="formDataBirth.leaveEndDate"
 					:locale="'th'"
@@ -299,7 +299,7 @@ async function saveFormData() {
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<q-input
-							class="col-12 col-md-3 col-sm-12"
+							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
 							dense
 							outlined
 							hide-bottom-space
@@ -315,7 +315,7 @@ async function saveFormData() {
 						/>
 
 						<q-input
-							class="col-12 col-md-9 col-sm-12"
+							class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
 							dense
 							outlined
 							hide-bottom-space
@@ -331,7 +331,7 @@ async function saveFormData() {
 				</div>
 				<q-input
 					type="textarea"
-					class="col-12 col-md-12 col-sm-12"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
 					dense
 					outlined
 					bg-color="white"
diff --git a/src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue
index ff99117..610f312 100644
--- a/src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue
@@ -196,7 +196,7 @@ async function saveFormData() {
 		<q-card bordered class="q-pa-md bg-grey-1">
 			<div class="col-12 row q-pa-sm q-col-gutter-sm">
 				<q-input
-					class="col-12 col-12 col-sm-12"
+					class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
 					ref="leaveWroteRef"
 					for="leaveWroteRef"
 					dense
@@ -209,7 +209,7 @@ async function saveFormData() {
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 				<datepicker
-					class="col-12 col-md-4 col-sm-12"
+					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					v-model="formDataHelpWife.leaveStartDate"
 					:locale="'th'"
@@ -248,7 +248,7 @@ async function saveFormData() {
 				</datepicker>
 
 				<datepicker
-					class="col-12 col-md-4 col-sm-12"
+					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					v-model="formDataHelpWife.leaveEndDate"
 					:locale="'th'"
@@ -299,7 +299,7 @@ async function saveFormData() {
 					hide-bottom-space
 					bg-color="white"
 				/>
-				<div class="col-12 col-md-4 col-sm-12">
+				<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
 					<q-input
 						class="col-12 col-sm-12"
 						ref="wifeDayNameRef"
@@ -316,7 +316,7 @@ async function saveFormData() {
 				</div>
 
 				<datepicker
-					class="col-12 col-md-4 col-sm-12"
+					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					v-model="formDataHelpWife.wifeDayDateBorn"
 					:locale="'th'"
@@ -356,7 +356,7 @@ async function saveFormData() {
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<q-input
-							class="col-12 col-md-3 col-sm-12"
+							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
 							dense
 							outlined
 							ref="leaveNumberRef"
@@ -372,7 +372,7 @@ async function saveFormData() {
 						/>
 
 						<q-input
-							class="col-12 col-md-9 col-sm-12"
+							class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
 							dense
 							outlined
 							hide-bottom-space
@@ -390,7 +390,7 @@ async function saveFormData() {
 					hide-bottom-space
 					bg-color="white"
 					type="textarea"
-					class="col-12 col-md-12 col-sm-12"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
 					dense
 					outlined
 					ref="leaveDetailRef"
diff --git a/src/modules/05_leave/components/Forms/05_VacationForm.vue b/src/modules/05_leave/components/Forms/05_VacationForm.vue
index 6bbe8f5..609f8b5 100644
--- a/src/modules/05_leave/components/Forms/05_VacationForm.vue
+++ b/src/modules/05_leave/components/Forms/05_VacationForm.vue
@@ -213,7 +213,7 @@ const isReadOnly = computed(() => {
 		<q-card bordered class="q-pa-md bg-grey-1">
 			<div class="row q-pa-sm q-col-gutter-sm">
 				<q-input
-					class="col-12 col-sm-12"
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
 					ref="leaveWroteRef"
 					for="leaveWroteRef"
 					dense
@@ -257,7 +257,7 @@ const isReadOnly = computed(() => {
 				/>
 
 				<datepicker
-					class="col-12 col-md-3 col-sm-6"
+					class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					v-model="formDataVacation.leaveStartDate"
 					:locale="'th'"
@@ -296,7 +296,7 @@ const isReadOnly = computed(() => {
 				</datepicker>
 
 				<datepicker
-					class="col-12 col-md-3 col-sm-6"
+					class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					v-model="formDataVacation.leaveEndDate"
 					:locale="'th'"
@@ -350,7 +350,7 @@ const isReadOnly = computed(() => {
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<q-input
-							class="col-12 col-md-3 col-sm-12"
+							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
 							dense
 							outlined
 							hide-bottom-space
@@ -366,7 +366,7 @@ const isReadOnly = computed(() => {
 						/>
 
 						<q-input
-							class="col-12 col-md-9 col-sm-6"
+							class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
 							dense
 							outlined
 							hide-bottom-space
@@ -384,7 +384,7 @@ const isReadOnly = computed(() => {
 					type="textarea"
 					hide-bottom-space
 					bg-color="white"
-					class="col-12 col-md-12 col-sm-12"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
 					dense
 					outlined
 					ref="leaveDetailRef"
diff --git a/src/modules/05_leave/components/Forms/06_OrdinationForm.vue b/src/modules/05_leave/components/Forms/06_OrdinationForm.vue
index d763984..c43d969 100644
--- a/src/modules/05_leave/components/Forms/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/Forms/06_OrdinationForm.vue
@@ -210,7 +210,7 @@ function updateLeaveTotal() {
 			<div class="row q-pa-sm q-col-gutter-sm">
 				<q-input
 					ref="leaveWroteRef"
-					class="col-12 col-sm-12"
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
 					dense
 					outlined
 					bg-color="white"
@@ -221,7 +221,7 @@ function updateLeaveTotal() {
 				/>
 
 				<datepicker
-					class="col-12 col-md-4 col-sm-6"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					v-model="formDataOrdination.leaveStartDate"
 					:locale="'th'"
@@ -256,7 +256,7 @@ function updateLeaveTotal() {
 				</datepicker>
 
 				<datepicker
-					class="col-12 col-md-4 col-sm-6"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					v-model="formDataOrdination.leaveEndDate"
 					:locale="'th'"
@@ -391,7 +391,7 @@ function updateLeaveTotal() {
 
 				<div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
 				<datepicker
-					class="col-12 col-md-4 col-sm-6"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					v-model="formDataOrdination.ordainDayOrdination"
 					:locale="'th'"
@@ -428,7 +428,7 @@ function updateLeaveTotal() {
 				</datepicker>
 
 				<q-input
-					class="col-12 col-sm-6 col-md-4"
+					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 					dense
 					hide-bottom-space
 					ref="ordainDayLocationNameRef"
@@ -441,7 +441,7 @@ function updateLeaveTotal() {
 				/>
 
 				<q-input
-					class="col-12 col-sm-6 col-md-4"
+					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 					ref="ordainDayLocationNumberRef"
 					dense
 					full-width
@@ -455,7 +455,7 @@ function updateLeaveTotal() {
 					:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
 				/>
 				<q-input
-					class="col-12 col-md-12 col-sm-12"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
 					dense
 					ref="ordainDayLocationAddressRef"
 					bg-color="white"
@@ -469,7 +469,7 @@ function updateLeaveTotal() {
 
 				<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่จำพรรษา</div>
 				<q-input
-					class="col-12 col-sm-6 col-md-4"
+					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 					dense
 					ref="ordainDayBuddhistLentNameRef"
 					bg-color="white"
@@ -481,7 +481,7 @@ function updateLeaveTotal() {
 				/>
 
 				<q-input
-					class="col-12"
+					class="col-12 cursor-pointer inputgreen"
 					dense
 					ref="ordainDayBuddhistLentAddressRef"
 					bg-color="white"
@@ -494,7 +494,7 @@ function updateLeaveTotal() {
 				/>
 				<q-input
 					type="textarea"
-					class="col-12 col-md-12 col-sm-12"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
 					dense
 					bg-color="white"
 					outlined
diff --git a/src/modules/05_leave/components/Forms/07_HajjForm.vue b/src/modules/05_leave/components/Forms/07_HajjForm.vue
index 5e6b05b..6186f26 100644
--- a/src/modules/05_leave/components/Forms/07_HajjForm.vue
+++ b/src/modules/05_leave/components/Forms/07_HajjForm.vue
@@ -171,7 +171,7 @@ function updateLeaveTotal() {
 				<q-input
 					v-model="formDataHaji.leaveWrote"
 					ref="leaveWroteRef"
-					class="col-12 col-sm-12"
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
 					bg-color="white"
 					dense
 					outlined
@@ -184,7 +184,7 @@ function updateLeaveTotal() {
 					<div class="q-col-gutter-sm row">
 						<datepicker
 							v-model="formDataHaji.leaveStartDate"
-							class="col-12 col-md-4 col-sm-6"
+							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
 							menu-class-name="modalfix"
 							autoApply
 							borderless
@@ -219,7 +219,7 @@ function updateLeaveTotal() {
 
 						<datepicker
 							v-model="formDataHaji.leaveEndDate"
-							class="col-12 col-md-4 col-sm-6"
+							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
 							menu-class-name="modalfix"
 							autoApply
 							borderless
@@ -314,7 +314,7 @@ function updateLeaveTotal() {
 					<q-radio v-model="formDataHaji.hajjDayStatus" val="false" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจญ์" />
 				</div>
 
-				<q-input v-model="formDataHaji.leaveDetail" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
+				<q-input v-model="formDataHaji.leaveDetail" class="col-12 q-mt-sm cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
 
 				<div class="col-12 col-sm-6">
 					<q-file v-model="formDataHaji.leaveDocument" bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined multiple hide-bottom-space>
diff --git a/src/modules/05_leave/components/Forms/08_MilitaryForm.vue b/src/modules/05_leave/components/Forms/08_MilitaryForm.vue
index fee9550..e1b9bc6 100644
--- a/src/modules/05_leave/components/Forms/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/Forms/08_MilitaryForm.vue
@@ -185,7 +185,7 @@ function updateLeaveTotal() {
 			<div class="row q-pa-sm q-col-gutter-sm">
 				<q-input
 					ref="leaveWroteRef"
-					class="col-12 col-sm-12"
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
 					dense
 					outlined
 					bg-color="white"
@@ -196,7 +196,7 @@ function updateLeaveTotal() {
 				/>
 
 				<datepicker
-					class="col-12 col-md-4 col-sm-6"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					v-model="formDataMilitary.leaveStartDate"
 					:locale="'th'"
@@ -231,7 +231,7 @@ function updateLeaveTotal() {
 				</datepicker>
 
 				<datepicker
-					class="col-12 col-md-4 col-sm-6"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					v-model="formDataMilitary.leaveEndDate"
 					:locale="'th'"
@@ -285,7 +285,7 @@ function updateLeaveTotal() {
 					<div class="q-col-gutter-sm row">
 						<q-input
 							ref="absentDaySummonRef"
-							class="col-12 col-sm-6 col-md-4"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 							dense
 							bg-color="white"
 							outlined
@@ -297,7 +297,7 @@ function updateLeaveTotal() {
 
 						<q-input
 							ref="atRef"
-							class="col-12 col-sm-6 col-md-4"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 							dense
 							bg-color="white"
 							outlined
@@ -312,7 +312,7 @@ function updateLeaveTotal() {
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<datepicker
-							class="col-12 col-md-4 col-sm-6"
+							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
 							menu-class-name="modalfix"
 							v-model="formDataMilitary.absentDayRegistorDate"
 							:locale="'th'"
@@ -347,7 +347,7 @@ function updateLeaveTotal() {
 						</datepicker>
 
 						<q-input
-							class="col-12 col-sm-6 col-md-4"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 							dense
 							bg-color="white"
 							ref="absentDayGetInRef"
@@ -359,7 +359,7 @@ function updateLeaveTotal() {
 						/>
 
 						<q-input
-							class="col-12 col-sm-6 col-md-4"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 							dense
 							bg-color="white"
 							outlined
@@ -372,7 +372,7 @@ function updateLeaveTotal() {
 					</div>
 				</div>
 
-				<q-input class="col-12 col-md-12 col-sm-12" dense bg-color="white" outlined v-model="formDataMilitary.leaveDetail" type="textarea" label="รายละเอียด" />
+				<q-input class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" dense bg-color="white" outlined v-model="formDataMilitary.leaveDetail" type="textarea" label="รายละเอียด" />
 
 				<div class="col-12 col-sm-6">
 					<q-file v-model="formDataMilitary.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space use-chips @added="fileUploadDoc">
diff --git a/src/modules/05_leave/components/Forms/09_StudyForm.vue b/src/modules/05_leave/components/Forms/09_StudyForm.vue
index 35e346f..c5edbe6 100644
--- a/src/modules/05_leave/components/Forms/09_StudyForm.vue
+++ b/src/modules/05_leave/components/Forms/09_StudyForm.vue
@@ -207,7 +207,7 @@ const formattedleaveSalary = computed(() => {
 				<q-input
 					v-model="formDataStudy.leaveWrote"
 					ref="leaveWroteRef"
-					class="col-12 col-sm-12"
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
 					bg-color="white"
 					dense
 					outlined
@@ -218,7 +218,7 @@ const formattedleaveSalary = computed(() => {
 
 				<datepicker
 					v-model="formDataStudy.leaveStartDate"
-					class="col-12 col-md-4 col-sm-6"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					autoApply
 					borderless
@@ -254,7 +254,7 @@ const formattedleaveSalary = computed(() => {
 
 				<datepicker
 					v-model="formDataStudy.leaveEndDate"
-					class="col-12 col-md-4 col-sm-6"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					autoApply
 					borderless
@@ -403,7 +403,7 @@ const formattedleaveSalary = computed(() => {
 						<q-input
 							v-model="formDataStudy.studyDayUniversityName"
 							ref="studyDayUniversityNameRef"
-							class="col-12 col-sm-6 col-md-4"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 							bg-color="white"
 							dense
 							outlined
@@ -415,7 +415,7 @@ const formattedleaveSalary = computed(() => {
 						<q-input
 							v-model="formDataStudy.studyDayDegreeLevel"
 							ref="studyDayDegreeLevelRef"
-							class="col-12 col-sm-6 col-md-4"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 							bg-color="white"
 							dense
 							outlined
@@ -427,7 +427,7 @@ const formattedleaveSalary = computed(() => {
 						<q-input
 							v-model="formDataStudy.studyDaySubject"
 							ref="studyDaySubjectRef"
-							class="col-12 col-sm-6 col-md-4"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 							bg-color="white"
 							dense
 							outlined
@@ -439,7 +439,7 @@ const formattedleaveSalary = computed(() => {
 						<q-input
 							v-model="formDataStudy.studyDayCountry"
 							ref="studyDayCountryRef"
-							class="col-12 col-sm-6 col-md-4"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 							bg-color="white"
 							dense
 							outlined
@@ -451,7 +451,7 @@ const formattedleaveSalary = computed(() => {
 						<q-input
 							v-model="formDataStudy.studyDayScholarship"
 							ref="studyDayScholarshipRef"
-							class="col-12 col-sm-6 col-md-4"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 							bg-color="white"
 							dense
 							outlined
@@ -463,7 +463,7 @@ const formattedleaveSalary = computed(() => {
 						<q-input
 							v-model="formDataStudy.leaveNumber"
 							ref="leaveNumberRef"
-							class="col-12 col-sm-6 col-md-4"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 							bg-color="white"
 							dense
 							outlined
@@ -477,7 +477,7 @@ const formattedleaveSalary = computed(() => {
 						<q-input
 							v-model="formDataStudy.leaveAddress"
 							ref="leaveAddressRef"
-							class="col-12"
+							class="col-12 cursor-pointer inputgreen"
 							bg-color="white"
 							dense
 							outlined
@@ -488,7 +488,7 @@ const formattedleaveSalary = computed(() => {
 					</div>
 				</div>
 
-				<q-input v-model="formDataStudy.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
+				<q-input v-model="formDataStudy.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
 
 				<div class="col-12 col-sm-6">
 					<q-file v-model="formDataStudy.leaveDocument" bg-color="white" dense outlined multiple use-chips @added="fileUploadDoc" label="เอกสารประกอบ">
diff --git a/src/modules/05_leave/components/Forms/10_TrainForm.vue b/src/modules/05_leave/components/Forms/10_TrainForm.vue
index 960f79e..bf133e9 100644
--- a/src/modules/05_leave/components/Forms/10_TrainForm.vue
+++ b/src/modules/05_leave/components/Forms/10_TrainForm.vue
@@ -208,7 +208,7 @@ const formattedSalary = computed(() => {
 				<q-input
 					v-model="formDataTrain.leaveWrote"
 					ref="leaveWroteRef"
-					class="col-12 col-sm-12"
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
 					bg-color="white"
 					dense
 					outlined
@@ -219,7 +219,7 @@ const formattedSalary = computed(() => {
 
 				<datepicker
 					v-model="formDataTrain.leaveStartDate"
-					class="col-12 col-md-4 col-sm-6"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					autoApply
 					borderless
@@ -255,7 +255,7 @@ const formattedSalary = computed(() => {
 
 				<datepicker
 					v-model="formDataTrain.leaveEndDate"
-					class="col-12 col-md-4 col-sm-6"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					autoApply
 					borderless
@@ -392,7 +392,7 @@ const formattedSalary = computed(() => {
 					<div class="q-col-gutter-sm row">
 						<q-input
 							v-model="formDataTrain.studyDayTrainingSubject"
-							class="col-12 col-sm-6 col-md-4"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 							ref="studyDayTrainingSubjectRef"
 							bg-color="white"
 							dense
@@ -405,7 +405,7 @@ const formattedSalary = computed(() => {
 						<q-input
 							v-model="formDataTrain.studyDayTrainingName"
 							ref="studyDayTrainingNameRef"
-							class="col-12 col-sm-6 col-md-4"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 							bg-color="white"
 							dense
 							outlined
@@ -417,7 +417,7 @@ const formattedSalary = computed(() => {
 						<q-input
 							v-model="formDataTrain.studyDayCountry"
 							ref="studyDayCountryRef"
-							class="col-12 col-sm-6 col-md-4"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 							dense
 							bg-color="white"
 							outlined
@@ -429,7 +429,7 @@ const formattedSalary = computed(() => {
 						<q-input
 							v-model="formDataTrain.studyDayScholarship"
 							ref="studyDayScholarshipRef"
-							class="col-12 col-sm-6 col-md-4"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 							bg-color="white"
 							dense
 							outlined
@@ -440,7 +440,7 @@ const formattedSalary = computed(() => {
 
 						<q-input
 							v-model="formDataTrain.leaveNumber"
-							class="col-12 col-sm-6 col-md-4"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
 							ref="leaveNumberRef"
 							dense
 							outlined
@@ -455,7 +455,7 @@ const formattedSalary = computed(() => {
 						<q-input
 							v-model="formDataTrain.leaveAddress"
 							ref="leaveAddressRef"
-							class="col-12"
+							class="col-12 cursor-pointer inputgreen"
 							bg-color="white"
 							dense
 							outlined
@@ -466,7 +466,7 @@ const formattedSalary = computed(() => {
 					</div>
 				</div>
 
-				<q-input v-model="formDataTrain.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
+				<q-input v-model="formDataTrain.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
 
 				<div class="col-12 col-sm-6">
 					<q-file v-model="formDataTrain.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
diff --git a/src/modules/05_leave/components/Forms/11_WorkInternationalForm.vue b/src/modules/05_leave/components/Forms/11_WorkInternationalForm.vue
index 1656d4b..d28cc6d 100644
--- a/src/modules/05_leave/components/Forms/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/Forms/11_WorkInternationalForm.vue
@@ -183,7 +183,7 @@ async function saveFormData() {
 		<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-sm-12 cursor-pointer inputgreen"
 					ref="leaveWroteRef"
 					hide-bottom-space
 					bg-color="white"
@@ -197,7 +197,7 @@ async function saveFormData() {
 				/>
 
 				<datepicker
-					class="col-12 col-md-6 col-sm-6"
+					class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					v-model="formDataWorkInternational.leaveStartDate"
 					:locale="'th'"
@@ -236,7 +236,7 @@ async function saveFormData() {
 				</datepicker>
 
 				<datepicker
-					class="col-12 col-md-6 col-sm-6"
+					class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					v-model="formDataWorkInternational.leaveEndDate"
 					:locale="'th'"
@@ -291,7 +291,7 @@ async function saveFormData() {
 				<q-input
 					hide-bottom-space
 					type="textarea"
-					class="col-12 col-md-12 col-sm-12"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
 					dense
 					bg-color="white"
 					outlined
diff --git a/src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue
index 8114776..d8b7b16 100644
--- a/src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue
@@ -225,7 +225,7 @@ function updateLeaveTotal() {
 		<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-sm-12 cursor-pointer inputgreen"
 					ref="leaveWroteRef"
 					for="leaveWroteRef"
 					dense
@@ -238,7 +238,7 @@ function updateLeaveTotal() {
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 				<datepicker
-					class="col-12 col-md-4 col-sm-12"
+					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					v-model="formDataFollowSpouse.leaveStartDate"
 					:locale="'th'"
@@ -277,7 +277,7 @@ function updateLeaveTotal() {
 				</datepicker>
 
 				<datepicker
-					class="col-12 col-md-4 col-sm-12"
+					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					v-model="formDataFollowSpouse.leaveEndDate"
 					:locale="'th'"
@@ -359,7 +359,7 @@ function updateLeaveTotal() {
 
 				<div class="col-md-3 col-sm-12">
 					<q-input
-						class="col-12 col-sm-12"
+						class="col-12 col-sm-12 cursor-pointer inputgreen"
 						hide-bottom-space
 						ref="coupleDayNameRef"
 						for="coupleDayNameRef"
@@ -374,7 +374,7 @@ function updateLeaveTotal() {
 				</div>
 				<div class="col-md-3 col-sm-12">
 					<q-input
-						class="col-12 col-sm-12"
+						class="col-12 col-sm-12 cursor-pointer inputgreen"
 						hide-bottom-space
 						ref="coupleDayPositionRef"
 						for="coupleDayPositionRef"
@@ -389,7 +389,7 @@ function updateLeaveTotal() {
 				</div>
 				<div class="col-md-3 col-sm-12">
 					<q-input
-						class="col-12 col-sm-12"
+						class="col-12 col-sm-12 cursor-pointer inputgreen"
 						ref="coupleDayLevelRef"
 						for="coupleDayLevelRef"
 						dense
@@ -404,7 +404,7 @@ function updateLeaveTotal() {
 				</div>
 				<div class="col-md-3 col-sm-12">
 					<q-input
-						class="col-12 col-sm-12"
+						class="col-12 col-sm-12 cursor-pointer inputgreen"
 						ref="coupleDayLevelCountryRef"
 						for="coupleDayLevelCountryRef"
 						hide-bottom-space
@@ -523,7 +523,7 @@ function updateLeaveTotal() {
 				<q-input
 					hide-bottom-space
 					type="textarea"
-					class="col-12 col-md-12 col-sm-12"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
 					dense
 					bg-color="white"
 					outlined
diff --git a/src/modules/05_leave/components/Forms/13_RehabilitationForm.vue b/src/modules/05_leave/components/Forms/13_RehabilitationForm.vue
index 1c91e5c..36bdff2 100644
--- a/src/modules/05_leave/components/Forms/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/Forms/13_RehabilitationForm.vue
@@ -166,7 +166,7 @@ async function saveFormData() {
 			<div class="row q-pa-sm q-col-gutter-sm">
 				<q-input
 					v-model="formDataRehabilitation.leaveWrote"
-					class="col-12 col-sm-12"
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
 					ref="leaveWroteRef"
 					dense
 					outlined
@@ -178,7 +178,7 @@ async function saveFormData() {
 
 				<datepicker
 					v-model="formDataRehabilitation.leaveStartDate"
-					class="col-12 col-md-4 col-sm-6"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					autoApply
 					borderless
@@ -214,7 +214,7 @@ async function saveFormData() {
 
 				<datepicker
 					v-model="formDataRehabilitation.leaveEndDate"
-					class="col-12 col-md-4 col-sm-6"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
 					menu-class-name="modalfix"
 					autoApply
 					borderless
@@ -252,7 +252,7 @@ async function saveFormData() {
 					</template>
 				</datepicker>
 
-				<q-input v-model="formDataRehabilitation.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
+				<q-input v-model="formDataRehabilitation.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
 
 				<div class="col-12 col-sm-6">
 					<q-file v-model="formDataRehabilitation.leaveDocument" @added="fileUploadDoc" use-chips bg-color="white" dense outlined multiple label="เอกสารประกอบ">
diff --git a/src/modules/05_leave/components/Forms/Form.vue b/src/modules/05_leave/components/Forms/Form.vue
index 5c3eb54..26ae13a 100644
--- a/src/modules/05_leave/components/Forms/Form.vue
+++ b/src/modules/05_leave/components/Forms/Form.vue
@@ -63,6 +63,7 @@ onMounted(async () => {
 						:model-value="dataStore.dateSendLeave != null ? date2Thai(dataStore.dateSendLeave) : null"
 						:label="`${'วันที่ยื่นใบลา'}`"
 						:rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
+						style="color: black"
 					>
 						<template v-slot:prepend>
 							<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>