This commit is contained in:
unknown
2025-05-13 14:10:18 +07:00
11 changed files with 140 additions and 54 deletions

View File

@ -43,6 +43,7 @@ const TransactionPieChart = ({ startdate, enddate }: Props) => {
{ name: 'Purchase', value: parseFloat((responseTransactionValue?.data?.P ?? 0).toFixed(2)), color: '#baf7c5' }, { name: 'Purchase', value: parseFloat((responseTransactionValue?.data?.P ?? 0).toFixed(2)), color: '#baf7c5' },
{ name: 'Withdraw', value: parseFloat((responseTransactionValue?.data?.W ?? 0).toFixed(2)), color: '#f56565' }, { name: 'Withdraw', value: parseFloat((responseTransactionValue?.data?.W ?? 0).toFixed(2)), color: '#f56565' },
{ name: 'Top Up Partner', value: parseFloat((responseTransactionValue?.data?.N ?? 0).toFixed(2)), color: '#f7fa52' }, { name: 'Top Up Partner', value: parseFloat((responseTransactionValue?.data?.N ?? 0).toFixed(2)), color: '#f7fa52' },
{ name: 'Reward', value: parseFloat((responseTransactionValue?.data?.E ?? 0).toFixed(2)), color: '#f7fa52' },
]; ];
return ( return (

View File

@ -64,6 +64,9 @@ const TransactionValue = ({ startdate, enddate }: Props) => {
case "N": case "N":
type = "Top Up Partner"; type = "Top Up Partner";
break; break;
case "E":
type = "Reward";
break;
default: default:
type = "Unknown"; type = "Unknown";
break; break;

View File

@ -261,6 +261,8 @@ const DetailApprovalTransaction = () => {
kind = 'TOP UP'; kind = 'TOP UP';
} else if (transactionDetails?.kind === 'R') { } else if (transactionDetails?.kind === 'R') {
kind = 'RETURN'; kind = 'RETURN';
}else if (transactionDetails?.kind === 'E') {
kind = 'REWARD';
} }
return kind; return kind;
})()} })()}
@ -445,6 +447,8 @@ const DetailApprovalTransaction = () => {
kind = 'TOP UP'; kind = 'TOP UP';
} else if (transactionDetails?.kind === 'R') { } else if (transactionDetails?.kind === 'R') {
kind = 'RETURN'; kind = 'RETURN';
}else if (transactionDetails?.kind === 'E') {
kind = 'REWARD';
} }
return kind; return kind;
})()} })()}

View File

@ -281,6 +281,8 @@ const DetailTransaction = () => {
kind = 'TOP UP'; kind = 'TOP UP';
} else if (transactionDetails?.kind === 'R') { } else if (transactionDetails?.kind === 'R') {
kind = 'RETURN'; kind = 'RETURN';
}else if (transactionDetails?.kind === 'E') {
kind = 'REWARD';
} }
return kind; return kind;
})()} })()}
@ -336,7 +338,7 @@ const DetailTransaction = () => {
</div> </div>
</div> </div>
)} )}
{/* {activeTab === 'detail' && transactionDetails?.kind === 'P' && ( */} {activeTab === 'detail' && (
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-semibold flex items-center"> <h3 className="font-semibold flex items-center">
Product Information Product Information
@ -389,7 +391,7 @@ const DetailTransaction = () => {
</div> </div>
</div> </div>
</div> </div>
{/* )} */} )}
{activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && ( {activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && (
<div className="space-y-4"> <div className="space-y-4">
@ -461,6 +463,8 @@ const DetailTransaction = () => {
kind = 'TOP UP'; kind = 'TOP UP';
} else if (transactionDetails?.kind === 'R') { } else if (transactionDetails?.kind === 'R') {
kind = 'RETURN'; kind = 'RETURN';
}else if (transactionDetails?.kind === 'E') {
kind = 'REWARD';
} }
return kind; return kind;
})()} })()}
@ -492,11 +496,11 @@ const DetailTransaction = () => {
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<p className="text-sm text-gray-500">Full Name</p> <p className="text-sm text-gray-500">Full Name</p>
<p className="font-medium">{transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name}</p> <p className="font-medium">{transactionDetails?.origin_customer?.origin_name}</p>
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Phone Number</p> <p className="text-sm text-gray-500">Phone Number</p>
<p className="font-medium">{transactionDetails?.origin_customer?.msisdn ?? transactionDetails?.origin_msisdn}</p> <p className="font-medium">{transactionDetails?.origin_msisdn}</p>
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Email</p> <p className="text-sm text-gray-500">Email</p>

View File

@ -177,6 +177,7 @@ const ListToolbar = () => {
<SelectItem value="U">TOP UP</SelectItem> <SelectItem value="U">TOP UP</SelectItem>
<SelectItem value="R">RETURN</SelectItem> <SelectItem value="R">RETURN</SelectItem>
<SelectItem value="N">TOP UP PARTNER</SelectItem> <SelectItem value="N">TOP UP PARTNER</SelectItem>
<SelectItem value="E">REWARD</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>

View File

@ -77,6 +77,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
case 'U': return 'TOP UP'; case 'U': return 'TOP UP';
case 'R': return 'RETURN'; case 'R': return 'RETURN';
case 'N': return 'TOP UP PARTNER'; case 'N': return 'TOP UP PARTNER';
case 'E': return 'REWARD';
default: return '_'; default: return '_';
} }
}, },

View File

@ -559,6 +559,7 @@ const AddDialog = () => {
<SelectItem value="W">Withdraw</SelectItem> <SelectItem value="W">Withdraw</SelectItem>
<SelectItem value="U">Top Up</SelectItem> <SelectItem value="U">Top Up</SelectItem>
<SelectItem value="N">Top Up Patner</SelectItem> <SelectItem value="N">Top Up Patner</SelectItem>
<SelectItem value="E">Reward</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
{errors.status_kind && ( {errors.status_kind && (

View File

@ -757,6 +757,7 @@ const EditDialog = () => {
<SelectItem value="W">Withdraw</SelectItem> <SelectItem value="W">Withdraw</SelectItem>
<SelectItem value="U">Top Up</SelectItem> <SelectItem value="U">Top Up</SelectItem>
<SelectItem value="N">Top Up Patner</SelectItem> <SelectItem value="N">Top Up Patner</SelectItem>
<SelectItem value="E">Reward</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
{errors.status_kind && ( {errors.status_kind && (

View File

@ -276,7 +276,8 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
P: { label: 'Purchase', className: 'bg-green-100 text-green-600' }, P: { label: 'Purchase', className: 'bg-green-100 text-green-600' },
W: { label: 'Withdraw', className: 'bg-fuchsia-100 text-fuchsia-600' }, W: { label: 'Withdraw', className: 'bg-fuchsia-100 text-fuchsia-600' },
U: { label: 'Top Up', className: 'bg-yellow-100 text-yellow-600' }, U: { label: 'Top Up', className: 'bg-yellow-100 text-yellow-600' },
N: { label: 'Top Up Patner', className: 'bg-purple-100 text-purple-600' } N: { label: 'Top Up Patner', className: 'bg-purple-100 text-purple-600' },
E: {label: 'Reward', className: 'bg-rose-100 text-rose-600'}
}; };
const kindInfo = mapping[kind] || { const kindInfo = mapping[kind] || {

View File

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

View File

@ -6,11 +6,8 @@ import { ColumnDef } from '@tanstack/react-table';
import React, { createContext, useCallback, useMemo, useState } from 'react'; import React, { createContext, useCallback, useMemo, useState } from 'react';
import ListToolbar from '../blocks/ListToolbar'; import ListToolbar from '../blocks/ListToolbar';
// Helper function for number formatting with currency format const formatNumber = (num: number): string => {
const formatNumber = (num: number, currencyCode: string = 'USD'): string => {
return num.toLocaleString('en-US', { return num.toLocaleString('en-US', {
style: 'currency',
currency: currencyCode,
minimumFractionDigits: 2, minimumFractionDigits: 2,
maximumFractionDigits: 2 maximumFractionDigits: 2
}); });
@ -79,33 +76,39 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
const columns = useMemo<ColumnDef<any>[]>( 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', accessorKey: 'msisdn',
header: ({ column }) => <DataGridColumnHeader title="MSISDN" column={column} />, header: ({ column }) => <DataGridColumnHeader title="MSISDN" column={column} />,
enableSorting: true, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {
headerClassName: 'w-[550px]', headerClassName: 'w-[550px]',
cellClassName: 'p-[20px]' 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', accessorKey: 'amount',
header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
cell: ({ row }) => { cell: ({ row }) => formatNumber(row.original.amount),
// 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, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {
@ -126,11 +129,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
{ {
accessorKey: 'amount_this_month', accessorKey: 'amount_this_month',
header: ({ column }) => <DataGridColumnHeader title="Amount This Month" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Amount This Month" column={column} />,
cell: ({ row }) => { cell: ({ row }) => formatNumber(row.original.amount_this_month),
// 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, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {
@ -154,19 +153,18 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
headerClassName: 'w-[200px]' headerClassName: 'w-[200px]'
} }
}, },
// {
// accessorFn: (row) => row.balance_type?.name,
// id: 'balance_type_name',
// header: ({ column }) => <DataGridColumnHeader title="Balance Type Name" column={column} />,
// enableSorting: false,
// enableHiding: false,
// meta: {
// headerClassName: 'w-[200px]'
// }
// },
{ {
accessorFn: (row) => row.balance_type.name, accessorKey: 'currency_name',
id: 'balance_type_name',
header: ({ column }) => <DataGridColumnHeader title="Balance Type Name" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[200px]'
}
},
{
accessorFn: (row) => row.balance_type.currency.name,
id: 'currency_name',
header: ({ column }) => <DataGridColumnHeader title="Currency Name" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Currency Name" column={column} />,
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
@ -175,8 +173,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
} }
}, },
{ {
accessorFn: (row) => row.balance_type.currency.code, accessorKey: 'currency_code',
id: 'currency_code',
header: ({ column }) => <DataGridColumnHeader title="Currency Code" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Currency Code" column={column} />,
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
@ -185,8 +182,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
} }
}, },
{ {
accessorFn: (row) => row.group.name, accessorKey: 'group_name',
id: 'group_name',
header: ({ column }) => <DataGridColumnHeader title="Group Name" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Group Name" column={column} />,
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
@ -195,7 +191,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
} }
}, },
{ {
accessorFn: (row) => row.group.is_bank, accessorFn: (row) => row.group?.is_bank,
id: 'is_bank', id: 'is_bank',
header: ({ column }) => <DataGridColumnHeader title="Is Bank" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Is Bank" column={column} />,
enableSorting: false, enableSorting: false,
@ -213,18 +209,18 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
const sortField = sorting.length > 0 ? sorting[0].id : 'created_at'; const sortField = sorting.length > 0 ? sorting[0].id : 'created_at';
const sortDirection = sorting.length > 0 ? (sorting[0].desc ? 'ASC' : 'DESC') : 'DESC'; const sortDirection = sorting.length > 0 ? (sorting[0].desc ? 'ASC' : 'DESC') : 'DESC';
// Initialize filter object
let filterParams: any = {}; let filterParams: any = {};
// Process filter array
if (Array.isArray(filter)) { if (Array.isArray(filter)) {
filter.forEach((f: any) => { 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) { if (f.id === 'msisdn' && f.value) {
filterParams.msisdn = { like: `%${f.value.toLowerCase()}%` }; filterParams.msisdn = { like: `%${f.value.toLowerCase()}%` };
} }
// Handle date range filter
if (f.id === 'CreatedAt' && f.value?.from && f.value?.to) { if (f.id === 'CreatedAt' && f.value?.from && f.value?.to) {
filterParams.created_at = { filterParams.created_at = {
from: `${f.value.from} 00:00:00`, from: `${f.value.from} 00:00:00`,
@ -232,7 +228,6 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
}; };
} }
// Handle wallet ID filter
if (f.id === 'id_wallet' && f.value) { if (f.id === 'id_wallet' && f.value) {
filterParams.id_wallet = f.value; filterParams.id_wallet = f.value;
} }
@ -253,8 +248,81 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
return { data: [], totalCount: 0 }; return { data: [], totalCount: 0 };
} }
setWallets(response?.data.list); const walletsResponse = await GetData(`${API_URL_WALLET}/dashboard/wallet/`, {
return { data: response?.data.list, totalCount: response?.data.total_count }; limit: 100,
page: 1,
with_deleted: false,
order_field: 'created_at',
order_direction: 'ASC'
});
const groupsResponse = await GetData(`${API_URL_WALLET}/dashboard/group/`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: 'created_at',
order_direction: 'ASC'
});
const currenciesResponse = await GetData(`${API_URL_WALLET}/dashboard/currency/`, {
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] = {
name: wallet.name,
id_currency: wallet.id_currency
};
return acc;
}, {})
: {};
const groupsMap = groupsResponse?.data?.list
? groupsResponse.data.list.reduce((acc: any, group: any) => {
acc[group.ID] = group.name;
return acc;
}, {})
: {};
const currenciesMap = currenciesResponse?.data?.list
? currenciesResponse.data.list.reduce((acc: any, currency: any) => {
acc[currency.ID] = {
name: currency.name,
code: currency.code
};
return acc;
}, {})
: {};
const enrichedData = response?.data.list.map((item: any) => {
const walletInfo = walletsMap[item.id_wallet] || {
name: 'Unknown Wallet',
id_currency: null
};
const currencyInfo = currenciesMap[walletInfo.id_currency] || {
name: 'Unknown Currency',
code: 'USD'
};
return {
...item,
name: walletInfo.name,
group_name: groupsMap[item.id_group] || 'Unknown Group',
currency_name: currencyInfo.name,
currency_code: currencyInfo.code
};
});
setWallets(enrichedData);
return {
data: enrichedData,
totalCount: response?.data.total_count
};
} catch (error) { } catch (error) {
console.error('Error fetching Wallet', error); console.error('Error fetching Wallet', error);
return { data: [], totalCount: 0 }; return { data: [], totalCount: 0 };