`;
managerList.appendChild(el);
});
};
const renderAll = () => {
renderDashboard();
renderManagerList();
};
// --- TAB NAVIGATION & FORM HANDLING ---
const switchTab = (tabName) => {
const isDashboard = tabName === 'dashboard';
tabDashboard.classList.toggle('active', isDashboard);
tabDashboard.classList.toggle('inactive', !isDashboard);
tabManager.classList.toggle('active', !isDashboard);
tabManager.classList.toggle('inactive', isDashboard);
contentDashboard.classList.toggle('hidden', !isDashboard);
contentManager.classList.toggle('hidden', isDashboard);
prevBtn.disabled = isDashboard;
nextBtn.disabled = !isDashboard;
};
const clearForm = () => {
deadlineForm.reset();
deadlineIdInput.value = '';
};
const handleFormSubmit = (e) => {
e.preventDefault();
const id = deadlineIdInput.value ? parseInt(deadlineIdInput.value) : Date.now();
const deadlineData = {
id: id,
name: deadlineNameInput.value,
category: deadlineCategoryInput.value,
dueDateTime: `${deadlineDateInput.value}T${deadlineTimeInput.value}`
};
const existingIndex = deadlines.findIndex(d => d.id === id);
if (existingIndex > -1) {
deadlines[existingIndex] = deadlineData;
} else {
deadlines.push(deadlineData);
}
renderAll();
clearForm();
};
const handleManagerListClick = (e) => {
const editBtn = e.target.closest('.edit-btn');
const deleteBtn = e.target.closest('.delete-btn');
if (editBtn) {
const id = parseInt(editBtn.dataset.id);
const item = deadlines.find(d => d.id === id);
if (item) {
const [date, time] = item.dueDateTime.split('T');
deadlineIdInput.value = item.id;
deadlineNameInput.value = item.name;
deadlineCategoryInput.value = item.category;
deadlineDateInput.value = date;
deadlineTimeInput.value = time;
}
} else if (deleteBtn) {
const id = parseInt(deleteBtn.dataset.id);
deadlines = deadlines.filter(d => d.id !== id);
renderAll();
if (deadlineIdInput.value == id) clearForm();
}
};
const handleDownloadPdf = () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF({ orientation: 'landscape' });
doc.setFontSize(18);
doc.text("Deadline & Reminder List", 14, 22);
doc.setFontSize(11);
doc.setTextColor(100);
doc.text(`Generated on: ${new Date().toLocaleDateString('en-US')}`, 14, 30);
const sorted = getSortedDeadlines();
const tableData = sorted.map(d => [d.name, d.category, formatDateTime(d.dueDateTime, 'long')]);
doc.autoTable({
startY: 35,
head: [['Deadline / Task', 'Project / Category', 'Due Date & Time']],
body: tableData,
theme: 'grid',
headStyles: { fillColor: [79, 70, 229] },
});
doc.save('Deadline-Tracker.pdf');
};
// --- EVENT LISTENERS ---
tabDashboard.addEventListener('click', () => switchTab('dashboard'));
tabManager.addEventListener('click', () => switchTab('manager'));
prevBtn.addEventListener('click', () => switchTab('dashboard'));
nextBtn.addEventListener('click', () => switchTab('manager'));
deadlineForm.addEventListener('submit', handleFormSubmit);
clearFormBtn.addEventListener('click', clearForm);
managerList.addEventListener('click', handleManagerListClick);
downloadPdfBtn.addEventListener('click', handleDownloadPdf);
// --- INITIALIZATION ---
const initializeTool = () => {
const now = new Date('2025-08-14T21:13:00'); // Based on user-provided current time
const addTime = (date, hours) => new Date(date.getTime() + hours * 60 * 60 * 1000);
const formatForInput = (date) => {
const iso = date.toISOString();
return [iso.split('T')[0], iso.split('T')[1].substring(0, 5)];
};
const [date1, time1] = formatForInput(addTime(now, 12)); // Due in 12 hours
const [date2, time2] = formatForInput(addTime(now, 48)); // Due in 2 days
const [date3, time3] = formatForInput(addTime(now, 168)); // Due in 1 week
const [date4, time4] = formatForInput(addTime(now, -24)); // Overdue by 1 day
deadlines = [
{ id: 1, name: 'Grant Application Submission', category: 'Federal Grants', dueDateTime: `${date1}T${time1}` },
{ id: 2, name: 'Renew Business License', category: 'State Compliance', dueDateTime: `${date2}T${time2}` },
{ id: 3, name: 'Pay Quarterly Estimated Taxes', category: 'IRS', dueDateTime: `${date3}T${time3}`},
{ id: 4, name: 'File Annual Report', category: 'State Compliance', dueDateTime: `${date4}T${time4}`},
];
renderAll();
switchTab('dashboard');
};
initializeTool();
});
