Mahathi - Improve Utilization Chart dark mode support

[mahathiganimi]

Description

Improve dark mode support for the Utilization Chart page.

In dark mode, the Utilization Chart content and chart area were displayed with dark mode styling, but the page background surrounding the chart remained white. This created inconsistent styling and poor visual contrast between the analytics visualization and the rest of the page.

This PR updates the Utilization Chart page so that the surrounding page background also responds to the application's dark mode state. A dark navy background is used instead of pure black to provide better contrast with the existing dark blue Utilization Chart container while maintaining consistency with the application's dark theme.

The implementation preserves the existing Utilization Chart functionality, including utilization analytics, forecasting, filters, insights, maintenance alerts, resource balancing, and report export functionality.

Related PRS (if any):

This change is frontend-only and does not require a related backend PR.
Old PR https://github.com/OneCommunityGlobal/HighestGoodNetworkApp/pull/3996

Main changes explained:

• Update UtilizationChart.module.css to add scoped page-level light and dark mode background styles.
• Add a dark navy page background to prevent the area surrounding the Utilization Chart from remaining white in dark mode.
• Preserve the existing dark mode CSS variables and styling used by the Utilization Chart container, filters, analytics panels, and other components.
• Update UtilizationChart.jsx to add a page-level wrapper around the existing Utilization Chart container.
• Conditionally apply the new dark page class using the existing Redux darkMode state.
• Preserve the existing darkMode class on the Utilization Chart container so current dark mode behavior continues to work.
• Preserve existing utilization analytics, forecasting, filtering, insights, alerts, resource balancing, and export functionality.
• Maintain existing light mode behavior.

How to test:

1. Checkout this branch:

   git checkout mahathi/fix-utilization-chart-dark-mode

2. Install dependencies if needed:

   npm install

3. Start the frontend application http://localhost:5173/utilizationchart

4. Clear the browser site data/cache if necessary and refresh the application.

5. Log in with a user account that has access to the Utilization Chart page.

6. Navigate to the Utilization Chart page.

7. Verify the page in light mode:

   • The surrounding page background remains light.
   • The Utilization Chart and its controls display correctly.
   • Filters and chart functionality continue to work as expected.

8. Switch the application to dark mode.

9. Verify that:

   • The area surrounding the Utilization Chart no longer remains white.
   • The surrounding page uses the new dark navy background.
   • The Utilization Chart container remains visually distinct from the surrounding page.
   • Chart labels, axes, grid lines, and data labels remain readable.
   • Tool and project filters remain readable and functional.
   • Date filters remain readable and functional.
   • Forecast controls and analytics sections continue to display correctly.
   • Insights, alerts, resource balancing, and export functionality remain unaffected.
   • There are no unexpected light/white page areas around the Utilization Chart.

10. Toggle between light and dark mode and verify that the page background updates correctly without affecting the existing Utilization Chart functionality.

Note:

This change is intentionally scoped to the Utilization Chart page.

The existing Utilization Chart already contains comprehensive dark mode styling for the chart container and its analytics components. This PR preserves that implementation and adds a page-level dark mode wrapper to address the remaining white background outside the chart.

A dark navy background (#0d1b2a) is used instead of pure black to provide better visual contrast with the existing dark blue chart container and create a more consistent dark mode appearance.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[iAbhi001]

Tested locally on branch mahathi/fix-utilization-chart-dark-mode.

Test Summary:

• Dark Mode Background: Confirmed the outer page background correctly adopts the dark navy styling without leaving white areas around the chart container.
• Visual Contrast & Legibility: Checked metric cards, filter dropdowns, chart axes, grid lines, and labels—all remain clear and readable.
• Functionality & Light Mode: Tested filters, view tabs, and toggled back to light mode with no regressions observed.

Looks good to merge! 🚀

[DeepighaJ]

Tested the PR locally and verified the Utilization Chart page in both light and dark modes. The page-level background updates correctly in dark mode, removing the unwanted white areas while keeping the Utilization Chart container visually distinct. The existing chart styling and functionality remain unaffected.

Filters, chart elements, analytics sections, and other page functionality display correctly.