add wallet name on wallet history

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

@@ -83,6 +83,7 @@ const ListToolbar = () => {
         order_direction: 'ASC'
       });
       setWallets(response?.data.list || []);
+      // console.log('Wallets: ', response?.data);
     } catch (error) {
       console.error('Error fetching wallets', error);
     }

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

@@ -6,7 +6,6 @@ import { ColumnDef } from '@tanstack/react-table';
 import React, { createContext, useCallback, useMemo, useState } from 'react';
 import ListToolbar from '../blocks/ListToolbar';
 
-// Helper function for number formatting with currency format
 const formatNumber = (num: number, currencyCode: string = 'USD'): string => {
   return num.toLocaleString('en-US', {
     style: 'currency',
@@ -79,30 +78,39 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
+      {
+        accessorKey: 'id_wallet',
+        header: ({ column }) => <DataGridColumnHeader title="Wallet ID" column={column} />,
+        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} />,
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: {
           headerClassName: 'w-[550px]',
           cellClassName: 'p-[20px]'
         }
       },
-      {
-        accessorKey: 'id_wallet',
-        header: ({ column }) => <DataGridColumnHeader title="Wallet ID" column={column} />,
-        enableSorting: false,
-        enableHiding: true, // Hide this column from view but use it for filtering
-        meta: {
-          headerClassName: 'w-[200px]'
-        }
-      },
       {
         accessorKey: 'amount',
         header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
         cell: ({ row }) => {
-          // Get currency code from the nested data structure if available
           const currencyCode = row.original.balance_type?.currency?.code || 'USD';
           return formatNumber(row.original.amount, currencyCode);
         },
@@ -127,7 +135,6 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         accessorKey: 'amount_this_month',
         header: ({ column }) => <DataGridColumnHeader title="Amount This Month" column={column} />,
         cell: ({ row }) => {
-          // Get currency code from the nested data structure if available
           const currencyCode = row.original.balance_type?.currency?.code || 'USD';
           return formatNumber(row.original.amount_this_month, currencyCode);
         },
@@ -213,18 +220,18 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
       const sortField = sorting.length > 0 ? sorting[0].id : 'created_at';
       const sortDirection = sorting.length > 0 ? (sorting[0].desc ? 'ASC' : 'DESC') : 'DESC';
 
-      // Initialize filter object
       let filterParams: any = {};
 
-      // Process filter array
       if (Array.isArray(filter)) {
         filter.forEach((f: any) => {
-          // Handle MSISDN search
+          if (f.id === 'name' && f.value) {
+            filterParams.name = { like: `%${f.value.toLowerCase()}%` };
+          }
+
           if (f.id === 'msisdn' && f.value) {
             filterParams.msisdn = { like: `%${f.value.toLowerCase()}%` };
           }
 
-          // Handle date range filter
           if (f.id === 'CreatedAt' && f.value?.from && f.value?.to) {
             filterParams.created_at = {
               from: `${f.value.from} 00:00:00`,
@@ -232,7 +239,6 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
             };
           }
 
-          // Handle wallet ID filter
           if (f.id === 'id_wallet' && f.value) {
             filterParams.id_wallet = f.value;
           }
@@ -247,14 +253,37 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         order_direction: sortDirection,
         filter: JSON.stringify(filterParams)
       });
-
+      // console.log(response);
       if (!response || !response.data) {
         console.warn('No data received:', response);
         return { data: [], totalCount: 0 };
       }
 
-      setWallets(response?.data.list);
-      return { data: response?.data.list, totalCount: response?.data.total_count };
+      const walletsResponse = await GetData(`${API_URL_WALLET}/dashboard/wallet/`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: 'created_at',
+        order_direction: 'ASC'
+      });
+
+      const walletsMap = walletsResponse?.data?.list
+        ? walletsResponse.data.list.reduce((acc: any, wallet: any) => {
+            acc[wallet.ID] = wallet.name;
+            return acc;
+          }, {})
+        : {};
+
+      const enrichedData = response?.data.list.map((item: any) => ({
+        ...item,
+        name: walletsMap[item.id_wallet] || 'Unknown Wallet'
+      }));
+
+      setWallets(enrichedData);
+      return {
+        data: enrichedData,
+        totalCount: response?.data.total_count
+      };
     } catch (error) {
       console.error('Error fetching Wallet', error);
       return { data: [], totalCount: 0 };
@@ -293,4 +322,4 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
 };
 
 export { ManageWalletContext, ManageWalletContextProvider };
-export type { WalletProps };
+export type { WalletProps };