renaud/espace-paie-odentas
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
espace-paie-odentas/MODE_DEMO_SALARIES.md

5.6 KiB
Raw Permalink Blame History

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 :

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

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

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

Données fictives dans la liste

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

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