// ================================================================= // ui-ext.jsx — Additional reusable components beyond ui.jsx primitives. // - StatCard: label + big value + delta pill (Dashboard, Cost Analytics) // - BarChart: compact bar chart for time-series spend // - DangerZone: destructive-action panel with optional type-to-confirm // - Toolbar: search + primary button row above tables // - SegmentedControl single-select pill-toggle (replaces ad-hoc segmented buttons) // - EmptyState: icon + title + description + CTA for empty lists/tables // - Tabs: controlled tab bar // - Drawer: right-side slide-over panel // - Tooltip: hover/focus tooltip wrapper // - ErrorBoundary: React error boundary with reset button // ================================================================= // ---------- StatCard ---------- const StatCard = ({ label, value, delta, deltaTone = "neutral", sub, icon, onClick }) => ( ); // ---------- BarChart ---------- const BarChart = ({ data, height = 180, showAxis = true, axisLabels, formatValue }) => { const max = Math.max(...data, 1); const fmtVal = formatValue || ((v) => v.toFixed(2)); return (
{data.map((v, i) => (
))}
{showAxis && (
{(axisLabels || [`${data.length}d ago`, "Today"]).map((l, i) => {l})}
)}
); }; // ---------- DangerZone ---------- const DangerZone = ({ title = "Danger zone", description, actionLabel = "Delete", confirmPhrase, onConfirm }) => { const [expanded, setExpanded] = React.useState(false); const [phrase, setPhrase] = React.useState(""); const needsTyping = !!confirmPhrase; const canDelete = needsTyping ? phrase === confirmPhrase : true; React.useEffect(() => { if (!expanded) setPhrase(""); }, [expanded]); return (
{title}
{description &&
{description}
}
{!expanded && setExpanded(true)}>{actionLabel}}
{expanded && (
{needsTyping && ( <>

Type {confirmPhrase} to confirm.

setPhrase(e.target.value)} placeholder={confirmPhrase}/> )}
setExpanded(false)}>Cancel {needsTyping ? `I understand, ${actionLabel.toLowerCase()}` : actionLabel}
)}
); }; // ---------- Toolbar (search + actions) ---------- const Toolbar = ({ search, searchPlaceholder, onSearchChange, actions, children }) => (
{actions &&
{actions}
} {onSearchChange !== undefined && ( } placeholder={searchPlaceholder || "Search"} value={search || ""} onChange={(e) => onSearchChange(e.target.value)} style={{ minWidth: 240, maxWidth: 320, flex: 1 }}/> )} {children}
); // ---------- SegmentedControl ---------- const SegmentedControl = ({ value, onChange, options, size = "md" }) => (
{options.map((o) => { const v = typeof o === "object" ? o.value : o; const l = typeof o === "object" ? o.label : o; return ( ); })}
); // ---------- EmptyState ---------- const EmptyState = ({ icon, title, description, action }) => (
{icon &&
{icon}
}
{title}
{description &&
{description}
} {action &&
{action}
}
); // ---------- Tabs ---------- const Tabs = ({ value, onChange, items }) => (
{items.map((it) => ( ))}
); // ---------- Drawer (right-side slide-over) ---------- const Drawer = ({ open, onClose, title, children, footer, width = 480 }) => { React.useEffect(() => { if (!open) return; const onKey = (e) => e.key === "Escape" && onClose(); document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open, onClose]); if (!open) return null; return (
e.stopPropagation()}>
{title}
{children}
{footer &&
{footer}
}
); }; // ---------- Tooltip ---------- const Tooltip = ({ children, content, side = "top" }) => { const [show, setShow] = React.useState(false); const ref = React.useRef(); return ( setShow(true)} onMouseLeave={() => setShow(false)} onFocus={() => setShow(true)} onBlur={() => setShow(false)}> {children} {show && {content}} ); }; // ---------- ErrorBoundary ---------- class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error) { return { hasError: true, error }; } componentDidCatch(error, info) { console.error("App crashed:", error, info); } reset = () => this.setState({ hasError: false, error: null }); render() { if (this.state.hasError) { return (
!
Something went wrong
The page hit an unexpected error. Try going back to the dashboard, or reload to start fresh.
{this.state.error && ( 
              {String(this.state.error?.message || this.state.error)}
)}
{ window.location.hash = "#/dashboard"; this.reset(); }}>Back to Dashboard window.location.reload()}>Reload page
); } return this.props.children; } } Object.assign(window, { StatCard, BarChart, DangerZone, Toolbar, SegmentedControl, EmptyState, Tabs, Drawer, Tooltip, ErrorBoundary, });