配送ルートRouteStopsExperimental

Ordered route / itinerary list: numbered stops with a per-stop status (pending / current / completed / failed / delayed) driving the marker and a status label, a planned-vs-actual time pair with a signed delay, the current stop wired with aria-current, and a trailing actions slot. For delivery tracking, picking walk-paths and any sequenced-stop flow.

佐藤一郎完了2 個
東京都渋谷区神南 1-2-3
予定 09:30実績 09:282分早着
鈴木商店完了5 個
東京都渋谷区宇田川町 4-5
予定 09:50実績 09:588分遅れ
3
高橋花子配送中現在地1 個
東京都渋谷区道玄坂 2-6-7
予定 10:15実績 10:216分遅れ
田中工業不在3 個
東京都渋谷区桜丘町 8-9
予定 10:40
山田太郎遅延1 個
東京都目黒区上目黒 1-1
予定 11:0018分遅れ
6
伊藤ストア未配4 個
東京都目黒区中目黒 3-2
予定 11:25

Props

表は横にスクロールできます

プロパティ	型	初期値	説明
stops	RouteStopItem[]	-	Ordered stops. Each: id / title / description / status / plannedTime / actualTime / delayMinutes / seq / meta / actions.
RouteStopItem.status	"pending" \| "current" \| "completed" \| "failed" \| "delayed"	-	Drives the marker, the status label/Badge, and (for current) aria-current="step". Completed = check, failed = ×, delayed = clock.
RouteStopItem.plannedTime / actualTime	string ("HH:MM")	-	Planned ETA vs actual arrival. A signed delay (Delta) is computed from both when delayMinutes is omitted.
RouteStopItem.delayMinutes	number	-	Delay in minutes (+late / −early). Shown via Delta (late → destructive, early → success).
RouteStopItem.actions	ReactNode	-	Trailing per-stop actions (status update, reschedule).
statusLabels	Partial<Record<RouteStopStatus, string>>	-	Localize the status labels.
hideTimes	boolean	-	Hide the planned / actual time + delay row. Default false.
className	string	-	Additional CSS class names.

Usage

import { RouteStops, type RouteStopItem } from "@gunjo/ui"

const stops: RouteStopItem[] = [
  { id: "1", title: "佐藤 一郎", description: "渋谷区神南 1-2-3",
    status: "completed", plannedTime: "09:30", actualTime: "09:28", meta: "2 個" },
  { id: "3", title: "高橋 花子", description: "渋谷区道玄坂 2-6-7",
    status: "current", plannedTime: "10:15", actualTime: "10:21", meta: "1 個",
    actions: <Button size="sm" variant="outline">完了</Button> },
  { id: "4", title: "田中 工業", status: "failed", plannedTime: "10:40",
    actions: <Button size="sm" variant="outline">再配達を設定</Button> },
  { id: "5", title: "山田 太郎", status: "delayed", plannedTime: "11:00", delayMinutes: 18 },
  { id: "6", title: "伊藤 ストア", status: "pending", plannedTime: "11:25" },
]

<RouteStops stops={stops} />

配送ルートRouteStopsExperimental

プレビュー

Props

Usage