vusakhoza/velocity-pay-flutter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

completed group batch feature

Browse Source
This commit is contained in:
Vusumuzi Khoza
2026-06-08 09:17:36 +02:00
parent 2dd790fe6e
commit fc616d6316
46 changed files with 4610 additions and 2669 deletions
Download Patch File Download Diff File Expand all files Collapse all files

732
lib/screens/groups/group_detail_screen.dart
View File

@@ -5,7 +5,9 @@ import 'package:qpay/screens/groups/models/recipient_group_model.dart';
import 'package:qpay/models/responsive_policy.dart';
import 'package:qpay/screens/groups/controllers/batch_controller.dart';
import 'package:qpay/screens/groups/controllers/group_controller.dart';
import 'package:qpay/screens/recipient/recipients_controller.dart';
import 'package:qpay/widgets/status_chip_widget.dart';
import 'package:skeletonizer/skeletonizer.dart';
class GroupDetailScreen extends StatefulWidget {
final RecipientGroup group;
@@ -16,11 +18,15 @@ class GroupDetailScreen extends StatefulWidget {
State<GroupDetailScreen> createState() => _GroupDetailScreenState();
}
class _GroupDetailScreenState extends State<GroupDetailScreen> {
class _GroupDetailScreenState extends State<GroupDetailScreen>
with TickerProviderStateMixin {
late GroupController groupController;
late BatchController batchController;
final _searchController = TextEditingController();
final _scrollController = ScrollController();
final _memberSearchController = TextEditingController();
late final AnimationController _membersAnimController;
String _memberQuery = '';
String? _statusFilter;
String? _currencyFilter;
@@ -50,6 +56,10 @@ class _GroupDetailScreenState extends State<GroupDetailScreen> {
_loadData();
_scrollController.addListener(_onScroll);
_searchController.addListener(() => setState(() {}));
_membersAnimController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 600),
)..forward();
}
void _onScroll() {
@@ -77,140 +87,631 @@ class _GroupDetailScreenState extends State<GroupDetailScreen> {
}
void _showMembersSheet() {
_memberSearchController.clear();
_memberQuery = '';
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Theme.of(context).colorScheme.surface,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
),
builder: (ctx) => DraggableScrollableSheet(
initialChildSize: 0.6,
minChildSize: 0.3,
maxChildSize: 0.85,
expand: false,
builder: (context, scrollController) {
return Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
builder: (ctx) {
return DraggableScrollableSheet(
initialChildSize: 0.7,
minChildSize: 0.4,
maxChildSize: 0.92,
expand: false,
builder: (context, scrollController) {
return StatefulBuilder(
builder: (context, setSheetState) {
return Column(
children: [
_buildMembersSheetHandle(),
_buildMembersSheetHeader(
setSheetState,
scrollController,
),
Expanded(
child: ListenableBuilder(
listenable: groupController,
builder: (context, _) {
final allMembers = groupController.model.members;
final filtered = _filteredMembers(allMembers);
if (groupController.model.isLoading) {
return _buildMembersSkeletonList(
scrollController,
);
}
if (allMembers.isEmpty) {
return _buildMembersEmptyState();
}
if (filtered.isEmpty) {
return _buildNoSearchResultsState();
}
return ListView.separated(
controller: scrollController,
padding: const EdgeInsets.fromLTRB(16, 8, 16, 24),
itemCount: filtered.length,
separatorBuilder: (_, __) =>
const SizedBox(height: 10),
itemBuilder: (context, index) {
return _buildAnimatedMemberCard(
index,
filtered[index],
);
},
);
},
),
),
],
);
},
);
},
);
},
);
}
Widget _buildMembersSheetHandle() {
return Padding(
padding: const EdgeInsets.only(top: 10, bottom: 6),
child: Container(
width: 44,
height: 5,
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(10),
),
),
);
}
Widget _buildMembersSheetHeader(
StateSetter setSheetState,
ScrollController scrollController,
) {
final total = groupController.model.members.length;
return Padding(
padding: const EdgeInsets.fromLTRB(20, 4, 12, 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: Theme.of(context)
.colorScheme
.primary
.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(12),
),
child: Icon(
Icons.people_alt_outlined,
color: Theme.of(context).colorScheme.primary,
size: 22,
),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Members',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
fontWeight: FontWeight.w700,
color: Colors.black87,
),
),
const Spacer(),
IconButton(
icon: const Icon(Icons.close),
onPressed: () => Navigator.of(context).pop(),
const SizedBox(height: 2),
Text(
'$total ${total == 1 ? "member" : "members"} in this group',
style: TextStyle(
fontSize: 13,
color: Colors.grey.shade600,
),
),
],
),
const SizedBox(height: 4),
Text(
'${groupController.model.members.length} member(s)',
style: TextStyle(fontSize: 14, color: Colors.grey.shade600),
),
IconButton(
icon: Icon(Icons.close, color: Colors.grey.shade700),
tooltip: 'Close',
onPressed: () => Navigator.of(context).pop(),
),
],
),
if (total > 0) ...[
const SizedBox(height: 14),
TextFormField(
controller: _memberSearchController,
onChanged: (v) {
setSheetState(() => _memberQuery = v);
},
decoration: InputDecoration(
hintText: 'Search members...',
hintStyle: TextStyle(
color: Colors.grey.shade500,
fontSize: 14,
),
const SizedBox(height: 12),
const Divider(),
Expanded(
child: ListenableBuilder(
listenable: groupController,
builder: (context, _) {
if (groupController.model.isLoading) {
return const Center(child: CircularProgressIndicator());
}
if (groupController.model.members.isEmpty) {
return Center(
child: Padding(
padding: const EdgeInsets.all(32),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.person_outline,
size: 48,
color: Colors.grey.shade400,
),
const SizedBox(height: 16),
const Text(
'No members found.',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
],
),
),
);
}
return ListView.separated(
controller: scrollController,
itemCount: groupController.model.members.length,
separatorBuilder: (_, __) => const Divider(height: 1),
itemBuilder: (context, index) {
final member = groupController.model.members[index];
return ListTile(
contentPadding: const EdgeInsets.symmetric(
vertical: 2,
horizontal: 4,
),
leading: CircleAvatar(
backgroundColor: Theme.of(
context,
).colorScheme.primary.withAlpha(30),
child: Text(
member.recipient.name?.isNotEmpty == true
? member.recipient.name![0].toUpperCase()
: '?',
style: TextStyle(
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.w600,
),
),
),
title: Text(
member.recipient.name ?? '',
style: const TextStyle(
fontWeight: FontWeight.w500,
),
),
subtitle: Text(member.recipient.account ?? ''),
trailing:
member.recipient.latestProviderLabel != null &&
member
.recipient
.latestProviderLabel!
.isNotEmpty
? Chip(
label: Text(
member.recipient.latestProviderLabel!,
style: const TextStyle(fontSize: 11),
),
visualDensity: VisualDensity.compact,
)
: null,
);
prefixIcon: Icon(
Icons.search,
color: Colors.grey.shade600,
size: 20,
),
suffixIcon: _memberQuery.isNotEmpty
? IconButton(
icon: Icon(
Icons.clear,
color: Colors.grey.shade600,
size: 18,
),
onPressed: () {
_memberSearchController.clear();
setSheetState(() => _memberQuery = '');
},
);
},
)
: null,
isDense: true,
contentPadding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 12,
),
filled: true,
fillColor: Colors.grey.shade100,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: Theme.of(context).colorScheme.primary,
),
),
],
),
),
);
},
],
],
),
);
}
List<RecipientGroupMember> _filteredMembers(
List<RecipientGroupMember> members,
) {
if (_memberQuery.trim().isEmpty) return members;
final q = _memberQuery.toLowerCase().trim();
return members.where((m) {
final r = m.recipient;
return (r.name?.toLowerCase().contains(q) ?? false) ||
(r.account?.toLowerCase().contains(q) ?? false) ||
(r.email?.toLowerCase().contains(q) ?? false) ||
(r.phoneNumber?.toLowerCase().contains(q) ?? false) ||
(r.latestProviderLabel?.toLowerCase().contains(q) ?? false);
}).toList();
}
Widget _buildAnimatedMemberCard(int index, RecipientGroupMember member) {
final clampedIndex = index.clamp(0, 5);
final animation = Tween<Offset>(
begin: const Offset(0, 0.06),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: _membersAnimController,
curve: Interval(
0.05 * clampedIndex,
1.0,
curve: Curves.easeOutCubic,
),
),
);
return FadeTransition(
opacity: _membersAnimController,
child: SlideTransition(
position: animation,
child: _buildMemberCard(member),
),
);
}
Widget _buildMemberCard(RecipientGroupMember member) {
final recipient = member.recipient;
final name = recipient.name?.isNotEmpty == true
? recipient.name!
: 'Unnamed recipient';
final initials = _initialsFor(name);
return Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.circular(16),
onTap: () {
Navigator.of(context).pop();
},
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.grey.shade200, width: 1),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.04),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 14,
horizontal: 14,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildMemberAvatar(initials),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black87,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 6),
_buildMemberSubtitleRow(recipient, member.account),
if (recipient.phoneNumber != null &&
recipient.phoneNumber!.isNotEmpty) ...[
const SizedBox(height: 6),
_buildContactLine(
Icons.phone_outlined,
recipient.phoneNumber!,
),
],
if (recipient.email != null &&
recipient.email!.isNotEmpty) ...[
const SizedBox(height: 4),
_buildContactLine(
Icons.email_outlined,
recipient.email!,
),
],
],
),
),
_buildMemberPopupMenu(member),
],
),
),
),
),
);
}
Widget _buildMemberAvatar(String initials) {
return Container(
width: 48,
height: 48,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Theme.of(context).colorScheme.primary,
Theme.of(context)
.colorScheme
.primary
.withValues(alpha: 0.7),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Theme.of(context)
.colorScheme
.primary
.withValues(alpha: 0.25),
blurRadius: 6,
offset: const Offset(0, 2),
),
],
),
alignment: Alignment.center,
child: Text(
initials,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
letterSpacing: 0.5,
),
),
);
}
Widget _buildMemberSubtitleRow(
Recipient recipient,
String? memberAccount,
) {
final account = memberAccount?.isNotEmpty == true
? memberAccount
: recipient.account;
final hasAccount = account != null && account.isNotEmpty;
final hasProvider = recipient.latestProviderLabel != null &&
recipient.latestProviderLabel!.isNotEmpty;
if (!hasAccount && !hasProvider) {
return const SizedBox.shrink();
}
return Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
spacing: 6,
runSpacing: 4,
children: [
if (hasProvider)
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 2,
),
decoration: BoxDecoration(
color: Theme.of(context)
.colorScheme
.primary
.withValues(alpha: 0.08),
borderRadius: BorderRadius.circular(6),
),
child: Text(
recipient.latestProviderLabel!,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: Theme.of(context).colorScheme.primary,
),
),
),
if (hasAccount)
Text(
account!,
style: TextStyle(
fontSize: 13,
color: Colors.grey.shade700,
fontWeight: FontWeight.w500,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
);
}
Widget _buildContactLine(IconData icon, String text) {
return Row(
children: [
Icon(icon, size: 13, color: Colors.grey.shade500),
const SizedBox(width: 4),
Flexible(
child: Text(
text,
style: TextStyle(
fontSize: 12,
color: Colors.grey.shade600,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
);
}
Widget _buildMemberPopupMenu(RecipientGroupMember member) {
return PopupMenuButton<String>(
icon: Icon(
Icons.more_vert,
color: Colors.grey.shade500,
size: 20,
),
padding: EdgeInsets.zero,
splashRadius: 20,
tooltip: 'More options',
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
onSelected: (value) async {
if (value == 'remove') {
await _confirmRemoveMember(member);
}
},
itemBuilder: (context) => [
const PopupMenuItem(
value: 'remove',
child: Row(
children: [
Icon(Icons.person_remove_outlined,
size: 18, color: Colors.red),
SizedBox(width: 10),
Text(
'Remove from group',
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.w500,
),
),
],
),
),
],
);
}
Future<void> _confirmRemoveMember(RecipientGroupMember member) async {
final name = member.recipient.name ?? 'this member';
final confirmed = await showDialog<bool>(
context: context,
builder: (ctx) => AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
title: const Text('Remove member'),
content: Text('Are you sure you want to remove $name from this group?'),
actions: [
TextButton(
onPressed: () => Navigator.of(ctx).pop(false),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => Navigator.of(ctx).pop(true),
style: TextButton.styleFrom(foregroundColor: Colors.red),
child: const Text('Remove'),
),
],
),
);
if (confirmed == true && mounted) {
await groupController.removeMember(
groupId: widget.group.id ?? '',
recipientId: member.id ?? '',
userId: widget.group.userId ?? '',
);
}
}
Widget _buildMembersSkeletonList(ScrollController scrollController) {
return ListView.separated(
controller: scrollController,
padding: const EdgeInsets.fromLTRB(16, 8, 16, 24),
itemCount: 6,
separatorBuilder: (_, __) => const SizedBox(height: 10),
itemBuilder: (context, index) {
return Skeletonizer(
enabled: true,
child: _buildMemberCard(
RecipientGroupMember(
recipientGroupId: '',
recipient: Recipient(
name: 'Loading Name Here',
account: '0000000000',
phoneNumber: '+000 000 0000',
email: 'loading@example.com',
latestProviderLabel: 'PROVIDER',
),
),
),
);
},
);
}
Widget _buildMembersEmptyState() {
return Center(
child: Padding(
padding: const EdgeInsets.all(32),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 88,
height: 88,
decoration: BoxDecoration(
color: Theme.of(context)
.colorScheme
.primary
.withValues(alpha: 0.08),
shape: BoxShape.circle,
),
child: Icon(
Icons.people_alt_outlined,
size: 44,
color: Theme.of(context).colorScheme.primary,
),
),
const SizedBox(height: 20),
const Text(
'No members yet',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
color: Colors.black87,
),
),
const SizedBox(height: 8),
Text(
'Members added to this group will appear\nhere once they are available.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
color: Colors.grey.shade600,
height: 1.4,
),
),
],
),
),
);
}
Widget _buildNoSearchResultsState() {
return Center(
child: Padding(
padding: const EdgeInsets.all(32),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.search_off_outlined,
size: 56,
color: Colors.grey.shade400,
),
const SizedBox(height: 16),
const Text(
'No matching members',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black87,
),
),
const SizedBox(height: 6),
Text(
'No results for "$_memberQuery"',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 13,
color: Colors.grey.shade600,
),
),
],
),
),
);
}
String _initialsFor(String name) {
final cleaned = name.trim();
if (cleaned.isEmpty) return '?';
final parts = cleaned.split(RegExp(r'\s+'));
if (parts.length == 1) {
return parts.first.characters.first.toUpperCase();
}
return (parts.first.characters.first + parts.last.characters.first)
.toUpperCase();
}
void _onDeleteSelected() async {
final userId = widget.group.userId ?? '';
final count = batchController.model.selectedBatchIds.length;
@@ -352,6 +853,8 @@ class _GroupDetailScreenState extends State<GroupDetailScreen> {
void dispose() {
_searchController.dispose();
_scrollController.dispose();
_memberSearchController.dispose();
_membersAnimController.dispose();
groupController.dispose();
batchController.dispose();
super.dispose();
@@ -468,6 +971,13 @@ class _GroupDetailScreenState extends State<GroupDetailScreen> {
onPressed: () => batchController.toggleSelectMode(),
),
const SizedBox(width: 8),
_buildIconButton(
icon: Icons.refresh,
tooltip: 'Refresh batches',
isActive: false,
onPressed: _loadData,
),
const SizedBox(width: 8),
_buildIconButton(
icon: Icons.add,
tooltip: 'Create batch',