Sireesha taking over Aswin phase3 participation report fixes

[Aswin20010]

Description

This PR addresses issues in Phase 3 – Develop Visualization for HGN Management System.
After the previous PR (#3052) was merged, the /communityportal/reports/participation page was only showing:
The month/year calendar view, and
The registered events list only
The event registration form/page was not accessible, and several UI elements (charts, insights, navigation, CSS layout) were missing or incomplete.
Additionally, CSS modules were not applied, causing inconsistent styling across light/dark mode.
This PR completes all missing functionality and resolves the accessibility and routing issues.

Related PRS (if any):

This PR replaces and extends the functionality from PR #3052 (frontend).
There are no backend PR dependencies

Main changes explained:

1. Restored Navigation + Routing Fixes

• Fixed the routing so /communityportal/reports/participation loads the correct Event Participation landing page.
• Enabled navigation to:
  1. Demographics Insights
  2. Personalization Insights
  3. Event Insights (placeholder)
  4. Create New Registration (temporary mock)

2. Added Missing CSS Modules

• Split all global CSS into module-based CSS.
• Implemented light/dark mode compatibility for:
  1. MyCases
  2. Calendar
  3. No-Show Insights
  4. Drop-Off Tracking
  5. Charts section
  6. New sub-pages

3. Completed Visual Layout Requirements
As per the specification:

• Top Section: Summary metrics
• Mid Section: Comparative charts for event-type no-show & drop-off
• Bottom Section: Insights + re-engagement suggestions (placeholder maintained)

4. Calendar View Completion

• 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.

5. “+ Create New” Functionality

• Button was previously non-functional.
• Redirect now added (temporary placeholder page included).

6. Added Segmentation Views

• Demographics segmentation page
• Personalization insight page
• Updated navigation UI to link all pages.

How to test:

1. Checkout the branch:

• git checkout aswin_phase3_participation_report_fixes
• npm install

2. Run frontend locally:

• npm run start:local

3. Clear browser cache + local storage
4. Login as Admin user
5. Navigate to:
   http://localhost:5173/communityportal/reports/participation
6. 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)
    

7. Verify CSS modules:

• No global selector conflicts.
• Dark mode applies properly across all sections.

Screenshots or videos of changes:

PR.4410.mov

Note:

Reviewers should focus on:

• Routing correctness
• Calendar behavior in both modes
• CSS module isolation
• Navigation between insights pages
• Chart rendering and responsiveness

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	ba1d62f
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/691d24f8c7d166000820338f
😎 Deploy Preview	https://deploy-preview-4410--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
15 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

[beblicarl]

This feature works as intended and the code is great

https://www.loom.com/share/92523d1da4cd4e6783e95dcc7abde60c

[Anusha-Gali]

Hi Aswin,

I have reviewed your PR locally and identified the below issues:

• The calendar is in dark mode and the calendar does not defends any events
• We cannot see the text under calendar in dark mode
• The form is create new is not in dark mode
• The Demographics and Personalization temporary pages are not fully adapted to dark mode and the text in their isn't much visible in dark mode.
• In the Drop-off and no show rate tracking, the text highlighted cannot be seen

4410.mp4

[naznin07]

Mutating date object incorrectly.

[one-community]

Redone with this: #5304