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

components/settings/data-card.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Download, Upload, Database } from "lucide-react";
+import type { BankingData } from "@/lib/types";
+
+interface DataCardProps {
+  data: BankingData;
+  importing: boolean;
+  onExport: () => void;
+  onImport: () => void;
+}
+
+export function DataCard({
+  data,
+  importing,
+  onExport,
+  onImport,
+}: DataCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Database className="w-5 h-5" />
+          Données
+        </CardTitle>
+        <CardDescription>
+          Exportez ou importez vos données pour les sauvegarder ou les
+          transférer
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center justify-between p-4 bg-muted rounded-lg">
+          <div>
+            <p className="font-medium">Statistiques</p>
+            <p className="text-sm text-muted-foreground">
+              {data.accounts.length} comptes, {data.transactions.length}{" "}
+              transactions, {data.categories.length} catégories
+            </p>
+          </div>
+        </div>
+
+        <div className="flex gap-2">
+          <Button
+            onClick={onExport}
+            variant="outline"
+            className="flex-1 bg-transparent"
+          >
+            <Download className="w-4 h-4 mr-2" />
+            Exporter (JSON)
+          </Button>
+          <Button
+            onClick={onImport}
+            variant="outline"
+            className="flex-1 bg-transparent"
+            disabled={importing}
+          >
+            <Upload className="w-4 h-4 mr-2" />
+            {importing ? "Import..." : "Importer"}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+