feat: add more filters

src/components/pages/inventory/movement/MovementTable.tsx

@@ -122,6 +122,8 @@ const MovementTable = () => {
       search: '',
       productFilter: '',
       warehouseFilter: '',
+      productName: '',
+      warehouseName: '',
     },
     paramMap: {
       page: 'page',
@@ -129,6 +131,9 @@ const MovementTable = () => {
       productFilter: 'product_id',
       warehouseFilter: 'warehouse_id',
     },
+    excludeKeysFromUrl: ['productName', 'warehouseName'],
+    persist: true,
+    storeName: 'movement-table',
   });
 
   // ===== FILTER MODAL STATE =====
@@ -144,12 +149,17 @@ const MovementTable = () => {
     onSubmit: (values, { setSubmitting }) => {
       updateFilter('productFilter', values.product_id || '');
       updateFilter('warehouseFilter', values.warehouse_id || '');
+      updateFilter('productName', productIdValue?.label ? String(productIdValue.label) : '');
+      updateFilter('warehouseName', warehouseIdValue?.label ? String(warehouseIdValue.label) : '');
       filterModal.closeModal();
       setSubmitting(false);
     },
     onReset: () => {
       updateFilter('productFilter', '');
       updateFilter('warehouseFilter', '');
+      updateFilter('productName', '');
+      updateFilter('warehouseName', '');
+      filterModal.closeModal();
     },
   });
 
@@ -201,26 +211,35 @@ const MovementTable = () => {
   // ===== FILTER HELPERS =====
   const productIdValue = useMemo(() => {
     if (!formik.values.product_id) return null;
-    return (
-      productOptions.find(
-        (opt) => String(opt.value) === formik.values.product_id
-      ) || null
+    const found = productOptions.find(
+      (opt) => String(opt.value) === formik.values.product_id
     );
-  }, [formik.values.product_id, productOptions]);
+    if (found) return found;
+    if (tableFilterState.productName) {
+      return { value: formik.values.product_id, label: tableFilterState.productName };
+    }
+    return null;
+  }, [formik.values.product_id, productOptions, tableFilterState.productName]);
 
   const warehouseIdValue = useMemo(() => {
     if (!formik.values.warehouse_id) return null;
-    return (
-      warehouseOptions.find(
-        (opt) => String(opt.value) === formik.values.warehouse_id
-      ) || null
+    const found = warehouseOptions.find(
+      (opt) => String(opt.value) === formik.values.warehouse_id
     );
-  }, [formik.values.warehouse_id, warehouseOptions]);
+    if (found) return found;
+    if (tableFilterState.warehouseName) {
+      return { value: formik.values.warehouse_id, label: tableFilterState.warehouseName };
+    }
+    return null;
+  }, [formik.values.warehouse_id, warehouseOptions, tableFilterState.warehouseName]);
 
   // ===== HANDLE FILTER MODAL OPEN =====
   const handleFilterModalOpen = () => {
+    formik.setValues({
+      product_id: tableFilterState.productFilter || null,
+      warehouse_id: tableFilterState.warehouseFilter || null,
+    });
     filterModal.openModal();
-    formik.validateForm();
   };
 
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -384,7 +403,7 @@ const MovementTable = () => {
 
             <ButtonFilter
               values={tableFilterState}
-              excludeFields={['page', 'pageSize', 'search']}
+              excludeFields={['page', 'pageSize', 'search', 'productName', 'warehouseName']}
               onClick={handleFilterModalOpen}
               className='px-3 py-2.5'
             />
@@ -489,13 +508,9 @@ const MovementTable = () => {
           {/* 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>