NeahStable/DEBUG_COLOR_BUTTON.md
2026-01-20 23:36:35 +01:00

2.7 KiB

🐛 Debug : Bouton couleur manquant

Diagnostic

Le code est bien présent dans le fichier app/missions/equipe/page.tsx :

  • Import de Palette (ligne 4)
  • Fonction handleOpenColorPicker (ligne 503)
  • Bouton avec icône Palette (ligne 1040-1049)
  • Dialog de sélection de couleur (ligne 1377+)

Vérifications à faire

1. Êtes-vous sur la bonne page ?

Votre screenshot montre : "Gestion des équipes" avec onglet "Groupes (7)"

C'est bien la page /missions/equipe avec l'onglet Groupes activé.

2. Vérifier le cache Next.js

# Dans le terminal :
cd /Users/alma/Documents/NeahStable

# Supprimer le cache Next.js
rm -rf .next

# Rebuild
npm run dev

3. Vérifier le cache du navigateur

Dans votre navigateur :

  • Chrome/Edge : Ctrl+Shift+R (Windows) ou Cmd+Shift+R (Mac)
  • Firefox : Ctrl+F5 (Windows) ou Cmd+Shift+R (Mac)
  • Ou ouvrir DevTools (F12) → Onglet Network → Cocher "Disable cache"

4. Vérifier que le serveur dev tourne

# Arrêter le serveur actuel (Ctrl+C)
# Puis relancer :
npm run dev

5. Vérifier dans le code source de la page

  1. Ouvrir la page /missions/equipe
  2. Clic droit → "Inspecter" (F12)
  3. Onglet "Elements" ou "Inspector"
  4. Chercher "Palette" dans le HTML (Ctrl+F)
  5. Est-ce que vous trouvez <svg> avec la classe contenant "Palette" ?

6. Vérifier les erreurs console

  1. F12 → Onglet "Console"
  2. Y a-t-il des erreurs en rouge ?
  3. Copier/coller les erreurs si présentes

Solution temporaire

Si le bouton n'apparaît toujours pas, utilisez la page /groups à la place :

  1. Aller sur /groups
  2. Dans la colonne ACTIONS, cliquer sur (trois points)
  3. Sélectionner "Couleur du calendrier"

Le code est identique dans components/groups/groups-table.tsx et devrait fonctionner.

Code exact du bouton

Voici le code exact qui devrait être rendu (ligne 1040-1049) :

<Button
  variant="ghost"
  size="sm"
  onClick={() => handleOpenColorPicker(group)}
  disabled={actionLoading === group.id}
  className="h-8 w-8 p-0"
  title="Couleur du calendrier"
>
  <Palette className="h-4 w-4 text-gray-500" />
</Button>

Ce bouton devrait apparaître entre le bouton "Modifier" (Edit2) et "Gérer les membres" (Users).

Ordre des boutons attendu

Dans la colonne ACTIONS, vous devriez voir 4 boutons :

  1. ✏️ Edit2 - Modifier le nom du groupe
  2. 🎨 Palette - Couleur du calendrier ← NOUVEAU
  3. 👥 Users - Gérer les membres
  4. 🗑️ Trash2 - Supprimer le groupe

Si rien ne fonctionne

Envoyez-moi :

  1. Screenshot de la console (F12 → Console)
  2. Screenshot du code source HTML (F12 → Elements, autour de la table)
  3. Résultat de : ls -la .next dans le terminal