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

app/page.tsx

@@ -1,25 +1,21 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Sidebar, Header, MobileNav } from '@/components/layout'
 import { SummarySection, QuickActions, RecentActivity } from '@/components/dashboard'
-import { useSidebar } from '@/app/providers'
 import { useFinanzasStore } from '@/lib/store'
 import { AlertBanner, useAlerts } from '@/components/alerts'
 import { AddDebtModal } from '@/components/modals/AddDebtModal'
 import { AddCardModal } from '@/components/modals/AddCardModal'
 import { AddPaymentModal } from '@/components/modals/AddPaymentModal'
+import { DashboardLayout } from '@/components/layout/DashboardLayout'
 
 export default function Home() {
-  // Sidebar control
-  const sidebar = useSidebar()
-
   // Datos del store
   const markAlertAsRead = useFinanzasStore((state) => state.markAlertAsRead)
   const deleteAlert = useFinanzasStore((state) => state.deleteAlert)
 
   // Alertas
-  const { unreadAlerts, unreadCount, regenerateAlerts } = useAlerts()
+  const { unreadAlerts, regenerateAlerts } = useAlerts()
 
   // Estados locales para modales
   const [isAddDebtModalOpen, setIsAddDebtModalOpen] = useState(false)
@@ -31,23 +27,6 @@ export default function Home() {
     regenerateAlerts()
   }, [regenerateAlerts])
 
-  // Efecto para manejar resize de ventana
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth >= 1024) {
-        sidebar.open()
-      } else {
-        sidebar.close()
-      }
-    }
-
-    // Estado inicial
-    handleResize()
-
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
-  }, [sidebar])
-
   // Handlers para modales
   const handleAddDebt = () => {
     setIsAddDebtModalOpen(true)
@@ -65,54 +44,35 @@ export default function Home() {
   const topAlerts = unreadAlerts.slice(0, 3)
 
   return (
-    <div className="flex min-h-screen bg-slate-950">
-      {/* Sidebar */}
-      <Sidebar
-        isOpen={sidebar.isOpen}
-        onClose={sidebar.close}
-        unreadAlertsCount={unreadCount}
-      />
-
-      {/* Main content */}
-      <div className="flex flex-1 flex-col lg:ml-0">
-        {/* Header */}
-        <Header onMenuClick={sidebar.toggle} title="Dashboard" />
-
-        {/* Main content area */}
-        <main className="flex-1 p-4 md:p-6 lg:p-8 pb-20 lg:pb-8">
-          <div className="mx-auto max-w-7xl space-y-6">
-            {/* Alertas destacadas */}
-            {topAlerts.length > 0 && (
-              <div className="space-y-3">
-                {topAlerts.map((alert) => (
-                  <AlertBanner
-                    key={alert.id}
-                    alert={alert}
-                    onDismiss={() => deleteAlert(alert.id)}
-                    onMarkRead={() => markAlertAsRead(alert.id)}
-                  />
-                ))}
-              </div>
-            )}
-
-            {/* Sección de resumen */}
-            <SummarySection />
-
-            {/* Acciones rápidas */}
-            <QuickActions
-              onAddDebt={handleAddDebt}
-              onAddCard={handleAddCard}
-              onAddPayment={handleAddPayment}
-            />
-
-            {/* Actividad reciente */}
-            <RecentActivity limit={5} />
+    <DashboardLayout title="Dashboard">
+      <div className="space-y-6">
+        {/* Alertas destacadas */}
+        {topAlerts.length > 0 && (
+          <div className="space-y-3">
+            {topAlerts.map((alert) => (
+              <AlertBanner
+                key={alert.id}
+                alert={alert}
+                onDismiss={() => deleteAlert(alert.id)}
+                onMarkRead={() => markAlertAsRead(alert.id)}
+              />
+            ))}
           </div>
-        </main>
-      </div>
+        )}
 
-      {/* Mobile navigation */}
-      <MobileNav unreadAlertsCount={unreadCount} />
+        {/* Sección de resumen */}
+        <SummarySection />
+
+        {/* Acciones rápidas */}
+        <QuickActions
+          onAddDebt={handleAddDebt}
+          onAddCard={handleAddCard}
+          onAddPayment={handleAddPayment}
+        />
+
+        {/* Actividad reciente */}
+        <RecentActivity limit={5} />
+      </div>
 
       {/* Modales */}
       <AddDebtModal
@@ -129,6 +89,6 @@ export default function Home() {
         isOpen={isAddPaymentModalOpen}
         onClose={() => setIsAddPaymentModalOpen(false)}
       />
-    </div>
+    </DashboardLayout>
   )
 }