add dashboard to phone app
This commit is contained in:
root
@@ -0,0 +1,341 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import '../providers/dashboard_providers.dart';
|
||||
import '../../../widgets/error_view.dart';
|
||||
import '../../../core/providers/auth_provider.dart';
|
||||
|
||||
class TeamScreen extends ConsumerWidget {
|
||||
const TeamScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final async = ref.watch(teamProvider);
|
||||
final myRole = ref.watch(authProvider).employee?.role ?? '';
|
||||
final isOwner = myRole == 'OWNER';
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: const Text('Team')),
|
||||
floatingActionButton: isOwner
|
||||
? FloatingActionButton.extended(
|
||||
onPressed: () async {
|
||||
final invited = await showModalBottomSheet<bool>(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
useSafeArea: true,
|
||||
builder: (_) => const _InviteSheet(),
|
||||
);
|
||||
if (invited == true) ref.invalidate(teamProvider);
|
||||
},
|
||||
icon: const Icon(Icons.person_add_outlined),
|
||||
label: const Text('Invite'),
|
||||
)
|
||||
: null,
|
||||
body: async.when(
|
||||
loading: () => const Center(child: CircularProgressIndicator()),
|
||||
error: (e, _) => ErrorView(
|
||||
message: 'Failed to load team',
|
||||
onRetry: () => ref.invalidate(teamProvider),
|
||||
),
|
||||
data: (members) {
|
||||
if (members.isEmpty) {
|
||||
return const Center(
|
||||
child: Text('No team members',
|
||||
style: TextStyle(color: Color(0xFF9CA3AF))),
|
||||
);
|
||||
}
|
||||
return RefreshIndicator(
|
||||
onRefresh: () async => ref.invalidate(teamProvider),
|
||||
child: ListView.separated(
|
||||
padding:
|
||||
const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
itemCount: members.length,
|
||||
separatorBuilder: (_, _) => const SizedBox(height: 8),
|
||||
itemBuilder: (_, i) => _MemberCard(
|
||||
member: members[i],
|
||||
isOwner: isOwner,
|
||||
onDeactivate: () async {
|
||||
await ref
|
||||
.read(teamServiceProvider)
|
||||
.deactivateMember(members[i].id);
|
||||
ref.invalidate(teamProvider);
|
||||
},
|
||||
onReactivate: () async {
|
||||
await ref
|
||||
.read(teamServiceProvider)
|
||||
.reactivateMember(members[i].id);
|
||||
ref.invalidate(teamProvider);
|
||||
},
|
||||
onRoleChange: (role) async {
|
||||
await ref
|
||||
.read(teamServiceProvider)
|
||||
.updateRole(members[i].id, role);
|
||||
ref.invalidate(teamProvider);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _MemberCard extends StatelessWidget {
|
||||
final dynamic member;
|
||||
final bool isOwner;
|
||||
final VoidCallback onDeactivate;
|
||||
final VoidCallback onReactivate;
|
||||
final ValueChanged<String> onRoleChange;
|
||||
|
||||
const _MemberCard({
|
||||
required this.member,
|
||||
required this.isOwner,
|
||||
required this.onDeactivate,
|
||||
required this.onReactivate,
|
||||
required this.onRoleChange,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isActive = member.isActive as bool;
|
||||
final role = member.role as String;
|
||||
|
||||
return Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(14),
|
||||
child: Row(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
backgroundColor: isActive
|
||||
? const Color(0xFFE1EFFE)
|
||||
: const Color(0xFFF3F4F6),
|
||||
radius: 22,
|
||||
child: Text(
|
||||
(member.firstName as String)
|
||||
.substring(0, 1)
|
||||
.toUpperCase(),
|
||||
style: TextStyle(
|
||||
color: isActive
|
||||
? const Color(0xFF1A56DB)
|
||||
: const Color(0xFF9CA3AF),
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Text(
|
||||
member.fullName as String,
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: isActive ? null : const Color(0xFF9CA3AF),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
_RoleBadge(role: role),
|
||||
],
|
||||
),
|
||||
Text(
|
||||
member.email as String,
|
||||
style: const TextStyle(
|
||||
fontSize: 12, color: Color(0xFF6B7280)),
|
||||
),
|
||||
if (!isActive)
|
||||
const Text(
|
||||
'Inactive',
|
||||
style: TextStyle(
|
||||
fontSize: 11, color: Color(0xFF9CA3AF)),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (isOwner && role != 'OWNER')
|
||||
PopupMenuButton<String>(
|
||||
onSelected: (v) {
|
||||
if (v == 'deactivate') onDeactivate();
|
||||
if (v == 'reactivate') onReactivate();
|
||||
if (v == 'MANAGER' || v == 'AGENT') onRoleChange(v);
|
||||
},
|
||||
itemBuilder: (_) => [
|
||||
if (role != 'MANAGER')
|
||||
const PopupMenuItem(
|
||||
value: 'MANAGER', child: Text('Make Manager')),
|
||||
if (role != 'AGENT')
|
||||
const PopupMenuItem(
|
||||
value: 'AGENT', child: Text('Make Agent')),
|
||||
const PopupMenuDivider(),
|
||||
if (isActive)
|
||||
const PopupMenuItem(
|
||||
value: 'deactivate',
|
||||
child: Text('Deactivate',
|
||||
style: TextStyle(color: Color(0xFFE02424))),
|
||||
)
|
||||
else
|
||||
const PopupMenuItem(
|
||||
value: 'reactivate',
|
||||
child: Text('Reactivate',
|
||||
style: TextStyle(color: Color(0xFF0E9F6E))),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _RoleBadge extends StatelessWidget {
|
||||
final String role;
|
||||
|
||||
const _RoleBadge({required this.role});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = {
|
||||
'OWNER': (const Color(0xFFFFF3CD), const Color(0xFF92400E)),
|
||||
'MANAGER': (const Color(0xFFE1EFFE), const Color(0xFF1E40AF)),
|
||||
'AGENT': (const Color(0xFFF3F4F6), const Color(0xFF374151)),
|
||||
};
|
||||
final (bg, fg) = colors[role] ?? (const Color(0xFFF3F4F6), const Color(0xFF374151));
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 2),
|
||||
decoration:
|
||||
BoxDecoration(color: bg, borderRadius: BorderRadius.circular(4)),
|
||||
child: Text(role,
|
||||
style: TextStyle(
|
||||
fontSize: 10, color: fg, fontWeight: FontWeight.w600)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _InviteSheet extends ConsumerStatefulWidget {
|
||||
const _InviteSheet();
|
||||
|
||||
@override
|
||||
ConsumerState<_InviteSheet> createState() => _InviteSheetState();
|
||||
}
|
||||
|
||||
class _InviteSheetState extends ConsumerState<_InviteSheet> {
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
bool _loading = false;
|
||||
|
||||
final _firstName = TextEditingController();
|
||||
final _lastName = TextEditingController();
|
||||
final _email = TextEditingController();
|
||||
String _role = 'AGENT';
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
for (final c in [_firstName, _lastName, _email]) {
|
||||
c.dispose();
|
||||
}
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Future<void> _submit() async {
|
||||
if (!_formKey.currentState!.validate()) return;
|
||||
setState(() => _loading = true);
|
||||
try {
|
||||
await ref.read(teamServiceProvider).inviteMember({
|
||||
'firstName': _firstName.text.trim(),
|
||||
'lastName': _lastName.text.trim(),
|
||||
'email': _email.text.trim(),
|
||||
'role': _role,
|
||||
});
|
||||
if (mounted) Navigator.of(context).pop(true);
|
||||
} catch (e) {
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context)
|
||||
.showSnackBar(SnackBar(content: Text('Error: $e')));
|
||||
}
|
||||
} finally {
|
||||
if (mounted) setState(() => _loading = false);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.only(
|
||||
bottom: MediaQuery.of(context).viewInsets.bottom,
|
||||
),
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
const Text('Invite Team Member',
|
||||
style: TextStyle(
|
||||
fontSize: 18, fontWeight: FontWeight.bold)),
|
||||
const Spacer(),
|
||||
if (_loading)
|
||||
const SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(strokeWidth: 2))
|
||||
else
|
||||
TextButton(
|
||||
onPressed: _submit, child: const Text('Invite')),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
TextFormField(
|
||||
controller: _firstName,
|
||||
decoration: const InputDecoration(labelText: 'First Name'),
|
||||
validator: (v) =>
|
||||
v == null || v.isEmpty ? 'Required' : null,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextFormField(
|
||||
controller: _lastName,
|
||||
decoration: const InputDecoration(labelText: 'Last Name'),
|
||||
validator: (v) =>
|
||||
v == null || v.isEmpty ? 'Required' : null,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextFormField(
|
||||
controller: _email,
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
decoration: const InputDecoration(labelText: 'Email'),
|
||||
validator: (v) =>
|
||||
v == null || v.isEmpty ? 'Required' : null,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
InputDecorator(
|
||||
decoration: const InputDecoration(labelText: 'Role'),
|
||||
child: DropdownButton<String>(
|
||||
value: _role,
|
||||
isExpanded: true,
|
||||
underline: const SizedBox(),
|
||||
items: const [
|
||||
DropdownMenuItem(value: 'MANAGER', child: Text('Manager')),
|
||||
DropdownMenuItem(value: 'AGENT', child: Text('Agent')),
|
||||
],
|
||||
onChanged: (v) => setState(() => _role = v!),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
ElevatedButton(
|
||||
onPressed: _loading ? null : _submit,
|
||||
style: ElevatedButton.styleFrom(
|
||||
minimumSize: const Size.fromHeight(48)),
|
||||
child: const Text('Send Invitation'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user