chartbastan/_bmad-output/implementation-artifacts/5-4-créer-le-dashboard-principal-avec-navigation.md

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

• Créer la structure de navigation (AC: #1)

  • Créer src/app/(dashboard)/layout.tsx
  • Créer la navigation bottom bar pour mobile
  • Créer la navigation top tabs pour desktop
  • Utiliser shadcn/ui components (Tabs, Button)
  • Configurer les zones de clic (44x44px mobile, 48x48px desktop)

• Créer les pages du dashboard (AC: #1)

  • Créer src/app/(dashboard)/accueil/page.tsx
  • Créer src/app/(dashboard)/matchs/page.tsx
  • Créer src/app/(dashboard)/historique/page.tsx
  • Créer src/app/(dashboard)/profil/page.tsx
  • Utiliser le layout dashboard commun

• Implémenter la navigation mobile (AC: #2)

  • Créer src/components/navigation/BottomNav.tsx
  • Gérer le swipe gauche/droite
  • Créer une animation fluide (300ms)
  • Gérer l'état de l'onglet actif
  • Optimiser les performances

• Implémenter la navigation desktop (AC: #1)

  • Créer src/components/navigation/TopTabs.tsx
  • Afficher les onglets horizontalement
  • Gérer l'état de l'onglet actif
  • Cacher sur mobile, afficher sur desktop
  • Utiliser media queries CSS

• Implémenter le pull-to-refresh (AC: #3)

  • Installer @tanstack/react-query pour le cache
  • Créer src/hooks/useRefresh.ts
  • Implémenter le pull-to-refresh avec react-pull-to-refresh
  • Rafraîchir les prédictions lors du refresh
  • Afficher un indicateur de chargement

• Créer les tests du dashboard (Tous AC)

  • Tester la navigation sur mobile
  • Tester la navigation sur desktop
  • Tester le swipe gauche/droite
  • Tester le pull-to-refresh
  • 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