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

app/debts/page.tsx

@@ -1,32 +1,12 @@
 'use client'
 
-import { Sidebar, Header, MobileNav } from '@/components/layout'
+import { DashboardLayout } from '@/components/layout/DashboardLayout'
 import { DebtSection } from '@/components/debts'
-import { useSidebar } from '@/app/providers'
-import { useAlerts } from '@/components/alerts'
 
 export default function DebtsPage() {
-  const { isOpen, close, open } = useSidebar()
-  const { unreadCount } = useAlerts()
-
   return (
-    <div className="min-h-screen bg-slate-950">
-      {/* Sidebar */}
-      <Sidebar isOpen={isOpen} onClose={close} unreadAlertsCount={unreadCount} />
-
-      {/* Main content */}
-      <div className="lg:ml-64 min-h-screen flex flex-col">
-        {/* Header */}
-        <Header onMenuClick={open} title="Deudas" />
-
-        {/* Page content */}
-        <main className="flex-1 p-4 md:p-6 lg:p-8 pb-20 lg:pb-8">
-          <DebtSection />
-        </main>
-      </div>
-
-      {/* Mobile Navigation */}
-      <MobileNav unreadAlertsCount={unreadCount} />
-    </div>
+    <DashboardLayout title="Deudas">
+      <DebtSection />
+    </DashboardLayout>
   )
 }