diff --git a/src/features/grid/components/grid-filter-bar.tsx b/src/features/grid/components/grid-filter-bar.tsx index be57a84..8a967b4 100644 --- a/src/features/grid/components/grid-filter-bar.tsx +++ b/src/features/grid/components/grid-filter-bar.tsx @@ -1,5 +1,6 @@ "use client"; +import React, { useMemo } from "react"; import { Search, X, ChevronDown } from "lucide-react"; import { useGridStore } from "@/features/grid/store/use-grid-store"; import { GammeCode } from "@/types/grid"; @@ -25,10 +26,25 @@ interface GridFilterBarProps { } export function GridFilterBar({ fournisseurs, magasins, nomenclature }: GridFilterBarProps) { - const { filters, setFilter } = useGridStore(); + const { filters, setFilter, rows, draftChanges } = useGridStore(); const router = useRouter(); const searchParams = useSearchParams(); + // Compute dynamic counts per Gamme + const gammeCounts = React.useMemo(() => { + const counts: Record = { A: 0, B: 0, C: 0, Z: 0, Total: 0 }; + rows.forEach(r => { + const effectiveGamme = draftChanges[r.codein] ?? r.codeGamme; + if (effectiveGamme && counts[effectiveGamme] !== undefined) { + counts[effectiveGamme]++; + } + if (effectiveGamme !== "Z") { + counts.Total++; // Active references (non-Z) + } + }); + return counts; + }, [rows, draftChanges]); + const handleSupplierSelect = (code: string) => { const params = new URLSearchParams(searchParams.toString()); params.set("fournisseur", code); @@ -88,24 +104,33 @@ export function GridFilterBar({ fournisseurs, magasins, nomenclature }: GridFilt className="flex items-center gap-1 p-0.5 rounded-md" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)" }} > - {GAMME_FILTERS.map(({ label, value }) => ( - - ))} + {GAMME_FILTERS.map(({ label, value }) => { + const count = value === null ? rows.length : gammeCounts[value]; + return ( + + ); + })} {/* Nomenclature filter */}