${act.activityType}

${act.details}

${act.timestamp} ${act.riskScore} ${act.status} New Reviewing Resolved `; activityTableBody.appendChild(row); }); } updateMetrics(); }; const updateMetrics = () => { document.getElementById('metric-total-alerts').textContent = activities.length; document.getElementById('metric-reviewing').textContent = activities.filter(a => a.status === 'Reviewing').length; document.getElementById('metric-high-risk').textContent = activities.filter(a => a.riskScore > 80).length; document.getElementById('metric-resolved').textContent = activities.filter(a => a.status === 'Resolved').length; }; const handleTableAction = (e) => { if (e.target.classList.contains('status-changer')) { const id = parseInt(e.target.dataset.id); const newStatus = e.target.value; const activity = activities.find(a => a.id === id); if (activity) { activity.status = newStatus; renderActivities(); // Re-render to update colors and metrics } } }; 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'; pdfContent.querySelectorAll('.table-actions').forEach(el => el.style.display = 'none'); 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 pdfHeight = pdf.internal.pageSize.getHeight(); const imgWidth = pdfWidth - 20; const imgHeight = (canvas.height * imgWidth) / canvas.width; pdf.setFontSize(22); pdf.setFont('helvetica', 'bold'); pdf.text('Suspicious Activity Report', pdfWidth / 2, 15, { align: 'center' }); pdf.addImage(imgData, 'PNG', 10, 25, imgWidth, Math.min(imgHeight, pdfHeight - 30)); pdf.save('suspicious-activity-report.pdf'); pdfBtnContainer.style.display = 'block'; pdfContent.querySelectorAll('.table-actions').forEach(el => el.style.display = ''); }).catch(err => { console.error("Error generating PDF:", err); pdfBtnContainer.style.display = 'block'; pdfContent.querySelectorAll('.table-actions').forEach(el => el.style.display = ''); }); }; // --- Event Listeners --- tabBtnDashboard.addEventListener('click', () => showTab('dashboard')); tabBtnConfig.addEventListener('click', () => showTab('config')); prevBtn.addEventListener('click', () => showTab('dashboard')); nextBtn.addEventListener('click', () => showTab('config')); activityTableBody.addEventListener('change', handleTableAction); searchInput.addEventListener('input', renderActivities); statusFilter.addEventListener('change', renderActivities); downloadPdfBtn.addEventListener('click', generatePDF); document.getElementById('save-settings-btn').addEventListener('click', () => { // In a real app, this would save to a backend. Here, we just switch tabs. showTab('dashboard'); }); // --- Initial Setup --- renderActivities(); showTab('dashboard'); });