Merge branch 'fix/dashboard' into 'development'

[FIX/FE] Fixing Store State Filter Dashboard

See merge request mbugroup/lti-web-client!235

src/components/pages/dashboard/DashboardProduction.tsx

@@ -8,7 +8,7 @@ import SelectInput, {
   OptionType,
   useSelect,
 } from '@/components/input/SelectInput';
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import useSWR from 'swr';
 import { DashboardApi } from '@/services/api/dashboard';
 import { useFormik } from 'formik';
@@ -91,7 +91,6 @@ const DashboardProduction = () => {
     isLoadingOptions: isLoadingFlockOptions,
     loadMore: loadMoreFlock,
   } = useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', '', {
-    limit: 'limit',
     location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
   });
   const {
@@ -99,16 +98,13 @@ const DashboardProduction = () => {
     options: locationOptions,
     isLoadingOptions: isLoadingLocationOptions,
     loadMore: loadMoreLocation,
-  } = useSelect(LocationApi.basePath, 'id', 'name', '', {
-    limit: 'limit',
-  });
+  } = useSelect(LocationApi.basePath, 'id', 'name');
   const {
     setInputValue: setInputValueKandang,
     options: kandangOptions,
     isLoadingOptions: isLoadingKandangOptions,
     loadMore: loadMoreKandang,
   } = useSelect(KandangApi.basePath, 'id', 'name', '', {
-    limit: 'limit',
     location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
   });
   const comparisonTypeOptions = [
@@ -120,17 +116,18 @@ const DashboardProduction = () => {
   // ===== FORMIK =====
   const formik = useFormik({
     initialValues: {
-      startDate: filterValues.startDate || '',
-      endDate: filterValues.endDate || '',
-      flock: filterValues.flock || ([] as OptionType[]),
-      location: filterValues.location || ([] as OptionType[]),
-      kandang: filterValues.kandang || ([] as OptionType[]),
-      analysisMode: filterValues.analysisMode || analysisMode,
-      comparisonType: filterValues.comparisonType || '',
-      locationIds: filterValues.locationIds || [],
-      flockIds: filterValues.flockIds || [],
-      kandangIds: filterValues.kandangIds || [],
+      startDate: filterValues.startDate ?? '',
+      endDate: filterValues.endDate ?? '',
+      flock: filterValues.flock ?? ([] as OptionType[]),
+      location: filterValues.location ?? ([] as OptionType[]),
+      kandang: filterValues.kandang ?? ([] as OptionType[]),
+      analysisMode: filterValues.analysisMode ?? analysisMode,
+      comparisonType: filterValues.comparisonType ?? '',
+      locationIds: filterValues.locationIds ?? [],
+      flockIds: filterValues.flockIds ?? [],
+      kandangIds: filterValues.kandangIds ?? [],
     } as DashboardFilterType,
+    enableReinitialize: true,
     validationSchema: getDashboardFilterSchema(analysisMode),
     onSubmit: (values) => {
       // Save filter values to store
@@ -148,13 +145,13 @@ const DashboardProduction = () => {
     },
   });
 
-  const handleResetFilter = () => {
+  const handleResetFilter = useCallback(() => {
     formik.resetForm();
     resetFilterValues(); // Clear stored filter values
     setAnalysisMode('OVERVIEW');
     setEndpointUrl('/dashboards');
     setSelectedLocationIds([]);
-  };
+  }, [resetFilterValues, filterValues, selectedLocationIds]);
 
   const handleApplyFilter = (values: DashboardFilter) => {
     // Build query params object, only include non-empty values