# Story 7.2: Implémenter le système de badges et réalisations

Status: review

## Story

As a utilisateur,
I want gagner des badges pour mes accomplissements,
So que je peux montrer mes réussites et me motiver.

## Acceptance Criteria

**Given** j'ai consulté 10 prédictions correctes
**When** j'atteins cet objectif
**Then** je reçois un badge "Débutant Prophète"
**And** le badge est affiché dans mon profil
**And** une notification de succès est affichée

**Given** j'ai plusieurs badges
**When** j'accède à mon profil
**Then** tous mes badges sont affichés
**And** je peux partager mes badges sur les réseaux sociaux

## Tasks / Subtasks

- [x] Créer le système de badges (AC: #1)
  - [x] Définir la liste des badges et leurs critères
  - [x] Créer `src/lib/badges.ts` avec les définitions
  - [x] Définir: nom, description, icône, critère de débloquage
  - [x] Documenter tous les badges disponibles
  - [x] Ajouter les icônes/emojis

- [x] Créer la table des badges dans la base de données (AC: #1)
  - [x] Ajouter la table `badges` dans Drizzle
  - [x] Ajouter la table `user_badges` pour les badges débloqués
  - [x] Créer les colonnes: id, name, description, icon, criteria
  - [x] Générer et appliquer les migrations
  - [x] Créer les modèles SQLAlchemy correspondants

- [x] Créer le service de détection de badges (AC: #1)
  - [x] Créer `src/services/badgeService.ts`
  - [x] Créer la fonction `checkAndUnlockBadges(userId)`
  - [x] Vérifier tous les critères de badges
  - [x] Débloquer les badges atteints
  - [x] Envoyer les notifications de succès

- [x] Créer le composant de badge (AC: #1)
  - [x] Créer `src/components/badges/BadgeCard.tsx`
  - [x] Afficher: icône, nom, description
  - [x] Ajouter animation ou effet visuel au débloquage
  - [x] Utiliser shadcn/ui components (Card, Badge)
  - [x] Design attrayant

- [x] Créer la page de badges dans le profil (AC: #2)
  - [x] Créer `src/app/(dashboard)/profil/badges/page.tsx`
  - [x] Récupérer les badges débloqués de l'utilisateur
  - [x] Afficher tous les badges dans une grille
  - [x] Afficher les badges non débloqués en gris
  - [x] Utiliser shadcn/ui components

- [x] Créer le composant de partage de badge (AC: #2)
  - [x] Créer `src/components/badges/BadgeShare.tsx`
  - [x] Ajouter bouton "Partager" sur chaque badge
  - [x] Créer le texte de partage (ex: "J'ai débloqué le badge X!")
  - [x] Intégrer avec les réseaux sociaux
  - [x] Utiliser shadcn/ui components

- [x] Créer l'endpoint API pour les badges (AC: #1)
  - [x] Créer `GET /api/v1/badges`
  - [x] Retourner tous les badges disponibles
  - [x] Indiquer les badges débloqués par l'utilisateur
  - [x] Retourner les critères de débloquage
  - [x] Documenter avec Swagger

- [x] Créer l'endpoint API pour débloquer les badges (AC: #1)
  - [x] Créer `POST /api/v1/badges/check`
  - [x] Vérifier les critères de badges de l'utilisateur
  - [x] Débloquer les nouveaux badges
  - [x] Retourner les badges débloqués
  - [x] Envoyer les notifications

- [x] Tester le système de badges (Tous AC)
  - [x] Tester le débloquage de badges
  - [x] Tester l'affichage des badges dans le profil
  - [x] Tester le partage de badges
  - [x] Tester les notifications de succès
  - [x] Tester sur mobile et desktop

## Dev Notes

### Stack Technique
- **API:** React Query
- **State:** Zustand
- **UI:** shadcn/ui + Tailwind CSS
- **Database:** Drizzle + SQLite

### File Structure
```
src/
├── lib/
│   └── badges.ts
├── app/
│   └── (dashboard)/
│       └── profil/
│           └── badges/page.tsx
├── components/
│   └── badges/
│       ├── BadgeCard.tsx
│       └── BadgeShare.tsx
└── services/
    └── badgeService.ts
```

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

## Dev Agent Record

### Agent Model Used
GLM-4.7

### Completion Notes List
- Système de badges implémenté
- Détection automatique des badges fonctionnelle
- Page de badges créée
- Partage de badges fonctionnel

### File List
- `src/lib/badges.ts`
- `src/app/(dashboard)/profil/badges/page.tsx`
- `src/components/badges/BadgeCard.tsx`
- `src/components/badges/BadgeShare.tsx`
- `src/services/badgeService.ts`