feat(tier2): finish the finish line — Block H follow-ups, Block G geolocation, cross-cutting
Three threads of work land here together to close out Tier 2.
### Block H follow-ups — day-of check-in
- Scanner is now an "open on your phone" magic-link flow. Hosts on
desktop mint a scoped JWT via POST /events/{id}/scanner-ticket and
render its URL into a QR; phone scans it and lands on /scanner with
the ticket as bearer. The ticket carries Audience=scanner so it can
never substitute for a session token.
- Plus-one confirmation at the door: scan → POST /check-in/preview to
fetch guest + expected party size → confirm buttons ("Just them",
"Party of N", custom) → POST /check-in. No more silent arrival_count=1.
- Offline scan queue: failed POSTs go into an IndexedDB store and drain
on the 'online' event with poison-message protection.
- Day-of arrivals headline widget on the event overview, gated to the
host's local calendar date so it doesn't dominate the page weeks out.
- Tab nav restyled with inline heroicons + scrollable segmented control;
Check-in moves to the rightmost slot.
- PWA: manifest + service worker scoped to /scanner, generated 192/512
icons (Go scripted renderer in scripts/gen-scanner-icons.go).
- Confirmation email QR was rendering broken because html/template
rewrites data: URLs to #ZgotmplZ; mark the value as template.URL.
- Email "open your invitation" link 404'd because we had no token to
put after /rsvp/. Threaded AccessLink through the RSVPConfirmed NATS
event from the API at submit time.
### Block G remainder — geolocation + threshold preview
- Pluggable GeoResolver in the fraud engine (NullResolver, IPApiResolver
for the free ip-api.com fallback, MaxMindResolver behind GG_GEOIP_DB_PATH).
Wrapped in a Redis cache (30d TTL). Geo flows through both gRPC and
NATS scoring paths.
- geo_jump scoring feature: >500km in <1h flags ("accessed from Lagos
and Paris within 12 minutes"); >500km in <6h is a softer signal. The
existing single-signal cap keeps a lone geo_jump in MEDIUM.
- FraudScored event carries geo_country/city/lat/lon; ApplyScore uses
COALESCE so a later re-score without geo doesn't wipe earlier data.
- Threshold-slider live preview: GET /events/{id}/security/thresholds/preview
returns band counts the host's existing access events would have
fallen into under the proposed thresholds. Debounced (250ms) widget
under the Advanced sliders so the host gets concrete feedback instead
of guessing.
### Cross-cutting — audit, tier-gating, feature flags
- audit_log table + internal/audit.Recorder (async fire-and-forget on
detached context so an audit blip never fails the real action). Wired
into branding update, thresholds update, allowlist add/remove,
collaborator invite/role-change/remove, message create/send-now/cancel.
- Tier-gating: extended billing.Limits with MaxCollaborators,
CustomBranding, Scanner, Broadcasts. Free = none; Pro = 5 + all;
Business = unlimited. Gates the scanner-ticket, message create,
branding put, and collaborator invite endpoints with 402 +
structured upgrade payload. Auto-reminders, fraud detection, and
analytics deliberately stay on every tier — those are safety + visibility
features, not upsell levers.
- Feature flags: feature_flags table + internal/flags.Store with 30s
in-memory refresh, stable sha256(key + user_id) percent bucketing,
unknown-key-defaults-on. Six Tier 2 flags pre-seeded. Three handlers
(branding, broadcasts, scanner) check the kill switch ahead of the
tier gate so ops can pull a feature back without a redeploy.
### Verified
- go test ./... + fraud-engine pytest (12/12 incl. 3 new geo_jump tests + 5
new flags tests).
- docker compose build + up across api, fraud-engine, notifier, frontend.
- /health endpoints 200; migrations 0014 + 0015 applied; 6 flags
seeded; audit_log table + partial indexes confirmed.
- Fraud-engine logs confirm geo resolver kind=CachedGeoResolver provider=auto.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Kwaku Danso
@@ -60,6 +60,46 @@ const eventId = route.params.id as string
|
||||
const event = ref<EventDetail | null>(null)
|
||||
const guests = ref<Guest[]>([])
|
||||
const stats = ref<GuestStats>({ total: 0, attending: 0, declined: 0, maybe: 0, pending: 0 })
|
||||
|
||||
// Day-of arrivals headline. Visible above the tab bar once any check-in
|
||||
// has been recorded; ticks up in real time via the check_in.recorded WS
|
||||
// broadcast so the host doesn't have to flip to the Check-in tab to see
|
||||
// progress on the door.
|
||||
interface CheckInSummary {
|
||||
arrived_headcount: number
|
||||
expected_headcount: number
|
||||
guests_checked_in: number
|
||||
}
|
||||
const checkInSummary = ref<CheckInSummary>({ arrived_headcount: 0, expected_headcount: 0, guests_checked_in: 0 })
|
||||
const arrivalsPct = computed(() => {
|
||||
const s = checkInSummary.value
|
||||
if (!s.expected_headcount) return 0
|
||||
return Math.min(100, Math.round((s.arrived_headcount / s.expected_headcount) * 100))
|
||||
})
|
||||
// The arrivals headline is a day-of tool, not a general-purpose
|
||||
// counter. Surfacing it weeks before the event would be noise on the
|
||||
// dashboard. Show it only when the host's local calendar date matches
|
||||
// the event date (or there have actually been check-ins recorded
|
||||
// today, which would imply the event is happening regardless of how
|
||||
// event_date is stored).
|
||||
const showArrivalsWidget = computed(() => {
|
||||
if (!event.value?.event_date) return false
|
||||
const evt = new Date(event.value.event_date)
|
||||
if (isNaN(evt.getTime())) return false
|
||||
const today = new Date()
|
||||
return evt.getFullYear() === today.getFullYear()
|
||||
&& evt.getMonth() === today.getMonth()
|
||||
&& evt.getDate() === today.getDate()
|
||||
})
|
||||
async function refreshArrivals() {
|
||||
try {
|
||||
const data = await useApi<{ summary: CheckInSummary }>(`/events/${eventId}/check-ins`)
|
||||
if (data?.summary) checkInSummary.value = data.summary
|
||||
} catch {
|
||||
// Viewer roles can read this; a transient failure shouldn't take
|
||||
// down the rest of the page.
|
||||
}
|
||||
}
|
||||
const filter = ref<'all' | 'attending' | 'declined' | 'maybe' | 'pending'>('all')
|
||||
const loading = ref(true)
|
||||
|
||||
@@ -71,6 +111,53 @@ const loading = ref(true)
|
||||
// clusters in the middle.
|
||||
type EventTab = 'guests' | 'collaborators' | 'communications' | 'branding' | 'analytics' | 'gate' | 'checkin'
|
||||
const validTabs: EventTab[] = ['guests', 'collaborators', 'communications', 'branding', 'analytics', 'gate', 'checkin']
|
||||
// Tab metadata. Icons are inline heroicons-style outline marks at 24px
|
||||
// viewBox; the template renders them at 18px and lets currentColor
|
||||
// inherit the active/inactive text colour. Keeping the SVG data here
|
||||
// (rather than in <template>) means the v-for stays one-liner clean.
|
||||
interface TabDef {
|
||||
id: EventTab
|
||||
label: string
|
||||
icon: string // inner SVG markup
|
||||
}
|
||||
const tabs: TabDef[] = [
|
||||
{
|
||||
id: 'guests',
|
||||
label: 'Guests',
|
||||
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/>',
|
||||
},
|
||||
{
|
||||
id: 'collaborators',
|
||||
label: 'Collaborators',
|
||||
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/>',
|
||||
},
|
||||
{
|
||||
id: 'communications',
|
||||
label: 'Communications',
|
||||
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"/>',
|
||||
},
|
||||
{
|
||||
id: 'branding',
|
||||
label: 'Branding',
|
||||
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42"/>',
|
||||
},
|
||||
{
|
||||
id: 'analytics',
|
||||
label: 'Analytics',
|
||||
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"/>',
|
||||
},
|
||||
{
|
||||
id: 'gate',
|
||||
label: 'Gate',
|
||||
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z"/>',
|
||||
},
|
||||
{
|
||||
id: 'checkin',
|
||||
label: 'Check-in',
|
||||
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5C19.746 3.75 20.25 4.254 20.25 4.875v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z M6.75 6.75h.008v.008H6.75V6.75ZM6.75 16.5h.008v.008H6.75V16.5ZM16.5 6.75h.008v.008H16.5V6.75ZM13.5 13.5h.008v.008H13.5V13.5ZM13.5 19.5h.008v.008H13.5V19.5ZM19.5 13.5h.008v.008H19.5V13.5ZM19.5 19.5h.008v.008H19.5V19.5ZM16.5 16.5h.008v.008H16.5V16.5Z"/>',
|
||||
},
|
||||
]
|
||||
|
||||
function tabFromHash(): EventTab {
|
||||
if (import.meta.client) {
|
||||
const h = window.location.hash.replace('#', '') as EventTab
|
||||
@@ -104,6 +191,10 @@ async function refresh() {
|
||||
event.value = evt
|
||||
guests.value = list.guests || []
|
||||
if (list.stats) stats.value = list.stats
|
||||
// Fire-and-forget so a slow check-ins query doesn't hold up the rest
|
||||
// of the page. Viewer roles will 403 on this endpoint — that's fine,
|
||||
// refreshArrivals swallows it.
|
||||
void refreshArrivals()
|
||||
}
|
||||
|
||||
const filteredGuests = computed(() => {
|
||||
@@ -713,6 +804,22 @@ onMounted(() => {
|
||||
})
|
||||
// Refresh stats and per-guest status so the counts reflect the new RSVP.
|
||||
refresh().catch(() => {})
|
||||
} else if (msg.type === 'check_in.recorded') {
|
||||
// Day-of arrivals stream. The payload already carries the
|
||||
// updated headcount so we don't have to re-fetch the summary.
|
||||
const p = msg.payload || {}
|
||||
if (typeof p.arrived_headcount === 'number') {
|
||||
checkInSummary.value = {
|
||||
arrived_headcount: p.arrived_headcount,
|
||||
expected_headcount: p.expected_headcount ?? checkInSummary.value.expected_headcount,
|
||||
guests_checked_in: p.guests_checked_in ?? checkInSummary.value.guests_checked_in,
|
||||
}
|
||||
}
|
||||
pushFeed({
|
||||
type: msg.type,
|
||||
ts: msg.timestamp,
|
||||
text: `${p.guest_name || 'Guest'} checked in${p.walk_in ? ' (walk-in)' : ''}.`,
|
||||
})
|
||||
} else if (msg.type === 'fraud.scored') {
|
||||
const g = guestById.value[msg.payload.guest_id]
|
||||
const who = g?.name || 'A guest'
|
||||
@@ -770,39 +877,73 @@ function checkLabel(band?: string): string {
|
||||
<p class="text-sm text-zinc-400">{{ event.venue }} · {{ fmtDate(event.event_date) }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Tab nav — segmented-control style: a single bordered container
|
||||
with a brand-tinted "lifted" state for the active tab. Stronger
|
||||
visual weight than underlined tabs, no overflow tricks (the
|
||||
previous absolute-positioned underline was leaking a 1px vertical
|
||||
scrollbar on the sticky container). Mobile wraps onto two rows
|
||||
when needed rather than introducing horizontal scroll. -->
|
||||
<!-- Day-of arrivals headline. Only renders once anything's been
|
||||
recorded so it doesn't dominate the page in the weeks before
|
||||
the event. Updates live via WS. -->
|
||||
<div
|
||||
v-if="showArrivalsWidget"
|
||||
class="flex items-center justify-between gap-4 rounded-lg border border-brand-700/40 bg-brand-500/[0.06] px-4 py-3"
|
||||
>
|
||||
<div class="min-w-0">
|
||||
<p class="text-[10px] font-medium uppercase tracking-widest text-brand-400">Arrived</p>
|
||||
<p class="mt-0.5 text-2xl font-semibold tabular-nums text-brand-200">
|
||||
{{ checkInSummary.arrived_headcount }}
|
||||
<span class="text-sm font-normal text-zinc-400">of {{ checkInSummary.expected_headcount }}</span>
|
||||
<span class="ml-2 text-xs font-normal text-zinc-500">·
|
||||
{{ checkInSummary.guests_checked_in }}
|
||||
{{ checkInSummary.guests_checked_in === 1 ? 'guest' : 'guests' }} in
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center gap-3">
|
||||
<div class="hidden h-1.5 w-32 overflow-hidden rounded-full bg-zinc-900 sm:block">
|
||||
<div class="h-full rounded-full bg-brand-500 transition-all" :style="{ width: arrivalsPct + '%' }"></div>
|
||||
</div>
|
||||
<p class="text-lg font-semibold text-brand-200 tabular-nums">{{ arrivalsPct }}%</p>
|
||||
<button
|
||||
class="rounded-md border border-zinc-700 px-2.5 py-1 text-xs hover:border-zinc-500 hover:bg-zinc-900"
|
||||
@click="setTab('checkin')"
|
||||
>Open scanner</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab nav. Segmented-control take inspired by Linear / Vercel:
|
||||
icon + label per tab, soft active fill, accessible focus ring,
|
||||
consistent 18px outline-style icons (heroicons set). On narrow
|
||||
viewports the row scrolls horizontally instead of wrapping to
|
||||
two ragged rows — feels more "app-like" and keeps the labels
|
||||
legible even on phones in portrait. -->
|
||||
<nav
|
||||
role="tablist"
|
||||
aria-label="Event sections"
|
||||
class="flex flex-wrap gap-1 rounded-lg border border-zinc-800 bg-zinc-900/40 p-1"
|
||||
class="-mx-1 flex gap-1 overflow-x-auto rounded-xl border border-zinc-800 bg-zinc-900/60 p-1 shadow-inner [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
|
||||
>
|
||||
<button
|
||||
v-for="t in [
|
||||
{ id: 'guests', label: 'Guests' },
|
||||
{ id: 'collaborators', label: 'Collaborators' },
|
||||
{ id: 'communications', label: 'Communications' },
|
||||
{ id: 'checkin', label: 'Check-in' },
|
||||
{ id: 'branding', label: 'Branding' },
|
||||
{ id: 'analytics', label: 'Analytics' },
|
||||
{ id: 'gate', label: 'Gate' },
|
||||
] as { id: EventTab, label: string }[]"
|
||||
v-for="t in tabs"
|
||||
:key="t.id"
|
||||
role="tab"
|
||||
:aria-selected="activeTab === t.id"
|
||||
:class="[
|
||||
'flex-1 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium transition',
|
||||
'group relative inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-lg px-3.5 py-2 text-sm font-medium transition-all duration-150',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/60 focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-950',
|
||||
activeTab === t.id
|
||||
? 'border border-brand-700/40 bg-brand-500/10 text-brand-200 shadow-sm'
|
||||
: 'border border-transparent text-zinc-400 hover:bg-zinc-800/60 hover:text-zinc-100',
|
||||
? 'bg-brand-500/15 text-brand-100 shadow-[inset_0_-2px_0_0_#22c55e]'
|
||||
: 'text-zinc-400 hover:bg-zinc-800/70 hover:text-zinc-100',
|
||||
]"
|
||||
@click="setTab(t.id)"
|
||||
>
|
||||
{{ t.label }}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.6"
|
||||
stroke="currentColor"
|
||||
class="h-[18px] w-[18px] shrink-0 transition-colors"
|
||||
:class="activeTab === t.id ? 'text-brand-300' : 'text-zinc-500 group-hover:text-zinc-300'"
|
||||
aria-hidden="true"
|
||||
v-html="t.icon"
|
||||
/>
|
||||
<span class="leading-none">{{ t.label }}</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -216,6 +216,18 @@ function fmtDate(iso?: string) {
|
||||
try { return new Date(iso).toLocaleString() } catch { return iso }
|
||||
}
|
||||
|
||||
// Slug + filename for the downloaded QR. Keeps a guest's downloads
|
||||
// folder readable when they save codes for several events instead of
|
||||
// ending up with a stack of "qr (4).png" copies.
|
||||
function qrDownloadFilename(): string {
|
||||
const name = access.value?.event?.name || 'invitation'
|
||||
const slug = name
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/^-+|-+$/g, '')
|
||||
return `${slug || 'invitation'}-rsvp-qr.png`
|
||||
}
|
||||
|
||||
// Calendar links come from the backend so we don't reimplement Google /
|
||||
// Outlook / Yahoo encoding rules per provider. They're available as soon
|
||||
// as /access loads — the guest can grab them before submitting.
|
||||
@@ -327,9 +339,9 @@ const submitLabel = computed(() => {
|
||||
class="mt-5 border-t border-zinc-800 pt-4"
|
||||
/>
|
||||
|
||||
<!-- Block H — door QR for attending guests. Shown right under
|
||||
"you're confirmed" because that's when the guest is most
|
||||
likely to screenshot or save the email. -->
|
||||
<!-- Block H — door QR for attending guests. The same code is
|
||||
also delivered in the confirmation email so the guest has
|
||||
two ways to keep it. -->
|
||||
<div
|
||||
v-if="access?.check_in && result.rsvp.response === 'attending'"
|
||||
class="mt-5 border-t border-zinc-800 pt-4"
|
||||
@@ -338,8 +350,8 @@ const submitLabel = computed(() => {
|
||||
Save for the day
|
||||
</p>
|
||||
<p class="mb-3 text-sm text-zinc-300">
|
||||
Show this code at the door for a quick check-in. Screenshot it now,
|
||||
or look out for the same code on your confirmation email.
|
||||
Show this code at the door for a quick check-in. We've also sent it to your
|
||||
email — keep whichever's easier.
|
||||
</p>
|
||||
<div class="flex items-center justify-center rounded-md border border-zinc-800 bg-white p-3">
|
||||
<img
|
||||
@@ -348,6 +360,18 @@ const submitLabel = computed(() => {
|
||||
class="h-44 w-44"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-center">
|
||||
<a
|
||||
:href="access.check_in.qr_image"
|
||||
:download="qrDownloadFilename()"
|
||||
class="btn-ghost inline-flex items-center gap-1.5 text-sm"
|
||||
>
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm6.293-3.707a1 1 0 011.414 0L13 15.586V5a1 1 0 112 0v10.586l2.293-2.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
|
||||
</svg>
|
||||
Download QR
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!editLimitReached" class="mt-5 flex items-center justify-between gap-3 border-t border-zinc-800 pt-4">
|
||||
@@ -399,6 +423,18 @@ const submitLabel = computed(() => {
|
||||
class="h-44 w-44"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-center">
|
||||
<a
|
||||
:href="access.check_in.qr_image"
|
||||
:download="qrDownloadFilename()"
|
||||
class="btn-ghost inline-flex items-center gap-1.5 text-sm"
|
||||
>
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm6.293-3.707a1 1 0 011.414 0L13 15.586V5a1 1 0 112 0v10.586l2.293-2.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
|
||||
</svg>
|
||||
Download QR
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!editLimitReached" class="flex items-center justify-between gap-3 border-t border-zinc-800 pt-4">
|
||||
|
||||
@@ -0,0 +1,790 @@
|
||||
<script setup lang="ts">
|
||||
// /scanner — the page a door volunteer's phone lands on after the host
|
||||
// shares a magic link (or the host points their own phone at the QR on
|
||||
// their desktop event-detail page).
|
||||
//
|
||||
// Flow per scan:
|
||||
//
|
||||
// 1. Camera detects a QR → handleScannedPayload()
|
||||
// 2. Pause the camera + dedupe set
|
||||
// 3. POST /events/{id}/check-in/preview → guest name + expected party size
|
||||
// 4. Show confirmation panel with "Just them / +1 / +2 / Other" buttons
|
||||
// 5. Volunteer taps a count → POST /check-in with arrival_count
|
||||
// 6. Success → toast + summary update; cancel → resume scanning
|
||||
//
|
||||
// The preview step is what lets the door volunteer correctly record
|
||||
// "the bride brought her cousin who wasn't invited" without making them
|
||||
// type or wonder whether they're recording two people instead of one.
|
||||
//
|
||||
// Offline / flaky-network mode (task #42):
|
||||
//
|
||||
// When the record POST fails with a network error (no connectivity,
|
||||
// 5xx), the {qr_payload, arrival_count, queued_at} tuple goes into an
|
||||
// IndexedDB store. A small badge surfaces "N queued"; the queue
|
||||
// drains automatically on 'online', and an explicit "Sync now" button
|
||||
// gives the volunteer a manual lever if they're behind a captive
|
||||
// portal. Server-side 4xx (already-checked-in, bad QR, scoped-to-
|
||||
// different-event) deliberately don't re-queue — those are user-
|
||||
// facing problems, not transport problems.
|
||||
|
||||
definePageMeta({ layout: false })
|
||||
|
||||
useHead({
|
||||
title: 'Door scanner · GuestGuard',
|
||||
meta: [
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' },
|
||||
{ name: 'theme-color', content: '#0a0a0a' },
|
||||
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
|
||||
{ name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
|
||||
{ name: 'apple-mobile-web-app-title', content: 'GuestGuard Scanner' },
|
||||
{ name: 'mobile-web-app-capable', content: 'yes' },
|
||||
],
|
||||
link: [
|
||||
{ rel: 'manifest', href: '/manifest.json' },
|
||||
],
|
||||
})
|
||||
|
||||
interface Summary {
|
||||
arrived_headcount: number
|
||||
expected_headcount: number
|
||||
guests_checked_in: number
|
||||
}
|
||||
|
||||
interface CheckInRecord {
|
||||
id: string
|
||||
guest_id: string
|
||||
checked_in_at: string
|
||||
arrival_count: number
|
||||
walk_in: boolean
|
||||
}
|
||||
|
||||
interface ListResponse {
|
||||
check_ins: CheckInRecord[]
|
||||
summary: Summary
|
||||
}
|
||||
|
||||
interface PreviewResponse {
|
||||
guest: { id: string; name: string; plus_ones: number; email?: string | null }
|
||||
expected_party_size: number
|
||||
already_checked_in: boolean
|
||||
existing_check_in?: CheckInRecord | null
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const config = useRuntimeConfig()
|
||||
const apiBase = config.public.apiBase as string
|
||||
|
||||
const token = ref<string>('')
|
||||
const eventId = ref<string>('')
|
||||
const tokenInvalid = ref(false)
|
||||
const fatalError = ref<string | null>(null)
|
||||
|
||||
onMounted(() => {
|
||||
token.value = String(route.query.token || '')
|
||||
eventId.value = String(route.query.event || '')
|
||||
if (!token.value || !eventId.value) {
|
||||
tokenInvalid.value = true
|
||||
return
|
||||
}
|
||||
void loadList()
|
||||
void initQueue().then(() => {
|
||||
void drainQueue()
|
||||
refreshQueueCount()
|
||||
})
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('/scanner-sw.js').catch(() => {})
|
||||
}
|
||||
window.addEventListener('online', onOnline)
|
||||
window.addEventListener('offline', onOffline)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (typeof window === 'undefined') return
|
||||
window.removeEventListener('online', onOnline)
|
||||
window.removeEventListener('offline', onOffline)
|
||||
})
|
||||
|
||||
async function authedFetch<T>(path: string, init: { method?: string; body?: unknown } = {}): Promise<T> {
|
||||
return await $fetch<T>(path, {
|
||||
baseURL: apiBase,
|
||||
method: (init.method ?? 'GET') as any,
|
||||
body: init.body as any,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token.value}`,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// --- summary + recent arrivals ---
|
||||
|
||||
const summary = ref<Summary>({ arrived_headcount: 0, expected_headcount: 0, guests_checked_in: 0 })
|
||||
const recent = ref<CheckInRecord[]>([])
|
||||
const offline = ref<boolean>(typeof navigator !== 'undefined' ? !navigator.onLine : false)
|
||||
|
||||
async function loadList() {
|
||||
try {
|
||||
const data = await authedFetch<ListResponse>(`/events/${eventId.value}/check-ins`)
|
||||
summary.value = data.summary
|
||||
recent.value = (data.check_ins || []).slice(0, 5)
|
||||
} catch (e: any) {
|
||||
const status = e?.response?.status ?? e?.statusCode
|
||||
if (status === 401) {
|
||||
tokenInvalid.value = true
|
||||
return
|
||||
}
|
||||
// Network failure is fine — we'll work from the queued local
|
||||
// summary until the radio comes back.
|
||||
if (!isNetworkError(e)) {
|
||||
fatalError.value = e?.data?.error || 'Could not load arrivals.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- IndexedDB queue ---
|
||||
//
|
||||
// Tiny one-store DB. We don't pull in idb-keyval to keep the bundle
|
||||
// lean; the raw IndexedDB surface is enough for an append-only queue.
|
||||
|
||||
const QUEUE_DB = 'gg-scanner'
|
||||
const QUEUE_STORE = 'pending-checkins'
|
||||
const queueCount = ref(0)
|
||||
let dbRef: IDBDatabase | null = null
|
||||
|
||||
function initQueue(): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
if (typeof indexedDB === 'undefined') {
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
const req = indexedDB.open(QUEUE_DB, 1)
|
||||
req.onupgradeneeded = () => {
|
||||
const db = req.result
|
||||
if (!db.objectStoreNames.contains(QUEUE_STORE)) {
|
||||
db.createObjectStore(QUEUE_STORE, { keyPath: 'id', autoIncrement: true })
|
||||
}
|
||||
}
|
||||
req.onsuccess = () => {
|
||||
dbRef = req.result
|
||||
resolve()
|
||||
}
|
||||
req.onerror = () => resolve()
|
||||
})
|
||||
}
|
||||
|
||||
type QueueRow = {
|
||||
id?: number
|
||||
event_id: string
|
||||
qr_payload: string
|
||||
arrival_count: number
|
||||
notes?: string
|
||||
queued_at: number
|
||||
}
|
||||
|
||||
function queueAdd(row: Omit<QueueRow, 'id'>): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
if (!dbRef) { resolve(); return }
|
||||
const tx = dbRef.transaction(QUEUE_STORE, 'readwrite')
|
||||
tx.objectStore(QUEUE_STORE).add(row)
|
||||
tx.oncomplete = () => { refreshQueueCount(); resolve() }
|
||||
tx.onerror = () => resolve()
|
||||
})
|
||||
}
|
||||
|
||||
function queueAll(): Promise<QueueRow[]> {
|
||||
return new Promise((resolve) => {
|
||||
if (!dbRef) { resolve([]); return }
|
||||
const tx = dbRef.transaction(QUEUE_STORE, 'readonly')
|
||||
const req = tx.objectStore(QUEUE_STORE).getAll()
|
||||
req.onsuccess = () => resolve((req.result as QueueRow[]) || [])
|
||||
req.onerror = () => resolve([])
|
||||
})
|
||||
}
|
||||
|
||||
function queueDelete(id: number): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
if (!dbRef) { resolve(); return }
|
||||
const tx = dbRef.transaction(QUEUE_STORE, 'readwrite')
|
||||
tx.objectStore(QUEUE_STORE).delete(id)
|
||||
tx.oncomplete = () => { refreshQueueCount(); resolve() }
|
||||
tx.onerror = () => resolve()
|
||||
})
|
||||
}
|
||||
|
||||
function refreshQueueCount() {
|
||||
void queueAll().then((rows) => { queueCount.value = rows.length })
|
||||
}
|
||||
|
||||
let draining = false
|
||||
async function drainQueue() {
|
||||
if (draining) return
|
||||
if (typeof navigator !== 'undefined' && !navigator.onLine) return
|
||||
draining = true
|
||||
try {
|
||||
const rows = await queueAll()
|
||||
for (const row of rows) {
|
||||
if (row.event_id !== eventId.value) continue // foreign event id — leave it alone
|
||||
try {
|
||||
const res = await authedFetch<{ guest?: { name?: string }; summary: Summary; check_in: CheckInRecord }>(
|
||||
`/events/${eventId.value}/check-in`,
|
||||
{ method: 'POST', body: { qr_payload: row.qr_payload, arrival_count: row.arrival_count, notes: row.notes } },
|
||||
)
|
||||
summary.value = res.summary
|
||||
recent.value = [res.check_in, ...recent.value].slice(0, 5)
|
||||
if (row.id !== undefined) await queueDelete(row.id)
|
||||
} catch (e: any) {
|
||||
const status = e?.response?.status ?? e?.statusCode
|
||||
if (status === 409 || status === 410 || status === 400 || status === 404) {
|
||||
// Server says this scan will never succeed. Drop the row so
|
||||
// the queue doesn't get stuck behind a poison message; surface
|
||||
// it once to the volunteer.
|
||||
if (row.id !== undefined) await queueDelete(row.id)
|
||||
showToast({ kind: 'warn', text: `Queued scan dropped (${e?.data?.error || 'rejected'})` }, 3500)
|
||||
continue
|
||||
}
|
||||
if (isNetworkError(e)) {
|
||||
// Still offline — stop and try again on next online event.
|
||||
break
|
||||
}
|
||||
// 5xx etc. — stop, retry later, but log fatally.
|
||||
fatalError.value = e?.data?.error || 'Queued scan retry failed.'
|
||||
break
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
draining = false
|
||||
refreshQueueCount()
|
||||
}
|
||||
}
|
||||
|
||||
function onOnline() {
|
||||
offline.value = false
|
||||
showToast({ kind: 'success', text: 'Back online. Syncing scans…' }, 2000)
|
||||
void drainQueue()
|
||||
}
|
||||
function onOffline() {
|
||||
offline.value = true
|
||||
showToast({ kind: 'warn', text: 'Offline. Scans will sync when you reconnect.' }, 3000)
|
||||
}
|
||||
|
||||
function isNetworkError(e: any): boolean {
|
||||
if (!e) return false
|
||||
if (e.name === 'FetchError' && !e.response) return true
|
||||
if (e.message && /network|fetch|failed to fetch|load failed/i.test(e.message)) return true
|
||||
if (typeof navigator !== 'undefined' && !navigator.onLine) return true
|
||||
return false
|
||||
}
|
||||
|
||||
// --- camera ---
|
||||
|
||||
type Toast = { kind: 'success' | 'warn' | 'error'; text: string }
|
||||
const toast = ref<Toast | null>(null)
|
||||
let toastTimer: ReturnType<typeof setTimeout> | null = null
|
||||
function showToast(t: Toast, ms = 2500) {
|
||||
toast.value = t
|
||||
if (toastTimer) clearTimeout(toastTimer)
|
||||
toastTimer = setTimeout(() => { toast.value = null }, ms)
|
||||
}
|
||||
|
||||
const cameraOn = ref(false)
|
||||
const startError = ref<string | null>(null)
|
||||
const videoRef = ref<HTMLVideoElement | null>(null)
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null)
|
||||
let mediaStream: MediaStream | null = null
|
||||
let scanLoopHandle: number | null = null
|
||||
const lastScanAt = ref(0)
|
||||
const recentlyScanned = ref<Set<string>>(new Set())
|
||||
|
||||
// True while the confirmation panel is showing — scanning pauses so
|
||||
// the camera doesn't keep firing previews on the same QR while the
|
||||
// volunteer is choosing a party size.
|
||||
const scanningPaused = computed(() => confirm.value !== null)
|
||||
|
||||
async function ensureJsQR() {
|
||||
if (typeof window === 'undefined') return null
|
||||
const w = window as any
|
||||
if (w.jsQR) return w.jsQR
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
const s = document.createElement('script')
|
||||
s.src = 'https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js'
|
||||
s.onload = () => resolve()
|
||||
s.onerror = () => reject(new Error('Could not load scanner script'))
|
||||
document.head.appendChild(s)
|
||||
})
|
||||
return w.jsQR
|
||||
}
|
||||
|
||||
async function startCamera() {
|
||||
startError.value = null
|
||||
try {
|
||||
const jsQR = await ensureJsQR()
|
||||
if (!jsQR) {
|
||||
startError.value = 'This browser can\'t scan QR codes. Try Chrome or Safari.'
|
||||
return
|
||||
}
|
||||
mediaStream = await navigator.mediaDevices.getUserMedia({
|
||||
video: { facingMode: 'environment' },
|
||||
audio: false,
|
||||
})
|
||||
cameraOn.value = true
|
||||
await nextTick()
|
||||
if (videoRef.value) {
|
||||
videoRef.value.srcObject = mediaStream
|
||||
await videoRef.value.play()
|
||||
scanLoop(jsQR)
|
||||
}
|
||||
} catch (e: any) {
|
||||
startError.value = e?.message || 'Could not start the camera.'
|
||||
}
|
||||
}
|
||||
|
||||
function stopCamera() {
|
||||
if (scanLoopHandle !== null) {
|
||||
cancelAnimationFrame(scanLoopHandle)
|
||||
scanLoopHandle = null
|
||||
}
|
||||
if (mediaStream) {
|
||||
mediaStream.getTracks().forEach((t) => t.stop())
|
||||
mediaStream = null
|
||||
}
|
||||
cameraOn.value = false
|
||||
recentlyScanned.value.clear()
|
||||
}
|
||||
|
||||
function scanLoop(jsQR: any) {
|
||||
const video = videoRef.value
|
||||
const canvas = canvasRef.value
|
||||
if (!video || !canvas) return
|
||||
const ctx = canvas.getContext('2d', { willReadFrequently: true })
|
||||
if (!ctx) return
|
||||
const tick = () => {
|
||||
if (!cameraOn.value || !videoRef.value || !canvasRef.value) return
|
||||
if (!scanningPaused.value && videoRef.value.readyState === videoRef.value.HAVE_ENOUGH_DATA) {
|
||||
canvas.width = videoRef.value.videoWidth
|
||||
canvas.height = videoRef.value.videoHeight
|
||||
ctx.drawImage(videoRef.value, 0, 0, canvas.width, canvas.height)
|
||||
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
|
||||
const code = jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'dontInvert' })
|
||||
if (code && code.data && shouldProcessScan(code.data)) {
|
||||
void handleScannedPayload(code.data)
|
||||
}
|
||||
}
|
||||
scanLoopHandle = requestAnimationFrame(tick)
|
||||
}
|
||||
tick()
|
||||
}
|
||||
|
||||
function shouldProcessScan(payload: string): boolean {
|
||||
const now = Date.now()
|
||||
if (now - lastScanAt.value < 1500) return false
|
||||
if (recentlyScanned.value.has(payload)) return false
|
||||
lastScanAt.value = now
|
||||
recentlyScanned.value.add(payload)
|
||||
setTimeout(() => recentlyScanned.value.delete(payload), 10_000)
|
||||
return true
|
||||
}
|
||||
|
||||
// --- confirm panel state ---
|
||||
//
|
||||
// confirm.value === null → scanner is live, waiting for a QR
|
||||
// confirm.value !== null → showing the guest preview + party-size buttons
|
||||
|
||||
type ConfirmState = {
|
||||
payload: string
|
||||
guestName: string
|
||||
expected: number // expected party size from preview
|
||||
plusOnes: number // allowance from the guest record
|
||||
alreadyIn: boolean
|
||||
customCount: number // for "Other (N)" input
|
||||
submitting: boolean
|
||||
}
|
||||
|
||||
const confirm = ref<ConfirmState | null>(null)
|
||||
|
||||
async function handleScannedPayload(payload: string) {
|
||||
// Preview lookup. Failures fall back: if we can't reach the API we
|
||||
// still let the volunteer pick a count, defaulting to 1 — the actual
|
||||
// record POST will queue offline-style for sync later.
|
||||
try {
|
||||
const res = await authedFetch<PreviewResponse>(
|
||||
`/events/${eventId.value}/check-in/preview`,
|
||||
{ method: 'POST', body: { qr_payload: payload } },
|
||||
)
|
||||
confirm.value = {
|
||||
payload,
|
||||
guestName: res.guest?.name || 'Guest',
|
||||
expected: res.expected_party_size,
|
||||
plusOnes: res.guest?.plus_ones ?? 0,
|
||||
alreadyIn: res.already_checked_in,
|
||||
customCount: res.expected_party_size,
|
||||
submitting: false,
|
||||
}
|
||||
if (navigator.vibrate) navigator.vibrate(60)
|
||||
} catch (e: any) {
|
||||
const status = e?.response?.status ?? e?.statusCode
|
||||
if (status === 401 || status === 403) {
|
||||
tokenInvalid.value = true
|
||||
stopCamera()
|
||||
return
|
||||
}
|
||||
if (status === 410) {
|
||||
showToast({ kind: 'error', text: 'This guest code has expired.' })
|
||||
return
|
||||
}
|
||||
if (status === 400 || status === 404) {
|
||||
showToast({ kind: 'error', text: 'That doesn\'t look like one of your guests.' })
|
||||
return
|
||||
}
|
||||
if (isNetworkError(e)) {
|
||||
// No preview available offline. Open the confirm panel with a
|
||||
// sensible default so the volunteer can still record. We don't
|
||||
// know the name or plus-one cap; fall back to a generic prompt.
|
||||
confirm.value = {
|
||||
payload,
|
||||
guestName: 'Guest (offline)',
|
||||
expected: 1,
|
||||
plusOnes: 5, // permissive cap on the +N buttons
|
||||
alreadyIn: false,
|
||||
customCount: 1,
|
||||
submitting: false,
|
||||
}
|
||||
return
|
||||
}
|
||||
showToast({ kind: 'error', text: e?.data?.error || 'Could not look up that scan.' })
|
||||
}
|
||||
}
|
||||
|
||||
function cancelConfirm() {
|
||||
confirm.value = null
|
||||
}
|
||||
|
||||
async function commitCheckIn(arrivalCount: number) {
|
||||
const c = confirm.value
|
||||
if (!c || c.submitting) return
|
||||
c.submitting = true
|
||||
const body = { qr_payload: c.payload, arrival_count: arrivalCount }
|
||||
try {
|
||||
const res = await authedFetch<{ guest?: { name?: string }; summary: Summary; check_in: CheckInRecord }>(
|
||||
`/events/${eventId.value}/check-in`,
|
||||
{ method: 'POST', body },
|
||||
)
|
||||
summary.value = res.summary
|
||||
recent.value = [res.check_in, ...recent.value].slice(0, 5)
|
||||
showToast({ kind: 'success', text: `${c.guestName} · party of ${arrivalCount} ✓` })
|
||||
if (navigator.vibrate) navigator.vibrate(80)
|
||||
confirm.value = null
|
||||
} catch (e: any) {
|
||||
const status = e?.response?.status ?? e?.statusCode
|
||||
if (status === 409) {
|
||||
showToast({ kind: 'warn', text: 'Already checked in.' })
|
||||
confirm.value = null
|
||||
return
|
||||
}
|
||||
if (status === 410 || status === 400 || status === 404) {
|
||||
showToast({ kind: 'error', text: e?.data?.error || 'Could not check in.' })
|
||||
confirm.value = null
|
||||
return
|
||||
}
|
||||
if (status === 401 || status === 403) {
|
||||
tokenInvalid.value = true
|
||||
stopCamera()
|
||||
return
|
||||
}
|
||||
if (isNetworkError(e)) {
|
||||
await queueAdd({
|
||||
event_id: eventId.value,
|
||||
qr_payload: c.payload,
|
||||
arrival_count: arrivalCount,
|
||||
queued_at: Date.now(),
|
||||
})
|
||||
showToast({ kind: 'warn', text: `Queued · ${c.guestName} (will sync when online)` }, 3500)
|
||||
confirm.value = null
|
||||
return
|
||||
}
|
||||
showToast({ kind: 'error', text: e?.data?.error || 'Could not check in.' })
|
||||
} finally {
|
||||
if (confirm.value) confirm.value.submitting = false
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(stopCamera)
|
||||
|
||||
// --- walk-in ---
|
||||
|
||||
const walkInOpen = ref(false)
|
||||
const walkInForm = reactive({ name: '', arrival_count: 1 })
|
||||
const walkInSubmitting = ref(false)
|
||||
|
||||
async function submitWalkIn() {
|
||||
if (!walkInForm.name.trim()) return
|
||||
walkInSubmitting.value = true
|
||||
try {
|
||||
const res = await authedFetch<{ guest: { name: string }; summary: Summary; check_in: CheckInRecord }>(
|
||||
`/events/${eventId.value}/walk-ins`,
|
||||
{
|
||||
method: 'POST',
|
||||
body: { name: walkInForm.name.trim(), arrival_count: walkInForm.arrival_count },
|
||||
},
|
||||
)
|
||||
summary.value = res.summary
|
||||
recent.value = [res.check_in, ...recent.value].slice(0, 5)
|
||||
showToast({ kind: 'success', text: `${res.guest.name} added.` })
|
||||
walkInForm.name = ''
|
||||
walkInForm.arrival_count = 1
|
||||
walkInOpen.value = false
|
||||
} catch (e: any) {
|
||||
showToast({ kind: 'error', text: e?.data?.error || 'Could not add walk-in.' })
|
||||
} finally {
|
||||
walkInSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const arrivalPct = computed(() => {
|
||||
const exp = summary.value.expected_headcount
|
||||
const arr = summary.value.arrived_headcount
|
||||
if (exp === 0) return 0
|
||||
return Math.min(100, Math.round((arr / exp) * 100))
|
||||
})
|
||||
|
||||
// Party-size buttons. We always show 1, 1+plusOnes/2, and "Other"; the
|
||||
// middle button is the recommended default (the guest's full party
|
||||
// size from the preview).
|
||||
const partyButtons = computed(() => {
|
||||
const c = confirm.value
|
||||
if (!c) return [] as { label: string; count: number; recommended: boolean }[]
|
||||
const out: { label: string; count: number; recommended: boolean }[] = []
|
||||
out.push({ label: 'Just them', count: 1, recommended: c.expected === 1 })
|
||||
if (c.expected > 1) {
|
||||
out.push({ label: `Party of ${c.expected}`, count: c.expected, recommended: true })
|
||||
}
|
||||
// Show intermediate plus-one counts if there's a gap (e.g. expected=3
|
||||
// → button for 2 as well).
|
||||
for (let n = 2; n < c.expected; n++) {
|
||||
out.splice(out.length - 1, 0, { label: `Party of ${n}`, count: n, recommended: false })
|
||||
}
|
||||
return out
|
||||
})
|
||||
|
||||
function backToDashboard() {
|
||||
router.push('/dashboard')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-zinc-950 text-zinc-100">
|
||||
<!-- Invalid / expired token landing. -->
|
||||
<div v-if="tokenInvalid" class="flex min-h-screen flex-col items-center justify-center px-6 text-center">
|
||||
<div class="mb-4 text-4xl">🔒</div>
|
||||
<h1 class="text-xl font-semibold">This scanner link can't be used</h1>
|
||||
<p class="mt-2 max-w-sm text-sm text-zinc-400">
|
||||
It may have expired, been revoked, or wasn't for this event.
|
||||
Ask the host to send you a fresh link from their dashboard.
|
||||
</p>
|
||||
<button class="mt-6 rounded-md bg-brand-500 px-4 py-2 text-sm font-medium text-zinc-950 hover:bg-brand-400" @click="backToDashboard">
|
||||
Back to GuestGuard
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Active scanner. -->
|
||||
<div v-else class="mx-auto flex min-h-screen max-w-md flex-col">
|
||||
<header class="flex items-center justify-between px-4 py-3 text-sm">
|
||||
<p class="font-medium">GuestGuard · Door scanner</p>
|
||||
<div class="flex items-center gap-3 text-xs">
|
||||
<span
|
||||
v-if="offline"
|
||||
class="rounded-full bg-amber-900/40 px-2 py-0.5 text-amber-200"
|
||||
>Offline</span>
|
||||
<button
|
||||
v-if="queueCount > 0"
|
||||
class="rounded-full bg-zinc-800 px-2 py-0.5 text-zinc-200 hover:bg-zinc-700"
|
||||
@click="drainQueue"
|
||||
>Sync {{ queueCount }}</button>
|
||||
<button v-if="cameraOn" class="text-zinc-400 hover:text-zinc-200" @click="stopCamera">Pause</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Live counter — what the door volunteer glances at between scans. -->
|
||||
<div class="mx-4 mt-2 rounded-lg border border-brand-700/40 bg-brand-500/[0.06] p-4">
|
||||
<div class="flex items-baseline justify-between">
|
||||
<div>
|
||||
<p class="text-[10px] font-medium uppercase tracking-widest text-brand-400">Arrived</p>
|
||||
<p class="mt-1 text-3xl font-semibold tabular-nums text-brand-200">
|
||||
{{ summary.arrived_headcount }}
|
||||
<span class="text-sm font-normal text-zinc-400">of {{ summary.expected_headcount }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-2xl font-semibold text-brand-200 tabular-nums">{{ arrivalPct }}%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-zinc-900">
|
||||
<div class="h-full rounded-full bg-brand-500 transition-all" :style="{ width: arrivalPct + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Camera viewport — fills the rest of the screen. -->
|
||||
<div class="relative mt-3 flex-1 overflow-hidden bg-black">
|
||||
<video v-show="cameraOn" ref="videoRef" playsinline class="h-full w-full object-cover"></video>
|
||||
<canvas ref="canvasRef" class="hidden"></canvas>
|
||||
|
||||
<div v-if="!cameraOn" class="flex h-full flex-col items-center justify-center px-6 text-center">
|
||||
<div class="mb-3 text-5xl">📷</div>
|
||||
<p class="text-sm text-zinc-300">Tap "Start scanning" to use the camera.</p>
|
||||
<button
|
||||
class="mt-4 rounded-md bg-brand-500 px-4 py-2 text-sm font-semibold text-zinc-950 hover:bg-brand-400"
|
||||
@click="startCamera"
|
||||
>Start scanning</button>
|
||||
<p v-if="startError" class="mt-3 text-xs text-red-400">{{ startError }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Aiming reticule, while scanning. -->
|
||||
<div v-if="cameraOn && !scanningPaused" class="pointer-events-none absolute inset-0 flex items-center justify-center">
|
||||
<div class="h-56 w-56 rounded-lg border-2 border-brand-500/80 shadow-[0_0_0_9999px_rgba(0,0,0,0.55)]"></div>
|
||||
</div>
|
||||
|
||||
<!-- Confirm party size after a scan. Overlays the camera so the
|
||||
camera keeps running (and the next reticule reappears the
|
||||
moment we close the panel). -->
|
||||
<div
|
||||
v-if="confirm"
|
||||
class="absolute inset-0 flex items-end justify-center bg-black/85 px-4 pb-6 pt-10"
|
||||
@click.self="cancelConfirm"
|
||||
>
|
||||
<div class="w-full max-w-md rounded-2xl border border-zinc-800 bg-zinc-900 p-5 shadow-2xl">
|
||||
<p class="text-[10px] font-medium uppercase tracking-widest text-brand-400">Guest matched</p>
|
||||
<h2 class="mt-1 text-xl font-semibold">{{ confirm.guestName }}</h2>
|
||||
<p
|
||||
v-if="confirm.alreadyIn"
|
||||
class="mt-2 rounded-md border border-amber-700/50 bg-amber-900/30 px-3 py-2 text-xs text-amber-100"
|
||||
>Already checked in earlier. Tapping a count below will re-record the latest party size.</p>
|
||||
<p v-else class="mt-2 text-sm text-zinc-400">How many in their party walked in?</p>
|
||||
|
||||
<div class="mt-4 grid grid-cols-1 gap-2">
|
||||
<button
|
||||
v-for="b in partyButtons"
|
||||
:key="b.count"
|
||||
:disabled="confirm.submitting"
|
||||
class="rounded-lg border px-4 py-3 text-left text-sm font-medium transition disabled:opacity-50"
|
||||
:class="b.recommended
|
||||
? 'border-brand-500 bg-brand-500/10 text-brand-100 hover:bg-brand-500/20'
|
||||
: 'border-zinc-700 bg-zinc-950 text-zinc-100 hover:border-zinc-500'"
|
||||
@click="commitCheckIn(b.count)"
|
||||
>
|
||||
<span class="float-right tabular-nums text-zinc-400">{{ b.count }}</span>
|
||||
{{ b.label }}
|
||||
<span v-if="b.recommended" class="ml-1 text-[10px] uppercase tracking-wider text-brand-400">recommended</span>
|
||||
</button>
|
||||
|
||||
<!-- Other (custom). -->
|
||||
<div class="mt-1 flex items-center gap-2">
|
||||
<input
|
||||
v-model.number="confirm.customCount"
|
||||
type="number"
|
||||
min="1"
|
||||
max="20"
|
||||
class="input w-20"
|
||||
:disabled="confirm.submitting"
|
||||
/>
|
||||
<button
|
||||
class="flex-1 rounded-lg border border-zinc-700 px-3 py-2 text-sm text-zinc-100 hover:border-zinc-500 disabled:opacity-50"
|
||||
:disabled="confirm.submitting || !confirm.customCount || confirm.customCount < 1"
|
||||
@click="commitCheckIn(confirm.customCount)"
|
||||
>Other — record {{ confirm.customCount || 0 }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="mt-4 w-full text-center text-xs text-zinc-400 hover:text-zinc-200"
|
||||
:disabled="confirm.submitting"
|
||||
@click="cancelConfirm"
|
||||
>Cancel — wrong guest</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent + walk-in. -->
|
||||
<div class="mx-4 mt-3 mb-4 space-y-3">
|
||||
<button
|
||||
class="w-full rounded-md border border-zinc-700 px-4 py-2 text-sm hover:border-zinc-500 hover:bg-zinc-900"
|
||||
@click="walkInOpen = true"
|
||||
>+ Add walk-in</button>
|
||||
|
||||
<div v-if="recent.length">
|
||||
<p class="mb-2 text-[10px] font-medium uppercase tracking-wider text-zinc-500">Just arrived</p>
|
||||
<ul class="space-y-1.5">
|
||||
<li
|
||||
v-for="c in recent"
|
||||
:key="c.id"
|
||||
class="flex items-center justify-between rounded-md border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm"
|
||||
>
|
||||
<span>
|
||||
Guest
|
||||
<span v-if="c.walk_in" class="ml-1 rounded-full bg-amber-900/30 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-amber-300">walk-in</span>
|
||||
</span>
|
||||
<span class="text-xs text-zinc-500">party of {{ c.arrival_count }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Walk-in sheet. -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="walkInOpen"
|
||||
class="fixed inset-0 z-40 flex items-end justify-center bg-black/60 backdrop-blur-sm"
|
||||
@click.self="walkInOpen = false"
|
||||
>
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
class="w-full max-w-md rounded-t-2xl border-t border-zinc-800 bg-zinc-900 p-5 shadow-2xl"
|
||||
>
|
||||
<h3 class="mb-1 text-base font-semibold">Walk-in</h3>
|
||||
<p class="mb-4 text-xs text-zinc-500">Adds them to the guest list and marks them in.</p>
|
||||
<form class="space-y-3" @submit.prevent="submitWalkIn">
|
||||
<div>
|
||||
<label class="label">Name</label>
|
||||
<input v-model="walkInForm.name" class="input" required autofocus />
|
||||
</div>
|
||||
<div>
|
||||
<label class="label">Party size</label>
|
||||
<input v-model.number="walkInForm.arrival_count" type="number" min="1" max="20" class="input" />
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-2 pt-2">
|
||||
<button type="button" class="text-sm text-zinc-400 hover:text-zinc-200"
|
||||
:disabled="walkInSubmitting" @click="walkInOpen = false">Cancel</button>
|
||||
<button type="submit" class="btn-primary text-sm"
|
||||
:disabled="walkInSubmitting || !walkInForm.name.trim()">
|
||||
{{ walkInSubmitting ? 'Adding…' : 'Add walk-in' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<!-- Toast. -->
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
enter-active-class="transition duration-200 ease-out"
|
||||
enter-from-class="translate-y-2 opacity-0"
|
||||
enter-to-class="translate-y-0 opacity-100"
|
||||
leave-active-class="transition duration-200 ease-in"
|
||||
leave-from-class="translate-y-0 opacity-100"
|
||||
leave-to-class="translate-y-2 opacity-0"
|
||||
>
|
||||
<div
|
||||
v-if="toast"
|
||||
class="pointer-events-none fixed left-1/2 bottom-24 z-[60] -translate-x-1/2 rounded-full px-5 py-2 text-sm shadow-lg"
|
||||
:class="toast.kind === 'success' ? 'bg-brand-500 text-zinc-950'
|
||||
: toast.kind === 'warn' ? 'bg-amber-500 text-zinc-950'
|
||||
: 'bg-red-500 text-white'"
|
||||
>{{ toast.text }}</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
|
||||
<p v-if="fatalError" class="fixed bottom-2 left-2 right-2 rounded-md border border-red-700 bg-red-950/80 px-3 py-2 text-center text-xs text-red-200">{{ fatalError }}</p>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user