feat(FE): add state filter dashboard with store

src/components/pages/dashboard/DashboardProduction.tsx

@@ -15,7 +15,6 @@ import { useFormik } from 'formik';
 import { ProjectFlockApi } from '@/services/api/production';
 import { KandangApi, LocationApi } from '@/services/api/master-data';
 import { generateDashboardPDF } from '@/components/pages/dashboard/export/DashboardPDF';
-
 import {
   DashboardFilterType,
   getDashboardFilterSchema,
@@ -38,6 +37,7 @@ import ButtonFilter from '@/components/helper/ButtonFilter';
 import Dropdown from '@/components/Dropdown';
 import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
+import { useDashboardStore } from '@/stores/dashboard';
 
 // Helper function to normalize values to array
 const normalizeToArray = (
@@ -52,11 +52,18 @@ const normalizeToArray = (
 
 const DashboardProduction = () => {
   const filterModal = useModal();
+
+  // ===== DASHBOARD STORE =====
+  const { filterValues, setFilterValues, resetFilterValues } =
+    useDashboardStore();
+
   const [analysisMode, setAnalysisMode] = useState<'OVERVIEW' | 'COMPARISON'>(
-    'OVERVIEW'
+    (filterValues.analysisMode as 'OVERVIEW' | 'COMPARISON') || 'OVERVIEW'
   );
   const [endpointUrl, setEndpointUrl] = useState('/dashboards');
-  const [selectedLocationIds, setSelectedLocationIds] = useState<number[]>([]);
+  const [selectedLocationIds, setSelectedLocationIds] = useState<number[]>(
+    normalizeToArray(filterValues.location)
+  );
   const [exporting, setExporting] = useState(false);
   const statsRef = useRef<HTMLDivElement>(null);
   const chartRef = useRef<HTMLDivElement>(null);
@@ -111,19 +118,22 @@ const DashboardProduction = () => {
   // ===== FORMIK =====
   const formik = useFormik({
     initialValues: {
-      startDate: '',
-      endDate: '',
-      flock: [] as OptionType[],
-      location: [] as OptionType[],
-      kandang: [] as OptionType[],
-      analysisMode: analysisMode,
-      comparisonType: '',
-      lokasiIds: [],
-      flockIds: [],
-      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,
     validationSchema: getDashboardFilterSchema(analysisMode),
     onSubmit: (values) => {
+      // Save filter values to store
+      setFilterValues(values);
+
       handleApplyFilter({
         start_date: values.startDate || '',
         end_date: values.endDate || '',
@@ -138,8 +148,10 @@ const DashboardProduction = () => {
 
   const handleResetFilter = () => {
     formik.resetForm();
+    resetFilterValues(); // Clear stored filter values
     setAnalysisMode('OVERVIEW');
     setEndpointUrl('/dashboards');
+    setSelectedLocationIds([]);
   };
 
   const handleApplyFilter = (values: DashboardFilter) => {
@@ -162,6 +174,20 @@ const DashboardProduction = () => {
     refreshDashboardProductionData();
   };
 
+  // ===== Load filter from store on mount =====
+  useEffect(() => {
+    if (!filterValues) return;
+    handleApplyFilter({
+      start_date: filterValues.startDate,
+      end_date: filterValues.endDate,
+      analysis_mode: filterValues.analysisMode as 'OVERVIEW' | 'COMPARISON',
+      location_ids: normalizeToArray(filterValues.location),
+      flock_ids: normalizeToArray(filterValues.flock),
+      kandang_ids: normalizeToArray(filterValues.kandang),
+      comparison_type: filterValues.comparisonType,
+    });
+  }, [filterValues]);
+
   // ===== Formik Error List =====
   const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
@@ -512,7 +538,6 @@ const DashboardProduction = () => {
                 type='reset'
                 variant='soft'
                 className='ms-4 min-w-36 rounded-lg'
-                onClick={handleResetFilter}
               >
                 Reset Filter
               </Button>