Casstiel improve chart label readability and alignment in dark mode

[CasstielP]

Description

Implements improved Dark Mode readability for the Paid Labor Cost chart in the Weekly Project Summary dashboard.

Some labels and numerical values inside the bar chart had low contrast in Dark Mode, making values difficult to read. Certain labels could visually blend into the chart background or overlap bars when values were small. In addition, the filter dropdown text in Dark Mode was difficult to see when opening the native select menu.

This PR updates chart label rendering, Dark Mode text contrast, and dropdown styling while preserving existing Light Mode behavior.

Implements # Paid Labor Cost Dark Mode Readability Fix

Related PRS (if any):

#3420
…

Main changes explained:

• Updated PaidLaborCost.jsx

  • Improved axis label, legend text, and tooltip contrast in Dark Mode
  • Added custom bar value label rendering for better readability
  • Prevented label overlap on smaller bars by repositioning values outside the bar when needed
  • Disabled duplicate legacy data labels
  • Kept Light Mode behavior unchanged

• Updated PaidLaborCost.module.css

  • Improved Dark Mode styling for filter dropdowns
  • Added readable dropdown option text colors in Dark Mode
  • Cleaned CSS formatting / lint issues required by repo rules
    …

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go t bmdashboard→ Reports→ Total Construction Summary→Labor and Time Tracking→Paid Labor Cost Chart

• Verify in Light Mode
• Existing chart behavior remains unchanged
• Labels, axis text, legend, and filters still display correctly
• Verify in Dark Mode
• Axis labels are readable
• Legend text is readable
• Tooltip text is readable
• Bar value labels are visible and no longer duplicated
• Small bar values do not overlap bars
• Dropdown selected text is readable
• Dropdown opened option list text is readable
• Test Task / Project / Date filters still function normally

Screenshots or videos of changes:

Screen.Recording.2026-04-18.at.9.36.16.AM.mov

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	cf831e9
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69e3b425d77c540008e1c379
😎 Deploy Preview	https://deploy-preview-5171--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

[Rajasrivatsansrinivasan]

Reviewed PR #5171 by Casstiel. Checked out the branch locally and tested the Paid Labor Cost chart in both light and dark modes on the Total Construction Summary page. Verified that Light Mode behavior remains unchanged and that in Dark Mode the axis labels, legend text, tooltips, bar value labels, and dropdown text are all more readable. Also confirmed that duplicate labels are removed, small bar values no longer overlap, and Task, Project, and Date filters continue to function normally. Approving.