Amalesh - Summary Dashboard: Create a line chart showing Weekly Progress

[Amalesh-A]

Description

Related PRS (if any):

This frontend PR is related to the #1878 backend PR.
To test this frontend PR you need to checkout the #1878 backend PR.

Main changes explained:

• Added Weekly Progress section to the Summary Dashboard with title + date range subtitle.
• Implemented 4 KPI tiles sourced from GET /api/tasks/summary:
  • Total Tasks
  • Tasks Completed This Week
  • Open Tasks
  • Average Completion Time (days)
• Implemented Weekly Progress line chart (Recharts/Chart.js) sourced from GET /api/tasks/trends:
  • X-axis: week start dates (auto-adjusts to 4/8/12)
  • Y-axis: tasks completed (gridlines enabled)
  • Tooltip on hover (week + completed count)
  • Legend shows a single series: “This Week”
• Added filters:
  • Start/End date pickers (default: last 8 weeks ending today)
  • Preset buttons: Last 4 Weeks / Last 8 Weeks / Last 12 Weeks
• Added validations:
  • start <= end
  • date range cannot exceed 12 weeks (84 days) (frontend warning + backend 400)
• Added Project Status Bar to the dashboard layout.

How to test:

1. check into current branch: git checkout Amalesh-WeeklyProgress-LineChart
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as an user
5. navigate to: http://localhost:3000/weeklyprogress
6. Verify KPI tiles:

• Total Tasks / Tasks Completed This Week / Open Tasks / Avg Completion Time (days)
• Confirm responsive behavior (row on desktop, stacked on mobile)

7. Verify Weekly Progress chart:

• Title “Weekly Progress” is centered
• Tooltip shows week + tasks completed on hover
• Legend shows only “This Week”

Screenshots or videos of changes:

LineChartWeeklyProgress.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	3679c25
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/695f4699c243d000086dddbe
😎 Deploy Preview	https://deploy-preview-4320--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
23 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[sonarqubecloud]

Quality Gate passed

Issues
17 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud