diff --git a/src/components/CommunityPortal/Reports/Participation/AnalyticsNavigation.jsx b/src/components/CommunityPortal/Reports/Participation/AnalyticsNavigation.jsx new file mode 100644 index 0000000000..398bfcc434 --- /dev/null +++ b/src/components/CommunityPortal/Reports/Participation/AnalyticsNavigation.jsx @@ -0,0 +1,70 @@ +import { useSelector } from 'react-redux'; +import styles from './Participation.module.css'; + +function AnalyticsNavigation() { + const darkMode = useSelector(state => state.theme.darkMode); + + const navigationItems = [ + { + title: 'Virtual vs. In-Person Attendance', + description: 'Compare attendance patterns between virtual and in-person events', + icon: 'π»', + link: '/communityportal/reports/participation/virtual-vs-inperson', + stats: '65% Virtual, 35% In-Person', + }, + { + title: 'Estimated Event Value', + description: 'Calculate and analyze the estimated value of different event types', + icon: 'π°', + link: '/communityportal/reports/participation/event-value', + stats: 'Avg Value: $2,400', + }, + { + title: 'Participation Trends', + description: 'Track participation trends over time and identify patterns', + icon: 'π', + link: '/communityportal/reports/participation/trends', + stats: '+15% Growth', + }, + { + title: 'Event Performance Metrics', + description: 'Detailed performance metrics for individual events', + icon: 'π', + link: '/communityportal/reports/participation/performance', + stats: '24 Active Events', + }, + ]; + + return ( +
+ Explore detailed analytics and insights for event participation +
+ +{item.description}
++ Central hub for accessing event participation data and analytics +
++ Detailed performance metrics for individual events +
+ +| Event Name | +Type | +Date | +Attendance | +Rating | +Engagement | +Value | +Status | +
|---|---|---|---|---|---|---|---|
| {event.name} | +{event.type} | +{event.date} | +
+ {event.attendance}/{event.capacity}
+
+
+
+ |
+ + {event.rating} + + {'β '.repeat(Math.floor(event.rating))} + {'β'.repeat(5 - Math.floor(event.rating))} + + | +
+ {event.engagement}%
+
+
+
+ |
+ ${event.value.toLocaleString()} | ++ + {event.status} + + | +
Morning Yoga Flow leads with 4.8 rating and 92% engagement
+Average 87% capacity utilization across all events
+High-Intensity Bootcamp generates highest value at $4,500
+Focus on expanding successful event formats and improving underperformers
+Loading popularity metrics...
+Error: {error}
+No popularity metrics available
++ Calculate and analyze the estimated value of different event types +
+ +| Event Type | +Estimated Value | +Participants | +Cost per Person | +ROI | +
|---|---|---|---|---|
| {event.type} | +${event.value.toLocaleString()} | +{event.participants} | +${event.costPerPerson} | +{event.roi}% | +
Fitness Bootcamp generates the highest return on investment at 340%
+Dance Class offers the best cost per person at $60 with 240% ROI
+Focus on expanding high-value events like Fitness Bootcamp
+Event values are trending upward with 22% quarterly growth
++ Track participation trends over time and identify patterns +
+ +| Event Type | +Trend | +Growth | +Total Participants | +Status | +
|---|---|---|---|---|
| {event.type} | ++ {event.trend === 'up' && 'π Growing'} + {event.trend === 'stable' && 'β‘οΈ Stable'} + {event.trend === 'down' && 'π Declining'} + | +{event.growth} | +{event.participants} | ++ {event.trend === 'up' && Excellent} + {event.trend === 'stable' && Good} + {event.trend === 'down' && ( + Needs Attention + )} + | +
Overall participation shows consistent 15% growth with peak in June
+Yoga Class and Fitness Bootcamp show strongest growth trends
+Dance Class participation declining - review format and timing
+Focus on expanding successful formats and revitalizing declining ones
++ Compare attendance patterns between virtual and in-person events +
+ +| Metric | +Virtual Events | +In-Person Events | +Winner | +
|---|---|---|---|
| {item.metric} | +{item.virtual} | +{item.inPerson} | ++ {item.winner === 'virtual' && 'π» Virtual'} + {item.winner === 'inPerson' && 'π’ In-Person'} + {item.winner === 'tie' && 'π€ Tie'} + | +