# Story 9.3: Implémenter le calendrier énergétique de matchs

Status: review

## Acceptance Criteria

**Given** plusieurs matchs sont programmés
**When** j'accède au calendrier énergétique
**Then** je vois un calendrier mensuel avec les matchs
**And** chaque match affiche son niveau d'énergie (code couleur)
**And** je peux filtrer par ligue, équipe, ou niveau d'énergie
**And** je peux cliquer sur un match pour voir les détails

## Tasks / Subtasks

- [x] Créer le composant de calendrier (AC: #1)
  - [x] Créer `src/components/calendar/EnergyCalendar.tsx`
  - [x] Utiliser une librairie de calendrier (ex: `react-calendar` ou `date-fns`)
  - [x] Afficher un calendrier mensuel
  - [x] Afficher les matchs sur les dates correspondantes
  - [x] Utiliser shadcn/ui components

- [x] Créer le système de récupération des matchs (AC: #1)
  - [x] Créer `src/services/calendarService.ts`
  - [x] Récupérer les matchs avec leurs scores d'énergie
  - [x] Récupérer les prédictions pour chaque match
  - [x] Grouper par date
  - [x] Optimiser les requêtes de base de données

- [x] Créer le composant de match dans le calendrier (AC: #1)
  - [x] Créer `src/components/calendar/CalendarMatchItem.tsx`
  - [x] Afficher: équipes, date/heure, niveau d'énergie (code couleur)
  - [x] Utiliser les couleurs: 🟢 >70%, 🟡 50-70%, 🔴 <50%
  - [x] Ajouter un petit Confidence Meter
  - [x] Gérer le clic pour voir les détails

- [x] Créer les filtres du calendrier (AC: #1)
  - [x] Créer `src/components/calendar/CalendarFilters.tsx`
  - [x] Ajouter filtre par ligue
  - [x] Ajouter filtre par équipe
  - [x] Ajouter filtre par niveau d'énergie
  - [x] Utiliser shadcn/ui components (Select, Checkbox)
  - [x] Gérer l'état des filtres

- [x] Créer l'endpoint API pour le calendrier (AC: #1)
  - [x] Créer `GET /api/v1/calendar`
  - [x] Accepter les paramètres: month, year, league, team, energy_level
  - [x] Retourner les matchs filtrés
  - [x] Inclure les scores d'énergie et les prédictions
  - [x] Documenter avec Swagger

- [x] Créer la page de calendrier (AC: #1)
  - [x] Créer `src/app/(dashboard)/calendrier/page.tsx`
  - [x] Intégrer le composant `EnergyCalendar`
  - [x] Intégrer les filtres
  - [x] Gérer la navigation entre les mois
  - [x] Design responsive (mobile et desktop)

- [x] Tester le calendrier énergétique (Tous AC)
  - [x] Tester l'affichage du calendrier mensuel
  - [x] Tester l'affichage des matchs avec code couleur
  - [x] Tester les filtres par ligue, équipe, niveau d'énergie
  - [x] Tester la navigation entre les mois
  - [x] Tester le clic sur un match

## Dev Notes

### Stack Technique
- **Calendar:** `react-calendar` ou `date-fns`
- **API:** Next.js API routes ou FastAPI
- **UI:** shadcn/ui + Tailwind CSS

### File Structure
```
src/
├── app/
│   └── (dashboard)/
│       └── calendrier/page.tsx
├── components/
│   └── calendar/
│       ├── EnergyCalendar.tsx
│       ├── CalendarMatchItem.tsx
│       └── CalendarFilters.tsx
└── services/
    └── calendarService.ts
```

### References
- [Source: _bmad-output/planning-artifacts/epics.md#Story-9.3]

## Dev Agent Record

### Agent Model Used
GLM-4.7

### Completion Notes List
- Calendrier énergétique créé avec succès
- Matchs affichés avec code couleur d'énergie
- Filtres fonctionnels (ligue, équipe, niveau d'énergie)
- Navigation entre les mois implémentée

### File List
- `src/app/(dashboard)/calendrier/page.tsx`
- `src/app/api/v1/calendar/route.ts`
- `src/app/api/v1/calendar/leagues/route.ts`
- `src/app/api/v1/calendar/teams/route.ts`
- `src/components/calendar/EnergyCalendar.tsx`
- `src/components/calendar/CalendarMatchItem.tsx`
- `src/components/calendar/CalendarFilters.tsx`
- `src/services/calendarService.ts`
- `src/services/__tests__/calendarService.test.ts`
- `src/components/calendar/__tests__/CalendarMatchItem.test.tsx`
- `src/components/calendar/__tests__/CalendarFilters.test.tsx`
- `src/components/calendar/__tests__/EnergyCalendar.test.tsx`