"use client"; import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarSeparator, } from "@/components/ui/sidebar"; import { MapPin, Network, Plane, Truck } from "lucide-react"; import { cn } from "@/lib/utils"; import { regionLabels, statusConfig, type Filter, type Hub, type Route, } from "../data"; interface FilterSidebarProps { hubs: Hub[]; routes: Route[]; visibleRoutes: Route[]; hidden: Set; onToggle: (filter: Filter) => void; } export function FilterSidebar({ hubs, routes, visibleRoutes, hidden, onToggle, }: FilterSidebarProps) { const totalShipments = visibleRoutes.reduce((s, r) => s + r.shipments, 0); const onTimeShipments = visibleRoutes .filter((r) => r.status === "active") .reduce((s, r) => s + r.shipments, 0); const delayedShipments = totalShipments - onTimeShipments; const onTimeRate = totalShipments ? Math.round((onTimeShipments / totalShipments) * 100) : 0; const activeCount = routes.filter((r) => r.status === "active").length; const delayedCount = routes.filter((r) => r.status === "delayed").length; const airRouteCount = routes.filter((r) => r.mode === "air").length; const groundRouteCount = routes.filter((r) => r.mode === "ground").length; return (

Logistics Network Domestic Routes

{( [ ["active", onTimeShipments], ["delayed", delayedShipments], ] as const ) .filter(([, value]) => value > 0) .map(([status, value]) => ( ))}

Transport Mode Status {(["active", "delayed"] as const).map((status) => ( ))} Region {(["west", "midwest", "south", "northeast"] as const).map( (region) => ( h.region === region).length} hidden={hidden.has(region)} onToggle={() => onToggle(region)} > ), )} ); } function Stat({ label, value }: { label: string; value: number | string }) { return (

{label}

{value}

); } function FilterItem({ label, count, hidden, onToggle, children, }: { label: string; count: number; hidden: boolean; onToggle: () => void; children: React.ReactNode; }) { return ( ); }