update details wallet statement
This commit is contained in:
Raja Oktafrianto
@ -1,762 +0,0 @@
|
|||||||
import React, { createContext, useCallback, useEffect, useState } from 'react';
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogBody,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle
|
|
||||||
} from '@/components/ui/dialog';
|
|
||||||
import { useCallApi } from '@/hooks';
|
|
||||||
import { apiConfig } from '@/config/api.config';
|
|
||||||
import { DataGridColumnHeader, DataGridProvider } from '@/components';
|
|
||||||
import { useManageStatementContext } from '../hooks/useManageWalletStatementContext';
|
|
||||||
import { toast, Toaster } from 'sonner';
|
|
||||||
import { format } from 'date-fns';
|
|
||||||
import FilterSection from './FilterSection';
|
|
||||||
import * as XLSX from 'xlsx';
|
|
||||||
import jsPDF from 'jspdf';
|
|
||||||
import autoTable from 'jspdf-autotable';
|
|
||||||
import ExcelJS from 'exceljs';
|
|
||||||
import { toAbsoluteUrl } from '@/utils';
|
|
||||||
|
|
||||||
interface ContextProps {
|
|
||||||
doExportData: (sorting: any, filter: any) => Promise<any>;
|
|
||||||
doExportExcel: () => Promise<void>;
|
|
||||||
doExportPDF: () => Promise<void>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const initialProps: ContextProps = {
|
|
||||||
doExportData: async () => ({ data: [], totalCount: 0 }),
|
|
||||||
doExportExcel: async () => {},
|
|
||||||
doExportPDF: async () => {}
|
|
||||||
};
|
|
||||||
|
|
||||||
export const showDetailWalletContext = createContext<ContextProps>(initialProps);
|
|
||||||
|
|
||||||
const ShowDetailWalletDialog = () => {
|
|
||||||
const { GetData, GetExportData } = useCallApi();
|
|
||||||
const { showDetailDialog, setShowDetailDialog, selectedWallet } = useManageStatementContext();
|
|
||||||
const [filters, setFilters] = useState<any>({});
|
|
||||||
const [transaction, setTransaction] = useState<any[]>([]);
|
|
||||||
|
|
||||||
const categoryMap: Record<string, string> = {
|
|
||||||
T: 'TRANSFER',
|
|
||||||
P: 'PURCHASE',
|
|
||||||
W: 'WITHDRAW',
|
|
||||||
U: 'TOP UP',
|
|
||||||
R: 'RETURN',
|
|
||||||
N: 'TOP UP PARTNER',
|
|
||||||
E: 'REWARD',
|
|
||||||
L: 'PURCHASE LOJA',
|
|
||||||
B: 'TOP UP P24',
|
|
||||||
A: 'TRANSFER AGENT',
|
|
||||||
M: 'WITHDRAWAL AGENT',
|
|
||||||
O: 'TOP UP AGENT',
|
|
||||||
S: 'TRANSFER P24',
|
|
||||||
I: 'WIJTDRAW MERCHANT',
|
|
||||||
D: 'DONATION',
|
|
||||||
F: 'FEE',
|
|
||||||
V: 'REVERSAL',
|
|
||||||
C: 'CASHBACK CASH',
|
|
||||||
H: 'CASHBACK POINT'
|
|
||||||
};
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
accessorKey: 'transaction_code',
|
|
||||||
header: ({ column }: any) => (
|
|
||||||
<DataGridColumnHeader title="Transaction Code" column={column} />
|
|
||||||
),
|
|
||||||
enableSorting: false,
|
|
||||||
meta: { headerClassName: 'min-w-[120px]' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'msisdn_reff',
|
|
||||||
header: ({ column }: any) => <DataGridColumnHeader title="MSISDN Reffer" column={column} />,
|
|
||||||
enableSorting: false,
|
|
||||||
meta: { headerClassName: 'min-w-[120px]' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'transaction_type.name',
|
|
||||||
header: ({ column }: any) => (
|
|
||||||
<DataGridColumnHeader title="Transaction Type" column={column} />
|
|
||||||
),
|
|
||||||
enableSorting: false,
|
|
||||||
meta: { headerClassName: 'min-w-[180px]' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'type',
|
|
||||||
header: ({ column }: any) => <DataGridColumnHeader title="Type" column={column} />,
|
|
||||||
enableSorting: false,
|
|
||||||
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]' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'amount',
|
|
||||||
header: ({ column }: any) => <DataGridColumnHeader title="Amount" column={column} />,
|
|
||||||
enableSorting: false,
|
|
||||||
cell: (info: any) => info.getValue()?.toFixed(2),
|
|
||||||
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]' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorFn: (row: any) => categoryMap[row.category] || '_',
|
|
||||||
accessorKey: 'category',
|
|
||||||
header: ({ column }: any) => <DataGridColumnHeader title="Category" column={column} />,
|
|
||||||
enableSorting: false,
|
|
||||||
enableHiding: false,
|
|
||||||
meta: { headerClassName: 'w-[250px]' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'date',
|
|
||||||
header: ({ column }: any) => <DataGridColumnHeader title="Date" column={column} />,
|
|
||||||
enableSorting: false,
|
|
||||||
cell: (info: any) => {
|
|
||||||
const val = info.getValue();
|
|
||||||
if (!val) return '-';
|
|
||||||
return new Date(val).toLocaleString('id-ID', {
|
|
||||||
day: '2-digit',
|
|
||||||
month: 'short',
|
|
||||||
year: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit'
|
|
||||||
});
|
|
||||||
},
|
|
||||||
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]' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'notes',
|
|
||||||
header: ({ column }: any) => <DataGridColumnHeader title="Notes" column={column} />,
|
|
||||||
enableSorting: false,
|
|
||||||
cell: (info: any) => info.getValue() || '-',
|
|
||||||
meta: { headerClassName: 'min-w-[200px]' }
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const getTransactionLists = useCallback(
|
|
||||||
async (page: number, limit: number, sorting: any, _columnFilters: any) => {
|
|
||||||
try {
|
|
||||||
const response = await GetData(
|
|
||||||
`${apiConfig.service_wallet}/dashboard/balance/list-balance-detail/${selectedWallet?.ID}`,
|
|
||||||
{
|
|
||||||
limit,
|
|
||||||
page: page + 1,
|
|
||||||
with_deleted: false,
|
|
||||||
order_field: sorting?.[0]?.id ?? 'created_at',
|
|
||||||
order_direction: sorting?.[0]?.desc ? 'ASC' : 'DESC',
|
|
||||||
filter: JSON.stringify(filters)
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!response || !response.data) {
|
|
||||||
console.warn('No data received:', response);
|
|
||||||
return { data: [], totalCount: 0 };
|
|
||||||
}
|
|
||||||
|
|
||||||
setTransaction(response.data.list);
|
|
||||||
return { data: response.data.list, totalCount: response.data.total_count };
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching transaction', error);
|
|
||||||
return { data: [], totalCount: 0 };
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[GetData, filters, selectedWallet]
|
|
||||||
);
|
|
||||||
|
|
||||||
const getAllTransactionData = async () => {
|
|
||||||
try {
|
|
||||||
const response = await GetData(
|
|
||||||
`${apiConfig.service_wallet}/dashboard/balance/list-balance-detail/${selectedWallet?.ID}`,
|
|
||||||
{
|
|
||||||
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 [];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatTransactionData = (data: any[]) => {
|
|
||||||
return data.map((item) => ({
|
|
||||||
'Transaction Code': item.transaction_code || '-',
|
|
||||||
'MSISDN Reffer': item.msisdn_reff || '-',
|
|
||||||
'Transaction Type': item.transaction_type?.name || '-',
|
|
||||||
Type: item.type || '-',
|
|
||||||
'Pre Amount': item.pre_amount?.toFixed(2) || '0.00',
|
|
||||||
Amount: item.amount?.toFixed(2) || '0.00',
|
|
||||||
'Post Amount': item.post_amount?.toFixed(2) || '0.00',
|
|
||||||
Category: categoryMap[item.category] || '-',
|
|
||||||
Date: item.date
|
|
||||||
? new Date(item.date).toLocaleString('id-ID', {
|
|
||||||
day: '2-digit',
|
|
||||||
month: 'short',
|
|
||||||
year: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit'
|
|
||||||
})
|
|
||||||
: '-',
|
|
||||||
Purpose: item.purpose || '-',
|
|
||||||
Notes: item.notes || '-'
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
const doExportExcel = async () => {
|
|
||||||
try {
|
|
||||||
const allData = await getAllTransactionData();
|
|
||||||
const formattedData = formatTransactionData(allData);
|
|
||||||
|
|
||||||
const wb = XLSX.utils.book_new();
|
|
||||||
const ws = XLSX.utils.json_to_sheet([]);
|
|
||||||
|
|
||||||
// Membuat space untuk header image (sekitar 10 baris)
|
|
||||||
const imageSpaceRows = 10;
|
|
||||||
|
|
||||||
const companyHeader = [
|
|
||||||
// Baris kosong untuk space gambar header
|
|
||||||
...Array(imageSpaceRows).fill(['']),
|
|
||||||
[''],
|
|
||||||
['Wallet Statement Details'],
|
|
||||||
[`Export Date: ${format(new Date(), 'dd MMM yyyy HH:mm:ss')}`],
|
|
||||||
[`Wallet Name: ${selectedWallet?.name || '-'}`],
|
|
||||||
['']
|
|
||||||
];
|
|
||||||
|
|
||||||
const columnHeaders = [
|
|
||||||
[
|
|
||||||
'Transaction Code',
|
|
||||||
'MSISDN Reffer',
|
|
||||||
'Transaction Type',
|
|
||||||
'Type',
|
|
||||||
'Pre Amount',
|
|
||||||
'Amount',
|
|
||||||
'Post Amount',
|
|
||||||
'Category',
|
|
||||||
'Date',
|
|
||||||
'Purpose',
|
|
||||||
'Notes'
|
|
||||||
]
|
|
||||||
];
|
|
||||||
|
|
||||||
const excelData = [
|
|
||||||
...companyHeader,
|
|
||||||
...columnHeaders,
|
|
||||||
...formattedData.map((item) => Object.values(item))
|
|
||||||
];
|
|
||||||
|
|
||||||
XLSX.utils.sheet_add_aoa(ws, excelData);
|
|
||||||
|
|
||||||
// Set column widths
|
|
||||||
const colWidths = [
|
|
||||||
{ wch: 20 },
|
|
||||||
{ wch: 15 },
|
|
||||||
{ wch: 35 },
|
|
||||||
{ wch: 10 },
|
|
||||||
{ wch: 12 },
|
|
||||||
{ wch: 12 },
|
|
||||||
{ wch: 12 },
|
|
||||||
{ wch: 15 },
|
|
||||||
{ wch: 20 },
|
|
||||||
{ wch: 25 },
|
|
||||||
{ wch: 25 }
|
|
||||||
];
|
|
||||||
ws['!cols'] = colWidths;
|
|
||||||
|
|
||||||
// Style untuk title "Wallet Statement Details"
|
|
||||||
const titleRowIndex = imageSpaceRows + 1;
|
|
||||||
const titleCell = XLSX.utils.encode_cell({ r: titleRowIndex, c: 0 });
|
|
||||||
if (ws[titleCell]) {
|
|
||||||
ws[titleCell].s = {
|
|
||||||
font: { bold: true, sz: 16 },
|
|
||||||
alignment: { horizontal: 'center' }
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Style untuk export date dan wallet ID
|
|
||||||
for (let i = titleRowIndex + 1; i < titleRowIndex + 3; i++) {
|
|
||||||
const cellRef = XLSX.utils.encode_cell({ r: i, c: 0 });
|
|
||||||
if (ws[cellRef]) {
|
|
||||||
ws[cellRef].s = {
|
|
||||||
font: { sz: 11 },
|
|
||||||
alignment: { horizontal: 'left' }
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Merge cells untuk header area
|
|
||||||
if (!ws['!merges']) ws['!merges'] = [];
|
|
||||||
|
|
||||||
// Merge untuk space gambar header
|
|
||||||
for (let i = 0; i < imageSpaceRows; i++) {
|
|
||||||
const range = XLSX.utils.encode_range({ s: { r: i, c: 0 }, e: { r: i, c: 10 } });
|
|
||||||
ws['!merges'].push(XLSX.utils.decode_range(range));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Merge untuk title dan info
|
|
||||||
for (let i = titleRowIndex; i < titleRowIndex + 4; i++) {
|
|
||||||
const range = XLSX.utils.encode_range({ s: { r: i, c: 0 }, e: { r: i, c: 10 } });
|
|
||||||
ws['!merges'].push(XLSX.utils.decode_range(range));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Style untuk column headers
|
|
||||||
const headerRowIndex = titleRowIndex + 4;
|
|
||||||
for (let col = 0; col < columnHeaders[0].length; col++) {
|
|
||||||
const cellRef = XLSX.utils.encode_cell({ r: headerRowIndex, c: col });
|
|
||||||
if (ws[cellRef]) {
|
|
||||||
ws[cellRef].s = {
|
|
||||||
font: { bold: true, color: { rgb: 'FFFFFF' } },
|
|
||||||
fill: { fgColor: { rgb: '4472C4' } },
|
|
||||||
alignment: { horizontal: 'center' },
|
|
||||||
border: {
|
|
||||||
top: { style: 'thin', color: { rgb: '000000' } },
|
|
||||||
bottom: { style: 'thin', color: { rgb: '000000' } },
|
|
||||||
left: { style: 'thin', color: { rgb: '000000' } },
|
|
||||||
right: { style: 'thin', color: { rgb: '000000' } }
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Style untuk data rows
|
|
||||||
const dataStartRow = headerRowIndex + 1;
|
|
||||||
for (let row = dataStartRow; row < dataStartRow + formattedData.length; row++) {
|
|
||||||
for (let col = 0; col < columnHeaders[0].length; col++) {
|
|
||||||
const cellRef = XLSX.utils.encode_cell({ r: row, c: col });
|
|
||||||
if (ws[cellRef]) {
|
|
||||||
ws[cellRef].s = {
|
|
||||||
alignment: { horizontal: 'left' }, // Semua kolom rata kiri
|
|
||||||
border: {
|
|
||||||
top: { style: 'thin', color: { rgb: 'D9D9D9' } },
|
|
||||||
bottom: { style: 'thin', color: { rgb: 'D9D9D9' } },
|
|
||||||
left: { style: 'thin', color: { rgb: 'D9D9D9' } },
|
|
||||||
right: { style: 'thin', color: { rgb: 'D9D9D9' } }
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Import ExcelJS untuk menambahkan gambar
|
|
||||||
const ExcelJS = await import('exceljs');
|
|
||||||
|
|
||||||
// Buat workbook baru dengan ExcelJS
|
|
||||||
const workbook = new ExcelJS.Workbook();
|
|
||||||
const worksheet = workbook.addWorksheet('Wallet Statement');
|
|
||||||
|
|
||||||
// Tambahkan data dari XLSX worksheet ke ExcelJS worksheet
|
|
||||||
const range = XLSX.utils.decode_range(ws['!ref'] || 'A1:K1');
|
|
||||||
|
|
||||||
for (let row = range.s.r; row <= range.e.r; row++) {
|
|
||||||
for (let col = range.s.c; col <= range.e.c; col++) {
|
|
||||||
const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
|
|
||||||
const cell = ws[cellAddress];
|
|
||||||
if (cell && cell.v !== undefined) {
|
|
||||||
const excelCell = worksheet.getCell(row + 1, col + 1);
|
|
||||||
excelCell.value = cell.v;
|
|
||||||
|
|
||||||
// Apply styles
|
|
||||||
if (cell.s) {
|
|
||||||
if (cell.s.font) {
|
|
||||||
excelCell.font = {
|
|
||||||
bold: cell.s.font.bold || false,
|
|
||||||
size: cell.s.font.sz || 11,
|
|
||||||
color: cell.s.font.color ? { argb: cell.s.font.color.rgb } : undefined
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (cell.s.fill) {
|
|
||||||
excelCell.fill = {
|
|
||||||
type: 'pattern',
|
|
||||||
pattern: 'solid',
|
|
||||||
fgColor: { argb: cell.s.fill.fgColor.rgb }
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (cell.s.alignment) {
|
|
||||||
excelCell.alignment = {
|
|
||||||
horizontal: cell.s.alignment.horizontal || 'left'
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (cell.s.border) {
|
|
||||||
excelCell.border = {
|
|
||||||
top: cell.s.border.top ? { style: 'thin' } : undefined,
|
|
||||||
bottom: cell.s.border.bottom ? { style: 'thin' } : undefined,
|
|
||||||
left: cell.s.border.left ? { style: 'thin' } : undefined,
|
|
||||||
right: cell.s.border.right ? { style: 'thin' } : undefined
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set column widths
|
|
||||||
colWidths.forEach((width, index) => {
|
|
||||||
worksheet.getColumn(index + 1).width = width.wch;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Merge cells
|
|
||||||
if (ws['!merges']) {
|
|
||||||
ws['!merges'].forEach((merge) => {
|
|
||||||
worksheet.mergeCells(merge.s.r + 1, merge.s.c + 1, merge.e.r + 1, merge.e.c + 1);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tambahkan gambar header
|
|
||||||
try {
|
|
||||||
const response = await fetch(
|
|
||||||
toAbsoluteUrl('/media/avatars/KopDetailWalletStatement.png')
|
|
||||||
);
|
|
||||||
if (response.ok) {
|
|
||||||
const imageBuffer = await response.arrayBuffer();
|
|
||||||
|
|
||||||
const imageId = workbook.addImage({
|
|
||||||
buffer: imageBuffer,
|
|
||||||
extension: 'png'
|
|
||||||
});
|
|
||||||
|
|
||||||
// Posisikan gambar di area header
|
|
||||||
worksheet.addImage(imageId, {
|
|
||||||
tl: { col: 1.7, row: 1 },
|
|
||||||
ext: { width: 1100, height: 180 }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (imageError) {
|
|
||||||
console.warn('Could not load header image, continuing without it:', imageError);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Export file
|
|
||||||
const fileName = `wallet_statement_${selectedWallet?.ID}_${format(new Date(), 'yyyyMMdd_HHmmss')}.xlsx`;
|
|
||||||
const buffer = await workbook.xlsx.writeBuffer();
|
|
||||||
|
|
||||||
// Download file
|
|
||||||
const blob = new Blob([buffer], {
|
|
||||||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
|
||||||
});
|
|
||||||
const url = window.URL.createObjectURL(blob);
|
|
||||||
const link = document.createElement('a');
|
|
||||||
link.href = url;
|
|
||||||
link.download = fileName;
|
|
||||||
link.click();
|
|
||||||
window.URL.revokeObjectURL(url);
|
|
||||||
} catch (excelJSError) {
|
|
||||||
console.warn('ExcelJS not available, falling back to XLSX without image:', excelJSError);
|
|
||||||
|
|
||||||
XLSX.utils.book_append_sheet(wb, ws, 'Wallet Statement');
|
|
||||||
const fileName = `wallet_statement_${selectedWallet?.ID}_${format(new Date(), 'yyyyMMdd_HHmmss')}.xlsx`;
|
|
||||||
XLSX.writeFile(wb, fileName);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error exporting to Excel:', error);
|
|
||||||
toast.error('Failed to export Excel');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const doExportPDF = async () => {
|
|
||||||
try {
|
|
||||||
const allData = await getAllTransactionData();
|
|
||||||
const formattedData = formatTransactionData(allData);
|
|
||||||
|
|
||||||
const pdf = new jsPDF({
|
|
||||||
orientation: 'landscape',
|
|
||||||
unit: 'mm',
|
|
||||||
format: 'a4'
|
|
||||||
});
|
|
||||||
|
|
||||||
// Pindahkan deklarasi variabel ke luar block try-catch
|
|
||||||
const pageWidth = pdf.internal.pageSize.getWidth();
|
|
||||||
const pageHeight = pdf.internal.pageSize.getHeight();
|
|
||||||
|
|
||||||
const headerImageUrl = toAbsoluteUrl('/media/avatars/KopDetailWalletStatement.png');
|
|
||||||
|
|
||||||
// Definisikan table configuration yang akan digunakan berkali-kali
|
|
||||||
const tableHeaders = [
|
|
||||||
'Transaction Code',
|
|
||||||
'MSISDN Reffer',
|
|
||||||
'Transaction Type',
|
|
||||||
'Type',
|
|
||||||
'Pre Amount',
|
|
||||||
'Amount',
|
|
||||||
'Post Amount',
|
|
||||||
'Category',
|
|
||||||
'Date',
|
|
||||||
'Purpose',
|
|
||||||
'Notes'
|
|
||||||
];
|
|
||||||
|
|
||||||
const tableData = formattedData.map((item) => [
|
|
||||||
item['Transaction Code'],
|
|
||||||
item['MSISDN Reffer'],
|
|
||||||
item['Transaction Type'],
|
|
||||||
item['Type'],
|
|
||||||
item['Pre Amount'],
|
|
||||||
item['Amount'],
|
|
||||||
item['Post Amount'],
|
|
||||||
item['Category'],
|
|
||||||
item['Date'],
|
|
||||||
item['Purpose'],
|
|
||||||
item['Notes']
|
|
||||||
]);
|
|
||||||
|
|
||||||
const columnStyles = {
|
|
||||||
0: { cellWidth: 25, halign: 'left' as const },
|
|
||||||
1: { cellWidth: 20, halign: 'left' as const },
|
|
||||||
2: { cellWidth: 25, halign: 'left' as const },
|
|
||||||
3: { cellWidth: 15, halign: 'left' as const },
|
|
||||||
4: { cellWidth: 18, halign: 'left' as const },
|
|
||||||
5: { cellWidth: 18, halign: 'left' as const },
|
|
||||||
6: { cellWidth: 18, halign: 'left' as const },
|
|
||||||
7: { cellWidth: 20, halign: 'left' as const },
|
|
||||||
8: { cellWidth: 30, halign: 'left' as const },
|
|
||||||
9: { cellWidth: 25, halign: 'left' as const },
|
|
||||||
10: { cellWidth: 25, halign: 'left' as const }
|
|
||||||
};
|
|
||||||
|
|
||||||
const calculateLeftMargin = (
|
|
||||||
columnStyles: Record<number, { cellWidth: number }>,
|
|
||||||
pageWidth: number
|
|
||||||
): number => {
|
|
||||||
const totalTableWidth = Object.values(columnStyles).reduce(
|
|
||||||
(sum, col) => sum + col.cellWidth,
|
|
||||||
0
|
|
||||||
);
|
|
||||||
return (pageWidth - totalTableWidth) / 2;
|
|
||||||
};
|
|
||||||
|
|
||||||
const leftMargin = calculateLeftMargin(columnStyles, pageWidth);
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Coba tambahkan header image
|
|
||||||
const imageWidth = 250;
|
|
||||||
const imageHeight = 40;
|
|
||||||
const xPosition = (pageWidth - imageWidth) / 2;
|
|
||||||
|
|
||||||
pdf.addImage(headerImageUrl, 'PNG', xPosition, 10, imageWidth, imageHeight);
|
|
||||||
|
|
||||||
let currentY = 55;
|
|
||||||
|
|
||||||
// Garis pemisah
|
|
||||||
pdf.setDrawColor(0, 0, 0);
|
|
||||||
pdf.setLineWidth(0.5);
|
|
||||||
pdf.line(20, currentY, pageWidth - 20, currentY);
|
|
||||||
|
|
||||||
currentY += 10;
|
|
||||||
|
|
||||||
// Title
|
|
||||||
pdf.setFontSize(16);
|
|
||||||
pdf.setFont('helvetica', 'bold');
|
|
||||||
pdf.text('Wallet Statement Details', pageWidth / 2, currentY, { align: 'center' });
|
|
||||||
|
|
||||||
currentY += 10;
|
|
||||||
|
|
||||||
// Info export
|
|
||||||
pdf.setFontSize(10);
|
|
||||||
pdf.setFont('helvetica', 'normal');
|
|
||||||
pdf.text(`Export Date: ${format(new Date(), 'dd MMM yyyy HH:mm:ss')}`, 20, currentY);
|
|
||||||
pdf.text(`Wallet ID: ${selectedWallet?.ID || '-'}`, 20, currentY + 6);
|
|
||||||
|
|
||||||
currentY += 20;
|
|
||||||
|
|
||||||
// Render table dengan header image
|
|
||||||
autoTable(pdf, {
|
|
||||||
head: [tableHeaders],
|
|
||||||
body: tableData,
|
|
||||||
startY: currentY,
|
|
||||||
styles: {
|
|
||||||
fontSize: 7,
|
|
||||||
cellPadding: 1.5,
|
|
||||||
overflow: 'linebreak',
|
|
||||||
halign: 'left',
|
|
||||||
lineWidth: 0.1,
|
|
||||||
lineColor: [200, 200, 200]
|
|
||||||
},
|
|
||||||
headStyles: {
|
|
||||||
fillColor: [68, 114, 196],
|
|
||||||
textColor: [255, 255, 255],
|
|
||||||
fontStyle: 'bold',
|
|
||||||
halign: 'center',
|
|
||||||
cellPadding: 1.5
|
|
||||||
},
|
|
||||||
columnStyles: columnStyles,
|
|
||||||
tableWidth: 'wrap',
|
|
||||||
margin: {
|
|
||||||
left: leftMargin,
|
|
||||||
right: leftMargin,
|
|
||||||
top: 10,
|
|
||||||
bottom: 10
|
|
||||||
},
|
|
||||||
didDrawPage: (data: any) => {
|
|
||||||
if (data.pageNumber > 1) {
|
|
||||||
pdf.setFontSize(10);
|
|
||||||
pdf.setFont('helvetica', 'normal');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
theme: 'grid',
|
|
||||||
didDrawCell: (data: any) => {
|
|
||||||
if (data.section === 'body') {
|
|
||||||
pdf.setDrawColor(200, 200, 200);
|
|
||||||
pdf.setLineWidth(0.1);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
showHead: 'everyPage'
|
|
||||||
});
|
|
||||||
} catch (imageError) {
|
|
||||||
console.error('Error loading header image:', imageError);
|
|
||||||
|
|
||||||
// Fallback tanpa gambar header
|
|
||||||
pdf.setFontSize(16);
|
|
||||||
pdf.setFont('helvetica', 'bold');
|
|
||||||
pdf.text('Wallet Statement Details', pageWidth / 2, 20, { align: 'center' });
|
|
||||||
|
|
||||||
pdf.setFontSize(10);
|
|
||||||
pdf.setFont('helvetica', 'normal');
|
|
||||||
pdf.text(`Export Date: ${format(new Date(), 'dd MMM yyyy HH:mm:ss')}`, 20, 30);
|
|
||||||
pdf.text(`Wallet ID: ${selectedWallet?.ID || '-'}`, 20, 36);
|
|
||||||
|
|
||||||
autoTable(pdf, {
|
|
||||||
head: [tableHeaders],
|
|
||||||
body: tableData,
|
|
||||||
startY: 45,
|
|
||||||
styles: {
|
|
||||||
fontSize: 7,
|
|
||||||
cellPadding: 1.5,
|
|
||||||
overflow: 'linebreak',
|
|
||||||
halign: 'left'
|
|
||||||
},
|
|
||||||
headStyles: {
|
|
||||||
fillColor: [68, 114, 196],
|
|
||||||
textColor: [255, 255, 255],
|
|
||||||
fontStyle: 'bold',
|
|
||||||
halign: 'center'
|
|
||||||
},
|
|
||||||
columnStyles: columnStyles,
|
|
||||||
tableWidth: 'wrap',
|
|
||||||
margin: { left: leftMargin, right: leftMargin, top: 10, bottom: 10 },
|
|
||||||
theme: 'grid',
|
|
||||||
showHead: 'everyPage',
|
|
||||||
didDrawPage: (data: any) => {
|
|
||||||
if (data.pageNumber > 1) {
|
|
||||||
pdf.setFontSize(10);
|
|
||||||
pdf.setFont('helvetica', 'normal');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const fileName = `wallet_statement_${selectedWallet?.ID}_${format(new Date(), 'yyyyMMdd_HHmmss')}.pdf`;
|
|
||||||
pdf.save(fileName);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error exporting to PDF:', error);
|
|
||||||
toast.error('Failed to export PDF');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const doExportData = async (sorting: any, filter: any) => {
|
|
||||||
const user = localStorage.getItem(
|
|
||||||
`${import.meta.env.VITE_APP_NAME}-auth-v${import.meta.env.VITE_APP_VERSION}`
|
|
||||||
);
|
|
||||||
|
|
||||||
const parsedUser = user ? JSON.parse(user) : null;
|
|
||||||
sorting = sorting.length === 0 ? [{ id: 'created_at', desc: false }] : sorting;
|
|
||||||
filter = filter && filter.length > 0 ? filter : [];
|
|
||||||
|
|
||||||
let dataFilter: any = {};
|
|
||||||
|
|
||||||
if (filter && filter.length > 0) {
|
|
||||||
filter.forEach((f: any) => {
|
|
||||||
if (f.id === 'username') {
|
|
||||||
dataFilter['username'] = { like: f.value };
|
|
||||||
} else if (f.id === 'created_at') {
|
|
||||||
dataFilter['created_at'] = f.value;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!dataFilter['created_at']) {
|
|
||||||
const defaultFrom = new Date(new Date().setMonth(new Date().getMonth() - 1));
|
|
||||||
const defaultTo = new Date();
|
|
||||||
|
|
||||||
dataFilter['created_at'] = {
|
|
||||||
from: `${format(defaultFrom, 'yyyy-MM-dd')} 00:00:00`,
|
|
||||||
to: `${format(defaultTo, 'yyyy-MM-dd')} 23:59:59`
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
let param = {
|
|
||||||
order_field: sorting[0].id || 'created_at',
|
|
||||||
order_direction: sorting[0].desc ? 'DESC' : 'ASC',
|
|
||||||
with_deleted: false,
|
|
||||||
filter: JSON.stringify(dataFilter),
|
|
||||||
token: parsedUser?.access_token
|
|
||||||
};
|
|
||||||
|
|
||||||
let url = `${apiConfig.service_wallet}/dashboard/balance/list-balance-download/${selectedWallet?.ID}`;
|
|
||||||
|
|
||||||
GetExportData(url, param, 'user_activity_export_');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<showDetailWalletContext.Provider value={{ doExportData, doExportExcel, doExportPDF }}>
|
|
||||||
<Toaster expand visibleToasts={9} duration={3000} />
|
|
||||||
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
|
|
||||||
<DialogContent className="w-screen max-w-screen max-h-screen p-4 overflow-hidden">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Details Wallets Statement</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<DialogDescription />
|
|
||||||
|
|
||||||
<DialogBody>
|
|
||||||
<FilterSection
|
|
||||||
filters={filters}
|
|
||||||
setFilters={setFilters}
|
|
||||||
transaction={transaction}
|
|
||||||
categoryMap={categoryMap}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="py-4 max-h-[70vh] overflow-y-auto">
|
|
||||||
<DataGridProvider
|
|
||||||
key={JSON.stringify(filters)}
|
|
||||||
columns={columns}
|
|
||||||
pagination={{ size: 5 }}
|
|
||||||
layout={{ card: true }}
|
|
||||||
sorting={[{ id: 'created_at', desc: false }]}
|
|
||||||
serverSide={true}
|
|
||||||
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
|
|
||||||
getTransactionLists(pageIndex, pageSize, sorting, columnFilters)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</DialogBody>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</showDetailWalletContext.Provider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ShowDetailWalletDialog;
|
|
||||||
@ -0,0 +1,537 @@
|
|||||||
|
// exportFunctions.ts
|
||||||
|
import * as XLSX from 'xlsx';
|
||||||
|
import jsPDF from 'jspdf';
|
||||||
|
import autoTable from 'jspdf-autotable';
|
||||||
|
import ExcelJS from 'exceljs';
|
||||||
|
import { format } from 'date-fns';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import { toAbsoluteUrl } from '@/utils';
|
||||||
|
|
||||||
|
// Types
|
||||||
|
interface WalletData {
|
||||||
|
ID?: string;
|
||||||
|
name?: string;
|
||||||
|
msisdn?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TransactionItem {
|
||||||
|
transaction_code?: string;
|
||||||
|
msisdn_reff?: string;
|
||||||
|
transaction_type?: { name?: string };
|
||||||
|
type?: string;
|
||||||
|
pre_amount?: number;
|
||||||
|
amount?: number;
|
||||||
|
post_amount?: number;
|
||||||
|
category?: string;
|
||||||
|
date?: string;
|
||||||
|
purpose?: string;
|
||||||
|
notes?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Category mapping
|
||||||
|
const categoryMap: Record<string, string> = {
|
||||||
|
T: 'TRANSFER',
|
||||||
|
P: 'PURCHASE',
|
||||||
|
W: 'WITHDRAW',
|
||||||
|
U: 'TOP UP',
|
||||||
|
R: 'RETURN',
|
||||||
|
N: 'TOP UP PARTNER',
|
||||||
|
E: 'REWARD',
|
||||||
|
L: 'PURCHASE LOJA',
|
||||||
|
B: 'TOP UP P24',
|
||||||
|
A: 'TRANSFER AGENT',
|
||||||
|
M: 'WITHDRAWAL AGENT',
|
||||||
|
O: 'TOP UP AGENT',
|
||||||
|
S: 'TRANSFER P24',
|
||||||
|
I: 'WIJTDRAW MERCHANT',
|
||||||
|
D: 'DONATION',
|
||||||
|
F: 'FEE',
|
||||||
|
V: 'REVERSAL',
|
||||||
|
C: 'CASHBACK CASH',
|
||||||
|
H: 'CASHBACK POINT'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper function untuk format data
|
||||||
|
export const formatTransactionData = (data: TransactionItem[]) => {
|
||||||
|
return data.map((item) => ({
|
||||||
|
'Transaction Code': item.transaction_code || '-',
|
||||||
|
'MSISDN Reffer': item.msisdn_reff || '-',
|
||||||
|
'Transaction Type': item.transaction_type?.name || '-',
|
||||||
|
Type: item.type || '-',
|
||||||
|
'Pre Amount': item.pre_amount?.toFixed(2) || '0.00',
|
||||||
|
Amount: item.amount?.toFixed(2) || '0.00',
|
||||||
|
'Post Amount': item.post_amount?.toFixed(2) || '0.00',
|
||||||
|
Category: categoryMap[item.category || ''] || '-',
|
||||||
|
Date: item.date
|
||||||
|
? new Date(item.date).toLocaleString('id-ID', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: 'short',
|
||||||
|
year: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
})
|
||||||
|
: '-',
|
||||||
|
Purpose: item.purpose || '-',
|
||||||
|
Notes: item.notes || '-'
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper function untuk membuat text dengan alignment
|
||||||
|
const createAlignedText = (label: string, value: string) => {
|
||||||
|
const maxLabelWidth = 15;
|
||||||
|
const paddedLabel = label.padEnd(maxLabelWidth, ' ');
|
||||||
|
return `${paddedLabel}: ${value}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper function untuk menggambar info dengan titik dua rata tengah di PDF
|
||||||
|
const drawAlignedInfo = (
|
||||||
|
pdf: any,
|
||||||
|
label: string,
|
||||||
|
value: string,
|
||||||
|
x: number,
|
||||||
|
y: number,
|
||||||
|
colonPosition: number
|
||||||
|
) => {
|
||||||
|
pdf.text(label, x, y);
|
||||||
|
pdf.text(':', x + colonPosition, y);
|
||||||
|
pdf.text(value, x + colonPosition + 3, y);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper function untuk menghitung left margin PDF
|
||||||
|
const calculateLeftMargin = (
|
||||||
|
columnStyles: Record<number, { cellWidth: number }>,
|
||||||
|
pageWidth: number
|
||||||
|
): number => {
|
||||||
|
const totalTableWidth = Object.values(columnStyles).reduce((sum, col) => sum + col.cellWidth, 0);
|
||||||
|
return (pageWidth - totalTableWidth) / 2;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function untuk export Excel
|
||||||
|
export const exportToExcel = async (allData: TransactionItem[], selectedWallet: WalletData) => {
|
||||||
|
try {
|
||||||
|
const formattedData = formatTransactionData(allData);
|
||||||
|
const wb = XLSX.utils.book_new();
|
||||||
|
const ws = XLSX.utils.json_to_sheet([]);
|
||||||
|
|
||||||
|
// Space untuk header image
|
||||||
|
const imageSpaceRows = 10;
|
||||||
|
|
||||||
|
const companyHeader = [
|
||||||
|
...Array(imageSpaceRows).fill(['']),
|
||||||
|
[''],
|
||||||
|
['Wallet Statement Details'],
|
||||||
|
[createAlignedText('Wallet Name', selectedWallet?.name || '-')],
|
||||||
|
[createAlignedText('MSISDN', selectedWallet?.msisdn || '-')],
|
||||||
|
[createAlignedText('Export Date', format(new Date(), 'dd MMM yyyy HH:mm:ss'))],
|
||||||
|
['']
|
||||||
|
];
|
||||||
|
|
||||||
|
const columnHeaders = [
|
||||||
|
[
|
||||||
|
'Transaction Code',
|
||||||
|
'MSISDN Reffer',
|
||||||
|
'Transaction Type',
|
||||||
|
'Type',
|
||||||
|
'Pre Amount',
|
||||||
|
'Amount',
|
||||||
|
'Post Amount',
|
||||||
|
'Category',
|
||||||
|
'Date',
|
||||||
|
'Purpose',
|
||||||
|
'Notes'
|
||||||
|
]
|
||||||
|
];
|
||||||
|
|
||||||
|
const excelData = [
|
||||||
|
...companyHeader,
|
||||||
|
...columnHeaders,
|
||||||
|
...formattedData.map((item) => Object.values(item))
|
||||||
|
];
|
||||||
|
|
||||||
|
XLSX.utils.sheet_add_aoa(ws, excelData);
|
||||||
|
|
||||||
|
// Set column widths
|
||||||
|
const colWidths = [
|
||||||
|
{ wch: 20 },
|
||||||
|
{ wch: 15 },
|
||||||
|
{ wch: 35 },
|
||||||
|
{ wch: 10 },
|
||||||
|
{ wch: 12 },
|
||||||
|
{ wch: 12 },
|
||||||
|
{ wch: 12 },
|
||||||
|
{ wch: 15 },
|
||||||
|
{ wch: 20 },
|
||||||
|
{ wch: 25 },
|
||||||
|
{ wch: 25 }
|
||||||
|
];
|
||||||
|
ws['!cols'] = colWidths;
|
||||||
|
|
||||||
|
// Styling
|
||||||
|
const titleRowIndex = imageSpaceRows + 1;
|
||||||
|
const titleCell = XLSX.utils.encode_cell({ r: titleRowIndex, c: 0 });
|
||||||
|
if (ws[titleCell]) {
|
||||||
|
ws[titleCell].s = {
|
||||||
|
font: { bold: true, sz: 16 },
|
||||||
|
alignment: { horizontal: 'center' }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Style untuk info rows
|
||||||
|
for (let i = titleRowIndex + 1; i < titleRowIndex + 4; i++) {
|
||||||
|
const cellRef = XLSX.utils.encode_cell({ r: i, c: 0 });
|
||||||
|
if (ws[cellRef]) {
|
||||||
|
ws[cellRef].s = {
|
||||||
|
font: { sz: 11, name: 'Courier New' },
|
||||||
|
alignment: { horizontal: 'left' }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Merge cells
|
||||||
|
if (!ws['!merges']) ws['!merges'] = [];
|
||||||
|
|
||||||
|
// Merge untuk space gambar header
|
||||||
|
for (let i = 0; i < imageSpaceRows; i++) {
|
||||||
|
const range = XLSX.utils.encode_range({ s: { r: i, c: 0 }, e: { r: i, c: 10 } });
|
||||||
|
ws['!merges'].push(XLSX.utils.decode_range(range));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Merge untuk title
|
||||||
|
const titleRange = XLSX.utils.encode_range({
|
||||||
|
s: { r: titleRowIndex, c: 0 },
|
||||||
|
e: { r: titleRowIndex, c: 10 }
|
||||||
|
});
|
||||||
|
ws['!merges'].push(XLSX.utils.decode_range(titleRange));
|
||||||
|
|
||||||
|
// Merge untuk info rows
|
||||||
|
for (let i = titleRowIndex + 1; i < titleRowIndex + 4; i++) {
|
||||||
|
const range = XLSX.utils.encode_range({ s: { r: i, c: 0 }, e: { r: i, c: 10 } });
|
||||||
|
ws['!merges'].push(XLSX.utils.decode_range(range));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Style untuk column headers
|
||||||
|
const headerRowIndex = titleRowIndex + 5;
|
||||||
|
for (let col = 0; col < columnHeaders[0].length; col++) {
|
||||||
|
const cellRef = XLSX.utils.encode_cell({ r: headerRowIndex, c: col });
|
||||||
|
if (ws[cellRef]) {
|
||||||
|
ws[cellRef].s = {
|
||||||
|
font: { bold: true, color: { rgb: 'FFFFFF' } },
|
||||||
|
fill: { fgColor: { rgb: '4472C4' } },
|
||||||
|
alignment: { horizontal: 'center' },
|
||||||
|
border: {
|
||||||
|
top: { style: 'thin', color: { rgb: '000000' } },
|
||||||
|
bottom: { style: 'thin', color: { rgb: '000000' } },
|
||||||
|
left: { style: 'thin', color: { rgb: '000000' } },
|
||||||
|
right: { style: 'thin', color: { rgb: '000000' } }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Style untuk data rows
|
||||||
|
const dataStartRow = headerRowIndex + 1;
|
||||||
|
for (let row = dataStartRow; row < dataStartRow + formattedData.length; row++) {
|
||||||
|
for (let col = 0; col < columnHeaders[0].length; col++) {
|
||||||
|
const cellRef = XLSX.utils.encode_cell({ r: row, c: col });
|
||||||
|
if (ws[cellRef]) {
|
||||||
|
ws[cellRef].s = {
|
||||||
|
alignment: { horizontal: 'left' },
|
||||||
|
border: {
|
||||||
|
top: { style: 'thin', color: { rgb: 'D9D9D9' } },
|
||||||
|
bottom: { style: 'thin', color: { rgb: 'D9D9D9' } },
|
||||||
|
left: { style: 'thin', color: { rgb: 'D9D9D9' } },
|
||||||
|
right: { style: 'thin', color: { rgb: 'D9D9D9' } }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Gunakan ExcelJS untuk menambahkan gambar
|
||||||
|
const workbook = new ExcelJS.Workbook();
|
||||||
|
const worksheet = workbook.addWorksheet('Wallet Statement');
|
||||||
|
|
||||||
|
// Transfer data dari XLSX ke ExcelJS
|
||||||
|
const range = XLSX.utils.decode_range(ws['!ref'] || 'A1:K1');
|
||||||
|
|
||||||
|
for (let row = range.s.r; row <= range.e.r; row++) {
|
||||||
|
for (let col = range.s.c; col <= range.e.c; col++) {
|
||||||
|
const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
|
||||||
|
const cell = ws[cellAddress];
|
||||||
|
if (cell && cell.v !== undefined) {
|
||||||
|
const excelCell = worksheet.getCell(row + 1, col + 1);
|
||||||
|
excelCell.value = cell.v;
|
||||||
|
|
||||||
|
// Apply styles
|
||||||
|
if (cell.s) {
|
||||||
|
if (cell.s.font) {
|
||||||
|
excelCell.font = {
|
||||||
|
bold: cell.s.font.bold || false,
|
||||||
|
size: cell.s.font.sz || 11,
|
||||||
|
name: cell.s.font.name || 'Calibri',
|
||||||
|
color: cell.s.font.color ? { argb: cell.s.font.color.rgb } : undefined
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (cell.s.fill) {
|
||||||
|
excelCell.fill = {
|
||||||
|
type: 'pattern',
|
||||||
|
pattern: 'solid',
|
||||||
|
fgColor: { argb: cell.s.fill.fgColor.rgb }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (cell.s.alignment) {
|
||||||
|
excelCell.alignment = {
|
||||||
|
horizontal: cell.s.alignment.horizontal || 'left'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (cell.s.border) {
|
||||||
|
excelCell.border = {
|
||||||
|
top: cell.s.border.top ? { style: 'thin' } : undefined,
|
||||||
|
bottom: cell.s.border.bottom ? { style: 'thin' } : undefined,
|
||||||
|
left: cell.s.border.left ? { style: 'thin' } : undefined,
|
||||||
|
right: cell.s.border.right ? { style: 'thin' } : undefined
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set column widths
|
||||||
|
colWidths.forEach((width, index) => {
|
||||||
|
worksheet.getColumn(index + 1).width = width.wch;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Merge cells
|
||||||
|
if (ws['!merges']) {
|
||||||
|
ws['!merges'].forEach((merge) => {
|
||||||
|
worksheet.mergeCells(merge.s.r + 1, merge.s.c + 1, merge.e.r + 1, merge.e.c + 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tambahkan gambar header
|
||||||
|
try {
|
||||||
|
const response = await fetch(toAbsoluteUrl('/media/avatars/KopDetailWalletStatement.png'));
|
||||||
|
if (response.ok) {
|
||||||
|
const imageBuffer = await response.arrayBuffer();
|
||||||
|
const imageId = workbook.addImage({
|
||||||
|
buffer: imageBuffer,
|
||||||
|
extension: 'png'
|
||||||
|
});
|
||||||
|
|
||||||
|
worksheet.addImage(imageId, {
|
||||||
|
tl: { col: 1.7, row: 1 },
|
||||||
|
ext: { width: 1100, height: 180 }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (imageError) {
|
||||||
|
console.warn('Could not load header image, continuing without it:', imageError);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Export file
|
||||||
|
const fileName = `wallet_statement_${selectedWallet?.ID}_${format(new Date(), 'yyyyMMdd_HHmmss')}.xlsx`;
|
||||||
|
const buffer = await workbook.xlsx.writeBuffer();
|
||||||
|
|
||||||
|
const blob = new Blob([buffer], {
|
||||||
|
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||||
|
});
|
||||||
|
const url = window.URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.download = fileName;
|
||||||
|
link.click();
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
} catch (excelJSError) {
|
||||||
|
console.warn('ExcelJS not available, falling back to XLSX without image:', excelJSError);
|
||||||
|
XLSX.utils.book_append_sheet(wb, ws, 'Wallet Statement');
|
||||||
|
const fileName = `wallet_statement_${selectedWallet?.ID}_${format(new Date(), 'yyyyMMdd_HHmmss')}.xlsx`;
|
||||||
|
XLSX.writeFile(wb, fileName);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting to Excel:', error);
|
||||||
|
toast.error('Failed to export Excel');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function untuk export PDF
|
||||||
|
export const exportToPDF = async (allData: TransactionItem[], selectedWallet: WalletData) => {
|
||||||
|
try {
|
||||||
|
const formattedData = formatTransactionData(allData);
|
||||||
|
const pdf = new jsPDF({
|
||||||
|
orientation: 'landscape',
|
||||||
|
unit: 'mm',
|
||||||
|
format: 'a4'
|
||||||
|
});
|
||||||
|
|
||||||
|
const pageWidth = pdf.internal.pageSize.getWidth();
|
||||||
|
const headerImageUrl = toAbsoluteUrl('/media/avatars/KopDetailWalletStatement.png');
|
||||||
|
|
||||||
|
// Table configuration
|
||||||
|
const tableHeaders = [
|
||||||
|
'Transaction Code',
|
||||||
|
'MSISDN Reffer',
|
||||||
|
'Transaction Type',
|
||||||
|
'Type',
|
||||||
|
'Pre Amount',
|
||||||
|
'Amount',
|
||||||
|
'Post Amount',
|
||||||
|
'Category',
|
||||||
|
'Date',
|
||||||
|
'Purpose',
|
||||||
|
'Notes'
|
||||||
|
];
|
||||||
|
|
||||||
|
const tableData = formattedData.map((item) => [
|
||||||
|
item['Transaction Code'],
|
||||||
|
item['MSISDN Reffer'],
|
||||||
|
item['Transaction Type'],
|
||||||
|
item['Type'],
|
||||||
|
item['Pre Amount'],
|
||||||
|
item['Amount'],
|
||||||
|
item['Post Amount'],
|
||||||
|
item['Category'],
|
||||||
|
item['Date'],
|
||||||
|
item['Purpose'],
|
||||||
|
item['Notes']
|
||||||
|
]);
|
||||||
|
|
||||||
|
const columnStyles = {
|
||||||
|
0: { cellWidth: 25, halign: 'left' as const },
|
||||||
|
1: { cellWidth: 20, halign: 'left' as const },
|
||||||
|
2: { cellWidth: 25, halign: 'left' as const },
|
||||||
|
3: { cellWidth: 15, halign: 'left' as const },
|
||||||
|
4: { cellWidth: 18, halign: 'left' as const },
|
||||||
|
5: { cellWidth: 18, halign: 'left' as const },
|
||||||
|
6: { cellWidth: 18, halign: 'left' as const },
|
||||||
|
7: { cellWidth: 20, halign: 'left' as const },
|
||||||
|
8: { cellWidth: 30, halign: 'left' as const },
|
||||||
|
9: { cellWidth: 25, halign: 'left' as const },
|
||||||
|
10: { cellWidth: 25, halign: 'left' as const }
|
||||||
|
};
|
||||||
|
|
||||||
|
const leftMargin = calculateLeftMargin(columnStyles, pageWidth);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Tambahkan header image
|
||||||
|
const imageWidth = 250;
|
||||||
|
const imageHeight = 40;
|
||||||
|
const xPosition = (pageWidth - imageWidth) / 2;
|
||||||
|
|
||||||
|
pdf.addImage(headerImageUrl, 'PNG', xPosition, 10, imageWidth, imageHeight);
|
||||||
|
|
||||||
|
let currentY = 55;
|
||||||
|
|
||||||
|
// Garis pemisah
|
||||||
|
pdf.setDrawColor(0, 0, 0);
|
||||||
|
pdf.setLineWidth(0.5);
|
||||||
|
pdf.line(20, currentY, pageWidth - 20, currentY);
|
||||||
|
|
||||||
|
currentY += 10;
|
||||||
|
|
||||||
|
// Title
|
||||||
|
pdf.setFontSize(16);
|
||||||
|
pdf.setFont('helvetica', 'bold');
|
||||||
|
pdf.text('Wallet Statement Details', pageWidth / 2, currentY, { align: 'center' });
|
||||||
|
|
||||||
|
currentY += 10;
|
||||||
|
|
||||||
|
// Info export
|
||||||
|
pdf.setFontSize(10);
|
||||||
|
pdf.setFont('helvetica', 'normal');
|
||||||
|
const colonPosition = 25;
|
||||||
|
|
||||||
|
drawAlignedInfo(pdf, 'Wallet Name', selectedWallet?.name || '-', 20, currentY, colonPosition);
|
||||||
|
drawAlignedInfo(
|
||||||
|
pdf,
|
||||||
|
'MSISDN',
|
||||||
|
selectedWallet?.msisdn || '-',
|
||||||
|
20,
|
||||||
|
currentY + 6,
|
||||||
|
colonPosition
|
||||||
|
);
|
||||||
|
drawAlignedInfo(
|
||||||
|
pdf,
|
||||||
|
'Export Date',
|
||||||
|
format(new Date(), 'dd MMM yyyy HH:mm:ss'),
|
||||||
|
20,
|
||||||
|
currentY + 12,
|
||||||
|
colonPosition
|
||||||
|
);
|
||||||
|
|
||||||
|
currentY += 20;
|
||||||
|
|
||||||
|
// Render table
|
||||||
|
autoTable(pdf, {
|
||||||
|
head: [tableHeaders],
|
||||||
|
body: tableData,
|
||||||
|
startY: currentY,
|
||||||
|
styles: {
|
||||||
|
fontSize: 7,
|
||||||
|
cellPadding: 1.5,
|
||||||
|
overflow: 'linebreak',
|
||||||
|
halign: 'left',
|
||||||
|
lineWidth: 0.1,
|
||||||
|
lineColor: [200, 200, 200]
|
||||||
|
},
|
||||||
|
headStyles: {
|
||||||
|
fillColor: [68, 114, 196],
|
||||||
|
textColor: [255, 255, 255],
|
||||||
|
fontStyle: 'bold',
|
||||||
|
halign: 'center',
|
||||||
|
cellPadding: 1.5
|
||||||
|
},
|
||||||
|
columnStyles: columnStyles,
|
||||||
|
tableWidth: 'wrap',
|
||||||
|
margin: { left: leftMargin, right: leftMargin, top: 10, bottom: 10 },
|
||||||
|
theme: 'grid',
|
||||||
|
showHead: 'everyPage'
|
||||||
|
});
|
||||||
|
} catch (imageError) {
|
||||||
|
console.error('Error loading header image:', imageError);
|
||||||
|
|
||||||
|
// Fallback tanpa gambar
|
||||||
|
pdf.setFontSize(16);
|
||||||
|
pdf.setFont('helvetica', 'bold');
|
||||||
|
pdf.text('Wallet Statement Details', pageWidth / 2, 20, { align: 'center' });
|
||||||
|
|
||||||
|
pdf.setFontSize(10);
|
||||||
|
pdf.setFont('helvetica', 'normal');
|
||||||
|
const colonPosition = 25;
|
||||||
|
|
||||||
|
drawAlignedInfo(
|
||||||
|
pdf,
|
||||||
|
'Export Date',
|
||||||
|
format(new Date(), 'dd MMM yyyy HH:mm:ss'),
|
||||||
|
20,
|
||||||
|
30,
|
||||||
|
colonPosition
|
||||||
|
);
|
||||||
|
drawAlignedInfo(pdf, 'Wallet ID', selectedWallet?.ID || '-', 20, 36, colonPosition);
|
||||||
|
|
||||||
|
autoTable(pdf, {
|
||||||
|
head: [tableHeaders],
|
||||||
|
body: tableData,
|
||||||
|
startY: 45,
|
||||||
|
styles: { fontSize: 7, cellPadding: 1.5, overflow: 'linebreak', halign: 'left' },
|
||||||
|
headStyles: {
|
||||||
|
fillColor: [68, 114, 196],
|
||||||
|
textColor: [255, 255, 255],
|
||||||
|
fontStyle: 'bold',
|
||||||
|
halign: 'center'
|
||||||
|
},
|
||||||
|
columnStyles: columnStyles,
|
||||||
|
tableWidth: 'wrap',
|
||||||
|
margin: { left: leftMargin, right: leftMargin, top: 10, bottom: 10 },
|
||||||
|
theme: 'grid',
|
||||||
|
showHead: 'everyPage'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const fileName = `wallet_statement_${selectedWallet?.ID}_${format(new Date(), 'yyyyMMdd_HHmmss')}.pdf`;
|
||||||
|
pdf.save(fileName);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting to PDF:', error);
|
||||||
|
toast.error('Failed to export PDF');
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -33,7 +33,7 @@ const FilterSection: React.FC<FilterSectionProps> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const { GetData } = useCallApi();
|
const { GetData } = useCallApi();
|
||||||
const [dateRange, setDateRange] = useState({
|
const [dateRange, setDateRange] = useState({
|
||||||
from: new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleDateString('sv-SE'),
|
from: new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000).toLocaleDateString('sv-SE'),
|
||||||
to: new Date().toLocaleDateString('sv-SE')
|
to: new Date().toLocaleDateString('sv-SE')
|
||||||
});
|
});
|
||||||
const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
|
const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
|
||||||
@ -46,7 +46,6 @@ const FilterSection: React.FC<FilterSectionProps> = ({
|
|||||||
const handleExportExcel = async () => {
|
const handleExportExcel = async () => {
|
||||||
try {
|
try {
|
||||||
await doExportExcel();
|
await doExportExcel();
|
||||||
// console.log('Excel export initiated successfully');
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error during Excel export:', error);
|
console.error('Error during Excel export:', error);
|
||||||
}
|
}
|
||||||
@ -55,7 +54,6 @@ const FilterSection: React.FC<FilterSectionProps> = ({
|
|||||||
const handleExportPDF = async () => {
|
const handleExportPDF = async () => {
|
||||||
try {
|
try {
|
||||||
await doExportPDF();
|
await doExportPDF();
|
||||||
// console.log('PDF export initiated successfully');
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error during PDF export:', error);
|
console.error('Error during PDF export:', error);
|
||||||
}
|
}
|
||||||
@ -108,7 +106,7 @@ const FilterSection: React.FC<FilterSectionProps> = ({
|
|||||||
|
|
||||||
const handleClearAllFilters = () => {
|
const handleClearAllFilters = () => {
|
||||||
setDateRange({
|
setDateRange({
|
||||||
from: new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleDateString('sv-SE'),
|
from: new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000).toLocaleDateString('sv-SE'),
|
||||||
to: new Date().toLocaleDateString('sv-SE')
|
to: new Date().toLocaleDateString('sv-SE')
|
||||||
});
|
});
|
||||||
setSelectedTransferType(null);
|
setSelectedTransferType(null);
|
||||||
@ -0,0 +1,321 @@
|
|||||||
|
// ShowDetailWalletDialog.tsx - Versi yang sudah disederhanakan
|
||||||
|
import React, { createContext, useCallback, useEffect, useState } from 'react';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogBody,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import { useCallApi } from '@/hooks';
|
||||||
|
import { apiConfig } from '@/config/api.config';
|
||||||
|
import { DataGridColumnHeader, DataGridProvider } from '@/components';
|
||||||
|
import { useManageStatementContext } from '../hooks/useManageWalletStatementContext';
|
||||||
|
import { toast, Toaster } from 'sonner';
|
||||||
|
import { format } from 'date-fns';
|
||||||
|
import FilterSection from './FilterSection';
|
||||||
|
import { exportToExcel, exportToPDF } from './ExportData';
|
||||||
|
|
||||||
|
interface ContextProps {
|
||||||
|
doExportData: (sorting: any, filter: any) => Promise<any>;
|
||||||
|
doExportExcel: () => Promise<void>;
|
||||||
|
doExportPDF: () => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialProps: ContextProps = {
|
||||||
|
doExportData: async () => ({ data: [], totalCount: 0 }),
|
||||||
|
doExportExcel: async () => {},
|
||||||
|
doExportPDF: async () => {}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const showDetailWalletContext = createContext<ContextProps>(initialProps);
|
||||||
|
|
||||||
|
const ShowDetailWalletDialog = () => {
|
||||||
|
const { GetData, GetExportData } = useCallApi();
|
||||||
|
const { showDetailDialog, setShowDetailDialog, selectedWallet } = useManageStatementContext();
|
||||||
|
const [filters, setFilters] = useState<any>({});
|
||||||
|
const [transaction, setTransaction] = useState<any[]>([]);
|
||||||
|
|
||||||
|
const categoryMap: Record<string, string> = {
|
||||||
|
T: 'TRANSFER',
|
||||||
|
P: 'PURCHASE',
|
||||||
|
W: 'WITHDRAW',
|
||||||
|
U: 'TOP UP',
|
||||||
|
R: 'RETURN',
|
||||||
|
N: 'TOP UP PARTNER',
|
||||||
|
E: 'REWARD',
|
||||||
|
L: 'PURCHASE LOJA',
|
||||||
|
B: 'TOP UP P24',
|
||||||
|
A: 'TRANSFER AGENT',
|
||||||
|
M: 'WITHDRAWAL AGENT',
|
||||||
|
O: 'TOP UP AGENT',
|
||||||
|
S: 'TRANSFER P24',
|
||||||
|
I: 'WIJTDRAW MERCHANT',
|
||||||
|
D: 'DONATION',
|
||||||
|
F: 'FEE',
|
||||||
|
V: 'REVERSAL',
|
||||||
|
C: 'CASHBACK CASH',
|
||||||
|
H: 'CASHBACK POINT'
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
accessorKey: 'transaction_code',
|
||||||
|
header: ({ column }: any) => (
|
||||||
|
<DataGridColumnHeader title="Transaction Code" column={column} />
|
||||||
|
),
|
||||||
|
enableSorting: false,
|
||||||
|
meta: { headerClassName: 'min-w-[120px]' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'msisdn_reff',
|
||||||
|
header: ({ column }: any) => <DataGridColumnHeader title="MSISDN Reffer" column={column} />,
|
||||||
|
enableSorting: false,
|
||||||
|
meta: { headerClassName: 'min-w-[120px]' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'transaction_type.name',
|
||||||
|
header: ({ column }: any) => (
|
||||||
|
<DataGridColumnHeader title="Transaction Type" column={column} />
|
||||||
|
),
|
||||||
|
enableSorting: false,
|
||||||
|
meta: { headerClassName: 'min-w-[180px]' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'type',
|
||||||
|
header: ({ column }: any) => <DataGridColumnHeader title="Type" column={column} />,
|
||||||
|
enableSorting: false,
|
||||||
|
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]' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'amount',
|
||||||
|
header: ({ column }: any) => <DataGridColumnHeader title="Amount" column={column} />,
|
||||||
|
enableSorting: false,
|
||||||
|
cell: (info: any) => info.getValue()?.toFixed(2),
|
||||||
|
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]' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorFn: (row: any) => categoryMap[row.category] || '_',
|
||||||
|
accessorKey: 'category',
|
||||||
|
header: ({ column }: any) => <DataGridColumnHeader title="Category" column={column} />,
|
||||||
|
enableSorting: false,
|
||||||
|
enableHiding: false,
|
||||||
|
meta: { headerClassName: 'w-[250px]' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'date',
|
||||||
|
header: ({ column }: any) => <DataGridColumnHeader title="Date" column={column} />,
|
||||||
|
enableSorting: false,
|
||||||
|
cell: (info: any) => {
|
||||||
|
const val = info.getValue();
|
||||||
|
if (!val) return '-';
|
||||||
|
return new Date(val).toLocaleString('id-ID', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: 'short',
|
||||||
|
year: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
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]' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'notes',
|
||||||
|
header: ({ column }: any) => <DataGridColumnHeader title="Notes" column={column} />,
|
||||||
|
enableSorting: false,
|
||||||
|
cell: (info: any) => info.getValue() || '-',
|
||||||
|
meta: { headerClassName: 'min-w-[200px]' }
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Function untuk mendapatkan data transaksi dengan pagination
|
||||||
|
const getTransactionLists = useCallback(
|
||||||
|
async (page: number, limit: number, sorting: any, _columnFilters: any) => {
|
||||||
|
try {
|
||||||
|
const response = await GetData(
|
||||||
|
`${apiConfig.service_wallet}/dashboard/balance/list-balance-detail/${selectedWallet?.ID}`,
|
||||||
|
{
|
||||||
|
limit,
|
||||||
|
page: page + 1,
|
||||||
|
with_deleted: false,
|
||||||
|
order_field: sorting?.[0]?.id ?? 'created_at',
|
||||||
|
order_direction: sorting?.[0]?.desc ? 'ASC' : 'DESC',
|
||||||
|
filter: JSON.stringify(filters)
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response || !response.data) {
|
||||||
|
console.warn('No data received:', response);
|
||||||
|
return { data: [], totalCount: 0 };
|
||||||
|
}
|
||||||
|
|
||||||
|
setTransaction(response.data.list);
|
||||||
|
return { data: response.data.list, totalCount: response.data.total_count };
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching transaction', error);
|
||||||
|
return { data: [], totalCount: 0 };
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[GetData, filters, selectedWallet]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Function untuk mendapatkan semua data transaksi
|
||||||
|
const getAllTransactionData = async () => {
|
||||||
|
try {
|
||||||
|
const response = await GetData(
|
||||||
|
`${apiConfig.service_wallet}/dashboard/balance/list-balance-detail/${selectedWallet?.ID}`,
|
||||||
|
{
|
||||||
|
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 [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function untuk export Excel - sekarang hanya memanggil function terpisah
|
||||||
|
const doExportExcel = async () => {
|
||||||
|
try {
|
||||||
|
if (!selectedWallet) {
|
||||||
|
console.error('Something went wrong. Please try again...');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const allData = await getAllTransactionData();
|
||||||
|
await exportToExcel(allData, selectedWallet);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error in doExportExcel:', error);
|
||||||
|
toast.error('Failed to export Excel');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// Function untuk export PDF - sekarang hanya memanggil function terpisah
|
||||||
|
const doExportPDF = async () => {
|
||||||
|
try {
|
||||||
|
if (!selectedWallet) {
|
||||||
|
console.error('Something went wrong. Please try again...');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const allData = await getAllTransactionData();
|
||||||
|
await exportToPDF(allData, selectedWallet);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error in doExportPDF:', error);
|
||||||
|
toast.error('Failed to export PDF');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const doExportData = async (sorting: any, filter: any) => {
|
||||||
|
const user = localStorage.getItem(
|
||||||
|
`${import.meta.env.VITE_APP_NAME}-auth-v${import.meta.env.VITE_APP_VERSION}`
|
||||||
|
);
|
||||||
|
|
||||||
|
const parsedUser = user ? JSON.parse(user) : null;
|
||||||
|
sorting = sorting.length === 0 ? [{ id: 'created_at', desc: false }] : sorting;
|
||||||
|
filter = filter && filter.length > 0 ? filter : [];
|
||||||
|
|
||||||
|
let dataFilter: any = {};
|
||||||
|
|
||||||
|
if (filter && filter.length > 0) {
|
||||||
|
filter.forEach((f: any) => {
|
||||||
|
if (f.id === 'username') {
|
||||||
|
dataFilter['username'] = { like: f.value };
|
||||||
|
} else if (f.id === 'created_at') {
|
||||||
|
dataFilter['created_at'] = f.value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!dataFilter['created_at']) {
|
||||||
|
const defaultFrom = new Date(new Date().setMonth(new Date().getMonth() - 1));
|
||||||
|
const defaultTo = new Date();
|
||||||
|
|
||||||
|
dataFilter['created_at'] = {
|
||||||
|
from: `${format(defaultFrom, 'yyyy-MM-dd')} 00:00:00`,
|
||||||
|
to: `${format(defaultTo, 'yyyy-MM-dd')} 23:59:59`
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let param = {
|
||||||
|
order_field: sorting[0].id || 'created_at',
|
||||||
|
order_direction: sorting[0].desc ? 'DESC' : 'ASC',
|
||||||
|
with_deleted: false,
|
||||||
|
filter: JSON.stringify(dataFilter),
|
||||||
|
token: parsedUser?.access_token
|
||||||
|
};
|
||||||
|
|
||||||
|
let url = `${apiConfig.service_wallet}/dashboard/balance/list-balance-download/${selectedWallet?.ID}`;
|
||||||
|
|
||||||
|
GetExportData(url, param, 'user_activity_export_');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<showDetailWalletContext.Provider value={{ doExportData, doExportExcel, doExportPDF }}>
|
||||||
|
<Toaster expand visibleToasts={9} duration={3000} />
|
||||||
|
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
|
||||||
|
<DialogContent className="w-screen max-w-screen max-h-screen p-4 overflow-hidden">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Details Wallets Statement</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<DialogDescription />
|
||||||
|
|
||||||
|
<DialogBody>
|
||||||
|
<FilterSection
|
||||||
|
filters={filters}
|
||||||
|
setFilters={setFilters}
|
||||||
|
transaction={transaction}
|
||||||
|
categoryMap={categoryMap}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="py-4 max-h-[70vh] overflow-y-auto">
|
||||||
|
<DataGridProvider
|
||||||
|
key={JSON.stringify(filters)}
|
||||||
|
columns={columns}
|
||||||
|
pagination={{ size: 5 }}
|
||||||
|
layout={{ card: true }}
|
||||||
|
sorting={[{ id: 'created_at', desc: false }]}
|
||||||
|
serverSide={true}
|
||||||
|
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
|
||||||
|
getTransactionLists(pageIndex, pageSize, sorting, columnFilters)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</DialogBody>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</showDetailWalletContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ShowDetailWalletDialog;
|
||||||
@ -5,7 +5,7 @@ import { useCallApi } from '@/hooks';
|
|||||||
import { ColumnDef } from '@tanstack/react-table';
|
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';
|
||||||
import ShowDetailDialog from '../blocks/ShowDetailDialog';
|
import ShowDetailDialog from '../details_wallet_statement/ShowDetailDialog';
|
||||||
|
|
||||||
const formatNumber = (num: number): string => {
|
const formatNumber = (num: number): string => {
|
||||||
return num.toLocaleString('en-US', {
|
return num.toLocaleString('en-US', {
|
||||||
@ -20,6 +20,7 @@ interface WalletProps {
|
|||||||
name: string;
|
name: string;
|
||||||
id_currency: string;
|
id_currency: string;
|
||||||
status: string;
|
status: string;
|
||||||
|
msisdn: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ContextProps {
|
interface ContextProps {
|
||||||
@ -157,7 +158,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: 'CreatedAt',
|
accessorKey: 'CreatedAt',
|
||||||
header: ({ column }) => <DataGridColumnHeader title="Created At" column={column} />,
|
header: ({ column }) => <DataGridColumnHeader title="Date" column={column} />,
|
||||||
cell: ({ row }) =>
|
cell: ({ row }) =>
|
||||||
new Date(row.original.CreatedAt).toLocaleString('id-ID', {
|
new Date(row.original.CreatedAt).toLocaleString('id-ID', {
|
||||||
day: '2-digit',
|
day: '2-digit',
|
||||||
|
|||||||
Reference in New Issue
Block a user