{copy.live}

{copy.session}

{/* Driver telemetry overlay (top-right) */}

{L.driver} · J. PÉREZ

{L.fatigueLabel} {L.fatigueLow}

{L.speed} 42 km/h

{/* AI events feed (mid-right) */}

{L.aiEvents}

{events.map((e, i) => (

{e.t} {e.k} {e.label}

))}

{copy.stats.map((s, i) => (

{s.label}

))}

); }; // ============= Demo Map ============= const DemoMap = ({ chips, lang = "en" }) => { const L = getLabels(lang); const [time, setTime] = useState(0); const [events, setEvents] = useState(L.events); useEffect(() => { const id = setInterval(() => setTime((t) => t + 1), 240); return () => clearInterval(id); }, []); const timecode = useMemo(() => { const h = String(14 + Math.floor(time / 60) % 4).padStart(2, "0"); const m = String(time % 60).padStart(2, "0"); const s = String((time * 7) % 60).padStart(2, "0"); return `${h}:${m}:${s} UTC-3`; }, [time]); return (

{timecode} · {chips.length} {lang === "es" ? "señales" : "signals"}

{/* Driver monitoring panel */}

{L.monitorTitle}

{[ { id: "04 · J. Pérez", fatigue: 18, speed: "42 km/h", state: "ok" }, { id: "07 · M. Silva", fatigue: 64, speed: "38 km/h", state: "warn" }, { id: "09 · A. Cabrera", fatigue: 31, speed: "51 km/h", state: "ok" }, ].map((d, i) => (

VH-{d.id}

{d.speed}

))}

{/* AI events feed */}

{L.eventsTitle}

{events.map((e, i) => (

{e.t} {e.k} {e.label}

))}

{/* Camera tile */}

{L.rec} {L.cam}

{L.eyes.split(" · ")[0]} · { L.eyes.split(" · ")[1]} {L.yaw} {L.attn.split(" · ")[0]} · {L.attn.split(" · ")[1]}

); }; // ============= Demo Panel ============= const DemoPanel = ({ copy }) => { const [activeChips, setActiveChips] = useState(new Set([0, 1, 2, 3])); const [progress, setProgress] = useState(20); useEffect(() => { const id = setInterval(() => setProgress((p) => (p >= 100 ? 28 : p + 6)), 800); return () => clearInterval(id); }, []); const toggleChip = (i) => { setActiveChips((prev) => { const next = new Set(prev); if (next.has(i)) next.delete(i); else next.add(i); return next; }); }; return (

{copy.progress_label}

{copy.panel_title}

{copy.rows.map((r, i) => (

{r.label}

{r.value} {r.delta && {r.delta}}

))}

{copy.chips.map((c, i) => ( ))}

); }; // ============= Feature Visuals ============= const FeatureViz = ({ kind, lang = "en" }) => { if (kind === "routing") { const isEs = lang === "es"; const RoutingViz = () => { const [t, setT] = useState(0); useEffect(() => { const id = setInterval(() => setT(x => x + 1), 60); return () => clearInterval(id); }, []); // Phase: 0-60 show old route, 60-120 animate re-plan, 120-240 show new route with vehicle const phase = Math.floor(t / 80) % 3; // 0=old, 1=replan, 2=optimized const phaseT = (t % 80) / 80; // Stops const stops = [ { x:20, y:85, label:"HUB" }, { x:80, y:55, label:"#2" }, { x:130, y:72, label:"#3" }, { x:175, y:38, label:"#4" }, { x:220, y:60, label:"#5" }, { x:270, y:28, label:"#6" }, ]; // Old inefficient route (zigzag) const oldPath = "M 20 85 L 130 72 L 80 55 L 220 60 L 175 38 L 270 28"; // New optimized route (smooth) const newPath = "M 20 85 Q 50 70, 80 55 T 175 38 Q 220 32, 270 28"; // Vehicle position on new route const vehicleT = phase === 2 ? phaseT : (phase === 1 ? 0 : 0); const vPoints = [ {x:20,y:85},{x:80,y:55},{x:130,y:62},{x:175,y:38},{x:220,y:44},{x:270,y:28} ]; const vIdx = Math.floor(vehicleT * (vPoints.length - 1)); const vFrac = (vehicleT * (vPoints.length - 1)) - vIdx; const vp = vPoints[Math.min(vIdx, vPoints.length-2)]; const vp2 = vPoints[Math.min(vIdx+1, vPoints.length-1)]; const vx = vp.x + (vp2.x - vp.x) * vFrac; const vy = vp.y + (vp2.y - vp.y) * vFrac; const showOld = phase === 0; const showNew = phase === 2; const replanning = phase === 1; return ( ); }; return ; } if (kind === "eta") { const isEs = lang === "es"; const EtaViz = () => { const [t, setT] = useState(0); useEffect(() => { const id = setInterval(() => setT(x => (x + 1) % 140), 50); return () => clearInterval(id); }, []); const progress = t / 139; const stops = [ { x: 22, label: isEs ? "BASE" : "HUB" }, { x: 85, label: "#2" }, { x: 148, label: "#3" }, { x: 211, label: "#4" }, { x: 270, label: isEs ? "FIN" : "END" }, ]; const vx = 22 + progress * 248; const spread = 20 * (1 - progress * 0.88); const etaMin = Math.round(18 - progress * 16); const accuracy = Math.round(88 + progress * 10); const stopIdx = Math.min(Math.floor(progress * 5), 4); return ( ); }; return ; } if (kind === "copilot") { const isEs = lang === "es"; const messages = isEs ? [ { who: "dispatch", txt: "Parada #18 omitida — cliente AVL no estaba." }, { who: "flow", txt: "Entendido. Propongo reagendar mañana 09:30 y reordenar 4 paradas. ¿Aprobás?" }, { who: "dispatch", txt: "Sí, aprobado." }, { who: "flow", txt: "✓ Hecho. ETAs actualizados. Chofer notificado." }, ] : [ { who: "dispatch", txt: "Stop #18 missed — client AVL wasn't home." }, { who: "flow", txt: "Got it. I suggest rescheduling tomorrow 09:30 and reordering 4 stops. Approve?" }, { who: "dispatch", txt: "Yes, approved." }, { who: "flow", txt: "✓ Done. ETAs updated. Driver notified." }, ]; return (

{/* chat header */}

Gropp Flow

● {isEs ? "en línea" : "online"}

{isEs ? "Parada #18 omitida — cliente no estaba." : "Stop #18 missed — client not home."}

14:02 ✓✓

GROPP AI

{isEs ? "Reagendo mañana 09:30 y reordeno 4 paradas. ¿Aprobás?" : "Rescheduling tomorrow 09:30, reordering 4 stops. Approve?"}

14:02

); } if (kind === "driver") { const isEs = lang === "es"; return (

{/* Left: signed invoice */}

{/* invoice header */}

REMITO #0042

{/* line items */} {[ { label: isEs ? "Caja 18 kg" : "Box 18 kg", qty: "×1", code: "PKG-18" }, { label: isEs ? "Destino" : "Destination", qty: "", code: "Av. Italia 4321" }, { label: isEs ? "Cliente" : "Client", qty: "", code: "G. Pereyra" }, ].map((r, i) => (

{r.label} {r.code}

))}

{/* signature area */}

{isEs ? "FIRMA RECEPTOR:" : "SIGNATURE:"}

{/* Gropp logo top right */}

{/* Right: stop info */}

{isEs ? "PRÓXIMA · 12 min" : "NEXT · 12 min"}

Av. Italia 4321

↳ {isEs ? "Caja 18kg · Firma" : "Box 18kg · Signature"}

{isEs ? "ENTREGADO" : "DELIVERED"}

); } return null; }; // ============= Vehicle Diagram (truck photo + sensor callouts) ============= const VehicleDiagram = ({ sensors }) => { const [hovered, setHovered] = useState(null); // Icons per sensor id const icons = { gps: , cabin: , road: , lte: , imu: , can: , }; const leftIds = ["gps", "cabin", "road"]; const rightIds = ["lte", "imu", "can"]; const SensorCard = ({ s }) => (

setHovered(s.id)} onMouseLeave={() => setHovered(null)} >

{icons[s.id]} {s.label}

{s.body}

); return (

{/* Left column */}

{leftIds.map(id => { const s = sensors.find(x => x.id === id); return s ? : null; })}

{/* Truck */}

{/* Right column */}

{rightIds.map(id => { const s = sensors.find(x => x.id === id); return s ? : null; })}

); }; // ============= Driver AI Animations (4 cards) ============= const DriverAiViz = ({ kind, lang = "en" }) => { const L = getLabels(lang); if (kind === "fatigue") { // 3-camera grid: cabin front, side/surroundings, forward road return (

{/* MAIN: cabin front */}

● CAB-01

{L.daiAttn} 94% {lang === "es" ? "FATIGA" : "FATIGUE"}: {lang === "es" ? "BAJA" : "LOW"}

{/* TOP RIGHT: side surroundings */}

{/* AI detection overlay */}

● EXT-02

{lang === "es" ? "ENTORNO" : "SURROUND"} 2 {lang === "es" ? "PEAT" : "PED"}

{/* BOTTOM RIGHT: forward road — dashcam photo */}

● FWD-03

); } if (kind === "score") { const isEs = lang === "es"; const EVENTS = [ { type: "good", delta: "+3", label: isEs ? "Frenado suave" : "Smooth braking" }, { type: "warn", delta: "−4", label: isEs ? "Giro brusco" : "Hard turn" }, { type: "good", delta: "+2", label: isEs ? "Llegada a tiempo" : "On-time arrival" }, { type: "warn", delta: "−6", label: isEs ? "Exceso de velocidad" : "Speeding detected" }, { type: "good", delta: "+3", label: isEs ? "Distancia segura" : "Safe following distance" }, { type: "warn", delta: "−5", label: isEs ? "Uso de teléfono" : "Phone usage detected" }, { type: "good", delta: "+2", label: isEs ? "Adherencia a la ruta" : "Route adherence" }, { type: "neutral", delta: "○", label: isEs ? "Parada registrada" : "Stop registered" }, { type: "good", delta: "+4", label: isEs ? "Velocidad correcta" : "Correct speed" }, { type: "warn", delta: "−3", label: isEs ? "Frenado tardío" : "Late braking" }, ]; const ScoreEventFeed = () => { const [visible, setVisible] = useState(3); const [score, setScore] = useState(87); useEffect(() => { if (visible >= EVENTS.length) { const rst = setTimeout(() => { setVisible(3); setScore(87); }, 1800); return () => clearTimeout(rst); } const ev = EVENTS[visible]; const id = setTimeout(() => { setScore(s => Math.min(100, Math.max(0, s + (ev.type === "good" ? parseInt(ev.delta) : ev.type === "warn" ? parseInt(ev.delta.replace("−","-")) : 0)))); setVisible(v => v + 1); }, 950); return () => clearTimeout(id); }, [visible]); const shown = EVENTS.slice(0, visible).reverse(); const typeColor = { good: "oklch(0.62 0.18 145)", warn: "oklch(0.65 0.18 35)", neutral: "oklch(0.55 0.06 240)" }; const typeBg = { good: "oklch(0.94 0.06 145)", warn: "oklch(0.96 0.06 35)", neutral: "oklch(0.93 0.02 240)" }; const gaugeArc = 188; const fillRatio = score / 100; const dashOffset = gaugeArc - fillRatio * gaugeArc; const gaugeColor = score >= 80 ? "oklch(0.62 0.18 145)" : score >= 60 ? "oklch(0.75 0.18 75)" : "oklch(0.65 0.18 35)"; return (

{/* LEFT: gauge */}

{/* mini bars */}

{[ { label: L.daiBars[0], h: 44, fill: 78 }, { label: L.daiBars[1], h: 44, fill: 55 }, { label: L.daiBars[2], h: 44, fill: 90 }, { label: L.daiBars[3], h: 44, fill: 66 }, ].map((b, i) => (

{b.label}

))}

{/* RIGHT: indicator stats — auto-scroll through all */}

{[ { icon:, label: isEs?"Score global":"Global score", value:`${score}`, unit:"/100", color: gaugeColor }, { icon:, label: isEs?"Horas conducidas":"Hours driven", value:"38.4", unit:"h", color:"var(--accent)" }, { icon:, label: isEs?"Km conducidos":"Km driven", value:"412", unit:"km", color:"var(--accent)" }, { icon:, label: isEs?"Eventos bruscos":"Harsh events", value:"3", unit:"", color:"oklch(0.65 0.18 35)" }, { icon:, label: isEs?"Paradas completadas":"Stops completed", value:"142", unit:"", color:"oklch(0.58 0.18 145)" }, { icon:, label: isEs?"CSAT clientes":"Customer CSAT", value:"4.8", unit:"/5", color:"oklch(0.58 0.18 145)" }, ].map((ind, i) => (

{ind.icon}

{ind.label}

{ind.value}{ind.unit}

))} {/* duplicate for seamless loop */} {[ { icon:, label: isEs?"Score global":"Global score", value:`${score}`, unit:"/100", color: gaugeColor }, { icon:, label: isEs?"Horas conducidas":"Hours driven", value:"38.4", unit:"h", color:"var(--accent)" }, { icon:, label: isEs?"Km conducidos":"Km driven", value:"412", unit:"km", color:"var(--accent)" }, { icon:, label: isEs?"Eventos bruscos":"Harsh events", value:"3", unit:"", color:"oklch(0.65 0.18 35)" }, { icon:, label: isEs?"Paradas completadas":"Stops completed", value:"142", unit:"", color:"oklch(0.58 0.18 145)" }, { icon:, label: isEs?"CSAT clientes":"Customer CSAT", value:"4.8", unit:"/5", color:"oklch(0.58 0.18 145)" }, ].map((ind, i) => (

{ind.icon}

{ind.label}

{ind.value}{ind.unit}

))}

); }; return

; } if (kind === "coaching") { const isEs = lang === "es"; return (

{/* LEFT: animated PDF sliding in */}

{/* RIGHT: what goes in the PDF */}

{isEs ? "CONTENIDO DEL INFORME" : "REPORT CONTENTS"}

{[ { icon:"◆", label: isEs?"Score semanal":"Weekly score", value:"87/100", color:"var(--accent)" }, { icon:"▲", label: isEs?"Top 3 eventos":"Top 3 events", value:"3 clips", color:"oklch(0.65 0.18 35)" }, { icon:"→", label: isEs?"Km conducidos":"Km driven", value:"412 km", color:"var(--fog)" }, { icon:"◎", label: isEs?"Frenadas bruscas":"Hard braking", value:"2×", color:"oklch(0.65 0.18 35)" }, { icon:"◉", label: isEs?"Objetivo personal":"Personal goal", value:"↑ foco", color:"oklch(0.58 0.18 145)" }, { icon:"✦", label: isEs?"Tendencia 4 sem":"4-week trend", value:"+5 pts", color:"oklch(0.58 0.18 145)" }, ].map((item, i) => (

{item.icon}

{item.label}

{item.value}

))}

); } if (kind === "evidence") { // Real dashcam GIF with HUD overlay return (

{/* HUD overlay */}

); } return null; }; window.GroppFlowComponents = { BrandMark, HeroMap, DemoMap, DemoPanel, FeatureViz, VehicleDiagram, DriverAiViz, MarqueeIcon };