feat: add categorization feature for transaction groups with UI enhancements for category selection

components/rules/rule-group-card.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { useState } from "react";
 import { ChevronDown, ChevronRight, Plus, Tag } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { CategoryCombobox } from "@/components/ui/category-combobox";
 import { cn } from "@/lib/utils";
 import type { Transaction, Category } from "@/lib/types";
 
@@ -19,6 +21,7 @@ interface RuleGroupCardProps {
   isExpanded: boolean;
   onToggleExpand: () => void;
   onCreateRule: () => void;
+  onCategorize: (categoryId: string | null) => void;
   categories: Category[];
   formatCurrency: (amount: number) => string;
   formatDate: (date: string) => string;
@@ -29,14 +32,23 @@ export function RuleGroupCard({
   isExpanded,
   onToggleExpand,
   onCreateRule,
+  onCategorize,
+  categories,
   formatCurrency,
   formatDate,
 }: RuleGroupCardProps) {
+  const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null);
+
   const avgAmount =
     group.transactions.reduce((sum, t) => sum + t.amount, 0) /
     group.transactions.length;
   const isDebit = avgAmount < 0;
 
+  const handleCategorySelect = (categoryId: string | null) => {
+    setSelectedCategoryId(null); // Reset après sélection
+    onCategorize(categoryId);
+  };
+
   return (
     <div className="border border-border rounded-lg bg-card overflow-hidden">
       {/* Header */}
@@ -85,17 +97,28 @@ export function RuleGroupCard({
             </div>
           </div>
 
-          <Button
-            size="sm"
-            onClick={(e) => {
-              e.stopPropagation();
-              onCreateRule();
-            }}
-            className="shrink-0"
-          >
-            <Plus className="h-4 w-4 mr-1" />
-            Créer règle
-          </Button>
+          <div className="flex items-center gap-2 shrink-0">
+            <div onClick={(e) => e.stopPropagation()}>
+              <CategoryCombobox
+                categories={categories}
+                value={selectedCategoryId}
+                onChange={handleCategorySelect}
+                placeholder="Catégoriser..."
+                width="w-[300px]"
+                buttonWidth="w-auto"
+              />
+            </div>
+            <Button
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                onCreateRule();
+              }}
+            >
+              <Plus className="h-4 w-4 mr-1" />
+              Créer règle
+            </Button>
+          </div>
         </div>
       </div>