🎨 Amélioration de l'affichage des informations créateur

✨ Nouvelles fonctionnalités

Informations affichées

Sur la page /staff/tickets/[id], les informations suivantes sont maintenant affichées :

Nom de l'organisation
Nom du créateur (prénom ou email)
Rôle du créateur (avec badge coloré)
Email du créateur

🎨 Aperçu visuel

┌─────────────────────────────────────────────────────────────┐
│                                                               │
│  Organisation: Entreprise ABC                                │
│                                                               │
│  Ouvert par: Jean Dupont  [Administrateur]                   │
│  📧 jean.dupont@entreprise.com                                │
│                                                               │
└─────────────────────────────────────────────────────────────┘

🏷️ Badges de rôle

Les rôles sont affichés avec des badges colorés pour une identification rapide :

Rôle	Badge	Couleur
SUPER_ADMIN	Super Admin	🟣 Violet
ADMIN	Administrateur	🔵 Bleu
AGENT	Agent	🟢 Vert
USER	Utilisateur	⚪ Gris

📋 Données récupérées

Sources des données :

Nom : auth.users.user_metadata.display_name (via getUserById())
Email : auth.users.email (via getUserById())
Rôle : organization_members.role (requête directe)

💻 Fonctions helper ajoutées

`formatRole(role: string)`

Traduit le rôle en français :

'SUPER_ADMIN' → 'Super Admin'
'ADMIN' → 'Administrateur'
'AGENT' → 'Agent'
'USER' → 'Utilisateur'

`getRoleBadgeColor(role: string)`

Retourne les classes Tailwind CSS pour colorer le badge selon le rôle :

'SUPER_ADMIN' → 'bg-purple-100 text-purple-800'
'ADMIN' → 'bg-blue-100 text-blue-800'
'AGENT' → 'bg-green-100 text-green-800'
'USER' → 'bg-gray-100 text-gray-800'

🎯 Comportement

Si le rôle n'est pas trouvé, le badge n'est pas affiché
Si l'email n'est pas trouvé, la ligne email n'est pas affichée
Le nom affiche toujours quelque chose (prénom, email, ou "Utilisateur inconnu")

📝 Exemple de code

{/* Nom avec badge de rôle */}
<div className="text-sm">
  <span className="text-slate-500">Ouvert par:</span>{' '}
  <strong className="text-slate-900">{creatorName}</strong>
  {creatorRole && (
    <span className={`ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${getRoleBadgeColor(creatorRole)}`}>
      {formatRole(creatorRole)}
    </span>
  )}
</div>

{/* Email si disponible */}
{creatorEmail && (
  <div className="text-sm text-slate-600 ml-0">
    📧 {creatorEmail}
  </div>
)}

✅ Avantages

Identification rapide du niveau d'habilitation
Contact facile avec l'email directement visible
Interface plus professionnelle avec les badges colorés
Information complète pour le staff

🔍 Logs de debug

Dans le terminal, vous verrez maintenant :

📋 [ticket page] User ID: xxx-xxx-xxx
📋 [ticket page] Email: jean.dupont@example.com
✅ [ticket page] Nom trouvé dans display_name: Jean
✅ [ticket page] Rôle trouvé: ADMIN

Amélioration ajoutée le 14 octobre 2025

3.6 KiB Raw Permalink Blame History