# 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

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

- [x] Créer le composant de prédiction historique (AC: #1)
  - [x] Créer `src/components/history/PredictionHistoryItem.tsx`
  - [x] Afficher: match, date consultée, confidence, résultat
  - [x] Ajouter icône de succès si prédiction correcte
  - [x] Ajouter badge de résultat
  - [x] Utiliser Confidence Meter

- [x] Calculer et afficher le ROI (AC: #1)
  - [x] Créer `src/hooks/useROI.ts`
  - [x] Calculer le ROI depuis le premier jour
  - [x] Formater l'affichage (ex: "+240€ depuis inscription")
  - [x] Afficher le ROI en haut de la page
  - [x] Gérer les cas sans gains/pertes

- [x] Mettre à jour les résultats des prédictions (AC: #2)
  - [x] Créer `src/services/predictionService.ts`
  - [x] Créer la fonction `updatePredictionResult()`
  - [x] Marquer les prédictions comme correctes/incorrectes
  - [x] Mettre à jour le taux de précision personnel
  - [x] Appeler cette fonction quand le résultat d'un match est connu

- [x] Créer le composant de badge de succès (AC: #2)
  - [x] Créer `src/components/history/SuccessBadge.tsx`
  - [x] Afficher badge si prédiction correcte
  - [x] Ajouter animation ou effet visuel
  - [x] Utiliser shadcn/ui Badge
  - [x] Gérer l'affichage sur mobile

- [x] Créer le composant de taux de précision (AC: #2)
  - [x] Créer `src/components/history/AccuracyRate.tsx`
  - [x] Calculer le taux de précision personnel
  - [x] Afficher le pourcentage avec visuel
  - [x] Afficher le nombre total de prédictions
  - [x] Utiliser Confidence Meter ou similaire

- [x] Tester l'historique complet (Tous AC)
  - [x] Tester l'affichage de l'historique
  - [x] Tester le calcul du ROI
  - [x] Tester la mise à jour des résultats
  - [x] Tester l'affichage du taux de précision
  - [x] 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`