add group name filter on wallet history

src/pages/wallet/wallet-history/blocks/ListToolbar.tsx

@@ -19,6 +19,11 @@ interface WalletProps {
   name: string;
 }
 
+interface GroupProps {
+  ID: string;
+  name: string;
+}
+
 const getOneMonthsAgo = () => {
   const today = new Date();
   return new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
@@ -37,7 +42,11 @@ const ListToolbar = () => {
   const [walletId, setWalletId] = useState<string>(
     (table.getColumn('id_wallet')?.getFilterValue() as string) ?? ''
   );
+  const [groupId, setGroupId] = useState<string>(
+    (table.getColumn('id_group')?.getFilterValue() as string) ?? ''
+  );
   const [wallets, setWallets] = useState<WalletProps[]>([]);
+  const [groups, setGroups] = useState<GroupProps[]>([]);
 
   useEffect(() => {
     const today = new Date();
@@ -67,6 +76,11 @@ const ListToolbar = () => {
     table.setPageIndex(0);
   }, [walletId, table]);
 
+  useEffect(() => {
+    table.getColumn('id_group')?.setFilterValue(groupId);
+    table.setPageIndex(0);
+  }, [groupId, table]);
+
   useEffect(() => {
     if (dateRange.from && dateRange.to) {
       handleFilterByDate();
@@ -83,14 +97,29 @@ const ListToolbar = () => {
         order_direction: 'ASC'
       });
       setWallets(response?.data.list || []);
-      // console.log('Wallets: ', response?.data);
     } catch (error) {
       console.error('Error fetching wallets', error);
     }
   };
 
+  const fetchGroups = async () => {
+    try {
+      const response = await GetData(`${API_URL_WALLET}/dashboard/group/`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: 'created_at',
+        order_direction: 'ASC'
+      });
+      setGroups(response?.data.list || []);
+    } catch (error) {
+      console.error('Error fetching groups', error);
+    }
+  };
+
   useEffect(() => {
     fetchWallets();
+    fetchGroups();
   }, []);
 
   const handleClearAllFilters = () => {
@@ -103,10 +132,12 @@ const ListToolbar = () => {
   
     setSearchValue('');
     setWalletId('');
+    setGroupId('');
     setDateRange(resetDateRange);
   
     table.getColumn('msisdn')?.setFilterValue('');
     table.getColumn('id_wallet')?.setFilterValue('');
+    table.getColumn('id_group')?.setFilterValue('');
     table.getColumn('CreatedAt')?.setFilterValue(resetDateRange);
   
     setTimeout(() => {
@@ -115,7 +146,6 @@ const ListToolbar = () => {
     }, 0);
   };
   
-
   const handleRefresh = () => {
     const today = new Date();
     const threeMonthsAgo = getOneMonthsAgo();
@@ -126,6 +156,7 @@ const ListToolbar = () => {
 
     setSearchValue('');
     setWalletId('');
+    setGroupId('');
     setDateRange(resetDateRange);
 
     table.setColumnFilters([{ id: 'CreatedAt', value: resetDateRange }]);
@@ -181,6 +212,22 @@ const ListToolbar = () => {
                 </SelectContent>
               </Select>
             </div>
+
+            <div className="w-[160px]">
+              <Select value={groupId} onValueChange={(value) => setGroupId(value)}>
+                <SelectTrigger className="h-[32px]">
+                  <SelectValue placeholder="Select Group" />
+                </SelectTrigger>
+                <SelectContent>
+                  {groups.map((group) => (
+                    <SelectItem key={group.ID} value={group.ID}>
+                      {group.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
             <DefaultTooltip title={'Reset Filter'} placement={'top'}>
               <Button
                 variant="outline"

src/pages/wallet/wallet-history/hooks/ManageWalletHistoryContext.tsx

@@ -78,23 +78,14 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
     () => [
       {
         accessorKey: 'id_wallet',
-        header: ({ column }) => <DataGridColumnHeader title="Wallet ID" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Wallet Name" column={column} />,
+        cell: ({ row }) => row.original.name || 'Unknown Wallet',
         enableSorting: false,
         enableHiding: false,
         meta: {
           headerClassName: 'w-[200px]'
         }
       },
-      {
-        accessorKey: 'name',
-        header: ({ column }) => <DataGridColumnHeader title="Wallet Name" column={column} />,
-        enableSorting: false,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[200px]',
-          cellClassName: 'p-[20px]'
-        }
-      },
       {
         accessorKey: 'msisdn',
         header: ({ column }) => <DataGridColumnHeader title="MSISDN" column={column} />,
@@ -182,8 +173,9 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         }
       },
       {
-        accessorKey: 'group_name',
+        accessorKey: 'id_group',
         header: ({ column }) => <DataGridColumnHeader title="Group Name" column={column} />,
+        cell: ({ row }) => row.original.group_name || 'Unknown Group',
         enableSorting: false,
         enableHiding: false,
         meta: {
@@ -213,10 +205,6 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
 
       if (Array.isArray(filter)) {
         filter.forEach((f: any) => {
-          if (f.id === 'name' && f.value) {
-            filterParams.name = { like: `%${f.value.toLowerCase()}%` };
-          }
-
           if (f.id === 'msisdn' && f.value) {
             filterParams.msisdn = { like: `%${f.value.toLowerCase()}%` };
           }
@@ -231,6 +219,10 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
           if (f.id === 'id_wallet' && f.value) {
             filterParams.id_wallet = f.value;
           }
+          
+          if (f.id === 'id_group' && f.value) {
+            filterParams.id_group = f.value;
+          }
         });
       }