add filter by dropdown on table wallet rule

src/pages/master/walletRule/blocks/ListToolbar.tsx

@@ -1,37 +1,149 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
 import { useManageWalletRuleContext } from '../hooks/useManageWalletRuleContext';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+
+const API_URL_WALLET = apiConfig.service_master_data;
+const API_URL_GROUP = apiConfig.service_customer;
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
+  const { GetData } = useCallApi();
   const { handleAddDialog } = useManageWalletRuleContext();
+  const [wallets, setWallets] = useState([]);
+  const [groups, setGroups] = useState([]);
+  const [walletFilter, setWalletFilter] = useState<string>('');
+  const [groupFilter, setGroupFilter] = useState<string>('');
+
+  const handleClearFilter = () => {
+    setWalletFilter('');
+    setGroupFilter('');
+    table.getColumn('wallet_name')?.setFilterValue(undefined);
+    table.getColumn('group_name')?.setFilterValue(undefined);
+  };
+
+  useEffect(() => {
+    const fetchWallets = async (sorting: any) => {
+      try {
+        const response = await GetData(`${API_URL_WALLET}/wallet/list`, {
+          limit: 25,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+        setWallets(response?.data.list.map((item: any) => ({ id: item.id, name: item.name })));
+      } catch (error) {
+        toast.error('Failed to get Wallets');
+      }
+    };
+
+    const fetchGroups = async (sorting: any) => {
+      try {
+        const response = await GetData(`${API_URL_GROUP}/groups/list`, {
+          limit: 25,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+        setGroups(response?.data.list.map((item: any) => ({ id: item.id, name: item.name })));
+      } catch (error) {
+        toast.error('Failed to get Groups');
+      }
+    };
+
+    fetchWallets([{ id: 'wallets.name', desc: false }]);
+    fetchGroups([{ id: 'name', desc: false }]);
+  }, []);
+
+  useEffect(() => {
+    const filters: Record<string, any> = {};
+
+    if (walletFilter) {
+      filters['id_wallet'] = walletFilter;
+    }
+
+    if (groupFilter) {
+      filters['id_group'] = groupFilter;
+    }
+
+    table.setColumnFilters([
+      {
+        id: 'custom',
+        value: JSON.stringify(filters)
+      }
+    ]);
+  }, [walletFilter, groupFilter]);
+
+  // console.log(wallets);
 
   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">
         <div className="flex justify-between w-full items-center">
-          <div className="flex w-[50%] gap-3 items-center">
-            {/* <label className="input input-sm w-1/3">
-              <KeenIcon icon="magnifier" />
-              <input
-                type="text"
-                placeholder="Search Wallet Rule"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
-              />
-            </label> */}
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
-              >
-                {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
-                <KeenIcon icon="filter" />
-              </Button>
-            </DefaultTooltip> */}
+          {/* Left Side: Filters */}
+          <div className="flex w-[60%] gap-3 items-end">
+            {/* Wallet Filter */}
+            <div className="flex flex-col w-1/3">
+              <label htmlFor="wallet-filter" className="text-sm font-medium text-gray-700 mb-2">
+                Filter by Wallet
+              </label>
+              <Select value={walletFilter} onValueChange={(value) => setWalletFilter(value)}>
+                <SelectTrigger className="input input-sm h-[31px]">
+                  <SelectValue placeholder="Select Wallet" />
+                </SelectTrigger>
+                <SelectContent>
+                  {wallets.map((wallet: any) => (
+                    <SelectItem key={wallet.id} value={wallet.id.toString()}>
+                      {wallet.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Group Filter */}
+            <div className="flex flex-col w-1/3">
+              <label htmlFor="group-filter" className="text-sm font-medium text-gray-700 mb-2 ">
+                Filter by Group
+              </label>
+              <Select value={groupFilter} onValueChange={(value) => setGroupFilter(value)}>
+                <SelectTrigger className="input input-sm h-[31px]">
+                  <SelectValue placeholder="Select Group" />
+                </SelectTrigger>
+                <SelectContent>
+                  {groups.map((group: any) => (
+                    <SelectItem key={group.id} value={group.id.toString()}>
+                      {group.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Reset Filter Button */}
+            <div className="flex flex-col">
+              <label className="text-sm font-medium text-transparent mb-1">Reset</label>
+              <DefaultTooltip title="Reset Filter" placement="top">
+                <Button variant="outline" className="h-[31px] w-full" onClick={handleClearFilter}>
+                  <KeenIcon icon="arrow-circle-left" />
+                </Button>
+              </DefaultTooltip>
+            </div>
           </div>
+
+          {/* Right Side: Action Buttons */}
           <div className="flex gap-3 items-center">
             <Button
               variant="outline"
@@ -40,7 +152,7 @@ const ListToolbar = () => {
             >
               Add Data
             </Button>
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
+            <DefaultTooltip title="Refresh" placement="top">
               <Button variant="outline" className="h-7.5" onClick={() => reload()}>
                 <KeenIcon icon="arrows-circle" />
               </Button>

src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx

@@ -205,14 +205,22 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
   const getWalletRuleLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
       sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-      filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+
+      let filterObject = {};
+
+      if (filter.length > 0 && filter[0].value) {
+        const parsedFilter = JSON.parse(filter[0].value);
+
+        filterObject = { ...parsedFilter };
+      }
+
       const response = await GetData(`${API_URL_WALLET}/dashboard/wallet_rule`, {
         limit,
         page: page + 1,
         with_deleted: false,
         order_field: sorting[0].id,
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
-        filter: JSON.stringify(filter)
+        filter: JSON.stringify(filterObject)
       });
       // console.log(response?.data);
       setWalletRules(response?.data.list);