);
}
// ─── Breadcrumb ───────────────────────────────────────────────────────
function Breadcrumb({ items }) {
return (
);
}
// ─── Page header ──────────────────────────────────────────────────────
// `onBack` (optional) renders a back arrow to the left of the title.
function PageHeader({ breadcrumb, title, subtitle, actions, tabs, onBack }) {
return (
{breadcrumb &&
}
{onBack && (
)}
{title}
{subtitle &&
{subtitle}
}
{actions &&
{actions}
}
{tabs}
);
}
// ─── Avatar ───────────────────────────────────────────────────────────
function Avatar({ name, size = 28 }) {
const initials = name.split(" ").map((s) => s[0]).slice(0, 2).join("").toUpperCase();
// Deterministic hue from name
const hash = [...name].reduce((a, c) => a + c.charCodeAt(0), 0);
const hue = hash % 360;
return (
{initials}
);
}
// ─── Product thumbnail ────────────────────────────────────────────────
// Shows the real product image when `src` (a URL) is provided. Falls back to
// a neutral placeholder if no URL or the image fails to load. No frame —
// product JPEGs already sit on white; a border just adds visual noise.
function ProductThumb({ size = 32, sku, src, hasImage = true, className = "" }) {
const [failed, setFailed] = useState(false);
const dim = typeof size === "number" ? { width: size, height: size } : { width: "100%", height: "100%" };
if (src && !failed) {
return (
setFailed(true)}/>
);
}
if (!hasImage || failed) {
return (
);
}
// No URL but flagged as having an image — neutral deterministic placeholder.
const hash = [...(sku || "")].reduce((a, c) => a + c.charCodeAt(0), 0);
return (
);
}
// ─── Format helpers ───────────────────────────────────────────────────
const fmt = {
eur: (n) => n == null ? "—" : new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR", minimumFractionDigits: 2 }).format(n),
num: (n) => n == null ? "—" : new Intl.NumberFormat("fr-FR").format(n),
pct: (n) => n == null ? "—" : `${n.toFixed(1)}%`,
date: (s) => {
if (!s) return "—";
const d = new Date(s);
return d.toLocaleString("fr-FR", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" });
},
dateOnly: (s) => {
if (!s) return "—";
return new Date(s).toLocaleDateString("fr-FR", { day: "2-digit", month: "short", year: "numeric" });
},
rel: (s) => {
if (!s) return "—";
const diff = (Date.now() - new Date(s).getTime()) / 1000;
if (diff < 60) return "à l'instant";
if (diff < 3600) return `il y a ${Math.floor(diff / 60)} min`;
if (diff < 86400) return `il y a ${Math.floor(diff / 3600)} h`;
return `il y a ${Math.floor(diff / 86400)} j`;
},
duration: (sec) => {
if (sec == null) return "—";
if (sec < 60) return `${sec}s`;
return `${Math.floor(sec / 60)}m ${sec % 60}s`;
},
};
// ─── Sortable helper ──────────────────────────────────────────────────
function useSorted(items, defaultKey) {
const [sort, setSort] = useState({ key: defaultKey, dir: "asc" });
const sorted = useMemo(() => {
if (!sort.key) return items;
const out = [...items].sort((a, b) => {
const va = a[sort.key], vb = b[sort.key];
if (va == null && vb == null) return 0;
if (va == null) return 1;
if (vb == null) return -1;
if (typeof va === "number" && typeof vb === "number") return va - vb;
return String(va).localeCompare(String(vb));
});
if (sort.dir === "desc") out.reverse();
return out;
}, [items, sort]);
const toggle = (k) => setSort((s) => s.key === k ? { key: k, dir: s.dir === "asc" ? "desc" : "asc" } : { key: k, dir: "asc" });
return { sorted, sort, toggle };
}
function SortHeader({ label, sortKey, sort, toggle, align = "left", width }) {
const active = sort.key === sortKey;
return (