feat: add icon support to category creation and editing, enhance transaction rule creation with new dialog and filters

components/transactions/transaction-filters.tsx

@@ -9,6 +9,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { CategoryFilterCombobox } from "@/components/ui/category-filter-combobox";
 import { Search } from "lucide-react";
 import type { Account, Category } from "@/lib/types";
 
@@ -67,20 +68,12 @@ export function TransactionFilters({
             </SelectContent>
           </Select>
 
-          <Select value={selectedCategory} onValueChange={onCategoryChange}>
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder="Catégorie" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">Toutes catégories</SelectItem>
-              <SelectItem value="uncategorized">Non catégorisé</SelectItem>
-              {categories.map((category) => (
-                <SelectItem key={category.id} value={category.id}>
-                  {category.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <CategoryFilterCombobox
+            categories={categories}
+            value={selectedCategory}
+            onChange={onCategoryChange}
+            className="w-[200px]"
+          />
 
           <Select value={showReconciled} onValueChange={onReconciledChange}>
             <SelectTrigger className="w-[160px]">

components/transactions/transaction-table.tsx

@@ -16,7 +16,9 @@ import {
   Circle,
   MoreVertical,
   ArrowUpDown,
+  Wand2,
 } from "lucide-react";
+import { DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import type { Transaction, Account, Category } from "@/lib/types";
 
@@ -36,6 +38,7 @@ interface TransactionTableProps {
   onToggleReconciled: (id: string) => void;
   onMarkReconciled: (id: string) => void;
   onSetCategory: (transactionId: string, categoryId: string | null) => void;
+  onCreateRule: (transaction: Transaction) => void;
   formatCurrency: (amount: number) => string;
   formatDate: (dateStr: string) => string;
 }
@@ -53,6 +56,7 @@ export function TransactionTable({
   onToggleReconciled,
   onMarkReconciled,
   onSetCategory,
+  onCreateRule,
   formatCurrency,
   formatDate,
 }: TransactionTableProps) {
@@ -266,6 +270,13 @@ export function TransactionTable({
                                 ? "Dépointer"
                                 : "Pointer"}
                             </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem
+                              onClick={() => onCreateRule(transaction)}
+                            >
+                              <Wand2 className="w-4 h-4 mr-2" />
+                              Créer une règle
+                            </DropdownMenuItem>
                           </DropdownMenuContent>
                         </DropdownMenu>
                       </td>