create page tax with data, upload and export group by subdistrict

resources/js/taxation/index.js

@@ -0,0 +1,168 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+import GlobalConfig from "../global-config";
+import { addThousandSeparators } from "../global-config";
+
+class Taxation {
+    constructor() {
+        this.toastMessage = document.getElementById("toast-message");
+        this.toastElement = document.getElementById("toastNotification");
+        this.toast = new bootstrap.Toast(this.toastElement);
+        this.table = null;
+
+        this.initTableTaxation();
+        // this.initEvents();
+        this.handleExportToExcel();
+    }
+
+    handleExportToExcel() {
+        const button = document.getElementById("btn-export-excel");
+        if (!button) {
+            console.error("Button not found: #btn-export-excel");
+            return;
+        }
+
+        const exportUrl = button.getAttribute("data-url");
+
+        button.addEventListener("click", function () {
+            button.disabled = true;
+
+            fetch(exportUrl, {
+                method: "GET",
+                credentials: "include",
+                headers: {
+                    Authorization:
+                        "Bearer " +
+                        document
+                            .querySelector('meta[name="api-token"]')
+                            .getAttribute("content"),
+                },
+            })
+                .then(function (response) {
+                    if (!response.ok) {
+                        throw new Error(
+                            "Error fetching data: " + response.statusText
+                        );
+                    }
+                    return response.blob();
+                })
+                .then(function (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(function (error) {
+                    console.error("Error fetching data:", error);
+                })
+                .finally(function () {
+                    button.disabled = false;
+                });
+        });
+    }
+
+    initEvents() {
+        document.body.addEventListener("click", async (event) => {
+            const deleteButton = event.target.closest(".btn-delete-taxation");
+            if (deleteButton) {
+                event.preventDefault();
+                await this.handleDelete(deleteButton);
+            }
+        });
+    }
+
+    initTableTaxation() {
+        let tableContainer = document.getElementById("table-taxation");
+
+        if (!tableContainer) {
+            console.error("Table container not found!");
+            return;
+        }
+
+        // Clear previous table content
+        tableContainer.innerHTML = "";
+
+        this.table = new Grid({
+            columns: [
+                "ID",
+                { name: "Tax No" },
+                { name: "Tax Code" },
+                { name: "WP Name" },
+                { name: "Business Name" },
+                { name: "Address" },
+                { name: "Start Validity" },
+                { name: "End Validity" },
+                { name: "Tax Value" },
+                { name: "Subdistrict" },
+                { name: "Village" },
+            ],
+            pagination: {
+                limit: 50,
+                server: {
+                    url: (prev, page) => {
+                        let separator = prev.includes("?") ? "&" : "?";
+                        return `${prev}${separator}page=${page + 1}`;
+                    },
+                },
+            },
+            sort: true,
+            search: {
+                server: {
+                    url: (prev, keyword) => {
+                        let separator = prev.includes("?") ? "&" : "?";
+                        return `${prev}${separator}search=${encodeURIComponent(
+                            keyword
+                        )}`;
+                    },
+                },
+                debounceTimeout: 1000,
+            },
+            server: {
+                url: `${GlobalConfig.apiHost}/api/taxs`,
+                headers: {
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
+                    "Content-Type": "application/json",
+                },
+                then: (data) => {
+                    if (!data || !data.data) {
+                        console.warn("⚠️ No data received from API");
+                        return [];
+                    }
+
+                    return data.data.map((item) => {
+                        return [
+                            item.id,
+                            item.tax_no,
+                            item.tax_code,
+                            item.wp_name,
+                            item.business_name,
+                            item.address,
+                            item.start_validity,
+                            item.end_validity,
+                            addThousandSeparators(item.tax_value),
+                            item.subdistrict,
+                            item.village,
+                        ];
+                    });
+                },
+                total: (data) => {
+                    let totalRecords = data?.meta?.total || 0;
+                    return totalRecords;
+                },
+                catch: (error) => {
+                    console.error("❌ Error fetching data:", error);
+                },
+            },
+        }).render(tableContainer);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new Taxation();
+});