TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding 3 filters on wallet history

Browse Source
This commit is contained in:
bagusajisaputroo
2025-04-28 20:38:15 +07:00
parent 396f69fd99
commit d6e947f999
2 changed files with 247 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/pages/wallet/wallet-history/hooks/ManageWalletHistoryContext.tsx
View File

@ -6,6 +6,16 @@ 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',
currency: currencyCode,
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
};
interface WalletProps {
id: string;
name: string;
@ -23,11 +33,10 @@ interface ContextProps {
handleDeleteDialog: (show: boolean, selected_wallet: WalletProps | null) => void;
selectedWallet: WalletProps | null;
getWalletLists: (
limit: number,
page: number,
with_deleted: boolean,
order_field: any,
order_direction: any
limit: number,
sorting: any,
filter: any
) => Promise<{ data: WalletProps[]; totalCount: number } | undefined>;
}
@ -81,8 +90,22 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
}
},
{
accessorKey: 'amount' ,
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);
},
enableSorting: false,
enableHiding: false,
meta: {
@ -90,8 +113,10 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
}
},
{
accessorKey: 'trx_count_today' ,
header: ({ column }) => <DataGridColumnHeader title="Transaction Count Today" column={column} />,
accessorKey: 'trx_count_today',
header: ({ column }) => (
<DataGridColumnHeader title="Transaction Count Today" column={column} />
),
enableSorting: false,
enableHiding: false,
meta: {
@ -99,8 +124,13 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
}
},
{
accessorKey: 'amount_this_month' ,
header: ({ column }) => <DataGridColumnHeader title="Ammount This Month" column={column} />,
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);
},
enableSorting: false,
enableHiding: false,
meta: {
@ -109,16 +139,14 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
},
{
accessorKey: 'CreatedAt',
header: ({ column }) => (
<DataGridColumnHeader title="Created At" column={column} />
),
cell: ({ row }) =>
header: ({ column }) => <DataGridColumnHeader title="Created At" column={column} />,
cell: ({ row }) =>
new Date(row.original.CreatedAt).toLocaleString('id-ID', {
day: '2-digit',
month: 'short',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
minute: '2-digit'
}),
enableSorting: false,
enableHiding: false,
@ -182,22 +210,54 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => {
try {
const sortField = 'CreatedAt';
const sortDirection = 'ASC';
filter = filter.length == 0 ? {} : { name: filter[0].value?.toLowerCase() };
const sortField = sorting.length > 0 ? sorting[0].id : 'created_at';
const sortDirection = sorting.length > 0 ? (sorting[0].desc ? 'DESC' : 'ASC') : 'ASC';
// Initialize filter object
let filterParams: any = {};
// Process filter array
if (Array.isArray(filter)) {
filter.forEach((f: any) => {
// Handle MSISDN search
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`,
to: `${f.value.to} 23:59:59`
};
}
// Handle wallet ID filter
if (f.id === 'id_wallet' && f.value) {
filterParams.id_wallet = f.value;
}
});
}
const response = await GetData(`${API_URL_WALLET}/dashboard/balance/`, {
limit,
page: page + 1,
with_deleted: false,
order_field: sortField,
order_direction: sortDirection,
// filter: JSON.stringify(filter)
filter: JSON.stringify(filterParams)
});
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 };
} catch (error) {
console.error('Error fetching Wallet', error);
return { data: [], totalCount: 0 };
}
};
@ -221,7 +281,6 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
pagination={{ size: 10 }}
toolbar={<ListToolbar />}
layout={{ card: true }}
// sorting={[{ id: 'created_at', desc: true }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getWalletLists(pageIndex, pageSize, sorting, columnFilters)