// Shared UI components for Shipping Clarity const { useState, useEffect, useRef, useMemo } = React; // ============================================================= // LOGO — Radar mark + Shipping[italic Clarity] wordmark // ============================================================= function SILogo({ size = 28, mono = false }) { const ink = mono ? "currentColor" : "var(--ink)"; const accent = mono ? "currentColor" : "var(--red)"; // unique gradient id so multiple logos on the page don't collide const sweepId = useMemo(() => `si-sweep-${Math.random().toString(36).slice(2, 9)}`, []); const markSize = size * 1.32; const wordSize = size * 0.78 * 1.32; return (
ShippingClarity
); } // ============================================================= // CIRCLE SCORE — Rotten-Tomatoes-style 0-100 with letter grade // ============================================================= function CircleScore({ score, size = 120, animate = true, showLetter = true }) { const [displayScore, setDisplayScore] = useState(animate ? 0 : score); const radius = size * 0.42; const circumference = 2 * Math.PI * radius; useEffect(() => { if (!animate) { setDisplayScore(score); return; } let frame; const start = performance.now(); const duration = 900; const tick = (now) => { const t = Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - t, 3); setDisplayScore(Math.round(score * eased)); if (t < 1) frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); return () => cancelAnimationFrame(frame); }, [score, animate]); const tier = window.SI_DATA.scoreToTier(score); const letter = window.SI_DATA.scoreToLetter(score); const offset = circumference - (displayScore / 100) * circumference; // Color by tier let strokeColor = "var(--ink)"; if (score >= 85) strokeColor = "var(--green)"; else if (score >= 70) strokeColor = "var(--ink)"; else if (score >= 55) strokeColor = "var(--amber)"; else strokeColor = "var(--red)"; return (
{displayScore}
{showLetter && (
{letter}
)}
); } // ============================================================= // LETTER BADGE — compact letter-only grade pill // ============================================================= function LetterBadge({ score, size = "md" }) { const letter = window.SI_DATA.scoreToLetter(score); let bg = "var(--ink)"; let fg = "var(--paper)"; if (score >= 85) { bg = "var(--green)"; } else if (score >= 70) { bg = "var(--ink)"; } else if (score >= 55) { bg = "var(--amber)"; fg = "var(--ink)"; } else { bg = "var(--red)"; } const sizes = { sm: { fs: 13, p: "2px 8px", w: 32 }, md: { fs: 16, p: "4px 10px", w: 42 }, lg: { fs: 22, p: "6px 14px", w: 58 }, xl: { fs: 36, p: "10px 22px", w: 92 }, }; const s = sizes[size] || sizes.md; return ( {letter} ); } // ============================================================= // METRIC BAR — horizontal score bar // ============================================================= function MetricBar({ label, score, animate = true, delay = 0 }) { const hasData = score > 0; const [w, setW] = useState(animate ? 0 : (hasData ? score : 0)); useEffect(() => { if (!hasData) { setW(0); return; } if (!animate) { setW(score); return; } const t = setTimeout(() => setW(score), 80 + delay); return () => clearTimeout(t); }, [score, animate, delay, hasData]); let color = "var(--ink)"; if (score >= 85) color = "var(--green)"; else if (score >= 55) color = "var(--ink)"; else color = "var(--red)"; return (
{label} {hasData ? score : "—"}
); } // ============================================================= // SPONSORED TAG // ============================================================= function SponsoredTag() { return Sponsored; } // ============================================================= // TREND ARROW // ============================================================= function TrendArrow({ trend }) { if (trend === 0) return —; const up = trend > 0; return ( {up ? "▲" : "▼"} {Math.abs(trend)} ); } // ============================================================= // HEADER / NAV // ============================================================= function Header({ currentPage, onNav }) { const links = [ { id: "home", label: "Home" }, { id: "report", label: "City Reports" }, { id: "carriers", label: "Carriers" }, { id: "terminals", label: "Terminal Atlas" }, { id: "insights", label: "Clarity" }, { id: "members", label: "For Carriers" }, ]; return (
{ e.preventDefault(); onNav("home"); }} style={{ textDecoration: "none" }}>
); } // ============================================================= // FOOTER // ============================================================= function Footer({ onNav }) { return ( ); } // ============================================================= // DRIVER REPORT — composite driver score, fleet stats, sentiment, quotes // ============================================================= function DriverReport({ carrierId, carrierName }) { const reports = window.SI_DATA.DRIVER_REPORTS || {}; const r = reports[carrierId] || reports._default; const tier = window.SI_DATA.scoreToTier(r.score); return (
Drivers behind the wheel

Who's actually delivering for {carrierName}.

A composite of driver tenure, retention, training, sentiment, and complaint patterns — graded the same way as everything else on this page.

{r.score}
{tier.icon} {tier.label}
{r.trend === 0 ? "flat" : `${r.trend > 0 ? "+" : ""}${r.trend} QoQ`}
Active drivers (LA)
{r.fleet.drivers}
Avg tenure
{r.fleet.avgTenure}
Annual retention
{r.fleet.retention}
Employee / contractor
Employee {r.fleet.employee}% Contractor {r.fleet.contractor}%
Driver sentiment
Positive {r.sentiment.positive}% Neutral {r.sentiment.neutral}% Negative {r.sentiment.negative}%
Sample: {Math.round((r.sentiment.positive + r.sentiment.neutral + r.sentiment.negative) * 14)} verified-driver responses · last 90 days
Safety & complaints
{r.safety.incidents}
Incidents per million miles
{r.safety.complaints}
Driver-related complaints (Q1)
{r.safety.citations}
DOT citations (LA, Q1)
Training: {r.training}
Driver-side strengths
    {r.strengths.map((s, i) =>
  • {s}
    • )}
Driver-side concerns
    {r.concerns.map((s, i) =>
  • {s}
    • )}
{r.quotes && r.quotes.length > 0 && (
From the cab
{r.quotes.map((q, i) => (
"{q.text}"
— {q.who}
))}
Quotes anonymized at the source's request. Verified via paystub or employer email.
)}
); } // Export Object.assign(window, { SILogo, CircleScore, LetterBadge, MetricBar, SponsoredTag, TrendArrow, Header, Footer, DriverReport, });