fix: persist table filter state in master data

src/components/pages/master-data/supplier/SupplierTable.tsx

@@ -7,7 +7,6 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { usePathname } from 'next/navigation';
 import useSWR from 'swr';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
@@ -30,7 +29,7 @@ import { Supplier } from '@/types/api/master-data/supplier';
 import { SupplierApi } 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 {
   SupplierFilterSchema,
   SupplierFilterType,
@@ -117,20 +116,21 @@ const RowOptionsMenu = ({
 };
 
 const SuppliersTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
     setPage,
     setPageSize,
     toQueryString: getTableFilterQueryString,
-  } = useTableFilter({
+  } = useTableFilter<{
+    search: string;
+    categoryFilter?: OptionType<string>;
+    flagFilter?: string;
+  }>({
     initial: {
       search: '',
-      categoryFilter: '',
-      flagFilter: '',
+      categoryFilter: undefined,
+      flagFilter: undefined,
     },
     paramMap: {
       page: 'page',
@@ -138,6 +138,8 @@ const SuppliersTable = () => {
       categoryFilter: 'category_id',
       flagFilter: 'flag',
     },
+    persist: true,
+    storeName: 'supplier-table',
   });
 
   // ===== FILTER MODAL STATE =====
@@ -146,26 +148,33 @@ const SuppliersTable = () => {
   // ===== FORMIK SETUP =====
   const formik = useFormik<SupplierFilterType>({
     initialValues: {
-      category_id: null,
-      flag: false,
+      category: tableFilterState.categoryFilter,
+      flag: tableFilterState.flagFilter === 'EKSPEDISI',
     },
     validationSchema: SupplierFilterSchema,
     onSubmit: (values, { setSubmitting }) => {
-      updateFilter('categoryFilter', values.category_id || '');
-      updateFilter(
-        'flagFilter',
-        values.flag === true ? 'EKSPEDISI' : values.flag === false ? '' : ''
-      );
+      updateFilter('categoryFilter', values.category || undefined, true);
+      updateFilter('flagFilter', values.flag === true ? 'EKSPEDISI' : '', true);
       filterModal.closeModal();
+
       setSubmitting(false);
     },
-    onReset: () => {
-      updateFilter('categoryFilter', '');
-      updateFilter('flagFilter', '');
-      formik.setFieldValue('flag', false);
-    },
   });
 
+  const formikResetHandler = () => {
+    updateFilter('categoryFilter', undefined, true);
+    updateFilter('flagFilter', '', true);
+
+    formik.resetForm({
+      values: {
+        category: undefined,
+        flag: false,
+      },
+    });
+
+    filterModal.closeModal();
+  };
+
   const { setFieldValue } = formik;
 
   // ===== CATEGORY OPTIONS (SAPRONAK or BOP) =====
@@ -187,15 +196,11 @@ const SuppliersTable = () => {
   );
 
   // ===== FILTER HANDLERS =====
-  const handleFilterCategoryChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const option = val as OptionType | null;
-      const categoryId = option?.value ? String(option.value) : null;
-
-      setFieldValue('category_id', categoryId);
-    },
-    [setFieldValue]
-  );
+  const handleFilterCategoryChange = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    setFieldValue('category', val);
+  };
 
   const handleFilterFlagChange = useCallback(
     (val: OptionType | OptionType[] | null) => {
@@ -213,13 +218,13 @@ const SuppliersTable = () => {
   );
 
   // ===== FILTER HELPERS =====
-  const categoryIdValue = useMemo(() => {
-    if (!formik.values.category_id) return null;
-    return (
-      categoryOptions.find((opt) => opt.value === formik.values.category_id) ||
-      null
-    );
-  }, [formik.values.category_id, categoryOptions]);
+  // const categoryIdValue = useMemo(() => {
+  //   if (!formik.values.category_id) return null;
+  //   return (
+  //     categoryOptions.find((opt) => opt.value === formik.values.category_id) ||
+  //     null
+  //   );
+  // }, [formik.values.category_id, categoryOptions]);
 
   const flagValue = useMemo(() => {
     if (formik.values.flag === null) return null;
@@ -243,14 +248,6 @@ const SuppliersTable = () => {
     }
   }, [filterModal.open, tableFilterState.flagFilter, setFieldValue]);
 
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
-
-  useEffect(() => {
-    setTableState('suppliers-table', pathname);
-  }, [pathname, setTableState]);
-
   const [sorting, setSorting] = useState<SortingState>([]);
 
   const {
@@ -269,8 +266,7 @@ const SuppliersTable = () => {
   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 () => {
@@ -491,13 +487,13 @@ const SuppliersTable = () => {
             <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'>
             <SelectInputRadio
               label='Kategori'
               placeholder='Pilih Kategori'
               options={categoryOptions}
-              value={categoryIdValue}
+              value={formik.values.category}
               onChange={handleFilterCategoryChange}
               isClearable
               className={{ wrapper: 'w-full' }}
@@ -517,13 +513,9 @@ const SuppliersTable = () => {
           {/* Modal Footer */}
           <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
             <Button
-              type='button'
+              type='reset'
               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();
-              }}
             >
               Reset Filter
             </Button>