diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts
index 3d345b7de..338f59175 100644
--- a/src/api/09_leave/api.leave.ts
+++ b/src/api/09_leave/api.leave.ts
@@ -55,6 +55,7 @@ export default {
   leaveReportLeave2: (type: string) => `${leaveReport}/leave2/${type}`,
 
   addApproverByType:(type:string,profileType:string,id:string)=>`${leave}/${profileType}/add-approver/${type}/${id}`,
-  sendApprove:(id:string)=>`${leave}/admin/approve/officer/${id}`
+  sendApprove:(id:string)=>`${leave}/admin/approve/officer/${id}`,
 
+  leaveReportAPI:(type:string)=>`${leave}/report/download/time-records/${type}`
 };
diff --git a/src/modules/09_leave/views/06_ReportMain.vue b/src/modules/09_leave/views/06_ReportMain.vue
index 9e7eacc3c..5de0fb5ec 100644
--- a/src/modules/09_leave/views/06_ReportMain.vue
+++ b/src/modules/09_leave/views/06_ReportMain.vue
@@ -30,7 +30,7 @@ const $q = useQuasar();
 const route = useRoute();
 
 const { fetchStructureTree } = useStructureTree();
-const { date2Thai, dateToISO, messageError, monthYear2Thai } =
+const { date2Thai, dateToISO, messageError, monthYear2Thai,showLoader,hideLoader } =
   useCounterMixin();
 
 const year = ref<number>(new Date().getFullYear());
@@ -395,6 +395,68 @@ function formatWeekDisplay(week: Date[]) {
   }
 }
 
+const isLoad = ref<boolean>(false);
+
+/**
+ *
+ * @param isName ชื่อไฟล์
+ * @param fileType pdf/xlsx
+ */
+function getReport(isName: string) {
+  showLoader()
+  const body = {
+    type:
+      leaveType.value === "FULL"
+        ? "FULL"
+        : leaveType.value === "MONTH"
+        ? "MONTH"
+        : leaveType.value == "HAFT"
+        ? "HAFT"
+        : leaveType.value == "DAY"
+        ? "DAY"
+        : "WEEKLY",
+    startDate: dateToISO(dateStart.value),
+    endDate: dateToISO(dateEnd.value),
+    nodeId: nodeId.value,
+    node: nodeLevel.value,
+  };
+  http
+    .post(config.API.leaveReportAPI(employeeClass.value), body, {
+      headers: {
+        accept:
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        "content-Type": "application/json",
+      },
+
+      responseType: "blob",
+    })
+    .then((res) => {
+      const data = res.data;
+      if (data) {
+        // สร้าง Blob จาก array buffer
+        const blob = new Blob([data]);
+
+        // สร้าง URL สำหรับไฟล์ Blob
+        const url = URL.createObjectURL(blob);
+
+        // สร้างลิงก์เพื่อดาวน์โหลดไฟล์
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = `${isName}.xlsx`; // กำหนดชื่อไฟล์ที่จะดาวน์โหลด
+        document.body.appendChild(link);
+        link.click();
+
+        // ลบ URL ที่สร้างขึ้นหลังจากใช้งาน
+        URL.revokeObjectURL(url);
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader()
+    });
+}
 onMounted(() => {
   fetchDataTree();
 });
@@ -440,7 +502,7 @@ onMounted(() => {
                 round
                 color="primary"
                 icon="download"
-                v-if="checkPermission($route)?.attrIsGet"
+                v-if="checkPermission($route)?.attrIsGet && typeReport !== '3'"
               >
                 <q-menu>
                   <q-list style="min-width: 150px">
@@ -502,6 +564,24 @@ onMounted(() => {
                   </q-list>
                 </q-menu>
               </q-btn>
+              <q-btn
+                :disable="!nodeId"
+                flat
+                round
+                color="primary"
+                icon="download"
+                v-if="checkPermission($route)?.attrIsGet && typeReport == '3'"
+                @click="
+                  getReport(
+                    `${`รายงานการลางาน จำแนกตามเพศ ประเภทการลา หน่วยงาน/ส่วนราชการ (${
+                      employeeClass === 'officer'
+                        ? 'ข้าราชการ กทม. สามัญ'
+                        : 'ลูกจ้างประจำ กทม.'
+                    })`}`
+                  )
+                "
+              >
+              </q-btn>
             </div>
           </div>
         </q-card>
@@ -921,6 +1001,7 @@ onMounted(() => {
                 <q-separator />
                 <q-card-actions align="right">
                   <q-btn
+                    v-if="typeReport !== '3'"
                     dense
                     class="q-px-md"
                     label="ค้นหา"
@@ -940,6 +1021,7 @@ onMounted(() => {
             </div>
             <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 col-xs-12 flex">
               <q-splitter
+                v-if="typeReport !== '3'"
                 disable
                 v-model="splitterModel"
                 horizontal
@@ -1034,6 +1116,11 @@ onMounted(() => {
                   </div>
                 </template>
               </q-splitter>
+
+              <q-banner class="q-pa-lg text-center full-width" v-else>
+                <q-icon name="info" size="lg" color="info" />
+                <p class="text-grey-9 q-pt-sm">รายงานการเข้างานไม่มี พรีวิว</p>
+              </q-banner>
             </div>
           </div>
         </q-card>