/* Dashboard — Mission Control (2026-06-12 redesign).
Per-role variants:
aquaos_admin → PlatformDashboard (fleet digest + org list)
org_admin → OrgDashboard (Mission Control: state hero,
site_manager AI brief, KPI strip w/ deltas
marketing_admin + sparklines, attention inbox,
fleet bezel strip, activity)
designer → DesignerDashboard (Campaigns + Media quick links)
operator → OperatorDashboard (read-only fleet strip)
Design notes:
- The hero CHANGES SHAPE with urgency: quiet text headline on healthy
days, a promoted `.aq-hero-card.is-danger/.is-warn` card with CTAs +
offline-screen chips when something needs action.
- Analytics KPIs (scans/impressions + deltas + sparklines) come from
/api/analytics/metrics and are capability-gated by
Auth.canViewAnalytics(); callers without it get the counts strip.
- The AI brief reuses /api/analytics/insights (same contract as the
Analytics page's InsightsCard) and falls back to a deterministic
summary when the model isn't configured — the card never dead-ends.
- Motion: staggered section entrance (.aq-dash-stagger), count-up
numerals, breathing danger dot. All gated by prefers-reduced-motion
(CSS via media query, JS via matchMedia). */
function todayLong() {
const d = new Date();
return d.toLocaleDateString(undefined, {
weekday: 'long', day: 'numeric', month: 'long',
});
}
/* Screen liveness — mirrors the heartbeat model used by Displays and the
analytics evaluator. `screens.is_online` is written on every heartbeat
(screens.js POST /heartbeat) and flipped false by the ~2-min offline sweep,
so it's the authoritative signal; fall back to last_heartbeat freshness for
rows where is_online was never reported. NOTE: last_seen_at is the FEED-
reload timestamp, NOT liveness — keying off it (the previous bug) showed
live-but-not-recently-reloaded screens as offline. */
function screenIsOnline(s) {
if (s.is_online === true || s.is_online === 1) return true;
if (s.is_online === false || s.is_online === 0) return false;
const hb = s.last_heartbeat || s.last_seen_at;
return hb ? (Date.now() - new Date(hb).getTime()) < 2 * 60 * 1000 : false;
}
function screenNeverSeen(s) {
return !s.last_heartbeat && !s.last_seen_at;
}
function dashRelativeTime(iso) {
if (!iso) return 'never';
const m = Math.round((Date.now() - new Date(iso).getTime()) / 60000);
if (m < 1) return 'just now';
if (m < 60) return `${m} min ago`;
const h = Math.round(m / 60);
if (h < 24) return `${h} h ago`;
return `${Math.round(h / 24)} d ago`;
}
/* Day-context timestamp for the activity feed: today → "14:02",
yesterday → "yesterday · 23:17", this week → "Tue · 14:02",
older → "9 Jun". */
function dashDayTime(iso) {
if (!iso) return '—';
const d = new Date(iso);
const now = new Date();
const time = d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
const startOfDay = (x) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
const dayDiff = Math.round((startOfDay(now) - startOfDay(d)) / 86400000);
if (dayDiff <= 0) return time;
if (dayDiff === 1) return `yesterday · ${time}`;
if (dayDiff < 7) return `${d.toLocaleDateString(undefined, { weekday: 'short' })} · ${time}`;
return d.toLocaleDateString(undefined, { day: 'numeric', month: 'short' });
}
function dashHue(str) {
let h = 0;
for (const c of String(str || '')) h = (h * 31 + c.charCodeAt(0)) % 360;
return h;
}
function dashGo(href) {
return (e) => { if (e) e.preventDefault(); window.location.hash = href; };
}
/* ── Motion primitives ─────────────────────────────────────────────── */
const dashReducedMotion = () =>
window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
/* Count-up numeral: animates from the previously shown value to the
target with a cubic ease-out. null target = still loading. */
function useCountUp(target, duration = 650) {
const [val, setVal] = useState(null);
const prevRef = useRef(0);
useEffect(() => {
if (target == null) return;
if (dashReducedMotion() || prevRef.current === target) {
setVal(target); prevRef.current = target; return;
}
const from = prevRef.current;
let raf;
const t0 = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - t0) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setVal(Math.round(from + (target - from) * eased));
if (p < 1) raf = requestAnimationFrame(tick);
else prevRef.current = target;
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [target, duration]);
return target == null ? null : (val == null ? 0 : val);
}
/* ── Shared atoms ──────────────────────────────────────────────────── */
function DashEyebrow({ label }) {
return (
{label || 'Slate'}
·
{todayLong()}
);
}
function DashSkeleton({ w = 40, h = '0.9em' }) {
return
);
}
const max = Math.max(...pts), min = Math.min(...pts);
const range = (max - min) || 1;
const poly = pts.map((v, i) =>
`${(i / (pts.length - 1)) * 100},${20 - ((v - min) / range) * 16}`
).join(' ');
return (
);
}
/* KPI tile — count-up value, optional /total fraction, delta trend,
sparkline, quiet sub-link. */
function DashKpi({ label, value, frac, trend, trendTone = 'flat', spark, sparkTone, sub, href, subTone }) {
const display = useCountUp(value);
const trendCls = { up: 'is-up', down: 'is-down', warn: 'is-warn', flat: '' }[trendTone] || '';
const subColor = subTone === 'warn' ? 'var(--aq-warn)' : subTone === 'danger' ? 'var(--aq-danger)' : undefined;
return (
{label}
{value == null ? /{frac} }
{trend && {trend} }
{spark !== undefined &&
}
);
}
function DashError({ error }) {
return (
{error}
);
}
/* ── Org data plumbing ─────────────────────────────────────────────── */
function useOrgData() {
const me = Auth.getUser() || {};
const orgName = (me.organisations && me.organisations[0] && me.organisations[0].name) || 'Workspace';
const isSiteScoped = Auth.isSiteScoped();
const [data, setData] = useState({
speciesTotal: null,
screens: null, // full list — shared by hero, KPIs, inbox, fleet
campaigns: null, // full list — live count + stale drafts
pendingApprovals: null,
sitesTotal: null,
error: null,
});
useEffect(() => {
let cancelled = false;
async function load() {
try {
/* Approvals only when the workflow is enabled (paused 2026-06-03,
CP_APPROVALS_ENABLED). Re-enables itself when the flag flips. */
const approvalsOn = Auth.canApprove() && window.CP_APPROVALS_ENABLED === true;
const [species, screens, campaigns, approvals] = await Promise.all([
apiFetch('/api/species?limit=1').catch(() => null),
apiFetchSiteScoped('/api/screens').catch(() => null),
apiFetch('/api/campaigns').catch(() => null),
approvalsOn ? apiFetch('/api/approvals').catch(() => null) : Promise.resolve(null),
]);
if (cancelled) return;
const screensList = (screens && (screens.screens || screens)) || [];
const campaignsList = (campaigns && (campaigns.campaigns || campaigns)) || [];
setData((d) => ({
...d,
speciesTotal: species ? species.total : null,
screens: screensList,
campaigns: campaignsList,
pendingApprovals: approvals ? (approvals.approvals || []).length : null,
sitesTotal: isSiteScoped ? 1 : (me.sites || []).length || 1,
}));
} catch (err) { if (!cancelled) setData((d) => ({ ...d, error: err.message })); }
}
load();
return () => { cancelled = true; };
}, []);
return { data, orgName, isSiteScoped };
}
/* Analytics layer — 24h metrics + unacknowledged alert fires. Both are
capability-gated; either fetch failing degrades to the counts view. */
function useDashAnalytics() {
const canAnalytics = Auth.canViewAnalytics && Auth.canViewAnalytics();
const canAlerts = Auth.canViewAnalyticsAlerts && Auth.canViewAnalyticsAlerts();
const [metrics, setMetrics] = useState(null);
const [alertEvents, setAlertEvents] = useState(null);
useEffect(() => {
let cancelled = false;
if (canAnalytics) {
apiFetch('/api/analytics/metrics?range=24h&bucket=hour')
.then((r) => { if (!cancelled) setMetrics(r); })
.catch(() => { if (!cancelled) setMetrics(null); });
}
if (canAlerts) {
apiFetch('/api/analytics/alert-events?unack=1&limit=5')
.then((r) => { if (!cancelled) setAlertEvents(r.events || []); })
.catch(() => { if (!cancelled) setAlertEvents([]); });
} else {
setAlertEvents([]);
}
return () => { cancelled = true; };
}, [canAnalytics, canAlerts]);
return { canAnalytics, metrics, alertEvents };
}
/* ── 1 · Hero — changes shape with urgency ─────────────────────────── */
function DashHero({ data }) {
const me = Auth.getUser() || {};
const firstName = (me.name || '').split(' ')[0] || 'there';
const screens = data.screens || [];
const total = screens.length;
const offlineScreens = screens.filter((s) => !screenIsOnline(s) && !screenNeverSeen(s));
const offline = offlineScreens.length;
/* Idle — brand-new workspace. */
if (data.screens != null && total === 0 && data.speciesTotal === 0) {
return (
Good to see you, {firstName}. Pair a screen from Displays to bring Slate to life.
);
}
/* Incident — promoted card with built-in action. Danger when the whole
fleet is down, warn for a partial outage. */
if (offline > 0) {
const tone = offline === total ? 'is-danger' : 'is-warn';
const dotColor = offline === total ? 'var(--aq-danger)' : 'var(--aq-warn)';
const newest = offlineScreens
.map((s) => s.last_heartbeat || s.last_seen_at)
.filter(Boolean)
.sort()
.pop();
const chips = offlineScreens.slice(0, 4);
return (
{offline === total
? 'The whole fleet is dark — check power and network first.'
: `${total - offline} of ${total} still serving. Most recent drop ${dashRelativeTime(newest)}.`}
View fleet
{chips.map((s) => (
{dashRelativeTime(s.last_heartbeat || s.last_seen_at)}
))}
{offlineScreens.length > 4 && (
+{offlineScreens.length - 4} more
)}
);
}
/* Healthy / loading — quiet text headline. */
const loading = data.screens == null;
return (
Good to see you, {firstName}.
);
}
/* ── 2 · Brief — AI when configured, deterministic otherwise ───────── */
function DashBrief({ data, metrics, canAnalytics }) {
const [insight, setInsight] = useState(null);
const [aiState, setAiState] = useState('idle'); // idle | loading | done | unavailable
useEffect(() => {
if (!canAnalytics || !metrics) return;
let cancelled = false;
setAiState('loading');
apiFetch('/api/analytics/insights', {
method: 'POST',
body: JSON.stringify({
range: '24h',
dashboardSnapshot: { range: '24h', periodLabel: '24h', metrics, campaigns: [], species: [] },
}),
})
.then((r) => { if (!cancelled) { setInsight(r); setAiState('done'); } })
.catch(() => { if (!cancelled) setAiState('unavailable'); });
return () => { cancelled = true; };
}, [canAnalytics, metrics]);
/* Deterministic fallback — composed from live signals so the card is
honest (and useful) even without the model. */
const fallback = (() => {
const parts = [];
const screens = data.screens || [];
const online = screens.filter(screenIsOnline).length;
const live = (data.campaigns || []).filter((c) => c.status === 'live').length;
if (metrics && metrics.scans && metrics.scans.value > 0) {
const d = metrics.scans.delta_pct;
parts.push(`${metrics.scans.value.toLocaleString()} QR scans in the last 24h${d ? ` (${d > 0 ? 'up' : 'down'} ${Math.abs(d)}% on the day before)` : ''}`);
}
if (live > 0) parts.push(`${live} live campaign${live === 1 ? '' : 's'} running`);
if (screens.length > 0) parts.push(`${online} of ${screens.length} screens online`);
if (data.pendingApprovals > 0) parts.push(`${data.pendingApprovals} item${data.pendingApprovals === 1 ? '' : 's'} pending review`);
if (parts.length === 0) parts.push('Catalogue is steady; no urgent actions');
return parts.join(' · ') + '.';
})();
const showAi = aiState === 'done' && insight && insight.body;
return (
Today's brief
{aiState === 'loading' ? 'thinking…'
: showAi ? `${insight.cached ? 'cached' : 'fresh'} · ${todayLong()}`
: `live · ${todayLong()}`}
{showAi ? (
{insight.headline ? {insight.headline} : null}
{insight.body}
) : fallback}
);
}
/* ── 3 · KPI strip ─────────────────────────────────────────────────── */
function dashFmtDelta(pct) {
if (pct == null || pct === 0) return null;
return `${pct > 0 ? '▲' : '▼'} ${Math.abs(pct)}%`;
}
function DashKpis({ data, metrics, canAnalytics }) {
const screens = data.screens || [];
const online = screens.filter(screenIsOnline).length;
const total = data.screens == null ? null : screens.length;
const liveCampaigns = data.campaigns == null ? null
: data.campaigns.filter((c) => c.status === 'live');
const liveName = liveCampaigns && liveCampaigns.length === 1 ? liveCampaigns[0].name : null;
const offline = (total || 0) - online;
if (canAnalytics) {
const scans = metrics && metrics.scans;
const imps = metrics && metrics.impressions;
return (
0 ? 'up' : scans && scans.delta_pct < 0 ? 'down' : 'flat'}
spark={scans && scans.sparkline}
sub={scans && scans.prev ? `vs ${scans.prev.toLocaleString()} the day before` : 'QR scans across the fleet'}
href="#analytics"
/>
0 ? 'up' : imps && imps.delta_pct < 0 ? 'down' : 'flat'}
spark={imps && imps.sparkline}
sub={total != null ? `across ${total} screen${total === 1 ? '' : 's'}` : 'across the fleet'}
href="#analytics"
/>
0 ? `▼ ${offline} down` : total > 0 ? 'steady' : null}
trendTone={offline > 0 ? 'down' : 'flat'}
sparkTone={offline > 0 ? 'danger' : 'success'}
spark={total != null && total > 0 ? screens.map((s) => (screenIsOnline(s) ? 1 : 0)) : null}
sub={offline > 0 ? `${offline} need${offline === 1 ? 's' : ''} attention` : 'all serving'}
subTone={offline > 0 ? 'danger' : null}
href="#displays"
/>
0 ? 'serving now' : 'none scheduled'}
href="#campaigns"
/>
);
}
/* Counts fallback for roles without analytics capability. */
return (
0 ? 'serving now' : 'none scheduled'}
href="#campaigns"
/>
);
}
/* ── 4 · Attention inbox ───────────────────────────────────────────── */
const STALE_DRAFT_DAYS = 60;
function buildInboxItems(data, alertEvents) {
const items = [];
(alertEvents || []).forEach((ev) => {
items.push({
key: `alert-${ev.id}`,
tone: 'is-danger',
icon: 'bell',
title: `Alert fired — ${ev.alert_name || ev.metric}`,
meta: ev.observed_value != null ? `observed ${ev.observed_value} (threshold ${ev.threshold})` : 'threshold crossed',
time: dashDayTime(ev.fired_at),
act: 'Review',
href: '#alerts',
});
});
if (data.pendingApprovals > 0) {
items.push({
key: 'approvals',
tone: 'is-warn',
icon: 'check',
title: `${data.pendingApprovals} item${data.pendingApprovals === 1 ? '' : 's'} pending your review`,
meta: 'submitted by your team',
time: '',
act: 'Review',
href: '#approvals',
});
}
const staleDrafts = (data.campaigns || []).filter((c) => {
if (c.status !== 'draft' || !c.updated_at) return false;
return (Date.now() - new Date(c.updated_at).getTime()) > STALE_DRAFT_DAYS * 86400000;
});
if (staleDrafts.length > 0) {
const oldest = staleDrafts.reduce((a, b) => (a.updated_at < b.updated_at ? a : b));
const days = Math.round((Date.now() - new Date(oldest.updated_at).getTime()) / 86400000);
items.push({
key: 'stale-drafts',
tone: 'is-warn',
icon: 'clock',
title: staleDrafts.length === 1
? `Stale draft — “${oldest.name}”`
: `${staleDrafts.length} stale drafts`,
meta: `untouched for ${days} days — archive or finish`,
time: `${days} d`,
act: 'Open',
href: '#campaigns',
});
}
/* Panels whose requests are being rejected (lost pairing token) —
they look alive (offline cache + Fully mirror) while nothing
reaches them. Highest-priority screen problem after an outage. */
(data.screens || []).filter((s) =>
s.device_auth_failed_at &&
(!s.last_heartbeat || new Date(s.device_auth_failed_at) > new Date(s.last_heartbeat))
).slice(0, 2).forEach((s) => {
items.push({
key: `auth-${s.id}`,
tone: 'is-danger',
icon: 'monitor',
title: `${s.name || s.screen_code} needs re-pairing`,
meta: 'device requests rejected — re-pair with the site PIN on the panel',
time: dashRelativeTime(s.device_auth_failed_at).replace(' ago', ''),
act: 'Open',
href: `#screen/${s.screen_code || s.code}`,
});
});
(data.screens || []).filter(screenNeverSeen).slice(0, 2).forEach((s) => {
const since = s.paired_at || s.created_at;
items.push({
key: `never-${s.id}`,
tone: 'is-info',
icon: 'monitor',
title: `${s.name || s.screen_code} has never come online`,
meta: since ? `paired ${dashRelativeTime(since)}, no first heartbeat — check the device` : 'no first heartbeat — check the device',
time: since ? dashRelativeTime(since).replace(' ago', '') : '',
act: 'Diagnose',
href: `#screen/${s.screen_code || s.code}`,
});
});
return items.slice(0, 5);
}
function DashInbox({ data, alertEvents }) {
const loading = data.screens == null || data.campaigns == null || alertEvents == null;
const items = loading ? [] : buildInboxItems(data, alertEvents);
return (
{items.length} }
{loading && (
{[70, 55].map((w, i) => (
))}
)}
{!loading && items.length === 0 && (
Inbox zero
No alerts, approvals, or stale work. Enjoy it.
)}
{!loading && items.map((it) => (
{ if (e.key === 'Enter') dashGo(it.href)(e); }}
>
{it.act}
{it.time ?
{it.time} : null}
))}
);
}
/* ── 5 · Fleet strip — miniature display bezels ────────────────────── */
function DashFleetTile({ screen }) {
const [imgFailed, setImgFailed] = useState(false);
const never = screenNeverSeen(screen);
const online = screenIsOnline(screen);
const stateCls = never ? 'is-waiting' : online ? 'is-online' : 'is-offline';
const hue = dashHue(screen.zone_name || screen.name || screen.id);
const photo = !imgFailed && screen.last_snapshot_url;
const stateLabel = never ? 'Never seen'
: online ? 'Live'
: dashRelativeTime(screen.last_heartbeat || screen.last_seen_at);
return (
{ if (e.key === 'Enter') dashGo(`#screen/${screen.screen_code || screen.code}`)(e); }}
>
{never ? (
) : photo ? (
setImgFailed(true)} />
) : (
)}
{!online && !never &&
No signal
}
{never &&
Awaiting first boot
}
{screen.name || screen.screen_code}
{stateLabel}
{[0, 1, 2, 3, 4].map((i) => (
))}
);
}
if (screens.length === 0) {
return (
);
}
/* Offline first (they need eyes), then never-seen, then online. Cap at
10 — two rows — and let "Open displays" carry the rest. */
const rank = (s) => (screenNeverSeen(s) ? 1 : screenIsOnline(s) ? 2 : 0);
const sorted = [...screens].sort((a, b) => rank(a) - rank(b));
const visible = sorted.slice(0, 10);
return (
);
}
/* ── 6 · Activity — humanized sentences ────────────────────────────── */
const DASH_VERBS = {
create: 'created', update: 'updated', delete: 'deleted',
publish: 'published', unpublish: 'unpublished', approve: 'approved',
reject: 'rejected', invite: 'invited', login: 'signed in',
logout: 'signed out', pair: 'paired', archive: 'archived',
};
function dashEntityLabel(e) {
for (const v of [e.new_value, e.old_value]) {
if (!v) continue;
let obj = v;
if (typeof v === 'string') { try { obj = JSON.parse(v); } catch (_) { continue; } }
const label = obj && (obj.name || obj.title || obj.common_name || obj.email);
if (label) return label;
}
return null;
}
function dashActivityRows(logs) {
const rows = logs.map((e) => {
const actor = e.actor_name
|| (e.user_email ? e.user_email.split('@')[0] : null)
|| 'System';
const verb = DASH_VERBS[e.action] || (e.action || 'touched').replace(/_/g, ' ');
const entity = (e.entity_type || '').replace(/_/g, ' ');
const label = dashEntityLabel(e);
return {
id: e.id,
actor,
isSystem: !e.actor_name && !e.user_email,
sentence: `${verb} ${entity}`,
label,
time: e.created_at || e.time,
};
});
/* Collapse consecutive identical sentences (the old feed showed the
same "update creative" row six times). */
const grouped = [];
for (const r of rows) {
const prev = grouped[grouped.length - 1];
if (prev && prev.actor === r.actor && prev.sentence === r.sentence && prev.label === r.label) {
prev.count += 1;
} else {
grouped.push({ ...r, count: 1 });
}
}
return grouped.slice(0, 6);
}
function RecentActivityCard() {
const [logs, setLogs] = useState(null);
useEffect(() => {
apiFetch('/api/audit?limit=12')
.then((r) => setLogs(r.logs || []))
.catch(() => setLogs([]));
}, []);
return (
{logs === null && (
{[70, 55, 80, 62].map((w, i) => (
))}
)}
{logs !== null && logs.length === 0 && (
No activity yet
This feed fills as your team edits species, campaigns, and screens.
)}
{logs !== null && logs.length > 0 && (
{dashActivityRows(logs).map((r) => (
{r.isSystem ? '⟳' : r.actor.slice(0, 1).toUpperCase()}
{r.actor} {r.sentence}
{r.label ? “{r.label}” : null}
{r.count > 1 ? ×{r.count} : null}
{dashDayTime(r.time)}
))}
)}
);
}
/* ── Org dashboard — Mission Control assembly ──────────────────────── */
function OrgDashboard() {
const { data } = useOrgData();
const { canAnalytics, metrics, alertEvents } = useDashAnalytics();
return (
);
}
/* ── Platform dashboard (aquaos_admin) ─────────────────────────────── */
function usePlatformData() {
const [data, setData] = useState({
orgsTotal: null, sitesTotal: null, speciesTotal: null,
usersTotal: null, pendingGlobal: null, error: null,
});
useEffect(() => {
let cancelled = false;
async function load() {
try {
const stats = await apiFetch('/api/auth/platform/stats').catch(() => null);
if (cancelled) return;
if (!stats) { setData((d) => ({ ...d, error: 'Could not load platform stats' })); return; }
setData((d) => ({
...d,
orgsTotal: Number(stats.orgsTotal) || 0,
sitesTotal: Number(stats.sitesTotal) || 0,
usersTotal: Number(stats.usersTotal) || 0,
speciesTotal: Number(stats.globalSpeciesTotal) || 0,
pendingGlobal: Number(stats.pendingGlobal) || 0,
}));
} catch (err) { if (!cancelled) setData((d) => ({ ...d, error: err.message })); }
}
load();
return () => { cancelled = true; };
}, []);
return data;
}
function PlatformDashboard() {
const data = usePlatformData();
const orgsLine = data.orgsTotal != null ? `${data.orgsTotal} organisation${data.orgsTotal === 1 ? '' : 's'}` : 'orgs loading';
const sitesLine = data.sitesTotal != null ? `${data.sitesTotal} site${data.sitesTotal === 1 ? '' : 's'} provisioned` : '';
const speciesLine = data.speciesTotal != null ? `${data.speciesTotal} species in the catalogue` : '';
const summary = [orgsLine, sitesLine, speciesLine].filter(Boolean).join(' · ');
const pending = data.pendingGlobal || 0;
return (
{/* Hero changes shape with urgency, same rule as the org
dashboard: pending review work promotes to an action card. */}
{pending > 0 ? (
Submitted by member organisations for promotion to the global catalogue.
Review queue
) : (
Nothing pending — the platform is steady.
)}
Fleet Health Digest
live · {todayLong()}
{summary || 'Loading platform totals…'}. {pending > 0
? `${pending} species awaiting platform review for global promotion.`
: 'No emergency broadcasts, connector errors, or pending global species.'}
0 ? `${pending} to review` : 'all caught up'}
subTone={pending > 0 ? 'warn' : null}
href="#global-species" />
{data.error &&
}
);
}
function PlatformOrgsCard() {
const [orgs, setOrgs] = useState([]);
useEffect(() => {
apiFetch('/api/auth/platform/organisations')
.then((r) => setOrgs((r.organisations || []).slice(0, 6)))
.catch(() => {});
}, []);
return (
{orgs.length === 0 && (
No organisations yet
Create your first organisation to start onboarding sites and users.
)}
{orgs.map((o) => (
{(o.name || '?').slice(0, 1).toUpperCase()}
{o.name}
{o.site_count || 0} site{o.site_count === 1 ? '' : 's'} · {o.user_count || 0} users · {o.species_count || 0} species
Enter
))}
);
}
/* ── Operator dashboard — read-only, gets the live fleet ───────────── */
function OperatorDashboard() {
const me = Auth.getUser() || {};
const siteName = (me.sites && me.sites[0] && me.sites[0].name) || 'your site';
const [screens, setScreens] = useState(null);
useEffect(() => {
apiFetchSiteScoped('/api/screens')
.then((r) => setScreens(r.screens || []))
.catch(() => setScreens([]));
}, []);
const list = screens || [];
const onlineCount = list.filter(screenIsOnline).length;
return (
0 && onlineCount < list.length ? 'var(--aq-warn)' : 'var(--aq-success)',
boxShadow: `0 0 14px ${list.length > 0 && onlineCount < list.length ? 'var(--aq-warn)' : 'var(--aq-success)'}`,
}} />
{screens == null ? 'Checking screens…' : `${onlineCount}/${list.length} screens online`}
Read-only access
·
Browse screens and the species library
);
}
/* ── Designer / marketing landings ─────────────────────────────────── */
function DesignerDashboard() {
const me = Auth.getUser() || {};
return (
Campaigns + media at your fingertips
);
}
function MarketingDashboard() {
/* Marketing admins want the org-shape dashboard so they see live
campaigns + screen health alongside their templates and media. */
return
{body}
);
}
/* ── Top-level switch — picks the right variant per role. ─────────── */
function Dashboard() {
const u = Auth.getUser() || {};
const role = u.role;
if (role === 'aquaos_admin') return 
setImgFailed(true)} />
) : (
)}
{!online && !never &&