`).join('');
dashboardContent.innerHTML = `
Active Integrations
${activeWallets.length}
Total Active Volume (30d)
${formatCurrency(totalVolume)}
Avg. Success Rate
${avgSuccessRate.toFixed(1)}%
${walletsHtml}
`;
lucide.createIcons();
attachDashboardListeners();
};
const attachDashboardListeners = () => {
document.querySelectorAll('.toggle-status-btn').forEach(btn => btn.addEventListener('click', handleStatusToggle));
document.querySelectorAll('.remove-wallet-btn').forEach(btn => btn.addEventListener('click', handleRemoveWallet));
document.getElementById('download-pdf-btn').addEventListener('click', generatePdf);
};
const handleStatusToggle = (e) => {
const walletId = parseInt(e.currentTarget.dataset.id);
const wallet = appData.wallets.find(w => w.id === walletId);
if (wallet) {
if (wallet.status === 'active') wallet.status = 'inactive';
else if (wallet.status === 'inactive') wallet.status = 'active';
// Error state needs manual clearing in config
}
renderDashboard();
};
const handleRemoveWallet = (e) => {
const walletId = parseInt(e.currentTarget.dataset.id);
appData.wallets = appData.wallets.filter(w => w.id !== walletId);
renderDashboard();
};
const renderConfiguration = () => {
const configContent = document.getElementById('content-config');
if (!configContent) return;
const walletsHtml = appData.wallets.map(wallet => `
|
|
|
`).join('');
configContent.innerHTML = `
`;
document.getElementById('add-wallet-btn').addEventListener('click', handleAddRow);
document.getElementById('config-form').addEventListener('submit', handleConfigSave);
};
const handleAddRow = () => {
const tableBody = document.getElementById('config-table-body');
const newRow = document.createElement('tr');
newRow.className = 'wallet-config-row border-b bg-white is-new';
newRow.innerHTML = `
|
|
|
`;
tableBody.appendChild(newRow);
};
const handleConfigSave = (e) => {
e.preventDefault();
const newWallets = [];
let nextId = Math.max(...appData.wallets.map(w => w.id), 0) + 1;
document.querySelectorAll('.wallet-config-row').forEach(row => {
const name = row.querySelector('[data-field="name"]').value;
if (!name) return; // Skip empty rows
const id = row.classList.contains('is-new') ? nextId++ : parseInt(row.dataset.id);
const originalWallet = appData.wallets.find(w => w.id === id) || { volume: 0, successRate: 0 };
newWallets.push({
id: id,
name: name,
status: row.querySelector('[data-field="status"]').value,
apiKey: row.querySelector('[data-field="apiKey"]').value,
volume: originalWallet.volume,
successRate: originalWallet.successRate
});
});
appData.wallets = newWallets;
alert('Configuration saved!');
renderDashboard();
renderConfiguration(); // Re-render to remove 'is-new' etc.
};
const generatePdf = () => {
loadingOverlay.style.display = 'flex';
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' });
const activeWallets = appData.wallets.filter(w => w.status === 'active');
const totalVolume = activeWallets.reduce((sum, w) => sum + w.volume, 0);
const avgSuccessRate = activeWallets.length > 0 ? activeWallets.reduce((sum, w) => sum + w.successRate, 0) / activeWallets.length : 0;
let y = 40;
pdf.setFontSize(18);
pdf.setFont('helvetica', 'bold');
pdf.text('Digital Wallet Integration Report', pdf.internal.pageSize.getWidth() / 2, y, { align: 'center' });
y += 20;
pdf.setFontSize(10);
pdf.setFont('helvetica', 'normal');
pdf.text(`Generated on: ${new Date().toLocaleDateString()}`, pdf.internal.pageSize.getWidth() / 2, y, { align: 'center' });
y += 40;
// Summary Cards
pdf.autoTable({
startY: y,
body: [
[
{ content: 'Active Integrations\n' + activeWallets.length, styles: { halign: 'center', fontSize: 10, cellPadding: 10 } },
{ content: 'Total Active Volume (30d)\n' + formatCurrency(totalVolume), styles: { halign: 'center', fontSize: 10, cellPadding: 10 } },
{ content: 'Avg. Success Rate\n' + avgSuccessRate.toFixed(1) + '%', styles: { halign: 'center', fontSize: 10, cellPadding: 10 } }
]
],
theme: 'plain',
styles: { font: 'helvetica', fontStyle: 'bold', lineWidth: 1, lineColor: [221, 221, 221] }
});
y = pdf.autoTable.previous.finalY + 30;
// Main Table
pdf.autoTable({
startY: y,
head: [['Wallet Name', 'Status', 'Volume (30d)', 'Success Rate']],
body: appData.wallets.map(w => [w.name, w.status, formatCurrency(w.volume), `${w.successRate.toFixed(1)}%`]),
theme: 'grid',
headStyles: { fillColor: [37, 99, 235] } // Blue header
});
pdf.save(`Wallet-Integration-Report.pdf`);
loadingOverlay.style.display = 'none';
};
// --- TAB NAVIGATION & INITIALIZATION ---
const switchTab = (tabIndex) => {
activeTabIndex = tabIndex;
document.querySelectorAll('.tab-btn').forEach((btn, i) => btn.classList.toggle('active', i === tabIndex));
document.querySelectorAll('.tab-content').forEach((content, i) => content.classList.toggle('hidden', i !== tabIndex));
updateNavButtons();
};
const updateNavButtons = () => {
prevTabBtn.disabled = activeTabIndex === 0;
nextTabBtn.disabled = activeTabIndex === tabIdentifiers.length - 1;
};
const initializeUI = () => {
const tabs = [
{ name: 'Integration Dashboard', id: 'dashboard' },
{ name: 'Configuration', id: 'config' }
];
tabIdentifiers = tabs.map(t => t.id);
tabsContainer.innerHTML = tabs.map(tab => `
`).join('');
mainContent.innerHTML = tabs.map(tab => `
`).join('');
tabs.forEach((tab, index) => {
document.getElementById(`tab-${tab.id}`).addEventListener('click', () => switchTab(index));
});
renderDashboard();
renderConfiguration();
switchTab(0);
lucide.createIcons();
};
initializeUI();
prevTabBtn.addEventListener('click', () => { if (activeTabIndex > 0) switchTab(activeTabIndex - 1); });
nextTabBtn.addEventListener('click', () => { if (activeTabIndex < tabIdentifiers.length - 1) switchTab(activeTabIndex + 1); });
});
