diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts
index 8219083b5..6988f5e4e 100644
--- a/src/api/09_leave/api.leave.ts
+++ b/src/api/09_leave/api.leave.ts
@@ -1,5 +1,6 @@
 import env from "../index";
 const leave = `${env.API_URI}/leave`;
+const leaveReport = `${env.API_URI}/leave/report`;
 export default {
   roundDutytime: () => `${leave}/duty-time`,
   roundDutytimeByid: (id: string) => `${leave}/duty-time/${id}`,
@@ -33,4 +34,8 @@ export default {
   leaveReportReject: (id: string) => `${leave}/report/reject/${id}`,
   leaveDeleteApprove: (id: string) => `${leave}/admin/delete/approve/${id}`,
   leaveDeleteReject: (id: string) => `${leave}/admin/delete/reject/${id}`,
+
+  /**รายงาน */
+  leaveReportTimeRecords: () => `${leaveReport}/time-records/officer`,
+  leaveReportLeaveday: (type: string) => `${leaveReport}/leaveday/${type}`,
 };
diff --git a/src/modules/09_leave/components/3_Report/DetailReport.vue b/src/modules/09_leave/components/3_Report/DetailReport.vue
index e50c97593..0ebda31dd 100644
--- a/src/modules/09_leave/components/3_Report/DetailReport.vue
+++ b/src/modules/09_leave/components/3_Report/DetailReport.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import axios from "axios";
 
 import type {
   DataDateMonthObject,
@@ -8,10 +13,21 @@ import type {
 } from "@/modules/09_leave/interface/index/Main";
 
 import { useCounterMixin } from "@/stores/mixin";
-const route = useRoute();
 
+const route = useRoute();
 const mixin = useCounterMixin();
-const { date2Thai, monthYear2Thai } = mixin;
+const $q = useQuasar();
+const {
+  showLoader,
+  hideLoader,
+  date2Thai,
+  monthYear2Thai,
+  dateToISO,
+  messageError,
+} = mixin;
+
+const apiGenReport =
+  "https://report-server.frappet.synology.me/api/v1/report-template/xlsx";
 
 const typeReport = route.params.type.toString();
 const titleReport = computed(() => {
@@ -33,7 +49,7 @@ const year = ref<number>(new Date().getFullYear());
 const dateStart = ref<Date>(new Date());
 const dateEnd = ref<Date>(new Date());
 const employeeClass = ref<string>("employee");
-const yearType = ref<string>("fullyear");
+const yearType = ref<string>("FULL");
 const filterType = ref<string>("daily");
 
 function monthYearThai(val: DataDateMonthObject) {
@@ -47,12 +63,12 @@ const filterTypeMain = ref<DataOption[]>([
   { id: "yearly", name: "รายปี" },
 ]);
 const employeeClassMain = ref<DataOption[]>([
-  { id: "employee", name: "ข้าราชการ" },
-  { id: "perm", name: "ลูกจ้างประจำ" },
+  { id: "employee", name: "ลูกจ้างประจำ" },
+  { id: "officer", name: "ข้าราชการ" },
 ]);
 const yearTypeOptionMain = ref<DataOption[]>([
-  { id: "fullyear", name: "รายปี" },
-  { id: "halfyear", name: "ครึ่งปี" },
+  { id: "FULL", name: "รายปี" },
+  { id: "HAFT", name: "ครึ่งปี" },
 ]);
 const employeeClassOption = ref<DataOption[]>(employeeClassMain.value);
 const yearTypeOptionOption = ref<DataOption[]>(yearTypeOptionMain.value);
@@ -113,6 +129,125 @@ function backPage() {
 function backHistory() {
   window.history.back();
 }
+
+async function fetchReportTimeRecords(body: any) {
+  showLoader();
+  await http
+    .post(config.API.leaveReportTimeRecords(), body)
+    .then((res) => {
+      const data = res.data.result;
+      data && genReport(data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+async function fetchLeaveday(type: string, year: string) {
+  showLoader();
+  const body = {
+    type: year,
+  };
+
+  await http
+    .post(config.API.leaveReportLeaveday(type), body)
+    .then((res) => {
+      console.log(res);
+      const data = res.data.result;
+      data && genReport(data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {});
+}
+
+async function updateFilterType() {
+  // console.log(filterType.value);
+  filterType.value === "daily"
+    ? updateDte()
+    : filterType.value === "monthly"
+    ? updateMonth()
+    : updateYear();
+}
+
+async function updateDte() {
+  const body = {
+    startDate: dateToISO(date.value),
+    endDate: dateToISO(date.value),
+  };
+  fetchReportTimeRecords(body);
+}
+
+async function updateMonth() {
+  const mount = dateMonth.value.month + 1;
+
+  //  วันเริ่มต้นของเดือน
+  const firstDay = new Date(dateMonth.value.year, mount - 1, 1);
+
+  // วันสิ้นสุดของเดือนถัดไป
+  const lastDay = new Date(dateMonth.value.year, mount, 0);
+  console.log(firstDay, lastDay);
+
+  const body = {
+    startDate: dateToISO(firstDay),
+    endDate: dateToISO(lastDay),
+  };
+  fetchReportTimeRecords(body);
+}
+
+async function updateYear() {
+  // วันเริ่มต้นของปี
+  const firstDay = new Date(year.value, 0, 1);
+  // วันสิ้นสุดของปี
+  const lastDay = new Date(year.value, 11, 31);
+
+  const body = {
+    startDate: dateToISO(firstDay),
+    endDate: dateToISO(lastDay),
+  };
+  fetchReportTimeRecords(body);
+}
+
+async function genReport(data: any) {
+  await axios
+    .post(apiGenReport, data, {
+      headers: {
+        accept: "application/pdf",
+        "content-Type": "application/json",
+      },
+      responseType: "blob",
+    })
+    .then((res) => {
+      const blob = new Blob([res.data]);
+      const objectUrl = URL.createObjectURL(blob);
+      console.log(blob);
+
+      pdfSrc.value = objectUrl;
+      console.log(pdfSrc.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function updateLeaveday() {
+  fetchLeaveday(employeeClass.value, yearType.value);
+}
+
+onMounted(() => {
+  console.log(typeReport);
+  const body = {
+    startDate: dateToISO(date.value),
+    endDate: dateToISO(date.value),
+  };
+  typeReport === "time-records"
+    ? fetchReportTimeRecords(body)
+    : fetchLeaveday(employeeClass.value, yearType.value);
+});
 </script>
 <template>
   <div class="toptitle">
@@ -144,6 +279,7 @@ function backHistory() {
             option-value="id"
             use-input
             style="width: 230px"
+            @update:model-value="updateFilterType"
             @filter="(inputValue: any,
       doneFn: Function) => filterFnOptions(inputValue, doneFn,'filterType')"
             ><template v-slot:no-option>
@@ -167,6 +303,7 @@ function backHistory() {
             option-value="id"
             use-input
             style="width: 230px"
+            @update:model-value="updateLeaveday"
             @filter="(inputValue: any,
       doneFn: Function) => filterFnOptions(inputValue, doneFn,'employeeClass')"
             ><template v-slot:no-option>
@@ -188,6 +325,7 @@ function backHistory() {
             option-value="id"
             use-input
             style="width: 230px"
+            @update:model-value="updateLeaveday"
             @filter="(inputValue: any,
       doneFn: Function) => filterFnOptions(inputValue, doneFn,'yearType')"
             ><template v-slot:no-option>
@@ -219,6 +357,7 @@ function backHistory() {
             autoApply
             :enableTimePicker="false"
             week-start="0"
+            @update:model-value="updateDte"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -249,6 +388,7 @@ function backHistory() {
             autoApply
             month-picker
             :enableTimePicker="false"
+            @update:model-value="updateMonth"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -284,6 +424,7 @@ function backHistory() {
             autoApply
             year-picker
             :enableTimePicker="false"
+            @update:model-value="updateYear"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -312,7 +453,7 @@ function backHistory() {
         </div>
       </q-toolbar>
 
-      <q-toolbar
+      <!-- <q-toolbar
         v-if="typeReport === 'leaveday'"
         class="q-pa-sm bg-grey-2"
         style="border-radius: 5px"
@@ -379,7 +520,7 @@ function backHistory() {
             </template>
           </datepicker>
         </div>
-      </q-toolbar>
+      </q-toolbar> -->
       <q-splitter
         v-model="splitterModel"
         horizontal
diff --git a/src/modules/09_leave/views/ReportMain.vue b/src/modules/09_leave/views/ReportMain.vue
index 76848de66..5e8844c82 100644
--- a/src/modules/09_leave/views/ReportMain.vue
+++ b/src/modules/09_leave/views/ReportMain.vue
@@ -12,7 +12,12 @@ function nextPage(type: string) {
   <div>
     <q-card flat bordered class="col-12 q-mt-sm">
       <div class="q-pa-md">
-        <q-item clickable dense class="hover-green" @click="nextPage('time-records')">
+        <q-item
+          clickable
+          dense
+          class="hover-green"
+          @click="nextPage('time-records')"
+        >
           <q-item-section avatar>
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
@@ -21,29 +26,6 @@ function nextPage(type: string) {
           </q-item-section>
         </q-item>
 
-        <!-- <q-item
-          clickable
-          dense
-          class="hover-green"
-          @click="nextPage('monthly')"
-        >
-          <q-item-section avatar>
-            <q-icon color="primary" name="mdi-file" size="xs" />
-          </q-item-section>
-          <q-item-section class="text-dark">
-            รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายเดือน
-          </q-item-section>
-        </q-item> -->
-
-        <!-- <q-item clickable dense class="hover-green" @click="nextPage('yearly')">
-          <q-item-section avatar>
-            <q-icon color="primary" name="mdi-file" size="xs" />
-          </q-item-section>
-          <q-item-section class="text-dark">
-            รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายปี
-          </q-item-section>
-        </q-item> -->
-
         <q-item
           clickable
           dense