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

app/rules/page.tsx

@@ -210,6 +210,25 @@ export default function RulesPage() {
     }
   }, [data, refresh]);
 
+  const handleCategorizeGroup = useCallback(
+    async (group: TransactionGroup, categoryId: string | null) => {
+      if (!data) return;
+
+      try {
+        await Promise.all(
+          group.transactions.map((t) =>
+            updateTransaction({ ...t, categoryId })
+          )
+        );
+        refresh();
+      } catch (error) {
+        console.error("Error categorizing group:", error);
+        alert("Erreur lors de la catégorisation");
+      }
+    },
+    [data, refresh]
+  );
+
   if (isLoading || !data) {
     return <LoadingState />;
   }
@@ -277,6 +296,9 @@ export default function RulesPage() {
               isExpanded={expandedGroups.has(group.key)}
               onToggleExpand={() => toggleExpand(group.key)}
               onCreateRule={() => handleCreateRule(group)}
+              onCategorize={(categoryId) =>
+                handleCategorizeGroup(group, categoryId)
+              }
               categories={data.categories}
               formatCurrency={formatCurrency}
               formatDate={formatDate}

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>
 

components/transactions/transaction-bulk-actions.tsx

@@ -1,16 +1,10 @@
 "use client";
 
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuSeparator,
-} from "@/components/ui/dropdown-menu";
-import { CategoryIcon } from "@/components/ui/category-icon";
-import { CheckCircle2, Circle, Tags } from "lucide-react";
+import { CategoryCombobox } from "@/components/ui/category-combobox";
+import { CheckCircle2, Circle } from "lucide-react";
 import type { Category } from "@/lib/types";
 
 interface TransactionBulkActionsProps {
@@ -26,8 +20,15 @@ export function TransactionBulkActions({
   onReconcile,
   onSetCategory,
 }: TransactionBulkActionsProps) {
+  const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null);
+
   if (selectedCount === 0) return null;
 
+  const handleCategorySelect = (categoryId: string | null) => {
+    setSelectedCategoryId(null); // Reset après sélection
+    onSetCategory(categoryId);
+  };
+
   return (
     <Card className="bg-primary/5 border-primary/20">
       <CardContent className="py-3">
@@ -47,34 +48,14 @@ export function TransactionBulkActions({
             <Circle className="w-4 h-4 mr-1" />
             Dépointer
           </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size="sm" variant="outline">
-                <Tags className="w-4 h-4 mr-1" />
-                Catégoriser
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuItem onClick={() => onSetCategory(null)}>
-                Aucune catégorie
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              {categories.map((cat) => (
-                <DropdownMenuItem
-                  key={cat.id}
-                  onClick={() => onSetCategory(cat.id)}
-                >
-                  <CategoryIcon
-                    icon={cat.icon}
-                    color={cat.color}
-                    size={14}
-                    className="mr-2"
-                  />
-                  {cat.name}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
+          <CategoryCombobox
+            categories={categories}
+            value={selectedCategoryId}
+            onChange={handleCategorySelect}
+            placeholder="Catégoriser..."
+            width="w-[300px]"
+            buttonWidth="w-auto"
+          />
         </div>
       </CardContent>
     </Card>

components/ui/category-combobox.tsx

@@ -29,6 +29,7 @@ interface CategoryComboboxProps {
   showBadge?: boolean;
   align?: "start" | "center" | "end";
   width?: string;
+  buttonWidth?: string;
 }
 
 export function CategoryCombobox({
@@ -39,6 +40,7 @@ export function CategoryCombobox({
   showBadge = false,
   align = "start",
   width = "w-[300px]",
+  buttonWidth,
 }: CategoryComboboxProps) {
   const [open, setOpen] = useState(false);
 
@@ -181,7 +183,10 @@ export function CategoryCombobox({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-full justify-between"
+          className={cn(
+            "justify-between",
+            buttonWidth || "w-full"
+          )}
         >
           {selectedCategory ? (
             <div className="flex items-center gap-2">
@@ -207,6 +212,21 @@ export function CategoryCombobox({
           <CommandInput placeholder="Rechercher une catégorie..." />
           <CommandList className="max-h-[250px]">
             <CommandEmpty>Aucune catégorie trouvée.</CommandEmpty>
+            <CommandGroup>
+              <CommandItem
+                value="__none__"
+                onSelect={() => handleSelect(null)}
+              >
+                <X className="h-4 w-4 text-muted-foreground" />
+                <span className="text-muted-foreground">Aucune catégorie</span>
+                <Check
+                  className={cn(
+                    "ml-auto h-4 w-4",
+                    value === null ? "opacity-100" : "opacity-0"
+                  )}
+                />
+              </CommandItem>
+            </CommandGroup>
             <CommandGroup>
               {parentCategories.map((parent) => (
                 <div key={parent.id}>