// flow-shared.jsx — shared chrome for all Flow screens // Sidebar, topbar, icons, badge helpers, status mapping. const { useState, useEffect, useRef, useMemo, createContext, useContext, Fragment } = React; // ---------- Icon set (lucide-style; inline SVG to avoid extra deps) ---------- const Icon = ({ d, size = 16, stroke = 2, className = '', style, fill = 'none' }) => ( {typeof d === 'string' ? : d} ); const I = { // navigation layers: (p) => }/>, truck: (p) => }/>, bookmark: (p) => , warehouse: (p) => }/>, stamp: (p) => }/>, clock: (p) => }/>, shield: (p) => , receipt: (p) => }/>, chart: (p) => }/>, home: (p) => }/>, // ui search: (p) => }/>, bell: (p) => }/>, plus: (p) => }/>, chevDown: (p) => , chevRight: (p) => , chevLeft: (p) => , chevUp: (p) => , filter: (p) => , download: (p) => }/>, upload: (p) => }/>, check: (p) => , x: (p) => }/>, alert: (p) => }/>, info: (p) => }/>, pin: (p) => }/>, sliders: (p) => }/>, arrowRight:(p) => }/>, ext: (p) => }/>, file: (p) => }/>, fileCheck: (p) => }/>, fileX: (p) => }/>, fileBox: (p) => }/>, send: (p) => , more: (p) => }/>, refresh: (p) => }/>, edit: (p) => }/>, eye: (p) => }/>, euro: (p) => }/>, flag: (p) => }/>, package: (p) => }/>, user: (p) => }/>, building: (p) => }/>, hash: (p) => }/>, spark: (p) => , lock: (p) => }/>, signature: (p) => }/>, ship: (p) => , zap: (p) => , link: (p) => }/>, thermo: (p) => , globe: (p) => }/>, trend: (p) => }/>, }; // ---------- Status helpers ---------- const STATUS_BADGE = { draft: { variant: 'neutral', label: 'Draft' }, requested: { variant: 'neutral', label: 'Requested' }, planned: { variant: 'primary', label: 'Planned' }, ready_to_dispatch: { variant: 'primary', label: 'Ready to dispatch' }, dispatched: { variant: 'primary', label: 'Dispatched' }, in_transit: { variant: 'primary', label: 'In transit' }, at_destination: { variant: 'primary', label: 'At destination' }, delivered: { variant: 'success', label: 'Delivered' }, reconciled: { variant: 'success', label: 'Reconciled' }, delayed: { variant: 'warning', label: 'Delayed' }, blocked: { variant: 'danger', label: 'Blocked' }, exception: { variant: 'danger', label: 'Exception' }, }; const StatusBadge = ({ status, dot = true }) => { const cfg = STATUS_BADGE[status] || { variant: 'neutral', label: status }; return ( {dot && } {cfg.label} ); }; // ---------- Sidebar nav ---------- const SidebarNav = ({ activeRoute, onNav }) => { const isActive = (r) => activeRoute === r || activeRoute?.startsWith(r + '/'); const Item = ({ id, icon, label, count }) => (
onNav?.(id)}> {icon} {label} {count != null && {count}}
); const Sub = ({ id, label, count, badge }) => (
onNav?.(id)}> {label} {count != null && {count}} {badge}
); return ( ); }; const ModuleSwitcher = () => ( ); // ---------- Topbar ---------- const Topbar = ({ crumbs = [], actions, onSearchFocus }) => (
{crumbs.map((c, i) => ( {i > 0 && } {i === crumbs.length - 1 ? {c} : c} ))}
Search shipments, MRN, container… ⌘K
{actions}
); // ---------- AppShell ---------- const AppShell = ({ activeRoute, onNav, crumbs, topbarActions, children, screenLabel }) => (
{children}
); // ---------- Reusable bits ---------- const SectionHeader = ({ title, subtitle, right }) => (
{title}
{subtitle &&
{subtitle}
}
{right}
); const Card = ({ children, style, className = '', as: As = 'div' }) => ( {children} ); const KV = ({ label, children, mono }) => (
{label}
{children}
); // Free-time bar widget — shared across Free-time tab + dashboard const FreeTimeBar = ({ usedHours, freeHours, height = 10 }) => { const pct = Math.min(100, Math.max(0, (usedHours / freeHours) * 100)); const cls = pct >= 90 ? 'crit' : pct >= 70 ? 'warn' : 'ok'; return (
); }; // MRN stepper const MRNStepper = ({ steps, currentIdx, failed }) => (
{steps.map((s, i) => ( {i > 0 &&
}
{i < currentIdx ? : i === currentIdx && failed ? : (i + 1)}
{s.label}
{s.ts || '—'}
))}
); // Tiny sparkline (SVG) for KPI cards const Sparkline = ({ data, w = 80, h = 24, color = 'var(--primary)' }) => { const max = Math.max(...data, 1), min = Math.min(...data, 0); const dx = w / (data.length - 1); const scale = (v) => h - ((v - min) / (max - min || 1)) * h; const path = data.map((v, i) => `${i === 0 ? 'M' : 'L'} ${i * dx} ${scale(v)}`).join(' '); const fill = `${path} L ${w} ${h} L 0 ${h} Z`; return ( ); }; // Country flag pill (3-letter) const CountryFlag = ({ code }) => ( {code} ); // expose Object.assign(window, { I, Icon, StatusBadge, AppShell, SidebarNav, Topbar, ModuleSwitcher, SectionHeader, Card, KV, FreeTimeBar, MRNStepper, Sparkline, CountryFlag, Fragment, useState, useEffect, useRef, useMemo, });