add separator in js for handle showing value is number

resources/js/bigdata-resumes/index.js

@@ -81,25 +81,29 @@ class BigdataResume {
                     return data.data.map((item) => [
                         item.id,
                         item.year,
-                        item.potention_count,
+                        addThousandSeparators(item.potention_count),
                         addThousandSeparators(item.potention_sum),
-                        item.non_verified_count,
+                        addThousandSeparators(item.non_verified_count),
                         addThousandSeparators(item.non_verified_sum),
-                        item.verified_count,
+                        addThousandSeparators(item.verified_count),
                         addThousandSeparators(item.verified_sum),
-                        item.business_count,
+                        addThousandSeparators(item.business_count),
                         addThousandSeparators(item.business_sum),
-                        item.non_business_count,
+                        addThousandSeparators(item.non_business_count),
                         addThousandSeparators(item.non_business_sum),
-                        item.spatial_count,
+                        addThousandSeparators(item.spatial_count),
                         addThousandSeparators(item.spatial_sum),
-                        item.waiting_click_dpmptsp_count,
+                        addThousandSeparators(item.waiting_click_dpmptsp_count),
                         addThousandSeparators(item.waiting_click_dpmptsp_sum),
-                        item.issuance_realization_pbg_count,
+                        addThousandSeparators(
+                            item.issuance_realization_pbg_count
+                        ),
                         addThousandSeparators(
                             item.issuance_realization_pbg_sum
                         ),
-                        item.process_in_technical_office_count,
+                        addThousandSeparators(
+                            item.process_in_technical_office_count
+                        ),
                         addThousandSeparators(
                             item.process_in_technical_office_sum
                         ),

resources/js/business-industries/index.js

@@ -1,7 +1,7 @@
 import { Grid } from "gridjs/dist/gridjs.umd.js";
 import gridjs from "gridjs/dist/gridjs.umd.js";
 import "gridjs/dist/gridjs.umd.js";
-import GlobalConfig from "../global-config.js";
+import GlobalConfig, { addThousandSeparators } from "../global-config.js";
 import Swal from "sweetalert2";
 
 class BusinessIndustries {
@@ -106,23 +106,25 @@ class BusinessIndustries {
                     "Content-Type": "application/json",
                 },
                 then: (data) =>
-                    data.data.map((item) => [
-                        item.id,
-                        item.nama_kecamatan,
-                        item.nama_kelurahan,
-                        item.nop,
-                        item.nama_wajib_pajak,
-                        item.alamat_wajib_pajak,
-                        item.alamat_objek_pajak,
-                        item.luas_bumi,
-                        item.luas_bangunan,
-                        item.njop_bumi,
-                        item.njop_bangunan,
-                        item.ketetapan,
-                        item.tahun_pajak,
-                        item.created_at,
-                        item.id, // ID for Actions column
-                    ]),
+                    data.data.map((item) => {
+                        return [
+                            item.id,
+                            item.nama_kecamatan,
+                            item.nama_kelurahan,
+                            item.nop,
+                            item.nama_wajib_pajak,
+                            item.alamat_wajib_pajak,
+                            item.alamat_objek_pajak,
+                            addThousandSeparators(item.luas_bumi),
+                            addThousandSeparators(item.luas_bangunan),
+                            addThousandSeparators(item.njop_bumi),
+                            addThousandSeparators(item.njop_bangunan),
+                            addThousandSeparators(item.ketetapan),
+                            item.tahun_pajak,
+                            item.created_at,
+                            item.id, // ID for Actions column
+                        ];
+                    }),
                 total: (data) => data.total,
             },
         }).render(tableContainer);

resources/js/data-settings/index.js

@@ -1,7 +1,7 @@
 import { Grid } from "gridjs/dist/gridjs.umd.js";
 import gridjs from "gridjs/dist/gridjs.umd.js";
 import "gridjs/dist/gridjs.umd.js";
-import GlobalConfig from "../global-config.js";
+import GlobalConfig, { addThousandSeparators } from "../global-config.js";
 import Swal from "sweetalert2";
 
 class DataSettings {
@@ -29,7 +29,7 @@ class DataSettings {
      */
     getApiToken() {
         const tokenMeta = document.querySelector('meta[name="api-token"]');
-        return tokenMeta ? tokenMeta.getAttribute('content') : null;
+        return tokenMeta ? tokenMeta.getAttribute("content") : null;
     }
 
     /**
@@ -38,19 +38,21 @@ class DataSettings {
      */
     getAuthHeaders() {
         const token = this.getApiToken();
-        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+        const csrfToken = document
+            .querySelector('meta[name="csrf-token"]')
+            ?.getAttribute("content");
 
         const headers = {
-            'Content-Type': 'application/json',
-            'Accept': 'application/json',
+            "Content-Type": "application/json",
+            Accept: "application/json",
         };
 
         if (token) {
-            headers['Authorization'] = `Bearer ${token}`;
+            headers["Authorization"] = `Bearer ${token}`;
         }
 
         if (csrfToken) {
-            headers['X-CSRF-TOKEN'] = csrfToken;
+            headers["X-CSRF-TOKEN"] = csrfToken;
         }
 
         return headers;
@@ -65,26 +67,30 @@ class DataSettings {
     async makeApiRequest(url, options = {}) {
         const defaultOptions = {
             headers: this.getAuthHeaders(),
-            ...options
+            ...options,
         };
 
         try {
             const response = await fetch(url, defaultOptions);
 
             if (!response.ok) {
-                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                throw new Error(
+                    `HTTP ${response.status}: ${response.statusText}`
+                );
             }
 
             return response;
         } catch (error) {
-            console.error('API Request failed:', error);
+            console.error("API Request failed:", error);
             throw error;
         }
     }
 
     initEvents() {
         document.body.addEventListener("click", async (event) => {
-            const deleteButton = event.target.closest(".btn-delete-data-settings");
+            const deleteButton = event.target.closest(
+                ".btn-delete-data-settings"
+            );
             if (deleteButton) {
                 event.preventDefault();
                 await this.handleDelete(deleteButton);
@@ -143,7 +149,9 @@ class DataSettings {
                 limit: 15,
                 server: {
                     url: (prev, page) =>
-                        `${prev}${prev.includes("?") ? "&" : "?"}page=${page + 1}`,
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
+                            page + 1
+                        }`,
                 },
             },
             sort: true,
@@ -160,7 +168,9 @@ class DataSettings {
                     data.data.map((item) => [
                         item.id,
                         item.key,
-                        item.value,
+                        item.type === "decimal"
+                            ? addThousandSeparators(item.value, 0)
+                            : item.value,
                         item.created_at,
                         item.id,
                     ]),
@@ -190,7 +200,8 @@ class DataSettings {
                 );
 
                 const result = await response.json();
-                this.toastMessage.innerText = result.message || "Deleted successfully!";
+                this.toastMessage.innerText =
+                    result.message || "Deleted successfully!";
                 this.toast.show();
 
                 // Refresh Grid.js table
@@ -199,7 +210,8 @@ class DataSettings {
                 }
             } catch (error) {
                 console.error("Error deleting item:", error);
-                this.toastMessage.innerText = error.message || "An error occurred!";
+                this.toastMessage.innerText =
+                    error.message || "An error occurred!";
                 this.toast.show();
             }
         }

resources/js/data/spatialPlannings/data-spatialPlannings.js

@@ -1,7 +1,7 @@
 import { Grid } from "gridjs/dist/gridjs.umd.js";
 import gridjs from "gridjs/dist/gridjs.umd.js";
 import "gridjs/dist/gridjs.umd.js";
-import GlobalConfig from "../../global-config.js";
+import GlobalConfig, { addThousandSeparators } from "../../global-config.js";
 import GeneralTable from "../../table-generator.js";
 
 // Ambil hak akses dari data-attribute
@@ -78,7 +78,7 @@ document.addEventListener("DOMContentLoaded", () => {
                 item.name,
                 item.kbli,
                 item.activities,
-                item.area,
+                addThousandSeparators(item.area),
                 item.location,
                 item.number,
                 item.date,

resources/js/data/tourisms/data-tourisms.js

@@ -1,7 +1,7 @@
 import { Grid } from "gridjs/dist/gridjs.umd.js";
 import gridjs from "gridjs/dist/gridjs.umd.js";
 import "gridjs/dist/gridjs.umd.js";
-import GlobalConfig from "../../global-config.js";
+import GlobalConfig, { addThousandSeparators } from "../../global-config.js";
 import GeneralTable from "../../table-generator.js";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
@@ -108,7 +108,7 @@ document.addEventListener("DOMContentLoaded", () => {
                 item.district_name,
                 item.village_name,
                 item.land_area_in_m2,
-                item.investment_amount,
+                addThousandSeparators(item.investment_amount),
                 item.tki,
                 item.longitude,
                 item.latitude,

resources/js/global-config.js

@@ -1,24 +1,37 @@
 export default GlobalConfig = window.GlobalConfig;
 
 export function addThousandSeparators(value, fractionDigits = 2) {
-    if (!value) return null; // Handle empty or null values
+    if (!value && value !== 0) return null; // Handle empty or null values, but allow 0
 
-    // Remove any non-numeric characters except commas and dots
-    value = value.replace(/[^0-9,.]/g, "");
-
-    // If the value contains multiple dots, assume dots are thousand separators
-    if ((value.match(/\./g) || []).length > 1) {
-        value = value.replace(/\./g, "");
+    // Convert to string first if it's a number
+    if (typeof value === "number") {
+        return new Intl.NumberFormat("en-US", {
+            minimumFractionDigits: fractionDigits,
+            maximumFractionDigits: fractionDigits,
+        }).format(value);
     }
 
-    // Convert to a proper decimal number
-    let number = parseFloat(value.replace(",", "."));
+    // If it's already a string, process it
+    if (typeof value === "string") {
+        // Remove any non-numeric characters except commas and dots
+        value = value.replace(/[^0-9,.]/g, "");
 
-    if (isNaN(number)) return null; // Return null if conversion fails
+        // If the value contains multiple dots, assume dots are thousand separators
+        if ((value.match(/\./g) || []).length > 1) {
+            value = value.replace(/\./g, "");
+        }
 
-    // Format the number with thousand separators
-    return new Intl.NumberFormat("en-US", {
-        minimumFractionDigits: fractionDigits,
-        maximumFractionDigits: fractionDigits,
-    }).format(number);
+        // Convert to a proper decimal number
+        let number = parseFloat(value.replace(",", "."));
+
+        if (isNaN(number)) return null; // Return null if conversion fails
+
+        // Format the number with thousand separators
+        return new Intl.NumberFormat("en-US", {
+            minimumFractionDigits: fractionDigits,
+            maximumFractionDigits: fractionDigits,
+        }).format(number);
+    }
+
+    return null; // Return null for unsupported types
 }

resources/js/report-pbg-ptsp/index.js

@@ -18,7 +18,7 @@ class ReportPbgPTSP {
                 { name: "Status" },
                 {
                     name: "Total",
-                    formatter: (cell) => cell,
+                    formatter: (cell) => addThousandSeparators(cell),
                 },
             ],
             pagination: {

resources/js/report/growth-report/index.js

@@ -1,5 +1,5 @@
 import ApexCharts from "apexcharts";
-
+import { addThousandSeparators } from "../../global-config.js";
 class GrowthReport {
     init() {
         this.loadChart();
@@ -65,7 +65,7 @@ class GrowthReport {
                     },
                     labels: {
                         formatter: function (value) {
-                            return "Rp. " + value.toLocaleString("id-ID");
+                            return "Rp. " + addThousandSeparators(value);
                         },
                     },
                 },

resources/js/report/tourisms/index.js

@@ -1,5 +1,6 @@
 import gridjs from "gridjs/dist/gridjs.umd.js";
 import "gridjs/dist/gridjs.umd.js";
+import { addThousandSeparators } from "../../global-config.js";
 
 // Mengambil data dari input dengan id="business_type_counts"
 const businessTypeCountsElement = document.getElementById("tourism_based_KBLI");
@@ -8,10 +9,9 @@ const businessTypeCounts = JSON.parse(businessTypeCountsElement.value); // Cek a
 // Membuat Grid.js instance
 new gridjs.Grid({
     columns: ["Jenis Bisnis Pariwisata", "Jumlah Total"], // Nama kolom
-    data: businessTypeCounts.map((item) => [
-        item.kbli_title,
-        item.total_records,
-    ]), // Mengubah data untuk Grid.js
+    data: businessTypeCounts.map((item) => {
+        return [item.kbli_title, addThousandSeparators(item.total_records)];
+    }), // Mengubah data untuk Grid.js
     search: true, // Menambahkan fitur pencarian
     pagination: true, // Menambahkan fitur pagination
     sort: true, // Menambahkan fitur sorting