adding export to excel features in wallet detail dashboard
This commit is contained in:
Raja Oktafrianto
@ -16,9 +16,14 @@ import {
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
SelectValue
|
||||
} from '@/components/ui/select';
|
||||
import { DefaultTooltip, KeenIcon } from '@/components';
|
||||
import { toAbsoluteUrl } from '@/utils';
|
||||
import { toast } from 'sonner';
|
||||
import * as XLSX from 'xlsx';
|
||||
import ExcelJS from 'exceljs';
|
||||
import { exportToExcel } from '@/pages/wallet/wallet-statement/details_wallet_statement/ExportData';
|
||||
|
||||
interface ShowDetailWalletDialogProps {
|
||||
open: boolean;
|
||||
@ -37,14 +42,14 @@ const getDefaultDateRange = () => {
|
||||
const sevenDaysAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
|
||||
return {
|
||||
from: formatDate(sevenDaysAgo),
|
||||
to: formatDate(today),
|
||||
to: formatDate(today)
|
||||
};
|
||||
};
|
||||
|
||||
const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
|
||||
open,
|
||||
onClose,
|
||||
idbalance,
|
||||
idbalance
|
||||
}) => {
|
||||
const { GetData } = useCallApi();
|
||||
|
||||
@ -64,7 +69,7 @@ const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: 'created_at',
|
||||
order_direction: 'ASC',
|
||||
order_direction: 'ASC'
|
||||
});
|
||||
setTransferType(response?.data?.list || []);
|
||||
} catch (error) {
|
||||
@ -96,7 +101,7 @@ const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
|
||||
F: 'FEE',
|
||||
V: 'REVERSAL',
|
||||
C: 'CASHBACK CASH',
|
||||
H: 'CASHBACK POINT',
|
||||
H: 'CASHBACK POINT'
|
||||
};
|
||||
|
||||
const uniqueCategories = Array.from(
|
||||
@ -110,7 +115,6 @@ const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
|
||||
setCategory(uniqueCategories);
|
||||
}, [transaction]);
|
||||
|
||||
|
||||
const handleTransferTypeChange = (value: string) => {
|
||||
setSelectedTransferType(value === 'all' ? null : value);
|
||||
};
|
||||
@ -135,7 +139,7 @@ const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
|
||||
const toDate = new Date(`${dateRange.to}T23:59:59Z`);
|
||||
appliedFilters.date = {
|
||||
from: fromDate.toISOString(),
|
||||
to: toDate.toISOString(),
|
||||
to: toDate.toISOString()
|
||||
};
|
||||
}
|
||||
|
||||
@ -154,76 +158,99 @@ const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
|
||||
setFilters(appliedFilters);
|
||||
};
|
||||
|
||||
|
||||
const columns = [
|
||||
{
|
||||
accessorKey: 'transaction_code',
|
||||
header: ({ column }: any) => <DataGridColumnHeader title="Transaction Code" column={column} />,
|
||||
header: ({ column }: any) => (
|
||||
<DataGridColumnHeader title="Transaction Code" column={column} />
|
||||
),
|
||||
enableSorting: false,
|
||||
meta: { headerClassName: 'min-w-[120px]' },
|
||||
meta: { headerClassName: 'min-w-[120px]' }
|
||||
},
|
||||
{
|
||||
accessorKey: 'msisdn_reff',
|
||||
header: ({ column }: any) => <DataGridColumnHeader title="MSISDN Reffer" column={column} />,
|
||||
enableSorting: false,
|
||||
meta: { headerClassName: 'min-w-[120px]' },
|
||||
meta: { headerClassName: 'min-w-[120px]' }
|
||||
},
|
||||
{
|
||||
accessorKey: 'transaction_type.name',
|
||||
header: ({ column }: any) => <DataGridColumnHeader title="Transaction Type" column={column} />,
|
||||
header: ({ column }: any) => (
|
||||
<DataGridColumnHeader title="Transaction Type" column={column} />
|
||||
),
|
||||
enableSorting: false,
|
||||
meta: { headerClassName: 'min-w-[180px]' },
|
||||
meta: { headerClassName: 'min-w-[180px]' }
|
||||
},
|
||||
{
|
||||
accessorKey: 'type',
|
||||
header: ({ column }: any) => <DataGridColumnHeader title="Type" column={column} />,
|
||||
enableSorting: false,
|
||||
meta: { headerClassName: 'min-w-[80px]' },
|
||||
meta: { headerClassName: 'min-w-[80px]' }
|
||||
},
|
||||
{
|
||||
accessorKey: 'pre_amount',
|
||||
header: ({ column }: any) => <DataGridColumnHeader title="Pre Amount" column={column} />,
|
||||
enableSorting: false,
|
||||
cell: (info: any) => info.getValue()?.toFixed(2),
|
||||
meta: { headerClassName: 'min-w-[100px]' },
|
||||
meta: { headerClassName: 'min-w-[100px]' }
|
||||
},
|
||||
{
|
||||
accessorKey: 'amount',
|
||||
header: ({ column }: any) => <DataGridColumnHeader title="Amount" column={column} />,
|
||||
enableSorting: false,
|
||||
cell: (info: any) => info.getValue()?.toFixed(2),
|
||||
meta: { headerClassName: 'min-w-[100px]' },
|
||||
meta: { headerClassName: 'min-w-[100px]' }
|
||||
},
|
||||
{
|
||||
accessorKey: 'post_amount',
|
||||
header: ({ column }: any) => <DataGridColumnHeader title="Post Amount" column={column} />,
|
||||
enableSorting: false,
|
||||
cell: (info: any) => info.getValue()?.toFixed(2),
|
||||
meta: { headerClassName: 'min-w-[100px]' },
|
||||
meta: { headerClassName: 'min-w-[100px]' }
|
||||
},
|
||||
{
|
||||
accessorFn: (row: any) => {
|
||||
switch (row.category) {
|
||||
case 'T': return 'TRANSFER';
|
||||
case 'P': return 'PURCHASE';
|
||||
case 'W': return 'WITHDRAW';
|
||||
case 'U': return 'TOP UP';
|
||||
case 'R': return 'RETURN';
|
||||
case 'N': return 'TOP UP PARTNER';
|
||||
case 'E': return 'REWARD';
|
||||
case 'L': return 'PURCHASE LOJA';
|
||||
case 'B': return 'TOP UP P24';
|
||||
case 'A': return 'TRANSFER AGENT';
|
||||
case 'M': return 'WITHDRAWAL AGENT';
|
||||
case 'O': return 'TOP UP AGENT';
|
||||
case 'S': return 'TRANSFER P24';
|
||||
case 'I': return 'WIJTDRAW MERCHANT';
|
||||
case 'D': return 'DONATION';
|
||||
case 'F': return 'FEE';
|
||||
case 'V': return 'REVERSAL';
|
||||
case 'C': return 'CASHBACK CASH';
|
||||
case 'H': return 'CASHBACK POINT';
|
||||
default: return '_';
|
||||
case 'T':
|
||||
return 'TRANSFER';
|
||||
case 'P':
|
||||
return 'PURCHASE';
|
||||
case 'W':
|
||||
return 'WITHDRAW';
|
||||
case 'U':
|
||||
return 'TOP UP';
|
||||
case 'R':
|
||||
return 'RETURN';
|
||||
case 'N':
|
||||
return 'TOP UP PARTNER';
|
||||
case 'E':
|
||||
return 'REWARD';
|
||||
case 'L':
|
||||
return 'PURCHASE LOJA';
|
||||
case 'B':
|
||||
return 'TOP UP P24';
|
||||
case 'A':
|
||||
return 'TRANSFER AGENT';
|
||||
case 'M':
|
||||
return 'WITHDRAWAL AGENT';
|
||||
case 'O':
|
||||
return 'TOP UP AGENT';
|
||||
case 'S':
|
||||
return 'TRANSFER P24';
|
||||
case 'I':
|
||||
return 'WIJTDRAW MERCHANT';
|
||||
case 'D':
|
||||
return 'DONATION';
|
||||
case 'F':
|
||||
return 'FEE';
|
||||
case 'V':
|
||||
return 'REVERSAL';
|
||||
case 'C':
|
||||
return 'CASHBACK CASH';
|
||||
case 'H':
|
||||
return 'CASHBACK POINT';
|
||||
default:
|
||||
return '_';
|
||||
}
|
||||
},
|
||||
accessorKey: 'category',
|
||||
@ -246,39 +273,42 @@ const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
},
|
||||
meta: { headerClassName: 'min-w-[150px]' },
|
||||
meta: { headerClassName: 'min-w-[150px]' }
|
||||
},
|
||||
{
|
||||
accessorKey: 'purpose',
|
||||
header: ({ column }: any) => <DataGridColumnHeader title="Purpose" column={column} />,
|
||||
enableSorting: false,
|
||||
cell: (info: any) => info.getValue() || '-',
|
||||
meta: { headerClassName: 'min-w-[200px]' },
|
||||
meta: { headerClassName: 'min-w-[200px]' }
|
||||
},
|
||||
{
|
||||
accessorKey: 'notes',
|
||||
header: ({ column }: any) => <DataGridColumnHeader title="Notes" column={column} />,
|
||||
enableSorting: false,
|
||||
cell: (info: any) => info.getValue() || '-',
|
||||
meta: { headerClassName: 'min-w-[200px]' },
|
||||
},
|
||||
meta: { headerClassName: 'min-w-[200px]' }
|
||||
}
|
||||
];
|
||||
|
||||
const getTransactionLists = useCallback(
|
||||
async (page: number, limit: number, sorting: any, _columnFilters: any) => {
|
||||
// console.log(idbalance);
|
||||
try {
|
||||
const response = await GetData(`${apiConfig.service_wallet}/dashboard/balance/list-balance-detail/${idbalance}`, {
|
||||
const response = await GetData(
|
||||
`${apiConfig.service_wallet}/dashboard/balance/list-balance-detail/${idbalance}`,
|
||||
{
|
||||
limit,
|
||||
page: page + 1,
|
||||
with_deleted: false,
|
||||
order_field: "created_at",
|
||||
order_field: 'created_at',
|
||||
order_direction: 'DESC',
|
||||
filter: JSON.stringify(filters)
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
// console.log(response);
|
||||
|
||||
@ -297,6 +327,46 @@ const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
|
||||
[GetData, idbalance, filters]
|
||||
);
|
||||
|
||||
const getAllTransactionData = async () => {
|
||||
try {
|
||||
const response = await GetData(
|
||||
`${apiConfig.service_wallet}/dashboard/balance/list-balance-detail/${idbalance}`,
|
||||
{
|
||||
limit: 10000,
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: 'created_at',
|
||||
order_direction: 'DESC',
|
||||
filter: JSON.stringify(filters)
|
||||
}
|
||||
);
|
||||
|
||||
return response?.data?.list || [];
|
||||
} catch (error) {
|
||||
console.error('Error fetching all transaction data', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
// Tambahkan fungsi handle export excel
|
||||
const handleExportExcel = async () => {
|
||||
try {
|
||||
const allData = await getAllTransactionData();
|
||||
|
||||
// Buat objek wallet dummy untuk kompatibilitas dengan fungsi exportToExcel
|
||||
const walletData = {
|
||||
ID: idbalance,
|
||||
name: 'Wallet Details',
|
||||
msisdn: '-'
|
||||
};
|
||||
|
||||
await exportToExcel(allData, walletData);
|
||||
} catch (error) {
|
||||
console.error('Error exporting to Excel:', error);
|
||||
toast.error('Failed to export Excel');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onClose}>
|
||||
<DialogContent className="w-screen max-w-screen max-h-screen p-4 overflow-hidden">
|
||||
@ -327,7 +397,10 @@ const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
|
||||
</label>
|
||||
|
||||
<div className="w-full sm:w-[160px]">
|
||||
<Select value={selectedTransferType || 'all'} onValueChange={handleTransferTypeChange}>
|
||||
<Select
|
||||
value={selectedTransferType || 'all'}
|
||||
onValueChange={handleTransferTypeChange}
|
||||
>
|
||||
<SelectTrigger className="h-[32px]">
|
||||
<SelectValue placeholder="Transaction Type" />
|
||||
</SelectTrigger>
|
||||
@ -378,9 +451,19 @@ const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
|
||||
<Button variant="outline" className="h-8" onClick={handleApplyFilters}>
|
||||
<Button variant="default" className="h-8" onClick={handleApplyFilters}>
|
||||
Filter Data
|
||||
</Button>
|
||||
|
||||
<DefaultTooltip title={'Export to Excel'} placement={'top'}>
|
||||
<Button
|
||||
variant={'outline'}
|
||||
className="h-7.5 min-w-[58px]"
|
||||
onClick={handleExportExcel}
|
||||
>
|
||||
<img src={toAbsoluteUrl('/media/file-types/xls.svg')} className="" alt="Excel" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user