Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard
This commit is contained in:
@ -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 (
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
})()}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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 '_';
|
||||
}
|
||||
},
|
||||
|
||||
@ -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 && (
|
||||
|
||||
@ -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 && (
|
||||
|
||||
@ -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] || {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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 };
|
||||
@ -293,4 +361,4 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
|
||||
};
|
||||
|
||||
export { ManageWalletContext, ManageWalletContextProvider };
|
||||
export type { WalletProps };
|
||||
export type { WalletProps };
|
||||
|
||||
Reference in New Issue
Block a user