{b.id} {b.checkedIn ? : null}

{b.buyer}

{b.email} {b.phone}

{/* Action bar — primary ops */}

setTransferOpen(true)}/> setRefundOpen(true)}/>

{/* Tabs */}

{[ { v: 'details', l: 'Details' }, { v: 'tickets', l: `Tickets · ${b.tickets.length}` }, { v: 'activity', l: 'Activity' }, { v: 'notes', l: 'Notes' }, ].map(t => ( ))}

{/* Tab content */}

{tab === 'details' && } {tab === 'tickets' && } {tab === 'activity' && } {tab === 'notes' && }

setRefundOpen(false)} booking={b}/> setTransferOpen(false)} booking={b}/> ); }; const DrawerAction = ({ icon, label, tone, onClick, small }) => { const colors = { default: { bg: 'var(--bg-raised)', border: 'var(--line)', color: 'var(--ink-2)' }, danger: { bg: 'var(--bg-raised)', border: 'var(--line)', color: 'var(--danger)' }, subtle: { bg: 'var(--bg-muted)', border: 'var(--line)', color: 'var(--ink-3)' }, }; const c = colors[tone || 'default']; return ( ); }; const StatusChip = ({ status }) => { const map = { paid: { bg: 'color-mix(in oklch, var(--success) 14%, transparent)', color: 'var(--success)', label: 'Paid', dot: true }, pending: { bg: 'color-mix(in oklch, var(--warning) 18%, transparent)', color: 'oklch(0.48 0.14 75)', label: 'Pending', dot: true }, refund: { bg: 'var(--bg-muted)', color: 'var(--ink-3)', label: 'Refunded' }, 'checked-in':{ bg: 'color-mix(in oklch, var(--indigo) 14%, transparent)', color: 'var(--indigo)', label: 'Checked in' }, }; const s = map[status] || map.paid; return ( {s.dot && } {s.label} ); }; // ─── DETAILS TAB ────────────────────────────────────────────────────────────── const BookingDetailsPanel = ({ b }) => (

{/* Event card */}

Dil
Lum

Event

{b.event}

{b.eventDate} {b.venue}

{/* Metadata grid */} {b.txnId}], ['Invoice', {b.invoice}], ]}/> {/* Price breakdown */}

Payment

{[ ['Subtotal', euro(b.subtotal)], ['Platform fee', euro(b.fees)], ['VAT (19% MwSt.)', euro(b.vat)], ].map(([l, v]) => (

{l}{v}

))}

Total paid {euro(b.total)}

); const DetailGrid = ({ rows }) => (

{rows.map(([k, v], i) => (

{k}

{v}

))}

); // ─── TICKETS TAB ────────────────────────────────────────────────────────────── const BookingTicketsPanel = ({ b }) => (

{b.tickets.map((t, i) => (

{/* Left: QR */}

{/* perforation notches */}

{/* Right: details */}

{t.tier} {t.id}

{t.attendee}

{t.seat} {euro(t.price)}

))}

); const ticketActionStyle = { display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--line)', background: 'var(--bg-raised)', color: 'var(--ink-2)', fontSize: 11.5, fontFamily: 'inherit', cursor: 'pointer', }; // Deterministic pseudo-QR (visual only) const QrBlock = ({ seed = 'x', size = 64 }) => { const n = 11; const cells = React.useMemo(() => { let s = 0; for (let i = 0; i < seed.length; i++) s = (s * 31 + seed.charCodeAt(i)) >>> 0; const out = []; for (let i = 0; i < n * n; i++) { s = (s * 1664525 + 1013904223) >>> 0; out.push((s & 1) === 1); } // Force corners (finder patterns) [[0,0],[0,1],[1,0],[1,1],[0,n-1],[0,n-2],[1,n-1],[1,n-2],[n-1,0],[n-1,1],[n-2,0],[n-2,1]].forEach(([r,c]) => out[r*n+c] = true); return out; }, [seed]); const cell = size / n; return ( ); }; // ─── ACTIVITY TAB ───────────────────────────────────────────────────────────── const BookingActivityPanel = ({ b }) => (

{b.activity.map((a, i) => (

{a.txt}

{a.t}

))}

End of activity log

); // ─── NOTES TAB ──────────────────────────────────────────────────────────────── const BookingNotesPanel = ({ b, draft, setDraft }) => { const notes = [ { by: 'Priya Menon', at: '2h ago', text: 'VIP guest — Universal Music plus-one. Flagged for gate team.' }, ]; return (

{notes.map((n, i) => (

{n.by} · {n.at}

{n.text}

))}

setDraft(e.target.value)} placeholder="Add a private note about this booking — only visible to your team." rows={3} style={{ width: '100%', display: 'block', boxSizing: 'border-box' }}/>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
        <span style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>Markdown supported · @mention to notify a teammate</span>
        <Button variant="primary" size="sm" disabled={!draft.trim()}>Save note</Button>
      </div>
    </div>
  );
};

// ─── REFUND DIALOG ────────────────────────────────────────────────────────────

const TransferDialog = ({ open, onClose, booking }) => (
  <Modal open={open} onClose={onClose} size="md" zIndex={1100} title="Transfer tickets"
    desc={`Move ${booking.tickets.length} ticket${booking.tickets.length > 1 ? 's' : ''} from ${booking.buyer} to someone else`}
    footer={<>
      <Button variant="ghost" onClick={onClose}>Cancel</Button>
      <Button variant="primary" icon="refresh">Transfer tickets</Button>
    </>}>
    <Field label="Recipient email">
      <Input placeholder="friend@example.com" prefix={<Icon name="mail" size={12}/>}/>
    </Field>
    <Field label="Recipient phone" style={{ marginTop: 10 }}>
      <Input placeholder="+91 98XXX XXXXX" prefix={<Icon name="phone" size={12}/>}/>
    </Field>
    <Field label="Which tickets?" style={{ marginTop: 10 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {booking.tickets.map((t, i) => (
          <label key={t.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 8, border: '1px solid var(--line)', background: 'var(--bg-raised)', cursor: 'pointer' }}>
            <input type="checkbox" defaultChecked={i === 0}/>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--ink-3)' }}>{t.id}</span>
            <span style={{ fontSize: 13 }}>{t.tier} · {t.attendee}</span>
          </label>
        ))}
      </div>
    </Field>
    <label style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 14, fontSize: 13 }}>
      <input type="checkbox" defaultChecked/> Invalidate original ticket QR codes
    </label>
  </Modal>
);

const RadioTile = ({ checked, onClick, label, sub }) => (
  <button onClick={onClick} style={{
    flex: 1, padding: '10px 12px', borderRadius: 10,
    border: `1.5px solid ${checked ? 'var(--accent)' : 'var(--line)'}`,
    background: checked ? 'color-mix(in oklch, var(--accent) 7%, var(--bg-raised))' : 'var(--bg-raised)',
    color: 'var(--ink)', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
  }}>
    <div style={{ fontSize: 13, fontWeight: 600 }}>{label}</div>
    <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>{sub}</div>
  </button>
);

window.BookingDrawer = BookingDrawer;