@burdenoff/microfe-kadaikodi 2026.704.4 → 2026.704.5

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

@@ -2,13 +2,45 @@ 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 { EmptyState as r } from "../../components/EmptyState.js";
-import { useProviderWorkers as i, useProviders as a, useUpdateProviderWorker as o, useWorkerClockInOut as ee, useWorkerSchedules as s } from "../../hooks/useKadaikodiApi.js";
-import { formatCurrency as c } from "../../utils/formatters.js";
-import { useEffect as te, useMemo as l, useState as u } from "react";
-import { Calendar as d, CalendarDays as f, CheckCircle2 as p, ChevronLeft as m, ChevronRight as h, Loader2 as g, LogIn as _, LogOut as v, PlayCircle as y, Save as b, Send as x, ShoppingCart as ne, Timer as re } from "lucide-react";
-import { jsx as S, jsxs as C } from "react/jsx-runtime";
-import { EmphasisPanel as w, PagePurpose as ie } from "@burdenoff/fe-libs/ui";
+import { useProviderWorkers as i, useProviders as a, useUpdateProviderWorker as ee, useWorkerClockInOut as o, useWorkerSchedules as te } from "../../hooks/useKadaikodiApi.js";
+import { formatCurrency as s } from "../../utils/formatters.js";
+import { StatCard as c } from "../../components/viz/StatCard.js";
+import "../../components/viz/index.js";
+import { useEffect as ne, useMemo as l, useState as u } from "react";
+import { Calendar as d, CheckCircle2 as re, ChevronLeft as ie, ChevronRight as f, Clock as p, Loader2 as m, LogIn as h, LogOut as g, PlayCircle as _, Save as v, Truck as y, Wallet as ae } from "lucide-react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { GlassCard as S, PagePurpose as C } from "@burdenoff/fe-libs/ui";
 //#region src/kadaikodi/pages/worker/WorkerSchedulePage.tsx
+var w = [
+	{
+		key: "Monday",
+		short: "M"
+	},
+	{
+		key: "Tuesday",
+		short: "T"
+	},
+	{
+		key: "Wednesday",
+		short: "W"
+	},
+	{
+		key: "Thursday",
+		short: "T"
+	},
+	{
+		key: "Friday",
+		short: "F"
+	},
+	{
+		key: "Saturday",
+		short: "S"
+	},
+	{
+		key: "Sunday",
+		short: "S"
+	}
+];
 function T(e) {
 	let t = new Date(e);
 	return Number.isNaN(t.getTime()) ? e : t.toLocaleDateString("en-US", {
@@ -35,8 +67,7 @@ function D(e) {
 		}),
 		end: i.toLocaleDateString("en-US", {
 			month: "short",
-			day: "numeric",
-			year: "numeric"
+			day: "numeric"
 		})
 	};
 }
@@ -51,364 +82,308 @@ function O(e) {
 }
 function k(e) {
 	switch (e) {
-		case "scheduled": return "bg-[var(--color-accent-soft)] text-text-primary";
+		case "scheduled": return "bg-status-warning-bg-subtle text-status-warning-text";
 		case "in_progress": return "bg-status-success-bg-subtle text-status-success-text";
-		case "completed": return "bg-bg-sunken text-text-secondary";
+		case "completed": return "bg-status-success-bg-subtle text-status-success-text";
 		case "cancelled": return "bg-status-error-bg-subtle text-status-error-text";
 		default: return "bg-bg-sunken text-text-secondary";
 	}
 }
-function ae(e, t) {
+function A(e) {
+	return e === "in_progress" ? "Ongoing" : e === "scheduled" ? "Upcoming" : e.charAt(0).toUpperCase() + e.slice(1);
+}
+function j(e, t) {
 	if (!e || !t) return 0;
 	let n = /* @__PURE__ */ new Date(`2024-01-01T${e}`), r = /* @__PURE__ */ new Date(`2024-01-01T${t}`);
 	return Number.isNaN(n.getTime()) || Number.isNaN(r.getTime()) ? 0 : Math.max(0, (r.getTime() - n.getTime()) / (1e3 * 60 * 60));
 }
-var A = [
-	"Monday",
-	"Tuesday",
-	"Wednesday",
-	"Thursday",
-	"Friday",
-	"Saturday",
-	"Sunday"
-].map((e) => ({
-	dayOfWeek: e,
-	isAvailable: e !== "Sunday",
-	preferredStartTime: "09:00",
-	preferredEndTime: "18:00"
-})), j = () => {
-	let { currentUser: j } = e(), M = j?.id ?? "", { data: N = [], isLoading: P } = s(M), F = ee(), { data: I = [] } = a(), { data: L = [] } = i(l(() => I.find((e) => e.ownerId === j?.id) ?? I[0], [I, j?.id])?.id), R = l(() => L.find((e) => e.workerId === j?.id) ?? L[0], [L, j?.id]), z = o(), [B, V] = u("schedule"), [H, U] = u(0), [W, G] = u(A), [K, q] = u(!1), [J, Y] = u(null);
-	te(() => {
+var M = () => {
+	let { currentUser: M } = e(), N = M?.id ?? "", { data: P = [], isLoading: oe } = te(N), F = o(), { data: I = [] } = a(), { data: L = [] } = i(l(() => I.find((e) => e.ownerId === M?.id) ?? I[0], [I, M?.id])?.id), R = l(() => L.find((e) => e.workerId === M?.id) ?? L[0], [L, M?.id]), z = ee(), [B, V] = u(0), [H, U] = u(() => new Set(w.slice(0, 5).map((e) => e.key))), [W, G] = u("09:00"), [K, q] = u("18:00"), [se, J] = u(!1), [Y, X] = u(null);
+	ne(() => {
 		let e = R?.metadata ?? {};
-		Array.isArray(e.availability) && e.availability.length > 0 && G(A.map((t) => {
-			let n = e.availability?.find((e) => e.dayOfWeek === t.dayOfWeek);
-			return n ? {
-				...t,
-				...n
-			} : t;
-		}));
+		if (Array.isArray(e.availability) && e.availability.length > 0) {
+			let t = e.availability.filter((e) => e.isAvailable);
+			U(new Set(t.map((e) => e.dayOfWeek)));
+			let n = t[0];
+			n && (n.preferredStartTime && G(n.preferredStartTime), n.preferredEndTime && q(n.preferredEndTime));
+		}
 	}, [R]);
-	let X = l(() => {
-		let { start: e, end: t } = O(H);
-		return N.filter((n) => {
+	let Z = l(() => {
+		let { start: e, end: t } = O(B);
+		return P.filter((n) => {
 			let r = new Date(n.date);
 			return Number.isNaN(r.getTime()) ? !1 : r >= e && r <= t;
 		});
-	}, [N, H]), Z = l(() => {
-		let e = X.filter((e) => e.status !== "cancelled"), t = e.reduce((e, t) => e + ae(t.startTime, t.endTime), 0), n = e.reduce((e, t) => e + (t.totalEarnings ?? 0), 0), r = [...N].filter((e) => e.status === "scheduled").sort((e, t) => new Date(e.date).getTime() - new Date(t.date).getTime())[0];
+	}, [P, B]), Q = l(() => {
+		let e = Z.filter((e) => e.status !== "cancelled"), t = e.reduce((e, t) => e + j(t.startTime, t.endTime), 0), n = e.reduce((e, t) => e + (t.totalEarnings ?? 0), 0), r = [...P].filter((e) => e.status === "scheduled").sort((e, t) => new Date(e.date).getTime() - new Date(t.date).getTime())[0];
 		return {
 			hoursThisWeek: Math.round(t * 10) / 10,
 			shiftsThisWeek: e.length,
 			earningsThisWeek: n,
 			nextShift: r
 		};
-	}, [X, N]), Q = D(H), oe = (e) => {
-		F.mutate({
-			workerId: M,
-			action: "CLOCK_IN"
-		});
-	}, se = (e) => {
-		F.mutate({
-			workerId: M,
-			action: "CLOCK_OUT"
+	}, [Z, P]), $ = D(B), ce = () => F.mutate({
+		workerId: N,
+		action: "CLOCK_IN"
+	}), le = () => F.mutate({
+		workerId: N,
+		action: "CLOCK_OUT"
+	}), ue = (e) => {
+		J(!1), U((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
 		});
-	}, $ = (e, t, n) => {
-		q(!1), G((r) => r.map((r) => r.dayOfWeek === e ? {
-			...r,
-			[t]: n
-		} : r));
 	};
-	return P ? /* @__PURE__ */ S(n, {
-		title: "Schedule",
-		description: "Manage your work schedule",
-		children: /* @__PURE__ */ S("div", {
+	return oe ? /* @__PURE__ */ b(n, {
+		title: "My Schedule",
+		description: "Your shifts, hours and pay",
+		children: /* @__PURE__ */ b("div", {
 			className: "flex items-center justify-center py-24",
-			children: /* @__PURE__ */ C("div", {
+			children: /* @__PURE__ */ x("div", {
 				className: "text-center",
-				children: [/* @__PURE__ */ S(g, { className: "h-10 w-10 animate-spin text-text-secondary mx-auto mb-4" }), /* @__PURE__ */ S("p", {
+				children: [/* @__PURE__ */ b(m, { className: "h-10 w-10 animate-spin text-text-secondary mx-auto mb-4" }), /* @__PURE__ */ b("p", {
 					className: "text-sm text-text-secondary",
 					children: "Loading schedule..."
 				})]
 			})
 		})
-	}) : /* @__PURE__ */ C(n, {
-		title: "Schedule",
-		description: "Manage your work schedule",
-		children: [/* @__PURE__ */ S(ie, {
+	}) : /* @__PURE__ */ x(n, {
+		title: "My Schedule",
+		description: "Your shifts, hours and pay in one place",
+		children: [/* @__PURE__ */ b(C, {
 			className: "mb-6",
-			children: "Your shifts, hours and pay in one place. Use this page to see your upcoming shifts, check in and out, and set the days and hours you're available — so your cart owner can roster you fairly and you always know when (and how much) you're working. Keep an eye on your weekly hours and next shift at the top."
-		}), /* @__PURE__ */ C("div", {
+			children: "See your upcoming shifts, check in and out, and set the days and hours you're available — so your cart owner can roster you fairly and you always know when (and how much) you're working."
+		}), /* @__PURE__ */ x("div", {
 			className: "space-y-6",
-			children: [/* @__PURE__ */ C(w, { children: [/* @__PURE__ */ S("h2", {
-				className: "mb-4 text-base font-semibold text-text-primary",
-				children: "This Week"
-			}), /* @__PURE__ */ C("div", {
-				className: "grid grid-cols-2 md:grid-cols-4 gap-3",
-				children: [
-					/* @__PURE__ */ C("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 shadow-sm",
-						children: [/* @__PURE__ */ S("p", {
-							className: "text-xs text-text-secondary",
-							children: "Hours This Week"
-						}), /* @__PURE__ */ C("p", {
-							className: "text-2xl font-bold text-text-primary",
-							children: [Z.hoursThisWeek, "h"]
-						})]
-					}),
-					/* @__PURE__ */ C("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 shadow-sm",
-						children: [/* @__PURE__ */ S("p", {
-							className: "text-xs text-text-secondary",
-							children: "Shifts This Week"
-						}), /* @__PURE__ */ S("p", {
-							className: "text-2xl font-bold text-text-primary",
-							children: Z.shiftsThisWeek
-						})]
-					}),
-					/* @__PURE__ */ C("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 shadow-sm",
-						children: [/* @__PURE__ */ S("p", {
-							className: "text-xs text-text-secondary",
-							children: "Week Earnings"
-						}), /* @__PURE__ */ S("p", {
-							className: "text-2xl font-bold text-text-primary",
-							children: c(Z.earningsThisWeek, { minimumFractionDigits: 0 })
-						})]
-					}),
-					/* @__PURE__ */ C("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 shadow-sm",
-						children: [/* @__PURE__ */ S("p", {
-							className: "text-xs text-text-secondary",
-							children: "Next Shift"
-						}), /* @__PURE__ */ S("p", {
-							className: "text-sm font-bold text-text-primary",
-							children: Z.nextShift ? `${T(Z.nextShift.date)} ${E(Z.nextShift.startTime)}` : "None scheduled"
-						})]
-					})
-				]
-			})] }), /* @__PURE__ */ C("div", {
-				className: "rounded-lg border border-border-subtle bg-bg-surface shadow-sm overflow-hidden",
-				children: [/* @__PURE__ */ C("div", {
-					className: "flex border-b border-border-subtle",
+			children: [
+				/* @__PURE__ */ x("div", {
+					className: "grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4",
 					children: [
-						/* @__PURE__ */ C("button", {
-							type: "button",
-							onClick: () => V("schedule"),
-							className: t("flex-1 py-3 px-4 text-sm font-medium transition-colors flex items-center justify-center gap-2", B === "schedule" ? "border-b-2 border-border-focus text-text-primary bg-[var(--color-accent-soft)]" : "text-text-secondary hover:text-text-primary"),
-							children: [/* @__PURE__ */ S(f, { className: "h-4 w-4" }), "My Schedule"]
+						/* @__PURE__ */ b(c, {
+							label: "Hours This Week",
+							value: `${Q.hoursThisWeek}h`,
+							icon: /* @__PURE__ */ b(p, { className: "h-4 w-4" })
 						}),
-						/* @__PURE__ */ C("button", {
-							type: "button",
-							onClick: () => V("requests"),
-							className: t("flex-1 py-3 px-4 text-sm font-medium transition-colors flex items-center justify-center gap-2", B === "requests" ? "border-b-2 border-border-focus text-text-primary bg-[var(--color-accent-soft)]" : "text-text-secondary hover:text-text-primary"),
-							children: [/* @__PURE__ */ S(x, { className: "h-4 w-4" }), "Shift Requests"]
+						/* @__PURE__ */ b(c, {
+							label: "Shifts This Week",
+							value: Q.shiftsThisWeek,
+							icon: /* @__PURE__ */ b(d, { className: "h-4 w-4" })
 						}),
-						/* @__PURE__ */ C("button", {
-							type: "button",
-							onClick: () => V("availability"),
-							className: t("flex-1 py-3 px-4 text-sm font-medium transition-colors flex items-center justify-center gap-2", B === "availability" ? "border-b-2 border-border-focus text-text-primary bg-[var(--color-accent-soft)]" : "text-text-secondary hover:text-text-primary"),
-							children: [/* @__PURE__ */ S(re, { className: "h-4 w-4" }), "Availability"]
+						/* @__PURE__ */ b(c, {
+							label: "Week Earnings",
+							value: s(Q.earningsThisWeek, { minimumFractionDigits: 0 }),
+							icon: /* @__PURE__ */ b(ae, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ b(c, {
+							label: "Next Shift",
+							value: /* @__PURE__ */ b("span", {
+								className: "text-lg font-semibold",
+								children: Q.nextShift ? T(Q.nextShift.date) : "None"
+							}),
+							icon: /* @__PURE__ */ b(y, { className: "h-4 w-4" })
 						})
 					]
-				}), /* @__PURE__ */ C("div", {
+				}),
+				/* @__PURE__ */ x(S, {
 					className: "p-5",
-					children: [
-						B === "schedule" && /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ C("div", {
-							className: "flex items-center justify-between mb-5",
-							children: [
-								/* @__PURE__ */ C("button", {
-									type: "button",
-									onClick: () => U((e) => e - 1),
-									className: "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__ */ S(m, { className: "h-3.5 w-3.5" }), "Previous Week"]
-								}),
-								/* @__PURE__ */ C("h3", {
-									className: "text-sm font-medium text-text-primary",
-									children: [
-										Q.start,
-										" - ",
-										Q.end
-									]
-								}),
-								/* @__PURE__ */ C("button", {
-									type: "button",
-									onClick: () => U((e) => e + 1),
-									className: "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: ["Next Week", /* @__PURE__ */ S(h, { className: "h-3.5 w-3.5" })]
-								})
-							]
-						}), X.length === 0 ? /* @__PURE__ */ S(r, {
-							icon: /* @__PURE__ */ S(d, { className: "h-12 w-12" }),
-							title: "No shifts this week",
-							description: N.length === 0 ? "You have no shifts on the roster yet. New shifts will appear here once assigned." : "No shifts fall in the selected week. Use Previous / Next Week to browse your roster."
-						}) : /* @__PURE__ */ S("div", {
-							className: "space-y-3",
-							children: X.map((e) => /* @__PURE__ */ C("div", {
-								className: t("rounded-lg border p-4 transition-colors", e.status === "in_progress" ? "border-status-success-text/30 bg-status-success-bg-subtle" : "border-border-subtle hover:bg-bg-sunken/30"),
+					children: [/* @__PURE__ */ x("div", {
+						className: "mb-5 flex items-center justify-between",
+						children: [
+							/* @__PURE__ */ x("button", {
+								type: "button",
+								onClick: () => V((e) => e - 1),
+								className: "inline-flex items-center gap-1 rounded-md px-3 py-1.5 text-sm font-medium text-accent-primary hover:bg-bg-sunken transition-colors",
+								children: [/* @__PURE__ */ b(ie, { className: "h-4 w-4" }), "Prev"]
+							}),
+							/* @__PURE__ */ x("h3", {
+								className: "text-base font-semibold text-text-primary",
 								children: [
-									/* @__PURE__ */ C("div", {
-										className: "flex items-center justify-between mb-3",
-										children: [/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ C("div", {
-											className: "flex items-center gap-2 flex-wrap",
-											children: [/* @__PURE__ */ S("h4", {
+									$.start,
+									" – ",
+									$.end
+								]
+							}),
+							/* @__PURE__ */ x("button", {
+								type: "button",
+								onClick: () => V((e) => e + 1),
+								className: "inline-flex items-center gap-1 rounded-md px-3 py-1.5 text-sm font-medium text-accent-primary hover:bg-bg-sunken transition-colors",
+								children: ["Next", /* @__PURE__ */ b(f, { className: "h-4 w-4" })]
+							})
+						]
+					}), Z.length === 0 ? /* @__PURE__ */ b(r, {
+						icon: /* @__PURE__ */ b(d, { className: "h-12 w-12" }),
+						title: "No shifts this week",
+						description: P.length === 0 ? "You have no shifts on the roster yet. New shifts will appear here once assigned." : "No shifts fall in the selected week. Use Prev / Next to browse your roster."
+					}) : /* @__PURE__ */ b("div", {
+						className: "space-y-3",
+						children: Z.map((e) => /* @__PURE__ */ x("div", {
+							className: t("rounded-[var(--radius-card)] border p-4 transition-colors", e.status === "in_progress" ? "border-status-success-text/30 bg-status-success-bg-subtle" : "border-border-subtle bg-bg-surface hover:bg-bg-sunken/40"),
+							children: [/* @__PURE__ */ x("div", {
+								className: "flex items-start justify-between gap-3",
+								children: [/* @__PURE__ */ x("div", {
+									className: "min-w-0",
+									children: [
+										/* @__PURE__ */ x("div", {
+											className: "flex flex-wrap items-center gap-2",
+											children: [/* @__PURE__ */ b("h4", {
 												className: "text-sm font-semibold text-text-primary",
 												children: T(e.date)
-											}), /* @__PURE__ */ S("span", {
-												className: t("inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium capitalize", k(e.status)),
-												children: e.status === "in_progress" ? "Ongoing" : e.status
+											}), /* @__PURE__ */ b("span", {
+												className: t("inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium", k(e.status)),
+												children: A(e.status)
 											})]
-										}), /* @__PURE__ */ C("p", {
-											className: "text-xs text-text-secondary mt-1",
-											children: [E(e.startTime), e.endTime ? ` - ${E(e.endTime)}` : ""]
-										})] }), e.totalEarnings > 0 && /* @__PURE__ */ S("div", {
-											className: "text-right",
-											children: /* @__PURE__ */ S("p", {
-												className: "text-lg font-bold text-text-primary",
-												children: c(e.totalEarnings, { minimumFractionDigits: 0 })
-											})
-										})]
-									}),
-									/* @__PURE__ */ C("div", {
-										className: "grid grid-cols-1 md:grid-cols-2 gap-3 text-sm",
-										children: [/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
-											className: "text-xs text-text-secondary",
-											children: "Cart"
-										}), /* @__PURE__ */ C("p", {
-											className: "text-xs font-medium text-text-primary flex items-center gap-1",
-											children: [/* @__PURE__ */ S(ne, { className: "h-3 w-3 text-text-secondary" }), e.cartName]
-										})] }), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
-											className: "text-xs text-text-secondary",
-											children: "Tasks Completed"
-										}), /* @__PURE__ */ C("p", {
-											className: "text-xs font-medium text-text-primary flex items-center gap-1",
-											children: [/* @__PURE__ */ S(p, { className: "h-3 w-3 text-text-secondary" }), e.tasksCompleted]
-										})] })]
-									}),
-									e.status === "scheduled" && /* @__PURE__ */ S("div", {
-										className: "mt-3 pt-3 border-t border-border-subtle",
-										children: /* @__PURE__ */ C("button", {
-											type: "button",
-											onClick: () => oe(e),
-											disabled: F.isPending,
-											className: "inline-flex items-center gap-1.5 rounded-md bg-[var(--color-accent-soft)] px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-[var(--color-accent-soft)] transition-colors disabled:opacity-50",
-											children: [/* @__PURE__ */ S(_, { className: "h-3.5 w-3.5" }), "Check In"]
+										}),
+										/* @__PURE__ */ x("p", {
+											className: "mt-1 text-xs text-text-secondary",
+											children: [E(e.startTime), e.endTime ? ` – ${E(e.endTime)}` : ""]
+										}),
+										/* @__PURE__ */ x("p", {
+											className: "mt-1.5 flex items-center gap-1.5 text-sm font-medium text-text-primary",
+											children: [/* @__PURE__ */ b(y, { className: "h-4 w-4 text-accent-primary" }), e.cartName]
 										})
+									]
+								}), e.totalEarnings > 0 && /* @__PURE__ */ b("div", {
+									className: "text-right shrink-0",
+									children: /* @__PURE__ */ b("p", {
+										className: "text-lg font-bold text-text-primary tabular-nums",
+										children: s(e.totalEarnings, { minimumFractionDigits: 0 })
+									})
+								})]
+							}), /* @__PURE__ */ x("div", {
+								className: "mt-3 flex items-center justify-between border-t border-border-subtle pt-3",
+								children: [
+									/* @__PURE__ */ x("span", {
+										className: "flex items-center gap-1.5 text-xs text-text-secondary",
+										children: [
+											/* @__PURE__ */ b(re, { className: "h-3.5 w-3.5" }),
+											e.tasksCompleted,
+											" tasks"
+										]
+									}),
+									e.status === "scheduled" && /* @__PURE__ */ x("button", {
+										type: "button",
+										onClick: ce,
+										disabled: F.isPending,
+										className: "inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-semibold text-action-primary-text hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
+										children: [/* @__PURE__ */ b(h, { className: "h-3.5 w-3.5" }), "Check In"]
 									}),
-									e.status === "in_progress" && /* @__PURE__ */ C("div", {
-										className: "mt-3 pt-3 border-t border-status-success-text/20 flex items-center justify-between",
-										children: [/* @__PURE__ */ C("span", {
-											className: "text-xs font-medium text-status-success-text flex items-center gap-1",
-											children: [/* @__PURE__ */ S(y, { className: "h-3.5 w-3.5" }), "Shift in progress"]
-										}), /* @__PURE__ */ C("button", {
+									e.status === "in_progress" && /* @__PURE__ */ x("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ x("span", {
+											className: "flex items-center gap-1 text-xs font-medium text-status-success-text",
+											children: [/* @__PURE__ */ b(_, { className: "h-3.5 w-3.5" }), "In progress"]
+										}), /* @__PURE__ */ x("button", {
 											type: "button",
-											onClick: () => se(e),
+											onClick: le,
 											disabled: F.isPending,
-											className: "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 disabled:opacity-50",
-											children: [/* @__PURE__ */ S(v, { className: "h-3.5 w-3.5" }), "Check Out"]
+											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: [/* @__PURE__ */ b(g, { className: "h-3.5 w-3.5" }), "Check Out"]
 										})]
 									})
 								]
-							}, e.id))
-						})] }),
-						B === "requests" && /* @__PURE__ */ S(r, {
-							icon: /* @__PURE__ */ S(x, { className: "h-12 w-12" }),
-							title: "No shift requests",
-							description: "Shift swap and time-off requests will appear here. This feature is coming soon."
+							})]
+						}, e.id))
+					})]
+				}),
+				/* @__PURE__ */ x(S, {
+					treatment: "insight",
+					className: "p-5",
+					children: [
+						/* @__PURE__ */ b("h2", {
+							className: "mb-1 text-base font-semibold text-text-primary",
+							children: "Availability"
 						}),
-						B === "availability" && /* @__PURE__ */ C("div", { children: [
-							/* @__PURE__ */ S("p", {
-								className: "text-xs text-text-secondary mb-5",
-								children: "Set your preferred working hours for each day of the week"
-							}),
-							/* @__PURE__ */ S("div", {
-								className: "space-y-3",
-								children: W.map((e) => /* @__PURE__ */ C("div", {
-									className: t("flex flex-col sm:flex-row sm:items-center gap-3 p-3 rounded-lg border", e.isAvailable ? "border-border-subtle bg-bg-surface" : "border-border-subtle/50 bg-bg-sunken/30"),
-									children: [/* @__PURE__ */ S("div", {
-										className: "w-32 shrink-0",
-										children: /* @__PURE__ */ C("label", {
-											className: "flex items-center gap-2 cursor-pointer",
-											children: [/* @__PURE__ */ S("input", {
-												type: "checkbox",
-												checked: e.isAvailable,
-												onChange: (t) => $(e.dayOfWeek, "isAvailable", t.target.checked),
-												className: "h-4 w-4 rounded border-border-subtle text-text-primary focus:ring-border-focus/40"
-											}), /* @__PURE__ */ S("span", {
-												className: "text-sm font-medium text-text-primary",
-												children: e.dayOfWeek
-											})]
-										})
-									}), e.isAvailable ? /* @__PURE__ */ C("div", {
-										className: "flex flex-col sm:flex-row gap-3 flex-1",
-										children: [/* @__PURE__ */ C("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ S("span", {
-												className: "text-xs text-text-secondary w-10",
-												children: "From"
-											}), /* @__PURE__ */ S("input", {
-												type: "time",
-												value: e.preferredStartTime,
-												onChange: (t) => $(e.dayOfWeek, "preferredStartTime", t.target.value),
-												className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-1.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-border-focus/40"
-											})]
-										}), /* @__PURE__ */ C("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ S("span", {
-												className: "text-xs text-text-secondary w-10",
-												children: "To"
-											}), /* @__PURE__ */ S("input", {
-												type: "time",
-												value: e.preferredEndTime,
-												onChange: (t) => $(e.dayOfWeek, "preferredEndTime", t.target.value),
-												className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-1.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-border-focus/40"
-											})]
-										})]
-									}) : /* @__PURE__ */ S("span", {
-										className: "text-xs text-text-secondary",
-										children: "Not available"
-									})]
-								}, e.dayOfWeek))
-							}),
-							/* @__PURE__ */ C("div", {
-								className: "mt-5 flex flex-wrap items-center gap-3",
-								children: [/* @__PURE__ */ C("button", {
+						/* @__PURE__ */ b("p", {
+							className: "mb-4 text-xs text-text-secondary",
+							children: "Tap the days you can work, then set your preferred window. Saved to your worker profile."
+						}),
+						/* @__PURE__ */ b("div", {
+							className: "mb-5 flex flex-wrap gap-2 sm:gap-3",
+							children: w.map((e, n) => {
+								let r = H.has(e.key);
+								return /* @__PURE__ */ b("button", {
 									type: "button",
-									onClick: () => {
-										if (Y(null), q(!1), !R) {
-											Y("We couldn't find your worker record yet, so availability can't be saved. Please try again once your cart owner has added you as a worker.");
-											return;
-										}
-										z.mutate({
-											id: R.id,
-											metadata: { availability: W }
-										}, {
-											onSuccess: () => q(!0),
-											onError: (e) => Y(e instanceof Error ? e.message : "Failed to save availability.")
-										});
+									onClick: () => ue(e.key),
+									"aria-pressed": r,
+									"aria-label": e.key,
+									className: t("flex h-11 w-11 items-center justify-center rounded-full text-sm font-semibold transition-colors", r ? "bg-action-primary-bg text-action-primary-text shadow-sm" : "border border-border-default bg-bg-surface text-text-secondary hover:bg-bg-sunken"),
+									children: e.short
+								}, `${e.key}-${n}`);
+							})
+						}),
+						/* @__PURE__ */ x("div", {
+							className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+							children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("label", {
+								className: "mb-1 block text-xs font-medium text-text-secondary",
+								children: "From"
+							}), /* @__PURE__ */ x("div", {
+								className: "flex items-center gap-2 rounded-md border border-border-subtle bg-bg-surface px-3 py-2",
+								children: [/* @__PURE__ */ b(p, { className: "h-4 w-4 text-accent-primary shrink-0" }), /* @__PURE__ */ b("input", {
+									type: "time",
+									value: W,
+									onChange: (e) => {
+										G(e.target.value), J(!1);
 									},
-									disabled: z.isPending,
-									className: "inline-flex items-center gap-2 rounded-md bg-[var(--color-accent-soft)] px-4 py-2 text-sm font-medium text-text-primary hover:bg-[var(--color-accent-soft)] transition-colors disabled:opacity-50",
-									children: [z.isPending ? /* @__PURE__ */ S(g, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ S(b, { className: "h-4 w-4" }), z.isPending ? "Saving..." : "Save Availability"]
-								}), K && !z.isPending && /* @__PURE__ */ S("span", {
-									className: "text-xs text-status-success-text",
-									children: "Availability preferences saved"
+									className: "w-full bg-transparent text-sm text-text-primary focus:outline-none"
 								})]
-							}),
-							J && /* @__PURE__ */ S("div", {
-								className: "mt-3 rounded-lg border border-status-error-text/20 bg-status-error-bg-subtle p-3",
-								children: /* @__PURE__ */ S("p", {
-									className: "text-xs text-status-error-text",
-									children: J
-								})
+							})] }), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("label", {
+								className: "mb-1 block text-xs font-medium text-text-secondary",
+								children: "To"
+							}), /* @__PURE__ */ x("div", {
+								className: "flex items-center gap-2 rounded-md border border-border-subtle bg-bg-surface px-3 py-2",
+								children: [/* @__PURE__ */ b(p, { className: "h-4 w-4 text-accent-primary shrink-0" }), /* @__PURE__ */ b("input", {
+									type: "time",
+									value: K,
+									onChange: (e) => {
+										q(e.target.value), J(!1);
+									},
+									className: "w-full bg-transparent text-sm text-text-primary focus:outline-none"
+								})]
+							})] })]
+						}),
+						/* @__PURE__ */ x("button", {
+							type: "button",
+							onClick: () => {
+								if (X(null), J(!1), !R) {
+									X("We couldn't find your worker record yet, so availability can't be saved. Please try again once your cart owner has added you as a worker.");
+									return;
+								}
+								let e = w.map((e) => ({
+									dayOfWeek: e.key,
+									isAvailable: H.has(e.key),
+									preferredStartTime: W,
+									preferredEndTime: K
+								}));
+								z.mutate({
+									id: R.id,
+									metadata: { availability: e }
+								}, {
+									onSuccess: () => J(!0),
+									onError: (e) => X(e instanceof Error ? e.message : "Failed to save availability.")
+								});
+							},
+							disabled: z.isPending,
+							className: "mt-5 inline-flex w-full items-center justify-center gap-2 rounded-[var(--radius-card)] bg-action-primary-bg px-4 py-3 text-sm font-semibold text-action-primary-text hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50 sm:w-auto sm:px-8",
+							children: [z.isPending ? /* @__PURE__ */ b(m, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ b(v, { className: "h-4 w-4" }), z.isPending ? "Saving..." : "Save Availability"]
+						}),
+						se && !z.isPending && /* @__PURE__ */ b("span", {
+							className: "ml-3 text-xs text-status-success-text",
+							children: "Availability saved"
+						}),
+						Y && /* @__PURE__ */ b("div", {
+							className: "mt-3 rounded-lg border border-status-error-text/20 bg-status-error-bg-subtle p-3",
+							children: /* @__PURE__ */ b("p", {
+								className: "text-xs text-status-error-text",
+								children: Y
 							})
-						] })
+						})
 					]
-				})]
-			})]
+				})
+			]
 		})]
 	});
 };
 //#endregion
-export { j as WorkerSchedulePage };
+export { M as WorkerSchedulePage };
 
 //# sourceMappingURL=WorkerSchedulePage.js.map