`;
configList.appendChild(item);
});
};
const renderAll = () => {
renderDashboard();
renderConfigList();
};
// --- FORM & DATA HANDLING ---
const clearForm = () => {
taskForm.reset();
taskIdInput.value = '';
};
const handleFormSubmit = (e) => {
e.preventDefault();
const id = taskIdInput.value ? parseInt(taskIdInput.value) : Date.now();
const taskData = {
id: id,
name: taskNameInput.value,
assignee: taskAssigneeInput.value,
project: taskProjectInput.value,
dueDate: taskDueDateInput.value,
status: taskStatusInput.value,
priority: taskPriorityInput.value,
};
const existingIndex = tasks.findIndex(t => t.id === id);
if (existingIndex > -1) {
tasks[existingIndex] = taskData;
} else {
tasks.push(taskData);
}
renderAll();
clearForm();
};
const handleConfigListClick = (e) => {
const editBtn = e.target.closest('.edit-btn');
const deleteBtn = e.target.closest('.delete-btn');
if (editBtn) {
const id = parseInt(editBtn.dataset.id);
const task = tasks.find(t => t.id === id);
if (task) {
taskIdInput.value = task.id;
taskNameInput.value = task.name;
taskAssigneeInput.value = task.assignee;
taskProjectInput.value = task.project;
taskDueDateInput.value = task.dueDate;
taskStatusInput.value = task.status;
taskPriorityInput.value = task.priority;
}
} else if (deleteBtn) {
const id = parseInt(deleteBtn.dataset.id);
tasks = tasks.filter(t => t.id !== id);
renderAll();
if (taskIdInput.value == id) {
clearForm();
}
}
};
// --- TAB NAVIGATION ---
const switchTab = (tabName) => {
const isDashboard = tabName === 'dashboard';
tabDashboard.classList.toggle('active', isDashboard);
tabDashboard.classList.toggle('inactive', !isDashboard);
tabConfig.classList.toggle('active', !isDashboard);
tabConfig.classList.toggle('inactive', isDashboard);
contentDashboard.classList.toggle('hidden', !isDashboard);
contentConfig.classList.toggle('hidden', isDashboard);
prevBtn.disabled = isDashboard;
nextBtn.disabled = !isDashboard;
};
// --- PDF DOWNLOAD ---
const handleDownloadPdf = () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF({ orientation: 'landscape' });
doc.setFontSize(18);
doc.text("Remote Team Task Dashboard", 14, 22);
doc.setFontSize(11);
doc.setTextColor(100);
doc.text(`Report Generated: ${new Date().toLocaleDateString('en-US')}`, 14, 30);
const tableData = tasks.map(t => [t.name, t.assignee, t.project, formatDate(t.dueDate), t.status, t.priority]);
doc.autoTable({
startY: 35,
head: [['Task', 'Assigned To', 'Project', 'Due Date', 'Status', 'Priority']],
body: tableData,
theme: 'grid',
headStyles: { fillColor: [79, 70, 229] },
});
doc.save('Task-Dashboard.pdf');
};
// --- EVENT LISTENERS ---
tabDashboard.addEventListener('click', () => switchTab('dashboard'));
tabConfig.addEventListener('click', () => switchTab('config'));
prevBtn.addEventListener('click', () => switchTab('dashboard'));
nextBtn.addEventListener('click', () => switchTab('config'));
taskForm.addEventListener('submit', handleFormSubmit);
clearFormBtn.addEventListener('click', clearForm);
configList.addEventListener('click', handleConfigListClick);
downloadPdfBtn.addEventListener('click', handleDownloadPdf);
// --- INITIALIZATION ---
const initializeTool = () => {
const today = new Date();
const addDays = (d, days) => {
const date = new Date(d);
date.setDate(date.getDate() + days);
return date.toISOString().split('T')[0];
};
tasks = [
{ id: 1, name: 'Develop login module', assignee: 'Alice Johnson', project: 'Mobile App Revamp', dueDate: addDays(today, 5), status: 'In Progress', priority: 'High' },
{ id: 2, name: 'Create marketing assets for Q4', assignee: 'Bob Williams', project: 'Fall Campaign', dueDate: addDays(today, 12), status: 'Not Started', priority: 'Medium' },
{ id: 3, name: 'Fix API authentication bug', assignee: 'Charlie Brown', project: 'Backend Maintenance', dueDate: addDays(today, 2), status: 'In Progress', priority: 'High' },
{ id: 4, name: 'User testing for new checkout flow', assignee: 'Diana Prince', project: 'Website Redesign', dueDate: addDays(today, 7), status: 'Completed', priority: 'Medium' },
{ id: 5, name: 'Draft technical documentation', assignee: 'Alice Johnson', project: 'Mobile App Revamp', dueDate: addDays(today, 15), status: 'Not Started', priority: 'Low' },
{ id: 6, name: 'Server migration planning', assignee: 'Eve Adams', project: 'Infrastructure Upgrade', dueDate: addDays(today, 20), status: 'Blocked', priority: 'High' },
];
renderAll();
switchTab('dashboard');
};
initializeTool();
});
