add export excel and pdf district payment recaps

resources/js/report-payment-recaps/index.js

@@ -7,6 +7,8 @@ class ReportPaymentRecaps {
     constructor() {
         this.table = null;
         this.initTableReportPaymentRecaps();
+        this.handleExportPDF();
+        this.handleExportToExcel();
     }
     initTableReportPaymentRecaps() {
         let tableContainer = document.getElementById(
@@ -63,6 +65,100 @@ class ReportPaymentRecaps {
             fixedHeader: true,
         }).render(tableContainer);
     }
+
+    async handleExportToExcel() {
+        const button = document.getElementById("btn-export-excel");
+        if (!button) {
+            console.error("Button not found: #btn-export-excel");
+            return;
+        }
+
+        let exportUrl = button.getAttribute("data-url");
+
+        button.addEventListener("click", async () => {
+            button.disabled = true;
+            try {
+                const response = await fetch(`${exportUrl}`, {
+                    method: "GET",
+                    credentials: "include",
+                    headers: {
+                        Authorization: `Bearer ${document
+                            .querySelector('meta[name="api-token"]')
+                            .getAttribute("content")}`,
+                    },
+                });
+                if (!response.ok) {
+                    console.error("Error fetching data:", response.statusText);
+                    button.disabled = false;
+                    return;
+                }
+
+                // Convert response to Blob and trigger download
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement("a");
+                a.href = url;
+                a.download = "laporan-rekap-data-pembayaran.xlsx";
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                window.URL.revokeObjectURL(url);
+            } catch (error) {
+                console.error("Error fetching data:", error);
+                button.disabled = false;
+                return;
+            } finally {
+                button.disabled = false;
+            }
+        });
+    }
+
+    async handleExportPDF() {
+        const button = document.getElementById("btn-export-pdf");
+        if (!button) {
+            console.error("Button not found: #btn-export-pdf");
+            return;
+        }
+
+        let exportUrl = button.getAttribute("data-url");
+
+        button.addEventListener("click", async () => {
+            button.disabled = true;
+            try {
+                const response = await fetch(`${exportUrl}`, {
+                    method: "GET",
+                    credentials: "include",
+                    headers: {
+                        Authorization: `Bearer ${document
+                            .querySelector('meta[name="api-token"]')
+                            .getAttribute("content")}`,
+                    },
+                });
+                if (!response.ok) {
+                    console.error("Error fetching data:", response.statusText);
+                    button.disabled = false;
+                    return;
+                }
+
+                // Convert response to Blob and trigger download
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement("a");
+                a.href = url;
+                a.download = "laporan-rekap-data-pembayaran.pdf";
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                window.URL.revokeObjectURL(url);
+            } catch (error) {
+                console.error("Error fetching data:", error);
+                button.disabled = false;
+                return;
+            } finally {
+                button.disabled = false;
+            }
+        });
+    }
 }
 document.addEventListener("DOMContentLoaded", function (e) {
     new ReportPaymentRecaps();

resources/views/exports/district_payment_report.blade.php

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Laporan Rekap Data Pembayaran</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
+        th, td { border: 1px solid black; padding: 8px; text-align: center; }
+        th { background-color: #f2f2f2; }
+    </style>
+</head>
+<body>
+    <h2>Laporan Rekap Data Pembayaran</h2>
+    <table>
+        <thead>
+            <tr>
+                <th>Kecamatan</th>
+                <th>Total</th>
+            </tr>
+        </thead>
+        <tbody>
+            @foreach($data as $item)
+            <tr>
+                <td>{{ $item->kecamatan }}</td>
+                <td>{{ $item->total }}</td>
+            </tr>
+            @endforeach
+        </tbody>
+    </table>
+</body>
+</html>

resources/views/report-payment-recaps/index.blade.php

@@ -13,6 +13,19 @@
 <div class="row">
     <div class="col-12">
         <div class="card w-100">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h5 class="card-title mb-0">Laporan Rekap Data Pembayaran</h5>
+                <div class="d-flex gap-2">
+                    <button class="btn btn-sm bg-black text-white d-flex align-items-center content-center gap-2" id="btn-export-excel" data-url="{{ route('api.district-payment-report.excel') }}">
+                        <span>.xlsx</span>
+                        <iconify-icon icon="mingcute:file-export-line" width="20" height="20" class="d-flex align-items-center"></iconify-icon>
+                    </button>
+                    <button class="btn btn-sm bg-black text-white d-flex align-items-center content-center gap-2" id="btn-export-pdf" data-url="{{ route('api.district-payment-report.pdf') }}">
+                        <span>.pdf</span>
+                        <iconify-icon icon="mingcute:file-export-line" width="20" height="20" class="d-flex align-items-center"></iconify-icon>
+                    </button>
+                </div>
+            </div>
             <div class="card-body">
                 <div id="table-report-payment-recaps"></div>
             </div>