Freight
One screen for running freight: the fleet on a map, the dispatch board and one shipment in full, as views in tabs.
Installation & usage
npx @youj/cli add app-logisticsAlso installs app-dispatch-board, app-fleet-overview, app-page, app-shipment-detail, badge, button, card, icon-arrow-right, segmented-control, tabs, toast, use-controllable-state, youj-core, youj-ui-core.
The CLI copies the block to blocks/app/logistics.tsx with every component it uses, so it’s yours to edit.
Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:
'use client'
import { Logistics, type LogisticsProps } from '@/blocks/app/logistics'
export function LogisticsView({ view }: Pick<LogisticsProps, 'view'>) {
return (
<Logistics
view={view}
onViewChange={(view) => {
// your code
}}
onReroute={async (ships) => {
// await your API here; the block shows progress until it settles
}}
/>
)
}Description
Run freight from one screen: the ocean fleet on a map beside its ships, the dispatch board with its queue, route and the agent’s proposals, and one shipment in full, each a tab of the same size. Opening the at-risk load from Dispatch shows its shipment, and its reroute is one decision in both views.
Demo only. Its content is fixed in the block: it takes no data or copy props, only the few settings and callbacks listed in its props. Copy the source to build on it.
Run freight from one screen: the ocean fleet on a map beside its ships, the dispatch board with its queue, route and the agent’s proposals, and one shipment in full, each a tab of the same size. Opening the at-risk load from Dispatch shows its shipment, and its reroute is one decision in both views.
Demo only. Its content is fixed in the block: it takes no data or copy props, only the few settings and callbacks listed in its props. Copy the source to build on it.
Track an ocean-freight fleet on a map: ships steaming along their lanes, a list of what is sailing, holding or in port, a voyage panel with route, ETA, log and manifest, and a storm to reroute around.
Demo only. Its content is fixed in the block: it takes no data or copy props, only the few settings and callbacks listed in its props. Copy the source to build on it.
Run a freight dispatch board: a queue of loads, the selected one on a route map with a reroute to approve or compare, every driver’s day as lanes with proposed runs dashed, and the dispatch agent’s proposals.
Demo only. Its content is fixed in the block: it takes no data or copy props, only the few settings and callbacks listed in its props. Copy the source to build on it.
Follow one shipment: the route as a stage rail with a detour, the vehicle with its readings called out, the route agent’s reroute to approve, the timeline, the record and the documents.
Code
Logistics, the Logistics story: the files youj add writes.
blocks/app
Reference
Props6 props
Props
| Prop | Type | |
|---|---|---|
theme | ThemeInputWraps the screen in this theme. Default: the theme around it. | – |
embedded | booleanA page in your app's frame: the shared page header (AppPage, with New load) and the frame's gutter, filling the frame's height. default true | true |
view | View'fleet''dispatch''shipment'The view shown (controlled). | – |
defaultView | View'fleet''dispatch''shipment'The view shown at first. default 'fleet' | 'fleet' |
onViewChange | (view: View) => voidCalled with the view chosen. | – |
onReroute | (ships: Tracked[]) => Promise<unknown> | unknownReroutes the ships held by the storm; resolve when the request is done. Default: a short demo wait. | – |
Built from7 components, 3 blocks
Built from
Accessibilitylandmarks, live regions, keyboard
Accessibility
Logistics is one page heading over a tablist of three views (Fleet, Dispatch and Shipment); each view is a tab panel, and the fleet's keys answer only while Fleet is shown. Each of the other screens is a main with one page heading. Fleet overview names the map as an image that says how many ships are at sea and how many are holding, keeps its panels as labeled complementary regions, announces the voyage that opens in a polite live region, and answers the keyboard: / searches, J and K step through the list, + and − zoom, 0 frames the fleet and Esc closes the voyage. Dispatch board groups its figures, names the queue and the map’s route, draws proposed runs dashed as well as in a different color, and decides every proposal with buttons that can be undone. Shipment detail lists the vehicle’s readings and the route as named lists, marks the agent’s case as an article whose state is in its data-status, and reads its timeline as of the demo’s clock. Links and buttons are real a and button elements with the kit’s focus ring.