Adithya Project Selection UX Fix

[adithya-6101]

Improve "Select Projects" Form UX in Building Summary Section (BM Dashboard)

Description

Fixes usability issues within the BM Dashboard's Building Summary section where the "Select Projects" dropdown provided minimal feedback and lacked clear interaction cues. Users can now easily understand their selection state and see clear visual feedback when the summary updates.

Related PRS (if any):

This frontend PR utilizes existing backend endpoints. No new backend PR is required.

---

Main changes explained:

• Modified (ProjectsList.jsx):
  • Form Elements: Wrapped the Select component in a FormGroup with a Label and helper <small> text. Added the requested placeholder.
  • Loading State: Introduced an isUpdating state and setTimeout (600ms) to manage the Spinner transition, list opacity, and disable the dropdown during changes.
  • UI Enhancements: Added the dynamic <h3> header to reflect current selections. Fixed list bleeding by applying listStyleType: 'none' and adjusted margins for cleaner card spacing.
• Modified (ProjectStatusDonutChart.jsx & ProjectStatusDonutChart.module.css):
  • Dark Mode Support: Connected the component to the Redux darkMode state. Applied a new .darkContainer class to fix stark white backgrounds and update date picker colors (color-scheme: dark).
  • Tooltip Fix: Passed explicit contentStyle and itemStyle to the Recharts <Tooltip /> so text is readable on hover in both light and dark modes.
  • Layout Constraint: Replaced aspect={1} with height={350} on the ResponsiveContainer to prevent the chart from infinitely scaling on large screens.
• Modified (BMDashboard.jsx):
  • Cleanup: Temporarily commented out <ProjectStatusDonutChart /> to resolve SonarCloud warnings regarding unused/empty data states as per the diff.

---

How to test:

1. Checkout your current branch (e.g., feature/bm-dashboard-select-projects-ux).
2. Do npm install and npm run start:local (or npm run dev) to run this PR locally.
3. Clear site data/cache if necessary.
4. Log in as an Admin or Owner.
5. Navigate to BM Dashboard → Building & Inventory Management Dashboard.
6. Verify Form UX & Loading Transitions:
   • Observe the new "Filter Building Summaries" label and helper text.
   • Select a project from the dropdown. Verify the dropdown briefly disables, a blue Spinner appears, and the list fades slightly while updating.
7. Verify Dynamic Header & Layout:
   • Check that the text above the summaries updates to "Showing Summary for: [Project Name]".
   • Verify that the summary cards no longer have black bullet points next to them and are evenly spaced.
8. Verify Dark Mode Compatibility:
   • Toggle the application into Dark Mode.
   • Verify the text in the "Select Projects" form remains crisp and readable.

---

Screenshots or videos of changes:

Screen.Recording.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	9de8564
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69e2836d7c7a1700073f7fc9
😎 Deploy Preview	https://deploy-preview-5127--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
1 New issue
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