Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory)

Wayline is a logistics admin you can ship: a regional delivery network's whole back office, finished in light and dark. The demo company — four warehouses in New York and New Jersey, 34 vehicles, 36 drivers, 24 clients, 120 products and 75 days of history — is generated in the browser around the moment you open it, so it's always today and every number agrees with every other.

Command

• Live map: every vehicle glides along real road geometry (precomputed, no routing calls at runtime), with clustering, route lines driven and ahead, delay badges and warehouses. Select a truck for its inspector: speed, heading, distance left, next stop with ETA against the promised window, every stop's times, follow mode and re-sequencing. Replay the last four hours. Command and split layouts, a 3D tilt, and a bottom sheet on phones.
• Operations: what needs attention now, the network pulse (stops delivered against plan, on-time rate, projected finish), KPIs with today / 7 / 30 days, the order pipeline, the fleet and every warehouse's load.
• Exceptions: a rules engine ranks delays, SLA risks, temperature excursions, stock-outs, expired compliance documents, late inbound trucks, full warehouses and approvals — each with a suggested fix you apply in one click (reassign stops, notify customers, create a transfer, call the driver), plus acknowledge, assign, snooze and resolve.
• Dispatch board: routes as bars on a timeline per vehicle, at-risk windows, breaks and blocked vehicles; drag a route to another vehicle or an unassigned order onto one.

Orders and delivery

• Orders: a table with saved views, filters and CSV export, a Kanban board that only allows valid status moves, CSV import with validation, and a detail page with lines, packages, shipments, documents and activity.
• New order: a form with a live summary and a readiness checklist (client, address, window, goods, stock).
• Shipments: master–detail with live status, proof of delivery (photos and signature), failed attempts and notes; printable labels with barcode and QR.
• Customer tracking page: branded, privacy-safe (the driver appears only within 3 km), with an honest arrival window and progress.
• Route planner: pick orders on a map (or Shift-drag a lasso), drag to sequence, optimise in a Web Worker, check the vehicle, driver and load, and dispatch. Route detail with plan versus actual and a printable driver manifest.
• Driver app: the driver's day on a phone: next stop, navigate, arrived, proof of delivery with a signature pad, failed attempts, breaks.

Fleet, inventory and network

• Vehicles and drivers: grid and table, compliance documents that block dispatch when they expire, maintenance, health scores, utilisation, temperatures for reefers, rosters, scorecards and hours of service.
• Inventory: value, days of cover, turnover, ABC analysis and reorder suggestions; products with stock per warehouse; a stock ledger that reconciles to on-hand; purchase orders with receiving (short deliveries included), transfers, and adjustments with approvals.
• Warehouses, clients and suppliers: floor plans of every rack, a dock timeline with live arrivals, client health and lifetime value, supplier scorecards.
• Reports: delivery performance, revenue, inventory, fleet efficiency, warehouse operations and customer service, with period comparison, CSV export and scheduled reports.
• Settings that drive the app: units, formats, time zone and numbering apply everywhere at once; a team with invites, roles and a permission matrix that's enforced; notifications, an activity log, integrations and billing screens.

Built right

• Next.js 16 (App Router), React 19, Tailwind CSS 4 and shadcn/ui; MapLibre GL with free OpenFreeMap tiles (no API key).
• One source of truth: every metric comes from one selector, so the same number matches on every screen. Writes go through a mock API with latency, failures and Undo, ready to point at your backend (docs/BACKEND.md).
• Themes: light and dark, 8 presets (blue by default), 4 type pairings, radius, density, scale and right-to-left, saved in a cookie so the first paint is right.
• Keyboard-first: ⌘K finds any record, g and a letter jump anywhere, ? lists every shortcut; keyboard alternatives for drag and drop; status is never colour alone.
• Tests for the data's integrity, the story, the metrics and theme contrast; docs for theming, the data layer, the backend, maps, i18n, components and accessibility.

What's included

• The whole app in TypeScript: 76 pages across command, orders, fleet, inventory, network, reports, settings, sign-in and system pages
• The demo company generator and its live simulation, with the road geometry precomputed in data/
• Print views: shipping label, driver manifest and purchase order
• Docs and tests

Stack and requirements

• Node.js 20 or newer; npm install and npm run dev
• Next.js 16, React 19, Tailwind CSS 4, shadcn/ui (Radix), MapLibre GL, TanStack Table, dnd-kit, recharts, zustand
• Map tiles from OpenFreeMap (free, no key) — swap in your own with one setting (docs/MAPS.md)