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

components/settings/danger-zone-card.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Trash2, Tags } from "lucide-react";
+
+interface DangerZoneCardProps {
+  categorizedCount: number;
+  onClearCategories: () => void;
+  onResetData: () => void;
+}
+
+export function DangerZoneCard({
+  categorizedCount,
+  onClearCategories,
+  onResetData,
+}: DangerZoneCardProps) {
+  return (
+    <Card className="border-red-200">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-red-600">
+          <Trash2 className="w-5 h-5" />
+          Zone dangereuse
+        </CardTitle>
+        <CardDescription>
+          Actions irréversibles - procédez avec prudence
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {/* Supprimer catégories des opérations */}
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button
+              variant="outline"
+              className="w-full justify-start border-orange-300 text-orange-700 hover:bg-orange-50"
+            >
+              <Tags className="w-4 h-4 mr-2" />
+              Supprimer les catégories des opérations
+              <span className="ml-auto text-xs text-muted-foreground">
+                {categorizedCount} opération
+                {categorizedCount > 1 ? "s" : ""} catégorisée
+                {categorizedCount > 1 ? "s" : ""}
+              </span>
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>
+                Supprimer toutes les catégories ?
+              </AlertDialogTitle>
+              <AlertDialogDescription>
+                Cette action va retirer la catégorie de {categorizedCount}{" "}
+                opération{categorizedCount > 1 ? "s" : ""}. Les catégories
+                elles-mêmes ne seront pas supprimées, seulement leur
+                affectation aux opérations.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Annuler</AlertDialogCancel>
+              <AlertDialogAction
+                onClick={onClearCategories}
+                className="bg-orange-600 hover:bg-orange-700"
+              >
+                Supprimer les affectations
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+
+        {/* Réinitialiser toutes les données */}
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button variant="destructive" className="w-full justify-start">
+              <Trash2 className="w-4 h-4 mr-2" />
+              Réinitialiser toutes les données
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Êtes-vous sûr ?</AlertDialogTitle>
+              <AlertDialogDescription>
+                Cette action supprimera définitivement tous vos comptes,
+                transactions, catégories et dossiers. Cette action est
+                irréversible.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Annuler</AlertDialogCancel>
+              <AlertDialogAction
+                onClick={onResetData}
+                className="bg-red-600 hover:bg-red-700"
+              >
+                Supprimer tout
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </CardContent>
+    </Card>
+  );
+}
+