112 lines
3.6 KiB
Markdown
112 lines
3.6 KiB
Markdown
# 🎨 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 :
|
|
|
|
1. **Nom de l'organisation**
|
|
2. **Nom du créateur** (prénom ou email)
|
|
3. **Rôle du créateur** (avec badge coloré)
|
|
4. **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 :
|
|
```typescript
|
|
'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 :
|
|
```typescript
|
|
'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
|
|
|
|
```tsx
|
|
{/* 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
|
|
|
|
1. **Identification rapide** du niveau d'habilitation
|
|
2. **Contact facile** avec l'email directement visible
|
|
3. **Interface plus professionnelle** avec les badges colorés
|
|
4. **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*
|