From bd96fc032ebeba89b71aee2fbe79e85696ef68c6 Mon Sep 17 00:00:00 2001
From: Sven laptop <sven@huizevanhoof.nl>
Date: Thu, 7 May 2026 16:55:18 +0200
Subject: [PATCH] Enhance API clients with auto-logout on unauthorized
 responses; improve navigation and schedule handling with better error
 management and UI updates

Co-authored-by: Copilot <copilot@github.com>
---
 admin_ui/src/api.js                           | 32 +++++++++++++--
 admin_ui/src/components/FleetManager.jsx      | 21 ++++++++++
 admin_ui/src/components/ScheduleMaker.jsx     | 40 +++++++++++++------
 .../lib/screens/navigation_screen.dart        | 14 +++----
 .../lib/screens/schedule_overview_screen.dart |  4 +-
 .../lib/services/navigation_service.dart      | 39 ++++++++++++++++++
 6 files changed, 124 insertions(+), 26 deletions(-)

diff --git a/admin_ui/src/api.js b/admin_ui/src/api.js
index e09d7fd..2413a38 100644
--- a/admin_ui/src/api.js
+++ b/admin_ui/src/api.js
@@ -16,7 +16,31 @@ const AUTH_API = normalizeApiBaseUrl(RUNTIME.AUTH_API || import.meta.env.VITE_AU
 const TRANSIT_API = normalizeApiBaseUrl(RUNTIME.TRANSIT_API || import.meta.env.VITE_TRANSIT_API, 'http://localhost:5001')
 
 export const authClient = axios.create({ baseURL: AUTH_API })
-export const transitClient = (token) => axios.create({
-  baseURL: TRANSIT_API,
-  headers: { Authorization: `Bearer ${token}` }
-})
+
+export const transitClient = (token) => {
+  const client = axios.create({
+    baseURL: TRANSIT_API,
+    headers: { Authorization: `Bearer ${token}` }
+  })
+
+  // Auto-logout on unauthorized responses to avoid delayed failures
+  client.interceptors.response.use(
+    response => response,
+    error => {
+      try {
+        const status = error?.response?.status
+        if (status === 401 || status === 403) {
+          localStorage.removeItem('token')
+          localStorage.removeItem('user')
+          // reload to let App show the Login screen
+          if (typeof window !== 'undefined') window.location.reload()
+        }
+      } catch (e) {
+        // ignore
+      }
+      return Promise.reject(error)
+    }
+  )
+
+  return client
+}
diff --git a/admin_ui/src/components/FleetManager.jsx b/admin_ui/src/components/FleetManager.jsx
index da88cfe..5a7d6d9 100644
--- a/admin_ui/src/components/FleetManager.jsx
+++ b/admin_ui/src/components/FleetManager.jsx
@@ -22,6 +22,27 @@ export default function FleetManager({ token, user }) {
     }
   }
 
+  const overlay = {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1000,
+  }
+
+  const modal = {
+    backgroundColor: '#fff',
+    padding: '2rem',
+    borderRadius: '8px',
+    maxWidth: '400px',
+    boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+  }
+
   useEffect(() => {
     loadBuses()
   }, [])
diff --git a/admin_ui/src/components/ScheduleMaker.jsx b/admin_ui/src/components/ScheduleMaker.jsx
index 6e4b5de..6b403fb 100644
--- a/admin_ui/src/components/ScheduleMaker.jsx
+++ b/admin_ui/src/components/ScheduleMaker.jsx
@@ -424,18 +424,34 @@ export default function ScheduleMaker({ token, user }) {
                                           <td style={{ flex: 1 }}>{rs.name}</td>
                                           <td style={{ textAlign: 'right', color: '#666' }}>{formatTime(departureDate.toISOString())}</td>
                                           <td style={{ paddingLeft: '0.5rem' }}>
-                                            <input
-                                              type="number"
-                                              value={rs.estimatedArrivalMinutes ?? 0}
-                                              onChange={e => {
-                                                const val = e.target.value === '' ? '' : Number(e.target.value)
-                                                setRouteStopsByLine(prev => ({
-                                                  ...prev,
-                                                  [lineId]: prev[lineId].map(item => item.id === rs.id ? { ...item, estimatedArrivalMinutes: val } : item)
-                                                }))
-                                              }}
-                                              style={{ width: '5rem' }}
-                                            />
+                                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                                              <input
+                                                type="range"
+                                                min="0"
+                                                max="240"
+                                                value={Number(rs.estimatedArrivalMinutes ?? 0)}
+                                                onChange={e => {
+                                                  const val = Number(e.target.value)
+                                                  setRouteStopsByLine(prev => ({
+                                                    ...prev,
+                                                    [lineId]: prev[lineId].map(item => item.id === rs.id ? { ...item, estimatedArrivalMinutes: val } : item)
+                                                  }))
+                                                }}
+                                                style={{ width: '8rem' }}
+                                              />
+                                              <input
+                                                type="number"
+                                                value={Number(rs.estimatedArrivalMinutes ?? 0)}
+                                                onChange={e => {
+                                                  const val = e.target.value === '' ? 0 : Number(e.target.value)
+                                                  setRouteStopsByLine(prev => ({
+                                                    ...prev,
+                                                    [lineId]: prev[lineId].map(item => item.id === rs.id ? { ...item, estimatedArrivalMinutes: val } : item)
+                                                  }))
+                                                }}
+                                                style={{ width: '4.5rem' }}
+                                              />
+                                            </div>
                                             <button type="button" onClick={async () => {
                                               const newVal = Number((routeStopsByLine[lineId].find(i => i.id === rs.id)?.estimatedArrivalMinutes) || 0)
                                               try {
diff --git a/bus_terminal/lib/screens/navigation_screen.dart b/bus_terminal/lib/screens/navigation_screen.dart
index f961d2e..e05bbae 100644
--- a/bus_terminal/lib/screens/navigation_screen.dart
+++ b/bus_terminal/lib/screens/navigation_screen.dart
@@ -73,8 +73,6 @@ class _NavigationScreenState extends State<NavigationScreen> {
       // Defensive: filter out invalid stops (missing/NaN coordinates) and deduplicate
       if (_stops != null) {
         _stops = _stops!
-            .where((s) => s != null)
-            .where((s) => s.latitude != null && s.longitude != null)
             .where((s) => s.latitude.isFinite && s.longitude.isFinite)
             .toList();
 
@@ -107,7 +105,7 @@ class _NavigationScreenState extends State<NavigationScreen> {
             _isLoading = false;
           });
 
-          _fitMapToRoute(optimized.route);
+          WidgetsBinding.instance.addPostFrameCallback((_) => _fitMapToRoute(optimized.route));
         }
 
         return;
@@ -157,12 +155,12 @@ class _NavigationScreenState extends State<NavigationScreen> {
       if (mounted) {
         setState(() {
           _currentRoute = navRoute;
-          _alternativeRoutes = (alternatives ?? []).take(2).toList();
+            _alternativeRoutes = alternatives.take(2).toList();
           _isLoading = false;
         });
 
-        // Fit map to route bounds
-        _fitMapToRoute(navRoute);
+        // Fit map to route bounds after first frame so MapController is attached
+        WidgetsBinding.instance.addPostFrameCallback((_) => _fitMapToRoute(navRoute));
       }
     } catch (e) {
       if (mounted) {
@@ -265,7 +263,7 @@ class _NavigationScreenState extends State<NavigationScreen> {
         });
 
         if (navRoute != null) {
-          _fitMapToRoute(navRoute);
+          WidgetsBinding.instance.addPostFrameCallback((_) => _fitMapToRoute(navRoute));
         }
       }
     } catch (e) {
@@ -776,7 +774,7 @@ class _NavigationScreenState extends State<NavigationScreen> {
                             )
                           : ListView.separated(
                               itemCount: _stops!.length,
-                              separatorBuilder: (_, __) => const Divider(),
+                                separatorBuilder: (context, index) => const Divider(),
                               itemBuilder: (context, index) {
                                 final s = _stops![index];
                                 final color = _stopColor(index);
diff --git a/bus_terminal/lib/screens/schedule_overview_screen.dart b/bus_terminal/lib/screens/schedule_overview_screen.dart
index ad94f03..e3df529 100644
--- a/bus_terminal/lib/screens/schedule_overview_screen.dart
+++ b/bus_terminal/lib/screens/schedule_overview_screen.dart
@@ -116,8 +116,8 @@ class _ScheduleOverviewScreenState extends State<ScheduleOverviewScreen> {
                         // Close the sheet and start navigation with provided stops
                         Navigator.of(sheetContext).pop();
 
-                        final routeObj = sched.Route(
-                          id: (svc.id is num) ? (svc.id as num).toInt() : int.tryParse(svc.id.toString()) ?? 0,
+                          final routeObj = sched.Route(
+                            id: svc.id,
                           busLine: sched.BusLine(
                             id: svc.busLineId,
                             lineNumber: svc.lineNumber,
diff --git a/bus_terminal/lib/services/navigation_service.dart b/bus_terminal/lib/services/navigation_service.dart
index 3ddaa8c..efdaa70 100644
--- a/bus_terminal/lib/services/navigation_service.dart
+++ b/bus_terminal/lib/services/navigation_service.dart
@@ -38,6 +38,13 @@ class NavigationService {
     required NavigationPoint end,
   }) async {
     try {
+      bool validCoord(double lat, double lon) {
+        return lat.isFinite && lon.isFinite && lat >= -90 && lat <= 90 && lon >= -180 && lon <= 180;
+      }
+
+      if (!validCoord(start.latitude, start.longitude) || !validCoord(end.latitude, end.longitude)) {
+        throw Exception('Invalid coordinates for routing: start=(${start.latitude},${start.longitude}) end=(${end.latitude},${end.longitude})');
+      }
       // OSRM format: /route/v1/car/lon1,lat1;lon2,lat2
       final coordinates =
           '${start.longitude},${start.latitude};${end.longitude},${end.latitude}';
@@ -67,6 +74,16 @@ class NavigationService {
           start: start,
           end: end,
         );
+      } else if (response.statusCode == 400) {
+        // Bad request: OSRM couldn't parse coordinates. Fall back to a simple straight-line route.
+        try {
+          final distanceMeters = calculateDistance(start, end);
+          final durationSec = (distanceMeters / 11.111111).toInt(); // assume ~40 km/h -> 11.11 m/s
+          final leg = RouteLeg.fromPoints(points: [start, end], distance: distanceMeters, duration: durationSec, summary: 'Direct');
+          return NavigationRoute(start: start, end: end, legs: [leg], totalDistance: distanceMeters, totalDuration: durationSec);
+        } catch (e) {
+          throw Exception('Failed to get route (400) and fallback failed: ${e.toString()}');
+        }
       } else {
         throw Exception('Failed to get route: ${response.statusCode}');
       }
@@ -140,6 +157,14 @@ class NavigationService {
       final response = await http.get(Uri.parse(url));
 
       if (response.statusCode != 200) {
+        if (response.statusCode == 400) {
+          // fallback: return simple ordered stops route
+          final distanceMeters = _sumDistancesBetween(stops);
+          final durationSec = (distanceMeters / 11.111111).toInt();
+          final leg = RouteLeg.fromPoints(points: stops, distance: distanceMeters, duration: durationSec, summary: 'Fallback optimized trip');
+          final route = NavigationRoute(start: stops.first, end: stops.last, legs: [leg], totalDistance: distanceMeters, totalDuration: durationSec);
+          return OptimizedRouteResult(route: route, orderedStops: stops);
+        }
         throw Exception('Failed to get optimized route: ${response.statusCode}');
       }
 
@@ -255,6 +280,12 @@ class NavigationService {
             .toList();
 
         return routes;
+      } else if (response.statusCode == 400) {
+        // fallback: single straight-line route
+        final distanceMeters = calculateDistance(start, end);
+        final durationSec = (distanceMeters / 11.111111).toInt();
+        final leg = RouteLeg.fromPoints(points: [start, end], distance: distanceMeters, duration: durationSec, summary: 'Direct');
+        return [NavigationRoute(start: start, end: end, legs: [leg], totalDistance: distanceMeters, totalDuration: durationSec)];
       } else {
         throw Exception('Failed to get routes: ${response.statusCode}');
       }
@@ -263,6 +294,14 @@ class NavigationService {
     }
   }
 
+  double _sumDistancesBetween(List<NavigationPoint> points) {
+    var total = 0.0;
+    for (var i = 0; i < points.length - 1; i++) {
+      total += calculateDistance(points[i], points[i + 1]);
+    }
+    return total;
+  }
+
   /// Calculate straight-line distance between two points
   double calculateDistance(NavigationPoint p1, NavigationPoint p2) {
     const distance = Distance();