418 lines
13 KiB
Dart
418 lines
13 KiB
Dart
import 'package:flutter/material.dart';
|
|
import '../../../../core/models/cotisation_model.dart';
|
|
import '../../../../shared/theme/app_theme.dart';
|
|
|
|
/// Widget d'affichage de la timeline d'une cotisation
|
|
class CotisationTimelineWidget extends StatefulWidget {
|
|
final CotisationModel cotisation;
|
|
|
|
const CotisationTimelineWidget({
|
|
super.key,
|
|
required this.cotisation,
|
|
});
|
|
|
|
@override
|
|
State<CotisationTimelineWidget> createState() => _CotisationTimelineWidgetState();
|
|
}
|
|
|
|
class _CotisationTimelineWidgetState extends State<CotisationTimelineWidget>
|
|
with TickerProviderStateMixin {
|
|
late final AnimationController _animationController;
|
|
late final List<Animation<double>> _itemAnimations;
|
|
|
|
List<TimelineEvent> _timelineEvents = [];
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_generateTimelineEvents();
|
|
|
|
_animationController = AnimationController(
|
|
duration: Duration(milliseconds: 300 * _timelineEvents.length),
|
|
vsync: this,
|
|
);
|
|
|
|
_itemAnimations = List.generate(
|
|
_timelineEvents.length,
|
|
(index) => Tween<double>(begin: 0.0, end: 1.0).animate(
|
|
CurvedAnimation(
|
|
parent: _animationController,
|
|
curve: Interval(
|
|
index / _timelineEvents.length,
|
|
(index + 1) / _timelineEvents.length,
|
|
curve: Curves.easeOutCubic,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
|
|
_animationController.forward();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_animationController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _generateTimelineEvents() {
|
|
_timelineEvents = [
|
|
TimelineEvent(
|
|
title: 'Cotisation créée',
|
|
description: 'Cotisation ${widget.cotisation.typeCotisation} créée pour ${widget.cotisation.nomMembre}',
|
|
date: widget.cotisation.dateCreation,
|
|
icon: Icons.add_circle,
|
|
color: AppTheme.primaryColor,
|
|
isCompleted: true,
|
|
),
|
|
];
|
|
|
|
// Ajouter l'événement d'échéance
|
|
final now = DateTime.now();
|
|
final isOverdue = widget.cotisation.dateEcheance.isBefore(now);
|
|
|
|
_timelineEvents.add(
|
|
TimelineEvent(
|
|
title: isOverdue ? 'Échéance dépassée' : 'Échéance prévue',
|
|
description: 'Date limite de paiement: ${_formatDate(widget.cotisation.dateEcheance)}',
|
|
date: widget.cotisation.dateEcheance,
|
|
icon: isOverdue ? Icons.warning : Icons.schedule,
|
|
color: isOverdue ? AppTheme.errorColor : AppTheme.warningColor,
|
|
isCompleted: isOverdue,
|
|
isWarning: isOverdue,
|
|
),
|
|
);
|
|
|
|
// Ajouter les événements de paiement (simulés)
|
|
if (widget.cotisation.montantPaye > 0) {
|
|
_timelineEvents.add(
|
|
TimelineEvent(
|
|
title: 'Paiement partiel reçu',
|
|
description: 'Montant: ${widget.cotisation.montantPaye.toStringAsFixed(0)} XOF',
|
|
date: widget.cotisation.dateCreation.add(const Duration(days: 5)), // Simulé
|
|
icon: Icons.payment,
|
|
color: AppTheme.successColor,
|
|
isCompleted: true,
|
|
),
|
|
);
|
|
}
|
|
|
|
if (widget.cotisation.isEntierementPayee) {
|
|
_timelineEvents.add(
|
|
TimelineEvent(
|
|
title: 'Paiement complet',
|
|
description: 'Cotisation entièrement payée',
|
|
date: widget.cotisation.dateCreation.add(const Duration(days: 10)), // Simulé
|
|
icon: Icons.check_circle,
|
|
color: AppTheme.successColor,
|
|
isCompleted: true,
|
|
isSuccess: true,
|
|
),
|
|
);
|
|
} else {
|
|
// Ajouter les événements futurs
|
|
if (!isOverdue) {
|
|
_timelineEvents.add(
|
|
TimelineEvent(
|
|
title: 'Rappel automatique',
|
|
description: 'Rappel envoyé 3 jours avant l\'échéance',
|
|
date: widget.cotisation.dateEcheance.subtract(const Duration(days: 3)),
|
|
icon: Icons.notifications,
|
|
color: AppTheme.infoColor,
|
|
isCompleted: false,
|
|
isFuture: true,
|
|
),
|
|
);
|
|
}
|
|
|
|
_timelineEvents.add(
|
|
TimelineEvent(
|
|
title: 'Paiement en attente',
|
|
description: 'En attente du paiement complet',
|
|
date: DateTime.now(),
|
|
icon: Icons.hourglass_empty,
|
|
color: AppTheme.textSecondary,
|
|
isCompleted: false,
|
|
isFuture: true,
|
|
),
|
|
);
|
|
}
|
|
|
|
// Trier par date
|
|
_timelineEvents.sort((a, b) => a.date.compareTo(b.date));
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
if (_timelineEvents.isEmpty) {
|
|
return const Center(
|
|
child: Text(
|
|
'Aucun historique disponible',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
color: AppTheme.textSecondary,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'Historique de la cotisation',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
color: AppTheme.textPrimary,
|
|
),
|
|
),
|
|
const SizedBox(height: 20),
|
|
|
|
Expanded(
|
|
child: ListView.builder(
|
|
itemCount: _timelineEvents.length,
|
|
itemBuilder: (context, index) {
|
|
return AnimatedBuilder(
|
|
animation: _itemAnimations[index],
|
|
builder: (context, child) {
|
|
return Transform.translate(
|
|
offset: Offset(
|
|
0,
|
|
50 * (1 - _itemAnimations[index].value),
|
|
),
|
|
child: Opacity(
|
|
opacity: _itemAnimations[index].value,
|
|
child: _buildTimelineItem(
|
|
_timelineEvents[index],
|
|
index,
|
|
index == _timelineEvents.length - 1,
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildTimelineItem(TimelineEvent event, int index, bool isLast) {
|
|
return Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Timeline indicator
|
|
Column(
|
|
children: [
|
|
Container(
|
|
width: 40,
|
|
height: 40,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: event.isCompleted
|
|
? event.color
|
|
: event.color.withOpacity(0.2),
|
|
border: Border.all(
|
|
color: event.color,
|
|
width: event.isCompleted ? 0 : 2,
|
|
),
|
|
),
|
|
child: Icon(
|
|
event.icon,
|
|
size: 20,
|
|
color: event.isCompleted
|
|
? Colors.white
|
|
: event.color,
|
|
),
|
|
),
|
|
if (!isLast)
|
|
Container(
|
|
width: 2,
|
|
height: 60,
|
|
color: event.isCompleted
|
|
? event.color.withOpacity(0.3)
|
|
: AppTheme.borderLight,
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(width: 16),
|
|
|
|
// Event content
|
|
Expanded(
|
|
child: Container(
|
|
margin: const EdgeInsets.only(bottom: 20),
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: _getEventBackgroundColor(event),
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color: event.color.withOpacity(0.2),
|
|
),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Expanded(
|
|
child: Text(
|
|
event.title,
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
color: event.isCompleted
|
|
? AppTheme.textPrimary
|
|
: AppTheme.textSecondary,
|
|
),
|
|
),
|
|
),
|
|
if (event.isSuccess)
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 8,
|
|
vertical: 4,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.successColor.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: const Text(
|
|
'Terminé',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppTheme.successColor,
|
|
),
|
|
),
|
|
),
|
|
if (event.isWarning)
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 8,
|
|
vertical: 4,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.errorColor.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: const Text(
|
|
'En retard',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppTheme.errorColor,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
event.description,
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
color: event.isCompleted
|
|
? AppTheme.textSecondary
|
|
: AppTheme.textHint,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
Icons.access_time,
|
|
size: 16,
|
|
color: AppTheme.textHint,
|
|
),
|
|
const SizedBox(width: 4),
|
|
Text(
|
|
_formatDateTime(event.date),
|
|
style: const TextStyle(
|
|
fontSize: 12,
|
|
color: AppTheme.textHint,
|
|
),
|
|
),
|
|
if (event.isFuture) ...[
|
|
const SizedBox(width: 8),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 6,
|
|
vertical: 2,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.infoColor.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: const Text(
|
|
'À venir',
|
|
style: TextStyle(
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppTheme.infoColor,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Color _getEventBackgroundColor(TimelineEvent event) {
|
|
if (event.isSuccess) {
|
|
return AppTheme.successColor.withOpacity(0.05);
|
|
}
|
|
if (event.isWarning) {
|
|
return AppTheme.errorColor.withOpacity(0.05);
|
|
}
|
|
if (event.isFuture) {
|
|
return AppTheme.infoColor.withOpacity(0.05);
|
|
}
|
|
return Colors.white;
|
|
}
|
|
|
|
String _formatDate(DateTime date) {
|
|
return '${date.day.toString().padLeft(2, '0')}/${date.month.toString().padLeft(2, '0')}/${date.year}';
|
|
}
|
|
|
|
String _formatDateTime(DateTime date) {
|
|
return '${_formatDate(date)} à ${date.hour.toString().padLeft(2, '0')}:${date.minute.toString().padLeft(2, '0')}';
|
|
}
|
|
}
|
|
|
|
/// Modèle pour les événements de la timeline
|
|
class TimelineEvent {
|
|
final String title;
|
|
final String description;
|
|
final DateTime date;
|
|
final IconData icon;
|
|
final Color color;
|
|
final bool isCompleted;
|
|
final bool isSuccess;
|
|
final bool isWarning;
|
|
final bool isFuture;
|
|
|
|
TimelineEvent({
|
|
required this.title,
|
|
required this.description,
|
|
required this.date,
|
|
required this.icon,
|
|
required this.color,
|
|
this.isCompleted = false,
|
|
this.isSuccess = false,
|
|
this.isWarning = false,
|
|
this.isFuture = false,
|
|
});
|
|
}
|