Files
sure/mobile/lib/screens/calendar_screen.dart
Lazy Bone 19da11ed4e This commit adds two new features to the More tab in the mobile app: (#612)
Calendar View:

Monthly calendar displaying daily balance changes for selected account
Account selection dropdown to switch between different accounts
Month navigation with previous/next buttons
Visual indicators (green for income, red for expenses)
Monthly profit/loss summary at the top
Auto-calculation of daily transaction totals
Recent Transactions:

View recent N transactions across all accounts
Configurable display limit (10/20/50/100 transactions)
Pull-to-refresh functionality
Transaction details including account name, date, amount, and notes
Visual distinction between income and expenses
Sorted by date (most recent first)
Implementation details:

Created MoreScreen as menu hub for new features
Replaced PlaceholderScreen with functional MoreScreen
Leverages existing Provider pattern for state management
Uses offline-first approach with existing data providers
Full Chinese localization
Material Design 3 compliant UI
Files added:

mobile/lib/screens/more_screen.dart
mobile/lib/screens/calendar_screen.dart
mobile/lib/screens/recent_transactions_screen.dart
Files modified:

mobile/lib/screens/main_navigation_screen.dart

Signed-off-by: Lazy Bone <89256478+dwvwdv@users.noreply.github.com>
Co-authored-by: dwvwdv <dwvwdv@protonmail.com>
2026-01-11 12:57:38 +01:00

499 lines
16 KiB
Dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:intl/intl.dart';
import '../models/account.dart';
import '../models/transaction.dart';
import '../providers/accounts_provider.dart';
import '../providers/transactions_provider.dart';
import '../providers/auth_provider.dart';
import '../services/log_service.dart';
class CalendarScreen extends StatefulWidget {
const CalendarScreen({super.key});
@override
State<CalendarScreen> createState() => _CalendarScreenState();
}
class _CalendarScreenState extends State<CalendarScreen> {
final LogService _log = LogService.instance;
Account? _selectedAccount;
DateTime _currentMonth = DateTime.now();
Map<String, double> _dailyChanges = {};
bool _isLoading = false;
String _accountType = 'asset'; // 'asset' or 'liability'
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
_loadInitialData();
});
}
Future<void> _loadInitialData() async {
final accountsProvider = context.read<AccountsProvider>();
final authProvider = context.read<AuthProvider>();
final accessToken = await authProvider.getValidAccessToken();
if (accountsProvider.accounts.isEmpty && accessToken != null) {
await accountsProvider.fetchAccounts(
accessToken: accessToken,
forceSync: false,
);
}
if (accountsProvider.accounts.isNotEmpty) {
// Select first account of the selected type
final filteredAccounts = _getFilteredAccounts(accountsProvider.accounts);
setState(() {
_selectedAccount = filteredAccounts.isNotEmpty ? filteredAccounts.first : null;
});
if (_selectedAccount != null) {
await _loadTransactionsForAccount();
}
}
}
List<Account> _getFilteredAccounts(List<Account> accounts) {
if (_accountType == 'asset') {
return accounts.where((a) => a.isAsset).toList();
} else {
return accounts.where((a) => a.isLiability).toList();
}
}
Future<void> _loadTransactionsForAccount() async {
if (_selectedAccount == null) return;
setState(() {
_isLoading = true;
});
final authProvider = context.read<AuthProvider>();
final transactionsProvider = context.read<TransactionsProvider>();
final accessToken = await authProvider.getValidAccessToken();
if (accessToken != null) {
await transactionsProvider.fetchTransactions(
accessToken: accessToken,
accountId: _selectedAccount!.id,
forceSync: false,
);
final transactions = transactionsProvider.transactions;
_log.info('CalendarScreen', 'Loaded ${transactions.length} transactions for account ${_selectedAccount!.name}');
if (transactions.isNotEmpty) {
_log.debug('CalendarScreen', 'Sample transaction - name: ${transactions.first.name}, amount: ${transactions.first.amount}, nature: ${transactions.first.nature}');
}
_calculateDailyChanges(transactions);
_log.info('CalendarScreen', 'Calculated ${_dailyChanges.length} days with changes');
}
setState(() {
_isLoading = false;
});
}
void _calculateDailyChanges(List<Transaction> transactions) {
final changes = <String, double>{};
_log.debug('CalendarScreen', 'Starting to calculate daily changes for ${transactions.length} transactions');
for (var transaction in transactions) {
try {
final date = DateTime.parse(transaction.date);
final dateKey = DateFormat('yyyy-MM-dd').format(date);
// Parse amount with proper sign handling
String trimmedAmount = transaction.amount.trim();
trimmedAmount = trimmedAmount.replaceAll('\u2212', '-'); // Normalize minus sign
// Detect if the amount has a negative sign
bool hasNegativeSign = trimmedAmount.startsWith('-') || trimmedAmount.endsWith('-');
// Remove all non-numeric characters except decimal point and minus sign
String numericString = trimmedAmount.replaceAll(RegExp(r'[^\d.\-]'), '');
// Parse the numeric value
double amount = double.tryParse(numericString.replaceAll('-', '')) ?? 0.0;
// Apply the sign from the string
if (hasNegativeSign) {
amount = -amount;
}
// For asset accounts, flip the sign to match accounting conventions
// For liability accounts, also flip the sign
if (_selectedAccount?.isAsset == true || _selectedAccount?.isLiability == true) {
amount = -amount;
}
_log.debug('CalendarScreen', 'Processing transaction ${transaction.name} - date: $dateKey, raw amount: ${transaction.amount}, parsed: $amount, isAsset: ${_selectedAccount?.isAsset}, isLiability: ${_selectedAccount?.isLiability}');
changes[dateKey] = (changes[dateKey] ?? 0.0) + amount;
_log.debug('CalendarScreen', 'Date $dateKey now has total: ${changes[dateKey]}');
} catch (e) {
_log.error('CalendarScreen', 'Failed to parse transaction date: ${transaction.date}, error: $e');
}
}
_log.info('CalendarScreen', 'Final changes map has ${changes.length} entries');
changes.forEach((date, amount) {
_log.debug('CalendarScreen', '$date -> $amount');
});
setState(() {
_dailyChanges = changes;
});
}
void _previousMonth() {
setState(() {
_currentMonth = DateTime(_currentMonth.year, _currentMonth.month - 1);
});
}
void _nextMonth() {
setState(() {
_currentMonth = DateTime(_currentMonth.year, _currentMonth.month + 1);
});
}
double _getTotalForMonth() {
double total = 0.0;
final yearMonth = DateFormat('yyyy-MM').format(_currentMonth);
_dailyChanges.forEach((date, change) {
if (date.startsWith(yearMonth)) {
total += change;
}
});
return total;
}
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
final accountsProvider = context.watch<AccountsProvider>();
return Scaffold(
appBar: AppBar(
title: const Text('Account Calendar'),
),
body: Column(
children: [
// Account type selector
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: colorScheme.surface,
border: Border(
bottom: BorderSide(
color: colorScheme.outlineVariant,
width: 1,
),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Account Type',
style: Theme.of(context).textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 8),
SegmentedButton<String>(
segments: const [
ButtonSegment<String>(
value: 'asset',
label: Text('Assets'),
icon: Icon(Icons.account_balance_wallet),
),
ButtonSegment<String>(
value: 'liability',
label: Text('Liabilities'),
icon: Icon(Icons.credit_card),
),
],
selected: {_accountType},
onSelectionChanged: (Set<String> newSelection) {
setState(() {
_accountType = newSelection.first;
// Switch to first account of new type
final filteredAccounts = _getFilteredAccounts(accountsProvider.accounts);
_selectedAccount = filteredAccounts.isNotEmpty ? filteredAccounts.first : null;
_dailyChanges = {};
});
if (_selectedAccount != null) {
_loadTransactionsForAccount();
}
},
),
],
),
),
// Account selector
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: colorScheme.surface,
border: Border(
bottom: BorderSide(
color: colorScheme.outlineVariant,
width: 1,
),
),
),
child: DropdownButtonFormField<Account>(
value: _selectedAccount,
decoration: InputDecoration(
labelText: 'Select Account',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
contentPadding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
),
items: _getFilteredAccounts(accountsProvider.accounts).map((account) {
return DropdownMenuItem(
value: account,
child: Text('${account.name} (${account.currency})'),
);
}).toList(),
onChanged: (Account? newAccount) {
setState(() {
_selectedAccount = newAccount;
_dailyChanges = {};
});
_loadTransactionsForAccount();
},
),
),
// Month selector
Container(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
decoration: BoxDecoration(
color: colorScheme.surfaceContainerHighest,
border: Border(
bottom: BorderSide(
color: colorScheme.outlineVariant,
width: 1,
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: const Icon(Icons.chevron_left),
onPressed: _previousMonth,
),
Text(
DateFormat('yyyy-MM').format(_currentMonth),
style: Theme.of(context).textTheme.titleLarge,
),
IconButton(
icon: const Icon(Icons.chevron_right),
onPressed: _nextMonth,
),
],
),
),
// Monthly total
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: colorScheme.surfaceContainerHighest,
border: Border(
bottom: BorderSide(
color: colorScheme.outlineVariant,
width: 1,
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Monthly Change',
style: Theme.of(context).textTheme.titleMedium,
),
Text(
_formatCurrency(_getTotalForMonth()),
style: Theme.of(context).textTheme.titleLarge?.copyWith(
color: _getTotalForMonth() >= 0
? Colors.green
: Colors.red,
fontWeight: FontWeight.bold,
),
),
],
),
),
// Calendar
Expanded(
child: _isLoading
? const Center(child: CircularProgressIndicator())
: _buildCalendar(colorScheme),
),
],
),
);
}
Widget _buildCalendar(ColorScheme colorScheme) {
final firstDayOfMonth = DateTime(_currentMonth.year, _currentMonth.month, 1);
final lastDayOfMonth = DateTime(_currentMonth.year, _currentMonth.month + 1, 0);
final daysInMonth = lastDayOfMonth.day;
final startWeekday = firstDayOfMonth.weekday % 7; // 0 = Sunday
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: [
// Weekday headers
SizedBox(
height: 40,
child: Row(
children: ['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day) {
return Expanded(
child: Center(
child: Text(
day,
style: TextStyle(
fontWeight: FontWeight.bold,
color: colorScheme.onSurfaceVariant,
),
),
),
);
}).toList(),
),
),
// Calendar grid
...List.generate((daysInMonth + startWeekday + 6) ~/ 7, (weekIndex) {
return SizedBox(
height: 70,
child: Row(
children: List.generate(7, (dayIndex) {
final dayNumber = weekIndex * 7 + dayIndex - startWeekday + 1;
if (dayNumber < 1 || dayNumber > daysInMonth) {
return const Expanded(child: SizedBox.shrink());
}
final date = DateTime(_currentMonth.year, _currentMonth.month, dayNumber);
final dateKey = DateFormat('yyyy-MM-dd').format(date);
final change = _dailyChanges[dateKey] ?? 0.0;
final hasChange = _dailyChanges.containsKey(dateKey);
return Expanded(
child: _buildDayCell(
dayNumber,
change,
hasChange,
colorScheme,
),
);
}).toList(),
),
);
}),
],
),
),
);
}
Widget _buildDayCell(int day, double change, bool hasChange, ColorScheme colorScheme) {
Color? backgroundColor;
Color? textColor;
if (hasChange) {
if (change > 0) {
backgroundColor = Colors.green.withValues(alpha: 0.2);
textColor = Colors.green.shade700;
} else if (change < 0) {
backgroundColor = Colors.red.withValues(alpha: 0.2);
textColor = Colors.red.shade700;
}
}
return Container(
margin: const EdgeInsets.all(2),
decoration: BoxDecoration(
color: backgroundColor ?? colorScheme.surface,
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: colorScheme.outlineVariant,
width: 1,
),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
day.toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
color: colorScheme.onSurface,
),
),
if (hasChange) ...[
const SizedBox(height: 2),
Flexible(
child: FittedBox(
fit: BoxFit.scaleDown,
child: Text(
_formatAmount(change),
style: TextStyle(
fontSize: 10,
color: textColor,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
),
],
],
),
),
);
}
String _formatAmount(double amount) {
// Support up to 8 decimal places, but omit unnecessary trailing zeros
final formatter = NumberFormat('#,##0.########');
final sign = amount >= 0 ? '+' : '';
return '$sign${formatter.format(amount)}';
}
String _formatCurrency(double amount) {
final currencySymbol = _selectedAccount?.currency ?? '';
// Support up to 8 decimal places for monthly total
final formatter = NumberFormat('#,##0.########');
final sign = amount >= 0 ? '+' : '';
return '$sign$currencySymbol${formatter.format(amount.abs())}';
}
}