// ui.jsx — shell + shared UI components
const { useState: useStateU } = React;
// ── Line icons (simple stroke set) ───────────────────────────────────
const ICONS = {
overview: 'M3 13h8V3H3v10zm10 8h8V3h-8v18zM3 21h8v-6H3v6z',
users: 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8 M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75',
households: 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z M9 22V12h6v10',
engagement: 'M22 12h-4l-3 9L9 3l-3 9H2',
content: 'M4 19.5A2.5 2.5 0 0 1 6.5 17H20 M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z',
impact: 'M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z M2 21c0-3 1.85-5.36 5.08-6',
revenue: 'M12 1v22 M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6',
costs: 'M21 12V7H5a2 2 0 0 1 0-4h14v4 M3 5v14a2 2 0 0 0 2 2h16v-5 M18 12a2 2 0 0 0 0 4h4v-4z',
geo: 'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
system: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z M12 8v4l3 2',
search: 'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z M21 21l-4.3-4.3',
bell: 'M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9 M13.7 21a2 2 0 0 1-3.4 0',
arrowUp: 'M12 19V5 M5 12l7-7 7 7',
arrowDown: 'M12 5v14 M5 12l7 7 7-7',
download: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 M7 10l5 5 5-5 M12 15V3',
chevron: 'M9 18l6-6-6-6',
dot: 'M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0',
ext: 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6 M15 3h6v6 M10 14L21 3',
};
function Icon({ name, size = 18, sw = 1.7, color = 'currentColor', fill = 'none' }) {
return (
);
}
function Logo({ size = 30 }) {
return (
);
}
// ── Card ─────────────────────────────────────────────────────────────
function Card({ children, title, sub, right, pad = 18, span, style, className }) {
return (
{(title || right) && (
{title &&
{title}
}
{sub &&
{sub}
}
{right}
}
)}
{children}
);
}
// ── Delta pill (up/down %) ───────────────────────────────────────────
function Delta({ value, suffix = '%', invert = false }) {
if (value === 0 || value == null) return —;
const up = value > 0;
const good = invert ? !up : up;
const col = good ? 'var(--pos)' : 'var(--neg)';
const bg = good ? 'var(--pos-soft)' : 'var(--neg-soft)';
return (
{Math.abs(value)}{suffix}
);
}
// ── KPI stat card ────────────────────────────────────────────────────
function StatCard({ label, value, delta, spark, sparkColor = 'var(--accent)', sub, invert, accent, prefix, suffix }) {
return (
{accent &&
}
{label}
{delta != null && }
{prefix}{value}{suffix && {suffix}}
{spark &&
}
{sub &&
{sub}}
{options.map(o => {
const active = o.value === value;
return (
);
})}
);
}
// ── Sidebar ──────────────────────────────────────────────────────────
function Sidebar({ page, setPage, lang, collapsed, onLogout }) {
const groups = [
{ g: 'nav_groups_main', items: ['overview'] },
{ g: 'nav_groups_product', items: ['users', 'households', 'engagement', 'content'] },
{ g: 'nav_groups_business', items: ['impact', 'revenue', 'costs', 'geo'] },
{ g: 'nav_groups_ops', items: ['system'] },
];
return (
);
}
// ── Topbar ───────────────────────────────────────────────────────────
function Topbar({ lang, setLang, theme, setTheme, period, setPeriod, title, sub }) {
const periodOpts = [
{ value: '7d', label: tA(lang, 'p_7d') }, { value: '30d', label: tA(lang, 'p_30d') },
{ value: '90d', label: tA(lang, 'p_90d') }, { value: '12m', label: tA(lang, 'p_12m') },
];
return (
{/* theme switcher — the 3 directions */}
{Object.values(ADMIN_THEMES).map(th => (
))}
A
{children}
;
}
// ── Simple data table ────────────────────────────────────────────────
function Table({ columns, rows, lang }) {
return (
{columns.map((c, i) => | {c.head} | )}
{rows.map((r, ri) => (
{columns.map((c, ci) => | {c.render(r)} | )}
))}
);
}
function PageHead({ children }) {
return {children}
;
}
Object.assign(window, { Icon, Logo, Card, Delta, StatCard, Badge, Segmented, Sidebar, Topbar, Grid, Table, PageHead });