renaud/espace-paie-odentas
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
espace-paie-odentas/docs/DEMO_SYSTEM.md
odentas f27de28bb4 Initial commit
2025-10-12 17:05:46 +02:00

7.4 KiB
Raw Permalink Blame History

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)

# 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)

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 :

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 :

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é :

# 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)

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)

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

# 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

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.