done all view dummy new modul

2025-03-12 00:32:50 +07:00
parent b8f7d7f655
commit dce5409248
25 changed files with 1301 additions and 10 deletions
--- a/resources/js/payment-recaps/index.js
+++ b/resources/js/payment-recaps/index.js
@@ -0,0 +1,104 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+import gridjs from "gridjs/dist/gridjs.umd.js";
+import GlobalConfig, { addThousandSeparators } from "../global-config.js";
+import moment from "moment";
+import InitDatePicker from "../utils/InitDatePicker.js";
+
+class PaymentRecaps {
+    constructor() {
+        this.toastMessage = document.getElementById("toast-message");
+        this.toastElement = document.getElementById("toastNotification");
+        this.toast = new bootstrap.Toast(this.toastElement);
+        this.table = null;
+        this.initTablePaymentRecaps();
+        this.initFilterDatepicker();
+    }
+    initFilterDatepicker() {
+        new InitDatePicker(
+            "#datepicker-payment-recap",
+            this.handleChangeFilterDate.bind(this)
+        ).init();
+    }
+    handleChangeFilterDate(strDate) {
+        console.log("filter date : ", strDate);
+    }
+    formatCategory(category) {
+        const categoryMap = {
+            potention_sum: "Potensi",
+            non_verified_sum: "Belum Terverifikasi",
+            verified_sum: "Terverifikasi",
+            business_sum: "Usaha",
+            non_business_sum: "Non Usaha",
+            spatial_sum: "Tata Ruang",
+            waiting_click_dpmptsp_sum: "Menunggu Klik DPMPTSP",
+            issuance_realization_pbg_sum: "Realisasi Terbit PBG",
+            process_in_technical_office_sum: "Proses Di Dinas Teknis",
+        };
+
+        return categoryMap[category] || category; // Return mapped value or original category
+    }
+    initTablePaymentRecaps() {
+        let tableContainer = document.getElementById("table-payment-recaps");
+
+        this.table = new Grid({
+            columns: [
+                { name: "Kategori", data: (row) => row[0] },
+                { name: "Nominal", data: (row) => row[1] },
+                {
+                    name: "Created",
+                    data: (row) => row[2],
+                    attributes: { style: "width: 200px; white-space: nowrap;" },
+                },
+            ],
+            pagination: {
+                limit: 10,
+                server: {
+                    url: (prev, page) =>
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
+                            page + 1
+                        }`,
+                },
+            },
+            sort: true,
+            server: {
+                url: `${GlobalConfig.apiHost}/api/payment-recaps`,
+                headers: {
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
+                    "Content-Type": "application/json",
+                },
+                then: (response) => {
+                    console.log("API Response:", response); // Debugging
+
+                    if (!response.data || !Array.isArray(response.data)) {
+                        console.error(
+                            "Error: Data is not an array",
+                            response.data
+                        );
+                        return [];
+                    }
+
+                    return response.data.map((item) => [
+                        this.formatCategory(item.category ?? "Unknown"), // Ensure category is not null
+                        addThousandSeparators(
+                            Number(item.nominal).toString() || 0
+                        ), // Ensure nominal is a valid number
+                        moment(item.created_at).isValid()
+                            ? moment(item.created_at).format(
+                                  "YYYY-MM-DD H:mm:ss"
+                              )
+                            : "-", // Handle invalid dates
+                    ]);
+                },
+                total: (response) => response.pagination?.total || 0,
+            },
+            width: "auto",
+            fixedHeader: true,
+        }).render(tableContainer);
+    }
+}
+document.addEventListener("DOMContentLoaded", function (e) {
+    new PaymentRecaps();
+});