From 56b09a438d75b49e96169002fee1f4147c81b229 Mon Sep 17 00:00:00 2001
From: R0m1k3 <michaelschal@gmail.com>
Date: Thu, 5 Mar 2026 10:23:39 +0100
Subject: [PATCH] feat: implement client-side grid with heatmap and associated
 components for product assortment revision.

---
 src/features/grid/components/grid-client.tsx  | 8 +++++---
 src/features/grid/components/heatmap-cell.tsx | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/features/grid/components/grid-client.tsx b/src/features/grid/components/grid-client.tsx
index 0bab401..b4290ae 100644
--- a/src/features/grid/components/grid-client.tsx
+++ b/src/features/grid/components/grid-client.tsx
@@ -55,9 +55,11 @@ export function GridClient({ initialRows, nomFournisseur, fournisseurs, magasins
 
     useEffect(() => {
         if (!isMounted) return;
-        // Deep clone to avoid mutating the React prop directly across re-renders
-        const rowsCopy = JSON.parse(JSON.stringify(initialRows));
-        const scoredRows = computeProductScores(rowsCopy, { seuilAxeFort, bonusParAxe });
+
+        // Optimisation : On évite le JSON.parse(JSON.stringify()) qui est très lourd sur 1000 lignes
+        // On passe directement les initialRows au moteur de score, ou on fait une copie superficielle si nécessaire.
+        // Le moteur de score doit idéalement retourner de nouveaux objets.
+        const scoredRows = computeProductScores([...initialRows], { seuilAxeFort, bonusParAxe });
         setRows(scoredRows);
     }, [initialRows, setRows, seuilAxeFort, bonusParAxe, isMounted]);
 
diff --git a/src/features/grid/components/heatmap-cell.tsx b/src/features/grid/components/heatmap-cell.tsx
index 7b9f7f3..69a99e2 100644
--- a/src/features/grid/components/heatmap-cell.tsx
+++ b/src/features/grid/components/heatmap-cell.tsx
@@ -1,4 +1,4 @@
-"use client";
+import React from "react";
 
 interface HeatmapCellProps {
     value: number | null;
@@ -13,7 +13,7 @@ function getHeatmapClass(value: number | null): string {
     return "heatmap-zero";
 }
 
-export function HeatmapCell({ value }: HeatmapCellProps) {
+export const HeatmapCell = React.memo(({ value }: HeatmapCellProps) => {
     const heatClass = getHeatmapClass(value);
     const display = value === null || value === 0 ? "—" : Math.round(Math.abs(value)).toString();
 
@@ -25,4 +25,6 @@ export function HeatmapCell({ value }: HeatmapCellProps) {
             {display}
         </div>
     );
-}
+});
+
+HeatmapCell.displayName = "HeatmapCell";