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

> A complete logistics admin for Next.js and shadcn/ui: a live map of trucks on real roads, an exceptions inbox with one-click fixes, route planner, dispatch board, orders, shipments with proof of delivery, fleet, drivers, inventory, warehouses and reports. Light and dark.

- Kind: Landing page
- Price: comes with the Pro plan
- License: UpFork Standard License. Use it in unlimited personal and commercial projects. Don't resell or redistribute it on its own.
- Developer: UpFork
- Tags: logistics, fleet-management, delivery-tracking, route-planning, dispatch, inventory, admin-dashboard, nextjs, shadcn
- Latest release: 1.0.0 (Any system)
- Published: 2026-10-25
- Updated: 2026-10-25
- Page: https://upfork.dev/products/nextjs-logistics-fleet-management-template

## How to get it

Install it into a React + Tailwind project with the shadcn CLI:

```bash
npx shadcn@latest add @upfork/nextjs-logistics-fleet-management-template
```

It installs with the member's personal CLI token (UPFORK_TOKEN), made on their UpFork account page. It comes with UpFork's Pro plan and the plans after it.

## About

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)

## Screenshots

![Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory), 1](https://upfork.dev/media/01a1747b-8625-791e-af50-dcc66c1dc646.jpg)
![Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory), 2](https://upfork.dev/media/01a1747b-ce5f-7c64-846c-77f6886a070d.jpg)
![Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory), 3](https://upfork.dev/media/01a1747c-231a-7677-8350-91cc5876a58c.jpg)
![Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory), 4](https://upfork.dev/media/01a1747c-4e5c-79df-bfb1-3a3528d2e57d.jpg)
![Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory), 5](https://upfork.dev/media/01a1747c-971f-73b6-8ec0-cbeba9214897.jpg)
![Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory), 6](https://upfork.dev/media/01a1747c-d5ad-7673-8370-9f5ff2054f27.jpg)
![Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory), 7](https://upfork.dev/media/01a1747d-7864-7c7b-86c5-b4aa74b1c1f0.jpg)