`;
});
updateChart(analysis, transactions.filter(t=>t.status === 'fraudulent').length);
};
const updateChart = (analysis, totalFraud) => {
const ctx = document.getElementById('fraud-indicators-chart')?.getContext('2d');
if (!ctx) return;
if (indicatorsChart) indicatorsChart.destroy();
const data = {
labels: ['IP Mismatch', 'New Customer', 'Overnight Shipping', 'Off-Peak Hours'],
datasets: [{
label: '% of Fraudulent Transactions',
data: [
(analysis.ipMismatch / totalFraud * 100),
(analysis.newCustomer / totalFraud * 100),
(analysis.overnightShipping / totalFraud * 100),
(analysis.offPeak / totalFraud * 100)
],
backgroundColor: 'rgba(59, 130, 246, 0.5)',
borderColor: 'rgba(59, 130, 246, 1)',
borderWidth: 1
}]
};
indicatorsChart = new Chart(ctx, {
type: 'bar',
data: data,
options: { indexAxis: 'y', scales: { x: { beginAtZero: true, max: 100 } }, plugins: { legend: { display: false } } }
});
};
const generatePDF = () => {
const { jsPDF } = window.jspdf;
const pdfContent = document.getElementById('pdf-content');
const pdfBtnContainer = document.getElementById('pdf-button-container');
if (!pdfContent || !pdfBtnContainer) return;
pdfBtnContainer.style.display = 'none';
html2canvas(pdfContent, { scale: 2, useCORS: true }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const imgWidth = pdfWidth - 20;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.setFontSize(22); pdf.setFont('helvetica', 'bold');
pdf.text('Fraud Prevention Rules Report', pdfWidth / 2, 15, { align: 'center' });
pdf.addImage(imgData, 'PNG', 10, 25, imgWidth, imgHeight);
pdf.save('fraud-prevention-rules.pdf');
pdfBtnContainer.style.display = 'block';
}).catch(err => {
console.error("Error generating PDF:", err);
pdfBtnContainer.style.display = 'block';
});
};
// --- Event Listeners ---
tabBtnConfig.addEventListener('click', () => showTab('config'));
tabBtnDashboard.addEventListener('click', () => showTab('dashboard'));
prevBtn.addEventListener('click', () => showTab('config'));
nextBtn.addEventListener('click', () => showTab('generate'));
addTransactionForm.addEventListener('submit', handleAddTransaction);
transactionsTableBody.addEventListener('click', handleDeleteTransaction);
downloadPdfBtn.addEventListener('click', generatePDF);
// --- Initial Setup ---
renderTransactionsTable();
showTab('config');
});
