Jaden taking over for Carlos/Shravan fix conflicts 4351 (DONE Jaden)

[Jaden300]

Jaden taking over for Carlos/Shravan fix conflicts 4351 (DONE Jaden)

Description

Took over from Carlos/Shravan to bring PR #4351 (dark mode implementation for the Total Construction Summary page) to a mergeable state.

The previous branch had accumulated ~212 files due to repeated git merge development calls pulling in unrelated work from other PRs. This PR resets to a clean base off development and cherry-picks only the 22 files belonging to Carlos's original dark mode work, then resolves all blocking issues.

Related PRs

• Implements work from Shravan taking over for Carlos - optimize dark mode total construction summary #4351 (Carlos - optimize dark mode for Total Construction Summary)

Changes made

Branch cleanup

• Reset to a clean branch off development - removed ~190 passenger files from other PRs that had accumulated via merge commits
• Cherry-picked only Carlos's 22 original dark mode files

Bug fixes

• Fixed broken API endpoint (ENDPOINTS.BM_PROJECTS_LIST_FOR_MATERIALS_COST - did not exist - changed to ENDPOINTS.BM_PROJECTS)
• Fixed field name mismatch in project data mapping (projectId/projectName - changed to _id/name to match actual API response)
• Removed dead imports (issueCharts.css, DarkMode.css, autoComplete.css) that pointed to deleted or non-existent files

Styling

• Fixed all stylelint violations: descending specificity, single-line declarations, deprecated word-break: break-word, deprecated @document, invalid prefers-contrast: high
• Replaced all inline styles in DistributionLaborHours with CSS module classes
• Fixed all WCAG 4.5:1 contrast violations on disabled option text, button colors, and link colors

Code quality

• Resolved all SonarCloud issues: unused variables, missing button type attributes, array index keys, mutating .sort() replaced with .toSorted(), optional chaining, unused imports, nested ternaries, .removeChild replaced with .remove()
• Reduced ToolStatusDonutChart cognitive complexity from 25 to under 15 by extracting getChartDimensions, NoDataView, and DonutChartView

Tests

• All 6 unit tests in TotalMaterialCostPerProject.test.jsx now pass
• All 12 unit tests in Leaderboard.test.jsx pass
• All 29 tests in the pre-push suite pass

How to test

1. Check out branch shravan-fix-conflicts-4351
2. Run npm install and npm run start:local
3. Log in as an admin user
4. Navigate to bmdashboard/totalconstructionsummary
5. Toggle dark mode ON - verify all sections render correctly (Risk Profile, Issue Tracking, Tools and Equipment, Labor Hours, Financials, Material Costs)
6. Toggle dark mode OFF - verify light mode works correctly
7. Check dropdowns, date pickers, chart tooltips in both modes
8. Navigate to the Leaderboard page - verify dark mode toggle works and table renders correctly
9. Navigate to the Experience Donut Chart - verify dark mode renders correctly

vid.mov

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[AdiDubbs]

The cleanup makes this much easier to review, but there is one runtime blocker.

InjuryCategoryBarChart removes setChartKey from the state destructure while continuing to call it after loading, which throws before the chart can settle. The new shared select-style helper is also only wired into SupplierPerformanceGraph while the touched injury chart retains separate dark-mode styles.

The branch is currently 30 commits behind development, so please rebase and retest the chart after fixing the runtime error.

[AdiDubbs]

setChartKey is still called on line 153, but the setter has been removed from this state destructure. Once loading finishes, the animation-frame callback throws ReferenceError: setChartKey is not defined. Please either restore the setter or remove the remount effect and key={chartKey} together.

[AdiDubbs]

Nice abstraction, but only SupplierPerformanceGraph imports this helper so far. The touched InjuryCategoryBarChart still uses its own react-select control, menu, and option styles with different dark-mode colours. Either migrate that chart as part of this shared-style work or narrow the docstring so it does not describe a single source of truth that is not yet in use.