Amaan taking over for Juhitha-Reddy 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	c34e31d
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a68e9b9f359e40008486d4d
😎 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

[kunchalasireesha]

Hi Juhitha, it looks like this PR currently has merge conflicts with the base branch. Could you please rebase or merge the latest changes from development into your branch and resolve the conflicts? Once the build passes, I’ll finish the review.

[DeepighaJ]

Hi
Checked out to current branch and tested locally. Created injury in backend and response was as expected. There is no projects data displayed in the Injury Trends Over time. And there is UI alignment issue in the filter areas.
Please resolve the merge conflicts.

[amaresh2001]

Tested locally on Juhitha_Create_Injury_Trend_Chart

Testing:

• Chart loads and displays injury trend data correctly
• Multi-line chart renders with correct color coding (Serious/red, Medium/orange, Low/green)
• Line Chart ↔ Bar Chart toggle works correctly
• Project dropdown filter updates the chart as expected
• Date range filter works and updates the chart correctly
• Dark mode is fully supported, text, labels, and charts adapt correctly

Issue:
Filter control alignment is off. The "Project" label sits at the top, the "All Projects" dropdown sits lower.

[AmaanSyed09]

Tested locally following the PR instructions.

1. Checked out both frontend and backend branches, rebuilt the backend, and ran the application locally.

2. Verified the Injury Tracking page loads successfully from the BM Dashboard navigation.

3. Tested project filtering with multiple projects. Projects containing injury records displayed the expected injury trend data, while projects without injury records correctly displayed empty results.

4. Tested date range filtering and confirmed the chart updates based on the selected date range.

5. Verified the Line Chart view renders injury trends correctly across severity levels (Serious, Medium, Low).

6. Verified the Bar Chart toggle displays the same underlying data correctly and updates as expected.

7. Tested the feature in both light mode and dark mode and confirmed chart visibility, labels, legends, filters, and controls render properly.

8. Verified tooltip values match the displayed chart data.

9. Checked browser console during testing. The only messages observed were existing Reactstrap deprecation warnings related to defaultProps (attached screenshot). No blocking console errors or functionality issues related to this PR were encountered.

Functionality works as expected. Approving.

[shree-vaths]

I tested both #1723 and #4063 on my local.

Positives -
1.InjuryTrendChart shows three types of three type of injuries.
2.The filters are working with project dropdown and date picker.

[akv-iu]

Hey @Juhitha-Reddy ,

Test Summary

Tested backend frontend PR #4063 with PR #1723 .

Verified:

• The Page loads correctly with all the data and works consistent both in Dark and Light theme [Addressed one problem in backend PR]

Concern:

• The alignment of the project filter is off. and Dropdown also has 2 arrows.

[AmaanSyed09]

Merged the latest development branch into this PR, resolved the merge conflict in yarn.lock, and verified that the feature still works correctly after the merge.
Tested the Injury Trend Chart using the matching backend branch. The project filter, date range filter, and chart rendering are working as expected. The chart displays data for projects with injury records in the selected date range, while projects without matching records correctly display no data. This PR is now up to date with the latest development branch and ready for further review.

[kzou55]

Hi Amaan,

I ran and tested the PR locally alongside the associated backend.

Verified

• Chart has legend and shows 3 categories(serious, medium, and low), each with a different color
• X label shows month, Y label shows number of injuries
• Project and Date filters work
• Dark Mode looks good

Recording.2026-07-20.193907.mp4

Issues

1. Start Date and End Date can be better aligned with the Project dropdown filter

   

2. "All Project" filter results inconsistent with the sum of all the other projects. When filtered by "All Projects" it shows some data for injuries. Yet, when I actually choose all the different projects, the individual project's injuries aren't summing up to the total.

Recording.2026-07-20.193355.mp4

[DeepighaJ]

• Tested the PR locally. The alignment issue of the filters still not fixed.
• The chart doesn't display the project details on tooltip or anywhere else to know which projects trend is displayed.
• When filtering projects shows no data however it chart plotted for All projects.

[AmaanSyed09]

Addressed the reviewer feedback for PR #4063 and the associated backend PR.
Changes include:

• Fixed alignment of the Project, Start Date, and End Date filters.
• Updated project filtering to send the selected project name instead of the placeholder project ID.
• Removed duplicate project names from the dropdown.
• Added project context to both line and bar chart tooltips.
• Improved bar-chart hover behavior by removing the full-category highlight while keeping all severity values visible.
• Ensured tooltips consistently display the current project selection, including “All Projects”.
  Note:
  While testing, different project selections (e.g., Building 1 and Commercial Test - Project) currently return identical trend-data responses from the backend, resulting in identical charts. The frontend is sending the correct projectName parameter, so this appears to be due to the current backend response or development dataset rather than the frontend rendering.

[AmaanSyed09]

PR.4063.demo.mov

[DeepighaJ]

Tested the PR locally and the filter alignment issues is resolved and the chart is loaded for the filtered project and dates.

[kzou55]

Hi Amaan

I ran and tested the Pr locally again alongside its associated backend.

Verified

• Confirmed the changes made

  • Date and project filters now aligned

    

• Dark Mode Looks Good

  

Issues

1. The main component has some extra/blank extended space at the end

   

2. Is there a reason you swapped from using project id rather than project name? Right now in the backend, in PR 1723, it only supports project id rather than name.

   

And I think the reason why the result returns the same thing it doesn't handle project name, meaning it would just default to http://localhost:4500/api/bm/injuries/trend-data?startDate="xxx"&endDate="xxx" As it always return serious = 12, medium = 2, low = 4. Basically treating it the search as All Projects from the specified start and end date.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
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

[AmaanSyed09]

Addressed the requested changes.

Fixed the Injury Trend layout by removing the unnecessary blank vertical space below the chart while preserving the existing responsive layout and chart behavior.
Fixed the Injury Trend project filtering. During verification, we confirmed that Building 1 and Building 2 share the same legacy projectId in the injury dataset. Filtering only by projectId combined the records from both projects, resulting in the previously observed totals (Serious: 12, Medium: 2, Low: 4). The filtering has been updated to distinguish projects correctly by using the project name together with the associated project ID values.

Verified that the available data for the selected date range (2026-01-28 to 2026-07-28). Building 1 contains injury records for that range, while Commercial Test - Project, Residential Test - Project, Housing Project, and Solar Panel Project do not, so those projects correctly return zero values for the selected period.

ready for re-review.