fix: persist table filter state in master data

src/components/pages/master-data/warehouse/WarehousesTable.tsx

@@ -1,13 +1,6 @@
 'use client';
 
-import {
-  ChangeEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import { usePathname } from 'next/navigation';
+import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
 import useSWR from 'swr';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
@@ -31,7 +24,6 @@ import { Warehouse } from '@/types/api/master-data/warehouse';
 import { WarehouseApi, AreaApi } from '@/services/api/master-data';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { useUiStore } from '@/stores/ui/ui.store';
 import {
   WarehouseFilterSchema,
   WarehouseFilterType,
@@ -120,9 +112,6 @@ const RowOptionsMenu = ({
 };
 
 const WarehousesTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -141,6 +130,8 @@ const WarehousesTable = () => {
       areaFilter: 'area_id',
       activeProjectFlockFilter: 'active_project_flock',
     },
+    persist: true,
+    storeName: 'warehouses-table',
   });
 
   // ===== FILTER MODAL STATE =====
@@ -149,27 +140,36 @@ const WarehousesTable = () => {
   // ===== FORMIK SETUP =====
   const formik = useFormik<WarehouseFilterType>({
     initialValues: {
-      area_id: null,
-      active_project_flock: false,
+      area_id: tableFilterState.areaFilter || null,
+      active_project_flock:
+        tableFilterState.activeProjectFlockFilter === 'true',
     },
     validationSchema: WarehouseFilterSchema,
     onSubmit: (values, { setSubmitting }) => {
-      updateFilter('areaFilter', values.area_id || '');
+      updateFilter('areaFilter', values.area_id || '', true);
       updateFilter(
         'activeProjectFlockFilter',
-        values.active_project_flock === true ? 'true' : ''
+        values.active_project_flock === true ? 'true' : '',
+        true
       );
       filterModal.closeModal();
       setSubmitting(false);
     },
-    onReset: () => {
-      updateFilter('areaFilter', '');
-      updateFilter('activeProjectFlockFilter', '');
-      formik.setFieldValue('active_project_flock', false);
-    },
   });
 
-  const { setFieldValue } = formik;
+  const formikResetHandler = () => {
+    updateFilter('areaFilter', '', true);
+    updateFilter('activeProjectFlockFilter', '', true);
+
+    formik.resetForm({
+      values: {
+        area_id: null,
+        active_project_flock: false,
+      },
+    });
+
+    filterModal.closeModal();
+  };
 
   // ===== AREA OPTIONS =====
   const {
@@ -243,26 +243,6 @@ const WarehousesTable = () => {
     formik.validateForm();
   };
 
-  useEffect(() => {
-    if (filterModal.open) {
-      const activeProjectFlockValue =
-        tableFilterState.activeProjectFlockFilter === 'true' ? true : false; // Default ke false (Semua Kandang)
-      setFieldValue('active_project_flock', activeProjectFlockValue);
-    }
-  }, [
-    filterModal.open,
-    tableFilterState.activeProjectFlockFilter,
-    setFieldValue,
-  ]);
-
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
-
-  useEffect(() => {
-    setTableState('warehouses-table', pathname);
-  }, [pathname, setTableState]);
-
   const [sorting, setSorting] = useState<SortingState>([]);
 
   const {
@@ -281,8 +261,7 @@ const WarehousesTable = () => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
-    updateFilter('search', e.target.value);
+    updateFilter('search', e.target.value, true);
   };
 
   const confirmationModalDeleteClickHandler = async () => {
@@ -507,7 +486,7 @@ const WarehousesTable = () => {
             <Icon icon='heroicons:x-mark' width={20} height={20} />
           </Button>
         </div>
-        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
+        <form onSubmit={formik.handleSubmit} onReset={formikResetHandler}>
           <div className='p-4 flex flex-col gap-1.5'>
             <SelectInput
               label='Area'
@@ -538,10 +517,7 @@ const WarehousesTable = () => {
               type='button'
               variant='soft'
               className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
-              onClick={() => {
-                formik.resetForm();
-                filterModal.closeModal();
-              }}
+              onClick={formikResetHandler}
             >
               Reset Filter
             </Button>