feat: Add Route Optimization to sidebar nav + App router

ops/AIsupplychain/aisupply/src/components/Sidebar.tsx

@@ -1,10 +1,11 @@
-import { LayoutDashboard, BarChart3, FileText, FileSpreadsheet, Users, LogOut, Leaf, Package, ClipboardList, Navigation, Brain, Shield, Key, Layers } from 'lucide-react';
+import { LayoutDashboard, BarChart3, FileText, FileSpreadsheet, Users, LogOut, Leaf, Package, ClipboardList, Navigation, Brain, Shield, Key, Layers, Route } from 'lucide-react';
 import { cn } from '../lib/utils';
 import { NavLink } from 'react-router-dom';
 
 const navItems = [
   { icon: LayoutDashboard, label: 'Dashboard', to: '/' },
   { icon: Brain, label: 'AI Fair Dispatch', to: '/fair-dispatch' },
+  { icon: Route, label: 'Route Optimizer', to: '/route-optimization' },
   { icon: FileSpreadsheet, label: 'Absorption', to: '/absorption-requests' },
   { icon: Package, label: 'Packages', to: '/packages' },
   { icon: ClipboardList, label: 'Assign Tasks', to: '/assign-tasks' },
@@ -31,19 +32,19 @@ export function Sidebar() {
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1 px-3 py-4 space-y-1">
+      <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto custom-scrollbar">
         {navItems.map((item) => (
           <NavLink
             key={item.to}
             to={item.to}
             className={({ isActive }) => cn(
-              "w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-all duration-200 group text-sm font-medium",
+              "w-full flex items-center space-x-3 px-4 py-2.5 rounded-lg transition-all duration-200 group text-sm font-medium",
               isActive 
                 ? "bg-gradient-to-r from-orange-600 to-amber-500 text-white shadow-lg shadow-orange-600/20" 
                 : "text-eco-text-secondary hover:bg-eco-secondary hover:text-white"
             )}
           >
-            <item.icon className={cn("w-5 h-5 transition-colors", 
+            <item.icon className={cn("w-4.5 h-4.5 transition-colors", 
                 "group-[.active]:text-white"
             )} />
             <span>{item.label}</span>
@@ -53,8 +54,8 @@ export function Sidebar() {
 
       {/* User Profile & Logout */}
       <div className="p-4 border-t border-eco-card-border mt-auto">
-        <NavLink to="/admin" className="flex items-center space-x-3 mb-4 px-2 hover:bg-eco-secondary/50 p-2 rounded-lg transition-colors group">
-            <div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-600 to-amber-500 flex items-center justify-center text-white font-bold group-hover:shadow-neon-orange transition-all">
+        <NavLink to="/admin" className="flex items-center space-x-3 mb-3 px-2 hover:bg-eco-secondary/50 p-2 rounded-lg transition-colors group">
+            <div className="w-9 h-9 rounded-full bg-gradient-to-br from-orange-600 to-amber-500 flex items-center justify-center text-white font-bold text-sm group-hover:shadow-neon-orange transition-all">
                 A
             </div>
             <div>
@@ -63,7 +64,7 @@ export function Sidebar() {
             </div>
         </NavLink>
         <button className="flex items-center space-x-3 text-eco-text-secondary hover:text-white transition-colors px-2 py-2 w-full hover:bg-eco-secondary rounded-lg">
-            <LogOut className="w-5 h-5" />
+            <LogOut className="w-4 h-4" />
             <span className="text-sm font-medium">Logout</span>
         </button>
       </div>