chartbastan/_bmad-output/implementation-artifacts/6-3-implémenter-l-historique-personnel-avec-roi.md

Story 6.3: Implémenter l'historique personnel avec ROI

Status: review

Story

As a utilisateur, I want voir mon historique de prédictions consultées avec mon ROI, So que je peux suivre ma performance personnelle.

Acceptance Criteria

Given j'ai consulté plusieurs prédictions When j'accède à la section Historique Then je vois la liste de mes prédictions consultées And chaque prédiction montre : match, date consultée, confidence, résultat (si connu) And mon ROI personnel est calculé et affiché (ex: "+240€ depuis inscription")

Given une prédiction que j'ai consultée est confirmée When le résultat du match est connu Then la prédiction est marquée comme correcte ou incorrecte And mon taux de précision personnel est mis à jour And un badge de succès est affiché si la prédiction était correcte

Tasks / Subtasks

• Créer la page d'historique (AC: #1)

  • Créer src/app/(dashboard)/historique/page.tsx
  • Récupérer l'historique des prédictions consultées depuis l'API
  • Créer la liste des prédictions
  • Afficher chaque prédiction avec ses détails
  • Utiliser shadcn/ui components (Card, Badge, Table)

• Créer le composant de prédiction historique (AC: #1)

  • Créer src/components/history/PredictionHistoryItem.tsx
  • Afficher: match, date consultée, confidence, résultat
  • Ajouter icône de succès si prédiction correcte
  • Ajouter badge de résultat
  • Utiliser Confidence Meter

• Calculer et afficher le ROI (AC: #1)

  • Créer src/hooks/useROI.ts
  • Calculer le ROI depuis le premier jour
  • Formater l'affichage (ex: "+240€ depuis inscription")
  • Afficher le ROI en haut de la page
  • Gérer les cas sans gains/pertes

• Mettre à jour les résultats des prédictions (AC: #2)

  • Créer src/services/predictionService.ts
  • Créer la fonction updatePredictionResult()
  • Marquer les prédictions comme correctes/incorrectes
  • Mettre à jour le taux de précision personnel
  • Appeler cette fonction quand le résultat d'un match est connu

• Créer le composant de badge de succès (AC: #2)

  • Créer src/components/history/SuccessBadge.tsx
  • Afficher badge si prédiction correcte
  • Ajouter animation ou effet visuel
  • Utiliser shadcn/ui Badge
  • Gérer l'affichage sur mobile

• Créer le composant de taux de précision (AC: #2)

  • Créer src/components/history/AccuracyRate.tsx
  • Calculer le taux de précision personnel
  • Afficher le pourcentage avec visuel
  • Afficher le nombre total de prédictions
  • Utiliser Confidence Meter ou similaire

• Tester l'historique complet (Tous AC)

  • Tester l'affichage de l'historique
  • Tester le calcul du ROI
  • Tester la mise à jour des résultats
  • Tester l'affichage du taux de précision
  • Tester sur mobile et desktop

Dev Notes

Stack Technique

• API: React Query pour le cache
• State: Zustand
• UI: shadcn/ui + Tailwind CSS
• Calculs: JavaScript/TypeScript

File Structure

src/
├── app/
│   └── (dashboard)/
│       └── historique/page.tsx
├── components/
│   └── history/
│       ├── PredictionHistoryItem.tsx
│       ├── SuccessBadge.tsx
│       └── AccuracyRate.tsx
├── hooks/
│   └── useROI.ts
└── services/
    └── predictionService.ts

References

• [Source: _bmad-output/planning-artifacts/epics.md#Story-6.3]

Dev Agent Record

Agent Model Used

GLM-4.7

Completion Notes List

• Historique personnel créé avec succès
• ROI calculé et affiché (modèle: correct=+100€, incorrect=-50€)
• Mise à jour des résultats fonctionnelle via API PUT endpoint
• Taux de précision personnel implémenté avec visualisation
• Composants UI créés: SuccessBadge, AccuracyRate, PredictionHistoryItem
• Hooks personnalisés créés: useROI, usePredictionHistory
• Service PredictionService pour gestion des prédictions utilisateur
• Base de données étendue avec table user_predictions
• API backend créée pour le suivi des prédictions utilisateur
• Tests unitaires complets pour tous les composants et services

File List

Backend

• backend/alembic/versions/add_user_predictions_tracking.py
• backend/app/models/user_prediction.py
• backend/app/models/__init__.py (modifié)
• backend/app/models/user.py (modifié)
• backend/app/models/prediction.py (modifié)
• backend/app/schemas/user_prediction.py
• backend/app/services/user_prediction_service.py
• backend/app/api/v1/user_predictions.py
• backend/app/api/v1/__init__.py (modifié)

Frontend

• chartbastan/src/app/(dashboard)/historique/page.tsx
• chartbastan/src/components/history/PredictionHistoryItem.tsx
• chartbastan/src/components/history/SuccessBadge.tsx
• chartbastan/src/components/history/AccuracyRate.tsx
• chartbastan/src/hooks/useROI.ts
• chartbastan/src/hooks/usePredictionHistory.ts
• chartbastan/src/services/predictionService.ts

Tests

• chartbastan/src/components/history/__tests__/SuccessBadge.test.tsx
• chartbastan/src/components/history/__tests__/AccuracyRate.test.tsx
• chartbastan/src/components/history/__tests__/PredictionHistoryItem.test.tsx
• chartbastan/src/hooks/__tests__/useROI.test.ts
• chartbastan/src/hooks/__tests__/usePredictionHistory.test.ts
• chartbastan/src/services/__tests__/predictionService.test.ts