Fix: Multi-user data isolation and Legacy migration logic

components/layout/Sidebar.tsx

@@ -10,8 +10,10 @@ import {
   Settings,
   TrendingUp,
   X,
+  LogOut,
 } from 'lucide-react';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import { usePathname } from 'next/navigation';
 import { Logo } from './Logo';
 
@@ -38,6 +40,7 @@ export function Sidebar({
   unreadAlertsCount = 0,
 }: SidebarProps) {
   const pathname = usePathname();
+  const router = useRouter();
 
   const isActive = (href: string) => {
     if (href === '/') {
@@ -46,6 +49,18 @@ export function Sidebar({
     return pathname.startsWith(href);
   };
 
+  const handleLogout = async () => {
+    try {
+      await fetch('/api/auth/logout', { method: 'POST' });
+      // Clear local data to avoid leaking to other users
+      localStorage.removeItem('finanzas-storage');
+      router.push('/login');
+      router.refresh();
+    } catch (e) {
+      console.error('Logout failed', e);
+    }
+  };
+
   return (
     <>
       {/* Mobile overlay */}
@@ -112,6 +127,16 @@ export function Sidebar({
                 );
               })}
             </ul>
+
+            <div className="mt-auto px-3 py-3 border-t border-slate-800">
+              <button
+                onClick={handleLogout}
+                className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-400 hover:bg-red-500/10 hover:text-red-400 transition-colors"
+              >
+                <LogOut className="w-5 h-5 flex-shrink-0" />
+                <span className="flex-1 text-left">Cerrar Sesión</span>
+              </button>
+            </div>
           </nav>
 
           {/* Footer */}