# 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