Shravya/Feature/UserProfile_3449

[ShravyaKudlu]

Description

Fixes/Feature #3449
Fixes: Correct connection of the backend to frontend, mockdata cleanup
Implements: Preferences, Styling

Related PRS (if any):

This frontend PR is related to the #1753 backend PR.

Main changes explained:

• Delete None
• Update routes, mapping to correct component, update files inside src/components/HGNHelpSkillsDashboard
• Create many module.css file, and new filerData.js, to fetch the point all available skills, preferences

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. go to path /hgnhelp/community
6. verify all the buttons works as expected
7. verify when clicking skills or multiple relevant skills, the relevant people are shown, and verify the same for preferences
8. Make a new user and submit HGNForm with different skills, and verify your name is shown with respect to the skill relevant and preferences
9. verify this new feature works in [dark mode], also verify all the styles are in module.css and matches the naming convention

Screenshots or videos of changes:

Note:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	3fc91d9
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69882fc9070a0a0008adf7e8
😎 Deploy Preview	https://deploy-preview-4129--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
36 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

[Aswin20010]

Reviewed PR #4129+1753 (HGN Help Skills Dashboard – Preferences & Styling Update). Verified correct frontend-backend connection, removal of mock data, and proper mapping of updated routes and components. Confirmed that skill and preference filters display relevant users, buttons function as expected, and new users appear under appropriate skill categories after submitting the HGN form. Checked dark mode compatibility and adherence to CSS module naming conventions. No functionality or styling issues observed — approved the PR.

[Anusha-Gali]

Hi Shravya,

I ahve reviewed your PR locally and the filters work as per the requirement

[sayali-2308]

Frontend Testing Report

Reviewer: Sayali Sable
Date: January 28, 2026
Branch Tested: Shravya/Feature/UserProfile_3449

Testing Environment

• Frontend: localhost:5173 (PR #4129)
• Backend: localhost:4500 (PR #1753)
• Node.js: v20.19.4

Critical Bug Found - Preferences Filtering Non-Functional

This frontend PR is paired with backend PR #1753, which has a critical bug preventing preferences filtering from working.

Testing Results

Skills Filtering WORKS
Test: Navigate to /hgnhelp/community and select "React" skill

• Result: Successfully displays community members with React skills
• User cards show correctly with names, emails, roles, scores, and top skills
• Filter buttons work as expected
• Multiple skill selection works correctly
• No console errors

Preferences Filtering BROKEN
Test: Select "Management" preference only

• Result: Displays "No users found"
• Backend API returns 400 (Bad Request) errors
• Feature completely non-functional due to backend bug

Test: Select "React" skill + "Management" preference combination

• Result: Shows users (from skills API only)
• Backend returns 400 errors for preferences endpoint
• Preferences filter is ignored due to API failure

UI/UX Working

• Filter sections expand/collapse correctly
• Skill buttons highlight when selected (blue)
• Preference buttons highlight when selected (green)
• User cards display properly with all information
• Layout and styling look correct
• Responsive design works

Multi-Role Testing
Tested with 3 different user roles as required:

• Admin Account: Preferences filtering broken (backend 400 errors)
• Volunteer Account: Preferences filtering broken (backend 400 errors)
• Manager Account: Preferences filtering broken (backend 400 errors)

Bug is consistent across all user roles.

What Works

• Page loads correctly at /hgnhelp/community
• Skills filter buttons work
• Multiple skills selection works
• User cards display with correct information
• Layout and styling are correct
• Filter sections expand/collapse properly
• Skills API integration works

What Doesn't Work

• Preferences filtering returns "No users found"
• Backend API /api/hgnform/ranked?preferences= returns 400 errors
• Combined skills + preferences filtering doesn't properly apply preferences filter

Tests Not Completed
Due to the backend bug, I could not fully test:

• Creating a new user with HGNForm and verifying they appear in filters (Step 8)
• Dark mode testing (Step 9) - can test after backend is fixed

While the frontend code appears to be implemented correctly, the feature is only 50% functional due to the backend bug in PR #1753. The preferences filtering cannot be properly tested or approved until the backend API is fixed.

Next Steps:

1. Backend PR #1753 must fix the /api/hgnform/ranked?preferences= endpoint
2. After backend is fixed, I can re-test preferences filtering
3. Complete remaining tests (HGNForm submission, dark mode)

Note: I've submitted a "Request Changes" review on backend PR #1753 with details about the API errors.

[sonarqubecloud]

Quality Gate passed

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