/* Slate — Alerts (Phase 2)
===================================================
Single-screen UI with three tabs:
Rules — list + CRUD on /api/analytics/alerts (rules engine)
Feed — recent fires from /api/analytics/alert-events with ack
Anomalies — read-only z-score outliers from /api/analytics/anomalies
with a "create alert from this" quick-action
Capability matrix (matches src/capabilities.js + Auth helpers):
- analytics.view_alerts → can see this screen at all
- analytics.manage_alerts → can create/edit/delete/pause rules,
and acknowledge fires
The route lives at /cms/#alerts. Sidebar gating in sidebar.jsx adds
the entry to NAV_INSIGHTS for roles that have view_alerts. */
(function () {
/* Backend metric ids → human label + suggested comparator/threshold.
The list mirrors what the metrics rollup endpoint returns plus the
two infra metrics (screens_online, active_alerts) that are useful
to alert on. Adding a new metric here only adds it to the picker;
the backend stores any string. */
const ALERT_METRICS = [
{ id: 'impressions', label: 'Impressions (window total)', unit: '', suggest: { comparator: 'lt', threshold: 100 } },
{ id: 'scans', label: 'QR scans', unit: '', suggest: { comparator: 'lt', threshold: 5 } },
{ id: 'scan_rate', label: 'Scan rate', unit: '%', suggest: { comparator: 'lt', threshold: 1.5 } },
{ id: 'cta_clicks', label: 'CTA clicks', unit: '', suggest: { comparator: 'lt', threshold: 10 } },
{ id: 'screens_online', label: 'Screens online', unit: '', suggest: { comparator: 'lt', threshold: 1 } },
{ id: 'screens_offline', label: 'Screens offline', unit: '', suggest: { comparator: 'gt', threshold: 0 } },
{ id: 'revenue_cents', label: 'Attributed revenue (£, in pence)', unit: '£', suggest: { comparator: 'lt', threshold: 0 } },
{ id: 'anomaly_zscore', label: 'Activity anomaly (|z| score)', unit: 'σ', suggest: { comparator: 'gt', threshold: 2.5 } },
];
/* Channel ids + a one-line UX description. Backend stores `channel`
as a string, so anything goes — these are the curated options the
UI exposes. The actual delivery integration is wired separately
(out of scope for this UI; rules are authored here). */
const ALERT_CHANNELS = [
{ id: 'inapp', label: 'In-app', hint: 'Bell icon + Live event log', requiresTarget: false },
{ id: 'email', label: 'Email', hint: 'Comma-separated addresses', requiresTarget: true, placeholder: 'ops@aquarium.com, marketing@…' },
{ id: 'slack', label: 'Slack', hint: 'Channel name or webhook URL', requiresTarget: true, placeholder: '#alerts or https://hooks.slack.com/…' },
{ id: 'teams', label: 'MS Teams', hint: 'Webhook URL from your Teams channel', requiresTarget: true, placeholder: 'https://outlook.office.com/webhook/…' },
{ id: 'webhook', label: 'Webhook', hint: 'POST JSON to your endpoint', requiresTarget: true, placeholder: 'https://example.com/aquaos-alert' },
{ id: 'sms', label: 'SMS', hint: 'Phone numbers (E.164, comma separated)', requiresTarget: true, placeholder: '+447700900123, +447700900456' },
{ id: 'pagerduty', label: 'PagerDuty', hint: 'Events API v2 routing key (NOT API token)', requiresTarget: true, placeholder: '32-char integration key' },
{ id: 'opsgenie', label: 'Opsgenie', hint: 'API integration key (set OPSGENIE_REGION=eu for EU accounts)', requiresTarget: true, placeholder: 'GenieKey value' },
];
/* Comparator picker — display in plain English. */
const COMPARATORS = [
{ id: 'lt', label: 'is less than', glyph: '<' },
{ id: 'gt', label: 'is greater than', glyph: '>' },
{ id: 'eq', label: 'is exactly', glyph: '=' },
];
/* ─── Helpers ─────────────────────────────────────────────────── */
const _fmtN = typeof fmtN === 'function' ? fmtN : (n) => String(Math.round(Number(n) || 0));
function metricMeta(id) {
return ALERT_METRICS.find((m) => m.id === id) || { id, label: id, unit: '', suggest: {} };
}
function channelMeta(id) {
return ALERT_CHANNELS.find((c) => c.id === id) || { id, label: id, hint: '' };
}
function fmtRelative(iso) {
if (!iso) return 'never';
const t = new Date(iso).getTime();
if (!t) return iso;
const s = Math.floor((Date.now() - t) / 1000);
if (s < 60) return s + 's ago';
if (s < 3600) return Math.floor(s / 60) + 'm ago';
if (s < 86400) return Math.floor(s / 3600) + 'h ago';
return Math.floor(s / 86400) + 'd ago';
}
/* ─── Tab strip ───────────────────────────────────────────────── */
function TabStrip({ tabs, active, onSelect, badges }) {
return (
);
}
/* ─── Rules tab ───────────────────────────────────────────────── */
function RulesTab({ canManage }) {
const [rules, setRules] = useState([]);
const [loading, setLoading] = useState(true);
const [editing, setEditing] = useState(null); // alert object or 'new'
const [err, setErr] = useState(null);
const [expandedId, setExpandedId] = useState(null); // rule id with dispatch history open
const [dispatches, setDispatches] = useState({}); // { ruleId: [rows] }
function reload() {
setLoading(true);
apiFetch('/api/analytics/alerts')
.then((r) => { setRules((r && r.alerts) || []); setLoading(false); })
.catch((e) => { setErr(e.message); setLoading(false); });
}
useEffect(() => { reload(); }, []);
function toggleStatus(rule) {
const next = rule.status === 'active' ? 'paused' : 'active';
apiFetch('/api/analytics/alerts/' + encodeURIComponent(rule.id), {
method: 'PATCH',
body: JSON.stringify({ status: next }),
}).then(reload).catch((e) => window.toast && window.toast(e.message, 'error'));
}
function deleteRule(rule) {
if (!window.confirm(`Delete alert "${rule.name}"? Past fires are kept.`)) return;
apiFetch('/api/analytics/alerts/' + encodeURIComponent(rule.id), { method: 'DELETE' })
.then(reload).catch((e) => window.toast && window.toast(e.message, 'error'));
}
/* Manual test-fire — authors can verify their channel + destination
work before relying on the rule. Dispatches the alert via the
backend exactly as a real fire would, but flags context.source =
'test' so the Recent fires tab can distinguish them. */
function toggleHistory(rule) {
if (expandedId === rule.id) { setExpandedId(null); return; }
setExpandedId(rule.id);
if (!dispatches[rule.id]) {
apiFetch('/api/analytics/alerts/' + encodeURIComponent(rule.id) + '/dispatches?limit=10')
.then((r) => setDispatches((prev) => ({ ...prev, [rule.id]: (r && r.dispatches) || [] })))
.catch((e) => window.toast && window.toast(e.message, 'error'));
}
}
function cloneRule(rule) {
apiFetch('/api/analytics/alerts/' + encodeURIComponent(rule.id) + '/clone', { method: 'POST' })
.then(() => { window.toast && window.toast(`Cloned "${rule.name}" — opens paused`); reload(); })
.catch((e) => window.toast && window.toast('Clone failed: ' + e.message, 'error'));
}
function testRule(rule) {
apiFetch('/api/analytics/alerts/' + encodeURIComponent(rule.id) + '/test', { method: 'POST' })
.then((r) => {
const msg = r.ok
? `Sent test → ${rule.channel}${r.info ? ' (' + r.info + ')' : ''}`
: `Test failed: ${r.error || 'unknown error'}`;
window.toast && window.toast(msg, r.ok ? 'success' : 'error');
reload();
})
.catch((e) => window.toast && window.toast('Test failed: ' + e.message, 'error'));
}
return (
{loading ? 'Loading…' : `${rules.length} alert ${rules.length === 1 ? 'rule' : 'rules'}`}
{canManage && (
setEditing('new')}>+ New alert
)}
Name
Condition
Window
Channel
Last fired
{canManage &&
{!loading && rules.length === 0 && (
No alert rules yet. {canManage ? setEditing('new')} style={{ cursor: 'pointer', color: 'var(--aqos-accent, oklch(0.66 0.16 270))' }}>Create your first one → : null}
toggleHistory(r)} style={{ cursor: 'pointer' }} title="Show dispatch history">
{expanded ? '▾' : '▸'}
{r.name}
{m.label} {c.label} {r.threshold ?? '—'}{m.unit}
{r.window_minutes}m
{ch.label}
{r.channel_target && · {r.channel_target} }
{fmtRelative(r.last_fired_at)}
{canManage && (
cloneRule(r)} style={{ marginRight: 8, fontSize: 11, color: 'var(--aqos-text-dim)', cursor: 'pointer' }} title="Clone this rule (paused)">Clone
testRule(r)} style={{ marginRight: 8, fontSize: 11, color: 'var(--aqos-text-dim)', cursor: 'pointer' }} title={`Send a test fire via ${r.channel}`}>Test
toggleStatus(r)} style={{ marginRight: 8, fontSize: 11, color: 'var(--aqos-text-dim)', cursor: 'pointer' }}>
{isActive ? 'Pause' : 'Resume'}
setEditing(r)} style={{ marginRight: 8, fontSize: 11, cursor: 'pointer' }}>Edit
deleteRule(r)} style={{ fontSize: 11, color: 'var(--aqos-danger)', cursor: 'pointer' }}>Delete
)}
{expanded && );
})}
{editing && (
setEditing(null)}
onSaved={() => { setEditing(null); reload(); }}
/>
)}
{err && (
Couldn't load alerts: {err}
)}
);
}
/* Inline expansion under a rule row showing recent dispatch attempts. */
function DispatchHistoryRow({ ruleId, dispatches, canManage }) {
const colspan = canManage ? 7 : 6;
return (
Last 10 dispatch attempts
{!dispatches && Loading…
}
{dispatches && dispatches.length === 0 && (
No dispatches yet — when this rule fires (or you Test it), the result lands here.
)}
{dispatches && dispatches.length > 0 && (
{dispatches.map((d) => (
{new Date(d.attempted_at).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' })}
{d.channel}
{d.ok ? (d.info || 'ok') : (d.error || 'failed')}
))}
);
}
/* ─── Create / edit modal ─────────────────────────────────────── */
function AlertRuleModal({ initial, onCancel, onSaved }) {
/* Edit only when we have a real row id. The Anomalies/Suggestions tabs
open this modal with a PREFILLED-but-id-less `initial` to seed a NEW
rule; keying off `!!initial` (truthy for that seed object) made submit
PATCH /alerts/undefined instead of POSTing. Match the id-based check
ScheduledReportModal already uses. */
const isEdit = !!(initial && initial.id);
const [name, setName] = useState(initial?.name || '');
const [metric, setMetric] = useState(initial?.metric || ALERT_METRICS[0].id);
const [comparator, setComparator] = useState(initial?.comparator || ALERT_METRICS[0].suggest.comparator);
const [threshold, setThreshold] = useState(initial?.threshold ?? ALERT_METRICS[0].suggest.threshold);
const [windowMin, setWindowMin] = useState(initial?.window_minutes || 60);
const [channel, setChannel] = useState(initial?.channel || 'inapp');
const [target, setTarget] = useState(initial?.channel_target || '');
const [busy, setBusy] = useState(false);
const [err, setErr] = useState(null);
/* When the metric changes, suggest sensible default comparator + threshold
(only if user hasn't manually edited yet — i.e. when those fields still
hold the previous metric's defaults). */
function onMetricChange(id) {
setMetric(id);
const meta = metricMeta(id);
if (meta.suggest.comparator) setComparator(meta.suggest.comparator);
if (meta.suggest.threshold != null) setThreshold(meta.suggest.threshold);
}
function submit(e) {
if (e) e.preventDefault();
if (!name.trim()) { setErr('Name required'); return; }
const ch = channelMeta(channel);
if (ch.requiresTarget && !target.trim()) { setErr(ch.label + ' channel needs a destination'); return; }
setBusy(true); setErr(null);
const body = {
name: name.trim(),
metric, comparator,
threshold: threshold === '' ? null : Number(threshold),
window_minutes: Number(windowMin) || 60,
channel,
channel_target: ch.requiresTarget ? target.trim() : null,
};
const req = isEdit
? apiFetch('/api/analytics/alerts/' + encodeURIComponent(initial.id), { method: 'PATCH', body: JSON.stringify(body) })
: apiFetch('/api/analytics/alerts', { method: 'POST', body: JSON.stringify(body) });
req.then(() => { setBusy(false); onSaved(); })
.catch((e) => { setBusy(false); setErr(e.message); });
}
const ch = channelMeta(channel);
const m = metricMeta(metric);
return (
);
}
/* SmtpTestButton — pings /api/analytics/test-smtp with the address
in the modal so authors can verify their config end-to-end. Used
by both the alert rule modal (channel=email) and the scheduled-
report modal. */
function SmtpTestButton({ to }) {
const [busy, setBusy] = useState(false);
const [result, setResult] = useState(null);
function go() {
if (!to) return;
setBusy(true); setResult(null);
apiFetch('/api/analytics/test-smtp', {
method: 'POST',
body: JSON.stringify({ to }),
})
.then((r) => { setBusy(false); setResult({ ok: r.ok, msg: r.ok ? `Sent to ${to}` : (r.error || 'failed') }); })
.catch((e) => { setBusy(false); setResult({ ok: false, msg: e.message }); });
}
return (
);
}
/* Form-row helper to keep the modal markup tidy. */
function Field({ label, children }) {
return (
{label}
{children}
);
}
const inputStyle = {
width: '100%', padding: '8px 10px', fontSize: 13,
background: 'var(--aqos-surface-2)', color: 'var(--aqos-text)',
border: '1px solid var(--aqos-border)', borderRadius: 6,
boxSizing: 'border-box',
};
/* ─── Feed tab ────────────────────────────────────────────────── */
function FeedTab({ canManage }) {
const [events, setEvents] = useState([]);
const [loading, setLoading] = useState(true);
const [err, setErr] = useState(null);
function reload() {
setLoading(true);
apiFetch('/api/analytics/alert-events?limit=100')
.then((r) => { setEvents((r && r.events) || []); setLoading(false); })
.catch((e) => { setErr(e.message); setLoading(false); });
}
useEffect(() => { reload(); }, []);
function ack(ev) {
apiFetch('/api/analytics/alert-events/' + encodeURIComponent(ev.id) + '/ack', { method: 'POST' })
.then(reload)
.catch((e) => window.toast && window.toast(e.message, 'error'));
}
function ackAll() {
const unack = events.filter(e => !e.acknowledged_at).length;
if (unack === 0) { window.toast && window.toast('No open fires to acknowledge'); return; }
if (!window.confirm(`Acknowledge all ${unack} open fire${unack === 1 ? '' : 's'}?`)) return;
apiFetch('/api/analytics/alert-events/ack-all', { method: 'POST' })
.then((r) => { window.toast && window.toast(`Acknowledged ${r.acknowledged} fire${r.acknowledged === 1 ? '' : 's'}`); reload(); })
.catch((e) => window.toast && window.toast(e.message, 'error'));
}
return (
{loading ? 'Loading…' : `${events.length} fire${events.length === 1 ? '' : 's'}`}
{canManage && events.some(e => !e.acknowledged_at) && (
✓ Ack all
)}
↻ Refresh
When
Alert
Observed
Threshold
Status
{canManage &&
{!loading && events.length === 0 && (
No alerts have fired yet.
{fmtRelative(e.fired_at)}
{e.alert_name}
· {m.label}
{isTest && TEST }
{e.observed_value != null ? _fmtN(e.observed_value) + (m.unit || '') : '—'} {e.threshold != null ? _fmtN(e.threshold) + (m.unit || '') : '—'}
{acked ? (
Acknowledged {fmtRelative(e.acknowledged_at)}
) : (
Open
)}
{canManage && (
{!acked && ack(e)} style={{ fontSize: 11, cursor: 'pointer' }}>Ack }
)}
);
})}
{err && (
Couldn't load events: {err}
)}
);
}
/* ─── Suggestion card ─────────────────────────────────────────── */
function SuggestionCard({ s, canManage, onCreate, onDismiss }) {
const sev = s.severity || 'info';
const tone = sev === 'crit' ? 'var(--aqos-danger)' : (sev === 'warn' ? 'oklch(0.78 0.14 75)' : 'oklch(0.66 0.16 270)');
const sevLabel = sev === 'crit' ? 'CRITICAL' : (sev === 'warn' ? 'WARN' : 'INFO');
return (
{sevLabel}
{s.title}
{s.summary}
Suggested rule: {s.suggested_rule.metric} {s.suggested_rule.comparator} {s.suggested_rule.threshold} over {s.suggested_rule.window_minutes}m → {s.suggested_rule.channel}
{canManage && (
+ Create alert
)}
Dismiss
);
}
/* ─── Anomalies tab ───────────────────────────────────────────── */
function AnomaliesTab({ canManage }) {
const [anomalies, setAnomalies] = useState([]);
const [meta, setMeta] = useState({});
const [loading, setLoading] = useState(true);
const [err, setErr] = useState(null);
const [createFrom, setCreateFrom] = useState(null); // anomaly to convert to alert
/* Suggestions live alongside the raw anomaly grid because they're
the actionable counterpart — anomalies show "what" happened,
suggestions show "what to do about it". */
const [suggestions, setSuggestions] = useState([]);
const [suggestionsLoading, setSuggestionsLoading] = useState(true);
const [suggestionsErr, setSuggestionsErr] = useState(null);
useEffect(() => {
apiFetch('/api/analytics/anomalies?lookback_hours=24&baseline_days=7')
.then((r) => { setAnomalies((r && r.anomalies) || []); setMeta(r || {}); setLoading(false); })
.catch((e) => { setErr(e.message); setLoading(false); });
}, []);
useEffect(() => {
apiFetch('/api/analytics/alert-suggestions')
.then((r) => { setSuggestions((r && r.suggestions) || []); setSuggestionsLoading(false); })
.catch((e) => { setSuggestionsErr(e.message); setSuggestionsLoading(false); });
}, []);
function dismissSuggestion(s) {
apiFetch('/api/analytics/alert-suggestions/' + encodeURIComponent(s.key) + '/dismiss', { method: 'POST' })
.then(() => setSuggestions((prev) => prev.filter(x => x.key !== s.key)))
.catch((e) => window.toast && window.toast(e.message, 'error'));
}
function resetDismissed() {
apiFetch('/api/analytics/alert-suggestions/dismissed', { method: 'DELETE' })
.then(() => apiFetch('/api/analytics/alert-suggestions'))
.then((r) => setSuggestions((r && r.suggestions) || []))
.catch((e) => window.toast && window.toast(e.message, 'error'));
}
function createFromSuggestion(s) {
/* Pre-fill the modal exactly the way startCreate(an) does — the
AlertRuleModal treats falsy id as "new". */
setCreateFrom({
...s.suggested_rule,
site_id: null,
});
}
/* Pre-fill the create-modal with sane defaults from the anomaly:
metric=anomaly_zscore, comparator=gt, threshold=2.5, window=60. */
function startCreate(an) {
setCreateFrom({
name: `Anomaly @ ${an.hour}`,
metric: 'anomaly_zscore',
comparator: 'gt',
threshold: 2.5,
window_minutes: 60,
channel: 'inapp',
channel_target: null,
// not a real id — modal treats falsy id as "new"
});
}
return (
{/* Suggested alerts — renders ABOVE the raw anomaly table because
it's where the user finds the ready-to-apply value. */}
{(suggestionsLoading || suggestions.length > 0 || suggestionsErr) && (
{suggestionsLoading && (
Looking for patterns…
)}
{!suggestionsLoading && suggestions.length === 0 && !suggestionsErr && (
Nothing to suggest right now. Activity looks normal — we'll flag patterns as they emerge.
)}
{suggestions.map((s) => createFromSuggestion(s)} onDismiss={() => dismissSuggestion(s)} />)}
{suggestionsErr && (
Couldn't load suggestions: {suggestionsErr}
)}
)}
{loading ? 'Computing…' : `${anomalies.length} flagged hour${anomalies.length === 1 ? '' : 's'}`}
{meta.baseline_count != null && (
· baseline = {meta.baseline_count} samples over 7d
)}
Hour
Observed
Mean (7d)
σ
z-score
{canManage &&
{!loading && anomalies.length === 0 && (
Nothing unusual in the last 24 hours.
{an.hour} {_fmtN(an.observed)} {_fmtN(an.mean)}
{_fmtN(an.stddev)}
{high ? '+' : ''}{an.z.toFixed(2)} σ
{canManage && (
startCreate(an)} style={{ fontSize: 11, cursor: 'pointer' }}>+ Create alert
)}
);
})}
{createFrom && (
setCreateFrom(null)}
onSaved={() => setCreateFrom(null)}
/>
)}
{err && (
Couldn't load anomalies: {err}
)}
{loading ? 'Loading…' : `${goals.length} goal${goals.length === 1 ? '' : 's'}`}
{canManage &&
setAdding(true)}>+ New goal }
{!loading && goals.length === 0 && (
No goals yet. Set targets like "10K impressions/day" or "£500 revenue/week" to track progress at a glance.
{canManage &&
}
)}
{goals.map((g) => deleteGoal(g)} />)}
{adding && (
setAdding(false)}
onSaved={() => { setAdding(false); reload(); }}
/>
)}
{err && (
Couldn't load goals: {err}
)}
);
}
/* Single goal card with progress bar + projection. */
function GoalCard({ g, canManage, onDelete }) {
const m = metricMeta(g.metric);
const onPace = g.on_pace;
const tone = onPace ? 'oklch(0.78 0.13 160)' : 'oklch(0.78 0.14 75)';
const progressClamped = Math.min(100, g.progress_pct);
const overflow = g.progress_pct > 100;
const fmt = (n) => {
if (g.metric === 'revenue_cents') return '£' + ((Number(n) || 0) / 100).toLocaleString('en-GB', { maximumFractionDigits: 0 });
if (g.metric === 'scan_rate') return (Number(n) || 0).toFixed(2) + '%';
return (Number(n) || 0).toLocaleString('en-GB');
};
return (
{g.name}
{m.label} · {(GOAL_PERIODS.find((p) => p.id === g.period) || {}).label || g.period}
{canManage && (
Delete
)}
{fmt(g.observed)}
/ {fmt(g.target)}
{g.progress_pct}%
{g.elapsed_pct}% of period elapsed · projected end {fmt(g.projection)} · {onPace ? on pace : behind pace }
{/* Progress bar */}
{/* Pace marker — vertical line at "where progress should be" */}
);
}
function GoalModal({ onCancel, onSaved }) {
const [name, setName] = useState('');
const [metric, setMetric] = useState('impressions');
const [period, setPeriod] = useState('month');
const [target, setTarget] = useState(10000);
const [busy, setBusy] = useState(false);
const [err, setErr] = useState(null);
function submit(e) {
if (e) e.preventDefault();
if (!name.trim()) { setErr('Name required'); return; }
if (!Number(target)) { setErr('Target must be > 0'); return; }
setBusy(true); setErr(null);
apiFetch('/api/analytics/goals', {
method: 'POST',
body: JSON.stringify({ name: name.trim(), metric, period, target: Number(target) }),
})
.then(() => { setBusy(false); onSaved(); })
.catch((e) => { setBusy(false); setErr(e.message); });
}
const m = metricMeta(metric);
return (
);
}
/* ─── Scheduled reports tab ───────────────────────────────────── */
const REPORT_RANGES = [
{ id: '24h', label: 'Last 24 hours' },
{ id: '7d', label: 'Last 7 days' },
{ id: '30d', label: 'Last 30 days' },
{ id: '90d', label: 'Last 90 days' },
];
const REPORT_CADENCES = [
{ id: 'daily', label: 'Daily' },
{ id: 'weekly', label: 'Weekly' },
{ id: 'monthly', label: 'Monthly' },
];
const DOW_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
function describeSchedule(cadence, schedule) {
const s = Object.assign({ hour: 9, minute: 0, day_of_week: 1, day_of_month: 1 }, schedule || {});
const time = String(s.hour).padStart(2, '0') + ':' + String(s.minute).padStart(2, '0') + ' UTC';
if (cadence === 'daily') return 'Daily · ' + time;
if (cadence === 'weekly') return `Weekly · ${DOW_LABELS[s.day_of_week]} ${time}`;
if (cadence === 'monthly') return `Monthly · day ${s.day_of_month} at ${time}`;
return 'Unknown';
}
function ReportsTab({ canManage }) {
const [reports, setReports] = useState([]);
const [loading, setLoading] = useState(true);
const [editing, setEditing] = useState(null); // report or 'new'
const [err, setErr] = useState(null);
function reload() {
setLoading(true);
apiFetch('/api/analytics/scheduled-reports')
.then((r) => { setReports((r && r.reports) || []); setLoading(false); })
.catch((e) => { setErr(e.message); setLoading(false); });
}
useEffect(() => { reload(); }, []);
function toggleStatus(rep) {
const next = rep.status === 'active' ? 'paused' : 'active';
apiFetch('/api/analytics/scheduled-reports/' + encodeURIComponent(rep.id), {
method: 'PATCH', body: JSON.stringify({ status: next }),
}).then(reload).catch((e) => window.toast && window.toast(e.message, 'error'));
}
function deleteReport(rep) {
if (!window.confirm(`Delete scheduled report "${rep.name}"? Past run history is kept.`)) return;
apiFetch('/api/analytics/scheduled-reports/' + encodeURIComponent(rep.id), { method: 'DELETE' })
.then(reload).catch((e) => window.toast && window.toast(e.message, 'error'));
}
function cloneReport(rep) {
apiFetch('/api/analytics/scheduled-reports/' + encodeURIComponent(rep.id) + '/clone', { method: 'POST' })
.then(() => { window.toast && window.toast(`Cloned "${rep.name}" — opens paused`); reload(); })
.catch((e) => window.toast && window.toast('Clone failed: ' + e.message, 'error'));
}
function runNow(rep) {
window.toast && window.toast('Running "' + rep.name + '" now…');
apiFetch('/api/analytics/scheduled-reports/' + encodeURIComponent(rep.id) + '/run', { method: 'POST' })
.then((r) => {
const msg = r.ok
? `Sent → ${r.recipients_count || 0} recipient${r.recipients_count === 1 ? '' : 's'}${r.info ? ' (' + r.info + ')' : ''}`
: `Run failed: ${r.error || 'unknown'}`;
window.toast && window.toast(msg, r.ok ? 'success' : 'error');
reload();
})
.catch((e) => window.toast && window.toast('Run failed: ' + e.message, 'error'));
}
return (
{loading ? 'Loading…' : `${reports.length} scheduled report${reports.length === 1 ? '' : 's'}`}
{canManage &&
setEditing('new')}>+ New scheduled report }
Name
Range
Cadence
Recipients
Next run
{canManage &&
{!loading && reports.length === 0 && (
No scheduled reports yet. {canManage ? setEditing('new')} style={{ cursor: 'pointer', color: 'var(--aqos-accent, oklch(0.66 0.16 270))' }}>Schedule one → : null}
{r.name} {(REPORT_RANGES.find((x) => x.id === r.range_id) || {}).label || r.range_id} {r.cadence_label || describeSchedule(r.cadence, r.schedule)}
{recList.length} email{recList.length === 1 ? '' : 's'}
{recList.length > 0 && (
· {recList[0]}{recList.length > 1 ? ` (+${recList.length - 1})` : ''}
)}
{r.next_run_at ? new Date(r.next_run_at).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : '—'}
{canManage && (
cloneReport(r)} style={{ marginRight: 8, fontSize: 11, color: 'var(--aqos-text-dim)', cursor: 'pointer' }} title="Clone this report (paused)">Clone
runNow(r)} style={{ marginRight: 8, fontSize: 11, color: 'var(--aqos-text-dim)', cursor: 'pointer' }} title="Generate + send now">Run now
toggleStatus(r)} style={{ marginRight: 8, fontSize: 11, color: 'var(--aqos-text-dim)', cursor: 'pointer' }}>
{isActive ? 'Pause' : 'Resume'}
setEditing(r)} style={{ marginRight: 8, fontSize: 11, cursor: 'pointer' }}>Edit
deleteReport(r)} style={{ fontSize: 11, color: 'var(--aqos-danger)', cursor: 'pointer' }}>Delete
)}
);
})}
{editing && (
setEditing(null)}
onSaved={() => { setEditing(null); reload(); }}
/>
)}
{err && (
Couldn't load reports: {err}
)}
);
}
/* Modal — author or edit a single scheduled report. Same shape /
style as AlertRuleModal. The schedule sub-form swaps controls
based on cadence (day-of-week chips for weekly, day-of-month
dropdown for monthly, just hour/minute for daily). */
function ScheduledReportModal({ initial, onCancel, onSaved }) {
const isEdit = !!(initial && initial.id);
const init = initial || {};
const initSched = init.schedule || (init.schedule_json ? tryParse(init.schedule_json) : null) || { hour: 9, minute: 0, day_of_week: 1, day_of_month: 1 };
const [name, setName] = useState(init.name || '');
const [rangeId, setRangeId] = useState(init.range_id || '7d');
const [cadence, setCadence] = useState(init.cadence || 'weekly');
const [hour, setHour] = useState(initSched.hour ?? 9);
const [minute, setMinute] = useState(initSched.minute ?? 0);
const [dow, setDow] = useState(initSched.day_of_week ?? 1);
const [dom, setDom] = useState(initSched.day_of_month ?? 1);
const [recipients, setRecipients] = useState(init.recipients_email || '');
const [busy, setBusy] = useState(false);
const [err, setErr] = useState(null);
function tryParse(s) { try { return JSON.parse(s); } catch { return null; } }
function submit(e) {
if (e) e.preventDefault();
if (!name.trim()) { setErr('Name required'); return; }
if (!recipients.trim()) { setErr('At least one recipient email required'); return; }
setBusy(true); setErr(null);
const body = {
name: name.trim(),
range_id: rangeId,
cadence,
schedule: { hour: Number(hour) || 0, minute: Number(minute) || 0, day_of_week: Number(dow) || 0, day_of_month: Number(dom) || 1 },
recipients_email: recipients.trim(),
};
const req = isEdit
? apiFetch('/api/analytics/scheduled-reports/' + encodeURIComponent(initial.id), { method: 'PATCH', body: JSON.stringify(body) })
: apiFetch('/api/analytics/scheduled-reports', { method: 'POST', body: JSON.stringify(body) });
req.then(() => { setBusy(false); onSaved(); })
.catch((e) => { setBusy(false); setErr(e.message); });
}
return (
);
}
/* Expose the scheduled-report modal so the AnalyticsScreen ExportMenu
can also open it. */
window.ScheduledReportModal = ScheduledReportModal;
/* ─── A/B experiments tab ────────────────────────────────────── */
const EXPERIMENT_METRICS = [
{ id: 'hold_rate', label: 'Hold rate (engagement)' },
{ id: 'scan_rate', label: 'Scan rate (CTR)' },
{ id: 'impressions', label: 'Impressions' },
{ id: 'scans', label: 'QR scans' },
{ id: 'cta_clicks', label: 'CTA clicks' },
];
/* Variant config knobs — the kiosk reads these via the public
experiments-for-screen endpoint and applies them at render time.
Each knob is a {key, label, type, options/min/max} spec; the
editor below builds inputs from this list. New knobs added here
show up in the modal automatically.
Adding a new knob is a two-step deal:
1. Add the spec here (frontend authoring)
2. Read it on the kiosk side in display/index.html where the
variant config is applied (currently the kiosk doesn't read
variant configs yet — that's a follow-up integration). */
const VARIANT_CONFIG_KNOBS = [
{
key: 'rotation_order',
label: 'Species rotation order',
type: 'select',
options: [
{ id: '', label: '(default — alphabetical)' },
{ id: 'popularity', label: 'By popularity (most-viewed first)' },
{ id: 'engagement', label: 'By engagement (highest hold rate first)' },
{ id: 'random', label: 'Random shuffle each loop' },
{ id: 'recently_added', label: 'Newest species first' },
],
},
{
key: 'hero_treatment',
label: 'Hero treatment',
type: 'select',
options: [
{ id: '', label: '(default — looping video)' },
{ id: 'video', label: 'Looping video' },
{ id: 'static', label: 'Static hero image' },
{ id: 'kenburns', label: 'Ken Burns pan' },
],
},
{
key: 'rotation_seconds',
label: 'Auto-rotation (seconds per species)',
type: 'number',
min: 5, max: 60,
placeholder: 'default 12',
},
{
key: 'sponsor_position',
label: 'Sponsor logo position',
type: 'select',
options: [
{ id: '', label: '(default — bottom-right)' },
{ id: 'bottom_right', label: 'Bottom right (corner card)' },
{ id: 'top_strip', label: 'Top strip' },
{ id: 'bottom_strip', label: 'Bottom strip' },
{ id: 'hidden', label: 'Hidden' },
],
},
{
key: 'cta_prominence',
label: 'CTA prominence',
type: 'select',
options: [
{ id: '', label: '(default — subtle)' },
{ id: 'subtle', label: 'Subtle (corner badge)' },
{ id: 'prominent', label: 'Prominent (full-width banner)' },
{ id: 'pulsing', label: 'Pulsing animation' },
],
},
{
key: 'show_qr',
label: 'Show QR code',
type: 'bool',
},
];
const EXPERIMENT_STATUS = {
draft: { label: 'Draft', color: 'var(--aqos-text-faint)' },
running: { label: 'Running', color: 'oklch(0.78 0.13 160)' },
stopped: { label: 'Stopped', color: 'var(--aqos-text-dim)' },
};
function ExperimentsTab({ canManage }) {
const [experiments, setExperiments] = useState([]);
const [loading, setLoading] = useState(true);
const [showCreate, setShowCreate] = useState(false);
const [openId, setOpenId] = useState(null); // results panel
const [err, setErr] = useState(null);
function reload() {
setLoading(true);
apiFetch('/api/analytics/experiments')
.then((r) => { setExperiments((r && r.experiments) || []); setLoading(false); })
.catch((e) => { setErr(e.message); setLoading(false); });
}
useEffect(() => { reload(); }, []);
function setStatus(exp, status) {
apiFetch('/api/analytics/experiments/' + encodeURIComponent(exp.id), {
method: 'PATCH', body: JSON.stringify({ status }),
}).then(reload).catch((e) => window.toast && window.toast(e.message, 'error'));
}
function deleteExp(exp) {
if (!window.confirm(`Delete experiment "${exp.name}"? Past assignments are wiped.`)) return;
apiFetch('/api/analytics/experiments/' + encodeURIComponent(exp.id), { method: 'DELETE' })
.then(reload).catch((e) => window.toast && window.toast(e.message, 'error'));
}
return (
{loading ? 'Loading…' : `${experiments.length} experiment${experiments.length === 1 ? '' : 's'}`}
Test variant configs across screens, see which lifts your engagement
{canManage &&
setShowCreate(true)}>+ New experiment }
{!loading && experiments.length === 0 && (
No experiments yet. Try variants of species rotation order, hero treatment, or sponsor placement to find what visitors engage with most.
{canManage &&
}
)}
{experiments.map((exp) => {
const statusMeta = EXPERIMENT_STATUS[exp.status] || EXPERIMENT_STATUS.draft;
const isOpen = openId === exp.id;
return (
{exp.name}
● {statusMeta.label}
· {exp.primary_metric} · {(exp.variants || []).length} variants
{exp.hypothesis && (
"{exp.hypothesis}"
)}
{canManage && (
)}
{isOpen &&
}
);
})}
{showCreate && (
setShowCreate(false)}
onSaved={() => { setShowCreate(false); reload(); }}
/>
)}
{err && (
Couldn't load experiments: {err}
)}
);
}
function ExperimentResults({ experimentId }) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
apiFetch('/api/analytics/experiments/' + encodeURIComponent(experimentId) + '/results')
.then((r) => { setData(r); setLoading(false); })
.catch(() => setLoading(false));
}, [experimentId]);
if (loading) return Loading results…
;
if (!data || !data.results || data.results.length === 0) return No results yet.
;
const metric = data.experiment.primary_metric;
function metricValue(m) {
if (metric === 'hold_rate') return _fmtPct(m.hold_rate_pct, 1);
if (metric === 'scan_rate') return _fmtPct(m.scan_rate_pct, 2);
return _fmtN(m[metric] || 0);
}
return (
{data.results.map((r, i) => {
const sig = r.significance;
const lift = r.lift_pct;
const winning = lift != null && lift > 0 && sig && sig.significant;
const losing = lift != null && lift < 0 && sig && sig.significant;
return (
{r.variant.label} {r.is_control && · control }
{metricValue(r.metrics)}
{r.metrics.screens} screen{r.metrics.screens === 1 ? '' : 's'} · {_fmtN(r.metrics.exposures)} exposures
{!r.is_control && lift != null && (
0 ? 'oklch(0.78 0.13 160)' : 'var(--aqos-danger)' }}>
{lift > 0 ? '▲' : '▼'} {Math.abs(lift).toFixed(1)}% vs control
{sig &&
· z={sig.z}, p={sig.p}{sig.significant ? ' ✓ significant' : ''}
}
{sig === null && · not enough data }
)}
);
})}
Window: {String(data.window.from).slice(0, 10)} → {String(data.window.to).slice(0, 10)} ·
Significance: two-proportion z-test, |z|>1.96 ≈ 95% confidence
);
}
/* VariantEditor — per-variant block in the experiment modal. Renders
label + description + a knob picker that lets the author override
individual config values without writing JSON. The control variant
gets a hint that it represents "current behaviour" — no overrides
means the kiosk runs its defaults. */
function VariantEditor({ variant, isFirst, canRemove, onChange, onRemove }) {
const config = variant.config || {};
const [expanded, setExpanded] = useState(false);
const knobCount = Object.keys(config).filter(k => config[k] !== '' && config[k] != null).length;
function setKnob(key, value) {
const next = { ...config };
if (value === '' || value == null) delete next[key];
else next[key] = value;
onChange({ config: next });
}
return (
);
}
function ExperimentModal({ onCancel, onSaved }) {
const [name, setName] = useState('');
const [hypothesis, setHypothesis] = useState('');
const [metric, setMetric] = useState('hold_rate');
const [variants, setVariants] = useState([
{ label: 'Control', description: '', config: {} },
{ label: 'Variant A', description: '', config: {} },
]);
const [busy, setBusy] = useState(false);
const [err, setErr] = useState(null);
function updateVariant(i, patch) {
setVariants(variants.map((v, j) => i === j ? { ...v, ...patch } : v));
}
function addVariant() {
setVariants([...variants, { label: `Variant ${String.fromCharCode(64 + variants.length)}`, description: '', config: {} }]);
}
function removeVariant(i) {
if (variants.length <= 2) return;
setVariants(variants.filter((_, j) => j !== i));
}
function submit(e) {
if (e) e.preventDefault();
if (!name.trim()) { setErr('Name required'); return; }
if (variants.some(v => !v.label.trim())) { setErr('Every variant needs a label'); return; }
setBusy(true); setErr(null);
apiFetch('/api/analytics/experiments', {
method: 'POST',
body: JSON.stringify({
name: name.trim(),
hypothesis: hypothesis.trim() || null,
primary_metric: metric,
variants: variants.map(v => ({
label: v.label.trim(),
description: v.description.trim() || null,
config: v.config || {},
})),
}),
})
.then(() => { setBusy(false); onSaved(); })
.catch((e) => { setBusy(false); setErr(e.message); });
}
return (
);
}
/* ─── Ingestion sources tab ──────────────────────────────────── */
function IngestionTab({ canManage }) {
const [sources, setSources] = useState([]);
const [loading, setLoading] = useState(true);
const [showCreate, setShowCreate] = useState(false);
const [created, setCreated] = useState(null); // {id, ingest_url, secret} from POST
const [err, setErr] = useState(null);
function reload() {
setLoading(true);
apiFetch('/api/analytics/ingestion-sources')
.then((r) => { setSources((r && r.sources) || []); setLoading(false); })
.catch((e) => { setErr(e.message); setLoading(false); });
}
useEffect(() => { reload(); }, []);
function deleteSource(s) {
if (!window.confirm(`Delete ingestion source "${s.name}"? This breaks any external systems pointing at it.`)) return;
apiFetch('/api/analytics/ingestion-sources/' + encodeURIComponent(s.id), { method: 'DELETE' })
.then(reload).catch((e) => window.toast && window.toast(e.message, 'error'));
}
return (
{loading ? 'Loading…' : `${sources.length} source${sources.length === 1 ? '' : 's'}`}
External systems POST signed JSON → analytics events
{canManage &&
setShowCreate(true)}>+ New source }
{!loading && sources.length === 0 && (
No ingestion sources yet. Create one to receive events from Stripe webhooks, your POS, or any external system.
{canManage &&
}
)}
{sources.length > 0 && (
)}
{showCreate && (
setShowCreate(false)}
onCreated={(r) => { setCreated(r); setShowCreate(false); reload(); }}
/>
)}
{created && (
setCreated(null)}
/>
)}
{err && (
Couldn't load sources: {err}
)}
);
}
function CreateIngestionModal({ onCancel, onCreated }) {
const [name, setName] = useState('');
const [description, setDescription] = useState('');
const [busy, setBusy] = useState(false);
const [err, setErr] = useState(null);
function submit(e) {
if (e) e.preventDefault();
if (!name.trim()) { setErr('Name required'); return; }
setBusy(true); setErr(null);
apiFetch('/api/analytics/ingestion-sources', {
method: 'POST',
body: JSON.stringify({ name: name.trim(), description: description.trim() || null }),
})
.then((r) => { setBusy(false); onCreated(r); })
.catch((e) => { setBusy(false); setErr(e.message); });
}
return (
);
}
function SecretRevealModal({ data, onClose }) {
function copy(text, label) {
navigator.clipboard?.writeText(text).then(
() => window.toast && window.toast(label + ' copied'),
() => window.prompt('Copy this:', text)
);
}
return (
Source created — copy your secret now
This is the only time you'll see this secret. {' '}
Configure your external system with the URL + secret below. Sign each request body with HMAC-SHA256 using the secret and pass the hex digest as X-AquaOS-Signature.
Ingest URL
{data.ingest_url}
copy(data.ingest_url, 'URL')} style={{ fontSize: 11, color: 'var(--aqos-text-dim)', cursor: 'pointer' }}>📋 Copy URL
Secret (HMAC-SHA256 key)
{data.secret}
copy(data.secret, 'Secret')} style={{ fontSize: 11, color: 'var(--aqos-text-dim)', cursor: 'pointer' }}>📋 Copy secret
Example: signing a payload (Node.js)
{`const crypto = require('crypto');
const secret = '${data.secret.slice(0, 8)}…';
const body = JSON.stringify({
event_type: 'sale.attributed',
screen_id: 'screen-uuid',
data: { amount_cents: 1500 }
});
const sig = crypto.createHmac('sha256', Buffer.from(secret, 'hex'))
.update(body, 'utf8').digest('hex');
await fetch('${data.ingest_url}', {
method: 'POST',
headers: { 'Content-Type': 'application/json',
'X-AquaOS-Signature': sig },
body,
});`}
I've saved the secret
);
}
/* ─── Top-level screen ────────────────────────────────────────── */
function AlertsScreen({ param }) {
const canView = Auth.canViewAnalyticsAlerts && Auth.canViewAnalyticsAlerts();
const canManage = Auth.canManageAnalyticsAlerts && Auth.canManageAnalyticsAlerts();
/* Tabs are simple — store the active tab in the hash so refreshes
and deep-links survive. param looks like "rules" or "feed". */
const [tab, setTab] = useState((param || 'rules').split('?')[0] || 'rules');
function changeTab(id) {
setTab(id);
window.location.hash = '#alerts/' + id;
}
if (!canView) {
return (
Alerts
You don't have permission to view alerts. Ask your org admin to grant the
analytics.view_alerts capability.
);
}
return (
{tab === 'rules' &&
}
{tab === 'feed' &&
}
{tab === 'anomalies' &&
}
{tab === 'goals' &&
}
{tab === 'reports' &&
}
{tab === 'experiments' &&
}
{tab === 'ingestion' &&
}
);
}
window.AlertsScreen = AlertsScreen;
/* Also expose the modal so future surfaces (e.g. an anomaly chip on
the main analytics dashboard) can open it directly. */
window.AlertRuleModal = AlertRuleModal;
})();