347 lines
12 KiB
Dart
347 lines
12 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
import 'package:intl/intl.dart';
|
|
import '../../../shared/services/api_client.dart';
|
|
|
|
final clientDetailProvider = FutureProvider.autoDispose
|
|
.family<Map<String, dynamic>, String>((ref, id) async {
|
|
final apiClient = ref.watch(apiClientProvider);
|
|
return apiClient.getClient(id);
|
|
});
|
|
|
|
class ClientDetailScreen extends ConsumerWidget {
|
|
final String clientId;
|
|
|
|
const ClientDetailScreen({super.key, required this.clientId});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final clientAsync = ref.watch(clientDetailProvider(clientId));
|
|
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
actions: [
|
|
IconButton(
|
|
icon: const Icon(Icons.edit),
|
|
onPressed: () => context.go('/clients/$clientId/edit'),
|
|
),
|
|
PopupMenuButton(
|
|
itemBuilder: (context) => [
|
|
const PopupMenuItem(
|
|
value: 'email',
|
|
child: ListTile(
|
|
leading: Icon(Icons.email),
|
|
title: Text('Generate Email'),
|
|
contentPadding: EdgeInsets.zero,
|
|
),
|
|
),
|
|
const PopupMenuItem(
|
|
value: 'contacted',
|
|
child: ListTile(
|
|
leading: Icon(Icons.check_circle),
|
|
title: Text('Mark Contacted'),
|
|
contentPadding: EdgeInsets.zero,
|
|
),
|
|
),
|
|
const PopupMenuItem(
|
|
value: 'delete',
|
|
child: ListTile(
|
|
leading: Icon(Icons.delete, color: Colors.red),
|
|
title: Text('Delete', style: TextStyle(color: Colors.red)),
|
|
contentPadding: EdgeInsets.zero,
|
|
),
|
|
),
|
|
],
|
|
onSelected: (value) async {
|
|
switch (value) {
|
|
case 'email':
|
|
context.go('/emails/compose?clientId=$clientId');
|
|
break;
|
|
case 'contacted':
|
|
await ref.read(apiClientProvider).markClientContacted(clientId);
|
|
ref.invalidate(clientDetailProvider(clientId));
|
|
break;
|
|
case 'delete':
|
|
final confirm = await showDialog<bool>(
|
|
context: context,
|
|
builder: (context) => AlertDialog(
|
|
title: const Text('Delete Client'),
|
|
content: const Text('Are you sure you want to delete this client?'),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () => Navigator.pop(context, false),
|
|
child: const Text('Cancel'),
|
|
),
|
|
TextButton(
|
|
onPressed: () => Navigator.pop(context, true),
|
|
style: TextButton.styleFrom(foregroundColor: Colors.red),
|
|
child: const Text('Delete'),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
if (confirm == true) {
|
|
await ref.read(apiClientProvider).deleteClient(clientId);
|
|
if (context.mounted) {
|
|
context.go('/');
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
},
|
|
),
|
|
],
|
|
),
|
|
body: clientAsync.when(
|
|
data: (client) => _ClientDetailContent(client: client),
|
|
loading: () => const Center(child: CircularProgressIndicator()),
|
|
error: (error, stack) => Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(Icons.error_outline, size: 64, color: Colors.red.shade300),
|
|
const SizedBox(height: 16),
|
|
const Text('Failed to load client'),
|
|
TextButton(
|
|
onPressed: () => ref.invalidate(clientDetailProvider(clientId)),
|
|
child: const Text('Retry'),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _ClientDetailContent extends StatelessWidget {
|
|
final Map<String, dynamic> client;
|
|
|
|
const _ClientDetailContent({required this.client});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final name = '${client['firstName']} ${client['lastName']}';
|
|
final dateFormat = DateFormat.yMMMd();
|
|
|
|
return SingleChildScrollView(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Header
|
|
Center(
|
|
child: Column(
|
|
children: [
|
|
CircleAvatar(
|
|
radius: 48,
|
|
backgroundColor: Theme.of(context).colorScheme.primaryContainer,
|
|
child: Text(
|
|
'${client['firstName'][0]}${client['lastName'][0]}',
|
|
style: TextStyle(
|
|
fontSize: 32,
|
|
color: Theme.of(context).colorScheme.onPrimaryContainer,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
Text(
|
|
name,
|
|
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
if (client['company'] != null) ...[
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
'${client['role'] ?? ''} ${client['role'] != null && client['company'] != null ? 'at ' : ''}${client['company'] ?? ''}'.trim(),
|
|
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
|
|
color: Colors.grey,
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: 32),
|
|
|
|
// Contact info
|
|
_Section(
|
|
title: 'Contact',
|
|
children: [
|
|
if (client['email'] != null)
|
|
_InfoRow(icon: Icons.email, label: 'Email', value: client['email']),
|
|
if (client['phone'] != null)
|
|
_InfoRow(icon: Icons.phone, label: 'Phone', value: client['phone']),
|
|
if (client['city'] != null || client['state'] != null)
|
|
_InfoRow(
|
|
icon: Icons.location_on,
|
|
label: 'Location',
|
|
value: [client['city'], client['state']].where((e) => e != null).join(', '),
|
|
),
|
|
],
|
|
),
|
|
|
|
// Personal info
|
|
if (client['birthday'] != null || client['anniversary'] != null ||
|
|
(client['interests'] as List?)?.isNotEmpty == true)
|
|
_Section(
|
|
title: 'Personal',
|
|
children: [
|
|
if (client['birthday'] != null)
|
|
_InfoRow(
|
|
icon: Icons.cake,
|
|
label: 'Birthday',
|
|
value: dateFormat.format(DateTime.parse(client['birthday'])),
|
|
),
|
|
if (client['anniversary'] != null)
|
|
_InfoRow(
|
|
icon: Icons.favorite,
|
|
label: 'Anniversary',
|
|
value: dateFormat.format(DateTime.parse(client['anniversary'])),
|
|
),
|
|
if ((client['interests'] as List?)?.isNotEmpty == true) ...[
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
'Interests',
|
|
style: Theme.of(context).textTheme.labelLarge?.copyWith(
|
|
color: Colors.grey,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Wrap(
|
|
spacing: 8,
|
|
runSpacing: 8,
|
|
children: (client['interests'] as List).cast<String>().map((interest) =>
|
|
Chip(label: Text(interest)),
|
|
).toList(),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
|
|
// Family
|
|
if (client['family'] != null &&
|
|
(client['family']['spouse'] != null ||
|
|
(client['family']['children'] as List?)?.isNotEmpty == true))
|
|
_Section(
|
|
title: 'Family',
|
|
children: [
|
|
if (client['family']['spouse'] != null)
|
|
_InfoRow(
|
|
icon: Icons.person,
|
|
label: 'Spouse',
|
|
value: client['family']['spouse'],
|
|
),
|
|
if ((client['family']['children'] as List?)?.isNotEmpty == true)
|
|
_InfoRow(
|
|
icon: Icons.child_care,
|
|
label: 'Children',
|
|
value: (client['family']['children'] as List).join(', '),
|
|
),
|
|
],
|
|
),
|
|
|
|
// Notes
|
|
if (client['notes'] != null && client['notes'].toString().isNotEmpty)
|
|
_Section(
|
|
title: 'Notes',
|
|
children: [
|
|
Text(client['notes']),
|
|
],
|
|
),
|
|
|
|
// Tags
|
|
if ((client['tags'] as List?)?.isNotEmpty == true)
|
|
_Section(
|
|
title: 'Tags',
|
|
children: [
|
|
Wrap(
|
|
spacing: 8,
|
|
runSpacing: 8,
|
|
children: (client['tags'] as List).cast<String>().map((tag) =>
|
|
Chip(
|
|
label: Text(tag),
|
|
backgroundColor: Theme.of(context).colorScheme.secondaryContainer,
|
|
),
|
|
).toList(),
|
|
),
|
|
],
|
|
),
|
|
|
|
// Last contacted
|
|
if (client['lastContactedAt'] != null)
|
|
Padding(
|
|
padding: const EdgeInsets.only(top: 16),
|
|
child: Text(
|
|
'Last contacted: ${dateFormat.format(DateTime.parse(client['lastContactedAt']))}',
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Colors.grey,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _Section extends StatelessWidget {
|
|
final String title;
|
|
final List<Widget> children;
|
|
|
|
const _Section({required this.title, required this.children});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
if (children.isEmpty) return const SizedBox.shrink();
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.only(bottom: 24),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
title,
|
|
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
...children,
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _InfoRow extends StatelessWidget {
|
|
final IconData icon;
|
|
final String label;
|
|
final String value;
|
|
|
|
const _InfoRow({
|
|
required this.icon,
|
|
required this.label,
|
|
required this.value,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 4),
|
|
child: Row(
|
|
children: [
|
|
Icon(icon, size: 20, color: Colors.grey),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Text(value),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|