@burdenoff/microfe-movethewheels 2026.704.2 → 2026.713.1

package/dist/pages/RouteDetailsPage.js

@@ -0,0 +1,646 @@
+import { ArrowDown as e } from "../node_modules/lucide-react/dist/esm/icons/arrow-down.js";
+import { ArrowLeft as t } from "../node_modules/lucide-react/dist/esm/icons/arrow-left.js";
+import { ArrowUp as n } from "../node_modules/lucide-react/dist/esm/icons/arrow-up.js";
+import { CircleCheckBig as r } from "../node_modules/lucide-react/dist/esm/icons/circle-check-big.js";
+import { Clock as i } from "../node_modules/lucide-react/dist/esm/icons/clock.js";
+import { Fuel as a } from "../node_modules/lucide-react/dist/esm/icons/fuel.js";
+import { MapPin as o } from "../node_modules/lucide-react/dist/esm/icons/map-pin.js";
+import { Navigation as s } from "../node_modules/lucide-react/dist/esm/icons/navigation.js";
+import { Plus as c } from "../node_modules/lucide-react/dist/esm/icons/plus.js";
+import { Save as l } from "../node_modules/lucide-react/dist/esm/icons/save.js";
+import { SquarePen as u } from "../node_modules/lucide-react/dist/esm/icons/square-pen.js";
+import { Trash2 as d } from "../node_modules/lucide-react/dist/esm/icons/trash-2.js";
+import { Zap as f } from "../node_modules/lucide-react/dist/esm/icons/zap.js";
+import { joinPath as p } from "../utils/navigation.js";
+import { useMoveTheWheels as m } from "../providers/MoveTheWheelsProvider.js";
+import { useFleet as h } from "../hooks/useFleet.js";
+import { useRoute as g, useRoutes as _ } from "../hooks/useRoutes.js";
+import { Badge as v, Button as y, Card as b, CardContent as x, CardHeader as S, CardTitle as C, Input as w, Label as T, Select as E, SelectContent as D, SelectItem as O, SelectTrigger as k, SelectValue as A } from "../components/ui.js";
+import { ErrorState as j, LoadingState as M, PageLayout as ee } from "../components/PageLayout.js";
+import { RouteMap as N } from "../components/maps/RouteMap.js";
+import "../components/maps/index.js";
+import { ROUTE_STATUS_COLORS as P } from "../constants/index.js";
+import { StatusBadge as F } from "../components/StatusBadge.js";
+import { FormError as I } from "../components/FormError.js";
+import { Notice as L, useNotice as R } from "../components/Notice.js";
+import { formatAddress as z, formatCurrency as B, formatDate as V } from "../utils/formatters.js";
+import { firstRealLatLng as H } from "../utils/mapMarkers.js";
+import { useEffect as U, useState as W } from "react";
+import { useLocation as G, useParams as K } from "react-router-dom";
+import { jsx as q, jsxs as J } from "react/jsx-runtime";
+import { EmphasisPanel as Y, NextSteps as X, PagePurpose as Z } from "@burdenoff/fe-libs/ui";
+//#region src/movethewheels/pages/RouteDetailsPage.tsx
+var Q = [
+	{
+		value: "planned",
+		label: "Planned"
+	},
+	{
+		value: "in_progress",
+		label: "In Progress"
+	},
+	{
+		value: "completed",
+		label: "Completed"
+	},
+	{
+		value: "cancelled",
+		label: "Cancelled"
+	}
+];
+function $({ editId: r }) {
+	let { basePath: i, navigate: a } = m(), { createRoute: o, updateRoute: u } = _(), { route: f } = g(r), { vehicles: v, drivers: j } = h(), M = !!r, [N, P] = W({
+		name: "",
+		status: "planned",
+		vehicleId: "",
+		driverId: "",
+		stops: [{
+			address: "",
+			type: "delivery"
+		}]
+	}), [F, L] = W(!1), [R, B] = W(null);
+	U(() => {
+		!r || !f || P({
+			name: f.name || "",
+			status: f.status,
+			vehicleId: f.vehicleId || "",
+			driverId: f.driverId || "",
+			stops: f.stops.length > 0 ? f.stops.map((e) => ({
+				address: z(e.address) || e.address.street || "",
+				type: e.type
+			})) : [{
+				address: "",
+				type: "delivery"
+			}]
+		});
+	}, [r, f]);
+	let V = () => a?.(p(i, "routes")), H = () => P((e) => ({
+		...e,
+		stops: [...e.stops, {
+			address: "",
+			type: "delivery"
+		}]
+	})), G = (e) => P((t) => ({
+		...t,
+		stops: t.stops.filter((t, n) => n !== e)
+	})), K = (e, t, n) => P((r) => ({
+		...r,
+		stops: r.stops.map((r, i) => i === e ? {
+			...r,
+			[t]: n
+		} : r)
+	})), X = (e, t) => P((n) => {
+		let r = e + t;
+		if (r < 0 || r >= n.stops.length) return n;
+		let i = [...n.stops];
+		return [i[e], i[r]] = [i[r], i[e]], {
+			...n,
+			stops: i
+		};
+	}), $ = async (e) => {
+		if (e.preventDefault(), !N.name.trim()) {
+			B("Route name is required.");
+			return;
+		}
+		let t = N.stops.filter((e) => e.address.trim());
+		if (t.length === 0) {
+			B("Add at least one stop with an address.");
+			return;
+		}
+		L(!0), B(null);
+		try {
+			let e = t.map((e, t) => ({
+				id: `stop-${t + 1}`,
+				orderId: "",
+				sequence: t + 1,
+				address: {
+					street: e.address.trim(),
+					city: "",
+					state: "",
+					postalCode: "",
+					country: ""
+				},
+				type: e.type,
+				scheduledTime: /* @__PURE__ */ new Date(),
+				duration: 0,
+				status: "pending"
+			}));
+			if (M) {
+				let t = await u(r, {
+					name: N.name.trim(),
+					status: N.status,
+					vehicleId: N.vehicleId || void 0,
+					driverId: N.driverId || void 0,
+					stops: e
+				});
+				a?.(p(i, `routes/${t.id}`));
+				return;
+			}
+			let n = await o({
+				name: N.name.trim(),
+				status: N.status,
+				vehicleId: N.vehicleId || void 0,
+				driverId: N.driverId || void 0,
+				stops: e
+			});
+			a?.(p(i, `routes/${n.id}`));
+		} catch (e) {
+			console.error("Failed to create route:", e), B(e instanceof Error ? e.message : "Failed to create route. Please try again."), L(!1);
+		}
+	};
+	return /* @__PURE__ */ J(ee, {
+		title: M ? "Edit Route" : "Create Route",
+		subtitle: "Plan a new delivery route",
+		icon: /* @__PURE__ */ q(s, { size: 24 }),
+		headerActions: /* @__PURE__ */ J("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ J(y, {
+				variant: "outline",
+				onClick: V,
+				disabled: F,
+				children: [/* @__PURE__ */ q(t, { size: 16 }), " Cancel"]
+			}), /* @__PURE__ */ J(y, {
+				onClick: $,
+				disabled: F,
+				children: [
+					/* @__PURE__ */ q(l, { size: 16 }),
+					" ",
+					M ? F ? "Saving..." : "Save Changes" : F ? "Saving..." : "Create Route"
+				]
+			})]
+		}),
+		children: [/* @__PURE__ */ q(Z, {
+			icon: /* @__PURE__ */ q(s, { size: 18 }),
+			children: "Plan a new delivery route — name it, list the stops to visit, and optionally assign a vehicle and driver. Once created you can optimize it to sequence the stops into the shortest run."
+		}), /* @__PURE__ */ J("form", {
+			onSubmit: $,
+			className: "max-w-3xl space-y-6",
+			children: [
+				/* @__PURE__ */ q(I, { message: R }),
+				/* @__PURE__ */ J(Y, { children: [/* @__PURE__ */ q("h2", {
+					className: "text-base font-semibold text-text-primary mb-4",
+					children: "Route Details"
+				}), /* @__PURE__ */ J("div", {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ J("div", {
+						className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+						children: [/* @__PURE__ */ J("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ J(T, {
+								htmlFor: "name",
+								children: ["Route Name ", /* @__PURE__ */ q("span", {
+									className: "text-status-error-text",
+									children: "*"
+								})]
+							}), /* @__PURE__ */ q(w, {
+								id: "name",
+								value: N.name,
+								onChange: (e) => P((t) => ({
+									...t,
+									name: e.target.value
+								})),
+								placeholder: "Downtown morning run",
+								required: !0
+							})]
+						}), /* @__PURE__ */ J("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ q(T, {
+								htmlFor: "status",
+								children: "Status"
+							}), /* @__PURE__ */ J(E, {
+								value: N.status,
+								onValueChange: (e) => P((t) => ({
+									...t,
+									status: e
+								})),
+								children: [/* @__PURE__ */ q(k, {
+									id: "status",
+									children: /* @__PURE__ */ q(A, {})
+								}), /* @__PURE__ */ q(D, { children: Q.map((e) => /* @__PURE__ */ q(O, {
+									value: e.value,
+									children: e.label
+								}, e.value)) })]
+							})]
+						})]
+					}), /* @__PURE__ */ J("div", {
+						className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+						children: [/* @__PURE__ */ J("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ q(T, {
+								htmlFor: "vehicle",
+								children: "Vehicle (optional)"
+							}), /* @__PURE__ */ J(E, {
+								value: N.vehicleId,
+								onValueChange: (e) => P((t) => ({
+									...t,
+									vehicleId: e
+								})),
+								children: [/* @__PURE__ */ q(k, {
+									id: "vehicle",
+									children: /* @__PURE__ */ q(A, { placeholder: "Assign later" })
+								}), /* @__PURE__ */ q(D, { children: v.map((e) => /* @__PURE__ */ J(O, {
+									value: e.id,
+									children: [
+										e.vehicleNumber,
+										" (",
+										e.type,
+										")"
+									]
+								}, e.id)) })]
+							})]
+						}), /* @__PURE__ */ J("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ q(T, {
+								htmlFor: "driver",
+								children: "Driver (optional)"
+							}), /* @__PURE__ */ J(E, {
+								value: N.driverId,
+								onValueChange: (e) => P((t) => ({
+									...t,
+									driverId: e
+								})),
+								children: [/* @__PURE__ */ q(k, {
+									id: "driver",
+									children: /* @__PURE__ */ q(A, { placeholder: "Assign later" })
+								}), /* @__PURE__ */ q(D, { children: j.map((e) => /* @__PURE__ */ J(O, {
+									value: e.id,
+									children: [
+										e.fullName,
+										" (",
+										e.employeeId,
+										")"
+									]
+								}, e.id)) })]
+							})]
+						})]
+					})]
+				})] }),
+				/* @__PURE__ */ J(b, { children: [/* @__PURE__ */ J(S, {
+					className: "flex flex-row items-center justify-between",
+					children: [/* @__PURE__ */ J(C, { children: ["Stops ", /* @__PURE__ */ q("span", {
+						className: "text-status-error-text",
+						children: "*"
+					})] }), /* @__PURE__ */ J(y, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						onClick: H,
+						children: [/* @__PURE__ */ q(c, { size: 16 }), " Add Stop"]
+					})]
+				}), /* @__PURE__ */ q(x, {
+					className: "space-y-4",
+					children: N.stops.map((t, r) => /* @__PURE__ */ J("div", {
+						className: "grid grid-cols-1 md:grid-cols-12 gap-3 items-end",
+						children: [
+							/* @__PURE__ */ J("div", {
+								className: "md:col-span-7 space-y-2",
+								children: [/* @__PURE__ */ J(T, {
+									htmlFor: `stop-address-${r}`,
+									children: [
+										"Stop ",
+										r + 1,
+										" address"
+									]
+								}), /* @__PURE__ */ q(w, {
+									id: `stop-address-${r}`,
+									value: t.address,
+									onChange: (e) => K(r, "address", e.target.value),
+									placeholder: "123 Main St, San Francisco, CA"
+								})]
+							}),
+							/* @__PURE__ */ J("div", {
+								className: "md:col-span-4 space-y-2",
+								children: [/* @__PURE__ */ q(T, {
+									htmlFor: `stop-type-${r}`,
+									children: "Type"
+								}), /* @__PURE__ */ J(E, {
+									value: t.type,
+									onValueChange: (e) => K(r, "type", e),
+									children: [/* @__PURE__ */ q(k, {
+										id: `stop-type-${r}`,
+										children: /* @__PURE__ */ q(A, {})
+									}), /* @__PURE__ */ J(D, { children: [/* @__PURE__ */ q(O, {
+										value: "pickup",
+										children: "Pickup"
+									}), /* @__PURE__ */ q(O, {
+										value: "delivery",
+										children: "Delivery"
+									})] })]
+								})]
+							}),
+							/* @__PURE__ */ J("div", {
+								className: "md:col-span-1 flex justify-end gap-1",
+								children: [
+									/* @__PURE__ */ q(y, {
+										type: "button",
+										variant: "ghost",
+										size: "icon",
+										onClick: () => X(r, -1),
+										disabled: r === 0,
+										"aria-label": `Move stop ${r + 1} up`,
+										children: /* @__PURE__ */ q(n, { size: 16 })
+									}),
+									/* @__PURE__ */ q(y, {
+										type: "button",
+										variant: "ghost",
+										size: "icon",
+										onClick: () => X(r, 1),
+										disabled: r === N.stops.length - 1,
+										"aria-label": `Move stop ${r + 1} down`,
+										children: /* @__PURE__ */ q(e, { size: 16 })
+									}),
+									/* @__PURE__ */ q(y, {
+										type: "button",
+										variant: "ghost",
+										size: "icon",
+										className: "text-status-error-text",
+										onClick: () => G(r),
+										disabled: N.stops.length === 1,
+										"aria-label": `Remove stop ${r + 1}`,
+										children: /* @__PURE__ */ q(d, { size: 16 })
+									})
+								]
+							})
+						]
+					}, r))
+				})] })
+			]
+		})]
+	});
+}
+function te() {
+	let { routeId: e } = K(), n = G().pathname.endsWith("/edit"), { basePath: c, navigate: l } = m(), { route: d, isLoading: h, error: w, refetch: T } = g(e), { optimizeRoute: E } = _(), { message: D, notify: O } = R(), [k, A] = W(null), [U, Q] = W(!1), te = () => l?.(p(c, "routes")), ne = (e) => l?.(p(c, e)), re = async () => {
+		if (e) {
+			Q(!0), A(null);
+			try {
+				await E(e), O("Route optimized — stops resequenced for the shortest run."), T();
+			} catch (e) {
+				A(e instanceof Error ? e.message : "Failed to optimize route.");
+			} finally {
+				Q(!1);
+			}
+		}
+	};
+	if (!e) return /* @__PURE__ */ q($, {});
+	if (n) return /* @__PURE__ */ q($, { editId: e });
+	if (h) return /* @__PURE__ */ q(M, { message: "Loading route details..." });
+	if (w || !d) return /* @__PURE__ */ q(j, {
+		title: "Route not found",
+		onRetry: T
+	});
+	let ie = d.stops.map((e) => {
+		let t = H(e.address);
+		return t ? {
+			lat: t.lat,
+			lng: t.lng,
+			sequence: e.sequence,
+			label: z(e.address) || `Order #${e.orderId || e.sequence}`
+		} : null;
+	}).filter((e) => e !== null);
+	return /* @__PURE__ */ J(ee, {
+		title: d.name,
+		subtitle: `${d.stops.length} stops - ${d.distance.toFixed(1)} km`,
+		icon: /* @__PURE__ */ q(s, { size: 24 }),
+		headerActions: /* @__PURE__ */ J("div", {
+			className: "flex gap-2",
+			children: [
+				/* @__PURE__ */ J(y, {
+					variant: "outline",
+					onClick: te,
+					children: [/* @__PURE__ */ q(t, { size: 16 }), " Back"]
+				}),
+				!d.optimized && /* @__PURE__ */ J(y, {
+					variant: "outline",
+					onClick: re,
+					disabled: U,
+					children: [
+						/* @__PURE__ */ q(f, { size: 16 }),
+						" ",
+						U ? "Optimizing…" : "Optimize"
+					]
+				}),
+				/* @__PURE__ */ J(y, {
+					onClick: () => l?.(p(c, `routes/${e}/edit`)),
+					children: [/* @__PURE__ */ q(u, { size: 16 }), " Edit"]
+				})
+			]
+		}),
+		headerContent: /* @__PURE__ */ J("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ q(F, {
+				status: d.status,
+				customColors: P[d.status]
+			}), /* @__PURE__ */ q(v, {
+				variant: d.optimized ? "default" : "secondary",
+				children: d.optimized ? "Optimized" : "Not Optimized"
+			})]
+		}),
+		children: [
+			/* @__PURE__ */ q(Z, {
+				icon: /* @__PURE__ */ q(s, { size: 18 }),
+				children: "A single optimized driving plan that chains together this route's stops. Review the sequence, distance and timing here, re-optimize if traffic or stops change, then hand the itinerary to a driver."
+			}),
+			/* @__PURE__ */ q(X, {
+				storageKey: "movethewheels-route-details",
+				steps: [
+					...d.optimized ? [] : [{
+						id: "optimize",
+						label: "Optimize this route",
+						description: "Reorder stops to cut distance and driving time.",
+						icon: /* @__PURE__ */ q(f, { size: 16 }),
+						onClick: re
+					}],
+					{
+						id: "edit",
+						label: "Adjust stops",
+						description: "Add, remove or reorder the delivery stops.",
+						icon: /* @__PURE__ */ q(u, { size: 16 }),
+						onClick: () => {}
+					},
+					{
+						id: "orders",
+						label: "Review the orders on this route",
+						description: "Check the deliveries bundled into this run.",
+						icon: /* @__PURE__ */ q(o, { size: 16 }),
+						onClick: () => ne("orders")
+					}
+				]
+			}),
+			k && /* @__PURE__ */ q("div", {
+				className: "mb-2",
+				children: /* @__PURE__ */ q(I, { message: k })
+			}),
+			D && /* @__PURE__ */ q("div", {
+				className: "mb-2",
+				children: /* @__PURE__ */ q(L, { message: D })
+			}),
+			/* @__PURE__ */ J("div", {
+				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+				children: [/* @__PURE__ */ J("div", {
+					className: "lg:col-span-2 space-y-6",
+					children: [/* @__PURE__ */ J(b, { children: [/* @__PURE__ */ q(S, { children: /* @__PURE__ */ q(C, { children: "Route Map" }) }), /* @__PURE__ */ q(x, { children: ie.length > 0 ? /* @__PURE__ */ q(N, {
+						className: "overflow-hidden rounded-lg border border-border-seam",
+						height: 360,
+						stops: ie
+					}) : /* @__PURE__ */ J("div", {
+						className: "rounded-lg border border-border-seam bg-bg-sunken/40 p-4",
+						children: [/* @__PURE__ */ q("p", {
+							className: "mb-3 text-sm text-text-secondary",
+							children: "These stops don't have map coordinates yet — showing the planned sequence instead."
+						}), /* @__PURE__ */ q("ol", {
+							className: "space-y-2",
+							children: d.stops.map((e) => /* @__PURE__ */ J("li", {
+								className: "flex items-start gap-3",
+								children: [/* @__PURE__ */ q("span", {
+									className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-action-primary-bg/10 text-xs font-semibold text-primary",
+									children: e.sequence
+								}), /* @__PURE__ */ q("span", {
+									className: "text-sm",
+									children: z(e.address) || `Order #${e.orderId || e.sequence}`
+								})]
+							}, e.id))
+						})]
+					}) })] }), /* @__PURE__ */ J(b, { children: [/* @__PURE__ */ q(S, { children: /* @__PURE__ */ J(C, { children: [
+						"Stops (",
+						d.stops.length,
+						")"
+					] }) }), /* @__PURE__ */ q(x, { children: /* @__PURE__ */ q("div", {
+						className: "space-y-4",
+						children: d.stops.map((e, t) => /* @__PURE__ */ J("div", {
+							className: "flex gap-4",
+							children: [/* @__PURE__ */ J("div", {
+								className: "relative",
+								children: [/* @__PURE__ */ q("div", {
+									className: `w-8 h-8 rounded-full flex items-center justify-center ${e.status === "completed" ? "bg-status-success-text text-text-inverse" : "bg-bg-sunken"}`,
+									children: e.status === "completed" ? /* @__PURE__ */ q(r, { size: 16 }) : e.sequence
+								}), t < d.stops.length - 1 && /* @__PURE__ */ q("div", { className: "absolute top-8 left-4 w-px h-12 bg-border" })]
+							}), /* @__PURE__ */ q("div", {
+								className: "flex-1 pb-4",
+								children: /* @__PURE__ */ J("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ J("div", { children: [/* @__PURE__ */ J("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ q(v, {
+											variant: e.type === "pickup" ? "secondary" : "default",
+											className: "capitalize",
+											children: e.type
+										}), /* @__PURE__ */ J("span", {
+											className: "font-medium",
+											children: ["Order #", e.orderId]
+										})]
+									}), /* @__PURE__ */ q("p", {
+										className: "text-sm text-text-secondary mt-1",
+										children: z(e.address)
+									})] }), /* @__PURE__ */ J("div", {
+										className: "text-right",
+										children: [
+											/* @__PURE__ */ J("p", {
+												className: "text-sm",
+												children: ["Scheduled: ", V(e.scheduledTime, "time")]
+											}),
+											e.actualTime && /* @__PURE__ */ J("p", {
+												className: "text-sm text-status-success-text",
+												children: ["Actual: ", V(e.actualTime, "time")]
+											}),
+											/* @__PURE__ */ J("p", {
+												className: "text-xs text-text-secondary",
+												children: [e.duration, " min stop"]
+											})
+										]
+									})]
+								})
+							})]
+						}, e.id))
+					}) })] })]
+				}), /* @__PURE__ */ J("div", {
+					className: "space-y-6",
+					children: [
+						/* @__PURE__ */ J(Y, {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ q("h2", {
+									className: "text-base font-semibold text-text-primary",
+									children: "Route Info"
+								}),
+								/* @__PURE__ */ J("div", { children: [/* @__PURE__ */ q("p", {
+									className: "text-sm text-text-secondary",
+									children: "Total Distance"
+								}), /* @__PURE__ */ J("p", {
+									className: "text-2xl font-bold",
+									children: [d.distance.toFixed(1), /* @__PURE__ */ q("span", {
+										className: "text-sm font-normal",
+										children: " km"
+									})]
+								})] }),
+								/* @__PURE__ */ J("div", { children: [/* @__PURE__ */ q("p", {
+									className: "text-sm text-text-secondary",
+									children: "Est. Duration"
+								}), /* @__PURE__ */ J("p", {
+									className: "text-2xl font-bold",
+									children: [d.estimatedDuration, /* @__PURE__ */ q("span", {
+										className: "text-sm font-normal",
+										children: " min"
+									})]
+								})] }),
+								d.fuelCost !== void 0 && /* @__PURE__ */ J("div", { children: [/* @__PURE__ */ J("p", {
+									className: "text-sm text-text-secondary flex items-center gap-1",
+									children: [/* @__PURE__ */ q(a, { size: 14 }), " Est. Fuel Cost"]
+								}), /* @__PURE__ */ q("p", {
+									className: "text-2xl font-bold",
+									children: B(d.fuelCost)
+								})] }),
+								d.actualDuration && /* @__PURE__ */ J("div", { children: [/* @__PURE__ */ q("p", {
+									className: "text-sm text-text-secondary",
+									children: "Actual Duration"
+								}), /* @__PURE__ */ J("p", {
+									className: "text-2xl font-bold",
+									children: [d.actualDuration, /* @__PURE__ */ q("span", {
+										className: "text-sm font-normal",
+										children: " min"
+									})]
+								})] })
+							]
+						}),
+						/* @__PURE__ */ J(b, { children: [/* @__PURE__ */ q(S, { children: /* @__PURE__ */ J(C, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ q(i, { size: 18 }), " Timeline"]
+						}) }), /* @__PURE__ */ J(x, {
+							className: "space-y-3",
+							children: [
+								d.startTime && /* @__PURE__ */ J("div", { children: [/* @__PURE__ */ q("p", {
+									className: "text-sm text-text-secondary",
+									children: "Started"
+								}), /* @__PURE__ */ q("p", { children: V(d.startTime, "full") })] }),
+								d.endTime && /* @__PURE__ */ J("div", { children: [/* @__PURE__ */ q("p", {
+									className: "text-sm text-text-secondary",
+									children: "Completed"
+								}), /* @__PURE__ */ q("p", { children: V(d.endTime, "full") })] }),
+								/* @__PURE__ */ J("div", { children: [/* @__PURE__ */ q("p", {
+									className: "text-sm text-text-secondary",
+									children: "Created"
+								}), /* @__PURE__ */ q("p", { children: V(d.createdAt, "full") })] })
+							]
+						})] }),
+						d.trafficConditions.length > 0 && /* @__PURE__ */ J(b, { children: [/* @__PURE__ */ q(S, { children: /* @__PURE__ */ q(C, { children: "Traffic Conditions" }) }), /* @__PURE__ */ q(x, { children: d.trafficConditions.map((e, t) => /* @__PURE__ */ J("div", {
+							className: `p-2 rounded mb-2 ${e.condition === "severe" ? "bg-status-error-bg-subtle" : (e.condition, "bg-status-warning-bg-subtle")}`,
+							children: [/* @__PURE__ */ J("p", {
+								className: "text-sm font-medium capitalize",
+								children: [e.condition, " traffic"]
+							}), /* @__PURE__ */ J("p", {
+								className: "text-xs text-text-secondary",
+								children: [
+									e.location,
+									" - +",
+									e.delay,
+									" min delay"
+								]
+							})]
+						}, t)) })] })
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { te as default };