Claude 150baeef9a Carte tendance : hauteur figee, bascule Graphique/Tableau, cellules copiables
1. LA CARTE CHANGEAIT DE TAILLE PENDANT LE SURVOL.
   La lecture du mois vivait sous le graphique, en HTML : selon la longueur
   des valeurs elle passait sur deux lignes et la carte sautait. Elle est
   desormais dessinee DANS le SVG, dont la geometrie est figee par le
   viewBox — infobulle ancree au reticule, qui bascule a gauche quand elle
   deborderait a droite.

   Deux causes residuelles trouvees a la mesure, pas a la lecture :
   - le SVG etait dimensionne en pourcentage, donc sa hauteur dependait de
     la largeur : il porte maintenant une hauteur en pixels ;
   - un SVG en ligne traine l'espace sous la ligne de base (6 px mesures),
     ce qui decalait la vue tableau : `display:block`.

   Verifie en pilotant le composant reellement monte : 382,5 px au repos,
   sur quatre positions de survol et dans les deux vues, en clair comme en
   sombre.

2. LES VALEURS MOIS PAR MOIS SANS AGRANDIR LA CARTE.
   Le deplaint aurait fait grandir la carte a l'ouverture — exactement ce
   qu'on venait de corriger. Le tableau occupe donc la place du graphique
   dans un panneau de MEME HAUTEUR et defile a l'interieur.

3. REFERENCE ET EAN COPIABLES, comme le code interne.
   La copie etait ecrite en ligne dans la colonne « Code interne », avec un
   `eslint-disable react-hooks/rules-of-hooks` : un useState dans le corps
   d'un cell() de TanStack n'est pas rendu au meme endroit d'un rendu a
   l'autre. Extraite en composant, la derogation disparait et les trois
   colonnes partagent le meme comportement.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DfqUihgixw4K1AmJhizWiu
2026-08-01 10:40:37 +00:00

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.

  1. Installer les dépendances :
npm install
  1. Configurer la connexion DB : Allez sur la page des Paramètres (/settings) dans l'application pour configurer l'accès à votre PostgreSQL local.

  2. 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)
S
Description
No description provided
Readme
4.6 MiB
0 Stars 1 Watchers 0 Forks
Languages
TypeScript 93.9%
JavaScript 3.6%
HTML 1.4%
CSS 1%
Dockerfile 0.1%