# Mode Démo - Salariés Fictifs

## 📋 Vue d'ensemble

Ce guide documente l'implémentation du mode démo pour la section **Salariés** de l'application Espace Paie Odentas.

## ✅ Fonctionnalités implémentées

### 1. Salariés fictifs dans la liste

**Fichier modifié :** `app/(app)/salaries/page.tsx`

- ✅ **5 salariés de démonstration** créés avec des profils réalistes
- ✅ Données variées : comédiens, metteurs en scène, danseurs, techniciens, costumières
- ✅ Statuts Transat mixtes (connecté/non connecté)
- ✅ Contrats associés à chaque salarié
- ✅ Filtrage par recherche fonctionnel
- ✅ Pagination des résultats

**Salariés de démo :**
```typescript
1. MARTIN Alice - Comédien - Transat connecté
2. DUBOIS Pierre - Metteur en scène - Non connecté
3. LEROY Sophie - Danseur - Transat connecté
4. BERNARD Marc - Technicien son - Non connecté
5. GARCIA Elena - Costumière - Transat connecté
```

### 2. Page démo de fiche salarié

**Fichier créé :** `app/(app)/salaries/demo/page.tsx`

Une page unique de démonstration affichant :

#### Bandeau mode démo
- Indication claire du mode démonstration
- Design cohérent avec les autres pages démo de l'application

#### Informations du salarié
- **Informations personnelles** : civilité, nom, prénom, date/lieu de naissance
- **Coordonnées** : email, téléphone, adresse
- **Informations administratives** : NIR (masqué), congés spectacles, justificatifs
- **Informations bancaires** : IBAN et BIC (masqués pour confidentialité)
- **Statut Transat** : badge visuel indiquant la connexion

#### Salarié fictif de référence
```typescript
Nom : Marie MARTIN (née DUPONT)
Matricule : DEMO-SAL-2024
Email : marie.martin@demo.fr
Téléphone : 06 12 34 56 78
Statut : Transat connecté
```

#### Liste des contrats associés
- 3 contrats fictifs affichés
- Liens vers la page démo des contrats
- Types : CDDU mono-mois et multi-mois
- Périodes variées (2024)

#### Masquage des données sensibles
- ✅ NIR masqué (●●●●●●●●●●)
- ✅ IBAN masqué (●●●●●●●●●●)
- ✅ BIC masqué (●●●●●●●●●●)
- Message explicatif sur le masquage

### 3. Redirection en mode démo

**Modification :** `app/(app)/salaries/page.tsx`

- ✅ Détection automatique du mode démo via `window.location.hostname`
- ✅ Tous les liens vers les fiches salariés redirigent vers `/salaries/demo`
- ✅ Redirection transparente pour l'utilisateur
- ✅ Cohérence avec le système de démo des contrats

## 🎨 Design et UX

### Badges et indicateurs
- **Transat connecté** : Badge vert avec icône CheckCircle
- **Type de contrat** : Badges colorés (bleu pour mono-mois, violet pour multi-mois)
- **Mode démo** : Bandeau bleu en haut de page

### Protection de la vie privée
- Données sensibles masquées avec des points
- Message informatif expliquant le masquage
- Données bancaires jamais affichées en clair

### Navigation
- Bouton retour vers la liste des salariés
- Liens vers les contrats (redirigent vers `/contrats/demo`)
- Expérience cohérente avec le reste de l'application

## 🔧 Implémentation technique

### Détection du mode démo

```typescript
const isDemoMode = typeof window !== 'undefined' && 
                  window.location.hostname === 'demo.odentas.fr';
```

### Données fictives dans la liste

```typescript
const DEMO_SALARIES: SalarieRow[] = [
  {
    matricule: "demo-sal-001",
    nom: "MARTIN Alice",
    email: "alice.martin@demo.fr",
    transat_connecte: true,
    dernier_emploi: "Comédien",
    dernier_contrat: { /* ... */ }
  },
  // ... autres salariés
];
```

### Redirection conditionnelle

```typescript
const salarieHref = isDemoMode 
  ? '/salaries/demo' 
  : `/salaries/${r.matricule}`;
```

## 📱 Compatibilité

- ✅ Desktop : affichage optimal
- ✅ Tablette : colonnes adaptées
- ✅ Mobile : responsive avec scroll horizontal pour les tableaux
- ✅ Navigation : cohérente sur tous les écrans

## 🔄 Cohérence avec l'existant

Cette implémentation suit exactement le même modèle que :
- `/contrats/demo` - Page démo des contrats
- `/virements-salaires` - Masquage des RIB en mode démo
- Autres sections de l'application en mode démo

## 📝 Notes importantes

1. **Page unique** : Tous les salariés redirigent vers la même page démo
2. **Données masquées** : NIR, IBAN, BIC toujours masqués en démo
3. **Contrats liés** : Les liens vers les contrats pointent vers `/contrats/demo`
4. **Recherche fonctionnelle** : Le filtrage fonctionne sur les données fictives
5. **Pagination** : Fonctionne correctement avec les 5 salariés fictifs

## 🚀 Utilisation

### Pour tester en local

1. Accéder à `http://demo.odentas.fr/salaries` (si configuré)
2. Voir la liste avec 5 salariés fictifs
3. Cliquer sur n'importe quel salarié
4. Consulter la page démo avec toutes les informations

### En production

Le mode démo s'active automatiquement quand :
- Le hostname est `demo.odentas.fr`
- Variables d'environnement `DEMO_MODE=true` et `NEXT_PUBLIC_DEMO_MODE=true`

## ✨ Améliorations futures possibles

- [ ] Ajouter plus de salariés fictifs (10-15)
- [ ] Historique des modifications
- [ ] Documents associés (RIB PDF fictif)
- [ ] Notes internes
- [ ] Filtres avancés (par statut Transat, par type de contrat, etc.)

## 📚 Fichiers modifiés/créés

1. ✅ `app/(app)/salaries/page.tsx` - Liste avec données fictives et redirection
2. ✅ `app/(app)/salaries/demo/page.tsx` - Page démo unique (nouvelle)
3. ✅ `MODE_DEMO_SALARIES.md` - Cette documentation (nouvelle)

---

**Date de création :** 15 octobre 2025
**Statut :** ✅ Implémenté et fonctionnel