fixing clear filter transfer type

src/pages/transfer/transfertype/blocks/ListToolBar.tsx

@@ -23,22 +23,6 @@ interface TransferType {
 
 const API_URL = apiConfig.service_transaction;
 
-const ListToolbar = () => {
-  const { table, reload } = useDataGrid();
-  const { handleAddDialog } = useManageTransferTypeContext();
-  const [transferTypes, setTransferTypes] = useState<TransferType[]>([]);
-  const { GetData } = useCallApi();
-
-  const [searchValue, setSearchValue] = useState('');
-  const [statusTypes, setStatusTypes] = useState('');
-  const [walletOrigins, setWalletOrigin] = useState('');
-  const [walletDestinations, setWalletDestination] = useState('');
-  const [approval, setApproval] = useState('');
-
-  const unique = (arr: string[]) => Array.from(new Set(arr));
-  const types = unique(transferTypes.map((t) => t.type));
-  const origins = unique(transferTypes.map((t) => t.wallet_origin.name));
-  const destinations = unique(transferTypes.map((t) => t.wallet_destination.name));
 const typeLabelMap: Record<string, string> = {
   D: 'Disbursement',
   O: 'Other',
@@ -61,10 +45,21 @@ const ListToolbar = () => {
   WI: 'Withdraw Merchant',
   IC: 'Income Merchant'
 };
-  const approvalLabelMap: Record<string, string> = {
-    Y: 'Yes',
-    N: 'No'
-  };
+
+// Import section remains the same...
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+  const { handleAddDialog } = useManageTransferTypeContext();
+  const [transferTypes, setTransferTypes] = useState<TransferType[]>([]);
+  const { GetData } = useCallApi();
+
+  const [searchValue, setSearchValue] = useState('');
+  const [statusTypes, setStatusTypes] = useState('');
+  const [approval, setApproval] = useState('');
+
+  const unique = (arr: string[]) => Array.from(new Set(arr));
+  const types = unique(transferTypes.map((t) => t.type));
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -78,18 +73,6 @@ const ListToolbar = () => {
     table.getColumn('type')?.setFilterValue(statusTypes);
   }, [statusTypes]);
 
-  useEffect(() => {
-    table
-      .getColumn('wallet_origin')
-      ?.setFilterValue(walletOrigins === '__all__' ? '' : walletOrigins);
-  }, [walletOrigins]);
-
-  useEffect(() => {
-    table
-      .getColumn('wallet_destination')
-      ?.setFilterValue(walletDestinations === '__all__' ? '' : walletDestinations);
-  }, [walletDestinations]);
-
   useEffect(() => {
     table.getColumn('status_approval')?.setFilterValue(approval);
   }, [approval]);
@@ -114,46 +97,30 @@ const ListToolbar = () => {
   }, []);
 
   const handleClearFilter = () => {
+    // Reset state variables
     setSearchValue('');
-    setStatusTypes('__all__');
-    setWalletOrigin('__all__');
-    setWalletDestination('__all__');
-    setApproval('__all__');
+    setStatusTypes('');
+    setApproval('');
+
+    // Clear all column filters
     table.getColumn('name')?.setFilterValue('');
     table.getColumn('type')?.setFilterValue('');
-    table.getColumn('wallet_origin')?.setFilterValue('');
-    table.getColumn('wallet_destination')?.setFilterValue('');
     table.getColumn('status_approval')?.setFilterValue('');
+
+    // Force reset the Select components by using setTimeout
+    // This ensures the state updates are processed before resetting the UI
+    setTimeout(() => {
+      // Reset to first page
       table.setPageIndex(0);
+      // Reload the data
+      reload();
+    }, 0);
   };
 
-  const renderSelect = (
-    placeholder: string,
-    value: string,
-    onChange: (val: string) => void,
-    options: string[],
-    labelMap?: Record<string, string>
-  ) => (
-    <div className="min-w-[220px]">
-      <Select value={value === '' ? undefined : value} onValueChange={onChange}>
-        <SelectTrigger className="h-8 text-sm">
-          <SelectValue placeholder={placeholder} />
-        </SelectTrigger>
-        <SelectContent>
-          {options.map((opt) => (
-            <SelectItem key={opt} value={opt}>
-              {labelMap?.[opt] ?? opt}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </div>
-  );
-  
-
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
+        {/* Top bar */}
         <div className="flex justify-between w-full items-center mb-3">
           <div className="flex w-[34%] gap-2 items-center">
             <label className="input input-sm w-full text-sm">
@@ -188,30 +155,46 @@ const ListToolbar = () => {
 
         {/* Filter bar */}
         <div className="flex flex-wrap gap-2 w-full">
-          {renderSelect(
-            'Select Status Transaction Type',
-            statusTypes,
-            setStatusTypes,
-            types,
-            typeLabelMap
-          )}
-          {renderSelect(
-            'Select Status Approval',
-            approval,
-            setApproval,
-            ['Y', 'N'],
-            approvalLabelMap
-          )}
-          {/* {renderSelect('Select Origin Wallet', walletOrigins, setWalletOrigin, origins)}
-          {renderSelect(
-            'Select Destination Wallet',
-            walletDestinations,
-            setWalletDestination,
-            destinations
-          )} */}
+          {/* Type Filter */}
+          <div className="min-w-[220px]">
+            <Select
+              key={`type-filter-${statusTypes}`}
+              value={statusTypes}
+              onValueChange={setStatusTypes}
+            >
+              <SelectTrigger className="h-8 text-sm">
+                <SelectValue placeholder="Select Status Transaction Type" />
+              </SelectTrigger>
+              <SelectContent className="w-[var(--radix-select-trigger-width)] max-h-64 overflow-y-auto">
+                {types.map((opt) => (
+                  <SelectItem key={opt} value={opt} className="truncate">
+                    {typeLabelMap[opt] ?? opt}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
 
-          {/* {renderSelect('Origin', walletOrigins, setWalletOrigin, origins)}
-          {renderSelect('Destination', walletDestinations, setWalletDestination, destinations)} */}
+          {/* Approval Filter */}
+          <div className="min-w-[220px]">
+            <Select
+              key={`approval-filter-${approval}`}
+              value={approval}
+              onValueChange={setApproval}
+            >
+              <SelectTrigger className="h-8 text-sm">
+                <SelectValue placeholder="Select Status Approval" />
+              </SelectTrigger>
+              <SelectContent className="w-[var(--radix-select-trigger-width)] max-h-64 overflow-y-auto">
+                <SelectItem value="Y" className="truncate">
+                  Yes
+                </SelectItem>
+                <SelectItem value="N" className="truncate">
+                  No
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
         </div>
       </div>
     </div>

src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx

@@ -325,7 +325,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
       order_direction: orderDirection,
       filter: JSON.stringify(filterObject)
     });
-    // console.log(response);
+    console.log(response);
     return { data: response?.data.list, totalCount: response?.data.total_count };
   };