@burdenoff/microfe-coolandlovely 2026.624.1 → 2026.625.2

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

@@ -8,8 +8,9 @@ import { useCallback as s, useEffect as c, useMemo as l, useState as u } from "r
 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 { 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/coolandlovely/pages/worker/TaskDetailsPage.tsx
-function L(e) {
+function B(e) {
 	switch (e) {
 		case "delivery": return M;
 		case "preparation": return g;
@@ -20,16 +21,16 @@ function L(e) {
 		default: return y;
 	}
 }
-function R(e) {
+function V(e) {
 	switch (e) {
-		case "urgent": return "bg-red-500/20 text-red-600 dark:text-red-400";
-		case "high": return "bg-orange-500/20 text-orange-600 dark:text-orange-400";
-		case "medium": return "bg-yellow-500/20 text-yellow-600 dark:text-yellow-400";
-		case "low": return "bg-green-500/20 text-green-600 dark:text-green-400";
+		case "urgent": return "bg-status-error-bg-subtle/20 text-status-error-text";
+		case "high": return "bg-accent-orange-subtle/20 text-accent-orange";
+		case "medium": return "bg-status-warning-bg-subtle/20 text-status-warning-text";
+		case "low": return "bg-status-success-bg-subtle/20 text-status-success-text";
 		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,16 +53,16 @@ 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: p } = P(), { navigateTo: g } = e(), [w, k] = u(null), [M, W] = u(!0), [G, K] = u(""), q = s(() => {
+		W(!0), setTimeout(() => {
 			let e = {
 				id: p || "TASK-001",
 				orderId: "ORD-123",
@@ -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 = () => {
+		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]);
+	}, $ = l(() => w ? H(w) : [], [w]);
 	if (M) return /* @__PURE__ */ F(n, {
 		title: "Task Details",
 		children: /* @__PURE__ */ F("div", {
@@ -142,9 +143,9 @@ function V() {
 	if (!w) return /* @__PURE__ */ F(n, {
 		title: "Task Not Found",
 		children: /* @__PURE__ */ F(i, {
-			icon: /* @__PURE__ */ F(y, { className: "h-12 w-12" }),
+			illustration: "empty-search",
 			title: "Task not found",
-			description: `No task found with ID "${p}".`,
+			description: `No task found with ID"${p}".`,
 			action: /* @__PURE__ */ F("button", {
 				type: "button",
 				onClick: () => g("/worker/orders"),
@@ -153,8 +154,8 @@ function V() {
 			})
 		})
 	});
-	let Z = L(w.type);
-	return /* @__PURE__ */ F(n, {
+	let ee = B(w.type);
+	return /* @__PURE__ */ I(n, {
 		title: /* @__PURE__ */ I("div", {
 			className: "flex items-center gap-3",
 			children: [/* @__PURE__ */ F("button", {
@@ -165,332 +166,368 @@ function V() {
 			}), /* @__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-subtle bg-bg-surface p-6 shadow-sm",
+		children: [
+			/* @__PURE__ */ F(z, {
+				className: "mb-6",
+				icon: /* @__PURE__ */ F(y, { className: "h-4 w-4" }),
+				children: "The full brief for a single task: what to do, where, by when, and who it's for. Start the task when you begin, mark it complete when done, call or navigate to the customer, and log notes — so nothing about the job lives in your head alone."
+			}),
+			/* @__PURE__ */ F(R, {
+				className: "mb-6",
+				storageKey: "coolandlovely-task-details",
+				steps: [
+					{
+						id: "start",
+						label: "Start the task",
+						description: "Mark the task in progress when you begin work.",
+						icon: /* @__PURE__ */ F(E, { className: "h-4 w-4" }),
+						onClick: J,
+						done: w.status !== "pending"
+					},
+					{
+						id: "navigate",
+						label: "Get directions",
+						description: "Open the task location in maps to find your way there.",
+						icon: /* @__PURE__ */ F(S, { className: "h-4 w-4" }),
+						onClick: Z
+					},
+					{
+						id: "complete",
+						label: "Complete the task",
+						description: "Wrap up and mark the task done once finished.",
+						icon: /* @__PURE__ */ F(h, { className: "h-4 w-4" }),
+						onClick: Y,
+						done: w.status === "completed"
+					}
+				]
+			}),
+			/* @__PURE__ */ I("div", {
+				className: "space-y-6",
 				children: [/* @__PURE__ */ I("div", {
-					className: "flex items-start justify-between mb-4",
+					className: "rounded-lg border border-border-seam bg-bg-surface p-6 bg-gloss-card shadow-pop",
+					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(ee, { className: "h-5 w-5 text-text-secondary" })
+							}), /* @__PURE__ */ I("div", { children: [
+								/* @__PURE__ */ F("h2", {
+									className: "text-xl font-bold text-text-primary",
+									children: w.title
+								}),
+								/* @__PURE__ */ F("p", {
+									className: "text-sm text-text-secondary mt-1",
+									children: w.description
+								}),
+								/* @__PURE__ */ I("div", {
+									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", V(w.priority)),
+											children: w.priority
+										}),
+										/* @__PURE__ */ F(r, { status: w.status }),
+										/* @__PURE__ */ I("span", {
+											className: "text-xs text-text-secondary flex items-center gap-1",
+											children: [
+												/* @__PURE__ */ F(v, { className: "h-3 w-3" }),
+												w.estimatedTime,
+												" min"
+											]
+										})
+									]
+								})
+							] })]
+						}), /* @__PURE__ */ I("div", {
+							className: "text-right shrink-0",
+							children: [
+								/* @__PURE__ */ F("p", {
+									className: "text-xs text-text-secondary",
+									children: "Assigned by"
+								}),
+								/* @__PURE__ */ F("p", {
+									className: "text-sm font-medium text-text-primary",
+									children: w.assignedBy
+								}),
+								/* @__PURE__ */ F("p", {
+									className: "text-xs text-text-secondary mt-1",
+									children: U(w.assignedTime)
+								})
+							]
+						})]
+					}), w.dueTime && w.status !== "completed" && /* @__PURE__ */ F("div", {
+						className: "rounded-md bg-status-warning-bg-subtle/10 border border-status-warning-border/20 p-3",
+						children: /* @__PURE__ */ I("div", {
+							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 ", U(w.dueTime)]
+							})]
+						})
+					})]
+				}), /* @__PURE__ */ I("div", {
+					className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
 					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" })
-						}), /* @__PURE__ */ I("div", { children: [
-							/* @__PURE__ */ F("h2", {
-								className: "text-xl font-bold text-text-primary",
-								children: w.title
+						className: "lg:col-span-2 space-y-6",
+						children: [
+							/* @__PURE__ */ I("div", {
+								className: "rounded-lg border border-border-seam bg-bg-surface p-6 bg-gloss-card shadow-pop",
+								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: "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 bg-gloss-card shadow-pop",
+								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))
+								})]
 							}),
-							/* @__PURE__ */ F("p", {
-								className: "text-sm text-text-secondary mt-1",
-								children: w.description
+							w.specialInstructions && /* @__PURE__ */ I("div", {
+								className: "rounded-lg border border-border-seam bg-bg-surface p-6 bg-gloss-card shadow-pop",
+								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-subtle/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 bg-gloss-card shadow-pop",
+								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-subtle"
+									}, t))
+								})]
 							}),
 							/* @__PURE__ */ I("div", {
-								className: "flex flex-wrap items-center gap-2 mt-3",
+								className: "rounded-lg border border-border-seam bg-bg-surface p-6 bg-gloss-card shadow-pop",
 								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)),
-										children: w.priority
+									/* @__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: G,
+										onChange: (e) => K(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-accent-blue-subtle/40 resize-none"
 									}),
-									/* @__PURE__ */ F(r, { status: w.status }),
-									/* @__PURE__ */ I("span", {
-										className: "text-xs text-text-secondary flex items-center gap-1",
-										children: [
-											/* @__PURE__ */ F(v, { className: "h-3 w-3" }),
-											w.estimatedTime,
-											" min"
-										]
+									/* @__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: "text-right shrink-0",
+						className: "space-y-6",
 						children: [
-							/* @__PURE__ */ F("p", {
-								className: "text-xs text-text-secondary",
-								children: "Assigned by"
-							}),
-							/* @__PURE__ */ F("p", {
-								className: "text-sm font-medium text-text-primary",
-								children: w.assignedBy
-							}),
-							/* @__PURE__ */ F("p", {
-								className: "text-xs text-text-secondary mt-1",
-								children: B(w.assignedTime)
-							})
-						]
-					})]
-				}), w.dueTime && w.status !== "completed" && /* @__PURE__ */ F("div", {
-					className: "rounded-md bg-yellow-500/10 border border-yellow-500/20 p-3",
-					children: /* @__PURE__ */ I("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ F(j, { className: "h-4 w-4 text-yellow-600 dark:text-yellow-400 shrink-0" }), /* @__PURE__ */ I("span", {
-							className: "text-xs font-medium text-yellow-600 dark:text-yellow-400",
-							children: ["Due by ", B(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-subtle 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: "rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop",
+								children: [/* @__PURE__ */ F("h3", {
+									className: "text-base font-semibold text-text-primary mb-3",
+									children: "Task Details"
 								}), /* @__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: "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: 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 })
+											})] })]
+										}),
+										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: o(w.assignedTime)
+											})] })]
+										})
+									]
+								})]
+							}),
+							/* @__PURE__ */ I(L, {
+								className: "p-5",
+								children: [/* @__PURE__ */ F("h3", {
+									className: "text-base font-semibold text-text-primary mb-4",
+									children: "Status Timeline"
 								}), /* @__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]
+									className: "relative",
+									children: $.map((e, n) => {
+										let r = n === $.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-subtle/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-subtle/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 ? o(e.timestamp) : "Pending"
+												})]
+											})]
+										}, e.status);
 									})
-								})] })]
-							})]
-						}),
-						w.orderItems.length > 0 && /* @__PURE__ */ I("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 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-subtle 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-yellow-500/10 border border-yellow-500/20 p-4",
-								children: /* @__PURE__ */ I("p", {
-									className: "text-sm text-yellow-700 dark:text-yellow-300 flex items-start gap-2",
-									children: [/* @__PURE__ */ F(d, { className: "h-4 w-4 shrink-0 mt-0.5 text-yellow-600 dark:text-yellow-400" }), w.specialInstructions]
-								})
-							})]
-						}),
-						w.photos && w.photos.length > 0 && /* @__PURE__ */ I("div", {
-							className: "rounded-lg border border-border-subtle 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-subtle"
-								}, t))
-							})]
-						}),
-						/* @__PURE__ */ I("div", {
-							className: "rounded-lg border border-border-subtle 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-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-blue-500/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-subtle 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", {
+								})]
+							}),
+							/* @__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: 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-green-600 dark:text-green-400",
-											children: a(w.earnings, { minimumFractionDigits: 0 })
-										})] })]
+									w.status === "pending" && /* @__PURE__ */ I("button", {
+										type: "button",
+										onClick: J,
+										className: "w-full inline-flex items-center justify-center gap-2 rounded-lg bg-accent-blue-subtle/10 px-4 py-3 text-sm font-medium text-accent-blue hover:bg-accent-blue-subtle/20 transition-colors",
+										children: [/* @__PURE__ */ F(E, { className: "h-4 w-4" }), "Start Task"]
 									}),
-									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"]
-										})] })]
+									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-subtle/10 px-4 py-3 text-sm font-medium text-status-success-text hover:bg-status-success-bg-subtle/20 transition-colors",
+										children: [/* @__PURE__ */ F(h, { className: "h-4 w-4" }), "Complete Task"]
 									}),
-									/* @__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: () => 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"]
 									})
 								]
-							})]
-						}),
-						/* @__PURE__ */ I("div", {
-							className: "rounded-lg border border-border-subtle 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-green-500/10 text-green-600 dark:text-green-400" : "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-green-500/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 ? o(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-blue-500/10 px-4 py-3 text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-500/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-green-500/10 px-4 py-3 text-sm font-medium text-green-600 dark:text-green-400 hover:bg-green-500/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"]
-								})
-							]
-						})
-					]
+							})
+						]
+					})]
 				})]
-			})]
-		})
+			})
+		]
 	});
 }
 //#endregion
-export { V as TaskDetailsPage };
+export { W as TaskDetailsPage };
 
 //# sourceMappingURL=TaskDetailsPage.js.map