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:
Claude Sonnet 4.6
@@ -1,31 +1,290 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import '../providers/auth_provider.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
|
||||
class DashboardScreen extends StatelessWidget {
|
||||
import '../providers/dashboard_provider.dart';
|
||||
import '../models/dashboard_kpi.dart';
|
||||
import '../widgets/kpi_card.dart';
|
||||
import '../widgets/app_drawer.dart';
|
||||
|
||||
class DashboardScreen extends StatefulWidget {
|
||||
const DashboardScreen({super.key});
|
||||
|
||||
@override
|
||||
State<DashboardScreen> createState() => _DashboardScreenState();
|
||||
}
|
||||
|
||||
class _DashboardScreenState extends State<DashboardScreen> {
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
context.read<DashboardProvider>().load();
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final auth = context.watch<AuthProvider>();
|
||||
final provider = context.watch<DashboardProvider>();
|
||||
final currencyFmt =
|
||||
NumberFormat.currency(locale: 'fr_TN', symbol: 'TND', decimalDigits: 3);
|
||||
final dateFmt = DateFormat('EEEE d MMMM yyyy', 'fr_FR');
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: const Color(0xFFF5F7FA),
|
||||
appBar: AppBar(
|
||||
title: const Text('Tableau de bord'),
|
||||
backgroundColor: Colors.white,
|
||||
elevation: 0,
|
||||
title: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Text('Tableau de bord',
|
||||
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
|
||||
Text(
|
||||
dateFmt.format(DateTime.now()),
|
||||
style: TextStyle(fontSize: 11, color: Colors.grey[500]),
|
||||
),
|
||||
],
|
||||
),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.logout),
|
||||
onPressed: () async {
|
||||
await auth.logout();
|
||||
if (context.mounted) context.go('/login');
|
||||
},
|
||||
icon: const Icon(Icons.refresh_outlined),
|
||||
tooltip: 'Actualiser',
|
||||
onPressed: () => context.read<DashboardProvider>().load(),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
],
|
||||
),
|
||||
body: const Center(
|
||||
child: Text('Dashboard — en cours de développement'),
|
||||
drawer: const AppDrawer(currentRoute: '/dashboard'),
|
||||
body: _buildBody(provider, currencyFmt),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBody(DashboardProvider provider, NumberFormat currencyFmt) {
|
||||
if (provider.isLoading) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
}
|
||||
|
||||
if (provider.error != null) {
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(Icons.wifi_off_outlined, size: 56, color: Colors.grey[400]),
|
||||
const SizedBox(height: 16),
|
||||
Text(provider.error!,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(color: Colors.grey[600])),
|
||||
const SizedBox(height: 20),
|
||||
ElevatedButton.icon(
|
||||
onPressed: () => context.read<DashboardProvider>().load(),
|
||||
icon: const Icon(Icons.refresh),
|
||||
label: const Text('Réessayer'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
final kpi = provider.kpi;
|
||||
if (kpi == null) return const SizedBox.shrink();
|
||||
|
||||
return RefreshIndicator(
|
||||
onRefresh: () => context.read<DashboardProvider>().load(),
|
||||
child: SingleChildScrollView(
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_SectionHeader(title: 'Ventes — Ce mois'),
|
||||
const SizedBox(height: 12),
|
||||
_VentesGrid(kpi: kpi, currencyFmt: currencyFmt),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
_SectionHeader(title: 'Achats & Production'),
|
||||
const SizedBox(height: 12),
|
||||
_AchatsProductionGrid(kpi: kpi),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
_SectionHeader(title: 'Stock'),
|
||||
const SizedBox(height: 12),
|
||||
_StockSection(kpi: kpi),
|
||||
const SizedBox(height: 32),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SectionHeader extends StatelessWidget {
|
||||
final String title;
|
||||
const _SectionHeader({required this.title});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Text(
|
||||
title,
|
||||
style: const TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Color(0xFF1F2937),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _VentesGrid extends StatelessWidget {
|
||||
final DashboardKpi kpi;
|
||||
final NumberFormat currencyFmt;
|
||||
|
||||
const _VentesGrid({required this.kpi, required this.currencyFmt});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GridView.count(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
crossAxisCount: 2,
|
||||
mainAxisSpacing: 12,
|
||||
crossAxisSpacing: 12,
|
||||
childAspectRatio: 1.1,
|
||||
children: [
|
||||
KpiCard(
|
||||
title: "Chiffre d'affaires",
|
||||
value: currencyFmt.format(kpi.ventes.chiffreAffairesMois),
|
||||
subtitle: 'Ce mois',
|
||||
icon: Icons.trending_up,
|
||||
color: const Color(0xFF10B981),
|
||||
),
|
||||
KpiCard(
|
||||
title: 'Commandes ce mois',
|
||||
value: '${kpi.ventes.nbCommandesMois}',
|
||||
subtitle: 'Bons de commande',
|
||||
icon: Icons.receipt_long_outlined,
|
||||
color: const Color(0xFF3B82F6),
|
||||
),
|
||||
KpiCard(
|
||||
title: 'Commandes en cours',
|
||||
value: '${kpi.ventes.commandesEnCours}',
|
||||
subtitle: 'En attente livraison',
|
||||
icon: Icons.pending_actions_outlined,
|
||||
color: const Color(0xFFF59E0B),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _AchatsProductionGrid extends StatelessWidget {
|
||||
final DashboardKpi kpi;
|
||||
const _AchatsProductionGrid({required this.kpi});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GridView.count(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
crossAxisCount: 2,
|
||||
mainAxisSpacing: 12,
|
||||
crossAxisSpacing: 12,
|
||||
childAspectRatio: 1.1,
|
||||
children: [
|
||||
KpiCard(
|
||||
title: 'Achats en attente',
|
||||
value: '${kpi.achats.commandesEnAttente}',
|
||||
subtitle: 'Bons non réceptionnés',
|
||||
icon: Icons.local_shipping_outlined,
|
||||
color: const Color(0xFF8B5CF6),
|
||||
),
|
||||
KpiCard(
|
||||
title: 'OF en cours',
|
||||
value: '${kpi.production.ofEnCours}',
|
||||
subtitle: 'Ordres de fabrication',
|
||||
icon: Icons.precision_manufacturing_outlined,
|
||||
color: const Color(0xFFEF4444),
|
||||
),
|
||||
KpiCard(
|
||||
title: 'OF planifiés',
|
||||
value: '${kpi.production.ofPlanifies}',
|
||||
subtitle: 'En attente lancement',
|
||||
icon: Icons.schedule_outlined,
|
||||
color: const Color(0xFF6366F1),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _StockSection extends StatelessWidget {
|
||||
final DashboardKpi kpi;
|
||||
const _StockSection({required this.kpi});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final enAlerte = kpi.stock.articlesEnAlerte;
|
||||
final details = kpi.stock.articlesEnAlerteDetails;
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
KpiCard(
|
||||
title: 'Articles en alerte stock',
|
||||
value: '$enAlerte',
|
||||
subtitle: enAlerte == 0
|
||||
? 'Tous les articles sont suffisamment approvisionnés'
|
||||
: 'Stock inférieur au seuil minimum',
|
||||
icon: enAlerte == 0
|
||||
? Icons.check_circle_outline
|
||||
: Icons.warning_amber_outlined,
|
||||
color: enAlerte == 0
|
||||
? const Color(0xFF10B981)
|
||||
: const Color(0xFFEF4444),
|
||||
),
|
||||
if (details.isNotEmpty) ...[
|
||||
const SizedBox(height: 12),
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.05),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 2)),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
children: details.map<Widget>((item) {
|
||||
final m = item as Map<String, dynamic>;
|
||||
return ListTile(
|
||||
leading: Container(
|
||||
padding: const EdgeInsets.all(6),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.red[50],
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Icon(Icons.warning_amber,
|
||||
color: Colors.red[600], size: 18),
|
||||
),
|
||||
title: Text(
|
||||
m['reference'] ?? m['designation'] ?? 'Article',
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.w600, fontSize: 13),
|
||||
),
|
||||
trailing: Text(
|
||||
'Stock: ${m['quantiteEnStock'] ?? 0}',
|
||||
style: TextStyle(color: Colors.red[600], fontSize: 12),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user