feat: add NoSalesTab component to display products without sales in the last 6 months

src/features/grid/components/grid-client.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { useEffect, useRef, useState, useTransition, useCallback } from "react";
+import { useEffect, useRef, useState, useTransition, useCallback, useMemo } from "react";
 import { HeatmapGrid } from "@/features/grid/components/heatmap-grid";
 import { FloatingSummaryBar } from "@/features/grid/components/floating-summary-bar";
 import { BulkActionToolbar } from "@/features/grid/components/bulk-action-toolbar";
 import { GridFilterBar } from "@/features/grid/components/grid-filter-bar";
 import { ExportDropdown } from "@/features/grid/components/export-dropdown";
+import { NoSalesTab, countNoSalesIn6Months } from "@/features/grid/components/no-sales-tab";
 import { useGridStore } from "@/features/grid/store/use-grid-store";
 import { useSaveDrafts } from "@/features/grid/hooks/use-save-drafts";
 import { useInfiniteGrid } from "@/features/grid/hooks/use-infinite-grid";
@@ -38,6 +39,9 @@ export function GridClient({ initialRows, initialTotal, codeFournisseur, nomFour
     const [selectedCodeins, setSelectedCodeins] = useState<string[]>([]);
     const [isPending, startTransition] = useTransition();
     const [saveStatus, setSaveStatus] = useState<"idle" | "success" | "error">("idle");
+    const [activeTab, setActiveTab] = useState<"grid" | "no-sales">("grid");
+
+    const noSalesCount = useMemo(() => countNoSalesIn6Months(rows), [rows]);
 
     const visibleCodeins = initialRows.map(r => r.codein);
     const { save, hasDrafts, count } = useSaveDrafts(magasin, visibleCodeins);
@@ -181,26 +185,68 @@ export function GridClient({ initialRows, initialTotal, codeFournisseur, nomFour
                 <GridFilterBar fournisseurs={fournisseurs} magasins={magasins} />
             </div>
 
-            {/* Bulk toolbar (contextual) */}
-            <div className="shrink-0 print:hidden">
-                <BulkActionToolbar
-                    selectedCodeins={selectedCodeins}
-                    onClearSelection={() => setSelectedCodeins([])}
-                />
+            {/* Tab switcher */}
+            <div className="shrink-0 flex gap-0 print:hidden" style={{ borderBottom: "1px solid var(--border)" }}>
+                {(["grid", "no-sales"] as const).map(tab => {
+                    const isActive = activeTab === tab;
+                    return (
+                        <button
+                            key={tab}
+                            onClick={() => setActiveTab(tab)}
+                            className="flex items-center gap-1.5 px-4 py-2 text-[13px] font-medium transition-colors"
+                            style={{
+                                color: isActive ? "var(--text-primary)" : "var(--text-muted)",
+                                borderBottom: isActive ? "2px solid var(--accent)" : "2px solid transparent",
+                                marginBottom: "-1px",
+                            }}
+                        >
+                            {tab === "grid" ? "Assortiment" : "Sans vente 6 mois"}
+                            {tab === "no-sales" && noSalesCount > 0 && (
+                                <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold"
+                                    style={{
+                                        background: isActive ? "var(--accent)" : "var(--bg-elevated)",
+                                        color: isActive ? "white" : "var(--text-secondary)",
+                                        border: "1px solid var(--border)",
+                                    }}
+                                >
+                                    {noSalesCount}
+                                </span>
+                            )}
+                        </button>
+                    );
+                })}
             </div>
 
-            {/* Main grid */}
-            <div className="flex-1 min-h-0 min-w-0">
-                <HeatmapGrid
-                    onSelectionChange={setSelectedCodeins}
-                    isAdmin={isAdmin}
-                />
-            </div>
+            {/* Bulk toolbar (contextual) — uniquement sur l'onglet grille */}
+            {activeTab === "grid" && (
+                <div className="shrink-0 print:hidden">
+                    <BulkActionToolbar
+                        selectedCodeins={selectedCodeins}
+                        onClearSelection={() => setSelectedCodeins([])}
+                    />
+                </div>
+            )}
 
-            {/* Summary bar */}
-            <div className="print:hidden">
-                <FloatingSummaryBar />
-            </div>
+            {/* Main content */}
+            {activeTab === "grid" ? (
+                <div className="flex-1 min-h-0 min-w-0">
+                    <HeatmapGrid
+                        onSelectionChange={setSelectedCodeins}
+                        isAdmin={isAdmin}
+                    />
+                </div>
+            ) : (
+                <div className="flex-1 min-h-0 min-w-0 flex flex-col">
+                    <NoSalesTab />
+                </div>
+            )}
+
+            {/* Summary bar — uniquement sur l'onglet grille */}
+            {activeTab === "grid" && (
+                <div className="print:hidden">
+                    <FloatingSummaryBar />
+                </div>
+            )}
         </div>
     );
 }

src/features/grid/components/no-sales-tab.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { useMemo } from "react";
+import { useGridStore } from "@/features/grid/store/use-grid-store";
+import type { ProductRow } from "@/types/grid";
+import { PackageX } from "lucide-react";
+
+function getNoSalesIn6Months(rows: ProductRow[]): ProductRow[] {
+    const sixMonthsAgo = new Date();
+    sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6);
+
+    return rows.filter(row => {
+        if (row.derniereVente) {
+            return new Date(row.derniereVente) < sixMonthsAgo;
+        }
+        // Fallback : calcul depuis sales12m
+        const salesMonths = Object.entries(row.sales12m || {})
+            .filter(([, qty]) => qty > 0)
+            .map(([m]) => m)
+            .sort();
+        if (salesMonths.length === 0) return true;
+        const last = salesMonths[salesMonths.length - 1];
+        const lastDate = new Date(parseInt(last.slice(0, 4)), parseInt(last.slice(4, 6)) - 1, 1);
+        return lastDate < sixMonthsAgo;
+    });
+}
+
+function formatDate(iso?: string): string {
+    if (!iso) return "—";
+    return new Date(iso).toLocaleDateString("fr-FR", { day: "2-digit", month: "2-digit", year: "numeric" });
+}
+
+function daysSince(iso?: string): number | null {
+    if (!iso) return null;
+    return Math.floor((Date.now() - new Date(iso).getTime()) / 86_400_000);
+}
+
+function formatCa(ca: number): string {
+    return ca.toLocaleString("fr-FR", { style: "currency", currency: "EUR", maximumFractionDigits: 0 });
+}
+
+const GAMME_COLORS: Record<string, string> = {
+    A: "bg-emerald-500/15 text-emerald-700",
+    B: "bg-blue-500/15 text-blue-700",
+    C: "bg-amber-500/15 text-amber-700",
+    Y: "bg-purple-500/15 text-purple-700",
+    Z: "bg-red-500/15 text-red-700",
+};
+
+export function NoSalesTab() {
+    const rows = useGridStore(s => s.rows);
+
+    const filtered = useMemo(() => {
+        const result = getNoSalesIn6Months(rows);
+        // Tri : produits les plus anciens en premier, puis par stock décroissant
+        return result.sort((a, b) => {
+            const da = a.derniereVente ? new Date(a.derniereVente).getTime() : 0;
+            const db = b.derniereVente ? new Date(b.derniereVente).getTime() : 0;
+            if (da !== db) return da - db;
+            return (b.stockActuel ?? 0) - (a.stockActuel ?? 0);
+        });
+    }, [rows]);
+
+    if (rows.length === 0) {
+        return (
+            <div className="flex-1 flex items-center justify-center text-sm italic" style={{ color: "var(--text-muted)" }}>
+                Chargement des données en cours…
+            </div>
+        );
+    }
+
+    if (filtered.length === 0) {
+        return (
+            <div className="flex-1 flex flex-col items-center justify-center gap-3" style={{ color: "var(--text-muted)" }}>
+                <PackageX className="w-10 h-10 opacity-30" />
+                <p className="text-sm italic">Aucun produit sans vente depuis 6 mois.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col flex-1 min-h-0 gap-3">
+            {/* Résumé */}
+            <div className="shrink-0 px-3 py-2 rounded-lg text-sm font-medium flex items-center gap-2"
+                style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}
+            >
+                <PackageX className="w-4 h-4 shrink-0" style={{ color: "var(--accent)" }} />
+                <span>
+                    <span className="font-bold" style={{ color: "var(--text-primary)" }}>
+                        {filtered.length.toLocaleString("fr-FR")}
+                    </span>
+                    {" "}produit{filtered.length > 1 ? "s" : ""} sans vente depuis plus de 6 mois
+                    {" "}({rows.length.toLocaleString("fr-FR")} références au total)
+                </span>
+            </div>
+
+            {/* Tableau */}
+            <div className="flex-1 min-h-0 overflow-auto rounded-xl" style={{ border: "1px solid var(--border)" }}>
+                <table className="w-full text-[12px] border-collapse">
+                    <thead className="sticky top-0 z-10" style={{ background: "var(--bg-elevated)" }}>
+                        <tr style={{ borderBottom: "1px solid var(--border)" }}>
+                            {["Code", "Libellé", "Réf.", "Gamme", "Dernière vente", "Jours", "Stock", "CA 12m", "Score"].map(col => (
+                                <th key={col}
+                                    className="px-3 py-2 text-left font-semibold whitespace-nowrap"
+                                    style={{ color: "var(--text-muted)" }}
+                                >
+                                    {col}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {filtered.map((row, i) => {
+                            const days = daysSince(row.derniereVente);
+                            const gamme = row.codeGamme?.trim().toUpperCase() ?? "—";
+                            const gammeClass = GAMME_COLORS[gamme] ?? "bg-zinc-500/15 text-zinc-600";
+                            return (
+                                <tr
+                                    key={row.codein}
+                                    className="transition-colors hover:bg-white/5"
+                                    style={{
+                                        borderBottom: i < filtered.length - 1 ? "1px solid var(--border)" : undefined,
+                                        background: i % 2 === 0 ? "transparent" : "var(--bg-subtle, rgba(0,0,0,0.02))",
+                                    }}
+                                >
+                                    <td className="px-3 py-1.5 font-mono" style={{ color: "var(--text-muted)" }}>{row.codein}</td>
+                                    <td className="px-3 py-1.5 max-w-[220px] truncate" style={{ color: "var(--text-primary)" }} title={row.libelle1}>{row.libelle1}</td>
+                                    <td className="px-3 py-1.5 font-mono text-[11px]" style={{ color: "var(--text-muted)" }}>{row.reference || "—"}</td>
+                                    <td className="px-3 py-1.5">
+                                        <span className={`inline-block px-1.5 py-0.5 rounded text-[11px] font-bold ${gammeClass}`}>
+                                            {gamme}
+                                        </span>
+                                    </td>
+                                    <td className="px-3 py-1.5 whitespace-nowrap" style={{ color: row.derniereVente ? "var(--text-secondary)" : "var(--text-muted)" }}>
+                                        {formatDate(row.derniereVente)}
+                                    </td>
+                                    <td className="px-3 py-1.5 text-right font-medium tabular-nums"
+                                        style={{ color: days && days > 365 ? "var(--color-red, #ef4444)" : "var(--text-secondary)" }}>
+                                        {days != null ? days.toLocaleString("fr-FR") : "—"}
+                                    </td>
+                                    <td className="px-3 py-1.5 text-right tabular-nums" style={{ color: "var(--text-secondary)" }}>
+                                        {row.stockActuel != null ? row.stockActuel.toLocaleString("fr-FR") : "—"}
+                                    </td>
+                                    <td className="px-3 py-1.5 text-right tabular-nums" style={{ color: "var(--text-secondary)" }}>
+                                        {row.totalCa > 0 ? formatCa(row.totalCa) : "—"}
+                                    </td>
+                                    <td className="px-3 py-1.5 text-right tabular-nums font-semibold"
+                                        style={{ color: row.score >= 50 ? "var(--color-amber, #f59e0b)" : "var(--text-muted)" }}>
+                                        {row.score > 0 ? row.score : "—"}
+                                    </td>
+                                </tr>
+                            );
+                        })}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}
+
+/** Compte les produits sans vente depuis 6 mois — utilisé pour le badge dans le switcher */
+export function countNoSalesIn6Months(rows: ProductRow[]): number {
+    return getNoSalesIn6Months(rows).length;
+}