# 🎨 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 :
```typescript
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

- [x] API créée et testée
- [x] Interface utilisateur implémentée
- [x] Validation des permissions
- [x] Gestion des erreurs
- [x] 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