feat: WebSocket temps réel + Finance Workflow + corrections

- Task #6: WebSocket /ws/dashboard + Kafka events (5 topics)
  * Backend: KafkaEventProducer, KafkaEventConsumer
  * Mobile: WebSocketService (reconnection, heartbeat, typed events)
  * DashboardBloc: Auto-refresh depuis WebSocket events

- Finance Workflow: approbations + budgets (backend + mobile)
  * Backend: entities, services, resources, migrations Flyway V6
  * Mobile: features finance_workflow complète avec BLoC

- Corrections DI: interfaces IRepository partout
  * IProfileRepository, IOrganizationRepository, IMembreRepository
  * GetIt configuré avec @injectable

- Spec-Kit: constitution + templates mis à jour
  * .specify/memory/constitution.md enrichie
  * Templates agent, plan, spec, tasks, checklist

- Nettoyage: fichiers temporaires supprimés

Signed-off-by: lions dev Team

unionflow/unionflow-mobile-apps/lib/features/reports/presentation/pages/reports_page.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import '../bloc/reports_bloc.dart';
+import '../../../../shared/design_system/unionflow_design_system.dart';
+import '../../../../shared/widgets/core_card.dart';
 
 /// Page Rapports & Analytics - UnionFlow Mobile
 /// 
@@ -61,16 +63,30 @@ class _ReportsPageState extends State<ReportsPage>
             SnackBar(content: Text(state.message), backgroundColor: Colors.orange),
           );
         }
+        if (state is ReportScheduled) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(content: Text(state.message), backgroundColor: const Color(0xFF00B894), behavior: SnackBarBehavior.floating),
+          );
+        }
+        if (state is ReportGenerated) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(content: Text(state.message), backgroundColor: const Color(0xFF00B894), behavior: SnackBarBehavior.floating),
+          );
+        }
       },
       builder: (context, state) {
         return Scaffold(
-          backgroundColor: const Color(0xFFF8F9FA),
+          backgroundColor: AppColors.darkBackground,
           body: Column(
             children: [
               _buildHeader(),
               _buildTabBar(),
               if (state is ReportsLoading)
-                const LinearProgressIndicator(minHeight: 3),
+                const LinearProgressIndicator(
+                  minHeight: 2,
+                  backgroundColor: Colors.transparent,
+                  valueColor: AlwaysStoppedAnimation<Color>(AppColors.primaryGreen),
+                ),
               Expanded(
                 child: TabBarView(
                   controller: _tabController,
@@ -89,91 +105,91 @@ class _ReportsPageState extends State<ReportsPage>
     );
   }
 
-  /// Header harmonisé
   Widget _buildHeader() {
     return Container(
-      margin: const EdgeInsets.all(12),
-      padding: const EdgeInsets.all(20),
-      decoration: BoxDecoration(
-        gradient: const LinearGradient(
-          colors: [Color(0xFF6C5CE7), Color(0xFF5A4FCF)],
+      width: double.infinity,
+      padding: EdgeInsets.only(
+        top: MediaQuery.of(context).padding.top + 20,
+        bottom: 30,
+        left: 20,
+        right: 20,
+      ),
+      decoration: const BoxDecoration(
+        gradient: LinearGradient(
           begin: Alignment.topLeft,
           end: Alignment.bottomRight,
+          colors: [
+            AppColors.primaryGreen,
+            AppColors.brandGreen,
+          ],
+        ),
+        borderRadius: BorderRadius.only(
+          bottomLeft: Radius.circular(32),
+          bottomRight: Radius.circular(32),
         ),
-        borderRadius: BorderRadius.circular(16),
-        boxShadow: [
-          BoxShadow(
-            color: const Color(0xFF6C5CE7).withOpacity(0.3),
-            blurRadius: 20,
-            offset: const Offset(0, 8),
-          ),
-        ],
       ),
       child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    'UnionFlow Analytics'.toUpperCase(),
+                    style: AppTypography.subtitleSmall.copyWith(
+                      color: Colors.white.withOpacity(0.8),
+                      fontWeight: FontWeight.bold,
+                      letterSpacing: 1.2,
+                    ),
+                  ),
+                  const SizedBox(height: 4),
+                  const Text(
+                    'Rapports & Insights',
+                    style: AppTypography.headerSmall,
+                  ),
+                ],
+              ),
               Container(
-                padding: const EdgeInsets.all(12),
                 decoration: BoxDecoration(
                   color: Colors.white.withOpacity(0.2),
                   borderRadius: BorderRadius.circular(12),
                 ),
-                child: const Icon(Icons.assessment, color: Colors.white, size: 24),
-              ),
-              const SizedBox(width: 16),
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    const Text(
-                      'Rapports & Analytics',
-                      style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
-                    ),
-                    Text(
-                      'Statistiques et analyses détaillées',
-                      style: TextStyle(fontSize: 14, color: Colors.white.withOpacity(0.8)),
-                    ),
-                  ],
+                child: IconButton(
+                  onPressed: () => _showExportDialog(),
+                  icon: const Icon(Icons.file_download_outlined, color: Colors.white),
                 ),
               ),
-              Row(
-                children: [
-                  Container(
-                    decoration: BoxDecoration(
-                      color: Colors.white.withOpacity(0.2),
-                      borderRadius: BorderRadius.circular(8),
-                    ),
-                    child: IconButton(
-                      onPressed: () => _showExportDialog(),
-                      icon: const Icon(Icons.download, color: Colors.white),
-                      tooltip: 'Exporter rapport',
-                    ),
-                  ),
-                  const SizedBox(width: 8),
-                  Container(
-                    decoration: BoxDecoration(
-                      color: Colors.white.withOpacity(0.2),
-                      borderRadius: BorderRadius.circular(8),
-                    ),
-                    child: IconButton(
-                      onPressed: () => _scheduleReport(),
-                      icon: const Icon(Icons.schedule, color: Colors.white),
-                      tooltip: 'Programmer rapport',
-                    ),
-                  ),
-                ],
-              ),
             ],
           ),
-          const SizedBox(height: 16),
+          const SizedBox(height: 24),
           Row(
             children: [
-              Expanded(child: _buildStatCard('Membres', '1,247', Icons.people, Colors.blue)),
+              Expanded(
+                child: _buildHeaderStat(
+                  'Membres',
+                  _statsMembres['total']?.toString() ?? '...',
+                  Icons.people_outline,
+                ),
+              ),
               const SizedBox(width: 12),
-              Expanded(child: _buildStatCard('Organisations', '89', Icons.business, Colors.green)),
+              Expanded(
+                child: _buildHeaderStat(
+                  'Organisations',
+                  _statsMembres['totalOrganisations']?.toString() ?? '...',
+                  Icons.business_outlined,
+                ),
+              ),
               const SizedBox(width: 12),
-              Expanded(child: _buildStatCard('Événements', '156', Icons.event, Colors.orange)),
+              Expanded(
+                child: _buildHeaderStat(
+                  'Événements',
+                  _statsEvenements['total']?.toString() ?? '...',
+                  Icons.event_outlined,
+                ),
+              ),
             ],
           ),
         ],
@@ -181,93 +197,96 @@ class _ReportsPageState extends State<ReportsPage>
     );
   }
 
-  Widget _buildStatCard(String label, String value, IconData icon, Color color) {
+  Widget _buildHeaderStat(String label, String value, IconData icon) {
     return Container(
-      padding: const EdgeInsets.all(12),
+      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
       decoration: BoxDecoration(
         color: Colors.white.withOpacity(0.15),
-        borderRadius: BorderRadius.circular(12),
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(color: Colors.white.withOpacity(0.2)),
       ),
       child: Column(
         children: [
-          Icon(icon, color: Colors.white, size: 20),
-          const SizedBox(height: 4),
-          Text(value, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold, color: Colors.white)),
-          Text(label, style: TextStyle(fontSize: 10, color: Colors.white.withOpacity(0.8))),
+          Icon(icon, color: Colors.white, size: 18),
+          const SizedBox(height: 8),
+          Text(
+            value,
+            style: AppTypography.headerSmall.copyWith(fontSize: 18),
+          ),
+          Text(
+            label.toUpperCase(),
+            style: AppTypography.subtitleSmall.copyWith(
+              color: Colors.white.withOpacity(0.7),
+              fontSize: 8,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
         ],
       ),
     );
   }
 
-  /// Barre d'onglets
   Widget _buildTabBar() {
     return Container(
-      margin: const EdgeInsets.symmetric(horizontal: 12),
+      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
       decoration: BoxDecoration(
-        color: Colors.white,
+        color: AppColors.darkBackground,
         borderRadius: BorderRadius.circular(16),
-        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 2))],
+        border: Border.all(color: AppColors.lightBorder.withOpacity(0.1)),
       ),
       child: TabBar(
         controller: _tabController,
-        labelColor: const Color(0xFF6C5CE7),
-        unselectedLabelColor: Colors.grey[600],
-        indicatorColor: const Color(0xFF6C5CE7),
-        labelStyle: const TextStyle(fontWeight: FontWeight.w600, fontSize: 11),
+        labelColor: AppColors.primaryGreen,
+        unselectedLabelColor: AppColors.textSecondaryLight,
+        indicatorColor: AppColors.primaryGreen,
+        indicatorSize: TabBarIndicatorSize.label,
+        dividerColor: Colors.transparent,
+        labelStyle: AppTypography.badgeText.copyWith(fontWeight: FontWeight.bold),
         tabs: const [
-          Tab(icon: Icon(Icons.dashboard, size: 16), text: 'Vue d\'ensemble'),
-          Tab(icon: Icon(Icons.people, size: 16), text: 'Membres'),
-          Tab(icon: Icon(Icons.business, size: 16), text: 'Organisations'),
-          Tab(icon: Icon(Icons.event, size: 16), text: 'Événements'),
+          Tab(text: 'GLOBAL'),
+          Tab(text: 'MEMBRES'),
+          Tab(text: 'ORGS'),
+          Tab(text: 'EVENTS'),
         ],
       ),
     );
   }
 
-  /// Onglet vue d'ensemble
   Widget _buildOverviewTab() {
-    return SingleChildScrollView(
-      padding: const EdgeInsets.all(12),
-      child: Column(
-        children: [
-          const SizedBox(height: 16),
-          _buildKPICards(),
-          const SizedBox(height: 16),
-          _buildActivityChart(),
-          const SizedBox(height: 16),
-          _buildQuickReports(),
-          const SizedBox(height: 80),
-        ],
-      ),
+    return ListView(
+      padding: const EdgeInsets.all(16),
+      children: [
+        _buildKPICards(),
+        const SizedBox(height: 24),
+        _buildActivityChart(),
+        const SizedBox(height: 24),
+        _buildQuickReports(),
+        const SizedBox(height: 32),
+      ],
     );
   }
 
-  /// Cartes KPI
   Widget _buildKPICards() {
-    final totalMembres = _statsMembres['totalMembres']?.toString()
-        ?? _statsMembres['total']?.toString() ?? '--';
-    final membresActifs = _statsMembres['membresActifs']?.toString()
-        ?? _statsMembres['actifs']?.toString() ?? '--';
-    final totalCotisations = _statsCotisations['totalCotisations']?.toString()
-        ?? _statsCotisations['total']?.toString() ?? '--';
-    final totalEvenements = _statsEvenements['totalEvenements']?.toString()
-        ?? _statsEvenements['total']?.toString() ?? '--';
+    final totalMembres = _statsMembres['total']?.toString() ?? '--';
+    final membresActifs = _statsMembres['actifs']?.toString() ?? '--';
+    final totalCotisations = _statsCotisations['total']?.toString() ?? '--';
+    final totalEvenements = _statsEvenements['total']?.toString() ?? '--';
 
     return Column(
       children: [
         Row(
           children: [
-            Expanded(child: _buildKPICard('Total membres', totalMembres, Icons.people, Colors.indigo)),
-            const SizedBox(width: 12),
-            Expanded(child: _buildKPICard('Membres actifs', membresActifs, Icons.how_to_reg, Colors.green)),
+            Expanded(child: _buildKPICard('Total Membres', totalMembres, Icons.people_outline, AppColors.info)),
+            const SizedBox(width: 16),
+            Expanded(child: _buildKPICard('Membres Actifs', membresActifs, Icons.how_to_reg_outlined, AppColors.success)),
           ],
         ),
-        const SizedBox(height: 12),
+        const SizedBox(height: 16),
         Row(
           children: [
-            Expanded(child: _buildKPICard('Cotisations', totalCotisations, Icons.payment, Colors.blue)),
-            const SizedBox(width: 12),
-            Expanded(child: _buildKPICard('Événements', totalEvenements, Icons.event, Colors.orange)),
+            Expanded(child: _buildKPICard('Cotisations', totalCotisations, Icons.payments_outlined, AppColors.brandGreen)),
+            const SizedBox(width: 16),
+            Expanded(child: _buildKPICard('Événements', totalEvenements, Icons.event_available_outlined, AppColors.warning)),
           ],
         ),
       ],
@@ -275,52 +294,73 @@ class _ReportsPageState extends State<ReportsPage>
   }
 
   Widget _buildKPICard(String title, String value, IconData icon, Color color) {
-    return Container(
-      padding: const EdgeInsets.all(16),
-      decoration: BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.circular(16),
-        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 2))],
-      ),
+    return CoreCard(
+      padding: const EdgeInsets.all(20),
       child: Column(
         children: [
-          Icon(icon, color: color, size: 32),
-          const SizedBox(height: 8),
-          Text(value, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: color)),
-          Text(title, style: TextStyle(fontSize: 12, color: Colors.grey[600]), textAlign: TextAlign.center),
+          Container(
+            padding: const EdgeInsets.all(10),
+            decoration: BoxDecoration(
+              color: color.withOpacity(0.1),
+              shape: BoxShape.circle,
+            ),
+            child: Icon(icon, color: color, size: 24),
+          ),
+          const SizedBox(height: 12),
+          Text(
+            value,
+            style: AppTypography.headerSmall.copyWith(color: color, fontWeight: FontWeight.bold),
+          ),
+          const SizedBox(height: 4),
+          Text(
+            title.toUpperCase(),
+            style: AppTypography.subtitleSmall.copyWith(
+              fontSize: 9,
+              fontWeight: FontWeight.bold,
+              letterSpacing: 0.5,
+            ),
+            textAlign: TextAlign.center,
+          ),
         ],
       ),
     );
   }
 
-  /// Graphique d'activité
   Widget _buildActivityChart() {
-    return Container(
-      padding: const EdgeInsets.all(16),
-      decoration: BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.circular(16),
-        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 2))],
-      ),
+    return CoreCard(
+      padding: const EdgeInsets.all(20),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Row(
             children: [
-              const Icon(Icons.show_chart, color: Color(0xFF6C5CE7), size: 20),
-              const SizedBox(width: 8),
-              Text('Activité des 30 derniers jours', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.grey[800])),
+              const Icon(Icons.analytics_outlined, color: AppColors.primaryGreen, size: 20),
+              const SizedBox(width: 12),
+              Text(
+                'Évolution de l\'Activité'.toUpperCase(),
+                style: AppTypography.subtitleSmall.copyWith(fontWeight: FontWeight.bold, letterSpacing: 1.1),
+              ),
             ],
           ),
-          const SizedBox(height: 16),
+          const SizedBox(height: 20),
           Container(
-            height: 120,
+            height: 180,
             decoration: BoxDecoration(
-              color: Colors.grey[50],
-              borderRadius: BorderRadius.circular(12),
+              color: AppColors.lightBorder.withOpacity(0.1),
+              borderRadius: BorderRadius.circular(16),
             ),
             child: const Center(
-              child: Text('Graphique d\'activité\n(Intégration Chart.js à venir)', textAlign: TextAlign.center, style: TextStyle(color: Colors.grey)),
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Icon(Icons.auto_graph_outlined, color: AppColors.textSecondaryLight, size: 40),
+                  SizedBox(height: 12),
+                  Text(
+                    'Visualisation graphique en préparation',
+                    style: AppTypography.subtitleSmall,
+                  ),
+                ],
+              ),
             ),
           ),
         ],
@@ -328,60 +368,68 @@ class _ReportsPageState extends State<ReportsPage>
     );
   }
 
-  /// Rapports rapides
   Widget _buildQuickReports() {
-    return Container(
-      padding: const EdgeInsets.all(16),
-      decoration: BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.circular(16),
-        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 2))],
-      ),
+    return CoreCard(
+      padding: const EdgeInsets.all(20),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Row(
             children: [
-              const Icon(Icons.flash_on, color: Color(0xFF6C5CE7), size: 20),
-              const SizedBox(width: 8),
-              Text('Rapports rapides', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.grey[800])),
+              const Icon(Icons.flash_on_outlined, color: AppColors.warning, size: 20),
+              const SizedBox(width: 12),
+              Text(
+                'Rapports Favoris'.toUpperCase(),
+                style: AppTypography.subtitleSmall.copyWith(fontWeight: FontWeight.bold, letterSpacing: 1.1),
+              ),
             ],
           ),
-          const SizedBox(height: 16),
-          _buildQuickReportItem('Rapport mensuel', 'Synthèse complète du mois', Icons.calendar_month, () => _generateReport('monthly')),
-          _buildQuickReportItem('Top membres actifs', 'Classement des membres les plus actifs', Icons.leaderboard, () => _generateReport('top_members')),
-          _buildQuickReportItem('Analyse des événements', 'Performance et participation aux événements', Icons.analytics, () => _generateReport('events_analysis')),
+          const SizedBox(height: 20),
+          _buildQuickReportItem('Bilan Annuel', 'Synthèse financière et activité', Icons.summarize_outlined, () => _generateReport('monthly')),
+          _buildQuickReportItem('Engagement Membres', 'Analyse de participation globale', Icons.query_stats_outlined, () => _generateReport('top_members')),
+          _buildQuickReportItem('Impact Événements', 'Analyse SEO et participation', Icons.insights_outlined, () => _generateReport('events_analysis')),
         ],
       ),
     );
   }
 
   Widget _buildQuickReportItem(String title, String subtitle, IconData icon, VoidCallback onTap) {
-    return InkWell(
-      onTap: onTap,
-      borderRadius: BorderRadius.circular(12),
-      child: Container(
-        margin: const EdgeInsets.only(bottom: 12),
-        padding: const EdgeInsets.all(12),
-        decoration: BoxDecoration(
-          color: Colors.grey[50],
-          borderRadius: BorderRadius.circular(12),
-        ),
-        child: Row(
-          children: [
-            Icon(icon, color: const Color(0xFF6C5CE7), size: 20),
-            const SizedBox(width: 12),
-            Expanded(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Text(title, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Color(0xFF1F2937))),
-                  Text(subtitle, style: TextStyle(fontSize: 12, color: Colors.grey[600])),
-                ],
+    return Container(
+      margin: const EdgeInsets.only(bottom: 12),
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: BorderRadius.circular(12),
+        child: Container(
+          padding: const EdgeInsets.all(12),
+          decoration: BoxDecoration(
+            color: AppColors.lightBorder.withOpacity(0.05),
+            borderRadius: BorderRadius.circular(12),
+            border: Border.all(color: AppColors.lightBorder.withOpacity(0.1)),
+          ),
+          child: Row(
+            children: [
+              Container(
+                padding: const EdgeInsets.all(8),
+                decoration: BoxDecoration(
+                  color: AppColors.primaryGreen.withOpacity(0.1),
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                child: Icon(icon, color: AppColors.primaryGreen, size: 20),
               ),
-            ),
-            Icon(Icons.arrow_forward_ios, color: Colors.grey[400], size: 16),
-          ],
+              const SizedBox(width: 16),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(title, style: AppTypography.actionText),
+                    const SizedBox(height: 2),
+                    Text(subtitle, style: AppTypography.subtitleSmall.copyWith(fontSize: 10)),
+                  ],
+                ),
+              ),
+              const Icon(Icons.chevron_right_outlined, color: AppColors.textSecondaryLight, size: 20),
+            ],
+          ),
         ),
       ),
     );
@@ -404,29 +452,33 @@ class _ReportsPageState extends State<ReportsPage>
   }
 
   Widget _buildMembersStats() {
-    return Container(
-      padding: const EdgeInsets.all(16),
-      decoration: BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.circular(16),
-        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 2))],
-      ),
+    final total = _statsMembres['total']?.toString() ?? '--';
+    final nouveaux = _statsMembres['nouveaux30j']?.toString() ?? '--';
+    final actifs = _statsMembres['actifs7j']?.toString() ?? '--';
+
+    return CoreCard(
+      padding: const EdgeInsets.all(20),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Row(
             children: [
-              const Icon(Icons.people, color: Color(0xFF6C5CE7), size: 20),
-              const SizedBox(width: 8),
-              Text('Statistiques membres', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.grey[800])),
+              const Icon(Icons.people_alt_outlined, color: AppColors.info, size: 20),
+              const SizedBox(width: 12),
+              Text(
+                'Indicateurs Membres'.toUpperCase(),
+                style: AppTypography.subtitleSmall.copyWith(fontWeight: FontWeight.bold, letterSpacing: 1.1),
+              ),
             ],
           ),
-          const SizedBox(height: 16),
+          const SizedBox(height: 20),
           Row(
             children: [
-              Expanded(child: _buildStatItem('Total membres', '1,247')),
-              Expanded(child: _buildStatItem('Nouveaux (30j)', '+156')),
-              Expanded(child: _buildStatItem('Actifs (7j)', '892')),
+              Expanded(child: _buildStatItem('Total', total)),
+              Container(width: 1, height: 30, color: AppColors.lightBorder.withOpacity(0.2)),
+              Expanded(child: _buildStatItem('Nouveaux', nouveaux)),
+              Container(width: 1, height: 30, color: AppColors.lightBorder.withOpacity(0.2)),
+              Expanded(child: _buildStatItem('Actifs %', actifs)),
             ],
           ),
         ],
@@ -435,27 +487,25 @@ class _ReportsPageState extends State<ReportsPage>
   }
 
   Widget _buildMembersReports() {
-    return Container(
-      padding: const EdgeInsets.all(16),
-      decoration: BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.circular(16),
-        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 2))],
-      ),
+    return CoreCard(
+      padding: const EdgeInsets.all(20),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Row(
             children: [
-              const Icon(Icons.description, color: Color(0xFF6C5CE7), size: 20),
-              const SizedBox(width: 8),
-              Text('Rapports membres', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.grey[800])),
+              const Icon(Icons.assignment_ind_outlined, color: AppColors.info, size: 20),
+              const SizedBox(width: 12),
+              Text(
+                'Rapports Membres'.toUpperCase(),
+                style: AppTypography.subtitleSmall.copyWith(fontWeight: FontWeight.bold, letterSpacing: 1.1),
+              ),
             ],
           ),
           const SizedBox(height: 16),
-          _buildReportItem('Liste complète des membres', 'Export avec toutes les informations', Icons.list_alt),
-          _buildReportItem('Analyse d\'engagement', 'Participation et activité des membres', Icons.trending_up),
-          _buildReportItem('Segmentation démographique', 'Répartition par âge, région, etc.', Icons.pie_chart),
+          _buildReportItem('Liste complète des membres', 'Export avec toutes les informations', Icons.list_alt_outlined),
+          _buildReportItem('Analyse d\'engagement', 'Participation et activité des membres', Icons.trending_up_outlined),
+          _buildReportItem('Segmentation démographique', 'Répartition par âge, région, etc.', Icons.pie_chart_outline),
         ],
       ),
     );
@@ -478,29 +528,33 @@ class _ReportsPageState extends State<ReportsPage>
   }
 
   Widget _buildOrganizationsStats() {
-    return Container(
-      padding: const EdgeInsets.all(16),
-      decoration: BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.circular(16),
-        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 2))],
-      ),
+    final total = _statsMembres['totalOrganisations']?.toString() ?? '--';
+    final actives = _statsMembres['organisationsActives']?.toString() ?? '--';
+    final moy = _statsMembres['membresParOrganisation']?.toString() ?? '--';
+
+    return CoreCard(
+      padding: const EdgeInsets.all(20),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Row(
             children: [
-              const Icon(Icons.business, color: Color(0xFF6C5CE7), size: 20),
-              const SizedBox(width: 8),
-              Text('Statistiques organisations', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.grey[800])),
+              const Icon(Icons.business_center_outlined, color: AppColors.primaryGreen, size: 20),
+              const SizedBox(width: 12),
+              Text(
+                'Indicateurs Organisations'.toUpperCase(),
+                style: AppTypography.subtitleSmall.copyWith(fontWeight: FontWeight.bold, letterSpacing: 1.1),
+              ),
             ],
           ),
-          const SizedBox(height: 16),
+          const SizedBox(height: 20),
           Row(
             children: [
-              Expanded(child: _buildStatItem('Total orgs', '89')),
-              Expanded(child: _buildStatItem('Actives', '67')),
-              Expanded(child: _buildStatItem('Membres moy.', '14')),
+              Expanded(child: _buildStatItem('Total', total)),
+              Container(width: 1, height: 30, color: AppColors.lightBorder.withOpacity(0.2)),
+              Expanded(child: _buildStatItem('Actives', actives)),
+              Container(width: 1, height: 30, color: AppColors.lightBorder.withOpacity(0.2)),
+              Expanded(child: _buildStatItem('Membres moy.', moy)),
             ],
           ),
         ],
@@ -509,27 +563,25 @@ class _ReportsPageState extends State<ReportsPage>
   }
 
   Widget _buildOrganizationsReports() {
-    return Container(
-      padding: const EdgeInsets.all(16),
-      decoration: BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.circular(16),
-        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 2))],
-      ),
+    return CoreCard(
+      padding: const EdgeInsets.all(20),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Row(
             children: [
-              const Icon(Icons.description, color: Color(0xFF6C5CE7), size: 20),
-              const SizedBox(width: 8),
-              Text('Rapports organisations', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.grey[800])),
+              const Icon(Icons.folder_shared_outlined, color: AppColors.primaryGreen, size: 20),
+              const SizedBox(width: 12),
+              Text(
+                'Rapports Structures'.toUpperCase(),
+                style: AppTypography.subtitleSmall.copyWith(fontWeight: FontWeight.bold, letterSpacing: 1.1),
+              ),
             ],
           ),
           const SizedBox(height: 16),
-          _buildReportItem('Annuaire des organisations', 'Liste complète avec contacts', Icons.contact_phone),
-          _buildReportItem('Performance par organisation', 'Activité et engagement', Icons.bar_chart),
-          _buildReportItem('Analyse de croissance', 'Évolution du nombre de membres', Icons.show_chart),
+          _buildReportItem('Annuaire des organisations', 'Liste complète avec contacts', Icons.contact_phone_outlined),
+          _buildReportItem('Performance par organisation', 'Activité et engagement', Icons.bar_chart_outlined),
+          _buildReportItem('Analyse de croissance', 'Évolution du nombre de membres', Icons.trending_up_outlined),
         ],
       ),
     );
@@ -552,29 +604,33 @@ class _ReportsPageState extends State<ReportsPage>
   }
 
   Widget _buildEventsStats() {
-    return Container(
-      padding: const EdgeInsets.all(16),
-      decoration: BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.circular(16),
-        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 2))],
-      ),
+    final total = _statsEvenements['total']?.toString() ?? '--';
+    final venir = _statsEvenements['aVenir']?.toString() ?? '--';
+    final participation = _statsEvenements['participationMoyenne']?.toString() ?? '--';
+
+    return CoreCard(
+      padding: const EdgeInsets.all(20),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Row(
             children: [
-              const Icon(Icons.event, color: Color(0xFF6C5CE7), size: 20),
-              const SizedBox(width: 8),
-              Text('Statistiques événements', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.grey[800])),
+              const Icon(Icons.event_note_outlined, color: AppColors.warning, size: 20),
+              const SizedBox(width: 12),
+              Text(
+                'Indicateurs Événements'.toUpperCase(),
+                style: AppTypography.subtitleSmall.copyWith(fontWeight: FontWeight.bold, letterSpacing: 1.1),
+              ),
             ],
           ),
-          const SizedBox(height: 16),
+          const SizedBox(height: 20),
           Row(
             children: [
-              Expanded(child: _buildStatItem('Total événements', '156')),
-              Expanded(child: _buildStatItem('À venir', '23')),
-              Expanded(child: _buildStatItem('Participation moy.', '45')),
+              Expanded(child: _buildStatItem('Total', total)),
+              Container(width: 1, height: 30, color: AppColors.lightBorder.withOpacity(0.2)),
+              Expanded(child: _buildStatItem('À Venir', venir)),
+              Container(width: 1, height: 30, color: AppColors.lightBorder.withOpacity(0.2)),
+              Expanded(child: _buildStatItem('Part. moyenne', participation)),
             ],
           ),
         ],
@@ -583,27 +639,25 @@ class _ReportsPageState extends State<ReportsPage>
   }
 
   Widget _buildEventsReports() {
-    return Container(
-      padding: const EdgeInsets.all(16),
-      decoration: BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.circular(16),
-        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 2))],
-      ),
+    return CoreCard(
+      padding: const EdgeInsets.all(20),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Row(
             children: [
-              const Icon(Icons.description, color: Color(0xFF6C5CE7), size: 20),
-              const SizedBox(width: 8),
-              Text('Rapports événements', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.grey[800])),
+              const Icon(Icons.history_edu_outlined, color: AppColors.warning, size: 20),
+              const SizedBox(width: 12),
+              Text(
+                'Rapports Logistique'.toUpperCase(),
+                style: AppTypography.subtitleSmall.copyWith(fontWeight: FontWeight.bold, letterSpacing: 1.1),
+              ),
             ],
           ),
           const SizedBox(height: 16),
-          _buildReportItem('Calendrier des événements', 'Planning complet avec détails', Icons.calendar_today),
+          _buildReportItem('Calendrier des événements', 'Planning complet avec détails', Icons.calendar_today_outlined),
           _buildReportItem('Analyse de participation', 'Taux de participation et feedback', Icons.people_outline),
-          _buildReportItem('ROI des événements', 'Retour sur investissement', Icons.attach_money),
+          _buildReportItem('ROI des événements', 'Retour sur investissement financier', Icons.analytics_outlined),
         ],
       ),
     );
@@ -613,38 +667,57 @@ class _ReportsPageState extends State<ReportsPage>
   Widget _buildStatItem(String label, String value) {
     return Column(
       children: [
-        Text(value, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Color(0xFF6C5CE7))),
-        Text(label, style: TextStyle(fontSize: 12, color: Colors.grey[600]), textAlign: TextAlign.center),
+        Text(
+          value,
+          style: AppTypography.headerSmall.copyWith(color: AppColors.primaryGreen, fontWeight: FontWeight.bold),
+        ),
+        const SizedBox(height: 4),
+        Text(
+          label.toUpperCase(),
+          style: AppTypography.subtitleSmall.copyWith(fontSize: 8, fontWeight: FontWeight.bold),
+          textAlign: TextAlign.center,
+        ),
       ],
     );
   }
 
   Widget _buildReportItem(String title, String subtitle, IconData icon) {
-    return InkWell(
-      onTap: () => _generateReport(title.toLowerCase().replaceAll(' ', '_')),
-      borderRadius: BorderRadius.circular(12),
-      child: Container(
-        margin: const EdgeInsets.only(bottom: 12),
-        padding: const EdgeInsets.all(12),
-        decoration: BoxDecoration(
-          color: Colors.grey[50],
-          borderRadius: BorderRadius.circular(12),
-        ),
-        child: Row(
-          children: [
-            Icon(icon, color: const Color(0xFF6C5CE7), size: 20),
-            const SizedBox(width: 12),
-            Expanded(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Text(title, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Color(0xFF1F2937))),
-                  Text(subtitle, style: TextStyle(fontSize: 12, color: Colors.grey[600])),
-                ],
+    return Container(
+      margin: const EdgeInsets.only(bottom: 12),
+      child: InkWell(
+        onTap: () => _generateReport(title.toLowerCase().replaceAll(' ', '_')),
+        borderRadius: BorderRadius.circular(12),
+        child: Container(
+          padding: const EdgeInsets.all(12),
+          decoration: BoxDecoration(
+            color: AppColors.lightBorder.withOpacity(0.05),
+            borderRadius: BorderRadius.circular(12),
+            border: Border.all(color: AppColors.lightBorder.withOpacity(0.1)),
+          ),
+          child: Row(
+            children: [
+              Container(
+                padding: const EdgeInsets.all(8),
+                decoration: BoxDecoration(
+                  color: AppColors.primaryGreen.withOpacity(0.1),
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                child: Icon(icon, color: AppColors.primaryGreen, size: 20),
               ),
-            ),
-            Icon(Icons.download, color: Colors.grey[400], size: 16),
-          ],
+              const SizedBox(width: 16),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(title, style: AppTypography.actionText),
+                    const SizedBox(height: 2),
+                    Text(subtitle, style: AppTypography.subtitleSmall.copyWith(fontSize: 10)),
+                  ],
+                ),
+              ),
+              const Icon(Icons.file_download_outlined, color: AppColors.textSecondaryLight, size: 20),
+            ],
+          ),
         ),
       ),
     );
@@ -679,7 +752,7 @@ class _ReportsPageState extends State<ReportsPage>
           ElevatedButton(
             onPressed: () {
               Navigator.of(context).pop();
-              _showSuccessSnackBar('Export lancé - Vous recevrez un email');
+              context.read<ReportsBloc>().add(GenerateReportRequested('export', format: _selectedFormat));
             },
             style: ElevatedButton.styleFrom(backgroundColor: const Color(0xFF6C5CE7), foregroundColor: Colors.white),
             child: const Text('Exporter'),
@@ -689,8 +762,13 @@ class _ReportsPageState extends State<ReportsPage>
     );
   }
 
-  void _scheduleReport() => _showSuccessSnackBar('Programmation de rapport configurée');
-  void _generateReport(String type) => _showSuccessSnackBar('Génération du rapport "$type" lancée');
+  void _scheduleReport() {
+    context.read<ReportsBloc>().add(const ScheduleReportRequested());
+  }
+
+  void _generateReport(String type) {
+    context.read<ReportsBloc>().add(GenerateReportRequested(type));
+  }
 
   void _showSuccessSnackBar(String message) {
     ScaffoldMessenger.of(context).showSnackBar(

unionflow/unionflow-mobile-apps/lib/features/reports/presentation/pages/reports_page_wrapper.dart

@@ -2,7 +2,7 @@ library reports_page_wrapper;
 
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:get_it/get_it.dart';
+import '../../../../core/di/injection_container.dart';
 import '../bloc/reports_bloc.dart';
 import 'reports_page.dart';
 
@@ -13,7 +13,7 @@ class ReportsPageWrapper extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return BlocProvider<ReportsBloc>(
-      create: (_) => GetIt.instance<ReportsBloc>(),
+      create: (_) => sl<ReportsBloc>(),
       child: const ReportsPage(),
     );
   }