);
}
// ---- Contextual quick-create shortcut (press C or N) ----------------
// The active screen registers its create action with useCreateShortcut().
// A single global key listener dispatches a 'zd-create' event, ignored while
// typing in a field or when a drawer/modal is already open.
if (typeof window !== 'undefined' && !window.__zdCreateBound) {
window.__zdCreateBound = true;
window.addEventListener('keydown', (e) => {
if (e.metaKey || e.ctrlKey || e.altKey) return;
const k = (e.key || '').toLowerCase();
if (k !== 'c' && k !== 'n') return;
const el = document.activeElement, tag = el && el.tagName;
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || (el && el.isContentEditable)) return;
if (document.querySelector('.drawer, .scrim')) return; // a create flow is already open
e.preventDefault();
window.dispatchEvent(new CustomEvent('zd-create'));
});
}
function useCreateShortcut(handler) {
const ref = useRef(handler);
ref.current = handler;
useEffect(() => {
const fn = () => { if (ref.current) ref.current(); };
window.addEventListener('zd-create', fn);
return () => window.removeEventListener('zd-create', fn);
}, []);
}
// KPI stat strip card
function Kpi({ k, onClick }) {
return (
{k.label}
{k.value}
{k.sub}
);
}
function CardEmpty({ icon = 'check-circle-2', text }) {
return (
{text}
);
}
// ---- Table sorting -------------------------------------------------
function useSort(initialKey = null, initialDir = 'asc') {
const [sortKey, setSortKey] = useState(initialKey);
const [sortDir, setSortDir] = useState(initialDir);
const toggle = key => {
if (sortKey === key) { setSortDir(d => d === 'asc' ? 'desc' : 'asc'); }
else { setSortKey(key); setSortDir('asc'); }
};
const apply = (rows, accessors) => {
if (!sortKey || !accessors[sortKey]) return rows;
const get = accessors[sortKey];
const out = [...rows].sort((a, b) => {
const av = get(a), bv = get(b);
if (av < bv) return -1; if (av > bv) return 1; return 0;
});
return sortDir === 'asc' ? out : out.reverse();
};
const set = (key, dir) => { setSortKey(key); setSortDir(dir); };
return { sortKey, sortDir, toggle, apply, set };
}
// Sortable
. align: 'left'|'right'. sort = the useSort object.
function SortTh({ label, k, sort, align = 'left' }) {
const active = sort.sortKey === k;
return (
);
}
// Custom dropdown / select with a popover menu. options: [{value,label,icon,tint}]
function Dropdown({ value, options, onChange, icon, placeholder = 'Select', minWidth = 160 }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
if (!open) return;
const h = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', h);
return () => document.removeEventListener('mousedown', h);
}, [open]);
const sel = options.find(o => o.value === value);
return (
{open && (
{options.map(o => (
))}
)}
);
}
function money(str) { return parseFloat(String(str).replace(/[$,]/g, '')) || 0; }
// ---- Connected mailboxes ------------------------------------------------
// Each scanned inbox is identified by its OWN address (not a generic
// "Personal/Work" bucket), so any number of accounts — including several
// personal or several work inboxes — each read as a distinct source. Colour is
// derived deterministically from the full address; an optional nickname can
// override the label, and must be unique per account.
const MAILBOX_TINTS = ['teal','purple','blue','gold','pink','green'];
const MAILBOX_NICKS = {}; // e.g. { 'me@gmail.com': 'Personal' } — keep unique
// The inboxes currently connected, in connection order. Colour is assigned by
// slot so every connected account is visually distinct (hash is only a fallback
// for any address not in this list).
const CONNECTED_MAILBOXES = ['alex.carter@gmail.com', 'alex.c.projects@gmail.com', 'alex@acme.co', 'a.carter@globex.io'];
function mailboxMeta(addr) {
if (!addr) return { addr:'', handle:'unknown', domain:'', label:'Unknown', tint:'gold' };
const s = String(addr);
const [handle = s, domain = ''] = s.split('@');
const idx = CONNECTED_MAILBOXES.indexOf(s);
let tint;
if (idx >= 0) tint = MAILBOX_TINTS[idx % MAILBOX_TINTS.length];
else { let h = 0; for (const c of s) h = (h * 31 + c.charCodeAt(0)) >>> 0; tint = MAILBOX_TINTS[h % MAILBOX_TINTS.length]; }
return { addr: s, handle, domain, label: MAILBOX_NICKS[s] || handle, tint };
}
// Marker tying a record to its source inbox.
// variant: 'dot' | 'mini' (dot + handle, the default — small & self-describing)
// | 'avatar' | 'tag' | 'full' (avatar + whole address, for legends).
function MailboxBadge({ addr, variant = 'mini', size = 20, title }) {
const m = mailboxMeta(addr);
const fg = tintFg(m.tint), bg = tintBg(m.tint);
const tip = title || `Detected from ${m.addr}`;
if (variant === 'dot') return ;
if (variant === 'mini')
return {m.label};
const avatar = (
{(m.label || '?').trim()[0].toUpperCase()}
);
if (variant === 'avatar') return avatar;
if (variant === 'full')
return {avatar}{m.handle}@{m.domain};
return {avatar}{m.label};
}
// Decodes the colours currently in play (shows the full address); hides itself
// when only one inbox is used.
function MailboxLegend({ addrs, label = 'Sources' }) {
const uniq = [...new Set((addrs || []).filter(Boolean))];
if (uniq.length < 2) return null;
return (
);
}
// Stable mailbox for any record: an explicit `mailbox` field wins, otherwise a
// deterministic pick from the connected inboxes (keyed off the record's id) so a
// record always shows the same source without needing per-row data.
function mailboxFor(record) {
if (record && record.mailbox) return record.mailbox;
const seed = String((record && (record.id || record.name || record.merchant)) || '');
let h = 0; for (const c of seed) h = (h * 31 + c.charCodeAt(0)) >>> 0;
return CONNECTED_MAILBOXES[h % CONNECTED_MAILBOXES.length];
}
// ---- Connected-accounts scope filter --------------------------------
// Reusable chip bar: "All accounts" + one chip per connected inbox, each keyed
// to the same mailbox palette used everywhere else. Optionally shows a per-
// account record count and a calm warning dot when an account is missing a given
// access scope — so the access story is visible right inside the filter.
// value is 'all' | account.id.
function AccountFilterBar({ accounts, value = 'all', onChange, counts, warnScope, warnTitle = 'Needs a reconnect' }) {
const list = accounts || [];
const total = counts ? (counts.all != null ? counts.all : list.reduce((s, a) => s + (counts[a.id] || 0), 0)) : null;
const Chip = ({ id, dot, label, count, warn }) => (
);
return (