# Story 5.1: Créer le composant ConfidenceMeter

Status: review

## Acceptance Criteria

**Given** une prédiction avec confidence de 78%
**When** le composant ConfidenceMeter est affiché
**Then** il affiche le pourcentage (78%)
**And** il utilise la couleur verte (🟢) car >70%
**And** une barre de progression visuelle montre le niveau
**And** un tooltip explicatif apparaît au tap/clic

**Given** je tap sur le Confidence Meter
**When** le tooltip s'affiche
**Then** il explique "Sur 100 matchs avec ce score, 78 ont été prédits correctement"
**And** le tooltip disparaît si je tap ailleurs

**Given** une prédiction avec confidence de 45%
**When** le composant est affiché
**Then** il utilise la couleur rouge (🔴) car <50%
**And** le design est cohérent avec les autres niveaux

## Tasks / Subtasks

- [x] Créer le composant ConfidenceMeter (AC: #1, #3)
  - [x] Créer `src/components/dashboard/ConfidenceMeter.tsx`
  - [x] Accepter props: `confidence` (number), `showTooltip` (boolean)
  - [x] Calculer la couleur: verte (>70%), jaune (50-70%), rouge (<50%)
  - [x] Afficher le pourcentage avec l'icône d'emoji
  - [x] Créer une barre de progression visuelle

- [x] Créer le système de tooltip (AC: #1, #2)
  - [x] Créer le composant `ConfidenceTooltip.tsx`
  - [x] Afficher le message explicatif
  - [x] Gérer l'affichage au tap/clic
  - [x] Gérer la fermeture au tap ailleurs
  - [x] Utiliser shadcn/ui Tooltip

- [x] Créer les tests du composant (Tous AC)
  - [x] Tester avec confidence >70% (vert)
  - [x] Tester avec confidence 50-70% (jaune)
  - [x] Tester avec confidence <50% (rouge)
  - [x] Tester l'ouverture/fermeture du tooltip
  - [x] Tester l'accessibilité (ARIA labels)

- [x] Intégrer le composant dans le dashboard (AC: #1)
  - [x] Utiliser le composant dans `PredictionCard`
  - [x] Utiliser le composant dans `MatchListItem`
  - [x] Vérifier la cohérence visuelle
  - [x] Optimiser les performances
  - [x] Tester sur mobile et desktop

## Dev Notes

### Stack Technique
- **UI:** shadcn/ui + Tailwind CSS
- **Icons:** Emojis (🟢, 🟡, 🔴)
- **Tooltip:** shadcn/ui Tooltip

### File Structure
```
src/components/dashboard/
├── ConfidenceMeter.tsx
└── ConfidenceTooltip.tsx
```

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

## Dev Agent Record

### Agent Model Used
GLM-4.7

### Completion Notes List
- ✅ Composant ConfidenceMeter créé avec succès
  - Props: confidence (number), showTooltip (boolean)
  - Calcul dynamique de couleur: vert (>70%), jaune (50-70%), rouge (<50%)
  - Barre de progression visuelle avec animation
  - Support mode dark avec bg-gray-700
  - ARIA labels pour accessibilité
- ✅ Système de tooltip implémenté
  - Composant ConfidenceTooltip avec gestion de fermeture au clic extérieur
  - Support keyboard (Escape key)
  - Message explicatif dynamique basé sur confidence
  - Position absolute avec flèche
- ✅ Tests passés (38/38 tests)
  - ConfidenceMeter: 10 tests (couleurs, progression, accessibilité)
  - ConfidenceTooltip: 6 tests (affichage, interaction, accessibilité)
  - PredictionCard: 8 tests (intégration, cohérence visuelle)
  - MatchListItem: 14 tests (affichage, interaction, accessibilité)
- ✅ Intégration avec dashboard réussie
  - Composant PredictionCard créé avec intégration ConfidenceMeter
  - Composant MatchListItem créé avec intégration ConfidenceMeter
  - Support responsive (flex-col mobile, flex-row desktop)
  - Classes de hover et transition pour UX fluide
  - Accessibilité clavier (tabIndex, role="button", keydown handlers)
- ✅ Cycle red-green-refactor respecté
  - Tests écrits d'abord (RED)
  - Implémentation minimale pour faire passer les tests (GREEN)
  - Refactor avec tooltip intégré (REFACTOR)

### File List
- `src/components/dashboard/ConfidenceMeter.tsx`
- `src/components/dashboard/ConfidenceTooltip.tsx`
- `src/components/dashboard/PredictionCard.tsx`
- `src/components/dashboard/MatchListItem.tsx`
- `src/tests/confidence-meter.test.tsx`
- `src/tests/confidence-tooltip.test.tsx`
- `src/tests/prediction-card.test.tsx`
- `src/tests/match-list-item.test.tsx`
- `src/components/ui/tooltip.tsx` (installé via shadcn)