Sudheesh - Fix: chart visibility issues in Dark Mode- Most Susceptible tools Chart

[SudheeshTD]

Description

Related PRS (if any):

To test this PR you need to checkout the Latest Development PR.
…

Main changes explained:

• Implemented Dark Mode in the Tools Most Susceptible to Breakdown
• Added Module.CSS file
  …

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 to /mostsusceptibletoolschart
6. Check if all the components are rendering properly in dark Mode.
7. Check if the existing components are working in light mode also.

Screenshots or videos of changes:

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	e092800
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/698e78f41a9ce90008519993
😎 Deploy Preview	https://deploy-preview-4754--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.

[JuliaHa0902]

I have reviewed the Tools Most Susceptible to Breakdown in dark mode and confirm that the chart display correctly

[Anusha-Gali]

Hi Sudheesh,

I have reviewed your PR locally and was able to successfully test in in both the modes. I would however like to point out two issues which do appear out of scope of this PR.

• The link is not protected.
• When there is no data in chart, a partial ghost chart row appears. Do let me know if you fix it.

4754.mp4

[abdel-lall]

LGTM

[sayali-2308]

• Branch: Sudheesh-chart-visibility-issue-mostsusceptible-tools-chart
• Backend: development branch
• Tested on: Windows, Chrome
• Date: January 31, 2026

Dark Mode Testing:

1. Navigated to /mostsusceptibletoolschart
2. Chart title "Tools Most Susceptible to Breakdown" - white text, clearly visible
3. Project dropdown - "All Projects" visible with light text
4. Date Range display - readable with proper contrast
5. Start Date and End Date input fields - light text on dark inputs, clearly readable
6. Apply button - blue, clearly visible
7. Horizontal bar chart - blue bars display correctly
8. Y-axis tool labels - all visible in white text (Wrench, Saw, Pliers, Screwdriver)
9. Percentage values on bars - white text, clearly readable (53%, 52%, 52%, 32%)
10. X-axis percentage labels - white text (0%, 25%, 50%, 75%, 100%)
11. Gridlines - subtle dark lines, visible and don't overpower the chart
12. Background - dark blue-gray with excellent contrast

Light Mode Testing:

1. Switched to light mode
2. Chart title - dark text on light background, clearly visible
3. Project dropdown - light background with dark text
4. Date Range - readable
5. Chart displays correctly with 6 tools (Drill 65%, Hammer 56%, Wrench 53%, Saw 52%, Pliers 52%, Screwdriver 32%)
6. Y-axis labels - dark text, clearly readable
7. Percentage values - visible on bars
8. X-axis labels - dark text, clearly readable
9. Gridlines - light gray, visible with proper contrast
10. Background - light/white with excellent contrast

Functionality:

• Date range picker works correctly
• Project dropdown functional
• Chart renders properly in both themes
• Data displays accurately
• No console errors observed

[naiduajaykumar]

Everything is perfect, implemented all requirements. Ready to merge.

[saitejakaasoju]

Hi Sudheesh,
I reviewed this PR locally and tested it in both light and dark modes. The Tools Most Susceptible to Breakdown chart looks good and renders correctly.

[rohanrastogi311]

Hi Sudheesh,

Well done with this implementation.

[sonarqubecloud]

Quality Gate passed

Issues
9 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

[HemanthNidamanuru]

Hi Sudheesh,

I reviewed this PR locally and tested it in both light and dark modes. The implementation works as expected, and everything renders correctly across both themes.

[Anusha-Gali]

Hi Sudheesh,

I have reviewed your PR locally and thanks for fixing the issues. It works as per requirements.

[rohanrastogi311]

Hi Sudheesh,

Well done with this implementation.

[one-community]

Thank you all, merging!