feat: implement table filter state persist

src/components/pages/report/expense/tab/ReportDepreciationFilterModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { RefObject, useEffect, useMemo, useState } from 'react';
+import { RefObject } from 'react';
 import { useFormik } from 'formik';
 import * as yup from 'yup';
 
@@ -20,32 +20,34 @@ import { Location } from '@/types/api/master-data/location';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 
 export type ReportDepreciationFilterValues = {
-  area_id: string | null;
+  area?: OptionType<string>;
-  location_id: string | null;
+  location?: OptionType<string>;
-  project_flock_id: string | null;
+  projectFlock?: OptionType<string>;
   period: string | null;
 };
 
 export const ReportDepreciationFilterSchema = yup.object({
-  area_id: yup.string().nullable(),
+  area: yup.mixed<OptionType<string>>().optional(),
-  location_id: yup.string().nullable(),
+  location: yup.mixed<OptionType<string>>().optional(),
-  project_flock_id: yup.string().nullable(),
+  projectFlock: yup.mixed<OptionType<string>>().optional(),
   period: yup.string().nullable().required('Periode wajib dipilih'),
-}) as yup.ObjectSchema<ReportDepreciationFilterValues>;
+});
 
 interface ReportDepreciationFilterModalProps {
   ref: RefObject<HTMLDialogElement | null>;
-  initialValues?: ReportDepreciationFilterValues;
+  initialValues?: Partial<ReportDepreciationFilterValues>;
   onSubmit?: (values: Partial<ReportDepreciationFilterValues>) => void;
   onReset?: () => void;
 }
 
-const defaultInitialValues: ReportDepreciationFilterValues = {
+const defaultInitialValues: (
-  area_id: null,
+  initialValues?: Partial<ReportDepreciationFilterValues>
-  location_id: null,
+) => ReportDepreciationFilterValues = (initialValues) => ({
-  project_flock_id: null,
+  area: undefined,
-  period: null,
+  location: undefined,
-};
+  projectFlock: undefined,
+  period: initialValues?.period ?? null,
+});
 
 const ReportDepreciationFilterModal = ({
   ref,
@@ -53,22 +55,19 @@ const ReportDepreciationFilterModal = ({
   onSubmit,
   onReset,
 }: ReportDepreciationFilterModalProps) => {
-  const [selectedAreaId, setSelectedAreaId] = useState<string | undefined>(
-    initialValues?.area_id || undefined
-  );
-  const [selectedLocationId, setSelectedLocationId] = useState<
-    string | undefined
-  >(initialValues?.location_id || undefined);
-
-  useEffect(() => {
-    setSelectedAreaId(initialValues?.area_id || undefined);
-    setSelectedLocationId(initialValues?.location_id || undefined);
-  }, [initialValues?.area_id, initialValues?.location_id]);
-
   const closeModalHandler = () => {
     ref.current?.close();
   };
 
+  const formik = useFormik<ReportDepreciationFilterValues>({
+    initialValues: { ...defaultInitialValues(initialValues), ...initialValues },
+    validationSchema: ReportDepreciationFilterSchema,
+    onSubmit: async (values) => {
+      onSubmit?.(values);
+      closeModalHandler();
+    },
+  });
+
   const {
     setInputValue: setAreaInputValue,
     options: areaOptions,
@@ -82,7 +81,7 @@ const ReportDepreciationFilterModal = ({
     isLoadingOptions: isLoadingLocationOptions,
     loadMore: loadMoreLocations,
   } = useSelect<Location>(LocationApi.basePath, 'id', 'name', 'search', {
-    area_id: selectedAreaId || '',
+    area_id: String(formik.values.area?.value ?? ''),
   });
 
   const {
@@ -96,73 +95,35 @@ const ReportDepreciationFilterModal = ({
     'flock_name',
     'search',
     {
-      location_id: selectedLocationId || '',
+      location_id: String(formik.values.location?.value ?? ''),
     }
   );
 
-  const formik = useFormik<ReportDepreciationFilterValues>({
+  const formikResetHandler = () => {
-    initialValues: initialValues || defaultInitialValues,
+    onReset?.();
-    enableReinitialize: true,
+    formik.resetForm({ values: defaultInitialValues(initialValues) });
-    validationSchema: ReportDepreciationFilterSchema,
+    closeModalHandler();
-    onSubmit: async (values) => {
+  };
-      onSubmit?.(values);
-      closeModalHandler();
-    },
-    onReset: (_) => {
-      onReset?.();
-      closeModalHandler();
-    },
-  });
-
-  const areaValue = useMemo(() => {
-    if (!formik.values.area_id) return null;
-    return (
-      areaOptions.find((opt) => String(opt.value) === formik.values.area_id) ||
-      null
-    );
-  }, [formik.values.area_id, areaOptions]);
-
-  const locationValue = useMemo(() => {
-    if (!formik.values.location_id) return null;
-    return (
-      locationOptions.find(
-        (opt) => String(opt.value) === formik.values.location_id
-      ) || null
-    );
-  }, [formik.values.location_id, locationOptions]);
-
-  const projectFlockValue = useMemo(() => {
-    if (!formik.values.project_flock_id) return null;
-    return (
-      projectFlockOptions.find(
-        (opt) => String(opt.value) === formik.values.project_flock_id
-      ) || null
-    );
-  }, [formik.values.project_flock_id, projectFlockOptions]);
 
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const areaId = val && !Array.isArray(val) ? String(val.value) : null;
+    const area =
-
+      val && !Array.isArray(val) ? (val as OptionType<string>) : undefined;
-    setSelectedAreaId(areaId || undefined);
+    formik.setFieldValue('area', area);
-    formik.setFieldValue('area_id', areaId);
+    formik.setFieldValue('location', undefined);
-    formik.setFieldValue('location_id', null);
+    formik.setFieldValue('projectFlock', undefined);
-    formik.setFieldValue('project_flock_id', null);
-    setSelectedLocationId(undefined);
   };
 
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const locationId = val && !Array.isArray(val) ? String(val.value) : null;
+    const location =
-
+      val && !Array.isArray(val) ? (val as OptionType<string>) : undefined;
-    setSelectedLocationId(locationId || undefined);
+    formik.setFieldValue('location', location);
-    formik.setFieldValue('location_id', locationId);
+    formik.setFieldValue('projectFlock', undefined);
-    formik.setFieldValue('project_flock_id', null);
   };
 
   const projectFlockChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const projectFlockId =
+    const projectFlock =
-      val && !Array.isArray(val) ? String(val.value) : null;
+      val && !Array.isArray(val) ? (val as OptionType<string>) : undefined;
-
+    formik.setFieldValue('projectFlock', projectFlock);
-    formik.setFieldValue('project_flock_id', projectFlockId);
   };
 
   return (
@@ -174,7 +135,7 @@ const ReportDepreciationFilterModal = ({
     >
       <form
         onSubmit={formik.handleSubmit}
-        onReset={formik.handleReset}
+        onReset={formikResetHandler}
         className='w-full flex flex-col'
       >
         <div className='p-4 flex items-center justify-between gap-2 border-b border-base-content/10'>
@@ -199,7 +160,7 @@ const ReportDepreciationFilterModal = ({
             label='Area'
             placeholder='Pilih Area'
             options={areaOptions}
-            value={areaValue}
+            value={formik.values.area ?? null}
             onChange={areaChangeHandler}
             onInputChange={setAreaInputValue}
             onMenuScrollToBottom={loadMoreAreas}
@@ -213,7 +174,7 @@ const ReportDepreciationFilterModal = ({
             label='Lokasi'
             placeholder='Pilih Lokasi'
             options={locationOptions}
-            value={locationValue}
+            value={formik.values.location ?? null}
             onChange={locationChangeHandler}
             onInputChange={setLocationInputValue}
             onMenuScrollToBottom={loadMoreLocations}
@@ -227,7 +188,7 @@ const ReportDepreciationFilterModal = ({
             label='Project Flock'
             placeholder='Pilih Project Flock'
             options={projectFlockOptions}
-            value={projectFlockValue}
+            value={formik.values.projectFlock ?? null}
             onChange={projectFlockChangeHandler}
             onInputChange={setProjectFlockInputValue}
             onMenuScrollToBottom={loadMoreProjectFlocks}

src/components/pages/report/expense/tab/ReportDepreciationTab.tsx

@@ -17,6 +17,7 @@ import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 import { ReportDepreciation } from '@/types/api/report/report-expense';
 import { DepreciationReportApi } from '@/services/api/report/expense-report';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { OptionType } from '@/components/input/SelectInput';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
 
@@ -32,20 +33,27 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
     reset: resetFilter,
-  } = useTableFilter({
+  } = useTableFilter<{
+    area?: OptionType<string>;
+    location?: OptionType<string>;
+    projectFlock?: OptionType<string>;
+    period: string;
+  }>({
     initial: {
-      area_id: '',
+      area: undefined,
-      location_id: '',
+      location: undefined,
-      project_flock_id: '',
+      projectFlock: undefined,
       period: formatDate(Date.now(), 'YYYY-MM-DD'),
     },
     paramMap: {
       pageSize: 'limit',
-      area_id: 'area_id',
+      area: 'area_id',
-      location_id: 'location_id',
+      location: 'location_id',
-      project_flock_id: 'project_flock_id',
+      projectFlock: 'project_flock_id',
       period: 'period',
     },
+    persist: true,
+    storeName: 'report-depreciation-table',
   });
 
   const { data: depreciationsResponse, isLoading: isLoadingDepreciations } =
@@ -109,7 +117,7 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
         <ButtonFilter
           values={tableFilterState}
           excludeFields={['page', 'pageSize']}
-          onClick={() => filterModal.openModal()}
+          onClick={filterModal.openModal}
           variant='outline'
           className='px-3 py-2.5'
         />
@@ -239,12 +247,13 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
         initialValues={tableFilterState}
         onReset={resetFilter}
         onSubmit={(values) => {
-          updateFilter('area_id', values.area_id ?? '');
+          updateFilter('area', values.area, true);
-          updateFilter('location_id', values.location_id ?? '');
+          updateFilter('location', values.location, true);
-          updateFilter('project_flock_id', values.project_flock_id ?? '');
+          updateFilter('projectFlock', values.projectFlock, true);
           updateFilter(
             'period',
-            values.period ? formatDate(values.period, 'YYYY-MM-DD') : ''
+            values.period ? formatDate(values.period, 'YYYY-MM-DD') : '',
+            true
           );
         }}
       />