Sur 2600 px de tableau pour ~1150 px visibles, on voit 8 colonnes sur 18. Dès qu'on défilait vers les totaux ou les mois, la Désignation sortait de l'écran et plus rien ne disait quelle ligne on lisait. Case à cocher, Code interne et Désignation restent désormais collés au bord gauche pendant le défilement horizontal, en-tête compris. Deux conséquences de conception : - La Désignation a été rapprochée du Code interne dans l'ordre des colonnes. Le figeage exige des colonnes contiguës depuis la gauche ; en la laissant après Référence et GTIN, il aurait fallu geler ces deux-là aussi, soit 636 px immobilisés au lieu de 406. L'ordre « code, désignation, puis codes secondaires » est de toute façon celui qu'on lit. - Les cellules figées doivent être OPAQUES, le reste de la ligne glissant dessous. Le survol passe donc par une teinte pleine et non par le voile translucide des cellules ordinaires, et l'en-tête figé reprend le dégradé du thead pour que la bande reste d'un seul tenant. Un filet marque la limite de la zone figée. Les décalages sont calculés par cumul des largeurs réelles et s'arrêtent à la première colonne non figée : masquer le Code interne réajuste tout seul, et une colonne figée ne peut jamais se retrouver à flotter au milieu du tableau. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y26nRZxTR57K7h8yqsF675
CollectFlow
CollectFlow est une application de révision d'assortiment et d'analyse de performances des produits en point de vente, conçue pour consolider les données issues de plusieurs fournisseurs et magasins.
Prérequis
- Node.js 18+ (pour le développement local)
- Docker et Docker Compose (pour le déploiement conteneurisé)
- PostgreSQL 16+
Lancer avec Docker
Le projet est configuré pour tourner dans un conteneur Docker optimisé (mode standalone de Next.js). Note : Vous devez disposer d'une base de données PostgreSQL séparée (le conteneur ne lance que l'application web).
1. Démarrer l'application
À la racine du projet, lancez :
npm run docker:build
# ou directement
docker-compose up -d --build
L'application sera accessible sur http://localhost:5643.
L'application sera attachée au réseau Docker externe nginx_default afin d'être exposée derrière votre reverse proxy Nginx. Assurez-vous que ce réseau existe (docker network create nginx_default).
2. Arrêter l'application
npm run docker:down
# ou directement
docker-compose down
Développement Local (Sans Docker)
Si vous préférez développer en local, vous devrez configurer votre propre base de données PostgreSQL.
- Installer les dépendances :
npm install
-
Configurer la connexion DB : Allez sur la page des Paramètres (
/settings) dans l'application pour configurer l'accès à votre PostgreSQL local. -
Lancer le serveur de développement :
npm run dev
Structure du Projet (BMAD)
Ce projet respecte l'architecture BMAD (Business, Model, Application/API, Data) :
src/features/*: Logique métier (Business) isolée par feature (ex:grid,snapshots)src/types/*: Interfaces TypeScript (Model)src/app/*: Routeurs Next.js UI et endpoints d'API (Application/API)src/db/*: Schémas Drizzle ORM et connexions (Data)