major refactor

.gitea/workflows/release.yml

@@ -0,0 +1,354 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - master
+      - dev
+
+env:
+  JAVA_VERSION: "17"
+  ANDROID_SDK_ROOT: "${{ github.workspace }}/android-sdk"
+  FLUTTER_VERSION: "3.38.5"
+  BUILD_WINDOWS: "false" # set to "true" when you actually want Windows builds
+  GITEA_BASE_URL: https://git.tgj.services
+
+jobs:
+  meta:
+    runs-on:
+      - mileograph
+    outputs:
+      base_version: ${{ steps.meta.outputs.base }}
+      release_tag: ${{ steps.meta.outputs.release_tag }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Determine version
+        id: meta
+        run: |
+          RAW_VERSION=$(awk '/^version:/{print $2}' pubspec.yaml)
+          BASE_VERSION=${RAW_VERSION%%+*}
+          echo "base=${BASE_VERSION}" >> "$GITHUB_OUTPUT"
+          echo "release_tag=v${BASE_VERSION}" >> "$GITHUB_OUTPUT"
+
+  android-build:
+    runs-on:
+      - mileograph
+    needs: meta
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install OS deps (Android)
+        run: |
+          if command -v sudo >/dev/null 2>&1; then
+            SUDO="sudo"
+          else
+            SUDO=""
+          fi
+          $SUDO apt-get update
+          $SUDO apt-get install -y unzip xz-utils zip libstdc++6 liblzma-dev curl jq
+
+      - name: Setup Java
+        uses: actions/setup-java@v4
+        with:
+          distribution: temurin
+          java-version: ${{ env.JAVA_VERSION }}
+
+      - name: Install Android SDK
+        run: |
+          mkdir -p "$ANDROID_SDK_ROOT"/cmdline-tools
+          curl -fsSL https://dl.google.com/android/repository/commandlinetools-linux-11076708_latest.zip -o /tmp/cli-tools.zip
+          unzip -q /tmp/cli-tools.zip -d "$ANDROID_SDK_ROOT"/cmdline-tools
+          mv "$ANDROID_SDK_ROOT"/cmdline-tools/cmdline-tools "$ANDROID_SDK_ROOT"/cmdline-tools/latest
+
+          # Accept licences (ignore SIGPIPE exit 141)
+          yes | "$ANDROID_SDK_ROOT"/cmdline-tools/latest/bin/sdkmanager --sdk_root="$ANDROID_SDK_ROOT" --licenses || true
+
+          # Install required packages (also ignore SIGPIPE)
+          yes | "$ANDROID_SDK_ROOT"/cmdline-tools/latest/bin/sdkmanager --sdk_root="$ANDROID_SDK_ROOT" \
+            "platform-tools" "platforms;android-33" "build-tools;33.0.2" || true
+
+          echo "ANDROID_SDK_ROOT=$ANDROID_SDK_ROOT" >> "$GITHUB_ENV"
+          echo "$ANDROID_SDK_ROOT/platform-tools" >> "$GITHUB_PATH"
+          echo "$ANDROID_SDK_ROOT/build-tools/33.0.2" >> "$GITHUB_PATH"
+
+      - name: Install Flutter SDK
+        run: |
+          set -euo pipefail
+          FLUTTER_HOME="$HOME/flutter"
+          if [ ! -x "$FLUTTER_HOME/bin/flutter" ]; then
+            rm -rf "$FLUTTER_HOME"
+            curl -fsSL -o /tmp/flutter.tar.xz "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_${FLUTTER_VERSION}-stable.tar.xz"
+            tar -C "$HOME" -xf /tmp/flutter.tar.xz
+          fi
+          echo "$FLUTTER_HOME/bin" >> "$GITHUB_PATH"
+          "$FLUTTER_HOME/bin/flutter" --version
+
+      - name: Allow all git directories (CI)
+        run: git config --global --add safe.directory '*'
+
+      - name: Set pub cache path
+        run: echo "PUB_CACHE=${GITHUB_WORKSPACE}/.pub-cache" >> "$GITHUB_ENV"
+
+      - name: Flutter dependencies
+        run: flutter pub get
+
+      - name: Prepare Android keystore (optional)
+        if: ${{ secrets.ANDROID_KEYSTORE_BASE64 != '' }}
+        run: |
+          echo "${{ secrets.ANDROID_KEYSTORE_BASE64 }}" | base64 -d > android-release-key.jks
+          echo "ANDROID_KEYSTORE_PATH=$PWD/android-release-key.jks" >> "$GITHUB_ENV"
+          echo "ANDROID_KEYSTORE_PASSWORD=${{ secrets.ANDROID_KEYSTORE_PASSWORD }}" >> "$GITHUB_ENV"
+          echo "ANDROID_KEY_ALIAS=${{ secrets.ANDROID_KEY_ALIAS }}" >> "$GITHUB_ENV"
+          echo "ANDROID_KEY_PASSWORD=${{ secrets.ANDROID_KEY_PASSWORD }}" >> "$GITHUB_ENV"
+
+      - name: Build Android App Bundle (release)
+        run: flutter build appbundle --release
+
+      - name: Download bundletool
+        run: |
+          BUNDLETOOL_VERSION=1.15.6
+          curl -fsSL -o bundletool.jar "https://github.com/google/bundletool/releases/download/${BUNDLETOOL_VERSION}/bundletool-all-${BUNDLETOOL_VERSION}.jar"
+
+      - name: Extract universal APK from bundle
+        env:
+          BASE_VERSION: ${{ needs.meta.outputs.base_version }}
+        run: |
+          set -euo pipefail
+
+          BUNDLE="build/app/outputs/bundle/release/app-release.aab"
+          OUTPUT_APKS="app-release.apks"
+          APK_NAME="mileograph-${BASE_VERSION}.apk"
+
+          if [ ! -f "$BUNDLE" ]; then
+            echo "Bundle not found at $BUNDLE"
+            exit 1
+          fi
+
+          SIGNING_ARGS=()
+          if [ -n "${ANDROID_KEYSTORE_PATH:-}" ] && [ -f "$ANDROID_KEYSTORE_PATH" ]; then
+            SIGNING_ARGS+=(--ks="$ANDROID_KEYSTORE_PATH")
+            SIGNING_ARGS+=(--ks-pass="pass:${ANDROID_KEYSTORE_PASSWORD}")
+            SIGNING_ARGS+=(--ks-key-alias="${ANDROID_KEY_ALIAS}")
+            KEY_PASS="${ANDROID_KEY_PASSWORD:-$ANDROID_KEYSTORE_PASSWORD}"
+            SIGNING_ARGS+=(--key-pass="pass:${KEY_PASS}")
+          else
+            echo "No release keystore provided; bundletool will sign with the debug keystore."
+          fi
+
+          java -jar bundletool.jar build-apks \
+            --bundle="$BUNDLE" \
+            --output="$OUTPUT_APKS" \
+            --mode=universal \
+            "${SIGNING_ARGS[@]}"
+
+          unzip -p "$OUTPUT_APKS" universal.apk > "$APK_NAME"
+          ls -lh "$APK_NAME"
+
+      - name: Upload Android APK artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: android-apk
+          path: mileograph-${{ needs.meta.outputs.base_version }}.apk
+
+  linux-build:
+    runs-on:
+      - mileograph
+    needs: meta
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install OS deps (Linux desktop)
+        run: |
+          if command -v sudo >/dev/null 2>&1; then
+            SUDO="sudo"
+          else
+            SUDO=""
+          fi
+          $SUDO apt-get update
+          $SUDO apt-get install -y unzip xz-utils zip libstdc++6 libglu1-mesa clang cmake ninja-build pkg-config libgtk-3-dev libsecret-1-dev liblzma-dev curl jq
+
+      - name: Install Flutter SDK
+        run: |
+          set -euo pipefail
+          FLUTTER_HOME="$HOME/flutter"
+          if [ ! -x "$FLUTTER_HOME/bin/flutter" ]; then
+            rm -rf "$FLUTTER_HOME"
+            curl -fsSL -o /tmp/flutter.tar.xz "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_${FLUTTER_VERSION}-stable.tar.xz"
+            tar -C "$HOME" -xf /tmp/flutter.tar.xz
+          fi
+          echo "$FLUTTER_HOME/bin" >> "$GITHUB_PATH"
+          "$FLUTTER_HOME/bin/flutter" --version
+
+      - name: Allow all git directories (CI)
+        run: git config --global --add safe.directory '*'
+
+      - name: Set pub cache path
+        run: echo "PUB_CACHE=${GITHUB_WORKSPACE}/.pub-cache" >> "$GITHUB_ENV"
+
+      - name: Flutter dependencies
+        run: flutter pub get
+
+      - name: Enable Linux desktop
+        run: flutter config --enable-linux-desktop
+
+      - name: Build Linux binary (release)
+        run: |
+          flutter build linux --release
+          tar -C build/linux/x64/release/bundle -czf app-linux-x64.tar.gz .
+
+      - name: Upload Linux artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: linux-bundle
+          path: app-linux-x64.tar.gz
+
+  release-dev:
+    runs-on:
+      - mileograph
+    needs:
+      - meta
+      - android-build
+      - linux-build
+    steps:
+      - name: Install jq
+        run: |
+          if command -v sudo >/dev/null 2>&1; then
+            SUDO="sudo"
+          else
+            SUDO=""
+          fi
+          $SUDO apt-get update
+          $SUDO apt-get install -y jq
+      - name: Download Android APK
+        if: ${{ github.ref == 'refs/heads/dev' }}
+        uses: actions/download-artifact@v3
+        with:
+          name: android-apk
+          path: artifacts
+
+      - name: Prepare APK and tag
+        if: ${{ github.ref == 'refs/heads/dev' }}
+        id: bundle
+        run: |
+          BASE="${{ needs.meta.outputs.base_version }}"
+          TAG="v${BASE}-dev"
+
+          mv "artifacts/mileograph-${BASE}.apk" "artifacts/mileograph-${BASE}-dev.apk"
+
+          echo "tag=${TAG}" >> "$GITHUB_OUTPUT"
+          echo "apk=artifacts/mileograph-${BASE}-dev.apk" >> "$GITHUB_OUTPUT"
+
+      - name: Create prerelease on Gitea
+        if: ${{ github.ref == 'refs/heads/dev' }}
+        uses: ncipollo/release-action@v1
+        with:
+          tag: ${{ steps.bundle.outputs.tag }}
+          name: ${{ steps.bundle.outputs.tag }}
+          prerelease: true
+          commit: ${{ github.sha }}
+          token: ${{ secrets.GITEA_TOKEN }}
+          # NOTE: no `artifacts:` here
+
+      - name: Attach APK to Gitea release
+        if: ${{ github.ref == 'refs/heads/dev' }}
+        run: |
+          set -euo pipefail
+
+          TAG="${{ steps.bundle.outputs.tag }}"
+          APK="${{ steps.bundle.outputs.apk }}"
+
+          # 1. Find release ID by tag
+          RELEASE_JSON=$(curl -sS \
+            -H "Authorization: token ${{ secrets.GITEA_TOKEN }}" \
+            "${GITEA_BASE_URL}/api/v1/repos/${{ github.repository }}/releases/tags/${TAG}")
+
+          RELEASE_ID=$(echo "$RELEASE_JSON" | jq -r '.id')
+
+          echo "Release ID: $RELEASE_ID"
+
+          # 2. Upload APK with multipart/form-data
+          NAME=$(basename "$APK")
+          echo "Uploading $NAME"
+
+          curl -sS -X POST \
+            -H "Authorization: token ${{ secrets.GITEA_TOKEN }}" \
+            -F "attachment=@${APK}" \
+            -F "name=${NAME}" \
+            "${GITEA_BASE_URL}/api/v1/repos/${{ github.repository }}/releases/${RELEASE_ID}/assets" \
+            >/dev/null
+
+  release-master:
+    runs-on:
+      - mileograph
+    needs:
+      - meta
+      - android-build
+      - linux-build
+    steps:
+      - name: Install jq
+        run: |
+          if command -v sudo >/dev/null 2>&1; then
+            SUDO="sudo"
+          else
+            SUDO=""
+          fi
+          $SUDO apt-get update
+          $SUDO apt-get install -y jq
+      - name: Download Android APK
+        if: ${{ github.ref == 'refs/heads/master' }}
+        uses: actions/download-artifact@v3
+        with:
+          name: android-apk
+          path: artifacts
+
+      - name: Prepare APK and tag
+        if: ${{ github.ref == 'refs/heads/master' }}
+        id: bundle
+        run: |
+          BASE="${{ needs.meta.outputs.base_version }}"
+          TAG="${{ needs.meta.outputs.release_tag }}"
+
+          echo "tag=${TAG}" >> "$GITHUB_OUTPUT"
+          echo "apk=artifacts/mileograph-${BASE}.apk" >> "$GITHUB_OUTPUT"
+
+      - name: Create release on Gitea
+        if: ${{ github.ref == 'refs/heads/master' }}
+        uses: ncipollo/release-action@v1
+        with:
+          tag: ${{ steps.bundle.outputs.tag }}
+          name: ${{ steps.bundle.outputs.tag }}
+          prerelease: false
+          token: ${{ secrets.GITEA_TOKEN }}
+          commit: ${{ github.sha }}
+
+      - name: Attach APK to Gitea release
+        if: ${{ github.ref == 'refs/heads/master' }}
+        run: |
+          set -euo pipefail
+
+          TAG="${{ steps.bundle.outputs.tag }}"
+          APK="${{ steps.bundle.outputs.apk }}"
+
+          # 1. Find release ID by tag
+          RELEASE_JSON=$(curl -sS \
+            -H "Authorization: token ${{ secrets.GITEA_TOKEN }}" \
+            "${GITEA_BASE_URL}/api/v1/repos/${{ github.repository }}/releases/tags/${TAG}")
+
+          RELEASE_ID=$(echo "$RELEASE_JSON" | jq -r '.id')
+
+          echo "Release ID: $RELEASE_ID"
+
+          # 2. Upload APK with multipart/form-data
+          NAME=$(basename "$APK")
+          echo "Uploading $NAME"
+
+          curl -sS -X POST \
+            -H "Authorization: token ${{ secrets.GITEA_TOKEN }}" \
+            -F "attachment=@${APK}" \
+            -F "name=${NAME}" \
+            "${GITEA_BASE_URL}/api/v1/repos/${{ github.repository }}/releases/${RELEASE_ID}/assets" \
+            >/dev/null

.gitignore

@@ -43,3 +43,5 @@ app.*.map.json
 /android/app/debug
 /android/app/profile
 /android/app/release
+
+api_return_examples.txt

android/app/build.gradle.kts

@@ -1,3 +1,5 @@
+import java.util.Properties
+
 plugins {
     id("com.android.application")
     id("kotlin-android")
@@ -5,6 +7,28 @@ plugins {
     id("dev.flutter.flutter-gradle-plugin")
 }
 
+val keystoreProperties = Properties()
+val keystorePropertiesFile = rootProject.file("key.properties")
+if (keystorePropertiesFile.exists()) {
+    keystorePropertiesFile.inputStream().use { keystoreProperties.load(it) }
+}
+
+val releaseStoreFile = System.getenv("ANDROID_KEYSTORE_PATH")
+    ?: keystoreProperties.getProperty("storeFile")
+val releaseStorePassword = System.getenv("ANDROID_KEYSTORE_PASSWORD")
+    ?: keystoreProperties.getProperty("storePassword")
+val releaseKeyAlias = System.getenv("ANDROID_KEY_ALIAS")
+    ?: keystoreProperties.getProperty("keyAlias")
+val releaseKeyPassword = System.getenv("ANDROID_KEY_PASSWORD")
+    ?: keystoreProperties.getProperty("keyPassword")
+
+val hasReleaseKeystore = listOf(
+    releaseStoreFile,
+    releaseStorePassword,
+    releaseKeyAlias,
+    releaseKeyPassword
+).all { !it.isNullOrBlank() }
+
 android {
     namespace = "com.example.mileograph_flutter"
     compileSdk = flutter.compileSdkVersion
@@ -30,11 +54,21 @@ android {
         versionName = flutter.versionName
     }
 
+    signingConfigs {
+        if (hasReleaseKeystore) {
+            create("release") {
+                storeFile = file(releaseStoreFile!!)
+                storePassword = releaseStorePassword
+                keyAlias = releaseKeyAlias!!
+                keyPassword = releaseKeyPassword
+            }
+        }
+    }
+
     buildTypes {
         release {
-            // TODO: Add your own signing config for the release build.
+            // Use a real release keystore when provided; fall back to debug keys otherwise.
-            // Signing with the debug keys for now, so `flutter run --release` works.
+            signingConfig = signingConfigs.getByName(if (hasReleaseKeystore) "release" else "debug")
-            signingConfig = signingConfigs.getByName("debug")
         }
     }
 }

android/app/src/main/AndroidManifest.xml

@@ -1,7 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
     <uses-permission android:name="android.permission.INTERNET"/>
     <application
-        android:label="mileograph_flutter"
+        android:label="Mileograph"
         android:name="${applicationName}"
         android:icon="@mipmap/ic_launcher">
         <activity

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <background android:drawable="@color/ic_launcher_background"/>
+  <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/values/colors.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#ffffff</color>
+</resources>

ios/Runner.xcodeproj/project.pbxproj

@@ -427,7 +427,7 @@
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
-				ASSETCATALOG_COMPILER_GENERATE_SWIFT_ASSET_SYMBOL_EXTENSIONS = YES;
+				ASSETCATALOG_COMPILER_GENERATE_SWIFT_ASSET_SYMBOL_EXTENSIONS = AppIcon;
 				CLANG_ANALYZER_NONNULL = YES;
 				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
 				CLANG_CXX_LIBRARY = "libc++";
@@ -484,7 +484,7 @@
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
-				ASSETCATALOG_COMPILER_GENERATE_SWIFT_ASSET_SYMBOL_EXTENSIONS = YES;
+				ASSETCATALOG_COMPILER_GENERATE_SWIFT_ASSET_SYMBOL_EXTENSIONS = AppIcon;
 				CLANG_ANALYZER_NONNULL = YES;
 				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
 				CLANG_CXX_LIBRARY = "libc++";

lib/components/calculator/calculator.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:mileograph_flutter/objects/objects.dart';
-import 'package:mileograph_flutter/services/apiService.dart';
+import 'package:mileograph_flutter/services/api_service.dart';
-import 'package:mileograph_flutter/services/dataService.dart';
+import 'package:mileograph_flutter/services/data_service.dart';
-import './routeSummaryWidget.dart';
+import './route_summary_widget.dart';
 
 class StationAutocomplete extends StatefulWidget {
   const StationAutocomplete({
@@ -97,7 +97,16 @@ class _StationAutocompleteState extends State<StationAutocomplete> {
 }
 
 class RouteCalculator extends StatefulWidget {
-  const RouteCalculator({super.key});
+  const RouteCalculator({
+    super.key,
+    this.onDistanceComputed,
+    this.onApplyRoute,
+    this.initialStations,
+  });
+
+  final ValueChanged<double>? onDistanceComputed;
+  final ValueChanged<RouteResult>? onApplyRoute;
+  final List<String>? initialStations;
 
   @override
   State<RouteCalculator> createState() => _RouteCalculatorState();
@@ -119,6 +128,9 @@ class _RouteCalculatorState extends State<RouteCalculator> {
     super.didChangeDependencies();
     if (!_fetched) {
       _fetched = true;
+      if (widget.initialStations != null && widget.initialStations!.isNotEmpty) {
+        context.read<DataService>().stations = List.from(widget.initialStations!);
+      }
       WidgetsBinding.instance.addPostFrameCallback((_) async {
         final data = context.read<DataService>();
         final result = await data.fetchStations();
@@ -143,11 +155,11 @@ class _RouteCalculatorState extends State<RouteCalculator> {
       setState(() {
         _routeResult = RouteResult.fromJson(res);
       });
+      final distance = (_routeResult?.distance ?? 0);
+      widget.onDistanceComputed?.call(distance);
     } else {
       setState(() {
-        _errorMessage =
+        _errorMessage = RouteError.fromJson(res["error_obj"][0]).msg;
-            RouteError.fromJson(res["error_obj"][0]).msg ??
-            'Unknown error occurred';
       });
     }
   }
@@ -248,11 +260,21 @@ class _RouteCalculatorState extends State<RouteCalculator> {
               style: TextStyle(color: Theme.of(context).colorScheme.error),
             ),
           )
-        else if (_routeResult != null)
+        else if (_routeResult != null) ...[
           RouteSummaryWidget(
             distance: _routeResult!.distance,
             onDetailsPressed: () => setState(() => _showDetails = true),
-          )
+          ),
+          if (widget.onApplyRoute != null)
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16.0),
+              child: ElevatedButton.icon(
+                onPressed: () => widget.onApplyRoute!(_routeResult!),
+                icon: const Icon(Icons.check),
+                label: const Text('Apply to entry'),
+              ),
+            ),
+        ]
         else
           SizedBox.shrink(),
         const SizedBox(height: 10),

lib/components/dashboard/leaderboard_panel.dart

@@ -1,11 +1,21 @@
 import 'package:flutter/material.dart';
-import 'package:mileograph_flutter/services/dataService.dart';
+import 'package:mileograph_flutter/services/data_service.dart';
 
 import 'package:provider/provider.dart';
 
 class LeaderboardPanel extends StatelessWidget {
+  const LeaderboardPanel({super.key});
+
+  @override
   Widget build(BuildContext context) {
     final data = context.watch<DataService>();
+    final leaderboard = data.homepageStats?.leaderboard ?? [];
+    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(
@@ -20,19 +30,23 @@ class LeaderboardPanel extends StatelessWidget {
                 decoration: TextDecoration.underline,
               ),
             ),
-            Column(
+            if (leaderboard.isEmpty)
-              children: List.generate(
+              const Padding(
-                data.homepageStats?.leaderboard.length ?? 0,
+                padding: EdgeInsets.all(16.0),
-                (index) {
+                child: Text('No leaderboard data yet'),
-                  final leaderboardEntry =
+              )
-                      data.homepageStats!.leaderboard[index];
+            else
-                  return Container(
+              Column(
-                    width: double.infinity,
+                children: List.generate(
-                    child: Container(
+                  leaderboard.length,
-                      margin: EdgeInsets.symmetric(horizontal: 0, vertical: 8),
+                  (index) {
+                    final leaderboardEntry = leaderboard[index];
+                    return Container(
+                      width: double.infinity,
+                      margin: const EdgeInsets.symmetric(
+                          horizontal: 0, vertical: 8),
                       child: Padding(
-                        padding: EdgeInsets.all(8),
+                        padding: const EdgeInsets.all(8),
-
                         child: Row(
                           mainAxisAlignment: MainAxisAlignment.spaceBetween,
                           children: [
@@ -41,12 +55,12 @@ class LeaderboardPanel extends StatelessWidget {
                                 children: [
                                   TextSpan(
                                     text: '${index + 1}. ',
-                                    style: TextStyle(
+                                    style: const TextStyle(
                                       fontWeight: FontWeight.bold,
                                     ),
                                   ),
                                   TextSpan(
-                                    text: '${leaderboardEntry.userFullName}',
+                                    text: leaderboardEntry.userFullName,
                                   ),
                                 ],
                               ),
@@ -57,11 +71,10 @@ class LeaderboardPanel extends StatelessWidget {
                           ],
                         ),
                       ),
-                    ),
+                    );
-                  );
+                  },
-                },
+                ),
               ),
-            ),
           ],
         ),
       ),

lib/components/dashboard/top_traction_panel.dart

@@ -1,11 +1,22 @@
 import 'package:flutter/material.dart';
-import 'package:mileograph_flutter/services/dataService.dart';
+import 'package:mileograph_flutter/services/data_service.dart';
 
 import 'package:provider/provider.dart';
 
 class TopTractionPanel extends StatelessWidget {
+  const TopTractionPanel({super.key});
+
+  @override
   Widget build(BuildContext context) {
     final data = context.watch<DataService>();
+    final stats = data.homepageStats;
+    final locos = stats?.topLocos ?? [];
+    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(
@@ -20,18 +31,23 @@ class TopTractionPanel extends StatelessWidget {
                 decoration: TextDecoration.underline,
               ),
             ),
-            Column(
+            if (locos.isEmpty)
-              children: List.generate(
+              const Padding(
-                data.homepageStats?.topLocos.length ?? 0,
+                padding: EdgeInsets.all(16.0),
-                (index) {
+                child: Text('No traction data yet'),
-                  final loco = data.homepageStats!.topLocos[index];
+              )
-                  return Container(
+            else
-                    width: double.infinity,
+              Column(
-                    child: Container(
+                children: List.generate(
-                      margin: EdgeInsets.symmetric(horizontal: 0, vertical: 8),
+                  locos.length,
+                  (index) {
+                    final loco = locos[index];
+                    return Container(
+                      width: double.infinity,
+                      margin:
+                          const EdgeInsets.symmetric(horizontal: 0, vertical: 8),
                       child: Padding(
-                        padding: EdgeInsets.all(8),
+                        padding: const EdgeInsets.all(8),
-
                         child: Row(
                           mainAxisAlignment: MainAxisAlignment.spaceBetween,
                           children: [
@@ -43,7 +59,7 @@ class TopTractionPanel extends StatelessWidget {
                                     children: [
                                       TextSpan(
                                         text: '${index + 1}. ',
-                                        style: TextStyle(
+                                        style: const TextStyle(
                                           fontWeight: FontWeight.bold,
                                         ),
                                       ),
@@ -55,8 +71,9 @@ class TopTractionPanel extends StatelessWidget {
                                   ),
                                 ),
                                 Text(
-                                  '${loco.name}',
+                                  loco.name ?? '',
-                                  style: TextStyle(fontStyle: FontStyle.italic),
+                                  style:
+                                      const TextStyle(fontStyle: FontStyle.italic),
                                 ),
                               ],
                             ),
@@ -64,11 +81,10 @@ class TopTractionPanel extends StatelessWidget {
                           ],
                         ),
                       ),
-                    ),
+                    );
-                  );
+                  },
-                },
+                ),
               ),
-            ),
           ],
         ),
       ),

lib/components/login/login.dart

@@ -1,10 +1,37 @@
 import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
 import 'package:mileograph_flutter/services/authservice.dart';
 import 'package:provider/provider.dart';
 
-class LoginScreen extends StatelessWidget {
+class LoginScreen extends StatefulWidget {
   const LoginScreen({super.key});
 
+  @override
+  State<LoginScreen> createState() => _LoginScreenState();
+}
+
+class _LoginScreenState extends State<LoginScreen> {
+  bool _checkingSession = true;
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) => _checkExistingSession());
+  }
+
+  Future<void> _checkExistingSession() async {
+    final auth = context.read<AuthService>();
+    try {
+      final valid = await auth.validateStoredToken();
+      if (!valid) return;
+      await auth.tryRestoreSession();
+      if (!mounted) return;
+      context.go('/');
+    } finally {
+      if (mounted) setState(() => _checkingSession = false);
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -13,7 +40,6 @@ class LoginScreen extends StatelessWidget {
         color: Theme.of(context).scaffoldBackgroundColor,
         child: Center(
           child: Column(
-            spacing: 50,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Text.rich(
@@ -25,7 +51,7 @@ class LoginScreen extends StatelessWidget {
                         color: Theme.of(context).textTheme.bodyLarge?.color,
                       ),
                     ),
-                    TextSpan(
+                    const TextSpan(
                       text: "O",
                       style: TextStyle(color: Colors.red),
                     ),
@@ -36,7 +62,7 @@ class LoginScreen extends StatelessWidget {
                       ),
                     ),
                   ],
-                  style: TextStyle(
+                  style: const TextStyle(
                     decoration: TextDecoration.none,
                     color: Colors.white,
                     fontFamily: "Tomatoes",
@@ -44,7 +70,17 @@ class LoginScreen extends StatelessWidget {
                   ),
                 ),
               ),
-              LoginPanel(),
+              if (_checkingSession)
+                const Padding(
+                  padding: EdgeInsets.only(top: 12),
+                  child: SizedBox(
+                    height: 24,
+                    width: 24,
+                    child: CircularProgressIndicator(strokeWidth: 2),
+                  ),
+                ),
+              const SizedBox(height: 50),
+              const LoginPanel(),
             ],
           ),
         ),
@@ -115,7 +151,7 @@ class _LoginPanelContentState extends State<LoginPanelContent> {
 
   bool _loggingIn = false;
 
-  void login() async {
+  Future<void> login() async {
     final username = _usernameController.text;
     final password = _passwordController.text;
 
@@ -126,19 +162,18 @@ class _LoginPanelContentState extends State<LoginPanelContent> {
     });
     try {
       await auth.login(username, password);
-      print('Login successful');
+      if (!mounted) return;
       setState(() {
         _loggingIn = false;
       });
     } catch (e) {
-      // Handle error
+      if (!mounted) return;
-      print('Login failed: $e');
       setState(() {
         _loggingIn = false;
       });
-      ScaffoldMessenger.of(
+      ScaffoldMessenger.of(context).showSnackBar(
-        context,
+        SnackBar(content: Text('Login failed: $e')),
-      ).showSnackBar(SnackBar(content: Text('Login failed')));
+      );
     }
   }
 
@@ -163,7 +198,6 @@ class _LoginPanelContentState extends State<LoginPanelContent> {
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
       mainAxisSize: MainAxisSize.min,
-      spacing: 8,
       children: [
         Padding(
           padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 50),
@@ -172,6 +206,7 @@ class _LoginPanelContentState extends State<LoginPanelContent> {
             style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
           ),
         ),
+        const SizedBox(height: 8),
         TextFormField(
           controller: _usernameController,
           decoration: InputDecoration(
@@ -180,6 +215,7 @@ class _LoginPanelContentState extends State<LoginPanelContent> {
           ),
           onFieldSubmitted: (_) => login(),
         ),
+        const SizedBox(height: 8),
         TextFormField(
           controller: _passwordController,
           obscureText: true,
@@ -189,11 +225,12 @@ class _LoginPanelContentState extends State<LoginPanelContent> {
           ),
           onFieldSubmitted: (_) => login(),
         ),
+        const SizedBox(height: 12),
         Row(
           mainAxisAlignment: MainAxisAlignment.center,
-          spacing: 10,
           children: [
             FilledButton(onPressed: login, child: loginButtonContent),
+            const SizedBox(width: 10),
             ElevatedButton(
               onPressed: widget.registerCb,
               child: Text("Register"),
@@ -205,7 +242,7 @@ class _LoginPanelContentState extends State<LoginPanelContent> {
   }
 }
 
-class RegisterPanelContent extends StatelessWidget {
+class RegisterPanelContent extends StatefulWidget {
   const RegisterPanelContent({
     super.key,
     required this.onBack,
@@ -213,20 +250,64 @@ class RegisterPanelContent extends StatelessWidget {
   });
   final VoidCallback onBack;
   final AuthService authService;
-  void register() {}
+  @override
+  State<RegisterPanelContent> createState() => _RegisterPanelContentState();
+}
+
+class _RegisterPanelContentState extends State<RegisterPanelContent> {
+  final _usernameController = TextEditingController();
+  final _displayNameController = TextEditingController();
+  final _emailController = TextEditingController();
+  final _passwordController = TextEditingController();
+  final _inviteController = TextEditingController();
+  bool _registering = false;
+
+  @override
+  void dispose() {
+    _usernameController.dispose();
+    _displayNameController.dispose();
+    _emailController.dispose();
+    _passwordController.dispose();
+    _inviteController.dispose();
+    super.dispose();
+  }
+
+  Future<void> _register() async {
+    setState(() => _registering = true);
+    try {
+      await widget.authService.register(
+        username: _usernameController.text.trim(),
+        email: _emailController.text.trim(),
+        fullName: _displayNameController.text.trim(),
+        password: _passwordController.text,
+        inviteCode: _inviteController.text.trim(),
+      );
+      if (!mounted) return;
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(content: Text('Registration successful. Please log in.')),
+      );
+      widget.onBack();
+    } catch (e) {
+      if (!mounted) return;
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(content: Text('Registration failed: $e')),
+      );
+    } finally {
+      if (mounted) setState(() => _registering = false);
+    }
+  }
 
   @override
   Widget build(BuildContext context) {
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
       mainAxisSize: MainAxisSize.min,
-      spacing: 8,
       children: [
         Row(
           children: [
             IconButton(
-              icon: Icon(Icons.arrow_back),
+              icon: const Icon(Icons.arrow_back),
-              onPressed: onBack,
+              onPressed: widget.onBack,
               tooltip: 'Back to login',
             ),
             Expanded(
@@ -237,47 +318,64 @@ class RegisterPanelContent extends StatelessWidget {
                 ),
               ),
             ),
-            // Spacer to balance the row visually
+            const SizedBox(width: 48),
-            SizedBox(width: 48), // matches IconButton size
           ],
         ),
-        SizedBox(height: 16),
+        const SizedBox(height: 16),
         TextField(
-          decoration: InputDecoration(
+          controller: _usernameController,
+          decoration: const InputDecoration(
             border: OutlineInputBorder(),
             labelText: "Username",
           ),
         ),
+        const SizedBox(height: 8),
         TextField(
-          decoration: InputDecoration(
+          controller: _displayNameController,
+          decoration: const InputDecoration(
             border: OutlineInputBorder(),
             labelText: "Display Name",
           ),
         ),
+        const SizedBox(height: 8),
         TextField(
-          decoration: InputDecoration(
+          controller: _emailController,
+          decoration: const InputDecoration(
             border: OutlineInputBorder(),
             labelText: "Email",
           ),
         ),
+        const SizedBox(height: 8),
         TextField(
+          controller: _passwordController,
           obscureText: true,
-          decoration: InputDecoration(
+          decoration: const InputDecoration(
             border: OutlineInputBorder(),
             labelText: "Password",
           ),
         ),
+        const SizedBox(height: 8),
         TextField(
-          decoration: InputDecoration(
+          controller: _inviteController,
+          decoration: const InputDecoration(
             border: OutlineInputBorder(),
             labelText: "Invite Code",
           ),
         ),
+        const SizedBox(height: 12),
         Row(
           mainAxisAlignment: MainAxisAlignment.center,
-          spacing: 10,
           children: [
-            FilledButton(onPressed: register, child: Text("Register")),
+            FilledButton(
+              onPressed: _registering ? null : _register,
+              child: _registering
+                  ? const SizedBox(
+                      height: 14,
+                      width: 14,
+                      child: CircularProgressIndicator(strokeWidth: 2),
+                    )
+                  : const Text("Register"),
+            ),
           ],
         ),
       ],

lib/components/pages/calculator.dart

@@ -1,10 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:mileograph_flutter/components/calculator/calculator.dart';
-import 'package:provider/provider.dart';
-import 'package:mileograph_flutter/services/dataService.dart';
 
 class CalculatorPage extends StatelessWidget {
+  const CalculatorPage({super.key});
+
+  @override
   Widget build(BuildContext context) {
-    return RouteCalculator();
+    return const RouteCalculator();
   }
 }

lib/components/pages/dashboard.dart

@@ -1,98 +1,367 @@
 import 'package:flutter/material.dart';
-import 'package:mileograph_flutter/components/dashboard/leaderboardPanel.dart';
+import 'package:go_router/go_router.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';
 import 'package:mileograph_flutter/services/authservice.dart';
-import 'package:mileograph_flutter/services/dataService.dart';
+import 'package:mileograph_flutter/services/data_service.dart';
-import 'package:mileograph_flutter/components/dashboard/topTractionPanel.dart';
-
 import 'package:provider/provider.dart';
 
-class Dashboard extends StatelessWidget {
+class Dashboard extends StatefulWidget {
   const Dashboard({super.key});
+
+  @override
+  State<Dashboard> createState() => _DashboardState();
+}
+
+class _DashboardState extends State<Dashboard> {
+  bool _showAllOnThisDay = false;
+
   @override
   Widget build(BuildContext context) {
     final data = context.watch<DataService>();
     final auth = context.watch<AuthService>();
-    return DashboardHeader(auth: auth, data: data);
+    final stats = data.homepageStats;
+
+    final isInitialLoading = data.isHomepageLoading || stats == null;
+
+    return RefreshIndicator(
+      onRefresh: () async {
+        await data.fetchHomepageStats();
+        await Future.wait([
+          data.fetchOnThisDay(),
+          data.fetchTripDetails(),
+          data.fetchHadTraction(),
+        ]);
+      },
+      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,
+          );
+          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),
+                          ],
+                        ),
+                ],
+              ),
+              if (isInitialLoading)
+                Positioned.fill(
+                  child: Container(
+                    color: Theme.of(
+                      context,
+                    ).colorScheme.surface.withValues(alpha: 0.7),
+                    child: const Center(
+                      child: Column(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          CircularProgressIndicator(),
+                          SizedBox(height: 12),
+                          Text('Loading dashboard data...'),
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+            ],
+          );
+        },
+      ),
+    );
   }
-}
 
-class DashboardHeader extends StatelessWidget {
+  Widget _buildHeader(
-  const DashboardHeader({super.key, required this.auth, required this.data});
+    BuildContext context,
-
+    AuthService auth,
-  final AuthService auth;
+    HomepageStats? stats,
-  final DataService data;
+    bool loading,
-
+  ) {
-  @override
+    final greetingName =
-  Widget build(BuildContext context) {
+        stats?.user?.fullName ?? auth.fullName ?? auth.username ?? 'there';
-    return Column(
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        Row(
+        Column(
-          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            Row(
+            Text('Dashboard', style: Theme.of(context).textTheme.labelMedium),
-              children: [
+            const SizedBox(height: 2),
-                Card(
+            Text(
-                  child: Padding(
+              'Welcome back, $greetingName',
-                    padding: const EdgeInsets.all(8.0),
+              style: Theme.of(context).textTheme.headlineSmall,
-                    child: Column(
-                      children: [
-                        Text.rich(
-                          TextSpan(
-                            children: [
-                              TextSpan(text: "Total Mileage: "),
-                              TextSpan(
-                                text:
-                                    data.homepageStats?.totalMileage
-                                        .toString() ??
-                                    "0",
-                              ),
-                            ],
-                          ),
-                        ),
-                        Text.rich(
-                          TextSpan(
-                            children: [
-                              TextSpan(text: DateTime.now().year.toString()),
-                              TextSpan(text: " Mileage: "),
-                              TextSpan(
-                                text: data
-                                    .getMileageForCurrentYear()
-                                    .toString(),
-                              ),
-                            ],
-                          ),
-                        ),
-                      ],
-                    ),
-                  ),
-                ),
-                Card(
-                  child: Padding(
-                    padding: EdgeInsets.all(8),
-                    child: Column(
-                      children: [
-                        Text("Total Winners: 123"),
-                        Text("Average mileage: 45.6"),
-                      ],
-                    ),
-                  ),
-                ),
-              ],
             ),
           ],
         ),
-
+        if (loading)
-        Expanded(
+          const Padding(
-          child: ListView(
+            padding: EdgeInsets.only(right: 8.0),
-            scrollDirection: Axis.vertical,
+            child: SizedBox(
-            children: [
+              height: 24,
-              TopTractionPanel(),
+              width: 24,
-              LeaderboardPanel(),
+              child: CircularProgressIndicator(strokeWidth: 2),
-              SizedBox(height: 80),
+            ),
-            ],
           ),
-        ),
       ],
     );
   }
+
+  List<Widget> _buildMetricChips(
+    BuildContext context, {
+    required double totalMileage,
+    required double currentYearMileage,
+    required int trips,
+  }) {
+    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(
+            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),
+                ),
+              ),
+              const SizedBox(height: 4),
+              Text(
+                value,
+                style: textTheme.titleMedium?.copyWith(
+                  fontWeight: FontWeight.w700,
+                ),
+              ),
+            ],
+          ),
+        ),
+      );
+    }
+
+    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.',
+          ),
+        ),
+        const SizedBox(height: 12),
+        _buildQuickCalcCard(context),
+        const SizedBox(height: 12),
+        _buildTripsCard(context, data),
+      ],
+    );
+  }
+
+  Widget _buildSidebar(BuildContext context, DataService data) {
+    return Column(
+      children: [
+        TopTractionPanel(),
+        const SizedBox(height: 12),
+        LeaderboardPanel(),
+      ],
+    );
+  }
+
+  Widget _buildCard(
+    BuildContext context, {
+    required String title,
+    required Widget child,
+    Widget? trailing,
+    Widget? action,
+  }) {
+    return Card(
+      clipBehavior: Clip.antiAlias,
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  title,
+                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                    fontWeight: FontWeight.w700,
+                  ),
+                ),
+                Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    if (action != null) action,
+                    if (trailing != null) ...[
+                      const SizedBox(width: 8),
+                      trailing,
+                    ],
+                  ],
+                ),
+              ],
+            ),
+            const SizedBox(height: 12),
+            child,
+          ],
+        ),
+      ),
+    );
+  }
+
+  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(
+      context,
+      title: 'Trips',
+      action: TextButton(
+        onPressed: () => context.push('/trips'),
+        child: const Text('View all'),
+      ),
+      child: trips.isEmpty
+          ? Text(
+              'No trips logged yet. Add one from the Trips page.',
+              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),
+                );
+              }).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')}';
+  }
 }

lib/components/pages/legs.dart

@@ -1,31 +1,404 @@
+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';
-import 'package:mileograph_flutter/services/dataService.dart';
 
+class LegsPage extends StatefulWidget {
+  const LegsPage({super.key});
 
-class LegsPage extends StatelessWidget {
+  @override
-  Widget build(BuildContext context){
+  State<LegsPage> createState() => _LegsPageState();
+}
+
+class _LegsPageState extends State<LegsPage> {
+  int _sortDirection = 0;
+  DateTime? _startDate;
+  DateTime? _endDate;
+  bool _initialised = false;
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    if (!_initialised) {
+      _initialised = true;
+      _refreshLegs();
+    }
+  }
+
+  Future<void> _refreshLegs() async {
+    final data = context.read<DataService>();
+    await data.fetchLegs(
+      sortDirection: _sortDirection,
+      dateRangeStart: _formatDate(_startDate),
+      dateRangeEnd: _formatDate(_endDate),
+    );
+  }
+
+  Future<void> _loadMore() async {
+    final data = context.read<DataService>();
+    await data.fetchLegs(
+      sortDirection: _sortDirection,
+      dateRangeStart: _formatDate(_startDate),
+      dateRangeEnd: _formatDate(_endDate),
+      offset: data.legs.length,
+      append: true,
+    );
+  }
+
+  double _pageMileage(List legs) {
+    return legs.fold<double>(
+      0,
+      (prev, leg) => prev + (leg.mileage as double? ?? 0),
+    );
+  }
+
+  Future<void> _pickDate({required bool start}) async {
+    final initial = start
+        ? _startDate ?? DateTime.now()
+        : _endDate ?? _startDate ?? DateTime.now();
+    final picked = await showDatePicker(
+      context: context,
+      initialDate: initial,
+      firstDate: DateTime(1970),
+      lastDate: DateTime.now().add(const Duration(days: 365)),
+    );
+    if (picked != null) {
+      setState(() {
+        if (start) {
+          _startDate = picked;
+          if (_endDate != null && _endDate!.isBefore(picked)) {
+            _endDate = picked;
+          }
+        } else {
+          _endDate = picked;
+        }
+      });
+      await _refreshLegs();
+    }
+  }
+
+  void _clearFilters() {
+    setState(() {
+      _startDate = null;
+      _endDate = null;
+      _sortDirection = 0;
+    });
+    _refreshLegs();
+  }
+
+  @override
+  Widget build(BuildContext context) {
     final data = context.watch<DataService>();
-    return ListView.builder(
+    final legs = data.legs;
-      itemCount: data.legs.length,
+    final pageMileage = _pageMileage(legs);
-      itemBuilder: (context, index) {
+
-        final leg = data.legs[index];
+    return RefreshIndicator(
-        return Card(
+      onRefresh: _refreshLegs,
-          margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+      child: ListView(
-          child: Padding(
+        padding: const EdgeInsets.all(16),
-            padding: EdgeInsets.all(16),
+        physics: const AlwaysScrollableScrollPhysics(),
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text('Logbook',
+                      style: Theme.of(context).textTheme.labelMedium),
+                  const SizedBox(height: 2),
+                  Text('Entries',
+                      style: Theme.of(context).textTheme.headlineSmall),
+                ],
+              ),
+              Card(
+                child: Padding(
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.end,
+                    children: [
+                      Text('Page mileage',
+                          style: Theme.of(context).textTheme.labelSmall),
+                      Text('${pageMileage.toStringAsFixed(1)} mi',
+                          style: Theme.of(context)
+                              .textTheme
+                              .titleMedium
+                              ?.copyWith(fontWeight: FontWeight.w700)),
+                    ],
+                  ),
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 12),
+          Card(
+            child: Padding(
+              padding: const EdgeInsets.all(12),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Text('Filters',
+                          style: Theme.of(context).textTheme.titleMedium),
+                      TextButton.icon(
+                        onPressed: _clearFilters,
+                        icon: const Icon(Icons.refresh),
+                        label: const Text('Clear'),
+                      ),
+                    ],
+                  ),
+                  const SizedBox(height: 8),
+                  Wrap(
+                    spacing: 12,
+                    runSpacing: 12,
+                    crossAxisAlignment: WrapCrossAlignment.center,
+                    children: [
+                      FilledButton.tonalIcon(
+                        onPressed: () => _pickDate(start: true),
+                        icon: const Icon(Icons.calendar_month),
+                        label: Text(
+                          _startDate == null
+                              ? 'Start date'
+                              : _formatDate(_startDate!)!,
+                        ),
+                      ),
+                      FilledButton.tonalIcon(
+                        onPressed: () => _pickDate(start: false),
+                        icon: const Icon(Icons.event),
+                        label: Text(
+                          _endDate == null
+                              ? 'End date'
+                              : _formatDate(_endDate!)!,
+                        ),
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+            ),
+          ),
+          const SizedBox(height: 12),
+          if (data.isLegsLoading && legs.isEmpty)
+            const Center(
+              child: Padding(
+                padding: EdgeInsets.symmetric(vertical: 24.0),
+                child: CircularProgressIndicator(),
+              ),
+            )
+          else if (legs.isEmpty)
+            Card(
+              child: Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      'No entries found',
+                      style: Theme.of(context)
+                          .textTheme
+                          .titleMedium
+                          ?.copyWith(fontWeight: FontWeight.w700),
+                    ),
+                    const SizedBox(height: 8),
+                    const Text('Adjust the filters or add a new leg.'),
+                  ],
+                ),
+              ),
+            )
+          else
+            Column(
+              children: [
+                ...legs.map((leg) => _buildLegCard(context, leg)),
+                const SizedBox(height: 8),
+                if (data.legsHasMore || data.isLegsLoading)
+                  Align(
+                    alignment: Alignment.center,
+                    child: OutlinedButton.icon(
+                      onPressed:
+                          data.isLegsLoading ? null : () => _loadMore(),
+                      icon: data.isLegsLoading
+                          ? const SizedBox(
+                              height: 14,
+                              width: 14,
+                              child: CircularProgressIndicator(strokeWidth: 2),
+                            )
+                          : const Icon(Icons.expand_more),
+                      label: Text(
+                        data.isLegsLoading ? 'Loading...' : 'Load more',
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+        ],
+      ),
+    );
+  }
+
+  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')}';
+  }
+
+  String _formatDateTime(DateTime date) {
+    final dateStr = _formatDate(date) ?? '';
+    final timeStr =
+        '${date.hour.toString().padLeft(2, '0')}:${date.minute.toString().padLeft(2, '0')}';
+    return '$dateStr · $timeStr';
+  }
+
+  Widget _buildLegCard(BuildContext context, Leg leg) {
+    final routeSegments = _parseRouteSegments(leg.route);
+    final textTheme = Theme.of(context).textTheme;
+    return Card(
+      child: ExpansionTile(
+        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,
+              ),
+          ],
+        ),
+        trailing: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            IconButton(
+              tooltip: 'Edit entry',
+              icon: const Icon(Icons.edit),
+              onPressed: () => context.push('/legs/edit/${leg.id}'),
+            ),
+            Text(
+              '${leg.mileage.toStringAsFixed(1)} mi',
+              style:
+                  textTheme.labelLarge?.copyWith(fontWeight: FontWeight.w700),
+            ),
+            if (leg.tripId != 0)
+              Text(
+                'Trip #${leg.tripId}',
+                style: textTheme.labelSmall,
+              ),
+          ],
+        ),
+        children: [
+          Padding(
+            padding: const EdgeInsets.fromLTRB(16, 0, 16, 12),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                Text('${leg.start} → ${leg.end}', style: TextStyle(fontSize: 16)),
+                if (leg.notes.isNotEmpty) ...[
-                Text('Mileage: ${leg.mileage.toStringAsFixed(2)} km'),
+                  Text('Notes', style: textTheme.titleSmall),
-                Text('Headcode: ${leg.headcode}'),
+                  const SizedBox(height: 4),
-                Text('Begin: ${leg.beginTime}'),
+                  Text(leg.notes),
+                  const SizedBox(height: 12),
+                ],
+                if (leg.locos.isNotEmpty) ...[
+                  Text('Locos', style: textTheme.titleSmall),
+                  const SizedBox(height: 6),
+                  Wrap(
+                    spacing: 8,
+                    runSpacing: 8,
+                    children: _buildLocoChips(context, leg),
+                  ),
+                  const SizedBox(height: 12),
+                ],
+                if (routeSegments.isNotEmpty) ...[
+                  Text('Route', style: textTheme.titleSmall),
+                  const SizedBox(height: 6),
+                  _buildRouteList(routeSegments),
+                ],
               ],
             ),
           ),
-        );
+        ],
-      },
+      ),
     );
   }
+
+  List<Widget> _buildLocoChips(BuildContext context, Leg leg) {
+    final theme = Theme.of(context);
+    return leg.locos
+        .map(
+          (loco) => Chip(
+            label: Text('${loco.locoClass} ${loco.number}'),
+            avatar: const Icon(Icons.directions_railway, size: 16),
+            backgroundColor: theme.colorScheme.surfaceContainerHighest,
+          ),
+        )
+        .toList();
+  }
+
+  Widget _buildRouteList(List<String> segments) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: segments
+          .map(
+            (segment) => Padding(
+              padding: const EdgeInsets.symmetric(vertical: 4.0),
+              child: Row(
+                children: [
+                  const Icon(Icons.circle, size: 10),
+                  const SizedBox(width: 8),
+                  Expanded(child: Text(segment)),
+                ],
+              ),
+            ),
+          )
+          .toList(),
+    );
+  }
+
+  List<String> _parseRouteSegments(String route) {
+    final trimmed = route.trim();
+    if (trimmed.isEmpty) return [];
+    try {
+      final decoded = jsonDecode(trimmed);
+      if (decoded is List) {
+        return decoded.map((e) => e.toString()).toList();
+      }
+    } catch (_) {
+      // ignore and try alternative parsing
+    }
+    if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
+      try {
+        final replaced = trimmed.replaceAll("'", '"');
+        final decoded = jsonDecode(replaced);
+        if (decoded is List) {
+          return decoded.map((e) => e.toString()).toList();
+        }
+      } catch (_) {}
+    }
+    if (trimmed.contains('->')) {
+      return trimmed
+          .split('->')
+          .map((e) => e.trim())
+          .where((e) => e.isNotEmpty)
+          .toList();
+    }
+    if (trimmed.contains(',')) {
+      return trimmed
+          .split(',')
+          .map((e) => e.trim())
+          .where((e) => e.isNotEmpty)
+          .toList();
+    }
+    return [trimmed];
+  }
 }

lib/components/pages/loco_timeline.dart

@@ -0,0 +1,263 @@
+import 'dart:math' as math;
+
+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';
+
+part 'loco_timeline/timeline_grid.dart';
+part 'loco_timeline/event_editor.dart';
+
+class LocoTimelinePage extends StatefulWidget {
+  const LocoTimelinePage({
+    super.key,
+    required this.locoId,
+    required this.locoLabel,
+  });
+
+  final int locoId;
+  final String locoLabel;
+
+  @override
+  State<LocoTimelinePage> createState() => _LocoTimelinePageState();
+}
+
+class _LocoTimelinePageState extends State<LocoTimelinePage> {
+  final List<_EventDraft> _draftEvents = [];
+  bool _isSaving = false;
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) => _load());
+  }
+
+  @override
+  void dispose() {
+    _disposeDrafts(_draftEvents);
+    super.dispose();
+  }
+
+  Future<void> _load() {
+    final data = context.read<DataService>();
+    data.fetchEventFields();
+    return data.fetchLocoTimeline(widget.locoId);
+  }
+
+  void _addDraftEvent() {
+    setState(() {
+      _draftEvents.add(_EventDraft());
+    });
+  }
+
+  void _removeDraftAt(int index) {
+    if (index < 0 || index >= _draftEvents.length) return;
+    final draft = _draftEvents.removeAt(index);
+    _disposeDraft(draft);
+    setState(() {});
+  }
+
+  void _disposeDraft(_EventDraft draft) {
+    draft.dateController.dispose();
+    draft.detailsController.dispose();
+  }
+
+  void _disposeDrafts(List<_EventDraft> drafts) {
+    for (final draft in drafts) {
+      _disposeDraft(draft);
+    }
+  }
+
+  Future<void> _saveEvents() async {
+    if (_isSaving) return;
+    if (!_canSaveDrafts()) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(content: Text('Please fix validation issues before saving.')),
+      );
+      return;
+    }
+    final data = context.read<DataService>();
+    setState(() {
+      _isSaving = true;
+    });
+    try {
+      final invalid = <String>[];
+      for (final draft in _draftEvents) {
+        final dateStr = draft.dateController.text.trim();
+        if (!_isValidDateString(dateStr)) {
+          invalid.add('Date is invalid (${dateStr.isEmpty ? 'empty' : dateStr})');
+          continue;
+        }
+        if (draft.fields.isEmpty) {
+          invalid.add('Add at least one field for each event');
+          continue;
+        }
+        final values = <String, dynamic>{};
+        for (final field in draft.fields) {
+          final val = field.value;
+          final isBlankString = val is String && val.trim().isEmpty;
+          if (val == null || isBlankString) {
+            invalid.add('Field ${field.field.display} is empty');
+            break;
+          }
+          values[field.field.name] = val;
+        }
+        if (invalid.isNotEmpty) continue;
+        if (values.isEmpty) {
+          invalid.add('Add at least one value');
+          continue;
+        }
+        await data.createLocoEvent(
+          locoId: widget.locoId,
+          eventDate: dateStr,
+          values: values,
+          details: draft.details,
+        );
+      }
+      if (invalid.isNotEmpty) {
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(content: Text(invalid.first)),
+          );
+        }
+        return;
+      }
+      _disposeDrafts(_draftEvents);
+      _draftEvents.clear();
+      await _load();
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          const SnackBar(content: Text('Events saved')),
+        );
+      }
+    } catch (e) {
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(content: Text('Failed to save events: $e')),
+        );
+      }
+    } finally {
+      if (mounted) {
+        setState(() {
+          _isSaving = false;
+        });
+      }
+    }
+  }
+
+  bool _isValidDateString(String input) {
+    final trimmed = input.trim();
+    final regex = RegExp(r'^\d{4}-(\d{2}|xx|XX)-(\d{2}|xx|XX)$');
+    if (!regex.hasMatch(trimmed)) return false;
+    final parts = trimmed.split('-');
+    final monthPart = parts[1];
+    final dayPart = parts[2];
+    final monthUnknown = monthPart.toLowerCase() == 'xx';
+    final dayUnknown = dayPart.toLowerCase() == 'xx';
+    if (monthUnknown && !dayUnknown) return false;
+    if (!monthUnknown) {
+      final month = int.tryParse(monthPart);
+      if (month == null || month < 1 || month > 12) return false;
+    }
+    if (!dayUnknown) {
+      final day = int.tryParse(dayPart);
+      if (day == null || day < 1 || day > 31) return false;
+    }
+    return true;
+  }
+
+  bool _draftIsValid(_EventDraft draft) {
+    final dateStr = draft.dateController.text.trim();
+    if (!_isValidDateString(dateStr)) return false;
+    if (draft.fields.isEmpty) return false;
+    for (final field in draft.fields) {
+      final val = field.value;
+      if (val == null) return false;
+      if (val is String && val.trim().isEmpty) return false;
+    }
+    return true;
+  }
+
+  bool _canSaveDrafts() {
+    if (_draftEvents.isEmpty) return false;
+    return _draftEvents.every(_draftIsValid);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final data = context.watch<DataService>();
+    final timeline = data.timelineForLoco(widget.locoId);
+    final isLoading = data.isLocoTimelineLoading(widget.locoId);
+
+    return Scaffold(
+      appBar: AppBar(
+        leading: IconButton(
+          icon: const Icon(Icons.arrow_back),
+          onPressed: () => Navigator.of(context).maybePop(),
+        ),
+        title: Text('Timeline · ${widget.locoLabel}'),
+      ),
+      body: RefreshIndicator(
+        onRefresh: _load,
+        child: LayoutBuilder(
+          builder: (context, constraints) {
+            if (isLoading && timeline.isEmpty) {
+              return const Center(child: CircularProgressIndicator());
+            }
+            if (timeline.isEmpty) {
+              return Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: Card(
+                  child: Padding(
+                    padding: const EdgeInsets.all(16.0),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          'No timeline data yet',
+                          style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                                fontWeight: FontWeight.w700,
+                              ),
+                        ),
+                        const SizedBox(height: 8),
+                        const Text(
+                          'This locomotive does not have any attribute history to show right now.',
+                        ),
+                        const SizedBox(height: 12),
+                        OutlinedButton.icon(
+                          onPressed: _load,
+                          icon: const Icon(Icons.refresh),
+                          label: const Text('Try again'),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              );
+            }
+            return ListView(
+              padding: const EdgeInsets.all(16),
+              children: [
+                _TimelineGrid(
+                  entries: timeline,
+                ),
+                const SizedBox(height: 16),
+                _EventEditor(
+                  eventFields: data.eventFields,
+                  drafts: _draftEvents,
+                  onAddEvent: _addDraftEvent,
+                  onChange: () => setState(() {}),
+                  onSave: _saveEvents,
+                  onRemoveDraft: _removeDraftAt,
+                  isSaving: _isSaving,
+                  canSave: _canSaveDrafts(),
+                ),
+              ],
+            );
+          },
+        ),
+      ),
+    );
+  }
+}

lib/components/pages/loco_timeline/event_editor.dart

@@ -0,0 +1,331 @@
+part of 'package:mileograph_flutter/components/pages/loco_timeline.dart';
+
+class _EventEditor extends StatelessWidget {
+  const _EventEditor({
+    required this.eventFields,
+    required this.drafts,
+    required this.onAddEvent,
+    required this.onChange,
+    required this.onSave,
+    required this.onRemoveDraft,
+    required this.isSaving,
+    required this.canSave,
+  });
+
+  final List<EventField> eventFields;
+  final List<_EventDraft> drafts;
+  final VoidCallback onAddEvent;
+  final VoidCallback onChange;
+  final Future<void> Function() onSave;
+  final void Function(int index) onRemoveDraft;
+  final bool isSaving;
+  final bool canSave;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(
+              'Add events',
+              style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                    fontWeight: FontWeight.w700,
+                  ),
+            ),
+            Row(
+              children: [
+                OutlinedButton.icon(
+                  onPressed: onAddEvent,
+                  icon: const Icon(Icons.add),
+                  label: const Text('New event'),
+                ),
+                const SizedBox(width: 8),
+                FilledButton.icon(
+                  onPressed: (!canSave || isSaving) ? null : onSave,
+                  icon: isSaving
+                      ? const SizedBox(
+                          height: 14,
+                          width: 14,
+                          child: CircularProgressIndicator(strokeWidth: 2),
+                        )
+                      : const Icon(Icons.save),
+                  label: Text(isSaving ? 'Saving...' : 'Save all'),
+                ),
+              ],
+            ),
+          ],
+        ),
+        const SizedBox(height: 12),
+        if (drafts.isEmpty)
+          const Text('No events yet. Add one to propose new values.')
+        else
+          ...drafts.asMap().entries.map(
+            (entry) {
+              final idx = entry.key;
+              final draft = entry.value;
+              return Padding(
+                padding: const EdgeInsets.only(bottom: 12.0),
+                child: Card(
+                  child: Padding(
+                    padding: const EdgeInsets.all(12.0),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Row(
+                          children: [
+                            Text(
+                              'Event ${idx + 1}',
+                              style: Theme.of(context).textTheme.titleMedium,
+                            ),
+                            const Spacer(),
+                            IconButton(
+                              tooltip: 'Remove',
+                              onPressed: () => onRemoveDraft(idx),
+                              icon: const Icon(Icons.delete_outline),
+                            ),
+                          ],
+                        ),
+                        const SizedBox(height: 8),
+                        Row(
+                          children: [
+                            Expanded(
+                              child: TextField(
+                                controller: draft.dateController,
+                                onChanged: (_) => onChange(),
+                                decoration: const InputDecoration(
+                                  labelText: 'Date (YYYY-MM-DD, MM/DD can be XX)',
+                                  border: OutlineInputBorder(),
+                                ),
+                              ),
+                            ),
+                            IconButton(
+                              tooltip: 'Pick date',
+                              onPressed: () async {
+                                final now = DateTime.now();
+                                final picked = await showDatePicker(
+                                  context: context,
+                                  initialDate: draft.date ?? now,
+                                  firstDate: DateTime(1900),
+                                  lastDate: DateTime(now.year + 10),
+                                );
+                                if (picked != null) {
+                                  draft.date = picked;
+                                  draft.dateController.text =
+                                      DateFormat('yyyy-MM-dd').format(picked);
+                                  onChange();
+                                }
+                              },
+                              icon: const Icon(Icons.calendar_month),
+                            ),
+                          ],
+                        ),
+                        const SizedBox(height: 8),
+                        _FieldList(
+                          draft: draft,
+                          eventFields: eventFields,
+                          onChange: onChange,
+                        ),
+                        const SizedBox(height: 12),
+                        TextField(
+                          controller: draft.detailsController,
+                          onChanged: (val) {
+                            draft.details = val;
+                            onChange();
+                          },
+                          decoration: const InputDecoration(
+                            labelText: 'Commit message / details',
+                            border: OutlineInputBorder(),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              );
+            },
+          ),
+      ],
+    );
+  }
+}
+
+class _FieldList extends StatelessWidget {
+  const _FieldList({
+    required this.draft,
+    required this.eventFields,
+    required this.onChange,
+  });
+
+  final _EventDraft draft;
+  final List<EventField> eventFields;
+  final VoidCallback onChange;
+
+  @override
+  Widget build(BuildContext context) {
+    final usedNames = draft.fields.map((f) => f.field.name).toSet();
+    final availableFields =
+        eventFields.where((f) => !usedNames.contains(f.name)).toList();
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          children: [
+            Text(
+              'Fields',
+              style: Theme.of(context).textTheme.titleSmall,
+            ),
+            const Spacer(),
+            DropdownButton<EventField>(
+              hint: const Text('Add field'),
+              value: null,
+              onChanged: (field) {
+                if (field == null) return;
+                draft.fields.add(_FieldEntry(field: field));
+                onChange();
+              },
+              items: availableFields
+                  .map(
+                    (f) => DropdownMenuItem(
+                      value: f,
+                      child: Text(f.display),
+                    ),
+                  )
+                  .toList(),
+            ),
+          ],
+        ),
+        const SizedBox(height: 8),
+        if (draft.fields.isEmpty)
+          const Text('No fields added yet.')
+        else
+          ...draft.fields.asMap().entries.map(
+            (entry) {
+              final idx = entry.key;
+              final field = entry.value;
+              return Padding(
+                padding: const EdgeInsets.symmetric(vertical: 6.0),
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Expanded(
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(
+                            field.field.display,
+                            style: Theme.of(context)
+                                .textTheme
+                                .labelLarge
+                                ?.copyWith(fontWeight: FontWeight.w700),
+                          ),
+                          const SizedBox(height: 4),
+                          _FieldInput(
+                            field: field.field,
+                            value: field.value,
+                            onChanged: (val) {
+                              field.value = val;
+                              onChange();
+                            },
+                          ),
+                        ],
+                      ),
+                    ),
+                    IconButton(
+                      onPressed: () {
+                        draft.fields.removeAt(idx);
+                        onChange();
+                      },
+                      icon: const Icon(Icons.close),
+                    ),
+                  ],
+                ),
+              );
+            },
+          ),
+      ],
+    );
+  }
+}
+
+class _FieldInput extends StatelessWidget {
+  const _FieldInput({
+    required this.field,
+    required this.value,
+    required this.onChanged,
+  });
+
+  final EventField field;
+  final dynamic value;
+  final ValueChanged<dynamic> onChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    if (field.enumValues != null && field.enumValues!.isNotEmpty) {
+      final options = field.enumValues!;
+      return DropdownButtonFormField<String>(
+        value: value is String && options.contains(value) ? value : null,
+        decoration: const InputDecoration(border: OutlineInputBorder()),
+        items: options
+            .map((v) => DropdownMenuItem<String>(value: v, child: Text(v)))
+            .toList(),
+        onChanged: (val) => onChanged(val),
+        hint: const Text('Select value'),
+      );
+    }
+
+    final type = field.type?.toLowerCase();
+    if (type == 'bool' || type == 'boolean') {
+      final bool? current =
+          value is bool ? value : (value is String ? value == 'true' : null);
+      return DropdownButtonFormField<bool>(
+        value: current,
+        decoration: const InputDecoration(border: OutlineInputBorder()),
+        items: const [
+          DropdownMenuItem(value: true, child: Text('Yes')),
+          DropdownMenuItem(value: false, child: Text('No')),
+        ],
+        onChanged: (val) => onChanged(val),
+        hint: const Text('Select'),
+      );
+    }
+
+    final isNumber = type == 'int' || type == 'integer';
+    return TextFormField(
+      initialValue: value?.toString(),
+      onChanged: (val) {
+        if (isNumber) {
+          final parsed = int.tryParse(val);
+          onChanged(parsed);
+        } else {
+          onChanged(val);
+        }
+      },
+      decoration: const InputDecoration(
+        border: OutlineInputBorder(),
+        hintText: 'Enter value',
+      ),
+      keyboardType: isNumber ? TextInputType.number : TextInputType.text,
+    );
+  }
+}
+
+class _EventDraft {
+  DateTime? date;
+  String details = '';
+  final TextEditingController detailsController = TextEditingController();
+  final TextEditingController dateController = TextEditingController();
+  final List<_FieldEntry> fields = [];
+
+  _EventDraft();
+}
+
+class _FieldEntry {
+  final EventField field;
+  dynamic value;
+
+  _FieldEntry({required this.field});
+}

lib/components/pages/loco_timeline/timeline_grid.dart

@@ -0,0 +1,700 @@
+part of 'package:mileograph_flutter/components/pages/loco_timeline.dart';
+
+final DateFormat _dateFormat = DateFormat('yyyy-MM-dd');
+
+class _TimelineGrid extends StatefulWidget {
+  const _TimelineGrid({
+    required this.entries,
+  });
+
+  final List<LocoAttrVersion> entries;
+
+  @override
+  State<_TimelineGrid> createState() => _TimelineGridState();
+}
+
+class _TimelineGridState extends State<_TimelineGrid> {
+  final ScrollController _horizontalController = ScrollController();
+  final ScrollController _rightVerticalController = ScrollController();
+  final ScrollController _leftVerticalController = ScrollController();
+  bool _isSyncingScroll = false;
+  double _scrollOffset = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    _rightVerticalController.addListener(_syncVerticalScroll);
+    _horizontalController.addListener(_onHorizontalScroll);
+  }
+
+  @override
+  void dispose() {
+    _rightVerticalController.removeListener(_syncVerticalScroll);
+    _horizontalController.removeListener(_onHorizontalScroll);
+    _horizontalController.dispose();
+    _rightVerticalController.dispose();
+    _leftVerticalController.dispose();
+    super.dispose();
+  }
+
+  void _syncVerticalScroll() {
+    if (_isSyncingScroll) return;
+    if (!_leftVerticalController.hasClients ||
+        !_rightVerticalController.hasClients) {
+      return;
+    }
+    _isSyncingScroll = true;
+    _leftVerticalController.jumpTo(
+      _rightVerticalController.offset.clamp(
+        0.0,
+        _leftVerticalController.position.maxScrollExtent,
+      ),
+    );
+    _isSyncingScroll = false;
+  }
+
+  void _onHorizontalScroll() {
+    if (!mounted) return;
+    setState(() {
+      _scrollOffset = _horizontalController.offset;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final filteredEntries = widget.entries.where((e) {
+      final code = e.attrCode.toLowerCase();
+      return !{
+        'operational',
+        'gettable',
+        'build_prec',
+        'build_year',
+        'build_month',
+        'build_day',
+      }.contains(code);
+    }).toList();
+    final model = _TimelineModel.fromEntries(filteredEntries);
+    final axisSegments = model.axisSegments;
+    const labelWidth = 110.0;
+    const rowHeight = 52.0;
+    const double axisHeight = 48;
+    final rows = model.attrRows.entries.toList();
+    final totalRowsHeight = rows.length * rowHeight;
+    final axisWidth = math.max(model.axisTotalWidth, 120.0);
+    final double viewHeight = totalRowsHeight + axisHeight + 8;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        SizedBox(
+          height: viewHeight,
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              SizedBox(
+                width: labelWidth,
+                child: Column(
+                  children: [
+                    SizedBox(
+                      height: axisHeight,
+                      child: Align(
+                        alignment: Alignment.centerLeft,
+                        child: Text(
+                          'Attribute',
+                          style: Theme.of(context).textTheme.labelLarge?.copyWith(
+                                fontWeight: FontWeight.w700,
+                              ),
+                        ),
+                      ),
+                    ),
+                    Expanded(
+                      child: Scrollbar(
+                        controller: _leftVerticalController,
+                        thumbVisibility: true,
+                        child: ListView.builder(
+                          controller: _leftVerticalController,
+                          physics: const NeverScrollableScrollPhysics(),
+                          itemExtent: rowHeight,
+                          itemCount: rows.length,
+                          itemBuilder: (_, index) {
+                            final label = _formatAttrLabel(rows[index].key);
+                            return Container(
+                              alignment: Alignment.centerLeft,
+                              padding: const EdgeInsets.symmetric(
+                                horizontal: 10,
+                              ),
+                              decoration: BoxDecoration(
+                                color: Theme.of(context)
+                                    .colorScheme
+                                    .surfaceContainerHighest,
+                                border: Border(
+                                  bottom: BorderSide(
+                                    color:
+                                        Theme.of(context).colorScheme.outlineVariant,
+                                  ),
+                                ),
+                              ),
+                              child: Text(
+                                label,
+                                style: Theme.of(context)
+                                    .textTheme
+                                    .labelLarge
+                                    ?.copyWith(fontWeight: FontWeight.w700),
+                              ),
+                            );
+                          },
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              const SizedBox(width: 8),
+              Expanded(
+                child: Scrollbar(
+                  controller: _horizontalController,
+                  thumbVisibility: true,
+                  child: SingleChildScrollView(
+                    controller: _horizontalController,
+                    scrollDirection: Axis.horizontal,
+                    child: SizedBox(
+                      width: axisWidth,
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          _AxisRow(
+                            segments: axisSegments,
+                            totalWidth: axisWidth,
+                            endLabel: model.endLabel,
+                          ),
+                          const SizedBox(height: 8),
+                          Expanded(
+                            child: ListView.builder(
+                              controller: _rightVerticalController,
+                              itemExtent: rowHeight,
+                              itemCount: rows.length,
+                              itemBuilder: (_, index) {
+                                final blocks = rows[index].value;
+                                return Padding(
+                                  padding:
+                                      const EdgeInsets.symmetric(vertical: 2.0),
+                                  child: _AttrRow(
+                                    rowHeight: rowHeight,
+                                    blocks: blocks,
+                                    model: model,
+                                    scrollOffset: _scrollOffset,
+                                    viewportWidth: axisWidth,
+                                  ),
+                                );
+                              },
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _AxisRow extends StatelessWidget {
+  const _AxisRow({
+    required this.segments,
+    required this.endLabel,
+    required this.totalWidth,
+  });
+
+  final List<_AxisSegment> segments;
+  final String endLabel;
+  final double totalWidth;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    const double axisHeight = 48;
+    return SizedBox(
+      width: totalWidth,
+      height: axisHeight,
+      child: Stack(
+        children: [
+          for (int i = 0; i < segments.length; i++) ...[
+            Positioned(
+              left: segments[i].offset,
+              width: segments[i].width,
+              top: 0,
+              bottom: 0,
+              child: Align(
+                alignment: Alignment.centerLeft,
+                child: Text(
+                  segments[i].label,
+                  overflow: TextOverflow.ellipsis,
+                  maxLines: 1,
+                  style: theme.textTheme.labelSmall,
+                ),
+              ),
+            ),
+          ],
+          Positioned(
+            right: 0,
+            top: 0,
+            bottom: 0,
+            child: Align(
+              alignment: Alignment.centerRight,
+              child: Text(
+                endLabel,
+                overflow: TextOverflow.ellipsis,
+                maxLines: 1,
+                style: theme.textTheme.labelSmall,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _AttrRow extends StatelessWidget {
+  const _AttrRow({
+    required this.rowHeight,
+    required this.blocks,
+    required this.model,
+    required this.scrollOffset,
+    required this.viewportWidth,
+  });
+
+  final double rowHeight;
+  final List<_ValueBlock> blocks;
+  final _TimelineModel model;
+  final double scrollOffset;
+  final double viewportWidth;
+
+  @override
+  Widget build(BuildContext context) {
+    final width = math.max(model.axisTotalWidth, 120.0);
+    final activeBlock = _activeBlock(blocks, scrollOffset);
+    final double stickyWidth = activeBlock == null
+        ? 0
+        : (activeBlock.right - scrollOffset).clamp(20.0, viewportWidth);
+
+    return SizedBox(
+      width: width,
+      height: rowHeight,
+      child: Stack(
+        clipBehavior: Clip.hardEdge,
+        children: [
+          for (final block in blocks)
+            Positioned(
+              left: block.left,
+              width: block.width,
+              top: 0,
+              bottom: 0,
+              child: _ValueBlockView(block: block),
+            ),
+          if (activeBlock != null)
+            Positioned(
+              left: scrollOffset,
+              width: stickyWidth,
+              top: 0,
+              bottom: 0,
+              child: IgnorePointer(
+                child: ClipRect(
+                  child: _ValueBlockView(
+                    block: activeBlock.copyWith(
+                      left: scrollOffset,
+                      width: stickyWidth,
+                    ),
+                    clipLeftEdge: scrollOffset > activeBlock.left + 0.1,
+                  ),
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+
+  _ValueBlock? _activeBlock(List<_ValueBlock> blocks, double offset) {
+    for (final block in blocks) {
+      if (offset >= block.left && offset < block.right) return block;
+    }
+    return null;
+  }
+}
+
+class _ValueBlockView extends StatelessWidget {
+  const _ValueBlockView({
+    required this.block,
+    this.clipLeftEdge = false,
+  });
+
+  final _ValueBlock block;
+  final bool clipLeftEdge;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final color = block.cell.color.withValues(alpha: 0.9);
+    final textColor = ThemeData.estimateBrightnessForColor(color) ==
+            Brightness.dark
+        ? Colors.white
+        : Colors.black87;
+
+    final radius = BorderRadius.only(
+      topLeft: Radius.circular(clipLeftEdge ? 0 : 12),
+      bottomLeft: Radius.circular(clipLeftEdge ? 0 : 12),
+      topRight: const Radius.circular(12),
+      bottomRight: const Radius.circular(12),
+    );
+
+    return ClipRRect(
+      borderRadius: radius,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
+        decoration: BoxDecoration(
+          color: block.cell.value.isEmpty
+              ? theme.colorScheme.surfaceContainerHighest
+              : color,
+          borderRadius: BorderRadius.zero,
+          border: Border.all(color: theme.colorScheme.outlineVariant),
+        ),
+        child: block.cell.value.isEmpty
+            ? const SizedBox.shrink()
+            : FittedBox(
+                alignment: Alignment.topLeft,
+                fit: BoxFit.scaleDown,
+                child: ConstrainedBox(
+                  constraints: const BoxConstraints(minWidth: 1, minHeight: 1),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Text(
+                        block.cell.value,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: theme.textTheme.bodyMedium?.copyWith(
+                              fontWeight: FontWeight.w700,
+                              color: textColor,
+                            ) ??
+                            TextStyle(
+                              fontWeight: FontWeight.w700,
+                              color: textColor,
+                            ),
+                      ),
+                      const SizedBox(height: 4),
+                      Text(
+                        block.cell.rangeLabel,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: theme.textTheme.labelSmall?.copyWith(
+                              color: textColor.withValues(alpha: 0.9),
+                            ) ??
+                            TextStyle(color: textColor.withValues(alpha: 0.9)),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+      ),
+    );
+  }
+}
+
+String? _formatDate(DateTime? date) {
+  if (date == null) return null;
+  return _dateFormat.format(date);
+}
+
+String _formatAttrLabel(String code) {
+  if (code.isEmpty) return 'Attribute';
+  final parts = code.split('_').where((p) => p.isNotEmpty).toList();
+  if (parts.isEmpty) return code;
+  return parts
+      .map((part) => part.length == 1
+          ? part.toUpperCase()
+          : part[0].toUpperCase() + part.substring(1))
+      .join(' ');
+}
+
+DateTime? _parseDateString(String? value) {
+  if (value == null || value.isEmpty) return null;
+  return DateTime.tryParse(value);
+}
+
+DateTime? _effectiveStart(LocoAttrVersion entry) {
+  return entry.validFrom ??
+      _parseDateString(entry.maskedValidFrom) ??
+      entry.txnFrom;
+}
+
+DateTime _safeEnd(DateTime start, DateTime? end) {
+  if (end == null || !end.isAfter(start)) {
+    return start.add(const Duration(days: 1));
+  }
+  return end;
+}
+
+class _TimelineModel {
+  final List<_AxisSegment> axisSegments;
+  final Map<String, List<_ValueBlock>> attrRows;
+  final String endLabel;
+  final List<DateTime> boundaries;
+  final double axisTotalWidth;
+
+  _TimelineModel({
+    required this.axisSegments,
+    required this.attrRows,
+    required this.endLabel,
+    required this.boundaries,
+    required this.axisTotalWidth,
+  });
+
+  factory _TimelineModel.fromEntries(List<LocoAttrVersion> entries) {
+    final grouped = <String, List<LocoAttrVersion>>{};
+    for (final entry in entries) {
+      grouped.putIfAbsent(entry.attrCode, () => []).add(entry);
+    }
+    final now = DateTime.now();
+    DateTime? minStart;
+    DateTime? maxEnd;
+    final attrSegments = <String, List<_ValueSegment>>{};
+
+    grouped.forEach((attr, items) {
+      items.sort(
+        (a, b) => (_effectiveStart(a) ?? now)
+            .compareTo(_effectiveStart(b) ?? now),
+      );
+      final segments = <_ValueSegment>[];
+      for (int i = 0; i < items.length; i++) {
+        final entry = items[i];
+        final start = _effectiveStart(entry) ?? now;
+        final nextStart = i < items.length - 1
+            ? _effectiveStart(items[i + 1])
+            : null;
+        final rawEnd = entry.validTo ?? nextStart ?? now;
+        final end = _safeEnd(start, rawEnd);
+        if (segments.isNotEmpty && segments.last.value == entry.valueLabel) {
+          final last = segments.removeLast();
+          segments.add(
+            last.copyWith(
+              end: end.isAfter(last.end) ? end : last.end,
+            ),
+          );
+        } else {
+          segments.add(
+            _ValueSegment(
+              start: start,
+              end: end,
+              value: entry.valueLabel,
+              entry: entry,
+            ),
+          );
+        }
+        minStart = minStart == null || start.isBefore(minStart!)
+            ? start
+            : minStart;
+        maxEnd = maxEnd == null || end.isAfter(maxEnd!) ? end : maxEnd;
+      }
+      attrSegments[attr] = segments;
+    });
+
+    minStart ??= now.subtract(const Duration(days: 1));
+    final effectiveMaxEnd = maxEnd ?? now;
+
+    final boundaryDates = <DateTime>{};
+    for (final segments in attrSegments.values) {
+      for (final seg in segments) {
+        boundaryDates.add(seg.start);
+        boundaryDates.add(seg.end);
+      }
+    }
+    boundaryDates.add(effectiveMaxEnd);
+    var boundaries = boundaryDates.toList()..sort();
+    if (boundaries.length < 2) {
+      boundaries = [minStart!, effectiveMaxEnd];
+    }
+
+    final axisSegments = <_AxisSegment>[];
+    const double yearWidth = 240.0;
+    for (int i = 0; i < boundaries.length - 1; i++) {
+      final start = boundaries[i];
+      final end = boundaries[i + 1];
+      const width = yearWidth;
+      final double offset = axisSegments.isEmpty
+          ? 0.0
+          : axisSegments.last.offset + axisSegments.last.width;
+      axisSegments.add(
+        _AxisSegment(
+          start: start,
+          end: end,
+          width: width,
+          offset: offset,
+          label: _formatDate(start) ?? '',
+        ),
+      );
+    }
+    final axisTotalWidth =
+        axisSegments.fold<double>(0, (sum, seg) => sum + seg.width);
+
+    final attrRows = <String, List<_ValueBlock>>{};
+    for (final entry in attrSegments.entries) {
+      final blocks = <_ValueBlock>[];
+      for (final seg in entry.value) {
+        final left = _positionForDate(seg.start, boundaries, axisSegments);
+        final right = _positionForDate(seg.end, boundaries, axisSegments);
+        final span = right - left;
+        final width = span < 2.0 ? 2.0 : span;
+        blocks.add(
+          _ValueBlock(
+            left: left,
+            width: width,
+            cell: _RowCell.fromSegment(seg),
+          ),
+        );
+      }
+      attrRows[entry.key] = blocks;
+    }
+
+    final endLabel = _formatDate(effectiveMaxEnd) ?? 'Now';
+    return _TimelineModel(
+      axisSegments: axisSegments,
+      attrRows: attrRows,
+      endLabel: endLabel,
+      boundaries: boundaries,
+      axisTotalWidth: axisTotalWidth,
+    );
+  }
+
+  static double _positionForDate(
+    DateTime date,
+    List<DateTime> boundaries,
+    List<_AxisSegment> segments,
+  ) {
+    for (int i = 0; i < boundaries.length - 1; i++) {
+      final start = boundaries[i];
+      final end = boundaries[i + 1];
+      if (!date.isAfter(end)) {
+        final seg = segments[i];
+        final span = end.difference(start).inMilliseconds;
+        final elapsed = date.difference(start).inMilliseconds.clamp(0, span);
+        if (span <= 0) return seg.offset;
+        final fraction = elapsed / span;
+        return seg.offset + (seg.width * fraction);
+      }
+    }
+    return segments.isNotEmpty
+        ? segments.last.offset + segments.last.width
+        : 0.0;
+  }
+}
+
+class _AxisSegment {
+  final DateTime start;
+  final DateTime end;
+  final double width;
+  final double offset;
+  final String label;
+
+  _AxisSegment({
+    required this.start,
+    required this.end,
+    required this.width,
+    required this.offset,
+    required this.label,
+  });
+}
+
+class _ValueSegment {
+  final DateTime start;
+  final DateTime end;
+  final String value;
+  final LocoAttrVersion? entry;
+
+  _ValueSegment({
+    required this.start,
+    required this.end,
+    required this.value,
+    this.entry,
+  });
+
+  bool overlaps(DateTime s, DateTime e) {
+    return start.isBefore(e) && end.isAfter(s);
+  }
+
+  _ValueSegment copyWith({DateTime? start, DateTime? end, String? value}) {
+    return _ValueSegment(
+      start: start ?? this.start,
+      end: end ?? this.end,
+      value: value ?? this.value,
+      entry: entry,
+    );
+  }
+}
+
+class _RowCell {
+  final String value;
+  final String rangeLabel;
+  final Color color;
+
+  const _RowCell({
+    required this.value,
+    required this.rangeLabel,
+    required this.color,
+  });
+
+  factory _RowCell.fromSegment(_ValueSegment seg) {
+    if (seg.value.isEmpty) {
+      return const _RowCell(
+        value: '',
+        rangeLabel: '',
+        color: Colors.transparent,
+      );
+    }
+    final displayStart = _formatDate(seg.start) ?? '';
+    return _RowCell(
+      value: seg.value,
+      rangeLabel: displayStart,
+      color: _colorForValue(seg.value),
+    );
+  }
+}
+
+class _ValueBlock {
+  final double left;
+  final double width;
+  final _RowCell cell;
+
+  const _ValueBlock({
+    required this.left,
+    required this.width,
+    required this.cell,
+  });
+
+  double get right => left + width;
+
+  _ValueBlock copyWith({
+    double? left,
+    double? width,
+    _RowCell? cell,
+  }) {
+    return _ValueBlock(
+      left: left ?? this.left,
+      width: width ?? this.width,
+      cell: cell ?? this.cell,
+    );
+  }
+}
+
+Color _colorForValue(String value) {
+  final hue = (value.hashCode % 360).toDouble();
+  final hsl = HSLColor.fromAHSL(1, hue, 0.55, 0.55);
+  return hsl.toColor();
+}

lib/components/pages/newEntry.dart

@@ -1,10 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
-import 'package:mileograph_flutter/services/dataService.dart';
-
-class NewEntryPage extends StatelessWidget {
-  Widget build(BuildContext context) {
-    final data = context.watch<DataService>();
-    return Center(child: Text("New Entry Page"));
-  }
-}

lib/components/pages/new_traction.dart

@@ -0,0 +1,616 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import 'package:mileograph_flutter/services/data_service.dart';
+
+enum _SpeedUnit { kph, mph }
+
+class NewTractionPage extends StatefulWidget {
+  const NewTractionPage({super.key});
+
+  @override
+  State<NewTractionPage> createState() => _NewTractionPageState();
+}
+
+class _NewTractionPageState extends State<NewTractionPage> {
+  final _formKey = GlobalKey<FormState>();
+  late final Map<String, TextEditingController> _controllers;
+  bool _preserved = false;
+  bool _remoteControl = false;
+  bool _cabAirConditioning = false;
+  bool _cabDoorControl = false;
+  bool _submitting = false;
+  _SpeedUnit _speedUnit = _SpeedUnit.kph;
+  String _status = 'unknown';
+  String _domain = 'unknown';
+  String _type = 'O';
+
+  static const _typeOptions = ['D', 'E', 'U', 'S', 'DMU', 'EMU', 'SMU', 'O'];
+
+  static const _domainOptions = [
+    'mainline',
+    'heritage',
+    'industrial',
+    'museum',
+    'private',
+    'unknown',
+  ];
+
+  static const _statusOptions = [
+    'active',
+    'stored',
+    'overhaul',
+    'withdrawn',
+    'preserved',
+    'scrapped',
+    'unknown',
+  ];
+
+  @override
+  void initState() {
+    super.initState();
+    _controllers = {
+      'number': TextEditingController(),
+      'evn': TextEditingController(),
+      'name': TextEditingController(),
+      'class': TextEditingController(),
+      'operator': TextEditingController(),
+      'notes': TextEditingController(),
+      'livery': TextEditingController(),
+      'location': TextEditingController(),
+      'owner': TextEditingController(),
+      'power_unit': TextEditingController(),
+      'headlights': TextEditingController(),
+      'pantograph': TextEditingController(),
+      'misc': TextEditingController(),
+      'coupling': TextEditingController(),
+      'axle_arrangement': TextEditingController(),
+      'track_gauge': TextEditingController(),
+      'loco_braking': TextEditingController(),
+      'train_braking': TextEditingController(),
+      'max_speed': TextEditingController(),
+      'buffer_type': TextEditingController(),
+      'drawgear_strength': TextEditingController(),
+      'train_heating': TextEditingController(),
+      'route_restriction': TextEditingController(),
+      'safety_systems': TextEditingController(),
+      'width': TextEditingController(),
+      'height': TextEditingController(),
+      'length': TextEditingController(),
+      'weight': TextEditingController(),
+      'power': TextEditingController(),
+      'tractive_effort': TextEditingController(),
+      'electrical_voltage': TextEditingController(),
+      'traction_motors': TextEditingController(),
+      'build_date': TextEditingController(),
+    };
+  }
+
+  @override
+  void dispose() {
+    for (final controller in _controllers.values) {
+      controller.dispose();
+    }
+    super.dispose();
+  }
+
+  String _value(String key, {String fallback = ''}) {
+    final text = _controllers[key]?.text.trim() ?? '';
+    if (text.isEmpty) return fallback;
+    return text;
+  }
+
+  String? _textOrNull(String key) {
+    final text = _controllers[key]?.text.trim() ?? '';
+    if (text.isEmpty) return null;
+    return text;
+  }
+
+  num? _parseNumber(String key) {
+    final raw = _controllers[key]?.text.trim();
+    if (raw == null || raw.isEmpty) return null;
+    final parsed = double.tryParse(raw);
+    if (parsed == null) return null;
+    return parsed % 1 == 0 ? parsed.toInt() : parsed;
+  }
+
+  bool get _statusIsActive => _status.toLowerCase() == 'active';
+
+  String? _validateBuildDate(String? input) {
+    final value = (input ?? '').trim();
+    if (value.isEmpty) return null;
+
+    final regex = RegExp(
+      r'^(\d{2})(\d{2}|[Xx]{2})-((0[1-9]|1[0-2])|[Xx]{2})-((0[1-9]|[12]\d|3[01])|[Xx]{2})$',
+    );
+    final match = regex.firstMatch(value);
+    if (match == null) {
+      return 'Use YYYY-MM-DD; allow XX for unknown DD/YY';
+    }
+
+    final year = match.group(1)! + match.group(2)!;
+    final monthPart = match.group(3)!;
+    final dayPart = match.group(4)!;
+    final monthUnknown = monthPart.toLowerCase() == 'xx';
+    final dayUnknown = dayPart.toLowerCase() == 'xx';
+
+    if (monthUnknown && !dayUnknown) {
+      return 'If month is XX, day must be XX';
+    }
+
+    // Validate actual calendar date when fully specified and year is numeric.
+    final yearHasUnknown = year.toLowerCase().contains('x');
+    if (!monthUnknown && !dayUnknown && !yearHasUnknown) {
+      final month = int.parse(monthPart);
+      final day = int.parse(dayPart);
+      final yearInt = int.parse(year);
+      try {
+        final dt = DateTime(yearInt, month, day);
+        if (dt.year != yearInt || dt.month != month || dt.day != day) {
+          return 'Enter a valid calendar date';
+        }
+      } catch (_) {
+        return 'Enter a valid calendar date';
+      }
+    }
+
+    return null;
+  }
+
+  double? _maxSpeedInKph() {
+    final raw = _controllers['max_speed']?.text.trim();
+    if (raw == null || raw.isEmpty) return null;
+    final parsed = double.tryParse(raw);
+    if (parsed == null) return null;
+    if (_speedUnit == _SpeedUnit.kph) return parsed;
+    return parsed * 1.60934;
+  }
+
+  Map<String, dynamic> _buildPayload() {
+    final isActive = _statusIsActive;
+    final payload = <String, dynamic>{
+      'number': _value('number'),
+      'class': _value('class'),
+      'type': _type,
+      'status': _status,
+      'operational': isActive,
+      'gettable': isActive,
+      'preserved': _preserved,
+      'remote_control': _remoteControl,
+      'cab_air_conditioning': _cabAirConditioning,
+      'cab_door_control': _cabDoorControl,
+    };
+
+    void addIfPresent(String key, dynamic value) {
+      if (value == null) return;
+      if (value is String && value.trim().isEmpty) return;
+      payload[key] = value;
+    }
+
+    addIfPresent('evn', _textOrNull('evn'));
+    addIfPresent('name', _textOrNull('name'));
+    addIfPresent('operator', _textOrNull('operator'));
+    addIfPresent('notes', _textOrNull('notes'));
+    addIfPresent('domain', _domain);
+    addIfPresent('livery', _textOrNull('livery'));
+    addIfPresent('owner', _textOrNull('owner'));
+    addIfPresent('location', _textOrNull('location'));
+    addIfPresent('power_unit', _textOrNull('power_unit'));
+    addIfPresent('headlights', _textOrNull('headlights'));
+    addIfPresent('pantograph', _textOrNull('pantograph'));
+    addIfPresent('misc', _textOrNull('misc'));
+    addIfPresent('coupling', _textOrNull('coupling'));
+    addIfPresent('axle_arrangement', _textOrNull('axle_arrangement'));
+    addIfPresent('track_gauge', _parseNumber('track_gauge'));
+    addIfPresent('loco_braking', _textOrNull('loco_braking'));
+    addIfPresent('train_braking', _textOrNull('train_braking'));
+    addIfPresent('max_speed', _maxSpeedInKph());
+    addIfPresent('buffer_type', _textOrNull('buffer_type'));
+    addIfPresent('drawgear_strength', _textOrNull('drawgear_strength'));
+    addIfPresent('train_heating', _textOrNull('train_heating'));
+    addIfPresent('route_restriction', _textOrNull('route_restriction'));
+    addIfPresent('safety_systems', _textOrNull('safety_systems'));
+    addIfPresent('width', _parseNumber('width'));
+    addIfPresent('height', _parseNumber('height'));
+    addIfPresent('length', _parseNumber('length'));
+    addIfPresent('weight', _parseNumber('weight'));
+    addIfPresent('power', _parseNumber('power'));
+    addIfPresent('tractive_effort', _parseNumber('tractive_effort'));
+    addIfPresent('electrical_voltage', _textOrNull('electrical_voltage'));
+    addIfPresent('traction_motors', _textOrNull('traction_motors'));
+    addIfPresent('build_date', _textOrNull('build_date'));
+
+    return payload;
+  }
+
+  Future<void> _handleSubmit() async {
+    final form = _formKey.currentState;
+    if (form == null) return;
+    if (!form.validate()) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(content: Text('Please fill the required fields.')),
+      );
+      return;
+    }
+    FocusScope.of(context).unfocus();
+    setState(() => _submitting = true);
+    final messenger = ScaffoldMessenger.of(context);
+    try {
+      await context.read<DataService>().createLoco(_buildPayload());
+      if (!mounted) return;
+      messenger.showSnackBar(
+        const SnackBar(content: Text('Traction added successfully')),
+      );
+      Navigator.of(context).pop(_controllers['class']?.text.trim());
+    } catch (e) {
+      if (!mounted) return;
+      messenger.showSnackBar(
+        SnackBar(content: Text('Failed to add traction: $e')),
+      );
+      setState(() => _submitting = false);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final isActive = _statusIsActive;
+    final size = MediaQuery.of(context).size;
+    final isNarrow = size.width < 720;
+    final fieldWidth = isNarrow ? double.infinity : 340.0;
+
+    Widget textField(
+      String key,
+      String label, {
+      bool required = false,
+      int maxLines = 1,
+      String? helper,
+      String? suffixText,
+      TextInputType? keyboardType,
+      double? widthOverride,
+      String? Function(String?)? validator,
+    }) {
+      return SizedBox(
+        width: widthOverride ?? fieldWidth,
+        child: TextFormField(
+          controller: _controllers[key],
+          decoration: InputDecoration(
+            labelText: required ? '$label *' : label,
+            helperText: helper,
+            suffixText: suffixText,
+            border: const OutlineInputBorder(),
+          ),
+          keyboardType: keyboardType,
+          maxLines: maxLines,
+          validator: (val) {
+            if (required && (val == null || val.trim().isEmpty)) {
+              return 'Required';
+            }
+            return validator?.call(val);
+          },
+        ),
+      );
+    }
+
+    Widget numberField(String key, String label, {String? suffixText}) {
+      return textField(
+        key,
+        label,
+        keyboardType: const TextInputType.numberWithOptions(decimal: true),
+        suffixText: suffixText,
+      );
+    }
+
+    Widget dropdownField({
+      required String label,
+      required List<String> options,
+      required String value,
+      required ValueChanged<String> onChanged,
+      bool required = false,
+      double? widthOverride,
+    }) {
+      return SizedBox(
+        width: widthOverride ?? fieldWidth,
+        child: DropdownButtonFormField<String>(
+          value: value,
+          decoration: InputDecoration(
+            labelText: required ? '$label *' : label,
+            border: const OutlineInputBorder(),
+          ),
+          items: options
+              .map((opt) => DropdownMenuItem(value: opt, child: Text(opt)))
+              .toList(),
+          onChanged: (val) {
+            if (val != null) onChanged(val);
+          },
+          validator: required
+              ? (val) => val == null || val.isEmpty ? 'Required' : null
+              : null,
+        ),
+      );
+    }
+
+    return SafeArea(
+      child: SingleChildScrollView(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                TextButton.icon(
+                  onPressed: () => Navigator.of(context).pop(),
+                  icon: const Icon(Icons.arrow_back),
+                  label: const Text('Back'),
+                ),
+              ],
+            ),
+            const SizedBox(height: 12),
+            Card(
+              child: Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: Form(
+                  key: _formKey,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        'Basics',
+                        style: Theme.of(context).textTheme.titleMedium,
+                      ),
+                      const SizedBox(height: 8),
+                      Wrap(
+                        spacing: 12,
+                        runSpacing: 12,
+                        children: [
+                          textField('number', 'Number', required: true),
+                          textField('class', 'Class', required: true),
+                          dropdownField(
+                            label: 'Type',
+                            options: _typeOptions,
+                            value: _type,
+                            required: true,
+                            onChanged: (val) => setState(() => _type = val),
+                          ),
+                          dropdownField(
+                            label: 'Status',
+                            options: _statusOptions,
+                            value: _status,
+                            required: true,
+                            onChanged: (val) => setState(() => _status = val),
+                          ),
+                          textField('name', 'Name'),
+                          textField('operator', 'Operator'),
+                          textField('evn', 'EVN'),
+                          dropdownField(
+                            label: 'Domain',
+                            options: _domainOptions,
+                            value: _domain,
+                            onChanged: (val) => setState(() => _domain = val),
+                          ),
+                          textField('livery', 'Livery'),
+                          textField('owner', 'Owner'),
+                          textField('location', 'Location'),
+                        ],
+                      ),
+                      const SizedBox(height: 12),
+                      Wrap(
+                        spacing: 8,
+                        runSpacing: 8,
+                        children: [
+                          Chip(
+                            avatar: Icon(
+                              isActive ? Icons.check_circle : Icons.block,
+                              color: isActive ? Colors.green : Colors.grey,
+                            ),
+                            label: Text('Gettable: ${isActive ? 'Yes' : 'No'}'),
+                          ),
+                          Chip(
+                            avatar: Icon(
+                              isActive ? Icons.check_circle : Icons.block,
+                              color: isActive ? Colors.green : Colors.grey,
+                            ),
+                            label: Text(
+                              'Operational: ${isActive ? 'Yes' : 'No'}',
+                            ),
+                          ),
+                        ],
+                      ),
+                      const SizedBox(height: 4),
+                      Text(
+                        'Status controls availability: active sets gettable and operational to true, everything else sets them to false.',
+                        style: Theme.of(context).textTheme.bodySmall,
+                      ),
+                      const SizedBox(height: 16),
+                      Text(
+                        'Equipment & Capabilities',
+                        style: Theme.of(context).textTheme.titleMedium,
+                      ),
+                      const SizedBox(height: 8),
+                      Wrap(
+                        spacing: 12,
+                        runSpacing: 12,
+                        children: [
+                          SizedBox(
+                            width: fieldWidth,
+                            child: SwitchListTile(
+                              contentPadding: EdgeInsets.zero,
+                              value: _preserved,
+                              onChanged: (v) => setState(() => _preserved = v),
+                              title: const Text('Preserved'),
+                            ),
+                          ),
+                          SizedBox(
+                            width: fieldWidth,
+                            child: SwitchListTile(
+                              contentPadding: EdgeInsets.zero,
+                              value: _remoteControl,
+                              onChanged: (v) =>
+                                  setState(() => _remoteControl = v),
+                              title: const Text('Remote control'),
+                            ),
+                          ),
+                          SizedBox(
+                            width: fieldWidth,
+                            child: SwitchListTile(
+                              contentPadding: EdgeInsets.zero,
+                              value: _cabAirConditioning,
+                              onChanged: (v) =>
+                                  setState(() => _cabAirConditioning = v),
+                              title: const Text('Cab air conditioning'),
+                            ),
+                          ),
+                          SizedBox(
+                            width: fieldWidth,
+                            child: SwitchListTile(
+                              contentPadding: EdgeInsets.zero,
+                              value: _cabDoorControl,
+                              onChanged: (v) =>
+                                  setState(() => _cabDoorControl = v),
+                              title: const Text('Cab door control'),
+                            ),
+                          ),
+                        ],
+                      ),
+                      const SizedBox(height: 8),
+                      Wrap(
+                        spacing: 12,
+                        runSpacing: 12,
+                        children: [
+                          textField('power_unit', 'Power unit'),
+                          textField('headlights', 'Headlights'),
+                          textField('pantograph', 'Pantograph'),
+                          textField('misc', 'Misc'),
+                          textField('coupling', 'Coupling'),
+                          textField('axle_arrangement', 'Axle arrangement'),
+                          textField('loco_braking', 'Loco braking'),
+                          textField('train_braking', 'Train braking'),
+                          textField('buffer_type', 'Buffer type'),
+                          textField('drawgear_strength', 'Drawgear strength'),
+                          textField('train_heating', 'Train heating'),
+                          textField('route_restriction', 'Route restriction'),
+                          textField('safety_systems', 'Safety systems'),
+                        ],
+                      ),
+                      const SizedBox(height: 16),
+                      Text(
+                        'Dimensions & Performance',
+                        style: Theme.of(context).textTheme.titleMedium,
+                      ),
+                      const SizedBox(height: 8),
+                      Wrap(
+                        spacing: 12,
+                        runSpacing: 12,
+                        children: [
+                          numberField('weight', 'Weight', suffixText: 'tonnes'),
+                          numberField('length', 'Length', suffixText: 'mm'),
+                          numberField('width', 'Width', suffixText: 'mm'),
+                          numberField('height', 'Height', suffixText: 'mm'),
+                          numberField(
+                            'track_gauge',
+                            'Track gauge',
+                            suffixText: 'mm',
+                          ),
+                          numberField('power', 'Power', suffixText: 'kW'),
+                          numberField(
+                            'tractive_effort',
+                            'Tractive effort',
+                            suffixText: 'kN',
+                          ),
+                          SizedBox(
+                            width: fieldWidth,
+                            child: Row(
+                              children: [
+                                Expanded(
+                                  child: numberField(
+                                    'max_speed',
+                                    'Max speed (${_speedUnit == _SpeedUnit.kph ? 'km/h' : 'mph'})',
+                                  ),
+                                ),
+                                const SizedBox(width: 8),
+                                SizedBox(
+                                  width: 120,
+                                  child: DropdownButtonFormField<_SpeedUnit>(
+                                    value: _speedUnit,
+                                    decoration: const InputDecoration(
+                                      border: OutlineInputBorder(),
+                                      labelText: 'Units',
+                                    ),
+                                    items: const [
+                                      DropdownMenuItem(
+                                        value: _SpeedUnit.kph,
+                                        child: Text('km/h'),
+                                      ),
+                                      DropdownMenuItem(
+                                        value: _SpeedUnit.mph,
+                                        child: Text('mph'),
+                                      ),
+                                    ],
+                                    onChanged: (val) {
+                                      if (val != null) {
+                                        setState(() => _speedUnit = val);
+                                      }
+                                    },
+                                  ),
+                                ),
+                              ],
+                            ),
+                          ),
+                        ],
+                      ),
+                      const SizedBox(height: 16),
+                      Text(
+                        'Electrical & Build',
+                        style: Theme.of(context).textTheme.titleMedium,
+                      ),
+                      const SizedBox(height: 8),
+                      Wrap(
+                        spacing: 12,
+                        runSpacing: 12,
+                        children: [
+                          textField('electrical_voltage', 'Electrical voltage'),
+                          textField('traction_motors', 'Traction motors'),
+                          textField(
+                            'build_date',
+                            'Build date',
+                            helper:
+                                'Format YYYY-MM-DD, use XX for unknown DD/YY',
+                            validator: _validateBuildDate,
+                          ),
+                        ],
+                      ),
+                      const SizedBox(height: 16),
+                      textField(
+                        'notes',
+                        'Notes',
+                        maxLines: 3,
+                        helper: 'Optional notes',
+                        widthOverride: double.infinity,
+                      ),
+                      const SizedBox(height: 20),
+                      SizedBox(
+                        width: double.infinity,
+                        child: ElevatedButton.icon(
+                          onPressed: _submitting ? null : _handleSubmit,
+                          icon: _submitting
+                              ? const SizedBox(
+                                  width: 16,
+                                  height: 16,
+                                  child: CircularProgressIndicator(
+                                    strokeWidth: 2,
+                                  ),
+                                )
+                              : const Icon(Icons.save),
+                          label: Text(_submitting ? 'Submitting...' : 'Submit'),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/components/pages/traction.dart

@@ -1,41 +1,621 @@
 import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:mileograph_flutter/components/traction/traction_card.dart';
 import 'package:mileograph_flutter/objects/objects.dart';
+import 'package:mileograph_flutter/services/data_service.dart';
 import 'package:provider/provider.dart';
-import 'package:mileograph_flutter/services/dataService.dart';
 
-class TractionPage extends StatelessWidget {
+class TractionPage extends StatefulWidget {
+  const TractionPage({
+    super.key,
+    this.selectionMode = false,
+    this.onSelect,
+    this.selectedKeys = const {},
+  });
+
+  final bool selectionMode;
+  final ValueChanged<LocoSummary>? onSelect;
+  final Set<String> selectedKeys;
+
+  @override
+  State<TractionPage> createState() => _TractionPageState();
+}
+
+class _TractionPageState extends State<TractionPage> {
+  final _classController = TextEditingController();
+  final _classFocusNode = FocusNode();
+  final _numberController = TextEditingController();
+  final _nameController = TextEditingController();
+  bool _mileageFirst = true;
+  bool _initialised = false;
+  bool _showAdvancedFilters = false;
+  String? _selectedClass;
+  late Set<String> _selectedKeys;
+
+  final Map<String, TextEditingController> _dynamicControllers = {};
+  final Map<String, String?> _enumSelections = {};
+
+  @override
+  void initState() {
+    super.initState();
+    _classController.addListener(_onClassTextChanged);
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    if (!_initialised) {
+      _initialised = true;
+      _selectedKeys = {...widget.selectedKeys};
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        final data = context.read<DataService>();
+        data.fetchClassList();
+        data.fetchEventFields();
+        _refreshTraction();
+      });
+    }
+  }
+
+  @override
+  void dispose() {
+    _classController.removeListener(_onClassTextChanged);
+    _classController.dispose();
+    _classFocusNode.dispose();
+    _numberController.dispose();
+    _nameController.dispose();
+    for (final controller in _dynamicControllers.values) {
+      controller.dispose();
+    }
+    super.dispose();
+  }
+
+  bool get _hasFilters {
+    final dynamicFieldsUsed =
+        _dynamicControllers.values.any(
+          (controller) => controller.text.trim().isNotEmpty,
+        ) ||
+        _enumSelections.values.any(
+          (value) => (value ?? '').toString().trim().isNotEmpty,
+        );
+
+    return [
+          _selectedClass,
+          _classController.text,
+          _numberController.text,
+          _nameController.text,
+        ].any((value) => (value ?? '').toString().trim().isNotEmpty) ||
+        dynamicFieldsUsed;
+  }
+
+  Future<void> _refreshTraction({bool append = false}) async {
+    final data = context.read<DataService>();
+    final filters = <String, dynamic>{};
+    final name = _nameController.text.trim();
+    if (name.isNotEmpty) filters['name'] = name;
+    _dynamicControllers.forEach((key, controller) {
+      final value = controller.text.trim();
+      if (value.isNotEmpty) filters[key] = value;
+    });
+    _enumSelections.forEach((key, value) {
+      if (value != null && value.toString().trim().isNotEmpty) {
+        filters[key] = value;
+      }
+    });
+    final hadOnly = !_hasFilters;
+    await data.fetchTraction(
+      hadOnly: hadOnly,
+      locoClass: _selectedClass ?? _classController.text.trim(),
+      locoNumber: _numberController.text.trim(),
+      offset: append ? data.traction.length : 0,
+      append: append,
+      filters: filters,
+      mileageFirst: _mileageFirst,
+    );
+  }
+
+  void _clearFilters() {
+    for (final controller in [
+      _classController,
+      _numberController,
+      _nameController,
+    ]) {
+      controller.clear();
+    }
+    for (final controller in _dynamicControllers.values) {
+      controller.clear();
+    }
+    _enumSelections.clear();
+    setState(() {
+      _selectedClass = null;
+      _mileageFirst = true;
+    });
+    _refreshTraction();
+  }
+
+  void _onClassTextChanged() {
+    if (_selectedClass != null &&
+        _classController.text.trim() != (_selectedClass ?? '')) {
+      setState(() {
+        _selectedClass = null;
+      });
+    }
+  }
+
+  List<EventField> _activeEventFields(List<EventField> fields) {
+    return fields
+        .where(
+          (field) => ![
+            'class',
+            'number',
+            'name',
+            'build date',
+            'build_date',
+          ].contains(field.name.toLowerCase()),
+        )
+        .toList();
+  }
+
+  void _ensureControllersForFields(List<EventField> fields) {
+    for (final field in fields) {
+      if (field.enumValues != null) {
+        _enumSelections.putIfAbsent(field.name, () => null);
+      } else {
+        _dynamicControllers.putIfAbsent(
+          field.name,
+          () => TextEditingController(),
+        );
+      }
+    }
+  }
+
+  @override
   Widget build(BuildContext context) {
     final data = context.watch<DataService>();
-    return ListView.builder(
+    final traction = data.traction;
-      itemCount: data.traction.length,
+    final classOptions = data.locoClasses;
-      itemBuilder: (context, index) {
+    final isMobile = MediaQuery.of(context).size.width < 700;
-        final loco = data.traction[index];
+    _ensureControllersForFields(data.eventFields);
-        return Card(
+    final extraFields = _activeEventFields(data.eventFields);
-          margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+
-          child: Padding(
+    final listView = RefreshIndicator(
-            padding: EdgeInsets.all(16),
+      onRefresh: _refreshTraction,
-            child: Column(
+      child: ListView(
-              mainAxisAlignment: MainAxisAlignment.start,
+        padding: const EdgeInsets.all(16),
-              children: [
+        physics: const AlwaysScrollableScrollPhysics(),
-                Row(
+        children: [
-                  mainAxisAlignment: MainAxisAlignment.start,
+          Row(
-                  children: [Text('${loco.locoClass} ${loco.number}')],
+            crossAxisAlignment: CrossAxisAlignment.start,
-                ),
+            children: [
-                Row(
+              Expanded(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     Text(
-                      '${loco.name}',
+                      'Fleet',
-                      style: TextStyle(fontStyle: FontStyle.italic),
+                      style: Theme.of(context).textTheme.labelMedium,
+                    ),
+                    const SizedBox(height: 2),
+                    Text(
+                      'Traction',
+                      style: Theme.of(context).textTheme.headlineSmall,
                     ),
-                    Text('${loco.mileage} mi'),
                   ],
                 ),
-              ],
+              ),
+              Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  IconButton(
+                    tooltip: 'Refresh',
+                    onPressed: _refreshTraction,
+                    icon: const Icon(Icons.refresh),
+                  ),
+                  const SizedBox(width: 8),
+                  FilledButton.icon(
+                    onPressed: () async {
+                      final createdClass = await context.push<String>(
+                        '/traction/new',
+                      );
+                      if (createdClass != null && createdClass.isNotEmpty) {
+                        _classController.text = createdClass;
+                        _selectedClass = createdClass;
+                        if (mounted) {
+                          _refreshTraction();
+                        }
+                      } else if (mounted && createdClass == '') {
+                        _refreshTraction();
+                      }
+                    },
+                    icon: const Icon(Icons.add),
+                    label: const Text('New Traction'),
+                  ),
+                ],
+              ),
+            ],
+          ),
+          const SizedBox(height: 12),
+          Card(
+            child: Padding(
+              padding: const EdgeInsets.all(12),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Text(
+                        'Filters',
+                        style: Theme.of(context).textTheme.titleMedium,
+                      ),
+                      TextButton(
+                        onPressed: _clearFilters,
+                        child: const Text('Clear'),
+                      ),
+                    ],
+                  ),
+                  const SizedBox(height: 8),
+                  Wrap(
+                    spacing: 12,
+                    runSpacing: 12,
+                    children: [
+                      SizedBox(
+                        width: isMobile ? double.infinity : 240,
+                        child: RawAutocomplete<String>(
+                          textEditingController: _classController,
+                          focusNode: _classFocusNode,
+                          optionsBuilder: (TextEditingValue textEditingValue) {
+                            final query = textEditingValue.text.toLowerCase();
+                            if (query.isEmpty) {
+                              return classOptions;
+                            }
+                            return classOptions.where(
+                              (c) => c.toLowerCase().contains(query),
+                            );
+                          },
+                          fieldViewBuilder:
+                              (
+                                context,
+                                controller,
+                                focusNode,
+                                onFieldSubmitted,
+                              ) {
+                                return TextField(
+                                  controller: controller,
+                                  focusNode: focusNode,
+                                  decoration: const InputDecoration(
+                                    labelText: 'Class',
+                                    border: OutlineInputBorder(),
+                                  ),
+                                  onSubmitted: (_) => _refreshTraction(),
+                                );
+                              },
+                          optionsViewBuilder: (context, onSelected, options) {
+                            final optionList = options.toList();
+                            if (optionList.isEmpty) {
+                              return const SizedBox.shrink();
+                            }
+                            final maxWidth = isMobile
+                                ? MediaQuery.of(context).size.width - 64
+                                : 240.0;
+                            return Align(
+                              alignment: Alignment.topLeft,
+                              child: Material(
+                                elevation: 4,
+                                child: ConstrainedBox(
+                                  constraints: BoxConstraints(
+                                    maxWidth: maxWidth,
+                                    maxHeight: 240,
+                                  ),
+                                  child: ListView.builder(
+                                    padding: EdgeInsets.zero,
+                                    shrinkWrap: true,
+                                    itemCount: optionList.length,
+                                    itemBuilder: (context, index) {
+                                      final option = optionList[index];
+                                      return ListTile(
+                                        title: Text(option),
+                                        onTap: () => onSelected(option),
+                                      );
+                                    },
+                                  ),
+                                ),
+                              ),
+                            );
+                          },
+                          onSelected: (String selection) {
+                            setState(() {
+                              _selectedClass = selection;
+                              _classController.text = selection;
+                            });
+                            _refreshTraction();
+                          },
+                        ),
+                      ),
+                      SizedBox(
+                        width: isMobile ? double.infinity : 220,
+                        child: TextField(
+                          controller: _numberController,
+                          decoration: const InputDecoration(
+                            labelText: 'Number',
+                            border: OutlineInputBorder(),
+                          ),
+                          onSubmitted: (_) => _refreshTraction(),
+                        ),
+                      ),
+                      SizedBox(
+                        width: isMobile ? double.infinity : 220,
+                        child: TextField(
+                          controller: _nameController,
+                          decoration: const InputDecoration(
+                            labelText: 'Name',
+                            border: OutlineInputBorder(),
+                          ),
+                          onSubmitted: (_) => _refreshTraction(),
+                        ),
+                      ),
+                      FilterChip(
+                        label: Text(
+                          _mileageFirst ? 'Mileage first' : 'Number order',
+                        ),
+                        selected: _mileageFirst,
+                        onSelected: (v) {
+                          setState(() => _mileageFirst = v);
+                          _refreshTraction();
+                        },
+                      ),
+                      TextButton.icon(
+                        onPressed: () => setState(
+                          () => _showAdvancedFilters = !_showAdvancedFilters,
+                        ),
+                        icon: Icon(
+                          _showAdvancedFilters
+                              ? Icons.expand_less
+                              : Icons.expand_more,
+                        ),
+                        label: Text(
+                          _showAdvancedFilters
+                              ? 'Hide filters'
+                              : 'More filters',
+                        ),
+                      ),
+                      ElevatedButton.icon(
+                        onPressed: _refreshTraction,
+                        icon: const Icon(Icons.search),
+                        label: const Text('Search'),
+                      ),
+                    ],
+                  ),
+                  AnimatedCrossFade(
+                    crossFadeState: _showAdvancedFilters
+                        ? CrossFadeState.showFirst
+                        : CrossFadeState.showSecond,
+                    duration: const Duration(milliseconds: 200),
+                    firstChild: Padding(
+                      padding: const EdgeInsets.only(top: 12.0),
+                      child: data.isEventFieldsLoading
+                          ? const Center(
+                              child: Padding(
+                                padding: EdgeInsets.all(8.0),
+                                child: CircularProgressIndicator(
+                                  strokeWidth: 2,
+                                ),
+                              ),
+                            )
+                          : extraFields.isEmpty
+                          ? const Text('No extra filters available right now.')
+                          : Wrap(
+                              spacing: 12,
+                              runSpacing: 12,
+                              children: extraFields
+                                  .map(
+                                    (field) => _buildFilterInput(
+                                      context,
+                                      field,
+                                      isMobile,
+                                    ),
+                                  )
+                                  .toList(),
+                            ),
+                    ),
+                    secondChild: const SizedBox.shrink(),
+                  ),
+                ],
+              ),
             ),
           ),
-        );
+          const SizedBox(height: 12),
-      },
+          Stack(
+            children: [
+              if (data.isTractionLoading && traction.isEmpty)
+                const Padding(
+                  padding: EdgeInsets.symmetric(vertical: 32.0),
+                  child: Center(child: CircularProgressIndicator()),
+                )
+              else if (traction.isEmpty)
+                Card(
+                  child: Padding(
+                    padding: const EdgeInsets.all(16.0),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          'No traction found',
+                          style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                            fontWeight: FontWeight.w700,
+                          ),
+                        ),
+                        const SizedBox(height: 8),
+                        const Text('Try relaxing the filters or sync again.'),
+                      ],
+                    ),
+                  ),
+                )
+              else
+                Column(
+                  children: [
+                    ...traction.map(
+                      (loco) => TractionCard(
+                        loco: loco,
+                        selectionMode: widget.selectionMode,
+                        isSelected: _isSelected(loco),
+                        onShowInfo: () => showTractionDetails(context, loco),
+                        onOpenTimeline: () => _openTimeline(loco),
+                        onToggleSelect:
+                            widget.selectionMode ? () => _toggleSelection(loco) : null,
+                      ),
+                    ),
+                    if (data.tractionHasMore || data.isTractionLoading)
+                      Padding(
+                        padding: const EdgeInsets.only(top: 8.0),
+                        child: OutlinedButton.icon(
+                          onPressed: data.isTractionLoading
+                              ? null
+                              : () => _refreshTraction(append: true),
+                          icon: data.isTractionLoading
+                              ? const SizedBox(
+                                  height: 14,
+                                  width: 14,
+                                  child: CircularProgressIndicator(strokeWidth: 2),
+                                )
+                              : const Icon(Icons.expand_more),
+                          label: Text(
+                            data.isTractionLoading ? 'Loading...' : 'Load more',
+                          ),
+                        ),
+                      ),
+                  ],
+                ),
+              if (data.isTractionLoading)
+                Positioned.fill(
+                      child: IgnorePointer(
+                        child: Container(
+                      color: Theme.of(context).colorScheme.surface.withValues(alpha: 0.6),
+                      child: const Center(child: CircularProgressIndicator()),
+                    ),
+                  ),
+                ),
+            ],
+          ),
+        ],
+      ),
+    );
+
+    if (widget.selectionMode) {
+      return Scaffold(
+        appBar: AppBar(
+          leadingWidth: 140,
+          leading: Padding(
+            padding: const EdgeInsets.only(left: 8.0),
+            child: TextButton.icon(
+              onPressed: () => Navigator.of(context).pop(),
+              icon: const Icon(Icons.arrow_back),
+              label: const Text('Back'),
+              style: TextButton.styleFrom(
+                padding: const EdgeInsets.symmetric(
+                  horizontal: 12,
+                  vertical: 10,
+                ),
+                foregroundColor: Theme.of(context).colorScheme.onSurface,
+              ),
+            ),
+          ),
+          title: null,
+        ),
+        body: listView,
+      );
+    }
+
+    return listView;
+  }
+
+  void _toggleSelection(LocoSummary loco) {
+    final keyVal = '${loco.locoClass}-${loco.number}';
+    if (widget.onSelect != null) {
+      widget.onSelect!(loco);
+    }
+    setState(() {
+      if (_selectedKeys.contains(keyVal)) {
+        _selectedKeys.remove(keyVal);
+      } else {
+        _selectedKeys.add(keyVal);
+      }
+    });
+  }
+
+  bool _isSelected(LocoSummary loco) {
+    final keyVal = '${loco.locoClass}-${loco.number}';
+    return _selectedKeys.contains(keyVal);
+  }
+
+  void _openTimeline(LocoSummary loco) {
+    final label = '${loco.locoClass} ${loco.number}'.trim();
+    context.push(
+      '/traction/${loco.id}/timeline',
+      extra: {'label': label},
+    );
+  }
+
+  Widget _buildFilterInput(
+    BuildContext context,
+    EventField field,
+    bool isMobile,
+  ) {
+    final width = isMobile ? double.infinity : 220.0;
+    if (field.enumValues != null && field.enumValues!.isNotEmpty) {
+      final options = field.enumValues!
+          .map((e) => e.toString())
+          .toSet()
+          .toList();
+      final currentValue = _enumSelections[field.name];
+      final safeValue = options.contains(currentValue) ? currentValue : null;
+      return SizedBox(
+        width: width,
+        child: DropdownButtonFormField<String?>(
+          value: safeValue,
+          decoration: InputDecoration(
+            labelText: field.display,
+            border: const OutlineInputBorder(),
+          ),
+          items: [
+            const DropdownMenuItem(value: null, child: Text('Any')),
+            ...options.map(
+              (value) => DropdownMenuItem(value: value, child: Text(value)),
+            ),
+          ],
+          onChanged: (val) {
+            setState(() {
+              _enumSelections[field.name] = val;
+            });
+            _refreshTraction();
+          },
+        ),
+      );
+    }
+
+    final controller =
+        _dynamicControllers[field.name] ?? TextEditingController();
+    _dynamicControllers[field.name] = controller;
+    TextInputType? inputType;
+    if (field.type != null) {
+      final type = field.type!.toLowerCase();
+      if (type.contains('int') ||
+          type.contains('num') ||
+          type.contains('double')) {
+        inputType = const TextInputType.numberWithOptions(decimal: true);
+      }
+    }
+
+    return SizedBox(
+      width: width,
+      child: TextField(
+        controller: controller,
+        keyboardType: inputType,
+        decoration: InputDecoration(
+          labelText: field.display,
+          border: const OutlineInputBorder(),
+        ),
+        onSubmitted: (_) => _refreshTraction(),
+      ),
     );
   }
 }

lib/components/pages/trips.dart

@@ -1,28 +1,261 @@
 import 'package:flutter/material.dart';
+import 'package:mileograph_flutter/objects/objects.dart';
+import 'package:mileograph_flutter/services/data_service.dart';
 import 'package:provider/provider.dart';
-import 'package:mileograph_flutter/services/dataService.dart';
 
-class TripsPage extends StatelessWidget {
+class TripsPage extends StatefulWidget {
+  const TripsPage({super.key});
+
+  @override
+  State<TripsPage> createState() => _TripsPageState();
+}
+
+class _TripsPageState extends State<TripsPage> {
+  bool _initialised = false;
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    if (!_initialised) {
+      _initialised = true;
+      _refreshTrips();
+    }
+  }
+
+  Future<void> _refreshTrips() async {
+    await context.read<DataService>().fetchTripDetails();
+  }
+
+  @override
   Widget build(BuildContext context) {
     final data = context.watch<DataService>();
-    return ListView.builder(
+    final tripDetails = data.tripDetails;
-      itemCount: data.legs.length,
+    final tripSummaries = data.trips;
-      itemBuilder: (context, index) {
+    final isMobile = MediaQuery.of(context).size.width < 700;
-        final leg = data.legs[index];
+    final showLoading = data.isTripDetailsLoading && tripDetails.isEmpty;
-        return Card(
+
-          margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+    return RefreshIndicator(
+      onRefresh: _refreshTrips,
+      child: ListView(
+        padding: const EdgeInsets.all(16),
+        physics: const AlwaysScrollableScrollPhysics(),
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    'Journeys',
+                    style: Theme.of(context).textTheme.labelMedium,
+                  ),
+                  const SizedBox(height: 2),
+                  Text(
+                    'Trips',
+                    style: Theme.of(context).textTheme.headlineSmall,
+                  ),
+                ],
+              ),
+              Row(
+                children: [
+                  IconButton(
+                    onPressed: _refreshTrips,
+                    icon: const Icon(Icons.refresh),
+                    tooltip: 'Refresh trips',
+                  ),
+                ],
+              ),
+            ],
+          ),
+          const SizedBox(height: 12),
+          if (showLoading)
+            const Center(
+              child: Padding(
+                padding: EdgeInsets.symmetric(vertical: 24.0),
+                child: CircularProgressIndicator(),
+              ),
+            )
+          else if (tripDetails.isEmpty && tripSummaries.isEmpty)
+            Card(
+              child: Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      'No trips yet',
+                      style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                        fontWeight: FontWeight.w700,
+                      ),
+                    ),
+                    const SizedBox(height: 8),
+                    const Text(
+                      'Use the Add entry flow to start grouping legs into trips.',
+                    ),
+                  ],
+                ),
+              ),
+            )
+          else if (tripDetails.isEmpty)
+            Column(
+              children: tripSummaries
+                  .map(
+                    (trip) => Card(
+                      child: ListTile(
+                        title: Text(trip.tripName),
+                        subtitle: Text(
+                          '${trip.tripMileage.toStringAsFixed(1)} mi',
+                        ),
+                      ),
+                    ),
+                  )
+                  .toList(),
+            )
+          else
+            Column(
+              children: tripDetails
+                  .map((trip) => _buildTripCard(context, trip, isMobile))
+                  .toList(),
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildTripCard(BuildContext context, TripDetail trip, bool isMobile) {
+    final legs = trip.legs;
+    return Card(
+      child: Padding(
+        padding: const EdgeInsets.all(12.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      trip.name,
+                      style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                        fontWeight: FontWeight.w700,
+                      ),
+                    ),
+                    Text(
+                      '${trip.mileage.toStringAsFixed(1)} mi · ${trip.legCount} legs',
+                      style: Theme.of(context).textTheme.bodyMedium,
+                    ),
+                  ],
+                ),
+                Row(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    IconButton(
+                      icon: const Icon(Icons.train),
+                      tooltip: 'Traction',
+                      onPressed: () => _showTripWinners(context, trip),
+                    ),
+                    IconButton(
+                      icon: const Icon(Icons.open_in_new),
+                      tooltip: 'Details',
+                      onPressed: () => _showTripDetail(context, trip),
+                    ),
+                  ],
+                ),
+              ],
+            ),
+            const SizedBox(height: 8),
+            if (legs.isNotEmpty)
+              Column(
+                children: legs.take(isMobile ? 2 : 3).map((leg) {
+                  return ListTile(
+                    dense: isMobile,
+                    contentPadding: EdgeInsets.zero,
+                    leading: const Icon(Icons.train),
+                    title: Text('${leg.start} → ${leg.end}'),
+                    subtitle: Text(
+                      _formatDate(leg.beginTime),
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                    ),
+                    trailing: Text(
+                      leg.mileage?.toStringAsFixed(1) ?? '-',
+                      style: Theme.of(context).textTheme.labelLarge?.copyWith(
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  );
+                }).toList(),
+              ),
+            if (legs.length > 3)
+              Padding(
+                padding: const EdgeInsets.only(top: 6.0),
+                child: Text(
+                  '+${legs.length - 3} more legs',
+                  style: Theme.of(context).textTheme.bodySmall,
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  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')}';
+  }
+
+  void _showTripDetail(BuildContext context, TripDetail trip) {
+    showModalBottomSheet(
+      context: context,
+      isScrollControlled: true,
+      builder: (_) {
+        return SafeArea(
           child: Padding(
-            padding: EdgeInsets.all(16),
+            padding: const EdgeInsets.all(16.0),
             child: Column(
+              mainAxisSize: MainAxisSize.min,
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                Text(
+                Row(
-                  '${leg.start} → ${leg.end}',
+                  children: [
-                  style: TextStyle(fontSize: 16),
+                    IconButton(
+                      icon: const Icon(Icons.arrow_back),
+                      onPressed: () => Navigator.of(context).pop(),
+                    ),
+                    Text(
+                      trip.name,
+                      style: Theme.of(context).textTheme.titleMedium?.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),
+                        ),
+                      );
+                    },
+                  ),
                 ),
-                Text('Mileage: ${leg.mileage.toStringAsFixed(2)} km'),
-                Text('Headcode: ${leg.headcode}'),
-                Text('Begin: ${leg.beginTime}'),
               ],
             ),
           ),
@@ -30,4 +263,113 @@ class TripsPage extends StatelessWidget {
       },
     );
   }
+
+  void _showTripWinners(BuildContext context, TripDetail trip) {
+    showModalBottomSheet(
+      context: context,
+      isScrollControlled: true,
+      builder: (_) {
+        final data = context.read<DataService>();
+        return SafeArea(
+          child: FutureBuilder<List<TripLocoStat>>(
+            future: data.fetchTripLocoStats(trip.id),
+            builder: (ctx, snapshot) {
+              final items = snapshot.data ?? [];
+              final loading =
+                  snapshot.connectionState == ConnectionState.waiting;
+              return 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(),
+                        ),
+                        Text(
+                          trip.name,
+                          style: Theme.of(context)
+                              .textTheme
+                              .titleMedium
+                              ?.copyWith(fontWeight: FontWeight.bold),
+                        ),
+                        const Spacer(),
+                        Text('${trip.mileage.toStringAsFixed(1)} mi'),
+                      ],
+                    ),
+                    const SizedBox(height: 8),
+                    if (!loading && items.isNotEmpty) ...[
+                      Wrap(
+                        spacing: 8,
+                        runSpacing: 8,
+                        children: [
+                          Chip(
+                            avatar: const Icon(Icons.train, size: 16),
+                            label: Text('Total had: ${items.length}'),
+                          ),
+                          Chip(
+                            avatar: const Icon(Icons.star, size: 16),
+                            label: Text(
+                              'Winners: ${items.where((e) => e.won == true).length}',
+                            ),
+                          ),
+                        ],
+                      ),
+                      const SizedBox(height: 8),
+                    ],
+                    if (loading)
+                      const Center(
+                        child: Padding(
+                          padding: EdgeInsets.symmetric(vertical: 24.0),
+                          child: CircularProgressIndicator(),
+                        ),
+                      )
+                    else if (items.isEmpty)
+                      const Padding(
+                        padding: EdgeInsets.symmetric(vertical: 16.0),
+                        child: Text('No traction recorded for this trip yet.'),
+                      )
+                    else
+                      SizedBox(
+                        height: MediaQuery.of(context).size.height * 0.6,
+                        child: ListView.builder(
+                          itemCount: items.length,
+                          itemBuilder: (context, index) {
+                            final loco = items[index];
+                            final won = loco.won;
+                            final isWon = won == true;
+                            return ListTile(
+                              leading: const Icon(Icons.train),
+                              title: Text('${loco.locoClass} ${loco.number}'),
+                              subtitle:
+                                  loco.name == null || loco.name!.isEmpty
+                                      ? null
+                                      : Text(loco.name!),
+                              trailing: Chip(
+                                label: Text(isWon ? 'Won' : 'Dud'),
+                                backgroundColor: isWon
+                                    ? Colors.green.shade100
+                                    : Colors.grey.shade300,
+                                labelStyle: TextStyle(
+                                  color: isWon
+                                      ? Colors.green.shade900
+                                      : Colors.grey.shade800,
+                                ),
+                              ),
+                            );
+                          },
+                        ),
+                      ),
+                  ],
+                ),
+              );
+            },
+          ),
+        );
+      },
+    );
+  }
 }

lib/components/traction/traction_card.dart

@@ -0,0 +1,336 @@
+import 'package:flutter/material.dart';
+import 'package:mileograph_flutter/objects/objects.dart';
+
+class TractionCard extends StatelessWidget {
+  const TractionCard({
+    super.key,
+    required this.loco,
+    required this.selectionMode,
+    required this.isSelected,
+    required this.onShowInfo,
+    required this.onOpenTimeline,
+    this.onToggleSelect,
+  });
+
+  final LocoSummary loco;
+  final bool selectionMode;
+  final bool isSelected;
+  final VoidCallback onShowInfo;
+  final VoidCallback onOpenTimeline;
+  final VoidCallback? onToggleSelect;
+
+  @override
+  Widget build(BuildContext context) {
+    final status = loco.status ?? 'Unknown';
+    final operatorName = loco.operator ?? '';
+    final domain = loco.domain ?? '';
+    final hasMileageOrTrips = _hasMileageOrTrips(loco);
+    final statusColors = _statusChipColors(context, status);
+
+    return Card(
+      child: Padding(
+        padding: const EdgeInsets.all(12.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      children: [
+                        Text(
+                          loco.number,
+                          style: Theme.of(context).textTheme.headlineSmall
+                              ?.copyWith(fontWeight: FontWeight.w800),
+                        ),
+                        if (hasMileageOrTrips)
+                          Padding(
+                            padding: const EdgeInsets.only(left: 6.0),
+                            child: Icon(
+                              Icons.check_circle,
+                              size: 18,
+                              color: Colors.green.shade600,
+                            ),
+                          ),
+                      ],
+                    ),
+                    Text(
+                      loco.locoClass,
+                      style: Theme.of(context).textTheme.labelMedium,
+                    ),
+                    if ((loco.name ?? '').isNotEmpty)
+                      Padding(
+                        padding: const EdgeInsets.only(top: 2.0),
+                        child: Text(
+                          loco.name ?? '',
+                          style: Theme.of(context).textTheme.bodyMedium
+                              ?.copyWith(fontStyle: FontStyle.italic),
+                        ),
+                      ),
+                  ],
+                ),
+                Chip(
+                  label: Text(status),
+                  backgroundColor: statusColors.$1,
+                  labelStyle: TextStyle(color: statusColors.$2),
+                ),
+              ],
+            ),
+            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'),
+                ),
+                const Spacer(),
+                if (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'),
+                  ),
+              ],
+            ),
+            Wrap(
+              spacing: 8,
+              runSpacing: 4,
+              children: [
+                _statPill(
+                  context,
+                  label: 'Miles',
+                  value: _formatNumber(loco.mileage),
+                ),
+                _statPill(
+                  context,
+                  label: 'Trips',
+                  value: (loco.trips ?? loco.journeys ?? 0).toString(),
+                ),
+                if (operatorName.isNotEmpty)
+                  _statPill(context, label: 'Operator', value: operatorName),
+                if (domain.isNotEmpty)
+                  _statPill(context, label: 'Domain', value: domain),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _statPill(
+    BuildContext context, {
+    required String label,
+    required String value,
+  }) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surfaceContainerHighest,
+        borderRadius: BorderRadius.circular(10),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text('$label: ', style: Theme.of(context).textTheme.labelSmall),
+          Text(
+            value,
+            style: Theme.of(
+              context,
+            ).textTheme.labelSmall?.copyWith(fontWeight: FontWeight.w700),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+Future<void> showTractionDetails(
+  BuildContext context,
+  LocoSummary loco,
+) async {
+  final hasMileageOrTrips = _hasMileageOrTrips(loco);
+  await showModalBottomSheet(
+    context: context,
+    isScrollControlled: true,
+    builder: (ctx) {
+      return DraggableScrollableSheet(
+        expand: false,
+        maxChildSize: 0.9,
+        initialChildSize: 0.65,
+        builder: (_, controller) {
+          return Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Row(
+                  children: [
+                    IconButton(
+                      icon: const Icon(Icons.close),
+                      onPressed: () => Navigator.of(ctx).pop(),
+                    ),
+                    const SizedBox(width: 8),
+                    Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Row(
+                          children: [
+                            Text(
+                              loco.number,
+                              style: Theme.of(context).textTheme.titleLarge
+                                  ?.copyWith(fontWeight: FontWeight.w800),
+                            ),
+                            if (hasMileageOrTrips)
+                              Padding(
+                                padding: const EdgeInsets.only(left: 6.0),
+                                child: Icon(
+                                  Icons.check_circle,
+                                  size: 18,
+                                  color: Colors.green.shade600,
+                                ),
+                              ),
+                          ],
+                        ),
+                        Text(
+                          loco.locoClass,
+                          style: Theme.of(context).textTheme.labelMedium,
+                        ),
+                      ],
+                    ),
+                  ],
+                ),
+                if ((loco.name ?? '').isNotEmpty)
+                  Padding(
+                    padding: const EdgeInsets.only(left: 52.0, bottom: 12),
+                    child: Text(
+                      loco.name ?? '',
+                      style: Theme.of(context).textTheme.bodyMedium,
+                    ),
+                  ),
+                const SizedBox(height: 4),
+                Expanded(
+                  child: ListView(
+                    controller: controller,
+                    children: [
+                      _detailRow(context, 'Status', loco.status ?? 'Unknown'),
+                      _detailRow(context, 'Operator', loco.operator ?? ''),
+                      _detailRow(context, 'Domain', loco.domain ?? ''),
+                      _detailRow(context, 'Owner', loco.owner ?? ''),
+                      _detailRow(context, 'Livery', loco.livery ?? ''),
+                      _detailRow(context, 'Location', loco.location ?? ''),
+                      _detailRow(
+                        context,
+                        'Mileage',
+                        _formatNumber(loco.mileage ?? 0),
+                      ),
+                      _detailRow(
+                        context,
+                        'Trips',
+                        (loco.trips ?? loco.journeys ?? 0).toString(),
+                      ),
+                      _detailRow(context, 'EVN', loco.evn ?? ''),
+                      if (loco.notes != null && loco.notes!.isNotEmpty)
+                        _detailRow(context, 'Notes', loco.notes!),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          );
+        },
+      );
+    },
+  );
+}
+
+Widget _detailRow(BuildContext context, String label, String value) {
+  if (value.isEmpty) return const SizedBox.shrink();
+  return Padding(
+    padding: const EdgeInsets.symmetric(vertical: 6.0),
+    child: Row(
+      children: [
+        SizedBox(
+          width: 110,
+          child: Text(
+            label,
+            style: Theme.of(context)
+                .textTheme
+                .labelMedium
+                ?.copyWith(fontWeight: FontWeight.w600),
+          ),
+        ),
+        Expanded(
+          child: Text(value, style: Theme.of(context).textTheme.bodyMedium),
+        ),
+      ],
+    ),
+  );
+}
+
+(Color, Color) _statusChipColors(BuildContext context, String status) {
+  final scheme = Theme.of(context).colorScheme;
+  final isDark = scheme.brightness == Brightness.dark;
+  Color blend(
+    Color base, {
+    double bgOpacity = 0.18,
+    double fgOpacity = 0.82,
+  }) {
+    final bg = Color.alphaBlend(
+      base.withValues(alpha: isDark ? bgOpacity + 0.07 : bgOpacity),
+      scheme.surface,
+    );
+    final fg = Color.alphaBlend(
+      base.withValues(alpha: isDark ? fgOpacity : fgOpacity * 0.8),
+      scheme.onSurface,
+    );
+    return Color.lerp(bg, fg, 0.0) ?? bg;
+  }
+
+  Color background;
+  Color foreground;
+  final key = status.toLowerCase();
+
+  if (key.contains('scrap')) {
+    background = blend(Colors.red);
+    foreground = Colors.red.shade200.withValues(alpha: isDark ? 0.85 : 0.9);
+  } else if (key.contains('active')) {
+    background = blend(scheme.primary);
+    foreground = scheme.primary.withValues(alpha: isDark ? 0.9 : 0.8);
+  } else if (key.contains('withdrawn')) {
+    background = blend(Colors.amber);
+    foreground = Colors.amber.shade800.withValues(alpha: isDark ? 0.9 : 0.8);
+  } else if (key.contains('stored') || key.contains('unknown')) {
+    background = blend(Colors.grey);
+    foreground = Colors.grey.shade700.withValues(alpha: isDark ? 0.85 : 0.75);
+  } else {
+    background = scheme.surfaceContainerHighest;
+    foreground = scheme.onSurface;
+  }
+  return (background, foreground);
+}
+
+bool _hasMileageOrTrips(LocoSummary loco) {
+  final mileage = loco.mileage ?? 0;
+  final trips = loco.trips ?? loco.journeys ?? 0;
+  return mileage > 0 || trips > 0;
+}
+
+String _formatNumber(double? value) {
+  if (value == null) return '0';
+  return value.toStringAsFixed(1);
+}

lib/main.dart

@@ -1,19 +1,21 @@
 import 'package:flutter/material.dart';
 import 'package:dynamic_color/dynamic_color.dart';
 import 'package:mileograph_flutter/components/pages/calculator.dart';
-import 'package:mileograph_flutter/components/pages/newEntry.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/traction.dart';
 import 'package:mileograph_flutter/components/pages/trips.dart';
 import 'package:provider/provider.dart';
 
 import 'package:mileograph_flutter/components/pages/legs.dart';
-import 'package:mileograph_flutter/services/apiService.dart';
+import 'package:mileograph_flutter/services/api_service.dart';
 import 'package:mileograph_flutter/services/authservice.dart';
-import 'package:mileograph_flutter/services/dataService.dart';
+import 'package:mileograph_flutter/services/data_service.dart';
+import 'package:mileograph_flutter/services/navigation_guard.dart';
 
 import 'components/login/login.dart';
 import 'components/pages/dashboard.dart';
-import 'components/dashboard/topTractionPanel.dart';
 
 import 'package:go_router/go_router.dart';
 
@@ -25,7 +27,7 @@ void main() {
       providers: [
         Provider<ApiService>(
           create: (_) {
-            api = ApiService(baseUrl: 'https://dev.mileograph.co.uk/api/v1');
+            api = ApiService(baseUrl: 'https://mileograph.co.uk/api/v1');
             return api;
           },
         ),
@@ -36,8 +38,9 @@ void main() {
           },
         ),
         ProxyProvider<AuthService, void>(
-          update: (_, auth, __) {
+          update: (_, auth, previous) {
             api.setTokenProvider(() => auth.token);
+            api.setUnauthorizedHandler(() => auth.handleTokenExpired());
           },
         ),
         ChangeNotifierProxyProvider<ApiService, DataService>(
@@ -85,19 +88,55 @@ class MyApp extends StatelessWidget {
             return MyHomePage(child: child);
           },
           routes: [
-            GoRoute(path: '/', builder: (_, __) => const Dashboard()),
+            GoRoute(path: '/', builder: (context, state) => const Dashboard()),
-            GoRoute(path: '/calculator', builder: (_, __) => CalculatorPage()),
+            GoRoute(
+              path: '/calculator',
+              builder: (context, state) => CalculatorPage(),
+            ),
             GoRoute(
               path: '/calculator/details',
-              builder: (_, __) => CalculatorPage(),
+              builder: (context, state) => CalculatorPage(),
+            ),
+            GoRoute(path: '/legs', builder: (context, state) => LegsPage()),
+            GoRoute(path: '/traction', builder: (context, state) => TractionPage()),
+            GoRoute(
+              path: '/traction/:id/timeline',
+              builder: (_, state) {
+                final idParam = state.pathParameters['id'];
+                final locoId = int.tryParse(idParam ?? '') ?? 0;
+                final extra = state.extra;
+                String label = state.uri.queryParameters['label'] ?? '';
+                if (extra is Map && extra['label'] is String) {
+                  label = extra['label'] as String;
+                } else if (extra is String && extra.isNotEmpty) {
+                  label = extra;
+                }
+                if (label.trim().isEmpty) {
+                  label = 'Loco $locoId';
+                }
+                return LocoTimelinePage(
+                  locoId: locoId,
+                  locoLabel: label,
+                );
+              },
+            ),
+            GoRoute(
+              path: '/traction/new',
+              builder: (context, state) => const NewTractionPage(),
+            ),
+            GoRoute(path: '/trips', builder: (context, state) => TripsPage()),
+            GoRoute(path: '/add', builder: (context, state) => NewEntryPage()),
+            GoRoute(
+              path: '/legs/edit/:id',
+              builder: (_, state) {
+                final idParam = state.pathParameters['id'];
+                final legId = idParam == null ? null : int.tryParse(idParam);
+                return NewEntryPage(editLegId: legId);
+              },
             ),
-            GoRoute(path: '/legs', builder: (_, __) => LegsPage()),
-            GoRoute(path: '/traction', builder: (_, __) => TractionPage()),
-            GoRoute(path: '/trips', builder: (_, __) => TripsPage()),
-            GoRoute(path: '/add', builder: (_, __) => NewEntryPage()),
           ],
         ),
-        GoRoute(path: '/login', builder: (_, __) => const LoginScreen()),
+        GoRoute(path: '/login', builder: (context, state) => const LoginScreen()),
       ],
     );
 
@@ -164,18 +203,25 @@ class _MyHomePageState extends State<MyHomePage> {
   ];
 
   int _getIndexFromLocation(String location) {
-    int newIndex = contentPages.indexWhere((path) => location == path);
+    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;
   }
 
-  void _onItemTapped(int index, int currentIndex) {
+  Future<void> _onItemTapped(int index, int currentIndex) async {
-    if (index < 0 || index >= contentPages.length || index == currentIndex)
+    if (index < 0 || index >= contentPages.length || index == currentIndex) {
       return;
-    context.push(contentPages[index]);
+    }
-    _getIndexFromLocation(contentPages[index]);
+    await NavigationGuard.attemptNavigation(() async {
+      if (!mounted) return;
+      context.go(contentPages[index]);
+    });
   }
 
   bool loggedIn = false;
@@ -188,18 +234,30 @@ class _MyHomePageState extends State<MyHomePage> {
     if (!_fetched) {
       _fetched = true;
       WidgetsBinding.instance.addPostFrameCallback((_) {
-        final data = context.read<DataService>();
+        Future(() async {
-        final auth = context.read<AuthService>();
+          if (!mounted) return;
-        api.setTokenProvider(() => auth.token);
+          final data = context.read<DataService>();
-        if (data.homepageStats == null) {
+          final auth = context.read<AuthService>();
-          data.fetchHomepageStats();
+          api.setTokenProvider(() => auth.token);
-        }
+          await auth.tryRestoreSession();
-        if (data.legs.isEmpty) {
+          if (!auth.isLoggedIn) return;
-          data.fetchLegs();
+          data.fetchEventFields();
-        }
+          if (data.homepageStats == null) {
-        if (data.traction.isEmpty) {
+            data.fetchHomepageStats();
-          data.fetchHadTraction();
+          }
-        }
+          if (data.legs.isEmpty) {
+            data.fetchLegs();
+          }
+          if (data.traction.isEmpty) {
+            data.fetchHadTraction();
+          }
+          if (data.onThisDay.isEmpty) {
+            data.fetchOnThisDay();
+          }
+          if (data.tripDetails.isEmpty) {
+            data.fetchTripDetails();
+          }
+        });
       });
     }
   }
@@ -212,7 +270,7 @@ class _MyHomePageState extends State<MyHomePage> {
     final data = context.watch<DataService>();
     final auth = context.read<AuthService>();
 
-    if (data.homepageStats != null) {
+    if (data.homepageStats != null || !data.isHomepageLoading) {
       currentPage = widget.child;
     } else {
       currentPage = Center(child: CircularProgressIndicator());

lib/objects/objects.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
 
 class DestinationObject {
   const DestinationObject(
@@ -15,24 +16,24 @@ class DestinationObject {
 }
 
 class UserData {
-  const UserData(this.username, this.full_name, this.user_id, this.email);
+  const UserData(this.username, this.fullName, this.userId, this.email);
 
-  final String user_id;
+  final String userId;
   final String username;
-  final String full_name;
+  final String fullName;
   final String email;
 }
 
 class AuthenticatedUserData extends UserData {
   const AuthenticatedUserData({
-    required String user_id,
+    required String userId,
     required String username,
-    required String full_name,
+    required String fullName,
     required String email,
-    required this.access_token,
+    required this.accessToken,
-  }) : super(username, full_name, user_id, email);
+  }) : super(username, fullName, userId, email);
 
-  final String access_token;
+  final String accessToken;
 }
 
 class HomepageStats {
@@ -41,6 +42,7 @@ class HomepageStats {
   final List<LocoSummary> topLocos;
   final List<LeaderboardEntry> leaderboard;
   final List<TripSummary> trips;
+  final UserData? user;
 
   HomepageStats({
     required this.totalMileage,
@@ -48,23 +50,37 @@ class HomepageStats {
     required this.topLocos,
     required this.leaderboard,
     required this.trips,
+    this.user,
   });
 
   factory HomepageStats.fromJson(Map<String, dynamic> json) {
+    final userData = json['user_data'];
+    final mileageData = json['milage_data'];
+    final totalMileage = mileageData is Map && mileageData['mileage'] != null
+        ? (mileageData['mileage'] as num).toDouble()
+        : 0.0;
     return HomepageStats(
-      totalMileage: (json['milage_data']['mileage'] as num).toDouble(),
+      totalMileage: totalMileage,
-      yearlyMileage: (json['yearly_mileage'] as List)
+      yearlyMileage: (json['yearly_mileage'] as List? ?? [])
           .map((e) => YearlyMileage.fromJson(e))
           .toList(),
-      topLocos: (json['top_locos'] as List)
+      topLocos: (json['top_locos'] as List? ?? [])
           .map((e) => LocoSummary.fromJson(e))
           .toList(),
-      leaderboard: (json['leaderboard_data'] as List)
+      leaderboard: (json['leaderboard_data'] as List? ?? [])
           .map((e) => LeaderboardEntry.fromJson(e))
           .toList(),
-      trips: (json['trip_data'] as List)
+      trips: (json['trip_data'] as List? ?? [])
           .map((e) => TripSummary.fromJson(e))
           .toList(),
+      user: userData == null
+          ? null
+          : UserData(
+              userData['username'] ?? '',
+              userData['full_name'] ?? '',
+              userData['user_id'] ?? '',
+              userData['email'] ?? '',
+            ),
     );
   }
 }
@@ -99,56 +115,219 @@ class Loco {
 
   factory Loco.fromJson(Map<String, dynamic> json) => Loco(
     id: json['loco_id'],
-    type: json['loco_type'],
+    type: json['type'],
-    number: json['loco_number'],
+    number: json['number'],
-    name: json['loco_name'] ?? "",
+    name: json['name'] ?? "",
-    locoClass: json['loco_class'],
+    locoClass: json['class'],
-    operator: json['loco_operator'],
+    operator: json['operator'],
-    notes: json['loco_notes'],
+    notes: json['notes'],
-    evn: json['loco_evn'],
+    evn: json['evn'],
   );
 }
 
 class LocoSummary extends Loco {
   final double? mileage;
   final int? journeys;
+  final int? trips;
+  final String? status;
+  final String? domain;
+  final String? owner;
+  final String? livery;
+  final String? location;
+  final Map<String, dynamic> extra;
 
   LocoSummary({
     required int locoId,
     required String locoType,
     required String locoNumber,
     required String locoName,
-    required String locoClass,
+    required super.locoClass,
     required String locoOperator,
     String? locoNotes,
     String? locoEvn,
     this.mileage,
     this.journeys,
-  }) : super(
+    this.trips,
+    this.status,
+    this.domain,
+    this.owner,
+    this.livery,
+    this.location,
+    Map<String, dynamic>? extra,
+  }) : extra = extra ?? const {},
+       super(
          id: locoId,
          type: locoType,
          number: locoNumber,
          name: locoName,
-         locoClass: locoClass,
          operator: locoOperator,
          notes: locoNotes,
          evn: locoEvn,
        );
 
   factory LocoSummary.fromJson(Map<String, dynamic> json) => LocoSummary(
-    locoId: json['loco_id'],
+    locoId: json['loco_id'] ?? json['id'] ?? 0,
-    locoType: json['loco_type'],
+    locoType: json['type'] ?? json['loco_type'] ?? '',
-    locoNumber: json['loco_number'],
+    locoNumber: json['number'] ?? json['loco_number'] ?? '',
-    locoName: json['loco_name'] ?? "",
+    locoName: json['name'] ?? json['loco_name'] ?? "",
-    locoClass: json['loco_class'],
+    locoClass: json['class'] ?? json['loco_class'] ?? '',
-    locoOperator: json['loco_operator'],
+    locoOperator: json['operator'] ?? json['loco_operator'] ?? '',
-    locoNotes: json['loco_notes'],
+    locoNotes: json['notes'],
-    locoEvn: json['loco_evn'],
+    locoEvn: json['evn'] ?? json['loco_evn'],
-    mileage: (json['loco_mileage'] as num?)?.toDouble() ?? 0,
+    mileage:
-    journeys: json['loco_journeys'] ?? 0,
+        ((json['loco_mileage'] ?? json['mileage']) as num?)?.toDouble() ?? 0,
+    journeys: (json['loco_journeys'] ?? json['journeys'] ?? 0) is num
+        ? (json['loco_journeys'] ?? json['journeys'] ?? 0).toInt()
+        : 0,
+    trips: (json['loco_trips'] ?? json['trips']) is num
+        ? (json['loco_trips'] ?? json['trips']).toInt()
+        : null,
+    status: json['status'] ?? json['loco_status'],
+    domain: json['domain'],
+    owner: json['owner'] ?? json['loco_owner'],
+    livery: json['livery'],
+    location: json['location'],
+    extra: Map<String, dynamic>.from(json),
   );
 }
 
+class LocoAttrVersion {
+  final String attrCode;
+  final int? versionId;
+  final int locoId;
+  final int? attrTypeId;
+  final String? valueStr;
+  final int? valueInt;
+  final DateTime? valueDate;
+  final bool? valueBool;
+  final String? valueEnum;
+  final DateTime? validFrom;
+  final DateTime? validTo;
+  final DateTime? txnFrom;
+  final DateTime? txnTo;
+  final String? suggestedBy;
+  final String? approvedBy;
+  final DateTime? approvedAt;
+  final int? sourceEventId;
+  final String? precisionLevel;
+  final String? maskedValidFrom;
+  final dynamic valueNorm;
+
+  const LocoAttrVersion({
+    required this.attrCode,
+    required this.locoId,
+    this.versionId,
+    this.attrTypeId,
+    this.valueStr,
+    this.valueInt,
+    this.valueDate,
+    this.valueBool,
+    this.valueEnum,
+    this.validFrom,
+    this.validTo,
+    this.txnFrom,
+    this.txnTo,
+    this.suggestedBy,
+    this.approvedBy,
+    this.approvedAt,
+    this.sourceEventId,
+    this.precisionLevel,
+    this.maskedValidFrom,
+    this.valueNorm,
+  });
+
+  factory LocoAttrVersion.fromJson(Map<String, dynamic> json) {
+    return LocoAttrVersion(
+      attrCode: json['attr_code']?.toString() ?? '',
+      locoId: (json['loco_id'] as num?)?.toInt() ?? 0,
+      versionId: (json['loco_attr_v_id'] as num?)?.toInt(),
+      attrTypeId: (json['attr_type_id'] as num?)?.toInt(),
+      valueStr: json['value_str']?.toString(),
+      valueInt: (json['value_int'] as num?)?.toInt(),
+      valueDate: _parseDate(json['value_date']),
+      valueBool: _parseBool(json['value_bool']),
+      valueEnum: json['value_enum']?.toString(),
+      validFrom: _parseDate(json['valid_from']),
+      validTo: _parseDate(json['valid_to']),
+      txnFrom: _parseDate(json['txn_from']),
+      txnTo: _parseDate(json['txn_to']),
+      suggestedBy: json['suggested_by']?.toString(),
+      approvedBy: json['approved_by']?.toString(),
+      approvedAt: _parseDate(json['approved_at']),
+      sourceEventId: (json['source_event_id'] as num?)?.toInt(),
+      precisionLevel: json['precision_level']?.toString(),
+      maskedValidFrom: json['masked_valid_from']?.toString(),
+      valueNorm: json['value_norm'],
+    );
+  }
+
+  static DateTime? _parseDate(dynamic value) {
+    if (value == null) return null;
+    if (value is DateTime) return value;
+    return DateTime.tryParse(value.toString());
+  }
+
+  static bool? _parseBool(dynamic value) {
+    if (value == null) return null;
+    if (value is bool) return value;
+    if (value is num) return value != 0;
+    final str = value.toString().toLowerCase();
+    if (['true', '1', 'yes'].contains(str)) return true;
+    if (['false', '0', 'no'].contains(str)) return false;
+    return null;
+  }
+
+  static List<LocoAttrVersion> fromGroupedJson(dynamic json) {
+    final List<LocoAttrVersion> items = [];
+    if (json is Map) {
+      json.forEach((key, value) {
+        if (value is List) {
+          for (final entry in value) {
+            if (entry is Map<String, dynamic>) {
+              final merged = Map<String, dynamic>.from(entry);
+              merged.putIfAbsent('attr_code', () => key);
+              items.add(LocoAttrVersion.fromJson(merged));
+            }
+          }
+        }
+      });
+    }
+    items.sort(
+      (a, b) {
+        final aDate = a.validFrom ?? a.txnFrom ?? DateTime.fromMillisecondsSinceEpoch(0);
+        final bDate = b.validFrom ?? b.txnFrom ?? DateTime.fromMillisecondsSinceEpoch(0);
+        final dateCompare = aDate.compareTo(bDate);
+        if (dateCompare != 0) return dateCompare;
+        return a.attrCode.compareTo(b.attrCode);
+      },
+    );
+    return items;
+  }
+
+  String get valueLabel {
+    if (valueStr != null && valueStr!.isNotEmpty) return valueStr!;
+    if (valueEnum != null && valueEnum!.isNotEmpty) return valueEnum!;
+    if (valueInt != null) return valueInt!.toString();
+    if (valueBool != null) return valueBool! ? 'Yes' : 'No';
+    if (valueDate != null) return DateFormat('yyyy-MM-dd').format(valueDate!);
+    if (valueNorm != null && valueNorm.toString().isNotEmpty) {
+      return valueNorm.toString();
+    }
+    return '—';
+  }
+
+  String get validityRange {
+    final start = maskedValidFrom ?? _formatDate(validFrom) ?? 'Unknown';
+    final end = _formatDate(validTo, fallback: 'Present') ?? 'Present';
+    return '$start → $end';
+  }
+
+  String? _formatDate(DateTime? value, {String? fallback}) {
+    if (value == null) return fallback;
+    return DateFormat('yyyy-MM-dd').format(value);
+  }
+}
+
 class LeaderboardEntry {
   final String userId, username, userFullName;
   final double mileage;
@@ -285,3 +464,153 @@ class Station {
     country: json['country'],
   );
 }
+
+class TripLeg {
+  final int? id;
+  final String start;
+  final String end;
+  final DateTime? beginTime;
+  final String? network;
+  final String? route;
+  final double? mileage;
+  final String? notes;
+  final List<Loco> locos;
+
+  TripLeg({
+    required this.id,
+    required this.start,
+    required this.end,
+    required this.beginTime,
+    required this.network,
+    required this.route,
+    required this.mileage,
+    required this.notes,
+    required this.locos,
+  });
+
+  factory TripLeg.fromJson(Map<String, dynamic> json) => TripLeg(
+    id: json['leg_id'],
+    start: json['leg_start'] ?? '',
+    end: json['leg_end'] ?? '',
+    beginTime:
+        json['leg_begin_time'] != null && json['leg_begin_time'] is String
+        ? DateTime.tryParse(json['leg_begin_time'])
+        : (json['leg_begin_time'] is DateTime ? json['leg_begin_time'] : null),
+    network: json['leg_network'],
+    route: json['leg_route'],
+    mileage: (json['leg_mileage'] as num?)?.toDouble(),
+    notes: json['leg_notes'],
+    locos:
+        (json['locos'] as List?)
+            ?.map((e) => Loco.fromJson(e as Map<String, dynamic>))
+            .toList() ??
+        [],
+  );
+}
+
+class TripDetail {
+  final int id;
+  final String name;
+  final double mileage;
+  final int legCount;
+  final List<TripLeg> legs;
+
+  TripDetail({
+    required this.id,
+    required this.name,
+    required this.mileage,
+    required this.legCount,
+    required this.legs,
+  });
+
+  factory TripDetail.fromJson(Map<String, dynamic> json) => TripDetail(
+    id: json['trip_id'] ?? json['id'] ?? 0,
+    name: json['trip_name'] ?? '',
+    mileage: (json['trip_mileage'] as num?)?.toDouble() ?? 0,
+    legCount: json['leg_count'] ?? ((json['trip_legs'] as List?)?.length ?? 0),
+    legs:
+        (json['trip_legs'] as List?)
+            ?.map((e) => TripLeg.fromJson(e as Map<String, dynamic>))
+            .toList() ??
+        [],
+  );
+}
+
+class TripLocoStat {
+  final String locoClass;
+  final String number;
+  final String? name;
+  final bool won;
+
+  TripLocoStat({
+    required this.locoClass,
+    required this.number,
+    required this.won,
+    this.name,
+  });
+
+  factory TripLocoStat.fromJson(Map<String, dynamic> json) {
+    final locoJson = json['loco'] is Map<String, dynamic>
+        ? Map<String, dynamic>.from(json['loco'] as Map)
+        : null;
+    final locoClass = json['loco_class'] ??
+        json['class'] ??
+        locoJson?['class'] ??
+        locoJson?['loco_class'] ??
+        '';
+    final locoNumber = json['loco_number'] ??
+        json['number'] ??
+        locoJson?['number'] ??
+        locoJson?['loco_number'] ??
+        '';
+    final locoName =
+        json['loco_name'] ?? json['name'] ?? locoJson?['name'] ?? locoJson?['loco_name'];
+    final wonValue = json['won'] ?? json['result'] ?? json['winner'];
+    final won = _parseWonFlag(wonValue);
+
+    return TripLocoStat(
+      locoClass: locoClass,
+      number: locoNumber,
+      name: locoName,
+      won: won,
+    );
+  }
+
+  static bool _parseWonFlag(dynamic value) {
+    if (value == null) return false;
+    if (value is bool) return value;
+    if (value is num) return value != 0;
+    final normalized = value.toString().toLowerCase();
+    return ['1', 'true', 'win', 'won', 'yes', 'w'].contains(normalized);
+  }
+}
+
+class EventField {
+  final String name;
+  final String display;
+  final String? type;
+  final List<String>? enumValues;
+
+  const EventField({
+    required this.name,
+    required this.display,
+    this.type,
+    this.enumValues,
+  });
+
+  factory EventField.fromJson(Map<String, dynamic> json) {
+    final enumList = json['enum'];
+    List<String>? enumValues;
+    if (enumList is List) {
+      enumValues = enumList.map((e) => e.toString()).toList();
+    }
+    final baseName = json['name']?.toString() ?? json['field']?.toString() ?? '';
+    final display = json['field']?.toString() ?? baseName;
+    return EventField(
+      name: baseName,
+      display: display,
+      type: json['type']?.toString(),
+      enumValues: enumValues,
+    );
+  }
+}

lib/services/api_service.dart

@@ -2,10 +2,12 @@ import 'dart:convert';
 import 'package:http/http.dart' as http;
 
 typedef TokenProvider = String? Function();
+typedef UnauthorizedHandler = Future<void> Function();
 
 class ApiService {
   final String baseUrl;
   TokenProvider? _getToken;
+  UnauthorizedHandler? _onUnauthorized;
 
   ApiService({required this.baseUrl});
 
@@ -13,6 +15,10 @@ class ApiService {
     _getToken = provider;
   }
 
+  void setUnauthorizedHandler(UnauthorizedHandler handler) {
+    _onUnauthorized = handler;
+  }
+
   Map<String, String> _buildHeaders(Map<String, String>? extra) {
     final token = _getToken?.call();
     final headers = {'accept': 'application/json', ...?extra};
@@ -35,10 +41,11 @@ class ApiService {
     dynamic data, {
     Map<String, String>? headers,
   }) async {
+    final hasBody = data != null;
     final response = await http.post(
       Uri.parse('$baseUrl$endpoint'),
-      headers: _buildHeaders(_jsonHeaders(headers)),
+      headers: _buildHeaders(hasBody ? _jsonHeaders(headers) : headers),
-      body: jsonEncode(data),
+      body: hasBody ? jsonEncode(data) : null,
     );
     return _processResponse(response);
   }
@@ -60,10 +67,11 @@ class ApiService {
     dynamic data, {
     Map<String, String>? headers,
   }) async {
+    final hasBody = data != null;
     final response = await http.put(
       Uri.parse('$baseUrl$endpoint'),
-      headers: _buildHeaders(_jsonHeaders(headers)),
+      headers: _buildHeaders(hasBody ? _jsonHeaders(headers) : headers),
-      body: jsonEncode(data),
+      body: hasBody ? jsonEncode(data) : null,
     );
     return _processResponse(response);
   }
@@ -83,12 +91,16 @@ class ApiService {
     return {'Content-Type': 'application/json', if (extra != null) ...extra};
   }
 
-  dynamic _processResponse(http.Response res) {
+  Future<dynamic> _processResponse(http.Response res) async {
     final body = res.body.isNotEmpty ? jsonDecode(res.body) : null;
     if (res.statusCode >= 200 && res.statusCode < 300) {
       return body;
-    } else {
-      throw Exception('API error ${res.statusCode}: $body');
     }
+
+    if (res.statusCode == 401 && _onUnauthorized != null) {
+      await _onUnauthorized!();
+    }
+
+    throw Exception('API error ${res.statusCode}: $body');
   }
 }

lib/services/authservice.dart

@@ -1,19 +1,23 @@
 import 'package:flutter/foundation.dart';
 import 'package:mileograph_flutter/objects/objects.dart';
-import 'package:mileograph_flutter/services/apiService.dart';
+import 'package:mileograph_flutter/services/api_service.dart';
+import 'package:mileograph_flutter/services/token_storage_service.dart';
 
 class AuthService extends ChangeNotifier {
   final ApiService api;
+  bool _restoring = false;
+
+  final TokenStorageService _tokenStorage = TokenStorageService();
 
   AuthService({required this.api});
 
   AuthenticatedUserData? _user;
 
   bool get isLoggedIn => _user != null;
-  String? get token => _user?.access_token;
+  String? get token => _user?.accessToken;
-  String? get userId => _user?.user_id;
+  String? get userId => _user?.userId;
   String? get username => _user?.username;
-  String? get fullName => _user?.full_name;
+  String? get fullName => _user?.fullName;
 
   void setLoginData({
     required String userId,
@@ -23,12 +27,13 @@ class AuthService extends ChangeNotifier {
     required String email,
   }) {
     _user = AuthenticatedUserData(
-      user_id: userId,
+      userId: userId,
       username: username,
-      full_name: fullName,
+      fullName: fullName,
-      access_token: accessToken,
+      accessToken: accessToken,
       email: email,
     );
+    _persistToken(accessToken);
     notifyListeners();
   }
 
@@ -65,8 +70,88 @@ class AuthService extends ChangeNotifier {
     );
   }
 
-  void logout() {
+  Future<void> tryRestoreSession() async {
+    if (_restoring || _user != null) return;
+    _restoring = true;
+    try {
+      // read token from secure storage (with fallback)
+      final token = await _tokenStorage.getToken();
+      if (token == null || token.isEmpty) return;
+
+      final userResponse = await api.get(
+        '/users/me',
+        headers: {
+          'Authorization': 'Bearer $token',
+          'accept': 'application/json',
+        },
+      );
+
+      setLoginData(
+        userId: userResponse['user_id'],
+        username: userResponse['username'],
+        fullName: userResponse['full_name'],
+        accessToken: token,
+        email: userResponse['email'],
+      );
+    } catch (_) {
+      await _clearToken();
+    } finally {
+      _restoring = false;
+    }
+  }
+
+  Future<bool> validateStoredToken() async {
+    final token = await _tokenStorage.getToken();
+    if (token == null || token.isEmpty) return false;
+    try {
+      await api.get(
+        '/validate',
+        headers: {
+          'Authorization': 'Bearer $token',
+          'accept': 'application/json',
+        },
+      );
+      return true;
+    } catch (_) {
+      await _clearToken();
+      return false;
+    }
+  }
+
+  Future<void> _persistToken(String token) async {
+    await _tokenStorage.setToken(token);
+  }
+
+  Future<void> _clearToken() async {
+    await _tokenStorage.clearToken();
+  }
+
+  Future<void> register({
+    required String username,
+    required String email,
+    required String fullName,
+    required String password,
+    String inviteCode = '',
+  }) async {
+    final formData = {
+      'user_name': username,
+      'email': email,
+      'full_name': fullName,
+      'password': password,
+      'invitation_code': inviteCode,
+      'empty': '',
+      'empty2': '',
+    };
+    await api.postForm('/register', formData);
+  }
+
+  Future<void> handleTokenExpired() async {
     _user = null;
+    await _clearToken();
     notifyListeners();
   }
+
+  void logout() {
+    handleTokenExpired(); // reuse
+  }
 }

lib/services/dataService.dart

@@ -1,115 +0,0 @@
-import 'package:flutter/foundation.dart';
-import 'package:mileograph_flutter/objects/objects.dart';
-import 'package:mileograph_flutter/services/apiService.dart'; // assumes you've moved HomepageStats + submodels to a separate file
-
-class DataService extends ChangeNotifier {
-  final ApiService api;
-
-  DataService({required this.api});
-
-  // Homepage Data
-  HomepageStats? _homepageStats;
-  HomepageStats? get homepageStats => _homepageStats;
-
-  // Legs Data
-  List<Leg> _legs = [];
-  List<Leg> get legs => _legs;
-
-  // Traction Data
-  List<LocoSummary> _traction = [];
-  List<LocoSummary> get traction => _traction;
-
-  // Station Data
-  List<Station>? _cachedStations;
-  DateTime? _stationsFetchedAt;
-
-  List<String> stations = [""];
-
-  bool _isHomepageLoading = false;
-  bool get isHomepageLoading => _isHomepageLoading;
-
-  Future<void> fetchHomepageStats() async {
-    _isHomepageLoading = true;
-    notifyListeners();
-
-    try {
-      final json = await api.get('/stats/homepage');
-      _homepageStats = HomepageStats.fromJson(json);
-    } catch (e) {
-      debugPrint('Failed to fetch homepage stats: $e');
-      _homepageStats = null;
-    } finally {
-      _isHomepageLoading = false;
-      notifyListeners();
-    }
-  }
-
-  Future<void> fetchLegs({
-    int offset = 0,
-    int limit = 100,
-    String sortBy = 'date',
-    int sortDirection = 0,
-  }) async {
-    final query =
-        '?sort_direction=$sortDirection&sort_by=$sortBy&offset=$offset&limit=$limit';
-    final json = await api.get('/user/legs$query');
-
-    if (json is List) {
-      _legs = json.map((e) => Leg.fromJson(e)).toList();
-      notifyListeners();
-    } else {
-      throw Exception('Unexpected legs response: $json');
-    }
-  }
-
-  Future<void> fetchHadTraction({int offset = 0, int limit = 100}) async {
-    final query = '?offset=$offset&limit=$limit';
-    final json = await api.get('/loco/mileage$query');
-
-    if (json is List) {
-      _traction = json.map((e) => LocoSummary.fromJson(e)).toList();
-      notifyListeners();
-    } else {
-      throw Exception('Unexpected traction response: $json');
-    }
-  }
-
-  void clear() {
-    _homepageStats = null;
-    notifyListeners();
-  }
-
-  double getMileageForCurrentYear() {
-    final currentYear = DateTime.now().year;
-    return getMileageForYear(currentYear) ?? 0;
-  }
-
-  double? getMileageForYear(int year) {
-    return _homepageStats?.yearlyMileage
-            .firstWhere(
-              (entry) => entry.year == year,
-              orElse: () => YearlyMileage(year: null, mileage: 0),
-            )
-            .mileage ??
-        0;
-  }
-
-  Future<List<Station>> fetchStations() 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!;
-    }
-
-    final response = await api.get('/location');
-    final parsed = (response as List).map((e) => Station.fromJson(e)).toList();
-
-    _cachedStations = parsed;
-    _stationsFetchedAt = now;
-
-    return parsed;
-  }
-}

lib/services/data_service.dart

@@ -0,0 +1,514 @@
+import 'dart:async';
+import 'dart:convert';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/scheduler.dart';
+import 'package:mileograph_flutter/objects/objects.dart';
+import 'package:mileograph_flutter/services/api_service.dart'; // assumes you've moved HomepageStats + submodels to a separate file
+
+class _LegFetchOptions {
+  final int limit;
+  final String sortBy;
+  final int sortDirection;
+  final String? dateRangeStart;
+  final String? dateRangeEnd;
+
+  const _LegFetchOptions({
+    this.limit = 100,
+    this.sortBy = 'date',
+    this.sortDirection = 0,
+    this.dateRangeStart,
+    this.dateRangeEnd,
+  });
+}
+
+class DataService extends ChangeNotifier {
+  final ApiService api;
+
+  DataService({required this.api});
+
+  _LegFetchOptions _lastLegsFetch = const _LegFetchOptions();
+
+  // Homepage Data
+  HomepageStats? _homepageStats;
+  HomepageStats? get homepageStats => _homepageStats;
+
+  // Legs Data
+  List<Leg> _legs = [];
+  List<Leg> get legs => _legs;
+  List<Leg> _onThisDay = [];
+  List<Leg> get onThisDay => _onThisDay;
+  bool _isLegsLoading = false;
+  bool get isLegsLoading => _isLegsLoading;
+  bool _legsHasMore = false;
+  bool get legsHasMore => _legsHasMore;
+
+  // Traction Data
+  List<LocoSummary> _traction = [];
+  List<LocoSummary> get traction => _traction;
+  bool _isTractionLoading = false;
+  bool get isTractionLoading => _isTractionLoading;
+  bool _tractionHasMore = false;
+  bool get tractionHasMore => _tractionHasMore;
+  final Map<int, List<LocoAttrVersion>> _locoTimelines = {};
+  final Map<int, bool> _isLocoTimelineLoading = {};
+  List<LocoAttrVersion> timelineForLoco(int locoId) =>
+      _locoTimelines[locoId] ?? [];
+  bool isLocoTimelineLoading(int locoId) =>
+      _isLocoTimelineLoading[locoId] ?? false;
+
+  // Trips
+  List<TripSummary> _trips = [];
+  List<TripSummary> get trips => _trips;
+  List<TripDetail> _tripDetails = [];
+  List<TripDetail> get tripDetails => _tripDetails;
+  bool _isTripDetailsLoading = false;
+  bool get isTripDetailsLoading => _isTripDetailsLoading;
+  List<String> _locoClasses = [];
+  List<String> get locoClasses => _locoClasses;
+  List<TripSummary> _tripList = [];
+  List<TripSummary> get tripList => _tripList;
+  List<EventField> _eventFields = [];
+  List<EventField> get eventFields => _eventFields;
+  bool _isEventFieldsLoading = false;
+  bool get isEventFieldsLoading => _isEventFieldsLoading;
+
+  // Station Data
+  List<Station>? _cachedStations;
+  DateTime? _stationsFetchedAt;
+
+  List<String> stations = [""];
+
+  bool _isHomepageLoading = false;
+  bool get isHomepageLoading => _isHomepageLoading;
+  bool _isOnThisDayLoading = false;
+  bool get isOnThisDayLoading => _isOnThisDayLoading;
+
+  static const List<EventField> _fallbackEventFields = [
+    EventField(name: 'operator', display: 'Operator'),
+    EventField(name: 'status', display: 'Status'),
+    EventField(name: 'evn', display: 'EVN'),
+    EventField(name: 'owner', display: 'Owner'),
+    EventField(name: 'location', display: 'Location'),
+    EventField(name: 'livery', display: 'Livery'),
+    EventField(name: 'domain', display: 'Domain'),
+    EventField(name: 'type', display: 'Type'),
+  ];
+
+  void _notifyAsync() {
+    // Always defer to the next frame to avoid setState during build.
+    SchedulerBinding.instance.addPostFrameCallback((_) {
+      notifyListeners();
+    });
+  }
+
+  Future<void> fetchHomepageStats() async {
+    _isHomepageLoading = true;
+
+    try {
+      final json = await api.get('/stats/homepage');
+      _homepageStats = HomepageStats.fromJson(json);
+      _trips = _homepageStats?.trips ?? [];
+    } catch (e) {
+      debugPrint('Failed to fetch homepage stats: $e');
+      _homepageStats = null;
+      _trips = [];
+    } finally {
+      _isHomepageLoading = false;
+      _notifyAsync();
+    }
+  }
+
+  Future<void> fetchLegs({
+    int offset = 0,
+    int limit = 100,
+    String sortBy = 'date',
+    int sortDirection = 0,
+    String? dateRangeStart,
+    String? dateRangeEnd,
+    bool append = false,
+  }) async {
+    _isLegsLoading = true;
+    if (!append) {
+      _lastLegsFetch = _LegFetchOptions(
+        limit: limit,
+        sortBy: sortBy,
+        sortDirection: sortDirection,
+        dateRangeStart: dateRangeStart,
+        dateRangeEnd: dateRangeEnd,
+      );
+    }
+    final buffer = StringBuffer(
+      '?sort_direction=$sortDirection&sort_by=$sortBy&offset=$offset&limit=$limit',
+    );
+    if (dateRangeStart != null && dateRangeStart.isNotEmpty) {
+      buffer.write('&date_range_start=$dateRangeStart');
+    }
+    if (dateRangeEnd != null && dateRangeEnd.isNotEmpty) {
+      buffer.write('&date_range_end=$dateRangeEnd');
+    }
+    try {
+      final json = await api.get('/user/legs${buffer.toString()}');
+
+      if (json is List) {
+        final newLegs = json.map((e) => Leg.fromJson(e)).toList();
+        _legs = append ? [..._legs, ...newLegs] : newLegs;
+        _legsHasMore = newLegs.length >= limit;
+      } else {
+        throw Exception('Unexpected legs response: $json');
+      }
+    } catch (e) {
+      debugPrint('Failed to fetch legs: $e');
+      if (!append) _legs = [];
+      _legsHasMore = false;
+    } finally {
+      _isLegsLoading = false;
+      _notifyAsync();
+    }
+  }
+
+  Future<void> refreshLegs() {
+    return fetchLegs(
+      limit: _lastLegsFetch.limit,
+      sortBy: _lastLegsFetch.sortBy,
+      sortDirection: _lastLegsFetch.sortDirection,
+      dateRangeStart: _lastLegsFetch.dateRangeStart,
+      dateRangeEnd: _lastLegsFetch.dateRangeEnd,
+    );
+  }
+
+  Future<void> fetchHadTraction({int offset = 0, int limit = 100}) async {
+    await fetchTraction(
+      hadOnly: true,
+      offset: offset,
+      limit: limit,
+      append: offset > 0,
+    );
+  }
+
+  Future<void> fetchTraction({
+    bool hadOnly = false,
+    int offset = 0,
+    int limit = 50,
+    String? locoClass,
+    String? locoNumber,
+    bool mileageFirst = true,
+    bool append = false,
+    Map<String, dynamic>? filters,
+  }) async {
+    _isTractionLoading = true;
+
+    try {
+      final params = StringBuffer('?limit=$limit&offset=$offset');
+      if (hadOnly) params.write('&had_only=true');
+      if (!mileageFirst) params.write('&mileage_first=false');
+
+      final payload = <String, dynamic>{};
+      if (locoClass != null && locoClass.isNotEmpty) {
+        payload['class'] = locoClass;
+      }
+      if (locoNumber != null && locoNumber.isNotEmpty) {
+        payload['number'] = locoNumber;
+      }
+      if (filters != null) {
+        filters.forEach((key, value) {
+          if (value == null) return;
+          if (value is String && value.trim().isEmpty) return;
+          payload[key] = value;
+        });
+      }
+
+      final json = await api.post(
+        '/locos/search/v2${params.toString()}',
+        payload.isEmpty ? null : payload,
+      );
+
+      if (json is List) {
+        final newItems = json.map((e) => LocoSummary.fromJson(e)).toList();
+        _traction = append ? [..._traction, ...newItems] : newItems;
+        _tractionHasMore = newItems.length >= limit - 1;
+      } else {
+        throw Exception('Unexpected traction response: $json');
+      }
+    } catch (e) {
+      debugPrint('Failed to fetch traction: $e');
+      if (!append) {
+        _traction = [];
+      }
+      _tractionHasMore = false;
+    } finally {
+      _isTractionLoading = false;
+      _notifyAsync();
+    }
+  }
+
+  Future<List<LocoAttrVersion>> fetchLocoTimeline(int locoId) async {
+    _isLocoTimelineLoading[locoId] = true;
+    _notifyAsync();
+    try {
+      final json = await api.get('/loco/get-timeline/$locoId');
+      final timeline = LocoAttrVersion.fromGroupedJson(json);
+      _locoTimelines[locoId] = timeline;
+      return timeline;
+    } catch (e) {
+      debugPrint('Failed to fetch loco timeline for $locoId: $e');
+      _locoTimelines[locoId] = [];
+      return [];
+    } finally {
+      _isLocoTimelineLoading[locoId] = false;
+      _notifyAsync();
+    }
+  }
+
+  Future<dynamic> createLoco(Map<String, dynamic> payload) async {
+    try {
+      final response = await api.put('/loco/new', payload);
+      final locoClass = payload['class']?.toString();
+      if (locoClass != null &&
+          locoClass.isNotEmpty &&
+          !_locoClasses.contains(locoClass)) {
+        _locoClasses = [..._locoClasses, locoClass];
+      }
+      _notifyAsync();
+      return response;
+    } catch (e) {
+      debugPrint('Failed to create loco: $e');
+      rethrow;
+    }
+  }
+
+  Future<void> fetchOnThisDay({DateTime? date}) async {
+    _isOnThisDayLoading = true;
+    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')}";
+    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');
+      _onThisDay = [];
+    } finally {
+      _isOnThisDayLoading = false;
+      _notifyAsync();
+    }
+  }
+
+  Future<void> fetchTripDetails() async {
+    _isTripDetailsLoading = true;
+    try {
+      final json = await api.get('/trips/legs-and-stats');
+      if (json is List) {
+        final tripMap = json.map((e) => TripDetail.fromJson(e)).toList();
+        _tripDetails = [...tripMap]..sort((a, b) => b.id.compareTo(a.id));
+      } else {
+        _tripDetails = [];
+      }
+    } catch (e) {
+      debugPrint('Failed to fetch trip_map: $e');
+      _tripDetails = [];
+    } finally {
+      _isTripDetailsLoading = false;
+      _notifyAsync();
+    }
+  }
+
+  Future<List<TripLocoStat>> fetchTripLocoStats(int tripId) async {
+    try {
+      final json = await api.get('/trips/stats/$tripId');
+      return _parseTripLocoStats(json);
+    } catch (e) {
+      debugPrint('Failed to fetch trip loco stats: $e');
+      return [];
+    }
+  }
+
+  List<TripLocoStat> _parseTripLocoStats(dynamic json) {
+    List<dynamic>? list;
+    if (json is List) {
+      list = json.expand((e) => e is List ? e : [e]).toList();
+    } else if (json is Map) {
+      for (final key in ['locos', 'stats', 'data', 'trip_locos']) {
+        final candidate = json[key];
+        if (candidate is List) {
+          list = candidate.expand((e) => e is List ? e : [e]).toList();
+          break;
+        }
+      }
+    }
+    if (list == null) return [];
+    return list
+        .whereType<Map<String, dynamic>>()
+        .map((e) => TripLocoStat.fromJson(e))
+        .toList();
+  }
+
+  Future<void> fetchEventFields({bool force = false}) async {
+    if (_eventFields.isNotEmpty && !force) return;
+    _isEventFieldsLoading = true;
+    _notifyAsync();
+    try {
+      final json = await api.get('/event/fields');
+      List<EventField> fields = _parseEventFields(json);
+      if (fields.isEmpty) {
+        fields = _fallbackEventFields;
+      }
+      _eventFields = fields;
+    } catch (e) {
+      debugPrint('Failed to fetch event fields: $e');
+      _eventFields = _fallbackEventFields;
+    } finally {
+      _isEventFieldsLoading = false;
+      _notifyAsync();
+    }
+  }
+
+  List<EventField> _parseEventFields(dynamic json) {
+    if (json is List) {
+      return json
+          .whereType<Map<String, dynamic>>()
+          .map(EventField.fromJson)
+          .toList();
+    }
+    if (json is Map) {
+      if (json['fields'] is List) {
+        return (json['fields'] as List)
+            .whereType<Map<String, dynamic>>()
+            .map(EventField.fromJson)
+            .toList();
+      }
+      // If map of name -> definition
+      return json.entries
+          .where((entry) => entry.value is Map<String, dynamic>)
+          .map((entry) {
+            final map = Map<String, dynamic>.from(entry.value);
+            map['name'] = entry.key;
+            return EventField.fromJson(map);
+          })
+          .toList();
+    }
+    return [];
+  }
+
+  Future<void> fetchTrips() async {
+    try {
+      final json = await api.get('/trips/mileage');
+      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();
+    }
+  }
+
+  Future<List<String>> fetchClassList() async {
+    if (_locoClasses.isNotEmpty) return _locoClasses;
+    try {
+      final json = await api.get('/loco/classlist');
+      if (json is List) {
+        _locoClasses = json.map((e) => e.toString()).toList();
+        _notifyAsync();
+      }
+    } catch (e) {
+      debugPrint('Failed to fetch class list: $e');
+    }
+    return _locoClasses;
+  }
+
+  Future<void> createLocoEvent({
+    required int locoId,
+    required String eventDate,
+    required Map<String, dynamic> values,
+    required String details,
+    String eventType = 'other',
+  }) async {
+    try {
+      await api.put(
+        '/event/new',
+        {
+          'loco_id': locoId,
+          'loco_event_type': eventType,
+          'loco_event_date': eventDate,
+          'loco_event_value': jsonEncode(values),
+          'loco_event_details': details,
+        },
+      );
+    } catch (e) {
+      debugPrint('Failed to create loco event: $e');
+      rethrow;
+    }
+  }
+
+  void clear() {
+    _homepageStats = null;
+    _legs = [];
+    _onThisDay = [];
+    _trips = [];
+    _tripDetails = [];
+    _eventFields = [];
+    _locoTimelines.clear();
+    _isLocoTimelineLoading.clear();
+    _notifyAsync();
+  }
+
+  double getMileageForCurrentYear() {
+    final currentYear = DateTime.now().year;
+    return getMileageForYear(currentYear) ?? 0;
+  }
+
+  double? getMileageForYear(int year) {
+    return _homepageStats?.yearlyMileage
+            .firstWhere(
+              (entry) => entry.year == year,
+              orElse: () => YearlyMileage(year: null, mileage: 0),
+            )
+            .mileage ??
+        0;
+  }
+
+  Future<List<Station>> fetchStations() 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!;
+    }
+
+    final response = await api.get('/location');
+    final parsed = (response as List).map((e) => Station.fromJson(e)).toList();
+
+    _cachedStations = parsed;
+    _stationsFetchedAt = now;
+
+    return parsed;
+  }
+}

lib/services/navigation_guard.dart

@@ -0,0 +1,40 @@
+typedef NavigationGuardCallback = Future<bool> Function();
+
+class NavigationGuard {
+  static NavigationGuardCallback? _callback;
+
+  static void register(NavigationGuardCallback callback) {
+    _callback = callback;
+  }
+
+  static void unregister(NavigationGuardCallback callback) {
+    if (_callback == callback) {
+      _callback = null;
+    }
+  }
+
+  static Future<void> attemptNavigation(
+    Future<void> Function() performNavigation,
+  ) async {
+    if (_promptActive) return;
+    final cb = _callback;
+    if (cb == null) {
+      await performNavigation();
+      return;
+    }
+    _promptActive = true;
+    bool allow = false;
+    try {
+      allow = await cb();
+    } catch (_) {
+      allow = false;
+    } finally {
+      _promptActive = false;
+    }
+    if (allow) {
+      await performNavigation();
+    }
+  }
+
+  static bool _promptActive = false;
+}

lib/services/token_storage_service.dart

@@ -0,0 +1,57 @@
+import 'package:flutter_secure_storage/flutter_secure_storage.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+
+/// Stores the auth token in secure storage and falls back to SharedPreferences
+/// so debug builds and platforms without a working keyring still persist.
+class TokenStorageService {
+  TokenStorageService._internal();
+
+  static final TokenStorageService _instance = TokenStorageService._internal();
+
+  factory TokenStorageService() => _instance;
+
+  static const _tokenKey = 'auth_token';
+  final FlutterSecureStorage _secureStorage = const FlutterSecureStorage();
+
+  Future<SharedPreferences> get _prefs async =>
+      await SharedPreferences.getInstance();
+
+  Future<void> setToken(String token) async {
+    try {
+      await _secureStorage.write(key: _tokenKey, value: token);
+    } catch (_) {
+      // ignore secure storage failures in debug/unsupported environments
+    }
+    final prefs = await _prefs;
+    await prefs.setString(_tokenKey, token);
+  }
+
+  Future<String?> getToken() async {
+    try {
+      final secured = await _secureStorage.read(key: _tokenKey);
+      if (secured != null && secured.isNotEmpty) {
+        return secured;
+      }
+    } catch (_) {
+      // ignore and fall back
+    }
+    final prefs = await _prefs;
+    final token = prefs.getString(_tokenKey);
+    return (token == null || token.isEmpty) ? null : token;
+  }
+
+  Future<void> clearToken() async {
+    try {
+      await _secureStorage.delete(key: _tokenKey);
+    } catch (_) {
+      // ignore
+    }
+    final prefs = await _prefs;
+    await prefs.remove(_tokenKey);
+  }
+
+  Future<bool> hasToken() async {
+    final token = await getToken();
+    return token != null && token.isNotEmpty;
+  }
+}

linux/flutter/generated_plugin_registrant.cc

@@ -7,9 +7,13 @@
 #include "generated_plugin_registrant.h"
 
 #include <dynamic_color/dynamic_color_plugin.h>
+#include <flutter_secure_storage_linux/flutter_secure_storage_linux_plugin.h>
 
 void fl_register_plugins(FlPluginRegistry* registry) {
   g_autoptr(FlPluginRegistrar) dynamic_color_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "DynamicColorPlugin");
   dynamic_color_plugin_register_with_registrar(dynamic_color_registrar);
+  g_autoptr(FlPluginRegistrar) flutter_secure_storage_linux_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "FlutterSecureStorageLinuxPlugin");
+  flutter_secure_storage_linux_plugin_register_with_registrar(flutter_secure_storage_linux_registrar);
 }

linux/flutter/generated_plugins.cmake

@@ -4,6 +4,7 @@
 
 list(APPEND FLUTTER_PLUGIN_LIST
   dynamic_color
+  flutter_secure_storage_linux
 )
 
 list(APPEND FLUTTER_FFI_PLUGIN_LIST

macos/Flutter/GeneratedPluginRegistrant.swift

@@ -6,7 +6,13 @@ import FlutterMacOS
 import Foundation
 
 import dynamic_color
+import flutter_secure_storage_darwin
+import path_provider_foundation
+import shared_preferences_foundation
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   DynamicColorPlugin.register(with: registry.registrar(forPlugin: "DynamicColorPlugin"))
+  FlutterSecureStorageDarwinPlugin.register(with: registry.registrar(forPlugin: "FlutterSecureStorageDarwinPlugin"))
+  PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
+  SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
 }

pubspec.lock

@@ -1,6 +1,22 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  archive:
+    dependency: transitive
+    description:
+      name: archive
+      sha256: "2fde1607386ab523f7a36bb3e7edb43bd58e6edaf2ffb29d8a6d578b297fdbbd"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.7"
+  args:
+    dependency: transitive
+    description:
+      name: args
+      sha256: d0481093c50b1da8910eb0bb301626d4d8eb7284aa739614d2b394ee09e3ea04
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.7.0"
   async:
     dependency: transitive
     description:
@@ -25,6 +41,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.4.0"
+  checked_yaml:
+    dependency: transitive
+    description:
+      name: checked_yaml
+      sha256: "959525d3162f249993882720d52b7e0c833978df229be20702b33d48d91de70f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.4"
+  cli_util:
+    dependency: transitive
+    description:
+      name: cli_util
+      sha256: ff6785f7e9e3c38ac98b2fb035701789de90154024a75b6cb926445e83197d1c
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.4.2"
   clock:
     dependency: transitive
     description:
@@ -34,13 +66,21 @@ packages:
     source: hosted
     version: "1.1.2"
   collection:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: collection
       sha256: "2f5709ae4d3d59dd8f7cd309b4e023046b57d8a6c82130785d2b0e5868084e76"
       url: "https://pub.dev"
     source: hosted
     version: "1.19.1"
+  crypto:
+    dependency: transitive
+    description:
+      name: crypto
+      sha256: c8ea0233063ba03258fbcf2ca4d6dadfefe14f02fab57702265467a19f27fadf
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.7"
   cupertino_icons:
     dependency: "direct main"
     description:
@@ -65,11 +105,35 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.3.3"
+  ffi:
+    dependency: transitive
+    description:
+      name: ffi
+      sha256: "289279317b4b16eb2bb7e271abccd4bf84ec9bdcbe999e278a94b804f5630418"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.4"
+  file:
+    dependency: transitive
+    description:
+      name: file
+      sha256: a3b4f84adafef897088c160faf7dfffb7696046cb13ae90b508c2cbc95d3b8d4
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.0.1"
   flutter:
     dependency: "direct main"
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_launcher_icons:
+    dependency: "direct dev"
+    description:
+      name: flutter_launcher_icons
+      sha256: "526faf84284b86a4cb36d20a5e45147747b7563d921373d4ee0559c54fcdbcea"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.13.1"
   flutter_lints:
     dependency: "direct dev"
     description:
@@ -78,6 +142,54 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "6.0.0"
+  flutter_secure_storage:
+    dependency: "direct main"
+    description:
+      name: flutter_secure_storage
+      sha256: da922f2aab2d733db7e011a6bcc4a825b844892d4edd6df83ff156b09a9b2e40
+      url: "https://pub.dev"
+    source: hosted
+    version: "10.0.0"
+  flutter_secure_storage_darwin:
+    dependency: transitive
+    description:
+      name: flutter_secure_storage_darwin
+      sha256: "8878c25136a79def1668c75985e8e193d9d7d095453ec28730da0315dc69aee3"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.2.0"
+  flutter_secure_storage_linux:
+    dependency: transitive
+    description:
+      name: flutter_secure_storage_linux
+      sha256: "2b5c76dce569ab752d55a1cee6a2242bcc11fdba927078fb88c503f150767cda"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.0"
+  flutter_secure_storage_platform_interface:
+    dependency: transitive
+    description:
+      name: flutter_secure_storage_platform_interface
+      sha256: "8ceea1223bee3c6ac1a22dabd8feefc550e4729b3675de4b5900f55afcb435d6"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.1"
+  flutter_secure_storage_web:
+    dependency: transitive
+    description:
+      name: flutter_secure_storage_web
+      sha256: "6a1137df62b84b54261dca582c1c09ea72f4f9a4b2fcee21b025964132d5d0c3"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
+  flutter_secure_storage_windows:
+    dependency: transitive
+    description:
+      name: flutter_secure_storage_windows
+      sha256: "3b7c8e068875dfd46719ff57c90d8c459c87f2302ed6b00ff006b3c9fcad1613"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.1.0"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -112,6 +224,30 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.1.2"
+  image:
+    dependency: transitive
+    description:
+      name: image
+      sha256: "51555e36056541237b15b57afc31a0f53d4f9aefd9bd00873a6dc0090e54e332"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.6.0"
+  intl:
+    dependency: "direct main"
+    description:
+      name: intl
+      sha256: d6f56758b7d3014a48af9701c085700aac781a92a87a62b1333b46d8879661cf
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.19.0"
+  json_annotation:
+    dependency: transitive
+    description:
+      name: json_annotation
+      sha256: "1ce844379ca14835a50d2f019a3099f419082cfdd231cd86a142af94dd5c6bb1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.9.0"
   leak_tracker:
     dependency: transitive
     description:
@@ -192,6 +328,86 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.9.1"
+  path_provider:
+    dependency: transitive
+    description:
+      name: path_provider
+      sha256: "50c5dd5b6e1aaf6fb3a78b33f6aa3afca52bf903a8a5298f53101fdaee55bbcd"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.5"
+  path_provider_android:
+    dependency: transitive
+    description:
+      name: path_provider_android
+      sha256: "3b4c1fc3aa55ddc9cd4aa6759984330d5c8e66aa7702a6223c61540dc6380c37"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.19"
+  path_provider_foundation:
+    dependency: transitive
+    description:
+      name: path_provider_foundation
+      sha256: "16eef174aacb07e09c351502740fa6254c165757638eba1e9116b0a781201bbd"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.2"
+  path_provider_linux:
+    dependency: transitive
+    description:
+      name: path_provider_linux
+      sha256: f7a1fe3a634fe7734c8d3f2766ad746ae2a2884abe22e241a8b301bf5cac3279
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.1"
+  path_provider_platform_interface:
+    dependency: transitive
+    description:
+      name: path_provider_platform_interface
+      sha256: "88f5779f72ba699763fa3a3b06aa4bf6de76c8e5de842cf6f29e2e06476c2334"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.2"
+  path_provider_windows:
+    dependency: transitive
+    description:
+      name: path_provider_windows
+      sha256: bd6f00dbd873bfb70d0761682da2b3a2c2fccc2b9e84c495821639601d81afe7
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.0"
+  petitparser:
+    dependency: transitive
+    description:
+      name: petitparser
+      sha256: "1a97266a94f7350d30ae522c0af07890c70b8e62c71e8e3920d1db4d23c057d1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.0.1"
+  platform:
+    dependency: transitive
+    description:
+      name: platform
+      sha256: "5d6b1b0036a5f331ebc77c850ebc8506cbc1e9416c27e59b439f917a902a4984"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.6"
+  plugin_platform_interface:
+    dependency: transitive
+    description:
+      name: plugin_platform_interface
+      sha256: "4820fbfdb9478b1ebae27888254d445073732dae3d6ea81f0b7e06d5dedc3f02"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.8"
+  posix:
+    dependency: transitive
+    description:
+      name: posix
+      sha256: "6323a5b0fa688b6a010df4905a56b00181479e6d10534cecfecede2aa55add61"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.0.3"
   provider:
     dependency: "direct main"
     description:
@@ -200,6 +416,62 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "6.1.5"
+  shared_preferences:
+    dependency: "direct main"
+    description:
+      name: shared_preferences
+      sha256: "6e8bf70b7fef813df4e9a36f658ac46d107db4b4cfe1048b477d4e453a8159f5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.5.3"
+  shared_preferences_android:
+    dependency: transitive
+    description:
+      name: shared_preferences_android
+      sha256: bd14436108211b0d4ee5038689a56d4ae3620fd72fd6036e113bf1345bc74d9e
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.13"
+  shared_preferences_foundation:
+    dependency: transitive
+    description:
+      name: shared_preferences_foundation
+      sha256: "6a52cfcdaeac77cad8c97b539ff688ccfc458c007b4db12be584fbe5c0e49e03"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.5.4"
+  shared_preferences_linux:
+    dependency: transitive
+    description:
+      name: shared_preferences_linux
+      sha256: "580abfd40f415611503cae30adf626e6656dfb2f0cee8f465ece7b6defb40f2f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.1"
+  shared_preferences_platform_interface:
+    dependency: transitive
+    description:
+      name: shared_preferences_platform_interface
+      sha256: "57cbf196c486bc2cf1f02b85784932c6094376284b3ad5779d1b1c6c6a816b80"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.1"
+  shared_preferences_web:
+    dependency: transitive
+    description:
+      name: shared_preferences_web
+      sha256: c49bd060261c9a3f0ff445892695d6212ff603ef3115edbb448509d407600019
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.3"
+  shared_preferences_windows:
+    dependency: transitive
+    description:
+      name: shared_preferences_windows
+      sha256: "94ef0f72b2d71bc3e700e025db3710911bd51a71cefb65cc609dd0d9a982e3c1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.1"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -285,6 +557,38 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.1.1"
+  win32:
+    dependency: transitive
+    description:
+      name: win32
+      sha256: d7cb55e04cd34096cd3a79b3330245f54cb96a370a1c27adb3c84b917de8b08e
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.15.0"
+  xdg_directories:
+    dependency: transitive
+    description:
+      name: xdg_directories
+      sha256: "7a3f37b05d989967cdddcbb571f1ea834867ae2faa29725fd085180e0883aa15"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
+  xml:
+    dependency: transitive
+    description:
+      name: xml
+      sha256: "971043b3a0d3da28727e40ed3e0b5d18b742fa5a68665cca88e74b7876d5e025"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.6.1"
+  yaml:
+    dependency: transitive
+    description:
+      name: yaml
+      sha256: b9da305ac7c39faa3f030eccd175340f968459dae4af175130b3fc47e40d76ce
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.3"
 sdks:
   dart: ">=3.8.1 <4.0.0"
-  flutter: ">=3.27.0"
+  flutter: ">=3.29.0"

pubspec.yaml

@@ -1,5 +1,5 @@
 name: mileograph_flutter
-description: "A new Flutter project."
+description: "Native app for the Mileograph website"
 # The following line prevents the package from being accidentally published to
 # pub.dev using `flutter pub publish`. This is preferred for private packages.
 publish_to: "none" # Remove this line if you wish to publish to pub.dev
@@ -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: 1.0.0+1
+version: 0.2.1+1
 
 environment:
   sdk: ^3.8.1
@@ -30,9 +30,13 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  intl: ^0.19.0
+  shared_preferences: ^2.2.2
   http: ^1.4.0
   provider: ^6.1.5
   dynamic_color: ^1.6.6
+  flutter_secure_storage: ^10.0.0
+  collection: ^1.18.0
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
@@ -49,6 +53,7 @@ dev_dependencies:
   # package. See that file for information about deactivating specific lint
   # rules and activating additional ones.
   flutter_lints: ^6.0.0
+  flutter_launcher_icons: ^0.13.1
 
 # For information on the generic Dart part of this file, see the
 # following page: https://dart.dev/tools/pub/pubspec
@@ -93,3 +98,11 @@ flutter:
   #
   # For details regarding fonts from package dependencies,
   # see https://flutter.dev/to/font-from-package
+
+flutter_launcher_icons:
+  android: true
+  ios: true
+  image_path: assets/icons/app_icon.png
+  adaptive_icon_background: "#ffffff"
+  adaptive_icon_foreground: assets/icons/app_icon.png
+  min_sdk_android: 21

windows/flutter/generated_plugin_registrant.cc

@@ -7,8 +7,11 @@
 #include "generated_plugin_registrant.h"
 
 #include <dynamic_color/dynamic_color_plugin_c_api.h>
+#include <flutter_secure_storage_windows/flutter_secure_storage_windows_plugin.h>
 
 void RegisterPlugins(flutter::PluginRegistry* registry) {
   DynamicColorPluginCApiRegisterWithRegistrar(
       registry->GetRegistrarForPlugin("DynamicColorPluginCApi"));
+  FlutterSecureStorageWindowsPluginRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("FlutterSecureStorageWindowsPlugin"));
 }

windows/flutter/generated_plugins.cmake

@@ -4,6 +4,7 @@
 
 list(APPEND FLUTTER_PLUGIN_LIST
   dynamic_color
+  flutter_secure_storage_windows
 )
 
 list(APPEND FLUTTER_FFI_PLUGIN_LIST