Amaan - Fix Material Summary dashboard styling and dark mode

[AmaanSyed09]

Description

Phase 2 follow-up work for the Material Summary functionality introduced in PR #4642. The Material Summary page did not consistently match the standard dashboard layout and had styling issues affecting alignment, spacing, responsive behavior, and dark mode.

This update improves the Material Summary dashboard layout while preserving the existing filters, chart data, and Material Summary functionality. It also prevents the globally registered Project Status Chart.js center-text plugin from displaying the unrelated "Total Projects 0" label on the Material Summary donut chart.

Related PRS (if any):

Related to PR #4642, which introduced the Material Summary Dashboard functionality.

Main changes explained:

• Updated the Material Summary layout to align with the existing standard dashboard styling and shared header.
• Fixed malformed and duplicated CSS rules that were affecting the Material Summary layout and dark-mode styles.
• Improved dashboard spacing, card styling, responsive grid behavior, inputs, text, and Material Breakdown styling.
• Added dark-mode-aware Chart.js text styling.
• Updated the shared Project Status center-text plugin to render only when explicitly enabled, preventing "Total Projects 0" from appearing on unrelated Chart.js charts while preserving the Project Status chart behavior.
• Preserved the existing Material Summary filters, chart calculations, data behavior, and breakdown functionality.

How to test:

1. Check out this PR branch.
2. Run npm install.
3. Run npm run start:local.
4. Clear site data/cache.
5. Log in as an admin user.
6. Visit http://localhost:5173/MaterialSummary.
7. Verify the Material Summary dashboard uses the standard dashboard header and that the page content is properly aligned without overlap.
8. Verify the Project and Material Type filters continue to update the chart and Material Breakdown correctly.
9. Verify the donut chart displays only the intended "Materials" center label and does not display "Total Projects 0".
10. Verify the Material Summary page in light and dark mode.
11. Verify the layout at responsive screen sizes.

Screenshots or videos of changes:

Before :

After:

Note:

The Project Status center-text plugin change makes the globally registered Chart.js plugin opt-in. The Project Status chart explicitly enables the plugin, preserving its existing center-text behavior while preventing the label from appearing on unrelated Chart.js charts.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[DeMoliT1on]

Hi @AmaanSyed09,

Thanks for the PR. I tested locally on the branch amaan-fix-material-summary-header-dark-mode while everything seems to styled correctly I want you to address just a small dark mode UI artifact before approval.

The percentage change on the usage trend is unreadable in dark mode. Also the value is not properly centered around the badge

The PR can be approved post these changes.

[iAbhi001]

Hi @AmaanSyed09,

I tested the branch locally on amaan-fix-material-summary-header-dark-mode.

The dashboard header, layout alignment, and the "Materials" center-label fix all look solid. However, following up on @DeMoliT1on's feedback, the dark mode UI artifact is still present:

• Usage Trend Badge Contrast & Centering: In dark mode, the percentage change text on the usage trend badge remains difficult to read due to low contrast, and the text is not vertically/horizontally centered within the badge container.
• Donut Slice Text Contrast: Additionally, the segment values inside the donut chart (e.g., 50, 30) have very low contrast against the colored slices in dark mode.

Once the badge styling and text contrast are adjusted, this will be ready for approval.

[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

[AmaanSyed09]

Addressed the remaining issues.

Updated the Usage Trend percentage badge styling to properly center the percentage text within the badge and improved its dark mode contrast with a scoped dark-mode background while preserving the existing light mode appearance. Also updated the Material Summary donut chart data labels with larger, bold text and improved contrast so the segment values remain clearly readable across the chart slices.

Verified the Usage Trend badge alignment and readability in both light and dark modes, including confirming that the light mode styling remains unchanged. Verified the donut chart segment values in both themes to ensure the labels are clearly visible and readable against the different slice colors. The changes remain scoped to the Material Summary dashboard and do not modify the underlying chart data, filters, or Material Summary functionality.

Ready for re-review.