Initial commit

omop/frontend/README.md

@@ -0,0 +1,193 @@
+# OMOP Pipeline - Frontend
+
+Interface web React pour gérer le pipeline ETL OMOP CDM 5.4.
+
+## Technologies
+
+- **React** 18.3 - Framework UI
+- **Vite** 5.1 - Build tool rapide
+- **React Router** 6.22 - Routing
+- **Axios** - Client HTTP
+- **TanStack Query** - State management et cache
+- **Recharts** - Graphiques
+
+## Installation
+
+```bash
+npm install
+```
+
+## Développement
+
+```bash
+npm run dev
+```
+
+L'application sera disponible sur http://localhost:3000
+
+## Build
+
+```bash
+npm run build
+```
+
+Les fichiers de production seront dans `dist/`
+
+## Structure
+
+```
+src/
+├── api/
+│   └── client.js          # Client API Axios
+├── pages/
+│   ├── Dashboard.jsx      # Page dashboard
+│   ├── ETLManager.jsx     # Gestion ETL
+│   ├── SchemaManager.jsx  # Gestion schémas
+│   ├── Validation.jsx     # Validation
+│   └── Logs.jsx           # Logs
+├── App.jsx                # Application principale
+├── App.css                # Styles
+├── main.jsx               # Point d'entrée
+└── index.css              # Styles de base
+```
+
+## Configuration
+
+### API Backend
+
+L'URL de l'API est configurée dans `src/api/client.js` :
+
+```javascript
+const API_BASE_URL = 'http://localhost:8000/api'
+```
+
+### Proxy Vite
+
+Le proxy est configuré dans `vite.config.js` pour rediriger `/api` vers le backend.
+
+## Pages
+
+### Dashboard
+- Statistiques en temps réel
+- Historique des exécutions
+- Métriques de performance
+
+### ETL Manager
+- Lancer des pipelines ETL
+- Configurer les paramètres
+- Suivre les jobs en cours
+
+### Schema Manager
+- Créer les schémas
+- Valider les schémas
+- Voir l'état des tables
+
+### Validation
+- Lancer la validation
+- Voir les codes non mappés
+- Consulter les erreurs
+
+### Logs
+- Logs système
+- Filtres par niveau
+- Erreurs de validation
+
+## Développement
+
+### Ajouter une nouvelle page
+
+1. Créer le composant dans `src/pages/`
+2. Ajouter la route dans `App.jsx`
+3. Ajouter le lien dans la sidebar
+
+### Ajouter un endpoint API
+
+1. Ajouter la fonction dans `src/api/client.js`
+2. Utiliser avec TanStack Query dans le composant
+
+### Modifier les styles
+
+- Styles globaux : `App.css`
+- Styles de base : `index.css`
+- Styles inline : Dans les composants
+
+## Scripts
+
+- `npm run dev` - Serveur de développement
+- `npm run build` - Build de production
+- `npm run preview` - Prévisualiser le build
+
+## Dépendances
+
+### Production
+- react
+- react-dom
+- react-router-dom
+- axios
+- recharts
+- @tanstack/react-query
+
+### Développement
+- @vitejs/plugin-react
+- vite
+
+## Troubleshooting
+
+### Port déjà utilisé
+
+Si le port 3000 est déjà utilisé, Vite proposera automatiquement le port 5173.
+
+### Erreur CORS
+
+Vérifier que le backend autorise l'origine dans `src/api/main.py` :
+
+```python
+allow_origins=["http://localhost:3000", "http://localhost:5173"]
+```
+
+### Erreur de connexion API
+
+Vérifier que le backend est démarré sur http://localhost:8000
+
+## Production
+
+### Build
+
+```bash
+npm run build
+```
+
+### Servir les fichiers statiques
+
+Option 1 - Serveur HTTP simple :
+```bash
+npm install -g serve
+serve -s dist
+```
+
+Option 2 - Nginx :
+```nginx
+server {
+    listen 80;
+    server_name example.com;
+    root /path/to/dist;
+    
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    
+    location /api {
+        proxy_pass http://localhost:8000;
+    }
+}
+```
+
+Option 3 - Depuis FastAPI :
+```python
+from fastapi.staticfiles import StaticFiles
+app.mount("/", StaticFiles(directory="frontend/dist", html=True))
+```
+
+## License
+
+MIT