[Jaden300]

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

This is a redo integrating the feedback on this closed PR: #4954

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	b50121c
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6aed05a6d1be01b80e246c7d
😎 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.

[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.

[ShreyasB02]

Tested the changes locally; here are the suggested changes.

1. In the Trend Summary Table’s risk-profile section, highlighted rows in dark mode render their text unreadable due to insufficient contrast; the highlighted text should remain clearly visible.

2. Issues Breakdown Section: Under the Total Material Cost Per Project graph, the greyed-out text is not clearly visible and is hard to read in dark mode

3. Under the financials section, the date field still has a white background, and the text is not visible in dark mode in those fields.

4. Under the Global Distribution and Project Status Overview, the start date and end date fields do not support dark mode. The text is completely invisible.

5. Under labor time and tracking, under the paid labor section, the background color of the date field is white. Needs to be changed to dark mode like the other fields.

[Adit0717]

Tested on shravan-fix-conflicts-4351. Dark mode toggle works, but need fixes for some elements before merge:

1. Trend Summary Table - row hover breaks text contrast, hovering a row in the Trend Summary Table lights the row background white/light-blue, making the row unreadable.

2. Hover tooltips (e.g. on the Trend Summary Table) are either: - Cut off at the edge, truncating the tooltip text, making both the tooltip and the row behind it hard to read.

3. Date input boxes don't switch to dark mode - They stay white with black text even when the rest of the page is dark. This shows up on: Financials → Cost Variance Trend, Cost Breakdown by Category, Labor and Time Tracking → Paid Labor Cost

[RuthwikHM]

Tested this locally. Found some issues

The map becomes illegible of sorts. The contrast in colors does not make it easy to read the text on the map.

The labour cost chart seems to be getting compressed and text and the graph itself is not easy to get insights from. Not sure if this is from some missed files during merge from main.

Some of the colors here make the text hard to make out. Using slightly darker shades of those colors like the yellow or some of the pinks could help with this.

Another instance of the chart getting compressed to a very small size resulting in making it hard to reach the chart.

Checked out the rest of the changes and they work well.
https://github.com/user-attachments/assets/ecc3e7a2-3f07-4986-83ed-7b1568cf4d9d

[RuthwikHM]

The issues mentioned in this review here are still not fixed.

[linlin-husky]

Tested locally on branch shravan-fix-conflicts-4351 in Dark Mode as an Admin user.

Confirmed multiple dark mode styling and contrast defects across different sections:

1. Calendar Date Picker Popups (Lessons Learned & Global Distribution):

   • Lessons Learned (Injury Severity by Category of Worker Injured): Clicking on Start date / End date opens a calendar popup with a solid white background and invisible white text.
   • Global Distribution and Project Status Overview: Clicking on Start Date / End Date opens a calendar popup with a solid white background where the month header, weekday labels, and dates render in white text, making them completely unreadable.

2. Date Input Fields (Financials -> Cost Breakdown by Category):

   • The From and To date picker inputs retain a solid white background in Dark Mode with invisible/white text.

3. Reset Filter Button & Filter Inputs Contrast (Financials -> Planned vs Actual Cost):

   • The Reset Filter button renders with a bright white background and light/white text, creating a severe contrast issue.
   • The filter input and select fields in this section also render with solid white backgrounds in Dark Mode, leading to text legibility issues.

Please see the attached screenshots and ensure consistent dark mode styling across tables, input fields, popup calendars, and buttons.

[DeMoliT1on]

For 'Total Material Cost Per Project' chart under Material Consumption section the font color for the values on the bars can be changed to make if more readable, also the values should be rounded upto 3 decimal places.

There are few remaining changes that are already mentioned from previous reviewers would like to mention again for easy access:

• The date selection for Global Distribution and Project Status Overview does not support dark mode. It seems to be working correctly on the lastest development branch, so you might refer from it and remove the breaking changes.
• Paid Labor Cost can be modified to make more readable, currently seems to be cluttered

[RuthwikHM]

The contrast issues still exist. Also some of the figures are still broken.

[linlin-husky]

Hi, Jaden300

I have re-reviewed PR 4351. I still found some area for improvement.

1, Calendar Date Picker Popups (Lessons Learned & Global Distribution):

For Lessons Learned area,
The calendar is much more visible now. But when I selecting a certain date like here 5, I cannot see clear the number 5 when the mouse moved to 5.

For Global Distribution area,
the same issue still exist, I cannot see calendar clearly in dark mode

The below issues still exists.
2. Date Input Fields (Financials -> Cost Breakdown by Category):

The From and To date picker inputs retain a solid white background in Dark Mode with invisible/white text.

Reset Filter Button & Filter Inputs Contrast (Financials -> Planned vs Actual Cost):

The Reset Filter button renders with a bright white background and light/white text, creating a severe contrast issue.

The filter input and select fields in this section also render with solid white backgrounds in Dark Mode, leading to text legibility issues.

[DeepighaJ]

• Getting Error page under Tools and Equipment tracking.
• Dark and light mode is fine in Distribution of Labor hours. But the Paid labor cost chart is overlapping and cluttered. If this is out of scope for this PR then fine.
• Filters under Financials needs dark mode improvement.
• Leader board page hover/highlights need improvement

Risk profile


Issue Tracking:


Tools and Equipment Tracking:

Labor and Time tracking:



Financials:




Material consumption:

[linlin-husky]

Hi, Jaden300
Good work, I have reviewed this pr the third time in local branch in both light and right mode as an admin. I have verified some points while still found some areas for improvement.

1, Calendar Date Picker Popups (Lessons Learned)

Lessons Learned Section:

• Injury Severity by Category of Worker Injured: The dropdowns and date picker inputs look great and function properly in Dark Mode now.
• Lessons Learnt (Rightmost Card) - Calendar Popup Defect: Clicking on the From (Start Date) input opens a calendar popup with a solid white background, but the date numbers and weekday labels inside render in white/light text, making the calendar dates completely invisible and unreadable in Dark Mode (as shown in the attached screenshot).
  In light mode

in dark mode

Global Distribution and Project Status Overview:

• Dark Mode: The calendar popup on the date range input renders with a solid white body and white text, making all dates (except the active selection) completely unreadable.
  • Light Mode: The interactive map container stretches horizontally across the screen, causing the world map tiles to repeat in the horizontal direction.

Financials

• Cost Breakdown by Category:

  • Date Inputs: In Dark Mode, the From and To date picker inputs retain a solid white background with white/invisible text, making the dates completely unreadable.

• Planned vs Actual Cost:

  • Filter Inputs & Dropdowns: The Project, Category, Start Date, and End Date inputs/select fields still render with solid white backgrounds in Dark Mode, leading to text legibility issues and broken dark theme styling.
  • Reset Filter Button & Tooltip: The Reset Filter button has a light background with low contrast against the white text, and hovering over it displays a misplaced tooltip underneath.

Pls kindly improve the above, thanks!

[linlin-husky]

Hi, Jaden300

Good work for improvement, I have reviewed this pr the fourth time in local branch in both light and right mode as an admin. I have verified some points while still found some areas for improvement.

Verified points

• Global Distribution and Project Status Overview (Verified Fixed):
  • Dark Mode Calendar Popup: The calendar dropdown now renders with a dark background and crisp, legible white text across all dates, weekday headers, and month labels.
  • Light Mode Map Layout: The interactive map container width and layout have been corrected, and the horizontal tile-repeating issue is resolved.

Area for improvement

1, Calendar Date Picker Popups (Lessons Learned)

a. Lessons Learned Section:

Lessons Learnt (Rightmost Card)

Calendar Popup Defect: In the date picker dropdown popup, the next month navigation arrows (< / >) have poor contrast and styling glitches in both light and dark mode, making the navigation controls difficult to see and use. The user may tend to feel difficult to find it

• Expected: The month navigation buttons/arrows should render cleanly with consistent padding, clear contrast, and properly styled hover/focus states that match the application's UI design.

in light mode

in dark mode

Lessons Learnt (Rightmost Card) - Calendar Popup Defect: Clicking on the From (Start Date) input opens a calendar popup with a solid white background, but the date numbers and weekday labels inside render in white/light text, making the calendar dates completely invisible and unreadable in Dark Mode (as shown in the attached screenshot).

In dark mode

b. Financials

Planned vs Actual Cost

Reset Filter Button & Tooltip: The Reset Filter button has a light background with low contrast against the white text in dark mode

comparison of reset button in light and dark mode

Date Inputs: In Dark Mode, the From and To date picker inputs retain a solid white background with white/invisible text, making the dates completely unreadable.

Cost Breakdown by Category:

Filter Inputs : The Project looks good, while Start Date and End Date inputs/select fields still render with solid white backgrounds in Dark Mode, leading to text legibility issues and broken dark theme styling.

Pls kindly keep improving the remaining issues above, thanks!

[DeepighaJ]

Hi @Jaden300

• I can still see date range not in dark mode under labor and time tracking and Financials cost variance trend.
• Global Distribution and Project Status Overview displays an "API KEY REQUIRED" message instead of loading properly.

[RohSrik]

I re-reviewed PR #5437 after the latest changes in commit 0acef3387. I verified the updated legend swatch implementation and confirmed that all six CSS classes are present. I also tested the Distribution of Labor Hours chart locally, including the pie chart, legend colors, date filters, and chart behavior after clearing the filters. Everything I tested worked as expected. I ran the Weekly Project Summary unit tests, and all 12 tests across 3 test files passed. I did not encounter any issues during this re-review.

[Sripriya03-hub]

Tested this PR locally in dark mode.

• The Total Construction Summary sections, charts and dropdowns look good in dark mode
• The Leaderboard looks good in dark mode
• Unit tests pass
• The Start Date and End Date boxes under Labor and Time Tracking (Paid Labor Cost) and Financials (Cost Variance) are still white in dark mode. They have the darkDateInput class, but it isn't taking effect
• The Global Distribution map still shows API KEY REQUIRED in dark mode because it uses the CartoDB dark tiles

Requesting changes.

[AaditTrivedi]

Reviewed by Aadit Trivedi.

The branch has merge conflicts with development in four files: InteractiveMap/InteractiveMap.jsx, LessonsLearnt/LessonsLearntChart.module.css, PaidLaborCost/PaidLaborCost.jsx, and WeeklyProjectSummary.module.css (checked with git merge-tree). Several BM dashboard PRs that changed these files have merged recently.

The latest commits also extend the PR beyond its original scope (the Global Distribution map tiles, dark date inputs, and SonarCloud fixes in other charts); please mention those in the description so reviewers know to test them.

Required action
Please update the branch with development and resolve the conflicts. Happy to re-review once updated.

[Jaden300]

The branch has merge conflicts with development in four files: InteractiveMap.jsx, LessonsLearntChart.module.css, PaidLaborCost.jsx, and WeeklyProjectSummary.module.css.

Hi @AaditTrivedi, I merged development into the branch and resolved all four conflicts (commit 66f9ed3). I took development's MapConfig.tileUrl and its Lessons Learnt calendar styles, adopted its Paid Labor Cost HTML legend template, and kept both sides of the shared WeeklyProjectSummary rules. I removed the now-orphaned chartMinWidth and scroll-wrapper CSS, and a duplicate white-space declaration the merge introduced. The dry merge against development is clean, eslint and stylelint report nothing, and the related unit tests pass.

[Jaden300]

I can still see date range not in dark mode under labor and time tracking and Financials cost variance trend. Global Distribution and Project Status Overview displays an "API KEY REQUIRED" message instead of loading properly.

Hi @DeepighaJ, the dark date inputs rendered white because a leaked global react-datepicker rule from the Tools chart outranked the module-scoped darkDateInput selector. I scoped that rule under its own page and removed the !important from the dark date inputs (commits d6d5578 and 7f84c55), so the Paid Labor Cost and Cost Variance Trend pickers now resolve to the dark styles. The map message came from the keyed CartoDB dark tiles, which I replaced with the OpenStreetMap tile layer used through MapConfig.tileUrl, so no API key is required. Both fixes apply in light and dark mode.

[Jaden300]

The Start Date and End Date boxes under Labor and Time Tracking (Paid Labor Cost) and Financials (Cost Variance) are still white in dark mode. They have the darkDateInput class, but it isn't taking effect.

Hi @Sripriya03-hub, you were right that the class was applied and still lost: a global .react-datepicker input rule from the Tools chart had higher cascade priority than the .dateInput.darkDateInput selector. I scoped that rule to its own page and dropped the !important from the dark date inputs, so the module selector now wins on specificity alone (commits d6d5578 and 7f84c55). The "API KEY REQUIRED" message was the keyed CartoDB dark tile layer, which I replaced with the OpenStreetMap tiles from MapConfig.tileUrl. The Global Distribution map now loads without a key in both themes.

[Jaden300]

The PR currently has three merge conflicts with the latest development branch in the following files: QuantityOfMaterialsUsed.jsx, WeeklyProjectSummary.jsx, WeeklyProjectSummary.module.css.

Hi @RevathiSrini, I resolved those conflicts in merges 50c49d7 and 97f809e, and merged development again today (commit 66f9ed3), which also cleared the newer conflicts that landed since. The merge keeps development's card selector and tooltip rules alongside this PR's dark mode styling. A dry merge against the current development head completes cleanly. The related unit tests pass, and eslint and stylelint report nothing on the touched files.

[Jaden300]

A fresh development fetch reproduces a merge blocker in GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx and InjuryCategoryBarChart.module.css. Please reconcile both with current development and rerun the checks before merging.

Hi @adit24dhaya, I merged the current development head into the branch (commit 66f9ed3), and both injury chart files now auto-merge without conflict. A non-mutating git merge-tree against development reports a clean tree. I reran the related unit tests (24 passing) plus eslint and stylelint on the touched files. The PR sits at 37 changed files, under the 50 file limit.

[Jaden300]

An active merge conflict with development in WeeklyProjectSummary.module.css around the tooltip and dark header/Share PDF styling must be resolved. The Risk Movement Tracking cards still overflow their container on window resize, and the date inputs in Paid Labor Cost and Cost Variance Trend remain unstyled white inputs in dark mode.

Hi @iAbhi001, I reconciled the stylesheet with development, keeping its tooltip and Share PDF rules and this PR's dark header styling (commit 66f9ed3). The Risk Movement grid uses repeat(auto-fit, minmax(min(240px, 100%), 1fr)) with min-width: 0 on the section and cards so it reflows instead of overflowing. The Project Status cards now use min-height instead of a fixed height and wrap their values with overflow-wrap: anywhere. The white date inputs were a leaked global rule beating the dark selector, which I scoped and de-!importanted in d6d5578 and 7f84c55.

[Jaden300]

The latest changes convert the .new_badges selector into a global CSS rule, but NewBadges.jsx still references it through the CSS module, so styles.new_badges is no longer exported.

Hi @sai-velagala-swe, styles.new_badges resolved to undefined because the selector became :global(.new_badges), which a CSS module does not export. I changed NewBadges.jsx to reference the global new_badges class directly, matching BadgeImage.jsx (commit 0382965). The container now receives its flex, wrap, and overflow rules again. I applied the same direct global class fix to BadgeImage.jsx in commit 6824c62.

[Jaden300]

Risk Movement Tracking cards extend beyond their parent container, Project Status values such as "17 hrs" and "$27.6K" are partially cut off, and the Start Date and End Date inputs display incomplete date placeholders.

Hi @Niket07pathak, the Risk Movement cards had no min-width override, so grid items overflowed, which I fixed with an auto-fit grid and min-width: 0 (commit 6824c62). The Project Status cards now use min-height with wrapping values instead of fixed sizing (commits 6824c62 and 66f9ed3). The date inputs used display: inline-block, which clips the native date picker segments, so I switched them to responsive sizing (commit 6824c62). The Paid Labor Cost date input padding and height now match Cost Variance Trend in both themes (commit 3e5af9c).

[Jaden300]

The recent fixes have resolved several previously reported issues. However, the Distribution of Labor Hours section still displays unreadable empty-data and error messages in dark mode.

Hi @RichaSapre, the empty and error message in Distribution of Labor Hours reused the hover tooltip's light background, which paired with white dark mode text and made it unreadable. I gave that state its own dark mode background in DistributionLaborHours.module.css (commit 3e5af9c). The rule applies only to dark mode, so the light mode appearance is unchanged. iAbhi001 confirmed on the 10/23 review that the message is much more legible in dark mode.

[Jaden300]

Distribution of Labor Hours, Administrator, dark mode: the new message box is white and I could not read its text. From the code: it reuses styles.tooltip, light background with white text in dark mode.

Hi @aaryashah22, you identified the cause correctly: the empty and error message reused styles.tooltip, which has a light background with white text in dark mode. I gave that state its own dark mode background in DistributionLaborHours.module.css (commit 3e5af9c). The rule is scoped to dark mode, so the light mode styling is unchanged. iAbhi001 confirmed on the 10/23 review that the message is much more legible in dark mode.

[vidiyala99]

Re-tested at head 66f9ed3 (after the 11/01 conflict fix) on the deploy preview, /bmdashboard/totalconstructionsummary, in dark mode at 1400 px, as Volunteer through the BM login. The dev API (apidev) returns 500 on every endpoint right now, so I ran HGNRest development locally against the dev database and sent the preview's API calls to it. Writes were mocked, so nothing was saved. I opened Financials, Global Distribution and Project Status Overview, and Labor and Time Tracking.

Fixed since the last round (10/31 reviews)

1. Date inputs are dark in dark mode now, including the two that were still white. Paid Labor Cost and Cost Variance Trend (Start Date / End Date) are rgb(37, 51, 66) with white text. Planned vs Actual Cost, Cost Breakdown by Category, Distribution of Labor Hours and the map's date range are dark as well (screenshots 1 and 2).
2. The map loads. Global Distribution uses OpenStreetMap tiles now, and "API KEY REQUIRED" is gone. The legend and project marker show (screenshot 3).
3. Labor hours filters: the From, To, Project and Member controls render dark and readable (screenshot 1).

Requesting changes: chart axis labels are unreadable in dark mode
In Planned vs Actual Cost ("Project A", "$14,000") and Cost Variance Trend ("May 02", "$500"), the axis labels are rgb(55, 65, 81) on the card's rgb(37, 51, 66), which is 1.25:1 (screenshot 2). Both charts set a light fill on their ticks, but a global rule overrides it:

/* IssueBreakdownChart.module.css */
:global(.recharts-cartesian-axis-tick-value) {
  fill: var(--chart-axis-color, #374151);

Nothing defines --chart-axis-color, so every Recharts axis on the page falls back to #374151. The rule is already on development (with !important), so this PR didn't introduce it. But the PR is the dark-mode pass for this page, and it's the same kind of leaked global rule you fixed for the date inputs in d6d5578. Scoping it to the Issue Breakdown chart's wrapper class, or setting --chart-axis-color to a light value under the dark theme, should fix both charts.

Non-blocking

• Paid Labor Cost: raw numbers overlap inside the bars ("56200", "61900", and one ending in "…00000004") (screenshot 1). This PR's diff doesn't touch those labels (it moves the summary block), so they likely come from a data-labels plugin registered elsewhere. Worth a follow-up issue.
• I tested as Volunteer only, since no Admin login was available today.

1. Labor and Time Tracking, dark: date inputs and filters are dark; overlapping numbers in Paid Labor Cost

2. Financials, dark: date inputs fixed, axis labels at 1.25:1

3. Global Distribution, dark: OpenStreetMap tiles load

[Jaden300]

Requesting changes: chart axis labels are unreadable in dark mode

@vidiyala99 the unscoped :global(.recharts-cartesian-axis-tick-value) selector in IssueBreakdownChart.module.css was the cause, since its fill: var(--chart-axis-color, #374151) fallback overrode the light tick fill set via props on every Recharts axis in the document. I scoped it to .container :global(.recharts-cartesian-axis-tick-value), so it only matches ticks rendered inside the Issue Breakdown chart's own CSS-module wrapper. Planned vs Actual Cost and Cost Variance Trend now resolve their own light tick fill instead of the leaked #374151, which removes the 1.25:1 contrast on the rgb(37, 51, 66) card background. Stylelint passes on the file, and the change is a single selector in commit b50121c.

[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