// ─── Shared icons for all broker pages ───────────────────────────── window.Ico = { search: , plus: , close: , check: , alert: , inbox: , truck: , network: , route: , layers: , chart: , settings: , bell: , help: , chevDown: , chevRight: , chevLeft: , clock: , send: , dollar: , pkg: , scale: , calendar: , map: , arrow: , download: , upload: , filter: , bolt: , doc: , mail: , phone: , edit: , star: , starOutline: , shield: , refresh: , more: , copy: , trash: , api: , pin: }; // ─── Sidebar nav ─────────────────────────────────────────── window.Sidebar = function Sidebar({ active }) { const [shipmentsOpen, setShipmentsOpen] = React.useState(active !== 'quoting' && active !== 'routing' ? true : false); const [collapsed, setCollapsed] = React.useState(() => { try {return localStorage.getItem('broker-sidebar-collapsed') === '1';} catch {return false;} }); const toggleCollapsed = () => setCollapsed((c) => { const next = !c; try {localStorage.setItem('broker-sidebar-collapsed', next ? '1' : '0');} catch {} return next; }); return ( <> ); }; // ─── Command Center dock (bottom-right, all broker pages) ── window.CommandCenterDock = function CommandCenterDock() { React.useEffect(function () { if (window.__ccDockInit || document.getElementById('cc-dock-script')) return; var s = document.createElement('script'); s.id = 'cc-dock-script'; s.src = 'command-center-dock.js'; document.body.appendChild(s); }, []); return null; }; // ─── AI agent floating bar ───────────────────────────────── window.AIAgentBar = function AIAgentBar() { const [value, setValue] = React.useState(''); const [messages, setMessages] = React.useState([]); const [open, setOpen] = React.useState(false); const [attachments, setAttachments] = React.useState([]); const [recording, setRecording] = React.useState(false); const [recSecs, setRecSecs] = React.useState(0); const inputRef = React.useRef(null); const wrapRef = React.useRef(null); const fileInputRef = React.useRef(null); const focusInput = () => { setOpen(true); requestAnimationFrame(() => inputRef.current && inputRef.current.focus()); }; // Listen for external open events (sidebar "Ask anything" pill) React.useEffect(() => { const onOpen = () => focusInput(); window.addEventListener('ai-agent:open', onOpen); return () => window.removeEventListener('ai-agent:open', onOpen); }, []); // Recording timer React.useEffect(() => { if (!recording) { setRecSecs(0); return; } const id = setInterval(() => setRecSecs((s) => s + 1), 1000); return () => clearInterval(id); }, [recording]); const pickFiles = () => { setOpen(true); if (fileInputRef.current) fileInputRef.current.click(); }; const onFilesChosen = (e) => { const files = Array.from(e.target.files || []); if (!files.length) return; setAttachments((a) => [...a, ...files.map((f) => ({ name: f.name, size: f.size, url: /^image\//.test(f.type) ? URL.createObjectURL(f) : null }))]); e.target.value = ''; }; const removeAttachment = (i) => setAttachments((a) => { const item = a[i]; if (item && item.url) { try { URL.revokeObjectURL(item.url); } catch (e) {} } return a.filter((_, idx) => idx !== i); }); const toggleRecording = () => { setOpen(true); setRecording((r) => { if (r) { // Stopping → inject a transcription placeholder setValue((v) => (v ? v + ' ' : '') + '[voice note]'); } return !r; }); }; const HINT_SUGGESTIONS = [ { prefix: 'Track', hint: 'a shipment' }, { prefix: 'Find', hint: 'shipments in transit' }, { prefix: 'Show', hint: 'delivery status' }, { prefix: 'Create', hint: 'a new load' }, { prefix: 'Filter', hint: 'by carrier' }, { prefix: 'What', hint: 'is delayed today?' }, { prefix: 'Book', hint: 'a carrier' } ]; const activeHint = React.useMemo(() => { const v = value.trim(); if (!v) return null; const lower = v.toLowerCase(); const match = HINT_SUGGESTIONS.find((s) => s.prefix.toLowerCase().startsWith(lower) || lower.startsWith(s.prefix.toLowerCase())); return match ? match.hint : null; }, [value]); const acceptHint = () => { if (!activeHint) return; const match = HINT_SUGGESTIONS.find((s) => s.hint === activeHint); if (!match) return; setValue(`${match.prefix} ${match.hint}`); }; const [thinking, setThinking] = React.useState(false); const thinkTimer = React.useRef(null); const messagesRef = React.useRef(null); React.useEffect(() => { if (messagesRef.current) messagesRef.current.scrollTop = messagesRef.current.scrollHeight; }, [messages, thinking]); const buildReplies = (text) => { const lower = text.toLowerCase(); if (lower.includes('track')) { return [{ role: 'ai', text: 'Please enter BOL, Shipment ID, or PO number' }]; } if (/^bol\s*\d+/i.test(text) || /^\d{5,}$/.test(text)) { const bol = text.replace(/[^0-9]/g, '') || '892347'; return [ { role: 'ai', text: 'Shipment is currently in transit and expected to arrive at 3:00 PM' }, { role: 'ai-card', card: { bol, driver: 'John Ramirez', location: 'Phoenix, AZ', eta: '4:15 PM', updated: '30 min ago', status: 'In Transit' } }, { role: 'ai-actions' } ]; } return [{ role: 'ai', text: `I'll help with "${text}". Connect the assistant to enable live responses.` }]; }; const send = () => { const q = value.trim(); if (!q && attachments.length === 0) return; const attachSummary = attachments.length ? ` (with ${attachments.length} file${attachments.length > 1 ? 's' : ''}: ${attachments.map((a) => a.name).join(', ')})` : ''; const userMsg = { role: 'user', text: q + attachSummary }; setMessages((m) => [...m, userMsg]); setValue(''); setAttachments([]); setThinking(true); if (thinkTimer.current) clearTimeout(thinkTimer.current); thinkTimer.current = setTimeout(() => { setThinking(false); setMessages((m) => [...m, ...buildReplies(q)]); }, 700); }; const copyText = async (t) => { try { await navigator.clipboard.writeText(t); } catch (e) {} }; const closeSide = () => { setMessages([]); setThinking(false); setOpen(false); }; React.useEffect(() => { const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target) && !value && messages.length === 0) { setOpen(false); } }; const onKey = (e) => { if (e.key === 'Escape') { setOpen(false); setValue(''); } }; document.addEventListener('mousedown', onDoc); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); }; }, [value, messages.length]); const gradientDefs = ( ); // ── Side panel mode: active once the user has sent something ── if (messages.length > 0 || thinking) { return ( <> {gradientDefs} ); } return (
{gradientDefs}
0 || recording ? ' has-attach' : ''}`} role="search" aria-label="Ask anything" onClick={focusInput}> {(attachments.length > 0 || recording) &&
e.stopPropagation()}> {recording &&
Voice {String(Math.floor(recSecs / 60)).padStart(2, '0')}:{String(recSecs % 60).padStart(2, '0')}
} {attachments.map((a, i) => { const isImage = /\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(a.name); const ext = (a.name.split('.').pop() || '').toUpperCase().slice(0, 5); const kb = Math.max(1, Math.round(a.size / 1024)); const sizeLbl = kb >= 1024 ? `${(kb / 1024).toFixed(kb >= 10240 ? 0 : 1)} MB` : `${kb} KB`; return (
{!(isImage && a.url) &&
{ext || 'FILE'} {sizeLbl}
}
); })}
}
{value && activeHint && } setValue(e.target.value)} onFocus={() => setOpen(true)} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); send(); } else if ((e.key === 'Tab' || e.key === 'ArrowRight') && activeHint) { if (e.key === 'Tab' || (e.key === 'ArrowRight' && e.target.selectionStart === value.length)) { e.preventDefault(); acceptHint(); } } }} />
e.stopPropagation()}>
); }; // ─── Persona Switcher ────────────────────────────────────── window.PersonaSwitch = function PersonaSwitch() { const [open, setOpen] = React.useState(false); const wrapRef = React.useRef(null); React.useEffect(() => { if (!open) return; const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); }; const onKey = (e) => {if (e.key === 'Escape') setOpen(false);}; document.addEventListener('mousedown', onDoc); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); }; }, [open]); const personas = [ { id: 'shipper', initials: 'MT', name: 'Marcus Tan', role: 'Shipper · ASUS', href: 'Shipper Routing.html' }, { id: 'carrier', initials: 'JR', name: 'Jamie Reyes', role: 'Carrier · Reliant Transport', href: 'All Loads.html' }, { id: 'broker', initials: 'DV', name: 'Diana Vega', role: 'Broker · Alfred Logistics', href: 'Broker Routing.html', current: true }]; const me = personas.find((p) => p.current); return (
{open &&
Switch persona
{personas.map((p) => p.current ?
{p.initials}
{p.name}{p.role}
{window.Ico.check}
:
{p.initials}
{p.name}{p.role}
 )}
}
); }; // ─── Topbar ──────────────────────────────────────────────── window.Topbar = function Topbar({ crumbs, title, children }) { return (
{crumbs.length > 0 &&
{crumbs.map((c, i) => {i > 0 && /} {c.href ? {c.label} : {c.label}{c.sub && {c.sub}}} )}
} {title && <> {crumbs.length > 0 && } {title} } {children}
); }; // ─── Date helpers ────────────────────────────────────────── window.NOW = new Date('2026-05-14T14:30:00Z'); window.fmtDateTime = (iso) => iso ? new Date(iso).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }) : '—'; window.fmtDate = (iso) => iso ? new Date(iso).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) : '—'; window.fmtTime = (iso) => iso ? new Date(iso).toLocaleString(undefined, { weekday: 'short', hour: 'numeric', minute: '2-digit' }) : '—'; window.minsAgo = (iso) => { if (!iso) return null; const m = Math.round((window.NOW - new Date(iso)) / 60000); if (m < 1) return 'just now'; if (m < 60) return `${m}m ago`; const h = Math.floor(m / 60); if (h < 24) return `${h}h ${m % 60}m ago`; return `${Math.floor(h / 24)}d ago`; }; window.fmtCurrency = (n) => '$' + n.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }); window.fmtMoney = (n) => '$' + n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }); window.hoursUntil = (iso) => iso ? (new Date(iso) - window.NOW) / 3600000 : null; window.daysUntil = (iso) => iso ? Math.round((new Date(iso) - window.NOW) / 86400000) : null; window.fmtCountdown = (hrs) => { if (hrs == null) return '—'; if (hrs < 0) return 'Expired'; if (hrs < 1) return `${Math.round(hrs * 60)}m`; if (hrs < 48) return `${Math.round(hrs)}h ${Math.round(hrs % 1 * 60)}m`; return `${Math.round(hrs / 24)}d`; }; window.countdownState = (hrs) => { if (hrs == null) return null; if (hrs < 0) return 'expired'; if (hrs < 4) return 'cold'; if (hrs < 12) return 'warn'; return 'fresh'; }; window.initials = (name) => name.split(' ').map((s) => s[0]).slice(0, 2).join('').toUpperCase(); // ─── Status label map ────────────────────────────────────── window.QUOTE_STATUS = { draft: { label: 'Draft', cls: 'qst-draft' }, received: { label: 'To Quote', cls: 'qst-received' }, rfq_sent: { label: 'Awaiting Quotes', cls: 'qst-rfq-sent' }, submitted: { label: 'Submitted to Shipper', cls: 'qst-submitted' }, accepted: { label: 'Accepted', cls: 'qst-order' }, rejected: { label: 'Rejected', cls: 'qst-rejected' }, expired: { label: 'Expired', cls: 'qst-expired' } }; window.StatusPill = function StatusPill({ status }) { const s = window.QUOTE_STATUS[status] || window.QUOTE_STATUS.draft; return {s.label}; }; window.Countdown = function Countdown({ until, label }) { const hrs = window.hoursUntil(until); const st = window.countdownState(hrs); if (!st) return null; return ( {window.Ico.clock}{st === 'expired' ? 'Expired' : (label ? `${label} ` : '') + window.fmtCountdown(hrs)} ); }; window.Toast = function Toast({ msg, onDismiss, tone }) { React.useEffect(() => { const t = setTimeout(onDismiss, 3200); return () => clearTimeout(t); }, [onDismiss]); const color = tone === 'good' ? 'var(--good)' : tone === 'warn' ? 'var(--warn)' : tone === 'bad' ? 'var(--bad)' : 'var(--accent)'; return
{window.Ico.check}{msg}
; };