`;
});
container.innerHTML = html;
}
function showTab(tabNumber) {
document.querySelectorAll('.tab-pane').forEach(p => p.classList.add('hidden'));
getEl(`tab-${tabNumber}`).classList.remove('hidden');
document.querySelectorAll('.tab-btn').forEach(b => {
b.classList.toggle('active', b.dataset.tab === `tab-${tabNumber}`);
b.classList.toggle('inactive', b.dataset.tab !== `tab-${tabNumber}`);
});
currentTab = tabNumber;
updateNavigation();
}
function updateNavigation() {
prevBtn.disabled = currentTab === 1;
nextBtn.style.display = currentTab === totalTabs ? 'none' : 'inline-block';
nextBtn.textContent = (currentTab === totalTabs - 1) ? 'Generate Dashboard' : 'Next';
stepIndicator.textContent = `Step ${currentTab} of ${totalTabs}`;
}
function saveTabData() {
if (currentTab === 1) {
appData.companyName = getEl('companyName').value;
appData.industry = getEl('industry').value;
appData.assessmentDate = getEl('assessmentDate').value;
appData.regulations = {
gdpr: getEl('gdpr').checked,
ccpa: getEl('ccpa').checked,
};
} else if (currentTab === 2) {
appData.assessmentResults = [];
const form = getEl('form-assessment');
assessmentData.forEach(section => {
section.questions.forEach(q => {
const value = form.elements[q.id].value;
appData.assessmentResults.push({
id: q.id, text: q.text, category: section.category,
value: parseInt(value),
status: {2: 'Fully Compliant', 1: 'Partially Compliant', 0: 'Non-Compliant'}[value],
recommendation: q.recommendation
});
});
});
}
}
function validateTab(tabNumber) {
const formId = { 1: 'form-profile', 2: 'form-assessment' }[tabNumber];
if (!formId) return true;
const form = getEl(formId);
if (form && !form.checkValidity()) {
form.reportValidity();
return false;
}
return true;
}
function generateDashboard() {
saveTabData();
// Calculate scores
const totalPossibleScore = appData.assessmentResults.length * 2;
const actualScore = appData.assessmentResults.reduce((sum, item) => sum + item.value, 0);
const overallScore = totalPossibleScore > 0 ? Math.round((actualScore / totalPossibleScore) * 100) : 0;
const categoryScores = assessmentData.map(section => {
const sectionQuestions = appData.assessmentResults.filter(r => r.category === section.category);
const sectionTotal = sectionQuestions.length * 2;
const sectionActual = sectionQuestions.reduce((sum, item) => sum + item.value, 0);
return sectionTotal > 0 ? Math.round((sectionActual / sectionTotal) * 100) : 0;
});
// AI Risk assessment
let riskLevel = 'Low';
let riskColor = 'text-green-600';
let baseScore = overallScore;
if (appData.industry === 'Healthcare' || appData.industry === 'Finance') baseScore -= 10;
if (appData.regulations.gdpr) baseScore -= 5;
if (baseScore < 50) { riskLevel = 'Critical'; riskColor = 'text-red-600'; }
else if (baseScore < 70) { riskLevel = 'High'; riskColor = 'text-orange-500'; }
else if (baseScore < 85) { riskLevel = 'Medium'; riskColor = 'text-yellow-500'; }
const recommendations = appData.assessmentResults.filter(r => r.value < 2).sort((a,b) => a.value - b.value);
let html = `
Risk & Compliance Dashboard
Overall Compliance
${overallScore}%
AI-Assessed Risk Level
${riskLevel}
Company Profile
Company: ${appData.companyName}
Industry: ${appData.industry}
Date: ${appData.assessmentDate}
Compliance by Category
Priority Recommendations
${recommendations.length === 0 ? '
No high-priority recommendations. All areas are fully compliant.
' : `
${recommendations.map(r => `- [${r.status}] ${r.text}
- ${r.recommendation} `).join('')}
`}
`;
getEl('dashboard-container').innerHTML = html;
// Render chart
if (complianceChart) complianceChart.destroy();
const ctx = getEl('complianceChart').getContext('2d');
complianceChart = new Chart(ctx, {
type: 'radar',
data: {
labels: assessmentData.map(s => s.category),
datasets: [{
label: 'Compliance Score (%)',
data: categoryScores,
fill: true,
backgroundColor: 'rgba(59, 130, 246, 0.2)',
borderColor: 'rgb(59, 130, 246)',
pointBackgroundColor: 'rgb(59, 130, 246)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(59, 130, 246)'
}]
},
options: {
scales: { r: { beginAtZero: true, max: 100 } },
maintainAspectRatio: false,
}
});
showTab(3);
}
async function handlePdfDownload() {
if (!appData.assessmentResults) { alert('Please generate a dashboard first.'); return; }
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.setFontSize(20);
doc.text("Cyber Law Risk & Compliance Report", 105, 20, { align: 'center' });
doc.setFontSize(10);
doc.text(`Company: ${appData.companyName} | Industry: ${appData.industry} | Date: ${appData.assessmentDate}`, 105, 30, { align: 'center' });
doc.line(14, 35, 196, 35);
// Summary scores
const overallScore = Math.round(appData.assessmentResults.reduce((s, i) => s + i.value, 0) * 100 / (appData.assessmentResults.length * 2));
doc.setFontSize(12);
doc.text(`Overall Compliance Score: ${overallScore}%`, 14, 45);
// The risk level logic should be replicated here for the PDF
let riskLevel = 'Low'; let baseScore = overallScore;
if (appData.industry === 'Healthcare' || appData.industry === 'Finance') baseScore -= 10;
if (appData.regulations.gdpr) baseScore -= 5;
if (baseScore < 50) riskLevel = 'Critical'; else if (baseScore < 70) riskLevel = 'High'; else if (baseScore < 85) riskLevel = 'Medium';
doc.text(`AI-Assessed Risk Level: ${riskLevel}`, 196, 45, {align: 'right'});
// Chart Image
const chartImage = complianceChart.toBase64Image();
doc.setFontSize(12);
doc.text("Compliance by Category", 14, 60);
doc.addImage(chartImage, 'PNG', 14, 65, 180, 90);
// Recommendations
const recommendations = appData.assessmentResults.filter(r => r.value < 2).sort((a,b) => a.value - b.value);
if (recommendations.length > 0) {
const tableBody = recommendations.map(r => [r.category, r.text, r.status, r.recommendation]);
doc.autoTable({
startY: 165,
head: [['Category', 'Issue', 'Status', 'Recommendation']],
body: tableBody,
theme: 'grid',
headStyles: { fillColor: [29, 78, 216] },
didParseCell: function(data) {
if (data.section === 'body' && data.column.index === 2) {
if (data.cell.raw === 'Non-Compliant') data.cell.styles.textColor = [220, 53, 69];
if (data.cell.raw === 'Partially Compliant') data.cell.styles.textColor = [245, 158, 11];
}
}
});
} else {
doc.text("No high-priority recommendations found. All areas are fully compliant.", 14, 170);
}
doc.setFontSize(8);
doc.setTextColor(150);
doc.text("This report was generated by the AI-Based Cyber Law Risk & Compliance Tracker.", 105, doc.internal.pageSize.height - 10, { align: 'center' });
doc.save(`Cyber-Compliance-Report-${appData.companyName.replace(/\s/g, '_')}.pdf`);
}
// --- Event Listeners & Initialization ---
nextBtn.addEventListener('click', () => {
if (!validateTab(currentTab)) return;
saveTabData();
if (currentTab < totalTabs) {
if (currentTab === totalTabs - 1) {
generateDashboard();
} else {
showTab(currentTab + 1);
}
}
});
prevBtn.addEventListener('click', () => {
if (currentTab > 1) {
saveTabData();
showTab(currentTab - 1);
}
});
getEl('download-pdf-btn').addEventListener('click', handlePdfDownload);
// Initial load
populateAssessment();
updateNavigation();
});
