\n \n \n \n\n
\n \n
\n \n\n \n \n 
\n \n
\n \n
\n Event mode
\n Booked Event
\nManage, prepare, and run your confirmed events.
\n\n
\n \n {([['upcoming', `Upcoming ${upcoming.length}`], ['today', `Today ${todayEvents.length}`], ['week', `This Week ${weekEvents.length}`], ['history', `Past ${history.length}`]] as Array<[View, string]>).map(([key, label]) => (\n \n ))}\n
\n setEventSearch(event.target.value)} placeholder=\"Search events or customers…\" className=\"min-h-[42px] w-full rounded-xl border border-white/10 bg-black/30 px-3 text-xs font-bold text-white outline-none placeholder:text-white/30 focus:border-[#72dbff]/35\" />\n \n \n \n\n \n {!selected ? \n
\n \n \n {visibleEvents.length}\n
\n Booked Event
Upcoming Events
\n {bookingsQuery.isLoading ? : null}\n {visibleEvents.map((event) => {\n const date = event.event_date ? new Date(`${event.event_date}T12:00:00`) : null;\n const active = selected?.id === event.id;\n const canceled = eventIsCanceled(event);\n return (\n \n );\n })}\n
\n Loading events…
: null}\n {!bookingsQuery.isLoading && visibleEvents.length === 0 ? No events in this view.
Switch tabs or create a new event.
Select a booked event.
Its live details, prep, inventory, customer, and actions will appear here.
\n \n \n\n
\n )}\n \n \n
\n Selected booked event
{selected.event_name}
{selected.stage}{eventCustomerName(selected)}{selected.event_type ? ` · ${selected.event_type}` : ''}
Edit Event{selectedAction ? {selectedAction.label} : null}
\n \n \n \n \n \n
\n When
{eventDateLabel(selected)}
{eventTimeLabel(selected)}
Where
{selected.venue_name || selected.location || 'TBD'}
{selected.location || 'Location not set'}
Service
{selected.quoted_units ?? selected.guest_count ?? '—'} {selected.service_unit_label || 'units / guests'}
{selected.service_package || selected.event_type || 'Service details'}
Money
{moneyLabel(selected.quote_amount)}
Balance {moneyLabel(selected.balance_due)}
{statusSteps.map((label, index) => { const complete = index < selectedEventStep; const current = index === selectedEventStep; return ; })}
\n {complete ?
{label}
\n
\n\n Event timeline
Event schedule
Time{eventTimeLabel(selected)}
Date{eventDateLabel(selected)}
Loadout{selectedLoadoutSummary.ready}/{selectedLoadoutSummary.total} ready
Location
{selected.venue_name || 'Event location'}
{selected.location || 'Address not set'}
{mapHref ? Open in Maps : null}Weather forecast
{selectedEventWeather ? <>{Math.round(selectedEventWeather.high)}°
{selectedEventWeather.label}
Low
{Math.round(selectedEventWeather.low)}°
Rain
{Math.round(selectedEventWeather.rainChance)}%
{selectedEventWeatherQuery.isFetching ? 'Loading forecast…' : 'Weather appears when the event has a dated location.'}
}\n {selectedWorkflowSteps.length ? Math.round((selectedWorkflowComplete / selectedWorkflowSteps.length) * 100) : 0}% \n Adjust \n
\n\n Event checklist
{selectedWorkflowComplete} of {selectedWorkflowSteps.length} complete
{selectedWorkflowSteps.slice(0, 8).map((step) =>
{step.status === 'complete' ?
)}{!selectedWorkflowSteps.length ? No event checklist has been created yet.
: null}Inventory for this event
Current flavor stock
{bookedEventFlavors.slice(0, 7).map((item) => { const qty = Number(item.quantity_on_hand || 0); const reorder = Number(item.reorder_point || 0); return {qty}; })}{!bookedEventFlavors.length ?
{item.name}
{item.unit || 'on hand'}
{bookedEventInventoryQuery.isFetching ? 'Loading inventory…' : 'No flavor inventory is available.'}
: null}\n
\n Event setup
Setup
{selected.setup || 'Not set'}
Package
{selected.service_package || 'Not set'}
Loadout
{selectedLoadoutSummary.ready}/{selectedLoadoutSummary.total} ready
Quick actions
{selectedAction ? {selectedAction.label} : null}ProposalPayment / Invoice
\n
\n Customer
{eventCustomerName(selected)}
{selected.customer?.phone ? {selected.customer.phone} : null}{selected.customer?.email ? {selected.customer.email} : null}
Open customerInternal notes
{selectedNotes || 'No internal event notes yet.'}