Appli Flutter se connecte bien à l'API.

unionflow-mobile-apps/lib/features/members/presentation/bloc/membres_bloc.dart

@@ -0,0 +1,244 @@
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:injectable/injectable.dart';
+import '../../domain/repositories/membre_repository.dart';
+import '../../../../core/errors/failures.dart';
+import '../../../../core/models/membre_model.dart';
+import 'membres_event.dart';
+import 'membres_state.dart';
+
+/// BLoC pour la gestion des membres
+@injectable
+class MembresBloc extends Bloc<MembresEvent, MembresState> {
+  final MembreRepository _membreRepository;
+
+  MembresBloc(this._membreRepository) : super(const MembresInitial()) {
+    // Enregistrement des handlers d'événements
+    on<LoadMembres>(_onLoadMembres);
+    on<RefreshMembres>(_onRefreshMembres);
+    on<SearchMembres>(_onSearchMembres);
+    on<LoadMembreById>(_onLoadMembreById);
+    on<CreateMembre>(_onCreateMembre);
+    on<UpdateMembre>(_onUpdateMembre);
+    on<DeleteMembre>(_onDeleteMembre);
+    on<LoadMembresStats>(_onLoadMembresStats);
+    on<ClearMembresError>(_onClearMembresError);
+    on<ResetMembresState>(_onResetMembresState);
+  }
+
+  /// Handler pour charger la liste des membres
+  Future<void> _onLoadMembres(
+    LoadMembres event,
+    Emitter<MembresState> emit,
+  ) async {
+    emit(const MembresLoading());
+
+    try {
+      final membres = await _membreRepository.getMembres();
+      emit(MembresLoaded(membres: membres));
+    } catch (e) {
+      final failure = _mapExceptionToFailure(e);
+      emit(MembresError(failure: failure));
+    }
+  }
+
+  /// Handler pour rafraîchir la liste des membres
+  Future<void> _onRefreshMembres(
+    RefreshMembres event,
+    Emitter<MembresState> emit,
+  ) async {
+    // Conserver les données actuelles pendant le refresh
+    final currentState = state;
+    List<MembreModel> currentMembres = [];
+    
+    if (currentState is MembresLoaded) {
+      currentMembres = currentState.membres;
+      emit(MembresRefreshing(currentMembres));
+    } else {
+      emit(const MembresLoading());
+    }
+
+    try {
+      final membres = await _membreRepository.getMembres();
+      emit(MembresLoaded(membres: membres));
+    } catch (e) {
+      final failure = _mapExceptionToFailure(e);
+      
+      // Si on avait des données, les conserver avec l'erreur
+      if (currentMembres.isNotEmpty) {
+        emit(MembresErrorWithData(
+          failure: failure,
+          membres: currentMembres,
+        ));
+      } else {
+        emit(MembresError(failure: failure));
+      }
+    }
+  }
+
+  /// Handler pour rechercher des membres
+  Future<void> _onSearchMembres(
+    SearchMembres event,
+    Emitter<MembresState> emit,
+  ) async {
+    if (event.query.trim().isEmpty) {
+      // Si la recherche est vide, recharger tous les membres
+      add(const LoadMembres());
+      return;
+    }
+
+    emit(const MembresLoading());
+
+    try {
+      final membres = await _membreRepository.searchMembres(event.query);
+      emit(MembresLoaded(
+        membres: membres,
+        isSearchResult: true,
+        searchQuery: event.query,
+      ));
+    } catch (e) {
+      final failure = _mapExceptionToFailure(e);
+      emit(MembresError(failure: failure));
+    }
+  }
+
+  /// Handler pour charger un membre par ID
+  Future<void> _onLoadMembreById(
+    LoadMembreById event,
+    Emitter<MembresState> emit,
+  ) async {
+    emit(const MembresLoading());
+
+    try {
+      final membre = await _membreRepository.getMembreById(event.id);
+      emit(MembreDetailLoaded(membre));
+    } catch (e) {
+      final failure = _mapExceptionToFailure(e);
+      emit(MembresError(failure: failure));
+    }
+  }
+
+  /// Handler pour créer un membre
+  Future<void> _onCreateMembre(
+    CreateMembre event,
+    Emitter<MembresState> emit,
+  ) async {
+    emit(const MembresLoading());
+
+    try {
+      final nouveauMembre = await _membreRepository.createMembre(event.membre);
+      emit(MembreCreated(nouveauMembre));
+      
+      // Recharger la liste après création
+      add(const LoadMembres());
+    } catch (e) {
+      final failure = _mapExceptionToFailure(e);
+      emit(MembresError(failure: failure));
+    }
+  }
+
+  /// Handler pour mettre à jour un membre
+  Future<void> _onUpdateMembre(
+    UpdateMembre event,
+    Emitter<MembresState> emit,
+  ) async {
+    emit(const MembresLoading());
+
+    try {
+      final membreMisAJour = await _membreRepository.updateMembre(
+        event.id,
+        event.membre,
+      );
+      emit(MembreUpdated(membreMisAJour));
+      
+      // Recharger la liste après mise à jour
+      add(const LoadMembres());
+    } catch (e) {
+      final failure = _mapExceptionToFailure(e);
+      emit(MembresError(failure: failure));
+    }
+  }
+
+  /// Handler pour supprimer un membre
+  Future<void> _onDeleteMembre(
+    DeleteMembre event,
+    Emitter<MembresState> emit,
+  ) async {
+    emit(const MembresLoading());
+
+    try {
+      await _membreRepository.deleteMembre(event.id);
+      emit(MembreDeleted(event.id));
+      
+      // Recharger la liste après suppression
+      add(const LoadMembres());
+    } catch (e) {
+      final failure = _mapExceptionToFailure(e);
+      emit(MembresError(failure: failure));
+    }
+  }
+
+  /// Handler pour charger les statistiques
+  Future<void> _onLoadMembresStats(
+    LoadMembresStats event,
+    Emitter<MembresState> emit,
+  ) async {
+    emit(const MembresLoading());
+
+    try {
+      final stats = await _membreRepository.getMembresStats();
+      emit(MembresStatsLoaded(stats));
+    } catch (e) {
+      final failure = _mapExceptionToFailure(e);
+      emit(MembresError(failure: failure));
+    }
+  }
+
+  /// Handler pour effacer les erreurs
+  void _onClearMembresError(
+    ClearMembresError event,
+    Emitter<MembresState> emit,
+  ) {
+    final currentState = state;
+    
+    if (currentState is MembresError && currentState.previousState != null) {
+      emit(currentState.previousState!);
+    } else if (currentState is MembresErrorWithData) {
+      emit(MembresLoaded(
+        membres: currentState.membres,
+        isSearchResult: currentState.isSearchResult,
+        searchQuery: currentState.searchQuery,
+      ));
+    } else {
+      emit(const MembresInitial());
+    }
+  }
+
+  /// Handler pour réinitialiser l'état
+  void _onResetMembresState(
+    ResetMembresState event,
+    Emitter<MembresState> emit,
+  ) {
+    emit(const MembresInitial());
+  }
+
+  /// Convertit une exception en Failure approprié
+  Failure _mapExceptionToFailure(dynamic exception) {
+    if (exception is Failure) {
+      return exception;
+    }
+    
+    final message = exception.toString();
+    
+    if (message.contains('connexion') || message.contains('network')) {
+      return NetworkFailure(message: message);
+    } else if (message.contains('401') || message.contains('unauthorized')) {
+      return const AuthFailure(message: 'Session expirée. Veuillez vous reconnecter.');
+    } else if (message.contains('400') || message.contains('validation')) {
+      return ValidationFailure(message: message);
+    } else if (message.contains('500') || message.contains('server')) {
+      return ServerFailure(message: message);
+    }
+    
+    return ServerFailure(message: message);
+  }
+}

unionflow-mobile-apps/lib/features/members/presentation/bloc/membres_event.dart

@@ -0,0 +1,86 @@
+import 'package:equatable/equatable.dart';
+import '../../../../core/models/membre_model.dart';
+
+/// Événements pour le BLoC des membres
+abstract class MembresEvent extends Equatable {
+  const MembresEvent();
+
+  @override
+  List<Object?> get props => [];
+}
+
+/// Événement pour charger la liste des membres
+class LoadMembres extends MembresEvent {
+  const LoadMembres();
+}
+
+/// Événement pour rafraîchir la liste des membres
+class RefreshMembres extends MembresEvent {
+  const RefreshMembres();
+}
+
+/// Événement pour rechercher des membres
+class SearchMembres extends MembresEvent {
+  const SearchMembres(this.query);
+
+  final String query;
+
+  @override
+  List<Object?> get props => [query];
+}
+
+/// Événement pour charger un membre spécifique
+class LoadMembreById extends MembresEvent {
+  const LoadMembreById(this.id);
+
+  final String id;
+
+  @override
+  List<Object?> get props => [id];
+}
+
+/// Événement pour créer un nouveau membre
+class CreateMembre extends MembresEvent {
+  const CreateMembre(this.membre);
+
+  final MembreModel membre;
+
+  @override
+  List<Object?> get props => [membre];
+}
+
+/// Événement pour mettre à jour un membre
+class UpdateMembre extends MembresEvent {
+  const UpdateMembre(this.id, this.membre);
+
+  final String id;
+  final MembreModel membre;
+
+  @override
+  List<Object?> get props => [id, membre];
+}
+
+/// Événement pour supprimer un membre
+class DeleteMembre extends MembresEvent {
+  const DeleteMembre(this.id);
+
+  final String id;
+
+  @override
+  List<Object?> get props => [id];
+}
+
+/// Événement pour charger les statistiques des membres
+class LoadMembresStats extends MembresEvent {
+  const LoadMembresStats();
+}
+
+/// Événement pour effacer les erreurs
+class ClearMembresError extends MembresEvent {
+  const ClearMembresError();
+}
+
+/// Événement pour réinitialiser l'état
+class ResetMembresState extends MembresEvent {
+  const ResetMembresState();
+}

unionflow-mobile-apps/lib/features/members/presentation/bloc/membres_state.dart

@@ -0,0 +1,163 @@
+import 'package:equatable/equatable.dart';
+import '../../../../core/models/membre_model.dart';
+import '../../../../core/errors/failures.dart';
+
+/// États pour le BLoC des membres
+abstract class MembresState extends Equatable {
+  const MembresState();
+
+  @override
+  List<Object?> get props => [];
+}
+
+/// État initial
+class MembresInitial extends MembresState {
+  const MembresInitial();
+}
+
+/// État de chargement
+class MembresLoading extends MembresState {
+  const MembresLoading();
+}
+
+/// État de chargement avec données existantes (pour le refresh)
+class MembresRefreshing extends MembresState {
+  const MembresRefreshing(this.currentMembres);
+
+  final List<MembreModel> currentMembres;
+
+  @override
+  List<Object?> get props => [currentMembres];
+}
+
+/// État de succès avec liste des membres
+class MembresLoaded extends MembresState {
+  const MembresLoaded({
+    required this.membres,
+    this.isSearchResult = false,
+    this.searchQuery,
+  });
+
+  final List<MembreModel> membres;
+  final bool isSearchResult;
+  final String? searchQuery;
+
+  @override
+  List<Object?> get props => [membres, isSearchResult, searchQuery];
+
+  /// Copie avec modifications
+  MembresLoaded copyWith({
+    List<MembreModel>? membres,
+    bool? isSearchResult,
+    String? searchQuery,
+  }) {
+    return MembresLoaded(
+      membres: membres ?? this.membres,
+      isSearchResult: isSearchResult ?? this.isSearchResult,
+      searchQuery: searchQuery ?? this.searchQuery,
+    );
+  }
+}
+
+/// État de succès pour un membre spécifique
+class MembreDetailLoaded extends MembresState {
+  const MembreDetailLoaded(this.membre);
+
+  final MembreModel membre;
+
+  @override
+  List<Object?> get props => [membre];
+}
+
+/// État de succès pour les statistiques
+class MembresStatsLoaded extends MembresState {
+  const MembresStatsLoaded(this.stats);
+
+  final Map<String, dynamic> stats;
+
+  @override
+  List<Object?> get props => [stats];
+}
+
+/// État de succès pour la création d'un membre
+class MembreCreated extends MembresState {
+  const MembreCreated(this.membre);
+
+  final MembreModel membre;
+
+  @override
+  List<Object?> get props => [membre];
+}
+
+/// État de succès pour la mise à jour d'un membre
+class MembreUpdated extends MembresState {
+  const MembreUpdated(this.membre);
+
+  final MembreModel membre;
+
+  @override
+  List<Object?> get props => [membre];
+}
+
+/// État de succès pour la suppression d'un membre
+class MembreDeleted extends MembresState {
+  const MembreDeleted(this.membreId);
+
+  final String membreId;
+
+  @override
+  List<Object?> get props => [membreId];
+}
+
+/// État d'erreur
+class MembresError extends MembresState {
+  const MembresError({
+    required this.failure,
+    this.previousState,
+  });
+
+  final Failure failure;
+  final MembresState? previousState;
+
+  @override
+  List<Object?> get props => [failure, previousState];
+
+  /// Message d'erreur formaté
+  String get message => failure.message;
+
+  /// Code d'erreur
+  String? get code => failure.code;
+
+  /// Indique si c'est une erreur réseau
+  bool get isNetworkError => failure is NetworkFailure;
+
+  /// Indique si c'est une erreur serveur
+  bool get isServerError => failure is ServerFailure;
+
+  /// Indique si c'est une erreur d'authentification
+  bool get isAuthError => failure is AuthFailure;
+
+  /// Indique si c'est une erreur de validation
+  bool get isValidationError => failure is ValidationFailure;
+}
+
+/// État d'erreur avec données existantes (pour les erreurs non critiques)
+class MembresErrorWithData extends MembresState {
+  const MembresErrorWithData({
+    required this.failure,
+    required this.membres,
+    this.isSearchResult = false,
+    this.searchQuery,
+  });
+
+  final Failure failure;
+  final List<MembreModel> membres;
+  final bool isSearchResult;
+  final String? searchQuery;
+
+  @override
+  List<Object?> get props => [failure, membres, isSearchResult, searchQuery];
+
+  /// Message d'erreur formaté
+  String get message => failure.message;
+}

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

@@ -0,0 +1,358 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:pull_to_refresh/pull_to_refresh.dart';
+import '../../../../core/di/injection.dart';
+import '../../../../shared/theme/app_theme.dart';
+import '../../../../shared/widgets/coming_soon_page.dart';
+import '../bloc/membres_bloc.dart';
+import '../bloc/membres_event.dart';
+import '../bloc/membres_state.dart';
+import '../widgets/membre_card.dart';
+import '../widgets/membres_search_bar.dart';
+
+
+/// Page de liste des membres avec fonctionnalités avancées
+class MembresListPage extends StatefulWidget {
+  const MembresListPage({super.key});
+
+  @override
+  State<MembresListPage> createState() => _MembresListPageState();
+}
+
+class _MembresListPageState extends State<MembresListPage> {
+  final RefreshController _refreshController = RefreshController();
+  final TextEditingController _searchController = TextEditingController();
+  late MembresBloc _membresBloc;
+
+  @override
+  void initState() {
+    super.initState();
+    _membresBloc = getIt<MembresBloc>();
+    _membresBloc.add(const LoadMembres());
+  }
+
+  @override
+  void dispose() {
+    _refreshController.dispose();
+    _searchController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider.value(
+      value: _membresBloc,
+      child: Scaffold(
+        backgroundColor: AppTheme.backgroundLight,
+        appBar: AppBar(
+          title: const Text(
+            'Membres',
+            style: TextStyle(
+              fontWeight: FontWeight.w600,
+              fontSize: 20,
+            ),
+          ),
+          backgroundColor: AppTheme.primaryColor,
+          foregroundColor: Colors.white,
+          elevation: 0,
+          actions: [
+            IconButton(
+              icon: const Icon(Icons.add_circle_outline),
+              onPressed: () => _showAddMemberDialog(),
+              tooltip: 'Ajouter un membre',
+            ),
+            IconButton(
+              icon: const Icon(Icons.analytics_outlined),
+              onPressed: () => _showStatsDialog(),
+              tooltip: 'Statistiques',
+            ),
+          ],
+        ),
+        body: Column(
+          children: [
+            // Barre de recherche
+            Container(
+              color: AppTheme.primaryColor,
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
+                child: MembresSearchBar(
+                  controller: _searchController,
+                  onSearch: (query) {
+                    _membresBloc.add(SearchMembres(query));
+                  },
+                  onClear: () {
+                    _searchController.clear();
+                    _membresBloc.add(const LoadMembres());
+                  },
+                ),
+              ),
+            ),
+            
+            // Liste des membres
+            Expanded(
+              child: BlocConsumer<MembresBloc, MembresState>(
+                listener: (context, state) {
+                  if (state is MembresError) {
+                    _showErrorSnackBar(state.message);
+                  } else if (state is MembresErrorWithData) {
+                    _showErrorSnackBar(state.message);
+                  }
+                  
+                  // Arrêter le refresh
+                  if (state is! MembresRefreshing && state is! MembresLoading) {
+                    _refreshController.refreshCompleted();
+                  }
+                },
+                builder: (context, state) {
+                  if (state is MembresLoading) {
+                    return const Center(
+                      child: CircularProgressIndicator(
+                        valueColor: AlwaysStoppedAnimation<Color>(AppTheme.primaryColor),
+                      ),
+                    );
+                  }
+                  
+                  if (state is MembresError) {
+                    return _buildErrorWidget(state);
+                  }
+                  
+                  if (state is MembresLoaded || state is MembresErrorWithData) {
+                    final membres = state is MembresLoaded 
+                        ? state.membres 
+                        : (state as MembresErrorWithData).membres;
+                    
+                    final isSearchResult = state is MembresLoaded 
+                        ? state.isSearchResult 
+                        : (state as MembresErrorWithData).isSearchResult;
+                    
+                    return SmartRefresher(
+                      controller: _refreshController,
+                      onRefresh: () => _membresBloc.add(const RefreshMembres()),
+                      header: const WaterDropHeader(
+                        waterDropColor: AppTheme.primaryColor,
+                      ),
+                      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]),
+                                  ),
+                                );
+                              },
+                            ),
+                    );
+                  }
+                  
+                  return const Center(
+                    child: Text(
+                      'Aucune donnée disponible',
+                      style: TextStyle(
+                        fontSize: 16,
+                        color: AppTheme.textSecondary,
+                      ),
+                    ),
+                  );
+                },
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// Widget d'erreur avec bouton de retry
+  Widget _buildErrorWidget(MembresError state) {
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(24),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(
+              state.isNetworkError ? Icons.wifi_off : Icons.error_outline,
+              size: 64,
+              color: AppTheme.errorColor,
+            ),
+            const SizedBox(height: 16),
+            Text(
+              state.isNetworkError 
+                  ? 'Problème de connexion'
+                  : 'Une erreur est survenue',
+              style: const TextStyle(
+                fontSize: 18,
+                fontWeight: FontWeight.w600,
+                color: AppTheme.textPrimary,
+              ),
+            ),
+            const SizedBox(height: 8),
+            Text(
+              state.message,
+              textAlign: TextAlign.center,
+              style: const TextStyle(
+                fontSize: 14,
+                color: AppTheme.textSecondary,
+              ),
+            ),
+            const SizedBox(height: 24),
+            ElevatedButton.icon(
+              onPressed: () => _membresBloc.add(const LoadMembres()),
+              icon: const Icon(Icons.refresh),
+              label: const Text('Réessayer'),
+              style: ElevatedButton.styleFrom(
+                backgroundColor: AppTheme.primaryColor,
+                foregroundColor: Colors.white,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// Widget vide (aucun membre trouvé)
+  Widget _buildEmptyWidget(bool isSearchResult) {
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(24),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(
+              isSearchResult ? Icons.search_off : Icons.people_outline,
+              size: 64,
+              color: AppTheme.textHint,
+            ),
+            const SizedBox(height: 16),
+            Text(
+              isSearchResult 
+                  ? 'Aucun membre trouvé'
+                  : 'Aucun membre enregistré',
+              style: const TextStyle(
+                fontSize: 18,
+                fontWeight: FontWeight.w600,
+                color: AppTheme.textPrimary,
+              ),
+            ),
+            const SizedBox(height: 8),
+            Text(
+              isSearchResult
+                  ? 'Essayez avec d\'autres termes de recherche'
+                  : 'Commencez par 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,
+                ),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// Affiche une snackbar d'erreur
+  void _showErrorSnackBar(String message) {
+    ScaffoldMessenger.of(context).showSnackBar(
+      SnackBar(
+        content: Text(message),
+        backgroundColor: AppTheme.errorColor,
+        action: SnackBarAction(
+          label: 'Fermer',
+          textColor: Colors.white,
+          onPressed: () => ScaffoldMessenger.of(context).hideCurrentSnackBar(),
+        ),
+      ),
+    );
+  }
+
+  /// Affiche les détails d'un membre
+  void _showMemberDetails(membre) {
+    // TODO: Implémenter la page de détails
+    showDialog(
+      context: context,
+      builder: (context) => const ComingSoonPage(
+        title: 'Détails du membre',
+        description: 'La page de détails du membre sera bientôt disponible.',
+        icon: Icons.person,
+        color: AppTheme.primaryColor,
+      ),
+    );
+  }
+
+  /// Affiche le dialog d'ajout de membre
+  void _showAddMemberDialog() {
+    // TODO: Implémenter le formulaire d'ajout
+    showDialog(
+      context: context,
+      builder: (context) => const ComingSoonPage(
+        title: 'Ajouter un membre',
+        description: 'Le formulaire d\'ajout de membre sera bientôt disponible.',
+        icon: Icons.person_add,
+        color: AppTheme.successColor,
+      ),
+    );
+  }
+
+  /// Affiche le dialog d'édition de membre
+  void _showEditMemberDialog(membre) {
+    // TODO: Implémenter le formulaire d'édition
+    showDialog(
+      context: context,
+      builder: (context) => const ComingSoonPage(
+        title: 'Modifier le membre',
+        description: 'Le formulaire de modification sera bientôt disponible.',
+        icon: Icons.edit,
+        color: AppTheme.warningColor,
+      ),
+    );
+  }
+
+  /// Affiche la confirmation de suppression
+  void _showDeleteConfirmation(membre) {
+    // TODO: Implémenter la confirmation de suppression
+    showDialog(
+      context: context,
+      builder: (context) => const ComingSoonPage(
+        title: 'Supprimer le membre',
+        description: 'La confirmation de suppression sera bientôt disponible.',
+        icon: Icons.delete,
+        color: AppTheme.errorColor,
+      ),
+    );
+  }
+
+  /// Affiche les statistiques
+  void _showStatsDialog() {
+    // TODO: Implémenter les statistiques
+    showDialog(
+      context: context,
+      builder: (context) => const ComingSoonPage(
+        title: 'Statistiques',
+        description: 'Les statistiques des membres seront bientôt disponibles.',
+        icon: Icons.analytics,
+        color: AppTheme.infoColor,
+      ),
+    );
+  }
+}

unionflow-mobile-apps/lib/features/members/presentation/widgets/membre_card.dart

@@ -0,0 +1,282 @@
+import 'package:flutter/material.dart';
+import '../../../../core/models/membre_model.dart';
+import '../../../../shared/theme/app_theme.dart';
+
+/// Card pour afficher un membre dans la liste
+class MembreCard extends StatelessWidget {
+  const MembreCard({
+    super.key,
+    required this.membre,
+    this.onTap,
+    this.onEdit,
+    this.onDelete,
+  });
+
+  final MembreModel membre;
+  final VoidCallback? onTap;
+  final VoidCallback? onEdit;
+  final VoidCallback? onDelete;
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      elevation: 2,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: BorderRadius.circular(12),
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              // Header avec avatar et actions
+              Row(
+                children: [
+                  // Avatar
+                  CircleAvatar(
+                    radius: 24,
+                    backgroundColor: AppTheme.primaryColor,
+                    child: Text(
+                      membre.initiales,
+                      style: const TextStyle(
+                        color: Colors.white,
+                        fontWeight: FontWeight.w600,
+                        fontSize: 16,
+                      ),
+                    ),
+                  ),
+                  
+                  const SizedBox(width: 12),
+                  
+                  // Informations principales
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          membre.nomComplet,
+                          style: const TextStyle(
+                            fontSize: 16,
+                            fontWeight: FontWeight.w600,
+                            color: AppTheme.textPrimary,
+                          ),
+                        ),
+                        const SizedBox(height: 2),
+                        Text(
+                          membre.numeroMembre,
+                          style: const TextStyle(
+                            fontSize: 12,
+                            color: AppTheme.textSecondary,
+                            fontFamily: 'monospace',
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                  
+                  // Badge de statut
+                  Container(
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: 8,
+                      vertical: 4,
+                    ),
+                    decoration: BoxDecoration(
+                      color: _getStatusColor(membre.statut).withOpacity(0.1),
+                      borderRadius: BorderRadius.circular(12),
+                      border: Border.all(
+                        color: _getStatusColor(membre.statut),
+                        width: 1,
+                      ),
+                    ),
+                    child: Text(
+                      _getStatusLabel(membre.statut),
+                      style: TextStyle(
+                        fontSize: 10,
+                        fontWeight: FontWeight.w600,
+                        color: _getStatusColor(membre.statut),
+                      ),
+                    ),
+                  ),
+                  
+                  // Menu d'actions
+                  PopupMenuButton<String>(
+                    icon: const Icon(
+                      Icons.more_vert,
+                      color: AppTheme.textSecondary,
+                    ),
+                    onSelected: (value) {
+                      switch (value) {
+                        case 'edit':
+                          onEdit?.call();
+                          break;
+                        case 'delete':
+                          onDelete?.call();
+                          break;
+                      }
+                    },
+                    itemBuilder: (context) => [
+                      const PopupMenuItem(
+                        value: 'edit',
+                        child: Row(
+                          children: [
+                            Icon(Icons.edit, size: 16),
+                            SizedBox(width: 8),
+                            Text('Modifier'),
+                          ],
+                        ),
+                      ),
+                      const PopupMenuItem(
+                        value: 'delete',
+                        child: Row(
+                          children: [
+                            Icon(Icons.delete, size: 16, color: AppTheme.errorColor),
+                            SizedBox(width: 8),
+                            Text('Supprimer', style: TextStyle(color: AppTheme.errorColor)),
+                          ],
+                        ),
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+              
+              const SizedBox(height: 12),
+              
+              // Informations de contact
+              Row(
+                children: [
+                  Expanded(
+                    child: _buildInfoItem(
+                      icon: Icons.email_outlined,
+                      text: membre.email,
+                    ),
+                  ),
+                  const SizedBox(width: 16),
+                  Expanded(
+                    child: _buildInfoItem(
+                      icon: Icons.phone_outlined,
+                      text: membre.telephone,
+                    ),
+                  ),
+                ],
+              ),
+              
+              // Adresse si disponible
+              if (membre.adresseComplete.isNotEmpty) ...[
+                const SizedBox(height: 8),
+                _buildInfoItem(
+                  icon: Icons.location_on_outlined,
+                  text: membre.adresseComplete,
+                ),
+              ],
+              
+              // Profession si disponible
+              if (membre.profession?.isNotEmpty == true) ...[
+                const SizedBox(height: 8),
+                _buildInfoItem(
+                  icon: Icons.work_outline,
+                  text: membre.profession!,
+                ),
+              ],
+              
+              const SizedBox(height: 8),
+              
+              // Footer avec date d'adhésion
+              Row(
+                children: [
+                  Icon(
+                    Icons.calendar_today_outlined,
+                    size: 14,
+                    color: AppTheme.textHint,
+                  ),
+                  const SizedBox(width: 4),
+                  Text(
+                    'Membre depuis ${_formatDate(membre.dateAdhesion)}',
+                    style: const TextStyle(
+                      fontSize: 12,
+                      color: AppTheme.textHint,
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  /// Widget pour afficher une information avec icône
+  Widget _buildInfoItem({
+    required IconData icon,
+    required String text,
+  }) {
+    return Row(
+      children: [
+        Icon(
+          icon,
+          size: 14,
+          color: AppTheme.textSecondary,
+        ),
+        const SizedBox(width: 4),
+        Expanded(
+          child: Text(
+            text,
+            style: const TextStyle(
+              fontSize: 12,
+              color: AppTheme.textSecondary,
+            ),
+            overflow: TextOverflow.ellipsis,
+          ),
+        ),
+      ],
+    );
+  }
+
+  /// Retourne la couleur associée au statut
+  Color _getStatusColor(String statut) {
+    switch (statut.toUpperCase()) {
+      case 'ACTIF':
+        return AppTheme.successColor;
+      case 'INACTIF':
+        return AppTheme.warningColor;
+      case 'SUSPENDU':
+        return AppTheme.errorColor;
+      default:
+        return AppTheme.textSecondary;
+    }
+  }
+
+  /// Retourne le label du statut
+  String _getStatusLabel(String statut) {
+    switch (statut.toUpperCase()) {
+      case 'ACTIF':
+        return 'ACTIF';
+      case 'INACTIF':
+        return 'INACTIF';
+      case 'SUSPENDU':
+        return 'SUSPENDU';
+      default:
+        return statut.toUpperCase();
+    }
+  }
+
+  /// Formate une date pour l'affichage
+  String _formatDate(DateTime date) {
+    final now = DateTime.now();
+    final difference = now.difference(date);
+    
+    if (difference.inDays < 30) {
+      return '${difference.inDays} jours';
+    } else if (difference.inDays < 365) {
+      final months = (difference.inDays / 30).floor();
+      return '$months mois';
+    } else {
+      final years = (difference.inDays / 365).floor();
+      return '$years an${years > 1 ? 's' : ''}';
+    }
+  }
+}

unionflow-mobile-apps/lib/features/members/presentation/widgets/membres_search_bar.dart

@@ -0,0 +1,128 @@
+import 'package:flutter/material.dart';
+import '../../../../shared/theme/app_theme.dart';
+
+/// Barre de recherche pour les membres
+class MembresSearchBar extends StatefulWidget {
+  const MembresSearchBar({
+    super.key,
+    required this.controller,
+    required this.onSearch,
+    required this.onClear,
+    this.hintText = 'Rechercher un membre...',
+  });
+
+  final TextEditingController controller;
+  final ValueChanged<String> onSearch;
+  final VoidCallback onClear;
+  final String hintText;
+
+  @override
+  State<MembresSearchBar> createState() => _MembresSearchBarState();
+}
+
+class _MembresSearchBarState extends State<MembresSearchBar> {
+  bool _isSearching = false;
+
+  @override
+  void initState() {
+    super.initState();
+    widget.controller.addListener(_onTextChanged);
+  }
+
+  @override
+  void dispose() {
+    widget.controller.removeListener(_onTextChanged);
+    super.dispose();
+  }
+
+  void _onTextChanged() {
+    final hasText = widget.controller.text.isNotEmpty;
+    if (_isSearching != hasText) {
+      setState(() {
+        _isSearching = hasText;
+      });
+    }
+  }
+
+  void _onSubmitted(String value) {
+    if (value.trim().isNotEmpty) {
+      widget.onSearch(value.trim());
+    } else {
+      widget.onClear();
+    }
+  }
+
+  void _onClearPressed() {
+    widget.controller.clear();
+    widget.onClear();
+    FocusScope.of(context).unfocus();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(12),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withOpacity(0.1),
+            blurRadius: 8,
+            offset: const Offset(0, 2),
+          ),
+        ],
+      ),
+      child: TextField(
+        controller: widget.controller,
+        onSubmitted: _onSubmitted,
+        textInputAction: TextInputAction.search,
+        decoration: InputDecoration(
+          hintText: widget.hintText,
+          hintStyle: const TextStyle(
+            color: AppTheme.textHint,
+            fontSize: 16,
+          ),
+          prefixIcon: const Icon(
+            Icons.search,
+            color: AppTheme.textSecondary,
+          ),
+          suffixIcon: _isSearching
+              ? IconButton(
+                  icon: const Icon(
+                    Icons.clear,
+                    color: AppTheme.textSecondary,
+                  ),
+                  onPressed: _onClearPressed,
+                  tooltip: 'Effacer la recherche',
+                )
+              : null,
+          border: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(12),
+            borderSide: BorderSide.none,
+          ),
+          enabledBorder: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(12),
+            borderSide: BorderSide.none,
+          ),
+          focusedBorder: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(12),
+            borderSide: const BorderSide(
+              color: AppTheme.primaryColor,
+              width: 2,
+            ),
+          ),
+          filled: true,
+          fillColor: Colors.white,
+          contentPadding: const EdgeInsets.symmetric(
+            horizontal: 16,
+            vertical: 12,
+          ),
+        ),
+        style: const TextStyle(
+          fontSize: 16,
+          color: AppTheme.textPrimary,
+        ),
+      ),
+    );
+  }
+}

unionflow-mobile-apps/lib/features/members/presentation/widgets/membres_stats_card.dart

@@ -0,0 +1,253 @@
+import 'package:flutter/material.dart';
+import 'package:fl_chart/fl_chart.dart';
+import '../../../../shared/theme/app_theme.dart';
+
+/// Card pour afficher les statistiques des membres
+class MembresStatsCard extends StatelessWidget {
+  const MembresStatsCard({
+    super.key,
+    required this.stats,
+  });
+
+  final Map<String, dynamic> stats;
+
+  @override
+  Widget build(BuildContext context) {
+    final nombreMembresActifs = stats['nombreMembresActifs'] as int? ?? 0;
+    final nombreMembresInactifs = stats['nombreMembresInactifs'] as int? ?? 0;
+    final nombreMembresSuspendus = stats['nombreMembresSuspendus'] as int? ?? 0;
+    final total = nombreMembresActifs + nombreMembresInactifs + nombreMembresSuspendus;
+
+    return Card(
+      elevation: 4,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(16),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.all(20),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            // Header
+            Row(
+              children: [
+                Container(
+                  padding: const EdgeInsets.all(8),
+                  decoration: BoxDecoration(
+                    color: AppTheme.primaryColor.withOpacity(0.1),
+                    borderRadius: BorderRadius.circular(8),
+                  ),
+                  child: const Icon(
+                    Icons.analytics,
+                    color: AppTheme.primaryColor,
+                    size: 24,
+                  ),
+                ),
+                const SizedBox(width: 12),
+                const Expanded(
+                  child: Text(
+                    'Statistiques des membres',
+                    style: TextStyle(
+                      fontSize: 18,
+                      fontWeight: FontWeight.w600,
+                      color: AppTheme.textPrimary,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+            
+            const SizedBox(height: 20),
+            
+            // Statistiques principales
+            Row(
+              children: [
+                Expanded(
+                  child: _buildStatItem(
+                    title: 'Total',
+                    value: total.toString(),
+                    color: AppTheme.primaryColor,
+                    icon: Icons.people,
+                  ),
+                ),
+                const SizedBox(width: 16),
+                Expanded(
+                  child: _buildStatItem(
+                    title: 'Actifs',
+                    value: nombreMembresActifs.toString(),
+                    color: AppTheme.successColor,
+                    icon: Icons.check_circle,
+                  ),
+                ),
+              ],
+            ),
+            
+            const SizedBox(height: 12),
+            
+            Row(
+              children: [
+                Expanded(
+                  child: _buildStatItem(
+                    title: 'Inactifs',
+                    value: nombreMembresInactifs.toString(),
+                    color: AppTheme.warningColor,
+                    icon: Icons.pause_circle,
+                  ),
+                ),
+                const SizedBox(width: 16),
+                Expanded(
+                  child: _buildStatItem(
+                    title: 'Suspendus',
+                    value: nombreMembresSuspendus.toString(),
+                    color: AppTheme.errorColor,
+                    icon: Icons.block,
+                  ),
+                ),
+              ],
+            ),
+            
+            if (total > 0) ...[
+              const SizedBox(height: 24),
+              
+              // Graphique en secteurs
+              SizedBox(
+                height: 200,
+                child: PieChart(
+                  PieChartData(
+                    sections: [
+                      if (nombreMembresActifs > 0)
+                        PieChartSectionData(
+                          value: nombreMembresActifs.toDouble(),
+                          title: '${(nombreMembresActifs / total * 100).round()}%',
+                          color: AppTheme.successColor,
+                          radius: 60,
+                          titleStyle: const TextStyle(
+                            fontSize: 12,
+                            fontWeight: FontWeight.w600,
+                            color: Colors.white,
+                          ),
+                        ),
+                      if (nombreMembresInactifs > 0)
+                        PieChartSectionData(
+                          value: nombreMembresInactifs.toDouble(),
+                          title: '${(nombreMembresInactifs / total * 100).round()}%',
+                          color: AppTheme.warningColor,
+                          radius: 60,
+                          titleStyle: const TextStyle(
+                            fontSize: 12,
+                            fontWeight: FontWeight.w600,
+                            color: Colors.white,
+                          ),
+                        ),
+                      if (nombreMembresSuspendus > 0)
+                        PieChartSectionData(
+                          value: nombreMembresSuspendus.toDouble(),
+                          title: '${(nombreMembresSuspendus / total * 100).round()}%',
+                          color: AppTheme.errorColor,
+                          radius: 60,
+                          titleStyle: const TextStyle(
+                            fontSize: 12,
+                            fontWeight: FontWeight.w600,
+                            color: Colors.white,
+                          ),
+                        ),
+                    ],
+                    centerSpaceRadius: 40,
+                    sectionsSpace: 2,
+                  ),
+                ),
+              ),
+              
+              const SizedBox(height: 16),
+              
+              // Légende
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                children: [
+                  if (nombreMembresActifs > 0)
+                    _buildLegendItem('Actifs', AppTheme.successColor),
+                  if (nombreMembresInactifs > 0)
+                    _buildLegendItem('Inactifs', AppTheme.warningColor),
+                  if (nombreMembresSuspendus > 0)
+                    _buildLegendItem('Suspendus', AppTheme.errorColor),
+                ],
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// Widget pour une statistique individuelle
+  Widget _buildStatItem({
+    required String title,
+    required String value,
+    required Color color,
+    required IconData icon,
+  }) {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: color.withOpacity(0.1),
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(
+          color: color.withOpacity(0.3),
+          width: 1,
+        ),
+      ),
+      child: Column(
+        children: [
+          Icon(
+            icon,
+            color: color,
+            size: 24,
+          ),
+          const SizedBox(height: 8),
+          Text(
+            value,
+            style: TextStyle(
+              fontSize: 20,
+              fontWeight: FontWeight.w700,
+              color: color,
+            ),
+          ),
+          const SizedBox(height: 4),
+          Text(
+            title,
+            style: TextStyle(
+              fontSize: 12,
+              fontWeight: FontWeight.w500,
+              color: color,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  /// Widget pour un élément de légende
+  Widget _buildLegendItem(String label, Color color) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Container(
+          width: 12,
+          height: 12,
+          decoration: BoxDecoration(
+            color: color,
+            shape: BoxShape.circle,
+          ),
+        ),
+        const SizedBox(width: 6),
+        Text(
+          label,
+          style: const TextStyle(
+            fontSize: 12,
+            color: AppTheme.textSecondary,
+          ),
+        ),
+      ],
+    );
+  }
+}