From 1ba507da94dd103576392e6877aee07c15f02f96 Mon Sep 17 00:00:00 2001
From: Michael SCHAL <michaelschal@gmail.com>
Date: Fri, 6 Mar 2026 15:15:11 +0100
Subject: [PATCH] feat: implement virtualized heatmap grid component with a
 Zustand store for managing grid data, filters, and draft product gamme
 changes.

---
 src/features/grid/components/heatmap-grid.tsx |  2 +-
 src/features/grid/store/use-grid-store.ts     | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/features/grid/components/heatmap-grid.tsx b/src/features/grid/components/heatmap-grid.tsx
index 9bcc334..bd5eaaa 100644
--- a/src/features/grid/components/heatmap-grid.tsx
+++ b/src/features/grid/components/heatmap-grid.tsx
@@ -179,7 +179,7 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) {
     const { rows, filters, displayDensity } = useGridStore();
     const [sorting, setSorting] = useState<SortingState>([]);
     const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-    const [columnVisibility, setColumnVisibility] = useState({});
+    const { columnVisibility, setColumnVisibility } = useGridStore();
     const [isMounted, setIsMounted] = useState(false);
     const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
     const tableContainerRef = useRef<HTMLDivElement>(null);
diff --git a/src/features/grid/store/use-grid-store.ts b/src/features/grid/store/use-grid-store.ts
index b06b47d..34bfcf1 100644
--- a/src/features/grid/store/use-grid-store.ts
+++ b/src/features/grid/store/use-grid-store.ts
@@ -14,6 +14,8 @@ interface GridState {
     displayDensity: "compact" | "normal" | "comfortable";
     /** The active URL search parameters (e.g. ?fournisseur=123&magasin=TOTAL) */
     activeGridQuery: string;
+    /** Persisted column visibility state */
+    columnVisibility: Record<string, boolean>;
 
     // Actions
     setRows: (rows: ProductRow[]) => void;
@@ -26,6 +28,7 @@ interface GridState {
     setActiveGridQuery: (query: string) => void;
     restoreSnapshot: (changes: Record<string, GammeCode>) => void;
     batchSetDraftGamme: (changes: Record<string, GammeCode>) => void;
+    setColumnVisibility: (updater: Record<string, boolean> | ((old: Record<string, boolean>) => Record<string, boolean>)) => void;
 }
 
 function computeSummary(rows: ProductRow[], drafts: Record<string, GammeCode>): GridSummary {
@@ -67,6 +70,7 @@ export const useGridStore = create<GridState>()(
             },
             displayDensity: "normal",
             activeGridQuery: "",
+            columnVisibility: {},
 
             setRows: (rows) => {
                 set({ rows, summary: computeSummary(rows, get().draftChanges) });
@@ -124,15 +128,22 @@ export const useGridStore = create<GridState>()(
 
                 set({ draftChanges: updatedDrafts, summary: computeSummary(rows, updatedDrafts) });
             },
+
+            setColumnVisibility: (updater) => {
+                set((state) => ({
+                    columnVisibility: typeof updater === 'function' ? updater(state.columnVisibility) : updater
+                }));
+            },
         }),
         {
             name: "collectflow-grid-storage",
-            // Only persist filters, display density, drafts, and active grid query
+            // Only persist filters, display density, drafts, active grid query, and column visibility
             partialize: (state) => ({
                 filters: state.filters,
                 displayDensity: state.displayDensity,
                 draftChanges: state.draftChanges,
                 activeGridQuery: state.activeGridQuery,
+                columnVisibility: state.columnVisibility,
             }),
         }
     )