Radia - Rental Tracking and Percent of Tools Returned Late UI FIx and merger with Dev

[Radia731]

This PR takes over previous dashboard UI work and finalizes the layout, responsiveness, and Dark Mode compatibility for the Total Construction Dashboard charts. It fixes the free flowing responsive card overflow bug, resolves invisible text issues within third-party dropdowns in Dark Mode, and migrates the styling to CSS Modules.

Related PRS (if any):
Frontend-only change
taking over PR4569
No backend PR required for this implementation

Main changes explained:

Update on RentalChart.jsx & ReturnedLateChart.jsx: Converted all standard className strings to use imported styles objects for CSS Module compatibilityand fixed dark mode feature in these section:

- date picker (froma nd to)
- back ground for all filters (project, tools filters)
-Fixed a bug where month/year dropdowns and checkbox labels were invisible against dark backgrounds.

• Createted RentalChart.module.css Converted global CSS files to CSS Modules.
• Update WeeklyProjectSummary.jsx / .module.css: Resolved upstream merge conflicts with the development branch

How to test:

Check into the current branch: git checkout radia-rental-chart-update

Run npm install to ensure all external chart/select packages are up to date, then run npm start to spin up the local server.

Clear site data/cache.

Log in as an Admin user.

Navigate to the Dashboard -> Total Construction Dashboard -> Rental Tracking

Verify Responsiveness: Shrink your browser window. Verify that the RentalChart, ReturnedLateChart, and WeeklyProjectSummary cards smoothly drop to the next line instead of overflowing or squishing into each other.

Verify Filters: Click on the "Tools", "Project", and "Date" filters. Ensure the dropdown menus open correctly and allow you to select parameters.

Verify Dark Mode works for all sections and components.

Open the DatePicker and verify the Month/Year dropdowns have a dark background with legible white text.

Open the MultiSelect tools dropdown and verify the internal checkboxes and list items are readable and highlight correctly on hover.

Screenshots or videos of changes:

Screen.Recording.2026-06-21.at.2.51.50.AM.mov

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[beblicarl]

All required verification checks were completed successfully. The application was tested for responsiveness, and the RentalChart, ReturnedLateChart, and WeeklyProjectSummary cards wrapped correctly without overflowing or overlapping. The Tools, Project, and Date filters, as well as the DatePicker and MultiSelect dropdowns, functioned correctly with proper styling, readability, and hover behavior. Dark mode was also verified across all sections and components, and everything worked as intended.

https://www.loom.com/share/1b564795c8334cfd9e09e4d6bab6cd83

[HemanthNidamanuru]

Hi Radia,

I tested this PR locally. The responsiveness, filters, and dark mode functionality are working as expected overall.

I noticed a few minor UI improvements:

In dark mode, the Tools dropdown in the Tools Return Date graph and the chart legends could be better aligned.
In the Rental Cost Over Time graph, displaying the project name instead of the project ID would make the chart easier to understand.

[sonarqubecloud]

Quality Gate passed

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