bruno
317c73407e
- createPortal renders menu at document.body level, bypassing all parent overflow/scroll containers - Fixed positioning calculated from button's getBoundingClientRect() - menuButtonRefs map ensures correct position per row
Imago Hub — Portail d'Administration
Portail d'administration web pour Imago Hub, construit avec React 19, TypeScript, Vite, et Tailwind CSS.
Fonctionnalités
Section Admin
- Tableau de bord — KPIs, graphiques uploads/stockage, santé des composants, activité récente
- Clients — CRUD complet, rotation de clés API, gestion des plans et scopes
- Détail client — Quotas (images/stockage/tokens), scopes, images récentes
- File de tâches — Jobs en attente/cours/échec, retraitement unitaire et en lot
- Métriques — Visualisation Prometheus : uploads, tokens, stockage, erreurs par étape
- Santé — État des composants (DB, Redis, Queue, OCR, AI, Disque)
- Configuration — Affichage lecture seule de la configuration backend
- Logs — Flux de logs en temps réel avec filtres et export
Section Galerie
- Galerie — Grille/liste, filtres avancés, recherche, pagination
- Détail image — 5 onglets (AI Vision, EXIF + carte GPS, OCR, Technique, Provenance)
- Galerie client — Images filtrées par application
Stack technique
| Technologie | Usage |
|---|---|
| React 19 | UI framework |
| TypeScript 5 | Typage statique strict |
| Vite 7 | Bundler et dev server |
| Tailwind CSS 3 | Styling utility-first, thème sombre |
| TanStack Query 5 | Data fetching et cache |
| Zustand 5 | State management (auth, filtres) |
| React Router 7 | Routage SPA |
| Recharts 3 | Graphiques et visualisations |
| React-Leaflet 5 | Cartes GPS interactives |
| Lucide React | Icônes |
| Vitest | Tests unitaires |
Démarrage rapide
Développement
# Installation des dépendances
npm install
# Lancer le serveur de développement
npm run dev
# Le portail est accessible sur http://localhost:5173
# Les requêtes API sont proxifiées vers http://localhost:8000
Scripts disponibles
npm run dev # Serveur dev avec HMR
npm run build # Build production
npm run preview # Prévisualiser le build
npm run test # Lancer les tests unitaires
npm run test:watch # Tests en mode watch
npm run typecheck # Vérification TypeScript
npm run lint # ESLint
Docker
Build et lancement autonome
docker build -t imago-admin .
docker run -p 3000:3000 imago-admin
Via docker-compose (stack complète)
Depuis la racine du projet Imago (../), le docker-compose.yml inclut le service admin :
cd ..
docker compose up -d
# Admin : http://localhost:3000
# Backend : http://localhost:8000
Architecture du projet
src/
├── api/ # Client HTTP + services (auth, images, metrics, health)
├── components/
│ ├── layout/ # Sidebar, TopBar, PageLayout
│ └── shared/ # 12 composants UI réutilisables
├── hooks/ # 6 hooks React (TanStack Query + WebSocket)
├── pages/
│ ├── admin/ # 8 pages admin
│ └── gallery/ # 3 pages galerie
├── store/ # 4 stores Zustand
├── types/ # Interfaces TypeScript (API + métriques)
├── utils/ # Utilitaires + tests (formats, couleurs, Prometheus, constantes)
└── test/ # Configuration des tests
Authentification
Le portail utilise une clé API pour l'authentification :
- Saisie sur la page de login
- Stockée uniquement en mémoire (Zustand — pas de localStorage)
- Envoyée dans le header
Authorization: Bearer <clé> - Déconnexion automatique sur réponse 401/403
Variables d'environnement
| Variable | Défaut | Description |
|---|---|---|
VITE_API_BASE_URL |
http://localhost:8000 |
URL de l'API backend |
VITE_APP_TITLE |
Imago Hub Admin |
Titre de l'application |
Licence
Projet interne — voir la licence du projet parent.