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

components/settings/ofx-info-card.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { FileJson } from "lucide-react";
+
+export function OFXInfoCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <FileJson className="w-5 h-5" />
+          Format OFX
+        </CardTitle>
+        <CardDescription>
+          Informations sur l'import de fichiers
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="prose prose-sm text-muted-foreground">
+          <p>
+            L'application accepte les fichiers au format OFX (Open Financial
+            Exchange) ou QFX. Ces fichiers sont généralement disponibles depuis
+            l'espace client de votre banque.
+          </p>
+          <p className="mt-2">
+            Lors de l'import, les transactions sont automatiquement
+            catégorisées selon les mots-clés définis. Les doublons sont détectés
+            et ignorés automatiquement.
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+