Skip to content

feat(logistics,shared): add toast queue manager, route optimization hook, fleet map drag-drop, and delivery ETA map tests (#429, #487, #831, #832) - #946

Merged
johdanike merged 2 commits into
SwiftChainn:mainfrom
Meet-hybrid:feat/toast-queue-route-optimization-fleetmap-tests
Oct 28, 2026
Merged

johdanike merged 2 commits into
SwiftChainn:mainfrom
Meet-hybrid:feat/toast-queue-route-optimization-fleetmap-tests

Conversation

@Meet-hybrid

Copy link
Copy Markdown
Contributor

Overview

This PR implements four cohesive frontend & logistics improvements across toast notification queue management, route optimization, interactive fleet map waypoint reordering, and automated delivery route ETA map testing:

  1. Toast Notification Queue Manager (#429) — Adds a centralized context/ToastProvider.tsx using React Context, Framer Motion, and toastService that dispatches success, error, and info alerts, enforces a maxVisible on-screen limit (default 3), queues overflow alerts in FIFO order, auto-dismisses visible toasts after their timeout, and syncs system alerts/config from the backend API.
  2. Delivery Route Map & ETA Logic/UI Tests (#487) — Adds dynamic remaining ETA (calculateRemainingEtaMinutes) and ISO estimated delivery timestamp (calculateEstimatedDeliveryDate) support to components/shipments/TrackingMap.tsx along with comprehensive component tests in __tests__/components/shipments/TrackingMapEta.test.tsx verifying physical route updates, polyline/marker changes, ETA calculations, and loading/empty/error states.
  3. Route Optimization Hook (#831) — Enhances hooks/useRouteOptimization.ts and adds services/routeOptimizationService.ts (Component -> Hook -> Service pattern) to compute optimal waypoint order, distance (km), duration (min), and polyline coordinates ([lat, lng][]), support adding/removing/reordering waypoints, and cache routes by waypoint set with HTTP 429 rate-limit protection.
  4. FleetMap Waypoint Drag-and-Drop Reordering (#832) — Enhances components/fleet/FleetMapClient.tsx with interactive waypoint drag-and-drop reordering powered by useRouteOptimization, displaying dashed drop zone previews while dragging, highlighting valid drop positions, updating connection lines in real time, and smoothly snapping markers to valid drop positions.

Related Issues

Closes #429
Closes #487
Closes #831
Closes #832

Changes

🔔 Issue #429 — Frontend: Toast Notification Queue Manager

  • [ADD] context/ToastProvider.tsx
    • Provides ToastProvider, useToastContext, and useToastQueue for dispatching success, error, and info notifications.
    • Enforces maxVisible (default 3) visible toasts on screen while holding additional rapidly triggered notifications in queuedToasts (FIFO queue).
    • Manages per-toast auto-dismiss timers exclusively for visible toasts and automatically promotes queued toasts as visible ones dismiss.
    • Integrates with toastService (lib/toast.ts) to retrieve backend configuration and toast messages without inline mock objects.
  • [ADD] context/__tests__/ToastProvider.test.tsx
    • Unit tests covering success/error/info dispatching, rapid 5-error queueing (3 visible, 2 queued), auto-dismiss FIFO promotion, manual dismissal, and backend sync.

🗺️ Issue #487 — [Test] Component: View Estimated Delivery Date Map Logic & UI

  • [MODIFY] components/shipments/TrackingMap.tsx
    • Adds calculateRemainingEtaMinutes and calculateEstimatedDeliveryDate to compute accurate remaining ETA as currentLocation progresses along the delivery route and derive the ISO estimated delivery timestamp.
    • Includes currentLocation in live map bounds and exposes testable attributes for physical route and ETA verification while preserving existing behavior.
  • [ADD] __tests__/components/shipments/TrackingMapEta.test.tsx
    • Automated component tests verifying physical route rendering, live currentLocation marker movement, dynamic route waypoint/polyline updates, accurate ETA & estimated delivery date calculation, and loading, empty, and error states with mocked external dependencies.

🧭 Issue #831 — Hook: useRouteOptimization for Waypoint Reordering and Route Calculation

  • [MODIFY] types/routeOptimizer.ts
    • Adds RouteOptimizationResult interface (waypoints, optimizedWaypoints, distance, duration, polyline, cached).
  • [ADD] services/routeOptimizationService.ts
    • Implements backend/OSRM routing API integration (optimizeRouteViaApi), deterministic waypoint-set caching (getWaypointSetCacheKey), HTTP 429 rate-limit handling, Haversine distance/duration calculation, and polyline coordinate generation (buildRoutePolyline).
  • [MODIFY] hooks/useRouteOptimization.ts
    • Returns RouteOptimizationResult with polyline, distance, duration, isCached, addWaypoint, removeWaypoint, reorder / reorderWaypoints, reset, and async optimizeRoute.
  • [ADD] hooks/__tests__/useRouteOptimization.test.ts
    • Unit tests covering RouteOptimizationResult polyline output, function-call waypoint reordering, adding/removing waypoints, waypoint-set route caching, and rate-limit handling.

🚚 Issue #832 — Enhancement: Add Waypoint Drag-and-Drop Reordering to FleetMap

  • [MODIFY] components/fleet/FleetMapClient.tsx
    • Adds WaypointDragDropLayer (consuming useRouteOptimization) and findNearestSnapIndex while preserving existing DriverClusterLayer behavior.
    • Supports dragging waypoint markers to reorder their position in the route array, renders dashed drop zone previews (border-dashed) while dragging, highlights valid drop targets, updates connection lines in real time during drag and after drop, and smoothly snaps markers to valid drop positions.
  • [MODIFY] components/fleet/__tests__/FleetMapClient.test.tsx
    • Adds tests for dashed drop zone previews, valid drop target highlighting, real-time connection line updates, and smooth marker snapping/reordering alongside existing driver clustering tests.

Verification Results

npx eslint context/ToastProvider.tsx context/__tests__/ToastProvider.test.tsx types/routeOptimizer.ts services/routeOptimizationService.ts hooks/useRouteOptimization.ts hooks/__tests__/useRouteOptimization.test.ts components/fleet/FleetMapClient.tsx components/fleet/__tests__/FleetMapClient.test.tsx components/shipments/TrackingMap.tsx __tests__/components/shipments/TrackingMapEta.test.tsx
✅ 0 errors, 0 warnings

pnpm type-check (filtered to changed files)
✅ 0 TypeScript errors in changed files

pnpm test -- context/__tests__/ToastProvider.test.tsx hooks/__tests__/useRouteOptimization.test.ts __tests__/components/shipments/RouteOptimizer.test.tsx components/fleet/__tests__/FleetMapClient.test.tsx __tests__/components/shipments/TrackingMapEta.test.tsx components/shipments/__tests__/TrackingMap.test.tsx components/providers/__tests__/ToastProvider.test.tsx __tests__/integration/DriverLocationUpdates.test.tsx
✅ 8/8 test suites passed (143/143 tests passed)
  • Lint (changed files) — passed
  • Type check (changed files) — passed
  • Unit & component tests — passed (8 suites, 143 tests)
  • CI — pending

Acceptance Criteria

Issue #429 — Frontend: Toast Notification Queue Manager

  • Build context to dispatch Success, Error, and Info toasts
  • Handle max-visible limits (e.g., max 3) and auto-dismiss timeouts
  • Rapidly triggering 5 errors queues them smoothly and only displays the maximum allowed on screen
  • Strict Layered Architecture: Component -> Hook -> Service pattern

Issue #487 — [Test] Component: View Estimated Delivery Date Map Logic & UI

  • Setup the test file in the appropriate directory (__tests__/components/shipments/TrackingMapEta.test.tsx)
  • Write tests covering the happy path (physical route updates, live marker movement, polyline updates, and accurate ETA & estimated delivery date calculation)
  • Write tests covering edge cases, empty states, and error handling
  • Mock external dependencies (APIs, Leaflet, hooks) to prevent flaky tests

Issue #831 — Hook: useRouteOptimization for Waypoint Reordering and Route Calculation

  • Hook returns RouteOptimizationResult with polyline
  • Waypoints can be reordered via function call (reorder / reorderWaypoints) and added/removed (addWaypoint / removeWaypoint)
  • Route is cached for the same waypoint set with rate-limit handling
  • Distance and duration are accurate
  • Strict Layered Architecture: Component -> Hook -> Service pattern

Issue #832 — Enhancement: Add Waypoint Drag-and-Drop Reordering to FleetMap

  • Dragging marker shows visual dashed drop preview
  • Drop zones highlight valid positions
  • Connection lines update in real-time
  • Marker snap is smooth and responsive
  • Route visualization updates after reorder

@drips-wave

drips-wave Bot commented Oct 19, 2026

Copy link
Copy Markdown

@Meet-hybrid Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@johdanike

Copy link
Copy Markdown
Contributor

Please resolve conflicts

@Meet-hybrid

Copy link
Copy Markdown
Contributor Author

Please resolve conflicts

Done.

@johdanike
johdanike merged commit 4fc2824 into SwiftChainn:main Oct 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants