EventDashboard Component

EventDashboard Component

Component: src/features/events/components/EventDashboard.tsx Route: /app/fundraising/events/:id Access: Authenticated users with Fundraising Hub access Last Updated: March 20, 2026

---

Recent Updates (March 2026)

Audit Implementation (Mar 20, 2026)

• Fixed: Revenue color now uses text-green-600 dark:text-green-400 (POSITIVE_TEXT_CLASS) — was incorrectly using text-primary
• Added: 3-tab layout — Overview | Registrations | Holds (new tab for active ticket holds)
• Added: DesktopOnlyWarning component for mobile users
• Fixed: Hardcoded 'en-US' locale strings replaced with undefined (browser locale)
• Added: i18n for all hardcoded English strings (~25 strings) using useTranslation('events')
• Added: Translated status badges (Published, Draft, Closed, Canceled)

Recent Updates (February 2026)

Styling Guide Alignment (Feb 14, 2026)

• Removed: Stat card icons — tiles now use standard text-center layout with no icons per STYLING-GUIDE.md
• Changed: text-3xl font-semibold → text-2xl font-semibold on all stat numbers
• Removed: Tooltip wrappers from stat subtexts (avg ticket price, check-in rate) — simplified to plain text
• Centered: Title/subtitle block with Check-In button below (was left-aligned with button top-right)
• Removed: Unused imports (ArrowLeft, Users, DollarSign, TrendingUp, PieChart, ExternalLink, Copy, AlertCircle, HelpCircle, Separator, getActualOrgId, Tooltip components)

Recent Updates (January 2026)

Bug Fix: Supabase Client Auth (Jan 13, 2026)

• Fixed: Component was using raw REST API calls with anon key instead of authenticated Supabase client
• Solution: Replaced fetch() calls with supabase.from() queries for proper JWT authentication and RLS enforcement

---

Overview

The EventDashboard provides metrics, reporting, and management tools for a specific event. It displays registration data, revenue, and check-in statistics.

Features

• Quick Stats - Total attendees, revenue, check-in rate
• Overview Tab - Ticket breakdown, registration timeline
• Registrations Tab - Full list with export to CSV
• Quick Actions - Check-In button

UI Layout

┌─────────────────────────────────────────────────────────┐
│ ← Back to Events                                        │
├─────────────────────────────────────────────────────────┤
│ Event Name                                              │
│ Dec 25, 2025 • Location Name                            │
├─────────────────────────────────────────────────────────┤
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ Attendees │ │ Revenue   │ │ Check-In  │ │ Registr.  │ │
│ │    45     │ │  $2,250   │ │   78%     │ │    48     │ │
│ │  /50 cap  │ │  $50 avg  │ │  35/45    │ │  3 canc.  │ │
│ └───────────┘ └───────────┘ └───────────┘ └───────────┘ │
├─────────────────────────────────────────────────────────┤
│                                                         │
│         [ Overview | Registrations | Holds ]            │
│                                                         │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  [Tab Content]                                          │
│                                                         │
├─────────────────────────────────────────────────────────┤
│                                        [Check-In →]     │
└─────────────────────────────────────────────────────────┘

Quick Stats

| Stat | Calculation | Tooltip |

|------|-------------|---------|

| **Attendees** | `total_registrations` / `capacity` | Shows capacity percentage |

| **Revenue** | `total_revenue` | Shows average per ticket |

| **Check-In Rate** | `checked_in` / `total_registrations` | Percentage of checked in |

| **Registrations** | Total count | Shows canceled count |

Tabs

Overview Tab

• Ticket Breakdown - Table showing each ticket type with sold/reserved/remaining counts and revenue
• Registration Timeline - Bar chart showing registrations over last 7 days

Registrations Tab

• Full List - All registrations with name, email, ticket type, amount paid, status
• Export CSV - Download all registration data via SimpleExportDialog

Holds Tab

• Active Ticket Holds - Shows tickets currently held during checkout (15-min expiry)
• Release Hold - Admin can manually release individual holds

State Management

const [activeTab, setActiveTab] = useState<'overview' | 'registrations' | 'holds'>('overview');
const [registrations, setRegistrations] = useState<Registration[]>([]);
const [ticketBreakdown, setTicketBreakdown] = useState<TicketStats[]>([]);

Data Fetching

// Fetch event with related data
const { data: event } = useQuery({
  queryKey: ['event', eventId],
  queryFn: () => fetchEventWithDetails(eventId)
});

// Fetch registrations
const { data: registrations } = useQuery({
  queryKey: ['registrations', eventId],
  queryFn: () => fetchEventRegistrations(eventId)
});

Export CSV

Exports include:

• Registration ID
• Registrant name, email, phone
• Ticket type
• Amount paid
• Payment status
• Check-in status and time
• Custom field responses

Related Components

• EventsManager - Parent list view
• EventCheckIn - Check-in interface
• EventBuilder - Edit event

Related Documentation

• Main Events Doc: ../06-EVENTS-TICKETING.md
• Event Check-In: ./04-EVENT-CHECK-IN.md

Synced from IFMmvp-Frontend documentation: pages/fundraising/events/03-EVENT-DASHBOARD.md