From 84738fbfd823b4be01e322cb7f5ca7966a3368f7 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 28 Apr 2025 17:50:02 +0700
Subject: [PATCH] updated all form leave

---
 .../components/FormLeave/01_SickForm.vue      | 540 ++++++-----
 .../components/FormLeave/03_Birth.vue         | 527 ++++++-----
 .../FormLeave/04_HelpWifeBirthForm.vue        | 605 ++++++------
 .../components/FormLeave/05_VacationForm.vue  | 541 +++++------
 .../FormLeave/06_OrdinationForm.vue           | 870 +++++++++---------
 .../components/FormLeave/07_HajjForm.vue      | 102 +-
 .../components/FormLeave/08_MilitaryForm.vue  | 441 ++++-----
 .../components/FormLeave/09_StudyForm.vue     | 798 ++++++++--------
 .../components/FormLeave/10_TrainForm.vue     | 715 +++++++-------
 .../FormLeave/11_WorkInternationalForm.vue    | 408 ++++----
 .../FormLeave/12_FollowSpouseForm.vue         | 380 ++++----
 .../FormLeave/13_RehabilitationForm.vue       | 398 ++++----
 .../05_leave/components/FormLeave/Form.vue    |   3 +-
 .../05_leave/interface/request/AddAbsence.ts  |   2 +-
 src/modules/05_leave/store.ts                 |   5 +
 src/modules/05_leave/views/AddPage.vue        |   4 +-
 src/modules/05_leave/views/EditPage.vue       |   4 +-
 17 files changed, 3248 insertions(+), 3095 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index 6cf443d..21eecf0 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -196,33 +196,6 @@ async function fetchCheck() {
     });
 }
 
-/**
- * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
- */
-const isReadOnly = computed(() => {
-  const conditionleaveRange =
-    formDataSick.leaveRange === "MORNING" ||
-    formDataSick.leaveRange === "AFTERNOON";
-  if (conditionleaveRange) {
-    formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null
-    formDataSick.leaveTotal = 0.5;
-  } else {
-    formDataSick.leaveTotal = null;
-  }
-  return conditionleaveRange;
-});
-
-/**
- * แก้ไขClassเมื่อ status เป็น edit
- * @param val status edit true/false
- */
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
 const dateEndInputStyle = computed(() => {
   return !isLeave.value ? "input-alert" : "";
@@ -273,274 +246,297 @@ onMounted(() => {
   </div>
   <q-form greedy @submit.prevent @validation-success="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 || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+      <div class="row q-col-gutter-sm">
+        <div class="col-12 col-sm-12 inputgreen">
+          <q-input
+            ref="leaveWroteRef"
+            for="leaveWroteRef"
+            dense
+            hide-bottom-space
+            bg-color="white"
+            outlined
+            v-model="formDataSick.leaveWrote"
+            label="เขียนที่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
+        </div>
+
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataSick.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataSick.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataSick.leaveStartDate != null
-                      ? date2Thai(formDataSick.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!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-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataSick.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataSick.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataSick.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataSick.leaveStartDate != null
+                        ? date2Thai(formDataSick.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!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>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataSick.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
           </div>
         </div>
+
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataSick.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataSick.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataSick.leaveEndDate != null
-                      ? date2Thai(formDataSick.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!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-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataSick.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="formDataSick.leaveTotal"
-              label="จำนวนวันที่ลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
-            <q-input
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveLastRef"
-              for="leaveLastRef"
-              v-model="dataStore.leaveLast"
-              label="ลาครั้งสุดท้ายเมื่อวันที่"
-              readonly
-              hide-bottom-space
-              bg-color="white"
-            />
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataSick.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataSick.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataSick.leaveEndDate != null
+                        ? date2Thai(formDataSick.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!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>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataSick.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="formDataSick.leaveTotal"
+                label="จำนวนวันที่ลา (วัน)"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                dense
+                outlined
+                ref="leaveLastRef"
+                for="leaveLastRef"
+                v-model="dataStore.leaveLast"
+                label="ลาครั้งสุดท้ายเมื่อวันที่"
+                readonly
+                hide-bottom-space
+                bg-color="white"
+              />
+            </div>
           </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="dataStore.telephoneNumber"
-              mask="(###)-###-####"
-              hide-bottom-space
-              bg-color="white"
-              lazy-rules
-              unmasked-value
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+            <div class="col-12 col-md-3 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                ref="leaveNumberRef"
+                for="leaveNumberRef"
+                v-model="dataStore.telephoneNumber"
+                mask="(###)-###-####"
+                hide-bottom-space
+                bg-color="white"
+                lazy-rules
+                unmasked-value
+                label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
               ]"
-            />
+              />
+            </div>
 
-            <q-input
-              class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
-              dense
-              outlined
-              ref="leaveAddressRef"
-              for="leaveAddressRef"
-              v-model="dataStore.currentAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+            <div class="col-12 col-md-9 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                ref="leaveAddressRef"
+                for="leaveAddressRef"
+                v-model="dataStore.currentAddress"
+                label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
               ]"
-              hide-bottom-space
-              bg-color="white"
-            />
+                hide-bottom-space
+                bg-color="white"
+              />
+            </div>
           </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 || statusCheck === 'NEW'"
-          bg-color="white"
-        />
+
+        <div class="col-12 inputgreen">
+          <q-input
+            type="textarea"
+            dense
+            outlined
+            ref="leaveDetailRef"
+            for="leaveDetailRef"
+            v-model="formDataSick.leaveDetail"
+            label="สาเหตุการลา"
+            :readonly="!edit || statusCheck === 'NEW'"
+            bg-color="white"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <!-- multiple -->
-            <q-file
-              ref="leaveDocumentRef"
-              for="leaveDocumentRef"
-              v-model="formDataSick.leaveDocument"
-              dense
-              label="เอกสารประกอบ"
-              outlined
-              use-chips
-              lazy-rules
-              multiple
-              hide-bottom-space
-              bg-color="white"
-              class="col-12 q-pl-sm col-12"
-              :rules="typeForm == 'LV-001' && formDataSick.leaveTotal >= 30 ?[
+            <div class="col-12 q-pl-sm col-12">
+              <q-file
+                ref="leaveDocumentRef"
+                for="leaveDocumentRef"
+                v-model="formDataSick.leaveDocument"
+                dense
+                label="เอกสารประกอบ"
+                outlined
+                use-chips
+                lazy-rules
+                multiple
+                hide-bottom-space
+                bg-color="white"
+                :rules="typeForm == 'LV-001' && formDataSick.leaveTotal >= 30 ?[
                 (val:string) => !!val && val.length >= 30 || `${'กรุณาแนบเอกสารประกอบ หรือ ใบรับรองแพทย์ กรณีลาป่วยตั้งเเต่ 30 วันขึ้นไป'}`,
               ]:[]"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
           </div>
         </div>
         <div class="col-12" v-if="data">
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index f9c41c4..d851308 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -13,7 +13,14 @@ import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError, convertDateToAPI,showLoader,hideLoader } = mixin;
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
+} = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
@@ -143,17 +150,19 @@ const checkDate = computed(() => {
  * @param formData
  */
 async function fetchCheck() {
-  showLoader()
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataBirth.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataBirth.leaveEndDate) ?? null,
       leaveRange: formDataBirth.leaveRange,
-      leaveRangeEnd: checkDate.value ? formDataBirth.leaveRange : formDataBirth.leaveRangeEnd
+      leaveRangeEnd: checkDate.value
+        ? formDataBirth.leaveRange
+        : formDataBirth.leaveRangeEnd,
     })
     .then((res: any) => {
-      hideLoader()
+      hideLoader();
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataBirth.leaveTotal = data.totalDate;
@@ -162,7 +171,7 @@ async function fetchCheck() {
         : "จำนวนวันลาเกินที่กำหนด";
     })
     .catch((e: any) => {
-      hideLoader()
+      hideLoader();
       messageError($q, e);
     });
 }
@@ -214,271 +223,293 @@ onMounted(() => {
   </div>
   <form @submit.prevent.stop="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          for="leaveWroteRef"
-          dense
-          outlined
-          v-model="formDataBirth.leaveWrote"
-          label="เขียนที่"
-          hide-bottom-space
-          bg-color="white"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+      <div class="col-12 row q-col-gutter-sm">
+        <div class="col-12 inputgreen">
+          <q-input
+            ref="leaveWroteRef"
+            for="leaveWroteRef"
+            dense
+            outlined
+            v-model="formDataBirth.leaveWrote"
+            label="เขียนที่"
+            hide-bottom-space
+            bg-color="white"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
+        </div>
 
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataBirth.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataBirth.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataBirth.leaveStartDate != null
-                      ? date2Thai(formDataBirth.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!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-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataBirth.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataBirth.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataBirth.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataBirth.leaveStartDate != null
+                        ? date2Thai(formDataBirth.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!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>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataBirth.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
           </div>
         </div>
+
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataBirth.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataBirth.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataBirth.leaveEndDate != null
-                      ? date2Thai(formDataBirth.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!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-select
-            v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataBirth.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="formDataBirth.leaveTotal"
-              label="จำนวนวันที่ลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
-            <q-input
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveLastRef"
-              for="leaveLastRef"
-              v-model="dataStore.leaveLast"
-              label="ลาครั้งสุดท้ายเมื่อวันที่"
-              readonly
-              hide-bottom-space
-              bg-color="white"
-            />
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataBirth.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataBirth.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataBirth.leaveEndDate != null
+                        ? date2Thai(formDataBirth.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!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>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataBirth.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="formDataBirth.leaveTotal"
+                label="จำนวนวันที่ลา (วัน)"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                dense
+                outlined
+                ref="leaveLastRef"
+                for="leaveLastRef"
+                v-model="dataStore.leaveLast"
+                label="ลาครั้งสุดท้ายเมื่อวันที่"
+                readonly
+                hide-bottom-space
+                bg-color="white"
+              />
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveNumberRef"
-              for="leaveNumberRef"
-              v-model="dataStore.telephoneNumber"
-              mask="(###)-###-####"
-              unmasked-value
-              lazy-rules
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+            <div class="col-12 col-md-3 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                bg-color="white"
+                ref="leaveNumberRef"
+                for="leaveNumberRef"
+                v-model="dataStore.telephoneNumber"
+                mask="(###)-###-####"
+                unmasked-value
+                lazy-rules
+                label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
               ]"
-            />
+              />
+            </div>
 
-            <q-input
-              class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveAddressRef"
-              for="leaveAddressRef"
-              v-model="dataStore.currentAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+            <div class="col-12 col-md-9 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                bg-color="white"
+                ref="leaveAddressRef"
+                for="leaveAddressRef"
+                v-model="dataStore.currentAddress"
+                label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
               ]"
-            />
+              />
+            </div>
           </div>
         </div>
-        <q-input
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          bg-color="white"
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataBirth.leaveDetail"
-          label="สาเหตุการลา"
-          :readonly="!edit || statusCheck === 'NEW'"
-        />
+
+        <div class="col-12 inputgreen">
+          <q-input
+            type="textarea"
+            dense
+            outlined
+            bg-color="white"
+            ref="leaveDetailRef"
+            for="leaveDetailRef"
+            v-model="formDataBirth.leaveDetail"
+            label="สาเหตุการลา"
+            :readonly="!edit || statusCheck === 'NEW'"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <!-- multiple -->
-            <q-file
-              for="leaveDocumentRef"
-              hide-bottom-space
-              v-model="formDataBirth.leaveDocument"
-              @added="fileUploadDoc"
-              dense
-              bg-color="white"
-              label="เอกสารประกอบ"
-              outlined
-              multiple
-              use-chips
-              class="q-pl-sm col-12"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
+            <div class="q-pl-sm col-12">
+              <q-file
+                for="leaveDocumentRef"
+                hide-bottom-space
+                v-model="formDataBirth.leaveDocument"
+                @added="fileUploadDoc"
+                dense
+                bg-color="white"
+                label="เอกสารประกอบ"
+                outlined
+                multiple
+                use-chips
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
           </div>
         </div>
         <div class="col-12 row" v-if="data">
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index ee44839..590f2ea 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -182,10 +182,6 @@ async function fetchCheck() {
       isLeave.value = data.isLeave;
       formDataHelpWife.leaveTotal =
         data.totalDate - data.sumDateWork - data.sumDateHoliday;
-      leaveText.value = calculateDurationYmd(
-        formDataHelpWife.leaveStartDate,
-        formDataHelpWife.leaveEndDate
-      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
@@ -210,11 +206,6 @@ watch(props.data, async () => {
     formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd;
     formDataHelpWife.leaveRange = props.data.leaveRange;
     formDataHelpWife.leaveDetail = props.data.leaveDetail;
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
     formDataHelpWife.leaveDocument = [];
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
@@ -234,12 +225,6 @@ onMounted(async () => {
     leaveDocumentList.value = props.data.leaveDocument;
     formDataHelpWife.leaveRange = props.data.leaveRange;
     formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd;
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
-
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
   }
@@ -254,188 +239,204 @@ onMounted(async () => {
   <form @submit.prevent.stop="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          for="leaveWroteRef"
-          dense
-          outlined
-          hide-bottom-space
-          bg-color="white"
-          v-model="formDataHelpWife.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
-        <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataHelpWife.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataHelpWife.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataHelpWife.leaveStartDate != null
-                      ? date2Thai(formDataHelpWife.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!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-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataHelpWife.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
-        </div>
-        <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataHelpWife.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataHelpWife.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataHelpWife.leaveEndDate != null
-                      ? date2Thai(formDataHelpWife.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!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-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataHelpWife.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
-        </div>
-        <div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
+        <div class="col-12 inputgreen">
           <q-input
-            :bottom-slots="!isLeave ? true : false"
-            :color="!isLeave ? 'red' : 'black'"
-            :bg-color="!isLeave ? 'red-2' : 'white'"
-            :border-color="!isLeave ? 'red' : 'gray'"
-            :input-class="!isLeave ? dateEndInputStyle : ''"
+            ref="leaveWroteRef"
+            for="leaveWroteRef"
             dense
             outlined
-            ref="leaveTotalRef"
-            for="leaveTotalRef"
-            v-model="leaveText"
-            label="จำนวนวันที่ลา"
-            readonly
-          >
-            <template v-slot:hint>
-              <span style="color: red">
-                {{ !isLeave ? reasonLeave : "" }}
-              </span>
-            </template>
-          </q-input>
+            hide-bottom-space
+            bg-color="white"
+            v-model="formDataHelpWife.leaveWrote"
+            label="เขียนที่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
         </div>
-        <div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataHelpWife.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataHelpWife.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataHelpWife.leaveStartDate != null
+                        ? date2Thai(formDataHelpWife.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!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>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataHelpWife.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataHelpWife.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataHelpWife.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataHelpWife.leaveEndDate != null
+                        ? date2Thai(formDataHelpWife.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!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>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataHelpWife.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                class="col-12 col-md-3 col-sm-6"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="formDataHelpWife.leaveTotal"
+                label="จำนวนวันที่ลา (วัน)"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 col-md-8 col-sm-12 inputgreen">
           <q-input
             class="col-12 col-sm-12"
             ref="wifeDayNameRef"
@@ -451,122 +452,130 @@ onMounted(async () => {
           />
         </div>
 
-        <datepicker
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataHelpWife.wifeDayDateBorn"
-          :locale="'th'"
-          autoApply
-          borderless
-          hide-bottom-space
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit || statusCheck === 'NEW'"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="wifeDayDateBornRef"
-              for="wifeDayDateBornRef"
-              hide-bottom-space
-              bg-color="white"
-              :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
-              :model-value="
-                formDataHelpWife.wifeDayDateBorn != null
-                  ? date2Thai(formDataHelpWife.wifeDayDateBorn)
-                  : null
-              "
-              :label="`${'วันที่คลอด'}`"
-              :rules="[(val:string) => !!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 inputgreen">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="formDataHelpWife.wifeDayDateBorn"
+            :locale="'th'"
+            autoApply
+            borderless
+            hide-bottom-space
+            :enableTimePicker="false"
+            week-start="0"
+            :readonly="!edit || statusCheck === 'NEW'"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                ref="wifeDayDateBornRef"
+                for="wifeDayDateBornRef"
+                hide-bottom-space
+                bg-color="white"
+                :readonly="!edit || statusCheck === 'NEW'"
+                class="full-width datepicker"
+                :model-value="
+                  formDataHelpWife.wifeDayDateBorn != null
+                    ? date2Thai(formDataHelpWife.wifeDayDateBorn)
+                    : null
+                "
+                :label="`${'วันที่คลอด'}`"
+                :rules="[(val:string) => !!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>
+
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              ref="leaveNumberRef"
-              for="leaveNumberRef"
-              v-model="dataStore.telephoneNumber"
-              mask="(###)-###-####"
-              unmasked-value
-              hide-bottom-space
-              lazy-rules
-              bg-color="white"
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+            <div class="col-12 col-md-3 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                ref="leaveNumberRef"
+                for="leaveNumberRef"
+                v-model="dataStore.telephoneNumber"
+                mask="(###)-###-####"
+                unmasked-value
+                hide-bottom-space
+                lazy-rules
+                bg-color="white"
+                label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
               ]"
-            />
+              />
+            </div>
 
-            <q-input
-              class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveAddressRef"
-              for="leaveAddressRef"
-              v-model="dataStore.currentAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+            <div class="col-12 col-md-9 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                bg-color="white"
+                ref="leaveAddressRef"
+                for="leaveAddressRef"
+                v-model="dataStore.currentAddress"
+                label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
               ]"
-            />
+              />
+            </div>
           </div>
         </div>
-        <q-input
-          hide-bottom-space
-          bg-color="white"
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataHelpWife.leaveDetail"
-          label="สาเหตุการลา"
-          :readonly="!edit || statusCheck === 'NEW'"
-        />
+
+        <div class="col-12 inputgreen">
+          <q-input
+            hide-bottom-space
+            bg-color="white"
+            type="textarea"
+            dense
+            outlined
+            ref="leaveDetailRef"
+            for="leaveDetailRef"
+            v-model="formDataHelpWife.leaveDetail"
+            label="สาเหตุการลา"
+            :readonly="!edit || statusCheck === 'NEW'"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
-            <q-file
-              bg-color="white"
-              ref="leaveDocumentRef"
-              v-model="formDataHelpWife.leaveDocument"
-              @added="fileUploadDoc"
-              dense
-              label="เอกสารประกอบ"
-              outlined
-              use-chips
-              class="q-pl-sm col-12"
-              multiple
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
+            <div class="q-pl-sm col-12">
+              <q-file
+                bg-color="white"
+                ref="leaveDocumentRef"
+                v-model="formDataHelpWife.leaveDocument"
+                @added="fileUploadDoc"
+                dense
+                label="เอกสารประกอบ"
+                outlined
+                use-chips
+                multiple
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
           </div>
         </div>
         <div class="col-12" v-if="data">
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 47b0ebc..2c6730d 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -102,20 +101,6 @@ const fileUploadDoc = async (files: any) => {
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<string>("");
 
-/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
-const isReadOnly = computed(() => {
-  const conditionleaveRange =
-    formDataVacation.leaveRange === "MORNING" ||
-    formDataVacation.leaveRange === "AFTERNOON";
-  if (conditionleaveRange) {
-    formDataVacation.leaveEndDate = formDataVacation.leaveStartDate; // Set formDataVacation.leaveEndDate to null
-    formDataVacation.leaveTotal = 0.5;
-  } else {
-    formDataVacation.leaveTotal = null;
-  }
-  return conditionleaveRange;
-});
-
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
 const dateEndInputStyle = computed(() => {
   return !isLeave.value ? "input-alert" : "";
@@ -267,184 +252,171 @@ onMounted(() => {
   <form @submit.prevent.stop="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          for="leaveWroteRef"
-          dense
-          hide-bottom-space
-          bg-color="white"
-          outlined
-          v-model="formDataVacation.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'กรุณากรอกเขียนที่'}`]"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            ref="leaveWroteRef"
+            for="leaveWroteRef"
+            dense
+            hide-bottom-space
+            bg-color="white"
+            outlined
+            v-model="formDataVacation.leaveWrote"
+            label="เขียนที่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกเขียนที่'}`]"
+          />
+        </div>
+
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataVacation.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataVacation.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataVacation.leaveStartDate != null
-                      ? date2Thai(formDataVacation.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!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-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataVacation.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataVacation.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataVacation.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataVacation.leaveStartDate != null
+                        ? date2Thai(formDataVacation.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!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>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataVacation.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
           </div>
         </div>
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataVacation.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataVacation.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataVacation.leaveEndDate != null
-                      ? date2Thai(formDataVacation.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!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-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataVacation.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:DataOption)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-2 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="formDataVacation.leaveTotal"
-              label="จำนวนวันที่ลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataVacation.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataVacation.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataVacation.leaveEndDate != null
+                        ? date2Thai(formDataVacation.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!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>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataVacation.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:DataOption)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
           </div>
         </div>
 
@@ -470,102 +442,133 @@ onMounted(() => {
             @update:model-value="resetDate"
           />
         </div> -->
-        <q-input
-          class="col-12 col-md-4 col-sm-6"
-          ref="restDayOldTotalRef"
-          for="restDayOldTotalRef"
-          dense
-          hide-bottom-space
-          bg-color="white"
-          readonly
-          outlined
-          v-model="dataStore.restDayTotalOld"
-          label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
-        />
+        <div class="col-12 col-md-3 col-sm-6">
+          <q-input
+            :bottom-slots="!isLeave ? true : false"
+            :color="!isLeave ? 'red' : 'black'"
+            :bg-color="!isLeave ? 'red-2' : 'white'"
+            :border-color="!isLeave ? 'red' : 'gray'"
+            :input-class="!isLeave ? dateEndInputStyle : ''"
+            dense
+            outlined
+            ref="leaveTotalRef"
+            for="leaveTotalRef"
+            v-model="formDataVacation.leaveTotal"
+            label="จำนวนวันที่ลา (วัน)"
+            readonly
+          >
+            <template v-slot:hint>
+              <span style="color: red">
+                {{ !isLeave ? reasonLeave : "" }}
+              </span>
+            </template>
+          </q-input>
+        </div>
 
-        <q-input
-          class="col-12 col-md-4 col-sm-6"
-          ref="restDayCurrentTotalRef"
-          for="restDayCurrentTotalRef"
-          dense
-          readonly
-          hide-bottom-space
-          bg-color="white"
-          outlined
-          v-model="dataStore.restDayCurrentTotal"
-          label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
-        />
+        <div class="col-12 col-md-3 col-sm-6">
+          <q-input
+            ref="restDayOldTotalRef"
+            for="restDayOldTotalRef"
+            dense
+            hide-bottom-space
+            bg-color="white"
+            readonly
+            outlined
+            v-model="dataStore.restDayTotalOld"
+            label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
+          />
+        </div>
+
+        <div class="col-12 col-md-3 col-sm-6">
+          <q-input
+            ref="restDayCurrentTotalRef"
+            for="restDayCurrentTotalRef"
+            dense
+            readonly
+            hide-bottom-space
+            bg-color="white"
+            outlined
+            v-model="dataStore.restDayCurrentTotal"
+            label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
+          />
+        </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveNumberRef"
-              for="leaveNumberRef"
-              v-model="dataStore.telephoneNumber"
-              mask="(###)-###-####"
-              lazy-rules
-              unmasked-value
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+            <div class="col-12 col-md-3 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                bg-color="white"
+                ref="leaveNumberRef"
+                for="leaveNumberRef"
+                v-model="dataStore.telephoneNumber"
+                mask="(###)-###-####"
+                lazy-rules
+                unmasked-value
+                label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
               ]"
-            />
+              />
+            </div>
 
-            <q-input
-              class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveAddressRef"
-              for="leaveAddressRef"
-              v-model="dataStore.currentAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+            <div class="col-12 col-md-9 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                bg-color="white"
+                ref="leaveAddressRef"
+                for="leaveAddressRef"
+                v-model="dataStore.currentAddress"
+                label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
               ]"
-            />
+              />
+            </div>
           </div>
         </div>
-        <q-input
-          type="textarea"
-          hide-bottom-space
-          bg-color="white"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataVacation.leaveDetail"
-          label="สาเหตุการลา"
-          :readonly="!edit || statusCheck === 'NEW'"
-        />
+
+        <div class="col-12 inputgreen">
+          <q-input
+            type="textarea"
+            hide-bottom-space
+            bg-color="white"
+            dense
+            outlined
+            ref="leaveDetailRef"
+            for="leaveDetailRef"
+            v-model="formDataVacation.leaveDetail"
+            label="สาเหตุการลา"
+            :readonly="!edit || statusCheck === 'NEW'"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <!-- multiple -->
-            <q-file
-              ref="leaveDocumentRef"
-              bg-color="white"
-              v-model="formDataVacation.leaveDocument"
-              @added="fileUploadDoc"
-              dense
-              label="เอกสารประกอบ"
-              multiple
-              outlined
-              use-chips
-              class="q-pl-sm col-12"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
+            <div class="q-pl-sm col-12">
+              <q-file
+                ref="leaveDocumentRef"
+                bg-color="white"
+                v-model="formDataVacation.leaveDocument"
+                @added="fileUploadDoc"
+                dense
+                label="เอกสารประกอบ"
+                multiple
+                outlined
+                use-chips
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
           </div>
         </div>
         <div class="col-12" v-if="data">
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index 0414330..d32430f 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -13,18 +13,10 @@ import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbs
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  calculateDurationYmd,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, messageError, convertDateToAPI, showLoader, hideLoader } =
+  mixin;
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
-const leaveText = ref<string>("");
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   data: {
@@ -50,7 +42,7 @@ const ordainDayLocationNumberRef = ref<object | null>(null);
 const leaveWroteRef = ref<object | null>(null);
 const leavebirthDateRef = ref<object | null>(null);
 const leavegovernmentDateRef = ref<object | null>(null);
-const totalLeaveRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
 const leaveEndDateRef = ref<object | null>(null);
 const ordainDayOrdinationRef = ref<object | null>(null);
 const leaveStartDateRef = ref<object | null>(null);
@@ -68,7 +60,7 @@ const formDataOrdination = reactive<any>({
   leavebirthDate: null,
   leaveStartDate: null,
   leaveEndDate: null,
-  totalLeave: 0,
+  leaveTotal: 0,
   ordainDayOrdination: null,
   ordainDayLocationName: "",
   ordainDayLocationNumber: null,
@@ -89,7 +81,7 @@ const formRef: OrdinationForm = {
   leavebirthDate: leavebirthDateRef,
   leaveStartDate: leaveStartDateRef,
   leaveEndDate: leaveEndDateRef,
-  totalLeave: totalLeaveRef,
+  leaveTotal: leaveTotalRef,
   ordainDayOrdination: ordainDayOrdinationRef,
   ordainDayLocationName: ordainDayLocationNameRef,
   ordainDayLocationNumber: ordainDayLocationNumberRef,
@@ -207,10 +199,6 @@ async function fetchCheck() {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataOrdination.leaveTotal = data.totalDate;
-      leaveText.value = calculateDurationYmd(
-        formDataOrdination.leaveStartDate,
-        formDataOrdination.leaveEndDate
-      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
@@ -222,17 +210,6 @@ async function fetchCheck() {
     });
 }
 
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataOrdination.leaveStartDate,
-    formDataOrdination.leaveEndDate
-  );
-  formDataOrdination.leaveTotal = newLeaveTotal;
-}
-
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
 const dateEndInputStyle = computed(() => {
   return !isLeave.value ? "input-alert" : "";
@@ -250,11 +227,6 @@ watch(props.data, async () => {
     formDataOrdination.leaveTotal = props.data.leaveTotal;
     formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
     formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName;
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
     formDataOrdination.ordainDayLocationAddress =
       props.data.ordainDayLocationAddress;
     formDataOrdination.ordainDayBuddhistLentName =
@@ -304,11 +276,6 @@ onMounted(async () => {
 
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
     leaveId.value = props.data.id;
   }
 });
@@ -323,277 +290,290 @@ onMounted(async () => {
   <form @submit.prevent="onValidate" class="full-width">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          ref="leaveWroteRef"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          bg-color="white"
-          hide-bottom-space
-          v-model="formDataOrdination.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            ref="leaveWroteRef"
+            dense
+            outlined
+            bg-color="white"
+            hide-bottom-space
+            v-model="formDataOrdination.leaveWrote"
+            label="เขียนที่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
+        </div>
+
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataOrdination.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataOrdination.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataOrdination.leaveStartDate != null
-                      ? date2Thai(formDataOrdination.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!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-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataOrdination.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataOrdination.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataOrdination.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataOrdination.leaveStartDate != null
+                        ? date2Thai(formDataOrdination.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!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>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataOrdination.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
           </div>
         </div>
+
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataOrdination.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataOrdination.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataOrdination.leaveEndDate != null
-                      ? date2Thai(formDataOrdination.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!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-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataOrdination.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataOrdination.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataOrdination.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataOrdination.leaveEndDate != null
+                        ? date2Thai(formDataOrdination.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!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>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataOrdination.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-4 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="leaveText"
-              label="จำนวนวันที่ลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
-            <datepicker
-              class="col-12 col-md-4 col-sm-6"
-              menu-class-name="modalfix"
-              v-model="formDataOrdination.leavegovernmentDate"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              readonly
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  ref="leavegovernmentDateRef"
-                  dense
-                  bg-color="white"
-                  hide-bottom-space
-                  readonly
-                  class="full-width"
-                  :model-value="
-                    dataStore.dateAppoint != null
-                      ? date2Thai(dataStore.dateAppoint)
-                      : null
-                  "
-                  :label="`${'วันที่เข้ารับราชการ'}`"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="formDataOrdination.leaveTotal"
+                label="จำนวนวันที่ลา (วัน)"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
 
-            <datepicker
-              class="col-12 col-md-4 col-sm-6"
-              menu-class-name="modalfix"
-              v-model="formDataOrdination.leavebirthDate"
-              :locale="'th'"
-              autoApply
-              borderless
-              readonly
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  ref="leavebirthDateRef"
-                  dense
-                  bg-color="white"
-                  hide-bottom-space
-                  readonly
-                  class="full-width"
-                  :model-value="
-                    dataStore.birthDate != null
-                      ? date2Thai(dataStore.birthDate)
-                      : null
-                  "
-                  :label="`${'วันเดือนปีเกิด'}`"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+            <div class="col-12 col-md-3 col-sm-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataOrdination.leavegovernmentDate"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                readonly
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    ref="leavegovernmentDateRef"
+                    dense
+                    bg-color="white"
+                    hide-bottom-space
+                    readonly
+                    class="full-width"
+                    :model-value="
+                      dataStore.dateAppoint != null
+                        ? date2Thai(dataStore.dateAppoint)
+                        : null
+                    "
+                    :label="`${'วันที่เข้ารับราชการ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--black)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataOrdination.leavebirthDate"
+                :locale="'th'"
+                autoApply
+                borderless
+                readonly
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    ref="leavebirthDateRef"
+                    dense
+                    bg-color="white"
+                    hide-bottom-space
+                    readonly
+                    class="full-width"
+                    :model-value="
+                      dataStore.birthDate != null
+                        ? date2Thai(dataStore.birthDate)
+                        : null
+                    "
+                    :label="`${'วันเดือนปีเกิด'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--black)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
           </div>
         </div>
 
@@ -620,158 +600,170 @@ onMounted(async () => {
         </div>
 
         <div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
-        <datepicker
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataOrdination.ordainDayOrdination"
-          :locale="'th'"
-          autoApply
-          full-width
-          borderless
-          :readonly="!edit || statusCheck === 'NEW'"
-          hide-bottom-space
-          :enableTimePicker="false"
-          week-start="0"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              ref="ordainDayOrdinationRef"
-              dense
-              bg-color="white"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
-              :model-value="
-                formDataOrdination.ordainDayOrdination != null
-                  ? date2Thai(formDataOrdination.ordainDayOrdination)
-                  : null
-              "
-              :label="`${'วันอุปสมบท'}`"
-              :rules="[(val:string) => !!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-6 inputgreen">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="formDataOrdination.ordainDayOrdination"
+            :locale="'th'"
+            autoApply
+            full-width
+            borderless
+            :readonly="!edit || statusCheck === 'NEW'"
+            hide-bottom-space
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                ref="ordainDayOrdinationRef"
+                dense
+                bg-color="white"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                class="full-width datepicker"
+                :model-value="
+                  formDataOrdination.ordainDayOrdination != null
+                    ? date2Thai(formDataOrdination.ordainDayOrdination)
+                    : null
+                "
+                :label="`${'วันอุปสมบท'}`"
+                :rules="[(val:string) => !!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
-          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-          dense
-          hide-bottom-space
-          ref="ordainDayLocationNameRef"
-          bg-color="white"
-          outlined
-          full-width
-          :readonly="!edit || statusCheck === 'NEW'"
-          v-model="formDataOrdination.ordainDayLocationName"
-          label="ชื่อวัด"
-          :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-        />
+        <div class="col-12 col-md-4 col-sm-6 inputgreen">
+          <q-input
+            dense
+            hide-bottom-space
+            ref="ordainDayLocationNameRef"
+            bg-color="white"
+            outlined
+            full-width
+            :readonly="!edit || statusCheck === 'NEW'"
+            v-model="formDataOrdination.ordainDayLocationName"
+            label="ชื่อวัด"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+          />
+        </div>
 
-        <q-input
-          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-          ref="ordainDayLocationNumberRef"
-          dense
-          full-width
-          outlined
-          v-model="formDataOrdination.ordainDayLocationNumber"
-          bg-color="white"
-          mask="(###)-###-####"
-          lazy-rules
-          unmasked-value
-          :readonly="!edit || statusCheck === 'NEW'"
-          hide-bottom-space
-          label="หมายเลขโทรศัพท์"
-          :rules="[(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
-        />
-        <q-input
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          ref="ordainDayLocationAddressRef"
-          bg-color="white"
-          outlined
-          hide-bottom-space
-          v-model="formDataOrdination.ordainDayLocationAddress"
-          label="ที่อยู่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'กรุณากรอกที่อยู่'}`]"
-          type="textarea"
-        />
+        <div class="col-12 col-md-4 col-sm-12 inputgreen">
+          <q-input
+            ref="ordainDayLocationNumberRef"
+            dense
+            full-width
+            outlined
+            v-model="formDataOrdination.ordainDayLocationNumber"
+            bg-color="white"
+            mask="(###)-###-####"
+            lazy-rules
+            unmasked-value
+            :readonly="!edit || statusCheck === 'NEW'"
+            hide-bottom-space
+            label="หมายเลขโทรศัพท์"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
+          />
+        </div>
+
+        <div class="col-12 inputgreen">
+          <q-input
+            dense
+            ref="ordainDayLocationAddressRef"
+            bg-color="white"
+            outlined
+            hide-bottom-space
+            v-model="formDataOrdination.ordainDayLocationAddress"
+            label="ที่อยู่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกที่อยู่'}`]"
+            type="textarea"
+          />
+        </div>
 
         <div class="q-pl-sm text-weight-bold text-dark col-12">
           สถานที่จำพรรษา
         </div>
-        <q-input
-          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-          dense
-          ref="ordainDayBuddhistLentNameRef"
-          bg-color="white"
-          hide-bottom-space
-          outlined
-          :readonly="!edit || statusCheck === 'NEW'"
-          v-model="formDataOrdination.ordainDayBuddhistLentName"
-          label="ชื่อวัด"
-          :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-        />
 
-        <q-input
-          class="col-12 cursor-pointer inputgreen"
-          dense
-          ref="ordainDayBuddhistLentAddressRef"
-          bg-color="white"
-          outlined
-          :readonly="!edit || statusCheck === 'NEW'"
-          v-model="formDataOrdination.ordainDayBuddhistLentAddress"
-          label="ที่อยู่"
-          :rules="[(val:string) => !!val || `${'กรุณากรอกที่อยู่'}`]"
-          type="textarea"
-          hide-bottom-space
-        />
-        <q-input
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          bg-color="white"
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataOrdination.leaveDetail"
-          label="สาเหตุการลา"
-          :readonly="!edit || statusCheck === 'NEW'"
-        />
+        <div class="col-12 col-md-6 col-sm-12 inputgreen">
+          <q-input
+            dense
+            ref="ordainDayBuddhistLentNameRef"
+            bg-color="white"
+            hide-bottom-space
+            outlined
+            :readonly="!edit || statusCheck === 'NEW'"
+            v-model="formDataOrdination.ordainDayBuddhistLentName"
+            label="ชื่อวัด"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+          />
+        </div>
+
+        <div class="col-12 inputgreen">
+          <q-input
+            dense
+            ref="ordainDayBuddhistLentAddressRef"
+            bg-color="white"
+            outlined
+            :readonly="!edit || statusCheck === 'NEW'"
+            v-model="formDataOrdination.ordainDayBuddhistLentAddress"
+            label="ที่อยู่"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกที่อยู่'}`]"
+            type="textarea"
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="col-12 inputgreen">
+          <q-input
+            type="textarea"
+            dense
+            bg-color="white"
+            outlined
+            ref="leaveDetailRef"
+            for="leaveDetailRef"
+            v-model="formDataOrdination.leaveDetail"
+            label="สาเหตุการลา"
+            :readonly="!edit || statusCheck === 'NEW'"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <!-- multiple -->
-            <q-file
-              ref="leaveDocumentRef"
-              v-model="formDataOrdination.leaveDocument"
-              @added="fileUploadDoc"
-              dense
-              label="เอกสารประกอบ"
-              multiple
-              outlined
-              bg-color="white"
-              use-chips
-              class="col-12 q-pl-sm col-12"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
+            <div class="col-12 q-pl-sm col-12">
+              <q-file
+                ref="leaveDocumentRef"
+                v-model="formDataOrdination.leaveDocument"
+                @added="fileUploadDoc"
+                dense
+                label="เอกสารประกอบ"
+                multiple
+                outlined
+                bg-color="white"
+                use-chips
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
           </div>
         </div>
         <div class="col-12" v-if="data">
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index 7440191..edfdff6 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -61,7 +61,7 @@ const formDataHaji = reactive<any>({
   leavegovernmentDate: null,
   leaveStartDate: null,
   leaveEndDate: null,
-  totalLeave: 0,
+  leaveTotal: 0,
   hajjDayStatus: true,
   leaveDocument: [],
   leaveDetail: "",
@@ -175,17 +175,6 @@ async function fetchCheck() {
     });
 }
 
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataHaji.leaveStartDate,
-    formDataHaji.leaveEndDate
-  );
-  formDataHaji.leaveTotal = newLeaveTotal;
-}
-
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
 const dateEndInputStyle = computed(() => {
   return !isLeave.value ? "input-alert" : "";
@@ -200,18 +189,12 @@ watch(props.data, async () => {
     formDataHaji.leaveTotal = props.data.leaveTotal;
     formDataHaji.leaveStartDate = props.data.leaveStartDate;
     formDataHaji.leaveEndDate = props.data.leaveEndDate;
-    formDataHaji.totalLeave = props.data.totalLeave;
     formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
     formDataHaji.leaveDetail = props.data.leaveDetail;
     formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
     formDataHaji.leaveRange = props.data.leaveRange;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
     formDataHaji.leaveDocument = [];
   }
 });
@@ -223,18 +206,11 @@ onMounted(async () => {
     formDataHaji.leaveTotal = props.data.leaveTotal;
     formDataHaji.leaveStartDate = props.data.leaveStartDate;
     formDataHaji.leaveEndDate = props.data.leaveEndDate;
-    formDataHaji.totalLeave = props.data.totalLeave;
     formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
     formDataHaji.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
     formDataHaji.leaveRange = props.data.leaveRange;
     formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
-
     statusCheck.value = props.data.status;
     // formDataHaji.leaveDocument = props.data.leaveDocument;
     leaveId.value = props.data.id;
@@ -253,7 +229,7 @@ onMounted(async () => {
         <q-input
           v-model="formDataHaji.leaveWrote"
           ref="leaveWroteRef"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          class="col-12 col-sm-12 inputgreen"
           bg-color="white"
           dense
           outlined
@@ -266,7 +242,7 @@ onMounted(async () => {
         <div class="col-12">
           <div class="row q-col-gutter-sm">
             <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              class="col-12 col-md-3 col-sm-6 inputgreen"
               menu-class-name="modalfix"
               v-model="formDataHaji.leaveStartDate"
               :locale="'th'"
@@ -318,7 +294,7 @@ onMounted(async () => {
             <q-select
               outlined
               dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              class="col-12 col-md-3 col-sm-6 inputgreen"
               bg-color="white"
               v-model="formDataHaji.leaveRange"
               :options="dataStore.rangeOptions"
@@ -340,7 +316,7 @@ onMounted(async () => {
         <div class="col-12">
           <div class="row q-col-gutter-sm">
             <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              class="col-12 col-md-3 col-sm-6 inputgreen"
               menu-class-name="modalfix"
               v-model="formDataHaji.leaveEndDate"
               :locale="'th'"
@@ -390,7 +366,7 @@ onMounted(async () => {
               v-if="!checkDate"
               outlined
               dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              class="col-12 col-md-3 col-sm-6 inputgreen"
               bg-color="white"
               v-model="formDataHaji.leaveRangeEnd"
               :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
@@ -412,27 +388,29 @@ onMounted(async () => {
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="leaveText"
-              label="จำนวนวันที่ลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="formDataHaji.leaveTotal"
+                label="จำนวนวันที่ลา (วัน)"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+
             <datepicker
               class="col-12 col-md-3 col-sm-6"
               menu-class-name="modalfix"
@@ -502,16 +480,18 @@ onMounted(async () => {
           />
         </div>
 
-        <q-input
-          v-model="formDataHaji.leaveDetail"
-          class="col-12 q-mt-sm cursor-pointer inputgreen"
-          bg-color="white"
-          dense
-          outlined
-          type="textarea"
-          label="สาเหตุการลา"
-          :readonly="!edit || statusCheck === 'NEW'"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            v-model="formDataHaji.leaveDetail"
+            :readonly="!edit || statusCheck === 'NEW'"
+            bg-color="white"
+            dense
+            outlined
+            type="textarea"
+            label="สาเหตุการลา"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <!-- multiple -->
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index be73451..6fe3ded 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -270,221 +270,237 @@ onMounted(async () => {
   <form @submit.prevent="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          ref="leaveWroteRef"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          bg-color="white"
-          hide-bottom-space
-          v-model="formDataMilitary.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            ref="leaveWroteRef"
+            dense
+            outlined
+            bg-color="white"
+            hide-bottom-space
+            v-model="formDataMilitary.leaveWrote"
+            label="เขียนที่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
+        </div>
 
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataMilitary.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataMilitary.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataMilitary.leaveStartDate != null
-                      ? date2Thai(formDataMilitary.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!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-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataMilitary.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataMilitary.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataMilitary.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataMilitary.leaveStartDate != null
+                        ? date2Thai(formDataMilitary.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!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>
+
+            <!-- <div class="col-12 col-sm-3 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataMilitary.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
         </div>
+
         <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataMilitary.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataMilitary.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataMilitary.leaveEndDate != null
-                      ? date2Thai(formDataMilitary.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!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-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataMilitary.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
+          <div class="row q-col-gutter-sm"> -->
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataMilitary.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataMilitary.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataMilitary.leaveEndDate != null
+                        ? date2Thai(formDataMilitary.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!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>
+
+            <!-- <div class="col-12 col-sm-3 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataMilitary.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
         </div>
 
         <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-4 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="leaveText"
-              label="จำนวนวันที่ลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
-            <q-input
-              ref="absentDaySummonRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              dense
-              bg-color="white"
-              outlined
-              v-model="formDataMilitary.absentDaySummon"
-              label="ได้รับหมายเรียกของ"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
-            />
+          <div class="q-col-gutter-sm row"> -->
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="leaveText"
+                label="จำนวนวันที่ลา"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+          </div>
+        </div>
 
-            <q-input
-              ref="atRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              dense
-              bg-color="white"
-              outlined
-              v-model="formDataMilitary.absentDayLocation"
-              label="ที่"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกที่'}`]"
-            />
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-8 col-sm-6 inputgreen">
+              <q-input
+                ref="absentDaySummonRef"
+                dense
+                bg-color="white"
+                outlined
+                v-model="formDataMilitary.absentDaySummon"
+                label="ได้รับหมายเรียกของ"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
+              />
+            </div>
+
+            <div class="col-12 col-md-4 col-sm-6 inputgreen">
+              <q-input
+                ref="atRef"
+                dense
+                bg-color="white"
+                outlined
+                v-model="formDataMilitary.absentDayLocation"
+                label="ที่"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกที่'}`]"
+              />
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
             <datepicker
-              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              class="col-12 col-md-4 col-sm-6 inputgreen"
               menu-class-name="modalfix"
               v-model="formDataMilitary.absentDayRegistorDate"
               :locale="'th'"
@@ -530,7 +546,7 @@ onMounted(async () => {
             </datepicker>
 
             <q-input
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              class="col-12 col-md-4 col-sm-6 inputgreen"
               dense
               bg-color="white"
               ref="absentDayGetInRef"
@@ -543,7 +559,7 @@ onMounted(async () => {
             />
 
             <q-input
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              class="col-12 col-md-4 col-sm-12 inputgreen"
               dense
               bg-color="white"
               outlined
@@ -557,16 +573,17 @@ onMounted(async () => {
           </div>
         </div>
 
-        <q-input
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          :readonly="!edit || statusCheck === 'NEW'"
-          bg-color="white"
-          outlined
-          v-model="formDataMilitary.leaveDetail"
-          type="textarea"
-          label="สาเหตุการลา"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            v-model="formDataMilitary.leaveDetail"
+            :readonly="!edit || statusCheck === 'NEW'"
+            bg-color="white"
+            dense
+            outlined
+            type="textarea"
+            label="สาเหตุการลา"
+          />
+        </div>
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
           <!-- multiple -->
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index 33e9a05..4abf949 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -298,417 +298,447 @@ onMounted(async () => {
   <form @submit.prevent="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          v-model="formDataStudy.leaveWrote"
-          ref="leaveWroteRef"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          bg-color="white"
-          dense
-          outlined
-          label="เขียนที่"
-          hide-bottom-space
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            v-model="formDataStudy.leaveWrote"
+            ref="leaveWroteRef"
+            bg-color="white"
+            dense
+            outlined
+            label="เขียนที่"
+            hide-bottom-space
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
+        </div>
 
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataStudy.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataStudy.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataStudy.leaveStartDate != null
-                      ? date2Thai(formDataStudy.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!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-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataStudy.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataStudy.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataStudy.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataStudy.leaveStartDate != null
+                        ? date2Thai(formDataStudy.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!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>
+
+            <!-- <div class="col-12 col-sm-3 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataStudy.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
         </div>
+
         <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataStudy.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataStudy.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataStudy.leaveEndDate != null
-                      ? date2Thai(formDataStudy.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!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-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataStudy.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
+          <div class="row q-col-gutter-sm"> -->
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataStudy.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataStudy.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataStudy.leaveEndDate != null
+                        ? date2Thai(formDataStudy.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!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>
+
+            <!-- <div class="col-12 col-sm-3  inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataStudy.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row"> -->
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="leaveText"
+                label="มีกำหนด"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="leaveText"
-              label="มีกำหนด"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
-            <datepicker
-              class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
-              autoApply
-              borderless
-              week-start="0"
-              readonly
-              :enableTimePicker="false"
-              :locale="'th'"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="leavegovernmentDateRef"
-                  class="full-width"
-                  bg-color="white"
-                  outlined
-                  readonly
-                  dense
-                  hide-bottom-space
-                  :label="`${'วันที่เข้ารับราชการ'}`"
-                  :model-value="
-                    dataStore.dateAppoint != null
-                      ? date2Thai(dataStore.dateAppoint)
-                      : null
-                  "
-                  :rules="[
+            <div class="col-12 col-md-3 col-sm-6">
+              <datepicker
+                menu-class-name="modalfix"
+                autoApply
+                borderless
+                week-start="0"
+                readonly
+                :enableTimePicker="false"
+                :locale="'th'"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    ref="leavegovernmentDateRef"
+                    class="full-width"
+                    bg-color="white"
+                    outlined
+                    readonly
+                    dense
+                    hide-bottom-space
+                    :label="`${'วันที่เข้ารับราชการ'}`"
+                    :model-value="
+                      dataStore.dateAppoint != null
+                        ? date2Thai(dataStore.dateAppoint)
+                        : null
+                    "
+                    :rules="[
                     (val:string) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
                   ]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--black)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-            <datepicker
-              class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
-              autoApply
-              borderless
-              readonly
-              week-start="0"
-              :enableTimePicker="false"
-              :locale="'th'"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="leavebirthDateRef"
-                  class="full-width"
-                  bg-color="white"
-                  outlined
-                  dense
-                  readonly
-                  hide-bottom-space
-                  :label="`${'วันเดือนปีเกิด'}`"
-                  :model-value="
-                    dataStore.birthDate != null
-                      ? date2Thai(dataStore.birthDate)
-                      : null
-                  "
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+            <div class="col-12 col-md-3 col-sm-6">
+              <datepicker
+                menu-class-name="modalfix"
+                autoApply
+                borderless
+                readonly
+                week-start="0"
+                :enableTimePicker="false"
+                :locale="'th'"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    ref="leavebirthDateRef"
+                    class="full-width"
+                    bg-color="white"
+                    outlined
+                    dense
+                    readonly
+                    hide-bottom-space
+                    :label="`${'วันเดือนปีเกิด'}`"
+                    :model-value="
+                      dataStore.birthDate != null
+                        ? date2Thai(dataStore.birthDate)
+                        : null
+                    "
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--black)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-            <q-input
-              :model-value="dataStore.salary"
-              ref="leaveSalaryRef"
-              class="col-12 col-sm-6 col-md-3"
-              bg-color="white"
-              dense
-              outlined
-              readonly
-              label="เงินเดือนปัจจุบัน"
-            />
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :model-value="dataStore.salary"
+                ref="leaveSalaryRef"
+                bg-color="white"
+                dense
+                outlined
+                readonly
+                label="เงินเดือนปัจจุบัน"
+              />
+            </div>
 
-            <q-input
-              :model-value="dataStore.salaryText"
-              ref="leaveSalaryRef"
-              class="col-12 col-sm-6 col-md-3"
-              bg-color="white"
-              dense
-              readonly
-              outlined
-              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-              hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
-            />
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :model-value="dataStore.salaryText"
+                ref="leaveSalaryRef"
+                bg-color="white"
+                dense
+                readonly
+                outlined
+                label="เงินเดือนปัจจุบัน (ตัวอักษร)"
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
+              />
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              v-model="formDataStudy.studyDayUniversityName"
-              ref="studyDayUniversityNameRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              :readonly="!edit || statusCheck === 'NEW'"
-              label="ชื่อสถานศึกษา"
-              hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
-            />
+            <div class="col-12 col-md-4 col-sm-12 inputgreen">
+              <q-input
+                v-model="formDataStudy.studyDayUniversityName"
+                ref="studyDayUniversityNameRef"
+                bg-color="white"
+                dense
+                outlined
+                :readonly="!edit || statusCheck === 'NEW'"
+                label="ชื่อสถานศึกษา"
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
+              />
+            </div>
 
-            <q-input
-              v-model="formDataStudy.studyDayDegreeLevel"
-              ref="studyDayDegreeLevelRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              :readonly="!edit || statusCheck === 'NEW'"
-              label="ชั้นปริญญา"
-              hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
-            />
+            <div class="col-12 col-md-4 col-sm-6 inputgreen">
+              <q-input
+                v-model="formDataStudy.studyDayDegreeLevel"
+                ref="studyDayDegreeLevelRef"
+                bg-color="white"
+                dense
+                outlined
+                :readonly="!edit || statusCheck === 'NEW'"
+                label="ชั้นปริญญา"
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
+              />
+            </div>
 
-            <q-input
-              v-model="formDataStudy.studyDaySubject"
-              ref="studyDaySubjectRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              :readonly="!edit || statusCheck === 'NEW'"
-              label="ศึกษาวิชา"
-              hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
-            />
+            <div class="col-12 col-md-4 col-sm-6 inputgreen">
+              <q-input
+                v-model="formDataStudy.studyDaySubject"
+                ref="studyDaySubjectRef"
+                bg-color="white"
+                dense
+                outlined
+                :readonly="!edit || statusCheck === 'NEW'"
+                label="ศึกษาวิชา"
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
+              />
+            </div>
 
-            <q-input
-              v-model="formDataStudy.studyDayCountry"
-              ref="studyDayCountryRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              :readonly="!edit || statusCheck === 'NEW'"
-              label="ประเทศ"
-              hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
-            />
+            <div class="col-12 col-md-4 col-sm-6 inputgreen">
+              <q-input
+                v-model="formDataStudy.studyDayCountry"
+                ref="studyDayCountryRef"
+                bg-color="white"
+                dense
+                outlined
+                :readonly="!edit || statusCheck === 'NEW'"
+                label="ประเทศ"
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
+              />
+            </div>
 
-            <q-input
-              v-model="formDataStudy.studyDayScholarship"
-              ref="studyDayScholarshipRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              :readonly="!edit || statusCheck === 'NEW'"
-              label="ด้วยทุน"
-              hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-            />
-
-            <q-input
-              v-model="dataStore.telephoneNumber"
-              ref="leaveNumberRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              :readonly="!edit || statusCheck === 'NEW'"
-              unmasked-value
-              hide-bottom-space
-              mask="(###)-###-####"
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :rules="[
-                (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
-
-            <q-input
-              v-model="dataStore.currentAddress"
-              ref="leaveAddressRef"
-              class="col-12 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              :readonly="!edit || statusCheck === 'NEW'"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              hide-bottom-space
-              :rules="[
-                (val:string) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-              ]"
-            />
+            <div class="col-12 col-md-4 col-sm-6 inputgreen">
+              <q-input
+                v-model="formDataStudy.studyDayScholarship"
+                ref="studyDayScholarshipRef"
+                bg-color="white"
+                dense
+                outlined
+                :readonly="!edit || statusCheck === 'NEW'"
+                label="ด้วยทุน"
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+              />
+            </div>
           </div>
         </div>
 
-        <q-input
-          v-model="formDataStudy.leaveDetail"
-          :readonly="!edit || statusCheck === 'NEW'"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          bg-color="white"
-          dense
-          outlined
-          type="textarea"
-          label="สาเหตุการลา"
-        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <div class="col-12 col-md-4 col-sm-12 inputgreen">
+              <q-input
+                v-model="dataStore.telephoneNumber"
+                ref="leaveNumberRef"
+                bg-color="white"
+                dense
+                outlined
+                :readonly="!edit || statusCheck === 'NEW'"
+                unmasked-value
+                hide-bottom-space
+                mask="(###)-###-####"
+                label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+                :rules="[
+                (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+              />
+            </div>
+
+            <div class="col-12 col-md-8 col-sm-12 inputgreen">
+              <q-input
+                v-model="dataStore.currentAddress"
+                ref="leaveAddressRef"
+                bg-color="white"
+                dense
+                outlined
+                :readonly="!edit || statusCheck === 'NEW'"
+                label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+                hide-bottom-space
+                :rules="[
+                (val:string) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 inputgreen">
+          <q-input
+            v-model="formDataStudy.leaveDetail"
+            :readonly="!edit || statusCheck === 'NEW'"
+            bg-color="white"
+            dense
+            outlined
+            type="textarea"
+            label="สาเหตุการลา"
+          />
+        </div>
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
           <q-file
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 26edb8d..6b7ae52 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -17,7 +17,6 @@ const {
   date2Thai,
   arabicNumberToText,
   calculateDurationYmd,
-  dateToISO,
   messageError,
   convertDateToAPI,
   showLoader,
@@ -279,361 +278,386 @@ onMounted(async () => {
   <form @submit.prevent="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          v-model="formDataTrain.leaveWrote"
-          ref="leaveWroteRef"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          bg-color="white"
-          dense
-          outlined
-          label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          hide-bottom-space
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            v-model="formDataTrain.leaveWrote"
+            ref="leaveWroteRef"
+            bg-color="white"
+            dense
+            outlined
+            label="เขียนที่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            hide-bottom-space
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
+        </div>
 
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataTrain.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataTrain.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataTrain.leaveStartDate != null
-                      ? date2Thai(formDataTrain.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!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-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataTrain.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataTrain.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataTrain.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataTrain.leaveStartDate != null
+                        ? date2Thai(formDataTrain.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!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>
+
+            <!-- <div class="col-12 col-sm-3 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataTrain.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
         </div>
         <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataTrain.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataTrain.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataTrain.leaveEndDate != null
-                      ? date2Thai(formDataTrain.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!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-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataTrain.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
+          <div class="row q-col-gutter-sm"> -->
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataTrain.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataTrain.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataTrain.leaveEndDate != null
+                        ? date2Thai(formDataTrain.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!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>
+
+            <!-- <div class="col-12 col-sm-3 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataTrain.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row"> -->
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="leaveText"
+                label="มีกำหนด"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="leaveText"
-              label="มีกำหนด"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
-            <datepicker
-              v-model="formDataTrain.leavegovernmentDate"
-              class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
-              autoApply
-              borderless
-              week-start="0"
-              readonly
-              :enableTimePicker="false"
-              :locale="'th'"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="leavegovernmentDateRef"
-                  class="full-width"
-                  outlined
-                  readonly
-                  bg-color="white"
-                  dense
-                  hide-bottom-space
-                  :label="`${'วันที่เข้ารับราชการ'}`"
-                  :model-value="
-                    dataStore.dateAppoint != null
-                      ? date2Thai(dataStore.dateAppoint)
-                      : null
-                  "
-                  :rules="[
+            <div class="col-12 col-sm-3">
+              <datepicker
+                v-model="formDataTrain.leavegovernmentDate"
+                menu-class-name="modalfix"
+                autoApply
+                borderless
+                week-start="0"
+                readonly
+                :enableTimePicker="false"
+                :locale="'th'"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    ref="leavegovernmentDateRef"
+                    class="full-width"
+                    outlined
+                    readonly
+                    bg-color="white"
+                    dense
+                    hide-bottom-space
+                    :label="`${'วันที่เข้ารับราชการ'}`"
+                    :model-value="
+                      dataStore.dateAppoint != null
+                        ? date2Thai(dataStore.dateAppoint)
+                        : null
+                    "
+                    :rules="[
                     (val:string) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
                   ]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--black)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-            <datepicker
-              v-model="formDataTrain.leavebirthDate"
-              class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
-              autoApply
-              borderless
-              readonly
-              week-start="0"
-              :enableTimePicker="false"
-              :locale="'th'"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="leavebirthDateRef"
-                  class="full-width"
-                  bg-color="white"
-                  outlined
-                  dense
-                  readonly
-                  hide-bottom-space
-                  :label="`${'วันเดือนปีเกิด'}`"
-                  :model-value="
-                    dataStore.birthDate != null
-                      ? date2Thai(dataStore.birthDate)
-                      : null
-                  "
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(---black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+            <div class="col-12 col-sm-3">
+              <datepicker
+                v-model="formDataTrain.leavebirthDate"
+                menu-class-name="modalfix"
+                autoApply
+                borderless
+                readonly
+                week-start="0"
+                :enableTimePicker="false"
+                :locale="'th'"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    ref="leavebirthDateRef"
+                    class="full-width"
+                    bg-color="white"
+                    outlined
+                    dense
+                    readonly
+                    hide-bottom-space
+                    :label="`${'วันเดือนปีเกิด'}`"
+                    :model-value="
+                      dataStore.birthDate != null
+                        ? date2Thai(dataStore.birthDate)
+                        : null
+                    "
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(---black)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-            <q-input
-              v-model="dataStore.salary"
-              class="col-12 col-sm-6 col-md-3"
-              bg-color="white"
-              dense
-              outlined
-              readonly
-              label="เงินเดือนปัจจุบัน"
-            />
+            <div class="col-12 col-sm-3">
+              <q-input
+                v-model="dataStore.salary"
+                bg-color="white"
+                dense
+                outlined
+                readonly
+                label="เงินเดือนปัจจุบัน"
+              />
+            </div>
 
-            <q-input
-              v-model="dataStore.salaryText"
-              class="col-12 col-sm-6 col-md-3"
-              dense
-              readonly
-              outlined
-              bg-color="white"
-              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-            />
+            <div class="col-12 col-sm-3">
+              <q-input
+                v-model="dataStore.salaryText"
+                dense
+                readonly
+                outlined
+                bg-color="white"
+                label="เงินเดือนปัจจุบัน (ตัวอักษร)"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <div class="col-12 col-sm-8 inputgreen">
+              <q-input
+                v-model="formDataTrain.studyDayTrainingSubject"
+                ref="studyDayTrainingSubjectRef"
+                bg-color="white"
+                dense
+                outlined
+                label="ด้าน/หลักสูตร"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
+              />
+            </div>
+
+            <div class="col-12 col-sm-4 inputgreen">
+              <q-input
+                v-model="formDataTrain.studyDayTrainingName"
+                ref="studyDayTrainingNameRef"
+                bg-color="white"
+                dense
+                outlined
+                label="ณ สถานที่"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
+              />
+            </div>
+
+            <div class="col-12 col-sm-4 inputgreen">
+              <q-input
+                v-model="formDataTrain.studyDayCountry"
+                ref="studyDayCountryRef"
+                dense
+                bg-color="white"
+                outlined
+                label="ประเทศ"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
+              />
+            </div>
+
+            <div class="col-12 col-sm-8 inputgreen">
+              <q-input
+                v-model="formDataTrain.studyDayScholarship"
+                ref="studyDayScholarshipRef"
+                bg-color="white"
+                dense
+                outlined
+                label="ด้วยทุน"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+              />
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              v-model="formDataTrain.studyDayTrainingSubject"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              ref="studyDayTrainingSubjectRef"
-              bg-color="white"
-              dense
-              outlined
-              label="ด้าน/หลักสูตร"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
-            />
-
-            <q-input
-              v-model="formDataTrain.studyDayTrainingName"
-              ref="studyDayTrainingNameRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              label="ณ สถานที่"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
-            />
-
-            <q-input
-              v-model="formDataTrain.studyDayCountry"
-              ref="studyDayCountryRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              dense
-              bg-color="white"
-              outlined
-              label="ประเทศ"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
-            />
-
-            <q-input
-              v-model="formDataTrain.studyDayScholarship"
-              ref="studyDayScholarshipRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              label="ด้วยทุน"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-            />
-
             <q-input
               v-model="dataStore.telephoneNumber"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              class="col-12 col-sm-4 inputgreen"
               ref="leaveNumberRef"
               dense
               outlined
@@ -651,7 +675,7 @@ onMounted(async () => {
             <q-input
               v-model="dataStore.currentAddress"
               ref="leaveAddressRef"
-              class="col-12 cursor-pointer inputgreen"
+              class="col-12 col-sm-8 inputgreen"
               bg-color="white"
               dense
               outlined
@@ -665,16 +689,17 @@ onMounted(async () => {
           </div>
         </div>
 
-        <q-input
-          v-model="formDataTrain.leaveDetail"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          :readonly="!edit || statusCheck === 'NEW'"
-          bg-color="white"
-          dense
-          outlined
-          type="textarea"
-          label="สาเหตุการลา"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            v-model="formDataTrain.leaveDetail"
+            :readonly="!edit || statusCheck === 'NEW'"
+            bg-color="white"
+            dense
+            outlined
+            type="textarea"
+            label="สาเหตุการลา"
+          />
+        </div>
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
           <q-file
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index 29ba1b6..682e0d3 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -17,7 +17,7 @@ const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
 const {
   date2Thai,
-  dateToISO,
+  calculateDurationYmd,
   messageError,
   showLoader,
   hideLoader,
@@ -27,6 +27,7 @@ const {
 const edit = ref<boolean>(true);
 const isSave = ref<boolean>(false);
 const leaveId = ref<string>("");
+const leaveText = ref<string>("");
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -187,6 +188,11 @@ async function fetchCheck() {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataWorkInternational.leaveTotal = data.totalDate;
+
+      leaveText.value = calculateDurationYmd(
+        formDataWorkInternational.leaveStartDate,
+        formDataWorkInternational.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
@@ -206,7 +212,7 @@ const leaveDocumentList = ref<any>();
 const leaveDraftDocument = ref<string>();
 const statusCheck = ref<string>("");
 
-watch(props, () => {
+watch(props, async () => {
   if (props.data) {
     formDataWorkInternational.leaveWrote = props.data.leaveWrote;
     formDataWorkInternational.leaveStartDate = new Date(
@@ -222,6 +228,11 @@ watch(props, () => {
     statusCheck.value = props.data.status;
     formDataWorkInternational.leaveDraftDocument = null;
     formDataWorkInternational.leaveDocument = [];
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
   }
 });
 
@@ -238,7 +249,7 @@ watch(
 );
 
 /**Hook */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataWorkInternational.leaveWrote = props.data.leaveWrote;
 
@@ -255,6 +266,11 @@ onMounted(() => {
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
   }
 });
 </script>
@@ -267,200 +283,212 @@ onMounted(() => {
   <form @submit.prevent.stop="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          hide-bottom-space
-          bg-color="white"
-          for="leaveWroteRef"
-          dense
-          outlined
-          v-model="formDataWorkInternational.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            ref="leaveWroteRef"
+            hide-bottom-space
+            bg-color="white"
+            for="leaveWroteRef"
+            dense
+            outlined
+            v-model="formDataWorkInternational.leaveWrote"
+            label="เขียนที่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
+        </div>
 
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataWorkInternational.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataWorkInternational.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataWorkInternational.leaveStartDate != null
-                      ? date2Thai(formDataWorkInternational.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!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-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataWorkInternational.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataWorkInternational.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataWorkInternational.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataWorkInternational.leaveStartDate != null
+                        ? date2Thai(formDataWorkInternational.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!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>
+
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataWorkInternational.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
         </div>
         <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataWorkInternational.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataWorkInternational.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataWorkInternational.leaveEndDate != null
-                      ? date2Thai(formDataWorkInternational.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!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-select
-              outlined
-              dense
-              v-if="!checkDate"
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataWorkInternational.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="formDataWorkInternational.leaveTotal"
-              label="เป็นเวลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
+          <div class="row q-col-gutter-sm"> -->
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataWorkInternational.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataWorkInternational.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataWorkInternational.leaveEndDate != null
+                        ? date2Thai(formDataWorkInternational.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!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>
+
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                v-if="!checkDate"
+                bg-color="white"
+                v-model="formDataWorkInternational.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="leaveText"
+                label="มีกำหนด"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
           </div>
         </div>
-        <q-input
-          hide-bottom-space
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          bg-color="white"
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataWorkInternational.leaveDetail"
-          label="สาเหตุการลา"
-          :readonly="!edit || statusCheck === 'NEW'"
-        />
+
+        <div class="col-12 inputgreen">
+          <q-input
+            hide-bottom-space
+            type="textarea"
+            dense
+            bg-color="white"
+            outlined
+            ref="leaveDetailRef"
+            for="leaveDetailRef"
+            v-model="formDataWorkInternational.leaveDetail"
+            label="สาเหตุการลา"
+            :readonly="!edit || statusCheck === 'NEW'"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <q-file
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index 33fa73a..0328139 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -26,7 +26,6 @@ const {
 } = mixin;
 
 const leaveText = ref<string>("");
-const leaveHistoryText = ref<string>("");
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 const checkDate = computed(() => {
@@ -364,188 +363,199 @@ onMounted(async () => {
   <form @submit.prevent.stop="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          for="leaveWroteRef"
-          dense
-          hide-bottom-space
-          bg-color="white"
-          outlined
-          v-model="formDataFollowSpouse.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
-        <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataFollowSpouse.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataFollowSpouse.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataFollowSpouse.leaveStartDate != null
-                      ? date2Thai(formDataFollowSpouse.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!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-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataFollowSpouse.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
-        </div>
-        <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataFollowSpouse.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataFollowSpouse.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataFollowSpouse.leaveEndDate != null
-                      ? date2Thai(formDataFollowSpouse.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!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-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataFollowSpouse.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
-        </div>
-        <div class="col-12 col-md-4 col-sm-12">
+        <div class="col-12 col-sm-12 inputgreen">
           <q-input
-            :bottom-slots="!isLeave ? true : false"
-            :color="!isLeave ? 'red' : 'black'"
-            :bg-color="!isLeave ? 'red-2' : 'white'"
-            :border-color="!isLeave ? 'red' : 'gray'"
-            :input-class="!isLeave ? dateEndInputStyle : ''"
+            ref="leaveWroteRef"
+            for="leaveWroteRef"
             dense
+            hide-bottom-space
+            bg-color="white"
             outlined
-            ref="leaveTotalRef"
-            for="leaveTotalRef"
-            v-model="leaveText"
-            label="เป็นเวลา"
-            readonly
-          >
-            <template v-slot:hint>
-              <span style="color: red">
-                {{ !isLeave ? reasonLeave : "" }}
-              </span>
-            </template>
-          </q-input>
+            v-model="formDataFollowSpouse.leaveWrote"
+            label="เขียนที่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
         </div>
-        <div class="col-12 col-md-4 col-sm-12">
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataFollowSpouse.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataFollowSpouse.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataFollowSpouse.leaveStartDate != null
+                        ? date2Thai(formDataFollowSpouse.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!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>
+
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataFollowSpouse.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
+        </div>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm"> -->
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataFollowSpouse.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataFollowSpouse.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataFollowSpouse.leaveEndDate != null
+                        ? date2Thai(formDataFollowSpouse.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!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>
+
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataFollowSpouse.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="leaveText"
+                label="เป็นเวลา"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 col-md-3 col-sm-12">
           <q-input
             hide-bottom-space
             bg-color="white"
@@ -559,7 +569,7 @@ onMounted(async () => {
             readonly
           />
         </div>
-        <div class="col-12 col-md-4 col-sm-12">
+        <div class="col-12 col-md-9 col-sm-12">
           <q-input
             hide-bottom-space
             bg-color="white"
@@ -576,7 +586,7 @@ onMounted(async () => {
 
         <div class="col-md-3 col-sm-12">
           <q-input
-            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            class="col-12 col-sm-12 inputgreen"
             hide-bottom-space
             ref="coupleDayNameRef"
             for="coupleDayNameRef"
@@ -591,7 +601,7 @@ onMounted(async () => {
         </div>
         <div class="col-md-3 col-sm-12">
           <q-input
-            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            class="col-12 col-sm-12 inputgreen"
             hide-bottom-space
             ref="coupleDayPositionRef"
             for="coupleDayPositionRef"
@@ -606,7 +616,7 @@ onMounted(async () => {
         </div>
         <div class="col-md-3 col-sm-12">
           <q-input
-            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            class="col-12 col-sm-12 inputgreen"
             ref="coupleDayLevelRef"
             for="coupleDayLevelRef"
             dense
@@ -621,7 +631,7 @@ onMounted(async () => {
         </div>
         <div class="col-md-3 col-sm-12">
           <q-input
-            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            class="col-12 col-sm-12 inputgreen"
             ref="coupleDayLevelCountryRef"
             for="coupleDayLevelCountryRef"
             hide-bottom-space
@@ -765,7 +775,7 @@ onMounted(async () => {
         <q-input
           hide-bottom-space
           type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          class="col-12 col-md-12 col-sm-12 inputgreen"
           dense
           bg-color="white"
           outlined
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index a85b490..4bf8adb 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -14,7 +14,7 @@ const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
 const {
   date2Thai,
-  dateToISO,
+  calculateDurationYmd,
   messageError,
   showLoader,
   hideLoader,
@@ -27,6 +27,7 @@ const leaveId = ref<any>("");
 const leaveStartDateRef = ref<object | null>(null);
 const leaveEndDateRef = ref<object | null>(null);
 const leaveWroteRef = ref<object | null>(null);
+const leaveText = ref<string>("");
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -146,6 +147,10 @@ async function fetchCheck() {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataRehabilitation.leaveTotal = data.totalDate;
+      leaveText.value = calculateDurationYmd(
+        formDataRehabilitation.leaveStartDate,
+        formDataRehabilitation.leaveEndDate
+      );
 
       reasonLeave.value = data.message
         ? data.message
@@ -185,7 +190,7 @@ const dateEndInputStyle = computed(() => {
 const leaveDocumentList = ref<any>();
 const leaveDraftDocument = ref<string>();
 const statusCheck = ref<string>("");
-watch(props.data, () => {
+watch(props.data, async () => {
   if (props.data) {
     formDataRehabilitation.leaveWrote = props.data.leaveWrote;
     formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
@@ -198,11 +203,16 @@ watch(props.data, () => {
     formDataRehabilitation.leaveDraftDocument = null;
     formDataRehabilitation.leaveDocument = [];
     statusCheck.value = props.data.status;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
   }
 });
 
 /**Hook */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataRehabilitation.leaveWrote = props.data.leaveWrote;
     formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
@@ -216,6 +226,12 @@ onMounted(() => {
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
+
     fetchCheck();
   }
 });
@@ -230,197 +246,207 @@ onMounted(() => {
   <q-form greedy @submit.prevent @validation-success="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          v-model="formDataRehabilitation.leaveWrote"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          dense
-          outlined
-          bg-color="white"
-          label="เขียนที่"
-          hide-bottom-space
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+        <div class="col-12 col-sm-12 inputgreen">
+          <q-input
+            v-model="formDataRehabilitation.leaveWrote"
+            ref="leaveWroteRef"
+            dense
+            outlined
+            bg-color="white"
+            label="เขียนที่"
+            hide-bottom-space
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
+        </div>
 
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataRehabilitation.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataRehabilitation.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataRehabilitation.leaveStartDate != null
-                      ? date2Thai(formDataRehabilitation.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!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-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataRehabilitation.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataRehabilitation.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataRehabilitation.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataRehabilitation.leaveStartDate != null
+                        ? date2Thai(formDataRehabilitation.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!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>
+
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataRehabilitation.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
         </div>
         <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataRehabilitation.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataRehabilitation.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataRehabilitation.leaveEndDate != null
-                      ? date2Thai(formDataRehabilitation.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!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-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataRehabilitation.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-2 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="formDataRehabilitation.leaveTotal"
-              label="เป็นเวลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
+          <div class="row q-col-gutter-sm"> -->
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataRehabilitation.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataRehabilitation.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataRehabilitation.leaveEndDate != null
+                        ? date2Thai(formDataRehabilitation.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!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>
+
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataRehabilitation.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="leaveText"
+                label="เป็นเวลา"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
           </div>
         </div>
 
-        <q-input
-          v-model="formDataRehabilitation.leaveDetail"
-          :readonly="!edit || statusCheck === 'NEW'"
-          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-md-12 col-sm-12 inputgreen">
+          <q-input
+            v-model="formDataRehabilitation.leaveDetail"
+            :readonly="!edit || statusCheck === 'NEW'"
+            bg-color="white"
+            dense
+            outlined
+            type="textarea"
+            label="สาเหตุการลา"
+          />
+        </div>
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
           <q-file
diff --git a/src/modules/05_leave/components/FormLeave/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
index 0b73d8e..7a53d6e 100644
--- a/src/modules/05_leave/components/FormLeave/Form.vue
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -84,9 +84,10 @@ onMounted(() => {
         outlined
         readonly
         bg-color="white"
-        v-model="dataStore.dear"
+        v-model="dataStore.commanderPosition"
         label="เรียน"
       />
+
       <q-input
         class="col-12 col-sm-4"
         dense
diff --git a/src/modules/05_leave/interface/request/AddAbsence.ts b/src/modules/05_leave/interface/request/AddAbsence.ts
index 06f9356..014d020 100644
--- a/src/modules/05_leave/interface/request/AddAbsence.ts
+++ b/src/modules/05_leave/interface/request/AddAbsence.ts
@@ -16,7 +16,7 @@ interface OrdinationForm {
   leavebirthDate: object | null;
   leaveStartDate: object | null;
   leaveEndDate: object | null;
-  totalLeave: object | null;
+  leaveTotal: object | null;
   ordainDayOrdination: object | null;
   ordainDayLocationName: object | null;
   ordainDayLocationNumber: object | null;
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index d9d37b7..d280ef1 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -284,6 +284,7 @@ export const useLeaveStore = defineStore("Leave", () => {
   const dateSendLeave = ref<Date>(); //วันที่ยื่นใบลา
   const leaveTypeName = ref<string>(""); //Name ประเภทการลา
   const dear = ref<string>(""); //เรียน
+  const commanderPosition = ref<string>(""); //ตำแหน่งผู้บังคับบัญชา
   const fullName = ref<string>(""); //คำนำหน้า ชื่อ นามสกุล ผู้ยื่นขอ
   const positionName = ref<string>(""); //ตำแหน่งผู้ยื่นขอ
   const positionLevelName = ref<string>(""); //ระดับผู้ยื่นขอ
@@ -312,6 +313,7 @@ export const useLeaveStore = defineStore("Leave", () => {
         dateSendLeave.value = data.dateSendLeave;
         leaveTypeName.value = data.leaveTypeName;
         dear.value = data.dear;
+        commanderPosition.value = data.commanderPosition;
         fullName.value = data.fullName;
         positionName.value = data.positionName;
         positionLevelName.value = data.positionLevelName;
@@ -370,6 +372,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     dateSendLeave.value = data.dateSendLeave;
     typeLeave.value = data.leaveTypeName;
     dear.value = data.dear;
+    commanderPosition.value = data.commanderPosition;
     fullName.value = data.fullName;
     positionName.value = data.positionName;
     positionLevelName.value = data.positionLevelName;
@@ -383,6 +386,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     dateSendLeave.value = undefined;
     leaveTypeName.value = "";
     dear.value = "";
+    commanderPosition.value = "";
     fullName.value = "";
     positionName.value = "";
     positionLevelName.value = "";
@@ -427,6 +431,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     dateSendLeave,
     leaveTypeName,
     dear,
+    commanderPosition,
     fullName,
     positionName,
     positionLevelName,
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index 6afe67f..6688e3e 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -141,7 +141,7 @@ onMounted(async () => {
                 <div class="row">
                   <q-select
                     dense
-                    class="col-12 col-sm-6 col-md-4 inputgreen"
+                    class="col-12 col-sm-9 col-md-6 inputgreen"
                     outlined
                     v-model="model"
                     :options="option"
@@ -170,7 +170,7 @@ onMounted(async () => {
 
                 <div class="row q-mt-sm">
                   <div
-                    class="col-12 col-sm-6 col-md-3"
+                    class="col-12 col-sm-6 col-md-4"
                     v-if="model === 'LV-006' || model === 'LV-008'"
                   >
                     <q-select
diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index d37807b..73a5005 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -358,7 +358,7 @@ onMounted(async () => {
                   <q-select
                     readonly
                     dense
-                    class="col-12 col-sm-6 col-md-4"
+                    class="col-12 col-sm-9 col-md-6"
                     outlined
                     v-model="formData.leaveTypeName"
                     option-value="code"
@@ -370,7 +370,7 @@ onMounted(async () => {
                 </div>
                 <div class="row q-mt-sm">
                   <div
-                    class="col-12 col-sm-6 col-md-3"
+                    class="col-12 col-sm-6 col-md-4"
                     v-if="model === 'LV-006' || model === 'LV-008'"
                   >
                     <q-select