Vamsi Krishna Creates a Special Feedback tab for events

[vamsikrishna1704]

Description

Related PRS (if any):

…

Main changes explained:

• Created a button to switch between host and participant views to verify features.
• Created feedback modal for participants to post their feedback to the event.
• Created toggles to on and off reviews and suggestions to the event.
• Search bar and filter dropdowns are added to filter feedback.
  …

How to test:

1. check into current branch
2. do yarn install and yarn start:local to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to http://localhost:5173/communityportal/activity/1/feedback
6. verify all the featuers mentioned in demo video.
7. verify this new feature works in darkmode.

Screenshots or videos of changes:

Demo:
https://github.com/user-attachments/assets/40ce9016-33c4-4264-80c6-160d797e9c43

DarkMode:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	283cee2
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/68e9f976030e5d0008fbbf00
😎 Deploy Preview	https://deploy-preview-4199--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 failed

Failed conditions
2 Security Hotspots

See analysis details on SonarQube Cloud

[ShradhaMBhadrannavar]

Followed the steps (checkout → yarn install → yarn start:local → cleared cache/site data → logged in as Admin).
Attempting to open http://localhost:5173/communityportal/activity/1/feedback returns Page Not Found (404), so I can’t verify this feature. Attaching both terminal and web page screenshot for reference.

[sundarmachani]

Hi @vamsikrishna1704, I’ve tested this new implementation, and the functionalities are working as expected. However, I’d like to request a small change for the “Host” and “Participant” buttons. At a glance, users can’t easily identify them as buttons. Could you please make them appear in a color, just like when you hover over them, so they stand out? This would improve the user experience. Otherwise, everything else is working as expected.

[Aswin20010]

Confirmed that all listed functionalities are implemented and working as expected:
Verified the Host vs Participant view toggle functions properly.
Confirmed the feedback modal allows participants to submit feedback.
Checked that the review and suggestion toggles correctly enable and disable the respective sections.
Tested the search bar and filter dropdowns, and they filter feedback as described.
Verified full functionality in dark mode.
Everything matches the described feature list and works smoothly. Approving this PR

[Aditya-gam]

I've completed manual testing of the event feedback feature as described in the PR. The implementation successfully delivers the core functionality for collecting and managing event feedback with host/participant views, toggle controls, and filtering capabilities. However, several UI/UX issues need to be addressed before merging.

---

What Works Well

1. Core Functionality
   • View Switching: The Host/Participant toggle correctly switches between the two views, showing appropriate content for each role.
   • Toggle Switches: The "Allow Reviews" and "Suggestions Only" switches are properly restricted to Host view only and function as expected using Material-UI components.
   • Feedback Submission: Both feedback and suggestions modals work correctly, accepting user input and updating the feedback list in real-time.
   • Special Feedback Mode: The first-month restriction is properly implemented with the label "Your feedback is only visible to the host for the first month," displayed correctly, and the private checkbox is appropriately checked and disabled.
   • Search and Filtering: The search bar, filter dropdowns, and sorting functionality all work accurately, providing correct results based on user input.
   • Data Display: Feedback cards correctly display all required information, including avatar, name, date, visibility badge, star rating, and comments.
2. Dark Mode Support
   • The feature generally works well in dark mode with appropriate styling for most components.

---

Issues Requiring Attention

1. Host/Participant View Toggle Buttons
   • The Host/Participant toggle buttons blend into the background in both light and dark modes
   • No visual distinction to indicate which view is currently active
   • Buttons lack proper button styling (borders, background, hover states)
   • Users cannot easily determine which view they're currently in

HostParticipantToggleButtonsTest.mov

2. Visibility Badges
   • The "Private," "Public," and "Suggestion" badges all have identical styling (same dark grey background and white text)
   • Users cannot quickly distinguish between different feedback visibility types
   • This defeats the purpose of having separate badge categories

3. Dark Mode Text Readability Issue
   • In dark mode, the user names and dates in feedback cards use darker text colors
   • This creates poor contrast against the dark background, making text difficult to read
   • Affects readability and accessibility

Test Video:

TestVideo.mov