Shreya P taking over for Vamsidhar create grouped bar graph showing injury severity

[vamsidharpanithi]

Description

This PR fixes dark mode styling issues for filter categories on the "Injury Severity by Category of Worker Injured" card. In dark mode, the dropdown category labels and options (Projects, Severities, Injury types, Start date, End date) were blending into the background and were difficult or impossible to see. Text and control borders did not have enough contrast against the dark card background.

Priority: MEDIUM

Fixes dark mode visibility issues for filter controls on the Injury Category Bar Chart component.

Related PRS (if any):

This frontend PR is related to backend PR #1405.

The original implementation was in PR #3619 .

Main changes explained:

• Updated InjuryCategoryBarChart.module.css:

  • Added comprehensive dark mode styles for filter labels (Projects, Severities, Injury types, Start date, End date)
  • Enhanced react-select dark mode styles with proper hover, focus, and selected states using :global() for CSS modules
  • Added complete dark mode styles for react-datepicker inputs and calendar dropdown
  • Updated chart elements (axis ticks, legend text) for dark mode visibility
  • Applied dark mode colors to loading, error, and empty state messages

• Updated InjuryCategoryBarChart.jsx:

  • Applied dark mode styles to YAxis tick colors
  • Updated Tooltip with dark mode background, border, and text colors
  • Updated Legend with dark mode text color
  • Updated Bar fill colors (second bar uses gray in dark mode instead of black)
  • Updated LabelList with dark mode text color
  • Updated loading, error, and empty state messages with dark mode classes

• Fixed Header.jsx:

  • Removed duplicate isAckLoading declaration that was causing test failures (introduced during merge with development)

How to test:

1. Check out the current branch: vamsidhar-create-grouped-bar-graph-showing-injury-severity
2. Run npm install to install dependencies
3. Run npm start to start the development server
4. Clear site data/cache in your browser
5. Log in as an admin user
6. Navigate to: http://localhost:3000/bmdashboard/totalconstructionsummary
7. Scroll to the "Injury Severity by Category of Worker Injured" card
8. Test in Light Mode
9. Test in Dark Mode
10. Test with different filter combinations

Screenshots or videos of changes:

Note:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	a31a982
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/692ba92c369bdc000878154b
😎 Deploy Preview	https://deploy-preview-4479--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
0 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

[Anusha-Gali]

Hi Vamsidhar,

I have reviewed your PR locally and the below issues are found:

• In light mode, the calendar is still as that of dark mode
• Also in light mode, the title of the graph does not again with the title.
• The color of the legend is not co-related to anything and only 3 of the 5 projects are listed in both the modes

[shashank-madan]

Functionality works as expected.
UI can be improved to fill the page rather than be constricted in the left half.

Total.Construction.Summary.-.Google.Chrome.2026-01-31.13-31-11.mp4