feat: add more filters

src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx

@@ -119,6 +119,8 @@ const InventoryAdjustmentTable = () => {
       productFilter: '',
       warehouseFilter: '',
       transactionTypeFilter: '',
+      productName: '',
+      warehouseName: '',
     },
     paramMap: {
       page: 'page',
@@ -131,6 +133,9 @@ const InventoryAdjustmentTable = () => {
       warehouseFilter: 'warehouse_id',
       transactionTypeFilter: 'transaction_type',
     },
+    excludeKeysFromUrl: ['productName', 'warehouseName'],
+    persist: true,
+    storeName: 'inventory-adjustment-table',
   });
 
   // ===== FILTER MODAL STATE =====
@@ -140,14 +145,16 @@ const InventoryAdjustmentTable = () => {
   const formik = useFormik<AdjustmentFilterType>({
     initialValues: {
       product_id: null,
-      warehouse: null,
+      warehouse_id: null,
       transaction_type: null,
     },
     validationSchema: AdjustmentFilterSchema,
     onSubmit: (values, { setSubmitting }) => {
       updateFilter('productFilter', values.product_id || '');
-      updateFilter('warehouseFilter', String(values.warehouse?.value) || '');
+      updateFilter('warehouseFilter', values.warehouse_id || '');
       updateFilter('transactionTypeFilter', values.transaction_type || '');
+      updateFilter('productName', productIdValue?.label ? String(productIdValue.label) : '');
+      updateFilter('warehouseName', warehouseIdValue?.label ? String(warehouseIdValue.label) : '');
       filterModal.closeModal();
       setSubmitting(false);
     },
@@ -155,6 +162,9 @@ const InventoryAdjustmentTable = () => {
       updateFilter('productFilter', '');
       updateFilter('warehouseFilter', '');
       updateFilter('transactionTypeFilter', '');
+      updateFilter('productName', '');
+      updateFilter('warehouseName', '');
+      filterModal.closeModal();
     },
   });
 
@@ -205,7 +215,8 @@ const InventoryAdjustmentTable = () => {
   const handleFilterWarehouseChange = (
     val: OptionType | OptionType[] | null
   ) => {
-    formik.setFieldValue('warehouse', val);
+    const warehouse = val as OptionType | null;
+    formik.setFieldValue('warehouse_id', warehouse?.value ? String(warehouse.value) : null);
   };
 
   const handleFilterTransactionTypeChange = useCallback(
@@ -220,12 +231,27 @@ const InventoryAdjustmentTable = () => {
   // ===== 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;
+    const found = warehouseOptions.find(
+      (opt) => String(opt.value) === formik.values.warehouse_id
+    );
+    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]);
 
   const transactionTypeValue = useMemo(() => {
     if (!formik.values.transaction_type) return null;
@@ -238,8 +264,12 @@ const InventoryAdjustmentTable = () => {
 
   // ===== HANDLE FILTER MODAL OPEN =====
   const handleFilterModalOpen = () => {
+    formik.setValues({
+      product_id: tableFilterState.productFilter || null,
+      warehouse_id: tableFilterState.warehouseFilter || null,
+      transaction_type: tableFilterState.transactionTypeFilter || null,
+    });
     filterModal.openModal();
-    formik.validateForm();
   };
 
   const {
@@ -507,6 +537,8 @@ const InventoryAdjustmentTable = () => {
                 'productSort',
                 'warehouseSort',
                 'stockSort',
+                'productName',
+                'warehouseName',
               ]}
               onClick={handleFilterModalOpen}
               className='px-3 py-2.5'
@@ -608,7 +640,7 @@ const InventoryAdjustmentTable = () => {
               label='Gudang'
               placeholder='Pilih Gudang'
               options={warehouseOptions}
-              value={formik.values.warehouse}
+              value={warehouseIdValue}
               onChange={handleFilterWarehouseChange}
               onInputChange={setWarehouseInputValue}
               isLoading={isLoadingWarehouseOptions}
@@ -630,13 +662,9 @@ const InventoryAdjustmentTable = () => {
           {/* 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>