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 PR1723)

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	ec05bdb
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a00d2dab7e17c000841af17
😎 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.
🤖 Make changes	Run an agent on this branch

---

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.

[Juhitha-Reddy]

Screen.Recording.2026-03-02.at.10.32.27.PM.mov

Tested locally and fixed merge conflicts.

[Anusha-Gali]

Hi Juhitha,

I have re-reviewed your PR locally and i believe the code is breaking:

Issue 1: The UI is misaligned

Issue 2: When the dates are unselected the error toast notification appears

**Issue 3: There is no data in the chart, i even checked the backend and once i did the post injuries api and get api for the trend data, there is still no change in the graph **

[penumalli-juhitha-reddy]

Hi @Anusha-Gali, Can you please re-review the changes? The changes are working as expected in my local

Screen.Recording.2026-04-05.at.9.59.19.PM.mov

[Anusha-Gali]

Hi Juhitha,

Thanks for the update, i have reviewed your PR again and am able to view the graph data; however the toast notification on clearing the dates still exists. Could you look into it. Maybe a different warning message or default dates in backend.

4063.mov

[rajanidi1999]

hi,
Hi Team, I followed the setup steps for both the frontend and backend, but I’m facing an issue where the application is not working as expected. The backend URLs are not reachable (http://localhost:4500/
and http://localhost:4500/api
both are not working), and the frontend is showing a “Request failed with status code 404” error. I tried installing all dependencies, updated the .env file with REACT_APP_APIENDPOINT=http://localhost:4500/api, and also ran the backend using both npm run build && node dist/server.js and npm run dev, but the issue still persists. Even though the Vite server restarts successfully, the backend does not seem to respond to any requests.

[Juhitha-Reddy]

@rithika-paii @Anusha-Gali I have shared a screenshot of how my local is working. Could you please verify again in the netwrok tab or share the screenshot of the network tab to see if we are pointing it to the right environment. Thank you!

[sonarqubecloud]

Quality Gate passed

Issues
2 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

[kunchalasireesha]

PR.-.4063.mov

Hi Juhitha, I tested your changes locally and everything is working as expected. However, I noticed a Sonar error in InjuryChatForm.jsx. Could you please look into that and fix it before the merge?

[sonarqubecloud]

Quality Gate passed

Issues
2 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

[Juhitha-Reddy]

@kunchalasireesha , could you please check now? Also, I have resolved conflicts and the SunarQube checks are all passed.