\n {([\"traffic\", \"routes\", \"incidents\"] as AppTab[]).map((tab) => (\n setActiveTab(tab)}\n >\n {tab === \"traffic\" ? \"🌊 Flow\" : tab === \"routes\" ? \"🗺️ Routes\" : \"🚨 Alerts\"}\n {tab === \"incidents\" && incidents.length > 0 && (\n \n {incidents.length}\n \n )}\n \n ))}\n

\n\n

\n {simulated && (\n

\n ℹ️\n Demo mode — data is simulated. Add a TOMTOM_API_KEY env var for live traffic.\n

\n )}\n\n {activeTab === \"traffic\" && }\n {activeTab === \"routes\" && (\n \n )}\n {activeTab === \"incidents\" && }\n

\n );\n}\n\n// ─── Traffic Flow Tab ─────────────────────────────────────────────────────────\nfunction TrafficTab({ flowData, userLocation }: { flowData: FlowData | null; userLocation: Coords | null }) {\n if (!flowData) {\n return (\n

🌊

Fetching live traffic flow…

\n );\n }\n\n const pct = Math.round((flowData.currentSpeed / flowData.freeFlowSpeed) * 100);\n const { label, cls } = getFlowStatus(pct);\n const barColor = pct >= 85 ? \"var(--green)\" : pct >= 65 ? \"var(--yellow)\" : pct >= 45 ? \"var(--orange)\" : \"var(--red)\";\n\n return (\n <>\n

\n 📡\n Current Location Traffic\n ● {label}\n

\n\n

Current Speed

{flowData.currentSpeed}

km/h

Free Flow

{flowData.freeFlowSpeed}

km/h

Travel Time

{Math.round(flowData.currentTravelTime / 60)}

min

Delay vs Normal

flowData.freeFlowTravelTime ? \"var(--orange)\" : \"var(--green)\" }}>\n +{Math.max(0, Math.round((flowData.currentTravelTime - flowData.freeFlowTravelTime) / 60))}\n

min extra

\n\n

\n Traffic flow vs free flow\n {pct}%\n

\n\n

\n 📊\n Road Status\n

\n \n 0.7} />\n flowData.freeFlowTravelTime ? `+${Math.round((flowData.currentTravelTime - flowData.freeFlowTravelTime) / 60)} min` : \"None\"} good={flowData.currentTravelTime <= flowData.freeFlowTravelTime} />\n

\n\n

\n 💡\n Traffic Tip\n

\n {pct < 45\n ? \"🔴 Heavy congestion detected! Consider taking an alternative route or delaying your trip by 20-30 minutes.\"\n : pct < 65\n ? \"🟠 Slow traffic ahead. Check the Routes tab for faster alternatives.\"\n : pct < 85\n ? \"🟡 Moderate traffic. Conditions are manageable — expect minor delays.\"\n : \"🟢 Roads are clear! Great time to travel.\"}\n

\n \n );\n}\n\nfunction StatusRow({ icon, label, value, good }: { icon: string; label: string; value: string; good: boolean }) {\n return (\n

\n {icon}{label}\n

\n {value}\n

\n );\n}\n\nfunction getFlowStatus(pct: number) {\n if (pct >= 85) return { label: \"Free Flow\", cls: \"green\" };\n if (pct >= 65) return { label: \"Moderate\", cls: \"yellow\" };\n if (pct >= 45) return { label: \"Slow\", cls: \"orange\" };\n return { label: \"Stop & Go\", cls: \"red\" };\n}\n\n// ─── Routes Tab ───────────────────────────────────────────────────────────────\nfunction RoutesTab({ routes, selectedRoute, setSelectedRoute, destination, destName, setDestName, onGetRoutes, loading, userLocation }: any) {\n return (\n <>\n

\n 🗺️\n Plan Your Route\n

\n \n {userLocation ? `${userLocation.lat.toFixed(4)}, ${userLocation.lon.toFixed(4)}` : \"Detecting location…\"}\n \n

↕

\n setDestName(e.target.value)}\n readOnly={!destination}\n />\n

\n \n {loading ? (\n \n Finding best routes…\n \n ) : \"🔍 Get Routes\"}\n \n

\n\n {routes.length === 0 && !loading && (\n

🗺️

Click anywhere on the map to set a destination, then tap Get Routes.

\n )}\n\n {routes.map((route: Route, idx: number) => {\n const mins = Math.round(route.summary.travelTimeInSeconds / 60);\n const km = (route.summary.lengthInMeters / 1000).toFixed(1);\n const delay = Math.round(route.summary.trafficDelayInSeconds / 60);\n const isBest = idx === 0 && delay <= (routes[1]?.summary?.trafficDelayInSeconds || 9999) / 60;\n return (\n setSelectedRoute(idx)}\n >\n

\n {route.label || `Route ${idx + 1}`}\n

\n {isBest && Best}\n {idx === selectedRoute && Selected}\n

\n {mins}\n min\n

\n {km}\n km\n

\n 5 ? \"var(--orange)\" : \"var(--green)\" }}>\n {delay > 0 ? `+${delay}` : \"0\"}\n \n min delay\n

\n {delay > 5\n ? ⚠️ Traffic delay of {delay} minutes on this route\n : ✅ Minimal traffic delay}\n

\n );\n })}\n \n );\n}\n\n// ─── Incidents Tab ────────────────────────────────────────────────────────────\nconst INCIDENT_ICONS: Record = {\n ACCIDENT: \"🚨\", JAM: \"🚗\", ROAD_WORK: \"🚧\", HAZARD: \"⚠️\",\n ROAD_CLOSURE: \"🚫\", DEFAULT: \"⚠️\",\n};\n\nfunction IncidentsTab({ incidents, loading }: { incidents: Incident[]; loading: boolean }) {\n if (loading) {\n return (\n

Scanning for incidents…

\n );\n }\n\n if (incidents.length === 0) {\n return (\n

✅

No incidents in view

Roads are clear in the visible area.

\n );\n }\n\n const sorted = [...incidents].sort((a, b) => b.severity - a.severity);\n\n return (\n <>\n

\n {incidents.length} active alert{incidents.length !== 1 ? \"s\" : \"\"} in view\n ● Live\n

\n {sorted.map((inc) => {\n const icon = INCIDENT_ICONS[inc.type] || INCIDENT_ICONS.DEFAULT;\n const cls = inc.severity >= 3 ? \"red\" : inc.severity === 2 ? \"orange\" : \"yellow\";\n const typeLabel = inc.type.replace(/_/g, \" \");\n return (\n

\n {icon}\n

{typeLabel}

{inc.description}

\n Severity {inc.severity}\n {inc.delay > 0 && +{inc.delay} min}\n

\n );\n })}\n \n );\n}\n","deleted","label",[180,181,164],"frontend","components","permalink","https://www.val.town/x/bartimeaus/TrafficIQ/code/frontend/components/Sidebar.tsx","extension","tsx","actionData","errors"]