diff --git a/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue b/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
index d2d2021e5..ba85e5cf2 100644
--- a/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
+++ b/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
@@ -61,8 +61,8 @@ const formData = reactive<FremData>({
   leaveLimit: 0, //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
   leaveTotal: 0, //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
   leaveRemain: 0, //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
-  leaveStartDate: new Date(), //*วัน เดือน ปีเริ่มต้นลา
-  leaveEndDate: new Date(), //*วัน เดือน ปีสิ้นสุดลา
+  leaveDateStart: new Date(), //*วัน เดือน ปีเริ่มต้นลา
+  leaveDateEnd: new Date(), //*วัน เดือน ปีสิ้นสุดลา
   leaveWrote: "", //เขียนที่
   leaveAddress: "", //สถานที่ติดต่อขณะลา
   leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
@@ -137,8 +137,8 @@ function fetchDetailLeave(paramsId: string) {
     formData.leaveLimit = e.leaveLimit;
     formData.leaveTotal = e.leaveTotal;
     formData.leaveRemain = e.leaveRemain;
-    formData.leaveStartDate = e.leaveStartDate && date2Thai(e.leaveStartDate);
-    formData.leaveEndDate = e.leaveEndDate && date2Thai(e.leaveEndDate);
+    formData.leaveDateStart = e.leaveStartDate && date2Thai(e.leaveStartDate);
+    formData.leaveDateEnd = e.leaveEndDate && date2Thai(e.leaveEndDate);
     formData.status = e.status;
     formData.leaveWrote = e.leaveWrote;
     formData.leaveAddress = e.leaveAddress;
diff --git a/src/modules/09_leave/components/3_Report/DetailReport.vue b/src/modules/09_leave/components/3_Report/DetailReport.vue
new file mode 100644
index 000000000..7762359a6
--- /dev/null
+++ b/src/modules/09_leave/components/3_Report/DetailReport.vue
@@ -0,0 +1,480 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useRoute } from "vue-router";
+
+import type {
+  DataDateMonthObject,
+  DataOption,
+} from "@/modules/09_leave/interface/index/Main";
+
+import { useCounterMixin } from "@/stores/mixin";
+const route = useRoute();
+
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader, date2Thai, monthYear2Thai } =
+  mixin;
+
+const typeReport = route.params.type.toString();
+const titleReport = computed(() => {
+  const title =
+    typeReport === "daily"
+      ? "รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายวัน"
+      : typeReport === "monthly"
+      ? "รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายเดือน"
+      : typeReport === "yearly"
+      ? "รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายปี"
+      : typeReport === "leaveday"
+      ? "บัญชีแสดงวันลา"
+      : "";
+  return title;
+});
+
+const date = ref<Date>(new Date());
+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+});
+const year = ref<number>(new Date().getFullYear());
+const dateStart = ref<Date>(new Date());
+const dateEnd = ref<Date>(new Date());
+const employeeClass = ref<string>("");
+
+function monthYearThai(val: DataDateMonthObject) {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+}
+
+const employeeClassMain = ref<DataOption[]>([
+  { id: "perm", name: "ลูกจ้างประจำ" },
+  { id: "temp", name: "ลูกจ้างชั่วคราว" },
+]);
+const employeeClassOption = ref<DataOption[]>(employeeClassMain.value);
+
+function filterFnOptions(val: any, update: Function) {
+  update(() => {
+    employeeClassOption.value = employeeClassMain.value.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+const splitterModel = ref(14);
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const pdfSrc = ref<any>();
+const modalFull = ref<boolean>(false);
+/** ไปหน้าต่อไปของรายงาน */
+function nextPage() {
+  if (page.value < numOfPages.value) {
+    page.value++;
+  }
+}
+
+/** กลับหน้าก่อนหน้าของรายงาน */
+function backPage() {
+  if (page.value !== 1) {
+    page.value--;
+  }
+}
+
+/** กลับหน้าหลัก */
+function backHistory() {
+  window.history.back();
+}
+</script>
+<template>
+  <div class="toptitle">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="backHistory"
+    />
+    {{ titleReport }}
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="q-pa-md q-gutter-y-sm">
+      <q-toolbar style="padding: 0">
+        <div class="q-pr-xs" v-if="typeReport === 'daily'">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="date"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                :model-value="date ? date2Thai(date) : null"
+                :label="`${'วันที่'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="event" class="cursor-pointer" color="primary">
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="q-pr-xs" v-if="typeReport === 'monthly'">
+          <datepicker
+            v-model="dateMonth"
+            :locale="'th'"
+            autoApply
+            month-picker
+            :enableTimePicker="false"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                :label="`${'เดือนที่'}`"
+                :model-value="monthYearThai(dateMonth)"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    color="primary"
+                  ></q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="q-pr-xs" v-if="typeReport === 'yearly'">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="year"
+            class="col-2"
+            :locale="'th'"
+            autoApply
+            year-picker
+            :enableTimePicker="false"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                lazy-rules
+                outlined
+                :model-value="Number(year) + 543"
+                :label="`${'ปีงบประมาณ'}`"
+              >
+                <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="q-pl-xs" v-if="typeReport === 'leaveday'">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateStart"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                :model-value="dateStart ? date2Thai(dateStart) : null"
+                :label="`${'ตั้งเเต่วันที่'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="event" class="cursor-pointer" color="primary">
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="q-pl-xs" v-if="typeReport === 'leaveday'">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateEnd"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                :model-value="dateEnd ? date2Thai(dateEnd) : null"
+                :label="`${'ถึงวันที่'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="event" class="cursor-pointer" color="primary">
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+
+        <q-space />
+        <div class="q-py-xs">
+          <q-btn unelevated color="primary" @click="modalFull = true">
+            <q-icon left size="2em" name="mdi-eye-outline" />
+            <div>แสดงรายงาน</div>
+          </q-btn>
+        </div>
+      </q-toolbar>
+
+      <q-toolbar
+        v-if="typeReport === 'leaveday'"
+        class="q-pa-sm bg-grey-2"
+        style="border-radius: 5px"
+      >
+        <div class="q-pr-xs">
+          <q-select
+            class="bg-white"
+            outlined
+            dense
+            v-model="employeeClass"
+            :options="employeeClassOption"
+            label="สถานภาพ"
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            use-input
+            style="width: 230px"
+            @filter="(inputValue: any,
+      doneFn: Function) => filterFnOptions(inputValue, doneFn)"
+            ><template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </div></q-toolbar
+      >
+      <q-splitter
+        v-model="splitterModel"
+        horizontal
+        style="
+          height: 70vh;
+          border: 1px solid rgb(210, 210, 210);
+          border-radius: 5px;
+        "
+        before-class="overflow-hidden disable"
+        separator-class="bg-white disabled"
+      >
+        <template v-slot:before>
+          <div class="q-px-sm">
+            <div class="row items-start items-center">
+              <div class="col">
+                <q-btn
+                  padding="xs"
+                  icon="mdi-chevron-left"
+                  color="grey-2"
+                  text-color="grey-5"
+                  size="md"
+                  class="my-auto"
+                  @click="backPage"
+                  :disable="page == 1"
+                />
+              </div>
+              <div class="col-12 col-md-auto">
+                <div class="q-pa-md flex">
+                  หน้าที่ {{ page }} จาก {{ numOfPages }}
+                </div>
+              </div>
+              <div class="col text-right">
+                <q-btn
+                  padding="xs"
+                  icon="mdi-chevron-right"
+                  color="grey-2"
+                  text-color="grey-5"
+                  size="md"
+                  @click="nextPage"
+                  :disable="page === numOfPages"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+        <template v-slot:after>
+          <div class="q-pa-md">
+            <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+          </div>
+        </template>
+        <template v-slot:default>
+          <div class="q-pa-md">
+            <div class="row items-start items-center">
+              <div class="col">
+                <q-btn
+                  padding="xs"
+                  icon="mdi-chevron-left"
+                  color="grey-2"
+                  text-color="grey-5"
+                  size="md"
+                  class="my-auto"
+                  @click="backPage"
+                  :disable="page == 1"
+                />
+              </div>
+
+              <div class="col-12 col-md-auto">
+                <div class="q-pa-md flex">
+                  หน้าที่ {{ page }} จาก {{ numOfPages }}
+                </div>
+              </div>
+              <div class="col text-right">
+                <q-btn
+                  padding="xs"
+                  icon="mdi-chevron-right"
+                  color="grey-2"
+                  text-color="grey-5"
+                  size="md"
+                  @click="nextPage"
+                  :disable="page === numOfPages"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+      </q-splitter>
+    </div>
+  </q-card>
+
+  <!-- Dialog Full Screen -->
+  <q-dialog
+    v-model="modalFull"
+    persistent
+    :maximized="true"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card class="bg-white">
+      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          style="color: #ff8080; background-color: #ffdede"
+          size="12px"
+          v-close-popup
+        />
+      </div>
+      <div class="q-pa-md">
+        <div class="row items-start items-center">
+          <div class="col">
+            <q-btn
+              padding="xs"
+              icon="mdi-chevron-left"
+              color="grey-2"
+              text-color="grey-5"
+              size="md"
+              class="my-auto"
+              @click="backPage"
+              :disable="page == 1"
+            />
+          </div>
+          <div class="col-12 col-md-auto">
+            <div class="q-pa-md flex">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </div>
+          </div>
+          <div class="col text-right">
+            <q-btn
+              padding="xs"
+              icon="mdi-chevron-right"
+              color="grey-2"
+              text-color="grey-5"
+              size="md"
+              @click="nextPage"
+              :disable="page === numOfPages"
+            />
+          </div>
+        </div>
+        <div class="row items- items-center">
+          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+        </div>
+        <div class="row items- items-end">
+          <div class="col">
+            <q-btn
+              padding="xs"
+              icon="mdi-chevron-left"
+              color="grey-2"
+              text-color="grey-5"
+              size="md"
+              class="my-auto"
+              @click="backPage"
+              :disable="page == 1"
+            />
+          </div>
+          <div class="col-12 col-md-auto">
+            <div class="q-pa-md flex">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </div>
+          </div>
+          <div class="col text-right">
+            <q-btn
+              padding="xs"
+              icon="mdi-chevron-right"
+              color="grey-2"
+              text-color="grey-5"
+              size="md"
+              @click="nextPage"
+              :disable="page === numOfPages"
+            />
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/09_leave/interface/index/Main.ts b/src/modules/09_leave/interface/index/Main.ts
index e76abc1f2..58ada0de4 100644
--- a/src/modules/09_leave/interface/index/Main.ts
+++ b/src/modules/09_leave/interface/index/Main.ts
@@ -6,4 +6,8 @@ interface DataOption2 {
   id: number;
   name: string;
 }
-export type { DataOption, DataOption2 };
+interface DataDateMonthObject {
+  month: number;
+  year: number;
+}
+export type { DataOption, DataOption2, DataDateMonthObject };
diff --git a/src/modules/09_leave/router.ts b/src/modules/09_leave/router.ts
index 9724f3d98..57d06f504 100644
--- a/src/modules/09_leave/router.ts
+++ b/src/modules/09_leave/router.ts
@@ -1,6 +1,8 @@
 const workMain = () => import("@/modules/09_leave/views/WorkingMain.vue");
 const leaveMain = () => import("@/modules/09_leave/views/LeaveListMain.vue");
 const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue");
+const reportDetail = () =>
+  import("@/modules/09_leave/components/3_Report/DetailReport.vue");
 const leaveDetail = () =>
   import("@/modules/09_leave/components/2_Leave/DetailLeave.vue");
 const leaveDetailReject = () =>
@@ -102,4 +104,14 @@ export default [
       Role: "coin",
     },
   },
+  {
+    path: "/statistics-report/:type",
+    name: "/statistics-report-detail",
+    component: reportDetail,
+    meta: {
+      Auth: true,
+      Key: [9],
+      Role: "coin",
+    },
+  },
 ];
diff --git a/src/modules/09_leave/views/ReportMain.vue b/src/modules/09_leave/views/ReportMain.vue
index d57fa0695..4892317d7 100644
--- a/src/modules/09_leave/views/ReportMain.vue
+++ b/src/modules/09_leave/views/ReportMain.vue
@@ -1,9 +1,66 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+function nextPage(type: string,) {
+  router.push(`/statistics-report/${type}`);
+}
+</script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายงานสถิติ</div>
   <div>
-    <q-card flat bordered class="col-12 q-mt-sm"> </q-card>
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <div class="q-pa-md">
+        <q-item clickable dense class="hover-green" @click="nextPage('daily')">
+          <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('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 class="hover-green" @click="nextPage('leaveday')">
+          <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>
+      </div>
+    </q-card>
   </div>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.q-item.hover-green:hover {
+  background-color: #d5f1ee57;
+  border-radius: 2px;
+}
+.q-item.hover-green {
+  padding: 10px;
+}
+</style>