Work Hour Optimization Dashboard

Log New Activity

Date

Activity Name/Description

Logged Activities

Date	Activity	Category	Start	End	Duration (min)	Value	Actions

Note: Activity data is stored in your browser's LocalStorage. Clearing it here will remove all logged activities permanently from this browser.

Analysis Filters

Start Date

End Date

Log activities and select a date range to view the dashboard.

`; // Key Metrics (extract from generated dashboard) const metricsCardContent = dashboardDisplayElement.querySelector('.whod-metrics-card'); if(metricsCardContent) pdfHTML += `

Key Metrics

${metricsCardContent.innerHTML}`; // Charts (as images) if (whodChartCategoryInstance) { pdfHTML += `

Time Allocation by Category

`; } if (whodChartValueInstance) { pdfHTML += `

Time Allocation by Perceived Value

`; } // Insights const insightsCardContent = dashboardDisplayElement.querySelector('.whod-insights-card'); if(insightsCardContent) pdfHTML += `

${insightsCardContent.innerHTML}`; // Optional: Detailed Activity Log for the period const filteredActivities = whodLoggedActivities.filter(act => { const actDateOnly = act.dateObj.toISOString().split('T')[0]; return actDateOnly >= analysisStartDate && actDateOnly <= analysisEndDate; }); if (filteredActivities.length > 0) { pdfHTML += `

Detailed Activity Log (${analysisStartDate} to ${analysisEndDate})

`; pdfHTML += ``; filteredActivities.forEach(act => { pdfHTML += ``; }); pdfHTML += `

Date	Activity	Category	Start	End	Duration (min)	Value
${act.dateObj.toLocaleDateString()}	${act.name}	${act.category}	${act.startTime}	${act.endTime}	${act.duration}	${act.value}

`; } const pdfContainer = document.getElementById('whod-report-content-for-pdf'); pdfContainer.innerHTML = pdfHTML; // Re-apply styles for value tags in PDF dynamically pdfContainer.querySelectorAll('.whod-value-tag').forEach(tag => { if (tag.classList.contains('value-High')) { tag.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--value-high-bg'); tag.style.color = getComputedStyle(document.documentElement).getPropertyValue('--value-high-text');} else if (tag.classList.contains('value-Medium')) { tag.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--value-medium-bg'); tag.style.color = getComputedStyle(document.documentElement).getPropertyValue('--value-medium-text');} else if (tag.classList.contains('value-Low')) { tag.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--value-low-bg'); tag.style.color = getComputedStyle(document.documentElement).getPropertyValue('--value-low-text');} }); const opt = { margin: [0.5, 0.4, 0.5, 0.4], filename: `WorkHour_Optimization_Dashboard_${analysisStartDate}_to_${analysisEndDate}.pdf`, image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2, useCORS: true, logging: false, scrollX:0, scrollY: -window.scrollY, windowWidth: pdfContainer.scrollWidth + 100 }, // Ensure content fits jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }, pagebreak: { mode: ['avoid-all', 'css', 'legacy'] } }; html2pdf().from(pdfContainer).set(opt).save().then(() => { pdfContainer.innerHTML = ''; }).catch(err => { console.error("Error generating PDF:", err); pdfContainer.innerHTML = ''; alert("An error occurred while generating the PDF. Check console for details."); }); }