fixing clear filter transfer type

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

@@ -23,6 +23,31 @@ interface TransferType {
 
 const API_URL = apiConfig.service_transaction;
 
+const typeLabelMap: Record<string, string> = {
+  D: 'Disbursement',
+  O: 'Other',
+  CA: 'Change Group Emoney Customer to Agent',
+  AC: 'Change Group Emoney Agent to Customer',
+  PC: 'Change Group Point Agent to Customer',
+  PA: 'Change Group Point Customer to Agent',
+  CE: 'Return Customer Emoney',
+  AD: 'Return Agent Deposit',
+  AM: 'Return Agent Merchant',
+  AE: 'Return Agent Emoney',
+  R: 'Reward Point',
+  TE: 'Top Up Escrow',
+  TM: 'Top Up Master Agent',
+  TA: 'Top Up Agent',
+  PL: 'Purchase Loja',
+  DE: 'Disbursment Escrow',
+  DM: 'Disbursment Master Agent',
+  DA: 'Disbursment Agent',
+  WI: 'Withdraw Merchant',
+  IC: 'Income Merchant'
+};
+
+// Import section remains the same...
+
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageTransferTypeContext();
@@ -31,40 +56,10 @@ const ListToolbar = () => {
 
   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',
-    CA: 'Change Group Emoney Customer to Agent',
-    AC: 'Change Group Emoney Agent to Customer',
-    PC: 'Change Group Point Agent to Customer',
-    PA: 'Change Group Point Customer to Agent',
-    CE: 'Return Customer Emoney',
-    AD: 'Return Agent Deposit',
-    AM: 'Return Agent Merchant',
-    AE: 'Return Agent Emoney',
-    R: 'Reward Point',
-    TE: 'Top Up Escrow',
-    TM: 'Top Up Master Agent',
-    TA: 'Top Up Agent',
-    PL: 'Purchase Loja',
-    DE: 'Disbursment Escrow',
-    DM: 'Disbursment Master Agent',
-    DA: 'Disbursment Agent',
-    WI: 'Withdraw Merchant',
-    IC: 'Income Merchant'
-  };
-  const approvalLabelMap: Record<string, string> = {
-    Y: 'Yes',
-    N: 'No'
-  };
 
   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__');
+    setStatusTypes('');
-    setWalletOrigin('__all__');
+    setApproval('');
-    setWalletDestination('__all__');
+
-    setApproval('__all__');
+    // 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('');
-    table.setPageIndex(0);
-  };
 
-  const renderSelect = (
+    // Force reset the Select components by using setTimeout
-    placeholder: string,
+    // This ensures the state updates are processed before resetting the UI
-    value: string,
+    setTimeout(() => {
-    onChange: (val: string) => void,
+      // Reset to first page
-    options: string[],
+      table.setPageIndex(0);
-    labelMap?: Record<string, string>
+      // Reload the data
-  ) => (
+      reload();
-    <div className="min-w-[220px]">
+    }, 0);
-      <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(
+          {/* Type Filter */}
-            'Select Status Transaction Type',
+          <div className="min-w-[220px]">
-            statusTypes,
+            <Select
-            setStatusTypes,
+              key={`type-filter-${statusTypes}`}
-            types,
+              value={statusTypes}
-            typeLabelMap
+              onValueChange={setStatusTypes}
-          )}
+            >
-          {renderSelect(
+              <SelectTrigger className="h-8 text-sm">
-            'Select Status Approval',
+                <SelectValue placeholder="Select Status Transaction Type" />
-            approval,
+              </SelectTrigger>
-            setApproval,
+              <SelectContent className="w-[var(--radix-select-trigger-width)] max-h-64 overflow-y-auto">
-            ['Y', 'N'],
+                {types.map((opt) => (
-            approvalLabelMap
+                  <SelectItem key={opt} value={opt} className="truncate">
-          )}
+                    {typeLabelMap[opt] ?? opt}
-          {/* {renderSelect('Select Origin Wallet', walletOrigins, setWalletOrigin, origins)}
+                  </SelectItem>
-          {renderSelect(
+                ))}
-            'Select Destination Wallet',
+              </SelectContent>
-            walletDestinations,
+            </Select>
-            setWalletDestination,
+          </div>
-            destinations
-          )} */}
 
-          {/* {renderSelect('Origin', walletOrigins, setWalletOrigin, origins)}
+          {/* Approval Filter */}
-          {renderSelect('Destination', walletDestinations, setWalletDestination, destinations)} */}
+          <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 };
   };