Juhitha create injury trend chart

[Juhitha-Reddy]

Frontend PR — Injury Trend Line Chart (Phase 2)

Description

Implements the “Injury Trend Over Time” line chart for Phase 2 Summary Dashboard. Adds Project and Date range filters, dark mode styling, and responsive layout. Integrates with backend APIs to fetch monthly injury counts by severity.

Implements #Phase2-InjuryTrend

Related PRs (if any):

This frontend PR relies on the backend Injury APIs. Please test with the backend PR below.

• Backend PR: “Injury Trend APIs + POST injuries” (see Backend PR section)

Main changes explained:

• Create InjuryTrendChart component with Recharts multi-line chart:
  • Lines: Serious (red), Medium (orange), Low (green)
  • Legend, axis labels, and data labels
  • Dark mode theming (grid, tooltip, legend, labels)
  • Responsive rendering
• Filters:
  • Project dropdown (pulls projects with injuries)
  • Date range picker (YYYY-MM-DD)
• Data integration:
  • Fetches trend data from the backend by project and date range
  • Maps backend series { months, serious, medium, low } to chart data
• Dark mode:
  • Full-page background for this page in dark mode (#1B2A41)
  • Themed inputs (react-select and react-datepicker)
• UI polish:
  • Equal-sized Project and Date range controls (CSS grid), consistent heights and borders in light/dark modes

How to test:

1. Check out this branch and the backend PR branch (see Backend PR).
2. Frontend:
   • npm install
   • Ensure env points to backend API, e.g. REACT_APP_APIENDPOINT=http://localhost:4500/api
   • npm start
3. Backend:
   • npm run build && node dist/server.js (or npm run dev)
4. Login as an admin user.
5. Navigate to bmdashboard/injurychart.
6. Verify:
   • Project dropdown lists projects with injuries.
   • Date range filter updates chart; cross‑year ranges show proper month order.
   • Legend, axis labels, and data labels appear.
   • Dark mode

Screenshots or videos of changes:

Screen.Recording.2025-09-12.at.1.01.13.PM.mov

Note:

• Make sure your backend has data (see backend POST API to seed injuries).

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	1e67fcf
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/68c45281a3f970000868de74
😎 Deploy Preview	https://deploy-preview-4063--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.

[Anusha-Gali]

Hi Juhitha,

I tried to review your PR locally but i was unable to, i did assume that the issue is due to old db.js file but even when i replaced it with the latest db.js file, the error disappeared. Also in dark mode the greyed out title and axis points are not visible, especially the dark grey titles.