EventsManager Component

EventsManager Component

Component: src/features/events/components/EventsManager.tsx Route: /app/fundraising/events Access: Authenticated users with Fundraising Hub access Last Updated: February 14, 2026

---

Recent Updates (February 2026)

Fix: Events Query Hardening (Feb 14, 2026)

• Fixed: Events list could show "0 events found" due to stale React Query cache
• Solution: Added staleTime: 30_000, retry: 2, refetchOnMount: true to useEvents hook

Fix: Auction Item Creation Bug (Feb 14, 2026)

• Fixed: Auction items created during new event creation silently failed — raw supabase.from() call was missing item_number (NOT NULL column)
• Solution: Replaced raw Supabase call with createAuctionItem mutation in EventBuilder save handler

Fix: .single() → .maybeSingle() (Feb 14, 2026)

• Fixed: fetchEventBySlug and validatePromoCode used .single() which throws on 0 rows
• Solution: Changed to .maybeSingle() for graceful null handling

Edge Function: get-public-event v17 (Feb 14, 2026)

• Added: collect_sales_tax field to public event response

Migration: RLS Policy Normalization (Feb 14, 2026)

• Fixed: event_ticket_holds and event_ticket_hold_items used is_parent_org() instead of is_parent_org_admin()
• Solution: Normalized to match all other event table policies

Recent Updates (January 2026)

Feature: QR Code Button for Events (Jan 21, 2026)

• Added: QR Code button next to Check-In button in event list
• Feature: Opens modal with QR code for event registration URL
• Download: Users can download QR code as PNG for marketing materials
• Implementation: Uses external API (api.qrserver.com) consistent with existing QR code usage in DonorPortal and EventRegistrationSuccess

Bug Fix: Admin View Guard (Jan 13, 2026)

• Fixed: Users could enter the EventBuilder from admin view, fill out the entire form, then receive an error at save time
• Solution: Added early guard in handleCreateEvent() that checks isAdminView(selectedEntity) and shows toast error before entering the builder

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

• Fixed: EventDashboard and EventCheckIn were 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 EventsManager is the main list view for managing events within the Fundraising Hub. It provides filtering, searching, and quick actions for all organization events.

Features

• Event List - Card-based display of all events
• Status Badges - Draft, Published, Closed, Canceled
• Search - Filter by event name
• Filters - Status, event type, time period (upcoming/past)
• Quick Actions - View, Edit, Copy URL, Publish, End Registration, Delete
• Metrics Display - Registration count and revenue per event

UI Layout

┌─────────────────────────────────────────────────────────┐
│ ← Back to Fundraising Hub          + Create Event         │
├─────────────────────────────────────────────────────────┤
│ [Search...]  [Status ▼]  [Type ▼]                       │
│                                                         │
│              [ Upcoming | Past ]                        │
├─────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Event Name                           [Published]    │ │
│ │ Dec 25, 2025 • Location Name                        │ │
│ │ 45 registrations • $2,250 revenue                   │ │
│ │                                                     │ │
│ │ [Check-In] [QR] [Copy] [Edit] [⋮]                   │ │
│ └─────────────────────────────────────────────────────┘ │
│                                                         │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Another Event                            [Draft]    │ │
│ │ ...                                                 │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘

State Management

const [events, setEvents] = useState<Event[]>([]);
const [searchQuery, setSearchQuery] = useState('');
const [statusFilter, setStatusFilter] = useState<string>('all');
const [typeFilter, setTypeFilter] = useState<string>('all');
const [timeFilter, setTimeFilter] = useState<'upcoming' | 'past'>('upcoming');
const [view, setView] = useState<'list' | 'detail' | 'checkin' | 'builder'>('list');
const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);

Actions

| Action | Description | Confirmation |

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

| **View** | Opens EventDashboard | No |

| **Check-In** | Opens EventCheckIn | No |

| **QR Code** | Opens modal with QR code for registration URL | No |

| **Edit** | Opens EventBuilder | Warning if published |

| **Copy URL** | Copies public URL to clipboard | Toast notification |

| **Publish** | Changes status to 'published' | No |

| **End Registration** | Changes status to 'closed' | Yes |

| **Delete** | Removes event | Yes |

View Modes

The component manages multiple views internally:

| View | Component | Trigger |

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

| `list` | Event cards list | Default |

| `detail` | `EventDashboard` | Click event card |

| `checkin` | `EventCheckIn` | Click "Check-In" button |

| `builder` | `EventBuilder` | Click "Create Event" or "Edit" |

Filtering Logic

const filteredEvents = events.filter(event => {
  // Search filter
  if (searchQuery && !event.name.toLowerCase().includes(searchQuery.toLowerCase())) {
    return false;
  }
  
  // Status filter
  if (statusFilter !== 'all' && event.status !== statusFilter) {
    return false;
  }
  
  // Type filter
  if (typeFilter !== 'all' && event.event_type !== typeFilter) {
    return false;
  }
  
  // Time filter (upcoming vs past)
  const eventDate = new Date(event.start_date);
  const now = new Date();
  if (timeFilter === 'upcoming' && eventDate < now) return false;
  if (timeFilter === 'past' && eventDate >= now) return false;
  
  return true;
});

Related Components

• EventBuilder - Create/edit events
• EventDashboard - Event metrics and reporting
• EventCheckIn - Check-in interface
• MarketingHub - Parent navigation hub

Related Documentation

• Main Events Doc: ../06-EVENTS-TICKETING.md
• Event Builder: ./02-EVENT-BUILDER.md
• Event Dashboard: ./03-EVENT-DASHBOARD.md

Synced from IFMmvp-Frontend documentation: pages/marketing/events/01-EVENTS-MANAGER.md