chartbastan/_bmad-output/implementation-artifacts/9-3-implémenter-le-calendrier-énergétique-de-matchs.md

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

• Créer le composant de calendrier (AC: #1)

  • Créer src/components/calendar/EnergyCalendar.tsx
  • Utiliser une librairie de calendrier (ex: react-calendar ou date-fns)
  • Afficher un calendrier mensuel
  • Afficher les matchs sur les dates correspondantes
  • Utiliser shadcn/ui components

• Créer le système de récupération des matchs (AC: #1)

  • Créer src/services/calendarService.ts
  • Récupérer les matchs avec leurs scores d'énergie
  • Récupérer les prédictions pour chaque match
  • Grouper par date
  • Optimiser les requêtes de base de données

• Créer le composant de match dans le calendrier (AC: #1)

  • Créer src/components/calendar/CalendarMatchItem.tsx
  • Afficher: équipes, date/heure, niveau d'énergie (code couleur)
  • Utiliser les couleurs: 🟢 >70%, 🟡 50-70%, 🔴 <50%
  • Ajouter un petit Confidence Meter
  • Gérer le clic pour voir les détails

• Créer les filtres du calendrier (AC: #1)

  • Créer src/components/calendar/CalendarFilters.tsx
  • Ajouter filtre par ligue
  • Ajouter filtre par équipe
  • Ajouter filtre par niveau d'énergie
  • Utiliser shadcn/ui components (Select, Checkbox)
  • Gérer l'état des filtres

• Créer l'endpoint API pour le calendrier (AC: #1)

  • Créer GET /api/v1/calendar
  • Accepter les paramètres: month, year, league, team, energy_level
  • Retourner les matchs filtrés
  • Inclure les scores d'énergie et les prédictions
  • Documenter avec Swagger

• Créer la page de calendrier (AC: #1)

  • Créer src/app/(dashboard)/calendrier/page.tsx
  • Intégrer le composant EnergyCalendar
  • Intégrer les filtres
  • Gérer la navigation entre les mois
  • Design responsive (mobile et desktop)

• Tester le calendrier énergétique (Tous AC)

  • Tester l'affichage du calendrier mensuel
  • Tester l'affichage des matchs avec code couleur
  • Tester les filtres par ligue, équipe, niveau d'énergie
  • Tester la navigation entre les mois
  • 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