@burdenoff/microfe-coolandlovely 2026.625.1 → 2026.625.2

package/dist/coolandlovely/pages/cart-owner/StaffManagementPage.js

@@ -1,11 +1,13 @@
 import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
 import { cn as t } from "../../utils/cn.js";
 import { PageLayout as n } from "../../components/PageLayout.js";
-import { useMemo as r, useState as i } from "react";
-import { AlertCircle as a, CheckCircle2 as o, Clock as s, Edit2 as c, Mail as l, Phone as u, Search as d, Star as f, Trash2 as p, UserPlus as m, Users as h, X as g } from "lucide-react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { EmptyState as r } from "../../components/EmptyState.js";
+import { useMemo as i, useState as a } from "react";
+import { AlertCircle as o, CheckCircle2 as s, Clock as c, Edit2 as l, Mail as u, Phone as d, Search as f, Star as p, Trash2 as m, UserPlus as h, Users as g, X as _ } from "lucide-react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { EmphasisPanel as b, PagePurpose as x } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/cart-owner/StaffManagementPage.tsx
-var y = [
+var S = [
 	{
 		id: "staff-001",
 		firstName: "Ravi",
@@ -134,7 +136,7 @@ var y = [
 		currentShift: "08:00 - 16:00",
 		shiftsThisWeek: 6
 	}
-], b = {
+], C = {
 	active: {
 		label: "Active",
 		color: "text-status-success-text",
@@ -155,7 +157,7 @@ var y = [
 		color: "text-status-error-text",
 		dot: "bg-status-error-bg-subtle"
 	}
-}, x = {
+}, w = {
 	manager: {
 		label: "Manager",
 		color: "bg-accent-purple-subtle/20 text-accent-purple"
@@ -176,15 +178,15 @@ var y = [
 		label: "Cashier",
 		color: "bg-accent-cyan-subtle/20 text-accent-cyan"
 	}
-}, S = {
+}, T = {
 	email: "",
 	firstName: "",
 	lastName: "",
 	phone: "",
 	role: "server",
 	hourlyRate: 150
-}, C = () => {
-	let { navigateTo: C } = e(), [w, T] = i(y), [E, D] = i(""), [O, k] = i(""), [A, j] = i(""), [M, N] = i("name"), [P, F] = i(!1), [I, L] = i(!1), [R, z] = i(null), [B, V] = i(S), [H, U] = i({
+}, E = () => {
+	let { navigateTo: E } = e(), [D, O] = a(S), [k, A] = a(""), [j, M] = a(""), [N, P] = a(""), [F, I] = a("name"), [L, R] = a(!1), [z, B] = a(!1), [V, H] = a(null), [U, W] = a(T), [G, K] = a({
 		firstName: "",
 		lastName: "",
 		email: "",
@@ -192,20 +194,20 @@ var y = [
 		role: "server",
 		hourlyRate: 150,
 		status: "active"
-	}), [W, G] = i(null), K = (e, t) => {
-		G({
+	}), [q, J] = a(null), Y = (e, t) => {
+		J({
 			text: e,
 			type: t
-		}), setTimeout(() => G(null), 3e3);
-	}, q = w.filter((e) => e.status === "active").length, J = w.filter((e) => e.status === "on-leave").length, Y = w.length > 0 ? (w.reduce((e, t) => e + t.performance.rating, 0) / w.length).toFixed(1) : "0";
-	w.reduce((e, t) => e + t.totalEarnings, 0);
-	let X = r(() => {
-		let e = [...w];
-		if (E) {
-			let t = E.toLowerCase();
+		}), setTimeout(() => J(null), 3e3);
+	}, X = D.filter((e) => e.status === "active").length, Z = D.filter((e) => e.status === "on-leave").length, Q = D.length > 0 ? (D.reduce((e, t) => e + t.performance.rating, 0) / D.length).toFixed(1) : "0";
+	D.reduce((e, t) => e + t.totalEarnings, 0);
+	let $ = i(() => {
+		let e = [...D];
+		if (k) {
+			let t = k.toLowerCase();
 			e = e.filter((e) => `${e.firstName} ${e.lastName}`.toLowerCase().includes(t) || e.email.toLowerCase().includes(t) || e.phone.includes(t));
 		}
-		switch (O && (e = e.filter((e) => e.role === O)), A && (e = e.filter((e) => e.status === A)), M) {
+		switch (j && (e = e.filter((e) => e.role === j)), N && (e = e.filter((e) => e.status === N)), F) {
 			case "name":
 				e.sort((e, t) => `${e.firstName} ${e.lastName}`.localeCompare(`${t.firstName} ${t.lastName}`));
 				break;
@@ -221,19 +223,19 @@ var y = [
 		}
 		return e;
 	}, [
-		w,
-		E,
-		O,
-		A,
-		M
-	]), Z = () => {
-		if (!B.email || !B.firstName || !B.lastName) {
-			K("Please fill in all required fields", "error");
+		D,
+		k,
+		j,
+		N,
+		F
+	]), ee = () => {
+		if (!U.email || !U.firstName || !U.lastName) {
+			Y("Please fill in all required fields", "error");
 			return;
 		}
 		let e = {
 			id: `staff-${Date.now()}`,
-			...B,
+			...U,
 			status: "active",
 			dateJoined: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
 			hoursWorked: 0,
@@ -246,9 +248,9 @@ var y = [
 			},
 			shiftsThisWeek: 0
 		};
-		T((t) => [...t, e]), F(!1), V(S), K("Staff member invited successfully", "success");
-	}, Q = (e) => {
-		z(e), U({
+		O((t) => [...t, e]), R(!1), W(T), Y("Staff member invited successfully", "success");
+	}, te = (e) => {
+		H(e), K({
 			firstName: e.firstName,
 			lastName: e.lastName,
 			email: e.email,
@@ -256,14 +258,14 @@ var y = [
 			role: e.role,
 			hourlyRate: e.hourlyRate,
 			status: e.status
-		}), L(!0);
-	}, $ = () => {
-		R && (T((e) => e.map((e) => e.id === R.id ? {
+		}), B(!0);
+	}, ne = () => {
+		V && (O((e) => e.map((e) => e.id === V.id ? {
 			...e,
-			...H
-		} : e)), L(!1), K("Staff member updated successfully", "success"));
-	}, ee = (e) => {
-		T((t) => t.map((t) => {
+			...G
+		} : e)), B(!1), Y("Staff member updated successfully", "success"));
+	}, re = (e) => {
+		O((t) => t.map((t) => {
 			if (t.id === e) {
 				let e = t.status === "active" ? "inactive" : "active";
 				return {
@@ -272,134 +274,139 @@ var y = [
 				};
 			}
 			return t;
-		})), K("Staff status updated", "success");
-	}, te = (e) => {
-		confirm("Are you sure you want to remove this staff member?") && (T((t) => t.filter((t) => t.id !== e)), K("Staff member removed", "success"));
+		})), Y("Staff status updated", "success");
+	}, ie = (e) => {
+		confirm("Are you sure you want to remove this staff member?") && (O((t) => t.filter((t) => t.id !== e)), Y("Staff member removed", "success"));
 	};
-	return /* @__PURE__ */ v(n, {
+	return /* @__PURE__ */ y(n, {
 		title: "Staff Management",
 		description: "Manage your workers, delivery partners, and shifts",
-		actions: /* @__PURE__ */ v("button", {
+		actions: /* @__PURE__ */ y("button", {
 			type: "button",
 			onClick: () => {
-				V(S), F(!0);
+				W(T), R(!0);
 			},
 			className: "inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent/80 transition-colors",
-			children: [/* @__PURE__ */ _(m, { className: "h-4 w-4" }), "Invite Staff"]
+			children: [/* @__PURE__ */ v(h, { className: "h-4 w-4" }), "Invite Staff"]
 		}),
 		children: [
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ v(x, {
+				className: "mb-6",
+				icon: /* @__PURE__ */ v(g, { className: "h-4 w-4" }),
+				children: "Manage the people who keep your cart running. Invite workers and delivery partners, see who's active or on leave, track ratings and hours, and filter your team by role or status — so you always know who's available for the next shift."
+			}),
+			/* @__PURE__ */ y("div", {
 				className: "space-y-4",
 				children: [
-					W && /* @__PURE__ */ v("div", {
-						className: t("flex items-center gap-2 rounded-lg border p-3", W.type === "success" ? "border-status-success-border/30 bg-status-success-bg-subtle/10" : "border-status-error-border/30 bg-status-error-bg-subtle/10"),
-						children: [W.type === "success" ? /* @__PURE__ */ _(o, { className: "h-4 w-4 text-status-success-text" }) : /* @__PURE__ */ _(a, { className: "h-4 w-4 text-status-error-text" }), /* @__PURE__ */ _("span", {
-							className: t("text-sm font-medium", W.type === "success" ? "text-status-success-text" : "text-status-error-text"),
-							children: W.text
+					q && /* @__PURE__ */ y("div", {
+						className: t("flex items-center gap-2 rounded-lg border p-3", q.type === "success" ? "border-status-success-border/30 bg-status-success-bg-subtle/10" : "border-status-error-border/30 bg-status-error-bg-subtle/10"),
+						children: [q.type === "success" ? /* @__PURE__ */ v(s, { className: "h-4 w-4 text-status-success-text" }) : /* @__PURE__ */ v(o, { className: "h-4 w-4 text-status-error-text" }), /* @__PURE__ */ v("span", {
+							className: t("text-sm font-medium", q.type === "success" ? "text-status-success-text" : "text-status-error-text"),
+							children: q.text
 						})]
 					}),
-					/* @__PURE__ */ v("div", {
-						className: "grid grid-cols-2 sm:grid-cols-4 gap-3",
+					/* @__PURE__ */ y(b, {
+						className: "grid grid-cols-2 sm:grid-cols-4 gap-3 p-4",
 						children: [
-							/* @__PURE__ */ v("div", {
+							/* @__PURE__ */ y("div", {
 								className: "rounded-lg border border-border-seam bg-bg-surface p-4 bg-gloss-card shadow-pop",
-								children: [/* @__PURE__ */ _("p", {
+								children: [/* @__PURE__ */ v("p", {
 									className: "text-2xl font-bold text-text-primary",
-									children: w.length
-								}), /* @__PURE__ */ _("p", {
+									children: D.length
+								}), /* @__PURE__ */ v("p", {
 									className: "text-xs text-text-secondary",
 									children: "Total Staff"
 								})]
 							}),
-							/* @__PURE__ */ v("div", {
+							/* @__PURE__ */ y("div", {
 								className: "rounded-lg border border-border-seam bg-bg-surface p-4 bg-gloss-card shadow-pop",
-								children: [/* @__PURE__ */ _("p", {
+								children: [/* @__PURE__ */ v("p", {
 									className: "text-2xl font-bold text-status-success-text",
-									children: q
-								}), /* @__PURE__ */ _("p", {
+									children: X
+								}), /* @__PURE__ */ v("p", {
 									className: "text-xs text-text-secondary",
 									children: "Active Now"
 								})]
 							}),
-							/* @__PURE__ */ v("div", {
+							/* @__PURE__ */ y("div", {
 								className: "rounded-lg border border-border-seam bg-bg-surface p-4 bg-gloss-card shadow-pop",
-								children: [/* @__PURE__ */ _("p", {
+								children: [/* @__PURE__ */ v("p", {
 									className: "text-2xl font-bold text-status-warning-text",
-									children: J
-								}), /* @__PURE__ */ _("p", {
+									children: Z
+								}), /* @__PURE__ */ v("p", {
 									className: "text-xs text-text-secondary",
 									children: "On Leave"
 								})]
 							}),
-							/* @__PURE__ */ v("div", {
+							/* @__PURE__ */ y("div", {
 								className: "rounded-lg border border-border-seam bg-bg-surface p-4 bg-gloss-card shadow-pop",
-								children: [/* @__PURE__ */ _("p", {
+								children: [/* @__PURE__ */ v("p", {
 									className: "text-2xl font-bold text-text-primary",
-									children: Y
-								}), /* @__PURE__ */ _("p", {
+									children: Q
+								}), /* @__PURE__ */ v("p", {
 									className: "text-xs text-text-secondary",
 									children: "Avg. Rating"
 								})]
 							})
 						]
 					}),
-					/* @__PURE__ */ _("div", {
+					/* @__PURE__ */ v("div", {
 						className: "rounded-lg border border-border-seam bg-bg-surface p-4 bg-gloss-card shadow-pop",
-						children: /* @__PURE__ */ v("div", {
+						children: /* @__PURE__ */ y("div", {
 							className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3",
 							children: [
-								/* @__PURE__ */ v("div", {
+								/* @__PURE__ */ y("div", {
 									className: "relative",
-									children: [/* @__PURE__ */ _(d, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ _("input", {
+									children: [/* @__PURE__ */ v(f, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ v("input", {
 										type: "text",
 										placeholder: "Search staff...",
-										value: E,
-										onChange: (e) => D(e.target.value),
+										value: k,
+										onChange: (e) => A(e.target.value),
 										className: "w-full rounded-md border border-border-subtle bg-bg-surface pl-10 pr-4 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 									})]
 								}),
-								/* @__PURE__ */ v("select", {
-									value: O,
-									onChange: (e) => k(e.target.value),
+								/* @__PURE__ */ y("select", {
+									value: j,
+									onChange: (e) => M(e.target.value),
 									className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary",
-									children: [/* @__PURE__ */ _("option", {
+									children: [/* @__PURE__ */ v("option", {
 										value: "",
 										children: "All Roles"
-									}), Object.entries(x).map(([e, t]) => /* @__PURE__ */ _("option", {
+									}), Object.entries(w).map(([e, t]) => /* @__PURE__ */ v("option", {
 										value: e,
 										children: t.label
 									}, e))]
 								}),
-								/* @__PURE__ */ v("select", {
-									value: A,
-									onChange: (e) => j(e.target.value),
+								/* @__PURE__ */ y("select", {
+									value: N,
+									onChange: (e) => P(e.target.value),
 									className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary",
-									children: [/* @__PURE__ */ _("option", {
+									children: [/* @__PURE__ */ v("option", {
 										value: "",
 										children: "All Status"
-									}), Object.entries(b).map(([e, t]) => /* @__PURE__ */ _("option", {
+									}), Object.entries(C).map(([e, t]) => /* @__PURE__ */ v("option", {
 										value: e,
 										children: t.label
 									}, e))]
 								}),
-								/* @__PURE__ */ v("select", {
-									value: M,
-									onChange: (e) => N(e.target.value),
+								/* @__PURE__ */ y("select", {
+									value: F,
+									onChange: (e) => I(e.target.value),
 									className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary",
 									children: [
-										/* @__PURE__ */ _("option", {
+										/* @__PURE__ */ v("option", {
 											value: "name",
 											children: "Name A-Z"
 										}),
-										/* @__PURE__ */ _("option", {
+										/* @__PURE__ */ v("option", {
 											value: "rating",
 											children: "Rating: High to Low"
 										}),
-										/* @__PURE__ */ _("option", {
+										/* @__PURE__ */ v("option", {
 											value: "hours",
 											children: "Hours: Most Worked"
 										}),
-										/* @__PURE__ */ _("option", {
+										/* @__PURE__ */ v("option", {
 											value: "joined",
 											children: "Recently Joined"
 										})
@@ -408,41 +415,32 @@ var y = [
 							]
 						})
 					}),
-					X.length === 0 ? /* @__PURE__ */ v("div", {
-						className: "flex flex-col items-center justify-center py-16 rounded-lg border border-border-subtle bg-bg-surface shadow-sm text-center",
-						children: [
-							/* @__PURE__ */ _(h, { className: "h-12 w-12 text-text-secondary opacity-40 mb-3" }),
-							/* @__PURE__ */ _("p", {
-								className: "text-sm font-medium text-text-primary",
-								children: "No staff members found"
-							}),
-							/* @__PURE__ */ _("p", {
-								className: "text-xs text-text-secondary mt-1",
-								children: "Try adjusting your filters"
-							})
-						]
-					}) : /* @__PURE__ */ _("div", {
+					$.length === 0 ? /* @__PURE__ */ v(r, {
+						illustration: k || j || N ? "empty-search" : "empty-people",
+						title: "No staff members found",
+						description: k || j || N ? "Try adjusting your filters to see more team members." : "Invite workers and delivery partners to start building your team."
+					}) : /* @__PURE__ */ v("div", {
 						className: "rounded-lg border border-border-subtle bg-bg-surface shadow-sm divide-y divide-border",
-						children: X.map((e) => {
-							let n = b[e.status], r = x[e.role];
-							return /* @__PURE__ */ v("div", {
+						children: $.map((e) => {
+							let n = C[e.status], r = w[e.role];
+							return /* @__PURE__ */ y("div", {
 								className: "p-4 sm:p-5 hover:bg-bg-sunken/30 transition-colors",
-								children: [/* @__PURE__ */ v("div", {
+								children: [/* @__PURE__ */ y("div", {
 									className: "flex flex-col sm:flex-row sm:items-center gap-4",
-									children: [/* @__PURE__ */ v("div", {
+									children: [/* @__PURE__ */ y("div", {
 										className: "flex items-center gap-4 flex-1 min-w-0",
-										children: [/* @__PURE__ */ v("div", {
+										children: [/* @__PURE__ */ y("div", {
 											className: "relative shrink-0",
-											children: [/* @__PURE__ */ _("div", {
+											children: [/* @__PURE__ */ v("div", {
 												className: "flex h-12 w-12 items-center justify-center rounded-full bg-bg-sunken text-sm font-semibold text-text-primary",
 												children: `${e.firstName[0]}${e.lastName[0]}`
-											}), /* @__PURE__ */ _("span", { className: t("absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded-full border-2 border-card", n.dot) })]
-										}), /* @__PURE__ */ v("div", {
+											}), /* @__PURE__ */ v("span", { className: t("absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded-full border-2 border-card", n.dot) })]
+										}), /* @__PURE__ */ y("div", {
 											className: "flex-1 min-w-0",
-											children: [/* @__PURE__ */ v("div", {
+											children: [/* @__PURE__ */ y("div", {
 												className: "flex items-center gap-2 flex-wrap",
 												children: [
-													/* @__PURE__ */ v("p", {
+													/* @__PURE__ */ y("p", {
 														className: "text-sm font-medium text-text-primary",
 														children: [
 															e.firstName,
@@ -450,113 +448,113 @@ var y = [
 															e.lastName
 														]
 													}),
-													/* @__PURE__ */ _("span", {
+													/* @__PURE__ */ v("span", {
 														className: t("inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium", r.color),
 														children: r.label
 													}),
-													/* @__PURE__ */ _("span", {
+													/* @__PURE__ */ v("span", {
 														className: t("text-xs", n.color),
 														children: n.label
 													})
 												]
-											}), /* @__PURE__ */ v("div", {
+											}), /* @__PURE__ */ y("div", {
 												className: "flex items-center gap-3 mt-1 text-xs text-text-secondary flex-wrap",
-												children: [/* @__PURE__ */ v("span", {
+												children: [/* @__PURE__ */ y("span", {
 													className: "flex items-center gap-1",
-													children: [/* @__PURE__ */ _(l, { className: "h-3 w-3" }), e.email]
-												}), /* @__PURE__ */ v("span", {
+													children: [/* @__PURE__ */ v(u, { className: "h-3 w-3" }), e.email]
+												}), /* @__PURE__ */ y("span", {
 													className: "flex items-center gap-1",
-													children: [/* @__PURE__ */ _(u, { className: "h-3 w-3" }), e.phone]
+													children: [/* @__PURE__ */ v(d, { className: "h-3 w-3" }), e.phone]
 												})]
 											})]
 										})]
-									}), /* @__PURE__ */ v("div", {
+									}), /* @__PURE__ */ y("div", {
 										className: "flex items-center gap-4 sm:gap-6",
-										children: [/* @__PURE__ */ v("div", {
+										children: [/* @__PURE__ */ y("div", {
 											className: "hidden md:flex items-center gap-4 text-xs",
 											children: [
-												/* @__PURE__ */ v("div", {
+												/* @__PURE__ */ y("div", {
 													className: "text-center",
-													children: [/* @__PURE__ */ v("p", {
+													children: [/* @__PURE__ */ y("p", {
 														className: "font-bold text-text-primary flex items-center gap-0.5 justify-center",
-														children: [/* @__PURE__ */ _(f, { className: "h-3 w-3 fill-status-warning-text text-status-warning-text" }), e.performance.rating]
-													}), /* @__PURE__ */ _("p", {
+														children: [/* @__PURE__ */ v(p, { className: "h-3 w-3 fill-status-warning-text text-status-warning-text" }), e.performance.rating]
+													}), /* @__PURE__ */ v("p", {
 														className: "text-text-secondary",
 														children: "Rating"
 													})]
 												}),
-												/* @__PURE__ */ v("div", {
+												/* @__PURE__ */ y("div", {
 													className: "text-center",
-													children: [/* @__PURE__ */ _("p", {
+													children: [/* @__PURE__ */ v("p", {
 														className: "font-bold text-text-primary",
 														children: e.performance.tasksCompleted
-													}), /* @__PURE__ */ _("p", {
+													}), /* @__PURE__ */ v("p", {
 														className: "text-text-secondary",
 														children: "Tasks"
 													})]
 												}),
-												/* @__PURE__ */ v("div", {
+												/* @__PURE__ */ y("div", {
 													className: "text-center",
-													children: [/* @__PURE__ */ v("p", {
+													children: [/* @__PURE__ */ y("p", {
 														className: "font-bold text-text-primary",
 														children: [e.performance.punctuality, "%"]
-													}), /* @__PURE__ */ _("p", {
+													}), /* @__PURE__ */ v("p", {
 														className: "text-text-secondary",
 														children: "On Time"
 													})]
 												}),
-												e.currentShift && /* @__PURE__ */ v("div", {
+												e.currentShift && /* @__PURE__ */ y("div", {
 													className: "text-center",
-													children: [/* @__PURE__ */ v("p", {
+													children: [/* @__PURE__ */ y("p", {
 														className: "font-bold text-text-primary flex items-center gap-0.5 justify-center",
-														children: [/* @__PURE__ */ _(s, { className: "h-3 w-3 text-text-secondary" }), e.currentShift]
-													}), /* @__PURE__ */ _("p", {
+														children: [/* @__PURE__ */ v(c, { className: "h-3 w-3 text-text-secondary" }), e.currentShift]
+													}), /* @__PURE__ */ v("p", {
 														className: "text-text-secondary",
 														children: "Shift"
 													})]
 												})
 											]
-										}), /* @__PURE__ */ v("div", {
+										}), /* @__PURE__ */ y("div", {
 											className: "flex items-center gap-1",
 											children: [
-												/* @__PURE__ */ _("button", {
+												/* @__PURE__ */ v("button", {
 													type: "button",
-													onClick: () => ee(e.id),
+													onClick: () => re(e.id),
 													className: t("h-6 w-11 rounded-full transition-colors relative", e.status === "active" ? "bg-status-success-bg-subtle" : "bg-muted-foreground/30"),
 													title: e.status === "active" ? "Deactivate" : "Activate",
-													children: /* @__PURE__ */ _("div", { className: t("absolute top-0.5 h-5 w-5 rounded-full bg-white transition-transform", e.status === "active" ? "translate-x-5" : "translate-x-0.5") })
+													children: /* @__PURE__ */ v("div", { className: t("absolute top-0.5 h-5 w-5 rounded-full bg-white transition-transform", e.status === "active" ? "translate-x-5" : "translate-x-0.5") })
 												}),
-												/* @__PURE__ */ _("button", {
+												/* @__PURE__ */ v("button", {
 													type: "button",
-													onClick: () => Q(e),
+													onClick: () => te(e),
 													className: "rounded p-1.5 text-text-secondary hover:bg-bg-sunken hover:text-text-primary transition-colors",
 													title: "Edit",
-													children: /* @__PURE__ */ _(c, { className: "h-4 w-4" })
+													children: /* @__PURE__ */ v(l, { className: "h-4 w-4" })
 												}),
-												/* @__PURE__ */ _("button", {
+												/* @__PURE__ */ v("button", {
 													type: "button",
-													onClick: () => te(e.id),
+													onClick: () => ie(e.id),
 													className: "rounded p-1.5 text-text-secondary hover:bg-status-error-bg-subtle/10 hover:text-status-error-text transition-colors",
 													title: "Remove",
-													children: /* @__PURE__ */ _(p, { className: "h-4 w-4" })
+													children: /* @__PURE__ */ v(m, { className: "h-4 w-4" })
 												})
 											]
 										})]
 									})]
-								}), /* @__PURE__ */ v("div", {
+								}), /* @__PURE__ */ y("div", {
 									className: "md:hidden flex items-center gap-4 mt-3 text-xs text-text-secondary",
 									children: [
-										/* @__PURE__ */ v("span", {
+										/* @__PURE__ */ y("span", {
 											className: "flex items-center gap-0.5",
-											children: [/* @__PURE__ */ _(f, { className: "h-3 w-3 fill-status-warning-text text-status-warning-text" }), e.performance.rating]
+											children: [/* @__PURE__ */ v(p, { className: "h-3 w-3 fill-status-warning-text text-status-warning-text" }), e.performance.rating]
 										}),
-										/* @__PURE__ */ v("span", { children: [e.performance.tasksCompleted, " tasks"] }),
-										/* @__PURE__ */ v("span", { children: [e.performance.punctuality, "% on time"] }),
-										e.currentShift && /* @__PURE__ */ v("span", {
+										/* @__PURE__ */ y("span", { children: [e.performance.tasksCompleted, " tasks"] }),
+										/* @__PURE__ */ y("span", { children: [e.performance.punctuality, "% on time"] }),
+										e.currentShift && /* @__PURE__ */ y("span", {
 											className: "flex items-center gap-0.5",
-											children: [/* @__PURE__ */ _(s, { className: "h-3 w-3" }), e.currentShift]
+											children: [/* @__PURE__ */ v(c, { className: "h-3 w-3" }), e.currentShift]
 										}),
-										/* @__PURE__ */ v("span", { children: [e.shiftsThisWeek, " shifts/wk"] })
+										/* @__PURE__ */ y("span", { children: [e.shiftsThisWeek, " shifts/wk"] })
 									]
 								})]
 							}, e.id);
@@ -564,101 +562,101 @@ var y = [
 					})
 				]
 			}),
-			P && /* @__PURE__ */ _("div", {
+			L && /* @__PURE__ */ v("div", {
 				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
-				children: /* @__PURE__ */ _("div", {
+				children: /* @__PURE__ */ v("div", {
 					className: "w-full max-w-lg rounded-lg border border-border-subtle bg-bg-surface shadow-xl",
-					children: /* @__PURE__ */ v("div", {
+					children: /* @__PURE__ */ y("div", {
 						className: "p-6",
 						children: [
-							/* @__PURE__ */ v("div", {
+							/* @__PURE__ */ y("div", {
 								className: "flex items-center justify-between mb-4",
-								children: [/* @__PURE__ */ _("h3", {
+								children: [/* @__PURE__ */ v("h3", {
 									className: "text-lg font-semibold text-text-primary",
 									children: "Invite Staff Member"
-								}), /* @__PURE__ */ _("button", {
+								}), /* @__PURE__ */ v("button", {
 									type: "button",
-									onClick: () => F(!1),
+									onClick: () => R(!1),
 									className: "rounded p-1.5 text-text-secondary hover:text-text-primary hover:bg-bg-sunken",
-									children: /* @__PURE__ */ _(g, { className: "h-5 w-5" })
+									children: /* @__PURE__ */ v(_, { className: "h-5 w-5" })
 								})]
 							}),
-							/* @__PURE__ */ v("div", {
+							/* @__PURE__ */ y("div", {
 								className: "space-y-4",
 								children: [
-									/* @__PURE__ */ v("div", {
+									/* @__PURE__ */ y("div", {
 										className: "grid grid-cols-2 gap-4",
-										children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+										children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 											className: "block text-sm font-medium text-text-primary mb-1",
 											children: "First Name *"
-										}), /* @__PURE__ */ _("input", {
+										}), /* @__PURE__ */ v("input", {
 											type: "text",
-											value: B.firstName,
-											onChange: (e) => V((t) => ({
+											value: U.firstName,
+											onChange: (e) => W((t) => ({
 												...t,
 												firstName: e.target.value
 											})),
 											className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
-										})] }), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+										})] }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 											className: "block text-sm font-medium text-text-primary mb-1",
 											children: "Last Name *"
-										}), /* @__PURE__ */ _("input", {
+										}), /* @__PURE__ */ v("input", {
 											type: "text",
-											value: B.lastName,
-											onChange: (e) => V((t) => ({
+											value: U.lastName,
+											onChange: (e) => W((t) => ({
 												...t,
 												lastName: e.target.value
 											})),
 											className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 										})] })]
 									}),
-									/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+									/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 										className: "block text-sm font-medium text-text-primary mb-1",
 										children: "Email *"
-									}), /* @__PURE__ */ _("input", {
+									}), /* @__PURE__ */ v("input", {
 										type: "email",
-										value: B.email,
-										onChange: (e) => V((t) => ({
+										value: U.email,
+										onChange: (e) => W((t) => ({
 											...t,
 											email: e.target.value
 										})),
 										className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 									})] }),
-									/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+									/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 										className: "block text-sm font-medium text-text-primary mb-1",
 										children: "Phone"
-									}), /* @__PURE__ */ _("input", {
+									}), /* @__PURE__ */ v("input", {
 										type: "tel",
-										value: B.phone,
-										onChange: (e) => V((t) => ({
+										value: U.phone,
+										onChange: (e) => W((t) => ({
 											...t,
 											phone: e.target.value
 										})),
 										className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 									})] }),
-									/* @__PURE__ */ v("div", {
+									/* @__PURE__ */ y("div", {
 										className: "grid grid-cols-2 gap-4",
-										children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+										children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 											className: "block text-sm font-medium text-text-primary mb-1",
 											children: "Role"
-										}), /* @__PURE__ */ _("select", {
-											value: B.role,
-											onChange: (e) => V((t) => ({
+										}), /* @__PURE__ */ v("select", {
+											value: U.role,
+											onChange: (e) => W((t) => ({
 												...t,
 												role: e.target.value
 											})),
 											className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary",
-											children: Object.entries(x).map(([e, t]) => /* @__PURE__ */ _("option", {
+											children: Object.entries(w).map(([e, t]) => /* @__PURE__ */ v("option", {
 												value: e,
 												children: t.label
 											}, e))
-										})] }), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+										})] }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 											className: "block text-sm font-medium text-text-primary mb-1",
 											children: "Hourly Rate (₹)"
-										}), /* @__PURE__ */ _("input", {
+										}), /* @__PURE__ */ v("input", {
 											type: "number",
-											value: B.hourlyRate,
-											onChange: (e) => V((t) => ({
+											value: U.hourlyRate,
+											onChange: (e) => W((t) => ({
 												...t,
 												hourlyRate: parseInt(e.target.value) || 0
 											})),
@@ -667,16 +665,16 @@ var y = [
 									})
 								]
 							}),
-							/* @__PURE__ */ v("div", {
+							/* @__PURE__ */ y("div", {
 								className: "flex gap-3 mt-6",
-								children: [/* @__PURE__ */ _("button", {
+								children: [/* @__PURE__ */ v("button", {
 									type: "button",
-									onClick: () => F(!1),
+									onClick: () => R(!1),
 									className: "flex-1 rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
 									children: "Cancel"
-								}), /* @__PURE__ */ _("button", {
+								}), /* @__PURE__ */ v("button", {
 									type: "button",
-									onClick: Z,
+									onClick: ee,
 									className: "flex-1 rounded-md bg-accent px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent/80",
 									children: "Send Invite"
 								})]
@@ -685,119 +683,119 @@ var y = [
 					})
 				})
 			}),
-			I && R && /* @__PURE__ */ _("div", {
+			z && V && /* @__PURE__ */ v("div", {
 				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
-				children: /* @__PURE__ */ _("div", {
+				children: /* @__PURE__ */ v("div", {
 					className: "w-full max-w-lg rounded-lg border border-border-subtle bg-bg-surface shadow-xl",
-					children: /* @__PURE__ */ v("div", {
+					children: /* @__PURE__ */ y("div", {
 						className: "p-6",
 						children: [
-							/* @__PURE__ */ v("div", {
+							/* @__PURE__ */ y("div", {
 								className: "flex items-center justify-between mb-4",
-								children: [/* @__PURE__ */ _("h3", {
+								children: [/* @__PURE__ */ v("h3", {
 									className: "text-lg font-semibold text-text-primary",
 									children: "Edit Staff Member"
-								}), /* @__PURE__ */ _("button", {
+								}), /* @__PURE__ */ v("button", {
 									type: "button",
-									onClick: () => L(!1),
+									onClick: () => B(!1),
 									className: "rounded p-1.5 text-text-secondary hover:text-text-primary hover:bg-bg-sunken",
-									children: /* @__PURE__ */ _(g, { className: "h-5 w-5" })
+									children: /* @__PURE__ */ v(_, { className: "h-5 w-5" })
 								})]
 							}),
-							/* @__PURE__ */ v("div", {
+							/* @__PURE__ */ y("div", {
 								className: "space-y-4",
 								children: [
-									/* @__PURE__ */ v("div", {
+									/* @__PURE__ */ y("div", {
 										className: "grid grid-cols-2 gap-4",
-										children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+										children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 											className: "block text-sm font-medium text-text-primary mb-1",
 											children: "First Name"
-										}), /* @__PURE__ */ _("input", {
+										}), /* @__PURE__ */ v("input", {
 											type: "text",
-											value: H.firstName,
-											onChange: (e) => U((t) => ({
+											value: G.firstName,
+											onChange: (e) => K((t) => ({
 												...t,
 												firstName: e.target.value
 											})),
 											className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
-										})] }), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+										})] }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 											className: "block text-sm font-medium text-text-primary mb-1",
 											children: "Last Name"
-										}), /* @__PURE__ */ _("input", {
+										}), /* @__PURE__ */ v("input", {
 											type: "text",
-											value: H.lastName,
-											onChange: (e) => U((t) => ({
+											value: G.lastName,
+											onChange: (e) => K((t) => ({
 												...t,
 												lastName: e.target.value
 											})),
 											className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 										})] })]
 									}),
-									/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+									/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 										className: "block text-sm font-medium text-text-primary mb-1",
 										children: "Email"
-									}), /* @__PURE__ */ _("input", {
+									}), /* @__PURE__ */ v("input", {
 										type: "email",
-										value: H.email,
-										onChange: (e) => U((t) => ({
+										value: G.email,
+										onChange: (e) => K((t) => ({
 											...t,
 											email: e.target.value
 										})),
 										className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 									})] }),
-									/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+									/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 										className: "block text-sm font-medium text-text-primary mb-1",
 										children: "Phone"
-									}), /* @__PURE__ */ _("input", {
+									}), /* @__PURE__ */ v("input", {
 										type: "tel",
-										value: H.phone,
-										onChange: (e) => U((t) => ({
+										value: G.phone,
+										onChange: (e) => K((t) => ({
 											...t,
 											phone: e.target.value
 										})),
 										className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 									})] }),
-									/* @__PURE__ */ v("div", {
+									/* @__PURE__ */ y("div", {
 										className: "grid grid-cols-3 gap-4",
 										children: [
-											/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+											/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 												className: "block text-sm font-medium text-text-primary mb-1",
 												children: "Role"
-											}), /* @__PURE__ */ _("select", {
-												value: H.role,
-												onChange: (e) => U((t) => ({
+											}), /* @__PURE__ */ v("select", {
+												value: G.role,
+												onChange: (e) => K((t) => ({
 													...t,
 													role: e.target.value
 												})),
 												className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary",
-												children: Object.entries(x).map(([e, t]) => /* @__PURE__ */ _("option", {
+												children: Object.entries(w).map(([e, t]) => /* @__PURE__ */ v("option", {
 													value: e,
 													children: t.label
 												}, e))
 											})] }),
-											/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+											/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 												className: "block text-sm font-medium text-text-primary mb-1",
 												children: "Rate (₹/hr)"
-											}), /* @__PURE__ */ _("input", {
+											}), /* @__PURE__ */ v("input", {
 												type: "number",
-												value: H.hourlyRate,
-												onChange: (e) => U((t) => ({
+												value: G.hourlyRate,
+												onChange: (e) => K((t) => ({
 													...t,
 													hourlyRate: parseInt(e.target.value) || 0
 												})),
 												className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 											})] }),
-											/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+											/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 												className: "block text-sm font-medium text-text-primary mb-1",
 												children: "Status"
-											}), /* @__PURE__ */ _("select", {
-												value: H.status,
-												onChange: (e) => U((t) => ({
+											}), /* @__PURE__ */ v("select", {
+												value: G.status,
+												onChange: (e) => K((t) => ({
 													...t,
 													status: e.target.value
 												})),
 												className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary",
-												children: Object.entries(b).map(([e, t]) => /* @__PURE__ */ _("option", {
+												children: Object.entries(C).map(([e, t]) => /* @__PURE__ */ v("option", {
 													value: e,
 													children: t.label
 												}, e))
@@ -806,16 +804,16 @@ var y = [
 									})
 								]
 							}),
-							/* @__PURE__ */ v("div", {
+							/* @__PURE__ */ y("div", {
 								className: "flex gap-3 mt-6",
-								children: [/* @__PURE__ */ _("button", {
+								children: [/* @__PURE__ */ v("button", {
 									type: "button",
-									onClick: () => L(!1),
+									onClick: () => B(!1),
 									className: "flex-1 rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
 									children: "Cancel"
-								}), /* @__PURE__ */ _("button", {
+								}), /* @__PURE__ */ v("button", {
 									type: "button",
-									onClick: $,
+									onClick: ne,
 									className: "flex-1 rounded-md bg-accent px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent/80",
 									children: "Save Changes"
 								})]
@@ -828,6 +826,6 @@ var y = [
 	});
 };
 //#endregion
-export { C as StaffManagementPage };
+export { E as StaffManagementPage };
 
 //# sourceMappingURL=StaffManagementPage.js.map