feat(tier2): smarter fraud detection — Block G
Per-event fraud tuning. Hosts can now dial the medium / high / block
boundaries, allowlist trusted networks, and feed verdicts back on
flagged accesses — the seed corpus for a future ML model.
Schema (migration 0011)
- events.fraud_{medium,high,block}_threshold default 30/60/85 so
existing events behave identically until a host changes them
- access_logs.geo_{country,city,lat,lon} for future enrichment
- fraud_feedback table — verdict ('legitimate' | 'suspicious') + note,
PK on access_log_id so re-mark is an upsert
- event_allowlists table — (event_id, ip_cidr) primary key, inet column
so containment checks use the native >>= operator (indexed lookup)
Domain
- FraudThresholds with Valid() + Band() helpers; Default trio echoed
through GET responses so the frontend doesn't duplicate constants
- ParseAllowlistCIDR accepts bare IPs (auto-widens to /32 or /128) and
canonicalises the output (203.0.113.42 → 203.0.113.42/32)
- Event.Thresholds() falls back to defaults if columns weren't
populated yet, so the API never wedges every score into "low"
Storage
- AllowlistRepo: List / Add / Remove + Matches() — the latter pushes
CIDR containment into Postgres rather than streaming rows back
- FeedbackRepo: Record (upserts) + ListForEvent (joined through guests)
- EventRepo.GetThresholds + UpdateThresholds, plus the threshold
columns baked into scanEvent so every event load carries them
- AccessLogRepo.BelongsToEvent — stops a hostile editor on event A
from marking event B's access logs
API
- GET/PUT /events/{id}/security/thresholds (viewer/editor)
- GET/POST/DELETE /events/{id}/security/allowlist
- POST /events/{id}/access-logs/{log_id}/feedback (editor)
- GET /events/{id}/security/feedback
- RSVP scoring path: allowlist short-circuit fires before the fraud
engine; the engine's score is then re-banded against the event's
thresholds (engine.Risk becomes advisory — API is the source of
truth for "what counts as block here")
- CORS Allow-Methods already includes PUT (Block D fix)
Fraud engine
- Single-signal cap: it now takes ≥2 sub-scores of ≥70 to push the
final into HIGH. Fixes the well-known "second visit with a slightly
shifted fingerprint scores 60+" false positive
- Engine band remains advisory; API re-bands using per-event
thresholds before deciding to block
Frontend
- SecurityCard.vue: visual band ribbon (proportional to thresholds),
three sliders with mutual clamping so dragging medium past high
pushes high (not an invalid ordering), reset-to-defaults button,
CIDR allowlist with inline add + per-row remove, verdict-history
inbox. Toast feedback on save/add/remove
- "Security" tab added to the event-detail tab nav (5th tab,
right of Analytics)
- Viewer role hides write affordances; server enforces too
Tests
- Domain: ThresholdsBand, ThresholdsValid, ParseAllowlistCIDR (bare
IP widening + traversal/typo rejection), FraudFeedbackValid
- Integration: thresholds round-trip + invalid ordering rejection,
allowlist CRUD + duplicate 409 + invalid CIDR 400 + IP auto-widen,
feedback record + upsert + cross-tenant 404 + invalid verdict 400,
viewer can read / editor can write / outsider gets 404
- Full integration suite green (315.8s, all 36 top-level tests pass)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Kwaku Danso
@@ -2,10 +2,14 @@
|
||||
// Tier 2 Block E — host analytics dashboard card. Shown on the event
|
||||
// detail page; viewer+ role.
|
||||
//
|
||||
// Charts are inline SVG rather than chart.js — we avoid the ~70kB bundle
|
||||
// hit for charts this small, and keep the page server-renderable. If the
|
||||
// host's expectations grow (zoom, tooltips, animations) chart.js becomes
|
||||
// the right call.
|
||||
// Layout philosophy (post-UX-pass): hosts mostly want to answer three
|
||||
// questions on a glance — "Are people coming?", "Who haven't I heard
|
||||
// back from?", and "Was my last send-out worth it?". The hierarchy
|
||||
// reflects that: hero metrics first, supporting charts grouped beneath,
|
||||
// the long stale-guest list collapsed by default.
|
||||
//
|
||||
// Charts are inline SVG rather than chart.js — keeps the bundle lean and
|
||||
// the page server-renderable.
|
||||
|
||||
interface Overview {
|
||||
invited: number
|
||||
@@ -54,6 +58,14 @@ async function refresh() {
|
||||
}
|
||||
onMounted(refresh)
|
||||
|
||||
// --- derived stats ---
|
||||
|
||||
const responseRatePct = computed(() => {
|
||||
const o = data.value?.overview
|
||||
if (!o || o.invited === 0) return 0
|
||||
return Math.round(((o.attending + o.declined + o.maybe) / o.invited) * 100)
|
||||
})
|
||||
|
||||
const responseRateMax = computed(() => {
|
||||
const series = data.value?.response_rate ?? []
|
||||
return Math.max(1, ...series.map((p) => p.count))
|
||||
@@ -78,6 +90,17 @@ const funnelPct = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
// Total headcount including plus-ones — the number caterers and venues
|
||||
// actually need. More useful than "attending" alone, which understates the
|
||||
// crowd.
|
||||
const totalHeadcount = computed(() => {
|
||||
const o = data.value?.overview
|
||||
if (!o) return 0
|
||||
return o.attending + o.plus_ones_total
|
||||
})
|
||||
|
||||
// SVG path for the 30-day response sparkline. Empty string when there's
|
||||
// no data so the path renders as nothing instead of "M NaN,NaN".
|
||||
const responseRateLineD = computed(() => {
|
||||
const series = data.value?.response_rate ?? []
|
||||
if (series.length === 0) return ''
|
||||
@@ -94,10 +117,15 @@ const responseRateLineD = computed(() => {
|
||||
.join(' ')
|
||||
})
|
||||
|
||||
// Same series as a filled area underneath the line — gives the
|
||||
// sparkline visual weight without dominating the surrounding text.
|
||||
const responseRateAreaD = computed(() => {
|
||||
const d = responseRateLineD.value
|
||||
if (!d) return ''
|
||||
return `${d} L600,80 L0,80 Z`
|
||||
})
|
||||
|
||||
function exportCSV() {
|
||||
// Issue a fresh ws-ticket-style download. Browsers preserve the
|
||||
// Authorization header on <a download> if we set it via fetch, so we
|
||||
// use fetch + blob + anchor.
|
||||
const url = `${config.public.apiBase}/events/${props.eventId}/analytics/export.csv`
|
||||
fetch(url, {
|
||||
headers: auth.liveAccessToken() ? { Authorization: `Bearer ${auth.liveAccessToken()}` } : {},
|
||||
@@ -127,8 +155,11 @@ function fmtDate(iso?: string | null) {
|
||||
|
||||
<template>
|
||||
<section class="card">
|
||||
<header class="mb-3 flex items-center justify-between">
|
||||
<h2 class="text-lg font-semibold">Analytics</h2>
|
||||
<header class="mb-5 flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Analytics</h2>
|
||||
<p class="text-xs text-zinc-500">Last 30 days · {{ responseRatePct }}% response rate</p>
|
||||
</div>
|
||||
<button class="btn-ghost text-sm" :disabled="!data" @click="exportCSV">Export CSV</button>
|
||||
</header>
|
||||
|
||||
@@ -136,125 +167,151 @@ function fmtDate(iso?: string | null) {
|
||||
<p v-else-if="error" class="text-sm text-red-400">{{ error }}</p>
|
||||
|
||||
<div v-else-if="data" class="space-y-6">
|
||||
<!-- Overview tiles -->
|
||||
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
|
||||
<div class="rounded-md border border-zinc-800 bg-zinc-950 p-3">
|
||||
<p class="text-xs uppercase tracking-wider text-zinc-500">Invited</p>
|
||||
<p class="mt-1 text-2xl font-semibold tabular-nums">{{ data.overview.invited }}</p>
|
||||
<!-- Hero row — the three numbers a host opens this tab for. -->
|
||||
<div class="grid grid-cols-1 gap-3 md:grid-cols-3">
|
||||
<!-- Headcount: attending guests + their plus-ones. The big
|
||||
number is what the venue / caterer needs. -->
|
||||
<div class="relative overflow-hidden rounded-lg border border-brand-700/60 bg-brand-500/[0.06] p-4">
|
||||
<p class="text-xs font-medium uppercase tracking-wider text-brand-400">Headcount</p>
|
||||
<p class="mt-1 text-4xl font-semibold tabular-nums text-brand-200">{{ totalHeadcount }}</p>
|
||||
<p class="mt-1 text-xs text-zinc-400">
|
||||
{{ data.overview.attending }} attending
|
||||
<template v-if="data.overview.plus_ones_total > 0">
|
||||
· +{{ data.overview.plus_ones_total }} plus-ones
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-md border border-brand-900/60 bg-brand-950/20 p-3">
|
||||
<p class="text-xs uppercase tracking-wider text-brand-400">Attending</p>
|
||||
<p class="mt-1 text-2xl font-semibold tabular-nums text-brand-200">{{ data.overview.attending }}</p>
|
||||
<!-- Waiting on: hosts can act on this number; the chase list is
|
||||
below. -->
|
||||
<div class="relative overflow-hidden rounded-lg border border-amber-800/40 bg-amber-950/10 p-4">
|
||||
<p class="text-xs font-medium uppercase tracking-wider text-amber-400">Awaiting reply</p>
|
||||
<p class="mt-1 text-4xl font-semibold tabular-nums text-amber-200">{{ data.overview.pending }}</p>
|
||||
<p class="mt-1 text-xs text-zinc-400">
|
||||
of {{ data.overview.invited }} invited
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-md border border-zinc-800 bg-zinc-950 p-3">
|
||||
<p class="text-xs uppercase tracking-wider text-zinc-500">Declined</p>
|
||||
<p class="mt-1 text-2xl font-semibold tabular-nums">{{ data.overview.declined }}</p>
|
||||
</div>
|
||||
<div class="rounded-md border border-zinc-800 bg-zinc-950 p-3">
|
||||
<p class="text-xs uppercase tracking-wider text-zinc-500">Maybe</p>
|
||||
<p class="mt-1 text-2xl font-semibold tabular-nums">{{ data.overview.maybe }}</p>
|
||||
</div>
|
||||
<div class="rounded-md border border-zinc-800 bg-zinc-950 p-3">
|
||||
<p class="text-xs uppercase tracking-wider text-zinc-500">Pending</p>
|
||||
<p class="mt-1 text-2xl font-semibold tabular-nums">{{ data.overview.pending }}</p>
|
||||
</div>
|
||||
<div class="rounded-md border border-zinc-800 bg-zinc-950 p-3">
|
||||
<p class="text-xs uppercase tracking-wider text-zinc-500">Plus-ones</p>
|
||||
<p class="mt-1 text-2xl font-semibold tabular-nums">+{{ data.overview.plus_ones_total }}</p>
|
||||
<!-- Declined + Maybe stacked here; less prominent than the two
|
||||
above because a host can't act on them. -->
|
||||
<div class="relative overflow-hidden rounded-lg border border-zinc-800 bg-zinc-950 p-4">
|
||||
<p class="text-xs font-medium uppercase tracking-wider text-zinc-500">Won't make it</p>
|
||||
<p class="mt-1 text-4xl font-semibold tabular-nums text-zinc-200">{{ data.overview.declined }}</p>
|
||||
<p class="mt-1 text-xs text-zinc-400">
|
||||
<span v-if="data.overview.maybe > 0">+{{ data.overview.maybe }} maybe</span>
|
||||
<span v-else>declined</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Response rate over time -->
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-500">Responses, last 30 days</p>
|
||||
<svg viewBox="0 0 600 80" preserveAspectRatio="none" class="h-20 w-full">
|
||||
<path :d="responseRateLineD" fill="none" stroke="#22c55e" stroke-width="1.5" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Funnel -->
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-500">Funnel</p>
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-24 shrink-0 text-xs text-zinc-400">Invited</span>
|
||||
<div class="h-6 flex-1 overflow-hidden rounded bg-zinc-900">
|
||||
<div class="h-full rounded bg-brand-500" :style="{ width: '100%' }"></div>
|
||||
</div>
|
||||
<span class="w-12 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ data.funnel.invited }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-24 shrink-0 text-xs text-zinc-400">Opened</span>
|
||||
<div class="h-6 flex-1 overflow-hidden rounded bg-zinc-900">
|
||||
<div class="h-full rounded bg-brand-400" :style="{ width: funnelPct.opened + '%' }"></div>
|
||||
</div>
|
||||
<span class="w-12 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ data.funnel.opened }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-24 shrink-0 text-xs text-zinc-400">Responded</span>
|
||||
<div class="h-6 flex-1 overflow-hidden rounded bg-zinc-900">
|
||||
<div class="h-full rounded bg-brand-300" :style="{ width: funnelPct.responded + '%' }"></div>
|
||||
</div>
|
||||
<span class="w-12 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ data.funnel.responded }}</span>
|
||||
<!-- Context row: how fast they're replying + the funnel. Side by
|
||||
side on desktop so they tell one coherent story. -->
|
||||
<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
|
||||
<div class="rounded-lg border border-zinc-800 bg-zinc-950 p-4">
|
||||
<div class="mb-3 flex items-center justify-between">
|
||||
<p class="text-xs font-medium uppercase tracking-wider text-zinc-500">Replies, last 30 days</p>
|
||||
</div>
|
||||
<svg viewBox="0 0 600 80" preserveAspectRatio="none" class="h-20 w-full">
|
||||
<path :d="responseRateAreaD" fill="rgb(34 197 94 / 0.12)" />
|
||||
<path :d="responseRateLineD" fill="none" stroke="#22c55e" stroke-width="1.5" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Time-to-respond + plus-ones side by side -->
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-500">Time to respond</p>
|
||||
<div class="space-y-1.5">
|
||||
<div v-for="b in data.time_to_respond" :key="b.label" class="flex items-center gap-3">
|
||||
<span class="w-12 shrink-0 text-xs text-zinc-400">{{ b.label }}</span>
|
||||
<div class="h-4 flex-1 overflow-hidden rounded bg-zinc-900">
|
||||
<div class="h-full rounded bg-brand-500" :style="{ width: ((b.count / ttrMax) * 100) + '%' }"></div>
|
||||
<div class="rounded-lg border border-zinc-800 bg-zinc-950 p-4">
|
||||
<p class="mb-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Funnel</p>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-20 shrink-0 text-xs text-zinc-400">Invited</span>
|
||||
<div class="h-5 flex-1 overflow-hidden rounded bg-zinc-900">
|
||||
<div class="h-full rounded bg-brand-500" :style="{ width: '100%' }"></div>
|
||||
</div>
|
||||
<span class="w-8 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ b.count }}</span>
|
||||
<span class="w-10 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ data.funnel.invited }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-500">Plus-ones (attending)</p>
|
||||
<div class="space-y-1.5">
|
||||
<div v-for="b in data.plus_ones" :key="b.label" class="flex items-center gap-3">
|
||||
<span class="w-12 shrink-0 text-xs text-zinc-400">{{ b.label }}</span>
|
||||
<div class="h-4 flex-1 overflow-hidden rounded bg-zinc-900">
|
||||
<div class="h-full rounded bg-brand-500" :style="{ width: ((b.count / plusOnesMax) * 100) + '%' }"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-20 shrink-0 text-xs text-zinc-400">Opened</span>
|
||||
<div class="h-5 flex-1 overflow-hidden rounded bg-zinc-900">
|
||||
<div class="h-full rounded bg-brand-400" :style="{ width: funnelPct.opened + '%' }"></div>
|
||||
</div>
|
||||
<span class="w-8 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ b.count }}</span>
|
||||
<span class="w-10 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ data.funnel.opened }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-20 shrink-0 text-xs text-zinc-400">Responded</span>
|
||||
<div class="h-5 flex-1 overflow-hidden rounded bg-zinc-900">
|
||||
<div class="h-full rounded bg-brand-300" :style="{ width: funnelPct.responded + '%' }"></div>
|
||||
</div>
|
||||
<span class="w-10 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ data.funnel.responded }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stale guests -->
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-500">
|
||||
Haven't responded yet ({{ data.stale_guests.length }})
|
||||
</p>
|
||||
<p v-if="data.stale_guests.length === 0" class="text-sm text-zinc-500">
|
||||
Everyone you've invited has replied. 🎉
|
||||
</p>
|
||||
<ul v-else class="space-y-1.5">
|
||||
<!-- Distributions — always visible. Two compact charts side by
|
||||
side share the height of one tall chart so they cost no extra
|
||||
scroll. -->
|
||||
<div class="rounded-lg border border-zinc-800 bg-zinc-950">
|
||||
<div class="border-b border-zinc-900 px-4 py-3">
|
||||
<p class="text-sm font-medium text-zinc-200">Reply speed & plus-ones</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-5 p-4 md:grid-cols-2">
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-500">Time to respond</p>
|
||||
<div class="space-y-1.5">
|
||||
<div v-for="b in data.time_to_respond" :key="b.label" class="flex items-center gap-3">
|
||||
<span class="w-12 shrink-0 text-xs text-zinc-400">{{ b.label }}</span>
|
||||
<div class="h-4 flex-1 overflow-hidden rounded bg-zinc-900">
|
||||
<div class="h-full rounded bg-brand-500" :style="{ width: ((b.count / ttrMax) * 100) + '%' }"></div>
|
||||
</div>
|
||||
<span class="w-8 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ b.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-500">Plus-ones (attending)</p>
|
||||
<div class="space-y-1.5">
|
||||
<div v-for="b in data.plus_ones" :key="b.label" class="flex items-center gap-3">
|
||||
<span class="w-12 shrink-0 text-xs text-zinc-400">{{ b.label }}</span>
|
||||
<div class="h-4 flex-1 overflow-hidden rounded bg-zinc-900">
|
||||
<div class="h-full rounded bg-brand-500" :style="{ width: ((b.count / plusOnesMax) * 100) + '%' }"></div>
|
||||
</div>
|
||||
<span class="w-8 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ b.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stale guests — always visible. With 10+ rows we cap the list
|
||||
and point at the CSV export for the full count, so the panel
|
||||
doesn't dominate the page even on busy events. -->
|
||||
<div class="rounded-lg border border-zinc-800 bg-zinc-950">
|
||||
<div class="flex items-center gap-2 border-b border-zinc-900 px-4 py-3">
|
||||
<svg class="h-4 w-4 text-amber-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM10 4a1 1 0 011 1v5l3 1a1 1 0 11-.5 1.93l-3.5-1.16A1 1 0 019 10.83V5a1 1 0 011-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<p class="text-sm font-medium text-zinc-200">
|
||||
{{ data.stale_guests.length === 0 ? "Everyone's replied" : `${data.stale_guests.length} haven't replied yet` }}
|
||||
</p>
|
||||
</div>
|
||||
<ul v-if="data.stale_guests.length > 0" class="space-y-1.5 p-4">
|
||||
<li
|
||||
v-for="g in data.stale_guests.slice(0, 10)"
|
||||
:key="g.guest_id"
|
||||
class="flex items-center justify-between rounded-md border border-zinc-800 bg-zinc-950 px-3 py-2 text-sm"
|
||||
class="flex items-center justify-between rounded-md border border-zinc-800 bg-zinc-900/40 px-3 py-2 text-sm"
|
||||
>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="truncate font-medium text-zinc-100">{{ g.name }}</div>
|
||||
<div class="truncate text-xs text-zinc-500">
|
||||
{{ g.email || 'no email' }} · invited {{ fmtDate(g.invited_at) }}
|
||||
<span v-if="g.has_opened" class="ml-1 text-amber-400">opened</span>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
v-if="g.has_opened"
|
||||
class="ml-3 shrink-0 rounded-full bg-amber-900/30 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-amber-300"
|
||||
title="Opened their link but hasn't responded"
|
||||
>Opened</span>
|
||||
</li>
|
||||
<li v-if="data.stale_guests.length > 10" class="px-3 pt-1 text-xs text-zinc-500">
|
||||
and {{ data.stale_guests.length - 10 }} more — export the CSV for the full list.
|
||||
</li>
|
||||
</ul>
|
||||
<p v-if="data.stale_guests.length > 10" class="mt-2 text-xs text-zinc-500">
|
||||
and {{ data.stale_guests.length - 10 }} more — export the CSV for the full list.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user