diff --git a/src/modules/09_leave/components/3_Report/DetailReport.vue b/src/modules/09_leave/components/3_Report/DetailReport.vue
index 0683e748b..2483038c7 100644
--- a/src/modules/09_leave/components/3_Report/DetailReport.vue
+++ b/src/modules/09_leave/components/3_Report/DetailReport.vue
@@ -46,8 +46,8 @@ const dateMonth = ref<DataDateMonthObject>({
   year: new Date().getFullYear(),
 });
 const year = ref<number>(new Date().getFullYear());
-const dateStart = ref<Date>(new Date());
-const dateEnd = ref<Date>(new Date());
+const dateStart = ref<Date>(new Date(year.value, 9, 1));
+const dateEnd = ref<Date>(new Date(year.value, 8, 30));
 const employeeClass = ref<string>("employee");
 const yearType = ref<string>("FULL");
 const filterType = ref<string>("daily");
@@ -68,7 +68,8 @@ const employeeClassMain = ref<DataOption[]>([
 ]);
 const yearTypeOptionMain = ref<DataOption[]>([
   { id: "FULL", name: "รายปี" },
-  { id: "HAFT", name: "ครึ่งปี" },
+  { id: "FIRSTHAFT", name: "ครึ่งปีแรก" },
+  { id: "SECONDHAFT", name: "ครึ่งปีหลัง" },
 ]);
 const employeeClassOption = ref<DataOption[]>(employeeClassMain.value);
 const yearTypeOptionOption = ref<DataOption[]>(yearTypeOptionMain.value);
@@ -145,10 +146,19 @@ async function fetchReportTimeRecords(body: any) {
     });
 }
 
-async function fetchLeaveday(type: string, year: string) {
+async function fetchLeaveday(
+  type: string,
+  year: string,
+  startDate: Date,
+  endDate: Date
+) {
   showLoader();
+
   const body = {
     type: year,
+    year: 2024,
+    startDate: dateToISO(startDate),
+    endDate: dateToISO(endDate),
   };
 
   await http
@@ -188,7 +198,6 @@ async function updateMonth() {
 
   // วันสิ้นสุดของเดือนถัดไป
   const lastDay = new Date(dateMonth.value.year, mount, 0);
-  console.log(firstDay, lastDay);
 
   const body = {
     startDate: dateToISO(firstDay),
@@ -263,7 +272,23 @@ async function genReportXLSX(data: any) {
 }
 
 async function updateLeaveday() {
-  fetchLeaveday(employeeClass.value, yearType.value);
+  if (yearType.value === "FULL") {
+    dateStart.value = new Date(year.value, 9, 1);
+    dateEnd.value = new Date(year.value, 8, 30);
+  } else if (yearType.value === "FIRSTHAFT") {
+    dateStart.value = new Date(year.value, 9, 1);
+    dateEnd.value = new Date(year.value, 2, 31);
+  } else if (yearType.value === "SECONDHAFT") {
+    dateStart.value = new Date(year.value, 3, 1);
+    dateEnd.value = new Date(year.value, 8, 30);
+  }
+
+  fetchLeaveday(
+    employeeClass.value,
+    yearType.value,
+    dateStart.value,
+    dateEnd.value
+  );
 }
 
 async function downloadReport(data: any, type: string) {
@@ -281,9 +306,15 @@ onMounted(() => {
     startDate: dateToISO(date.value),
     endDate: dateToISO(date.value),
   };
+
   typeReport === "time-records"
     ? fetchReportTimeRecords(body)
-    : fetchLeaveday(employeeClass.value, yearType.value);
+    : fetchLeaveday(
+        employeeClass.value,
+        yearType.value,
+        dateStart.value,
+        dateEnd.value
+      );
 });
 </script>
 <template>
@@ -516,19 +547,19 @@ onMounted(() => {
         </div>
       </q-toolbar>
 
-      <!-- <q-toolbar
+      <q-toolbar
         v-if="typeReport === 'leaveday'"
         class="q-pa-sm bg-grey-2"
         style="border-radius: 5px"
       >
         <div class="q-pr-xs">
           <datepicker
-            menu-class-name="modalfix"
-            v-model="dateStart"
+            v-model="year"
             :locale="'th'"
             autoApply
+            year-picker
             :enableTimePicker="false"
-            week-start="0"
+            @update:model-value="updateLeaveday"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -537,29 +568,30 @@ onMounted(() => {
             <template #trigger>
               <q-input
                 class="bg-white"
-                outlined
                 dense
                 lazy-rules
-                borderless
-                :model-value="dateStart ? date2Thai(dateStart) : null"
-                :label="`${'ตั้งเเต่วันที่'}`"
+                outlined
+                :model-value="Number(year) + 543"
+                :label="`${'ปีงบประมาณ'}`"
               >
                 <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" color="primary">
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
                   </q-icon>
                 </template>
               </q-input>
             </template>
           </datepicker>
-        </div>
-        <div class="q-pr-xs">
-          <datepicker
+          <!-- <datepicker
             menu-class-name="modalfix"
-            v-model="dateEnd"
+            v-model="year"
             :locale="'th'"
             autoApply
             :enableTimePicker="false"
-            week-start="0"
+            year-picker
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -581,9 +613,75 @@ onMounted(() => {
                 </template>
               </q-input>
             </template>
+          </datepicker> -->
+        </div>
+        <div class="q-pr-xs">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateStart"
+            :locale="'th'"
+            autoApply
+            :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
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                :model-value="dateStart ? date2Thai(dateStart) : null"
+                :label="`${'ตั้งเเต่วันที่'}`"
+                readonly
+              >
+                <template v-slot:prepend>
+                  <q-icon name="event" class="cursor-pointer" color="primary">
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
           </datepicker>
         </div>
-      </q-toolbar> -->
+        <div class="q-pr-xs">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateEnd"
+            :locale="'th'"
+            autoApply
+            :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
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                :model-value="dateEnd ? date2Thai(dateEnd) : null"
+                :label="`${'ถึงวันที่'}`"
+                readonly
+              >
+                <template v-slot:prepend>
+                  <q-icon name="event" class="cursor-pointer" color="primary">
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+      </q-toolbar>
       <q-splitter
         v-model="splitterModel"
         horizontal