NeahStable/FEATURE_GROUP_CALENDAR_COLOR.md

🎨 Fonctionnalité : Modification de la couleur des calendriers de groupes

📋 Vue d'ensemble

Cette fonctionnalité permet aux membres d'un groupe de personnaliser la couleur de la pastille du calendrier associé à leur groupe. Chaque groupe créé possède un calendrier automatique nommé "Groupe: {nom}", et cette couleur est visible dans tous les affichages de calendrier (agenda, vision, etc.).

✨ Fonctionnalités implémentées

1. API Backend (/app/api/groups/[groupId]/calendar/route.ts)

Nouveaux endpoints :

GET /api/groups/[groupId]/calendar

• Récupère le calendrier associé à un groupe
• Retourne l'objet calendrier avec sa couleur actuelle

PATCH /api/groups/[groupId]/calendar

• Modifie uniquement la couleur du calendrier d'un groupe
• Body : { "color": "#FF5733" }
• Validation du format hexadécimal
• Vérification que l'utilisateur est membre du groupe
• Retourne le calendrier mis à jour

Sécurité :

• ✅ Authentification requise
• ✅ Vérification de l'appartenance au groupe via Keycloak
• ✅ Validation du format de couleur (hex : #RRGGBB ou #RGB)

---

2. Interface utilisateur - Page Groupes (/components/groups/groups-table.tsx)

Modifications :

1. Affichage de la pastille de couleur

   • Chaque groupe affiche maintenant une pastille colorée à côté de son nom
   • Couleur par défaut : #4f46e5 (indigo)

2. Nouveau bouton "Couleur du calendrier"

   • Accessible via le menu actions (icône ⋯)
   • Icône palette (🎨)

3. Dialog de sélection de couleur

   • Palette de 16 couleurs prédéfinies
   • Input manuel pour code hexadécimal
   • Aperçu en temps réel de la couleur sélectionnée
   • Validation avant sauvegarde

Palette de couleurs disponibles :

const colorPalette = [
  "#4f46e5", // Indigo
  "#0891b2", // Cyan
  "#0e7490", // Teal
  "#16a34a", // Green
  "#65a30d", // Lime
  "#ca8a04", // Amber
  "#d97706", // Orange
  "#dc2626", // Red
  "#e11d48", // Rose
  "#9333ea", // Purple
  "#7c3aed", // Violet
  "#2563eb", // Blue
  "#0284c7", // Sky
  "#059669", // Emerald
  "#84cc16", // Lime
  "#eab308", // Yellow
];

---

3. Interface utilisateur - Page Missions/Équipe (/app/missions/equipe/page.tsx)

Modifications identiques à GroupsTable :

1. Affichage de la couleur

   • Icône du groupe (👥) affichée sur fond de la couleur du calendrier
   • Texte en blanc pour meilleure lisibilité

2. Bouton direct dans la table

   • Icône palette (🎨) directement dans les actions
   • Tooltip "Couleur du calendrier"

3. Dialog de sélection

   • Même interface que dans GroupsTable
   • Sauvegarde avec loader pendant l'opération

---

4. Suppression automatique du calendrier (/app/api/groups/[groupId]/route.ts) ✨ NOUVEAU

Modifications au DELETE endpoint :

Lorsqu'un groupe est supprimé, le calendrier associé est maintenant automatiquement supprimé :

1. Récupération du nom du groupe

   • Appel à Keycloak avant suppression pour obtenir le nom du groupe

2. Suppression du calendrier

   • Recherche du calendrier nommé "Groupe: {nom}"
   • Suppression via prisma.calendar.deleteMany()
   • Logs en cas de succès ou d'échec

3. Suppression du groupe

   • Suppression du groupe de Keycloak
   • Même si la suppression du calendrier échoue, le groupe est quand même supprimé

Impact :

• ✅ Plus de calendriers orphelins dans la base
• ✅ Nettoyage automatique de la base de données
• ✅ Agenda plus propre après suppression de groupes

---

5. Enrichissement API groupes utilisateur (/app/api/users/[userId]/groups/route.ts) ✨ NOUVEAU

Modifications au GET endpoint :

L'API qui récupère les groupes d'un utilisateur enrichit maintenant les données avec les couleurs des calendriers :

1. Récupération des groupes

   • Appel à Keycloak pour obtenir les groupes de l'utilisateur

2. Enrichissement avec couleurs

   • Pour chaque groupe, recherche du calendrier associé dans Prisma
   • Ajout de la propriété calendarColor à chaque groupe
   • Valeur null si pas de calendrier trouvé

3. Retour enrichi

   • Les groupes retournés contiennent maintenant calendarColor
   • Visible immédiatement dans la page Vision

Impact :

• ✅ La page Vision affiche les bonnes couleurs
• ✅ Pas besoin de requêtes supplémentaires côté client
• ✅ Une seule API call pour tout charger

---

🔄 Flux de données

Chargement initial :

1. Page charge les groupes via GET /api/groups
2. Pour chaque groupe :
   └─> GET /api/groups/{groupId}/calendar
   └─> Récupère la couleur du calendrier
   └─> Stocke dans state local : group.calendarColor

Modification de couleur :

1. Utilisateur clique sur icône palette
2. Dialog s'ouvre avec couleur actuelle
3. Utilisateur sélectionne nouvelle couleur
4. Clic "Enregistrer"
   └─> PATCH /api/groups/{groupId}/calendar { color: "#newcolor" }
   └─> Vérification membre du groupe (Keycloak)
   └─> Mise à jour en base de données (Prisma)
   └─> Mise à jour du state local
   └─> Toast de confirmation
5. Couleur visible immédiatement partout

---

🎯 Points d'affichage de la couleur

La couleur du calendrier de groupe est maintenant visible dans :

1. /groups - Page groupes

   • Table des groupes (pastille à côté du nom)

2. /missions/equipe - Page gestion équipe

   • Table des groupes (icône colorée)

3. /agenda - Page agenda

   • Liste des calendriers (pastille à gauche)
   • Événements dans le calendrier (barre colorée)

4. /vision - Page visioconférences ✨ NOUVEAU

   • Cercle coloré autour de l'icône groupe
   • Icône en blanc si couleur personnalisée, en bleu sinon
   • Couleur par défaut : #DBEAFE (bleu clair)

5. Widgets calendrier - Tous les composants calendrier

   • calendar-widget.tsx
   • calendar-client.tsx
   • calendar.tsx

---

🧪 Tests suggérés

Test 1 : Modification de couleur

1. Aller sur /groups ou /missions/equipe
2. Cliquer sur ⋯ → "Couleur du calendrier"
3. Choisir une nouvelle couleur
4. Cliquer "Enregistrer"
5. ✅ Vérifier : Pastille mise à jour immédiatement

Test 2 : Validation format

1. Ouvrir dialog couleur
2. Entrer manuellement un code invalide : #GGGGGG
3. Cliquer "Enregistrer"
4. ✅ Vérifier : Message d'erreur affiché

Test 3 : Permissions

1. Se connecter avec utilisateur NON membre du groupe
2. Essayer de modifier la couleur
3. ✅ Vérifier : Erreur 403 "Vous devez être membre du groupe"

Test 4 : Persistance

1. Modifier couleur d'un groupe
2. Actualiser la page
3. ✅ Vérifier : Couleur conservée
4. Aller sur /agenda
5. ✅ Vérifier : Couleur visible dans le calendrier

Test 5 : Affichage dans Vision ✨ NOUVEAU

1. Modifier la couleur d'un groupe
2. Aller sur /vision
3. ✅ Vérifier : Le cercle autour de l'icône du groupe a la bonne couleur
4. ✅ Vérifier : L'icône est en blanc si couleur personnalisée

Test 6 : Suppression du calendrier ✨ NOUVEAU

1. Créer un nouveau groupe
2. Vérifier dans /agenda que le calendrier est créé
3. Supprimer le groupe dans /missions/equipe
4. Aller sur /agenda
5. ✅ Vérifier : Le calendrier du groupe a été supprimé
6. ✅ Vérifier : Aucune erreur dans la console

---

📁 Fichiers modifiés

Nouveaux fichiers :

• app/api/groups/[groupId]/calendar/route.ts (nouveau endpoint API)

Fichiers modifiés :

1. Gestion des couleurs :

• components/groups/groups-table.tsx

  • Import Palette de lucide-react
  • Ajout interface calendarColor? à Group
  • Ajout états colorPickerDialog, selectedGroupForColor, selectedColor
  • Fonction fetchGroups() modifiée pour charger couleurs
  • Fonctions handleOpenColorPicker() et handleSaveColor()
  • Palette de couleurs colorPalette
  • Dialog de sélection de couleur
  • Affichage pastille dans table

• app/missions/equipe/page.tsx

  • Import Palette de lucide-react
  • Ajout interface calendarColor? à Group
  • Ajout états color picker
  • Fonction fetchData() modifiée pour charger couleurs
  • Fonctions handleOpenColorPicker() et handleSaveColor()
  • Palette de couleurs
  • Bouton palette dans actions
  • Dialog de sélection de couleur
  • Affichage icône colorée

2. Affichage dans Vision : ✨ NOUVEAU

• app/vision/page.tsx
  • Ajout calendarColor? à interface Group
  • Modification affichage du cercle groupe pour utiliser group.calendarColor
  • Style dynamique : couleur personnalisée ou défaut #DBEAFE
  • Icône blanche si couleur personnalisée, bleue sinon

3. Suppression automatique : ✨ NOUVEAU

• app/api/groups/[groupId]/route.ts
  • Endpoint DELETE modifié
  • Import prisma et logger
  • Récupération des détails du groupe avant suppression
  • Suppression du calendrier associé via prisma.calendar.deleteMany()
  • Logs détaillés

4. Enrichissement API : ✨ NOUVEAU

• app/api/users/[userId]/groups/route.ts
  • Import prisma
  • Endpoint GET enrichi
  • Recherche du calendrier pour chaque groupe
  • Ajout de calendarColor aux données retournées
  • Gestion d'erreurs pour chaque groupe

---

🔮 Améliorations futures possibles

1. Color picker avancé

   • Utiliser un vrai color picker (ex: react-color)
   • Support HSL, RGB en plus de hex

2. Thèmes prédéfinis

   • Palettes thématiques (pastel, vif, entreprise, etc.)
   • Sauvegarde de palettes personnalisées

3. Permissions granulaires

   • Seuls les admins du groupe peuvent changer la couleur
   • Rôle "gestionnaire de groupe" dans Keycloak

4. Historique des couleurs

   • Log des changements de couleur
   • Possibilité de revenir en arrière

5. Synchronisation

   • Webhook pour notifier les autres utilisateurs en temps réel
   • WebSocket pour mise à jour instantanée sans refresh

---

📊 Impact sur les performances

• Chargement initial : +1 requête API par groupe (GET calendar)
• Modification : 1 requête PATCH, pas de refresh complet
• Cache : Les calendriers sont déjà en cache Redis (GET /api/calendars)
• Optimisation : Possibilité de batch les requêtes GET calendar en une seule

---

🐛 Problèmes résolus

✅ Problème 1 : Calendriers orphelins après suppression de groupe

Symptôme : Quand on supprimait un groupe, son calendrier restait dans la base de données et s'affichait dans l'agenda.

Solution : Modification du endpoint DELETE pour supprimer automatiquement le calendrier associé lors de la suppression du groupe.

Commit : Ajout de la suppression automatique dans /app/api/groups/[groupId]/route.ts

---

✅ Problème 2 : Couleurs non visibles dans la page Vision

Symptôme : Les couleurs de calendrier personnalisées n'apparaissaient pas dans /vision, tous les groupes avaient la même couleur bleue.

Solution :

1. Enrichissement de l'API /api/users/[userId]/groups pour inclure calendarColor
2. Modification de l'interface Group dans vision/page.tsx
3. Affichage dynamique des couleurs dans l'UI

Commit : Enrichissement API et affichage dans Vision

---

🐛 Problèmes connus

Aucun problème connu pour le moment.

---

✅ Checklist de déploiement

• API créée et testée
• Interface utilisateur implémentée
• Validation des permissions
• Gestion des erreurs
• Pas d'erreurs de linting
• Tests unitaires (à ajouter)
• Tests E2E (à ajouter)
• Documentation utilisateur (à ajouter)

---

📞 Support

Pour toute question ou problème :

1. Vérifier que l'utilisateur est bien membre du groupe
2. Vérifier le format de la couleur (hex valide)
3. Vérifier les logs serveur pour les erreurs Keycloak
4. Vérifier que le calendrier du groupe existe en base

---

Date de création : 20 janvier 2026
Dernière mise à jour : 21 janvier 2026
Version : 1.2
Auteur : Senior Developer Assistant

📝 Changelog

v1.2 (21 janvier 2026)

• ✨ Ajout : Suppression automatique du calendrier lors de la suppression d'un groupe
• ✨ Ajout : Affichage des couleurs dans la page Vision (/vision)
• 🔧 Modification : Enrichissement de l'API /api/users/[userId]/groups avec les couleurs
• 📚 Documentation : Ajout de nouveaux tests et problèmes résolus

v1.1 (20 janvier 2026)

• 🐛 Fix : Problèmes de déploiement Docker
• 📚 Documentation : Ajout du guide de déploiement

v1.0 (20 janvier 2026)

• ✨ Version initiale avec modification des couleurs de calendrier