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

.vscode/settings.json

@@ -1 +1,3 @@
-{}
+{
+  "cmake.ignoreCMakeListsMissing": true
+}

android/app/build.gradle.kts

@@ -45,7 +45,7 @@ android {
 
     defaultConfig {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
-        applicationId = "com.example.mileograph_flutter"
+        applicationId = "com.petegregoryy.mileograph_flutter"
         // You can update the following values to match your application needs.
         // For more information, see: https://flutter.dev/to/review-gradle-config.
         minSdk = flutter.minSdkVersion

lib/app.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:mileograph_flutter/services/api_service.dart';
 import 'package:mileograph_flutter/services/authservice.dart';
 import 'package:mileograph_flutter/services/data_service.dart';
+import 'package:mileograph_flutter/services/endpoint_service.dart';
 import 'package:mileograph_flutter/ui/app_shell.dart';
 import 'package:provider/provider.dart';
 
@@ -12,8 +13,16 @@ class App extends StatelessWidget {
   Widget build(BuildContext context) {
     return MultiProvider(
       providers: [
-        Provider<ApiService>(
-          create: (_) => ApiService(baseUrl: 'https://mileograph.co.uk/api/v1'),
+        ChangeNotifierProvider<EndpointService>(
+          create: (_) => EndpointService(),
+        ),
+        ProxyProvider<EndpointService, ApiService>(
+          update: (_, endpoint, api) {
+            final service = api ?? ApiService(baseUrl: endpoint.baseUrl);
+            service.setBaseUrl(endpoint.baseUrl);
+            return service;
+          },
+          create: (_) => ApiService(baseUrl: EndpointService.defaultBaseUrl),
         ),
         ChangeNotifierProvider<AuthService>(
           create: (context) => AuthService(api: context.read<ApiService>()),

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();
-        if (mounted) {
-          setState(() => allStations = result);
-        }
+        await data.fetchStationFilters();
+        if (!mounted) return;
+        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,32 +359,27 @@ class _RouteCalculatorState extends State<RouteCalculator> {
         else
           SizedBox.shrink(),
         const SizedBox(height: 10),
-        LayoutBuilder(
-          builder: (context, constraints) {
-            double screenWidth = constraints.maxWidth;
-
-            return Padding(
-              padding: EdgeInsets.only(right: screenWidth < 450 ? 70 : 0),
-              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'),
-                    onPressed: () async {
-                      await _calculateRoute(data.stations);
-                    },
-                  ),
-                ],
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16.0),
+          child: Wrap(
+            alignment: WrapAlignment.center,
+            spacing: 12,
+            runSpacing: 8,
+            children: [
+              ElevatedButton.icon(
+                icon: const Icon(Icons.add),
+                label: const Text('Add Station'),
+                onPressed: _addStation,
               ),
-            );
-          },
+              ElevatedButton.icon(
+                icon: const Icon(Icons.route),
+                label: const Text('Calculate Route'),
+                onPressed: () async {
+                  await _calculateRoute(data.stations);
+                },
+              ),
+            ],
+          ),
         ),
 
         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

@@ -0,0 +1,499 @@
+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, this.expanded = false});
+
+  final bool expanded;
+
+  @override
+  State<LatestLocoChangesPanel> createState() => _LatestLocoChangesPanelState();
+}
+
+class _LatestLocoChangesPanelState extends State<LatestLocoChangesPanel> {
+  late final ScrollController _controller;
+  final Set<String> _collapsedDates = {};
+  final Set<String> _collapsedClasses = {};
+  final Set<String> _collapsedLocos = {};
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = ScrollController();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    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(
+      clipBehavior: Clip.antiAlias,
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              Row(
+                children: [
+                const Icon(Icons.bolt, size: 20),
+                const SizedBox(width: 8),
+                Expanded(
+                  child: Text(
+                    'Latest loco changes',
+                    style: textTheme.titleMedium?.copyWith(
+                      fontWeight: FontWeight.w800,
+                    ),
+                  ),
+                ),
+                if (isLoading && changes.isNotEmpty)
+                  const SizedBox(
+                    width: 18,
+                    height: 18,
+                    child: CircularProgressIndicator(strokeWidth: 2),
+                  ),
+              ],
+            ),
+            const SizedBox(height: 8),
+            if (isLoading && changes.isEmpty)
+              const Padding(
+                padding: EdgeInsets.all(12.0),
+                child: Center(child: CircularProgressIndicator()),
+              )
+            else if (changes.isEmpty)
+              Padding(
+                padding: const EdgeInsets.symmetric(vertical: 8.0),
+                child: Text(
+                  'No recent loco changes yet.',
+                  style: textTheme.bodyMedium,
+                ),
+              )
+            else
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  _buildChangesList(changes, textTheme),
+                  const SizedBox(height: 8),
+                  Align(
+                    alignment: Alignment.centerLeft,
+                    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/dashboard/leaderboard_panel.dart

@@ -10,70 +10,87 @@ class LeaderboardPanel extends StatelessWidget {
   Widget build(BuildContext context) {
     final data = context.watch<DataService>();
     final leaderboard = data.homepageStats?.leaderboard ?? [];
+    final textTheme = Theme.of(context).textTheme;
     if (data.isHomepageLoading && leaderboard.isEmpty) {
       return const Padding(
         padding: EdgeInsets.all(16.0),
         child: Center(child: CircularProgressIndicator()),
       );
     }
-    return Padding(
-      padding: const EdgeInsets.all(10.0),
-      child: Card(
+    return Card(
+      clipBehavior: Clip.antiAlias,
+      child: Padding(
+        padding: const EdgeInsets.all(16),
         child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
-            Text(
-              "Leaderboard",
-              style: TextStyle(
-                fontSize: 24,
-                fontWeight: FontWeight.bold,
-                decoration: TextDecoration.underline,
-              ),
+            Row(
+              children: [
+                const Icon(Icons.emoji_events, size: 20),
+                const SizedBox(width: 8),
+                Expanded(
+                  child: Text(
+                    "Leaderboard",
+                    style: textTheme.titleMedium?.copyWith(
+                      fontWeight: FontWeight.w800,
+                    ),
+                  ),
+                ),
+                if (leaderboard.isNotEmpty)
+                  Container(
+                    padding:
+                        const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                    decoration: BoxDecoration(
+                      color: Theme.of(context).colorScheme.surfaceContainerHighest,
+                      borderRadius: BorderRadius.circular(10),
+                    ),
+                    child: Text(
+                      'Top ${leaderboard.length}',
+                      style: textTheme.labelSmall,
+                    ),
+                  ),
+              ],
             ),
+            const SizedBox(height: 8),
             if (leaderboard.isEmpty)
               const Padding(
-                padding: EdgeInsets.all(16.0),
+                padding: EdgeInsets.all(8.0),
                 child: Text('No leaderboard data yet'),
               )
             else
               Column(
-                children: List.generate(
-                  leaderboard.length,
-                  (index) {
-                    final leaderboardEntry = leaderboard[index];
-                    return Container(
-                      width: double.infinity,
-                      margin: const EdgeInsets.symmetric(
-                          horizontal: 0, vertical: 8),
-                      child: Padding(
-                        padding: const EdgeInsets.all(8),
-                        child: Row(
-                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                          children: [
-                            Text.rich(
-                              TextSpan(
-                                children: [
-                                  TextSpan(
-                                    text: '${index + 1}. ',
-                                    style: const TextStyle(
-                                      fontWeight: FontWeight.bold,
-                                    ),
-                                  ),
-                                  TextSpan(
-                                    text: leaderboardEntry.userFullName,
-                                  ),
-                                ],
-                              ),
-                            ),
-                            Text(
-                              '${leaderboardEntry.mileage.toStringAsFixed(1)} mi',
-                            ),
-                          ],
+                children: [
+                  for (int index = 0; index < leaderboard.length; index++) ...[
+                    ListTile(
+                      contentPadding: EdgeInsets.zero,
+                      dense: true,
+                      leading: CircleAvatar(
+                        radius: 18,
+                        backgroundColor:
+                            Theme.of(context).colorScheme.secondaryContainer,
+                        child: Text(
+                          '${index + 1}',
+                          style: textTheme.labelLarge?.copyWith(
+                            fontWeight: FontWeight.w800,
+                          ),
                         ),
                       ),
-                    );
-                  },
-                ),
+                      title: Text(
+                        leaderboard[index].userFullName,
+                        style: textTheme.titleSmall?.copyWith(
+                          fontWeight: FontWeight.w700,
+                        ),
+                      ),
+                      trailing: Text(
+                        '${leaderboard[index].mileage.toStringAsFixed(1)} mi',
+                        style: textTheme.labelLarge?.copyWith(
+                          fontWeight: FontWeight.w700,
+                        ),
+                      ),
+                    ),
+                    if (index != leaderboard.length - 1) const Divider(height: 12),
+                  ],
+                ],
               ),
           ],
         ),

lib/components/dashboard/top_traction_panel.dart

@@ -11,79 +11,82 @@ class TopTractionPanel extends StatelessWidget {
     final data = context.watch<DataService>();
     final stats = data.homepageStats;
     final locos = stats?.topLocos ?? [];
+    final textTheme = Theme.of(context).textTheme;
     if (data.isHomepageLoading && locos.isEmpty) {
       return const Padding(
         padding: EdgeInsets.all(16.0),
         child: Center(child: CircularProgressIndicator()),
       );
     }
-    return Padding(
-      padding: const EdgeInsets.all(10.0),
-      child: Card(
+    return Card(
+      clipBehavior: Clip.antiAlias,
+      child: Padding(
+        padding: const EdgeInsets.all(16),
         child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
-            Text(
-              "Top Traction",
-              style: TextStyle(
-                fontSize: 24,
-                fontWeight: FontWeight.bold,
-                decoration: TextDecoration.underline,
-              ),
+            Row(
+              children: [
+                const Icon(Icons.train, size: 20),
+                const SizedBox(width: 8),
+                Expanded(
+                  child: Text(
+                    "Top traction",
+                    style: textTheme.titleMedium?.copyWith(
+                      fontWeight: FontWeight.w800,
+                    ),
+                  ),
+                ),
+              ],
             ),
+            const SizedBox(height: 8),
             if (locos.isEmpty)
               const Padding(
-                padding: EdgeInsets.all(16.0),
+                padding: EdgeInsets.all(8.0),
                 child: Text('No traction data yet'),
               )
             else
               Column(
-                children: List.generate(
-                  locos.length,
-                  (index) {
-                    final loco = locos[index];
-                    return Container(
-                      width: double.infinity,
-                      margin:
-                          const EdgeInsets.symmetric(horizontal: 0, vertical: 8),
-                      child: Padding(
-                        padding: const EdgeInsets.all(8),
-                        child: Row(
-                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                          children: [
-                            Column(
-                              crossAxisAlignment: CrossAxisAlignment.start,
-                              children: [
-                                Text.rich(
-                                  TextSpan(
-                                    children: [
-                                      TextSpan(
-                                        text: '${index + 1}. ',
-                                        style: const TextStyle(
-                                          fontWeight: FontWeight.bold,
-                                        ),
-                                      ),
-                                      TextSpan(
-                                        text:
-                                            '${loco.locoClass} ${loco.number}',
-                                      ),
-                                    ],
-                                  ),
-                                ),
-                                Text(
-                                  loco.name ?? '',
-                                  style:
-                                      const TextStyle(fontStyle: FontStyle.italic),
-                                ),
-                              ],
-                            ),
-                            Text('${loco.mileage?.toStringAsFixed(1)} mi'),
-                          ],
+                children: [
+                  for (int index = 0; index < locos.length; index++) ...[
+                    ListTile(
+                      contentPadding: EdgeInsets.zero,
+                      dense: true,
+                      leading: CircleAvatar(
+                        radius: 18,
+                        backgroundColor:
+                            Theme.of(context).colorScheme.primaryContainer,
+                        child: Text(
+                          '${index + 1}',
+                          style: textTheme.labelLarge?.copyWith(
+                            fontWeight: FontWeight.w800,
+                          ),
                         ),
                       ),
-                    );
-                  },
-                ),
+                      title: Text(
+                        '${locos[index].locoClass} ${locos[index].number}',
+                        style: textTheme.titleSmall?.copyWith(
+                          fontWeight: FontWeight.w700,
+                        ),
+                      ),
+                      subtitle: (locos[index].name ?? '').isEmpty
+                          ? null
+                          : Text(
+                              locos[index].name ?? '',
+                              style: textTheme.bodySmall?.copyWith(
+                                fontStyle: FontStyle.italic,
+                              ),
+                            ),
+                      trailing: Text(
+                        '${locos[index].mileage?.toStringAsFixed(1)} mi',
+                        style: textTheme.labelLarge?.copyWith(
+                          fontWeight: FontWeight.w700,
+                        ),
+                      ),
+                    ),
+                    if (index != locos.length - 1) const Divider(height: 12),
+                  ],
+                ],
               ),
           ],
         ),

lib/components/legs/leg_card.dart

@@ -3,41 +3,121 @@ 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,
     this.showEditButton = true,
+    this.showDate = true,
   });
 
   final Leg leg;
   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}'),
-        subtitle: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Text(_formatDateTime(leg.beginTime)),
-            if (leg.headcode.isNotEmpty)
-              Text(
-                'Headcode: ${leg.headcode}',
-                style: textTheme.labelSmall,
-              ),
-            if (leg.network.isNotEmpty)
-              Text(
-                leg.network,
-                style: textTheme.labelSmall,
-              ),
-          ],
+        title: LayoutBuilder(
+          builder: (context, constraints) {
+            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: [
+                timeText,
+                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) {
+              children.add(
+                Text(
+                  leg.network,
+                  style: textTheme.labelSmall,
+                ),
+              );
+            }
+
+            return Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: children,
+            );
+          },
         ),
         trailing: Row(
           mainAxisSize: MainAxisSize.min,
@@ -64,7 +144,7 @@ class LegCard extends StatelessWidget {
                 ],
               ],
             ),
-            if (showEditButton) ...[
+            if (widget.showEditButton) ...[
               const SizedBox(width: 8),
               IconButton(
                 tooltip: 'Edit entry',
@@ -74,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),
+                ),
+              ],
             ],
           ],
         ),
@@ -112,27 +204,83 @@ 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';
   }
 
   List<Widget> _buildLocoChips(BuildContext context, Leg leg) {
     final theme = Theme.of(context);
+    final textTheme = theme.textTheme;
     return leg.locos
         .map(
-          (loco) => Chip(
-            label: Text('${loco.locoClass} ${loco.number}'),
-            avatar: const Icon(Icons.directions_railway, size: 16),
-            backgroundColor: theme.colorScheme.surfaceContainerHighest,
-          ),
+          (loco) {
+            final powering = loco.powering == true;
+            final iconColor =
+                powering ? theme.colorScheme.primary : theme.disabledColor;
+            final labelStyle = powering
+                ? null
+                : textTheme.bodyMedium?.copyWith(color: theme.disabledColor);
+            final background = powering
+                ? theme.colorScheme.surfaceContainerHighest
+                : theme.colorScheme.surfaceContainerLow;
+            return Chip(
+              label: Text(
+                '${loco.locoClass} ${loco.number}',
+                style: labelStyle,
+              ),
+              avatar: Icon(
+                Icons.directions_railway,
+                size: 16,
+                color: iconColor,
+              ),
+              backgroundColor: background,
+            );
+          },
         )
         .toList();
   }
@@ -192,4 +340,3 @@ class LegCard extends StatelessWidget {
     return [trimmed];
   }
 }
-

lib/components/login/login.dart

@@ -81,6 +81,12 @@ class _LoginScreenState extends State<LoginScreen> {
                 ),
               const SizedBox(height: 50),
               const LoginPanel(),
+              const SizedBox(height: 16),
+              IconButton(
+                icon: const Icon(Icons.settings, color: Colors.grey),
+                tooltip: 'Settings',
+                onPressed: () => context.go('/settings'),
+              ),
             ],
           ),
         ),

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

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
+import 'package:intl/intl.dart';
+import 'package:mileograph_flutter/components/dashboard/latest_loco_changes_panel.dart';
 import 'package:mileograph_flutter/components/dashboard/leaderboard_panel.dart';
 import 'package:mileograph_flutter/components/dashboard/top_traction_panel.dart';
 import 'package:mileograph_flutter/objects/objects.dart';
@@ -32,45 +34,21 @@ class _DashboardState extends State<Dashboard> {
           data.fetchOnThisDay(),
           data.fetchTripDetails(),
           data.fetchHadTraction(),
+          data.fetchLatestLocoChanges(),
         ]);
       },
       child: LayoutBuilder(
         builder: (context, constraints) {
-          final isWide = constraints.maxWidth > 1100;
-          final metricChips = _buildMetricChips(
-            context,
-            totalMileage: stats?.totalMileage ?? 0,
-            currentYearMileage: data.getMileageForCurrentYear(),
-            trips: data.trips.length,
-          );
+          const spacing = 16.0;
+          final maxWidth = constraints.maxWidth;
           return Stack(
             children: [
               ListView(
                 padding: const EdgeInsets.all(16),
                 children: [
-                  _buildHeader(context, auth, stats, data.isHomepageLoading),
-                  const SizedBox(height: 12),
-                  Wrap(spacing: 12, runSpacing: 12, children: metricChips),
-                  const SizedBox(height: 16),
-                  isWide
-                      ? Row(
-                          crossAxisAlignment: CrossAxisAlignment.start,
-                          children: [
-                            Expanded(child: _buildMainColumn(context, data)),
-                            const SizedBox(width: 16),
-                            SizedBox(
-                              width: 360,
-                              child: _buildSidebar(context, data),
-                            ),
-                          ],
-                        )
-                      : Column(
-                          children: [
-                            _buildMainColumn(context, data),
-                            const SizedBox(height: 16),
-                            _buildSidebar(context, data),
-                          ],
-                        ),
+                  _buildHero(context, auth, data, stats),
+                  const SizedBox(height: spacing),
+                  _buildTiles(context, data, maxWidth, spacing),
                 ],
               ),
               if (isInitialLoading)
@@ -98,138 +76,387 @@ class _DashboardState extends State<Dashboard> {
     );
   }
 
-  Widget _buildHeader(
+  Widget _buildHero(
     BuildContext context,
     AuthService auth,
+    DataService data,
     HomepageStats? stats,
-    bool loading,
   ) {
+    final colorScheme = Theme.of(context).colorScheme;
     final greetingName =
         stats?.user?.fullName ?? auth.fullName ?? auth.username ?? 'there';
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Column(
+    final totalMileage = stats?.totalMileage ?? 0;
+    final currentYearMileage = data.getMileageForCurrentYear();
+    final legCount = stats?.legCount ?? data.trips.length;
+    final progress = totalMileage == 0
+        ? 0.0
+        : (currentYearMileage / totalMileage).clamp(0, 1).toDouble();
+
+    return Card(
+      clipBehavior: Clip.antiAlias,
+      elevation: 2,
+      child: Container(
+        decoration: BoxDecoration(
+          gradient: LinearGradient(
+            colors: [
+              colorScheme.primaryContainer,
+              colorScheme.secondaryContainer,
+            ],
+            begin: Alignment.topLeft,
+            end: Alignment.bottomRight,
+          ),
+        ),
+        padding: const EdgeInsets.all(18),
+        child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            Text('Dashboard', style: Theme.of(context).textTheme.labelMedium),
-            const SizedBox(height: 2),
+            _heroHeading(context, greetingName, colorScheme),
+            const SizedBox(height: 18),
+            Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                _metricTile(
+                  context,
+                  label: 'Total mileage',
+                  value: '${totalMileage.toStringAsFixed(1)} mi',
+                  icon: Icons.route,
+                  color: colorScheme.onPrimaryContainer,
+                ),
+                _metricTile(
+                  context,
+                  label: 'This year',
+                  value: '${currentYearMileage.toStringAsFixed(1)} mi',
+                  icon: Icons.calendar_today,
+                  color: colorScheme.onPrimaryContainer,
+                ),
+                _metricTile(
+                  context,
+                  label: 'Entries logged',
+                  value: legCount.toString(),
+                  icon: Icons.format_list_bulleted,
+                  color: colorScheme.onPrimaryContainer,
+                ),
+              ],
+            ),
+            const SizedBox(height: 16),
+            ClipRRect(
+              borderRadius: BorderRadius.circular(12),
+              child: LinearProgressIndicator(
+                value: progress.isNaN ? 0 : progress,
+                minHeight: 10,
+                backgroundColor: colorScheme.onPrimaryContainer.withValues(
+                  alpha: 0.2,
+                ),
+                valueColor: AlwaysStoppedAnimation<Color>(
+                  colorScheme.onPrimaryContainer,
+                ),
+              ),
+            ),
+            const SizedBox(height: 6),
             Text(
-              'Welcome back, $greetingName',
-              style: Theme.of(context).textTheme.headlineSmall,
+              totalMileage == 0
+                  ? 'Log a new entry to start your timeline.'
+                  : 'Year-to-date is ${(progress * 100).toStringAsFixed(0)}% of all mileage.',
+              style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                color: colorScheme.onPrimaryContainer.withValues(alpha: 0.8),
+              ),
             ),
           ],
         ),
-        if (loading)
-          const Padding(
-            padding: EdgeInsets.only(right: 8.0),
-            child: SizedBox(
-              height: 24,
-              width: 24,
-              child: CircularProgressIndicator(strokeWidth: 2),
-            ),
-          ),
-      ],
+      ),
     );
   }
 
-  List<Widget> _buildMetricChips(
+  Widget _metricTile(
     BuildContext context, {
-    required double totalMileage,
-    required double currentYearMileage,
-    required int trips,
+    required String label,
+    required String value,
+    required IconData icon,
+    required Color color,
   }) {
-    final textTheme = Theme.of(context).textTheme;
-    Widget metricCard(String label, String value) {
-      return Card(
-        elevation: 1,
-        child: Padding(
-          padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 14),
-          child: Column(
+    final bg = Colors.white.withValues(alpha: 0.14);
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+      decoration: BoxDecoration(
+        color: bg,
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(color: Colors.white.withValues(alpha: 0.18)),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Icon(icon, color: color),
+          const SizedBox(width: 10),
+          Column(
             crossAxisAlignment: CrossAxisAlignment.start,
-            mainAxisSize: MainAxisSize.min,
             children: [
               Text(
-                label.toUpperCase(),
-                style: textTheme.labelSmall?.copyWith(
-                  letterSpacing: 0.7,
-                  color: textTheme.bodySmall?.color?.withValues(alpha: 0.7),
+                label,
+                style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                  color: color.withValues(alpha: 0.85),
+                  letterSpacing: 0.4,
                 ),
               ),
-              const SizedBox(height: 4),
               Text(
                 value,
-                style: textTheme.titleMedium?.copyWith(
-                  fontWeight: FontWeight.w700,
+                style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                  fontWeight: FontWeight.w800,
+                  color: color,
                 ),
               ),
             ],
           ),
-        ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildTiles(
+    BuildContext context,
+    DataService data,
+    double maxWidth,
+    double spacing,
+  ) {
+    final isWide = maxWidth >= 1200;
+
+    if (isWide) {
+      return Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Expanded(
+            flex: 2,
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                _buildOnThisDayCard(context, data),
+                const SizedBox(height: 16),
+                _buildTripsCard(context, data),
+                const SizedBox(height: 16),
+                const LatestLocoChangesPanel(expanded: true),
+              ],
+            ),
+          ),
+          const SizedBox(width: 16),
+          Expanded(
+            flex: 1,
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: const [
+                TopTractionPanel(),
+                SizedBox(height: 16),
+                LeaderboardPanel(),
+              ],
+            ),
+          ),
+        ],
       );
     }
 
-    return [
-      metricCard('Total mileage', '${totalMileage.toStringAsFixed(1)} mi'),
-      metricCard('This year', '${currentYearMileage.toStringAsFixed(1)} mi'),
-      metricCard('Trips logged', trips.toString()),
-    ];
-  }
-
-  Widget _buildMainColumn(BuildContext context, DataService data) {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
-        _buildCard(
-          context,
-          title: 'On this day',
-          action:
-              data.onThisDay
-                      .where((leg) => leg.beginTime.year != DateTime.now().year)
-                      .length >
-                  5
-              ? TextButton(
-                  onPressed: () => setState(() {
-                    _showAllOnThisDay = !_showAllOnThisDay;
-                  }),
-                  child: Text(_showAllOnThisDay ? 'Show less' : 'Show more'),
-                )
-              : null,
-          trailing: data.isOnThisDayLoading
-              ? const SizedBox(
-                  height: 18,
-                  width: 18,
-                  child: CircularProgressIndicator(strokeWidth: 2),
-                )
-              : null,
-          child: _buildLegList(
-            context,
-            data.onThisDay,
-            showAll: _showAllOnThisDay,
-            emptyMessage: 'No historical moves for today yet.',
+        _buildOnThisDayCard(context, data),
+        const SizedBox(height: 16),
+        const TopTractionPanel(),
+        const SizedBox(height: 16),
+        const LeaderboardPanel(),
+        const SizedBox(height: 16),
+        _buildTripsCard(context, data),
+        const SizedBox(height: 16),
+        const LatestLocoChangesPanel(),
+      ],
+    );
+  }
+
+  Widget _heroHeading(
+    BuildContext context,
+    String greetingName,
+    ColorScheme colorScheme,
+  ) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          'Dashboard',
+          style: Theme.of(context).textTheme.labelMedium?.copyWith(
+            color: colorScheme.onPrimaryContainer,
+            letterSpacing: 0.4,
+          ),
+        ),
+        const SizedBox(height: 2),
+        Text(
+          'Welcome back, $greetingName',
+          style: Theme.of(context).textTheme.headlineSmall?.copyWith(
+            color: colorScheme.onPrimaryContainer,
+            fontWeight: FontWeight.w800,
           ),
         ),
-        const SizedBox(height: 12),
-        _buildQuickCalcCard(context),
-        const SizedBox(height: 12),
-        _buildTripsCard(context, data),
       ],
     );
   }
 
-  Widget _buildSidebar(BuildContext context, DataService data) {
-    return Column(
+  Widget _buildOnThisDayCard(BuildContext context, DataService data) {
+    final filtered = data.onThisDay
+        .where((leg) => leg.beginTime.year != DateTime.now().year)
+        .toList();
+    final textTheme = Theme.of(context).textTheme;
+    final showMore = filtered.length > 5;
+    final visible = _showAllOnThisDay ? filtered : filtered.take(6).toList();
+    return _panel(
+      context,
+      icon: Icons.history_toggle_off,
+      title: 'On this day',
+      trailing: data.isOnThisDayLoading
+          ? const SizedBox(
+              height: 18,
+              width: 18,
+              child: CircularProgressIndicator(strokeWidth: 2),
+            )
+          : null,
+      action: showMore
+          ? TextButton(
+              onPressed: () =>
+                  setState(() => _showAllOnThisDay = !_showAllOnThisDay),
+              child: Text(_showAllOnThisDay ? 'Show less' : 'Show more'),
+            )
+          : null,
+      child: filtered.isEmpty
+          ? Text(
+              'No historical moves for today yet.',
+              style: textTheme.bodyMedium,
+            )
+          : Column(
+              children: [
+                for (int idx = 0; idx < visible.length; idx++) ...[
+                  _otdRow(context, visible[idx], textTheme),
+                  if (idx != visible.length - 1) const Divider(height: 12),
+                ],
+              ],
+            ),
+    );
+  }
+
+  Widget _otdRow(BuildContext context, Leg leg, TextTheme textTheme) {
+    final traction = leg.locos;
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-        TopTractionPanel(),
-        const SizedBox(height: 12),
-        LeaderboardPanel(),
+        Container(
+          width: 64,
+          height: 56,
+          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
+          decoration: BoxDecoration(
+            color: Theme.of(context).colorScheme.surfaceContainerHighest,
+            borderRadius: BorderRadius.circular(12),
+          ),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                leg.beginTime.year.toString(),
+                style: textTheme.titleMedium?.copyWith(
+                  fontWeight: FontWeight.w800,
+                ),
+              ),
+              const SizedBox(height: 2),
+              Text(_formatTime(leg.beginTime), style: textTheme.labelSmall),
+            ],
+          ),
+        ),
+        const SizedBox(width: 12),
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                '${leg.start} → ${leg.end}',
+                style: textTheme.titleSmall?.copyWith(
+                  fontWeight: FontWeight.w700,
+                ),
+                maxLines: 2,
+                overflow: TextOverflow.ellipsis,
+              ),
+              if (leg.headcode.isNotEmpty) ...[
+                const SizedBox(height: 4),
+                Row(
+                  children: [
+                    Text(
+                      leg.headcode,
+                      style: textTheme.labelSmall?.copyWith(
+                        color: textTheme.bodySmall?.color?.withValues(
+                          alpha: 0.7,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+              const SizedBox(height: 4),
+              Row(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  const SizedBox(width: 6),
+                  Expanded(
+                    child: traction.isEmpty
+                        ? Text(
+                            'No traction recorded',
+                            style: textTheme.labelSmall?.copyWith(
+                              color: textTheme.bodySmall?.color?.withValues(
+                                alpha: 0.7,
+                              ),
+                            ),
+                          )
+                        : Wrap(
+                            spacing: 8,
+                            runSpacing: 4,
+                            children: traction.map((loco) {
+                              final iconColor = loco.powering
+                                  ? Theme.of(context).colorScheme.primary
+                                  : Theme.of(context).hintColor;
+                              final label = '${loco.locoClass} ${loco.number}';
+                              return Row(
+                                mainAxisSize: MainAxisSize.min,
+                                children: [
+                                  Icon(Icons.train, size: 14, color: iconColor),
+                                  const SizedBox(width: 4),
+                                  Text(
+                                    label,
+                                    style: textTheme.labelSmall?.copyWith(
+                                      color: textTheme.bodySmall?.color
+                                          ?.withValues(alpha: 0.85),
+                                    ),
+                                  ),
+                                ],
+                              );
+                            }).toList(),
+                          ),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+        const SizedBox(width: 12),
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.end,
+          children: [
+            Text(
+              '${leg.mileage.toStringAsFixed(1)} mi',
+              style: textTheme.labelLarge?.copyWith(
+                fontWeight: FontWeight.w800,
+              ),
+            ),
+          ],
+        ),
       ],
     );
   }
 
-  Widget _buildCard(
+  Widget _panel(
     BuildContext context, {
+    required IconData icon,
     required String title,
     required Widget child,
     Widget? trailing,
@@ -238,29 +465,29 @@ class _DashboardState extends State<Dashboard> {
     return Card(
       clipBehavior: Clip.antiAlias,
       child: Padding(
-        padding: const EdgeInsets.all(16),
+        padding: const EdgeInsets.all(16.0),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
             Row(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                Text(
-                  title,
-                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                    fontWeight: FontWeight.w700,
+                Icon(icon, size: 20),
+                const SizedBox(width: 8),
+                Expanded(
+                  child: Text(
+                    title,
+                    style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                      fontWeight: FontWeight.w800,
+                    ),
                   ),
                 ),
-                Row(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    if (action != null) action,
-                    if (trailing != null) ...[
-                      const SizedBox(width: 8),
-                      trailing,
-                    ],
-                  ],
-                ),
+                if (action != null)
+                  Padding(
+                    padding: const EdgeInsets.only(right: 8.0),
+                    child: action,
+                  ),
+                if (trailing != null) trailing,
               ],
             ),
             const SizedBox(height: 12),
@@ -271,72 +498,15 @@ class _DashboardState extends State<Dashboard> {
     );
   }
 
-  Widget _buildLegList(
-    BuildContext context,
-    List<Leg> legs, {
-    required String emptyMessage,
-    bool showAll = false,
-  }) {
-    final filtered = legs
-        .where((leg) => leg.beginTime.year != DateTime.now().year)
-        .toList();
-    if (filtered.isEmpty) {
-      return Text(emptyMessage, style: Theme.of(context).textTheme.bodyMedium);
-    }
-    final toShow = showAll ? filtered : filtered.take(5).toList();
-    return Column(
-      children: toShow.map((leg) {
-        return ListTile(
-          dense: true,
-          contentPadding: EdgeInsets.zero,
-          leading: CircleAvatar(
-            backgroundColor: Theme.of(context).colorScheme.primaryContainer,
-            child: const Icon(Icons.train),
-          ),
-          title: Text('${leg.start} → ${leg.end}'),
-          subtitle: Text(_formatDate(leg.beginTime)),
-          trailing: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              Text('${leg.mileage.toStringAsFixed(1)} mi'),
-              if (leg.headcode.isNotEmpty)
-                Text(
-                  leg.headcode,
-                  style: Theme.of(context).textTheme.labelSmall?.copyWith(
-                    color: Theme.of(context).hintColor,
-                  ),
-                ),
-            ],
-          ),
-        );
-      }).toList(),
-    );
-  }
-
-  Widget _buildQuickCalcCard(BuildContext context) {
-    return _buildCard(
-      context,
-      title: 'Quick mileage calculator',
-      action: TextButton.icon(
-        onPressed: () => context.push('/calculator'),
-        icon: const Icon(Icons.open_in_new),
-        label: const Text('Open calculator'),
-      ),
-      child: Text(
-        'Jump into the route calculator to quickly total a journey before saving it.',
-        style: Theme.of(context).textTheme.bodyMedium,
-      ),
-    );
-  }
-
   Widget _buildTripsCard(BuildContext context, DataService data) {
     final tripsUnsorted = data.trips;
     List trips = [];
     if (tripsUnsorted.isNotEmpty) {
       trips = [...tripsUnsorted]..sort((a, b) => b.tripId.compareTo(a.tripId));
     }
-    return _buildCard(
+    return _panel(
       context,
+      icon: Icons.bookmark,
       title: 'Trips',
       action: TextButton(
         onPressed: () => context.push('/trips'),
@@ -348,20 +518,46 @@ class _DashboardState extends State<Dashboard> {
               style: Theme.of(context).textTheme.bodyMedium,
             )
           : Column(
-              children: trips.take(5).map((trip) {
-                return ListTile(
-                  contentPadding: EdgeInsets.zero,
-                  title: Text(trip.tripName),
-                  subtitle: Text('${trip.tripMileage.toStringAsFixed(1)} mi'),
-                  trailing: const Icon(Icons.chevron_right),
+              children: trips.take(6).map((trip) {
+                return Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 6.0),
+                  child: Row(
+                    children: [
+                      Container(
+                        width: 42,
+                        height: 42,
+                        decoration: BoxDecoration(
+                          color: Theme.of(context).colorScheme.primaryContainer,
+                          borderRadius: BorderRadius.circular(12),
+                        ),
+                        child: const Icon(Icons.book, size: 18),
+                      ),
+                      const SizedBox(width: 10),
+                      Expanded(
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text(
+                              trip.tripName,
+                              style: Theme.of(context).textTheme.titleSmall
+                                  ?.copyWith(fontWeight: FontWeight.w700),
+                            ),
+                            Text(
+                              '${trip.tripMileage.toStringAsFixed(1)} mi',
+                              style: Theme.of(context).textTheme.labelMedium,
+                            ),
+                          ],
+                        ),
+                      ),
+                    ],
+                  ),
                 );
               }).toList(),
             ),
     );
   }
 
-  String _formatDate(DateTime? dt) {
-    if (dt == null) return '';
-    return '${dt.year.toString().padLeft(4, '0')}-${dt.month.toString().padLeft(2, '0')}-${dt.day.toString().padLeft(2, '0')}';
+  String _formatTime(DateTime date) {
+    return DateFormat('HH:mm').format(date);
   }
 }

lib/components/pages/legs.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:mileograph_flutter/components/legs/leg_card.dart';
+import 'package:mileograph_flutter/objects/objects.dart';
 import 'package:mileograph_flutter/services/data_service.dart';
 import 'package:provider/provider.dart';
 
@@ -211,7 +212,7 @@ class _LegsPageState extends State<LegsPage> {
           else
             Column(
               children: [
-                ...legs.map((leg) => LegCard(leg: leg)),
+                ..._buildLegsWithDividers(context, legs),
                 const SizedBox(height: 8),
                 if (data.legsHasMore || data.isLegsLoading)
                   Align(
@@ -238,6 +239,58 @@ class _LegsPageState extends State<LegsPage> {
     );
   }
 
+  List<Widget> _buildLegsWithDividers(BuildContext context, List<Leg> legs) {
+    final widgets = <Widget>[];
+    String? currentDate;
+    double dayMileage = 0;
+    final dayLegs = <Leg>[];
+
+    void flushDay() {
+      final date = currentDate;
+      if (date == null) return;
+      widgets.add(
+        Padding(
+          padding: const EdgeInsets.symmetric(vertical: 8.0),
+          child: Row(
+            children: [
+              Expanded(
+                child: Text(
+                  date,
+                  style: Theme.of(context).textTheme.labelMedium?.copyWith(
+                        fontWeight: FontWeight.w700,
+                      ),
+                ),
+              ),
+              Text(
+                '${dayMileage.toStringAsFixed(1)} mi',
+                style: Theme.of(context).textTheme.labelMedium,
+              ),
+            ],
+          ),
+        ),
+      );
+      widgets.add(const Divider());
+      widgets.addAll(
+        dayLegs.map((leg) => LegCard(leg: leg, showDate: false)),
+      );
+      dayLegs.clear();
+    }
+
+    for (final leg in legs) {
+      final dateStr = _formatDate(leg.beginTime) ?? '';
+      if (currentDate != null && dateStr != currentDate) {
+        flushDay();
+        dayMileage = 0;
+      }
+      currentDate = dateStr;
+      dayLegs.add(leg);
+      dayMileage += leg.mileage;
+    }
+
+    flushDay();
+    return widgets;
+  }
+
   String? _formatDate(DateTime? date) {
     if (date == null) return null;
     return '${date.year.toString().padLeft(4, '0')}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}';

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,
-                            value: field.value,
-                            onChanged: (val) {
+                            entry: field,
+                            onChanged: (val, {String? unit}) {
                               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.value,
+    required this.entry,
     required this.onChanged,
   });
 
-  final EventField field;
-  final dynamic value;
-  final ValueChanged<dynamic> onChanged;
+  final _FieldEntry entry;
+  final void Function(dynamic value, {String? unit}) 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

@@ -443,53 +443,57 @@ class _ValueBlockMenu extends StatelessWidget {
       return _ValueBlockView(block: block);
     }
 
+    Future<void> showContextMenuAt(Offset globalPosition) async {
+      final overlay = Overlay.of(context);
+      final renderBox = overlay.context.findRenderObject() as RenderBox?;
+      if (renderBox == null) return;
+      // Translate from global screen coordinates into the overlay's local space
+      // so the menu appears where the gesture happened.
+      final localPosition = renderBox.globalToLocal(globalPosition);
+      final position = RelativeRect.fromRect(
+        Rect.fromLTWH(localPosition.dx, localPosition.dy, 1, 1),
+        Offset.zero & renderBox.size,
+      );
+
+      final action = await showMenu<_TimelineBlockAction>(
+        context: context,
+        position: position,
+        items: [
+          if (onEditEntry != null)
+            const PopupMenuItem(
+              value: _TimelineBlockAction.edit,
+              child: Text('Edit'),
+            ),
+          if (onDeleteEntry != null)
+            const PopupMenuItem(
+              value: _TimelineBlockAction.delete,
+              child: Text('Delete'),
+            ),
+        ],
+      );
+
+      final entry = block.entry;
+      if (action == null || entry == null) return;
+      switch (action) {
+        case _TimelineBlockAction.edit:
+          onEditEntry?.call(entry);
+          break;
+        case _TimelineBlockAction.delete:
+          onDeleteEntry?.call(entry);
+          break;
+      }
+    }
+
     return GestureDetector(
       behavior: HitTestBehavior.opaque,
       onLongPressStart: (details) async {
-        final overlay = Overlay.of(context);
-        final renderBox = overlay.context.findRenderObject() as RenderBox?;
-        if (renderBox == null) return;
         if (defaultTargetPlatform == TargetPlatform.android) {
           HapticFeedback.lightImpact();
         }
-        final anchor = details.globalPosition + const Offset(0, -8);
-        final position = RelativeRect.fromRect(
-          Rect.fromLTWH(
-            anchor.dx,
-            anchor.dy,
-            1,
-            1,
-          ),
-          Offset.zero & renderBox.size,
-        );
-
-        final action = await showMenu<_TimelineBlockAction>(
-          context: context,
-          position: position,
-          items: [
-            if (onEditEntry != null)
-              const PopupMenuItem(
-                value: _TimelineBlockAction.edit,
-                child: Text('Edit'),
-              ),
-            if (onDeleteEntry != null)
-              const PopupMenuItem(
-                value: _TimelineBlockAction.delete,
-                child: Text('Delete'),
-              ),
-          ],
-        );
-
-        final entry = block.entry;
-        if (action == null || entry == null) return;
-        switch (action) {
-          case _TimelineBlockAction.edit:
-            onEditEntry?.call(entry);
-            break;
-          case _TimelineBlockAction.delete:
-            onDeleteEntry?.call(entry);
-            break;
-        }
+        await showContextMenuAt(details.globalPosition);
+      },
+      onSecondaryTapDown: (details) async {
+        await showContextMenuAt(details.globalPosition);
       },
       child: _ValueBlockView(block: block),
     );
@@ -573,7 +577,7 @@ class _TimelineModel {
           _ValueSegment(
             start: start,
             end: end,
-            value: entry.valueLabel,
+            value: _formatValueWithUnits(entry),
             entry: entry,
           ),
         );
@@ -676,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;
@@ -738,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.dart

@@ -4,6 +4,7 @@ import 'dart:convert';
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:go_router/go_router.dart';
 import 'package:intl/intl.dart';
 import 'package:mileograph_flutter/components/calculator/calculator.dart';
 import 'package:mileograph_flutter/components/pages/traction.dart';

lib/components/pages/new_entry/new_entry_draft_logic.dart

@@ -84,6 +84,32 @@ extension _NewEntryDraftLogic on _NewEntryPageState {
     }
   }
 
+  Future<void> _saveDraftManually() async {
+    if (_savingDraft) return;
+    if (_formIsEmpty()) {
+      ScaffoldMessenger.maybeOf(context)?.showSnackBar(
+        const SnackBar(content: Text('Nothing to save yet.')),
+      );
+      return;
+    }
+    final hadDraft = _activeDraftId != null;
+    _setState(() => _savingDraft = true);
+    try {
+      await _saveDraftEntry(draftId: _activeDraftId);
+      if (!mounted) return;
+      ScaffoldMessenger.maybeOf(context)?.showSnackBar(
+        SnackBar(content: Text(hadDraft ? 'Draft updated' : 'Draft saved')),
+      );
+    } catch (e) {
+      if (!mounted) return;
+      ScaffoldMessenger.maybeOf(context)?.showSnackBar(
+        SnackBar(content: Text('Failed to save draft: $e')),
+      );
+    } finally {
+      if (mounted) _setState(() => _savingDraft = false);
+    }
+  }
+
   Future<void> _saveDraft() async {
     if (_restoringDraft || !_draftPersistenceEnabled) return;
     final prefs = await SharedPreferences.getInstance();
@@ -212,6 +238,7 @@ extension _NewEntryDraftLogic on _NewEntryPageState {
       if (includeTimestamp) "saved_at": DateTime.now().toIso8601String(),
       "mode": _useManualMileage ? 'manual' : 'auto',
       "payload": payload,
+      "mileageText": _mileageController.text.trim(),
       "routeResult": _routeResult == null
           ? null
           : {

lib/components/pages/new_entry/new_entry_page.dart

@@ -10,6 +10,7 @@ class NewEntryPage extends StatefulWidget {
 }
 
 class _NewEntryPageState extends State<NewEntryPage> {
+  late final NavigationGuardCallback _exitGuard;
   final _formKey = GlobalKey<FormState>();
   DateTime _selectedDate = DateTime.now();
   TimeOfDay _selectedTime = TimeOfDay.now();
@@ -26,6 +27,7 @@ class _NewEntryPageState extends State<NewEntryPage> {
   int? _selectedTripId;
   bool _restoringDraft = false;
   bool _loadingEdit = false;
+  bool _savingDraft = false;
   String? _loadError;
   Map<String, dynamic>? _lastSubmittedSnapshot;
   Map<String, dynamic>? _loadedDraftSnapshot;
@@ -40,13 +42,14 @@ class _NewEntryPageState extends State<NewEntryPage> {
   @override
   void initState() {
     super.initState();
-    NavigationGuard.register(_handleExitIntent);
+    _exitGuard = _handleExitIntent;
+    NavigationGuard.register(_exitGuard);
     // legacy single-draft auto-save listeners removed in favor of explicit multi-draft flow
     Future.microtask(() {
       if (!mounted) return;
       final data = context.read<DataService>();
       data.fetchClassList();
-      data.fetchTrips();
+      data.fetchTripOptions();
       if (_draftPersistenceEnabled) {
         _loadDraft();
       }
@@ -58,7 +61,7 @@ class _NewEntryPageState extends State<NewEntryPage> {
 
   @override
   void dispose() {
-    NavigationGuard.unregister(_handleExitIntent);
+    NavigationGuard.unregister(_exitGuard);
     _startController.dispose();
     _endController.dispose();
     _headcodeController.dispose();
@@ -144,20 +147,31 @@ class _NewEntryPageState extends State<NewEntryPage> {
       return;
     }
     if (result != null && result.isNotEmpty) {
-      final api = context.read<ApiService>();
-      final data = context.read<DataService>();
-      final messenger = ScaffoldMessenger.maybeOf(context);
-      try {
-        await api.put('/trips/new', {"trip_name": result});
-        await data.fetchTrips();
-        if (!context.mounted) return;
-        final trips = data.tripList;
-        final match = trips.firstWhere(
-          (t) => t.tripName == result,
-          orElse: () => trips.isNotEmpty
-              ? trips.first
-              : TripSummary(tripId: 0, tripName: result, tripMileage: 0),
-        );
+        final api = context.read<ApiService>();
+        final data = context.read<DataService>();
+        final messenger = ScaffoldMessenger.maybeOf(context);
+        try {
+          final encoded = Uri.encodeComponent(result);
+          final res = await api.put('/trips/new?trip_name=$encoded', {});
+          await data.fetchTripOptions();
+          if (!context.mounted) return;
+          final trips = data.tripList;
+        final apiTripId = res is Map ? res['trip_id'] as int? : null;
+        TripSummary match;
+        try {
+          match = trips.firstWhere(
+            (t) =>
+                (apiTripId != null && t.tripId == apiTripId) ||
+                t.tripName == result,
+          );
+        } catch (_) {
+          match = TripSummary(
+            tripId: apiTripId ?? 0,
+            tripName: result,
+            tripMileage: 0,
+          );
+          data.upsertTripSummary(match);
+        }
         setState(() => _selectedTripId = match.tripId);
         _saveDraft();
       } catch (e) {
@@ -174,9 +188,13 @@ class _NewEntryPageState extends State<NewEntryPage> {
   }
 
   Future<void> _openCalculator() async {
+    final initialStations = _routeResult?.inputRoute.isNotEmpty == true
+        ? _routeResult!.inputRoute
+        : (_routeResult?.calculatedRoute ?? const []);
     final result = await Navigator.of(context).push<RouteResult>(
       MaterialPageRoute(
         builder: (_) => _CalculatorPickerPage(
+          initialStations: initialStations.isEmpty ? null : initialStations,
           onResult: (res) => Navigator.of(context).pop(res),
         ),
       ),
@@ -371,6 +389,25 @@ class _NewEntryPageState extends State<NewEntryPage> {
                     icon: const Icon(Icons.list_alt, size: 16),
                     label: const Text('Drafts'),
                   ),
+                  const SizedBox(width: 12),
+                  TextButton.icon(
+                    style: TextButton.styleFrom(
+                      padding: EdgeInsets.zero,
+                      minimumSize: const Size(0, 36),
+                      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                    ),
+                    onPressed: _isEditing || _savingDraft || _submitting
+                        ? null
+                        : _saveDraftManually,
+                    icon: _savingDraft
+                        ? const SizedBox(
+                            width: 16,
+                            height: 16,
+                            child: CircularProgressIndicator(strokeWidth: 2),
+                          )
+                        : const Icon(Icons.save_alt, size: 16),
+                    label: Text(_savingDraft ? 'Saving...' : 'Save to drafts'),
+                  ),
                   const Spacer(),
                   TextButton.icon(
                     style: TextButton.styleFrom(
@@ -586,7 +623,12 @@ class _NewEntryPageState extends State<NewEntryPage> {
         if (didPop) return;
         final allow = await _handleExitIntent();
         if (allow && context.mounted) {
-          Navigator.of(context).maybePop();
+          final router = GoRouter.of(context);
+          if (router.canPop()) {
+            context.pop();
+          } else {
+            context.go('/');
+          }
         }
       },
       child: Scaffold(
@@ -597,7 +639,12 @@ class _NewEntryPageState extends State<NewEntryPage> {
                   onPressed: () async {
                     if (!await _handleExitIntent()) return;
                     if (!context.mounted) return;
-                    Navigator.of(context).maybePop();
+                    final router = GoRouter.of(context);
+                    if (router.canPop()) {
+                      context.pop();
+                    } else {
+                      context.go('/');
+                    }
                   },
                 ),
                 title: const Text('Edit entry'),

lib/components/pages/new_entry/new_entry_picker_pages.dart

@@ -1,8 +1,12 @@
 part of 'new_entry.dart';
 
 class _CalculatorPickerPage extends StatelessWidget {
-  const _CalculatorPickerPage({required this.onResult});
+  const _CalculatorPickerPage({
+    required this.onResult,
+    this.initialStations,
+  });
   final ValueChanged<RouteResult> onResult;
+  final List<String>? initialStations;
 
   @override
   Widget build(BuildContext context) {
@@ -14,8 +18,10 @@ class _CalculatorPickerPage extends StatelessWidget {
         ),
         title: const Text('Mileage calculator'),
       ),
-      body: RouteCalculator(onApplyRoute: onResult),
+      body: RouteCalculator(
+        onApplyRoute: onResult,
+        initialStations: initialStations,
+      ),
     );
   }
 }
-

lib/components/pages/new_entry/new_entry_submit_logic.dart

@@ -27,7 +27,8 @@ extension _NewEntrySubmitLogic on _NewEntryPageState {
     final fieldList = missing.join(', ');
     await showDialog<void>(
       context: context,
-      builder: (_) => AlertDialog(
+      useRootNavigator: false,
+      builder: (dialogCtx) => AlertDialog(
         title: const Text('Required field missing'),
         content: Text(
           missing.length == 1
@@ -36,7 +37,7 @@ extension _NewEntrySubmitLogic on _NewEntryPageState {
         ),
         actions: [
           TextButton(
-            onPressed: () => Navigator.of(context).pop(),
+            onPressed: () => Navigator.of(dialogCtx).pop(),
             child: const Text('OK'),
           ),
         ],
@@ -46,7 +47,9 @@ extension _NewEntrySubmitLogic on _NewEntryPageState {
   }
 
   Future<void> _submit() async {
-    if (!_formKey.currentState!.validate()) return;
+    final form = _formKey.currentState;
+    if (form == null) return;
+    if (!form.validate()) return;
     if (!await _validateRequiredFields()) return;
     final routeStations = _routeResult?.calculatedRoute ?? [];
     final startVal = _useManualMileage
@@ -125,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')),
@@ -208,6 +213,8 @@ extension _NewEntrySubmitLogic on _NewEntryPageState {
       _selectedTripId = null;
       _submitting = false;
       _activeDraftId = null;
+      _savingDraft = false;
+      _loadedDraftSnapshot = null;
     });
     if (clearDraft) {
       await _clearDraft();

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_number": item.loco!.number,
+        "loco_id": locoId,
         "alloc_pos": allocPos,
         "alloc_powering": item.powering ? 1 : 0,
       });

lib/components/pages/settings.dart

@@ -0,0 +1,213 @@
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:http/http.dart' as http;
+import 'package:mileograph_flutter/services/endpoint_service.dart';
+import 'package:mileograph_flutter/services/data_service.dart';
+import 'package:provider/provider.dart';
+
+class SettingsPage extends StatefulWidget {
+  const SettingsPage({super.key});
+
+  @override
+  State<SettingsPage> createState() => _SettingsPageState();
+}
+
+class _SettingsPageState extends State<SettingsPage> {
+  late final TextEditingController _endpointController;
+  bool _saving = false;
+
+  @override
+  void initState() {
+    super.initState();
+    final endpoint = context.read<EndpointService>().baseUrl;
+    _endpointController = TextEditingController(text: endpoint);
+  }
+
+  @override
+  void dispose() {
+    _endpointController.dispose();
+    super.dispose();
+  }
+
+  Future<String?> _probeVersion(String url) async {
+    try {
+      var uri = Uri.parse(url.trim());
+      if (uri.scheme.isEmpty) {
+        uri = Uri.parse('https://$url');
+      }
+      // Probe the provided API endpoint as-is.
+      final target = uri;
+      final res = await http.get(target).timeout(const Duration(seconds: 10));
+      debugPrint(
+        'Endpoint probe ${target.toString()} -> ${res.statusCode} ${res.body}',
+      );
+      if (res.statusCode < 200 || res.statusCode >= 300) return null;
+      final body = res.body.trim();
+      debugPrint('Endpoint probe body: $body');
+      // Try JSON first
+      String? version;
+      try {
+        final parsed = jsonDecode(body);
+        debugPrint('Endpoint probe parsed: $parsed');
+        if (parsed is Map && parsed['version'] is String) {
+          version = parsed['version'] as String;
+        } else if (parsed is String) {
+          final candidate = parsed.trim().replaceAll('"', '');
+          if (RegExp(r'^\d+\.\d+\.\d+$').hasMatch(candidate)) {
+            version = candidate;
+          }
+        }
+      } catch (_) {
+        // fall back to raw body parsing
+      }
+      version ??= body.split(RegExp(r'\s+')).firstWhere(
+        (part) => RegExp(r'^\d+\.\d+\.\d+$').hasMatch(part),
+        orElse: () => '',
+      );
+      if (version.isEmpty) return null;
+      final isValid = RegExp(r'^\d+\.\d+\.\d+$').hasMatch(version);
+      return isValid ? version : null;
+    } catch (_) {
+      return null;
+    }
+  }
+
+  Future<void> _save() async {
+    final endpointService = context.read<EndpointService>();
+    final dataService = context.read<DataService>();
+    final messenger = ScaffoldMessenger.of(context);
+    final value = _endpointController.text.trim();
+    if (value.isEmpty) {
+      messenger.showSnackBar(
+        const SnackBar(content: Text('Please enter an endpoint URL.')),
+      );
+      return;
+    }
+    setState(() => _saving = true);
+    try {
+      final version = await _probeVersion(value);
+      if (version == null) {
+        if (mounted) {
+          messenger.showSnackBar(
+            const SnackBar(
+              content: Text('Endpoint test failed: no valid version returned.'),
+            ),
+          );
+        }
+        return;
+      }
+      await endpointService.setBaseUrl(value);
+      if (mounted) {
+        messenger.showSnackBar(
+          SnackBar(content: Text('Endpoint set to "$value" ($version)')),
+        );
+        await Future.wait([
+          dataService.fetchHomepageStats(),
+          dataService.fetchOnThisDay(),
+          dataService.fetchTrips(),
+          dataService.fetchHadTraction(),
+          dataService.fetchLatestLocoChanges(),
+          dataService.fetchLegs(),
+        ]);
+      }
+    } catch (e) {
+      if (mounted) {
+        messenger.showSnackBar(
+          SnackBar(content: Text('Failed to save endpoint: $e')),
+        );
+      }
+    } finally {
+      if (mounted) {
+        setState(() => _saving = false);
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final endpointService = context.watch<EndpointService>();
+    if (!endpointService.isLoaded) {
+      return const Scaffold(
+        body: Center(child: CircularProgressIndicator()),
+      );
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Settings'),
+        leading: IconButton(
+          icon: const Icon(Icons.arrow_back),
+          onPressed: () {
+            final navigator = Navigator.of(context);
+            if (navigator.canPop()) {
+              navigator.pop();
+            } else {
+              context.go('/');
+            }
+          },
+        ),
+      ),
+      body: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              'API endpoint',
+              style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                    fontWeight: FontWeight.w700,
+                  ),
+            ),
+            const SizedBox(height: 8),
+            Text(
+              'Set the base URL for the Mileograph API. Leave blank to use the default.',
+              style: Theme.of(context).textTheme.bodySmall,
+            ),
+            const SizedBox(height: 16),
+            TextField(
+              controller: _endpointController,
+              decoration: const InputDecoration(
+                labelText: 'Endpoint URL',
+                hintText: 'https://mileograph.co.uk/api/v1',
+                border: OutlineInputBorder(),
+              ),
+            ),
+            const SizedBox(height: 16),
+            Row(
+              children: [
+                FilledButton.icon(
+                  onPressed: _saving ? null : _save,
+                  icon: _saving
+                      ? const SizedBox(
+                          width: 18,
+                          height: 18,
+                          child: CircularProgressIndicator(strokeWidth: 2),
+                        )
+                      : const Icon(Icons.save),
+                  label: const Text('Save endpoint'),
+                ),
+                const SizedBox(width: 12),
+                TextButton(
+                  onPressed: _saving
+                      ? null
+                      : () {
+                          _endpointController.text =
+                              EndpointService.defaultBaseUrl;
+                        },
+                  child: const Text('Reset to default'),
+                ),
+              ],
+            ),
+            const SizedBox(height: 12),
+            Text(
+              'Current: ${endpointService.baseUrl}',
+              style: Theme.of(context).textTheme.labelSmall,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/components/pages/traction/traction.dart

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

lib/components/pages/trips.dart

@@ -26,6 +26,55 @@ class _TripsPageState extends State<TripsPage> {
     await context.read<DataService>().fetchTripDetails();
   }
 
+  Future<void> _renameTrip(TripDetail trip, String newName) async {
+    final data = context.read<DataService>();
+    final api = data.api;
+    final messenger = ScaffoldMessenger.maybeOf(context);
+    try {
+      await api.post('/trips/rename', {
+        "trip_id": trip.id,
+        "trip_name": newName,
+      });
+      await Future.wait([
+        data.fetchTripDetails(),
+        data.fetchTrips(),
+      ]);
+    } catch (e) {
+      messenger?.showSnackBar(
+        SnackBar(content: Text('Failed to rename trip: $e')),
+      );
+      rethrow;
+    }
+  }
+
+  Future<String?> _promptTripName(BuildContext context, String initial) async {
+    final controller = TextEditingController(text: initial);
+    final newName = await showDialog<String>(
+      context: context,
+      builder: (dialogCtx) => AlertDialog(
+        title: const Text('Rename trip'),
+        content: TextField(
+          controller: controller,
+          decoration: const InputDecoration(labelText: 'Trip name'),
+          autofocus: true,
+        ),
+        actions: [
+          TextButton(
+            onPressed: () => Navigator.of(dialogCtx).pop(),
+            child: const Text('Cancel'),
+          ),
+          TextButton(
+            onPressed: () =>
+                Navigator.of(dialogCtx).pop(controller.text.trim()),
+            child: const Text('Save'),
+          ),
+        ],
+      ),
+    );
+    controller.dispose();
+    return newName;
+  }
+
   @override
   Widget build(BuildContext context) {
     final data = context.watch<DataService>();
@@ -218,52 +267,153 @@ class _TripsPageState extends State<TripsPage> {
       context: context,
       isScrollControlled: true,
       builder: (_) {
-        return SafeArea(
-          child: Padding(
-            padding: const EdgeInsets.all(16.0),
-            child: Column(
-              mainAxisSize: MainAxisSize.min,
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Row(
-                  children: [
-                    IconButton(
-                      icon: const Icon(Icons.arrow_back),
-                      onPressed: () => Navigator.of(context).pop(),
+        bool renaming = false;
+        bool deleting = false;
+        String tripName = trip.name;
+        return StatefulBuilder(
+          builder: (sheetCtx, setSheetState) {
+            Future<void> handleRename() async {
+              final newName =
+                  await _promptTripName(sheetCtx, tripName) ?? tripName;
+              if (newName.isEmpty || newName == tripName) return;
+              setSheetState(() => renaming = true);
+              try {
+                await _renameTrip(trip, newName);
+                tripName = newName;
+                setSheetState(() {});
+              } finally {
+                if (mounted) setSheetState(() => renaming = false);
+              }
+            }
+
+            Future<void> handleDelete() async {
+              if (deleting || trip.legs.isNotEmpty) return;
+              final data = context.read<DataService>();
+              final api = data.api;
+              final messenger = ScaffoldMessenger.maybeOf(sheetCtx);
+              final navigator = Navigator.of(sheetCtx);
+
+              final ok = await showDialog<bool>(
+                context: sheetCtx,
+                builder: (ctx) {
+                  return AlertDialog(
+                    title: const Text('Delete trip?'),
+                    content: Text(
+                      'This will delete "${trip.name}". This cannot be undone.',
                     ),
-                    Text(
-                      trip.name,
-                      style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                        fontWeight: FontWeight.bold,
+                    actions: [
+                      TextButton(
+                        onPressed: () => Navigator.of(ctx).pop(false),
+                        child: const Text('Cancel'),
+                      ),
+                      FilledButton(
+                        onPressed: () => Navigator.of(ctx).pop(true),
+                        child: const Text('Delete'),
+                      ),
+                    ],
+                  );
+                },
+              );
+              if (ok != true || !mounted) return;
+
+              setSheetState(() => deleting = true);
+              try {
+                await api.delete('/trips/delete/${trip.id}');
+                await Future.wait([
+                  data.fetchTripDetails(),
+                  data.fetchTrips(),
+                ]);
+                if (!mounted) return;
+                messenger?.showSnackBar(
+                  SnackBar(content: Text('Deleted "${trip.name}"')),
+                );
+                navigator.pop();
+              } catch (e) {
+                if (!mounted) return;
+                messenger?.showSnackBar(
+                  SnackBar(content: Text('Failed to delete trip: $e')),
+                );
+              } finally {
+                if (mounted) setSheetState(() => deleting = false);
+              }
+            }
+
+            return SafeArea(
+              child: Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      children: [
+                        IconButton(
+                          icon: const Icon(Icons.arrow_back),
+                          onPressed: () => Navigator.of(sheetCtx).pop(),
+                        ),
+                        Expanded(
+                          child: Text(
+                            tripName,
+                            style: Theme.of(context).textTheme.titleMedium
+                                ?.copyWith(fontWeight: FontWeight.bold),
+                          ),
+                        ),
+                        IconButton(
+                          icon: renaming
+                              ? const SizedBox(
+                                  width: 18,
+                                  height: 18,
+                                  child:
+                                      CircularProgressIndicator(strokeWidth: 2),
+                                )
+                              : const Icon(Icons.edit),
+                          tooltip: 'Rename trip',
+                          onPressed: renaming ? null : handleRename,
+                        ),
+                        if (trip.legs.isEmpty) ...[
+                          const SizedBox(width: 4),
+                          IconButton(
+                            icon: deleting
+                                ? const SizedBox(
+                                    width: 18,
+                                    height: 18,
+                                    child: CircularProgressIndicator(strokeWidth: 2),
+                                  )
+                                : const Icon(Icons.delete_outline),
+                            tooltip: 'Delete trip',
+                            onPressed: deleting ? null : handleDelete,
+                            color: Theme.of(context).colorScheme.error,
+                          ),
+                        ],
+                        const SizedBox(width: 4),
+                        Text('${trip.mileage.toStringAsFixed(1)} mi'),
+                      ],
+                    ),
+                    const SizedBox(height: 8),
+                    SizedBox(
+                      height: MediaQuery.of(context).size.height * 0.6,
+                      child: ListView.builder(
+                        itemCount: trip.legs.length,
+                        itemBuilder: (context, index) {
+                          final leg = trip.legs[index];
+                          return ListTile(
+                            leading: const Icon(Icons.train),
+                            title: Text('${leg.start} → ${leg.end}'),
+                            subtitle: Text(_formatDate(leg.beginTime)),
+                            trailing: Text(
+                              leg.mileage?.toStringAsFixed(1) ?? '-',
+                              style: Theme.of(context).textTheme.labelLarge
+                                  ?.copyWith(fontWeight: FontWeight.bold),
+                            ),
+                          );
+                        },
                       ),
                     ),
-                    const Spacer(),
-                    Text('${trip.mileage.toStringAsFixed(1)} mi'),
                   ],
                 ),
-                const SizedBox(height: 8),
-                SizedBox(
-                  height: MediaQuery.of(context).size.height * 0.6,
-                  child: ListView.builder(
-                    itemCount: trip.legs.length,
-                    itemBuilder: (context, index) {
-                      final leg = trip.legs[index];
-                      return ListTile(
-                        leading: const Icon(Icons.train),
-                        title: Text('${leg.start} → ${leg.end}'),
-                        subtitle: Text(_formatDate(leg.beginTime)),
-                        trailing: Text(
-                          leg.mileage?.toStringAsFixed(1) ?? '-',
-                          style: Theme.of(context).textTheme.labelLarge
-                              ?.copyWith(fontWeight: FontWeight.bold),
-                        ),
-                      );
-                    },
-                  ),
-                ),
-              ],
-            ),
-          ),
+              ),
+            );
+          },
         );
       },
     );

lib/components/traction/traction_card.dart

@@ -82,39 +82,68 @@ class TractionCard extends StatelessWidget {
               ],
             ),
             const SizedBox(height: 8),
-            Row(
-              children: [
-                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) ...[
-                  const SizedBox(width: 8),
+            LayoutBuilder(
+              builder: (context, constraints) {
+                final isNarrow = constraints.maxWidth < 520;
+                final buttons = [
                   TextButton.icon(
-                    onPressed: onOpenLegs,
-                    icon: const Icon(Icons.view_list),
-                    label: const Text('Legs'),
+                    onPressed: onShowInfo,
+                    icon: const Icon(Icons.info_outline),
+                    label: const Text('Details'),
                   ),
-                ],
-                const Spacer(),
-                if (selectionMode && onToggleSelect != null)
                   TextButton.icon(
-                    onPressed: onToggleSelect,
-                    icon: Icon(
-                      isSelected
-                          ? Icons.remove_circle_outline
-                          : Icons.add_circle_outline,
+                    onPressed: onOpenTimeline,
+                    icon: const Icon(Icons.timeline),
+                    label: const Text('Timeline'),
+                  ),
+                  if (hasMileageOrTrips && onOpenLegs != null)
+                    TextButton.icon(
+                      onPressed: onOpenLegs,
+                      icon: const Icon(Icons.view_list),
+                      label: const Text('Legs'),
                     ),
-                    label: Text(isSelected ? 'Remove' : 'Add to entry'),
-                  ),
-              ],
+                ];
+
+                final addButton = selectionMode && onToggleSelect != null
+                    ? TextButton.icon(
+                        onPressed: onToggleSelect,
+                        icon: Icon(
+                          isSelected
+                              ? Icons.remove_circle_outline
+                              : 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/objects/objects.dart

@@ -1,11 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 
-int _asInt(dynamic value, [int fallback = 0]) {
+int _asInt(dynamic value, [int? fallback]) {
   if (value is int) return value;
   if (value is num) return value.toInt();
   final parsed = int.tryParse(value?.toString() ?? '');
-  return parsed ?? fallback;
+  return parsed ?? fallback ?? 0;
 }
 
 double _asDouble(dynamic value, [double fallback = 0]) {
@@ -20,6 +20,15 @@ String _asString(dynamic value, [String fallback = '']) {
   return (str == null) ? fallback : str;
 }
 
+bool _asBool(dynamic value, [bool fallback = false]) {
+  if (value is bool) return value;
+  if (value is num) return value != 0;
+  final lower = value?.toString().toLowerCase();
+  if (lower == 'true' || lower == 'yes' || lower == '1') return true;
+  if (lower == 'false' || lower == 'no' || lower == '0') return false;
+  return fallback;
+}
+
 DateTime _asDateTime(dynamic value, [DateTime? fallback]) {
   if (value is DateTime) return value;
   final parsed = DateTime.tryParse(value?.toString() ?? '');
@@ -67,6 +76,7 @@ class HomepageStats {
   final List<LocoSummary> topLocos;
   final List<LeaderboardEntry> leaderboard;
   final List<TripSummary> trips;
+  final int legCount;
   final UserData? user;
 
   HomepageStats({
@@ -75,6 +85,7 @@ class HomepageStats {
     required this.topLocos,
     required this.leaderboard,
     required this.trips,
+    required this.legCount,
     this.user,
   });
 
@@ -98,6 +109,10 @@ class HomepageStats {
       trips: (json['trip_data'] as List? ?? [])
           .map((e) => TripSummary.fromJson(e))
           .toList(),
+      legCount: _asInt(
+        json['leg_count'],
+        (json['trip_legs'] as List?)?.length ?? 0,
+      ),
       user: userData == null
           ? null
           : UserData(
@@ -126,6 +141,7 @@ class Loco {
   final int id;
   final String type, number, locoClass;
   final String? name, operator, notes, evn;
+  final bool powering;
 
   Loco({
     required this.id,
@@ -136,6 +152,7 @@ class Loco {
     required this.operator,
     this.notes,
     this.evn,
+    this.powering = true,
   });
 
   factory Loco.fromJson(Map<String, dynamic> json) => Loco(
@@ -147,6 +164,7 @@ class Loco {
     operator: json['operator'],
     notes: json['notes'],
     evn: json['evn'],
+    powering: _asBool(json['alloc_powering'] ?? json['powering'], true),
   );
 }
 
@@ -179,6 +197,7 @@ class LocoSummary extends Loco {
     this.livery,
     this.location,
     Map<String, dynamic>? extra,
+    super.powering = true,
   }) : extra = extra ?? const {},
        super(
          id: locoId,
@@ -213,6 +232,7 @@ class LocoSummary extends Loco {
     livery: json['livery'],
     location: json['location'],
     extra: Map<String, dynamic>.from(json),
+    powering: _asBool(json['alloc_powering'] ?? json['powering'], true),
   );
 }
 
@@ -353,6 +373,96 @@ class LocoAttrVersion {
   }
 }
 
+class LocoChange {
+  final int locoId;
+  final String locoClass;
+  final String locoNumber;
+  final String locoName;
+  final String attrCode;
+  final String attrDisplay;
+  final String valueDisplay;
+  final DateTime? validFrom;
+  final DateTime? approvedAt;
+  final String approvedBy;
+
+  const LocoChange({
+    required this.locoId,
+    required this.locoClass,
+    required this.locoNumber,
+    required this.locoName,
+    required this.attrCode,
+    required this.attrDisplay,
+    required this.valueDisplay,
+    required this.validFrom,
+    required this.approvedAt,
+    required this.approvedBy,
+  });
+
+  factory LocoChange.fromJson(Map<String, dynamic> json) {
+    String cleanValue(dynamic value) {
+      final str = value?.toString().trim() ?? '';
+      if (str.isEmpty || str == '-' || str == '?') return '';
+      return str;
+    }
+
+    final valueLabel = json['value_norm'] ??
+        json['value_display'] ??
+        json['value_label'] ??
+        json['value_str'] ??
+        json['value_enum'] ??
+        json['value_norm'] ??
+        json['value'];
+    final approvedRaw = json['approved_at'] ?? json['approvedAt'];
+    final validFromRaw = json['valid_from'] ?? json['validFrom'];
+    return LocoChange(
+      locoId: _asInt(json['loco_id']),
+      locoClass: cleanValue(json['loco_class']),
+      locoNumber: cleanValue(json['loco_number']),
+      locoName: cleanValue(json['loco_name']),
+      attrCode: _asString(json['attr_code']),
+      attrDisplay: cleanValue(json['attr_display']),
+      valueDisplay: cleanValue(valueLabel),
+      validFrom: DateTime.tryParse(validFromRaw?.toString() ?? ''),
+      approvedAt: DateTime.tryParse(approvedRaw?.toString() ?? ''),
+      approvedBy: cleanValue(json['approved_by']),
+    );
+  }
+
+  String get locoLabel {
+    final parts = [locoClass, locoNumber]
+        .map((e) => e.trim())
+        .where((e) => e.isNotEmpty && e != '-')
+        .toList();
+    final label = parts.join(' ');
+    if (label.isEmpty) return locoName.isNotEmpty ? locoName : 'Loco $locoId';
+    return locoName.trim().isEmpty ? label : '$label — ${locoName.trim()}';
+  }
+
+  String get changeLabel =>
+      _cleanLabel(attrDisplay).isNotEmpty
+          ? _cleanLabel(attrDisplay)
+          : _cleanLabel(attrCode).toUpperCase();
+
+  String get approvedDateLabel {
+    final date = approvedAt ?? validFrom;
+    if (date == null) return 'Pending date';
+    return DateFormat('yyyy-MM-dd').format(date);
+  }
+
+  String get valueLabel {
+    final value = _cleanLabel(valueDisplay);
+    if (value.isNotEmpty) return value;
+    return 'Unknown value';
+  }
+
+  String _cleanLabel(String raw) {
+    final trimmed = raw.trim();
+    if (trimmed.isEmpty) return '';
+    if (trimmed == '-' || trimmed == '?') return '';
+    return trimmed;
+  }
+}
+
 class LeaderboardEntry {
   final String userId, username, userFullName;
   final double mileage;

lib/services/api_service.dart

@@ -5,17 +5,24 @@ typedef TokenProvider = String? Function();
 typedef UnauthorizedHandler = Future<void> Function();
 
 class ApiService {
-  final String baseUrl;
+  String _baseUrl;
   final http.Client _client;
   final Duration timeout;
   TokenProvider? _getToken;
   UnauthorizedHandler? _onUnauthorized;
 
   ApiService({
-    required this.baseUrl,
+    required String baseUrl,
     http.Client? client,
     this.timeout = const Duration(seconds: 30),
-  }) : _client = client ?? http.Client();
+  })  : _baseUrl = baseUrl,
+        _client = client ?? http.Client();
+
+  String get baseUrl => _baseUrl;
+
+  void setBaseUrl(String url) {
+    _baseUrl = url;
+  }
 
   void setTokenProvider(TokenProvider provider) {
     _getToken = provider;

lib/services/data_service/data_service_core.dart

@@ -44,6 +44,13 @@ class DataService extends ChangeNotifier {
   bool get isTractionLoading => _isTractionLoading;
   bool _tractionHasMore = false;
   bool get tractionHasMore => _tractionHasMore;
+  List<LocoChange> _latestLocoChanges = [];
+  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) =>
@@ -68,9 +75,14 @@ class DataService extends ChangeNotifier {
   bool get isEventFieldsLoading => _isEventFieldsLoading;
 
   // Station Data
-  List<Station>? _cachedStations;
-  DateTime? _stationsFetchedAt;
-  Future<List<Station>>? _stationsInFlight;
+  final Map<String, List<Station>> _stationCache = {};
+  final Map<String, Future<List<Station>>?> _stationInFlightByKey = {};
+  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 = [""];
 
@@ -148,7 +160,8 @@ class DataService extends ChangeNotifier {
       if (json is List) {
         final newLegs = json.map((e) => Leg.fromJson(e)).toList();
         _legs = append ? [..._legs, ...newLegs] : newLegs;
-        _legsHasMore = newLegs.length >= limit;
+        // Keep "load more" available as long as the server returns items; hide only on empty.
+        _legsHasMore = newLegs.isNotEmpty;
       } else {
         throw Exception('Unexpected legs response: $json');
       }
@@ -180,7 +193,7 @@ class DataService extends ChangeNotifier {
     final params =
         includeNonPowering ? '?include_non_powering=true' : '';
     try {
-      final json = await api.get('/legs/$locoId$params');
+      final json = await api.get('/legs/by-loco/$locoId$params');
       dynamic list = json;
       if (json is Map) {
         for (final key in ['legs', 'data', 'results']) {
@@ -209,22 +222,46 @@ class DataService extends ChangeNotifier {
     final target = date ?? DateTime.now();
     final formatted =
         "${target.year.toString().padLeft(4, '0')}-${target.month.toString().padLeft(2, '0')}-${target.day.toString().padLeft(2, '0')}";
+    final endpoint = '/legs/on-this-day?date=$formatted';
+    dynamic json;
+    Object? lastError;
+    for (int attempt = 0; attempt < 2; attempt++) {
+      try {
+        json = await api.get(endpoint);
+        lastError = null;
+        break;
+      } catch (e) {
+        lastError = e;
+        if (!_looksLikeOnThisDayRoutingConflict(e)) break;
+        await Future<void>.delayed(const Duration(milliseconds: 250));
+      }
+    }
+
     try {
-      final json = await api.get('/legs/on-this-day?date=$formatted');
       if (json is List) {
         _onThisDay = json.map((e) => Leg.fromJson(e)).toList();
       } else {
         _onThisDay = [];
       }
     } catch (e) {
-      debugPrint('Failed to fetch on-this-day legs: $e');
+      lastError ??= e;
       _onThisDay = [];
     } finally {
+      if (lastError != null) {
+        debugPrint('Failed to fetch on-this-day legs ($endpoint): $lastError');
+      }
       _isOnThisDayLoading = false;
       _notifyAsync();
     }
   }
 
+  bool _looksLikeOnThisDayRoutingConflict(Object error) {
+    final msg = error.toString();
+    return msg.contains('API error 422') &&
+        msg.contains('[path, loco_id]') &&
+        msg.contains('input: on-this-day');
+  }
+
   Future<void> fetchEventFields({bool force = false}) async {
     if (_eventFields.isNotEmpty && !force) return;
     _isEventFieldsLoading = true;
@@ -316,6 +353,8 @@ class DataService extends ChangeNotifier {
     _eventFields = [];
     _locoTimelines.clear();
     _isLocoTimelineLoading.clear();
+    _latestLocoChanges = [];
+    _isLatestLocoChangesLoading = false;
     _notifyAsync();
   }
 
@@ -334,37 +373,75 @@ class DataService extends ChangeNotifier {
         0;
   }
 
-  Future<List<Station>> fetchStations() async {
+  Future<void> fetchStationFilters() async {
     final now = DateTime.now();
-
-    // If cache exists and is less than 30 minutes old, return it
-    if (_cachedStations != null &&
-        _stationsFetchedAt != null &&
-        now.difference(_stationsFetchedAt!) < Duration(minutes: 30)) {
-      return _cachedStations!;
+    if (_stationFiltersFetchedAt != null &&
+        now.difference(_stationFiltersFetchedAt!) < const Duration(minutes: 30) &&
+        _stationNetworks.isNotEmpty) {
+      return;
     }
+    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;
-        _stationsFetchedAt = now;
+        _stationCache[key] = parsed;
         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

@@ -114,5 +114,69 @@ extension DataServiceTraction on DataService {
     }
     return _locoClasses;
   }
-}
 
+  Future<void> fetchLatestLocoChanges({
+    int limit = 100,
+    int offset = 0,
+    bool append = false,
+  }) async {
+    _isLatestLocoChangesLoading = true;
+    _notifyAsync();
+    try {
+      final json =
+          await api.get('/loco/changes/latest?limit=$limit&offset=$offset');
+      dynamic results = json;
+      if (json is Map && json['data'] is List) {
+        results = json['data'];
+      }
+      if (results is List) {
+        final parsed = <LocoChange>[];
+        for (final item in results) {
+          if (item is Map<String, dynamic>) {
+            parsed.add(LocoChange.fromJson(item));
+          } else if (item is Map) {
+            parsed.add(
+              LocoChange.fromJson(
+                item.map((key, value) => MapEntry(key.toString(), value)),
+              ),
+            );
+          }
+        }
+        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/services/data_service/data_service_trips.dart

@@ -83,5 +83,50 @@ extension DataServiceTrips on DataService {
       _notifyAsync();
     }
   }
-}
 
+  Future<void> fetchTripOptions() async {
+    try {
+      final json = await api.get('/trips');
+      Iterable<dynamic>? raw;
+      if (json is List) {
+        raw = json;
+      } else if (json is Map) {
+        for (final key in ['trips', 'trip_data', 'data']) {
+          final value = json[key];
+          if (value is List) {
+            raw = value;
+            break;
+          }
+        }
+      }
+      if (raw != null) {
+        final tripMap = raw
+            .whereType<Map<String, dynamic>>()
+            .map((e) => TripSummary.fromJson(e))
+            .toList();
+
+        _tripList = [...tripMap]..sort((a, b) => b.tripId.compareTo(a.tripId));
+      } else {
+        debugPrint('Unexpected trip list response: $json');
+        _tripList = [];
+      }
+    } catch (e) {
+      debugPrint('Failed to fetch trip list: $e');
+      _tripList = [];
+    } finally {
+      _notifyAsync();
+    }
+  }
+
+  void upsertTripSummary(TripSummary trip) {
+    final existingIndex =
+        _tripList.indexWhere((element) => element.tripId == trip.tripId);
+    if (existingIndex >= 0) {
+      _tripList[existingIndex] = trip;
+    } else {
+      _tripList = [trip, ..._tripList];
+    }
+    _tripList.sort((a, b) => b.tripId.compareTo(a.tripId));
+    _notifyAsync();
+  }
+}

lib/services/endpoint_service.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/foundation.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+
+class EndpointService extends ChangeNotifier {
+  EndpointService() {
+    _load();
+  }
+
+  static const String defaultBaseUrl = 'https://mileograph.co.uk/api/v1';
+  static const String _prefsKey = 'api_base_url';
+
+  String _baseUrl = defaultBaseUrl;
+  bool _loaded = false;
+
+  String get baseUrl => _baseUrl;
+  bool get isLoaded => _loaded;
+
+  Future<void> _load() async {
+    final prefs = await SharedPreferences.getInstance();
+    final saved = prefs.getString(_prefsKey);
+    if (saved != null && saved.trim().isNotEmpty) {
+      _baseUrl = saved;
+    }
+    _loaded = true;
+    notifyListeners();
+  }
+
+  Future<void> setBaseUrl(String url) async {
+    final trimmed = url.trim();
+    if (trimmed.isEmpty) return;
+    _baseUrl = trimmed;
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_prefsKey, _baseUrl);
+    notifyListeners();
+  }
+}

lib/services/navigation_guard.dart

@@ -7,9 +7,10 @@ class NavigationGuard {
     _callback = callback;
   }
 
-  static void unregister(NavigationGuardCallback callback) {
-    if (_callback == callback) {
+  static void unregister([NavigationGuardCallback? callback]) {
+    if (callback == null || identical(_callback, callback)) {
       _callback = null;
+      _promptActive = false;
     }
   }
 

lib/ui/app_shell.dart

@@ -1,5 +1,7 @@
 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';
 import 'package:mileograph_flutter/components/login/login.dart';
 import 'package:mileograph_flutter/components/pages/calculator.dart';
@@ -10,6 +12,7 @@ import 'package:mileograph_flutter/components/pages/loco_legs.dart';
 import 'package:mileograph_flutter/components/pages/loco_timeline.dart';
 import 'package:mileograph_flutter/components/pages/new_entry.dart';
 import 'package:mileograph_flutter/components/pages/new_traction.dart';
+import 'package:mileograph_flutter/components/pages/settings.dart';
 import 'package:mileograph_flutter/components/pages/traction.dart';
 import 'package:mileograph_flutter/components/pages/trips.dart';
 import 'package:mileograph_flutter/services/authservice.dart';
@@ -17,6 +20,43 @@ import 'package:mileograph_flutter/services/data_service.dart';
 import 'package:mileograph_flutter/services/navigation_guard.dart';
 import 'package:provider/provider.dart';
 
+final GlobalKey<NavigatorState> _shellNavigatorKey = GlobalKey<NavigatorState>();
+
+const List<String> _contentPages = [
+  "/",
+  "/calculator",
+  "/legs",
+  "/traction",
+  "/trips",
+  "/add",
+];
+
+const int _addTabIndex = 5;
+
+class _NavItem {
+  final String label;
+  final IconData icon;
+  const _NavItem(this.label, this.icon);
+}
+
+const List<_NavItem> _navItems = [
+  _NavItem("Home", Icons.home),
+  _NavItem("Calculator", Icons.route),
+  _NavItem("Entries", Icons.list),
+  _NavItem("Traction", Icons.train),
+  _NavItem("Trips", Icons.book),
+  _NavItem("Add", Icons.add),
+];
+
+int tabIndexForPath(String path) {
+  final newIndex = _contentPages.indexWhere((routePath) {
+    if (path == routePath) return true;
+    if (routePath == '/') return path == '/';
+    return path.startsWith('$routePath/');
+  });
+  return newIndex < 0 ? 0 : newIndex;
+}
+
 class MyApp extends StatefulWidget {
   const MyApp({super.key});
 
@@ -45,13 +85,15 @@ 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;
       },
       routes: [
         ShellRoute(
+          navigatorKey: _shellNavigatorKey,
           builder: (context, state, child) => MyHomePage(child: child),
           routes: [
             GoRoute(path: '/', builder: (context, state) => const Dashboard()),
@@ -118,6 +160,10 @@ class _MyAppState extends State<MyApp> {
           ],
         ),
         GoRoute(path: '/login', builder: (context, state) => const LoginScreen()),
+        GoRoute(
+          path: '/settings',
+          builder: (context, state) => const SettingsPage(),
+        ),
       ],
     );
   }
@@ -144,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});
@@ -153,26 +207,7 @@ class MyHomePage extends StatefulWidget {
 }
 
 class _MyHomePageState extends State<MyHomePage> {
-  final List<String> contentPages = [
-    "/",
-    "/calculator",
-    "/legs",
-    "/traction",
-    "/trips",
-    "/add",
-  ];
-
-  int _getIndexFromLocation(String location) {
-    int newIndex = contentPages.indexWhere((path) {
-      if (location == path) return true;
-      if (path == '/') return location == '/';
-      return location.startsWith('$path/');
-    });
-    if (newIndex < 0) {
-      return 0;
-    }
-    return newIndex;
-  }
+  List<String> get contentPages => _contentPages;
 
   Future<void> _onItemTapped(int index, int currentIndex) async {
     if (index < 0 || index >= contentPages.length || index == currentIndex) {
@@ -180,10 +215,15 @@ class _MyHomePageState extends State<MyHomePage> {
     }
     await NavigationGuard.attemptNavigation(() async {
       if (!mounted) return;
-      context.go(contentPages[index]);
+      _navigateToIndex(index);
     });
   }
 
+  final List<int> _history = [];
+  int _historyPosition = -1;
+  final List<int> _forwardHistory = [];
+  bool _suppressRecord = false;
+
   bool _fetched = false;
 
   @override
@@ -209,6 +249,9 @@ class _MyHomePageState extends State<MyHomePage> {
         if (data.traction.isEmpty) {
           data.fetchHadTraction();
         }
+        if (data.latestLocoChanges.isEmpty) {
+          data.fetchLatestLocoChanges();
+        }
         if (data.onThisDay.isEmpty) {
           data.fetchOnThisDay();
         }
@@ -221,8 +264,12 @@ class _MyHomePageState extends State<MyHomePage> {
 
   @override
   Widget build(BuildContext context) {
-    final location = GoRouterState.of(context).uri.toString();
-    final pageIndex = _getIndexFromLocation(location);
+    final uri = GoRouterState.of(context).uri;
+    final pageIndex = tabIndexForPath(uri.path);
+    _syncHistory(pageIndex);
+    if (pageIndex != _addTabIndex) {
+      NavigationGuard.unregister();
+    }
     final homepageReady = context.select<DataService, bool>(
       (data) => data.homepageStats != null || !data.isHomepageLoading,
     );
@@ -232,42 +279,227 @@ class _MyHomePageState extends State<MyHomePage> {
         ? widget.child
         : const Center(child: CircularProgressIndicator());
 
-    return Scaffold(
-      appBar: AppBar(
-        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        title: Text.rich(
-          TextSpan(
-            children: const [
-              TextSpan(text: "Mile"),
-              TextSpan(text: "O", style: TextStyle(color: Colors.red)),
-              TextSpan(text: "graph"),
+    final scaffold = LayoutBuilder(
+      builder: (context, constraints) {
+        final isWide = constraints.maxWidth >= 900;
+        final railExtended = constraints.maxWidth >= 1400;
+        final navRailDestinations = _navItems
+            .map(
+              (item) => NavigationRailDestination(
+                icon: Icon(item.icon),
+                label: Text(item.label),
+              ),
+            )
+            .toList();
+        final navBarDestinations = _navItems
+            .map(
+              (item) => NavigationDestination(
+                icon: Icon(item.icon),
+                label: item.label,
+              ),
+            )
+            .toList();
+
+        return Scaffold(
+          appBar: AppBar(
+            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+            title: Text.rich(
+              TextSpan(
+                children: const [
+                  TextSpan(text: "Mile"),
+                  TextSpan(text: "O", style: TextStyle(color: Colors.red)),
+                  TextSpan(text: "graph"),
+                ],
+                style: const TextStyle(
+                  decoration: TextDecoration.none,
+                  color: Colors.white,
+                  fontFamily: "Tomatoes",
+                ),
+              ),
+            ),
+            actions: [
+              const IconButton(
+                onPressed: null,
+                icon: Icon(Icons.account_circle),
+              ),
+              IconButton(
+                tooltip: 'Settings',
+                onPressed: () => context.go('/settings'),
+                icon: const Icon(Icons.settings),
+              ),
+              IconButton(onPressed: auth.logout, icon: const Icon(Icons.logout)),
             ],
-            style: const TextStyle(
-              decoration: TextDecoration.none,
-              color: Colors.white,
-              fontFamily: "Tomatoes",
+          ),
+          bottomNavigationBar: isWide
+              ? null
+              : NavigationBar(
+                  selectedIndex: pageIndex,
+                  onDestinationSelected: (int index) =>
+                      _onItemTapped(index, pageIndex),
+                  destinations: navBarDestinations,
+                ),
+          body: isWide
+              ? Row(
+                  children: [
+                    SafeArea(
+                      child: NavigationRail(
+                        selectedIndex: pageIndex,
+                        extended: railExtended,
+                        labelType: railExtended
+                            ? NavigationRailLabelType.none
+                            : NavigationRailLabelType.selected,
+                        onDestinationSelected: (int index) =>
+                            _onItemTapped(index, pageIndex),
+                        destinations: navRailDestinations,
+                      ),
+                    ),
+                    const VerticalDivider(width: 1),
+                    Expanded(child: currentPage),
+                  ],
+                )
+              : 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,
             ),
           ),
         ),
-        actions: [
-          const IconButton(onPressed: null, icon: Icon(Icons.account_circle)),
-          IconButton(onPressed: auth.logout, icon: const Icon(Icons.logout)),
-        ],
       ),
-      bottomNavigationBar: NavigationBar(
-        selectedIndex: pageIndex,
-        onDestinationSelected: (int index) => _onItemTapped(index, pageIndex),
-        destinations: const [
-          NavigationDestination(icon: Icon(Icons.home), label: "Home"),
-          NavigationDestination(icon: Icon(Icons.route), label: "Calculator"),
-          NavigationDestination(icon: Icon(Icons.list), label: "Entries"),
-          NavigationDestination(icon: Icon(Icons.train), label: "Traction"),
-          NavigationDestination(icon: Icon(Icons.book), label: "Trips"),
-          NavigationDestination(icon: Icon(Icons.add), label: "Add"),
-        ],
-      ),
-      body: currentPage,
     );
   }
-}
 
+  void _handlePointerButtons(PointerDownEvent event) {
+    // Support mouse back/forward buttons.
+    if (event.buttons == kBackMouseButton) {
+      _handleBackNavigation(allowExit: false, recordForward: true);
+    } else if (event.buttons == kForwardMouseButton) {
+      _handleForwardNavigation();
+    }
+  }
+
+  int get _currentPageIndex => tabIndexForPath(GoRouterState.of(context).uri.path);
+
+  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;
+    }
+
+    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.2.3+1
+version: 0.3.4+1
 
 environment:
   sdk: ^3.8.1

test/app_shell_test.dart

@@ -0,0 +1,20 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mileograph_flutter/ui/app_shell.dart';
+
+void main() {
+  test('tabIndexForPath maps nested routes', () {
+    expect(tabIndexForPath('/'), 0);
+    expect(tabIndexForPath('/calculator'), 1);
+    expect(tabIndexForPath('/calculator/details'), 1);
+    expect(tabIndexForPath('/legs'), 2);
+    expect(tabIndexForPath('/traction/12/timeline'), 3);
+    expect(tabIndexForPath('/trips'), 4);
+    expect(tabIndexForPath('/add'), 5);
+  });
+
+  test('tabIndexForPath ignores query when parsing uri', () {
+    expect(tabIndexForPath(Uri.parse('/trips?sort=desc').path), 4);
+    expect(tabIndexForPath(Uri.parse('/calculator/details?x=1').path), 1);
+  });
+}
+