# Système de Démo - Documentation

## Vue d'ensemble

Le système de démo permet d'afficher l'application avec des données fictives réalistes sans nécessiter d'authentification. Il est conçu pour être utilisé sur le site vitrine, les démonstrations client, et les environnements de test.

## Activation du Mode Démo

### 1. Variable d'environnement (Recommandé pour la production)

```bash
# Dans .env.local ou .env.production
DEMO_MODE=true
NEXT_PUBLIC_DEMO_MODE=true
```

Cette méthode est **recommandée pour la production** car elle :
- Ne dépend pas de paramètres d'URL
- Persiste pendant toute la session
- Est sécurisée et ne s'affiche pas dans l'URL
- Permet un déploiement dédié pour la démo

### 2. Sous-domaine (Futur)

L'application détecte automatiquement le mode démo si elle est accessible via :
- `demo.votresite.com`
- `demo.odentas.fr`

### 3. Header HTTP (Pour tests et API)

```bash
curl -H "x-demo-mode: true" http://localhost:3001/api/contrats
```

## Architecture du Système

### Détection du Mode Démo

Le système de détection est centralisé dans `lib/demo-detector.ts` :

```typescript
import { detectDemoMode, detectDemoModeFromHeaders, detectDemoModeClient } from '@/lib/demo-detector';

// Côté middleware
const isDemoMode = detectDemoMode(req);

// Côté API routes
const isDemoMode = detectDemoModeFromHeaders(headers());

// Côté client React
const isDemoMode = detectDemoModeClient();
```

### Données de Démo

Toutes les données fictives sont centralisées dans `lib/demo-data.ts` :

- **Organisation** : "Compagnie Théâtrale Demo"
- **Utilisateur** : "Utilisateur Démo" (demo@odentas.fr)
- **5 Employés** : Alice Martin, Pierre Dubois, Sophie Leroy, Julien Bernard, Marie Petit
- **7 Contrats CDDU** : Variété de productions (théâtre, danse, musique, opéra)
- **10 Bulletins de paie** : Historique réaliste avec calculs cohérents
- **Fonction de recherche** : Recherche dans tous les types de données

### Flow d'Exécution

1. **Middleware** (`middleware.ts`)
   - Détecte le mode démo avant l'authentification
   - Ajoute le header `x-demo-mode: true`
   - Contourne la redirection vers `/signin` pour les pages protégées

2. **Layout** (`app/(app)/layout.tsx`)
   - Lit le header `x-demo-mode`
   - Affiche le banner de démo
   - Utilise les données fictives au lieu de l'authentification

3. **APIs** (toutes les routes `/api/*`)
   - Détectent le mode démo via headers
   - Retournent les données fictives au lieu des données réelles
   - Logs détaillés pour le debugging

## APIs Supportées

### ✅ APIs avec support démo complet

- `GET /api/me` - Informations utilisateur fictif
- `GET /api/me/role` - Rôle utilisateur (toujours `is_staff: false`)
- `GET /api/organizations` - Organisation de démo
- `GET /api/contrats` - Contrats CDDU avec filtrage par régime/statut
- `GET /api/search` - Recherche dans les données fictives

### 🔄 APIs à implémenter (si nécessaire)

- `GET /api/salaries` - Liste des employés de démo
- `GET /api/bulletins` - Bulletins de paie fictifs
- `GET /api/signatures` - Signatures électroniques fictives

## Déploiement sur Vercel

### Configuration pour demo.odentas.fr

Le projet est configuré pour supporter automatiquement le mode démo sur `demo.odentas.fr` via le fichier `vercel.json`.

#### 1. Ajouter le domaine dans Vercel

Dans le dashboard Vercel de votre projet :
1. Allez dans **Settings** → **Domains**
2. Cliquez **Add Domain**
3. Entrez `demo.odentas.fr`
4. Suivez les instructions DNS

#### 2. Configuration DNS

Chez votre registraire DNS (où `odentas.fr` est géré) :

```
Type: CNAME
Name: demo
Value: cname.vercel-dns.com
TTL: 300 (ou Auto)
```

#### 3. Variables d'environnement (optionnel)

Aucune variable spéciale requise ! Le système détecte automatiquement le domaine `demo.odentas.fr`.

Pour forcer le mode démo sur tous les domaines :
```bash
DEMO_MODE=true
NEXT_PUBLIC_DEMO_MODE=true
```

#### 4. Configuration automatique

Le fichier `vercel.json` inclus configure :
- **Détection automatique** : Header `x-demo-mode: true` sur `demo.odentas.fr`
- **Redirection par défaut** : `/` → `/contrats` pour montrer directement les données
- **Optimisations** : Timeout API adaptés

### Test du déploiement

Une fois configuré :
1. `https://demo.odentas.fr` → Mode démo automatique
2. `https://paie.odentas.fr` → Mode normal
3. Même codebase, comportements différents selon le domaine

### Option alternative : Déploiement dédié

Si vous préférez un projet Vercel séparé :

```bash
# Créer un nouveau projet
vercel --project-name demo-espace-paie

# Variables d'environnement démo
vercel env add DEMO_MODE true production
vercel env add NEXT_PUBLIC_DEMO_MODE true production
```

## Utilisation dans le Code

### Côté serveur (API routes)

```typescript
import { detectDemoModeFromHeaders } from '@/lib/demo-detector';
import { DEMO_CONTRACTS } from '@/lib/demo-data';

export async function GET() {
  const isDemoMode = detectDemoModeFromHeaders(headers());
  
  if (isDemoMode) {
    return NextResponse.json({ contrats: DEMO_CONTRACTS });
  }
  
  // Logique normale...
}
```

### Côté client (React)

```typescript
import { useDemoMode } from '@/hooks/useDemoMode';

function MonComposant() {
  const { isDemoMode } = useDemoMode();
  
  if (isDemoMode) {
    return <DemoBanner />;
  }
  
  // Rendu normal...
}
```

## Logs et Debugging

Le système génère des logs détaillés préfixés par `🎭` :

```
🎭 [DEMO MIDDLEWARE] Mode démo actif - Host: localhost, Path: /contrats
🎭 [LAYOUT] Mode démo actif - Utilisation des données fictives
🎭 [API CONTRATS] Mode démo détecté - renvoi de données fictives
```

## Sécurité

- ✅ **Pas de données réelles exposées** : Toutes les données sont fictives
- ✅ **Pas d'accès base de données** : Aucune connexion Supabase en mode démo
- ✅ **Isolation complète** : Le mode démo ne peut pas affecter les données réelles
- ✅ **Logging transparent** : Tous les accès en mode démo sont loggés

## Tests

### Test local

```bash
# Activer le mode démo
echo "DEMO_MODE=true" >> .env.local
echo "NEXT_PUBLIC_DEMO_MODE=true" >> .env.local

# Lancer l'application
npm run dev

# Tester les APIs
curl http://localhost:3000/api/me
curl http://localhost:3000/api/contrats
curl "http://localhost:3000/api/search?q=alice"
```

### Test avec header

```bash
curl -H "x-demo-mode: true" http://localhost:3000/api/contrats
```

## Extensibilité

### Ajouter de nouvelles données

1. Modifier `lib/demo-data.ts` pour ajouter les nouvelles données
2. Mettre à jour la fonction `searchDemoData` si nécessaire
3. Ajouter le support dans les APIs concernées

### Ajouter de nouveaux modes de détection

1. Modifier `lib/demo-detector.ts`
2. Ajouter la logique dans les fonctions `detectDemoMode*`
3. Documenter le nouveau mode dans cette documentation

## FAQ

**Q: Le mode démo affecte-t-il les performances ?**
R: Non, le mode démo évite complètement les appels à la base de données et APIs externes.

**Q: Peut-on désactiver le mode démo en production ?**
R: Oui, il suffit de ne pas définir la variable `DEMO_MODE` ou de la mettre à `false`.

**Q: Les données de démo sont-elles réalistes ?**
R: Oui, elles représentent des contrats CDDU typiques de l'industrie du spectacle avec des calculs de paie cohérents.

**Q: Comment ajouter de nouveaux employés fictifs ?**
R: Modifier le tableau `DEMO_EMPLOYEES` dans `lib/demo-data.ts` et ajouter les contrats/bulletins correspondants.