function StatCard({ label, value, sub, tone }) { const str = String(value); const fontSize = str.length > 12 ? 'var(--text-lg)' : str.length > 9 ? 'var(--text-xl)' : str.length > 6 ? 'var(--text-2xl)' : 'var(--text-3xl)'; return (
{label}
{value}
{sub &&
{sub}
}
); } function SubEventCard({ s, onOpen }) { const catColor = window.catColorMap[s.category] || 'var(--brand-primary)'; const pct = s.capacity ? Math.round((s.booked / s.capacity) * 100) : 0; return (
{ e.currentTarget.style.boxShadow = 'var(--shadow-md)'; e.currentTarget.style.transform = 'translateY(-2px)'; }} onMouseLeave={(e) => { e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; e.currentTarget.style.transform = 'none'; }}>
{s.num} {s.title}
{s.date}{s.booked}/{s.capacity} booked
); } function BarChart({ data, valueFmt }) { if (!data.length) return
No revenue yet.
; const max = Math.max.apply(null, data.map((d) => d.value)); return (
{data.map((d) => (
{d.label}{valueFmt(d.value)}
))}
); } function OverviewScreen({ onOpenEvent, onGotoEvents }) { const { Badge, Button } = window.TheUpperDeckDesignSystem_4d3294; const [orders, setOrders] = React.useState(null); const [mainEvents, setMainEvents] = React.useState(null); React.useEffect(() => { Promise.all([window.fetchOrdersLive(), window.fetchMainEventsLive()]).then(([o, m]) => { setOrders(o); setMainEvents(m); }); }, []); if (!orders || !mainEvents) return
Loading…
; const paidOrders = orders.filter((o) => o.status === 'paid'); const totalRevenue = paidOrders.reduce((s, o) => s + o.amount, 0); const activeEvents = mainEvents.filter((m) => m.status === 'published').length; const checkedInRate = paidOrders.length ? Math.round(paidOrders.filter((o) => o.checkedIn).length / paidOrders.length * 100) : 0; const revenueByMain = {}; paidOrders.forEach((o) => { revenueByMain[o.mainTitle] = (revenueByMain[o.mainTitle] || 0) + o.amount; }); const topEvents = Object.keys(revenueByMain).map((k) => ({ label: k, value: revenueByMain[k] })).sort((a, b) => b.value - a.value).slice(0, 5); const withSubs = mainEvents.filter((m) => m.subEvents.length > 0); const latest = withSubs[withSubs.length - 1] || mainEvents[mainEvents.length - 1]; const today = new Date().toISOString().slice(0, 10); const upcoming = mainEvents.flatMap((m) => m.subEvents.map((s) => ({ ...s, mainId: m.id }))).filter((s) => s.dateIso >= today).sort((a, b) => a.dateIso.localeCompare(b.dateIso)).slice(0, 6); return (
{latest && (
Latest main event

{latest.title}

{latest.dateRange || 'No sub-events scheduled'} · {latest.venue}
)} {latest && latest.subEvents.length > 0 && (
Sub-events under {latest.title}
{latest.subEvents.map((s) => o.eventId === s.id && o.status === 'paid').length }} onOpen={() => onOpenEvent(latest.id)} />)}
)}
Recent orders
{orders.slice(0, 6).map((o) => ( ))} {orders.length === 0 && }
RefBuyerEventAmountStatus
{o.ref.slice(0, 8)} {o.buyer} {o.eventTitle} {window.fmtUSD(o.amount)} {o.status}
No orders yet.
Top events by revenue
Upcoming sessions
{upcoming.map((u) => (
onOpenEvent(u.mainId)} style={{ display: 'flex', alignItems: 'center', gap: 10, paddingBottom: 10, borderBottom: '1px solid var(--border-default)', cursor: 'pointer' }}>
{u.title}
{u.date}
))} {upcoming.length === 0 &&
No upcoming sessions.
}
All main events
{mainEvents.length === 0 ? (
No events yet.
) : (
{mainEvents.map((m) => (
onOpenEvent(m.id)} style={{ display: 'flex', justifyContent: 'space-between', gap: 8, fontSize: 'var(--text-sm)', cursor: 'pointer' }}> {m.title} {m.status}
))}
)}
); } window.OverviewScreen = OverviewScreen;