From 804328a525f268e688c207be76f0e5cfe72df125 Mon Sep 17 00:00:00 2001
From: Michael <michael@collectflow.local>
Date: Sun, 22 Feb 2026 13:23:11 +0100
Subject: [PATCH] feat: Implement a new heatmap grid component for product data
 visualization and selection, and create new bulk AI analyzer and floating
 summary bar components.

---
 .../grid/components/bulk-ai-analyzer.tsx      | 20 +++++++++----------
 .../grid/components/floating-summary-bar.tsx  | 15 ++++++--------
 src/features/grid/components/heatmap-grid.tsx |  7 ++++---
 3 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/features/grid/components/bulk-ai-analyzer.tsx b/src/features/grid/components/bulk-ai-analyzer.tsx
index a1b4f52..1c4553b 100644
--- a/src/features/grid/components/bulk-ai-analyzer.tsx
+++ b/src/features/grid/components/bulk-ai-analyzer.tsx
@@ -188,15 +188,15 @@ export function BulkAiAnalyzer() {
 
     if (isAnalyzing) {
         return (
-            <div className="flex items-center gap-4 px-4 py-2 rounded-xl bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-800">
+            <div className="flex items-center gap-4 h-10 px-4 rounded-xl bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-800">
                 <Loader2 className="w-4 h-4 text-indigo-500 animate-spin" />
                 <div className="flex flex-col min-w-[150px]">
-                    <span className="text-xs font-bold text-indigo-700 dark:text-indigo-400">
+                    <span className="text-[10px] font-bold text-indigo-700 dark:text-indigo-400 leading-none">
                         {progress.message}
                     </span>
-                    <div className="w-full bg-indigo-200 dark:bg-indigo-800/50 rounded-full h-1.5 mt-1.5">
+                    <div className="w-full bg-indigo-200 dark:bg-indigo-800/50 rounded-full h-1 mt-1">
                         <div
-                            className="bg-indigo-500 h-1.5 rounded-full transition-all duration-300"
+                            className="bg-indigo-500 h-1 rounded-full transition-all duration-300"
                             style={{ width: `${Math.max(5, (progress.current / progress.total) * 100)}%` }}
                         ></div>
                     </div>
@@ -206,7 +206,7 @@ export function BulkAiAnalyzer() {
                     className="p-1 hover:bg-indigo-100 dark:hover:bg-indigo-800 rounded-lg transition-colors text-indigo-600 dark:text-indigo-400"
                     title="Arrêter l'analyse"
                 >
-                    <XCircle className="w-5 h-5" />
+                    <XCircle className="w-4 h-4" />
                 </button>
             </div>
         );
@@ -214,12 +214,12 @@ export function BulkAiAnalyzer() {
 
     if (progress.current > 0 && !isAnalyzing) {
         return (
-            <div className="flex items-center gap-2 px-4 py-2 rounded-xl bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-800 cursor-default">
+            <div className="flex items-center gap-2 h-10 px-4 rounded-xl bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-800 cursor-default">
                 <CheckCircle2 className="w-4 h-4 text-emerald-600 dark:text-emerald-500" />
                 <span className="text-xs font-bold text-emerald-700 dark:text-emerald-400">
                     {progress.errors > 0
-                        ? `Terminé (${progress.current - progress.errors}/${progress.total} OK)`
-                        : `Analyse terminée (${progress.total} produits)`
+                        ? `Terminé (${progress.current - progress.errors}/${progress.total})`
+                        : `Analyse Terminée`
                     }
                 </span>
             </div>
@@ -229,10 +229,10 @@ export function BulkAiAnalyzer() {
     return (
         <button
             onClick={handleAnalyze}
-            className="group flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition-all shadow-sm bg-gradient-to-r from-indigo-500 to-violet-500 text-white hover:shadow-md hover:brightness-110 active:scale-95 border border-indigo-400"
+            className="group flex items-center justify-center gap-2 h-10 px-6 rounded-xl text-sm font-bold transition-all shadow-sm bg-gradient-to-r from-indigo-500 to-violet-500 text-white hover:shadow-md hover:brightness-110 active:scale-95 border border-indigo-400"
         >
             <Sparkles className="w-4 h-4" />
-            Analyse IA Globale
+            Analyse IA
         </button>
     );
 }
diff --git a/src/features/grid/components/floating-summary-bar.tsx b/src/features/grid/components/floating-summary-bar.tsx
index c965638..0a5829f 100644
--- a/src/features/grid/components/floating-summary-bar.tsx
+++ b/src/features/grid/components/floating-summary-bar.tsx
@@ -75,19 +75,16 @@ export function FloatingSummaryBar() {
                         const currentDrafts = currentState.draftChanges;
                         const currentRows = currentState.rows;
 
-                        // On définit les lignes modifiées comme étant soit dans les drafts, 
-                        // soit ayant une gamme différente de la gamme initiale (déjà sauvegardées)
                         const modifiedRows = currentRows.filter(r => {
                             const currentGamme = currentDrafts[r.codein] ?? r.codeGamme;
                             return currentGamme !== r.codeGammeInit;
                         });
 
                         if (modifiedRows.length === 0) {
-                            alert("Aucun changement détecté par rapport à l'état initial. L'export Excel ne contient que les modifications de cette session.");
+                            alert("Aucun changement détecté par rapport à l'état initial.");
                             return;
                         }
 
-                        // Prepare payload
                         const changes = modifiedRows.map(r => ({
                             codein: r.codein,
                             gtin: r.gtin,
@@ -95,7 +92,7 @@ export function FloatingSummaryBar() {
                             gamme: (currentDrafts[r.codein] ?? r.codeGamme) as string,
                         }));
 
-                        const nomFournisseur = modifiedRows.length > 0 ? modifiedRows[0].nomFournisseur : "Fournisseur";
+                        const nomFournisseur = modifiedRows[0].nomFournisseur;
 
                         try {
                             const res = await fetch("/api/export/modified-gammes", {
@@ -115,10 +112,10 @@ export function FloatingSummaryBar() {
                             window.URL.revokeObjectURL(url);
                         } catch (error) {
                             console.error(error);
-                            alert("Une erreur s'est produite lors de la génération du fichier Excel.");
+                            alert("Une erreur s'est produite lors de l'export Excel.");
                         }
                     }}
-                    className="px-6 py-3 rounded-xl text-sm font-bold transition-all active:scale-95 border hover:brightness-105"
+                    className="h-10 px-6 rounded-xl text-sm font-bold transition-all active:scale-95 border hover:brightness-105"
                     style={{
                         background: "var(--action-secondary-bg)",
                         color: "var(--action-secondary-text)",
@@ -131,7 +128,7 @@ export function FloatingSummaryBar() {
                 <button
                     onClick={handleSave}
                     disabled={!hasDrafts || isPending}
-                    className="px-8 py-3 flex items-center gap-2 rounded-xl text-sm font-black transition-all shadow-lg active:scale-95 text-white hover:brightness-110 disabled:opacity-50"
+                    className="h-10 px-6 flex items-center justify-center gap-2 rounded-xl text-sm font-black transition-all shadow-lg active:scale-95 text-white hover:brightness-110 disabled:opacity-50"
                     style={{
                         background: "var(--brand-solid)",
                     }}
@@ -143,7 +140,7 @@ export function FloatingSummaryBar() {
                     ) : saveStatus === "error" ? (
                         <AlertCircle className="w-4 h-4" />
                     ) : null}
-                    {isPending ? "Validation..." : "Valider ce Fournisseur"}
+                    {isPending ? "Validation..." : "Valider"}
                 </button>
             </div>
         </div>
diff --git a/src/features/grid/components/heatmap-grid.tsx b/src/features/grid/components/heatmap-grid.tsx
index 3171a99..065bd09 100644
--- a/src/features/grid/components/heatmap-grid.tsx
+++ b/src/features/grid/components/heatmap-grid.tsx
@@ -45,12 +45,13 @@ function formatMonthLabel(key: string): string {
  * Indigo for first store, Amber for second, Slate for others.
  */
 function getStoreConfig(name: string, index: number) {
+    const initial = name.charAt(0).toUpperCase();
     if (index === 0) {
         return {
             bg: "rgba(99, 102, 241, 0.1)", // Indigo
             text: "#818cf8",
             border: "rgba(99, 102, 241, 0.2)",
-            label: "M1"
+            label: initial
         };
     }
     if (index === 1) {
@@ -58,14 +59,14 @@ function getStoreConfig(name: string, index: number) {
             bg: "rgba(245, 158, 11, 0.1)", // Amber
             text: "#fbbf24",
             border: "rgba(245, 158, 11, 0.2)",
-            label: "M2"
+            label: initial
         };
     }
     return {
         bg: "var(--bg-elevated)",
         text: "var(--text-muted)",
         border: "var(--border)",
-        label: name.charAt(0).toUpperCase()
+        label: initial
     };
 }