feat: implement client-side grid with heatmap and associated components for product assortment revision.

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]);
 

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";