/* ============================================================
IMTRACK — Shared UI components (React, Babel)
Exposes components on window for module scripts.
============================================================ */
const { useState, useRef, useEffect, useMemo, createContext, useContext } = React;
/* ---------------- Icons (Lucide-style) ---------------- */
const ICON_PATHS = {
'layout-dashboard': '',
'clipboard-list': '',
'file-text': '',
'receipt': '',
'bar-chart-2': '',
'bar-chart': '',
'settings': '',
'users': '',
'plus': '',
'pencil': '',
'trash-2': '',
'copy': '',
'download': '',
'upload': '',
'search': '',
'filter': '',
'columns': '',
'chevron-down': '',
'chevron-up': '',
'chevron-right': '',
'chevrons-up-down': '',
'external-link': '',
'alert-circle': '',
'alert-triangle': '',
'flag': '',
'check-circle': '',
'check': '',
'info': '',
'x': '',
'calendar': '',
'link-2': '',
'file-up': '',
'arrow-up': '',
'arrow-down': '',
'arrow-right': '',
'inbox': '',
'sliders': '',
'wallet': '',
'building': '',
'lock': '',
'file-search': '',
'rotate-ccw': '',
};
function Icon({ name, size, color, style, className }) {
const s = size || 18;
return (
);
}
/* ---------------- Status / alert / traffic ---------------- */
const COLOR_CLASS = { green: 'badge-green', warning: 'badge-warning', critical: 'badge-critical', flag: 'badge-flag', blue: 'badge-blue', navy: 'badge-navy', neutral: 'badge-neutral' };
function StatusBadge({ store, list, id, dot }) {
const E = window.IMTRACK_ENGINE;
const v = E.lk(store, list, id);
if (!v) return {id};
const color = v.color === 'amber' ? 'warning' : v.color === 'red' ? 'critical' : v.color;
const cls = COLOR_CLASS[color] || 'badge-neutral';
const dotColors = { green: '#16a34a', warning: '#d97706', critical: '#b45309', flag: '#7c3aed', blue: '#2563eb', navy: '#1e3a5f', neutral: '#64748b' };
return (
{dot && }
{v.label}
);
}
function AlertBadge({ sev }) {
const normalized = sev === 'amber' ? 'warning' : sev === 'red' ? 'critical' : sev;
const map = { critical: ['abadge-critical', '● CRITICAL'], warning: ['abadge-warning', '▲ WARNING'], flag: ['abadge-flag', '◆ FLAG'], green: ['abadge-green', '✓ OK'] };
const [cls, label] = map[normalized] || map.flag;
return {label};
}
function SourceBadge({ source }) {
const styles = {
sap: { background: '#e0f2fe', color: '#0369a1', label: 'SAP' },
manual: { background: 'var(--color-slate-100)', color: 'var(--color-slate-700)', label: 'Manual' },
derived: { background: '#ede9fe', color: '#7c3aed', label: 'Derived' },
amendment: { background: '#fffbeb', color: '#b45309', label: 'Amendment' },
import: { background: '#dcfce7', color: '#15803d', label: 'Import' },
};
const s = styles[(source || '').toLowerCase()] || styles.manual;
return {s.label};
}
function TrafficLight({ light, label, size }) {
const normalized = light === 'amber' ? 'warning' : light === 'red' ? 'critical' : (light || 'neutral');
const titles = { green: 'On Track', warning: 'Warning', critical: 'Overrun', neutral: 'No Data' };
const cls = 'tl-' + normalized;
if (size === 'sq') return ;
return (
{label !== false && {titles[normalized]}}
);
}
/* ---------------- Money cell ---------------- */
function Money({ v, cur, dec, dash }) {
const E = window.IMTRACK_ENGINE;
if (v === null || v === undefined || (v === 0 && dash)) return —;
const neg = v < 0;
const fn = dec === 2 ? E.fmtUSD2 : (cur && cur !== 'USD' ? (x) => E.fmtMoney(x, cur) : E.fmtUSD0);
const txt = fn(Math.abs(v));
return {neg ? '(' + txt + ')' : txt};
}
/* ---------------- Page header ---------------- */
function PageHeader({ title, subtitle, children }) {
return (
{title}
{subtitle &&
{subtitle}
}
{children &&
{children}
}
);
}
/* ---------------- Empty state ---------------- */
function EmptyState({ icon, title, sub, action }) {
return (
{title}
{sub &&
{sub}
}
{action &&
{action}
}
);
}
/* ---------------- Modal ---------------- */
function Modal({ title, subtitle, size, onClose, children, footer }) {
useEffect(() => {
const h = (e) => { if (e.key === 'Escape') onClose(); };
window.addEventListener('keydown', h);
return () => window.removeEventListener('keydown', h);
}, [onClose]);
return (
e.stopPropagation()}>
{title}
{subtitle &&
{subtitle}
}
{children}
{footer &&
{footer}
}
);
}
/* ---------------- Confirm dialog ---------------- */
function ConfirmDialog({ title, message, confirmLabel, destructive, onConfirm, onClose }) {
return (
}>
);
}
/* ---------------- Field helpers ---------------- */
function Field({ label, req, hint, children, span }) {
return (
{label &&
}
{children}
{hint &&
{hint}
}
setSort({ col, dir: active && sort.dir === 'asc' ? 'desc' : 'asc' })}>
{label}
{active
?
: }
|
);
}
function sortRows(rows, sort, accessors) {
if (!sort) return rows;
const acc = accessors[sort.col] || ((r) => r[sort.col]);
const dir = sort.dir === 'asc' ? 1 : -1;
return [...rows].sort((a, b) => {
let va = acc(a), vb = acc(b);
if (va === null || va === undefined) va = '';
if (vb === null || vb === undefined) vb = '';
if (typeof va === 'number' && typeof vb === 'number') return (va - vb) * dir;
return String(va).localeCompare(String(vb)) * dir;
});
}
/* ---------------- Toast ---------------- */
const ToastCtx = createContext(null);
function ToastProvider({ children }) {
const [toasts, setToasts] = useState([]);
const push = (msg, kind) => {
const id = Math.random();
setToasts((t) => [...t, { id, msg, kind }]);
setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 3200);
};
return (
{children}
{toasts.map((t) => (
{t.msg}
))}
;
}
Object.assign(window, {
Icon, StatusBadge, AlertBadge, TrafficLight, Money, PageHeader, EmptyState,
Modal, ConfirmDialog, Field, Select, SortHead, sortRows, ToastProvider, useToast,
exportCsv, PBar,
});