${task.priority}
`;
upcomingList.appendChild(li);
});
}
};
const resetForm = () => {
taskForm.reset();
form.id.value = '';
form.title.textContent = 'Add New Task';
form.addUpdateBtn.textContent = 'Add Task';
form.cancelEditBtn.classList.add('hidden');
};
// --- Global App Object for onclick handlers ---
window.app = {
editTask: (id) => {
const task = tasks.find(t => t.id === id);
if (!task) return;
form.id.value = task.id;
form.name.value = task.name;
form.assignee.value = task.assignee;
form.dueDate.value = task.dueDate;
form.priority.value = task.priority;
form.status.value = task.status;
form.title.textContent = 'Edit Task';
form.addUpdateBtn.textContent = 'Update Task';
form.cancelEditBtn.classList.remove('hidden');
form.name.focus();
},
deleteTask: (id) => {
if (confirm('Are you sure you want to delete this task?')) {
tasks = tasks.filter(t => t.id !== id);
renderAll();
}
}
};
// --- Event Handlers ---
taskForm.addEventListener('submit', (e) => {
e.preventDefault();
const id = form.id.value;
const taskData = {
name: form.name.value,
assignee: form.assignee.value,
dueDate: form.dueDate.value,
priority: form.priority.value,
status: form.status.value
};
if (id) { // Update
const index = tasks.findIndex(t => t.id === id);
tasks[index] = { ...tasks[index], ...taskData };
} else { // Add
tasks.push({ ...taskData, id: `task_${Date.now()}` });
}
renderAll();
resetForm();
});
form.cancelEditBtn.addEventListener('click', resetForm);
projectNameInput.addEventListener('input', (e) => {
projectName = e.target.value || "Untitled Project";
projectTitleHeader.textContent = projectName;
});
// --- Tab Logic ---
const switchTab = (tabId) => {
currentTab = tabId;
tabContents.forEach(content => content.classList.remove('active'));
tabButtons.forEach(button => button.classList.remove('active'));
document.getElementById(tabId).classList.add('active');
document.querySelector(`[data-tab="${tabId}"]`).classList.add('active');
updateNavButtons();
};
const updateNavButtons = () => {
prevBtn.disabled = currentTab === 'dashboard';
nextBtn.disabled = currentTab === 'config';
};
tabButtons.forEach(button => button.addEventListener('click', () => switchTab(button.dataset.tab)));
nextBtn.addEventListener('click', () => { if (currentTab === 'dashboard') switchTab('config'); });
prevBtn.addEventListener('click', () => { if (currentTab === 'config') switchTab('dashboard'); });
// --- PDF Generation ---
downloadPdfBtn.addEventListener('click', () => {
const { jsPDF } = window.jspdf;
const pdf = new jsPDF('p', 'pt', 'a4');
const margin = 40;
let y = margin;
// Title
pdf.setFontSize(22);
pdf.setFont('helvetica', 'bold');
pdf.text(projectName, pdf.internal.pageSize.getWidth() / 2, y, { align: 'center' });
y += 20;
pdf.setFontSize(12);
pdf.setFont('helvetica', 'normal');
pdf.text(`Status Report - ${new Date().toLocaleDateString()}`, pdf.internal.pageSize.getWidth() / 2, y, { align: 'center' });
y += 40;
// Key Metrics
const progress = document.getElementById('overall-progress-text').textContent;
pdf.text(`Overall Progress: ${progress}`, margin, y);
y += 20;
// Chart Image
const chartCanvas = document.getElementById('status-chart');
html2canvas(chartCanvas.parentElement, { scale: 2 }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
pdf.addImage(imgData, 'PNG', margin, y, 200, 200);
// Task Table
const head = [['Task', 'Assignee', 'Due Date', 'Priority', 'Status']];
const body = tasks.map(t => [t.name, t.assignee, t.dueDate, t.priority, t.status]);
pdf.autoTable({
head: head,
body: body,
startY: y,
theme: 'grid',
margin: { left: margin + 220 },
headStyles: { fillColor: [59, 130, 246] },
});
pdf.save(`${projectName.replace(/\s+/g, '_')}_Report.pdf`);
});
});
// --- Initialization ---
const init = () => {
// Sample Data (USA-centric)
projectNameInput.value = "Website Redesign Project";
projectName = "Website Redesign Project";
projectTitleHeader.textContent = projectName;
tasks = [
{ id: 'task_1', name: 'Draft new homepage mockups', assignee: 'Alice', dueDate: '2025-09-15', priority: 'High', status: 'In Progress' },
{ id: 'task_2', name: 'Develop user authentication flow', assignee: 'Bob', dueDate: '2025-09-20', priority: 'High', status: 'To Do' },
{ id: 'task_3', name: 'Set up staging server on AWS', assignee: 'Charlie', dueDate: '2025-09-12', priority: 'Medium', status: 'Done' },
{ id: 'task_4', name: 'Write API documentation', assignee: 'Alice', dueDate: '2025-09-25', priority: 'Medium', status: 'To Do' },
{ id: 'task_5', name: 'User Acceptance Testing', assignee: 'QA Team', dueDate: '2025-09-30', priority: 'Low', status: 'To Do' }
];
switchTab('dashboard');
renderAll();
};
init();
});
