2915 lines
107 KiB
Dart
2915 lines
107 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:flutter/foundation.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import '../../../core/constants/app_colors.dart';
|
|
import '../../../core/constants/app_sizes.dart';
|
|
import '../../../core/utils/validators.dart';
|
|
import '../../../domain/entities/system_user.dart';
|
|
import '../../shared/inputs/custom_text_field.dart';
|
|
import '../../shared/inputs/app_search_bar.dart';
|
|
import '../../shared/buttons/primary_button.dart';
|
|
import '../../shared/widgets/app_pagination.dart';
|
|
import '../../shared/widgets/app_error_state.dart';
|
|
import '../../providers/users_provider.dart';
|
|
import '../../providers/auth_provider.dart';
|
|
import '../../providers/navigation_provider.dart';
|
|
|
|
// --- NEW IMPORTS FOR CUSTOM DIALOGS ---
|
|
import '../../shared/dialogs/error_dialog.dart';
|
|
import '../../shared/dialogs/success_dialog.dart';
|
|
import '../../shared/dialogs/confirm_dialog.dart';
|
|
import '../../shared/modals/custom_modal.dart';
|
|
import '../../../core/services/sound_service.dart';
|
|
import '../../../core/services/haptic_service.dart';
|
|
import 'package:data_table_2/data_table_2.dart';
|
|
|
|
class UsersScreen extends ConsumerStatefulWidget {
|
|
const UsersScreen({super.key});
|
|
|
|
@override
|
|
ConsumerState<UsersScreen> createState() => _UsersScreenState();
|
|
}
|
|
|
|
class _UsersScreenState extends ConsumerState<UsersScreen> {
|
|
final TextEditingController _searchController = TextEditingController();
|
|
final FocusNode _searchFocusNode = FocusNode();
|
|
final FocusNode _shortcutFocusNode = FocusNode();
|
|
final ScrollController _filterScrollController = ScrollController();
|
|
ProviderSubscription<String>? _tabListener;
|
|
ProviderSubscription<String>? _searchListener;
|
|
String _roleFilter = 'all'; // 'all', 'admin', 'teacher'
|
|
int _currentPage = 1;
|
|
final int _itemsPerPage = 20;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_searchFocusNode.addListener(_onSearchFocusChanged);
|
|
_searchController.addListener(() {
|
|
final text = _searchController.text;
|
|
if (ref.read(userSearchQueryProvider) != text) {
|
|
ref.read(userSearchQueryProvider.notifier).state = text;
|
|
}
|
|
});
|
|
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
if (!mounted) return;
|
|
|
|
final initialSearch = ref.read(userSearchQueryProvider);
|
|
if (initialSearch.isNotEmpty && _searchController.text != initialSearch) {
|
|
_searchController.text = initialSearch;
|
|
}
|
|
|
|
if (ref.read(activeTabProvider) == 'Users') {
|
|
_shortcutFocusNode.requestFocus();
|
|
}
|
|
|
|
_searchListener = ref.listenManual<String>(userSearchQueryProvider, (
|
|
previous,
|
|
next,
|
|
) {
|
|
if (!mounted) return;
|
|
if (_searchController.text != next) {
|
|
_searchController.value = _searchController.value.copyWith(
|
|
text: next,
|
|
selection: TextSelection.collapsed(offset: next.length),
|
|
);
|
|
}
|
|
if (_currentPage != 1) {
|
|
setState(() {
|
|
_currentPage = 1;
|
|
});
|
|
}
|
|
});
|
|
|
|
_tabListener = ref.listenManual<String>(activeTabProvider, (
|
|
previous,
|
|
next,
|
|
) {
|
|
if (!mounted) return;
|
|
if (next == 'Users') {
|
|
Future.delayed(const Duration(milliseconds: 120), () {
|
|
if (mounted) {
|
|
_shortcutFocusNode.requestFocus();
|
|
}
|
|
});
|
|
if (previous != 'Users') {
|
|
_searchController.clear();
|
|
ref.read(userSearchQueryProvider.notifier).state = '';
|
|
setState(() {
|
|
_roleFilter = 'all';
|
|
_currentPage = 1;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_tabListener?.close();
|
|
_searchListener?.close();
|
|
_searchFocusNode.removeListener(_onSearchFocusChanged);
|
|
_searchController.dispose();
|
|
_searchFocusNode.dispose();
|
|
_shortcutFocusNode.dispose();
|
|
_filterScrollController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _onSearchFocusChanged() {
|
|
if (mounted) setState(() {});
|
|
}
|
|
|
|
List<SystemUser> _filter(List<SystemUser> users, String query) {
|
|
var result = users;
|
|
// Exclude any non-standard roles (e.g. legacy super_admin accounts) from all views.
|
|
// The backend already filters is_hidden users, but this guards against stale role values.
|
|
result = result.where((u) => u.role == 'admin' || u.role == 'teacher').toList();
|
|
|
|
// Apply status and role filter
|
|
if (_roleFilter == 'inactive') {
|
|
result = result.where((u) => !u.isActive).toList();
|
|
} else if (_roleFilter == 'admin') {
|
|
result = result.where((u) => u.isActive && u.role == 'admin').toList();
|
|
} else if (_roleFilter == 'teacher') {
|
|
result = result.where((u) => u.isActive && u.role == 'teacher').toList();
|
|
} else {
|
|
// 'all' shows all active users
|
|
result = result.where((u) => u.isActive).toList();
|
|
}
|
|
|
|
final q = query.trim().toLowerCase();
|
|
if (q.isNotEmpty) {
|
|
bool isFuzzyMatch(String text, String pattern) {
|
|
if (pattern.isEmpty) return true;
|
|
int j = 0;
|
|
for (int i = 0; i < text.length && j < pattern.length; i++) {
|
|
if (text[i] == pattern[j]) {
|
|
j++;
|
|
}
|
|
}
|
|
return j == pattern.length;
|
|
}
|
|
|
|
result = result.where((u) {
|
|
final username = u.username.toLowerCase();
|
|
final fullName = u.fullName.toLowerCase();
|
|
final email = (u.email ?? '').toLowerCase();
|
|
final role = u.role.toLowerCase();
|
|
|
|
return username.contains(q) ||
|
|
fullName.contains(q) ||
|
|
email.contains(q) ||
|
|
role.contains(q) ||
|
|
isFuzzyMatch(username, q) ||
|
|
isFuzzyMatch(fullName, q);
|
|
}).toList();
|
|
}
|
|
return result;
|
|
}
|
|
|
|
Future<void> _handleRefresh() async {
|
|
await ref.read(usersProvider.notifier).refresh();
|
|
}
|
|
|
|
Future<void> _confirmResetPassword(SystemUser user) async {
|
|
final email = user.email?.trim() ?? '';
|
|
final emailFormatError = AppValidators.validateEmail(email);
|
|
if (email.isEmpty || emailFormatError != null) {
|
|
showErrorDialog(
|
|
context,
|
|
'Cannot Send Reset Link',
|
|
'User @${user.username} does not have a valid registered email address (${email.isEmpty ? "no email registered" : email}).\n\nPlease edit this user and provide a valid, active email address before sending a reset link.',
|
|
);
|
|
return;
|
|
}
|
|
|
|
final result = await showDialog<Map<String, dynamic>>(
|
|
context: context,
|
|
builder: (ctx) => _ResetPasswordConfirmationDialog(user: user),
|
|
);
|
|
if (result == null || !mounted) return;
|
|
|
|
try {
|
|
// 1. Verify recipient email deliverability before dispatching reset link
|
|
final validation =
|
|
await ref.read(usersProvider.notifier).validateEmail(email);
|
|
if (validation['valid'] == false) {
|
|
final reason = validation['reason']?.toString() ??
|
|
'Invalid or undeliverable email address';
|
|
if (!mounted) return;
|
|
showErrorDialog(
|
|
context,
|
|
'Email Verification Failed',
|
|
'Cannot send password reset link: the recipient email address "$email" failed verification ($reason).\n\nPlease update the user profile with a valid email address first.',
|
|
);
|
|
return;
|
|
}
|
|
|
|
// 2. Dispatch reset link
|
|
final message = await ref
|
|
.read(usersProvider.notifier)
|
|
.resetPassword(
|
|
user.id,
|
|
adminPassword: result['password'] as String,
|
|
expirationMinutes: result['expirationMinutes'] as int? ?? 15,
|
|
);
|
|
if (!mounted) return;
|
|
|
|
showSuccessDialog(
|
|
context,
|
|
title: 'Reset Link Sent',
|
|
message: message,
|
|
);
|
|
} catch (e) {
|
|
if (!mounted) return;
|
|
|
|
showErrorDialog(
|
|
context,
|
|
'Reset Failed',
|
|
e.toString().replaceAll('Exception: ', ''),
|
|
);
|
|
}
|
|
}
|
|
|
|
Future<void> _confirmToggleStatus(SystemUser user) async {
|
|
final willDeactivate = user.isActive;
|
|
final confirmed = await showConfirmDialog(
|
|
context,
|
|
title: willDeactivate ? 'Deactivate User?' : 'Activate User?',
|
|
message: willDeactivate
|
|
? 'Are you sure you want to deactivate "${user.fullName}" (@${user.username})?\n\nThis user will be immediately blocked from logging in.'
|
|
: 'Are you sure you want to activate "${user.fullName}" (@${user.username})?\n\nThis user will regain access to log into the system.',
|
|
confirmLabel: willDeactivate ? 'Deactivate' : 'Activate',
|
|
cancelLabel: 'Cancel',
|
|
isDanger: willDeactivate,
|
|
confirmColor: willDeactivate ? AppColors.error : AppColors.primaryGreen,
|
|
icon: willDeactivate ? Icons.block_rounded : Icons.check_circle_outline_rounded,
|
|
iconColor: willDeactivate ? AppColors.error : AppColors.primaryGreen,
|
|
);
|
|
|
|
if (confirmed != true || !mounted) return;
|
|
await _toggleStatus(user);
|
|
}
|
|
|
|
Future<void> _toggleStatus(SystemUser user) async {
|
|
try {
|
|
final newActive = await ref
|
|
.read(usersProvider.notifier)
|
|
.toggleStatus(user.id);
|
|
if (!mounted) return;
|
|
showSuccessDialog(
|
|
context,
|
|
title: newActive ? 'User Activated' : 'User Deactivated',
|
|
message: newActive
|
|
? '"${user.username}" can now log in to the system.'
|
|
: '"${user.username}" has been deactivated and cannot log in.',
|
|
);
|
|
} catch (e) {
|
|
if (!mounted) return;
|
|
showErrorDialog(
|
|
context,
|
|
'Status Change Failed',
|
|
e.toString().replaceAll('Exception: ', ''),
|
|
);
|
|
}
|
|
}
|
|
|
|
Future<void> _openModal({SystemUser? user}) async {
|
|
await AddEditUserModal.show(
|
|
context,
|
|
user: user,
|
|
initialEditMode: user != null,
|
|
onResetPassword: _confirmResetPassword,
|
|
onToggleStatus: _confirmToggleStatus,
|
|
);
|
|
}
|
|
|
|
void _showUserDetailModal(SystemUser user) {
|
|
AddEditUserModal.show(
|
|
context,
|
|
user: user,
|
|
initialEditMode: false,
|
|
onResetPassword: _confirmResetPassword,
|
|
onToggleStatus: _confirmToggleStatus,
|
|
);
|
|
}
|
|
|
|
Widget _buildAnimatedFilter(String label, String value, int count) {
|
|
final isSelected = _roleFilter == value;
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
final unselectedBg = Colors.transparent;
|
|
final unselectedBorder = isDark ? AppColors.darkBorder : Colors.grey.shade300;
|
|
final unselectedText = isDark ? AppColors.darkTextSecondary : AppColors.textSecondary;
|
|
|
|
return GestureDetector(
|
|
onTap: () {
|
|
setState(() {
|
|
_roleFilter = value;
|
|
_currentPage = 1;
|
|
});
|
|
},
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 300),
|
|
curve: Curves.easeInOut,
|
|
margin: const EdgeInsets.only(right: 8),
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
decoration: BoxDecoration(
|
|
color: isSelected ? AppColors.primaryGreen : unselectedBg,
|
|
borderRadius: BorderRadius.circular(20),
|
|
border: Border.all(
|
|
color: isSelected ? AppColors.primaryGreen : unselectedBorder,
|
|
),
|
|
boxShadow: isSelected
|
|
? [
|
|
BoxShadow(
|
|
color: AppColors.primaryGreen.withValues(alpha: 0.3),
|
|
blurRadius: 8,
|
|
offset: const Offset(0, 4),
|
|
),
|
|
]
|
|
: [],
|
|
),
|
|
child: Text(
|
|
'$label ($count)',
|
|
style: TextStyle(
|
|
color: isSelected ? Colors.white : unselectedText,
|
|
fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final usersAsync = ref.watch(usersProvider);
|
|
final userSearch = ref.watch(userSearchQueryProvider);
|
|
final isAndroid = defaultTargetPlatform == TargetPlatform.android;
|
|
|
|
return CallbackShortcuts(
|
|
bindings: <ShortcutActivator, VoidCallback>{
|
|
const SingleActivator(LogicalKeyboardKey.keyF, control: true): () {
|
|
_showSearchDialog(context);
|
|
},
|
|
},
|
|
child: Focus(
|
|
focusNode: _shortcutFocusNode,
|
|
autofocus: true,
|
|
child: Scaffold(
|
|
resizeToAvoidBottomInset: false,
|
|
backgroundColor: Colors.transparent,
|
|
body: SafeArea(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(AppSizes.p24),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
child: usersAsync.when(
|
|
loading: () =>
|
|
const Center(child: CircularProgressIndicator()),
|
|
error: (err, _) => AppErrorState.fromError(
|
|
error: err,
|
|
onRetry: _handleRefresh,
|
|
),
|
|
data: (users) {
|
|
final filtered = _filter(users, userSearch);
|
|
final int totalPages = (filtered.length / _itemsPerPage).ceil().clamp(1, 9999);
|
|
final int safeCurrentPage = _currentPage.clamp(1, totalPages);
|
|
final int startIndex = (safeCurrentPage - 1) * _itemsPerPage;
|
|
final int endIndex = (startIndex + _itemsPerPage).clamp(0, filtered.length);
|
|
final paginated = filtered.isEmpty ? <SystemUser>[] : filtered.sublist(startIndex, endIndex);
|
|
|
|
final activeUsers = users.where((u) => u.isActive).toList();
|
|
final activeAdmins = activeUsers.where((u) => u.role == 'admin').toList();
|
|
final activeTeachers = activeUsers.where((u) => u.role == 'teacher').toList();
|
|
final inactiveUsers = users.where((u) => !u.isActive).toList();
|
|
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
SingleChildScrollView(
|
|
controller: _filterScrollController,
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: [
|
|
_buildAnimatedFilter('All', 'all', activeUsers.length),
|
|
_buildAnimatedFilter(
|
|
'Admin',
|
|
'admin',
|
|
activeAdmins.length,
|
|
),
|
|
_buildAnimatedFilter(
|
|
'Teacher',
|
|
'teacher',
|
|
activeTeachers.length,
|
|
),
|
|
_buildAnimatedFilter(
|
|
'Inactive',
|
|
'inactive',
|
|
inactiveUsers.length,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
_CustomHorizontalScrollBar(
|
|
controller: _filterScrollController,
|
|
isDark: isDark,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
if (!isAndroid && !_searchFocusNode.hasFocus) ...[
|
|
Tooltip(
|
|
richMessage: userSearch.isNotEmpty
|
|
? const TextSpan(text: 'Clear Search')
|
|
: const TextSpan(
|
|
text: 'Search Users ',
|
|
children: [
|
|
TextSpan(
|
|
text: '(Ctrl+F)',
|
|
style: TextStyle(fontStyle: FontStyle.italic),
|
|
),
|
|
],
|
|
),
|
|
child: IconButton(
|
|
icon: Icon(
|
|
userSearch.isNotEmpty ? Icons.close : Icons.search,
|
|
size: 28,
|
|
color: isDark
|
|
? AppColors.darkTextPrimary
|
|
: Colors.black87,
|
|
),
|
|
onPressed: () {
|
|
if (userSearch.isNotEmpty) {
|
|
_searchController.clear();
|
|
ref.read(userSearchQueryProvider.notifier).state = '';
|
|
} else {
|
|
_showSearchDialog(context);
|
|
}
|
|
},
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
DecoratedBox(
|
|
decoration: BoxDecoration(
|
|
gradient: const LinearGradient(
|
|
colors: [
|
|
Color(0xFF00B074),
|
|
AppColors.primaryGreen,
|
|
],
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
),
|
|
borderRadius: BorderRadius.circular(10),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppColors.primaryGreen.withValues(alpha: 0.38),
|
|
blurRadius: 8,
|
|
offset: const Offset(0, 3),
|
|
),
|
|
],
|
|
),
|
|
child: Material(
|
|
color: Colors.transparent,
|
|
child: InkWell(
|
|
borderRadius: BorderRadius.circular(10),
|
|
onTap: () => _openModal(),
|
|
child: const Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: 16,
|
|
vertical: 9,
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
Icons.person_add_rounded,
|
|
size: 19,
|
|
color: Colors.white,
|
|
),
|
|
SizedBox(width: 7),
|
|
Text(
|
|
'Add User',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 13.5,
|
|
letterSpacing: 0.2,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
const SizedBox(height: AppSizes.p16),
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 4.0),
|
|
child: RefreshIndicator(
|
|
onRefresh: _handleRefresh,
|
|
child: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
if (constraints.maxWidth > 800) {
|
|
return _buildDesktopTable(paginated);
|
|
} else {
|
|
return _buildMobileList(paginated);
|
|
}
|
|
},
|
|
),
|
|
),
|
|
),
|
|
),
|
|
if (!_searchFocusNode.hasFocus && totalPages > 1)
|
|
SafeArea(
|
|
top: false,
|
|
child: AppPagination(
|
|
currentPage: _currentPage,
|
|
totalPages: totalPages,
|
|
onPageChanged: (p) => setState(() => _currentPage = p),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Future<void> _showSearchDialog(BuildContext context) async {
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
if (mounted) {
|
|
_searchFocusNode.requestFocus();
|
|
}
|
|
});
|
|
|
|
await showDialog(
|
|
context: context,
|
|
barrierColor: Colors.black54,
|
|
builder: (context) {
|
|
return Align(
|
|
alignment: Alignment.topCenter,
|
|
child: Padding(
|
|
padding: const EdgeInsets.fromLTRB(16, kToolbarHeight + 24, 16, 0),
|
|
child: Material(
|
|
color: isDark ? AppColors.darkSurfaceCard : Colors.white,
|
|
elevation: 4,
|
|
borderRadius: BorderRadius.circular(12),
|
|
child: AppSearchBar(
|
|
hint: 'Search by username, name, email or role...',
|
|
controller: _searchController,
|
|
focusNode: _searchFocusNode,
|
|
collapsible: false,
|
|
maxWidth: 600,
|
|
onChanged: (val) {
|
|
ref.read(userSearchQueryProvider.notifier).state = val;
|
|
},
|
|
onSubmitted: (val) {
|
|
Navigator.of(context).pop();
|
|
ref.read(userSearchQueryProvider.notifier).state = val;
|
|
},
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
|
|
if (mounted) {
|
|
_searchFocusNode.unfocus();
|
|
_shortcutFocusNode.requestFocus();
|
|
setState(() {});
|
|
}
|
|
}
|
|
|
|
Widget _buildDesktopTable(List<SystemUser> users) {
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
final textPrimary = isDark ? AppColors.darkTextPrimary : AppColors.textPrimary;
|
|
final textSecondary = isDark ? AppColors.darkTextSecondary : AppColors.textSecondary;
|
|
final cardBg = isDark ? AppColors.darkSurfaceCard : AppColors.surfaceWhite;
|
|
|
|
return Container(
|
|
width: double.infinity,
|
|
decoration: BoxDecoration(
|
|
color: cardBg,
|
|
borderRadius: BorderRadius.circular(AppSizes.radiusLarge),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withValues(alpha: 0.05),
|
|
blurRadius: 15,
|
|
offset: const Offset(0, 4),
|
|
),
|
|
],
|
|
),
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(AppSizes.radiusLarge),
|
|
child: DataTable2(
|
|
fixedTopRows: 1,
|
|
minWidth: 900,
|
|
columnSpacing: 24,
|
|
horizontalMargin: 20,
|
|
headingRowHeight: 52,
|
|
dataRowHeight: 65,
|
|
showCheckboxColumn: false,
|
|
showBottomBorder: true,
|
|
isVerticalScrollBarVisible: true,
|
|
isHorizontalScrollBarVisible: true,
|
|
empty: Center(
|
|
child: Text(
|
|
'No users found.',
|
|
style: TextStyle(color: textSecondary),
|
|
),
|
|
),
|
|
headingRowColor: WidgetStateProperty.all(
|
|
isDark
|
|
? Colors.white.withValues(alpha: 0.03)
|
|
: AppColors.primaryGreen.withValues(alpha: 0.05),
|
|
),
|
|
headingTextStyle: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 13,
|
|
color: textPrimary,
|
|
),
|
|
columns: const [
|
|
DataColumn2(
|
|
size: ColumnSize.L,
|
|
label: Text('Full Name'),
|
|
),
|
|
DataColumn2(
|
|
size: ColumnSize.M,
|
|
label: Text('Username'),
|
|
),
|
|
DataColumn2(
|
|
size: ColumnSize.S,
|
|
label: Text('Role'),
|
|
),
|
|
DataColumn2(
|
|
size: ColumnSize.S,
|
|
label: Text('Status'),
|
|
),
|
|
DataColumn2(
|
|
size: ColumnSize.M,
|
|
label: Text('Contact'),
|
|
),
|
|
DataColumn2(
|
|
fixedWidth: 80,
|
|
label: Align(
|
|
alignment: Alignment.centerRight,
|
|
child: Text('Action'),
|
|
),
|
|
),
|
|
],
|
|
rows: users
|
|
.map(
|
|
(user) => DataRow(
|
|
onSelectChanged: (_) => _showUserDetailModal(user),
|
|
cells: [
|
|
DataCell(
|
|
Row(
|
|
children: [
|
|
CircleAvatar(
|
|
radius: 18,
|
|
backgroundColor: _roleColor(
|
|
user.role,
|
|
).withValues(alpha: 0.15),
|
|
child: Text(
|
|
user.initials,
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.bold,
|
|
color: _roleColor(user.role),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Flexible(
|
|
child: Text(
|
|
user.fullName,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 14,
|
|
color: textPrimary,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
DataCell(
|
|
Text(
|
|
'@${user.username}',
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
color: textSecondary,
|
|
),
|
|
),
|
|
),
|
|
DataCell(_buildRoleChip(user.role)),
|
|
DataCell(_buildStatusChip(user.isActive)),
|
|
DataCell(
|
|
Text(
|
|
user.email ?? user.phone ?? '—',
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
color: textSecondary,
|
|
fontSize: 13,
|
|
),
|
|
),
|
|
),
|
|
const DataCell(
|
|
Align(
|
|
alignment: Alignment.centerRight,
|
|
child: Icon(
|
|
Icons.chevron_right,
|
|
color: Colors.grey,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
)
|
|
.toList(),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildMobileList(List<SystemUser> users) {
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
final textPrimary = isDark ? AppColors.darkTextPrimary : AppColors.textPrimary;
|
|
final textSecondary = isDark ? AppColors.darkTextSecondary : AppColors.textSecondary;
|
|
final cardBg = isDark ? AppColors.darkSurfaceCard : AppColors.surfaceWhite;
|
|
final borderCol = isDark ? AppColors.darkBorder : Colors.grey.shade100;
|
|
|
|
if (users.isEmpty) {
|
|
return Center(
|
|
child: Text(
|
|
'No users found.',
|
|
style: TextStyle(color: textSecondary),
|
|
),
|
|
);
|
|
}
|
|
return ListView.separated(
|
|
padding: const EdgeInsets.only(bottom: 88),
|
|
itemCount: users.length,
|
|
separatorBuilder: (_, _) => const SizedBox(height: AppSizes.p12),
|
|
itemBuilder: (context, index) {
|
|
final user = users[index];
|
|
return InkWell(
|
|
onTap: () => _showUserDetailModal(user),
|
|
borderRadius: BorderRadius.circular(AppSizes.radiusLarge),
|
|
child: Container(
|
|
padding: const EdgeInsets.all(AppSizes.p16),
|
|
decoration: BoxDecoration(
|
|
color: cardBg,
|
|
borderRadius: BorderRadius.circular(AppSizes.radiusLarge),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withValues(alpha: 0.05),
|
|
blurRadius: 10,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
border: Border.all(color: borderCol),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
CircleAvatar(
|
|
radius: 24,
|
|
backgroundColor: _roleColor(
|
|
user.role,
|
|
).withValues(alpha: 0.15),
|
|
child: Text(
|
|
user.initials,
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 16,
|
|
color: _roleColor(user.role),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 16),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: Text(
|
|
user.fullName,
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 16,
|
|
color: textPrimary,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
_buildRoleChip(user.role),
|
|
],
|
|
),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
'@${user.username}',
|
|
style: TextStyle(
|
|
color: textSecondary,
|
|
fontSize: 13,
|
|
),
|
|
),
|
|
if (user.email != null || user.phone != null) ...[
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
[
|
|
if (user.email != null) user.email!,
|
|
if (user.phone != null) user.phone!,
|
|
].join(' · '),
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: textSecondary,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
const Icon(Icons.chevron_right, color: Colors.grey),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget _buildRoleChip(String role) {
|
|
final color = _roleColor(role);
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: color.withValues(alpha: 0.1),
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
child: Text(
|
|
role.toUpperCase().replaceAll('_', ' '),
|
|
style: TextStyle(
|
|
color: color,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 11,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildStatusChip(bool isActive) {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: isActive
|
|
? Colors.green.withValues(alpha: 0.1)
|
|
: Colors.grey.withValues(alpha: 0.15),
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
child: Text(
|
|
isActive ? 'Active' : 'Inactive',
|
|
style: TextStyle(
|
|
color: isActive ? Colors.green.shade700 : Colors.grey.shade600,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 11,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Color _roleColor(String role) {
|
|
if (role == 'admin') return Colors.blue;
|
|
return AppColors.primaryGreen;
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// ADD / EDIT MODAL & USER PROFILE DETAILS (CUSTOM MODAL)
|
|
// ============================================================
|
|
class AddEditUserModal {
|
|
static Future<bool?> show(
|
|
BuildContext context, {
|
|
SystemUser? user,
|
|
bool initialEditMode = false,
|
|
void Function(SystemUser)? onResetPassword,
|
|
void Function(SystemUser)? onToggleStatus,
|
|
}) {
|
|
if (user != null) {
|
|
return CustomModal.show<bool>(
|
|
context: context,
|
|
title: initialEditMode ? 'Edit User Profile' : 'User Profile Details',
|
|
icon: initialEditMode ? Icons.edit_outlined : Icons.person_outline,
|
|
maxWidth: 540,
|
|
content: _UserDetailAndEditModalContent(
|
|
user: user,
|
|
initialEditMode: initialEditMode,
|
|
onResetPassword: onResetPassword,
|
|
onToggleStatus: onToggleStatus,
|
|
),
|
|
);
|
|
} else {
|
|
return CustomModal.show<bool>(
|
|
context: context,
|
|
title: 'Add New User',
|
|
icon: Icons.person_add_outlined,
|
|
maxWidth: 540,
|
|
content: const _AddUserModalContent(),
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ------------------------------------------------------------
|
|
// USER DETAIL AND IN-PLACE EDIT MODAL CONTENT
|
|
// ------------------------------------------------------------
|
|
class _UserDetailAndEditModalContent extends ConsumerStatefulWidget {
|
|
final SystemUser user;
|
|
final bool initialEditMode;
|
|
final void Function(SystemUser)? onResetPassword;
|
|
final void Function(SystemUser)? onToggleStatus;
|
|
|
|
const _UserDetailAndEditModalContent({
|
|
required this.user,
|
|
this.initialEditMode = false,
|
|
this.onResetPassword,
|
|
this.onToggleStatus,
|
|
});
|
|
|
|
@override
|
|
ConsumerState<_UserDetailAndEditModalContent> createState() =>
|
|
_UserDetailAndEditModalContentState();
|
|
}
|
|
|
|
class _UserDetailAndEditModalContentState
|
|
extends ConsumerState<_UserDetailAndEditModalContent> {
|
|
late SystemUser _currentUser;
|
|
late bool _isEditing;
|
|
late TextEditingController _firstNameCtrl;
|
|
late TextEditingController _middleNameCtrl;
|
|
late TextEditingController _lastNameCtrl;
|
|
late TextEditingController _extCtrl;
|
|
late TextEditingController _emailCtrl;
|
|
late TextEditingController _phoneCtrl;
|
|
late String _selectedRole;
|
|
bool _isLoading = false;
|
|
final _formKey = GlobalKey<FormState>();
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_currentUser = widget.user;
|
|
_isEditing = widget.initialEditMode;
|
|
_firstNameCtrl = TextEditingController(text: _currentUser.firstName);
|
|
_middleNameCtrl =
|
|
TextEditingController(text: _currentUser.middleName ?? '');
|
|
_lastNameCtrl = TextEditingController(text: _currentUser.lastName);
|
|
_extCtrl = TextEditingController(text: _currentUser.extension ?? '');
|
|
_emailCtrl = TextEditingController(text: _currentUser.email ?? '');
|
|
_phoneCtrl = TextEditingController(text: _currentUser.phone ?? '');
|
|
_selectedRole = _currentUser.role;
|
|
}
|
|
|
|
void _resetFormValues() {
|
|
_firstNameCtrl.text = _currentUser.firstName;
|
|
_middleNameCtrl.text = _currentUser.middleName ?? '';
|
|
_lastNameCtrl.text = _currentUser.lastName;
|
|
_extCtrl.text = _currentUser.extension ?? '';
|
|
_emailCtrl.text = _currentUser.email ?? '';
|
|
_phoneCtrl.text = _currentUser.phone ?? '';
|
|
_selectedRole = _currentUser.role;
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_firstNameCtrl.dispose();
|
|
_middleNameCtrl.dispose();
|
|
_lastNameCtrl.dispose();
|
|
_extCtrl.dispose();
|
|
_emailCtrl.dispose();
|
|
_phoneCtrl.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _startEditing() {
|
|
HapticService.light();
|
|
setState(() {
|
|
_resetFormValues();
|
|
_isEditing = true;
|
|
});
|
|
}
|
|
|
|
void _cancelEditing() {
|
|
HapticService.light();
|
|
if (widget.initialEditMode) {
|
|
Navigator.of(context).pop(false);
|
|
} else {
|
|
setState(() {
|
|
_resetFormValues();
|
|
_isEditing = false;
|
|
});
|
|
}
|
|
}
|
|
|
|
Future<void> _handleSave() async {
|
|
if (!(_formKey.currentState?.validate() ?? false)) return;
|
|
setState(() => _isLoading = true);
|
|
|
|
try {
|
|
final email = _emailCtrl.text.trim();
|
|
if (email.isNotEmpty && email != _currentUser.email) {
|
|
final validation =
|
|
await ref.read(usersProvider.notifier).validateEmail(email);
|
|
if (validation['valid'] == false) {
|
|
final reason = validation['reason']?.toString() ??
|
|
'Invalid or undeliverable email address';
|
|
if (!mounted) return;
|
|
showErrorDialog(
|
|
context,
|
|
'Invalid Email Address',
|
|
'The email address "$email" failed verification: $reason.\nPlease enter a valid, active email address.',
|
|
);
|
|
return;
|
|
}
|
|
}
|
|
|
|
final notifier = ref.read(usersProvider.notifier);
|
|
await notifier.updateUser(
|
|
id: _currentUser.id,
|
|
firstName: _firstNameCtrl.text.trim(),
|
|
middleName: _middleNameCtrl.text.trim(),
|
|
lastName: _lastNameCtrl.text.trim(),
|
|
extension: _extCtrl.text.trim(),
|
|
role: _selectedRole,
|
|
email: _emailCtrl.text.trim(),
|
|
phone: _phoneCtrl.text.trim(),
|
|
);
|
|
|
|
if (!mounted) return;
|
|
|
|
final updatedUser = _currentUser.copyWith(
|
|
firstName: _firstNameCtrl.text.trim(),
|
|
middleName: _middleNameCtrl.text.trim(),
|
|
lastName: _lastNameCtrl.text.trim(),
|
|
extension: _extCtrl.text.trim(),
|
|
role: _selectedRole,
|
|
email: _emailCtrl.text.trim(),
|
|
phone: _phoneCtrl.text.trim(),
|
|
);
|
|
|
|
setState(() {
|
|
_currentUser = updatedUser;
|
|
_isEditing = false;
|
|
});
|
|
|
|
HapticService.success();
|
|
showSuccessDialog(
|
|
context,
|
|
title: 'User Updated',
|
|
message: 'User updated successfully!',
|
|
);
|
|
|
|
if (widget.initialEditMode) {
|
|
Navigator.of(context).pop(true);
|
|
}
|
|
} catch (e) {
|
|
if (!mounted) return;
|
|
showErrorDialog(
|
|
context,
|
|
'Update Failed',
|
|
e.toString().replaceAll('Exception: ', ''),
|
|
);
|
|
} finally {
|
|
if (mounted) setState(() => _isLoading = false);
|
|
}
|
|
}
|
|
|
|
Color _roleColor(String role) {
|
|
if (role == 'admin') return Colors.blue;
|
|
return AppColors.primaryGreen;
|
|
}
|
|
|
|
Widget _buildRoleChip(String role) {
|
|
final color = _roleColor(role);
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: color.withValues(alpha: 0.1),
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
child: Text(
|
|
role.toUpperCase().replaceAll('_', ' '),
|
|
style: TextStyle(
|
|
color: color,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 11,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildStatusChip(bool isActive) {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: isActive
|
|
? Colors.green.withValues(alpha: 0.1)
|
|
: Colors.grey.withValues(alpha: 0.15),
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
child: Text(
|
|
isActive ? 'Active' : 'Inactive',
|
|
style: TextStyle(
|
|
color: isActive ? Colors.green.shade700 : Colors.grey.shade600,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 11,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _detailRow({
|
|
required IconData icon,
|
|
required String label,
|
|
required String value,
|
|
Color? valueColor,
|
|
}) {
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
final textPrimary = isDark ? AppColors.darkTextPrimary : AppColors.textPrimary;
|
|
final textSecondary = isDark ? AppColors.darkTextSecondary : AppColors.textSecondary;
|
|
return Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Icon(icon, size: 18, color: textSecondary.withValues(alpha: 0.8)),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
label,
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: textSecondary,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
value,
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w500,
|
|
color: valueColor ?? textPrimary,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final currentUser = ref.watch(authProvider).value;
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
final textPrimary = isDark ? AppColors.darkTextPrimary : AppColors.textPrimary;
|
|
final textSecondary = isDark ? AppColors.darkTextSecondary : AppColors.textSecondary;
|
|
final headerBg = isDark ? AppColors.darkSurface2 : Colors.grey.shade50;
|
|
final borderCol = isDark ? AppColors.darkBorder : Colors.grey.shade200;
|
|
final roleCol = _roleColor(_isEditing ? _selectedRole : _currentUser.role);
|
|
final canToggle = _currentUser.id != currentUser?.id;
|
|
final isSelf = _currentUser.id == currentUser?.id;
|
|
final isAndroid = Theme.of(context).platform == TargetPlatform.android ||
|
|
MediaQuery.of(context).size.width < 500;
|
|
|
|
return SingleChildScrollView(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Header with Profile Identity & Badges
|
|
Container(
|
|
padding: const EdgeInsets.all(AppSizes.p20),
|
|
decoration: BoxDecoration(
|
|
color: headerBg,
|
|
border: Border(bottom: BorderSide(color: borderCol)),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
Stack(
|
|
clipBehavior: Clip.none,
|
|
children: [
|
|
CircleAvatar(
|
|
radius: 28,
|
|
backgroundColor: roleCol.withValues(alpha: 0.15),
|
|
child: Text(
|
|
_currentUser.initials,
|
|
style: TextStyle(
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.bold,
|
|
color: roleCol,
|
|
),
|
|
),
|
|
),
|
|
Positioned(
|
|
right: 0,
|
|
bottom: 0,
|
|
child: Container(
|
|
width: 14,
|
|
height: 14,
|
|
decoration: BoxDecoration(
|
|
color: _currentUser.isActive
|
|
? AppColors.success
|
|
: Colors.grey,
|
|
shape: BoxShape.circle,
|
|
border: Border.all(
|
|
color: headerBg,
|
|
width: 2.5,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(width: AppSizes.p16),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
_currentUser.fullName,
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
color: textPrimary,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
const SizedBox(height: 3),
|
|
Wrap(
|
|
crossAxisAlignment: WrapCrossAlignment.center,
|
|
spacing: 8,
|
|
runSpacing: 4,
|
|
children: [
|
|
Text(
|
|
'@${_currentUser.username}',
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
color: textSecondary,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
_buildRoleChip(
|
|
_isEditing ? _selectedRole : _currentUser.role,
|
|
),
|
|
_buildStatusChip(_currentUser.isActive),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
if (_isEditing) ...[
|
|
const SizedBox(height: AppSizes.p12),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 12,
|
|
vertical: 8,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.primaryGreen.withValues(alpha: 0.08),
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: Border.all(
|
|
color: AppColors.primaryGreen.withValues(alpha: 0.25),
|
|
),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
const Icon(
|
|
Icons.edit_note_rounded,
|
|
size: 18,
|
|
color: AppColors.primaryGreen,
|
|
),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
'Editing User Profile',
|
|
style: TextStyle(
|
|
fontSize: 12.5,
|
|
fontWeight: FontWeight.w600,
|
|
color: isDark
|
|
? AppColors.darkTextPrimary
|
|
: AppColors.primaryGreen,
|
|
),
|
|
),
|
|
const Spacer(),
|
|
TextButton(
|
|
onPressed: _cancelEditing,
|
|
style: TextButton.styleFrom(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 8,
|
|
vertical: 4,
|
|
),
|
|
visualDensity: VisualDensity.compact,
|
|
),
|
|
child: const Text(
|
|
'Discard',
|
|
style: TextStyle(fontSize: 12),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
] else ...[
|
|
const SizedBox(height: AppSizes.p16),
|
|
// Responsive Action Buttons Toolbar for Android & Windows
|
|
LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
final isCompact = constraints.maxWidth < 420;
|
|
|
|
Widget buildActionButton({
|
|
required IconData icon,
|
|
required String label,
|
|
required VoidCallback onTap,
|
|
bool isDestructive = false,
|
|
bool isPrimary = false,
|
|
}) {
|
|
final fgColor = isPrimary
|
|
? Colors.white
|
|
: (isDestructive
|
|
? (isDark
|
|
? Colors.red.shade300
|
|
: Colors.red.shade700)
|
|
: textPrimary);
|
|
final border = isPrimary
|
|
? AppColors.primaryGreen
|
|
: (isDestructive
|
|
? (isDark
|
|
? Colors.red.withValues(alpha: 0.3)
|
|
: Colors.red.shade200)
|
|
: (isDark
|
|
? AppColors.darkBorder
|
|
: Colors.grey.shade300));
|
|
final bg = isPrimary
|
|
? AppColors.primaryGreen
|
|
: (isDark
|
|
? AppColors.darkSurfaceCard
|
|
: Colors.white);
|
|
|
|
return Material(
|
|
color: bg,
|
|
borderRadius: BorderRadius.circular(8),
|
|
child: InkWell(
|
|
onTap: onTap,
|
|
borderRadius: BorderRadius.circular(8),
|
|
child: Container(
|
|
height: 38,
|
|
alignment: Alignment.center,
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: isCompact ? 6 : 12,
|
|
),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: Border.all(color: border, width: 1),
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(icon,
|
|
size: isCompact ? 15 : 16,
|
|
color: fgColor),
|
|
const SizedBox(width: 6),
|
|
Flexible(
|
|
child: Text(
|
|
label,
|
|
style: TextStyle(
|
|
color: fgColor,
|
|
fontSize: isCompact ? 11.5 : 12.5,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
final editBtn = buildActionButton(
|
|
icon: Icons.edit_outlined,
|
|
label: 'Edit',
|
|
onTap: _startEditing,
|
|
);
|
|
|
|
final resetBtn = buildActionButton(
|
|
icon: Icons.lock_reset_rounded,
|
|
label: 'Reset',
|
|
onTap: () {
|
|
Navigator.of(context, rootNavigator: true).pop();
|
|
widget.onResetPassword?.call(_currentUser);
|
|
},
|
|
);
|
|
|
|
final toggleBtn = canToggle
|
|
? buildActionButton(
|
|
icon: _currentUser.isActive
|
|
? Icons.block_rounded
|
|
: Icons.check_circle_outline_rounded,
|
|
label: _currentUser.isActive
|
|
? 'Deactivate'
|
|
: 'Activate',
|
|
isDestructive: _currentUser.isActive,
|
|
onTap: () {
|
|
Navigator.of(context, rootNavigator: true).pop();
|
|
widget.onToggleStatus?.call(_currentUser);
|
|
},
|
|
)
|
|
: null;
|
|
|
|
return Row(
|
|
children: [
|
|
Expanded(child: editBtn),
|
|
const SizedBox(width: 8),
|
|
Expanded(child: resetBtn),
|
|
if (toggleBtn != null) ...[
|
|
const SizedBox(width: 8),
|
|
Expanded(child: toggleBtn),
|
|
],
|
|
],
|
|
);
|
|
},
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
|
|
// Modal Body: View Details or In-Place Form
|
|
if (!_isEditing)
|
|
Padding(
|
|
padding: const EdgeInsets.all(AppSizes.p20),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
_detailRow(
|
|
icon: Icons.admin_panel_settings_outlined,
|
|
label: 'Access Role',
|
|
value: _currentUser.role.toUpperCase().replaceAll('_', ' '),
|
|
),
|
|
const SizedBox(height: AppSizes.p16),
|
|
_detailRow(
|
|
icon: Icons.verified_user_outlined,
|
|
label: 'Account Status',
|
|
value: _currentUser.isActive
|
|
? 'Active (Can login)'
|
|
: 'Inactive (Access blocked)',
|
|
valueColor: _currentUser.isActive
|
|
? Colors.green.shade700
|
|
: Colors.red.shade700,
|
|
),
|
|
const SizedBox(height: AppSizes.p16),
|
|
_detailRow(
|
|
icon: Icons.calendar_today_outlined,
|
|
label: 'Date Joined',
|
|
value: _currentUser.createdAt?.split('T').first ?? '—',
|
|
),
|
|
const SizedBox(height: AppSizes.p16),
|
|
_detailRow(
|
|
icon: Icons.email_outlined,
|
|
label: 'Email',
|
|
value: _currentUser.email?.isNotEmpty == true
|
|
? _currentUser.email!
|
|
: '—',
|
|
),
|
|
const SizedBox(height: AppSizes.p16),
|
|
_detailRow(
|
|
icon: Icons.phone_outlined,
|
|
label: 'Phone',
|
|
value: _currentUser.phone?.isNotEmpty == true
|
|
? _currentUser.phone!
|
|
: '—',
|
|
),
|
|
const SizedBox(height: AppSizes.p16),
|
|
_detailRow(
|
|
icon: Icons.person_add_outlined,
|
|
label: 'Added By',
|
|
value: _currentUser.addedByName != null
|
|
? '${_currentUser.addedByName} (@${_currentUser.addedByUsername})'
|
|
: 'System',
|
|
),
|
|
],
|
|
),
|
|
)
|
|
else
|
|
Padding(
|
|
padding: const EdgeInsets.all(AppSizes.p20),
|
|
child: Form(
|
|
key: _formKey,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Personal Information',
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w700,
|
|
color: textSecondary,
|
|
letterSpacing: 0.5,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
if (isAndroid) ...[
|
|
_field(
|
|
'First Name',
|
|
Icons.person_outline,
|
|
_firstNameCtrl,
|
|
required: true,
|
|
textCapitalization: TextCapitalization.words,
|
|
inputFormatters: [_TitleCaseTextInputFormatter()],
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
_field(
|
|
'Middle Name',
|
|
null,
|
|
_middleNameCtrl,
|
|
textCapitalization: TextCapitalization.words,
|
|
inputFormatters: [_TitleCaseTextInputFormatter()],
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
_field(
|
|
'Last Name',
|
|
null,
|
|
_lastNameCtrl,
|
|
required: true,
|
|
textCapitalization: TextCapitalization.words,
|
|
inputFormatters: [_TitleCaseTextInputFormatter()],
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
_field(
|
|
'Ext. (Jr, Sr, III)',
|
|
null,
|
|
_extCtrl,
|
|
textCapitalization: TextCapitalization.words,
|
|
inputFormatters: [_TitleCaseTextInputFormatter()],
|
|
),
|
|
] else ...[
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
flex: 3,
|
|
child: _field(
|
|
'First Name',
|
|
Icons.person_outline,
|
|
_firstNameCtrl,
|
|
required: true,
|
|
textCapitalization: TextCapitalization.words,
|
|
inputFormatters: [_TitleCaseTextInputFormatter()],
|
|
),
|
|
),
|
|
const SizedBox(width: AppSizes.p12),
|
|
Expanded(
|
|
flex: 2,
|
|
child: _field(
|
|
'Middle Name',
|
|
null,
|
|
_middleNameCtrl,
|
|
textCapitalization: TextCapitalization.words,
|
|
inputFormatters: [_TitleCaseTextInputFormatter()],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
flex: 3,
|
|
child: _field(
|
|
'Last Name',
|
|
null,
|
|
_lastNameCtrl,
|
|
required: true,
|
|
textCapitalization: TextCapitalization.words,
|
|
inputFormatters: [_TitleCaseTextInputFormatter()],
|
|
),
|
|
),
|
|
const SizedBox(width: AppSizes.p12),
|
|
Expanded(
|
|
flex: 2,
|
|
child: _field(
|
|
'Ext. (Jr, Sr, III)',
|
|
null,
|
|
_extCtrl,
|
|
textCapitalization: TextCapitalization.words,
|
|
inputFormatters: [_TitleCaseTextInputFormatter()],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
const SizedBox(height: AppSizes.p20),
|
|
Text(
|
|
'Contact Information',
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w700,
|
|
color: textSecondary,
|
|
letterSpacing: 0.5,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
_field(
|
|
'Email Address',
|
|
Icons.email_outlined,
|
|
_emailCtrl,
|
|
onChanged: (_) => setState(() {}),
|
|
validator: (v) {
|
|
final email = _emailCtrl.text.trim();
|
|
final phone = _phoneCtrl.text.trim();
|
|
if (email.isEmpty && phone.isEmpty) {
|
|
return 'Either email or phone number is required';
|
|
}
|
|
if (v != null && v.trim().isNotEmpty) {
|
|
return AppValidators.validateEmail(v.trim());
|
|
}
|
|
return null;
|
|
},
|
|
keyboardType: TextInputType.emailAddress,
|
|
),
|
|
_buildEmailDomainSuggestions(
|
|
_emailCtrl,
|
|
() => setState(() {}),
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
_field(
|
|
'Phone Number (Starts with 09)',
|
|
Icons.phone_outlined,
|
|
_phoneCtrl,
|
|
onChanged: (_) => setState(() {}),
|
|
validator: (v) {
|
|
final email = _emailCtrl.text.trim();
|
|
final phone = _phoneCtrl.text.trim();
|
|
if (email.isEmpty && phone.isEmpty) {
|
|
return 'Either email or phone number is required';
|
|
}
|
|
if (v != null && v.trim().isNotEmpty) {
|
|
return AppValidators.validatePhone(v.trim());
|
|
}
|
|
return null;
|
|
},
|
|
maxLength: 11,
|
|
keyboardType: TextInputType.phone,
|
|
inputFormatters: [FilteringTextInputFormatter.digitsOnly],
|
|
),
|
|
const SizedBox(height: AppSizes.p20),
|
|
Text(
|
|
'Access Role',
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w700,
|
|
color: textSecondary,
|
|
letterSpacing: 0.5,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
_buildRoleDropdown(
|
|
currentUser: currentUser,
|
|
selectedRole: _selectedRole,
|
|
isSelf: isSelf,
|
|
onChanged: (val) => setState(() => _selectedRole = val),
|
|
),
|
|
const SizedBox(height: AppSizes.p24),
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: OutlinedButton(
|
|
onPressed: _cancelEditing,
|
|
style: OutlinedButton.styleFrom(
|
|
minimumSize: const Size.fromHeight(50),
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 20,
|
|
vertical: 14,
|
|
),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
child: const Text('Cancel'),
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: PrimaryButton(
|
|
label: 'Save',
|
|
isLoading: _isLoading,
|
|
onPressed: _handleSave,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildRoleDropdown({
|
|
required dynamic currentUser,
|
|
required String selectedRole,
|
|
required bool isSelf,
|
|
required ValueChanged<String> onChanged,
|
|
}) {
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
if (isSelf) {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
|
|
decoration: BoxDecoration(
|
|
color: isDark ? AppColors.darkSurface2 : Colors.grey.shade100,
|
|
borderRadius: BorderRadius.circular(AppSizes.radiusMedium),
|
|
border: Border.all(
|
|
color: isDark ? AppColors.darkBorder : Colors.grey.shade300,
|
|
),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Icon(Icons.shield, color: _roleColor(selectedRole), size: 20),
|
|
const SizedBox(width: 12),
|
|
Text(
|
|
selectedRole.toUpperCase(),
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
color: _roleColor(selectedRole),
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Icon(
|
|
Icons.lock,
|
|
color: isDark ? AppColors.darkTextMuted : Colors.grey,
|
|
size: 14,
|
|
),
|
|
const SizedBox(width: 4),
|
|
Text(
|
|
'(Your own role cannot be changed)',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: isDark ? AppColors.darkTextSecondary : Colors.grey,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
return DropdownButtonFormField<String>(
|
|
isExpanded: true,
|
|
initialValue: selectedRole,
|
|
decoration: const InputDecoration(
|
|
labelText: 'Role',
|
|
prefixIcon: Icon(Icons.shield_outlined, color: AppColors.textSecondary),
|
|
),
|
|
items: const [
|
|
DropdownMenuItem(value: 'teacher', child: Text('Teacher')),
|
|
DropdownMenuItem(value: 'admin', child: Text('Admin')),
|
|
],
|
|
onChanged: (val) {
|
|
if (val != null) onChanged(val);
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
// ------------------------------------------------------------
|
|
// ADD USER MODAL CONTENT (SINGLE CUSTOM MODAL FORM)
|
|
// ------------------------------------------------------------
|
|
class _AddUserModalContent extends ConsumerStatefulWidget {
|
|
const _AddUserModalContent();
|
|
|
|
@override
|
|
ConsumerState<_AddUserModalContent> createState() =>
|
|
_AddUserModalContentState();
|
|
}
|
|
|
|
class _AddUserModalContentState extends ConsumerState<_AddUserModalContent> {
|
|
final _formKey = GlobalKey<FormState>();
|
|
final _usernameCtrl = TextEditingController();
|
|
final _firstNameCtrl = TextEditingController();
|
|
final _middleNameCtrl = TextEditingController();
|
|
final _lastNameCtrl = TextEditingController();
|
|
final _extCtrl = TextEditingController();
|
|
final _emailCtrl = TextEditingController();
|
|
final _phoneCtrl = TextEditingController();
|
|
String _selectedRole = 'teacher';
|
|
bool _isLoading = false;
|
|
|
|
@override
|
|
void dispose() {
|
|
_usernameCtrl.dispose();
|
|
_firstNameCtrl.dispose();
|
|
_middleNameCtrl.dispose();
|
|
_lastNameCtrl.dispose();
|
|
_extCtrl.dispose();
|
|
_emailCtrl.dispose();
|
|
_phoneCtrl.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
Future<void> _handleCreate() async {
|
|
if (!(_formKey.currentState?.validate() ?? false)) return;
|
|
setState(() => _isLoading = true);
|
|
|
|
try {
|
|
final email = _emailCtrl.text.trim();
|
|
if (email.isNotEmpty) {
|
|
final validation =
|
|
await ref.read(usersProvider.notifier).validateEmail(email);
|
|
if (validation['valid'] == false) {
|
|
final reason = validation['reason']?.toString() ??
|
|
'Invalid or undeliverable email address';
|
|
if (!mounted) return;
|
|
showErrorDialog(
|
|
context,
|
|
'Invalid Email Address',
|
|
'The email address "$email" failed verification: $reason.\nPlease enter a valid, active email address.',
|
|
);
|
|
return;
|
|
}
|
|
}
|
|
|
|
final username = _usernameCtrl.text.trim();
|
|
await ref.read(usersProvider.notifier).createUser(
|
|
username: username,
|
|
firstName: _firstNameCtrl.text.trim(),
|
|
middleName: _middleNameCtrl.text.trim(),
|
|
lastName: _lastNameCtrl.text.trim(),
|
|
extension: _extCtrl.text.trim(),
|
|
role: _selectedRole,
|
|
email: _emailCtrl.text.trim(),
|
|
phone: _phoneCtrl.text.trim(),
|
|
);
|
|
|
|
if (!mounted) return;
|
|
Navigator.of(context).pop(true);
|
|
_showUserCreatedSuccessDialog(
|
|
context,
|
|
username: username,
|
|
email: _emailCtrl.text.trim(),
|
|
);
|
|
} catch (e) {
|
|
if (!mounted) return;
|
|
showErrorDialog(
|
|
context,
|
|
'Create User Failed',
|
|
e.toString().replaceAll('Exception: ', ''),
|
|
);
|
|
} finally {
|
|
if (mounted) setState(() => _isLoading = false);
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
final textSecondary =
|
|
isDark ? AppColors.darkTextSecondary : AppColors.textSecondary;
|
|
final isAndroid = Theme.of(context).platform == TargetPlatform.android ||
|
|
MediaQuery.of(context).size.width < 500;
|
|
|
|
return SingleChildScrollView(
|
|
padding: const EdgeInsets.all(AppSizes.p20),
|
|
child: Form(
|
|
key: _formKey,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Personal Information',
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w700,
|
|
color: textSecondary,
|
|
letterSpacing: 0.5,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
if (isAndroid) ...[
|
|
_field(
|
|
'First Name',
|
|
Icons.person_outline,
|
|
_firstNameCtrl,
|
|
required: true,
|
|
textCapitalization: TextCapitalization.words,
|
|
inputFormatters: [_TitleCaseTextInputFormatter()],
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
_field(
|
|
'Middle Name',
|
|
null,
|
|
_middleNameCtrl,
|
|
textCapitalization: TextCapitalization.words,
|
|
inputFormatters: [_TitleCaseTextInputFormatter()],
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
_field(
|
|
'Last Name',
|
|
null,
|
|
_lastNameCtrl,
|
|
required: true,
|
|
textCapitalization: TextCapitalization.words,
|
|
inputFormatters: [_TitleCaseTextInputFormatter()],
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
_field(
|
|
'Ext. (Jr, Sr, III)',
|
|
null,
|
|
_extCtrl,
|
|
textCapitalization: TextCapitalization.words,
|
|
inputFormatters: [_TitleCaseTextInputFormatter()],
|
|
),
|
|
] else ...[
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
flex: 3,
|
|
child: _field(
|
|
'First Name',
|
|
Icons.person_outline,
|
|
_firstNameCtrl,
|
|
required: true,
|
|
textCapitalization: TextCapitalization.words,
|
|
inputFormatters: [_TitleCaseTextInputFormatter()],
|
|
),
|
|
),
|
|
const SizedBox(width: AppSizes.p12),
|
|
Expanded(
|
|
flex: 2,
|
|
child: _field(
|
|
'Middle Name',
|
|
null,
|
|
_middleNameCtrl,
|
|
textCapitalization: TextCapitalization.words,
|
|
inputFormatters: [_TitleCaseTextInputFormatter()],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
flex: 3,
|
|
child: _field(
|
|
'Last Name',
|
|
null,
|
|
_lastNameCtrl,
|
|
required: true,
|
|
textCapitalization: TextCapitalization.words,
|
|
inputFormatters: [_TitleCaseTextInputFormatter()],
|
|
),
|
|
),
|
|
const SizedBox(width: AppSizes.p12),
|
|
Expanded(
|
|
flex: 2,
|
|
child: _field(
|
|
'Ext. (Jr, Sr, III)',
|
|
null,
|
|
_extCtrl,
|
|
textCapitalization: TextCapitalization.words,
|
|
inputFormatters: [_TitleCaseTextInputFormatter()],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
const SizedBox(height: AppSizes.p20),
|
|
Text(
|
|
'Account Details',
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w700,
|
|
color: textSecondary,
|
|
letterSpacing: 0.5,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
_field(
|
|
'Username',
|
|
Icons.alternate_email_rounded,
|
|
_usernameCtrl,
|
|
required: true,
|
|
onChanged: (_) => setState(() {}),
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
DropdownButtonFormField<String>(
|
|
isExpanded: true,
|
|
initialValue: _selectedRole,
|
|
decoration: const InputDecoration(
|
|
labelText: 'Role',
|
|
prefixIcon: Icon(
|
|
Icons.shield_outlined,
|
|
color: AppColors.textSecondary,
|
|
),
|
|
),
|
|
items: const [
|
|
DropdownMenuItem(value: 'teacher', child: Text('Teacher')),
|
|
DropdownMenuItem(value: 'admin', child: Text('Admin')),
|
|
],
|
|
onChanged: (val) {
|
|
if (val != null) setState(() => _selectedRole = val);
|
|
},
|
|
),
|
|
const SizedBox(height: AppSizes.p20),
|
|
Text(
|
|
'Contact Information',
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w700,
|
|
color: textSecondary,
|
|
letterSpacing: 0.5,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
_field(
|
|
'Email Address',
|
|
Icons.email_outlined,
|
|
_emailCtrl,
|
|
onChanged: (_) => setState(() {}),
|
|
validator: (v) {
|
|
final email = _emailCtrl.text.trim();
|
|
final phone = _phoneCtrl.text.trim();
|
|
if (email.isEmpty && phone.isEmpty) {
|
|
return 'Either email or phone number is required';
|
|
}
|
|
if (v != null && v.trim().isNotEmpty) {
|
|
return AppValidators.validateEmail(v.trim());
|
|
}
|
|
return null;
|
|
},
|
|
keyboardType: TextInputType.emailAddress,
|
|
),
|
|
_buildEmailDomainSuggestions(
|
|
_emailCtrl,
|
|
() => setState(() {}),
|
|
),
|
|
const SizedBox(height: AppSizes.p12),
|
|
_field(
|
|
'Phone Number (Starts with 09)',
|
|
Icons.phone_outlined,
|
|
_phoneCtrl,
|
|
onChanged: (_) => setState(() {}),
|
|
validator: (v) {
|
|
final email = _emailCtrl.text.trim();
|
|
final phone = _phoneCtrl.text.trim();
|
|
if (email.isEmpty && phone.isEmpty) {
|
|
return 'Either email or phone number is required';
|
|
}
|
|
if (v != null && v.trim().isNotEmpty) {
|
|
return AppValidators.validatePhone(v.trim());
|
|
}
|
|
return null;
|
|
},
|
|
maxLength: 11,
|
|
keyboardType: TextInputType.phone,
|
|
inputFormatters: [FilteringTextInputFormatter.digitsOnly],
|
|
),
|
|
const SizedBox(height: AppSizes.p16),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.primaryGreen.withValues(alpha: 0.07),
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: Border.all(
|
|
color: AppColors.primaryGreen.withValues(alpha: 0.3),
|
|
),
|
|
),
|
|
child: const Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Icon(
|
|
Icons.info_outline,
|
|
color: AppColors.primaryGreen,
|
|
size: 16,
|
|
),
|
|
SizedBox(width: 8),
|
|
Expanded(
|
|
child: Text(
|
|
'Temporary login credentials and account access instructions will be sent to the user\'s email.',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: AppColors.primaryGreen,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: AppSizes.p24),
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: OutlinedButton(
|
|
onPressed: () => Navigator.of(context).pop(false),
|
|
style: OutlinedButton.styleFrom(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 20,
|
|
vertical: 14,
|
|
),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
child: const Text('Cancel'),
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: PrimaryButton(
|
|
label: 'CREATE USER',
|
|
isLoading: _isLoading,
|
|
onPressed: _handleCreate,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
// ------------------------------------------------------------
|
|
// SHARED FORM FIELD HELPERS
|
|
// ------------------------------------------------------------
|
|
Widget _field(
|
|
String hint,
|
|
IconData? icon,
|
|
TextEditingController ctrl, {
|
|
bool required = false,
|
|
bool readOnly = false,
|
|
String? Function(String?)? validator,
|
|
TextCapitalization textCapitalization = TextCapitalization.none,
|
|
int? maxLength,
|
|
String? counterText,
|
|
TextInputType? keyboardType,
|
|
List<TextInputFormatter>? inputFormatters,
|
|
void Function(String)? onChanged,
|
|
}) {
|
|
return CustomTextField(
|
|
hintText: hint,
|
|
prefixIcon: icon,
|
|
controller: ctrl,
|
|
readOnly: readOnly,
|
|
onChanged: onChanged,
|
|
validator: validator ??
|
|
(required ? (v) => AppValidators.validateRequired(v, hint) : null),
|
|
textCapitalization: textCapitalization,
|
|
maxLength: maxLength,
|
|
counterText: counterText ?? (maxLength != null ? '' : null),
|
|
keyboardType: keyboardType,
|
|
inputFormatters: inputFormatters,
|
|
);
|
|
}
|
|
|
|
Widget _buildEmailDomainSuggestions(
|
|
TextEditingController emailCtrl,
|
|
VoidCallback onChanged,
|
|
) {
|
|
return ValueListenableBuilder<TextEditingValue>(
|
|
valueListenable: emailCtrl,
|
|
builder: (context, value, child) {
|
|
final text = value.text;
|
|
if (!text.contains('@')) return const SizedBox.shrink();
|
|
|
|
final parts = text.split('@');
|
|
final domainPart = parts.length > 1 ? parts[1].toLowerCase() : '';
|
|
|
|
const commonDomains = [
|
|
'gmail.com',
|
|
'yahoo.com',
|
|
'outlook.com',
|
|
'hotmail.com',
|
|
'deped.gov.ph',
|
|
];
|
|
final suggestions = commonDomains
|
|
.where((d) => d.startsWith(domainPart) && d != domainPart)
|
|
.toList();
|
|
|
|
if (suggestions.isEmpty) return const SizedBox.shrink();
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.only(top: 6.0, bottom: 4.0),
|
|
child: Wrap(
|
|
spacing: 8.0,
|
|
runSpacing: 6.0,
|
|
children: suggestions.map((domain) {
|
|
return ActionChip(
|
|
visualDensity: VisualDensity.compact,
|
|
avatar: const Icon(
|
|
Icons.alternate_email,
|
|
size: 13,
|
|
color: AppColors.primaryGreen,
|
|
),
|
|
label: Text('@$domain', style: const TextStyle(fontSize: 11.5)),
|
|
onPressed: () {
|
|
emailCtrl.text = '${parts[0]}@$domain';
|
|
emailCtrl.selection = TextSelection.fromPosition(
|
|
TextPosition(offset: emailCtrl.text.length),
|
|
);
|
|
onChanged();
|
|
},
|
|
);
|
|
}).toList(),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
void _showUserCreatedSuccessDialog(
|
|
BuildContext ctx, {
|
|
required String username,
|
|
String? email,
|
|
}) {
|
|
final isDark = Theme.of(ctx).brightness == Brightness.dark;
|
|
showDialog(
|
|
context: ctx,
|
|
barrierDismissible: false,
|
|
builder: (dialogCtx) => AlertDialog(
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppSizes.radiusLarge),
|
|
),
|
|
icon: const Icon(
|
|
Icons.check_circle,
|
|
color: AppColors.success,
|
|
size: 48,
|
|
),
|
|
title: const Text(
|
|
'User Created Successfully!',
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(fontWeight: FontWeight.bold),
|
|
),
|
|
content: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
_credentialRow(dialogCtx, 'Username', username),
|
|
const SizedBox(height: 16),
|
|
Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.primaryGreen.withValues(alpha: 0.08),
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: Border.all(
|
|
color: AppColors.primaryGreen.withValues(alpha: 0.25),
|
|
),
|
|
),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Icon(
|
|
Icons.mark_email_read_outlined,
|
|
color: AppColors.primaryGreen,
|
|
size: 20,
|
|
),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: Text(
|
|
email != null && email.isNotEmpty
|
|
? 'An email with login details and instructions has been sent to $email.'
|
|
: 'User account created successfully for @$username.',
|
|
style: TextStyle(
|
|
fontSize: 12.5,
|
|
fontWeight: FontWeight.w500,
|
|
color: isDark
|
|
? AppColors.darkTextPrimary
|
|
: AppColors.textPrimary,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
actions: [
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: ElevatedButton(
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: AppColors.primaryGreen,
|
|
foregroundColor: Colors.white,
|
|
padding: const EdgeInsets.symmetric(vertical: 12),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
onPressed: () => Navigator.of(dialogCtx).pop(),
|
|
child: const Text('DONE'),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _credentialRow(
|
|
BuildContext context,
|
|
String label,
|
|
String value, {
|
|
bool highlight = false,
|
|
}) {
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
|
|
decoration: BoxDecoration(
|
|
color: highlight
|
|
? AppColors.primaryGreen.withValues(alpha: 0.07)
|
|
: (isDark ? AppColors.darkSurface2 : Colors.grey.shade50),
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: Border.all(
|
|
color: highlight
|
|
? AppColors.primaryGreen.withValues(alpha: 0.3)
|
|
: (isDark ? AppColors.darkBorder : Colors.grey.shade200),
|
|
),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
label,
|
|
style: TextStyle(
|
|
fontSize: 11,
|
|
color: isDark ? AppColors.darkTextSecondary : Colors.grey,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
value,
|
|
style: TextStyle(
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.bold,
|
|
color: highlight
|
|
? AppColors.primaryGreen
|
|
: (isDark
|
|
? AppColors.darkTextPrimary
|
|
: AppColors.textPrimary),
|
|
letterSpacing: 0.5,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// ============================================================
|
|
// CUSTOM RESET PASSWORD CONFIRMATION DIALOG
|
|
// ============================================================
|
|
// ============================================================
|
|
// CUSTOM RESET PASSWORD CONFIRMATION DIALOG (EMAIL LINK)
|
|
// ============================================================
|
|
class _ResetPasswordConfirmationDialog extends StatefulWidget {
|
|
final SystemUser user;
|
|
const _ResetPasswordConfirmationDialog({required this.user});
|
|
|
|
@override
|
|
State<_ResetPasswordConfirmationDialog> createState() =>
|
|
_ResetPasswordConfirmationDialogState();
|
|
}
|
|
|
|
class _ResetPasswordConfirmationDialogState
|
|
extends State<_ResetPasswordConfirmationDialog> {
|
|
final _passwordCtrl = TextEditingController();
|
|
bool _obscurePassword = true;
|
|
int _selectedExpiration = 15;
|
|
|
|
static const _expirationOptions = [
|
|
{'label': '15 Minutes (Recommended)', 'value': 15},
|
|
{'label': '30 Minutes', 'value': 30},
|
|
{'label': '1 Hour', 'value': 60},
|
|
{'label': '24 Hours', 'value': 1440},
|
|
];
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
SoundService.playWarning();
|
|
HapticService.warning();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_passwordCtrl.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _submit() {
|
|
final email = widget.user.email?.trim() ?? '';
|
|
final emailError = AppValidators.validateEmail(email);
|
|
if (email.isEmpty || emailError != null) {
|
|
showErrorDialog(
|
|
context,
|
|
'Invalid Email Address',
|
|
'User @${widget.user.username} does not have a valid registered email address. Please update the user profile before sending a reset link.',
|
|
);
|
|
return;
|
|
}
|
|
|
|
final password = _passwordCtrl.text.trim();
|
|
|
|
if (password.isEmpty) {
|
|
showErrorDialog(
|
|
context,
|
|
'Missing Password',
|
|
'You must confirm using your admin password to send a password reset link.',
|
|
);
|
|
return;
|
|
}
|
|
|
|
Navigator.pop(context, {
|
|
'password': password,
|
|
'expirationMinutes': _selectedExpiration,
|
|
});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
final email = widget.user.email?.trim() ?? '';
|
|
final hasValidEmail =
|
|
email.isNotEmpty && AppValidators.validateEmail(email) == null;
|
|
|
|
return Dialog(
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppSizes.radiusLarge),
|
|
),
|
|
backgroundColor: isDark ? AppColors.darkSurfaceCard : Colors.white,
|
|
insetPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
|
|
child: ConstrainedBox(
|
|
constraints: const BoxConstraints(maxWidth: 440),
|
|
child: SingleChildScrollView(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(AppSizes.p24),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(8),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.primaryGreen.withValues(alpha: isDark ? 0.25 : 0.12),
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
child: const Icon(
|
|
Icons.mark_email_read_rounded,
|
|
color: AppColors.primaryGreen,
|
|
size: 22,
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Send Reset Link',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
color: isDark ? AppColors.darkTextPrimary : AppColors.textPrimary,
|
|
),
|
|
),
|
|
Text(
|
|
'Email time-limited password reset link',
|
|
style: TextStyle(
|
|
fontSize: 11,
|
|
color: isDark ? AppColors.darkTextSecondary : AppColors.textSecondary,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
IconButton(
|
|
icon: const Icon(Icons.close, size: 20),
|
|
onPressed: () => Navigator.pop(context),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 16),
|
|
|
|
// User Info Card
|
|
Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: isDark ? AppColors.darkSurface2 : const Color(0xFFF8FAFC),
|
|
borderRadius: BorderRadius.circular(10),
|
|
border: Border.all(
|
|
color: isDark ? AppColors.darkBorder : Colors.grey.shade200,
|
|
),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
CircleAvatar(
|
|
radius: 18,
|
|
backgroundColor: AppColors.primaryGreen.withValues(alpha: 0.15),
|
|
child: Text(
|
|
widget.user.username.isNotEmpty
|
|
? widget.user.username[0].toUpperCase()
|
|
: '?',
|
|
style: const TextStyle(
|
|
color: AppColors.primaryGreen,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
widget.user.fullName.isNotEmpty
|
|
? widget.user.fullName
|
|
: widget.user.username,
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.bold,
|
|
color: isDark ? AppColors.darkTextPrimary : AppColors.textPrimary,
|
|
),
|
|
),
|
|
Text(
|
|
'@${widget.user.username} · ${widget.user.role.toUpperCase()}',
|
|
style: TextStyle(
|
|
fontSize: 11,
|
|
color: isDark ? AppColors.darkTextSecondary : AppColors.textSecondary,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
|
|
// Recipient Email Card / Warning
|
|
if (hasValidEmail)
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
|
decoration: BoxDecoration(
|
|
color: Colors.blue.withValues(alpha: isDark ? 0.12 : 0.08),
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: Border.all(
|
|
color: Colors.blue.withValues(alpha: isDark ? 0.3 : 0.2),
|
|
),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
const Icon(Icons.email_outlined, size: 16, color: Colors.blue),
|
|
const SizedBox(width: 8),
|
|
Expanded(
|
|
child: Text(
|
|
widget.user.email!,
|
|
style: const TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.blue,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
)
|
|
else
|
|
Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: Colors.red.withValues(alpha: isDark ? 0.15 : 0.08),
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: Border.all(
|
|
color: Colors.red.withValues(alpha: isDark ? 0.4 : 0.25),
|
|
),
|
|
),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Icon(Icons.warning_amber_rounded, size: 18, color: Colors.redAccent),
|
|
const SizedBox(width: 8),
|
|
Expanded(
|
|
child: Text(
|
|
email.isNotEmpty
|
|
? 'The registered email "$email" has an invalid email format. Please edit this user and provide a valid email before sending a reset link.'
|
|
: 'No email registered. Please edit this user and provide a valid email before sending a reset link.',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: isDark ? const Color(0xFFFCA5A5) : Colors.red.shade900,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
if (hasValidEmail) ...[
|
|
const SizedBox(height: 16),
|
|
// Expiration selector
|
|
DropdownButtonFormField<int>(
|
|
key: ValueKey('reset_link_expiration_$_selectedExpiration'),
|
|
initialValue: _selectedExpiration,
|
|
decoration: const InputDecoration(
|
|
labelText: 'Link Expiration Time',
|
|
prefixIcon: Icon(Icons.timer_outlined),
|
|
isDense: true,
|
|
),
|
|
items: _expirationOptions.map((opt) {
|
|
return DropdownMenuItem<int>(
|
|
value: opt['value'] as int,
|
|
child: Text(opt['label'] as String, style: const TextStyle(fontSize: 13)),
|
|
);
|
|
}).toList(),
|
|
onChanged: (val) {
|
|
if (val != null) setState(() => _selectedExpiration = val);
|
|
},
|
|
),
|
|
const SizedBox(height: 16),
|
|
|
|
// Admin Password
|
|
CustomTextField(
|
|
hintText: 'Your Admin Password',
|
|
prefixIcon: Icons.lock_outline,
|
|
controller: _passwordCtrl,
|
|
isPassword: true,
|
|
obscureText: _obscurePassword,
|
|
onToggleVisibility: () =>
|
|
setState(() => _obscurePassword = !_obscurePassword),
|
|
),
|
|
],
|
|
|
|
const SizedBox(height: 24),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
children: [
|
|
TextButton(
|
|
onPressed: () => Navigator.pop(context),
|
|
child: const Text('CANCEL'),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Flexible(
|
|
child: ElevatedButton.icon(
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: hasValidEmail ? AppColors.primaryGreen : Colors.grey,
|
|
foregroundColor: Colors.white,
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 20,
|
|
vertical: 12,
|
|
),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(
|
|
AppSizes.radiusMedium,
|
|
),
|
|
),
|
|
),
|
|
onPressed: hasValidEmail ? _submit : null,
|
|
icon: const Icon(Icons.send_rounded, size: 16),
|
|
label: const Text(
|
|
'SEND LINK',
|
|
style: TextStyle(fontWeight: FontWeight.bold),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// FORMATTER FOR DESKTOP TITLE CASE
|
|
// ============================================================
|
|
class _TitleCaseTextInputFormatter extends TextInputFormatter {
|
|
@override
|
|
TextEditingValue formatEditUpdate(
|
|
TextEditingValue oldValue,
|
|
TextEditingValue newValue,
|
|
) {
|
|
if (newValue.text.isEmpty) {
|
|
return newValue;
|
|
}
|
|
|
|
final text = newValue.text;
|
|
final buffer = StringBuffer();
|
|
bool capitalizeNext = true;
|
|
|
|
for (int i = 0; i < text.length; i++) {
|
|
final char = text[i];
|
|
if (char == ' ' || char == '-' || char == '.') {
|
|
buffer.write(char);
|
|
capitalizeNext = true;
|
|
} else {
|
|
if (capitalizeNext) {
|
|
buffer.write(char.toUpperCase());
|
|
capitalizeNext = false;
|
|
} else {
|
|
buffer.write(char);
|
|
}
|
|
}
|
|
}
|
|
|
|
return TextEditingValue(
|
|
text: buffer.toString(),
|
|
selection: newValue.selection,
|
|
);
|
|
}
|
|
}
|
|
|
|
// ── Custom Dedicated Thin Horizontal Scrollbar Under Filters ─────────────────
|
|
class _CustomHorizontalScrollBar extends StatefulWidget {
|
|
final ScrollController controller;
|
|
final bool isDark;
|
|
|
|
const _CustomHorizontalScrollBar({
|
|
required this.controller,
|
|
required this.isDark,
|
|
});
|
|
|
|
@override
|
|
State<_CustomHorizontalScrollBar> createState() => _CustomHorizontalScrollBarState();
|
|
}
|
|
|
|
class _CustomHorizontalScrollBarState extends State<_CustomHorizontalScrollBar> {
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
widget.controller.addListener(_onScroll);
|
|
}
|
|
|
|
@override
|
|
void didUpdateWidget(covariant _CustomHorizontalScrollBar oldWidget) {
|
|
super.didUpdateWidget(oldWidget);
|
|
if (oldWidget.controller != widget.controller) {
|
|
oldWidget.controller.removeListener(_onScroll);
|
|
widget.controller.addListener(_onScroll);
|
|
}
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
widget.controller.removeListener(_onScroll);
|
|
super.dispose();
|
|
}
|
|
|
|
void _onScroll() {
|
|
if (mounted) setState(() {});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return AnimatedBuilder(
|
|
animation: widget.controller,
|
|
builder: (context, _) {
|
|
if (!widget.controller.hasClients ||
|
|
!widget.controller.position.hasContentDimensions ||
|
|
widget.controller.position.maxScrollExtent <= 0) {
|
|
return const SizedBox.shrink();
|
|
}
|
|
|
|
final pos = widget.controller.position;
|
|
final maxScroll = pos.maxScrollExtent;
|
|
final currentScroll = pos.pixels.clamp(0.0, maxScroll);
|
|
final progress = maxScroll > 0 ? currentScroll / maxScroll : 0.0;
|
|
final viewportFraction = (pos.viewportDimension /
|
|
(pos.maxScrollExtent + pos.viewportDimension))
|
|
.clamp(0.15, 0.85);
|
|
|
|
final trackColor = widget.isDark
|
|
? AppColors.darkBorder.withValues(alpha: 0.5)
|
|
: const Color(0xFFE2E8F0);
|
|
final thumbColor = widget.isDark
|
|
? const Color(0xFFE2E8F0)
|
|
: const Color(0xFF334155);
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.only(top: 4, bottom: 2),
|
|
child: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
final trackWidth = constraints.maxWidth;
|
|
final thumbWidth =
|
|
(trackWidth * viewportFraction).clamp(36.0, trackWidth);
|
|
final maxThumbOffset = trackWidth - thumbWidth;
|
|
final thumbOffset = maxThumbOffset * progress;
|
|
|
|
return GestureDetector(
|
|
behavior: HitTestBehavior.opaque,
|
|
onHorizontalDragUpdate: (details) {
|
|
if (maxThumbOffset <= 0) return;
|
|
final deltaFraction = details.primaryDelta! / maxThumbOffset;
|
|
final newScroll = (widget.controller.offset +
|
|
deltaFraction * maxScroll)
|
|
.clamp(0.0, maxScroll);
|
|
widget.controller.jumpTo(newScroll);
|
|
},
|
|
child: Container(
|
|
height: 10,
|
|
width: double.infinity,
|
|
alignment: Alignment.centerLeft,
|
|
child: Stack(
|
|
alignment: Alignment.centerLeft,
|
|
children: [
|
|
// Thin Track Line
|
|
Container(
|
|
height: 3,
|
|
width: trackWidth,
|
|
decoration: BoxDecoration(
|
|
color: trackColor,
|
|
borderRadius: BorderRadius.circular(1.5),
|
|
),
|
|
),
|
|
// Thin Thumb Line
|
|
Positioned(
|
|
left: thumbOffset,
|
|
child: Container(
|
|
height: 3,
|
|
width: thumbWidth,
|
|
decoration: BoxDecoration(
|
|
color: thumbColor,
|
|
borderRadius: BorderRadius.circular(1.5),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|