Best Success Rate
${bestSuccess.name} (${bestSuccess.successRate.toFixed(2)}%)
Highest Volume
${mostVolume.name}
Blended Fee
${weightedAvgFee.toFixed(2)}%
`;
// Dashboard Table
document.getElementById('dashboard-table-body').innerHTML = results.map(r => `
| ${r.name} |
${r.status} |
${r.successRate.toFixed(2)}% |
$${r.volume.toLocaleString('en-US', {minimumFractionDigits:2})} |
${r.avgFee.toFixed(2)}% |
`).join('');
// Charts
if(volumeChart) volumeChart.destroy();
volumeChart = new Chart(document.getElementById('volume-chart').getContext('2d'), {
type: 'doughnut',
data: { labels: results.map(r => r.name), datasets: [{ data: results.map(r => r.volume), backgroundColor: ['#3b82f6', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444'] }] },
options: { responsive: true, plugins: { legend: { position: 'top' } } }
});
if(successRateChart) successRateChart.destroy();
successRateChart = new Chart(document.getElementById('success-rate-chart').getContext('2d'), {
type: 'bar',
data: { labels: results.map(r => r.name), datasets: [{ label: 'Success Rate (%)', data: results.map(r => r.successRate), backgroundColor: '#a78bfa' }] },
options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, min: 95, max: 100 } } }
});
};
// --- EVENT HANDLERS ---
const handleConfigChange = (e) => {
const input = e.target;
if (!input.dataset.field) return;
const id = parseInt(input.closest('tr').dataset.id);
const field = input.dataset.field;
const value = (input.type === 'number' || input.type === 'select-one') ? parseFloat(input.value) || 0 : input.value;
const integration = integrations.find(p => p.id === id);
if(integration) integration[field] = value;
};
const handleAddIntegration = () => {
const newId = integrations.length > 0 ? Math.max(...integrations.map(p => p.id)) + 1 : 1;
integrations.push({ id: newId, name: "New Integration", status: 'Inactive', successful: 0, failed: 0, avgValue: 0, avgFee: 0 });
renderConfigTable();
};
const handleDeleteIntegration = (e) => {
const btn = e.target.closest('.delete-btn');
if (btn) {
const id = parseInt(btn.closest('tr').dataset.id);
integrations = integrations.filter(p => p.id !== id);
renderConfigTable();
}
};
const generatePDF = () => {
const pdfContent = document.getElementById('pdf-content');
html2canvas(pdfContent, { scale: 2, useCORS: true }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'l', unit: 'mm', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const imgWidth = pdfWidth - 20;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.setFontSize(22).setFont('helvetica', 'bold').text('Payment Integration Performance Report', pdfWidth / 2, 15, { align: 'center' });
pdf.addImage(imgData, 'PNG', 10, 25, imgWidth, imgHeight);
pdf.save('payment-integration-report.pdf');
});
};
// --- ATTACH LISTENERS ---
prevBtn.addEventListener('click', () => showTab('dashboard'));
nextBtn.addEventListener('click', () => showTab('config'));
tabButtons.dashboard.addEventListener('click', () => showTab('dashboard'));
tabButtons.config.addEventListener('click', () => showTab('config'));
document.getElementById('add-integration-btn').addEventListener('click', handleAddIntegration);
document.getElementById('config-table-body').addEventListener('change', handleConfigChange);
document.getElementById('config-table-body').addEventListener('click', handleDeleteIntegration);
document.getElementById('download-pdf-btn').addEventListener('click', generatePDF);
// --- INITIAL SETUP ---
showTab('dashboard');
});
