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

./test-ticket-notifications.sh

Tous les fichiers doivent avoir une ✅ verte.

2. Redémarrer le serveur Next.js

Option A : Arrêter proprement

# Dans le terminal où tourne npm run dev, appuyez sur Ctrl+C
# Puis relancez :
npm run dev

Option B : Forcer l'arrêt

# 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

   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

   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 :

   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

   pkill -f "next"
   lsof -ti:3000  # Doit retourner vide
   

2. Nettoyer le cache Next.js

   rm -rf .next
   

3. Redémarrer

   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