GDPR Data Retention Policy Manager
Track and manage data retention schedules to ensure compliance.
No retention policies configured. Add one in the 'Policy Configuration' tab.
`; return; } policies.slice().sort((a,b) => { const dateA = calculateReviewDate(a.period, a.unit); const dateB = calculateReviewDate(b.period, b.unit); return dateA - dateB; }) .forEach(policy => { const reviewDate = calculateReviewDate(policy.period, policy.unit); const daysRemaining = calculateDaysRemaining(reviewDate); const urgency = getUrgency(daysRemaining); const card = document.createElement('div'); card.className = 'border rounded-lg p-5 shadow-sm bg-white flex flex-col'; card.innerHTML = `${policy.name}
${urgency.text}Lawful Basis: ${policy.basis}
Retention Period: ${policy.period} ${policy.unit}
Next Review/Deletion Date: ${formatDate(reviewDate)}
${daysRemaining < 0 ? Math.abs(daysRemaining) : daysRemaining}
${daysRemaining < 0 ? 'Days Overdue' : 'Days Until Review'}
No policies to manage.
`; return; } policies.forEach(policy => { const itemEl = document.createElement('div'); itemEl.className = 'flex justify-between items-center p-3 bg-gray-50 rounded-md border'; itemEl.innerHTML = `${policy.name} (${policy.period} ${policy.unit})
`; 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); } else if (newTab === tabs.length) { currentTab = 0; showTab(currentTab); } }; // --- EVENT HANDLERS --- addPolicyForm.addEventListener('submit', (e) => { e.preventDefault(); const newPolicy = { id: Date.now(), name: document.getElementById('policy-name').value, period: parseInt(document.getElementById('retention-period').value, 10), unit: document.getElementById('retention-unit').value, basis: document.getElementById('lawful-basis').value, }; policies.push(newPolicy); renderAll(); addPolicyForm.reset(); }); configList.addEventListener('click', (e) => { if (e.target.matches('.delete-btn')) { const id = parseInt(e.target.dataset.id, 10); policies = policies.filter(p => p.id !== id); renderAll(); } }); const downloadPDF = () => { const { jsPDF } = window.jspdf; const content = document.getElementById('pdf-content'); if (!content || policies.length === 0) return; const pdfTitle = document.createElement('h1'); pdfTitle.textContent = 'GDPR Data Retention Dashboard Report'; pdfTitle.className = 'text-2xl font-bold text-gray-800 text-center mb-2'; const reportDate = document.createElement('p'); reportDate.textContent = `Report generated on ${new Date().toLocaleDateString('en-US')}`; reportDate.className = 'text-sm text-gray-500 text-center mb-8'; content.prepend(reportDate); content.prepend(pdfTitle); 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('GDPR-Retention-Dashboard.pdf'); }).finally(() => { content.removeChild(pdfTitle); content.removeChild(reportDate); }); }; // --- INITIALIZATION --- const renderAll = () => { renderDashboard(); renderConfig(); }; prevBtn.addEventListener('click', () => nextPrev(-1)); nextBtn.addEventListener('click', () => nextPrev(1)); downloadPdfBtn.addEventListener('click', downloadPDF); tabNavs.forEach((nav, index) => { nav.addEventListener('click', () => { currentTab = index; showTab(index); }); }); showTab(currentTab); renderAll(); });