Neeraj Improve Resource Usage Insights Clarity

[Neeraj-Kondaveeti]

Description

Related PRS (if any):

This frontend PR is related to the development backend PR.
…

Main changes explained:

• Improved readability and visual clarity of Resource Usage insight cards in both light and dark mode
• Added descriptive hover tooltips to insight cards to explain the meaning of each metric
• Added supporting explanatory text to provide context for insights
• Added tests for the Resource Usage component to validate rendering and interactions
• No data, calculation, or backend logic was modified; changes are UI/UX only…

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. Navigate to : http://localhost:5173/communityportal/reports/resourceusage
6. Verify that insight cards are clearly readable in light mode
7. Toggle dark mode and confirm insight titles, values, and tooltips remain visible
8. Hover over each insight card and confirm a tooltip appears explaining the metric

Screenshots or videos of changes:

Note:

• This PR focuses only on UI clarity and user experience improvements
• No data sources, business logic, or calculations were altered
• Tooltips are purely informational and intended to improve interpretability for users

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	d9fda07
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/694cc8ec3893fa0008b0a51b
😎 Deploy Preview	https://deploy-preview-4621--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
7 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

[sayali-2308]

• Checked out branch: Neeraj_Resource_Usage_Insights_Clarity
• Backend: Running on development branch
• Tested on: Windows, Chrome browser
• Both servers running locally (Backend: 4500, Frontend: 5173)

Functionality Tested:
Test 1: Visual Clarity - Light Mode

• Navigated to http://localhost:5173/communityportal/reports/resourceusage
• Page loaded with Resources usage chart (stacked bar graph) and Insights panel
• Insights panel displays 6 insight cards in 2-column grid layout
• Cards show: Most waste event type, Most vulnerable materials, Top rated venues, Lowest rated venues, Highest cost venues/hr, Most vulnerable equipment
• Each card has color-coded badge (Green for positive metrics, Pink/Red for negative metrics)
• Explanatory text "Based on returned vs loaned comparison" displayed below each metric
• Text is clear and readable with good contrast
• Layout is clean and well-organized

Test 2: Visual Clarity - Dark Mode

• Toggled to dark mode
• Insight cards have dark blue background (#2c3e50 or similar) with blue borders
• Card titles and text display in white - excellent contrast and readability
• Color-coded badges remain visible: Green badges (Kids event, Kevin building, Community hall) and Pink badges (Community centers, Chair, Microphone, Small rooms) clearly distinguishable
• Explanatory text remains readable in dark mode
• No text visibility issues - major improvement over previous version
• Chart legend shows "returned" (green) and "loaned" (red/pink) clearly

Test 3: Hover Tooltips

• Hovered over multiple insight cards
• Tooltips appear explaining each metric
• Tooltips provide context for what each insight means
• Tooltip positioning works correctly
• Improves user understanding of metrics

Test 4: Filter Functionality

• Changed filter from "This Week" to "This Month"
• Insight cards updated with new data (Community event, Plastic, Community hall, Small rooms, Microphone)
• Changed filter from "Material" to "Equipment"
• Chart and insights updated accordingly
• No console errors during filter changes
• Page remains stable and responsive
• All UI improvements maintained across different filter states

Test 5: Data Display Consistency

• Tested multiple filter combinations (Material/Equipment, This Week/This Month/Last Week)
• Insight cards consistently display with proper formatting
• Color coding remains consistent across all data states
• Explanatory text always visible
• Layout doesn't break with different data values

Visual Design Improvements Verified:

• Dark mode cards have proper background color and borders
• Text contrast improved significantly (white on dark blue)
• Color-coded badges maintain visibility in both light and dark modes
• Card spacing and padding appropriate
• Typography clear and readable
• Explanatory text provides helpful context
• Two-column grid layout works well for 6 cards
• Tooltips add valuable information without cluttering the UI

Code Quality:

• No console errors observed during testing
• All interactions smooth and responsive
• Filter changes work without page reload
• Component rendering stable across different states
• Tests included for component validation (as mentioned in PR description)

UI/UX-only changes (no backend logic modified) work as intended. The improvements address the original issue of unclear terminology and lack of context. Users can now easily understand what "vulnerable materials" and other metrics mean through tooltips and supporting text. Dark mode readability issue completely resolved.