Radia taking over Aswin - UI/UX Enhancement for Projects Dashboard – Aswin Kanikairaj

[Aswin20010]

Description

This PR improves the visual hierarchy, usability, and clarity of the /bmdashboard/projects page.
Previously, the dashboard sections—Daily Logging, Add a New Item, and Team—were visually disconnected, making navigation difficult.
The Rented Tools and Materials alert cards also lacked urgency indicators, visual grouping, and accessible tooltips.

Fixes:

UI/UX clarity — Priority: Medium
Enhances dashboard usability and section grouping
Implements visual hierarchy improvements per volunteer feedback

Related PRS (if any):

No backend PR required.
This PR is frontend-only and affects only layout, styling, and component interaction on the Projects Dashboard.

Main changes explained:

1. Introduced Section Headers for Dashboard Organization

• Added reusable DashboardSection component to standardize section titles.
• Each section now includes:
  • Colored background bar
  • Iconography (🕒, ➕, 👥, 🚚, 🧱)
  • Improved spacing and alignment.

2. Enhanced Visual Hierarchy of Action Buttons

• Replaced scattered button blocks with structured grouped sections.
• Improved spacing and responsiveness of:
  • Time / Material / Tool Logging buttons
  • Add New Item buttons
  • Team buttons

3. Added Color-Coded Alert Cards

• Rented Tools cards now show yellow/orange/red tones depending on urgency.
• Materials cards use soft red alert backgrounds when quantity < 20%.
• Unified card containers using .sectionCardWrapper for cleaner layout.

4. Added Tooltip Support

• Hover tooltips added for:
  • “Term ends in __ hours.”
  • “Less than __% left.”
• Improves user understanding of conditions without cluttering UI.

5. Improved Dark Mode Support

• Updated table headers & row background variables.
• Ensured consistent contrast for section headers, buttons, cards, tables.
• Fixed issue where table header row was faint in dark mode.

6. Mobile Responsiveness Polished

• Dashboard sections stack cleanly on small screens.
• Improved spacing for card containers.
• Members table now scrolls horizontally on mobile without breaking layout.

How to test:

1. Checkout into this PR branch:

• git checkout aswin_ui_enhancement_projects_dashboard

2. Install dependencies:

• npm install

3. Clear browser site data/cache.
4. Run the frontend locally:

• npm run start:local

5. Log in as an admin user.
6. Navigate to:
   http://localhost:5173/bmdashboard/projects
7. Verify the following:

• Section headers appear with icons and consistent spacing.
• Color-coded alert cards display correctly.
• Tooltips appear on hover.
• Buttons align properly in both light and dark mode.
• Members table header is fully visible in dark mode.
• UI remains readable and functional on mobile view
• Use Safari Responsive Mode or Chrome Device Toolbar.

Screenshots or videos of changes:

PR.4450.mov

Note:

Please verify in both light and dark mode.
This PR introduces no breaking changes and does not modify backend logic.
All updates are limited to UI/UX improvements inside ProjectDetails.jsx, card components, and CSS modules.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	bc40f4b
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6925e755b51bff00080f6956
😎 Deploy Preview	https://deploy-preview-4450--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
16 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 it works as per requirement except for one link as you can see in the below video. And also the link you mentioned is not the right one. Please update.

4450.mp4

[rohanrastogi311]

Hi Aswin,

The URL in the PR is not functioning.