Amaresh: Wire event participation page to real event data

[amaresh2001]

Description

Restores real data to the Event Participation Analytics page (/communityportal/reports/participation) and fixes several dark-mode bugs. This work grew out of reviewing PR #5029. While auditing it, I found development already has an independently built, more complete version of this same page, so this PR fixes and completes that existing version instead of merging #5029's older implementation.

Related PRS (if any):

Supersedes #5029; that PR duplicates this exact feature with an older, less complete implementation (no chart tooltips, hardcoded fake data, unfixed dark-mode bugs).
This frontend PR is related to the backend PR #2311 (amaresh/wire-event-participation-real-events-api restores a real Events API that was silently dropped from routes.js in an unrelated merge).

Main changes explained:

• Update EventParticipation.jsx for fetching real events once via the (now-restored) events API and passing them down to the header, event list, and both charts, instead of each component using its own hardcoded/mock data.
• Update EventParticipationHeader.jsx for computing summary metrics (Total Events, Avg Attendance, Top Event Type, Total Participants) from real data instead of hardcoded numbers, and switching internal nav links from <a href> to React Router <Link> (the old links caused full-page reloads).
• Update AnalyticsNavigation.jsx for the same <a href> to <Link> fix on the "Detailed Analytics" cards.
• Update MyCases.jsx for rendering real events in the "Upcoming Events" list instead of mock data.
• Update EventTypePieChart.jsx and EngagementBarChart.jsx for rewriting both with recharts, wired to real event data, with working hover tooltips (the pie chart previously had none at all) and an explicit dark-mode-aware tooltip style (fixes the "tooltip invisible in dark mode" bug reported on #5029).
• Update Participation.module.css for adding targeted dark-mode color overrides on the no-show/drop-off rate table and insights percentages, since a global body.dark-mode * { color: #fff !important } rule elsewhere in the app was silently overriding correctly-coded green/red semantic colors.

How to test:

1. Check into this branch and the companion backend branch PR #2311 (amaresh/wire-event-participation-real-events-api).
2. Do npm install and run both locally.
3. Clear site data/cache.
4. Log in as admin user.
5. Go to localhost:5173/communityportal/reports/participation.
6. Verify the top summary cards show real numbers (not the old static 24/35/Yoga Class/840); hover the "Event Type Popularity" pie chart and "Monthly Engagement Trends" bar chart to confirm tooltips appear and are legible; click the nav pills and "Detailed Analytics" cards to confirm navigation doesn't full-page reload.
7. Verify this new feature works in dark mode; check the "Drop-off and no-show rate tracking" table (green/red percentages) and "No-show rate insights" widget.

Screenshots or videos of changes:

Note:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	f6de49a
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a99e58efa614b000858225d
😎 Deploy Preview	https://deploy-preview-5453--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[RuthwikHM]

Tested this out locally along with the backend PR. I do not see any events loading. The call to the events API fails with a 404.

[amaresh2001]

Thanks for testing, @RuthwikHM! I checked the route directly against the current branch; it responds successfully (200 on first load, 304 on cache revalidation), not a 404, and the page loads real data correctly on my end (192 events, working charts and tooltip). Nothing's changed in the backend PR since you tested it, so this looks like a local setup issue rather than a bug; maybe the backend was running a stale build. Could you pull latest, restart the backend with npm run dev, and re-test? Let me know if it's still failing.

[RuthwikHM]

@amaresh2001 , yup it was a stale backend build by the looks of it. Got it working now. Mostly everything works as intended. Just a small bug to address.

In dark mode it seems like the widgets for drop off rate and no show rate do not indicate the loss or gain via color. The text color seems to just be white. Light mode works fine though. Events are also being used from the backend API as expected.

[amaresh2001]

@RuthwikHM Thanks for catching that! Fixed and pushed; the +/-% values weren't wired to a real color class, so dark mode's global text override was washing them out to white. Now shows correctly in both themes.
Please test it when you get a chance!

[sonarqubecloud]

Quality Gate passed

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

[DeMoliT1on]

Hi @amaresh2001,

Tested locally for frontend PR changes branch amaresh/fix-event-participation-static-metrics-and-nav-links with related backend PR branch amaresh/wire-event-participation-real-events-api and observed the following things.

---

Issue 1 - Uneven Page Edge Spacing Between Light and Dark Modes

Observed:

• The outer container margins/padding on the left and right edges differ between light mode and dark mode, creating inconsistent layout alignment across themes.

Expected Behavior

• Container margin and padding should be consistent across both light and dark modes.

Screenshots

---

Issue 2 - Main Metric Card Attached Directly to Navigation Bar

Observed:

• The main Event Participation Analytics header banner lacks top padding/margin and is directly flush against the main navigation bar.

Expected Behavior

• Adequate top margin/padding should exist between the navbar and the main header card to match standard page spacing across the app.

Screenshots

---

Issue 3 - Event Category Badge Text Low Contrast / Invisible in Dark Mode

Observed:

• In the "Upcoming Events" card, the event category badge text ("Workshop") turns white in dark mode against the light green badge background, making it unreadable.

Expected Behavior

• Badge text and background colors should adjust dynamically in dark mode to maintain accessible contrast and legibility.

Screenshots

---

Issue 4 - Back to Participation button still reloads the whole page

Observed:

• After opening any of the "Detailed Analytics" link pages, when the Back to Participation button is clicked it reloads the whole page.

Expected Behavior

• The button should also use React Router to navigate and avoid the reload.

---

Overall Assessment

Verified Working

• Successfully restored real API data across summary metric cards, pie chart, bar chart, and upcoming events list.
• Recharts implementation loads event data with interactive tooltips working properly on hover.

Requesting Changes

Please resolve the following layout and dark mode contrast issues before approval:

• Adjust page edge spacing/padding to ensure light and dark mode layouts match.
• Add top spacing/margin to separate the main header metric card from the top navbar.
• Update dark mode CSS styles for the event category tag/badge in the Upcoming Events card so text remains readable.
• Update the navigation logic for Back to Participation button to prevent unnecessary reloads.