// breakdown
{presets.map((p) =>
<_Pill key={p.id} active={presetId === p.id} onClick={() => setPresetId(p.id)}>{p.name}
)}
// window
{[["7d", "7d"], ["30d", "30d"], ["90d", "90d"], ["qtd", "QTD"]].map(([id, lbl]) =>
<_Pill key={id} active={windowKey === id} onClick={() => setWindowKey(id)}>{lbl}
)}
<_Pill danger active={showShadow} onClick={() => setShowShadow(!showShadow)}>shadow ai
);
}
function OrgFlowsHero() {
const [presetId, setPresetId] = useStateOFH("org");
const [windowKey, setWindowKey] = useStateOFH("7d");
const [showShadow, setShowShadow] = useStateOFH(true);
const sankeyRef = React.useRef(null);
const [sankeyW, setSankeyW] = useStateOFH(1060);
const isMobile = window.useMediaQuery ? window.useMediaQuery('(max-width: 768px)') : false;
React.useEffect(() => {
if (!sankeyRef.current) return;
const ro = new ResizeObserver((entries) => {
for (const e of entries) {
const w = Math.floor(e.contentRect.width);
if (w > 0) setSankeyW(w);
}
});
ro.observe(sankeyRef.current);
return () => ro.disconnect();
}, []);
const items = [
{ id: "flows", label: "token flows", icon: "≋", active: true },
{ id: "overview", label: "org overview", icon: "◇" },
{ id: "teams", label: "team leaderboard", icon: "▤" },
{ id: "people", label: "individuals", icon: "○" },
{ id: "models", label: "model spend", icon: "✦" },
{ id: "shadow", label: "shadow ai", icon: "!", danger: true },
];
return (