// Shared components: icons, charts (bubble / donut / hbar / spark), pills.
const { useState, useEffect, useMemo, useRef, useCallback } = React;
// ── Icon set (inline SVG, stroke-based) ─────────────────────────────
const I = {
dash: (p) => ,
ship: (p) => ,
fleet: (p) => ,
warehouse:(p)=> ,
lanes: (p) => ,
exc: (p) => ,
carrier: (p) => ,
report: (p) => ,
settings:(p) => ,
help: (p) => ,
search: (p) => ,
bell: (p) => ,
filter: (p) => ,
download:(p) => ,
upload: (p) => ,
plus: (p) => ,
more: (p) => ,
chev: (p) => ,
arrow: (p) => ,
collapse:(p) => ,
sparkle: (p) => ,
};
// ── Sparkline ──────────────────────────────────────────────────────
function Sparkline({ data, color="var(--accent)", fill=true }){
const w = 100, h = 32, p = 2;
const max = Math.max(...data), min = Math.min(...data);
const range = (max - min) || 1;
const pts = data.map((v, i) => {
const x = (i / (data.length - 1)) * (w - p*2) + p;
const y = h - p - ((v - min) / range) * (h - p*2);
return [x, y];
});
const d = pts.map((pt, i) => `${i===0?'M':'L'}${pt[0].toFixed(1)},${pt[1].toFixed(1)}`).join(' ');
const area = d + ` L${w-p},${h-p} L${p},${h-p} Z`;
return (
);
}
// ── KPI card ───────────────────────────────────────────────────────
function Kpi({ tint="lilac", label, value, unit, trend, trendDir="up", spark, sparkColor }){
return (
{label}
{value}{unit && {unit}}
{spark &&
}
{trendDir==="up" ? "↑" : trendDir==="down" ? "↓" : "·"} {trend}
vs. last 7 days
);
}
// ── Bubble chart (D4 style) ────────────────────────────────────────
function BubbleChart({ data }){
const w = 720, h = 280;
const padL = 30, padR = 16, padT = 14, padB = 36;
const innerW = w - padL - padR, innerH = h - padT - padB;
const stages = data.length;
const stageW = innerW / stages;
const yMax = 60, yMin = 0; // days
const yTicks = [20, 30, 40, 50];
const colorFor = (i) => i % 2 === 0 ? "var(--c-lilac)" : "var(--c-mint)";
return (
);
}
// ── Donut chart (D4 style) ─────────────────────────────────────────
function Donut({ onTime, delayed }){
const total = onTime + delayed;
const r = 64, cx = 88, cy = 88, sw = 22;
const C = 2 * Math.PI * r;
const a = (onTime / total) * C;
return (
On-time deliveries
{onTime}%
Delayed
{delayed}%
SLA target
85%
);
}
// ── Horizontal bars (D4 style) ─────────────────────────────────────
function HBars({ rows }){
const max = Math.max(...rows.map(r => r.total));
return (
{rows.map((r, i) => {
const w = Math.round((r.on / max) * 100);
const warn = r.on / r.total < 0.6;
return (
{r.lane}
{Math.round(r.on / r.total * 100)}%
);
})}