const NAV = [ { key: 'overview', label: 'Overview', icon: 'M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z' }, { key: 'events', label: 'Events', icon: 'M8 2v4M16 2v4M3 9h18M5 5h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2z' }, { key: 'finances', label: 'Finances', icon: 'M12 1v22M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6' }, { key: 'orders', label: 'Orders', icon: 'M6 2l1.5 4h9L18 2M4 6h16l-1.5 13a2 2 0 01-2 1.8H7.5a2 2 0 01-2-1.8L4 6zM9 10v6M15 10v6' }, { key: 'certificates', label: 'Certificates', icon: 'M12 15a4 4 0 100-8 4 4 0 000 8zM8.5 13.5L7 22l5-3 5 3-1.5-8.5' }, { key: 'users', label: 'Users', icon: 'M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75' }, { key: 'scanner', label: 'Scan check-in', icon: 'M3 7V5a2 2 0 012-2h2M17 3h2a2 2 0 012 2v2M21 17v2a2 2 0 01-2 2h-2M7 21H5a2 2 0 01-2-2v-2M7 12h10' }, { key: 'scheduler', label: 'Scheduler', icon: 'M3 4h18v17H3V4zm0 6h18M8 2v4M16 2v4' }, { key: 'system', label: 'Settings', icon: 'M12 15a3 3 0 100-6 3 3 0 000 6zM19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z' }, ]; function Icon({ d, size }) { return ; } function Sidebar({ screen, setScreen, collapsed, onToggleCollapse, companyAddress, mobileOpen, onCloseMobile }) { return (
{!collapsed && }
{collapsed && }
Admin
{NAV.map((n) => { var active = screen === n.key || (n.key === 'events' && screen === 'event-detail'); return (
{ setScreen(n.key); onCloseMobile && onCloseMobile(); }} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 'var(--radius-md)', cursor: 'pointer', background: active ? 'var(--brand-primary)' : 'transparent', color: active ? 'white' : 'var(--text-on-dark-muted)', fontWeight: active ? 600 : 500, fontSize: 'var(--text-sm)', transition: 'background 120ms ease', justifyContent: collapsed ? 'center' : 'flex-start' }}> {!collapsed && {n.label}}
); })}
{companyAddress || 'The Upper Deck Sports Event Center · Ortigas Technopoint, Pasig'}
); } const NOTIFICATIONS = []; function useClickOutside(open, onClose) { const ref = React.useRef(null); React.useEffect(() => { if (!open) return; function handler(e) { if (ref.current && !ref.current.contains(e.target)) onClose(); } document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }, [open]); return ref; } function Dropdown({ open, children, width }) { if (!open) return null; return
{children}
; } function Topbar({ onGoto, adminUser, onSignOut, onOpenMobileNav }) { const [notifOpen, setNotifOpen] = React.useState(false); const [profileOpen, setProfileOpen] = React.useState(false); const [notifications, setNotifications] = React.useState([]); React.useEffect(() => { window.fetchOrdersLive().then((orders) => { const pending = orders.filter((o) => o.status === 'pending').slice(0, 8).map((o) => ({ title: 'Payment awaiting verification · ' + o.eventTitle + ' (' + o.buyer + ')', time: new Date(o.purchasedOn).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }), unread: true, })); setNotifications(pending); }); }, []); const unreadCount = notifications.filter((n) => n.unread).length; function markAllRead() { setNotifications((ns) => ns.map((n) => ({ ...n, unread: false }))); } function markRead(i) { setNotifications((ns) => ns.map((n, idx) => idx === i ? { ...n, unread: false } : n)); } const notifRef = useClickOutside(notifOpen, () => setNotifOpen(false)); const profileRef = useClickOutside(profileOpen, () => setProfileOpen(false)); return (
Notifications {unreadCount > 0 && Mark all as read}
{notifications.map((n, i) => (
markRead(i)} style={{ padding: '12px 16px', borderBottom: i < notifications.length - 1 ? '1px solid var(--border-default)' : 'none', cursor: 'pointer', display: 'flex', gap: 8, alignItems: 'flex-start' }} className="ud-row">
{n.title}
{n.time}
))} {notifications.length === 0 &&
No pending orders right now.
}
{ setProfileOpen((o) => !o); setNotifOpen(false); }} style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', background: 'var(--bg-sunken)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', padding: '6px 14px 6px 6px' }}>
{((adminUser && adminUser.first_name && adminUser.first_name[0]) || 'A') + ((adminUser && adminUser.last_name && adminUser.last_name[0]) || '')}
{adminUser ? (adminUser.first_name + ' ' + adminUser.last_name) : 'Admin'}
Admin
{[{ label: 'Account', screen: 'account-profile' }, { label: 'Settings', screen: 'account-settings' }, { label: 'Log out', screen: null }].map((item, i) => (
{ setProfileOpen(false); if (item.screen) onGoto(item.screen); else onSignOut(); }} className="ud-row" style={{ padding: '11px 16px', fontSize: 'var(--text-sm)', cursor: 'pointer', borderTop: i > 0 ? '1px solid var(--border-default)' : 'none', color: item.label === 'Log out' ? 'var(--status-error)' : 'var(--text-primary)' }}>{item.label}
))}
); } function AdminLogin({ onLoggedIn }) { const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [error, setError] = React.useState(''); const [busy, setBusy] = React.useState(false); async function submit(e) { e.preventDefault(); setError(''); setBusy(true); const { data, error: err } = await window.sb.auth.signInWithPassword({ email, password }); if (err) { setError(err.message); setBusy(false); return; } const { data: profile } = await window.sb.from('profiles').select('*').eq('id', data.user.id).single(); setBusy(false); if (!profile || profile.role !== 'admin') { setError('This account does not have admin access.'); await window.sb.auth.signOut(); return; } onLoggedIn(profile); } return (
The Upper Deck
Admin dashboard
{error &&

{error}

} setEmail(e.target.value)} type="email" placeholder="Email" required style={{ padding: '10px 12px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-default)', fontSize: 'var(--text-sm)' }} /> setPassword(e.target.value)} type="password" placeholder="Password" required style={{ padding: '10px 12px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-default)', fontSize: 'var(--text-sm)' }} />
); } const TITLES = { overview: 'Overview', events: 'Events', 'event-detail': 'Event details', finances: 'Finances', orders: 'Orders & attendees', certificates: 'Certificates', scheduler: 'Scheduler', account: 'My account', system: 'System settings' }; function App() { const [screen, setScreen] = React.useState('overview'); const [activeEventId, setActiveEventId] = React.useState(null); const [accountTab, setAccountTab] = React.useState('profile'); const [collapsed, setCollapsed] = React.useState(false); const [companyAddress, setCompanyAddress] = React.useState('The Upper Deck Sports Event Center · Ortigas Technopoint, Pasig'); const [adminUser, setAdminUser] = React.useState(null); const [checkingSession, setCheckingSession] = React.useState(true); const [mobileNavOpen, setMobileNavOpen] = React.useState(false); React.useEffect(() => { window.sb.auth.getSession().then(async ({ data }) => { if (data.session) { const { data: profile } = await window.sb.from('profiles').select('*').eq('id', data.session.user.id).single(); if (profile && profile.role === 'admin') setAdminUser(profile); } setCheckingSession(false); }); }, []); function onSignOut() { window.sb.auth.signOut(); setAdminUser(null); setScreen('overview'); } function gotoEvent(id) { setActiveEventId(id); setScreen('event-detail'); setMobileNavOpen(false); } function gotoAccount(key) { setAccountTab(key === 'account-settings' ? 'settings' : 'profile'); setScreen('account'); } if (checkingSession) return null; if (!adminUser) return ; let content; if (screen === 'events') content = ; else if (screen === 'event-detail') content = setScreen('events')} adminId={adminUser.id} />; else if (screen === 'finances') content = ; else if (screen === 'orders') content = ; else if (screen === 'certificates') content = ; else if (screen === 'users') content = ; else if (screen === 'scheduler') content = ; else if (screen === 'scanner') content = ; else if (screen === 'account') content = ; else if (screen === 'system') content = ; else content = setScreen('events')} />; return (
setCollapsed((c) => !c)} companyAddress={companyAddress} mobileOpen={mobileNavOpen} onCloseMobile={() => setMobileNavOpen(false)} /> {mobileNavOpen &&
setMobileNavOpen(false)} />}
setMobileNavOpen(true)} />
{content}
); } ReactDOM.createRoot(document.getElementById('root')).render();