/* global React */
/* ============================================================
Keelway BMS — shared components & primitives
============================================================ */
const { useState, useEffect, useMemo, useRef, useCallback } = React;
/* ---------- tiny SVG icons (line, 14px) ---------- */
const Ic = {
load: (p) => ,
phone: (p) => ,
truck: (p) => ,
cash: (p) => ,
map: (p) => ,
portal: (p) => ,
doc: (p) => ,
chart: (p) => ,
check: (p) => ,
shield: (p) => ,
inbox: (p) => ,
bot: (p) => ,
plus: (p) => ,
search: (p) => ,
filter: (p) => ,
arrowRight: (p) => ,
more: (p) => ,
play: (p) => ,
pause: (p) => ,
spark: (p) => ,
};
/* ---------- Chip ---------- */
function Chip({ kind = "", pulse = false, children }) {
return (
{children}
);
}
/* ---------- Sparkline ---------- */
function Sparkline({ data, w = 80, h = 24, color = "var(--accent)" }) {
const max = Math.max(...data);
const min = Math.min(...data);
const range = max - min || 1;
const step = w / (data.length - 1);
const points = data.map((v, i) => `${i * step},${h - ((v - min) / range) * (h - 2) - 1}`).join(" ");
const area = `0,${h} ${points} ${w},${h}`;
return (
);
}
/* ---------- Score bar ---------- */
function ScoreBar({ value, max = 100, color }) {
const pct = Math.max(0, Math.min(100, (value / max) * 100));
return (
);
}
/* ---------- Waveform ---------- */
function Waveform({ bars = 40, active = true, seed = 1 }) {
const heights = useMemo(() => {
const out = [];
let s = seed * 9301;
for (let i = 0; i < bars; i++) {
s = (s * 9301 + 49297) % 233280;
out.push(4 + (s / 233280) * 18);
}
return out;
}, [bars, seed]);
const [tick, setTick] = useState(0);
useEffect(() => {
if (!active) return;
const id = setInterval(() => setTick((t) => t + 1), 180);
return () => clearInterval(id);
}, [active]);
return (
{heights.map((h, i) => {
const phase = active ? (Math.sin((tick + i) * 0.5) + 1) / 2 : 0.5;
return ;
})}
);
}
/* ---------- Avatar + group ---------- */
function Av({ name, color }) {
const initials = name.split(" ").map(s => s[0]).join("").slice(0, 2).toUpperCase();
const hueSeed = name.split("").reduce((a, c) => a + c.charCodeAt(0), 0);
const hue = color || `hsl(${hueSeed % 360}, 30%, 35%)`;
return {initials};
}
function AvGroup({ names }) {
return (
{names.map((n, i) => )}
);
}
/* ---------- KPI ---------- */
function KPI({ label, value, delta, deltaKind = "up", spark }) {
return (
{label}
{value}
{delta && (
{deltaKind === "up" ? "▲" : "▼"} {delta}
vs last wk
)}
{spark &&
}
);
}
/* ---------- Panel wrapper ---------- */
function Panel({ title, actions, children, flush, style, className = "" }) {
return (
{title && (
{title}
{actions &&
{actions}
}
)}
{children}
AI
{text}
{confidence != null && (
conf {confidence}%
)}
{actions}
);
}
/* ---------- export all to window ---------- */
Object.assign(window, {
Ic, Chip, Sparkline, ScoreBar, Waveform, Av, AvGroup, KPI, Panel, ShimmerRow, AiBand,
});