espace-paie-odentas/GUIDE_DEMARRAGE_TICKETS.md

# 🚀 Guide de démarrage et débogage - Notifications Tickets Support

## ⚠️ Important : Redémarrage du serveur requis

Après avoir créé ou modifié des routes API dans Next.js, il est **OBLIGATOIRE** de redémarrer le serveur de développement. Sinon, les nouvelles routes ne seront pas disponibles (erreur 404).

## 📋 Checklist avant de tester

### 1. Vérifier les fichiers
```bash
./test-ticket-notifications.sh
```

Tous les fichiers doivent avoir une ✅ verte.

### 2. Redémarrer le serveur Next.js

**Option A : Arrêter proprement**
```bash
# Dans le terminal où tourne npm run dev, appuyez sur Ctrl+C
# Puis relancez :
npm run dev
```

**Option B : Forcer l'arrêt**
```bash
# Tuer tous les processus Next.js
pkill -f "next dev"

# Attendre 2 secondes
sleep 2

# Relancer
npm run dev
```

### 3. Vérifier que le serveur démarre bien
Vous devriez voir :
```
▲ Next.js 14.x.x
- Local:        http://localhost:3000
- ready started server on 0.0.0.0:3000
```

## 🔍 Comment tester

### 1. Ouvrir la console du navigateur
- Chrome/Edge : F12 ou Cmd+Option+I (Mac)
- Firefox : F12 ou Cmd+Option+K (Mac)
- Safari : Cmd+Option+C (Mac)

### 2. Aller sur une page de ticket
```
http://localhost:3000/staff/tickets/[un-id-de-ticket-existant]
```

### 3. Regarder les logs

**Dans la console du navigateur (F12) :**
```
🔍 [StaffTicketActions] Fetching recipient info for ticket: xxx-xxx-xxx
🔍 [StaffTicketActions] URL: /api/tickets/xxx-xxx-xxx/recipient-info
🔍 [StaffTicketActions] Response status: 200
✅ [StaffTicketActions] Recipient info: {email: "...", name: "..."}
```

**Dans le terminal Next.js :**
```
📋 [ticket page] User ID: xxx-xxx-xxx
📋 [ticket page] Email: user@example.com
📋 [ticket page] User metadata: {
  "display_name": "Jean",
  ...
}
✅ [ticket page] Nom trouvé dans display_name: Jean
```

## ❌ Diagnostic des problèmes

### Problème 1 : Erreur 404 sur `/api/tickets/[id]/recipient-info`

**Symptômes :**
- Console navigateur : `GET /api/tickets/.../recipient-info 404 (Not Found)`
- Aucun log dans le terminal serveur

**Solutions :**
1. ✅ **Vérifier que le fichier existe**
   ```bash
   ls -la app/api/tickets/[id]/recipient-info/route.ts
   ```

2. ✅ **Redémarrer le serveur Next.js** (voir ci-dessus)

3. ✅ **Vérifier qu'il n'y a pas d'erreurs TypeScript**
   ```bash
   npm run build
   ```

4. ✅ **Vérifier la syntaxe du fichier**
   - Le fichier doit exporter une fonction `GET`
   - La fonction doit avoir la signature : `async function GET(_: Request, { params }: { params: { id: string } })`

### Problème 2 : "Utilisateur inconnu" affiché

**Symptômes :**
- La page affiche "Ouvert par: Utilisateur inconnu"
- Logs montrent `user_metadata: {}` ou `null`

**Diagnostic :**
1. **Vérifier dans Supabase Auth** :
   - Aller dans Authentication → Users
   - Cliquer sur l'utilisateur concerné
   - Vérifier que le champ **"Display name"** est rempli

2. **Si le champ est vide** :
   - C'est normal ! L'utilisateur n'a pas de prénom enregistré
   - Le système va afficher l'email à la place
   - Pour tester, ajoutez un "Display name" dans Supabase

3. **Vérifier les logs** :
   ```
   📋 [ticket page] User metadata: {...}
   ```
   - Si vous voyez `{}` → pas de métadonnées → normal
   - Si vous voyez `{display_name: "..."}` → devrait fonctionner

### Problème 3 : Pas de logs dans le terminal

**Causes possibles :**
1. Le serveur n'a pas été redémarré après les modifications
2. Vous regardez le mauvais terminal (plusieurs serveurs lancés ?)
3. Les logs sont filtrés

**Solutions :**
1. Redémarrer le serveur
2. Vérifier quel processus écoute sur le port 3000 :
   ```bash
   lsof -ti:3000
   ```
3. S'assurer qu'il n'y a qu'un seul serveur Next.js qui tourne

### Problème 4 : Le modal ne s'affiche pas

**Symptômes :**
- On clique sur "Envoyer" mais rien ne se passe
- Pas d'erreur dans la console

**Diagnostic :**
1. Vérifier dans la console navigateur :
   ```
   ✅ [StaffTicketActions] Recipient info: {...}
   ```
   - Si absent → l'API n'a pas retourné les infos
   - Si présent → le modal devrait s'afficher

2. Vérifier que la checkbox "Note interne" n'est **PAS** cochée
   - Les notes internes ne déclenchent pas le modal

3. Vérifier l'état React :
   - Ouvrir React DevTools
   - Chercher `StaffTicketActions`
   - Vérifier `recipientInfo` → doit avoir `{email, name}`

## 🎯 Cas de test

### Test 1 : Affichage du nom sur la page
1. Aller sur `/staff/tickets/[id]`
2. Vérifier que "Ouvert par:" affiche un nom ou un email
3. Vérifier les logs dans le terminal

### Test 2 : Modal de confirmation
1. Aller sur `/staff/tickets/[id]`
2. Écrire un message dans le textarea
3. **NE PAS** cocher "Note interne"
4. Cliquer sur "Envoyer"
5. → Le modal doit s'afficher avec l'email et le nom du destinataire

### Test 3 : Note interne (pas de modal)
1. Aller sur `/staff/tickets/[id]`
2. Écrire un message dans le textarea
3. **COCHER** "Note interne"
4. Cliquer sur "Envoyer"
5. → Le message doit être envoyé directement SANS modal

## 📞 Si ça ne fonctionne toujours pas

1. **Arrêter complètement Next.js**
   ```bash
   pkill -f "next"
   lsof -ti:3000  # Doit retourner vide
   ```

2. **Nettoyer le cache Next.js**
   ```bash
   rm -rf .next
   ```

3. **Redémarrer**
   ```bash
   npm run dev
   ```

4. **Vérifier les logs** dans la console ET le terminal

5. **Partager les logs** si le problème persiste :
   - Logs de la console navigateur (F12)
   - Logs du terminal Next.js
   - Capture d'écran de la page

---

*Guide créé le 14 octobre 2025*