add filter date for dashboard

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);