@burdenoff/microfe-subscriberbot 2026.625.1 → 2026.626.2

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

@@ -3,24 +3,25 @@ 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 { formatCurrency as a, formatDate as o } from "../../utils/formatters.js";
-import { useCallback as s, useEffect as c, 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 A, Timer as j, Truck as M, User as N } from "lucide-react";
+import { formatCurrency as ee, formatDate as a } from "../../utils/formatters.js";
+import { useCallback as o, useEffect as s, useMemo as c, useState as l } from "react";
+import { AlertTriangle as u, ArrowLeft as d, Boxes as f, Camera as p, CheckCircle2 as m, ChefHat as h, Circle as g, ClipboardList 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 A, Timer as j, Truck as M, User as N } from "lucide-react";
 import { useParams as P } from "react-router-dom";
 import { jsx as F, jsxs as I } from "react/jsx-runtime";
+import { EmphasisPanel as L, NextSteps as R, PagePurpose as z } from "@burdenoff/fe-libs/ui";
 //#region src/subscriberbot/pages/worker/TaskDetailsPage.tsx
-function L(e) {
+function B(e) {
 	switch (e) {
 		case "delivery": return M;
-		case "preparation": return g;
-		case "inventory": return p;
+		case "preparation": return h;
+		case "inventory": return f;
 		case "cleanup": return k;
 		case "pickup": return O;
 		case "service": return w;
 		default: return y;
 	}
 }
-function R(e) {
+function V(e) {
 	switch (e) {
 		case "urgent": return "bg-status-error-bg/20 text-status-error-text";
 		case "high": return "bg-status-warning-bg/20 text-status-warning-text";
@@ -29,7 +30,7 @@ function R(e) {
 		default: return "bg-secondary text-secondary-foreground";
 	}
 }
-function z(e) {
+function H(e) {
 	let t = e.assignedTime, n = e.status === "in_progress" || e.status === "completed" ? new Date(new Date(t).getTime() + 15 * 6e4).toISOString() : null, r = e.status === "completed" ? (/* @__PURE__ */ new Date()).toISOString() : null;
 	return [
 		{
@@ -52,18 +53,18 @@ function z(e) {
 		}
 	];
 }
-function B(e) {
+function U(e) {
 	return new Date(e).toLocaleTimeString("en-IN", {
 		hour: "numeric",
 		minute: "2-digit",
 		hour12: !0
 	});
 }
-function V() {
-	let { taskId: p } = P(), { navigateTo: g } = e(), [w, k] = u(null), [M, V] = u(!0), [H, U] = u(""), W = s(() => {
-		V(!0), setTimeout(() => {
+function W() {
+	let { taskId: f } = P(), { navigateTo: h } = e(), [w, k] = l(null), [M, W] = l(!0), [G, K] = l(""), q = o(() => {
+		W(!0), setTimeout(() => {
 			let e = {
-				id: p || "TASK-001",
+				id: f || "TASK-001",
 				orderId: "ORD-123",
 				cartId: "cart-001",
 				cartName: "South Indian Express",
@@ -97,35 +98,35 @@ function V() {
 				photos: ["https://images.unsplash.com/photo-1630384060421-cb20d0e0649d?w=400", "https://images.unsplash.com/photo-1572802419224-296b0aeee0d9?w=400"],
 				notes: ""
 			};
-			k(e), U(e.notes || ""), V(!1);
+			k(e), K(e.notes || ""), W(!1);
 		}, 600);
-	}, [p]);
-	c(() => {
-		W();
-	}, [W]);
-	let G = () => {
+	}, [f]);
+	s(() => {
+		q();
+	}, [q]);
+	let J = () => {
 		w && (k({
 			...w,
 			status: "in_progress"
 		}), alert("Task started successfully"));
-	}, K = () => {
+	}, Y = () => {
 		w && (k({
 			...w,
 			status: "completed"
 		}), alert("Task completed successfully"));
-	}, q = () => {
+	}, X = () => {
 		w?.customerInfo?.phone && (window.location.href = `tel:${w.customerInfo.phone.replace(/\s/g, "")}`);
-	}, J = () => {
+	}, Z = () => {
 		if (w?.customerInfo?.address) {
 			let e = encodeURIComponent(w.customerInfo.address);
 			window.open(`https://maps.google.com?q=${e}`, "_blank");
 		}
-	}, Y = () => {
+	}, Q = () => {
 		w && (k({
 			...w,
-			notes: H
+			notes: G
 		}), alert("Notes saved successfully"));
-	}, X = l(() => w ? z(w) : [], [w]);
+	}, $ = c(() => w ? H(w) : [], [w]);
 	if (M) return /* @__PURE__ */ F(n, {
 		title: "Task Details",
 		children: /* @__PURE__ */ F("div", {
@@ -145,38 +146,74 @@ function V() {
 			illustration: "empty-generic",
 			icon: /* @__PURE__ */ F(y, { className: "h-12 w-12" }),
 			title: "Task not found",
-			description: `No task found with ID "${p}".`,
+			description: `No task found with ID "${f}".`,
 			action: /* @__PURE__ */ F("button", {
 				type: "button",
-				onClick: () => g("/worker/orders"),
+				onClick: () => h("/worker/orders"),
 				className: "rounded-lg bg-accent px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent/80 transition-colors",
 				children: "View All Orders"
 			})
 		})
 	});
-	let Z = L(w.type);
+	let te = B(w.type);
 	return /* @__PURE__ */ F(n, {
 		title: /* @__PURE__ */ I("div", {
 			className: "flex items-center gap-3",
 			children: [/* @__PURE__ */ F("button", {
 				type: "button",
-				onClick: () => g("/worker/orders"),
+				onClick: () => h("/worker/orders"),
 				className: "rounded-md p-1 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors",
-				children: /* @__PURE__ */ F(f, { className: "h-5 w-5" })
+				children: /* @__PURE__ */ F(d, { className: "h-5 w-5" })
 			}), /* @__PURE__ */ F("span", { children: "Task Details" })]
 		}),
 		description: "Manage and track your assigned task",
 		children: /* @__PURE__ */ I("div", {
 			className: "space-y-6",
-			children: [/* @__PURE__ */ I("div", {
-				className: "rounded-lg border border-border-seam bg-bg-surface p-6 shadow-sm",
-				children: [/* @__PURE__ */ I("div", {
+			children: [
+				/* @__PURE__ */ F(z, {
+					icon: /* @__PURE__ */ F(_, { className: "h-4 w-4" }),
+					children: "Everything you need to complete one assigned task. See what's being asked, where to go and who to contact, then work it through its stages — start it when you begin, log notes as you go, and mark it complete when you're done. Keeping the status current lets the customer and your cart owner track progress in real time."
+				}),
+				/* @__PURE__ */ F(R, {
+					storageKey: "subscriberbot-task-details",
+					steps: [
+						{
+							id: "start-task",
+							label: "Start this task",
+							description: "Mark it in progress so everyone knows you are on it.",
+							icon: /* @__PURE__ */ F(E, { className: "h-4 w-4" }),
+							onClick: J
+						},
+						{
+							id: "navigate",
+							label: "Navigate to the location",
+							description: "Get directions to the customer or pickup point.",
+							icon: /* @__PURE__ */ F(C, { className: "h-4 w-4" }),
+							onClick: Z
+						},
+						{
+							id: "call-customer",
+							label: "Call the customer",
+							description: "Confirm details or let them know your ETA.",
+							icon: /* @__PURE__ */ F(T, { className: "h-4 w-4" }),
+							onClick: X
+						},
+						{
+							id: "complete-task",
+							label: "Mark it complete",
+							description: "Wrap up and log the task once finished.",
+							icon: /* @__PURE__ */ F(m, { className: "h-4 w-4" }),
+							onClick: Y
+						}
+					]
+				}),
+				/* @__PURE__ */ I(L, { children: [/* @__PURE__ */ I("div", {
 					className: "flex items-start justify-between mb-4",
 					children: [/* @__PURE__ */ I("div", {
 						className: "flex items-start gap-3",
 						children: [/* @__PURE__ */ F("div", {
 							className: "flex h-10 w-10 items-center justify-center rounded-lg bg-bg-sunken",
-							children: /* @__PURE__ */ F(Z, { className: "h-5 w-5 text-text-secondary" })
+							children: /* @__PURE__ */ F(te, { className: "h-5 w-5 text-text-secondary" })
 						}), /* @__PURE__ */ I("div", { children: [
 							/* @__PURE__ */ F("h2", {
 								className: "text-xl font-bold text-text-primary",
@@ -190,7 +227,7 @@ function V() {
 								className: "flex flex-wrap items-center gap-2 mt-3",
 								children: [
 									/* @__PURE__ */ F("span", {
-										className: t("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium uppercase", R(w.priority)),
+										className: t("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium uppercase", V(w.priority)),
 										children: w.priority
 									}),
 									/* @__PURE__ */ F(r, { status: w.status }),
@@ -218,7 +255,7 @@ function V() {
 							}),
 							/* @__PURE__ */ F("p", {
 								className: "text-xs text-text-secondary mt-1",
-								children: B(w.assignedTime)
+								children: U(w.assignedTime)
 							})
 						]
 					})]
@@ -228,270 +265,271 @@ function V() {
 						className: "flex items-center gap-2",
 						children: [/* @__PURE__ */ F(j, { className: "h-4 w-4 text-status-warning-text shrink-0" }), /* @__PURE__ */ I("span", {
 							className: "text-xs font-medium text-status-warning-text",
-							children: ["Due by ", B(w.dueTime)]
+							children: ["Due by ", U(w.dueTime)]
 						})]
 					})
-				})]
-			}), /* @__PURE__ */ I("div", {
-				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ I("div", {
-					className: "lg:col-span-2 space-y-6",
-					children: [
-						/* @__PURE__ */ I("div", {
-							className: "rounded-lg border border-border-seam bg-bg-surface p-6",
-							children: [/* @__PURE__ */ F("h3", {
-								className: "text-base font-semibold text-text-primary mb-4",
-								children: "Customer Information"
-							}), /* @__PURE__ */ I("div", {
-								className: "grid grid-cols-1 md:grid-cols-2 gap-5",
-								children: [/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("div", {
-									className: "space-y-3",
-									children: /* @__PURE__ */ I("div", {
-										className: "flex items-center gap-3",
-										children: [/* @__PURE__ */ F("div", {
-											className: "flex h-10 w-10 items-center justify-center rounded-full bg-bg-sunken text-text-secondary",
-											children: /* @__PURE__ */ F(N, { className: "h-5 w-5" })
-										}), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
-											className: "text-sm font-medium text-text-primary",
-											children: w.customerInfo.name
-										}), /* @__PURE__ */ F("p", {
-											className: "text-xs text-text-secondary",
-											children: w.customerInfo.phone
-										})] })]
-									})
+				})] }),
+				/* @__PURE__ */ I("div", {
+					className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+					children: [/* @__PURE__ */ I("div", {
+						className: "lg:col-span-2 space-y-6",
+						children: [
+							/* @__PURE__ */ I("div", {
+								className: "rounded-lg border border-border-seam bg-bg-surface p-6",
+								children: [/* @__PURE__ */ F("h3", {
+									className: "text-base font-semibold text-text-primary mb-4",
+									children: "Customer Information"
 								}), /* @__PURE__ */ I("div", {
-									className: "flex gap-2 mt-4",
-									children: [/* @__PURE__ */ I("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__ */ F(T, { className: "h-3.5 w-3.5" }), "Call Customer"]
-									}), /* @__PURE__ */ I("button", {
-										type: "button",
-										onClick: J,
-										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__ */ F(C, { className: "h-3.5 w-3.5" }), "Navigate"]
-									})]
-								})] }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
-									className: "text-xs text-text-secondary mb-2",
-									children: "Delivery Address"
+									className: "grid grid-cols-1 md:grid-cols-2 gap-5",
+									children: [/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("div", {
+										className: "space-y-3",
+										children: /* @__PURE__ */ I("div", {
+											className: "flex items-center gap-3",
+											children: [/* @__PURE__ */ F("div", {
+												className: "flex h-10 w-10 items-center justify-center rounded-full bg-bg-sunken text-text-secondary",
+												children: /* @__PURE__ */ F(N, { className: "h-5 w-5" })
+											}), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
+												className: "text-sm font-medium text-text-primary",
+												children: w.customerInfo.name
+											}), /* @__PURE__ */ F("p", {
+												className: "text-xs text-text-secondary",
+												children: w.customerInfo.phone
+											})] })]
+										})
+									}), /* @__PURE__ */ I("div", {
+										className: "flex gap-2 mt-4",
+										children: [/* @__PURE__ */ I("button", {
+											type: "button",
+											onClick: X,
+											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__ */ F(T, { className: "h-3.5 w-3.5" }), "Call Customer"]
+										}), /* @__PURE__ */ I("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__ */ F(C, { className: "h-3.5 w-3.5" }), "Navigate"]
+										})]
+									})] }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
+										className: "text-xs text-text-secondary mb-2",
+										children: "Delivery Address"
+									}), /* @__PURE__ */ F("div", {
+										className: "rounded-md bg-bg-sunken/50 p-3",
+										children: /* @__PURE__ */ I("p", {
+											className: "text-xs text-text-primary flex items-start gap-2",
+											children: [/* @__PURE__ */ F(S, { className: "h-3.5 w-3.5 shrink-0 mt-0.5 text-text-secondary" }), w.customerInfo.address]
+										})
+									})] })]
+								})]
+							}),
+							w.orderItems.length > 0 && /* @__PURE__ */ I("div", {
+								className: "rounded-lg border border-border-seam bg-bg-surface p-6",
+								children: [/* @__PURE__ */ F("h3", {
+									className: "text-base font-semibold text-text-primary mb-3",
+									children: "Order Items"
+								}), /* @__PURE__ */ F("div", {
+									className: "space-y-2",
+									children: w.orderItems.map((e, t) => /* @__PURE__ */ F("div", {
+										className: "flex items-start justify-between p-3 rounded-md bg-bg-sunken/50",
+										children: /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ I("p", {
+											className: "text-sm font-medium text-text-primary",
+											children: [
+												e.quantity,
+												"x ",
+												e.name
+											]
+										}), e.specialInstructions && /* @__PURE__ */ I("p", {
+											className: "text-xs text-text-secondary mt-0.5",
+											children: ["Note: ", e.specialInstructions]
+										})] })
+									}, t))
+								})]
+							}),
+							w.specialInstructions && /* @__PURE__ */ I("div", {
+								className: "rounded-lg border border-border-seam bg-bg-surface p-6",
+								children: [/* @__PURE__ */ F("h3", {
+									className: "text-base font-semibold text-text-primary mb-3",
+									children: "Special Instructions"
 								}), /* @__PURE__ */ F("div", {
-									className: "rounded-md bg-bg-sunken/50 p-3",
+									className: "rounded-md bg-status-warning-bg/10 border border-status-warning-border/20 p-4",
 									children: /* @__PURE__ */ I("p", {
-										className: "text-xs text-text-primary flex items-start gap-2",
-										children: [/* @__PURE__ */ F(S, { className: "h-3.5 w-3.5 shrink-0 mt-0.5 text-text-secondary" }), w.customerInfo.address]
+										className: "text-sm text-status-warning-text flex items-start gap-2",
+										children: [/* @__PURE__ */ F(u, { className: "h-4 w-4 shrink-0 mt-0.5 text-status-warning-text" }), w.specialInstructions]
 									})
-								})] })]
-							})]
-						}),
-						w.orderItems.length > 0 && /* @__PURE__ */ I("div", {
-							className: "rounded-lg border border-border-seam bg-bg-surface p-6",
-							children: [/* @__PURE__ */ F("h3", {
-								className: "text-base font-semibold text-text-primary mb-3",
-								children: "Order Items"
-							}), /* @__PURE__ */ F("div", {
-								className: "space-y-2",
-								children: w.orderItems.map((e, t) => /* @__PURE__ */ F("div", {
-									className: "flex items-start justify-between p-3 rounded-md bg-bg-sunken/50",
-									children: /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ I("p", {
-										className: "text-sm font-medium text-text-primary",
-										children: [
-											e.quantity,
-											"x ",
-											e.name
-										]
-									}), e.specialInstructions && /* @__PURE__ */ I("p", {
-										className: "text-xs text-text-secondary mt-0.5",
-										children: ["Note: ", e.specialInstructions]
-									})] })
-								}, t))
-							})]
-						}),
-						w.specialInstructions && /* @__PURE__ */ I("div", {
-							className: "rounded-lg border border-border-seam bg-bg-surface p-6",
-							children: [/* @__PURE__ */ F("h3", {
-								className: "text-base font-semibold text-text-primary mb-3",
-								children: "Special Instructions"
-							}), /* @__PURE__ */ F("div", {
-								className: "rounded-md bg-status-warning-bg/10 border border-status-warning-border/20 p-4",
-								children: /* @__PURE__ */ I("p", {
-									className: "text-sm text-status-warning-text flex items-start gap-2",
-									children: [/* @__PURE__ */ F(d, { className: "h-4 w-4 shrink-0 mt-0.5 text-status-warning-text" }), w.specialInstructions]
-								})
-							})]
-						}),
-						w.photos && w.photos.length > 0 && /* @__PURE__ */ I("div", {
-							className: "rounded-lg border border-border-seam bg-bg-surface p-6",
-							children: [/* @__PURE__ */ I("h3", {
-								className: "text-base font-semibold text-text-primary flex items-center gap-2 mb-3",
-								children: [/* @__PURE__ */ F(m, { className: "h-4 w-4 text-text-secondary" }), "Reference Photos"]
-							}), /* @__PURE__ */ F("div", {
-								className: "grid grid-cols-2 md:grid-cols-3 gap-3",
-								children: w.photos.map((e, t) => /* @__PURE__ */ F("img", {
-									src: e,
-									alt: `Reference ${t + 1}`,
-									className: "w-full h-32 object-cover rounded-lg border border-border-seam"
-								}, t))
-							})]
-						}),
-						/* @__PURE__ */ I("div", {
-							className: "rounded-lg border border-border-seam bg-bg-surface p-6",
-							children: [
-								/* @__PURE__ */ I("h3", {
+								})]
+							}),
+							w.photos && w.photos.length > 0 && /* @__PURE__ */ I("div", {
+								className: "rounded-lg border border-border-seam bg-bg-surface p-6",
+								children: [/* @__PURE__ */ I("h3", {
 									className: "text-base font-semibold text-text-primary flex items-center gap-2 mb-3",
-									children: [/* @__PURE__ */ F(A, { className: "h-4 w-4 text-text-secondary" }), "Task Notes"]
-								}),
-								/* @__PURE__ */ F("textarea", {
-									value: H,
-									onChange: (e) => U(e.target.value),
-									placeholder: "Add your notes about this task...",
-									rows: 4,
-									className: "w-full rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-status-info-border/40 resize-none"
-								}),
-								/* @__PURE__ */ I("button", {
-									type: "button",
-									onClick: Y,
-									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__ */ F(D, { className: "h-3.5 w-3.5" }), "Save Notes"]
-								})
-							]
-						})
-					]
-				}), /* @__PURE__ */ I("div", {
-					className: "space-y-6",
-					children: [
-						/* @__PURE__ */ I("div", {
-							className: "rounded-lg border border-border-seam bg-bg-surface p-5",
-							children: [/* @__PURE__ */ F("h3", {
-								className: "text-base font-semibold text-text-primary mb-3",
-								children: "Task Details"
-							}), /* @__PURE__ */ I("div", {
-								className: "space-y-3",
+									children: [/* @__PURE__ */ F(p, { className: "h-4 w-4 text-text-secondary" }), "Reference Photos"]
+								}), /* @__PURE__ */ F("div", {
+									className: "grid grid-cols-2 md:grid-cols-3 gap-3",
+									children: w.photos.map((e, t) => /* @__PURE__ */ F("img", {
+										src: e,
+										alt: `Reference ${t + 1}`,
+										className: "w-full h-32 object-cover rounded-lg border border-border-seam"
+									}, t))
+								})]
+							}),
+							/* @__PURE__ */ I("div", {
+								className: "rounded-lg border border-border-seam bg-bg-surface p-6",
 								children: [
-									/* @__PURE__ */ I("div", {
-										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ F(y, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
-											className: "text-xs text-text-secondary",
-											children: "Order ID"
-										}), /* @__PURE__ */ F("p", {
-											className: "text-sm font-medium font-mono text-text-primary",
-											children: w.orderId
-										})] })]
-									}),
-									/* @__PURE__ */ I("div", {
-										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ F(O, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
-											className: "text-xs text-text-secondary",
-											children: "Cart"
-										}), /* @__PURE__ */ F("p", {
-											className: "text-sm font-medium text-text-primary",
-											children: w.cartName
-										})] })]
-									}),
-									/* @__PURE__ */ I("div", {
-										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ F(v, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
-											className: "text-xs text-text-secondary",
-											children: "Due At"
-										}), /* @__PURE__ */ F("p", {
-											className: "text-sm text-text-primary",
-											children: o(w.dueTime)
-										})] })]
-									}),
-									/* @__PURE__ */ I("div", {
-										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ F(b, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
-											className: "text-xs text-text-secondary",
-											children: "Earnings"
-										}), /* @__PURE__ */ F("p", {
-											className: "text-sm font-medium text-status-success-text",
-											children: a(w.earnings, { minimumFractionDigits: 0 })
-										})] })]
+									/* @__PURE__ */ I("h3", {
+										className: "text-base font-semibold text-text-primary flex items-center gap-2 mb-3",
+										children: [/* @__PURE__ */ F(A, { className: "h-4 w-4 text-text-secondary" }), "Task Notes"]
 									}),
-									w.distance != null && /* @__PURE__ */ I("div", {
-										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ F(C, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
-											className: "text-xs text-text-secondary",
-											children: "Distance"
-										}), /* @__PURE__ */ I("p", {
-											className: "text-sm text-text-primary",
-											children: [w.distance, " km"]
-										})] })]
+									/* @__PURE__ */ F("textarea", {
+										value: G,
+										onChange: (e) => K(e.target.value),
+										placeholder: "Add your notes about this task...",
+										rows: 4,
+										className: "w-full rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-status-info-border/40 resize-none"
 									}),
-									/* @__PURE__ */ I("div", {
-										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ F(v, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
-											className: "text-xs text-text-secondary",
-											children: "Assigned At"
-										}), /* @__PURE__ */ F("p", {
-											className: "text-sm text-text-primary",
-											children: o(w.assignedTime)
-										})] })]
+									/* @__PURE__ */ I("button", {
+										type: "button",
+										onClick: Q,
+										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__ */ F(D, { className: "h-3.5 w-3.5" }), "Save Notes"]
 									})
 								]
-							})]
-						}),
-						/* @__PURE__ */ I("div", {
-							className: "rounded-lg border border-border-seam bg-bg-surface p-5",
-							children: [/* @__PURE__ */ F("h3", {
-								className: "text-base font-semibold text-text-primary mb-4",
-								children: "Status Timeline"
-							}), /* @__PURE__ */ F("div", {
-								className: "relative",
-								children: X.map((e, n) => {
-									let r = n === X.length - 1, i = e.completed ? h : _;
-									return /* @__PURE__ */ I("div", {
-										className: "flex gap-3",
-										children: [/* @__PURE__ */ I("div", {
-											className: "flex flex-col items-center",
-											children: [/* @__PURE__ */ F("div", {
-												className: t("flex h-7 w-7 shrink-0 items-center justify-center rounded-full", e.completed ? "bg-status-success-bg/10 text-status-success-text" : "bg-bg-sunken text-text-secondary"),
-												children: /* @__PURE__ */ F(i, { className: "h-3.5 w-3.5" })
-											}), !r && /* @__PURE__ */ F("div", { className: t("w-0.5 flex-1 my-1", e.completed ? "bg-status-success-bg/30" : "bg-border") })]
-										}), /* @__PURE__ */ I("div", {
-											className: t("pb-5", r && "pb-0"),
-											children: [/* @__PURE__ */ F("p", {
+							})
+						]
+					}), /* @__PURE__ */ I("div", {
+						className: "space-y-6",
+						children: [
+							/* @__PURE__ */ I("div", {
+								className: "rounded-lg border border-border-seam bg-bg-surface p-5",
+								children: [/* @__PURE__ */ F("h3", {
+									className: "text-base font-semibold text-text-primary mb-3",
+									children: "Task Details"
+								}), /* @__PURE__ */ I("div", {
+									className: "space-y-3",
+									children: [
+										/* @__PURE__ */ I("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ F(y, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
+												className: "text-xs text-text-secondary",
+												children: "Order ID"
+											}), /* @__PURE__ */ F("p", {
+												className: "text-sm font-medium font-mono text-text-primary",
+												children: w.orderId
+											})] })]
+										}),
+										/* @__PURE__ */ I("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ F(O, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
+												className: "text-xs text-text-secondary",
+												children: "Cart"
+											}), /* @__PURE__ */ F("p", {
 												className: "text-sm font-medium text-text-primary",
-												children: e.label
+												children: w.cartName
+											})] })]
+										}),
+										/* @__PURE__ */ I("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ F(v, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
+												className: "text-xs text-text-secondary",
+												children: "Due At"
+											}), /* @__PURE__ */ F("p", {
+												className: "text-sm text-text-primary",
+												children: a(w.dueTime)
+											})] })]
+										}),
+										/* @__PURE__ */ I("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ F(b, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
+												className: "text-xs text-text-secondary",
+												children: "Earnings"
 											}), /* @__PURE__ */ F("p", {
-												className: "mt-0.5 text-xs text-text-secondary",
-												children: e.timestamp ? o(e.timestamp) : "Pending"
+												className: "text-sm font-medium text-status-success-text",
+												children: ee(w.earnings, { minimumFractionDigits: 0 })
+											})] })]
+										}),
+										w.distance != null && /* @__PURE__ */ I("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ F(C, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
+												className: "text-xs text-text-secondary",
+												children: "Distance"
+											}), /* @__PURE__ */ I("p", {
+												className: "text-sm text-text-primary",
+												children: [w.distance, " km"]
+											})] })]
+										}),
+										/* @__PURE__ */ I("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ F(v, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
+												className: "text-xs text-text-secondary",
+												children: "Assigned At"
+											}), /* @__PURE__ */ F("p", {
+												className: "text-sm text-text-primary",
+												children: a(w.assignedTime)
+											})] })]
+										})
+									]
+								})]
+							}),
+							/* @__PURE__ */ I("div", {
+								className: "rounded-lg border border-border-seam bg-bg-surface p-5",
+								children: [/* @__PURE__ */ F("h3", {
+									className: "text-base font-semibold text-text-primary mb-4",
+									children: "Status Timeline"
+								}), /* @__PURE__ */ F("div", {
+									className: "relative",
+									children: $.map((e, n) => {
+										let r = n === $.length - 1, i = e.completed ? m : g;
+										return /* @__PURE__ */ I("div", {
+											className: "flex gap-3",
+											children: [/* @__PURE__ */ I("div", {
+												className: "flex flex-col items-center",
+												children: [/* @__PURE__ */ F("div", {
+													className: t("flex h-7 w-7 shrink-0 items-center justify-center rounded-full", e.completed ? "bg-status-success-bg/10 text-status-success-text" : "bg-bg-sunken text-text-secondary"),
+													children: /* @__PURE__ */ F(i, { className: "h-3.5 w-3.5" })
+												}), !r && /* @__PURE__ */ F("div", { className: t("w-0.5 flex-1 my-1", e.completed ? "bg-status-success-bg/30" : "bg-border") })]
+											}), /* @__PURE__ */ I("div", {
+												className: t("pb-5", r && "pb-0"),
+												children: [/* @__PURE__ */ F("p", {
+													className: "text-sm font-medium text-text-primary",
+													children: e.label
+												}), /* @__PURE__ */ F("p", {
+													className: "mt-0.5 text-xs text-text-secondary",
+													children: e.timestamp ? a(e.timestamp) : "Pending"
+												})]
 											})]
-										})]
-									}, e.status);
-								})
-							})]
-						}),
-						/* @__PURE__ */ I("div", {
-							className: "space-y-3",
-							children: [
-								w.status === "pending" && /* @__PURE__ */ I("button", {
-									type: "button",
-									onClick: G,
-									className: "w-full inline-flex items-center justify-center gap-2 rounded-lg bg-status-info-bg/10 px-4 py-3 text-sm font-medium text-status-info-text hover:bg-status-info-bg/20 transition-colors",
-									children: [/* @__PURE__ */ F(E, { className: "h-4 w-4" }), "Start Task"]
-								}),
-								w.status === "in_progress" && /* @__PURE__ */ I("button", {
-									type: "button",
-									onClick: K,
-									className: "w-full inline-flex items-center justify-center gap-2 rounded-lg bg-status-success-bg/10 px-4 py-3 text-sm font-medium text-status-success-text hover:bg-status-success-bg/20 transition-colors",
-									children: [/* @__PURE__ */ F(h, { className: "h-4 w-4" }), "Complete Task"]
-								}),
-								/* @__PURE__ */ I("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__ */ F(f, { className: "h-4 w-4" }), "Back to Tasks"]
-								})
-							]
-						})
-					]
-				})]
-			})]
+										}, e.status);
+									})
+								})]
+							}),
+							/* @__PURE__ */ I("div", {
+								className: "space-y-3",
+								children: [
+									w.status === "pending" && /* @__PURE__ */ I("button", {
+										type: "button",
+										onClick: J,
+										className: "w-full inline-flex items-center justify-center gap-2 rounded-lg bg-status-info-bg/10 px-4 py-3 text-sm font-medium text-status-info-text hover:bg-status-info-bg/20 transition-colors",
+										children: [/* @__PURE__ */ F(E, { className: "h-4 w-4" }), "Start Task"]
+									}),
+									w.status === "in_progress" && /* @__PURE__ */ I("button", {
+										type: "button",
+										onClick: Y,
+										className: "w-full inline-flex items-center justify-center gap-2 rounded-lg bg-status-success-bg/10 px-4 py-3 text-sm font-medium text-status-success-text hover:bg-status-success-bg/20 transition-colors",
+										children: [/* @__PURE__ */ F(m, { className: "h-4 w-4" }), "Complete Task"]
+									}),
+									/* @__PURE__ */ I("button", {
+										type: "button",
+										onClick: () => h("/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__ */ F(d, { className: "h-4 w-4" }), "Back to Tasks"]
+									})
+								]
+							})
+						]
+					})]
+				})
+			]
 		})
 	});
 }
 //#endregion
-export { V as TaskDetailsPage };
+export { W as TaskDetailsPage };
 
 //# sourceMappingURL=TaskDetailsPage.js.map