diff --git a/docs/plan-optimisation-webui.md b/docs/plan-optimisation-webui.md new file mode 100644 index 0000000..2719fca --- /dev/null +++ b/docs/plan-optimisation-webui.md @@ -0,0 +1,272 @@ +# Plan — CollectFlow : interface simple, lisible et rapide + +## Contexte + +Analyse des 13 pages (+ layout, menu, en-tête, API, accès BDD). Constats principaux : + +- **Lisibilité** : plus de 160 textes entre 8,5 et 11 px. Libellés en MAJUSCULES grasses gris pâle, sous le seuil de contraste AA. Jargon partout (Init., PCB, PRMP, Franco, Sync Qlik, CODEIN…). Libellés mi-anglais, mi-français (Dashboard, Analytics, Snapshots). +- **Incohérence** : + - **Thème** : 5 pages sont figées en blanc (`bg-gray-50`) dans une application sombre. Les classes `dark:` suivent le réglage de l'OS, pas le bouton de thème. + - **Composants** : 7 styles d'en-tête de page, 13 tableaux codés à la main, formateurs de nombres copiés dans 12 fichiers. + - **Vocabulaire** : magasins nommés de 8 façons. « Réseau » désigne tantôt les ~270 magasins, tantôt nos 2. +- **Ergonomie** : + - La recherche de l'en-tête ne filtre que la Grille, même depuis les autres pages. + - L'utilisateur « Michael » est codé en dur dans l'en-tête. + - La Grille affiche deux boutons « Valider » et deux exports, avec des droits différents. + - Chaque chargement de page bloque tout l'écran (modale plein écran), et aucune page d'erreur n'existe. +- **Lenteur** : + - Hors tableau de bord, aucune donnée n'est mise en cache, alors que les données FF ne changent qu'une fois par nuit. + - Une Grille froide se reconstruit en 10 à 43 s. Ce calcul a lieu après chaque enregistrement, après chaque changement de magasin, et à chaque retour par le menu après un clic sur « Rafraîchir » : le paramètre `_refresh` reste collé à l'URL. + - La Grille rend tout le tableau à chaque paquet de 150 lignes, donc un coût quadratique. + - `exceljs` et `jspdf` sont chargés pour tous les utilisateurs. + - Plusieurs requêtes SQL ne peuvent pas utiliser d'index : `TRIM(codein)`, `TO_CHAR(datmvt)`. +- **Bugs relevés** : + - Après un filtre, la sélection multiple de la Grille vise d'autres produits. + - Le filtre « passées » de Publicités ne s'applique pas (clé `passees` dans le filtre, `passee` dans les libellés). + - L'erreur de chargement des Snapshots n'est jamais affichée. + - La carte KPI du tableau de bord répète sa valeur principale. + +**Choix validés** : thème **clair par défaut** ; menu **regroupé et renommé**, avec Snapshots et Exports fusionnés en « Historique » ; livraison **par lots, une PR par lot**, sur la branche `claude/keen-maxwell-hbtho6`. + +Conventions du dépôt : +- préfixe `rtk` sur toutes les commandes ; +- commits en français ; +- plan de chaque lot rangé selon BMAD (Business / Model / API / Data, `.agents/rules/general.md`). + +--- + +## Lot 1 — Vitesse et bugs, sans changement visuel (PR 1) + +Risque faible, gain immédiat. + +**Grille (client)** +- `src/features/grid/components/grid-client.tsx` : + - retirer `_refresh` de la requête mémorisée dans `activeGridQuery` (l.86-91), puis le supprimer de l'URL après usage avec `router.replace` ; + - sortir `code1` et `code2` des dépendances du chargement : le serveur ne les lit pas. +- `grid-client.tsx:152-156` : accumuler les paquets reçus et ne mettre à jour le store que toutes les ~250 ms, plus une fois à la fin, au lieu de reconstruire à chaque paquet. +- `heatmap-grid.tsx` : + - ajouter `getRowId: r => r.codein` (corrige le bug de sélection) ; + - mémoriser `MONTHS_12` sur sa clé texte (l.628) ; + - retirer `transition-all` sur les lignes et le flou du bandeau d'en-tête. +- `export-dropdown.tsx` : + - `exceljs`, `jspdf` et `jspdf-autotable` passent en `await import()` dans les gestionnaires ; + - le composant est chargé via `next/dynamic` ; + - remplacer `useGridStore()` sans sélecteur (l.12). +- Créer `src/lib/format.ts` : instances `Intl.NumberFormat` créées une seule fois, plus `fmtEur`, `fmtQte`, `fmtPct`, `fmtDate`. Les cellules de la Grille l'utilisent ; les autres pages au lot 3. + +**Grille (serveur)** — `src/features/grid/api/get-product-rows.ts` +- Lancer la requête des métriques Qlik et celle du dernier snapshot dans le même `Promise.all` que la phase 1 (l.130-146, 410, 416). +- `qlik-network-cache.ts` : ne sélectionner que les colonnes utiles, sans le JSONB `metricsByMonth`. +- Cache mémoire : + - le borner (LRU d'environ 30 entrées) ; + - garder la déduplication des calculs en cours même en `forceRefresh` ; + - transmettre `request.signal` depuis `src/app/api/grid/rows/route.ts`. +- Après un enregistrement, **mettre à jour en place** le `codeGamme` des lignes en cache au lieu d'invalider tout le cache (`save-draft-changes.ts:73`). Nouvelle fonction `patchGridRowsCache()` à côté de `invalidateGridRowsCache()`. +- Supprimer les `console.log` des chemins chauds : `get-product-rows.ts` (l.83, 123, 148, 433, 444, 622) et `pg-ff-client.ts` (l.99, 300-303, 431, 516). + +**Cache des données FF jusqu'à la synchro nocturne** +- Créer `src/lib/ff-cache.ts` : enveloppes `unstable_cache` étiquetées `ff-data`, durée 6 h, sur le modèle déjà en place dans `dashboard/page.tsx:4-8`. Elles couvrent : + - les 3 requêtes de stock ; + - le hit-parade (clé : dates) ; + - les CA par fournisseur et par nomenclature (clé : mois et mode) ; + - `pgGetFournisseurs` ; + - `getFournisseurs` de la Grille ; + - la dernière réception par fournisseur ; + - `pgGetCommandesAuto`. +- Publicités : `fetch` avec `next: { revalidate, tags }` au lieu de `no-store`. +- À la fin du cycle nocturne (`src/features/admin/api/sync-scheduler.ts`) : invalider l'étiquette `ff-data`, puis préchauffer le tableau de bord et le stock. +- Points à vérifier : + - la signature de `revalidateTag` en Next 16 ; + - que les valeurs mises en cache passent en JSON (les `Date` deviennent des chaînes). + +**Base de données et API** +- `src/db/index.ts` : + - pool rangé dans `globalThis` ; + - `options: "-c statement_timeout=60000 -c max_parallel_workers_per_gather=0"` et `application_name`. + - `pgNoParallel` (`pg-ff-client.ts:25-33`) n'a alors plus besoin de BEGIN/SET/COMMIT : 3 allers-retours de moins par requête. +- `AbortSignal.timeout` sur tous les appels à l'API FF : `api-ff-client.ts`, `publicites/page.tsx`, appels du tableau de bord. +- Index des tables applicatives, dans `scripts/db-init.js` et `src/db/schema.ts` : + - `session_snapshots(code_fournisseur, created_at DESC)` ; + - `session_snapshots(user_id, type, created_at DESC)`. +- Divers : + - Commandes auto : supprimer le double rechargement, en retirant `router.refresh()` puisque `revalidatePath` est déjà appelé (`cadencier-client.tsx:172-177`). + - Synchronisation : PATCH envoyé à la sortie du champ, plus à chaque frappe (`admin/synchronisation/client.tsx:209-237`). + - Paramètres : un seul appel à `getSavedDatabaseConfig`. + - `log-capture.ts` : sortie immédiate si aucune capture n'est ouverte. + +**Bugs fonctionnels** +- Publicités : aligner la clé `passees`/`passee` (`publicites/client.tsx:141, 256`). +- Historique : afficher l'état d'erreur (`snapshot-list.tsx:133`). +- Tableau de bord : la carte KPI répète sa valeur (`dashboard/page.tsx:183-185`). +- Barre de résumé de la Grille : `filters.magasin` n'est jamais renseigné, donc les snapshots enregistrent toujours « TOTAL » (`floating-summary-bar.tsx:104`). + +--- + +## Lot 2 — Socle visuel, menu et vocabulaire (PR 2) + +**Thème et typographie** — `src/app/globals.css`, `theme-provider.tsx` +- `defaultTheme="light"`. +- Ajouter `@custom-variant dark (&:where(.dark, .dark *));` pour que les classes `dark:` suivent le bouton de thème. +- Ajouter `@import "tw-animate-css";`. +- Faire correspondre les jetons shadcn (`--color-background`, `--color-muted-foreground`, `--color-accent`…) aux variables de l'application. +- Contraste AA (≥ 4,5:1) pour `--text-muted` en clair et en sombre. +- Échelle typographique : + - rien sous **12 px** ; + - cellules de tableau à 13-14 px ; + - libellés en casse normale, sans MAJUSCULES `font-black tracking-widest`. +- Une seule famille de boutons (fusion de `.apple-btn-*` et `.btn-action-*`) ; définir ou retirer les classes inexistantes (`apple-btn`, `--border-subtle`, `--surface-tertiary`). + +**Composants partagés** — dans `src/components/ui/` +- `PageHeader` : titre, phrase d'explication, actions. +- `Card` / `Section`, `StatCard` (KPI avec écart N-1). +- `Badge`, `DeltaBadge`, `StoreBadge`, `GammeBadge`. +- `Tabs`, avec l'onglet actif dans l'URL. +- `Select`, `SearchInput`. +- `EmptyState`, `ErrorState`, `Skeleton`. +- `ConfirmDialog` sur `ui/dialog`. Il remplace `window.confirm`, `alert()` et les 3 modales faites à la main. +- Notifications discrètes (`sonner`, standard shadcn) à la place de `SuccessModal` pour les succès. +- **`DataTable`** : généralisé depuis `StockTable` (`stock-negatif/client.tsx:168-384`), qui gère déjà colonnes, tri, recherche, pagination et export. Ajouter en-tête collant, état vide, et infobulle sur les en-têtes. + +**Sources uniques** +- `src/lib/magasins.ts` : 292 → « Frouard (Nancy) », 579 → « Houdemont », TOTAL → « Nos 2 magasins ». Il remplace `SITE_NAMES` (dashboard), `months.ts:91-94` et les 3 copies de `SITES`. +- `src/lib/glossaire.ts` : libellé clair et infobulle pour chaque terme métier. Exemples : + - Gamme A–Z avec son sens, à reprendre de `bulk-action-toolbar.tsx:8-12` ; + - Réseau = environ `NB_MAGASINS_RESEAU` magasins (`network-trend.ts:13`) ; + - Franco, PCB, PRMP, GTIN, N-1, Init. +- Règles de vocabulaire : + - « Réseau » = les ~270 magasins uniquement ; nos 2 magasins = « Nos magasins » ; + - Famille et Sous-famille identiques partout ; + - vouvoiement partout. +- Seuils de marge : une seule constante, au lieu de 25/15 % sur le tableau de bord et 40/25 % sur la fiche. + +**Menu** — `src/components/shared/sidebar.tsx` +- Menu déplié par défaut, en groupes : + - **Au quotidien** : Accueil, Révision d'assortiment, Recherche produit, Stocks à surveiller, Commandes fournisseurs. + - **Analyses** : Meilleures ventes, Ventes par mois, Publicités. + - **Historique** : nouvelle page `/historique` qui fusionne Snapshots et Exports, avec un onglet par type ; l'onglet Exports est réservé aux admins. `/snapshots` et `/exports` y redirigent. + - **Administration** : Synchronisation, Paramètres. +- Icônes distinctes pour chaque entrée. +- `src/middleware.ts` : protéger aussi côté serveur la partie admin de l'historique. + +**En-tête et coquille** +- `header.tsx` : + - retirer la recherche globale, qui ne filtrait que la Grille ; la Grille garde la sienne ; + - afficher le vrai utilisateur ; + - réglages personnels (thème, densité de la Grille) dans un menu utilisateur accessible à tous. +- Remplacer les 11 `loading.tsx` (modale plein écran) par des squelettes de page non bloquants. +- Ajouter `app/(dashboard)/error.tsx` (message clair et bouton « Réessayer ») et `not-found.tsx`. +- Titre de l'application en français (`app/layout.tsx`). + +--- + +## Lot 3 — Migration des pages, une à une (PR 3, découpable en 3a/3b) + +Règle commune à chaque page : +- `PageHeader` avec une phrase « à quoi sert cette page » ; +- `DataTable` et composants partagés, jetons du thème ; +- retrait des enveloppes `min-h-screen bg-gray-50 p-6` (double marge) ; +- noms de magasins depuis `magasins.ts`, infobulles depuis `glossaire.ts` ; +- états vide et erreur explicites. + +| Page | Changements spécifiques | +|---|---| +| Accueil (`dashboard`) | Cartes `StatCard`. Section « Hit Parade » renommée « Top 10 d'hier ». Chaque produit mène à sa fiche. Couleurs codées en dur remplacées par les jetons. Message d'erreur compréhensible, sans trace technique. | +| Révision d'assortiment (`grid`) | **Barre d'outils** : un seul « Enregistrer » (dans la barre de résumé), un seul menu Export, un seul « Actualiser », avec les mêmes droits partout (`isAdmin` calculé côté serveur via `auth()` dans `grid/page.tsx`). Les actions rares (Non travaillés, Vues, Colonnes, Synchro Qlik) passent dans « Plus d'options ». **Libellés** : gammes affichées avec leur sens (« A — Cœur ») ; menu Colonnes avec de vrais libellés, pas les identifiants ; « / 270 » remplacé par `NB_MAGASINS_RESEAU`. **Chargement** : la superposition floue est remplacée par une barre de progression légère. **Accueil fournisseur** : une phrase-guide. | +| Recherche produit (`produits`) | Tailles ≥ 12 px dans `fiche.tsx`, `results.tsx` et `opportunites.tsx`. Infobulles PCB, PRMP, GTIN. Famille et Sous-famille alignées. Message de chargement sans « Qlik Sense ». | +| Meilleures ventes (`hit-parade`) | `DataTable` paginé ; état vide ; « % Marge » triable. Export via `exceljs` en import dynamique, ce qui permet de retirer `xlsx`. | +| Stocks à surveiller (`stock-negatif`) | Base du `DataTable`. En-têtes Excel lisibles (« Code article » au lieu de CODEIN, etc.). Noms de magasins. | +| Publicités | Le tri et le filtre magasin s'appliquent à l'ensemble des données, pas seulement à la page de 50. Infobulles « Taux de sortie » et « % CA total ». | +| Commandes fournisseurs (`commandes-auto`) | Onglets dans l'URL. Confirmation avant suppression. Erreurs affichées en notification. Retour visuel à l'enregistrement d'une fréquence. Infobulle « Franco ». | +| Ventes par mois (`analytics`) | Dernier **mois complet** par défaut. Mois en clair (« oct. 2026 vs oct. 2025 »). Recherche, tri, export, état vide. | +| Historique | Page fusionnée (lot 2), libellés de session lisibles. | +| Paramètres | Onglets Connexions / Utilisateurs / Clés API / Journal. Un bouton « Enregistrer » par section (le bouton collant trompeur disparaît). Thème et densité déplacés dans le menu utilisateur. | +| Synchronisation | Unités affichées (« jours », « heures »). Filtres en casse normale. Libellés sans jargon (« Tour bouclé » → « Tous les fournisseurs traités »). | +| Connexion | Libellés lisibles. Slogan « Propulsée par l'IA » retiré. Rendu clair. | + +--- + +## Lot 4 — Optimisations lourdes (PR 4) + +**Grille servie depuis l'instantané `grid_rows`** (le plus gros gain) +- La table est déjà remplie chaque nuit avec exactement les `ProductRow` du magasin TOTAL : `persistGridSnapshot` dans `get-product-rows.ts`, et `sync-scheduler.ts:173`. +- Ajouter `readGridRowsPayload(codeFournisseur)` dans `src/lib/grid-store.ts`, qui lit `payload::text` et l'envoie tel quel, sans analyse ni réencodage. +- Superposer ensuite la gamme INIT à jour (`refreshGammeInit`) et les gammes du dernier snapshot. +- Si l'instantané est trop ancien, relancer le calcul en arrière-plan (stale-while-revalidate). +- Ouverture à froid : de 10-43 s à environ 1-2 s. + +**Changement de magasin instantané** +- Toujours charger TOTAL : les lignes portent déjà le détail par magasin. +- Bascule côté client avec `setActiveMagasin` et `history.replaceState`, sans aller-retour serveur (`grid-filter-bar.tsx:100-105`). +- Le rattrapage via l'API FF (`reconcileSelectedStoreFromMensuelApi`) devient une petite requête séparée, `/api/grid/rows/store-patch`, appliquée quand elle arrive. + +**Rendu de la Grille** +- `React.memo` sur `HeatmapGrid`, `GridFilterBar` et `FloatingSummaryBar`. +- `useSaveDrafts` déplacé dans le bouton Enregistrer. +- En-tête de tableau mémorisé ; `useFlushSync: false` sur le virtualiseur. +- Largeurs de colonnes en variables CSS. +- `persist` de zustand sans les lignes, et limité en fréquence. +- Tendance réseau et texte de recherche calculés une seule fois par ligne à la réception ; le filtre global ne porte plus que sur ce texte. +- Lignes gardées en mémoire au retour sur la Grille (même fournisseur, moins de 10 min) : pas de `setRows([])`. + +**SQL sans index utilisable** + +À valider par `EXPLAIN ANALYZE` sur la base réelle avant fusion : le schéma des tables FF n'est pas dans le dépôt. + +- Fiche produit (`get-produit-fiche.ts`, `pg-ff-client.ts:1737-2045`) : résoudre `no_id` une fois, puis filtrer sur les clés ; lecture du cache Qlik dans le même `Promise.all` ; supprimer la double recherche du chemin `?cc=`. +- Ventes par mois (`pg-ff-client.ts:827-885`) : plages de dates au lieu de `TO_CHAR`. +- Stocks : réécrire `pgGetStockSansVente` (l.1198-1235) en agrégeant d'abord par (article, site). Charger seulement l'onglet actif. +- Meilleures ventes (l.922-991) : jointure sur `artnoid` / `no_id`. +- Commandes : la dernière réception est limitée aux fournisseurs du cadencier et à une fenêtre de dates ; appels « franco » à concurrence bornée, avec délai maximal ; un `Suspense` par onglet. +- Tableau de bord (l.623-797) : une seule requête SQL sur `cube_stock`, en réutilisant `pgGetStockForCodeins`, au lieu de ~60 appels HTTP. Cache par date, préchauffé après la synchro. +- `/api/v1/grid` : pagination par curseur (keyset) au lieu d'OFFSET ; COUNT une seule fois. +- `api-auth.ts` : `last_used_at` mis à jour au plus une fois par minute. + +**Nettoyage** +- Dépendances inutilisées : `@tanstack/react-query`, `@google/genai`, `ai`, `react-markdown`, et `xlsx` après le lot 3. +- Code mort : `supplier-selection.tsx`, `financial-cell.tsx`, `ui/textarea.tsx`, `getGridData` et `getAvailableNomenclature` (`grid/actions.ts`). + +--- + +## Hors périmètre, à signaler + +`src/features/settings/actions.ts` ne vérifie aucun droit. Tout utilisateur connecté peut lire l'URL de la base, le mot de passe Qlik et les clés IA, et réécrire la configuration. Ce point est proposé en tâche séparée. + +## Vérification (à chaque lot) + +1. **Contrôles automatiques** : + - `rtk tsc` : aucune nouvelle erreur par rapport à `tsc_errors.log`, car `ignoreBuildErrors` est activé. + - `rtk lint`. + - `rtk next build` : comparer le JS de premier chargement de `/grid` avant et après (lot 1 : − `exceljs` / `jspdf`). +2. **Visuel** : + - `rtk npm run dev`, puis Playwright (Chromium préinstallé) pour capturer chaque page en clair et en sombre, en 1920 et 1366 px de large. + - Un script dans la page signale tout texte calculé sous 12 px et tout élément `bg-white` en mode sombre. +3. **Vitesse** : + - mesurer le temps de réponse de `/api/grid/rows` (froid, chaud, après enregistrement), et de `/stock-negatif` et `/hit-parade` au 1er puis au 2e chargement ; + - objectif : 2e visite en moins de 200 ms, Grille froide en moins de 2 s au lot 4. +4. **Recette manuelle sur l'environnement réel** (ce conteneur n'a pas accès à PostgreSQL FF, à l'API FF ni à Qlik) : + - gros fournisseur ; + - changement de magasin instantané ; + - enregistrer puis rouvrir sans attente ; + - sélection multiple après filtre, sur les bons produits ; + - après « Actualiser », un retour par le menu ne force plus le recalcul ; + - exports Excel identiques. + +--- + +## Suivi — Lot 1 réalisé + +Écarts par rapport au plan, décidés pendant l'implémentation : + +- **Cache FF** : un cache mémoire dédié (`src/lib/ff-cache.ts`) remplace `unstable_cache`. Deux raisons : + - `unstable_cache` sérialise en JSON, ce qui casse les `Map` et les `Date` ; + - `revalidateTag` ne peut pas être appelé depuis la synchro nocturne, qui tourne hors requête. + + Fonctionnement : + - durée de vie de 30 min (`FF_CACHE_TTL_S`), et 10 min pour les publicités ; + - les appels simultanés partagent une seule requête ; + - les erreurs ne sont jamais gardées ; + - le cache est vidé en fin de synchro nocturne. +- **`statement_timeout`** : activé seulement si `PG_STATEMENT_TIMEOUT_MS` est défini, pour ne pas couper les longs calculs nocturnes. +- **Colonnes Qlik** : non modifié. `metricsByMonth` sert à la courbe « nombre de magasins vendeurs ». +- **Carte KPI du tableau de bord** : non modifiée. La ligne « Hier / N-1 » est une comparaison voulue, pas un doublon. +- **Préchauffage après la synchro** : reporté. L'invalidation suffit, la première visite recharge. diff --git a/scripts/db-init.js b/scripts/db-init.js index 3e242e8..912a925 100644 --- a/scripts/db-init.js +++ b/scripts/db-init.js @@ -61,6 +61,15 @@ async function main() { "created_at" timestamp DEFAULT now() ); `); + // Index : la Grille relit le dernier snapshot du fournisseur à chaque calcul + // et à chaque enregistrement, et l'historique liste ceux de l'utilisateur. + // Sans eux, chaque lecture parcourait toute la table (qui ne fait que grossir). + await tempPool.query(` + CREATE INDEX IF NOT EXISTS "idx_snapshots_fournisseur_date" + ON "session_snapshots" ("code_fournisseur", "created_at" DESC); + CREATE INDEX IF NOT EXISTS "idx_snapshots_user_type_date" + ON "session_snapshots" ("user_id", "type", "created_at" DESC); + `); console.log("[DB Init] Table session_snapshots is verified/created."); await tempPool.query(` diff --git a/src/app/(dashboard)/admin/synchronisation/client.tsx b/src/app/(dashboard)/admin/synchronisation/client.tsx index 0158b44..929e1e1 100644 --- a/src/app/(dashboard)/admin/synchronisation/client.tsx +++ b/src/app/(dashboard)/admin/synchronisation/client.tsx @@ -1,6 +1,6 @@ "use client"; -import { useCallback, useEffect, useMemo, useState } from "react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { CalendarClock, Play, Square, RefreshCw, Loader2, AlertTriangle, CheckCircle, Database, Network, Search, @@ -114,6 +114,10 @@ export function SynchronisationClient() { return () => clearInterval(id); }, [state?.enCours, rafraichirEtat]); + // Saisie numérique pas encore envoyée (cf. majSettingsDifferee). + const patchEnAttente = useRef>({}); + const minuteurPatch = useRef | null>(null); + const majSettings = async (patch: Partial) => { setErreur(null); try { @@ -122,10 +126,26 @@ export function SynchronisationClient() { }); const d = await res.json(); if (!res.ok) throw new Error(d.error ?? `Erreur ${res.status}`); - setSettings(d.settings); + // Une saisie faite pendant l'envoi ne doit pas être écrasée par la réponse. + setSettings({ ...d.settings, ...patchEnAttente.current }); } catch (e) { setErreur(e instanceof Error ? e.message : String(e)); } }; + // Champs numériques : la valeur s'affiche tout de suite et l'envoi au serveur + // est regroupé 600 ms après la dernière frappe. Avant, chaque chiffre tapé + // partait en PATCH, et une réponse tardive pouvait écraser la saisie en cours. + const majSettingsDifferee = (patch: Partial) => { + setSettings((prev) => (prev ? { ...prev, ...patch } : prev)); + patchEnAttente.current = { ...patchEnAttente.current, ...patch }; + if (minuteurPatch.current) clearTimeout(minuteurPatch.current); + minuteurPatch.current = setTimeout(() => { + const aEnvoyer = patchEnAttente.current; + patchEnAttente.current = {}; + minuteurPatch.current = null; + void majSettings(aEnvoyer); + }, 600); + }; + const action = async (act: "start" | "stop" | "seed", forcer = false) => { setErreur(null); try { @@ -207,7 +227,7 @@ export function SynchronisationClient() {
majSettings({ heureDebut: Number(e.target.value) })} + onChange={(e) => majSettingsDifferee({ heureDebut: Number(e.target.value) })} className="w-16 rounded-lg px-2 py-1.5 text-[13px]" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }} />
@@ -215,7 +235,7 @@ export function SynchronisationClient() {
majSettings({ heureFin: Number(e.target.value) })} + onChange={(e) => majSettingsDifferee({ heureFin: Number(e.target.value) })} className="w-16 rounded-lg px-2 py-1.5 text-[13px]" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }} />
@@ -225,14 +245,14 @@ export function SynchronisationClient() {
majSettings({ qlikParNuit: Number(e.target.value) })} + onChange={(e) => majSettingsDifferee({ qlikParNuit: Number(e.target.value) })} className="w-20 rounded-lg px-2 py-1.5 text-[13px]" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }} />
majSettings({ qlikMinJours: Number(e.target.value) })} + onChange={(e) => majSettingsDifferee({ qlikMinJours: Number(e.target.value) })} className="w-20 rounded-lg px-2 py-1.5 text-[13px]" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }} />
diff --git a/src/app/(dashboard)/analytics/page.tsx b/src/app/(dashboard)/analytics/page.tsx index 1bbe515..ce3a997 100644 --- a/src/app/(dashboard)/analytics/page.tsx +++ b/src/app/(dashboard)/analytics/page.tsx @@ -1,5 +1,6 @@ import { pgGetCaByFournisseur, pgGetCaByNomenclature } from "@/lib/pg-ff-client"; import { AnalyticsClient } from "./client"; +import { cachedFF } from "@/lib/ff-cache"; // Calcul du mois N-1 (même mois année précédente) function getMoisN1(mois: string): string { @@ -84,7 +85,7 @@ export default async function AnalyticsPage(props: { []; if (mode === "fournisseur") { - const result = await pgGetCaByFournisseur(mois, moisN1); + const result = await cachedFF(`ca-fournisseur:${mois}:${moisN1}`, () => pgGetCaByFournisseur(mois, moisN1)); rows = result.map((r) => ({ code: r.code, label: r.nom, @@ -93,7 +94,7 @@ export default async function AnalyticsPage(props: { ca_ttc: r.ca_ttc, })); } else { - const result = await pgGetCaByNomenclature(mois, moisN1); + const result = await cachedFF(`ca-nomenclature:${mois}:${moisN1}`, () => pgGetCaByNomenclature(mois, moisN1)); rows = result.map((r) => ({ code: r.code, label: `${r.code} — ${r.libelle}`, diff --git a/src/app/(dashboard)/commandes-auto/cadencier-client.tsx b/src/app/(dashboard)/commandes-auto/cadencier-client.tsx index 0626ea4..eea3f3b 100644 --- a/src/app/(dashboard)/commandes-auto/cadencier-client.tsx +++ b/src/app/(dashboard)/commandes-auto/cadencier-client.tsx @@ -1,7 +1,6 @@ "use client"; import { useMemo, useState, useTransition } from "react"; -import { useRouter } from "next/navigation"; import { AlertTriangle, CalendarClock, @@ -162,17 +161,17 @@ function SiteSection({ rows: CadenceView[]; fournisseurs: { code: string; nom: string }[]; }) { - const router = useRouter(); const [pending, startTransition] = useTransition(); const sorted = useMemo(() => trier(rows), [rows]); const existingCodes = useMemo(() => new Set(rows.map((r) => r.codefou)), [rows]); const nbACommander = rows.filter((r) => r.actif && r.statut === "a_commander").length; + // Pas de router.refresh() : les actions appellent déjà revalidatePath, dont + // la réponse rafraîchit la page. Les deux ensemble rechargeaient tout deux fois. function run(fn: () => Promise) { startTransition(async () => { await fn(); - router.refresh(); }); } diff --git a/src/app/(dashboard)/commandes-auto/page.tsx b/src/app/(dashboard)/commandes-auto/page.tsx index 5b5d287..3298dc4 100644 --- a/src/app/(dashboard)/commandes-auto/page.tsx +++ b/src/app/(dashboard)/commandes-auto/page.tsx @@ -1,6 +1,7 @@ import { pgGetCommandesAuto, type PgCommandeAutoRow } from "@/lib/pg-ff-client"; import { listCadences, getFournisseursPourCadence } from "@/features/commandes-auto/actions"; import { CommandesAutoTabs } from "./tabs"; +import { cachedFF } from "@/lib/ff-cache"; export type { PgCommandeAutoRow }; @@ -9,7 +10,13 @@ export const dynamic = "force-dynamic"; export default async function CommandesAutoPage() { const [rows, cadences, fournisseurs] = await Promise.all([ - pgGetCommandesAuto(), + // Propositions de l'API FF (un appel, plus un par fournisseur sans franco) : + // gardées 2 minutes, pour que chaque modification du cadencier — qui + // re-rend la page — n'attende pas de nouveau toute l'API. + cachedFF("commandes-auto", () => pgGetCommandesAuto(), { + ttlMs: 2 * 60 * 1000, + cacheIf: (rows) => rows.length > 0, + }), listCadences(), getFournisseursPourCadence(), ]); diff --git a/src/app/(dashboard)/hit-parade/client.tsx b/src/app/(dashboard)/hit-parade/client.tsx index ec4b18a..de939fe 100644 --- a/src/app/(dashboard)/hit-parade/client.tsx +++ b/src/app/(dashboard)/hit-parade/client.tsx @@ -2,7 +2,6 @@ import { useRouter } from "next/navigation"; import { useState, useMemo } from "react"; -import * as XLSX from "xlsx"; import type { HitParadePivotRow } from "./page"; type SortKey = "caTotal" | "ca292" | "ca579" | "qteTotal" | "qte292" | "qte579" | "stockTotal" | "stock292" | "stock579"; @@ -136,7 +135,9 @@ export function HitParadeClient({ dateDebut, dateFin, pivotted }: Props) { { qte292: 0, ca292: 0, marge292: 0, qte579: 0, ca579: 0, marge579: 0, qteTotal: 0, caTotal: 0, margeTotal: 0, stock292: 0, stock579: 0, stockTotal: 0 } ), [sorted]); - function exportToExcel() { + async function exportToExcel() { + // Chargée au clic seulement : la bibliothèque pèse plusieurs centaines de Ko. + const XLSX = await import("xlsx"); const headers = [ "Code", "Désignation", "Fournisseur", "Nomenclature", "Qté Nancy", "CA TTC Nancy", "% Marge Nancy", "Stock Nancy", diff --git a/src/app/(dashboard)/hit-parade/page.tsx b/src/app/(dashboard)/hit-parade/page.tsx index b207512..43d9d8b 100644 --- a/src/app/(dashboard)/hit-parade/page.tsx +++ b/src/app/(dashboard)/hit-parade/page.tsx @@ -1,5 +1,6 @@ import { pgGetHitParade, HitParadeRow } from "@/lib/pg-ff-client"; import { HitParadeClient } from "./client"; +import { cachedFF } from "@/lib/ff-cache"; export interface HitParadePivotRow { codein: string; @@ -80,7 +81,7 @@ export default async function HitParadePage(props: { const dateDebut = (searchParams.debut as string) || defaults.debut; const dateFin = (searchParams.fin as string) || defaults.fin; - const rows = await pgGetHitParade(dateDebut, dateFin); + const rows = await cachedFF(`hit-parade:${dateDebut}:${dateFin}`, () => pgGetHitParade(dateDebut, dateFin)); const pivotted = pivotHitParade(rows); return ( diff --git a/src/app/(dashboard)/publicites/client.tsx b/src/app/(dashboard)/publicites/client.tsx index e9e0ba7..4753017 100644 --- a/src/app/(dashboard)/publicites/client.tsx +++ b/src/app/(dashboard)/publicites/client.tsx @@ -26,6 +26,8 @@ function SortIcon({ col, sortKey, sortDir }: { col: SortKey; sortKey: SortKey; s const STATUT_LABELS: Record = { en_cours: { label: "En cours", cls: "bg-emerald-100 text-emerald-700" }, passee: { label: "Passée", cls: "bg-gray-100 text-gray-600" }, + // Le filtre envoie `passees` à l'API : la même valeur peut revenir sur les lignes. + passees: { label: "Passée", cls: "bg-gray-100 text-gray-600" }, a_venir: { label: "À venir", cls: "bg-blue-100 text-blue-700" }, }; diff --git a/src/app/(dashboard)/publicites/page.tsx b/src/app/(dashboard)/publicites/page.tsx index 7924c52..818fb37 100644 --- a/src/app/(dashboard)/publicites/page.tsx +++ b/src/app/(dashboard)/publicites/page.tsx @@ -1,4 +1,5 @@ import { PublicitesClient } from "./client"; +import { cachedFF } from "@/lib/ff-cache"; export interface Publicite { tcr_code: string; @@ -40,17 +41,31 @@ export interface PubliciteHistorique { const FF_API_BASE = process.env.FF_API_BASE_URL ?? "https://api.ffnancy.fr"; const PAGE_SIZE = 50; +/** Délai maximal d'un appel à l'API FF : sans lui, une API muette figeait la page. */ +const FF_API_TIMEOUT_MS = 15_000; +/** + * Réponses de l'API gardées 10 minutes (les erreurs ne le sont jamais) : la liste + * et l'historique étaient re-téléchargés à chaque clic sur un filtre ou une page. + */ +const PUB_CACHE_TTL_MS = 10 * 60 * 1000; -async function fetchPublicites(statut: string, page: number): Promise<{ - data: Publicite[]; - total: number; - pages: number; - error?: string; -}> { +type PublicitesResult = { data: Publicite[]; total: number; pages: number; error?: string }; + +function fetchPublicites(statut: string, page: number): Promise { + return cachedFF(`publicites:${statut}:${page}`, () => fetchPublicitesApi(statut, page), { + ttlMs: PUB_CACHE_TTL_MS, + cacheIf: (r) => !r.error, + }); +} + +async function fetchPublicitesApi(statut: string, page: number): Promise { const params = new URLSearchParams({ page: String(page), limit: String(PAGE_SIZE) }); if (statut && statut !== "toutes") params.set("statut", statut); try { - const res = await fetch(`${FF_API_BASE}/api/publicites?${params}`, { cache: "no-store" }); + const res = await fetch(`${FF_API_BASE}/api/publicites?${params}`, { + cache: "no-store", + signal: AbortSignal.timeout(FF_API_TIMEOUT_MS), + }); if (!res.ok) return { data: [], total: 0, pages: 0, error: `Erreur API: ${res.status} ${res.statusText}` }; const json = await res.json(); return { @@ -63,9 +78,21 @@ async function fetchPublicites(statut: string, page: number): Promise<{ } } -async function fetchHistorique(): Promise<{ data: PubliciteHistorique[]; error?: string }> { +type HistoriqueResult = { data: PubliciteHistorique[]; error?: string }; + +function fetchHistorique(): Promise { + return cachedFF("publicites-historique", fetchHistoriqueApi, { + ttlMs: PUB_CACHE_TTL_MS, + cacheIf: (r) => !r.error, + }); +} + +async function fetchHistoriqueApi(): Promise { try { - const res = await fetch(`${FF_API_BASE}/api/publicites/historique`, { cache: "no-store" }); + const res = await fetch(`${FF_API_BASE}/api/publicites/historique`, { + cache: "no-store", + signal: AbortSignal.timeout(FF_API_TIMEOUT_MS), + }); if (!res.ok) return { data: [], error: `Erreur historique: ${res.status}` }; const json = await res.json(); return { data: (json.publicites ?? []) as PubliciteHistorique[] }; diff --git a/src/app/(dashboard)/settings/page.tsx b/src/app/(dashboard)/settings/page.tsx index 2e3cd79..73544e4 100644 --- a/src/app/(dashboard)/settings/page.tsx +++ b/src/app/(dashboard)/settings/page.tsx @@ -13,6 +13,22 @@ import { ApiConnectionInfo } from "@/features/admin/components/api-connection-in import { GridWarmup } from "@/features/admin/components/grid-warmup"; import { ServerLogs } from "@/features/settings/components/server-logs"; +/** + * Configuration enregistrée, lue UNE fois pour toute la page : trois sections + * (connexion, API FF, Qlik) la demandaient chacune au montage, et les actions + * serveur s'exécutent les unes après les autres. + */ +let savedConfigPromise: ReturnType | null = null; +function loadSavedConfig(force = false): ReturnType { + if (force || !savedConfigPromise) { + savedConfigPromise = getSavedDatabaseConfig().catch((e) => { + savedConfigPromise = null; + throw e; + }); + } + return savedConfigPromise; +} + function Section({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) { return (
@@ -51,7 +67,7 @@ function FfApiStatusSection() { // Charge l'URL enregistrée pour la préremplir (vide = valeur par défaut). useEffect(() => { - getSavedDatabaseConfig() + loadSavedConfig() .then((cfg) => { setSavedUrl(cfg?.ffApiBaseUrl ?? null); if (cfg?.ffApiBaseUrl) setUrl(cfg.ffApiBaseUrl); @@ -177,7 +193,7 @@ function QlikSettingsSection() { const [status, setStatus] = useState<{ type: "ok" | "err"; msg: string } | null>(null); useEffect(() => { - getSavedDatabaseConfig().then((c) => { + loadSavedConfig().then((c) => { if (!c) return; setHost(c.qlikHost ?? ""); setUser(c.qlikUser ?? ""); @@ -265,8 +281,8 @@ export default function SettingsPage() { getDatabaseUrl } = useDbSettingsStore(); - const reloadFromServer = useCallback(async () => { - const config = await getSavedDatabaseConfig(); + const reloadFromServer = useCallback(async (force = false) => { + const config = await loadSavedConfig(force); if (config) { if (config.url) { // Parser l'URL pour remettre dans le store @@ -290,7 +306,9 @@ export default function SettingsPage() { // au montage, ce que la règle déconseille en général mais qui est ici le but. // eslint-disable-next-line react-hooks/set-state-in-effect setIsMounted(true); - reloadFromServer(); + // Lecture fraîche à chaque ouverture de la page ; les sections, montées + // juste après (cf. `isMounted`), réutilisent cette même requête. + reloadFromServer(true); }, [reloadFromServer]); const testDb = async () => { @@ -410,7 +428,7 @@ export default function SettingsPage() {
); }, @@ -1033,7 +1016,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat : (row.original.caByStore?.[activeMagasin] ?? 0); return (
- {Math.round(ca).toLocaleString("fr-FR")} € + {fmtEntier(ca)} €
); }, @@ -1054,7 +1037,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat return (
- {Math.round(marge).toLocaleString("fr-FR")} € + {fmtEntier(marge)} € = 40 ? "var(--accent-success)" : taux >= 25 ? "var(--accent-warning)" : "var(--accent-error)" @@ -1095,10 +1078,17 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat onColumnVisibilityChange: setColumnVisibility, onColumnSizingChange: setColumnSizing, columnResizeMode: "onChange", + // Identifiant stable : avec l'index par défaut, la sélection désignait + // d'autres produits dès qu'un filtre changeait l'ordre des lignes. + getRowId: (row) => row.codein, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), enableRowSelection: true, + // La recherche ne dépend pas de la colonne (elle lit libellé, code, référence + // et GTIN de la ligne) : un seul passage par ligne suffit, au lieu d'un par + // colonne filtrable (une quinzaine) à chaque frappe. + getColumnCanGlobalFilter: (column) => column.id === "codein", globalFilterFn: (row, _columnId, filterValue) => { const search = String(filterValue).toLowerCase(); const libelle = String(row.original.libelle1 || "").toLowerCase(); @@ -1111,6 +1101,31 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat const { rows: tableRows } = table.getRowModel(); + const prevSelectionRef = useRef([]); + + // Propagate selection changes via useEffect to avoid "update during render" error + useEffect(() => { + if (!onSelectionChange) return; + + // La sélection est indexée par code article (`getRowId`), et seules les + // lignes encore affichées comptent : une action groupée ne doit jamais + // toucher un produit masqué par un filtre ou par la recherche. + const selectedCodeins = table + .getFilteredSelectedRowModel() + .rows.map((r) => r.original.codein); + + // Only update if selection actually changed to avoid re-render loops & console warnings + const currentString = JSON.stringify(selectedCodeins); + const prevString = JSON.stringify(prevSelectionRef.current); + + if (currentString !== prevString) { + prevSelectionRef.current = selectedCodeins; + // Delay update to next tick to ensure we're out of any render cycles + setTimeout(() => onSelectionChange(selectedCodeins), 0); + } + }, [table, rowSelection, onSelectionChange, filteredData, filters.search]); + + const rowVirtualizer = useVirtualizer({ count: tableRows.length, getScrollElement: () => tableContainerRef.current, @@ -1291,8 +1306,6 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat {table.getHeaderGroups().map((headerGroup) => ( diff --git a/src/features/grid/components/sync-qlik-button.tsx b/src/features/grid/components/sync-qlik-button.tsx index 59aef41..0ed4391 100644 --- a/src/features/grid/components/sync-qlik-button.tsx +++ b/src/features/grid/components/sync-qlik-button.tsx @@ -1,7 +1,6 @@ "use client"; -import { useCallback } from "react"; -import { useRouter, usePathname, useSearchParams } from "next/navigation"; +import { useGridStore } from "@/features/grid/store/use-grid-store"; import { Loader2, RefreshCw, CheckCircle, AlertCircle } from "lucide-react"; import { useQlikSyncJob } from "@/features/qlik-sync/use-qlik-sync-job"; @@ -28,21 +27,12 @@ function formatLastUpdate(iso?: string | null): string { * dans `useQlikSyncJob`, partagée avec la fiche produit. */ export function SyncQlikButton({ codeFournisseur, lastUpdate }: SyncQlikButtonProps) { - const router = useRouter(); - const pathname = usePathname(); - const searchParams = useSearchParams(); - - /** Force le refresh de la grille (avec cache-buster) et de la barre de résumé. */ - const refreshGrid = useCallback(() => { - const params = new URLSearchParams(searchParams.toString()); - params.set("_refresh", String(Date.now())); - router.replace(`${pathname}?${params.toString()}`); - router.refresh(); - }, [pathname, router, searchParams]); + /** Recharge la grille en ignorant le cache serveur (la barre de résumé suit). */ + const requestRefresh = useGridStore((s) => s.requestRefresh); const { status, message, start } = useQlikSyncJob({ target: { mode: "fournisseur", fournisseur: codeFournisseur }, - onSuccess: refreshGrid, + onSuccess: requestRefresh, }); return ( diff --git a/src/features/grid/store/use-grid-store.ts b/src/features/grid/store/use-grid-store.ts index 66627e4..efdf6da 100644 --- a/src/features/grid/store/use-grid-store.ts +++ b/src/features/grid/store/use-grid-store.ts @@ -16,6 +16,14 @@ interface GridState { displayDensity: "compact" | "normal" | "comfortable"; /** The active URL search parameters (e.g. ?fournisseur=123&magasin=TOTAL) */ activeGridQuery: string; + /** + * Compteur de demandes de rechargement forcé (ignore le cache serveur). + * Volontairement hors URL et non persisté : un paramètre `_refresh` dans + * l'URL restait mémorisé dans `activeGridQuery`, et chaque retour sur la + * Grille par le menu relançait un recalcul complet. + */ + refreshRequest: number; + requestRefresh: () => void; /** Persisted column visibility state */ columnVisibility: Record; /** Persisted column sizing state */ @@ -59,6 +67,15 @@ interface GridState { let summaryTimer: ReturnType | null = null; +/** Retire l'ancien paramètre `_refresh` (cache-buster) d'une query string mémorisée. */ +function sansParamRefresh(query: string): string { + if (!query.includes("_refresh")) return query; + const params = new URLSearchParams(query.startsWith("?") ? query.slice(1) : query); + params.delete("_refresh"); + const qs = params.toString(); + return qs ? `?${qs}` : ""; +} + function indexRows(rows: ProductRow[]): Record { const indexed: Record = {}; for (const row of rows) indexed[row.codein] = row; @@ -117,6 +134,7 @@ export const useGridStore = create()( }, displayDensity: "normal", activeGridQuery: "", + refreshRequest: 0, columnVisibility: {}, columnSizing: {}, showMonthlySales: true, @@ -202,7 +220,8 @@ export const useGridStore = create()( set((state) => ({ ...state, filters: { ...state.filters, code3: codes } })); }, setDisplayDensity: (density) => set({ displayDensity: density }), - setActiveGridQuery: (query) => set({ activeGridQuery: query }), + setActiveGridQuery: (query) => set({ activeGridQuery: sansParamRefresh(query) }), + requestRefresh: () => set((state) => ({ refreshRequest: state.refreshRequest + 1 })), restoreSnapshot: (changes) => { set({ draftChanges: changes, summary: computeSummary(get().rows, changes, get().activeMagasin) }); }, @@ -249,8 +268,11 @@ export const useGridStore = create()( * dans le navigateur restait une chaîne : `new Set("320211")` produit un * ensemble de caractères, plus aucune ligne ne correspond, et la Grille * apparaît vide. Le numéro de version force la reprise de l'existant. + * + * v2 — `activeGridQuery` pouvait contenir `_refresh=…` : le lien « Grille » + * du menu forçait alors un recalcul serveur complet à chaque retour. */ - version: 1, + version: 2, migrate: (persisted: unknown, version: number): GridPersisted => { const etat = (persisted ?? {}) as GridPersisted & { filters?: Record }; if (version < 1 && etat.filters) { @@ -262,6 +284,9 @@ export const useGridStore = create()( // à la fusion (le bloc disparaîtrait sans raison). if (typeof etat.showMonthlySales !== "boolean") etat.showMonthlySales = true; if (typeof etat.showPrices !== "boolean") etat.showPrices = true; + if (typeof etat.activeGridQuery === "string") { + etat.activeGridQuery = sansParamRefresh(etat.activeGridQuery); + } return etat; }, // Only persist filters, display density, drafts, active grid query, and column visibility/sizing diff --git a/src/features/snapshots/api/get-snapshots.ts b/src/features/snapshots/api/get-snapshots.ts index 488aef6..bed4ca5 100644 --- a/src/features/snapshots/api/get-snapshots.ts +++ b/src/features/snapshots/api/get-snapshots.ts @@ -27,6 +27,8 @@ export async function getSnapshots(type?: "snapshot" | "export") { } catch (err: any) { const msg = (err?.message || String(err)).split("\n")[0]; console.error(`[getSnapshots] ERROR (type=${type}):`, msg, err); - return []; + // Remonter l'erreur : une liste vide faisait afficher « Aucun snapshot » + // au lieu de signaler que le chargement a échoué. + throw new Error("Chargement de l'historique impossible."); } } diff --git a/src/features/snapshots/components/snapshot-list.tsx b/src/features/snapshots/components/snapshot-list.tsx index 5f072bd..1c7b336 100644 --- a/src/features/snapshots/components/snapshot-list.tsx +++ b/src/features/snapshots/components/snapshot-list.tsx @@ -13,6 +13,7 @@ import { History, ChevronRight, Loader2, + AlertCircle, } from "lucide-react"; import { SuccessModal } from "@/components/shared/success-modal"; import { isStaleServerActionError, STALE_ACTION_MESSAGE } from "@/lib/stale-action"; @@ -78,6 +79,7 @@ export function SnapshotList({ type }: SnapshotListProps) { const fetchSnapshots = async () => { setLoading(true); + setError(null); try { const data = await getSnapshots(type); setSnapshots(data); @@ -146,6 +148,19 @@ export function SnapshotList({ type }: SnapshotListProps) { ); } + if (error && snapshots.length === 0) { + return ( +
+ +

L'historique n'a pas pu être chargé

+

{error}

+ +
+ ); + } + if (snapshots.length === 0) { return (
diff --git a/src/lib/api-ff-client.ts b/src/lib/api-ff-client.ts index e4eb42e..02e1261 100644 --- a/src/lib/api-ff-client.ts +++ b/src/lib/api-ff-client.ts @@ -16,6 +16,15 @@ const CONFIG_FILE = path.join(process.cwd(), "data", ".db-config.json"); const FF_API_BASE_DEFAULT = "https://api.ffnancy.fr"; const FF_API_BASE_TTL_MS = 30_000; +/** + * Options de tout appel à l'API FF : jamais de cache HTTP, et un délai maximal. + * Sans délai, une API muette figeait indéfiniment la page qui l'attendait. + */ +const FF_FETCH_TIMEOUT_MS = Number(process.env.FF_API_TIMEOUT_MS) || 30_000; +export function ffFetchInit(): RequestInit { + return { cache: "no-store", signal: AbortSignal.timeout(FF_FETCH_TIMEOUT_MS) }; +} + let ffApiBaseCache: { value: string; at: number } | null = null; /** @@ -201,7 +210,7 @@ async function fetchAllPages( // Page 1 — récupère les items et tente d'obtenir le total pour paralléliser const url1 = buildUrl(1); console.log(`[api-ff] GET ${url1}`); - const res1 = await fetch(url1, { cache: "no-store" }); + const res1 = await fetch(url1, ffFetchInit()); if (!res1.ok) { console.error(`[api-ff] HTTP ${res1.status} — ${url1}`); return []; @@ -227,7 +236,7 @@ async function fetchAllPages( const results = await Promise.all(chunk.map(async (p) => { const url = buildUrl(p); console.log(`[api-ff] GET ${url}`); - const res = await fetch(url, { cache: "no-store" }); + const res = await fetch(url, ffFetchInit()); if (!res.ok) return [] as T[]; const data = await res.json(); return extractList(data) as T[]; @@ -245,7 +254,7 @@ async function fetchAllPages( const results = await Promise.all(chunk.map(async (p) => { const url = buildUrl(p); console.log(`[api-ff] GET ${url}`); - const res = await fetch(url, { cache: "no-store" }); + const res = await fetch(url, ffFetchInit()); if (!res.ok) return { p, items: [] as T[] }; const data = await res.json(); return { p, items: extractList(data) as T[] }; @@ -311,7 +320,7 @@ export async function getFournisseursFromApi( : `${FF_API_BASE}/api/fournisseurs?limit=500`; console.log(`[api-ff] GET ${url}`); - const res = await fetch(url, { cache: "no-store" }); + const res = await fetch(url, ffFetchInit()); if (!res.ok) throw new Error(`HTTP ${res.status} on ${url}`); const data = await res.json(); @@ -468,7 +477,7 @@ export async function getMensuelByArticles( if (!noId) return; try { const url = `${FF_API_BASE}/api/articles/${encodeURIComponent(String(noId))}/mensuel?dateDebut=${dateDebut}&dateFin=${dateFin}`; - const res = await fetch(url, { cache: "no-store" }); + const res = await fetch(url, ffFetchInit()); if (!res.ok) return; const data = await res.json(); const entries: FfMensuelEntry[] = Array.isArray(data.data) ? data.data : []; @@ -555,7 +564,7 @@ export async function getReferentielByArticles( if (!noId) return; try { const url = `${FF_API_BASE}/api/articles/${encodeURIComponent(String(noId))}/referentiel`; - const res = await fetch(url, { cache: "no-store" }); + const res = await fetch(url, ffFetchInit()); if (!res.ok) return; const data: FfReferentiel = await res.json(); if (data?.article) result.set(art.codein, data); @@ -581,7 +590,7 @@ export async function getCommandesByFournisseur( try { const res = await fetch( `${FF_API_BASE}/api/commandes/articles?codefou=${encodeURIComponent(codefou)}`, - { cache: "no-store" } + ffFetchInit() ); if (!res.ok) return result; const data = await res.json(); @@ -602,7 +611,7 @@ export async function getCommandesByFournisseur( export async function getSyncStatus(): Promise { try { const FF_API_BASE = await getFfApiBase(); - const res = await fetch(`${FF_API_BASE}/api/sync/status`, { cache: "no-store" }); + const res = await fetch(`${FF_API_BASE}/api/sync/status`, ffFetchInit()); if (!res.ok) return null; return normalizeSyncStatus(await res.json()); } catch (err) { diff --git a/src/lib/ff-cache.ts b/src/lib/ff-cache.ts new file mode 100644 index 0000000..6fdda70 --- /dev/null +++ b/src/lib/ff-cache.ts @@ -0,0 +1,111 @@ +/** + * CollectFlow — Cache mémoire des lectures « FF » (base miroir et API FF Nancy). + * + * Les tables FF (`mvtart`, `cube_stock`, `articles`…) ne sont recopiées qu'une + * fois par nuit depuis SQL Server : recalculer à chaque visite les mêmes + * agrégations lourdes (stock, hit-parade, CA mensuel…) coûtait plusieurs + * secondes par page pour un résultat identique. + * + * Pourquoi pas `unstable_cache` : il sérialise en JSON (une `Map` devient `{}`, + * une `Date` une chaîne) et ne peut pas être invalidé hors d'une requête — or + * c'est la synchro nocturne, lancée par un minuteur, qui sait quand les données + * changent. Ici : + * - une durée de vie bornée (FF_CACHE_TTL_S, 30 min par défaut) ; + * - les appels simultanés pour la même clé partagent une seule requête ; + * - une erreur n'est jamais mise en cache ; + * - `invalidateFFCache()` vide tout (appelé en fin de synchro nocturne). + */ + +import "server-only"; + +import { pgGetDerniereReceptionParFournisseur, pgGetFournisseurs } from "@/lib/pg-ff-client"; + +const TTL_MS = (Number(process.env.FF_CACHE_TTL_S) || 30 * 60) * 1000; +/** Plafond d'entrées : les clés incluent des paramètres (dates, mois, magasin). */ +const MAX_ENTRIES = 100; + +interface Entry { + value?: unknown; + expiresAt: number; + pending?: Promise; +} + +// Rangé dans globalThis : un seul cache par processus, même si ce module est +// présent dans plusieurs lots compilés (routes, instrumentation). +const globalForFFCache = globalThis as typeof globalThis & { + __collectflowFFCache?: { store: Map; generation: number }; +}; +const cache = (globalForFFCache.__collectflowFFCache ??= { store: new Map(), generation: 0 }); +const store = cache.store; + +interface CachedOptions { + /** Durée de vie propre à cette clé, en millisecondes. */ + ttlMs?: number; + /** + * Ne garder le résultat que s'il passe ce test. Sert aux lectures qui + * avalent leurs erreurs et renvoient une liste vide : sans ce garde-fou, + * une panne passagère resterait affichée pendant toute la durée de vie. + */ + cacheIf?: (value: T) => boolean; +} + +export async function cachedFF(key: string, load: () => Promise, options: CachedOptions = {}): Promise { + const now = Date.now(); + const entry = store.get(key); + if (entry && "value" in entry && entry.expiresAt > now) return entry.value as T; + if (entry?.pending) return entry.pending as Promise; + + // Une invalidation pendant le chargement rend son résultat suspect : il est + // alors renvoyé à l'appelant, mais pas conservé. + const generation = cache.generation; + const pending = load().then( + (value) => { + if (generation !== cache.generation) return value; + if (options.cacheIf && !options.cacheIf(value)) { + store.delete(key); + } else { + store.delete(key); // réinsertion en fin : ordre d'éviction = ancienneté + store.set(key, { value, expiresAt: Date.now() + (options.ttlMs ?? TTL_MS) }); + while (store.size > MAX_ENTRIES) { + const oldest = store.keys().next().value; + if (oldest === undefined) break; + store.delete(oldest); + } + } + return value; + }, + (error) => { + if (generation === cache.generation) store.delete(key); + throw error; + }, + ); + // Une éventuelle valeur expirée est remplacée : seule la requête en cours compte. + store.set(key, { expiresAt: 0, pending }); + return pending; +} + +/** Vide tout le cache FF (fin de synchro nocturne, données fraîches). */ +export function invalidateFFCache(): void { + cache.generation++; + store.clear(); +} + +// --------------------------------------------------------------------------- +// Lectures partagées par plusieurs pages +// --------------------------------------------------------------------------- + +/** Référentiel fournisseurs (Grille, cadencier). Vide = erreur avalée, non gardé. */ +export function getFournisseursCached(): Promise<{ code: string; nom: string }[]> { + return cachedFF("fournisseurs", () => pgGetFournisseurs(), { cacheIf: (rows) => rows.length > 0 }); +} + +/** + * Dernière réception par fournisseur et magasin (cadencier). Agrège tout + * l'historique de `mvtart` : de loin la lecture la plus lourde de la page + * Commandes. Vide = erreur avalée, non gardé. + */ +export function getDerniereReceptionCached(): Promise> { + return cachedFF("derniere-reception", () => pgGetDerniereReceptionParFournisseur(), { + cacheIf: (map) => map.size > 0, + }); +} diff --git a/src/lib/format.ts b/src/lib/format.ts new file mode 100644 index 0000000..32f16c9 --- /dev/null +++ b/src/lib/format.ts @@ -0,0 +1,30 @@ +/** + * Formateurs de nombres partagés (fr-FR). + * + * `Number.prototype.toLocaleString` appelé avec des options construit un nouvel + * `Intl.NumberFormat` à chaque appel : dans la Grille, plusieurs milliers de + * cellules le payaient à chaque défilement et à chaque tri. Ces instances sont + * créées une seule fois et donnent exactement le même texte. + */ + +const nfEntier = new Intl.NumberFormat("fr-FR"); +const nfDecimal1 = new Intl.NumberFormat("fr-FR", { maximumFractionDigits: 1 }); +const nfEur0 = new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }); +const nfEur2 = new Intl.NumberFormat("fr-FR", { + style: "currency", + currency: "EUR", + minimumFractionDigits: 2, + maximumFractionDigits: 2, +}); + +/** Entier arrondi avec séparateur de milliers : `12 345`. */ +export const fmtEntier = (v: number): string => nfEntier.format(Math.round(v)); + +/** Nombre avec au plus une décimale : `12,5`. */ +export const fmtDecimal1 = (v: number): string => nfDecimal1.format(v); + +/** Montant en euros sans centimes : `12 345 €`. */ +export const fmtEur0 = (v: number): string => nfEur0.format(v); + +/** Montant en euros au centime (prix unitaires) : `3,49 €`. */ +export const fmtEur2 = (v: number): string => nfEur2.format(v); diff --git a/src/lib/grid-store.ts b/src/lib/grid-store.ts index 2394bfb..1ebb8e6 100644 --- a/src/lib/grid-store.ts +++ b/src/lib/grid-store.ts @@ -14,7 +14,7 @@ import "server-only"; import { db } from "@/db"; import { gridRows } from "@/db/schema"; -import { and, asc, desc, eq, ilike, or, sql, lt, type SQL } from "drizzle-orm"; +import { and, asc, desc, eq, ilike, inArray, or, sql, lt, type SQL } from "drizzle-orm"; import type { ProductRow } from "@/types/grid"; /** Colonnes autorisées au tri — liste blanche, jamais l'entrée utilisateur brute. */ @@ -147,6 +147,37 @@ export async function upsertGridRows(codeFournisseur: string, rows: ProductRow[] return written; } +/** + * Reporte des gammes enregistrées dans l'instantané persisté (colonne et payload), + * pour que /api/v1 les voie sans attendre un recalcul complet de la grille. + */ +export async function updateGridRowsGamme( + codeFournisseur: string, + changes: ReadonlyArray<{ codein: string; codeGamme: string }>, +): Promise { + const parGamme = new Map(); + for (const c of changes) { + const codeins = parGamme.get(c.codeGamme) ?? []; + codeins.push(c.codein); + parGamme.set(c.codeGamme, codeins); + } + const CHUNK = 5000; // bien en deçà des 65 535 paramètres liés de PostgreSQL + for (const [gamme, codeins] of parGamme) { + for (let i = 0; i < codeins.length; i += CHUNK) { + await db + .update(gridRows) + .set({ + codeGamme: gamme, + payload: sql`jsonb_set(${gridRows.payload}, '{codeGamme}', to_jsonb(${gamme}::text))`, + }) + .where(and( + eq(gridRows.codeFournisseur, codeFournisseur), + inArray(gridRows.codein, codeins.slice(i, i + CHUNK)), + )); + } + } +} + /** Construit la clause WHERE commune à la grille et à la recherche transversale. */ function buildWhere(q: GridQuery): SQL | undefined { const clauses: SQL[] = []; diff --git a/src/lib/log-capture.ts b/src/lib/log-capture.ts index 364245e..e3ddf71 100644 --- a/src/lib/log-capture.ts +++ b/src/lib/log-capture.ts @@ -22,7 +22,7 @@ * un job qui fait tomber le process laisse quand même son journal. */ -import { mkdir, readFile, readdir, stat, unlink, writeFile } from "node:fs/promises"; +import { appendFile, mkdir, readFile, readdir, stat, unlink, writeFile } from "node:fs/promises"; import { tmpdir } from "node:os"; import { join } from "node:path"; @@ -35,7 +35,7 @@ const MAX_LIGNES = 200_000; const MAX_LONGUEUR_LIGNE = 8_000; /** Nombre de journaux conservés sur disque. */ const MAX_FICHIERS = 20; -/** Écriture disque au plus toutes les N ms (le journal complet est réécrit). */ +/** Écriture disque au plus toutes les N ms (seules les nouvelles lignes sont ajoutées). */ const FLUSH_MS = 2_000; interface Capture { @@ -46,6 +46,8 @@ interface Capture { flushEnCours: boolean; flushDemande: boolean; dernierFlush: number; + /** Nombre de lignes déjà écrites sur disque. */ + ecrites: number; } const captures = new Map(); @@ -82,7 +84,16 @@ async function flush(capture: Capture): Promise { capture.flushEnCours = true; try { await mkdir(LOG_DIR, { recursive: true }); - await writeFile(fichierPour(capture.id), capture.lignes.join("\n") + "\n", "utf8"); + // Ajout des seules nouvelles lignes : réécrire tout le journal (jusqu'à + // 200 000 lignes) toutes les 2 s bloquait le serveur pendant les synchros. + const total = capture.lignes.length; + const nouvelles = capture.lignes.slice(capture.ecrites, total); + if (capture.ecrites === 0) { + await writeFile(fichierPour(capture.id), nouvelles.join("\n") + "\n", "utf8"); + } else if (nouvelles.length > 0) { + await appendFile(fichierPour(capture.id), nouvelles.join("\n") + "\n", "utf8"); + } + capture.ecrites = total; capture.dernierFlush = Date.now(); } catch { // Un journal de diagnostic ne doit jamais faire échouer le job qu'il observe. @@ -128,7 +139,9 @@ function instrumenterConsole(): void { const origine = console[methode].bind(console); console[methode] = (...args: unknown[]) => { try { - ajouter(formater(args)); + // Aucune capture ouverte (le cas courant) : on ne formate rien. + // Sérialiser chaque argument de chaque log coûtait à toutes les requêtes. + if (captures.size > 0) ajouter(formater(args)); } catch { // idem : jamais au détriment du log réel } @@ -173,6 +186,7 @@ export function startCapture(id: string, entete?: string): void { flushEnCours: false, flushDemande: false, dernierFlush: 0, + ecrites: 0, }; captures.set(id, capture); capture.lignes.push(`[${horodatage()}] [log-capture] début de capture ${id}`); diff --git a/src/lib/pg-ff-client.ts b/src/lib/pg-ff-client.ts index 38fdf12..69699ce 100644 --- a/src/lib/pg-ff-client.ts +++ b/src/lib/pg-ff-client.ts @@ -9,6 +9,7 @@ import { db } from "@/db"; import { sql, type SQL } from "drizzle-orm"; +import { ffFetchInit } from "@/lib/api-ff-client"; const FF_API_BASE = process.env.FF_API_BASE_URL ?? "https://api.ffnancy.fr"; @@ -20,16 +21,13 @@ let _nomenclatureParentCol: string | null | undefined = undefined; // undefined // Utilitaire : exécuter une requête sans workers parallèles PostgreSQL. // Les workers parallèles consomment /dev/shm (mémoire partagée Docker) et font // échouer les requêtes si le conteneur a un shm_size insuffisant. -// SET LOCAL s'applique uniquement à la transaction courante. +// Le réglage est désormais posé une fois par connexion du pool (src/db/index.ts) : +// la transaction BEGIN / SET LOCAL / COMMIT qui entourait chaque requête coûtait +// trois allers-retours de plus à chacune. // --------------------------------------------------------------------------- async function pgNoParallel(query: SQL): Promise<{ rows: unknown[] }> { - let rows: unknown[] = []; - await db.transaction(async (tx) => { - await tx.execute(sql`SET LOCAL max_parallel_workers_per_gather = 0`); - const r = await tx.execute(query); - rows = r.rows; - }); - return { rows }; + const r = await db.execute(query); + return { rows: r.rows }; } // --------------------------------------------------------------------------- @@ -96,7 +94,6 @@ export async function pgGetFournisseurs(search?: string): Promise<{ code: string ${search ? sql`AND (fi.nom ILIKE ${'%' + search + '%'} OR fi.code ILIKE ${'%' + search + '%'})` : sql``} ORDER BY fi.nom `); - console.log(`[pg-ff] pgGetFournisseurs: ${result.rows.length} fournisseurs`); return (result.rows as unknown as { code: string; nom: string }[]).filter(r => r.code && r.nom); } catch (e) { console.error("[pg-ff] pgGetFournisseurs error:", (e as Error).message?.slice(0, 200)); @@ -297,10 +294,6 @@ export async function pgGetGammesByFournisseur(codefou: string): Promise 0) { - console.log("[pg-ff] Gammes sample row:", JSON.stringify(result.rows[0])); - } - console.log(`[pg-ff] Gammes: ${map.size} articles avec gamme`); return map; } @@ -429,7 +422,6 @@ export async function pgGetNomenclatureByFournisseur(codefou: string): Promise 0) console.log("[pg-ff] Nomenclature sample:", JSON.stringify(result.rows[0])); return buildNomMap(result.rows as unknown as PgNomRow[]); } @@ -635,9 +627,9 @@ export async function pgGetDashboardData(): Promise { // Deux appels parallèles : données hier + données même jour N-1 const [apiResult, apiN1Result] = await Promise.all([ - fetch(`${apiBase}/dashboard?date=${dateHier}`, { cache: "no-store" }) + fetch(`${apiBase}/dashboard?date=${dateHier}`, ffFetchInit()) .then(r => { if (!r.ok) throw new Error(`API dashboard ${r.status}: ${r.statusText}`); return r.json() as Promise; }), - fetch(`${apiBase}/dashboard?date=${dateN1Param}`, { cache: "no-store" }) + fetch(`${apiBase}/dashboard?date=${dateN1Param}`, ffFetchInit()) .then(r => r.ok ? r.json() as Promise : null) .catch(() => null), ]); @@ -686,7 +678,7 @@ export async function pgGetDashboardData(): Promise { const batch = allCodeins.slice(i, i + 5); await Promise.all(batch.map(async (codein) => { try { - const artRes = await fetch(`${FF_API_BASE}/api/articles?codein=${encodeURIComponent(codein)}`); + const artRes = await fetch(`${FF_API_BASE}/api/articles?codein=${encodeURIComponent(codein)}`, ffFetchInit()); if (!artRes.ok) return; const artData = await artRes.json(); if (!artData.articles || artData.articles.length === 0) return; @@ -695,8 +687,8 @@ export async function pgGetDashboardData(): Promise { if (!noId) return; const [refRes, dernierRes] = await Promise.all([ - fetch(`${FF_API_BASE}/api/articles/${encodeURIComponent(noId)}/referentiel`), - fetch(`${FF_API_BASE}/api/articles/${encodeURIComponent(noId)}/dernier-fournisseur`), + fetch(`${FF_API_BASE}/api/articles/${encodeURIComponent(noId)}/referentiel`, ffFetchInit()), + fetch(`${FF_API_BASE}/api/articles/${encodeURIComponent(noId)}/dernier-fournisseur`, ffFetchInit()), ]); // Stock (toujours depuis referentiel) @@ -1373,7 +1365,7 @@ function mapCommandeAutoRow(r: any): PgCommandeAutoRow { export async function pgGetCommandesAuto(): Promise { try { - const res = await fetch(`${FF_API_BASE}/api/commandes-auto`, { cache: "no-store" }); + const res = await fetch(`${FF_API_BASE}/api/commandes-auto`, ffFetchInit()); if (!res.ok) throw new Error(`HTTP ${res.status}`); const data = await res.json(); // L'API retourne { count: N, propositions: [...] } ou un tableau direct @@ -1414,7 +1406,7 @@ export async function pgGetCommandesAuto(): Promise { uniqueCodeFous.map(async codefou => { // 1. Essai sans filtre site try { - const res2 = await fetch(`${FF_API_BASE}/api/commandes-auto/${encodeURIComponent(codefou)}`, { cache: "no-store" }); + const res2 = await fetch(`${FF_API_BASE}/api/commandes-auto/${encodeURIComponent(codefou)}`, ffFetchInit()); if (res2.ok) { const detail = await res2.json(); const f = extractFranco(detail); @@ -1423,7 +1415,7 @@ export async function pgGetCommandesAuto(): Promise { } catch { /* ignore */ } // 2. Fallback site=000 try { - const res3 = await fetch(`${FF_API_BASE}/api/commandes-auto/${encodeURIComponent(codefou)}?site=000`, { cache: "no-store" }); + const res3 = await fetch(`${FF_API_BASE}/api/commandes-auto/${encodeURIComponent(codefou)}?site=000`, ffFetchInit()); if (res3.ok) { const detail = await res3.json(); const f = extractFranco(detail);