​
Event Payments

Doc Status: Excellent | ✓ Clear summary | ✓ Easy to read | ✓ Matches code | ✓ Good structure | ✓ Professional look | ✓ Visual components

​
Why This Matters

The Event Payments page gives admins a comprehensive financial view of each event. It shows all payments collected for a specific show occurrence, broken down by payment method (VISA, MASTER, JCB, etc.), with status details. This helps track revenue, identify failed payments, and reconcile the day’s earnings.

​
Staff Journey

​
Three-Panel Layout

The page uses a three-panel design:
  1. Left Panel (Event Selector): Choose which event to view payments for
  2. Middle Panel (Payment List): See all payments for the selected event
  3. Right Panel (Payment Detail): View detailed information about a specific payment

​
Selecting an Event

1

Scroll through events

In the left panel, browse the list of events.
2

Identify the event

Each event shows: Show name, date, time.
3

Load payments

Click on an event to view its payment details in the middle and right panels.

​
Viewing Payment List

The middle panel shows all payments for the selected event:
  • Each row shows: Guest name, amount, payment method, status
  • Payment statuses:
    • Success: Payment completed
    • Pending: Awaiting confirmation
    • Failed: Payment attempt failed

​
Viewing Payment Details

Click on any payment to see full details in the right panel:
  • Guest Information: Name, email
  • Event Details: Show, date, time
  • Order Summary: Tickets, add-ons, totals
  • Payment Details:
    • Payment method (VISA, MASTER, JCB, VA_VNPAY, etc.)
    • Transaction ID
    • Amount paid
    • Payment status
    • Timestamp

​
Per-Event Financial Summary

When an event is selected, the top of the middle panel shows:
  • Total revenue
  • Ticket breakdown (Dinner vs Show-only counts)
  • Count of paid, pending, refunded, and failed payments
Implementation Notes (2026-05-12):
  • The summary displays ticket type breakdown (Dinner/Show-only) rather than payment method breakdown
  • Payment method breakdown would require additional aggregation in the backend query
  • The failedCount field was added to getEventStats to track failed payments

​
Key Concepts

  • Payment Method: How the guest paid (credit card types, bank transfer, etc.)
  • Transaction ID: Unique identifier from the payment processor
  • Payment Status: Current state of the payment (Success, Pending, Failed)
  • Event Selector: Left panel for choosing which event to view

​
Technical Details

ComponentFilePurpose
EventSelectorcomponents/admin/event-payments/event-selector.tsxLeft panel event list
PaymentListcomponents/admin/event-payments/payment-list.tsxMiddle panel payment list
PaymentDetailcomponents/admin/event-payments/payment-detail.tsxRight panel payment details
EventPaymentsProvidercontexts/event-payments-context.tsxState management for panel selection
EventPaymentSummarycomponents/admin/event-payments/event-payment-summary.tsxFinancial summary with revenue and status counts
Query/MutationPurpose
events.listForDashboardFetch all events for selector
reservations.getEventStatsFetch aggregated stats for selected event
reservations.getPaidReservationsByEventFetch paid reservations for event
reservations.getByIdFetch single reservation details

​
See Also

Admin Dashboard

Dashboard overview and navigation

Reservations

Viewing and managing reservations

Payments

Payment integration details

Kitchen Display

Kitchen station order display

Reception View

Table overview for reception staff