/* ============ Icons ============ */
const Icon = ({ n, s=14, w=1.7, c="" }) => {
const p = {
home:<>,
building:<>,
template:<>,
bell:<>,
user:<>,
users:<>,
plus:<>,
search:<>,
check:,
"check-circle":<>,
x:<>,
"x-circle":<>,
clock:<>,
edit:<>,
"edit-3":<>,
chev:,
"chev-d":,
"chev-r":,
folder:<>,
file:<>,
"file-text":<>,
archive:<>,
send:<>,
inbox:<>,
lock:<>,
info:<>,
alert:<>,
history:<>,
eye:<>,
"eye-off":<>,
settings:<>,
"arrow-l":<>,
"arrow-r":<>,
sparkle:<>,
"thumbs-up":<>,
flag:<>,
layers:<>,
database:<>,
more:<>,
"log-out":<>,
copy:<>,
refresh:<>,
trash:<>,
upload:<>,
download:<>,
pencil:,
shield:,
"folder-open":<>,
grid:<>,
"alert-triangle":<>,
"external":<>,
filter:,
kanban:<>,
progress:<>,
pin:<>,
"pin-off":<>,
};
return ;
};
/* ============ Status Badge ============
Per user clarification (rev. MTG3) — only 3 states: Draft / Active / Archived.
All drafts (Admin's or Creator's) route to Approval Center; there's no
sub-state distinction. */
const STATUS_META = {
draft: { cls:"draft", icon:"edit-3", label:"Draft" },
active: { cls:"active", icon:"check-circle", label:"Active" },
archived: { cls:"archived", icon:"archive", label:"Archived" },
};
const StatusBadge = ({ status, project, size }) => {
let key = project ? project.status : status;
// legacy: callers passing status="pending" → draft (since pending was removed)
if (key === "pending") key = "draft";
const m = STATUS_META[key] || STATUS_META.draft;
return (
{m.label}
);
};
/* ============ Risk-level badge — just the level word, color-coded ============ */
const RiskBadge = ({ level, size }) => {
if (!level) return —;
const info = (typeof RISK_INFO !== "undefined" && RISK_INFO[level]) || { label: level, tone: "" };
const toneCls = info.tone === "danger" ? "danger" : info.tone === "warn" ? "warn" : info.tone === "ok" ? "ok" : "";
return (
{info.label}
);
};
/* ============ Tooltip (info icon w/ hover popover) ============ */
/* `bare` — no ⓘ trigger; hovering the wrapped child itself opens the tip */
const Tooltip = ({ text, children, side="right", size=12, bare=false }) => {
const [open, setOpen] = React.useState(false);
return (
setOpen(true), onMouseLeave:()=>setOpen(false) } : {})}>
{children}
{!bare && setOpen(true)}
onMouseLeave={()=>setOpen(false)}
onFocus={()=>setOpen(true)}
onBlur={()=>setOpen(false)}
tabIndex={0}
style={{
display:"inline-grid",placeItems:"center",
width:16,height:16,borderRadius:"50%",
background:"var(--panel-2)",color:"var(--muted)",
cursor:"help",border:"1px solid var(--line)",
}}
aria-label="More info"
>
}
{open && (
{text}
)}
);
};
/* ============ Avatar w/ color hash ============ */
const Avatar = ({ id, name, size="md" }) => {
const initials = name ? name.split(/\s+/).slice(0,2).map(s=>s[0]).join("").toUpperCase() : (id||"?");
const h = (id||name||"X").charCodeAt(0) % 7;
return {initials}
;
};
/* ============ Empty state ============ */
const EmptyState = ({ icon="sparkle", title, sub, cta }) => (
{title}
{sub &&
{sub}
}
{cta}
);
/* ============ Time helper — dd/mm/yyyy hh:mm:ss ============ */
const fmtTs = (d) => {
if (!d) return "—";
const dt = (d instanceof Date) ? d : new Date(d);
const pad = (n)=>String(n).padStart(2,'0');
return `${pad(dt.getDate())}/${pad(dt.getMonth()+1)}/${dt.getFullYear()} ${pad(dt.getHours())}:${pad(dt.getMinutes())}:${pad(dt.getSeconds())}`;
};
const fmtTsShort = (d) => {
if (!d) return "—";
const dt = (d instanceof Date) ? d : new Date(d);
if (isNaN(dt)) return String(d);
const pad = (n) => n < 10 ? "0"+n : ""+n;
return `${pad(dt.getDate())}/${pad(dt.getMonth()+1)}/${dt.getFullYear()} ${pad(dt.getHours())}:${pad(dt.getMinutes())}:${pad(dt.getSeconds())}`;
};
/* ---- Sortable table headers ----
— click toggles asc/desc; the active column
shows a solid arrow. Pair with sortRows(rows, sort, getters) where getters
maps column key → value extractor (string or number). */
const SortTh = ({ label, k, sort, setSort, style }) => {
const active = sort.k === k;
return (
setSort(s => s.k === k ? { k, dir: s.dir === "asc" ? "desc" : "asc" } : { k, dir: "asc" })}>
{label}{" "}
{active ? (sort.dir === "asc" ? "▲" : "▼") : "▲▼"}
|
);
};
const sortRows = (rows, sort, getters) => {
if (!sort || !sort.k || !getters[sort.k]) return rows;
const g = getters[sort.k];
const sorted = [...rows].sort((a, b) => {
const va = g(a), vb = g(b);
const cmp = (typeof va === "number" && typeof vb === "number")
? va - vb
: String(va ?? "").localeCompare(String(vb ?? ""));
return sort.dir === "asc" ? cmp : -cmp;
});
return sorted;
};
Object.assign(window, { Icon, StatusBadge, RiskBadge, Tooltip, Avatar, EmptyState, STATUS_META, fmtTs, fmtTsShort, SortTh, sortRows });