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: '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: 'Reward', value: parseFloat((responseTransactionValue?.data?.E ?? 0).toFixed(2)), color: '#f7fa52' },
];
return (

View File

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

View File

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

View File

@ -281,6 +281,8 @@ const DetailTransaction = () => {
kind = 'TOP UP';
} else if (transactionDetails?.kind === 'R') {
kind = 'RETURN';
}else if (transactionDetails?.kind === 'E') {
kind = 'REWARD';
}
return kind;
})()}
@ -336,7 +338,7 @@ const DetailTransaction = () => {
</div>
</div>
)}
{/* {activeTab === 'detail' && transactionDetails?.kind === 'P' && ( */}
{activeTab === 'detail' && (
<div className="space-y-4">
<h3 className="font-semibold flex items-center">
Product Information
@ -389,7 +391,7 @@ const DetailTransaction = () => {
</div>
</div>
</div>
{/* )} */}
)}
{activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && (
<div className="space-y-4">
@ -461,6 +463,8 @@ const DetailTransaction = () => {
kind = 'TOP UP';
} else if (transactionDetails?.kind === 'R') {
kind = 'RETURN';
}else if (transactionDetails?.kind === 'E') {
kind = 'REWARD';
}
return kind;
})()}
@ -492,11 +496,11 @@ const DetailTransaction = () => {
<div className="grid grid-cols-2 gap-4">
<div>
<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>
<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>
<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="R">RETURN</SelectItem>
<SelectItem value="N">TOP UP PARTNER</SelectItem>
<SelectItem value="E">REWARD</SelectItem>
</SelectContent>
</Select>

View File

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

View File

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

View File

@ -757,6 +757,7 @@ const EditDialog = () => {
<SelectItem value="W">Withdraw</SelectItem>
<SelectItem value="U">Top Up</SelectItem>
<SelectItem value="N">Top Up Patner</SelectItem>
<SelectItem value="E">Reward</SelectItem>
</SelectContent>
</Select>
{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' },
W: { label: 'Withdraw', className: 'bg-fuchsia-100 text-fuchsia-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] || {

View File

@ -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);
}

View File

@ -6,11 +6,8 @@ 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 => {
const formatNumber = (num: number): string => {
return num.toLocaleString('en-US', {
style: 'currency',
currency: currencyCode,
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
@ -79,33 +76,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);
},
cell: ({ row }) => formatNumber(row.original.amount),
enableSorting: false,
enableHiding: false,
meta: {
@ -126,11 +129,7 @@ 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);
},
cell: ({ row }) => formatNumber(row.original.amount_this_month),
enableSorting: false,
enableHiding: false,
meta: {
@ -154,19 +153,18 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
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,
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',
accessorKey: 'currency_name',
header: ({ column }) => <DataGridColumnHeader title="Currency Name" column={column} />,
enableSorting: false,
enableHiding: false,
@ -175,8 +173,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
}
},
{
accessorFn: (row) => row.balance_type.currency.code,
id: 'currency_code',
accessorKey: 'currency_code',
header: ({ column }) => <DataGridColumnHeader title="Currency Code" column={column} />,
enableSorting: false,
enableHiding: false,
@ -185,8 +182,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
}
},
{
accessorFn: (row) => row.group.name,
id: 'group_name',
accessorKey: 'group_name',
header: ({ column }) => <DataGridColumnHeader title="Group Name" column={column} />,
enableSorting: 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',
header: ({ column }) => <DataGridColumnHeader title="Is Bank" column={column} />,
enableSorting: false,
@ -213,18 +209,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 +228,6 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
};
}
// Handle wallet ID filter
if (f.id === 'id_wallet' && f.value) {
filterParams.id_wallet = f.value;
}
@ -253,8 +248,81 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
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 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) {
console.error('Error fetching Wallet', error);
return { data: [], totalCount: 0 };