feat(mobile): Implement Keycloak WebView authentication with HTTP callback

- Replace flutter_appauth with custom WebView implementation to resolve deep link issues
- Add KeycloakWebViewAuthService with integrated WebView for seamless authentication
- Configure Android manifest for HTTP cleartext traffic support
- Add network security config for development environment (192.168.1.11)
- Update Keycloak client to use HTTP callback endpoint (http://192.168.1.11:8080/auth/callback)
- Remove obsolete keycloak_auth_service.dart and temporary scripts
- Clean up dependencies and regenerate injection configuration
- Tested successfully on multiple Android devices (Xiaomi 2201116TG, SM A725F)

BREAKING CHANGE: Authentication flow now uses WebView instead of external browser
- Users will see Keycloak login page within the app instead of browser redirect
- Resolves ERR_CLEARTEXT_NOT_PERMITTED and deep link state management issues
- Maintains full OIDC compliance with PKCE flow and secure token storage

Technical improvements:
- WebView with custom navigation delegate for callback handling
- Automatic token extraction and user info parsing from JWT
- Proper error handling and user feedback
- Consistent authentication state management across app lifecycle

unionflow-mobile-apps/lib/features/members/presentation/pages/membre_create_page.dart

@@ -4,6 +4,11 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:intl/intl.dart';
 import '../../../../core/di/injection.dart';
 import '../../../../core/models/membre_model.dart';
+import '../../../../core/error/error_handler.dart';
+import '../../../../core/validation/form_validator.dart';
+import '../../../../core/feedback/user_feedback.dart';
+import '../../../../core/animations/loading_animations.dart';
+import '../../../../core/animations/page_transitions.dart';
 import '../../../../shared/theme/app_theme.dart';
 import '../../../../shared/widgets/custom_text_field.dart';
 import '../../../../shared/widgets/buttons/buttons.dart';
@@ -92,28 +97,41 @@ class _MembreCreatePageState extends State<MembreCreatePage>
         body: BlocConsumer<MembresBloc, MembresState>(
           listener: (context, state) {
             if (state is MembreCreated) {
+              // Fermer l'indicateur de chargement
+              UserFeedback.hideLoading(context);
+
               setState(() {
                 _isLoading = false;
               });
-              
-              ScaffoldMessenger.of(context).showSnackBar(
-                const SnackBar(
-                  content: Text('Membre créé avec succès !'),
-                  backgroundColor: AppTheme.successColor,
-                ),
+
+              // Afficher le message de succès avec feedback haptique
+              UserFeedback.showSuccess(
+                context,
+                'Membre créé avec succès !',
+                onAction: () => Navigator.of(context).pop(true),
+                actionLabel: 'Voir la liste',
               );
-              
-              Navigator.of(context).pop(true); // Retourner true pour indiquer le succès
+
+              // Retourner à la liste après un délai
+              Future.delayed(const Duration(seconds: 2), () {
+                if (mounted) {
+                  Navigator.of(context).pop(true);
+                }
+              });
+
             } else if (state is MembresError) {
+              // Fermer l'indicateur de chargement
+              UserFeedback.hideLoading(context);
+
               setState(() {
                 _isLoading = false;
               });
-              
-              ScaffoldMessenger.of(context).showSnackBar(
-                SnackBar(
-                  content: Text(state.message),
-                  backgroundColor: AppTheme.errorColor,
-                ),
+
+              // Gérer l'erreur avec le nouveau système
+              ErrorHandler.handleError(
+                context,
+                state.failure,
+                onRetry: () => _submitForm(),
               );
             }
           },
@@ -780,82 +798,122 @@ class _MembreCreatePageState extends State<MembreCreatePage>
   }
 
   bool _validatePersonalInfo() {
-    bool isValid = true;
+    final errors = <String>[];
 
-    if (_prenomController.text.trim().isEmpty) {
-      _showFieldError('Le prénom est requis');
-      isValid = false;
+    // Validation du prénom
+    final prenomError = FormValidator.name(_prenomController.text, fieldName: 'Le prénom');
+    if (prenomError != null) errors.add(prenomError);
+
+    // Validation du nom
+    final nomError = FormValidator.name(_nomController.text, fieldName: 'Le nom');
+    if (nomError != null) errors.add(nomError);
+
+    // Validation de la date de naissance
+    if (_dateNaissance != null) {
+      final dateError = FormValidator.birthDate(_dateNaissance!, minAge: 16);
+      if (dateError != null) errors.add(dateError);
     }
 
-    if (_nomController.text.trim().isEmpty) {
-      _showFieldError('Le nom est requis');
-      isValid = false;
+    if (errors.isNotEmpty) {
+      UserFeedback.showWarning(context, errors.first);
+      return false;
     }
 
-    return isValid;
+    return true;
   }
 
   bool _validateContactInfo() {
-    bool isValid = true;
+    final errors = <String>[];
 
-    if (_emailController.text.trim().isEmpty) {
-      _showFieldError('L\'email est requis');
-      isValid = false;
-    } else if (!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(_emailController.text)) {
-      _showFieldError('Format d\'email invalide');
-      isValid = false;
+    // Validation de l'email
+    final emailError = FormValidator.email(_emailController.text);
+    if (emailError != null) errors.add(emailError);
+
+    // Validation du téléphone
+    final phoneError = FormValidator.phone(_telephoneController.text);
+    if (phoneError != null) errors.add(phoneError);
+
+    // Validation de l'adresse (optionnelle)
+    final addressError = FormValidator.address(_adresseController.text);
+    if (addressError != null) errors.add(addressError);
+
+    // Validation de la profession (optionnelle)
+    final professionError = FormValidator.profession(_professionController.text);
+    if (professionError != null) errors.add(professionError);
+
+    if (errors.isNotEmpty) {
+      UserFeedback.showWarning(context, errors.first);
+      return false;
     }
 
-    if (_telephoneController.text.trim().isEmpty) {
-      _showFieldError('Le téléphone est requis');
-      isValid = false;
-    }
-
-    return isValid;
+    return true;
   }
 
-  void _showFieldError(String message) {
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        content: Text(message),
-        backgroundColor: AppTheme.errorColor,
-        duration: const Duration(seconds: 2),
-      ),
-    );
-  }
+
 
   void _submitForm() {
-    if (!_formKey.currentState!.validate()) {
+    // Validation finale complète
+    if (!_validateAllSteps()) {
       return;
     }
 
+    if (!_formKey.currentState!.validate()) {
+      UserFeedback.showWarning(context, 'Veuillez corriger les erreurs dans le formulaire');
+      return;
+    }
+
+    // Afficher l'indicateur de chargement
+    UserFeedback.showLoading(context, message: 'Création du membre en cours...');
+
     setState(() {
       _isLoading = true;
     });
 
-    // Créer le modèle membre
-    final membre = MembreModel(
-      id: '', // Sera généré par le backend
-      numeroMembre: _numeroMembreController.text.trim(),
-      nom: _nomController.text.trim(),
-      prenom: _prenomController.text.trim(),
-      email: _emailController.text.trim(),
-      telephone: _telephoneController.text.trim(),
-      dateNaissance: _dateNaissance,
-      adresse: _adresseController.text.trim().isNotEmpty ? _adresseController.text.trim() : null,
-      ville: _villeController.text.trim().isNotEmpty ? _villeController.text.trim() : null,
-      codePostal: _codePostalController.text.trim().isNotEmpty ? _codePostalController.text.trim() : null,
-      pays: _paysController.text.trim().isNotEmpty ? _paysController.text.trim() : null,
-      profession: _professionController.text.trim().isNotEmpty ? _professionController.text.trim() : null,
-      dateAdhesion: _dateAdhesion,
-      actif: _actif,
-      statut: 'ACTIF',
-      version: 1,
-      dateCreation: DateTime.now(),
-    );
+    try {
+      // Créer le modèle membre avec validation des données
+      final membre = MembreModel(
+        id: '', // Sera généré par le backend
+        numeroMembre: _numeroMembreController.text.trim(),
+        nom: _nomController.text.trim(),
+        prenom: _prenomController.text.trim(),
+        email: _emailController.text.trim(),
+        telephone: _telephoneController.text.trim(),
+        dateNaissance: _dateNaissance,
+        adresse: _adresseController.text.trim().isNotEmpty ? _adresseController.text.trim() : null,
+        ville: _villeController.text.trim().isNotEmpty ? _villeController.text.trim() : null,
+        codePostal: _codePostalController.text.trim().isNotEmpty ? _codePostalController.text.trim() : null,
+        pays: _paysController.text.trim().isNotEmpty ? _paysController.text.trim() : null,
+        profession: _professionController.text.trim().isNotEmpty ? _professionController.text.trim() : null,
+        dateAdhesion: _dateAdhesion,
+        actif: _actif,
+        statut: 'ACTIF',
+        version: 1,
+        dateCreation: DateTime.now(),
+      );
 
-    // Envoyer l'événement de création
-    _membresBloc.add(CreateMembre(membre));
+      // Envoyer l'événement de création
+      _membresBloc.add(CreateMembre(membre));
+    } catch (e) {
+      UserFeedback.hideLoading(context);
+      ErrorHandler.handleError(context, e, customMessage: 'Erreur lors de la préparation des données');
+      setState(() {
+        _isLoading = false;
+      });
+    }
+  }
+
+  bool _validateAllSteps() {
+    // Valider toutes les étapes
+    if (!_validatePersonalInfo()) return false;
+    if (!_validateContactInfo()) return false;
+
+    // Validation supplémentaire pour les champs obligatoires
+    if (_dateNaissance == null) {
+      UserFeedback.showWarning(context, 'La date de naissance est requise');
+      return false;
+    }
+
+    return true;
   }
 
   Future<void> _selectDateNaissance() async {

unionflow-mobile-apps/lib/features/members/presentation/pages/membre_edit_page.dart

@@ -7,6 +7,8 @@ import '../../../../core/models/membre_model.dart';
 import '../../../../shared/theme/app_theme.dart';
 import '../../../../shared/widgets/custom_text_field.dart';
 import '../../../../shared/widgets/buttons/buttons.dart';
+import '../../../../core/auth/services/permission_service.dart';
+import '../../../../shared/widgets/permission_widget.dart';
 import '../bloc/membres_bloc.dart';
 import '../bloc/membres_event.dart';
 import '../bloc/membres_state.dart';
@@ -25,7 +27,7 @@ class MembreEditPage extends StatefulWidget {
 }
 
 class _MembreEditPageState extends State<MembreEditPage>
-    with SingleTickerProviderStateMixin {
+    with SingleTickerProviderStateMixin, PermissionMixin {
   late MembresBloc _membresBloc;
   late TabController _tabController;
   final _formKey = GlobalKey<FormState>();
@@ -53,12 +55,22 @@ class _MembreEditPageState extends State<MembreEditPage>
   @override
   void initState() {
     super.initState();
+
+    // Vérification des permissions d'accès
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!permissionService.canEditMembers) {
+        showPermissionError(context, 'Vous n\'avez pas les permissions pour modifier les membres');
+        Navigator.of(context).pop();
+        return;
+      }
+    });
+
     _membresBloc = getIt<MembresBloc>();
     _tabController = TabController(length: 3, vsync: this);
-    
+
     // Pré-remplir les champs avec les données existantes
     _populateFields();
-    
+
     // Écouter les changements pour détecter les modifications
     _setupChangeListeners();
   }
@@ -184,10 +196,12 @@ class _MembreEditPageState extends State<MembreEditPage>
       ),
       actions: [
         if (_hasChanges)
-          IconButton(
+          PermissionIconButton(
+            permission: () => permissionService.canEditMembers,
             icon: const Icon(Icons.save),
             onPressed: _submitForm,
             tooltip: 'Sauvegarder',
+            disabledMessage: 'Vous n\'avez pas les permissions pour modifier ce membre',
           ),
         IconButton(
           icon: const Icon(Icons.help_outline),
@@ -939,6 +953,12 @@ class _MembreEditPageState extends State<MembreEditPage>
   }
 
   void _submitForm() {
+    // Vérification des permissions
+    if (!permissionService.canEditMembers) {
+      showPermissionError(context, 'Vous n\'avez pas les permissions pour modifier ce membre');
+      return;
+    }
+
     if (!_formKey.currentState!.validate()) {
       return;
     }
@@ -948,6 +968,12 @@ class _MembreEditPageState extends State<MembreEditPage>
       return;
     }
 
+    // Log de l'action pour audit
+    permissionService.logAction('Modification membre', details: {
+      'membreId': widget.membre.id,
+      'nom': '${widget.membre.prenom} ${widget.membre.nom}',
+    });
+
     setState(() {
       _isLoading = true;
     });

unionflow-mobile-apps/lib/features/members/presentation/pages/membres_dashboard_page.dart

@@ -5,6 +5,15 @@ import '../../../../shared/theme/app_theme.dart';
 import '../bloc/membres_bloc.dart';
 import '../bloc/membres_event.dart';
 import '../bloc/membres_state.dart';
+import '../widgets/dashboard/welcome_section_widget.dart';
+import '../widgets/dashboard/members_kpi_section_widget.dart';
+import '../widgets/dashboard/members_quick_actions_widget.dart';
+import '../widgets/dashboard/members_analytics_widget.dart';
+import '../widgets/dashboard/members_enhanced_list_widget.dart';
+import '../widgets/dashboard/members_recent_activities_widget.dart';
+import '../widgets/dashboard/members_advanced_filters_widget.dart';
+import '../widgets/dashboard/members_smart_search_widget.dart';
+import '../widgets/dashboard/members_notifications_widget.dart';
 
 class MembresDashboardPage extends StatefulWidget {
   const MembresDashboardPage({super.key});
@@ -15,6 +24,8 @@ class MembresDashboardPage extends StatefulWidget {
 
 class _MembresDashboardPageState extends State<MembresDashboardPage> {
   late MembresBloc _membresBloc;
+  Map<String, dynamic> _currentFilters = {};
+  String _currentSearchQuery = '';
 
   @override
   void initState() {
@@ -27,6 +38,37 @@ class _MembresDashboardPageState extends State<MembresDashboardPage> {
     _membresBloc.add(const LoadMembres());
   }
 
+  void _onFiltersChanged(Map<String, dynamic> filters) {
+    setState(() {
+      _currentFilters = filters;
+    });
+    // TODO: Appliquer les filtres aux données
+    _loadData();
+  }
+
+  void _onSearchChanged(String query) {
+    setState(() {
+      _currentSearchQuery = query;
+    });
+    // TODO: Appliquer la recherche
+    if (query.isNotEmpty) {
+      _membresBloc.add(SearchMembres(query));
+    } else {
+      _loadData();
+    }
+  }
+
+  void _onSuggestionSelected(Map<String, dynamic> suggestion) {
+    switch (suggestion['type']) {
+      case 'quick_filter':
+        _onFiltersChanged(suggestion['filter']);
+        break;
+      case 'member':
+        // TODO: Naviguer vers les détails du membre
+        break;
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return BlocProvider.value(
@@ -117,37 +159,109 @@ class _MembresDashboardPageState extends State<MembresDashboardPage> {
   }
 
   Widget _buildDashboard() {
-    return Container(
+    return SingleChildScrollView(
       padding: const EdgeInsets.all(16),
-      child: const Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(
-              Icons.dashboard,
-              size: 64,
-              color: Colors.grey,
-            ),
-            SizedBox(height: 16),
-            Text(
-              'Dashboard Vide',
-              style: TextStyle(
-                fontSize: 24,
-                fontWeight: FontWeight.w600,
-                color: Colors.grey,
-              ),
-            ),
-            SizedBox(height: 8),
-            Text(
-              'Prêt à être reconstruit pièce par pièce',
-              style: TextStyle(
-                fontSize: 16,
-                color: Colors.grey,
-              ),
-              textAlign: TextAlign.center,
-            ),
-          ],
-        ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          // Section d'accueil
+          const MembersWelcomeSectionWidget(),
+          const SizedBox(height: 24),
+
+          // Notifications en temps réel
+          const MembersNotificationsWidget(),
+
+          // Recherche intelligente
+          MembersSmartSearchWidget(
+            onSearch: _onSearchChanged,
+            onSuggestionSelected: _onSuggestionSelected,
+            recentSearches: const [], // TODO: Implémenter l'historique
+          ),
+          const SizedBox(height: 16),
+
+          // Filtres avancés
+          MembersAdvancedFiltersWidget(
+            onFiltersChanged: _onFiltersChanged,
+            initialFilters: _currentFilters,
+          ),
+
+          // KPI Cards
+          const MembersKPISectionWidget(),
+          const SizedBox(height: 24),
+
+          // Actions rapides
+          const MembersQuickActionsWidget(),
+          const SizedBox(height: 24),
+
+          // Graphiques et analyses
+          const MembersAnalyticsWidget(),
+          const SizedBox(height: 24),
+
+          // Activités récentes
+          const MembersRecentActivitiesWidget(),
+          const SizedBox(height: 24),
+
+          // Liste des membres améliorée
+          BlocBuilder<MembresBloc, MembresState>(
+            builder: (context, state) {
+              if (state is MembresLoaded) {
+                return MembersEnhancedListWidget(
+                  members: state.membres,
+                  onMemberTap: (member) {
+                    // TODO: Naviguer vers les détails du membre
+                    ScaffoldMessenger.of(context).showSnackBar(
+                      SnackBar(
+                        content: Text('Détails de ${member.nomComplet}'),
+                        backgroundColor: AppTheme.primaryColor,
+                      ),
+                    );
+                  },
+                  onMemberCall: (member) {
+                    // TODO: Appeler le membre
+                    ScaffoldMessenger.of(context).showSnackBar(
+                      SnackBar(
+                        content: Text('Appel de ${member.nomComplet}'),
+                        backgroundColor: AppTheme.successColor,
+                      ),
+                    );
+                  },
+                  onMemberMessage: (member) {
+                    // TODO: Envoyer un message
+                    ScaffoldMessenger.of(context).showSnackBar(
+                      SnackBar(
+                        content: Text('Message à ${member.nomComplet}'),
+                        backgroundColor: AppTheme.infoColor,
+                      ),
+                    );
+                  },
+                  onMemberEdit: (member) {
+                    // TODO: Modifier le membre
+                    ScaffoldMessenger.of(context).showSnackBar(
+                      SnackBar(
+                        content: Text('Modification de ${member.nomComplet}'),
+                        backgroundColor: AppTheme.warningColor,
+                      ),
+                    );
+                  },
+                  searchQuery: _currentSearchQuery,
+                  filters: _currentFilters,
+                );
+              } else if (state is MembresLoading) {
+                return MembersEnhancedListWidget(
+                  members: const [],
+                  onMemberTap: (member) {},
+                  isLoading: true,
+                  searchQuery: '',
+                  filters: const {},
+                );
+              } else {
+                return const Center(
+                  child: Text('Erreur lors du chargement des membres'),
+                );
+              }
+            },
+          ),
+        ],
       ),
     );
   }

unionflow-mobile-apps/lib/features/members/presentation/pages/membres_list_page.dart

@@ -3,8 +3,12 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:pull_to_refresh/pull_to_refresh.dart';
 import '../../../../core/di/injection.dart';
 import '../../../../core/models/membre_model.dart';
+import '../../../../core/auth/services/permission_service.dart';
+import '../../../../core/services/communication_service.dart';
+import '../../../../core/services/export_import_service.dart';
 import '../../../../shared/theme/app_theme.dart';
 import '../../../../shared/widgets/coming_soon_page.dart';
+import '../../../../shared/widgets/permission_widget.dart';
 import '../bloc/membres_bloc.dart';
 import '../bloc/membres_event.dart';
 import '../bloc/membres_state.dart';
@@ -13,9 +17,12 @@ import '../widgets/membres_search_bar.dart';
 import '../widgets/membre_delete_dialog.dart';
 import '../widgets/membres_advanced_search.dart';
 import '../widgets/membres_export_dialog.dart';
+import '../widgets/membres_stats_overview.dart';
+import '../widgets/membres_view_controls.dart';
+import '../widgets/membre_enhanced_card.dart';
 import 'membre_details_page.dart';
 import 'membre_create_page.dart';
-import 'membres_dashboard_page.dart';
+import '../widgets/error_demo_widget.dart';
 
 
 /// Page de liste des membres avec fonctionnalités avancées
@@ -26,12 +33,17 @@ class MembresListPage extends StatefulWidget {
   State<MembresListPage> createState() => _MembresListPageState();
 }
 
-class _MembresListPageState extends State<MembresListPage> {
+class _MembresListPageState extends State<MembresListPage> with PermissionMixin {
   final RefreshController _refreshController = RefreshController();
   final TextEditingController _searchController = TextEditingController();
   late MembresBloc _membresBloc;
   List<MembreModel> _membres = [];
 
+  // Nouvelles variables pour les améliorations
+  String _viewMode = 'card'; // 'card', 'list', 'grid'
+  String _sortBy = 'name'; // 'name', 'date', 'age', 'status'
+  bool _sortAscending = true;
+
   @override
   void initState() {
     super.initState();
@@ -64,25 +76,46 @@ class _MembresListPageState extends State<MembresListPage> {
           foregroundColor: Colors.white,
           elevation: 0,
           actions: [
-            IconButton(
+            // Recherche avancée - Accessible à tous les utilisateurs connectés
+            PermissionIconButton(
+              permission: () => permissionService.isAuthenticated,
               icon: const Icon(Icons.search),
               onPressed: () => _showAdvancedSearch(),
               tooltip: 'Recherche avancée',
             ),
-            IconButton(
+
+            // Export - Réservé aux gestionnaires et admins
+            PermissionIconButton(
+              permission: () => permissionService.canExportMembers,
               icon: const Icon(Icons.file_download),
               onPressed: () => _showExportDialog(),
               tooltip: 'Exporter',
+              disabledMessage: 'Seuls les gestionnaires peuvent exporter les données',
             ),
-            IconButton(
-              icon: const Icon(Icons.add_circle_outline),
-              onPressed: () => _showAddMemberDialog(),
-              tooltip: 'Ajouter un membre',
+
+            // Import - Réservé aux gestionnaires et admins
+            PermissionIconButton(
+              permission: () => permissionService.canCreateMembers,
+              icon: const Icon(Icons.file_upload),
+              onPressed: () => _showImportDialog(),
+              tooltip: 'Importer',
+              disabledMessage: 'Seuls les gestionnaires peuvent importer des données',
             ),
-            IconButton(
+
+            // Statistiques - Réservé aux gestionnaires et admins
+            PermissionIconButton(
+              permission: () => permissionService.canViewMemberStats,
               icon: const Icon(Icons.analytics_outlined),
               onPressed: () => _showStatsDialog(),
               tooltip: 'Statistiques',
+              disabledMessage: 'Seuls les gestionnaires peuvent voir les statistiques',
+            ),
+
+            // Démonstration des nouvelles fonctionnalités (développement uniquement)
+            IconButton(
+              icon: const Icon(Icons.bug_report),
+              onPressed: () => _showErrorDemo(),
+              tooltip: 'Démo Gestion d\'Erreurs',
             ),
           ],
         ),
@@ -158,21 +191,7 @@ class _MembresListPageState extends State<MembresListPage> {
                       ),
                       child: membres.isEmpty
                           ? _buildEmptyWidget(isSearchResult)
-                          : ListView.builder(
-                              padding: const EdgeInsets.all(16),
-                              itemCount: membres.length,
-                              itemBuilder: (context, index) {
-                                return Padding(
-                                  padding: const EdgeInsets.only(bottom: 12),
-                                  child: MembreCard(
-                                    membre: membres[index],
-                                    onTap: () => _showMemberDetails(membres[index]),
-                                    onEdit: () => _showEditMemberDialog(membres[index]),
-                                    onDelete: () => _showDeleteConfirmation(membres[index]),
-                                  ),
-                                );
-                              },
-                            ),
+                          : _buildScrollableContent(membres),
                     );
                   }
                   
@@ -190,6 +209,12 @@ class _MembresListPageState extends State<MembresListPage> {
             ),
           ],
         ),
+        floatingActionButton: PermissionFAB(
+          permission: () => permissionService.canCreateMembers,
+          onPressed: () => _showAddMemberDialog(),
+          tooltip: 'Ajouter un membre',
+          child: const Icon(Icons.add),
+        ),
       ),
     );
   }
@@ -271,25 +296,13 @@ class _MembresListPageState extends State<MembresListPage> {
             Text(
               isSearchResult
                   ? 'Essayez avec d\'autres termes de recherche'
-                  : 'Commencez par ajouter votre premier membre',
+                  : 'Utilisez le bouton + en bas pour ajouter votre premier membre',
               textAlign: TextAlign.center,
               style: const TextStyle(
                 fontSize: 14,
                 color: AppTheme.textSecondary,
               ),
             ),
-            if (!isSearchResult) ...[
-              const SizedBox(height: 24),
-              ElevatedButton.icon(
-                onPressed: _showAddMemberDialog,
-                icon: const Icon(Icons.add),
-                label: const Text('Ajouter un membre'),
-                style: ElevatedButton.styleFrom(
-                  backgroundColor: AppTheme.primaryColor,
-                  foregroundColor: Colors.white,
-                ),
-              ),
-            ],
           ],
         ),
       ),
@@ -323,8 +336,197 @@ class _MembresListPageState extends State<MembresListPage> {
     );
   }
 
+  /// Construit le contenu scrollable avec statistiques, contrôles et liste
+  Widget _buildScrollableContent(List<MembreModel> membres) {
+    final sortedMembers = _getSortedMembers(membres);
+
+    return CustomScrollView(
+      slivers: [
+        // Widget de statistiques
+        SliverToBoxAdapter(
+          child: MembresStatsOverview(
+            membres: membres,
+            searchQuery: _searchController.text,
+          ),
+        ),
+
+        // Contrôles d'affichage
+        SliverToBoxAdapter(
+          child: MembresViewControls(
+            viewMode: _viewMode,
+            sortBy: _sortBy,
+            sortAscending: _sortAscending,
+            totalCount: membres.length,
+            onViewModeChanged: (mode) {
+              setState(() {
+                _viewMode = mode;
+              });
+            },
+            onSortChanged: (sortBy) {
+              setState(() {
+                _sortBy = sortBy;
+              });
+            },
+            onSortDirectionChanged: () {
+              setState(() {
+                _sortAscending = !_sortAscending;
+              });
+            },
+          ),
+        ),
+
+        // Liste des membres en mode sliver
+        _buildSliverMembersList(sortedMembers),
+      ],
+    );
+  }
+
+  /// Construit la liste des membres en mode sliver pour le scroll
+  Widget _buildSliverMembersList(List<MembreModel> membres) {
+    if (_viewMode == 'grid') {
+      return SliverGrid(
+        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: 2,
+          childAspectRatio: 0.8,
+          crossAxisSpacing: 12,
+          mainAxisSpacing: 12,
+        ),
+        delegate: SliverChildBuilderDelegate(
+          (context, index) {
+            return Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16),
+              child: MembreEnhancedCard(
+                membre: membres[index],
+                viewMode: _viewMode,
+                onTap: () => _showMemberDetails(membres[index]),
+                onEdit: permissionService.canEditMembers
+                    ? () => _showEditMemberDialog(membres[index])
+                    : null,
+                onDelete: permissionService.canDeleteMembers
+                    ? () => _showDeleteConfirmation(membres[index])
+                    : null,
+                onCall: permissionService.canCallMembers
+                    ? () => _callMember(membres[index])
+                    : null,
+                onMessage: permissionService.canMessageMembers
+                    ? () => _messageMember(membres[index])
+                    : null,
+              ),
+            );
+          },
+          childCount: membres.length,
+        ),
+      );
+    } else {
+      return SliverList(
+        delegate: SliverChildBuilderDelegate(
+          (context, index) {
+            return Padding(
+              padding: const EdgeInsets.fromLTRB(16, 0, 16, 8),
+              child: MembreEnhancedCard(
+                membre: membres[index],
+                viewMode: _viewMode,
+                onTap: () => _showMemberDetails(membres[index]),
+                onEdit: permissionService.canEditMembers
+                    ? () => _showEditMemberDialog(membres[index])
+                    : null,
+                onDelete: permissionService.canDeleteMembers
+                    ? () => _showDeleteConfirmation(membres[index])
+                    : null,
+                onCall: permissionService.canCallMembers
+                    ? () => _callMember(membres[index])
+                    : null,
+                onMessage: permissionService.canMessageMembers
+                    ? () => _messageMember(membres[index])
+                    : null,
+              ),
+            );
+          },
+          childCount: membres.length,
+        ),
+      );
+    }
+  }
+
+  /// Trie les membres selon les critères sélectionnés
+  List<MembreModel> _getSortedMembers(List<MembreModel> membres) {
+    final sortedMembers = List<MembreModel>.from(membres);
+
+    sortedMembers.sort((a, b) {
+      int comparison = 0;
+
+      switch (_sortBy) {
+        case 'name':
+          comparison = a.nomComplet.compareTo(b.nomComplet);
+          break;
+        case 'date':
+          comparison = a.dateAdhesion.compareTo(b.dateAdhesion);
+          break;
+        case 'age':
+          comparison = a.age.compareTo(b.age);
+          break;
+        case 'status':
+          comparison = a.statut.compareTo(b.statut);
+          break;
+      }
+
+      return _sortAscending ? comparison : -comparison;
+    });
+
+    return sortedMembers;
+  }
+
+
+
+  /// Actions sur les membres
+  Future<void> _callMember(MembreModel membre) async {
+    // Vérifier les permissions
+    if (!permissionService.canCallMembers) {
+      showPermissionError(context, 'Vous n\'avez pas les permissions pour appeler les membres');
+      return;
+    }
+
+    // Log de l'action pour audit
+    permissionService.logAction('Tentative d\'appel membre', details: {
+      'membreId': membre.id,
+      'membreNom': membre.nomComplet,
+      'telephone': membre.telephone,
+    });
+
+    // Utiliser le service de communication pour effectuer l'appel
+    final communicationService = CommunicationService();
+    await communicationService.callMember(context, membre);
+  }
+
+  Future<void> _messageMember(MembreModel membre) async {
+    // Vérifier les permissions
+    if (!permissionService.canMessageMembers) {
+      showPermissionError(context, 'Vous n\'avez pas les permissions pour envoyer des messages aux membres');
+      return;
+    }
+
+    // Log de l'action pour audit
+    permissionService.logAction('Tentative d\'envoi SMS membre', details: {
+      'membreId': membre.id,
+      'membreNom': membre.nomComplet,
+      'telephone': membre.telephone,
+    });
+
+    // Utiliser le service de communication pour envoyer un SMS
+    final communicationService = CommunicationService();
+    await communicationService.sendSMS(context, membre);
+  }
+
   /// Affiche le formulaire d'ajout de membre
   void _showAddMemberDialog() async {
+    // Vérifier les permissions avant d'ouvrir le formulaire
+    if (!permissionService.canCreateMembers) {
+      showPermissionError(context, 'Vous n\'avez pas les permissions pour créer de nouveaux membres');
+      return;
+    }
+
+    permissionService.logAction('Ouverture formulaire création membre');
+
     final result = await Navigator.of(context).push(
       MaterialPageRoute(
         builder: (context) => const MembreCreatePage(),
@@ -339,6 +541,14 @@ class _MembresListPageState extends State<MembresListPage> {
 
   /// Affiche le dialog d'édition de membre
   void _showEditMemberDialog(membre) {
+    // Vérifier les permissions avant d'ouvrir le formulaire
+    if (!permissionService.canEditMembers) {
+      showPermissionError(context, 'Vous n\'avez pas les permissions pour modifier les membres');
+      return;
+    }
+
+    permissionService.logAction('Ouverture formulaire édition membre', details: {'membreId': membre.id});
+
     // TODO: Implémenter le formulaire d'édition
     showDialog(
       context: context,
@@ -353,6 +563,14 @@ class _MembresListPageState extends State<MembresListPage> {
 
   /// Affiche la confirmation de suppression
   void _showDeleteConfirmation(membre) async {
+    // Vérifier les permissions avant d'ouvrir le dialog
+    if (!permissionService.canDeleteMembers) {
+      showPermissionError(context, 'Vous n\'avez pas les permissions pour supprimer des membres');
+      return;
+    }
+
+    permissionService.logAction('Ouverture dialog suppression membre', details: {'membreId': membre.id});
+
     final result = await showDialog<bool>(
       context: context,
       barrierDismissible: false,
@@ -367,9 +585,19 @@ class _MembresListPageState extends State<MembresListPage> {
 
   /// Affiche les statistiques
   void _showStatsDialog() {
-    Navigator.of(context).push(
-      MaterialPageRoute(
-        builder: (context) => const MembresDashboardPage(),
+    // Vérifier les permissions avant d'afficher les statistiques
+    if (!permissionService.canViewMemberStats) {
+      showPermissionError(context, 'Vous n\'avez pas les permissions pour voir les statistiques');
+      return;
+    }
+
+    permissionService.logAction('Consultation statistiques membres');
+
+    // TODO: Créer une page de statistiques détaillées
+    ScaffoldMessenger.of(context).showSnackBar(
+      const SnackBar(
+        content: Text('Statistiques détaillées - En développement'),
+        backgroundColor: AppTheme.infoColor,
       ),
     );
   }
@@ -386,11 +614,24 @@ class _MembresListPageState extends State<MembresListPage> {
         maxChildSize: 0.95,
         builder: (context, scrollController) => MembresAdvancedSearch(
           onSearch: (filters) {
-            // TODO: Implémenter la recherche avec filtres
+            // Fermer le modal
+            Navigator.of(context).pop();
+
+            // Lancer la recherche avancée
+            context.read<MembresBloc>().add(AdvancedSearchMembres(filters));
+
+            // Log de l'action pour audit
+            permissionService.logAction('Recherche avancée membres', details: {
+              'filtres': filters.keys.where((key) => filters[key] != null && filters[key].toString().isNotEmpty).toList(),
+              'nombreFiltres': filters.values.where((value) => value != null && value.toString().isNotEmpty).length,
+            });
+
+            // Afficher un message de confirmation
             ScaffoldMessenger.of(context).showSnackBar(
               SnackBar(
-                content: Text('Recherche avec ${filters.length} filtres - À implémenter'),
-                backgroundColor: AppTheme.infoColor,
+                content: Text('Recherche lancée avec ${filters.values.where((value) => value != null && value.toString().isNotEmpty).length} filtres'),
+                backgroundColor: AppTheme.successColor,
+                duration: const Duration(seconds: 2),
               ),
             );
           },
@@ -401,6 +642,14 @@ class _MembresListPageState extends State<MembresListPage> {
 
   /// Affiche le dialog d'export
   void _showExportDialog() {
+    // Vérifier les permissions avant d'ouvrir le dialog d'export
+    if (!permissionService.canExportMembers) {
+      showPermissionError(context, 'Vous n\'avez pas les permissions pour exporter les données');
+      return;
+    }
+
+    permissionService.logAction('Ouverture dialog export membres', details: {'nombreMembres': _membres.length});
+
     showDialog(
       context: context,
       builder: (context) => MembresExportDialog(
@@ -408,4 +657,136 @@ class _MembresListPageState extends State<MembresListPage> {
       ),
     );
   }
+
+  /// Affiche le dialog d'import
+  Future<void> _showImportDialog() async {
+    // Vérifier les permissions avant d'ouvrir le dialog d'import
+    if (!permissionService.canCreateMembers) {
+      showPermissionError(context, 'Vous n\'avez pas les permissions pour importer des données');
+      return;
+    }
+
+    permissionService.logAction('Tentative import membres');
+
+    // Afficher un dialog de confirmation
+    final confirmed = await showDialog<bool>(
+      context: context,
+      builder: (context) => AlertDialog(
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(16),
+        ),
+        title: Row(
+          children: [
+            Container(
+              padding: const EdgeInsets.all(8),
+              decoration: BoxDecoration(
+                color: AppTheme.primaryColor.withOpacity(0.1),
+                borderRadius: BorderRadius.circular(8),
+              ),
+              child: const Icon(
+                Icons.file_upload,
+                color: AppTheme.primaryColor,
+                size: 24,
+              ),
+            ),
+            const SizedBox(width: 12),
+            const Expanded(
+              child: Text(
+                'Importer des membres',
+                style: TextStyle(
+                  fontSize: 18,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+            ),
+          ],
+        ),
+        content: const Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              'Sélectionnez un fichier Excel (.xlsx), CSV (.csv) ou JSON (.json) contenant les données des membres à importer.',
+              style: TextStyle(fontSize: 14),
+            ),
+            SizedBox(height: 16),
+            Text(
+              'Formats supportés :',
+              style: TextStyle(fontWeight: FontWeight.w600),
+            ),
+            SizedBox(height: 8),
+            Text('• Excel (.xlsx)'),
+            Text('• CSV (.csv)'),
+            Text('• JSON (.json)'),
+            SizedBox(height: 16),
+            Text(
+              '⚠️ Les données existantes ne seront pas supprimées. Les nouveaux membres seront ajoutés.',
+              style: TextStyle(
+                fontSize: 12,
+                color: AppTheme.warningColor,
+                fontStyle: FontStyle.italic,
+              ),
+            ),
+          ],
+        ),
+        actions: [
+          TextButton(
+            onPressed: () => Navigator.of(context).pop(false),
+            child: const Text('Annuler'),
+          ),
+          ElevatedButton.icon(
+            onPressed: () => Navigator.of(context).pop(true),
+            icon: const Icon(Icons.file_upload),
+            label: const Text('Sélectionner fichier'),
+            style: ElevatedButton.styleFrom(
+              backgroundColor: AppTheme.primaryColor,
+              foregroundColor: Colors.white,
+            ),
+          ),
+        ],
+      ),
+    );
+
+    if (confirmed == true && mounted) {
+      // Effectuer l'import
+      final exportService = ExportImportService();
+      final importedMembers = await exportService.importMembers(context);
+
+      if (importedMembers != null && importedMembers.isNotEmpty && mounted) {
+        // Log de l'action réussie
+        permissionService.logAction('Import membres réussi', details: {
+          'nombreMembres': importedMembers.length,
+        });
+
+        // TODO: Intégrer les membres importés avec l'API
+        // Pour l'instant, on affiche juste un message de succès
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Row(
+              children: [
+                const Icon(Icons.info, color: Colors.white, size: 20),
+                const SizedBox(width: 8),
+                Expanded(
+                  child: Text(
+                    '${importedMembers.length} membres importés avec succès. Intégration avec l\'API en cours de développement.',
+                  ),
+                ),
+              ],
+            ),
+            backgroundColor: AppTheme.infoColor,
+            duration: const Duration(seconds: 5),
+          ),
+        );
+      }
+    }
+  }
+
+  /// Affiche la page de démonstration des nouvelles fonctionnalités
+  void _showErrorDemo() {
+    Navigator.of(context).push(
+      MaterialPageRoute(
+        builder: (context) => const ErrorDemoWidget(),
+      ),
+    );
+  }
 }