TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update detail wallet statement

Browse Source
This commit is contained in:
Raja Oktafrianto
2025-06-06 11:57:57 +07:00
parent bf4a67b64c
commit 3fa9764340
1 changed files with 248 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
src/pages/wallet/wallet-statement/blocks/ShowDetailDialog.tsx
View File

@ -16,8 +16,14 @@ 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';
let autoTable: any;
try {
// Method 1: Default import
autoTable = require('jspdf-autotable').default;
} catch (e1) {
console.error('Failed to import jspdf-autotable:', e1);
}
interface ContextProps {
doExportData: (sorting: any, filter: any) => Promise<any>;
@ -227,6 +233,15 @@ const ShowDetailWalletDialog = () => {
}));
};
const isImageAccessible = async (url: any) => {
try {
const response = await fetch(url, { method: 'HEAD' });
return response.ok;
} catch {
return false;
}
};
const doExportExcel = async () => {
try {
const allData = await getAllTransactionData();
@ -235,11 +250,9 @@ const ShowDetailWalletDialog = () => {
const wb = XLSX.utils.book_new();
const ws = XLSX.utils.json_to_sheet([]);
// Membuat space untuk header image (sekitar 10 baris)
// Space untuk header image
const imageSpaceRows = 10;
const companyHeader = [
// Baris kosong untuk space gambar header
...Array(imageSpaceRows).fill(['']),
[''],
['Wallet Statement Details'],
@ -250,17 +263,8 @@ const ShowDetailWalletDialog = () => {
const columnHeaders = [
[
'Transaction Code',
'MSISDN Reffer',
'Transaction Type',
'Type',
'Pre Amount',
'Amount',
'Post Amount',
'Category',
'Date',
'Purpose',
'Notes'
'Transaction Code', 'MSISDN Reffer', 'Transaction Type', 'Type',
'Pre Amount', 'Amount', 'Post Amount', 'Category', 'Date', 'Purpose', 'Notes'
]
];
@ -274,21 +278,12 @@ const ShowDetailWalletDialog = () => {
// 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 }
{ 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"
// Apply styles
const titleRowIndex = imageSpaceRows + 1;
const titleCell = XLSX.utils.encode_cell({ r: titleRowIndex, c: 0 });
if (ws[titleCell]) {
@ -298,33 +293,19 @@ const ShowDetailWalletDialog = () => {
};
}
// 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
// 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 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
// Style 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 });
@ -343,14 +324,14 @@ const ShowDetailWalletDialog = () => {
}
}
// Style untuk data rows
// Style 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
alignment: { horizontal: 'left' },
border: {
top: { style: 'thin', color: { rgb: 'D9D9D9' } },
bottom: { style: 'thin', color: { rgb: 'D9D9D9' } },
@ -362,17 +343,21 @@ const ShowDetailWalletDialog = () => {
}
}
// Try ExcelJS with better error handling
let useExcelJS = false;
try {
// Import ExcelJS untuk menambahkan gambar
const ExcelJS = await import('exceljs');
// Check if ExcelJS is available
const ExcelJSModule = await import('exceljs');
const ExcelJS = ExcelJSModule.default || ExcelJSModule;
if (ExcelJS && ExcelJS.Workbook) {
useExcelJS = true;
// Buat workbook baru dengan ExcelJS
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Wallet Statement');
// Tambahkan data dari XLSX worksheet ke ExcelJS worksheet
// Transfer data from XLSX to 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 });
@ -427,32 +412,46 @@ const ShowDetailWalletDialog = () => {
});
}
// Tambahkan gambar header
// Try to add header image dengan multiple fallback paths
const imagePaths = [
'/media/avatars/KopDetailWalletStatement.png',
'./media/avatars/KopDetailWalletStatement.png',
];
let imageAdded = false;
for (const imagePath of imagePaths) {
try {
const response = await fetch('/media/avatars/KopDetailWalletStatement.png');
if (await isImageAccessible(imagePath)) {
const response = await fetch(imagePath);
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 }
});
imageAdded = true;
break;
}
}
} catch (imageError) {
console.warn('Could not load header image, continuing without it:', imageError);
console.warn(`Failed to load image from ${imagePath}:`, imageError);
continue;
}
}
if (!imageAdded) {
console.warn('No header image could be loaded from any path');
}
// 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'
});
@ -462,21 +461,47 @@ const ShowDetailWalletDialog = () => {
link.download = fileName;
link.click();
window.URL.revokeObjectURL(url);
}
} catch (excelJSError) {
console.warn('ExcelJS not available, falling back to XLSX without image:', excelJSError);
console.warn('ExcelJS failed, falling back to XLSX:', excelJSError);
useExcelJS = false;
}
// Fallback to XLSX if ExcelJS failed
if (!useExcelJS) {
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) {
toast.success('Excel export completed successfully');
} catch (error: any) {
console.error('Error exporting to Excel:', error);
toast.error('Failed to export Excel');
toast.error('Failed to export Excel: ' + error.message);
}
};
const doExportPDF = async () => {
try {
// Check if autoTable is available
if (!autoTable) {
// Try to load autoTable dynamically
try {
const autoTableModule = await import('jspdf-autotable');
autoTable = autoTableModule.default || autoTableModule.autoTable || autoTableModule;
} catch (importError) {
console.error('Failed to import jspdf-autotable:', importError);
toast.error('PDF export library not available');
return;
}
}
if (typeof autoTable !== 'function') {
console.error('autoTable is not a function, type:', typeof autoTable);
toast.error('PDF export function not properly loaded');
return;
}
const allData = await getAllTransactionData();
const formattedData = formatTransactionData(allData);
@ -486,92 +511,84 @@ const ShowDetailWalletDialog = () => {
format: 'a4'
});
const headerImageUrl = '/media/avatars/KopDetailWalletStatement.png';
// Try to add header image dengan multiple paths
const imagePaths = [
'/media/avatars/KopDetailWalletStatement.png',
'./media/avatars/KopDetailWalletStatement.png',
];
let imageAdded = false;
for (const imagePath of imagePaths) {
try {
if (await isImageAccessible(imagePath)) {
const pageWidth = pdf.internal.pageSize.getWidth();
const imageWidth = 250;
const imageHeight = 40;
const xPosition = (pageWidth - imageWidth) / 2;
pdf.addImage(headerImageUrl, 'PNG', xPosition, 10, imageWidth, imageHeight);
pdf.addImage(imagePath, 'PNG', xPosition, 10, imageWidth, imageHeight);
imageAdded = true;
break;
}
} catch (imageError) {
console.warn(`Failed to load image from ${imagePath}:`, imageError);
continue;
}
}
let currentY = 55;
const pageWidth = pdf.internal.pageSize.getWidth();
let currentY = imageAdded ? 55 : 20;
// Add header line
pdf.setDrawColor(0, 0, 0);
pdf.setLineWidth(0.5);
pdf.line(20, currentY, pageWidth - 20, currentY);
currentY += 10;
// Add title
pdf.setFontSize(16);
pdf.setFont('helvetica', 'bold');
pdf.text('Wallet Statement Details', pageWidth / 2, currentY, { align: 'center' });
currentY += 10;
// Add metadata
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;
// Prepare table data
const tableHeaders = [
'Transaction Code',
'MSISDN Reffer',
'Transaction Type',
'Type',
'Pre Amount',
'Amount',
'Post Amount',
'Category',
'Date',
'Purpose',
'Notes'
'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']
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 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 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: 'center' as const },
4: { cellWidth: 18, halign: 'right' as const },
5: { cellWidth: 18, halign: 'right' as const },
6: { cellWidth: 18, halign: 'right' 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 }
0: { cellWidth: 25, halign: 'left' },
1: { cellWidth: 20, halign: 'left' },
2: { cellWidth: 25, halign: 'left' },
3: { cellWidth: 15, halign: 'center' },
4: { cellWidth: 18, halign: 'right' },
5: { cellWidth: 18, halign: 'right' },
6: { cellWidth: 18, halign: 'right' },
7: { cellWidth: 20, halign: 'left' },
8: { cellWidth: 30, halign: 'left' },
9: { cellWidth: 25, halign: 'left' },
10: { cellWidth: 25, halign: 'left' }
};
const leftMargin = calculateLeftMargin(columnStyles, pageWidth);
const totalTableWidth = Object.values(columnStyles).reduce((sum, col) => sum + col.cellWidth, 0);
const leftMargin = (pageWidth - totalTableWidth) / 2;
// Use autoTable with proper error handling
try {
autoTable(pdf, {
head: [tableHeaders],
body: tableData,
@ -598,15 +615,19 @@ const ShowDetailWalletDialog = () => {
}
}
});
} catch (autoTableError) {
console.error('AutoTable error:', autoTableError);
toast.error('Failed to generate PDF table');
return;
}
const fileName = `wallet_statement_${selectedWallet?.ID}_${format(new Date(), 'yyyyMMdd_HHmmss')}.pdf`;
pdf.save(fileName);
} catch (imageError) {
console.error('Error loading header image:', imageError);
}
} catch (error) {
toast.success('PDF export completed successfully');
} catch (error: any) {
console.error('Error exporting to PDF:', error);
toast.error('Failed to export PDF');
toast.error('Failed to export PDF: ' + error.message);
}
};