Sireesha phase3 participation report fixes#5304
Conversation
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…odNetworkApp into sireesha_phase3_participation_report_fixes
one-community
added
the
High Priority - Please Review First
HemanthNidamanuru
left a comment
HemanthNidamanuru
left a comment
There was a problem hiding this comment.
Hi Sireesha,
I tested this PR locally on the sireesha_phase3_participation_report_fixes branch.
The page layout is getting cropped and hover tooltips are not visible in dark mode. Future events also show "Jan" instead of the correct month. Please let me know if that last one is in scope for this PR or should be tracked separately.
PR.5304.mp4
DeepighaJ
left a comment
DeepighaJ
left a comment
There was a problem hiding this comment.
- Tested the PR locally and given findings below:
- The layout needs improvement and dark mode tool tips on all graphs are not visible.
- Calendar needs improvement on both the mode, dates are not displayed properly.
- Demographics and Personalization links opens and shows insight placeholder.
- Create new works as expected.
mahathiganimi
left a comment
mahathiganimi
left a comment
There was a problem hiding this comment.
Hi, Tested this branch locally and found some issues in Dark mode. When hovered on the charts, tooltip is not working. When navigating to Demographics and personalisation pages, it would be nice to have a back button to revert back to the current page. The colour palette when highlighting certain areas in Dark mode makes users difficult to read. In mobile view, the page looks crammed.
Would also suggest to clear merge conflicts before getting this PR approved. Requesting the said changes
Abhi-R0211
left a comment
Abhi-R0211
left a comment
There was a problem hiding this comment.
I tested locally on branch sireesha_phase3_participation_report_fixes, logged in as admin, navigated to http://localhost:5173/communityportal/reports/participation. Here is my analysis:
What's Working Well
- Full page layout renders correctly in both light and dark mode — event cards, drop-off/no-show rate tracking, no-show rate insights, comparative charts, monthly trend, and participation by location all present
- Calendar view works in both modes — today's date is highlighted, navigation functions, and the event list for the selected date populates
- Demographics and Personalization buttons route correctly to their sub-pages
- Card view renders event cards correctly in both modes
Issues
- Dark mode chart tooltips — blank white box instead of data
Hovering over any chart in dark mode renders a blank white rectangle with no tooltip content
- Calendar event list — fields concatenated without spaces
Event detail text runs together without separators — e.g. "Event 93Fitness Bootcamp" and "Jun 18, 2026, 12:00 AMSan Francisco+88 attendees" — affecting readability in both modes
- Demographics and Personalization sub-pages — placeholder only, no back button
Both pages show only a single placeholder message with no actual content and no way to navigate back to the main participation page
- Mobile layout cramped at 375px
Comparative charts render as very narrow single-column cards with labels barely fitting the viewport
…odNetworkApp into sireesha_phase3_participation_report_fixes
|
beblicarl
left a comment
beblicarl
left a comment
There was a problem hiding this comment.
This functionality works as intended, and the code is great
HemanthNidamanuru
left a comment
HemanthNidamanuru
left a comment
There was a problem hiding this comment.
Hi Sireesha,
Retested this PR locally on the sireesha_phase3_participation_report_fixes branch. The previously reported issues (layout cropping, hover tooltips in dark mode, and the "Jan" month display) have been resolved.
However, I found a new issue: Card view and List view are not displaying any data.
pixelpix13
left a comment
pixelpix13
left a comment
There was a problem hiding this comment.
Testing Summary
Tested the Event Participation / Social and Recreational Management page locally.
Verified
/communityportal/reports/participationloads correctly.- Calendar view works properly.
- Event bubbles and event sections render.
- Demographics and Personalization navigation buttons are visible.
- “+ Create New” button is visible.
- Dark mode applies to the main page.
- PDF export generates a file.
Main Page
Issue 1 – List View Button Does Not Show the List UI
Clicking the List button does not show the expected list view in the UI.
Expected Behavior
The List button should switch the Upcoming Events section into list view.
Screenshot
Issue 2 – PDF Export Has Dark Blank Section on Last Page
The exported PDF contains a large dark/blank section on the last page.
Expected Behavior
The PDF should export cleanly without extra dark blank sections.
Screenshot
Issue 3 – Mobile Responsiveness Needs Improvement
The page is usable on mobile, but the layout is not fully optimized. Some sections feel cramped and need better spacing/alignment for smaller screens.
Expected Behavior
Mobile layout should be cleaner and easier to use without crowded sections.
Screenshot
Issue 4 – Dark Mode Card Background Inconsistency
Some cards in dark mode have darker backgrounds than others, making the UI look inconsistent.
Expected Behavior
Cards should use consistent dark mode styling across the page.
Screenshot
Issue 5 – Console Errors
There are console errors while using the page.
Expected Behavior
The page should load and function without console errors related to this feature.
Screenshot
Overall Assessment
The main routing, calendar view, and core page layout are working, but I am requesting changes for the list view behavior, PDF export issue, mobile responsiveness, dark mode card consistency, and console errors.
kzou55
left a comment
kzou55
left a comment
There was a problem hiding this comment.
Hi Sireesha,
I ran and tested the current branch locally.
Verified
- Calendar page is working
- The navigation UI for the demographics and personalization page is functional and leads to their correct pages(blank for now)
- Create New button opens up a form
- Graphs/Charts have the correct tooltip when hovered
- Dark Mode works
Testing in Light Mode
Recording.2026-06-26.154001.mp4
Testing in Dark Mode
Recording.2026-06-26.154116.mp4
Issues:
-
Card view and List view are not showing any data
-
PDF/Export has a blank dark section
-
On smaller screens, in the calendar section, the layout seems a bit off and could be improved by centering the calendar component.
-
Not sure if this is within scope of this PR, but clicking the export data button generates a section with improper layout.
9 participants
Description
Related PRS (if any):
This frontend PR is related to the #3052, #4401 backend PR.
There are no backend PR dependencies
…
Main changes explained:
Fixed the routing so /communityportal/reports/participation loads the correct Event Participation landing page.
Enabled navigation to:
Demographics Insights
Personalization Insights
Event Insights (placeholder)
Create New Registration (temporary mock)
Restored the original calendar UI layout.
Implemented event bubbles + event list below the calendar.
Fixed dark mode date visibility.
Ensured weekday labels, tiles, and event dots inherit theme colors.
Button was previously non-functional.
Redirect now added (temporary placeholder page included).
Demographics segmentation page
Personalization insight page
Updated navigation UI to link all pages.
…
How to test:
git checkout sireesha_phase3_participation_report_fixes
npm install
Run frontend locally:
npm run start:local
Clear browser cache + local storage
Login as Admin user
Navigate to:
http://localhost:5173/communityportal/reports/participation
Verify the following:
Event Participation page loads with full layout.
Calendar shows days correctly in both light and dark mode.
Event bubbles appear in the correct dates.
Event details display when a date is selected.
Charts render correctly.
No-show insights tabs function.
“+ Create New” redirects.
Navigation buttons open:
Demographics
Personalization
Event Insights (placeholder)
Verify CSS modules:
No global selector conflicts.
Dark mode applies properly across all sections.
Screenshots or videos of changes:
PR.5304.mov
Note:
Include the information the reviewers need to know.