Repository navigation
Isha taking over for Kanishk: Complete Event Popularity Analytics Visualization - #4514
kanishkagarwal6101 wants to merge 25 commits into
Conversation
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Anusha-Gali
left a comment
Anusha-Gali
left a comment
There was a problem hiding this comment.
Hi Kanishk,
I have reviewed your PR locally and the main functionality does work as per requirements, i have noticed the below issues:
- The Create New button is not how it is supposed to be even based of your pictures
- The width of each block is different in light mode and dark mode
- The Drop-off and no-show rate tracking block, in dark mode the red and green text colors are not present and all the text is in white
one-community
changed the title
one-community
added
Needs New Developer
one-community
changed the title
rithika-paii
changed the title
f44adb8 to
c486e75
Compare
58c5332 to
7ed6504
Compare
|
one-community
added
High Priority - Please Review First
iAbhi001
left a comment
iAbhi001
left a comment
There was a problem hiding this comment.
Here is a clear, professional review comment you can post directly on the GitHub PR:
Hi @rithika-paii,
I reviewed and tested your PR locally, but I encountered a few issues while testing:
- 404 API Endpoint Errors:
- On the reports page, the top analytics cards fail to load data, throwing
Error: Request failed with status code 404. - Please verify that the backend API routes (
/api/events/popularity,/api/events/engagement,/api/events/value,/api/events/format-comparison) are properly registered and reachable.
- Broken Navigation ("Page Not Found"):
- Clicking on Details (or navigating from event cards) redirects to a
PAGE NOT FOUNDerror screen (404). Please double-check the route mapping/URLs defined for event details.
Could you please look into these routing and API endpoint issues?
sawantgayatri19
left a comment
sawantgayatri19
left a comment
There was a problem hiding this comment.
Hi @rithika-paii,
I've reviewed and tested the PR locally, but there are a few blocking issues we need to address before merging:
- 404 API Endpoint Errors:The top analytics cards are throwing
Error: Request failed with status code 404. Please ensure the required backend routes (/api/events/popularity,/api/events/engagement,/api/events/value,/api/events/format-comparison) are fully implemented and that PR 1941 is merged/configured correctly. - Broken Navigation / 404 on Details:Clicking on event card "Details" navigates to a 404 Page Not Found screen. Please double-check the route mapping.
- UI / Dark Mode Fixes:
- The
+ Create Newbutton layout needs correction. - Block widths are inconsistent between light and dark modes.
- In the drop-off and no-show rate tracking section, the conditional red/green status text is currently rendering all white in dark mode.
- The
Could you please take a look at these routing, API integration, and styling points?
AdiDubbs
left a comment
AdiDubbs
left a comment
There was a problem hiding this comment.
The analytics layout is headed in a good direction, but the new calendar and image behavior are not working end to end.
The dark-mode calendar rules cannot match because react-calendar's global classes are declared as local CSS-module selectors. The image fallback is unreachable when an event has no image, and the list and calendar still derive from mockEvents, so a successfully created event does not appear in any view.
The PR also includes a shared .claude/ ignore and a Node 20 dependency-resolution change with a large lockfile rewrite. Those may be useful on their own, but they make this analytics feature harder to review and should be split out.
I could not run the complete frontend flow because this branch is currently conflicting. The paired backend controller test suite passes locally.
| color: #fff; | ||
| } | ||
|
|
||
| .calendarDark .react-calendar__tile { |
There was a problem hiding this comment.
These rules through line 606 use react-calendar's own class names, but this is a CSS module. .react-calendar__tile, __navigation, and __month-view__weekdays are compiled as local hashed names, so they never match the library's DOM. The dark-mode calendar block therefore has no effect.
Register.module.css in the same Community Portal tree uses the required pattern, for example :global(.react-calendar__tile). Could the library selectors be wrapped in :global(...) here too?
| {isEventToday(event.eventDate) ? "Today's " : ''} | ||
| {event.eventName} | ||
| </span> | ||
| {event.image || event.imageUrl ? ( |
There was a problem hiding this comment.
This gates the <img> on event.image || event.imageUrl, but getEventImage only returns FALLBACK_IMG when neither exists. That makes the fallback unreachable.
mockData.jsx has no image or imageUrl entries, so no event card currently renders an image. Rendering <img src={getEventImage(event)} /> unconditionally would make the fallback work as intended.
| // Memoized event cache by date for calendar | ||
| const eventCacheByDate = useMemo(() => { | ||
| const cache = new Map(); | ||
| filteredEvents.forEach(event => { |
There was a problem hiding this comment.
This new calendar cache is built from filteredEvents, which comes from filterEvents(mockEvents) above. The create flow only opens the existing modal; it neither appends the created event to state nor refetches events.
As a result, a successfully created event will not appear in the cards, list, or calendar. Is API-backed event state and a refresh after creation meant to be part of this PR?
434d3af to
69ef7e9
Compare
…isibility - Implemented calendar view in MyCases component with react-calendar - Added functionality to '+ Create New' button with navigation - Fixed event images display in case cards with fallback handling - Added comparison chart for engagement levels (Virtual vs In-Person) - Implemented event value display in EventPopularityBreakdown component - Fixed all dark mode text visibility issues across all components - Fixed padding and spacing issues throughout Participation page - Removed console.warn statements for cleaner code - Added comprehensive dark mode styling for all new components - Enhanced CSS modules with proper dark mode support - Fixed duplicate CSS selector in MyCases.module.css
…0 CI compatibility
…ed by SonarQube reliability check
…plate literals, duplicate CSS selectors, color contrast
…:global() bug, and duplicate declarations
69ef7e9 to
78da30b
Compare
…ent-popularity-analytics
…popularity_analytics_frontend
vidiyala99
left a comment
vidiyala99
left a comment
There was a problem hiding this comment.
Tested fa28d2e merged into current development (the merge is clean) with backend OneCommunityGlobal/HGNRest#1941 (56ce0f0, also merged into development) as Administrator, in dark mode, on Community Portal → Reports → Participation. Read-only.
What works:
- The analytics load with real data: the page calls
/api/events/popularity,/events/value,/events/engagementand/events/format-comparison, all without errors (the 404s from the last round are gone). Event Type Breakdown shows Webinar 20 / Meeting 68 / Workshop 107 / Social Gathering 12 events, $5,680 total estimated value, and the engagement row shows 207 events (screenshot 1). Format Comparison shows 179 virtual events. - The calendar is dark in dark mode: the
react-calendargetscalendarDark(backgroundrgb(44, 62, 80), white day numbers) (screenshot 2), which covers the earlier comment about the dark rules not matching.
- The calendar never shows any event, and Card view is blank.
MyCasesnow loads real events (GET /api/events?page=1&limit=200&sortBy=date&sortOrder=desc), but both views are built fromfilteredEvents, which keeps only events whosestartTimeis still in the future. On the dev data none are (the newest is "ZZ Sort Test" on Oct 8, 2026), so:- no day on the calendar is marked, and clicking Oct 8, 2026 says "No events scheduled for this date." (screenshot 2);
- Card view shows an empty Upcoming Events box with no message at all (screenshot 3).
Building the calendar's day map from all loaded events, and showing an empty-state message in Card/List view when nothing is upcoming, would fix both.
Minor, not blocking:
- The summary cards at the top (24 Total Events, 35 Avg Attendance, 840 Total Participants) are still the old mock numbers, while the new sections below show 207 events from the API, so the page disagrees with itself.
- #4941 also changes
MyCases.jsx(Create New adds a local preview event to the list), so whichever merges second will need to reconcile the two.
Requesting changes for item 1.
Screenshot 1: Event Type Breakdown and Engagement Metrics with API data, dark mode
Screenshot 2: calendar on October 2026 after clicking Oct 8, no events shown
Screenshot 3: Card view, Upcoming Events empty with no message
one-community
changed the title
vidiyala99
left a comment
vidiyala99
left a comment
There was a problem hiding this comment.
Re-tested at cae3b36 (it already includes development) with backend OneCommunityGlobal/HGNRest#1941 (56ce0f0) merged into development, as Administrator, in dark mode, on Community Portal → Reports → Participation. Read-only.
Fixed since my last review (both items from round one):
- The calendar shows events now. In October 2026 the 6th, 7th and 8th are marked (the 8th with coloured dots, the 6th and 7th with "+4"), and clicking Oct 8 lists "Events on October 8, 2026" with the three "ZZ Sort Test" workshops (screenshot 1).
- Card and List view have an empty state. With nothing upcoming, both now say "No upcoming events." instead of a blank box.
Still working: the analytics sections load from the API without errors (Event Type Breakdown shows Webinar 20, Meeting 68, Workshop 107 events, screenshot 2).
Requesting changes for one dark mode issue:
- The event type badge is unreadable in dark mode. On the Oct 8 cards the "Workshop" badge is white text on a pale green pill, 1.10:1 contrast by my measurement (
rgb(255,255,255)onrgb(233,247,239)), so the label is practically invisible (screenshot 3). The cause is in the CSS: this PR removes the dark.caseCardDark .eventBadge[data-type=...]rules, and the onlydata-typestyles left are for four mock types (Yoga Class, Cooking Workshop, Dance Class, Fitness Bootcamp). Real events use Workshop, Meeting, Webinar and Social Gathering, which match no rule, so they get the default pale background with the card's white text. A dark-mode badge style that covers every event type (or a default that sets its own text colour) would fix it. I checked dark mode only for this item.
Small notes, not blocking:
- The summary cards at the top (24 Total Events, 35 Avg Attendance, 840 Total Participants) and the Event Type Popularity and Monthly Engagement Trends charts are still the old mock numbers, while the new sections below use the API (207 events), so the page still disagrees with itself.
- #4941 also changes
MyCases.jsx, so whichever merges second will need to reconcile the two.
The backend, OneCommunityGlobal/HGNRest#1941, has not changed since my approval at 56ce0f0, so that approval stands.
Calendar on October 2026: days marked, Oct 8 events listed (dark mode)
Event Type Breakdown and metrics from the API (dark mode)
Workshop badge on an Oct 8 card: white on pale green, 1.10:1 (dark mode)
|
Description
This PR completes the Event Popularity Analytics visualization feature and fixes all dark mode text visibility issues across the Participation Reports page. It implements the remaining frontend requirements including calendar view, Create New button functionality, event images display, and comprehensive dark mode support.
Related PRs
PR 1941
Main Changes
Frontend Components
EventPopularityBreakdown Component (
EventPopularityBreakdown.jsx)EngagementVisuals Component (
EngagementVisuals.jsx)MyCases Component Updates (
MyCases.jsx)NoShowInsights Component (
NoShowInsights.jsx)API Integration
Added new API endpoints in
URL.js:EVENT_POPULARITY(startDate, endDate)EVENT_ENGAGEMENT(startDate, endDate, format)EVENT_VALUE(startDate, endDate)EVENT_FORMAT_COMPARISON(startDate, endDate)Created
eventActions.jswith API call functions:getPopularityMetrics()getEngagementMetrics()getEventValue()getFormatComparison()Styling Improvements
Code Quality
Testing Steps
Navigate to the page:
/communityportal/reports/participationTest Event Popularity Breakdown:
Test Engagement Visuals:
Test Calendar View:
Test Create New Button:
/communityportalTest Event Images:
Test Dark Mode:
Test No-Show Insights:
Screenshots
Reviewer Notes