Route Management Section - Copy this React, Tailwind Component to your project

1. Route Management Section Layout: Full width section with a top bar and two main columns below Top Bar: Search bar for finding specific routes (width: 30%) Filter dropdown (options: All, Active, Inactive, Optimized, Needs Optimization) "Add New Route" button (right aligned) Left Column (40% width): Scrollable list of routes Each route item: Route number and name (e.g., "Route 42 Downtown Express") Efficiency score as a circular progress bar (color coded: green >85%, yellow 70 85%, red <70%) Small icon indicating status (checkmark for active, pause symbol for inactive) Truncated description (max 2 lines) Clicking a route selects it, highlighting the item and loading details in the right column Right Column (60% width): Top: Interactive map Satellite/street view toggle Route displayed as a colored line Stops shown as numbered pins Zoom in/out controls Below map: Tabs for different information panels Overview Tab: Start and end point names Total distance Number of stops Average daily ridership Fuel consumption (daily average) CO2 emissions (daily average) Schedule Tab: Weekday/Weekend toggle Timetable showing departure times from each stop Performance Tab: Line graphs for past 30 days: On time performance Ridership Fuel efficiency Optimization Tab: AI generated suggestions for route improvements Each suggestion has an "Apply" button Bottom of right column: "Edit Route" button "Optimize Route" button (opens optimization wizard)