Online Work Progress Visualization Tool

Work Progress Visualization Tool

Track project completion, manage tasks, and visualize your team's progress.

Project Dashboard

Configure Projects & Tasks

Projects

Add a Task

Project Progress Report

No projects yet. Add one in the 'Data Configuration' tab.

`; return; } projectsView.innerHTML = data.projects.map(p => { const progress = calculateProgress(p); return `

${p.name}

${progress.completed}/${progress.total} Tasks
`; }).join(''); }; const renderProjectList = () => { const list = getElement('project-list'); list.innerHTML = data.projects.map(p => `
${p.name}
`).join(''); }; const renderProjectDropdown = () => { const select = getElement('task-project'); select.innerHTML = data.projects.map(p => ``).join(''); }; const renderReview = () => { const area = getElement('review-area'); if (data.projects.length === 0) { area.innerHTML = `

No data to review.

`; return; } area.innerHTML = data.projects.map(p => { const progress = calculateProgress(p); return `

${p.name} (${progress.percent.toFixed(0)}% Complete)

${p.tasks.length > 0 ? p.tasks.map(t => { const isOverdue = t.status !== 'Completed' && dayjs(t.dueDate).isBefore(dayjs().startOf('day')); return `` }).join('') : ``}
TaskStatusDue Date
${t.desc} ${t.status} ${dayjs(t.dueDate).format('MMM D, YYYY')}
No tasks for this project.
`; }).join(''); }; // --- Event Handlers --- const handleAddProject = (e) => { e.preventDefault(); const input = getElement('project-name'); if (input.value.trim()) { data.projects.push({ id: Date.now(), name: input.value.trim(), tasks: [] }); input.value = ''; saveData(); renderAll(); } }; const handleDeleteProject = (e) => { if (e.target.classList.contains('delete-project-btn')) { const id = parseInt(e.target.dataset.id); data.projects = data.projects.filter(p => p.id !== id); saveData(); renderAll(); } }; const handleAddTask = (e) => { e.preventDefault(); const projectId = parseInt(getElement('task-project').value); const desc = getElement('task-desc').value; const status = getElement('task-status').value; const dueDate = getElement('task-due-date').value; const project = data.projects.find(p => p.id === projectId); if (project && desc && dueDate) { project.tasks.push({ id: Date.now(), desc, status, dueDate }); saveData(); renderAll(); e.target.reset(); } else if (!project) { // Simple user feedback if no project is selected/exists alert("Please select a valid project."); } }; const generatePDF = () => { const content = getElement('pdf-content'); if (!content) return; content.classList.add('pdf-mode'); html2canvas(content, { scale: 2 }).then(canvas => { content.classList.remove('pdf-mode'); const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const ratio = canvas.width / canvas.height; const pdfImgWidth = pdfWidth - 20; const pdfImgHeight = pdfImgWidth / ratio; pdf.addImage(imgData, 'PNG', 10, 10, pdfImgWidth, pdfImgHeight); pdf.save('Work_Progress_Report.pdf'); }); }; // --- Navigation & Tab Logic --- let currentTab = 1; tabs.forEach(tab => tab.addEventListener('click', () => { currentTab = parseInt(tab.dataset.tab); tabs.forEach(t => t.classList.remove('active')); tab.classList.add('active'); tabContents.forEach(c => c.classList.remove('active')); getElement(`tab-${currentTab}`).classList.add('active'); if (currentTab === 3) renderReview(); // Refresh review tab on view })); // --- Initial Setup & Event Listeners --- getElement('add-project-form').addEventListener('submit', handleAddProject); getElement('project-list').addEventListener('click', handleDeleteProject); getElement('add-task-form').addEventListener('submit', handleAddTask); getElement('download-pdf-btn').addEventListener('click', generatePDF); loadData(); renderAll(); });
Scroll to Top