ok for now
This commit is contained in:
davmar
@@ -1,172 +0,0 @@
|
||||
/// Balance tab: connect bank CTA, current balance, and refresh.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../providers/bank_provider.dart';
|
||||
import '../utils/connect_bank.dart';
|
||||
import '../utils/helpers.dart';
|
||||
import '../widgets/empty_state.dart';
|
||||
import '../widgets/loading_view.dart';
|
||||
import '../widgets/responsive_body.dart';
|
||||
|
||||
class BalanceScreen extends StatelessWidget {
|
||||
const BalanceScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final bank = context.watch<BankController>();
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Balance'),
|
||||
actions: [
|
||||
IconButton(
|
||||
tooltip: 'Refresh',
|
||||
onPressed: bank.isLoading ? null : bank.refresh,
|
||||
icon: const Icon(Icons.refresh),
|
||||
),
|
||||
],
|
||||
),
|
||||
body: RefreshIndicator(
|
||||
onRefresh: bank.refresh,
|
||||
child: ResponsiveBody(
|
||||
child: _BalanceBody(bank: bank),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _BalanceBody extends StatelessWidget {
|
||||
const _BalanceBody({required this.bank});
|
||||
|
||||
final BankController bank;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (bank.isLoading && bank.balance == null && !bank.isLinked) {
|
||||
return const LoadingView(message: 'Checking bank link…');
|
||||
}
|
||||
|
||||
if (!bank.isLinked) {
|
||||
return ListView(
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
children: [
|
||||
EmptyState(
|
||||
icon: Icons.account_balance_outlined,
|
||||
title: 'Bank not linked',
|
||||
message: bank.error ??
|
||||
'Connect opens a sandbox bank login in-app. '
|
||||
'Stay in that WebView until it returns here. '
|
||||
'You should then see a balance and transactions.',
|
||||
actionLabel: bank.isConnecting ? 'Opening…' : 'Connect bank',
|
||||
onAction: () => runConnectBank(context, bank),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
if (bank.error != null && bank.balance == null) {
|
||||
return ListView(
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
children: [
|
||||
EmptyState(
|
||||
icon: Icons.error_outline,
|
||||
title: 'Could not load balance',
|
||||
message: bank.error!,
|
||||
actionLabel: 'Retry',
|
||||
onAction: bank.refresh,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
final balance = bank.balance;
|
||||
final theme = Theme.of(context);
|
||||
final colors = theme.colorScheme;
|
||||
|
||||
return ListView(
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
padding: const EdgeInsets.only(top: 8, bottom: 32),
|
||||
children: [
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(24),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
gradient: LinearGradient(
|
||||
colors: [colors.primary, colors.tertiary],
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: colors.primary.withValues(alpha: 0.28),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 10),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Current balance',
|
||||
style: theme.textTheme.labelMedium?.copyWith(
|
||||
color: colors.onPrimary.withValues(alpha: 0.8),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
balance == null
|
||||
? '—'
|
||||
: formatMoney(balance.amount, balance.currency),
|
||||
style: theme.textTheme.headlineMedium?.copyWith(
|
||||
color: colors.onPrimary,
|
||||
),
|
||||
),
|
||||
if (balance?.balanceType != null) ...[
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
balance!.balanceType!,
|
||||
style: theme.textTheme.labelMedium?.copyWith(
|
||||
color: colors.onPrimary.withValues(alpha: 0.75),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
ListTile(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
leading: Icon(
|
||||
Icons.check_circle_outline,
|
||||
color: colors.primary,
|
||||
),
|
||||
title: const Text('Linked'),
|
||||
subtitle: Text(
|
||||
bank.status.accountId == null
|
||||
? bank.status.status
|
||||
: 'Account ${bank.status.accountId}',
|
||||
),
|
||||
),
|
||||
if (bank.error != null) ...[
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
bank.error!,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(color: colors.error),
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 12),
|
||||
OutlinedButton.icon(
|
||||
onPressed: bank.isConnecting
|
||||
? null
|
||||
: () => runConnectBank(context, bank),
|
||||
icon: const Icon(Icons.link),
|
||||
label: Text(bank.isConnecting ? 'Opening…' : 'Reconnect bank'),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
+204
-131
@@ -1,39 +1,41 @@
|
||||
/// Home tab: greeting, stats, and a [ListView.builder] of catalog items.
|
||||
/// Home: balance overview; tap balance to open transactions.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../providers/item_provider.dart';
|
||||
import '../models/transaction_meta.dart';
|
||||
import '../providers/bank_provider.dart';
|
||||
import '../providers/tx_meta_provider.dart';
|
||||
import '../utils/connect_bank.dart';
|
||||
import '../utils/helpers.dart';
|
||||
import '../utils/navigation.dart';
|
||||
import '../widgets/empty_state.dart';
|
||||
import '../widgets/item_card.dart';
|
||||
import '../widgets/loading_view.dart';
|
||||
import '../widgets/responsive_body.dart';
|
||||
import 'add_item_screen.dart';
|
||||
import 'transaction_detail_screen.dart';
|
||||
import 'transactions_screen.dart';
|
||||
|
||||
class HomeScreen extends StatelessWidget {
|
||||
const HomeScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final controller = context.watch<ItemController>();
|
||||
final theme = Theme.of(context);
|
||||
final bank = context.watch<BankController>();
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: const Text('Home')),
|
||||
floatingActionButton: FloatingActionButton.extended(
|
||||
onPressed: () {
|
||||
Navigator.of(context).push(
|
||||
MaterialPageRoute<void>(builder: (_) => const AddItemScreen()),
|
||||
);
|
||||
},
|
||||
icon: const Icon(Icons.add),
|
||||
label: const Text('Add item'),
|
||||
appBar: AppBar(
|
||||
title: const Text('Home'),
|
||||
actions: bankAppBarActions(
|
||||
context: context,
|
||||
onRefresh: bank.refresh,
|
||||
refreshing: bank.isLoading,
|
||||
),
|
||||
),
|
||||
body: RefreshIndicator(
|
||||
onRefresh: controller.loadItems,
|
||||
onRefresh: bank.refresh,
|
||||
child: ResponsiveBody(
|
||||
child: _HomeBody(controller: controller, theme: theme),
|
||||
child: _HomeBody(bank: bank),
|
||||
),
|
||||
),
|
||||
);
|
||||
@@ -41,142 +43,209 @@ class HomeScreen extends StatelessWidget {
|
||||
}
|
||||
|
||||
class _HomeBody extends StatelessWidget {
|
||||
const _HomeBody({
|
||||
required this.controller,
|
||||
required this.theme,
|
||||
});
|
||||
const _HomeBody({required this.bank});
|
||||
|
||||
final ItemController controller;
|
||||
final ThemeData theme;
|
||||
final BankController bank;
|
||||
|
||||
void _openTransactions(BuildContext context) {
|
||||
Navigator.of(context).push(
|
||||
MaterialPageRoute<void>(builder: (_) => const TransactionsScreen()),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (controller.isLoading && controller.items.isEmpty) {
|
||||
return const LoadingView(message: 'Fetching catalog…');
|
||||
if (bank.isLoading && bank.balance == null && !bank.isLinked) {
|
||||
return const LoadingView(message: 'Checking bank link…');
|
||||
}
|
||||
|
||||
if (controller.error != null && controller.items.isEmpty) {
|
||||
if (!bank.isLinked) {
|
||||
return ListView(
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
children: [
|
||||
EmptyState(
|
||||
icon: Icons.account_balance_outlined,
|
||||
title: 'Bank not linked',
|
||||
message: bank.error ??
|
||||
'Connect your bank to see balance and categorize spending.',
|
||||
actionLabel: bank.isConnecting ? 'Opening…' : 'Connect bank',
|
||||
onAction: () => runConnectBank(context, bank),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
if (bank.error != null && bank.balance == null) {
|
||||
return ListView(
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
children: [
|
||||
EmptyState(
|
||||
icon: Icons.error_outline,
|
||||
title: 'Something went wrong',
|
||||
message: controller.error!,
|
||||
title: 'Could not load balance',
|
||||
message: bank.error!,
|
||||
actionLabel: 'Retry',
|
||||
onAction: controller.loadItems,
|
||||
onAction: bank.refresh,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
if (controller.items.isEmpty) {
|
||||
return ListView(
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
children: const [
|
||||
EmptyState(
|
||||
icon: Icons.inbox_outlined,
|
||||
title: 'No items yet',
|
||||
message: 'Add your first item with the button below.',
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
// Header occupies the first slot; remaining slots are catalog cards.
|
||||
return ListView.builder(
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
padding: const EdgeInsets.only(top: 8, bottom: 96),
|
||||
itemCount: controller.items.length + 1,
|
||||
itemBuilder: (context, index) {
|
||||
if (index == 0) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_WelcomeBanner(itemCount: controller.count),
|
||||
const SizedBox(height: 20),
|
||||
Text('Featured items', style: theme.textTheme.titleMedium),
|
||||
const SizedBox(height: 12),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
final item = controller.items[index - 1];
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 12),
|
||||
child: ItemCard(item: item, heroScope: 'home'),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _WelcomeBanner extends StatelessWidget {
|
||||
const _WelcomeBanner({required this.itemCount});
|
||||
|
||||
final int itemCount;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final balance = bank.balance;
|
||||
final theme = Theme.of(context);
|
||||
final colors = theme.colorScheme;
|
||||
final meta = context.watch<TxMetaController>();
|
||||
final recent = bank.transactions.take(5).toList(growable: false);
|
||||
final categorized = bank.transactions
|
||||
.where((tx) => meta.metaFor(tx).hasCategory)
|
||||
.length;
|
||||
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
gradient: LinearGradient(
|
||||
colors: [colors.primary, colors.tertiary],
|
||||
return ListView(
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
padding: const EdgeInsets.only(top: 8, bottom: 32),
|
||||
children: [
|
||||
Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
onTap: () => _openTransactions(context),
|
||||
child: Ink(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(24),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
gradient: LinearGradient(
|
||||
colors: [colors.primary, colors.tertiary],
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: colors.primary.withValues(alpha: 0.28),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 10),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Current balance',
|
||||
style: theme.textTheme.labelMedium?.copyWith(
|
||||
color: colors.onPrimary.withValues(alpha: 0.8),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
balance == null
|
||||
? '—'
|
||||
: formatMoney(balance.amount, balance.currency),
|
||||
style: theme.textTheme.headlineMedium?.copyWith(
|
||||
color: colors.onPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.receipt_long,
|
||||
size: 16,
|
||||
color: colors.onPrimary.withValues(alpha: 0.9),
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
Expanded(
|
||||
child: Text(
|
||||
'Tap to view transactions',
|
||||
style: theme.textTheme.labelMedium?.copyWith(
|
||||
color: colors.onPrimary.withValues(alpha: 0.9),
|
||||
),
|
||||
),
|
||||
),
|
||||
Icon(
|
||||
Icons.chevron_right,
|
||||
color: colors.onPrimary.withValues(alpha: 0.9),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: colors.primary.withValues(alpha: 0.28),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 10),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Welcome back',
|
||||
style: theme.textTheme.labelMedium?.copyWith(
|
||||
color: colors.onPrimary.withValues(alpha: 0.8),
|
||||
const SizedBox(height: 20),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _StatChip(
|
||||
label: 'Transactions',
|
||||
value: '${bank.transactions.length}',
|
||||
icon: Icons.list_alt,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'Your catalog at a glance',
|
||||
style: theme.textTheme.headlineMedium?.copyWith(
|
||||
color: colors.onPrimary,
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: _StatChip(
|
||||
label: 'Categorized',
|
||||
value: '$categorized',
|
||||
icon: Icons.label_outline,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
],
|
||||
),
|
||||
if (recent.isNotEmpty) ...[
|
||||
const SizedBox(height: 24),
|
||||
Row(
|
||||
children: [
|
||||
_StatPill(
|
||||
label: 'Items',
|
||||
value: '$itemCount',
|
||||
icon: Icons.collections_bookmark_outlined,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
const _StatPill(
|
||||
label: 'Theme',
|
||||
value: 'M3',
|
||||
icon: Icons.palette_outlined,
|
||||
Text('Recent', style: theme.textTheme.titleMedium),
|
||||
const Spacer(),
|
||||
TextButton(
|
||||
onPressed: () => _openTransactions(context),
|
||||
child: const Text('See all'),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
for (final tx in recent)
|
||||
ListTile(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
dense: true,
|
||||
leading: Icon(
|
||||
meta.metaFor(tx).category.icon,
|
||||
color: meta.metaFor(tx).category.color,
|
||||
),
|
||||
title: Text(
|
||||
tx.description,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
subtitle: Text(formatIsoDate(tx.date)),
|
||||
trailing: Text(
|
||||
formatMoney(tx.amount, tx.currency),
|
||||
style: theme.textTheme.titleSmall?.copyWith(
|
||||
color: tx.amount >= 0 ? colors.primary : colors.error,
|
||||
),
|
||||
),
|
||||
onTap: () {
|
||||
Navigator.of(context).push(
|
||||
MaterialPageRoute<void>(
|
||||
builder: (_) => TransactionDetailScreen(tx: tx),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
if (bank.error != null) ...[
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
bank.error!,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(color: colors.error),
|
||||
),
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _StatPill extends StatelessWidget {
|
||||
const _StatPill({
|
||||
class _StatChip extends StatelessWidget {
|
||||
const _StatChip({
|
||||
required this.label,
|
||||
required this.value,
|
||||
required this.icon,
|
||||
@@ -188,22 +257,26 @@ class _StatPill extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final onPrimary = Theme.of(context).colorScheme.onPrimary;
|
||||
final theme = Theme.of(context);
|
||||
final colors = theme.colorScheme;
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: onPrimary.withValues(alpha: 0.14),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
color: colors.surfaceContainerLow,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(icon, size: 16, color: onPrimary),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'$value $label',
|
||||
style: Theme.of(context).textTheme.labelMedium?.copyWith(
|
||||
color: onPrimary,
|
||||
),
|
||||
Icon(icon, size: 18, color: colors.primary),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(value, style: theme.textTheme.titleMedium),
|
||||
Text(label, style: theme.textTheme.labelMedium),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
+11
-19
@@ -1,13 +1,11 @@
|
||||
/// Host scaffold that owns the bottom navigation bar and its tabs.
|
||||
/// Host scaffold: Home + Overview. Settings lives in the app-bar gear.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'balance_screen.dart';
|
||||
import 'settings_screen.dart';
|
||||
import 'transactions_screen.dart';
|
||||
import 'home_screen.dart';
|
||||
import 'overview_screen.dart';
|
||||
|
||||
/// Switches between Balance, Transactions, and Settings without stacking routes.
|
||||
class MainShell extends StatefulWidget {
|
||||
const MainShell({super.key});
|
||||
|
||||
@@ -19,9 +17,8 @@ class _MainShellState extends State<MainShell> {
|
||||
int _index = 0;
|
||||
|
||||
static const _pages = [
|
||||
BalanceScreen(),
|
||||
TransactionsScreen(),
|
||||
SettingsScreen(),
|
||||
HomeScreen(),
|
||||
OverviewScreen(),
|
||||
];
|
||||
|
||||
@override
|
||||
@@ -36,19 +33,14 @@ class _MainShellState extends State<MainShell> {
|
||||
onDestinationSelected: (index) => setState(() => _index = index),
|
||||
destinations: const [
|
||||
NavigationDestination(
|
||||
icon: Icon(Icons.account_balance_wallet_outlined),
|
||||
selectedIcon: Icon(Icons.account_balance_wallet),
|
||||
label: 'Balance',
|
||||
icon: Icon(Icons.home_outlined),
|
||||
selectedIcon: Icon(Icons.home),
|
||||
label: 'Home',
|
||||
),
|
||||
NavigationDestination(
|
||||
icon: Icon(Icons.receipt_long_outlined),
|
||||
selectedIcon: Icon(Icons.receipt_long),
|
||||
label: 'Transactions',
|
||||
),
|
||||
NavigationDestination(
|
||||
icon: Icon(Icons.settings_outlined),
|
||||
selectedIcon: Icon(Icons.settings),
|
||||
label: 'Settings',
|
||||
icon: Icon(Icons.insights_outlined),
|
||||
selectedIcon: Icon(Icons.insights),
|
||||
label: 'Overview',
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
@@ -0,0 +1,517 @@
|
||||
/// Overview: current balance, charts, and look-ahead balance forecast.
|
||||
library;
|
||||
|
||||
import 'package:fl_chart/fl_chart.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../models/transaction_meta.dart';
|
||||
import '../providers/bank_provider.dart';
|
||||
import '../providers/tx_meta_provider.dart';
|
||||
import '../utils/helpers.dart';
|
||||
import '../utils/look_ahead.dart';
|
||||
import '../utils/navigation.dart';
|
||||
import '../utils/tx_calendar.dart';
|
||||
import '../widgets/empty_state.dart';
|
||||
import '../widgets/loading_view.dart';
|
||||
import '../widgets/responsive_body.dart';
|
||||
|
||||
enum _StatsMode { category, month }
|
||||
|
||||
class OverviewScreen extends StatefulWidget {
|
||||
const OverviewScreen({super.key});
|
||||
|
||||
@override
|
||||
State<OverviewScreen> createState() => _OverviewScreenState();
|
||||
}
|
||||
|
||||
class _OverviewScreenState extends State<OverviewScreen> {
|
||||
_StatsMode _mode = _StatsMode.category;
|
||||
var _lookAheadEnabled = false;
|
||||
DateTime _lookAheadMonth = monthStart(DateTime.now());
|
||||
|
||||
void _goLookAheadMonth(int delta) {
|
||||
final next = addMonths(_lookAheadMonth, delta);
|
||||
final now = monthStart(DateTime.now());
|
||||
// Look ahead can go forward; still allow browsing past months.
|
||||
if (delta < 0 && next.isBefore(addMonths(now, -24))) return;
|
||||
if (delta > 0 && next.isAfter(addMonths(now, 36))) return;
|
||||
setState(() => _lookAheadMonth = next);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final bank = context.watch<BankController>();
|
||||
final meta = context.watch<TxMetaController>();
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Overview'),
|
||||
actions: bankAppBarActions(
|
||||
context: context,
|
||||
onRefresh: bank.refresh,
|
||||
refreshing: bank.isLoading,
|
||||
),
|
||||
),
|
||||
body: RefreshIndicator(
|
||||
onRefresh: bank.refresh,
|
||||
child: ResponsiveBody(
|
||||
child: _buildBody(context, bank, meta),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBody(
|
||||
BuildContext context,
|
||||
BankController bank,
|
||||
TxMetaController meta,
|
||||
) {
|
||||
final theme = Theme.of(context);
|
||||
final colors = theme.colorScheme;
|
||||
|
||||
if (bank.isLoading && bank.transactions.isEmpty && bank.balance == null) {
|
||||
return const LoadingView(message: 'Loading overview…');
|
||||
}
|
||||
|
||||
if (!bank.isLinked) {
|
||||
return ListView(
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
children: const [
|
||||
EmptyState(
|
||||
icon: Icons.insights_outlined,
|
||||
title: 'No overview yet',
|
||||
message: 'Connect your bank on Home to see balance and charts.',
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
final currency = bank.balance?.currency ??
|
||||
(bank.transactions.isNotEmpty
|
||||
? bank.transactions.first.currency
|
||||
: 'EUR');
|
||||
final currentBalance = bank.balance?.amount ?? 0;
|
||||
final byCategory = meta.spendByCategory(bank.transactions);
|
||||
final byMonth = meta.spendByMonth(bank.transactions);
|
||||
final totalSpend = byCategory.values.fold<double>(0, (sum, v) => sum + v);
|
||||
|
||||
final recurrings = recurringItemsFrom(
|
||||
transactions: bank.transactions,
|
||||
metaFor: meta.metaFor,
|
||||
);
|
||||
final today = dateOnly(DateTime.now());
|
||||
final lookAheadEnd = DateTime(
|
||||
_lookAheadMonth.year,
|
||||
_lookAheadMonth.month + 1,
|
||||
0,
|
||||
);
|
||||
final predicted = predictBalance(
|
||||
currentBalance: currentBalance,
|
||||
from: today,
|
||||
throughDate: lookAheadEnd,
|
||||
items: recurrings,
|
||||
);
|
||||
final projected = projectedOccurrences(
|
||||
items: recurrings,
|
||||
from: today,
|
||||
to: lookAheadEnd,
|
||||
);
|
||||
final nowMonth = monthStart(DateTime.now());
|
||||
|
||||
return ListView(
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
padding: const EdgeInsets.only(top: 8, bottom: 32),
|
||||
children: [
|
||||
Text('Current balance', style: theme.textTheme.labelMedium),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
formatMoney(currentBalance, currency),
|
||||
style: theme.textTheme.headlineMedium,
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
SwitchListTile(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
secondary: const Icon(Icons.auto_graph_outlined),
|
||||
title: const Text('Look ahead'),
|
||||
subtitle: const Text(
|
||||
'Project balance from recurring income and spend',
|
||||
),
|
||||
value: _lookAheadEnabled,
|
||||
onChanged: (value) {
|
||||
setState(() {
|
||||
_lookAheadEnabled = value;
|
||||
if (value && _lookAheadMonth.isBefore(nowMonth)) {
|
||||
_lookAheadMonth = nowMonth;
|
||||
}
|
||||
});
|
||||
},
|
||||
),
|
||||
if (_lookAheadEnabled) ...[
|
||||
const SizedBox(height: 8),
|
||||
Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(8, 8, 8, 16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
IconButton(
|
||||
tooltip: 'Previous month',
|
||||
onPressed: () => _goLookAheadMonth(-1),
|
||||
icon: const Icon(Icons.chevron_left),
|
||||
),
|
||||
Expanded(
|
||||
child: Text(
|
||||
formatMonthYear(_lookAheadMonth),
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.titleMedium,
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
tooltip: 'Next month',
|
||||
onPressed: () => _goLookAheadMonth(1),
|
||||
icon: const Icon(Icons.chevron_right),
|
||||
),
|
||||
],
|
||||
),
|
||||
Text(
|
||||
'Predicted balance',
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.labelMedium,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
formatMoney(predicted, currency),
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.headlineMedium?.copyWith(
|
||||
color: predicted >= currentBalance
|
||||
? colors.primary
|
||||
: colors.error,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
_lookAheadMonth == nowMonth && !lookAheadEnd.isAfter(today)
|
||||
? 'Mark transactions as recurring to forecast'
|
||||
: 'Through ${formatDate(lookAheadEnd)} · '
|
||||
'${projected.length} projected '
|
||||
'${projected.length == 1 ? 'item' : 'items'}',
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium,
|
||||
),
|
||||
if (recurrings.isEmpty) ...[
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'No recurring transactions yet. Open a transaction and '
|
||||
'enable Recurring.',
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium,
|
||||
),
|
||||
] else if (projected.isNotEmpty) ...[
|
||||
const SizedBox(height: 12),
|
||||
for (final row in projected.take(12))
|
||||
ListTile(
|
||||
dense: true,
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
leading: Icon(
|
||||
row.item.category.icon,
|
||||
color: row.item.category.color,
|
||||
),
|
||||
title: Text(
|
||||
row.item.description,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
subtitle: Text(formatDate(row.date)),
|
||||
trailing: Text(
|
||||
formatMoney(row.item.amount, row.item.currency),
|
||||
style: theme.textTheme.titleSmall?.copyWith(
|
||||
color: row.item.amount >= 0
|
||||
? colors.primary
|
||||
: colors.error,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (projected.length > 12)
|
||||
Text(
|
||||
'+${projected.length - 12} more…',
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.labelMedium,
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 20),
|
||||
Text('Money out (categorized)', style: theme.textTheme.labelMedium),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
formatMoney(totalSpend, currency),
|
||||
style: theme.textTheme.titleLarge,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
SegmentedButton<_StatsMode>(
|
||||
segments: const [
|
||||
ButtonSegment(
|
||||
value: _StatsMode.category,
|
||||
label: Text('Category'),
|
||||
icon: Icon(Icons.label_outline),
|
||||
),
|
||||
ButtonSegment(
|
||||
value: _StatsMode.month,
|
||||
label: Text('By date'),
|
||||
icon: Icon(Icons.calendar_month_outlined),
|
||||
),
|
||||
],
|
||||
selected: {_mode},
|
||||
onSelectionChanged: (selection) {
|
||||
setState(() => _mode = selection.first);
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
SizedBox(
|
||||
height: 260,
|
||||
child: bank.transactions.isEmpty
|
||||
? Center(
|
||||
child: Text(
|
||||
'Transactions will appear here once loaded.',
|
||||
style: theme.textTheme.bodyMedium,
|
||||
),
|
||||
)
|
||||
: _mode == _StatsMode.category
|
||||
? _CategoryBars(data: byCategory, currency: currency)
|
||||
: _MonthBars(data: byMonth, currency: currency),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
if (_mode == _StatsMode.category)
|
||||
..._categoryLegend(context, byCategory, currency)
|
||||
else
|
||||
..._monthLegend(context, byMonth, currency),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
List<Widget> _categoryLegend(
|
||||
BuildContext context,
|
||||
Map<TxCategory, double> data,
|
||||
String currency,
|
||||
) {
|
||||
final entries = data.entries.toList()
|
||||
..sort((a, b) => b.value.compareTo(a.value));
|
||||
if (entries.isEmpty) {
|
||||
return [
|
||||
Text(
|
||||
'No outflows yet. Categorize spending from the transaction list.',
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
];
|
||||
}
|
||||
return [
|
||||
for (final entry in entries)
|
||||
ListTile(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
dense: true,
|
||||
leading: Icon(entry.key.icon, color: entry.key.color),
|
||||
title: Text(entry.key.label),
|
||||
trailing: Text(formatMoney(entry.value, currency)),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
List<Widget> _monthLegend(
|
||||
BuildContext context,
|
||||
Map<String, double> data,
|
||||
String currency,
|
||||
) {
|
||||
if (data.isEmpty) {
|
||||
return [
|
||||
Text(
|
||||
'No dated outflows to chart yet.',
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
];
|
||||
}
|
||||
return [
|
||||
for (final entry in data.entries.toList().reversed)
|
||||
ListTile(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
dense: true,
|
||||
leading: const Icon(Icons.calendar_today_outlined),
|
||||
title: Text(entry.key),
|
||||
trailing: Text(formatMoney(entry.value, currency)),
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
class _CategoryBars extends StatelessWidget {
|
||||
const _CategoryBars({required this.data, required this.currency});
|
||||
|
||||
final Map<TxCategory, double> data;
|
||||
final String currency;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final entries = data.entries.toList()
|
||||
..sort((a, b) => b.value.compareTo(a.value));
|
||||
if (entries.isEmpty) {
|
||||
return Center(
|
||||
child: Text(
|
||||
'Categorize transactions to see this chart',
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
final maxY = entries.map((e) => e.value).reduce((a, b) => a > b ? a : b);
|
||||
return BarChart(
|
||||
BarChartData(
|
||||
maxY: maxY * 1.15,
|
||||
barTouchData: BarTouchData(
|
||||
touchTooltipData: BarTouchTooltipData(
|
||||
getTooltipItem: (group, groupIndex, rod, rodIndex) {
|
||||
final entry = entries[group.x.toInt()];
|
||||
return BarTooltipItem(
|
||||
'${entry.key.label}\n${formatMoney(entry.value, currency)}',
|
||||
TextStyle(
|
||||
color: Theme.of(context).colorScheme.onInverseSurface,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
titlesData: FlTitlesData(
|
||||
topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
|
||||
rightTitles:
|
||||
const AxisTitles(sideTitles: SideTitles(showTitles: false)),
|
||||
leftTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
|
||||
bottomTitles: AxisTitles(
|
||||
sideTitles: SideTitles(
|
||||
showTitles: true,
|
||||
reservedSize: 42,
|
||||
getTitlesWidget: (value, meta) {
|
||||
final index = value.toInt();
|
||||
if (index < 0 || index >= entries.length) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
final label = entries[index].key.label;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(top: 8),
|
||||
child: Text(
|
||||
label.length > 8 ? '${label.substring(0, 7)}…' : label,
|
||||
style: Theme.of(context).textTheme.labelSmall,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
gridData: const FlGridData(show: false),
|
||||
borderData: FlBorderData(show: false),
|
||||
barGroups: [
|
||||
for (var i = 0; i < entries.length; i++)
|
||||
BarChartGroupData(
|
||||
x: i,
|
||||
barRods: [
|
||||
BarChartRodData(
|
||||
toY: entries[i].value,
|
||||
width: 18,
|
||||
borderRadius:
|
||||
const BorderRadius.vertical(top: Radius.circular(6)),
|
||||
color: entries[i].key.color,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _MonthBars extends StatelessWidget {
|
||||
const _MonthBars({required this.data, required this.currency});
|
||||
|
||||
final Map<String, double> data;
|
||||
final String currency;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final entries = data.entries.toList();
|
||||
if (entries.isEmpty) {
|
||||
return Center(
|
||||
child: Text(
|
||||
'No monthly spend yet',
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
final maxY = entries.map((e) => e.value).reduce((a, b) => a > b ? a : b);
|
||||
final colors = Theme.of(context).colorScheme;
|
||||
return BarChart(
|
||||
BarChartData(
|
||||
maxY: maxY * 1.15,
|
||||
barTouchData: BarTouchData(
|
||||
touchTooltipData: BarTouchTooltipData(
|
||||
getTooltipItem: (group, groupIndex, rod, rodIndex) {
|
||||
final entry = entries[group.x.toInt()];
|
||||
return BarTooltipItem(
|
||||
'${entry.key}\n${formatMoney(entry.value, currency)}',
|
||||
TextStyle(color: colors.onInverseSurface),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
titlesData: FlTitlesData(
|
||||
topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
|
||||
rightTitles:
|
||||
const AxisTitles(sideTitles: SideTitles(showTitles: false)),
|
||||
leftTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
|
||||
bottomTitles: AxisTitles(
|
||||
sideTitles: SideTitles(
|
||||
showTitles: true,
|
||||
reservedSize: 28,
|
||||
getTitlesWidget: (value, meta) {
|
||||
final index = value.toInt();
|
||||
if (index < 0 || index >= entries.length) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
final key = entries[index].key;
|
||||
final short = key.length >= 7 ? key.substring(5) : key;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(top: 8),
|
||||
child: Text(
|
||||
short,
|
||||
style: Theme.of(context).textTheme.labelSmall,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
gridData: const FlGridData(show: false),
|
||||
borderData: FlBorderData(show: false),
|
||||
barGroups: [
|
||||
for (var i = 0; i < entries.length; i++)
|
||||
BarChartGroupData(
|
||||
x: i,
|
||||
barRods: [
|
||||
BarChartRodData(
|
||||
toY: entries[i].value,
|
||||
width: 22,
|
||||
borderRadius:
|
||||
const BorderRadius.vertical(top: Radius.circular(6)),
|
||||
color: colors.primary,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
/// Transaction detail: category, recurring, and user notes.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../models/bank.dart';
|
||||
import '../models/transaction_meta.dart';
|
||||
import '../providers/tx_meta_provider.dart';
|
||||
import '../utils/helpers.dart';
|
||||
import '../widgets/responsive_body.dart';
|
||||
|
||||
class TransactionDetailScreen extends StatefulWidget {
|
||||
const TransactionDetailScreen({super.key, required this.tx});
|
||||
|
||||
final BankTransaction tx;
|
||||
|
||||
@override
|
||||
State<TransactionDetailScreen> createState() =>
|
||||
_TransactionDetailScreenState();
|
||||
}
|
||||
|
||||
class _TransactionDetailScreenState extends State<TransactionDetailScreen> {
|
||||
late final TextEditingController _notesController;
|
||||
var _dirty = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
final notes = context.read<TxMetaController>().metaFor(widget.tx).notes;
|
||||
_notesController = TextEditingController(text: notes);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_notesController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Future<void> _saveNotes() async {
|
||||
await context.read<TxMetaController>().setNotes(
|
||||
widget.tx,
|
||||
_notesController.text,
|
||||
);
|
||||
if (!mounted) return;
|
||||
setState(() => _dirty = false);
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('Notes saved')),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final tx = widget.tx;
|
||||
final meta = context.watch<TxMetaController>().metaFor(tx);
|
||||
final theme = Theme.of(context);
|
||||
final colors = theme.colorScheme;
|
||||
final amountColor = tx.amount >= 0 ? colors.primary : colors.error;
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Transaction'),
|
||||
actions: [
|
||||
if (_dirty)
|
||||
TextButton(
|
||||
onPressed: _saveNotes,
|
||||
child: const Text('Save'),
|
||||
),
|
||||
],
|
||||
),
|
||||
body: ResponsiveBody(
|
||||
child: ListView(
|
||||
padding: const EdgeInsets.only(top: 8, bottom: 32),
|
||||
children: [
|
||||
Text(
|
||||
formatMoney(tx.amount, tx.currency),
|
||||
style: theme.textTheme.headlineMedium?.copyWith(color: amountColor),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(tx.description, style: theme.textTheme.titleMedium),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
[
|
||||
formatIsoDate(tx.date),
|
||||
if (tx.pending) 'Pending',
|
||||
].join(' · '),
|
||||
style: theme.textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
SwitchListTile(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
secondary: const Icon(Icons.autorenew),
|
||||
title: const Text('Recurring'),
|
||||
subtitle: const Text('Salary, mortgage, subscriptions…'),
|
||||
value: meta.recurring,
|
||||
onChanged: (value) {
|
||||
context.read<TxMetaController>().setRecurring(tx, value);
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text('Category', style: theme.textTheme.titleSmall),
|
||||
const SizedBox(height: 8),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: [
|
||||
for (final category in TxCategory.values)
|
||||
ChoiceChip(
|
||||
avatar: Icon(
|
||||
category.icon,
|
||||
size: 16,
|
||||
color: category.color,
|
||||
),
|
||||
label: Text(category.label),
|
||||
selected: meta.category == category,
|
||||
onSelected: (_) {
|
||||
context.read<TxMetaController>().setCategory(tx, category);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
Text('Notes', style: theme.textTheme.titleSmall),
|
||||
const SizedBox(height: 8),
|
||||
TextField(
|
||||
controller: _notesController,
|
||||
minLines: 3,
|
||||
maxLines: 6,
|
||||
textInputAction: TextInputAction.newline,
|
||||
decoration: const InputDecoration(
|
||||
hintText: 'Add a private note…',
|
||||
),
|
||||
onChanged: (_) {
|
||||
if (!_dirty) setState(() => _dirty = true);
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
FilledButton(
|
||||
onPressed: _dirty ? _saveNotes : null,
|
||||
child: const Text('Save notes'),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Matching descriptions reuse this category automatically. '
|
||||
'Exact same amount + description also copies notes.',
|
||||
style: theme.textTheme.labelMedium,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,20 +1,146 @@
|
||||
/// Transactions tab: recent bank movements from the ingtrak API.
|
||||
/// Searchable transaction list with month heatmap and money in/out totals.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../models/bank.dart';
|
||||
import '../models/transaction_meta.dart';
|
||||
import '../providers/bank_provider.dart';
|
||||
import '../providers/tx_meta_provider.dart';
|
||||
import '../utils/connect_bank.dart';
|
||||
import '../utils/helpers.dart';
|
||||
import '../utils/navigation.dart';
|
||||
import '../utils/tx_calendar.dart';
|
||||
import '../widgets/empty_state.dart';
|
||||
import '../widgets/loading_view.dart';
|
||||
import '../widgets/responsive_body.dart';
|
||||
import '../widgets/tx_heatmap.dart';
|
||||
import 'transaction_detail_screen.dart';
|
||||
|
||||
class TransactionsScreen extends StatelessWidget {
|
||||
class TransactionsScreen extends StatefulWidget {
|
||||
const TransactionsScreen({super.key});
|
||||
|
||||
@override
|
||||
State<TransactionsScreen> createState() => _TransactionsScreenState();
|
||||
}
|
||||
|
||||
class _TransactionsScreenState extends State<TransactionsScreen> {
|
||||
final _searchController = TextEditingController();
|
||||
String _query = '';
|
||||
DateTime _month = monthStart(DateTime.now());
|
||||
DateTime? _selectedDay;
|
||||
var _searchInMonthOnly = false;
|
||||
final Set<TxCategory> _categoryFilters = {};
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_searchController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
bool get _isSearching =>
|
||||
_query.trim().isNotEmpty || _categoryFilters.isNotEmpty;
|
||||
|
||||
void _goMonth(int delta) {
|
||||
final next = addMonths(_month, delta);
|
||||
final current = monthStart(DateTime.now());
|
||||
if (delta > 0 && next.isAfter(current)) return;
|
||||
setState(() {
|
||||
_month = next.isAfter(current) ? current : next;
|
||||
_selectedDay = null;
|
||||
});
|
||||
}
|
||||
|
||||
DateTime? _txDate(BankTransaction tx) => DateTime.tryParse(tx.date);
|
||||
|
||||
bool _inCalendarScope(BankTransaction tx) {
|
||||
final date = _txDate(tx);
|
||||
if (date == null) return false;
|
||||
if (_selectedDay != null) return isSameDay(date, _selectedDay!);
|
||||
return isSameMonth(date, _month);
|
||||
}
|
||||
|
||||
bool _inMonth(BankTransaction tx) {
|
||||
final date = _txDate(tx);
|
||||
if (date == null) return false;
|
||||
return isSameMonth(date, _month);
|
||||
}
|
||||
|
||||
Future<void> _pickCategories(List<TxCategory> available) async {
|
||||
if (available.isEmpty) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('No categories in use yet')),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
final selected = Set<TxCategory>.of(_categoryFilters);
|
||||
await showModalBottomSheet<void>(
|
||||
context: context,
|
||||
showDragHandle: true,
|
||||
builder: (sheetContext) {
|
||||
return StatefulBuilder(
|
||||
builder: (context, setSheetState) {
|
||||
return SafeArea(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 0, 16, 24),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Text(
|
||||
'Filter by category',
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: [
|
||||
for (final category in available)
|
||||
FilterChip(
|
||||
avatar: Icon(
|
||||
category.icon,
|
||||
size: 16,
|
||||
color: category.color,
|
||||
),
|
||||
label: Text(category.label),
|
||||
selected: selected.contains(category),
|
||||
onSelected: (value) {
|
||||
setSheetState(() {
|
||||
if (value) {
|
||||
selected.add(category);
|
||||
} else {
|
||||
selected.remove(category);
|
||||
}
|
||||
});
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
FilledButton(
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_categoryFilters
|
||||
..clear()
|
||||
..addAll(selected);
|
||||
});
|
||||
Navigator.pop(sheetContext);
|
||||
},
|
||||
child: const Text('Apply'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final bank = context.watch<BankController>();
|
||||
@@ -22,31 +148,26 @@ class TransactionsScreen extends StatelessWidget {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Transactions'),
|
||||
actions: [
|
||||
IconButton(
|
||||
tooltip: 'Refresh',
|
||||
onPressed: bank.isLoading ? null : bank.refresh,
|
||||
icon: const Icon(Icons.refresh),
|
||||
),
|
||||
],
|
||||
actions: bankAppBarActions(
|
||||
context: context,
|
||||
onRefresh: bank.refresh,
|
||||
refreshing: bank.isLoading,
|
||||
),
|
||||
),
|
||||
body: RefreshIndicator(
|
||||
onRefresh: bank.refresh,
|
||||
child: ResponsiveBody(
|
||||
child: _TransactionsBody(bank: bank),
|
||||
child: _buildBody(context, bank),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _TransactionsBody extends StatelessWidget {
|
||||
const _TransactionsBody({required this.bank});
|
||||
Widget _buildBody(BuildContext context, BankController bank) {
|
||||
final metaController = context.watch<TxMetaController>();
|
||||
final theme = Theme.of(context);
|
||||
final colors = theme.colorScheme;
|
||||
|
||||
final BankController bank;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (bank.isLoading && bank.transactions.isEmpty) {
|
||||
return const LoadingView(message: 'Loading transactions…');
|
||||
}
|
||||
@@ -59,7 +180,7 @@ class _TransactionsBody extends StatelessWidget {
|
||||
icon: Icons.receipt_long_outlined,
|
||||
title: 'No transactions yet',
|
||||
message: bank.error ??
|
||||
'Link your bank on the Balance tab to load recent activity.',
|
||||
'Link your bank from Home to load recent activity.',
|
||||
actionLabel: bank.isConnecting ? 'Opening…' : 'Connect bank',
|
||||
onAction: () => runConnectBank(context, bank),
|
||||
),
|
||||
@@ -95,46 +216,332 @@ class _TransactionsBody extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
|
||||
return ListView.separated(
|
||||
final nowMonth = monthStart(DateTime.now());
|
||||
final monthDates = <DateTime>[
|
||||
for (final tx in bank.transactions)
|
||||
if (_txDate(tx) != null && isSameMonth(_txDate(tx)!, _month))
|
||||
dateOnly(_txDate(tx)!),
|
||||
];
|
||||
final counts = txCountsByDay(monthDates);
|
||||
|
||||
final calendarScoped = [
|
||||
for (final tx in bank.transactions)
|
||||
if (_inCalendarScope(tx)) tx,
|
||||
];
|
||||
|
||||
final searchPool = !_isSearching
|
||||
? calendarScoped
|
||||
: _searchInMonthOnly
|
||||
? [
|
||||
for (final tx in bank.transactions)
|
||||
if (_inMonth(tx)) tx,
|
||||
]
|
||||
: bank.transactions;
|
||||
|
||||
final filtered = metaController.search(
|
||||
searchPool,
|
||||
_query,
|
||||
categories: _categoryFilters,
|
||||
);
|
||||
|
||||
var moneyOut = 0.0;
|
||||
var moneyIn = 0.0;
|
||||
for (final tx in calendarScoped) {
|
||||
if (tx.amount < 0) {
|
||||
moneyOut += tx.amount.abs();
|
||||
} else if (tx.amount > 0) {
|
||||
moneyIn += tx.amount;
|
||||
}
|
||||
}
|
||||
final currency = bank.balance?.currency ??
|
||||
(bank.transactions.isNotEmpty
|
||||
? bank.transactions.first.currency
|
||||
: 'EUR');
|
||||
final usedCategories = metaController.usedCategories(bank.transactions);
|
||||
|
||||
return ListView(
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
padding: const EdgeInsets.only(top: 8, bottom: 32),
|
||||
itemCount: bank.transactions.length,
|
||||
separatorBuilder: (_, _) => const SizedBox(height: 8),
|
||||
itemBuilder: (context, index) {
|
||||
return _TransactionTile(tx: bank.transactions[index]);
|
||||
},
|
||||
padding: const EdgeInsets.only(bottom: 32),
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 8, bottom: 4),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: _searchController,
|
||||
textInputAction: TextInputAction.search,
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Search description, notes…',
|
||||
prefixIcon: IconButton(
|
||||
tooltip: 'Categories',
|
||||
onPressed: () => _pickCategories(usedCategories),
|
||||
icon: Icon(
|
||||
Icons.search,
|
||||
color: _categoryFilters.isEmpty
|
||||
? null
|
||||
: colors.primary,
|
||||
),
|
||||
),
|
||||
suffixIcon: _query.isEmpty
|
||||
? null
|
||||
: IconButton(
|
||||
tooltip: 'Clear',
|
||||
onPressed: () {
|
||||
_searchController.clear();
|
||||
setState(() => _query = '');
|
||||
},
|
||||
icon: const Icon(Icons.clear),
|
||||
),
|
||||
),
|
||||
onChanged: (value) => setState(() => _query = value),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Tooltip(
|
||||
message: 'Search only in calendar month',
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Checkbox(
|
||||
value: _searchInMonthOnly,
|
||||
onChanged: (value) {
|
||||
setState(() => _searchInMonthOnly = value ?? false);
|
||||
},
|
||||
),
|
||||
Text('Month', style: theme.textTheme.labelMedium),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (_categoryFilters.isNotEmpty)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: [
|
||||
for (final category in _categoryFilters)
|
||||
InputChip(
|
||||
avatar: Icon(category.icon, size: 16, color: category.color),
|
||||
label: Text(category.label),
|
||||
onDeleted: () {
|
||||
setState(() => _categoryFilters.remove(category));
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
TxHeatmap(
|
||||
month: _month,
|
||||
counts: counts,
|
||||
canGoForward: _month.isBefore(nowMonth),
|
||||
selectedDay: _selectedDay,
|
||||
onPreviousMonth: () => _goMonth(-1),
|
||||
onNextMonth: () => _goMonth(1),
|
||||
onSelectDay: (day) => setState(() => _selectedDay = day),
|
||||
),
|
||||
if (_selectedDay != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: InputChip(
|
||||
label: Text(formatDate(_selectedDay!)),
|
||||
onDeleted: () => setState(() => _selectedDay = null),
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(0, 4, 0, 12),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _TotalsCard(
|
||||
label: 'Money out',
|
||||
value: formatMoney(moneyOut, currency),
|
||||
color: colors.error,
|
||||
icon: Icons.arrow_upward,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: _TotalsCard(
|
||||
label: 'Money in',
|
||||
value: formatMoney(moneyIn, currency),
|
||||
color: colors.primary,
|
||||
icon: Icons.arrow_downward,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (_isSearching)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: Text(
|
||||
_searchInMonthOnly
|
||||
? 'Searching in ${formatMonthYear(_month)}'
|
||||
: 'Searching all transactions',
|
||||
style: theme.textTheme.labelMedium,
|
||||
),
|
||||
),
|
||||
if (filtered.isEmpty)
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 24),
|
||||
child: Text(
|
||||
_isSearching
|
||||
? 'No transactions match this search.'
|
||||
: _selectedDay != null
|
||||
? 'No transactions on this day.'
|
||||
: 'No transactions this month.',
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium,
|
||||
),
|
||||
)
|
||||
else
|
||||
for (var i = 0; i < filtered.length; i++) ...[
|
||||
if (i > 0)
|
||||
Divider(
|
||||
height: 1,
|
||||
color: colors.outlineVariant.withValues(alpha: 0.5),
|
||||
),
|
||||
_CompactTransactionTile(
|
||||
tx: filtered[i],
|
||||
meta: metaController.metaFor(filtered[i]),
|
||||
),
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _TransactionTile extends StatelessWidget {
|
||||
const _TransactionTile({required this.tx});
|
||||
class _TotalsCard extends StatelessWidget {
|
||||
const _TotalsCard({
|
||||
required this.label,
|
||||
required this.value,
|
||||
required this.color,
|
||||
required this.icon,
|
||||
});
|
||||
|
||||
final BankTransaction tx;
|
||||
final String label;
|
||||
final String value;
|
||||
final Color color;
|
||||
final IconData icon;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colors = theme.colorScheme;
|
||||
final isCredit = tx.amount >= 0;
|
||||
final amountColor = isCredit ? colors.primary : colors.error;
|
||||
|
||||
return Card(
|
||||
child: ListTile(
|
||||
title: Text(
|
||||
tx.description,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
subtitle: Text(
|
||||
[
|
||||
formatIsoDate(tx.date),
|
||||
if (tx.pending) 'Pending',
|
||||
].where((part) => part.isNotEmpty).join(' · '),
|
||||
),
|
||||
trailing: Text(
|
||||
formatMoney(tx.amount, tx.currency),
|
||||
style: theme.textTheme.titleMedium?.copyWith(color: amountColor),
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: colors.surfaceContainerLow,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(icon, size: 16, color: color),
|
||||
const SizedBox(width: 6),
|
||||
Text(label, style: theme.textTheme.labelMedium),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
value,
|
||||
style: theme.textTheme.titleMedium?.copyWith(color: color),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _CompactTransactionTile extends StatelessWidget {
|
||||
const _CompactTransactionTile({
|
||||
required this.tx,
|
||||
required this.meta,
|
||||
});
|
||||
|
||||
final BankTransaction tx;
|
||||
final TxMeta meta;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colors = theme.colorScheme;
|
||||
final amountColor = tx.amount >= 0 ? colors.primary : colors.error;
|
||||
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
Navigator.of(context).push(
|
||||
MaterialPageRoute<void>(
|
||||
builder: (_) => TransactionDetailScreen(tx: tx),
|
||||
),
|
||||
);
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 10),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
decoration: BoxDecoration(
|
||||
color: meta.category.color.withValues(alpha: 0.14),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Icon(
|
||||
meta.category.icon,
|
||||
size: 18,
|
||||
color: meta.category.color,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
tx.description,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: theme.textTheme.bodyLarge?.copyWith(
|
||||
fontSize: 15,
|
||||
height: 1.2,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
[
|
||||
formatIsoDate(tx.date),
|
||||
if (meta.hasCategory) meta.category.label,
|
||||
if (meta.recurring) 'Recurring',
|
||||
if (meta.hasNotes) 'Note',
|
||||
if (tx.pending) 'Pending',
|
||||
].join(' · '),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: theme.textTheme.labelMedium,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
formatMoney(tx.amount, tx.currency),
|
||||
style: theme.textTheme.titleSmall?.copyWith(
|
||||
color: amountColor,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user