`;
// 3. Render authentication queue
const reviewQueue = transactions.filter(t => t.status === 'Requires Review');
authQueueContainer.innerHTML = '';
if (reviewQueue.length === 0) {
authQueueContainer.innerHTML = `
No transactions require manual review.
`;
} else {
reviewQueue.forEach(t => {
const card = document.createElement('div');
card.className = 'bg-white border-l-4 border-yellow-500 rounded-r-lg shadow-md p-4 space-y-2';
card.innerHTML = `
${t.transactionId}
Customer: ${t.customer}
$${t.amount.toFixed(2)}
Risk Factors:
${t.riskFactors.map(f => `- ${f}
`).join('')}
`;
authQueueContainer.appendChild(card);
});
}
};
const renderConfigTable = () => {
configTableBody.innerHTML = transactions.map(t => `
|
|
|
|
|
`).join('');
};
// --- UI & EVENT HANDLERS ---
window.handleAuthAction = (id, newStatus) => {
const transaction = transactions.find(t => t.id === id);
if (transaction) {
transaction.status = newStatus;
renderDashboard();
}
};
const switchTab = (tabId) => {
currentTab = tabId;
if (tabId === 'dashboard') {
applyRiskRules();
renderDashboard();
}
Object.values(tabPanes).forEach(pane => pane.classList.add('hidden'));
tabPanes[tabId].classList.remove('hidden');
Object.values(tabButtons).forEach(btn => btn.classList.replace('tab-active', 'tab-inactive'));
tabButtons[tabId].classList.replace('tab-inactive', 'tab-active');
updateNavButtons();
};
const navigateTabs = (direction) => {
const currentIndex = tabs.indexOf(currentTab);
const newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
if (newIndex >= 0 && newIndex < tabs.length) switchTab(tabs[newIndex]);
};
const updateNavButtons = () => {
const currentIndex = tabs.indexOf(currentTab);
prevBtn.disabled = currentIndex === 0;
nextBtn.disabled = currentIndex === tabs.length - 1;
prevBtn.classList.toggle('opacity-50', prevBtn.disabled);
nextBtn.classList.toggle('opacity-50', nextBtn.disabled);
};
const handlePdfDownload = () => {
const processedTransactions = transactions.filter(t => t.status !== 'Pending' && t.status !== 'Requires Review');
let pdfHtml = `
Transaction Authentication Report
| Transaction ID | Customer | Amount | Status |
${processedTransactions.map(t => `
| ${t.transactionId} |
${t.customer} |
$${t.amount.toFixed(2)} |
${t.status} |
`).join('')}
`;
const pdfRenderContainer = document.getElementById('pdf-render-content');
pdfRenderContainer.innerHTML = pdfHtml;
html2canvas(pdfRenderContainer, { scale: 2 }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth(), margin = 40;
const contentWidth = pdfWidth - margin * 2;
const pdfHeight = (canvas.height * contentWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', margin, margin, contentWidth, pdfHeight);
pdf.save('Authentication-Report.pdf');
});
};
// --- EVENT LISTENERS ---
window.switchTab = switchTab;
window.navigateTabs = navigateTabs;
downloadPdfBtn.addEventListener('click', handlePdfDownload);
addTransactionBtn.addEventListener('click', () => {
const newTransaction = {
id: nextId++, transactionId: `TXN-NEW-${nextId}`, customer: 'New Customer',
amount: 0.00, country: 'US', status: 'Pending', riskFactors: []
};
transactions.push(newTransaction);
renderConfigTable();
});
configTableBody.addEventListener('input', e => {
if(e.target.classList.contains('config-input')) {
const id = parseInt(e.target.closest('tr').dataset.id);
const prop = e.target.dataset.prop;
const item = transactions.find(t => t.id === id);
if (item) {
item[prop] = e.target.type === 'number' ? parseFloat(e.target.value) : e.target.value;
item.status = 'Pending'; // Reset status on edit
}
}
});
configTableBody.addEventListener('click', e => {
if (e.target.classList.contains('remove-row-btn')) {
const idToRemove = parseInt(e.target.closest('tr').dataset.id);
transactions = transactions.filter(t => t.id !== idToRemove);
renderConfigTable();
}
});
// --- INITIALIZATION ---
renderConfigTable();
switchTab('dashboard'); // This will also apply rules and render the dashboard
});
