categorize multiple tags

lib/providers/tx_meta_provider.dart

@@ -521,10 +521,15 @@ class TxMetaController extends ChangeNotifier {
   }
 
   /// Replace labels on every transaction in [txs] (per-id overrides).
+  ///
+  /// When [matchPattern] is set (apply-to-matched), also refreshes the
+  /// merchant rule so future transactions matching the pattern inherit the
+  /// full label set (parent + sub-labels).
   Future<void> setLabelsForMany(
     List<BankTransaction> txs,
-    List<String> labelIds,
-  ) async {
+    List<String> labelIds, {
+    String? matchPattern,
+  }) async {
     if (txs.isEmpty) return;
 
     final expanded = expandWithAncestors([
@@ -545,6 +550,22 @@ class TxMetaController extends ChangeNotifier {
           : current.copyWith(labelIds: unique);
     }
     _byId = nextById;
+
+    final pattern = (matchPattern ?? '').trim().toLowerCase();
+    if (pattern.isNotEmpty) {
+      final nextRules = Map<String, List<String>>.of(_labelsByMerchant);
+      if (unique.isEmpty) {
+        nextRules.remove(pattern);
+        for (final tx in txs) {
+          nextRules.remove(tx.merchantKey);
+          nextRules.remove(tx.descriptionKey);
+        }
+      } else {
+        nextRules[pattern] = unique;
+      }
+      _labelsByMerchant = nextRules;
+    }
+
     _schedulePersist();
   }
 

lib/screens/home_screen.dart

@@ -10,8 +10,10 @@ import '../providers/preferences_provider.dart';
 import '../providers/tx_meta_provider.dart';
 import '../utils/app_theme.dart';
 import '../utils/connect_bank.dart';
+import '../utils/deferred_tab_work.dart';
 import '../utils/helpers.dart';
 import '../utils/navigation.dart';
+import '../utils/tx_filter_metrics.dart';
 import '../widgets/empty_state.dart';
 import '../widgets/home_filter_widget_card.dart';
 import '../widgets/home_widgets_sheet.dart';
@@ -22,6 +24,18 @@ import '../widgets/skip_build_when_covered.dart';
 import 'transaction_detail_screen.dart';
 import 'transactions_screen.dart';
 
+class _HomeSnapshot {
+  const _HomeSnapshot({
+    required this.categorized,
+    required this.statsById,
+    required this.budgetById,
+  });
+
+  final int categorized;
+  final Map<String, TxFilterMetrics> statsById;
+  final Map<String, HomeBudgetMetrics> budgetById;
+}
+
 class HomeScreen extends StatefulWidget {
   const HomeScreen({super.key});
 
@@ -33,16 +47,93 @@ class HomeScreen extends StatefulWidget {
 
 class _HomeScreenState extends State<HomeScreen> {
   var _editingWidgets = false;
+  final _work = DeferredTabWork<_HomeSnapshot>();
+
+  int _homeCacheKey({
+    required TxMetaController meta,
+    required BankController bank,
+    required List<HomeFilterWidget> widgets,
+  }) {
+    return Object.hash(
+      meta.storeRevision,
+      identityHashCode(bank.transactions),
+      Object.hashAll(widgets.map((w) => w.id)),
+      Object.hashAll(widgets.map((w) => w.updatedAt)),
+      _editingWidgets,
+    );
+  }
 
   @override
   Widget build(BuildContext context) {
     // Inactive IndexedStack tabs must not watch providers — otherwise every
     // annotation save rebuilds Home while the user is on another tab.
-    if (ShellTabScope.of(context) != HomeScreen.tabIndex) {
+    final active = ShellTabScope.of(context) == HomeScreen.tabIndex;
+    if (!active) {
+      if (_work.isLoading) {
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+          if (!mounted) return;
+          if (ShellTabScope.of(context) == HomeScreen.tabIndex) return;
+          _work.cancel();
+        });
+      }
       return const SizedBox.expand();
     }
 
     final bank = context.watch<BankController>();
+    final meta = context.watch<TxMetaController>();
+    final prefs = context.watch<PreferencesController>();
+    final widgets = _editingWidgets
+        ? prefs.homeFilterWidgets
+        : prefs.displayedHomeFilterWidgets;
+    final needsData = bank.isLinked || bank.hasData;
+    final emptyLoading = bank.isLoading && bank.balance == null && !bank.hasData;
+    final cacheKey = _homeCacheKey(meta: meta, bank: bank, widgets: widgets);
+
+    if (needsData && !emptyLoading && !_work.readyFor(cacheKey)) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (!mounted) return;
+        if (ShellTabScope.of(context) != HomeScreen.tabIndex) return;
+        _work.ensure(
+          key: cacheKey,
+          mounted: () => mounted,
+          onUpdate: () {
+            if (mounted) setState(() {});
+          },
+          compute: (yieldUi) async {
+            final categorized =
+                meta.labeledTransactionCount(bank.transactions);
+            await yieldUi();
+            final stats = <String, TxFilterMetrics>{};
+            final budgets = <String, HomeBudgetMetrics>{};
+            for (var i = 0; i < widgets.length; i++) {
+              final w = widgets[i];
+              if (w.type == HomeWidgetType.budget) {
+                budgets[w.id] = computeHomeBudgetMetrics(
+                  all: bank.transactions,
+                  meta: meta,
+                  widget: w,
+                );
+              } else {
+                stats[w.id] = computeTxFilterMetrics(
+                  all: bank.transactions,
+                  meta: meta,
+                  filter: w.filter,
+                );
+              }
+              if (i % 2 == 1) await yieldUi();
+            }
+            return _HomeSnapshot(
+              categorized: categorized,
+              statsById: stats,
+              budgetById: budgets,
+            );
+          },
+        );
+      });
+    }
+
+    final showSpinner =
+        needsData && !emptyLoading && !_work.readyFor(cacheKey);
 
     return Scaffold(
       appBar: AppBar(
@@ -54,7 +145,9 @@ class _HomeScreenState extends State<HomeScreen> {
               onPressed: () =>
                   setState(() => _editingWidgets = !_editingWidgets),
               icon: Icon(
-                _editingWidgets ? Icons.check : Icons.dashboard_customize_outlined,
+                _editingWidgets
+                    ? Icons.check
+                    : Icons.dashboard_customize_outlined,
               ),
             ),
           ...bankAppBarActions(
@@ -67,10 +160,19 @@ class _HomeScreenState extends State<HomeScreen> {
       body: RefreshIndicator(
         onRefresh: bank.refresh,
         child: ResponsiveBody(
-          child: _HomeBody(
-            bank: bank,
-            editingWidgets: _editingWidgets,
-          ),
+          child: showSpinner
+              ? ListView(
+                  physics: const AlwaysScrollableScrollPhysics(),
+                  children: const [
+                    SizedBox(height: 120),
+                    LoadingView(message: 'Loading home…'),
+                  ],
+                )
+              : _HomeBody(
+                  bank: bank,
+                  editingWidgets: _editingWidgets,
+                  snapshot: _work.value,
+                ),
         ),
       ),
     );
@@ -81,10 +183,12 @@ class _HomeBody extends StatelessWidget {
   const _HomeBody({
     required this.bank,
     required this.editingWidgets,
+    required this.snapshot,
   });
 
   final BankController bank;
   final bool editingWidgets;
+  final _HomeSnapshot? snapshot;
 
   void _openTransactions(BuildContext context) {
     Navigator.of(context).push(
@@ -141,7 +245,7 @@ class _HomeBody extends StatelessWidget {
         final colors = theme.colorScheme;
         final meta = context.watch<TxMetaController>();
         final recent = bank.transactions.take(5).toList(growable: false);
-        final categorized =
+        final categorized = snapshot?.categorized ??
             meta.labeledTransactionCount(bank.transactions);
         final widgets = editingWidgets
             ? prefs.homeFilterWidgets
@@ -319,6 +423,9 @@ class _HomeBody extends StatelessWidget {
                         child: HomeFilterWidgetCard(
                           widgetConfig: widgetConfig,
                           editing: true,
+                          precomputedStats: snapshot?.statsById[widgetConfig.id],
+                          precomputedBudget:
+                              snapshot?.budgetById[widgetConfig.id],
                           onToggleDisplay: (display) =>
                               prefs.setHomeFilterWidgetDisplay(
                             widgetConfig.id,
@@ -347,7 +454,11 @@ class _HomeBody extends StatelessWidget {
                   },
                 )
               else
-                ..._packedHomeWidgetRows(widgets),
+                ..._packedHomeWidgetRows(
+                  widgets,
+                  statsById: snapshot?.statsById,
+                  budgetById: snapshot?.budgetById,
+                ),
             ],
             if (_showBuiltIn(
                   editing: editingWidgets,
@@ -553,7 +664,11 @@ class _HomeWidgetSlot extends StatelessWidget {
   }
 }
 
-List<Widget> _packedHomeWidgetRows(List<HomeFilterWidget> widgets) {
+List<Widget> _packedHomeWidgetRows(
+  List<HomeFilterWidget> widgets, {
+  Map<String, TxFilterMetrics>? statsById,
+  Map<String, HomeBudgetMetrics>? budgetById,
+}) {
   final rows = <Widget>[];
   var i = 0;
   while (i < widgets.length) {
@@ -571,11 +686,19 @@ List<Widget> _packedHomeWidgetRows(List<HomeFilterWidget> widgets) {
               crossAxisAlignment: CrossAxisAlignment.stretch,
               children: [
                 Expanded(
-                  child: HomeFilterWidgetCard(widgetConfig: a),
+                  child: HomeFilterWidgetCard(
+                    widgetConfig: a,
+                    precomputedStats: statsById?[a.id],
+                    precomputedBudget: budgetById?[a.id],
+                  ),
                 ),
                 const SizedBox(width: 10),
                 Expanded(
-                  child: HomeFilterWidgetCard(widgetConfig: b),
+                  child: HomeFilterWidgetCard(
+                    widgetConfig: b,
+                    precomputedStats: statsById?[b.id],
+                    precomputedBudget: budgetById?[b.id],
+                  ),
                 ),
               ],
             ),
@@ -590,7 +713,11 @@ List<Widget> _packedHomeWidgetRows(List<HomeFilterWidget> widgets) {
         padding: const EdgeInsets.only(bottom: 10),
         child: _HomeWidgetSlot(
           halfWidth: a.halfWidth,
-          child: HomeFilterWidgetCard(widgetConfig: a),
+          child: HomeFilterWidgetCard(
+            widgetConfig: a,
+            precomputedStats: statsById?[a.id],
+            precomputedBudget: budgetById?[a.id],
+          ),
         ),
       ),
     );

lib/screens/login_screen.dart

@@ -2,6 +2,7 @@
 library;
 
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:pocketbase/pocketbase.dart';
 import 'package:provider/provider.dart';
 
@@ -46,6 +47,8 @@ class _LoginScreenState extends State<LoginScreen> {
         email: _emailController.text,
         password: _passwordController.text,
       );
+      // Lets iOS/Android password managers offer to save / confirm the login.
+      TextInput.finishAutofillContext();
       if (!mounted) return;
       if (!widget.asRoot) {
         Navigator.of(context).pop(true);
@@ -96,68 +99,77 @@ class _LoginScreenState extends State<LoginScreen> {
               ),
             ),
             const SizedBox(height: 24),
-            Form(
-              key: _formKey,
-              child: Column(
-                children: [
-                  AppTextField(
-                    controller: _emailController,
-                    label: 'Email',
-                    keyboardType: TextInputType.emailAddress,
-                    textInputAction: TextInputAction.next,
-                    autofocus: true,
-                    validator: (value) {
-                      final text = value?.trim() ?? '';
-                      if (text.isEmpty) return 'Enter your email';
-                      if (!text.contains('@')) return 'Enter a valid email';
-                      return null;
-                    },
-                  ),
-                  const SizedBox(height: 16),
-                  TextFormField(
-                    controller: _passwordController,
-                    obscureText: _obscurePassword,
-                    textInputAction: TextInputAction.done,
-                    onFieldSubmitted: (_) => _submit(),
-                    validator: (value) {
-                      if (value == null || value.isEmpty) {
-                        return 'Enter your password';
-                      }
-                      return null;
-                    },
-                    decoration: InputDecoration(
-                      labelText: 'Password',
-                      suffixIcon: IconButton(
-                        tooltip: _obscurePassword
-                            ? 'Show password'
-                            : 'Hide password',
-                        onPressed: () => setState(
-                          () => _obscurePassword = !_obscurePassword,
-                        ),
-                        icon: Icon(
-                          _obscurePassword
-                              ? Icons.visibility_outlined
-                              : Icons.visibility_off_outlined,
+            AutofillGroup(
+              child: Form(
+                key: _formKey,
+                child: Column(
+                  children: [
+                    AppTextField(
+                      controller: _emailController,
+                      label: 'Email',
+                      keyboardType: TextInputType.emailAddress,
+                      textInputAction: TextInputAction.next,
+                      autofocus: true,
+                      autofillHints: const [
+                        AutofillHints.email,
+                        AutofillHints.username,
+                      ],
+                      validator: (value) {
+                        final text = value?.trim() ?? '';
+                        if (text.isEmpty) return 'Enter your email';
+                        if (!text.contains('@')) return 'Enter a valid email';
+                        return null;
+                      },
+                    ),
+                    const SizedBox(height: 16),
+                    TextFormField(
+                      controller: _passwordController,
+                      obscureText: _obscurePassword,
+                      textInputAction: TextInputAction.done,
+                      autofillHints: const [AutofillHints.password],
+                      enableSuggestions: false,
+                      autocorrect: false,
+                      onFieldSubmitted: (_) => _submit(),
+                      validator: (value) {
+                        if (value == null || value.isEmpty) {
+                          return 'Enter your password';
+                        }
+                        return null;
+                      },
+                      decoration: InputDecoration(
+                        labelText: 'Password',
+                        suffixIcon: IconButton(
+                          tooltip: _obscurePassword
+                              ? 'Show password'
+                              : 'Hide password',
+                          onPressed: () => setState(
+                            () => _obscurePassword = !_obscurePassword,
+                          ),
+                          icon: Icon(
+                            _obscurePassword
+                                ? Icons.visibility_outlined
+                                : Icons.visibility_off_outlined,
+                          ),
                         ),
                       ),
                     ),
-                  ),
-                  const SizedBox(height: 24),
-                  FilledButton.icon(
-                    onPressed: _busy ? null : _submit,
-                    icon: _busy
-                        ? SizedBox(
-                            width: 18,
-                            height: 18,
-                            child: CircularProgressIndicator(
-                              strokeWidth: 2,
-                              color: theme.colorScheme.onPrimary,
-                            ),
-                          )
-                        : const Icon(Icons.login),
-                    label: Text(_busy ? 'Signing in…' : 'Sign in'),
-                  ),
-                ],
+                    const SizedBox(height: 24),
+                    FilledButton.icon(
+                      onPressed: _busy ? null : _submit,
+                      icon: _busy
+                          ? SizedBox(
+                              width: 18,
+                              height: 18,
+                              child: CircularProgressIndicator(
+                                strokeWidth: 2,
+                                color: theme.colorScheme.onPrimary,
+                              ),
+                            )
+                          : const Icon(Icons.login),
+                      label: Text(_busy ? 'Signing in…' : 'Sign in'),
+                    ),
+                  ],
+                ),
               ),
             ),
           ],

lib/screens/look_ahead_screen.dart

@@ -1,6 +1,9 @@
 /// Look ahead: projected balance from recurring templates through a date.
 library;
 
+import 'dart:async';
+
+import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
@@ -16,6 +19,7 @@ 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/recurring_template_sheet.dart';
 import '../widgets/responsive_body.dart';
 import '../widgets/shell_tab_scope.dart';
@@ -23,6 +27,25 @@ import '../widgets/skip_build_when_covered.dart';
 
 enum _PeriodMode { monthly, yearly }
 
+class _ItemsSnapshot {
+  const _ItemsSnapshot({required this.key, required this.items});
+
+  final int key;
+  final List<RecurringItem> items;
+}
+
+class _BalancePoint {
+  const _BalancePoint({
+    required this.key,
+    required this.label,
+    required this.balance,
+  });
+
+  final DateTime key;
+  final String label;
+  final double balance;
+}
+
 class LookAheadScreen extends StatefulWidget {
   const LookAheadScreen({super.key});
 
@@ -35,8 +58,10 @@ class LookAheadScreen extends StatefulWidget {
 class _LookAheadScreenState extends State<LookAheadScreen> {
   var _period = _PeriodMode.monthly;
   late DateTime _cursor;
-  List<RecurringItem>? _cachedItems;
-  int? _itemsCacheKey;
+  _ItemsSnapshot? _snapshot;
+  int? _loadingKey;
+  int _computeGen = 0;
+  var _showChart = false;
 
   @override
   void initState() {
@@ -52,14 +77,15 @@ class _LookAheadScreenState extends State<LookAheadScreen> {
 
   /// Inclusive end date for the selected period.
   DateTime get _through {
-    if (_period == _PeriodMode.yearly) {
+    // Chart view (and yearly list) always project through year-end.
+    if (_showChart || _period == _PeriodMode.yearly) {
       return DateTime(_cursor.year, 12, 31);
     }
     return DateTime(_cursor.year, _cursor.month + 1, 0);
   }
 
   String get _periodTitle {
-    if (_period == _PeriodMode.yearly) return '${_cursor.year}';
+    if (_showChart || _period == _PeriodMode.yearly) return '${_cursor.year}';
     return formatMonthYear(_cursor);
   }
 
@@ -68,28 +94,32 @@ class _LookAheadScreenState extends State<LookAheadScreen> {
     return DateTime(t.year + maxYears, t.month);
   }
 
+  int _maxYear(int maxYears) => _today.year + maxYears;
+
+  bool get _navByYear => _showChart || _period == _PeriodMode.yearly;
+
   bool _canGoBack() {
-    if (_period == _PeriodMode.yearly) {
-      return _cursor.year > _today.year;
-    }
+    if (_navByYear) return _cursor.year > _today.year;
     return monthStart(_cursor).isAfter(_minMonth);
   }
 
   bool _canGoForward(int maxYears) {
-    if (_period == _PeriodMode.yearly) {
-      return _cursor.year < _today.year + maxYears;
-    }
+    if (_navByYear) return _cursor.year < _maxYear(maxYears);
     return monthStart(_cursor).isBefore(_maxMonthFor(maxYears));
   }
 
   void _clampCursor(int maxYears) {
-    if (_period == _PeriodMode.yearly) {
-      if (_cursor.year > _today.year + maxYears) {
-        _cursor = DateTime(_today.year + maxYears);
+    if (_navByYear) {
+      if (_cursor.year > _maxYear(maxYears)) {
+        _cursor = DateTime(_maxYear(maxYears));
+      }
+      if (_cursor.year < _today.year) {
+        _cursor = DateTime(_today.year);
       }
     } else {
       final maxMonth = _maxMonthFor(maxYears);
       if (_cursor.isAfter(maxMonth)) _cursor = maxMonth;
+      if (_cursor.isBefore(_minMonth)) _cursor = _minMonth;
     }
   }
 
@@ -97,26 +127,22 @@ class _LookAheadScreenState extends State<LookAheadScreen> {
     if (mode == _period) return;
     setState(() {
       _period = mode;
-      if (mode == _PeriodMode.yearly) {
+      if (mode == _PeriodMode.yearly || _showChart) {
         _cursor = DateTime(_cursor.year);
-        if (_cursor.year < _today.year) _cursor = DateTime(_today.year);
-        if (_cursor.year > _today.year + maxYears) {
-          _cursor = DateTime(_today.year + maxYears);
-        }
+        _clampCursor(maxYears);
       } else {
         final month = DateTime(_cursor.year, _today.month);
         _cursor = month.isBefore(_minMonth) ? _minMonth : monthStart(month);
-        final maxMonth = _maxMonthFor(maxYears);
-        if (_cursor.isAfter(maxMonth)) _cursor = maxMonth;
+        _clampCursor(maxYears);
       }
     });
   }
 
   void _go(int delta, int maxYears) {
     setState(() {
-      if (_period == _PeriodMode.yearly) {
+      if (_navByYear) {
         final next = DateTime(_cursor.year + delta);
-        if (next.year < _today.year || next.year > _today.year + maxYears) {
+        if (next.year < _today.year || next.year > _maxYear(maxYears)) {
           return;
         }
         _cursor = next;
@@ -129,9 +155,149 @@ class _LookAheadScreenState extends State<LookAheadScreen> {
     });
   }
 
+  void _toggleChart(int maxYears) {
+    setState(() {
+      _showChart = !_showChart;
+      if (_showChart) {
+        _cursor = DateTime(_cursor.year);
+      } else if (_period == _PeriodMode.monthly) {
+        final month = DateTime(_cursor.year, _today.month);
+        _cursor = month.isBefore(_minMonth) ? _minMonth : monthStart(month);
+      }
+      _clampCursor(maxYears);
+    });
+  }
+
+  int _itemsCacheKey(TxMetaController meta, BankController bank) =>
+      Object.hash(meta.storeRevision, identityHashCode(bank.transactions));
+
+  /// Projected account balance at each month-end / year-end.
+  List<_BalancePoint> _balanceSeries({
+    required List<RecurringItem> items,
+    required double currentBalance,
+    required int maxYears,
+  }) {
+    final today = _today;
+    if (_period == _PeriodMode.monthly) {
+      final year = _cursor.year;
+      const months = [
+        'J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D',
+      ];
+      final out = <_BalancePoint>[];
+      for (var m = 1; m <= 12; m++) {
+        final end = DateTime(year, m + 1, 0);
+        final balance = !end.isAfter(today)
+            ? currentBalance
+            : predictBalance(
+                currentBalance: currentBalance,
+                from: today,
+                throughDate: end,
+                items: items,
+              );
+        out.add(
+          _BalancePoint(
+            key: DateTime(year, m),
+            label: months[m - 1],
+            balance: balance,
+          ),
+        );
+      }
+      return out;
+    }
+
+    final startYear = _today.year;
+    final endYear = _maxYear(maxYears);
+    final out = <_BalancePoint>[];
+    for (var y = startYear; y <= endYear; y++) {
+      final end = DateTime(y, 12, 31);
+      final balance = !end.isAfter(today)
+          ? currentBalance
+          : predictBalance(
+              currentBalance: currentBalance,
+              from: today,
+              throughDate: end,
+              items: items,
+            );
+      out.add(
+        _BalancePoint(
+          key: DateTime(y),
+          label: '$y',
+          balance: balance,
+        ),
+      );
+    }
+    return out;
+  }
+
+  /// Resolve recurring amounts off the build path, yielding so nav stays live.
+  void _ensureItemsLoaded({
+    required int cacheKey,
+    required TxMetaController meta,
+    required BankController bank,
+  }) {
+    if (_snapshot?.key == cacheKey || _loadingKey == cacheKey) return;
+    _loadingKey = cacheKey;
+    final gen = ++_computeGen;
+    final templates = List<RecurringTemplate>.of(meta.recurringTemplates);
+    final transactions = bank.transactions;
+
+    unawaited(() async {
+      // Let the spinner / tab switch paint before heavy work.
+      await Future<void>.delayed(Duration.zero);
+      if (!mounted || gen != _computeGen) return;
+
+      final items = <RecurringItem>[];
+      for (var i = 0; i < templates.length; i++) {
+        final tpl = templates[i];
+        items.add(
+          RecurringItem(
+            templateId: tpl.id,
+            description: tpl.name,
+            amount: resolveRecurringAmount(
+              template: tpl,
+              transactions: transactions,
+              isInternalTransfer: (tx) => meta.metaFor(tx).internalTransfer,
+              labelIdsFor: meta.labelIdsFor,
+            ),
+            currency: tpl.currency,
+            dayOfMonth: tpl.dayOfMonth.clamp(1, 28),
+            ruleSummary: recurringRuleSummary(
+              template: tpl,
+              labelName: (id) => meta.labelById(id)?.name ?? 'label',
+            ),
+            sourceTxId: tpl.sourceTxId,
+            labelIds: [
+              if (tpl.labelId != null && tpl.labelId!.isNotEmpty) tpl.labelId!,
+            ],
+          ),
+        );
+        // Yield often so bottom-nav taps are not starved.
+        if (i % 2 == 1) {
+          await Future<void>.delayed(Duration.zero);
+          if (!mounted || gen != _computeGen) return;
+        }
+      }
+
+      if (!mounted || gen != _computeGen) return;
+      setState(() {
+        _snapshot = _ItemsSnapshot(key: cacheKey, items: items);
+        if (_loadingKey == cacheKey) _loadingKey = null;
+      });
+    }());
+  }
+
   @override
   Widget build(BuildContext context) {
-    if (ShellTabScope.of(context) != LookAheadScreen.tabIndex) {
+    final active = ShellTabScope.of(context) == LookAheadScreen.tabIndex;
+    if (!active) {
+      if (_loadingKey != null) {
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+          if (!mounted) return;
+          if (ShellTabScope.of(context) == LookAheadScreen.tabIndex) return;
+          _computeGen++;
+          _loadingKey = null;
+        });
+      }
       return const SizedBox.expand();
     }
     return SkipBuildWhenCovered(
@@ -165,22 +331,38 @@ class _LookAheadScreenState extends State<LookAheadScreen> {
     final currentAmount = balance?.amount ?? 0;
     final today = _today;
     final through = _through;
-    final cacheKey = Object.hash(
-      meta.storeRevision,
-      identityHashCode(bank.transactions),
-    );
-    if (_cachedItems == null || _itemsCacheKey != cacheKey) {
-      _itemsCacheKey = cacheKey;
-      _cachedItems = recurringItemsFromTemplates(
-        templates: meta.recurringTemplates,
-        transactions: bank.transactions,
-        isInternalTransfer: (tx) => meta.metaFor(tx).internalTransfer,
-        labelIdsFor: meta.labelIdsFor,
-        labelName: (id) => meta.labelById(id)?.name ?? 'label',
+    final cacheKey = _itemsCacheKey(meta, bank);
+    if (_snapshot?.key != cacheKey && _loadingKey != cacheKey) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (!mounted) return;
+        if (ShellTabScope.of(context) != LookAheadScreen.tabIndex) return;
+        _ensureItemsLoaded(cacheKey: cacheKey, meta: meta, bank: bank);
+      });
+    }
+
+    final snapshot = _snapshot;
+    final ready = snapshot != null && snapshot.key == cacheKey;
+
+    if (!ready) {
+      return Scaffold(
+        appBar: AppBar(
+          title: const Text('Look ahead'),
+          actions: [
+            IconButton(
+              tooltip: _showChart ? 'Show list' : 'Show chart',
+              onPressed: () => _toggleChart(maxYears),
+              icon: Icon(
+                _showChart ? Icons.view_list_outlined : Icons.calendar_month,
+              ),
+            ),
+            ...bankAppBarActions(context: context),
+          ],
+        ),
+        body: const LoadingView(message: 'Calculating look ahead…'),
       );
     }
-    final items = _cachedItems!;
 
+    final items = snapshot.items;
     final projected = projectedOccurrences(
       items: items,
       from: today,
@@ -216,7 +398,16 @@ class _LookAheadScreenState extends State<LookAheadScreen> {
     return Scaffold(
       appBar: AppBar(
         title: const Text('Look ahead'),
-        actions: bankAppBarActions(context: context),
+        actions: [
+          IconButton(
+            tooltip: _showChart ? 'Show list' : 'Show chart',
+            onPressed: () => _toggleChart(maxYears),
+            icon: Icon(
+              _showChart ? Icons.view_list_outlined : Icons.calendar_month,
+            ),
+          ),
+          ...bankAppBarActions(context: context),
+        ],
       ),
       body: ResponsiveBody(
         child: ListView(
@@ -234,10 +425,8 @@ class _LookAheadScreenState extends State<LookAheadScreen> {
               canGoForward: _canGoForward(maxYears),
               onBack: () => _go(-1, maxYears),
               onForward: () => _go(1, maxYears),
-              backTooltip:
-                  _period == _PeriodMode.yearly ? 'Previous year' : 'Previous month',
-              forwardTooltip:
-                  _period == _PeriodMode.yearly ? 'Next year' : 'Next month',
+              backTooltip: _navByYear ? 'Previous year' : 'Previous month',
+              forwardTooltip: _navByYear ? 'Next year' : 'Next month',
             ),
             const SizedBox(height: 12),
             Material(
@@ -321,82 +510,110 @@ class _LookAheadScreenState extends State<LookAheadScreen> {
                 ),
               ],
             ),
-            const SizedBox(height: 20),
-            Row(
-              children: [
-                Expanded(
-                  child: Text(
-                    'Recurring spendings',
-                    style: theme.textTheme.titleMedium,
-                  ),
-                ),
-                TextButton.icon(
-                  onPressed: () => showCreateRecurringTemplateSheet(context),
-                  icon: const Icon(Icons.add, size: 18),
-                  label: const Text('New'),
-                ),
-              ],
-            ),
-            const SizedBox(height: 10),
-            Row(
-              children: [
-                Expanded(
-                  child: _SummaryCard(
-                    icon: Icons.south_west,
-                    iconBackground: AppTheme.accent.withValues(alpha: 0.18),
-                    iconColor: AppTheme.accent,
-                    amount: formatMoney(monthlyIncome, currency),
-                    label: 'Monthly income',
-                  ),
-                ),
-                const SizedBox(width: 12),
-                Expanded(
-                  child: _SummaryCard(
-                    icon: Icons.north_east,
-                    iconBackground: AppTheme.expense.withValues(alpha: 0.18),
-                    iconColor: AppTheme.expense,
-                    amount: formatMoney(monthlyExpense, currency),
-                    label: 'Monthly expense',
-                  ),
-                ),
-              ],
-            ),
-            const SizedBox(height: 10),
-            if (items.isEmpty)
-              const EmptyState(
-                icon: Icons.event_repeat_outlined,
-                title: 'No recurring spendings',
-                message:
-                    'Open a transaction and tap Create recurring spending, '
-                    'or use New to pick a transaction or label average.',
-              )
-            else
-              Card(
-                color: colors.surfaceContainer,
-                elevation: 0,
-                clipBehavior: Clip.antiAlias,
-                shape: RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(16),
-                ),
-                child: Column(
-                  children: [
-                    for (var i = 0; i < items.length; i++) ...[
-                      if (i > 0)
-                        Divider(
-                          height: 1,
-                          indent: 16,
-                          color: colors.outlineVariant.withValues(alpha: 0.4),
-                        ),
-                      _TemplateTile(
-                        item: items[i],
-                        template:
-                            meta.recurringTemplateById(items[i].templateId),
-                        transactions: bank.transactions,
-                      ),
-                    ],
-                  ],
+            if (_showChart) ...[
+              const SizedBox(height: 16),
+              _LookAheadBalanceChart(
+                points: _balanceSeries(
+                  items: items,
+                  currentBalance: currentAmount,
+                  maxYears: maxYears,
                 ),
+                period: _period,
+                currency: currency,
               ),
+              const SizedBox(height: 8),
+              Text(
+                _period == _PeriodMode.yearly
+                    ? 'Projected account balance by year'
+                    : 'Projected account balance by month',
+                style: theme.textTheme.bodySmall?.copyWith(
+                  color: colors.onSurfaceVariant,
+                ),
+                textAlign: TextAlign.center,
+              ),
+            ] else ...[
+              const SizedBox(height: 20),
+              Row(
+                children: [
+                  Expanded(
+                    child: Text(
+                      'Recurring spendings',
+                      style: theme.textTheme.titleMedium,
+                    ),
+                  ),
+                  TextButton.icon(
+                    onPressed: () => showCreateRecurringTemplateSheet(context),
+                    icon: const Icon(Icons.add, size: 18),
+                    label: const Text('New'),
+                  ),
+                ],
+              ),
+              const SizedBox(height: 10),
+              Row(
+                children: [
+                  Expanded(
+                    child: _SummaryCard(
+                      icon: Icons.south_west,
+                      iconBackground: AppTheme.accent.withValues(alpha: 0.18),
+                      iconColor: AppTheme.accent,
+                      amount: formatMoney(monthlyIncome, currency),
+                      label: 'Monthly income',
+                    ),
+                  ),
+                  const SizedBox(width: 12),
+                  Expanded(
+                    child: _SummaryCard(
+                      icon: Icons.north_east,
+                      iconBackground: AppTheme.expense.withValues(alpha: 0.18),
+                      iconColor: AppTheme.expense,
+                      amount: formatMoney(monthlyExpense, currency),
+                      label: 'Monthly expense',
+                    ),
+                  ),
+                ],
+              ),
+              const SizedBox(height: 10),
+              _SavingsCard(
+                monthlySavings: monthlyIncome - monthlyExpense,
+                currency: currency,
+              ),
+              const SizedBox(height: 10),
+              if (items.isEmpty)
+                const EmptyState(
+                  icon: Icons.event_repeat_outlined,
+                  title: 'No recurring spendings',
+                  message:
+                      'Open a transaction and tap Create recurring spending, '
+                      'or use New to pick a transaction or label average.',
+                )
+              else
+                Card(
+                  color: colors.surfaceContainer,
+                  elevation: 0,
+                  clipBehavior: Clip.antiAlias,
+                  shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(16),
+                  ),
+                  child: Column(
+                    children: [
+                      for (var i = 0; i < items.length; i++) ...[
+                        if (i > 0)
+                          Divider(
+                            height: 1,
+                            indent: 16,
+                            color: colors.outlineVariant.withValues(alpha: 0.4),
+                          ),
+                        _TemplateTile(
+                          item: items[i],
+                          template:
+                              meta.recurringTemplateById(items[i].templateId),
+                          transactions: bank.transactions,
+                        ),
+                      ],
+                    ],
+                  ),
+                ),
+            ],
           ],
         ),
       ),
@@ -404,6 +621,315 @@ class _LookAheadScreenState extends State<LookAheadScreen> {
   }
 }
 
+class _LookAheadBalanceChart extends StatelessWidget {
+  const _LookAheadBalanceChart({
+    required this.points,
+    required this.period,
+    required this.currency,
+  });
+
+  final List<_BalancePoint> points;
+  final _PeriodMode period;
+  final String currency;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colors = theme.colorScheme;
+    if (points.isEmpty) {
+      return Card(
+        color: colors.surfaceContainer,
+        elevation: 0,
+        margin: EdgeInsets.zero,
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
+        child: Padding(
+          padding: const EdgeInsets.all(24),
+          child: Text(
+            'No projected balance for this period',
+            style: theme.textTheme.bodyMedium?.copyWith(
+              color: colors.onSurfaceVariant,
+            ),
+            textAlign: TextAlign.center,
+          ),
+        ),
+      );
+    }
+
+    var minY = points.first.balance;
+    var maxY = points.first.balance;
+    for (final p in points) {
+      if (p.balance < minY) minY = p.balance;
+      if (p.balance > maxY) maxY = p.balance;
+    }
+    if (minY == maxY) {
+      minY -= 1;
+      maxY += 1;
+    }
+    final pad = (maxY - minY).abs() * 0.12;
+    final safeMin = minY - pad;
+    final safeMax = maxY + pad;
+    final interval = ((safeMax - safeMin) / 3).abs();
+    final safeInterval = interval <= 0 ? 1.0 : interval;
+
+    final spots = [
+      for (var i = 0; i < points.length; i++)
+        FlSpot(i.toDouble(), points[i].balance),
+    ];
+
+    return Card(
+      color: colors.surfaceContainer,
+      elevation: 0,
+      margin: EdgeInsets.zero,
+      clipBehavior: Clip.antiAlias,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(14, 14, 14, 16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Text(
+              'Projected balance',
+              style: theme.textTheme.titleMedium?.copyWith(
+                fontWeight: FontWeight.w700,
+              ),
+            ),
+            const SizedBox(height: 12),
+            SizedBox(
+              height: 220,
+              child: LineChart(
+                LineChartData(
+                  minX: 0,
+                  maxX: (points.length - 1).toDouble(),
+                  minY: safeMin,
+                  maxY: safeMax,
+                  lineTouchData: LineTouchData(
+                    handleBuiltInTouches: true,
+                    touchTooltipData: LineTouchTooltipData(
+                      getTooltipItems: (touched) {
+                        return [
+                          for (final spot in touched)
+                            if (spot.x.round() >= 0 &&
+                                spot.x.round() < points.length)
+                              LineTooltipItem(
+                                '${points[spot.x.round()].label}\n'
+                                '${formatMoney(points[spot.x.round()].balance, currency)}',
+                                theme.textTheme.labelMedium!.copyWith(
+                                  color: colors.onInverseSurface,
+                                  fontWeight: FontWeight.w600,
+                                ),
+                              ),
+                        ];
+                      },
+                    ),
+                  ),
+                  titlesData: FlTitlesData(
+                    topTitles: const AxisTitles(
+                      sideTitles: SideTitles(showTitles: false),
+                    ),
+                    rightTitles: const AxisTitles(
+                      sideTitles: SideTitles(showTitles: false),
+                    ),
+                    leftTitles: AxisTitles(
+                      sideTitles: SideTitles(
+                        showTitles: true,
+                        reservedSize: 44,
+                        interval: safeInterval,
+                        getTitlesWidget: (value, meta) {
+                          if ((value - safeMax).abs() < 0.01 ||
+                              (value - safeMin).abs() < 0.01) {
+                            return const SizedBox.shrink();
+                          }
+                          return Text(
+                            _compactMoney(value),
+                            style: theme.textTheme.labelSmall,
+                          );
+                        },
+                      ),
+                    ),
+                    bottomTitles: AxisTitles(
+                      sideTitles: SideTitles(
+                        showTitles: true,
+                        reservedSize: 28,
+                        interval: 1,
+                        getTitlesWidget: (value, meta) {
+                          final index = value.round();
+                          if (index < 0 || index >= points.length) {
+                            return const SizedBox.shrink();
+                          }
+                          if (period == _PeriodMode.yearly &&
+                              points.length > 8 &&
+                              index % 2 == 1) {
+                            return const SizedBox.shrink();
+                          }
+                          return Padding(
+                            padding: const EdgeInsets.only(top: 8),
+                            child: Text(
+                              points[index].label,
+                              style: theme.textTheme.labelSmall,
+                            ),
+                          );
+                        },
+                      ),
+                    ),
+                  ),
+                  gridData: FlGridData(
+                    show: true,
+                    drawVerticalLine: false,
+                    horizontalInterval: safeInterval,
+                    getDrawingHorizontalLine: (value) => FlLine(
+                      color: colors.outlineVariant.withValues(alpha: 0.35),
+                      strokeWidth: 1,
+                      dashArray: const [4, 4],
+                    ),
+                  ),
+                  borderData: FlBorderData(show: false),
+                  lineBarsData: [
+                    LineChartBarData(
+                      spots: spots,
+                      isCurved: true,
+                      curveSmoothness: 0.18,
+                      color: colors.primary,
+                      barWidth: 3,
+                      isStrokeCapRound: true,
+                      dotData: FlDotData(
+                        show: true,
+                        getDotPainter: (spot, percent, bar, index) {
+                          return FlDotCirclePainter(
+                            radius: 3.5,
+                            color: colors.primary,
+                            strokeWidth: 0,
+                          );
+                        },
+                      ),
+                      belowBarData: BarAreaData(
+                        show: true,
+                        color: colors.primary.withValues(alpha: 0.14),
+                      ),
+                    ),
+                  ],
+                ),
+                duration: Duration.zero,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _SavingsCard extends StatelessWidget {
+  const _SavingsCard({
+    required this.monthlySavings,
+    required this.currency,
+  });
+
+  final double monthlySavings;
+  final String currency;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colors = theme.colorScheme;
+    final yearly = monthlySavings * 12;
+    final positive = monthlySavings >= 0;
+    final tone = positive ? AppTheme.accent : AppTheme.expense;
+
+    return Card(
+      color: colors.surfaceContainer,
+      elevation: 0,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(18),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(14, 14, 14, 14),
+        child: Row(
+          children: [
+            Container(
+              width: 42,
+              height: 42,
+              decoration: BoxDecoration(
+                color: tone.withValues(alpha: 0.18),
+                borderRadius: BorderRadius.circular(12),
+              ),
+              child: Icon(Icons.savings_outlined, color: tone, size: 22),
+            ),
+            const SizedBox(width: 12),
+            Expanded(
+              child: _SavingsMetric(
+                label: 'Monthly savings',
+                amount: formatMoney(monthlySavings, currency),
+                color: tone,
+              ),
+            ),
+            const SizedBox(width: 12),
+            Expanded(
+              child: _SavingsMetric(
+                label: 'Yearly savings',
+                amount: formatMoney(yearly, currency),
+                color: tone,
+                alignEnd: true,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _SavingsMetric extends StatelessWidget {
+  const _SavingsMetric({
+    required this.label,
+    required this.amount,
+    required this.color,
+    this.alignEnd = false,
+  });
+
+  final String label;
+  final String amount;
+  final Color color;
+  final bool alignEnd;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colors = theme.colorScheme;
+    return Column(
+      crossAxisAlignment:
+          alignEnd ? CrossAxisAlignment.end : CrossAxisAlignment.start,
+      children: [
+        Text(
+          label.toUpperCase(),
+          style: theme.textTheme.labelSmall?.copyWith(
+            letterSpacing: 0.6,
+            fontWeight: FontWeight.w600,
+            color: colors.onSurfaceVariant,
+          ),
+        ),
+        const SizedBox(height: 2),
+        Text(
+          amount,
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+          style: theme.textTheme.titleMedium?.copyWith(
+            fontWeight: FontWeight.w700,
+            color: color,
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+String _compactMoney(double value) {
+  final abs = value.abs();
+  if (abs >= 1000000) return '${(value / 1000000).toStringAsFixed(1)}M';
+  if (abs >= 1000) return '${(value / 1000).toStringAsFixed(1)}k';
+  if (abs >= 100) return value.toStringAsFixed(0);
+  return value.toStringAsFixed(abs < 10 && abs > 0 ? 1 : 0);
+}
+
 class _PeriodToolbar extends StatelessWidget {
   const _PeriodToolbar({
     required this.period,

lib/screens/overview_screen.dart

@@ -12,6 +12,7 @@ import '../providers/bank_provider.dart';
 import '../providers/preferences_provider.dart';
 import '../providers/tx_meta_provider.dart';
 import '../utils/app_theme.dart';
+import '../utils/deferred_tab_work.dart';
 import '../utils/helpers.dart';
 import '../utils/navigation.dart';
 import '../utils/tx_calendar.dart';
@@ -28,6 +29,36 @@ import 'transactions_screen.dart';
 const _kIncomeColor = AppTheme.accent;
 const _kExpenseColor = AppTheme.expense;
 
+class _FavouriteAgg {
+  const _FavouriteAgg({
+    required this.periods,
+    required this.monthly,
+    required this.labelSpend,
+    required this.labelAmountByPeriod,
+  });
+
+  final List<DateTime> periods;
+  final Map<DateTime, _MonthBucket> monthly;
+  final List<_LabelSpend> labelSpend;
+  final Map<DateTime, Map<String, double>> labelAmountByPeriod;
+}
+
+class _OverviewAggSnapshot {
+  const _OverviewAggSnapshot({
+    required this.periods,
+    required this.monthly,
+    required this.labelSpend,
+    required this.labelAmountByPeriod,
+    required this.favourites,
+  });
+
+  final List<DateTime> periods;
+  final Map<DateTime, _MonthBucket> monthly;
+  final List<_LabelSpend> labelSpend;
+  final Map<DateTime, Map<String, double>> labelAmountByPeriod;
+  final Map<String, _FavouriteAgg> favourites;
+}
+
 class OverviewScreen extends StatefulWidget {
   const OverviewScreen({super.key});
 
@@ -59,6 +90,7 @@ class _OverviewScreenState extends State<OverviewScreen> {
   /// Favourites charts view (vs full overview with history).
   bool _showFavouritesView = false;
   var _favouritesDefaultApplied = false;
+  final _work = DeferredTabWork<_OverviewAggSnapshot>();
 
   @override
   void initState() {
@@ -247,7 +279,15 @@ class _OverviewScreenState extends State<OverviewScreen> {
 
   @override
   Widget build(BuildContext context) {
-    if (ShellTabScope.of(context) != OverviewScreen.tabIndex) {
+    final active = ShellTabScope.of(context) == OverviewScreen.tabIndex;
+    if (!active) {
+      if (_work.isLoading) {
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+          if (!mounted) return;
+          if (ShellTabScope.of(context) == OverviewScreen.tabIndex) return;
+          _work.cancel();
+        });
+      }
       return const SizedBox.expand();
     }
 
@@ -268,6 +308,41 @@ class _OverviewScreenState extends State<OverviewScreen> {
       });
     }
 
+    final emptyLoading =
+        bank.isLoading && bank.transactions.isEmpty && bank.balance == null;
+    final needsData = bank.isLinked || bank.hasData;
+    final displayedFavs = prefs.displayedOverviewFavourites;
+    final cacheKey = Object.hash(
+      meta.storeRevision,
+      identityHashCode(bank.transactions),
+      _showFavouritesView,
+      _period,
+      _metric,
+      _cursor.year,
+      Object.hashAll(_includedLabelIds),
+      _labelFlow,
+      _labelBarStyle,
+      _labelInvertChart,
+      Object.hashAll(displayedFavs.map((f) => f.id)),
+      Object.hashAll(displayedFavs.map((f) => f.updatedAt)),
+    );
+
+    if (needsData && !emptyLoading && !_work.readyFor(cacheKey)) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (!mounted) return;
+        if (ShellTabScope.of(context) != OverviewScreen.tabIndex) return;
+        _scheduleOverviewCompute(
+          key: cacheKey,
+          bank: bank,
+          meta: meta,
+          displayedFavs: displayedFavs,
+        );
+      });
+    }
+
+    final showSpinner =
+        needsData && !emptyLoading && !_work.readyFor(cacheKey);
+
     return Scaffold(
       appBar: AppBar(
         title: Text(_showFavouritesView ? 'Favourites' : 'Overview'),
@@ -288,16 +363,107 @@ class _OverviewScreenState extends State<OverviewScreen> {
       body: RefreshIndicator(
         onRefresh: bank.refresh,
         child: ResponsiveBody(
-          child: SkipBuildWhenCovered(
-            builder: (context) => _showFavouritesView
-                ? _buildFavouritesBody(context, bank, meta, prefs)
-                : _buildBody(context, bank, meta, prefs),
-          ),
+          child: showSpinner
+              ? ListView(
+                  physics: const AlwaysScrollableScrollPhysics(),
+                  children: const [
+                    SizedBox(height: 120),
+                    LoadingView(message: 'Loading overview…'),
+                  ],
+                )
+              : SkipBuildWhenCovered(
+                  builder: (context) => _showFavouritesView
+                      ? _buildFavouritesBody(context, bank, meta, prefs)
+                      : _buildBody(context, bank, meta, prefs),
+                ),
         ),
       ),
     );
   }
 
+  void _scheduleOverviewCompute({
+    required Object key,
+    required BankController bank,
+    required TxMetaController meta,
+    required List<OverviewFavourite> displayedFavs,
+  }) {
+    _work.ensure(
+      key: key,
+      mounted: () => mounted,
+      onUpdate: () {
+        if (mounted) setState(() {});
+      },
+      compute: (yieldUi) async {
+        final txs = bank.transactions;
+        final periods = _chartPeriods(txs);
+        await yieldUi();
+
+        Map<DateTime, _MonthBucket> monthly = const {};
+        var labelSpend = const <_LabelSpend>[];
+        Map<DateTime, Map<String, double>> labelAmountByPeriod = const {};
+
+        if (!_showFavouritesView) {
+          if (_metric == OverviewMetricMode.flow) {
+            monthly = _flowTotals(txs, meta, periods, _period);
+          } else {
+            final labels = _labelAggregates(
+              txs,
+              meta,
+              periods,
+              _period,
+              includedLabelIds: _includedLabelIds,
+              flow: _labelFlow,
+            );
+            labelSpend = labels.spend;
+            labelAmountByPeriod = labels.amountByPeriod;
+          }
+          await yieldUi();
+        }
+
+        final favourites = <String, _FavouriteAgg>{};
+        if (_showFavouritesView) {
+          for (var i = 0; i < displayedFavs.length; i++) {
+            final favourite = displayedFavs[i];
+            final favPeriods = _chartPeriodsFor(favourite.period, txs);
+            Map<DateTime, _MonthBucket> favMonthly = const {};
+            var favLabels = const <_LabelSpend>[];
+            Map<DateTime, Map<String, double>> favByPeriod = const {};
+            if (favourite.metric == OverviewMetricMode.flow) {
+              favMonthly =
+                  _flowTotals(txs, meta, favPeriods, favourite.period);
+            } else {
+              final labels = _labelAggregates(
+                txs,
+                meta,
+                favPeriods,
+                favourite.period,
+                includedLabelIds: favourite.labelIds.toSet(),
+                flow: favourite.flow,
+              );
+              favLabels = labels.spend;
+              favByPeriod = labels.amountByPeriod;
+            }
+            favourites[favourite.id] = _FavouriteAgg(
+              periods: favPeriods,
+              monthly: favMonthly,
+              labelSpend: favLabels,
+              labelAmountByPeriod: favByPeriod,
+            );
+            await yieldUi();
+          }
+        }
+
+        return _OverviewAggSnapshot(
+          periods: periods,
+          monthly: monthly,
+          labelSpend: labelSpend,
+          labelAmountByPeriod: labelAmountByPeriod,
+          favourites: favourites,
+        );
+      },
+    );
+  }
+
   Widget _buildFavouritesBody(
     BuildContext context,
     BankController bank,
@@ -329,6 +495,7 @@ class _OverviewScreenState extends State<OverviewScreen> {
             : 'EUR');
     final txs = bank.transactions;
     final displayed = prefs.displayedOverviewFavourites;
+    final agg = _work.value;
 
     return ListView(
       physics: const AlwaysScrollableScrollPhysics(),
@@ -399,6 +566,7 @@ class _OverviewScreenState extends State<OverviewScreen> {
               txs: txs,
               meta: meta,
               currency: currency,
+              precomputed: agg?.favourites[displayed[i].id],
             ),
           ],
         ],
@@ -412,25 +580,30 @@ class _OverviewScreenState extends State<OverviewScreen> {
     required List<BankTransaction> txs,
     required TxMetaController meta,
     required String currency,
+    _FavouriteAgg? precomputed,
   }) {
-    final periods = _chartPeriodsFor(favourite.period, txs);
-    Map<DateTime, _MonthBucket> monthly = const {};
-    var labelSpend = const <_LabelSpend>[];
-    Map<DateTime, Map<String, double>> labelAmountByPeriod = const {};
+    final periods = precomputed?.periods ??
+        _chartPeriodsFor(favourite.period, txs);
+    Map<DateTime, _MonthBucket> monthly = precomputed?.monthly ?? const {};
+    var labelSpend = precomputed?.labelSpend ?? const <_LabelSpend>[];
+    Map<DateTime, Map<String, double>> labelAmountByPeriod =
+        precomputed?.labelAmountByPeriod ?? const {};
 
-    if (favourite.metric == OverviewMetricMode.flow) {
-      monthly = _flowTotals(txs, meta, periods, favourite.period);
-    } else {
-      final labels = _labelAggregates(
-        txs,
-        meta,
-        periods,
-        favourite.period,
-        includedLabelIds: favourite.labelIds.toSet(),
-        flow: favourite.flow,
-      );
-      labelSpend = labels.spend;
-      labelAmountByPeriod = labels.amountByPeriod;
+    if (precomputed == null) {
+      if (favourite.metric == OverviewMetricMode.flow) {
+        monthly = _flowTotals(txs, meta, periods, favourite.period);
+      } else {
+        final labels = _labelAggregates(
+          txs,
+          meta,
+          periods,
+          favourite.period,
+          includedLabelIds: favourite.labelIds.toSet(),
+          flow: favourite.flow,
+        );
+        labelSpend = labels.spend;
+        labelAmountByPeriod = labels.amountByPeriod;
+      }
     }
 
     final periodTitle = favourite.period == OverviewPeriodMode.monthly
@@ -530,28 +703,31 @@ class _OverviewScreenState extends State<OverviewScreen> {
             ? bank.transactions.first.currency
             : 'EUR');
     final txs = bank.transactions;
-    final periods = _chartPeriods(txs);
+    final agg = _work.value;
+    final periods = agg?.periods ?? _chartPeriods(txs);
     final historyPeriods = [...periods.reversed];
 
-    // Only aggregate what the active metric needs — toggling was scanning
-    // all txs 3–4 times and resolving full meta each time.
-    Map<DateTime, _MonthBucket> monthly = const {};
-    var labelSpend = const <_LabelSpend>[];
-    Map<DateTime, Map<String, double>> labelAmountByPeriod = const {};
+    // Prefer deferred aggregates; fall back only if snapshot is missing.
+    Map<DateTime, _MonthBucket> monthly = agg?.monthly ?? const {};
+    var labelSpend = agg?.labelSpend ?? const <_LabelSpend>[];
+    Map<DateTime, Map<String, double>> labelAmountByPeriod =
+        agg?.labelAmountByPeriod ?? const {};
 
-    if (_metric == OverviewMetricMode.flow) {
-      monthly = _flowTotals(txs, meta, periods, _period);
-    } else {
-      final labels = _labelAggregates(
-        txs,
-        meta,
-        periods,
-        _period,
-        includedLabelIds: _includedLabelIds,
-        flow: _labelFlow,
-      );
-      labelSpend = labels.spend;
-      labelAmountByPeriod = labels.amountByPeriod;
+    if (agg == null) {
+      if (_metric == OverviewMetricMode.flow) {
+        monthly = _flowTotals(txs, meta, periods, _period);
+      } else {
+        final labels = _labelAggregates(
+          txs,
+          meta,
+          periods,
+          _period,
+          includedLabelIds: _includedLabelIds,
+          flow: _labelFlow,
+        );
+        labelSpend = labels.spend;
+        labelAmountByPeriod = labels.amountByPeriod;
+      }
     }
 
     final summaryFlow = _metric == OverviewMetricMode.flow
@@ -781,10 +957,12 @@ class _OverviewScreenState extends State<OverviewScreen> {
     final resolvedLabelIds = labelId != null
         ? {labelId}
         : (labelIds ??
-            {
-              // Open with the same labels currently shown on the chart.
-              for (final id in _includedLabelIds) id,
-            });
+            (_metric == OverviewMetricMode.labels
+                ? {
+                    // Open with the same labels currently shown on the chart.
+                    for (final id in _includedLabelIds) id,
+                  }
+                : <String>{}));
     Navigator.of(context).push(
       MaterialPageRoute<void>(
         builder: (_) => TransactionsScreen(
@@ -792,7 +970,8 @@ class _OverviewScreenState extends State<OverviewScreen> {
           initialLabelIds: resolvedLabelIds,
           initialLabelMatch: LabelMatchMode.or,
           initialFlow: flow,
-          initialSearchInMonthOnly: !yearly && resolvedLabelIds.isNotEmpty,
+          // A specific bar/period should always scope to that month (or year).
+          initialSearchInMonthOnly: !yearly,
           initialYear: yearly ? period.year : null,
         ),
       ),
@@ -1439,19 +1618,23 @@ class _ChartCard extends StatelessWidget {
       margin: EdgeInsets.zero,
       clipBehavior: Clip.antiAlias,
       shape: RoundedRectangleBorder(borderRadius: radius),
-      // Whole card opens the chart filter; nested buttons/legend keep their own taps.
-      child: InkWell(
-        onTap: onChartTap,
-        borderRadius: radius,
-        child: Padding(
-          padding: EdgeInsets.fromLTRB(
-            compact ? 12 : 14,
-            compact ? 10 : 12,
-            compact ? 10 : 14,
-            compact ? 12 : 16,
-          ),
-          child: Column(
-            children: [
+      // Header/legend open the chart-wide filter; bars handle their own taps.
+      child: Padding(
+        padding: EdgeInsets.fromLTRB(
+          compact ? 12 : 14,
+          compact ? 10 : 12,
+          compact ? 10 : 14,
+          compact ? 12 : 16,
+        ),
+        child: Column(
+          children: [
+            Material(
+              color: Colors.transparent,
+              child: InkWell(
+                onTap: onChartTap,
+                borderRadius: BorderRadius.circular(12),
+                child: Column(
+                  children: [
               if (compact) ...[
                 Row(
                   children: [
@@ -1598,6 +1781,10 @@ class _ChartCard extends StatelessWidget {
                   const SizedBox(height: 8),
                 ],
               ],
+                  ],
+                ),
+              ),
+            ),
               SizedBox(
                 height: chartHeight,
                 child: metric == OverviewMetricMode.flow
@@ -1624,7 +1811,6 @@ class _ChartCard extends StatelessWidget {
             ],
           ),
         ),
-      ),
     );
   }
 }
@@ -1682,104 +1868,122 @@ class _FlowBars extends StatelessWidget {
       );
     }
 
-    return GestureDetector(
-      behavior: HitTestBehavior.opaque,
-      onTap: onChartTap,
-      child: IgnorePointer(
-        // fl_chart otherwise owns the gesture arena and empty taps go nowhere.
-        // Tap opens this chart's filters; legend / history still open columns.
-        child: BarChart(
-          BarChartData(
-            maxY: safeMax,
-            groupsSpace: period == OverviewPeriodMode.yearly ? 16 : 10,
-            barTouchData: const BarTouchData(enabled: false),
-            titlesData: FlTitlesData(
-              topTitles:
-                  const AxisTitles(sideTitles: SideTitles(showTitles: false)),
-              rightTitles:
-                  const AxisTitles(sideTitles: SideTitles(showTitles: false)),
-              leftTitles: AxisTitles(
-                sideTitles: SideTitles(
-                  showTitles: true,
-                  reservedSize: 42,
-                  interval: safeMax / 3,
-                  getTitlesWidget: (value, meta) {
-                    if (value <= 0) {
-                      return Text('0', style: theme.textTheme.labelSmall);
-                    }
-                    if ((value - safeMax).abs() < 0.01) {
-                      return const SizedBox.shrink();
-                    }
-                    return Text(
-                      _compactMoney(value),
-                      style: theme.textTheme.labelSmall,
-                    );
-                  },
-                ),
-              ),
-              bottomTitles: AxisTitles(
-                sideTitles: SideTitles(
-                  showTitles: true,
-                  reservedSize: 28,
-                  getTitlesWidget: (value, meta) {
-                    final index = value.toInt();
-                    if (index < 0 || index >= months.length) {
-                      return const SizedBox.shrink();
-                    }
-                    if (period == OverviewPeriodMode.monthly &&
-                        index % 2 == 1 &&
-                        months.length > 8) {
-                      return const SizedBox.shrink();
-                    }
-                    return Padding(
-                      padding: const EdgeInsets.only(top: 8),
-                      child: Text(
-                        _periodAxisLabel(months[index], period),
-                        style: theme.textTheme.labelSmall,
-                      ),
-                    );
-                  },
-                ),
-              ),
-            ),
-            gridData: FlGridData(
-              show: true,
-              drawVerticalLine: false,
-              horizontalInterval: safeMax / 3,
-              getDrawingHorizontalLine: (value) => FlLine(
-                color: colors.outlineVariant.withValues(alpha: 0.35),
-                strokeWidth: 1,
-                dashArray: const [4, 4],
-              ),
-            ),
-            borderData: FlBorderData(show: false),
-            barGroups: [
-              for (var i = 0; i < months.length; i++)
-                BarChartGroupData(
-                  x: i,
-                  barsSpace: 3,
-                  barRods: [
-                    BarChartRodData(
-                      toY: monthly[_periodKey(months[i], period)]!.expense,
-                      width: period == OverviewPeriodMode.yearly ? 14 : 9,
-                      borderRadius:
-                          const BorderRadius.vertical(top: Radius.circular(6)),
-                      color: _kExpenseColor,
-                    ),
-                    BarChartRodData(
-                      toY: monthly[_periodKey(months[i], period)]!.income,
-                      width: period == OverviewPeriodMode.yearly ? 14 : 9,
-                      borderRadius:
-                          const BorderRadius.vertical(top: Radius.circular(6)),
-                      color: _kIncomeColor,
-                    ),
-                  ],
-                ),
-            ],
+    return BarChart(
+      BarChartData(
+        maxY: safeMax,
+        groupsSpace: period == OverviewPeriodMode.yearly ? 16 : 10,
+        barTouchData: BarTouchData(
+          handleBuiltInTouches: false,
+          touchTooltipData: BarTouchTooltipData(
+            getTooltipItem: (group, groupIndex, rod, rodIndex) => null,
           ),
-          duration: Duration.zero,
+          touchCallback: (event, response) {
+            if (event is! FlTapUpEvent) return;
+            final spot = response?.spot;
+            if (spot == null) {
+              onChartTap();
+              return;
+            }
+            final index = spot.touchedBarGroupIndex;
+            if (index < 0 || index >= months.length) {
+              onChartTap();
+              return;
+            }
+            final rod = spot.touchedRodDataIndex;
+            // Rod 0 = expense, rod 1 = income (see barGroups below).
+            final flow = rod == 0
+                ? TxFlowFilter.expense
+                : rod == 1
+                    ? TxFlowFilter.income
+                    : null;
+            onMonthTap(months[index], flow: flow);
+          },
         ),
+        titlesData: FlTitlesData(
+          topTitles:
+              const AxisTitles(sideTitles: SideTitles(showTitles: false)),
+          rightTitles:
+              const AxisTitles(sideTitles: SideTitles(showTitles: false)),
+          leftTitles: AxisTitles(
+            sideTitles: SideTitles(
+              showTitles: true,
+              reservedSize: 42,
+              interval: safeMax / 3,
+              getTitlesWidget: (value, meta) {
+                if (value <= 0) {
+                  return Text('0', style: theme.textTheme.labelSmall);
+                }
+                if ((value - safeMax).abs() < 0.01) {
+                  return const SizedBox.shrink();
+                }
+                return Text(
+                  _compactMoney(value),
+                  style: theme.textTheme.labelSmall,
+                );
+              },
+            ),
+          ),
+          bottomTitles: AxisTitles(
+            sideTitles: SideTitles(
+              showTitles: true,
+              reservedSize: 28,
+              getTitlesWidget: (value, meta) {
+                final index = value.toInt();
+                if (index < 0 || index >= months.length) {
+                  return const SizedBox.shrink();
+                }
+                if (period == OverviewPeriodMode.monthly &&
+                    index % 2 == 1 &&
+                    months.length > 8) {
+                  return const SizedBox.shrink();
+                }
+                return Padding(
+                  padding: const EdgeInsets.only(top: 8),
+                  child: Text(
+                    _periodAxisLabel(months[index], period),
+                    style: theme.textTheme.labelSmall,
+                  ),
+                );
+              },
+            ),
+          ),
+        ),
+        gridData: FlGridData(
+          show: true,
+          drawVerticalLine: false,
+          horizontalInterval: safeMax / 3,
+          getDrawingHorizontalLine: (value) => FlLine(
+            color: colors.outlineVariant.withValues(alpha: 0.35),
+            strokeWidth: 1,
+            dashArray: const [4, 4],
+          ),
+        ),
+        borderData: FlBorderData(show: false),
+        barGroups: [
+          for (var i = 0; i < months.length; i++)
+            BarChartGroupData(
+              x: i,
+              barsSpace: 3,
+              barRods: [
+                BarChartRodData(
+                  toY: monthly[_periodKey(months[i], period)]!.expense,
+                  width: period == OverviewPeriodMode.yearly ? 14 : 9,
+                  borderRadius:
+                      const BorderRadius.vertical(top: Radius.circular(6)),
+                  color: _kExpenseColor,
+                ),
+                BarChartRodData(
+                  toY: monthly[_periodKey(months[i], period)]!.income,
+                  width: period == OverviewPeriodMode.yearly ? 14 : 9,
+                  borderRadius:
+                      const BorderRadius.vertical(top: Radius.circular(6)),
+                  color: _kIncomeColor,
+                ),
+              ],
+            ),
+        ],
       ),
+      duration: Duration.zero,
     );
   }
 }
@@ -1989,16 +2193,47 @@ class _LabelMonthBars extends StatelessWidget {
     final axisInterval = ((safeMax - safeMin) / 3).abs();
     final interval = axisInterval <= 0 ? 1.0 : axisInterval;
 
-    return GestureDetector(
-      behavior: HitTestBehavior.opaque,
-      onTap: onChartTap,
-      child: IgnorePointer(
-        child: BarChart(
-          BarChartData(
-            minY: safeMin,
-            maxY: safeMax,
-            groupsSpace: period == OverviewPeriodMode.yearly ? 16 : 10,
-            barTouchData: const BarTouchData(enabled: false),
+    return BarChart(
+      BarChartData(
+        minY: safeMin,
+        maxY: safeMax,
+        groupsSpace: period == OverviewPeriodMode.yearly ? 16 : 10,
+        barTouchData: BarTouchData(
+          handleBuiltInTouches: false,
+          touchTooltipData: BarTouchTooltipData(
+            getTooltipItem: (group, groupIndex, rod, rodIndex) => null,
+          ),
+          touchCallback: (event, response) {
+            if (event is! FlTapUpEvent) return;
+            final spot = response?.spot;
+            if (spot == null) {
+              onChartTap();
+              return;
+            }
+            final index = spot.touchedBarGroupIndex;
+            if (index < 0 || index >= months.length) {
+              onChartTap();
+              return;
+            }
+            final month = months[index];
+            if (stacked) {
+              final stackIndex = spot.touchedStackItemIndex;
+              if (stackIndex >= 0 && stackIndex < topLabels.length) {
+                onMonthTap(month, labelId: topLabels[stackIndex].label.id);
+                return;
+              }
+              // "Other" segment or whole column → that period with chart labels.
+              onMonthTap(month);
+              return;
+            }
+            final rod = spot.touchedRodDataIndex;
+            if (rod >= 0 && rod < topLabels.length) {
+              onMonthTap(month, labelId: topLabels[rod].label.id);
+              return;
+            }
+            onMonthTap(month);
+          },
+        ),
         titlesData: FlTitlesData(
           topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
           rightTitles:
@@ -2061,18 +2296,16 @@ class _LabelMonthBars extends StatelessWidget {
           ),
         ),
         borderData: FlBorderData(show: false),
-            barGroups: [
-              for (var i = 0; i < months.length; i++)
-                BarChartGroupData(
-                  x: i,
-                  barsSpace: stacked ? 0 : 2,
-                  barRods: rodsFor(months[i]),
-                ),
-            ],
-          ),
-          duration: Duration.zero,
-        ),
+        barGroups: [
+          for (var i = 0; i < months.length; i++)
+            BarChartGroupData(
+              x: i,
+              barsSpace: stacked ? 0 : 2,
+              barRods: rodsFor(months[i]),
+            ),
+        ],
       ),
+      duration: Duration.zero,
     );
   }
 }

lib/screens/transaction_detail_screen.dart

@@ -188,6 +188,7 @@ class _TransactionDetailScreenState extends State<TransactionDetailScreen> {
         await meta.setLabelsForMany(
           targets,
           _draftLabelIds.toList(growable: false),
+          matchPattern: toMatched ? _pattern : null,
         );
         if (!mounted) return;
         setState(() {

lib/utils/deferred_tab_work.dart

@@ -0,0 +1,50 @@
+/// Schedule heavy tab work off the first paint, yielding so nav stays responsive.
+library;
+
+import 'dart:async';
+
+/// Runs [compute] after a frame, cancellable via [cancel] / generation bumps.
+class DeferredTabWork<T> {
+  int _gen = 0;
+  Object? _loadingKey;
+  T? value;
+  Object? valueKey;
+
+  bool readyFor(Object key) => value != null && valueKey == key;
+
+  bool get isLoading => _loadingKey != null;
+
+  void cancel() {
+    _gen++;
+    _loadingKey = null;
+  }
+
+  /// Starts work for [key] unless already ready or in flight for that key.
+  void ensure({
+    required Object key,
+    required Future<T> Function(Future<void> Function() yieldUi) compute,
+    required void Function() onUpdate,
+    required bool Function() mounted,
+  }) {
+    if (readyFor(key) || _loadingKey == key) return;
+    _loadingKey = key;
+    final gen = ++_gen;
+
+    unawaited(() async {
+      await Future<void>.delayed(Duration.zero);
+      if (!mounted() || gen != _gen) return;
+
+      Future<void> yieldUi() async {
+        await Future<void>.delayed(Duration.zero);
+      }
+
+      final result = await compute(yieldUi);
+      if (!mounted() || gen != _gen) return;
+
+      value = result;
+      valueKey = key;
+      if (_loadingKey == key) _loadingKey = null;
+      onUpdate();
+    }());
+  }
+}

lib/widgets/app_text_field.dart

@@ -14,6 +14,10 @@ class AppTextField extends StatelessWidget {
     this.keyboardType,
     this.validator,
     this.autofocus = false,
+    this.autofillHints,
+    this.obscureText = false,
+    this.enableSuggestions,
+    this.autocorrect,
   });
 
   final TextEditingController controller;
@@ -24,6 +28,10 @@ class AppTextField extends StatelessWidget {
   final TextInputType? keyboardType;
   final String? Function(String?)? validator;
   final bool autofocus;
+  final Iterable<String>? autofillHints;
+  final bool obscureText;
+  final bool? enableSuggestions;
+  final bool? autocorrect;
 
   @override
   Widget build(BuildContext context) {
@@ -31,8 +39,12 @@ class AppTextField extends StatelessWidget {
       controller: controller,
       maxLines: maxLines,
       autofocus: autofocus,
+      obscureText: obscureText,
       textInputAction: textInputAction,
       keyboardType: keyboardType,
+      autofillHints: autofillHints,
+      enableSuggestions: enableSuggestions ?? !obscureText,
+      autocorrect: autocorrect ?? !obscureText,
       validator: validator,
       decoration: InputDecoration(
         labelText: label,

lib/widgets/home_filter_widget_card.dart

@@ -23,6 +23,8 @@ class HomeFilterWidgetCard extends StatelessWidget {
     this.onToggleDisplay,
     this.onEdit,
     this.dragHandle,
+    this.precomputedStats,
+    this.precomputedBudget,
   });
 
   final HomeFilterWidget widgetConfig;
@@ -31,6 +33,10 @@ class HomeFilterWidgetCard extends StatelessWidget {
   final VoidCallback? onEdit;
   final Widget? dragHandle;
 
+  /// When set, skips scanning all transactions in build.
+  final TxFilterMetrics? precomputedStats;
+  final HomeBudgetMetrics? precomputedBudget;
+
   void _openTransactions(BuildContext context) {
     final filter = widgetConfig.filter;
     Navigator.of(context).push(
@@ -95,12 +101,14 @@ class HomeFilterWidgetCard extends StatelessWidget {
                           currency: currency,
                           transactions: bank.transactions,
                           meta: meta,
+                          precomputed: precomputedBudget,
                         )
                       : _StatsBody(
                           widgetConfig: widgetConfig,
                           currency: currency,
                           transactions: bank.transactions,
                           meta: meta,
+                          precomputed: precomputedStats,
                         ),
                 ),
                 if (editing && onToggleDisplay != null)
@@ -267,22 +275,25 @@ class _StatsBody extends StatelessWidget {
     required this.currency,
     required this.transactions,
     required this.meta,
+    this.precomputed,
   });
 
   final HomeFilterWidget widgetConfig;
   final String currency;
   final List<BankTransaction> transactions;
   final TxMetaController meta;
+  final TxFilterMetrics? precomputed;
 
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
     final colors = theme.colorScheme;
-    final metrics = computeTxFilterMetrics(
-      all: transactions,
-      meta: meta,
-      filter: widgetConfig.filter,
-    );
+    final metrics = precomputed ??
+        computeTxFilterMetrics(
+          all: transactions,
+          meta: meta,
+          filter: widgetConfig.filter,
+        );
 
     // Prefer a single hero "Spent" figure when that's the main metric.
     final spentOnly = widgetConfig.showAmountOut &&
@@ -383,22 +394,25 @@ class _BudgetBody extends StatelessWidget {
     required this.currency,
     required this.transactions,
     required this.meta,
+    this.precomputed,
   });
 
   final HomeFilterWidget widgetConfig;
   final String currency;
   final List<BankTransaction> transactions;
   final TxMetaController meta;
+  final HomeBudgetMetrics? precomputed;
 
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
     final colors = theme.colorScheme;
-    final budget = computeHomeBudgetMetrics(
-      all: transactions,
-      meta: meta,
-      widget: widgetConfig,
-    );
+    final budget = precomputed ??
+        computeHomeBudgetMetrics(
+          all: transactions,
+          meta: meta,
+          widget: widgetConfig,
+        );
     final progress = budget.progress.clamp(0.0, 1.0);
     final fillColor = budget.overBudget
         ? AppTheme.expense