262 lines
No EOL
7.4 KiB
Markdown
262 lines
No EOL
7.4 KiB
Markdown
# 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. |