update info

This commit is contained in:
Phuoc Nguyen
2025-11-20 10:12:24 +07:00
parent 54cb7d0fdd
commit 0708ed7d6f
17 changed files with 2144 additions and 161 deletions

View File

@@ -8,14 +8,20 @@
/// - Logout button
library;
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/database/hive_initializer.dart';
import 'package:worker/core/database/models/enums.dart';
import 'package:worker/core/router/app_router.dart';
import 'package:worker/core/theme/colors.dart';
import 'package:worker/features/account/domain/entities/user_info.dart'
as domain;
import 'package:worker/features/account/presentation/providers/user_info_provider.dart'
hide UserInfo;
import 'package:worker/features/account/presentation/widgets/account_menu_item.dart';
import 'package:worker/features/auth/presentation/providers/auth_provider.dart';
@@ -27,30 +33,98 @@ class AccountPage extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final userInfoAsync = ref.watch(userInfoProvider);
return Scaffold(
backgroundColor: const Color(0xFFF4F6F8),
body: SafeArea(
child: SingleChildScrollView(
child: Column(
spacing: AppSpacing.md,
children: [
// Simple Header
_buildHeader(),
child: userInfoAsync.when(
loading: () => const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(color: AppColors.primaryBlue),
SizedBox(height: AppSpacing.md),
Text(
'Đang tải thông tin...',
style: TextStyle(
fontSize: 14,
color: AppColors.grey500,
),
),
],
),
),
error: (error, stack) => Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const FaIcon(
FontAwesomeIcons.circleExclamation,
size: 64,
color: AppColors.danger,
),
const SizedBox(height: AppSpacing.lg),
const Text(
'Không thể tải thông tin tài khoản',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
),
textAlign: TextAlign.center,
),
const SizedBox(height: AppSpacing.md),
Text(
error.toString(),
style: const TextStyle(
fontSize: 14,
color: AppColors.grey500,
),
textAlign: TextAlign.center,
),
const SizedBox(height: AppSpacing.lg),
ElevatedButton.icon(
onPressed: () =>
ref.read(userInfoProvider.notifier).refresh(),
icon:
const FaIcon(FontAwesomeIcons.arrowsRotate, size: 16),
label: const Text('Thử lại'),
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.primaryBlue,
foregroundColor: AppColors.white,
),
),
],
),
),
data: (userInfo) => RefreshIndicator(
onRefresh: () async {
await ref.read(userInfoProvider.notifier).refresh();
},
child: SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
child: Column(
spacing: AppSpacing.md,
children: [
// Simple Header
_buildHeader(),
// User Profile Card
_buildProfileCard(context),
// User Profile Card with API data
_buildProfileCard(context, userInfo),
// Account Menu Section
_buildAccountMenu(context),
// Account Menu Section
_buildAccountMenu(context),
// Support Section
_buildSupportSection(context),
// Support Section
_buildSupportSection(context),
// Logout Button
_buildLogoutButton(context, ref),
// Logout Button
_buildLogoutButton(context, ref),
const SizedBox(height: AppSpacing.lg),
],
const SizedBox(height: AppSpacing.lg),
],
),
),
),
),
),
@@ -84,7 +158,10 @@ class AccountPage extends ConsumerWidget {
}
/// Build user profile card with avatar and info
Widget _buildProfileCard(BuildContext context) {
Widget _buildProfileCard(
BuildContext context,
domain.UserInfo userInfo,
) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
padding: const EdgeInsets.all(AppSpacing.md),
@@ -101,54 +178,109 @@ class AccountPage extends ConsumerWidget {
),
child: Row(
children: [
// Avatar with gradient background
Container(
width: 80,
height: 80,
decoration: const BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [Color(0xFF005B9A), Color(0xFF38B6FF)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: const Center(
child: Text(
'LQ',
style: TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.w700,
// Avatar with API data or gradient fallback
userInfo.avatarUrl != null
? ClipOval(
child: CachedNetworkImage(
imageUrl: userInfo.avatarUrl!,
width: 80,
height: 80,
fit: BoxFit.cover,
placeholder: (context, url) => Container(
width: 80,
height: 80,
decoration: const BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [Color(0xFF005B9A), Color(0xFF38B6FF)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: const Center(
child: CircularProgressIndicator(
color: Colors.white,
strokeWidth: 2,
),
),
),
errorWidget: (context, url, error) => Container(
width: 80,
height: 80,
decoration: const BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [Color(0xFF005B9A), Color(0xFF38B6FF)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Center(
child: Text(
userInfo.initials,
style: const TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.w700,
),
),
),
),
),
)
: Container(
width: 80,
height: 80,
decoration: const BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [Color(0xFF005B9A), Color(0xFF38B6FF)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Center(
child: Text(
userInfo.initials,
style: const TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.w700,
),
),
),
),
),
),
),
const SizedBox(width: AppSpacing.md),
// User info
// User info from API
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
spacing: AppSpacing.xs,
children: [
const Text(
'La Nguyen Quynh',
style: TextStyle(
Text(
userInfo.fullName,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppColors.grey900,
),
),
const SizedBox(height: 4),
const Text(
'Kiến trúc sư · Hạng Diamond',
style: TextStyle(fontSize: 13, color: AppColors.grey500),
),
const SizedBox(height: 4),
const Text(
'0983 441 099',
style: TextStyle(fontSize: 13, color: AppColors.primaryBlue),
Text(
'${_getRoleDisplayName(userInfo.role)} · Hạng ${userInfo.tierDisplayName}',
style: const TextStyle(
fontSize: 13,
color: AppColors.grey500,
),
),
if (userInfo.phoneNumber != null)
Text(
userInfo.phoneNumber!,
style: const TextStyle(
fontSize: 13,
color: AppColors.primaryBlue,
),
),
],
),
),
@@ -472,4 +604,18 @@ class AccountPage extends ConsumerWidget {
}
}
}
/// Get Vietnamese display name for user role
String _getRoleDisplayName(UserRole role) {
switch (role) {
case UserRole.customer:
return 'Khách hàng';
case UserRole.distributor:
return 'Đại lý phân phối';
case UserRole.admin:
return 'Quản trị viên';
case UserRole.staff:
return 'Nhân viên';
}
}
}

View File

@@ -18,6 +18,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:image_picker/image_picker.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';
import 'package:worker/features/account/presentation/providers/user_info_provider.dart' hide UserInfo;
/// Profile Edit Page
///
@@ -27,47 +28,128 @@ class ProfileEditPage extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
// Watch user info from API
final userInfoAsync = ref.watch(userInfoProvider);
// Form key for validation
final formKey = useMemoized(() => GlobalKey<FormState>());
// Image picker
final selectedImage = useState<File?>(null);
// Form controllers
final nameController = useTextEditingController(text: 'Hoàng Minh Hiệp');
final phoneController = useTextEditingController(text: '0347302911');
final emailController = useTextEditingController(
text: 'hoanghiep@example.com',
);
final birthDateController = useTextEditingController(text: '15/03/1985');
final idNumberController = useTextEditingController(text: '123456789012');
final taxIdController = useTextEditingController(text: '0359837618');
final companyController = useTextEditingController(
text: 'Công ty TNHH Xây dựng ABC',
);
final addressController = useTextEditingController(
text: '123 Man Thiện, Thủ Đức, Hồ Chí Minh',
);
final experienceController = useTextEditingController(text: '10');
// Dropdown values
final selectedGender = useState<String>('male');
final selectedPosition = useState<String>('contractor');
// Has unsaved changes
final hasChanges = useState<bool>(false);
return PopScope(
canPop: !hasChanges.value,
onPopInvokedWithResult: (didPop, result) async {
if (didPop) return;
return userInfoAsync.when(
loading: () => Scaffold(
backgroundColor: const Color(0xFFF4F6F8),
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
title: const Text(
'Thông tin cá nhân',
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
centerTitle: false,
),
body: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(color: AppColors.primaryBlue),
SizedBox(height: AppSpacing.md),
Text(
'Đang tải thông tin...',
style: TextStyle(
fontSize: 14,
color: AppColors.grey500,
),
),
],
),
),
),
error: (error, stack) => Scaffold(
backgroundColor: const Color(0xFFF4F6F8),
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
leading: IconButton(
icon: const FaIcon(FontAwesomeIcons.arrowLeft, color: Colors.black, size: 20),
onPressed: () => context.pop(),
),
title: const Text(
'Thông tin cá nhân',
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
centerTitle: false,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const FaIcon(
FontAwesomeIcons.circleExclamation,
size: 64,
color: AppColors.danger,
),
const SizedBox(height: AppSpacing.lg),
const Text(
'Không thể tải thông tin người dùng',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: AppSpacing.md),
ElevatedButton.icon(
onPressed: () => ref.read(userInfoProvider.notifier).refresh(),
icon: const FaIcon(FontAwesomeIcons.arrowsRotate, size: 16),
label: const Text('Thử lại'),
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.primaryBlue,
foregroundColor: AppColors.white,
),
),
],
),
),
),
data: (userInfo) {
// Form controllers populated with user data
final nameController = useTextEditingController(text: userInfo.fullName);
final phoneController = useTextEditingController(text: userInfo.phoneNumber ?? '');
final emailController = useTextEditingController(text: userInfo.email ?? '');
final birthDateController = useTextEditingController(text: ''); // TODO: Add birthdate to API
final idNumberController = useTextEditingController(text: userInfo.cccd ?? '');
final taxIdController = useTextEditingController(text: userInfo.taxId ?? '');
final companyController = useTextEditingController(text: userInfo.companyName ?? '');
final addressController = useTextEditingController(text: userInfo.address ?? '');
final experienceController = useTextEditingController(text: ''); // TODO: Add experience to API
final shouldPop = await _showUnsavedChangesDialog(context);
if (shouldPop == true && context.mounted) {
Navigator.of(context).pop();
}
},
child: Scaffold(
// Dropdown values
final selectedGender = useState<String>('male'); // TODO: Add gender to API
final selectedPosition = useState<String>('contractor'); // TODO: Map from userInfo.role
return PopScope(
canPop: !hasChanges.value,
onPopInvokedWithResult: (didPop, result) async {
if (didPop) return;
final shouldPop = await _showUnsavedChangesDialog(context);
if (shouldPop == true && context.mounted) {
Navigator.of(context).pop();
}
},
child: Scaffold(
backgroundColor: const Color(0xFFF4F6F8),
appBar: AppBar(
backgroundColor: Colors.white,
@@ -107,7 +189,12 @@ class ProfileEditPage extends HookConsumerWidget {
const SizedBox(height: AppSpacing.md),
// Profile Avatar Section
_buildAvatarSection(context, selectedImage),
_buildAvatarSection(
context,
selectedImage,
userInfo.initials,
userInfo.avatarUrl,
),
const SizedBox(height: AppSpacing.md),
@@ -276,7 +363,9 @@ class ProfileEditPage extends HookConsumerWidget {
),
),
),
),
),
);
},
);
}
@@ -284,70 +373,83 @@ class ProfileEditPage extends HookConsumerWidget {
Widget _buildAvatarSection(
BuildContext context,
ValueNotifier<File?> selectedImage,
String initials,
String? avatarUrl,
) {
return Center(
child: Stack(
children: [
// Avatar
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColors.primaryBlue,
image: selectedImage.value != null
? DecorationImage(
image: FileImage(selectedImage.value!),
fit: BoxFit.cover,
return Padding(
padding: const EdgeInsets.symmetric(vertical: AppSpacing.sm),
child: Center(
child: Stack(
clipBehavior: Clip.none,
children: [
// Avatar
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColors.primaryBlue,
image: selectedImage.value != null
? DecorationImage(
image: FileImage(selectedImage.value!),
fit: BoxFit.cover,
)
: avatarUrl != null
? DecorationImage(
image: NetworkImage(avatarUrl),
fit: BoxFit.cover,
)
: null,
),
child: selectedImage.value == null && avatarUrl == null
? Center(
child: Text(
initials,
style: const TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
)
: null,
),
child: selectedImage.value == null
? const Center(
child: Text(
'HMH',
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
)
: null,
),
// Edit Button
Positioned(
bottom: 0,
right: 0,
child: GestureDetector(
onTap: () async {
await _pickImage(context, selectedImage);
},
child: Container(
width: 32,
height: 32,
decoration: BoxDecoration(
color: AppColors.primaryBlue,
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 2),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.1),
blurRadius: 4,
offset: const Offset(0, 2),
// Edit Button
Positioned(
bottom: 0,
right: 0,
child: GestureDetector(
onTap: () async {
await _pickImage(context, selectedImage);
},
child: Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: AppColors.primaryBlue,
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 3),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.15),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: const Center(
child: FaIcon(
FontAwesomeIcons.camera,
size: 16,
color: Colors.white,
),
],
),
child: const FaIcon(
FontAwesomeIcons.camera,
size: 14,
color: Colors.white,
),
),
),
),
),
],
],
),
),
);
}
@@ -473,7 +575,18 @@ class ProfileEditPage extends HookConsumerWidget {
horizontal: 16,
vertical: 12,
),
suffixIcon: const FaIcon(FontAwesomeIcons.calendar, size: 18),
suffixIcon: const Padding(
padding: EdgeInsets.only(right: 12),
child: FaIcon(
FontAwesomeIcons.calendar,
size: 20,
color: AppColors.grey500,
),
),
suffixIconConstraints: const BoxConstraints(
minWidth: 48,
minHeight: 48,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.input),
borderSide: const BorderSide(color: Color(0xFFE2E8F0)),
@@ -517,6 +630,14 @@ class ProfileEditPage extends HookConsumerWidget {
DropdownButtonFormField<String>(
initialValue: value,
onChanged: onChanged,
icon: const Padding(
padding: EdgeInsets.only(right: 12),
child: FaIcon(
FontAwesomeIcons.chevronDown,
size: 16,
color: AppColors.grey500,
),
),
decoration: InputDecoration(
filled: true,
fillColor: const Color(0xFFF8FAFC),