`).join('');
} else {
deadlinesContainer.innerHTML = `
No deadlines in the next 30 days.
`;
}
};
const renderTasksTable = () => {
const table = document.getElementById('tasks-table');
let tableHtml = `
| Task Name |
Owner |
Due Date |
Status |
`;
tasks.sort((a,b) => new Date(a.dueDate) - new Date(b.dueDate)).forEach(task => {
tableHtml += `
| ${task.name} |
${task.owner} |
${formatDate(task.dueDate)} |
${getStatusBadge(task.status)} |
`;
});
tableHtml += '';
table.innerHTML = tableHtml;
};
const renderConfigList = () => {
configTasksList.innerHTML = tasks.map(task => `
${task.name}
${task.owner} - Due: ${formatDate(task.dueDate)}
`).join('');
};
const renderAll = () => {
renderDashboard();
renderTasksTable();
renderConfigList();
};
// --- TAB & NAVIGATION LOGIC ---
const switchTab = (index) => {
if (index < 0 || index >= tabs.length) return;
currentTabIndex = index;
tabs.forEach((tab, i) => {
document.getElementById(tab.dataset.tabId).classList.toggle('hidden', i !== currentTabIndex);
tab.classList.toggle('active', i === currentTabIndex);
});
updateNavButtons();
};
const updateNavButtons = () => {
prevBtn.disabled = currentTabIndex === 0;
nextBtn.disabled = currentTabIndex === tabs.length - 1;
};
// --- FORM & DATA LOGIC ---
const resetForm = () => {
taskForm.reset();
taskIdInput.value = '';
formTitle.textContent = 'Add New Task';
cancelEditBtn.classList.add('hidden');
};
taskForm.addEventListener('submit', (e) => {
e.preventDefault();
const id = taskIdInput.value;
const taskData = {
name: document.getElementById('task-name').value,
owner: document.getElementById('task-owner').value,
dueDate: document.getElementById('task-due-date').value,
status: document.getElementById('task-status').value
};
if (id) { // Editing
const index = tasks.findIndex(t => t.id == id);
tasks[index] = { ...tasks[index], ...taskData };
} else { // Adding
taskData.id = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 1;
tasks.push(taskData);
}
renderAll();
resetForm();
});
configTasksList.addEventListener('click', (e) => {
const target = e.target.closest('button');
if (!target) return;
const id = target.dataset.id;
if (target.classList.contains('edit-btn')) {
const taskToEdit = tasks.find(t => t.id == id);
if (taskToEdit) {
taskIdInput.value = taskToEdit.id;
document.getElementById('task-name').value = taskToEdit.name;
document.getElementById('task-owner').value = taskToEdit.owner;
document.getElementById('task-due-date').value = taskToEdit.dueDate;
document.getElementById('task-status').value = taskToEdit.status;
formTitle.textContent = 'Edit Task';
cancelEditBtn.classList.remove('hidden');
window.scrollTo(0, 0);
}
}
if (target.classList.contains('delete-btn')) {
tasks = tasks.filter(t => t.id != id);
renderAll();
}
});
cancelEditBtn.addEventListener('click', resetForm);
// --- PDF GENERATION ---
const generatePDF = () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' });
const margin = 15;
const pageWidth = doc.internal.pageSize.getWidth();
let yPos = margin;
doc.setFontSize(20).setFont('helvetica', 'bold');
doc.text('Corporate Compliance Report', pageWidth / 2, yPos, { align: 'center' });
yPos += 8;
doc.setFontSize(10).setFont('helvetica', 'normal');
doc.text(new Date().toLocaleDateString('en-US', { dateStyle: 'long'}), pageWidth / 2, yPos, { align: 'center' });
yPos += 15;
// Summary KPIs
doc.setFontSize(14).setFont('helvetica', 'bold');
doc.text('Compliance Summary', margin, yPos);
yPos += 8;
const summaryKpis = [
['Overall Compliance:', document.querySelector('.doughnut-chart-text').textContent],
['Pending Tasks:', document.getElementById('pending-tasks-kpi').textContent],
['Tasks Overdue:', document.getElementById('overdue-tasks-kpi').textContent],
['Tasks Completed:', document.getElementById('completed-tasks-kpi').textContent]
];
doc.autoTable({
startY: yPos,
body: summaryKpis,
theme: 'plain',
styles: { fontSize: 11 },
columnStyles: { 0: { fontStyle: 'bold' } }
});
yPos = doc.lastAutoTable.finalY + 15;
// Full Task List
const tableBody = tasks.map(t => [t.name, t.owner, formatDate(t.dueDate), t.status]);
doc.setFontSize(14).setFont('helvetica', 'bold');
doc.text('Detailed Task List', margin, yPos);
doc.autoTable({
startY: yPos + 8,
head: [['Task Name', 'Owner', 'Due Date', 'Status']],
body: tableBody,
theme: 'grid',
headStyles: { fillColor: [37, 99, 235] },
});
doc.save(`Compliance_Report_${new Date().toISOString().split('T')[0]}.pdf`);
};
// --- EVENT LISTENERS ---
tabs.forEach((tab, index) => tab.addEventListener('click', () => switchTab(index)));
prevBtn.addEventListener('click', () => switchTab(currentTabIndex - 1));
nextBtn.addEventListener('click', () => switchTab(currentTabIndex + 1));
downloadPdfBtn.addEventListener('click', generatePDF);
// --- INITIALIZATION ---
switchTab(0);
renderAll();
});
