# Story 7.1: Implémenter le système de classement (Top 100)

Status: review

## Story

As a utilisateur,
I want voir le classement des meilleurs utilisateurs,
So que je peux me comparer avec la communauté.

## Acceptance Criteria

**Given** plusieurs utilisateurs ont consulté des prédictions
**When** j'accède au classement
**Then** je vois le Top 100 des utilisateurs
**And** le classement est basé sur le taux de précision et le nombre de prédictions consultées
**And** mon rang personnel est mis en évidence si je suis dans le Top 100

**Given** le classement est affiché
**When** je consulte la liste
**Then** chaque utilisateur montre : rang, pseudo (ou anonyme), précision, nombre de prédictions
**And** le design est attrayant et encourage la compétition saine

## Tasks / Subtasks

- [x] Créer la page de classement (AC: #1)
  - [x] Créer `src/app/(dashboard)/classement/page.tsx`
  - [x] Récupérer le Top 100 depuis l'API
  - [x] Afficher la liste des utilisateurs classés
  - [x] Utiliser shadcn/ui components (Card, Table, Badge)
  - [x] Design attrayant et encourageant

- [x] Créer le composant de classement item (AC: #2)
  - [x] Créer `src/components/leaderboard/LeaderboardItem.tsx`
  - [x] Afficher: rang, pseudo, précision, nombre de prédictions
  - [x] Ajouter icône de rang (médaille pour top 3)
  - [x] Utiliser shadcn/ui components
  - [x] Design responsive

- [x] Créer le composant de médaille (AC: #2)
  - [x] Créer `src/components/leaderboard/RankBadge.tsx`
  - [x] Afficher médaille pour rang 1, 2, 3
  - [x] Utiliser des icônes ou emojis (🥇, 🥈, 🥉)
  - [x] Ajouter animation ou effet visuel
  - [x] Utiliser shadcn/ui Badge

- [x] Créer le composant de rang personnel (AC: #1)
  - [x] Créer `src/components/leaderboard/PersonalRank.tsx`
  - [x] Récupérer le rang de l'utilisateur connecté
  - [x] Afficher le rang personnel en évidence
  - [x] Afficher message personnalisé (ex: "Tu es 42ème!")
  - [x] Utiliser shadcn/ui components

- [x] Créer l'endpoint API pour le classement (AC: #1)
  - [x] Créer `GET /api/v1/leaderboard`
  - [x] Calculer le classement des utilisateurs
  - [x] Filtrer Top 100 par taux de précision
  - [x] Inclure le nombre de prédictions comme critère secondaire
  - [x] Retourner la liste classée

- [x] Créer le système de calcul du classement (AC: #1, #2)
  - [x] Créer `src/services/leaderboardService.ts`
  - [x] Calculer le taux de précision pour chaque utilisateur
  - [x] Classer les utilisateurs par taux de précision
  - [x] Utiliser le nombre de prédictions comme tie-breaker
  - [x] Ajouter les données de l'utilisateur connecté

- [x] Tester le classement complet (Tous AC)
  - [x] Tester l'affichage du Top 100
  - [x] Tester le calcul du classement
  - [x] Tester l'affichage du rang personnel
  - [x] Tester le design attrayant
  - [x] Tester sur mobile et desktop

## Dev Notes

### Stack Technique
- **API:** React Query
- **State:** Zustand
- **UI:** shadcn/ui + Tailwind CSS
- **Calculs:** JavaScript/TypeScript

### File Structure
```
src/
├── app/
│   └── (dashboard)/
│       └── classement/page.tsx
├── components/
│   └── leaderboard/
│       ├── LeaderboardItem.tsx
│       ├── RankBadge.tsx
│       └── PersonalRank.tsx
└── services/
    └── leaderboardService.ts
```

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

## Dev Agent Record

### Agent Model Used
GLM-4.7

### Completion Notes List
- Système de classement Top 100 implémenté
- Calcul de classement fonctionnel
- Rang personnel affiché en évidence
- Design attrayant créé
- Composants UI créés avec shadcn/ui
- Tests unitaires écrits et passant
- Endpoint API FastAPI créé
- Service de calcul backend implémenté

### File List
Frontend (Next.js):
- `src/app/(dashboard)/classement/page.tsx`
- `src/components/leaderboard/LeaderboardItem.tsx`
- `src/components/leaderboard/RankBadge.tsx`
- `src/components/leaderboard/PersonalRank.tsx`
- `src/components/leaderboard/__tests__/RankBadge.test.tsx`
- `src/components/leaderboard/__tests__/LeaderboardItem.test.tsx`
- `src/components/leaderboard/__tests__/PersonalRank.test.tsx`
- `src/components/ui/skeleton.tsx`
- `src/services/leaderboardService.ts`
- `src/services/__tests__/leaderboardService.test.ts`
- `src/hooks/useUser.ts`

Backend (FastAPI):
- `backend/app/schemas/leaderboard.py`
- `backend/app/services/leaderboard_service.py`
- `backend/app/api/v1/leaderboard.py`
- `backend/app/main.py` (modifié pour inclure le routeur leaderboard)