# 🎨 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

---

## 🔄 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
   - Calendrier des réunions
   - Événements du jour

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

---

## 📁 Fichiers modifiés

### Nouveaux fichiers :
- `app/api/groups/[groupId]/calendar/route.ts` (nouveau endpoint API)

### Fichiers modifiés :
- `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

---

## 🔮 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 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  
**Version** : 1.0  
**Auteur** : Senior Developer Assistant