`; dashboardList.appendChild(itemEl); }); }; const renderConfig = () => { configList.innerHTML = ''; if (complianceItems.length === 0) { configList.innerHTML = `

No compliance areas defined.

`; return; } complianceItems.forEach(item => { const itemEl = document.createElement('div'); itemEl.className = 'flex justify-between items-center p-3 bg-gray-50 rounded-md border'; itemEl.innerHTML = `

${item.title}

Delete `; configList.appendChild(itemEl); }); }; // --- TAB NAVIGATION --- const showTab = (tabIndex) => { tabs.forEach((tab, index) => tab.classList.toggle('hidden', index !== tabIndex)); tabNavs.forEach((nav, index) => nav.classList.toggle('active', index === tabIndex)); prevBtn.style.visibility = tabIndex === 0 ? 'hidden' : 'visible'; nextBtn.textContent = tabIndex === tabs.length - 1 ? 'Go to Dashboard' : 'Next'; }; const nextPrev = (direction) => { const newTab = currentTab + direction; if (newTab >= 0 && newTab < tabs.length) { currentTab = newTab; showTab(currentTab); } }; // --- EVENT HANDLERS --- dashboardList.addEventListener('change', (e) => { if (e.target.matches('select')) { const id = parseInt(e.target.dataset.id); const newStatus = e.target.value; const item = complianceItems.find(i => i.id === id); if (item) { item.status = newStatus; renderDashboard(); // Re-render to update badge color } } }); dashboardList.addEventListener('input', (e) => { if (e.target.matches('textarea')) { const id = parseInt(e.target.dataset.id); const newNotes = e.target.value; const item = complianceItems.find(i => i.id === id); if (item) item.notes = newNotes; } }); configList.addEventListener('click', (e) => { if (e.target.matches('.delete-btn')) { const id = parseInt(e.target.dataset.id); complianceItems = complianceItems.filter(item => item.id !== id); renderAll(); } }); addItemForm.addEventListener('submit', (e) => { e.preventDefault(); const titleInput = document.getElementById('item-title'); const descriptionInput = document.getElementById('item-description'); const newItem = { id: Date.now(), title: titleInput.value, description: descriptionInput.value, status: 'Not Compliant', notes: '' }; complianceItems.push(newItem); renderAll(); addItemForm.reset(); }); const downloadPDF = () => { const { jsPDF } = window.jspdf; const content = document.getElementById('pdf-content'); if (!content) return; const selects = content.querySelectorAll('select'); const textareas = content.querySelectorAll('textarea'); selects.forEach(el => el.classList.add('pdf-hide')); textareas.forEach(el => el.classList.add('pdf-hide')); const pdfTitle = document.createElement('h1'); pdfTitle.textContent = 'International Commercial Law Compliance Report'; pdfTitle.className = 'text-2xl font-bold text-gray-800 text-center mb-6'; content.prepend(pdfTitle); const statusDisplays = []; complianceItems.forEach(item => { const select = content.querySelector(`#status-${item.id}`); const textarea = content.querySelector(`#notes-${item.id}`); if (select && textarea) { const statusDisplay = document.createElement('div'); statusDisplay.innerHTML = `${item.status}`; select.parentNode.appendChild(statusDisplay); const notesDisplay = document.createElement('p'); notesDisplay.className = 'mt-1 text-sm text-gray-600 border-t pt-2'; notesDisplay.textContent = item.notes || 'No notes.'; textarea.parentNode.appendChild(notesDisplay); statusDisplays.push({statusDisplay, notesDisplay}); } }); html2canvas(content, { scale: 2, backgroundColor: '#ffffff', useCORS: true }) .then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const canvasWidth = canvas.width; const canvasHeight = canvas.height; const ratio = canvasWidth / canvasHeight; const imgWidth = pdfWidth - 20; const imgHeight = imgWidth / ratio; pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight); pdf.save('Compliance-Dashboard-Report.pdf'); }).finally(() => { // Cleanup content.removeChild(pdfTitle); selects.forEach(el => el.classList.remove('pdf-hide')); textareas.forEach(el => el.classList.remove('pdf-hide')); statusDisplays.forEach(els => { els.statusDisplay.remove(); els.notesDisplay.remove(); }); }); }; // --- INITIALIZATION --- const renderAll = () => { renderDashboard(); renderConfig(); }; prevBtn.addEventListener('click', () => nextPrev(-1)); nextBtn.addEventListener('click', () => { if(nextBtn.textContent.includes('Dashboard')){ currentTab = 0; showTab(0); } else { nextPrev(1); } }); downloadPdfBtn.addEventListener('click', downloadPDF); tabNavs[0].addEventListener('click', () => { currentTab = 0; showTab(0); }); tabNavs[1].addEventListener('click', () => { currentTab = 1; showTab(1); }); showTab(currentTab); renderAll(); });