{open &&
}
{open && selectedCount > 0 && (
Apply to {selectedCount} selected
)}
);
}
/* ——— Summary strip ——— */
function SummaryStrip({ alerts, resolvedThisSession }) {
const open = alerts.filter(a => a.status === 'open');
const newRecent = alerts.filter(a => ageHours(a.age) <= 24);
const acked = alerts.filter(a => a.status === 'acked');
const totalStores = (window.MISE && window.MISE.stores) ? window.MISE.stores.length : 0;
const storesWithOpen = new Set(open.map(a => a.num)).size;
const worstSev = open.some(a => a.sev === 'red') ? 'red'
: open.some(a => a.sev === 'amber') ? 'amber'
: 'green';
return (
New since yesterday
{newRecent.length}
{newRecent.length > 0 &&
+{newRecent.length}}
Resolved this session
{resolvedThisSession}
{resolvedThisSession > 0 ? '✓' : '—'}
Stores w/ open alerts
{storesWithOpen} / {totalStores}
);
}
/* ——— Filter / view bar ——— */
const TABS = [
{ id: 'all', label: 'All', count: 8 },
{ id: 'crit', label: 'Critical', count: 4 },
{ id: 'food', label: 'Food Safety', count: 3 },
{ id: 'lab', label: 'Labor', count: 3 },
{ id: 'aud', label: 'Audits', count: 2 },
{ id: 'sales',label: 'Sales', count: 1 },
];
function FilterPill({ label, value, options, onChange }) {
const [open, setOpen] = React.useState(false);
const current = options.find(o => o.id === value) || options[0];
return (
{open &&
setOpen(false)}/>}
{open && (
{label}
{options.map(o => (
{ onChange(o.id); setOpen(false); }}>
{o.id === value &&
✓}
))}
)}
);
}
function FilterBar({ alerts, tab, setTab, view, setView, filters, setFilters, search, setSearch, tabCounts, onRefresh, refreshing, scanStatus }) {
const set = (k) => (v) => setFilters(f => ({ ...f, [k]: v }));
const storeOptions = [
{ id: 'any', title: 'Any store' },
...Array.from(new Set(alerts.map(a => a.num))).map(num => {
const s = alerts.find(a => a.num === num);
return { id: num, title: `${num} ${s.store}` };
}),
];
return (
{TABS.map(t => (
))}
);
}
function ageHours(s) {
const m = String(s || '').match(/(\d+)\s*(m|h|d)/);
if (!m) return 0;
const n = Number(m[1]);
if (m[2] === 'm') return n / 60;
if (m[2] === 'h') return n;
if (m[2] === 'd') return n * 24;
return 0;
}
function applyAlertFilters(rows, { tab, filters, search }) {
const q = search.trim().toLowerCase();
const tabMap = { crit: 'red', food: 'Food Safety', lab: 'Labor', aud: 'Audit', sales: 'Sales' };
return rows.filter(a => {
if (tab === 'crit' && a.sev !== 'red') return false;
if (tab === 'food' && a.type !== 'Food Safety') return false;
if (tab === 'lab' && a.type !== 'Labor') return false;
if (tab === 'aud' && a.type !== 'Audit') return false;
if (tab === 'sales'&& a.type !== 'Sales') return false;
if (filters.severity !== 'any' && a.sev !== filters.severity) return false;
if (filters.store !== 'any' && a.num !== filters.store) return false;
if (filters.status !== 'any' && a.status !== filters.status) return false;
if (filters.time !== 'any') {
const h = ageHours(a.age);
const cap = filters.time === '1h' ? 1 : filters.time === '24h' ? 24 : 24 * 7;
if (h > cap) return false;
}
if (q && !(a.title.toLowerCase().includes(q) || a.store.toLowerCase().includes(q) || a.type.toLowerCase().includes(q))) return false;
return true;
});
}
/* ——— Alerts list (live, AI-generated from POST /alerts/scan) ——— */
const API_BASE = (typeof window !== 'undefined' && window.MISE_API_BASE) || 'http://localhost:8080';
/** Compact "Audited Xm ago" pill for the FilterBar. Shares semantics
* with the equivalent component on the Stores page so freshness
* reads the same everywhere — green within ~36h, amber for staler,
* red on the last scan having errored. */
function AuditFreshnessPill({ status }) {
const last = status?.lastScannedAt ? new Date(status.lastScannedAt) : null;
const label = last ? `Audited ${formatRelativeAlerts(last)}` : 'Audit not yet run';
const tone =
status?.lastStatus === 'error' ? 'err'
: !last ? 'muted'
: (Date.now() - last.getTime()) > 36 * 3600 * 1000 ? 'stale'
: 'ok';
return (
{label}
);
}
function formatRelativeAlerts(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`;
}
async function fetchAlerts(refresh) {
const res = await fetch(`${API_BASE}/alerts/scan${refresh ? '?refresh=true' : ''}`, {
method: 'POST',
cache: 'no-store',
});
if (!res.ok) {
const text = await res.text();
throw new Error(`${res.status}: ${text || res.statusText}`);
}
return res.json();
}
async function setAlertStatusBackend(id, status) {
const res = await fetch(`${API_BASE}/alerts/${encodeURIComponent(id)}/status`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ status }),
});
if (!res.ok) {
throw new Error(`${res.status}: ${await res.text() || res.statusText}`);
}
}
function draftSlackMessage(alert) {
const emoji = alert.sev === 'red' ? '🚨' : alert.sev === 'amber' ? '⚠️' : 'ℹ️';
const cite = (alert.citations && alert.citations[0]);
const citeLine = cite
? `\n_Source: ${cite.documentTitle}${cite.sectionPath ? ` — ${cite.sectionPath}` : ''}_`
: '';
return `${emoji} *${alert.sevLbl} · ${alert.num} ${alert.store}*\n` +
`${alert.title}\n\n` +
(alert.explanation ? `${alert.explanation}\n\n` : '') +
(alert.recommendedAction ? `*Recommended:* ${alert.recommendedAction}` : '') +
citeLine;
}
function SlackSendModal({ alert, onClose, onSent }) {
const [status, setStatus] = React.useState(null);
const [channels, setChannels] = React.useState([]);
const [channelId, setChannelId] = React.useState('');
const [text, setText] = React.useState('');
const [busy, setBusy] = React.useState(false);
const [error, setError] = React.useState(null);
React.useEffect(() => {
if (!alert) return;
setText(draftSlackMessage(alert));
setError(null);
setBusy(true);
fetch(`${API_BASE}/slack/workspace`, { cache: 'no-store' })
.then(r => r.ok ? r.json() : null)
.then(s => {
setStatus(s);
if (s?.connected) {
setChannelId(s.defaultChannelId || '');
fetch(`${API_BASE}/slack/channels`, { cache: 'no-store' })
.then(r => r.ok ? r.json() : [])
.then(setChannels)
.catch(() => setChannels([]));
}
})
.catch(() => setStatus(null))
.finally(() => setBusy(false));
}, [alert]);
if (!alert) return null;
const send = async () => {
if (!channelId || !text.trim()) return;
setBusy(true);
setError(null);
try {
const res = await fetch(`${API_BASE}/slack/post`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ channel: channelId, text: text.trim() }),
});
if (!res.ok) throw new Error(`${res.status}: ${await res.text() || res.statusText}`);
const channelName = channels.find(c => c.id === channelId)?.name || channelId;
onSent && onSent(channelName);
onClose();
} catch (e) {
setError(e.message || String(e));
} finally { setBusy(false); }
};
const copy = async () => {
try { await navigator.clipboard.writeText(text); onSent && onSent('clipboard'); onClose(); }
catch (e) { setError('Clipboard blocked: ' + e.message); }
};
return (
e.stopPropagation()} style={{
background: 'var(--bg)', borderRadius: 12, padding: 24, width: 540, maxWidth: '92vw',
maxHeight: '85vh', display: 'flex', flexDirection: 'column',
boxShadow: '0 20px 60px rgba(11,27,38,.25)', border: '1px solid var(--hair)',
}}>
Send to Slack
{alert.num} {alert.store}
{!status?.configured && (
Slack credentials aren't configured on the server. An admin needs to add them before "Send to Slack" can work.
)}
{status?.configured && !status.connected && (
)}
{status?.connected && (
<>