`;
summaryCardsContainer.innerHTML += cardEl;
});
lucide.createIcons();
};
const renderConfigTable = () => {
configTableBody.innerHTML = '';
if (complianceItems.length === 0) {
configTableBody.innerHTML = `
| No items found. Click 'Add New Compliance Item' to begin. |
`;
} else {
complianceItems.forEach(item => {
const row = `
|
|
|
|
|
|
|
`;
configTableBody.innerHTML += row;
});
lucide.createIcons();
}
};
// --- EVENT HANDLERS & LOGIC ---
window.switchTab = (tabId) => {
currentTab = tabId;
Object.values(tabContents).forEach(content => content.classList.add('hidden'));
Object.values(tabButtons).forEach(button => button.classList.remove('tab-active', 'tab-inactive'));
if (tabContents[tabId]) {
tabContents[tabId].classList.remove('hidden');
}
Object.entries(tabButtons).forEach(([id, button]) => {
if (id === tabId) {
button.classList.add('tab-active');
} else {
button.classList.add('tab-inactive');
}
});
};
const navigateTabs = (direction) => {
const currentIndex = tabs.indexOf(currentTab);
let nextIndex = currentIndex + direction;
if (nextIndex < 0) nextIndex = tabs.length - 1;
if (nextIndex >= tabs.length) nextIndex = 0;
switchTab(tabs[nextIndex]);
};
addItemBtn.addEventListener('click', () => {
const newItem = {
id: Date.now(),
area: 'New Compliance Area',
likelihood: 1,
impact: 1,
status: 'In Progress',
dueDate: new Date().toISOString().split('T')[0]
};
complianceItems.push(newItem);
renderAll();
});
configTableBody.addEventListener('change', (e) => {
if(e.target.dataset.id) {
const id = parseInt(e.target.dataset.id);
const field = e.target.dataset.field;
const value = e.target.tagName === 'SELECT' ? (isNaN(parseInt(e.target.value)) ? e.target.value : parseInt(e.target.value)) : e.target.value;
const itemIndex = complianceItems.findIndex(item => item.id === id);
if(itemIndex > -1) {
complianceItems[itemIndex][field] = value;
renderDashboard(); // Re-render dashboard on any change
}
}
});
configTableBody.addEventListener('click', (e) => {
const deleteButton = e.target.closest('.delete-btn');
if (deleteButton) {
const id = parseInt(deleteButton.dataset.id);
complianceItems = complianceItems.filter(item => item.id !== id);
renderAll();
}
});
downloadPdfBtn.addEventListener('click', () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.setFontSize(18);
doc.text("Risk-Based Compliance Monitoring Report", 14, 22);
doc.setFontSize(11);
doc.setTextColor(100);
doc.text(`Report generated on: ${new Date().toLocaleDateString()}`, 14, 30);
const tableColumn = ["Compliance Area", "Likelihood", "Impact", "Risk Score", "Risk Level", "Status", "Due Date"];
const tableRows = [];
complianceItems.forEach(item => {
const riskScore = calculateRisk(item.likelihood, item.impact);
const riskProfile = getRiskProfile(riskScore);
const itemData = [
item.area,
item.likelihood,
item.impact,
riskScore,
riskProfile.level,
item.status,
item.dueDate,
];
tableRows.push(itemData);
});
doc.autoTable({
head: [tableColumn],
body: tableRows,
startY: 40,
theme: 'grid',
headStyles: { fillColor: [22, 160, 133] },
});
doc.save('compliance-report.pdf');
});
prevBtn.addEventListener('click', () => navigateTabs(-1));
nextBtn.addEventListener('click', () => navigateTabs(1));
// --- INITIALIZATION ---
if (tabButtons.dashboard && tabContents.dashboard) {
renderAll();
} else {
console.error("Critical DOM elements for initialization are missing.");
}
});
