add filter date for dashboard

resources/js/app.js

@@ -2,6 +2,30 @@ import bootstrap from "bootstrap/dist/js/bootstrap";
 window.bootstrap = bootstrap;
 import "iconify-icon";
 import "simplebar/dist/simplebar";
+// import flatpickr from "flatpickr";
+// import "flatpickr/dist/flatpickr.min.css";
+
+// class InitDatePicker {
+//     constructor(selector = ".datepicker") {
+//         this.selector = selector;
+//     }
+//     init() {
+//         const elements = document.querySelectorAll(this.selector);
+//         if (elements.length === 0) return; // Skip if no elements found
+
+//         const today = new Date();
+//         const minYear = today.getFullYear() - 5;
+
+//         elements.forEach((element) => {
+//             flatpickr(element, {
+//                 enableTime: false,
+//                 dateFormat: "Y-m-d",
+//                 minDate: `${minYear}-01-01`,
+//                 maxDate: today,
+//             });
+//         });
+//     }
+// }
 
 class Components {
     initBootstrapComponents() {
@@ -107,6 +131,7 @@ class FormValidation {
 }
 document.addEventListener("DOMContentLoaded", function (e) {
     new Components().init(), new FormValidation().init();
+    // new InitDatePicker().init();
 });
 class ThemeLayout {
     constructor() {

resources/js/dashboards/bigdata.js

@@ -1,55 +1,30 @@
 import Big from "big.js";
 import GlobalConfig, { addThousandSeparators } from "../global-config.js";
-import flatpickr from "flatpickr";
-import "flatpickr/dist/flatpickr.min.css";
+import InitDatePicker from "../utils/InitDatePicker.js";
 
 class BigData {
     async init() {
         try {
-            this.filterYear = new Date().getFullYear(); // Set initial year
-
-            let yearSelect = document.querySelector("#yearPicker");
-            let filterButton = document.querySelector("#btnFilterYear");
-
-            if (!yearSelect || !filterButton) {
-                console.error(
-                    "Element #yearPicker or #btnFilterYear not found."
-                );
-                return;
-            }
-
-            // Set default value for input
-            yearSelect.value = this.filterYear;
-
-            yearSelect.addEventListener("change", () => {
-                this.updateYear(yearSelect.value);
-            });
-
-            // Handle button click
-            filterButton.addEventListener("click", () => {
-                this.updateYear(yearSelect.value);
-            });
-
-            console.log("init filter this year", this.filterYear);
+            new InitDatePicker(
+                "#datepicker-dashboard-bigdata",
+                this.handleChangeDate.bind(this)
+            ).init();
 
             // Load initial data
-            await this.updateData(this.filterYear);
+            this.updateData("latest");
         } catch (error) {
             console.error("Error initializing data:", error);
         }
     }
-    updateYear(value) {
-        let inputYear = parseInt(value, 10);
-        if (!isNaN(inputYear)) {
-            this.filterYear = inputYear;
-            this.updateData(this.filterYear);
-        } else {
-            console.error("Invalid year input");
-        }
+
+    handleChangeDate(filterDate) {
+        if (!filterDate) return;
+        this.updateData(filterDate);
     }
-    async updateData(year) {
+    async updateData(filterDate) {
         try {
-            this.resumeBigData = await this.getBigDataResume();
+            console.log("Filtering data for date:", filterDate);
+            this.resumeBigData = await this.getBigDataResume(filterDate);
             // this.totalTargetPAD = await this.getDataSettings("TARGET_PAD");
             // this.resultDataTotal = await this.getDataTotalPotensi(year);
             // this.dataVerification = await this.getDataVerfication(year);
@@ -178,10 +153,10 @@ class BigData {
         }
     }
 
-    async getBigDataResume() {
+    async getBigDataResume(filterByDate) {
         try {
             const response = await fetch(
-                `${GlobalConfig.apiHost}/api/bigdata-resume`,
+                `${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterByDate}`,
                 {
                     credentials: "include",
                     headers: {
@@ -199,8 +174,6 @@ class BigData {
             }
 
             const data = await response.json();
-            console.log("big data resume", JSON.stringify(data));
-            console.log("big data resume", data);
             return data;
         } catch (error) {
             console.error("Error fetching chart data:", error);

resources/js/dashboards/lack-of-potential.js

@@ -1,10 +1,15 @@
 import Big from "big.js";
 import GlobalConfig, { addThousandSeparators } from "../global-config.js";
+import InitDatePicker from "../utils/InitDatePicker.js";
 
 class LackOfPotential {
     async init() {
+        new InitDatePicker(
+            "#datepicker-lack-of-potential",
+            this.handleChangedDate.bind(this)
+        ).init();
         this.bigTotalLackPotential = 0;
-        this.totalPotensi = await this.getDataTotalPotensi(2025);
+        this.totalPotensi = await this.getDataTotalPotensi("latest");
         this.totalTargetPAD = await this.getDataSettings("TARGET_PAD");
         this.allCountData = await this.getValueDashboard();
         this.reklameCount = this.allCountData.total_reklame ?? 0;
@@ -12,15 +17,26 @@ class LackOfPotential {
         this.tataRuangCount = this.allCountData.total_tata_ruang ?? 0;
 
         this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
-        this.bigTotalPotensi = new Big(this.totalPotensi.totalData ?? 0);
-        this.bigTotalLackPotential = this.bigTargetPAD - this.bigTotalPotensi;
+        this.bigTotalPotensi = new Big(this.totalPotensi.total ?? 0);
+        this.bigTotalLackPotential = this.bigTargetPAD.minus(
+            this.bigTotalPotensi
+        );
         this.initChartKekuranganPotensi();
         this.initDataValueDashboard();
     }
-    async getDataTotalPotensi(year) {
+    async handleChangedDate(filterDate) {
+        const totalPotensi = await this.getDataTotalPotensi(filterDate);
+        this.bigTotalPotensi = new Big(totalPotensi.total ?? 0);
+        this.bigTotalLackPotential = this.bigTargetPAD.minus(
+            this.bigTotalPotensi
+        );
+
+        this.initChartKekuranganPotensi();
+    }
+    async getDataTotalPotensi(filterDate) {
         try {
             const response = await fetch(
-                `${GlobalConfig.apiHost}/api/all-task-documents?year=${year}`,
+                `${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterDate}`,
                 {
                     credentials: "include",
                     headers: {
@@ -39,8 +55,7 @@ class LackOfPotential {
 
             const data = await response.json();
             return {
-                countData: data.data.count,
-                totalData: data.data.total,
+                total: data.total_potensi.sum,
             };
         } catch (error) {
             console.error("Error fetching chart data:", error);
@@ -50,7 +65,7 @@ class LackOfPotential {
     async getDataSettings(string_key) {
         try {
             const response = await fetch(
-                `${GlobalConfig.apiHost}/api/api-data-settings?search=${string_key}`,
+                `${GlobalConfig.apiHost}/api/data-settings?search=${string_key}`,
                 {
                     credentials: "include",
                     headers: {

resources/js/utils/InitDatePicker.js

@@ -0,0 +1,34 @@
+import flatpickr from "flatpickr";
+import "flatpickr/dist/flatpickr.min.css";
+
+class InitDatePicker {
+    constructor(selector = ".datepicker", onChangeCallback = null) {
+        this.selector = selector;
+        this.onChangeCallback = onChangeCallback;
+    }
+
+    init() {
+        const today = new Date();
+
+        document.querySelectorAll(this.selector).forEach((element) => {
+            flatpickr(element, {
+                enableTime: false,
+                dateFormat: "Y-m-d",
+                maxDate: today,
+                onChange: (selectedDates, dateStr) => {
+                    if (this.onChangeCallback) {
+                        this.onChangeCallback(dateStr); // Call callback with selected date
+                    }
+                },
+                onReady: (selectedDates, dateStr, instance) => {
+                    // Call the callback with the default date when initialized
+                    if (this.onChangeCallback && dateStr) {
+                        this.onChangeCallback(dateStr);
+                    }
+                },
+            });
+        });
+    }
+}
+
+export default InitDatePicker;