feat: update transaction filters to support multiple category selection and enhance UI with active filters display

components/transactions/transaction-filters.tsx

@@ -2,6 +2,7 @@
 
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
 import {
   Select,
   SelectContent,
@@ -10,7 +11,8 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { CategoryFilterCombobox } from "@/components/ui/category-filter-combobox";
-import { Search } from "lucide-react";
+import { CategoryIcon } from "@/components/ui/category-icon";
+import { Search, X, Filter } from "lucide-react";
 import type { Account, Category } from "@/lib/types";
 
 interface TransactionFiltersProps {
@@ -18,8 +20,8 @@ interface TransactionFiltersProps {
   onSearchChange: (query: string) => void;
   selectedAccount: string;
   onAccountChange: (account: string) => void;
-  selectedCategory: string;
-  onCategoryChange: (category: string) => void;
+  selectedCategories: string[];
+  onCategoriesChange: (categories: string[]) => void;
   showReconciled: string;
   onReconciledChange: (value: string) => void;
   accounts: Account[];
@@ -31,8 +33,8 @@ export function TransactionFilters({
   onSearchChange,
   selectedAccount,
   onAccountChange,
-  selectedCategory,
-  onCategoryChange,
+  selectedCategories,
+  onCategoriesChange,
   showReconciled,
   onReconciledChange,
   accounts,
@@ -70,9 +72,9 @@ export function TransactionFilters({
 
           <CategoryFilterCombobox
             categories={categories}
-            value={selectedCategory}
-            onChange={onCategoryChange}
-            className="w-[200px]"
+            value={selectedCategories}
+            onChange={onCategoriesChange}
+            className="w-[220px]"
           />
 
           <Select value={showReconciled} onValueChange={onReconciledChange}>
@@ -86,8 +88,141 @@ export function TransactionFilters({
             </SelectContent>
           </Select>
         </div>
+
+        <ActiveFilters
+          searchQuery={searchQuery}
+          onClearSearch={() => onSearchChange("")}
+          selectedAccount={selectedAccount}
+          onClearAccount={() => onAccountChange("all")}
+          selectedCategories={selectedCategories}
+          onRemoveCategory={(id) => {
+            const newCategories = selectedCategories.filter((c) => c !== id);
+            onCategoriesChange(newCategories.length > 0 ? newCategories : ["all"]);
+          }}
+          onClearCategories={() => onCategoriesChange(["all"])}
+          showReconciled={showReconciled}
+          onClearReconciled={() => onReconciledChange("all")}
+          accounts={accounts}
+          categories={categories}
+        />
       </CardContent>
     </Card>
   );
 }
 
+function ActiveFilters({
+  searchQuery,
+  onClearSearch,
+  selectedAccount,
+  onClearAccount,
+  selectedCategories,
+  onRemoveCategory,
+  onClearCategories,
+  showReconciled,
+  onClearReconciled,
+  accounts,
+  categories,
+}: {
+  searchQuery: string;
+  onClearSearch: () => void;
+  selectedAccount: string;
+  onClearAccount: () => void;
+  selectedCategories: string[];
+  onRemoveCategory: (id: string) => void;
+  onClearCategories: () => void;
+  showReconciled: string;
+  onClearReconciled: () => void;
+  accounts: Account[];
+  categories: Category[];
+}) {
+  const hasSearch = searchQuery.trim() !== "";
+  const hasAccount = selectedAccount !== "all";
+  const hasCategories = !selectedCategories.includes("all");
+  const hasReconciled = showReconciled !== "all";
+
+  const hasActiveFilters = hasSearch || hasAccount || hasCategories || hasReconciled;
+
+  if (!hasActiveFilters) return null;
+
+  const account = accounts.find((a) => a.id === selectedAccount);
+  const selectedCats = categories.filter((c) => selectedCategories.includes(c.id));
+  const isUncategorized = selectedCategories.includes("uncategorized");
+
+  const clearAll = () => {
+    onClearSearch();
+    onClearAccount();
+    onClearCategories();
+    onClearReconciled();
+  };
+
+  return (
+    <div className="flex items-center gap-2 mt-3 pt-3 border-t border-border flex-wrap">
+      <Filter className="h-3.5 w-3.5 text-muted-foreground" />
+      
+      {hasSearch && (
+        <Badge variant="secondary" className="gap-1 text-xs font-normal">
+          Recherche: &quot;{searchQuery}&quot;
+          <button onClick={onClearSearch} className="ml-1 hover:text-foreground">
+            <X className="h-3 w-3" />
+          </button>
+        </Badge>
+      )}
+
+      {hasAccount && account && (
+        <Badge variant="secondary" className="gap-1 text-xs font-normal">
+          Compte: {account.name}
+          <button onClick={onClearAccount} className="ml-1 hover:text-foreground">
+            <X className="h-3 w-3" />
+          </button>
+        </Badge>
+      )}
+
+      {isUncategorized && (
+        <Badge variant="secondary" className="gap-1 text-xs font-normal">
+          Non catégorisé
+          <button onClick={onClearCategories} className="ml-1 hover:text-foreground">
+            <X className="h-3 w-3" />
+          </button>
+        </Badge>
+      )}
+
+      {selectedCats.map((cat) => (
+        <Badge
+          key={cat.id}
+          variant="secondary"
+          className="gap-1 text-xs font-normal"
+          style={{
+            backgroundColor: `${cat.color}15`,
+            borderColor: `${cat.color}30`,
+          }}
+        >
+          <CategoryIcon icon={cat.icon} color={cat.color} size={12} />
+          {cat.name}
+          <button
+            onClick={() => onRemoveCategory(cat.id)}
+            className="ml-1 hover:text-foreground"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </Badge>
+      ))}
+
+      {hasReconciled && (
+        <Badge variant="secondary" className="gap-1 text-xs font-normal">
+          {showReconciled === "reconciled" ? "Pointées" : "Non pointées"}
+          <button onClick={onClearReconciled} className="ml-1 hover:text-foreground">
+            <X className="h-3 w-3" />
+          </button>
+        </Badge>
+      )}
+
+      <button
+        onClick={clearAll}
+        className="text-xs text-muted-foreground hover:text-foreground ml-auto"
+      >
+        Effacer tout
+      </button>
+    </div>
+  );
+}
+