feat: implement table filter state persist

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: '',
-      location_id: '',
-      project_flock_id: '',
+      area: undefined,
+      location: undefined,
+      projectFlock: undefined,
       period: formatDate(Date.now(), 'YYYY-MM-DD'),
     },
     paramMap: {
       pageSize: 'limit',
-      area_id: 'area_id',
-      location_id: 'location_id',
-      project_flock_id: 'project_flock_id',
+      area: 'area_id',
+      location: 'location_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('location_id', values.location_id ?? '');
-          updateFilter('project_flock_id', values.project_flock_id ?? '');
+          updateFilter('area', values.area, true);
+          updateFilter('location', values.location, true);
+          updateFilter('projectFlock', values.projectFlock, true);
           updateFilter(
             'period',
-            values.period ? formatDate(values.period, 'YYYY-MM-DD') : ''
+            values.period ? formatDate(values.period, 'YYYY-MM-DD') : '',
+            true
           );
         }}
       />