Compliance Items Summary
${complianceItems.map(item => `
${item.name}
${item.status}
`).join('')}
`;
dashboardContainer.innerHTML = dashboardHtml;
downloadBtnContainer.classList.remove('hidden');
const ctx = document.getElementById('statusChart').getContext('2d');
if (myChart) myChart.destroy();
myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Compliant', 'Non-Compliant', 'Pending Review', 'N/A'],
datasets: [{ data: [compliant, nonCompliant, pending, na], backgroundColor: ['#10b981', '#ef4444', '#f59e0b', '#d1d5db'] }]
},
options: { responsive: true, plugins: { legend: { position: 'bottom' } } }
});
};
// --- UI & NAVIGATION ---
const updateNavButtons = () => {
prevBtn.disabled = currentTab === '1';
nextBtn.disabled = currentTab === '3';
prevBtn.classList.toggle('opacity-50', prevBtn.disabled);
nextBtn.classList.toggle('opacity-50', nextBtn.disabled);
};
window.switchTab = (tabId) => {
currentTab = tabId;
if (currentTab === '2') initializeChecklist();
if (currentTab === '3') renderDashboard();
tabs.forEach(id => {
document.getElementById(`tab-content-${id}`).classList.toggle('hidden', id !== currentTab);
document.getElementById(`tab-btn-${id}`).classList.toggle('tab-active', id === currentTab);
document.getElementById(`tab-btn-${id}`).classList.toggle('tab-inactive', id !== currentTab);
});
updateNavButtons();
};
const navigateTabs = (direction) => {
const currentIndex = tabs.indexOf(currentTab);
let nextIndex = currentIndex + direction;
if (nextIndex >= 0 && nextIndex < tabs.length) switchTab(tabs[nextIndex]);
};
// --- PDF GENERATION ---
downloadPdfBtn.addEventListener('click', () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const vendorName = document.getElementById('vendorName').value || 'N/A';
const contractId = document.getElementById('contractId').value || 'N/A';
doc.setFontSize(18);
doc.text("Vendor Contract Compliance Report", 14, 22);
doc.setFontSize(11);
doc.setTextColor(100);
doc.text(`Vendor: ${vendorName}`, 14, 30);
doc.text(`Contract ID: ${contractId}`, 14, 36);
doc.text(`Report Date: ${new Date().toLocaleDateString()}`, 120, 36);
const tableData = complianceItems.map(item => [item.category, item.name, item.status, item.notes]);
doc.autoTable({
head: [['Category', 'Checklist Item', 'Status', 'Notes']],
body: tableData,
startY: 45,
theme: 'grid',
headStyles: { fillColor: [45, 102, 193] },
didParseCell: function (data) {
if (data.section === 'body' && data.column.index === 2) {
switch(data.cell.raw) {
case 'Compliant': data.cell.styles.fillColor = '#dcfce7'; data.cell.styles.textColor = '#166534'; break;
case 'Non-Compliant': data.cell.styles.fillColor = '#fee2e2'; data.cell.styles.textColor = '#991b1b'; break;
case 'Pending Review': data.cell.styles.fillColor = '#fef3c7'; data.cell.styles.textColor = '#92400e'; break;
}
}
}
});
doc.save(`Compliance_Report_${vendorName.replace(/\s/g, '_')}.pdf`);
});
// --- INITIALIZATION ---
updateNavButtons();
lucide.createIcons();
prevBtn.addEventListener('click', () => navigateTabs(-1));
nextBtn.addEventListener('click', () => navigateTabs(1));
});
