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

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 },