Implement Analytics Page

[gionare]

Task: Implement Analytics Page

Objective: Create a page that provides event organizers with analytics and insights about their events, including attendee statistics and RSVP responses.

Requirements:

• Display overall statistics for all events:
  • Total number of events created
  • Total number of attendees across all events
  • RSVP response rate (percentage of attendees who confirmed)
• Provide detailed analytics for each event:
  • Number of invited attendees
  • Number of confirmed attendees (RSVP Yes)
  • Number of declined attendees (RSVP No)
  • Number of pending responses
• Use data visualization libraries (e.g., Chart.js or D3.js) to create:
  • Bar charts for attendee numbers
  • Pie charts for RSVP response rates
• Implement date range filtering to allow organizers to view analytics for specific time periods.

Additional Features:

• Allow users to download analytics reports as CSV or PDF.
• Implement tooltips on charts for more detailed information.
• Include a summary section at the top highlighting key insights.

Design Considerations:

• Ensure a clean and user-friendly layout.
• Follow consistent design and styling guidelines across the app.
• Make sure the page is responsive and works on various screen sizes.

Dependencies:

• Backend API for fetching event analytics data.
• Chart.js or D3.js library for data visualization.

Checklist:

• [ ] Create layout for analytics overview.
• [ ] Implement data fetching for overall and event-specific statistics.
• [ ] Integrate Chart.js or D3.js for visualizing data.
• [ ] Add date range filtering functionality.
• [ ] Implement download functionality for reports.
• [ ] Ensure responsive design for mobile and desktop.

[gionare]

Data to Send (Get Event Analytics)

{ "eventId": "eventId" }

Data to Receive

{ "eventId": "eventId", "totalAttendees": 100, "rsvpStats": { "accepted": 60, "declined": 20, "pending": 20 } }

Types

interface RSVPStats { accepted: number; declined: number; pending: number; }

interface EventAnalyticsResponse { eventId: string; totalAttendees: number; rsvpStats: RSVPStats; }