Akshith - Enhance Interactivity adding filters in the Event Participation Page

[akshith312]

Description

Related PRS (if any):

This frontend PR is related to the #3192
…

Main changes explained:

• Added Filters based on Date, Time of Day, and Event Types
• Added Detailed Report Section on click of each event
  …

How to test:

1. check into current branch
2. do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. log as any user
5. go to dashboard→ http://localhost:5173/EventPopularity
6. Follow Video and Check if the filters and detailed report is informative.

Screenshots or videos of changes:

Screen.Recording.2026-01-16.004258.mp4

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	1028ae6
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a168f3acba0d400089823af
😎 Deploy Preview	https://deploy-preview-4695--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.

[sonarqubecloud]

Quality Gate passed

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

[HemanthNidamanuru]

Hi Akshith,

I tested the PR locally. Visuals and metrics are working as expected. A few issues to fix:

1. Dark mode is not applied correctly.
2. Bar chart hover tooltip/highlight is blending into the background. Please make it more distinct.
3. Date filter is not working. Selecting a date has no effect on the displayed events.
4. Future dates can be selected in the date picker.

[Anusha-Gali]

Hi Akshith,

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

• The dark mode is not adapted for the whole page
• There is no header in the page
• The date filter does not seem to work and has no restrictions
• The hover tool in Event Registration is not visible clearly in both modes

4695.mov

[DeepighaJ]

Hi
Checkout to current branch and ran PR locally. The date filters and event type and Time of Day filters are applied to the bar chart and Event Registration trend. Filtering of data is rendering correctly as per selection of filter in lightmode.
There is no header to switch the darkmode/lightmode. Navigating back to url is the only way to choose. Components are not displayed properly in Dark mode.

[HemanthNidamanuru]

[DeepighaJ]

Hi
The date filters and event type and Time of Day filters are applied to the bar chart and Event Registration trend. Clicking on bar chat shows timeslot details as expected.
But Dark mode still not displayed properly. Navigating back to url is the only way to choose dark/light mode.
Clicking on the View Detailed Report in Participation Details has no effect. No report is viewed.

[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

[HemanthNidamanuru]

Hi Akshith,

I tested the PR again locally. Most of the previously reported issues have been fixed and everything is working well.

One minor issue still remains: the calendar alignment in dark mode is slightly off and needs adjustment.

Other than that, the implementation looks good from my side.