# Imago Hub — Portail d'Administration

Portail d'administration web pour [Imago Hub](../README.md), 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
```bash
# 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
```bash
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
```bash
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` :
```bash
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 :
1. Saisie sur la page de login
2. Stockée **uniquement en mémoire** (Zustand — pas de localStorage)
3. Envoyée dans le header `Authorization: Bearer <clé>`
4. 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.