feat: implement AI explanation modal and insight block components for product analysis.

src/features/ai-copilot/components/ai-explanation-modal.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { X, Bot, Sparkles, TrendingUp, ShieldAlert, History } from "lucide-react";
+
+interface AiExplanationModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    productName: string;
+    productCode: string;
+    explanation: string;
+    recommandation?: "A" | "C" | "Z" | null;
+}
+
+export function AiExplanationModal({
+    isOpen,
+    onClose,
+    productName,
+    productCode,
+    explanation,
+    recommandation
+}: AiExplanationModalProps) {
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        if (isOpen) {
+            setIsVisible(true);
+        } else {
+            setIsVisible(false);
+        }
+    }, [isOpen]);
+
+    const handleClose = () => {
+        setIsVisible(false);
+        setTimeout(onClose, 250);
+    };
+
+    if (!isOpen && !isVisible) return null;
+
+    const getGammeColor = (g?: string | null) => {
+        switch (g) {
+            case "A": return "text-emerald-500 border-emerald-500/50 bg-emerald-500/10";
+            case "C": return "text-amber-500 border-amber-500/50 bg-amber-500/10";
+            case "Z": return "text-rose-500 border-rose-500/50 bg-rose-500/10";
+            default: return "text-slate-500 border-slate-500/50 bg-slate-500/10";
+        }
+    };
+
+    return (
+        <div
+            className={`fixed inset-0 z-[300] flex items-center justify-center p-4 transition-all duration-250 ${isVisible ? "opacity-100 backdrop-blur-md" : "opacity-0 backdrop-blur-0"}`}
+        >
+            {/* Backdrop */}
+            <div
+                className="fixed inset-0"
+                style={{ background: "rgba(0,0,0,0.6)" }}
+                onClick={handleClose}
+            />
+
+            {/* Panel */}
+            <div
+                className={`relative w-full max-w-lg rounded-3xl overflow-hidden shadow-2xl transition-all duration-250 ${isVisible ? "scale-100 translate-y-0" : "scale-95 translate-y-8"}`}
+                style={{
+                    background: "var(--bg-surface)",
+                    border: "1px solid var(--border-strong)",
+                    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)"
+                }}
+            >
+                {/* Header with Mary Icon */}
+                <div className="p-6 pb-0 flex items-start justify-between">
+                    <div className="flex gap-4">
+                        <div className="w-12 h-12 rounded-2xl bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center shrink-0">
+                            <Bot className="w-6 h-6 text-indigo-500" />
+                        </div>
+                        <div>
+                            <h2 className="text-xl font-black tracking-tight" style={{ color: "var(--text-primary)" }}>
+                                Analyse de Mary 🧙
+                            </h2>
+                            <p className="text-xs font-bold opacity-60 uppercase tracking-widest mt-0.5">
+                                {productName} <span className="opacity-40">({productCode})</span>
+                            </p>
+                        </div>
+                    </div>
+                    <button
+                        onClick={handleClose}
+                        className="p-2 rounded-xl hover:bg-white/5 text-[var(--text-muted)] transition-colors"
+                    >
+                        <X className="w-5 h-5" />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="p-6">
+                    <div className="space-y-6">
+                        {/* Recommandation Badge */}
+                        <div className="flex items-center gap-2">
+                            <span className="text-[10px] font-black uppercase tracking-widest opacity-40">Verdict :</span>
+                            <div className={`px-3 py-1 rounded-full border text-xs font-black flex items-center gap-1.5 ${getGammeColor(recommandation)}`}>
+                                {recommandation === "A" && <Sparkles className="w-3 h-3" />}
+                                {recommandation === "C" && <TrendingUp className="w-3 h-3" />}
+                                {recommandation === "Z" && <ShieldAlert className="w-3 h-3" />}
+                                {recommandation ? `GAMME ${recommandation}` : "AUCUN"}
+                            </div>
+                        </div>
+
+                        {/* Explanation Text */}
+                        <div
+                            className="text-[14px] leading-relaxed p-5 rounded-2xl border"
+                            style={{
+                                background: "var(--bg-elevated)",
+                                borderColor: "var(--border)",
+                                color: "var(--text-secondary)"
+                            }}
+                        >
+                            <div className="flex gap-3">
+                                <History className="w-4 h-4 mt-1 text-indigo-400 shrink-0" />
+                                <div className="whitespace-pre-wrap font-medium italic italic-custom">
+                                    "{explanation}"
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="flex flex-col gap-2">
+                            <div className="h-px w-full bg-gradient-to-r from-transparent via-[var(--border)] to-transparent" />
+                            <p className="text-[10px] text-center opacity-40 font-bold italic">
+                                Analyse générée en temps réel selon les indicateurs CA, Marge et Régularité.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Footers / Action */}
+                <div className="p-6 pt-0">
+                    <button
+                        onClick={handleClose}
+                        className="w-full py-3 rounded-2xl font-black text-sm transition-all hover:scale-[1.02] active:scale-95"
+                        style={{
+                            background: "var(--bg-elevated)",
+                            border: "1px solid var(--border-strong)",
+                            color: "var(--text-primary)"
+                        }}
+                    >
+                        Fermer l'Analyse
+                    </button>
+                </div>
+            </div>
+
+            <style jsx>{`
+                .italic-custom {
+                    font-family: var(--font-serif, serif);
+                    font-style: italic;
+                }
+            `}</style>
+        </div>
+    );
+}

src/features/ai-copilot/components/ai-insight-block.tsx

@@ -1,7 +1,10 @@
 "use client";
 
-import { Bot, Loader2, AlertCircle, Sparkles } from "lucide-react";
+import React, { useState } from "react";
+
+import { Bot, Loader2, AlertCircle, Sparkles, Maximize2 } from "lucide-react";
 import { useAiCopilotStore } from "@/features/ai-copilot/store/use-ai-copilot-store";
+import { AiExplanationModal } from "./ai-explanation-modal";
 import type { ProductRow } from "@/types/grid";
 import { cn } from "@/lib/utils";
 
@@ -12,10 +15,11 @@ interface AiInsightBlockProps {
 }
 
 export function AiInsightBlock({ row }: AiInsightBlockProps) {
-    const insight = useAiCopilotStore((s) => s.insights[row.codein]);
+    const insight = useAiCopilotStore((s: any) => s.insights[row.codein]);
-    const analyzeProduct = useAiCopilotStore((s) => s.analyzeProduct);
+    const analyzeProduct = useAiCopilotStore((s: any) => s.analyzeProduct);
-    const setLoading = useAiCopilotStore((s) => s.setLoading);
+    const setLoading = useAiCopilotStore((s: any) => s.setLoading);
-    const setDraftGamme = useGridStore((s) => s.setDraftGamme);
+    const setDraftGamme = useGridStore((s: any) => s.setDraftGamme);
+    const [isModalOpen, setIsModalOpen] = useState(false);
 
     const status = insight?.status ?? "idle";
 
@@ -97,18 +101,46 @@ export function AiInsightBlock({ row }: AiInsightBlockProps) {
     }
 
     return (
-        <div className="flex flex-col gap-1 group cursor-pointer" onClick={handleAnalyze} title="Cliquer pour re-analyser">
+        <>
-            <div className="flex items-start gap-1.5">
+            <div className="flex flex-col gap-1 group/insight" title="Cliquer pour re-analyser">
-                <Bot className="w-3.5 h-3.5 mt-0.5 text-indigo-600 dark:text-indigo-400 shrink-0" />
+                <div className="flex items-start gap-1.5 min-w-0">
-                <span className={cn("text-[11px] italic line-clamp-2 leading-[1.3]")} style={{ color: "var(--text-secondary)" }}>
+                    <Bot
-                    {insight?.insight}
+                        className="w-3.5 h-3.5 mt-0.5 text-indigo-600 dark:text-indigo-400 shrink-0 cursor-pointer hover:scale-110 transition-transform"
-                </span>
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            handleAnalyze();
+                        }}
+                    />
+                    <div className="flex flex-col min-w-0 flex-1">
+                        <div
+                            className="flex items-end gap-1 group/text cursor-pointer"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                setIsModalOpen(true);
+                            }}
+                        >
+                            <span className={cn("text-[11px] italic line-clamp-2 leading-[1.3] flex-1")} style={{ color: "var(--text-secondary)" }}>
+                                {insight?.insight}
+                            </span>
+                            <Maximize2 className="w-2.5 h-2.5 mb-0.5 opacity-0 group-hover/insight:opacity-40 hover:!opacity-100 transition-opacity shrink-0 text-indigo-500" />
+                        </div>
+                    </div>
+                </div>
+                {insight?.isDuplicate && (
+                    <span className="inline-flex items-center gap-1 text-[10px] font-bold text-amber-700 dark:text-amber-400 bg-amber-100 dark:bg-amber-900/30 border border-amber-300 dark:border-amber-700 px-1.5 py-0.5 rounded-full w-fit">
+                        ⚠️ Doublon probable
+                    </span>
+                )}
             </div>
-            {insight?.isDuplicate && (
+
-                <span className="inline-flex items-center gap-1 text-[10px] font-bold text-amber-700 dark:text-amber-400 bg-amber-100 dark:bg-amber-900/30 border border-amber-300 dark:border-amber-700 px-1.5 py-0.5 rounded-full w-fit">
+            <AiExplanationModal
-                    ⚠️ Doublon probable
+                isOpen={isModalOpen}
-                </span>
+                onClose={() => setIsModalOpen(false)}
-            )}
+                productName={row.libelle1}
-        </div>
+                productCode={row.codein}
+                explanation={insight?.insight || ""}
+                recommandation={insight?.recommandation}
+            />
+        </>
     );
 }

task.md

@@ -18,6 +18,8 @@ Activation et initialisation de l'Agent Master BMAD.
 - [x] Étape 10 : Ajustement du seuil de protection (Score < 20)
 - [x] Étape 11 : Intégration de l'analyse critique systématique (même score > 50)
 - [x] Étape 12 : Validation finale et correction TS
+- [x] Étape 13 : Implémentation du modal pour les explications IA détaillées
+- [/] Étape 14 : Polissage de l'UI (Sally/UX)
 
 # Progress Log
 
@@ -38,3 +40,7 @@ Activation et initialisation de l'Agent Master BMAD.
 - Arbitrage IA maintenu entre 20 et 50 basé sur CA / Marge / Quantité.
 - Michael exige une analyse critique systématique même pour les scores > 50.
 - Logique finale implémentée et validée (Score < 20 = Z).
+- Demande de Michael : Ajouter une icône + modal pour voir l'explication complète.
+- Recherche du composant de la grille en cours.
+- Nouveau composant `AiExplanationModal` créé.
+- Intégration dans `AiInsightBlock` terminée (icône + déclenchement).