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

[shree-vaths]

Hello I tested #5354 on my local. Its working as expected.

Passing Test cases
-Rental Cost chart shows data and its responsive with project, tool and date filter.
-Percent of late tools chart shows a responsive with project, tool and date and sort by filter.
-Both retain the same functionality in the dark mode.
-No major UI issues in the dark like overflow bug, resolves invisible text issues

[Abhi-R0211]

Tested this PR locally on radia-rental-chart-update.

Verified working

• Rental Cost Over Time chart renders correctly with Display, Project, and Tool filters, and responds correctly to From/To date range changes via the DatePicker.
• Percent of Tools Returned Late chart renders correctly with Project filter, Tools multi-select (including search), and Sort By (Highest/Lowest % Late).
• Clicking legend items correctly shows/hides individual project bars.
• Dark mode verified across both charts — date pickers, dropdowns, checkbox labels, and chart legends are all readable, no invisible text.
• Responsive layout checked at tablet width — RentalChart, ReturnedLateChart, and WeeklyProjectSummary cards wrap correctly without overflow or overlap.
• WeeklyProjectSummary card renders correctly in both light and dark mode after the merge conflict resolution.

[AnshShah-18]

Tested this PR locally on pr-5354.

Verified

• Rental Cost Over Time chart renders correctly with Display, Project, Tool, and Date filters.
• Percent of Tools Returned Late chart renders correctly with Project, Tools multi-select, Date, and Sort By filters.
• Tools can be selected through the multi-select dropdown, and sorting works for Highest, Lowest, and Alphabetical options.
• DatePicker month and year controls are readable and functional.
• Both charts and all dropdown content remain clearly readable in dark mode.
• Light mode continues to render correctly.
• Responsive behavior was tested at tablet and mobile widths; the charts resize and stack without overlapping or overflowing.
• Chart labels, legends, and data remain visible across screen sizes.

Everything is working as expected. Approving this PR.

[sonarqubecloud]

Quality Gate passed

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

[Radia731]

Hello Team,

confirming the flags are now fixed. Please see the screenshot down below.

Thanks!

[kzou55]

Hi Radia,

I ran and tested the PR locally.

Issues

1. The filters for the first graph(Rental Cost Over time) can be better aligned. On full screen, it takes up two rows when it can just take one row. And given the chart below has filters that take up only one row, this way the layout of the section is more consistent. And on smaller screen sizes, the filters get a bit misaligned.

Recording.2026-07-28.185640.mp4

2. In Light Mode, hovering over a date on the date filters causes the number to be not visible.
   

3. Date Picker arrow buttons could have better contrast in Light Mode

   

4. Inconsistent Date Picker behavior. The UI for the date pickers for the graph and chart are different in style. Think it would be better in terms of consistency if they were made more similar.

   

5. Dark Mode isn't applied to the background of the legend for the Percent of Tools Returned Late chart.
   

6. Some of the filters(project, tools, sort by) for the Percent of Tools Returned Late have white borders while the other doesn't

   

7. Tools filter dropdown for the Percent of Tools Returned Late chart needs improvement. Is the padding/margins between each option neccesary? And searching has contrast issues in dark mode.

   

[DeepighaJ]

Rental Cost Over Time:

• The tooltip currently displays Materials cost percentages with excessive decimal precision (e.g., 16.342315369261478%). Could the percentage be rounded to 1–2 decimal places for better readability and consistency?

• After selecting a project, I was unable to interact with the Tool filter. Could you confirm whether the Tool filter is expected to remain available after a project is selected?

Percent of Tools Returned Late

• The dropdown generally follows the dark theme; however, the option list contains bright white separator lines that are visually prominent against the dark background. Using subtler divider colors would provide a more consistent dark mode appearance.

• The filter of Percentage Tools Returned late works as expected.