mirror of
https://github.com/R0m1k3/CollectFlow.git
synced 2026-10-11 17:26:32 +02:00
Merge de main : report du masquage des secrets dans la nouvelle page Paramètres
La page Paramètres a été déplacée dans settings/client.tsx (onglets). Le conflit sur page.tsx est résolu en gardant la version de main ; les changements de l'interface y sont reportés : champs mot de passe PostgreSQL et Qlik vides avec « Enregistré — inchangé si vide », test Qlik possible avec un mot de passe enregistré, plus de mot de passe relu depuis le serveur. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RkfUui3qGg2zmu3uHWjNXJ
This commit is contained in:
124 files changed
+9460
-7432
No files matched your search
@@ -0,0 +1,378 @@
|
||||
# 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<T>`** : généralisé depuis `StockTable<T>` (`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.
|
||||
|
||||
## Suivi — Lot 2 réalisé
|
||||
|
||||
- **Thème** :
|
||||
- clair par défaut ; les classes `dark:` suivent le bouton de thème ;
|
||||
- animations (`tw-animate-css`) réellement importées ;
|
||||
- couleurs shadcn branchées sur les variables ;
|
||||
- libellés gris au contraste AA dans les deux thèmes ;
|
||||
- fond plein pour le menu et l'en-tête (le flou ne servait à rien).
|
||||
- **Composants partagés**, dans `src/components/ui/` :
|
||||
- `PageHeader`, `Card`, `Field`, `StatCard` ;
|
||||
- `Badge`, `DeltaBadge`, `StoreBadge`, `GammeBadge` ;
|
||||
- `Tabs`, `Segmented`, `useUrlTab` ;
|
||||
- `Select`, `SearchInput`, `Input` ;
|
||||
- `EmptyState`, `ErrorState`, `Skeleton`, `PageSkeleton` ;
|
||||
- `Tooltip`, `Terme` (glossaire) ;
|
||||
- `toast` et `confirmer` (`feedback.tsx`) ;
|
||||
- `Pagination`, `DataTable`.
|
||||
- **Sources uniques** :
|
||||
- `lib/magasins.ts` (noms des magasins) ;
|
||||
- `lib/gammes.ts` (A à Z, avec leur sens et leurs couleurs) ;
|
||||
- `lib/glossaire.ts` ;
|
||||
- `lib/marge.ts` (seuils 40 / 25 %, ceux de la Grille) ;
|
||||
- `lib/export-excel.ts` (export unique, via exceljs).
|
||||
- **Navigation** :
|
||||
- menu groupé (Au quotidien / Analyses / Suivi / Administration), déplié par défaut, libellés en français ;
|
||||
- en-tête : nom de la page, thème, menu du compte (vrai nom, hauteur des lignes de la Grille pour tous, déconnexion) ;
|
||||
- la recherche globale, qui ne filtrait que la Grille, est retirée.
|
||||
- **Historique** : nouvelle page `/historique` (sessions et exports), et redirection des anciennes adresses `/snapshots` et `/exports`. Les deux onglets sont visibles par tous : chacun n'y voit que ses propres enregistrements.
|
||||
- **Chargements et erreurs** :
|
||||
- squelettes de page au lieu de la fenêtre plein écran ;
|
||||
- pages d'erreur (`error.tsx`) et « page introuvable » en français ;
|
||||
- après connexion, arrivée sur l'Accueil, comme pour `/`.
|
||||
- **Écart** : les en-têtes Excel de la page Stocks (CODEIN, GENCODE, QTE, CODMV, avec les codes 503 / 412) **ne seront pas renommés**. C'est vraisemblablement un format d'import de régularisation dans FF.
|
||||
|
||||
## Suivi — Lot 3 réalisé
|
||||
|
||||
Toutes les pages utilisent désormais :
|
||||
- `PageHeader` avec une phrase d'explication ;
|
||||
- les couleurs du thème (plus de pages figées en blanc) ;
|
||||
- des textes d'au moins 12 px ;
|
||||
- les noms de magasins, `toast` et `confirmer`.
|
||||
|
||||
Vérifié dans un navigateur : sur les pages visitées, en clair et en sombre, aucun texte n'est sous 12 px.
|
||||
|
||||
| Page | Changements principaux |
|
||||
|---|---|
|
||||
| Accueil | Cartes « Nos 2 magasins » : CA, tickets et panier moyen, avec l'évolution N-1. Une carte par magasin. Top 10 lisible, avec un lien vers la fiche produit. |
|
||||
| Révision d'assortiment | **Barre du bas** : seul endroit pour enregistrer et exporter, avec les mêmes droits pour tous. Le menu Export regroupe les deux anciens. Bouton « Annuler » avec confirmation. **Filtres** : sens des gammes affiché (A Cœur…), magasin choisi en un clic, menu « Colonnes » en clair. **Chargement** : bandeau de progression au lieu de la fenêtre floue. **Droits** : lus côté serveur. |
|
||||
| Recherche produit | Fiche lisible (Secteur / Rayon / Famille), infobulles PCB, PRMP, code-barres, réseau. Plus de mention technique de Qlik. |
|
||||
| Stocks à surveiller | `DataTable` avec trois onglets et une explication pour chacun. **Export Excel inchangé** (format d'import FF). |
|
||||
| Meilleures ventes | `DataTable` avec un tri sur toutes les colonnes et une ligne de totaux. Export via exceljs (`xlsx` n'est plus utilisé). |
|
||||
| Ventes par mois | Dernier mois complet par défaut, mois en clair, bascule Fournisseur / Famille, recherche, tri, export. |
|
||||
| Publicités | Onglets, statuts lisibles, part du CA calculée en pied de tableau. Le tri ne porte que sur la page affichée, et la page le signale. |
|
||||
| Commandes fournisseurs | Onglets dans l'URL, confirmation avant suppression, retours de toutes les actions. |
|
||||
| Historique | « Reprendre dans la Grille », chiffres visibles, états vides et d'erreur. |
|
||||
| Paramètres | Onglets Connexions / Utilisateurs / Accès API / Journal serveur, un bouton Enregistrer par section. |
|
||||
| Synchronisation | Vocabulaire clair, unités affichées, résumé en indicateurs. |
|
||||
| Connexion | Libellés lisibles, fond sobre. |
|
||||
|
||||
Autres changements :
|
||||
- **Composants retirés** : `SuccessModal`, `ConfirmModal`, `ChangePasswordModal`, `LoadingModal`, `export-dropdown`, `financial-cell` et `supplier-selection`, qui n'étaient plus utilisés.
|
||||
- **Correction** : le nom de l'utilisateur est maintenant transmis à la session, et l'en-tête l'affiche.
|
||||
|
||||
## Suivi — Lot 4 réalisé
|
||||
|
||||
**Grille servie depuis l'instantané `grid_rows`**
|
||||
- `getProductRows` lit d'abord l'instantané du fournisseur (`readGridSnapshot`), puis y reporte :
|
||||
- la gamme FF du moment (INIT) ;
|
||||
- les gammes du dernier enregistrement.
|
||||
- Hors « Nos 2 magasins », le rattrapage du magasin choisi est appliqué comme après un calcul complet.
|
||||
- L'instantané n'est pas utilisé dans trois cas, et la Grille est alors recalculée comme avant :
|
||||
- il est absent ;
|
||||
- il date d'un autre mois (la fenêtre des 12 mois a changé) ;
|
||||
- il est d'un ancien format. Un numéro de version (`payloadVersion`) est désormais écrit dans chaque ligne, donc les instantanés existants seront recalculés une fois, à la première ouverture ou par la synchro de la nuit.
|
||||
- Instantané de plus de 20 h : il est servi tout de suite, et un recalcul part en arrière-plan.
|
||||
- « Actualiser » force toujours le calcul complet.
|
||||
- Mesure locale (30 lignes) : 43 ms depuis l'instantané, 1 ms depuis le cache mémoire.
|
||||
|
||||
**Grille côté navigateur**
|
||||
- Retour sur la Grille (même fournisseur et même magasin, moins de 10 min) : les lignes en mémoire sont réutilisées, sans nouveau téléchargement.
|
||||
- Changement de magasin ou « Actualiser » sur le même fournisseur : la Grille reste affichée et utilisable. Les chiffres complétés remplacent l'affichage d'un bloc, une fois reçus.
|
||||
- `React.memo` sur la Grille, la barre de filtres et la barre du bas. En-tête du tableau mémorisé. Virtualiseur sans `flushSync`.
|
||||
|
||||
**Requêtes**
|
||||
- **Fiche produit** : les sept lectures, y compris le réseau Qlik, partent en même temps au lieu de deux vagues successives.
|
||||
- **Ventes par mois** : filtre sur des plages de dates au lieu de `TO_CHAR(datmvt)`, ce qui permet à PostgreSQL d'utiliser un index sur `datmvt`. Résultats identiques vérifiés sur une base de test (colonnes `date` et `timestamp`, bornes de mois).
|
||||
- **Stock sans vente** : même principe pour la borne « avant le mois en cours ».
|
||||
- **Accueil** :
|
||||
- enrichissement des produits par vagues de 12 appels au lieu de 5 ;
|
||||
- cache porté à 30 min, puisque ce sont les ventes de la veille.
|
||||
- **API `/api/v1`** :
|
||||
- le comptage et la page sont lus en parallèle ;
|
||||
- `last_used_at` d'une clé est écrit au plus une fois par minute ;
|
||||
- la version interne des lignes n'est pas exposée.
|
||||
|
||||
**Non fait volontairement** (à reprendre avec un accès à la base réelle)
|
||||
- Réécritures SQL lourdes : Meilleures ventes par `artnoid`, Stock sans vente agrégé d'abord, tableau de bord en une requête SQL au lieu des appels HTTP. Sans le schéma ni les volumes de la base FF, impossible de vérifier l'équivalence des résultats et le gain par `EXPLAIN ANALYZE`.
|
||||
- Index sur les tables FF (`mouvements.datmvt`, `codein`) : ces tables ne sont pas gérées par CollectFlow. À proposer à l'administrateur de la base après `EXPLAIN ANALYZE`.
|
||||
- Pagination par curseur de `/api/v1/grid` : elle changerait le contrat public (`page`) utilisé par des appelants externes.
|
||||
- Suppression des dépendances inutilisées (`@tanstack/react-query`, `@google/genai`, `ai`, `react-markdown`, `xlsx`) : le dépôt a deux fichiers de verrouillage (npm et pnpm). À faire avec le gestionnaire de paquets réellement utilisé en production.
|
||||
|
||||
**À vérifier en production**
|
||||
- Première ouverture d'un gros fournisseur après la synchro de la nuit : elle doit être quasi immédiate.
|
||||
- Changement de magasin : la Grille reste affichée, puis les chiffres se mettent à jour.
|
||||
- Enregistrer, quitter la Grille, puis y revenir : les gammes enregistrées sont bien là.
|
||||
@@ -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(`
|
||||
|
||||
@@ -1,17 +1,12 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LoginForm } from "@/features/auth/components/login-form";
|
||||
|
||||
export const metadata: Metadata = { title: "Connexion" };
|
||||
|
||||
export default function LoginPage() {
|
||||
return (
|
||||
<main className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-950 p-6 relative overflow-hidden">
|
||||
{/* Éléments de design en arrière-plan pour l'effet "Apple Premium" */}
|
||||
<div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
|
||||
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-indigo-500/10 dark:bg-indigo-500/5 blur-[120px] rounded-full" />
|
||||
<div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-emerald-500/10 dark:bg-emerald-500/5 blur-[120px] rounded-full" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 w-full flex justify-center">
|
||||
<LoginForm />
|
||||
</div>
|
||||
<main className="flex min-h-screen items-center justify-center bg-[var(--bg-base)] p-6">
|
||||
<LoginForm />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,22 @@
|
||||
"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,
|
||||
CheckCircle2, Database, Network, Clock,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { PageHeader } from "@/components/ui/page-header";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge, type Ton } from "@/components/ui/badge";
|
||||
import { Input, Label, SearchInput } from "@/components/ui/form-controls";
|
||||
import { Segmented, type TabItem } from "@/components/ui/tabs";
|
||||
import { DataTable, type DataColumn } from "@/components/ui/data-table";
|
||||
import { StatCard } from "@/components/ui/stat-card";
|
||||
import { ErrorState, Skeleton } from "@/components/ui/states";
|
||||
import { Tooltip } from "@/components/ui/tooltip";
|
||||
import { confirmer, toast } from "@/components/ui/feedback";
|
||||
import { fmtEntier } from "@/lib/format";
|
||||
|
||||
interface SyncSettings {
|
||||
actif: boolean;
|
||||
@@ -51,18 +62,46 @@ interface Resume {
|
||||
desactivesAuto: number; enEchecSql: number; enEchecQlik: number; jamaisSql: number;
|
||||
}
|
||||
|
||||
const fmtDate = (iso: string | null) =>
|
||||
iso ? new Date(iso).toLocaleString("fr-FR", { dateStyle: "short", timeStyle: "short" }) : "jamais";
|
||||
const fmtDuree = (ms: number | null) =>
|
||||
ms == null ? "" : ms < 1000 ? `${ms} ms` : `${Math.round(ms / 1000)} s`;
|
||||
type Filtre = "tous" | "actifs" | "inactifs" | "echecs";
|
||||
|
||||
function Pastille({ statut }: { statut: string | null }) {
|
||||
if (!statut) return <span className="text-[11px]" style={{ color: "var(--text-muted)" }}>—</span>;
|
||||
const couleurs: Record<string, string> = {
|
||||
succes: "text-emerald-500", echec: "text-red-500", vide: "text-amber-500",
|
||||
};
|
||||
const libelles: Record<string, string> = { succes: "ok", echec: "échec", vide: "vide" };
|
||||
return <span className={cn("text-[11px] font-semibold", couleurs[statut] ?? "")}>{libelles[statut] ?? statut}</span>;
|
||||
/** Libellés des deux sources, identiques partout dans la page. */
|
||||
const VENTES = "Ventes (base FF)";
|
||||
const RESEAU = "Réseau (Qlik)";
|
||||
|
||||
const fmtDate = (iso: string | null) =>
|
||||
iso ? new Date(iso).toLocaleString("fr-FR", { dateStyle: "short", timeStyle: "short" }) : "Jamais";
|
||||
|
||||
function fmtDuree(ms: number | null): string {
|
||||
if (ms == null) return "";
|
||||
if (ms < 1000) return `${ms} ms`;
|
||||
const s = Math.round(ms / 1000);
|
||||
return s < 60 ? `${s} s` : `${Math.floor(s / 60)} min ${s % 60} s`;
|
||||
}
|
||||
|
||||
const STATUTS: Record<string, { ton: Ton; libelle: string; aide: string }> = {
|
||||
succes: { ton: "succes", libelle: "OK", aide: "Dernière mise à jour réussie" },
|
||||
echec: { ton: "erreur", libelle: "Échec", aide: "La dernière mise à jour a échoué" },
|
||||
vide: { ton: "alerte", libelle: "Vide", aide: "Aucune donnée reçue lors de la dernière mise à jour" },
|
||||
};
|
||||
|
||||
function StatutBadge({ statut }: { statut: string | null }) {
|
||||
if (!statut) return null;
|
||||
const s = STATUTS[statut];
|
||||
return s ? <Badge ton={s.ton} title={s.aide}>{s.libelle}</Badge> : <Badge>{statut}</Badge>;
|
||||
}
|
||||
|
||||
const CASE = "h-4 w-4 cursor-pointer accent-[var(--accent)]";
|
||||
|
||||
function correspond(r: FournisseurRow, f: Filtre): boolean {
|
||||
if (f === "actifs") return r.actifSql || r.actifQlik;
|
||||
if (f === "inactifs") return !r.actifSql && !r.actifQlik;
|
||||
if (f === "echecs") return r.dernierSqlStatut === "echec" || r.dernierQlikStatut === "echec";
|
||||
return true;
|
||||
}
|
||||
|
||||
/** « Lancement automatique » (planifié la nuit) ou « manuel » (bouton). */
|
||||
function libelleOrigine(origine: SyncState["origine"]): string {
|
||||
return origine === "auto" ? " automatique" : origine === "manuel" ? " manuel" : "";
|
||||
}
|
||||
|
||||
export function SynchronisationClient() {
|
||||
@@ -74,7 +113,8 @@ export function SynchronisationClient() {
|
||||
const [erreur, setErreur] = useState<string | null>(null);
|
||||
const [chargement, setChargement] = useState(true);
|
||||
const [recherche, setRecherche] = useState("");
|
||||
const [filtre, setFiltre] = useState<"tous" | "actifs" | "inactifs" | "echecs">("tous");
|
||||
const [filtre, setFiltre] = useState<Filtre>("tous");
|
||||
const [actionEnCours, setActionEnCours] = useState<"start" | "stop" | "seed" | null>(null);
|
||||
|
||||
// ── Lectures pures : aucun setState, pour rester appelables depuis un effet ──
|
||||
const lireEtat = useCallback(async () => {
|
||||
@@ -107,39 +147,87 @@ export function SynchronisationClient() {
|
||||
|
||||
useEffect(() => { rafraichirTout(); }, [rafraichirTout]);
|
||||
|
||||
// Suivi rapproché pendant un round : l'état change à chaque fournisseur.
|
||||
const reessayer = () => {
|
||||
setChargement(true);
|
||||
rafraichirTout();
|
||||
};
|
||||
|
||||
// Suivi rapproché pendant un lancement : l'état change à chaque fournisseur.
|
||||
useEffect(() => {
|
||||
if (!state?.enCours) return;
|
||||
const id = setInterval(rafraichirEtat, 3000);
|
||||
return () => clearInterval(id);
|
||||
}, [state?.enCours, rafraichirEtat]);
|
||||
|
||||
// Saisie numérique pas encore envoyée (cf. majSettingsDifferee).
|
||||
const patchEnAttente = useRef<Partial<SyncSettings>>({});
|
||||
const minuteurPatch = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const majSettings = async (patch: Partial<SyncSettings>) => {
|
||||
setErreur(null);
|
||||
try {
|
||||
const res = await fetch("/api/admin/sync", {
|
||||
method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(patch),
|
||||
});
|
||||
const d = await res.json();
|
||||
if (!res.ok) throw new Error(d.error ?? `Erreur ${res.status}`);
|
||||
setSettings(d.settings);
|
||||
} catch (e) { setErreur(e instanceof Error ? e.message : String(e)); }
|
||||
// Une saisie faite pendant l'envoi ne doit pas être écrasée par la réponse.
|
||||
setSettings({ ...d.settings, ...patchEnAttente.current });
|
||||
} catch (e) {
|
||||
toast.erreur(`Le réglage n'a pas pu être enregistré : ${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<SyncSettings>) => {
|
||||
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);
|
||||
setActionEnCours(act);
|
||||
try {
|
||||
const res = await fetch("/api/admin/sync", {
|
||||
method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: act, forcer }),
|
||||
});
|
||||
const d = await res.json();
|
||||
if (!res.ok) throw new Error(d.error ?? `Erreur ${res.status}`);
|
||||
if (act === "seed") {
|
||||
toast.succes(`Liste des fournisseurs actualisée (${fmtEntier(Number(d.fournisseurs) || 0)} dans le référentiel FF).`);
|
||||
} else if (act === "stop") {
|
||||
toast.info("Arrêt demandé : la mise à jour s'arrête après le fournisseur en cours.");
|
||||
}
|
||||
rafraichirTout();
|
||||
} catch (e) { setErreur(e instanceof Error ? e.message : String(e)); }
|
||||
} catch (e) {
|
||||
const libelles = { start: "Le lancement a échoué", stop: "L'arrêt a échoué", seed: "La liste n'a pas pu être actualisée" };
|
||||
toast.erreur(`${libelles[act]} : ${e instanceof Error ? e.message : String(e)}`);
|
||||
} finally {
|
||||
setActionEnCours(null);
|
||||
}
|
||||
};
|
||||
|
||||
const lancer = async () => {
|
||||
if (!dansLaFenetre) {
|
||||
const ok = await confirmer({
|
||||
titre: "Lancer la mise à jour maintenant ?",
|
||||
message: "Nous sommes en dehors de la plage horaire nocturne : la mise à jour va solliciter la base FF et Qlik en pleine journée, ce qui peut ralentir l'application pour les magasins.",
|
||||
libelleConfirmer: "Lancer maintenant",
|
||||
});
|
||||
if (!ok) return;
|
||||
}
|
||||
void action("start", !dansLaFenetre);
|
||||
};
|
||||
|
||||
const basculer = async (codes: string[], champ: "actifSql" | "actifQlik", valeur: boolean) => {
|
||||
setErreur(null);
|
||||
if (codes.length === 0) return;
|
||||
// Mise à jour optimiste : la liste peut compter des centaines de lignes,
|
||||
// un rechargement complet à chaque case cochée serait pénible.
|
||||
setRows((prev) => prev.map((r) => (codes.includes(r.codeFournisseur)
|
||||
@@ -152,7 +240,7 @@ export function SynchronisationClient() {
|
||||
});
|
||||
if (!res.ok) throw new Error((await res.json()).error ?? `Erreur ${res.status}`);
|
||||
} catch (e) {
|
||||
setErreur(e instanceof Error ? e.message : String(e));
|
||||
toast.erreur(`La modification n'a pas pu être enregistrée : ${e instanceof Error ? e.message : String(e)}`);
|
||||
rafraichirTout(); // l'optimisme était infondé : on resynchronise
|
||||
}
|
||||
};
|
||||
@@ -161,254 +249,385 @@ export function SynchronisationClient() {
|
||||
const q = recherche.trim().toLowerCase();
|
||||
return rows.filter((r) => {
|
||||
if (q && !`${r.codeFournisseur} ${r.nomFournisseur ?? ""}`.toLowerCase().includes(q)) return false;
|
||||
if (filtre === "actifs") return r.actifSql || r.actifQlik;
|
||||
if (filtre === "inactifs") return !r.actifSql && !r.actifQlik;
|
||||
if (filtre === "echecs") return r.dernierSqlStatut === "echec" || r.dernierQlikStatut === "echec";
|
||||
return true;
|
||||
return correspond(r, filtre);
|
||||
});
|
||||
}, [rows, recherche, filtre]);
|
||||
|
||||
const codesVisibles = useMemo(() => visibles.map((r) => r.codeFournisseur), [visibles]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-6" style={{ background: "var(--bg-base)" }}>
|
||||
<div className="mx-auto max-w-screen-xl">
|
||||
<h1 className="text-2xl font-bold flex items-center gap-2" style={{ color: "var(--text-primary)" }}>
|
||||
<CalendarClock className="w-6 h-6" style={{ color: "var(--accent)" }} />
|
||||
Synchronisation nocturne
|
||||
</h1>
|
||||
<p className="text-[13px] mt-1 mb-5" style={{ color: "var(--text-muted)" }}>
|
||||
Les fournisseurs sont traités du plus anciennement synchronisé au plus récent. Si la fenêtre
|
||||
se referme avant la fin, la nuit suivante reprend là où on s'est arrêté ; quand tout le
|
||||
monde est passé, un nouveau tour recommence.
|
||||
</p>
|
||||
const basculerEnMasse = async (champ: "actifSql" | "actifQlik", valeur: boolean) => {
|
||||
const n = codesVisibles.length;
|
||||
if (n === 0) return;
|
||||
if (!valeur) {
|
||||
const quoi = champ === "actifSql" ? "des ventes (base FF)" : "des données du réseau (Qlik)";
|
||||
const ok = await confirmer({
|
||||
titre: `Désactiver la mise à jour ${quoi} ?`,
|
||||
message: `${fmtEntier(n)} fournisseur${n > 1 ? "s" : ""} de la liste affichée ne ser${n > 1 ? "ont" : "a"} plus mis à jour la nuit pour cette source. Vous pourrez les réactiver à tout moment.`,
|
||||
libelleConfirmer: "Désactiver",
|
||||
danger: true,
|
||||
});
|
||||
if (!ok) return;
|
||||
}
|
||||
void basculer(codesVisibles, champ, valeur);
|
||||
};
|
||||
|
||||
{erreur && (
|
||||
<div className="rounded-xl p-3.5 mb-4 flex items-start gap-2.5 text-[13px]"
|
||||
style={{ background: "var(--accent-error-bg)", border: "1px solid var(--accent-error)", color: "var(--accent-error)" }}>
|
||||
<AlertTriangle className="w-4 h-4 shrink-0 mt-px" />
|
||||
<span>{erreur}</span>
|
||||
</div>
|
||||
)}
|
||||
const filtres: readonly TabItem<Filtre>[] = useMemo(() => [
|
||||
{ value: "tous", label: "Tous", count: rows.length },
|
||||
{ value: "actifs", label: "Actifs", count: rows.filter((r) => correspond(r, "actifs")).length },
|
||||
{ value: "inactifs", label: "Inactifs", count: rows.filter((r) => correspond(r, "inactifs")).length },
|
||||
{ value: "echecs", label: "En échec", count: rows.filter((r) => correspond(r, "echecs")).length },
|
||||
], [rows]);
|
||||
|
||||
{/* ── Réglages ── */}
|
||||
{settings && (
|
||||
<div className="rounded-2xl p-4 mb-4" style={{ background: "var(--bg-surface)", border: "1px solid var(--border)" }}>
|
||||
<div className="flex flex-wrap items-end gap-4">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" checked={settings.actif}
|
||||
onChange={(e) => majSettings({ actif: e.target.checked })} className="w-4 h-4" />
|
||||
<span className="text-[13px] font-semibold" style={{ color: "var(--text-primary)" }}>
|
||||
Synchronisation nocturne active
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div className="flex items-end gap-2">
|
||||
<div>
|
||||
<label className="block text-[11px] mb-1" style={{ color: "var(--text-muted)" }}>De</label>
|
||||
<input type="number" min={0} max={23} value={settings.heureDebut}
|
||||
onChange={(e) => majSettings({ 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)" }} />
|
||||
</div>
|
||||
<span className="pb-2 text-[13px]" style={{ color: "var(--text-muted)" }}>h à</span>
|
||||
<div>
|
||||
<label className="block text-[11px] mb-1" style={{ color: "var(--text-muted)" }}>À</label>
|
||||
<input type="number" min={0} max={23} value={settings.heureFin}
|
||||
onChange={(e) => majSettings({ 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)" }} />
|
||||
</div>
|
||||
<span className="pb-2 text-[13px]" style={{ color: "var(--text-muted)" }}>h</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[11px] mb-1" style={{ color: "var(--text-muted)" }}>Qlik / nuit</label>
|
||||
<input type="number" min={0} max={200} value={settings.qlikParNuit}
|
||||
onChange={(e) => majSettings({ 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)" }} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[11px] mb-1" style={{ color: "var(--text-muted)" }}>Qlik si + vieux que</label>
|
||||
<input type="number" min={0} max={365} value={settings.qlikMinJours}
|
||||
onChange={(e) => majSettings({ 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)" }} />
|
||||
</div>
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
{state?.enCours ? (
|
||||
<button onClick={() => action("stop")} className="rounded-xl px-4 py-2 text-[13px] font-semibold flex items-center gap-2"
|
||||
style={{ background: "var(--accent-error-bg)", color: "var(--accent-error)", border: "1px solid var(--accent-error)" }}>
|
||||
<Square className="w-3.5 h-3.5" /> Arrêter
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={() => action("start", !dansLaFenetre)} className="rounded-xl px-4 py-2 text-[13px] font-semibold text-white flex items-center gap-2"
|
||||
style={{ background: "var(--accent)" }}>
|
||||
<Play className="w-3.5 h-3.5" /> Lancer maintenant
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-[11px] mt-3" style={{ color: "var(--text-muted)" }}>
|
||||
{dansLaFenetre
|
||||
? "Nous sommes actuellement dans la fenêtre."
|
||||
: "Hors fenêtre — « Lancer maintenant » forcera un round immédiat."}
|
||||
{" "}Une extraction Qlik peut durer 8 minutes : le plafond par nuit évite qu'elle
|
||||
monopolise la fenêtre. Un fournisseur déjà démarré n'est jamais interrompu à l'heure de fin.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Round en cours ── */}
|
||||
{state && (state.enCours || state.finAt) && (
|
||||
<div className="rounded-2xl p-4 mb-4 text-[13px]"
|
||||
style={{ background: state.enCours ? "var(--accent-bg)" : "var(--bg-surface)", border: `1px solid ${state.enCours ? "var(--accent-border)" : "var(--border)"}` }}>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{state.enCours
|
||||
? <Loader2 className="w-4 h-4 animate-spin" style={{ color: "var(--accent)" }} />
|
||||
: <CheckCircle className="w-4 h-4 text-emerald-500" />}
|
||||
<span className="font-semibold" style={{ color: "var(--text-primary)" }}>
|
||||
{state.enCours ? `Round ${state.origine} en cours` : "Dernier round terminé"}
|
||||
</span>
|
||||
{state.enCours && state.fournisseurCourant && (
|
||||
<span style={{ color: "var(--text-secondary)" }}>
|
||||
— {state.etape === "qlik" ? "Qlik" : "SQL"} : {state.fournisseurCourant}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-2 flex flex-wrap gap-x-5 gap-y-1 text-[12px]" style={{ color: "var(--text-secondary)" }}>
|
||||
<span><Database className="w-3 h-3 inline mr-1" />SQL : {state.sqlFaits} ok{state.sqlEchecs > 0 && `, ${state.sqlEchecs} en échec`}</span>
|
||||
<span><Network className="w-3 h-3 inline mr-1" />Qlik : {state.qlikFaits} ok{state.qlikEchecs > 0 && `, ${state.qlikEchecs} en échec`}</span>
|
||||
{state.debutAt && <span>Début {fmtDate(state.debutAt)}</span>}
|
||||
{state.tourTermine && <span className="text-emerald-500 font-semibold">Tour bouclé — tout le monde est à jour</span>}
|
||||
</div>
|
||||
{state.derniereErreur && (
|
||||
<p className="mt-2 text-[11px] text-red-400">Dernière erreur : {state.derniereErreur}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Résumé ── */}
|
||||
{resume && (
|
||||
<div className="flex flex-wrap gap-2 mb-3 text-[12px]">
|
||||
{[
|
||||
{ l: "Fournisseurs", v: resume.total },
|
||||
{ l: "Actifs SQL", v: resume.actifsSql },
|
||||
{ l: "Actifs Qlik", v: resume.actifsQlik },
|
||||
{ l: "Jamais synchronisés", v: resume.jamaisSql },
|
||||
{ l: "Désactivés auto", v: resume.desactivesAuto },
|
||||
{ l: "En échec", v: resume.enEchecSql + resume.enEchecQlik },
|
||||
].map((s) => (
|
||||
<span key={s.l} className="rounded-lg px-2.5 py-1"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}>
|
||||
{s.l} <strong style={{ color: "var(--text-primary)" }}>{s.v}</strong>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Filtres et actions de masse ── */}
|
||||
<div className="flex flex-wrap items-center gap-2 mb-3">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5" style={{ color: "var(--text-muted)" }} />
|
||||
<input value={recherche} onChange={(e) => setRecherche(e.target.value)} placeholder="Code ou nom"
|
||||
className="rounded-lg pl-8 pr-3 py-1.5 text-[12px] w-56"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }} />
|
||||
</div>
|
||||
{(["tous", "actifs", "inactifs", "echecs"] as const).map((f) => (
|
||||
<button key={f} onClick={() => setFiltre(f)}
|
||||
className="rounded-full px-3 py-1 text-[12px] font-semibold"
|
||||
style={{
|
||||
background: filtre === f ? "var(--accent)" : "var(--bg-elevated)",
|
||||
color: filtre === f ? "#fff" : "var(--text-secondary)",
|
||||
border: "1px solid var(--border)",
|
||||
}}>
|
||||
{f === "echecs" ? "en échec" : f}
|
||||
</button>
|
||||
))}
|
||||
<div className="flex-1" />
|
||||
<span className="text-[11px]" style={{ color: "var(--text-muted)" }}>{visibles.length} affichés :</span>
|
||||
<button onClick={() => basculer(codesVisibles, "actifSql", true)} className="rounded-lg px-2.5 py-1 text-[11px]"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}>
|
||||
Activer SQL
|
||||
</button>
|
||||
<button onClick={() => basculer(codesVisibles, "actifSql", false)} className="rounded-lg px-2.5 py-1 text-[11px]"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}>
|
||||
Désactiver SQL
|
||||
</button>
|
||||
<button onClick={() => basculer(codesVisibles, "actifQlik", false)} className="rounded-lg px-2.5 py-1 text-[11px]"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}>
|
||||
Désactiver Qlik
|
||||
</button>
|
||||
<button onClick={() => action("seed")} title="Récupérer les nouveaux fournisseurs du référentiel"
|
||||
className="rounded-lg px-2.5 py-1 text-[11px] flex items-center gap-1"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}>
|
||||
<RefreshCw className="w-3 h-3" /> Actualiser la liste
|
||||
</button>
|
||||
const colonnes: DataColumn<FournisseurRow>[] = [
|
||||
{
|
||||
id: "fournisseur",
|
||||
header: "Fournisseur",
|
||||
sortValue: (r) => r.nomFournisseur ?? r.codeFournisseur,
|
||||
cell: (r) => (
|
||||
<div className="min-w-[180px]">
|
||||
<div className="font-medium text-[var(--text-primary)]">{r.nomFournisseur ?? r.codeFournisseur}</div>
|
||||
<div className="text-xs text-[var(--text-muted)]">{r.codeFournisseur}</div>
|
||||
</div>
|
||||
|
||||
{/* ── Tableau ── */}
|
||||
<div className="rounded-2xl overflow-hidden" style={{ background: "var(--bg-surface)", border: "1px solid var(--border)" }}>
|
||||
{chargement ? (
|
||||
<div className="p-6 text-center text-[13px]" style={{ color: "var(--text-muted)" }}>
|
||||
<Loader2 className="w-4 h-4 animate-spin inline mr-2" /> Chargement…
|
||||
</div>
|
||||
) : visibles.length === 0 ? (
|
||||
<div className="p-6 text-center text-[13px]" style={{ color: "var(--text-muted)" }}>
|
||||
Aucun fournisseur. Utilisez « Actualiser la liste » pour importer le référentiel.
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-[12px] border-collapse">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bg-elevated)" }}>
|
||||
{["Fournisseur", "SQL", "Dernier SQL", "Qlik", "Dernier Qlik", ""].map((h) => (
|
||||
<th key={h} className="px-3 py-2.5 text-left font-semibold whitespace-nowrap"
|
||||
style={{ color: "var(--text-secondary)", borderBottom: "1px solid var(--border)" }}>{h}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{visibles.map((r) => (
|
||||
<tr key={r.codeFournisseur} style={{ borderBottom: "1px solid var(--border)" }}>
|
||||
<td className="px-3 py-2">
|
||||
<div className="font-medium" style={{ color: "var(--text-primary)" }}>
|
||||
{r.nomFournisseur ?? r.codeFournisseur}
|
||||
</div>
|
||||
<div className="text-[10px]" style={{ color: "var(--text-muted)" }}>{r.codeFournisseur}</div>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<input type="checkbox" checked={r.actifSql} className="w-4 h-4"
|
||||
onChange={(e) => basculer([r.codeFournisseur], "actifSql", e.target.checked)} />
|
||||
</td>
|
||||
<td className="px-3 py-2 whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
|
||||
<Pastille statut={r.dernierSqlStatut} />{" "}
|
||||
{fmtDate(r.dernierSqlAt)}
|
||||
{r.dernierSqlLignes != null && <span style={{ color: "var(--text-muted)" }}> · {r.dernierSqlLignes.toLocaleString("fr-FR")} lignes {fmtDuree(r.dernierSqlMs)}</span>}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<input type="checkbox" checked={r.actifQlik} className="w-4 h-4"
|
||||
onChange={(e) => basculer([r.codeFournisseur], "actifQlik", e.target.checked)} />
|
||||
</td>
|
||||
<td className="px-3 py-2 whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
|
||||
<Pastille statut={r.dernierQlikStatut} />{" "}
|
||||
{fmtDate(r.dernierQlikAt)}
|
||||
{r.dernierQlikCodes != null && <span style={{ color: "var(--text-muted)" }}> · {r.dernierQlikCodes.toLocaleString("fr-FR")} codes</span>}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-[11px]" style={{ color: "var(--text-muted)" }}>
|
||||
{r.desactiveMotif}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "actifSql",
|
||||
header: VENTES,
|
||||
hint: "Cochez pour mettre à jour chaque nuit les ventes de ce fournisseur dans nos magasins.",
|
||||
align: "center",
|
||||
sortValue: (r) => (r.actifSql ? 1 : 0),
|
||||
cell: (r) => (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={r.actifSql}
|
||||
className={CASE}
|
||||
aria-label={`Mettre à jour les ventes de ${r.nomFournisseur ?? r.codeFournisseur}`}
|
||||
onChange={(e) => basculer([r.codeFournisseur], "actifSql", e.target.checked)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "dernierSql",
|
||||
header: "Dernière mise à jour des ventes",
|
||||
sortValue: (r) => r.dernierSqlAt,
|
||||
cell: (r) => (
|
||||
<div className="whitespace-nowrap">
|
||||
<div className="flex items-center gap-2 text-[var(--text-secondary)]">
|
||||
<StatutBadge statut={r.dernierSqlStatut} />
|
||||
{fmtDate(r.dernierSqlAt)}
|
||||
</div>
|
||||
{r.dernierSqlLignes != null && (
|
||||
<div className="text-xs text-[var(--text-muted)]">
|
||||
{fmtEntier(r.dernierSqlLignes)} lignes{r.dernierSqlMs != null && <> en {fmtDuree(r.dernierSqlMs)}</>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "actifQlik",
|
||||
header: RESEAU,
|
||||
hint: "Cochez pour mettre à jour les ventes de ce fournisseur dans les magasins du réseau. Ces extractions sont longues : leur nombre par nuit est plafonné.",
|
||||
align: "center",
|
||||
sortValue: (r) => (r.actifQlik ? 1 : 0),
|
||||
cell: (r) => (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={r.actifQlik}
|
||||
className={CASE}
|
||||
aria-label={`Mettre à jour les données réseau de ${r.nomFournisseur ?? r.codeFournisseur}`}
|
||||
onChange={(e) => basculer([r.codeFournisseur], "actifQlik", e.target.checked)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "dernierQlik",
|
||||
header: "Dernière mise à jour réseau",
|
||||
sortValue: (r) => r.dernierQlikAt,
|
||||
cell: (r) => (
|
||||
<div className="whitespace-nowrap">
|
||||
<div className="flex items-center gap-2 text-[var(--text-secondary)]">
|
||||
<StatutBadge statut={r.dernierQlikStatut} />
|
||||
{fmtDate(r.dernierQlikAt)}
|
||||
</div>
|
||||
{r.dernierQlikCodes != null && (
|
||||
<div className="text-xs text-[var(--text-muted)]">{fmtEntier(r.dernierQlikCodes)} produits</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "remarque",
|
||||
header: "Remarque",
|
||||
cell: (r) => (r.desactiveMotif
|
||||
? <span className="text-[13px] text-[var(--text-secondary)]">{r.desactiveMotif}</span>
|
||||
: null),
|
||||
},
|
||||
];
|
||||
|
||||
if (chargement) {
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-screen-xl">
|
||||
<PageHeader icon={CalendarClock} title="Synchronisation" description={DESCRIPTION} />
|
||||
<div className="space-y-4" aria-busy="true" aria-label="Chargement">
|
||||
<Skeleton className="h-40 w-full rounded-xl" />
|
||||
<Skeleton className="h-28 w-full rounded-xl" />
|
||||
<Skeleton className="h-96 w-full rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!settings && erreur) {
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-screen-xl">
|
||||
<PageHeader icon={CalendarClock} title="Synchronisation" description={DESCRIPTION} />
|
||||
<ErrorState
|
||||
title="Les réglages de la synchronisation n'ont pas pu être chargés"
|
||||
detail={erreur}
|
||||
action={<Button variant="outline" onClick={reessayer}>Réessayer</Button>}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-screen-xl space-y-6">
|
||||
<PageHeader
|
||||
icon={CalendarClock}
|
||||
title="Synchronisation"
|
||||
description={DESCRIPTION}
|
||||
actions={state?.enCours ? (
|
||||
<Button variant="outline" onClick={() => action("stop")} disabled={actionEnCours === "stop"}
|
||||
className="border-[var(--accent-error)] text-[var(--accent-error)] hover:bg-[var(--accent-error-bg)] hover:text-[var(--accent-error)]">
|
||||
{actionEnCours === "stop" ? <Loader2 className="animate-spin" /> : <Square />}
|
||||
Arrêter
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={lancer} disabled={actionEnCours === "start" || !settings}>
|
||||
{actionEnCours === "start" ? <Loader2 className="animate-spin" /> : <Play />}
|
||||
Lancer maintenant
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
|
||||
{erreur && (
|
||||
<div role="alert" className="flex flex-wrap items-center gap-3 rounded-xl border border-[var(--accent-error)]/40 bg-[var(--accent-error-bg)] px-4 py-3 text-sm">
|
||||
<AlertTriangle className="h-4 w-4 shrink-0 text-[var(--accent-error)]" aria-hidden />
|
||||
<span className="flex-1 text-[var(--text-primary)]">
|
||||
Les informations n'ont pas pu être actualisées : <span className="text-[var(--text-secondary)]">{erreur}</span>
|
||||
</span>
|
||||
<Button variant="outline" size="sm" onClick={rafraichirTout}>Réessayer</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Réglages ── */}
|
||||
{settings && (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="Réglages"
|
||||
description="Chaque nuit, dans la plage horaire choisie, les fournisseurs sont mis à jour un par un, en commençant par ceux dont les données sont les plus anciennes. Si la nuit ne suffit pas, la suivante reprend là où la précédente s'est arrêtée."
|
||||
/>
|
||||
<CardContent className="space-y-5">
|
||||
<label htmlFor="sync-actif" className="inline-flex cursor-pointer items-center gap-2.5">
|
||||
<input id="sync-actif" type="checkbox" checked={settings.actif}
|
||||
onChange={(e) => majSettings({ actif: e.target.checked })} className={CASE} />
|
||||
<span className="text-sm font-semibold text-[var(--text-primary)]">
|
||||
Synchronisation nocturne activée
|
||||
</span>
|
||||
<Badge ton={settings.actif ? "succes" : "neutre"}>{settings.actif ? "Activée" : "Désactivée"}</Badge>
|
||||
</label>
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-3">
|
||||
<div>
|
||||
<Label htmlFor="sync-debut">Plage horaire</Label>
|
||||
<div className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
|
||||
<span>de</span>
|
||||
<Input id="sync-debut" type="number" min={0} max={23} value={settings.heureDebut}
|
||||
aria-label="Heure de début"
|
||||
onChange={(e) => majSettingsDifferee({ heureDebut: Number(e.target.value) })}
|
||||
className="w-16 text-center tabular-nums" />
|
||||
<span>h à</span>
|
||||
<Input id="sync-fin" type="number" min={0} max={23} value={settings.heureFin}
|
||||
aria-label="Heure de fin"
|
||||
onChange={(e) => majSettingsDifferee({ heureFin: Number(e.target.value) })}
|
||||
className="w-16 text-center tabular-nums" />
|
||||
<span>h</span>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-[var(--text-muted)]">
|
||||
Aucun fournisseur n'est commencé après l'heure de fin ; celui en cours va jusqu'au bout.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="sync-qlik-nuit">Extractions réseau par nuit</Label>
|
||||
<Input id="sync-qlik-nuit" type="number" min={0} max={200} value={settings.qlikParNuit}
|
||||
onChange={(e) => majSettingsDifferee({ qlikParNuit: Number(e.target.value) })}
|
||||
className="w-20 text-center tabular-nums" />
|
||||
<p className="mt-1 text-xs text-[var(--text-muted)]">
|
||||
Une extraction des données du réseau (Qlik) peut durer 8 minutes : ce plafond évite qu'elles occupent toute la nuit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="sync-qlik-jours">Fraîcheur des données réseau</Label>
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm text-[var(--text-secondary)]">
|
||||
<span>Actualiser les données réseau de plus de</span>
|
||||
<Input id="sync-qlik-jours" type="number" min={0} max={365} value={settings.qlikMinJours}
|
||||
onChange={(e) => majSettingsDifferee({ qlikMinJours: Number(e.target.value) })}
|
||||
className="w-20 text-center tabular-nums" />
|
||||
<span>jours</span>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-[var(--text-muted)]">
|
||||
Ce sont des chiffres mensuels : les refaire chaque nuit coûterait du temps pour rien.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-[var(--text-muted)]">Les modifications sont enregistrées automatiquement.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* ── Lancement en cours ou dernier lancement ── */}
|
||||
{state && (
|
||||
<Card className={state.enCours ? "border-[var(--accent-border)] bg-[var(--accent-bg)]" : undefined}>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{state.enCours
|
||||
? <Loader2 className="h-5 w-5 animate-spin text-[var(--accent)]" aria-hidden />
|
||||
: state.finAt
|
||||
? <CheckCircle2 className="h-5 w-5 text-[var(--accent-success)]" aria-hidden />
|
||||
: <Clock className="h-5 w-5 text-[var(--text-muted)]" aria-hidden />}
|
||||
<span className="text-base font-semibold text-[var(--text-primary)]">
|
||||
{state.enCours
|
||||
? `Lancement${libelleOrigine(state.origine)} en cours`
|
||||
: state.finAt
|
||||
? `Dernier lancement${libelleOrigine(state.origine)} terminé`
|
||||
: "Aucun lancement depuis le démarrage du serveur"}
|
||||
</span>
|
||||
{state.enCours && state.fournisseurCourant && (
|
||||
<span className="text-sm text-[var(--text-secondary)]">
|
||||
: {state.etape === "qlik" ? RESEAU : VENTES}, {state.fournisseurCourant}
|
||||
</span>
|
||||
)}
|
||||
{state.tourTermine && (
|
||||
<Badge ton="succes">Tous les fournisseurs ont été traités</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(state.enCours || state.finAt) && (
|
||||
<div className="flex flex-wrap gap-x-6 gap-y-1 text-[13px] text-[var(--text-secondary)]">
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<Database className="h-4 w-4 text-[var(--text-muted)]" aria-hidden />
|
||||
{VENTES} : {fmtEntier(state.sqlFaits)} à jour
|
||||
{state.sqlEchecs > 0 && <span className="text-[var(--accent-error)]">, {fmtEntier(state.sqlEchecs)} en échec</span>}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<Network className="h-4 w-4 text-[var(--text-muted)]" aria-hidden />
|
||||
{RESEAU} : {fmtEntier(state.qlikFaits)} à jour
|
||||
{state.qlikEchecs > 0 && <span className="text-[var(--accent-error)]">, {fmtEntier(state.qlikEchecs)} en échec</span>}
|
||||
</span>
|
||||
{state.debutAt && <span>Commencé le {fmtDate(state.debutAt)}</span>}
|
||||
{!state.enCours && state.finAt && <span>Terminé le {fmtDate(state.finAt)}</span>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state.derniereErreur && (
|
||||
<p className="text-[13px] text-[var(--accent-error)]">Dernière erreur : {state.derniereErreur}</p>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-[var(--text-muted)]">
|
||||
{dansLaFenetre
|
||||
? "Nous sommes actuellement dans la plage horaire nocturne."
|
||||
: "Hors de la plage horaire : « Lancer maintenant » démarre quand même une mise à jour immédiate."}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* ── Résumé ── */}
|
||||
{resume && (
|
||||
<div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-6">
|
||||
<StatCard label="Fournisseurs" value={fmtEntier(resume.total)} />
|
||||
<StatCard label={`${VENTES} activées`} value={fmtEntier(resume.actifsSql)} />
|
||||
<StatCard label={`${RESEAU} activé`} value={fmtEntier(resume.actifsQlik)} />
|
||||
<StatCard label="Ventes jamais mises à jour" value={fmtEntier(resume.jamaisSql)} />
|
||||
<StatCard
|
||||
label={
|
||||
<Tooltip content="Fournisseurs sans aucun article dans la base FF : ils ont été retirés de la mise à jour nocturne. Cochez-les à nouveau pour les réintégrer.">
|
||||
<span tabIndex={0} className="cursor-help underline decoration-dotted underline-offset-2">Retirés automatiquement</span>
|
||||
</Tooltip>
|
||||
}
|
||||
value={fmtEntier(resume.desactivesAuto)}
|
||||
hint="aucun article dans la base FF"
|
||||
/>
|
||||
<StatCard
|
||||
label="En échec"
|
||||
value={fmtEntier(resume.enEchecSql + resume.enEchecQlik)}
|
||||
hint={`${fmtEntier(resume.enEchecSql)} ventes, ${fmtEntier(resume.enEchecQlik)} réseau`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Fournisseurs ── */}
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="Fournisseurs"
|
||||
description="Cochez, pour chaque fournisseur, les données à mettre à jour chaque nuit."
|
||||
actions={
|
||||
<Button variant="outline" size="sm" onClick={() => action("seed")} disabled={actionEnCours === "seed"}
|
||||
title="Ajoute les nouveaux fournisseurs du référentiel FF et met à jour leurs noms">
|
||||
{actionEnCours === "seed" ? <Loader2 className="animate-spin" /> : <RefreshCw />}
|
||||
Actualiser la liste des fournisseurs
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex flex-wrap items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)] px-3 py-2">
|
||||
<span className="text-[13px] text-[var(--text-secondary)]">
|
||||
Pour les <strong className="text-[var(--text-primary)]">{fmtEntier(visibles.length)}</strong> fournisseur{visibles.length > 1 ? "s" : ""} de la liste ci-dessous :
|
||||
</span>
|
||||
<Button variant="outline" size="sm" disabled={visibles.length === 0}
|
||||
onClick={() => basculerEnMasse("actifSql", true)}>
|
||||
Activer les ventes
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" disabled={visibles.length === 0}
|
||||
onClick={() => basculerEnMasse("actifSql", false)}>
|
||||
Désactiver les ventes
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" disabled={visibles.length === 0}
|
||||
onClick={() => basculerEnMasse("actifQlik", false)}>
|
||||
Désactiver le réseau
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
rows={visibles}
|
||||
columns={colonnes}
|
||||
rowKey={(r) => r.codeFournisseur}
|
||||
pageSize={0}
|
||||
unite="fournisseurs"
|
||||
toolbar={
|
||||
<>
|
||||
<Segmented items={filtres} value={filtre} onChange={setFiltre} />
|
||||
<SearchInput
|
||||
value={recherche}
|
||||
onChange={setRecherche}
|
||||
placeholder="Code ou nom du fournisseur"
|
||||
aria-label="Rechercher un fournisseur"
|
||||
/>
|
||||
</>
|
||||
}
|
||||
emptyTitle={rows.length === 0 ? "Aucun fournisseur" : "Aucun fournisseur ne correspond"}
|
||||
emptyDescription={rows.length === 0
|
||||
? "Utilisez « Actualiser la liste des fournisseurs » pour importer le référentiel FF."
|
||||
: "Modifiez la recherche ou choisissez « Tous »."}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const DESCRIPTION =
|
||||
"Mise à jour nocturne des données des fournisseurs : leurs ventes dans nos magasins (base FF) et dans le réseau (Qlik).";
|
||||
@@ -1,8 +1,7 @@
|
||||
import type { Metadata } from "next";
|
||||
import { SynchronisationClient } from "./client";
|
||||
|
||||
export const metadata = {
|
||||
title: "Synchronisation nocturne — CollectFlow",
|
||||
};
|
||||
export const metadata: Metadata = { title: "Synchronisation" };
|
||||
|
||||
/**
|
||||
* Paramétrage de la synchronisation nocturne des fournisseurs.
|
||||
|
||||
@@ -1,55 +1,95 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useMemo, useTransition, type ReactNode } from "react";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { DataTable, type DataColumn } from "@/components/ui/data-table";
|
||||
import { Segmented, type TabItem } from "@/components/ui/tabs";
|
||||
import { Select } from "@/components/ui/form-controls";
|
||||
import { DeltaBadge } from "@/components/ui/badge";
|
||||
import { Terme } from "@/components/ui/tooltip";
|
||||
import { MAGASINS, nomMagasin } from "@/lib/magasins";
|
||||
import { fmtEur0 } from "@/lib/format";
|
||||
import { telechargerExcel } from "@/lib/export-excel";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type ModeAnalytics = "fournisseur" | "nomenclature";
|
||||
|
||||
export interface OptionMois {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface AnalyticsRow {
|
||||
key: string;
|
||||
label: string;
|
||||
ca292: number;
|
||||
caN1_292: number;
|
||||
ca579: number;
|
||||
caN1_579: number;
|
||||
caTotal: number;
|
||||
caN1Total: number;
|
||||
evolutionTotal: number | null;
|
||||
}
|
||||
|
||||
interface AnalyticsClientProps {
|
||||
mode: string;
|
||||
mode: ModeAnalytics;
|
||||
/** Mois affiché, « AAAA-MM ». */
|
||||
mois: string;
|
||||
moisN1: string;
|
||||
currentMois: string;
|
||||
pivotted: Array<{
|
||||
key: string;
|
||||
label: string;
|
||||
ca292: number;
|
||||
caN1_292: number;
|
||||
ca579: number;
|
||||
caN1_579: number;
|
||||
caTotal: number;
|
||||
caN1Total: number;
|
||||
evolutionTotal: number | null;
|
||||
}>;
|
||||
totals: {
|
||||
ca292: number;
|
||||
caN1_292: number;
|
||||
ca579: number;
|
||||
caN1_579: number;
|
||||
caTotal: number;
|
||||
caN1Total: number;
|
||||
};
|
||||
evolutionTotal292: number | null;
|
||||
evolutionTotal579: number | null;
|
||||
evolutionTotalReseau: number | null;
|
||||
/** Mois en clair : « octobre 2026 ». */
|
||||
libelleMois: string;
|
||||
libelleMoisN1: string;
|
||||
moisDisponibles: OptionMois[];
|
||||
pivotted: AnalyticsRow[];
|
||||
}
|
||||
|
||||
function formatCA(value: number): string {
|
||||
return new Intl.NumberFormat("fr-FR", {
|
||||
style: "currency",
|
||||
currency: "EUR",
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
/** Champs numériques de la ligne pivotée. */
|
||||
type Champ = { [K in keyof AnalyticsRow]: AnalyticsRow[K] extends number ? K : never }[keyof AnalyticsRow];
|
||||
|
||||
interface Groupe {
|
||||
id: string;
|
||||
titre: string;
|
||||
ca: Champ;
|
||||
caN1: Champ;
|
||||
}
|
||||
|
||||
function EvolutionBadge({ value }: { value: number | null }) {
|
||||
if (value === null) return <span className="text-gray-400">N/A</span>;
|
||||
/** Champs de la ligne pivotée pour chaque magasin (la requête en fournit un jeu par magasin). */
|
||||
const CHAMPS_MAGASIN: Record<string, Pick<Groupe, "ca" | "caN1">> = {
|
||||
"292": { ca: "ca292", caN1: "caN1_292" },
|
||||
"579": { ca: "ca579", caN1: "caN1_579" },
|
||||
};
|
||||
|
||||
const isPositive = value >= 0;
|
||||
const bgColor = isPositive ? "bg-green-100" : "bg-red-100";
|
||||
const textColor = isPositive ? "text-green-700" : "text-red-700";
|
||||
const GROUPES: Groupe[] = [
|
||||
...MAGASINS.filter((m) => CHAMPS_MAGASIN[m.code]).map((m) => ({
|
||||
id: m.code,
|
||||
titre: nomMagasin(m.code),
|
||||
...CHAMPS_MAGASIN[m.code],
|
||||
})),
|
||||
{ id: "total", titre: "Total nos magasins", ca: "caTotal", caN1: "caN1Total" },
|
||||
];
|
||||
|
||||
const MODES: TabItem<ModeAnalytics>[] = [
|
||||
{ value: "fournisseur", label: "Fournisseur" },
|
||||
{ value: "nomenclature", label: "Famille" },
|
||||
];
|
||||
|
||||
const somme = (rows: readonly AnalyticsRow[], champ: Champ) => rows.reduce((acc, r) => acc + r[champ], 0);
|
||||
|
||||
/** Évolution en % par rapport à N-1 ; `null` sans chiffre d'affaires N-1. */
|
||||
const evolution = (ca: number, caN1: number) => (caN1 > 0 ? ((ca - caN1) / caN1) * 100 : null);
|
||||
|
||||
const recherche = (r: AnalyticsRow) => [r.label, r.key];
|
||||
|
||||
function Montant({ v }: { v: number }) {
|
||||
return <span className={cn("whitespace-nowrap", v === 0 && "text-[var(--text-muted)]")}>{fmtEur0(v)}</span>;
|
||||
}
|
||||
|
||||
/** En-tête sur deux lignes : magasin au-dessus, mesure en dessous. */
|
||||
function EnTete({ groupe, children }: { groupe: string; children: ReactNode }) {
|
||||
return (
|
||||
<span className={`${bgColor} ${textColor} inline-block rounded px-2 py-1 text-sm font-semibold`}>
|
||||
{isPositive ? "+" : ""}
|
||||
{value.toFixed(1)}%
|
||||
<span className="flex flex-col items-end leading-tight">
|
||||
<span className="text-xs font-normal text-[var(--text-muted)]">{groupe}</span>
|
||||
<span className="inline-flex items-center gap-1">{children}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -57,193 +97,159 @@ function EvolutionBadge({ value }: { value: number | null }) {
|
||||
export function AnalyticsClient({
|
||||
mode,
|
||||
mois,
|
||||
moisN1,
|
||||
currentMois,
|
||||
libelleMois,
|
||||
libelleMoisN1,
|
||||
moisDisponibles,
|
||||
pivotted,
|
||||
totals,
|
||||
evolutionTotal292,
|
||||
evolutionTotal579,
|
||||
evolutionTotalReseau,
|
||||
}: AnalyticsClientProps) {
|
||||
const router = useRouter();
|
||||
const [navigation, demarrerNavigation] = useTransition();
|
||||
|
||||
const handleModeChange = (newMode: string) => {
|
||||
router.push(`/analytics?mode=${newMode}&mois=${mois}`);
|
||||
demarrerNavigation(() => {
|
||||
router.push(`/analytics?mode=${newMode}&mois=${mois}`);
|
||||
});
|
||||
};
|
||||
|
||||
const handleMonthChange = (newMois: string) => {
|
||||
router.push(`/analytics?mode=${mode}&mois=${newMois}`);
|
||||
demarrerNavigation(() => {
|
||||
router.push(`/analytics?mode=${mode}&mois=${newMois}`);
|
||||
});
|
||||
};
|
||||
|
||||
// Générer liste des 24 derniers mois
|
||||
const months: { value: string; label: string }[] = [];
|
||||
const now = new Date();
|
||||
for (let i = 0; i < 24; i++) {
|
||||
const d = new Date(now.getFullYear(), now.getMonth() - i);
|
||||
const value = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
|
||||
const label = new Intl.DateTimeFormat("fr-FR", { year: "numeric", month: "long" }).format(d);
|
||||
months.push({ value, label: label.charAt(0).toUpperCase() + label.slice(1) });
|
||||
const libelleColonne = mode === "fournisseur" ? "Fournisseur" : "Famille";
|
||||
|
||||
const colonnes = useMemo<DataColumn<AnalyticsRow>[]>(() => [
|
||||
{
|
||||
id: "label",
|
||||
header: libelleColonne,
|
||||
sortValue: (r) => r.label,
|
||||
cell: (r) => <span className="font-medium">{r.label}</span>,
|
||||
footer: () => "Total",
|
||||
className: "min-w-[220px]",
|
||||
},
|
||||
...GROUPES.flatMap((g): DataColumn<AnalyticsRow>[] => {
|
||||
const total = g.id === "total";
|
||||
const bord = "border-l border-[var(--border)]";
|
||||
return [
|
||||
{
|
||||
id: `${g.id}-ca`,
|
||||
header: <EnTete groupe={g.titre}>{libelleMois}</EnTete>,
|
||||
hint: `Chiffre d'affaires TTC (${g.titre}) en ${libelleMois}, retours déduits`,
|
||||
align: "right",
|
||||
sortValue: (r) => r[g.ca],
|
||||
cell: (r) => <Montant v={r[g.ca]} />,
|
||||
footer: (rows) => <Montant v={somme(rows, g.ca)} />,
|
||||
className: cn(bord, total && "font-semibold"),
|
||||
headerClassName: bord,
|
||||
},
|
||||
{
|
||||
id: `${g.id}-n1`,
|
||||
header: (
|
||||
<EnTete groupe={g.titre}>
|
||||
{libelleMoisN1} · <Terme id="n1" />
|
||||
</EnTete>
|
||||
),
|
||||
hint: `Chiffre d'affaires TTC (${g.titre}) en ${libelleMoisN1}, même mois l'année précédente`,
|
||||
align: "right",
|
||||
sortValue: (r) => r[g.caN1],
|
||||
cell: (r) => <Montant v={r[g.caN1]} />,
|
||||
footer: (rows) => <Montant v={somme(rows, g.caN1)} />,
|
||||
className: cn(total && "font-semibold"),
|
||||
},
|
||||
{
|
||||
id: `${g.id}-evolution`,
|
||||
header: <EnTete groupe={g.titre}>Évolution</EnTete>,
|
||||
hint: `Évolution du chiffre d'affaires (${g.titre}) entre ${libelleMoisN1} et ${libelleMois}`,
|
||||
align: "right",
|
||||
sortValue: (r) => evolution(r[g.ca], r[g.caN1]),
|
||||
cell: (r) => <DeltaBadge pct={evolution(r[g.ca], r[g.caN1])} />,
|
||||
footer: (rows) => <DeltaBadge pct={evolution(somme(rows, g.ca), somme(rows, g.caN1))} />,
|
||||
},
|
||||
];
|
||||
}),
|
||||
], [libelleColonne, libelleMois, libelleMoisN1]);
|
||||
|
||||
async function exporter(rows: readonly AnalyticsRow[]) {
|
||||
const arrondi = (v: number) => Math.round(v * 100) / 100;
|
||||
const evol = (ca: number, caN1: number) => {
|
||||
const e = evolution(ca, caN1);
|
||||
return e === null ? null : Math.round(e * 10) / 10;
|
||||
};
|
||||
await telechargerExcel({
|
||||
feuille: "Ventes par mois",
|
||||
fichier: `ventes-par-mois_${mode === "fournisseur" ? "fournisseurs" : "familles"}_${mois}`,
|
||||
entetes: [
|
||||
libelleColonne,
|
||||
...GROUPES.flatMap((g) => [
|
||||
`${g.titre} — CA ${libelleMois}`,
|
||||
`${g.titre} — CA ${libelleMoisN1} (N-1)`,
|
||||
`${g.titre} — Évolution (%)`,
|
||||
]),
|
||||
],
|
||||
largeurs: [40, ...GROUPES.flatMap(() => [22, 22, 16])],
|
||||
lignes: rows.map((r) => [
|
||||
r.label,
|
||||
...GROUPES.flatMap((g) => [arrondi(r[g.ca]), arrondi(r[g.caN1]), evol(r[g.ca], r[g.caN1])]),
|
||||
]),
|
||||
totaux: [
|
||||
"Total",
|
||||
...GROUPES.flatMap((g) => {
|
||||
const ca = somme(rows, g.ca);
|
||||
const caN1 = somme(rows, g.caN1);
|
||||
return [arrondi(ca), arrondi(caN1), evol(ca, caN1)];
|
||||
}),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Controls */}
|
||||
<div className="flex items-center gap-6 rounded-lg bg-white p-4 shadow">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="font-semibold text-gray-700">Vue :</label>
|
||||
<select
|
||||
value={mode}
|
||||
onChange={(e) => handleModeChange(e.target.value)}
|
||||
className="rounded border border-gray-300 px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="fournisseur">Fournisseur</option>
|
||||
<option value="nomenclature">Nomenclature</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="font-semibold text-gray-700">Mois :</label>
|
||||
<select
|
||||
value={mois}
|
||||
onChange={(e) => handleMonthChange(e.target.value)}
|
||||
className="rounded border border-gray-300 px-3 py-2 text-sm"
|
||||
>
|
||||
{months.map((m) => (
|
||||
<option key={m.value} value={m.value}>
|
||||
{m.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-gray-600">
|
||||
Comparaison N-1 : {moisN1}
|
||||
<div className="space-y-4" aria-busy={navigation}>
|
||||
{/* Contrôles (relancent le calcul côté serveur) */}
|
||||
<div className="flex flex-wrap items-end gap-4">
|
||||
<div role="group" aria-labelledby="analytics-vue">
|
||||
<span id="analytics-vue" className="mb-1 block text-[13px] font-medium text-[var(--text-secondary)]">
|
||||
Afficher par
|
||||
</span>
|
||||
<Segmented items={MODES} value={mode} onChange={handleModeChange} disabled={navigation} />
|
||||
</div>
|
||||
<Select
|
||||
id="analytics-mois"
|
||||
label="Mois"
|
||||
value={mois}
|
||||
onChange={handleMonthChange}
|
||||
options={moisDisponibles}
|
||||
disabled={navigation}
|
||||
/>
|
||||
{navigation && (
|
||||
<span role="status" className="inline-flex h-9 items-center gap-2 text-[13px] text-[var(--text-secondary)]">
|
||||
<Loader2 className="h-4 w-4 animate-spin" aria-hidden />
|
||||
Chargement…
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="overflow-x-auto rounded-lg bg-white shadow">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b-2 border-gray-200 bg-gray-50">
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">
|
||||
{mode === "fournisseur" ? "Fournisseur" : "Nomenclature"}
|
||||
</th>
|
||||
<th colSpan={3} className="px-4 py-3 text-center text-sm font-semibold text-gray-700">
|
||||
Frouard/Nancy (292)
|
||||
</th>
|
||||
<th colSpan={3} className="px-4 py-3 text-center text-sm font-semibold text-gray-700">
|
||||
Houdemont (579)
|
||||
</th>
|
||||
<th colSpan={3} className="px-4 py-3 text-center text-sm font-semibold text-gray-700">
|
||||
Total Réseau
|
||||
</th>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-200 bg-gray-50">
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-600"></th>
|
||||
<th className="px-4 py-3 text-right text-xs font-semibold text-gray-600">
|
||||
{mois}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-semibold text-gray-600">
|
||||
{moisN1}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-semibold text-gray-600">
|
||||
Évol.
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-semibold text-gray-600">
|
||||
{mois}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-semibold text-gray-600">
|
||||
{moisN1}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-semibold text-gray-600">
|
||||
Évol.
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-semibold text-gray-600">
|
||||
{mois}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-semibold text-gray-600">
|
||||
{moisN1}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-semibold text-gray-600">
|
||||
Évol.
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{pivotted.map((row, idx) => (
|
||||
<tr
|
||||
key={row.key}
|
||||
className={idx % 2 === 0 ? "border-b border-gray-100 bg-white" : "border-b border-gray-100 bg-gray-50"}
|
||||
>
|
||||
<td className="px-4 py-3 text-sm font-medium text-gray-900">{row.label}</td>
|
||||
<td className="px-4 py-3 text-right text-sm text-gray-800">{formatCA(row.ca292)}</td>
|
||||
<td className="px-4 py-3 text-right text-sm text-gray-800">{formatCA(row.caN1_292)}</td>
|
||||
<td className="px-4 py-3 text-center text-sm">
|
||||
<EvolutionBadge
|
||||
value={
|
||||
row.caN1_292 > 0
|
||||
? ((row.ca292 - row.caN1_292) / row.caN1_292) * 100
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-sm text-gray-800">{formatCA(row.ca579)}</td>
|
||||
<td className="px-4 py-3 text-right text-sm text-gray-800">{formatCA(row.caN1_579)}</td>
|
||||
<td className="px-4 py-3 text-center text-sm">
|
||||
<EvolutionBadge
|
||||
value={
|
||||
row.caN1_579 > 0
|
||||
? ((row.ca579 - row.caN1_579) / row.caN1_579) * 100
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-sm font-semibold text-gray-900">
|
||||
{formatCA(row.caTotal)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-sm font-semibold text-gray-900">
|
||||
{formatCA(row.caN1Total)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center text-sm">
|
||||
<EvolutionBadge value={row.evolutionTotal} />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="border-t-2 border-gray-300 bg-gray-50">
|
||||
<td className="px-4 py-3 text-sm font-bold text-gray-900">TOTAL</td>
|
||||
<td className="px-4 py-3 text-right text-sm font-bold text-gray-900">
|
||||
{formatCA(totals.ca292)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-sm font-bold text-gray-900">
|
||||
{formatCA(totals.caN1_292)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center text-sm">
|
||||
<EvolutionBadge value={evolutionTotal292} />
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-sm font-bold text-gray-900">
|
||||
{formatCA(totals.ca579)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-sm font-bold text-gray-900">
|
||||
{formatCA(totals.caN1_579)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center text-sm">
|
||||
<EvolutionBadge value={evolutionTotal579} />
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-sm font-bold text-gray-900">
|
||||
{formatCA(totals.caTotal)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-sm font-bold text-gray-900">
|
||||
{formatCA(totals.caN1Total)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center text-sm">
|
||||
<EvolutionBadge value={evolutionTotalReseau} />
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
Chiffre d'affaires TTC de <strong className="font-semibold text-[var(--text-primary)]">{libelleMois}</strong>,
|
||||
comparé à <strong className="font-semibold text-[var(--text-primary)]">{libelleMoisN1}</strong> (même mois
|
||||
l'année précédente). Les retours clients sont déduits.
|
||||
</p>
|
||||
|
||||
<div className={cn("transition-opacity", navigation && "pointer-events-none opacity-50")}>
|
||||
<DataTable<AnalyticsRow>
|
||||
key={mode}
|
||||
rows={pivotted}
|
||||
columns={colonnes}
|
||||
rowKey={(r) => `${r.key}|${r.label}`}
|
||||
searchIn={recherche}
|
||||
searchPlaceholder={mode === "fournisseur" ? "Rechercher un fournisseur…" : "Rechercher une famille…"}
|
||||
pageSize={100}
|
||||
unite={mode === "fournisseur" ? "fournisseurs" : "familles"}
|
||||
showFooter
|
||||
emptyTitle={`Aucune vente en ${libelleMois}`}
|
||||
emptyDescription="Aucun chiffre d'affaires n'est enregistré pour ce mois ni pour le même mois de l'année précédente. Choisissez un autre mois."
|
||||
onExport={exporter}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import LoadingModal from "@/components/shared/loading-modal";
|
||||
import { PageSkeleton } from "@/components/ui/states";
|
||||
|
||||
export default function AnalyticsLoading() {
|
||||
return <LoadingModal message="Chargement des données" subMessage="Récupération des statistiques analytiques..." />;
|
||||
/** Silhouette de la page pendant le chargement, sans bloquer l'écran. */
|
||||
export default function Loading() {
|
||||
return <PageSkeleton rows={10} />;
|
||||
}
|
||||
@@ -1,5 +1,30 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { CalendarRange, RotateCcw } from "lucide-react";
|
||||
import { pgGetCaByFournisseur, pgGetCaByNomenclature } from "@/lib/pg-ff-client";
|
||||
import { AnalyticsClient } from "./client";
|
||||
import { cachedFF } from "@/lib/ff-cache";
|
||||
import { PageHeader } from "@/components/ui/page-header";
|
||||
import { ErrorState } from "@/components/ui/states";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { AnalyticsClient, type AnalyticsRow, type ModeAnalytics, type OptionMois } from "./client";
|
||||
|
||||
export const metadata: Metadata = { title: "Ventes par mois" };
|
||||
|
||||
const NOMS_MOIS = [
|
||||
"janvier", "février", "mars", "avril", "mai", "juin",
|
||||
"juillet", "août", "septembre", "octobre", "novembre", "décembre",
|
||||
];
|
||||
|
||||
/** « 2026-10 » → « octobre 2026 » (sans dépendre du fuseau horaire). */
|
||||
function libelleMois(mois: string): string {
|
||||
const [year, month] = mois.split("-").map(Number);
|
||||
const nom = NOMS_MOIS[month - 1];
|
||||
return nom && Number.isFinite(year) ? `${nom} ${year}` : mois;
|
||||
}
|
||||
|
||||
function formatMois(d: Date): string {
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
// Calcul du mois N-1 (même mois année précédente)
|
||||
function getMoisN1(mois: string): string {
|
||||
@@ -14,17 +39,7 @@ function pivotData(
|
||||
mois: string,
|
||||
moisN1: string,
|
||||
mode: string
|
||||
): Array<{
|
||||
key: string;
|
||||
label: string;
|
||||
ca292: number;
|
||||
caN1_292: number;
|
||||
ca579: number;
|
||||
caN1_579: number;
|
||||
caTotal: number;
|
||||
caN1Total: number;
|
||||
evolutionTotal: number | null;
|
||||
}> {
|
||||
): AnalyticsRow[] {
|
||||
const map = new Map<string, { code: string; label: string; data: Record<string, number> }>();
|
||||
|
||||
for (const row of rows) {
|
||||
@@ -71,77 +86,87 @@ export default async function AnalyticsPage(props: {
|
||||
searchParams: Promise<Record<string, string | string[]>>;
|
||||
}) {
|
||||
const searchParams = await props.searchParams;
|
||||
const mode = (searchParams.mode as string) || "fournisseur";
|
||||
// Toute autre valeur que « fournisseur » affichait déjà la vue par famille.
|
||||
const mode: ModeAnalytics = ((searchParams.mode as string) || "fournisseur") === "fournisseur" ? "fournisseur" : "nomenclature";
|
||||
const moisParam = (searchParams.mois as string) || "";
|
||||
|
||||
// Mois par défaut = mois courant (YYYY-MM)
|
||||
// Mois par défaut = dernier mois complet (le mois précédent) : le mois en
|
||||
// cours, incomplet, se comparerait mal à un mois N-1 entier.
|
||||
const today = new Date();
|
||||
const currentMois = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}`;
|
||||
const mois = moisParam || currentMois;
|
||||
const currentMois = formatMois(today);
|
||||
const dernierMoisComplet = formatMois(new Date(today.getFullYear(), today.getMonth() - 1));
|
||||
const mois = moisParam || dernierMoisComplet;
|
||||
const moisN1 = getMoisN1(mois);
|
||||
|
||||
let rows: Array<{ code: string; label: string; site: string; mois: string; ca_ttc: number }> =
|
||||
[];
|
||||
|
||||
if (mode === "fournisseur") {
|
||||
const result = await pgGetCaByFournisseur(mois, moisN1);
|
||||
rows = result.map((r) => ({
|
||||
code: r.code,
|
||||
label: r.nom,
|
||||
site: r.site,
|
||||
mois: r.mois,
|
||||
ca_ttc: r.ca_ttc,
|
||||
}));
|
||||
} else {
|
||||
const result = await pgGetCaByNomenclature(mois, moisN1);
|
||||
rows = result.map((r) => ({
|
||||
code: r.code,
|
||||
label: `${r.code} — ${r.libelle}`,
|
||||
site: r.site,
|
||||
mois: r.mois,
|
||||
ca_ttc: r.ca_ttc,
|
||||
}));
|
||||
// Liste des 24 derniers mois (calculée ici : même résultat côté serveur et navigateur).
|
||||
const moisDisponibles: OptionMois[] = [];
|
||||
for (let i = 0; i < 24; i++) {
|
||||
const value = formatMois(new Date(today.getFullYear(), today.getMonth() - i));
|
||||
moisDisponibles.push({ value, label: libelleMois(value) + (value === currentMois ? " (en cours)" : "") });
|
||||
}
|
||||
if (!moisDisponibles.some((m) => m.value === mois)) {
|
||||
moisDisponibles.push({ value: mois, label: libelleMois(mois) });
|
||||
}
|
||||
|
||||
const pivotted = pivotData(rows, mois, moisN1, mode);
|
||||
let pivotted: AnalyticsRow[] | null = null;
|
||||
let erreur: string | null = null;
|
||||
try {
|
||||
let rows: Array<{ code: string; label: string; site: string; mois: string; ca_ttc: number }> =
|
||||
[];
|
||||
|
||||
// Calcul des totaux
|
||||
const totals = pivotted.reduce(
|
||||
(acc, row) => ({
|
||||
ca292: acc.ca292 + row.ca292,
|
||||
caN1_292: acc.caN1_292 + row.caN1_292,
|
||||
ca579: acc.ca579 + row.ca579,
|
||||
caN1_579: acc.caN1_579 + row.caN1_579,
|
||||
caTotal: acc.caTotal + row.caTotal,
|
||||
caN1Total: acc.caN1Total + row.caN1Total,
|
||||
}),
|
||||
{ ca292: 0, caN1_292: 0, ca579: 0, caN1_579: 0, caTotal: 0, caN1Total: 0 }
|
||||
);
|
||||
if (mode === "fournisseur") {
|
||||
const result = await cachedFF(`ca-fournisseur:${mois}:${moisN1}`, () => pgGetCaByFournisseur(mois, moisN1));
|
||||
rows = result.map((r) => ({
|
||||
code: r.code,
|
||||
label: r.nom,
|
||||
site: r.site,
|
||||
mois: r.mois,
|
||||
ca_ttc: r.ca_ttc,
|
||||
}));
|
||||
} else {
|
||||
const result = await cachedFF(`ca-nomenclature:${mois}:${moisN1}`, () => pgGetCaByNomenclature(mois, moisN1));
|
||||
rows = result.map((r) => ({
|
||||
code: r.code,
|
||||
label: `${r.code} — ${r.libelle}`,
|
||||
site: r.site,
|
||||
mois: r.mois,
|
||||
ca_ttc: r.ca_ttc,
|
||||
}));
|
||||
}
|
||||
|
||||
const evolutionTotal292 =
|
||||
totals.caN1_292 > 0 ? ((totals.ca292 - totals.caN1_292) / totals.caN1_292) * 100 : null;
|
||||
const evolutionTotal579 =
|
||||
totals.caN1_579 > 0 ? ((totals.ca579 - totals.caN1_579) / totals.caN1_579) * 100 : null;
|
||||
const evolutionTotalReseau =
|
||||
totals.caN1Total > 0 ? ((totals.caTotal - totals.caN1Total) / totals.caN1Total) * 100 : null;
|
||||
pivotted = pivotData(rows, mois, moisN1, mode);
|
||||
} catch (e) {
|
||||
console.error("[analytics] chargement impossible :", e);
|
||||
erreur = e instanceof Error ? e.message : String(e);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 p-6">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<h1 className="mb-6 text-3xl font-bold text-gray-900">Analytics</h1>
|
||||
|
||||
<div className="mx-auto w-full max-w-screen-2xl">
|
||||
<PageHeader
|
||||
icon={CalendarRange}
|
||||
title="Ventes par mois"
|
||||
description="Le chiffre d'affaires TTC d'un mois comparé au même mois de l'année précédente, par fournisseur ou par famille de produits, pour chacun de nos magasins."
|
||||
/>
|
||||
{pivotted ? (
|
||||
<AnalyticsClient
|
||||
mode={mode}
|
||||
mois={mois}
|
||||
moisN1={moisN1}
|
||||
currentMois={currentMois}
|
||||
libelleMois={libelleMois(mois)}
|
||||
libelleMoisN1={libelleMois(moisN1)}
|
||||
moisDisponibles={moisDisponibles}
|
||||
pivotted={pivotted}
|
||||
totals={totals}
|
||||
evolutionTotal292={evolutionTotal292}
|
||||
evolutionTotal579={evolutionTotal579}
|
||||
evolutionTotalReseau={evolutionTotalReseau}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<ErrorState
|
||||
title="Les ventes du mois n'ont pas pu être chargées"
|
||||
detail={erreur ?? undefined}
|
||||
action={
|
||||
<Button asChild variant="outline">
|
||||
<Link href={`/analytics?mode=${mode}&mois=${mois}`}><RotateCcw /> Réessayer</Link>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState, useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
AlertTriangle,
|
||||
CalendarClock,
|
||||
CheckCircle2,
|
||||
HelpCircle,
|
||||
Plus,
|
||||
Power,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { useMemo, useState, useTransition, type FormEvent } from "react";
|
||||
import { AlertTriangle, CalendarClock, Plus, Power, Trash2 } from "lucide-react";
|
||||
import {
|
||||
upsertCadence,
|
||||
toggleCadence,
|
||||
@@ -18,41 +9,76 @@ import {
|
||||
type CadenceView,
|
||||
type CadenceStatut,
|
||||
} from "@/features/commandes-auto/actions";
|
||||
import { Badge, type Ton } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { confirmer, toast } from "@/components/ui/feedback";
|
||||
import { Input, Label } from "@/components/ui/form-controls";
|
||||
import { EmptyState } from "@/components/ui/states";
|
||||
import { Terme, Tooltip, InfoBulle } from "@/components/ui/tooltip";
|
||||
import { MAGASINS, nomMagasin } from "@/lib/magasins";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const SITES: { code: string; label: string }[] = [
|
||||
{ code: "292", label: "292 — Frouard / Nancy" },
|
||||
{ code: "579", label: "579 — Houdemont" },
|
||||
];
|
||||
type Fournisseur = { code: string; nom: string };
|
||||
type Resultat = { ok: boolean; error?: string };
|
||||
|
||||
const SEMAINES_MIN = 1;
|
||||
const SEMAINES_MAX = 104;
|
||||
|
||||
function fmtDate(iso: string | null): string {
|
||||
if (!iso) return "—";
|
||||
return new Date(iso).toLocaleDateString("fr-FR", { day: "2-digit", month: "2-digit", year: "numeric" });
|
||||
const d = new Date(iso);
|
||||
if (Number.isNaN(d.getTime())) return "—";
|
||||
return d.toLocaleDateString("fr-FR", { day: "2-digit", month: "2-digit", year: "numeric" });
|
||||
}
|
||||
|
||||
const pluriel = (n: number, mot: string) => `${n} ${mot}${Math.abs(n) > 1 ? "s" : ""}`;
|
||||
|
||||
function tempsRestant(jours: number | null): string {
|
||||
if (jours === null) return "Réception inconnue";
|
||||
if (jours === 0) return "Aujourd'hui";
|
||||
if (jours < 0) return `En retard de ${Math.abs(jours)} j`;
|
||||
if (jours < 0) return `En retard de ${pluriel(Math.abs(jours), "jour")}`;
|
||||
if (jours === 1) return "Demain";
|
||||
return `Dans ${jours} j`;
|
||||
return `Dans ${pluriel(jours, "jour")}`;
|
||||
}
|
||||
|
||||
const STATUT_META: Record<CadenceStatut, { label: string; cls: string; Icon: typeof CheckCircle2 }> = {
|
||||
a_commander: { label: "À commander", cls: "bg-red-100 text-red-700", Icon: AlertTriangle },
|
||||
bientot: { label: "Bientôt", cls: "bg-amber-100 text-amber-700", Icon: CalendarClock },
|
||||
ok: { label: "OK", cls: "bg-emerald-100 text-emerald-700", Icon: CheckCircle2 },
|
||||
inconnu: { label: "Inconnu", cls: "bg-gray-100 text-gray-500", Icon: HelpCircle },
|
||||
const STATUT_META: Record<CadenceStatut, { libelle: string; ton: Ton; explication: string }> = {
|
||||
a_commander: {
|
||||
libelle: "À commander",
|
||||
ton: "erreur",
|
||||
explication: "L'échéance est atteinte ou dépassée : passez commande.",
|
||||
},
|
||||
bientot: {
|
||||
libelle: "Bientôt",
|
||||
ton: "alerte",
|
||||
explication: "L'échéance tombe dans les 7 prochains jours.",
|
||||
},
|
||||
ok: {
|
||||
libelle: "À jour",
|
||||
ton: "succes",
|
||||
explication: "L'échéance est dans plus de 7 jours.",
|
||||
},
|
||||
inconnu: {
|
||||
libelle: "Inconnu",
|
||||
ton: "neutre",
|
||||
explication: "Aucune réception connue pour ce fournisseur dans ce magasin : l'échéance ne peut pas être calculée.",
|
||||
},
|
||||
};
|
||||
|
||||
function StatutBadge({ statut }: { statut: CadenceStatut }) {
|
||||
const { label, cls, Icon } = STATUT_META[statut];
|
||||
function StatutBadge({ cadence }: { cadence: CadenceView }) {
|
||||
if (!cadence.actif) {
|
||||
return <Badge title="Rappel en pause : aucune alerte pour ce fournisseur.">Désactivé</Badge>;
|
||||
}
|
||||
const { libelle, ton, explication } = STATUT_META[cadence.statut];
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold ${cls}`}>
|
||||
<Icon className="h-3 w-3" /> {label}
|
||||
</span>
|
||||
<Badge ton={ton} title={explication}>
|
||||
{cadence.statut === "a_commander" && <AlertTriangle className="h-3.5 w-3.5" aria-hidden />}
|
||||
{libelle}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
/** Libellé suivi d'un « i » : explication libre au survol (hors glossaire). */
|
||||
|
||||
/** Tri : à commander d'abord (plus en retard en tête), puis bientôt, ok, inconnu, et inactifs en dernier. */
|
||||
function trier(rows: CadenceView[]): CadenceView[] {
|
||||
const rank: Record<CadenceStatut, number> = { a_commander: 0, bientot: 1, ok: 2, inconnu: 3 };
|
||||
@@ -65,248 +91,365 @@ function trier(rows: CadenceView[]): CadenceView[] {
|
||||
});
|
||||
}
|
||||
|
||||
function AddCadenceForm({
|
||||
function FormulaireAjout({
|
||||
site,
|
||||
fournisseurs,
|
||||
existingCodes,
|
||||
onDone,
|
||||
codesExistants,
|
||||
onAjouter,
|
||||
pending,
|
||||
}: {
|
||||
site: string;
|
||||
fournisseurs: { code: string; nom: string }[];
|
||||
existingCodes: Set<string>;
|
||||
onDone: (input: { codefou: string; nomfou: string; semaines: number }) => void;
|
||||
fournisseurs: Fournisseur[];
|
||||
codesExistants: Set<string>;
|
||||
onAjouter: (input: { codefou: string; nomfou: string; semaines: number }) => Promise<boolean>;
|
||||
pending: boolean;
|
||||
}) {
|
||||
const [value, setValue] = useState("");
|
||||
const [semaines, setSemaines] = useState(4);
|
||||
const [err, setErr] = useState<string | null>(null);
|
||||
const listId = `fou-list-${site}`;
|
||||
const [saisie, setSaisie] = useState("");
|
||||
const [semaines, setSemaines] = useState("4");
|
||||
const [erreur, setErreur] = useState<string | null>(null);
|
||||
const idFournisseur = `cadence-fournisseur-${site}`;
|
||||
const idSemaines = `cadence-semaines-${site}`;
|
||||
const idListe = `cadence-liste-${site}`;
|
||||
const idErreur = `cadence-erreur-${site}`;
|
||||
|
||||
// label affiché dans le datalist → fournisseur
|
||||
const byLabel = useMemo(() => {
|
||||
const m = new Map<string, { code: string; nom: string }>();
|
||||
// Libellé affiché dans la liste de suggestions → fournisseur
|
||||
const parLibelle = useMemo(() => {
|
||||
const m = new Map<string, Fournisseur>();
|
||||
for (const f of fournisseurs) m.set(`${f.nom} — ${f.code}`, f);
|
||||
return m;
|
||||
}, [fournisseurs]);
|
||||
|
||||
function submit() {
|
||||
setErr(null);
|
||||
const f = byLabel.get(value.trim());
|
||||
async function ajouter(e: FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
setErreur(null);
|
||||
const f = parLibelle.get(saisie.trim());
|
||||
if (!f) {
|
||||
setErr("Sélectionnez un fournisseur dans la liste.");
|
||||
setErreur("Choisissez un fournisseur dans la liste proposée pendant la saisie.");
|
||||
return;
|
||||
}
|
||||
if (existingCodes.has(f.code)) {
|
||||
setErr("Ce fournisseur est déjà cadencé sur ce magasin.");
|
||||
if (codesExistants.has(f.code)) {
|
||||
setErreur("Ce fournisseur a déjà un rappel dans ce magasin : modifiez son rythme dans le tableau ci-dessous.");
|
||||
return;
|
||||
}
|
||||
if (!Number.isFinite(semaines) || semaines < 1 || semaines > 104) {
|
||||
setErr("Intervalle : 1 à 104 semaines.");
|
||||
const n = Number(semaines);
|
||||
if (!Number.isInteger(n) || n < SEMAINES_MIN || n > SEMAINES_MAX) {
|
||||
setErreur(`Indiquez un nombre entier de semaines, entre ${SEMAINES_MIN} et ${SEMAINES_MAX}.`);
|
||||
return;
|
||||
}
|
||||
onDone({ codefou: f.code, nomfou: f.nom, semaines });
|
||||
setValue("");
|
||||
setSemaines(4);
|
||||
// Le formulaire n'est vidé qu'une fois le rappel réellement enregistré.
|
||||
if (await onAjouter({ codefou: f.code, nomfou: f.nom, semaines: n })) {
|
||||
setSaisie("");
|
||||
setSemaines("4");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-end gap-3 rounded-xl border border-dashed border-gray-300 bg-gray-50 p-3">
|
||||
<div className="flex flex-col">
|
||||
<label className="mb-1 text-xs font-medium text-gray-500">Fournisseur</label>
|
||||
<input
|
||||
list={listId}
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
placeholder="Rechercher…"
|
||||
className="min-w-[260px] rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<datalist id={listId}>
|
||||
{fournisseurs.map((f) => (
|
||||
<option key={f.code} value={`${f.nom} — ${f.code}`} />
|
||||
))}
|
||||
</datalist>
|
||||
<form
|
||||
onSubmit={ajouter}
|
||||
className="rounded-xl border border-dashed border-[var(--border-strong)] bg-[var(--bg-surface)] p-4"
|
||||
>
|
||||
<p className="mb-3 text-sm font-medium text-[var(--text-primary)]">Ajouter un rappel pour ce magasin</p>
|
||||
<div className="flex flex-wrap items-end gap-3">
|
||||
<div>
|
||||
<Label htmlFor={idFournisseur}>Fournisseur</Label>
|
||||
<Input
|
||||
id={idFournisseur}
|
||||
list={idListe}
|
||||
value={saisie}
|
||||
onChange={(e) => setSaisie(e.target.value)}
|
||||
placeholder="Tapez le nom ou le code…"
|
||||
autoComplete="off"
|
||||
aria-invalid={erreur !== null || undefined}
|
||||
aria-describedby={erreur ? idErreur : undefined}
|
||||
className="w-[300px] max-w-full"
|
||||
/>
|
||||
<datalist id={idListe}>
|
||||
{fournisseurs.map((f) => (
|
||||
<option key={f.code} value={`${f.nom} — ${f.code}`} />
|
||||
))}
|
||||
</datalist>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor={idSemaines}>Toutes les … semaines</Label>
|
||||
<Input
|
||||
id={idSemaines}
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
min={SEMAINES_MIN}
|
||||
max={SEMAINES_MAX}
|
||||
step={1}
|
||||
value={semaines}
|
||||
onChange={(e) => setSemaines(e.target.value)}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" disabled={pending}>
|
||||
<Plus /> Ajouter le rappel
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<label className="mb-1 text-xs font-medium text-gray-500">Toutes les (semaines)</label>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={104}
|
||||
value={semaines}
|
||||
onChange={(e) => setSemaines(parseInt(e.target.value, 10))}
|
||||
className="w-28 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={submit}
|
||||
disabled={pending}
|
||||
className="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3.5 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
<Plus className="h-4 w-4" /> Activer l'alerte
|
||||
</button>
|
||||
{err && <span className="text-xs font-medium text-red-600">{err}</span>}
|
||||
</div>
|
||||
{erreur && (
|
||||
<p id={idErreur} role="alert" className="mt-2 text-[13px] font-medium text-[var(--accent-error)]">
|
||||
{erreur}
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function SiteSection({
|
||||
const TH = "whitespace-nowrap border-b border-[var(--border-strong)] px-3 py-2.5 text-left text-[13px] font-semibold text-[var(--text-secondary)]";
|
||||
|
||||
function SectionMagasin({
|
||||
site,
|
||||
label,
|
||||
rows,
|
||||
fournisseurs,
|
||||
}: {
|
||||
site: string;
|
||||
label: string;
|
||||
rows: CadenceView[];
|
||||
fournisseurs: { code: string; nom: string }[];
|
||||
fournisseurs: Fournisseur[];
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [pending, startTransition] = useTransition();
|
||||
const nom = nomMagasin(site);
|
||||
|
||||
const sorted = useMemo(() => trier(rows), [rows]);
|
||||
const existingCodes = useMemo(() => new Set(rows.map((r) => r.codefou)), [rows]);
|
||||
const triees = useMemo(() => trier(rows), [rows]);
|
||||
const codesExistants = useMemo(() => new Set(rows.map((r) => r.codefou)), [rows]);
|
||||
const nbACommander = rows.filter((r) => r.actif && r.statut === "a_commander").length;
|
||||
|
||||
function run(fn: () => Promise<unknown>) {
|
||||
startTransition(async () => {
|
||||
await fn();
|
||||
router.refresh();
|
||||
/**
|
||||
* Exécute une action serveur et en rend compte : message de réussite, ou
|
||||
* message d'erreur (refus de l'action ou exception) — jamais d'échec muet.
|
||||
* 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 executer(action: () => Promise<Resultat>, messages: { succes: string; echec: string }): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
startTransition(async () => {
|
||||
try {
|
||||
const resultat = await action();
|
||||
if (resultat.ok) toast.succes(messages.succes);
|
||||
else toast.erreur(resultat.error ?? messages.echec);
|
||||
resolve(resultat.ok);
|
||||
} catch (e) {
|
||||
console.error("[cadencier]", e);
|
||||
toast.erreur(`${messages.echec} Vérifiez votre connexion puis réessayez.`);
|
||||
resolve(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const add = (input: { codefou: string; nomfou: string; semaines: number }) =>
|
||||
run(() =>
|
||||
upsertCadence({
|
||||
codefou: input.codefou,
|
||||
nomfou: input.nomfou,
|
||||
site,
|
||||
intervalleSemaines: input.semaines,
|
||||
actif: true,
|
||||
}),
|
||||
const ajouter = (input: { codefou: string; nomfou: string; semaines: number }) =>
|
||||
executer(
|
||||
() =>
|
||||
upsertCadence({
|
||||
codefou: input.codefou,
|
||||
nomfou: input.nomfou,
|
||||
site,
|
||||
intervalleSemaines: input.semaines,
|
||||
actif: true,
|
||||
}),
|
||||
{
|
||||
succes: `Rappel ajouté : ${input.nomfou}, toutes les ${pluriel(input.semaines, "semaine")}.`,
|
||||
echec: "Le rappel n'a pas pu être ajouté.",
|
||||
},
|
||||
);
|
||||
|
||||
const changeSemaines = (r: CadenceView, semaines: number) =>
|
||||
run(() =>
|
||||
upsertCadence({
|
||||
codefou: r.codefou,
|
||||
nomfou: r.nomfou,
|
||||
site,
|
||||
intervalleSemaines: semaines,
|
||||
actif: r.actif,
|
||||
}),
|
||||
const changerSemaines = (r: CadenceView, semaines: number) =>
|
||||
executer(
|
||||
() =>
|
||||
upsertCadence({
|
||||
codefou: r.codefou,
|
||||
nomfou: r.nomfou,
|
||||
site,
|
||||
intervalleSemaines: semaines,
|
||||
actif: r.actif,
|
||||
}),
|
||||
{
|
||||
succes: `Rythme enregistré : ${r.nomfou}, toutes les ${pluriel(semaines, "semaine")}.`,
|
||||
echec: "Le rythme n'a pas pu être enregistré.",
|
||||
},
|
||||
);
|
||||
|
||||
const basculer = (r: CadenceView) =>
|
||||
executer(() => toggleCadence(r.codefou, r.site, !r.actif), {
|
||||
succes: r.actif ? `Rappel désactivé : ${r.nomfou}.` : `Rappel réactivé : ${r.nomfou}.`,
|
||||
echec: r.actif ? "Le rappel n'a pas pu être désactivé." : "Le rappel n'a pas pu être réactivé.",
|
||||
});
|
||||
|
||||
async function supprimer(r: CadenceView) {
|
||||
const ok = await confirmer({
|
||||
titre: "Supprimer ce rappel ?",
|
||||
message: `Le rythme de commande de ${r.nomfou} pour ${nom} sera supprimé. Pour simplement suspendre les alertes, utilisez plutôt « Désactiver ».`,
|
||||
libelleConfirmer: "Supprimer",
|
||||
danger: true,
|
||||
});
|
||||
if (!ok) return;
|
||||
await executer(() => removeCadence(r.codefou, r.site), {
|
||||
succes: `Rappel supprimé : ${r.nomfou}.`,
|
||||
echec: "Le rappel n'a pas pu être supprimé.",
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="space-y-3">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<h2 className="text-lg font-bold text-gray-900">{label}</h2>
|
||||
<span className="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-semibold text-blue-700">
|
||||
{rows.length} cadencé{rows.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
<section className="space-y-3" aria-label={`Rythme de commande — ${nom}`}>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h2 className="mr-1 text-lg font-semibold text-[var(--text-primary)]">{nom}</h2>
|
||||
<Badge>
|
||||
{pluriel(rows.length, "fournisseur")} suivi{rows.length > 1 ? "s" : ""}
|
||||
</Badge>
|
||||
{nbACommander > 0 && (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-semibold text-red-700">
|
||||
<AlertTriangle className="h-3 w-3" /> {nbACommander} à commander
|
||||
</span>
|
||||
<Badge ton="erreur">
|
||||
<AlertTriangle className="h-3.5 w-3.5" aria-hidden /> {nbACommander} à commander
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<AddCadenceForm
|
||||
<FormulaireAjout
|
||||
site={site}
|
||||
fournisseurs={fournisseurs}
|
||||
existingCodes={existingCodes}
|
||||
onDone={add}
|
||||
codesExistants={codesExistants}
|
||||
onAjouter={ajouter}
|
||||
pending={pending}
|
||||
/>
|
||||
|
||||
<div className="overflow-x-auto rounded-xl border border-gray-200 bg-white shadow-sm">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="border-b border-gray-200 bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-gray-600">Code</th>
|
||||
<th className="px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-gray-600">Fournisseur</th>
|
||||
<th className="px-3 py-2.5 text-center text-xs font-semibold uppercase tracking-wide text-gray-600">Toutes les</th>
|
||||
<th className="px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-gray-600">Dernière réception</th>
|
||||
<th className="px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-gray-600">Prochaine commande</th>
|
||||
<th className="px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-gray-600">Temps restant</th>
|
||||
<th className="px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-gray-600">Statut</th>
|
||||
<th className="px-3 py-2.5 text-right text-xs font-semibold uppercase tracking-wide text-gray-600">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{sorted.length === 0 && (
|
||||
{triees.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={CalendarClock}
|
||||
className="py-8"
|
||||
title="Aucun rappel pour ce magasin"
|
||||
description="Ajoutez un fournisseur avec le formulaire ci-dessus pour être prévenu quand il faut lui passer commande."
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
aria-busy={pending}
|
||||
className="overflow-x-auto rounded-xl border border-[var(--border)] bg-[var(--bg-surface)] shadow-[var(--shadow-sm)]"
|
||||
>
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="bg-[var(--bg-elevated)]">
|
||||
<tr>
|
||||
<td colSpan={8} className="px-3 py-8 text-center text-gray-400">
|
||||
Aucun fournisseur cadencé sur ce magasin. Ajoutez-en un ci-dessus.
|
||||
</td>
|
||||
<th scope="col" className={TH}>Fournisseur</th>
|
||||
<th scope="col" className={TH}>Rythme</th>
|
||||
<th scope="col" className={TH}>Dernière réception</th>
|
||||
<th scope="col" className={TH}>
|
||||
<InfoBulle explication="Date de la dernière réception du fournisseur dans ce magasin, plus le rythme choisi.">
|
||||
Prochaine commande
|
||||
</InfoBulle>
|
||||
</th>
|
||||
<th scope="col" className={TH}>Temps restant</th>
|
||||
<th scope="col" className={TH}>Statut</th>
|
||||
<th scope="col" className={cn(TH, "text-right")}>Actions</th>
|
||||
</tr>
|
||||
)}
|
||||
{sorted.map((r) => {
|
||||
const urgent = r.actif && r.statut === "a_commander";
|
||||
return (
|
||||
<tr
|
||||
key={`${r.site}-${r.codefou}`}
|
||||
className={[
|
||||
"transition-colors",
|
||||
!r.actif ? "opacity-50" : "",
|
||||
urgent ? "bg-red-50/60 hover:bg-red-50" : "hover:bg-gray-50",
|
||||
].join(" ")}
|
||||
>
|
||||
<td className="px-3 py-2.5 font-mono text-xs text-gray-500">{r.codefou}</td>
|
||||
<td className="px-3 py-2.5 font-medium text-gray-900">{r.nomfou}</td>
|
||||
<td className="px-3 py-2.5 text-center">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={104}
|
||||
defaultValue={r.intervalleSemaines}
|
||||
onBlur={(e) => {
|
||||
const v = parseInt(e.target.value, 10);
|
||||
if (v && v !== r.intervalleSemaines && v >= 1 && v <= 104) changeSemaines(r, v);
|
||||
}}
|
||||
className="w-16 rounded-md border border-gray-200 px-2 py-1 text-center text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-xs text-gray-400">sem.</span>
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-gray-600">{fmtDate(r.derniereReception)}</td>
|
||||
<td className="px-3 py-2.5 font-medium text-gray-800">{fmtDate(r.echeance)}</td>
|
||||
<td className={["px-3 py-2.5 font-semibold", urgent ? "text-red-700" : "text-gray-700"].join(" ")}>
|
||||
{tempsRestant(r.joursRestants)}
|
||||
</td>
|
||||
<td className="px-3 py-2.5">
|
||||
<StatutBadge statut={r.actif ? r.statut : "inconnu"} />
|
||||
</td>
|
||||
<td className="px-3 py-2.5">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<button
|
||||
type="button"
|
||||
title={r.actif ? "Désactiver" : "Réactiver"}
|
||||
onClick={() => run(() => toggleCadence(r.codefou, r.site, !r.actif))}
|
||||
disabled={pending}
|
||||
className="rounded-md p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50"
|
||||
>
|
||||
<Power className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
title="Supprimer"
|
||||
onClick={() => run(() => removeCadence(r.codefou, r.site))}
|
||||
disabled={pending}
|
||||
className="rounded-md p-1.5 text-gray-500 hover:bg-red-100 hover:text-red-700 disabled:opacity-50"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</thead>
|
||||
<tbody>
|
||||
{triees.map((r) => {
|
||||
const urgent = r.actif && r.statut === "a_commander";
|
||||
const texte = r.actif ? "text-[var(--text-primary)]" : "text-[var(--text-muted)]";
|
||||
return (
|
||||
<tr
|
||||
key={`${r.site}-${r.codefou}`}
|
||||
className={cn(
|
||||
"border-b border-[var(--border)] last:border-b-0",
|
||||
urgent ? "bg-[var(--accent-error-bg)]" : "hover:bg-[var(--bg-elevated)]",
|
||||
)}
|
||||
>
|
||||
<td className={cn("px-3 py-2", texte)}>
|
||||
<div className="font-medium">{r.nomfou}</div>
|
||||
<div className="text-xs text-[var(--text-muted)]">Code {r.codefou}</div>
|
||||
</td>
|
||||
<td className={cn("whitespace-nowrap px-3 py-2", texte)}>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
Toutes les
|
||||
<Input
|
||||
// Remonté quand la valeur enregistrée change (après revalidation).
|
||||
key={r.intervalleSemaines}
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
min={SEMAINES_MIN}
|
||||
max={SEMAINES_MAX}
|
||||
step={1}
|
||||
defaultValue={r.intervalleSemaines}
|
||||
aria-label={`Rythme de commande de ${r.nomfou}, en semaines`}
|
||||
title="Modifiez le nombre puis quittez le champ (ou appuyez sur Entrée) pour l'enregistrer."
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") e.currentTarget.blur();
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
const champ = e.currentTarget;
|
||||
const brut = champ.value.trim();
|
||||
const v = Number(brut);
|
||||
if (brut !== "" && v === r.intervalleSemaines) return;
|
||||
if (brut === "" || !Number.isInteger(v) || v < SEMAINES_MIN || v > SEMAINES_MAX) {
|
||||
champ.value = String(r.intervalleSemaines);
|
||||
toast.erreur(
|
||||
`Rythme non enregistré : indiquez un nombre entier de semaines, entre ${SEMAINES_MIN} et ${SEMAINES_MAX}.`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
void changerSemaines(r, v).then((ok) => {
|
||||
if (!ok) champ.value = String(r.intervalleSemaines);
|
||||
});
|
||||
}}
|
||||
className="h-8 w-20 px-2 text-center"
|
||||
/>
|
||||
semaines
|
||||
</span>
|
||||
</td>
|
||||
<td className={cn("whitespace-nowrap px-3 py-2 tabular-nums", r.actif ? "text-[var(--text-secondary)]" : texte)}>
|
||||
{fmtDate(r.derniereReception)}
|
||||
</td>
|
||||
<td className={cn("whitespace-nowrap px-3 py-2 font-medium tabular-nums", texte)}>
|
||||
{fmtDate(r.echeance)}
|
||||
</td>
|
||||
<td
|
||||
className={cn(
|
||||
"whitespace-nowrap px-3 py-2 font-semibold",
|
||||
urgent ? "text-[var(--accent-error)]" : texte,
|
||||
)}
|
||||
>
|
||||
{tempsRestant(r.joursRestants)}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<StatutBadge cadence={r} />
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex items-center justify-end gap-1.5">
|
||||
<Tooltip
|
||||
content={
|
||||
r.actif
|
||||
? "Mettre les alertes en pause, sans perdre le rythme choisi."
|
||||
: "Reprendre les alertes pour ce fournisseur."
|
||||
}
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => void basculer(r)}
|
||||
disabled={pending}
|
||||
aria-label={`${r.actif ? "Désactiver" : "Réactiver"} le rappel de ${r.nomfou}`}
|
||||
>
|
||||
<Power /> {r.actif ? "Désactiver" : "Réactiver"}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Supprimer définitivement ce rappel.">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => void supprimer(r)}
|
||||
disabled={pending}
|
||||
aria-label={`Supprimer le rappel de ${r.nomfou}`}
|
||||
className="text-[var(--accent-error)] hover:bg-[var(--accent-error-bg)] hover:text-[var(--accent-error)]"
|
||||
>
|
||||
<Trash2 /> Supprimer
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -316,9 +459,9 @@ export function CadencierClient({
|
||||
fournisseurs,
|
||||
}: {
|
||||
cadences: CadenceView[];
|
||||
fournisseurs: { code: string; nom: string }[];
|
||||
fournisseurs: Fournisseur[];
|
||||
}) {
|
||||
const bySite = useMemo(() => {
|
||||
const parMagasin = useMemo(() => {
|
||||
const m = new Map<string, CadenceView[]>();
|
||||
for (const c of cadences) {
|
||||
if (!m.has(c.site)) m.set(c.site, []);
|
||||
@@ -329,19 +472,17 @@ export function CadencierClient({
|
||||
|
||||
return (
|
||||
<div className="space-y-10">
|
||||
<p className="rounded-lg border border-blue-100 bg-blue-50 px-4 py-3 text-sm text-blue-800">
|
||||
Activez un fournisseur en alerte de commande sur un magasin et définissez sa fréquence
|
||||
(toutes les X semaines). L'échéance est calculée à partir de la{" "}
|
||||
<strong>dernière réception</strong> du fournisseur sur le magasin.
|
||||
</p>
|
||||
{SITES.map(({ code, label }) => (
|
||||
<SiteSection
|
||||
key={code}
|
||||
site={code}
|
||||
label={label}
|
||||
rows={bySite.get(code) ?? []}
|
||||
fournisseurs={fournisseurs}
|
||||
/>
|
||||
<div className="flex items-start gap-3 rounded-xl border border-[var(--accent-border)] bg-[var(--accent-bg)] px-4 py-3 text-sm text-[var(--text-primary)]">
|
||||
<CalendarClock className="mt-0.5 h-5 w-5 shrink-0 text-[var(--accent)]" aria-hidden />
|
||||
<p>
|
||||
Le <Terme id="cadencier">cadencier</Terme> vous rappelle quand commander : pour chaque fournisseur suivi,
|
||||
choisissez un rythme (toutes les X semaines). La prochaine commande est calculée à partir de la{" "}
|
||||
<strong>dernière réception</strong> du fournisseur dans le magasin. Le statut passe à « Bientôt » dans les
|
||||
7 jours qui précèdent, puis à « À commander » le jour venu.
|
||||
</p>
|
||||
</div>
|
||||
{MAGASINS.map((m) => (
|
||||
<SectionMagasin key={m.code} site={m.code} rows={parMagasin.get(m.code) ?? []} fournisseurs={fournisseurs} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,199 +1,187 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import { ChevronUp, ChevronDown, ChevronsUpDown, CheckCircle2, AlertCircle, Minus } from "lucide-react";
|
||||
import { useMemo } from "react";
|
||||
import { ShoppingCart } from "lucide-react";
|
||||
import type { PgCommandeAutoRow } from "./page";
|
||||
import { Badge, type Ton } from "@/components/ui/badge";
|
||||
import { DataTable, type DataColumn, type DataFilter } from "@/components/ui/data-table";
|
||||
import { EmptyState } from "@/components/ui/states";
|
||||
import { Terme } from "@/components/ui/tooltip";
|
||||
import { fmtEntier, fmtEur2 } from "@/lib/format";
|
||||
import { MAGASINS, nomMagasin } from "@/lib/magasins";
|
||||
|
||||
type SortDir = "asc" | "desc";
|
||||
type EtatFranco = "oui" | "non" | "inconnu";
|
||||
|
||||
const SITES: { code: string; label: string }[] = [
|
||||
{ code: "292", label: "292 — Frouard / Nancy" },
|
||||
{ code: "579", label: "579 — Houdemont" },
|
||||
/**
|
||||
* Franco atteint ? Sans montant de franco connu (0), on ne peut pas répondre,
|
||||
* quel que soit l'indicateur renvoyé par l'API.
|
||||
*/
|
||||
function etatFranco(r: PgCommandeAutoRow): EtatFranco {
|
||||
if (!(Number(r.franco) > 0)) return "inconnu";
|
||||
if (r.franco_atteint === true) return "oui";
|
||||
if (r.franco_atteint === false) return "non";
|
||||
return "inconnu";
|
||||
}
|
||||
|
||||
const ETATS_FRANCO: Record<EtatFranco, { libelle: string; ton: Ton }> = {
|
||||
oui: { libelle: "Oui", ton: "succes" },
|
||||
non: { libelle: "Non", ton: "alerte" },
|
||||
inconnu: { libelle: "Inconnu", ton: "neutre" },
|
||||
};
|
||||
|
||||
function explicationFranco(r: PgCommandeAutoRow): string {
|
||||
switch (etatFranco(r)) {
|
||||
case "oui":
|
||||
return "Le montant proposé atteint le franco : livraison sans frais de port.";
|
||||
case "non":
|
||||
return "Le montant proposé n'atteint pas le franco : des frais de port peuvent s'appliquer.";
|
||||
default:
|
||||
return Number(r.franco) > 0
|
||||
? "Le franco est connu, mais FF n'indique pas s'il est atteint."
|
||||
: "Aucun montant de franco connu pour ce fournisseur.";
|
||||
}
|
||||
}
|
||||
|
||||
/** Écart entre le montant proposé et le franco, toujours positif. */
|
||||
function ecartFranco(r: PgCommandeAutoRow): number {
|
||||
return Math.abs(Number(r.ecart_franco)) || Math.abs(Number(r.franco) - Number(r.montant_cde)) || 0;
|
||||
}
|
||||
|
||||
function EcartFranco({ r }: { r: PgCommandeAutoRow }) {
|
||||
const etat = etatFranco(r);
|
||||
const ecart = ecartFranco(r);
|
||||
if (etat === "non") {
|
||||
return <span className="font-semibold text-[var(--accent-warning)]">Il manque {fmtEur2(ecart)}</span>;
|
||||
}
|
||||
if (etat === "oui") {
|
||||
return <span className="text-[var(--accent-success)]">{ecart > 0 ? `Dépassé de ${fmtEur2(ecart)}` : "Atteint"}</span>;
|
||||
}
|
||||
return <span className="text-[var(--text-muted)]">—</span>;
|
||||
}
|
||||
|
||||
const somme = (rows: readonly PgCommandeAutoRow[], valeur: (r: PgCommandeAutoRow) => number) =>
|
||||
rows.reduce((s, r) => s + (Number(valeur(r)) || 0), 0);
|
||||
|
||||
const COLONNES: DataColumn<PgCommandeAutoRow>[] = [
|
||||
{
|
||||
id: "fournisseur",
|
||||
header: "Fournisseur",
|
||||
sortValue: (r) => r.nomfou,
|
||||
cell: (r) => (
|
||||
<div className="min-w-[200px]">
|
||||
<div className="font-medium text-[var(--text-primary)]">{r.nomfou || "Fournisseur sans nom"}</div>
|
||||
{r.codefou && <div className="text-xs text-[var(--text-muted)]">Code {r.codefou}</div>}
|
||||
</div>
|
||||
),
|
||||
footer: (rows) => `Total · ${fmtEntier(rows.length)} fournisseur${rows.length > 1 ? "s" : ""}`,
|
||||
},
|
||||
{
|
||||
id: "articles",
|
||||
header: "Nb articles",
|
||||
align: "right",
|
||||
sortValue: (r) => Number(r.nb_articles),
|
||||
cell: (r) => fmtEntier(Number(r.nb_articles)),
|
||||
footer: (rows) => fmtEntier(somme(rows, (r) => r.nb_articles)),
|
||||
},
|
||||
{
|
||||
id: "montant",
|
||||
header: "Montant proposé",
|
||||
hint: "Montant hors taxes de la commande automatique proposée par FF.",
|
||||
align: "right",
|
||||
sortValue: (r) => Number(r.montant_cde),
|
||||
cell: (r) => <span className="font-semibold">{fmtEur2(Number(r.montant_cde))}</span>,
|
||||
footer: (rows) => fmtEur2(somme(rows, (r) => r.montant_cde)),
|
||||
},
|
||||
{
|
||||
id: "franco",
|
||||
header: <Terme id="franco" />,
|
||||
align: "right",
|
||||
sortValue: (r) => (Number(r.franco) > 0 ? Number(r.franco) : null),
|
||||
cell: (r) =>
|
||||
Number(r.franco) > 0 ? (
|
||||
fmtEur2(Number(r.franco))
|
||||
) : (
|
||||
<span className="text-[var(--text-muted)]" title="Aucun montant de franco connu pour ce fournisseur.">—</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "atteint",
|
||||
header: "Franco atteint",
|
||||
align: "center",
|
||||
// Oui avant Non, inconnus toujours en fin de liste.
|
||||
sortValue: (r) => {
|
||||
const etat = etatFranco(r);
|
||||
return etat === "oui" ? 1 : etat === "non" ? 0 : null;
|
||||
},
|
||||
cell: (r) => {
|
||||
const { libelle, ton } = ETATS_FRANCO[etatFranco(r)];
|
||||
return <Badge ton={ton} title={explicationFranco(r)}>{libelle}</Badge>;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "ecart",
|
||||
header: "Écart au franco",
|
||||
hint: "Ce qu'il manque pour atteindre le franco, ou de combien il est dépassé.",
|
||||
align: "right",
|
||||
sortValue: (r) => {
|
||||
const etat = etatFranco(r);
|
||||
if (etat === "inconnu") return null;
|
||||
return etat === "oui" ? ecartFranco(r) : -ecartFranco(r);
|
||||
},
|
||||
cell: (r) => <EcartFranco r={r} />,
|
||||
},
|
||||
];
|
||||
|
||||
function fmt(n: number) {
|
||||
return n.toLocaleString("fr-FR", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + " €";
|
||||
}
|
||||
const FILTRES: DataFilter<PgCommandeAutoRow>[] = [
|
||||
{
|
||||
id: "atteint",
|
||||
label: "Franco atteint",
|
||||
valueOf: (r) => ETATS_FRANCO[etatFranco(r)].libelle,
|
||||
allLabel: "Tous",
|
||||
},
|
||||
];
|
||||
|
||||
function SortIcon({ col, sortKey, sortDir }: { col: string; sortKey: string; sortDir: SortDir }) {
|
||||
if (col !== sortKey) return <ChevronsUpDown className="inline w-3 h-3 ml-1 opacity-30" />;
|
||||
return sortDir === "asc"
|
||||
? <ChevronUp className="inline w-3 h-3 ml-1" />
|
||||
: <ChevronDown className="inline w-3 h-3 ml-1" />;
|
||||
}
|
||||
|
||||
type SK = keyof PgCommandeAutoRow;
|
||||
const NUMERIC: SK[] = ["franco", "nb_articles", "montant_cde"];
|
||||
|
||||
function FrancoCell({ atteint, ecart, franco }: { atteint: boolean | null; ecart: number; franco: number }) {
|
||||
// franco === 0 : aucune donnée franco disponible
|
||||
// atteint === null ET franco === 0 : pas de franco (N/A ou données manquantes)
|
||||
// atteint === null ET franco > 0 : franco connu mais statut non déterminé → on affiche quand même le montant
|
||||
if (franco === 0) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-500">
|
||||
<Minus className="w-3 h-3" /> Pas de franco
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (atteint === null) {
|
||||
// Franco connu mais statut non calculé par l'API
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-500">
|
||||
<Minus className="w-3 h-3" /> N/A ({fmt(franco)})
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (atteint) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-700">
|
||||
<CheckCircle2 className="w-3 h-3" /> Atteint
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-semibold text-amber-700">
|
||||
<AlertCircle className="w-3 h-3" /> −{fmt(Math.abs(ecart))} manquant
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function StoreTable({ site, label, rows }: { site: string; label: string; rows: PgCommandeAutoRow[] }) {
|
||||
const [sortKey, setSortKey] = useState<SK>("nomfou");
|
||||
const [sortDir, setSortDir] = useState<SortDir>("asc");
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
function handleSort(key: SK) {
|
||||
if (sortKey === key) setSortDir(d => d === "asc" ? "desc" : "asc");
|
||||
else { setSortKey(key); setSortDir("asc"); }
|
||||
}
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = search.toLowerCase();
|
||||
return rows.filter(r => !q || r.nomfou.toLowerCase().includes(q) || r.codefou.toLowerCase().includes(q));
|
||||
}, [rows, search]);
|
||||
|
||||
const sorted = useMemo(() => [...filtered].sort((a, b) => {
|
||||
const av = a[sortKey];
|
||||
const bv = b[sortKey];
|
||||
if (NUMERIC.includes(sortKey)) {
|
||||
return sortDir === "asc" ? Number(av) - Number(bv) : Number(bv) - Number(av);
|
||||
}
|
||||
return sortDir === "asc"
|
||||
? String(av ?? "").localeCompare(String(bv ?? ""), "fr")
|
||||
: String(bv ?? "").localeCompare(String(av ?? ""), "fr");
|
||||
}), [filtered, sortKey, sortDir]);
|
||||
|
||||
const nbFrancoAtteint = rows.filter(r => r.franco_atteint === true).length;
|
||||
const totalMontant = rows.reduce((s, r) => s + Number(r.montant_cde), 0);
|
||||
|
||||
const th = (key: SK, label: string, right = false) => (
|
||||
<th
|
||||
className={[
|
||||
"cursor-pointer select-none whitespace-nowrap px-3 py-2.5 text-xs font-semibold text-gray-600 uppercase tracking-wide hover:text-gray-900",
|
||||
right ? "text-right" : "text-left",
|
||||
].join(" ")}
|
||||
onClick={() => handleSort(key)}
|
||||
>
|
||||
{label}<SortIcon col={key as string} sortKey={sortKey as string} sortDir={sortDir} />
|
||||
</th>
|
||||
);
|
||||
function SectionMagasin({ nom, rows }: { nom: string; rows: PgCommandeAutoRow[] }) {
|
||||
const nbAtteint = rows.filter((r) => etatFranco(r) === "oui").length;
|
||||
const totalMontant = somme(rows, (r) => r.montant_cde);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* En-tête magasin */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<h2 className="text-lg font-bold text-gray-900">{label}</h2>
|
||||
<span className="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-semibold text-blue-700">
|
||||
{rows.length} fournisseur{rows.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
{nbFrancoAtteint > 0 && (
|
||||
<span className="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-700">
|
||||
{nbFrancoAtteint} franco atteint
|
||||
</span>
|
||||
)}
|
||||
<span className="text-sm text-gray-500">
|
||||
Total : <span className="font-semibold text-gray-800">{fmt(totalMontant)}</span>
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Rechercher un fournisseur…"
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-[220px]"
|
||||
/>
|
||||
<section className="space-y-3" aria-label={`Propositions de commande — ${nom}`}>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h2 className="mr-1 text-lg font-semibold text-[var(--text-primary)]">{nom}</h2>
|
||||
<Badge>
|
||||
{fmtEntier(rows.length)} fournisseur{rows.length > 1 ? "s" : ""}
|
||||
</Badge>
|
||||
{nbAtteint > 0 && (
|
||||
<Badge ton="succes">
|
||||
{fmtEntier(nbAtteint)} franco{nbAtteint > 1 ? "s" : ""} atteint{nbAtteint > 1 ? "s" : ""}
|
||||
</Badge>
|
||||
)}
|
||||
<span className="text-[13px] text-[var(--text-secondary)]">
|
||||
Montant total proposé :{" "}
|
||||
<span className="font-semibold tabular-nums text-[var(--text-primary)]">{fmtEur2(totalMontant)}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Tableau */}
|
||||
<div className="overflow-x-auto rounded-xl border border-gray-200 bg-white shadow-sm">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
{th("codefou", "Code")}
|
||||
{th("nomfou", "Fournisseur")}
|
||||
{th("nb_articles", "Articles", true)}
|
||||
{th("montant_cde", "Montant CDE auto", true)}
|
||||
{th("franco", "Franco", true)}
|
||||
<th className="px-3 py-2.5 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide">
|
||||
Statut franco
|
||||
</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{sorted.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-3 py-8 text-center text-gray-400">
|
||||
Aucun fournisseur en commande automatique
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{sorted.map(row => {
|
||||
const francoAtteint = row.franco_atteint === true;
|
||||
const hasFranco = row.franco > 0 && row.franco_atteint !== null;
|
||||
return (
|
||||
<tr
|
||||
key={`${row.site}-${row.codefou}`}
|
||||
className={[
|
||||
"transition-colors",
|
||||
francoAtteint
|
||||
? "bg-emerald-50/50 hover:bg-emerald-50"
|
||||
: "hover:bg-gray-50",
|
||||
].join(" ")}
|
||||
>
|
||||
<td className="px-3 py-2.5 font-mono text-xs text-gray-500">{row.codefou}</td>
|
||||
<td className="px-3 py-2.5 font-medium text-gray-900">{row.nomfou}</td>
|
||||
<td className="px-3 py-2.5 text-right tabular-nums text-gray-700">{row.nb_articles}</td>
|
||||
<td className={[
|
||||
"px-3 py-2.5 text-right tabular-nums font-semibold",
|
||||
francoAtteint ? "text-emerald-700" : "text-blue-700",
|
||||
].join(" ")}>
|
||||
{fmt(Number(row.montant_cde))}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-right tabular-nums text-gray-600">
|
||||
{row.franco > 0 ? fmt(Number(row.franco)) : <span className="text-gray-400">—</span>}
|
||||
</td>
|
||||
<td className="px-3 py-2.5">
|
||||
<FrancoCell
|
||||
atteint={row.franco_atteint}
|
||||
ecart={Number(row.ecart_franco)}
|
||||
franco={Number(row.franco)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<DataTable
|
||||
rows={rows}
|
||||
columns={COLONNES}
|
||||
rowKey={(r) => `${r.site}-${r.codefou}`}
|
||||
searchIn={(r) => [r.nomfou, r.codefou]}
|
||||
searchPlaceholder="Rechercher un fournisseur…"
|
||||
filters={FILTRES}
|
||||
pageSize={0}
|
||||
unite="fournisseurs"
|
||||
showFooter
|
||||
initialSort={{ id: "fournisseur", dir: "asc" }}
|
||||
emptyTitle="Aucune proposition pour ce magasin"
|
||||
emptyDescription="FF ne propose aucune commande automatique pour ce magasin en ce moment."
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function CommandesAutoClient({ rows }: { rows: PgCommandeAutoRow[] }) {
|
||||
const bySite = useMemo(() => {
|
||||
const parMagasin = useMemo(() => {
|
||||
const map = new Map<string, PgCommandeAutoRow[]>();
|
||||
for (const r of rows) {
|
||||
if (!map.has(r.site)) map.set(r.site, []);
|
||||
@@ -204,20 +192,19 @@ export function CommandesAutoClient({ rows }: { rows: PgCommandeAutoRow[] }) {
|
||||
|
||||
if (rows.length === 0) {
|
||||
return (
|
||||
<div className="rounded-xl border border-gray-200 bg-white p-12 text-center text-gray-400 shadow-sm">
|
||||
Aucune commande automatique trouvée.
|
||||
</div>
|
||||
<EmptyState
|
||||
icon={ShoppingCart}
|
||||
title="Aucune proposition de commande"
|
||||
description="FF ne propose aucune commande automatique pour le moment. Si vous en attendiez, le serveur FF est peut-être momentanément indisponible : rechargez la page dans quelques minutes."
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{SITES.map(({ code, label }) => {
|
||||
const siteRows = bySite.get(code) ?? [];
|
||||
return (
|
||||
<StoreTable key={code} site={code} label={label} rows={siteRows} />
|
||||
);
|
||||
})}
|
||||
<div className="space-y-10">
|
||||
{MAGASINS.map((m) => (
|
||||
<SectionMagasin key={m.code} nom={nomMagasin(m.code)} rows={parMagasin.get(m.code) ?? []} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import LoadingModal from "@/components/shared/loading-modal";
|
||||
import { PageSkeleton } from "@/components/ui/states";
|
||||
|
||||
export default function CommandesAutoLoading() {
|
||||
return <LoadingModal message="Chargement des données" subMessage="Récupération des commandes automatiques..." />;
|
||||
/** Silhouette de la page pendant le chargement, sans bloquer l'écran. */
|
||||
export default function Loading() {
|
||||
return <PageSkeleton rows={8} />;
|
||||
}
|
||||
@@ -1,25 +1,42 @@
|
||||
import type { Metadata } from "next";
|
||||
import { ShoppingCart } from "lucide-react";
|
||||
import { pgGetCommandesAuto, type PgCommandeAutoRow } from "@/lib/pg-ff-client";
|
||||
import { listCadences, getFournisseursPourCadence } from "@/features/commandes-auto/actions";
|
||||
import { CommandesAutoTabs } from "./tabs";
|
||||
import { PageHeader } from "@/components/ui/page-header";
|
||||
import { CommandesAutoTabs, type Onglet } from "./tabs";
|
||||
import { cachedFF } from "@/lib/ff-cache";
|
||||
|
||||
export type { PgCommandeAutoRow };
|
||||
|
||||
export const metadata: Metadata = { title: "Commandes fournisseurs" };
|
||||
|
||||
// Données live (DB + API FF Nancy) : rendu à la requête, jamais prérendu au build.
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function CommandesAutoPage() {
|
||||
export default async function CommandesAutoPage(props: { searchParams: Promise<{ onglet?: string | string[] }> }) {
|
||||
const { onglet } = await props.searchParams;
|
||||
const ongletInitial: Onglet = onglet === "cadencier" ? "cadencier" : "propositions";
|
||||
|
||||
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(),
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 p-6">
|
||||
<div className="mx-auto max-w-screen-2xl">
|
||||
<h1 className="mb-6 text-3xl font-bold text-gray-900">Commandes automatiques</h1>
|
||||
<CommandesAutoTabs rows={rows} cadences={cadences} fournisseurs={fournisseurs} />
|
||||
</div>
|
||||
<div className="mx-auto w-full max-w-screen-2xl">
|
||||
<PageHeader
|
||||
icon={ShoppingCart}
|
||||
title="Commandes fournisseurs"
|
||||
description="Propositions de commande automatique par magasin, et rappels selon le rythme de commande choisi pour chaque fournisseur."
|
||||
/>
|
||||
<CommandesAutoTabs initial={ongletInitial} rows={rows} cadences={cadences} fournisseurs={fournisseurs} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,56 +1,51 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ShoppingCart, CalendarClock } from "lucide-react";
|
||||
import { Tabs, useUrlTab } from "@/components/ui/tabs";
|
||||
import { CommandesAutoClient } from "./client";
|
||||
import { CadencierClient } from "./cadencier-client";
|
||||
import type { PgCommandeAutoRow } from "./page";
|
||||
import type { CadenceView } from "@/features/commandes-auto/actions";
|
||||
|
||||
type TabKey = "propositions" | "cadencier";
|
||||
export type Onglet = "propositions" | "cadencier";
|
||||
|
||||
export function CommandesAutoTabs({
|
||||
initial,
|
||||
rows,
|
||||
cadences,
|
||||
fournisseurs,
|
||||
}: {
|
||||
initial: Onglet;
|
||||
rows: PgCommandeAutoRow[];
|
||||
cadences: CadenceView[];
|
||||
fournisseurs: { code: string; nom: string }[];
|
||||
}) {
|
||||
const [tab, setTab] = useState<TabKey>("propositions");
|
||||
const [onglet, setOnglet] = useUrlTab<Onglet>("onglet", initial);
|
||||
|
||||
const nbACommander = cadences.filter((c) => c.actif && c.statut === "a_commander").length;
|
||||
|
||||
const tabBtn = (key: TabKey, label: string, Icon: typeof ShoppingCart, badge?: number) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTab(key)}
|
||||
className={[
|
||||
"inline-flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-semibold transition-colors",
|
||||
tab === key
|
||||
? "border-blue-600 text-blue-700"
|
||||
: "border-transparent text-gray-500 hover:text-gray-800",
|
||||
].join(" ")}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
{label}
|
||||
{badge != null && badge > 0 && (
|
||||
<span className="rounded-full bg-red-100 px-2 py-0.5 text-xs font-bold text-red-700">
|
||||
{badge}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
const onglets = [
|
||||
{ value: "propositions", label: "Propositions de commande", icon: ShoppingCart },
|
||||
{
|
||||
value: "cadencier",
|
||||
label: (
|
||||
<>
|
||||
Rythme de commande
|
||||
{nbACommander > 0 && <span className="sr-only"> (commandes à passer)</span>}
|
||||
</>
|
||||
),
|
||||
icon: CalendarClock,
|
||||
// Pastille rouge : nombre de commandes à passer (masquée s'il n'y en a aucune).
|
||||
count: nbACommander > 0 ? nbACommander : undefined,
|
||||
alert: true,
|
||||
},
|
||||
] as const;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex gap-2 border-b border-gray-200">
|
||||
{tabBtn("propositions", "Propositions", ShoppingCart)}
|
||||
{tabBtn("cadencier", "Cadencier / Alertes", CalendarClock, nbACommander)}
|
||||
</div>
|
||||
<Tabs items={onglets} value={onglet} onChange={setOnglet} />
|
||||
|
||||
{tab === "propositions" ? (
|
||||
{onglet === "propositions" ? (
|
||||
<CommandesAutoClient rows={rows} />
|
||||
) : (
|
||||
<CadencierClient cadences={cadences} fournisseurs={fournisseurs} />
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import LoadingModal from "@/components/shared/loading-modal";
|
||||
import { PageSkeleton } from "@/components/ui/states";
|
||||
|
||||
export default function DashboardLoading() {
|
||||
return <LoadingModal message="Chargement des données" subMessage="Récupération du tableau de bord..." />;
|
||||
/** Silhouette de la page pendant le chargement, sans bloquer l'écran. */
|
||||
export default function Loading() {
|
||||
return <PageSkeleton cards={4} rows={6} />;
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,28 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { RotateCcw } from "lucide-react";
|
||||
import { ErrorState } from "@/components/ui/states";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
/**
|
||||
* Erreur inattendue dans une page : message compréhensible et bouton pour
|
||||
* réessayer, au lieu de l'écran d'erreur générique de Next.js. Le menu et
|
||||
* l'en-tête restent utilisables.
|
||||
*/
|
||||
export default function DashboardError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||||
useEffect(() => {
|
||||
console.error("[page] erreur non rattrapée :", error);
|
||||
}, [error]);
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-3xl py-10">
|
||||
<ErrorState
|
||||
title="Cette page n'a pas pu s'afficher"
|
||||
description="Un problème est survenu pendant le chargement des données. Réessayez ; si l'erreur revient, prévenez un administrateur."
|
||||
detail={error.digest ? `${error.message}\nRéférence : ${error.digest}` : error.message}
|
||||
action={<Button onClick={reset}><RotateCcw /> Réessayer</Button>}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import LoadingModal from "@/components/shared/loading-modal";
|
||||
|
||||
export default function ExportsLoading() {
|
||||
return <LoadingModal message="Chargement des données" subMessage="Récupération des exports..." />;
|
||||
}
|
||||
@@ -1,24 +1,6 @@
|
||||
import { SnapshotList } from "@/features/snapshots/components/snapshot-list";
|
||||
import { FileDown } from "lucide-react";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
/** Ancienne adresse, conservée pour les favoris : voir /historique. */
|
||||
export default function ExportsPage() {
|
||||
return (
|
||||
<div className="space-y-8 max-w-6xl mx-auto px-4 py-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="w-10 h-10 rounded-xl bg-[var(--accent-bg)] border border-[var(--accent-border)] flex items-center justify-center">
|
||||
<FileDown className="w-5 h-5 text-[var(--accent)]" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-black tracking-tight text-[var(--text-primary)] uppercase">Historique d'Arbitrage</h1>
|
||||
</div>
|
||||
<p className="text-sm text-[var(--text-secondary)] max-w-xl">
|
||||
Retrouvez ici toutes vos sessions sauvegardées et exports réalisés. Vous pouvez restaurer une session pour reprendre votre travail ou supprimer les anciens enregistrements.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SnapshotList type="export" />
|
||||
</div>
|
||||
);
|
||||
redirect("/historique?vue=exports");
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import LoadingModal from "@/components/shared/loading-modal";
|
||||
import { PageSkeleton } from "@/components/ui/states";
|
||||
|
||||
export default function GridLoading() {
|
||||
return <LoadingModal message="Chargement des données" subMessage="Récupération des articles et calcul des scores..." />;
|
||||
/** Silhouette de la page pendant le chargement, sans bloquer l'écran. */
|
||||
export default function Loading() {
|
||||
return <PageSkeleton rows={12} />;
|
||||
}
|
||||
@@ -1,7 +1,11 @@
|
||||
import type { Metadata } from "next";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { getFournisseurs, getMagasins } from "@/features/grid/actions";
|
||||
import { GridClient } from "@/features/grid/components/grid-client";
|
||||
import { SupplierSelectionLanding } from "@/features/grid/components/supplier-selection-landing";
|
||||
|
||||
export const metadata: Metadata = { title: "Révision d'assortiment" };
|
||||
|
||||
interface GridPageProps {
|
||||
searchParams: Promise<{
|
||||
fournisseur?: string;
|
||||
@@ -23,11 +27,13 @@ export default async function GridPage({ searchParams }: GridPageProps) {
|
||||
code3: params.code3 ? String(params.code3).split(",").filter(Boolean) : null,
|
||||
};
|
||||
|
||||
// 1. Fetch available suppliers & stores
|
||||
const [fournisseurs, magasins] = await Promise.all([
|
||||
// 1. Fetch available suppliers & stores (et les droits, lus une fois côté serveur)
|
||||
const [fournisseurs, magasins, session] = await Promise.all([
|
||||
getFournisseurs(),
|
||||
getMagasins(),
|
||||
auth(),
|
||||
]);
|
||||
const isAdmin = (session?.user as { role?: string } | undefined)?.role === "admin";
|
||||
|
||||
// 2. If no supplier selected, show compact selection UI
|
||||
if (!codeFournisseur) {
|
||||
@@ -44,6 +50,7 @@ export default async function GridPage({ searchParams }: GridPageProps) {
|
||||
magasins={magasins}
|
||||
magasin={magasin}
|
||||
filters={filters}
|
||||
isAdmin={isAdmin}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import type { Metadata } from "next";
|
||||
import { History } from "lucide-react";
|
||||
import { PageHeader } from "@/components/ui/page-header";
|
||||
import { HistoriqueTabs } from "./tabs";
|
||||
|
||||
export const metadata: Metadata = { title: "Historique" };
|
||||
|
||||
/**
|
||||
* Historique des sessions de révision et des exports Excel.
|
||||
*
|
||||
* Remplace les pages « Snapshots » et « Exports », qui affichaient la même liste
|
||||
* filtrée différemment (et dont la seconde s'intitulait « Historique d'arbitrage »).
|
||||
* Chacun ne voit que ses propres enregistrements.
|
||||
*/
|
||||
export default async function HistoriquePage(props: { searchParams: Promise<{ vue?: string }> }) {
|
||||
const { vue } = await props.searchParams;
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-6xl">
|
||||
<PageHeader
|
||||
icon={History}
|
||||
title="Historique"
|
||||
description="Vos sessions de révision enregistrées et vos exports Excel. Rouvrez une session pour reprendre les modifications de gammes là où vous les aviez laissées."
|
||||
/>
|
||||
<HistoriqueTabs initial={vue === "exports" ? "exports" : "sessions"} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
"use client";
|
||||
|
||||
import { FileDown, Save } from "lucide-react";
|
||||
import { Tabs, useUrlTab } from "@/components/ui/tabs";
|
||||
import { SnapshotList } from "@/features/snapshots/components/snapshot-list";
|
||||
|
||||
type Vue = "sessions" | "exports";
|
||||
|
||||
const ONGLETS = [
|
||||
{ value: "sessions", label: "Sessions enregistrées", icon: Save },
|
||||
{ value: "exports", label: "Exports Excel", icon: FileDown },
|
||||
] as const;
|
||||
|
||||
export function HistoriqueTabs({ initial }: { initial: Vue }) {
|
||||
const [vue, setVue] = useUrlTab<Vue>("vue", initial);
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<Tabs items={ONGLETS} value={vue} onChange={setVue} />
|
||||
{/* `key` : chaque onglet recharge sa propre liste. */}
|
||||
<SnapshotList key={vue} type={vue === "exports" ? "export" : "snapshot"} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,380 +1,281 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState, useMemo } from "react";
|
||||
import * as XLSX from "xlsx";
|
||||
import { useState, useTransition, type ReactNode } from "react";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { DataTable, type DataColumn, type DataFilter } from "@/components/ui/data-table";
|
||||
import { Input, Label } from "@/components/ui/form-controls";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { MAGASINS, nomMagasin } from "@/lib/magasins";
|
||||
import { fmtDecimal1, fmtEntier, fmtEur0 } from "@/lib/format";
|
||||
import { couleurMarge } from "@/lib/marge";
|
||||
import { telechargerExcel } from "@/lib/export-excel";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { HitParadePivotRow } from "./page";
|
||||
|
||||
type SortKey = "caTotal" | "ca292" | "ca579" | "qteTotal" | "qte292" | "qte579" | "stockTotal" | "stock292" | "stock579";
|
||||
type SortDir = "desc" | "asc";
|
||||
type Ligne = HitParadePivotRow;
|
||||
|
||||
const DEFAULT_SORT: SortKey = "caTotal";
|
||||
const DEFAULT_DIR: SortDir = "desc";
|
||||
/** Champs numériques de la ligne pivotée. */
|
||||
type Champ = { [K in keyof Ligne]: Ligne[K] extends number ? K : never }[keyof Ligne];
|
||||
|
||||
function formatCA(v: number) {
|
||||
return new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }).format(v);
|
||||
interface Groupe {
|
||||
id: string;
|
||||
/** Nom affiché au-dessus des colonnes du groupe. */
|
||||
titre: string;
|
||||
/** Nom complet, pour les infobulles et l'export. */
|
||||
nom: string;
|
||||
qte: Champ;
|
||||
ca: Champ;
|
||||
marge: Champ;
|
||||
stock: Champ;
|
||||
}
|
||||
function formatQte(v: number) {
|
||||
return new Intl.NumberFormat("fr-FR", { maximumFractionDigits: 0 }).format(v);
|
||||
|
||||
/** Champs de la ligne pivotée pour chaque magasin (la requête en fournit un jeu par magasin). */
|
||||
const CHAMPS_MAGASIN: Record<string, Pick<Groupe, "qte" | "ca" | "marge" | "stock">> = {
|
||||
"292": { qte: "qte292", ca: "ca292", marge: "marge292", stock: "stock292" },
|
||||
"579": { qte: "qte579", ca: "ca579", marge: "marge579", stock: "stock579" },
|
||||
};
|
||||
|
||||
const GROUPES: Groupe[] = [
|
||||
...MAGASINS.filter(m => CHAMPS_MAGASIN[m.code]).map(m => ({
|
||||
id: m.code,
|
||||
titre: nomMagasin(m.code),
|
||||
nom: nomMagasin(m.code),
|
||||
...CHAMPS_MAGASIN[m.code],
|
||||
})),
|
||||
{ id: "total", titre: "Total nos magasins", nom: "nos magasins", qte: "qteTotal", ca: "caTotal", marge: "margeTotal", stock: "stockTotal" },
|
||||
];
|
||||
|
||||
const somme = (rows: readonly Ligne[], champ: Champ) => rows.reduce((acc, r) => acc + r[champ], 0);
|
||||
|
||||
/** Taux de marge en %, `null` sans chiffre d'affaires. */
|
||||
const tauxMarge = (ca: number, marge: number) => (ca > 0 ? (marge / ca) * 100 : null);
|
||||
|
||||
const famille = (r: Ligne) => (r.nomenclature_code ? `${r.nomenclature_code} — ${r.nomenclature}` : "Sans famille");
|
||||
|
||||
const vide = <span className="text-[var(--text-muted)]">—</span>;
|
||||
|
||||
function CelluleMarge({ taux }: { taux: number | null }) {
|
||||
if (taux === null) return vide;
|
||||
return <span className="font-medium" style={{ color: couleurMarge(taux) }}>{fmtDecimal1(taux)} %</span>;
|
||||
}
|
||||
function formatPct(ca: number, marge: number) {
|
||||
if (ca === 0) return "—";
|
||||
return ((marge / ca) * 100).toFixed(1) + " %";
|
||||
|
||||
function CelluleStock({ v }: { v: number }) {
|
||||
return (
|
||||
<span className={cn(v < 0 ? "font-semibold text-[var(--accent-error)]" : v === 0 ? "text-[var(--text-muted)]" : undefined)}>
|
||||
{fmtEntier(v)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** En-tête sur deux lignes : magasin au-dessus, mesure en dessous. */
|
||||
function EnTete({ groupe, children }: { groupe: string; children: ReactNode }) {
|
||||
return (
|
||||
<span className="flex flex-col items-end leading-tight">
|
||||
<span className="text-xs font-normal text-[var(--text-muted)]">{groupe}</span>
|
||||
<span>{children}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function colonnesGroupe(g: Groupe): DataColumn<Ligne>[] {
|
||||
const total = g.id === "total";
|
||||
const bord = "border-l border-[var(--border)]";
|
||||
return [
|
||||
{
|
||||
id: `${g.id}-qte`,
|
||||
header: <EnTete groupe={g.titre}>Qté</EnTete>,
|
||||
hint: `Quantité vendue (${g.nom}) sur la période, retours déduits`,
|
||||
align: "right",
|
||||
sortValue: r => r[g.qte],
|
||||
cell: r => (r[g.qte] !== 0 ? fmtEntier(r[g.qte]) : vide),
|
||||
footer: rows => fmtEntier(somme(rows, g.qte)),
|
||||
className: cn(bord, total && "font-semibold"),
|
||||
headerClassName: bord,
|
||||
},
|
||||
{
|
||||
id: `${g.id}-ca`,
|
||||
header: <EnTete groupe={g.titre}>CA TTC</EnTete>,
|
||||
hint: `Chiffre d'affaires TTC (${g.nom}) sur la période, retours déduits`,
|
||||
align: "right",
|
||||
sortValue: r => r[g.ca],
|
||||
cell: r => (r[g.ca] !== 0 ? fmtEur0(r[g.ca]) : vide),
|
||||
footer: rows => fmtEur0(somme(rows, g.ca)),
|
||||
className: cn("whitespace-nowrap", total && "font-semibold"),
|
||||
},
|
||||
{
|
||||
id: `${g.id}-marge`,
|
||||
header: <EnTete groupe={g.titre}>% marge</EnTete>,
|
||||
hint: `Taux de marge (${g.nom}) : marge divisée par le chiffre d'affaires TTC`,
|
||||
align: "right",
|
||||
sortValue: r => tauxMarge(r[g.ca], r[g.marge]),
|
||||
cell: r => <CelluleMarge taux={tauxMarge(r[g.ca], r[g.marge])} />,
|
||||
footer: rows => <CelluleMarge taux={tauxMarge(somme(rows, g.ca), somme(rows, g.marge))} />,
|
||||
className: "whitespace-nowrap",
|
||||
},
|
||||
{
|
||||
id: `${g.id}-stock`,
|
||||
header: <EnTete groupe={g.titre}>Stock</EnTete>,
|
||||
hint: `Stock actuel (${g.nom}). En rouge : stock négatif`,
|
||||
align: "right",
|
||||
sortValue: r => r[g.stock],
|
||||
cell: r => <CelluleStock v={r[g.stock]} />,
|
||||
footer: rows => fmtEntier(somme(rows, g.stock)),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const COLONNES: DataColumn<Ligne>[] = [
|
||||
{
|
||||
id: "codein",
|
||||
header: "Code",
|
||||
sortValue: r => r.codein,
|
||||
cell: r => <span className="font-mono text-[13px] text-[var(--text-secondary)]">{r.codein}</span>,
|
||||
footer: () => "Total",
|
||||
className: "whitespace-nowrap",
|
||||
},
|
||||
{
|
||||
id: "libelle",
|
||||
header: "Désignation",
|
||||
sortValue: r => r.libelle.trim(),
|
||||
cell: r => <span className="font-medium">{r.libelle.trim()}</span>,
|
||||
footer: rows => <span className="whitespace-nowrap">{fmtEntier(rows.length)} articles</span>,
|
||||
className: "min-w-[220px]",
|
||||
},
|
||||
{
|
||||
id: "fournisseur",
|
||||
header: "Fournisseur",
|
||||
sortValue: r => r.fournisseur,
|
||||
cell: r => <span className="text-[13px] text-[var(--text-secondary)]">{r.fournisseur}</span>,
|
||||
className: "whitespace-nowrap",
|
||||
},
|
||||
{
|
||||
id: "famille",
|
||||
header: "Famille",
|
||||
hint: "Famille de produits (nomenclature FF)",
|
||||
sortValue: famille,
|
||||
cell: r =>
|
||||
r.nomenclature_code ? (
|
||||
<span className="text-[13px] text-[var(--text-secondary)]" title={famille(r)}>
|
||||
<span className="font-mono text-[var(--text-muted)]">{r.nomenclature_code}</span> {r.nomenclature}
|
||||
</span>
|
||||
) : vide,
|
||||
className: "min-w-[160px]",
|
||||
},
|
||||
...GROUPES.flatMap(colonnesGroupe),
|
||||
];
|
||||
|
||||
const FILTRES: DataFilter<Ligne>[] = [
|
||||
{ id: "fournisseur", label: "Fournisseur", valueOf: r => r.fournisseur, allLabel: "Tous les fournisseurs" },
|
||||
{ id: "famille", label: "Famille", valueOf: famille, allLabel: "Toutes les familles" },
|
||||
];
|
||||
|
||||
const recherche = (r: Ligne) => [r.codein, r.libelle];
|
||||
|
||||
interface Props {
|
||||
dateDebut: string;
|
||||
dateFin: string;
|
||||
pivotted: HitParadePivotRow[];
|
||||
}
|
||||
|
||||
function ColHeader({
|
||||
label,
|
||||
sortable,
|
||||
group,
|
||||
sortKey,
|
||||
sortDir,
|
||||
onSort,
|
||||
}: {
|
||||
label: string;
|
||||
sortable?: SortKey;
|
||||
group?: "292" | "579" | "total";
|
||||
sortKey: SortKey;
|
||||
sortDir: SortDir;
|
||||
onSort: (key: SortKey) => void;
|
||||
}) {
|
||||
const isActive = sortable && sortKey === sortable;
|
||||
const groupBg = group === "292" ? "bg-blue-50" : group === "579" ? "bg-violet-50" : group === "total" ? "bg-emerald-50" : "";
|
||||
const activeBg = group === "292" ? "bg-blue-100 text-blue-700" : group === "579" ? "bg-violet-100 text-violet-700" : group === "total" ? "bg-emerald-100 text-emerald-700" : "bg-blue-50 text-blue-700";
|
||||
return (
|
||||
<th
|
||||
onClick={sortable ? () => onSort(sortable) : undefined}
|
||||
className={[
|
||||
"px-2 py-2 text-center text-xs font-semibold whitespace-nowrap select-none",
|
||||
sortable ? "cursor-pointer" : "",
|
||||
isActive ? activeBg : `${groupBg} text-gray-600`,
|
||||
].join(" ")}
|
||||
>
|
||||
{label}
|
||||
{sortable && (
|
||||
<span className="ml-1 inline-block w-3 text-center">
|
||||
{isActive ? (sortDir === "desc" ? "↓" : "↑") : <span className="text-gray-300">↕</span>}
|
||||
</span>
|
||||
)}
|
||||
</th>
|
||||
);
|
||||
}
|
||||
|
||||
export function HitParadeClient({ dateDebut, dateFin, pivotted }: Props) {
|
||||
const router = useRouter();
|
||||
const [sortKey, setSortKey] = useState<SortKey>(DEFAULT_SORT);
|
||||
const [sortDir, setSortDir] = useState<SortDir>(DEFAULT_DIR);
|
||||
const [filterFournisseur, setFilterFournisseur] = useState<string>("Tous");
|
||||
const [filterNomenclature, setFilterNomenclature] = useState<string>("Tous");
|
||||
const [navigation, demarrerNavigation] = useTransition();
|
||||
|
||||
// Dates locales pour les inputs (évite rechargement à chaque frappe)
|
||||
const [localDebut, setLocalDebut] = useState(dateDebut);
|
||||
const [localFin, setLocalFin] = useState(dateFin);
|
||||
|
||||
const fournisseurs = useMemo(() => {
|
||||
const set = new Set(pivotted.map(r => r.fournisseur));
|
||||
return ["Tous", ...Array.from(set).sort((a, b) => a.localeCompare(b, "fr"))];
|
||||
}, [pivotted]);
|
||||
|
||||
const nomenclatures = useMemo(() => {
|
||||
const map = new Map<string, string>(); // code → libelle
|
||||
for (const r of pivotted) map.set(r.nomenclature_code, r.nomenclature);
|
||||
const entries = Array.from(map.entries()).sort((a, b) => a[0].localeCompare(b[0], "fr"));
|
||||
return [{ code: "Tous", libelle: "Tous" }, ...entries.map(([code, libelle]) => ({ code, libelle }))];
|
||||
}, [pivotted]);
|
||||
|
||||
function handleSort(key: SortKey) {
|
||||
if (sortKey === key) {
|
||||
setSortDir(d => d === "desc" ? "asc" : "desc");
|
||||
} else {
|
||||
setSortKey(key);
|
||||
setSortDir("desc");
|
||||
}
|
||||
}
|
||||
|
||||
function resetSort() {
|
||||
setSortKey(DEFAULT_SORT);
|
||||
setSortDir(DEFAULT_DIR);
|
||||
}
|
||||
const periodeInvalide = Boolean(localDebut && localFin && localDebut > localFin);
|
||||
|
||||
function applyDates() {
|
||||
if (localDebut && localFin) {
|
||||
router.push(`/hit-parade?debut=${localDebut}&fin=${localFin}`);
|
||||
if (localDebut && localFin && !periodeInvalide) {
|
||||
demarrerNavigation(() => {
|
||||
router.push(`/hit-parade?debut=${localDebut}&fin=${localFin}`);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const isSorted = sortKey !== DEFAULT_SORT || sortDir !== DEFAULT_DIR;
|
||||
|
||||
const filtered = useMemo(() =>
|
||||
pivotted.filter(r =>
|
||||
(filterFournisseur === "Tous" || r.fournisseur === filterFournisseur) &&
|
||||
(filterNomenclature === "Tous" || r.nomenclature_code === filterNomenclature)
|
||||
),
|
||||
[pivotted, filterFournisseur, filterNomenclature]
|
||||
);
|
||||
|
||||
const sorted = useMemo(() =>
|
||||
[...filtered].sort((a, b) => {
|
||||
const diff = a[sortKey] - b[sortKey];
|
||||
return sortDir === "desc" ? -diff : diff;
|
||||
}),
|
||||
[filtered, sortKey, sortDir]
|
||||
);
|
||||
|
||||
const totals = useMemo(() => sorted.reduce(
|
||||
(acc, r) => ({
|
||||
qte292: acc.qte292 + r.qte292, ca292: acc.ca292 + r.ca292, marge292: acc.marge292 + r.marge292,
|
||||
qte579: acc.qte579 + r.qte579, ca579: acc.ca579 + r.ca579, marge579: acc.marge579 + r.marge579,
|
||||
qteTotal: acc.qteTotal + r.qteTotal, caTotal: acc.caTotal + r.caTotal, margeTotal: acc.margeTotal + r.margeTotal,
|
||||
stock292: acc.stock292 + r.stock292, stock579: acc.stock579 + r.stock579, stockTotal: acc.stockTotal + r.stockTotal,
|
||||
}),
|
||||
{ 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() {
|
||||
const headers = [
|
||||
"Code", "Désignation", "Fournisseur", "Nomenclature",
|
||||
"Qté Nancy", "CA TTC Nancy", "% Marge Nancy", "Stock Nancy",
|
||||
"Qté Houdemont", "CA TTC Houdemont", "% Marge Houdemont", "Stock Houdemont",
|
||||
"Qté Total", "CA TTC Total", "% Marge Total", "Stock Total",
|
||||
];
|
||||
|
||||
async function exportToExcel(rows: readonly Ligne[]) {
|
||||
const pct = (ca: number, marge: number) => ca === 0 ? 0 : Math.round((marge / ca) * 1000) / 10;
|
||||
const nomExport = (g: Groupe) => (g.id === "total" ? "Total" : g.nom);
|
||||
|
||||
const dataRows = sorted.map(r => [
|
||||
r.codein,
|
||||
r.libelle.trim(),
|
||||
r.fournisseur,
|
||||
r.nomenclature_code ? `${r.nomenclature_code} — ${r.nomenclature}` : "",
|
||||
r.qte292, r.ca292, pct(r.ca292, r.marge292), r.stock292,
|
||||
r.qte579, r.ca579, pct(r.ca579, r.marge579), r.stock579,
|
||||
r.qteTotal, r.caTotal, pct(r.caTotal, r.margeTotal), r.stockTotal,
|
||||
]);
|
||||
|
||||
const totalRow = [
|
||||
`TOTAL — ${sorted.length} articles`, "", "", "",
|
||||
totals.qte292, totals.ca292, pct(totals.ca292, totals.marge292), totals.stock292,
|
||||
totals.qte579, totals.ca579, pct(totals.ca579, totals.marge579), totals.stock579,
|
||||
totals.qteTotal, totals.caTotal, pct(totals.caTotal, totals.margeTotal), totals.stockTotal,
|
||||
];
|
||||
|
||||
const ws = XLSX.utils.aoa_to_sheet([headers, ...dataRows, totalRow]);
|
||||
|
||||
// Largeurs de colonnes
|
||||
ws["!cols"] = [
|
||||
{ wch: 12 }, { wch: 40 }, { wch: 25 }, { wch: 30 },
|
||||
{ wch: 10 }, { wch: 14 }, { wch: 12 }, { wch: 10 },
|
||||
{ wch: 10 }, { wch: 14 }, { wch: 12 }, { wch: 10 },
|
||||
{ wch: 10 }, { wch: 14 }, { wch: 12 }, { wch: 10 },
|
||||
];
|
||||
|
||||
const wb = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(wb, ws, "Hit Parade");
|
||||
XLSX.writeFile(wb, `hit-parade_${dateDebut}_${dateFin}.xlsx`);
|
||||
await telechargerExcel({
|
||||
feuille: "Meilleures ventes",
|
||||
fichier: `meilleures-ventes_${dateDebut}_${dateFin}`,
|
||||
entetes: [
|
||||
"Code", "Désignation", "Fournisseur", "Nomenclature",
|
||||
...GROUPES.flatMap(g => [
|
||||
`Qté ${nomExport(g)}`, `CA TTC ${nomExport(g)}`, `% Marge ${nomExport(g)}`, `Stock ${nomExport(g)}`,
|
||||
]),
|
||||
],
|
||||
largeurs: [12, 40, 25, 30, ...GROUPES.flatMap(() => [10, 14, 12, 10])],
|
||||
lignes: rows.map(r => [
|
||||
r.codein,
|
||||
r.libelle.trim(),
|
||||
r.fournisseur,
|
||||
r.nomenclature_code ? `${r.nomenclature_code} — ${r.nomenclature}` : "",
|
||||
...GROUPES.flatMap(g => [r[g.qte], r[g.ca], pct(r[g.ca], r[g.marge]), r[g.stock]]),
|
||||
]),
|
||||
totaux: [
|
||||
`TOTAL — ${rows.length} articles`, "", "", "",
|
||||
...GROUPES.flatMap(g => {
|
||||
const ca = somme(rows, g.ca);
|
||||
return [somme(rows, g.qte), ca, pct(ca, somme(rows, g.marge)), somme(rows, g.stock)];
|
||||
}),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Barre de contrôles */}
|
||||
<div className="flex flex-wrap items-end gap-4 rounded-xl bg-white px-5 py-4 shadow-sm border border-gray-100">
|
||||
{/* Période */}
|
||||
<div className="flex items-end gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-semibold text-gray-500">Du</label>
|
||||
<input
|
||||
type="date"
|
||||
value={localDebut}
|
||||
onChange={e => setLocalDebut(e.target.value)}
|
||||
className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-semibold text-gray-500">Au</label>
|
||||
<input
|
||||
type="date"
|
||||
value={localFin}
|
||||
onChange={e => setLocalFin(e.target.value)}
|
||||
className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={applyDates}
|
||||
className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 transition-colors"
|
||||
>
|
||||
Appliquer
|
||||
</button>
|
||||
<div className="space-y-4" aria-busy={navigation}>
|
||||
{/* Période (relance le calcul côté serveur) */}
|
||||
<div className="flex flex-wrap items-end gap-3">
|
||||
<div>
|
||||
<Label htmlFor="hit-parade-debut">Du</Label>
|
||||
<Input
|
||||
id="hit-parade-debut"
|
||||
type="date"
|
||||
value={localDebut}
|
||||
onChange={e => setLocalDebut(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-8 w-px bg-gray-200 self-center" />
|
||||
|
||||
{/* Filtre fournisseur */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-semibold text-gray-500">Fournisseur</label>
|
||||
<select
|
||||
value={filterFournisseur}
|
||||
onChange={e => setFilterFournisseur(e.target.value)}
|
||||
className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 min-w-[200px]"
|
||||
>
|
||||
{fournisseurs.map(f => (
|
||||
<option key={f} value={f}>{f}</option>
|
||||
))}
|
||||
</select>
|
||||
<div>
|
||||
<Label htmlFor="hit-parade-fin">Au</Label>
|
||||
<Input
|
||||
id="hit-parade-fin"
|
||||
type="date"
|
||||
value={localFin}
|
||||
onChange={e => setLocalFin(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-8 w-px bg-gray-200 self-center" />
|
||||
|
||||
{/* Filtre nomenclature */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-semibold text-gray-500">Nomenclature</label>
|
||||
<select
|
||||
value={filterNomenclature}
|
||||
onChange={e => setFilterNomenclature(e.target.value)}
|
||||
className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 min-w-[200px]"
|
||||
>
|
||||
{nomenclatures.map(n => (
|
||||
<option key={n.code} value={n.code}>
|
||||
{n.code === "Tous" ? "Tous" : `${n.code} — ${n.libelle}`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="h-8 w-px bg-gray-200 self-center" />
|
||||
|
||||
<span className="rounded-full bg-gray-100 px-3 py-1 text-sm font-medium text-gray-600 self-center">
|
||||
{sorted.length} produits
|
||||
</span>
|
||||
|
||||
{isSorted && (
|
||||
<button
|
||||
onClick={resetSort}
|
||||
className="flex items-center gap-1.5 rounded-lg border border-orange-200 bg-orange-50 px-3 py-1.5 text-sm font-medium text-orange-700 hover:bg-orange-100 transition-colors self-center"
|
||||
>
|
||||
<span>✕</span> Annuler le tri
|
||||
</button>
|
||||
<Button onClick={applyDates} disabled={navigation || !localDebut || !localFin || periodeInvalide}>
|
||||
{navigation && <Loader2 className="animate-spin" aria-hidden />}
|
||||
{navigation ? "Chargement…" : "Appliquer"}
|
||||
</Button>
|
||||
{periodeInvalide && (
|
||||
<p role="alert" className="flex h-9 items-center text-[13px] text-[var(--accent-error)]">
|
||||
La date de début doit précéder la date de fin.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={exportToExcel}
|
||||
className="ml-auto flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-500 transition-colors self-center"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Exporter Excel
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tableau */}
|
||||
<div className="overflow-x-auto rounded-xl bg-white shadow-sm border border-gray-100">
|
||||
<table className="w-full border-collapse text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className="w-20 border-b-2 border-gray-200 bg-gray-50 px-2 py-3 text-left text-xs font-semibold text-gray-600 align-bottom">Code</th>
|
||||
<th rowSpan={2} className="border-b-2 border-gray-200 bg-gray-50 px-2 py-3 text-left text-xs font-semibold text-gray-600 align-bottom">Désignation</th>
|
||||
<th rowSpan={2} className="border-b-2 border-gray-200 bg-gray-50 px-2 py-3 text-left text-xs font-semibold text-gray-600 align-bottom">Fournisseur</th>
|
||||
<th rowSpan={2} className="border-b-2 border-gray-200 bg-gray-50 px-2 py-3 text-left text-xs font-semibold text-gray-600 align-bottom">Nom.</th>
|
||||
<th colSpan={4} className="border-b border-l-2 border-blue-200 bg-blue-50 px-4 py-2 text-center text-xs font-bold text-blue-700 tracking-wide">
|
||||
Frouard / Nancy — 292
|
||||
</th>
|
||||
<th colSpan={4} className="border-b border-l-2 border-violet-200 bg-violet-50 px-4 py-2 text-center text-xs font-bold text-violet-700 tracking-wide">
|
||||
Houdemont — 579
|
||||
</th>
|
||||
<th colSpan={4} className="border-b border-l-2 border-emerald-200 bg-emerald-50 px-4 py-2 text-center text-xs font-bold text-emerald-700 tracking-wide">
|
||||
Total Réseau
|
||||
</th>
|
||||
</tr>
|
||||
<tr className="border-b-2 border-gray-200">
|
||||
<ColHeader label="Qté" sortable="qte292" group="292" sortKey={sortKey} sortDir={sortDir} onSort={handleSort} />
|
||||
<ColHeader label="CA TTC" sortable="ca292" group="292" sortKey={sortKey} sortDir={sortDir} onSort={handleSort} />
|
||||
<th className="bg-blue-50 px-2 py-2 text-center text-xs font-semibold text-blue-500">% Marge</th>
|
||||
<ColHeader label="Stock" sortable="stock292" group="292" sortKey={sortKey} sortDir={sortDir} onSort={handleSort} />
|
||||
<ColHeader label="Qté" sortable="qte579" group="579" sortKey={sortKey} sortDir={sortDir} onSort={handleSort} />
|
||||
<ColHeader label="CA TTC" sortable="ca579" group="579" sortKey={sortKey} sortDir={sortDir} onSort={handleSort} />
|
||||
<th className="bg-violet-50 px-2 py-2 text-center text-xs font-semibold text-violet-500">% Marge</th>
|
||||
<ColHeader label="Stock" sortable="stock579" group="579" sortKey={sortKey} sortDir={sortDir} onSort={handleSort} />
|
||||
<ColHeader label="Qté" sortable="qteTotal" group="total" sortKey={sortKey} sortDir={sortDir} onSort={handleSort} />
|
||||
<ColHeader label="CA TTC" sortable="caTotal" group="total" sortKey={sortKey} sortDir={sortDir} onSort={handleSort} />
|
||||
<th className="bg-emerald-50 px-2 py-2 text-center text-xs font-semibold text-emerald-600">% Marge</th>
|
||||
<ColHeader label="Stock" sortable="stockTotal" group="total" sortKey={sortKey} sortDir={sortDir} onSort={handleSort} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sorted.map((row) => (
|
||||
<tr key={row.codein} className={`border-b border-gray-100 hover:brightness-95 transition-colors`}>
|
||||
<td className="bg-white px-2 py-2.5 font-mono text-xs text-gray-400 text-center">{row.codein}</td>
|
||||
<td className="bg-white px-2 py-2.5 text-gray-900 font-medium min-w-[200px]">{row.libelle.trim()}</td>
|
||||
<td className="bg-white px-2 py-2.5 text-xs text-gray-500 whitespace-nowrap">{row.fournisseur}</td>
|
||||
<td className="bg-white px-2 py-2.5 text-xs text-center whitespace-nowrap" title={row.nomenclature_code ? `${row.nomenclature_code} — ${row.nomenclature}` : ""}>
|
||||
{row.nomenclature_code
|
||||
? <span className="font-mono font-semibold text-gray-700">{row.nomenclature_code}</span>
|
||||
: <span className="text-gray-300">—</span>
|
||||
}
|
||||
</td>
|
||||
<td className={`border-l-2 border-blue-200 px-2 py-2.5 text-center tabular-nums text-gray-700 ${sortKey === "qte292" ? "bg-blue-100 font-semibold" : "bg-blue-50/60"}`}>
|
||||
{row.qte292 > 0 ? formatQte(row.qte292) : <span className="text-gray-300">—</span>}
|
||||
</td>
|
||||
<td className={`px-2 py-2.5 text-center tabular-nums text-gray-800 ${sortKey === "ca292" ? "bg-blue-100 font-semibold" : "bg-blue-50/60"}`}>
|
||||
{row.ca292 > 0 ? formatCA(row.ca292) : <span className="text-gray-300">—</span>}
|
||||
</td>
|
||||
<td className="bg-blue-50/60 px-2 py-2.5 text-center text-xs tabular-nums text-blue-500">
|
||||
{row.ca292 > 0 ? formatPct(row.ca292, row.marge292) : ""}
|
||||
</td>
|
||||
<td className={`px-2 py-2.5 text-center tabular-nums text-xs ${sortKey === "stock292" ? "bg-blue-100 font-semibold text-blue-700" : "bg-blue-50/60 text-amber-600"}`}>
|
||||
{row.stock292 > 0 ? formatQte(row.stock292) : <span className="text-gray-300">—</span>}
|
||||
</td>
|
||||
<td className={`border-l-2 border-violet-200 px-2 py-2.5 text-center tabular-nums text-gray-700 ${sortKey === "qte579" ? "bg-violet-100 font-semibold" : "bg-violet-50/60"}`}>
|
||||
{row.qte579 > 0 ? formatQte(row.qte579) : <span className="text-gray-300">—</span>}
|
||||
</td>
|
||||
<td className={`px-2 py-2.5 text-center tabular-nums text-gray-800 ${sortKey === "ca579" ? "bg-violet-100 font-semibold" : "bg-violet-50/60"}`}>
|
||||
{row.ca579 > 0 ? formatCA(row.ca579) : <span className="text-gray-300">—</span>}
|
||||
</td>
|
||||
<td className="bg-violet-50/60 px-2 py-2.5 text-center text-xs tabular-nums text-violet-500">
|
||||
{row.ca579 > 0 ? formatPct(row.ca579, row.marge579) : ""}
|
||||
</td>
|
||||
<td className={`px-2 py-2.5 text-center tabular-nums text-xs ${sortKey === "stock579" ? "bg-violet-100 font-semibold text-violet-700" : "bg-violet-50/60 text-amber-600"}`}>
|
||||
{row.stock579 > 0 ? formatQte(row.stock579) : <span className="text-gray-300">—</span>}
|
||||
</td>
|
||||
<td className={`border-l-2 border-emerald-200 px-2 py-2.5 text-center tabular-nums font-semibold text-gray-900 ${sortKey === "qteTotal" ? "bg-emerald-100" : "bg-emerald-50/60"}`}>
|
||||
{row.qteTotal > 0 ? formatQte(row.qteTotal) : <span className="text-gray-300">—</span>}
|
||||
</td>
|
||||
<td className={`px-2 py-2.5 text-center tabular-nums font-semibold text-gray-900 ${sortKey === "caTotal" ? "bg-emerald-100" : "bg-emerald-50/60"}`}>
|
||||
{row.caTotal > 0 ? formatCA(row.caTotal) : <span className="text-gray-300">—</span>}
|
||||
</td>
|
||||
<td className="bg-emerald-50/60 px-2 py-2.5 text-center text-xs tabular-nums text-emerald-600">
|
||||
{row.caTotal > 0 ? formatPct(row.caTotal, row.margeTotal) : ""}
|
||||
</td>
|
||||
<td className={`px-2 py-2.5 text-center tabular-nums text-xs font-semibold ${sortKey === "stockTotal" ? "bg-emerald-100 text-emerald-700" : row.stockTotal <= 0 ? "bg-emerald-50/60 text-red-400" : "bg-emerald-50/60 text-amber-600"}`}>
|
||||
{row.stockTotal > 0 ? formatQte(row.stockTotal) : <span className="text-red-400 font-semibold">0</span>}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="border-t-2 border-gray-300">
|
||||
<td colSpan={4} className="bg-gray-100 px-4 py-3 text-sm font-bold text-gray-800">
|
||||
TOTAL — {sorted.length} articles
|
||||
</td>
|
||||
<td className="border-l-2 border-blue-300 bg-blue-100 px-4 py-3 text-center font-bold tabular-nums text-gray-900">{formatQte(totals.qte292)}</td>
|
||||
<td className="bg-blue-100 px-2 py-3 text-center font-bold tabular-nums text-gray-900">{formatCA(totals.ca292)}</td>
|
||||
<td className="bg-blue-100 px-2 py-3 text-center text-xs tabular-nums text-blue-700 font-semibold">{formatPct(totals.ca292, totals.marge292)}</td>
|
||||
<td className="bg-blue-100 px-2 py-3 text-center text-xs font-bold tabular-nums text-amber-700">{formatQte(totals.stock292)}</td>
|
||||
<td className="border-l-2 border-violet-300 bg-violet-100 px-2 py-3 text-center font-bold tabular-nums text-gray-900">{formatQte(totals.qte579)}</td>
|
||||
<td className="bg-violet-100 px-2 py-3 text-center font-bold tabular-nums text-gray-900">{formatCA(totals.ca579)}</td>
|
||||
<td className="bg-violet-100 px-2 py-3 text-center text-xs tabular-nums text-violet-700 font-semibold">{formatPct(totals.ca579, totals.marge579)}</td>
|
||||
<td className="bg-violet-100 px-2 py-3 text-center text-xs font-bold tabular-nums text-amber-700">{formatQte(totals.stock579)}</td>
|
||||
<td className="border-l-2 border-emerald-300 bg-emerald-100 px-2 py-3 text-center font-bold tabular-nums text-gray-900">{formatQte(totals.qteTotal)}</td>
|
||||
<td className="bg-emerald-100 px-2 py-3 text-center font-bold tabular-nums text-gray-900">{formatCA(totals.caTotal)}</td>
|
||||
<td className="bg-emerald-100 px-2 py-3 text-center text-xs tabular-nums text-emerald-800 font-semibold">{formatPct(totals.caTotal, totals.margeTotal)}</td>
|
||||
<td className="bg-emerald-100 px-2 py-3 text-center text-xs font-bold tabular-nums text-amber-700">{formatQte(totals.stockTotal)}</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div className={cn("transition-opacity", navigation && "pointer-events-none opacity-50")}>
|
||||
<DataTable<Ligne>
|
||||
rows={pivotted}
|
||||
columns={COLONNES}
|
||||
rowKey={r => r.codein}
|
||||
searchIn={recherche}
|
||||
searchPlaceholder="Code ou désignation…"
|
||||
filters={FILTRES}
|
||||
pageSize={100}
|
||||
unite="produits"
|
||||
initialSort={{ id: "total-ca", dir: "desc" }}
|
||||
showFooter
|
||||
emptyTitle="Aucune vente sur cette période"
|
||||
emptyDescription="Choisissez une autre période, puis cliquez sur « Appliquer »."
|
||||
onExport={exportToExcel}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import LoadingModal from "@/components/shared/loading-modal";
|
||||
import { PageSkeleton } from "@/components/ui/states";
|
||||
|
||||
export default function HitParadeLoading() {
|
||||
return <LoadingModal message="Chargement des données" subMessage="Récupération du classement des ventes..." />;
|
||||
/** Silhouette de la page pendant le chargement, sans bloquer l'écran. */
|
||||
export default function Loading() {
|
||||
return <PageSkeleton rows={12} />;
|
||||
}
|
||||
@@ -1,6 +1,15 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { RotateCcw, Trophy } from "lucide-react";
|
||||
import { pgGetHitParade, HitParadeRow } from "@/lib/pg-ff-client";
|
||||
import { cachedFF } from "@/lib/ff-cache";
|
||||
import { PageHeader } from "@/components/ui/page-header";
|
||||
import { ErrorState } from "@/components/ui/states";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { HitParadeClient } from "./client";
|
||||
|
||||
export const metadata: Metadata = { title: "Meilleures ventes" };
|
||||
|
||||
export interface HitParadePivotRow {
|
||||
codein: string;
|
||||
libelle: string;
|
||||
@@ -80,19 +89,40 @@ 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 pivotted = pivotHitParade(rows);
|
||||
let pivotted: HitParadePivotRow[] | null = null;
|
||||
let erreur: string | null = null;
|
||||
try {
|
||||
const rows = await cachedFF(`hit-parade:${dateDebut}:${dateFin}`, () => pgGetHitParade(dateDebut, dateFin));
|
||||
pivotted = pivotHitParade(rows);
|
||||
} catch (e) {
|
||||
console.error("[hit-parade] chargement impossible :", e);
|
||||
erreur = e instanceof Error ? e.message : String(e);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 p-6">
|
||||
<div className="mx-auto max-w-screen-2xl">
|
||||
<h1 className="mb-6 text-3xl font-bold text-gray-900">Hit Parade</h1>
|
||||
<div className="mx-auto w-full max-w-screen-2xl">
|
||||
<PageHeader
|
||||
icon={Trophy}
|
||||
title="Meilleures ventes"
|
||||
description="Le classement des produits les plus vendus sur une période, magasin par magasin : quantités, chiffre d'affaires, taux de marge et stock actuel."
|
||||
/>
|
||||
{pivotted ? (
|
||||
<HitParadeClient
|
||||
dateDebut={dateDebut}
|
||||
dateFin={dateFin}
|
||||
pivotted={pivotted}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<ErrorState
|
||||
title="Les meilleures ventes n'ont pas pu être chargées"
|
||||
detail={erreur ?? undefined}
|
||||
action={
|
||||
<Button asChild variant="outline">
|
||||
<Link href={`/hit-parade?debut=${dateDebut}&fin=${dateFin}`}><RotateCcw /> Réessayer</Link>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -7,7 +7,7 @@ export default async function DashboardLayout({ children }: { children: React.Re
|
||||
<Sidebar />
|
||||
<main className="flex-1 flex flex-col h-full min-w-0 overflow-hidden">
|
||||
<Header />
|
||||
<div className="flex-1 overflow-y-auto flex flex-col p-4 md:p-8">
|
||||
<div className="flex-1 overflow-y-auto flex flex-col p-4 md:p-6">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import Link from "next/link";
|
||||
import { SearchX } from "lucide-react";
|
||||
import { EmptyState } from "@/components/ui/states";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-3xl py-10">
|
||||
<EmptyState
|
||||
icon={SearchX}
|
||||
title="Page introuvable"
|
||||
description="L'adresse demandée n'existe pas ou n'existe plus. Utilisez le menu à gauche pour retrouver votre page."
|
||||
action={<Button asChild><Link href="/dashboard">Retour à l'accueil</Link></Button>}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
@@ -1,5 +1,6 @@
|
||||
import LoadingModal from "@/components/shared/loading-modal";
|
||||
import { PageSkeleton } from "@/components/ui/states";
|
||||
|
||||
export default function ProduitsLoading() {
|
||||
return <LoadingModal message="Chargement des données" subMessage="Recherche du produit..." />;
|
||||
/** Silhouette de la page pendant le chargement, sans bloquer l'écran. */
|
||||
export default function Loading() {
|
||||
return <PageSkeleton rows={6} />;
|
||||
}
|
||||
@@ -2,11 +2,82 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Loader2, TrendingUp } from "lucide-react";
|
||||
import { Loader2, RefreshCw, TrendingUp } from "lucide-react";
|
||||
import type { PgOpportuniteRow } from "@/lib/pg-ff-client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DataTable, type DataColumn } from "@/components/ui/data-table";
|
||||
import { EmptyState, ErrorState } from "@/components/ui/states";
|
||||
import { GLOSSAIRE } from "@/lib/glossaire";
|
||||
import { fmtDecimal1, fmtEntier } from "@/lib/format";
|
||||
|
||||
const fmtQte = (v: number) => new Intl.NumberFormat("fr-FR", { maximumFractionDigits: 0 }).format(v);
|
||||
const fmtDec = (v: number) => new Intl.NumberFormat("fr-FR", { minimumFractionDigits: 1, maximumFractionDigits: 1 }).format(v);
|
||||
const COLONNES: DataColumn<PgOpportuniteRow>[] = [
|
||||
{
|
||||
id: "produit",
|
||||
header: "Produit",
|
||||
sortValue: (r) => r.libelle1 || r.codein,
|
||||
cell: (r) => (
|
||||
<Link
|
||||
href={`/produits?codein=${encodeURIComponent(r.codein)}`}
|
||||
className="font-medium text-[var(--accent)] hover:underline"
|
||||
>
|
||||
{r.libelle1 || r.codein}
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "fournisseur",
|
||||
header: "Fournisseur",
|
||||
sortValue: (r) => r.fournisseur,
|
||||
cell: (r) => <span className="text-[var(--text-secondary)]">{r.fournisseur}</span>,
|
||||
},
|
||||
{
|
||||
id: "reseau",
|
||||
header: "Réseau, par magasin",
|
||||
hint: "Quantité vendue sur 12 mois par un magasin du réseau qui a ce produit.",
|
||||
align: "right",
|
||||
sortValue: (r) => r.qte_reseau_par_magasin,
|
||||
cell: (r) => fmtDecimal1(r.qte_reseau_par_magasin),
|
||||
},
|
||||
{
|
||||
id: "nous",
|
||||
header: "Nous, par magasin",
|
||||
hint: "Quantité vendue sur 12 mois par chacun de nos magasins, en moyenne.",
|
||||
align: "right",
|
||||
sortValue: (r) => r.qte_locale_par_magasin,
|
||||
cell: (r) => fmtDecimal1(r.qte_locale_par_magasin),
|
||||
},
|
||||
{
|
||||
id: "ecart",
|
||||
header: "Écart",
|
||||
hint: "Réseau par magasin moins nous par magasin. Positif : le réseau vend plus que nous.",
|
||||
align: "right",
|
||||
sortValue: (r) => r.ecart_par_magasin,
|
||||
cell: (r) => {
|
||||
const opportunite = r.ecart_par_magasin > 0;
|
||||
return (
|
||||
<span
|
||||
className="font-semibold"
|
||||
style={{ color: opportunite ? "var(--accent-warning)" : "var(--accent-success)" }}
|
||||
title={opportunite
|
||||
? "Le réseau vend plus que nous sur ce produit"
|
||||
: "Nous vendons autant ou plus que le réseau"}
|
||||
>
|
||||
{opportunite ? "+" : ""}{fmtDecimal1(r.ecart_par_magasin)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "magasins",
|
||||
header: "Magasins vendeurs",
|
||||
hint: GLOSSAIRE.presenceReseau.definition,
|
||||
align: "right",
|
||||
sortValue: (r) => r.nb_magasins_reseau,
|
||||
cell: (r) => <span className="text-[var(--text-secondary)]">{fmtEntier(r.nb_magasins_reseau)}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
const rechercherDans = (r: PgOpportuniteRow) => [r.libelle1, r.fournisseur, r.codein, r.code_centrale];
|
||||
|
||||
/**
|
||||
* Produits de la même famille que le produit affiché, classés par écart de
|
||||
@@ -45,17 +116,31 @@ export function OpportunitesFamille({
|
||||
}
|
||||
|
||||
if (rows === null) {
|
||||
if (error && !loading) {
|
||||
return (
|
||||
<ErrorState
|
||||
className="py-8"
|
||||
title="L'analyse de la famille n'a pas pu être faite"
|
||||
description="Réessayez dans un instant. Si le problème persiste, prévenez un administrateur."
|
||||
detail={error}
|
||||
action={
|
||||
<Button variant="outline" onClick={load}>
|
||||
<RefreshCw /> Réessayer
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<p className="text-[13px]" style={{ color: "var(--text-secondary)" }}>
|
||||
Comparer ce produit aux autres références{familleLabel ? ` de « ${familleLabel} »` : " de la même famille"} :
|
||||
lesquelles le réseau vend bien et que nous vendons peu ?
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
Comparez ce produit aux autres produits{familleLabel ? <> de la famille « {familleLabel} »</> : " de la même famille"} :
|
||||
lesquels le réseau vend bien alors que nous les vendons peu ?
|
||||
</p>
|
||||
<button onClick={load} disabled={loading} className="btn-action btn-action-secondary flex items-center gap-1.5 disabled:opacity-60">
|
||||
{loading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <TrendingUp className="w-3.5 h-3.5" />}
|
||||
{loading ? "Analyse…" : "Analyser la famille"}
|
||||
</button>
|
||||
{error && <p className="text-[12px]" style={{ color: "var(--accent-error)" }}>{error}</p>}
|
||||
<Button variant="outline" onClick={load} disabled={loading}>
|
||||
{loading ? <Loader2 className="animate-spin" /> : <TrendingUp />}
|
||||
{loading ? "Analyse en cours…" : "Analyser la famille"}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -65,71 +150,31 @@ export function OpportunitesFamille({
|
||||
|
||||
if (others.length === 0) {
|
||||
return (
|
||||
<p className="text-[13px]" style={{ color: "var(--text-muted)" }}>
|
||||
Aucune autre référence de cette famille n'a de données réseau en cache.
|
||||
Synchronisez d'autres fournisseurs pour enrichir la comparaison.
|
||||
</p>
|
||||
<EmptyState
|
||||
className="py-8"
|
||||
title="Aucun autre produit à comparer"
|
||||
description="Aucun autre produit de cette famille n'a encore de données du réseau. Mettez à jour les données du réseau d'autres fournisseurs (révision d'assortiment) pour enrichir la comparaison."
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="overflow-x-auto rounded-xl" style={{ border: "1px solid var(--border)" }}>
|
||||
<table className="w-full border-collapse text-[12px]">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bg-elevated)" }}>
|
||||
<th className="px-3 py-2 text-left text-[10px] font-semibold uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Produit</th>
|
||||
<th className="px-3 py-2 text-left text-[10px] font-semibold uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Fournisseur</th>
|
||||
<th className="px-3 py-2 text-right text-[10px] font-semibold uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Réseau / mag.</th>
|
||||
<th className="px-3 py-2 text-right text-[10px] font-semibold uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Nous / mag.</th>
|
||||
<th className="px-3 py-2 text-right text-[10px] font-semibold uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Écart</th>
|
||||
<th className="px-3 py-2 text-right text-[10px] font-semibold uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Magasins</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{others.map((r) => {
|
||||
const opportunite = r.ecart_par_magasin > 0;
|
||||
return (
|
||||
<tr key={r.codein} className="transition-colors hover:bg-[var(--bg-elevated)]" style={{ borderTop: "1px solid var(--border)" }}>
|
||||
<td className="px-3 py-2">
|
||||
<Link
|
||||
href={`/produits?codein=${encodeURIComponent(r.codein)}`}
|
||||
className="font-medium hover:underline"
|
||||
style={{ color: "var(--accent)" }}
|
||||
>
|
||||
{r.libelle1 || r.codein}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-3 py-2" style={{ color: "var(--text-secondary)" }}>{r.fournisseur}</td>
|
||||
<td className="px-3 py-2 text-right tabular-nums" style={{ color: "var(--text-secondary)" }}>
|
||||
{fmtDec(r.qte_reseau_par_magasin)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right tabular-nums" style={{ color: "var(--text-secondary)" }}>
|
||||
{fmtDec(r.qte_locale_par_magasin)}
|
||||
</td>
|
||||
<td
|
||||
className="px-3 py-2 text-right tabular-nums font-semibold"
|
||||
style={{ color: opportunite ? "#f59e0b" : "#22c55e" }}
|
||||
title={opportunite
|
||||
? "Le réseau vend plus que nous sur ce produit"
|
||||
: "Nous vendons autant ou plus que le réseau"}
|
||||
>
|
||||
{r.ecart_par_magasin > 0 ? "+" : ""}{fmtDec(r.ecart_par_magasin)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right tabular-nums text-[11px]" style={{ color: "var(--text-muted)" }}>
|
||||
{fmtQte(r.nb_magasins_reseau)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p className="text-[11px]" style={{ color: "var(--text-muted)" }}>
|
||||
Écart = quantité réseau par magasin − notre quantité par magasin, sur 12 mois.
|
||||
Un écart positif signale une référence sous-exploitée chez nous.
|
||||
Périmètre : les articles <strong>de notre catalogue</strong> ayant déjà des données réseau —
|
||||
Qlik est interrogé par code article, un produit que Nancy ne référence pas ne peut pas apparaître ici.
|
||||
<div className="space-y-3">
|
||||
<DataTable
|
||||
rows={others}
|
||||
columns={COLONNES}
|
||||
rowKey={(r) => r.codein}
|
||||
searchIn={rechercherDans}
|
||||
searchPlaceholder="Filtrer les produits…"
|
||||
pageSize={25}
|
||||
unite={others.length > 1 ? "produits" : "produit"}
|
||||
maxHeight="60vh"
|
||||
/>
|
||||
<p className="text-[13px] text-[var(--text-secondary)]">
|
||||
Écart = quantité vendue par magasin dans le réseau − notre quantité vendue par magasin, sur 12 mois.
|
||||
Un écart positif signale un produit sous-exploité chez nous. Seuls les produits <strong>de notre
|
||||
catalogue</strong> qui ont déjà des données du réseau apparaissent ici : un produit absent de notre
|
||||
catalogue ne peut pas y figurer.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,8 +1,15 @@
|
||||
import type { Metadata } from "next";
|
||||
import { PackageSearch, SearchX } from "lucide-react";
|
||||
import { getProduitFiche, getProduitFicheByCodeCentrale } from "@/features/produits/api/get-produit-fiche";
|
||||
import { PageHeader } from "@/components/ui/page-header";
|
||||
import { EmptyState } from "@/components/ui/states";
|
||||
import { Terme } from "@/components/ui/tooltip";
|
||||
import { ProduitSearchBar } from "./search-bar";
|
||||
import { ProduitResults } from "./results";
|
||||
import { ProduitFicheView } from "./fiche";
|
||||
|
||||
export const metadata: Metadata = { title: "Recherche produit" };
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/**
|
||||
@@ -30,40 +37,44 @@ export default async function ProduitsPage(props: {
|
||||
const ficheDemandee = Boolean(codein || codeCentrale);
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-screen-2xl mx-auto space-y-6">
|
||||
<header className="space-y-1">
|
||||
<h1 className="text-2xl font-semibold tracking-[-0.4px]" style={{ color: "var(--text-primary)" }}>
|
||||
Recherche produit
|
||||
</h1>
|
||||
<p className="text-[13px]" style={{ color: "var(--text-muted)" }}>
|
||||
Recherche dans Qlik Sense (réseau) puis rapprochement avec notre catalogue —
|
||||
performance réseau et ventes locales sur 12 mois glissants.
|
||||
</p>
|
||||
</header>
|
||||
<div className="mx-auto w-full max-w-screen-2xl">
|
||||
<PageHeader
|
||||
icon={PackageSearch}
|
||||
title="Recherche produit"
|
||||
description={
|
||||
<>
|
||||
Cherchez un produit par son nom ou son code, puis comparez ses ventes à celles des
|
||||
magasins du <Terme id="reseau">réseau.</Terme>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* key : remonte le champ quand l'URL change (retour arrière, lien partagé) */}
|
||||
<ProduitSearchBar key={q} initialQuery={q} />
|
||||
<div className="space-y-6">
|
||||
{/* key : remonte le champ quand l'URL change (retour arrière, lien partagé) */}
|
||||
<ProduitSearchBar key={q} initialQuery={q} />
|
||||
|
||||
{ficheDemandee && !fiche && (
|
||||
<div
|
||||
className="rounded-xl p-6 text-center text-[13px]"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-muted)" }}
|
||||
>
|
||||
Aucun produit trouvé pour{" "}
|
||||
{codein
|
||||
? <>le code article <span className="font-mono">{codein}</span></>
|
||||
: <>le code centrale <span className="font-mono">{codeCentrale}</span></>}.
|
||||
{codeCentrale && !codein && (
|
||||
<div className="mt-1">
|
||||
Ce code n'est ni dans notre catalogue, ni dans le cache réseau — relancez la recherche.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{ficheDemandee && !fiche && (
|
||||
<EmptyState
|
||||
icon={SearchX}
|
||||
title="Produit introuvable"
|
||||
description={
|
||||
codein ? (
|
||||
<>Aucun produit de notre catalogue ne porte le code article <span className="font-mono">{codein}</span>.</>
|
||||
) : (
|
||||
<>
|
||||
Le code centrale <span className="font-mono">{codeCentrale}</span> n'est ni dans notre
|
||||
catalogue, ni dans les données du réseau déjà chargées. Relancez une recherche par le nom
|
||||
ou le code du produit.
|
||||
</>
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{fiche && <ProduitFicheView fiche={fiche} backQuery={q} />}
|
||||
{fiche && <ProduitFicheView fiche={fiche} backQuery={q} />}
|
||||
|
||||
{!ficheDemandee && <ProduitResults query={q} />}
|
||||
{!ficheDemandee && <ProduitResults query={q} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,19 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useMemo, useState, type ReactNode } from "react";
|
||||
import Link from "next/link";
|
||||
import { PackageSearch, Loader2, RefreshCw, AlertTriangle, Database, Globe } from "lucide-react";
|
||||
import { TrendSparkline } from "@/features/grid/components/network-charts";
|
||||
import { computeNetworkTrend, NB_MAGASINS_RESEAU } from "@/features/grid/lib/network-trend";
|
||||
import { computeNetworkTrend, NB_MAGASINS_RESEAU, type NetworkTrend } from "@/features/grid/lib/network-trend";
|
||||
import type { ProduitRechercheResultat, ProduitRechercheRow } from "@/features/produits/types";
|
||||
|
||||
const fmtQte = (v: number) => new Intl.NumberFormat("fr-FR", { maximumFractionDigits: 0 }).format(v);
|
||||
const fmtDec = (v: number, d = 1) =>
|
||||
new Intl.NumberFormat("fr-FR", { minimumFractionDigits: d, maximumFractionDigits: d }).format(v);
|
||||
const fmtEur = (v: number) =>
|
||||
new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }).format(v);
|
||||
const fmtEur2 = (v: number) =>
|
||||
new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR", maximumFractionDigits: 2 }).format(v);
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { DataTable, type DataColumn } from "@/components/ui/data-table";
|
||||
import { EmptyState, ErrorState } from "@/components/ui/states";
|
||||
import { Terme } from "@/components/ui/tooltip";
|
||||
import { GLOSSAIRE } from "@/lib/glossaire";
|
||||
import { fmtDecimal1, fmtEntier, fmtEur0, fmtEur2 } from "@/lib/format";
|
||||
import { couleurMarge } from "@/lib/marge";
|
||||
|
||||
/** Intervalle d'interrogation de l'état du job de recherche. */
|
||||
const POLL_MS = 2000;
|
||||
@@ -57,6 +57,38 @@ async function lireJson(res: Response): Promise<Record<string, unknown>> {
|
||||
return data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Les messages du serveur nomment l'outil source (Qlik) : l'utilisateur lit
|
||||
* « données du réseau », le message d'origine reste dans le détail technique.
|
||||
*/
|
||||
const mentionneOutil = (texte: string | null | undefined) => /qlik/i.test(texte ?? "");
|
||||
|
||||
function libelleEtape(etape: string | null): string {
|
||||
if (!etape || mentionneOutil(etape)) return "Recherche dans les données du réseau…";
|
||||
return etape;
|
||||
}
|
||||
|
||||
/** Bandeau d'avertissement : explication en clair, détail technique replié. */
|
||||
function Avertissement({ children, detail }: { children: ReactNode; detail?: string | null }) {
|
||||
return (
|
||||
<div
|
||||
role="status"
|
||||
className="flex items-start gap-2.5 rounded-xl border border-[var(--accent-warning)]/40 bg-[var(--accent-warning-bg)] px-4 py-3 text-sm text-[var(--text-primary)]"
|
||||
>
|
||||
<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-[var(--accent-warning)]" aria-hidden />
|
||||
<div className="min-w-0">
|
||||
{children}
|
||||
{detail && (
|
||||
<details className="mt-1 text-xs text-[var(--text-secondary)]">
|
||||
<summary className="cursor-pointer">Détail technique</summary>
|
||||
<p className="mt-1 break-words">{detail}</p>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Résultats de recherche produit.
|
||||
*
|
||||
@@ -144,36 +176,31 @@ export function ProduitResults({ query }: { query: string }) {
|
||||
|
||||
if (!query) {
|
||||
return (
|
||||
<div
|
||||
className="rounded-xl p-10 text-center"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)" }}
|
||||
>
|
||||
<PackageSearch className="w-8 h-8 mx-auto mb-3" style={{ color: "var(--text-muted)" }} strokeWidth={1.5} />
|
||||
<p className="text-[14px] font-medium" style={{ color: "var(--text-secondary)" }}>
|
||||
Recherchez un produit dans le réseau
|
||||
</p>
|
||||
<p className="text-[12px] mt-1 max-w-lg mx-auto" style={{ color: "var(--text-muted)" }}>
|
||||
La recherche interroge <strong>Qlik Sense</strong> (les ~{NB_MAGASINS_RESEAU} magasins du réseau),
|
||||
puis rapproche chaque produit trouvé de notre catalogue.
|
||||
Saisissez un libellé (ex. « poêle 28 ») ou un code centrale (ex. « 10000167303 »).
|
||||
</p>
|
||||
</div>
|
||||
<EmptyState
|
||||
icon={PackageSearch}
|
||||
title="Recherchez un produit"
|
||||
description={
|
||||
<>
|
||||
Saisissez le nom d'un produit (ex. « poêle 28 ») ou son code centrale
|
||||
(ex. « 10000167303 »). Vous verrez ses ventes dans les {NB_MAGASINS_RESEAU} magasins
|
||||
du réseau, puis chez nous s'il est dans notre catalogue.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div
|
||||
className="rounded-xl p-10 text-center"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)" }}
|
||||
aria-busy="true"
|
||||
className="flex flex-col items-center gap-2 rounded-xl border border-[var(--border)] bg-[var(--bg-surface)] px-6 py-12 text-center"
|
||||
>
|
||||
<Loader2 className="w-6 h-6 mx-auto mb-3 animate-spin" style={{ color: "var(--accent)" }} />
|
||||
<p className="text-[13px] font-medium" style={{ color: "var(--text-secondary)" }}>
|
||||
{etape ?? "Interrogation de Qlik Sense…"}
|
||||
</p>
|
||||
<p className="text-[12px] mt-1" style={{ color: "var(--text-muted)" }}>
|
||||
Recherche des articles du réseau puis extraction de leurs ventes sur 12 mois glissants.
|
||||
Cela peut prendre plus d'une minute — vous pouvez laisser la page ouverte.
|
||||
<Loader2 className="h-7 w-7 animate-spin text-[var(--accent)]" aria-hidden />
|
||||
<p className="text-base font-semibold text-[var(--text-primary)]">{libelleEtape(etape)}</p>
|
||||
<p className="max-w-lg text-sm text-[var(--text-secondary)]">
|
||||
Recherche des produits puis de leurs ventes sur les 12 derniers mois.
|
||||
Cela peut prendre plus d'une minute : vous pouvez laisser la page ouverte.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
@@ -181,21 +208,20 @@ export function ProduitResults({ query }: { query: string }) {
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="rounded-xl p-6" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)" }}>
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="w-4 h-4 mt-0.5 shrink-0" style={{ color: "var(--accent-error)" }} />
|
||||
<div className="min-w-0">
|
||||
<p className="text-[13px] font-medium" style={{ color: "var(--text-primary)" }}>
|
||||
La recherche a échoué
|
||||
</p>
|
||||
<p className="text-[12px] mt-0.5 break-words" style={{ color: "var(--text-muted)" }}>{error}</p>
|
||||
<button onClick={relancer} className="btn-action btn-action-secondary mt-3 flex items-center gap-1.5">
|
||||
<RefreshCw className="w-3.5 h-3.5" />
|
||||
Réessayer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ErrorState
|
||||
title="La recherche a échoué"
|
||||
description={
|
||||
mentionneOutil(error)
|
||||
? "Les données du réseau n'ont pas répondu. Réessayez dans un instant ; si la recherche est très large, ajoutez un mot plus précis."
|
||||
: error
|
||||
}
|
||||
detail={mentionneOutil(error) ? error : undefined}
|
||||
action={
|
||||
<Button variant="outline" onClick={relancer}>
|
||||
<RefreshCw /> Réessayer
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -204,196 +230,227 @@ export function ProduitResults({ query }: { query: string }) {
|
||||
const { rows, source, qlikError, tronque, locauxHorsReseau, dureeMs } = data;
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<p className="text-[12px] flex items-center gap-1.5" style={{ color: "var(--text-muted)" }}>
|
||||
{source === "qlik" ? (
|
||||
<Globe className="w-3.5 h-3.5" style={{ color: "var(--accent)" }} />
|
||||
) : (
|
||||
<Database className="w-3.5 h-3.5" />
|
||||
)}
|
||||
{rows.length} produit{rows.length > 1 ? "s" : ""}
|
||||
{source === "qlik" ? " trouvé(s) dans Qlik" : " trouvé(s) dans le catalogue local"}
|
||||
{tronque && " (liste tronquée — affinez la recherche)"}
|
||||
{" · "}{(dureeMs / 1000).toFixed(1)} s
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<p className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
|
||||
{source === "qlik"
|
||||
? <Globe className="h-4 w-4 text-[var(--accent)]" aria-hidden />
|
||||
: <Database className="h-4 w-4 text-[var(--text-muted)]" aria-hidden />}
|
||||
<span>
|
||||
<span className="font-semibold text-[var(--text-primary)]">{fmtEntier(rows.length)}</span>{" "}
|
||||
produit{rows.length > 1 ? "s" : ""} trouvé{rows.length > 1 ? "s" : ""}
|
||||
{source === "qlik" ? " dans le réseau" : " dans notre catalogue"}
|
||||
{tronque && " (liste limitée : précisez la recherche pour tout voir)"}
|
||||
<span className="text-[var(--text-muted)]"> · recherche en {fmtDecimal1(dureeMs / 1000)} s</span>
|
||||
</span>
|
||||
</p>
|
||||
<button onClick={relancer} className="btn-action btn-action-secondary flex items-center gap-1.5">
|
||||
<RefreshCw className="w-3.5 h-3.5" />
|
||||
Relancer
|
||||
</button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={relancer}
|
||||
title="Interroger à nouveau les données du réseau, sans réutiliser le dernier résultat"
|
||||
>
|
||||
<RefreshCw /> Relancer la recherche
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{source === "db" && (
|
||||
<div
|
||||
className="rounded-xl p-3 text-[12px] flex items-start gap-2"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}
|
||||
>
|
||||
<AlertTriangle className="w-3.5 h-3.5 mt-0.5 shrink-0" style={{ color: "var(--accent-error)" }} />
|
||||
<span>
|
||||
Qlik n'a pas pu être interrogé, la recherche s'est repliée sur le catalogue local
|
||||
(les chiffres réseau affichés viennent du dernier cache).
|
||||
{qlikError && <span className="block mt-0.5" style={{ color: "var(--text-muted)" }}>{qlikError}</span>}
|
||||
</span>
|
||||
</div>
|
||||
<Avertissement detail={qlikError}>
|
||||
Les données du réseau n'ont pas pu être interrogées : seuls les produits de notre catalogue
|
||||
sont affichés, avec les chiffres du réseau de la dernière mise à jour.
|
||||
</Avertissement>
|
||||
)}
|
||||
|
||||
{source === "qlik" && qlikError && (
|
||||
<div
|
||||
className="rounded-xl p-3 text-[12px] flex items-start gap-2"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}
|
||||
>
|
||||
<AlertTriangle className="w-3.5 h-3.5 mt-0.5 shrink-0" style={{ color: "var(--accent-error)" }} />
|
||||
<span>
|
||||
{rows.length === 0
|
||||
? qlikError
|
||||
: `Articles trouvés, mais l'extraction des mesures réseau a échoué : ${qlikError}`}
|
||||
</span>
|
||||
</div>
|
||||
<Avertissement detail={qlikError}>
|
||||
{rows.length === 0
|
||||
? "La recherche n'a pas pu être appliquée aux données du réseau. Essayez un terme plus précis (deux mots, ou le code centrale)."
|
||||
: "Produits trouvés, mais leurs ventes dans le réseau n'ont pas pu être chargées."}
|
||||
</Avertissement>
|
||||
)}
|
||||
|
||||
{rows.length === 0 ? (
|
||||
<div
|
||||
className="rounded-xl p-8 text-center text-[13px]"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-muted)" }}
|
||||
>
|
||||
Aucun article du réseau ne correspond à « {query} ».
|
||||
</div>
|
||||
<EmptyState
|
||||
title={<>Aucun produit ne correspond à « {query} »</>}
|
||||
description="Vérifiez l'orthographe, essayez un mot plus court ou le code centrale du produit."
|
||||
/>
|
||||
) : (
|
||||
<ResultTable rows={rows} query={query} />
|
||||
<>
|
||||
<ResultTable rows={rows} query={query} />
|
||||
<p className="text-[13px] text-[var(--text-secondary)]">
|
||||
Chiffres des magasins du <Terme id="reseau">réseau</Terme> sur les 12 derniers mois
|
||||
(mois en cours exclu). Cliquez sur un produit pour ouvrir sa fiche.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
{locauxHorsReseau.length > 0 && (
|
||||
<details className="rounded-xl" style={{ border: "1px solid var(--border)" }}>
|
||||
<summary className="cursor-pointer px-3 py-2.5 text-[12px]" style={{ color: "var(--text-secondary)" }}>
|
||||
{locauxHorsReseau.length} produit{locauxHorsReseau.length > 1 ? "s" : ""} de notre catalogue
|
||||
sans correspondance réseau (pas de code centrale, ou non vendu par le réseau)
|
||||
<details className="rounded-xl border border-[var(--border)] bg-[var(--bg-surface)]">
|
||||
<summary className="cursor-pointer px-4 py-3 text-sm text-[var(--text-secondary)]">
|
||||
{fmtEntier(locauxHorsReseau.length)} produit{locauxHorsReseau.length > 1 ? "s" : ""} de notre catalogue
|
||||
sans ventes connues dans le réseau (pas de code centrale, ou pas vendu par le réseau)
|
||||
</summary>
|
||||
<div className="px-3 pb-3">
|
||||
<ul className="space-y-1">
|
||||
{locauxHorsReseau.slice(0, 30).map((l) => (
|
||||
<li key={l.codein} className="text-[12px]">
|
||||
<Link
|
||||
href={`/produits?codein=${encodeURIComponent(l.codein)}&q=${encodeURIComponent(query)}`}
|
||||
className="hover:underline"
|
||||
style={{ color: "var(--accent)" }}
|
||||
>
|
||||
{l.libelle1 || l.codein}
|
||||
</Link>
|
||||
<span style={{ color: "var(--text-muted)" }}>
|
||||
{" · "}{l.fournisseur}{" · "}<span className="font-mono">{l.codein}</span>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<ul className="space-y-1.5 px-4 pb-4">
|
||||
{locauxHorsReseau.slice(0, 30).map((l) => (
|
||||
<li key={l.codein} className="text-sm">
|
||||
<Link
|
||||
href={`/produits?codein=${encodeURIComponent(l.codein)}&q=${encodeURIComponent(query)}`}
|
||||
className="font-medium text-[var(--accent)] hover:underline"
|
||||
>
|
||||
{l.libelle1 || l.codein}
|
||||
</Link>
|
||||
<span className="text-[var(--text-muted)]">
|
||||
{" · "}{l.fournisseur}{" · "}code article <span className="font-mono">{l.codein}</span>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Tableau des résultats ──────────────────────────────────────────────────
|
||||
|
||||
type Ligne = ProduitRechercheRow & { trend: NetworkTrend };
|
||||
|
||||
const rechercherDans = (r: Ligne) => [r.libelle, r.fournisseur, r.codeCentrale, r.codein, r.nomenclature];
|
||||
|
||||
function ResultTable({ rows, query }: { rows: ProduitRechercheRow[]; query: string }) {
|
||||
return (
|
||||
<div className="overflow-x-auto rounded-xl" style={{ border: "1px solid var(--border)" }}>
|
||||
<table className="w-full text-[13px] border-collapse">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bg-elevated)" }}>
|
||||
<Th>Libellé</Th>
|
||||
<Th>Fournisseur</Th>
|
||||
<Th>Code centrale</Th>
|
||||
<Th align="right">Magasins</Th>
|
||||
<Th align="right">Qté réseau</Th>
|
||||
<Th align="right">Qté / mag.</Th>
|
||||
<Th align="right">Prix moyen</Th>
|
||||
<Th align="right">CA / mag.</Th>
|
||||
<Th align="right">Marge %</Th>
|
||||
<Th align="center">Tendance</Th>
|
||||
<Th align="right">Nous</Th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((r) => {
|
||||
const trend = computeNetworkTrend(r.qteByMonth, r.nbMagByMonth);
|
||||
const href = r.codein
|
||||
? `/produits?codein=${encodeURIComponent(r.codein)}&q=${encodeURIComponent(query)}`
|
||||
: `/produits?cc=${encodeURIComponent(r.codeCentrale)}&q=${encodeURIComponent(query)}`;
|
||||
return (
|
||||
<tr
|
||||
key={r.codeCentrale}
|
||||
className="transition-colors hover:bg-[var(--bg-elevated)]"
|
||||
style={{ borderTop: "1px solid var(--border)" }}
|
||||
>
|
||||
<td className="px-3 py-2 max-w-[280px]">
|
||||
<Link href={href} className="font-medium hover:underline" style={{ color: "var(--accent)" }}>
|
||||
{r.libelle || "—"}
|
||||
</Link>
|
||||
{r.nomenclature && (
|
||||
<div className="text-[11px] truncate" style={{ color: "var(--text-muted)" }}>{r.nomenclature}</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-[12px]" style={{ color: "var(--text-secondary)" }}>
|
||||
{r.fournisseur || "—"}
|
||||
</td>
|
||||
<td className="px-3 py-2 font-mono text-[12px]" style={{ color: "var(--text-muted)" }}>
|
||||
{r.codeCentrale}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right tabular-nums" style={{ color: "var(--text-secondary)" }}>
|
||||
{fmtQte(r.nbMagasinsReseau)}
|
||||
<span className="text-[11px] ml-1" style={{ color: "var(--text-muted)" }}>
|
||||
{fmtDec(r.tauxPresence * 100, 0)} %
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right tabular-nums font-semibold" style={{ color: "var(--text-primary)" }}>
|
||||
{fmtQte(r.qteReseau)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right tabular-nums" style={{ color: "var(--text-secondary)" }}>
|
||||
{fmtDec(r.qteParMagasinReseau)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right tabular-nums" style={{ color: "var(--text-secondary)" }}>
|
||||
{r.prixMoyenReseau != null ? fmtEur2(r.prixMoyenReseau) : "—"}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right tabular-nums" style={{ color: "var(--text-secondary)" }}>
|
||||
{r.caParMagasinReseau > 0 ? fmtEur(r.caParMagasinReseau) : "—"}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right tabular-nums" style={{ color: "var(--text-secondary)" }}>
|
||||
{r.margePctReseau != null ? `${fmtDec(r.margePctReseau)} %` : "—"}
|
||||
</td>
|
||||
<td className="px-2 py-2 text-center">
|
||||
{trend.hasData ? <TrendSparkline trend={trend} /> : <span style={{ color: "var(--text-muted)" }}>—</span>}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right text-[12px]">
|
||||
{r.codein ? (
|
||||
<span style={{ color: "var(--text-secondary)" }} title={`Code article ${r.codein}`}>
|
||||
stock {fmtQte(r.stockLocal ?? 0)}
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className="rounded-md px-1.5 py-0.5 text-[11px]"
|
||||
style={{ background: "var(--bg-elevated)", color: "var(--text-muted)", border: "1px solid var(--border)" }}
|
||||
title="Le réseau travaille ce produit, notre catalogue ne le référence pas"
|
||||
>
|
||||
non référencé
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
// Tendance calculée une fois par ligne (et non à chaque tri ou rendu).
|
||||
const lignes = useMemo<Ligne[]>(
|
||||
() => rows.map((r) => ({ ...r, trend: computeNetworkTrend(r.qteByMonth, r.nbMagByMonth) })),
|
||||
[rows],
|
||||
);
|
||||
}
|
||||
|
||||
const colonnes = useMemo<DataColumn<Ligne>[]>(() => [
|
||||
{
|
||||
id: "produit",
|
||||
header: "Produit",
|
||||
sortValue: (r) => r.libelle,
|
||||
className: "max-w-[320px]",
|
||||
cell: (r) => {
|
||||
const href = r.codein
|
||||
? `/produits?codein=${encodeURIComponent(r.codein)}&q=${encodeURIComponent(query)}`
|
||||
: `/produits?cc=${encodeURIComponent(r.codeCentrale)}&q=${encodeURIComponent(query)}`;
|
||||
return (
|
||||
<>
|
||||
<Link href={href} className="font-medium text-[var(--accent)] hover:underline">
|
||||
{r.libelle || "—"}
|
||||
</Link>
|
||||
{r.nomenclature && (
|
||||
<div className="truncate text-xs text-[var(--text-muted)]" title={r.nomenclature}>{r.nomenclature}</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "fournisseur",
|
||||
header: "Fournisseur",
|
||||
sortValue: (r) => r.fournisseur,
|
||||
cell: (r) => <span className="text-[var(--text-secondary)]">{r.fournisseur || "—"}</span>,
|
||||
},
|
||||
{
|
||||
id: "codeCentrale",
|
||||
header: "Code centrale",
|
||||
hint: GLOSSAIRE.codeCentrale.definition,
|
||||
cell: (r) => <span className="font-mono text-[13px] text-[var(--text-secondary)]">{r.codeCentrale}</span>,
|
||||
},
|
||||
{
|
||||
id: "magasins",
|
||||
header: "Magasins vendeurs",
|
||||
hint: GLOSSAIRE.presenceReseau.definition,
|
||||
align: "right",
|
||||
sortValue: (r) => r.nbMagasinsReseau,
|
||||
cell: (r) => (
|
||||
<>
|
||||
{fmtEntier(r.nbMagasinsReseau)}
|
||||
<span className="ml-1 text-xs text-[var(--text-muted)]">({fmtEntier(r.tauxPresence * 100)} %)</span>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "qteReseau",
|
||||
header: "Quantité vendue",
|
||||
hint: "Quantité vendue par l'ensemble des magasins du réseau sur les 12 derniers mois.",
|
||||
align: "right",
|
||||
sortValue: (r) => r.qteReseau,
|
||||
cell: (r) => <span className="font-semibold">{fmtEntier(r.qteReseau)}</span>,
|
||||
},
|
||||
{
|
||||
id: "qteParMagasin",
|
||||
header: "Quantité par magasin",
|
||||
hint: "Quantité moyenne vendue sur 12 mois par un magasin du réseau qui a ce produit.",
|
||||
align: "right",
|
||||
sortValue: (r) => r.qteParMagasinReseau,
|
||||
cell: (r) => fmtDecimal1(r.qteParMagasinReseau),
|
||||
},
|
||||
{
|
||||
id: "prixMoyen",
|
||||
header: "Prix moyen",
|
||||
hint: "Prix de vente moyen constaté dans le réseau (chiffre d'affaires divisé par la quantité).",
|
||||
align: "right",
|
||||
sortValue: (r) => r.prixMoyenReseau,
|
||||
cell: (r) => (r.prixMoyenReseau != null ? fmtEur2(r.prixMoyenReseau) : "—"),
|
||||
},
|
||||
{
|
||||
id: "caParMagasin",
|
||||
header: "CA par magasin",
|
||||
hint: GLOSSAIRE.caParMagasin.definition,
|
||||
align: "right",
|
||||
sortValue: (r) => (r.caParMagasinReseau > 0 ? r.caParMagasinReseau : null),
|
||||
cell: (r) => (r.caParMagasinReseau > 0 ? fmtEur0(r.caParMagasinReseau) : "—"),
|
||||
},
|
||||
{
|
||||
id: "marge",
|
||||
header: "Taux de marge",
|
||||
hint: GLOSSAIRE.marge.definition,
|
||||
align: "right",
|
||||
sortValue: (r) => r.margePctReseau,
|
||||
cell: (r) =>
|
||||
r.margePctReseau != null ? (
|
||||
<span className="font-medium" style={{ color: couleurMarge(r.margePctReseau) }}>
|
||||
{fmtDecimal1(r.margePctReseau)} %
|
||||
</span>
|
||||
) : "—",
|
||||
},
|
||||
{
|
||||
id: "tendance",
|
||||
header: "Tendance",
|
||||
hint: "Ventes par magasin des 4 derniers mois comparées aux 4 premiers mois de la période de 12 mois.",
|
||||
align: "center",
|
||||
sortValue: (r) => (r.trend.hasData ? r.trend.pct : null),
|
||||
cell: (r) => (r.trend.hasData ? <TrendSparkline trend={r.trend} /> : <span className="text-[var(--text-muted)]">—</span>),
|
||||
},
|
||||
{
|
||||
id: "nous",
|
||||
header: "Chez nous",
|
||||
hint: "Notre stock (tous nos magasins) si le produit est dans notre catalogue.",
|
||||
align: "right",
|
||||
sortValue: (r) => (r.codein ? (r.stockLocal ?? 0) : null),
|
||||
cell: (r) =>
|
||||
r.codein ? (
|
||||
<span className="text-[var(--text-secondary)]" title={`Code article ${r.codein}`}>
|
||||
Stock {fmtEntier(r.stockLocal ?? 0)}
|
||||
</span>
|
||||
) : (
|
||||
<Badge title="Le réseau vend ce produit, mais il n'est pas dans notre catalogue">Non référencé</Badge>
|
||||
),
|
||||
},
|
||||
], [query]);
|
||||
|
||||
function Th({ children, align = "left" }: { children: React.ReactNode; align?: "left" | "right" | "center" }) {
|
||||
// Classes littérales : Tailwind ne génère pas les classes construites dynamiquement.
|
||||
const alignClass = align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";
|
||||
return (
|
||||
<th
|
||||
className={`px-3 py-2.5 ${alignClass} text-[11px] font-semibold uppercase tracking-wide whitespace-nowrap`}
|
||||
style={{ color: "var(--text-muted)" }}
|
||||
>
|
||||
{children}
|
||||
</th>
|
||||
<DataTable
|
||||
rows={lignes}
|
||||
columns={colonnes}
|
||||
rowKey={(r) => r.codeCentrale}
|
||||
searchIn={rechercherDans}
|
||||
searchPlaceholder="Filtrer les résultats…"
|
||||
pageSize={50}
|
||||
unite={lignes.length > 1 ? "produits" : "produit"}
|
||||
emptyTitle="Aucun produit"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,8 @@
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Search, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/form-controls";
|
||||
|
||||
/**
|
||||
* Champ de recherche produit.
|
||||
@@ -35,43 +37,42 @@ export function ProduitSearchBar({ initialQuery }: { initialQuery: string }) {
|
||||
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative flex-1 max-w-xl">
|
||||
<label htmlFor="recherche-produit" className="block text-sm font-medium text-[var(--text-primary)]">
|
||||
Nom du produit ou code centrale
|
||||
</label>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="relative w-full max-w-xl flex-1">
|
||||
<Search
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none"
|
||||
style={{ color: "var(--text-muted)" }}
|
||||
className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--text-muted)]"
|
||||
aria-hidden
|
||||
/>
|
||||
<input
|
||||
<Input
|
||||
id="recherche-produit"
|
||||
type="text"
|
||||
value={term}
|
||||
onChange={(e) => setTerm(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter") submit(); }}
|
||||
placeholder="Libellé produit ou code centrale…"
|
||||
aria-label="Rechercher un produit par libellé ou code centrale"
|
||||
className="apple-input h-10 text-[14px]"
|
||||
style={{ paddingLeft: "38px", paddingRight: term ? "36px" : undefined }}
|
||||
placeholder="Ex. « poêle 28 » ou « 10000167303 »"
|
||||
aria-describedby={tooShort ? "recherche-produit-aide" : undefined}
|
||||
className="h-10 w-full pl-9 pr-9"
|
||||
/>
|
||||
{term && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={clear}
|
||||
aria-label="Effacer la recherche"
|
||||
className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded-md p-1 transition-colors hover:bg-[var(--bg-elevated)]"
|
||||
style={{ color: "var(--text-muted)" }}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-primary)]"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={submit}
|
||||
disabled={term.trim().length < 3}
|
||||
className="btn-action btn-action-primary disabled:opacity-50"
|
||||
>
|
||||
Rechercher
|
||||
</button>
|
||||
<Button onClick={submit} disabled={term.trim().length < 3} className="h-10">
|
||||
<Search /> Rechercher
|
||||
</Button>
|
||||
</div>
|
||||
{tooShort && (
|
||||
<p className="text-[11px]" style={{ color: "var(--text-muted)" }}>
|
||||
<p id="recherche-produit-aide" className="text-[13px] text-[var(--text-secondary)]">
|
||||
Saisissez au moins 3 caractères.
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -1,361 +1,424 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState, useMemo } from "react";
|
||||
import { ChevronUp, ChevronDown, ChevronsUpDown, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { History, Info, Megaphone, RotateCcw } from "lucide-react";
|
||||
import type { Publicite, PubliciteHistorique } from "./page";
|
||||
import { Badge, StoreBadge, type Ton } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DataTable, type DataColumn, type DataFilter } from "@/components/ui/data-table";
|
||||
import { Select, type SelectOption } from "@/components/ui/form-controls";
|
||||
import { Pagination } from "@/components/ui/pagination";
|
||||
import { ErrorState } from "@/components/ui/states";
|
||||
import { Tabs, useUrlTab } from "@/components/ui/tabs";
|
||||
import { Terme, InfoBulle } from "@/components/ui/tooltip";
|
||||
import { fmtDecimal1, fmtEntier, fmtEur0 } from "@/lib/format";
|
||||
import { nomMagasin } from "@/lib/magasins";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function fmtDate(iso: string) {
|
||||
return new Date(iso).toLocaleDateString("fr-FR", { day: "2-digit", month: "2-digit", year: "numeric" });
|
||||
}
|
||||
function fmtCA(v: number | string) {
|
||||
return new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }).format(Number(v));
|
||||
}
|
||||
function fmtPct(v: number | string) {
|
||||
return Number(v).toFixed(2).replace(".", ",") + " %";
|
||||
}
|
||||
type Vue = "publicites" | "historique";
|
||||
|
||||
type SortKey = "intitule" | "site" | "ca_pub_periode_pub" | "pourc_capub_catotal" | "qte_vendue_pub" | "taux_sortie" | "statut";
|
||||
type SortDir = "asc" | "desc";
|
||||
|
||||
function SortIcon({ col, sortKey, sortDir }: { col: SortKey; sortKey: SortKey; sortDir: SortDir }) {
|
||||
if (col !== sortKey) return <ChevronsUpDown className="inline w-3 h-3 ml-1 opacity-30" />;
|
||||
return sortDir === "asc" ? <ChevronUp className="inline w-3 h-3 ml-1" /> : <ChevronDown className="inline w-3 h-3 ml-1" />;
|
||||
}
|
||||
|
||||
const STATUT_LABELS: Record<string, { label: string; cls: string }> = {
|
||||
en_cours: { label: "En cours", cls: "bg-emerald-100 text-emerald-700" },
|
||||
passee: { label: "Passée", cls: "bg-gray-100 text-gray-600" },
|
||||
a_venir: { label: "À venir", cls: "bg-blue-100 text-blue-700" },
|
||||
const STATUTS: Record<string, { libelle: string; ton: Ton }> = {
|
||||
en_cours: { libelle: "En cours", ton: "succes" },
|
||||
passee: { libelle: "Passée", ton: "neutre" },
|
||||
// Le filtre envoie `passees` à l'API : la même valeur peut revenir sur les lignes.
|
||||
passees: { libelle: "Passée", ton: "neutre" },
|
||||
a_venir: { libelle: "À venir", ton: "accent" },
|
||||
};
|
||||
|
||||
const OPTIONS_STATUT: SelectOption[] = [
|
||||
{ value: "toutes", label: "Toutes" },
|
||||
{ value: "en_cours", label: "En cours" },
|
||||
{ value: "passees", label: "Passées" },
|
||||
{ value: "a_venir", label: "À venir" },
|
||||
];
|
||||
|
||||
/** Pourquoi la liste est vide, selon le statut choisi. */
|
||||
const VIDE_PAR_STATUT: Record<string, string> = {
|
||||
toutes: "Aucune opération publicitaire n'est enregistrée pour le moment.",
|
||||
en_cours: "Aucune opération publicitaire n'est en cours en ce moment.",
|
||||
passees: "Aucune opération publicitaire passée n'a été trouvée.",
|
||||
a_venir: "Aucune opération publicitaire à venir n'est encore enregistrée.",
|
||||
};
|
||||
|
||||
const EXPLICATION_CA_PUB =
|
||||
"Chiffre d'affaires réalisé sur les produits de l'opération pendant sa durée (du premier au dernier jour de la publicité).";
|
||||
|
||||
function fmtDate(iso: string | null | undefined): string {
|
||||
if (!iso) return "—";
|
||||
const d = new Date(iso);
|
||||
if (Number.isNaN(d.getTime())) return "—";
|
||||
return d.toLocaleDateString("fr-FR", { day: "2-digit", month: "2-digit", year: "numeric" });
|
||||
}
|
||||
|
||||
/** Les montants de l'API arrivent parfois en texte : valeur absente ou illisible = 0. */
|
||||
function nombre(v: number | string | null | undefined): number {
|
||||
const n = Number(v);
|
||||
return Number.isFinite(n) ? n : 0;
|
||||
}
|
||||
|
||||
function somme<T>(rows: readonly T[], valeur: (r: T) => number | string | null | undefined): number {
|
||||
return rows.reduce((s, r) => s + nombre(valeur(r)), 0);
|
||||
}
|
||||
|
||||
const libelleStatut = (statut?: string) => STATUTS[statut ?? ""]?.libelle ?? statut ?? "";
|
||||
/** `passee` et `passees` désignent le même statut. */
|
||||
const cleStatut = (statut?: string) => (statut === "passees" ? "passee" : statut || null);
|
||||
|
||||
/** Libellé suivi d'un « i » : explication libre au survol (hors glossaire). */
|
||||
|
||||
function StatutBadge({ statut }: { statut?: string }) {
|
||||
const s = statut ?? "";
|
||||
const cfg = STATUT_LABELS[s] ?? { label: s || "—", cls: "bg-gray-100 text-gray-500" };
|
||||
const s = STATUTS[statut ?? ""];
|
||||
if (s) return <Badge ton={s.ton}>{s.libelle}</Badge>;
|
||||
return statut ? <Badge>{statut}</Badge> : <span className="text-[var(--text-muted)]">—</span>;
|
||||
}
|
||||
|
||||
/** Intitulé d'abord, code de l'opération en petit dessous. */
|
||||
function Operation({ intitule, code }: { intitule: string; code: string }) {
|
||||
return (
|
||||
<span className={`inline-block rounded-full px-2 py-0.5 text-xs font-semibold whitespace-nowrap ${cfg.cls}`}>
|
||||
{cfg.label}
|
||||
<div className="min-w-[220px]">
|
||||
<div className="font-medium text-[var(--text-primary)]">{intitule || "Opération sans intitulé"}</div>
|
||||
{code && <div className="text-xs text-[var(--text-muted)]">Code {code}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Part du CA total : mise en avant à partir de 10 %, puis de 20 %. */
|
||||
function PartCa({ pct }: { pct: number }) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
pct >= 20 ? "font-semibold text-[var(--accent)]" : pct >= 10 ? "font-semibold" : "text-[var(--text-secondary)]",
|
||||
)}
|
||||
>
|
||||
{fmtDecimal1(pct)} %
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** Pied de la colonne « Part du CA total » : somme du CA pub / somme du CA total. */
|
||||
function PartCaTotal({ rows }: { rows: readonly Publicite[] }) {
|
||||
const caPub = somme(rows, (r) => r.ca_pub_periode_pub);
|
||||
const caTotal = somme(rows, (r) => r.ca_total_periode_pub);
|
||||
if (caTotal <= 0) {
|
||||
return <span className="text-[var(--text-muted)]" title="Chiffre d'affaires total inconnu : la part ne peut pas être calculée.">—</span>;
|
||||
}
|
||||
return (
|
||||
<InfoBulle explication="Somme du CA pub période des lignes affichées, divisée par la somme de leur CA total sur les mêmes périodes.">
|
||||
{fmtDecimal1((caPub / caTotal) * 100)} %
|
||||
</InfoBulle>
|
||||
);
|
||||
}
|
||||
|
||||
interface Props {
|
||||
vue: string;
|
||||
vueInitiale: Vue;
|
||||
statut: string;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
publicites: Publicite[];
|
||||
total: number;
|
||||
pages: number;
|
||||
erreurPublicites?: string;
|
||||
historique: PubliciteHistorique[];
|
||||
erreurHistorique?: string;
|
||||
}
|
||||
|
||||
export function PublicitesClient({ vue, statut, page, publicites, total, pages, historique }: Props) {
|
||||
export function PublicitesClient({
|
||||
vueInitiale,
|
||||
statut,
|
||||
page,
|
||||
pageSize,
|
||||
publicites,
|
||||
total,
|
||||
pages,
|
||||
erreurPublicites,
|
||||
historique,
|
||||
erreurHistorique,
|
||||
}: Props) {
|
||||
const router = useRouter();
|
||||
const [chargement, startTransition] = useTransition();
|
||||
const [vue, setVue] = useUrlTab<Vue>("vue", vueInitiale);
|
||||
|
||||
const [filterSite, setFilterSite] = useState<string>("all");
|
||||
const [sortKey, setSortKey] = useState<SortKey>("intitule");
|
||||
const [sortDir, setSortDir] = useState<SortDir>("asc");
|
||||
|
||||
function nav(params: Record<string, string | number>) {
|
||||
const sp = new URLSearchParams({
|
||||
vue, statut, page: String(page), ...Object.fromEntries(Object.entries(params).map(([k, v]) => [k, String(v)])),
|
||||
});
|
||||
router.push(`/publicites?${sp}`);
|
||||
function naviguer(changements: { statut?: string; page?: number }) {
|
||||
const sp = new URLSearchParams({ vue, statut, page: String(page) });
|
||||
if (changements.statut !== undefined) sp.set("statut", changements.statut);
|
||||
if (changements.page !== undefined) sp.set("page", String(changements.page));
|
||||
startTransition(() => router.push(`/publicites?${sp}`));
|
||||
}
|
||||
|
||||
const validPublicites = useMemo(() => publicites.filter(p => p.site !== "000"), [publicites]);
|
||||
const reessayer = (
|
||||
<Button variant="outline" onClick={() => startTransition(() => router.refresh())} disabled={chargement}>
|
||||
<RotateCcw /> Réessayer
|
||||
</Button>
|
||||
);
|
||||
|
||||
const sites = useMemo(() => {
|
||||
const s = new Set(validPublicites.map(p => p.site).filter(Boolean));
|
||||
return Array.from(s).sort();
|
||||
}, [validPublicites]);
|
||||
const validPublicites = useMemo(() => publicites.filter((p) => p.site !== "000"), [publicites]);
|
||||
const plusieursSites = useMemo(() => new Set(validPublicites.map((p) => p.site).filter(Boolean)).size > 1, [validPublicites]);
|
||||
const paginee = pages > 1;
|
||||
|
||||
const SITE_COLORS: Record<string, string> = useMemo(() => {
|
||||
const palette = [
|
||||
"bg-blue-50 text-blue-700", "bg-violet-50 text-violet-700",
|
||||
"bg-emerald-50 text-emerald-700", "bg-rose-50 text-rose-700",
|
||||
"bg-amber-50 text-amber-700", "bg-cyan-50 text-cyan-700",
|
||||
];
|
||||
return Object.fromEntries(sites.map((s, i) => [s, palette[i % palette.length]]));
|
||||
}, [sites]);
|
||||
const filtresPublicites = useMemo<DataFilter<Publicite>[]>(
|
||||
() =>
|
||||
plusieursSites
|
||||
? [{ id: "site", label: "Magasin", valueOf: (p) => p.site || null, optionLabel: (code) => nomMagasin(code), allLabel: "Tous les magasins" }]
|
||||
: [],
|
||||
[plusieursSites],
|
||||
);
|
||||
|
||||
function handleSort(key: SortKey) {
|
||||
if (sortKey === key) setSortDir(d => d === "asc" ? "desc" : "asc");
|
||||
else { setSortKey(key); setSortDir("asc"); }
|
||||
}
|
||||
const colonnesPublicites = useMemo<DataColumn<Publicite>[]>(
|
||||
() => [
|
||||
{
|
||||
id: "operation",
|
||||
header: "Opération",
|
||||
sortValue: (p) => p.intitule,
|
||||
cell: (p) => <Operation intitule={p.intitule} code={p.tcr_code} />,
|
||||
footer: (rows) =>
|
||||
`Total${paginee ? " de la page" : ""} · ${fmtEntier(rows.length)} publicité${rows.length > 1 ? "s" : ""}`,
|
||||
},
|
||||
{
|
||||
id: "statut",
|
||||
header: "Statut",
|
||||
sortValue: (p) => libelleStatut(p.statut),
|
||||
cell: (p) => <StatutBadge statut={p.statut} />,
|
||||
},
|
||||
{
|
||||
id: "site",
|
||||
header: "Magasin",
|
||||
sortValue: (p) => (p.site ? nomMagasin(p.site) : null),
|
||||
cell: (p) => (p.site ? <StoreBadge code={p.site} /> : <span className="text-[var(--text-muted)]">—</span>),
|
||||
},
|
||||
{
|
||||
id: "debut",
|
||||
header: "Début",
|
||||
sortValue: (p) => p.date_debut,
|
||||
cell: (p) => fmtDate(p.date_debut),
|
||||
className: "whitespace-nowrap tabular-nums",
|
||||
},
|
||||
{
|
||||
id: "fin",
|
||||
header: "Fin",
|
||||
sortValue: (p) => p.date_fin,
|
||||
cell: (p) => fmtDate(p.date_fin),
|
||||
className: "whitespace-nowrap tabular-nums",
|
||||
},
|
||||
{
|
||||
id: "caPub",
|
||||
header: <InfoBulle explication={EXPLICATION_CA_PUB}>CA pub période</InfoBulle>,
|
||||
align: "right",
|
||||
sortValue: (p) => nombre(p.ca_pub_periode_pub),
|
||||
cell: (p) => <span className="font-semibold">{fmtEur0(nombre(p.ca_pub_periode_pub))}</span>,
|
||||
footer: (rows) => fmtEur0(somme(rows, (r) => r.ca_pub_periode_pub)),
|
||||
},
|
||||
{
|
||||
id: "partCa",
|
||||
header: <Terme id="partCaTotal" />,
|
||||
align: "right",
|
||||
sortValue: (p) => nombre(p.pourc_capub_catotal),
|
||||
cell: (p) => <PartCa pct={nombre(p.pourc_capub_catotal)} />,
|
||||
footer: (rows) => <PartCaTotal rows={rows} />,
|
||||
},
|
||||
{
|
||||
id: "quantite",
|
||||
header: "Quantité vendue",
|
||||
align: "right",
|
||||
sortValue: (p) => nombre(p.qte_vendue_pub),
|
||||
cell: (p) => fmtEntier(nombre(p.qte_vendue_pub)),
|
||||
footer: (rows) => fmtEntier(somme(rows, (r) => r.qte_vendue_pub)),
|
||||
},
|
||||
{
|
||||
id: "clients",
|
||||
header: "Clients",
|
||||
align: "right",
|
||||
sortValue: (p) => nombre(p.client_pub_periode),
|
||||
cell: (p) => fmtEntier(nombre(p.client_pub_periode)),
|
||||
},
|
||||
{
|
||||
id: "tauxSortie",
|
||||
header: <Terme id="tauxSortie" />,
|
||||
align: "right",
|
||||
sortValue: (p) => nombre(p.taux_sortie),
|
||||
cell: (p) => `${fmtDecimal1(nombre(p.taux_sortie))} %`,
|
||||
},
|
||||
{
|
||||
id: "articles",
|
||||
header: "Nb articles",
|
||||
align: "right",
|
||||
sortValue: (p) => nombre(p.nb_articles),
|
||||
cell: (p) => fmtEntier(nombre(p.nb_articles)),
|
||||
},
|
||||
],
|
||||
[paginee],
|
||||
);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
let rows = filterSite === "all" ? validPublicites : validPublicites.filter(p => p.site === filterSite);
|
||||
return [...rows].sort((a, b) => {
|
||||
const va = (sortKey === "intitule" || sortKey === "site" || sortKey === "statut")
|
||||
? String(a[sortKey] ?? "").toLowerCase()
|
||||
: Number(a[sortKey as keyof Publicite]);
|
||||
const vb = (sortKey === "intitule" || sortKey === "site" || sortKey === "statut")
|
||||
? String(b[sortKey] ?? "").toLowerCase()
|
||||
: Number(b[sortKey as keyof Publicite]);
|
||||
if (va < vb) return sortDir === "asc" ? -1 : 1;
|
||||
if (va > vb) return sortDir === "asc" ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
}, [validPublicites, filterSite, sortKey, sortDir]);
|
||||
const filtresHistorique = useMemo<DataFilter<PubliciteHistorique>[]>(
|
||||
() => [{ id: "statut", label: "Statut", valueOf: (h) => cleStatut(h.statut), optionLabel: (s) => libelleStatut(s), allLabel: "Tous" }],
|
||||
[],
|
||||
);
|
||||
|
||||
function thProps(key: SortKey, cls = "") {
|
||||
return { className: `${cls} cursor-pointer select-none hover:bg-gray-100 transition-colors`, onClick: () => handleSort(key) };
|
||||
}
|
||||
const colonnesHistorique = useMemo<DataColumn<PubliciteHistorique>[]>(
|
||||
() => [
|
||||
{
|
||||
id: "operation",
|
||||
header: "Opération",
|
||||
sortValue: (h) => h.intitule,
|
||||
cell: (h) => <Operation intitule={h.intitule} code={h.tcr_code} />,
|
||||
footer: (rows) => `Total · ${fmtEntier(rows.length)} opération${rows.length > 1 ? "s" : ""}`,
|
||||
},
|
||||
{
|
||||
id: "statut",
|
||||
header: "Statut",
|
||||
sortValue: (h) => libelleStatut(h.statut),
|
||||
cell: (h) => <StatutBadge statut={h.statut} />,
|
||||
},
|
||||
{
|
||||
id: "debut",
|
||||
header: "Début",
|
||||
sortValue: (h) => h.date_debut,
|
||||
cell: (h) => fmtDate(h.date_debut),
|
||||
className: "whitespace-nowrap tabular-nums",
|
||||
},
|
||||
{
|
||||
id: "fin",
|
||||
header: "Fin",
|
||||
sortValue: (h) => h.date_fin,
|
||||
cell: (h) => fmtDate(h.date_fin),
|
||||
className: "whitespace-nowrap tabular-nums",
|
||||
},
|
||||
{
|
||||
id: "magasins",
|
||||
header: "Magasins",
|
||||
hint: "Nombre de magasins concernés par l'opération.",
|
||||
align: "right",
|
||||
sortValue: (h) => nombre(h.nb_sites),
|
||||
cell: (h) => fmtEntier(nombre(h.nb_sites)),
|
||||
},
|
||||
{
|
||||
id: "ca",
|
||||
header: "CA total",
|
||||
hint: "Chiffre d'affaires de l'opération, tous magasins confondus.",
|
||||
align: "right",
|
||||
sortValue: (h) => nombre(h.ca_total),
|
||||
cell: (h) => <span className="font-semibold">{fmtEur0(nombre(h.ca_total))}</span>,
|
||||
footer: (rows) => fmtEur0(somme(rows, (r) => r.ca_total)),
|
||||
},
|
||||
{
|
||||
id: "quantite",
|
||||
header: "Quantité vendue",
|
||||
align: "right",
|
||||
sortValue: (h) => nombre(h.qte_totale),
|
||||
cell: (h) => fmtEntier(nombre(h.qte_totale)),
|
||||
footer: (rows) => fmtEntier(somme(rows, (r) => r.qte_totale)),
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
const isHistorique = vue === "historique";
|
||||
const onglets = [
|
||||
{ value: "publicites", label: "Publicités", icon: Megaphone, count: erreurPublicites ? undefined : total },
|
||||
{ value: "historique", label: "Historique", icon: History, count: erreurHistorique ? undefined : historique.length },
|
||||
] as const;
|
||||
|
||||
const selectStatut = (
|
||||
<Select
|
||||
id="publicites-statut"
|
||||
label="Statut"
|
||||
value={statut}
|
||||
options={OPTIONS_STATUT}
|
||||
onChange={(v) => naviguer({ statut: v, page: 1 })}
|
||||
disabled={chargement}
|
||||
/>
|
||||
);
|
||||
|
||||
const descriptionVide =
|
||||
page > 1 && total > 0 ? (
|
||||
<>
|
||||
Cette page ne contient aucune publicité.{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => naviguer({ page: 1 })}
|
||||
className="font-medium text-[var(--accent)] underline underline-offset-2"
|
||||
>
|
||||
Revenir à la première page
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{VIDE_PAR_STATUT[statut] ?? VIDE_PAR_STATUT.toutes}
|
||||
{statut !== "toutes" && " Choisissez « Toutes » dans le filtre Statut pour voir les autres opérations."}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* ── Onglets ── */}
|
||||
<div className="flex gap-2 border-b border-gray-200">
|
||||
{[
|
||||
{ key: "publicites", label: `Publicités${total ? ` (${total})` : ""}` },
|
||||
{ key: "historique", label: `Historique${historique.length ? ` (${historique.length})` : ""}` },
|
||||
].map(t => (
|
||||
<button
|
||||
key={t.key}
|
||||
onClick={() => nav({ vue: t.key, page: 1 })}
|
||||
className={`px-4 py-2 text-sm font-semibold border-b-2 -mb-px transition-colors ${
|
||||
vue === t.key
|
||||
? "border-orange-500 text-orange-600"
|
||||
: "border-transparent text-gray-500 hover:text-gray-700"
|
||||
}`}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="space-y-5">
|
||||
<Tabs items={onglets} value={vue} onChange={setVue} />
|
||||
|
||||
{/* ── Barre de contrôles ── */}
|
||||
<div className="flex flex-wrap items-end gap-4 rounded-xl bg-white px-5 py-4 shadow-sm border border-gray-100">
|
||||
{!isHistorique && (
|
||||
<>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-semibold text-gray-500">Statut</label>
|
||||
<select
|
||||
value={statut}
|
||||
onChange={e => nav({ vue, statut: e.target.value, page: 1 })}
|
||||
className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-400 min-w-[160px]"
|
||||
>
|
||||
<option value="toutes">Toutes</option>
|
||||
<option value="en_cours">En cours</option>
|
||||
<option value="passees">Passées</option>
|
||||
<option value="a_venir">À venir</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{sites.length > 1 && (
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-semibold text-gray-500">Magasin</label>
|
||||
<select
|
||||
value={filterSite}
|
||||
onChange={e => setFilterSite(e.target.value)}
|
||||
className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-400 min-w-[160px]"
|
||||
>
|
||||
<option value="all">Tous les magasins</option>
|
||||
{sites.map(s => <option key={s} value={s}>{s}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="h-8 w-px bg-gray-200 self-center" />
|
||||
|
||||
<span className="rounded-full bg-gray-100 px-3 py-1 text-sm font-medium text-gray-600 self-center">
|
||||
{total} publicité{total !== 1 ? "s" : ""} au total
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isHistorique && (
|
||||
<span className="rounded-full bg-gray-100 px-3 py-1 text-sm font-medium text-gray-600 self-center">
|
||||
{historique.length} opération{historique.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Vue Publicités ── */}
|
||||
{!isHistorique && (
|
||||
<>
|
||||
<div className="overflow-x-auto rounded-xl bg-white shadow-sm border border-gray-100">
|
||||
{filtered.length === 0 ? (
|
||||
<div className="py-16 text-center text-gray-400 text-sm">Aucune publicité trouvée.</div>
|
||||
) : (
|
||||
<table className="w-full border-collapse text-sm">
|
||||
<thead>
|
||||
<tr className="border-b-2 border-gray-200 bg-gray-50">
|
||||
<th className="px-3 py-3 text-left text-xs font-semibold text-gray-500 w-20">N°</th>
|
||||
<th {...thProps("intitule", "px-3 py-3 text-left text-xs font-semibold text-gray-500")}>
|
||||
Opération <SortIcon col="intitule" sortKey={sortKey} sortDir={sortDir} />
|
||||
</th>
|
||||
<th {...thProps("statut", "px-3 py-3 text-left text-xs font-semibold text-gray-500 whitespace-nowrap")}>
|
||||
Statut <SortIcon col="statut" sortKey={sortKey} sortDir={sortDir} />
|
||||
</th>
|
||||
<th {...thProps("site", "px-3 py-3 text-left text-xs font-semibold text-gray-500 whitespace-nowrap")}>
|
||||
Magasin <SortIcon col="site" sortKey={sortKey} sortDir={sortDir} />
|
||||
</th>
|
||||
<th className="px-3 py-3 text-center text-xs font-semibold text-gray-500 whitespace-nowrap">Date début</th>
|
||||
<th className="px-3 py-3 text-center text-xs font-semibold text-gray-500 whitespace-nowrap">Date fin</th>
|
||||
<th {...thProps("ca_pub_periode_pub", "px-3 py-3 text-right text-xs font-semibold text-orange-600 whitespace-nowrap bg-orange-50")}>
|
||||
CA pub période <SortIcon col="ca_pub_periode_pub" sortKey={sortKey} sortDir={sortDir} />
|
||||
</th>
|
||||
<th {...thProps("pourc_capub_catotal", "px-3 py-3 text-right text-xs font-semibold text-orange-600 whitespace-nowrap bg-orange-50")}>
|
||||
% CA total <SortIcon col="pourc_capub_catotal" sortKey={sortKey} sortDir={sortDir} />
|
||||
</th>
|
||||
<th {...thProps("qte_vendue_pub", "px-3 py-3 text-right text-xs font-semibold text-gray-500 whitespace-nowrap")}>
|
||||
Qté vendue <SortIcon col="qte_vendue_pub" sortKey={sortKey} sortDir={sortDir} />
|
||||
</th>
|
||||
<th className="px-3 py-3 text-right text-xs font-semibold text-gray-500 whitespace-nowrap">Clients</th>
|
||||
<th {...thProps("taux_sortie", "px-3 py-3 text-right text-xs font-semibold text-gray-500 whitespace-nowrap")}>
|
||||
Taux sortie <SortIcon col="taux_sortie" sortKey={sortKey} sortDir={sortDir} />
|
||||
</th>
|
||||
<th className="px-3 py-3 text-right text-xs font-semibold text-gray-500 whitespace-nowrap">Nb articles</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filtered.map((pub, idx) => (
|
||||
<tr key={`${pub.tcr_code}-${pub.site}-${idx}`} className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
|
||||
<td className="px-3 py-2.5 font-mono text-xs text-gray-400">{pub.tcr_code}</td>
|
||||
<td className="px-3 py-2.5 text-gray-900 font-medium">{pub.intitule}</td>
|
||||
<td className="px-3 py-2.5"><StatutBadge statut={pub.statut} /></td>
|
||||
<td className="px-3 py-2.5 text-xs text-gray-600 whitespace-nowrap">
|
||||
<span className={`inline-block rounded-md px-2 py-0.5 font-medium ${SITE_COLORS[pub.site] ?? "bg-gray-100 text-gray-600"}`}>
|
||||
{pub.site || "—"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-center text-xs text-gray-600 whitespace-nowrap tabular-nums">{fmtDate(pub.date_debut)}</td>
|
||||
<td className="px-3 py-2.5 text-center text-xs text-gray-600 whitespace-nowrap tabular-nums">{fmtDate(pub.date_fin)}</td>
|
||||
<td className="bg-orange-50/60 px-3 py-2.5 text-right font-semibold tabular-nums text-gray-900">{fmtCA(pub.ca_pub_periode_pub)}</td>
|
||||
<td className="bg-orange-50/60 px-3 py-2.5 text-right tabular-nums">
|
||||
<span className={`inline-block rounded-full px-2 py-0.5 text-xs font-semibold ${
|
||||
Number(pub.pourc_capub_catotal) >= 20 ? "bg-orange-100 text-orange-700"
|
||||
: Number(pub.pourc_capub_catotal) >= 10 ? "bg-amber-100 text-amber-700"
|
||||
: "bg-gray-100 text-gray-600"
|
||||
}`}>
|
||||
{fmtPct(pub.pourc_capub_catotal)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-right tabular-nums text-gray-700 text-xs">{Number(pub.qte_vendue_pub).toLocaleString("fr-FR")}</td>
|
||||
<td className="px-3 py-2.5 text-right tabular-nums text-gray-700 text-xs">{Number(pub.client_pub_periode).toLocaleString("fr-FR")}</td>
|
||||
<td className="px-3 py-2.5 text-right tabular-nums text-gray-700 text-xs">{Number(pub.taux_sortie).toFixed(1).replace(".", ",")} %</td>
|
||||
<td className="px-3 py-2.5 text-right tabular-nums text-gray-500 text-xs">{pub.nb_articles}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="border-t-2 border-gray-300 bg-gray-50">
|
||||
<td colSpan={6} className="px-4 py-3 text-sm font-bold text-gray-800">
|
||||
TOTAL — {filtered.length} publicité{filtered.length !== 1 ? "s" : ""} (page {page}/{pages})
|
||||
</td>
|
||||
<td className="bg-orange-100 px-3 py-3 text-right font-bold tabular-nums text-gray-900">
|
||||
{fmtCA(filtered.reduce((s, p) => s + Number(p.ca_pub_periode_pub), 0))}
|
||||
</td>
|
||||
<td className="bg-orange-100 px-3 py-3 text-right text-xs font-semibold text-orange-700">—</td>
|
||||
<td className="px-3 py-3 text-right font-bold tabular-nums text-gray-700 text-xs">
|
||||
{filtered.reduce((s, p) => s + Number(p.qte_vendue_pub), 0).toLocaleString("fr-FR")}
|
||||
</td>
|
||||
<td colSpan={3} />
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Pagination ── */}
|
||||
{pages > 1 && (
|
||||
<div className="flex items-center justify-between rounded-xl bg-white px-5 py-3 shadow-sm border border-gray-100">
|
||||
<span className="text-sm text-gray-500">
|
||||
Page <strong>{page}</strong> sur <strong>{pages}</strong> — {total} publicités
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
disabled={page <= 1}
|
||||
onClick={() => nav({ vue, statut, page: page - 1 })}
|
||||
className="flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" /> Préc.
|
||||
</button>
|
||||
{/* Pages around current */}
|
||||
{Array.from({ length: Math.min(pages, 7) }, (_, i) => {
|
||||
const p = pages <= 7 ? i + 1 : Math.max(1, page - 3) + i;
|
||||
if (p > pages) return null;
|
||||
return (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => nav({ vue, statut, page: p })}
|
||||
className={`rounded-lg px-3 py-1.5 text-sm font-medium ${
|
||||
p === page
|
||||
? "bg-orange-500 text-white"
|
||||
: "border border-gray-300 text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<button
|
||||
disabled={page >= pages}
|
||||
onClick={() => nav({ vue, statut, page: page + 1 })}
|
||||
className="flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
Suiv. <ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ── Vue Historique ── */}
|
||||
{isHistorique && (
|
||||
<div className="overflow-x-auto rounded-xl bg-white shadow-sm border border-gray-100">
|
||||
{historique.length === 0 ? (
|
||||
<div className="py-16 text-center text-gray-400 text-sm">Aucun historique disponible.</div>
|
||||
<div aria-busy={chargement} className={cn("transition-opacity", chargement && "pointer-events-none opacity-60")}>
|
||||
{vue === "publicites" ? (
|
||||
erreurPublicites ? (
|
||||
<ErrorState
|
||||
title="Les publicités n'ont pas pu être chargées"
|
||||
description="Le serveur des publicités n'a pas répondu correctement. Réessayez dans un instant ; si le problème persiste, prévenez un administrateur."
|
||||
detail={erreurPublicites}
|
||||
action={reessayer}
|
||||
/>
|
||||
) : (
|
||||
<table className="w-full border-collapse text-sm">
|
||||
<thead>
|
||||
<tr className="border-b-2 border-gray-200 bg-gray-50">
|
||||
<th className="px-3 py-3 text-left text-xs font-semibold text-gray-500 w-20">N°</th>
|
||||
<th className="px-3 py-3 text-left text-xs font-semibold text-gray-500">Opération</th>
|
||||
<th className="px-3 py-3 text-left text-xs font-semibold text-gray-500">Statut</th>
|
||||
<th className="px-3 py-3 text-center text-xs font-semibold text-gray-500 whitespace-nowrap">Date début</th>
|
||||
<th className="px-3 py-3 text-center text-xs font-semibold text-gray-500 whitespace-nowrap">Date fin</th>
|
||||
<th className="px-3 py-3 text-center text-xs font-semibold text-gray-500 whitespace-nowrap">Sites</th>
|
||||
<th className="px-3 py-3 text-right text-xs font-semibold text-orange-600 whitespace-nowrap bg-orange-50">CA total</th>
|
||||
<th className="px-3 py-3 text-right text-xs font-semibold text-gray-500 whitespace-nowrap">Qté totale</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{historique.map((h, idx) => (
|
||||
<tr key={`${h.tcr_code}-${idx}`} className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
|
||||
<td className="px-3 py-2.5 font-mono text-xs text-gray-400">{h.tcr_code}</td>
|
||||
<td className="px-3 py-2.5 text-gray-900 font-medium">{h.intitule}</td>
|
||||
<td className="px-3 py-2.5"><StatutBadge statut={h.statut} /></td>
|
||||
<td className="px-3 py-2.5 text-center text-xs text-gray-600 whitespace-nowrap tabular-nums">{fmtDate(h.date_debut)}</td>
|
||||
<td className="px-3 py-2.5 text-center text-xs text-gray-600 whitespace-nowrap tabular-nums">{fmtDate(h.date_fin)}</td>
|
||||
<td className="px-3 py-2.5 text-center text-xs text-gray-500">{h.nb_sites}</td>
|
||||
<td className="bg-orange-50/60 px-3 py-2.5 text-right font-semibold tabular-nums text-gray-900">{fmtCA(h.ca_total)}</td>
|
||||
<td className="px-3 py-2.5 text-right tabular-nums text-gray-700 text-xs">{Number(h.qte_totale).toLocaleString("fr-FR")}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="border-t-2 border-gray-300 bg-gray-50">
|
||||
<td colSpan={6} className="px-4 py-3 text-sm font-bold text-gray-800">
|
||||
TOTAL — {historique.length} opérations
|
||||
</td>
|
||||
<td className="bg-orange-100 px-3 py-3 text-right font-bold tabular-nums text-gray-900">
|
||||
{fmtCA(historique.reduce((s, h) => s + Number(h.ca_total), 0))}
|
||||
</td>
|
||||
<td className="px-3 py-3 text-right font-bold tabular-nums text-gray-700 text-xs">
|
||||
{historique.reduce((s, h) => s + Number(h.qte_totale), 0).toLocaleString("fr-FR")}
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-3">
|
||||
{paginee && (
|
||||
<p className="flex items-start gap-2 text-[13px] text-[var(--text-secondary)]">
|
||||
<Info className="mt-0.5 h-4 w-4 shrink-0 text-[var(--text-muted)]" aria-hidden />
|
||||
<span>
|
||||
<span className="font-semibold text-[var(--text-primary)]">
|
||||
Tri et filtre magasin appliqués à cette page.
|
||||
</span>{" "}
|
||||
Les publicités sont chargées par pages de {fmtEntier(pageSize)} (page {fmtEntier(page)} sur{" "}
|
||||
{fmtEntier(pages)}) : la ligne Total ne porte, elle aussi, que sur la page affichée.
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
<DataTable
|
||||
rows={validPublicites}
|
||||
columns={colonnesPublicites}
|
||||
rowKey={(p, i) => `${p.tcr_code}-${p.site}-${i}`}
|
||||
filters={filtresPublicites}
|
||||
toolbar={selectStatut}
|
||||
pageSize={0}
|
||||
unite="publicités"
|
||||
showFooter
|
||||
initialSort={{ id: "operation", dir: "asc" }}
|
||||
emptyTitle="Aucune publicité à afficher"
|
||||
emptyDescription={descriptionVide}
|
||||
/>
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={pages}
|
||||
total={total}
|
||||
pageSize={pageSize}
|
||||
onChange={(p) => naviguer({ page: p })}
|
||||
unite="publicités"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
) : erreurHistorique ? (
|
||||
<ErrorState
|
||||
title="L'historique n'a pas pu être chargé"
|
||||
description="Le serveur des publicités n'a pas répondu correctement. Réessayez dans un instant ; si le problème persiste, prévenez un administrateur."
|
||||
detail={erreurHistorique}
|
||||
action={reessayer}
|
||||
/>
|
||||
) : (
|
||||
<DataTable
|
||||
rows={historique}
|
||||
columns={colonnesHistorique}
|
||||
rowKey={(h, i) => `${h.tcr_code}-${i}`}
|
||||
searchIn={(h) => [h.intitule, h.tcr_code]}
|
||||
searchPlaceholder="Rechercher une opération ou un code…"
|
||||
filters={filtresHistorique}
|
||||
unite="opérations"
|
||||
showFooter
|
||||
emptyTitle="Aucune opération dans l'historique"
|
||||
emptyDescription="L'historique des opérations publicitaires est vide pour le moment."
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import LoadingModal from "@/components/shared/loading-modal";
|
||||
import { PageSkeleton } from "@/components/ui/states";
|
||||
|
||||
export default function PublicitesLoading() {
|
||||
return <LoadingModal message="Chargement des données" subMessage="Récupération des publicités..." />;
|
||||
/** Silhouette de la page pendant le chargement, sans bloquer l'écran. */
|
||||
export default function Loading() {
|
||||
return <PageSkeleton rows={10} />;
|
||||
}
|
||||
@@ -1,4 +1,10 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Megaphone } from "lucide-react";
|
||||
import { PageHeader } from "@/components/ui/page-header";
|
||||
import { PublicitesClient } from "./client";
|
||||
import { cachedFF } from "@/lib/ff-cache";
|
||||
|
||||
export const metadata: Metadata = { title: "Publicités" };
|
||||
|
||||
export interface Publicite {
|
||||
tcr_code: string;
|
||||
@@ -40,17 +46,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<PublicitesResult> {
|
||||
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<PublicitesResult> {
|
||||
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 +83,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<HistoriqueResult> {
|
||||
return cachedFF("publicites-historique", fetchHistoriqueApi, {
|
||||
ttlMs: PUB_CACHE_TTL_MS,
|
||||
cacheIf: (r) => !r.error,
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchHistoriqueApi(): Promise<HistoriqueResult> {
|
||||
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[] };
|
||||
@@ -87,27 +119,25 @@ export default async function PublicitesPage(props: {
|
||||
fetchHistorique(),
|
||||
]);
|
||||
|
||||
const error = pubResult.error ?? histoResult.error;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 p-6">
|
||||
<div className="mx-auto max-w-screen-xl">
|
||||
<h1 className="mb-6 text-3xl font-bold text-gray-900">Publicités</h1>
|
||||
{error && (
|
||||
<div className="mb-4 rounded-xl border border-red-200 bg-red-50 px-5 py-4 text-sm text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<PublicitesClient
|
||||
vue={vue}
|
||||
statut={statut}
|
||||
page={page}
|
||||
publicites={pubResult.data}
|
||||
total={pubResult.total}
|
||||
pages={pubResult.pages}
|
||||
historique={histoResult.data}
|
||||
/>
|
||||
</div>
|
||||
<div className="mx-auto w-full max-w-screen-2xl">
|
||||
<PageHeader
|
||||
icon={Megaphone}
|
||||
title="Publicités"
|
||||
description="Résultats des opérations publicitaires (en cours, passées, à venir) et leur poids dans les ventes de vos magasins."
|
||||
/>
|
||||
<PublicitesClient
|
||||
vueInitiale={vue === "historique" ? "historique" : "publicites"}
|
||||
statut={statut}
|
||||
page={page}
|
||||
pageSize={PAGE_SIZE}
|
||||
publicites={pubResult.data}
|
||||
total={pubResult.total}
|
||||
pages={pubResult.pages}
|
||||
erreurPublicites={pubResult.error}
|
||||
historique={histoResult.data}
|
||||
erreurHistorique={histoResult.error}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,649 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState, type ReactNode } from "react";
|
||||
import {
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
Eye,
|
||||
EyeOff,
|
||||
FileText,
|
||||
KeyRound,
|
||||
Loader2,
|
||||
PlugZap,
|
||||
RefreshCw,
|
||||
RotateCcw,
|
||||
Save,
|
||||
Settings,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { PageHeader } from "@/components/ui/page-header";
|
||||
import { Tabs, useUrlTab, type TabItem } from "@/components/ui/tabs";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input, Label } from "@/components/ui/form-controls";
|
||||
import { Terme } from "@/components/ui/tooltip";
|
||||
import { toast } from "@/components/ui/feedback";
|
||||
import { fmtEntier } from "@/lib/format";
|
||||
import { isStaleServerActionError, STALE_ACTION_MESSAGE } from "@/lib/stale-action";
|
||||
import { useDbSettingsStore } from "@/features/settings/store/use-db-settings-store";
|
||||
import {
|
||||
testDatabaseConnection,
|
||||
saveDatabaseSettings,
|
||||
getSavedDatabaseConfig,
|
||||
saveQlikSettings,
|
||||
testQlikConnection,
|
||||
saveFfApiSettings,
|
||||
testFfApiConnection,
|
||||
} from "@/features/settings/actions";
|
||||
import { UserManagement } from "@/features/admin/components/user-management";
|
||||
import { ApiKeyManagement } from "@/features/admin/components/api-key-management";
|
||||
import { ApiConnectionInfo } from "@/features/admin/components/api-connection-info";
|
||||
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<typeof getSavedDatabaseConfig> | null = null;
|
||||
function loadSavedConfig(force = false): ReturnType<typeof getSavedDatabaseConfig> {
|
||||
if (force || !savedConfigPromise) {
|
||||
savedConfigPromise = getSavedDatabaseConfig().catch((e) => {
|
||||
savedConfigPromise = null;
|
||||
throw e;
|
||||
});
|
||||
}
|
||||
return savedConfigPromise;
|
||||
}
|
||||
|
||||
/** Message lisible d'une erreur de server action (onglet périmé compris). */
|
||||
function messageErreur(e: unknown): string {
|
||||
if (isStaleServerActionError(e)) return STALE_ACTION_MESSAGE;
|
||||
return e instanceof Error ? e.message : String(e);
|
||||
}
|
||||
|
||||
function fmtDateHeure(valeur: string | null | undefined): string {
|
||||
if (!valeur) return "—";
|
||||
const d = new Date(valeur);
|
||||
return isNaN(d.getTime()) ? valeur : d.toLocaleString("fr-FR");
|
||||
}
|
||||
|
||||
// ── Onglets ──────────────────────────────────────────────────────────────────
|
||||
|
||||
type Onglet = "connexions" | "utilisateurs" | "api" | "journal";
|
||||
|
||||
const ONGLETS: readonly TabItem<Onglet>[] = [
|
||||
{ value: "connexions", label: "Connexions", icon: PlugZap },
|
||||
{ value: "utilisateurs", label: "Utilisateurs", icon: Users },
|
||||
{ value: "api", label: "Accès API", icon: KeyRound },
|
||||
{ value: "journal", label: "Journal serveur", icon: FileText },
|
||||
];
|
||||
|
||||
function estOnglet(v: string | undefined): v is Onglet {
|
||||
return ONGLETS.some((o) => o.value === v);
|
||||
}
|
||||
|
||||
/**
|
||||
* Contenu d'un onglet : monté à la première visite puis seulement masqué, pour
|
||||
* qu'une saisie non enregistrée survive au changement d'onglet et que rien ne
|
||||
* soit rechargé en revenant.
|
||||
*/
|
||||
function Panneau({ actif, visite, children }: { actif: boolean; visite: boolean; children: ReactNode }) {
|
||||
if (!visite) return null;
|
||||
return (
|
||||
<div role="tabpanel" hidden={!actif} className="space-y-6">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Éléments de formulaire ───────────────────────────────────────────────────
|
||||
|
||||
function Champ({ id, label, aide, children, className }: {
|
||||
id: string;
|
||||
label: ReactNode;
|
||||
aide?: ReactNode;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={className}>
|
||||
<Label htmlFor={id}>{label}</Label>
|
||||
{children}
|
||||
{aide && <p className="mt-1 text-xs text-[var(--text-muted)]">{aide}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type EtatTest = { etat: "idle" } | { etat: "en-cours" } | { etat: "ok" } | { etat: "erreur"; message: string };
|
||||
|
||||
/** Résultat d'un test de connexion, affiché à côté des boutons. */
|
||||
function ResultatTest({ test }: { test: EtatTest }) {
|
||||
if (test.etat === "ok") {
|
||||
return (
|
||||
<Badge ton="succes">
|
||||
<CheckCircle2 className="h-3.5 w-3.5" aria-hidden /> Connexion réussie
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
if (test.etat === "erreur") {
|
||||
return (
|
||||
<p role="alert" className="flex items-start gap-1.5 text-[13px] text-[var(--accent-error)]">
|
||||
<AlertCircle className="mt-0.5 h-4 w-4 shrink-0" aria-hidden />
|
||||
<span>
|
||||
<span className="font-semibold">Connexion impossible.</span>{" "}
|
||||
<span className="text-[var(--text-secondary)]">{test.message}</span>
|
||||
</span>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// ── PostgreSQL ───────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* `motDePasseEnregistre` : le serveur ne renvoie jamais le mot de passe, seulement
|
||||
* qu'il en existe un. Le champ reste alors vide et « vide » veut dire « inchangé ».
|
||||
*/
|
||||
function SectionPostgres({ recharger, motDePasseEnregistre }: { recharger: () => Promise<void>; motDePasseEnregistre: boolean }) {
|
||||
const {
|
||||
host, setHost,
|
||||
port, setPort,
|
||||
database, setDatabase,
|
||||
user, setUser,
|
||||
password, setPassword,
|
||||
ssl, setSsl,
|
||||
getDatabaseUrl,
|
||||
} = useDbSettingsStore();
|
||||
|
||||
const [test, setTest] = useState<EtatTest>({ etat: "idle" });
|
||||
const [enregistrement, setEnregistrement] = useState(false);
|
||||
const [rechargement, setRechargement] = useState(false);
|
||||
|
||||
const tester = async () => {
|
||||
setTest({ etat: "en-cours" });
|
||||
try {
|
||||
const res = await testDatabaseConnection(getDatabaseUrl());
|
||||
setTest(res.success ? { etat: "ok" } : { etat: "erreur", message: res.error || "Erreur de connexion inconnue." });
|
||||
} catch (e) {
|
||||
setTest({ etat: "erreur", message: messageErreur(e) });
|
||||
}
|
||||
};
|
||||
|
||||
const enregistrer = async () => {
|
||||
setEnregistrement(true);
|
||||
try {
|
||||
const res = await saveDatabaseSettings(getDatabaseUrl());
|
||||
if (res.success) {
|
||||
toast.succes("Connexion à la base PostgreSQL enregistrée.");
|
||||
// Un mot de passe vient d'être saisi : on relit la config pour vider
|
||||
// le champ et afficher qu'il est désormais enregistré.
|
||||
if (password) await recharger().catch(() => { /* simple rafraîchissement */ });
|
||||
} else toast.erreur(`Enregistrement impossible : ${res.error ?? "erreur inconnue"}`);
|
||||
} catch (e) {
|
||||
toast.erreur(`Enregistrement impossible : ${messageErreur(e)}`);
|
||||
} finally {
|
||||
setEnregistrement(false);
|
||||
}
|
||||
};
|
||||
|
||||
const rechargerConfig = async () => {
|
||||
setRechargement(true);
|
||||
try {
|
||||
await recharger();
|
||||
toast.info("Les valeurs enregistrées sur le serveur ont été rechargées.");
|
||||
} catch (e) {
|
||||
toast.erreur(`La configuration n'a pas pu être relue : ${messageErreur(e)}`);
|
||||
} finally {
|
||||
setRechargement(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="Base de données de l'application (PostgreSQL)"
|
||||
description="Contient les comptes utilisateurs, l'historique des sessions et les réglages. Les produits et les ventes, eux, viennent de l'API FF Nancy."
|
||||
/>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Champ
|
||||
id="pg-hote"
|
||||
label="Serveur"
|
||||
aide="Adresse du serveur : localhost, une adresse IP (192.168.1.10) ou le nom du service Docker (postgres, db)."
|
||||
className="sm:col-span-2"
|
||||
>
|
||||
<Input id="pg-hote" className="w-full font-mono" placeholder="localhost" value={host}
|
||||
onChange={(e) => setHost(e.target.value)} />
|
||||
</Champ>
|
||||
<Champ id="pg-port" label="Port" aide="5432 dans la plupart des installations.">
|
||||
<Input id="pg-port" className="w-full font-mono" placeholder="5432" value={port}
|
||||
onChange={(e) => setPort(e.target.value)} />
|
||||
</Champ>
|
||||
<Champ id="pg-base" label="Nom de la base">
|
||||
<Input id="pg-base" className="w-full font-mono" placeholder="collectflow" value={database}
|
||||
onChange={(e) => setDatabase(e.target.value)} />
|
||||
</Champ>
|
||||
<Champ id="pg-utilisateur" label="Utilisateur">
|
||||
<Input id="pg-utilisateur" className="w-full font-mono" placeholder="postgres" value={user}
|
||||
onChange={(e) => setUser(e.target.value)} autoComplete="off" />
|
||||
</Champ>
|
||||
<Champ
|
||||
id="pg-mdp"
|
||||
label="Mot de passe"
|
||||
aide={motDePasseEnregistre ? "Laissez vide pour garder le mot de passe enregistré (même serveur et même utilisateur)." : undefined}
|
||||
>
|
||||
<Input id="pg-mdp" type="password" className="w-full font-mono"
|
||||
placeholder={motDePasseEnregistre ? "Enregistré — inchangé si vide" : "••••••••"}
|
||||
value={password || ""} onChange={(e) => setPassword(e.target.value)} autoComplete="new-password" />
|
||||
</Champ>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="pg-ssl" className="inline-flex cursor-pointer items-center gap-2 text-sm text-[var(--text-primary)]">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="pg-ssl"
|
||||
checked={ssl}
|
||||
onChange={(e) => setSsl(e.target.checked)}
|
||||
className="h-4 w-4 cursor-pointer accent-[var(--accent)]"
|
||||
/>
|
||||
Connexion chiffrée (SSL)
|
||||
</label>
|
||||
<p className="mt-1 text-xs text-[var(--text-muted)]">
|
||||
À cocher si le serveur de base de données l'exige, en général quand il est hébergé à distance.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 border-t border-[var(--border)] pt-4">
|
||||
<Button onClick={enregistrer} disabled={enregistrement}>
|
||||
{enregistrement ? <Loader2 className="animate-spin" /> : <Save />}
|
||||
Enregistrer
|
||||
</Button>
|
||||
<Button variant="outline" onClick={tester} disabled={test.etat === "en-cours"}>
|
||||
{test.etat === "en-cours" ? <Loader2 className="animate-spin" /> : <RefreshCw />}
|
||||
Tester la connexion
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={rechargerConfig} disabled={rechargement}>
|
||||
{rechargement ? <Loader2 className="animate-spin" /> : <RotateCcw />}
|
||||
Recharger les valeurs enregistrées
|
||||
</Button>
|
||||
<ResultatTest test={test} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ── API FF Nancy ─────────────────────────────────────────────────────────────
|
||||
|
||||
interface FfSyncTable { nom: string; derniereSync: string; nbLignes?: number; statut?: string; erreur?: string | null; }
|
||||
interface FfSyncStatus { lastSync: string; tables: FfSyncTable[]; }
|
||||
|
||||
function SectionFfApi() {
|
||||
const [status, setStatus] = useState<FfSyncStatus | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [url, setUrl] = useState("");
|
||||
const [savedUrl, setSavedUrl] = useState<string | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [testedUrl, setTestedUrl] = useState<string | null>(null);
|
||||
|
||||
// Charge l'URL enregistrée pour la préremplir (vide = valeur par défaut).
|
||||
useEffect(() => {
|
||||
loadSavedConfig()
|
||||
.then((cfg) => {
|
||||
setSavedUrl(cfg?.ffApiBaseUrl ?? null);
|
||||
if (cfg?.ffApiBaseUrl) setUrl(cfg.ffApiBaseUrl);
|
||||
})
|
||||
.catch(() => { /* réglage optionnel ; l'échec de lecture est signalé par la page */ });
|
||||
}, []);
|
||||
|
||||
const runTest = useCallback((candidate?: string) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setStatus(null);
|
||||
testFfApiConnection(candidate)
|
||||
.then((res) => {
|
||||
setTestedUrl(res.url);
|
||||
if (res.success) setStatus(res.status as FfSyncStatus);
|
||||
else setError(res.error ?? "Échec inconnu.");
|
||||
})
|
||||
.catch((e) => setError(messageErreur(e)))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => { runTest(); }, [runTest]);
|
||||
|
||||
const save = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const res = await saveFfApiSettings(url);
|
||||
if (!res.success) {
|
||||
toast.erreur(res.error ?? "Enregistrement impossible.");
|
||||
return;
|
||||
}
|
||||
setSavedUrl(url.trim() || null);
|
||||
toast.succes(url.trim() ? "Adresse de l'API FF enregistrée." : "L'adresse par défaut de l'API FF sera utilisée.");
|
||||
runTest(url);
|
||||
} catch (e) {
|
||||
toast.erreur(`Enregistrement impossible : ${messageErreur(e)}`);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const test: EtatTest = loading ? { etat: "en-cours" } : status ? { etat: "ok" } : error ? { etat: "erreur", message: error } : { etat: "idle" };
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="API FF Nancy"
|
||||
description="Source des produits et des ventes de nos magasins. Ses données sont mises à jour chaque nuit depuis la base FF : elles s'arrêtent donc à la veille."
|
||||
/>
|
||||
<CardContent className="space-y-4">
|
||||
<Champ
|
||||
id="ff-url"
|
||||
label="Adresse de l'API"
|
||||
aide="Laissez vide pour utiliser l'adresse par défaut (https://api.ffnancy.fr)."
|
||||
>
|
||||
<Input
|
||||
id="ff-url"
|
||||
type="text"
|
||||
placeholder="https://api.ffnancy.fr"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter") void save(); }}
|
||||
className="w-full font-mono"
|
||||
/>
|
||||
</Champ>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 border-t border-[var(--border)] pt-4">
|
||||
<Button onClick={save} disabled={saving}>
|
||||
{saving ? <Loader2 className="animate-spin" /> : <Save />}
|
||||
Enregistrer
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => runTest(url)} disabled={loading}>
|
||||
{loading ? <Loader2 className="animate-spin" /> : <RefreshCw />}
|
||||
Tester la connexion
|
||||
</Button>
|
||||
<ResultatTest test={test} />
|
||||
</div>
|
||||
|
||||
{/* L'URL réellement appelée : évite de croire qu'on teste celle du champ
|
||||
alors que le réglage enregistré ou la variable d'environnement prime. */}
|
||||
{testedUrl && (
|
||||
<p className="text-xs text-[var(--text-muted)]">
|
||||
Adresse testée : <span className="font-mono">{testedUrl}</span>
|
||||
{!savedUrl && <> (adresse par défaut, aucun réglage enregistré)</>}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{status && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-[13px] text-[var(--text-secondary)]">
|
||||
Dernière mise à jour complète des données :{" "}
|
||||
<span className="font-medium text-[var(--text-primary)]">{fmtDateHeure(status.lastSync)}</span>
|
||||
</p>
|
||||
{status.tables?.length > 0 && (
|
||||
<div className="overflow-x-auto rounded-lg border border-[var(--border)]">
|
||||
<table className="w-full">
|
||||
<thead className="bg-[var(--bg-elevated)] text-[13px] font-semibold text-[var(--text-secondary)]">
|
||||
<tr>
|
||||
<th scope="col" className="px-3 py-2 text-left">Table de données</th>
|
||||
<th scope="col" className="px-3 py-2 text-right">Mise à jour</th>
|
||||
<th scope="col" className="px-3 py-2 text-right">Lignes</th>
|
||||
<th scope="col" className="px-3 py-2 text-right">État</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{status.tables.map((t) => (
|
||||
<tr key={t.nom} className="border-t border-[var(--border)]">
|
||||
<td className="px-3 py-2 text-sm font-mono text-[var(--text-primary)]">{t.nom}</td>
|
||||
<td className="px-3 py-2 text-sm text-right text-[var(--text-secondary)]">{fmtDateHeure(t.derniereSync)}</td>
|
||||
<td className="px-3 py-2 text-sm text-right tabular-nums text-[var(--text-secondary)]">
|
||||
{t.nbLignes != null ? fmtEntier(t.nbLignes) : "—"}
|
||||
</td>
|
||||
{/* Une table en erreur est précisément ce qu'on vient chercher ici. */}
|
||||
<td className="px-3 py-2 text-sm text-right">
|
||||
{t.statut === "ok"
|
||||
? <Badge ton="succes">OK</Badge>
|
||||
: <Badge ton="erreur" title={t.erreur ?? undefined}>{t.statut ?? "—"}</Badge>}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Qlik Sense ───────────────────────────────────────────────────────────────
|
||||
|
||||
function SectionQlik() {
|
||||
const [host, setHost] = useState("");
|
||||
const [user, setUser] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
// Le mot de passe enregistré n'est jamais renvoyé : on sait seulement qu'il existe.
|
||||
const [motDePasseEnregistre, setMotDePasseEnregistre] = useState(false);
|
||||
const [showPwd, setShowPwd] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [test, setTest] = useState<EtatTest>({ etat: "idle" });
|
||||
|
||||
useEffect(() => {
|
||||
loadSavedConfig()
|
||||
.then((c) => {
|
||||
if (!c) return;
|
||||
setHost(c.qlikHost ?? "");
|
||||
setUser(c.qlikUser ?? "");
|
||||
setMotDePasseEnregistre(c.hasQlikPassword);
|
||||
})
|
||||
.catch(() => { /* l'échec de lecture est signalé par la page */ });
|
||||
}, []);
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const res = await saveQlikSettings(host.trim(), user.trim(), password);
|
||||
if (res.success) {
|
||||
toast.succes("Identifiants Qlik enregistrés.");
|
||||
if (password) {
|
||||
setMotDePasseEnregistre(true);
|
||||
setPassword("");
|
||||
}
|
||||
} else toast.erreur(`Enregistrement impossible : ${res.error || "erreur inconnue"}`);
|
||||
} catch (e) {
|
||||
toast.erreur(`Enregistrement impossible : ${messageErreur(e)}`);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTest = async () => {
|
||||
setTest({ etat: "en-cours" });
|
||||
try {
|
||||
const res = await testQlikConnection(host.trim(), user.trim(), password);
|
||||
setTest(res.success ? { etat: "ok" } : { etat: "erreur", message: res.error || "Échec de la connexion." });
|
||||
} catch (e) {
|
||||
setTest({ etat: "erreur", message: messageErreur(e) });
|
||||
}
|
||||
};
|
||||
|
||||
const testImpossible = !user || (!password && !motDePasseEnregistre);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="Qlik Sense (données du réseau)"
|
||||
description={
|
||||
<>
|
||||
Identifiants utilisés pour récupérer les ventes des magasins du{" "}
|
||||
<Terme id="reseau">réseau</Terme> dans l'outil de reporting Qlik Sense de La Foir'Fouille.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<CardContent className="space-y-4">
|
||||
<Champ
|
||||
id="qlik-hote"
|
||||
label="Serveur Qlik"
|
||||
aide="Laissez vide pour utiliser le serveur habituel : reporting-magasins.lafoirfouille.fr."
|
||||
>
|
||||
<Input id="qlik-hote" type="text" placeholder="reporting-magasins.lafoirfouille.fr" value={host}
|
||||
onChange={(e) => setHost(e.target.value)} className="w-full font-mono" />
|
||||
</Champ>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Champ
|
||||
id="qlik-utilisateur"
|
||||
label="Identifiant"
|
||||
aide="Identifiant Windows sans le domaine, par exemple FFSCH (connexion par authentification Windows, dite NTLM)."
|
||||
>
|
||||
<Input id="qlik-utilisateur" type="text" placeholder="FFSCH" value={user}
|
||||
onChange={(e) => setUser(e.target.value)} className="w-full font-mono" autoComplete="off" />
|
||||
</Champ>
|
||||
<Champ
|
||||
id="qlik-mdp"
|
||||
label="Mot de passe"
|
||||
aide={motDePasseEnregistre ? "Laissez vide pour garder le mot de passe enregistré (même serveur et même identifiant)." : undefined}
|
||||
>
|
||||
<div className="relative">
|
||||
<Input id="qlik-mdp" type={showPwd ? "text" : "password"}
|
||||
placeholder={motDePasseEnregistre ? "Enregistré — inchangé si vide" : "••••••••"} value={password}
|
||||
onChange={(e) => setPassword(e.target.value)} className="w-full pr-10 font-mono" autoComplete="new-password" />
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => setShowPwd((v) => !v)}
|
||||
aria-label={showPwd ? "Masquer le mot de passe" : "Afficher le mot de passe"}
|
||||
title={showPwd ? "Masquer le mot de passe" : "Afficher le mot de passe"}
|
||||
className="absolute right-0.5 top-1/2 -translate-y-1/2 text-[var(--text-muted)]"
|
||||
>
|
||||
{showPwd ? <EyeOff /> : <Eye />}
|
||||
</Button>
|
||||
</div>
|
||||
</Champ>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 border-t border-[var(--border)] pt-4">
|
||||
<Button onClick={handleSave} disabled={saving}>
|
||||
{saving ? <Loader2 className="animate-spin" /> : <Save />}
|
||||
Enregistrer
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleTest}
|
||||
disabled={test.etat === "en-cours" || testImpossible}
|
||||
title={testImpossible ? "Renseignez l'identifiant et le mot de passe pour tester" : undefined}
|
||||
>
|
||||
{test.etat === "en-cours" ? <Loader2 className="animate-spin" /> : <RefreshCw />}
|
||||
Tester la connexion
|
||||
</Button>
|
||||
<ResultatTest test={test} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Page ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function ParametresClient({ onglet: ongletDemande }: { onglet?: string }) {
|
||||
const initial: Onglet = estOnglet(ongletDemande) ? ongletDemande : "connexions";
|
||||
const [onglet, setOnglet] = useUrlTab<Onglet>("onglet", initial);
|
||||
const [visites, setVisites] = useState<ReadonlySet<Onglet>>(() => new Set([initial]));
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
const [pgMotDePasseEnregistre, setPgMotDePasseEnregistre] = useState(false);
|
||||
|
||||
const setHost = useDbSettingsStore((s) => s.setHost);
|
||||
const setPort = useDbSettingsStore((s) => s.setPort);
|
||||
const setDatabase = useDbSettingsStore((s) => s.setDatabase);
|
||||
const setUser = useDbSettingsStore((s) => s.setUser);
|
||||
const setPassword = useDbSettingsStore((s) => s.setPassword);
|
||||
const setSsl = useDbSettingsStore((s) => s.setSsl);
|
||||
|
||||
const reloadFromServer = useCallback(async (force = false) => {
|
||||
const config = await loadSavedConfig(force);
|
||||
if (config?.url) {
|
||||
// Parser l'URL pour remettre dans le store
|
||||
try {
|
||||
const url = new URL(config.url.replace("postgres://", "http://")); // URL parser helper
|
||||
setHost(url.hostname);
|
||||
setPort(url.port || "5432");
|
||||
setDatabase(url.pathname.slice(1).split("?")[0]);
|
||||
setUser(url.username);
|
||||
// Le serveur ne renvoie plus le mot de passe : champ vide = garder
|
||||
// l'enregistré. On efface aussi celui qu'une ancienne version a pu
|
||||
// laisser dans le localStorage.
|
||||
setPassword("");
|
||||
setPgMotDePasseEnregistre(config.hasDbPassword);
|
||||
setSsl(config.url.includes("sslmode=require"));
|
||||
} catch (e) {
|
||||
console.error("Failed to parse saved URL", e);
|
||||
}
|
||||
}
|
||||
}, [setDatabase, setHost, setPassword, setPort, setSsl, setUser]);
|
||||
|
||||
useEffect(() => {
|
||||
// `isMounted` sert à éviter un écart d'hydratation (réglages PostgreSQL
|
||||
// lus dans le localStorage) : il doit donc être posé 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);
|
||||
// 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).catch((e) => {
|
||||
toast.erreur(`La configuration enregistrée n'a pas pu être lue : ${messageErreur(e)}`);
|
||||
});
|
||||
}, [reloadFromServer]);
|
||||
|
||||
const changerOnglet = (suivant: Onglet) => {
|
||||
setOnglet(suivant);
|
||||
setVisites((prev) => (prev.has(suivant) ? prev : new Set([...prev, suivant])));
|
||||
};
|
||||
|
||||
const recharger = useCallback(() => reloadFromServer(true), [reloadFromServer]);
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-5xl">
|
||||
<PageHeader
|
||||
icon={Settings}
|
||||
title="Paramètres"
|
||||
description="Connexions aux sources de données, comptes des utilisateurs et clés d'accès à l'API (réservé aux administrateurs)."
|
||||
/>
|
||||
|
||||
<Tabs items={ONGLETS} value={onglet} onChange={changerOnglet} className="mb-6" />
|
||||
|
||||
{isMounted && (
|
||||
<>
|
||||
<Panneau actif={onglet === "connexions"} visite={visites.has("connexions")}>
|
||||
<SectionPostgres recharger={recharger} motDePasseEnregistre={pgMotDePasseEnregistre} />
|
||||
<SectionFfApi />
|
||||
<SectionQlik />
|
||||
</Panneau>
|
||||
|
||||
<Panneau actif={onglet === "utilisateurs"} visite={visites.has("utilisateurs")}>
|
||||
<UserManagement />
|
||||
</Panneau>
|
||||
|
||||
<Panneau actif={onglet === "api"} visite={visites.has("api")}>
|
||||
<ApiConnectionInfo />
|
||||
<ApiKeyManagement />
|
||||
<GridWarmup />
|
||||
</Panneau>
|
||||
|
||||
<Panneau actif={onglet === "journal"} visite={visites.has("journal")}>
|
||||
<ServerLogs />
|
||||
</Panneau>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import LoadingModal from "@/components/shared/loading-modal";
|
||||
import { PageSkeleton } from "@/components/ui/states";
|
||||
|
||||
export default function SettingsLoading() {
|
||||
return <LoadingModal message="Chargement des données" subMessage="Récupération des paramètres..." />;
|
||||
/** Silhouette de la page pendant le chargement, sans bloquer l'écran. */
|
||||
export default function Loading() {
|
||||
return <PageSkeleton rows={6} />;
|
||||
}
|
||||
@@ -1,541 +1,16 @@
|
||||
"use client";
|
||||
import type { Metadata } from "next";
|
||||
import { ParametresClient } from "./client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { Save, Eye, EyeOff, CheckCircle, AlertCircle, Loader2, RefreshCw, Sun, Moon, RotateCcw } from "lucide-react";
|
||||
import { useTheme } from "next-themes";
|
||||
import { useGridStore } from "@/features/grid/store/use-grid-store";
|
||||
import { useDbSettingsStore } from "@/features/settings/store/use-db-settings-store";
|
||||
import { testDatabaseConnection, saveDatabaseSettings, getSavedDatabaseConfig, saveQlikSettings, testQlikConnection, saveFfApiSettings, testFfApiConnection } from "@/features/settings/actions";
|
||||
import { useEffect } from "react";
|
||||
import { UserManagement } from "@/features/admin/components/user-management";
|
||||
import { ApiKeyManagement } from "@/features/admin/components/api-key-management";
|
||||
import { ApiConnectionInfo } from "@/features/admin/components/api-connection-info";
|
||||
import { GridWarmup } from "@/features/admin/components/grid-warmup";
|
||||
import { ServerLogs } from "@/features/settings/components/server-logs";
|
||||
export const metadata: Metadata = { title: "Paramètres" };
|
||||
|
||||
function Section({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<section className="apple-card">
|
||||
<div className="apple-card-header">
|
||||
<h2 className="text-[13px] font-semibold text-[var(--text-primary)]">{title}</h2>
|
||||
{subtitle && <p className="text-[12px] mt-0.5 text-[var(--text-secondary)]">{subtitle}</p>}
|
||||
</div>
|
||||
<div className="apple-card-content space-y-4">
|
||||
{children}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[12px] font-medium text-[var(--text-secondary)]">{label}</label>
|
||||
{children}
|
||||
{hint && <p className="text-[11px] text-[var(--text-muted)]">{hint}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface FfSyncTable { nom: string; derniereSync: string; nbLignes?: number; statut?: string; erreur?: string | null; }
|
||||
interface FfSyncStatus { lastSync: string; tables: FfSyncTable[]; }
|
||||
|
||||
function FfApiStatusSection() {
|
||||
const [status, setStatus] = useState<FfSyncStatus | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [url, setUrl] = useState("");
|
||||
const [savedUrl, setSavedUrl] = useState<string | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [testedUrl, setTestedUrl] = useState<string | null>(null);
|
||||
|
||||
// Charge l'URL enregistrée pour la préremplir (vide = valeur par défaut).
|
||||
useEffect(() => {
|
||||
getSavedDatabaseConfig()
|
||||
.then((cfg) => {
|
||||
setSavedUrl(cfg?.ffApiBaseUrl ?? null);
|
||||
if (cfg?.ffApiBaseUrl) setUrl(cfg.ffApiBaseUrl);
|
||||
})
|
||||
.catch(() => { /* réglage optionnel : on laisse le champ vide */ });
|
||||
}, []);
|
||||
|
||||
const runTest = useCallback((candidate?: string) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setStatus(null);
|
||||
testFfApiConnection(candidate)
|
||||
.then((res) => {
|
||||
setTestedUrl(res.url);
|
||||
if (res.success) setStatus(res.status as FfSyncStatus);
|
||||
else setError(res.error ?? "Échec inconnu");
|
||||
})
|
||||
.catch((e) => setError(e instanceof Error ? e.message : "Erreur inconnue"))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => { runTest(); }, [runTest]);
|
||||
|
||||
const save = async () => {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await saveFfApiSettings(url);
|
||||
if (!res.success) { setError(res.error ?? "Enregistrement impossible"); return; }
|
||||
setSavedUrl(url.trim() || null);
|
||||
runTest(url);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Section title="API FF Nancy" subtitle="Source des données produits — synchronisation nuit depuis SQL Server (données J-1)">
|
||||
<Field label="URL de l'API" hint="Laisser vide pour utiliser la valeur par défaut (https://api.ffnancy.fr)">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="https://api.ffnancy.fr"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter") void save(); }}
|
||||
className="apple-input w-full"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<button onClick={save} disabled={saving} className="apple-btn h-9 px-4">
|
||||
{saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
|
||||
Enregistrer
|
||||
</button>
|
||||
<button onClick={() => runTest(url)} disabled={loading} className="apple-btn-secondary h-9 px-4">
|
||||
{loading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <RefreshCw className="w-3.5 h-3.5" />}
|
||||
Tester
|
||||
</button>
|
||||
{status && <span className="text-[12px] text-emerald-400 flex items-center gap-1"><CheckCircle className="w-3.5 h-3.5" /> Connexion OK</span>}
|
||||
{error && <span className="text-[12px] text-red-400 flex items-center gap-1"><AlertCircle className="w-3.5 h-3.5" /> {error}</span>}
|
||||
</div>
|
||||
|
||||
{/* L'URL réellement appelée : évite de croire qu'on teste celle du champ
|
||||
alors que le réglage enregistré ou la variable d'environnement prime. */}
|
||||
{testedUrl && (
|
||||
<p className="text-[11px] text-[var(--text-muted)]">
|
||||
Adresse testée : <span className="font-mono">{testedUrl}</span>
|
||||
{!savedUrl && <> — valeur par défaut, aucun réglage enregistré</>}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{status && (
|
||||
<div className="space-y-2 mt-2">
|
||||
<p className="text-[12px] text-[var(--text-secondary)]">
|
||||
Dernière sync globale : <span className="font-mono font-medium">{(() => { const d = new Date(status.lastSync); return isNaN(d.getTime()) ? (status.lastSync ?? "—") : d.toLocaleString("fr-FR"); })()}</span>
|
||||
</p>
|
||||
{status.tables?.length > 0 && (
|
||||
<div className="rounded-lg overflow-hidden border border-[var(--border-subtle)]">
|
||||
<table className="w-full text-[11px]">
|
||||
<thead>
|
||||
<tr className="bg-[var(--surface-tertiary)]">
|
||||
<th className="text-left px-3 py-2 font-medium text-[var(--text-secondary)]">Table</th>
|
||||
<th className="text-right px-3 py-2 font-medium text-[var(--text-secondary)]">Sync</th>
|
||||
<th className="text-right px-3 py-2 font-medium text-[var(--text-secondary)]">Lignes</th>
|
||||
<th className="text-right px-3 py-2 font-medium text-[var(--text-secondary)]">État</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{status.tables.map((t) => (
|
||||
<tr key={t.nom} className="border-t border-[var(--border-subtle)]">
|
||||
<td className="px-3 py-2 font-mono text-[var(--text-primary)]">{t.nom}</td>
|
||||
<td className="px-3 py-2 text-right text-[var(--text-secondary)]">
|
||||
{(() => { const d = new Date(t.derniereSync); return isNaN(d.getTime()) ? (t.derniereSync ?? "—") : d.toLocaleString("fr-FR"); })()}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right text-[var(--text-muted)]">
|
||||
{t.nbLignes?.toLocaleString("fr-FR") ?? "—"}
|
||||
</td>
|
||||
{/* Une table en erreur est précisément ce qu'on vient chercher ici. */}
|
||||
<td className="px-3 py-2 text-right">
|
||||
{t.statut === "ok"
|
||||
? <span className="text-emerald-400">ok</span>
|
||||
: <span className="text-red-400" title={t.erreur ?? undefined}>{t.statut ?? "—"}</span>}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
function QlikSettingsSection() {
|
||||
const [host, setHost] = useState("");
|
||||
const [user, setUser] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
// Le mot de passe enregistré n'est jamais renvoyé : on sait seulement qu'il existe.
|
||||
const [hasSavedPassword, setHasSavedPassword] = useState(false);
|
||||
const [showPwd, setShowPwd] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [testing, setTesting] = useState(false);
|
||||
const [status, setStatus] = useState<{ type: "ok" | "err"; msg: string } | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
getSavedDatabaseConfig().then((c) => {
|
||||
if (!c) return;
|
||||
setHost(c.qlikHost ?? "");
|
||||
setUser(c.qlikUser ?? "");
|
||||
setHasSavedPassword(c.hasQlikPassword);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
setStatus(null);
|
||||
const res = await saveQlikSettings(host.trim(), user.trim(), password);
|
||||
setSaving(false);
|
||||
if (res.success && password) {
|
||||
setHasSavedPassword(true);
|
||||
setPassword("");
|
||||
}
|
||||
setStatus(res.success ? { type: "ok", msg: "Réglages Qlik enregistrés" } : { type: "err", msg: res.error || "Erreur" });
|
||||
};
|
||||
|
||||
const handleTest = async () => {
|
||||
setTesting(true);
|
||||
setStatus(null);
|
||||
const res = await testQlikConnection(host.trim(), user.trim(), password);
|
||||
setTesting(false);
|
||||
setStatus(res.success ? { type: "ok", msg: "Connexion Qlik OK" } : { type: "err", msg: res.error || "Échec connexion" });
|
||||
};
|
||||
|
||||
return (
|
||||
<Section title="Qlik Sense — Données réseau" subtitle="Identifiants pour la synchro des données réseau (~270 magasins). Auth NTLM ; laisser l'hôte vide pour le défaut.">
|
||||
<Field label="Hôte" hint="Défaut : reporting-magasins.lafoirfouille.fr (laisser vide pour ce défaut)">
|
||||
<input type="text" placeholder="reporting-magasins.lafoirfouille.fr" value={host}
|
||||
onChange={(e) => setHost(e.target.value)} className="apple-input font-mono" />
|
||||
</Field>
|
||||
<Field label="Utilisateur" hint="Ex : FFSCH (sans domaine)">
|
||||
<input type="text" placeholder="FFSCH" value={user}
|
||||
onChange={(e) => setUser(e.target.value)} className="apple-input font-mono" />
|
||||
</Field>
|
||||
<Field label="Mot de passe" hint={hasSavedPassword ? "Vide = conservé, pour le même hôte et utilisateur." : undefined}>
|
||||
<div className="relative">
|
||||
<input type={showPwd ? "text" : "password"} placeholder={hasSavedPassword ? "Enregistré — inchangé si vide" : "••••••••"} value={password}
|
||||
onChange={(e) => setPassword(e.target.value)} className="apple-input font-mono pr-10" />
|
||||
<button type="button" onClick={() => setShowPwd((v) => !v)}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-[var(--text-muted)]">
|
||||
{showPwd ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</Field>
|
||||
{status && (
|
||||
<div className={`flex items-center gap-1.5 text-[12px] ${status.type === "ok" ? "text-emerald-600" : "text-rose-600"}`}>
|
||||
{status.type === "ok" ? <CheckCircle className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
|
||||
{status.msg}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
<button onClick={handleSave} disabled={saving}
|
||||
className="btn-action btn-action-primary flex items-center gap-1.5 disabled:opacity-60">
|
||||
{saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
|
||||
Enregistrer
|
||||
</button>
|
||||
<button onClick={handleTest} disabled={testing || !user || (!password && !hasSavedPassword)}
|
||||
className="btn-action btn-action-secondary flex items-center gap-1.5 disabled:opacity-60">
|
||||
{testing ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <RefreshCw className="w-3.5 h-3.5" />}
|
||||
Tester
|
||||
</button>
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { resolvedTheme, setTheme } = useTheme();
|
||||
const isDark = resolvedTheme === "dark";
|
||||
const displayDensity = useGridStore((s) => s.displayDensity);
|
||||
const setDisplayDensity = useGridStore((s) => s.setDisplayDensity);
|
||||
|
||||
const [dbStatus, setDbStatus] = useState<"idle" | "testing" | "ok" | "error">("idle");
|
||||
const [dbError, setDbError] = useState<string | null>(null);
|
||||
const [saveStatus, setSaveStatus] = useState<"idle" | "saving" | "saved">("idle");
|
||||
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
const [hasSavedDbPassword, setHasSavedDbPassword] = useState(false);
|
||||
|
||||
const {
|
||||
host, setHost,
|
||||
port, setPort,
|
||||
database, setDatabase,
|
||||
user, setUser,
|
||||
password, setPassword,
|
||||
ssl, setSsl,
|
||||
getDatabaseUrl
|
||||
} = useDbSettingsStore();
|
||||
|
||||
const reloadFromServer = useCallback(async () => {
|
||||
const config = await getSavedDatabaseConfig();
|
||||
if (config) {
|
||||
if (config.url) {
|
||||
// Parser l'URL pour remettre dans le store
|
||||
try {
|
||||
const url = new URL(config.url.replace("postgres://", "http://")); // URL parser helper
|
||||
setHost(url.hostname);
|
||||
setPort(url.port || "5432");
|
||||
setDatabase(url.pathname.slice(1).split("?")[0]);
|
||||
setUser(url.username);
|
||||
// Le serveur ne renvoie plus le mot de passe : champ vide = conserver
|
||||
// l'enregistré. On efface aussi celui qu'une ancienne version a pu
|
||||
// laisser dans le localStorage.
|
||||
setPassword("");
|
||||
setHasSavedDbPassword(config.hasDbPassword);
|
||||
setSsl(config.url.includes("sslmode=require"));
|
||||
} catch (e) {
|
||||
console.error("Failed to parse saved URL", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [setDatabase, setHost, setPassword, setPort, setSsl, setUser]);
|
||||
|
||||
useEffect(() => {
|
||||
// `isMounted` sert à éviter un écart d'hydratation : il doit donc être posé
|
||||
// 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();
|
||||
}, [reloadFromServer]);
|
||||
|
||||
const testDb = async () => {
|
||||
setDbStatus("testing");
|
||||
setDbError(null);
|
||||
const url = getDatabaseUrl();
|
||||
const res = await testDatabaseConnection(url);
|
||||
if (res.success) {
|
||||
setDbStatus("ok");
|
||||
} else {
|
||||
setDbStatus("error");
|
||||
setDbError(res.error || "Erreur de connexion inconnue");
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaveStatus("saving");
|
||||
const url = getDatabaseUrl();
|
||||
const res = await saveDatabaseSettings(url);
|
||||
if (res.success) {
|
||||
if (password) {
|
||||
setHasSavedDbPassword(true);
|
||||
setPassword("");
|
||||
}
|
||||
setSaveStatus("saved");
|
||||
setTimeout(() => setSaveStatus("idle"), 2500);
|
||||
} else {
|
||||
setSaveStatus("idle");
|
||||
alert("Erreur lors de la sauvegarde : " + res.error);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isMounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-xl">
|
||||
<div>
|
||||
<h1 className="text-[22px] font-bold tracking-[-0.4px] text-[var(--text-primary)]">Paramètres</h1>
|
||||
<p className="text-[13px] mt-1 text-[var(--text-secondary)]">Configuration de la connexion et des services.</p>
|
||||
</div>
|
||||
|
||||
{/* PostgreSQL */}
|
||||
<Section title="PostgreSQL — Auth & Historique" subtitle="Connexion pour les comptes utilisateurs, snapshots et contexte IA. Les données produits proviennent de l'API FF Nancy.">
|
||||
<Field label="Hôte / Nom du container" hint="Ex: localhost, 192.168.1.10, ou nom du service Docker (ex: postgres, db)">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="localhost"
|
||||
value={host}
|
||||
onChange={(e) => setHost(e.target.value)}
|
||||
className="apple-input font-mono"
|
||||
/>
|
||||
</Field>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Field label="Port">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="5432"
|
||||
value={port}
|
||||
onChange={(e) => setPort(e.target.value)}
|
||||
className="apple-input font-mono"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Base de données">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="collectflow"
|
||||
value={database}
|
||||
onChange={(e) => setDatabase(e.target.value)}
|
||||
className="apple-input font-mono"
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Field label="Utilisateur">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="postgres"
|
||||
value={user}
|
||||
onChange={(e) => setUser(e.target.value)}
|
||||
className="apple-input font-mono"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Mot de passe" hint={hasSavedDbPassword ? "Vide = conservé, pour le même serveur et utilisateur." : undefined}>
|
||||
<input
|
||||
type="password"
|
||||
placeholder={hasSavedDbPassword ? "Enregistré — inchangé si vide" : "••••••••"}
|
||||
value={password || ""}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="apple-input font-mono"
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="ssl"
|
||||
checked={ssl}
|
||||
onChange={(e) => setSsl(e.target.checked)}
|
||||
className="w-3.5 h-3.5 rounded accent-teal-500 cursor-pointer"
|
||||
/>
|
||||
<label htmlFor="ssl" className="text-[12px] cursor-pointer text-[var(--text-secondary)]">Connexion SSL</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button onClick={testDb} disabled={dbStatus === "testing"} className="apple-btn-secondary h-9 px-4">
|
||||
{dbStatus === "testing" && <Loader2 className="w-3.5 h-3.5 animate-spin" />}
|
||||
{dbStatus === "ok" && <CheckCircle className="w-3.5 h-3.5 text-teal-500" />}
|
||||
{dbStatus === "error" && <AlertCircle className="w-3.5 h-3.5 text-red-400" />}
|
||||
Tester la connexion
|
||||
</button>
|
||||
{dbStatus === "error" && (
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[12px] text-red-400 font-medium">Connexion refusée</span>
|
||||
{dbError && <span className="text-[11px]" style={{ color: "var(--text-muted)" }}>{dbError}</span>}
|
||||
</div>
|
||||
)}
|
||||
{dbStatus === "ok" && (
|
||||
<span className="text-[12px] text-teal-500 font-medium">Connexion réussie !</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<button
|
||||
onClick={reloadFromServer}
|
||||
className="apple-btn-secondary h-8 px-3 text-[11px] opacity-80 hover:opacity-100"
|
||||
>
|
||||
<RotateCcw className="w-3 h-3" />
|
||||
Recharger la configuration enregistrée sur le serveur
|
||||
</button>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* API FF Nancy */}
|
||||
<FfApiStatusSection />
|
||||
|
||||
<QlikSettingsSection />
|
||||
|
||||
{/* Apparence */}
|
||||
<Section title="Apparence">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-[13px] font-medium text-[var(--text-primary)]">Thème</p>
|
||||
<p className="text-[12px] text-[var(--text-secondary)]">Interface claire ou sombre</p>
|
||||
</div>
|
||||
{/* Segment control */}
|
||||
<div className="segment-control">
|
||||
<button onClick={() => setTheme("light")} className={`segment-btn ${!isDark ? "active" : ""}`}>
|
||||
<Sun className="w-3.5 h-3.5" /> Clair
|
||||
</button>
|
||||
<button onClick={() => setTheme("dark")} className={`segment-btn ${isDark ? "active" : ""}`}>
|
||||
<Moon className="w-3.5 h-3.5" /> Sombre
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-[13px] font-medium text-[var(--text-primary)]">Densité de la grille</p>
|
||||
<p className="text-[12px] text-[var(--text-secondary)]">Hauteur de ligne par défaut</p>
|
||||
</div>
|
||||
<select
|
||||
className="apple-input w-auto"
|
||||
value={displayDensity}
|
||||
onChange={(e) => setDisplayDensity(e.target.value as "compact" | "normal" | "comfortable")}
|
||||
>
|
||||
<option value="compact">Compact (32px)</option>
|
||||
<option value="normal">Normal (40px)</option>
|
||||
<option value="comfortable">Spacieux (48px)</option>
|
||||
</select>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Journaux serveur — diagnostic des extractions Qlik */}
|
||||
<Section
|
||||
title="Journaux serveur"
|
||||
subtitle="Journal complet des synchronisations Qlik, à télécharger pour diagnostic"
|
||||
>
|
||||
<ServerLogs />
|
||||
</Section>
|
||||
|
||||
{/* Gestion des Utilisateurs */}
|
||||
<Section
|
||||
title="Gestion des Utilisateurs"
|
||||
subtitle="Administration des accès et des rôles"
|
||||
>
|
||||
<UserManagement />
|
||||
</Section>
|
||||
|
||||
{/* API publique /api/v1 — connexion puis gestion des clés */}
|
||||
<Section
|
||||
title="API CollectFlow — Connexion"
|
||||
subtitle="Tout ce qu'il faut pour appeler l'API depuis un script ou un outil externe"
|
||||
>
|
||||
<ApiConnectionInfo />
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
title="Clés d'API"
|
||||
subtitle="Créer et révoquer les clés d'accès à /api/v1"
|
||||
>
|
||||
<ApiKeyManagement />
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
title="Données exposées à l'API"
|
||||
subtitle="Calculer l'instantané de tous les fournisseurs pour qu'une IA externe y ait accès"
|
||||
>
|
||||
<GridWarmup />
|
||||
</Section>
|
||||
|
||||
{/* Save Button — Floating/Sticky style at bottom */}
|
||||
<div className="sticky bottom-6 flex justify-end pt-4 pb-2">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saveStatus === "saving"}
|
||||
className={`apple-btn-primary min-w-[240px] shadow-lg ${saveStatus === "saving" ? "animate-pulse" : saveStatus === "saved" ? "animate-apple-save" : ""}`}
|
||||
style={{ background: saveStatus === "saved" ? "var(--accent-success)" : "var(--brand-solid)" }}
|
||||
>
|
||||
{saveStatus === "saving" ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : saveStatus === "saved" ? (
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
) : (
|
||||
<Save className="w-4 h-4" />
|
||||
)}
|
||||
<span className="ml-1">
|
||||
{saveStatus === "saving"
|
||||
? "Enregistrement en cours..."
|
||||
: saveStatus === "saved"
|
||||
? "Configuration enregistrée !"
|
||||
: "Sauvegarder la configuration"}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
/**
|
||||
* Paramètres (administrateurs) : connexions aux sources de données, comptes
|
||||
* utilisateurs, accès à l'API et journal serveur, rangés en onglets.
|
||||
*
|
||||
* Composant serveur minimal : il lit l'onglet demandé (`?onglet=`) pour que le
|
||||
* lien se partage et survive au rechargement, puis rend la page cliente.
|
||||
*/
|
||||
export default async function SettingsPage(props: { searchParams: Promise<{ onglet?: string }> }) {
|
||||
const { onglet } = await props.searchParams;
|
||||
return <ParametresClient onglet={onglet} />;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import LoadingModal from "@/components/shared/loading-modal";
|
||||
|
||||
export default function SnapshotsLoading() {
|
||||
return <LoadingModal message="Chargement des données" subMessage="Récupération des snapshots..." />;
|
||||
}
|
||||
@@ -1,24 +1,6 @@
|
||||
import { SnapshotList } from "@/features/snapshots/components/snapshot-list";
|
||||
import { Camera } from "lucide-react";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
/** Ancienne adresse, conservée pour les favoris : voir /historique. */
|
||||
export default function SnapshotsPage() {
|
||||
return (
|
||||
<div className="space-y-8 max-w-6xl mx-auto px-4 py-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="w-10 h-10 rounded-xl bg-[var(--accent-bg)] border border-[var(--accent-border)] flex items-center justify-center">
|
||||
<Camera className="w-5 h-5 text-[var(--accent)]" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-black tracking-tight text-[var(--text-primary)] uppercase">Snapshots</h1>
|
||||
</div>
|
||||
<p className="text-sm text-[var(--text-secondary)] max-w-xl">
|
||||
Historique de vos sessions d'arbitrage. Restaurez une sauvegarde pour retrouver vos modifications en cours sur une gamme spécifique.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SnapshotList type="snapshot" />
|
||||
</div>
|
||||
);
|
||||
redirect("/historique");
|
||||
}
|
||||
@@ -2,28 +2,20 @@
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState, useMemo, useEffect, useTransition, type ReactNode } from "react";
|
||||
import {
|
||||
ChevronUp,
|
||||
ChevronDown,
|
||||
ChevronsUpDown,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ChevronsLeft,
|
||||
ChevronsRight,
|
||||
Download,
|
||||
Search,
|
||||
} from "lucide-react";
|
||||
import LoadingModal from "@/components/shared/loading-modal";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { DataTable, type DataColumn, type DataFilter } from "@/components/ui/data-table";
|
||||
import { Tabs, type TabItem } from "@/components/ui/tabs";
|
||||
import { Select } from "@/components/ui/form-controls";
|
||||
import { StoreBadge } from "@/components/ui/badge";
|
||||
import { Terme } from "@/components/ui/tooltip";
|
||||
import { MAGASINS, LIBELLE_TOUS_MAGASINS, nomMagasin } from "@/lib/magasins";
|
||||
import { fmtDecimal1, fmtEntier } from "@/lib/format";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { PgStockNegatifRow, PgStockSansVenteRow, PgSansVente6MoisRow } from "./page";
|
||||
|
||||
type SortDir = "asc" | "desc";
|
||||
|
||||
/** Nombre de lignes rendues simultanément : au-delà, le navigateur fige. */
|
||||
const PAGE_SIZE = 50;
|
||||
|
||||
/** Un seul collateur réutilisé : `localeCompare` en crée un par appel (très coûteux sur 17 000 lignes). */
|
||||
const collator = new Intl.Collator("fr", { numeric: true, sensitivity: "base" });
|
||||
|
||||
function fmtDate(raw: string | null) {
|
||||
if (!raw) return "—";
|
||||
const d = new Date(raw);
|
||||
@@ -40,7 +32,7 @@ function getYear(raw: string | null): string {
|
||||
|
||||
/**
|
||||
* Passe à `true` seulement si `active` reste vrai plus de `delay` ms.
|
||||
* Évite le clignotement du modal sur les transitions instantanées.
|
||||
* Évite le clignotement de l'indicateur sur les transitions instantanées.
|
||||
*/
|
||||
function useDelayedFlag(active: boolean, delay = 120) {
|
||||
const [elapsed, setElapsed] = useState(false);
|
||||
@@ -63,17 +55,15 @@ function useDelayedFlag(active: boolean, delay = 120) {
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tableau générique (les 3 onglets partagent filtres, tri, pagination, export)
|
||||
// Export Excel — format d'import de régularisation dans FF.
|
||||
//
|
||||
// En-têtes (CODEIN / GENCODE / QTE / CODMV), codes mouvement (503 / 412),
|
||||
// colonnes, valeurs et nom de fichier : à ne pas modifier, le fichier est
|
||||
// importé tel quel dans FF. (`telechargerExcel` n'est pas utilisé : il fige la
|
||||
// ligne d'en-tête et renseigne les propriétés du classeur, le fichier ne
|
||||
// serait donc plus strictement identique.)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface Column<T> {
|
||||
key: Extract<keyof T, string>;
|
||||
label: string;
|
||||
/** Tri numérique au lieu du tri alphabétique. */
|
||||
numeric?: boolean;
|
||||
render?: (row: T) => ReactNode;
|
||||
}
|
||||
|
||||
interface ExcelSpec<T> {
|
||||
sheet: string;
|
||||
filePrefix: string;
|
||||
@@ -82,432 +72,243 @@ interface ExcelSpec<T> {
|
||||
row: (r: T) => (string | number)[];
|
||||
}
|
||||
|
||||
interface StockTableProps<T> {
|
||||
rows: T[];
|
||||
magasin: string;
|
||||
columns: Column<T>[];
|
||||
fournisseurOf: (r: T) => string;
|
||||
/** Source du filtre « Année » — omis, le filtre n'est pas affiché. */
|
||||
anneeOf?: (r: T) => string;
|
||||
anneeLabel?: string;
|
||||
searchIn: (r: T) => (string | null | undefined)[];
|
||||
emptyLabel: string;
|
||||
excel: ExcelSpec<T>;
|
||||
async function exporterPourFF<T>(excel: ExcelSpec<T>, rows: readonly T[], magasin: string) {
|
||||
const ExcelJS = (await import("exceljs")).default;
|
||||
const wb = new ExcelJS.Workbook();
|
||||
const ws = wb.addWorksheet(excel.sheet);
|
||||
ws.addRow(excel.header);
|
||||
ws.getRow(1).eachCell(cell => {
|
||||
cell.fill = { type: "pattern", pattern: "solid", fgColor: { argb: "FF1E293B" } };
|
||||
cell.font = { color: { argb: "FFFFFFFF" }, bold: true };
|
||||
cell.alignment = { vertical: "middle", horizontal: "center" };
|
||||
});
|
||||
ws.getRow(1).height = 22;
|
||||
// L'export reprend l'intégralité des lignes filtrées, pas seulement la page affichée.
|
||||
for (const r of rows) ws.addRow(excel.row(r));
|
||||
ws.columns = excel.widths.map(width => ({ width }));
|
||||
const buffer = await wb.xlsx.writeBuffer();
|
||||
const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `${excel.filePrefix}_${magasin || "Tous"}_${new Date().toISOString().slice(0, 10)}.xlsx`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function SortIcon({ active, dir }: { active: boolean; dir: SortDir }) {
|
||||
if (!active) return <ChevronsUpDown className="inline w-3 h-3 ml-1 opacity-30" />;
|
||||
return dir === "asc"
|
||||
? <ChevronUp className="inline w-3 h-3 ml-1" />
|
||||
: <ChevronDown className="inline w-3 h-3 ml-1" />;
|
||||
}
|
||||
const EXCEL_NEGATIF: ExcelSpec<PgStockNegatifRow> = {
|
||||
sheet: "Stock Négatif",
|
||||
filePrefix: "Stock_Negatif",
|
||||
header: ["CODEIN", "GENCODE", "QTE", "CODMV", "Dernière vente", "Dernière entrée"],
|
||||
widths: [16, 16, 10, 10, 16, 22],
|
||||
row: r => [r.codein, "", Math.abs(r.stockdispo), "503", fmtDate(r.dernierevente), fmtDate(r.derniereentree)],
|
||||
};
|
||||
|
||||
function FilterSelect({ label, value, onChange, options }: {
|
||||
label: string;
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
options: string[];
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm font-medium text-gray-600 whitespace-nowrap">{label}</label>
|
||||
<select
|
||||
value={value}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-[150px]"
|
||||
>
|
||||
<option value="">Tous</option>
|
||||
{options.map(o => <option key={o} value={o}>{o}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const EXCEL_SANS_VENTE: ExcelSpec<PgStockSansVenteRow> = {
|
||||
sheet: "Entrées sans vente",
|
||||
filePrefix: "Entrees_Sans_Vente",
|
||||
header: ["CODEIN", "GENCODE", "QTE", "CODMV", "Dernière entrée"],
|
||||
widths: [16, 16, 10, 10, 22],
|
||||
row: r => [r.codein, "", r.stock_actuel, "412", fmtDate(r.derniere_entree)],
|
||||
};
|
||||
|
||||
function Pagination({ page, totalPages, total, from, to, onChange }: {
|
||||
page: number;
|
||||
totalPages: number;
|
||||
total: number;
|
||||
from: number;
|
||||
to: number;
|
||||
onChange: (p: number) => void;
|
||||
}) {
|
||||
if (total === 0) return null;
|
||||
|
||||
const btn = "rounded-lg border border-gray-200 bg-white p-1.5 text-gray-600 shadow-sm transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40";
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 px-1">
|
||||
<span className="text-xs text-gray-500">
|
||||
Lignes <span className="font-medium text-gray-700">{from.toLocaleString("fr-FR")}</span>
|
||||
{" à "}
|
||||
<span className="font-medium text-gray-700">{to.toLocaleString("fr-FR")}</span>
|
||||
{" sur "}
|
||||
<span className="font-medium text-gray-700">{total.toLocaleString("fr-FR")}</span>
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button className={btn} onClick={() => onChange(1)} disabled={page <= 1} aria-label="Première page">
|
||||
<ChevronsLeft className="w-4 h-4" />
|
||||
</button>
|
||||
<button className={btn} onClick={() => onChange(page - 1)} disabled={page <= 1} aria-label="Page précédente">
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</button>
|
||||
<span className="px-2 text-xs text-gray-600 tabular-nums">
|
||||
Page {page.toLocaleString("fr-FR")} / {totalPages.toLocaleString("fr-FR")}
|
||||
</span>
|
||||
<button className={btn} onClick={() => onChange(page + 1)} disabled={page >= totalPages} aria-label="Page suivante">
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
<button className={btn} onClick={() => onChange(totalPages)} disabled={page >= totalPages} aria-label="Dernière page">
|
||||
<ChevronsRight className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StockTable<T extends object>({
|
||||
rows,
|
||||
magasin,
|
||||
columns,
|
||||
fournisseurOf,
|
||||
anneeOf,
|
||||
anneeLabel = "Année entrée",
|
||||
searchIn,
|
||||
emptyLabel,
|
||||
excel,
|
||||
}: StockTableProps<T>) {
|
||||
const [filterFournisseur, setFilterFournisseur] = useState("");
|
||||
const [filterAnnee, setFilterAnnee] = useState("");
|
||||
const [search, setSearch] = useState("");
|
||||
// `null` = ordre renvoyé par la base (le plus pertinent : stock le plus négatif,
|
||||
// entrée la plus récente…). Aucun tri client tant que l'utilisateur n'en demande pas.
|
||||
const [sortKey, setSortKey] = useState<Extract<keyof T, string> | null>(null);
|
||||
const [sortDir, setSortDir] = useState<SortDir>("asc");
|
||||
const [page, setPage] = useState(1);
|
||||
const [exporting, setExporting] = useState(false);
|
||||
|
||||
const fournisseurs = useMemo(
|
||||
() => [...new Set(rows.map(fournisseurOf).filter(Boolean))].sort((a, b) => collator.compare(a, b)),
|
||||
[rows, fournisseurOf]
|
||||
);
|
||||
const annees = useMemo(
|
||||
() => anneeOf ? [...new Set(rows.map(anneeOf).filter(Boolean))].sort((a, b) => b.localeCompare(a)) : [],
|
||||
[rows, anneeOf]
|
||||
);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = search.trim().toLowerCase();
|
||||
if (!filterFournisseur && !filterAnnee && !q) return rows;
|
||||
return rows.filter(r =>
|
||||
(!filterFournisseur || fournisseurOf(r) === filterFournisseur) &&
|
||||
(!filterAnnee || (anneeOf ? anneeOf(r) === filterAnnee : true)) &&
|
||||
(!q || searchIn(r).some(v => v?.toLowerCase().includes(q)))
|
||||
);
|
||||
}, [rows, filterFournisseur, filterAnnee, search, fournisseurOf, anneeOf, searchIn]);
|
||||
|
||||
const numericKeys = useMemo(
|
||||
() => new Set(columns.filter(c => c.numeric).map(c => c.key as string)),
|
||||
[columns]
|
||||
);
|
||||
|
||||
const sorted = useMemo(() => {
|
||||
if (!sortKey) return filtered;
|
||||
const numeric = numericKeys.has(sortKey);
|
||||
const dir = sortDir === "asc" ? 1 : -1;
|
||||
return [...filtered].sort((a, b) => {
|
||||
const av = (a as Record<string, unknown>)[sortKey];
|
||||
const bv = (b as Record<string, unknown>)[sortKey];
|
||||
if (numeric) {
|
||||
const an = Number(av);
|
||||
const bn = Number(bv);
|
||||
if (Number.isNaN(an) && Number.isNaN(bn)) return 0;
|
||||
if (Number.isNaN(an)) return 1;
|
||||
if (Number.isNaN(bn)) return -1;
|
||||
return (an - bn) * dir;
|
||||
}
|
||||
return collator.compare(String(av ?? ""), String(bv ?? "")) * dir;
|
||||
});
|
||||
}, [filtered, sortKey, sortDir, numericKeys]);
|
||||
|
||||
// Toute modification des filtres / du tri ramène à la première page.
|
||||
// Ajustement pendant le rendu : pas d'effet, donc pas de rendu en cascade.
|
||||
const [pagedSet, setPagedSet] = useState(sorted);
|
||||
if (pagedSet !== sorted) {
|
||||
setPagedSet(sorted);
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
const total = sorted.length;
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
|
||||
const currentPage = Math.min(page, totalPages);
|
||||
const pageRows = useMemo(
|
||||
() => sorted.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE),
|
||||
[sorted, currentPage]
|
||||
);
|
||||
|
||||
function handleSort(key: Extract<keyof T, string>) {
|
||||
if (sortKey === key) setSortDir(d => (d === "asc" ? "desc" : "asc"));
|
||||
else { setSortKey(key); setSortDir("asc"); }
|
||||
}
|
||||
|
||||
const hasFilters = Boolean(filterFournisseur || filterAnnee || search);
|
||||
|
||||
async function handleExport() {
|
||||
if (exporting) return;
|
||||
setExporting(true);
|
||||
try {
|
||||
const ExcelJS = (await import("exceljs")).default;
|
||||
const wb = new ExcelJS.Workbook();
|
||||
const ws = wb.addWorksheet(excel.sheet);
|
||||
ws.addRow(excel.header);
|
||||
ws.getRow(1).eachCell(cell => {
|
||||
cell.fill = { type: "pattern", pattern: "solid", fgColor: { argb: "FF1E293B" } };
|
||||
cell.font = { color: { argb: "FFFFFFFF" }, bold: true };
|
||||
cell.alignment = { vertical: "middle", horizontal: "center" };
|
||||
});
|
||||
ws.getRow(1).height = 22;
|
||||
// L'export reprend l'intégralité des lignes filtrées, pas seulement la page affichée.
|
||||
for (const r of sorted) ws.addRow(excel.row(r));
|
||||
ws.columns = excel.widths.map(width => ({ width }));
|
||||
const buffer = await wb.xlsx.writeBuffer();
|
||||
const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `${excel.filePrefix}_${magasin || "Tous"}_${new Date().toISOString().slice(0, 10)}.xlsx`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{exporting && (
|
||||
<LoadingModal
|
||||
message="Génération du fichier Excel"
|
||||
subMessage={`${total.toLocaleString("fr-FR")} ligne${total !== 1 ? "s" : ""} en cours d'écriture…`}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400 pointer-events-none" />
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
placeholder="Code article ou libellé…"
|
||||
className="rounded-lg border border-gray-200 bg-white pl-8 pr-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-[220px]"
|
||||
/>
|
||||
</div>
|
||||
<FilterSelect label="Fournisseur" value={filterFournisseur} onChange={setFilterFournisseur} options={fournisseurs} />
|
||||
{anneeOf && (
|
||||
<FilterSelect label={anneeLabel} value={filterAnnee} onChange={setFilterAnnee} options={annees} />
|
||||
)}
|
||||
{hasFilters && (
|
||||
<button
|
||||
onClick={() => { setFilterFournisseur(""); setFilterAnnee(""); setSearch(""); }}
|
||||
className="rounded-lg border border-orange-200 bg-orange-50 px-3 py-1.5 text-xs font-medium text-orange-700 hover:bg-orange-100 transition-colors"
|
||||
>
|
||||
✕ Réinitialiser
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm text-gray-500">
|
||||
{total.toLocaleString("fr-FR")} article{total !== 1 ? "s" : ""}
|
||||
{hasFilters && total !== rows.length && (
|
||||
<span className="text-gray-400"> / {rows.length.toLocaleString("fr-FR")}</span>
|
||||
)}
|
||||
</span>
|
||||
<button
|
||||
onClick={handleExport}
|
||||
disabled={exporting || total === 0}
|
||||
className="flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-1.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<Download className="w-4 h-4" />Exporter Excel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto rounded-xl border border-gray-200 bg-white shadow-sm">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
{columns.map(c => (
|
||||
<th
|
||||
key={c.key}
|
||||
onClick={() => handleSort(c.key)}
|
||||
className="cursor-pointer select-none whitespace-nowrap px-3 py-2.5 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide hover:text-gray-900"
|
||||
>
|
||||
{c.label}
|
||||
<SortIcon active={sortKey === c.key} dir={sortDir} />
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{pageRows.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-3 py-8 text-center text-gray-400">{emptyLabel}</td>
|
||||
</tr>
|
||||
)}
|
||||
{pageRows.map((row, i) => (
|
||||
<tr key={`${String((row as Record<string, unknown>).codein)}-${String((row as Record<string, unknown>).site)}-${i}`}
|
||||
className="hover:bg-gray-50 transition-colors">
|
||||
{columns.map(c => (
|
||||
<td key={c.key} className="px-3 py-2">
|
||||
{c.render
|
||||
? c.render(row)
|
||||
: String((row as Record<string, unknown>)[c.key] ?? "")}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<Pagination
|
||||
page={currentPage}
|
||||
totalPages={totalPages}
|
||||
total={total}
|
||||
from={total === 0 ? 0 : (currentPage - 1) * PAGE_SIZE + 1}
|
||||
to={Math.min(currentPage * PAGE_SIZE, total)}
|
||||
onChange={p => setPage(Math.min(Math.max(1, p), totalPages))}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const EXCEL_SANS_VENTE_6MOIS: ExcelSpec<PgSansVente6MoisRow> = {
|
||||
sheet: "Sans vente 6 mois",
|
||||
filePrefix: "Sans_Vente_6Mois",
|
||||
header: ["CODEIN", "GENCODE", "QTE", "CODMV", "Dernière vente"],
|
||||
widths: [16, 16, 10, 10, 22],
|
||||
row: r => [r.codein, "", r.stock_actuel, "412", fmtDate(r.derniere_vente)],
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Cellules partagées
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const cellCode = (v: string) => <span className="font-mono text-xs text-gray-700">{v}</span>;
|
||||
const cellSite = (v: string) => (
|
||||
<span className="rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">{v}</span>
|
||||
);
|
||||
const cellDate = (v: string | null) => <span className="text-gray-600 text-xs">{fmtDate(v)}</span>;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Configuration des 3 onglets
|
||||
// Colonnes et filtres des 3 onglets
|
||||
//
|
||||
// Définies au niveau module : leur identité doit rester stable d'un rendu à
|
||||
// l'autre, sinon les `useMemo` de StockTable se recalculent en boucle.
|
||||
// Définis au niveau module : leur identité doit rester stable d'un rendu à
|
||||
// l'autre, sinon les `useMemo` du tableau se recalculent en boucle.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
type TabConfig<T> = Omit<StockTableProps<T>, "rows" | "magasin">;
|
||||
interface LigneStock {
|
||||
codein: string;
|
||||
libelle1: string;
|
||||
fournisseur: string;
|
||||
site: string;
|
||||
}
|
||||
|
||||
const NEGATIF_CONFIG: TabConfig<PgStockNegatifRow> = {
|
||||
fournisseurOf: r => r.fournisseur,
|
||||
anneeOf: r => getYear(r.derniereentree),
|
||||
searchIn: r => [r.codein, r.libelle1],
|
||||
emptyLabel: "Aucun article en stock négatif",
|
||||
columns: [
|
||||
{ key: "codein", label: "Code article", render: r => cellCode(r.codein) },
|
||||
{ key: "libelle1", label: "Libellé", render: r => <span className="text-gray-900">{r.libelle1}</span> },
|
||||
{ key: "fournisseur", label: "Fournisseur", render: r => <span className="text-gray-700">{r.fournisseur}</span> },
|
||||
{ key: "site", label: "Magasin", render: r => cellSite(r.site) },
|
||||
{ key: "stockdispo", label: "Stock", numeric: true, render: r => <span className="font-semibold text-red-600">{r.stockdispo}</span> },
|
||||
{ key: "dernierevente", label: "Dernière vente", render: r => cellDate(r.dernierevente) },
|
||||
{ key: "derniereentree", label: "Dernière entrée", render: r => cellDate(r.derniereentree) },
|
||||
],
|
||||
excel: {
|
||||
sheet: "Stock Négatif",
|
||||
filePrefix: "Stock_Negatif",
|
||||
header: ["CODEIN", "GENCODE", "QTE", "CODMV", "Dernière vente", "Dernière entrée"],
|
||||
widths: [16, 16, 10, 10, 16, 22],
|
||||
row: r => [r.codein, "", Math.abs(r.stockdispo), "503", fmtDate(r.dernierevente), fmtDate(r.derniereentree)],
|
||||
},
|
||||
};
|
||||
|
||||
const SANS_VENTE_CONFIG: TabConfig<PgStockSansVenteRow> = {
|
||||
fournisseurOf: r => r.fournisseur,
|
||||
anneeOf: r => getYear(r.derniere_entree),
|
||||
searchIn: r => [r.codein, r.libelle1],
|
||||
emptyLabel: "Aucun article trouvé",
|
||||
columns: [
|
||||
{ key: "codein", label: "Code article", render: r => cellCode(r.codein) },
|
||||
{ key: "libelle1", label: "Libellé", render: r => <span className="text-gray-900">{r.libelle1}</span> },
|
||||
{ key: "fournisseur", label: "Fournisseur", render: r => <span className="text-gray-700">{r.fournisseur}</span> },
|
||||
{ key: "site", label: "Magasin", render: r => cellSite(r.site) },
|
||||
{ key: "stock_actuel", label: "Stock actuel", numeric: true, render: r => <span className="font-semibold text-amber-600">{r.stock_actuel}</span> },
|
||||
{ key: "derniere_entree", label: "Dernière entrée", render: r => cellDate(r.derniere_entree) },
|
||||
],
|
||||
excel: {
|
||||
sheet: "Entrées sans vente",
|
||||
filePrefix: "Entrees_Sans_Vente",
|
||||
header: ["CODEIN", "GENCODE", "QTE", "CODMV", "Dernière entrée"],
|
||||
widths: [16, 16, 10, 10, 22],
|
||||
row: r => [r.codein, "", r.stock_actuel, "412", fmtDate(r.derniere_entree)],
|
||||
},
|
||||
};
|
||||
|
||||
const SANS_VENTE_6MOIS_CONFIG: TabConfig<PgSansVente6MoisRow> = {
|
||||
fournisseurOf: r => r.fournisseur,
|
||||
searchIn: r => [r.codein, r.libelle1],
|
||||
emptyLabel: "Aucun article trouvé",
|
||||
columns: [
|
||||
{ key: "codein", label: "Code article", render: r => cellCode(r.codein) },
|
||||
{ key: "libelle1", label: "Libellé", render: r => <span className="text-gray-900">{r.libelle1}</span> },
|
||||
{ key: "fournisseur", label: "Fournisseur", render: r => <span className="text-gray-700">{r.fournisseur}</span> },
|
||||
{ key: "site", label: "Magasin", render: r => cellSite(r.site) },
|
||||
{ key: "stock_actuel", label: "Stock actuel", numeric: true, render: r => <span className="font-semibold text-amber-600">{r.stock_actuel}</span> },
|
||||
{ key: "derniere_vente", label: "Dernière vente", render: r => cellDate(r.derniere_vente) },
|
||||
/** Colonnes communes aux 3 onglets : code, libellé, fournisseur, magasin. */
|
||||
function colonnesIdentite<T extends LigneStock>(): DataColumn<T>[] {
|
||||
return [
|
||||
{
|
||||
key: "jours_sans_vente",
|
||||
label: "Jours sans vente",
|
||||
numeric: true,
|
||||
render: r => (
|
||||
<span
|
||||
className="tabular-nums font-medium"
|
||||
style={{ color: r.jours_sans_vente && r.jours_sans_vente > 365 ? "#ef4444" : "#6b7280" }}
|
||||
>
|
||||
{r.jours_sans_vente != null ? r.jours_sans_vente.toLocaleString("fr-FR") : "—"}
|
||||
</span>
|
||||
),
|
||||
id: "codein",
|
||||
header: "Code article",
|
||||
sortValue: r => r.codein,
|
||||
cell: r => <span className="font-mono text-[13px] text-[var(--text-secondary)]">{r.codein}</span>,
|
||||
className: "whitespace-nowrap",
|
||||
},
|
||||
{ key: "derniere_entree", label: "Dernière entrée", render: r => cellDate(r.derniere_entree) },
|
||||
],
|
||||
excel: {
|
||||
sheet: "Sans vente 6 mois",
|
||||
filePrefix: "Sans_Vente_6Mois",
|
||||
header: ["CODEIN", "GENCODE", "QTE", "CODMV", "Dernière vente"],
|
||||
widths: [16, 16, 10, 10, 22],
|
||||
row: r => [r.codein, "", r.stock_actuel, "412", fmtDate(r.derniere_vente)],
|
||||
{
|
||||
id: "libelle1",
|
||||
header: "Libellé",
|
||||
sortValue: r => r.libelle1,
|
||||
cell: r => r.libelle1,
|
||||
className: "min-w-[220px]",
|
||||
},
|
||||
{
|
||||
id: "fournisseur",
|
||||
header: "Fournisseur",
|
||||
sortValue: r => r.fournisseur,
|
||||
cell: r => <span className="text-[var(--text-secondary)]">{r.fournisseur}</span>,
|
||||
},
|
||||
{
|
||||
id: "site",
|
||||
header: "Magasin",
|
||||
sortValue: r => nomMagasin(r.site),
|
||||
cell: r => <StoreBadge code={r.site} />,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** Quantité en stock : rouge si négative, en clair sinon. */
|
||||
function celluleStock(v: number) {
|
||||
return (
|
||||
<span
|
||||
className={cn("font-semibold", v < 0 ? "text-[var(--accent-error)]" : "text-[var(--text-primary)]")}
|
||||
>
|
||||
{fmtDecimal1(v)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const celluleDate = (v: string | null) => (
|
||||
<span className="whitespace-nowrap text-[13px] text-[var(--text-secondary)]">{fmtDate(v)}</span>
|
||||
);
|
||||
|
||||
const rechercheStock = (r: LigneStock) => [r.codein, r.libelle1];
|
||||
|
||||
function filtreFournisseur<T extends LigneStock>(): DataFilter<T> {
|
||||
return { id: "fournisseur", label: "Fournisseur", valueOf: r => r.fournisseur, allLabel: "Tous les fournisseurs" };
|
||||
}
|
||||
|
||||
function filtreAnneeEntree<T>(anneeOf: (r: T) => string): DataFilter<T> {
|
||||
return { id: "annee", label: "Année d'entrée", valueOf: anneeOf, allLabel: "Toutes les années", order: "desc" };
|
||||
}
|
||||
|
||||
const COLONNES_NEGATIF: DataColumn<PgStockNegatifRow>[] = [
|
||||
...colonnesIdentite<PgStockNegatifRow>(),
|
||||
{
|
||||
id: "stockdispo",
|
||||
header: "Stock",
|
||||
hint: "Stock calculé dans FF : il est négatif quand des ventes ont été enregistrées sans l'entrée de marchandise correspondante.",
|
||||
align: "right",
|
||||
sortValue: r => r.stockdispo,
|
||||
cell: r => celluleStock(r.stockdispo),
|
||||
},
|
||||
};
|
||||
{ id: "dernierevente", header: "Dernière vente", sortValue: r => r.dernierevente, cell: r => celluleDate(r.dernierevente) },
|
||||
{ id: "derniereentree", header: "Dernière entrée", sortValue: r => r.derniereentree, cell: r => celluleDate(r.derniereentree) },
|
||||
];
|
||||
const FILTRES_NEGATIF: DataFilter<PgStockNegatifRow>[] = [
|
||||
filtreFournisseur<PgStockNegatifRow>(),
|
||||
filtreAnneeEntree<PgStockNegatifRow>(r => getYear(r.derniereentree)),
|
||||
];
|
||||
|
||||
const COLONNES_SANS_VENTE: DataColumn<PgStockSansVenteRow>[] = [
|
||||
...colonnesIdentite<PgStockSansVenteRow>(),
|
||||
{
|
||||
id: "stock_actuel",
|
||||
header: "Stock actuel",
|
||||
align: "right",
|
||||
sortValue: r => r.stock_actuel,
|
||||
cell: r => celluleStock(r.stock_actuel),
|
||||
},
|
||||
{ id: "derniere_entree", header: "Dernière entrée", sortValue: r => r.derniere_entree, cell: r => celluleDate(r.derniere_entree) },
|
||||
];
|
||||
const FILTRES_SANS_VENTE: DataFilter<PgStockSansVenteRow>[] = [
|
||||
filtreFournisseur<PgStockSansVenteRow>(),
|
||||
filtreAnneeEntree<PgStockSansVenteRow>(r => getYear(r.derniere_entree)),
|
||||
];
|
||||
|
||||
const COLONNES_SANS_VENTE_6MOIS: DataColumn<PgSansVente6MoisRow>[] = [
|
||||
...colonnesIdentite<PgSansVente6MoisRow>(),
|
||||
{
|
||||
id: "stock_actuel",
|
||||
header: "Stock actuel",
|
||||
align: "right",
|
||||
sortValue: r => r.stock_actuel,
|
||||
cell: r => celluleStock(r.stock_actuel),
|
||||
},
|
||||
{ id: "derniere_vente", header: "Dernière vente", sortValue: r => r.derniere_vente, cell: r => celluleDate(r.derniere_vente) },
|
||||
{
|
||||
id: "jours_sans_vente",
|
||||
header: "Jours sans vente",
|
||||
hint: "Nombre de jours depuis la dernière vente. En rouge : plus d'un an.",
|
||||
align: "right",
|
||||
sortValue: r => r.jours_sans_vente,
|
||||
cell: r =>
|
||||
r.jours_sans_vente != null ? (
|
||||
<span
|
||||
className={cn(
|
||||
"font-medium",
|
||||
r.jours_sans_vente > 365 ? "text-[var(--accent-error)]" : "text-[var(--text-secondary)]",
|
||||
)}
|
||||
>
|
||||
{fmtEntier(r.jours_sans_vente)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-[13px] text-[var(--text-muted)]">Jamais vendu</span>
|
||||
),
|
||||
},
|
||||
{ id: "derniere_entree", header: "Dernière entrée", sortValue: r => r.derniere_entree, cell: r => celluleDate(r.derniere_entree) },
|
||||
];
|
||||
const FILTRES_SANS_VENTE_6MOIS: DataFilter<PgSansVente6MoisRow>[] = [filtreFournisseur<PgSansVente6MoisRow>()];
|
||||
|
||||
const cleLigne = (r: LigneStock, i: number) => `${r.codein}-${r.site}-${i}`;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Composant principal avec onglets
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const TABS = [
|
||||
{ key: "negatif", label: "Stock négatif" },
|
||||
{ key: "sans-vente", label: "Entrées sans vente" },
|
||||
{ key: "sans-vente-6mois", label: "Sans vente 6 mois" },
|
||||
] as const;
|
||||
const TAB_KEYS = ["negatif", "sans-vente", "sans-vente-6mois"] as const;
|
||||
|
||||
type TabKey = typeof TABS[number]["key"];
|
||||
type TabKey = typeof TAB_KEYS[number];
|
||||
|
||||
function isTabKey(v: string): v is TabKey {
|
||||
return TABS.some(t => t.key === v);
|
||||
return (TAB_KEYS as readonly string[]).includes(v);
|
||||
}
|
||||
|
||||
/** Ce que liste chaque onglet, et quoi en faire. */
|
||||
const EXPLICATIONS: Record<TabKey, ReactNode> = {
|
||||
"negatif": (
|
||||
<>
|
||||
Produits dont le <Terme id="stockNegatif">stock est négatif</Terme> : des ventes ont été enregistrées sans
|
||||
l'entrée de marchandise correspondante. Vérifiez s'il manque une réception, puis exportez la
|
||||
liste : le fichier Excel est prêt à être importé dans FF pour régulariser le stock.
|
||||
</>
|
||||
),
|
||||
"sans-vente": (
|
||||
<>
|
||||
Produits reçus avant ce mois-ci, encore en stock, mais qui n'ont jamais été vendus dans ce magasin.
|
||||
Vérifiez qu'ils sont bien en rayon et étiquetés ; si le stock est erroné, exportez la liste : le
|
||||
fichier Excel est prêt à être importé dans FF pour le régulariser.
|
||||
</>
|
||||
),
|
||||
"sans-vente-6mois": (
|
||||
<>
|
||||
Produits en stock qui ne se sont pas vendus depuis plus de 6 mois (ou jamais) et qui n'ont pas été
|
||||
réapprovisionnés depuis. Mettez-les en avant ou en promotion ; si le stock est erroné, le fichier Excel
|
||||
exporté est prêt à être importé dans FF pour le régulariser.
|
||||
</>
|
||||
),
|
||||
};
|
||||
|
||||
const OPTIONS_MAGASINS = MAGASINS.map(m => ({ value: m.code, label: nomMagasin(m.code) }));
|
||||
|
||||
interface Props {
|
||||
rowsNegatif: PgStockNegatifRow[];
|
||||
rowsSansVente: PgStockSansVenteRow[];
|
||||
rowsSansVente6Mois: PgSansVente6MoisRow[];
|
||||
magasin: string;
|
||||
tab: string;
|
||||
sites: { code: string; label: string }[];
|
||||
}
|
||||
|
||||
export function GestionStockClient({ rowsNegatif, rowsSansVente, rowsSansVente6Mois, magasin, tab, sites }: Props) {
|
||||
export function GestionStockClient({ rowsNegatif, rowsSansVente, rowsSansVente6Mois, magasin, tab }: Props) {
|
||||
const router = useRouter();
|
||||
const initialTab: TabKey = isTabKey(tab) ? tab : "negatif";
|
||||
|
||||
@@ -531,8 +332,7 @@ export function GestionStockClient({ rowsNegatif, rowsSansVente, rowsSansVente6M
|
||||
return `/stock-negatif?${params.toString()}`;
|
||||
}
|
||||
|
||||
function handleMagasinChange(e: React.ChangeEvent<HTMLSelectElement>) {
|
||||
const val = e.target.value;
|
||||
function handleMagasinChange(val: string) {
|
||||
startNavigation(() => {
|
||||
router.push(buildUrl(activeTab, val));
|
||||
});
|
||||
@@ -545,83 +345,87 @@ export function GestionStockClient({ rowsNegatif, rowsSansVente, rowsSansVente6M
|
||||
startSwitch(() => setActiveTab(key));
|
||||
}
|
||||
|
||||
const counts: Record<TabKey, number> = useMemo(() => ({
|
||||
"negatif": rowsNegatif.length,
|
||||
"sans-vente": rowsSansVente.length,
|
||||
"sans-vente-6mois": rowsSansVente6Mois.length,
|
||||
}), [rowsNegatif, rowsSansVente, rowsSansVente6Mois]);
|
||||
const tabs: TabItem<TabKey>[] = useMemo(() => [
|
||||
{ value: "negatif", label: "Stock négatif", count: rowsNegatif.length, alert: true },
|
||||
{ value: "sans-vente", label: "Entrées sans vente", count: rowsSansVente.length },
|
||||
{ value: "sans-vente-6mois", label: "Sans vente depuis 6 mois", count: rowsSansVente6Mois.length },
|
||||
], [rowsNegatif, rowsSansVente, rowsSansVente6Mois]);
|
||||
|
||||
const busy = switching || navigating;
|
||||
const showLoader = useDelayedFlag(busy);
|
||||
const loaderMessage = navigating ? "Chargement des données" : "Préparation de l'onglet";
|
||||
const loaderSubMessage = navigating
|
||||
? "Interrogation du stock pour le magasin sélectionné…"
|
||||
: "Application des filtres et du tri…";
|
||||
|
||||
return (
|
||||
<div className="space-y-4" aria-busy={busy}>
|
||||
{showLoader && <LoadingModal message={loaderMessage} subMessage={loaderSubMessage} />}
|
||||
|
||||
{/* Toolbar */}
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm font-medium text-gray-700">Magasin</label>
|
||||
<select
|
||||
value={magasin}
|
||||
onChange={handleMagasinChange}
|
||||
disabled={navigating}
|
||||
className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:cursor-wait disabled:opacity-60"
|
||||
>
|
||||
<option value="">Tous les magasins</option>
|
||||
{sites.map(s => (
|
||||
<option key={s.code} value={s.code}>{s.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{/* Choix du magasin */}
|
||||
<div className="flex flex-wrap items-end gap-3">
|
||||
<Select
|
||||
id="stock-magasin"
|
||||
label="Magasin"
|
||||
value={magasin}
|
||||
onChange={handleMagasinChange}
|
||||
disabled={navigating}
|
||||
placeholder={LIBELLE_TOUS_MAGASINS}
|
||||
options={OPTIONS_MAGASINS}
|
||||
/>
|
||||
{showLoader && (
|
||||
<span role="status" className="inline-flex h-9 items-center gap-2 text-[13px] text-[var(--text-secondary)]">
|
||||
<Loader2 className="h-4 w-4 animate-spin" aria-hidden />
|
||||
Chargement…
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="border-b border-gray-200">
|
||||
<nav className="-mb-px flex gap-1">
|
||||
{TABS.map(t => {
|
||||
const isActive = activeTab === t.key;
|
||||
return (
|
||||
<button
|
||||
key={t.key}
|
||||
onClick={() => handleTabChange(t.key)}
|
||||
disabled={busy}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
className={[
|
||||
"px-4 py-2.5 text-sm font-medium border-b-2 transition-colors whitespace-nowrap",
|
||||
isActive
|
||||
? "border-blue-600 text-blue-600"
|
||||
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
|
||||
busy ? "cursor-wait" : "",
|
||||
].join(" ")}
|
||||
>
|
||||
{t.label}
|
||||
<span className={[
|
||||
"ml-2 rounded-full px-2 py-0.5 text-xs font-semibold",
|
||||
isActive ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-500",
|
||||
].join(" ")}>
|
||||
{counts[t.key].toLocaleString("fr-FR")}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
<Tabs items={tabs} value={activeTab} onChange={handleTabChange} disabled={busy} />
|
||||
|
||||
{/* Tab content */}
|
||||
{activeTab === "negatif" && (
|
||||
<StockTable<PgStockNegatifRow> rows={rowsNegatif} magasin={magasin} {...NEGATIF_CONFIG} />
|
||||
)}
|
||||
{activeTab === "sans-vente" && (
|
||||
<StockTable<PgStockSansVenteRow> rows={rowsSansVente} magasin={magasin} {...SANS_VENTE_CONFIG} />
|
||||
)}
|
||||
{activeTab === "sans-vente-6mois" && (
|
||||
<StockTable<PgSansVente6MoisRow> rows={rowsSansVente6Mois} magasin={magasin} {...SANS_VENTE_6MOIS_CONFIG} />
|
||||
)}
|
||||
<p className="max-w-4xl text-sm text-[var(--text-secondary)]">{EXPLICATIONS[activeTab]}</p>
|
||||
|
||||
<div className={cn("transition-opacity", showLoader && "pointer-events-none opacity-50")}>
|
||||
{activeTab === "negatif" && (
|
||||
<DataTable<PgStockNegatifRow>
|
||||
rows={rowsNegatif}
|
||||
columns={COLONNES_NEGATIF}
|
||||
rowKey={cleLigne}
|
||||
searchIn={rechercheStock}
|
||||
searchPlaceholder="Code article ou libellé…"
|
||||
filters={FILTRES_NEGATIF}
|
||||
pageSize={PAGE_SIZE}
|
||||
unite="articles"
|
||||
emptyTitle="Aucun article en stock négatif"
|
||||
emptyDescription="Aucun stock n'est inférieur à zéro pour ce choix de magasin : rien à régulariser."
|
||||
onExport={rows => exporterPourFF(EXCEL_NEGATIF, rows, magasin)}
|
||||
/>
|
||||
)}
|
||||
{activeTab === "sans-vente" && (
|
||||
<DataTable<PgStockSansVenteRow>
|
||||
rows={rowsSansVente}
|
||||
columns={COLONNES_SANS_VENTE}
|
||||
rowKey={cleLigne}
|
||||
searchIn={rechercheStock}
|
||||
searchPlaceholder="Code article ou libellé…"
|
||||
filters={FILTRES_SANS_VENTE}
|
||||
pageSize={PAGE_SIZE}
|
||||
unite="articles"
|
||||
emptyTitle="Aucun article reçu sans vente"
|
||||
emptyDescription="Tous les produits reçus et encore en stock ont été vendus au moins une fois."
|
||||
onExport={rows => exporterPourFF(EXCEL_SANS_VENTE, rows, magasin)}
|
||||
/>
|
||||
)}
|
||||
{activeTab === "sans-vente-6mois" && (
|
||||
<DataTable<PgSansVente6MoisRow>
|
||||
rows={rowsSansVente6Mois}
|
||||
columns={COLONNES_SANS_VENTE_6MOIS}
|
||||
rowKey={cleLigne}
|
||||
searchIn={rechercheStock}
|
||||
searchPlaceholder="Code article ou libellé…"
|
||||
filters={FILTRES_SANS_VENTE_6MOIS}
|
||||
pageSize={PAGE_SIZE}
|
||||
unite="articles"
|
||||
emptyTitle="Aucun article sans vente depuis 6 mois"
|
||||
emptyDescription="Tous les produits en stock se sont vendus ou ont été réapprovisionnés ces 6 derniers mois."
|
||||
onExport={rows => exporterPourFF(EXCEL_SANS_VENTE_6MOIS, rows, magasin)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import LoadingModal from "@/components/shared/loading-modal";
|
||||
import { PageSkeleton } from "@/components/ui/states";
|
||||
|
||||
export default function StockNegatifLoading() {
|
||||
return <LoadingModal message="Chargement des données" subMessage="Récupération des stocks négatifs..." />;
|
||||
/** Silhouette de la page pendant le chargement, sans bloquer l'écran. */
|
||||
export default function Loading() {
|
||||
return <PageSkeleton rows={10} />;
|
||||
}
|
||||
@@ -1,12 +1,22 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { PackageMinus, RotateCcw } from "lucide-react";
|
||||
import { pgGetStockNegatif, PgStockNegatifRow, pgGetStockSansVente, PgStockSansVenteRow, pgGetSansVente6Mois, PgSansVente6MoisRow } from "@/lib/pg-ff-client";
|
||||
import { cachedFF } from "@/lib/ff-cache";
|
||||
import { PageHeader } from "@/components/ui/page-header";
|
||||
import { ErrorState } from "@/components/ui/states";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { GestionStockClient } from "./client";
|
||||
|
||||
export type { PgStockNegatifRow, PgStockSansVenteRow, PgSansVente6MoisRow };
|
||||
|
||||
const SITES = [
|
||||
{ code: "292", label: "292 — Frouard / Nancy" },
|
||||
{ code: "579", label: "579 — Houdemont" },
|
||||
];
|
||||
export const metadata: Metadata = { title: "Stocks à surveiller" };
|
||||
|
||||
interface DonneesStock {
|
||||
rowsNegatif: PgStockNegatifRow[];
|
||||
rowsSansVente: PgStockSansVenteRow[];
|
||||
rowsSansVente6Mois: PgSansVente6MoisRow[];
|
||||
}
|
||||
|
||||
export default async function GestionStockPage(props: {
|
||||
searchParams: Promise<Record<string, string | string[]>>;
|
||||
@@ -15,25 +25,52 @@ export default async function GestionStockPage(props: {
|
||||
const magasin = (searchParams.magasin as string) || "";
|
||||
const tab = (searchParams.tab as string) || "negatif";
|
||||
|
||||
const [rowsNegatif, rowsSansVente, rowsSansVente6Mois] = await Promise.all([
|
||||
pgGetStockNegatif(magasin || undefined),
|
||||
pgGetStockSansVente(magasin || undefined),
|
||||
pgGetSansVente6Mois(magasin || undefined),
|
||||
]);
|
||||
// Données FF recopiées chaque nuit : mises en cache (cf. lib/ff-cache.ts).
|
||||
const site = magasin || undefined;
|
||||
let donnees: DonneesStock | null = null;
|
||||
let erreur: string | null = null;
|
||||
try {
|
||||
const [rowsNegatif, rowsSansVente, rowsSansVente6Mois] = await Promise.all([
|
||||
cachedFF(`stock-negatif:${magasin}`, () => pgGetStockNegatif(site)),
|
||||
cachedFF(`stock-sans-vente:${magasin}`, () => pgGetStockSansVente(site)),
|
||||
cachedFF(`stock-sans-vente-6-mois:${magasin}`, () => pgGetSansVente6Mois(site)),
|
||||
]);
|
||||
donnees = { rowsNegatif, rowsSansVente, rowsSansVente6Mois };
|
||||
} catch (e) {
|
||||
console.error("[stock-negatif] chargement impossible :", e);
|
||||
erreur = e instanceof Error ? e.message : String(e);
|
||||
}
|
||||
|
||||
const params = new URLSearchParams();
|
||||
if (magasin) params.set("magasin", magasin);
|
||||
params.set("tab", tab);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 p-6">
|
||||
<div className="mx-auto max-w-screen-2xl">
|
||||
<h1 className="mb-6 text-3xl font-bold text-gray-900">Gestion de Stock</h1>
|
||||
<div className="mx-auto w-full max-w-screen-2xl">
|
||||
<PageHeader
|
||||
icon={PackageMinus}
|
||||
title="Stocks à surveiller"
|
||||
description="Les produits dont le stock pose question : stock négatif, reçus mais jamais vendus, ou sans vente depuis 6 mois. Vérifiez-les en magasin, puis régularisez le stock dans FF grâce à l'export Excel."
|
||||
/>
|
||||
{donnees ? (
|
||||
<GestionStockClient
|
||||
rowsNegatif={rowsNegatif}
|
||||
rowsSansVente={rowsSansVente}
|
||||
rowsSansVente6Mois={rowsSansVente6Mois}
|
||||
rowsNegatif={donnees.rowsNegatif}
|
||||
rowsSansVente={donnees.rowsSansVente}
|
||||
rowsSansVente6Mois={donnees.rowsSansVente6Mois}
|
||||
magasin={magasin}
|
||||
tab={tab}
|
||||
sites={SITES}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<ErrorState
|
||||
title="Les stocks n'ont pas pu être chargés"
|
||||
detail={erreur ?? undefined}
|
||||
action={
|
||||
<Button asChild variant="outline">
|
||||
<Link href={`/stock-negatif?${params.toString()}`}><RotateCcw /> Réessayer</Link>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,8 +4,10 @@ import type { GridFilters } from "@/types/grid";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const encoder = new TextEncoder();
|
||||
|
||||
function writeNdjson(controller: ReadableStreamDefaultController<Uint8Array>, value: unknown) {
|
||||
controller.enqueue(new TextEncoder().encode(`${JSON.stringify(value)}\n`));
|
||||
controller.enqueue(encoder.encode(`${JSON.stringify(value)}\n`));
|
||||
}
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
@@ -26,14 +28,25 @@ export async function GET(request: NextRequest) {
|
||||
};
|
||||
const forceRefresh = searchParams.get("refresh") === "1";
|
||||
|
||||
// Client parti (changement de fournisseur, page quittée) : on arrête de
|
||||
// sérialiser et d'envoyer. Le calcul lui-même continue — il est partagé et
|
||||
// mis en cache, la prochaine ouverture en profitera.
|
||||
let cancelled = false;
|
||||
request.signal.addEventListener("abort", () => { cancelled = true; });
|
||||
|
||||
const stream = new ReadableStream<Uint8Array>({
|
||||
cancel() {
|
||||
cancelled = true;
|
||||
},
|
||||
async start(controller) {
|
||||
try {
|
||||
writeNdjson(controller, { type: "start", loaded: 0, total: null });
|
||||
const rows = await getProductRows({ codeFournisseur, magasin, filters, forceRefresh });
|
||||
if (cancelled) return;
|
||||
const total = rows.length;
|
||||
|
||||
for (let start = 0; start < total; start += chunkSize) {
|
||||
if (cancelled) return;
|
||||
const chunk = rows.slice(start, start + chunkSize);
|
||||
writeNdjson(controller, {
|
||||
type: "chunk",
|
||||
@@ -46,12 +59,17 @@ export async function GET(request: NextRequest) {
|
||||
|
||||
writeNdjson(controller, { type: "done", loaded: total, total });
|
||||
} catch (error) {
|
||||
if (cancelled) return;
|
||||
writeNdjson(controller, {
|
||||
type: "error",
|
||||
error: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
} finally {
|
||||
controller.close();
|
||||
try {
|
||||
controller.close();
|
||||
} catch {
|
||||
/* flux déjà fermé côté client */
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
+50
-9
@@ -1,4 +1,14 @@
|
||||
@import "tailwindcss";
|
||||
/* Animations utilisées par les menus, fenêtres et notifications (animate-in,
|
||||
fade-in, zoom-in-95…). Le paquet était installé mais jamais importé : ces
|
||||
classes ne produisaient rien. */
|
||||
@import "tw-animate-css";
|
||||
|
||||
/* Les variantes `dark:` suivent le thème choisi dans l'application (classe
|
||||
`.dark` posée par next-themes sur <html>), et non le réglage du système :
|
||||
sans cette ligne, un poste en clair affichait des éléments clairs dans
|
||||
l'application en sombre, et inversement. */
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
/* Police de l'app : Inter (chargée via <link> dans le layout, fallback système).
|
||||
Définie ici pour que l'utilitaire `font-sans` et var(--font-sans) la prennent
|
||||
@@ -7,6 +17,30 @@
|
||||
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
/* Couleurs « shadcn » (bg-accent, text-muted-foreground, bg-primary…) branchées
|
||||
sur les variables de l'application : elles n'étaient pas définies, et les
|
||||
survols des menus déroulants, entre autres, ne se voyaient pas. */
|
||||
@theme inline {
|
||||
--color-background: var(--bg-surface);
|
||||
--color-foreground: var(--text-primary);
|
||||
--color-card: var(--bg-surface);
|
||||
--color-card-foreground: var(--text-primary);
|
||||
--color-popover: var(--bg-surface);
|
||||
--color-popover-foreground: var(--text-primary);
|
||||
--color-primary: var(--brand-solid);
|
||||
--color-primary-foreground: #ffffff;
|
||||
--color-secondary: var(--bg-elevated);
|
||||
--color-secondary-foreground: var(--text-primary);
|
||||
--color-muted: var(--bg-elevated);
|
||||
--color-muted-foreground: var(--text-secondary);
|
||||
--color-accent: var(--bg-elevated);
|
||||
--color-accent-foreground: var(--text-primary);
|
||||
--color-destructive: var(--accent-error);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--border-strong);
|
||||
--color-ring: var(--accent);
|
||||
}
|
||||
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
CollectFlow — Apple-inspired Design System
|
||||
@@ -42,8 +76,13 @@
|
||||
/* Slate 200 */
|
||||
--text-secondary: #94a3b8;
|
||||
/* Slate 400 */
|
||||
--text-muted: #64748b;
|
||||
/* Slate 500 */
|
||||
--text-muted: #8494ab;
|
||||
/* Entre Slate 400 et 500 : ≥ 4,5:1 sur toutes les surfaces sombres (AA).
|
||||
L'ancien Slate 500 tombait à 3:1 sur --bg-elevated. */
|
||||
|
||||
/* Alias de variables utilisées par quelques écrans mais jamais définies. */
|
||||
--border-subtle: var(--border);
|
||||
--surface-tertiary: var(--bg-elevated);
|
||||
|
||||
--accent: #2dd4bf;
|
||||
/* emerald-ish, Apple-tuned */
|
||||
@@ -77,8 +116,8 @@
|
||||
--bg-surface: #ffffff;
|
||||
--bg-elevated: #f0f0f5;
|
||||
--bg-overlay: rgba(255, 255, 255, 0.82);
|
||||
--border: rgba(0, 0, 0, 0.07);
|
||||
--border-strong: rgba(0, 0, 0, 0.12);
|
||||
--border: rgba(0, 0, 0, 0.10);
|
||||
--border-strong: rgba(0, 0, 0, 0.16);
|
||||
|
||||
/* Mêmes teintes, pas choisis pour le fond clair (et non un simple éclaircissement
|
||||
des valeurs sombres). L'aqua passe sous 3:1 sur blanc : la « règle de relief »
|
||||
@@ -90,7 +129,9 @@
|
||||
--text-primary: #1d1d1f;
|
||||
/* Apple dark */
|
||||
--text-secondary: #515154;
|
||||
--text-muted: #86868b;
|
||||
/* ≥ 5:1 sur toutes les surfaces claires (AA). L'ancien #86868b, utilisé pour
|
||||
la plupart des libellés, tombait à 3,2:1. */
|
||||
--text-muted: #636366;
|
||||
|
||||
--accent: #0d9488;
|
||||
/* deeper teal in light */
|
||||
@@ -187,11 +228,11 @@
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* ── Glass panels (sidebar, header) ── */
|
||||
/* ── Panneaux fixes (menu, en-tête) ──
|
||||
Fond plein : le flou d'arrière-plan ne floutait rien (rien ne défile sous ces
|
||||
panneaux) mais coûtait un recalcul GPU à chaque image. */
|
||||
.glass {
|
||||
background: var(--bg-overlay);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
|
||||
/* ── Apple border ── */
|
||||
|
||||
+2
-2
@@ -3,8 +3,8 @@ import "./globals.css";
|
||||
import { Providers } from "./providers";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "CollectFlow — Dashboard Décisionnel",
|
||||
description: "Révision d'Assortiment Haute Performance",
|
||||
title: { default: "CollectFlow", template: "%s · CollectFlow" },
|
||||
description: "Révision d'assortiment et suivi des ventes des magasins",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
import Link from "next/link";
|
||||
import { SearchX } from "lucide-react";
|
||||
import { EmptyState } from "@/components/ui/states";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
/** Adresse inconnue (hors des pages de l'application). */
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<main className="flex min-h-screen items-center justify-center p-6 bg-[var(--bg-base)]">
|
||||
<EmptyState
|
||||
icon={SearchX}
|
||||
title="Page introuvable"
|
||||
description="L'adresse demandée n'existe pas ou n'existe plus."
|
||||
action={<Button asChild><Link href="/dashboard">Retour à l'accueil</Link></Button>}
|
||||
className="max-w-lg"
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -2,12 +2,19 @@
|
||||
|
||||
import { SessionProvider } from "next-auth/react";
|
||||
import { ThemeProvider } from "@/components/shared/theme-provider";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import { FeedbackHost } from "@/components/ui/feedback";
|
||||
|
||||
export function Providers({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<SessionProvider>
|
||||
// La session n'est pas relue à chaque retour sur l'onglet : elle repartait
|
||||
// sur le réseau et redessinait toute la page (Grille comprise) à chaque fois.
|
||||
<SessionProvider refetchOnWindowFocus={false}>
|
||||
<ThemeProvider>
|
||||
{children}
|
||||
<TooltipProvider>
|
||||
{children}
|
||||
<FeedbackHost />
|
||||
</TooltipProvider>
|
||||
</ThemeProvider>
|
||||
</SessionProvider>
|
||||
);
|
||||
|
||||
@@ -1,203 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { X, KeyRound, Eye, EyeOff, Loader2, ShieldCheck } from "lucide-react";
|
||||
|
||||
interface ChangePasswordModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: (newPassword: string) => Promise<void>;
|
||||
username: string;
|
||||
}
|
||||
|
||||
export function ChangePasswordModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onConfirm,
|
||||
username,
|
||||
}: ChangePasswordModalProps) {
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirm, setConfirm] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showConfirm, setShowConfirm] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setIsVisible(true);
|
||||
setPassword("");
|
||||
setConfirm("");
|
||||
setError(null);
|
||||
setTimeout(() => inputRef.current?.focus(), 50);
|
||||
} else {
|
||||
setIsVisible(false);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Escape") handleClose();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setIsVisible(false);
|
||||
setTimeout(onClose, 250);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
|
||||
if (password.length < 4) {
|
||||
setError("Le mot de passe doit faire au moins 4 caractères.");
|
||||
return;
|
||||
}
|
||||
if (password !== confirm) {
|
||||
setError("Les mots de passe ne correspondent pas.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await onConfirm(password);
|
||||
handleClose();
|
||||
} catch (err: any) {
|
||||
setError(err?.message ?? "Une erreur est survenue.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen && !isVisible) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed inset-0 z-[100] flex items-center justify-center p-4 transition-all duration-250 ${isVisible ? "opacity-100 backdrop-blur-sm" : "opacity-0"}`}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0"
|
||||
style={{ background: "rgba(0,0,0,0.55)" }}
|
||||
onClick={handleClose}
|
||||
/>
|
||||
|
||||
{/* Panel */}
|
||||
<div
|
||||
className={`relative w-full max-w-sm rounded-2xl overflow-hidden shadow-2xl transition-all duration-250 ${isVisible ? "scale-100 translate-y-0" : "scale-95 translate-y-4"}`}
|
||||
style={{ background: "var(--bg-surface)", border: "1px solid var(--border)" }}
|
||||
>
|
||||
{/* Accent bar */}
|
||||
<div className="absolute top-0 left-0 w-full h-0.5" style={{ background: "linear-gradient(to right, var(--accent), var(--accent-success))" }} />
|
||||
|
||||
{/* Close button */}
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="absolute top-4 right-4 p-1.5 rounded-lg hover:bg-[var(--bg-elevated)] text-[var(--text-muted)] transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<div className="p-7">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4 mb-7">
|
||||
<div className="w-11 h-11 rounded-xl bg-[var(--accent-bg)] border border-[var(--accent-border)] flex items-center justify-center shrink-0">
|
||||
<KeyRound className="w-5 h-5 text-[var(--accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-[var(--text-primary)]">Changer le mot de passe</h3>
|
||||
<p className="text-xs text-[var(--text-muted)]">Compte : <span className="font-semibold text-[var(--text-secondary)]">{username}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* New password */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)]">
|
||||
Nouveau mot de passe
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Min. 4 caractères"
|
||||
className="apple-input pr-10"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(v => !v)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Confirm */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)]">
|
||||
Confirmer le mot de passe
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showConfirm ? "text" : "password"}
|
||||
value={confirm}
|
||||
onChange={(e) => setConfirm(e.target.value)}
|
||||
placeholder="Répétez le mot de passe"
|
||||
className="apple-input pr-10"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowConfirm(v => !v)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors"
|
||||
>
|
||||
{showConfirm ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password match indicator */}
|
||||
{confirm.length > 0 && (
|
||||
<div className={`flex items-center gap-2 text-xs font-semibold ${password === confirm ? "text-[var(--accent-success)]" : "text-[var(--accent-error)]"}`}>
|
||||
<ShieldCheck className="w-3.5 h-3.5" />
|
||||
{password === confirm ? "Les mots de passe correspondent" : "Les mots de passe ne correspondent pas"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="px-3 py-2.5 rounded-lg bg-[var(--accent-error-bg)] border border-[var(--accent-error)] text-[var(--accent-error)] text-xs font-semibold">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
className="apple-btn-secondary flex-1 justify-center"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || password !== confirm || password.length < 4}
|
||||
className="apple-btn-primary flex-1 justify-center disabled:opacity-40"
|
||||
>
|
||||
{isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <KeyRound className="w-4 h-4" />}
|
||||
{isLoading ? "Mise à jour..." : "Valider"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,127 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { X, AlertTriangle } from "lucide-react";
|
||||
|
||||
interface ConfirmModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: () => void;
|
||||
title?: string;
|
||||
message: string;
|
||||
confirmLabel?: string;
|
||||
cancelLabel?: string;
|
||||
variant?: "danger" | "default";
|
||||
}
|
||||
|
||||
export function ConfirmModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onConfirm,
|
||||
title = "Confirmation",
|
||||
message,
|
||||
confirmLabel = "OK",
|
||||
cancelLabel = "Annuler",
|
||||
variant = "default",
|
||||
}: ConfirmModalProps) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const confirmBtnRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setIsVisible(true);
|
||||
setTimeout(() => confirmBtnRef.current?.focus(), 50);
|
||||
} else {
|
||||
setIsVisible(false);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const handleClose = () => {
|
||||
setIsVisible(false);
|
||||
setTimeout(onClose, 250);
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
setIsVisible(false);
|
||||
setTimeout(onConfirm, 250);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Escape") handleClose();
|
||||
if (e.key === "Enter") handleConfirm();
|
||||
};
|
||||
|
||||
if (!isOpen && !isVisible) return null;
|
||||
|
||||
const isDanger = variant === "danger";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed inset-0 z-[200] flex items-center justify-center p-4 transition-all duration-250 ${isVisible ? "opacity-100 backdrop-blur-sm" : "opacity-0"}`}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0"
|
||||
style={{ background: "rgba(0,0,0,0.55)" }}
|
||||
onClick={handleClose}
|
||||
/>
|
||||
|
||||
{/* Panel */}
|
||||
<div
|
||||
className={`relative w-full max-w-sm rounded-2xl overflow-hidden shadow-2xl transition-all duration-250 ${isVisible ? "scale-100 translate-y-0" : "scale-95 translate-y-4"}`}
|
||||
style={{ background: "var(--bg-surface)", border: "1px solid var(--border)" }}
|
||||
>
|
||||
{/* Accent bar */}
|
||||
<div
|
||||
className="absolute top-0 left-0 w-full h-0.5"
|
||||
style={{
|
||||
background: isDanger
|
||||
? "linear-gradient(to right, var(--accent-error), #fb7185)"
|
||||
: "linear-gradient(to right, var(--accent), var(--accent-success))"
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Close button */}
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="absolute top-4 right-4 p-1.5 rounded-lg hover:bg-[var(--bg-elevated)] text-[var(--text-muted)] transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<div className="p-7">
|
||||
{/* Icon + Title */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${isDanger ? "bg-[var(--accent-error-bg)] border border-[var(--accent-error)]" : "bg-[var(--accent-bg)] border border-[var(--accent-border)]"}`}>
|
||||
<AlertTriangle className={`w-5 h-5 ${isDanger ? "text-[var(--accent-error)]" : "text-[var(--accent)]"}`} />
|
||||
</div>
|
||||
<h3 className="text-base font-bold text-[var(--text-primary)]">{title}</h3>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
<p className="text-sm text-[var(--text-secondary)] mb-7 leading-relaxed pl-[52px]">
|
||||
{message}
|
||||
</p>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 justify-end">
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="apple-btn-secondary"
|
||||
>
|
||||
{cancelLabel}
|
||||
</button>
|
||||
<button
|
||||
ref={confirmBtnRef}
|
||||
onClick={handleConfirm}
|
||||
className={isDanger ? "apple-btn-danger" : "apple-btn-primary"}
|
||||
>
|
||||
{confirmLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,73 +1,116 @@
|
||||
"use client";
|
||||
|
||||
import { Search, X, Sun, Moon } from "lucide-react";
|
||||
import { ChevronDown, LogOut, Moon, Rows3, Sun, User as UserIcon } from "lucide-react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useTheme } from "next-themes";
|
||||
import { signOut, useSession } from "next-auth/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { useGridStore } from "@/features/grid/store/use-grid-store";
|
||||
import { pageCourante } from "@/components/shared/navigation";
|
||||
|
||||
type Densite = "compact" | "normal" | "comfortable";
|
||||
|
||||
/**
|
||||
* En-tête : nom de la page en cours, choix du thème et menu du compte.
|
||||
*
|
||||
* La recherche qui s'y trouvait ne filtrait que la Grille (même depuis les autres
|
||||
* pages, et en silence) : elle est retirée, la Grille garde la sienne. Le nom
|
||||
* affiché est celui de l'utilisateur connecté (il était écrit en dur).
|
||||
*/
|
||||
export function Header() {
|
||||
const pathname = usePathname();
|
||||
const { resolvedTheme, setTheme } = useTheme();
|
||||
const setFilter = useGridStore((s) => s.setFilter);
|
||||
const search = useGridStore((s) => s.filters.search);
|
||||
const isDark = resolvedTheme === "dark";
|
||||
const { data: session } = useSession();
|
||||
const displayDensity = useGridStore((s) => s.displayDensity);
|
||||
const setDisplayDensity = useGridStore((s) => s.setDisplayDensity);
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Le thème n'est connu qu'au montage (lu dans le navigateur).
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
const isDark = isMounted && resolvedTheme === "dark";
|
||||
const page = pageCourante(pathname);
|
||||
const nom = session?.user?.name ?? "";
|
||||
const role = (session?.user as { role?: string } | undefined)?.role === "admin" ? "Administrateur" : "Utilisateur";
|
||||
const initiale = nom.trim().charAt(0).toUpperCase() || "?";
|
||||
|
||||
return (
|
||||
<header
|
||||
className="h-12 flex items-center justify-between px-5 sticky top-0 z-20 glass"
|
||||
style={{ borderBottom: "1px solid var(--border)" }}
|
||||
>
|
||||
{/* Search */}
|
||||
<div className="relative w-72">
|
||||
<Search
|
||||
className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5"
|
||||
style={{ color: "var(--text-muted)" }}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Rechercher…"
|
||||
value={search}
|
||||
onChange={(e) => setFilter("search", e.target.value)}
|
||||
className="apple-input pr-8 h-8 text-[13px]"
|
||||
style={{ paddingLeft: "32px" }}
|
||||
/>
|
||||
{search && (
|
||||
<button
|
||||
onClick={() => setFilter("search", "")}
|
||||
className="absolute right-2.5 top-1/2 -translate-y-1/2"
|
||||
>
|
||||
<X className="w-3 h-3" style={{ color: "var(--text-muted)" }} />
|
||||
</button>
|
||||
<header className="h-14 shrink-0 flex items-center justify-between gap-4 px-6 glass border-b border-[var(--border)]">
|
||||
<div className="min-w-0">
|
||||
{page && (
|
||||
<p className="truncate text-sm font-semibold text-[var(--text-primary)]" title={page.description}>
|
||||
{page.label}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right controls */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Theme toggle */}
|
||||
<button
|
||||
onClick={() => setTheme(isDark ? "light" : "dark")}
|
||||
title={isDark ? "Mode clair" : "Mode sombre"}
|
||||
className="w-8 h-8 rounded-[8px] flex items-center justify-center transition-all duration-150"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = "var(--bg-elevated)"; }}
|
||||
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = "transparent"; }}
|
||||
className="flex h-9 items-center gap-2 rounded-lg px-3 text-[13px] font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] hover:text-[var(--text-primary)]"
|
||||
title={isDark ? "Passer en mode clair" : "Passer en mode sombre"}
|
||||
>
|
||||
{isDark
|
||||
? <Sun className="w-[15px] h-[15px]" strokeWidth={1.8} />
|
||||
: <Moon className="w-[15px] h-[15px]" strokeWidth={1.8} />}
|
||||
{isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
|
||||
<span className="hidden md:inline">{isDark ? "Mode clair" : "Mode sombre"}</span>
|
||||
</button>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="w-px h-5 mx-1" style={{ background: "var(--border)" }} />
|
||||
|
||||
{/* User */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-[26px] h-[26px] rounded-full bg-emerald-500 dark:bg-emerald-600 flex items-center justify-center text-[11px] font-bold text-white shadow-sm border border-white/20">
|
||||
M
|
||||
</div>
|
||||
<span className="text-[13px] font-medium" style={{ color: "var(--text-secondary)" }}>
|
||||
Michael
|
||||
</span>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className="flex h-9 items-center gap-2 rounded-lg pl-1.5 pr-2 hover:bg-[var(--bg-elevated)]"
|
||||
aria-label="Menu du compte"
|
||||
>
|
||||
<span className="flex h-7 w-7 items-center justify-center rounded-full bg-[var(--accent)] text-xs font-bold text-white">
|
||||
{session ? initiale : <UserIcon className="h-4 w-4" />}
|
||||
</span>
|
||||
<span className="hidden sm:block max-w-[160px] truncate text-[13px] font-medium text-[var(--text-primary)]">
|
||||
{nom}
|
||||
</span>
|
||||
<ChevronDown className="h-4 w-4 text-[var(--text-muted)]" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-64">
|
||||
<DropdownMenuLabel>
|
||||
<span className="block text-sm font-semibold text-[var(--text-primary)]">{nom || "Compte"}</span>
|
||||
<span className="block text-xs font-normal text-[var(--text-muted)]">{role}</span>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuLabel className="flex items-center gap-2 text-xs font-medium text-[var(--text-secondary)]">
|
||||
<Rows3 className="h-3.5 w-3.5" /> Hauteur des lignes de la Grille
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuRadioGroup
|
||||
value={displayDensity}
|
||||
onValueChange={(v) => setDisplayDensity(v as Densite)}
|
||||
>
|
||||
<DropdownMenuRadioItem value="compact">Compacte</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="normal">Normale</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="comfortable">Aérée</DropdownMenuRadioItem>
|
||||
</DropdownMenuRadioGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
onSelect={async () => {
|
||||
await signOut({ redirect: false });
|
||||
window.location.href = "/login";
|
||||
}}
|
||||
>
|
||||
<LogOut /> Se déconnecter
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
interface LoadingModalProps {
|
||||
message?: string;
|
||||
subMessage?: string;
|
||||
}
|
||||
|
||||
export default function LoadingModal({
|
||||
message = "Chargement des données",
|
||||
subMessage = "Veuillez patienter...",
|
||||
}: LoadingModalProps) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
||||
<div
|
||||
className="flex flex-col items-center gap-5 px-10 py-8 rounded-2xl shadow-2xl border"
|
||||
style={{
|
||||
background: "var(--bg-elevated)",
|
||||
borderColor: "var(--border)",
|
||||
}}
|
||||
>
|
||||
<div className="relative w-12 h-12">
|
||||
<div
|
||||
className="absolute inset-0 rounded-full border-[3px] animate-spin"
|
||||
style={{
|
||||
borderColor: "var(--border)",
|
||||
borderTopColor: "var(--accent)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-1.5">
|
||||
<span
|
||||
className="text-sm font-semibold tracking-wide"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
{message}
|
||||
</span>
|
||||
<span
|
||||
className="text-xs"
|
||||
style={{ color: "var(--text-muted)" }}
|
||||
>
|
||||
{subMessage}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import {
|
||||
CalendarClock,
|
||||
CalendarRange,
|
||||
History,
|
||||
House,
|
||||
LayoutGrid,
|
||||
Megaphone,
|
||||
PackageMinus,
|
||||
PackageSearch,
|
||||
Settings,
|
||||
ShoppingCart,
|
||||
Trophy,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
|
||||
export interface NavItem {
|
||||
label: string;
|
||||
href: string;
|
||||
icon: LucideIcon;
|
||||
/** Phrase d'aide affichée au survol du menu replié. */
|
||||
description: string;
|
||||
adminOnly?: boolean;
|
||||
}
|
||||
|
||||
export interface NavGroup {
|
||||
title: string;
|
||||
items: NavItem[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Menu principal, regroupé par usage. Les libellés disent ce que fait la page,
|
||||
* en français (« Dashboard », « Analytics », « Snapshots » ont disparu).
|
||||
* Les adresses ne changent pas : favoris et liens existants restent valables.
|
||||
*/
|
||||
export const NAV_GROUPS: NavGroup[] = [
|
||||
{
|
||||
title: "Au quotidien",
|
||||
items: [
|
||||
{ label: "Accueil", href: "/dashboard", icon: House, description: "Les ventes d'hier et les meilleurs produits" },
|
||||
{ label: "Révision d'assortiment", href: "/grid", icon: LayoutGrid, description: "Choisir la gamme de chaque produit d'un fournisseur" },
|
||||
{ label: "Recherche produit", href: "/produits", icon: PackageSearch, description: "Trouver un produit et voir ses ventes dans le réseau" },
|
||||
{ label: "Stocks à surveiller", href: "/stock-negatif", icon: PackageMinus, description: "Stocks négatifs et produits qui ne se vendent pas" },
|
||||
{ label: "Commandes fournisseurs", href: "/commandes-auto", icon: ShoppingCart, description: "Commandes automatiques et rythme de commande" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Analyses",
|
||||
items: [
|
||||
{ label: "Meilleures ventes", href: "/hit-parade", icon: Trophy, description: "Classement des produits les plus vendus sur une période" },
|
||||
{ label: "Ventes par mois", href: "/analytics", icon: CalendarRange, description: "Chiffre d'affaires d'un mois comparé à l'an dernier" },
|
||||
{ label: "Publicités", href: "/publicites", icon: Megaphone, description: "Résultats des opérations publicitaires" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Suivi",
|
||||
items: [
|
||||
{ label: "Historique", href: "/historique", icon: History, description: "Sessions de révision enregistrées et exports" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Administration",
|
||||
items: [
|
||||
{ label: "Synchronisation", href: "/admin/synchronisation", icon: CalendarClock, description: "Mise à jour nocturne des données", adminOnly: true },
|
||||
{ label: "Paramètres", href: "/settings", icon: Settings, description: "Connexions, utilisateurs et clés d'accès", adminOnly: true },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
/** Entrée du menu correspondant à l'adresse courante (pour le titre de l'en-tête). */
|
||||
export function pageCourante(pathname: string): NavItem | undefined {
|
||||
for (const g of NAV_GROUPS) {
|
||||
for (const item of g.items) {
|
||||
if (pathname === item.href || pathname.startsWith(`${item.href}/`)) return item;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
@@ -1,161 +1,139 @@
|
||||
"use client";
|
||||
|
||||
import { LayoutGrid, Camera, FileDown, Settings, Package, PackageSearch, BarChart2, TrendingUp, Trophy, Megaphone, PackageMinus, ShoppingCart, LogOut, User as UserIcon, Loader2, ChevronRight, ChevronLeft, CalendarClock } from "lucide-react";
|
||||
import { ChevronLeft, ChevronRight, Package } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useGridStore } from "@/features/grid/store/use-grid-store";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSession, signOut } from "next-auth/react";
|
||||
import { NAV_GROUPS } from "@/components/shared/navigation";
|
||||
import { Tooltip } from "@/components/ui/tooltip";
|
||||
|
||||
const NAV_ITEMS = [
|
||||
{ icon: BarChart2, label: "Dashboard", href: "/dashboard" },
|
||||
{ icon: LayoutGrid, label: "Grille", href: "/grid" },
|
||||
{ icon: PackageSearch, label: "Produits", href: "/produits" },
|
||||
{ icon: TrendingUp, label: "Analytics", href: "/analytics" },
|
||||
{ icon: Trophy, label: "Hit Parade", href: "/hit-parade" },
|
||||
{ icon: Megaphone, label: "Publicités", href: "/publicites" },
|
||||
{ icon: PackageMinus, label: "Gestion de Stock", href: "/stock-negatif" },
|
||||
{ icon: ShoppingCart, label: "Commandes auto", href: "/commandes-auto" },
|
||||
{ icon: Camera, label: "Snapshots", href: "/snapshots" },
|
||||
{ icon: FileDown, label: "Exports", href: "/exports", adminOnly: true },
|
||||
{ icon: CalendarClock, label: "Synchronisation", href: "/admin/synchronisation", adminOnly: true },
|
||||
{ icon: Settings, label: "Paramètres", href: "/settings", adminOnly: true },
|
||||
];
|
||||
const CLE_STOCKAGE = "sidebar_expanded";
|
||||
|
||||
/**
|
||||
* Menu principal : groupé par usage, déplié par défaut (libellés visibles).
|
||||
* Le compte utilisateur et la déconnexion sont dans l'en-tête.
|
||||
*/
|
||||
export function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
const { data: session } = useSession();
|
||||
const activeGridQuery = useGridStore((s) => s.activeGridQuery);
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// `isMounted` évite un écart d'hydratation (préférence lue dans le navigateur).
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
setIsMounted(true);
|
||||
// Load expanded state from local storage
|
||||
const stored = localStorage.getItem("sidebar_expanded");
|
||||
if (stored === "true") setIsExpanded(true);
|
||||
try {
|
||||
// Seul un repli explicite est mémorisé : par défaut, le menu est déplié.
|
||||
if (localStorage.getItem(CLE_STOCKAGE) === "false") setIsExpanded(false);
|
||||
} catch {
|
||||
/* stockage indisponible : on garde le menu déplié */
|
||||
}
|
||||
}, []);
|
||||
|
||||
const toggleSidebar = () => {
|
||||
const next = !isExpanded;
|
||||
setIsExpanded(next);
|
||||
localStorage.setItem("sidebar_expanded", String(next));
|
||||
try {
|
||||
localStorage.setItem(CLE_STOCKAGE, String(next));
|
||||
} catch {
|
||||
/* préférence non mémorisée, sans conséquence */
|
||||
}
|
||||
};
|
||||
|
||||
const userRole = (session?.user as any)?.role;
|
||||
const filteredItems = NAV_ITEMS.filter(item => !item.adminOnly || userRole === "admin");
|
||||
const isAdmin = (session?.user as { role?: string } | undefined)?.role === "admin";
|
||||
const groupes = NAV_GROUPS
|
||||
.map((g) => ({ ...g, items: g.items.filter((i) => !i.adminOnly || isAdmin) }))
|
||||
.filter((g) => g.items.length > 0);
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={cn(
|
||||
"flex-shrink-0 flex flex-col h-screen z-30 glass transition-all duration-300 relative",
|
||||
isExpanded ? "w-60" : "w-16 items-center"
|
||||
"flex-shrink-0 flex flex-col h-screen z-30 glass transition-[width] duration-200 relative border-r border-[var(--border)]",
|
||||
isExpanded ? "w-[280px]" : "w-16",
|
||||
)}
|
||||
style={{ borderRight: "1px solid var(--border)" }}
|
||||
aria-label="Menu principal"
|
||||
>
|
||||
{/* Toggle Button */}
|
||||
<button
|
||||
onClick={toggleSidebar}
|
||||
className="absolute -right-3 top-6 w-6 h-6 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-full flex items-center justify-center shadow-sm text-slate-500 hover:text-slate-800 dark:hover:text-slate-300 transition-colors z-40"
|
||||
aria-label={isExpanded ? "Replier le menu" : "Déplier le menu"}
|
||||
title={isExpanded ? "Replier le menu" : "Déplier le menu"}
|
||||
className="absolute -right-3 top-5 z-40 flex h-6 w-6 items-center justify-center rounded-full border shadow-sm bg-[var(--bg-surface)] border-[var(--border-strong)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
|
||||
>
|
||||
{isExpanded ? <ChevronLeft className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
|
||||
{isExpanded ? <ChevronLeft className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
|
||||
</button>
|
||||
|
||||
{/* Logo */}
|
||||
<div className={cn("py-[18px] w-full flex", isExpanded ? "px-5" : "justify-center")} style={{ borderBottom: "1px solid var(--border)" }}>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="w-8 h-8 rounded-xl bg-[var(--accent)] flex items-center justify-center shrink-0 shadow-sm border border-white/10" title="CollectFlow">
|
||||
<Package className="w-[18px] h-[18px] text-white" strokeWidth={2.2} />
|
||||
<div className={cn("flex h-14 items-center border-b border-[var(--border)]", isExpanded ? "px-5" : "justify-center")}>
|
||||
<Link href="/dashboard" className="flex items-center gap-2.5" title="CollectFlow — accueil">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-[var(--accent)] shadow-sm">
|
||||
<Package className="h-[18px] w-[18px] text-white" strokeWidth={2.2} />
|
||||
</div>
|
||||
{isExpanded && (
|
||||
<span className="text-[15px] font-semibold tracking-[-0.3px] text-[var(--text-primary)] whitespace-nowrap overflow-hidden">
|
||||
CollectFlow
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{isExpanded && <span className="text-base font-semibold text-[var(--text-primary)]">CollectFlow</span>}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className={cn("w-full flex-1 flex flex-col py-4 space-y-2", isExpanded ? "px-2" : "items-center px-0")}>
|
||||
{filteredItems.map(({ icon: Icon, label, href }) => {
|
||||
const isActive = pathname.startsWith(href);
|
||||
|
||||
let resolvedHref = href;
|
||||
if (href === "/grid" && isMounted && activeGridQuery) {
|
||||
resolvedHref = `/grid${activeGridQuery}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={href}
|
||||
href={resolvedHref}
|
||||
title={!isExpanded ? label : undefined}
|
||||
style={{
|
||||
color: isActive ? "var(--text-primary)" : "var(--text-secondary)",
|
||||
background: isActive ? "var(--bg-elevated)" : "transparent",
|
||||
}}
|
||||
className={cn(
|
||||
"flex items-center rounded-xl transition-all duration-150 overflow-hidden",
|
||||
isExpanded ? "px-3 py-[7px] gap-2.5 w-full" : "justify-center w-10 h-10",
|
||||
!isActive && "hover:bg-[var(--bg-elevated)]"
|
||||
)}
|
||||
>
|
||||
<Icon className={cn("shrink-0", isExpanded ? "w-[15px] h-[15px]" : "w-[18px] h-[18px]")} strokeWidth={1.8} />
|
||||
{isExpanded && <span className="text-[13px] font-medium whitespace-nowrap">{label}</span>}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* User Profile & Logout */}
|
||||
<div className={cn("w-full pb-4 flex flex-col gap-3", isExpanded ? "px-3" : "items-center")}>
|
||||
<div className={cn(
|
||||
"rounded-xl bg-[var(--bg-elevated)] border border-[var(--border)] flex items-center shadow-sm overflow-hidden",
|
||||
isExpanded ? "px-3 py-3 gap-3 w-full" : "justify-center w-10 h-10"
|
||||
)}
|
||||
title={!isExpanded ? (session?.user?.name || "Profil") : undefined}
|
||||
>
|
||||
<div className={cn(
|
||||
"rounded-lg bg-[var(--accent-bg)] flex items-center justify-center border border-[var(--accent-border)] shrink-0",
|
||||
isExpanded ? "w-8 h-8" : "w-6 h-6 border-transparent bg-transparent"
|
||||
)}>
|
||||
<UserIcon className={cn("text-[var(--accent)]", isExpanded ? "w-4 h-4" : "w-5 h-5")} />
|
||||
<nav className={cn("flex-1 overflow-y-auto py-3 px-2")}>
|
||||
{groupes.map((groupe, gi) => (
|
||||
<div key={groupe.title} className={cn(gi > 0 && "mt-4")}>
|
||||
{isExpanded ? (
|
||||
<p className="mb-1 px-3 text-xs font-semibold text-[var(--text-muted)]">{groupe.title}</p>
|
||||
) : (
|
||||
gi > 0 && <div className="mx-2 mb-3 border-t border-[var(--border)]" aria-hidden />
|
||||
)}
|
||||
<ul className="space-y-0.5">
|
||||
{groupe.items.map(({ icon: Icon, label, href, description }) => {
|
||||
const isActive = pathname === href || pathname.startsWith(`${href}/`);
|
||||
// Retour à la Grille : on rouvre le dernier fournisseur consulté.
|
||||
const resolvedHref = href === "/grid" && isMounted && activeGridQuery
|
||||
? `/grid${activeGridQuery}`
|
||||
: href;
|
||||
const lien = (
|
||||
<Link
|
||||
href={resolvedHref}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
className={cn(
|
||||
"flex items-center rounded-lg transition-colors",
|
||||
isExpanded ? "gap-3 px-3 py-2" : "h-10 w-10 justify-center mx-auto",
|
||||
isActive
|
||||
? "bg-[var(--accent-bg)] text-[var(--text-primary)] font-semibold"
|
||||
: "text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] hover:text-[var(--text-primary)]",
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
className={cn("h-[18px] w-[18px] shrink-0", isActive && "text-[var(--accent)]")}
|
||||
strokeWidth={1.9}
|
||||
aria-hidden
|
||||
/>
|
||||
{isExpanded ? (
|
||||
<span className="truncate text-sm">{label}</span>
|
||||
) : (
|
||||
<span className="sr-only">{label}</span>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
return (
|
||||
<li key={href}>
|
||||
{isExpanded ? lien : (
|
||||
<Tooltip
|
||||
side="right"
|
||||
content={<><span className="font-semibold">{label}</span><span className="block text-[var(--text-secondary)]">{description}</span></>}
|
||||
>
|
||||
{lien}
|
||||
</Tooltip>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
{isExpanded && (
|
||||
<div className="flex-1 min-w-0">
|
||||
{session?.user ? (
|
||||
<>
|
||||
<p className="text-[12px] font-bold text-[var(--text-primary)] truncate">{session.user.name}</p>
|
||||
<p className="text-[10px] uppercase font-black text-[var(--text-muted)] tracking-wider">
|
||||
{userRole === "admin" ? "Administrateur" : "Utilisateur"}
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="w-3 h-3 animate-spin text-[var(--accent)]" />
|
||||
<p className="text-[10px] text-[var(--text-muted)] animate-pulse">Session...</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={async () => {
|
||||
await signOut({ redirect: false });
|
||||
window.location.href = "/login";
|
||||
}}
|
||||
title={!isExpanded ? "Déconnexion" : undefined}
|
||||
className={cn(
|
||||
"flex items-center text-[var(--accent-error)] hover:bg-[var(--accent-error-bg)] transition-colors rounded-xl overflow-hidden",
|
||||
isExpanded ? "w-full gap-2.5 px-3 py-2 text-[13px] font-medium" : "justify-center w-10 h-10"
|
||||
)}
|
||||
>
|
||||
<LogOut className={cn("shrink-0", isExpanded ? "w-[15px] h-[15px]" : "w-[18px] h-[18px]")} strokeWidth={1.8} />
|
||||
{isExpanded && "Déconnexion"}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -1,130 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { AlertCircle, CheckCircle2, X } from "lucide-react";
|
||||
|
||||
interface SuccessModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
title: string;
|
||||
message: string;
|
||||
duration?: number;
|
||||
/**
|
||||
* `error` change l'icône, l'accent et **désactive la fermeture automatique** :
|
||||
* un message d'échec doit rester à l'écran le temps d'être lu, et il ne doit
|
||||
* pas s'afficher sous une coche verte de succès.
|
||||
*/
|
||||
variant?: "success" | "error";
|
||||
/** Action secondaire optionnelle (ex. « Recharger la page »). */
|
||||
action?: { label: string; onClick: () => void };
|
||||
}
|
||||
|
||||
/** Durée de l'animation de sortie, alignée sur les classes `animate-out`. */
|
||||
const EXIT_MS = 200;
|
||||
|
||||
export function SuccessModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
title,
|
||||
message,
|
||||
duration = 3000,
|
||||
variant = "success",
|
||||
action,
|
||||
}: SuccessModalProps) {
|
||||
// Seul l'état de SORTIE est porté par un state : l'entrée est jouée par CSS
|
||||
// au montage (`animate-in`), ce qui évite un setState synchrone dans l'effet.
|
||||
const [closing, setClosing] = useState(false);
|
||||
const isError = variant === "error";
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setClosing(true);
|
||||
setTimeout(() => {
|
||||
setClosing(false);
|
||||
onClose();
|
||||
}, EXIT_MS);
|
||||
}, [onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
// Une erreur ne disparaît pas toute seule : l'utilisateur la ferme.
|
||||
if (!isOpen || isError) return;
|
||||
const timer = setTimeout(() => handleClose(), duration);
|
||||
return () => clearTimeout(timer);
|
||||
}, [isOpen, duration, isError, handleClose]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const state = closing ? "closed" : "open";
|
||||
const Icon = isError ? AlertCircle : CheckCircle2;
|
||||
|
||||
return (
|
||||
<div
|
||||
data-state={state}
|
||||
className="fixed inset-0 z-[100] flex items-center justify-center p-4 backdrop-blur-sm duration-200 data-[state=open]:animate-in data-[state=open]:fade-in data-[state=closed]:animate-out data-[state=closed]:fade-out"
|
||||
>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0"
|
||||
style={{ background: "rgba(0,0,0,0.45)" }}
|
||||
onClick={handleClose}
|
||||
/>
|
||||
|
||||
{/* Panel */}
|
||||
<div
|
||||
data-state={state}
|
||||
className="relative w-full max-w-sm rounded-2xl overflow-hidden shadow-2xl duration-200 data-[state=open]:animate-in data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:zoom-out-95"
|
||||
style={{ background: "var(--bg-surface)", border: "1px solid var(--border)" }}
|
||||
>
|
||||
{/* Accent bar */}
|
||||
<div
|
||||
className="absolute top-0 left-0 w-full h-0.5"
|
||||
style={{
|
||||
background: isError
|
||||
? "var(--accent-error)"
|
||||
: "linear-gradient(to right, var(--accent), var(--accent-success))",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Close button */}
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="absolute top-4 right-4 p-1.5 rounded-lg hover:bg-[var(--bg-elevated)] text-[var(--text-muted)] transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<div className="p-8 flex flex-col items-center text-center">
|
||||
{/* Icon */}
|
||||
<div
|
||||
className="w-16 h-16 rounded-2xl flex items-center justify-center mb-5"
|
||||
style={
|
||||
isError
|
||||
? { background: "var(--accent-error-bg)", border: "1px solid var(--accent-error)" }
|
||||
: { background: "var(--accent-bg)", border: "1px solid var(--accent-border)" }
|
||||
}
|
||||
>
|
||||
<Icon className="w-8 h-8" style={{ color: isError ? "var(--accent-error)" : "var(--accent)" }} />
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-bold text-[var(--text-primary)] mb-2 tracking-tight">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--text-secondary)] font-medium leading-relaxed">
|
||||
{message}
|
||||
</p>
|
||||
|
||||
{action && (
|
||||
<button onClick={action.onClick} className="apple-btn-primary mt-7 w-full justify-center">
|
||||
{action.label}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className={`${action ? "apple-btn-secondary mt-2" : "apple-btn-primary mt-7"} w-full justify-center`}
|
||||
>
|
||||
{action ? "Plus tard" : "Continuer"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,7 +6,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<NextThemesProvider
|
||||
attribute="class"
|
||||
defaultTheme="dark"
|
||||
defaultTheme="light"
|
||||
enableSystem={false}
|
||||
storageKey="collectflow-theme"
|
||||
>
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { TrendingDown, TrendingUp, Minus } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { nomMagasin } from "@/lib/magasins";
|
||||
import { CLASSES_SANS_GAMME, trouverGamme } from "@/lib/gammes";
|
||||
import { fmtDecimal1 } from "@/lib/format";
|
||||
|
||||
export type Ton = "neutre" | "accent" | "succes" | "alerte" | "erreur" | "info";
|
||||
|
||||
const TONS: Record<Ton, string> = {
|
||||
neutre: "bg-[var(--bg-elevated)] text-[var(--text-secondary)] border-[var(--border)]",
|
||||
accent: "bg-[var(--accent-bg)] text-[var(--accent)] border-[var(--accent-border)]",
|
||||
succes: "bg-[var(--accent-success-bg)] text-[var(--accent-success)] border-[var(--accent-success)]/30",
|
||||
alerte: "bg-[var(--accent-warning-bg)] text-[var(--accent-warning)] border-[var(--accent-warning)]/30",
|
||||
erreur: "bg-[var(--accent-error-bg)] text-[var(--accent-error)] border-[var(--accent-error)]/30",
|
||||
info: "bg-[var(--accent-bg)] text-[var(--viz-1)] border-[var(--border)]",
|
||||
};
|
||||
|
||||
export function Badge({ ton = "neutre", children, className, title }: {
|
||||
ton?: Ton;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
title?: string;
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
title={title}
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1 whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-semibold",
|
||||
TONS[ton],
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Évolution en pourcentage (vs N-1) : flèche, signe et couleur. `null` (pas de
|
||||
* base de comparaison) s'affiche « — » plutôt qu'un faux 0 %.
|
||||
*/
|
||||
export function DeltaBadge({ pct, className }: { pct: number | null | undefined; className?: string }) {
|
||||
if (pct == null || !Number.isFinite(pct)) {
|
||||
return <Badge className={className} title="Pas de comparaison possible">—</Badge>;
|
||||
}
|
||||
const ton: Ton = pct > 0.05 ? "succes" : pct < -0.05 ? "erreur" : "neutre";
|
||||
const Icone = pct > 0.05 ? TrendingUp : pct < -0.05 ? TrendingDown : Minus;
|
||||
return (
|
||||
<Badge ton={ton} className={cn("tabular-nums", className)}>
|
||||
<Icone className="h-3.5 w-3.5" aria-hidden />
|
||||
{pct > 0 ? "+" : ""}{fmtDecimal1(pct)} %
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
/** Nom du magasin, jamais son code brut. */
|
||||
export function StoreBadge({ code, court = false }: { code: string | null | undefined; court?: boolean }) {
|
||||
return <Badge ton="accent">{nomMagasin(code, { court })}</Badge>;
|
||||
}
|
||||
|
||||
/** Pastille de gamme avec, au besoin, son nom (« A — Cœur »). */
|
||||
export function GammeBadge({ code, avecNom = false }: { code: string | null | undefined; avecNom?: boolean }) {
|
||||
const g = trouverGamme(code);
|
||||
return (
|
||||
<span
|
||||
title={g ? `${g.code} — ${g.nom} : ${g.description}` : "Aucune gamme"}
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1 whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-bold",
|
||||
g ? g.classes : CLASSES_SANS_GAMME,
|
||||
)}
|
||||
>
|
||||
{g ? g.code : "—"}
|
||||
{avecNom && <span className="font-medium">{g ? g.nom : "Sans gamme"}</span>}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import type { HTMLAttributes, ReactNode } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/** Conteneur de base : fond, bordure et ombre du thème. */
|
||||
export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn("rounded-xl border bg-[var(--bg-surface)] border-[var(--border)] shadow-[var(--shadow-sm)]", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
interface CardHeaderProps {
|
||||
title: ReactNode;
|
||||
description?: ReactNode;
|
||||
actions?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function CardHeader({ title, description, actions, className }: CardHeaderProps) {
|
||||
return (
|
||||
<div className={cn("flex flex-wrap items-start justify-between gap-3 px-5 pt-4 pb-3 border-b border-[var(--border)]", className)}>
|
||||
<div className="min-w-0">
|
||||
<h2 className="text-base font-semibold text-[var(--text-primary)]">{title}</h2>
|
||||
{description && <p className="mt-0.5 text-[13px] text-[var(--text-secondary)]">{description}</p>}
|
||||
</div>
|
||||
{actions && <div className="flex items-center gap-2">{actions}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
|
||||
return <div className={cn("p-5", className)} {...props} />;
|
||||
}
|
||||
|
||||
/** Paire libellé / valeur dans une fiche (identité produit, réglages…). */
|
||||
export function Field({ label, children, className }: { label: ReactNode; children: ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn("min-w-0", className)}>
|
||||
<div className="text-xs font-medium text-[var(--text-muted)]">{label}</div>
|
||||
<div className="mt-0.5 text-sm text-[var(--text-primary)] break-words">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,359 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* Tableau de données commun : recherche, filtres, tri par colonne, pagination,
|
||||
* export, état vide et ligne de totaux — identiques sur toutes les pages.
|
||||
*
|
||||
* Né du tableau de la page Stocks, qui avait déjà tout cela ; les autres pages
|
||||
* en réimplémentaient chacune une partie (13 tableaux faits à la main).
|
||||
*/
|
||||
|
||||
import { useDeferredValue, useMemo, useState, type ReactNode } from "react";
|
||||
import { ChevronDown, ChevronUp, ChevronsUpDown, Download, Loader2, RotateCcw } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { SearchInput, Select } from "@/components/ui/form-controls";
|
||||
import { Pagination } from "@/components/ui/pagination";
|
||||
import { EmptyState } from "@/components/ui/states";
|
||||
import { Tooltip } from "@/components/ui/tooltip";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { toast } from "@/components/ui/feedback";
|
||||
|
||||
type Sens = "asc" | "desc";
|
||||
|
||||
export interface DataColumn<T> {
|
||||
id: string;
|
||||
header: ReactNode;
|
||||
/** Explication de la colonne, en infobulle sur l'en-tête. */
|
||||
hint?: ReactNode;
|
||||
align?: "left" | "right" | "center";
|
||||
/** Valeur de tri ; sans elle, la colonne n'est pas triable. */
|
||||
sortValue?: (row: T) => string | number | null | undefined;
|
||||
cell: (row: T) => ReactNode;
|
||||
/** Cellule de la ligne de totaux (cf. `showFooter`). */
|
||||
footer?: (rows: readonly T[]) => ReactNode;
|
||||
className?: string;
|
||||
headerClassName?: string;
|
||||
}
|
||||
|
||||
export interface DataFilter<T> {
|
||||
id: string;
|
||||
label: string;
|
||||
valueOf: (row: T) => string | null | undefined;
|
||||
/** Libellé affiché pour une valeur (ex. code magasin → nom). */
|
||||
optionLabel?: (value: string) => string;
|
||||
/** Libellé de l'option « tout » (par défaut « Tous »). */
|
||||
allLabel?: string;
|
||||
/** Ordre des options : alphabétique (défaut) ou décroissant (années…). */
|
||||
order?: Sens;
|
||||
}
|
||||
|
||||
interface DataTableProps<T> {
|
||||
rows: readonly T[];
|
||||
columns: readonly DataColumn<T>[];
|
||||
rowKey: (row: T, index: number) => string;
|
||||
/** Champs parcourus par la recherche ; sans eux, pas de champ de recherche. */
|
||||
searchIn?: (row: T) => (string | number | null | undefined)[];
|
||||
searchPlaceholder?: string;
|
||||
filters?: readonly DataFilter<T>[];
|
||||
/** Lignes par page ; 0 = tout afficher. */
|
||||
pageSize?: number;
|
||||
/** Nom des lignes comptées : « articles », « fournisseurs »… */
|
||||
unite?: string;
|
||||
emptyTitle?: ReactNode;
|
||||
emptyDescription?: ReactNode;
|
||||
/** Export des lignes filtrées et triées (toutes, pas seulement la page affichée). */
|
||||
onExport?: (rows: readonly T[]) => Promise<void> | void;
|
||||
exportLabel?: string;
|
||||
/** Contrôles supplémentaires, placés avant la recherche. */
|
||||
toolbar?: ReactNode;
|
||||
/** Affiche la ligne de totaux (colonnes avec `footer`). */
|
||||
showFooter?: boolean;
|
||||
initialSort?: { id: string; dir: Sens };
|
||||
onRowClick?: (row: T) => void;
|
||||
/** Hauteur maximale de la zone défilante (en-tête collant). */
|
||||
maxHeight?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const collator = new Intl.Collator("fr", { numeric: true, sensitivity: "base" });
|
||||
|
||||
function comparer(a: string | number | null | undefined, b: string | number | null | undefined): number {
|
||||
const videA = a === null || a === undefined || a === "";
|
||||
const videB = b === null || b === undefined || b === "";
|
||||
if (videA && videB) return 0;
|
||||
if (videA) return 1; // valeurs absentes toujours en fin de liste
|
||||
if (videB) return -1;
|
||||
if (typeof a === "number" && typeof b === "number") return a - b;
|
||||
return collator.compare(String(a), String(b));
|
||||
}
|
||||
|
||||
export function DataTable<T>({
|
||||
rows,
|
||||
columns,
|
||||
rowKey,
|
||||
searchIn,
|
||||
searchPlaceholder = "Rechercher…",
|
||||
filters = [],
|
||||
pageSize = 50,
|
||||
unite = "lignes",
|
||||
emptyTitle = "Aucun résultat",
|
||||
emptyDescription,
|
||||
onExport,
|
||||
exportLabel = "Exporter en Excel",
|
||||
toolbar,
|
||||
showFooter = false,
|
||||
initialSort,
|
||||
onRowClick,
|
||||
maxHeight = "70vh",
|
||||
className,
|
||||
}: DataTableProps<T>) {
|
||||
const [recherche, setRecherche] = useState("");
|
||||
const rechercheDifferee = useDeferredValue(recherche);
|
||||
const [valeursFiltres, setValeursFiltres] = useState<Record<string, string>>({});
|
||||
const [tri, setTri] = useState<{ id: string; dir: Sens } | null>(initialSort ?? null);
|
||||
const [page, setPage] = useState(1);
|
||||
const [exportEnCours, setExportEnCours] = useState(false);
|
||||
|
||||
const optionsFiltres = useMemo(() => {
|
||||
const out: Record<string, { value: string; label: string }[]> = {};
|
||||
for (const f of filters) {
|
||||
const valeurs = new Set<string>();
|
||||
for (const r of rows) {
|
||||
const v = f.valueOf(r);
|
||||
if (v) valeurs.add(v);
|
||||
}
|
||||
const triees = [...valeurs].sort((a, b) => (f.order === "desc" ? -1 : 1) * collator.compare(a, b));
|
||||
out[f.id] = triees.map((v) => ({ value: v, label: f.optionLabel ? f.optionLabel(v) : v }));
|
||||
}
|
||||
return out;
|
||||
}, [filters, rows]);
|
||||
|
||||
const filtrees = useMemo(() => {
|
||||
const q = rechercheDifferee.trim().toLowerCase();
|
||||
const actifs = filters.filter((f) => valeursFiltres[f.id]);
|
||||
if (!q && actifs.length === 0) return rows;
|
||||
return rows.filter((r) => {
|
||||
for (const f of actifs) if (f.valueOf(r) !== valeursFiltres[f.id]) return false;
|
||||
if (q && searchIn) {
|
||||
return searchIn(r).some((v) => v !== null && v !== undefined && String(v).toLowerCase().includes(q));
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [rows, filters, valeursFiltres, rechercheDifferee, searchIn]);
|
||||
|
||||
const triees = useMemo(() => {
|
||||
if (!tri) return filtrees;
|
||||
const col = columns.find((c) => c.id === tri.id);
|
||||
if (!col?.sortValue) return filtrees;
|
||||
const valeur = col.sortValue;
|
||||
const sens = tri.dir === "asc" ? 1 : -1;
|
||||
return [...filtrees].sort((a, b) => {
|
||||
const va = valeur(a);
|
||||
const vb = valeur(b);
|
||||
const vide = va === null || va === undefined || va === "" || vb === null || vb === undefined || vb === "";
|
||||
// Les valeurs absentes restent en fin de liste dans les deux sens.
|
||||
return vide ? comparer(va, vb) : comparer(va, vb) * sens;
|
||||
});
|
||||
}, [filtrees, tri, columns]);
|
||||
|
||||
// Tout changement de filtre, de recherche ou de tri ramène à la page 1
|
||||
// (ajusté pendant le rendu, sans effet ni rendu supplémentaire).
|
||||
const [jeuPagine, setJeuPagine] = useState(triees);
|
||||
if (jeuPagine !== triees) {
|
||||
setJeuPagine(triees);
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
const total = triees.length;
|
||||
const pagine = pageSize > 0;
|
||||
const totalPages = pagine ? Math.max(1, Math.ceil(total / pageSize)) : 1;
|
||||
const pageCourante = Math.min(page, totalPages);
|
||||
const lignesAffichees = useMemo(
|
||||
() => (pagine ? triees.slice((pageCourante - 1) * pageSize, pageCourante * pageSize) : triees),
|
||||
[triees, pagine, pageCourante, pageSize],
|
||||
);
|
||||
|
||||
const filtreActif = recherche !== "" || Object.values(valeursFiltres).some(Boolean);
|
||||
|
||||
function basculerTri(id: string) {
|
||||
// Premier clic : les plus grands chiffres d'abord, mais l'ordre A→Z pour du texte.
|
||||
const col = columns.find((c) => c.id === id);
|
||||
const exemple = rows.length > 0 ? col?.sortValue?.(rows[0]) : undefined;
|
||||
const sensInitial: Sens = typeof exemple === "number" ? "desc" : "asc";
|
||||
setTri((t) => (t?.id === id ? { id, dir: t.dir === "asc" ? "desc" : "asc" } : { id, dir: sensInitial }));
|
||||
}
|
||||
|
||||
async function exporter() {
|
||||
if (!onExport || exportEnCours) return;
|
||||
setExportEnCours(true);
|
||||
try {
|
||||
await onExport(triees);
|
||||
} catch (e) {
|
||||
toast.erreur(`L'export a échoué : ${e instanceof Error ? e.message : String(e)}`);
|
||||
} finally {
|
||||
setExportEnCours(false);
|
||||
}
|
||||
}
|
||||
|
||||
const alignement = (a?: "left" | "right" | "center") =>
|
||||
a === "right" ? "text-right justify-end" : a === "center" ? "text-center justify-center" : "text-left";
|
||||
|
||||
return (
|
||||
<div className={cn("space-y-3", className)}>
|
||||
{/* Barre d'outils */}
|
||||
<div className="flex flex-wrap items-end justify-between gap-3">
|
||||
<div className="flex flex-wrap items-end gap-3">
|
||||
{toolbar}
|
||||
{searchIn && (
|
||||
<SearchInput value={recherche} onChange={setRecherche} placeholder={searchPlaceholder} aria-label="Rechercher dans le tableau" />
|
||||
)}
|
||||
{filters.map((f) => (
|
||||
<Select
|
||||
key={f.id}
|
||||
aria-label={f.label}
|
||||
label={f.label}
|
||||
value={valeursFiltres[f.id] ?? ""}
|
||||
onChange={(v) => setValeursFiltres((s) => ({ ...s, [f.id]: v }))}
|
||||
placeholder={f.allLabel ?? "Tous"}
|
||||
options={optionsFiltres[f.id] ?? []}
|
||||
/>
|
||||
))}
|
||||
{filtreActif && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => { setRecherche(""); setValeursFiltres({}); }}
|
||||
>
|
||||
<RotateCcw /> Effacer les filtres
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-[13px] text-[var(--text-secondary)] tabular-nums">
|
||||
<span className="font-semibold text-[var(--text-primary)]">{total.toLocaleString("fr-FR")}</span> {unite}
|
||||
{filtreActif && total !== rows.length && <> sur {rows.length.toLocaleString("fr-FR")}</>}
|
||||
</span>
|
||||
{onExport && (
|
||||
<Button variant="outline" onClick={exporter} disabled={exportEnCours || total === 0}>
|
||||
{exportEnCours ? <Loader2 className="animate-spin" /> : <Download />}
|
||||
{exportEnCours ? "Export en cours…" : exportLabel}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tableau */}
|
||||
{total === 0 ? (
|
||||
<EmptyState
|
||||
title={filtreActif ? "Aucune ligne ne correspond aux filtres" : emptyTitle}
|
||||
description={filtreActif ? "Modifiez la recherche ou effacez les filtres." : emptyDescription}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="overflow-auto rounded-xl border border-[var(--border)] bg-[var(--bg-surface)] shadow-[var(--shadow-sm)]"
|
||||
style={{ maxHeight }}
|
||||
>
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="sticky top-0 z-10 bg-[var(--bg-elevated)]">
|
||||
<tr>
|
||||
{columns.map((c) => {
|
||||
const triable = Boolean(c.sortValue);
|
||||
const actif = tri?.id === c.id;
|
||||
const contenu = (
|
||||
<span className={cn("inline-flex items-center gap-1", alignement(c.align))}>
|
||||
{c.header}
|
||||
{triable && (
|
||||
actif
|
||||
? (tri!.dir === "asc" ? <ChevronUp className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />)
|
||||
: <ChevronsUpDown className="h-3.5 w-3.5 opacity-40" />
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
return (
|
||||
<th
|
||||
key={c.id}
|
||||
scope="col"
|
||||
aria-sort={actif ? (tri!.dir === "asc" ? "ascending" : "descending") : undefined}
|
||||
className={cn(
|
||||
"whitespace-nowrap border-b border-[var(--border-strong)] px-3 py-2.5 text-[13px] font-semibold text-[var(--text-secondary)]",
|
||||
alignement(c.align),
|
||||
c.headerClassName,
|
||||
)}
|
||||
>
|
||||
{triable ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => basculerTri(c.id)}
|
||||
className="hover:text-[var(--text-primary)]"
|
||||
title={typeof c.hint === "string" ? c.hint : undefined}
|
||||
>
|
||||
{contenu}
|
||||
</button>
|
||||
) : c.hint ? (
|
||||
<Tooltip content={c.hint}><span className="cursor-help">{contenu}</span></Tooltip>
|
||||
) : contenu}
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{lignesAffichees.map((r, i) => (
|
||||
<tr
|
||||
key={rowKey(r, i)}
|
||||
onClick={onRowClick ? () => onRowClick(r) : undefined}
|
||||
className={cn(
|
||||
"border-b border-[var(--border)] last:border-b-0 hover:bg-[var(--bg-elevated)]",
|
||||
onRowClick && "cursor-pointer",
|
||||
)}
|
||||
>
|
||||
{columns.map((c) => (
|
||||
<td
|
||||
key={c.id}
|
||||
className={cn(
|
||||
"px-3 py-2 text-[var(--text-primary)]",
|
||||
c.align === "right" && "text-right tabular-nums",
|
||||
c.align === "center" && "text-center",
|
||||
c.className,
|
||||
)}
|
||||
>
|
||||
{c.cell(r)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
{showFooter && (
|
||||
<tfoot className="sticky bottom-0 bg-[var(--bg-elevated)] font-semibold">
|
||||
<tr>
|
||||
{columns.map((c) => (
|
||||
<td
|
||||
key={c.id}
|
||||
className={cn(
|
||||
"border-t border-[var(--border-strong)] px-3 py-2.5 text-[var(--text-primary)]",
|
||||
c.align === "right" && "text-right tabular-nums",
|
||||
c.align === "center" && "text-center",
|
||||
)}
|
||||
>
|
||||
{c.footer ? c.footer(triees) : null}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
</tfoot>
|
||||
)}
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pagine && (
|
||||
<Pagination
|
||||
page={pageCourante}
|
||||
totalPages={totalPages}
|
||||
total={total}
|
||||
pageSize={pageSize}
|
||||
onChange={setPage}
|
||||
unite={unite}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -73,7 +73,7 @@ function DialogContent({
|
||||
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||
>
|
||||
<XIcon />
|
||||
<span className="sr-only">Close</span>
|
||||
<span className="sr-only">Fermer</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
@@ -111,7 +111,7 @@ function DialogFooter({
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close asChild>
|
||||
<Button variant="outline">Close</Button>
|
||||
<Button variant="outline">Fermer</Button>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -42,7 +42,7 @@ function DropdownMenuContent({
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 max-h-[80vh] min-w-[12rem] overflow-x-hidden overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-elevated)] p-2 text-[var(--text-primary)] shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
"z-50 max-h-[80vh] min-w-[12rem] overflow-x-hidden overflow-y-auto rounded-lg border border-[var(--border-strong)] bg-[var(--bg-surface)] p-1.5 text-[var(--text-primary)] shadow-[var(--shadow-md)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -230,7 +230,7 @@ function DropdownMenuSubContent({
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-elevated)] p-1 text-[var(--text-primary)] shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
||||
"z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg border border-[var(--border-strong)] bg-[var(--bg-surface)] p-1 text-[var(--text-primary)] shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -0,0 +1,162 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* Retours à l'utilisateur, communs à toute l'application :
|
||||
* - `toast.succes / toast.erreur / toast.info` : message discret en bas à droite,
|
||||
* qui disparaît seul (remplace les fenêtres de succès et les `alert()`).
|
||||
* - `confirmer({...})` : demande de confirmation, renvoie une promesse de booléen
|
||||
* (remplace `window.confirm`, au rendu non maîtrisé et en anglais selon le poste).
|
||||
*
|
||||
* Le rendu est assuré par un unique `<FeedbackHost />` (cf. app/providers.tsx).
|
||||
*/
|
||||
|
||||
import { create } from "zustand";
|
||||
import { CheckCircle2, Info, X, XCircle } from "lucide-react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type TonToast = "succes" | "erreur" | "info";
|
||||
|
||||
interface ToastItem {
|
||||
id: number;
|
||||
ton: TonToast;
|
||||
message: string;
|
||||
}
|
||||
|
||||
interface DemandeConfirmation {
|
||||
titre: string;
|
||||
message?: string;
|
||||
libelleConfirmer: string;
|
||||
danger: boolean;
|
||||
resoudre: (ok: boolean) => void;
|
||||
}
|
||||
|
||||
interface FeedbackState {
|
||||
toasts: ToastItem[];
|
||||
confirmation: DemandeConfirmation | null;
|
||||
}
|
||||
|
||||
const useFeedback = create<FeedbackState>(() => ({ toasts: [], confirmation: null }));
|
||||
|
||||
let prochainId = 1;
|
||||
|
||||
function ajouterToast(ton: TonToast, message: string, dureeMs: number) {
|
||||
const id = prochainId++;
|
||||
useFeedback.setState((s) => ({ toasts: [...s.toasts.slice(-3), { id, ton, message }] }));
|
||||
window.setTimeout(() => retirerToast(id), dureeMs);
|
||||
}
|
||||
|
||||
function retirerToast(id: number) {
|
||||
useFeedback.setState((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) }));
|
||||
}
|
||||
|
||||
export const toast = {
|
||||
succes: (message: string) => ajouterToast("succes", message, 3500),
|
||||
erreur: (message: string) => ajouterToast("erreur", message, 7000),
|
||||
info: (message: string) => ajouterToast("info", message, 4500),
|
||||
};
|
||||
|
||||
interface OptionsConfirmation {
|
||||
titre: string;
|
||||
message?: string;
|
||||
/** Libellé du bouton de validation : un verbe (« Supprimer »), jamais « OK ». */
|
||||
libelleConfirmer?: string;
|
||||
/** Action irréversible : bouton rouge. */
|
||||
danger?: boolean;
|
||||
}
|
||||
|
||||
export function confirmer(options: OptionsConfirmation): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
// Une demande encore ouverte est considérée comme refusée.
|
||||
useFeedback.getState().confirmation?.resoudre(false);
|
||||
useFeedback.setState({
|
||||
confirmation: {
|
||||
titre: options.titre,
|
||||
message: options.message,
|
||||
libelleConfirmer: options.libelleConfirmer ?? "Confirmer",
|
||||
danger: options.danger ?? false,
|
||||
resoudre: resolve,
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function repondre(ok: boolean) {
|
||||
const demande = useFeedback.getState().confirmation;
|
||||
if (!demande) return;
|
||||
useFeedback.setState({ confirmation: null });
|
||||
demande.resoudre(ok);
|
||||
}
|
||||
|
||||
const ICONES = { succes: CheckCircle2, erreur: XCircle, info: Info } as const;
|
||||
const COULEURS: Record<TonToast, string> = {
|
||||
succes: "var(--accent-success)",
|
||||
erreur: "var(--accent-error)",
|
||||
info: "var(--accent)",
|
||||
};
|
||||
|
||||
export function FeedbackHost() {
|
||||
const toasts = useFeedback((s) => s.toasts);
|
||||
const confirmation = useFeedback((s) => s.confirmation);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="pointer-events-none fixed bottom-4 right-4 z-[300] flex w-[min(380px,calc(100vw-2rem))] flex-col gap-2"
|
||||
>
|
||||
{toasts.map((t) => {
|
||||
const Icone = ICONES[t.ton];
|
||||
return (
|
||||
<div
|
||||
key={t.id}
|
||||
role={t.ton === "erreur" ? "alert" : "status"}
|
||||
className="pointer-events-auto flex items-start gap-3 rounded-xl border px-4 py-3 shadow-[var(--shadow-lg)] animate-in fade-in-0 slide-in-from-bottom-2"
|
||||
style={{ background: "var(--bg-surface)", borderColor: "var(--border-strong)" }}
|
||||
>
|
||||
<Icone className="mt-0.5 h-5 w-5 shrink-0" style={{ color: COULEURS[t.ton] }} aria-hidden />
|
||||
<p className="flex-1 text-sm text-[var(--text-primary)]">{t.message}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => retirerToast(t.id)}
|
||||
aria-label="Fermer le message"
|
||||
className="rounded p-0.5 text-[var(--text-muted)] hover:text-[var(--text-primary)]"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Dialog open={confirmation !== null} onOpenChange={(open) => { if (!open) repondre(false); }}>
|
||||
<DialogContent showCloseButton={false} className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{confirmation?.titre}</DialogTitle>
|
||||
{confirmation?.message && (
|
||||
<DialogDescription className="text-[var(--text-secondary)]">{confirmation.message}</DialogDescription>
|
||||
)}
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => repondre(false)}>Annuler</Button>
|
||||
<Button
|
||||
variant={confirmation?.danger ? "destructive" : "default"}
|
||||
onClick={() => repondre(true)}
|
||||
className={cn(confirmation?.danger && "dark:bg-destructive")}
|
||||
>
|
||||
{confirmation?.libelleConfirmer}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
"use client";
|
||||
|
||||
import type { InputHTMLAttributes, ReactNode, SelectHTMLAttributes } from "react";
|
||||
import { Search, X } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const CHAMP =
|
||||
"h-9 rounded-lg border px-3 text-sm bg-[var(--bg-surface)] border-[var(--border-strong)] text-[var(--text-primary)] " +
|
||||
"placeholder:text-[var(--text-muted)] focus:outline-none focus:border-[var(--accent)] focus:ring-2 focus:ring-[var(--accent-bg)] " +
|
||||
"disabled:opacity-60 disabled:cursor-not-allowed";
|
||||
|
||||
/** Libellé au-dessus d'un champ (et non à côté) : plus lisible en colonne étroite. */
|
||||
export function Label({ children, htmlFor, className }: { children: ReactNode; htmlFor?: string; className?: string }) {
|
||||
return (
|
||||
<label htmlFor={htmlFor} className={cn("block mb-1 text-[13px] font-medium text-[var(--text-secondary)]", className)}>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
export interface SelectOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "onChange"> {
|
||||
label?: ReactNode;
|
||||
options: readonly SelectOption[];
|
||||
onChange: (value: string) => void;
|
||||
/** Option vide en tête (« Tous », « Tous les fournisseurs »…). */
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
/** Liste déroulante native, au style du thème. */
|
||||
export function Select({ label, options, onChange, placeholder, className, id, ...props }: SelectProps) {
|
||||
const select = (
|
||||
<select
|
||||
id={id}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className={cn(CHAMP, "pr-8 min-w-[160px] cursor-pointer", className)}
|
||||
{...props}
|
||||
>
|
||||
{placeholder !== undefined && <option value="">{placeholder}</option>}
|
||||
{options.map((o) => (
|
||||
<option key={o.value} value={o.value}>{o.label}</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
if (!label) return select;
|
||||
return (
|
||||
<div>
|
||||
<Label htmlFor={id}>{label}</Label>
|
||||
{select}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
/** Champ de recherche avec loupe et bouton d'effacement. */
|
||||
export function SearchInput({ value, onChange, className, placeholder = "Rechercher…", ...props }: SearchInputProps) {
|
||||
return (
|
||||
<div className={cn("relative", className)}>
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--text-muted)]" aria-hidden />
|
||||
<input
|
||||
type="search"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className={cn(CHAMP, "w-full min-w-[240px] pl-9 pr-8")}
|
||||
{...props}
|
||||
/>
|
||||
{value && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange("")}
|
||||
aria-label="Effacer la recherche"
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)]"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Input({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) {
|
||||
return <input className={cn(CHAMP, className)} {...props} />;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import type { ReactNode } from "react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface PageHeaderProps {
|
||||
title: ReactNode;
|
||||
/** Une phrase : à quoi sert la page, en langage courant. */
|
||||
description?: ReactNode;
|
||||
icon?: LucideIcon;
|
||||
/** Boutons ou filtres alignés à droite du titre. */
|
||||
actions?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* En-tête commun à toutes les pages : même taille de titre, même place pour
|
||||
* l'explication et pour les actions. Il y en avait sept variantes.
|
||||
*/
|
||||
export function PageHeader({ title, description, icon: Icon, actions, className }: PageHeaderProps) {
|
||||
return (
|
||||
<header className={cn("flex flex-wrap items-start justify-between gap-4 mb-6", className)}>
|
||||
<div className="flex items-start gap-3 min-w-0">
|
||||
{Icon && (
|
||||
<div
|
||||
className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border"
|
||||
style={{ background: "var(--accent-bg)", borderColor: "var(--accent-border)", color: "var(--accent)" }}
|
||||
>
|
||||
<Icon className="h-5 w-5" strokeWidth={2} />
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0">
|
||||
<h1 className="text-2xl font-bold tracking-tight" style={{ color: "var(--text-primary)" }}>
|
||||
{title}
|
||||
</h1>
|
||||
{description && (
|
||||
<p className="mt-1 text-sm max-w-3xl" style={{ color: "var(--text-secondary)" }}>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
"use client";
|
||||
|
||||
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
|
||||
|
||||
interface PaginationProps {
|
||||
page: number;
|
||||
totalPages: number;
|
||||
total: number;
|
||||
pageSize: number;
|
||||
onChange: (page: number) => void;
|
||||
/** Nom des éléments comptés (« articles », « publicités »…). */
|
||||
unite?: string;
|
||||
}
|
||||
|
||||
/** Pagination commune : « 51 à 100 sur 1 234 articles » et quatre boutons. */
|
||||
export function Pagination({ page, totalPages, total, pageSize, onChange, unite = "lignes" }: PaginationProps) {
|
||||
if (total === 0 || totalPages <= 1) return null;
|
||||
const debut = (page - 1) * pageSize + 1;
|
||||
const fin = Math.min(page * pageSize, total);
|
||||
const aller = (p: number) => onChange(Math.min(Math.max(1, p), totalPages));
|
||||
const bouton =
|
||||
"rounded-lg border p-1.5 border-[var(--border-strong)] bg-[var(--bg-surface)] text-[var(--text-secondary)] " +
|
||||
"hover:bg-[var(--bg-elevated)] hover:text-[var(--text-primary)] disabled:cursor-not-allowed disabled:opacity-40";
|
||||
|
||||
return (
|
||||
<nav aria-label="Pagination" className="flex flex-wrap items-center justify-between gap-3">
|
||||
<span className="text-[13px] text-[var(--text-secondary)] tabular-nums">
|
||||
{debut.toLocaleString("fr-FR")} à {fin.toLocaleString("fr-FR")} sur{" "}
|
||||
<span className="font-semibold text-[var(--text-primary)]">{total.toLocaleString("fr-FR")}</span> {unite}
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button type="button" className={bouton} onClick={() => aller(1)} disabled={page <= 1} aria-label="Première page">
|
||||
<ChevronsLeft className="h-4 w-4" />
|
||||
</button>
|
||||
<button type="button" className={bouton} onClick={() => aller(page - 1)} disabled={page <= 1} aria-label="Page précédente">
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</button>
|
||||
<span className="px-2 text-[13px] text-[var(--text-secondary)] tabular-nums">
|
||||
Page {page.toLocaleString("fr-FR")} / {totalPages.toLocaleString("fr-FR")}
|
||||
</span>
|
||||
<button type="button" className={bouton} onClick={() => aller(page + 1)} disabled={page >= totalPages} aria-label="Page suivante">
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</button>
|
||||
<button type="button" className={bouton} onClick={() => aller(totalPages)} disabled={page >= totalPages} aria-label="Dernière page">
|
||||
<ChevronsRight className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import type { ReactNode } from "react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { DeltaBadge } from "@/components/ui/badge";
|
||||
|
||||
interface StatCardProps {
|
||||
label: ReactNode;
|
||||
value: ReactNode;
|
||||
/** Précision sous la valeur (« dont 12 en promo », « hier »…). */
|
||||
hint?: ReactNode;
|
||||
/** Évolution en % à afficher en pastille (vs N-1). */
|
||||
delta?: number | null;
|
||||
deltaLabel?: ReactNode;
|
||||
icon?: LucideIcon;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/** Indicateur chiffré : libellé lisible, valeur en grand, évolution. */
|
||||
export function StatCard({ label, value, hint, delta, deltaLabel = "vs N-1", icon: Icon, className }: StatCardProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-xl border p-4 flex flex-col gap-2 bg-[var(--bg-surface)] border-[var(--border)] shadow-[var(--shadow-sm)]",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="text-[13px] font-medium text-[var(--text-secondary)]">{label}</span>
|
||||
{Icon && <Icon className="h-4 w-4 shrink-0 text-[var(--text-muted)]" aria-hidden />}
|
||||
</div>
|
||||
<div className="text-2xl font-bold tabular-nums tracking-tight text-[var(--text-primary)]">{value}</div>
|
||||
{(delta !== undefined || hint) && (
|
||||
<div className="flex flex-wrap items-center gap-2 text-[13px] text-[var(--text-muted)]">
|
||||
{delta !== undefined && (
|
||||
<>
|
||||
<DeltaBadge pct={delta} />
|
||||
<span>{deltaLabel}</span>
|
||||
</>
|
||||
)}
|
||||
{hint && <span>{hint}</span>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { AlertTriangle, Inbox, type LucideIcon } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface EmptyStateProps {
|
||||
title: ReactNode;
|
||||
description?: ReactNode;
|
||||
icon?: LucideIcon;
|
||||
action?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/** Rien à afficher : dire pourquoi, et quoi faire. */
|
||||
export function EmptyState({ title, description, icon: Icon = Inbox, action, className }: EmptyStateProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col items-center justify-center gap-2 rounded-xl border border-dashed px-6 py-12 text-center",
|
||||
"border-[var(--border-strong)] bg-[var(--bg-surface)]",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<Icon className="h-8 w-8 text-[var(--text-muted)]" aria-hidden />
|
||||
<p className="text-base font-semibold text-[var(--text-primary)]">{title}</p>
|
||||
{description && <p className="max-w-md text-sm text-[var(--text-secondary)]">{description}</p>}
|
||||
{action && <div className="mt-2">{action}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ErrorStateProps {
|
||||
title?: ReactNode;
|
||||
/** Explication pour l'utilisateur ; le détail technique va dans `detail`. */
|
||||
description?: ReactNode;
|
||||
/** Message technique, replié par défaut. */
|
||||
detail?: string;
|
||||
action?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/** Un chargement a échoué : message clair, détail technique replié, action de reprise. */
|
||||
export function ErrorState({
|
||||
title = "Les données n'ont pas pu être chargées",
|
||||
description = "Réessayez dans un instant. Si le problème persiste, prévenez un administrateur.",
|
||||
detail,
|
||||
action,
|
||||
className,
|
||||
}: ErrorStateProps) {
|
||||
return (
|
||||
<div
|
||||
role="alert"
|
||||
className={cn(
|
||||
"flex flex-col items-center gap-2 rounded-xl border px-6 py-10 text-center",
|
||||
"border-[var(--accent-error)]/40 bg-[var(--accent-error-bg)]",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<AlertTriangle className="h-8 w-8 text-[var(--accent-error)]" aria-hidden />
|
||||
<p className="text-base font-semibold text-[var(--text-primary)]">{title}</p>
|
||||
<p className="max-w-md text-sm text-[var(--text-secondary)]">{description}</p>
|
||||
{detail && (
|
||||
<details className="mt-1 max-w-xl text-left text-xs text-[var(--text-muted)]">
|
||||
<summary className="cursor-pointer">Détail technique</summary>
|
||||
<pre className="mt-1 whitespace-pre-wrap break-words font-mono">{detail}</pre>
|
||||
</details>
|
||||
)}
|
||||
{action && <div className="mt-2">{action}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Skeleton({ className }: { className?: string }) {
|
||||
return <div className={cn("animate-pulse rounded-md bg-[var(--bg-elevated)]", className)} aria-hidden />;
|
||||
}
|
||||
|
||||
/**
|
||||
* Silhouette d'une page pendant son chargement : la mise en page reste visible
|
||||
* et rien ne bloque l'écran (contrairement à l'ancienne fenêtre plein écran).
|
||||
*/
|
||||
export function PageSkeleton({ cards = 0, rows = 8 }: { cards?: number; rows?: number }) {
|
||||
return (
|
||||
<div className="space-y-6" aria-busy="true" aria-label="Chargement de la page">
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="h-10 w-10 rounded-xl" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-6 w-56" />
|
||||
<Skeleton className="h-4 w-80" />
|
||||
</div>
|
||||
</div>
|
||||
{cards > 0 && (
|
||||
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
||||
{Array.from({ length: cards }, (_, i) => <Skeleton key={i} className="h-28 rounded-xl" />)}
|
||||
</div>
|
||||
)}
|
||||
<div className="rounded-xl border border-[var(--border)] bg-[var(--bg-surface)] p-4 space-y-3">
|
||||
<Skeleton className="h-9 w-full" />
|
||||
{Array.from({ length: rows }, (_, i) => <Skeleton key={i} className="h-7 w-full" />)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
"use client";
|
||||
|
||||
import { useState, type ReactNode } from "react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface TabItem<V extends string> {
|
||||
value: V;
|
||||
label: ReactNode;
|
||||
/** Compteur affiché à droite du libellé. */
|
||||
count?: number;
|
||||
/** Pastille d'alerte (rouge) au lieu d'un compteur neutre. */
|
||||
alert?: boolean;
|
||||
icon?: LucideIcon;
|
||||
}
|
||||
|
||||
interface TabsProps<V extends string> {
|
||||
items: readonly TabItem<V>[];
|
||||
value: V;
|
||||
onChange: (value: V) => void;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Onglets soulignés, identiques sur toutes les pages. L'appelant décide de la
|
||||
* synchronisation avec l'URL (cf. `useUrlTab`) : un onglet doit pouvoir être
|
||||
* partagé par lien et survivre au rechargement.
|
||||
*/
|
||||
export function Tabs<V extends string>({ items, value, onChange, disabled, className }: TabsProps<V>) {
|
||||
return (
|
||||
<div role="tablist" className={cn("flex shrink-0 gap-1 overflow-x-auto border-b border-[var(--border)]", className)}>
|
||||
{items.map((t) => {
|
||||
const actif = t.value === value;
|
||||
const Icone = t.icon;
|
||||
return (
|
||||
<button
|
||||
key={t.value}
|
||||
role="tab"
|
||||
type="button"
|
||||
aria-selected={actif}
|
||||
disabled={disabled}
|
||||
onClick={() => !actif && onChange(t.value)}
|
||||
className={cn(
|
||||
"-mb-px inline-flex items-center gap-2 whitespace-nowrap border-b-2 px-4 py-2.5 text-sm font-medium transition-colors disabled:cursor-wait",
|
||||
actif
|
||||
? "border-[var(--accent)] text-[var(--text-primary)]"
|
||||
: "border-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--border-strong)]",
|
||||
)}
|
||||
>
|
||||
{Icone && <Icone className="h-4 w-4" aria-hidden />}
|
||||
{t.label}
|
||||
{t.count !== undefined && (
|
||||
<span
|
||||
className={cn(
|
||||
"rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums",
|
||||
t.alert && t.count > 0
|
||||
? "bg-[var(--accent-error)] text-white"
|
||||
: actif
|
||||
? "bg-[var(--accent-bg)] text-[var(--accent)]"
|
||||
: "bg-[var(--bg-elevated)] text-[var(--text-secondary)]",
|
||||
)}
|
||||
>
|
||||
{t.count.toLocaleString("fr-FR")}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Segment de choix court (2 à 4 options), pour les bascules du type
|
||||
* « Fournisseur / Nomenclature » ou « Tous / Frouard / Houdemont ».
|
||||
*/
|
||||
export function Segmented<V extends string>({ items, value, onChange, disabled, className }: TabsProps<V>) {
|
||||
return (
|
||||
<div
|
||||
role="radiogroup"
|
||||
className={cn("inline-flex w-fit shrink-0 gap-0.5 rounded-lg border p-0.5 bg-[var(--bg-elevated)] border-[var(--border)]", className)}
|
||||
>
|
||||
{items.map((t) => {
|
||||
const actif = t.value === value;
|
||||
return (
|
||||
<button
|
||||
key={t.value}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={actif}
|
||||
disabled={disabled}
|
||||
onClick={() => !actif && onChange(t.value)}
|
||||
className={cn(
|
||||
"rounded-md px-3 py-1.5 text-[13px] font-medium transition-colors whitespace-nowrap disabled:cursor-wait",
|
||||
actif
|
||||
? "bg-[var(--bg-surface)] text-[var(--text-primary)] shadow-[var(--shadow-sm)]"
|
||||
: "text-[var(--text-secondary)] hover:text-[var(--text-primary)]",
|
||||
)}
|
||||
>
|
||||
{t.label}
|
||||
{t.count !== undefined && (
|
||||
<span className="ml-1.5 text-xs tabular-nums text-[var(--text-muted)]">{t.count.toLocaleString("fr-FR")}</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Onglet actif reflété dans l'URL (`?param=valeur`) sans navigation serveur :
|
||||
* le lien se partage et survit au rechargement, et changer d'onglet ne relance
|
||||
* aucune requête. `initial` vient de la page serveur (searchParams).
|
||||
*/
|
||||
export function useUrlTab<V extends string>(param: string, initial: V): [V, (value: V) => void] {
|
||||
const [value, setValue] = useState<V>(initial);
|
||||
const change = (next: V) => {
|
||||
setValue(next);
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set(param, next);
|
||||
window.history.replaceState(window.history.state, "", url.toString());
|
||||
};
|
||||
return [value, change];
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
"use client";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||
import { Info } from "lucide-react";
|
||||
import { GLOSSAIRE, type CleGlossaire } from "@/lib/glossaire";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/** À placer une fois en haut de l'arbre (cf. app/providers.tsx). */
|
||||
export function TooltipProvider({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<TooltipPrimitive.Provider delayDuration={250} skipDelayDuration={100}>
|
||||
{children}
|
||||
</TooltipPrimitive.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
interface TooltipProps {
|
||||
content: ReactNode;
|
||||
children: ReactNode;
|
||||
side?: "top" | "right" | "bottom" | "left";
|
||||
}
|
||||
|
||||
/** Infobulle accessible (survol et focus clavier), lisible dans les deux thèmes. */
|
||||
export function Tooltip({ content, children, side = "top" }: TooltipProps) {
|
||||
return (
|
||||
<TooltipPrimitive.Root>
|
||||
<TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Content
|
||||
side={side}
|
||||
sideOffset={6}
|
||||
collisionPadding={8}
|
||||
className="z-[200] max-w-xs rounded-lg border px-3 py-2 text-[13px] leading-snug shadow-[var(--shadow-md)] animate-in fade-in-0 zoom-in-95"
|
||||
style={{ background: "var(--bg-surface)", borderColor: "var(--border-strong)", color: "var(--text-primary)" }}
|
||||
>
|
||||
{content}
|
||||
</TooltipPrimitive.Content>
|
||||
</TooltipPrimitive.Portal>
|
||||
</TooltipPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
interface TermeProps {
|
||||
/** Entrée du glossaire à expliquer. */
|
||||
id: CleGlossaire;
|
||||
/** Texte affiché ; par défaut le libellé du glossaire. */
|
||||
children?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Terme métier avec sa définition au survol : un petit « i » signale qu'une
|
||||
* explication existe, sans encombrer la lecture.
|
||||
*/
|
||||
export function Terme({ id, children, className }: TermeProps) {
|
||||
const entree = GLOSSAIRE[id];
|
||||
return (
|
||||
<Tooltip
|
||||
content={
|
||||
<>
|
||||
<span className="font-semibold">{entree.terme}</span>
|
||||
<span className="block mt-0.5" style={{ color: "var(--text-secondary)" }}>{entree.definition}</span>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<span
|
||||
tabIndex={0}
|
||||
className={cn("inline-flex items-center gap-1 cursor-help outline-none", className)}
|
||||
>
|
||||
{children ?? entree.terme}
|
||||
<Info className="h-3.5 w-3.5 shrink-0 opacity-60" aria-hidden />
|
||||
</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
/** Texte suivi d'un « i » : explication libre au survol (hors glossaire). */
|
||||
export function InfoBulle({ children, explication, className }: { children: ReactNode; explication: ReactNode; className?: string }) {
|
||||
return (
|
||||
<Tooltip content={explication}>
|
||||
<span tabIndex={0} className={cn("inline-flex items-center gap-1 cursor-help outline-none", className)}>
|
||||
{children}
|
||||
<Info className="h-3.5 w-3.5 shrink-0 opacity-60" aria-hidden />
|
||||
</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
+36
-11
@@ -4,12 +4,19 @@ import * as schema from "./schema";
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
|
||||
let pool: Pool | null = null;
|
||||
let currentDb: NodePgDatabase<typeof schema> | null = null;
|
||||
/**
|
||||
* Pool unique par processus, rangé dans `globalThis` : l'instrumentation (synchro
|
||||
* nocturne) et les routes peuvent être compilées dans des lots distincts, chacun
|
||||
* avec sa propre copie de ce module — et donc son propre pool de 20 connexions.
|
||||
* Même chose à chaque rechargement à chaud en développement.
|
||||
*/
|
||||
type DbState = { pool: Pool | null; db: NodePgDatabase<typeof schema> | null };
|
||||
const globalForDb = globalThis as typeof globalThis & { __collectflowDb?: DbState };
|
||||
const state: DbState = (globalForDb.__collectflowDb ??= { pool: null, db: null });
|
||||
|
||||
export function getPool(): Pool {
|
||||
getDb(); // ensure pool is initialized
|
||||
return pool!;
|
||||
return state.pool!;
|
||||
}
|
||||
|
||||
function maskUrl(url: string | undefined) {
|
||||
@@ -21,7 +28,7 @@ function maskUrl(url: string | undefined) {
|
||||
* Initializes or returns the current database instance.
|
||||
*/
|
||||
export function getDb() {
|
||||
if (currentDb) return currentDb;
|
||||
if (state.db) return state.db;
|
||||
|
||||
let connectionString = "";
|
||||
|
||||
@@ -54,19 +61,37 @@ export function getDb() {
|
||||
const connectionHostname = connectionString.match(/@([^:/]+)/)?.[1] || "unknown";
|
||||
console.log(`[DB] Target Hostname: ${connectionHostname}`);
|
||||
|
||||
pool = new Pool({
|
||||
// Délai maximal par requête : opt-in (les calculs nocturnes des plus gros
|
||||
// fournisseurs peuvent être longs), pour qu'une requête emballée ne monopolise
|
||||
// pas indéfiniment une des 20 connexions.
|
||||
const statementTimeout = Number(process.env.PG_STATEMENT_TIMEOUT_MS) || undefined;
|
||||
|
||||
const pool = new Pool({
|
||||
connectionString,
|
||||
max: 20,
|
||||
idleTimeoutMillis: 30000,
|
||||
connectionTimeoutMillis: 10000,
|
||||
application_name: "collectflow",
|
||||
...(statementTimeout ? { statement_timeout: statementTimeout } : {}),
|
||||
});
|
||||
|
||||
pool.on('error', (err) => {
|
||||
console.error('[DB] Unexpected error on idle client', err);
|
||||
});
|
||||
|
||||
currentDb = drizzle(pool, { schema });
|
||||
return currentDb;
|
||||
// Pas de workers parallèles PostgreSQL : ils consomment /dev/shm, trop petit
|
||||
// dans le conteneur, et font échouer les grosses agrégations. Réglé une fois
|
||||
// par connexion (la requête est mise en file avant toute autre sur ce client)
|
||||
// au lieu d'une transaction BEGIN / SET LOCAL / COMMIT autour de chaque requête.
|
||||
pool.on('connect', (client) => {
|
||||
client.query("SET max_parallel_workers_per_gather = 0").catch((err) => {
|
||||
console.error('[DB] SET max_parallel_workers_per_gather failed:', err?.message);
|
||||
});
|
||||
});
|
||||
|
||||
state.pool = pool;
|
||||
state.db = drizzle(pool, { schema });
|
||||
return state.db;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -75,11 +100,11 @@ export function getDb() {
|
||||
*/
|
||||
export function refreshDb() {
|
||||
console.log("[DB] Refreshing database connection...");
|
||||
if (pool) {
|
||||
pool.end().catch(err => console.error("[DB] Error closing pool:", err));
|
||||
pool = null;
|
||||
if (state.pool) {
|
||||
state.pool.end().catch(err => console.error("[DB] Error closing pool:", err));
|
||||
state.pool = null;
|
||||
}
|
||||
currentDb = null;
|
||||
state.db = null;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
+5
-1
@@ -75,7 +75,11 @@ export const sessionSnapshots = pgTable("session_snapshots", {
|
||||
/** snapshot vs export */
|
||||
type: varchar("type", { length: 20 }).default("snapshot"),
|
||||
createdAt: timestamp("created_at").defaultNow(),
|
||||
});
|
||||
}, (table) => [
|
||||
// Créés par scripts/db-init.js (la migration réellement jouée au démarrage).
|
||||
index("idx_snapshots_fournisseur_date").on(table.codeFournisseur, table.createdAt.desc()),
|
||||
index("idx_snapshots_user_type_date").on(table.userId, table.type, table.createdAt.desc()),
|
||||
]);
|
||||
|
||||
/**
|
||||
* Cadencier / alertes de commande par fournisseur ET par magasin.
|
||||
|
||||
@@ -33,6 +33,7 @@ import { fetchNetworkMetricsPlaywright } from "@/lib/qlik-playwright";
|
||||
import { upsertNetworkMetrics } from "@/lib/qlik-network-cache";
|
||||
import { buildGridNetworkQlikDateFilter, envMonthsBack, QLIK_MONTHS_BACK_DEFAULT } from "@/lib/qlik-date-range";
|
||||
import { readSyncSettings, type SyncSettings } from "@/features/admin/api/sync-settings";
|
||||
import { invalidateFFCache } from "@/lib/ff-cache";
|
||||
|
||||
export type { SyncSettings };
|
||||
|
||||
@@ -338,6 +339,9 @@ export async function lancerRound(origine: "auto" | "manuel", forcerHorsFenetre
|
||||
etat.derniereErreur = e instanceof Error ? e.message : String(e);
|
||||
console.error("[sync-nuit] round interrompu :", etat.derniereErreur);
|
||||
} finally {
|
||||
// Les pages (stock, hit-parade, CA…) relisent la base fraîche au lieu
|
||||
// d'attendre la fin de vie de leur cache.
|
||||
invalidateFFCache();
|
||||
etat.enCours = false;
|
||||
etat.fournisseurCourant = null;
|
||||
etat.etape = null;
|
||||
|
||||
@@ -8,31 +8,42 @@
|
||||
* déduite de l'origine courante, pour rester juste quel que soit le déploiement.
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Copy, Check, ExternalLink, Bot } from "lucide-react";
|
||||
import { useEffect, useState, type ReactNode } from "react";
|
||||
import { Copy, Check, ExternalLink, Bot, ChevronRight } from "lucide-react";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { toast } from "@/components/ui/feedback";
|
||||
|
||||
function CopyButton({ text }: { text: string }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const copier = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1500);
|
||||
} catch {
|
||||
toast.erreur("La copie automatique a échoué : sélectionnez le texte et copiez-le à la main.");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => { navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 1500); }}
|
||||
className="shrink-0 rounded-lg px-2 py-1.5"
|
||||
style={{ background: "var(--bg-surface)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
onClick={copier}
|
||||
aria-label="Copier"
|
||||
title="Copier"
|
||||
className="shrink-0"
|
||||
>
|
||||
{copied ? <Check className="w-3.5 h-3.5 text-emerald-500" /> : <Copy className="w-3.5 h-3.5" />}
|
||||
</button>
|
||||
{copied ? <Check className="text-[var(--accent-success)]" /> : <Copy />}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
function CodeLine({ children, copy }: { children: string; copy?: string }) {
|
||||
return (
|
||||
<div className="flex items-start gap-2">
|
||||
<code
|
||||
className="flex-1 rounded-lg px-2.5 py-1.5 text-[11px] font-mono break-all whitespace-pre-wrap"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }}
|
||||
>
|
||||
<code className="flex-1 whitespace-pre-wrap break-all rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)] px-3 py-1.5 font-mono text-[13px] text-[var(--text-primary)]">
|
||||
{children}
|
||||
</code>
|
||||
<CopyButton text={copy ?? children} />
|
||||
@@ -40,25 +51,47 @@ function CodeLine({ children, copy }: { children: string; copy?: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
function Bloc({ titre, children }: { titre: ReactNode; children: ReactNode }) {
|
||||
return (
|
||||
<section className="space-y-2">
|
||||
<h3 className="text-sm font-semibold text-[var(--text-primary)]">{titre}</h3>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/** Référence technique repliée : utile aux développeurs, superflue pour les autres. */
|
||||
function Repli({ titre, children }: { titre: ReactNode; children: ReactNode }) {
|
||||
return (
|
||||
<details className="group rounded-lg border border-[var(--border)]">
|
||||
<summary className="flex cursor-pointer list-none items-center gap-2 px-3 py-2.5 text-sm font-semibold text-[var(--text-primary)] hover:bg-[var(--bg-elevated)] [&::-webkit-details-marker]:hidden">
|
||||
<ChevronRight className="h-4 w-4 shrink-0 text-[var(--text-muted)] transition-transform group-open:rotate-90" aria-hidden />
|
||||
{titre}
|
||||
</summary>
|
||||
<div className="space-y-2 border-t border-[var(--border)] p-3">{children}</div>
|
||||
</details>
|
||||
);
|
||||
}
|
||||
|
||||
const ENDPOINTS: Array<{ method: string; path: string; desc: string }> = [
|
||||
{ method: "GET", path: "/fournisseurs", desc: "Fournisseurs, avec la fraîcheur de leur instantané" },
|
||||
{ method: "GET", path: "/grid?fournisseur=CODE", desc: "Lignes de grille d'un fournisseur" },
|
||||
{ method: "GET", path: "/nomenclatures?fournisseur=CODE", desc: "Postes de nomenclature d'un fournisseur, avec nb d'articles et CA" },
|
||||
{ method: "GET", path: "/products/search?q=terme", desc: "Recherche transversale, tous fournisseurs" },
|
||||
{ method: "GET", path: "/fournisseurs", desc: "Fournisseurs, avec la date de calcul de leur grille" },
|
||||
{ method: "GET", path: "/grid?fournisseur=CODE", desc: "Lignes de la grille d'un fournisseur" },
|
||||
{ method: "GET", path: "/nomenclatures?fournisseur=CODE", desc: "Postes de nomenclature d'un fournisseur, avec nombre d'articles et chiffre d'affaires" },
|
||||
{ method: "GET", path: "/products/search?q=terme", desc: "Recherche de produits, tous fournisseurs confondus" },
|
||||
{ method: "GET", path: "/products/{codein}", desc: "Fiche complète d'un produit" },
|
||||
{ method: "GET", path: "/network/{codeCentrale}", desc: "Métriques réseau Qlik + courbe 12 mois" },
|
||||
{ method: "GET", path: "/openapi.json", desc: "Spécification lisible par machine" },
|
||||
{ method: "GET", path: "/network/{codeCentrale}", desc: "Ventes du réseau (Qlik) et courbe sur 12 mois" },
|
||||
{ method: "GET", path: "/openapi.json", desc: "Description de l'API lisible par un programme (format OpenAPI)" },
|
||||
];
|
||||
|
||||
const PARAMS: Array<{ name: string; desc: string }> = [
|
||||
{ name: "page, limit", desc: "Pagination, sans plafond. Sur /grid, omettre limit renvoie TOUT le fournisseur en un appel ; ailleurs le défaut est 100" },
|
||||
{ name: "sort, order", desc: "Tri, ex. sort=totalCa&order=desc" },
|
||||
{ name: "search", desc: "Libellé, codein, GTIN, référence ou code centrale" },
|
||||
{ name: "nomenclature", desc: "Préfixe de nomenclature : 32 (univers), 3202 (famille), 320211 (sous-famille)" },
|
||||
{ name: "gamme, code1..code3", desc: "Filtres sur la gamme et les codes exacts de nomenclature" },
|
||||
{ name: "fields", desc: "Champs à conserver, séparés par des virgules — allège fortement la réponse" },
|
||||
{ name: "enrich", desc: "1 par défaut : métriques Qlik + gamme serveur relues à l'appel. 0 pour s'en dispenser" },
|
||||
{ name: "compute", desc: "1 par défaut : calcule le fournisseur s'il n'a jamais été ouvert (premier appel plus lent). 0 pour échouer vite" },
|
||||
{ name: "page, limit", desc: "Pagination, sans plafond. Sur /grid, omettre limit renvoie TOUT le fournisseur en un appel ; ailleurs le défaut est 100." },
|
||||
{ name: "sort, order", desc: "Tri, ex. sort=totalCa&order=desc." },
|
||||
{ name: "search", desc: "Libellé, codein, GTIN, référence ou code centrale." },
|
||||
{ name: "nomenclature", desc: "Début du code de nomenclature : 32 (univers), 3202 (famille), 320211 (sous-famille)." },
|
||||
{ name: "gamme, code1..code3", desc: "Filtres sur la gamme et les codes exacts de nomenclature." },
|
||||
{ name: "fields", desc: "Champs à conserver, séparés par des virgules : allège fortement la réponse." },
|
||||
{ name: "enrich", desc: "1 par défaut : ventes du réseau (Qlik) et gamme enregistrée relues à chaque appel. 0 pour s'en dispenser." },
|
||||
{ name: "compute", desc: "1 par défaut : calcule le fournisseur s'il n'a jamais été ouvert (premier appel plus lent). 0 pour échouer tout de suite." },
|
||||
];
|
||||
|
||||
export function ApiConnectionInfo() {
|
||||
@@ -70,128 +103,150 @@ export function ApiConnectionInfo() {
|
||||
const base = `${origin || "https://votre-domaine"}/api/v1`;
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{/* Connexion */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-[12px] font-semibold" style={{ color: "var(--text-primary)" }}>URL de base</p>
|
||||
<CodeLine>{base}</CodeLine>
|
||||
<p className="text-[12px] font-semibold pt-1" style={{ color: "var(--text-primary)" }}>Authentification</p>
|
||||
<p className="text-[11px]" style={{ color: "var(--text-muted)" }}>
|
||||
Une clé créée ci-dessous, dans l'un ou l'autre de ces en-têtes. Depuis un navigateur
|
||||
connecté, la session suffit — aucune clé n'est nécessaire.
|
||||
</p>
|
||||
<CodeLine>X-API-Key: VOTRE_CLE</CodeLine>
|
||||
<CodeLine>Authorization: Bearer VOTRE_CLE</CodeLine>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="Se connecter à l'API"
|
||||
description="L'API permet à un script ou à un outil externe de lire les données de CollectFlow : grilles des fournisseurs, recherche de produits, ventes du réseau. Elle ne permet aucune modification."
|
||||
/>
|
||||
<CardContent className="space-y-6">
|
||||
<Bloc titre="Adresse de base">
|
||||
<CodeLine>{base}</CodeLine>
|
||||
</Bloc>
|
||||
|
||||
{/* Endpoints */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-[12px] font-semibold" style={{ color: "var(--text-primary)" }}>Endpoints</p>
|
||||
<div className="rounded-xl overflow-hidden" style={{ border: "1px solid var(--border)" }}>
|
||||
<table className="w-full text-[11px]">
|
||||
<tbody>
|
||||
{ENDPOINTS.map((e, i) => (
|
||||
<tr key={e.path} style={{ borderTop: i === 0 ? undefined : "1px solid var(--border)" }}>
|
||||
<td className="px-2.5 py-1.5 font-mono font-bold align-top" style={{ color: "var(--accent)", width: 40 }}>{e.method}</td>
|
||||
<td className="px-2.5 py-1.5 font-mono align-top" style={{ color: "var(--text-primary)" }}>{e.path}</td>
|
||||
<td className="px-2.5 py-1.5 align-top" style={{ color: "var(--text-muted)" }}>{e.desc}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<Bloc titre="Identification">
|
||||
<p className="text-[13px] text-[var(--text-secondary)]">
|
||||
Chaque appel doit porter une clé (à créer dans le cadre « Clés d'accès à l'API » ci-dessous),
|
||||
dans l'un ou l'autre de ces en-têtes. Depuis un navigateur déjà connecté à CollectFlow,
|
||||
aucune clé n'est nécessaire.
|
||||
</p>
|
||||
<CodeLine>X-API-Key: VOTRE_CLE</CodeLine>
|
||||
<CodeLine>Authorization: Bearer VOTRE_CLE</CodeLine>
|
||||
</Bloc>
|
||||
|
||||
{/* Paramètres */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-[12px] font-semibold" style={{ color: "var(--text-primary)" }}>Paramètres communs</p>
|
||||
<div className="rounded-xl overflow-hidden" style={{ border: "1px solid var(--border)" }}>
|
||||
<table className="w-full text-[11px]">
|
||||
<tbody>
|
||||
{PARAMS.map((p, i) => (
|
||||
<tr key={p.name} style={{ borderTop: i === 0 ? undefined : "1px solid var(--border)" }}>
|
||||
<td className="px-2.5 py-1.5 font-mono align-top whitespace-nowrap" style={{ color: "var(--text-primary)" }}>{p.name}</td>
|
||||
<td className="px-2.5 py-1.5 align-top" style={{ color: "var(--text-muted)" }}>{p.desc}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Exemples */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-[12px] font-semibold" style={{ color: "var(--text-primary)" }}>Exemples</p>
|
||||
<CodeLine>{`curl -H "X-API-Key: VOTRE_CLE" \\\n "${base}/products/search?q=tapis&limit=20"`}</CodeLine>
|
||||
<CodeLine>{`curl -H "X-API-Key: VOTRE_CLE" \\\n "${base}/grid?fournisseur=FOU001&fields=codein,libelle1,totalCa,codeGammeServeur"`}</CodeLine>
|
||||
<p className="text-[11px] pt-1" style={{ color: "var(--text-muted)" }}>
|
||||
Tout un fournisseur en un seul appel — il suffit d'omettre <code className="font-mono">limit</code>,
|
||||
et <code className="font-mono">meta.complet</code> confirme qu'il ne reste rien à lire :
|
||||
</p>
|
||||
<CodeLine>{`curl -H "X-API-Key: VOTRE_CLE" \\\n "${base}/grid?fournisseur=FOU001"`}</CodeLine>
|
||||
<p className="text-[11px] pt-1" style={{ color: "var(--text-muted)" }}>
|
||||
Gros fournisseur (plusieurs dizaines de milliers d'articles) : lister d'abord les
|
||||
postes de nomenclature, puis les traiter un par un.
|
||||
</p>
|
||||
<CodeLine>{`curl -H "X-API-Key: VOTRE_CLE" \\\n "${base}/nomenclatures?fournisseur=D005&niveau=1"`}</CodeLine>
|
||||
<CodeLine>{`curl -H "X-API-Key: VOTRE_CLE" \\\n "${base}/grid?fournisseur=D005&nomenclature=32"`}</CodeLine>
|
||||
</div>
|
||||
|
||||
{/* Branchement d'une IA externe (ChatGPT) */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-[12px] font-semibold flex items-center gap-1.5" style={{ color: "var(--text-primary)" }}>
|
||||
<Bot className="w-4 h-4" style={{ color: "var(--accent)" }} />
|
||||
Connecter une IA externe (ChatGPT)
|
||||
</p>
|
||||
<ol className="text-[11px] space-y-1.5 list-decimal pl-4" style={{ color: "var(--text-secondary)" }}>
|
||||
<li>Créez une clé d'API dans la section ci-dessous et copiez-la.</li>
|
||||
<li>Dans ChatGPT : <strong>Créer un GPT</strong> → onglet <strong>Configurer</strong> → <strong>Créer une action</strong>.</li>
|
||||
<li>
|
||||
Cliquez sur <strong>Importer depuis une URL</strong> et collez l'adresse du schéma :
|
||||
<div className="mt-1"><CodeLine>{`${base}/openapi.json`}</CodeLine></div>
|
||||
<span style={{ color: "var(--text-muted)" }}>
|
||||
Ce schéma est public (il ne contient aucune donnée) pour que ChatGPT puisse l'importer.
|
||||
Votre application doit être joignable depuis Internet.
|
||||
{/* Branchement d'une IA externe (ChatGPT) */}
|
||||
<Bloc
|
||||
titre={
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Bot className="h-4 w-4 text-[var(--accent)]" aria-hidden />
|
||||
Connecter une IA externe (ChatGPT)
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
Dans <strong>Authentification</strong>, choisissez <strong>Clé d'API</strong>, type{" "}
|
||||
<strong>Personnalisé</strong>, nom d'en-tête <code className="font-mono">X-API-Key</code>,
|
||||
et collez votre clé.
|
||||
</li>
|
||||
<li>Testez avec une question du type « cherche les produits tapis » — le GPT appellera <code className="font-mono">rechercherProduits</code>.</li>
|
||||
</ol>
|
||||
<p className="text-[11px]" style={{ color: "var(--text-muted)" }}>
|
||||
Si votre domaine public diffère de celui affiché ici, renseignez la variable
|
||||
d'environnement <code className="font-mono">COLLECTFLOW_PUBLIC_URL</code> : elle fixe l'URL
|
||||
déclarée dans le schéma.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<ol className="list-decimal space-y-2 pl-5 text-[13px] text-[var(--text-secondary)]">
|
||||
<li>Créez une clé dans le cadre « Clés d'accès à l'API » ci-dessous et copiez-la.</li>
|
||||
<li>Dans ChatGPT : <strong>Créer un GPT</strong> → onglet <strong>Configurer</strong> → <strong>Créer une action</strong>.</li>
|
||||
<li>
|
||||
Cliquez sur <strong>Importer depuis une URL</strong> et collez l'adresse de la description de l'API :
|
||||
<div className="mt-1.5"><CodeLine>{`${base}/openapi.json`}</CodeLine></div>
|
||||
<span className="mt-1 block text-[var(--text-muted)]">
|
||||
Cette description est publique (elle ne contient aucune donnée) pour que ChatGPT puisse la lire.
|
||||
L'application doit être joignable depuis Internet.
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
Dans <strong>Authentification</strong>, choisissez <strong>Clé d'API</strong>, type{" "}
|
||||
<strong>Personnalisé</strong>, nom d'en-tête <code className="font-mono">X-API-Key</code>,
|
||||
et collez votre clé.
|
||||
</li>
|
||||
<li>Testez avec une question du type « cherche les produits tapis » : le GPT appellera <code className="font-mono">rechercherProduits</code>.</li>
|
||||
</ol>
|
||||
<p className="text-xs text-[var(--text-muted)]">
|
||||
Si l'adresse publique de l'application diffère de celle affichée ici, renseignez la variable
|
||||
d'environnement <code className="font-mono">COLLECTFLOW_PUBLIC_URL</code> : elle fixe l'adresse
|
||||
annoncée dans la description.
|
||||
</p>
|
||||
</Bloc>
|
||||
|
||||
{/* Comportement à connaître */}
|
||||
<div className="rounded-xl p-3 text-[11px] space-y-1.5"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}>
|
||||
<p><strong>Aucun recalcul.</strong> L'API lit l'instantané de la grille, écrit quand la Grille
|
||||
est ouverte dans l'application. Un fournisseur jamais consulté renvoie <code className="font-mono">202</code>{" "}
|
||||
<code className="font-mono">not_ready</code> plutôt que de faire attendre.</p>
|
||||
<p><strong>Métriques Qlik</strong> (<code className="font-mono">network</code>) et{" "}
|
||||
<strong>gamme serveur non modifiée</strong> (<code className="font-mono">codeGammeServeur</code>) sont
|
||||
relues à chaque appel. <code className="font-mono">network</code> vaut{" "}
|
||||
<code className="font-mono">null</code> quand le produit n'a pas de données réseau.</p>
|
||||
<p>Erreurs : <code className="font-mono">{`{ "error": { "code", "message" } }`}</code> avec{" "}
|
||||
<code className="font-mono">401</code> (clé absente/invalide/révoquée),{" "}
|
||||
<code className="font-mono">400</code>, <code className="font-mono">404</code>.</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Repli titre="Adresses disponibles (endpoints)">
|
||||
<div className="overflow-x-auto rounded-lg border border-[var(--border)]">
|
||||
<table className="w-full">
|
||||
<thead className="bg-[var(--bg-elevated)] text-[13px] font-semibold text-[var(--text-secondary)]">
|
||||
<tr>
|
||||
<th scope="col" className="px-3 py-2 text-left">Méthode</th>
|
||||
<th scope="col" className="px-3 py-2 text-left">Adresse</th>
|
||||
<th scope="col" className="px-3 py-2 text-left">Contenu</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ENDPOINTS.map((e) => (
|
||||
<tr key={e.path} className="border-t border-[var(--border)] align-top">
|
||||
<td className="px-3 py-2 font-mono text-sm font-semibold text-[var(--accent)]">{e.method}</td>
|
||||
<td className="px-3 py-2 font-mono text-sm text-[var(--text-primary)]">{e.path}</td>
|
||||
<td className="px-3 py-2 text-sm text-[var(--text-secondary)]">{e.desc}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Repli>
|
||||
|
||||
<a
|
||||
href="/api/v1/openapi.json"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex items-center gap-1.5 text-[12px] font-medium"
|
||||
style={{ color: "var(--accent)" }}
|
||||
>
|
||||
Ouvrir la spécification OpenAPI <ExternalLink className="w-3.5 h-3.5" />
|
||||
</a>
|
||||
</div>
|
||||
<Repli titre="Paramètres communs">
|
||||
<div className="overflow-x-auto rounded-lg border border-[var(--border)]">
|
||||
<table className="w-full">
|
||||
<thead className="bg-[var(--bg-elevated)] text-[13px] font-semibold text-[var(--text-secondary)]">
|
||||
<tr>
|
||||
<th scope="col" className="px-3 py-2 text-left">Paramètre</th>
|
||||
<th scope="col" className="px-3 py-2 text-left">Effet</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{PARAMS.map((p) => (
|
||||
<tr key={p.name} className="border-t border-[var(--border)] align-top">
|
||||
<td className="whitespace-nowrap px-3 py-2 font-mono text-sm text-[var(--text-primary)]">{p.name}</td>
|
||||
<td className="px-3 py-2 text-sm text-[var(--text-secondary)]">{p.desc}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Repli>
|
||||
|
||||
<Repli titre="Exemples d'appels">
|
||||
<CodeLine>{`curl -H "X-API-Key: VOTRE_CLE" \\\n "${base}/products/search?q=tapis&limit=20"`}</CodeLine>
|
||||
<CodeLine>{`curl -H "X-API-Key: VOTRE_CLE" \\\n "${base}/grid?fournisseur=FOU001&fields=codein,libelle1,totalCa,codeGammeServeur"`}</CodeLine>
|
||||
<p className="pt-1 text-[13px] text-[var(--text-secondary)]">
|
||||
Tout un fournisseur en un seul appel : il suffit d'omettre <code className="font-mono">limit</code>,
|
||||
et <code className="font-mono">meta.complet</code> confirme qu'il ne reste rien à lire.
|
||||
</p>
|
||||
<CodeLine>{`curl -H "X-API-Key: VOTRE_CLE" \\\n "${base}/grid?fournisseur=FOU001"`}</CodeLine>
|
||||
<p className="pt-1 text-[13px] text-[var(--text-secondary)]">
|
||||
Gros fournisseur (plusieurs dizaines de milliers d'articles) : lister d'abord les
|
||||
postes de nomenclature, puis les traiter un par un.
|
||||
</p>
|
||||
<CodeLine>{`curl -H "X-API-Key: VOTRE_CLE" \\\n "${base}/nomenclatures?fournisseur=D005&niveau=1"`}</CodeLine>
|
||||
<CodeLine>{`curl -H "X-API-Key: VOTRE_CLE" \\\n "${base}/grid?fournisseur=D005&nomenclature=32"`}</CodeLine>
|
||||
</Repli>
|
||||
</div>
|
||||
|
||||
{/* Comportement à connaître */}
|
||||
<div className="space-y-2 rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)] p-4 text-[13px] text-[var(--text-secondary)]">
|
||||
<p className="font-semibold text-[var(--text-primary)]">Bon à savoir</p>
|
||||
<p>
|
||||
<strong>L'API lit des grilles déjà calculées</strong>, enregistrées quand la Grille est ouverte dans
|
||||
l'application ou par le préchauffage ci-dessous. Un fournisseur jamais calculé l'est au premier
|
||||
appel, qui est alors plus lent ; avec <code className="font-mono">compute=0</code>, l'API répond
|
||||
aussitôt <code className="font-mono">202 not_ready</code>.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Les ventes du réseau</strong> (<code className="font-mono">network</code>) et <strong>la gamme
|
||||
enregistrée</strong> (<code className="font-mono">codeGammeServeur</code>) sont relues à chaque appel.{" "}
|
||||
<code className="font-mono">network</code> vaut <code className="font-mono">null</code> quand le produit
|
||||
n'a pas de données réseau.
|
||||
</p>
|
||||
<p>
|
||||
En cas d'erreur, la réponse a la forme <code className="font-mono">{`{ "error": { "code", "message" } }`}</code> avec
|
||||
le code <code className="font-mono">401</code> (clé absente, invalide ou révoquée), <code className="font-mono">400</code>{" "}
|
||||
(paramètre incorrect) ou <code className="font-mono">404</code> (introuvable).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button asChild variant="outline">
|
||||
<a href="/api/v1/openapi.json" target="_blank" rel="noreferrer">
|
||||
Ouvrir la description complète de l'API (OpenAPI) <ExternalLink />
|
||||
</a>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -7,33 +7,55 @@
|
||||
* création, puis irrécupérable (seul son hachage est stocké côté base).
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useState, useEffect, useCallback, type FormEvent } from "react";
|
||||
import { KeyRound, Plus, Loader2, Copy, Check, Ban, Trash2, AlertTriangle } from "lucide-react";
|
||||
import { getApiKeys, createApiKey, revokeApiKey, deleteApiKey, type ApiKeyRow } from "../api/api-key-actions";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input, Label, Select } from "@/components/ui/form-controls";
|
||||
import { EmptyState, ErrorState, Skeleton } from "@/components/ui/states";
|
||||
import { confirmer, toast } from "@/components/ui/feedback";
|
||||
import { isStaleServerActionError, STALE_ACTION_MESSAGE } from "@/lib/stale-action";
|
||||
|
||||
type Role = "admin" | "user";
|
||||
|
||||
const ROLES = [
|
||||
{ value: "user", label: "Utilisateur" },
|
||||
{ value: "admin", label: "Administrateur" },
|
||||
] as const;
|
||||
|
||||
const LIBELLE_ROLE: Record<string, string> = { admin: "Administrateur", user: "Utilisateur" };
|
||||
|
||||
function fmtDate(iso: string | null): string {
|
||||
if (!iso) return "—";
|
||||
return new Date(iso).toLocaleString("fr-FR", { dateStyle: "short", timeStyle: "short" });
|
||||
}
|
||||
|
||||
function messageErreur(e: unknown): string {
|
||||
if (isStaleServerActionError(e)) return STALE_ACTION_MESSAGE;
|
||||
return e instanceof Error ? e.message : String(e);
|
||||
}
|
||||
|
||||
export function ApiKeyManagement() {
|
||||
const [keys, setKeys] = useState<ApiKeyRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [erreurChargement, setErreurChargement] = useState<string | null>(null);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
const [role, setRole] = useState<"admin" | "user">("user");
|
||||
const [role, setRole] = useState<Role>("user");
|
||||
const [freshKey, setFreshKey] = useState<string | null>(null);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [enCours, setEnCours] = useState<number | null>(null);
|
||||
|
||||
// Pas de setState synchrone ici : `loading` démarre déjà à true, et le premier
|
||||
// statement est un await. Cela évite une cascade de rendus au montage.
|
||||
const refresh = useCallback(async () => {
|
||||
try {
|
||||
setKeys(await getApiKeys());
|
||||
setError(null);
|
||||
setErreurChargement(null);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Erreur de chargement");
|
||||
setErreurChargement(messageErreur(e));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -41,177 +63,233 @@ export function ApiKeyManagement() {
|
||||
|
||||
// Chargement initial depuis la base — la donnée vient d'un système externe, pas
|
||||
// d'un état dérivé. `refresh` n'appelle setState qu'après un await.
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
useEffect(() => { refresh(); }, [refresh]);
|
||||
useEffect(() => { void refresh(); }, [refresh]);
|
||||
|
||||
const handleCreate = async (e: React.FormEvent) => {
|
||||
const reessayer = () => {
|
||||
setLoading(true);
|
||||
void refresh();
|
||||
};
|
||||
|
||||
const handleCreate = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!name.trim() || creating) return;
|
||||
const nom = name.trim();
|
||||
if (!nom || creating) return;
|
||||
setCreating(true);
|
||||
setError(null);
|
||||
const res = await createApiKey(name.trim(), role);
|
||||
if (res.success) {
|
||||
setFreshKey(res.key);
|
||||
setName("");
|
||||
setCopied(false);
|
||||
await refresh();
|
||||
} else {
|
||||
setError(res.error);
|
||||
try {
|
||||
const res = await createApiKey(nom, role);
|
||||
if (res.success) {
|
||||
setFreshKey(res.key);
|
||||
setName("");
|
||||
setCopied(false);
|
||||
toast.succes(`Clé « ${nom} » créée. Copiez-la maintenant : elle ne sera plus affichée.`);
|
||||
await refresh();
|
||||
} else {
|
||||
toast.erreur(res.error);
|
||||
}
|
||||
} catch (err) {
|
||||
toast.erreur(`La clé n'a pas pu être créée : ${messageErreur(err)}`);
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
setCreating(false);
|
||||
};
|
||||
|
||||
const handleRevoke = async (id: number) => {
|
||||
await revokeApiKey(id);
|
||||
await refresh();
|
||||
const copier = async () => {
|
||||
if (!freshKey) return;
|
||||
try {
|
||||
await navigator.clipboard.writeText(freshKey);
|
||||
setCopied(true);
|
||||
toast.succes("Clé copiée dans le presse-papiers.");
|
||||
} catch {
|
||||
toast.erreur("La copie automatique a échoué : sélectionnez la clé et copiez-la à la main.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
await deleteApiKey(id);
|
||||
await refresh();
|
||||
const handleRevoke = async (k: ApiKeyRow) => {
|
||||
const ok = await confirmer({
|
||||
titre: `Révoquer la clé « ${k.name} » ?`,
|
||||
message: "Les scripts et outils qui l'utilisent seront refusés dès leur prochain appel. La clé reste dans la liste pour garder la trace de son utilisation.",
|
||||
libelleConfirmer: "Révoquer",
|
||||
danger: true,
|
||||
});
|
||||
if (!ok) return;
|
||||
setEnCours(k.id);
|
||||
try {
|
||||
const res = await revokeApiKey(k.id);
|
||||
if (res.success) toast.succes(`La clé « ${k.name} » est révoquée.`);
|
||||
else toast.erreur(res.error ?? "La clé n'a pas pu être révoquée.");
|
||||
await refresh();
|
||||
} catch (err) {
|
||||
toast.erreur(`La clé n'a pas pu être révoquée : ${messageErreur(err)}`);
|
||||
} finally {
|
||||
setEnCours(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (k: ApiKeyRow) => {
|
||||
const ok = await confirmer({
|
||||
titre: `Supprimer définitivement la clé « ${k.name} » ?`,
|
||||
message: "Elle disparaîtra de la liste, avec la trace de sa dernière utilisation.",
|
||||
libelleConfirmer: "Supprimer",
|
||||
danger: true,
|
||||
});
|
||||
if (!ok) return;
|
||||
setEnCours(k.id);
|
||||
try {
|
||||
const res = await deleteApiKey(k.id);
|
||||
if (res.success) toast.succes(`La clé « ${k.name} » a été supprimée.`);
|
||||
else toast.erreur(res.error ?? "La clé n'a pas pu être supprimée.");
|
||||
await refresh();
|
||||
} catch (err) {
|
||||
toast.erreur(`La clé n'a pas pu être supprimée : ${messageErreur(err)}`);
|
||||
} finally {
|
||||
setEnCours(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<p className="text-[12px] text-[var(--text-secondary)]">
|
||||
Les clés donnent accès à l'API de lecture <code className="font-mono">/api/v1</code> (grille,
|
||||
recherche, métriques réseau) depuis un script ou un outil externe, via l'en-tête{" "}
|
||||
<code className="font-mono">X-API-Key</code>. Depuis un navigateur connecté, la session suffit.
|
||||
</p>
|
||||
|
||||
{/* Clé fraîchement créée — visible une seule fois */}
|
||||
{freshKey && (
|
||||
<div className="rounded-xl p-3.5 space-y-2"
|
||||
style={{ background: "var(--accent-bg)", border: "1px solid var(--accent-border)" }}>
|
||||
<div className="flex items-start gap-2 text-[12px] font-semibold" style={{ color: "var(--text-primary)" }}>
|
||||
<AlertTriangle className="w-4 h-4 shrink-0 mt-px" style={{ color: "var(--accent)" }} />
|
||||
Copiez cette clé maintenant — elle ne sera plus jamais affichée.
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="Clés d'accès à l'API"
|
||||
description={
|
||||
<>
|
||||
Une clé permet à un script ou à un outil externe (ChatGPT, tableur…) de lire les données de
|
||||
CollectFlow sans se connecter. Depuis un navigateur déjà connecté, aucune clé n'est nécessaire.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<CardContent className="space-y-5">
|
||||
{/* Clé fraîchement créée — visible une seule fois */}
|
||||
{freshKey && (
|
||||
<div className="space-y-3 rounded-xl border border-[var(--accent-border)] bg-[var(--accent-bg)] p-4">
|
||||
<p className="flex items-start gap-2 text-sm font-semibold text-[var(--text-primary)]">
|
||||
<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-[var(--accent)]" aria-hidden />
|
||||
Copiez cette clé maintenant : elle ne sera plus jamais affichée.
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 break-all rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] px-3 py-2 font-mono text-[13px] text-[var(--text-primary)]">
|
||||
{freshKey}
|
||||
</code>
|
||||
<Button variant="outline" onClick={copier}>
|
||||
{copied ? <Check className="text-[var(--accent-success)]" /> : <Copy />}
|
||||
{copied ? "Copiée" : "Copier"}
|
||||
</Button>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={() => setFreshKey(null)}>
|
||||
J'ai copié la clé, la masquer
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 rounded-lg px-2.5 py-2 text-[12px] font-mono break-all"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }}>
|
||||
{freshKey}
|
||||
</code>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { navigator.clipboard.writeText(freshKey); setCopied(true); }}
|
||||
className="rounded-lg px-2.5 py-2 shrink-0"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}
|
||||
title="Copier"
|
||||
>
|
||||
{copied ? <Check className="w-4 h-4 text-emerald-500" /> : <Copy className="w-4 h-4" />}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Création */}
|
||||
<form onSubmit={handleCreate} className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_auto_auto] sm:items-end">
|
||||
<div>
|
||||
<Label htmlFor="cle-nom">Nom de la clé</Label>
|
||||
<Input
|
||||
id="cle-nom"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="ex. Export comptabilité"
|
||||
className="w-full"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFreshKey(null)}
|
||||
className="text-[11px] underline"
|
||||
style={{ color: "var(--text-muted)" }}
|
||||
>
|
||||
J'ai copié la clé, masquer
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<Select
|
||||
id="cle-role"
|
||||
label="Droits"
|
||||
value={role}
|
||||
onChange={(v) => setRole(v as Role)}
|
||||
options={ROLES}
|
||||
/>
|
||||
<Button type="submit" disabled={creating || !name.trim()}>
|
||||
{creating ? <Loader2 className="animate-spin" /> : <Plus />}
|
||||
Créer la clé
|
||||
</Button>
|
||||
</form>
|
||||
<p className="-mt-2 text-xs text-[var(--text-muted)]">
|
||||
Donnez un nom qui dit à quoi sert la clé : vous saurez laquelle révoquer le jour où l'outil n'est plus utilisé.
|
||||
La clé s'envoie dans l'en-tête <code className="font-mono">X-API-Key</code> de chaque appel.
|
||||
</p>
|
||||
|
||||
{/* Création */}
|
||||
<form onSubmit={handleCreate} className="flex flex-col sm:flex-row gap-2">
|
||||
<input
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Nom de la clé (ex. Export comptabilité)"
|
||||
className="flex-1 rounded-lg px-3 py-2 text-[13px] outline-none"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }}
|
||||
/>
|
||||
<select
|
||||
value={role}
|
||||
onChange={(e) => setRole(e.target.value as "admin" | "user")}
|
||||
className="rounded-lg px-3 py-2 text-[13px] outline-none"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }}
|
||||
>
|
||||
<option value="user">Rôle : utilisateur</option>
|
||||
<option value="admin">Rôle : administrateur</option>
|
||||
</select>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={creating || !name.trim()}
|
||||
className="rounded-lg px-4 py-2 text-[13px] font-semibold text-white disabled:opacity-50 flex items-center justify-center gap-1.5"
|
||||
style={{ background: "var(--accent)" }}
|
||||
>
|
||||
{creating ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
|
||||
Créer
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{error && (
|
||||
<p className="text-[12px]" style={{ color: "var(--accent-error)" }}>{error}</p>
|
||||
)}
|
||||
|
||||
{/* Liste */}
|
||||
{loading ? (
|
||||
<div className="flex items-center gap-2 text-[12px]" style={{ color: "var(--text-muted)" }}>
|
||||
<Loader2 className="w-3.5 h-3.5 animate-spin" /> Chargement…
|
||||
</div>
|
||||
) : keys.length === 0 ? (
|
||||
<p className="text-[12px]" style={{ color: "var(--text-muted)" }}>Aucune clé pour le moment.</p>
|
||||
) : (
|
||||
<div className="rounded-xl overflow-hidden" style={{ border: "1px solid var(--border)" }}>
|
||||
<table className="w-full text-[12px]">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bg-elevated)" }}>
|
||||
<th className="text-left px-3 py-2 font-semibold" style={{ color: "var(--text-secondary)" }}>Nom</th>
|
||||
<th className="text-left px-3 py-2 font-semibold" style={{ color: "var(--text-secondary)" }}>Préfixe</th>
|
||||
<th className="text-left px-3 py-2 font-semibold" style={{ color: "var(--text-secondary)" }}>Rôle</th>
|
||||
<th className="text-left px-3 py-2 font-semibold" style={{ color: "var(--text-secondary)" }}>Créée</th>
|
||||
<th className="text-left px-3 py-2 font-semibold" style={{ color: "var(--text-secondary)" }}>Dernier usage</th>
|
||||
<th className="px-3 py-2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{keys.map((k) => (
|
||||
<tr key={k.id} style={{ borderTop: "1px solid var(--border)", opacity: k.revokedAt ? 0.55 : 1 }}>
|
||||
<td className="px-3 py-2 font-medium" style={{ color: "var(--text-primary)" }}>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<KeyRound className="w-3.5 h-3.5" style={{ color: "var(--text-muted)" }} />
|
||||
{k.name}
|
||||
</span>
|
||||
{k.revokedAt && (
|
||||
<span className="ml-2 rounded px-1.5 py-px text-[9px] font-bold uppercase"
|
||||
style={{ background: "var(--accent-error-bg)", color: "var(--accent-error)" }}>
|
||||
Révoquée
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 font-mono" style={{ color: "var(--text-secondary)" }}>{k.keyPrefix}…</td>
|
||||
<td className="px-3 py-2" style={{ color: "var(--text-secondary)" }}>{k.role}</td>
|
||||
<td className="px-3 py-2" style={{ color: "var(--text-muted)" }}>{fmtDate(k.createdAt)}</td>
|
||||
<td className="px-3 py-2" style={{ color: "var(--text-muted)" }}>{fmtDate(k.lastUsedAt)}</td>
|
||||
<td className="px-3 py-2 text-right whitespace-nowrap">
|
||||
{!k.revokedAt ? (
|
||||
<button
|
||||
onClick={() => handleRevoke(k.id)}
|
||||
className="inline-flex items-center gap-1 rounded-lg px-2 py-1"
|
||||
style={{ color: "var(--accent-error)" }}
|
||||
title="Révoquer"
|
||||
>
|
||||
<Ban className="w-3.5 h-3.5" /> Révoquer
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleDelete(k.id)}
|
||||
className="inline-flex items-center gap-1 rounded-lg px-2 py-1"
|
||||
style={{ color: "var(--text-muted)" }}
|
||||
title="Supprimer définitivement"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" /> Supprimer
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
{/* Liste */}
|
||||
{loading ? (
|
||||
<div className="space-y-2" aria-busy="true" aria-label="Chargement des clés">
|
||||
{Array.from({ length: 3 }, (_, i) => <Skeleton key={i} className="h-10 w-full" />)}
|
||||
</div>
|
||||
) : erreurChargement ? (
|
||||
<ErrorState
|
||||
title="La liste des clés n'a pas pu être chargée"
|
||||
detail={erreurChargement}
|
||||
action={<Button variant="outline" onClick={reessayer}>Réessayer</Button>}
|
||||
/>
|
||||
) : keys.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={KeyRound}
|
||||
title="Aucune clé pour le moment"
|
||||
description="Créez une clé ci-dessus pour permettre à un outil externe d'interroger l'API."
|
||||
/>
|
||||
) : (
|
||||
<div className="overflow-x-auto rounded-lg border border-[var(--border)]">
|
||||
<table className="w-full">
|
||||
<thead className="bg-[var(--bg-elevated)] text-[13px] font-semibold text-[var(--text-secondary)]">
|
||||
<tr>
|
||||
<th scope="col" className="px-3 py-2 text-left">Nom</th>
|
||||
<th scope="col" className="px-3 py-2 text-left">Début de la clé</th>
|
||||
<th scope="col" className="px-3 py-2 text-left">Droits</th>
|
||||
<th scope="col" className="px-3 py-2 text-left">Créée le</th>
|
||||
<th scope="col" className="px-3 py-2 text-left">Dernière utilisation</th>
|
||||
<th scope="col" className="px-3 py-2 text-right"><span className="sr-only">Actions</span></th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</thead>
|
||||
<tbody>
|
||||
{keys.map((k) => (
|
||||
<tr key={k.id} className="border-t border-[var(--border)]">
|
||||
<td className="px-3 py-2 text-sm font-medium text-[var(--text-primary)]">
|
||||
<span className={k.revokedAt ? "inline-flex items-center gap-2 opacity-60" : "inline-flex items-center gap-2"}>
|
||||
<KeyRound className="h-4 w-4 text-[var(--text-muted)]" aria-hidden />
|
||||
{k.name}
|
||||
</span>
|
||||
{k.revokedAt && (
|
||||
<Badge ton="erreur" className="ml-2" title={`Révoquée le ${fmtDate(k.revokedAt)}`}>Révoquée</Badge>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 font-mono text-sm text-[var(--text-secondary)]">{k.keyPrefix}…</td>
|
||||
<td className="px-3 py-2 text-sm text-[var(--text-secondary)]">{LIBELLE_ROLE[k.role] ?? k.role}</td>
|
||||
<td className="px-3 py-2 text-sm whitespace-nowrap text-[var(--text-secondary)]">{fmtDate(k.createdAt)}</td>
|
||||
<td className="px-3 py-2 text-sm whitespace-nowrap text-[var(--text-secondary)]">
|
||||
{k.lastUsedAt ? fmtDate(k.lastUsedAt) : "Jamais"}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right whitespace-nowrap">
|
||||
{!k.revokedAt ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleRevoke(k)}
|
||||
disabled={enCours === k.id}
|
||||
className="text-[var(--accent-error)] hover:bg-[var(--accent-error-bg)] hover:text-[var(--accent-error)]"
|
||||
>
|
||||
{enCours === k.id ? <Loader2 className="animate-spin" /> : <Ban />}
|
||||
Révoquer
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(k)}
|
||||
disabled={enCours === k.id}
|
||||
className="text-[var(--text-secondary)]"
|
||||
>
|
||||
{enCours === k.id ? <Loader2 className="animate-spin" /> : <Trash2 />}
|
||||
Supprimer
|
||||
</Button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -10,7 +10,11 @@
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Loader2, Play, CheckCircle, AlertTriangle, Database } from "lucide-react";
|
||||
import { Loader2, Play, CheckCircle2, AlertTriangle, Database } from "lucide-react";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { toast } from "@/components/ui/feedback";
|
||||
import { fmtEntier } from "@/lib/format";
|
||||
|
||||
interface WarmupState {
|
||||
status: "idle" | "running" | "success" | "error";
|
||||
@@ -26,7 +30,7 @@ interface WarmupState {
|
||||
|
||||
export function GridWarmup() {
|
||||
const [state, setState] = useState<WarmupState | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [demarrage, setDemarrage] = useState(false);
|
||||
const pollRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const running = state?.status === "running";
|
||||
@@ -57,92 +61,102 @@ export function GridWarmup() {
|
||||
}, [running, fetchState]);
|
||||
|
||||
const start = async () => {
|
||||
setError(null);
|
||||
setDemarrage(true);
|
||||
let echec: string | null = null;
|
||||
try {
|
||||
const res = await fetch("/api/admin/grid-warmup?staleHours=24", { method: "POST" });
|
||||
const data = await res.json();
|
||||
if (!res.ok) { setError(data.error ?? `Erreur ${res.status}`); return; }
|
||||
setState(data);
|
||||
if (res.ok) setState(data);
|
||||
else echec = data.error ?? `erreur ${res.status}`;
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : String(e));
|
||||
echec = e instanceof Error ? e.message : String(e);
|
||||
}
|
||||
setDemarrage(false);
|
||||
if (echec) toast.erreur(`Le préchauffage n'a pas pu démarrer : ${echec}`);
|
||||
};
|
||||
|
||||
const traites = (state?.done ?? 0) + (state?.skipped ?? 0) + (state?.failed ?? 0);
|
||||
const pct = state && state.total > 0 ? Math.round((traites / state.total) * 100) : 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<p className="text-[12px]" style={{ color: "var(--text-secondary)" }}>
|
||||
L'API ne recalcule jamais : elle lit un instantané écrit quand la Grille est ouverte dans
|
||||
l'application. Sans préchauffage, une IA externe ne verrait que les fournisseurs déjà consultés.
|
||||
Ce bouton calcule <strong>tous les fournisseurs</strong> ; ceux déjà à jour depuis moins de 24 h sont
|
||||
sautés, il est donc sans risque de le relancer.
|
||||
</p>
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="Préchauffage des données de l'API"
|
||||
description="Préchauffage : calcule à l'avance les grilles de tous les fournisseurs pour que l'API réponde immédiatement."
|
||||
/>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
L'API lit les grilles déjà calculées, enregistrées quand un fournisseur est ouvert dans la Grille.
|
||||
Sans préchauffage, un outil externe ne trouverait tout de suite que les fournisseurs déjà consultés.
|
||||
Les fournisseurs calculés il y a moins de 24 h sont sautés : vous pouvez relancer sans risque.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2.5">
|
||||
<button
|
||||
onClick={start}
|
||||
disabled={running}
|
||||
className="rounded-lg px-4 py-2 text-[13px] font-semibold text-white disabled:opacity-50 flex items-center gap-1.5"
|
||||
style={{ background: "var(--accent)" }}
|
||||
>
|
||||
{running ? <Loader2 className="w-4 h-4 animate-spin" /> : <Play className="w-4 h-4" />}
|
||||
{running ? "Préparation en cours…" : "Préparer les données pour l'API"}
|
||||
</button>
|
||||
{state && state.total > 0 && (
|
||||
<span className="text-[12px] tabular-nums" style={{ color: "var(--text-secondary)" }}>
|
||||
{traites} / {state.total} ({pct} %)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{running && state && (
|
||||
<div className="space-y-1.5">
|
||||
<div className="h-1.5 rounded-full overflow-hidden" style={{ background: "var(--bg-elevated)" }}>
|
||||
<div className="h-full transition-all" style={{ width: `${pct}%`, background: "var(--accent)" }} />
|
||||
</div>
|
||||
{state.currentFournisseur && (
|
||||
<p className="text-[11px] truncate" style={{ color: "var(--text-muted)" }}>
|
||||
En cours : {state.currentFournisseur}
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button onClick={start} disabled={running || demarrage}>
|
||||
{running || demarrage ? <Loader2 className="animate-spin" /> : <Play />}
|
||||
{running ? "Préparation en cours…" : "Préparer les données pour l'API"}
|
||||
</Button>
|
||||
{state && state.total > 0 && (
|
||||
<span className="text-[13px] tabular-nums text-[var(--text-secondary)]">
|
||||
{fmtEntier(traites)} fournisseurs sur {fmtEntier(state.total)} ({pct} %)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state?.status === "success" && (
|
||||
<div className="flex items-start gap-2 text-[12px]" style={{ color: "var(--text-secondary)" }}>
|
||||
<CheckCircle className="w-4 h-4 shrink-0 mt-px text-emerald-500" />
|
||||
<span>
|
||||
Terminé : <strong>{state.done}</strong> fournisseur(s) calculé(s),{" "}
|
||||
<strong>{state.skipped}</strong> déjà à jour
|
||||
{state.failed > 0 && <>, <strong style={{ color: "var(--accent-error)" }}>{state.failed} en échec</strong></>}.
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{running && state && (
|
||||
<div className="space-y-1.5">
|
||||
<div
|
||||
className="h-2 overflow-hidden rounded-full bg-[var(--bg-elevated)]"
|
||||
role="progressbar"
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
aria-valuenow={pct}
|
||||
aria-label="Avancement du préchauffage"
|
||||
>
|
||||
<div className="h-full bg-[var(--accent)] transition-all" style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
{state.currentFournisseur && (
|
||||
<p className="truncate text-[13px] text-[var(--text-muted)]">
|
||||
En cours : {state.currentFournisseur}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state && state.failed > 0 && state.lastErrors.length > 0 && (
|
||||
<details className="text-[11px]" style={{ color: "var(--text-muted)" }}>
|
||||
<summary className="cursor-pointer">Voir les échecs ({state.lastErrors.length} premiers)</summary>
|
||||
<ul className="mt-1 pl-4 list-disc space-y-0.5">
|
||||
{state.lastErrors.map((e, i) => <li key={i} className="break-all">{e}</li>)}
|
||||
</ul>
|
||||
</details>
|
||||
)}
|
||||
{state?.status === "success" && (
|
||||
<p className="flex items-start gap-2 text-sm text-[var(--text-secondary)]">
|
||||
<CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-[var(--accent-success)]" aria-hidden />
|
||||
<span>
|
||||
Terminé : <strong className="text-[var(--text-primary)]">{fmtEntier(state.done)}</strong> fournisseur(s) calculé(s),{" "}
|
||||
<strong className="text-[var(--text-primary)]">{fmtEntier(state.skipped)}</strong> déjà à jour
|
||||
{state.failed > 0 && <>, <strong className="text-[var(--accent-error)]">{fmtEntier(state.failed)} en échec</strong></>}.
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{(error || state?.error) && (
|
||||
<div className="flex items-start gap-2 text-[12px]" style={{ color: "var(--accent-error)" }}>
|
||||
<AlertTriangle className="w-4 h-4 shrink-0 mt-px" />
|
||||
<span>{error ?? state?.error}</span>
|
||||
</div>
|
||||
)}
|
||||
{state && state.failed > 0 && state.lastErrors.length > 0 && (
|
||||
<details className="text-[13px] text-[var(--text-secondary)]">
|
||||
<summary className="cursor-pointer font-medium">Voir les échecs ({state.lastErrors.length} premiers)</summary>
|
||||
<ul className="mt-1 list-disc space-y-0.5 pl-5 text-xs">
|
||||
{state.lastErrors.map((e, i) => <li key={i} className="break-all font-mono">{e}</li>)}
|
||||
</ul>
|
||||
</details>
|
||||
)}
|
||||
|
||||
{state?.status === "idle" && (
|
||||
<p className="text-[11px] flex items-center gap-1.5" style={{ color: "var(--text-muted)" }}>
|
||||
<Database className="w-3.5 h-3.5" />
|
||||
Aucun préchauffage lancé depuis le démarrage de l'application.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{state?.error && (
|
||||
<p role="alert" className="flex items-start gap-2 text-sm text-[var(--accent-error)]">
|
||||
<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" aria-hidden />
|
||||
<span>{state.error}</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{state?.status === "idle" && (
|
||||
<p className="flex items-center gap-2 text-[13px] text-[var(--text-muted)]">
|
||||
<Database className="h-4 w-4" aria-hidden />
|
||||
Aucun préchauffage lancé depuis le démarrage de l'application.
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,209 +1,334 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useCallback, useEffect, useState, type FormEvent } from "react";
|
||||
import { KeyRound, Loader2, Shield, Trash2, User, UserPlus } from "lucide-react";
|
||||
import { getUsers, createUser, deleteUser, updatePassword } from "../api/user-actions";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input, Label, Select } from "@/components/ui/form-controls";
|
||||
import { EmptyState, ErrorState, Skeleton } from "@/components/ui/states";
|
||||
import { confirmer, toast } from "@/components/ui/feedback";
|
||||
import {
|
||||
UserPlus,
|
||||
Trash2,
|
||||
Shield,
|
||||
User,
|
||||
Loader2,
|
||||
Check,
|
||||
Key,
|
||||
} from "lucide-react";
|
||||
import { SuccessModal } from "@/components/shared/success-modal";
|
||||
import { ChangePasswordModal } from "@/components/shared/change-password-modal";
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { isStaleServerActionError, STALE_ACTION_MESSAGE } from "@/lib/stale-action";
|
||||
|
||||
export function UserManagement() {
|
||||
const [users, setUsers] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [newUsername, setNewUsername] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [newRole, setNewRole] = useState<"admin" | "user">("user");
|
||||
const [modal, setModal] = useState({ isOpen: false, title: "", message: "" });
|
||||
const [pwdModal, setPwdModal] = useState<{ isOpen: boolean; userId: number; username: string }>({
|
||||
isOpen: false, userId: 0, username: ""
|
||||
});
|
||||
type Utilisateur = Awaited<ReturnType<typeof getUsers>>[number];
|
||||
type Role = "admin" | "user";
|
||||
|
||||
const fetchUsers = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await getUsers();
|
||||
setUsers(data);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
const ROLES = [
|
||||
{ value: "user", label: "Utilisateur" },
|
||||
{ value: "admin", label: "Administrateur" },
|
||||
] as const;
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
}, []);
|
||||
function messageErreur(e: unknown): string {
|
||||
if (isStaleServerActionError(e)) return STALE_ACTION_MESSAGE;
|
||||
return e instanceof Error ? e.message : String(e);
|
||||
}
|
||||
|
||||
const handleCreate = async (e: React.FormEvent) => {
|
||||
function fmtJour(valeur: Date | string | null | undefined): string {
|
||||
if (!valeur) return "—";
|
||||
const d = new Date(valeur);
|
||||
return isNaN(d.getTime()) ? "—" : d.toLocaleDateString("fr-FR");
|
||||
}
|
||||
|
||||
/**
|
||||
* Changement du mot de passe d'un compte. Monté à l'ouverture (clé = compte) :
|
||||
* les champs repartent vides à chaque fois.
|
||||
*/
|
||||
function DialogueMotDePasse({ cible, onFermer }: { cible: Utilisateur; onFermer: () => void }) {
|
||||
const [motDePasse, setMotDePasse] = useState("");
|
||||
const [confirmation, setConfirmation] = useState("");
|
||||
const [erreur, setErreur] = useState<string | null>(null);
|
||||
const [envoi, setEnvoi] = useState(false);
|
||||
|
||||
const valider = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsCreating(true);
|
||||
const res = await createUser(newUsername, newPassword, newRole);
|
||||
if (res.success) {
|
||||
setModal({
|
||||
isOpen: true,
|
||||
title: "Utilisateur Créé",
|
||||
message: `L'utilisateur ${newUsername} a été ajouté avec succès.`
|
||||
});
|
||||
setNewUsername("");
|
||||
setNewPassword("");
|
||||
fetchUsers();
|
||||
} else {
|
||||
alert(res.error);
|
||||
setErreur(null);
|
||||
if (motDePasse.length < 4) {
|
||||
setErreur("Le mot de passe doit faire au moins 4 caractères.");
|
||||
return;
|
||||
}
|
||||
setIsCreating(false);
|
||||
};
|
||||
|
||||
const handleUpdatePassword = (id: number, username: string) => {
|
||||
setPwdModal({ isOpen: true, userId: id, username });
|
||||
};
|
||||
|
||||
const handleConfirmPassword = async (newPassword: string) => {
|
||||
const res = await updatePassword(pwdModal.userId, newPassword);
|
||||
if (res.success) {
|
||||
setModal({
|
||||
isOpen: true,
|
||||
title: "Mot de passe mis à jour",
|
||||
message: `Le mot de passe de ${pwdModal.username} a été modifié avec succès.`
|
||||
});
|
||||
} else {
|
||||
throw new Error(res.error ?? "Erreur lors de la mise à jour.");
|
||||
if (motDePasse !== confirmation) {
|
||||
setErreur("Les deux mots de passe ne sont pas identiques.");
|
||||
return;
|
||||
}
|
||||
setEnvoi(true);
|
||||
try {
|
||||
const res = await updatePassword(cible.id, motDePasse);
|
||||
if (!res.success) {
|
||||
setErreur(res.error ?? "Erreur lors de la mise à jour.");
|
||||
return;
|
||||
}
|
||||
toast.succes(`Le mot de passe de « ${cible.username} » a été modifié.`);
|
||||
onFermer();
|
||||
} catch (err) {
|
||||
setErreur(messageErreur(err));
|
||||
} finally {
|
||||
setEnvoi(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number, username: string) => {
|
||||
if (!window.confirm(`Supprimer l'utilisateur ${username} ?`)) return;
|
||||
const res = await deleteUser(id);
|
||||
if (res.success) {
|
||||
setUsers(users.filter(u => u.id !== id));
|
||||
} else {
|
||||
alert(res.error);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center p-12 space-y-4">
|
||||
<Loader2 className="w-8 h-8 text-[var(--accent)] animate-spin" />
|
||||
<p className="text-[var(--text-muted)] text-sm">Chargement des utilisateurs...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Formulaire de création */}
|
||||
<div className="bg-[var(--bg-elevated)] border border-[var(--border)] rounded-2xl p-6">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="w-12 h-12 rounded-2xl bg-[var(--accent-bg)] border border-[var(--accent-border)] flex items-center justify-center">
|
||||
<UserPlus className="w-6 h-6 text-[var(--accent)]" />
|
||||
<Dialog open onOpenChange={(open) => { if (!open && !envoi) onFermer(); }}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<form onSubmit={valider} className="grid gap-4">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Changer le mot de passe</DialogTitle>
|
||||
<DialogDescription className="text-[var(--text-secondary)]">
|
||||
Compte « {cible.username} ». Le nouveau mot de passe sera demandé dès la prochaine connexion.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div>
|
||||
<Label htmlFor="mdp-nouveau">Nouveau mot de passe</Label>
|
||||
<Input id="mdp-nouveau" type="password" className="w-full" autoFocus autoComplete="new-password"
|
||||
value={motDePasse} onChange={(e) => setMotDePasse(e.target.value)} />
|
||||
<p className="mt-1 text-xs text-[var(--text-muted)]">Au moins 4 caractères.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-[var(--text-primary)]">Nouvel Utilisateur</h2>
|
||||
<p className="text-[var(--text-secondary)] text-xs">Ajoutez un collaborateur à la plateforme.</p>
|
||||
<Label htmlFor="mdp-confirmation">Confirmer le mot de passe</Label>
|
||||
<Input id="mdp-confirmation" type="password" className="w-full" autoComplete="new-password"
|
||||
value={confirmation} onChange={(e) => setConfirmation(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleCreate} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1">Utilisateur</label>
|
||||
<input
|
||||
required
|
||||
value={newUsername}
|
||||
onChange={(e) => setNewUsername(e.target.value)}
|
||||
className="apple-input"
|
||||
placeholder="ex: jean.dupont"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1">Mot de passe</label>
|
||||
<input
|
||||
required
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
className="apple-input"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1">Rôle</label>
|
||||
<select
|
||||
value={newRole}
|
||||
onChange={(e) => setNewRole(e.target.value as any)}
|
||||
className="apple-input"
|
||||
>
|
||||
<option value="user">Utilisateur</option>
|
||||
<option value="admin">Administrateur</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isCreating}
|
||||
className="apple-btn-primary"
|
||||
>
|
||||
{isCreating ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4" />}
|
||||
Créer le compte
|
||||
</button>
|
||||
{erreur && (
|
||||
<p role="alert" className="text-[13px] text-[var(--accent-error)]">{erreur}</p>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={onFermer} disabled={envoi}>Annuler</Button>
|
||||
<Button type="submit" disabled={envoi}>
|
||||
{envoi && <Loader2 className="animate-spin" />}
|
||||
Enregistrer le mot de passe
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Liste des utilisateurs */}
|
||||
<div className="grid gap-3">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1 mb-1">Liste des comptes</h3>
|
||||
{users.map((u) => (
|
||||
<div key={u.id} className="flex items-center gap-5 p-4 rounded-xl bg-[var(--bg-surface)] border border-[var(--border)] hover:border-[var(--text-muted)] transition-all group">
|
||||
<div className="w-10 h-10 rounded-xl bg-[var(--bg-elevated)] flex items-center justify-center shrink-0 border border-[var(--border)]">
|
||||
{u.role === "admin" ? <Shield className="w-5 h-5 text-amber-500" /> : <User className="w-5 h-5 text-[var(--text-muted)]" />}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export function UserManagement() {
|
||||
const [users, setUsers] = useState<Utilisateur[]>([]);
|
||||
const [chargement, setChargement] = useState(true);
|
||||
const [erreurChargement, setErreurChargement] = useState<string | null>(null);
|
||||
const [creation, setCreation] = useState(false);
|
||||
const [newUsername, setNewUsername] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [newRole, setNewRole] = useState<Role>("user");
|
||||
const [suppression, setSuppression] = useState<number | null>(null);
|
||||
const [cibleMotDePasse, setCibleMotDePasse] = useState<Utilisateur | null>(null);
|
||||
|
||||
// Aucun setState avant le premier await : appelable depuis l'effet de montage.
|
||||
const charger = useCallback(async () => {
|
||||
try {
|
||||
setUsers(await getUsers());
|
||||
setErreurChargement(null);
|
||||
} catch (e) {
|
||||
setErreurChargement(messageErreur(e));
|
||||
} finally {
|
||||
setChargement(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => { void charger(); }, [charger]);
|
||||
|
||||
const reessayer = () => {
|
||||
setChargement(true);
|
||||
void charger();
|
||||
};
|
||||
|
||||
const handleCreate = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setCreation(true);
|
||||
try {
|
||||
const res = await createUser(newUsername, newPassword, newRole);
|
||||
if (res.success) {
|
||||
toast.succes(`Le compte « ${newUsername} » a été créé : il peut se connecter dès maintenant.`);
|
||||
setNewUsername("");
|
||||
setNewPassword("");
|
||||
void charger();
|
||||
} else {
|
||||
toast.erreur(res.error ?? "Le compte n'a pas pu être créé.");
|
||||
}
|
||||
} catch (err) {
|
||||
toast.erreur(`Le compte n'a pas pu être créé : ${messageErreur(err)}`);
|
||||
} finally {
|
||||
setCreation(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (u: Utilisateur) => {
|
||||
const ok = await confirmer({
|
||||
titre: `Supprimer le compte « ${u.username} » ?`,
|
||||
message: "Cette personne ne pourra plus se connecter à CollectFlow. La suppression est définitive.",
|
||||
libelleConfirmer: "Supprimer",
|
||||
danger: true,
|
||||
});
|
||||
if (!ok) return;
|
||||
setSuppression(u.id);
|
||||
try {
|
||||
const res = await deleteUser(u.id);
|
||||
if (res.success) {
|
||||
setUsers((prev) => prev.filter((x) => x.id !== u.id));
|
||||
toast.succes(`Le compte « ${u.username} » a été supprimé.`);
|
||||
} else {
|
||||
toast.erreur(res.error ?? "Le compte n'a pas pu être supprimé.");
|
||||
}
|
||||
} catch (err) {
|
||||
toast.erreur(`Le compte n'a pas pu être supprimé : ${messageErreur(err)}`);
|
||||
} finally {
|
||||
setSuppression(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Création */}
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="Ajouter un utilisateur"
|
||||
description="Le compte peut se connecter dès sa création, avec cet identifiant et ce mot de passe."
|
||||
/>
|
||||
<CardContent>
|
||||
<form onSubmit={handleCreate} className="space-y-4">
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div>
|
||||
<Label htmlFor="nouvel-identifiant">Identifiant</Label>
|
||||
<Input
|
||||
id="nouvel-identifiant"
|
||||
required
|
||||
value={newUsername}
|
||||
onChange={(e) => setNewUsername(e.target.value)}
|
||||
className="w-full"
|
||||
placeholder="ex. jean.dupont"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="nouveau-mdp">Mot de passe</Label>
|
||||
<Input
|
||||
id="nouveau-mdp"
|
||||
required
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
className="w-full"
|
||||
placeholder="••••••••"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Select
|
||||
id="nouveau-role"
|
||||
label="Rôle"
|
||||
value={newRole}
|
||||
onChange={(v) => setNewRole(v as Role)}
|
||||
options={ROLES}
|
||||
className="w-full"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-[var(--text-muted)]">
|
||||
Un administrateur accède en plus à la synchronisation et aux paramètres.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-sm font-bold text-[var(--text-primary)]">{u.username}</h4>
|
||||
<span className="text-[10px] uppercase font-black text-[var(--text-muted)] tracking-wider">
|
||||
{u.role === "admin" ? "Administrateur" : "Utilisateur Standard"}
|
||||
</span>
|
||||
<Button type="submit" disabled={creation}>
|
||||
{creation ? <Loader2 className="animate-spin" /> : <UserPlus />}
|
||||
Créer le compte
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Liste */}
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="Comptes"
|
||||
description="Les personnes autorisées à se connecter à CollectFlow."
|
||||
actions={!chargement && !erreurChargement ? <Badge>{users.length} compte{users.length > 1 ? "s" : ""}</Badge> : undefined}
|
||||
/>
|
||||
<CardContent>
|
||||
{chargement ? (
|
||||
<div className="space-y-2" aria-busy="true" aria-label="Chargement des comptes">
|
||||
{Array.from({ length: 4 }, (_, i) => <Skeleton key={i} className="h-10 w-full" />)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => handleUpdatePassword(u.id, u.username)}
|
||||
className="p-2.5 rounded-lg hover:bg-[var(--accent-bg)] text-[var(--text-muted)] hover:text-[var(--accent)] transition-colors"
|
||||
title="Changer le mot de passe"
|
||||
>
|
||||
<Key className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(u.id, u.username)}
|
||||
className="p-2.5 rounded-lg hover:bg-[var(--accent-error-bg)] text-[var(--text-muted)] hover:text-[var(--accent-error)] transition-colors"
|
||||
title="Supprimer"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
) : erreurChargement ? (
|
||||
<ErrorState
|
||||
title="La liste des comptes n'a pas pu être chargée"
|
||||
detail={erreurChargement}
|
||||
action={<Button variant="outline" onClick={reessayer}>Réessayer</Button>}
|
||||
/>
|
||||
) : users.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={User}
|
||||
title="Aucun compte"
|
||||
description="Créez le premier compte avec le formulaire ci-dessus."
|
||||
/>
|
||||
) : (
|
||||
<div className="overflow-x-auto rounded-lg border border-[var(--border)]">
|
||||
<table className="w-full">
|
||||
<thead className="bg-[var(--bg-elevated)] text-[13px] font-semibold text-[var(--text-secondary)]">
|
||||
<tr>
|
||||
<th scope="col" className="px-3 py-2 text-left">Identifiant</th>
|
||||
<th scope="col" className="px-3 py-2 text-left">Rôle</th>
|
||||
<th scope="col" className="px-3 py-2 text-left">Créé le</th>
|
||||
<th scope="col" className="px-3 py-2 text-right"><span className="sr-only">Actions</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((u) => (
|
||||
<tr key={u.id} className="border-t border-[var(--border)] hover:bg-[var(--bg-elevated)]">
|
||||
<td className="px-3 py-2 text-sm font-medium text-[var(--text-primary)]">
|
||||
<span className="inline-flex items-center gap-2">
|
||||
{u.role === "admin"
|
||||
? <Shield className="h-4 w-4 text-[var(--accent)]" aria-hidden />
|
||||
: <User className="h-4 w-4 text-[var(--text-muted)]" aria-hidden />}
|
||||
{u.username}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-sm">
|
||||
{u.role === "admin"
|
||||
? <Badge ton="accent">Administrateur</Badge>
|
||||
: <Badge>Utilisateur</Badge>}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-sm text-[var(--text-secondary)]">{fmtJour(u.createdAt)}</td>
|
||||
<td className="px-3 py-2 text-right">
|
||||
<div className="inline-flex items-center gap-1">
|
||||
<Button variant="outline" size="sm" onClick={() => setCibleMotDePasse(u)}>
|
||||
<KeyRound /> Mot de passe
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(u)}
|
||||
disabled={suppression === u.id}
|
||||
className="text-[var(--accent-error)] hover:bg-[var(--accent-error-bg)] hover:text-[var(--accent-error)]"
|
||||
>
|
||||
{suppression === u.id ? <Loader2 className="animate-spin" /> : <Trash2 />}
|
||||
Supprimer
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<SuccessModal
|
||||
isOpen={modal.isOpen}
|
||||
onClose={() => setModal({ ...modal, isOpen: false })}
|
||||
title={modal.title}
|
||||
message={modal.message}
|
||||
/>
|
||||
|
||||
<ChangePasswordModal
|
||||
isOpen={pwdModal.isOpen}
|
||||
onClose={() => setPwdModal({ ...pwdModal, isOpen: false })}
|
||||
onConfirm={handleConfirmPassword}
|
||||
username={pwdModal.username}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{cibleMotDePasse && (
|
||||
<DialogueMotDePasse
|
||||
key={cibleMotDePasse.id}
|
||||
cible={cibleMotDePasse}
|
||||
onFermer={() => setCibleMotDePasse(null)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -11,7 +11,7 @@ export async function loginAction(prevState: string | undefined, formData: FormD
|
||||
await signIn("credentials", {
|
||||
username: formData.get("username"),
|
||||
password: formData.get("password"),
|
||||
redirectTo: "/grid"
|
||||
redirectTo: "/dashboard"
|
||||
});
|
||||
} catch (error) {
|
||||
if (error instanceof AuthError) {
|
||||
|
||||
@@ -2,88 +2,87 @@
|
||||
|
||||
import { useActionState } from "react";
|
||||
import { loginAction } from "../api/login-action";
|
||||
import { Loader2, Lock, User, ShieldCheck } from "lucide-react";
|
||||
import { AlertCircle, Loader2, Lock, ShieldCheck, User } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/form-controls";
|
||||
|
||||
export function LoginForm() {
|
||||
const [error, action, isPending] = useActionState(loginAction, undefined);
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-md p-8 rounded-[2rem] bg-[var(--bg-surface)] border border-[var(--border)] shadow-lg" style={{ boxShadow: "var(--shadow-md)" }}>
|
||||
<div className="flex flex-col items-center mb-10 text-center">
|
||||
<div className="w-16 h-16 rounded-2xl bg-[var(--accent-bg)] border border-[var(--accent-border)] flex items-center justify-center mb-6">
|
||||
<ShieldCheck className="w-8 h-8 text-[var(--accent)]" />
|
||||
<div className="w-full max-w-sm rounded-2xl border border-[var(--border)] bg-[var(--bg-surface)] p-8 shadow-[var(--shadow-md)]">
|
||||
<div className="mb-8 flex flex-col items-center text-center">
|
||||
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl border border-[var(--accent-border)] bg-[var(--accent-bg)]">
|
||||
<ShieldCheck className="h-6 w-6 text-[var(--accent)]" aria-hidden />
|
||||
</div>
|
||||
<h1 className="text-3xl font-black text-[var(--text-primary)] tracking-tight mb-2">
|
||||
CollectFlow
|
||||
</h1>
|
||||
<p className="text-[var(--text-secondary)] text-sm font-medium">
|
||||
Connectez-vous pour accéder à votre espace d'arbitrage.
|
||||
<h1 className="text-2xl font-bold tracking-tight text-[var(--text-primary)]">CollectFlow</h1>
|
||||
<p className="mt-1 text-sm text-[var(--text-secondary)]">
|
||||
Connectez-vous avec votre identifiant et votre mot de passe.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form action={action} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1">
|
||||
Utilisateur
|
||||
<form action={action} className="space-y-5">
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="username" className="block text-sm font-medium text-[var(--text-primary)]">
|
||||
Identifiant
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<User className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-muted)] group-focus-within:text-[var(--accent)] transition-colors" />
|
||||
<input
|
||||
<div className="relative">
|
||||
<User className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--text-muted)]" aria-hidden />
|
||||
<Input
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
required
|
||||
placeholder="admin"
|
||||
className="w-full pl-12 pr-4 py-4 rounded-xl bg-[var(--bg-elevated)] border border-[var(--border)] focus:border-[var(--accent)] outline-none transition-all text-[var(--text-primary)] font-medium"
|
||||
autoComplete="username"
|
||||
placeholder="Votre identifiant"
|
||||
className="h-11 w-full pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1">
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="password" className="block text-sm font-medium text-[var(--text-primary)]">
|
||||
Mot de passe
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-muted)] group-focus-within:text-[var(--accent)] transition-colors" />
|
||||
<input
|
||||
<div className="relative">
|
||||
<Lock className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--text-muted)]" aria-hidden />
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required
|
||||
placeholder="••••••••"
|
||||
className="w-full pl-12 pr-4 py-4 rounded-xl bg-[var(--bg-elevated)] border border-[var(--border)] focus:border-[var(--accent)] outline-none transition-all text-[var(--text-primary)] font-medium"
|
||||
autoComplete="current-password"
|
||||
placeholder="Votre mot de passe"
|
||||
className="h-11 w-full pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-4 rounded-xl bg-[var(--accent-error-bg)] border border-[var(--accent-error)] text-[var(--accent-error)] text-xs font-bold flex items-center gap-3 animate-in fade-in slide-in-from-top-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-[var(--accent-error)] shrink-0" />
|
||||
<div
|
||||
role="alert"
|
||||
className="flex items-start gap-2.5 rounded-lg border border-[var(--accent-error)]/40 bg-[var(--accent-error-bg)] px-3 py-2.5 text-sm text-[var(--text-primary)]"
|
||||
>
|
||||
<AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-[var(--accent-error)]" aria-hidden />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isPending}
|
||||
className="w-full py-4 rounded-xl bg-[var(--accent)] hover:opacity-90 disabled:opacity-50 text-white font-black transition-all active:scale-[0.98] shadow-lg flex items-center justify-center gap-2 group"
|
||||
style={{ background: "var(--accent)" }}
|
||||
>
|
||||
<Button type="submit" size="lg" disabled={isPending} className="h-11 w-full">
|
||||
{isPending ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
Connexion...
|
||||
<Loader2 className="animate-spin" />
|
||||
Connexion…
|
||||
</>
|
||||
) : (
|
||||
"Se connecter"
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="mt-8 text-center border-t border-[var(--border)] pt-8">
|
||||
<p className="text-[10px] text-[var(--text-muted)] uppercase font-black tracking-widest leading-relaxed">
|
||||
Plateforme d'Arbitrage Magasin<br />
|
||||
Propulsée par l'Intelligence Artificielle
|
||||
</p>
|
||||
</div>
|
||||
<p className="mt-6 border-t border-[var(--border)] pt-5 text-center text-[13px] text-[var(--text-muted)]">
|
||||
Révision d'assortiment et suivi des ventes des magasins
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import { revalidatePath } from "next/cache";
|
||||
import { and, eq } from "drizzle-orm";
|
||||
import { db } from "@/db";
|
||||
import { commandeCadences } from "@/db/schema";
|
||||
import { pgGetFournisseurs, pgGetDerniereReceptionParFournisseur } from "@/lib/pg-ff-client";
|
||||
import { getDerniereReceptionCached, getFournisseursCached } from "@/lib/ff-cache";
|
||||
|
||||
export type CadenceStatut = "a_commander" | "bientot" | "ok" | "inconnu";
|
||||
|
||||
@@ -37,7 +37,7 @@ function calcStatut(joursRestants: number | null): CadenceStatut {
|
||||
|
||||
/** Liste des fournisseurs (référentiel) pour le sélecteur de cadence. */
|
||||
export async function getFournisseursPourCadence(): Promise<{ code: string; nom: string }[]> {
|
||||
return pgGetFournisseurs();
|
||||
return getFournisseursCached();
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -50,7 +50,7 @@ export async function listCadences(): Promise<CadenceView[]> {
|
||||
try {
|
||||
[rows, receptions] = await Promise.all([
|
||||
db.select().from(commandeCadences),
|
||||
pgGetDerniereReceptionParFournisseur(),
|
||||
getDerniereReceptionCached(),
|
||||
]);
|
||||
} catch (e) {
|
||||
console.error("[cadence] listCadences error:", (e as Error).message);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use server";
|
||||
|
||||
import { getSitesFromApi } from "@/lib/api-ff-client";
|
||||
import { pgGetFournisseurs } from "@/lib/pg-ff-client";
|
||||
import { getFournisseursCached } from "@/lib/ff-cache";
|
||||
import { getProductRows } from "./api/get-product-rows";
|
||||
import type { ProductRow, GridFilters } from "@/types/grid";
|
||||
|
||||
@@ -9,7 +9,9 @@ import type { ProductRow, GridFilters } from "@/types/grid";
|
||||
* Get the list of all suppliers from PostgreSQL (fouadr1).
|
||||
*/
|
||||
export async function getFournisseurs() {
|
||||
return pgGetFournisseurs();
|
||||
// Relu à chaque navigation dans la Grille (changement de fournisseur, de
|
||||
// magasin…) : le référentiel ne change qu'avec la recopie nocturne.
|
||||
return getFournisseursCached();
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -15,10 +15,10 @@ import {
|
||||
import { db } from "@/db";
|
||||
import { sessionSnapshots } from "@/db/schema";
|
||||
import { eq, desc } from "drizzle-orm";
|
||||
import { getNetworkMetricsByCodeCentrale } from "@/lib/qlik-network-cache";
|
||||
import { getNetworkMetricsByCodeCentrale, type NetworkMetricCached } from "@/lib/qlik-network-cache";
|
||||
import { NB_MAGASINS_RESEAU } from "@/features/grid/lib/network-trend";
|
||||
// Persiste l'instantané lu par /api/v1 : sans lui, l'API n'aurait aucune donnée.
|
||||
import { upsertGridRows } from "@/lib/grid-store";
|
||||
import { readGridSnapshot, upsertGridRows } from "@/lib/grid-store";
|
||||
|
||||
interface GetProductRowsInput {
|
||||
codeFournisseur: string;
|
||||
@@ -28,8 +28,32 @@ interface GetProductRowsInput {
|
||||
}
|
||||
|
||||
const GRID_ROWS_CACHE_TTL_MS = 10 * 60 * 1000;
|
||||
/**
|
||||
* Bornes du cache mémoire. La synchro nocturne et le préchauffage passent par
|
||||
* `getProductRows()` pour CHAQUE fournisseur : sans plafond, le processus finissait
|
||||
* par garder toutes les grilles en mémoire (plusieurs centaines de Mo), ce qui
|
||||
* ralentissait toutes les requêtes (ramasse-miettes). Ordre d'insertion de la Map
|
||||
* = ordre d'usage : on évince les entrées les moins récemment servies.
|
||||
*/
|
||||
const GRID_ROWS_CACHE_MAX_ENTRIES = Number(process.env.GRID_ROWS_CACHE_MAX_ENTRIES ?? 30);
|
||||
const GRID_ROWS_CACHE_MAX_ROWS = Number(process.env.GRID_ROWS_CACHE_MAX_ROWS ?? 150_000);
|
||||
const gridRowsCache = new Map<string, { rows: ProductRow[]; createdAt: number }>();
|
||||
const gridRowsPending = new Map<string, Promise<ProductRow[]>>();
|
||||
/** Nombre d'enregistrements de gammes par fournisseur (cf. patchGridRowsCache). */
|
||||
const gammeSaveVersion = new Map<string, number>();
|
||||
|
||||
function cacheGridRows(key: string, rows: ProductRow[]): void {
|
||||
gridRowsCache.delete(key);
|
||||
gridRowsCache.set(key, { rows, createdAt: Date.now() });
|
||||
let totalRows = 0;
|
||||
for (const entry of gridRowsCache.values()) totalRows += entry.rows.length;
|
||||
for (const [oldKey, entry] of gridRowsCache) {
|
||||
if (gridRowsCache.size <= 1) break;
|
||||
if (gridRowsCache.size <= GRID_ROWS_CACHE_MAX_ENTRIES && totalRows <= GRID_ROWS_CACHE_MAX_ROWS) break;
|
||||
gridRowsCache.delete(oldKey);
|
||||
totalRows -= entry.rows.length;
|
||||
}
|
||||
}
|
||||
|
||||
function gridRowsCacheKey(input: GetProductRowsInput): string {
|
||||
return `${input.codeFournisseur}:${input.magasin ?? "TOTAL"}`;
|
||||
@@ -49,6 +73,31 @@ export function invalidateGridRowsCache(codeFournisseur?: string) {
|
||||
gridRowsPending.clear();
|
||||
}
|
||||
|
||||
/**
|
||||
* Reporte des gammes enregistrées sur les lignes déjà en cache, au lieu de jeter
|
||||
* le cache : l'invalidation forçait un recalcul complet (jusqu'à ~40 s sur un gros
|
||||
* fournisseur) à la réouverture suivante. Le résultat est celui qu'aurait donné
|
||||
* ce recalcul : la colonne Gamme reprend la valeur du dernier snapshot (Phase 9),
|
||||
* la colonne INIT reste l'état serveur.
|
||||
*/
|
||||
export function patchGridRowsCache(
|
||||
codeFournisseur: string,
|
||||
changes: ReadonlyArray<{ codein: string; codeGamme: string }>,
|
||||
): void {
|
||||
if (changes.length === 0) return;
|
||||
// Un calcul en cours pour ce fournisseur a lu les gammes avant cet
|
||||
// enregistrement : le compteur lui signale de les relire avant d'être caché.
|
||||
gammeSaveVersion.set(codeFournisseur, (gammeSaveVersion.get(codeFournisseur) ?? 0) + 1);
|
||||
const byCodein = new Map(changes.map((c) => [c.codein, c.codeGamme as GammeCode]));
|
||||
for (const [key, entry] of gridRowsCache) {
|
||||
if (!key.startsWith(`${codeFournisseur}:`)) continue;
|
||||
for (const row of entry.rows) {
|
||||
const gamme = byCodein.get(row.codein);
|
||||
if (gamme !== undefined) row.codeGamme = gamme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Rafraîchit UNIQUEMENT la colonne INIT (codeGammeInit = gamme serveur courante)
|
||||
* sur des lignes servies depuis le cache. La colonne Gamme (codeGamme) n'est pas
|
||||
@@ -90,19 +139,38 @@ export async function getProductRows(input: GetProductRowsInput): Promise<Produc
|
||||
const cacheKey = gridRowsCacheKey(input);
|
||||
const cached = gridRowsCache.get(cacheKey);
|
||||
if (!input.forceRefresh && cached && Date.now() - cached.createdAt < GRID_ROWS_CACHE_TTL_MS) {
|
||||
// Remonte l'entrée en tête de l'ordre d'usage (éviction LRU).
|
||||
gridRowsCache.delete(cacheKey);
|
||||
gridRowsCache.set(cacheKey, cached);
|
||||
// La colonne INIT doit refléter l'état serveur à CHAQUE chargement,
|
||||
// y compris sur un hit de cache (les données lourdes restent, elles, cachées).
|
||||
await refreshGammeInit(cached.rows, input.codeFournisseur);
|
||||
return cached.rows;
|
||||
}
|
||||
|
||||
// Un calcul déjà en cours est réutilisé même en rechargement forcé : il part
|
||||
// de données fraîches, et en lancer un second en parallèle doublait la charge
|
||||
// (double clic, onglet rouvert…) sans rien apporter.
|
||||
const pending = gridRowsPending.get(cacheKey);
|
||||
if (!input.forceRefresh && pending) {
|
||||
if (pending) {
|
||||
return pending;
|
||||
}
|
||||
|
||||
const promise = buildProductRows(input).then((rows) => {
|
||||
gridRowsCache.set(cacheKey, { rows, createdAt: Date.now() });
|
||||
// Instantané persisté (calcul de la nuit ou de la dernière ouverture) : servi
|
||||
// en une lecture au lieu d'un recalcul de 10 à 40 s. Jamais en rechargement
|
||||
// forcé — c'est précisément ce que l'utilisateur demande d'éviter.
|
||||
if (!input.forceRefresh) {
|
||||
const servi = await serveFromSnapshot(input, cacheKey);
|
||||
if (servi) return servi;
|
||||
}
|
||||
|
||||
const versionAuDepart = gammeSaveVersion.get(input.codeFournisseur) ?? 0;
|
||||
const promise = buildProductRows(input).then(async (rows) => {
|
||||
if ((gammeSaveVersion.get(input.codeFournisseur) ?? 0) !== versionAuDepart) {
|
||||
// Gammes enregistrées pendant le calcul : on reprend le dernier snapshot.
|
||||
applySnapshotChanges(rows, await loadLatestSnapshotChanges(input.codeFournisseur));
|
||||
}
|
||||
cacheGridRows(cacheKey, rows);
|
||||
gridRowsPending.delete(cacheKey);
|
||||
// Persiste l'instantané pour /api/v1 : le calcul vient d'avoir lieu, on
|
||||
// arrête simplement de jeter le résultat. Volontairement NON bloquant —
|
||||
@@ -118,6 +186,65 @@ export async function getProductRows(input: GetProductRowsInput): Promise<Produc
|
||||
return promise;
|
||||
}
|
||||
|
||||
/** Au-delà, l'instantané est servi mais un recalcul est relancé en arrière-plan. */
|
||||
const SNAPSHOT_REFRESH_AFTER_MS = 20 * 60 * 60 * 1000;
|
||||
|
||||
/**
|
||||
* Sert la Grille depuis `grid_rows` quand c'est possible : mêmes lignes que le
|
||||
* calcul en direct (elles en sont issues), avec la gamme FF du moment (INIT) et
|
||||
* les dernières gammes enregistrées reportées dessus. Hors « tous magasins »,
|
||||
* le rattrapage du magasin choisi est appliqué comme après un calcul.
|
||||
*
|
||||
* `null` = pas d'instantané utilisable (absent, ancien format, autre mois) :
|
||||
* l'appelant recalcule.
|
||||
*/
|
||||
async function serveFromSnapshot(input: GetProductRowsInput, cacheKey: string): Promise<ProductRow[] | null> {
|
||||
const { codeFournisseur, magasin = "TOTAL" } = input;
|
||||
let snapshot: Awaited<ReturnType<typeof readGridSnapshot>>;
|
||||
try {
|
||||
snapshot = await readGridSnapshot(codeFournisseur);
|
||||
} catch (e) {
|
||||
console.error("[getProductRows] lecture grid_rows KO:", (e as Error).message?.slice(0, 200));
|
||||
return null;
|
||||
}
|
||||
if (!snapshot || snapshot.rows.length === 0) return null;
|
||||
|
||||
const { rows } = snapshot;
|
||||
const [changes] = await Promise.all([
|
||||
loadLatestSnapshotChanges(codeFournisseur),
|
||||
refreshGammeInit(rows, codeFournisseur),
|
||||
]);
|
||||
applySnapshotChanges(rows, changes);
|
||||
|
||||
if (magasin !== "TOTAL") {
|
||||
const { dateDebut, dateFin } = buildLast12MonthsRange();
|
||||
await reconcileSelectedStoreFromMensuelApi(rows, magasin, dateDebut, dateFin, last12Periods());
|
||||
}
|
||||
|
||||
cacheGridRows(cacheKey, rows);
|
||||
|
||||
// Instantané qui n'a pas été recalculé par la nuit : on le rafraîchit sans
|
||||
// faire attendre l'utilisateur (la prochaine ouverture en profitera).
|
||||
// Toujours le calcul « tous magasins » : c'est lui qui réécrit l'instantané.
|
||||
if (Date.now() - snapshot.computedAt.getTime() > SNAPSHOT_REFRESH_AFTER_MS && !gridRowsPending.has(`${codeFournisseur}:TOTAL`)) {
|
||||
void getProductRows({ codeFournisseur, magasin: "TOTAL", forceRefresh: true }).catch((e) =>
|
||||
console.error("[getProductRows] rafraîchissement en arrière-plan KO:", (e as Error).message?.slice(0, 200)),
|
||||
);
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
/** Les 12 derniers mois complets, clés « YYYYMM » triées (même fenêtre que le calcul). */
|
||||
function last12Periods(): string[] {
|
||||
const now = new Date();
|
||||
const periods: string[] = [];
|
||||
for (let i = 12; i >= 1; i--) {
|
||||
const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
|
||||
periods.push(`${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, "0")}`);
|
||||
}
|
||||
return periods;
|
||||
}
|
||||
|
||||
async function buildProductRows(input: GetProductRowsInput): Promise<ProductRow[]> {
|
||||
const { codeFournisseur, magasin = "TOTAL" } = input;
|
||||
console.log(`\n>>> [getProductRows] supplier: ${codeFournisseur}, magasin: ${magasin}`);
|
||||
@@ -127,6 +254,15 @@ async function buildProductRows(input: GetProductRowsInput): Promise<ProductRow[
|
||||
|
||||
// ─── Phase 1 : 7 requêtes SQL en parallèle ────────────────────────────
|
||||
// Remplace des centaines/milliers d'appels HTTP per-article.
|
||||
const articlesPromise = pgGetArticlesByFournisseur(codeFournisseur).catch(e => { console.error("[getProductRows] pgGetArticlesByFournisseur ERROR:", e); return []; });
|
||||
// Phases 8 et 9 lancées dès maintenant : elles n'attendent que la liste des
|
||||
// articles (codes centraux) ou le seul code fournisseur. Exécutées après la
|
||||
// Phase 1, elles ajoutaient deux allers-retours en série à chaque calcul.
|
||||
const networkPromise = articlesPromise.then((arts) =>
|
||||
fetchNetworkMetrics(arts.map((a) => (a.codeCentrale ? String(a.codeCentrale).trim() : ""))),
|
||||
);
|
||||
const snapshotPromise = loadLatestSnapshotChanges(codeFournisseur);
|
||||
|
||||
const [
|
||||
articles,
|
||||
mensuelRows,
|
||||
@@ -136,7 +272,7 @@ async function buildProductRows(input: GetProductRowsInput): Promise<ProductRow[
|
||||
commandesMap,
|
||||
prixVenteMap,
|
||||
] = await Promise.all([
|
||||
pgGetArticlesByFournisseur(codeFournisseur).catch(e => { console.error("[getProductRows] pgGetArticlesByFournisseur ERROR:", e); return []; }),
|
||||
articlesPromise,
|
||||
pgGetMensuelByFournisseur(codeFournisseur, dateDebut, dateFin).catch(e => { console.error("[getProductRows] pgGetMensuelByFournisseur ERROR:", e); return []; }),
|
||||
pgGetGammesByFournisseur(codeFournisseur).catch(e => { console.error("[getProductRows] pgGetGammesByFournisseur ERROR:", e); return new Map<string, string>(); }),
|
||||
pgGetNomenclatureByFournisseur(codeFournisseur).catch(e => { console.error("[getProductRows] pgGetNomenclatureByFournisseur ERROR:", e); return new Map(); }),
|
||||
@@ -148,13 +284,8 @@ async function buildProductRows(input: GetProductRowsInput): Promise<ProductRow[
|
||||
console.log(`[getProductRows] ${articles.length} articles, ${mensuelRows.length} mensuel rows, ${gammeMap.size} gammes`);
|
||||
|
||||
// ─── Phase 2 : Fenêtre temporelle 12 mois complets ───────────────────
|
||||
const now = new Date();
|
||||
const allowedPeriods = new Set<string>();
|
||||
for (let i = 12; i >= 1; i--) {
|
||||
const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
|
||||
allowedPeriods.add(`${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, "0")}`);
|
||||
}
|
||||
const sortedPeriods = [...allowedPeriods].sort();
|
||||
const sortedPeriods = last12Periods();
|
||||
const allowedPeriods = new Set(sortedPeriods);
|
||||
|
||||
// ─── Phase 3 : Seed productMap depuis articles ────────────────────────
|
||||
const productMap = new Map<string, ProductRow>();
|
||||
@@ -407,34 +538,13 @@ async function buildProductRows(input: GetProductRowsInput): Promise<ProductRow[
|
||||
}
|
||||
|
||||
// ─── Phase 8 : Données réseau Qlik (CA / Qté / nb magasins par code centrale) ──
|
||||
await enrichWithNetworkMetrics(productMap);
|
||||
enrichWithNetworkMetrics(productMap, await networkPromise);
|
||||
|
||||
// ─── Phase 9 : Restaurer gammes depuis dernier snapshot ──────────────
|
||||
// La colonne Gamme (codeGamme) conserve la valeur du snapshot telle quelle.
|
||||
// La colonne INIT (codeGammeInit) reste, elle, l'état LIVE du serveur
|
||||
// rechargé en Phase 6 — jamais écrasée ici.
|
||||
try {
|
||||
const snaps = await db
|
||||
.select()
|
||||
.from(sessionSnapshots)
|
||||
.where(eq(sessionSnapshots.codeFournisseur, codeFournisseur))
|
||||
.orderBy(desc(sessionSnapshots.createdAt))
|
||||
.limit(1);
|
||||
|
||||
if (snaps.length > 0) {
|
||||
const changes = snaps[0].changes as Record<string, { before: string | null; after: string }>;
|
||||
for (const [codein, change] of Object.entries(changes)) {
|
||||
const product = productMap.get(codein);
|
||||
if (product && change.after) {
|
||||
// codeGammeInit reste figé (état serveur) — seul codeGamme est overridé
|
||||
product.codeGamme = change.after as GammeCode;
|
||||
}
|
||||
}
|
||||
console.log(`[getProductRows] Gammes restaurées depuis snapshot`);
|
||||
}
|
||||
} catch (snapErr) {
|
||||
console.error("[getProductRows] Snapshot restore error:", snapErr);
|
||||
}
|
||||
applySnapshotChanges(productMap.values(), await snapshotPromise);
|
||||
|
||||
// ─── Phase 10 : Filtrer gamme Y sans ventes ──────────────────────────
|
||||
const allRows = Array.from(productMap.values());
|
||||
@@ -601,41 +711,74 @@ function nbMagParMois(
|
||||
return Object.keys(parMois).length > 0 ? parMois : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enrichit les produits avec les metriques reseau Qlik (cache qlik_network_metrics),
|
||||
* jointes par code centrale. Degradation propre si la sync Qlik n'a jamais tourne
|
||||
* ou si le code centrale n'est pas encore disponible.
|
||||
*/
|
||||
async function enrichWithNetworkMetrics(productMap: Map<string, ProductRow>): Promise<void> {
|
||||
try {
|
||||
const byCodeCentrale = new Map<string, ProductRow[]>();
|
||||
for (const product of productMap.values()) {
|
||||
const cc = product.codeCentrale;
|
||||
if (!cc) continue;
|
||||
if (!byCodeCentrale.has(cc)) byCodeCentrale.set(cc, []);
|
||||
byCodeCentrale.get(cc)!.push(product);
|
||||
}
|
||||
if (byCodeCentrale.size === 0) return;
|
||||
type SnapshotChanges = Record<string, { before: string | null; after: string }>;
|
||||
|
||||
const metrics = await getNetworkMetricsByCodeCentrale([...byCodeCentrale.keys()]);
|
||||
const sampleKey = [...byCodeCentrale.keys()].find((cc) => (metrics.get(cc)?.caReseau ?? 0) > 0) ?? [...byCodeCentrale.keys()].find((cc) => metrics.has(cc));
|
||||
console.log(`[getProductRows] réseau: ${byCodeCentrale.size} codes centraux → ${metrics.size} matchés en cache. Sample:`, sampleKey ? JSON.stringify(metrics.get(sampleKey)) : "aucun match");
|
||||
for (const [cc, products] of byCodeCentrale.entries()) {
|
||||
const m = metrics.get(cc);
|
||||
if (!m) continue;
|
||||
for (const product of products) {
|
||||
product.caReseau = m.caReseau;
|
||||
product.qteReseau = m.qteReseau;
|
||||
product.nbMagasinsReseau = m.nbMagasinsReseau;
|
||||
product.caParMagasinReseau = m.caParMagasinReseau;
|
||||
product.margePctReseau = m.margePctReseau;
|
||||
product.tauxPresenceReseau = m.nbMagasinsReseau / NB_MAGASINS_RESEAU;
|
||||
product.qteReseauByMonth = m.qteByMonth ?? null;
|
||||
product.nbMagReseauByMonth = nbMagParMois(m.metricsByMonth);
|
||||
product.networkFetchedAt = m.fetchedAt ?? undefined;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Phase 9 : la colonne Gamme (codeGamme) reprend la valeur du snapshot ;
|
||||
* codeGammeInit reste figé (état serveur).
|
||||
*/
|
||||
function applySnapshotChanges(rows: Iterable<ProductRow>, changes: SnapshotChanges | null): void {
|
||||
if (!changes) return;
|
||||
for (const row of rows) {
|
||||
const change = changes[row.codein];
|
||||
if (change?.after) row.codeGamme = change.after as GammeCode;
|
||||
}
|
||||
}
|
||||
|
||||
/** Dernières gammes enregistrées pour ce fournisseur (Phase 9), ou `null`. */
|
||||
async function loadLatestSnapshotChanges(codeFournisseur: string): Promise<SnapshotChanges | null> {
|
||||
try {
|
||||
const snaps = await db
|
||||
.select({ changes: sessionSnapshots.changes })
|
||||
.from(sessionSnapshots)
|
||||
.where(eq(sessionSnapshots.codeFournisseur, codeFournisseur))
|
||||
.orderBy(desc(sessionSnapshots.createdAt))
|
||||
.limit(1);
|
||||
return snaps.length > 0 ? (snaps[0].changes as SnapshotChanges) : null;
|
||||
} catch (snapErr) {
|
||||
console.error("[getProductRows] Snapshot restore error:", snapErr);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Lit les metriques reseau Qlik (cache qlik_network_metrics) des codes centraux
|
||||
* donnes. `null` en cas d'erreur : la grille s'affiche alors sans donnees reseau.
|
||||
*/
|
||||
async function fetchNetworkMetrics(
|
||||
codesCentrale: string[],
|
||||
): Promise<Map<string, NetworkMetricCached> | null> {
|
||||
try {
|
||||
const codes = [...new Set(codesCentrale.filter(Boolean))];
|
||||
if (codes.length === 0) return null;
|
||||
return await getNetworkMetricsByCodeCentrale(codes);
|
||||
} catch (error) {
|
||||
console.error("[getProductRows] enrichWithNetworkMetrics error:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Enrichit les produits avec les metriques reseau Qlik, jointes par code centrale.
|
||||
* Degradation propre si la sync Qlik n'a jamais tourne ou si le code centrale
|
||||
* n'est pas encore disponible.
|
||||
*/
|
||||
function enrichWithNetworkMetrics(
|
||||
productMap: Map<string, ProductRow>,
|
||||
metrics: Map<string, NetworkMetricCached> | null,
|
||||
): void {
|
||||
if (!metrics || metrics.size === 0) return;
|
||||
for (const product of productMap.values()) {
|
||||
const m = product.codeCentrale ? metrics.get(product.codeCentrale) : undefined;
|
||||
if (!m) continue;
|
||||
product.caReseau = m.caReseau;
|
||||
product.qteReseau = m.qteReseau;
|
||||
product.nbMagasinsReseau = m.nbMagasinsReseau;
|
||||
product.caParMagasinReseau = m.caParMagasinReseau;
|
||||
product.margePctReseau = m.margePctReseau;
|
||||
product.tauxPresenceReseau = m.nbMagasinsReseau / NB_MAGASINS_RESEAU;
|
||||
product.qteReseauByMonth = m.qteByMonth ?? null;
|
||||
product.nbMagReseauByMonth = nbMagParMois(m.metricsByMonth);
|
||||
product.networkFetchedAt = m.fetchedAt ?? undefined;
|
||||
}
|
||||
}
|
||||
@@ -5,7 +5,8 @@ import { sessionSnapshots } from "@/db/schema";
|
||||
import { eq, desc } from "drizzle-orm";
|
||||
import { z } from "zod";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { invalidateGridRowsCache } from "./get-product-rows";
|
||||
import { patchGridRowsCache } from "./get-product-rows";
|
||||
import { updateGridRowsGamme } from "@/lib/grid-store";
|
||||
|
||||
const SaveDraftsSchema = z.object({
|
||||
codeFournisseur: z.string(),
|
||||
@@ -70,7 +71,13 @@ export async function saveDraftChanges(
|
||||
type: "snapshot",
|
||||
});
|
||||
|
||||
invalidateGridRowsCache(codeFournisseur);
|
||||
// Les lignes en cache reçoivent les nouvelles gammes au lieu d'être jetées :
|
||||
// l'invalidation imposait un recalcul complet (jusqu'à ~40 s) à la
|
||||
// réouverture suivante. L'instantané lu par /api/v1 suit, sans bloquer.
|
||||
patchGridRowsCache(codeFournisseur, changes);
|
||||
void updateGridRowsGamme(codeFournisseur, changes).catch((e) =>
|
||||
console.error("[saveDraftChanges] mise à jour grid_rows KO:", (e as Error).message?.slice(0, 200)),
|
||||
);
|
||||
|
||||
return { success: true, saved: changes.length };
|
||||
} catch (err) {
|
||||
|
||||
@@ -307,7 +307,7 @@ export function AssortmentGapsModal({ classement, critereId, mois, magasinInitia
|
||||
{/* Réglages : quel magasin, et jusqu'où dans le classement */}
|
||||
<div className="flex flex-wrap items-center gap-x-5 gap-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[12px] font-semibold uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Magasin</span>
|
||||
<span className="text-[13px] font-medium" style={{ color: "var(--text-muted)" }}>Magasin</span>
|
||||
<div className="inline-flex rounded-lg p-0.5" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)" }}>
|
||||
{sites.map((s) => (
|
||||
<button
|
||||
@@ -327,7 +327,7 @@ export function AssortmentGapsModal({ classement, critereId, mois, magasinInitia
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[12px] font-semibold uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Profondeur</span>
|
||||
<span className="text-[13px] font-medium" style={{ color: "var(--text-muted)" }}>Profondeur</span>
|
||||
<div className="inline-flex rounded-lg p-0.5" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)" }}>
|
||||
{PROFONDEURS.map((p) => (
|
||||
<button
|
||||
@@ -345,7 +345,7 @@ export function AssortmentGapsModal({ classement, critereId, mois, magasinInitia
|
||||
))}
|
||||
</div>
|
||||
{classement.length < profondeur && (
|
||||
<span className="text-[11.5px]" style={{ color: "var(--text-muted)" }}>
|
||||
<span className="text-xs" style={{ color: "var(--text-muted)" }}>
|
||||
({classement.length} lignes affichées seulement)
|
||||
</span>
|
||||
)}
|
||||
@@ -420,13 +420,13 @@ export function AssortmentGapsModal({ classement, critereId, mois, magasinInitia
|
||||
<tr key={row.codein} style={{ borderTop: "1px solid var(--border)" }}>
|
||||
<td className="px-2.5 py-1.5 text-right tabular-nums" style={{ color: "var(--text-muted)" }}>{rang}</td>
|
||||
<td className="px-2.5 py-1.5 tabular-nums font-semibold whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>{row.codein}</td>
|
||||
<td className="px-2.5 py-1.5 font-mono text-[11.5px] whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
|
||||
<td className="px-2.5 py-1.5 font-mono text-xs whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
|
||||
{row.reference || "—"}
|
||||
</td>
|
||||
<td className="px-2.5 py-1.5" style={{ color: "var(--text-primary)" }} title={row.libelle1}>
|
||||
<span className="font-semibold">{row.libelle1}</span>
|
||||
{row.libelle3 && (
|
||||
<span className="ml-1.5 text-[10.5px]" style={{ color: "var(--text-muted)" }}>{row.libelle3}</span>
|
||||
<span className="ml-1.5 text-xs" style={{ color: "var(--text-muted)" }}>{row.libelle3}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-2.5 py-1.5 text-right tabular-nums font-semibold whitespace-nowrap" style={{ color: "var(--text-primary)" }}>
|
||||
@@ -449,7 +449,7 @@ export function AssortmentGapsModal({ classement, critereId, mois, magasinInitia
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-[11.5px] leading-snug" style={{ color: "var(--text-muted)" }}>
|
||||
<p className="text-xs leading-snug" style={{ color: "var(--text-muted)" }}>
|
||||
Non travaillé = aucune vente sur les 12 mois glissants ET aucun stock au dernier mois connu, à {nomMagasin}.
|
||||
Un produit sans vente mais en stock n'apparaît pas ici : le magasin le détient, c'est un invendu, pas un trou d'assortiment.
|
||||
</p>
|
||||
|
||||
@@ -3,14 +3,10 @@
|
||||
import { useGridStore } from "@/features/grid/store/use-grid-store";
|
||||
import { GammeCode } from "@/types/grid";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { GAMMES } from "@/lib/gammes";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
|
||||
const GAMME_OPTIONS: { label: string; code: GammeCode; color: string }[] = [
|
||||
{ label: "A — Cœur", code: "A", color: "border-emerald-600 text-emerald-400 hover:bg-emerald-900/20" },
|
||||
{ label: "B — Complémentaire", code: "B", color: "border-blue-600 text-blue-400 hover:bg-blue-900/20" },
|
||||
{ label: "C — Saisonnier", code: "C", color: "border-amber-600 text-amber-400 hover:bg-amber-900/20" },
|
||||
{ label: "Y — En veille", code: "Y", color: "border-violet-600 text-violet-400 hover:bg-violet-900/20" },
|
||||
{ label: "Z — Sortie", code: "Z", color: "border-rose-600 text-rose-400 hover:bg-rose-900/20" },
|
||||
];
|
||||
|
||||
interface BulkActionToolbarProps {
|
||||
selectedCodeins: string[];
|
||||
@@ -32,30 +28,28 @@ export function BulkActionToolbar({ selectedCodeins, onClearSelection }: BulkAct
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2 bg-slate-900 border border-slate-700/50 rounded-xl backdrop-blur-md shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200">
|
||||
<span className="text-[11px] font-black uppercase tracking-wider text-slate-200">
|
||||
{selectedCodeins.length} sélectionné{selectedCodeins.length > 1 ? "s" : ""}
|
||||
<div
|
||||
role="region"
|
||||
aria-label="Actions sur la sélection"
|
||||
className="flex flex-wrap items-center gap-x-3 gap-y-2 rounded-xl border px-4 py-2 border-[var(--accent-border)] bg-[var(--accent-bg)] animate-in fade-in slide-in-from-top-2 duration-200"
|
||||
>
|
||||
<span className="text-sm font-semibold text-[var(--text-primary)]">
|
||||
{selectedCodeins.length} produit{selectedCodeins.length > 1 ? "s" : ""} sélectionné{selectedCodeins.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
<div className="h-4 w-px bg-slate-700/50" />
|
||||
<span className="text-[11px] font-bold text-slate-400 uppercase tracking-tight">Appliquer en masse :</span>
|
||||
{GAMME_OPTIONS.map(({ label, code, color }) => (
|
||||
<span className="text-[13px] text-[var(--text-secondary)]">— leur donner la gamme :</span>
|
||||
{GAMMES.map((g) => (
|
||||
<button
|
||||
key={code}
|
||||
onClick={() => applyBulk(code)}
|
||||
className={cn(
|
||||
"px-3 py-1 text-xs font-bold border rounded transition-colors",
|
||||
color
|
||||
)}
|
||||
key={g.code}
|
||||
onClick={() => applyBulk(g.code as GammeCode)}
|
||||
title={g.description}
|
||||
className={cn("rounded-md border px-3 py-1 text-[13px] font-semibold transition-opacity hover:opacity-80", g.classes)}
|
||||
>
|
||||
{label}
|
||||
{g.code} — {g.nom}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={onClearSelection}
|
||||
className="ml-auto text-xs text-slate-500 hover:text-slate-300 transition-colors"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<Button variant="ghost" size="sm" onClick={onClearSelection} className="ml-auto">
|
||||
Annuler la sélection
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,235 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Download, FileSpreadsheet, FileText, ChevronDown, Table2 } from "lucide-react";
|
||||
import * as ExcelJS from "exceljs";
|
||||
import jsPDF from "jspdf";
|
||||
import autoTable from "jspdf-autotable";
|
||||
import { useGridStore } from "@/features/grid/store/use-grid-store";
|
||||
|
||||
export function ExportDropdown({ nomFournisseur }: { nomFournisseur?: string }) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const { rows, draftChanges } = useGridStore();
|
||||
|
||||
const handleExportAllProducts = async () => {
|
||||
setIsOpen(false);
|
||||
if (rows.length === 0) {
|
||||
alert("Aucune donnée à exporter.");
|
||||
return;
|
||||
}
|
||||
|
||||
const supplier = nomFournisseur || rows[0]?.nomFournisseur || "Fournisseur";
|
||||
|
||||
const payload = {
|
||||
nomFournisseur: supplier,
|
||||
rows: rows.map(r => ({
|
||||
codein: r.codein,
|
||||
libelle1: r.libelle1 || "",
|
||||
code3: r.code3 || "",
|
||||
libelle3: r.libelle3 || "",
|
||||
codeGamme: (draftChanges[r.codein] ?? r.codeGamme) as string | null,
|
||||
totalQuantite: r.totalQuantite,
|
||||
totalCa: r.totalCa,
|
||||
tauxMarge: r.tauxMarge,
|
||||
gammeAvant: r.codeGammeInit ?? null,
|
||||
})),
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/export/excel", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error("Erreur lors de l'export");
|
||||
|
||||
const blob = await res.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `Assortiment_Complet_${supplier.replace(/\s+/g, "_")}_${new Date().toISOString().slice(0, 10)}.xlsx`;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("Une erreur s'est produite lors de l'export Excel.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleExportExcel = async () => {
|
||||
setIsOpen(false);
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
const worksheet = workbook.addWorksheet("Gamme A");
|
||||
|
||||
worksheet.columns = [
|
||||
{ header: "Magasin(s)", key: "magasins", width: 25 },
|
||||
{ header: "Gencode", key: "gtin", width: 15 },
|
||||
{ header: "Référence", key: "reference", width: 20 },
|
||||
{ header: "Libellé", key: "libelle", width: 45 },
|
||||
{ header: "Gamme", key: "gamme", width: 10 },
|
||||
];
|
||||
|
||||
// Format Header
|
||||
worksheet.getRow(1).font = { bold: true };
|
||||
|
||||
// Filter for effective Gamme A
|
||||
const gammeARows = rows.filter((row) => {
|
||||
const effectiveGamme = draftChanges[row.codein] ?? row.codeGamme;
|
||||
return effectiveGamme === "A";
|
||||
});
|
||||
|
||||
gammeARows.forEach((row) => {
|
||||
worksheet.addRow({
|
||||
magasins: row.workingStores.join(", "),
|
||||
gtin: row.gtin || row.codein, // Fallback if no true gtin
|
||||
reference: row.reference || "",
|
||||
libelle: row.libelle1 || "",
|
||||
gamme: draftChanges[row.codein] ?? row.codeGamme,
|
||||
});
|
||||
});
|
||||
|
||||
const buffer = await workbook.xlsx.writeBuffer();
|
||||
const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `Export_Gamme_A_${new Date().toISOString().split("T")[0]}.xlsx`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handlePrintPDF = () => {
|
||||
setIsOpen(false);
|
||||
const doc = new jsPDF({ orientation: "landscape", unit: "mm", format: "a4" });
|
||||
|
||||
doc.setFontSize(16);
|
||||
doc.text("Analyse d'Assortiment", 14, 15);
|
||||
|
||||
doc.setFontSize(14);
|
||||
doc.setTextColor(50);
|
||||
if (nomFournisseur) {
|
||||
doc.text(nomFournisseur, 14, 23);
|
||||
}
|
||||
|
||||
doc.setFontSize(10);
|
||||
doc.setTextColor(100);
|
||||
doc.text(`Export généré le : ${new Date().toLocaleDateString("fr-FR")}`, 14, 30);
|
||||
|
||||
const head = [
|
||||
["Gencode", "Code In", "Réf.", "Libellé", "Mag. Rés.", "Vol.", "CA", "Marge", "Gamme"]
|
||||
];
|
||||
|
||||
const body = rows.map(r => {
|
||||
const effectiveGamme = draftChanges[r.codein] ?? r.codeGamme;
|
||||
return [
|
||||
r.gtin || r.codein,
|
||||
r.codein,
|
||||
r.reference || "-",
|
||||
r.libelle1 ? r.libelle1.substring(0, 60) + (r.libelle1.length > 60 ? "..." : "") : "",
|
||||
r.nbMagasinsReseau != null ? r.nbMagasinsReseau.toString() : "-",
|
||||
Math.round(r.totalQuantite).toLocaleString("fr-FR"),
|
||||
`${Math.round(r.totalCa).toLocaleString("fr-FR")} €`,
|
||||
`${Math.round(r.totalMarge).toLocaleString("fr-FR")} €\n(${r.tauxMarge.toFixed(1)}%)`,
|
||||
effectiveGamme || "-"
|
||||
];
|
||||
});
|
||||
|
||||
// @ts-ignore (autotable acts as a plugin)
|
||||
autoTable(doc, {
|
||||
head,
|
||||
body,
|
||||
startY: 35,
|
||||
styles: { fontSize: 8, cellPadding: 2, lineColor: [200, 200, 200], lineWidth: 0.1 },
|
||||
headStyles: { fillColor: [15, 23, 42], textColor: [255, 255, 255], fontStyle: "bold", halign: "center" },
|
||||
columnStyles: {
|
||||
0: { cellWidth: 28 }, // Gencode
|
||||
1: { cellWidth: 18, fontStyle: "bold", halign: "center" }, // Code In
|
||||
2: { cellWidth: 25 }, // Réf
|
||||
3: { cellWidth: 80 }, // Libellé
|
||||
4: { cellWidth: 12, halign: "center", fontStyle: "bold", textColor: [16, 185, 129] }, // Score
|
||||
},
|
||||
theme: "grid",
|
||||
didDrawPage: (data: any) => {
|
||||
// Footer pagination
|
||||
doc.setFontSize(8);
|
||||
doc.text(
|
||||
`Page ${data.pageNumber}`,
|
||||
data.settings.margin.left,
|
||||
doc.internal.pageSize.height - 10
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
doc.save(`Assortiment_${new Date().toISOString().split("T")[0]}.pdf`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative z-50 print:hidden">
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="btn-action btn-action-secondary flex items-center gap-2"
|
||||
title="Exporter les données"
|
||||
>
|
||||
<Download className="w-[14px] h-[14px]" />
|
||||
<span className="text-[13px] font-semibold">Exporter</span>
|
||||
<ChevronDown className="w-[12px] h-[12px] opacity-60" />
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 z-40"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
<div className="absolute right-0 mt-2 w-56 rounded-xl border z-50 overflow-hidden shadow-lg animate-in fade-in slide-in-from-top-2"
|
||||
style={{
|
||||
background: "var(--bg-elevated)",
|
||||
borderColor: "var(--border-strong)"
|
||||
}}
|
||||
>
|
||||
<div className="p-1">
|
||||
<button
|
||||
onClick={handleExportExcel}
|
||||
className="w-full flex items-center gap-3 px-3 py-2 text-sm text-left rounded-lg transition-colors hover:bg-white/5"
|
||||
>
|
||||
<FileSpreadsheet className="w-4 h-4 text-emerald-500" />
|
||||
<div>
|
||||
<div className="font-semibold text-[var(--text-primary)]">Gamme A vers Excel</div>
|
||||
<div className="text-[11px] text-[var(--text-muted)] mt-0.5">Gencode, Réf, Libellé...</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="my-1 h-px bg-[var(--border)] mx-2" />
|
||||
|
||||
<button
|
||||
onClick={handleExportAllProducts}
|
||||
className="w-full flex items-center gap-3 px-3 py-2 text-sm text-left rounded-lg transition-colors hover:bg-white/5"
|
||||
>
|
||||
<Table2 className="w-4 h-4 text-blue-400" />
|
||||
<div>
|
||||
<div className="font-semibold text-[var(--text-primary)]">Tous les produits (Excel)</div>
|
||||
<div className="text-[11px] text-[var(--text-muted)] mt-0.5">Gamme avant/après, delta, stats 12m</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="my-1 h-px bg-[var(--border)] mx-2" />
|
||||
|
||||
<button
|
||||
onClick={handlePrintPDF}
|
||||
className="w-full flex items-center gap-3 px-3 py-2 text-sm text-left rounded-lg transition-colors hover:bg-white/5"
|
||||
>
|
||||
<FileText className="w-4 h-4 text-rose-500" />
|
||||
<div>
|
||||
<div className="font-semibold text-[var(--text-primary)]">Tableau en PDF</div>
|
||||
<div className="text-[11px] text-[var(--text-muted)] mt-0.5">Mise en page épurée (Réf. incluse)</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
"use client";
|
||||
|
||||
interface FinancialCellProps {
|
||||
totalCa: number;
|
||||
totalMarge: number;
|
||||
tauxMarge: number;
|
||||
}
|
||||
|
||||
|
||||
export function FinancialCell({ totalCa, totalMarge, tauxMarge }: FinancialCellProps) {
|
||||
const isHighMargin = tauxMarge >= 45;
|
||||
const isMedMargin = tauxMarge >= 20 && tauxMarge < 45;
|
||||
|
||||
let textAccent = "var(--accent-error)";
|
||||
let bgAccent = "var(--accent-error-bg)";
|
||||
|
||||
if (isHighMargin) {
|
||||
textAccent = "var(--accent-success)";
|
||||
bgAccent = "var(--accent-success-bg)";
|
||||
} else if (isMedMargin) {
|
||||
textAccent = "var(--accent-warning)";
|
||||
bgAccent = "var(--accent-warning-bg)";
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center rounded-lg py-1 shadow-sm w-full max-w-[130px] mx-auto transition-colors border-apple"
|
||||
style={{
|
||||
background: bgAccent,
|
||||
borderColor: "transparent"
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="font-mono-nums text-[13px] font-bold whitespace-nowrap"
|
||||
style={{ color: textAccent }}
|
||||
>
|
||||
{totalCa.toLocaleString("fr-FR", { maximumFractionDigits: 0 })} €
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5 mt-0.5 opacity-80">
|
||||
<span
|
||||
className="font-mono-nums text-[10px] px-1 py-0.5 rounded font-bold whitespace-nowrap bg-white/20 dark:bg-black/20"
|
||||
style={{ color: textAccent }}
|
||||
>
|
||||
{tauxMarge.toFixed(1)}%
|
||||
</span>
|
||||
<span className="font-mono-nums text-[10px] font-semibold text-slate-500 dark:text-slate-400 whitespace-nowrap">
|
||||
{totalMarge.toLocaleString("fr-FR", { maximumFractionDigits: 0 })} €
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,62 +1,71 @@
|
||||
import { useGridStore } from "@/features/grid/store/use-grid-store";
|
||||
import { useSession } from "next-auth/react";
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
|
||||
import { useGridStore } from "@/features/grid/store/use-grid-store";
|
||||
import { SyncQlikButton } from "./sync-qlik-button";
|
||||
import { useSaveDrafts } from "@/features/grid/hooks/use-save-drafts";
|
||||
import { Loader2, CheckCircle, AlertCircle, RotateCcw, Camera, ChevronDown } from "lucide-react";
|
||||
import { ChevronDown, Download, FileSpreadsheet, FileText, History, Loader2, RotateCcw, Save, Table2 } from "lucide-react";
|
||||
import { useMemo, useState, useTransition } from "react";
|
||||
import { saveSnapshot } from "@/features/snapshots/api/save-snapshot";
|
||||
import { SuccessModal } from "@/components/shared/success-modal";
|
||||
import { isStaleServerActionError, STALE_ACTION_MESSAGE } from "@/lib/stale-action";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { confirmer, toast } from "@/components/ui/feedback";
|
||||
import { fmtDecimal1, fmtEntier, fmtEur0 } from "@/lib/format";
|
||||
import { couleurMarge } from "@/lib/marge";
|
||||
import {
|
||||
exporterFichierGammes,
|
||||
exporterGammeA,
|
||||
exporterTousProduits,
|
||||
imprimerPdf,
|
||||
lignesModifiees,
|
||||
} from "@/features/grid/lib/exports";
|
||||
|
||||
function Stat({ label, value, sub }: { label: string; value: string; sub?: string }) {
|
||||
// Determine color based on label to match the prototype
|
||||
const valColor = label.includes("CA") || label.includes("Marge") ? "text-emerald-600 dark:text-emerald-400" : "text-slate-900 dark:text-white";
|
||||
function Stat({ label, value, sub, subColor }: { label: string; value: string; sub?: string; subColor?: string }) {
|
||||
return (
|
||||
// Barre maintenant dans le flux : chaque pixel de hauteur est pris au
|
||||
// tableau. Ces chiffres sont déjà repris en gros dans l'en-tête de page,
|
||||
// ils n'ont pas besoin d'y être une seconde fois en 20 px.
|
||||
<div className="flex flex-col items-center leading-tight">
|
||||
<span className="text-slate-500 text-[10px] uppercase font-black tracking-tighter">{label}</span>
|
||||
<span className={`font-mono-nums font-black text-base ${valColor}`}>{value}</span>
|
||||
{sub && <span className="text-emerald-600 dark:text-emerald-500 text-[11px] font-bold">{sub}</span>}
|
||||
<div className="flex flex-col leading-tight">
|
||||
<span className="text-xs text-[var(--text-muted)]">{label}</span>
|
||||
<span className="text-base font-bold tabular-nums text-[var(--text-primary)]">
|
||||
{value}
|
||||
{sub && <span className="ml-1.5 text-[13px] font-semibold" style={{ color: subColor }}>{sub}</span>}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function FloatingSummaryBar() {
|
||||
const { data: session } = useSession();
|
||||
const isAdmin = (session?.user as { role?: string } | undefined)?.role === "admin";
|
||||
function messageErreur(err: unknown): string {
|
||||
if (isStaleServerActionError(err)) return STALE_ACTION_MESSAGE;
|
||||
return err instanceof Error ? err.message : String(err);
|
||||
}
|
||||
|
||||
/**
|
||||
* Barre du bas de la Grille : totaux du périmètre affiché et TOUTES les actions
|
||||
* sur les gammes (annuler, enregistrer, exporter). Il y avait des doublons dans
|
||||
* l'en-tête, avec des droits différents.
|
||||
*/
|
||||
function FloatingSummaryBarInner({ isAdmin, nomFournisseur }: { isAdmin: boolean; nomFournisseur: string }) {
|
||||
const summary = useGridStore((s) => s.summary);
|
||||
const resetDrafts = useGridStore((s) => s.resetDrafts);
|
||||
const rows = useGridStore((s) => s.rows);
|
||||
const filters = useGridStore((s) => s.filters);
|
||||
const draftChanges = useGridStore((s) => s.draftChanges);
|
||||
const filterFournisseur = useGridStore((s) => s.filters.codeFournisseur);
|
||||
// Magasin affiché (bascule de la Grille). `filters.magasin` n'est jamais
|
||||
// renseigné : les sessions et validations étaient toutes notées « TOTAL ».
|
||||
const activeMagasin = useGridStore((s) => s.activeMagasin);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [isSavingSnapshot, setIsSavingSnapshot] = useState(false);
|
||||
const [saveStatus, setSaveStatus] = useState<"idle" | "success" | "error">("idle");
|
||||
const [modal, setModal] = useState<{
|
||||
isOpen: boolean;
|
||||
title: string;
|
||||
message: string;
|
||||
variant?: "success" | "error";
|
||||
action?: { label: string; onClick: () => void };
|
||||
}>({
|
||||
isOpen: false,
|
||||
title: "",
|
||||
message: ""
|
||||
});
|
||||
const [enCours, setEnCours] = useState<string | null>(null);
|
||||
|
||||
const visibleCodeins = useMemo(() => rows.map(r => r.codein), [rows]);
|
||||
const { save, hasDrafts, count } = useSaveDrafts(filters.magasin || "TOTAL", visibleCodeins);
|
||||
const { save, hasDrafts, count } = useSaveDrafts(activeMagasin || "TOTAL", visibleCodeins);
|
||||
|
||||
const supplierCode = filters.codeFournisseur || rows[0]?.codeFournisseur;
|
||||
const supplierCode = filterFournisseur || rows[0]?.codeFournisseur;
|
||||
const lastQlikUpdate = useMemo(() => {
|
||||
let max: string | null = null;
|
||||
for (const r of rows) {
|
||||
@@ -67,42 +76,52 @@ export function FloatingSummaryBar() {
|
||||
|
||||
const handleSave = () => {
|
||||
startTransition(async () => {
|
||||
const result = await save();
|
||||
setSaveStatus(result.success ? "success" : "error");
|
||||
setTimeout(() => setSaveStatus("idle"), 3000);
|
||||
try {
|
||||
const result = await save();
|
||||
if (result.success) {
|
||||
toast.succes(`${result.saved} gamme${result.saved > 1 ? "s" : ""} enregistrée${result.saved > 1 ? "s" : ""}.`);
|
||||
} else {
|
||||
toast.erreur(`Enregistrement impossible : ${result.error ?? "erreur inconnue"}`);
|
||||
}
|
||||
} catch (err) {
|
||||
toast.erreur(`Enregistrement impossible : ${messageErreur(err)}`);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
if (window.confirm("Es-tu sûr de vouloir annuler tous les changements non enregistrés (gammes) ?")) {
|
||||
const handleReset = async () => {
|
||||
const ok = await confirmer({
|
||||
titre: "Annuler les modifications ?",
|
||||
message: `Les ${count} gamme${count > 1 ? "s" : ""} modifiée${count > 1 ? "s" : ""} et non enregistrée${count > 1 ? "s" : ""} reviendront à leur valeur précédente.`,
|
||||
libelleConfirmer: "Annuler les modifications",
|
||||
danger: true,
|
||||
});
|
||||
if (ok) {
|
||||
resetDrafts();
|
||||
toast.info("Modifications annulées.");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Enregistre une copie de la session dans l'Historique.
|
||||
* Renvoie l'identifiant créé, ou `null` en cas d'échec (déjà signalé).
|
||||
*/
|
||||
const handleSnapshot = async (labelOverride?: string, type: "snapshot" | "export" = "snapshot") => {
|
||||
if (rows.length === 0) return;
|
||||
setIsSavingSnapshot(true);
|
||||
if (rows.length === 0) return null;
|
||||
const { draftChanges } = useGridStore.getState();
|
||||
// Tous les changements : brouillons + gammes déjà enregistrées (≠ FF)
|
||||
const changes = Object.fromEntries(
|
||||
lignesModifiees().map(r => [
|
||||
r.codein,
|
||||
{ before: r.codeGammeInit, after: (draftChanges[r.codein] ?? r.codeGamme) as string },
|
||||
])
|
||||
);
|
||||
try {
|
||||
// Détecter TOUS les changements : drafts actifs + changements déjà validés (codeGamme mis à jour)
|
||||
const modifiedRows = rows.filter(r => {
|
||||
const effectiveGamme = draftChanges[r.codein] ?? r.codeGamme;
|
||||
return effectiveGamme !== r.codeGammeInit;
|
||||
});
|
||||
const changes = Object.fromEntries(
|
||||
modifiedRows.map(r => [
|
||||
r.codein,
|
||||
{
|
||||
before: r.codeGammeInit,
|
||||
after: (draftChanges[r.codein] ?? r.codeGamme) as string
|
||||
}
|
||||
])
|
||||
);
|
||||
|
||||
const res = await saveSnapshot({
|
||||
codeFournisseur: filters.codeFournisseur || rows[0].codeFournisseur,
|
||||
codeFournisseur: filterFournisseur || rows[0].codeFournisseur,
|
||||
nomFournisseur: rows[0].nomFournisseur,
|
||||
magasin: filters.magasin || "TOTAL",
|
||||
label: labelOverride || `${type === 'export' ? 'Export' : 'Session'} ${rows[0].nomFournisseur} — ${new Date().toLocaleTimeString()}`,
|
||||
magasin: activeMagasin || "TOTAL",
|
||||
label: labelOverride || `Session ${rows[0].nomFournisseur} — ${new Date().toLocaleString("fr-FR", { dateStyle: "short", timeStyle: "short" })}`,
|
||||
changes,
|
||||
type,
|
||||
summary: {
|
||||
@@ -110,263 +129,154 @@ export function FloatingSummaryBar() {
|
||||
totalCa: summary.totalCa,
|
||||
totalMarge: summary.totalMarge,
|
||||
tauxMargeGlobal: summary.tauxMargeGlobal,
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
if (res.success) {
|
||||
if (!labelOverride) {
|
||||
setModal({
|
||||
isOpen: true,
|
||||
title: "Snapshot Enregistré",
|
||||
message: "Votre session de travail a été sauvegardée avec succès."
|
||||
});
|
||||
}
|
||||
return res.snapshotId;
|
||||
} else {
|
||||
throw new Error(res.error);
|
||||
}
|
||||
if (!res.success) throw new Error(res.error);
|
||||
if (!labelOverride) toast.succes("Session enregistrée dans l'Historique.");
|
||||
return res.snapshotId;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
if (!labelOverride) {
|
||||
// Onglet resté ouvert pendant un déploiement : les identifiants de
|
||||
// Server Action ont changé côté serveur. Rien à réparer côté
|
||||
// métier, il faut recharger le bundle client.
|
||||
if (isStaleServerActionError(err)) {
|
||||
setModal({
|
||||
isOpen: true,
|
||||
title: "Page à recharger",
|
||||
message: STALE_ACTION_MESSAGE,
|
||||
variant: "error",
|
||||
action: { label: "Recharger la page", onClick: () => window.location.reload() },
|
||||
});
|
||||
} else {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
setModal({
|
||||
isOpen: true,
|
||||
title: "Erreur Snapshot",
|
||||
message: `Impossible de créer le snapshot : ${msg}`,
|
||||
variant: "error",
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!labelOverride) toast.erreur(`La session n'a pas pu être enregistrée : ${messageErreur(err)}`);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
/** Lance un export avec indicateur et messages d'erreur communs. */
|
||||
const lancer = async (cle: string, action: () => Promise<boolean>, vide: string) => {
|
||||
if (enCours) return;
|
||||
setEnCours(cle);
|
||||
try {
|
||||
const ok = await action();
|
||||
if (!ok) toast.info(vide);
|
||||
} catch (err) {
|
||||
toast.erreur(`L'export a échoué : ${messageErreur(err)}`);
|
||||
} finally {
|
||||
setIsSavingSnapshot(false);
|
||||
setEnCours(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
/*
|
||||
* Dans le flux, plus en `fixed`.
|
||||
*
|
||||
* En `fixed` elle ne réservait aucune hauteur : seul un `pb-12` posé sur
|
||||
* la page compensait, et il était trop court d'une quarantaine de pixels.
|
||||
* Elle recouvrait donc la dernière ligne du tableau ET la barre de
|
||||
* défilement horizontale — d'où l'impression qu'aucun ascenseur n'existait.
|
||||
*
|
||||
* Le `left-[264px]` était en prime calé sur une barre latérale dépliée,
|
||||
* alors qu'elle est repliée par défaut (64 px) : 200 px de vide à gauche.
|
||||
* En flux, la grille cède exactement la hauteur nécessaire et il n'y a
|
||||
* plus aucune valeur magique à tenir en phase.
|
||||
* Dans le flux, plus en `fixed` : la grille cède exactement la hauteur
|
||||
* nécessaire, sans recouvrir la dernière ligne ni l'ascenseur horizontal.
|
||||
*/
|
||||
className="shrink-0 px-4 py-2.5 flex flex-wrap justify-between items-center gap-x-4 gap-y-2 shadow-sm border rounded-xl transition-colors bg-slate-100 dark:bg-slate-800"
|
||||
style={{
|
||||
borderColor: hasDrafts ? "rgba(234, 179, 8, 0.5)" : "var(--border-strong)",
|
||||
}}
|
||||
className="shrink-0 px-4 py-2.5 flex flex-wrap justify-between items-center gap-x-6 gap-y-2 rounded-xl border bg-[var(--bg-surface)] shadow-[var(--shadow-sm)]"
|
||||
style={{ borderColor: hasDrafts ? "var(--accent-warning)" : "var(--border-strong)" }}
|
||||
>
|
||||
<div className="flex items-center bg-white dark:bg-slate-900 shadow-sm border border-slate-200 dark:border-slate-800 rounded-full px-1.5 py-1.5 h-10">
|
||||
<button
|
||||
onClick={handleReset}
|
||||
className="w-7 h-7 flex items-center justify-center text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors rounded-full"
|
||||
title="Réinitialiser la page"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<div className="w-px h-4 bg-slate-200 dark:bg-slate-700 mx-1" />
|
||||
|
||||
<button
|
||||
onClick={() => handleSnapshot()}
|
||||
disabled={isSavingSnapshot}
|
||||
className="w-7 h-7 flex items-center justify-center text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors rounded-full disabled:opacity-50"
|
||||
title="Prendre un snapshot de la session"
|
||||
>
|
||||
{isSavingSnapshot ? <Loader2 className="w-4 h-4 animate-spin" /> : <Camera className="w-4 h-4" />}
|
||||
</button>
|
||||
|
||||
{hasDrafts && (
|
||||
<>
|
||||
<div className="w-px h-4 bg-slate-200 dark:bg-slate-700 mx-1" />
|
||||
<span className="ml-1 px-3 h-7 flex items-center justify-center rounded-full text-[11px] font-black tracking-wide text-[#b45309] dark:text-[#78350f] bg-[#fdf08a] hover:bg-[#fde047] transition-colors border border-[#fde047]/50 shadow-sm uppercase">
|
||||
{count} MODIF.
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-12 items-center">
|
||||
<div className="flex flex-wrap items-center gap-x-8 gap-y-1">
|
||||
<Stat label="Produits actifs" value={fmtEntier(summary.totalRows)} sub={summary.totalProducts !== summary.totalRows ? `sur ${fmtEntier(summary.totalProducts)}` : undefined} subColor="var(--text-muted)" />
|
||||
<Stat label="Quantités vendues (12 mois)" value={fmtEntier(summary.totalQuantite)} />
|
||||
<Stat label="Chiffre d'affaires" value={fmtEur0(summary.totalCa)} />
|
||||
<Stat
|
||||
label="Nombre de Produits"
|
||||
value={summary.totalProducts.toLocaleString("fr-FR")}
|
||||
/>
|
||||
<Stat
|
||||
label="Volume Total Vendu"
|
||||
value={Math.round(summary.totalQuantite).toLocaleString("fr-FR")}
|
||||
/>
|
||||
<Stat
|
||||
label="CA Global Généré"
|
||||
value={summary.totalCa.toLocaleString("fr-FR", { style: "currency", currency: "EUR", maximumFractionDigits: 0 })}
|
||||
/>
|
||||
<Stat
|
||||
label="Taux de Marge Moyen"
|
||||
value={`${summary.tauxMargeGlobal.toFixed(1)}%`}
|
||||
sub={summary.totalMarge.toLocaleString("fr-FR", { style: "currency", currency: "EUR", maximumFractionDigits: 0 })}
|
||||
label="Marge"
|
||||
value={fmtEur0(summary.totalMarge)}
|
||||
sub={`${fmtDecimal1(summary.tauxMargeGlobal)} %`}
|
||||
subColor={couleurMarge(summary.tauxMargeGlobal)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-3 items-center">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{isAdmin && <SyncQlikButton codeFournisseur={supplierCode} lastUpdate={lastQlikUpdate} />}
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="btn-action btn-action-secondary flex items-center gap-1.5">
|
||||
Export Excel
|
||||
<ChevronDown className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<Button variant="outline" disabled={rows.length === 0 || enCours !== null}>
|
||||
{enCours ? <Loader2 className="animate-spin" /> : <Download />}
|
||||
Exporter
|
||||
<ChevronDown className="opacity-60" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-64">
|
||||
<DropdownMenuContent align="end" className="w-80">
|
||||
<DropdownMenuLabel className="text-xs font-medium text-[var(--text-secondary)]">Fichier d'import des gammes</DropdownMenuLabel>
|
||||
<DropdownMenuItem
|
||||
onClick={async () => {
|
||||
const currentState = useGridStore.getState();
|
||||
const currentDrafts = currentState.draftChanges;
|
||||
const currentRows = currentState.rows;
|
||||
|
||||
const modifiedRows = currentRows.filter(r => {
|
||||
const currentGamme = currentDrafts[r.codein] ?? r.codeGamme;
|
||||
return currentGamme !== r.codeGammeInit;
|
||||
});
|
||||
|
||||
if (modifiedRows.length === 0) {
|
||||
alert("Aucun changement détecté par rapport à l'état initial.");
|
||||
return;
|
||||
}
|
||||
|
||||
const changes = modifiedRows.map(r => ({
|
||||
codein: r.codein,
|
||||
gtin: r.gtin,
|
||||
codeFournisseur: r.codeFournisseur,
|
||||
gamme: (currentDrafts[r.codein] ?? r.codeGamme) as string,
|
||||
}));
|
||||
|
||||
const nomFournisseur = modifiedRows[0].nomFournisseur;
|
||||
|
||||
// Auto-save snapshot for history
|
||||
await handleSnapshot(`Export ${nomFournisseur} — ${new Date().toLocaleTimeString()}`, "export");
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/export/modified-gammes", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ nomFournisseur, changes }),
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error("Erreur lors de l'export");
|
||||
|
||||
const blob = await res.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `Modifications_Gammes_${nomFournisseur.replace(/\s+/g, "_")}_${new Date().toISOString().slice(0, 10)}.xlsx`;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("Une erreur s'est produite lors de l'export Excel.");
|
||||
}
|
||||
}}
|
||||
className="cursor-pointer"
|
||||
onSelect={() => lancer("modifs", async () => {
|
||||
if (lignesModifiees().length === 0) return false;
|
||||
const nom = lignesModifiees()[0].nomFournisseur;
|
||||
// Copie dans l'Historique, onglet « Exports »
|
||||
await handleSnapshot(`Export ${nom} — ${new Date().toLocaleString("fr-FR", { dateStyle: "short", timeStyle: "short" })}`, "export");
|
||||
return exporterFichierGammes(true);
|
||||
}, "Aucune gamme n'a été modifiée par rapport à FF.")}
|
||||
>
|
||||
<FileSpreadsheet />
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">Seulement les changements</span>
|
||||
<span className="text-xs text-muted-foreground">Exporter uniquement les gammes modifiées</span>
|
||||
<span className="font-medium">Gammes modifiées seulement</span>
|
||||
<span className="text-xs text-[var(--text-muted)]">Les produits dont la gamme a changé</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={async () => {
|
||||
const currentState = useGridStore.getState();
|
||||
const currentDrafts = currentState.draftChanges;
|
||||
const currentRows = currentState.rows;
|
||||
|
||||
if (currentRows.length === 0) {
|
||||
alert("Aucune donnée à exporter.");
|
||||
return;
|
||||
}
|
||||
|
||||
const nomFournisseur = currentRows[0].nomFournisseur;
|
||||
|
||||
// Toutes les lignes au format Excel (CODE FOURNISSEUR, GENCOD, GAMME)
|
||||
const changes = currentRows.map(r => ({
|
||||
codein: r.codein,
|
||||
gtin: r.gtin,
|
||||
codeFournisseur: r.codeFournisseur,
|
||||
gamme: (currentDrafts[r.codein] ?? r.codeGamme) as string,
|
||||
}));
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/export/modified-gammes", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ nomFournisseur, changes }),
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error("Erreur lors de l'export");
|
||||
|
||||
const blob = await res.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `Export_Complet_${nomFournisseur.replace(/\s+/g, "_")}_${new Date().toISOString().slice(0, 10)}.xlsx`;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("Une erreur s'est produite lors de l'export Excel.");
|
||||
}
|
||||
}}
|
||||
className="cursor-pointer"
|
||||
onSelect={() => lancer("complet", () => exporterFichierGammes(false), "Aucun produit à exporter.")}
|
||||
>
|
||||
<FileSpreadsheet />
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">Export complet</span>
|
||||
<span className="text-xs text-muted-foreground">Exporter toutes les lignes du fournisseur</span>
|
||||
<span className="font-medium">Toutes les gammes</span>
|
||||
<span className="text-xs text-[var(--text-muted)]">Tous les produits du fournisseur</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuLabel className="text-xs font-medium text-[var(--text-secondary)]">Documents de travail</DropdownMenuLabel>
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
onSelect={() => lancer("tous", () => exporterTousProduits(nomFournisseur), "Aucun produit à exporter.")}
|
||||
>
|
||||
<Table2 />
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">Tableau complet (Excel)</span>
|
||||
<span className="text-xs text-[var(--text-muted)]">Gamme avant / après et chiffres sur 12 mois</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
onSelect={() => lancer("gammeA", exporterGammeA, "Aucun produit en gamme A.")}
|
||||
>
|
||||
<FileSpreadsheet />
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">Liste des produits en gamme A (Excel)</span>
|
||||
<span className="text-xs text-[var(--text-muted)]">Code-barres, référence, libellé, magasins</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
onSelect={() => lancer("pdf", () => imprimerPdf(nomFournisseur), "Aucun produit à imprimer.")}
|
||||
>
|
||||
<FileText />
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">Tableau imprimable (PDF)</span>
|
||||
<span className="text-xs text-[var(--text-muted)]">Mise en page paysage</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="cursor-pointer" onSelect={() => { void handleSnapshot(); }}>
|
||||
<History />
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">Garder une copie dans l'Historique</span>
|
||||
<span className="text-xs text-[var(--text-muted)]">Pour reprendre cette session plus tard</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={!hasDrafts || isPending}
|
||||
className="btn-action btn-action-primary"
|
||||
>
|
||||
{isPending ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : saveStatus === "success" ? (
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
) : saveStatus === "error" ? (
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
) : null}
|
||||
{isPending ? "Validation..." : "Valider"}
|
||||
</button>
|
||||
{hasDrafts && (
|
||||
<Button variant="ghost" onClick={handleReset} disabled={isPending}>
|
||||
<RotateCcw /> Annuler
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={handleSave} disabled={!hasDrafts || isPending}>
|
||||
{isPending ? <Loader2 className="animate-spin" /> : <Save />}
|
||||
{isPending
|
||||
? "Enregistrement…"
|
||||
: hasDrafts
|
||||
? `Enregistrer ${count} modification${count > 1 ? "s" : ""}`
|
||||
: "Aucune modification"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<SuccessModal
|
||||
isOpen={modal.isOpen}
|
||||
onClose={() => setModal(prev => ({ ...prev, isOpen: false }))}
|
||||
title={modal.title}
|
||||
message={modal.message}
|
||||
variant={modal.variant}
|
||||
action={modal.action}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Mémoïsé : ses props sont stables, il n'a donc pas à se redessiner quand le
|
||||
* parent change d'état (sélection, progression du chargement…).
|
||||
*/
|
||||
export const FloatingSummaryBar = React.memo(FloatingSummaryBarInner);
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { GammeCode } from "@/types/grid";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { CLASSES_SANS_GAMME, GAMMES, trouverGamme } from "@/lib/gammes";
|
||||
|
||||
interface GammeSelectProps {
|
||||
value: GammeCode | null;
|
||||
@@ -9,37 +10,38 @@ interface GammeSelectProps {
|
||||
onChange: (gamme: GammeCode) => void;
|
||||
}
|
||||
|
||||
const GAMME_STYLES: Record<string, string> = {
|
||||
A: "border-[1px] border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/20 dark:text-emerald-400",
|
||||
B: "border-[1px] border-blue-500/30 bg-blue-500/10 text-blue-700 dark:border-blue-500/30 dark:bg-blue-500/20 dark:text-blue-400",
|
||||
C: "border-[1px] border-amber-500/30 bg-amber-500/10 text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/20 dark:text-amber-400",
|
||||
Y: "border-[1px] border-violet-500/30 bg-violet-500/10 text-violet-700 dark:border-violet-500/30 dark:bg-violet-500/20 dark:text-violet-400",
|
||||
Z: "border-[1px] border-rose-500/30 bg-rose-500/10 text-rose-700 dark:border-rose-500/30 dark:bg-rose-500/20 dark:text-rose-400",
|
||||
Aucune: "border-[1px] border-slate-500/30 bg-slate-500/10 text-slate-700 dark:border-slate-500/30 dark:bg-slate-500/20 dark:text-slate-400",
|
||||
};
|
||||
|
||||
/**
|
||||
* Choix de la gamme dans une ligne de la Grille.
|
||||
*
|
||||
* La case affiche la lettre (la colonne est étroite) mais la liste déroulante
|
||||
* donne le sens de chaque gamme (« A — Cœur », « Z — Sortie »…) : une liste
|
||||
* native transparente est posée sur la pastille.
|
||||
*/
|
||||
export function GammeSelect({ value, isDraft, onChange }: GammeSelectProps) {
|
||||
const displayValue = (!value || value.trim() === "") ? "Aucune" : value;
|
||||
const gamme = trouverGamme(value);
|
||||
|
||||
return (
|
||||
<select
|
||||
value={displayValue}
|
||||
onChange={(e) => onChange(e.target.value as GammeCode)}
|
||||
<div
|
||||
className={cn(
|
||||
"w-full text-xs font-bold rounded-lg py-1.5 px-2 outline-none cursor-pointer shadow-sm transition-all text-center",
|
||||
"focus:ring-2 focus:ring-brand-500/20",
|
||||
GAMME_STYLES[displayValue] || "border-[1px] border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-500",
|
||||
isDraft && "shadow-[0_0_8px_rgba(251,191,36,0.3)] border-amber-400/50"
|
||||
"relative w-full rounded-lg border py-1.5 px-2 text-center text-xs font-bold shadow-sm",
|
||||
gamme ? gamme.classes : CLASSES_SANS_GAMME,
|
||||
isDraft && "ring-2 ring-[var(--accent-warning)]/60",
|
||||
)}
|
||||
title={gamme ? `${gamme.code} — ${gamme.nom} : ${gamme.description}` : "Aucune gamme"}
|
||||
>
|
||||
<option value="Aucune" disabled={displayValue !== "Aucune" && displayValue !== ""}>
|
||||
{displayValue === "Aucune" || displayValue === "" ? "— (Aucune)" : "—"}
|
||||
</option>
|
||||
<option value="A">A</option>
|
||||
<option value="B">B</option>
|
||||
<option value="C">C</option>
|
||||
<option value="Y">Y</option>
|
||||
<option value="Z">Z</option>
|
||||
</select>
|
||||
<span aria-hidden>{gamme ? gamme.code : "—"}</span>
|
||||
<select
|
||||
aria-label="Gamme du produit"
|
||||
value={gamme ? gamme.code : ""}
|
||||
onChange={(e) => onChange(e.target.value as GammeCode)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
|
||||
>
|
||||
<option value="" disabled>— Aucune gamme</option>
|
||||
{GAMMES.map((g) => (
|
||||
<option key={g.code} value={g.code}>{g.code} — {g.nom}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,18 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useRef, useState, useTransition } from "react";
|
||||
import { useEffect, useRef, useState } 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 { useGridStore } from "@/features/grid/store/use-grid-store";
|
||||
import { useSaveDrafts } from "@/features/grid/hooks/use-save-drafts";
|
||||
import type { ProductRow } from "@/types/grid";
|
||||
import { CheckCircle, AlertCircle, Loader2, RefreshCw } from "lucide-react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { AlertCircle, Loader2, RefreshCw } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { nomMagasin } from "@/lib/magasins";
|
||||
|
||||
import { useSearchParams, useRouter, usePathname } from "next/navigation";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import type { GridFilters } from "@/types/grid";
|
||||
|
||||
interface GridClientProps {
|
||||
@@ -22,6 +21,8 @@ interface GridClientProps {
|
||||
magasins: { code: string; nom: string }[];
|
||||
magasin: string;
|
||||
filters: Pick<GridFilters, "code1" | "code2" | "code3">;
|
||||
/** Calculé côté serveur : les droits ne changent plus d'un rendu à l'autre. */
|
||||
isAdmin: boolean;
|
||||
}
|
||||
|
||||
type GridRowsStreamMessage =
|
||||
@@ -34,14 +35,14 @@ type GridRowsStreamMessage =
|
||||
function MetricPill({ label, value, accent = false }: { label: string; value: string; accent?: boolean }) {
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-start px-2.5 py-1 rounded-lg shrink-0"
|
||||
className="flex flex-col items-start px-3 py-1.5 rounded-lg shrink-0"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)" }}
|
||||
>
|
||||
<span className="text-[8.5px] font-semibold uppercase tracking-wider leading-none mb-1" style={{ color: "var(--text-muted)" }}>
|
||||
<span className="text-xs leading-none mb-1" style={{ color: "var(--text-muted)" }}>
|
||||
{label}
|
||||
</span>
|
||||
<span
|
||||
className="text-[12px] font-bold leading-none tabular-nums max-w-[160px] truncate"
|
||||
className="text-sm font-semibold leading-none tabular-nums max-w-[180px] truncate"
|
||||
style={{ color: accent ? "var(--accent)" : "var(--text-primary)" }}
|
||||
title={value}
|
||||
>
|
||||
@@ -51,30 +52,22 @@ function MetricPill({ label, value, accent = false }: { label: string; value: st
|
||||
);
|
||||
}
|
||||
|
||||
export function GridClient({ codeFournisseur, nomFournisseur, fournisseurs, magasins, magasin, filters }: GridClientProps) {
|
||||
const { data: session } = useSession();
|
||||
const isAdmin = (session?.user as { role?: string } | undefined)?.role === "admin";
|
||||
export function GridClient({ codeFournisseur, nomFournisseur, fournisseurs, magasins, magasin, isAdmin }: GridClientProps) {
|
||||
const setRows = useGridStore((s) => s.setRows);
|
||||
const rows = useGridStore((s) => s.rows);
|
||||
// Seul le nombre de lignes sert ici : un abonnement au tableau entier
|
||||
// redessinait toute la page à chaque modification de gamme.
|
||||
const nbRows = useGridStore((s) => s.rows.length);
|
||||
const setActiveGridQuery = useGridStore((s) => s.setActiveGridQuery);
|
||||
const setFilter = useGridStore((s) => s.setFilter);
|
||||
const setCode3Filter = useGridStore((s) => s.setCode3Filter);
|
||||
const setActiveMagasin = useGridStore((s) => s.setActiveMagasin);
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const [selectedCodeins, setSelectedCodeins] = useState<string[]>([]);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [saveStatus, setSaveStatus] = useState<"idle" | "success" | "error">("idle");
|
||||
const [isLoadingRows, setIsLoadingRows] = useState(false);
|
||||
const [rowsLoaded, setRowsLoaded] = useState(0);
|
||||
const [totalRows, setTotalRows] = useState<number | null>(null);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const [showStartOverlay, setShowStartOverlay] = useState(false);
|
||||
|
||||
const visibleCodeins = useMemo(() => rows.map(r => r.codein), [rows]);
|
||||
const { save, hasDrafts, count } = useSaveDrafts(magasin, visibleCodeins);
|
||||
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
|
||||
@@ -101,7 +94,13 @@ export function GridClient({ codeFournisseur, nomFournisseur, fournisseurs, maga
|
||||
}
|
||||
}, [codeFournisseur, setFilter, setCode3Filter, isMounted]);
|
||||
|
||||
const refreshToken = searchParams.get("_refresh");
|
||||
// Rechargement forcé (bouton « Rafraîchir », fin de synchro Qlik) : demandé via
|
||||
// le store, pas via l'URL. On retient la dernière demande déjà servie pour ne
|
||||
// pas re-forcer le recalcul serveur à chaque remontage ou changement de filtre.
|
||||
const refreshRequest = useGridStore((s) => s.refreshRequest);
|
||||
const requestRefresh = useGridStore((s) => s.requestRefresh);
|
||||
const servedRefreshRef = useRef(refreshRequest);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMounted) return;
|
||||
|
||||
@@ -109,20 +108,59 @@ export function GridClient({ codeFournisseur, nomFournisseur, fournisseurs, maga
|
||||
const params = new URLSearchParams();
|
||||
params.set("fournisseur", codeFournisseur);
|
||||
params.set("magasin", magasin || "TOTAL");
|
||||
// `code3` n'est volontairement pas transmis : le serveur ignore ce filtre
|
||||
// (getProductRows ne s'en sert pas) et la Grille l'applique en local. Le
|
||||
// faire voyager relançait un chargement complet à chaque case cochée.
|
||||
if (filters.code1) params.set("code1", filters.code1);
|
||||
if (filters.code2) params.set("code2", filters.code2);
|
||||
if (refreshToken) params.set("refresh", "1");
|
||||
// Les filtres de nomenclature (code1/code2/code3) ne sont pas transmis : le
|
||||
// serveur ne s'en sert pas et la Grille les applique en local. Les faire
|
||||
// voyager relançait un chargement complet à chaque changement.
|
||||
const forceRefresh = refreshRequest !== servedRefreshRef.current;
|
||||
if (forceRefresh) params.set("refresh", "1");
|
||||
|
||||
let accumulatedRows: ProductRow[] = [];
|
||||
setRows([]);
|
||||
const cle = `${codeFournisseur}:${magasin || "TOTAL"}`;
|
||||
const { rowsMeta, rows: lignesEnMemoire, setRowsMeta } = useGridStore.getState();
|
||||
|
||||
// Retour sur la Grille (même fournisseur, même magasin, chargée il y a
|
||||
// moins de 10 min) : les lignes sont encore en mémoire, rien à retélécharger.
|
||||
if (!forceRefresh && rowsMeta?.key === cle && lignesEnMemoire.length > 0
|
||||
&& Date.now() - rowsMeta.loadedAt < 10 * 60 * 1000) {
|
||||
setRowsLoaded(lignesEnMemoire.length);
|
||||
setTotalRows(lignesEnMemoire.length);
|
||||
setIsLoadingRows(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Changement de magasin (ou rechargement) sur le même fournisseur : la
|
||||
// Grille reste affichée — les lignes portent déjà le détail par magasin,
|
||||
// la bascule est immédiate — et les chiffres complétés pour ce magasin
|
||||
// remplacent l'affichage d'un bloc, une fois reçus.
|
||||
const memeFournisseur = rowsMeta?.key.startsWith(`${codeFournisseur}:`) === true && lignesEnMemoire.length > 0;
|
||||
|
||||
const accumulatedRows: ProductRow[] = [];
|
||||
let lastFlush = 0;
|
||||
if (!memeFournisseur) {
|
||||
setRows([]);
|
||||
// Les lignes vont être remplacées : tant que ce chargement n'est pas
|
||||
// terminé, elles ne correspondent plus à aucune clé.
|
||||
setRowsMeta(null);
|
||||
}
|
||||
setRowsLoaded(0);
|
||||
setTotalRows(null);
|
||||
setLoadError(null);
|
||||
setIsLoadingRows(true);
|
||||
setShowStartOverlay(true);
|
||||
|
||||
// Chaque mise à jour du store reconstruit tout le tableau (index, tri,
|
||||
// filtres, compteurs) : la faire à chaque paquet de 150 lignes rendait le
|
||||
// chargement quadratique. On regroupe donc les paquets et on ne pousse les
|
||||
// lignes que toutes les FLUSH_MS (et une dernière fois à la fin).
|
||||
const FLUSH_MS = 300;
|
||||
// Les lignes déjà poussées dans le store ne doivent plus bouger : on lui
|
||||
// passe une copie, et on continue d'accumuler dans le tableau privé.
|
||||
const flush = (loaded: number, total: number | null, final = false) => {
|
||||
setRowsLoaded(loaded);
|
||||
setTotalRows(total);
|
||||
lastFlush = Date.now();
|
||||
// Même fournisseur : on garde les lignes affichées jusqu'au bout.
|
||||
if (memeFournisseur && !final) return;
|
||||
setRows(final ? accumulatedRows : accumulatedRows.slice());
|
||||
};
|
||||
|
||||
async function loadRows() {
|
||||
try {
|
||||
@@ -137,6 +175,9 @@ export function GridClient({ codeFournisseur, nomFournisseur, fournisseurs, maga
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = "";
|
||||
let loaded = 0;
|
||||
let total: number | null = null;
|
||||
let pending = false;
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
@@ -150,18 +191,27 @@ export function GridClient({ codeFournisseur, nomFournisseur, fournisseurs, maga
|
||||
if (!line.trim()) continue;
|
||||
const message = JSON.parse(line) as GridRowsStreamMessage;
|
||||
if (message.type === "chunk") {
|
||||
accumulatedRows = accumulatedRows.concat(message.rows);
|
||||
setRows(accumulatedRows);
|
||||
setRowsLoaded(message.loaded);
|
||||
setTotalRows(message.total);
|
||||
for (const row of message.rows) accumulatedRows.push(row);
|
||||
loaded = message.loaded;
|
||||
total = message.total;
|
||||
pending = true;
|
||||
} else if (message.type === "done") {
|
||||
setRowsLoaded(message.loaded);
|
||||
setTotalRows(message.total);
|
||||
loaded = message.loaded;
|
||||
total = message.total;
|
||||
} else if (message.type === "error") {
|
||||
throw new Error(message.error);
|
||||
}
|
||||
}
|
||||
|
||||
if (pending && Date.now() - lastFlush >= FLUSH_MS) {
|
||||
flush(loaded, total);
|
||||
pending = false;
|
||||
}
|
||||
}
|
||||
|
||||
flush(loaded, total, true);
|
||||
setRowsMeta({ key: cle, loadedAt: Date.now() });
|
||||
if (forceRefresh) servedRefreshRef.current = refreshRequest;
|
||||
} catch (error) {
|
||||
if (!controller.signal.aborted) {
|
||||
setLoadError(error instanceof Error ? error.message : "Erreur de chargement");
|
||||
@@ -176,7 +226,7 @@ export function GridClient({ codeFournisseur, nomFournisseur, fournisseurs, maga
|
||||
loadRows();
|
||||
|
||||
return () => controller.abort();
|
||||
}, [codeFournisseur, magasin, filters.code1, filters.code2, refreshToken, setRows, isMounted]);
|
||||
}, [codeFournisseur, magasin, refreshRequest, setRows, isMounted]);
|
||||
|
||||
// Synchroniser le magasin actif depuis la prop URL (changement de magasin sans rechargement)
|
||||
useEffect(() => {
|
||||
@@ -184,111 +234,83 @@ export function GridClient({ codeFournisseur, nomFournisseur, fournisseurs, maga
|
||||
setActiveMagasin(magasin || "TOTAL");
|
||||
}, [magasin, setActiveMagasin, isMounted]);
|
||||
|
||||
const handleSave = () => {
|
||||
startTransition(async () => {
|
||||
const result = await save();
|
||||
setSaveStatus(result.success ? "success" : "error");
|
||||
setTimeout(() => setSaveStatus("idle"), 3000);
|
||||
});
|
||||
};
|
||||
|
||||
// Force le rechargement des données depuis le serveur en ignorant le cache
|
||||
// 10 min : on change le paramètre URL `_refresh`, ce qui relance le fetch
|
||||
// avec `refresh=1` (→ forceRefresh) et remonte l'état serveur à jour (INIT).
|
||||
// 10 min (`refresh=1` → forceRefresh) et remonte l'état serveur à jour (INIT).
|
||||
const handleForceRefresh = () => {
|
||||
if (isLoadingRows) return;
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set("_refresh", String(Date.now()));
|
||||
router.replace(`${pathname}?${params.toString()}`);
|
||||
requestRefresh();
|
||||
};
|
||||
|
||||
if (!isMounted) {
|
||||
return <div className="p-8 text-center animate-pulse text-muted italic">Initialisation de la grille...</div>;
|
||||
return <div className="p-8 text-center text-sm text-[var(--text-secondary)]">Préparation de la grille…</div>;
|
||||
}
|
||||
|
||||
const activeStoreNom = magasins.find(m => m.code === magasin)?.nom || "National (Total)";
|
||||
const nbReferences = totalRows ?? nbRows;
|
||||
const progression = totalRows ? Math.round((rowsLoaded / totalRows) * 100) : null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full space-y-3 min-h-0">
|
||||
{/* Header — chrome raffiné (eyebrow teal + fournisseur héro + pastilles métriques) */}
|
||||
<header className="shrink-0 flex items-center justify-between gap-4 pb-2.5" style={{ borderBottom: "1px solid var(--border)" }}>
|
||||
<div className="flex items-center gap-3.5 min-w-0">
|
||||
<div
|
||||
className="h-10 w-[3px] rounded-full shrink-0"
|
||||
style={{ background: "linear-gradient(to bottom, var(--accent), var(--accent-success))" }}
|
||||
/>
|
||||
<header className="shrink-0 flex flex-wrap items-center justify-between gap-3 pb-3 border-b border-[var(--border)]">
|
||||
<div className="flex items-center gap-4 min-w-0">
|
||||
<div className="min-w-0">
|
||||
<div className="text-[10px] font-bold uppercase tracking-[0.18em] leading-none mb-1.5" style={{ color: "var(--accent)" }}>
|
||||
Révision d'assortiment
|
||||
</div>
|
||||
<h1 className="text-[19px] font-bold tracking-tight truncate leading-none" style={{ color: "var(--text-primary)" }}>
|
||||
<p className="text-[13px] text-[var(--text-secondary)]">Révision d'assortiment</p>
|
||||
<h1 className="text-xl font-bold tracking-tight truncate text-[var(--text-primary)]" title={nomFournisseur}>
|
||||
{nomFournisseur}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="hidden md:flex items-center gap-2 ml-1 pl-3 shrink-0" style={{ borderLeft: "1px solid var(--border)" }}>
|
||||
<MetricPill label="Magasin" value={activeStoreNom} />
|
||||
<MetricPill label="Références" value={(totalRows ?? rows.length).toLocaleString("fr-FR")} accent />
|
||||
<div className="hidden md:flex items-center gap-2 pl-4 shrink-0 border-l border-[var(--border)]">
|
||||
<MetricPill label="Magasin" value={nomMagasin(magasin)} />
|
||||
<MetricPill label="Produits" value={nbReferences.toLocaleString("fr-FR")} accent />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2.5 shrink-0">
|
||||
{(isLoadingRows || loadError) && (
|
||||
<div
|
||||
className="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-semibold tabular-nums"
|
||||
style={{
|
||||
background: loadError ? "var(--accent-error-bg)" : "var(--accent-bg)",
|
||||
border: `1px solid ${loadError ? "var(--accent-error)" : "var(--accent-border)"}`,
|
||||
color: loadError ? "var(--accent-error)" : "var(--accent)",
|
||||
}}
|
||||
>
|
||||
{isLoadingRows && <Loader2 className="w-3.5 h-3.5 animate-spin" />}
|
||||
{loadError
|
||||
? loadError
|
||||
: totalRows
|
||||
? `${rowsLoaded.toLocaleString("fr-FR")} / ${totalRows.toLocaleString("fr-FR")}`
|
||||
: "Chargement…"}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{loadError && (
|
||||
<span className="flex items-center gap-2 rounded-lg border px-3 py-1.5 text-[13px] font-medium border-[var(--accent-error)] bg-[var(--accent-error-bg)] text-[var(--accent-error)]">
|
||||
<AlertCircle className="h-4 w-4" /> {loadError}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleForceRefresh}
|
||||
disabled={isLoadingRows}
|
||||
title="Forcer le rafraîchissement — recharge les données depuis le serveur en ignorant le cache (met à jour la colonne INIT)"
|
||||
className="flex items-center gap-2 px-3 h-9 text-[13px] font-semibold rounded-xl disabled:opacity-50 transition-all hover:brightness-110 active:scale-[0.97]"
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}
|
||||
title="Recharger les données depuis le serveur (gammes FF à jour comprises)"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${isLoadingRows ? "animate-spin" : ""}`} />
|
||||
<span className="hidden sm:inline">Rafraîchir</span>
|
||||
</button>
|
||||
<RefreshCw className={isLoadingRows ? "animate-spin" : undefined} />
|
||||
Actualiser
|
||||
</Button>
|
||||
<div id="grid-toolbar-actions"></div>
|
||||
{isAdmin && <ExportDropdown nomFournisseur={nomFournisseur} />}
|
||||
{isAdmin && hasDrafts && (
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isPending}
|
||||
className="flex items-center gap-2 px-4 h-9 text-white text-[13px] font-semibold rounded-xl disabled:opacity-60 transition-all hover:brightness-110 active:scale-[0.97]"
|
||||
style={{
|
||||
background: "linear-gradient(180deg, var(--brand-solid), var(--brand-hover))",
|
||||
boxShadow: "0 4px 12px rgba(16,185,129,0.25), inset 0 1px 1px rgba(255,255,255,0.2)",
|
||||
}}
|
||||
>
|
||||
{isPending ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : saveStatus === "success" ? (
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
) : saveStatus === "error" ? (
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
) : null}
|
||||
{isPending
|
||||
? "Sauvegarde…"
|
||||
: saveStatus === "success"
|
||||
? "Sauvegardé !"
|
||||
: saveStatus === "error"
|
||||
? "Erreur"
|
||||
: `Valider ${count} changement${count > 1 ? "s" : ""}`}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Chargement : bandeau discret, la grille reste utilisable. */}
|
||||
{isLoadingRows && (
|
||||
<div
|
||||
role="status"
|
||||
className="shrink-0 rounded-lg border px-4 py-2 border-[var(--accent-border)] bg-[var(--accent-bg)]"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3 text-[13px] text-[var(--text-primary)]">
|
||||
<span className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin text-[var(--accent)]" />
|
||||
{nbRows > 0
|
||||
? "Mise à jour des chiffres… la grille reste utilisable."
|
||||
: `Chargement des produits de ${nomFournisseur}…`}
|
||||
</span>
|
||||
<span className="tabular-nums text-[var(--text-secondary)]">
|
||||
{totalRows
|
||||
? `${rowsLoaded.toLocaleString("fr-FR")} sur ${totalRows.toLocaleString("fr-FR")}`
|
||||
: "Calcul en cours sur le serveur"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-[var(--bg-elevated)]">
|
||||
<div
|
||||
className={progression == null ? "h-full w-1/3 animate-pulse rounded-full bg-[var(--accent)]" : "h-full rounded-full bg-[var(--accent)] transition-[width] duration-300"}
|
||||
style={progression == null ? undefined : { width: `${progression}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filters */}
|
||||
<div className="shrink-0 print:hidden">
|
||||
<GridFilterBar fournisseurs={fournisseurs} magasins={magasins} />
|
||||
@@ -313,77 +335,8 @@ export function GridClient({ codeFournisseur, nomFournisseur, fournisseurs, maga
|
||||
|
||||
{/* Summary bar */}
|
||||
<div className="print:hidden">
|
||||
<FloatingSummaryBar />
|
||||
<FloatingSummaryBar isAdmin={isAdmin} nomFournisseur={nomFournisseur} />
|
||||
</div>
|
||||
|
||||
{/* Overlay de démarrage premium (Glassmorphism semi-bloquant) */}
|
||||
{showStartOverlay && isLoadingRows && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 backdrop-blur-md bg-slate-950/30 dark:bg-black/40 animate-fade-in">
|
||||
<div
|
||||
className="w-full max-w-md rounded-2xl border p-6 shadow-2xl flex flex-col items-center text-center space-y-5 transition-transform duration-300 transform scale-100"
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.75)",
|
||||
borderColor: "var(--border)",
|
||||
backdropFilter: "blur(20px)",
|
||||
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
|
||||
}}
|
||||
>
|
||||
{/* Header avec logo ou icône animée */}
|
||||
<div className="relative flex items-center justify-center w-16 h-16 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
|
||||
<Loader2 className="w-8 h-8 animate-spin" />
|
||||
<div className="absolute inset-0 rounded-full border border-emerald-500/20 animate-ping duration-1000" />
|
||||
</div>
|
||||
|
||||
{/* Titre et descriptions */}
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-lg font-bold tracking-tight text-emerald-800 dark:text-emerald-400">
|
||||
Flux d'Assortiment en cours
|
||||
</h3>
|
||||
<p className="text-xs text-muted-foreground max-w-[280px] mx-auto animate-pulse" style={{ color: "var(--text-muted)" }}>
|
||||
Chargement progressif et en temps réel des données pour <span className="font-semibold" style={{ color: "var(--text-secondary)" }}>{nomFournisseur}</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Barre de progression dynamique */}
|
||||
<div className="w-full space-y-2">
|
||||
<div className="flex justify-between text-xs font-semibold" style={{ color: "var(--text-secondary)" }}>
|
||||
<span>Progression</span>
|
||||
<span>
|
||||
{totalRows
|
||||
? `${Math.round((rowsLoaded / totalRows) * 100)}%`
|
||||
: `${rowsLoaded.toLocaleString("fr-FR")} réfs`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full h-2 rounded-full overflow-hidden bg-slate-100 dark:bg-slate-800" style={{ border: "1px solid var(--border)" }}>
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-emerald-500 to-teal-500 transition-all duration-300 ease-out rounded-full"
|
||||
style={{
|
||||
width: totalRows ? `${(rowsLoaded / totalRows) * 100}%` : "40%",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[11px] font-medium animate-pulse" style={{ color: "var(--text-muted)" }}>
|
||||
{totalRows
|
||||
? `${rowsLoaded.toLocaleString("fr-FR")} sur ${totalRows.toLocaleString("fr-FR")} références chargées`
|
||||
: `${rowsLoaded.toLocaleString("fr-FR")} références récupérées...`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Boutons d'action */}
|
||||
<div className="w-full pt-2 flex flex-col gap-2">
|
||||
<button
|
||||
onClick={() => setShowStartOverlay(false)}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold text-white bg-emerald-600 hover:bg-emerald-500 active:scale-95 hover:shadow-lg hover:shadow-emerald-500/20 transition-all duration-200"
|
||||
>
|
||||
Explorer les premières données
|
||||
</button>
|
||||
<p className="text-[10px] text-muted italic" style={{ color: "var(--text-muted)" }}>
|
||||
Le chargement continuera en arrière-plan sans bloquer votre navigation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import React, { useMemo } from "react";
|
||||
import { Search, X, RotateCw } from "lucide-react";
|
||||
import { Search, X } from "lucide-react";
|
||||
import { useGridStore } from "@/features/grid/store/use-grid-store";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { trouverGamme } from "@/lib/gammes";
|
||||
|
||||
import { SupplierCombobox } from "./supplier-combobox";
|
||||
import { StoreCombobox } from "./store-combobox";
|
||||
@@ -17,14 +18,13 @@ interface GridFilterBarProps {
|
||||
|
||||
const EMPTY_DRAFT_CHANGES: Record<string, string> = {};
|
||||
|
||||
export function GridFilterBar({ fournisseurs, magasins }: GridFilterBarProps) {
|
||||
function GridFilterBarInner({ fournisseurs, magasins }: GridFilterBarProps) {
|
||||
const filters = useGridStore((s) => s.filters);
|
||||
const setFilter = useGridStore((s) => s.setFilter);
|
||||
const rows = useGridStore((s) => s.rows);
|
||||
const draftChanges = useGridStore((s) => s.filters.codeGamme ? s.draftChanges : EMPTY_DRAFT_CHANGES);
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const [isRefreshing, setIsRefreshing] = React.useState(false);
|
||||
const [searchValue, setSearchValue] = React.useState(filters.search);
|
||||
|
||||
React.useEffect(() => {
|
||||
@@ -104,31 +104,9 @@ export function GridFilterBar({ fournisseurs, magasins }: GridFilterBarProps) {
|
||||
router.replace(`/grid?${params.toString()}`, { scroll: false });
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
setIsRefreshing(true);
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set("_refresh", Date.now().toString());
|
||||
router.replace(`/grid?${params.toString()}`, { scroll: false });
|
||||
// Visual feedback delay
|
||||
setTimeout(() => setIsRefreshing(false), 800);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
{/* Refresh Button */}
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
title="Rafraîchir les données SQL"
|
||||
className={cn(
|
||||
"flex items-center justify-center w-9 h-9 rounded-lg transition-all",
|
||||
"bg-[var(--bg-elevated)] border border-[var(--border)]",
|
||||
"hover:bg-[var(--bg-surface)] hover:text-emerald-500",
|
||||
isRefreshing && "opacity-50"
|
||||
)}
|
||||
>
|
||||
<RotateCw className={cn("w-4 h-4", isRefreshing && "animate-spin")} />
|
||||
</button>
|
||||
|
||||
{/* Supplier Selector */}
|
||||
<SupplierCombobox
|
||||
fournisseurs={fournisseurs}
|
||||
@@ -142,7 +120,6 @@ export function GridFilterBar({ fournisseurs, magasins }: GridFilterBarProps) {
|
||||
magasins={magasins}
|
||||
selectedCode={activeMagasin === "TOTAL" ? null : activeMagasin}
|
||||
onSelect={handleStoreSelect}
|
||||
className="w-[170px] xl:w-[220px]"
|
||||
/>
|
||||
|
||||
{/* Search */}
|
||||
@@ -153,7 +130,8 @@ export function GridFilterBar({ fournisseurs, magasins }: GridFilterBarProps) {
|
||||
/>
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Rechercher (code, désignation...)"
|
||||
placeholder="Rechercher un produit (code, nom…)"
|
||||
aria-label="Rechercher un produit dans la grille"
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
// La croix native de `type="search"` (WebKit/Blink) est masquée :
|
||||
@@ -185,43 +163,36 @@ export function GridFilterBar({ fournisseurs, magasins }: GridFilterBarProps) {
|
||||
const count = value === null ? rows.length : gammeCounts[value] || 0;
|
||||
const isActive = filters.codeGamme === value;
|
||||
|
||||
// Semantic colors for the badge based on Gamme
|
||||
const getBadgeStyles = () => {
|
||||
if (!isActive) return { background: "rgba(0,0,0,0.05)", color: "var(--text-muted)" };
|
||||
switch (value) {
|
||||
case "A": return { background: "rgba(16, 185, 129, 0.15)", color: "rgb(5, 150, 105)" }; // Emerald
|
||||
case "B": return { background: "rgba(59, 130, 246, 0.15)", color: "rgb(37, 99, 235)" }; // Blue
|
||||
case "C": return { background: "rgba(245, 158, 11, 0.15)", color: "rgb(217, 119, 6)" }; // Amber
|
||||
case "Y": return { background: "rgba(139, 92, 246, 0.15)", color: "rgb(109, 40, 217)" }; // Violet
|
||||
case "Z": return { background: "rgba(244, 63, 94, 0.15)", color: "rgb(225, 29, 72)" }; // Rose
|
||||
case "Aucune": return { background: "rgba(100, 116, 139, 0.15)", color: "rgb(71, 85, 105)" }; // Slate
|
||||
default: return { background: "rgba(0,0,0,0.1)", color: "var(--text-primary)" };
|
||||
}
|
||||
};
|
||||
|
||||
const badgeStyles = getBadgeStyles();
|
||||
const gamme = value ? trouverGamme(value) : undefined;
|
||||
const titre = value === null
|
||||
? "Toutes les gammes"
|
||||
: gamme
|
||||
? `${gamme.code} — ${gamme.nom} : ${gamme.description}`
|
||||
: "Produits sans gamme";
|
||||
|
||||
return (
|
||||
<button
|
||||
key={label}
|
||||
onClick={() => setFilter("codeGamme", value)}
|
||||
title={titre}
|
||||
aria-pressed={isActive}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-2.5 py-1 text-[11px] font-semibold rounded-[6px] transition-all duration-200",
|
||||
"flex items-center gap-1.5 px-2.5 py-1 text-[13px] font-semibold rounded-md transition-colors",
|
||||
isActive
|
||||
? "shadow-[0_1px_2px_rgba(0,0,0,0.05)]"
|
||||
: "hover:bg-[var(--bg-surface)] opacity-70 hover:opacity-100"
|
||||
: "hover:bg-[var(--bg-surface)]"
|
||||
)}
|
||||
style={{
|
||||
background: isActive ? "var(--bg-surface)" : "transparent",
|
||||
color: isActive ? "var(--text-primary)" : "var(--text-secondary)",
|
||||
}}
|
||||
>
|
||||
<span>{label}</span>
|
||||
<span
|
||||
className="inline-flex items-center justify-center min-w-[20px] px-1.5 py-0.5 rounded-full text-[9px] font-bold tabular-nums tracking-tight transition-colors"
|
||||
style={badgeStyles}
|
||||
>
|
||||
{count}
|
||||
{gamme ? (
|
||||
<span className={cn("rounded border px-1 text-xs font-bold", gamme.classes)}>{gamme.code}</span>
|
||||
) : null}
|
||||
<span>{value === null ? "Toutes" : gamme ? gamme.nom : "Sans gamme"}</span>
|
||||
<span className="text-xs font-medium tabular-nums text-[var(--text-muted)]">
|
||||
{count.toLocaleString("fr-FR")}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
@@ -233,3 +204,9 @@ export function GridFilterBar({ fournisseurs, magasins }: GridFilterBarProps) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Mémoïsé : ses props sont stables, il n'a donc pas à se redessiner quand le
|
||||
* parent change d'état (sélection, progression du chargement…).
|
||||
*/
|
||||
export const GridFilterBar = React.memo(GridFilterBarInner);
|
||||
@@ -46,6 +46,10 @@ import {
|
||||
NB_MAGASINS_RESEAU,
|
||||
} from "@/features/grid/lib/network-trend";
|
||||
import { TrendSparkline, NetworkLineChart } from "@/features/grid/components/network-charts";
|
||||
import { fmtDecimal1, fmtEntier, fmtEur0, fmtEur2 } from "@/lib/format";
|
||||
import { CLASSES_SANS_GAMME, trouverGamme } from "@/lib/gammes";
|
||||
import { couleurMarge } from "@/lib/marge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface HeatmapGridProps {
|
||||
onSelectionChange?: (codeins: string[]) => void;
|
||||
@@ -94,8 +98,7 @@ function prixMoyenReseau(row: ProductRow): number | null {
|
||||
}
|
||||
|
||||
/** Montant en euros au centime — l'usage sur des prix unitaires. */
|
||||
const fmtEuro2 = (v: number) =>
|
||||
v.toLocaleString("fr-FR", { style: "currency", currency: "EUR", minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
const fmtEuro2 = fmtEur2;
|
||||
|
||||
/**
|
||||
* Prix de vente à montrer pour le magasin consulté.
|
||||
@@ -211,17 +214,13 @@ const GammeCell = React.memo(({ row, isAdmin }: { row: ProductRow; isAdmin?: boo
|
||||
const displayValue = (!effectiveGamme || effectiveGamme.trim() === "") ? "Aucune" : effectiveGamme;
|
||||
|
||||
if (!isAdmin) {
|
||||
const gamme = trouverGamme(displayValue);
|
||||
return (
|
||||
<div className={[
|
||||
"w-full text-xs font-bold rounded-lg py-1.5 px-2 text-center",
|
||||
displayValue === "A" ? "bg-emerald-500/10 text-emerald-700" :
|
||||
displayValue === "B" ? "bg-blue-500/10 text-blue-700" :
|
||||
displayValue === "C" ? "bg-amber-500/10 text-amber-700" :
|
||||
displayValue === "Y" ? "bg-violet-500/10 text-violet-700" :
|
||||
displayValue === "Z" ? "bg-rose-500/10 text-rose-700" :
|
||||
"bg-slate-500/10 text-slate-500"
|
||||
].join(" ")}>
|
||||
{displayValue === "Aucune" ? "—" : displayValue}
|
||||
<div
|
||||
className={cn("w-full rounded-lg border py-1.5 px-2 text-center text-xs font-bold", gamme ? gamme.classes : CLASSES_SANS_GAMME)}
|
||||
title={gamme ? `${gamme.code} — ${gamme.nom} : ${gamme.description}` : "Aucune gamme"}
|
||||
>
|
||||
{gamme ? gamme.code : "—"}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -243,7 +242,133 @@ const GammeCell = React.memo(({ row, isAdmin }: { row: ProductRow; isAdmin?: boo
|
||||
});
|
||||
GammeCell.displayName = "GammeCell";
|
||||
|
||||
import { Cell, Column, Row } from "@tanstack/react-table";
|
||||
/**
|
||||
* En-tête du tableau, mémoïsé : sans cela, chaque événement de défilement
|
||||
* redessinait la trentaine d'en-têtes (tri, redimensionnement…). Il ne change
|
||||
* qu'avec les colonnes, le tri ou les largeurs.
|
||||
*/
|
||||
const GridHeader = React.memo(function GridHeader({ table }: {
|
||||
table: Table<ProductRow>;
|
||||
// Les props suivantes ne sont pas lues directement : elles servent à la
|
||||
// comparaison de React.memo (l'en-tête lit ces états via `table`).
|
||||
columnsKey: string;
|
||||
sorting: SortingState;
|
||||
columnSizing: Record<string, number>;
|
||||
/** Case « tout sélectionner ». */
|
||||
rowSelection: RowSelectionState;
|
||||
data: ProductRow[];
|
||||
}) {
|
||||
return (
|
||||
<thead className="sticky top-0 z-10 block" style={{
|
||||
background: "linear-gradient(to bottom, var(--bg-elevated), var(--bg-surface))",
|
||||
borderBottom: "1px solid var(--border-strong)",
|
||||
}}>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id} className="flex w-full">
|
||||
{(() => {
|
||||
const figesEntete = decalagesFiges(
|
||||
headerGroup.headers.map((h) => ({ id: h.column.id, taille: h.getSize() })),
|
||||
);
|
||||
const dernierFigeEntete = [...figesEntete.keys()].at(-1);
|
||||
return headerGroup.headers.map((header) => {
|
||||
const gaucheEntete = figesEntete.get(header.column.id);
|
||||
const enteteFigee = gaucheEntete !== undefined;
|
||||
const isFlexible = header.column.id === "libelle1" || header.column.id === "libelle3";
|
||||
const isCenter = header.column.id === "totalQuantite" || header.column.id === "totalCa" || header.column.id === "totalMarge" || header.column.id.startsWith("month_") || header.column.id === "gammeInitial" || QLIK_NETWORK_COLUMN_IDS.has(header.column.id) || header.column.id === "prixVente" || header.column.id === "gamme";
|
||||
const size = header.getSize();
|
||||
return (
|
||||
<th
|
||||
key={header.id}
|
||||
className={cn(
|
||||
"px-2 py-2 text-xs font-semibold leading-tight whitespace-nowrap select-none flex items-center transition-colors relative group/header",
|
||||
!enteteFigee && "hover:bg-white/5",
|
||||
)}
|
||||
style={{
|
||||
width: isFlexible ? "100%" : size,
|
||||
flex: isFlexible ? `1 1 ${size}px` : `0 0 ${size}px`,
|
||||
minWidth: size,
|
||||
maxWidth: isFlexible ? "none" : size,
|
||||
color: "var(--text-secondary)",
|
||||
justifyContent: isCenter ? "center" : "flex-start",
|
||||
...(enteteFigee ? {
|
||||
position: "sticky" as const,
|
||||
left: gaucheEntete,
|
||||
zIndex: 2,
|
||||
// Le fond du <thead> est un dégradé translucide : sans
|
||||
// fond propre, les autres intitulés défileraient à
|
||||
// travers l'en-tête figé. On reprend le même dégradé
|
||||
// pour que la bande reste d'un seul tenant.
|
||||
background: "linear-gradient(to bottom, var(--bg-elevated), var(--bg-surface))",
|
||||
borderRight: header.column.id === dernierFigeEntete
|
||||
? "1px solid var(--border-strong)"
|
||||
: undefined,
|
||||
} : {}),
|
||||
}}
|
||||
onClick={header.column.getToggleSortingHandler()}
|
||||
>
|
||||
<div className={`flex items-center gap-1.5 cursor-pointer ${isCenter ? "justify-center w-full" : ""}`}>
|
||||
{flexRender(header.column.columnDef.header, header.getContext())}
|
||||
{header.column.getCanSort() && (
|
||||
<div className="shrink-0 opacity-40">
|
||||
{header.column.getIsSorted() === "asc" ? <ChevronUp className="w-3 h-3 text-emerald-500" />
|
||||
: header.column.getIsSorted() === "desc" ? <ChevronDown className="w-3 h-3 text-emerald-500" />
|
||||
: <ChevronsUpDown className="w-3 h-3" />
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Handle de redimensionnement de la colonne */}
|
||||
{header.column.getCanResize() && (
|
||||
<div
|
||||
onMouseDown={header.getResizeHandler()}
|
||||
onTouchStart={header.getResizeHandler()}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className={`absolute right-0 top-0 h-full w-1.5 cursor-col-resize user-select-none touch-none hover:bg-emerald-500/50 ${header.column.getIsResizing() ? "bg-emerald-500" : ""}`}
|
||||
/>
|
||||
)}
|
||||
</th>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
);
|
||||
});
|
||||
|
||||
/**
|
||||
* Libellés du menu « Colonnes ». Les en-têtes de colonnes sont des fonctions
|
||||
* (deux lignes, infobulles) : le menu affichait leur identifiant technique
|
||||
* (« caReseau », « gammeInitial »…).
|
||||
*/
|
||||
const LIBELLES_COLONNES: Record<string, string> = {
|
||||
codein: "Code article",
|
||||
libelle1: "Désignation",
|
||||
reference: "Référence",
|
||||
gtin: "Code-barres",
|
||||
libelle3: "Famille",
|
||||
caReseau: "CA réseau",
|
||||
qteReseau: "Quantité réseau",
|
||||
nbMagasinsReseau: "Magasins vendeurs (réseau)",
|
||||
tendanceReseau: "Tendance réseau (12 mois)",
|
||||
prixMoyenReseau: "Prix moyen réseau",
|
||||
prixVente: "Prix de vente de nos magasins",
|
||||
caParMagasinReseau: "CA par magasin (réseau)",
|
||||
margePctReseau: "Marge % réseau",
|
||||
totalQuantite: "Total 12 mois",
|
||||
totalCa: "Chiffre d'affaires",
|
||||
totalMarge: "Marge",
|
||||
gammeInitial: "Gamme actuelle (FF)",
|
||||
gamme: "Gamme",
|
||||
};
|
||||
|
||||
function libelleColonne(id: string, header: unknown): string {
|
||||
if (LIBELLES_COLONNES[id]) return LIBELLES_COLONNES[id];
|
||||
if (id.startsWith("month_")) return `Ventes ${formatMonthLabel(id.replace("month_", ""))}`;
|
||||
return typeof header === "string" ? header : id;
|
||||
}
|
||||
|
||||
import { Cell, Column, Row, type Table } from "@tanstack/react-table";
|
||||
import { VirtualItem } from "@tanstack/react-virtual";
|
||||
|
||||
// 2. Composant isolé pour la Ligne Virtuelle
|
||||
@@ -315,7 +440,9 @@ const GridRow = React.memo(({ virtualRow, row, rowHeight, isSelected, columnsKey
|
||||
data-index={virtualRow.index}
|
||||
onClick={() => row.toggleSelected()}
|
||||
className={cn(
|
||||
"absolute w-full flex items-center cursor-pointer transition-all duration-200 group/row",
|
||||
// Pas de `transition-all` : la ligne est positionnée par `transform`
|
||||
// et chaque défilement l'aurait animée pendant 200 ms.
|
||||
"absolute top-0 left-0 w-full flex items-center cursor-pointer transition-[opacity,filter] duration-200 group/row",
|
||||
effectiveGamme === "Z" && "opacity-40 grayscale-[0.5] hover:grayscale-0 hover:opacity-100"
|
||||
)}
|
||||
style={{
|
||||
@@ -343,7 +470,10 @@ const GridRow = React.memo(({ virtualRow, row, rowHeight, isSelected, columnsKey
|
||||
// pas par le voile `bg-white/5` des cellules ordinaires.
|
||||
estFige
|
||||
? (isSelected
|
||||
? "bg-[var(--accent-bg)]"
|
||||
// Teinte de sélection rendue OPAQUE (mélangée au fond) : la
|
||||
// variable --accent-bg est translucide, et les cellules qui
|
||||
// défilent dessous apparaissaient à travers.
|
||||
? "bg-[color-mix(in_srgb,var(--accent)_12%,var(--bg-surface))]"
|
||||
: "bg-[var(--bg-surface)] group-hover/row:bg-[var(--bg-elevated)]")
|
||||
: cn("group-hover/row:bg-white/5", isSelected && "bg-transparent"),
|
||||
)}
|
||||
@@ -480,7 +610,7 @@ function CellDetailModal({ d, activeMagasin, onClose }: { d: CellDetailData; act
|
||||
<span className="text-[22px] font-black tabular-nums leading-none" style={{ color: "var(--text-primary)" }}>
|
||||
{d.qty != null ? Math.round(d.qty).toLocaleString("fr-FR") : "—"}
|
||||
</span>
|
||||
<span className="text-[10px] font-semibold uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Ventes</span>
|
||||
<span className="text-xs font-medium" style={{ color: "var(--text-muted)" }}>Ventes</span>
|
||||
</div>
|
||||
|
||||
{/* Entrées */}
|
||||
@@ -495,7 +625,7 @@ function CellDetailModal({ d, activeMagasin, onClose }: { d: CellDetailData; act
|
||||
<span className="text-[22px] font-black tabular-nums leading-none" style={{ color: hasReceptions ? "rgb(16,185,129)" : "var(--text-primary)" }}>
|
||||
{hasReceptions ? `+${Math.round(d.receptions!).toLocaleString("fr-FR")}` : "—"}
|
||||
</span>
|
||||
<span className="text-[10px] font-semibold uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Entrées</span>
|
||||
<span className="text-xs font-medium" style={{ color: "var(--text-muted)" }}>Entrées</span>
|
||||
</div>
|
||||
|
||||
{/* Stock fin de mois */}
|
||||
@@ -504,7 +634,7 @@ function CellDetailModal({ d, activeMagasin, onClose }: { d: CellDetailData; act
|
||||
<span className="text-[22px] font-black tabular-nums leading-none" style={{ color: "var(--text-primary)" }}>
|
||||
{d.stock != null ? Math.round(d.stock).toLocaleString("fr-FR") : "—"}
|
||||
</span>
|
||||
<span className="text-[10px] font-semibold uppercase tracking-wide text-center" style={{ color: "var(--text-muted)" }}>Stock fin mois</span>
|
||||
<span className="text-xs font-medium text-center" style={{ color: "var(--text-muted)" }}>Stock fin de mois</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -530,7 +660,7 @@ function VentilationParMagasin({ d }: { d: CellDetailData }) {
|
||||
|
||||
return (
|
||||
<div className="mt-3 rounded-xl overflow-hidden" style={{ border: "1px solid var(--border)" }}>
|
||||
<table className="w-full text-[11px]">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bg-elevated)" }}>
|
||||
<th className="text-left px-2.5 py-1.5 font-semibold" style={{ color: "var(--text-secondary)" }}>Magasin</th>
|
||||
@@ -569,7 +699,7 @@ function VentilationParMagasin({ d }: { d: CellDetailData }) {
|
||||
|
||||
// =========================================================================
|
||||
|
||||
export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: HeatmapGridProps) {
|
||||
function HeatmapGridInner({ onSelectionChange, isAdmin, nomFournisseur }: HeatmapGridProps) {
|
||||
// L'abonnement doit être minimal ici ! PAS de draftChanges ni de setDraftGamme.
|
||||
const rows = useGridStore((s) => s.rows);
|
||||
const filters = useGridStore((s) => s.filters);
|
||||
@@ -625,7 +755,10 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
// totaux sont figés sur la fenêtre du serveur, les colonnes doivent l'être
|
||||
// aussi, sinon un mois manque aux cases mais pas au total (cf. months.ts).
|
||||
// Le calcul local ne sert que tant qu'aucune ligne n'est chargée.
|
||||
const MONTHS_12 = useMemo(() => getMonthsFromRows(rows) ?? getLast12Months(), [rows]);
|
||||
// Mémorisé sur sa clé texte : un nouveau tableau à chaque arrivée de lignes
|
||||
// reconstruisait toutes les définitions de colonnes (donc tout le tableau).
|
||||
const monthsKey = useMemo(() => (getMonthsFromRows(rows) ?? getLast12Months()).join(","), [rows]);
|
||||
const MONTHS_12 = useMemo(() => monthsKey.split(","), [monthsKey]);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
@@ -647,28 +780,6 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
setRowSelection({});
|
||||
}, [rows]);
|
||||
|
||||
const prevSelectionRef = useRef<string[]>([]);
|
||||
|
||||
// Propagate selection changes via useEffect to avoid "update during render" error
|
||||
useEffect(() => {
|
||||
if (!onSelectionChange) return;
|
||||
|
||||
const selectedIdxs = Object.keys(rowSelection).filter((k) => rowSelection[k]);
|
||||
const selectedCodeins = selectedIdxs
|
||||
.map((idx) => filteredData[parseInt(idx)]?.codein ?? "")
|
||||
.filter(Boolean);
|
||||
|
||||
// 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);
|
||||
}
|
||||
}, [rowSelection, onSelectionChange, filteredData]);
|
||||
|
||||
const columns = React.useMemo<ColumnDef<ProductRow>[]>(() => [
|
||||
{
|
||||
id: "select",
|
||||
@@ -694,7 +805,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
},
|
||||
{
|
||||
accessorKey: "codein",
|
||||
header: "Code interne",
|
||||
header: "Code article",
|
||||
size: 90,
|
||||
cell: ({ getValue }) => (
|
||||
<CopiableCell
|
||||
@@ -739,7 +850,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
<div
|
||||
key={magasin}
|
||||
title={tooltipTitle}
|
||||
className="px-1.5 py-0.5 rounded-md flex items-center gap-1 text-[10px] font-black border shadow-sm transition-transform hover:scale-110"
|
||||
className="px-1.5 py-0.5 rounded-md flex items-center gap-1 text-xs font-bold border shadow-sm"
|
||||
style={{
|
||||
background: config.bg,
|
||||
borderColor: config.border,
|
||||
@@ -771,7 +882,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
},
|
||||
{
|
||||
accessorKey: "gtin",
|
||||
header: "EAN / GTIN",
|
||||
header: "Code-barres",
|
||||
size: 120,
|
||||
cell: ({ getValue }) => (
|
||||
<CopiableCell
|
||||
@@ -801,13 +912,13 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
id: "caReseau",
|
||||
accessorFn: (row) => valeurTriable(row.caReseau),
|
||||
sortUndefined: "last" as const,
|
||||
header: () => <div className="text-center w-full">CA<br/><span className="text-[9px] opacity-60">Réseau</span></div>,
|
||||
header: () => <div className="text-center w-full" title="Chiffre d'affaires du produit dans les magasins du réseau, sur 12 mois">CA<br/><span className="text-xs font-normal opacity-75">réseau</span></div>,
|
||||
size: 90,
|
||||
cell: ({ row }) => {
|
||||
const val = row.original.caReseau;
|
||||
return (
|
||||
<div className="text-center tabular-nums text-[12px] font-bold text-emerald-600 dark:text-emerald-400">
|
||||
{val != null ? val.toLocaleString("fr-FR", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }) : "-"}
|
||||
{val != null ? fmtEur0(val) : "-"}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
@@ -816,13 +927,13 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
id: "qteReseau",
|
||||
accessorFn: (row) => valeurTriable(row.qteReseau),
|
||||
sortUndefined: "last" as const,
|
||||
header: () => <div className="text-center w-full">Qté<br/><span className="text-[9px] opacity-60">Réseau</span></div>,
|
||||
header: () => <div className="text-center w-full" title="Quantités vendues dans les magasins du réseau, sur 12 mois">Qté<br/><span className="text-xs font-normal opacity-75">réseau</span></div>,
|
||||
size: 80,
|
||||
cell: ({ row }) => {
|
||||
const val = row.original.qteReseau;
|
||||
return (
|
||||
<div className="text-center tabular-nums text-[12px] font-bold" style={{ color: "var(--text-secondary)" }}>
|
||||
{val != null ? Math.round(val).toLocaleString("fr-FR") : "-"}
|
||||
{val != null ? fmtEntier(val) : "-"}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
@@ -831,7 +942,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
id: "nbMagasinsReseau",
|
||||
accessorFn: (row) => valeurTriable(row.nbMagasinsReseau),
|
||||
sortUndefined: "last" as const,
|
||||
header: () => <div className="text-center w-full">Magasins<br/><span className="text-[9px] opacity-60">/ 270</span></div>,
|
||||
header: () => <div className="text-center w-full" title={`Nombre de magasins du réseau (sur ${NB_MAGASINS_RESEAU}) qui vendent ce produit`}>Magasins<br/><span className="text-xs font-normal opacity-75">sur {NB_MAGASINS_RESEAU}</span></div>,
|
||||
size: 80,
|
||||
cell: ({ row }) => {
|
||||
const val = row.original.nbMagasinsReseau;
|
||||
@@ -853,7 +964,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
if (t.nouveau) return Number.POSITIVE_INFINITY;
|
||||
return t.pct ?? Number.NEGATIVE_INFINITY;
|
||||
},
|
||||
header: () => <div className="text-center w-full">Tendance<br/><span className="text-[9px] opacity-60">Réseau · 12 m</span></div>,
|
||||
header: () => <div className="text-center w-full" title="Évolution des ventes du réseau sur 12 mois — cliquer pour le détail">Tendance<br/><span className="text-xs font-normal opacity-75">réseau</span></div>,
|
||||
size: 78,
|
||||
cell: ({ row }) => {
|
||||
const trend = computeNetworkTrend(row.original.qteReseauByMonth, row.original.nbMagReseauByMonth);
|
||||
@@ -884,7 +995,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
// Sous-titre tenu court : les en-têtes ne rognent pas leur texte et
|
||||
// un libellé trop long chevauche la colonne voisine. Le détail
|
||||
// (« CA réseau ÷ quantité ») est dans l'infobulle des cellules.
|
||||
header: () => <div className="text-center w-full">PV moyen<br/><span className="text-[9px] opacity-60">Réseau</span></div>,
|
||||
header: () => <div className="text-center w-full" title="Prix de vente moyen constaté dans le réseau">Prix moyen<br/><span className="text-xs font-normal opacity-75">réseau</span></div>,
|
||||
size: 88,
|
||||
cell: ({ row }: { row: { original: ProductRow } }) => {
|
||||
const val = prixMoyenReseau(row.original);
|
||||
@@ -905,7 +1016,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
id: "prixVente",
|
||||
accessorFn: (row: ProductRow) => valeurTriable(prixVenteAffiche(row, activeMagasin).valeur),
|
||||
sortUndefined: "last" as const,
|
||||
header: () => <div className="text-center w-full">PV<br/><span className="text-[9px] opacity-60">Magasin</span></div>,
|
||||
header: () => <div className="text-center w-full" title="Prix de vente pratiqué dans nos magasins (≠ : prix différents selon le magasin)">Prix vente<br/><span className="text-xs font-normal opacity-75">magasin</span></div>,
|
||||
size: 88,
|
||||
cell: ({ row }: { row: { original: ProductRow } }) => {
|
||||
const { valeur, divergent, detail } = prixVenteAffiche(row.original, activeMagasin);
|
||||
@@ -920,7 +1031,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
{valeur != null ? fmtEuro2(valeur) : "-"}
|
||||
{/* Prix différents d'un magasin à l'autre : le signaler, la
|
||||
cellule ne peut en afficher qu'un. */}
|
||||
{divergent && <span className="text-[10px] font-black" style={{ color: "var(--accent-warning)" }}>≠</span>}
|
||||
{divergent && <span className="text-xs font-bold" style={{ color: "var(--accent-warning)" }}>≠</span>}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
@@ -930,13 +1041,13 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
id: "caParMagasinReseau",
|
||||
accessorFn: (row) => valeurTriable(row.caParMagasinReseau),
|
||||
sortUndefined: "last" as const,
|
||||
header: () => <div className="text-center w-full">CA / Mag<br/><span className="text-[9px] opacity-60">Réseau</span></div>,
|
||||
header: () => <div className="text-center w-full" title="Chiffre d'affaires moyen d'un magasin du réseau qui vend ce produit">CA / magasin<br/><span className="text-xs font-normal opacity-75">réseau</span></div>,
|
||||
size: 85,
|
||||
cell: ({ row }) => {
|
||||
const val = row.original.caParMagasinReseau;
|
||||
return (
|
||||
<div className="text-center tabular-nums text-[12px] font-bold" style={{ color: "var(--text-secondary)" }}>
|
||||
{val != null ? val.toLocaleString("fr-FR", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }) : "-"}
|
||||
{val != null ? fmtEur0(val) : "-"}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
@@ -945,7 +1056,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
id: "margePctReseau",
|
||||
accessorFn: (row) => valeurTriable(row.margePctReseau),
|
||||
sortUndefined: "last" as const,
|
||||
header: () => <div className="text-center w-full">Marge %<br/><span className="text-[9px] opacity-60">Réseau</span></div>,
|
||||
header: () => <div className="text-center w-full" title="Taux de marge du produit dans le réseau">Marge %<br/><span className="text-xs font-normal opacity-75">réseau</span></div>,
|
||||
size: 75,
|
||||
cell: ({ row }) => {
|
||||
const val = row.original.margePctReseau;
|
||||
@@ -954,7 +1065,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
const color = pct >= 30 ? "text-emerald-500" : pct >= 15 ? "text-amber-500" : "text-rose-500";
|
||||
return (
|
||||
<div className={cn("text-center font-bold text-[12px] tabular-nums", color)}>
|
||||
{pct.toLocaleString("fr-FR", { maximumFractionDigits: 1 })}%
|
||||
{fmtDecimal1(pct)}%
|
||||
</div>
|
||||
);
|
||||
},
|
||||
@@ -994,7 +1105,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
{
|
||||
id: "totalQuantite",
|
||||
accessorFn: (row: ProductRow) => activeMagasin === "TOTAL" ? row.totalQuantite : (row.quantiteByStore?.[activeMagasin] ?? 0),
|
||||
header: () => <div className="text-center w-full">Tot. 12m</div>,
|
||||
header: () => <div className="text-center w-full" title="Quantités vendues sur les 12 derniers mois — cliquer pour le détail mois par mois">Total 12 m</div>,
|
||||
size: 90,
|
||||
cell: ({ row }: { row: { original: ProductRow } }) => {
|
||||
const qty = activeMagasin === "TOTAL"
|
||||
@@ -1017,7 +1128,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
borderColor: "var(--border-strong)"
|
||||
}}
|
||||
>
|
||||
{Math.round(qty).toLocaleString("fr-FR")}
|
||||
{fmtEntier(qty)}
|
||||
</button>
|
||||
);
|
||||
},
|
||||
@@ -1025,7 +1136,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
{
|
||||
id: "totalCa",
|
||||
accessorFn: (row: ProductRow) => activeMagasin === "TOTAL" ? row.totalCa : (row.caByStore?.[activeMagasin] ?? 0),
|
||||
header: () => <div className="text-center w-full">CA</div>,
|
||||
header: () => <div className="text-center w-full" title="Chiffre d'affaires sur 12 mois">CA</div>,
|
||||
size: 90,
|
||||
cell: ({ row }: { row: { original: ProductRow } }) => {
|
||||
const ca = activeMagasin === "TOTAL"
|
||||
@@ -1033,7 +1144,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
: (row.original.caByStore?.[activeMagasin] ?? 0);
|
||||
return (
|
||||
<div className="text-center tabular-nums text-[13px] font-bold" style={{ color: "var(--text-primary)" }}>
|
||||
{Math.round(ca).toLocaleString("fr-FR")} €
|
||||
{fmtEntier(ca)} €
|
||||
</div>
|
||||
);
|
||||
},
|
||||
@@ -1041,7 +1152,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
{
|
||||
id: "totalMarge",
|
||||
accessorFn: (row: ProductRow) => activeMagasin === "TOTAL" ? row.totalMarge : (row.margeByStore?.[activeMagasin] ?? 0),
|
||||
header: () => <div className="text-center w-full">Marge</div>,
|
||||
header: () => <div className="text-center w-full" title="Marge en euros et taux de marge sur 12 mois">Marge</div>,
|
||||
size: 110,
|
||||
cell: ({ row }: { row: { original: ProductRow } }) => {
|
||||
const marge = activeMagasin === "TOTAL"
|
||||
@@ -1054,11 +1165,9 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<span className="tabular-nums text-[13px] font-bold" style={{ color: "var(--text-primary)" }}>
|
||||
{Math.round(marge).toLocaleString("fr-FR")} €
|
||||
{fmtEntier(marge)} €
|
||||
</span>
|
||||
<span className="tabular-nums text-[10px] font-bold opacity-70" style={{
|
||||
color: taux >= 40 ? "var(--accent-success)" : taux >= 25 ? "var(--accent-warning)" : "var(--accent-error)"
|
||||
}}>
|
||||
<span className="tabular-nums text-xs font-semibold" style={{ color: couleurMarge(taux) }}>
|
||||
{taux.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
@@ -1067,7 +1176,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
},
|
||||
{
|
||||
id: "gammeInitial",
|
||||
header: () => <div className="text-center w-full print:hidden">Init.</div>,
|
||||
header: () => <div className="text-center w-full print:hidden" title="Gamme enregistrée aujourd'hui dans FF, avant vos modifications">Actuelle</div>,
|
||||
size: 56,
|
||||
cell: ({ row }) => (
|
||||
<div className="text-center font-bold text-[12px] print:hidden" style={{ color: "var(--text-secondary)" }}>
|
||||
@@ -1077,7 +1186,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
},
|
||||
{
|
||||
id: "gamme",
|
||||
header: () => <div className="text-center w-full">Gamme</div>,
|
||||
header: () => <div className="text-center w-full" title="Gamme choisie : A Cœur, B Complémentaire, C Saisonnier, Y En veille, Z Sortie">Gamme</div>,
|
||||
size: 110,
|
||||
cell: ({ row }) => <GammeCell row={row.original} isAdmin={isAdmin} />,
|
||||
},
|
||||
@@ -1095,10 +1204,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,7 +1227,35 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
|
||||
const { rows: tableRows } = table.getRowModel();
|
||||
|
||||
const prevSelectionRef = useRef<string[]>([]);
|
||||
|
||||
// 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({
|
||||
// Pas de rendu synchrone à chaque événement de défilement (flushSync) :
|
||||
// React regroupe les mises à jour, le défilement reste fluide.
|
||||
useFlushSync: false,
|
||||
count: tableRows.length,
|
||||
getScrollElement: () => tableContainerRef.current,
|
||||
estimateSize: () => rowHeight,
|
||||
@@ -1158,7 +1302,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
border: "1px solid var(--border)",
|
||||
}}
|
||||
>
|
||||
<div className="text-muted text-sm italic opacity-50">Chargement de la grille...</div>
|
||||
<div className="text-sm text-[var(--text-secondary)]">Préparation de la grille…</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1167,41 +1311,38 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
<>
|
||||
<div className="h-full w-full relative">
|
||||
{portalContainer && createPortal(
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Trous d'assortiment — lit le classement affiché, tri compris. */}
|
||||
<button
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setGapsOpen(true)}
|
||||
disabled={tableRows.length === 0}
|
||||
title="Voir les produits qu'un magasin ne travaille pas — ni vente ni stock — en haut du classement affiché"
|
||||
className="flex items-center justify-center gap-2 px-3 py-1.5 rounded-md text-sm font-semibold border transition-all shadow-sm apple-btn-secondary disabled:opacity-50"
|
||||
style={{ background: "var(--action-secondary-bg)", borderColor: "var(--border-strong)", color: "var(--action-secondary-text)" }}
|
||||
title="Les produits du haut du classement affiché qu'un de nos magasins ne vend pas et n'a pas en stock"
|
||||
>
|
||||
<PackageX className="w-4 h-4" />
|
||||
<PackageX />
|
||||
<span className="hidden lg:inline">Non travaillés</span>
|
||||
</button>
|
||||
</Button>
|
||||
{/*
|
||||
* « Vues » replie des BLOCS de colonnes d'un geste, là où le menu
|
||||
* « Colonnes » voisin agit colonne par colonne. Douze cellules
|
||||
* mensuelles ou deux prix ne se masquent pas une par une.
|
||||
* « Blocs de colonnes » replie des BLOCS de colonnes d'un geste, là
|
||||
* où le menu « Colonnes » voisin agit colonne par colonne. Douze
|
||||
* cellules mensuelles ou deux prix ne se masquent pas une par une.
|
||||
*/}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className="flex items-center justify-center gap-2 px-3 py-1.5 rounded-md text-sm font-semibold border transition-all shadow-sm apple-btn-secondary"
|
||||
style={nbVues > 0
|
||||
? { background: "var(--accent-bg)", borderColor: "var(--accent-border)", color: "var(--accent)" }
|
||||
: { background: "var(--action-secondary-bg)", borderColor: "var(--border-strong)", color: "var(--action-secondary-text)" }}
|
||||
title="Afficher ou masquer les blocs de colonnes : ventes mensuelles, prix"
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
title="Afficher ou masquer les ventes mois par mois et les prix"
|
||||
aria-label="Afficher ou masquer les blocs de colonnes"
|
||||
>
|
||||
{nbVues > 0 ? <Eye className="w-4 h-4" /> : <EyeOff className="w-4 h-4" />}
|
||||
<span className="hidden lg:inline">Vues</span>
|
||||
<span className="text-[11px] font-bold tabular-nums opacity-70">{nbVues}/2</span>
|
||||
</button>
|
||||
{nbVues > 0 ? <Eye /> : <EyeOff />}
|
||||
<span className="hidden lg:inline">Affichage</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-[280px] z-50">
|
||||
<DropdownMenuLabel className="text-[11px] uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>
|
||||
Blocs de colonnes
|
||||
<DropdownMenuContent align="end" className="w-[300px] z-50">
|
||||
<DropdownMenuLabel className="text-xs font-medium" style={{ color: "var(--text-secondary)" }}>
|
||||
Blocs de colonnes affichés
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuCheckboxItem
|
||||
checked={showMonthlySales}
|
||||
@@ -1210,11 +1351,11 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<CalendarRange className="w-3.5 h-3.5 shrink-0" style={{ color: "var(--text-muted)" }} />
|
||||
<CalendarRange className="w-4 h-4 shrink-0" style={{ color: "var(--text-muted)" }} />
|
||||
<span className="flex flex-col">
|
||||
<span className="text-xs font-semibold">Ventes mensuelles</span>
|
||||
<span className="text-[10.5px]" style={{ color: "var(--text-muted)" }}>
|
||||
12 mois · détail au clic sur le total
|
||||
<span className="text-sm font-medium">Ventes mois par mois</span>
|
||||
<span className="text-xs" style={{ color: "var(--text-muted)" }}>
|
||||
Les 12 derniers mois
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
@@ -1226,11 +1367,11 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<Tag className="w-3.5 h-3.5 shrink-0" style={{ color: "var(--text-muted)" }} />
|
||||
<Tag className="w-4 h-4 shrink-0" style={{ color: "var(--text-muted)" }} />
|
||||
<span className="flex flex-col">
|
||||
<span className="text-xs font-semibold">Prix</span>
|
||||
<span className="text-[10.5px]" style={{ color: "var(--text-muted)" }}>
|
||||
PV moyen réseau · PV central
|
||||
<span className="text-sm font-medium">Prix</span>
|
||||
<span className="text-xs" style={{ color: "var(--text-muted)" }}>
|
||||
Prix moyen du réseau et prix de vente de nos magasins
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
@@ -1239,32 +1380,28 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
</DropdownMenu>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className="flex items-center justify-center gap-2 px-3 py-1.5 rounded-md text-sm font-semibold bg-[var(--action-secondary-bg)] text-[var(--action-secondary-text)] border border-[var(--border-strong)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-all shadow-sm apple-btn-secondary"
|
||||
aria-label="Afficher/masquer les colonnes"
|
||||
>
|
||||
<SlidersHorizontal className="w-4 h-4" />
|
||||
Colonnes
|
||||
</button>
|
||||
<Button variant="outline" size="sm" aria-label="Choisir les colonnes affichées">
|
||||
<SlidersHorizontal />
|
||||
<span className="hidden lg:inline">Colonnes</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-[220px] max-h-[50vh] overflow-y-auto z-50">
|
||||
<DropdownMenuContent align="end" className="w-[260px] max-h-[60vh] overflow-y-auto z-50">
|
||||
<DropdownMenuLabel className="text-xs font-medium" style={{ color: "var(--text-secondary)" }}>
|
||||
Colonnes affichées
|
||||
</DropdownMenuLabel>
|
||||
{table
|
||||
.getAllLeafColumns()
|
||||
.filter((column: Column<ProductRow, unknown>) => column.getCanHide())
|
||||
.filter((column: Column<ProductRow, unknown>) => column.getCanHide() && column.id !== "select")
|
||||
.map((column: Column<ProductRow, unknown>) => {
|
||||
return (
|
||||
<DropdownMenuCheckboxItem
|
||||
key={column.id}
|
||||
className="capitalize text-xs cursor-pointer font-medium"
|
||||
className="text-sm cursor-pointer"
|
||||
checked={column.getIsVisible()}
|
||||
onCheckedChange={(value) => column.toggleVisibility(!!value)}
|
||||
onSelect={(e: Event) => e.preventDefault()}
|
||||
>
|
||||
{typeof column.columnDef.header === 'string'
|
||||
? column.columnDef.header
|
||||
: column.id.startsWith('month_')
|
||||
? formatMonthLabel(column.id.replace('month_', ''))
|
||||
: column.id}
|
||||
{libelleColonne(column.id, column.columnDef.header)}
|
||||
</DropdownMenuCheckboxItem>
|
||||
);
|
||||
})}
|
||||
@@ -1288,82 +1425,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
}}
|
||||
>
|
||||
<table className="text-sm block" style={{ width: "100%", minWidth: totalWidth }}>
|
||||
<thead className="sticky top-0 z-10 block" style={{
|
||||
background: "linear-gradient(to bottom, var(--bg-elevated), var(--bg-surface))",
|
||||
borderBottom: "1px solid var(--border-strong)",
|
||||
backdropFilter: "blur(10px)",
|
||||
WebkitBackdropFilter: "blur(10px)"
|
||||
}}>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id} className="flex w-full">
|
||||
{(() => {
|
||||
const figesEntete = decalagesFiges(
|
||||
headerGroup.headers.map((h) => ({ id: h.column.id, taille: h.getSize() })),
|
||||
);
|
||||
const dernierFigeEntete = [...figesEntete.keys()].at(-1);
|
||||
return headerGroup.headers.map((header) => {
|
||||
const gaucheEntete = figesEntete.get(header.column.id);
|
||||
const enteteFigee = gaucheEntete !== undefined;
|
||||
const isFlexible = header.column.id === "libelle1" || header.column.id === "libelle3";
|
||||
const isCenter = header.column.id === "totalQuantite" || header.column.id === "totalCa" || header.column.id === "totalMarge" || header.column.id.startsWith("month_") || header.column.id === "gammeInitial" || QLIK_NETWORK_COLUMN_IDS.has(header.column.id) || header.column.id === "prixVente" || header.column.id === "gamme";
|
||||
const size = header.getSize();
|
||||
return (
|
||||
<th
|
||||
key={header.id}
|
||||
className={cn(
|
||||
"px-2 py-3 text-[10px] font-black uppercase tracking-[0.05em] whitespace-nowrap select-none flex items-center transition-colors relative group/header",
|
||||
!enteteFigee && "hover:bg-white/5",
|
||||
)}
|
||||
style={{
|
||||
width: isFlexible ? "100%" : size,
|
||||
flex: isFlexible ? `1 1 ${size}px` : `0 0 ${size}px`,
|
||||
minWidth: size,
|
||||
maxWidth: isFlexible ? "none" : size,
|
||||
color: "var(--text-muted)",
|
||||
justifyContent: isCenter ? "center" : "flex-start",
|
||||
...(enteteFigee ? {
|
||||
position: "sticky" as const,
|
||||
left: gaucheEntete,
|
||||
zIndex: 2,
|
||||
// Le fond du <thead> est un dégradé translucide : sans
|
||||
// fond propre, les autres intitulés défileraient à
|
||||
// travers l'en-tête figé. On reprend le même dégradé
|
||||
// pour que la bande reste d'un seul tenant.
|
||||
background: "linear-gradient(to bottom, var(--bg-elevated), var(--bg-surface))",
|
||||
borderRight: header.column.id === dernierFigeEntete
|
||||
? "1px solid var(--border-strong)"
|
||||
: undefined,
|
||||
} : {}),
|
||||
}}
|
||||
onClick={header.column.getToggleSortingHandler()}
|
||||
>
|
||||
<div className={`flex items-center gap-1.5 cursor-pointer ${isCenter ? "justify-center w-full" : ""}`}>
|
||||
{flexRender(header.column.columnDef.header, header.getContext())}
|
||||
{header.column.getCanSort() && (
|
||||
<div className="shrink-0 opacity-40">
|
||||
{header.column.getIsSorted() === "asc" ? <ChevronUp className="w-3 h-3 text-emerald-500" />
|
||||
: header.column.getIsSorted() === "desc" ? <ChevronDown className="w-3 h-3 text-emerald-500" />
|
||||
: <ChevronsUpDown className="w-3 h-3" />
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Handle de redimensionnement de la colonne */}
|
||||
{header.column.getCanResize() && (
|
||||
<div
|
||||
onMouseDown={header.getResizeHandler()}
|
||||
onTouchStart={header.getResizeHandler()}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className={`absolute right-0 top-0 h-full w-1.5 cursor-col-resize user-select-none touch-none hover:bg-emerald-500/50 ${header.column.getIsResizing() ? "bg-emerald-500" : ""}`}
|
||||
/>
|
||||
)}
|
||||
</th>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<GridHeader table={table} columnsKey={columnsKey} sorting={sorting} columnSizing={columnSizing} rowSelection={rowSelection} data={filteredData} />
|
||||
{/*
|
||||
* La clé porte AUSSI la signature des colonnes : changer de jeu de
|
||||
* colonnes remonte le corps du tableau au lieu de compter sur la
|
||||
@@ -1380,16 +1442,17 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
const isSelected = row.getIsSelected();
|
||||
|
||||
return (
|
||||
<div key={row.id} style={{ position: 'absolute', top: 0, left: 0, width: '100%' }}>
|
||||
<GridRow
|
||||
virtualRow={virtualRow}
|
||||
row={row}
|
||||
rowHeight={rowHeight}
|
||||
isSelected={isSelected}
|
||||
columnsKey={columnsKey}
|
||||
columnSizing={columnSizing}
|
||||
/>
|
||||
</div>
|
||||
// Pas de <div> autour de la ligne : un <div> dans un <tbody>
|
||||
// est du HTML invalide (erreur d'hydratation signalée par React).
|
||||
<GridRow
|
||||
key={row.id}
|
||||
virtualRow={virtualRow}
|
||||
row={row}
|
||||
rowHeight={rowHeight}
|
||||
isSelected={isSelected}
|
||||
columnsKey={columnsKey}
|
||||
columnSizing={columnSizing}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
@@ -1431,3 +1494,9 @@ export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: Heat
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Mémoïsé : ses props sont stables, il n'a donc pas à se redessiner quand le
|
||||
* parent change d'état (sélection, progression du chargement…).
|
||||
*/
|
||||
export const HeatmapGrid = React.memo(HeatmapGridInner);
|
||||
@@ -40,12 +40,12 @@ export function TrendSparkline({ trend }: { trend: NetworkTrend }) {
|
||||
<Arrow className="w-3.5 h-3.5 shrink-0" style={{ color }} strokeWidth={2.5} />
|
||||
</div>
|
||||
{pct != null && (
|
||||
<span className="text-[9px] font-bold tabular-nums leading-none" style={{ color }}>
|
||||
<span className="text-xs font-bold tabular-nums leading-none" style={{ color }}>
|
||||
{pct >= 0 ? "+" : ""}{Math.round(pct * 100)}%
|
||||
</span>
|
||||
)}
|
||||
{pct == null && nouveau && (
|
||||
<span className="text-[9px] font-bold leading-none" style={{ color }}>Nouveau</span>
|
||||
<span className="text-xs font-bold leading-none" style={{ color }}>Nouveau</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@@ -432,7 +432,7 @@ export function DualLineChart({
|
||||
);
|
||||
})}
|
||||
{labels.map((lab, i) => (
|
||||
<text key={lab} x={x(i)} y={H - 10} textAnchor="middle" fontSize={8} fill="var(--text-muted)">
|
||||
<text key={lab} x={x(i)} y={H - 10} textAnchor="middle" fontSize={12} fill="var(--text-muted)">
|
||||
{fmtMonthShort(lab)}
|
||||
</text>
|
||||
))}
|
||||
|
||||
@@ -103,7 +103,7 @@ export function NomenclatureFilter({ options, className }: NomenclatureFilterPro
|
||||
style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-[11px]">
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCode3Filter(null)}
|
||||
|
||||
@@ -183,7 +183,7 @@ function TableauParMagasin({ row, mois, activeMagasin, parSite, agrege, sousLign
|
||||
|
||||
return (
|
||||
<div className="rounded-xl overflow-x-auto min-w-0" style={{ border: "1px solid var(--border)" }}>
|
||||
<table className="w-full text-[11.5px]" style={{ minWidth: 600 }} aria-label={aria}>
|
||||
<table className="w-full text-xs" style={{ minWidth: 600 }} aria-label={aria}>
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bg-elevated)" }}>
|
||||
<th className="text-left px-2.5 py-1.5 font-semibold" style={{ color: "var(--text-secondary)" }}>
|
||||
@@ -210,7 +210,7 @@ function TableauParMagasin({ row, mois, activeMagasin, parSite, agrege, sousLign
|
||||
<div className="font-semibold">{l.nom}</div>
|
||||
{/* L'information secondaire (dernière entrée, mois avec
|
||||
vente) est écrite, pas réservée au survol. */}
|
||||
<div className="text-[10px]" style={{ color: "var(--text-muted)" }}>{l.sous}</div>
|
||||
<div className="text-xs" style={{ color: "var(--text-muted)" }}>{l.sous}</div>
|
||||
</td>
|
||||
{l.valeurs.map((v, i) => cellule(v, mois[i]))}
|
||||
{cumul && (
|
||||
|
||||
@@ -21,7 +21,7 @@ export function TuileStat({ label, valeur, indice, couleur, icone: Icone }: {
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-xl px-3.5 py-3 flex-1 min-w-[160px]" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)" }}>
|
||||
<div className="text-[12px] font-semibold uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>
|
||||
<div className="text-[13px] font-medium" style={{ color: "var(--text-muted)" }}>
|
||||
{label}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 mt-1">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { Check, ChevronsUpDown, Search, Building2 } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useMemo } from "react";
|
||||
import { Segmented } from "@/components/ui/tabs";
|
||||
import { CODE_TOUS_MAGASINS, LIBELLE_TOUS_MAGASINS, nomMagasin } from "@/lib/magasins";
|
||||
|
||||
interface Store {
|
||||
code: string;
|
||||
@@ -16,98 +16,25 @@ interface StoreComboboxProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Choix du magasin affiché dans la Grille : trois boutons visibles d'un coup
|
||||
* d'œil (nos 2 magasins, puis chacun), au lieu d'une liste avec recherche pour
|
||||
* deux magasins qui affichait « TOTAL » et des identifiants techniques.
|
||||
*/
|
||||
export function StoreCombobox({ magasins, selectedCode, onSelect, className }: StoreComboboxProps) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [search, setSearch] = React.useState("");
|
||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
const options = React.useMemo(() => [
|
||||
{ code: "TOTAL", nom: "Tous les magasins (Total)" },
|
||||
...magasins
|
||||
], [magasins]);
|
||||
|
||||
const selectedStore = options.find((s) => s.code === (selectedCode || "TOTAL"));
|
||||
|
||||
const filtered = React.useMemo(() => {
|
||||
if (!search) return options;
|
||||
const s = search.toLowerCase();
|
||||
return options.filter(f =>
|
||||
f.nom.toLowerCase().includes(s) || f.code.toLowerCase().includes(s)
|
||||
).slice(0, 50);
|
||||
}, [options, search]);
|
||||
|
||||
React.useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const items = useMemo(
|
||||
() => [
|
||||
{ value: CODE_TOUS_MAGASINS, label: LIBELLE_TOUS_MAGASINS },
|
||||
...magasins.map((m) => ({ value: m.code, label: nomMagasin(m.code) })),
|
||||
],
|
||||
[magasins],
|
||||
);
|
||||
return (
|
||||
<div className={cn("relative w-[280px]", className)} ref={containerRef}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex items-center justify-between w-full px-3 py-2 text-sm bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg hover:border-blue-500/50 transition-all shadow-sm group"
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<Building2 className="w-3.5 h-3.5 text-slate-400 group-hover:text-blue-500 transition-colors" />
|
||||
<span className="truncate font-medium text-slate-700 dark:text-slate-200">
|
||||
{selectedStore ? selectedStore.nom : "TOTAL"}
|
||||
</span>
|
||||
</div>
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute top-full left-0 z-50 w-full mt-1 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl shadow-2xl overflow-hidden animate-in fade-in slide-in-from-top-1 duration-200">
|
||||
<div className="p-2 border-bottom border-slate-100 dark:border-slate-800 flex items-center gap-2">
|
||||
<Search className="w-4 h-4 text-slate-400 shrink-0" />
|
||||
<input
|
||||
autoFocus
|
||||
placeholder="Rechercher un magasin..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="w-full bg-transparent border-none outline-none text-sm py-1 placeholder:text-slate-500 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div className="max-h-[300px] overflow-auto py-1 custom-scrollbar">
|
||||
{filtered.length === 0 ? (
|
||||
<div className="px-4 py-3 text-sm text-slate-500 text-center italic">
|
||||
Aucun résultat
|
||||
</div>
|
||||
) : (
|
||||
filtered.map((s) => (
|
||||
<button
|
||||
key={s.code}
|
||||
onClick={() => {
|
||||
onSelect(s.code);
|
||||
setOpen(false);
|
||||
setSearch("");
|
||||
}}
|
||||
className={cn(
|
||||
"flex items-center justify-between w-full px-3 py-2 text-sm transition-colors text-left",
|
||||
s.code === (selectedCode || "TOTAL")
|
||||
? "bg-blue-500/10 text-blue-600 font-bold"
|
||||
: "hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300"
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col min-w-0 pr-2">
|
||||
<span className="truncate">{s.nom}</span>
|
||||
<span className="text-[10px] opacity-50 font-mono italic">{s.code === "TOTAL" ? "Agrégation nationale" : `Magasin ID: ${s.code}`}</span>
|
||||
</div>
|
||||
{s.code === (selectedCode || "TOTAL") && (
|
||||
<Check className="h-4 w-4 shrink-0" />
|
||||
)}
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Segmented
|
||||
items={items}
|
||||
value={selectedCode || CODE_TOUS_MAGASINS}
|
||||
onChange={onSelect}
|
||||
className={className}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -14,24 +14,30 @@ interface SupplierComboboxProps {
|
||||
selectedCode: string | null;
|
||||
onSelect: (code: string) => void;
|
||||
className?: string;
|
||||
/** Libellé du bouton quand rien n'est choisi. */
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export function SupplierCombobox({ fournisseurs, selectedCode, onSelect, className }: SupplierComboboxProps) {
|
||||
/** Nombre de fournisseurs listés : la liste complète (plusieurs milliers) figeait l'ouverture. */
|
||||
const AFFICHAGE_MAX = 50;
|
||||
|
||||
/** Choix d'un fournisseur, avec recherche par nom ou par code. */
|
||||
export function SupplierCombobox({ fournisseurs, selectedCode, onSelect, className, placeholder = "Choisir un fournisseur…" }: SupplierComboboxProps) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [search, setSearch] = React.useState("");
|
||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
const selectedSupplier = fournisseurs.find((f) => f.code === selectedCode);
|
||||
|
||||
const filtered = React.useMemo(() => {
|
||||
if (!search) return fournisseurs;
|
||||
const s = search.toLowerCase();
|
||||
return fournisseurs.filter(f =>
|
||||
f.nom.toLowerCase().includes(s) || f.code.toLowerCase().includes(s)
|
||||
).slice(0, 50); // Limit display for performance
|
||||
const { affiches, total } = React.useMemo(() => {
|
||||
const s = search.trim().toLowerCase();
|
||||
const trouves = s
|
||||
? fournisseurs.filter((f) => f.nom.toLowerCase().includes(s) || f.code.toLowerCase().includes(s))
|
||||
: fournisseurs;
|
||||
return { affiches: trouves.slice(0, AFFICHAGE_MAX), total: trouves.length };
|
||||
}, [fournisseurs, search]);
|
||||
|
||||
// Handle click outside to close
|
||||
// Fermeture au clic à l'extérieur
|
||||
React.useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
@@ -47,60 +53,62 @@ export function SupplierCombobox({ fournisseurs, selectedCode, onSelect, classNa
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex items-center justify-between w-full px-3 py-2 text-sm bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg hover:border-emerald-500/50 transition-all shadow-sm group"
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={open}
|
||||
className="flex h-9 w-full items-center justify-between rounded-lg border px-3 text-sm shadow-sm bg-[var(--bg-surface)] border-[var(--border-strong)] hover:border-[var(--accent)]"
|
||||
>
|
||||
<span className="truncate font-medium text-slate-700 dark:text-slate-200">
|
||||
{selectedSupplier ? selectedSupplier.nom : "Sélectionner un fournisseur..."}
|
||||
<span className={cn("truncate", selectedSupplier ? "font-medium text-[var(--text-primary)]" : "text-[var(--text-muted)]")}>
|
||||
{selectedSupplier ? selectedSupplier.nom : placeholder}
|
||||
</span>
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50 group-hover:opacity-100 transition-opacity" />
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 text-[var(--text-muted)]" />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute top-full left-0 z-50 w-full mt-1 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl shadow-2xl overflow-hidden animate-in fade-in slide-in-from-top-1 duration-200">
|
||||
<div className="p-2 border-bottom border-slate-100 dark:border-slate-800 flex items-center gap-2">
|
||||
<Search className="w-4 h-4 text-slate-400 shrink-0" />
|
||||
<div className="absolute left-0 top-full z-50 mt-1 w-full min-w-[300px] overflow-hidden rounded-xl border shadow-[var(--shadow-lg)] bg-[var(--bg-surface)] border-[var(--border-strong)] animate-in fade-in slide-in-from-top-1 duration-150">
|
||||
<div className="flex items-center gap-2 border-b border-[var(--border)] p-2">
|
||||
<Search className="h-4 w-4 shrink-0 text-[var(--text-muted)]" />
|
||||
<input
|
||||
autoFocus
|
||||
placeholder="Rechercher..."
|
||||
placeholder="Nom ou code du fournisseur…"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="w-full bg-transparent border-none outline-none text-sm py-1 placeholder:text-slate-500 dark:text-white"
|
||||
className="w-full border-none bg-transparent py-1 text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)]"
|
||||
/>
|
||||
</div>
|
||||
<div className="max-h-[300px] overflow-auto py-1 custom-scrollbar">
|
||||
{filtered.length === 0 ? (
|
||||
<div className="px-4 py-3 text-sm text-slate-500 text-center italic">
|
||||
Aucun résultat
|
||||
<div role="listbox" className="max-h-[320px] overflow-auto py-1">
|
||||
{affiches.length === 0 ? (
|
||||
<div className="px-4 py-3 text-center text-sm text-[var(--text-muted)]">
|
||||
Aucun fournisseur ne correspond.
|
||||
</div>
|
||||
) : (
|
||||
filtered.map((f) => (
|
||||
affiches.map((f) => (
|
||||
<button
|
||||
key={f.code}
|
||||
role="option"
|
||||
aria-selected={f.code === selectedCode}
|
||||
onClick={() => {
|
||||
onSelect(f.code);
|
||||
setOpen(false);
|
||||
setSearch("");
|
||||
}}
|
||||
className={cn(
|
||||
"flex items-center justify-between w-full px-3 py-2 text-sm transition-colors text-left",
|
||||
"flex w-full items-center justify-between px-3 py-2 text-left text-sm",
|
||||
f.code === selectedCode
|
||||
? "bg-emerald-500/10 text-emerald-600 font-bold"
|
||||
: "hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300"
|
||||
? "bg-[var(--accent-bg)] font-semibold text-[var(--text-primary)]"
|
||||
: "text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]",
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col min-w-0 pr-2">
|
||||
<div className="flex min-w-0 flex-col pr-2">
|
||||
<span className="truncate">{f.nom}</span>
|
||||
<span className="text-[10px] opacity-50 font-mono">Code: {f.code}</span>
|
||||
<span className="text-xs text-[var(--text-muted)]">Code {f.code}</span>
|
||||
</div>
|
||||
{f.code === selectedCode && (
|
||||
<Check className="h-4 w-4 shrink-0" />
|
||||
)}
|
||||
{f.code === selectedCode && <Check className="h-4 w-4 shrink-0 text-[var(--accent)]" />}
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
{fournisseurs.length > 50 && !search && (
|
||||
<div className="px-4 py-2 text-[10px] text-center text-slate-400 uppercase tracking-widest font-bold bg-slate-50/50 dark:bg-slate-800/50">
|
||||
Saisissez pour filtrer les {fournisseurs.length} entrées
|
||||
{total > affiches.length && (
|
||||
<div className="border-t border-[var(--border)] px-4 py-2 text-center text-xs text-[var(--text-muted)]">
|
||||
{affiches.length} premiers sur {total.toLocaleString("fr-FR")} — précisez la recherche
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { SupplierCombobox } from "./supplier-combobox";
|
||||
import { LayoutGrid } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { SupplierCombobox } from "./supplier-combobox";
|
||||
import { GAMMES } from "@/lib/gammes";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface Supplier {
|
||||
code: string;
|
||||
@@ -13,37 +16,48 @@ interface SupplierSelectionLandingProps {
|
||||
fournisseurs: Supplier[];
|
||||
}
|
||||
|
||||
/** Entrée de la Grille : une seule question, « quel fournisseur ? ». */
|
||||
export function SupplierSelectionLanding({ fournisseurs }: SupplierSelectionLandingProps) {
|
||||
const router = useRouter();
|
||||
|
||||
const handleSelect = (code: string) => {
|
||||
router.push(`/grid?fournisseur=${code}`);
|
||||
router.push(`/grid?fournisseur=${encodeURIComponent(code)}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col items-center justify-center p-6 text-center animate-in fade-in zoom-in duration-500">
|
||||
<div className="max-w-md space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="w-16 h-16 bg-emerald-500/10 rounded-2xl flex items-center justify-center mx-auto mb-2 text-emerald-600">
|
||||
<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 002 2h2a2 2 0 002-2" />
|
||||
</svg>
|
||||
<div className="flex h-full flex-col items-center justify-center p-6 text-center">
|
||||
<div className="w-full max-w-xl space-y-6">
|
||||
<div className="space-y-3">
|
||||
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl border border-[var(--accent-border)] bg-[var(--accent-bg)] text-[var(--accent)]">
|
||||
<LayoutGrid className="h-7 w-7" />
|
||||
</div>
|
||||
<h1 className="text-4xl font-black tracking-tight text-slate-900 dark:text-white">CollectFlow</h1>
|
||||
<p className="text-lg text-slate-500 dark:text-slate-400">
|
||||
Optimisez votre assortiment en quelques clics. Sélectionnez un fournisseur pour commencer.
|
||||
<h1 className="text-3xl font-bold tracking-tight text-[var(--text-primary)]">Révision d'assortiment</h1>
|
||||
<p className="text-base text-[var(--text-secondary)]">
|
||||
Choisissez un fournisseur : vous verrez tous ses produits avec leurs ventes, et vous pourrez
|
||||
attribuer à chacun sa gamme.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center pt-4">
|
||||
<div className="flex justify-center">
|
||||
<SupplierCombobox
|
||||
fournisseurs={fournisseurs}
|
||||
selectedCode={null}
|
||||
onSelect={handleSelect}
|
||||
className="w-[400px] !h-12 text-lg shadow-xl"
|
||||
className="w-full max-w-md"
|
||||
/>
|
||||
</div>
|
||||
<div className="pt-8 text-[11px] text-slate-400 uppercase tracking-[0.2em] font-bold">
|
||||
Accès Rapide • {fournisseurs.length} Fournisseurs Disponibles
|
||||
<p className="text-[13px] text-[var(--text-muted)]">
|
||||
{fournisseurs.length.toLocaleString("fr-FR")} fournisseurs disponibles
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-2 pt-2" aria-label="Signification des gammes">
|
||||
{GAMMES.map((g) => (
|
||||
<span
|
||||
key={g.code}
|
||||
title={g.description}
|
||||
className={cn("inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-[13px]", g.classes)}
|
||||
>
|
||||
<span className="font-bold">{g.code}</span> {g.nom}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Search, Building2, ChevronRight } from "lucide-react";
|
||||
|
||||
interface Supplier {
|
||||
code: string;
|
||||
nom: string;
|
||||
}
|
||||
|
||||
export function SupplierSelection({ fournisseurs }: { fournisseurs: Supplier[] }) {
|
||||
const router = useRouter();
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
const filtered = fournisseurs.filter((f) =>
|
||||
f.nom.toLowerCase().includes(search.toLowerCase()) ||
|
||||
f.code.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto py-12 px-6">
|
||||
<div className="mb-10 text-center">
|
||||
<h1 className="text-[32px] font-bold tracking-tight mb-2">Choisir un fournisseur</h1>
|
||||
<p className="text-[15px]" style={{ color: "var(--text-secondary)" }}>
|
||||
Sélectionnez un fournisseur pour commencer la révision de l'assortiment.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative mb-8 max-w-xl mx-auto">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Rechercher par nom ou code..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="apple-input pl-12 h-14 text-lg w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{filtered.map((f) => (
|
||||
<button
|
||||
key={f.code}
|
||||
onClick={() => router.push(`/grid?fournisseur=${f.code}`)}
|
||||
className="flex items-center justify-between p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 hover:border-emerald-500/50 hover:bg-emerald-50/10 transition-all text-left shadow-sm group active:scale-[0.98]"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-500 group-hover:bg-emerald-500/10 group-hover:text-emerald-500 transition-colors">
|
||||
<Building2 className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[17px] font-bold tracking-tight text-slate-900 dark:text-white">
|
||||
{f.nom}
|
||||
</div>
|
||||
<div className="text-[13px] font-medium text-slate-500">
|
||||
Code: {f.code}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-slate-300 group-hover:text-emerald-500 transition-colors" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filtered.length === 0 && (
|
||||
<div className="text-center py-20 bg-slate-50/50 dark:bg-slate-900/50 rounded-3xl border border-dashed border-slate-200 dark:border-slate-800">
|
||||
<p className="text-slate-500 font-medium">Aucun fournisseur trouvé pour "{search}"</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loaded 100 of 124 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user