diff --git a/__tests__/components/shipments/TrackingMapEta.test.tsx b/__tests__/components/shipments/TrackingMapEta.test.tsx
new file mode 100644
index 00000000..fe611bd0
--- /dev/null
+++ b/__tests__/components/shipments/TrackingMapEta.test.tsx
@@ -0,0 +1,380 @@
+/**
+ * [Test] Component: View Estimated Delivery Date Map Logic & UI (Issue #487)
+ *
+ * Automated component tests verifying that the real TrackingMap component:
+ * 1. Renders physical route updates (origin, destination, checkpoints, live
+ *    in-transit driver markers, polylines, and map bounds updates).
+ * 2. Calculates and displays ETA and Estimated Delivery Date accurately
+ *    across initial routes, live driver telemetry updates, and fallback
+ *    distance calculations.
+ * 3. Handles edge cases, empty states, and error states reliably with all
+ *    external dependencies (Leaflet, APIs, WebSockets, Web3 wallets) mocked.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import {
+  TrackingMap,
+  calculateRemainingEtaMinutes,
+  calculateEstimatedDeliveryDate,
+} from '@/components/shipments/TrackingMap';
+import { useTrackingRoute } from '@/hooks/useTrackingRoute';
+import type { RouteData } from '@/types/tracking';
+
+const mockFitBounds = jest.fn();
+
+jest.mock('@/hooks/useTrackingRoute');
+const mockUseTrackingRoute = useTrackingRoute as jest.MockedFunction<
+  typeof useTrackingRoute
+>;
+
+jest.mock('leaflet', () => ({
+  __esModule: true,
+  default: {
+    icon: jest.fn((opts) => opts),
+    latLngBounds: jest.fn((sw, ne) => ({ sw, ne })),
+  },
+}));
+
+jest.mock('react-leaflet', () => {
+  const ReactLib = require('react');
+  return {
+    __esModule: true,
+    MapContainer: ({ children, center, zoom, style }: Record<string, unknown>) =>
+      ReactLib.createElement(
+        'div',
+        {
+          'data-testid': 'map-container',
+          'data-center': Array.isArray(center) ? center.join(',') : '',
+          'data-zoom': String(zoom),
+          style,
+        },
+        children as React.ReactNode,
+      ),
+    TileLayer: ({ url }: { url: string }) =>
+      ReactLib.createElement('div', {
+        'data-testid': 'tile-layer',
+        'data-url': url,
+      }),
+    Marker: ({
+      children,
+      position,
+    }: {
+      children: React.ReactNode;
+      position: [number, number];
+    }) =>
+      ReactLib.createElement(
+        'div',
+        {
+          'data-testid': 'map-marker',
+          'data-position': position.join(','),
+        },
+        children,
+      ),
+    Popup: ({ children }: { children: React.ReactNode }) =>
+      ReactLib.createElement('div', { 'data-testid': 'map-popup' }, children),
+    Polyline: ({ positions }: { positions: [number, number][] }) =>
+      ReactLib.createElement('div', {
+        'data-testid': 'polyline',
+        'data-positions': positions.map((p) => p.join(',')).join(';'),
+      }),
+    useMap: () => ({
+      fitBounds: mockFitBounds,
+    }),
+  };
+});
+
+describe('TrackingMap Component: Physical Route Updates & ETA Calculation (Issue #487)', () => {
+  const deliveryId = 'deliv-eta-487';
+
+  const baseRouteData: RouteData = {
+    deliveryId,
+    origin: { latitude: 6.5244, longitude: 3.3792 },
+    destination: { latitude: 6.6244, longitude: 3.3792 },
+    waypoints: [
+      {
+        coordinate: { latitude: 6.5244, longitude: 3.3792 },
+        label: 'Apapa Dispatch',
+        type: 'origin',
+      },
+      {
+        coordinate: { latitude: 6.5744, longitude: 3.3792 },
+        label: 'Midway Hub',
+        type: 'checkpoint',
+        address: '14 Ikorodu Road',
+      },
+      {
+        coordinate: { latitude: 6.6244, longitude: 3.3792 },
+        label: 'Ikeja Destination',
+        type: 'destination',
+      },
+    ],
+    distance: 20.0,
+    estimatedTime: 30,
+    currentLocation: { latitude: 6.5244, longitude: 3.3792 },
+    status: 'in_transit',
+    timestamp: '2026-10-19T08:00:00.000Z',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Happy Path: Physical Route Rendering & Live Updates', () => {
+    it('renders the delivery route map, polyline coordinates, checkpoints, and fits bounds', () => {
+      mockUseTrackingRoute.mockReturnValue({
+        routeData: baseRouteData,
+        currentLocation: baseRouteData.currentLocation!,
+        isLoading: false,
+        isError: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<TrackingMap deliveryId={deliveryId} />);
+
+      expect(screen.getByTestId('map-container')).toBeInTheDocument();
+      expect(screen.getByTestId('tile-layer')).toBeInTheDocument();
+      expect(screen.getByTestId('polyline')).toHaveAttribute(
+        'data-positions',
+        '6.5244,3.3792;6.5744,3.3792;6.6244,3.3792',
+      );
+      expect(screen.getByText('Origin')).toBeInTheDocument();
+      expect(screen.getByText('Destination')).toBeInTheDocument();
+      expect(screen.getByText('Midway Hub')).toBeInTheDocument();
+      expect(screen.getByText('Current Location')).toBeInTheDocument();
+      expect(mockFitBounds).toHaveBeenCalledTimes(1);
+    });
+
+    it('updates physical route marker and remaining ETA when live driver location advances halfway to destination', () => {
+      mockUseTrackingRoute.mockReturnValue({
+        routeData: baseRouteData,
+        currentLocation: { latitude: 6.5244, longitude: 3.3792 },
+        isLoading: false,
+        isError: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      const { rerender } = render(<TrackingMap deliveryId={deliveryId} />);
+
+      expect(
+        screen.getByTestId('current-location-coordinates'),
+      ).toHaveTextContent('6.5244, 3.3792');
+      expect(screen.getByTestId('dynamic-remaining-eta')).toHaveTextContent(
+        '30 min remaining',
+      );
+
+      // Driver advances halfway from 6.5244 to 6.6244 -> 6.5744
+      mockUseTrackingRoute.mockReturnValue({
+        routeData: baseRouteData,
+        currentLocation: { latitude: 6.5744, longitude: 3.3792 },
+        isLoading: false,
+        isError: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      rerender(<TrackingMap deliveryId={deliveryId} />);
+
+      expect(
+        screen.getByTestId('current-location-coordinates'),
+      ).toHaveTextContent('6.5744, 3.3792');
+      expect(screen.getByTestId('dynamic-remaining-eta')).toHaveTextContent(
+        '15 min remaining',
+      );
+    });
+
+    it('re-renders the polyline and checkpoints when physical route waypoints are updated', () => {
+      mockUseTrackingRoute.mockReturnValue({
+        routeData: baseRouteData,
+        currentLocation: baseRouteData.currentLocation!,
+        isLoading: false,
+        isError: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      const { rerender } = render(<TrackingMap deliveryId={deliveryId} />);
+      expect(screen.getByTestId('polyline')).toHaveAttribute(
+        'data-positions',
+        '6.5244,3.3792;6.5744,3.3792;6.6244,3.3792',
+      );
+
+      const reroutedData: RouteData = {
+        ...baseRouteData,
+        waypoints: [
+          ...baseRouteData.waypoints.slice(0, 2),
+          {
+            coordinate: { latitude: 6.6, longitude: 3.39 },
+            label: 'Alternate Bypass',
+            type: 'checkpoint',
+          },
+          baseRouteData.waypoints[2],
+        ],
+        distance: 24.0,
+        estimatedTime: 36,
+      };
+
+      mockUseTrackingRoute.mockReturnValue({
+        routeData: reroutedData,
+        currentLocation: reroutedData.currentLocation!,
+        isLoading: false,
+        isError: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      rerender(<TrackingMap deliveryId={deliveryId} />);
+
+      expect(screen.getByText('Alternate Bypass')).toBeInTheDocument();
+      expect(screen.getByTestId('polyline')).toHaveAttribute(
+        'data-positions',
+        '6.5244,3.3792;6.5744,3.3792;6.6,3.39;6.6244,3.3792',
+      );
+      expect(screen.getByTestId('distance-value')).toHaveTextContent('24.0 km');
+      expect(screen.getByTestId('estimated-time-value')).toHaveTextContent(
+        '36 min',
+      );
+    });
+  });
+
+  describe('ETA & Estimated Delivery Date Calculation Logic', () => {
+    it('calculates exact ISO estimated delivery date from route timestamp and ETA', () => {
+      mockUseTrackingRoute.mockReturnValue({
+        routeData: baseRouteData,
+        currentLocation: baseRouteData.currentLocation!,
+        isLoading: false,
+        isError: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<TrackingMap deliveryId={deliveryId} />);
+
+      expect(screen.getByTestId('estimated-time-value')).toHaveTextContent(
+        '30 min',
+      );
+      expect(screen.getByTestId('estimated-delivery-date')).toHaveTextContent(
+        '2026-10-19T08:30:00.000Z',
+      );
+    });
+
+    it('derives fallback ETA from route distance when estimatedTime is omitted', () => {
+      const routeWithoutExplicitEta: RouteData = {
+        ...baseRouteData,
+        estimatedTime: undefined,
+        distance: 20, // 20 km at 40 km/h = 30 min
+      };
+
+      mockUseTrackingRoute.mockReturnValue({
+        routeData: routeWithoutExplicitEta,
+        currentLocation: null,
+        isLoading: false,
+        isError: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<TrackingMap deliveryId={deliveryId} />);
+
+      expect(screen.getByTestId('estimated-time-value')).toHaveTextContent(
+        '30 min',
+      );
+      expect(screen.getByTestId('estimated-delivery-date')).toHaveTextContent(
+        '2026-10-19T08:30:00.000Z',
+      );
+    });
+
+    it('returns 0 remaining ETA when delivery status is delivered', () => {
+      const deliveredRoute: RouteData = {
+        ...baseRouteData,
+        status: 'delivered',
+      };
+
+      expect(calculateRemainingEtaMinutes(deliveredRoute)).toBe(0);
+    });
+
+    it('returns null for calculateEstimatedDeliveryDate when timestamp is invalid', () => {
+      expect(calculateEstimatedDeliveryDate('invalid-date', 25)).toBeNull();
+      expect(calculateEstimatedDeliveryDate(undefined, 25)).toBeNull();
+    });
+  });
+
+  describe('Edge Cases, Empty States, and Error Handling', () => {
+    it('renders loading state with spinner while fetching route data', () => {
+      mockUseTrackingRoute.mockReturnValue({
+        routeData: null,
+        currentLocation: null,
+        isLoading: true,
+        isError: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<TrackingMap deliveryId={deliveryId} />);
+
+      expect(screen.getByTestId('spinner')).toBeInTheDocument();
+      expect(screen.getByText('Loading map...')).toBeInTheDocument();
+    });
+
+    it('renders empty state when deliveryId is null or routeData is unavailable', () => {
+      mockUseTrackingRoute.mockReturnValue({
+        routeData: null,
+        currentLocation: null,
+        isLoading: false,
+        isError: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<TrackingMap deliveryId={null} />);
+
+      expect(screen.getByTestId('package-icon')).toBeInTheDocument();
+      expect(
+        screen.getByText('No delivery data available'),
+      ).toBeInTheDocument();
+    });
+
+    it('renders error alert and invokes onMapError callback when route fetch fails', () => {
+      const onMapError = jest.fn();
+      mockUseTrackingRoute.mockReturnValue({
+        routeData: null,
+        currentLocation: null,
+        isLoading: false,
+        isError: true,
+        error: 'Request timeout - unable to fetch route',
+        refetch: jest.fn(),
+      });
+
+      render(<TrackingMap deliveryId={deliveryId} onMapError={onMapError} />);
+
+      expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
+      expect(
+        screen.getByText('Request timeout - unable to fetch route'),
+      ).toBeInTheDocument();
+      expect(onMapError).toHaveBeenCalledWith(
+        'Request timeout - unable to fetch route',
+      );
+    });
+
+    it('handles empty waypoints array gracefully without rendering a broken polyline', () => {
+      mockUseTrackingRoute.mockReturnValue({
+        routeData: {
+          ...baseRouteData,
+          waypoints: [],
+        },
+        currentLocation: null,
+        isLoading: false,
+        isError: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<TrackingMap deliveryId={deliveryId} />);
+
+      expect(screen.getByTestId('map-container')).toBeInTheDocument();
+      expect(screen.queryByTestId('polyline')).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/components/fleet/FleetMapClient.tsx b/components/fleet/FleetMapClient.tsx
index 2e3f1fdf..45594a1f 100644
--- a/components/fleet/FleetMapClient.tsx
+++ b/components/fleet/FleetMapClient.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   MapContainer,
   TileLayer,
@@ -11,22 +11,48 @@ import {
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import { cellSizeForZoom, clusterDrivers } from './clustering';
+import { useRouteOptimization } from '@/hooks/useRouteOptimization';
 import type { Driver } from '@/types/fleet';
+import type {
+  OptimizerWaypoint,
+  RouteOptimizationResult,
+} from '@/types/routeOptimizer';
 
-interface FleetMapClientProps {
+export interface FleetMapClientProps {
   drivers: Driver[];
+  waypoints?: OptimizerWaypoint[];
+  onWaypointReorder?: (
+    _reorderedWaypoints: OptimizerWaypoint[],
+    _result: RouteOptimizationResult,
+  ) => void;
+  snapRadiusDegrees?: number;
 }
 
 const DEFAULT_CENTER: [number, number] = [9.082, 8.6753]; // Nigeria centroid
 const INITIAL_ZOOM = 6;
+const DEFAULT_SNAP_RADIUS_DEGREES = 0.25;
 
-function pickCenter(drivers: Driver[]): [number, number] {
-  if (drivers.length === 0) return DEFAULT_CENTER;
-  const lat =
-    drivers.reduce((s, d) => s + d.location.lat, 0) / drivers.length;
-  const lng =
-    drivers.reduce((s, d) => s + d.location.lng, 0) / drivers.length;
-  return [lat, lng];
+function pickCenter(
+  drivers: Driver[],
+  waypoints?: OptimizerWaypoint[],
+): [number, number] {
+  if (drivers.length > 0) {
+    const lat =
+      drivers.reduce((s, d) => s + d.location.lat, 0) / drivers.length;
+    const lng =
+      drivers.reduce((s, d) => s + d.location.lng, 0) / drivers.length;
+    return [lat, lng];
+  }
+  if (waypoints && waypoints.length > 0) {
+    const lat =
+      waypoints.reduce((s, w) => s + w.coordinate.latitude, 0) /
+      waypoints.length;
+    const lng =
+      waypoints.reduce((s, w) => s + w.coordinate.longitude, 0) /
+      waypoints.length;
+    return [lat, lng];
+  }
+  return DEFAULT_CENTER;
 }
 
 function radiusFor(count: number): number {
@@ -36,6 +62,32 @@ function radiusFor(count: number): number {
   return 24;
 }
 
+/**
+ * Finds the nearest valid waypoint drop zone index within `snapRadiusDegrees`
+ * of the given geographic coordinate.
+ */
+export function findNearestSnapIndex(
+  lat: number,
+  lng: number,
+  route: OptimizerWaypoint[],
+  snapRadiusDegrees: number = DEFAULT_SNAP_RADIUS_DEGREES,
+): number | null {
+  let bestIndex: number | null = null;
+  let bestDistance = Infinity;
+
+  route.forEach((wp, index) => {
+    const dLat = wp.coordinate.latitude - lat;
+    const dLng = wp.coordinate.longitude - lng;
+    const dist = Math.hypot(dLat, dLng);
+    if (dist <= snapRadiusDegrees && dist < bestDistance) {
+      bestDistance = dist;
+      bestIndex = index;
+    }
+  });
+
+  return bestIndex;
+}
+
 /**
  * Renders one marker per cluster and re-buckets whenever the map zoom changes.
  *
@@ -43,7 +95,7 @@ function radiusFor(count: number): number {
  * context. Zooming out widens the clustering grid, so nearby drivers merge into
  * a single marker instead of overlapping pins.
  */
-function DriverClusterLayer({ drivers }: FleetMapClientProps) {
+function DriverClusterLayer({ drivers }: { drivers: Driver[] }) {
   const [zoomFromEvent, setZoomFromEvent] = useState<number | null>(null);
 
   const map = useMapEvents({
@@ -91,8 +143,260 @@ function DriverClusterLayer({ drivers }: FleetMapClientProps) {
   );
 }
 
-export default function FleetMapClient({ drivers }: FleetMapClientProps) {
-  const center = useMemo(() => pickCenter(drivers), [drivers]);
+interface WaypointDragDropLayerProps {
+  waypoints: OptimizerWaypoint[];
+  snapRadiusDegrees: number;
+  onWaypointReorder?: (
+    _reorderedWaypoints: OptimizerWaypoint[],
+    _result: RouteOptimizationResult,
+  ) => void;
+}
+
+/**
+ * Interactive waypoint drag-and-drop layer supporting:
+ * - Dragging markers to reorder their position in the route array
+ * - Dashed drop zone preview while dragging
+ * - Real-time connection lines between reordered waypoints
+ * - Smooth marker snapping to valid drop positions
+ */
+function WaypointDragDropLayer({
+  waypoints,
+  snapRadiusDegrees,
+  onWaypointReorder,
+}: WaypointDragDropLayerProps) {
+  const { optimizedRoute, reorder, result } = useRouteOptimization(waypoints);
+
+  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
+  const [targetDropIndex, setTargetDropIndex] = useState<number | null>(null);
+  const [snappedWaypointId, setSnappedWaypointId] = useState<string | null>(
+    null,
+  );
+
+  // Compute real-time preview order while a marker is being dragged over a valid drop zone
+  const previewRoute = useMemo(() => {
+    if (
+      draggingIndex === null ||
+      targetDropIndex === null ||
+      draggingIndex === targetDropIndex ||
+      draggingIndex < 0 ||
+      draggingIndex >= optimizedRoute.length ||
+      targetDropIndex < 0 ||
+      targetDropIndex >= optimizedRoute.length
+    ) {
+      return optimizedRoute;
+    }
+
+    const next = [...optimizedRoute];
+    const [dragged] = next.splice(draggingIndex, 1);
+    next.splice(targetDropIndex, 0, dragged);
+    return next;
+  }, [optimizedRoute, draggingIndex, targetDropIndex]);
+
+  const connectionCoordinates = useMemo(
+    () =>
+      previewRoute.map(
+        (wp) =>
+          `${wp.coordinate.latitude.toFixed(4)},${wp.coordinate.longitude.toFixed(4)}`,
+      ),
+    [previewRoute],
+  );
+
+  const handleDragStart = useCallback((index: number) => {
+    setDraggingIndex(index);
+    setTargetDropIndex(index);
+    setSnappedWaypointId(null);
+  }, []);
+
+  const handleDragOverZone = useCallback(
+    (index: number, event?: React.DragEvent) => {
+      event?.preventDefault();
+      if (draggingIndex === null) return;
+      if (index >= 0 && index < optimizedRoute.length) {
+        setTargetDropIndex(index);
+      }
+    },
+    [draggingIndex, optimizedRoute.length],
+  );
+
+  const commitDrop = useCallback(
+    (dropIndex: number | null) => {
+      if (
+        draggingIndex !== null &&
+        dropIndex !== null &&
+        dropIndex >= 0 &&
+        dropIndex < optimizedRoute.length &&
+        draggingIndex !== dropIndex
+      ) {
+        const movedWaypoint = optimizedRoute[draggingIndex];
+        const nextOrder = [...optimizedRoute];
+        const [removed] = nextOrder.splice(draggingIndex, 1);
+        nextOrder.splice(dropIndex, 0, removed);
+
+        reorder(draggingIndex, dropIndex);
+        setSnappedWaypointId(movedWaypoint.id);
+
+        if (onWaypointReorder) {
+          onWaypointReorder(nextOrder, {
+            ...result,
+            optimizedWaypoints: nextOrder,
+            polyline: nextOrder.map((wp) => [
+              wp.coordinate.latitude,
+              wp.coordinate.longitude,
+            ]),
+          });
+        }
+      }
+
+      setDraggingIndex(null);
+      setTargetDropIndex(null);
+    },
+    [draggingIndex, optimizedRoute, reorder, onWaypointReorder, result],
+  );
+
+  const handleDropOnCoordinate = useCallback(
+    (lat: number, lng: number) => {
+      const snappedIdx = findNearestSnapIndex(
+        lat,
+        lng,
+        optimizedRoute,
+        snapRadiusDegrees,
+      );
+      commitDrop(snappedIdx ?? targetDropIndex);
+    },
+    [optimizedRoute, snapRadiusDegrees, commitDrop, targetDropIndex],
+  );
+
+  const handleDragCancel = useCallback(() => {
+    setDraggingIndex(null);
+    setTargetDropIndex(null);
+  }, []);
+
+  if (optimizedRoute.length === 0) {
+    return null;
+  }
+
+  const isDragging = draggingIndex !== null;
+
+  return (
+    <div
+      data-testid="waypoint-dragdrop-layer"
+      data-dragging={isDragging ? 'true' : 'false'}
+      className="pointer-events-auto relative z-10"
+    >
+      {/* Real-time connection lines between waypoints */}
+      {previewRoute.length > 1 && (
+        <div
+          data-testid="waypoint-connection-line"
+          data-positions={connectionCoordinates.join(';')}
+          data-waypoint-order={previewRoute.map((w) => w.id).join(',')}
+          aria-label="Route connection line"
+          className="pointer-events-none"
+        />
+      )}
+
+      {/* Dashed drop zone preview shown while dragging */}
+      {isDragging && (
+        <div
+          data-testid="dashed-drop-preview"
+          data-active-index={String(targetDropIndex ?? draggingIndex)}
+          className="rounded-lg border-2 border-dashed border-sky-500 bg-sky-500/10 p-2 transition-all duration-150 ease-out"
+        >
+          <span className="text-xs font-medium text-sky-700">
+            Drop preview: position {(targetDropIndex ?? draggingIndex) + 1}
+          </span>
+        </div>
+      )}
+
+      {/* Drop zones and draggable waypoint markers */}
+      <div
+        role="list"
+        aria-label="Route waypoints"
+        className="flex flex-wrap gap-2 p-2"
+      >
+        {optimizedRoute.map((waypoint, index) => {
+          const isBeingDragged = draggingIndex === index;
+          const isValidDrop = isDragging && draggingIndex !== index;
+          const isHighlighted =
+            isDragging &&
+            targetDropIndex === index &&
+            draggingIndex !== index;
+          const isSnapped = snappedWaypointId === waypoint.id;
+
+          return (
+            <div
+              key={waypoint.id}
+              role="listitem"
+              data-testid="waypoint-drop-zone"
+              data-drop-index={String(index)}
+              data-valid-drop={isValidDrop ? 'true' : 'false'}
+              data-highlighted={isHighlighted ? 'true' : 'false'}
+              onDragOver={(e) => handleDragOverZone(index, e)}
+              onDragEnter={() => handleDragOverZone(index)}
+              onDrop={(e) => {
+                e.preventDefault();
+                commitDrop(index);
+              }}
+              className={`rounded-md p-1 transition-all duration-200 ease-out ${
+                isDragging ? 'border-2 border-dashed' : 'border border-solid'
+              } ${
+                isHighlighted
+                  ? 'scale-105 border-emerald-500 bg-emerald-500/20 ring-2 ring-emerald-400'
+                  : isValidDrop
+                    ? 'border-sky-400 bg-sky-500/10'
+                    : 'border-slate-200 bg-white'
+              }`}
+            >
+              <div
+                draggable
+                data-testid="waypoint-marker"
+                data-waypoint-id={waypoint.id}
+                data-waypoint-index={String(index)}
+                data-position={`${waypoint.coordinate.latitude},${waypoint.coordinate.longitude}`}
+                data-snapped={isSnapped ? 'true' : 'false'}
+                aria-label={`Waypoint ${index + 1}: ${waypoint.label}`}
+                onDragStart={() => handleDragStart(index)}
+                onDragEnd={handleDragCancel}
+                onMouseUp={(e) => {
+                  const latAttr = e.currentTarget.getAttribute('data-drop-lat');
+                  const lngAttr = e.currentTarget.getAttribute('data-drop-lng');
+                  if (latAttr !== null && lngAttr !== null) {
+                    handleDropOnCoordinate(Number(latAttr), Number(lngAttr));
+                  }
+                }}
+                className={`flex cursor-grab items-center gap-1.5 rounded px-2 py-1 text-xs font-semibold transition-transform duration-200 ease-out active:cursor-grabbing ${
+                  isBeingDragged
+                    ? 'scale-95 opacity-60'
+                    : isSnapped
+                      ? 'scale-100 bg-emerald-50 text-emerald-900'
+                      : 'bg-slate-50 text-slate-800'
+                }`}
+              >
+                <span
+                  data-testid={`waypoint-order-badge-${waypoint.id}`}
+                  className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-sky-600 text-[11px] font-bold text-white"
+                >
+                  {index + 1}
+                </span>
+                <span>{waypoint.label}</span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default function FleetMapClient({
+  drivers,
+  waypoints,
+  onWaypointReorder,
+  snapRadiusDegrees = DEFAULT_SNAP_RADIUS_DEGREES,
+}: FleetMapClientProps) {
+  const center = useMemo(
+    () => pickCenter(drivers, waypoints),
+    [drivers, waypoints],
+  );
 
   // Ensure Leaflet picks up the CSS-loaded marker icons in environments
   // (Next.js bundles) where the default detection misfires. Without this
@@ -115,6 +419,13 @@ export default function FleetMapClient({ drivers }: FleetMapClientProps) {
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
       <DriverClusterLayer drivers={drivers} />
+      {waypoints && waypoints.length > 0 && (
+        <WaypointDragDropLayer
+          waypoints={waypoints}
+          snapRadiusDegrees={snapRadiusDegrees}
+          onWaypointReorder={onWaypointReorder}
+        />
+      )}
     </MapContainer>
   );
 }
diff --git a/components/fleet/__tests__/FleetMapClient.test.tsx b/components/fleet/__tests__/FleetMapClient.test.tsx
index fd0d12bf..986793da 100644
--- a/components/fleet/__tests__/FleetMapClient.test.tsx
+++ b/components/fleet/__tests__/FleetMapClient.test.tsx
@@ -342,3 +342,118 @@ describe('FleetMapClient', () => {
     });
   });
 });
+
+describe('FleetMapClient waypoint drag-and-drop reordering (Issue #832)', () => {
+  const routeWaypoints = [
+    {
+      id: 'wp-1',
+      coordinate: { latitude: 6.5244, longitude: 3.3792 },
+      label: 'Apapa Port',
+    },
+    {
+      id: 'wp-2',
+      coordinate: { latitude: 6.6018, longitude: 3.3515 },
+      label: 'Ikeja Hub',
+    },
+    {
+      id: 'wp-3',
+      coordinate: { latitude: 6.4281, longitude: 3.4219 },
+      label: 'Victoria Island',
+    },
+  ];
+
+  it('displays connection lines between waypoints and shows dashed drop zone preview while dragging', () => {
+    const { fireEvent } = require('@testing-library/react');
+    render(
+      <FleetMapClient drivers={[LAGOS_A]} waypoints={routeWaypoints} />,
+    );
+
+    const connectionLine = screen.getByTestId('waypoint-connection-line');
+    expect(connectionLine).toBeInTheDocument();
+    expect(connectionLine).toHaveAttribute(
+      'data-waypoint-order',
+      'wp-1,wp-2,wp-3',
+    );
+
+    const waypointMarkers = screen.getAllByTestId('waypoint-marker');
+    expect(waypointMarkers).toHaveLength(3);
+
+    // Start dragging the first marker
+    fireEvent.dragStart(waypointMarkers[0]);
+
+    // Dashed drop preview appears
+    const preview = screen.getByTestId('dashed-drop-preview');
+    expect(preview).toBeInTheDocument();
+    expect(preview).toHaveClass('border-dashed');
+
+    // Drop zones highlight valid positions (positions 1 and 2 are valid drop targets for marker 0)
+    const dropZones = screen.getAllByTestId('waypoint-drop-zone');
+    expect(dropZones[0]).toHaveAttribute('data-valid-drop', 'false');
+    expect(dropZones[1]).toHaveAttribute('data-valid-drop', 'true');
+    expect(dropZones[2]).toHaveAttribute('data-valid-drop', 'true');
+  });
+
+  it('highlights the hovered drop zone and updates connection lines in real-time during drag', () => {
+    const { fireEvent } = require('@testing-library/react');
+    render(
+      <FleetMapClient drivers={[LAGOS_A]} waypoints={routeWaypoints} />,
+    );
+
+    const waypointMarkers = screen.getAllByTestId('waypoint-marker');
+    const dropZones = screen.getAllByTestId('waypoint-drop-zone');
+
+    fireEvent.dragStart(waypointMarkers[0]);
+    fireEvent.dragOver(dropZones[2]);
+
+    // Drop zone 2 is highlighted
+    expect(dropZones[2]).toHaveAttribute('data-highlighted', 'true');
+
+    // Connection line updates in real-time to reflect the preview order (wp-2, wp-3, wp-1)
+    const connectionLine = screen.getByTestId('waypoint-connection-line');
+    expect(connectionLine).toHaveAttribute(
+      'data-waypoint-order',
+      'wp-2,wp-3,wp-1',
+    );
+    expect(connectionLine).toHaveAttribute(
+      'data-positions',
+      '6.6018,3.3515;6.4281,3.4219;6.5244,3.3792',
+    );
+  });
+
+  it('snaps marker smoothly to valid drop position and updates route visualization after reorder', () => {
+    const { fireEvent } = require('@testing-library/react');
+    const onWaypointReorder = jest.fn();
+
+    render(
+      <FleetMapClient
+        drivers={[LAGOS_A]}
+        waypoints={routeWaypoints}
+        onWaypointReorder={onWaypointReorder}
+      />,
+    );
+
+    const waypointMarkers = screen.getAllByTestId('waypoint-marker');
+    const dropZones = screen.getAllByTestId('waypoint-drop-zone');
+
+    fireEvent.dragStart(waypointMarkers[0]);
+    fireEvent.dragOver(dropZones[2]);
+    fireEvent.drop(dropZones[2]);
+
+    // Dashed preview disappears after drop
+    expect(screen.queryByTestId('dashed-drop-preview')).not.toBeInTheDocument();
+
+    // Callback received reordered array and route optimization result
+    expect(onWaypointReorder).toHaveBeenCalledTimes(1);
+    const [reordered] = onWaypointReorder.mock.calls[0];
+    expect(reordered.map((w: { id: string }) => w.id)).toEqual([
+      'wp-2',
+      'wp-3',
+      'wp-1',
+    ]);
+
+    // Updated markers and snapped state
+    const updatedMarkers = screen.getAllByTestId('waypoint-marker');
+    expect(updatedMarkers[2]).toHaveAttribute('data-waypoint-id', 'wp-1');
+    expect(updatedMarkers[2]).toHaveAttribute('data-snapped', 'true');
+  });
+});
diff --git a/components/shipments/TrackingMap.tsx b/components/shipments/TrackingMap.tsx
index 78e10b2c..b1379914 100644
--- a/components/shipments/TrackingMap.tsx
+++ b/components/shipments/TrackingMap.tsx
@@ -1,15 +1,22 @@
 /**
  * TrackingMap Component
- * Interactive map for visualizing delivery routes with markers and polylines
+ * Interactive map for visualizing delivery routes with markers, polylines,
+ * and estimated delivery time / date (ETA) calculations.
  */
 
 'use client';
 
+import React, { useMemo } from 'react';
 import React, { useMemo, useEffect } from 'react';
 import { MapContainer, TileLayer, Marker, Popup, Polyline, useMap } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import { useTrackingRoute } from '@/hooks/useTrackingRoute';
+import { calculateDistanceKm } from '@/services/geofenceService';
+import { Coordinate, MapBounds, RouteData } from '@/types/tracking';
+import { AlertCircle, Loader2, Package } from 'lucide-react';
+
+const DEFAULT_AVERAGE_SPEED_KMH = 40;
 import { MapBounds } from '@/types/tracking';
 import { AlertCircle, Loader2, Package } from 'lucide-react';
 
@@ -21,6 +28,75 @@ interface TrackingMapProps {
   onMapError?: (_error: string) => void;
 }
 
+/**
+ * Calculates remaining ETA in minutes for a delivery route based on physical
+ * progress between origin, currentLocation, and destination, or falls back to
+ * `routeData.estimatedTime` / distance-based calculation.
+ */
+export function calculateRemainingEtaMinutes(
+  routeData: RouteData,
+  currentLocation?: Coordinate | null,
+): number | null {
+  if (routeData.status === 'delivered') {
+    return 0;
+  }
+
+  const baseEta =
+    typeof routeData.estimatedTime === 'number'
+      ? routeData.estimatedTime
+      : typeof routeData.distance === 'number'
+        ? Math.round((routeData.distance / DEFAULT_AVERAGE_SPEED_KMH) * 60)
+        : null;
+
+  if (
+    currentLocation &&
+    routeData.status === 'in_transit' &&
+    routeData.origin &&
+    routeData.destination
+  ) {
+    const totalDirectKm = calculateDistanceKm(
+      routeData.origin,
+      routeData.destination,
+    );
+    const remainingDirectKm = calculateDistanceKm(
+      currentLocation,
+      routeData.destination,
+    );
+
+    if (totalDirectKm > 0 && baseEta !== null) {
+      const ratio = Math.min(1, Math.max(0, remainingDirectKm / totalDirectKm));
+      return Math.max(1, Math.round(baseEta * ratio));
+    }
+
+    if (remainingDirectKm >= 0) {
+      return Math.max(
+        0,
+        Math.round((remainingDirectKm / DEFAULT_AVERAGE_SPEED_KMH) * 60),
+      );
+    }
+  }
+
+  return baseEta;
+}
+
+/**
+ * Computes the ISO 8601 estimated delivery timestamp from a route timestamp
+ * and ETA in minutes.
+ */
+export function calculateEstimatedDeliveryDate(
+  timestamp: string | undefined,
+  etaMinutes: number | null | undefined,
+): string | null {
+  if (!timestamp || typeof etaMinutes !== 'number' || !Number.isFinite(etaMinutes)) {
+    return null;
+  }
+  const baseMs = Date.parse(timestamp);
+  if (Number.isNaN(baseMs)) {
+    return null;
+  }
+  return new Date(baseMs + etaMinutes * 60 * 1000).toISOString();
+}
+
 /**
  * Custom hook to fit bounds on map
  */
@@ -59,6 +135,9 @@ export function TrackingMap({
 
     const { origin, destination, waypoints } = routeData;
     const coords = [origin, destination, ...waypoints.map((w) => w.coordinate)];
+    if (currentLocation && routeData.status === 'in_transit') {
+      coords.push(currentLocation);
+    }
 
     const lats = coords.map((c) => c.latitude);
     const lngs = coords.map((c) => c.longitude);
@@ -69,7 +148,7 @@ export function TrackingMap({
       east: Math.max(...lngs),
       west: Math.min(...lngs),
     };
-  }, [routeData]);
+  }, [routeData, currentLocation]);
 
   // Create polyline coordinates
   const polylineCoordinates: [number, number][] = useMemo(() => {
@@ -78,6 +157,17 @@ export function TrackingMap({
     return routeData.waypoints.map((w) => [w.coordinate.latitude, w.coordinate.longitude]);
   }, [routeData]);
 
+  const dynamicEtaMinutes = useMemo(() => {
+    if (!routeData) return null;
+    return calculateRemainingEtaMinutes(routeData, currentLocation);
+  }, [routeData, currentLocation]);
+
+  const estimatedDeliveryIso = useMemo(() => {
+    if (!routeData) return null;
+    const etaForDate = routeData.estimatedTime ?? dynamicEtaMinutes;
+    return calculateEstimatedDeliveryDate(routeData.timestamp, etaForDate);
+  }, [routeData, dynamicEtaMinutes]);
+
   // Create custom marker icons
   const originMarkerIcon = useMemo(
     () =>
@@ -133,7 +223,10 @@ export function TrackingMap({
         style={{ height }}
       >
         <div className="flex flex-col items-center gap-2">
-          <Loader2 className="w-8 h-8 animate-spin text-blue-600 dark:text-blue-400" />
+          <Loader2
+            data-testid="spinner"
+            className="w-8 h-8 animate-spin text-blue-600 dark:text-blue-400"
+          />
           <p className="text-sm text-gray-600 dark:text-gray-300">Loading map...</p>
         </div>
       </div>
@@ -148,7 +241,10 @@ export function TrackingMap({
         style={{ height }}
       >
         <div className="flex flex-col items-center gap-2 p-4">
-          <AlertCircle className="w-8 h-8 text-red-600 dark:text-red-400" />
+          <AlertCircle
+            data-testid="alert-icon"
+            className="w-8 h-8 text-red-600 dark:text-red-400"
+          />
           <p className="text-sm text-red-800 dark:text-red-200 text-center">{error}</p>
         </div>
       </div>
@@ -163,13 +259,18 @@ export function TrackingMap({
         style={{ height }}
       >
         <div className="flex flex-col items-center gap-2 p-4">
-          <Package className="w-8 h-8 text-gray-400 dark:text-gray-500" />
+          <Package
+            data-testid="package-icon"
+            className="w-8 h-8 text-gray-400 dark:text-gray-500"
+          />
           <p className="text-sm text-gray-600 dark:text-gray-400">No delivery data available</p>
         </div>
       </div>
     );
   }
 
+  const displayedEstimatedTime = routeData.estimatedTime ?? dynamicEtaMinutes;
+
   return (
     <div className={`rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 ${className}`}>
       <MapContainer
@@ -197,7 +298,7 @@ export function TrackingMap({
             <div className="text-sm">
               <p className="font-semibold text-green-700">Origin</p>
               {routeData.origin && (
-                <p className="text-gray-600">
+                <p data-testid="origin-coordinates" className="text-gray-600">
                   {routeData.origin.latitude.toFixed(4)}, {routeData.origin.longitude.toFixed(4)}
                 </p>
               )}
@@ -214,7 +315,7 @@ export function TrackingMap({
             <div className="text-sm">
               <p className="font-semibold text-blue-700">Destination</p>
               {routeData.destination && (
-                <p className="text-gray-600">
+                <p data-testid="destination-coordinates" className="text-gray-600">
                   {routeData.destination.latitude.toFixed(4)},
                   {routeData.destination.longitude.toFixed(4)}
                 </p>
@@ -232,7 +333,7 @@ export function TrackingMap({
             <Popup>
               <div className="text-sm">
                 <p className="font-semibold text-orange-700">Current Location</p>
-                <p className="text-gray-600">
+                <p data-testid="current-location-coordinates" className="text-gray-600">
                   {currentLocation.latitude.toFixed(4)}, {currentLocation.longitude.toFixed(4)}
                 </p>
               </div>
@@ -286,20 +387,42 @@ export function TrackingMap({
               {routeData.status}
             </p>
           </div>
-          {routeData.distance && (
+          {routeData.distance !== undefined && (
             <div>
               <p className="text-gray-600 dark:text-gray-400">Distance</p>
-              <p className="font-semibold text-gray-900 dark:text-gray-100">
+              <p
+                data-testid="distance-value"
+                className="font-semibold text-gray-900 dark:text-gray-100"
+              >
                 {routeData.distance.toFixed(1)} km
               </p>
             </div>
           )}
-          {routeData.estimatedTime && (
+          {displayedEstimatedTime !== null && displayedEstimatedTime !== undefined && (
             <div>
               <p className="text-gray-600 dark:text-gray-400">Est. Time</p>
-              <p className="font-semibold text-gray-900 dark:text-gray-100">
-                {routeData.estimatedTime} min
+              <p
+                data-testid="estimated-time-value"
+                className="font-semibold text-gray-900 dark:text-gray-100"
+              >
+                {displayedEstimatedTime} min
               </p>
+              {dynamicEtaMinutes !== null && (
+                <span
+                  data-testid="dynamic-remaining-eta"
+                  className="sr-only"
+                >
+                  {dynamicEtaMinutes} min remaining
+                </span>
+              )}
+              {estimatedDeliveryIso && (
+                <span
+                  data-testid="estimated-delivery-date"
+                  className="sr-only"
+                >
+                  {estimatedDeliveryIso}
+                </span>
+              )}
             </div>
           )}
         </div>
diff --git a/context/ToastProvider.tsx b/context/ToastProvider.tsx
new file mode 100644
index 00000000..da11e070
--- /dev/null
+++ b/context/ToastProvider.tsx
@@ -0,0 +1,413 @@
+'use client';
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { AlertCircle, CheckCircle, Info, Loader, X } from 'lucide-react';
+import {
+  toastService,
+  type ToastConfig,
+  type ToastMessage,
+  type ToastVariant,
+} from '@/lib/toast';
+
+export interface QueuedToast {
+  id: string;
+  variant: ToastVariant;
+  message: string;
+  description?: string;
+  duration: number;
+  createdAt: number;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+export interface ToastContextValue {
+  visibleToasts: QueuedToast[];
+  queuedToasts: QueuedToast[];
+  maxVisible: number;
+  defaultDuration: number;
+  isLoading: boolean;
+  backendMessages: ToastMessage[];
+  success: (
+    _message: string,
+    _description?: string,
+    _duration?: number,
+  ) => string;
+  error: (
+    _message: string,
+    _description?: string,
+    _duration?: number,
+  ) => string;
+  info: (
+    _message: string,
+    _description?: string,
+    _duration?: number,
+  ) => string;
+  addToast: (_config: ToastConfig & { id?: string }) => string;
+  dismissToast: (_id: string) => void;
+  clearAll: () => void;
+  syncFromBackend: () => Promise<ToastMessage[]>;
+}
+
+export interface ToastQueueProviderProps {
+  children: ReactNode;
+  maxVisible?: number;
+  defaultDuration?: number;
+  autoSyncBackend?: boolean;
+}
+
+const DEFAULT_MAX_VISIBLE = 3;
+const DEFAULT_TOAST_DURATION = 4000;
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+let toastSequence = 0;
+
+function createToastId(): string {
+  toastSequence += 1;
+  return `toast-${Date.now()}-${toastSequence}`;
+}
+
+function getVariantStyles(variant: ToastVariant): {
+  container: string;
+  icon: React.ReactElement;
+} {
+  switch (variant) {
+    case 'success':
+      return {
+        container:
+          'border-emerald-200 bg-white text-slate-900 dark:border-emerald-800 dark:bg-slate-900 dark:text-slate-100',
+        icon: (
+          <CheckCircle
+            className="h-5 w-5 flex-shrink-0 text-emerald-600 dark:text-emerald-400"
+            aria-hidden="true"
+          />
+        ),
+      };
+    case 'error':
+      return {
+        container:
+          'border-red-200 bg-white text-slate-900 dark:border-red-800 dark:bg-slate-900 dark:text-slate-100',
+        icon: (
+          <AlertCircle
+            className="h-5 w-5 flex-shrink-0 text-red-600 dark:text-red-400"
+            aria-hidden="true"
+          />
+        ),
+      };
+    case 'loading':
+      return {
+        container:
+          'border-slate-200 bg-white text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100',
+        icon: (
+          <Loader
+            className="h-5 w-5 flex-shrink-0 animate-spin text-sky-600 dark:text-sky-400"
+            aria-hidden="true"
+          />
+        ),
+      };
+    case 'info':
+    default:
+      return {
+        container:
+          'border-sky-200 bg-white text-slate-900 dark:border-sky-800 dark:bg-slate-900 dark:text-slate-100',
+        icon: (
+          <Info
+            className="h-5 w-5 flex-shrink-0 text-sky-600 dark:text-sky-400"
+            aria-hidden="true"
+          />
+        ),
+      };
+  }
+}
+
+export function ToastProvider({
+  children,
+  maxVisible = DEFAULT_MAX_VISIBLE,
+  defaultDuration = DEFAULT_TOAST_DURATION,
+  autoSyncBackend = false,
+}: ToastQueueProviderProps): React.ReactElement {
+  const [allToasts, setAllToasts] = useState<QueuedToast[]>([]);
+  const [backendDuration, setBackendDuration] = useState<number | null>(null);
+  const [backendMessages, setBackendMessages] = useState<ToastMessage[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const timersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(
+    new Map(),
+  );
+
+  const configuredDuration = backendDuration ?? defaultDuration;
+  const effectiveMaxVisible = Math.max(1, maxVisible);
+
+  const visibleToasts = useMemo(
+    () => allToasts.slice(0, effectiveMaxVisible),
+    [allToasts, effectiveMaxVisible],
+  );
+
+  const queuedToasts = useMemo(
+    () => allToasts.slice(effectiveMaxVisible),
+    [allToasts, effectiveMaxVisible],
+  );
+
+  const dismissToast = useCallback((id: string) => {
+    const activeTimer = timersRef.current.get(id);
+    if (activeTimer) {
+      clearTimeout(activeTimer);
+      timersRef.current.delete(id);
+    }
+    setAllToasts((prev) => prev.filter((item) => item.id !== id));
+  }, []);
+
+  const clearAll = useCallback(() => {
+    timersRef.current.forEach((timer) => clearTimeout(timer));
+    timersRef.current.clear();
+    setAllToasts([]);
+  }, []);
+
+  const addToast = useCallback(
+    (config: ToastConfig & { id?: string }): string => {
+      const id = config.id ?? createToastId();
+      const resolvedDuration =
+        config.variant === 'loading'
+          ? (config.duration ?? 0)
+          : (config.duration ?? configuredDuration);
+
+      const nextToast: QueuedToast = {
+        id,
+        variant: config.variant,
+        message: config.message,
+        description: config.description,
+        duration: resolvedDuration,
+        createdAt: Date.now(),
+        action: config.action,
+      };
+
+      setAllToasts((prev) => [...prev, nextToast]);
+      toastService.setLastNotificationId(id);
+      return id;
+    },
+    [configuredDuration],
+  );
+
+  const success = useCallback(
+    (message: string, description?: string, duration?: number): string =>
+      addToast({ variant: 'success', message, description, duration }),
+    [addToast],
+  );
+
+  const error = useCallback(
+    (message: string, description?: string, duration?: number): string =>
+      addToast({ variant: 'error', message, description, duration }),
+    [addToast],
+  );
+
+  const info = useCallback(
+    (message: string, description?: string, duration?: number): string =>
+      addToast({ variant: 'info', message, description, duration }),
+    [addToast],
+  );
+
+  const syncFromBackend = useCallback(async (): Promise<ToastMessage[]> => {
+    setIsLoading(true);
+    try {
+      const [configRes, messagesRes] = await Promise.all([
+        toastService.getToastConfig(),
+        toastService.fetchToastMessages(),
+      ]);
+
+      if (configRes.success && configRes.data?.duration) {
+        setBackendDuration(configRes.data.duration);
+      }
+
+      const items =
+        messagesRes.success && messagesRes.data ? messagesRes.data : [];
+      setBackendMessages(items);
+
+      items.forEach((item) => {
+        addToast({
+          id: item.id,
+          variant: item.variant,
+          message: item.title,
+          description: item.message,
+          duration: item.duration,
+        });
+      });
+
+      return items;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [addToast]);
+
+  useEffect(() => {
+    const unsubscribe = toastService.subscribe((config: ToastConfig) => {
+      addToast(config);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [addToast]);
+
+  useEffect(() => {
+    if (!autoSyncBackend) return undefined;
+    const syncTimer = window.setTimeout(() => {
+      void syncFromBackend();
+    }, 0);
+    return () => window.clearTimeout(syncTimer);
+  }, [autoSyncBackend, syncFromBackend]);
+
+  useEffect(() => {
+    const visibleIds = new Set(visibleToasts.map((t) => t.id));
+
+    timersRef.current.forEach((timer, id) => {
+      if (!visibleIds.has(id)) {
+        clearTimeout(timer);
+        timersRef.current.delete(id);
+      }
+    });
+
+    visibleToasts.forEach((toastItem) => {
+      if (toastItem.duration > 0 && !timersRef.current.has(toastItem.id)) {
+        const timer = setTimeout(() => {
+          timersRef.current.delete(toastItem.id);
+          dismissToast(toastItem.id);
+        }, toastItem.duration);
+        timersRef.current.set(toastItem.id, timer);
+      }
+    });
+  }, [visibleToasts, dismissToast]);
+
+  useEffect(() => {
+    const timers = timersRef.current;
+    return () => {
+      timers.forEach((timer) => clearTimeout(timer));
+      timers.clear();
+    };
+  }, []);
+
+  const contextValue = useMemo<ToastContextValue>(
+    () => ({
+      visibleToasts,
+      queuedToasts,
+      maxVisible: effectiveMaxVisible,
+      defaultDuration: configuredDuration,
+      isLoading,
+      backendMessages,
+      success,
+      error,
+      info,
+      addToast,
+      dismissToast,
+      clearAll,
+      syncFromBackend,
+    }),
+    [
+      visibleToasts,
+      queuedToasts,
+      effectiveMaxVisible,
+      configuredDuration,
+      isLoading,
+      backendMessages,
+      success,
+      error,
+      info,
+      addToast,
+      dismissToast,
+      clearAll,
+      syncFromBackend,
+    ],
+  );
+
+  return (
+    <ToastContext.Provider value={contextValue}>
+      {children}
+      <div
+        role="region"
+        aria-label="Notifications"
+        aria-live="polite"
+        data-testid="toast-queue-viewport"
+        className="pointer-events-none fixed bottom-4 right-4 z-50 flex w-full max-w-sm flex-col gap-2"
+      >
+        <AnimatePresence mode="popLayout" initial={false}>
+          {visibleToasts.map((toastItem) => {
+            const { container, icon } = getVariantStyles(toastItem.variant);
+            return (
+              <motion.div
+                key={toastItem.id}
+                layout
+                initial={{ opacity: 0, y: 16, scale: 0.96 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{ opacity: 0, y: -12, scale: 0.95 }}
+                transition={{ duration: 0.2, ease: 'easeOut' }}
+                role="alert"
+                data-testid="toast-item"
+                data-toast-id={toastItem.id}
+                data-toast-variant={toastItem.variant}
+                className={`pointer-events-auto flex items-start gap-3 rounded-lg border p-4 shadow-lg ${container}`}
+              >
+                {icon}
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-semibold">{toastItem.message}</p>
+                  {toastItem.description && (
+                    <p className="mt-1 text-xs text-slate-600 dark:text-slate-300">
+                      {toastItem.description}
+                    </p>
+                  )}
+                  {toastItem.action && (
+                    <button
+                      type="button"
+                      onClick={toastItem.action.onClick}
+                      className="mt-2 inline-flex items-center rounded bg-sky-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-sky-700"
+                    >
+                      {toastItem.action.label}
+                    </button>
+                  )}
+                </div>
+                <button
+                  type="button"
+                  aria-label={`Dismiss ${toastItem.message}`}
+                  onClick={() => dismissToast(toastItem.id)}
+                  className="rounded p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-slate-800"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </motion.div>
+            );
+          })}
+        </AnimatePresence>
+
+        {queuedToasts.length > 0 && (
+          <div
+            data-testid="toast-queue-indicator"
+            className="pointer-events-auto self-end rounded-full bg-slate-900/85 px-3 py-1 text-xs font-medium text-white shadow"
+          >
+            +{queuedToasts.length} more in queue
+          </div>
+        )}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToastContext(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error('useToastContext must be used within a ToastProvider');
+  }
+  return ctx;
+}
+
+export const useToastQueue = useToastContext;
+
+export default ToastProvider;
diff --git a/context/__tests__/ToastProvider.test.tsx b/context/__tests__/ToastProvider.test.tsx
new file mode 100644
index 00000000..1adfdc08
--- /dev/null
+++ b/context/__tests__/ToastProvider.test.tsx
@@ -0,0 +1,232 @@
+import React from 'react';
+import { render, screen, act, fireEvent, waitFor } from '@testing-library/react';
+import {
+  ToastProvider,
+  useToastContext,
+} from '@/context/ToastProvider';
+import { toastService } from '@/lib/toast';
+
+jest.mock('framer-motion', () => {
+  const ReactLib = require('react');
+  return {
+    AnimatePresence: ({ children }: { children: React.ReactNode }) =>
+      ReactLib.createElement(ReactLib.Fragment, null, children),
+    motion: {
+      div: ReactLib.forwardRef(
+        (
+          { children, layout: _layout, initial: _initial, animate: _animate, exit: _exit, transition: _transition, ...rest }: Record<string, unknown>,
+          ref: React.Ref<HTMLDivElement>,
+        ) => ReactLib.createElement('div', { ref, ...rest }, children as React.ReactNode),
+      ),
+    },
+  };
+});
+
+function ToastConsumerHarness() {
+  const {
+    visibleToasts,
+    queuedToasts,
+    success,
+    error,
+    info,
+    clearAll,
+    syncFromBackend,
+  } = useToastContext();
+
+  return (
+    <div>
+      <span data-testid="visible-count">{visibleToasts.length}</span>
+      <span data-testid="queued-count">{queuedToasts.length}</span>
+      <button
+        type="button"
+        onClick={() => success('Delivery confirmed', 'Escrow released')}
+      >
+        Trigger Success
+      </button>
+      <button
+        type="button"
+        onClick={() => error('Payment failed', 'Insufficient XLM balance')}
+      >
+        Trigger Error
+      </button>
+      <button
+        type="button"
+        onClick={() => info('Driver assigned', 'ETA updated')}
+      >
+        Trigger Info
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          for (let i = 1; i <= 5; i += 1) {
+            error(`Error #${i}`, `Failure detail ${i}`, 2000);
+          }
+        }}
+      >
+        Trigger 5 Rapid Errors
+      </button>
+      <button type="button" onClick={clearAll}>
+        Clear All
+      </button>
+      <button type="button" onClick={() => void syncFromBackend()}>
+        Sync Backend
+      </button>
+    </div>
+  );
+}
+
+describe('context/ToastProvider (Issue #429)', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.restoreAllMocks();
+  });
+
+  afterEach(() => {
+    act(() => { jest.runOnlyPendingTimers(); });
+    jest.useRealTimers();
+  });
+
+  it('dispatches Success, Error, and Info toasts via context', () => {
+    render(
+      <ToastProvider maxVisible={3} defaultDuration={4000}>
+        <ToastConsumerHarness />
+      </ToastProvider>,
+    );
+
+    fireEvent.click(screen.getByText('Trigger Success'));
+    fireEvent.click(screen.getByText('Trigger Error'));
+    fireEvent.click(screen.getByText('Trigger Info'));
+
+    const items = screen.getAllByTestId('toast-item');
+    expect(items).toHaveLength(3);
+    expect(items[0]).toHaveAttribute('data-toast-variant', 'success');
+    expect(items[1]).toHaveAttribute('data-toast-variant', 'error');
+    expect(items[2]).toHaveAttribute('data-toast-variant', 'info');
+
+    expect(screen.getByText('Delivery confirmed')).toBeInTheDocument();
+    expect(screen.getByText('Payment failed')).toBeInTheDocument();
+    expect(screen.getByText('Driver assigned')).toBeInTheDocument();
+  });
+
+  it('queues overflow toasts smoothly when 5 errors are rapidly triggered and only displays maxVisible (3) on screen', () => {
+    render(
+      <ToastProvider maxVisible={3} defaultDuration={2000}>
+        <ToastConsumerHarness />
+      </ToastProvider>,
+    );
+
+    fireEvent.click(screen.getByText('Trigger 5 Rapid Errors'));
+
+    // Only 3 should be visible on screen; 2 should remain queued
+    expect(screen.getByTestId('visible-count')).toHaveTextContent('3');
+    expect(screen.getByTestId('queued-count')).toHaveTextContent('2');
+    expect(screen.getAllByTestId('toast-item')).toHaveLength(3);
+
+    expect(screen.getByText('Error #1')).toBeInTheDocument();
+    expect(screen.getByText('Error #2')).toBeInTheDocument();
+    expect(screen.getByText('Error #3')).toBeInTheDocument();
+    expect(screen.queryByText('Error #4')).not.toBeInTheDocument();
+    expect(screen.queryByText('Error #5')).not.toBeInTheDocument();
+    expect(screen.getByTestId('toast-queue-indicator')).toHaveTextContent(
+      '+2 more in queue',
+    );
+  });
+
+  it('auto-dismisses visible toasts after timeout and promotes queued toasts in FIFO order', () => {
+    render(
+      <ToastProvider maxVisible={3} defaultDuration={2000}>
+        <ToastConsumerHarness />
+      </ToastProvider>,
+    );
+
+    fireEvent.click(screen.getByText('Trigger 5 Rapid Errors'));
+    expect(screen.getAllByTestId('toast-item')).toHaveLength(3);
+
+    // Advance 2000ms: the first 3 visible toasts auto-dismiss and #4 and #5 promote into view
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
+
+    expect(screen.queryByText('Error #1')).not.toBeInTheDocument();
+    expect(screen.queryByText('Error #2')).not.toBeInTheDocument();
+    expect(screen.queryByText('Error #3')).not.toBeInTheDocument();
+    expect(screen.getByText('Error #4')).toBeInTheDocument();
+    expect(screen.getByText('Error #5')).toBeInTheDocument();
+    expect(screen.getByTestId('visible-count')).toHaveTextContent('2');
+    expect(screen.getByTestId('queued-count')).toHaveTextContent('0');
+
+    // Advance another 2000ms: #4 and #5 auto-dismiss
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
+
+    expect(screen.queryAllByTestId('toast-item')).toHaveLength(0);
+  });
+
+  it('immediately promotes the next queued toast when a visible toast is manually dismissed', () => {
+    render(
+      <ToastProvider maxVisible={3} defaultDuration={5000}>
+        <ToastConsumerHarness />
+      </ToastProvider>,
+    );
+
+    fireEvent.click(screen.getByText('Trigger 5 Rapid Errors'));
+    expect(screen.getByText('Error #1')).toBeInTheDocument();
+    expect(screen.queryByText('Error #4')).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByLabelText('Dismiss Error #1'));
+
+    expect(screen.queryByText('Error #1')).not.toBeInTheDocument();
+    expect(screen.getByText('Error #4')).toBeInTheDocument();
+    expect(screen.getByTestId('visible-count')).toHaveTextContent('3');
+    expect(screen.getByTestId('queued-count')).toHaveTextContent('1');
+  });
+
+  it('retrieves toast messages and config from the backend API via toastService', async () => {
+    jest.spyOn(toastService, 'getToastConfig').mockResolvedValueOnce({
+      success: true,
+      message: 'OK',
+      data: { duration: 3500, position: 'bottom-right' },
+    });
+    jest.spyOn(toastService, 'fetchToastMessages').mockResolvedValueOnce({
+      success: true,
+      message: 'OK',
+      data: [
+        {
+          id: 'srv-1',
+          variant: 'error',
+          title: 'Node Sync Alert',
+          message: 'Stellar RPC latency elevated',
+          dismissible: true,
+          duration: 3500,
+        },
+      ],
+    });
+
+    render(
+      <ToastProvider maxVisible={3}>
+        <ToastConsumerHarness />
+      </ToastProvider>,
+    );
+
+    fireEvent.click(screen.getByText('Sync Backend'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Node Sync Alert')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Stellar RPC latency elevated')).toBeInTheDocument();
+  });
+
+  it('throws a descriptive error when useToastContext is used outside ToastProvider', () => {
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    function InvalidConsumer() {
+      useToastContext();
+      return null;
+    }
+
+    expect(() => render(<InvalidConsumer />)).toThrow(
+      'useToastContext must be used within a ToastProvider',
+    );
+    consoleSpy.mockRestore();
+  });
+});
diff --git a/hooks/__tests__/useRouteOptimization.test.ts b/hooks/__tests__/useRouteOptimization.test.ts
new file mode 100644
index 00000000..a573ff7b
--- /dev/null
+++ b/hooks/__tests__/useRouteOptimization.test.ts
@@ -0,0 +1,218 @@
+import React from 'react';
+import { render, act } from '@testing-library/react';
+import axios from 'axios';
+import {
+  useRouteOptimization,
+  type UseRouteOptimizationReturn,
+} from '@/hooks/useRouteOptimization';
+import {
+  clearRouteOptimizationCache,
+  getRouteOptimizationCacheSize,
+} from '@/services/routeOptimizationService';
+import type { OptimizerWaypoint } from '@/types/routeOptimizer';
+
+jest.mock('axios');
+const mockedAxios = axios as jest.Mocked<typeof axios>;
+
+function renderRouteHook(initialWaypoints: OptimizerWaypoint[]) {
+  let current!: UseRouteOptimizationReturn;
+
+  function TestHarness({ waypoints }: { waypoints: OptimizerWaypoint[] }) {
+    current = useRouteOptimization(waypoints);
+    return null;
+  }
+
+  const utils = render(React.createElement(TestHarness, { waypoints: initialWaypoints }));
+  return {
+    get result() {
+      return current;
+    },
+    rerender: (nextWaypoints: OptimizerWaypoint[]) =>
+      utils.rerender(React.createElement(TestHarness, { waypoints: nextWaypoints })),
+  };
+}
+
+describe('useRouteOptimization Hook (Issue #831)', () => {
+  const waypoints: OptimizerWaypoint[] = [
+    {
+      id: 'wp-origin',
+      coordinate: { latitude: 6.5244, longitude: 3.3792 },
+      label: 'Lagos Mainland',
+    },
+    {
+      id: 'wp-far',
+      coordinate: { latitude: 7.3775, longitude: 3.947 },
+      label: 'Ibadan Hub',
+    },
+    {
+      id: 'wp-near',
+      coordinate: { latitude: 6.535, longitude: 3.385 },
+      label: 'Yaba Depot',
+    },
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    clearRouteOptimizationCache();
+  });
+
+  it('returns RouteOptimizationResult with polyline, optimized waypoint order, distance, and duration', () => {
+    const hook = renderRouteHook(waypoints);
+
+    expect(hook.result.result).toBeDefined();
+    expect(hook.result.optimizedRoute.map((w) => w.id)).toEqual([
+      'wp-origin',
+      'wp-near',
+      'wp-far',
+    ]);
+    expect(hook.result.result.polyline).toEqual([
+      [6.5244, 3.3792],
+      [6.535, 3.385],
+      [7.3775, 3.947],
+    ]);
+    expect(hook.result.polyline).toHaveLength(3);
+    expect(hook.result.distance).toBeGreaterThan(100);
+    expect(hook.result.duration).toBeCloseTo(
+      (hook.result.distance / 40) * 60,
+      5,
+    );
+  });
+
+  it('allows waypoints to be reordered via function call and updates polyline, distance, and duration', () => {
+    const hook = renderRouteHook(waypoints);
+
+    const initialPolyline = hook.result.polyline;
+    expect(hook.result.optimizedRoute.map((w) => w.id)).toEqual([
+      'wp-origin',
+      'wp-near',
+      'wp-far',
+    ]);
+
+    act(() => {
+      hook.result.reorderWaypoints(1, 2);
+    });
+
+    expect(hook.result.optimizedRoute.map((w) => w.id)).toEqual([
+      'wp-origin',
+      'wp-far',
+      'wp-near',
+    ]);
+    expect(hook.result.polyline).not.toEqual(initialPolyline);
+    expect(hook.result.polyline).toEqual([
+      [6.5244, 3.3792],
+      [7.3775, 3.947],
+      [6.535, 3.385],
+    ]);
+    expect(hook.result.result.polyline).toEqual(hook.result.polyline);
+  });
+
+  it('supports adding and removing waypoints dynamically', () => {
+    const hook = renderRouteHook(waypoints.slice(0, 2));
+    expect(hook.result.waypoints).toHaveLength(2);
+
+    const extraWaypoint: OptimizerWaypoint = {
+      id: 'wp-extra',
+      coordinate: { latitude: 6.53, longitude: 3.38 },
+      label: ' Ikeja Stop',
+    };
+
+    act(() => {
+      hook.result.addWaypoint(extraWaypoint);
+    });
+
+    expect(hook.result.waypoints).toHaveLength(3);
+    expect(hook.result.optimizedRoute.map((w) => w.id)).toEqual([
+      'wp-origin',
+      'wp-extra',
+      'wp-far',
+    ]);
+
+    act(() => {
+      hook.result.removeWaypoint('wp-extra');
+    });
+
+    expect(hook.result.waypoints).toHaveLength(2);
+    expect(hook.result.optimizedRoute.map((w) => w.id)).toEqual([
+      'wp-origin',
+      'wp-far',
+    ]);
+  });
+
+  it('caches routes for the same waypoint set so repeated evaluations use the cache', () => {
+    const hook = renderRouteHook(waypoints);
+    expect(hook.result.isCached).toBe(false);
+
+    // Reorder manually, then reset back to the same waypoint set
+    act(() => {
+      hook.result.reorder(0, 2);
+    });
+    expect(hook.result.isCached).toBe(false);
+
+    act(() => {
+      hook.result.reset();
+    });
+
+    expect(hook.result.isCached).toBe(true);
+    expect(hook.result.result.cached).toBe(true);
+  });
+
+  it('computes optimal route via routing API and serves subsequent calls for the same waypoint set from cache', async () => {
+    mockedAxios.post.mockResolvedValueOnce({
+      data: {
+        success: true,
+        data: {
+          optimizedWaypoints: [waypoints[0], waypoints[2], waypoints[1]],
+          distance: 118.4,
+          duration: 142.5,
+          polyline: [
+            [6.5244, 3.3792],
+            [6.535, 3.385],
+            [7.3775, 3.947],
+          ],
+        },
+      },
+    });
+
+    const hook = renderRouteHook(waypoints);
+
+    await act(async () => {
+      await hook.result.optimizeRoute();
+    });
+
+    expect(mockedAxios.post).toHaveBeenCalledTimes(1);
+    expect(hook.result.distance).toBe(118.4);
+    expect(hook.result.duration).toBe(142.5);
+    expect(getRouteOptimizationCacheSize()).toBe(1);
+
+    // Second call with identical waypoint set hits cache without another API call
+    await act(async () => {
+      const second = await hook.result.optimizeRoute();
+      expect(second.cached).toBe(true);
+    });
+
+    expect(mockedAxios.post).toHaveBeenCalledTimes(1);
+  });
+
+  it('handles HTTP 429 rate limiting gracefully by falling back to cached/computed route optimization', async () => {
+    const rateLimitError = {
+      isAxiosError: true,
+      response: {
+        status: 429,
+        headers: { 'retry-after': '3' },
+      },
+    };
+    mockedAxios.isAxiosError.mockReturnValue(true);
+    mockedAxios.post.mockRejectedValueOnce(rateLimitError);
+
+    const hook = renderRouteHook(waypoints);
+
+    await act(async () => {
+      const fallback = await hook.result.optimizeRoute();
+      expect(fallback.optimizedWaypoints).toHaveLength(3);
+      expect(fallback.polyline).toHaveLength(3);
+      expect(fallback.distance).toBeGreaterThan(0);
+    });
+
+    expect(hook.result.error).toBeNull();
+  });
+});
diff --git a/hooks/useRouteOptimization.ts b/hooks/useRouteOptimization.ts
index 6d7e4b01..af0762a2 100644
--- a/hooks/useRouteOptimization.ts
+++ b/hooks/useRouteOptimization.ts
@@ -1,12 +1,30 @@
 /**
  * useRouteOptimization Hook
- * Reorders a list of waypoints into a shorter route using a
- * nearest-neighbor heuristic, and exposes the resulting distance/time
- * estimates plus a manual reorder function.
+ * Manages waypoint order, route optimization via the OSRM/TomTom/backend
+ * routing service, caching for identical waypoint sets, adding/removing
+ * waypoints, polyline coordinates, and distance/time calculation.
  */
 
 'use client';
 
+import { useCallback, useMemo, useState } from 'react';
+import {
+  AVERAGE_SPEED_KMH,
+  buildRoutePolyline,
+  calculateRouteDurationMinutes,
+  computeRouteOptimization,
+  optimizeRouteViaApi,
+  totalRouteDistance,
+} from '@/services/routeOptimizationService';
+import type {
+  OptimizerWaypoint,
+  RouteOptimizationResult,
+} from '@/types/routeOptimizer';
+
+export type { RouteOptimizationResult };
+
+export interface UseRouteOptimizationReturn {
+  /** Waypoints in their current input order. */
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   fetchOptimizedRoute,
@@ -21,29 +39,114 @@ const AVERAGE_SPEED_KMH = 40;
 interface UseRouteOptimizationReturn {
   /** Waypoints in their original (unoptimized) order, as provided. */
   waypoints: OptimizerWaypoint[];
-  /** Waypoints reordered by the nearest-neighbor heuristic. */
+  /** Waypoints reordered by the optimizer or manual reorder calls. */
   optimizedRoute: OptimizerWaypoint[];
   /** Total distance of the optimized route, in kilometers. */
   totalDistance: number;
   /** Estimated travel time for the optimized route, in minutes. */
   estimatedTime: number;
+  /** Alias for totalDistance (in kilometers). */
+  distance: number;
+  /** Alias for estimatedTime (in minutes). */
+  duration: number;
+  /** Polyline coordinate pairs [lat, lng] for map rendering. */
+  polyline: [number, number][];
+  /** Structured RouteOptimizationResult with polyline, distance, duration, and cache status. */
+  result: RouteOptimizationResult;
+  /** Whether the current route result was served from cache. */
+  isCached: boolean;
+  /** Whether an async routing API optimization request is in flight. */
+  isLoading: boolean;
+  /** Error message from the most recent routing API request, if any. */
+  error: string | null;
   /** Move a waypoint in the optimized route from one index to another. */
   reorder: (_fromIndex: number, _toIndex: number) => void;
+  /** Alias for reorder to support explicit waypoint reordering calls. */
+  reorderWaypoints: (_fromIndex: number, _toIndex: number) => void;
+  /** Add a waypoint to the current route and recompute optimization. */
+  addWaypoint: (_waypoint: OptimizerWaypoint) => void;
+  /** Remove a waypoint by ID from the current route and recompute optimization. */
+  removeWaypoint: (_waypointId: string) => void;
+  /** Restore the optimized route to the initial waypoints' optimized order. */
   /** Restore the optimized route to the nearest-neighbor result. */
   reset: () => void;
+  /** Fetch optimal route from the backend/OSRM routing API with rate-limit caching. */
+  optimizeRoute: () => Promise<RouteOptimizationResult>;
 }
 
 /**
+ * Hook to optimize the visiting order of a set of waypoints, manage adding/removing
+ * and reordering waypoints, cache routes for identical waypoint sets, and compute
+ * polyline coordinates, distance, and duration.
+ *
+ * @param initialWaypoints - The initial waypoints to optimize.
  * Hook to optimize the visiting order of a set of waypoints.
  * @param initialWaypoints - The waypoints to optimize, in any order.
  */
 export function useRouteOptimization(
-  initialWaypoints: OptimizerWaypoint[]
+  initialWaypoints: OptimizerWaypoint[],
 ): UseRouteOptimizationReturn {
-  const nearestNeighborRoute = useMemo(
-    () => nearestNeighborOrder(initialWaypoints),
-    [initialWaypoints]
+  const [customWaypoints, setCustomWaypoints] = useState<
+    OptimizerWaypoint[] | null
+  >(null);
+  const [manualRoute, setManualRoute] = useState<OptimizerWaypoint[] | null>(
+    null,
   );
+  const [apiResult, setApiResult] = useState<RouteOptimizationResult | null>(
+    null,
+  );
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const activeWaypoints = customWaypoints ?? initialWaypoints;
+
+  const computedResult = useMemo<RouteOptimizationResult>(() => {
+    if (manualRoute) {
+      const distance = totalRouteDistance(manualRoute);
+      const duration = calculateRouteDurationMinutes(
+        distance,
+        AVERAGE_SPEED_KMH,
+      );
+      const polyline = buildRoutePolyline(manualRoute);
+      return {
+        waypoints: activeWaypoints,
+        optimizedWaypoints: manualRoute,
+        distance,
+        duration,
+        polyline,
+        cached: false,
+      };
+    }
+
+    return computeRouteOptimization(activeWaypoints, {
+      preserveOrder: false,
+      useCache: true,
+    });
+  }, [activeWaypoints, manualRoute]);
+
+  const effectiveResult = apiResult ?? computedResult;
+
+  const reorder = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      setApiResult(null);
+      setManualRoute((current) => {
+        const base = current ?? effectiveResult.optimizedWaypoints;
+        if (
+          fromIndex < 0 ||
+          fromIndex >= base.length ||
+          toIndex < 0 ||
+          toIndex >= base.length ||
+          fromIndex === toIndex
+        ) {
+          return base;
+        }
+        const next = [...base];
+        const [moved] = next.splice(fromIndex, 1);
+        next.splice(toIndex, 0, moved);
+        return next;
+      });
+    },
+    [effectiveResult.optimizedWaypoints],
 
   const [manualRoute, setManualRoute] = useState<OptimizerWaypoint[] | null>(null);
   const [backendRoute, setBackendRoute] = useState<OptimizerWaypoint[] | null>(null);
@@ -83,11 +186,34 @@ export function useRouteOptimization(
     [optimizedRoute]
   );
 
-  const estimatedTime = useMemo(
-    () => (totalDistance / AVERAGE_SPEED_KMH) * 60,
-    [totalDistance]
+  const addWaypoint = useCallback(
+    (waypoint: OptimizerWaypoint) => {
+      setApiResult(null);
+      setManualRoute(null);
+      setCustomWaypoints((current) => {
+        const base = current ?? activeWaypoints;
+        if (base.some((existing) => existing.id === waypoint.id)) {
+          return base.map((existing) =>
+            existing.id === waypoint.id ? waypoint : existing,
+          );
+        }
+        return [...base, waypoint];
+      });
+    },
+    [activeWaypoints],
   );
 
+  const removeWaypoint = useCallback(
+    (waypointId: string) => {
+      setApiResult(null);
+      setManualRoute(null);
+      setCustomWaypoints((current) => {
+        const base = current ?? activeWaypoints;
+        return base.filter((wp) => wp.id !== waypointId);
+      });
+    },
+    [activeWaypoints],
+  );
   const reorder = useCallback((fromIndex: number, toIndex: number) => {
     setManualRoute((current) => {
       const base = current ?? backendRoute ?? nearestNeighborRoute;
@@ -109,14 +235,47 @@ export function useRouteOptimization(
 
   const reset = useCallback(() => {
     setManualRoute(null);
+    setCustomWaypoints(null);
+    setApiResult(null);
+    setError(null);
   }, []);
 
+  const optimizeRoute = useCallback(async (): Promise<RouteOptimizationResult> => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await optimizeRouteViaApi(activeWaypoints);
+      setManualRoute(null);
+      setApiResult(response);
+      return response;
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : 'Failed to optimize route';
+      setError(message);
+      return effectiveResult;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [activeWaypoints, effectiveResult]);
+
   return {
-    waypoints: initialWaypoints,
-    optimizedRoute,
-    totalDistance,
-    estimatedTime,
+    waypoints: activeWaypoints,
+    optimizedRoute: effectiveResult.optimizedWaypoints,
+    totalDistance: effectiveResult.distance,
+    estimatedTime: effectiveResult.duration,
+    distance: effectiveResult.distance,
+    duration: effectiveResult.duration,
+    polyline: effectiveResult.polyline,
+    result: effectiveResult,
+    isCached: effectiveResult.cached,
+    isLoading,
+    error,
     reorder,
+    reorderWaypoints: reorder,
+    addWaypoint,
+    removeWaypoint,
     reset,
+    optimizeRoute,
   };
 }
diff --git a/services/routeOptimizationService.ts b/services/routeOptimizationService.ts
index 8f0ee822..23200eca 100644
--- a/services/routeOptimizationService.ts
+++ b/services/routeOptimizationService.ts
@@ -1,5 +1,7 @@
 /**
  * Route Optimization Service
+ * Handles OSRM/TomTom/backend routing API integration, waypoint ordering,
+ * polyline generation, distance/duration calculation, and rate-limit caching.
  * Computes or fetches the most efficient waypoint order for a delivery route.
  * This keeps the hook logic thin while still supporting backend-based route
  * planning when the API is available.
@@ -7,6 +9,76 @@
 
 import axios from 'axios';
 import { calculateDistanceKm } from '@/services/geofenceService';
+import type {
+  OptimizerWaypoint,
+  RouteOptimizationResult,
+} from '@/types/routeOptimizer';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
+
+/** Average assumed travel speed (km/h) used to derive duration from distance. */
+export const AVERAGE_SPEED_KMH = 40;
+
+/** Default minimum interval (ms) between uncached API calls for rate limiting. */
+const DEFAULT_RATE_LIMIT_MS = 1000;
+
+interface CacheEntry {
+  result: RouteOptimizationResult;
+  createdAt: number;
+}
+
+interface RouteOptimizationApiPayload {
+  success?: boolean;
+  data?: {
+    optimizedWaypoints?: OptimizerWaypoint[];
+    waypointOrder?: number[];
+    distance?: number;
+    duration?: number;
+    polyline?: [number, number][];
+  };
+  routes?: Array<{
+    distance: number;
+    duration: number;
+    geometry?: {
+      coordinates?: [number, number][];
+    };
+  }>;
+  waypoint_order?: number[];
+}
+
+const localRouteCache = new Map<string, CacheEntry>();
+const apiRouteCache = new Map<string, CacheEntry>();
+let lastRequestTimestamp = 0;
+let rateLimitCooldownUntil = 0;
+
+/**
+ * Generates a deterministic cache key for a set of waypoints.
+ */
+export function getWaypointSetCacheKey(
+  waypoints: OptimizerWaypoint[],
+  preserveOrder: boolean = false,
+): string {
+  const parts = waypoints.map(
+    (wp) =>
+      `${wp.id}:${wp.coordinate.latitude.toFixed(5)},${wp.coordinate.longitude.toFixed(5)}`,
+  );
+  const normalized = preserveOrder ? parts : [...parts].sort();
+  return `${preserveOrder ? 'manual' : 'opt'}|${normalized.join('|')}`;
+}
+
+/**
+ * Reorders waypoints starting from the first waypoint, repeatedly visiting
+ * the nearest unvisited waypoint.
+ */
+export function nearestNeighborOrder(
+  points: OptimizerWaypoint[],
+): OptimizerWaypoint[] {
+  if (points.length <= 2) return [...points];
+
+  const remaining = [...points];
+  const ordered: OptimizerWaypoint[] = [
+    remaining.shift() as OptimizerWaypoint,
+  ];
 import type { OptimizerWaypoint } from '@/types/routeOptimizer';
 
 const AVERAGE_SPEED_KMH = 40;
@@ -29,6 +101,10 @@ export function nearestNeighborOrder(points: OptimizerWaypoint[]): OptimizerWayp
     let nearestDistance = Infinity;
 
     remaining.forEach((candidate, index) => {
+      const distance = calculateDistanceKm(
+        current.coordinate,
+        candidate.coordinate,
+      );
       const distance = calculateDistanceKm(current.coordinate, candidate.coordinate);
       if (distance < nearestDistance) {
         nearestDistance = distance;
@@ -42,6 +118,16 @@ export function nearestNeighborOrder(points: OptimizerWaypoint[]): OptimizerWayp
   return ordered;
 }
 
+/**
+ * Computes total route distance in kilometers across ordered waypoints.
+ */
+export function totalRouteDistance(route: OptimizerWaypoint[]): number {
+  let distance = 0;
+  for (let i = 0; i < route.length - 1; i += 1) {
+    distance += calculateDistanceKm(
+      route[i].coordinate,
+      route[i + 1].coordinate,
+    );
 export function totalRouteDistance(route: OptimizerWaypoint[]): number {
   let distance = 0;
   for (let i = 0; i < route.length - 1; i += 1) {
@@ -50,6 +136,237 @@ export function totalRouteDistance(route: OptimizerWaypoint[]): number {
   return distance;
 }
 
+/**
+ * Computes estimated travel duration in minutes for a given distance in km.
+ */
+export function calculateRouteDurationMinutes(
+  distanceKm: number,
+  speedKmh: number = AVERAGE_SPEED_KMH,
+): number {
+  if (distanceKm <= 0 || speedKmh <= 0) return 0;
+  return (distanceKm / speedKmh) * 60;
+}
+
+/**
+ * Builds [latitude, longitude] polyline coordinates for map rendering.
+ */
+export function buildRoutePolyline(
+  route: OptimizerWaypoint[],
+): [number, number][] {
+  return route.map((wp) => [wp.coordinate.latitude, wp.coordinate.longitude]);
+}
+
+/**
+ * Computes a complete RouteOptimizationResult locally and caches it by waypoint set.
+ */
+export function computeRouteOptimization(
+  waypoints: OptimizerWaypoint[],
+  options: { preserveOrder?: boolean; useCache?: boolean } = {},
+): RouteOptimizationResult {
+  const { preserveOrder = false, useCache = true } = options;
+  const cacheKey = getWaypointSetCacheKey(waypoints, preserveOrder);
+
+  if (useCache) {
+    const existing =
+      apiRouteCache.get(cacheKey) ?? localRouteCache.get(cacheKey);
+    if (existing) {
+      return {
+        ...existing.result,
+        waypoints: [...waypoints],
+        cached: true,
+      };
+    }
+  }
+
+  const optimizedWaypoints = preserveOrder
+    ? [...waypoints]
+    : nearestNeighborOrder(waypoints);
+  const distance = totalRouteDistance(optimizedWaypoints);
+  const duration = calculateRouteDurationMinutes(distance);
+  const polyline = buildRoutePolyline(optimizedWaypoints);
+
+  const result: RouteOptimizationResult = {
+    waypoints: [...waypoints],
+    optimizedWaypoints,
+    distance,
+    duration,
+    polyline,
+    cached: false,
+  };
+
+  if (useCache && waypoints.length > 0) {
+    localRouteCache.set(cacheKey, {
+      result,
+      createdAt: Date.now(),
+    });
+  }
+
+  return result;
+}
+
+/**
+ * Optimizes a route via the backend/OSRM routing API with caching and
+ * rate-limit protection. Returns cached results immediately when the same
+ * waypoint set is requested again.
+ */
+export async function optimizeRouteViaApi(
+  waypoints: OptimizerWaypoint[],
+  options: { rateLimitMs?: number } = {},
+): Promise<RouteOptimizationResult> {
+  if (waypoints.length === 0) {
+    return {
+      waypoints: [],
+      optimizedWaypoints: [],
+      distance: 0,
+      duration: 0,
+      polyline: [],
+      cached: false,
+    };
+  }
+
+  const cacheKey = getWaypointSetCacheKey(waypoints, false);
+  const cachedEntry = apiRouteCache.get(cacheKey);
+  if (cachedEntry) {
+    return {
+      ...cachedEntry.result,
+      waypoints: [...waypoints],
+      cached: true,
+    };
+  }
+
+  const now = Date.now();
+  const minInterval = options.rateLimitMs ?? DEFAULT_RATE_LIMIT_MS;
+
+  if (
+    now < rateLimitCooldownUntil ||
+    (lastRequestTimestamp > 0 && now - lastRequestTimestamp < minInterval)
+  ) {
+    return computeRouteOptimization(waypoints, {
+      preserveOrder: false,
+      useCache: true,
+    });
+  }
+
+  lastRequestTimestamp = now;
+
+  try {
+    const response = await axios.post<RouteOptimizationApiPayload>(
+      `${API_BASE_URL}/api/routes/optimize`,
+      {
+        waypoints: waypoints.map((wp) => ({
+          id: wp.id,
+          label: wp.label,
+          address: wp.address,
+          latitude: wp.coordinate.latitude,
+          longitude: wp.coordinate.longitude,
+        })),
+      },
+      {
+        timeout: 10000,
+        headers: { 'Content-Type': 'application/json' },
+      },
+    );
+
+    const payload = response.data;
+
+    if (payload?.data) {
+      const orderedWaypoints =
+        payload.data.optimizedWaypoints ??
+        (payload.data.waypointOrder
+          ? payload.data.waypointOrder
+              .map((idx) => waypoints[idx])
+              .filter(Boolean)
+          : nearestNeighborOrder(waypoints));
+
+      const distance =
+        typeof payload.data.distance === 'number'
+          ? payload.data.distance
+          : totalRouteDistance(orderedWaypoints);
+
+      const duration =
+        typeof payload.data.duration === 'number'
+          ? payload.data.duration
+          : calculateRouteDurationMinutes(distance);
+
+      const polyline =
+        payload.data.polyline && payload.data.polyline.length > 0
+          ? payload.data.polyline
+          : buildRoutePolyline(orderedWaypoints);
+
+      const result: RouteOptimizationResult = {
+        waypoints: [...waypoints],
+        optimizedWaypoints: orderedWaypoints,
+        distance,
+        duration,
+        polyline,
+        cached: false,
+      };
+
+      apiRouteCache.set(cacheKey, { result, createdAt: Date.now() });
+      localRouteCache.set(cacheKey, { result, createdAt: Date.now() });
+      return result;
+    }
+
+    if (payload?.routes && payload.routes.length > 0) {
+      const primaryRoute = payload.routes[0];
+      const orderedWaypoints = nearestNeighborOrder(waypoints);
+      const distanceKm = primaryRoute.distance / 1000;
+      const durationMin = primaryRoute.duration / 60;
+      const polyline: [number, number][] = primaryRoute.geometry?.coordinates
+        ? primaryRoute.geometry.coordinates.map(([lng, lat]) => [lat, lng])
+        : buildRoutePolyline(orderedWaypoints);
+
+      const result: RouteOptimizationResult = {
+        waypoints: [...waypoints],
+        optimizedWaypoints: orderedWaypoints,
+        distance: distanceKm,
+        duration: durationMin,
+        polyline,
+        cached: false,
+      };
+
+      apiRouteCache.set(cacheKey, { result, createdAt: Date.now() });
+      localRouteCache.set(cacheKey, { result, createdAt: Date.now() });
+      return result;
+    }
+
+    return computeRouteOptimization(waypoints, {
+      preserveOrder: false,
+      useCache: true,
+    });
+  } catch (error) {
+    if (axios.isAxiosError(error) && error.response?.status === 429) {
+      const retryAfterHeader = Number(error.response.headers?.['retry-after']);
+      const cooldownMs =
+        Number.isFinite(retryAfterHeader) && retryAfterHeader > 0
+          ? retryAfterHeader * 1000
+          : 5000;
+      rateLimitCooldownUntil = Date.now() + cooldownMs;
+      return computeRouteOptimization(waypoints, {
+        preserveOrder: false,
+        useCache: true,
+      });
+    }
+    throw error;
+  }
+}
+
+/**
+ * Clears the internal route optimization cache and rate-limit state.
+ */
+export function clearRouteOptimizationCache(): void {
+  localRouteCache.clear();
+  apiRouteCache.clear();
+  lastRequestTimestamp = 0;
+  rateLimitCooldownUntil = 0;
+}
+
+/**
+ * Returns the number of cached API route optimization entries.
+ */
+export function getRouteOptimizationCacheSize(): number {
+  return apiRouteCache.size;
+}
 export async function fetchOptimizedRoute(
   waypoints: OptimizerWaypoint[]
 ): Promise<OptimizedRouteMetrics> {
diff --git a/types/routeOptimizer.ts b/types/routeOptimizer.ts
index 0c9b2321..a9d2c197 100644
--- a/types/routeOptimizer.ts
+++ b/types/routeOptimizer.ts
@@ -13,6 +13,20 @@ export interface OptimizerWaypoint {
   address?: string;
 }
 
+/**
+ * Result returned by useRouteOptimization and routeOptimizationService
+ * containing the ordered waypoints, total distance (km), duration (min),
+ * and route polyline coordinates for map rendering.
+ */
+export interface RouteOptimizationResult {
+  waypoints: OptimizerWaypoint[];
+  optimizedWaypoints: OptimizerWaypoint[];
+  distance: number;
+  duration: number;
+  polyline: [number, number][];
+  cached: boolean;
+}
+
 /** Exported shape written to the downloaded route JSON file. */
 export interface OptimizedRouteExport {
   waypoints: OptimizerWaypoint[];