lionsdev/unionflow-mobile-apps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(features): refontes adhesions/admin/auth/backup/contributions/dashboard/epargne/events

Browse Source 
- adhesions : bloc complet avec events/states/model, dialogs paiement/rejet
- admin : users bloc, user management list/detail pages
- authentication : bloc + keycloak auth service + webview
- backup : bloc complet, repository, models
- contributions : bloc + widgets + export
- dashboard : widgets connectés (activities, events, notifications, search)
  + charts + monitoring + shortcuts
- epargne : repository, transactions, dialogs
- events : bloc complet, pages (detail, connected, wrapper), models
This commit is contained in:
dahoud
2026-04-15 20:26:48 +00:00
parent 45dcd2171e
commit 120434aba0
36 changed files with 903 additions and 1411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
lib/features/events/presentation/pages/events_page_connected.dart
View File

@@ -3,8 +3,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:intl/intl.dart';
import '../../../../core/constants/app_constants.dart';
import '../../../../shared/design_system/unionflow_design_v2.dart';
import '../../../../shared/design_system/components/uf_app_bar.dart';
import '../../../../shared/design_system/unionflow_design_system.dart';
import '../../../authentication/data/models/user_role.dart';
import '../../../authentication/presentation/bloc/auth_bloc.dart';
import '../../bloc/evenements_bloc.dart';
@@ -68,39 +67,52 @@ class _EventsPageWithDataState extends State<EventsPageWithData> with TickerProv
final canManageEvents = state.effectiveRole.level >= UserRole.moderator.level;
return Scaffold(
backgroundColor: UnionFlowColors.background,
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
appBar: UFAppBar(
title: 'Événements',
backgroundColor: UnionFlowColors.surface,
foregroundColor: UnionFlowColors.textPrimary,
moduleGradient: ModuleColors.evenementsGradient,
actions: [
if (canManageEvents && widget.onAddEvent != null)
IconButton(
icon: const Icon(Icons.add_circle_outline),
color: UnionFlowColors.unionGreen,
color: Colors.white,
onPressed: widget.onAddEvent,
tooltip: 'Créer un événement',
),
const SizedBox(width: 8),
],
bottom: TabBar(
controller: _tabController,
isScrollable: true,
labelColor: Colors.white,
unselectedLabelColor: Colors.white70,
indicatorColor: Colors.white,
indicatorSize: TabBarIndicatorSize.label,
labelStyle: AppTypography.actionText.copyWith(fontSize: 10, fontWeight: FontWeight.bold),
tabs: const [
Tab(child: Text('TOUS')),
Tab(child: Text('À VENIR')),
Tab(child: Text('EN COURS')),
Tab(child: Text('PASSÉS')),
],
),
),
body: Column(
children: [
_buildHeader(),
_buildSearchBar(),
_buildTabs(),
_buildHeader(context),
_buildSearchBar(context),
Expanded(
child: TabBarView(
controller: _tabController,
children: [
_buildEventsList(widget.events, 'tous'),
_buildEventsList(widget.events.where((e) => e.estAVenir).toList(), 'à venir'),
_buildEventsList(widget.events.where((e) => e.estEnCours).toList(), 'en cours'),
_buildEventsList(widget.events.where((e) => e.estPasse).toList(), 'passés'),
_buildEventsList(context, widget.events, 'tous'),
_buildEventsList(context, widget.events.where((e) => e.estAVenir).toList(), 'à venir'),
_buildEventsList(context, widget.events.where((e) => e.estEnCours).toList(), 'en cours'),
_buildEventsList(context, widget.events.where((e) => e.estPasse).toList(), 'passés'),
],
),
),
if (widget.totalPages > 1) _buildPagination(),
if (widget.totalPages > 1) _buildPagination(context),
],
),
);
@@ -108,7 +120,8 @@ class _EventsPageWithDataState extends State<EventsPageWithData> with TickerProv
);
}
Widget _buildHeader() {
Widget _buildHeader(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
final upcoming = widget.events.where((e) => e.estAVenir).length;
final ongoing = widget.events.where((e) => e.estEnCours).length;
final total = widget.totalCount;
@@ -116,28 +129,28 @@ class _EventsPageWithDataState extends State<EventsPageWithData> with TickerProv
return Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: UnionFlowColors.surface,
border: Border(bottom: BorderSide(color: UnionFlowColors.border.withOpacity(0.5), width: 1)),
color: scheme.surface,
border: Border(bottom: BorderSide(color: scheme.outlineVariant.withOpacity(0.5))),
),
child: Row(
children: [
Expanded(child: _buildStatCard(Icons.event_available, 'À venir', upcoming.toString(), UnionFlowColors.success)),
Expanded(child: _buildStatCard(context, Icons.event_available, 'À venir', upcoming.toString(), ColorTokens.success)),
const SizedBox(width: 12),
Expanded(child: _buildStatCard(Icons.play_circle_outline, 'En cours', ongoing.toString(), UnionFlowColors.amber)),
Expanded(child: _buildStatCard(context, Icons.play_circle_outline, 'En cours', ongoing.toString(), ColorTokens.warningLight)),
const SizedBox(width: 12),
Expanded(child: _buildStatCard(Icons.calendar_today, 'Total', total.toString(), UnionFlowColors.unionGreen)),
Expanded(child: _buildStatCard(context, Icons.calendar_today, 'Total', total.toString(), ModuleColors.evenements)),
],
),
);
}
Widget _buildStatCard(IconData icon, String label, String value, Color color) {
Widget _buildStatCard(BuildContext context, IconData icon, String label, String value, Color color) {
return Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: color.withOpacity(0.3), width: 1),
border: Border.all(color: color.withOpacity(0.3)),
),
child: Column(
children: [
@@ -151,12 +164,13 @@ class _EventsPageWithDataState extends State<EventsPageWithData> with TickerProv
);
}
Widget _buildSearchBar() {
Widget _buildSearchBar(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: UnionFlowColors.surface,
border: Border(bottom: BorderSide(color: UnionFlowColors.border.withOpacity(0.5), width: 1)),
color: scheme.surface,
border: Border(bottom: BorderSide(color: scheme.outlineVariant.withOpacity(0.5))),
),
child: TextField(
controller: _searchController,
@@ -167,14 +181,14 @@ class _EventsPageWithDataState extends State<EventsPageWithData> with TickerProv
widget.onSearch?.call(v.isEmpty ? null : v);
});
},
style: const TextStyle(fontSize: 14, color: UnionFlowColors.textPrimary),
style: TextStyle(fontSize: 14, color: scheme.onSurface),
decoration: InputDecoration(
hintText: 'Rechercher un événement...',
hintStyle: const TextStyle(fontSize: 13, color: UnionFlowColors.textTertiary),
prefixIcon: const Icon(Icons.search, size: 20, color: UnionFlowColors.textSecondary),
hintStyle: TextStyle(fontSize: 13, color: scheme.onSurfaceVariant),
prefixIcon: Icon(Icons.search, size: 20, color: scheme.onSurfaceVariant),
suffixIcon: _searchQuery.isNotEmpty
? IconButton(
icon: const Icon(Icons.clear, size: 18, color: UnionFlowColors.textSecondary),
icon: Icon(Icons.clear, size: 18, color: scheme.onSurfaceVariant),
onPressed: () {
_searchDebounce?.cancel();
_searchController.clear();
@@ -184,95 +198,81 @@ class _EventsPageWithDataState extends State<EventsPageWithData> with TickerProv
)
: null,
contentPadding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: UnionFlowColors.border.withOpacity(0.3))),
enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: UnionFlowColors.border.withOpacity(0.3))),
focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: const BorderSide(color: UnionFlowColors.unionGreen, width: 1.5)),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: scheme.outlineVariant)),
enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: scheme.outlineVariant)),
focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: ModuleColors.evenements, width: 1.5)),
filled: true,
fillColor: UnionFlowColors.surfaceVariant.withOpacity(0.3),
fillColor: scheme.surfaceContainerHigh.withOpacity(0.5),
),
),
);
}
Widget _buildTabs() {
return Container(
decoration: BoxDecoration(
color: UnionFlowColors.surface,
border: Border(bottom: BorderSide(color: UnionFlowColors.border.withOpacity(0.5), width: 1)),
),
child: TabBar(
controller: _tabController,
labelColor: UnionFlowColors.unionGreen,
unselectedLabelColor: UnionFlowColors.textSecondary,
indicatorColor: UnionFlowColors.unionGreen,
indicatorWeight: 3,
labelStyle: const TextStyle(fontSize: 13, fontWeight: FontWeight.w700),
unselectedLabelStyle: const TextStyle(fontSize: 13, fontWeight: FontWeight.w600),
tabs: const [Tab(text: 'Tous'), Tab(text: 'À venir'), Tab(text: 'En cours'), Tab(text: 'Passés')],
),
);
}
// _buildTabs() supprimé : migré dans UFAppBar.bottom (pattern Adhésions)
Widget _buildEventsList(List<EvenementModel> events, String type) {
Widget _buildEventsList(BuildContext context, List<EvenementModel> events, String type) {
final filtered = _searchQuery.isEmpty
? events
: events.where((e) => e.titre.toLowerCase().contains(_searchQuery.toLowerCase()) || (e.lieu?.toLowerCase().contains(_searchQuery.toLowerCase()) ?? false)).toList();
if (filtered.isEmpty) return _buildEmptyState(type);
if (filtered.isEmpty) return _buildEmptyState(context, type);
return RefreshIndicator(
onRefresh: () async => context.read<EvenementsBloc>().add(const LoadEvenements()),
color: UnionFlowColors.unionGreen,
color: ModuleColors.evenements,
child: ListView.separated(
padding: const EdgeInsets.all(12),
itemCount: filtered.length,
separatorBuilder: (_, __) => const SizedBox(height: 6),
itemBuilder: (context, index) => _buildEventCard(filtered[index]),
itemBuilder: (context, index) => _buildEventCard(context, filtered[index]),
),
);
}
Widget _buildEventCard(EvenementModel event) {
Widget _buildEventCard(BuildContext context, EvenementModel event) {
final scheme = Theme.of(context).colorScheme;
final df = DateFormat('dd MMM yyyy, HH:mm');
final statutColor = _getStatutColor(event.statut);
return GestureDetector(
onTap: () => _showEventDetails(event),
onTap: () => _showEventDetails(context, event),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 7),
decoration: BoxDecoration(
color: UnionFlowColors.surface,
color: scheme.surface,
borderRadius: BorderRadius.circular(10),
border: Border(left: BorderSide(color: _getStatutColor(event.statut), width: 4)),
border: Border(left: BorderSide(color: statutColor, width: 4)),
boxShadow: [BoxShadow(color: scheme.shadow.withOpacity(0.04), blurRadius: 4, offset: const Offset(0, 2))],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
_buildBadge(_mapStatut(event.statut), _getStatutColor(event.statut)),
_buildBadge(_mapStatut(event.statut), statutColor),
const SizedBox(width: 8),
_buildBadge(_mapType(event.type), UnionFlowColors.textSecondary),
_buildBadge(_mapType(event.type), scheme.onSurfaceVariant),
const Spacer(),
const Icon(Icons.chevron_right, size: 18, color: UnionFlowColors.textTertiary),
Icon(Icons.chevron_right, size: 18, color: scheme.onSurfaceVariant),
],
),
const SizedBox(height: 12),
Text(event.titre, style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: UnionFlowColors.textPrimary), maxLines: 2, overflow: TextOverflow.ellipsis),
Text(event.titre, style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: scheme.onSurface), maxLines: 2, overflow: TextOverflow.ellipsis),
const SizedBox(height: 12),
Row(
children: [
const Icon(Icons.access_time, size: 14, color: UnionFlowColors.textSecondary),
Icon(Icons.access_time, size: 14, color: scheme.onSurfaceVariant),
const SizedBox(width: 6),
Text(df.format(event.dateDebut), style: const TextStyle(fontSize: 12, color: UnionFlowColors.textSecondary)),
Text(df.format(event.dateDebut), style: TextStyle(fontSize: 12, color: scheme.onSurfaceVariant)),
],
),
if (event.lieu != null) ...[
const SizedBox(height: 6),
Row(
children: [
const Icon(Icons.location_on_outlined, size: 14, color: UnionFlowColors.textSecondary),
Icon(Icons.location_on_outlined, size: 14, color: scheme.onSurfaceVariant),
const SizedBox(width: 6),
Expanded(child: Text(event.lieu!, style: const TextStyle(fontSize: 12, color: UnionFlowColors.textSecondary), maxLines: 1, overflow: TextOverflow.ellipsis)),
Expanded(child: Text(event.lieu!, style: TextStyle(fontSize: 12, color: scheme.onSurfaceVariant), maxLines: 1, overflow: TextOverflow.ellipsis)),
],
),
],
@@ -282,25 +282,28 @@ class _EventsPageWithDataState extends State<EventsPageWithData> with TickerProv
Container(
width: 24,
height: 24,
decoration: const BoxDecoration(gradient: UnionFlowColors.primaryGradient, shape: BoxShape.circle),
decoration: BoxDecoration(
gradient: LinearGradient(colors: ModuleColors.evenementsGradient, begin: Alignment.topLeft, end: Alignment.bottomRight),
shape: BoxShape.circle,
),
alignment: Alignment.center,
child: Text(event.organisateurNom?[0] ?? 'O', style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w700, fontSize: 12)),
),
const SizedBox(width: 8),
Expanded(child: Text(event.organisateurNom ?? 'Organisateur', style: const TextStyle(fontSize: 11, color: UnionFlowColors.textSecondary), maxLines: 1, overflow: TextOverflow.ellipsis)),
Expanded(child: Text(event.organisateurNom ?? 'Organisateur', style: TextStyle(fontSize: 11, color: scheme.onSurfaceVariant), maxLines: 1, overflow: TextOverflow.ellipsis)),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: UnionFlowColors.goldPale,
color: ModuleColors.membres.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: UnionFlowColors.gold.withOpacity(0.3), width: 1),
border: Border.all(color: ModuleColors.membres.withOpacity(0.3)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.people_outline, size: 12, color: UnionFlowColors.gold),
const Icon(Icons.people_outline, size: 12, color: ModuleColors.membres),
const SizedBox(width: 4),
Text('${event.participantsActuels}/${event.maxParticipants ?? "∞"}', style: const TextStyle(fontSize: 11, fontWeight: FontWeight.w600, color: UnionFlowColors.gold)),
Text('${event.participantsActuels}/${event.maxParticipants ?? "∞"}', style: const TextStyle(fontSize: 11, fontWeight: FontWeight.w600, color: ModuleColors.membres)),
],
),
),
@@ -318,56 +321,64 @@ class _EventsPageWithDataState extends State<EventsPageWithData> with TickerProv
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: color.withOpacity(0.3), width: 1),
border: Border.all(color: color.withOpacity(0.3)),
),
child: Text(text, style: TextStyle(fontSize: 10, fontWeight: FontWeight.w600, color: color)),
);
}
Widget _buildEmptyState(String type) {
Widget _buildEmptyState(BuildContext context, String type) {
final scheme = Theme.of(context).colorScheme;
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(16),
decoration: const BoxDecoration(color: UnionFlowColors.goldPale, shape: BoxShape.circle),
child: const Icon(Icons.event_busy, size: 40, color: UnionFlowColors.gold),
decoration: BoxDecoration(color: ModuleColors.evenements.withOpacity(0.1), shape: BoxShape.circle),
child: Icon(Icons.event_busy, size: 40, color: ModuleColors.evenements),
),
const SizedBox(height: 12),
Text('Aucun événement $type', style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: UnionFlowColors.textPrimary)),
Text('Aucun événement $type', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: scheme.onSurface)),
const SizedBox(height: 8),
Text(_searchQuery.isEmpty ? 'La liste est vide pour le moment' : 'Essayez une autre recherche', style: const TextStyle(fontSize: 13, color: UnionFlowColors.textSecondary)),
Text(
_searchQuery.isEmpty ? 'La liste est vide pour le moment' : 'Essayez une autre recherche',
style: TextStyle(fontSize: 13, color: scheme.onSurfaceVariant),
),
],
),
);
}
Widget _buildPagination() {
Widget _buildPagination(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
return Container(
padding: const EdgeInsets.symmetric(vertical: 12),
decoration: BoxDecoration(
color: UnionFlowColors.surface,
border: Border(top: BorderSide(color: UnionFlowColors.border.withOpacity(0.5), width: 1)),
color: scheme.surface,
border: Border(top: BorderSide(color: scheme.outlineVariant.withOpacity(0.5))),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: const Icon(Icons.chevron_left, size: 24),
color: widget.currentPage > 0 ? UnionFlowColors.unionGreen : UnionFlowColors.textTertiary,
color: widget.currentPage > 0 ? ModuleColors.evenements : scheme.onSurfaceVariant.withOpacity(0.4),
onPressed: widget.currentPage > 0 && widget.onPageChanged != null
? () => widget.onPageChanged!(widget.currentPage - 1, _searchQuery.isEmpty ? null : _searchQuery)
: null,
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(gradient: UnionFlowColors.primaryGradient, borderRadius: BorderRadius.circular(20)),
decoration: BoxDecoration(
gradient: LinearGradient(colors: ModuleColors.evenementsGradient, begin: Alignment.topLeft, end: Alignment.bottomRight),
borderRadius: BorderRadius.circular(20),
),
child: Text('Page ${widget.currentPage + 1} / ${widget.totalPages}', style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: Colors.white)),
),
IconButton(
icon: const Icon(Icons.chevron_right, size: 24),
color: widget.currentPage < widget.totalPages - 1 ? UnionFlowColors.unionGreen : UnionFlowColors.textTertiary,
color: widget.currentPage < widget.totalPages - 1 ? ModuleColors.evenements : scheme.onSurfaceVariant.withOpacity(0.4),
onPressed: widget.currentPage < widget.totalPages - 1 && widget.onPageChanged != null
? () => widget.onPageChanged!(widget.currentPage + 1, _searchQuery.isEmpty ? null : _searchQuery)
: null,
@@ -379,64 +390,42 @@ class _EventsPageWithDataState extends State<EventsPageWithData> with TickerProv
String _mapStatut(StatutEvenement s) {
switch (s) {
case StatutEvenement.planifie:
return 'Planifié';
case StatutEvenement.confirme:
return 'Confirmé';
case StatutEvenement.enCours:
return 'En cours';
case StatutEvenement.termine:
return 'Terminé';
case StatutEvenement.annule:
return 'Annulé';
case StatutEvenement.reporte:
return 'Reporté';
case StatutEvenement.planifie: return 'Planifié';
case StatutEvenement.confirme: return 'Confirmé';
case StatutEvenement.enCours: return 'En cours';
case StatutEvenement.termine: return 'Terminé';
case StatutEvenement.annule: return 'Annulé';
case StatutEvenement.reporte: return 'Reporté';
}
}
Color _getStatutColor(StatutEvenement s) {
switch (s) {
case StatutEvenement.planifie:
return UnionFlowColors.info;
case StatutEvenement.confirme:
return UnionFlowColors.success;
case StatutEvenement.enCours:
return UnionFlowColors.amber;
case StatutEvenement.termine:
return UnionFlowColors.textSecondary;
case StatutEvenement.annule:
return UnionFlowColors.error;
case StatutEvenement.reporte:
return UnionFlowColors.warning;
case StatutEvenement.planifie: return ColorTokens.info;
case StatutEvenement.confirme: return ColorTokens.success;
case StatutEvenement.enCours: return ColorTokens.warningLight;
case StatutEvenement.termine: return ColorTokens.textSecondary;
case StatutEvenement.annule: return ColorTokens.error;
case StatutEvenement.reporte: return ColorTokens.warning;
}
}
String _mapType(TypeEvenement t) {
switch (t) {
case TypeEvenement.assembleeGenerale:
return 'AG';
case TypeEvenement.reunion:
return 'Réunion';
case TypeEvenement.formation:
return 'Formation';
case TypeEvenement.conference:
return 'Conférence';
case TypeEvenement.atelier:
return 'Atelier';
case TypeEvenement.seminaire:
return 'Séminaire';
case TypeEvenement.evenementSocial:
return 'Social';
case TypeEvenement.manifestation:
return 'Manif.';
case TypeEvenement.celebration:
return 'Célébr.';
case TypeEvenement.autre:
return 'Autre';
case TypeEvenement.assembleeGenerale: return 'AG';
case TypeEvenement.reunion: return 'Réunion';
case TypeEvenement.formation: return 'Formation';
case TypeEvenement.conference: return 'Conférence';
case TypeEvenement.atelier: return 'Atelier';
case TypeEvenement.seminaire: return 'Séminaire';
case TypeEvenement.evenementSocial: return 'Social';
case TypeEvenement.manifestation: return 'Manif.';
case TypeEvenement.celebration: return 'Célébr.';
case TypeEvenement.autre: return 'Autre';
}
}
void _showEventDetails(EvenementModel event) {
void _showEventDetails(BuildContext context, EvenementModel event) {
final bloc = context.read<EvenementsBloc>();
Navigator.of(context).push(
MaterialPageRoute<void>(

830
lib/features/events/presentation/pages/events_page_connected.dart.backup
View File

@@ -1,830 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:intl/intl.dart';
import '../../../../core/utils/logger.dart';
import '../../../../shared/widgets/info_badge.dart';
import '../../../../shared/widgets/mini_avatar.dart';
import '../../../../shared/design_system/unionflow_design_system.dart';
import '../../../../shared/design_system/tokens/app_typography.dart';
import '../../../authentication/data/models/user_role.dart';
import '../../../authentication/presentation/bloc/auth_bloc.dart';
import '../../bloc/evenements_bloc.dart';
import '../../bloc/evenements_event.dart';
import '../../data/models/evenement_model.dart';
/// Page de gestion des événements - UI/UX Premium
class EventsPageWithData extends StatefulWidget {
final List<EvenementModel> events;
final int totalCount;
final int currentPage;
final int totalPages;
const EventsPageWithData({
super.key,
required this.events,
required this.totalCount,
required this.currentPage,
required this.totalPages,
});
@override
State<EventsPageWithData> createState() => _EventsPageWithDataState();
}
class _EventsPageWithDataState extends State<EventsPageWithData>
with TickerProviderStateMixin {
final TextEditingController _searchController = TextEditingController();
late TabController _tabController;
String _searchQuery = '';
bool _isSearchExpanded = false;
@override
void initState() {
super.initState();
_tabController = TabController(length: 5, vsync: this);
}
@override
void dispose() {
_searchController.dispose();
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return BlocBuilder<AuthBloc, AuthState>(
builder: (context, state) {
if (state is! AuthAuthenticated) {
return const Scaffold(body: Center(child: CircularProgressIndicator()));
}
final canManageEvents = state.effectiveRole.level >= UserRole.moderator.level;
return Scaffold(
backgroundColor: ColorTokens.background,
appBar: UFAppBar(
title: 'ÉVÉNEMENTS',
automaticallyImplyLeading: false,
actions: [
// Search toggle button
IconButton(
icon: Icon(
_isSearchExpanded ? Icons.close : Icons.search,
color: ColorTokens.onSurface,
size: 20,
),
onPressed: () {
setState(() {
_isSearchExpanded = !_isSearchExpanded;
if (!_isSearchExpanded) {
_searchController.clear();
_searchQuery = '';
}
});
},
),
if (canManageEvents)
IconButton(
icon: const Icon(
Icons.add_circle_outline,
color: ColorTokens.primary,
size: 22,
),
onPressed: () => AppLogger.info('Add Event clicked'),
),
const SizedBox(width: SpacingTokens.xs),
],
),
body: Column(
children: [
// Header avec stats compactes
_buildCompactHeader(),
// Search bar (expandable)
if (_isSearchExpanded) _buildSearchBar(),
// Tabs avec badges
_buildEnhancedTabBar(),
// Liste d'événements
Expanded(
child: TabBarView(
controller: _tabController,
children: [
_buildEventsList(widget.events, 'tous'),
_buildEventsList(widget.events.where((e) => e.estAVenir).toList(), 'à venir'),
_buildEventsList(widget.events.where((e) => e.estEnCours).toList(), 'en cours'),
_buildEventsList(widget.events.where((e) => e.estPasse).toList(), 'passés'),
_buildCalendarView(),
],
),
),
// Pagination
if (widget.totalPages > 1) _buildEnhancedPagination(),
],
),
);
},
);
}
/// Header compact avec 3 métriques en ligne
Widget _buildCompactHeader() {
final upcoming = widget.events.where((e) => e.estAVenir).length;
final ongoing = widget.events.where((e) => e.estEnCours).length;
final total = widget.totalCount;
return Container(
padding: const EdgeInsets.symmetric(
horizontal: SpacingTokens.md,
vertical: SpacingTokens.sm,
),
decoration: BoxDecoration(
color: ColorTokens.surface,
border: Border(
bottom: BorderSide(
color: ColorTokens.outlineVariant.withOpacity(0.5),
width: 1,
),
),
),
child: Row(
children: [
_buildCompactMetric(
icon: Icons.event_available,
label: 'À venir',
value: upcoming.toString(),
color: ColorTokens.success,
),
const SizedBox(width: SpacingTokens.md),
_buildCompactMetric(
icon: Icons.play_circle_outline,
label: 'En cours',
value: ongoing.toString(),
color: ColorTokens.primary,
),
const Spacer(),
_buildTotalBadge(total),
],
),
);
}
Widget _buildCompactMetric({
required IconData icon,
required String label,
required String value,
required Color color,
}) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: const EdgeInsets.all(6),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(RadiusTokens.sm),
),
child: Icon(icon, size: 14, color: color),
),
const SizedBox(width: SpacingTokens.xs),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
value,
style: AppTypography.headerSmall.copyWith(
fontSize: 16,
height: 1.2,
),
),
Text(
label,
style: TypographyTokens.labelSmall.copyWith(
fontSize: 10,
color: ColorTokens.onSurfaceVariant,
),
),
],
),
],
);
}
Widget _buildTotalBadge(int total) {
return Container(
padding: const EdgeInsets.symmetric(
horizontal: SpacingTokens.sm,
vertical: SpacingTokens.xs,
),
decoration: BoxDecoration(
color: ColorTokens.secondaryContainer,
borderRadius: BorderRadius.circular(RadiusTokens.round),
border: Border.all(
color: ColorTokens.secondary.withOpacity(0.3),
width: 1,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
total.toString(),
style: AppTypography.actionText.copyWith(
color: ColorTokens.secondary,
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
const SizedBox(width: 4),
Text(
'TOTAL',
style: TypographyTokens.labelSmall.copyWith(
color: ColorTokens.secondary,
fontSize: 10,
fontWeight: FontWeight.w600,
),
),
],
),
);
}
/// Search bar avec animation
Widget _buildSearchBar() {
return AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.symmetric(
horizontal: SpacingTokens.md,
vertical: SpacingTokens.sm,
),
decoration: BoxDecoration(
color: ColorTokens.surface,
border: Border(
bottom: BorderSide(
color: ColorTokens.outlineVariant.withOpacity(0.5),
width: 1,
),
),
),
child: TextField(
controller: _searchController,
autofocus: true,
onChanged: (v) => setState(() => _searchQuery = v),
style: TypographyTokens.bodyMedium,
decoration: InputDecoration(
hintText: 'Rechercher un événement...',
hintStyle: TypographyTokens.bodySmall.copyWith(
color: ColorTokens.onSurfaceVariant,
),
prefixIcon: const Icon(
Icons.search,
size: 18,
color: ColorTokens.onSurfaceVariant,
),
suffixIcon: _searchQuery.isNotEmpty
? IconButton(
icon: const Icon(
Icons.clear,
size: 18,
color: ColorTokens.onSurfaceVariant,
),
onPressed: () {
setState(() {
_searchController.clear();
_searchQuery = '';
});
},
)
: null,
contentPadding: const EdgeInsets.symmetric(
vertical: SpacingTokens.sm,
horizontal: SpacingTokens.xs,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(RadiusTokens.md),
borderSide: BorderSide(
color: ColorTokens.outline.withOpacity(0.3),
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(RadiusTokens.md),
borderSide: BorderSide(
color: ColorTokens.outline.withOpacity(0.3),
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(RadiusTokens.md),
borderSide: const BorderSide(
color: ColorTokens.primary,
width: 1.5,
),
),
filled: true,
fillColor: ColorTokens.surfaceVariant.withOpacity(0.3),
),
),
);
}
/// TabBar amélioré avec badges de comptage
Widget _buildEnhancedTabBar() {
final allCount = widget.events.length;
final upcomingCount = widget.events.where((e) => e.estAVenir).length;
final ongoingCount = widget.events.where((e) => e.estEnCours).length;
final pastCount = widget.events.where((e) => e.estPasse).length;
return Container(
decoration: BoxDecoration(
color: ColorTokens.surface,
border: Border(
bottom: BorderSide(
color: ColorTokens.outlineVariant.withOpacity(0.5),
width: 1,
),
),
),
child: TabBar(
controller: _tabController,
labelColor: ColorTokens.primary,
unselectedLabelColor: ColorTokens.onSurfaceVariant,
indicatorColor: ColorTokens.primary,
indicatorWeight: 2.5,
labelStyle: TypographyTokens.labelMedium.copyWith(
fontWeight: FontWeight.bold,
),
unselectedLabelStyle: TypographyTokens.labelMedium,
tabs: [
_buildTabWithBadge('Tous', allCount),
_buildTabWithBadge('À venir', upcomingCount),
_buildTabWithBadge('En cours', ongoingCount),
_buildTabWithBadge('Passés', pastCount),
const Tab(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.calendar_month, size: 14),
SizedBox(width: 4),
Text('Calendrier'),
],
),
),
],
),
);
}
Widget _buildTabWithBadge(String label, int count) {
return Tab(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(label),
if (count > 0) ...[
const SizedBox(width: 4),
Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: ColorTokens.primary.withOpacity(0.15),
borderRadius: BorderRadius.circular(RadiusTokens.round),
),
child: Text(
count.toString(),
style: TypographyTokens.labelSmall.copyWith(
fontSize: 9,
fontWeight: FontWeight.bold,
color: ColorTokens.primary,
),
),
),
],
],
),
);
}
/// Liste d'événements optimisée
Widget _buildEventsList(List<EvenementModel> events, String type) {
final filtered = _searchQuery.isEmpty
? events
: events.where((e) =>
e.titre.toLowerCase().contains(_searchQuery.toLowerCase()) ||
(e.lieu?.toLowerCase().contains(_searchQuery.toLowerCase()) ?? false)
).toList();
if (filtered.isEmpty) {
return _buildEmptyState(type);
}
return RefreshIndicator(
onRefresh: () async => context.read<EvenementsBloc>().add(const LoadEvenements()),
color: ColorTokens.primary,
child: ListView.separated(
padding: const EdgeInsets.all(SpacingTokens.md),
itemCount: filtered.length,
separatorBuilder: (_, __) => const SizedBox(height: SpacingTokens.sm),
itemBuilder: (context, index) => _buildEnhancedEventCard(filtered[index]),
),
);
}
/// Empty state élégant
Widget _buildEmptyState(String type) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(SpacingTokens.lg),
decoration: BoxDecoration(
color: ColorTokens.surfaceVariant.withOpacity(0.3),
shape: BoxShape.circle,
),
child: Icon(
Icons.event_busy,
size: 48,
color: ColorTokens.onSurfaceVariant.withOpacity(0.5),
),
),
const SizedBox(height: SpacingTokens.md),
Text(
'Aucun événement $type',
style: AppTypography.headerSmall.copyWith(
color: ColorTokens.onSurfaceVariant,
),
),
const SizedBox(height: SpacingTokens.xs),
Text(
_searchQuery.isEmpty
? 'La liste est vide pour le moment'
: 'Aucun résultat pour "$_searchQuery"',
style: TypographyTokens.bodySmall.copyWith(
color: ColorTokens.onSurfaceVariant.withOpacity(0.7),
),
),
],
),
);
}
/// Card événement améliorée
Widget _buildEnhancedEventCard(EvenementModel event) {
final df = DateFormat('dd MMM yyyy, HH:mm');
final isUrgent = event.estAVenir &&
event.dateDebut.difference(DateTime.now()).inDays <= 2;
return UFCard(
margin: EdgeInsets.zero,
onTap: () => _showEventDetails(event),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Header avec badges
Row(
children: [
InfoBadge(
text: _mapStatut(event.statut),
backgroundColor: _getStatutColor(event.statut).withOpacity(0.12),
textColor: _getStatutColor(event.statut),
),
const SizedBox(width: SpacingTokens.xs),
InfoBadge.neutral(_mapType(event.type)),
if (isUrgent) ...[
const SizedBox(width: SpacingTokens.xs),
InfoBadge(
text: 'URGENT',
backgroundColor: ColorTokens.error.withOpacity(0.12),
textColor: ColorTokens.error,
),
],
const Spacer(),
Icon(
Icons.chevron_right,
size: 16,
color: ColorTokens.onSurfaceVariant.withOpacity(0.5),
),
],
),
const SizedBox(height: SpacingTokens.sm),
// Titre
Text(
event.titre,
style: AppTypography.headerSmall.copyWith(fontSize: 15),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
// Date et lieu
const SizedBox(height: SpacingTokens.sm),
Row(
children: [
Icon(
Icons.access_time,
size: 12,
color: ColorTokens.onSurfaceVariant,
),
const SizedBox(width: 4),
Expanded(
child: Text(
df.format(event.dateDebut),
style: AppTypography.subtitleSmall,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
if (event.lieu != null) ...[
const SizedBox(height: 4),
Row(
children: [
const Icon(
Icons.location_on_outlined,
size: 12,
color: ColorTokens.onSurfaceVariant,
),
const SizedBox(width: 4),
Expanded(
child: Text(
event.lieu!,
style: AppTypography.subtitleSmall,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
],
// Footer avec organisateur et participants
const SizedBox(height: SpacingTokens.md),
Row(
children: [
MiniAvatar(
fallbackText: event.organisateurNom?[0] ?? 'O',
size: 20,
),
const SizedBox(width: SpacingTokens.xs),
Expanded(
child: Text(
event.organisateurNom ?? 'Organisateur',
style: TypographyTokens.labelSmall.copyWith(fontSize: 11),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
Container(
padding: const EdgeInsets.symmetric(
horizontal: SpacingTokens.xs,
vertical: 2,
),
decoration: BoxDecoration(
color: ColorTokens.surfaceVariant,
borderRadius: BorderRadius.circular(RadiusTokens.sm),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.people_outline,
size: 11,
color: ColorTokens.onSurfaceVariant,
),
const SizedBox(width: 4),
Text(
'${event.participantsActuels}/${event.maxParticipants ?? "∞"}',
style: AppTypography.badgeText.copyWith(fontSize: 10),
),
],
),
),
],
),
],
),
);
}
/// Vue calendrier placeholder
Widget _buildCalendarView() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(SpacingTokens.xl),
decoration: BoxDecoration(
color: ColorTokens.surfaceVariant.withOpacity(0.3),
shape: BoxShape.circle,
),
child: Icon(
Icons.calendar_month,
size: 64,
color: ColorTokens.onSurfaceVariant.withOpacity(0.5),
),
),
const SizedBox(height: SpacingTokens.lg),
Text(
'Vue Calendrier',
style: AppTypography.headerSmall.copyWith(fontSize: 16),
),
const SizedBox(height: SpacingTokens.xs),
Text(
'Bientôt disponible',
style: TypographyTokens.bodySmall.copyWith(
color: ColorTokens.onSurfaceVariant,
),
),
],
),
);
}
/// Pagination améliorée
Widget _buildEnhancedPagination() {
return Container(
padding: const EdgeInsets.symmetric(vertical: SpacingTokens.sm),
decoration: BoxDecoration(
color: ColorTokens.surface,
border: Border(
top: BorderSide(
color: ColorTokens.outlineVariant.withOpacity(0.5),
width: 1,
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: const Icon(Icons.chevron_left, size: 20),
color: widget.currentPage > 0
? ColorTokens.primary
: ColorTokens.onSurfaceVariant.withOpacity(0.3),
onPressed: widget.currentPage > 0
? () => context.read<EvenementsBloc>().add(
LoadEvenements(page: widget.currentPage - 1),
)
: null,
),
Container(
padding: const EdgeInsets.symmetric(
horizontal: SpacingTokens.md,
vertical: SpacingTokens.xs,
),
decoration: BoxDecoration(
color: ColorTokens.primaryContainer.withOpacity(0.3),
borderRadius: BorderRadius.circular(RadiusTokens.md),
),
child: Text(
'Page ${widget.currentPage + 1} / ${widget.totalPages}',
style: TypographyTokens.labelMedium.copyWith(
fontWeight: FontWeight.bold,
color: ColorTokens.primary,
),
),
),
IconButton(
icon: const Icon(Icons.chevron_right, size: 20),
color: widget.currentPage < widget.totalPages - 1
? ColorTokens.primary
: ColorTokens.onSurfaceVariant.withOpacity(0.3),
onPressed: widget.currentPage < widget.totalPages - 1
? () => context.read<EvenementsBloc>().add(
LoadEvenements(page: widget.currentPage + 1),
)
: null,
),
],
),
);
}
String _mapStatut(StatutEvenement s) {
switch(s) {
case StatutEvenement.planifie: return 'Planifié';
case StatutEvenement.confirme: return 'Confirmé';
case StatutEvenement.enCours: return 'En cours';
case StatutEvenement.termine: return 'Terminé';
case StatutEvenement.annule: return 'Annulé';
case StatutEvenement.reporte: return 'Reporté';
}
}
Color _getStatutColor(StatutEvenement s) {
switch(s) {
case StatutEvenement.planifie: return ColorTokens.info;
case StatutEvenement.confirme: return ColorTokens.success;
case StatutEvenement.enCours: return ColorTokens.primary;
case StatutEvenement.termine: return ColorTokens.secondary;
case StatutEvenement.annule: return ColorTokens.error;
case StatutEvenement.reporte: return ColorTokens.warning;
}
}
String _mapType(TypeEvenement t) {
switch(t) {
case TypeEvenement.assembleeGenerale: return 'AG';
case TypeEvenement.reunion: return 'Réunion';
case TypeEvenement.formation: return 'Formation';
case TypeEvenement.conference: return 'Conférence';
case TypeEvenement.atelier: return 'Atelier';
case TypeEvenement.seminaire: return 'Séminaire';
case TypeEvenement.evenementSocial: return 'Social';
case TypeEvenement.manifestation: return 'Manifestation';
case TypeEvenement.celebration: return 'Célébration';
case TypeEvenement.autre: return 'Autre';
}
}
void _showEventDetails(EvenementModel event) {
showModalBottomSheet(
context: context,
backgroundColor: ColorTokens.surface,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(RadiusTokens.lg)),
),
builder: (context) => Container(
padding: const EdgeInsets.all(SpacingTokens.xl),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Header
Row(
children: [
Expanded(
child: Text(
event.titre,
style: AppTypography.headerSmall.copyWith(fontSize: 16),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
IconButton(
icon: const Icon(Icons.close, size: 20),
onPressed: () => Navigator.pop(context),
),
],
),
const SizedBox(height: SpacingTokens.md),
// Badges
Wrap(
spacing: SpacingTokens.xs,
runSpacing: SpacingTokens.xs,
children: [
InfoBadge(
text: _mapStatut(event.statut),
backgroundColor: _getStatutColor(event.statut).withOpacity(0.12),
textColor: _getStatutColor(event.statut),
),
InfoBadge.neutral(_mapType(event.type)),
],
),
const SizedBox(height: SpacingTokens.lg),
// Description
if (event.description != null && event.description!.isNotEmpty) ...[
Text(
'Description',
style: AppTypography.actionText.copyWith(fontSize: 12),
),
const SizedBox(height: SpacingTokens.xs),
Text(
event.description!,
style: TypographyTokens.bodySmall,
),
const SizedBox(height: SpacingTokens.lg),
],
// Actions
Row(
children: [
Expanded(
child: UFSecondaryButton(
label: 'Partager',
onPressed: () => AppLogger.info('Share event'),
),
),
const SizedBox(width: SpacingTokens.sm),
Expanded(
child: UFPrimaryButton(
label: 'Détails',
onPressed: () => AppLogger.info('View details'),
),
),
],
),
],
),
),
);
}
}

66
lib/features/events/presentation/pages/events_page_wrapper.dart
View File

@@ -8,6 +8,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:get_it/get_it.dart';
import '../../../../shared/design_system/tokens/color_tokens.dart';
import '../../../../shared/widgets/error_widget.dart';
import '../../../../shared/widgets/loading_widget.dart';
import '../../../../core/utils/logger.dart';
@@ -57,7 +58,7 @@ class EventsPageConnected extends StatelessWidget {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(state.message),
backgroundColor: Colors.red,
backgroundColor: ColorTokens.error,
duration: const Duration(seconds: 4),
action: SnackBarAction(
label: 'Réessayer',
@@ -76,40 +77,28 @@ class EventsPageConnected extends StatelessWidget {
// État initial
if (state is EvenementsInitial) {
return Container(
color: const Color(0xFFF8F9FA),
child: const Center(
child: AppLoadingWidget(message: 'Initialisation...'),
),
return const Center(
child: AppLoadingWidget(message: 'Initialisation...'),
);
}
// État de chargement
if (state is EvenementsLoading) {
return Container(
color: const Color(0xFFF8F9FA),
child: const Center(
child: AppLoadingWidget(message: 'Chargement des événements...'),
),
return const Center(
child: AppLoadingWidget(message: 'Chargement des événements...'),
);
}
// État de rafraîchissement
if (state is EvenementsRefreshing) {
return Container(
color: const Color(0xFFF8F9FA),
child: const Center(
child: AppLoadingWidget(message: 'Actualisation...'),
),
return const Center(
child: AppLoadingWidget(message: 'Actualisation...'),
);
}
if (state is EvenementCreated) {
return Container(
color: const Color(0xFFF8F9FA),
child: const Center(
child: AppLoadingWidget(message: 'Actualisation...'),
),
return const Center(
child: AppLoadingWidget(message: 'Actualisation...'),
);
}
@@ -140,39 +129,30 @@ class EventsPageConnected extends StatelessWidget {
// État d'erreur réseau
if (state is EvenementsNetworkError) {
AppLogger.error('EventsPageConnected: Erreur réseau', error: state.message);
return Container(
color: const Color(0xFFF8F9FA),
child: NetworkErrorWidget(
onRetry: () {
AppLogger.userAction('Retry load evenements after network error');
context.read<EvenementsBloc>().add(const LoadEvenements());
},
),
return NetworkErrorWidget(
onRetry: () {
AppLogger.userAction('Retry load evenements after network error');
context.read<EvenementsBloc>().add(const LoadEvenements());
},
);
}
// État d'erreur générale
if (state is EvenementsError) {
AppLogger.error('EventsPageConnected: Erreur', error: state.message);
return Container(
color: const Color(0xFFF8F9FA),
child: AppErrorWidget(
message: state.message,
onRetry: () {
AppLogger.userAction('Retry load evenements after error');
context.read<EvenementsBloc>().add(const LoadEvenements());
},
),
return AppErrorWidget(
message: state.message,
onRetry: () {
AppLogger.userAction('Retry load evenements after error');
context.read<EvenementsBloc>().add(const LoadEvenements());
},
);
}
// État par défaut
AppLogger.warning('EventsPageConnected: État non géré: ${state.runtimeType}');
return Container(
color: const Color(0xFFF8F9FA),
child: const Center(
child: AppLoadingWidget(message: 'Chargement...'),
),
return const Center(
child: AppLoadingWidget(message: 'Chargement...'),
);
},
),