Rajasrivatsan Srivatsan taking over Aswin - Add Rental Tracking dropdown section to Total Construction Dashboard

[Aswin20010]

Description

The Total Construction Dashboard previously did not include a dedicated section for viewing or monitoring rental-related data. As a result, users managing rented tools or equipment were unable to visualize rental costs, trends, or return performance within the same dashboard used for other construction metrics. This PR introduces a new “Rental Tracking” dropdown section that aligns with existing dashboard patterns and provides a centralized location for rental-related visualizations.
This change is limited to frontend implementation and focuses on layout integration, visual consistency, and usability across light and dark modes.

Related PRS (if any):

Frontend-only change
No backend PR required for this implementation

Main changes explained:

• Added a new collapsible dashboard section titled “Rental Tracking” to the Total Construction Dashboard, positioned alongside the existing Labor and Time Tracking section.
• Integrated rental-related chart components within the new section using existing dashboard card and grid patterns.
• Ensured the new section matches current styling conventions, including typography, spacing, and responsive layout behavior.
• Updated component-level styling to resolve dark mode visibility issues affecting dropdowns, date pickers, and input fields within the Rental Tracking section.
• Reviewed and adjusted loading, error, and empty states to ensure consistent readability across light and dark themes.
• Scoped all changes to frontend components without modifying backend logic or APIs.

How to test:

1. Check out the branch associated with this PR.
2. Run npm install and start the application locally.
3. Clear site data and browser cache if needed.
4. Log in as an admin user.
5. Navigate to the Total Construction Dashboard.
6. Expand the “Rental Tracking” dropdown section.
7. Verify that rental-related charts render correctly within the dashboard layout.
8. Toggle between light mode and dark mode and confirm that text, dropdowns, and input fields remain readable and consistent.
9. Verify that loading, error, and empty states display correctly without visual issues.

Screenshots or videos of changes:

Screen.Recording.2025-12-17.at.11.23.40.AM.mov

Note:

This PR is frontend-only and does not introduce or modify backend endpoints.
Rental Tracking follows existing dashboard patterns to minimize risk and maintain consistency.
Dark mode fixes are scoped specifically to the Rental Tracking components to avoid global styling side effects.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[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

[Anusha-Gali]

Hi Aswin,

I have reviewed your PR locally and found the below issues:

• the chart has a break in between in both modes
• the calendar is in dark mode when application is in light mode
• in dark mode we cannot see the month and year in the calendar
• in dark mode we cannot see the date selected in the calendar
• in dark mode we cannot see the project id
• in dark mode we cannot see the numbers on the chart

[rohanrastogi311]

Hi Aswin,

Well done with this implementation. Some minor dark mode tweaks need to be made.

[naznin07]

Redundant wrapper div.