feat(produits): page de recherche produit + fiche 360° local/réseau

Nouvelle page /produits : recherche par libellé ou par code centrale, puis
fiche complète d'un produit — identité, prix, stock par magasin, ventes sur
12 mois glissants, et l'intégralité des métriques réseau Qlik.

Jusqu'ici les données produit n'étaient accessibles que par fournisseur
(la Grille) ou par classement (Hit Parade) : aucune route n'acceptait un
codein. Les données réseau Qlik n'étaient visibles que dans six colonnes
de la grille d'arbitrage.

Deux analyses ajoutées :
- comparatif local vs réseau, ramené au magasin moyen (indice de
  performance sur les quantités, seule base commune fiable — le CA local
  est TTC et la base du CA Qlik n'est pas documentée, donc indicatif) ;
- opportunités de la même famille : références que le réseau vend bien et
  que nous vendons peu, écart calculé par magasin.

Détail mensuel réseau enrichi : le cube Qlik renvoyait déjà CA, nb de
magasins, CA/magasin et marge % par (article, mois) mais seule la quantité
était conservée. Ces mesures sont désormais stockées dans une nouvelle
colonne metrics_by_month, sans requête Qlik supplémentaire. qte_by_month
reste inchangée — la colonne « Tendance / Réseau » de la Grille en dépend.

L'extraction Qlik peut désormais cibler un seul code centrale
(/api/qlik/sync?codeCentrale=…), ouverte à tout utilisateur connecté et
plafonnée à 3 extractions simultanées ; le mode fournisseur reste
réservé aux admins.

Refactor sans changement de comportement : les helpers de mois, le calcul
de tendance et les graphes SVG quittent heatmap-grid.tsx pour des modules
partagés, et le polling des jobs Qlik devient le hook useQlikSyncJob,
réutilisé par la Grille et par la fiche.

Les calculs de ventes reprennent le SQL canonique de la Grille (genremvt=3
avec quantités niées pour déduire les retours, stock de fin de mois pris
sur le dernier mouvement, report sur les mois sans mouvement), afin que
les chiffres des deux pages soient identiques par construction.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XR8cMbsdjXWChX8seL9NCP

src/features/grid/lib/months.ts

@@ -0,0 +1,96 @@
+/**
+ * CollectFlow — Helpers de fenêtre mensuelle et de libellés magasin.
+ *
+ * Extraits de `heatmap-grid.tsx` pour être partagés entre la Grille et la
+ * fiche produit (`/produits`). Aucun changement de comportement.
+ *
+ * ⚠️ Deux conventions de clé de mois cohabitent dans l'application :
+ *   - séries FF Nancy (ventes / stock / réceptions) : `"YYYYMM"` (sans tiret)
+ *   - séries réseau Qlik (`qteByMonth`, `metricsByMonth`)  : `"YYYY-MM"` (avec tiret)
+ * Utiliser `ffMonthToQlik` / `qlikMonthToFf` pour passer de l'une à l'autre.
+ */
+
+/**
+ * Les 12 mois complets glissants, du plus ancien au plus récent, au format
+ * `"YYYYMM"`. Le mois en cours est **exclu** (on part de i=12 jusqu'à i=1).
+ *
+ * ⚠️ À n'appeler qu'à l'intérieur d'un `useMemo` / d'un rendu, jamais au niveau
+ * module : `new Date()` évalué à l'import provoque un mismatch d'hydratation
+ * entre le rendu serveur et le rendu client.
+ */
+export function getLast12Months(): string[] {
+    const months: string[] = [];
+    const now = new Date();
+    // On commence à i=12 (il y a 12 mois) et on finit à i=1 (le mois dernier)
+    // pour exclure le mois en cours (i=0)
+    for (let i = 12; i >= 1; i--) {
+        const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
+        months.push(`${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, "0")}`);
+    }
+    return months;
+}
+
+/** `"202601"` → `"Jan 26"`. */
+export function formatMonthLabel(key: string): string {
+    const m = parseInt(key.slice(4, 6), 10);
+    const names = ["Jan", "Fév", "Mar", "Avr", "Mai", "Jun", "Jul", "Aoû", "Sep", "Oct", "Nov", "Déc"];
+    return `${names[m - 1]} ${key.slice(2, 4)}`;
+}
+
+/** `"2026-01"` → `"01/26"` — axe compact des graphiques. */
+export function fmtMonthShort(lab: string): string {
+    const [y, m] = lab.split("-");
+    return `${m ?? lab}/${(y ?? "").slice(2)}`;
+}
+
+/** Date ISO → `jj/mm/aaaa`, `"—"` si absente ou invalide. */
+export function formatDate(iso?: string | null): string {
+    if (!iso) return "—";
+    const d = new Date(iso);
+    if (isNaN(d.getTime())) return "—";
+    return d.toLocaleDateString("fr-FR", { day: "2-digit", month: "2-digit", year: "numeric" });
+}
+
+/** Clé de mois FF `"202601"` → clé Qlik `"2026-01"`. */
+export function ffMonthToQlik(key: string): string {
+    return `${key.slice(0, 4)}-${key.slice(4, 6)}`;
+}
+
+/** Clé de mois Qlik `"2026-01"` → clé FF `"202601"`. */
+export function qlikMonthToFf(key: string): string {
+    return key.replace("-", "");
+}
+
+/** Les deux magasins FF Nancy suivis par l'application. */
+export const SITE_LABELS: Record<string, { label: string; nom: string }> = {
+    "292": { label: "F", nom: "Frouard (Nancy)" },
+    "579": { label: "H", nom: "Houdemont" },
+};
+
+/**
+ * Style de badge stable pour un magasin : la couleur est dérivée d'un hash du
+ * nom, donc identique quel que soit l'ordre d'affichage.
+ */
+export function getStoreConfig(name: string) {
+    const known = SITE_LABELS[name];
+    const words = (known?.nom ?? name).trim().split(/\s+/);
+    let label = known?.label ?? words[0].charAt(0).toUpperCase();
+    if (!known && words.length > 1) {
+        label += words[1].charAt(0).toUpperCase();
+    }
+
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+        hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const colorInt = Math.abs(hash) % 5;
+
+    switch (colorInt) {
+        case 0: return { bg: "rgba(99, 102, 241, 0.1)", text: "#818cf8", border: "rgba(99, 102, 241, 0.2)", label }; // Indigo
+        case 1: return { bg: "rgba(245, 158, 11, 0.1)", text: "#fbbf24", border: "rgba(245, 158, 11, 0.2)", label }; // Amber
+        case 2: return { bg: "rgba(16, 185, 129, 0.1)", text: "#10b981", border: "rgba(16, 185, 129, 0.2)", label }; // Emerald
+        case 3: return { bg: "rgba(236, 72, 153, 0.1)", text: "#ec4899", border: "rgba(236, 72, 153, 0.2)", label }; // Pink
+        case 4: return { bg: "rgba(14, 165, 233, 0.1)", text: "#0ea5e9", border: "rgba(14, 165, 233, 0.2)", label }; // Sky
+        default: return { bg: "var(--bg-elevated)", text: "var(--text-muted)", border: "var(--border)", label };
+    }
+}

src/features/grid/lib/network-trend.ts

@@ -0,0 +1,78 @@
+/**
+ * CollectFlow — Tendance des ventes réseau Qlik sur 12 mois.
+ *
+ * Extrait de `heatmap-grid.tsx` pour être partagé entre la Grille (sparkline de
+ * la colonne « Tendance / Réseau ») et la fiche produit (`/produits`).
+ * Aucun changement de comportement.
+ */
+
+/**
+ * Nombre de magasins du réseau La Foir'Fouille servant de dénominateur au taux
+ * de présence. Constante métier : source unique pour la Grille et la fiche produit.
+ */
+export const NB_MAGASINS_RESEAU = 270;
+
+export type NetworkTrend = {
+    values: number[];   // quantités mensuelles, ordre chronologique
+    labels: string[];   // "YYYY-MM"
+    direction: "up" | "down" | "flat";
+    pct: number | null; // variation modélisée (régression linéaire) sur 12 mois
+    hasData: boolean;
+};
+
+/** Seuil de "forte" variation (±25%) pour distinguer hausse/forte hausse dans l'UI. */
+export const TREND_STRONG = 0.25;
+
+/** Seuil au-delà duquel on ne considère plus la tendance comme stable (±8%). */
+export const TREND_FLAT = 0.08;
+
+export const TREND_COLOR: Record<NetworkTrend["direction"], string> = {
+    up: "#22c55e",
+    down: "#ef4444",
+    flat: "#94a3b8",
+};
+
+/**
+ * Tendance réseau par RÉGRESSION LINÉAIRE (moindres carrés) sur les 12 derniers mois.
+ * Utilise tous les points (robuste au bruit d'un mois isolé). L'indicateur `pct` est la
+ * variation modélisée sur la période (pente × durée) rapportée à la moyenne.
+ * Direction : forte hausse >+25%, hausse >+8%, stable, baisse <−8%, forte baisse <−25%.
+ */
+export function computeNetworkTrend(qteByMonth?: Record<string, number> | null): NetworkTrend {
+    const empty: NetworkTrend = { values: [], labels: [], direction: "flat", pct: null, hasData: false };
+    if (!qteByMonth) return empty;
+    let labels = Object.keys(qteByMonth).sort(); // "YYYY-MM" trie chronologiquement
+    if (labels.length === 0) return empty;
+    labels = labels.slice(-12); // 12 derniers mois
+    const values = labels.map((l) => Number(qteByMonth[l]) || 0);
+    const n = values.length;
+    let pct: number | null = null;
+    let direction: NetworkTrend["direction"] = "flat";
+    if (n >= 3) {
+        const mx = (n - 1) / 2;
+        const my = values.reduce((s, v) => s + v, 0) / n;
+        let num = 0, den = 0;
+        for (let i = 0; i < n; i++) { num += (i - mx) * (values[i] - my); den += (i - mx) * (i - mx); }
+        const slope = den ? num / den : 0;
+        if (my > 0) {
+            pct = (slope * (n - 1)) / my; // variation modélisée sur toute la période / moyenne
+            direction = pct > TREND_FLAT ? "up" : pct < -TREND_FLAT ? "down" : "flat";
+        } else if (slope > 0) {
+            direction = "up";
+        }
+    } else if (n === 2 && values[0] > 0) {
+        pct = (values[1] - values[0]) / values[0];
+        direction = pct > TREND_FLAT ? "up" : pct < -TREND_FLAT ? "down" : "flat";
+    }
+    return { values, labels, direction, pct, hasData: true };
+}
+
+/** Libellé français de la tendance : « Forte hausse », « Baisse », « Stable »… */
+export function trendLabel(pct: number | null): string {
+    if (pct == null) return "Stable";
+    if (pct > TREND_STRONG) return "Forte hausse";
+    if (pct > TREND_FLAT) return "Hausse";
+    if (pct < -TREND_STRONG) return "Forte baisse";
+    if (pct < -TREND_FLAT) return "Baisse";
+    return "Stable";
+}