chartbastan/_bmad-output/implementation-artifacts/5-2-créer-le-composant-matchlistitem.md

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

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

  • Créer src/components/dashboard/MatchListItem.tsx
  • Accepter props: match (Match object)
  • Afficher: équipes (home/away), date/heure, Confidence Meter
  • Utiliser le composant ConfidenceMeter
  • Utiliser shadcn/ui components (Card, Badge)

• Implémenter l'expansion des détails (AC: #2)

  • Créer l'état d'expansion (expanded)
  • Gérer le tap/clic pour expand/collapse
  • Afficher les détails: graphique d'énergie, historique
  • Utiliser une transition fluide (300ms)
  • Optimiser les performances avec lazy loading

• Créer les tests du composant (Tous AC)

  • Tester l'affichage des matchs
  • Tester le tri par date
  • Tester l'expansion/collapse
  • Tester l'affichage du Confidence Meter
  • Tester la responsivité (mobile/desktop)

• Intégrer le composant dans la liste (AC: #1)

  • Utiliser le composant dans MatchList.tsx
  • Trier les matchs par date
  • Gérer l'état de sélection
  • Vérifier la cohérence visuelle
  • 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)