717 lines
27 KiB
Dart
717 lines
27 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||
|
||
import 'package:kmobile/data/models/user.dart';
|
||
import 'package:kmobile/di/injection.dart';
|
||
import 'package:kmobile/features/accounts/screens/account_info_screen.dart';
|
||
import 'package:kmobile/features/accounts/screens/account_statement_screen.dart';
|
||
import 'package:kmobile/features/accounts/screens/all_accounts_screen.dart';
|
||
import 'package:kmobile/features/auth/controllers/auth_cubit.dart';
|
||
import 'package:kmobile/features/auth/controllers/auth_state.dart';
|
||
import 'package:kmobile/features/customer_info/screens/customer_info_screen.dart';
|
||
import 'package:kmobile/features/beneficiaries/screens/manage_beneficiaries_screen.dart';
|
||
import 'package:kmobile/features/enquiry/screens/enquiry_screen.dart';
|
||
import 'package:kmobile/features/fund_transfer/screens/fund_transfer_screen.dart';
|
||
import 'package:kmobile/features/profile/profile_screen.dart';
|
||
import 'package:kmobile/features/quick_pay/screens/quick_pay_screen.dart';
|
||
import 'package:kmobile/features/service/screens/branch_locator_screen.dart';
|
||
import 'package:kmobile/security/secure_storage.dart';
|
||
import 'package:local_auth/local_auth.dart';
|
||
import 'package:material_symbols_icons/material_symbols_icons.dart';
|
||
import 'package:google_fonts/google_fonts.dart';
|
||
import 'package:shimmer/shimmer.dart';
|
||
import '../../../l10n/app_localizations.dart';
|
||
|
||
class DashboardScreen extends StatefulWidget {
|
||
const DashboardScreen({super.key});
|
||
|
||
@override
|
||
State<DashboardScreen> createState() => _DashboardScreenState();
|
||
}
|
||
|
||
class _DashboardScreenState extends State<DashboardScreen>
|
||
with SingleTickerProviderStateMixin, RouteAware {
|
||
int selectedAccountIndex = 0;
|
||
Map<String, bool> _visibilityMap = {};
|
||
bool isRefreshing = false;
|
||
|
||
bool _biometricPromptShown = false;
|
||
bool _txInitialized = false;
|
||
PageController? _pageController;
|
||
final routeObserver = getIt<RouteObserver<ModalRoute<void>>>();
|
||
|
||
@override
|
||
void didChangeDependencies() {
|
||
super.didChangeDependencies();
|
||
routeObserver.subscribe(this, ModalRoute.of(context)!);
|
||
}
|
||
|
||
@override
|
||
void dispose() {
|
||
routeObserver.unsubscribe(this);
|
||
_pageController?.dispose();
|
||
_visibilityMap.clear();
|
||
super.dispose();
|
||
}
|
||
|
||
@override
|
||
void didPushNext() {
|
||
// This method is called when another route is pushed on top of this one.
|
||
// We clear the map and call setState to ensure the UI is updated
|
||
// if the user navigates back.
|
||
setState(() {
|
||
_visibilityMap.clear();
|
||
});
|
||
}
|
||
|
||
Widget _buildAccountCard(User user, bool isSelected) {
|
||
final theme = Theme.of(context);
|
||
final bool isCardVisible = _visibilityMap[user.accountNo] ?? false;
|
||
// Animated scale for the selected card
|
||
final scale = isSelected ? 1.02 : 0.9;
|
||
return Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 3.0),
|
||
child: AnimatedScale(
|
||
duration: const Duration(milliseconds: 200),
|
||
scale: scale,
|
||
child: Container(
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: 18,
|
||
vertical: 10,
|
||
),
|
||
decoration: BoxDecoration(
|
||
color: const Color(0xFF01A04C),
|
||
borderRadius: BorderRadius.circular(20),
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// Top section with account type and number (no refresh button here)
|
||
Row(
|
||
children: [
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
getFullAccountType(user.accountType),
|
||
style: TextStyle(
|
||
color: theme.colorScheme.onPrimary,
|
||
fontSize: 16,
|
||
fontWeight: FontWeight.w700,
|
||
),
|
||
),
|
||
Text(
|
||
user.accountNo ?? 'N/A',
|
||
style: TextStyle(
|
||
color: theme.colorScheme.onPrimary,
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w700,
|
||
),
|
||
overflow: TextOverflow.ellipsis,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
if (isSelected) // Show logo only if card is selected
|
||
CircleAvatar(
|
||
radius: 20,
|
||
backgroundColor: Colors.white,
|
||
child: Padding(
|
||
padding: const EdgeInsets.all(2.0),
|
||
child: ClipOval(
|
||
child: Image.asset(
|
||
'assets/images/logo.png',
|
||
width: 30,
|
||
height: 30,
|
||
fit: BoxFit.cover,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const Spacer(),
|
||
// Bottom section with balance and combined toggle/refresh
|
||
Row(
|
||
mainAxisAlignment: MainAxisAlignment.start,
|
||
children: [
|
||
if (isRefreshing && isSelected)
|
||
Expanded(child: _buildBalanceShimmer())
|
||
else
|
||
Expanded(
|
||
child: FittedBox(
|
||
fit: BoxFit.scaleDown,
|
||
alignment: Alignment.centerLeft,
|
||
child: Row(
|
||
children: [
|
||
Text(
|
||
"₹ ",
|
||
style: TextStyle(
|
||
color: theme.colorScheme.onPrimary,
|
||
fontSize: 40,
|
||
fontWeight: FontWeight.w700,
|
||
),
|
||
),
|
||
Text(
|
||
isCardVisible
|
||
? user.currentBalance ?? '0.00'
|
||
: '*****',
|
||
style: TextStyle(
|
||
color: theme.colorScheme.onPrimary,
|
||
fontSize: 40,
|
||
fontWeight: FontWeight.w700,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(width: 10), // A steady space
|
||
if (isSelected) // Only show toggle for selected card
|
||
InkWell(
|
||
onTap: () async {
|
||
if (isRefreshing)
|
||
return; // Prevent taps while refreshing
|
||
final accountNo = user.accountNo;
|
||
if (accountNo == null) return;
|
||
|
||
final bool currentVisibility =
|
||
_visibilityMap[accountNo] ?? false;
|
||
|
||
if (!currentVisibility) {
|
||
// If hidden, refresh data and then show the balance
|
||
await _refreshAccountData(context);
|
||
if (mounted) {
|
||
setState(() {
|
||
_visibilityMap[accountNo] = true;
|
||
});
|
||
}
|
||
} else {
|
||
// If visible, just hide it
|
||
setState(() {
|
||
_visibilityMap[accountNo] = false;
|
||
});
|
||
}
|
||
},
|
||
child: Padding(
|
||
padding: const EdgeInsets.all(8.0),
|
||
child: Icon(
|
||
isCardVisible
|
||
? Symbols.visibility_lock
|
||
: Symbols.visibility,
|
||
color: theme.scaffoldBackgroundColor,
|
||
weight: 800,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const Spacer(),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Future<void> _refreshAccountData(BuildContext context) async {
|
||
setState(() {
|
||
isRefreshing = true;
|
||
});
|
||
try {
|
||
// Call your AuthCubit or repository to refresh user/accounts data
|
||
await context.read<AuthCubit>().refreshUserData();
|
||
} catch (e) {
|
||
if (!context.mounted) {
|
||
return;
|
||
}
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(
|
||
content: Text(AppLocalizations.of(context).failedToRefresh),
|
||
),
|
||
);
|
||
}
|
||
setState(() {
|
||
isRefreshing = false;
|
||
});
|
||
}
|
||
|
||
Widget _buildBalanceShimmer() {
|
||
final theme = Theme.of(context);
|
||
return Shimmer.fromColors(
|
||
baseColor: theme.colorScheme.primary,
|
||
highlightColor: theme.colorScheme.onPrimary,
|
||
child: Container(height: 36, color: theme.scaffoldBackgroundColor),
|
||
);
|
||
}
|
||
|
||
String getProcessedFirstName(String? name) {
|
||
if (name == null || name.trim().isEmpty) return '';
|
||
// Remove common titles
|
||
final titles = [
|
||
'mr.',
|
||
'mrs.',
|
||
'ms.',
|
||
'miss',
|
||
'dr.',
|
||
'shri',
|
||
'smt.',
|
||
'kumari',
|
||
];
|
||
String processed = name.trim().toLowerCase();
|
||
for (final title in titles) {
|
||
if (processed.startsWith(title)) {
|
||
processed = processed.replaceFirst(title, '').trim();
|
||
break;
|
||
}
|
||
}
|
||
// Take the first word (first name)
|
||
final firstName = processed.split(' ').first;
|
||
// Convert to title case
|
||
if (firstName.isEmpty) return '';
|
||
return firstName[0].toUpperCase() + firstName.substring(1);
|
||
}
|
||
|
||
String getFullAccountType(String? accountType) {
|
||
if (accountType == null || accountType.isEmpty) return 'N/A';
|
||
// Convert to title case
|
||
switch (accountType.toLowerCase()) {
|
||
case 'sa':
|
||
return AppLocalizations.of(context).savingsAccount;
|
||
case 'sb':
|
||
return AppLocalizations.of(context).savingsAccount;
|
||
case 'ln':
|
||
return AppLocalizations.of(context).loanAccount;
|
||
case 'td':
|
||
return AppLocalizations.of(context).termDeposit;
|
||
case 'rd':
|
||
return AppLocalizations.of(context).recurringDeposit;
|
||
case 'ca':
|
||
return "Current Account";
|
||
case 'cc':
|
||
return "Cash Credit Account";
|
||
case 'od':
|
||
return "Overdraft Account";
|
||
default:
|
||
return AppLocalizations.of(context).unknownAccount;
|
||
}
|
||
}
|
||
|
||
Future<void> _showBiometricOptInDialog() async {
|
||
final storage = SecureStorage();
|
||
showDialog(
|
||
context: context,
|
||
barrierDismissible: false,
|
||
builder: (_) => AlertDialog(
|
||
title: Text(AppLocalizations.of(context).enableBiometric),
|
||
content: Text(AppLocalizations.of(context).useBiometricPrompt),
|
||
actions: [
|
||
TextButton(
|
||
onPressed: () async {
|
||
await storage.write('biometric_prompt_shown', 'true');
|
||
if (!mounted) return;
|
||
Navigator.of(context).pop();
|
||
},
|
||
child: Text(AppLocalizations.of(context).later),
|
||
),
|
||
TextButton(
|
||
onPressed: () async {
|
||
final auth = LocalAuthentication();
|
||
final canCheck = await auth.canCheckBiometrics;
|
||
if (!mounted) return;
|
||
bool ok = false;
|
||
if (canCheck) {
|
||
ok = await auth.authenticate(
|
||
localizedReason: AppLocalizations.of(context).scanBiometric,
|
||
);
|
||
}
|
||
if (ok) {
|
||
await storage.write('biometric_enabled', 'true');
|
||
}
|
||
await storage.write('biometric_prompt_shown', 'true');
|
||
if (!mounted) return;
|
||
Navigator.of(context).pop();
|
||
},
|
||
child: Text(AppLocalizations.of(context).enable),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final theme = Theme.of(context);
|
||
final authState = context.read<AuthCubit>().state;
|
||
String mobileNumberToPass = '';
|
||
String customerNo = '';
|
||
String customerName = '';
|
||
if (authState is Authenticated) {
|
||
if (selectedAccountIndex >= 0 &&
|
||
selectedAccountIndex < authState.users.length) {
|
||
mobileNumberToPass =
|
||
authState.users[selectedAccountIndex].mobileNo ?? '';
|
||
customerNo = authState.users[selectedAccountIndex].cifNumber ?? '';
|
||
customerName = authState.users[selectedAccountIndex].name ?? '';
|
||
}
|
||
}
|
||
return BlocListener<AuthCubit, AuthState>(
|
||
listener: (context, state) async {
|
||
if (state is Authenticated && !_biometricPromptShown) {
|
||
_biometricPromptShown = true;
|
||
final storage = getIt<SecureStorage>();
|
||
final already = await storage.read('biometric_prompt_shown');
|
||
if (already == null) {
|
||
_showBiometricOptInDialog();
|
||
}
|
||
}
|
||
},
|
||
child: Scaffold(
|
||
backgroundColor: theme.scaffoldBackgroundColor,
|
||
appBar: AppBar(
|
||
leading: Padding(
|
||
padding: const EdgeInsets.only(left: 10.0),
|
||
child: Material(
|
||
elevation: 4.0,
|
||
clipBehavior: Clip.antiAlias,
|
||
shape: RoundedRectangleBorder(
|
||
side: const BorderSide(color: Colors.white, width: 1.5),
|
||
borderRadius: BorderRadius.circular(12.0),
|
||
),
|
||
child: Container(
|
||
width: 40,
|
||
height: 40,
|
||
decoration: const BoxDecoration(
|
||
color: Colors.white,
|
||
),
|
||
child: Image.asset(
|
||
'assets/images/logo.png',
|
||
fit: BoxFit.fill,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
title: Text(
|
||
AppLocalizations.of(context).kccBankFull.replaceAll('-', '\u2011'),
|
||
textAlign: TextAlign.center,
|
||
softWrap: true, // Explicitly allow wrapping
|
||
maxLines: 2, // Allow text to wrap to a maximum of 2 lines
|
||
style: TextStyle(
|
||
color: theme.colorScheme.onPrimary,
|
||
fontWeight: FontWeight.w700,
|
||
fontSize: 20,
|
||
),
|
||
),
|
||
// Removed centerTitle: true to give more space for text wrapping
|
||
|
||
actions: [
|
||
Padding(
|
||
padding: const EdgeInsets.only(right: 10.0),
|
||
child: InkWell(
|
||
borderRadius: BorderRadius.circular(20),
|
||
onTap: () {
|
||
Navigator.push(
|
||
context,
|
||
MaterialPageRoute(
|
||
builder: (context) => ProfileScreen(
|
||
mobileNumber: mobileNumberToPass,
|
||
customerNo: customerNo,
|
||
customerName: customerName),
|
||
),
|
||
);
|
||
},
|
||
child: const CircleAvatar(
|
||
radius: 21,
|
||
child: Icon(
|
||
Symbols.person,
|
||
size: 30,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
body: BlocBuilder<AuthCubit, AuthState>(
|
||
builder: (context, state) {
|
||
if (state is AuthLoading || state is AuthInitial) {
|
||
return const Center(child: CircularProgressIndicator());
|
||
}
|
||
if (state is Authenticated) {
|
||
final users = state.users;
|
||
final currAccount = users[selectedAccountIndex];
|
||
final accountType = currAccount.accountType?.toLowerCase();
|
||
final isPaymentDisabled = accountType != 'sa' &&
|
||
accountType != 'sb' &&
|
||
accountType != 'ca';
|
||
// first‐time load
|
||
if (!_txInitialized) {
|
||
_txInitialized = true;
|
||
WidgetsBinding.instance.addPostFrameCallback((_) {});
|
||
}
|
||
_pageController ??= PageController(
|
||
initialPage: selectedAccountIndex,
|
||
viewportFraction: 0.75,
|
||
);
|
||
final firstName = getProcessedFirstName(currAccount.name);
|
||
|
||
return SingleChildScrollView(
|
||
child: Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
const SizedBox(height: 16), // Added spacing
|
||
Padding(
|
||
padding: const EdgeInsets.only(left: 4.0),
|
||
child: Text(
|
||
"${AppLocalizations.of(context).hi} $firstName!",
|
||
style: GoogleFonts.baumans().copyWith(
|
||
fontSize: 20,
|
||
color: theme.colorScheme.primary,
|
||
fontWeight: FontWeight.w700,
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(height: 16),
|
||
|
||
// Account Info Cards
|
||
SizedBox(
|
||
height: 160,
|
||
child: PageView.builder(
|
||
clipBehavior: Clip.none,
|
||
controller: _pageController,
|
||
itemCount:
|
||
users.length, // Keep this to show adjacent cards
|
||
|
||
onPageChanged: (int newIndex) async {
|
||
if (newIndex == selectedAccountIndex) return;
|
||
|
||
// Hide the balance of the old card when scrolling away
|
||
final oldAccountNo =
|
||
users[selectedAccountIndex].accountNo;
|
||
if (oldAccountNo != null) {
|
||
_visibilityMap[oldAccountNo] = false;
|
||
}
|
||
|
||
setState(() {
|
||
selectedAccountIndex = newIndex;
|
||
});
|
||
},
|
||
itemBuilder: (context, index) {
|
||
final user = users[index];
|
||
final isSelected = index == selectedAccountIndex;
|
||
return _buildAccountCard(user, isSelected);
|
||
},
|
||
),
|
||
),
|
||
const SizedBox(height: 8),
|
||
Row(
|
||
mainAxisAlignment: MainAxisAlignment.end,
|
||
children: [
|
||
GestureDetector(
|
||
onTap: () {
|
||
Navigator.push(
|
||
context,
|
||
MaterialPageRoute(
|
||
builder: (context) =>
|
||
AllAccountsScreen(users: users),
|
||
),
|
||
);
|
||
},
|
||
child: Text(
|
||
AppLocalizations.of(context).viewall,
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.bold,
|
||
color: theme.colorScheme.primary,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: 18),
|
||
Text(
|
||
AppLocalizations.of(context).quickLinks,
|
||
style: const TextStyle(fontSize: 17),
|
||
),
|
||
const SizedBox(height: 24),
|
||
|
||
// Quick Links
|
||
GridView.count(
|
||
crossAxisCount: 3,
|
||
shrinkWrap: true,
|
||
physics: const NeverScrollableScrollPhysics(),
|
||
crossAxisSpacing: 10,
|
||
mainAxisSpacing: 10,
|
||
childAspectRatio: 1,
|
||
children: [
|
||
_buildQuickLink(
|
||
Symbols.id_card,
|
||
AppLocalizations.of(context).customerInfo,
|
||
() {
|
||
Navigator.push(
|
||
context,
|
||
MaterialPageRoute(
|
||
builder: (context) => CustomerInfoScreen(
|
||
user: users[selectedAccountIndex],
|
||
),
|
||
),
|
||
);
|
||
},
|
||
),
|
||
_buildQuickLink(
|
||
Symbols.currency_rupee,
|
||
AppLocalizations.of(context).quickPay,
|
||
() {
|
||
Navigator.push(
|
||
context,
|
||
MaterialPageRoute(
|
||
builder: (context) => QuickPayScreen(
|
||
debitAccount: currAccount.accountNo!,
|
||
),
|
||
),
|
||
);
|
||
},
|
||
disable: isPaymentDisabled,
|
||
),
|
||
_buildQuickLink(Symbols.send_money,
|
||
AppLocalizations.of(context).fundTransfer, () {
|
||
Navigator.push(
|
||
context,
|
||
MaterialPageRoute(
|
||
builder: (context) => FundTransferScreen(
|
||
creditAccountNo:
|
||
users[selectedAccountIndex]
|
||
.accountNo!,
|
||
remitterName:
|
||
users[selectedAccountIndex].name!,
|
||
// Pass the full list of accounts
|
||
accounts: users)));
|
||
}, disable: isPaymentDisabled),
|
||
_buildQuickLink(
|
||
Symbols.server_person,
|
||
AppLocalizations.of(context).accountInfo,
|
||
() {
|
||
Navigator.push(
|
||
context,
|
||
MaterialPageRoute(
|
||
builder: (context) => AccountInfoScreen(
|
||
users: users,
|
||
selectedIndex: selectedAccountIndex,
|
||
),
|
||
),
|
||
);
|
||
},
|
||
),
|
||
_buildQuickLink(Symbols.receipt_long,
|
||
AppLocalizations.of(context).accountStatement,
|
||
() {
|
||
Navigator.push(
|
||
context,
|
||
MaterialPageRoute(
|
||
builder: (context) =>
|
||
AccountStatementScreen(
|
||
users: users,
|
||
selectedIndex: selectedAccountIndex,
|
||
)));
|
||
}),
|
||
_buildQuickLink(Icons.location_pin,
|
||
AppLocalizations.of(context).branchlocator, () {
|
||
Navigator.push(
|
||
context,
|
||
MaterialPageRoute(
|
||
builder: (context) =>
|
||
const BranchLocatorScreen()));
|
||
}, disable: false),
|
||
_buildQuickLink(Icons.group,
|
||
AppLocalizations.of(context).manageBeneficiary,
|
||
() {
|
||
Navigator.push(
|
||
context,
|
||
MaterialPageRoute(
|
||
builder: (context) =>
|
||
ManageBeneficiariesScreen(
|
||
customerName: currAccount.name!)));
|
||
}, disable: false),
|
||
_buildQuickLink(Symbols.support_agent,
|
||
AppLocalizations.of(context).contactUs, () {
|
||
Navigator.push(
|
||
context,
|
||
MaterialPageRoute(
|
||
builder: (context) =>
|
||
const EnquiryScreen()));
|
||
}),
|
||
_buildQuickLink(
|
||
Symbols.person,
|
||
AppLocalizations.of(context).profile,
|
||
() {
|
||
Navigator.push(
|
||
context,
|
||
MaterialPageRoute(
|
||
builder: (context) => ProfileScreen(
|
||
mobileNumber: mobileNumberToPass,
|
||
customerNo: customerNo,
|
||
customerName: customerName),
|
||
),
|
||
);
|
||
},
|
||
disable: false,
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
return Center(
|
||
child: Text(AppLocalizations.of(context).somethingWentWrong),
|
||
);
|
||
},
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildQuickLink(
|
||
IconData icon,
|
||
String label,
|
||
VoidCallback onTap, {
|
||
bool disable = false,
|
||
}) {
|
||
final theme = Theme.of(context);
|
||
return Card(
|
||
elevation: 2,
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(12.0),
|
||
),
|
||
child: InkWell(
|
||
onTap: disable ? null : onTap,
|
||
borderRadius: BorderRadius.circular(12.0),
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
Icon(
|
||
icon,
|
||
size: 30,
|
||
color: disable ? theme.disabledColor : theme.colorScheme.primary,
|
||
),
|
||
const SizedBox(height: 4),
|
||
Text(
|
||
label,
|
||
textAlign: TextAlign.center,
|
||
style: theme.textTheme.titleMedium?.copyWith(
|
||
fontWeight: FontWeight.bold,
|
||
fontSize: 12,
|
||
color:
|
||
disable ? theme.disabledColor : theme.colorScheme.onSurface,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|