feat: implement recategorization dialog for automatic transaction categorization results, enhancing user feedback and interaction

app/categories/page.tsx

@@ -10,14 +10,28 @@ import {
 } from "@/components/categories";
 import { useBankingData } from "@/lib/hooks";
 import { Button } from "@/components/ui/button";
-import { Plus } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import { CategoryIcon } from "@/components/ui/category-icon";
+import { Plus, ArrowRight, CheckCircle2, RefreshCw } from "lucide-react";
 import {
   autoCategorize,
   addCategory,
   updateCategory,
   deleteCategory,
 } from "@/lib/store-db";
-import type { Category } from "@/lib/types";
+import type { Category, Transaction } from "@/lib/types";
+
+interface RecategorizationResult {
+  transaction: Transaction;
+  category: Category;
+}
 
 export default function CategoriesPage() {
   const { data, isLoading, refresh } = useBankingData();
@@ -34,6 +48,9 @@ export default function CategoriesPage() {
     parentId: null as string | null,
   });
   const [searchQuery, setSearchQuery] = useState("");
+  const [recatResults, setRecatResults] = useState<RecategorizationResult[]>([]);
+  const [isRecatDialogOpen, setIsRecatDialogOpen] = useState(false);
+  const [isRecategorizing, setIsRecategorizing] = useState(false);
 
   // Organiser les catégories par parent
   const { parentCategories, childrenByParent, orphanCategories } =
@@ -195,12 +212,8 @@ export default function CategoriesPage() {
   };
 
   const reApplyAutoCategories = async () => {
-    if (
+    setIsRecategorizing(true);
-      !confirm(
+    const results: RecategorizationResult[] = [];
-        "Recatégoriser automatiquement les transactions non catégorisées ?"
-      )
-    )
-      return;
 
     try {
       const { updateTransaction } = await import("@/lib/store-db");
@@ -212,13 +225,22 @@ export default function CategoriesPage() {
           data.categories
         );
         if (categoryId) {
-          await updateTransaction({ ...transaction, categoryId });
+          const category = data.categories.find((c) => c.id === categoryId);
+          if (category) {
+            results.push({ transaction, category });
+            await updateTransaction({ ...transaction, categoryId });
+          }
         }
       }
+
+      setRecatResults(results);
+      setIsRecatDialogOpen(true);
       refresh();
     } catch (error) {
       console.error("Error re-categorizing:", error);
       alert("Erreur lors de la recatégorisation");
+    } finally {
+      setIsRecategorizing(false);
     }
   };
 
@@ -249,7 +271,14 @@ export default function CategoriesPage() {
         actions={
           <>
             {uncategorizedCount > 0 && (
-              <Button variant="outline" onClick={reApplyAutoCategories}>
+              <Button
+                variant="outline"
+                onClick={reApplyAutoCategories}
+                disabled={isRecategorizing}
+              >
+                {isRecategorizing ? (
+                  <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
+                ) : null}
                 Recatégoriser ({uncategorizedCount})
               </Button>
             )}
@@ -335,6 +364,72 @@ export default function CategoriesPage() {
         parentCategories={parentCategories}
         onSave={handleSave}
       />
+
+      {/* Dialog des résultats de recatégorisation */}
+      <Dialog open={isRecatDialogOpen} onOpenChange={setIsRecatDialogOpen}>
+        <DialogContent className="sm:max-w-lg max-h-[80vh] overflow-hidden flex flex-col">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <CheckCircle2 className="h-5 w-5 text-success" />
+              Recatégorisation terminée
+            </DialogTitle>
+            <DialogDescription>
+              {recatResults.length === 0
+                ? "Aucune transaction n'a pu être catégorisée automatiquement."
+                : `${recatResults.length} transaction${recatResults.length > 1 ? "s" : ""} catégorisée${recatResults.length > 1 ? "s" : ""}`}
+            </DialogDescription>
+          </DialogHeader>
+
+          {recatResults.length > 0 && (
+            <div className="flex-1 overflow-y-auto -mx-6 px-6">
+              <div className="space-y-2">
+                {recatResults.map((result, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center gap-3 p-2 rounded-lg bg-muted/50 text-sm"
+                  >
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium truncate">
+                        {result.transaction.description}
+                      </p>
+                      <p className="text-xs text-muted-foreground truncate">
+                        {new Date(result.transaction.date).toLocaleDateString("fr-FR")}
+                        {" • "}
+                        {new Intl.NumberFormat("fr-FR", {
+                          style: "currency",
+                          currency: "EUR",
+                        }).format(result.transaction.amount)}
+                      </p>
+                    </div>
+                    <ArrowRight className="h-4 w-4 text-muted-foreground shrink-0" />
+                    <Badge
+                      variant="secondary"
+                      className="gap-1 shrink-0"
+                      style={{
+                        backgroundColor: `${result.category.color}20`,
+                        color: result.category.color,
+                      }}
+                    >
+                      <CategoryIcon
+                        icon={result.category.icon}
+                        color={result.category.color}
+                        size={12}
+                      />
+                      {result.category.name}
+                    </Badge>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className="flex justify-end pt-4 border-t">
+            <Button onClick={() => setIsRecatDialogOpen(false)}>
+              Fermer
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
     </PageLayout>
   );
 }