143 lines
5.0 KiB
Markdown
143 lines
5.0 KiB
Markdown
# 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
|