feat: refactor dashboard and account pages to utilize new layout components, enhancing structure and loading states

app/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Sidebar } from "@/components/dashboard/sidebar";
+import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
 import { OverviewCards } from "@/components/dashboard/overview-cards";
 import { RecentTransactions } from "@/components/dashboard/recent-transactions";
 import { AccountsSummary } from "@/components/dashboard/accounts-summary";
@@ -8,55 +8,39 @@ import { CategoryBreakdown } from "@/components/dashboard/category-breakdown";
 import { OFXImportDialog } from "@/components/import/ofx-import-dialog";
 import { useBankingData } from "@/lib/hooks";
 import { Button } from "@/components/ui/button";
-import { Upload, RefreshCw } from "lucide-react";
+import { Upload } from "lucide-react";
 
 export default function DashboardPage() {
   const { data, isLoading, refresh } = useBankingData();
 
   if (isLoading || !data) {
-    return (
-      <div className="flex h-screen">
-        <Sidebar />
-        <main className="flex-1 flex items-center justify-center">
-          <RefreshCw className="w-8 h-8 animate-spin text-muted-foreground" />
-        </main>
-      </div>
-    );
+    return <LoadingState />;
   }
 
   return (
-    <div className="flex h-screen bg-background">
-      <Sidebar />
-      <main className="flex-1 overflow-auto">
-        <div className="p-6 space-y-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-2xl font-bold text-foreground">
-                Tableau de bord
-              </h1>
-              <p className="text-muted-foreground">
-                Vue d'ensemble de vos finances
-              </p>
-            </div>
-            <OFXImportDialog onImportComplete={refresh}>
-              <Button>
-                <Upload className="w-4 h-4 mr-2" />
-                Importer OFX
-              </Button>
-            </OFXImportDialog>
-          </div>
+    <PageLayout>
+      <PageHeader
+        title="Tableau de bord"
+        description="Vue d'ensemble de vos finances"
+        actions={
+          <OFXImportDialog onImportComplete={refresh}>
+            <Button>
+              <Upload className="w-4 h-4 mr-2" />
+              Importer OFX
+            </Button>
+          </OFXImportDialog>
+        }
+      />
 
-          <OverviewCards data={data} />
+      <OverviewCards data={data} />
 
-          <div className="grid gap-6 lg:grid-cols-2">
-            <RecentTransactions data={data} />
-            <div className="space-y-6">
-              <AccountsSummary data={data} />
-              <CategoryBreakdown data={data} />
-            </div>
-          </div>
+      <div className="grid gap-6 lg:grid-cols-2">
+        <RecentTransactions data={data} />
+        <div className="space-y-6">
+          <AccountsSummary data={data} />
+          <CategoryBreakdown data={data} />
         </div>
-      </main>
-    </div>
+      </div>
+    </PageLayout>
   );
 }