Rebuild the Scanner page into a unified door check-in screen.

Most attendees arrive without their QR open, and taking money at the
door meant leaving the scanner for the event dashboard, where the Add
Ticket modal demanded an email and recorded no payment method. The
screen now leads with manual name search, keeps the camera one tap away
behind a fullscreen overlay, and creates and charges walk-ins inline.

Check-in and payment are one action: anything done here is born
confirmed, paid (or comp) and checked in through a single endpoint,
POST /api/events/:eventId/door-checkin. There are no confirm dialogs
anywhere, because they stall the queue; a ten-second Undo replaces
them, reversing exactly what the action changed via the undo state
recorded alongside its idempotency key. Writes fire in the background
with retries, so venue wifi never blocks the person at the door, and a
capacity limit only warns, since staff at the door are the authority.

Every write carries a client-generated idempotency key, inserted in the
same transaction as the writes it guards, so a double tap or a retry
after a timeout cannot produce a second ticket, payment or check-in.
Search runs entirely in memory over one preloaded list: names are
matched accent- and case-insensitively in both directions, per word,
prefix before substring, with a mostly-numeric query searching phone
digits so two people with the same name can be told apart.

Door money is recorded as payments.source 'door' plus payments.method
(cash, bitcoin, transfer or guest) while provider keeps its existing
value, so capacity counting, the stale-booking sweeps and the admin
payment lists are unaffected and revenue can still be split pre-sale
versus door. Bitcoin records the payment as made, on the same trust
model as cash, with no invoice generated; lib/doorPayments.ts is where
a real Lightning flow slots in later.

Also fixes the SQLite tickets DDL, which still created the pre-split
attendee_name column with NOT NULL email and phone. Only fresh
databases were affected -- existing ones were relaxed by later ALTERs
-- but on those, door walk-ins (and any other ticket) could not be
inserted at all.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/app/admin/events/[id]/_hooks/useEventDetailData.ts

@@ -1,27 +1,33 @@
 import { useState, useEffect } from 'react';
 import toast from 'react-hot-toast';
-import { eventsApi, ticketsApi, emailsApi, Event, Ticket, EmailTemplate } from '@/lib/api';
+import { eventsApi, ticketsApi, emailsApi, doorApi, Event, Ticket, EmailTemplate, DoorSummary } from '@/lib/api';
 
 /**
  * Loads the core data for the admin event detail page (event, tickets, active
- * email templates) and exposes a reload function used after mutations.
+ * email templates, door takings) and exposes a reload function used after
+ * mutations.
  */
 export function useEventDetailData(eventId: string) {
   const [loading, setLoading] = useState(true);
   const [event, setEvent] = useState<Event | null>(null);
   const [tickets, setTickets] = useState<Ticket[]>([]);
   const [templates, setTemplates] = useState<EmailTemplate[]>([]);
+  const [doorSummary, setDoorSummary] = useState<DoorSummary | null>(null);
 
   const loadEventData = async () => {
     try {
-      const [eventRes, ticketsRes, templatesRes] = await Promise.all([
+      const [eventRes, ticketsRes, templatesRes, doorRes] = await Promise.all([
         eventsApi.getById(eventId),
         ticketsApi.getAll({ eventId }),
         emailsApi.getTemplates(),
+        // Door takings split pre-sale from cash/bitcoin/transfer taken on the
+        // night. It is supporting detail, so a failure here must not blank the page.
+        doorApi.summary(eventId).catch(() => null),
       ]);
       setEvent(eventRes.event);
       setTickets(ticketsRes.tickets);
       setTemplates(templatesRes.templates.filter(t => t.isActive));
+      setDoorSummary(doorRes);
     } catch (error) {
       toast.error('Failed to load event data');
     } finally {
@@ -33,5 +39,5 @@ export function useEventDetailData(eventId: string) {
     loadEventData();
   }, [eventId]);
 
-  return { loading, event, tickets, templates, loadEventData };
+  return { loading, event, tickets, templates, doorSummary, loadEventData };
 }

frontend/src/app/admin/events/[id]/_tabs/PaymentsTab.tsx

@@ -1,4 +1,4 @@
-import { PaymentOptionsConfig } from '@/lib/api';
+import { PaymentOptionsConfig, DOOR_PAYMENT_METHODS, type DoorPaymentMethod, type DoorSummary } from '@/lib/api';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import clsx from 'clsx';
@@ -12,13 +12,85 @@ import {
   XCircleIcon,
 } from '@heroicons/react/24/outline';
 import type { PaymentOverridesController } from '../_hooks/usePaymentOverrides';
+import { formatCurrency } from '../_utils/format';
 
 interface PaymentsTabProps {
   locale: string;
   payments: PaymentOverridesController;
+  /** Takings recorded on the door check-in screen; null while loading or unavailable. */
+  doorSummary: DoorSummary | null;
 }
 
-export function PaymentsTab({ locale, payments }: PaymentsTabProps) {
+const DOOR_METHOD_LABELS: Record<DoorPaymentMethod, { en: string; es: string }> = {
+  cash: { en: 'Cash', es: 'Efectivo' },
+  bitcoin: { en: 'Bitcoin', es: 'Bitcoin' },
+  transfer: { en: 'Transfer', es: 'Transferencia' },
+  guest: { en: 'Guests', es: 'Invitados' },
+};
+
+/**
+ * End-of-night reconciliation for this event: what staff took on the door, split
+ * by tender, next to the pre-sale total. Guests are counted, not totalled — they
+ * are free and carry no revenue.
+ */
+function DoorTakings({ locale, summary }: { locale: string; summary: DoorSummary }) {
+  const es = locale === 'es';
+  return (
+    <Card>
+      <div className="p-4 md:p-5">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-2.5">
+            <div className="w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center flex-shrink-0">
+              <BanknotesIcon className="w-4 h-4 text-emerald-600" />
+            </div>
+            <div>
+              <h4 className="font-semibold text-sm">{es ? 'Ventas en Puerta' : 'Door Sales'}</h4>
+              <p className="text-[10px] text-gray-500">
+                {es ? 'Cobrado por el staff en la entrada' : 'Taken by staff at the door'}
+              </p>
+            </div>
+          </div>
+          <p className="font-bold text-lg">{formatCurrency(summary.door.total, summary.currency)}</p>
+        </div>
+
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 pt-3 border-t">
+          {DOOR_PAYMENT_METHODS.map((method) => {
+            const entry = summary.door.byMethod[method];
+            return (
+              <div key={method} className="bg-gray-50 rounded-lg px-3 py-2">
+                <p className="text-[10px] uppercase tracking-wide text-gray-500">
+                  {es ? DOOR_METHOD_LABELS[method].es : DOOR_METHOD_LABELS[method].en}
+                </p>
+                <p className="font-bold text-sm leading-tight">
+                  {method === 'guest'
+                    ? `${entry.count}`
+                    : formatCurrency(entry.total, summary.currency)}
+                </p>
+                {method !== 'guest' && (
+                  <p className="text-[10px] text-gray-500">
+                    {entry.count} {es ? (entry.count === 1 ? 'pago' : 'pagos') : (entry.count === 1 ? 'payment' : 'payments')}
+                  </p>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="flex items-center justify-between text-xs text-gray-600 pt-3 mt-3 border-t">
+          <span>
+            {es ? 'Preventa' : 'Pre-sale'}: <strong>{formatCurrency(summary.presale.total, summary.currency)}</strong>
+            {' '}({summary.presale.count})
+          </span>
+          <span>
+            {es ? 'Total' : 'Total'}: <strong>{formatCurrency(summary.total, summary.currency)}</strong>
+          </span>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+export function PaymentsTab({ locale, payments, doorSummary }: PaymentsTabProps) {
   const {
     loadingPayments,
     hasPaymentOverrides,
@@ -39,6 +111,11 @@ export function PaymentsTab({ locale, payments }: PaymentsTabProps) {
         </div>
       ) : (
         <>
+          {/* Door takings — reconciliation first, configuration below */}
+          {doorSummary && (doorSummary.door.count > 0 || doorSummary.presale.count > 0) && (
+            <DoorTakings locale={locale} summary={doorSummary} />
+          )}
+
           {/* Header */}
           <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
             <div>

frontend/src/app/admin/events/[id]/page.tsx

@@ -66,7 +66,7 @@ export default function AdminEventDetailPage() {
   const eventId = params.id as string;
   const { locale } = useLanguage();
 
-  const { loading, event, tickets, templates, loadEventData } = useEventDetailData(eventId);
+  const { loading, event, tickets, templates, doorSummary, loadEventData } = useEventDetailData(eventId);
   const [activeTab, setActiveTab] = useState<TabType>('overview');
 
   // Email state
@@ -401,7 +401,14 @@ export default function AdminEventDetailPage() {
   const isRevenueTicket = (t: Ticket) => (t.paymentStatus ? t.paymentStatus === 'paid' : !t.isGuest);
   const paidConfirmedCount = getTicketsByStatus('confirmed').filter(isRevenueTicket).length;
   const paidCheckedInCount = getTicketsByStatus('checked_in').filter(isRevenueTicket).length;
-  const revenue = (paidConfirmedCount + paidCheckedInCount) * event.price;
+  // Door sales can be taken at a custom amount (someone paying for their whole
+  // group), so once the door summary is loaded it is the authority on the total:
+  // pre-sale tickets at face value plus whatever was actually taken on the night.
+  const presaleRevenue = doorSummary
+    ? doorSummary.presale.total
+    : (paidConfirmedCount + paidCheckedInCount) * event.price;
+  const doorRevenue = doorSummary?.door.total ?? 0;
+  const revenue = presaleRevenue + doorRevenue;
 
   const tabs: { key: TabType; label: string; icon: typeof CalendarIcon; count?: number }[] = [
     { key: 'overview', label: 'Overview', icon: CalendarIcon },
@@ -507,7 +514,15 @@ export default function AdminEventDetailPage() {
               { label: 'Capacity', value: `${confirmedCount + checkedInCount}/${event.capacity}`, icon: UsersIcon, color: 'bg-blue-50 text-blue-600' },
               { label: 'Confirmed', value: confirmedCount, icon: CheckCircleIcon, color: 'bg-green-50 text-green-600' },
               { label: 'Checked In', value: checkedInCount, icon: TicketIcon, color: 'bg-purple-50 text-purple-600' },
-              { label: 'Revenue', value: formatCurrency(revenue, event.currency), icon: CurrencyDollarIcon, color: 'bg-gray-50 text-gray-600' },
+              {
+                label: 'Revenue',
+                value: formatCurrency(revenue, event.currency),
+                icon: CurrencyDollarIcon,
+                color: 'bg-gray-50 text-gray-600',
+                detail: doorSummary
+                  ? `Pre-sale ${formatCurrency(presaleRevenue, event.currency)} · Door ${formatCurrency(doorRevenue, event.currency)}`
+                  : undefined,
+              },
             ].map((stat) => (
               <div key={stat.label} className="flex items-center gap-2.5 bg-white rounded-card shadow-card px-3 py-2.5">
                 <div className={clsx('w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0', stat.color)}>
@@ -515,7 +530,7 @@ export default function AdminEventDetailPage() {
                 </div>
                 <div className="min-w-0">
                   <p className="text-lg font-bold leading-tight truncate">{stat.value}</p>
-                  <p className="text-xs text-gray-500">{stat.label}</p>
+                  <p className="text-xs text-gray-500 truncate">{('detail' in stat && stat.detail) || stat.label}</p>
                 </div>
               </div>
             ))}
@@ -547,7 +562,15 @@ export default function AdminEventDetailPage() {
                   { label: 'Capacity', value: `${confirmedCount + checkedInCount}/${event.capacity}`, icon: UsersIcon, color: 'text-blue-600 bg-blue-50' },
                   { label: 'Confirmed', value: confirmedCount, icon: CheckCircleIcon, color: 'text-green-600 bg-green-50' },
                   { label: 'Checked In', value: checkedInCount, icon: TicketIcon, color: 'text-purple-600 bg-purple-50' },
-                  { label: 'Revenue', value: formatCurrency(revenue, event.currency), icon: CurrencyDollarIcon, color: 'text-gray-600 bg-gray-50' },
+                  {
+                    label: 'Revenue',
+                    value: formatCurrency(revenue, event.currency),
+                    icon: CurrencyDollarIcon,
+                    color: 'text-gray-600 bg-gray-50',
+                    detail: doorSummary
+                      ? `Pre-sale ${formatCurrency(presaleRevenue, event.currency)} · Door ${formatCurrency(doorRevenue, event.currency)}`
+                      : undefined,
+                  },
                 ].map((stat) => (
                   <div key={stat.label} className="flex items-center gap-2 bg-white rounded-card shadow-card px-3 py-2">
                     <div className={clsx('w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0', stat.color)}>
@@ -555,7 +578,7 @@ export default function AdminEventDetailPage() {
                     </div>
                     <div className="min-w-0">
                       <p className="text-base font-bold leading-tight truncate">{stat.value}</p>
-                      <p className="text-[10px] text-gray-500">{stat.label}</p>
+                      <p className="text-[10px] text-gray-500 truncate">{('detail' in stat && stat.detail) || stat.label}</p>
                     </div>
                   </div>
                 ))}
@@ -705,7 +728,7 @@ export default function AdminEventDetailPage() {
         )}
 
         {activeTab === 'payments' && (
-          <PaymentsTab locale={locale} payments={payments} />
+          <PaymentsTab locale={locale} payments={payments} doorSummary={doorSummary} />
         )}
       </div>
 

frontend/src/app/admin/scanner/_components/AttendeeRow.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import clsx from 'clsx';
+import {
+  CheckCircleIcon,
+  ArrowUturnLeftIcon,
+  UserGroupIcon,
+} from '@heroicons/react/24/outline';
+import type { DoorAttendee, DoorPaymentMethod } from '@/lib/api';
+import { formatCurrency, parseDate, EVENT_TIMEZONE } from '@/lib/utils';
+import { PaymentButtons } from './PaymentButtons';
+
+function checkinTime(checkinAt: string | null): string {
+  if (!checkinAt) return '';
+  return parseDate(checkinAt).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    timeZone: EVENT_TIMEZONE,
+  });
+}
+
+const METHOD_LABELS: Record<DoorPaymentMethod, string> = {
+  cash: 'cash',
+  bitcoin: 'bitcoin',
+  transfer: 'transfer',
+  guest: 'guest',
+};
+
+/** The second line of a row: everything staff needs to decide in one glance. */
+function statusLine(attendee: DoorAttendee, currency: string): string {
+  if (attendee.status === 'cancelled') return 'Cancelled';
+  if (attendee.checkedIn) {
+    const time = checkinTime(attendee.checkinAt);
+    const how = attendee.doorMethod ? ` · paid ${METHOD_LABELS[attendee.doorMethod]}` : '';
+    return time ? `Checked in ${time}${how}` : `Checked in${how}`;
+  }
+
+  const parts: string[] = [];
+  if (attendee.paymentStatus === 'comp') parts.push('Guest');
+  else if (attendee.paymentStatus === 'paid') parts.push('Paid');
+  else parts.push(`Unpaid · ${formatCurrency(attendee.amountDue, currency)} due`);
+
+  if (attendee.isGroupBooking) parts.push('group booking');
+  if (attendee.status === 'pending') parts.push('pending');
+  return parts.join(' · ');
+}
+
+export function AttendeeRow({
+  attendee,
+  currency,
+  price,
+  expanded,
+  flashing,
+  busy,
+  onTap,
+  onPay,
+}: {
+  attendee: DoorAttendee;
+  currency: string;
+  price: number;
+  expanded: boolean;
+  flashing: boolean;
+  busy: boolean;
+  onTap: () => void;
+  onPay: (method: DoorPaymentMethod, amount: number) => void;
+}) {
+  const isCancelled = attendee.status === 'cancelled';
+  const settled = attendee.paymentStatus === 'paid' || attendee.paymentStatus === 'comp';
+  // A settled, not-yet-arrived attendee is the one-tap case: the whole row checks
+  // them in. Everyone else opens the tenders inline instead.
+  const isOneTap = !isCancelled && !attendee.checkedIn && settled;
+
+  return (
+    <div
+      className={clsx(
+        'rounded-2xl border transition-colors',
+        flashing
+          ? 'bg-emerald-600 border-emerald-400'
+          : attendee.checkedIn || isCancelled
+            ? 'bg-gray-900 border-gray-800'
+            : 'bg-gray-800 border-gray-700',
+      )}
+    >
+      <button
+        onClick={onTap}
+        disabled={busy}
+        className="w-full text-left px-4 py-3 min-h-[64px] flex items-center gap-3 active:scale-[0.99] transition-transform disabled:opacity-60"
+      >
+        <div className="flex-1 min-w-0">
+          <p
+            className={clsx(
+              'font-bold text-lg truncate',
+              flashing ? 'text-white' : attendee.checkedIn || isCancelled ? 'text-gray-400' : 'text-white',
+            )}
+          >
+            {attendee.fullName}
+          </p>
+          <p
+            className={clsx(
+              'text-sm truncate flex items-center gap-1.5',
+              flashing
+                ? 'text-emerald-50'
+                : isCancelled
+                  ? 'text-red-400'
+                  : attendee.checkedIn
+                    ? 'text-gray-500'
+                    : attendee.paymentStatus === 'unpaid'
+                      ? 'text-amber-400'
+                      : 'text-gray-400',
+            )}
+          >
+            {attendee.isGroupBooking && !attendee.checkedIn && <UserGroupIcon className="w-4 h-4 flex-shrink-0" />}
+            {statusLine(attendee, currency)}
+          </p>
+        </div>
+
+        {flashing ? (
+          <CheckCircleIcon className="w-8 h-8 text-white flex-shrink-0" />
+        ) : attendee.checkedIn ? (
+          <CheckCircleIcon className="w-7 h-7 text-emerald-500/60 flex-shrink-0" />
+        ) : isCancelled ? (
+          <span className="flex-shrink-0 text-[10px] font-bold uppercase tracking-wide px-2 py-1 rounded-full bg-red-950 text-red-400">
+            Cancelled
+          </span>
+        ) : isOneTap ? (
+          <span className="flex-shrink-0 text-xs font-bold uppercase tracking-wide text-primary-yellow">
+            Check in
+          </span>
+        ) : (
+          <span className="flex-shrink-0 text-xs font-bold uppercase tracking-wide text-amber-400">
+            Collect
+          </span>
+        )}
+      </button>
+
+      {expanded && !attendee.checkedIn && (
+        <div className="px-3 pb-3 pt-1 space-y-2">
+          {isCancelled && (
+            <p className="text-xs text-gray-400 px-1 flex items-center gap-1.5">
+              <ArrowUturnLeftIcon className="w-4 h-4" />
+              Reactivate as a walk-in — pick how they are paying.
+            </p>
+          )}
+          <PaymentButtons price={price} currency={currency} onPay={onPay} disabled={busy} />
+        </div>
+      )}
+
+      {expanded && attendee.checkedIn && (
+        <div className="px-4 pb-3 -mt-1">
+          <p className="text-sm text-gray-400">
+            Already checked in
+            {attendee.checkinAt ? ` at ${checkinTime(attendee.checkinAt)}` : ''}
+            {attendee.checkedInBy ? ` by ${attendee.checkedInBy}` : ''}.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/app/admin/scanner/_components/PaymentButtons.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import { useState } from 'react';
+import clsx from 'clsx';
+import {
+  BanknotesIcon,
+  BoltIcon,
+  BuildingLibraryIcon,
+  GiftIcon,
+  ChevronDownIcon,
+} from '@heroicons/react/24/outline';
+import type { DoorPaymentMethod } from '@/lib/api';
+import { formatCurrency } from '@/lib/utils';
+
+// The four tenders staff can take at the door. One tap settles and checks in;
+// long-press (or the chevron) opens multiples for someone paying for their group.
+
+const TENDERS: {
+  method: DoorPaymentMethod;
+  label: string;
+  icon: typeof BanknotesIcon;
+  className: string;
+}[] = [
+  { method: 'cash', label: 'Cash', icon: BanknotesIcon, className: 'bg-emerald-600 active:bg-emerald-700' },
+  { method: 'bitcoin', label: 'Bitcoin', icon: BoltIcon, className: 'bg-orange-500 active:bg-orange-600' },
+  { method: 'transfer', label: 'Transfer', icon: BuildingLibraryIcon, className: 'bg-blue-600 active:bg-blue-700' },
+  { method: 'guest', label: 'Guest', icon: GiftIcon, className: 'bg-gray-600 active:bg-gray-700' },
+];
+
+const LONG_PRESS_MS = 450;
+
+export function PaymentButtons({
+  price,
+  currency,
+  onPay,
+  disabled,
+}: {
+  price: number;
+  currency: string;
+  onPay: (method: DoorPaymentMethod, amount: number) => void;
+  disabled?: boolean;
+}) {
+  // Which tender has its quick-amounts open. Guest is always free, so it never opens one.
+  const [amountsFor, setAmountsFor] = useState<DoorPaymentMethod | null>(null);
+  const [customOpen, setCustomOpen] = useState(false);
+  const [customValue, setCustomValue] = useState('');
+  const [pressTimer, setPressTimer] = useState<ReturnType<typeof setTimeout> | null>(null);
+  const [longPressed, setLongPressed] = useState(false);
+
+  const openAmounts = (method: DoorPaymentMethod) => {
+    if (method === 'guest') return;
+    setAmountsFor(method);
+    setCustomOpen(false);
+    setCustomValue('');
+  };
+
+  const startPress = (method: DoorPaymentMethod) => {
+    setLongPressed(false);
+    const timer = setTimeout(() => {
+      setLongPressed(true);
+      openAmounts(method);
+    }, LONG_PRESS_MS);
+    setPressTimer(timer);
+  };
+
+  const endPress = (method: DoorPaymentMethod) => {
+    if (pressTimer) clearTimeout(pressTimer);
+    setPressTimer(null);
+    // A long press already opened the multiples; don't also charge 1x on release.
+    if (longPressed) {
+      setLongPressed(false);
+      return;
+    }
+    if (disabled) return;
+    onPay(method, method === 'guest' ? 0 : price);
+  };
+
+  const cancelPress = () => {
+    if (pressTimer) clearTimeout(pressTimer);
+    setPressTimer(null);
+    setLongPressed(false);
+  };
+
+  if (amountsFor) {
+    const tender = TENDERS.find((t) => t.method === amountsFor)!;
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center justify-between px-1">
+          <p className="text-sm font-semibold text-white">{tender.label} — how many?</p>
+          <button
+            onClick={() => { setAmountsFor(null); setCustomOpen(false); }}
+            className="text-sm text-gray-400 min-h-[48px] px-2 active:text-white"
+          >
+            Back
+          </button>
+        </div>
+        <div className="grid grid-cols-4 gap-2">
+          {[1, 2, 3].map((qty) => (
+            <button
+              key={qty}
+              disabled={disabled}
+              onClick={() => onPay(tender.method, price * qty)}
+              className={clsx(
+                'min-h-[56px] rounded-2xl font-bold text-white text-lg flex flex-col items-center justify-center leading-tight disabled:opacity-50 active:scale-[0.97] transition-transform',
+                tender.className,
+              )}
+            >
+              {qty}x
+              <span className="text-[10px] font-medium opacity-80">
+                {formatCurrency(price * qty, currency)}
+              </span>
+            </button>
+          ))}
+          <button
+            disabled={disabled}
+            onClick={() => setCustomOpen((open) => !open)}
+            className="min-h-[56px] rounded-2xl font-bold text-white text-sm bg-gray-700 active:bg-gray-600 disabled:opacity-50 active:scale-[0.97] transition-transform"
+          >
+            Custom
+          </button>
+        </div>
+        {customOpen && (
+          <div className="flex gap-2">
+            <input
+              type="number"
+              inputMode="numeric"
+              autoFocus
+              value={customValue}
+              onChange={(e) => setCustomValue(e.target.value)}
+              placeholder={`Amount in ${currency}`}
+              className="flex-1 min-h-[48px] px-4 bg-gray-800 border border-gray-700 rounded-xl text-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+            />
+            <button
+              disabled={disabled || !customValue || Number(customValue) < 0}
+              onClick={() => onPay(tender.method, Number(customValue))}
+              className={clsx(
+                'min-h-[48px] px-5 rounded-xl font-bold text-white disabled:opacity-50 active:scale-[0.97] transition-transform',
+                tender.className,
+              )}
+            >
+              Take
+            </button>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-4 gap-2">
+      {TENDERS.map((tender) => (
+        <button
+          key={tender.method}
+          disabled={disabled}
+          onPointerDown={() => startPress(tender.method)}
+          onPointerUp={() => endPress(tender.method)}
+          onPointerLeave={cancelPress}
+          onPointerCancel={cancelPress}
+          onContextMenu={(e) => e.preventDefault()}
+          className={clsx(
+            'relative min-h-[64px] rounded-2xl text-white font-bold flex flex-col items-center justify-center gap-1 select-none disabled:opacity-50 active:scale-[0.97] transition-transform',
+            tender.className,
+          )}
+        >
+          <tender.icon className="w-6 h-6" />
+          <span className="text-xs">{tender.label}</span>
+          {tender.method !== 'guest' && (
+            // Visible affordance for the same thing long-press does: staff who
+            // never discover the hold still find the multiples.
+            <span
+              role="button"
+              aria-label={`${tender.label} quick amounts`}
+              onPointerDown={(e) => { e.stopPropagation(); cancelPress(); }}
+              onPointerUp={(e) => e.stopPropagation()}
+              onClick={(e) => { e.stopPropagation(); openAmounts(tender.method); }}
+              className="absolute top-0.5 right-0.5 w-7 h-7 flex items-center justify-center rounded-full text-white/70"
+            >
+              <ChevronDownIcon className="w-4 h-4" />
+            </span>
+          )}
+        </button>
+      ))}
+    </div>
+  );
+}

frontend/src/app/admin/scanner/_components/QRScannerOverlay.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { QrCodeIcon, XMarkIcon, VideoCameraIcon } from '@heroicons/react/24/outline';
+import toast from 'react-hot-toast';
+
+// The camera is a fullscreen overlay opened from the search row, not a tab. It
+// only exists while a scan is happening, so it never holds the camera (or the
+// screen) while staff are typing a name.
+
+/** Release any camera stream html5-qrcode left attached to a <video> element. */
+function stopAllTracks() {
+  try {
+    document.querySelectorAll('video').forEach((video) => {
+      const stream = video.srcObject as MediaStream | null;
+      if (stream) {
+        stream.getTracks().forEach((track) => track.stop());
+        video.srcObject = null;
+      }
+    });
+  } catch {}
+}
+
+export function QRScannerOverlay({
+  onScan,
+  onClose,
+}: {
+  onScan: (code: string) => void;
+  onClose: () => void;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const scannerRef = useRef<any>(null);
+  const mountedRef = useRef(true);
+  const elementId = useRef(`qr-scanner-${Date.now()}`);
+  const [facingMode, setFacingMode] = useState<'environment' | 'user'>('environment');
+  const [ready, setReady] = useState(false);
+
+  const destroyScanner = useCallback(async () => {
+    if (scannerRef.current) {
+      try { await scannerRef.current.stop(); } catch {}
+      try { scannerRef.current.clear(); } catch {}
+      scannerRef.current = null;
+    }
+    stopAllTracks();
+  }, []);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    let cancelled = false;
+
+    const init = async () => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      const id = elementId.current;
+      container.innerHTML = '';
+      const div = document.createElement('div');
+      div.id = id;
+      div.style.width = '100%';
+      div.style.height = '100%';
+      container.appendChild(div);
+
+      try {
+        const { Html5Qrcode } = await import('html5-qrcode');
+        if (cancelled) return;
+
+        const scanner = new Html5Qrcode(id);
+        scannerRef.current = scanner;
+
+        await scanner.start(
+          { facingMode },
+          { fps: 10, qrbox: { width: 250, height: 250 }, aspectRatio: 1 },
+          (decodedText: string) => {
+            if (mountedRef.current) onScan(decodedText);
+          },
+          () => {}
+        );
+
+        if (cancelled) {
+          await destroyScanner();
+          return;
+        }
+
+        // Force a layout pass: some browsers leave the video mis-sized until reflow.
+        requestAnimationFrame(() => {
+          if (container) {
+            container.style.display = 'none';
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            container.offsetHeight;
+            container.style.display = '';
+          }
+          if (mountedRef.current) setReady(true);
+        });
+      } catch (error) {
+        console.error('Scanner error:', error);
+        if (!cancelled && mountedRef.current) {
+          toast.error('Failed to start camera. Check permissions.');
+          onClose();
+        }
+      }
+    };
+
+    init();
+
+    return () => {
+      cancelled = true;
+      mountedRef.current = false;
+      destroyScanner();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [facingMode]);
+
+  // Backgrounding the browser suspends the camera; drop it and rebuild on return.
+  useEffect(() => {
+    const handleVisibility = () => {
+      if (document.visibilityState === 'hidden') {
+        destroyScanner();
+      } else if (document.visibilityState === 'visible' && mountedRef.current) {
+        setFacingMode((prev) => {
+          const temp = prev === 'environment' ? 'user' : 'environment';
+          setTimeout(() => {
+            if (mountedRef.current) setFacingMode(prev);
+          }, 100);
+          return temp;
+        });
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibility);
+    return () => document.removeEventListener('visibilitychange', handleVisibility);
+  }, [destroyScanner]);
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black flex flex-col">
+      <div className="flex-shrink-0 flex items-center justify-between px-4 py-3 safe-area-top">
+        <p className="text-white font-semibold">Scan ticket</p>
+        <div className="flex items-center gap-2">
+          {ready && (
+            <button
+              onClick={() => setFacingMode((prev) => (prev === 'environment' ? 'user' : 'environment'))}
+              className="min-w-[48px] min-h-[48px] flex items-center justify-center bg-white/10 text-white rounded-full active:scale-95 transition-transform"
+              aria-label="Switch camera"
+            >
+              <VideoCameraIcon className="w-6 h-6" />
+            </button>
+          )}
+          <button
+            onClick={onClose}
+            className="min-w-[48px] min-h-[48px] flex items-center justify-center bg-white/10 text-white rounded-full active:scale-95 transition-transform"
+            aria-label="Close scanner"
+          >
+            <XMarkIcon className="w-6 h-6" />
+          </button>
+        </div>
+      </div>
+
+      <div className="relative flex-1 min-h-0 overflow-hidden">
+        <div
+          ref={containerRef}
+          className="w-full h-full [&_video]:!object-cover [&_video]:!h-full [&_video]:!w-full"
+        />
+        {!ready && (
+          <div className="absolute inset-0 flex items-center justify-center text-gray-400">
+            <div className="text-center">
+              <QrCodeIcon className="w-16 h-16 mx-auto mb-2 opacity-30" />
+              <p className="text-sm opacity-60">Starting camera...</p>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="flex-shrink-0 px-6 py-5 pb-safe">
+        <p className="text-center text-gray-400 text-sm">
+          Point at the ticket QR — it checks in and closes automatically.
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/app/admin/scanner/_components/SessionSheet.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import clsx from 'clsx';
+import {
+  XMarkIcon,
+  ClockIcon,
+  QrCodeIcon,
+  MagnifyingGlassIcon,
+  UserPlusIcon,
+  ArrowPathIcon,
+} from '@heroicons/react/24/outline';
+import type { DoorPaymentMethod, DoorSummary } from '@/lib/api';
+import { DOOR_PAYMENT_METHODS } from '@/lib/api';
+import { formatCurrency } from '@/lib/utils';
+
+export interface SessionEntry {
+  idempotencyKey: string;
+  ticketId: string;
+  name: string;
+  at: string;
+  entry: 'scan' | 'search' | 'walkin';
+  method: DoorPaymentMethod | null;
+  amount: number;
+  undone: boolean;
+  failed: boolean;
+}
+
+const ENTRY_ICONS = {
+  scan: QrCodeIcon,
+  search: MagnifyingGlassIcon,
+  walkin: UserPlusIcon,
+};
+
+const ENTRY_LABELS = {
+  scan: 'Scanned',
+  search: 'Search',
+  walkin: 'Walk-in',
+};
+
+const METHOD_LABELS: Record<DoorPaymentMethod, string> = {
+  cash: 'Cash',
+  bitcoin: 'Bitcoin',
+  transfer: 'Transfer',
+  guest: 'Guest',
+};
+
+/** Totals for the current shift, computed from this session's own entries. */
+function sessionTotals(entries: SessionEntry[]) {
+  const totals: Record<DoorPaymentMethod, { count: number; total: number }> = {
+    cash: { count: 0, total: 0 },
+    bitcoin: { count: 0, total: 0 },
+    transfer: { count: 0, total: 0 },
+    guest: { count: 0, total: 0 },
+  };
+  let grand = 0;
+  for (const entry of entries) {
+    if (entry.undone || entry.failed || !entry.method) continue;
+    totals[entry.method].count += 1;
+    totals[entry.method].total += entry.amount;
+    grand += entry.amount;
+  }
+  return { totals, grand };
+}
+
+function CashUpGrid({
+  totals,
+  currency,
+}: {
+  totals: Record<DoorPaymentMethod, { count: number; total: number }>;
+  currency: string;
+}) {
+  return (
+    <div className="grid grid-cols-2 gap-2">
+      {DOOR_PAYMENT_METHODS.map((method) => (
+        <div key={method} className="bg-gray-800 border border-gray-700 rounded-xl px-3 py-2.5">
+          <p className="text-[11px] uppercase tracking-wide text-gray-500">{METHOD_LABELS[method]}</p>
+          <p className="font-bold text-white text-base leading-tight">
+            {method === 'guest' ? `${totals[method].count} free` : formatCurrency(totals[method].total, currency)}
+          </p>
+          {method !== 'guest' && (
+            <p className="text-[11px] text-gray-500">
+              {totals[method].count} {totals[method].count === 1 ? 'payment' : 'payments'}
+            </p>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * The end-of-night view: what this shift took, what the whole event day took,
+ * and the feed of who came in and how.
+ */
+export function SessionSheet({
+  entries,
+  summary,
+  summaryLoading,
+  currency,
+  onRefresh,
+  onClose,
+}: {
+  entries: SessionEntry[];
+  summary: DoorSummary | null;
+  summaryLoading: boolean;
+  currency: string;
+  onRefresh: () => void;
+  onClose: () => void;
+}) {
+  const { totals, grand } = sessionTotals(entries);
+  const liveEntries = entries.filter((e) => !e.undone);
+
+  return (
+    <div className="fixed inset-0 z-50 bg-gray-950 flex flex-col" style={{ height: '100dvh' }}>
+      <header className="flex-shrink-0 bg-gray-900 border-b border-gray-800 px-4 py-3 safe-area-top flex items-center justify-between">
+        <div>
+          <p className="font-bold text-white text-lg">Session</p>
+          <p className="text-xs text-gray-500">{liveEntries.length} checked in from this device</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={onRefresh}
+            className="min-w-[48px] min-h-[48px] flex items-center justify-center rounded-full text-gray-400 active:text-white active:scale-95 transition-all"
+            aria-label="Refresh totals"
+          >
+            <ArrowPathIcon className={clsx('w-5 h-5', summaryLoading && 'animate-spin')} />
+          </button>
+          <button
+            onClick={onClose}
+            className="min-w-[48px] min-h-[48px] flex items-center justify-center rounded-full text-gray-400 active:text-white active:scale-95 transition-all"
+            aria-label="Close session view"
+          >
+            <XMarkIcon className="w-6 h-6" />
+          </button>
+        </div>
+      </header>
+
+      <div className="flex-1 min-h-0 overflow-y-auto px-4 py-4 space-y-5 pb-safe">
+        {/* This shift */}
+        <section className="space-y-2">
+          <div className="flex items-baseline justify-between">
+            <h2 className="text-sm font-bold text-white uppercase tracking-wide">This session</h2>
+            <p className="text-primary-yellow font-bold">{formatCurrency(grand, currency)}</p>
+          </div>
+          <CashUpGrid totals={totals} currency={currency} />
+        </section>
+
+        {/* Whole event, from the server — the number to reconcile the cash box against */}
+        <section className="space-y-2">
+          <div className="flex items-baseline justify-between">
+            <h2 className="text-sm font-bold text-white uppercase tracking-wide">Door total, whole event</h2>
+            <p className="text-primary-yellow font-bold">
+              {summary ? formatCurrency(summary.door.total, summary.currency) : '—'}
+            </p>
+          </div>
+          {summary ? (
+            <>
+              <CashUpGrid totals={summary.door.byMethod} currency={summary.currency} />
+              <div className="flex items-center justify-between bg-gray-800 border border-gray-700 rounded-xl px-3 py-2.5">
+                <div>
+                  <p className="text-[11px] uppercase tracking-wide text-gray-500">Pre-sale</p>
+                  <p className="font-bold text-white">
+                    {formatCurrency(summary.presale.total, summary.currency)}
+                  </p>
+                </div>
+                <div className="text-right">
+                  <p className="text-[11px] uppercase tracking-wide text-gray-500">Event total</p>
+                  <p className="font-bold text-white">{formatCurrency(summary.total, summary.currency)}</p>
+                </div>
+              </div>
+            </>
+          ) : (
+            <p className="text-sm text-gray-500">
+              {summaryLoading ? 'Loading totals…' : 'Totals unavailable — pull to refresh.'}
+            </p>
+          )}
+        </section>
+
+        {/* Feed */}
+        <section className="space-y-2">
+          <h2 className="text-sm font-bold text-white uppercase tracking-wide">Recent check-ins</h2>
+          {entries.length === 0 ? (
+            <div className="text-center text-gray-500 py-10">
+              <ClockIcon className="w-12 h-12 mx-auto mb-3 opacity-30" />
+              <p className="text-sm">No check-ins yet</p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {entries.map((entry) => {
+                const Icon = ENTRY_ICONS[entry.entry];
+                return (
+                  <div
+                    key={entry.idempotencyKey}
+                    className={clsx(
+                      'rounded-xl border px-3 py-2.5 flex items-center gap-3',
+                      entry.failed
+                        ? 'bg-red-950/40 border-red-900'
+                        : entry.undone
+                          ? 'bg-gray-900 border-gray-800 opacity-50'
+                          : 'bg-gray-800 border-gray-700',
+                    )}
+                  >
+                    <Icon className="w-5 h-5 text-gray-500 flex-shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <p
+                        className={clsx(
+                          'font-medium truncate',
+                          entry.undone ? 'text-gray-500 line-through' : 'text-white',
+                        )}
+                      >
+                        {entry.name}
+                      </p>
+                      <p className="text-xs text-gray-500 truncate">
+                        {ENTRY_LABELS[entry.entry]}
+                        {entry.method ? ` · ${METHOD_LABELS[entry.method]}` : ''}
+                        {entry.method && entry.method !== 'guest'
+                          ? ` ${formatCurrency(entry.amount, currency)}`
+                          : ''}
+                        {entry.failed ? ' · failed' : entry.undone ? ' · undone' : ''}
+                      </p>
+                    </div>
+                    <p className="text-sm text-gray-400 flex-shrink-0">{entry.at}</p>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}

frontend/src/app/admin/scanner/_components/WalkInRow.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { UserPlusIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+import type { DoorPaymentMethod } from '@/lib/api';
+import { PaymentButtons } from './PaymentButtons';
+
+export interface WalkInDraft {
+  firstName: string;
+  lastName: string;
+  phone: string;
+  email: string;
+  ruc: string;
+}
+
+export const emptyWalkIn = (firstName = ''): WalkInDraft => ({
+  firstName,
+  lastName: '',
+  phone: '',
+  email: '',
+  ruc: '',
+});
+
+/**
+ * The pinned bottom row. Collapsed it is a single tap; expanded it is a first
+ * name and four tenders. Email, phone and RUC live behind "Add details" so the
+ * rare person who wants a receipt never slows down the queue behind them.
+ */
+export function WalkInRow({
+  typedText,
+  expanded,
+  draft,
+  price,
+  currency,
+  busy,
+  onExpand,
+  onChange,
+  onPay,
+  onCancel,
+}: {
+  typedText: string;
+  expanded: boolean;
+  draft: WalkInDraft;
+  price: number;
+  currency: string;
+  busy: boolean;
+  onExpand: () => void;
+  onChange: (draft: WalkInDraft) => void;
+  onPay: (method: DoorPaymentMethod, amount: number) => void;
+  onCancel: () => void;
+}) {
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const firstNameRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (expanded) firstNameRef.current?.focus();
+  }, [expanded]);
+
+  useEffect(() => {
+    if (!expanded) setDetailsOpen(false);
+  }, [expanded]);
+
+  if (!expanded) {
+    return (
+      <button
+        onClick={onExpand}
+        className="w-full min-h-[64px] px-4 py-3 rounded-2xl border-2 border-dashed border-primary-yellow/50 bg-primary-yellow/5 text-left flex items-center gap-3 active:scale-[0.99] transition-transform"
+      >
+        <UserPlusIcon className="w-6 h-6 text-primary-yellow flex-shrink-0" />
+        <span className="font-bold text-primary-yellow truncate">
+          {typedText ? `Add "${typedText}" as walk-in` : 'Add a walk-in'}
+        </span>
+      </button>
+    );
+  }
+
+  const field = (key: keyof WalkInDraft, value: string) => onChange({ ...draft, [key]: value });
+
+  return (
+    <div className="rounded-2xl border-2 border-primary-yellow/50 bg-gray-800 p-3 space-y-2">
+      <div className="flex items-center justify-between px-1">
+        <p className="font-bold text-primary-yellow">New walk-in</p>
+        <button onClick={onCancel} className="text-sm text-gray-400 min-h-[48px] px-2 active:text-white">
+          Cancel
+        </button>
+      </div>
+
+      <div className="grid grid-cols-2 gap-2">
+        <input
+          ref={firstNameRef}
+          value={draft.firstName}
+          onChange={(e) => field('firstName', e.target.value)}
+          placeholder="First name"
+          autoComplete="off"
+          autoCorrect="off"
+          spellCheck={false}
+          className="min-h-[48px] px-4 bg-gray-900 border border-gray-700 rounded-xl text-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+        />
+        <input
+          value={draft.lastName}
+          onChange={(e) => field('lastName', e.target.value)}
+          placeholder="Last name (optional)"
+          autoComplete="off"
+          autoCorrect="off"
+          spellCheck={false}
+          className="min-h-[48px] px-4 bg-gray-900 border border-gray-700 rounded-xl text-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+        />
+      </div>
+
+      <input
+        value={draft.phone}
+        onChange={(e) => field('phone', e.target.value)}
+        placeholder="Phone (optional)"
+        inputMode="tel"
+        autoComplete="off"
+        className="w-full min-h-[48px] px-4 bg-gray-900 border border-gray-700 rounded-xl text-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+      />
+
+      <button
+        onClick={() => setDetailsOpen((open) => !open)}
+        className="w-full min-h-[48px] flex items-center justify-between px-2 text-sm text-gray-400 active:text-white"
+      >
+        Add details (email, RUC)
+        <ChevronDownIcon className={clsx('w-4 h-4 transition-transform', detailsOpen && 'rotate-180')} />
+      </button>
+
+      {detailsOpen && (
+        <div className="space-y-2">
+          <input
+            value={draft.email}
+            onChange={(e) => field('email', e.target.value)}
+            placeholder="Email — sends the usual confirmation"
+            inputMode="email"
+            autoComplete="off"
+            autoCapitalize="none"
+            className="w-full min-h-[48px] px-4 bg-gray-900 border border-gray-700 rounded-xl text-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+          />
+          <input
+            value={draft.ruc}
+            onChange={(e) => field('ruc', e.target.value)}
+            placeholder="RUC (for factura)"
+            autoComplete="off"
+            className="w-full min-h-[48px] px-4 bg-gray-900 border border-gray-700 rounded-xl text-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+          />
+        </div>
+      )}
+
+      <PaymentButtons
+        price={price}
+        currency={currency}
+        onPay={onPay}
+        disabled={busy || !draft.firstName.trim()}
+      />
+    </div>
+  );
+}

frontend/src/app/admin/scanner/_lib/doorActions.ts

@@ -0,0 +1,56 @@
+// Firing door actions without ever blocking the queue of people at the door.
+//
+// The UI flashes green and clears the input the moment staff taps; the write
+// happens here, in the background, with retries. Venue wifi drops constantly, so
+// every action carries an idempotency key: a retry that actually succeeded the
+// first time returns the original result instead of double-charging anyone.
+
+import { doorApi, type DoorCheckinRequest, type DoorCheckinResponse } from '@/lib/api';
+
+/** UUID per action. crypto.randomUUID needs a secure context; fall back when absent. */
+export function newIdempotencyKey(): string {
+  const cryptoRef = typeof crypto !== 'undefined' ? crypto : undefined;
+  if (cryptoRef?.randomUUID) return cryptoRef.randomUUID();
+  return `door-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 12)}`;
+}
+
+// Roughly 5 seconds of retrying in total — long enough to ride out a wifi blip,
+// short enough that staff learn about a real failure while the person is still
+// in front of them.
+const RETRY_DELAYS_MS = [400, 1200, 3000];
+
+/**
+ * Errors worth retrying are the ones a retry can fix: network failures, gateway
+ * errors, rate limits. A 400 "ticket belongs to a different event" will fail
+ * identically forever, so it surfaces immediately.
+ */
+function isRetryable(error: any): boolean {
+  const status = error?.status;
+  if (typeof status === 'number') return status >= 500 || status === 408 || status === 429;
+  // No status at all means the request never reached the server (fetch rejects
+  // with a TypeError when the connection drops) — exactly the case to retry.
+  return true;
+}
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export async function submitDoorAction(
+  eventId: string,
+  body: DoorCheckinRequest,
+): Promise<DoorCheckinResponse> {
+  let lastError: any;
+  for (let attempt = 0; attempt <= RETRY_DELAYS_MS.length; attempt++) {
+    try {
+      return await doorApi.checkin(eventId, body);
+    } catch (error: any) {
+      lastError = error;
+      if (attempt === RETRY_DELAYS_MS.length || !isRetryable(error)) break;
+      await sleep(RETRY_DELAYS_MS[attempt]);
+    }
+  }
+  throw lastError;
+}
+
+export async function undoDoorAction(eventId: string, idempotencyKey: string): Promise<void> {
+  await doorApi.undo(eventId, idempotencyKey);
+}

frontend/src/app/admin/scanner/_lib/feedback.ts

@@ -0,0 +1,41 @@
+// Haptic + audio confirmation. At a loud, dark door the sound and the buzz are
+// what staff actually register — the green flash is confirmation for the person
+// standing in front of them.
+
+export function playSuccessSound() {
+  try {
+    const ctx = new AudioContext();
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.connect(gain);
+    gain.connect(ctx.destination);
+    osc.frequency.value = 880;
+    osc.type = 'sine';
+    gain.gain.value = 0.3;
+    osc.start();
+    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.15);
+    osc.stop(ctx.currentTime + 0.15);
+  } catch {}
+}
+
+export function playErrorSound() {
+  try {
+    const ctx = new AudioContext();
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.connect(gain);
+    gain.connect(ctx.destination);
+    osc.frequency.value = 300;
+    osc.type = 'square';
+    gain.gain.value = 0.2;
+    osc.start();
+    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.3);
+    osc.stop(ctx.currentTime + 0.3);
+  } catch {}
+}
+
+export function vibrate(pattern: number | number[]) {
+  try {
+    if (navigator.vibrate) navigator.vibrate(pattern);
+  } catch {}
+}

frontend/src/app/admin/scanner/_lib/search.ts

@@ -0,0 +1,170 @@
+// Door search: runs entirely in memory over the preloaded attendee list, so
+// typing never touches the network.
+//
+// The rules exist because of who is standing at the door. People say "Jose" for
+// José and "Nunez" for Núñez, so both sides are stripped of diacritics. They give
+// a surname first as often as a first name, so every word is matched
+// independently. Two people called María are told apart by the last digits of a
+// phone number, so a mostly-numeric query searches phone digits instead of names.
+
+import type { DoorAttendee } from '@/lib/api';
+
+/** Lowercase and strip combining marks, so "José" and "jose" are the same string. */
+export function normalize(value: string): string {
+  return value
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .trim();
+}
+
+export function digitsOnly(value: string): string {
+  return value.replace(/\D/g, '');
+}
+
+/** Precomputed per attendee once per list load; recomputing per keystroke is what makes search feel slow. */
+export interface DoorSearchIndex {
+  words: string[];
+  full: string;
+  phoneDigits: string;
+  email: string;
+}
+
+export function buildIndex(attendee: DoorAttendee): DoorSearchIndex {
+  const first = normalize(attendee.firstName || '');
+  const last = normalize(attendee.lastName || '');
+  const full = `${first} ${last}`.trim();
+  return {
+    words: full.split(/\s+/).filter(Boolean),
+    full,
+    phoneDigits: digitsOnly(attendee.phone || ''),
+    email: normalize(attendee.email || ''),
+  };
+}
+
+/**
+ * A query is treated as a phone lookup when it is mostly digits — staff asking
+ * "what are the last four of your number?" type exactly that and nothing else.
+ */
+export function isPhoneQuery(query: string): boolean {
+  const compact = query.replace(/\s/g, '');
+  if (compact.length < 3) return false;
+  const digits = digitsOnly(compact);
+  return digits.length >= 3 && digits.length / compact.length >= 0.6;
+}
+
+/**
+ * Bounded Damerau-Levenshtein: true when one insert, delete, substitution or
+ * swap of adjacent letters apart. The swap matters — "Jhon" for John is the
+ * single commonest way a name gets mistyped, and plain Levenshtein scores it 2.
+ */
+function withinOneEdit(a: string, b: string): boolean {
+  const la = a.length;
+  const lb = b.length;
+  if (Math.abs(la - lb) > 1) return false;
+
+  let i = 0;
+  let j = 0;
+  let edits = 0;
+  while (i < la && j < lb) {
+    if (a[i] === b[j]) {
+      i++;
+      j++;
+      continue;
+    }
+    if (++edits > 1) return false;
+    if (la > lb) i++;
+    else if (lb > la) j++;
+    else if (a[i + 1] === b[j] && a[i] === b[j + 1]) {
+      // Adjacent letters swapped: consume both and count it as the one edit.
+      i += 2;
+      j += 2;
+    } else {
+      i++;
+      j++;
+    }
+  }
+  return edits + (la - i) + (lb - j) <= 1;
+}
+
+// Lower tier ranks first.
+const TIER_PREFIX = 0;
+const TIER_SUBSTRING = 1;
+const TIER_FUZZY = 2;
+
+/** Best match tier for one attendee, or null when the query does not match at all. */
+export function matchTier(index: DoorSearchIndex, query: string, phoneMode: boolean): number | null {
+  if (phoneMode) {
+    const digits = digitsOnly(query);
+    if (!index.phoneDigits || !digits) return null;
+    // Substring, so a query of the last four digits matches +595 981 234 567.
+    return index.phoneDigits.includes(digits) ? TIER_PREFIX : null;
+  }
+
+  if (index.full.startsWith(query)) return TIER_PREFIX;
+  if (index.words.some((word) => word.startsWith(query))) return TIER_PREFIX;
+  if (index.full.includes(query)) return TIER_SUBSTRING;
+  // Email is a fallback, not a way staff normally searches, and a one- or
+  // two-letter query would match almost every address — so it needs 3 characters.
+  if (query.length >= 3 && index.email && index.email.includes(query)) return TIER_SUBSTRING;
+  // Typo tolerance is the last resort: "jhon" still finds John, but only after
+  // every real prefix and substring match has been listed.
+  if (query.length >= 4 && index.words.some((word) => withinOneEdit(word, query))) return TIER_FUZZY;
+  return null;
+}
+
+/** Attendees who are still waiting to come in, shown when the input is empty. */
+const OPEN_STATUSES = new Set(['confirmed', 'pending', 'on_hold']);
+
+export interface IndexedAttendee {
+  attendee: DoorAttendee;
+  index: DoorSearchIndex;
+}
+
+/**
+ * Sort weight for equal match quality: people still to come in first, then those
+ * already inside, then cancelled tickets last — a cancelled row must never sit
+ * above a valid one that matches just as well.
+ */
+function stateWeight(attendee: DoorAttendee): number {
+  if (attendee.status === 'cancelled') return 2;
+  return attendee.checkedIn ? 1 : 0;
+}
+
+function byRank(
+  a: { attendee: DoorAttendee; tier: number },
+  b: { attendee: DoorAttendee; tier: number },
+): number {
+  if (a.tier !== b.tier) return a.tier - b.tier;
+  const stateDiff = stateWeight(a.attendee) - stateWeight(b.attendee);
+  if (stateDiff !== 0) return stateDiff;
+  return a.attendee.fullName.localeCompare(b.attendee.fullName, undefined, { sensitivity: 'base' });
+}
+
+export function searchAttendees(indexed: IndexedAttendee[], rawQuery: string): DoorAttendee[] {
+  const query = normalize(rawQuery);
+
+  // Empty input is the small-event case: everyone still to come in, alphabetical,
+  // so staff can scroll and tap without typing anything at all.
+  if (!query) {
+    return indexed
+      .filter(({ attendee }) => OPEN_STATUSES.has(attendee.status) && !attendee.checkedIn)
+      .map(({ attendee }) => attendee)
+      .sort((a, b) => a.fullName.localeCompare(b.fullName, undefined, { sensitivity: 'base' }));
+  }
+
+  const phoneMode = isPhoneQuery(rawQuery);
+  const scored: { attendee: DoorAttendee; tier: number }[] = [];
+  for (const entry of indexed) {
+    const tier = matchTier(entry.index, query, phoneMode);
+    if (tier !== null) scored.push({ attendee: entry.attendee, tier });
+  }
+  return scored.sort(byRank).map((s) => s.attendee);
+}
+
+/** True when the typed text already names somebody exactly — no walk-in row needed. */
+export function hasExactMatch(results: DoorAttendee[], rawQuery: string): boolean {
+  const query = normalize(rawQuery);
+  if (!query) return true;
+  return results.some((a) => normalize(a.fullName) === query || normalize(a.firstName) === query);
+}

frontend/src/lib/api/client.ts

@@ -31,8 +31,10 @@ export async function fetchApi<T>(
       : (errorData.message || JSON.stringify(errorData) || 'Request failed');
     const error = new Error(errorMessage);
     // Preserve structured error info (e.g. code: 'EVENT_OVER_CAPACITY') so
-    // callers can react beyond the message text.
+    // callers can react beyond the message text. The status lets callers tell a
+    // retryable server/network fault from a request that will always fail.
     (error as any).code = errorData.code;
+    (error as any).status = res.status;
     (error as any).data = errorData;
     throw error;
   }

frontend/src/lib/api/door.ts

@@ -0,0 +1,112 @@
+import { fetchApi } from './client';
+
+// ─── Door check-in screen API ────────────────────────────────
+// Every write is idempotent on a client-generated key so the door screen can
+// fire actions optimistically and retry on flaky venue wifi without ever
+// creating a duplicate ticket, payment or check-in.
+
+export const DOOR_PAYMENT_METHODS = ['cash', 'bitcoin', 'transfer', 'guest'] as const;
+export type DoorPaymentMethod = (typeof DOOR_PAYMENT_METHODS)[number];
+
+export type DoorEntryMethod = 'scan' | 'search' | 'walkin';
+
+export interface DoorAttendee {
+  ticketId: string;
+  firstName: string;
+  lastName: string | null;
+  fullName: string;
+  email: string | null;
+  phone: string | null;
+  status: 'pending' | 'confirmed' | 'cancelled' | 'checked_in' | 'on_hold';
+  paymentStatus: 'paid' | 'unpaid' | 'comp';
+  isGuest: boolean;
+  checkedIn: boolean;
+  checkinAt: string | null;
+  checkedInBy: string | null;
+  bookingId: string | null;
+  isGroupBooking: boolean;
+  amountDue: number;
+  doorMethod: DoorPaymentMethod | null;
+  qrCode: string | null;
+  createdAt: string | null;
+}
+
+export interface DoorAttendeesResponse {
+  event: { id: string; title: string; price: number; currency: string; capacity: number };
+  attendees: DoorAttendee[];
+  stats: { checkedIn: number; totalActive: number; capacity: number };
+}
+
+export interface DoorCheckinRequest {
+  ticketId?: string;
+  attendee?: {
+    firstName: string;
+    lastName?: string;
+    phone?: string;
+    email?: string;
+    ruc?: string;
+  };
+  payment?: { method: DoorPaymentMethod; amount?: number };
+  entryMethod?: DoorEntryMethod;
+  idempotencyKey: string;
+}
+
+export interface DoorCheckinResponse {
+  ok: true;
+  action: 'checkin' | 'walkin';
+  attendee: DoorAttendee;
+  payment: { id: string; method: DoorPaymentMethod; amount: number; currency: string } | null;
+  /** 'at_capacity' — the event is full; the attendee was added anyway. */
+  warnings: string[];
+  idempotencyKey: string;
+  processedAt: string;
+  /** True when this response was replayed from an already-processed key. */
+  replayed?: boolean;
+  undone?: boolean;
+}
+
+export interface DoorMethodTotal {
+  count: number;
+  total: number;
+}
+
+export interface DoorSummary {
+  eventId: string;
+  currency: string;
+  price: number;
+  door: {
+    count: number;
+    total: number;
+    byMethod: Record<DoorPaymentMethod, DoorMethodTotal>;
+    lines: {
+      paymentId: string;
+      ticketId: string;
+      name: string;
+      method: DoorPaymentMethod;
+      amount: number;
+      paidAt: string | null;
+    }[];
+  };
+  presale: { count: number; total: number };
+  total: number;
+}
+
+export const doorApi = {
+  // Preloaded once per event, then searched entirely in memory.
+  attendees: (eventId: string) =>
+    fetchApi<DoorAttendeesResponse>(`/api/events/${eventId}/door-attendees`),
+
+  checkin: (eventId: string, body: DoorCheckinRequest) =>
+    fetchApi<DoorCheckinResponse>(`/api/events/${eventId}/door-checkin`, {
+      method: 'POST',
+      body: JSON.stringify(body),
+    }),
+
+  undo: (eventId: string, idempotencyKey: string) =>
+    fetchApi<{ ok: true; ticketId?: string; reverted?: string; alreadyUndone?: boolean }>(
+      `/api/events/${eventId}/door-checkin/undo`,
+      { method: 'POST', body: JSON.stringify({ idempotencyKey }) }
+    ),
+
+  summary: (eventId: string) => fetchApi<DoorSummary>(`/api/events/${eventId}/door-summary`),
+};

frontend/src/lib/api/index.ts

@@ -4,6 +4,17 @@ export * from './types';
 
 export { eventsApi } from './events';
 export { ticketsApi } from './tickets';
+export { doorApi, DOOR_PAYMENT_METHODS } from './door';
+export type {
+  DoorAttendee,
+  DoorAttendeesResponse,
+  DoorCheckinRequest,
+  DoorCheckinResponse,
+  DoorEntryMethod,
+  DoorMethodTotal,
+  DoorPaymentMethod,
+  DoorSummary,
+} from './door';
 export { contactsApi } from './contacts';
 export { usersApi } from './users';
 export { paymentsApi } from './payments';