diff --git a/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue b/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
index 3ba975d4b..667fe49ea 100644
--- a/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
+++ b/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
@@ -119,9 +119,11 @@ const formData = reactive<FremData>({
   coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
   coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
   approveStep: "",
+  leaveSubTypeName: "",
   dear: "",
   leaveRange: "",
   profileType: "",
+  leaveRangeEnd: "",
 });
 
 const isLoadData = ref<boolean>(false);
@@ -270,6 +272,10 @@ async function fetchDetailLeave(paramsId: string) {
       formData.dear = data.dear ? data.dear : "-";
       formData.profileType = data.profileType;
 
+      formData.leaveSubTypeName = data.leaveSubTypeName;
+      formData.leaveRange = data.leaveRange;
+      formData.leaveRangeEnd = data.leaveRangeEnd;
+
       isLoadData.value = true;
 
       /** ส่งประเภทของการลาไป Function เช็คประเภทการลา*/
@@ -314,15 +320,24 @@ function checkLeaveType(leaveTypeId: string, formData: FremData) {
       checkForm.value = "FormChildbirth";
     } else if (type === "LV-005") {
       checkForm.value = "FormHoliday";
-    } else if (type === "LV-006" && formData.ordainDayLocationName !== "-") {
+    } else if (type === "LV-006" && formData.leaveSubTypeName === "ลาอุปสมบท") {
       checkForm.value = "FormUpasom";
-    } else if (type === "LV-006") {
+    } else if (
+      type === "LV-006" &&
+      formData.leaveSubTypeName === "ลาประกอบพิธีฮัจญ์"
+    ) {
       checkForm.value = "FormHajj";
     } else if (type === "LV-007") {
       checkForm.value = "FormCheckSelect";
-    } else if (type === "LV-008" && formData.studyDayTrainingSubject === "-") {
+    } else if (
+      type === "LV-008" &&
+      formData.leaveSubTypeName === "ลาไปศึกษาต่อ"
+    ) {
       checkForm.value = "FormStudy";
-    } else if (type === "LV-008") {
+    } else if (
+      type === "LV-008" &&
+      formData.leaveSubTypeName === "ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน"
+    ) {
       checkForm.value = "FormLeaveToTraining";
     } else if (type === "LV-009") {
       checkForm.value = "FormLeaveToWorkInternational";
@@ -564,11 +579,9 @@ onMounted(async () => {
                     <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
                     <div class="col text-primary">
                       {{
-                        checkForm !== "FormUpasom" && checkForm !== "FormHajj"
-                          ? formData.leaveTypeName
-                          : formData.hajjDayStatus
-                          ? "ลาประกอบพิธีฮัจญ์"
-                          : "ลาอุปสมบท"
+                        formData.leaveSubTypeName
+                          ? formData.leaveSubTypeName
+                          : formData.leaveTypeName
                       }}
                     </div>
                   </div>
@@ -751,9 +764,9 @@ onMounted(async () => {
                   </div>
                   <q-space />
 
+                  <!-- workflowRef?.permission.isUpdate && -->
                   <q-btn
                     v-if="
-                      workflowRef?.permission.isUpdate &&
                       checkPermission($route)?.attrIsUpdate &&
                       formData.reasonCommander === '-'
                     "
@@ -789,10 +802,10 @@ onMounted(async () => {
                   </div>
                   <q-space />
 
+                  <!-- workflowRef?.permission.isUpdate && -->
                   <div
                     class="row q-gutter-sm"
                     v-if="
-                      workflowRef?.permission.isUpdate &&
                       checkPermission($route)?.attrIsUpdate &&
                       formData.reasonOligarch === '-'
                     "
@@ -849,7 +862,7 @@ onMounted(async () => {
           </div>
 
           <!-- Workflow -->
-          <div class="col-xs-12 col-sm-12" v-if="isLoadData">
+          <!-- <div class="col-xs-12 col-sm-12" >
             <WorkFlow
               ref="workflowRef"
               :id="paramsId"
@@ -860,7 +873,7 @@ onMounted(async () => {
                   : 'SYS_LEAVE_LIST_EMP'
               "
             />
-          </div>
+          </div> -->
         </div>
       </div>
 
diff --git a/src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue b/src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue
index 8e6410111..6bf842384 100644
--- a/src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue
+++ b/src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue
@@ -148,6 +148,8 @@ const formData = reactive<FremData>({
   approveStep: "",
   dear: "",
   profileType: "",
+  leaveSubTypeName: "",
+  leaveRangeEnd: "",
 });
 
 const isLoadData = ref<boolean>(false);
@@ -280,6 +282,9 @@ async function fetchDetailLeave(paramsId: string) {
       formData.approveStep = data.approveStep;
       formData.dear = data.dear ? data.dear : "-";
       formData.profileType = data.profileType;
+      formData.leaveSubTypeName = data.leaveSubTypeName;
+      formData.leaveRange = data.leaveRange;
+      formData.leaveRangeEnd = data.leaveRangeEnd;
       isLoadData.value = true;
       await fectOptionType();
     })
@@ -544,7 +549,11 @@ async function onClickDownloadFile(id: string, fileName: string, type: string) {
                   <div class="col-12 row">
                     <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
                     <div class="col text-primary">
-                      {{ formData.leaveTypeName }}
+                      {{
+                        formData.leaveSubTypeName
+                          ? formData.leaveSubTypeName
+                          : formData.leaveTypeName
+                      }}
                     </div>
                   </div>
                   <div class="col-12 row">
@@ -714,7 +723,7 @@ async function onClickDownloadFile(id: string, fileName: string, type: string) {
           </div>
 
           <!-- Workflow -->
-          <div class="col-xs-12 col-sm-12" v-if="isLoadData">
+          <!-- <div class="col-xs-12 col-sm-12" v-if="isLoadData">
             <WorkFlow
               ref="workflowRef"
               :id="paramsId"
@@ -724,7 +733,7 @@ async function onClickDownloadFile(id: string, fileName: string, type: string) {
                   : 'SYS_LEAVE_LIST_EMP'
               "
             />
-          </div>
+          </div> -->
         </div>
       </div>
       <q-separator v-if="checkPermission($route)?.attrIsUpdate" />
diff --git a/src/modules/09_leave/components/05_Leave/TableList.vue b/src/modules/09_leave/components/05_Leave/TableList.vue
index df655646a..8d176e15b 100644
--- a/src/modules/09_leave/components/05_Leave/TableList.vue
+++ b/src/modules/09_leave/components/05_Leave/TableList.vue
@@ -316,7 +316,7 @@ onMounted(() => {
             }}
           </div>
           <div v-else-if="col.name == 'leaveTypeName'">
-            {{ convert(props.row) }}
+            {{ props.row.leaveTypeName ? `${props.row.leaveTypeName} ${props.row.leaveSubTypeName ? `(${props.row.leaveSubTypeName})`:''}`: '-' }}
           </div>
           <div v-else-if="col.name == 'profileType'">
             {{
diff --git a/src/modules/09_leave/components/05_Leave/formDetail/formCheckSelect.vue b/src/modules/09_leave/components/05_Leave/formDetail/formCheckSelect.vue
index ba4a4ed35..610f16a2f 100644
--- a/src/modules/09_leave/components/05_Leave/formDetail/formCheckSelect.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formCheckSelect.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore'; 
+
+const store = useLeavelistDataStore()
+const { converstType } = store
 const props = defineProps({
   data: {
     type: Object,
@@ -16,15 +20,15 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
+        <div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
+        <div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">{{ props.data.leaveTotal }}</div>
+        <div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">ได้รับหมายเรียกของ</div>
diff --git a/src/modules/09_leave/components/05_Leave/formDetail/formChildbirth.vue b/src/modules/09_leave/components/05_Leave/formDetail/formChildbirth.vue
index b35c1be5d..281c4fb40 100644
--- a/src/modules/09_leave/components/05_Leave/formDetail/formChildbirth.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formChildbirth.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore'; 
+
+const store = useLeavelistDataStore()
+const { converstType } = store
+
 const props = defineProps({
   data: {
     type: Object,
@@ -15,15 +20,15 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
+        <div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
+        <div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">{{ props.data.leaveTotal }}</div>
+        <div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">ชื่อภรรยา</div>
diff --git a/src/modules/09_leave/components/05_Leave/formDetail/formHajj.vue b/src/modules/09_leave/components/05_Leave/formDetail/formHajj.vue
index 7dd12a0ea..6c7bc6d42 100644
--- a/src/modules/09_leave/components/05_Leave/formDetail/formHajj.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formHajj.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore'; 
+
+const store = useLeavelistDataStore()
+const { converstType } = store
+
 const props = defineProps({
   data: {
     type: Object,
@@ -16,15 +21,15 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
+        <div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
+        <div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">{{ props.data.leaveTotal }}</div>
+        <div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
diff --git a/src/modules/09_leave/components/05_Leave/formDetail/formHoliday.vue b/src/modules/09_leave/components/05_Leave/formDetail/formHoliday.vue
index ae5a84829..82017876b 100644
--- a/src/modules/09_leave/components/05_Leave/formDetail/formHoliday.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formHoliday.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore'; 
+
+const store = useLeavelistDataStore()
+const { converstType } = store
+
 const props = defineProps({
   data: {
     type: Object,
@@ -24,16 +29,15 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
+        <div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
+        <div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">{{ props.data.leaveTotal }}</div>
-      </div>
+        <div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>      </div>
       <div class="row">
         <div class="col text-grey-8"></div>
         <div class="col">{{ props.data.leaveTypeDay }}</div>
diff --git a/src/modules/09_leave/components/05_Leave/formDetail/formLeave.vue b/src/modules/09_leave/components/05_Leave/formDetail/formLeave.vue
index cf320b0f2..2b5f615d9 100644
--- a/src/modules/09_leave/components/05_Leave/formDetail/formLeave.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formLeave.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore'; 
+
+const store = useLeavelistDataStore()
+const { converstType } = store
+
 const props = defineProps({
   data: {
     type: Object,
@@ -16,23 +21,15 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
+        <div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
+        <div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">
-          {{
-            props.data.leaveRange == "ALL"
-              ? props.data.leaveTotal + " วัน"
-              : props.data.leaveRange == "MORNING"
-              ? "ลาครึ่งวันเช้า (0.5)"
-              : "ลาครึ่งวันบ่าย (0.5)"
-          }}
-        </div>
+        <div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8"></div>
diff --git a/src/modules/09_leave/components/05_Leave/formDetail/formLeaveToTraining.vue b/src/modules/09_leave/components/05_Leave/formDetail/formLeaveToTraining.vue
index fca5af9a1..427d902eb 100644
--- a/src/modules/09_leave/components/05_Leave/formDetail/formLeaveToTraining.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formLeaveToTraining.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 /** importStore */
 import { useCounterMixin } from "@/stores/mixin";
+import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore'; 
 
+const store = useLeavelistDataStore()
+const { converstType } = store
 const mixin = useCounterMixin();
 const { calculateDurationYmd } = mixin;
 
@@ -48,22 +51,15 @@ function convertDateToEng(dataThia: string) {
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
+        <div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
+        <div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">
-          {{
-            calculateDurationYmd(
-              convertDateToEng(props.data.leaveDateStart),
-              convertDateToEng(props.data.leaveDateEnd)
-            )
-          }}
-        </div>
+        <div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">วันเดือนปีเกิด</div>
diff --git a/src/modules/09_leave/components/05_Leave/formDetail/formLeaveToWorkInternational.vue b/src/modules/09_leave/components/05_Leave/formDetail/formLeaveToWorkInternational.vue
index 141a2d214..b74b09239 100644
--- a/src/modules/09_leave/components/05_Leave/formDetail/formLeaveToWorkInternational.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formLeaveToWorkInternational.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore'; 
+
+const store = useLeavelistDataStore()
+const { converstType } = store
+
 const props = defineProps({
   data: {
     type: Object,
@@ -15,11 +20,11 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
+        <div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
+        <div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">สาเหตุการลา</div>
diff --git a/src/modules/09_leave/components/05_Leave/formDetail/formMain.vue b/src/modules/09_leave/components/05_Leave/formDetail/formMain.vue
index b3e8749a1..ec811ecd3 100644
--- a/src/modules/09_leave/components/05_Leave/formDetail/formMain.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formMain.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore'; 
+
+const store = useLeavelistDataStore()
+const { converstType } = store
+
 const props = defineProps({
   data: {
     type: Object,
@@ -19,11 +24,9 @@ const props = defineProps({
 
         <div class="col">
           {{
-            props.checkForm !== "FormUpasom" && props.checkForm !== "FormHajj"
-              ? props.data.leaveTypeName
-              : props.data.hajjDayStatus
-              ? "ลาประกอบพิธีฮัจญ์"
-              : "ลาอุปสมบท"
+            props.data.leaveSubTypeName
+              ? props.data.leaveSubTypeName
+              : props.data.leaveTypeName
           }}
         </div>
       </div>
diff --git a/src/modules/09_leave/components/05_Leave/formDetail/formSpouse.vue b/src/modules/09_leave/components/05_Leave/formDetail/formSpouse.vue
index 407f8d495..c85080237 100644
--- a/src/modules/09_leave/components/05_Leave/formDetail/formSpouse.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formSpouse.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 /** importStore */
 import { useCounterMixin } from "@/stores/mixin";
+import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore'; 
 
+const store = useLeavelistDataStore()
+const { converstType } = store
 const mixin = useCounterMixin();
 const { calculateDurationYmd } = mixin;
 
@@ -48,22 +51,15 @@ function convertDateToEng(dataThia: string) {
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
+        <div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
+        <div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">
-          {{
-            calculateDurationYmd(
-              convertDateToEng(props.data.leaveDateStart),
-              convertDateToEng(props.data.leaveDateEnd)
-            )
-          }}
-        </div>
+        <div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">วันเดือนปีเกิด</div>
diff --git a/src/modules/09_leave/components/05_Leave/formDetail/formStudy.vue b/src/modules/09_leave/components/05_Leave/formDetail/formStudy.vue
index 8fa8a26d6..de7716ce0 100644
--- a/src/modules/09_leave/components/05_Leave/formDetail/formStudy.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formStudy.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 /** importStore */
 import { useCounterMixin } from "@/stores/mixin";
+import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore'; 
 
+const store = useLeavelistDataStore()
+const { converstType } = store
 const mixin = useCounterMixin();
 const { calculateDurationYmd } = mixin;
 
@@ -49,22 +52,15 @@ function convertDateToEng(dataThia: string) {
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
+        <div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
+        <div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">
-          {{
-            calculateDurationYmd(
-              convertDateToEng(props.data.leaveDateStart),
-              convertDateToEng(props.data.leaveDateEnd)
-            )
-          }}
-        </div>
+        <div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">วันเดือนปีเกิด</div>
diff --git a/src/modules/09_leave/components/05_Leave/formDetail/formUpasom.vue b/src/modules/09_leave/components/05_Leave/formDetail/formUpasom.vue
index 52d4421ca..f11338be3 100644
--- a/src/modules/09_leave/components/05_Leave/formDetail/formUpasom.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formUpasom.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore'; 
+
+const store = useLeavelistDataStore()
+const { converstType } = store
 const props = defineProps({
   data: {
     type: Object,
@@ -16,15 +20,15 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
+        <div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
+        <div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">{{ props.data.leaveTotal }}</div>
+        <div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
       </div>
       <div class="row">
         <div class="col text-grey-8">วันเดือนปีเกิด</div>
diff --git a/src/modules/09_leave/components/05_Leave/formDetail/formVocationalRehabilitation.vue b/src/modules/09_leave/components/05_Leave/formDetail/formVocationalRehabilitation.vue
index 26f5da8da..3c0c178e5 100644
--- a/src/modules/09_leave/components/05_Leave/formDetail/formVocationalRehabilitation.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formVocationalRehabilitation.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
+
+const store = useLeavelistDataStore();
+const { converstType } = store;
+
 const props = defineProps({
   data: {
     type: Object,
@@ -15,11 +20,34 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
+        <div class="col">
+          {{ props.data.leaveDateStart }}
+          {{
+            `${
+              props.data.leaveRange && props.data.leaveRange !== "ALL"
+                ? `(${converstType(props.data.leaveRange)})`
+                : ""
+            }`
+          }}
+        </div>
       </div>
       <div class="row">
         <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
+        <div class="col">
+          {{ props.data.leaveDateEnd }}
+          {{
+            `${
+              props.data.leaveDateStart !== props.data.leaveDateEnd
+                ? `${
+                    props.data.leaveRangeEnd &&
+                    props.data.leaveRangeEnd !== "ALL"
+                      ? `(${converstType(props.data.leaveRangeEnd)})`
+                      : ""
+                  }`
+                : ""
+            }`
+          }}
+        </div>
       </div>
       <div class="row">
         <div class="col text-grey-8">สาเหตุการลา</div>
diff --git a/src/modules/09_leave/interface/request/leave.ts b/src/modules/09_leave/interface/request/leave.ts
index e09249b0f..a751de73f 100644
--- a/src/modules/09_leave/interface/request/leave.ts
+++ b/src/modules/09_leave/interface/request/leave.ts
@@ -28,6 +28,7 @@ interface FremData {
   reasonCommander: string; //เหตุผลผู้บังคับบัญชา
   reasonOligarch: string; //เหตุผลผู้มีอำนาจ
   positionName: string; //ตำแหน่งผู้ยื่นขอ
+  leaveSubTypeName: string; //ตำแหน่งผู้ยื่นขอ
   positionLevelName: string; //ระดับผู้ยื่นขอ
   organizationName: string; //สังกัดผู้ยื่นขอ
   leaveTypeName: string; //Name ประเภทการลา
@@ -94,6 +95,7 @@ interface FremData {
   dear: string;
   leaveRange?: string;
   profileType: string;
+  leaveRangeEnd: string;
 }
 
 export type { ListsData, FremData, QuerySting, DateFilter };
diff --git a/src/modules/09_leave/interface/response/leave.ts b/src/modules/09_leave/interface/response/leave.ts
index cac8aecda..bc8a54ed2 100644
--- a/src/modules/09_leave/interface/response/leave.ts
+++ b/src/modules/09_leave/interface/response/leave.ts
@@ -13,6 +13,9 @@ interface ListLeave {
   fullName: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา
   dateSendLeave: Date | null; //วันที่ยื่นใบลา
   status: string | null; //ส
+  leaveSubTypeName: string; //ส
+  leaveRange: string; //ส
+  leaveRangeEnd: string; //ส
   citizenId?: string;
   leaveStartDate?: Date | null;
   leaveEndDate?: Date | null;
diff --git a/src/modules/09_leave/stores/LeaveStore.ts b/src/modules/09_leave/stores/LeaveStore.ts
index 93cce6878..b1c006684 100644
--- a/src/modules/09_leave/stores/LeaveStore.ts
+++ b/src/modules/09_leave/stores/LeaveStore.ts
@@ -48,6 +48,9 @@ export const useLeavelistDataStore = defineStore("leave", () => {
       profileType: e.profileType ?? "-",
       leaveTypeId: e.leaveTypeId ?? "-",
       citizenId: e.citizenId ?? "-",
+      leaveSubTypeName: e.leaveSubTypeName,
+      leaveRange: e.leaveRange ?? "-",
+      leaveRangeEnd: e.leaveRangeEnd ?? "-",
       fullName:
         e.fullName !== undefined && e.fullName !== null && e.fullName !== ""
           ? e.fullName
@@ -65,7 +68,7 @@ export const useLeavelistDataStore = defineStore("leave", () => {
         e.leaveStartDate && e.leaveEndDate
           ? e.leaveStartDate === e.leaveEndDate
             ? date2Thai(e.leaveEndDate)
-            : date2Thai(e.leaveStartDate) + " - " + date2Thai(e.leaveEndDate)
+            : `${date2Thai(e.leaveStartDate)}${e.leaveRange !== 'ALL' ? ` (${converstType(e.leaveRange)})`:''} - ${date2Thai(e.leaveEndDate)}${e.leaveRangeEnd !== 'ALL' ? ` (${converstType(e.leaveRangeEnd)})`:''}`
           : "-",
       status: e.status && convertSatatus(e.status),
     }));
@@ -73,6 +76,17 @@ export const useLeavelistDataStore = defineStore("leave", () => {
     rows.value = mainData.value;
   }
 
+  function converstType(val: string) {
+    switch (val) {
+      case "ALL":
+        return "";
+      case "MORNING":
+        return "ครึ่งวันเช้า";
+      case "AFTERNOON":
+        return "ครึ่งวันบ่าย";
+    }
+  }
+
   /**
    * ฟังก์ชั่น fetchListLeave
    * @param data รับข้อมูลจาก Page
@@ -82,6 +96,7 @@ export const useLeavelistDataStore = defineStore("leave", () => {
       id: e.id,
       profileType: e.profileType ?? "-",
       leaveTypeName: e.leaveTypeName,
+      leaveSubTypeName: e.leaveSubTypeName,
       leaveTypeId: e.leaveTypeId,
       fullName: e.fullName,
       dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave),
@@ -173,7 +188,7 @@ export const useLeavelistDataStore = defineStore("leave", () => {
     dataToobar.value = val.map((e: any) => ({
       id: e.id,
       name: e.name,
-      code:e.code
+      code: e.code,
     }));
   }
 
@@ -191,6 +206,7 @@ export const useLeavelistDataStore = defineStore("leave", () => {
     convertLeaveDaytype,
     leaveType,
     colorType,
+    converstType,
     leaveTypeOption,
   };
 });
diff --git a/src/modules/15_development/components/scholarship/DetailView.vue b/src/modules/15_development/components/scholarship/DetailView.vue
index 94d25c303..20dcf8e0e 100644
--- a/src/modules/15_development/components/scholarship/DetailView.vue
+++ b/src/modules/15_development/components/scholarship/DetailView.vue
@@ -924,7 +924,7 @@ onMounted(async () => {
             <div class="row q-col-gutter-md">
               <div class="col-3">
                 <datepicker
-                  menu-class-name="modalfix"
+                  
                   v-model="formBody.scholarshipYear"
                   :locale="'th'"
                   autoApply
@@ -1054,7 +1054,7 @@ onMounted(async () => {
               </div>
               <div class="col-3">
                 <datepicker
-                  menu-class-name="modalfix"
+                  
                   v-model="formBody.bookNoDate"
                   :locale="'th'"
                   autoApply
@@ -1097,7 +1097,7 @@ onMounted(async () => {
               </div>
               <div class="col-2">
                 <datepicker
-                  menu-class-name="modalfix"
+                  
                   v-model="formBody.bookApproveDate"
                   :locale="'th'"
                   autoApply
@@ -1149,7 +1149,7 @@ onMounted(async () => {
                   outlined
                   dense
                   label="เวลาราชการ"
-                  :disable="checkRouteDetail"
+                  :readonly="checkRouteDetail"
                   v-model="formBody.useOfficialTime"
                   :options="useOfficialTimeOp"
                   option-value="id"
@@ -1192,7 +1192,7 @@ onMounted(async () => {
               </div>
               <div class="col-3">
                 <datepicker
-                  menu-class-name="modalfix"
+                  
                   v-model="formBody.contractDate"
                   :locale="'th'"
                   autoApply
@@ -1250,7 +1250,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.reportBackNoDate"
                       :locale="'th'"
                       autoApply
@@ -1289,7 +1289,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.reportBackDate"
                       :locale="'th'"
                       autoApply
@@ -1437,7 +1437,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
@@ -1482,7 +1482,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.endDate"
                       :locale="'th'"
                       autoApply
@@ -1566,7 +1566,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.studyStartDate"
                       :locale="'th'"
                       autoApply
@@ -1607,7 +1607,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.studyEndDate"
                       :locale="'th'"
                       :readonly="checkRouteDetail"
@@ -1673,7 +1673,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
@@ -1716,7 +1716,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
@@ -1820,7 +1820,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
@@ -1865,7 +1865,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.endDate"
                       :locale="'th'"
                       :readonly="checkRouteDetail"
@@ -1949,7 +1949,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.studyStartDate"
                       :locale="'th'"
                       :readonly="checkRouteDetail"
@@ -1990,7 +1990,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.studyEndDate"
                       :locale="'th'"
                       autoApply
@@ -2088,7 +2088,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.startDate"
                       :locale="'th'"
                       :readonly="checkRouteDetail"
@@ -2133,7 +2133,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.endDate"
                       :locale="'th'"
                       autoApply
@@ -2217,7 +2217,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.studyStartDate"
                       :locale="'th'"
                       :readonly="checkRouteDetail"
@@ -2258,7 +2258,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.studyEndDate"
                       :readonly="checkRouteDetail"
                       :locale="'th'"
@@ -2331,7 +2331,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
@@ -2374,7 +2374,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
@@ -2575,7 +2575,7 @@ onMounted(async () => {
 
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
@@ -2624,7 +2624,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.endDate"
                       :locale="'th'"
                       autoApply
@@ -2711,7 +2711,7 @@ onMounted(async () => {
 
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
@@ -2758,7 +2758,7 @@ onMounted(async () => {
                   </div>
                   <div class="col-3">
                     <datepicker
-                      menu-class-name="modalfix"
+                      
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
@@ -2868,7 +2868,7 @@ onMounted(async () => {
               </div>
               <div class="col-3">
                 <datepicker
-                  menu-class-name="modalfix"
+                  
                   v-model="formBody.startDate"
                   :locale="'th'"
                   autoApply
@@ -2914,7 +2914,7 @@ onMounted(async () => {
               </div>
               <div class="col-3">
                 <datepicker
-                  menu-class-name="modalfix"
+                  
                   v-model="formBody.endDate"
                   :locale="'th'"
                   :readonly="checkRouteDetail"
@@ -2982,7 +2982,7 @@ onMounted(async () => {
               </div>
               <div class="col-3">
                 <datepicker
-                  menu-class-name="modalfix"
+                  
                   v-model="formBody.studyStartDate"
                   :locale="'th'"
                   :readonly="checkRouteDetail"
@@ -3028,7 +3028,7 @@ onMounted(async () => {
               </div>
               <div class="col-3">
                 <datepicker
-                  menu-class-name="modalfix"
+                  
                   v-model="formBody.studyEndDate"
                   :locale="'th'"
                   autoApply
@@ -3112,7 +3112,7 @@ onMounted(async () => {
               </div>
               <div class="col-3">
                 <datepicker
-                  menu-class-name="modalfix"
+                  
                   v-model="formBody.studyAbroadStartDate"
                   :locale="'th'"
                   autoApply
@@ -3153,7 +3153,7 @@ onMounted(async () => {
               </div>
               <div class="col-3">
                 <datepicker
-                  menu-class-name="modalfix"
+                  
                   v-model="formBody.studyAbroadEndDate"
                   :locale="'th'"
                   autoApply