// ATLAS Accounts Email Agent — ui.jsx
// Shared UI primitives
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ── Icons ────────────────────────────────────────────────────────────────────
const Icons = {
inbox: p => ,
check: p => ,
money: p => ,
chart: p => ,
settings: p => ,
refresh: p => ,
plus: p => ,
trash: p => ,
edit: p => ,
download: p => ,
alert: p => ,
folder: p => ,
clip: p => ,
spin: p => ,
sparkle: p => ,
copy: p => ,
};
// ── Category colour map ───────────────────────────────────────────────────────
const CAT_COLORS = {
invoice: { bg: '#dbeafe', color: '#1d4ed8', border: '#bfdbfe' },
statement: { bg: '#e0e7ff', color: '#4338ca', border: '#c7d2fe' },
docket: { bg: '#d1fae5', color: '#065f46', border: '#a7f3d0' },
'urgent-payment':{ bg: '#fee2e2', color: '#991b1b', border: '#fecaca' },
'supplier-query':{ bg: '#fef3c7', color: '#92400e', border: '#fde68a' },
'route-fleet': { bg: '#cffafe', color: '#155e75', border: '#a5f3fc' },
'route-estimator':{ bg:'#f3e8ff', color: '#6b21a8', border: '#e9d5ff' },
'route-hr': { bg: '#fce7f3', color: '#9d174d', border: '#fbcfe8' },
'route-other': { bg: '#f1f5f9', color: '#475569', border: '#e2e8f0' },
noise: { bg: '#f3f4f6', color: '#6b7280', border: '#e5e7eb' },
};
function catStyle(cat) {
return CAT_COLORS[cat] || { bg: '#f3f4f6', color: '#374151', border: '#e5e7eb' };
}
// ── Badge ─────────────────────────────────────────────────────────────────────
function Badge({ children, cat, kind }) {
const s = cat ? catStyle(cat) : { bg: '#f3f4f6', color: '#374151', border: '#e5e7eb' };
return (
{children}
);
}
// ── Confidence pill ───────────────────────────────────────────────────────────
function ConfPill({ value }) {
const color = value >= 85 ? '#16a34a' : value >= 65 ? '#d97706' : '#dc2626';
const bg = value >= 85 ? '#f0fdf4' : value >= 65 ? '#fffbeb' : '#fef2f2';
return (
{value}%
);
}
// ── Modal ─────────────────────────────────────────────────────────────────────
function Modal({ onClose, children, title, wide }) {
useEffect(() => {
const h = e => e.key === 'Escape' && onClose();
document.addEventListener('keydown', h);
return () => document.removeEventListener('keydown', h);
}, [onClose]);
return (
e.target === e.currentTarget && onClose()}>
{title && (
{title}
)}
{children}
{body}
);
}
// ── Toast ─────────────────────────────────────────────────────────────────────
function Toast({ msg, onRemove }) {
useEffect(() => { const t = setTimeout(onRemove, 3500); return () => clearTimeout(t); }, []);
return (
{msg}
);
}
function ToastHost({ toasts, remove }) {
return (
{toasts.map(t => remove(t.id)} />)}
);
}
// ── api helper ────────────────────────────────────────────────────────────────
const api = {
async get(path) {
const r = await fetch(path);
if (!r.ok) throw new Error(await r.text());
return r.json();
},
async _send(method, path, body) {
const r = await fetch(path, {
method,
headers: { 'Content-Type': 'application/json' },
body: body !== undefined ? JSON.stringify(body) : undefined,
});
if (!r.ok) { const t = await r.text(); throw new Error(t); }
if (r.status === 204) return { ok: true };
const text = await r.text();
if (!text) return { ok: true };
try { return JSON.parse(text); } catch { return { ok: true }; }
},
post: (p, b) => api._send('POST', p, b),
patch: (p, b) => api._send('PATCH', p, b),
put: (p, b) => api._send('PUT', p, b),
delete: (p) => api._send('DELETE', p),
};
// ── formatters ────────────────────────────────────────────────────────────────
function fmtDate(d) {
if (!d) return '—';
return new Date(d).toLocaleDateString('en-AU', { day:'numeric', month:'short', year:'numeric' });
}
function fmtAmt(n) {
if (n == null || n === '') return '—';
return '$' + Number(n).toLocaleString('en-AU', { minimumFractionDigits:2, maximumFractionDigits:2 });
}
function fmtCatLabel(cat) {
const map = {
invoice:'Invoice', statement:'Statement', docket:'Docket',
'urgent-payment':'Urgent Payment', 'supplier-query':'Supplier Query',
'route-fleet':'→ Fleet', 'route-estimator':'→ Estimator',
'route-hr':'→ HR', 'route-other':'→ Other', noise:'Noise',
};
return map[cat] || cat;
}
// Expose everything
Object.assign(window, {
Icons, Badge, ConfPill, Modal, ConfirmDialog, Toast, ToastHost, api,
catStyle, fmtDate, fmtAmt, fmtCatLabel, CAT_COLORS,
useState, useEffect, useRef, useMemo, useCallback,
});