# Story 5.2: Créer le composant MatchListItem

Status: review

## Acceptance Criteria

**Given** des matchs avec prédictions existent
**When** la liste de matchs est affichée
**Then** chaque item affiche : équipes, date/heure, Confidence Meter
**And** les items sont triés par date (prochains en premier)
**And** le design est responsive (mobile-first)

**Given** je tap sur un MatchListItem
**When** l'item est sélectionné
**Then** la card s'expand pour montrer plus de détails
**And** les détails incluent graphique d'énergie, historique

## Tasks / Subtasks

- [x] Créer le composant MatchListItem (AC: #1)
  - [x] Créer `src/components/dashboard/MatchListItem.tsx`
  - [x] Accepter props: `match` (Match object)
  - [x] Afficher: équipes (home/away), date/heure, Confidence Meter
  - [x] Utiliser le composant `ConfidenceMeter`
  - [x] Utiliser shadcn/ui components (Card, Badge)

- [x] Implémenter l'expansion des détails (AC: #2)
  - [x] Créer l'état d'expansion (`expanded`)
  - [x] Gérer le tap/clic pour expand/collapse
  - [x] Afficher les détails: graphique d'énergie, historique
  - [x] Utiliser une transition fluide (300ms)
  - [x] Optimiser les performances avec lazy loading

- [x] Créer les tests du composant (Tous AC)
  - [x] Tester l'affichage des matchs
  - [x] Tester le tri par date
  - [x] Tester l'expansion/collapse
  - [x] Tester l'affichage du Confidence Meter
  - [x] Tester la responsivité (mobile/desktop)

- [x] Intégrer le composant dans la liste (AC: #1)
  - [x] Utiliser le composant dans `MatchList.tsx`
  - [x] Trier les matchs par date
  - [x] Gérer l'état de sélection
  - [x] Vérifier la cohérence visuelle
  - [x] Tester avec plusieurs matchs

## Dev Notes

### Stack Technique
- **UI:** shadcn/ui + Tailwind CSS
- **State:** React useState
- **Animations:** CSS transitions

### File Structure
```
src/components/dashboard/
└── MatchListItem.tsx
```

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

## Dev Agent Record

### Agent Model Used
GLM-4.7

### Completion Notes List
- Créé le composant Badge dans `src/components/ui/badge.tsx` pour shadcn/ui
- Créé le composant EnergyWave minimal dans `src/components/dashboard/EnergyWave.tsx`
- Mis à jour `MatchListItem.tsx` avec:
  - Utilisation de shadcn/ui Card et Badge
  - Affichage des équipes, date/heure, et ConfidenceMeter
  - Implémentation de l'état d'expansion avec transition fluide de 300ms
  - Lazy loading du composant EnergyWave
  - Affichage des détails (graphique d'énergie, historique, prédiction)
  - Formatage intelligent des dates (Aujourd'hui, Demain, Dans X jours, Il y a X jours)
- Créé `MatchList.tsx` avec tri par date (prochains matchs en premier)
- Créé 24 tests unitaires pour MatchListItem (tous passants)
- Créé 9 tests unitaires pour MatchList (tous passants)

### File List
- `src/components/ui/badge.tsx` (nouveau)
- `src/components/dashboard/MatchListItem.tsx` (modifié)
- `src/components/dashboard/EnergyWave.tsx` (nouveau)
- `src/components/dashboard/MatchList.tsx` (nouveau)
- `src/tests/match-list-item.test.tsx` (modifié)
- `src/tests/match-list.test.tsx` (nouveau)