Authentification stable - WIP

This commit is contained in:
DahoudG
2025-09-19 12:35:46 +00:00
parent 63fe107f98
commit 098894bdc1
383 changed files with 13072 additions and 93334 deletions

View File

@@ -1,565 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../../core/di/injection.dart';
import '../../../../core/models/cotisation_model.dart';
import '../../../../core/models/membre_model.dart';
import '../../../../shared/theme/app_theme.dart';
import '../../../../shared/widgets/custom_text_field.dart';
import '../../../../shared/widgets/loading_button.dart';
import '../bloc/cotisations_bloc.dart';
import '../bloc/cotisations_event.dart';
import '../bloc/cotisations_state.dart';
/// Page de création d'une nouvelle cotisation
class CotisationCreatePage extends StatefulWidget {
final MembreModel? membre; // Membre pré-sélectionné (optionnel)
const CotisationCreatePage({
super.key,
this.membre,
});
@override
State<CotisationCreatePage> createState() => _CotisationCreatePageState();
}
class _CotisationCreatePageState extends State<CotisationCreatePage> {
final _formKey = GlobalKey<FormState>();
late CotisationsBloc _cotisationsBloc;
// Contrôleurs de champs
final _montantController = TextEditingController();
final _descriptionController = TextEditingController();
final _periodeController = TextEditingController();
// Valeurs sélectionnées
String _typeCotisation = 'MENSUELLE';
DateTime _dateEcheance = DateTime.now().add(const Duration(days: 30));
MembreModel? _membreSelectionne;
// Options disponibles
final List<String> _typesCotisation = [
'MENSUELLE',
'TRIMESTRIELLE',
'SEMESTRIELLE',
'ANNUELLE',
'EXCEPTIONNELLE',
];
@override
void initState() {
super.initState();
_cotisationsBloc = getIt<CotisationsBloc>();
_membreSelectionne = widget.membre;
// Pré-remplir la période selon le type
_updatePeriodeFromType();
}
@override
void dispose() {
_montantController.dispose();
_descriptionController.dispose();
_periodeController.dispose();
super.dispose();
}
void _updatePeriodeFromType() {
final now = DateTime.now();
String periode;
switch (_typeCotisation) {
case 'MENSUELLE':
periode = '${_getMonthName(now.month)} ${now.year}';
break;
case 'TRIMESTRIELLE':
final trimestre = ((now.month - 1) ~/ 3) + 1;
periode = 'T$trimestre ${now.year}';
break;
case 'SEMESTRIELLE':
final semestre = now.month <= 6 ? 1 : 2;
periode = 'S$semestre ${now.year}';
break;
case 'ANNUELLE':
periode = '${now.year}';
break;
case 'EXCEPTIONNELLE':
periode = 'Exceptionnelle ${now.day}/${now.month}/${now.year}';
break;
default:
periode = '${now.month}/${now.year}';
}
_periodeController.text = periode;
}
String _getMonthName(int month) {
const months = [
'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
];
return months[month - 1];
}
void _onTypeChanged(String? newType) {
if (newType != null) {
setState(() {
_typeCotisation = newType;
_updatePeriodeFromType();
});
}
}
Future<void> _selectDate() async {
final picked = await showDatePicker(
context: context,
initialDate: _dateEcheance,
firstDate: DateTime.now(),
lastDate: DateTime.now().add(const Duration(days: 365)),
locale: const Locale('fr', 'FR'),
);
if (picked != null) {
setState(() {
_dateEcheance = picked;
});
}
}
Future<void> _selectMembre() async {
// TODO: Implémenter la sélection de membre
// Pour l'instant, afficher un message
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Fonctionnalité de sélection de membre à implémenter'),
backgroundColor: AppTheme.infoColor,
),
);
}
void _createCotisation() {
if (!_formKey.currentState!.validate()) {
return;
}
if (_membreSelectionne == null) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Veuillez sélectionner un membre'),
backgroundColor: AppTheme.errorColor,
),
);
return;
}
final montant = double.tryParse(_montantController.text.replaceAll(' ', ''));
if (montant == null || montant <= 0) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Veuillez saisir un montant valide'),
backgroundColor: AppTheme.errorColor,
),
);
return;
}
// Créer la cotisation
final cotisation = CotisationModel(
id: '', // Sera généré par le backend
numeroReference: '', // Sera généré par le backend
membreId: _membreSelectionne!.id ?? '',
nomMembre: _membreSelectionne!.nomComplet,
typeCotisation: _typeCotisation,
montantDu: montant,
montantPaye: 0.0,
dateEcheance: _dateEcheance,
statut: 'EN_ATTENTE',
description: _descriptionController.text.trim(),
periode: _periodeController.text.trim(),
annee: _dateEcheance.year,
mois: _dateEcheance.month,
codeDevise: 'XOF',
recurrente: _typeCotisation != 'EXCEPTIONNELLE',
nombreRappels: 0,
dateCreation: DateTime.now(),
dateModification: DateTime.now(),
);
_cotisationsBloc.add(CreateCotisation(cotisation));
}
@override
Widget build(BuildContext context) {
return BlocProvider.value(
value: _cotisationsBloc,
child: Scaffold(
backgroundColor: AppTheme.backgroundLight,
appBar: AppBar(
title: const Text('Nouvelle Cotisation'),
backgroundColor: AppTheme.accentColor,
foregroundColor: Colors.white,
elevation: 0,
),
body: BlocListener<CotisationsBloc, CotisationsState>(
listener: (context, state) {
if (state is CotisationCreated) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Cotisation créée avec succès'),
backgroundColor: AppTheme.successColor,
),
);
Navigator.of(context).pop(true);
} else if (state is CotisationsError) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(state.message),
backgroundColor: AppTheme.errorColor,
),
);
}
},
child: Form(
key: _formKey,
child: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Sélection du membre
_buildMembreSection(),
const SizedBox(height: 24),
// Type de cotisation
_buildTypeSection(),
const SizedBox(height: 24),
// Montant
_buildMontantSection(),
const SizedBox(height: 24),
// Période et échéance
_buildPeriodeSection(),
const SizedBox(height: 24),
// Description
_buildDescriptionSection(),
const SizedBox(height: 32),
// Bouton de création
_buildCreateButton(),
],
),
),
),
),
),
);
}
Widget _buildMembreSection() {
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Membre',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 12),
if (_membreSelectionne != null)
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: AppTheme.accentColor.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: AppTheme.accentColor.withOpacity(0.3)),
),
child: Row(
children: [
CircleAvatar(
backgroundColor: AppTheme.accentColor,
child: Text(
_membreSelectionne!.nomComplet.substring(0, 1).toUpperCase(),
style: const TextStyle(color: Colors.white),
),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
_membreSelectionne!.nomComplet,
style: const TextStyle(
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
Text(
_membreSelectionne!.telephone.isNotEmpty
? _membreSelectionne!.telephone
: 'Pas de téléphone',
style: const TextStyle(
fontSize: 12,
color: AppTheme.textSecondary,
),
),
],
),
),
IconButton(
icon: const Icon(Icons.change_circle),
onPressed: _selectMembre,
color: AppTheme.accentColor,
),
],
),
)
else
ElevatedButton.icon(
onPressed: _selectMembre,
icon: const Icon(Icons.person_add),
label: const Text('Sélectionner un membre'),
style: ElevatedButton.styleFrom(
backgroundColor: AppTheme.accentColor,
foregroundColor: Colors.white,
minimumSize: const Size(double.infinity, 48),
),
),
],
),
),
);
}
Widget _buildTypeSection() {
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Type de cotisation',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 12),
DropdownButtonFormField<String>(
value: _typeCotisation,
decoration: const InputDecoration(
border: OutlineInputBorder(),
contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
),
items: _typesCotisation.map((type) {
return DropdownMenuItem(
value: type,
child: Text(_getTypeLabel(type)),
);
}).toList(),
onChanged: _onTypeChanged,
),
],
),
),
);
}
String _getTypeLabel(String type) {
switch (type) {
case 'MENSUELLE': return 'Mensuelle';
case 'TRIMESTRIELLE': return 'Trimestrielle';
case 'SEMESTRIELLE': return 'Semestrielle';
case 'ANNUELLE': return 'Annuelle';
case 'EXCEPTIONNELLE': return 'Exceptionnelle';
default: return type;
}
}
Widget _buildMontantSection() {
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Montant',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 12),
CustomTextField(
controller: _montantController,
label: 'Montant (XOF)',
keyboardType: TextInputType.number,
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
TextInputFormatter.withFunction((oldValue, newValue) {
// Formater avec des espaces pour les milliers
final text = newValue.text.replaceAll(' ', '');
if (text.isEmpty) return newValue;
final number = int.tryParse(text);
if (number == null) return oldValue;
final formatted = number.toString().replaceAllMapped(
RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))'),
(Match m) => '${m[1]} ',
);
return TextEditingValue(
text: formatted,
selection: TextSelection.collapsed(offset: formatted.length),
);
}),
],
validator: (value) {
if (value == null || value.isEmpty) {
return 'Veuillez saisir un montant';
}
final montant = double.tryParse(value.replaceAll(' ', ''));
if (montant == null || montant <= 0) {
return 'Veuillez saisir un montant valide';
}
return null;
},
suffixIcon: const Icon(Icons.attach_money),
),
],
),
),
);
}
Widget _buildPeriodeSection() {
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Période et échéance',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 12),
CustomTextField(
controller: _periodeController,
label: 'Période',
validator: (value) {
if (value == null || value.isEmpty) {
return 'Veuillez saisir une période';
}
return null;
},
),
const SizedBox(height: 16),
InkWell(
onTap: _selectDate,
child: Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade300),
borderRadius: BorderRadius.circular(8),
),
child: Row(
children: [
const Icon(Icons.calendar_today, color: AppTheme.accentColor),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Date d\'échéance',
style: TextStyle(
fontSize: 12,
color: AppTheme.textSecondary,
),
),
Text(
'${_dateEcheance.day}/${_dateEcheance.month}/${_dateEcheance.year}',
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: AppTheme.textPrimary,
),
),
],
),
),
const Icon(Icons.arrow_drop_down),
],
),
),
),
],
),
),
);
}
Widget _buildDescriptionSection() {
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Description (optionnelle)',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 12),
CustomTextField(
controller: _descriptionController,
label: 'Description de la cotisation',
maxLines: 3,
maxLength: 500,
),
],
),
),
);
}
Widget _buildCreateButton() {
return BlocBuilder<CotisationsBloc, CotisationsState>(
builder: (context, state) {
final isLoading = state is CotisationsLoading;
return LoadingButton(
onPressed: isLoading ? null : _createCotisation,
isLoading: isLoading,
text: 'Créer la cotisation',
backgroundColor: AppTheme.accentColor,
textColor: Colors.white,
);
},
);
}
}

View File

@@ -1,752 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../../core/di/injection.dart';
import '../../../../core/models/cotisation_model.dart';
import '../../../../core/models/payment_model.dart';
import '../../../../shared/theme/app_theme.dart';
import '../../../../shared/widgets/buttons/buttons.dart';
import '../../../../shared/widgets/buttons/primary_button.dart';
import '../bloc/cotisations_bloc.dart';
import '../bloc/cotisations_event.dart';
import '../bloc/cotisations_state.dart';
import '../widgets/payment_method_selector.dart';
import '../widgets/payment_form_widget.dart';
import '../widgets/wave_payment_widget.dart';
import '../widgets/cotisation_timeline_widget.dart';
/// Page de détail d'une cotisation
class CotisationDetailPage extends StatefulWidget {
final CotisationModel cotisation;
const CotisationDetailPage({
super.key,
required this.cotisation,
});
@override
State<CotisationDetailPage> createState() => _CotisationDetailPageState();
}
class _CotisationDetailPageState extends State<CotisationDetailPage>
with TickerProviderStateMixin {
late final CotisationsBloc _cotisationsBloc;
late final TabController _tabController;
late final AnimationController _animationController;
late final Animation<double> _fadeAnimation;
@override
void initState() {
super.initState();
_cotisationsBloc = getIt<CotisationsBloc>();
_tabController = TabController(length: 3, vsync: this);
_animationController = AnimationController(
duration: const Duration(milliseconds: 800),
vsync: this,
);
_fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),
);
_animationController.forward();
}
@override
void dispose() {
_tabController.dispose();
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return BlocProvider.value(
value: _cotisationsBloc,
child: Scaffold(
backgroundColor: AppTheme.backgroundLight,
body: BlocListener<CotisationsBloc, CotisationsState>(
listener: (context, state) {
if (state is PaymentSuccess) {
_showPaymentSuccessDialog(state);
} else if (state is PaymentFailure) {
_showPaymentErrorDialog(state);
} else if (state is PaymentInProgress) {
_showPaymentProgressDialog(state);
}
},
child: FadeTransition(
opacity: _fadeAnimation,
child: CustomScrollView(
slivers: [
_buildAppBar(),
SliverToBoxAdapter(
child: Column(
children: [
_buildStatusCard(),
const SizedBox(height: 16),
_buildTabSection(),
],
),
),
],
),
),
),
bottomNavigationBar: _buildBottomActions(),
),
);
}
Widget _buildAppBar() {
return SliverAppBar(
expandedHeight: 200,
pinned: true,
backgroundColor: _getStatusColor(),
flexibleSpace: FlexibleSpaceBar(
title: Text(
widget.cotisation.typeCotisation,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
background: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
_getStatusColor(),
_getStatusColor().withOpacity(0.8),
],
),
),
child: Stack(
children: [
Positioned(
right: -50,
top: -50,
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white.withOpacity(0.1),
),
),
),
Positioned(
right: 20,
bottom: 20,
child: Icon(
_getStatusIcon(),
size: 80,
color: Colors.white.withOpacity(0.3),
),
),
],
),
),
),
actions: [
IconButton(
icon: const Icon(Icons.share, color: Colors.white),
onPressed: _shareReceipt,
),
PopupMenuButton<String>(
icon: const Icon(Icons.more_vert, color: Colors.white),
onSelected: _handleMenuAction,
itemBuilder: (context) => [
const PopupMenuItem(
value: 'export',
child: Row(
children: [
Icon(Icons.download),
SizedBox(width: 8),
Text('Exporter'),
],
),
),
const PopupMenuItem(
value: 'print',
child: Row(
children: [
Icon(Icons.print),
SizedBox(width: 8),
Text('Imprimer'),
],
),
),
const PopupMenuItem(
value: 'history',
child: Row(
children: [
Icon(Icons.history),
SizedBox(width: 8),
Text('Historique'),
],
),
),
],
),
],
);
}
Widget _buildStatusCard() {
return Container(
margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.08),
blurRadius: 20,
offset: const Offset(0, 4),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Montant à payer',
style: TextStyle(
fontSize: 14,
color: AppTheme.textSecondary,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 4),
Text(
'${widget.cotisation.montantDu.toStringAsFixed(0)} XOF',
style: const TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: _getStatusColor().withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
_getStatusIcon(),
size: 16,
color: _getStatusColor(),
),
const SizedBox(width: 4),
Text(
widget.cotisation.statut,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: _getStatusColor(),
),
),
],
),
),
],
),
const SizedBox(height: 20),
_buildInfoRow('Membre', widget.cotisation.nomMembre ?? 'N/A'),
_buildInfoRow('Période', _formatPeriode()),
_buildInfoRow('Échéance', _formatDate(widget.cotisation.dateEcheance)),
if (widget.cotisation.montantPaye > 0)
_buildInfoRow('Montant payé', '${widget.cotisation.montantPaye.toStringAsFixed(0)} XOF'),
if (widget.cotisation.isEnRetard)
_buildInfoRow('Retard', '${widget.cotisation.joursRetard} jours', isWarning: true),
],
),
);
}
Widget _buildInfoRow(String label, String value, {bool isWarning = false}) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
label,
style: TextStyle(
fontSize: 14,
color: AppTheme.textSecondary,
),
),
Text(
value,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: isWarning ? AppTheme.warningColor : AppTheme.textPrimary,
),
),
],
),
);
}
Widget _buildTabSection() {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.08),
blurRadius: 20,
offset: const Offset(0, 4),
),
],
),
child: Column(
children: [
TabBar(
controller: _tabController,
labelColor: AppTheme.primaryColor,
unselectedLabelColor: AppTheme.textSecondary,
indicatorColor: AppTheme.primaryColor,
tabs: const [
Tab(text: 'Détails', icon: Icon(Icons.info_outline)),
Tab(text: 'Paiement', icon: Icon(Icons.payment)),
Tab(text: 'Historique', icon: Icon(Icons.history)),
],
),
SizedBox(
height: 400,
child: TabBarView(
controller: _tabController,
children: [
_buildDetailsTab(),
_buildPaymentTab(),
_buildHistoryTab(),
],
),
),
],
),
);
}
Widget _buildDetailsTab() {
return Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildDetailSection('Informations générales', [
_buildDetailItem('Type', widget.cotisation.typeCotisation),
_buildDetailItem('Référence', widget.cotisation.numeroReference),
_buildDetailItem('Date création', _formatDate(widget.cotisation.dateCreation)),
_buildDetailItem('Statut', widget.cotisation.statut),
]),
const SizedBox(height: 20),
_buildDetailSection('Montants', [
_buildDetailItem('Montant dû', '${widget.cotisation.montantDu.toStringAsFixed(0)} XOF'),
_buildDetailItem('Montant payé', '${widget.cotisation.montantPaye.toStringAsFixed(0)} XOF'),
_buildDetailItem('Reste à payer', '${(widget.cotisation.montantDu - widget.cotisation.montantPaye).toStringAsFixed(0)} XOF'),
]),
if (widget.cotisation.description?.isNotEmpty == true) ...[
const SizedBox(height: 20),
_buildDetailSection('Description', [
Text(
widget.cotisation.description!,
style: const TextStyle(
fontSize: 14,
color: AppTheme.textSecondary,
),
),
]),
],
],
),
);
}
Widget _buildPaymentTab() {
if (widget.cotisation.isEntierementPayee) {
return const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.check_circle,
size: 64,
color: AppTheme.successColor,
),
SizedBox(height: 16),
Text(
'Cotisation entièrement payée',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppTheme.successColor,
),
),
],
),
);
}
return BlocBuilder<CotisationsBloc, CotisationsState>(
builder: (context, state) {
if (state is PaymentInProgress) {
return const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(),
SizedBox(height: 16),
Text('Traitement du paiement en cours...'),
],
),
);
}
return Column(
children: [
// Widget Wave Money en priorité
WavePaymentWidget(
cotisation: widget.cotisation,
showFullInterface: true,
onPaymentInitiated: () {
// Feedback visuel lors de l'initiation du paiement
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Redirection vers Wave Money...'),
backgroundColor: Color(0xFF00D4FF),
duration: Duration(seconds: 2),
),
);
},
),
const SizedBox(height: 16),
// Séparateur avec texte
Row(
children: [
const Expanded(child: Divider()),
Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: const Text(
'Ou choisir une autre méthode',
style: TextStyle(
color: AppTheme.textSecondary,
fontSize: 12,
),
),
),
const Expanded(child: Divider()),
],
),
const SizedBox(height: 16),
// Formulaire de paiement classique
PaymentFormWidget(
cotisation: widget.cotisation,
onPaymentInitiated: (paymentData) {
_cotisationsBloc.add(InitiatePayment(
cotisationId: widget.cotisation.id,
montant: paymentData['montant'],
methodePaiement: paymentData['methodePaiement'],
numeroTelephone: paymentData['numeroTelephone'],
nomPayeur: paymentData['nomPayeur'],
emailPayeur: paymentData['emailPayeur'],
));
},
),
],
);
},
);
}
Widget _buildHistoryTab() {
return CotisationTimelineWidget(cotisation: widget.cotisation);
}
Widget _buildDetailSection(String title, List<Widget> children) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 12),
...children,
],
);
}
Widget _buildDetailItem(String label, String value) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
label,
style: const TextStyle(
fontSize: 14,
color: AppTheme.textSecondary,
),
),
Text(
value,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppTheme.textPrimary,
),
),
],
),
);
}
Widget _buildBottomActions() {
if (widget.cotisation.isEntierementPayee) {
return Container(
padding: const EdgeInsets.all(16),
decoration: const BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 10,
offset: Offset(0, -2),
),
],
),
child: PrimaryButton(
text: 'Télécharger le reçu',
icon: Icons.download,
onPressed: _downloadReceipt,
),
);
}
return Container(
padding: const EdgeInsets.all(16),
decoration: const BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 10,
offset: Offset(0, -2),
),
],
),
child: Row(
children: [
Expanded(
child: OutlinedButton.icon(
onPressed: _scheduleReminder,
icon: const Icon(Icons.notifications),
label: const Text('Rappel'),
style: OutlinedButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 12),
),
),
),
const SizedBox(width: 12),
Expanded(
flex: 2,
child: PrimaryButton(
text: 'Payer maintenant',
icon: Icons.payment,
onPressed: () {
_tabController.animateTo(1); // Aller à l'onglet paiement
},
),
),
],
),
);
}
// Méthodes utilitaires
Color _getStatusColor() {
switch (widget.cotisation.statut.toLowerCase()) {
case 'payee':
return AppTheme.successColor;
case 'en_retard':
return AppTheme.errorColor;
case 'en_attente':
return AppTheme.warningColor;
default:
return AppTheme.primaryColor;
}
}
IconData _getStatusIcon() {
switch (widget.cotisation.statut.toLowerCase()) {
case 'payee':
return Icons.check_circle;
case 'en_retard':
return Icons.warning;
case 'en_attente':
return Icons.schedule;
default:
return Icons.payment;
}
}
String _formatDate(DateTime date) {
return '${date.day.toString().padLeft(2, '0')}/${date.month.toString().padLeft(2, '0')}/${date.year}';
}
String _formatPeriode() {
return '${widget.cotisation.mois}/${widget.cotisation.annee}';
}
// Actions
void _shareReceipt() {
// TODO: Implémenter le partage
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Partage - En cours de développement')),
);
}
void _handleMenuAction(String action) {
switch (action) {
case 'export':
_exportReceipt();
break;
case 'print':
_printReceipt();
break;
case 'history':
_showFullHistory();
break;
}
}
void _exportReceipt() {
_cotisationsBloc.add(ExportCotisations('pdf', cotisations: [widget.cotisation]));
}
void _printReceipt() {
// TODO: Implémenter l'impression
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Impression - En cours de développement')),
);
}
void _showFullHistory() {
// TODO: Naviguer vers l'historique complet
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Historique complet - En cours de développement')),
);
}
void _downloadReceipt() {
_exportReceipt();
}
void _scheduleReminder() {
_cotisationsBloc.add(ScheduleNotifications([widget.cotisation]));
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Rappel programmé avec succès'),
backgroundColor: AppTheme.successColor,
),
);
}
// Dialogs
void _showPaymentSuccessDialog(PaymentSuccess state) {
showDialog(
context: context,
barrierDismissible: false,
builder: (context) => AlertDialog(
title: const Row(
children: [
Icon(Icons.check_circle, color: AppTheme.successColor),
SizedBox(width: 8),
Text('Paiement réussi'),
],
),
content: Text('Votre paiement de ${state.payment.montant.toStringAsFixed(0)} XOF a été confirmé.'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
Navigator.of(context).pop(); // Retour à la liste
},
child: const Text('OK'),
),
],
),
);
}
void _showPaymentErrorDialog(PaymentFailure state) {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Row(
children: [
Icon(Icons.error, color: AppTheme.errorColor),
SizedBox(width: 8),
Text('Échec du paiement'),
],
),
content: Text(state.errorMessage),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: const Text('OK'),
),
],
),
);
}
void _showPaymentProgressDialog(PaymentInProgress state) {
showDialog(
context: context,
barrierDismissible: false,
builder: (context) => AlertDialog(
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
const CircularProgressIndicator(),
const SizedBox(height: 16),
Text('Traitement du paiement de ${state.montant.toStringAsFixed(0)} XOF...'),
const SizedBox(height: 8),
Text('Méthode: ${state.methodePaiement}'),
],
),
),
);
}
}

View File

@@ -1,388 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../../core/di/injection.dart';
import '../../../../shared/theme/app_theme.dart';
import '../../../../shared/widgets/coming_soon_page.dart';
import '../bloc/cotisations_bloc.dart';
import '../bloc/cotisations_event.dart';
import '../bloc/cotisations_state.dart';
import '../widgets/cotisation_card.dart';
import '../widgets/cotisations_stats_card.dart';
import 'cotisation_detail_page.dart';
import 'cotisations_search_page.dart';
// Import de l'architecture unifiée pour amélioration progressive
import '../../../../shared/widgets/common/unified_page_layout.dart';
/// Page principale pour la liste des cotisations
class CotisationsListPage extends StatefulWidget {
const CotisationsListPage({super.key});
@override
State<CotisationsListPage> createState() => _CotisationsListPageState();
}
class _CotisationsListPageState extends State<CotisationsListPage> {
late final CotisationsBloc _cotisationsBloc;
final ScrollController _scrollController = ScrollController();
@override
void initState() {
super.initState();
_cotisationsBloc = getIt<CotisationsBloc>();
_scrollController.addListener(_onScroll);
// Charger les données initiales
_cotisationsBloc.add(const LoadCotisations());
_cotisationsBloc.add(const LoadCotisationsStats());
}
@override
void dispose() {
_scrollController.dispose();
_cotisationsBloc.close();
super.dispose();
}
void _onScroll() {
if (_isBottom) {
final currentState = _cotisationsBloc.state;
if (currentState is CotisationsLoaded && !currentState.hasReachedMax) {
_cotisationsBloc.add(LoadCotisations(
page: currentState.currentPage + 1,
size: 20,
));
}
}
}
bool get _isBottom {
if (!_scrollController.hasClients) return false;
final maxScroll = _scrollController.position.maxScrollExtent;
final currentScroll = _scrollController.offset;
return currentScroll >= (maxScroll * 0.9);
}
@override
Widget build(BuildContext context) {
return BlocProvider.value(
value: _cotisationsBloc,
child: BlocBuilder<CotisationsBloc, CotisationsState>(
builder: (context, state) {
// Utilisation de UnifiedPageLayout pour améliorer la cohérence
// tout en conservant le header personnalisé et toutes les fonctionnalités
return UnifiedPageLayout(
title: 'Cotisations',
subtitle: 'Gérez les cotisations de vos membres',
icon: Icons.payment_rounded,
iconColor: AppTheme.accentColor,
actions: [
IconButton(
icon: const Icon(Icons.search),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const CotisationsSearchPage(),
),
);
},
tooltip: 'Rechercher',
),
IconButton(
icon: const Icon(Icons.filter_list),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const CotisationsSearchPage(),
),
);
},
tooltip: 'Filtrer',
),
],
isLoading: state is CotisationsInitial ||
(state is CotisationsLoading && !state.isRefreshing),
errorMessage: state is CotisationsError ? state.message : null,
onRefresh: () {
_cotisationsBloc.add(const LoadCotisations(refresh: true));
_cotisationsBloc.add(const LoadCotisationsStats());
},
floatingActionButton: FloatingActionButton(
onPressed: () {
// TODO: Implémenter la création de cotisation
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Création de cotisation - En cours de développement'),
backgroundColor: AppTheme.accentColor,
),
);
},
backgroundColor: AppTheme.accentColor,
child: const Icon(Icons.add, color: Colors.white),
),
body: _buildContent(state),
);
},
),
);
}
/// Construit le contenu principal en fonction de l'état
/// CONSERVÉ: Toute la logique d'état et les widgets spécialisés
Widget _buildContent(CotisationsState state) {
if (state is CotisationsError) {
return _buildErrorState(state);
}
if (state is CotisationsLoaded) {
return _buildLoadedState(state);
}
// État par défaut - Coming Soon avec toutes les fonctionnalités prévues
return const ComingSoonPage(
title: 'Module Cotisations',
description: 'Gestion complète des cotisations avec paiements automatiques',
icon: Icons.payment_rounded,
color: AppTheme.accentColor,
features: [
'Tableau de bord des cotisations',
'Relances automatiques par email/SMS',
'Paiements en ligne sécurisés',
'Génération de reçus automatique',
'Suivi des retards de paiement',
'Rapports financiers détaillés',
],
);
}
Widget _buildHeader() {
return Container(
width: double.infinity,
padding: const EdgeInsets.fromLTRB(16, 50, 16, 16),
decoration: const BoxDecoration(
color: AppTheme.accentColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'Cotisations',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Row(
children: [
IconButton(
icon: const Icon(Icons.search, color: Colors.white),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const CotisationsSearchPage(),
),
);
},
),
IconButton(
icon: const Icon(Icons.filter_list, color: Colors.white),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const CotisationsSearchPage(),
),
);
},
),
],
),
],
),
const SizedBox(height: 8),
const Text(
'Gérez les cotisations de vos membres',
style: TextStyle(
fontSize: 16,
color: Colors.white70,
),
),
],
),
);
}
Widget _buildLoadedState(CotisationsLoaded state) {
return RefreshIndicator(
onRefresh: () async {
_cotisationsBloc.add(const LoadCotisations(refresh: true));
_cotisationsBloc.add(const LoadCotisationsStats());
},
child: CustomScrollView(
controller: _scrollController,
slivers: [
// Statistiques
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(16),
child: BlocBuilder<CotisationsBloc, CotisationsState>(
buildWhen: (previous, current) => current is CotisationsStatsLoaded,
builder: (context, statsState) {
if (statsState is CotisationsStatsLoaded) {
return CotisationsStatsCard(statistics: statsState.statistics);
}
return const SizedBox.shrink();
},
),
),
),
// Liste des cotisations
if (state.filteredCotisations.isEmpty)
const SliverFillRemaining(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.payment_outlined,
size: 64,
color: AppTheme.textHint,
),
SizedBox(height: 16),
Text(
'Aucune cotisation trouvée',
style: TextStyle(
fontSize: 18,
color: AppTheme.textSecondary,
),
),
SizedBox(height: 8),
Text(
'Commencez par créer une cotisation',
style: TextStyle(
fontSize: 14,
color: AppTheme.textHint,
),
),
],
),
),
)
else
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
if (index >= state.filteredCotisations.length) {
return state.hasReachedMax
? const SizedBox.shrink()
: const Padding(
padding: EdgeInsets.all(16),
child: Center(
child: CircularProgressIndicator(),
),
);
}
final cotisation = state.filteredCotisations[index];
return Padding(
padding: EdgeInsets.fromLTRB(
16,
index == 0 ? 0 : 8,
16,
index == state.filteredCotisations.length - 1 ? 16 : 8,
),
child: CotisationCard(
cotisation: cotisation,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CotisationDetailPage(
cotisation: cotisation,
),
),
);
},
onPay: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CotisationDetailPage(
cotisation: cotisation,
),
),
);
},
),
);
},
childCount: state.filteredCotisations.length +
(state.hasReachedMax ? 0 : 1),
),
),
],
),
);
}
Widget _buildErrorState(CotisationsError state) {
return Center(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.error_outline,
size: 64,
color: AppTheme.errorColor,
),
const SizedBox(height: 16),
const Text(
'Erreur de chargement',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
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: () {
_cotisationsBloc.add(const LoadCotisations(refresh: true));
_cotisationsBloc.add(const LoadCotisationsStats());
},
icon: const Icon(Icons.refresh),
label: const Text('Réessayer'),
style: ElevatedButton.styleFrom(
backgroundColor: AppTheme.primaryColor,
foregroundColor: Colors.white,
),
),
],
),
),
);
}
}

View File

@@ -1,596 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../../core/di/injection.dart';
import '../../../../shared/widgets/unified_components.dart';
import '../../../../shared/theme/app_theme.dart';
import '../../../../core/models/cotisation_model.dart';
import '../bloc/cotisations_bloc.dart';
import '../bloc/cotisations_event.dart';
import '../bloc/cotisations_state.dart';
import 'cotisation_create_page.dart';
import 'payment_history_page.dart';
import 'cotisation_detail_page.dart';
import '../widgets/wave_payment_widget.dart';
/// Page des cotisations UnionFlow - Version Unifiée
///
/// Utilise l'architecture unifiée pour une expérience cohérente :
/// - Composants standardisés réutilisables
/// - Interface homogène avec les autres onglets
/// - Performance optimisée avec animations fluides
/// - Maintenabilité maximale
class CotisationsListPageUnified extends StatefulWidget {
const CotisationsListPageUnified({super.key});
@override
State<CotisationsListPageUnified> createState() => _CotisationsListPageUnifiedState();
}
class _CotisationsListPageUnifiedState extends State<CotisationsListPageUnified> {
late final CotisationsBloc _cotisationsBloc;
String _currentFilter = 'all';
@override
void initState() {
super.initState();
_cotisationsBloc = getIt<CotisationsBloc>();
_loadData();
}
void _loadData() {
_cotisationsBloc.add(const LoadCotisations());
_cotisationsBloc.add(const LoadCotisationsStats());
}
@override
Widget build(BuildContext context) {
return BlocProvider.value(
value: _cotisationsBloc,
child: BlocBuilder<CotisationsBloc, CotisationsState>(
builder: (context, state) {
return UnifiedPageLayout(
title: 'Cotisations',
subtitle: 'Gestion des cotisations de l\'association',
icon: Icons.account_balance_wallet,
iconColor: AppTheme.successColor,
isLoading: state is CotisationsLoading,
errorMessage: state is CotisationsError ? state.message : null,
onRefresh: _loadData,
actions: _buildActions(),
body: Column(
children: [
_buildKPISection(state),
const SizedBox(height: AppTheme.spacingLarge),
_buildQuickActionsSection(),
const SizedBox(height: AppTheme.spacingLarge),
_buildFiltersSection(),
const SizedBox(height: AppTheme.spacingLarge),
Expanded(child: _buildCotisationsList(state)),
],
),
);
},
),
);
}
/// Actions de la barre d'outils
List<Widget> _buildActions() {
return [
IconButton(
icon: const Icon(Icons.add),
onPressed: () {
// TODO: Navigation vers ajout cotisation
},
tooltip: 'Nouvelle cotisation',
),
IconButton(
icon: const Icon(Icons.search),
onPressed: () {
// TODO: Navigation vers recherche
},
tooltip: 'Rechercher',
),
IconButton(
icon: const Icon(Icons.analytics),
onPressed: () {
// TODO: Navigation vers analyses
},
tooltip: 'Analyses',
),
];
}
/// Section des KPI des cotisations
Widget _buildKPISection(CotisationsState state) {
final cotisations = state is CotisationsLoaded ? state.cotisations : <CotisationModel>[];
final totalCotisations = cotisations.length;
final cotisationsPayees = cotisations.where((c) => c.statut == 'PAYEE').length;
final cotisationsEnAttente = cotisations.where((c) => c.statut == 'EN_ATTENTE').length;
final montantTotal = cotisations.fold<double>(0, (sum, c) => sum + c.montantDu);
final kpis = [
UnifiedKPIData(
title: 'Total',
value: totalCotisations.toString(),
icon: Icons.receipt,
color: AppTheme.primaryColor,
trend: UnifiedKPITrend(
direction: UnifiedKPITrendDirection.stable,
value: 'Total',
label: 'cotisations',
),
),
UnifiedKPIData(
title: 'Payées',
value: cotisationsPayees.toString(),
icon: Icons.check_circle,
color: AppTheme.successColor,
trend: UnifiedKPITrend(
direction: UnifiedKPITrendDirection.up,
value: '${((cotisationsPayees / totalCotisations) * 100).toInt()}%',
label: 'du total',
),
),
UnifiedKPIData(
title: 'En attente',
value: cotisationsEnAttente.toString(),
icon: Icons.pending,
color: AppTheme.warningColor,
trend: UnifiedKPITrend(
direction: UnifiedKPITrendDirection.down,
value: '${((cotisationsEnAttente / totalCotisations) * 100).toInt()}%',
label: 'du total',
),
),
UnifiedKPIData(
title: 'Montant',
value: '${montantTotal.toStringAsFixed(0)}',
icon: Icons.euro,
color: AppTheme.accentColor,
trend: UnifiedKPITrend(
direction: UnifiedKPITrendDirection.up,
value: 'Total',
label: 'collecté',
),
),
];
return UnifiedKPISection(
title: 'Statistiques des cotisations',
kpis: kpis,
);
}
/// Section des actions rapides
Widget _buildQuickActionsSection() {
final actions = [
UnifiedQuickAction(
id: 'add_cotisation',
title: 'Nouvelle\nCotisation',
icon: Icons.add_card,
color: AppTheme.primaryColor,
),
UnifiedQuickAction(
id: 'bulk_payment',
title: 'Paiement\nGroupé',
icon: Icons.payment,
color: AppTheme.successColor,
),
UnifiedQuickAction(
id: 'send_reminder',
title: 'Envoyer\nRappels',
icon: Icons.notification_important,
color: AppTheme.warningColor,
badgeCount: 15,
),
UnifiedQuickAction(
id: 'export_data',
title: 'Exporter\nDonnées',
icon: Icons.download,
color: AppTheme.infoColor,
),
UnifiedQuickAction(
id: 'payment_history',
title: 'Historique\nPaiements',
icon: Icons.history,
color: AppTheme.accentColor,
),
UnifiedQuickAction(
id: 'reports',
title: 'Rapports\nFinanciers',
icon: Icons.analytics,
color: AppTheme.textSecondary,
),
];
return UnifiedQuickActionsSection(
title: 'Actions rapides',
actions: actions,
onActionTap: _handleQuickAction,
);
}
/// Section des filtres
Widget _buildFiltersSection() {
return UnifiedCard.outlined(
child: Padding(
padding: const EdgeInsets.all(AppTheme.spacingMedium),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
Icons.filter_list,
color: AppTheme.successColor,
size: 20,
),
const SizedBox(width: AppTheme.spacingSmall),
Text(
'Filtres rapides',
style: AppTheme.titleSmall.copyWith(
fontWeight: FontWeight.bold,
),
),
],
),
const SizedBox(height: AppTheme.spacingMedium),
Wrap(
spacing: AppTheme.spacingSmall,
runSpacing: AppTheme.spacingSmall,
children: [
_buildFilterChip('Toutes', 'all'),
_buildFilterChip('Payées', 'payee'),
_buildFilterChip('En attente', 'en_attente'),
_buildFilterChip('En retard', 'en_retard'),
_buildFilterChip('Annulées', 'annulee'),
],
),
],
),
),
);
}
/// Construit un chip de filtre
Widget _buildFilterChip(String label, String value) {
final isSelected = _currentFilter == value;
return FilterChip(
label: Text(label),
selected: isSelected,
onSelected: (selected) {
setState(() {
_currentFilter = selected ? value : 'all';
});
// TODO: Appliquer le filtre
},
selectedColor: AppTheme.successColor.withOpacity(0.2),
checkmarkColor: AppTheme.successColor,
);
}
/// Liste des cotisations avec composant unifié
Widget _buildCotisationsList(CotisationsState state) {
if (state is CotisationsLoaded) {
final filteredCotisations = _filterCotisations(state.cotisations);
return UnifiedListWidget<CotisationModel>(
items: filteredCotisations,
itemBuilder: (context, cotisation, index) => _buildCotisationCard(cotisation),
isLoading: false,
hasReachedMax: state.hasReachedMax,
enableAnimations: true,
emptyMessage: 'Aucune cotisation trouvée',
emptyIcon: Icons.receipt_outlined,
onLoadMore: () {
// TODO: Charger plus de cotisations
},
);
}
return const Center(
child: Text('Chargement des cotisations...'),
);
}
/// Filtre les cotisations selon le filtre actuel
List<CotisationModel> _filterCotisations(List<CotisationModel> cotisations) {
if (_currentFilter == 'all') return cotisations;
return cotisations.where((cotisation) {
switch (_currentFilter) {
case 'payee':
return cotisation.statut == 'PAYEE';
case 'en_attente':
return cotisation.statut == 'EN_ATTENTE';
case 'en_retard':
return cotisation.statut == 'EN_RETARD';
case 'annulee':
return cotisation.statut == 'ANNULEE';
default:
return true;
}
}).toList();
}
/// Construit une carte de cotisation
Widget _buildCotisationCard(CotisationModel cotisation) {
return UnifiedCard.listItem(
onTap: () {
// TODO: Navigation vers détails de la cotisation
},
child: Padding(
padding: const EdgeInsets.all(AppTheme.spacingMedium),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
padding: const EdgeInsets.all(AppTheme.spacingSmall),
decoration: BoxDecoration(
color: _getStatusColor(cotisation.statut).withOpacity(0.1),
borderRadius: BorderRadius.circular(AppTheme.borderRadiusSmall),
),
child: Icon(
_getStatusIcon(cotisation.statut),
color: _getStatusColor(cotisation.statut),
size: 20,
),
),
const SizedBox(width: AppTheme.spacingMedium),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
cotisation.typeCotisation,
style: AppTheme.bodyLarge.copyWith(
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: AppTheme.spacingXSmall),
Text(
'Membre: ${cotisation.nomMembre ?? 'N/A'}',
style: AppTheme.bodySmall.copyWith(
color: AppTheme.textSecondary,
),
),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'${cotisation.montantDu.toStringAsFixed(2)}',
style: AppTheme.titleMedium.copyWith(
fontWeight: FontWeight.bold,
color: AppTheme.successColor,
),
),
const SizedBox(height: AppTheme.spacingXSmall),
Container(
padding: const EdgeInsets.symmetric(
horizontal: AppTheme.spacingSmall,
vertical: AppTheme.spacingXSmall,
),
decoration: BoxDecoration(
color: _getStatusColor(cotisation.statut).withOpacity(0.1),
borderRadius: BorderRadius.circular(AppTheme.borderRadiusSmall),
),
child: Text(
_getStatusLabel(cotisation.statut),
style: AppTheme.bodySmall.copyWith(
color: _getStatusColor(cotisation.statut),
fontWeight: FontWeight.w600,
),
),
),
],
),
],
),
const SizedBox(height: AppTheme.spacingMedium),
Row(
children: [
Icon(
Icons.calendar_today,
size: 16,
color: AppTheme.textSecondary,
),
const SizedBox(width: AppTheme.spacingXSmall),
Text(
'Échéance: ${cotisation.dateEcheance.day}/${cotisation.dateEcheance.month}/${cotisation.dateEcheance.year}',
style: AppTheme.bodySmall.copyWith(
color: AppTheme.textSecondary,
),
),
const Spacer(),
if (cotisation.datePaiement != null) ...[
Icon(
Icons.check_circle,
size: 16,
color: AppTheme.successColor,
),
const SizedBox(width: AppTheme.spacingXSmall),
Text(
'Payée le ${cotisation.datePaiement!.day}/${cotisation.datePaiement!.month}/${cotisation.datePaiement!.year}',
style: AppTheme.bodySmall.copyWith(
color: AppTheme.successColor,
),
),
],
],
),
],
),
),
);
}
/// Obtient la couleur du statut
Color _getStatusColor(String statut) {
switch (statut) {
case 'PAYEE':
return AppTheme.successColor;
case 'EN_ATTENTE':
return AppTheme.warningColor;
case 'EN_RETARD':
return AppTheme.errorColor;
case 'ANNULEE':
return AppTheme.textSecondary;
default:
return AppTheme.textSecondary;
}
}
/// Obtient l'icône du statut
IconData _getStatusIcon(String statut) {
switch (statut) {
case 'PAYEE':
return Icons.check_circle;
case 'EN_ATTENTE':
return Icons.pending;
case 'EN_RETARD':
return Icons.warning;
case 'ANNULEE':
return Icons.cancel;
default:
return Icons.help;
}
}
/// Obtient le libellé du statut
String _getStatusLabel(String statut) {
switch (statut) {
case 'PAYEE':
return 'Payée';
case 'EN_ATTENTE':
return 'En attente';
case 'EN_RETARD':
return 'En retard';
case 'ANNULEE':
return 'Annulée';
default:
return 'Inconnu';
}
}
/// Gère les actions rapides
void _handleQuickAction(UnifiedQuickAction action) {
switch (action.id) {
case 'add_cotisation':
_navigateToCreateCotisation();
break;
case 'bulk_payment':
_showBulkPaymentDialog();
break;
case 'send_reminder':
_showSendReminderDialog();
break;
case 'export_data':
_exportCotisationsData();
break;
case 'payment_history':
_navigateToPaymentHistory();
break;
case 'reports':
_showReportsDialog();
break;
}
}
/// Navigation vers la création de cotisation
void _navigateToCreateCotisation() async {
final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const CotisationCreatePage(),
),
);
if (result == true) {
// Recharger la liste si une cotisation a été créée
_loadData();
}
}
/// Navigation vers l'historique des paiements
void _navigateToPaymentHistory() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const PaymentHistoryPage(),
),
);
}
/// Affiche le dialogue de paiement groupé
void _showBulkPaymentDialog() {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Text('Paiement Groupé'),
content: const Text('Fonctionnalité de paiement groupé à implémenter'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Fermer'),
),
],
),
);
}
/// Affiche le dialogue d'envoi de rappels
void _showSendReminderDialog() {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Text('Envoyer des Rappels'),
content: const Text('Fonctionnalité d\'envoi de rappels à implémenter'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Fermer'),
),
],
),
);
}
/// Export des données de cotisations
void _exportCotisationsData() {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Fonctionnalité d\'export à implémenter'),
backgroundColor: AppTheme.infoColor,
),
);
}
/// Affiche le dialogue des rapports
void _showReportsDialog() {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Text('Rapports Financiers'),
content: const Text('Fonctionnalité de rapports financiers à implémenter'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Fermer'),
),
],
),
);
}
@override
void dispose() {
_cotisationsBloc.close();
super.dispose();
}
}

View File

@@ -1,498 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../../core/di/injection.dart';
import '../../../../core/models/cotisation_model.dart';
import '../../../../shared/theme/app_theme.dart';
import '../../../../shared/widgets/buttons/buttons.dart';
import '../../../../shared/widgets/buttons/primary_button.dart';
import '../bloc/cotisations_bloc.dart';
import '../bloc/cotisations_event.dart';
import '../bloc/cotisations_state.dart';
import '../widgets/cotisation_card.dart';
import 'cotisation_detail_page.dart';
/// Page de recherche et filtrage des cotisations
class CotisationsSearchPage extends StatefulWidget {
const CotisationsSearchPage({super.key});
@override
State<CotisationsSearchPage> createState() => _CotisationsSearchPageState();
}
class _CotisationsSearchPageState extends State<CotisationsSearchPage>
with TickerProviderStateMixin {
late final CotisationsBloc _cotisationsBloc;
late final TabController _tabController;
late final AnimationController _animationController;
final _searchController = TextEditingController();
final _scrollController = ScrollController();
String? _selectedStatut;
String? _selectedType;
int? _selectedAnnee;
int? _selectedMois;
bool _showAdvancedFilters = false;
@override
void initState() {
super.initState();
_cotisationsBloc = getIt<CotisationsBloc>();
_tabController = TabController(length: 4, vsync: this);
_animationController = AnimationController(
duration: const Duration(milliseconds: 300),
vsync: this,
);
_scrollController.addListener(_onScroll);
_animationController.forward();
}
@override
void dispose() {
_searchController.dispose();
_scrollController.dispose();
_tabController.dispose();
_animationController.dispose();
super.dispose();
}
void _onScroll() {
if (_isBottom) {
final currentState = _cotisationsBloc.state;
if (currentState is CotisationsSearchResults && !currentState.hasReachedMax) {
_performSearch(page: currentState.currentPage + 1);
}
}
}
bool get _isBottom {
if (!_scrollController.hasClients) return false;
final maxScroll = _scrollController.position.maxScrollExtent;
final currentScroll = _scrollController.offset;
return currentScroll >= (maxScroll * 0.9);
}
@override
Widget build(BuildContext context) {
return BlocProvider.value(
value: _cotisationsBloc,
child: Scaffold(
backgroundColor: AppTheme.backgroundLight,
appBar: AppBar(
title: const Text('Recherche'),
backgroundColor: AppTheme.primaryColor,
foregroundColor: Colors.white,
bottom: TabBar(
controller: _tabController,
labelColor: Colors.white,
unselectedLabelColor: Colors.white70,
indicatorColor: Colors.white,
tabs: const [
Tab(text: 'Toutes', icon: Icon(Icons.list)),
Tab(text: 'En attente', icon: Icon(Icons.schedule)),
Tab(text: 'En retard', icon: Icon(Icons.warning)),
Tab(text: 'Payées', icon: Icon(Icons.check_circle)),
],
onTap: (index) => _onTabChanged(index),
),
),
body: Column(
children: [
_buildSearchHeader(),
if (_showAdvancedFilters) _buildAdvancedFilters(),
Expanded(
child: TabBarView(
controller: _tabController,
children: [
_buildSearchResults(),
_buildSearchResults(statut: 'EN_ATTENTE'),
_buildSearchResults(statut: 'EN_RETARD'),
_buildSearchResults(statut: 'PAYEE'),
],
),
),
],
),
),
);
}
Widget _buildSearchHeader() {
return Container(
padding: const EdgeInsets.all(16),
decoration: const BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 4,
offset: Offset(0, 2),
),
],
),
child: Column(
children: [
// Barre de recherche
TextField(
controller: _searchController,
decoration: InputDecoration(
hintText: 'Rechercher par nom, référence...',
prefixIcon: const Icon(Icons.search),
suffixIcon: _searchController.text.isNotEmpty
? IconButton(
icon: const Icon(Icons.clear),
onPressed: () {
_searchController.clear();
_performSearch();
},
)
: null,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none,
),
filled: true,
fillColor: AppTheme.backgroundLight,
),
onChanged: (value) {
setState(() {});
_performSearch();
},
),
const SizedBox(height: 12),
// Boutons d'action
Row(
children: [
Expanded(
child: OutlinedButton.icon(
onPressed: () {
setState(() {
_showAdvancedFilters = !_showAdvancedFilters;
});
if (_showAdvancedFilters) {
_animationController.forward();
} else {
_animationController.reverse();
}
},
icon: Icon(_showAdvancedFilters ? Icons.expand_less : Icons.tune),
label: Text(_showAdvancedFilters ? 'Masquer filtres' : 'Filtres avancés'),
),
),
const SizedBox(width: 12),
OutlinedButton.icon(
onPressed: _clearAllFilters,
icon: const Icon(Icons.clear_all),
label: const Text('Effacer'),
),
],
),
],
),
);
}
Widget _buildAdvancedFilters() {
return AnimatedContainer(
duration: const Duration(milliseconds: 300),
height: _showAdvancedFilters ? null : 0,
child: Container(
padding: const EdgeInsets.all(16),
decoration: const BoxDecoration(
color: Colors.white,
border: Border(
bottom: BorderSide(color: AppTheme.borderLight),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Filtres avancés',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 16),
// Grille de filtres
GridView.count(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: 2,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
childAspectRatio: 3,
children: [
_buildFilterDropdown(
'Type',
_selectedType,
['Mensuelle', 'Annuelle', 'Exceptionnelle', 'Adhésion'],
(value) => setState(() => _selectedType = value),
),
_buildFilterDropdown(
'Année',
_selectedAnnee?.toString(),
List.generate(5, (i) => (DateTime.now().year - i).toString()),
(value) => setState(() => _selectedAnnee = int.tryParse(value ?? '')),
),
],
),
const SizedBox(height: 16),
// Bouton d'application des filtres
SizedBox(
width: double.infinity,
child: PrimaryButton(
text: 'Appliquer les filtres',
onPressed: _applyAdvancedFilters,
),
),
],
),
),
);
}
Widget _buildFilterDropdown(
String label,
String? value,
List<String> items,
Function(String?) onChanged,
) {
return DropdownButtonFormField<String>(
value: value,
decoration: InputDecoration(
labelText: label,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
),
items: [
DropdownMenuItem<String>(
value: null,
child: Text('Tous les ${label.toLowerCase()}s'),
),
...items.map((item) => DropdownMenuItem<String>(
value: item,
child: Text(item),
)),
],
onChanged: onChanged,
);
}
Widget _buildSearchResults({String? statut}) {
return BlocBuilder<CotisationsBloc, CotisationsState>(
builder: (context, state) {
if (state is CotisationsLoading) {
return const Center(child: CircularProgressIndicator());
}
if (state is CotisationsError) {
return _buildErrorState(state);
}
if (state is CotisationsSearchResults) {
final filteredResults = statut != null
? state.cotisations.where((c) => c.statut == statut).toList()
: state.cotisations;
if (filteredResults.isEmpty) {
return _buildEmptyState();
}
return RefreshIndicator(
onRefresh: () async => _performSearch(refresh: true),
child: ListView.builder(
controller: _scrollController,
padding: const EdgeInsets.all(16),
itemCount: filteredResults.length + (state.hasReachedMax ? 0 : 1),
itemBuilder: (context, index) {
if (index >= filteredResults.length) {
return const Padding(
padding: EdgeInsets.all(16),
child: Center(child: CircularProgressIndicator()),
);
}
final cotisation = filteredResults[index];
return Padding(
padding: const EdgeInsets.only(bottom: 12),
child: CotisationCard(
cotisation: cotisation,
onTap: () => _navigateToDetail(cotisation),
onPay: () => _navigateToDetail(cotisation),
),
);
},
),
);
}
return _buildInitialState();
},
);
}
Widget _buildInitialState() {
return const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.search,
size: 64,
color: AppTheme.textHint,
),
SizedBox(height: 16),
Text(
'Recherchez des cotisations',
style: TextStyle(
fontSize: 18,
color: AppTheme.textSecondary,
),
),
SizedBox(height: 8),
Text(
'Utilisez la barre de recherche ou les filtres',
style: TextStyle(
fontSize: 14,
color: AppTheme.textHint,
),
),
],
),
);
}
Widget _buildEmptyState() {
return const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.search_off,
size: 64,
color: AppTheme.textHint,
),
SizedBox(height: 16),
Text(
'Aucun résultat trouvé',
style: TextStyle(
fontSize: 18,
color: AppTheme.textSecondary,
),
),
SizedBox(height: 8),
Text(
'Essayez de modifier vos critères de recherche',
style: TextStyle(
fontSize: 14,
color: AppTheme.textHint,
),
),
],
),
);
}
Widget _buildErrorState(CotisationsError state) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.error_outline,
size: 64,
color: AppTheme.errorColor,
),
const SizedBox(height: 16),
Text(
'Erreur de recherche',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
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),
PrimaryButton(
text: 'Réessayer',
onPressed: () => _performSearch(refresh: true),
),
],
),
);
}
// Actions
void _onTabChanged(int index) {
_performSearch(refresh: true);
}
void _performSearch({int page = 0, bool refresh = false}) {
final query = _searchController.text.trim();
if (query.isEmpty && !_hasActiveFilters()) {
return;
}
final filters = <String, dynamic>{
if (query.isNotEmpty) 'query': query,
if (_selectedStatut != null) 'statut': _selectedStatut,
if (_selectedType != null) 'typeCotisation': _selectedType,
if (_selectedAnnee != null) 'annee': _selectedAnnee,
if (_selectedMois != null) 'mois': _selectedMois,
};
_cotisationsBloc.add(ApplyAdvancedFilters(filters));
}
void _applyAdvancedFilters() {
_performSearch(refresh: true);
}
void _clearAllFilters() {
setState(() {
_searchController.clear();
_selectedStatut = null;
_selectedType = null;
_selectedAnnee = null;
_selectedMois = null;
});
_cotisationsBloc.add(const ResetCotisationsState());
}
bool _hasActiveFilters() {
return _selectedStatut != null ||
_selectedType != null ||
_selectedAnnee != null ||
_selectedMois != null;
}
void _navigateToDetail(CotisationModel cotisation) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CotisationDetailPage(cotisation: cotisation),
),
);
}
}

View File

@@ -1,612 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../../core/di/injection.dart';
import '../../../../core/models/cotisation_model.dart';
import '../../../../core/models/payment_model.dart';
import '../../../../shared/theme/app_theme.dart';
import '../../../../shared/widgets/common/unified_page_layout.dart';
import '../../../../shared/widgets/common/unified_search_bar.dart';
import '../../../../shared/widgets/common/unified_filter_chip.dart';
import '../../../../shared/widgets/common/unified_empty_state.dart';
import '../../../../shared/widgets/common/unified_loading_indicator.dart';
import '../bloc/cotisations_bloc.dart';
import '../bloc/cotisations_event.dart';
import '../bloc/cotisations_state.dart';
/// Page d'historique des paiements
class PaymentHistoryPage extends StatefulWidget {
final String? membreId; // Filtrer par membre (optionnel)
const PaymentHistoryPage({
super.key,
this.membreId,
});
@override
State<PaymentHistoryPage> createState() => _PaymentHistoryPageState();
}
class _PaymentHistoryPageState extends State<PaymentHistoryPage> {
late CotisationsBloc _cotisationsBloc;
final _searchController = TextEditingController();
// Filtres
String _selectedPeriod = 'all';
String _selectedStatus = 'all';
String _selectedMethod = 'all';
// Options de filtres
final List<Map<String, String>> _periodOptions = [
{'value': 'all', 'label': 'Toutes les périodes'},
{'value': 'today', 'label': 'Aujourd\'hui'},
{'value': 'week', 'label': 'Cette semaine'},
{'value': 'month', 'label': 'Ce mois'},
{'value': 'year', 'label': 'Cette année'},
];
final List<Map<String, String>> _statusOptions = [
{'value': 'all', 'label': 'Tous les statuts'},
{'value': 'COMPLETED', 'label': 'Complété'},
{'value': 'PENDING', 'label': 'En attente'},
{'value': 'FAILED', 'label': 'Échoué'},
{'value': 'CANCELLED', 'label': 'Annulé'},
];
final List<Map<String, String>> _methodOptions = [
{'value': 'all', 'label': 'Toutes les méthodes'},
{'value': 'WAVE', 'label': 'Wave Money'},
{'value': 'ORANGE_MONEY', 'label': 'Orange Money'},
{'value': 'MTN_MONEY', 'label': 'MTN Money'},
{'value': 'CASH', 'label': 'Espèces'},
{'value': 'BANK_TRANSFER', 'label': 'Virement bancaire'},
];
@override
void initState() {
super.initState();
_cotisationsBloc = getIt<CotisationsBloc>();
_loadPaymentHistory();
}
@override
void dispose() {
_searchController.dispose();
super.dispose();
}
void _loadPaymentHistory() {
_cotisationsBloc.add(LoadPaymentHistory(
membreId: widget.membreId,
period: _selectedPeriod,
status: _selectedStatus,
method: _selectedMethod,
searchQuery: _searchController.text.trim(),
));
}
void _onSearchChanged(String query) {
// Debounce la recherche
Future.delayed(const Duration(milliseconds: 500), () {
if (_searchController.text == query) {
_loadPaymentHistory();
}
});
}
void _onFilterChanged() {
_loadPaymentHistory();
}
@override
Widget build(BuildContext context) {
return BlocProvider.value(
value: _cotisationsBloc,
child: UnifiedPageLayout(
title: 'Historique des Paiements',
backgroundColor: AppTheme.backgroundLight,
actions: [
IconButton(
icon: const Icon(Icons.file_download),
onPressed: _exportHistory,
tooltip: 'Exporter',
),
],
body: Column(
children: [
// Barre de recherche
Padding(
padding: const EdgeInsets.all(16),
child: UnifiedSearchBar(
controller: _searchController,
hintText: 'Rechercher par membre, référence...',
onChanged: _onSearchChanged,
),
),
// Filtres
_buildFilters(),
// Liste des paiements
Expanded(
child: BlocBuilder<CotisationsBloc, CotisationsState>(
builder: (context, state) {
if (state is CotisationsLoading) {
return const UnifiedLoadingIndicator();
} else if (state is PaymentHistoryLoaded) {
if (state.payments.isEmpty) {
return UnifiedEmptyState(
icon: Icons.payment,
title: 'Aucun paiement trouvé',
subtitle: 'Aucun paiement ne correspond à vos critères de recherche',
actionText: 'Réinitialiser les filtres',
onActionPressed: _resetFilters,
);
}
return _buildPaymentsList(state.payments);
} else if (state is CotisationsError) {
return UnifiedEmptyState(
icon: Icons.error,
title: 'Erreur de chargement',
subtitle: state.message,
actionText: 'Réessayer',
onActionPressed: _loadPaymentHistory,
);
}
return const SizedBox.shrink();
},
),
),
],
),
),
);
}
Widget _buildFilters() {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
// Filtre période
UnifiedFilterChip(
label: _periodOptions.firstWhere((o) => o['value'] == _selectedPeriod)['label']!,
isSelected: _selectedPeriod != 'all',
onTap: () => _showPeriodFilter(),
),
const SizedBox(width: 8),
// Filtre statut
UnifiedFilterChip(
label: _statusOptions.firstWhere((o) => o['value'] == _selectedStatus)['label']!,
isSelected: _selectedStatus != 'all',
onTap: () => _showStatusFilter(),
),
const SizedBox(width: 8),
// Filtre méthode
UnifiedFilterChip(
label: _methodOptions.firstWhere((o) => o['value'] == _selectedMethod)['label']!,
isSelected: _selectedMethod != 'all',
onTap: () => _showMethodFilter(),
),
// Bouton reset
if (_selectedPeriod != 'all' || _selectedStatus != 'all' || _selectedMethod != 'all') ...[
const SizedBox(width: 8),
IconButton(
icon: const Icon(Icons.clear),
onPressed: _resetFilters,
tooltip: 'Réinitialiser les filtres',
),
],
],
),
),
);
}
Widget _buildPaymentsList(List<PaymentModel> payments) {
return ListView.builder(
padding: const EdgeInsets.all(16),
itemCount: payments.length,
itemBuilder: (context, index) {
final payment = payments[index];
return _buildPaymentCard(payment);
},
);
}
Widget _buildPaymentCard(PaymentModel payment) {
return Card(
margin: const EdgeInsets.only(bottom: 12),
child: InkWell(
onTap: () => _showPaymentDetails(payment),
borderRadius: BorderRadius.circular(8),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// En-tête avec statut
Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
payment.nomMembre ?? 'Membre inconnu',
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
Text(
'Réf: ${payment.referenceTransaction}',
style: const TextStyle(
fontSize: 12,
color: AppTheme.textSecondary,
),
),
],
),
),
_buildStatusChip(payment.statut),
],
),
const SizedBox(height: 12),
// Montant et méthode
Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${payment.montant.toStringAsFixed(0)} XOF',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppTheme.accentColor,
),
),
Text(
_getMethodLabel(payment.methodePaiement),
style: const TextStyle(
fontSize: 12,
color: AppTheme.textSecondary,
),
),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
_formatDate(payment.dateCreation),
style: const TextStyle(
fontSize: 12,
color: AppTheme.textSecondary,
),
),
if (payment.dateTraitement != null)
Text(
'Traité: ${_formatDate(payment.dateTraitement!)}',
style: const TextStyle(
fontSize: 10,
color: AppTheme.textSecondary,
),
),
],
),
],
),
// Description si disponible
if (payment.description?.isNotEmpty == true) ...[
const SizedBox(height: 8),
Text(
payment.description!,
style: const TextStyle(
fontSize: 12,
color: AppTheme.textSecondary,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
],
),
),
),
);
}
Widget _buildStatusChip(String statut) {
Color backgroundColor;
Color textColor;
String label;
switch (statut) {
case 'COMPLETED':
backgroundColor = AppTheme.successColor;
textColor = Colors.white;
label = 'Complété';
break;
case 'PENDING':
backgroundColor = AppTheme.warningColor;
textColor = Colors.white;
label = 'En attente';
break;
case 'FAILED':
backgroundColor = AppTheme.errorColor;
textColor = Colors.white;
label = 'Échoué';
break;
case 'CANCELLED':
backgroundColor = Colors.grey;
textColor = Colors.white;
label = 'Annulé';
break;
default:
backgroundColor = Colors.grey.shade300;
textColor = AppTheme.textPrimary;
label = statut;
}
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: backgroundColor,
borderRadius: BorderRadius.circular(12),
),
child: Text(
label,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w600,
color: textColor,
),
),
);
}
String _getMethodLabel(String method) {
switch (method) {
case 'WAVE': return 'Wave Money';
case 'ORANGE_MONEY': return 'Orange Money';
case 'MTN_MONEY': return 'MTN Money';
case 'CASH': return 'Espèces';
case 'BANK_TRANSFER': return 'Virement bancaire';
default: return method;
}
}
String _formatDate(DateTime date) {
return '${date.day}/${date.month}/${date.year} ${date.hour}:${date.minute.toString().padLeft(2, '0')}';
}
void _showPeriodFilter() {
showModalBottomSheet(
context: context,
builder: (context) => _buildFilterBottomSheet(
'Période',
_periodOptions,
_selectedPeriod,
(value) {
setState(() {
_selectedPeriod = value;
});
_onFilterChanged();
},
),
);
}
void _showStatusFilter() {
showModalBottomSheet(
context: context,
builder: (context) => _buildFilterBottomSheet(
'Statut',
_statusOptions,
_selectedStatus,
(value) {
setState(() {
_selectedStatus = value;
});
_onFilterChanged();
},
),
);
}
void _showMethodFilter() {
showModalBottomSheet(
context: context,
builder: (context) => _buildFilterBottomSheet(
'Méthode de paiement',
_methodOptions,
_selectedMethod,
(value) {
setState(() {
_selectedMethod = value;
});
_onFilterChanged();
},
),
);
}
Widget _buildFilterBottomSheet(
String title,
List<Map<String, String>> options,
String selectedValue,
Function(String) onSelected,
) {
return Container(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 16),
...options.map((option) {
final isSelected = option['value'] == selectedValue;
return ListTile(
title: Text(option['label']!),
trailing: isSelected ? const Icon(Icons.check, color: AppTheme.accentColor) : null,
onTap: () {
onSelected(option['value']!);
Navigator.pop(context);
},
);
}).toList(),
],
),
);
}
void _resetFilters() {
setState(() {
_selectedPeriod = 'all';
_selectedStatus = 'all';
_selectedMethod = 'all';
_searchController.clear();
});
_onFilterChanged();
}
void _showPaymentDetails(PaymentModel payment) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) => DraggableScrollableSheet(
initialChildSize: 0.7,
maxChildSize: 0.9,
minChildSize: 0.5,
builder: (context, scrollController) {
return Container(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Handle
Center(
child: Container(
width: 40,
height: 4,
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(2),
),
),
),
const SizedBox(height: 16),
// Titre
Text(
'Détails du Paiement',
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 16),
// Contenu scrollable
Expanded(
child: SingleChildScrollView(
controller: scrollController,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildDetailRow('Référence', payment.referenceTransaction),
_buildDetailRow('Membre', payment.nomMembre ?? 'N/A'),
_buildDetailRow('Montant', '${payment.montant.toStringAsFixed(0)} XOF'),
_buildDetailRow('Méthode', _getMethodLabel(payment.methodePaiement)),
_buildDetailRow('Statut', _getStatusLabel(payment.statut)),
_buildDetailRow('Date de création', _formatDate(payment.dateCreation)),
if (payment.dateTraitement != null)
_buildDetailRow('Date de traitement', _formatDate(payment.dateTraitement!)),
if (payment.description?.isNotEmpty == true)
_buildDetailRow('Description', payment.description!),
if (payment.referencePaiementExterne?.isNotEmpty == true)
_buildDetailRow('Référence externe', payment.referencePaiementExterne!),
],
),
),
),
],
),
);
},
),
);
}
Widget _buildDetailRow(String label, String value) {
return Padding(
padding: const EdgeInsets.only(bottom: 12),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 120,
child: Text(
label,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppTheme.textSecondary,
),
),
),
Expanded(
child: Text(
value,
style: const TextStyle(
fontSize: 14,
color: AppTheme.textPrimary,
),
),
),
],
),
);
}
String _getStatusLabel(String status) {
switch (status) {
case 'COMPLETED': return 'Complété';
case 'PENDING': return 'En attente';
case 'FAILED': return 'Échoué';
case 'CANCELLED': return 'Annulé';
default: return status;
}
}
void _exportHistory() {
// TODO: Implémenter l'export de l'historique
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Fonctionnalité d\'export à implémenter'),
backgroundColor: AppTheme.infoColor,
),
);
}
}

View File

@@ -1,668 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../../../../core/di/injection.dart';
import '../../../../core/services/wave_integration_service.dart';
import '../../../../core/services/wave_payment_service.dart';
import '../../../../core/models/cotisation_model.dart';
import '../../../../shared/theme/app_theme.dart';
import '../../../../shared/widgets/buttons/primary_button.dart';
import '../../../../shared/widgets/common/unified_page_layout.dart';
/// Page de démonstration de l'intégration Wave Money
/// Permet de tester toutes les fonctionnalités Wave
class WaveDemoPage extends StatefulWidget {
const WaveDemoPage({super.key});
@override
State<WaveDemoPage> createState() => _WaveDemoPageState();
}
class _WaveDemoPageState extends State<WaveDemoPage>
with TickerProviderStateMixin {
late WaveIntegrationService _waveIntegrationService;
late WavePaymentService _wavePaymentService;
late AnimationController _animationController;
late Animation<double> _fadeAnimation;
final _amountController = TextEditingController(text: '5000');
final _phoneController = TextEditingController(text: '77123456');
final _nameController = TextEditingController(text: 'Test User');
bool _isLoading = false;
String _lastResult = '';
WavePaymentStats? _stats;
@override
void initState() {
super.initState();
_waveIntegrationService = getIt<WaveIntegrationService>();
_wavePaymentService = getIt<WavePaymentService>();
_animationController = AnimationController(
duration: const Duration(milliseconds: 800),
vsync: this,
);
_fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeOut),
);
_animationController.forward();
_loadStats();
}
@override
void dispose() {
_amountController.dispose();
_phoneController.dispose();
_nameController.dispose();
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return UnifiedPageLayout(
title: 'Wave Money Demo',
subtitle: 'Test d\'intégration Wave Money',
showBackButton: true,
child: FadeTransition(
opacity: _fadeAnimation,
child: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildWaveHeader(),
const SizedBox(height: 24),
_buildTestForm(),
const SizedBox(height: 24),
_buildQuickActions(),
const SizedBox(height: 24),
_buildStatsSection(),
const SizedBox(height: 24),
_buildResultSection(),
],
),
),
),
);
}
Widget _buildWaveHeader() {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Color(0xFF00D4FF), Color(0xFF0099CC)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: const Color(0xFF00D4FF).withOpacity(0.3),
blurRadius: 12,
offset: const Offset(0, 4),
),
],
),
child: Column(
children: [
Row(
children: [
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
child: const Icon(
Icons.waves,
size: 32,
color: Color(0xFF00D4FF),
),
),
const SizedBox(width: 16),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Wave Money Integration',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
'Test et démonstration',
style: TextStyle(
fontSize: 14,
color: Colors.white70,
),
),
],
),
),
],
),
const SizedBox(height: 16),
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(8),
),
child: const Row(
children: [
Icon(Icons.info_outline, color: Colors.white, size: 16),
SizedBox(width: 8),
Expanded(
child: Text(
'Environnement de test - Aucun paiement réel ne sera effectué',
style: TextStyle(
fontSize: 12,
color: Colors.white,
),
),
),
],
),
),
],
),
);
}
Widget _buildTestForm() {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppTheme.borderLight),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Paramètres de test',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 16),
// Montant
TextFormField(
controller: _amountController,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
labelText: 'Montant (XOF)',
prefixIcon: Icon(Icons.attach_money),
border: OutlineInputBorder(),
),
),
const SizedBox(height: 16),
// Numéro de téléphone
TextFormField(
controller: _phoneController,
keyboardType: TextInputType.phone,
decoration: const InputDecoration(
labelText: 'Numéro Wave Money',
prefixIcon: Icon(Icons.phone),
prefixText: '+225 ',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 16),
// Nom
TextFormField(
controller: _nameController,
decoration: const InputDecoration(
labelText: 'Nom du payeur',
prefixIcon: Icon(Icons.person),
border: OutlineInputBorder(),
),
),
const SizedBox(height: 20),
// Bouton de test
SizedBox(
width: double.infinity,
child: PrimaryButton(
text: _isLoading ? 'Test en cours...' : 'Tester le paiement Wave',
icon: _isLoading ? null : Icons.play_arrow,
onPressed: _isLoading ? null : _testWavePayment,
isLoading: _isLoading,
backgroundColor: const Color(0xFF00D4FF),
),
),
],
),
);
}
Widget _buildQuickActions() {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppTheme.borderLight),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Actions rapides',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 16),
Wrap(
spacing: 8,
runSpacing: 8,
children: [
_buildActionChip(
'Calculer frais',
Icons.calculate,
_calculateFees,
),
_buildActionChip(
'Historique',
Icons.history,
_showHistory,
),
_buildActionChip(
'Statistiques',
Icons.analytics,
_loadStats,
),
_buildActionChip(
'Vider cache',
Icons.clear_all,
_clearCache,
),
],
),
],
),
);
}
Widget _buildActionChip(String label, IconData icon, VoidCallback onPressed) {
return ActionChip(
avatar: Icon(icon, size: 16),
label: Text(label),
onPressed: onPressed,
backgroundColor: AppTheme.backgroundLight,
side: const BorderSide(color: AppTheme.borderLight),
);
}
Widget _buildStatsSection() {
if (_stats == null) {
return const SizedBox.shrink();
}
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppTheme.borderLight),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Statistiques Wave Money',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 16),
GridView.count(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: 2,
childAspectRatio: 2.5,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
children: [
_buildStatCard(
'Total paiements',
_stats!.totalPayments.toString(),
Icons.payment,
AppTheme.primaryColor,
),
_buildStatCard(
'Réussis',
_stats!.completedPayments.toString(),
Icons.check_circle,
AppTheme.successColor,
),
_buildStatCard(
'Montant total',
'${_stats!.totalAmount.toStringAsFixed(0)} XOF',
Icons.attach_money,
AppTheme.warningColor,
),
_buildStatCard(
'Taux de réussite',
'${_stats!.successRate.toStringAsFixed(1)}%',
Icons.trending_up,
AppTheme.infoColor,
),
],
),
],
),
);
}
Widget _buildStatCard(String title, String value, IconData icon, Color color) {
return Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: color.withOpacity(0.3)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(icon, color: color, size: 16),
const SizedBox(width: 4),
Expanded(
child: Text(
title,
style: TextStyle(
fontSize: 12,
color: color,
fontWeight: FontWeight.w500,
),
overflow: TextOverflow.ellipsis,
),
),
],
),
const SizedBox(height: 4),
Text(
value,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: color,
),
),
],
),
);
}
Widget _buildResultSection() {
if (_lastResult.isEmpty) {
return const SizedBox.shrink();
}
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppTheme.borderLight),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Text(
'Dernier résultat',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
const Spacer(),
IconButton(
icon: const Icon(Icons.copy, size: 16),
onPressed: () {
Clipboard.setData(ClipboardData(text: _lastResult));
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Résultat copié')),
);
},
tooltip: 'Copier',
),
],
),
const SizedBox(height: 8),
Container(
width: double.infinity,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: AppTheme.backgroundLight,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: AppTheme.borderLight),
),
child: Text(
_lastResult,
style: const TextStyle(
fontSize: 12,
fontFamily: 'monospace',
color: AppTheme.textSecondary,
),
),
),
],
),
);
}
// Actions
Future<void> _testWavePayment() async {
setState(() {
_isLoading = true;
_lastResult = '';
});
try {
final amount = double.tryParse(_amountController.text) ?? 0;
if (amount <= 0) {
throw Exception('Montant invalide');
}
// Créer une cotisation de test
final testCotisation = CotisationModel(
id: 'test_${DateTime.now().millisecondsSinceEpoch}',
numeroReference: 'TEST-${DateTime.now().millisecondsSinceEpoch}',
membreId: 'test_member',
nomMembre: _nameController.text,
typeCotisation: 'MENSUELLE',
montantDu: amount,
montantPaye: 0,
codeDevise: 'XOF',
dateEcheance: DateTime.now().add(const Duration(days: 30)),
statut: 'EN_ATTENTE',
recurrente: false,
nombreRappels: 0,
annee: DateTime.now().year,
dateCreation: DateTime.now(),
);
// Initier le paiement Wave
final result = await _waveIntegrationService.initiateWavePayment(
cotisationId: testCotisation.id,
montant: amount,
numeroTelephone: _phoneController.text,
nomPayeur: _nameController.text,
metadata: {
'test_mode': true,
'demo_page': true,
},
);
setState(() {
_lastResult = '''
Test de paiement Wave Money
Résultat: ${result.success ? 'SUCCÈS' : 'ÉCHEC'}
${result.success ? '''
ID Paiement: ${result.payment?.id}
Session Wave: ${result.session?.waveSessionId}
URL Checkout: ${result.checkoutUrl}
Montant: ${amount.toStringAsFixed(0)} XOF
Frais: ${_wavePaymentService.calculateWaveFees(amount).toStringAsFixed(0)} XOF
''' : '''
Erreur: ${result.errorMessage}
'''}
Timestamp: ${DateTime.now().toIso8601String()}
'''.trim();
});
// Feedback haptique
HapticFeedback.lightImpact();
// Recharger les statistiques
await _loadStats();
} catch (e) {
setState(() {
_lastResult = 'Erreur lors du test: $e';
});
} finally {
setState(() {
_isLoading = false;
});
}
}
void _calculateFees() {
final amount = double.tryParse(_amountController.text) ?? 0;
if (amount <= 0) {
setState(() {
_lastResult = 'Montant invalide pour le calcul des frais';
});
return;
}
final fees = _wavePaymentService.calculateWaveFees(amount);
final total = amount + fees;
setState(() {
_lastResult = '''
Calcul des frais Wave Money
Montant: ${amount.toStringAsFixed(0)} XOF
Frais Wave: ${fees.toStringAsFixed(0)} XOF
Total: ${total.toStringAsFixed(0)} XOF
Barème Wave CI 2024:
0-2000 XOF: Gratuit
2001-10000 XOF: 25 XOF
10001-50000 XOF: 100 XOF
50001-100000 XOF: 200 XOF
100001-500000 XOF: 500 XOF
>500000 XOF: 0.1% du montant
'''.trim();
});
}
Future<void> _showHistory() async {
try {
final history = await _waveIntegrationService.getWavePaymentHistory(limit: 10);
setState(() {
_lastResult = '''
Historique des paiements Wave (10 derniers)
${history.isEmpty ? 'Aucun paiement trouvé' : history.map((payment) => '''
${payment.numeroReference} - ${payment.montant.toStringAsFixed(0)} XOF
Statut: ${payment.statut}
Date: ${payment.dateTransaction.toString().substring(0, 16)}
''').join('\n')}
Total: ${history.length} paiement(s)
'''.trim();
});
} catch (e) {
setState(() {
_lastResult = 'Erreur lors de la récupération de l\'historique: $e';
});
}
}
Future<void> _loadStats() async {
try {
final stats = await _waveIntegrationService.getWavePaymentStats();
setState(() {
_stats = stats;
});
} catch (e) {
print('Erreur lors du chargement des statistiques: $e');
}
}
Future<void> _clearCache() async {
try {
// TODO: Implémenter le nettoyage du cache
setState(() {
_lastResult = 'Cache Wave Money vidé avec succès';
_stats = null;
});
await _loadStats();
} catch (e) {
setState(() {
_lastResult = 'Erreur lors du nettoyage du cache: $e';
});
}
}
}

View File

@@ -1,697 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:url_launcher/url_launcher.dart';
import '../../../../core/di/injection.dart';
import '../../../../core/models/cotisation_model.dart';
import '../../../../core/models/payment_model.dart';
import '../../../../core/models/wave_checkout_session_model.dart';
import '../../../../core/services/wave_payment_service.dart';
import '../../../../shared/theme/app_theme.dart';
import '../../../../shared/widgets/buttons/primary_button.dart';
import '../../../../shared/widgets/common/unified_page_layout.dart';
import '../bloc/cotisations_bloc.dart';
import '../bloc/cotisations_event.dart';
import '../bloc/cotisations_state.dart';
/// Page dédiée aux paiements Wave Money
/// Interface moderne et sécurisée pour les paiements mobiles
class WavePaymentPage extends StatefulWidget {
final CotisationModel cotisation;
const WavePaymentPage({
super.key,
required this.cotisation,
});
@override
State<WavePaymentPage> createState() => _WavePaymentPageState();
}
class _WavePaymentPageState extends State<WavePaymentPage>
with TickerProviderStateMixin {
late CotisationsBloc _cotisationsBloc;
late WavePaymentService _wavePaymentService;
late AnimationController _animationController;
late AnimationController _pulseController;
late Animation<double> _fadeAnimation;
late Animation<double> _slideAnimation;
late Animation<double> _pulseAnimation;
final _formKey = GlobalKey<FormState>();
final _phoneController = TextEditingController();
final _nameController = TextEditingController();
final _emailController = TextEditingController();
bool _isProcessing = false;
bool _termsAccepted = false;
WaveCheckoutSessionModel? _currentSession;
String? _paymentUrl;
@override
void initState() {
super.initState();
_cotisationsBloc = getIt<CotisationsBloc>();
_wavePaymentService = getIt<WavePaymentService>();
// Animations
_animationController = AnimationController(
duration: const Duration(milliseconds: 800),
vsync: this,
);
_pulseController = AnimationController(
duration: const Duration(milliseconds: 1500),
vsync: this,
);
_fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeOut),
);
_slideAnimation = Tween<double>(begin: 50.0, end: 0.0).animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeOutCubic),
);
_pulseAnimation = Tween<double>(begin: 1.0, end: 1.1).animate(
CurvedAnimation(parent: _pulseController, curve: Curves.easeInOut),
);
_animationController.forward();
_pulseController.repeat(reverse: true);
// Pré-remplir les champs si disponible
_nameController.text = widget.cotisation.nomMembre;
}
@override
void dispose() {
_phoneController.dispose();
_nameController.dispose();
_emailController.dispose();
_animationController.dispose();
_pulseController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return BlocProvider.value(
value: _cotisationsBloc,
child: UnifiedPageLayout(
title: 'Paiement Wave Money',
subtitle: 'Paiement sécurisé et instantané',
showBackButton: true,
backgroundColor: AppTheme.backgroundLight,
child: BlocConsumer<CotisationsBloc, CotisationsState>(
listener: _handleBlocState,
builder: (context, state) {
return FadeTransition(
opacity: _fadeAnimation,
child: Transform.translate(
offset: Offset(0, _slideAnimation.value),
child: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildWaveHeader(),
const SizedBox(height: 24),
_buildCotisationSummary(),
const SizedBox(height: 24),
_buildPaymentForm(),
const SizedBox(height: 24),
_buildSecurityInfo(),
const SizedBox(height: 24),
_buildPaymentButton(state),
],
),
),
),
),
);
},
),
),
);
}
Widget _buildWaveHeader() {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Color(0xFF00D4FF), Color(0xFF0099CC)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: const Color(0xFF00D4FF).withOpacity(0.3),
blurRadius: 12,
offset: const Offset(0, 4),
),
],
),
child: Row(
children: [
ScaleTransition(
scale: _pulseAnimation,
child: Container(
width: 60,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: const Icon(
Icons.waves,
size: 32,
color: Color(0xFF00D4FF),
),
),
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Wave Money',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 4),
const Text(
'Paiement mobile sécurisé',
style: TextStyle(
fontSize: 14,
color: Colors.white70,
),
),
const SizedBox(height: 8),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(12),
),
child: const Text(
'🇨🇮 Côte d\'Ivoire',
style: TextStyle(
fontSize: 12,
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
),
],
),
),
],
),
);
}
Widget _buildCotisationSummary() {
final remainingAmount = widget.cotisation.montantDu - widget.cotisation.montantPaye;
final fees = _wavePaymentService.calculateWaveFees(remainingAmount);
final total = remainingAmount + fees;
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppTheme.borderLight),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Résumé de la cotisation',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 16),
_buildSummaryRow('Type', widget.cotisation.typeCotisation),
_buildSummaryRow('Membre', widget.cotisation.nomMembre),
_buildSummaryRow('Référence', widget.cotisation.numeroReference),
const Divider(height: 24),
_buildSummaryRow('Montant', '${remainingAmount.toStringAsFixed(0)} XOF'),
_buildSummaryRow('Frais Wave', '${fees.toStringAsFixed(0)} XOF'),
const Divider(height: 24),
_buildSummaryRow(
'Total à payer',
'${total.toStringAsFixed(0)} XOF',
isTotal: true,
),
],
),
);
}
Widget _buildSummaryRow(String label, String value, {bool isTotal = false}) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
label,
style: TextStyle(
fontSize: isTotal ? 16 : 14,
fontWeight: isTotal ? FontWeight.bold : FontWeight.normal,
color: AppTheme.textSecondary,
),
),
Text(
value,
style: TextStyle(
fontSize: isTotal ? 16 : 14,
fontWeight: FontWeight.bold,
color: isTotal ? AppTheme.primaryColor : AppTheme.textPrimary,
),
),
],
),
);
}
Widget _buildPaymentForm() {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppTheme.borderLight),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Informations de paiement',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 16),
_buildPhoneField(),
const SizedBox(height: 16),
_buildNameField(),
const SizedBox(height: 16),
_buildEmailField(),
const SizedBox(height: 16),
_buildTermsCheckbox(),
],
),
);
}
Widget _buildPhoneField() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Numéro Wave Money *',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 8),
TextFormField(
controller: _phoneController,
keyboardType: TextInputType.phone,
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
LengthLimitingTextInputFormatter(10),
],
decoration: InputDecoration(
hintText: '77 123 45 67',
prefixIcon: const Icon(Icons.phone_android, color: Color(0xFF00D4FF)),
prefixText: '+225 ',
prefixStyle: const TextStyle(
color: AppTheme.textSecondary,
fontWeight: FontWeight.w500,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: const BorderSide(color: AppTheme.borderLight),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: const BorderSide(color: Color(0xFF00D4FF), width: 2),
),
filled: true,
fillColor: AppTheme.backgroundLight,
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Veuillez saisir votre numéro Wave Money';
}
if (value.length < 8) {
return 'Numéro invalide (minimum 8 chiffres)';
}
return null;
},
),
],
);
}
Widget _buildNameField() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Nom complet *',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 8),
TextFormField(
controller: _nameController,
textCapitalization: TextCapitalization.words,
decoration: InputDecoration(
hintText: 'Votre nom complet',
prefixIcon: const Icon(Icons.person, color: Color(0xFF00D4FF)),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: const BorderSide(color: AppTheme.borderLight),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: const BorderSide(color: Color(0xFF00D4FF), width: 2),
),
filled: true,
fillColor: AppTheme.backgroundLight,
),
validator: (value) {
if (value == null || value.trim().isEmpty) {
return 'Veuillez saisir votre nom complet';
}
if (value.trim().length < 2) {
return 'Le nom doit contenir au moins 2 caractères';
}
return null;
},
),
],
);
}
Widget _buildEmailField() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Email (optionnel)',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 8),
TextFormField(
controller: _emailController,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
hintText: 'votre.email@exemple.com',
prefixIcon: const Icon(Icons.email, color: Color(0xFF00D4FF)),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: const BorderSide(color: AppTheme.borderLight),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: const BorderSide(color: Color(0xFF00D4FF), width: 2),
),
filled: true,
fillColor: AppTheme.backgroundLight,
),
validator: (value) {
if (value != null && value.isNotEmpty) {
if (!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)) {
return 'Format d\'email invalide';
}
}
return null;
},
),
],
);
}
Widget _buildTermsCheckbox() {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Checkbox(
value: _termsAccepted,
onChanged: (value) {
setState(() {
_termsAccepted = value ?? false;
});
},
activeColor: const Color(0xFF00D4FF),
),
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
_termsAccepted = !_termsAccepted;
});
},
child: const Text(
'J\'accepte les conditions d\'utilisation de Wave Money et autorise le prélèvement du montant indiqué.',
style: TextStyle(
fontSize: 12,
color: AppTheme.textSecondary,
),
),
),
),
],
);
}
Widget _buildSecurityInfo() {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: const Color(0xFFF0F9FF),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: const Color(0xFF00D4FF).withOpacity(0.2)),
),
child: Column(
children: [
Row(
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: const Color(0xFF00D4FF).withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: const Icon(
Icons.security,
color: Color(0xFF00D4FF),
size: 20,
),
),
const SizedBox(width: 12),
const Expanded(
child: Text(
'Paiement 100% sécurisé',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary,
),
),
),
],
),
const SizedBox(height: 12),
const Text(
'• Chiffrement SSL/TLS de bout en bout\n'
'• Conformité aux standards PCI DSS\n'
'• Aucune donnée bancaire stockée\n'
'• Transaction instantanée et traçable',
style: TextStyle(
fontSize: 12,
color: AppTheme.textSecondary,
height: 1.4,
),
),
],
),
);
}
Widget _buildPaymentButton(CotisationsState state) {
final isLoading = state is PaymentInProgress || _isProcessing;
final canPay = _formKey.currentState?.validate() == true &&
_termsAccepted &&
_phoneController.text.isNotEmpty &&
!isLoading;
return SizedBox(
width: double.infinity,
child: PrimaryButton(
text: isLoading
? 'Traitement en cours...'
: 'Payer avec Wave Money',
icon: isLoading ? null : Icons.waves,
onPressed: canPay ? _processWavePayment : null,
isLoading: isLoading,
backgroundColor: const Color(0xFF00D4FF),
),
);
}
void _handleBlocState(BuildContext context, CotisationsState state) {
if (state is PaymentSuccess) {
_showPaymentSuccessDialog(state.payment);
} else if (state is PaymentFailure) {
_showPaymentErrorDialog(state.errorMessage);
}
}
void _processWavePayment() async {
if (!_formKey.currentState!.validate() || !_termsAccepted) {
return;
}
setState(() {
_isProcessing = true;
});
try {
final remainingAmount = widget.cotisation.montantDu - widget.cotisation.montantPaye;
// Initier le paiement Wave via le BLoC
_cotisationsBloc.add(InitiatePayment(
cotisationId: widget.cotisation.id,
montant: remainingAmount,
methodePaiement: 'WAVE',
numeroTelephone: _phoneController.text.trim(),
nomPayeur: _nameController.text.trim(),
emailPayeur: _emailController.text.trim().isEmpty
? null
: _emailController.text.trim(),
));
} catch (e) {
setState(() {
_isProcessing = false;
});
_showPaymentErrorDialog('Erreur lors de l\'initiation du paiement: $e');
}
}
void _showPaymentSuccessDialog(PaymentModel payment) {
showDialog(
context: context,
barrierDismissible: false,
builder: (context) => AlertDialog(
title: const Row(
children: [
Icon(Icons.check_circle, color: AppTheme.successColor, size: 28),
SizedBox(width: 8),
Text('Paiement réussi !'),
],
),
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Votre paiement de ${payment.montant.toStringAsFixed(0)} XOF a été confirmé.'),
const SizedBox(height: 12),
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: AppTheme.backgroundLight,
borderRadius: BorderRadius.circular(8),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Référence: ${payment.numeroReference}'),
Text('Transaction: ${payment.numeroTransaction ?? 'N/A'}'),
Text('Date: ${DateTime.now().toString().substring(0, 16)}'),
],
),
),
],
),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
Navigator.of(context).pop(); // Retour à la liste
},
child: const Text('Fermer'),
),
],
),
);
}
void _showPaymentErrorDialog(String errorMessage) {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Row(
children: [
Icon(Icons.error, color: AppTheme.errorColor, size: 28),
SizedBox(width: 8),
Text('Erreur de paiement'),
],
),
content: Text(errorMessage),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: const Text('OK'),
),
],
),
);
}
}