lionsdev/unionflow-client-quarkus-primefaces-freya
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Version propre - Dashboard enhanced

Browse Source
This commit is contained in:
DahoudG
2025-09-13 19:05:06 +00:00
parent 3df010add7
commit 73459b3092
70 changed files with 15317 additions and 1498 deletions
Download Patch File Download Diff File Expand all files Collapse all files

679
unionflow-mobile-apps/lib/features/dashboard/presentation/pages/dashboard_page.dart
View File

@@ -1,7 +1,24 @@
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import '../../../../shared/theme/app_theme.dart';
// Imports des nouveaux widgets refactorisés
import '../widgets/welcome/welcome_section_widget.dart';
import '../widgets/kpi/kpi_cards_widget.dart';
import '../widgets/actions/quick_actions_widget.dart';
import '../widgets/activities/recent_activities_widget.dart';
import '../widgets/charts/charts_analytics_widget.dart';
/// Page principale du tableau de bord UnionFlow
///
/// Affiche une vue d'ensemble complète de l'association avec :
/// - Section d'accueil personnalisée
/// - Indicateurs clés de performance (KPI)
/// - Actions rapides et gestion
/// - Flux d'activités en temps réel
/// - Analyses et tendances graphiques
///
/// Architecture modulaire avec widgets réutilisables pour une
/// maintenabilité optimale et une évolutivité facilitée.
class DashboardPage extends StatelessWidget {
const DashboardPage({super.key});
@@ -16,11 +33,15 @@ class DashboardPage extends StatelessWidget {
actions: [
IconButton(
icon: const Icon(Icons.notifications_outlined),
onPressed: () {},
onPressed: () {
// TODO: Implémenter la navigation vers les notifications
},
),
IconButton(
icon: const Icon(Icons.settings_outlined),
onPressed: () {},
onPressed: () {
// TODO: Implémenter la navigation vers les paramètres
},
),
],
),
@@ -30,646 +51,32 @@ class DashboardPage extends StatelessWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Message de bienvenue
_buildWelcomeSection(context),
// 1. ACCUEIL & CONTEXTE - Message de bienvenue personnalisé
const WelcomeSectionWidget(),
const SizedBox(height: 24),
// Cartes KPI principales
_buildKPICards(context),
// 2. VISION GLOBALE - Indicateurs clés de performance (KPI)
// Vue d'ensemble immédiate de la santé de l'association
const KPICardsWidget(),
const SizedBox(height: 24),
// Graphiques et statistiques
_buildChartsSection(context),
// 3. ACTIONS PRIORITAIRES - Actions rapides et gestion
// Accès direct aux tâches critiques quotidiennes
const QuickActionsWidget(),
const SizedBox(height: 24),
// Actions rapides
_buildQuickActions(context),
// 4. SUIVI TEMPS RÉEL - Flux d'activités en direct
// Monitoring des événements récents et alertes
const RecentActivitiesWidget(),
const SizedBox(height: 24),
// Activités récentes
_buildRecentActivities(context),
// 5. ANALYSES APPROFONDIES - Graphiques et tendances
// Analyses détaillées pour la prise de décision stratégique
const ChartsAnalyticsWidget(),
],
),
),
),
);
}
Widget _buildWelcomeSection(BuildContext context) {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [AppTheme.primaryColor, AppTheme.primaryLight],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Bonjour !',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Text(
'Voici un aperçu de votre association',
style: TextStyle(
color: Colors.white.withOpacity(0.9),
fontSize: 16,
),
),
],
),
),
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(30),
),
child: const Icon(
Icons.dashboard,
color: Colors.white,
size: 30,
),
),
],
),
);
}
Widget _buildKPICards(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Indicateurs clés',
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: _buildKPICard(
context,
'Membres',
'1,247',
'+5.2%',
Icons.people,
AppTheme.primaryColor,
),
),
const SizedBox(width: 12),
Expanded(
child: _buildKPICard(
context,
'Revenus',
'€45,890',
'+12.8%',
Icons.euro,
AppTheme.successColor,
),
),
],
),
const SizedBox(height: 12),
Row(
children: [
Expanded(
child: _buildKPICard(
context,
'Événements',
'23',
'+3',
Icons.event,
AppTheme.accentColor,
),
),
const SizedBox(width: 12),
Expanded(
child: _buildKPICard(
context,
'Cotisations',
'89.5%',
'+2.1%',
Icons.payments,
AppTheme.infoColor,
),
),
],
),
],
);
}
Widget _buildKPICard(
BuildContext context,
String title,
String value,
String change,
IconData icon,
Color color,
) {
return Container(
padding: const EdgeInsets.all(16),
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(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: Icon(
icon,
color: color,
size: 20,
),
),
const Spacer(),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: AppTheme.successColor.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Text(
change,
style: const TextStyle(
color: AppTheme.successColor,
fontSize: 12,
fontWeight: FontWeight.w600,
),
),
),
],
),
const SizedBox(height: 12),
Text(
value,
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 4),
Text(
title,
style: const TextStyle(
fontSize: 14,
color: AppTheme.textSecondary,
),
),
],
),
);
}
Widget _buildChartsSection(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Analyses',
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: _buildLineChart(context),
),
const SizedBox(width: 12),
Expanded(
child: _buildPieChart(context),
),
],
),
],
);
}
Widget _buildLineChart(BuildContext context) {
return Container(
height: 200,
padding: const EdgeInsets.all(16),
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(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Évolution des membres',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 16),
Expanded(
child: LineChart(
LineChartData(
gridData: const FlGridData(show: false),
titlesData: const FlTitlesData(show: false),
borderData: FlBorderData(show: false),
lineBarsData: [
LineChartBarData(
spots: const [
FlSpot(0, 1000),
FlSpot(1, 1050),
FlSpot(2, 1100),
FlSpot(3, 1180),
FlSpot(4, 1247),
],
color: AppTheme.primaryColor,
barWidth: 3,
isStrokeCapRound: true,
dotData: const FlDotData(show: false),
belowBarData: BarAreaData(
show: true,
color: AppTheme.primaryColor.withOpacity(0.1),
),
),
],
),
),
),
],
),
);
}
Widget _buildPieChart(BuildContext context) {
return Container(
height: 200,
padding: const EdgeInsets.all(16),
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(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Répartition des membres',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 16),
Expanded(
child: PieChart(
PieChartData(
sectionsSpace: 0,
centerSpaceRadius: 40,
sections: [
PieChartSectionData(
color: AppTheme.primaryColor,
value: 45,
title: '45%',
radius: 50,
titleStyle: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
PieChartSectionData(
color: AppTheme.secondaryColor,
value: 30,
title: '30%',
radius: 50,
titleStyle: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
PieChartSectionData(
color: AppTheme.accentColor,
value: 25,
title: '25%',
radius: 50,
titleStyle: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
),
),
],
),
);
}
Widget _buildQuickActions(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Actions rapides',
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: _buildActionCard(
context,
'Nouveau membre',
'Ajouter un membre',
Icons.person_add,
AppTheme.primaryColor,
),
),
const SizedBox(width: 12),
Expanded(
child: _buildActionCard(
context,
'Créer événement',
'Organiser un événement',
Icons.event_available,
AppTheme.secondaryColor,
),
),
],
),
const SizedBox(height: 12),
Row(
children: [
Expanded(
child: _buildActionCard(
context,
'Suivi cotisations',
'Gérer les cotisations',
Icons.payment,
AppTheme.accentColor,
),
),
const SizedBox(width: 12),
Expanded(
child: _buildActionCard(
context,
'Rapports',
'Générer des rapports',
Icons.analytics,
AppTheme.infoColor,
),
),
],
),
],
);
}
Widget _buildActionCard(
BuildContext context,
String title,
String subtitle,
IconData icon,
Color color,
) {
return InkWell(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('$title - En cours de développement'),
backgroundColor: color,
),
);
},
borderRadius: BorderRadius.circular(12),
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: color.withOpacity(0.2)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Icon(
icon,
color: color,
size: 24,
),
),
const SizedBox(height: 12),
Text(
title,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 4),
Text(
subtitle,
style: const TextStyle(
fontSize: 12,
color: AppTheme.textSecondary,
),
textAlign: TextAlign.center,
),
],
),
),
);
}
Widget _buildRecentActivities(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Activités récentes',
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
TextButton(
onPressed: () {},
child: const Text('Voir tout'),
),
],
),
const SizedBox(height: 16),
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: [
_buildActivityItem(
'Nouveau membre inscrit',
'Marie Dupont a rejoint l\'association',
Icons.person_add,
AppTheme.successColor,
'Il y a 2h',
),
const Divider(height: 1),
_buildActivityItem(
'Cotisation reçue',
'Jean Martin a payé sa cotisation annuelle',
Icons.payment,
AppTheme.primaryColor,
'Il y a 4h',
),
const Divider(height: 1),
_buildActivityItem(
'Événement créé',
'Assemblée générale 2024 programmée',
Icons.event,
AppTheme.accentColor,
'Hier',
),
],
),
),
],
);
}
Widget _buildActivityItem(
String title,
String description,
IconData icon,
Color color,
String time,
) {
return Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: Icon(
icon,
color: color,
size: 16,
),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 2),
Text(
description,
style: const TextStyle(
fontSize: 12,
color: AppTheme.textSecondary,
),
),
],
),
),
Text(
time,
style: const TextStyle(
fontSize: 12,
color: AppTheme.textHint,
),
),
],
),
);
}
}
}

485
unionflow-mobile-apps/lib/features/dashboard/presentation/pages/enhanced_dashboard.dart
View File

@@ -1,485 +0,0 @@
import 'package:flutter/material.dart';
import '../../../../shared/theme/app_theme.dart';
import '../widgets/clickable_kpi_card.dart';
import '../widgets/chart_card.dart';
import '../widgets/activity_feed.dart';
import '../widgets/quick_actions_grid.dart';
import '../widgets/navigation_cards.dart';
class EnhancedDashboard extends StatefulWidget {
final Function(int)? onNavigateToTab;
const EnhancedDashboard({
super.key,
this.onNavigateToTab,
});
@override
State<EnhancedDashboard> createState() => _EnhancedDashboardState();
}
class _EnhancedDashboardState extends State<EnhancedDashboard> {
final PageController _pageController = PageController();
int _currentPage = 0;
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppTheme.backgroundLight,
body: CustomScrollView(
slivers: [
_buildAppBar(),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildWelcomeCard(),
const SizedBox(height: 24),
_buildKPISection(),
const SizedBox(height: 24),
_buildChartsSection(),
const SizedBox(height: 24),
NavigationCards(
onNavigateToTab: widget.onNavigateToTab,
),
const SizedBox(height: 24),
const QuickActionsGrid(),
const SizedBox(height: 24),
const ActivityFeed(),
const SizedBox(height: 24),
],
),
),
),
],
),
);
}
Widget _buildAppBar() {
return SliverAppBar(
expandedHeight: 120,
floating: false,
pinned: true,
backgroundColor: AppTheme.primaryColor,
flexibleSpace: FlexibleSpaceBar(
title: const Text(
'Tableau de bord',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
background: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [AppTheme.primaryColor, AppTheme.primaryDark],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
),
),
actions: [
IconButton(
icon: const Icon(Icons.notifications_outlined),
onPressed: () => _showNotifications(),
),
IconButton(
icon: const Icon(Icons.refresh),
onPressed: () => _refreshData(),
),
PopupMenuButton<String>(
icon: const Icon(Icons.more_vert),
onSelected: _handleMenuSelection,
itemBuilder: (context) => [
const PopupMenuItem(
value: 'settings',
child: Row(
children: [
Icon(Icons.settings),
SizedBox(width: 8),
Text('Paramètres'),
],
),
),
const PopupMenuItem(
value: 'export',
child: Row(
children: [
Icon(Icons.download),
SizedBox(width: 8),
Text('Exporter'),
],
),
),
const PopupMenuItem(
value: 'help',
child: Row(
children: [
Icon(Icons.help),
SizedBox(width: 8),
Text('Aide'),
],
),
),
],
),
],
);
}
Widget _buildWelcomeCard() {
return Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [AppTheme.primaryColor, AppTheme.primaryLight],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: AppTheme.primaryColor.withOpacity(0.3),
blurRadius: 20,
offset: const Offset(0, 8),
),
],
),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Bonjour !',
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Text(
'Découvrez les dernières statistiques de votre association',
style: TextStyle(
color: Colors.white.withOpacity(0.9),
fontSize: 16,
),
),
const SizedBox(height: 16),
Row(
children: [
Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 6,
),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(20),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.trending_up,
color: Colors.white,
size: 16,
),
const SizedBox(width: 4),
Text(
'+12% ce mois',
style: const TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w600,
),
),
],
),
),
],
),
],
),
),
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(40),
),
child: const Icon(
Icons.dashboard_rounded,
color: Colors.white,
size: 40,
),
),
],
),
);
}
Widget _buildKPISection() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'Indicateurs clés',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
TextButton.icon(
onPressed: () {},
icon: const Icon(Icons.analytics, size: 16),
label: const Text('Analyse détaillée'),
),
],
),
const SizedBox(height: 16),
SizedBox(
height: 180,
child: PageView(
controller: _pageController,
onPageChanged: (index) {
setState(() {
_currentPage = index;
});
},
children: [
_buildKPIPage1(),
_buildKPIPage2(),
],
),
),
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildPageIndicator(0),
const SizedBox(width: 8),
_buildPageIndicator(1),
],
),
],
);
}
Widget _buildKPIPage1() {
return Row(
children: [
Expanded(
child: ClickableKPICard(
title: 'Membres actifs',
value: '1,247',
change: '+5.2%',
icon: Icons.people,
color: AppTheme.secondaryColor,
actionText: 'Gérer',
onTap: () => widget.onNavigateToTab?.call(1),
),
),
const SizedBox(width: 12),
Expanded(
child: ClickableKPICard(
title: 'Revenus mensuel',
value: '€45,890',
change: '+12.8%',
icon: Icons.euro,
color: AppTheme.successColor,
actionText: 'Finances',
onTap: () => _showFinancesMessage(),
),
),
],
);
}
Widget _buildKPIPage2() {
return Row(
children: [
Expanded(
child: ClickableKPICard(
title: 'Événements',
value: '23',
change: '+3',
icon: Icons.event,
color: AppTheme.warningColor,
actionText: 'Planifier',
onTap: () => widget.onNavigateToTab?.call(3),
),
),
const SizedBox(width: 12),
Expanded(
child: ClickableKPICard(
title: 'Taux cotisation',
value: '89.5%',
change: '+2.1%',
icon: Icons.payments,
color: AppTheme.accentColor,
actionText: 'Gérer',
onTap: () => widget.onNavigateToTab?.call(2),
),
),
],
);
}
Widget _buildPageIndicator(int index) {
return AnimatedContainer(
duration: const Duration(milliseconds: 300),
width: _currentPage == index ? 20 : 8,
height: 8,
decoration: BoxDecoration(
color: _currentPage == index
? AppTheme.primaryColor
: AppTheme.primaryColor.withOpacity(0.3),
borderRadius: BorderRadius.circular(4),
),
);
}
Widget _buildChartsSection() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Analyses et tendances',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 16),
ChartCard(
title: 'Évolution des membres',
subtitle: 'Croissance sur 6 mois',
chart: const MembershipChart(),
onTap: () => widget.onNavigateToTab?.call(1),
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: ChartCard(
title: 'Répartition',
subtitle: 'Par catégorie',
chart: const CategoryChart(),
onTap: () => widget.onNavigateToTab?.call(1),
),
),
const SizedBox(width: 12),
Expanded(
child: ChartCard(
title: 'Revenus',
subtitle: 'Évolution mensuelle',
chart: const RevenueChart(),
onTap: () => _showFinancesMessage(),
),
),
],
),
],
);
}
void _showNotifications() {
showModalBottomSheet(
context: context,
builder: (context) => Container(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
'Notifications',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 16),
ListTile(
leading: const Icon(Icons.warning, color: AppTheme.warningColor),
title: const Text('3 cotisations en retard'),
subtitle: const Text('Nécessite votre attention'),
onTap: () {},
),
ListTile(
leading: const Icon(Icons.event, color: AppTheme.accentColor),
title: const Text('Assemblée générale'),
subtitle: const Text('Dans 5 jours'),
onTap: () {},
),
ListTile(
leading: const Icon(Icons.check_circle, color: AppTheme.successColor),
title: const Text('Rapport mensuel'),
subtitle: const Text('Prêt à être envoyé'),
onTap: () {},
),
],
),
),
);
}
void _refreshData() {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Données actualisées'),
backgroundColor: AppTheme.successColor,
behavior: SnackBarBehavior.floating,
),
);
}
void _handleMenuSelection(String value) {
switch (value) {
case 'settings':
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Paramètres - En développement')),
);
break;
case 'export':
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Export - En développement')),
);
break;
case 'help':
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Aide - En développement')),
);
break;
}
}
void _showFinancesMessage() {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Module Finances - Prochainement disponible'),
backgroundColor: AppTheme.successColor,
behavior: SnackBarBehavior.floating,
),
);
}
}

101
unionflow-mobile-apps/lib/features/dashboard/presentation/widgets/actions/action_card_widget.dart Normal file
View File

@@ -0,0 +1,101 @@
import 'package:flutter/material.dart';
import '../../../../../shared/theme/app_theme.dart';
/// Widget de carte d'action rapide réutilisable
///
/// Affiche une action cliquable avec:
/// - Icône colorée dans un conteneur arrondi
/// - Titre principal
/// - Sous-titre descriptif
/// - Interaction tactile avec feedback visuel
/// - Callback personnalisable pour l'action
class ActionCardWidget extends StatelessWidget {
/// Titre de l'action
final String title;
/// Description de l'action
final String subtitle;
/// Icône représentative
final IconData icon;
/// Couleur thématique de l'action
final Color color;
/// Callback exécuté lors du tap
final VoidCallback? onTap;
const ActionCardWidget({
super.key,
required this.title,
required this.subtitle,
required this.icon,
required this.color,
this.onTap,
});
@override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap ?? () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('$title - En cours de développement'),
backgroundColor: color,
),
);
},
borderRadius: BorderRadius.circular(12),
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: color.withOpacity(0.2)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Icon(
icon,
color: color,
size: 24,
),
),
const SizedBox(height: 12),
Text(
title,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 4),
Text(
subtitle,
style: const TextStyle(
fontSize: 12,
color: AppTheme.textSecondary,
),
textAlign: TextAlign.center,
),
],
),
),
);
}
}

151
unionflow-mobile-apps/lib/features/dashboard/presentation/widgets/actions/quick_actions_widget.dart Normal file
View File

@@ -0,0 +1,151 @@
import 'package:flutter/material.dart';
import '../../../../../shared/theme/app_theme.dart';
import 'action_card_widget.dart';
/// Widget de section des actions rapides et de gestion
///
/// Affiche une grille d'actions rapides organisées par catégories:
/// - Actions principales (nouveau membre, créer événement)
/// - Gestion financière (encaisser cotisation, relances)
/// - Communication (messages, convocations)
/// - Rapports et conformité (OHADA, exports)
/// - Urgences et support (alertes, assistance)
class QuickActionsWidget extends StatelessWidget {
const QuickActionsWidget({super.key});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Actions rapides & Gestion',
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 16),
// Première ligne - Actions principales
Row(
children: [
Expanded(
child: ActionCardWidget(
title: 'Nouveau membre',
subtitle: 'Inscription rapide',
icon: Icons.person_add,
color: AppTheme.primaryColor,
),
),
const SizedBox(width: 12),
Expanded(
child: ActionCardWidget(
title: 'Créer événement',
subtitle: 'Organiser activité',
icon: Icons.event_available,
color: AppTheme.secondaryColor,
),
),
],
),
const SizedBox(height: 12),
// Deuxième ligne - Gestion financière
Row(
children: [
Expanded(
child: ActionCardWidget(
title: 'Encaisser cotisation',
subtitle: 'Paiement immédiat',
icon: Icons.payment,
color: AppTheme.successColor,
),
),
const SizedBox(width: 12),
Expanded(
child: ActionCardWidget(
title: 'Relances impayés',
subtitle: 'Notifications SMS',
icon: Icons.notifications_active,
color: AppTheme.warningColor,
),
),
],
),
const SizedBox(height: 12),
// Troisième ligne - Communication
Row(
children: [
Expanded(
child: ActionCardWidget(
title: 'Message groupe',
subtitle: 'Diffusion WhatsApp',
icon: Icons.message,
color: const Color(0xFF25D366),
),
),
const SizedBox(width: 12),
Expanded(
child: ActionCardWidget(
title: 'Convoquer AG',
subtitle: 'Assemblée générale',
icon: Icons.groups,
color: const Color(0xFF9C27B0),
),
),
],
),
const SizedBox(height: 12),
// Quatrième ligne - Rapports et conformité
Row(
children: [
Expanded(
child: ActionCardWidget(
title: 'Rapport OHADA',
subtitle: 'Conformité légale',
icon: Icons.gavel,
color: const Color(0xFF795548),
),
),
const SizedBox(width: 12),
Expanded(
child: ActionCardWidget(
title: 'Export données',
subtitle: 'Sauvegarde Excel',
icon: Icons.file_download,
color: AppTheme.infoColor,
),
),
],
),
const SizedBox(height: 12),
// Cinquième ligne - Urgences et support
Row(
children: [
Expanded(
child: ActionCardWidget(
title: 'Alerte urgente',
subtitle: 'Notification critique',
icon: Icons.emergency,
color: AppTheme.errorColor,
),
),
const SizedBox(width: 12),
Expanded(
child: ActionCardWidget(
title: 'Support technique',
subtitle: 'Assistance UnionFlow',
icon: Icons.support_agent,
color: const Color(0xFF607D8B),
),
),
],
),
],
);
}
}

148
unionflow-mobile-apps/lib/features/dashboard/presentation/widgets/activities/activity_item_widget.dart Normal file
View File

@@ -0,0 +1,148 @@
import 'package:flutter/material.dart';
import '../../../../../shared/theme/app_theme.dart';
/// Widget d'élément d'activité récente réutilisable
///
/// Affiche une activité avec:
/// - Icône colorée avec indicateur "nouveau" optionnel
/// - Titre et description
/// - Horodatage avec mise en évidence pour les nouveaux éléments
/// - Badge "NOUVEAU" pour les activités récentes
/// - Indicateur visuel pour les nouvelles activités
class ActivityItemWidget extends StatelessWidget {
/// Titre de l'activité
final String title;
/// Description détaillée de l'activité
final String description;
/// Icône représentative
final IconData icon;
/// Couleur thématique
final Color color;
/// Horodatage de l'activité
final String time;
/// Indique si l'activité est nouvelle
final bool isNew;
const ActivityItemWidget({
super.key,
required this.title,
required this.description,
required this.icon,
required this.color,
required this.time,
this.isNew = false,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Stack(
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: Icon(
icon,
color: color,
size: 16,
),
),
if (isNew)
Positioned(
top: -2,
right: -2,
child: Container(
width: 8,
height: 8,
decoration: const BoxDecoration(
color: AppTheme.errorColor,
shape: BoxShape.circle,
),
),
),
],
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Text(
title,
style: TextStyle(
fontSize: 14,
fontWeight: isNew ? FontWeight.w700 : FontWeight.w600,
color: isNew ? AppTheme.textPrimary : AppTheme.textPrimary,
),
),
),
if (isNew)
Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: AppTheme.errorColor,
borderRadius: BorderRadius.circular(8),
),
child: const Text(
'NOUVEAU',
style: TextStyle(
fontSize: 8,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
),
const SizedBox(height: 2),
Text(
description,
style: TextStyle(
fontSize: 12,
color: isNew ? AppTheme.textPrimary : AppTheme.textSecondary,
fontWeight: isNew ? FontWeight.w500 : FontWeight.normal,
),
),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
time,
style: TextStyle(
fontSize: 12,
color: isNew ? AppTheme.primaryColor : AppTheme.textHint,
fontWeight: isNew ? FontWeight.w600 : FontWeight.normal,
),
),
if (isNew)
const SizedBox(height: 2),
if (isNew)
const Icon(
Icons.fiber_new,
size: 12,
color: AppTheme.errorColor,
),
],
),
],
),
);
}
}

162
unionflow-mobile-apps/lib/features/dashboard/presentation/widgets/activities/recent_activities_widget.dart Normal file
View File

@@ -0,0 +1,162 @@
import 'package:flutter/material.dart';
import '../../../../../shared/theme/app_theme.dart';
import 'activity_item_widget.dart';
/// Widget de section des activités récentes en temps réel
///
/// Affiche un flux d'activités en temps réel avec:
/// - En-tête avec indicateur "Live" et bouton "Tout voir"
/// - Liste d'activités avec indicateurs visuels pour les nouveaux éléments
/// - Séparateurs entre les éléments
/// - Horodatage précis pour chaque activité
/// - Icônes et couleurs thématiques par type d'activité
class RecentActivitiesWidget extends StatelessWidget {
const RecentActivitiesWidget({super.key});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Text(
'Flux d\'activités en temps réel',
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: AppTheme.successColor.withOpacity(0.1),
borderRadius: BorderRadius.circular(10),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 4,
height: 4,
decoration: const BoxDecoration(
color: AppTheme.successColor,
shape: BoxShape.circle,
),
),
const SizedBox(width: 3),
const Text(
'Live',
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.w600,
color: AppTheme.successColor,
),
),
],
),
),
const SizedBox(width: 6),
TextButton(
onPressed: () {},
style: TextButton.styleFrom(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
minimumSize: Size.zero,
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
child: const Text(
'Tout',
style: TextStyle(fontSize: 12),
),
),
],
),
const SizedBox(height: 16),
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: [
ActivityItemWidget(
title: 'Paiement Mobile Money reçu',
description: 'Kouassi Yao - 25,000 FCFA via Orange Money',
icon: Icons.phone_android,
color: const Color(0xFFFF9800),
time: 'Il y a 3 min',
isNew: true,
),
const Divider(height: 1),
ActivityItemWidget(
title: 'Nouveau membre validé',
description: 'Adjoua Marie inscrite depuis Abidjan',
icon: Icons.person_add,
color: AppTheme.successColor,
time: 'Il y a 15 min',
isNew: true,
),
const Divider(height: 1),
ActivityItemWidget(
title: 'Relance automatique envoyée',
description: '12 SMS de rappel cotisations expédiés',
icon: Icons.sms,
color: AppTheme.infoColor,
time: 'Il y a 1h',
),
const Divider(height: 1),
ActivityItemWidget(
title: 'Rapport OHADA généré',
description: 'Bilan financier T4 2024 exporté',
icon: Icons.description,
color: const Color(0xFF795548),
time: 'Il y a 2h',
),
const Divider(height: 1),
ActivityItemWidget(
title: 'Événement: Forte participation',
description: 'AG Extraordinaire - 89% de présence',
icon: Icons.trending_up,
color: AppTheme.successColor,
time: 'Il y a 3h',
),
const Divider(height: 1),
ActivityItemWidget(
title: 'Alerte: Cotisations en retard',
description: '23 membres avec +30 jours de retard',
icon: Icons.warning,
color: AppTheme.warningColor,
time: 'Il y a 4h',
),
const Divider(height: 1),
ActivityItemWidget(
title: 'Synchronisation réussie',
description: 'Données sauvegardées sur le cloud',
icon: Icons.cloud_done,
color: AppTheme.successColor,
time: 'Il y a 6h',
),
const Divider(height: 1),
ActivityItemWidget(
title: 'Message diffusé',
description: 'Info COVID-19 envoyée à 1,247 membres',
icon: Icons.campaign,
color: const Color(0xFF9C27B0),
time: 'Hier 18:30',
),
],
),
),
],
);
}
}

432
unionflow-mobile-apps/lib/features/dashboard/presentation/widgets/charts/charts_analytics_widget.dart Normal file
View File

@@ -0,0 +1,432 @@
import 'package:flutter/material.dart';
import '../../../../../shared/theme/app_theme.dart';
import '../common/section_header_widget.dart';
/// Widget de section des analyses et tendances avec graphiques
///
/// Affiche tous les graphiques d'analyse en une seule colonne:
/// - Évolution des membres actifs (ligne)
/// - Répartition des cotisations (camembert)
/// - Revenus par source (barres)
/// - Cotisations par mois (barres)
/// - Engagement des membres (radar)
/// - Tendances géographiques (carte)
/// - Analyse comparative (barres groupées)
///
/// Chaque graphique est optimisé pour l'affichage mobile
/// avec des détails enrichis et des légendes complètes.
class ChartsAnalyticsWidget extends StatelessWidget {
const ChartsAnalyticsWidget({super.key});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SectionHeaderWidget(title: 'Analyses & Tendances'),
const SizedBox(height: 16),
// Graphiques d'analyse - Une seule colonne pour exploiter toute la largeur
_buildLineChart(context),
const SizedBox(height: 16),
_buildPieChart(context),
const SizedBox(height: 16),
_buildRevenueChart(context),
const SizedBox(height: 16),
_buildCotisationsChart(context),
const SizedBox(height: 16),
_buildEngagementChart(context),
const SizedBox(height: 16),
_buildTrendsChart(context),
const SizedBox(height: 16),
_buildGeographicChart(context),
],
);
}
/// Graphique d'évolution des membres actifs (ligne)
Widget _buildLineChart(BuildContext context) {
return Container(
height: 280,
padding: const EdgeInsets.all(16),
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(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// En-tête enrichi avec icône et métriques
Row(
children: [
Container(
padding: const EdgeInsets.all(6),
decoration: BoxDecoration(
color: AppTheme.primaryColor.withOpacity(0.1),
borderRadius: BorderRadius.circular(6),
),
child: const Icon(
Icons.trending_up,
color: AppTheme.primaryColor,
size: 16,
),
),
const SizedBox(width: 8),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Évolution des membres actifs',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 2),
const Text(
'Croissance sur 5 mois • +24.7% (+247 membres)',
style: TextStyle(
fontSize: 11,
color: AppTheme.textSecondary,
),
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: AppTheme.successColor.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.trending_up,
color: AppTheme.successColor,
size: 12,
),
SizedBox(width: 4),
Text(
'+24.7%',
style: TextStyle(
color: AppTheme.successColor,
fontSize: 11,
fontWeight: FontWeight.w600,
),
),
],
),
),
],
),
const SizedBox(height: 16),
// Placeholder pour le graphique
Expanded(
child: Container(
decoration: BoxDecoration(
color: AppTheme.primaryColor.withOpacity(0.05),
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: AppTheme.primaryColor.withOpacity(0.1),
width: 1,
),
),
child: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.show_chart,
color: AppTheme.primaryColor,
size: 48,
),
SizedBox(height: 8),
Text(
'Graphique d\'évolution des membres',
style: TextStyle(
color: AppTheme.textSecondary,
fontSize: 12,
),
),
],
),
),
),
),
],
),
);
}
/// Graphique de répartition des cotisations (camembert)
Widget _buildPieChart(BuildContext context) {
return Container(
height: 280,
padding: const EdgeInsets.all(16),
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(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// En-tête enrichi
Row(
children: [
Container(
padding: const EdgeInsets.all(6),
decoration: BoxDecoration(
color: AppTheme.accentColor.withOpacity(0.1),
borderRadius: BorderRadius.circular(6),
),
child: const Icon(
Icons.pie_chart,
color: AppTheme.accentColor,
size: 16,
),
),
const SizedBox(width: 8),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Répartition des cotisations',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
SizedBox(height: 2),
Text(
'Par statut de paiement • 1,247 membres total',
style: TextStyle(
fontSize: 11,
color: AppTheme.textSecondary,
),
),
],
),
),
],
),
const SizedBox(height: 16),
// Placeholder pour le graphique camembert
Expanded(
child: Container(
decoration: BoxDecoration(
color: AppTheme.accentColor.withOpacity(0.05),
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: AppTheme.accentColor.withOpacity(0.1),
width: 1,
),
),
child: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.donut_small,
color: AppTheme.accentColor,
size: 48,
),
SizedBox(height: 8),
Text(
'Graphique camembert des cotisations',
style: TextStyle(
color: AppTheme.textSecondary,
fontSize: 12,
),
),
],
),
),
),
),
],
),
);
}
/// Placeholder pour les autres graphiques
Widget _buildRevenueChart(BuildContext context) {
return _buildPlaceholderChart(
'Revenus par source',
'Analyse mensuelle • 2,845,000 FCFA total',
Icons.bar_chart,
AppTheme.successColor,
'Graphique des revenus par source',
);
}
Widget _buildCotisationsChart(BuildContext context) {
return _buildPlaceholderChart(
'Cotisations par mois',
'Évolution sur 12 mois • Tendance positive',
Icons.assessment,
AppTheme.infoColor,
'Graphique des cotisations mensuelles',
);
}
Widget _buildEngagementChart(BuildContext context) {
return _buildPlaceholderChart(
'Engagement des membres',
'Analyse multi-critères • Score global 85/100',
Icons.radar,
const Color(0xFF9C27B0),
'Graphique radar d\'engagement',
);
}
Widget _buildTrendsChart(BuildContext context) {
return _buildPlaceholderChart(
'Tendances comparatives',
'Comparaison avec période précédente',
Icons.compare_arrows,
AppTheme.warningColor,
'Graphique de tendances comparatives',
);
}
Widget _buildGeographicChart(BuildContext context) {
return _buildPlaceholderChart(
'Répartition géographique',
'Membres par région • Côte d\'Ivoire',
Icons.map,
const Color(0xFF795548),
'Carte géographique des membres',
);
}
/// Widget placeholder générique pour les graphiques
Widget _buildPlaceholderChart(
String title,
String subtitle,
IconData icon,
Color color,
String description,
) {
return Container(
height: 280,
padding: const EdgeInsets.all(16),
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(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
padding: const EdgeInsets.all(6),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(6),
),
child: Icon(
icon,
color: color,
size: 16,
),
),
const SizedBox(width: 8),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 2),
Text(
subtitle,
style: const TextStyle(
fontSize: 11,
color: AppTheme.textSecondary,
),
),
],
),
),
],
),
const SizedBox(height: 16),
Expanded(
child: Container(
decoration: BoxDecoration(
color: color.withOpacity(0.05),
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: color.withOpacity(0.1),
width: 1,
),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icon,
color: color,
size: 48,
),
const SizedBox(height: 8),
Text(
description,
style: const TextStyle(
color: AppTheme.textSecondary,
fontSize: 12,
),
),
],
),
),
),
),
],
),
);
}
}

31
unionflow-mobile-apps/lib/features/dashboard/presentation/widgets/common/section_header_widget.dart Normal file
View File

@@ -0,0 +1,31 @@
import 'package:flutter/material.dart';
import '../../../../../shared/theme/app_theme.dart';
/// Widget d'en-tête de section réutilisable
///
/// Affiche un titre de section avec style cohérent
/// utilisé dans toutes les sections du dashboard.
class SectionHeaderWidget extends StatelessWidget {
/// Titre de la section
final String title;
/// Style de texte personnalisé (optionnel)
final TextStyle? textStyle;
const SectionHeaderWidget({
super.key,
required this.title,
this.textStyle,
});
@override
Widget build(BuildContext context) {
return Text(
title,
style: textStyle ?? Theme.of(context).textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
);
}
}

289
unionflow-mobile-apps/lib/features/dashboard/presentation/widgets/kpi/kpi_card_widget.dart Normal file
View File

@@ -0,0 +1,289 @@
import 'package:flutter/material.dart';
import '../../../../../shared/theme/app_theme.dart';
/// Widget de carte KPI réutilisable avec détails enrichis
///
/// Affiche un indicateur de performance clé avec:
/// - Icône et badge de tendance coloré
/// - Valeur principale avec objectif optionnel
/// - Titre avec période
/// - Description détaillée
/// - Points de détail sous forme de puces
/// - Horodatage de dernière mise à jour
class KPICardWidget extends StatelessWidget {
/// Titre de l'indicateur
final String title;
/// Valeur principale affichée
final String value;
/// Changement/tendance (ex: "+5.2%", "-3.1%")
final String change;
/// Icône représentative
final IconData icon;
/// Couleur thématique de la carte
final Color color;
/// Description détaillée optionnelle
final String? subtitle;
/// Période de référence (ex: "30j", "Mois")
final String? period;
/// Objectif cible optionnel
final String? target;
/// Horodatage de dernière mise à jour
final String? lastUpdate;
/// Liste de détails supplémentaires (max 3)
final List<String>? details;
const KPICardWidget({
super.key,
required this.title,
required this.value,
required this.change,
required this.icon,
required this.color,
this.subtitle,
this.period,
this.target,
this.lastUpdate,
this.details,
});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16),
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(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// En-tête avec icône et badge de tendance
Row(
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: Icon(
icon,
color: color,
size: 20,
),
),
const Spacer(),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: _getChangeColor(change).withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
_getChangeIcon(change),
color: _getChangeColor(change),
size: 12,
),
const SizedBox(width: 4),
Text(
change,
style: TextStyle(
color: _getChangeColor(change),
fontSize: 11,
fontWeight: FontWeight.w600,
),
),
],
),
),
],
),
const SizedBox(height: 12),
// Valeur principale
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: Text(
value,
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
),
if (target != null)
Text(
'/ $target',
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppTheme.textSecondary,
),
),
],
),
const SizedBox(height: 4),
// Titre et période
Row(
children: [
Expanded(
child: Text(
title,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
),
if (period != null)
Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: Text(
period!,
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.w600,
color: color,
),
),
),
],
),
// Description détaillée
if (subtitle != null) ...[
const SizedBox(height: 6),
Text(
subtitle!,
style: const TextStyle(
fontSize: 11,
color: AppTheme.textSecondary,
height: 1.3,
),
),
],
// Détails supplémentaires sous forme de puces
if (details != null && details!.isNotEmpty) ...[
const SizedBox(height: 8),
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: color.withOpacity(0.05),
borderRadius: BorderRadius.circular(6),
border: Border.all(
color: color.withOpacity(0.1),
width: 1,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: details!.take(3).map((detail) => Padding(
padding: const EdgeInsets.only(bottom: 3),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.only(top: 4),
width: 4,
height: 4,
decoration: BoxDecoration(
color: color.withOpacity(0.6),
shape: BoxShape.circle,
),
),
const SizedBox(width: 6),
Expanded(
child: Text(
detail,
style: TextStyle(
fontSize: 10,
color: AppTheme.textSecondary.withOpacity(0.8),
height: 1.2,
),
),
),
],
),
)).toList(),
),
),
],
// Dernière mise à jour
if (lastUpdate != null) ...[
const SizedBox(height: 8),
Row(
children: [
Icon(
Icons.access_time,
size: 10,
color: AppTheme.textSecondary.withOpacity(0.5),
),
const SizedBox(width: 4),
Text(
'Mis à jour: $lastUpdate',
style: TextStyle(
fontSize: 9,
color: AppTheme.textSecondary.withOpacity(0.5),
fontStyle: FontStyle.italic,
),
),
],
),
],
],
),
);
}
/// Détermine la couleur du badge de changement selon la valeur
Color _getChangeColor(String change) {
if (change.startsWith('+')) {
return AppTheme.successColor;
} else if (change.startsWith('-')) {
return AppTheme.errorColor;
} else {
return AppTheme.textSecondary;
}
}
/// Détermine l'icône du badge de changement selon la valeur
IconData _getChangeIcon(String change) {
if (change.startsWith('+')) {
return Icons.trending_up;
} else if (change.startsWith('-')) {
return Icons.trending_down;
} else {
return Icons.trending_flat;
}
}
}

171
unionflow-mobile-apps/lib/features/dashboard/presentation/widgets/kpi/kpi_cards_widget.dart Normal file
View File

@@ -0,0 +1,171 @@
import 'package:flutter/material.dart';
import '../../../../../shared/theme/app_theme.dart';
import 'kpi_card_widget.dart';
/// Widget de section des cartes KPI principales
///
/// Affiche les 8 indicateurs clés de performance principaux
/// en une seule colonne pour optimiser l'utilisation de l'espace écran.
/// Chaque KPI contient des détails enrichis et des informations contextuelles.
class KPICardsWidget extends StatelessWidget {
const KPICardsWidget({super.key});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Indicateurs clés de performance',
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 16),
// Indicateurs principaux - Une seule colonne pour exploiter toute la largeur
KPICardWidget(
title: 'Membres Actifs',
value: '1,247',
change: '+5.2%',
icon: Icons.people,
color: AppTheme.primaryColor,
subtitle: 'Base de cotisants actifs avec droits de vote et participation aux décisions',
period: '30j',
target: '1,300',
lastUpdate: 'il y a 2h',
details: const [
'892 membres à jour de cotisation (71.5%)',
'355 nouveaux membres cette année',
'23 membres en période d\'essai de 3 mois',
],
),
const SizedBox(height: 12),
KPICardWidget(
title: 'Revenus Totaux',
value: '2,845,000 FCFA',
change: '+12.8%',
icon: Icons.account_balance_wallet,
color: AppTheme.successColor,
subtitle: 'Ensemble des revenus générés incluant cotisations, événements et subventions',
period: 'Mois',
target: '3,200,000 FCFA',
lastUpdate: 'il y a 1h',
details: const [
'1,950,000 FCFA de cotisations mensuelles (68.5%)',
'645,000 FCFA d\'activités et événements (22.7%)',
'250,000 FCFA de dons et subventions (8.8%)',
],
),
const SizedBox(height: 12),
KPICardWidget(
title: 'Événements Actifs',
value: '23',
change: '+3',
icon: Icons.event,
color: AppTheme.accentColor,
subtitle: 'Événements planifiés, formations professionnelles et activités sociales',
period: 'Mois',
target: '25',
lastUpdate: 'il y a 3h',
details: const [
'8 formations professionnelles et techniques',
'9 événements sociaux et culturels',
'6 assemblées générales et réunions',
],
),
const SizedBox(height: 12),
KPICardWidget(
title: 'Taux de Participation',
value: '78.3%',
change: '+2.1%',
icon: Icons.groups,
color: const Color(0xFF2196F3), // Blue
subtitle: 'Pourcentage de membres participant activement aux événements et décisions',
period: 'Trim.',
target: '85%',
lastUpdate: 'il y a 4h',
details: const [
'158 membres en retard de paiement',
'45,000 FCFA de frais de relance économisés',
'Amélioration de 12% par rapport au trimestre précédent',
],
),
const SizedBox(height: 12),
KPICardWidget(
title: 'Nouveaux Membres (30j)',
value: '47',
change: '+18.5%',
icon: Icons.person_add,
color: const Color(0xFF9C27B0), // Purple
subtitle: 'Nouvelles adhésions validées par le comité d\'admission',
period: '30j',
target: '50',
lastUpdate: 'il y a 30min',
details: const [
'28 adhésions individuelles (59.6%)',
'12 adhésions familiales (25.5%)',
'7 adhésions d\'entreprises partenaires (14.9%)',
],
),
const SizedBox(height: 12),
KPICardWidget(
title: 'Montant en Attente',
value: '785,000 FCFA',
change: '-5.2%',
icon: Icons.schedule,
color: AppTheme.warningColor,
subtitle: 'Montants promis en attente d\'encaissement ou de validation administrative',
period: 'Total',
lastUpdate: 'il y a 1h',
details: const [
'450,000 FCFA de promesses de dons (57.3%)',
'235,000 FCFA de cotisations promises (29.9%)',
'100,000 FCFA de subventions en cours (12.8%)',
],
),
const SizedBox(height: 12),
KPICardWidget(
title: 'Cotisations en Retard',
value: '156',
change: '+8.3%',
icon: Icons.access_time,
color: AppTheme.errorColor,
subtitle: 'Membres en situation d\'impayé nécessitant un suivi personnalisé',
period: '+30j',
lastUpdate: 'il y a 2h',
details: const [
'89 retards de 1-3 mois (57.1%)',
'45 retards de 3-6 mois (28.8%)',
'22 retards de plus de 6 mois (14.1%)',
],
),
const SizedBox(height: 12),
KPICardWidget(
title: 'Score Global de Performance',
value: '85/100',
change: '+3 pts',
icon: Icons.assessment,
color: const Color(0xFF00BCD4), // Cyan
subtitle: 'Évaluation globale basée sur 15 indicateurs de santé organisationnelle',
period: 'Mois',
target: '90/100',
lastUpdate: 'il y a 6h',
details: const [
'Finances: 92/100 (Excellent)',
'Participation: 78/100 (Bon)',
'Gouvernance: 85/100 (Très bon)',
],
),
],
);
}
}

85
unionflow-mobile-apps/lib/features/dashboard/presentation/widgets/welcome/welcome_section_widget.dart Normal file
View File

@@ -0,0 +1,85 @@
import 'package:flutter/material.dart';
import '../../../../../shared/theme/app_theme.dart';
/// Widget de section d'accueil personnalisé pour le dashboard
///
/// Affiche un message de bienvenue avec un gradient coloré et une icône.
/// Conçu pour donner une impression chaleureuse et professionnelle à l'utilisateur.
class WelcomeSectionWidget extends StatelessWidget {
/// Titre principal affiché (par défaut "Bonjour !")
final String title;
/// Sous-titre descriptif (par défaut "Voici un aperçu de votre association")
final String subtitle;
/// Icône affichée à droite (par défaut Icons.dashboard)
final IconData icon;
/// Couleurs du gradient (par défaut primaryColor vers primaryLight)
final List<Color>? gradientColors;
const WelcomeSectionWidget({
super.key,
this.title = 'Bonjour !',
this.subtitle = 'Voici un aperçu de votre association',
this.icon = Icons.dashboard,
this.gradientColors,
});
@override
Widget build(BuildContext context) {
final colors = gradientColors ?? [AppTheme.primaryColor, AppTheme.primaryLight];
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: colors,
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Text(
subtitle,
style: TextStyle(
color: Colors.white.withOpacity(0.9),
fontSize: 16,
),
),
],
),
),
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(30),
),
child: Icon(
icon,
color: Colors.white,
size: 30,
),
),
],
),
);
}
}