@burdenoff/microfe-kadaikodi 2026.704.3 → 2026.704.5

package/dist/kadaikodi/pages/worker/TaskDetailsPage.js

@@ -1,66 +1,49 @@
 import { useKadaikodi as e } from "../../context/KadaikodiContext.js";
 import { cn as t } from "../../utils/cn.js";
 import { PageLayout as n } from "../../components/PageLayout.js";
-import { StatusBadge as r } from "../../components/StatusBadge.js";
-import { EmptyState as i } from "../../components/EmptyState.js";
-import { useUpdateWorkerTaskStatus as a, useWorkerTasks as o } from "../../hooks/useKadaikodiApi.js";
+import { EmptyState as r } from "../../components/EmptyState.js";
+import { useUpdateWorkerTask as i, useUpdateWorkerTaskStatus as a, useWorkerTasks as o } from "../../hooks/useKadaikodiApi.js";
 import { formatCurrency as s, formatDate as c } from "../../utils/formatters.js";
-import { useEffect as ee, useMemo as l, useState as u } from "react";
-import { AlertTriangle as d, ArrowLeft as f, Boxes as p, Camera as m, CheckCircle2 as h, ChefHat as g, Circle as _, Clock as v, FileText as y, IndianRupee as b, Loader2 as x, MapPin as S, Navigation as C, Package as w, Phone as T, PlayCircle as E, Save as D, ShoppingBag as O, Sparkles as k, StickyNote as te, Timer as A, Truck as j, User as M } from "lucide-react";
-import { useParams as N } from "react-router-dom";
-import { jsx as P, jsxs as F } from "react/jsx-runtime";
-import { EmphasisPanel as I, NextSteps as L, PagePurpose as R } from "@burdenoff/fe-libs/ui";
+import { Timeline as l } from "../../components/viz/Timeline.js";
+import { StepProgress as u } from "../../components/viz/StepProgress.js";
+import "../../components/viz/index.js";
+import { useEffect as d, useMemo as f, useState as p } from "react";
+import { AlertTriangle as m, ArrowLeft as ee, CheckCircle2 as te, Clock as h, FileText as g, IndianRupee as _, Loader2 as v, MapPin as y, Navigation as b, Package as x, Phone as S, ShoppingBag as C, ShoppingCart as w, StickyNote as T, Truck as E, User as D } from "lucide-react";
+import { useParams as O } from "react-router-dom";
+import { jsx as k, jsxs as A } from "react/jsx-runtime";
+import { GlassCard as j, PagePurpose as M } from "@burdenoff/fe-libs/ui";
 //#region src/kadaikodi/pages/worker/TaskDetailsPage.tsx
-function z(e) {
+var N = {
+	delivery: "Delivery",
+	pickup: "Pickup",
+	service: "Service"
+};
+function P(e) {
 	switch (e) {
-		case "delivery": return j;
-		case "preparation": return g;
-		case "inventory": return p;
-		case "cleanup": return k;
-		case "pickup": return O;
-		case "service": return w;
-		default: return y;
+		case "delivery": return E;
+		case "pickup": return C;
+		case "service": return x;
+		default: return g;
 	}
 }
-function B(e) {
+function F(e) {
 	switch (e) {
-		case "urgent": return "bg-status-error-bg-subtle text-status-error-text";
-		case "high": return "bg-status-warning-bg-subtle text-status-warning-text";
+		case "urgent":
+		case "high": return "bg-status-error-bg-subtle text-status-error-text";
 		case "medium": return "bg-status-warning-bg-subtle text-status-warning-text";
 		case "low": return "bg-status-success-bg-subtle text-status-success-text";
 		default: return "bg-bg-sunken text-text-secondary";
 	}
 }
-function V(e) {
-	return [
-		{
-			status: "assigned",
-			label: "Task Assigned",
-			timestamp: e.assignedTime || null,
-			completed: !0
-		},
-		{
-			status: "in_progress",
-			label: "Work Started",
-			timestamp: null,
-			completed: e.status === "in_progress" || e.status === "completed"
-		},
-		{
-			status: "completed",
-			label: "Task Completed",
-			timestamp: e.status === "completed" ? e.completedAt ?? null : null,
-			completed: e.status === "completed"
-		}
-	];
-}
-function H(e) {
-	return new Date(e).toLocaleTimeString("en-IN", {
+function I(e) {
+	let t = new Date(e);
+	return Number.isNaN(t.getTime()) ? e : t.toLocaleTimeString("en-IN", {
 		hour: "numeric",
 		minute: "2-digit",
 		hour12: !0
 	});
 }
-function U(e) {
+function L(e) {
 	let t = e.deliveryAddress ? [
 		e.deliveryAddress.street,
 		e.deliveryAddress.area,
@@ -89,443 +72,457 @@ function U(e) {
 			phone: e.customerPhone,
 			address: t
 		},
-		orderItems: [],
 		specialInstructions: e.notes ?? void 0,
 		notes: e.notes ?? "",
 		completedAt: e.completedAt
 	};
 }
-function W() {
-	let { taskId: p } = N(), { navigateTo: g, currentUser: w } = e(), { data: k = [], isLoading: j } = o(w?.id ?? ""), W = a(), [G, K] = u(null), [q, J] = u("");
-	ee(() => {
-		let e = k.find((e) => e.id === p);
+var R = [
+	{ label: "Assigned" },
+	{ label: "Picked Up" },
+	{ label: "Delivered" }
+];
+function z(e) {
+	switch (e) {
+		case "pending": return 1;
+		case "in_progress": return 2;
+		case "completed": return 3;
+		default: return 0;
+	}
+}
+function B({ pickupLabel: e, dropLabel: t, distance: n }) {
+	return /* @__PURE__ */ A("div", {
+		className: "relative overflow-hidden rounded-[var(--radius-card)] border border-border-subtle bg-bg-sunken",
+		children: [
+			/* @__PURE__ */ A("svg", {
+				viewBox: "0 0 400 190",
+				className: "block w-full",
+				role: "img",
+				"aria-label": `Illustrative route from ${e} to ${t}`,
+				children: [
+					/* @__PURE__ */ A("g", {
+						stroke: "var(--color-border-subtle)",
+						strokeWidth: "1",
+						opacity: "0.7",
+						children: [/* @__PURE__ */ k("path", { d: "M0 45 H400 M0 95 H400 M0 145 H400" }), /* @__PURE__ */ k("path", { d: "M70 0 V190 M160 0 V190 M250 0 V190 M330 0 V190" })]
+					}),
+					/* @__PURE__ */ k("path", {
+						d: "M70 55 H150 Q165 55 165 70 V120 Q165 135 180 135 H300",
+						fill: "none",
+						stroke: "var(--color-accent-primary)",
+						strokeWidth: "3.5",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeDasharray: "1 0"
+					}),
+					/* @__PURE__ */ k("circle", {
+						cx: "70",
+						cy: "55",
+						r: "7",
+						fill: "var(--color-accent-primary)"
+					}),
+					/* @__PURE__ */ k("circle", {
+						cx: "70",
+						cy: "55",
+						r: "12",
+						fill: "var(--color-accent-primary)",
+						opacity: "0.18"
+					}),
+					/* @__PURE__ */ k("circle", {
+						cx: "300",
+						cy: "135",
+						r: "7",
+						fill: "var(--color-status-success-text)"
+					}),
+					/* @__PURE__ */ k("circle", {
+						cx: "300",
+						cy: "135",
+						r: "12",
+						fill: "var(--color-status-success-text)",
+						opacity: "0.18"
+					})
+				]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "pointer-events-none absolute left-3 top-3 flex items-center gap-1.5 rounded-md bg-bg-surface/85 px-2 py-1 backdrop-blur",
+				children: [/* @__PURE__ */ k(x, { className: "h-3.5 w-3.5 text-accent-primary" }), /* @__PURE__ */ k("span", {
+					className: "max-w-[9rem] truncate text-[11px] font-medium text-text-primary",
+					children: e
+				})]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "pointer-events-none absolute bottom-3 right-3 flex items-center gap-1.5 rounded-md bg-bg-surface/85 px-2 py-1 backdrop-blur",
+				children: [/* @__PURE__ */ k(y, { className: "h-3.5 w-3.5 text-status-success-text" }), /* @__PURE__ */ k("span", {
+					className: "max-w-[9rem] truncate text-[11px] font-medium text-text-primary",
+					children: t
+				})]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "flex items-center justify-between border-t border-border-subtle px-3 py-2",
+				children: [/* @__PURE__ */ k("span", {
+					className: "text-[11px] text-text-muted",
+					children: "Illustrative route · not to scale"
+				}), n != null && /* @__PURE__ */ A("span", {
+					className: "text-[11px] font-medium text-text-secondary tabular-nums",
+					children: [n, " km"]
+				})]
+			})
+		]
+	});
+}
+function V() {
+	let { taskId: y } = O(), { navigateTo: x, currentUser: C } = e(), { data: E = [], isLoading: V } = o(C?.id ?? ""), H = a(), U = i(), [W, G] = p(null), [K, q] = p(""), [J, Y] = p(!1);
+	d(() => {
+		let e = E.find((e) => e.id === y);
 		if (e) {
-			let t = U(e);
-			K(t), J(t.notes ?? "");
-		} else K(null);
-	}, [k, p]);
-	let Y = () => {
-		G && (K({
-			...G,
+			let t = L(e);
+			G(t), q(t.notes ?? "");
+		} else G(null);
+	}, [E, y]);
+	let X = () => {
+		W && (W.status === "pending" ? (G({
+			...W,
 			status: "in_progress"
-		}), W.mutate({
-			taskId: G.id,
+		}), H.mutate({
+			taskId: W.id,
 			status: "IN_PROGRESS"
-		}));
-	}, X = () => {
-		G && (K({
-			...G,
+		})) : W.status === "in_progress" && (G({
+			...W,
 			status: "completed"
-		}), W.mutate({
-			taskId: G.id,
+		}), H.mutate({
+			taskId: W.id,
 			status: "COMPLETED"
-		}));
+		})));
 	}, Z = () => {
-		G?.customerInfo?.phone && (window.location.href = `tel:${G.customerInfo.phone.replace(/\s/g, "")}`);
-	}, Q = () => {
-		if (G?.customerInfo?.address) {
-			let e = encodeURIComponent(G.customerInfo.address);
-			window.open(`https://maps.google.com?q=${e}`, "_blank");
+		W?.customerInfo?.phone && (window.location.href = `tel:${W.customerInfo.phone.replace(/\s/g, "")}`);
+	}, Q = (e) => {
+		e && window.open(`https://maps.google.com?q=${encodeURIComponent(e)}`, "_blank");
+	}, $ = () => {
+		W && (Y(!1), U.mutate({
+			taskId: W.id,
+			notes: K
+		}, { onSuccess: () => {
+			G((e) => e && {
+				...e,
+				notes: K
+			}), Y(!0);
+		} }));
+	}, ne = f(() => W ? [
+		{
+			title: "Task assigned",
+			time: W.assignedTime ? I(W.assignedTime) : void 0,
+			meta: W.assignedBy || void 0,
+			tone: "success"
+		},
+		{
+			title: "Picked up",
+			time: W.status === "in_progress" || W.status === "completed" ? "Done" : void 0,
+			tone: W.status === "in_progress" || W.status === "completed" ? "success" : "muted"
+		},
+		{
+			title: "Delivered",
+			time: W.status === "completed" ? W.completedAt ? I(W.completedAt) : "Done" : void 0,
+			tone: W.status === "completed" ? "success" : "muted"
 		}
-	}, ne = () => {
-		G && (K({
-			...G,
-			notes: q
-		}), alert("Notes saved successfully"));
-	}, $ = l(() => G ? V(G) : [], [G]);
-	if (j) return /* @__PURE__ */ P(n, {
+	] : [], [W]);
+	if (V) return /* @__PURE__ */ k(n, {
 		title: "Task Details",
-		children: /* @__PURE__ */ P("div", {
+		children: /* @__PURE__ */ k("div", {
 			className: "flex items-center justify-center py-24",
-			children: /* @__PURE__ */ F("div", {
+			children: /* @__PURE__ */ A("div", {
 				className: "text-center",
-				children: [/* @__PURE__ */ P(x, { className: "h-10 w-10 animate-spin text-text-secondary mx-auto mb-4" }), /* @__PURE__ */ P("p", {
+				children: [/* @__PURE__ */ k(v, { className: "h-10 w-10 animate-spin text-text-secondary mx-auto mb-4" }), /* @__PURE__ */ k("p", {
 					className: "text-sm text-text-secondary",
 					children: "Loading task details..."
 				})]
 			})
 		})
 	});
-	if (!G) return /* @__PURE__ */ P(n, {
+	if (!W) return /* @__PURE__ */ k(n, {
 		title: "Task Not Found",
-		children: /* @__PURE__ */ P(i, {
-			icon: /* @__PURE__ */ P(y, { className: "h-12 w-12" }),
+		children: /* @__PURE__ */ k(r, {
+			icon: /* @__PURE__ */ k(g, { className: "h-12 w-12" }),
 			title: "Task not found",
-			description: `No task found with ID "${p}".`,
-			action: /* @__PURE__ */ P("button", {
+			description: `No task found with ID "${y}".`,
+			action: /* @__PURE__ */ k("button", {
 				type: "button",
-				onClick: () => g("/worker/orders"),
-				className: "rounded-lg bg-accent px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent/80 transition-colors",
+				onClick: () => x("/worker/orders"),
+				className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg-hover transition-colors",
 				children: "View All Orders"
 			})
 		})
 	});
-	let re = z(G.type);
-	return /* @__PURE__ */ F(n, {
-		title: /* @__PURE__ */ F("div", {
-			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ P("button", {
+	let re = P(W.type), ie = N[W.type] ?? "Task", ae = W.cartName || "Pickup", oe = W.customerInfo.address || W.customerInfo.name || "Drop-off", se = W.status === "pending" ? "Mark Picked Up" : W.status === "in_progress" ? "Mark Delivered" : "Delivered";
+	return /* @__PURE__ */ A(n, {
+		title: /* @__PURE__ */ A("div", {
+			className: "flex items-center gap-3 min-w-0",
+			children: [/* @__PURE__ */ k("button", {
 				type: "button",
-				onClick: () => g("/worker/orders"),
-				className: "rounded-md p-1 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors",
-				children: /* @__PURE__ */ P(f, { className: "h-5 w-5" })
-			}), /* @__PURE__ */ P("span", { children: "Task Details" })]
+				onClick: () => x("/worker/orders"),
+				className: "rounded-md p-1 text-text-secondary hover:bg-bg-sunken hover:text-text-primary transition-colors shrink-0",
+				"aria-label": "Back to orders",
+				children: /* @__PURE__ */ k(ee, { className: "h-5 w-5" })
+			}), /* @__PURE__ */ A("span", {
+				className: "truncate",
+				children: [ie, W.orderId ? /* @__PURE__ */ A("span", {
+					className: "text-text-secondary",
+					children: [" · #", W.orderId]
+				}) : null]
+			})]
 		}),
-		description: "Manage and track your assigned task",
-		children: [
-			/* @__PURE__ */ P(R, {
-				className: "mb-6",
-				children: "Everything you need to complete one assigned task, in order. Use this page to see exactly what to do, reach the customer, navigate to their location, jot down notes, and mark the task started and then completed as you go — so nothing gets missed and your completion stats stay strong."
-			}),
-			/* @__PURE__ */ P(L, {
-				storageKey: "kadaikodi-task-details",
-				className: "mb-6",
-				steps: [
-					{
-						id: "navigate",
-						label: "Head to the location",
-						description: "Open directions to the customer.",
-						onClick: Q
-					},
-					{
-						id: "call",
-						label: "Call the customer",
-						description: "Confirm details before you start.",
-						onClick: Z
-					},
-					{
-						id: "start",
-						label: G.status === "completed" ? "Task completed" : "Start & complete the task",
-						description: G.status === "completed" ? "This task is done — nice work." : "Mark it started, then completed when finished.",
-						onClick: G.status === "completed" ? X : Y,
-						done: G.status === "completed"
-					}
-				]
-			}),
-			/* @__PURE__ */ F("div", {
-				className: "space-y-6",
-				children: [/* @__PURE__ */ F(I, { children: [/* @__PURE__ */ F("div", {
-					className: "flex items-start justify-between mb-4",
-					children: [/* @__PURE__ */ F("div", {
-						className: "flex items-start gap-3",
-						children: [/* @__PURE__ */ P("div", {
-							className: "flex h-10 w-10 items-center justify-center rounded-lg bg-bg-sunken",
-							children: /* @__PURE__ */ P(re, { className: "h-5 w-5 text-text-secondary" })
-						}), /* @__PURE__ */ F("div", { children: [
-							/* @__PURE__ */ P("h2", {
-								className: "text-xl font-bold text-text-primary",
-								children: G.title
-							}),
-							/* @__PURE__ */ P("p", {
-								className: "text-sm text-text-secondary mt-1",
-								children: G.description
-							}),
-							/* @__PURE__ */ F("div", {
-								className: "flex flex-wrap items-center gap-2 mt-3",
+		description: "Everything you need to complete this delivery",
+		children: [/* @__PURE__ */ k(M, {
+			className: "mb-6",
+			children: "One delivery, start to finish. Reach the customer, follow the route, jot a note, and advance the job — mark it picked up, then delivered — so nothing gets missed and your completion stats stay strong."
+		}), /* @__PURE__ */ A("div", {
+			className: "space-y-6",
+			children: [/* @__PURE__ */ A(j, {
+				treatment: "metric",
+				className: "p-5",
+				children: [/* @__PURE__ */ A("div", {
+					className: "mb-4 flex flex-wrap items-center gap-2",
+					children: [
+						/* @__PURE__ */ k("span", {
+							className: "flex h-8 w-8 items-center justify-center rounded-lg bg-accent-primary/12 text-accent-primary",
+							children: /* @__PURE__ */ k(re, { className: "h-4.5 w-4.5" })
+						}),
+						/* @__PURE__ */ k("h2", {
+							className: "text-base font-semibold text-text-primary",
+							children: W.title
+						}),
+						/* @__PURE__ */ k("span", {
+							className: t("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium uppercase", F(W.priority)),
+							children: W.priority
+						})
+					]
+				}), /* @__PURE__ */ k(u, {
+					steps: R,
+					current: z(W.status)
+				})]
+			}), /* @__PURE__ */ A("div", {
+				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+				children: [/* @__PURE__ */ A("div", {
+					className: "lg:col-span-2 space-y-6",
+					children: [
+						/* @__PURE__ */ k(B, {
+							pickupLabel: ae,
+							dropLabel: oe,
+							distance: W.distance
+						}),
+						/* @__PURE__ */ A("div", {
+							className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+							children: [/* @__PURE__ */ A(j, {
+								className: "p-5",
 								children: [
-									/* @__PURE__ */ P("span", {
-										className: t("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium uppercase", B(G.priority)),
-										children: G.priority
+									/* @__PURE__ */ k("p", {
+										className: "text-xs font-medium uppercase tracking-wide text-text-muted",
+										children: "Pickup"
 									}),
-									/* @__PURE__ */ P(r, { status: G.status }),
-									G.estimatedTime > 0 && /* @__PURE__ */ F("span", {
-										className: "text-xs text-text-secondary flex items-center gap-1",
-										children: [
-											/* @__PURE__ */ P(v, { className: "h-3 w-3" }),
-											G.estimatedTime,
-											" min"
-										]
-									})
-								]
-							})
-						] })]
-					}), (G.assignedBy || G.assignedTime) && /* @__PURE__ */ F("div", {
-						className: "text-right shrink-0",
-						children: [
-							/* @__PURE__ */ P("p", {
-								className: "text-xs text-text-secondary",
-								children: "Assigned"
-							}),
-							G.assignedBy && /* @__PURE__ */ P("p", {
-								className: "text-sm font-medium text-text-primary",
-								children: G.assignedBy
-							}),
-							G.assignedTime && /* @__PURE__ */ P("p", {
-								className: "text-xs text-text-secondary mt-1",
-								children: H(G.assignedTime)
-							})
-						]
-					})]
-				}), G.dueTime && G.status !== "completed" && /* @__PURE__ */ P("div", {
-					className: "rounded-md bg-status-warning-bg-subtle border border-status-warning-text/20 p-3",
-					children: /* @__PURE__ */ F("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ P(A, { className: "h-4 w-4 text-status-warning-text shrink-0" }), /* @__PURE__ */ F("span", {
-							className: "text-xs font-medium text-status-warning-text",
-							children: ["Due by ", H(G.dueTime)]
-						})]
-					})
-				})] }), /* @__PURE__ */ F("div", {
-					className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-					children: [/* @__PURE__ */ F("div", {
-						className: "lg:col-span-2 space-y-6",
-						children: [
-							/* @__PURE__ */ F("div", {
-								className: "rounded-lg border border-border-subtle bg-bg-surface p-6",
-								children: [/* @__PURE__ */ P("h3", {
-									className: "text-base font-semibold text-text-primary mb-4",
-									children: "Customer Information"
-								}), /* @__PURE__ */ F("div", {
-									className: "grid grid-cols-1 md:grid-cols-2 gap-5",
-									children: [/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("div", {
-										className: "space-y-3",
-										children: /* @__PURE__ */ F("div", {
-											className: "flex items-center gap-3",
-											children: [/* @__PURE__ */ P("div", {
-												className: "flex h-10 w-10 items-center justify-center rounded-full bg-bg-sunken text-text-secondary",
-												children: /* @__PURE__ */ P(M, { className: "h-5 w-5" })
-											}), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-												className: "text-sm font-medium text-text-primary",
-												children: G.customerInfo.name
-											}), /* @__PURE__ */ P("p", {
-												className: "text-xs text-text-secondary",
-												children: G.customerInfo.phone
-											})] })]
-										})
-									}), /* @__PURE__ */ F("div", {
-										className: "flex gap-2 mt-4",
-										children: [/* @__PURE__ */ F("button", {
-											type: "button",
-											onClick: Z,
-											className: "inline-flex items-center gap-1.5 rounded-md bg-accent px-3 py-2 text-xs font-medium text-text-primary hover:bg-accent/80 transition-colors",
-											children: [/* @__PURE__ */ P(T, { className: "h-3.5 w-3.5" }), "Call Customer"]
-										}), /* @__PURE__ */ F("button", {
+									/* @__PURE__ */ k("p", {
+										className: "mt-1 text-sm font-semibold text-text-primary",
+										children: W.cartName
+									}),
+									W.location && /* @__PURE__ */ k("p", {
+										className: "mt-0.5 text-xs text-text-secondary",
+										children: W.location
+									}),
+									/* @__PURE__ */ k("div", {
+										className: "mt-4",
+										children: /* @__PURE__ */ A("button", {
 											type: "button",
-											onClick: Q,
-											className: "inline-flex items-center gap-1.5 rounded-md bg-accent px-3 py-2 text-xs font-medium text-text-primary hover:bg-accent/80 transition-colors",
-											children: [/* @__PURE__ */ P(C, { className: "h-3.5 w-3.5" }), "Navigate"]
-										})]
-									})] }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-										className: "text-xs text-text-secondary mb-2",
-										children: "Delivery Address"
-									}), /* @__PURE__ */ P("div", {
-										className: "rounded-md bg-bg-sunken/50 p-3",
-										children: /* @__PURE__ */ F("p", {
-											className: "text-xs text-text-primary flex items-start gap-2",
-											children: [/* @__PURE__ */ P(S, { className: "h-3.5 w-3.5 shrink-0 mt-0.5 text-text-secondary" }), G.customerInfo.address]
+											onClick: () => Q(W.location || W.cartName),
+											className: "inline-flex items-center gap-1.5 rounded-md border border-border-default bg-bg-surface px-3 py-2 text-xs font-medium text-text-primary hover:bg-bg-sunken transition-colors",
+											children: [/* @__PURE__ */ k(b, { className: "h-3.5 w-3.5" }), "Navigate"]
 										})
-									})] })]
-								})]
-							}),
-							G.orderItems.length > 0 && /* @__PURE__ */ F("div", {
-								className: "rounded-lg border border-border-subtle bg-bg-surface p-6",
-								children: [/* @__PURE__ */ P("h3", {
-									className: "text-base font-semibold text-text-primary mb-3",
-									children: "Order Items"
-								}), /* @__PURE__ */ P("div", {
-									className: "space-y-2",
-									children: G.orderItems.map((e, t) => /* @__PURE__ */ P("div", {
-										className: "flex items-start justify-between p-3 rounded-md bg-bg-sunken/50",
-										children: /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ F("p", {
-											className: "text-sm font-medium text-text-primary",
-											children: [
-												e.quantity,
-												"x ",
-												e.name
-											]
-										}), e.specialInstructions && /* @__PURE__ */ F("p", {
-											className: "text-xs text-text-secondary mt-0.5",
-											children: ["Note: ", e.specialInstructions]
-										})] })
-									}, t))
-								})]
-							}),
-							G.specialInstructions && /* @__PURE__ */ F("div", {
-								className: "rounded-lg border border-border-subtle bg-bg-surface p-6",
-								children: [/* @__PURE__ */ P("h3", {
-									className: "text-base font-semibold text-text-primary mb-3",
-									children: "Special Instructions"
-								}), /* @__PURE__ */ P("div", {
-									className: "rounded-md bg-status-warning-bg-subtle border border-status-warning-text/20 p-4",
-									children: /* @__PURE__ */ F("p", {
-										className: "text-sm text-status-warning-text flex items-start gap-2",
-										children: [/* @__PURE__ */ P(d, { className: "h-4 w-4 shrink-0 mt-0.5 text-status-warning-text" }), G.specialInstructions]
 									})
-								})]
-							}),
-							G.photos && G.photos.length > 0 && /* @__PURE__ */ F("div", {
-								className: "rounded-lg border border-border-subtle bg-bg-surface p-6",
-								children: [/* @__PURE__ */ F("h3", {
-									className: "text-base font-semibold text-text-primary flex items-center gap-2 mb-3",
-									children: [/* @__PURE__ */ P(m, { className: "h-4 w-4 text-text-secondary" }), "Reference Photos"]
-								}), /* @__PURE__ */ P("div", {
-									className: "grid grid-cols-2 md:grid-cols-3 gap-3",
-									children: G.photos.map((e, t) => /* @__PURE__ */ P("img", {
-										src: e,
-										alt: `Reference ${t + 1}`,
-										className: "w-full h-32 object-cover rounded-lg border border-border-subtle"
-									}, t))
-								})]
-							}),
-							/* @__PURE__ */ F("div", {
-								className: "rounded-lg border border-border-subtle bg-bg-surface p-6",
+								]
+							}), /* @__PURE__ */ A(j, {
+								className: "p-5",
 								children: [
-									/* @__PURE__ */ F("h3", {
-										className: "text-base font-semibold text-text-primary flex items-center gap-2 mb-3",
-										children: [/* @__PURE__ */ P(te, { className: "h-4 w-4 text-text-secondary" }), "Task Notes"]
+									/* @__PURE__ */ k("p", {
+										className: "text-xs font-medium uppercase tracking-wide text-text-muted",
+										children: "Drop"
+									}),
+									/* @__PURE__ */ k("p", {
+										className: "mt-1 text-sm font-semibold text-text-primary",
+										children: W.customerInfo.name || "Customer"
+									}),
+									W.customerInfo.address && /* @__PURE__ */ k("p", {
+										className: "mt-0.5 text-xs text-text-secondary",
+										children: W.customerInfo.address
 									}),
-									/* @__PURE__ */ P("textarea", {
-										value: q,
-										onChange: (e) => J(e.target.value),
-										placeholder: "Add your notes about this task...",
-										rows: 4,
-										className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-border-focus/40 resize-none"
+									W.customerInfo.phone && /* @__PURE__ */ k("p", {
+										className: "mt-0.5 text-xs text-text-secondary",
+										children: W.customerInfo.phone
 									}),
-									/* @__PURE__ */ F("button", {
-										type: "button",
-										onClick: ne,
-										className: "mt-3 inline-flex items-center gap-1.5 rounded-md bg-accent px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-accent/80 transition-colors",
-										children: [/* @__PURE__ */ P(D, { className: "h-3.5 w-3.5" }), "Save Notes"]
+									/* @__PURE__ */ A("div", {
+										className: "mt-4 flex gap-2",
+										children: [W.customerInfo.phone && /* @__PURE__ */ A("button", {
+											type: "button",
+											onClick: Z,
+											className: "inline-flex items-center gap-1.5 rounded-md border border-border-default bg-bg-surface px-3 py-2 text-xs font-medium text-text-primary hover:bg-bg-sunken transition-colors",
+											children: [/* @__PURE__ */ k(S, { className: "h-3.5 w-3.5" }), "Call"]
+										}), W.customerInfo.address && /* @__PURE__ */ A("button", {
+											type: "button",
+											onClick: () => Q(W.customerInfo.address),
+											className: "inline-flex items-center gap-1.5 rounded-md border border-border-default bg-bg-surface px-3 py-2 text-xs font-medium text-text-primary hover:bg-bg-sunken transition-colors",
+											children: [/* @__PURE__ */ k(b, { className: "h-3.5 w-3.5" }), "Navigate"]
+										})]
 									})
 								]
+							})]
+						}),
+						/* @__PURE__ */ k(j, {
+							treatment: "insight",
+							className: "p-5",
+							children: /* @__PURE__ */ A("div", {
+								className: "flex flex-wrap items-center justify-between gap-3",
+								children: [/* @__PURE__ */ A("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ k("span", {
+										className: "flex h-9 w-9 items-center justify-center rounded-lg bg-status-success-bg-subtle text-status-success-text",
+										children: /* @__PURE__ */ k(_, { className: "h-4.5 w-4.5" })
+									}), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
+										className: "text-xs text-text-secondary",
+										children: "You earn"
+									}), /* @__PURE__ */ k("p", {
+										className: "text-lg font-bold text-text-primary",
+										children: s(W.earnings, { minimumFractionDigits: 0 })
+									})] })]
+								}), /* @__PURE__ */ A("div", {
+									className: "flex flex-wrap items-center gap-4 text-sm",
+									children: [/* @__PURE__ */ A("span", {
+										className: "flex items-center gap-1.5 text-text-secondary",
+										children: [/* @__PURE__ */ k(w, { className: "h-4 w-4" }), W.cartName]
+									}), W.dueTime && /* @__PURE__ */ A("span", {
+										className: "flex items-center gap-1.5 text-text-secondary",
+										children: [
+											/* @__PURE__ */ k(h, { className: "h-4 w-4" }),
+											"Due ",
+											I(W.dueTime)
+										]
+									})]
+								})]
 							})
-						]
-					}), /* @__PURE__ */ F("div", {
-						className: "space-y-6",
-						children: [
-							/* @__PURE__ */ F("div", {
-								className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
-								children: [/* @__PURE__ */ P("h3", {
-									className: "text-base font-semibold text-text-primary mb-3",
-									children: "Task Details"
-								}), /* @__PURE__ */ F("div", {
-									className: "space-y-3",
+						}),
+						W.specialInstructions && /* @__PURE__ */ k("div", {
+							className: "rounded-[var(--radius-card)] border border-status-warning-text/20 bg-status-warning-bg-subtle p-4",
+							children: /* @__PURE__ */ A("p", {
+								className: "text-sm text-status-warning-text flex items-start gap-2",
+								children: [/* @__PURE__ */ k(m, { className: "h-4 w-4 shrink-0 mt-0.5" }), W.specialInstructions]
+							})
+						}),
+						/* @__PURE__ */ A(j, {
+							className: "p-5",
+							children: [
+								/* @__PURE__ */ A("h3", {
+									className: "mb-3 flex items-center gap-2 text-sm font-semibold text-text-primary",
+									children: [/* @__PURE__ */ k(T, { className: "h-4 w-4 text-text-secondary" }), "Delivery note"]
+								}),
+								/* @__PURE__ */ k("textarea", {
+									value: K,
+									onChange: (e) => {
+										q(e.target.value), Y(!1);
+									},
+									placeholder: "Add a delivery note...",
+									rows: 3,
+									className: "w-full resize-none rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-border-focus/40"
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "mt-3 flex items-center gap-3",
 									children: [
-										/* @__PURE__ */ F("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ P(y, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-												className: "text-xs text-text-secondary",
-												children: "Order ID"
-											}), /* @__PURE__ */ P("p", {
-												className: "text-sm font-medium font-mono text-text-primary",
-												children: G.orderId
-											})] })]
-										}),
-										/* @__PURE__ */ F("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ P(O, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-												className: "text-xs text-text-secondary",
-												children: "Cart"
-											}), /* @__PURE__ */ P("p", {
-												className: "text-sm font-medium text-text-primary",
-												children: G.cartName
-											})] })]
-										}),
-										G.dueTime && /* @__PURE__ */ F("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ P(v, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-												className: "text-xs text-text-secondary",
-												children: "Due At"
-											}), /* @__PURE__ */ P("p", {
-												className: "text-sm text-text-primary",
-												children: c(G.dueTime)
-											})] })]
-										}),
-										/* @__PURE__ */ F("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ P(b, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-												className: "text-xs text-text-secondary",
-												children: "Earnings"
-											}), /* @__PURE__ */ P("p", {
-												className: "text-sm font-medium text-status-success-text",
-												children: s(G.earnings, { minimumFractionDigits: 0 })
-											})] })]
+										/* @__PURE__ */ A("button", {
+											type: "button",
+											onClick: $,
+											disabled: U.isPending,
+											className: "inline-flex items-center gap-1.5 rounded-md border border-border-default bg-bg-surface px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken transition-colors disabled:opacity-50",
+											children: [U.isPending ? /* @__PURE__ */ k(v, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ k(T, { className: "h-3.5 w-3.5" }), U.isPending ? "Saving..." : "Save note"]
 										}),
-										G.distance != null && /* @__PURE__ */ F("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ P(C, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-												className: "text-xs text-text-secondary",
-												children: "Distance"
-											}), /* @__PURE__ */ F("p", {
-												className: "text-sm text-text-primary",
-												children: [G.distance, " km"]
-											})] })]
+										J && !U.isPending && /* @__PURE__ */ k("span", {
+											className: "text-xs text-status-success-text",
+											children: "Note saved"
 										}),
-										G.assignedTime && /* @__PURE__ */ F("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ P(v, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-												className: "text-xs text-text-secondary",
-												children: "Assigned At"
-											}), /* @__PURE__ */ P("p", {
-												className: "text-sm text-text-primary",
-												children: c(G.assignedTime)
-											})] })]
+										U.isError && /* @__PURE__ */ k("span", {
+											className: "text-xs text-status-error-text",
+											children: "Couldn't save — retry"
 										})
 									]
-								})]
-							}),
-							/* @__PURE__ */ F("div", {
-								className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
-								children: [/* @__PURE__ */ P("h3", {
-									className: "text-base font-semibold text-text-primary mb-4",
-									children: "Status Timeline"
-								}), /* @__PURE__ */ P("div", {
-									className: "relative",
-									children: $.map((e, n) => {
-										let r = n === $.length - 1, i = e.completed ? h : _;
-										return /* @__PURE__ */ F("div", {
-											className: "flex gap-3",
-											children: [/* @__PURE__ */ F("div", {
-												className: "flex flex-col items-center",
-												children: [/* @__PURE__ */ P("div", {
-													className: t("flex h-7 w-7 shrink-0 items-center justify-center rounded-full", e.completed ? "bg-status-success-bg-subtle text-status-success-text" : "bg-bg-sunken text-text-secondary"),
-													children: /* @__PURE__ */ P(i, { className: "h-3.5 w-3.5" })
-												}), !r && /* @__PURE__ */ P("div", { className: t("w-0.5 flex-1 my-1", e.completed ? "bg-status-success-bg-subtle" : "bg-border") })]
-											}), /* @__PURE__ */ F("div", {
-												className: t("pb-5", r && "pb-0"),
-												children: [/* @__PURE__ */ P("p", {
-													className: "text-sm font-medium text-text-primary",
-													children: e.label
-												}), /* @__PURE__ */ P("p", {
-													className: "mt-0.5 text-xs text-text-secondary",
-													children: e.timestamp ? c(e.timestamp) : "Pending"
-												})]
-											})]
-										}, e.status);
-									})
-								})]
-							}),
-							/* @__PURE__ */ F("div", {
-								className: "space-y-3",
-								children: [
-									G.status === "pending" && /* @__PURE__ */ F("button", {
-										type: "button",
-										onClick: Y,
-										className: "w-full inline-flex items-center justify-center gap-2 rounded-lg bg-[var(--color-accent-soft)] px-4 py-3 text-sm font-medium text-text-primary hover:bg-[var(--color-accent-soft)] transition-colors",
-										children: [/* @__PURE__ */ P(E, { className: "h-4 w-4" }), "Start Task"]
-									}),
-									G.status === "in_progress" && /* @__PURE__ */ F("button", {
-										type: "button",
-										onClick: X,
-										className: "w-full inline-flex items-center justify-center gap-2 rounded-lg bg-status-success-bg-subtle px-4 py-3 text-sm font-medium text-status-success-text hover:bg-status-success-bg-subtle transition-colors",
-										children: [/* @__PURE__ */ P(h, { className: "h-4 w-4" }), "Complete Task"]
-									}),
-									/* @__PURE__ */ F("button", {
-										type: "button",
-										onClick: () => g("/worker/orders"),
-										className: "w-full inline-flex items-center justify-center gap-2 rounded-lg bg-accent px-4 py-3 text-sm font-medium text-text-primary hover:bg-accent/80 transition-colors",
-										children: [/* @__PURE__ */ P(f, { className: "h-4 w-4" }), "Back to Tasks"]
-									})
-								]
-							})
-						]
+								})
+							]
+						}),
+						/* @__PURE__ */ A("button", {
+							type: "button",
+							onClick: X,
+							disabled: W.status === "completed" || H.isPending,
+							className: t("w-full inline-flex items-center justify-center gap-2 rounded-[var(--radius-card)] px-4 py-3.5 text-base font-semibold transition-colors", W.status === "completed" ? "bg-status-success-bg-subtle text-status-success-text cursor-default" : "bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-60"),
+							children: [H.isPending ? /* @__PURE__ */ k(v, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ k(te, { className: "h-5 w-5" }), se]
+						})
+					]
+				}), /* @__PURE__ */ A("div", {
+					className: "space-y-6",
+					children: [/* @__PURE__ */ A(j, {
+						className: "p-5",
+						children: [/* @__PURE__ */ k("h3", {
+							className: "mb-3 text-sm font-semibold text-text-primary",
+							children: "Delivery timeline"
+						}), /* @__PURE__ */ k(l, { items: ne })]
+					}), /* @__PURE__ */ A(j, {
+						className: "p-5",
+						children: [/* @__PURE__ */ k("h3", {
+							className: "mb-3 text-sm font-semibold text-text-primary",
+							children: "Job details"
+						}), /* @__PURE__ */ A("dl", {
+							className: "space-y-3 text-sm",
+							children: [
+								W.orderId && /* @__PURE__ */ A("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ k(g, { className: "h-4 w-4 text-text-secondary shrink-0" }), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("dt", {
+										className: "text-xs text-text-secondary",
+										children: "Order ID"
+									}), /* @__PURE__ */ k("dd", {
+										className: "font-mono font-medium text-text-primary",
+										children: W.orderId
+									})] })]
+								}),
+								W.customerInfo.name && /* @__PURE__ */ A("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ k(D, { className: "h-4 w-4 text-text-secondary shrink-0" }), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("dt", {
+										className: "text-xs text-text-secondary",
+										children: "Customer"
+									}), /* @__PURE__ */ k("dd", {
+										className: "font-medium text-text-primary",
+										children: W.customerInfo.name
+									})] })]
+								}),
+								W.distance != null && /* @__PURE__ */ A("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ k(b, { className: "h-4 w-4 text-text-secondary shrink-0" }), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("dt", {
+										className: "text-xs text-text-secondary",
+										children: "Distance"
+									}), /* @__PURE__ */ A("dd", {
+										className: "font-medium text-text-primary",
+										children: [W.distance, " km"]
+									})] })]
+								}),
+								W.assignedTime && /* @__PURE__ */ A("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ k(h, { className: "h-4 w-4 text-text-secondary shrink-0" }), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("dt", {
+										className: "text-xs text-text-secondary",
+										children: "Assigned"
+									}), /* @__PURE__ */ k("dd", {
+										className: "font-medium text-text-primary",
+										children: c(W.assignedTime)
+									})] })]
+								})
+							]
+						})]
 					})]
 				})]
-			})
-		]
+			})]
+		})]
 	});
 }
 //#endregion
-export { W as TaskDetailsPage };
+export { V as TaskDetailsPage };
 
 //# sourceMappingURL=TaskDetailsPage.js.map