# Story 5.4: Créer le dashboard principal avec navigation

Status: review

## Acceptance Criteria

**Given** je suis connecté
**When** j'accède au dashboard
**Then** la navigation bottom bar est affichée (mobile) avec 4 onglets : Accueil, Matchs, Historique, Profil
**And** la navigation top tabs est affichée (desktop) avec les mêmes sections
**And** la zone de clic est min 44x44px (mobile) / 48x48px (desktop)

**Given** je suis sur mobile
**When** je swipe gauche/droite
**Then** je navigue entre les onglets
**And** l'animation de transition est fluide (300ms)

**Given** je suis sur le dashboard
**When** je pull-to-refresh
**Then** les prédictions sont rafraîchies
**And** un indicateur de chargement est affiché

## Tasks / Subtasks

- [x] Créer la structure de navigation (AC: #1)
  - [x] Créer `src/app/(dashboard)/layout.tsx`
  - [x] Créer la navigation bottom bar pour mobile
  - [x] Créer la navigation top tabs pour desktop
  - [x] Utiliser shadcn/ui components (Tabs, Button)
  - [x] Configurer les zones de clic (44x44px mobile, 48x48px desktop)

- [x] Créer les pages du dashboard (AC: #1)
  - [x] Créer `src/app/(dashboard)/accueil/page.tsx`
  - [x] Créer `src/app/(dashboard)/matchs/page.tsx`
  - [x] Créer `src/app/(dashboard)/historique/page.tsx`
  - [x] Créer `src/app/(dashboard)/profil/page.tsx`
  - [x] Utiliser le layout dashboard commun

- [x] Implémenter la navigation mobile (AC: #2)
  - [x] Créer `src/components/navigation/BottomNav.tsx`
  - [x] Gérer le swipe gauche/droite
  - [x] Créer une animation fluide (300ms)
  - [x] Gérer l'état de l'onglet actif
  - [x] Optimiser les performances

- [x] Implémenter la navigation desktop (AC: #1)
  - [x] Créer `src/components/navigation/TopTabs.tsx`
  - [x] Afficher les onglets horizontalement
  - [x] Gérer l'état de l'onglet actif
  - [x] Cacher sur mobile, afficher sur desktop
  - [x] Utiliser media queries CSS

- [x] Implémenter le pull-to-refresh (AC: #3)
  - [x] Installer `@tanstack/react-query` pour le cache
  - [x] Créer `src/hooks/useRefresh.ts`
  - [x] Implémenter le pull-to-refresh avec `react-pull-to-refresh`
  - [x] Rafraîchir les prédictions lors du refresh
  - [x] Afficher un indicateur de chargement

- [x] Créer les tests du dashboard (Tous AC)
  - [x] Tester la navigation sur mobile
  - [x] Tester la navigation sur desktop
  - [x] Tester le swipe gauche/droite
  - [x] Tester le pull-to-refresh
  - [x] Tester la responsivité

## Dev Notes

### Stack Technique
- **Navigation:** Custom components + React state
- **Pull-to-refresh:** `react-pull-to-refresh`
- **State:** React Query + Zustand
- **UI:** shadcn/ui + Tailwind CSS

### File Structure
```
src/
├── app/
│   └── (dashboard)/
│       ├── layout.tsx
│       ├── accueil/page.tsx
│       ├── matchs/page.tsx
│       ├── historique/page.tsx
│       └── profil/page.tsx
└── components/
    └── navigation/
        ├── BottomNav.tsx
        └── TopTabs.tsx
```

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

## Dev Agent Record

### Agent Model Used
GLM-4.7

### Implementation Plan
1. Créer la structure de navigation avec layout, bottom nav et top tabs
2. Implémenter les pages du dashboard (accueil, matchs, historique, profil)
3. Ajouter la navigation mobile avec swipe gauche/droite
4. Intégrer le pull-to-refresh avec react-pull-to-refresh
5. Créer des tests complets pour valider toutes les fonctionnalités

### Debug Log
- ✅ Layout dashboard créé avec Next.js App Router
- ✅ BottomNav et TopTabs implémentés avec shadcn/ui
- ✅ Swipe navigation implémenté avec événements tactiles
- ✅ Pull-to-refresh intégré avec react-pull-to-refresh
- ✅ Tous les tests créés et passants (18 tests)
- ✅ Linting valide sans erreurs sur le code nouvellement créé

### Completion Notes List
- Structure de navigation implémentée avec succès (layout, bottom nav, top tabs)
- 4 pages du dashboard créées (accueil, matchs, historique, profil)
- Navigation mobile avec swipe gauche/droite fonctionnelle
- Navigation desktop avec top tabs responsive
- Pull-to-refresh intégré avec React Query
- Tests complets créés et validés (18 tests passants)
- Code linté et conforme aux standards du projet

### File List
- `src/app/(dashboard)/layout.tsx`
- `src/app/(dashboard)/accueil/page.tsx`
- `src/app/(dashboard)/matchs/page.tsx`
- `src/app/(dashboard)/historique/page.tsx`
- `src/app/(dashboard)/profil/page.tsx`
- `src/components/navigation/BottomNav.tsx`
- `src/components/navigation/TopTabs.tsx`
- `src/components/dashboard/DashboardWrapper.tsx`
- `src/hooks/useRefresh.ts`
- `src/tests/dashboard-layout.test.tsx`
- `src/tests/navigation.test.tsx`
- `src/tests/dashboard-wrapper.test.tsx`

### Change Log
- 2026-01-17: Implémentation complète du dashboard principal avec navigation
  - Création de la structure de navigation responsive
  - Implémentation du swipe gauche/droite sur mobile
  - Intégration du pull-to-refresh
  - Création de 18 tests couvrant toutes les fonctionnalités
