180 lines
5.6 KiB
Markdown
180 lines
5.6 KiB
Markdown
# 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
|