{open &&
setOpen(false)}/>}
setOpen(o => !o)}>
{range.id === 'today' ? 'Today' : 'Range'}
{range.title === 'Today' ? range.meta : range.title}
{open && (
Date range
{DATE_RANGES.map(r => (
{ setRangeId(r.id); setOpen(false); }}>
{r.title}
{r.meta &&
{r.meta}
}
{r.id === rangeId &&
✓ }
))}
)}
);
}
/* ——— Brief banner ——— */
/* Render bold (**...**) inside an otherwise plain markdown line as
* React children. Keeps the renderer from pulling in a markdown lib. */
function renderInline(line) {
const parts = [];
let i = 0;
let key = 0;
const re = /\*\*([^*]+)\*\*/g;
let m;
while ((m = re.exec(line)) !== null) {
if (m.index > i) parts.push(line.slice(i, m.index));
parts.push(
{m[1]} );
i = m.index + m[0].length;
}
if (i < line.length) parts.push(line.slice(i));
return parts;
}
/* Parse the brief body produced by DailyBriefService into the bucket
* shape the dashboard renders. The composer's prompt locks the
* structure to `## Lead` / `## Watch` / `## Rollup` with bullets, so
* a tiny parser is cheaper than pulling in react-markdown. */
function parseBriefBody(md) {
const out = { lead: [], watch: [], rollup: '' };
if (!md) return out;
const lines = md.split(/\r?\n/);
let bucket = null;
let rollupParts = [];
for (const raw of lines) {
const line = raw.trim();
if (!line) continue;
const heading = /^##\s+(.*)$/.exec(line);
if (heading) {
const h = heading[1].toLowerCase();
if (h.startsWith('lead')) bucket = 'lead';
else if (h.startsWith('watch')) bucket = 'watch';
else if (h.startsWith('rollup')) bucket = 'rollup';
else bucket = null;
continue;
}
const bullet = /^[-*]\s+(.*)$/.exec(line);
if (bullet) {
const text = bullet[1].trim();
// The composer writes "- None" for an empty bucket. Don't
// render that as a real bullet — it'd produce an awkward
// amber/red row that says "None".
const isPlaceholder = /^(none|nothing|n\/a|no items?|no critical items? overnight\.?)$/i.test(text);
if (isPlaceholder) continue;
if (bucket === 'lead' || bucket === 'watch') {
out[bucket].push(text);
} else if (bucket === 'rollup') {
rollupParts.push(text);
}
continue;
}
if (bucket === 'rollup') rollupParts.push(line);
}
out.rollup = rollupParts.join(' ').trim();
return out;
}
function Brief() {
const [state, setState] = React.useState('loading'); // 'loading' | 'empty' | 'ok' | 'error'
const [brief, setBrief] = React.useState(null);
const [error, setError] = React.useState(null);
const [running, setRunning] = React.useState(false);
const refresh = React.useCallback(() => {
setState('loading');
fetch(`${DASH_API_BASE}/daily-brief/latest`, { cache: 'no-store' })
.then(r => {
if (r.status === 204) { setBrief(null); setState('empty'); return null; }
if (!r.ok) return Promise.reject(new Error(`${r.status}`));
return r.json();
})
.then(d => { if (d) { setBrief(d); setState('ok'); } })
.catch(e => { setError(e.message || String(e)); setState('error'); });
}, []);
React.useEffect(refresh, [refresh]);
async function generate() {
setRunning(true);
setError(null);
try {
const r = await fetch(`${DASH_API_BASE}/daily-brief/run-now`, { method: 'POST' });
if (!r.ok) throw new Error(`${r.status}`);
const d = await r.json();
setBrief(d);
setState('ok');
} catch (e) {
setError(e.message || String(e));
setState('error');
} finally {
setRunning(false);
}
}
const formatDate = (s) => {
if (!s) return '';
try {
const d = new Date(s);
return d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
} catch { return s; }
};
const formatTime = (s) => {
if (!s) return '';
try {
const d = new Date(s);
return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
} catch { return ''; }
};
const headTitle = brief
? formatDate(brief.generatedForDate)
: (state === 'loading' ? 'Loading…' : 'No brief yet');
return (
Your morning brief — {headTitle}
{brief && (
GENERATED {formatTime(brief.generatedAt) || '—'} · {String(brief.trigger || 'auto').toUpperCase()}
)}
Schedule →
{state === 'loading' && (
Loading latest brief…
)}
{state === 'error' && (
Couldn't load the brief: {error}.{' '}
Retry
)}
{state === 'empty' && (
No brief generated yet today. The next scheduled run will fire at the configured time —{' '}
change the schedule {' '}
or{' '}
{running ? 'composing…' : 'compose one now'} .
)}
{state === 'ok' && brief && (() => {
const parsed = parseBriefBody(brief.bodyMd);
const rows = [];
for (const item of parsed.lead) {
rows.push({ sev: 'red', text: item });
}
for (const item of parsed.watch) {
rows.push({ sev: 'amber', text: item });
}
if (parsed.rollup) {
rows.push({ sev: 'green', text: parsed.rollup });
}
if (rows.length === 0) {
// The LLM produced something we can't parse — fall back to
// raw markdown rendered as preformatted text. Better than
// an empty card.
return (
{brief.bodyMd}
);
}
return (
{rows.map((r, i) => (
))}
);
})()}
);
}
/* ——— Sparkline (interactive) ——— */
const DAY_LABELS = ['Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'];
function Spark({ data, color = 'var(--primary)', baseline, format = (v) => v, daysBack = 6, fillEnabled = true, mode = 'line', onHover, hoverIdx }) {
const W = 200, H = 36, padX = 4, padY = 4;
const wrapRef = React.useRef(null);
const min = Math.min(...data), max = Math.max(...data);
const range = max - min || 1;
const xAt = (i) => padX + (i / (data.length - 1)) * (W - padX * 2);
const yAt = (v) => H - padY - ((v - min) / range) * (H - padY * 2);
const pts = data.map((v, i) => `${xAt(i)},${yAt(v)}`).join(' ');
const areaD = `M ${xAt(0)} ${H} L ${data.map((v, i) => `${xAt(i)} ${yAt(v)}`).join(' L ')} L ${xAt(data.length - 1)} ${H} Z`;
const isBars = mode === 'bars';
const barW = ((W - padX * 2) / data.length) * 0.62;
function handleMove(e) {
const rect = wrapRef.current.getBoundingClientRect();
const x = e.clientX - rect.left;
const ratio = Math.max(0, Math.min(1, x / rect.width));
const idx = Math.round(ratio * (data.length - 1));
onHover && onHover(idx);
}
function handleLeave() { onHover && onHover(null); }
const i = hoverIdx;
const tipVisible = i != null && i >= 0 && i < data.length;
const tipX = tipVisible ? (xAt(i) / W) * 100 : 0;
const tipDayLabel = tipVisible ? DAY_LABELS[(DAY_LABELS.length - data.length + i + DAY_LABELS.length) % DAY_LABELS.length] : '';
return (
{[0, 1, 2].map(k => (
{tipVisible && (
{format(data[i])}
{tipDayLabel}
)}
);
}
/* ——— KPI strip ——— */
const useTweaks = (d) => [d, () => {}];
const TweaksPanel = () => null;
const TweakSection = () => null;
const TweakRadio = () => null;
const TweakToggle = () => null;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"sparkMode": "line",
"sparkFill": true,
"showBaselines": true
}/*EDITMODE-END*/;
function KPIs() {
const [tw] = useTweaks(TWEAK_DEFAULTS);
// Live aggregates pulled from /stores/list (sales/labor/food-safety
// per store) + /alerts/scan (open alert count org-wide). The 4 KPIs
// were previously hardcoded numbers + sparklines; now everything you
// see updates with the data.
const [storeRows, setStoreRows] = React.useState([]);
const [alertCount, setAlertCount] = React.useState(null);
const [loaded, setLoaded] = React.useState(false);
React.useEffect(() => {
let cancelled = false;
const refresh = () => Promise.all([
fetch(`${DASH_API_BASE}/stores/list`, { cache: 'no-store' })
.then(r => r.ok ? r.json() : [])
.catch(() => []),
fetch(`${DASH_API_BASE}/alerts/scan`, { method: 'POST', cache: 'no-store' })
.then(r => r.ok ? r.json() : [])
.catch(() => []),
]).then(([rows, alerts]) => {
if (cancelled) return;
setStoreRows(Array.isArray(rows) ? rows : []);
const open = (Array.isArray(alerts) ? alerts : []).filter(a => a.status === 'open');
setAlertCount(open.length);
setLoaded(true);
});
refresh();
const unsub = window.MISE && window.MISE.subscribeAlerts
? window.MISE.subscribeAlerts(refresh) : null;
return () => { cancelled = true; unsub && unsub(); };
}, []);
const kpis = React.useMemo(() => {
// Sales · this week (sum across stores, with 7-day spark from each
// store's sparkDaily aligned by index).
const thisWeek = storeRows.reduce((s, r) => s + (r.sales?.thisWeekDollars || 0), 0);
const priorWeek = storeRows.reduce((s, r) => s + (r.sales?.priorWeekDollars || 0), 0);
const salesSpark = Array(7).fill(0);
for (const r of storeRows) {
const spark = (r.sales && r.sales.sparkDaily) || [];
for (let i = 0; i < Math.min(7, spark.length); i++) salesSpark[i] += spark[i] || 0;
}
const salesDelta = priorWeek > 0 ? ((thisWeek - priorWeek) * 100 / priorWeek) : 0;
// Avg labor variance % (only stores with labor data — empty stores
// would otherwise drag the average to 0 and lie about performance).
const laborStores = storeRows.filter(r => r.hasLaborData && r.labor);
const avgVar = laborStores.length === 0 ? 0
: laborStores.reduce((s, r) => s + (r.labor.thisWeekVarianceAbsPct || 0), 0) / laborStores.length;
const avgPriorVar = laborStores.length === 0 ? 0
: laborStores.reduce((s, r) => s + (r.labor.priorWeekVarianceAbsPct || 0), 0) / laborStores.length;
// Food-safety compliant — count of stores whose recorded compliance
// is ≥95%. Stores with no value recorded count as non-compliant
// (encourages the operator to fill them in rather than letting
// blanks inflate the number).
const totalStores = storeRows.length;
const compliant = storeRows.filter(r => (r.foodSafetyCompliancePct || 0) >= 95).length;
const avgCompliance = totalStores === 0 ? 0
: storeRows.reduce((s, r) => s + (r.foodSafetyCompliancePct || 0), 0) / totalStores;
// Sparks for non-time-series KPIs are flat lines at the current
// value — honest about lack of historical data without dropping the
// visual.
const flat = (v) => Array(7).fill(v);
return [
{
lbl: 'Total sales · this wk',
val: thisWeek > 0 ? `$${Math.round(thisWeek).toLocaleString()}` : '—',
trend: priorWeek > 0
? { dir: salesDelta >= 0 ? 'up' : 'down',
txt: `${salesDelta >= 0 ? '+' : ''}${salesDelta.toFixed(1)}%`,
tone: salesDelta >= 0 ? 'green' : 'red' }
: { dir: 'up', txt: '—', tone: 'gray' },
cmp: 'vs prior 7 days',
spark: salesSpark.length === 7 && salesSpark.some(v => v > 0) ? salesSpark : flat(thisWeek / 7),
sparkColor: 'var(--primary)',
fmt: v => `$${Math.round(v).toLocaleString()}`,
},
{
lbl: 'Avg labor variance · this wk',
val: laborStores.length > 0 ? avgVar.toFixed(1) : '—',
sub: laborStores.length > 0 ? '%' : null,
trend: laborStores.length > 0
? { dir: avgVar - avgPriorVar <= 0 ? 'down' : 'up',
txt: `${avgVar - avgPriorVar >= 0 ? '+' : ''}${(avgVar - avgPriorVar).toFixed(1)}pt`,
tone: avgVar - avgPriorVar <= 0 ? 'green' : 'red' }
: { dir: 'up', txt: '—', tone: 'gray' },
cmp: 'vs prior 7 days',
spark: flat(avgVar),
sparkColor: 'var(--primary)',
baseline: 0,
fmt: v => `${v.toFixed(1)}%`,
},
{
lbl: 'Stores compliant · food safety',
val: totalStores > 0 ? String(compliant) : '—',
sub: totalStores > 0 ? `of ${totalStores}` : null,
trend: { dir: compliant === totalStores ? 'up' : 'down',
txt: totalStores > 0 ? `${avgCompliance.toFixed(1)}% avg` : '—',
tone: compliant === totalStores ? 'green' : (compliant / Math.max(1, totalStores) >= 0.7 ? 'amber' : 'red') },
cmp: '≥95% threshold',
spark: flat(compliant),
sparkColor: 'var(--red)',
fmt: v => `${v} / ${totalStores}`,
},
{
lbl: 'Open alerts',
val: alertCount == null ? '—' : String(alertCount),
trend: { dir: 'up',
txt: alertCount == null ? '—' : (alertCount === 0 ? 'all clear' : `${alertCount} action${alertCount === 1 ? '' : 's'}`),
tone: alertCount === 0 ? 'green' : (alertCount > 5 ? 'red' : 'amber') },
cmp: 'across all stores',
spark: flat(alertCount || 0),
sparkColor: 'var(--amber)',
fmt: v => `${v} open`,
},
];
}, [storeRows, alertCount]);
const [hovered, setHovered] = React.useState({});
const setHover = (i, idx) => setHovered(h => ({ ...h, [i]: idx }));
return (
{kpis.map((k, i) => (
{k.lbl}
{!loaded ? '…' : k.val}{k.sub && {k.sub} }
{k.trend.dir === 'up' ? '↑' : '↓'} {k.trend.txt}
{k.cmp}
setHover(i, idx)}
/>
))}
);
}
function Tweaks() {
const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
return (
setTweak('sparkMode', v)}/>
setTweak('sparkFill', v)}/>
setTweak('showBaselines', v)}/>
);
}
/* ——— Active alerts ——— */
const DASH_API_BASE = (typeof window !== 'undefined' && window.MISE_API_BASE) || 'http://localhost:8080';
const SEV_RANK = { red: 0, amber: 1, green: 2, gray: 3 };
function formatRelativeDash(date) {
const ms = Date.now() - date.getTime();
if (ms < 60_000) return 'just now';
const m = Math.floor(ms / 60_000);
if (m < 60) return `${m}m ago`;
const h = Math.floor(m / 60);
if (h < 48) return `${h}h ago`;
const d = Math.floor(h / 24);
return `${d}d ago`;
}
function ActiveAlerts() {
const [alerts, setAlerts] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState(null);
const [scanStatus, setScanStatus] = React.useState(null);
const refreshScanStatus = React.useCallback(() => {
return fetch(`${DASH_API_BASE}/alerts/scan/status`, { cache: 'no-store' })
.then(r => r.ok ? r.json() : null)
.then(setScanStatus)
.catch(() => setScanStatus(null));
}, []);
React.useEffect(() => {
let cancelled = false;
(async () => {
try {
const res = await fetch(`${DASH_API_BASE}/alerts/scan`, { method: 'POST', cache: 'no-store' });
if (!res.ok) throw new Error(`${res.status}: ${await res.text() || res.statusText}`);
const data = await res.json();
if (cancelled) return;
setAlerts(data);
refreshScanStatus();
} catch (e) {
if (!cancelled) setError(e.message || String(e));
} finally {
if (!cancelled) setLoading(false);
}
})();
return () => { cancelled = true; };
}, [refreshScanStatus]);
const ack = async (id) => {
const previous = alerts;
setAlerts(curr => curr.map(a => a.id === id ? { ...a, status: 'acked' } : a));
try {
const res = await fetch(`${DASH_API_BASE}/alerts/${encodeURIComponent(id)}/status`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ status: 'acked' }),
});
if (!res.ok) throw new Error(String(res.status));
window.MISE.notifyAlertsChanged();
} catch (e) {
console.warn('dashboard ack failed', e);
setAlerts(previous);
}
};
// If the user acks/resolves on /alerts in another tab and comes back,
// the dashboard should pick up the change too.
React.useEffect(() => {
const refresh = async () => {
try {
const data = await window.MISE.fetchAlertsCached();
setAlerts(data);
} catch {}
};
return window.MISE.subscribeAlerts(refresh);
}, []);
const open = alerts.filter(a => a.status === 'open');
const top = [...open].sort((a, b) => (SEV_RANK[a.sev] ?? 9) - (SEV_RANK[b.sev] ?? 9)).slice(0, 5);
return (
Active alerts {loading ? '…' : open.length}
Live from the AI compliance auditor · sorted by severity
{scanStatus?.lastScannedAt ? (
<>
{' · '}
audited {formatRelativeDash(new Date(scanStatus.lastScannedAt))}
) : null}
{loading &&
Running compliance auditor…
}
{error &&
Failed to load alerts: {error}
}
{!loading && !error && top.length === 0 && (
No open alerts. Everything looks compliant.
)}
{top.map(a => (
{ window.location.href = `/alerts?id=${encodeURIComponent(a.id)}`; }}
>
{a.age}
{ e.stopPropagation(); ack(a.id); }}
disabled={a.status === 'acked'}
>{a.status === 'acked' ? '✓ Acked' : 'Ack'}
))}
);
}
/* ——— Stores at risk ——— */
function segsForScore(composite) {
// 10-segment bar: each cell is 10pts of the composite.
const filled = Math.round((composite || 0) / 10);
const out = [];
for (let i = 0; i < 10; i++) {
if (i >= filled) out.push('empty');
else if (i < 6) out.push('r');
else if (i < 8) out.push('a');
else out.push('g');
}
return out;
}
function StoresAtRisk() {
const [scores, setScores] = React.useState({});
React.useEffect(() => {
const refresh = () => fetch(`${DASH_API_BASE}/stores/scores`, { cache: 'no-store' })
.then(r => r.ok ? r.json() : {})
.then(setScores)
.catch(() => setScores({}));
refresh();
if (window.MISE && window.MISE.subscribeAlerts) {
return window.MISE.subscribeAlerts(refresh);
}
}, []);
// Stores in the at-risk bands only. "At risk" here = composite < 80
// (red/amber zones). Healthy stores (≥80) and pending stores (no
// live data → null composite) are excluded — surfacing a B/A store
// under "at risk" is misleading, and pending stores aren't risky,
// they're unmeasured.
const byNum = new Map(window.MISE.stores.map(s => [s.num, s]));
const allScored = Object.entries(scores).filter(([, s]) => s.composite != null);
const atRisk = allScored
.filter(([, s]) => s.composite < 80)
.map(([num, s]) => {
const meta = byNum.get(num) || {};
return {
num,
name: (meta.name || num).replace(/^Wingstop\s+/, ''),
city: meta.city || '—',
score: s.composite,
zone: s.healthZone,
segs: segsForScore(s.composite),
};
})
.sort((a, b) => a.score - b.score)
.slice(0, 5);
const segCls = (s) => s === 'empty' ? 'empty' : s;
// Loading vs. all-clear vs. populated. Loading is only true on the
// very first render before /stores/scores resolves; after that the
// map is at least an empty object.
const loading = !scores || Object.keys(scores).length === 0;
return (
Stores at risk
Composite below 80 — audit, food safety, labor, open alerts
All →
{loading && (
Loading scores…
)}
{!loading && atRisk.length === 0 && (
No stores in the at-risk bands right now. {allScored.length > 0 && (
<>{allScored.length} store{allScored.length === 1 ? '' : 's'} scoring B or higher.
)}
)}
{atRisk.map((s) => (
{ window.location.href = `/stores/${s.num.replace('#', '')}`; }}
>
{s.num} {s.name}
{s.city}
{s.segs.map((seg, j) => )}
{s.score}
{s.zone === 'red' ? '↓' : s.zone === 'green' ? '↑' : '·'}
))}
);
}
/* ——— Activity timeline ——— */
function ActivityTimeline() {
// Live activity: alerts acknowledged/resolved/snoozed/assigned, brief
// generations, scan completions. Backend is authoritative; the
// timeline visual is just a horizontal day-axis projection of those
// rows. Empty state when nothing has been logged today.
const [events, setEvents] = React.useState(null);
const [error, setError] = React.useState(null);
const refresh = React.useCallback(() => {
fetch(`${DASH_API_BASE}/activity?limit=100`, { cache: 'no-store' })
.then(r => r.ok ? r.json() : Promise.reject(new Error(`${r.status}`)))
.then(setEvents)
.catch(e => setError(e.message || String(e)));
}, []);
React.useEffect(() => {
refresh();
// Re-fetch whenever an alert action touches the cache — those
// emit activity rows so the timeline should reflect them.
const unsub = window.MISE && window.MISE.subscribeAlerts
? window.MISE.subscribeAlerts(refresh)
: null;
return () => { if (unsub) unsub(); };
}, [refresh]);
const [hovered, setHovered] = React.useState(null);
// Project today's local-day window (00:00 → 23:59 in browser zone)
// onto a 6 AM → midnight axis so morning briefs at 6:30 land near
// the left edge and afternoon activity stretches right.
const startH = 6, endH = 22;
const span = endH - startH;
const pct = (h) => Math.max(0, Math.min(100, ((h - startH) / span) * 100));
const labelFor = (h) => h === 0 ? '12 AM' : h === 12 ? '12 PM' : h < 12 ? `${h} AM` : `${h - 12} PM`;
const hours = [6, 9, 12, 15, 18, 21];
// Hour-of-day for "now" in the user's zone — mark on the axis.
const now = new Date();
const nowH = now.getHours() + now.getMinutes() / 60;
// Filter to today's events and project to hour-of-day. Activity
// events the API returned outside today's window are dropped here.
const todayStart = new Date();
todayStart.setHours(0, 0, 0, 0);
const projected = (events || [])
.map(e => {
const ts = new Date(e.occurredAt);
return { ...e, _ts: ts, _h: ts.getHours() + ts.getMinutes() / 60 };
})
.filter(e => e._ts >= todayStart);
const counts = {
rules: projected.filter(e => e.kind === 'scan.completed').length,
alerts: projected.filter(e => e.kind && e.kind.startsWith('alert.')).length,
briefs: projected.filter(e => e.kind === 'brief.composed').length,
};
const fmtTime = (d) => d.toLocaleTimeString('en-US',
{ hour: 'numeric', minute: '2-digit' });
if (events === null && !error) {
return (
Today's activity
Loading activity…
);
}
if (error) {
return (
Today's activity
Couldn't load activity: {error}
);
}
return (
Today's activity
Brief generations, scan completions, alert actions · since 12:00 AM
{projected.length} events{counts.rules} scans{counts.alerts} alert actions{counts.briefs} briefs
{projected.length === 0 ? (
Nothing logged yet today. Activity appears here as scans complete, alerts get acted on, and briefs generate.
) : (
{hours.map(h => (
{labelFor(h)}
))}
{projected.map((e, i) => (
setHovered(i)}
onMouseLeave={() => setHovered(h => h === i ? null : h)}
>
{hovered === i && (
{fmtTime(e._ts)}
{e.storeNum ? ` · ${e.storeNum}` : ''}
{e.title}
{e.detail && (
{e.detail}
)}
)}
))}
)}
Hover any marker for detail
);
}
/* ——— App ——— */
function App() {
return (
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);