Improve entries page and latest changes panel, units on events and timeline

lib/components/calculator/calculator.dart

@@ -133,6 +133,11 @@ class RouteCalculator extends StatefulWidget {
 
 class _RouteCalculatorState extends State<RouteCalculator> {
   List<Station> allStations = [];
+  List<String> _networks = [];
+  List<String> _countries = [];
+  List<String> _selectedNetworks = [];
+  List<String> _selectedCountries = [];
+  bool _loadingStations = false;
 
   RouteResult? _routeResult;
   RouteResult? get result => _routeResult;
@@ -150,14 +155,31 @@ class _RouteCalculatorState extends State<RouteCalculator> {
       }
       WidgetsBinding.instance.addPostFrameCallback((_) async {
         final data = context.read<DataService>();
-        final result = await data.fetchStations();
+        await data.fetchStationFilters();
-        if (mounted) {
+        if (!mounted) return;
-          setState(() => allStations = result);
+        setState(() {
-        }
+          _networks = data.stationNetworks;
+          _countries = data.stationCountryNetworks.keys.toList();
+        });
+        await _loadStations();
       });
     }
   }
 
+  Future<void> _loadStations() async {
+    setState(() => _loadingStations = true);
+    final data = context.read<DataService>();
+    final stations = await data.fetchStations(
+      countries: _selectedCountries,
+      networks: _selectedNetworks,
+    );
+    if (!mounted) return;
+    setState(() {
+      allStations = stations;
+      _loadingStations = false;
+    });
+  }
+
   Future<void> _calculateRoute(List<String> stations) async {
     setState(() {
       _errorMessage = null;
@@ -215,6 +237,43 @@ class _RouteCalculatorState extends State<RouteCalculator> {
     final data = context.watch<DataService>();
     return Column(
       children: [
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8),
+          child: Wrap(
+            spacing: 12,
+            runSpacing: 12,
+            crossAxisAlignment: WrapCrossAlignment.center,
+            children: [
+              _MultiSelectFilter(
+                label: 'Countries',
+                options: _countries,
+                selected: _selectedCountries,
+                onChanged: (vals) {
+                  setState(() => _selectedCountries = vals);
+                  _loadStations();
+                },
+              ),
+              _MultiSelectFilter(
+                label: 'Networks',
+                options: _networks,
+                selected: _selectedNetworks,
+                onChanged: (vals) {
+                  setState(() => _selectedNetworks = vals);
+                  _loadStations();
+                },
+              ),
+              if (_loadingStations)
+                const Padding(
+                  padding: EdgeInsets.only(left: 8.0),
+                  child: SizedBox(
+                    height: 20,
+                    width: 20,
+                    child: CircularProgressIndicator(strokeWidth: 2),
+                  ),
+                ),
+            ],
+          ),
+        ),
         Expanded(
           child: ReorderableListView(
             buildDefaultDragHandles: false,
@@ -300,21 +359,18 @@ class _RouteCalculatorState extends State<RouteCalculator> {
         else
           SizedBox.shrink(),
         const SizedBox(height: 10),
-        LayoutBuilder(
+        Padding(
-          builder: (context, constraints) {
+          padding: const EdgeInsets.symmetric(horizontal: 16.0),
-            double screenWidth = constraints.maxWidth;
+          child: Wrap(
-
+            alignment: WrapAlignment.center,
-            return Padding(
+            spacing: 12,
-              padding: EdgeInsets.only(right: screenWidth < 450 ? 70 : 0),
+            runSpacing: 8,
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.center,
             children: [
               ElevatedButton.icon(
                 icon: const Icon(Icons.add),
                 label: const Text('Add Station'),
                 onPressed: _addStation,
               ),
-                  const SizedBox(width: 16),
               ElevatedButton.icon(
                 icon: const Icon(Icons.route),
                 label: const Text('Calculate Route'),
@@ -324,8 +380,6 @@ class _RouteCalculatorState extends State<RouteCalculator> {
               ),
             ],
           ),
-            );
-          },
         ),
 
         const SizedBox(height: 16),
@@ -350,3 +404,159 @@ Widget debugPanel(List<String> stations) {
     ),
   );
 }
+
+class _MultiSelectFilter extends StatefulWidget {
+  const _MultiSelectFilter({
+    required this.label,
+    required this.options,
+    required this.selected,
+    required this.onChanged,
+  });
+
+  final String label;
+  final List<String> options;
+  final List<String> selected;
+  final ValueChanged<List<String>> onChanged;
+
+  @override
+  State<_MultiSelectFilter> createState() => _MultiSelectFilterState();
+}
+
+class _MultiSelectFilterState extends State<_MultiSelectFilter> {
+  late List<String> _tempSelected;
+  String _query = '';
+
+  @override
+  void initState() {
+    super.initState();
+    _tempSelected = List.from(widget.selected);
+  }
+
+  @override
+  void didUpdateWidget(covariant _MultiSelectFilter oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.selected != widget.selected) {
+      _tempSelected = List.from(widget.selected);
+    }
+  }
+
+  void _openPicker() async {
+    _tempSelected = List.from(widget.selected);
+    _query = '';
+    await showModalBottomSheet<void>(
+      context: context,
+      isScrollControlled: true,
+      builder: (ctx) {
+        return StatefulBuilder(
+          builder: (ctx, setModalState) {
+            final filtered = widget.options
+                .where((opt) =>
+                    _query.isEmpty || opt.toLowerCase().contains(_query.toLowerCase()))
+                .toList();
+            return SafeArea(
+              child: Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      children: [
+                        Text(
+                          'Select ${widget.label.toLowerCase()}',
+                          style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                                fontWeight: FontWeight.w700,
+                              ),
+                        ),
+                        const Spacer(),
+                        TextButton(
+                          onPressed: () {
+                            setModalState(() {
+                              _tempSelected.clear();
+                            });
+                            Navigator.of(ctx).pop();
+                            widget.onChanged(const []);
+                          },
+                          child: const Text('Clear'),
+                        ),
+                      ],
+                    ),
+                    const SizedBox(height: 8),
+                    TextField(
+                      decoration: const InputDecoration(
+                        labelText: 'Search',
+                        border: OutlineInputBorder(),
+                      ),
+                      onChanged: (val) {
+                        setModalState(() {
+                          _query = val;
+                        });
+                      },
+                    ),
+                    const SizedBox(height: 12),
+                    SizedBox(
+                      height: 320,
+                      child: ListView.builder(
+                        itemCount: filtered.length,
+                        itemBuilder: (_, index) {
+                          final option = filtered[index];
+                          final selected = _tempSelected.contains(option);
+                          return CheckboxListTile(
+                            value: selected,
+                            title: Text(option),
+                            onChanged: (val) {
+                              setModalState(() {
+                                if (val == true) {
+                                  if (!_tempSelected.contains(option)) {
+                                    _tempSelected.add(option);
+                                  }
+                                } else {
+                                  _tempSelected.removeWhere((e) => e == option);
+                                }
+                              });
+                              widget.onChanged(List.from(_tempSelected.toSet()));
+                            },
+                          );
+                        },
+                      ),
+                    ),
+                    const SizedBox(height: 12),
+                    Align(
+                      alignment: Alignment.centerRight,
+                      child: FilledButton.icon(
+                        onPressed: () {
+                          widget.onChanged(List.from(_tempSelected.toSet()));
+                          Navigator.of(ctx).pop();
+                        },
+                        icon: const Icon(Icons.check),
+                        label: const Text('Apply'),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            );
+          },
+        );
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final hasSelection = widget.selected.isNotEmpty;
+    final display =
+        hasSelection ? widget.selected.join(', ') : 'Any ${widget.label.toLowerCase()}';
+    return OutlinedButton.icon(
+      onPressed: _openPicker,
+      icon: const Icon(Icons.filter_alt),
+      label: SizedBox(
+        width: 180,
+        child: Text(
+          '${widget.label}: $display',
+          overflow: TextOverflow.ellipsis,
+        ),
+      ),
+    );
+  }
+}

lib/components/calculator/route_summary_widget.dart

@@ -36,16 +36,20 @@ class RouteDetailsView extends StatelessWidget {
   final List<String> route;
   final List<double> costs;
   final VoidCallback onBack;
+  final Set<String> routingPoints;
 
   const RouteDetailsView({
     super.key,
     required this.route,
     required this.costs,
     required this.onBack,
+    this.routingPoints = const {},
   });
 
   @override
   Widget build(BuildContext context) {
+    final highlightColor = Theme.of(context).colorScheme.primary;
+    final mutedColor = Theme.of(context).colorScheme.outlineVariant;
     return Column(
       children: [
         Align(
@@ -60,8 +64,20 @@ class RouteDetailsView extends StatelessWidget {
           child: ListView.builder(
             itemCount: route.length,
             itemBuilder: (context, index) {
+              final label = route[index];
+              final isRoutingPoint = routingPoints.contains(label);
               return ListTile(
-                title: Text(route[index]),
+                leading: Icon(
+                  Icons.circle,
+                  size: 12,
+                  color: isRoutingPoint ? highlightColor : mutedColor,
+                ),
+                title: Text(
+                  label,
+                  style: isRoutingPoint
+                      ? TextStyle(color: highlightColor, fontWeight: FontWeight.w600)
+                      : null,
+                ),
                 trailing: Text("${costs[index].toStringAsFixed(2)} mi"),
               );
             },

lib/components/dashboard/latest_loco_changes_panel.dart

@@ -1,9 +1,13 @@
 import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+import 'package:mileograph_flutter/objects/objects.dart';
 import 'package:mileograph_flutter/services/data_service.dart';
 import 'package:provider/provider.dart';
 
 class LatestLocoChangesPanel extends StatefulWidget {
-  const LatestLocoChangesPanel({super.key});
+  const LatestLocoChangesPanel({super.key, this.expanded = false});
+
+  final bool expanded;
 
   @override
   State<LatestLocoChangesPanel> createState() => _LatestLocoChangesPanelState();
@@ -11,6 +15,9 @@ class LatestLocoChangesPanel extends StatefulWidget {
 
 class _LatestLocoChangesPanelState extends State<LatestLocoChangesPanel> {
   late final ScrollController _controller;
+  final Set<String> _collapsedDates = {};
+  final Set<String> _collapsedClasses = {};
+  final Set<String> _collapsedLocos = {};
 
   @override
   void initState() {
@@ -29,6 +36,7 @@ class _LatestLocoChangesPanelState extends State<LatestLocoChangesPanel> {
     final data = context.watch<DataService>();
     final changes = data.latestLocoChanges;
     final isLoading = data.isLatestLocoChangesLoading;
+    final hasMore = data.latestLocoChangesHasMore;
     final textTheme = Theme.of(context).textTheme;
 
     return Card(
@@ -73,52 +81,419 @@ class _LatestLocoChangesPanelState extends State<LatestLocoChangesPanel> {
                 ),
               )
             else
-              SizedBox(
+              Column(
-                height: 260,
+                crossAxisAlignment: CrossAxisAlignment.stretch,
-                child: Scrollbar(
-                  controller: _controller,
-                  child: ListView.separated(
-                    controller: _controller,
-                    itemCount: changes.length,
-                    separatorBuilder: (context, index) =>
-                        const Divider(height: 1),
-                    itemBuilder: (context, index) {
-                      final change = changes[index];
-                      return ListTile(
-                        dense: true,
-                        contentPadding: EdgeInsets.zero,
-                        title: Text(
-                          change.locoLabel,
-                          style: textTheme.titleSmall?.copyWith(
-                            fontWeight: FontWeight.w600,
-                          ),
-                        ),
-                        subtitle: Column(
-                          crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                            Text('${change.changeLabel}: ${change.valueLabel}'),
+                  _buildChangesList(changes, textTheme),
-                            Text(
+                  const SizedBox(height: 8),
-                              change.approvedDateLabel,
+                  Align(
-                              style: textTheme.labelSmall?.copyWith(
+                    alignment: Alignment.centerLeft,
-                                color: textTheme.bodySmall?.color?.withValues(alpha: 0.7),
+                    child: OutlinedButton.icon(
+                      onPressed: isLoading ? null : _loadMore,
+                      icon: isLoading
+                          ? const SizedBox(
+                              height: 14,
+                              width: 14,
+                              child: CircularProgressIndicator(strokeWidth: 2),
+                            )
+                          : const Icon(Icons.expand_more),
+                      label: Text(isLoading ? 'Loading...' : 'Show more'),
                     ),
                   ),
                 ],
               ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildChangesList(List<LocoChange> changes, TextTheme textTheme) {
+    final grouped = _groupChanges(changes);
+    // Start with all locos collapsed by default.
+    if (_collapsedLocos.isEmpty) {
+      for (final group in grouped) {
+        for (final classGroup in group.classGroups) {
+          for (final locoGroup in classGroup.locoGroups) {
+            _collapsedLocos.add(
+              _locoKey(group.dateLabel, classGroup.classLabel, locoGroup.locoLabel),
+            );
+          }
+        }
+      }
+    }
+
+    final listView = ListView.separated(
+      controller: null,
+      shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      itemBuilder: (context, groupIndex) {
+        final group = grouped[groupIndex];
+        final dateCollapsed = _collapsedDates.contains(group.dateLabel);
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Padding(
+              padding: const EdgeInsets.symmetric(vertical: 6.0),
+              child: Row(
+                children: [
+                  IconButton(
+                    iconSize: 18,
+                    padding: EdgeInsets.zero,
+                    constraints: const BoxConstraints(),
+                    onPressed: () => _toggleDate(group.dateLabel),
+                    icon: Icon(
+                      dateCollapsed ? Icons.chevron_right : Icons.expand_more,
+                    ),
+                  ),
+                  const SizedBox(width: 6),
+                  Expanded(
+                    child: Text(
+                      group.dateLabel,
+                      style: textTheme.labelLarge?.copyWith(
+                        fontWeight: FontWeight.w700,
+                      ),
+                    ),
+                  ),
+                  TextButton(
+                    onPressed: () => _collapseDateChildren(
+                      group.dateLabel,
+                      group.classGroups,
+                      collapse: !_isDateFullyCollapsed(group),
+                    ),
+                    child: Text(
+                      _isDateFullyCollapsed(group) ? 'Expand all' : 'Collapse all',
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            if (!dateCollapsed)
+              ...group.classGroups.map(
+                (classGroup) {
+                  final classKey = _classKey(group.dateLabel, classGroup.classLabel);
+                  final classCollapsed = _collapsedClasses.contains(classKey);
+                  return Padding(
+                    padding: const EdgeInsets.only(bottom: 8.0, left: 12.0),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Row(
+                          children: [
+                            IconButton(
+                              iconSize: 18,
+                              padding: EdgeInsets.zero,
+                              constraints: const BoxConstraints(),
+                              onPressed: () => _toggleClass(classKey),
+                              icon: Icon(
+                                classCollapsed
+                                    ? Icons.chevron_right
+                                    : Icons.expand_more,
+                              ),
+                            ),
+                            const SizedBox(width: 4),
+                            Expanded(
+                              child: Text(
+                                classGroup.classLabel,
+                                style: textTheme.titleSmall?.copyWith(
+                                  fontWeight: FontWeight.w700,
+                                ),
+                              ),
+                            ),
+                            TextButton(
+                              onPressed: () => _collapseClassChildren(
+                                group.dateLabel,
+                                classGroup.classLabel,
+                                classGroup.locoGroups,
+                                collapse:
+                                    !_isClassFullyCollapsed(classKey, classGroup, group.dateLabel),
+                              ),
+                              child: Text(
+                                _isClassFullyCollapsed(classKey, classGroup, group.dateLabel)
+                                    ? 'Expand all'
+                                    : 'Collapse all',
+                              ),
+                            ),
+                          ],
+                        ),
+                        if (!classCollapsed)
+                          ...classGroup.locoGroups.map(
+                            (locoGroup) {
+                              final locoKey =
+                                  _locoKey(group.dateLabel, classGroup.classLabel, locoGroup.locoLabel);
+                              final locoCollapsed = _collapsedLocos.contains(locoKey);
+                              return Padding(
+                                padding:
+                                    const EdgeInsets.only(bottom: 4.0, left: 22.0),
+                                child: Column(
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: [
+                                    Row(
+                                      children: [
+                                        IconButton(
+                                          iconSize: 18,
+                                          padding: EdgeInsets.zero,
+                                          constraints: const BoxConstraints(),
+                                          onPressed: () => _toggleLoco(locoKey),
+                                          icon: Icon(
+                                            locoCollapsed
+                                                ? Icons.chevron_right
+                                                : Icons.expand_more,
+                                          ),
+                                        ),
+                                        const SizedBox(width: 4),
+                                        Text(
+                                          locoGroup.locoLabel,
+                                          style: textTheme.bodyMedium?.copyWith(
+                                            fontWeight: FontWeight.w700,
+                                          ),
+                                        ),
+                                      ],
+                                    ),
+                                    if (!locoCollapsed) ...[
+                                      const SizedBox(height: 2),
+                                      ...locoGroup.changes.map(
+                                        (change) => ListTile(
+                                          dense: true,
+                                          visualDensity: const VisualDensity(
+                                            horizontal: 0,
+                                            vertical: -3,
+                                          ),
+                                          minVerticalPadding: 0,
+                                          contentPadding: EdgeInsets.zero,
+                                          title: Text(
+                                            '${change.changeLabel}: ${change.valueLabel}',
+                                            style: textTheme.bodyMedium,
+                                          ),
                                           trailing: change.approvedBy.isEmpty
                                               ? null
                                               : Text(
                                                   change.approvedBy,
                                                   style: textTheme.labelSmall,
                                                 ),
-                      );
-                    },
-                  ),
                                         ),
                                       ),
                                     ],
+                                  ],
+                                ),
+                              );
+                            },
+                          ),
+                      ],
+                    ),
+                  );
+                },
+              ),
+          ],
+        );
+      },
+      separatorBuilder: (_, __) => const Divider(height: 8),
+      itemCount: grouped.length,
+    );
+
+    if (widget.expanded) {
+      return listView;
+    }
+
+    return listView;
+  }
+
+  void _toggleDate(String date) {
+    setState(() {
+      if (_collapsedDates.contains(date)) {
+        _collapsedDates.remove(date);
+      } else {
+        _collapsedDates.add(date);
+      }
+    });
+  }
+
+  void _toggleClass(String key) {
+    setState(() {
+      if (_collapsedClasses.contains(key)) {
+        _collapsedClasses.remove(key);
+      } else {
+        _collapsedClasses.add(key);
+      }
+    });
+  }
+
+  void _toggleLoco(String key) {
+    setState(() {
+      if (_collapsedLocos.contains(key)) {
+        _collapsedLocos.remove(key);
+      } else {
+        _collapsedLocos.add(key);
+      }
+    });
+  }
+
+  void _collapseDateChildren(
+    String date,
+    List<_ClassGroup> classGroups, {
+    required bool collapse,
+  }) {
+    setState(() {
+      for (final classGroup in classGroups) {
+        final classKey = _classKey(date, classGroup.classLabel);
+        if (collapse) {
+          _collapsedClasses.add(classKey);
+        } else {
+          _collapsedClasses.remove(classKey);
+        }
+        for (final locoGroup in classGroup.locoGroups) {
+          final locoKey = _locoKey(date, classGroup.classLabel, locoGroup.locoLabel);
+          if (collapse) {
+            _collapsedLocos.add(locoKey);
+          } else {
+            _collapsedLocos.remove(locoKey);
+          }
+        }
+      }
+    });
+  }
+
+  void _collapseClassChildren(
+    String date,
+    String classLabel,
+    List<_LocoGroup> locos, {
+    required bool collapse,
+  }) {
+    setState(() {
+      final classKey = _classKey(date, classLabel);
+      if (collapse) {
+        _collapsedClasses.add(classKey);
+      } else {
+        _collapsedClasses.remove(classKey);
+      }
+      for (final locoGroup in locos) {
+        final locoKey = _locoKey(date, classLabel, locoGroup.locoLabel);
+        if (collapse) {
+          _collapsedLocos.add(locoKey);
+        } else {
+          _collapsedLocos.remove(locoKey);
+        }
+      }
+    });
+  }
+
+  bool _isDateFullyCollapsed(_ChangeGroup group) {
+    for (final classGroup in group.classGroups) {
+      final classKey = _classKey(group.dateLabel, classGroup.classLabel);
+      if (!_collapsedClasses.contains(classKey)) return false;
+      for (final loco in classGroup.locoGroups) {
+        final locoKey = _locoKey(group.dateLabel, classGroup.classLabel, loco.locoLabel);
+        if (!_collapsedLocos.contains(locoKey)) return false;
+      }
+    }
+    return true;
+  }
+
+  bool _isClassFullyCollapsed(String classKey, _ClassGroup classGroup, String date) {
+    if (!_collapsedClasses.contains(classKey)) return false;
+    for (final loco in classGroup.locoGroups) {
+      final locoKey = _locoKey(date, classGroup.classLabel, loco.locoLabel);
+      if (!_collapsedLocos.contains(locoKey)) return false;
+    }
+    return true;
+  }
+
+  String _classKey(String date, String classLabel) => '$date|$classLabel';
+  String _locoKey(String date, String classLabel, String locoLabel) =>
+      '$date|$classLabel|$locoLabel';
+
+  List<_ChangeGroup> _groupChanges(List<LocoChange> changes) {
+    final dateFormat = DateFormat('yyyy-MM-dd');
+    final Map<String, Map<String, Map<String, List<LocoChange>>>> grouped = {};
+
+    final filtered = changes.where((change) {
+      final code = change.attrCode.toLowerCase();
+      return code != 'build_prec' && code != 'operational' && code != 'gettable';
+    });
+
+    for (final change in filtered) {
+      final date = change.approvedAt ?? change.validFrom;
+      final dateKey = date != null ? dateFormat.format(date) : 'Unknown date';
+      final classKey = change.locoClass.isNotEmpty
+          ? change.locoClass
+          : 'Unknown class';
+      final locoKey = _locoLabel(change);
+      grouped.putIfAbsent(dateKey, () => {});
+      grouped[dateKey]!.putIfAbsent(classKey, () => {});
+      grouped[dateKey]![classKey]!.putIfAbsent(locoKey, () => []);
+      grouped[dateKey]![classKey]![locoKey]!.add(change);
+    }
+
+    final sortedDates = grouped.keys.toList()
+      ..sort((a, b) {
+        if (a == 'Unknown date') return 1;
+        if (b == 'Unknown date') return -1;
+        return b.compareTo(a); // newest first
+      });
+
+    return sortedDates
+        .map(
+          (dateKey) => _ChangeGroup(
+            dateLabel: dateKey,
+            classGroups: grouped[dateKey]!.entries
+                .map(
+                  (classEntry) => _ClassGroup(
+                    classLabel: classEntry.key,
+                    locoGroups: classEntry.value.entries
+                        .map(
+                          (locoEntry) => _LocoGroup(
+                            locoLabel: locoEntry.key,
+                            changes: locoEntry.value
+                              ..sort(
+                                (a, b) => (b.approvedAt ?? b.validFrom ?? DateTime(0))
+                                    .compareTo(a.approvedAt ?? a.validFrom ?? DateTime(0)),
                               ),
                           ),
+                        )
+                        .toList(),
+                  ),
+                )
+                .toList(),
+          ),
+        )
+        .toList();
+  }
+
+  Future<void> _loadMore() async {
+    final data = context.read<DataService>();
+    await data.fetchLatestLocoChanges(
+      offset: data.latestLocoChanges.length,
+      append: true,
     );
   }
 }
+
+class _ChangeGroup {
+  final String dateLabel;
+  final List<_ClassGroup> classGroups;
+
+  _ChangeGroup({required this.dateLabel, required this.classGroups});
+}
+
+class _LocoGroup {
+  final String locoLabel;
+  final List<LocoChange> changes;
+
+  _LocoGroup({required this.locoLabel, required this.changes});
+}
+
+class _ClassGroup {
+  final String classLabel;
+  final List<_LocoGroup> locoGroups;
+
+  _ClassGroup({required this.classLabel, required this.locoGroups});
+}
+
+String _locoLabel(LocoChange change) {
+  final number = change.locoNumber.trim();
+  final name = change.locoName.trim();
+  if (number.isNotEmpty && name.isNotEmpty) return '$number — $name';
+  if (number.isNotEmpty) return number;
+  if (name.isNotEmpty) return name;
+  return 'Loco ${change.locoId}';
+}

lib/components/legs/leg_card.dart

@@ -3,8 +3,10 @@ import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:mileograph_flutter/objects/objects.dart';
+import 'package:mileograph_flutter/services/data_service.dart';
+import 'package:provider/provider.dart';
 
-class LegCard extends StatelessWidget {
+class LegCard extends StatefulWidget {
   const LegCard({
     super.key,
     required this.leg,
@@ -16,30 +18,106 @@ class LegCard extends StatelessWidget {
   final bool showEditButton;
   final bool showDate;
 
+  @override
+  State<LegCard> createState() => _LegCardState();
+}
+
+class _LegCardState extends State<LegCard> {
+  bool _expanded = false;
+
   @override
   Widget build(BuildContext context) {
+    final leg = widget.leg;
     final routeSegments = _parseRouteSegments(leg.route);
     final textTheme = Theme.of(context).textTheme;
     return Card(
       child: ExpansionTile(
+        onExpansionChanged: (v) => setState(() => _expanded = v),
         tilePadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
         leading: const Icon(Icons.train),
-        title: Text('${leg.start} → ${leg.end}'),
+        title: LayoutBuilder(
-        subtitle: Column(
+          builder: (context, constraints) {
-          crossAxisAlignment: CrossAxisAlignment.start,
+            final isWide = constraints.maxWidth > 520;
+            final routeText = Text('${leg.start} → ${leg.end}');
+            final timeText =
+                Text(_formatDateTime(leg.beginTime, includeDate: widget.showDate));
+            if (!isWide) {
+              return routeText;
+            }
+            return Row(
               children: [
-            if (showDate) Text(_formatDateTime(leg.beginTime)),
+                timeText,
-            if (leg.headcode.isNotEmpty)
+                const SizedBox(width: 6),
+                const Text('·'),
+                const SizedBox(width: 6),
+                Expanded(child: routeText),
+              ],
+            );
+          },
+        ),
+        subtitle: LayoutBuilder(
+          builder: (context, constraints) {
+            final isWide = constraints.maxWidth > 520;
+            final timeWidget =
+                Text(_formatDateTime(leg.beginTime, includeDate: widget.showDate));
+            final tractionWrap = !_expanded && leg.locos.isNotEmpty
+                ? Wrap(
+                    spacing: 8,
+                    runSpacing: 4,
+                    children: leg.locos.map((loco) {
+                      final iconColor = loco.powering
+                          ? Theme.of(context).colorScheme.primary
+                          : Theme.of(context).hintColor;
+                      final label = '${loco.locoClass} ${loco.number}'.trim();
+                      return Row(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          Icon(Icons.train, size: 14, color: iconColor),
+                          const SizedBox(width: 4),
+                          Text(
+                            label.isEmpty ? 'Loco ${loco.id}' : label,
+                            style: textTheme.labelSmall,
+                          ),
+                        ],
+                      );
+                    }).toList(),
+                  )
+                : null;
+
+            final children = <Widget>[];
+            if (isWide) {
+              if (tractionWrap != null) {
+                children.add(tractionWrap);
+              }
+            } else {
+              children.add(timeWidget);
+              if (tractionWrap != null) {
+                children.add(const SizedBox(height: 4));
+                children.add(tractionWrap);
+              }
+            }
+            if (leg.headcode.isNotEmpty) {
+              children.add(
                 Text(
                   'Headcode: ${leg.headcode}',
                   style: textTheme.labelSmall,
                 ),
-            if (leg.network.isNotEmpty)
+              );
+            }
+            if (leg.network.isNotEmpty) {
+              children.add(
                 Text(
                   leg.network,
                   style: textTheme.labelSmall,
                 ),
-          ],
+              );
+            }
+
+            return Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: children,
+            );
+          },
         ),
         trailing: Row(
           mainAxisSize: MainAxisSize.min,
@@ -66,7 +144,7 @@ class LegCard extends StatelessWidget {
                 ],
               ],
             ),
-            if (showEditButton) ...[
+            if (widget.showEditButton) ...[
               const SizedBox(width: 8),
               IconButton(
                 tooltip: 'Edit entry',
@@ -76,6 +154,18 @@ class LegCard extends StatelessWidget {
                 constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
                 onPressed: () => context.push('/legs/edit/${leg.id}'),
               ),
+              if (_expanded) ...[
+                const SizedBox(width: 4),
+                IconButton(
+                  tooltip: 'Delete entry',
+                  icon: const Icon(Icons.delete_outline),
+                  color: Theme.of(context).colorScheme.error,
+                  visualDensity: VisualDensity.compact,
+                  padding: EdgeInsets.zero,
+                  constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
+                  onPressed: () => _confirmDelete(context, leg.id),
+                ),
+              ],
             ],
           ],
         ),
@@ -114,15 +204,52 @@ class LegCard extends StatelessWidget {
     );
   }
 
+  Future<void> _confirmDelete(BuildContext context, int legId) async {
+    final confirmed = await showDialog<bool>(
+      context: context,
+      builder: (ctx) => AlertDialog(
+        title: const Text('Delete entry?'),
+        content: const Text('Are you sure you want to delete this entry?'),
+        actions: [
+          TextButton(
+            onPressed: () => Navigator.of(ctx).pop(false),
+            child: const Text('Cancel'),
+          ),
+          FilledButton(
+            onPressed: () => Navigator.of(ctx).pop(true),
+            child: const Text('Delete'),
+          ),
+        ],
+      ),
+    );
+    if (confirmed != true) return;
+
+    final data = context.read<DataService>();
+    final messenger = ScaffoldMessenger.of(context);
+    try {
+      await data.api.delete('/legs/delete?leg_id=$legId');
+      await data.refreshLegs();
+      messenger.showSnackBar(const SnackBar(content: Text('Entry deleted')));
+    } catch (e) {
+      messenger.showSnackBar(
+        SnackBar(content: Text('Failed to delete entry: $e')),
+      );
+    }
+  }
+
   String _formatDate(DateTime? date) {
     if (date == null) return '';
     return '${date.year.toString().padLeft(4, '0')}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}';
   }
 
-  String _formatDateTime(DateTime date) {
+  String _formatTime(DateTime date) {
+    return '${date.hour.toString().padLeft(2, '0')}:${date.minute.toString().padLeft(2, '0')}';
+  }
+
+  String _formatDateTime(DateTime date, {bool includeDate = true}) {
+    final timeStr = _formatTime(date);
+    if (!includeDate) return timeStr;
     final dateStr = _formatDate(date);
-    final timeStr =
-        '${date.hour.toString().padLeft(2, '0')}:${date.minute.toString().padLeft(2, '0')}';
     return '$dateStr · $timeStr';
   }
 

lib/components/pages/calculator_details.dart

@@ -39,9 +39,9 @@ class CalculatorDetailsPage extends StatelessWidget {
       child: RouteDetailsView(
         route: parsed.calculatedRoute,
         costs: parsed.costs,
+        routingPoints: parsed.inputRoute.toSet(),
         onBack: () => context.pop(),
       ),
     );
   }
 }
-

lib/components/pages/dashboard.dart

@@ -83,7 +83,6 @@ class _DashboardState extends State<Dashboard> {
     HomepageStats? stats,
   ) {
     final colorScheme = Theme.of(context).colorScheme;
-    final isCompact = MediaQuery.of(context).size.width < 720;
     final greetingName =
         stats?.user?.fullName ?? auth.fullName ?? auth.username ?? 'there';
     final totalMileage = stats?.totalMileage ?? 0;
@@ -109,26 +108,9 @@ class _DashboardState extends State<Dashboard> {
         ),
         padding: const EdgeInsets.all(18),
         child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            isCompact
-                ? Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             _heroHeading(context, greetingName, colorScheme),
-                      const SizedBox(height: 12),
-                      _heroActions(context, colorScheme, wrap: true),
-                    ],
-                  )
-                : Row(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Expanded(
-                        child: _heroHeading(context, greetingName, colorScheme),
-                      ),
-                      _heroActions(context, colorScheme, wrap: false),
-                    ],
-                  ),
             const SizedBox(height: 18),
             Wrap(
               spacing: 12,
@@ -250,6 +232,8 @@ class _DashboardState extends State<Dashboard> {
                 _buildOnThisDayCard(context, data),
                 const SizedBox(height: 16),
                 _buildTripsCard(context, data),
+                const SizedBox(height: 16),
+                const LatestLocoChangesPanel(expanded: true),
               ],
             ),
           ),
@@ -262,8 +246,6 @@ class _DashboardState extends State<Dashboard> {
                 TopTractionPanel(),
                 SizedBox(height: 16),
                 LeaderboardPanel(),
-                SizedBox(height: 16),
-                LatestLocoChangesPanel(),
               ],
             ),
           ),
@@ -314,49 +296,6 @@ class _DashboardState extends State<Dashboard> {
     );
   }
 
-  Widget _heroActions(
-    BuildContext context,
-    ColorScheme colorScheme, {
-    required bool wrap,
-  }) {
-    final buttons = [
-      FilledButton.icon(
-        style: FilledButton.styleFrom(
-          backgroundColor: Colors.white,
-          foregroundColor: colorScheme.primary,
-        ),
-        onPressed: () => context.go('/add'),
-        icon: const Icon(Icons.add_circle_outline),
-        label: const Text('Add entry'),
-      ),
-      FilledButton.tonalIcon(
-        onPressed: () => context.go('/traction'),
-        icon: const Icon(Icons.train),
-        label: const Text('Traction'),
-      ),
-      FilledButton.tonalIcon(
-        onPressed: () => context.go('/trips'),
-        icon: const Icon(Icons.book),
-        label: const Text('Trips'),
-      ),
-    ];
-
-    if (wrap) {
-      return Wrap(spacing: 8, runSpacing: 8, children: buttons);
-    }
-
-    return Row(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        for (final btn in buttons)
-          Padding(
-            padding: const EdgeInsets.only(left: 8.0),
-            child: btn,
-          ),
-      ],
-    );
-  }
-
   Widget _buildOnThisDayCard(BuildContext context, DataService data) {
     final filtered = data.onThisDay
         .where((leg) => leg.beginTime.year != DateTime.now().year)

lib/components/pages/loco_timeline.dart

@@ -36,6 +36,21 @@ class _LocoTimelinePageState extends State<LocoTimelinePage> {
     WidgetsBinding.instance.addPostFrameCallback((_) => _load());
   }
 
+  dynamic _normalizeFieldValue(_FieldEntry field) {
+    final name = field.field.name.toLowerCase();
+    final val = field.value;
+    if (name == 'max_speed') {
+      final numVal = val is num ? val.toDouble() : double.tryParse('$val');
+      if (numVal == null) return val;
+      final unit = (field.unit ?? 'kph').toLowerCase();
+      if (unit == 'mph') {
+        return numVal * 1.60934;
+      }
+      return numVal;
+    }
+    return val;
+  }
+
   @override
   void dispose() {
     _disposeDrafts(_draftEvents);
@@ -57,7 +72,7 @@ class _LocoTimelinePageState extends State<LocoTimelinePage> {
   String? _eventDateForEntry(LocoAttrVersion entry) {
     final masked = entry.maskedValidFrom?.trim();
     if (masked != null && masked.isNotEmpty) return masked;
-    final from = entry.validFrom ?? entry.txnFrom;
+    final from = entry.validFrom;
     if (from == null) return null;
     return DateFormat('yyyy-MM-dd').format(from);
   }
@@ -115,7 +130,8 @@ class _LocoTimelinePageState extends State<LocoTimelinePage> {
     draft.details = '';
     draft.fields.add(
       _FieldEntry(field: field)
-        ..value = _valueForEntry(entry),
+        ..value = _valueForEntry(entry)
+        ..unit = _guessUnit(field, entry.valueLabel),
     );
 
     setState(() {
@@ -123,6 +139,16 @@ class _LocoTimelinePageState extends State<LocoTimelinePage> {
     });
   }
 
+  String? _guessUnit(EventField field, String valueLabel) {
+    final name = field.name.toLowerCase();
+    if (name == 'max_speed') {
+      final val = valueLabel.toLowerCase();
+      if (val.contains('mph')) return 'mph';
+      return 'kph';
+    }
+    return _defaultUnitForField(field);
+  }
+
   Future<void> _deleteEntry(LocoAttrVersion entry) async {
     if (_isDeleting) return;
     final blockId = entry.versionId;
@@ -241,7 +267,7 @@ class _LocoTimelinePageState extends State<LocoTimelinePage> {
             invalid.add('Field ${field.field.display} is empty');
             break;
           }
-          values[field.field.name] = val;
+          values[field.field.name] = _normalizeFieldValue(field);
         }
         if (invalid.isNotEmpty) continue;
         if (values.isEmpty) {

lib/components/pages/loco_timeline/event_editor.dart

@@ -184,7 +184,9 @@ class _FieldList extends StatelessWidget {
               value: null,
               onChanged: (field) {
                 if (field == null) return;
-                draft.fields.add(_FieldEntry(field: field));
+                draft.fields.add(
+                  _FieldEntry(field: field)..unit = _defaultUnitForField(field),
+                );
                 onChange();
               },
               items: availableFields
@@ -224,10 +226,10 @@ class _FieldList extends StatelessWidget {
                           ),
                           const SizedBox(height: 4),
                           _FieldInput(
-                            field: field.field,
+                            entry: field,
-                            value: field.value,
+                            onChanged: (val, {String? unit}) {
-                            onChanged: (val) {
                               field.value = val;
+                              if (unit != null) field.unit = unit;
                               onChange();
                             },
                           ),
@@ -253,17 +255,18 @@ class _FieldList extends StatelessWidget {
 
 class _FieldInput extends StatelessWidget {
   const _FieldInput({
-    required this.field,
+    required this.entry,
-    required this.value,
     required this.onChanged,
   });
 
-  final EventField field;
+  final _FieldEntry entry;
-  final dynamic value;
+  final void Function(dynamic value, {String? unit}) onChanged;
-  final ValueChanged<dynamic> onChanged;
 
   @override
   Widget build(BuildContext context) {
+    final field = entry.field;
+    final value = entry.value;
+
     if (field.enumValues != null && field.enumValues!.isNotEmpty) {
       final options = field.enumValues!;
       return DropdownButtonFormField<String>(
@@ -293,6 +296,119 @@ class _FieldInput extends StatelessWidget {
       );
     }
 
+    final name = field.name.toLowerCase();
+    if (name == 'max_speed') {
+      final unit = entry.unit ?? 'kph';
+      final isNumber = true;
+      return Row(
+        children: [
+          Expanded(
+            child: TextFormField(
+              initialValue: value?.toString(),
+              onChanged: (val) {
+                final parsed = double.tryParse(val);
+                onChanged(isNumber ? parsed : val, unit: unit);
+              },
+              decoration: const InputDecoration(
+                border: OutlineInputBorder(),
+                hintText: 'Enter value',
+                suffixText: 'kph/mph',
+              ),
+              keyboardType: TextInputType.number,
+            ),
+          ),
+          const SizedBox(width: 8),
+          SizedBox(
+            width: 88,
+            child: DropdownButtonFormField<String>(
+              value: unit,
+              items: const [
+                DropdownMenuItem(value: 'kph', child: Text('kph')),
+                DropdownMenuItem(value: 'mph', child: Text('mph')),
+              ],
+              onChanged: (val) {
+                if (val == null) return;
+                onChanged(value, unit: val);
+              },
+              decoration: const InputDecoration(
+                border: OutlineInputBorder(),
+                labelText: 'Unit',
+              ),
+            ),
+          ),
+        ],
+      );
+    }
+
+    if ({
+      'height',
+      'length',
+      'width',
+      'track_gauge',
+    }.contains(name)) {
+      return TextFormField(
+        initialValue: value?.toString(),
+        onChanged: (val) {
+          final parsed = double.tryParse(val);
+          onChanged(parsed ?? val);
+        },
+        decoration: const InputDecoration(
+          border: OutlineInputBorder(),
+          hintText: 'Enter value',
+          suffixText: 'mm',
+        ),
+        keyboardType: TextInputType.number,
+      );
+    }
+
+    if (name == 'weight') {
+      return TextFormField(
+        initialValue: value?.toString(),
+        onChanged: (val) {
+          final parsed = double.tryParse(val);
+          onChanged(parsed ?? val);
+        },
+        decoration: const InputDecoration(
+          border: OutlineInputBorder(),
+          hintText: 'Enter value',
+          suffixText: 'tonnes',
+        ),
+        keyboardType: TextInputType.number,
+      );
+    }
+
+    if (name == 'power') {
+      return TextFormField(
+        initialValue: value?.toString(),
+        onChanged: (val) {
+          final parsed = double.tryParse(val);
+          onChanged(parsed ?? val);
+        },
+        decoration: const InputDecoration(
+          border: OutlineInputBorder(),
+          hintText: 'Enter value',
+          suffixText: 'kW',
+        ),
+        keyboardType: TextInputType.number,
+      );
+    }
+
+    if (name == 'tractive_effort') {
+      return TextFormField(
+        initialValue: value?.toString(),
+        onChanged: (val) {
+          final parsed = double.tryParse(val);
+          onChanged(parsed ?? val);
+        },
+        decoration: const InputDecoration(
+          border: OutlineInputBorder(),
+          hintText: 'Enter value',
+          suffixText: 'kN',
+        ),
+        keyboardType: TextInputType.number,
+      );
+    }
+
     final isNumber = type == 'int' || type == 'integer';
     return TextFormField(
       initialValue: value?.toString(),
@@ -326,6 +442,13 @@ class _EventDraft {
 class _FieldEntry {
   final EventField field;
   dynamic value;
+  String? unit;
 
   _FieldEntry({required this.field});
 }
+
+String? _defaultUnitForField(EventField field) {
+  final name = field.name.toLowerCase();
+  if (name == 'max_speed') return 'kph';
+  return null;
+}

lib/components/pages/loco_timeline/timeline_grid.dart

@@ -577,7 +577,7 @@ class _TimelineModel {
           _ValueSegment(
             start: start,
             end: end,
-            value: entry.valueLabel,
+            value: _formatValueWithUnits(entry),
             entry: entry,
           ),
         );
@@ -680,6 +680,53 @@ class _TimelineModel {
   }
 }
 
+String _formatValueWithUnits(LocoAttrVersion entry) {
+  final raw = entry.valueLabel;
+  final code = entry.attrCode.toLowerCase();
+  final lowerRaw = raw.toLowerCase();
+  // Avoid double-appending if units already present.
+  final hasUnits = lowerRaw.contains('mm') ||
+      lowerRaw.contains('tonne') ||
+      lowerRaw.contains('kph') ||
+      lowerRaw.contains('mph');
+
+  double? asNumber = double.tryParse(raw);
+  String formatNumber(double value) {
+    if (value % 1 == 0) return value.toStringAsFixed(0);
+    return value.toStringAsFixed(2);
+  }
+
+  switch (code) {
+    case 'height':
+    case 'length':
+    case 'width':
+    case 'track_gauge':
+      if (hasUnits) return raw;
+      return asNumber != null ? '${formatNumber(asNumber)} mm' : '$raw mm';
+    case 'weight':
+      if (hasUnits) return raw;
+      return asNumber != null ? '${formatNumber(asNumber)} tonnes' : '$raw tonnes';
+    case 'power':
+      if (hasUnits) return raw;
+      return asNumber != null ? '${formatNumber(asNumber)} kW' : '$raw kW';
+    case 'tractive_effort':
+      if (hasUnits) return raw;
+      return asNumber != null ? '${formatNumber(asNumber)} kN' : '$raw kN';
+    case 'max_speed':
+      if (hasUnits) return raw;
+      if (asNumber != null) {
+        // Stored as kph.
+        final formatted = asNumber % 1 == 0
+            ? asNumber.toStringAsFixed(0)
+            : asNumber.toStringAsFixed(1);
+        return '$formatted kph';
+      }
+      return '$raw kph';
+    default:
+      return raw;
+  }
+}
+
 class _AxisSegment {
   final DateTime start;
   final DateTime end;
@@ -742,7 +789,15 @@ class _RowCell {
         color: Colors.transparent,
       );
     }
-    final displayStart = _formatDate(seg.start) ?? '';
+    final entry = seg.entry;
+    String displayStart = '';
+    if (entry != null) {
+      if ((entry.maskedValidFrom ?? '').trim().isNotEmpty) {
+        displayStart = entry.maskedValidFrom!.trim();
+      } else if (entry.validFrom != null) {
+        displayStart = _formatDate(entry.validFrom) ?? '';
+      }
+    }
     return _RowCell(
       value: seg.value,
       rangeLabel: displayStart,

lib/components/pages/new_entry/new_entry_submit_logic.dart

@@ -128,7 +128,9 @@ extension _NewEntrySubmitLogic on _NewEntryPageState {
       );
       _lastSubmittedSnapshot = snapshot;
       _activeDraftId = null;
-    } catch (e) {
+    } catch (e, st) {
+      debugPrint('Leg submit/update failed: $e');
+      debugPrintStack(stackTrace: st);
       if (!mounted) return;
       messenger?.showSnackBar(
         SnackBar(content: Text('Failed to submit: $e')),

lib/components/pages/new_entry/new_entry_traction_logic.dart

@@ -73,6 +73,8 @@ extension _NewEntryTractionLogic on _NewEntryPageState {
     for (var i = 0; i < _tractionItems.length; i++) {
       final item = _tractionItems[i];
       if (item.isMarker || item.loco == null) continue;
+      final locoId = item.loco!.id;
+      if (locoId == 0) continue;
       int allocPos;
       if (i > markerIndex) {
         allocPos = -(i - markerIndex);
@@ -80,8 +82,7 @@ extension _NewEntryTractionLogic on _NewEntryPageState {
         allocPos = (markerIndex - 1) - i;
       }
       payload.add({
-        "loco_type": item.loco!.type,
+        "loco_id": locoId,
-        "loco_number": item.loco!.number,
         "alloc_pos": allocPos,
         "alloc_powering": item.powering ? 1 : 0,
       });

lib/components/pages/traction/traction.dart

@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'dart:convert';
 
 import 'package:flutter/material.dart';

lib/components/pages/traction/traction_page.dart

@@ -26,6 +26,13 @@ class _TractionPageState extends State<TractionPage> {
   bool _showAdvancedFilters = false;
   String? _selectedClass;
   late Set<String> _selectedKeys;
+  String? _lastEventFieldsSignature;
+  Timer? _classStatsDebounce;
+  bool _showClassStatsPanel = false;
+  bool _classStatsLoading = false;
+  String? _classStatsError;
+  String? _classStatsForClass;
+  Map<String, dynamic>? _classStats;
 
   final Map<String, TextEditingController> _dynamicControllers = {};
   final Map<String, String?> _enumSelections = {};
@@ -68,6 +75,7 @@ class _TractionPageState extends State<TractionPage> {
     for (final controller in _dynamicControllers.values) {
       controller.dispose();
     }
+    _classStatsDebounce?.cancel();
     super.dispose();
   }
 
@@ -137,6 +145,10 @@ class _TractionPageState extends State<TractionPage> {
     setState(() {
       _selectedClass = null;
       _mileageFirst = true;
+      _showClassStatsPanel = false;
+      _classStats = null;
+      _classStatsError = null;
+      _classStatsForClass = null;
     });
     _refreshTraction();
   }
@@ -148,6 +160,7 @@ class _TractionPageState extends State<TractionPage> {
         _selectedClass = null;
       });
     }
+    _refreshClassStatsIfOpen();
   }
 
   List<EventField> _activeEventFields(List<EventField> fields) {
@@ -164,6 +177,26 @@ class _TractionPageState extends State<TractionPage> {
         .toList();
   }
 
+  void _syncControllersForFields(List<EventField> fields) {
+    final signature = _eventFieldsSignature(fields);
+    if (signature == _lastEventFieldsSignature) return;
+    _lastEventFieldsSignature = signature;
+    _ensureControllersForFields(fields);
+  }
+
+  String _eventFieldsSignature(List<EventField> fields) {
+    final active = _activeEventFields(fields);
+    return active
+        .map(
+          (field) => [
+            field.name,
+            field.type ?? '',
+            if (field.enumValues != null) field.enumValues!.join('|'),
+          ].join('::'),
+        )
+        .join(';');
+  }
+
   void _ensureControllersForFields(List<EventField> fields) {
     for (final field in fields) {
       if (field.enumValues != null) {
@@ -183,15 +216,15 @@ class _TractionPageState extends State<TractionPage> {
     final traction = data.traction;
     final classOptions = data.locoClasses;
     final isMobile = MediaQuery.of(context).size.width < 700;
-    _ensureControllersForFields(data.eventFields);
+    _syncControllersForFields(data.eventFields);
     final extraFields = _activeEventFields(data.eventFields);
 
-    final listView = RefreshIndicator(
+    final slivers = <Widget>[
-      onRefresh: _refreshTraction,
+      SliverPadding(
-      child: ListView(
+        padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
-        padding: const EdgeInsets.all(16),
+        sliver: SliverList(
-        physics: const AlwaysScrollableScrollPhysics(),
+          delegate: SliverChildListDelegate(
-        children: [
+            [
               Row(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
@@ -219,6 +252,18 @@ class _TractionPageState extends State<TractionPage> {
                     onPressed: _refreshTraction,
                     icon: const Icon(Icons.refresh),
                   ),
+                  if (_hasClassQuery) ...[
+                    const SizedBox(width: 8),
+                    FilledButton.tonalIcon(
+                      onPressed: _toggleClassStatsPanel,
+                      icon: Icon(
+                        _showClassStatsPanel ? Icons.bar_chart : Icons.insights,
+                      ),
+                      label: Text(
+                        _showClassStatsPanel ? 'Hide class stats' : 'Class stats',
+                      ),
+                    ),
+                  ],
                   const SizedBox(width: 8),
                   FilledButton.icon(
                     onPressed: () async {
@@ -337,6 +382,7 @@ class _TractionPageState extends State<TractionPage> {
                               _classController.text = selection;
                             });
                             _refreshTraction();
+                            _refreshClassStatsIfOpen(immediate: true);
                           },
                         ),
                       ),
@@ -433,68 +479,40 @@ class _TractionPageState extends State<TractionPage> {
                 ),
               ),
               const SizedBox(height: 12),
-          Stack(
-            children: [
-              if (data.isTractionLoading && traction.isEmpty)
-                const Padding(
-                  padding: EdgeInsets.symmetric(vertical: 32.0),
-                  child: Center(child: CircularProgressIndicator()),
-                )
-              else if (traction.isEmpty)
-                Card(
-                  child: Padding(
-                    padding: const EdgeInsets.all(16.0),
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Text(
-                          'No traction found',
-                          style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                            fontWeight: FontWeight.w700,
-                          ),
-                        ),
-                        const SizedBox(height: 8),
-                        const Text('Try relaxing the filters or sync again.'),
             ],
           ),
         ),
-                )
+      ),
-              else
+      SliverPadding(
-                Column(
+        padding: const EdgeInsets.fromLTRB(16, 0, 16, 8),
+        sliver: SliverToBoxAdapter(
+          child: AnimatedCrossFade(
+            crossFadeState: (_showClassStatsPanel && _hasClassQuery)
+                ? CrossFadeState.showFirst
+                : CrossFadeState.showSecond,
+            duration: const Duration(milliseconds: 200),
+            firstChild: _buildClassStatsCard(context),
+            secondChild: const SizedBox.shrink(),
+          ),
+        ),
+      ),
+      SliverPadding(
+        padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
+        sliver: _buildTractionSliver(context, data, traction),
+      ),
+    ];
+
+    final scrollView = RefreshIndicator(
+      onRefresh: _refreshTraction,
+      child: CustomScrollView(
+        physics: const AlwaysScrollableScrollPhysics(),
+        slivers: slivers,
+      ),
+    );
+
+    final content = Stack(
       children: [
-                    ...traction.map(
+        scrollView,
-                      (loco) => TractionCard(
-                        loco: loco,
-                        selectionMode: widget.selectionMode,
-                        isSelected: _isSelected(loco),
-                        onShowInfo: () => showTractionDetails(context, loco),
-                        onOpenTimeline: () => _openTimeline(loco),
-                        onOpenLegs: () => _openLegs(loco),
-                        onToggleSelect:
-                            widget.selectionMode ? () => _toggleSelection(loco) : null,
-                      ),
-                    ),
-                    if (data.tractionHasMore || data.isTractionLoading)
-                      Padding(
-                        padding: const EdgeInsets.only(top: 8.0),
-                        child: OutlinedButton.icon(
-                          onPressed: data.isTractionLoading
-                              ? null
-                              : () => _refreshTraction(append: true),
-                          icon: data.isTractionLoading
-                              ? const SizedBox(
-                                  height: 14,
-                                  width: 14,
-                                  child: CircularProgressIndicator(strokeWidth: 2),
-                                )
-                              : const Icon(Icons.expand_more),
-                          label: Text(
-                            data.isTractionLoading ? 'Loading...' : 'Load more',
-                          ),
-                        ),
-                      ),
-                  ],
-                ),
         if (data.isTractionLoading)
           Positioned.fill(
             child: IgnorePointer(
@@ -505,37 +523,335 @@ class _TractionPageState extends State<TractionPage> {
             ),
           ),
       ],
-          ),
-        ],
-      ),
     );
 
     if (widget.selectionMode) {
       return Scaffold(
         appBar: AppBar(
-          leadingWidth: 140,
+          leadingWidth: 56,
-          leading: Padding(
+          leading: IconButton(
-            padding: const EdgeInsets.only(left: 8.0),
-            child: TextButton.icon(
-              onPressed: () => Navigator.of(context).pop(),
             icon: const Icon(Icons.arrow_back),
-              label: const Text('Back'),
+            onPressed: () => Navigator.of(context).pop(),
-              style: TextButton.styleFrom(
-                padding: const EdgeInsets.symmetric(
-                  horizontal: 12,
-                  vertical: 10,
-                ),
-                foregroundColor: Theme.of(context).colorScheme.onSurface,
-              ),
-            ),
           ),
           title: null,
         ),
-        body: listView,
+        body: content,
       );
     }
 
-    return listView;
+    return content;
+  }
+
+  bool get _hasClassQuery {
+    return (_selectedClass ?? _classController.text).trim().isNotEmpty;
+  }
+
+  Future<void> _toggleClassStatsPanel() async {
+    if (!_hasClassQuery) return;
+    final targetState = !_showClassStatsPanel;
+    setState(() {
+      _showClassStatsPanel = targetState;
+    });
+    if (targetState) {
+      await _loadClassStats();
+    }
+  }
+
+  void _refreshClassStatsIfOpen({bool immediate = false}) {
+    if (!_showClassStatsPanel || !_hasClassQuery) return;
+    final query = (_selectedClass ?? _classController.text).trim();
+    if (!immediate && _classStatsForClass == query && _classStats != null) {
+      return;
+    }
+    _classStatsDebounce?.cancel();
+    if (immediate) {
+      _loadClassStats();
+      return;
+    }
+    _classStatsDebounce = Timer(
+      const Duration(milliseconds: 400),
+      () {
+        if (mounted) _loadClassStats();
+      },
+    );
+  }
+
+  Future<void> _loadClassStats() async {
+    final query = (_selectedClass ?? _classController.text).trim();
+    if (query.isEmpty) return;
+    if (_classStatsForClass == query && _classStats != null) return;
+    setState(() {
+      _classStatsLoading = true;
+      _classStatsError = null;
+    });
+    try {
+      final data = context.read<DataService>();
+      final stats = await data.fetchClassStats(query);
+      if (!mounted) return;
+      setState(() {
+        _classStatsForClass = query;
+        _classStats = stats;
+        _classStatsError = stats == null ? 'No stats returned.' : null;
+      });
+    } catch (e) {
+      if (!mounted) return;
+      setState(() {
+        _classStatsError = 'Failed to load stats: $e';
+      });
+    } finally {
+      if (mounted) {
+        setState(() => _classStatsLoading = false);
+      }
+    }
+  }
+
+  Widget _buildClassStatsCard(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    if (_classStatsLoading) {
+      return Card(
+        child: Padding(
+          padding: const EdgeInsets.all(16.0),
+          child: Row(
+            children: const [
+              SizedBox(
+                height: 16,
+                width: 16,
+                child: CircularProgressIndicator(strokeWidth: 2),
+              ),
+              SizedBox(width: 12),
+              Text('Loading class stats...'),
+            ],
+          ),
+        ),
+      );
+    }
+
+    if (_classStatsError != null) {
+      return Card(
+        child: Padding(
+          padding: const EdgeInsets.all(16.0),
+          child: Text(
+            _classStatsError!,
+            style: TextStyle(color: scheme.error),
+          ),
+        ),
+      );
+    }
+
+    final stats = _classStats;
+    if (stats == null) {
+      return const SizedBox.shrink();
+    }
+
+    final totalMileage =
+        (stats['total_mileage_with_class'] as num?)?.toDouble() ?? 0.0;
+    final avgMileagePerEntry =
+        (stats['avg_mileage_per_entry'] as num?)?.toDouble() ?? 0.0;
+    final avgMileagePerLoco =
+        (stats['avg_mileage_per_loco_had'] as num?)?.toDouble() ?? 0.0;
+    final hadCount = stats['had_count']?.toString() ?? '0';
+    final entriesWithClass = stats['entries_with_class']?.toString() ?? '0';
+
+    final classStats = stats['class_stats'] is Map
+        ? Map<String, dynamic>.from(stats['class_stats'])
+        : const <String, dynamic>{};
+    final totalCount = (classStats['total'] as num?)?.toInt() ??
+        _sumCounts(classStats['status']) ??
+        0;
+    final statusList = _normalizeStatList(classStats['status'], 'status');
+    final domainList = _normalizeStatList(classStats['domain'], 'domain');
+
+    return Card(
+      child: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                Expanded(
+                  child: Text(
+                    stats['loco_class']?.toString() ?? 'Class stats',
+                    style: Theme.of(context).textTheme.titleMedium,
+                  ),
+                ),
+                TextButton.icon(
+                  onPressed: _loadClassStats,
+                  icon: const Icon(Icons.refresh),
+                  label: const Text('Refresh'),
+                ),
+              ],
+            ),
+            const SizedBox(height: 12),
+            Wrap(
+              spacing: 16,
+              runSpacing: 8,
+              children: [
+                _metricTile('Had', hadCount),
+                _metricTile('Entries', entriesWithClass),
+                _metricTile('Avg mi / loco had', avgMileagePerLoco.toStringAsFixed(2)),
+                _metricTile('Avg mi / entry', avgMileagePerEntry.toStringAsFixed(2)),
+                _metricTile('Total mileage', totalMileage.toStringAsFixed(2)),
+              ],
+            ),
+            const SizedBox(height: 12),
+            if (statusList.isNotEmpty)
+              _statBar(
+                context,
+                title: 'By status',
+                items: statusList,
+                total: totalCount,
+                colorFor: (label) => _statusColor(label, scheme),
+              ),
+            if (domainList.isNotEmpty) ...[
+              const SizedBox(height: 10),
+              _statBar(
+                context,
+                title: 'By domain',
+                items: domainList,
+                total: totalCount,
+                colorFor: (label) => _domainColor(label, scheme),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _metricTile(String label, String value) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+      decoration: BoxDecoration(
+        color: Colors.grey.withValues(alpha: 0.1),
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(label, style: const TextStyle(fontSize: 12)),
+          const SizedBox(height: 4),
+          Text(
+            value,
+            style: const TextStyle(fontWeight: FontWeight.w700),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _statBar(
+    BuildContext context, {
+    required String title,
+    required List<Map<String, dynamic>> items,
+    required int total,
+    required Color Function(String) colorFor,
+  }) {
+    if (total <= 0) {
+      return const SizedBox.shrink();
+    }
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(title, style: Theme.of(context).textTheme.labelMedium),
+        const SizedBox(height: 6),
+        ClipRRect(
+          borderRadius: BorderRadius.circular(8),
+          child: Row(
+            children: items.map((item) {
+              final label = item['label']?.toString() ?? '';
+              final count = (item['count'] as num?)?.toInt() ?? 0;
+              final pct = total == 0 ? 0.0 : (count / total) * 100;
+              final flex = count == 0 ? 1 : (count * 1000 / total).round();
+              return Expanded(
+                flex: flex,
+                child: Tooltip(
+                  message:
+                      '$label: $count (${pct.isNaN ? 0 : pct.toStringAsFixed(1)}%)',
+                  child: Container(
+                    height: 16,
+                    color: colorFor(label),
+                  ),
+                ),
+              );
+            }).toList(),
+          ),
+        ),
+        const SizedBox(height: 6),
+        Wrap(
+          spacing: 12,
+          runSpacing: 6,
+          children: items.map((item) {
+            final label = item['label']?.toString() ?? '';
+            final count = (item['count'] as num?)?.toInt() ?? 0;
+            final pct = total == 0 ? 0.0 : (count / total) * 100;
+            return Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Container(
+                  width: 10,
+                  height: 10,
+                  margin: const EdgeInsets.only(right: 6),
+                  decoration: BoxDecoration(
+                    color: colorFor(label),
+                    borderRadius: BorderRadius.circular(2),
+                  ),
+                ),
+                Text('$label (${pct.isNaN ? 0 : pct.toStringAsFixed(1)}%, $count)'),
+              ],
+            );
+          }).toList(),
+        ),
+      ],
+    );
+  }
+
+  List<Map<String, dynamic>> _normalizeStatList(dynamic list, String labelKey) {
+    if (list is! List) return const [];
+    return list
+        .whereType<Map>()
+        .map((item) => {
+              'label': item[labelKey]?.toString() ?? '',
+              'count': (item['count'] as num?)?.toInt() ?? 0,
+            })
+        .where((item) => (item['label'] ?? '').toString().isNotEmpty)
+        .toList();
+  }
+
+  int? _sumCounts(dynamic list) {
+    if (list is! List) return null;
+    int total = 0;
+    for (final item in list) {
+      final count = (item is Map ? item['count'] : null) as num?;
+      if (count != null) total += count.toInt();
+    }
+    return total;
+  }
+
+  Color _statusColor(String status, ColorScheme scheme) {
+    final key = status.toLowerCase();
+    if (key.contains('scrap')) return Colors.red.shade600;
+    if (key.contains('active')) return scheme.primary;
+    if (key.contains('overhaul')) return Colors.blueGrey;
+    if (key.contains('withdrawn')) return Colors.amber.shade700;
+    if (key.contains('stored')) return Colors.grey.shade600;
+    return scheme.tertiary;
+  }
+
+  Color _domainColor(String domain, ColorScheme scheme) {
+    final palette = [
+      scheme.primary,
+      scheme.secondary,
+      scheme.tertiary,
+      Colors.teal,
+      Colors.indigo,
+      Colors.orange,
+      Colors.pink,
+      Colors.brown,
+    ];
+    if (domain.isEmpty) return scheme.surfaceContainerHighest;
+    final index = domain.hashCode.abs() % palette.length;
+    return palette[index];
   }
 
   void _toggleSelection(LocoSummary loco) {
@@ -638,4 +954,84 @@ class _TractionPageState extends State<TractionPage> {
       ),
     );
   }
+
+  Widget _buildTractionSliver(
+    BuildContext context,
+    DataService data,
+    List<LocoSummary> traction,
+  ) {
+    if (data.isTractionLoading && traction.isEmpty) {
+      return const SliverToBoxAdapter(
+        child: Padding(
+          padding: EdgeInsets.symmetric(vertical: 32.0),
+          child: Center(child: CircularProgressIndicator()),
+        ),
+      );
+    }
+
+    if (traction.isEmpty) {
+      return SliverToBoxAdapter(
+        child: Card(
+          child: Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'No traction found',
+                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                    fontWeight: FontWeight.w700,
+                  ),
+                ),
+                const SizedBox(height: 8),
+                const Text('Try relaxing the filters or sync again.'),
+              ],
+            ),
+          ),
+        ),
+      );
+    }
+
+    final itemCount =
+        traction.length + ((data.tractionHasMore || data.isTractionLoading) ? 1 : 0);
+
+    return SliverList(
+      delegate: SliverChildBuilderDelegate(
+        (context, index) {
+          if (index < traction.length) {
+            final loco = traction[index];
+            return TractionCard(
+              loco: loco,
+              selectionMode: widget.selectionMode,
+              isSelected: _isSelected(loco),
+              onShowInfo: () => showTractionDetails(context, loco),
+              onOpenTimeline: () => _openTimeline(loco),
+              onOpenLegs: () => _openLegs(loco),
+              onToggleSelect:
+                  widget.selectionMode ? () => _toggleSelection(loco) : null,
+            );
+          }
+
+          return Padding(
+            padding: const EdgeInsets.only(top: 8.0),
+            child: OutlinedButton.icon(
+              onPressed:
+                  data.isTractionLoading ? null : () => _refreshTraction(append: true),
+              icon: data.isTractionLoading
+                  ? const SizedBox(
+                      height: 14,
+                      width: 14,
+                      child: CircularProgressIndicator(strokeWidth: 2),
+                    )
+                  : const Icon(Icons.expand_more),
+              label: Text(
+                data.isTractionLoading ? 'Loading...' : 'Load more',
+              ),
+            ),
+          );
+        },
+        childCount: itemCount,
+      ),
+    );
+  }
 }

lib/components/traction/traction_card.dart

@@ -82,30 +82,30 @@ class TractionCard extends StatelessWidget {
               ],
             ),
             const SizedBox(height: 8),
-            Row(
+            LayoutBuilder(
-              children: [
+              builder: (context, constraints) {
+                final isNarrow = constraints.maxWidth < 520;
+                final buttons = [
                   TextButton.icon(
                     onPressed: onShowInfo,
                     icon: const Icon(Icons.info_outline),
                     label: const Text('Details'),
                   ),
-                const SizedBox(width: 8),
                   TextButton.icon(
                     onPressed: onOpenTimeline,
                     icon: const Icon(Icons.timeline),
                     label: const Text('Timeline'),
                   ),
-                if (hasMileageOrTrips && onOpenLegs != null) ...[
+                  if (hasMileageOrTrips && onOpenLegs != null)
-                  const SizedBox(width: 8),
                     TextButton.icon(
                       onPressed: onOpenLegs,
                       icon: const Icon(Icons.view_list),
                       label: const Text('Legs'),
                     ),
-                ],
+                ];
-                const Spacer(),
+
-                if (selectionMode && onToggleSelect != null)
+                final addButton = selectionMode && onToggleSelect != null
-                  TextButton.icon(
+                    ? TextButton.icon(
                         onPressed: onToggleSelect,
                         icon: Icon(
                           isSelected
@@ -113,8 +113,37 @@ class TractionCard extends StatelessWidget {
                               : Icons.add_circle_outline,
                         ),
                         label: Text(isSelected ? 'Remove' : 'Add to entry'),
+                      )
+                    : null;
+
+                if (isNarrow) {
+                  return Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Wrap(
+                        spacing: 8,
+                        runSpacing: 4,
+                        children: buttons,
                       ),
+                      if (addButton != null) ...[
+                        const SizedBox(height: 6),
+                        addButton,
                       ],
+                    ],
+                  );
+                }
+
+                return Row(
+                  children: [
+                    ...buttons.expand((btn) sync* {
+                      yield btn;
+                      yield const SizedBox(width: 8);
+                    }).take(buttons.length * 2 - 1),
+                    const Spacer(),
+                    if (addButton != null) addButton,
+                  ],
+                );
+              },
             ),
             Wrap(
               spacing: 8,

lib/services/data_service/data_service_core.dart

@@ -48,6 +48,9 @@ class DataService extends ChangeNotifier {
   List<LocoChange> get latestLocoChanges => _latestLocoChanges;
   bool _isLatestLocoChangesLoading = false;
   bool get isLatestLocoChangesLoading => _isLatestLocoChangesLoading;
+  bool _latestLocoChangesHasMore = false;
+  bool get latestLocoChangesHasMore => _latestLocoChangesHasMore;
+  int _latestLocoChangesFetched = 0;
   final Map<int, List<LocoAttrVersion>> _locoTimelines = {};
   final Map<int, bool> _isLocoTimelineLoading = {};
   List<LocoAttrVersion> timelineForLoco(int locoId) =>
@@ -72,9 +75,14 @@ class DataService extends ChangeNotifier {
   bool get isEventFieldsLoading => _isEventFieldsLoading;
 
   // Station Data
-  List<Station>? _cachedStations;
+  final Map<String, List<Station>> _stationCache = {};
-  DateTime? _stationsFetchedAt;
+  final Map<String, Future<List<Station>>?> _stationInFlightByKey = {};
-  Future<List<Station>>? _stationsInFlight;
+  List<String> _stationNetworks = [];
+  Map<String, List<String>> _stationCountryNetworks = {};
+  DateTime? _stationFiltersFetchedAt;
+  List<String> get stationNetworks => _stationNetworks;
+  Map<String, List<String>> get stationCountryNetworks =>
+      _stationCountryNetworks;
 
   List<String> stations = [""];
 
@@ -365,37 +373,75 @@ class DataService extends ChangeNotifier {
         0;
   }
 
-  Future<List<Station>> fetchStations() async {
+  Future<void> fetchStationFilters() async {
     final now = DateTime.now();
-
+    if (_stationFiltersFetchedAt != null &&
-    // If cache exists and is less than 30 minutes old, return it
+        now.difference(_stationFiltersFetchedAt!) < const Duration(minutes: 30) &&
-    if (_cachedStations != null &&
+        _stationNetworks.isNotEmpty) {
-        _stationsFetchedAt != null &&
+      return;
-        now.difference(_stationsFetchedAt!) < Duration(minutes: 30)) {
+    }
-      return _cachedStations!;
+    try {
+      final response = await api.get('/stations/filter');
+      if (response is List && response.isNotEmpty && response.first is Map) {
+        final map = Map<String, dynamic>.from(response.first as Map);
+        final networks = (map['networks'] as List? ?? const [])
+            .whereType<String>()
+            .toList();
+        final countryNetworksRaw =
+            map['country_networks'] as Map? ?? const <String, dynamic>{};
+        final countryNetworks = <String, List<String>>{};
+        countryNetworksRaw.forEach((key, value) {
+          if (value is List) {
+            countryNetworks[key] = value.whereType<String>().toList();
+          }
+        });
+        _stationNetworks = networks;
+        _stationCountryNetworks = countryNetworks;
+        _stationFiltersFetchedAt = now;
+      }
+    } catch (e) {
+      debugPrint('Failed to fetch station filters: $e');
+    }
   }
 
-    if (_stationsInFlight != null) return _stationsInFlight!;
+  String _stationKey(List<String> countries, List<String> networks) {
+    final c = countries..sort();
+    final n = networks..sort();
+    return 'c:${c.join('|')};n:${n.join('|')}';
+  }
 
-    _stationsInFlight = () async {
+  Future<List<Station>> fetchStations({
+    List<String> countries = const [],
+    List<String> networks = const [],
+  }) async {
+    final key = _stationKey(List.from(countries), List.from(networks));
+
+    if (_stationCache.containsKey(key)) return _stationCache[key]!;
+    final inflight = _stationInFlightByKey[key];
+    if (inflight != null) return inflight;
+
+    final future = () async {
       try {
-        final response = await api.get('/location');
+        final response = await api.post('/location', {
+          'countries_filter': countries,
+          'network_filter': networks,
+        });
         if (response is! List) return const <Station>[];
         final parsed = response
             .whereType<Map>()
             .map((e) => Station.fromJson(Map<String, dynamic>.from(e)))
             .toList();
-        _cachedStations = parsed;
+        _stationCache[key] = parsed;
-        _stationsFetchedAt = now;
         return parsed;
       } catch (e) {
         debugPrint('Failed to fetch stations: $e');
         return const <Station>[];
       } finally {
-        _stationsInFlight = null;
+        _stationInFlightByKey.remove(key);
       }
     }();
 
-    return _stationsInFlight!;
+    _stationInFlightByKey[key] = future;
+    return future;
   }
 }

lib/services/data_service/data_service_traction.dart

@@ -115,7 +115,11 @@ extension DataServiceTraction on DataService {
     return _locoClasses;
   }
 
-  Future<void> fetchLatestLocoChanges({int limit = 25, int offset = 0}) async {
+  Future<void> fetchLatestLocoChanges({
+    int limit = 100,
+    int offset = 0,
+    bool append = false,
+  }) async {
     _isLatestLocoChangesLoading = true;
     _notifyAsync();
     try {
@@ -138,16 +142,41 @@ extension DataServiceTraction on DataService {
             );
           }
         }
+        if (append) {
+          _latestLocoChanges = [..._latestLocoChanges, ...parsed];
+        } else {
           _latestLocoChanges = parsed;
+        }
+        final fetchedCount = parsed.length;
+        _latestLocoChangesFetched = append
+            ? offset + fetchedCount
+            : fetchedCount;
+        _latestLocoChangesHasMore = _latestLocoChangesFetched < 5000;
       } else {
         throw Exception('Unexpected latest loco changes response: $json');
       }
     } catch (e) {
       debugPrint('Failed to fetch latest loco changes: $e');
       _latestLocoChanges = [];
+      _latestLocoChangesHasMore = false;
+      _latestLocoChangesFetched = 0;
     } finally {
       _isLatestLocoChangesLoading = false;
       _notifyAsync();
     }
   }
+
+  Future<Map<String, dynamic>?> fetchClassStats(String locoClass) async {
+    try {
+      final path = Uri.encodeComponent(locoClass);
+      final json = await api.get('/loco/class/stats/$path/user');
+      if (json is Map) {
+        return Map<String, dynamic>.from(json);
+      }
+      debugPrint('Unexpected class stats response for $locoClass: $json');
+    } catch (e) {
+      debugPrint('Failed to fetch class stats for $locoClass: $e');
+    }
+    return null;
+  }
 }

lib/ui/app_shell.dart

@@ -1,4 +1,5 @@
 import 'package:dynamic_color/dynamic_color.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:go_router/go_router.dart';
@@ -84,8 +85,9 @@ class _MyAppState extends State<MyApp> {
       redirect: (context, state) {
         final loggedIn = auth.isLoggedIn;
         final loggingIn = state.uri.toString() == '/login';
+        final atSettings = state.uri.toString() == '/settings';
 
-        if (!loggedIn && !loggingIn) return '/login';
+        if (!loggedIn && !loggingIn && !atSettings) return '/login';
         if (loggedIn && loggingIn) return '/';
         return null;
       },
@@ -155,14 +157,14 @@ class _MyAppState extends State<MyApp> {
                 return NewEntryPage(editLegId: legId);
               },
             ),
+          ],
+        ),
+        GoRoute(path: '/login', builder: (context, state) => const LoginScreen()),
         GoRoute(
           path: '/settings',
           builder: (context, state) => const SettingsPage(),
         ),
       ],
-        ),
-        GoRoute(path: '/login', builder: (context, state) => const LoginScreen()),
-      ],
     );
   }
 
@@ -188,6 +190,14 @@ class _MyAppState extends State<MyApp> {
   }
 }
 
+class _BackIntent extends Intent {
+  const _BackIntent();
+}
+
+class _ForwardIntent extends Intent {
+  const _ForwardIntent();
+}
+
 class MyHomePage extends StatefulWidget {
   final Widget child;
   const MyHomePage({super.key, required this.child});
@@ -205,13 +215,14 @@ class _MyHomePageState extends State<MyHomePage> {
     }
     await NavigationGuard.attemptNavigation(() async {
       if (!mounted) return;
-      context.go(contentPages[index]);
+      _navigateToIndex(index);
     });
   }
 
-  int? _lastTabIndex;
+  final List<int> _history = [];
-  final List<int> _tabHistory = [];
+  int _historyPosition = -1;
-  bool _handlingBackNavigation = false;
+  final List<int> _forwardHistory = [];
+  bool _suppressRecord = false;
 
   bool _fetched = false;
 
@@ -255,7 +266,7 @@ class _MyHomePageState extends State<MyHomePage> {
   Widget build(BuildContext context) {
     final uri = GoRouterState.of(context).uri;
     final pageIndex = tabIndexForPath(uri.path);
-    _recordTabChange(pageIndex);
+    _syncHistory(pageIndex);
     if (pageIndex != _addTabIndex) {
       NavigationGuard.unregister();
     }
@@ -268,35 +279,7 @@ class _MyHomePageState extends State<MyHomePage> {
         ? widget.child
         : const Center(child: CircularProgressIndicator());
 
-    return PopScope(
+    final scaffold = LayoutBuilder(
-      canPop: false,
-      onPopInvokedWithResult: (didPop, _) async {
-        if (didPop) return;
-
-        final shellNav = _shellNavigatorKey.currentState;
-        if (shellNav != null && shellNav.canPop()) {
-          shellNav.pop();
-          return;
-        }
-
-        if (_tabHistory.isNotEmpty) {
-          final previousTab = _tabHistory.removeLast();
-          if (!mounted) return;
-          _handlingBackNavigation = true;
-          context.go(contentPages[previousTab]);
-          return;
-        }
-
-        if (pageIndex != 0) {
-          if (!mounted) return;
-          _handlingBackNavigation = true;
-          context.go(contentPages[0]);
-          return;
-        }
-
-        SystemNavigator.pop();
-      },
-      child: LayoutBuilder(
       builder: (context, constraints) {
         final isWide = constraints.maxWidth >= 900;
         final railExtended = constraints.maxWidth >= 1400;
@@ -377,27 +360,146 @@ class _MyHomePageState extends State<MyHomePage> {
               : currentPage,
         );
       },
+    );
+
+    return Shortcuts(
+      shortcuts: <LogicalKeySet, Intent>{
+        LogicalKeySet(LogicalKeyboardKey.browserBack): const _BackIntent(),
+        LogicalKeySet(LogicalKeyboardKey.browserForward): const _ForwardIntent(),
+      },
+      child: Actions(
+        actions: {
+          _BackIntent: CallbackAction<_BackIntent>(
+            onInvoke: (_) {
+              _handleBackNavigation(allowExit: false, recordForward: true);
+              return null;
+            },
+          ),
+          _ForwardIntent: CallbackAction<_ForwardIntent>(
+            onInvoke: (_) {
+              _handleForwardNavigation();
+              return null;
+            },
+          ),
+        },
+        child: Focus(
+          autofocus: true,
+          child: Listener(
+            onPointerDown: _handlePointerButtons,
+            behavior: HitTestBehavior.opaque,
+            child: PopScope(
+              canPop: false,
+              onPopInvokedWithResult: (didPop, _) async {
+                if (didPop) return;
+                await _handleBackNavigation(allowExit: true, recordForward: false);
+              },
+              child: scaffold,
+            ),
+          ),
+        ),
       ),
     );
   }
 
-  void _recordTabChange(int pageIndex) {
+  void _handlePointerButtons(PointerDownEvent event) {
-    final last = _lastTabIndex;
+    // Support mouse back/forward buttons.
-    if (last == null) {
+    if (event.buttons == kBackMouseButton) {
-      _lastTabIndex = pageIndex;
+      _handleBackNavigation(allowExit: false, recordForward: true);
-      return;
+    } else if (event.buttons == kForwardMouseButton) {
+      _handleForwardNavigation();
     }
-    if (last == pageIndex) return;
-
-    if (_handlingBackNavigation) {
-      _handlingBackNavigation = false;
-      _lastTabIndex = pageIndex;
-      return;
   }
 
-    if (_tabHistory.isEmpty || _tabHistory.last != last) {
+  int get _currentPageIndex => tabIndexForPath(GoRouterState.of(context).uri.path);
-      _tabHistory.add(last);
+
+  Future<bool> _handleBackNavigation({
+    bool allowExit = false,
+    bool recordForward = false,
+  }) async {
+    final pageIndex = _currentPageIndex;
+    final shellNav = _shellNavigatorKey.currentState;
+    if (shellNav != null && shellNav.canPop()) {
+      shellNav.pop();
+      return true;
     }
-    _lastTabIndex = pageIndex;
+
+    if (_historyPosition > 0) {
+      if (recordForward) _pushForward(pageIndex);
+      _historyPosition -= 1;
+      _suppressRecord = true;
+      context.go(contentPages[_history[_historyPosition]]);
+      return true;
+    }
+
+    if (pageIndex != 0) {
+      if (recordForward) _pushForward(pageIndex);
+      _suppressRecord = true;
+      context.go(contentPages[0]);
+      return true;
+    }
+
+    if (allowExit) {
+      SystemNavigator.pop();
+      return true;
+    }
+
+    return false;
+  }
+
+  Future<bool> _handleForwardNavigation() async {
+    if (_forwardHistory.isEmpty) return false;
+    final nextTab = _forwardHistory.removeLast();
+
+    // Move cursor forward, keeping history in sync.
+    if (_historyPosition < _history.length - 1) {
+      _historyPosition += 1;
+      _history[_historyPosition] = nextTab;
+      if (_historyPosition < _history.length - 1) {
+        _history.removeRange(_historyPosition + 1, _history.length);
+      }
+    } else {
+      _history.add(nextTab);
+      _historyPosition = _history.length - 1;
+    }
+
+    _suppressRecord = true;
+    if (!mounted) return false;
+    context.go(contentPages[nextTab]);
+    return true;
+  }
+
+  void _pushForward(int pageIndex) {
+    if (_forwardHistory.isEmpty || _forwardHistory.last != pageIndex) {
+      _forwardHistory.add(pageIndex);
+    }
+  }
+
+  void _syncHistory(int pageIndex) {
+    if (_history.isEmpty) {
+      _history.add(pageIndex);
+      _historyPosition = 0;
+      return;
+    }
+    if (_suppressRecord) {
+      _suppressRecord = false;
+      return;
+    }
+    if (_historyPosition >= 0 &&
+        _historyPosition < _history.length &&
+        _history[_historyPosition] == pageIndex) {
+      return;
+    }
+    if (_historyPosition < _history.length - 1) {
+      _history.removeRange(_historyPosition + 1, _history.length);
+    }
+    _history.add(pageIndex);
+    _historyPosition = _history.length - 1;
+    _forwardHistory.clear();
+  }
+
+  void _navigateToIndex(int index) {
+    _suppressRecord = false;
+    _forwardHistory.clear();
+    context.go(contentPages[index]);
   }
 }

pubspec.yaml

@@ -16,7 +16,7 @@ publish_to: "none" # Remove this line if you wish to publish to pub.dev
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 # In Windows, build-name is used as the major, minor, and patch parts
 # of the product and file versions while build-number is used as the build suffix.
-version: 0.3.2+1
+version: 0.3.4+1
 
 environment:
   sdk: ^3.8.1