Refactor: Implement DashboardLayout, fix mobile nav, and resolve scroll issues

components/DataSync.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useFinanzasStore } from '@/lib/store';
+
+export function DataSync() {
+  // const isHydrated = useFinanzasStore(state => state._hasHydrated); 
+  const store = useFinanzasStore();
+  const initialized = useRef(false);
+
+  useEffect(() => {
+    async function init() {
+      if (initialized.current) return;
+      initialized.current = true;
+
+      try {
+        const res = await fetch('/api/sync');
+        if (!res.ok) return;
+        const serverData = await res.json();
+        
+        // Simple logic: if server has data (debts or cards or something), trust server.
+        const hasServerData = serverData.fixedDebts?.length > 0 || serverData.creditCards?.length > 0;
+        
+        if (hasServerData) {
+          console.log("Sync: Hydrating from Server");
+          useFinanzasStore.setState(serverData);
+        } else {
+            // Server is empty, but we might have local data.
+            // Push local data to server to initialize it.
+            console.log("Sync: Initializing Server with Local Data");
+            syncToServer(useFinanzasStore.getState());
+        }
+      } catch (e) {
+        console.error("Sync init error", e);
+      }
+    }
+
+    init();
+  }, []);
+
+  // Sync on change
+  useEffect(() => {
+    if (!initialized.current) return;
+
+    const unsub = useFinanzasStore.subscribe((state) => {
+       syncToServer(state);
+    });
+    return () => unsub();
+  }, []);
+
+  return null;
+}
+
+let timeout: NodeJS.Timeout;
+function syncToServer(state: any) {
+  clearTimeout(timeout);
+  timeout = setTimeout(() => {
+    fetch('/api/sync', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify(state)
+    }).catch(e => console.error("Sync error", e));
+  }, 2000); // Debounce 2s
+}

components/layout/DashboardLayout.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { ReactNode, useEffect } from 'react'
+import { Sidebar, Header, MobileNav } from '@/components/layout'
+import { useSidebar } from '@/app/providers'
+import { useAlerts } from '@/components/alerts'
+
+interface DashboardLayoutProps {
+  children: ReactNode
+  title: string
+}
+
+export function DashboardLayout({ children, title }: DashboardLayoutProps) {
+  const { isOpen, toggle, close, open } = useSidebar()
+  const { unreadCount } = useAlerts()
+
+  // Ensure sidebar is open on desktop mount
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 1024) {
+        open()
+      } else {
+        close()
+      }
+    }
+
+    // Initial check
+    handleResize()
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [open, close])
+
+  return (
+    <div className="flex min-h-screen bg-slate-950">
+      {/* Sidebar */}
+      <Sidebar
+        isOpen={isOpen}
+        onClose={close}
+        unreadAlertsCount={unreadCount}
+      />
+
+      {/* Main content wrapper */}
+      <div className="flex flex-1 flex-col lg:ml-0 min-w-0">
+        {/* Header */}
+        <Header onMenuClick={toggle} title={title} />
+
+        {/* Page content */}
+        <main className="flex-1 p-4 md:p-6 lg:p-8 pb-24 lg:pb-8">
+          <div className="mx-auto max-w-7xl h-full">
+            {children}
+          </div>
+        </main>
+      </div>
+
+      {/* Mobile Navigation */}
+      <MobileNav unreadAlertsCount={unreadCount} />
+    </div>
+  )
+}

components/layout/Sidebar.tsx

@@ -8,6 +8,7 @@ import {
   Bell,
   Lightbulb,
   Settings,
+  TrendingUp,
   X,
 } from 'lucide-react';
 import Link from 'next/link';
@@ -22,6 +23,7 @@ interface SidebarProps {
 
 const navigationItems = [
   { name: 'Dashboard', href: '/', icon: LayoutDashboard },
+  { name: 'Ingresos', href: '/incomes', icon: TrendingUp },
   { name: 'Deudas', href: '/debts', icon: Wallet },
   { name: 'Tarjetas', href: '/cards', icon: CreditCard },
   { name: 'Presupuesto', href: '/budget', icon: PiggyBank },