Sireesha taking over Aswin fix: implemented injury-severity to the Total Construction Dashboard

[Aswin20010]

Description

This PR adds a new display card for the grouped bar graph showing Injury Severity by Projects to the Total Construction Dashboard.
Previously, the chart introduced in PR #3903 was not visible anywhere in the dashboard, resulting in low visibility of injury-related metrics.
This update ensures the injury severity data is clearly surfaced, styled consistently with the rest of the dashboard, and fully responsive with dark-mode support.
Fixes: High priority visibility issue – the injury severity dataset from PR #3903 was not displayed on the dashboard.

Related PRS (if any):

Frontend PR related to: #3903 (Injury Severity dataset introduction)
This PR exposes the UI section needed to display the data added in #3903.
No backend changes required; this PR can be tested independently from backend PRs.

Main changes explained:

Updated WeeklyProjectSummary.jsx

• Added a new dashboard section titled "Injury Severity by Projects".
• Integrated the InjurySeverityChart component into a full-width dashboard card.
• Ensured consistency with the existing card layout and grid behavior.
• Added toggling logic to expand/collapse the new section.
  Updated styles in WeeklyProjectSummary.module.css
• Fixed dark-mode text visibility for section headers and card titles.
• Standardized background and foreground variables for consistent theming.
• Ensured the new card matches width, padding, and grid structure.
  Improved dark mode compatibility
• Adjusted colors so titles, labels, and chart text are readable on dark backgrounds.
  Refactored and cleaned duplicates flagged by stylelint
• Removed duplicate selectors.
• Aligned CSS ordering to satisfy Husky/stylelint requirements.

How to test:

1. check into current branch

• git fetch
• git checkout
• npm install

2. Run the frontend

• npm run start:local

3. Clear browser site data/cache to avoid stale CSS and components.
4. Log in as Admin.
5. Navigate to:
   Dashboard → Reports → Total Construction Dashboard
   http://localhost:5173/bmdashboard/totalconstructionsummary
6. Verify the following:

• A new display card titled "Injury Severity by Projects" is visible.
• The grouped bar chart loads correctly and matches the screenshot from PR Zhifan - Create a grouped bar graph showing injury severity by projects #3903.
• The section can be expanded/collapsed like other dashboard cards.
• The chart adjusts gracefully for various screen sizes.
• Dark mode styling displays readable text, proper card backgrounds, and no washed-out elements.

7. Confirm no console errors appear during load or chart interaction.

Screenshots or videos of changes:

PR.4489.mov

Note:

This PR does not modify backend logic.
Reviewers should focus on:

• UI integration
• Dashboard consistency
• Responsiveness
  All lint/stylelint issues have been resolved, allowing successful pre-commit execution.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	3f3f33a
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a2af3887a73560008abffa7
😎 Deploy Preview	https://deploy-preview-4489--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.

[sonarqubecloud]

Quality Gate passed

Issues
4 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 Aswin,

I have reviewed your PR locally and identified the below issues:

• When there is no data , a ghost chart appears
• The calendar is in light mode when the application is in dark mode
• The dropdowns are also in light mode when the application is in dark mode

[rohanrastogi311]

Hi Aswin,

Lots of work to be done here. Dark mode is also not functional.

[sonarqubecloud]

Quality Gate passed

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

[DeepighaJ]

• Checked out to current branch and tested PR locally.
• A new display card titled "Injury Severity by Projects" is visible and looks good.
• Filters applied as expected.
• But the calendar under dark mode needs improvement. Background goes to white when highlighted while picking a date. Please refer the last screenshot.
• The contrast of numbers in the chart can be improved so easily readable in dark mode even in mobile view.