feat(frontend): dashboard KPI complet avec navigation drawer
- DashboardProvider + DashboardService (GET /api/dashboard) - Modèle DashboardKpi (Ventes, Achats, Production, Stock) - DashboardScreen : grilles KpiCard, alertes stock, pull-to-refresh - KpiCard widget réutilisable (icône, couleur, valeur, sous-titre) - AppDrawer : navigation complète avec surbrillance route active - Placeholders pour modules Article/Ventes/Achats/Production/Stock - Rapport PFE : section 5.5 Dashboard (architecture, KPIs, UI) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -477,4 +477,81 @@ L'écran de connexion (`LoginScreen`) présente une interface épurée et profes
|
||||
|
||||
---
|
||||
|
||||
## 5.5 Tableau de Bord KPI (Dashboard)
|
||||
|
||||
### Objectif
|
||||
|
||||
Le tableau de bord est l'écran central de l'application, accessible uniquement aux utilisateurs ayant le rôle **PDG**. Il synthétise en temps réel l'état de l'entreprise à travers des indicateurs clés de performance (KPI).
|
||||
|
||||
### Données affichées
|
||||
|
||||
L'écran récupère les données depuis l'endpoint `GET /api/dashboard` et les affiche en trois sections :
|
||||
|
||||
**Section Ventes (mois en cours)**
|
||||
|
||||
| KPI | Description |
|
||||
|-----|-------------|
|
||||
| Chiffre d'affaires | Montant total des ventes du mois en TND |
|
||||
| Commandes ce mois | Nombre de bons de commande clients créés |
|
||||
| Commandes en cours | Commandes en attente de livraison |
|
||||
|
||||
**Section Achats & Production**
|
||||
|
||||
| KPI | Description |
|
||||
|-----|-------------|
|
||||
| Achats en attente | Bons de commande fournisseurs non réceptionnés |
|
||||
| OF en cours | Ordres de fabrication au statut LANCE |
|
||||
| OF planifiés | Ordres de fabrication au statut PLANIFIE |
|
||||
|
||||
**Section Stock**
|
||||
|
||||
- Nombre d'articles dont le stock est inférieur au seuil minimum
|
||||
- Liste détaillée des articles en alerte avec leur quantité en stock actuelle
|
||||
|
||||
### Architecture technique
|
||||
|
||||
La gestion du dashboard suit le pattern **Provider** :
|
||||
|
||||
```
|
||||
GET /api/dashboard
|
||||
│
|
||||
DashboardService.fetchKpis()
|
||||
│
|
||||
DashboardProvider (ChangeNotifier)
|
||||
├── isLoading
|
||||
├── error
|
||||
└── kpi: DashboardKpi
|
||||
├── VentesKpi
|
||||
├── AchatsKpi
|
||||
├── ProductionKpi
|
||||
└── StockKpi
|
||||
│
|
||||
DashboardScreen (Consumer)
|
||||
├── KpiCard × 6 (grille 2 colonnes)
|
||||
└── _StockSection (liste alertes)
|
||||
```
|
||||
|
||||
### Navigation (Drawer)
|
||||
|
||||
Un menu latéral (`AppDrawer`) permet la navigation entre tous les modules :
|
||||
- Tableau de bord
|
||||
- Articles
|
||||
- Ventes
|
||||
- Achats
|
||||
- Production
|
||||
- Stock
|
||||
- Déconnexion
|
||||
|
||||
Le drawer affiche le rôle de l'utilisateur connecté et met en surbrillance la section active.
|
||||
|
||||
### Comportement UI
|
||||
|
||||
- **Pull-to-refresh** : glisser vers le bas recharge les KPIs
|
||||
- **Bouton actualiser** dans l'AppBar
|
||||
- **État chargement** : spinner centré
|
||||
- **État erreur** : message avec bouton "Réessayer"
|
||||
- **Alertes stock** : icône verte si tout va bien, rouge avec liste si alertes
|
||||
|
||||
---
|
||||
|
||||
*[Section à compléter avec captures d'écran lors de la finalisation du rapport]*
|
||||
|
||||
Reference in New Issue
Block a user