@burdenoff/microfe-subscriberbot 2026.624.1 → 2026.626.1

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

@@ -1,11 +1,13 @@
 import { useSubscriberBot as e } from "../../context/SubscriberBotContext.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/subscriberbot/pages/cart-owner/StaffManagementPage.tsx
-var y = [
+var S = [
 	{
 		id: "staff-001",
 		firstName: "Ravi",
@@ -134,11 +136,11 @@ var y = [
 		currentShift: "08:00 - 16:00",
 		shiftsThisWeek: 6
 	}
-], b = {
+], C = {
 	active: {
 		label: "Active",
-		color: "text-green-600 dark:text-green-400",
-		dot: "bg-green-500"
+		color: "text-status-success-text",
+		dot: "bg-status-success-text"
 	},
 	inactive: {
 		label: "Inactive",
@@ -147,44 +149,44 @@ var y = [
 	},
 	"on-leave": {
 		label: "On Leave",
-		color: "text-yellow-600 dark:text-yellow-400",
-		dot: "bg-yellow-500"
+		color: "text-status-warning-text",
+		dot: "bg-status-warning-text"
 	},
 	terminated: {
 		label: "Terminated",
-		color: "text-red-600 dark:text-red-400",
-		dot: "bg-red-500"
+		color: "text-status-error-text",
+		dot: "bg-status-error-text"
 	}
-}, x = {
+}, w = {
 	manager: {
 		label: "Manager",
-		color: "bg-purple-500/20 text-purple-600 dark:text-purple-400"
+		color: "bg-accent-purple-subtle text-accent-purple"
 	},
 	chef: {
 		label: "Chef",
-		color: "bg-orange-500/20 text-orange-600 dark:text-orange-400"
+		color: "bg-status-warning-bg/20 text-status-warning-text"
 	},
 	server: {
 		label: "Server",
-		color: "bg-blue-500/20 text-blue-600 dark:text-blue-400"
+		color: "bg-status-info-bg/20 text-status-info-text"
 	},
 	delivery: {
 		label: "Delivery",
-		color: "bg-green-500/20 text-green-600 dark:text-green-400"
+		color: "bg-status-success-bg/20 text-status-success-text"
 	},
 	cashier: {
 		label: "Cashier",
-		color: "bg-cyan-500/20 text-cyan-600 dark:text-cyan-400"
+		color: "bg-status-info-bg/20 text-status-info-text"
 	}
-}, 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,138 @@ 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__ */ 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-green-500/30 bg-green-500/10" : "border-red-500/30 bg-red-500/10"),
-						children: [W.type === "success" ? /* @__PURE__ */ _(o, { className: "h-4 w-4 text-green-600 dark:text-green-400" }) : /* @__PURE__ */ _(a, { className: "h-4 w-4 text-red-600 dark:text-red-400" }), /* @__PURE__ */ _("span", {
-							className: t("text-sm font-medium", W.type === "success" ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"),
-							children: W.text
+					/* @__PURE__ */ v(x, {
+						icon: /* @__PURE__ */ v(g, { className: "h-4 w-4" }),
+						children: "Build and run your team from one place. Invite chefs, servers and delivery partners, assign roles, and keep track of who's active, on leave or off duty. Staff ratings help you spot your strongest performers and anyone who needs a hand — so every shift is covered by the right people."
+					}),
+					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/10" : "border-status-error-border/30 bg-status-error-bg/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", {
+					/* @__PURE__ */ y(b, {
 						className: "grid grid-cols-2 sm:grid-cols-4 gap-3",
 						children: [
-							/* @__PURE__ */ v("div", {
-								className: "rounded-lg border border-border-subtle bg-bg-surface p-4 shadow-sm",
-								children: [/* @__PURE__ */ _("p", {
+							/* @__PURE__ */ y("div", {
+								className: "rounded-lg border border-border-seam bg-bg-surface p-4 shadow-sm",
+								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", {
-								className: "rounded-lg border border-border-subtle bg-bg-surface p-4 shadow-sm",
-								children: [/* @__PURE__ */ _("p", {
-									className: "text-2xl font-bold text-green-600 dark:text-green-400",
-									children: q
-								}), /* @__PURE__ */ _("p", {
+							/* @__PURE__ */ y("div", {
+								className: "rounded-lg border border-border-seam bg-bg-surface p-4 shadow-sm",
+								children: [/* @__PURE__ */ v("p", {
+									className: "text-2xl font-bold text-status-success-text",
+									children: X
+								}), /* @__PURE__ */ v("p", {
 									className: "text-xs text-text-secondary",
 									children: "Active Now"
 								})]
 							}),
-							/* @__PURE__ */ v("div", {
-								className: "rounded-lg border border-border-subtle bg-bg-surface p-4 shadow-sm",
-								children: [/* @__PURE__ */ _("p", {
-									className: "text-2xl font-bold text-yellow-600 dark:text-yellow-400",
-									children: J
-								}), /* @__PURE__ */ _("p", {
+							/* @__PURE__ */ y("div", {
+								className: "rounded-lg border border-border-seam bg-bg-surface p-4 shadow-sm",
+								children: [/* @__PURE__ */ v("p", {
+									className: "text-2xl font-bold text-status-warning-text",
+									children: Z
+								}), /* @__PURE__ */ v("p", {
 									className: "text-xs text-text-secondary",
 									children: "On Leave"
 								})]
 							}),
-							/* @__PURE__ */ v("div", {
-								className: "rounded-lg border border-border-subtle bg-bg-surface p-4 shadow-sm",
-								children: [/* @__PURE__ */ _("p", {
+							/* @__PURE__ */ y("div", {
+								className: "rounded-lg border border-border-seam bg-bg-surface p-4 shadow-sm",
+								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", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 shadow-sm",
-						children: /* @__PURE__ */ v("div", {
+					/* @__PURE__ */ v("div", {
+						className: "rounded-lg border border-border-seam bg-bg-surface p-4 shadow-sm",
+						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),
-										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)]"
+										value: k,
+										onChange: (e) => A(e.target.value),
+										className: "w-full rounded-md border border-border-seam 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),
-									className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary",
-									children: [/* @__PURE__ */ _("option", {
+								/* @__PURE__ */ y("select", {
+									value: j,
+									onChange: (e) => M(e.target.value),
+									className: "rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary",
+									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),
-									className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary",
-									children: [/* @__PURE__ */ _("option", {
+								/* @__PURE__ */ y("select", {
+									value: N,
+									onChange: (e) => P(e.target.value),
+									className: "rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary",
+									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),
-									className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary",
+								/* @__PURE__ */ y("select", {
+									value: F,
+									onChange: (e) => I(e.target.value),
+									className: "rounded-md border border-border-seam 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 +414,40 @@ 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", {
-						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", {
+					$.length === 0 ? /* @__PURE__ */ v(r, {
+						illustration: "empty-people",
+						title: "No staff members found",
+						description: "Try adjusting your filters, or invite your first team member to get started.",
+						action: /* @__PURE__ */ y("button", {
+							type: "button",
+							onClick: () => {
+								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__ */ v(h, { className: "h-4 w-4" }), "Invite Staff"]
+						})
+					}) : /* @__PURE__ */ v("div", {
+						className: "rounded-lg border border-border-seam bg-bg-surface shadow-sm divide-y divide-border",
+						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 +455,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-yellow-400 text-yellow-400" }), 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),
-													className: t("h-6 w-11 rounded-full transition-colors relative", e.status === "active" ? "bg-green-500" : "bg-muted-foreground/30"),
+													onClick: () => re(e.id),
+													className: t("h-6 w-11 rounded-full transition-colors relative", e.status === "active" ? "bg-status-success-text" : "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-bg-surface 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),
-													className: "rounded p-1.5 text-text-secondary hover:bg-red-500/10 hover:text-red-600 transition-colors",
+													onClick: () => ie(e.id),
+													className: "rounded p-1.5 text-text-secondary hover:bg-status-error-bg/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-yellow-400 text-yellow-400" }), 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,119 +569,119 @@ var y = [
 					})
 				]
 			}),
-			P && /* @__PURE__ */ _("div", {
-				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
-				children: /* @__PURE__ */ _("div", {
-					className: "w-full max-w-lg rounded-lg border border-border-subtle bg-bg-surface shadow-xl",
-					children: /* @__PURE__ */ v("div", {
+			L && /* @__PURE__ */ v("div", {
+				className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-canvas/50 p-4",
+				children: /* @__PURE__ */ v("div", {
+					className: "w-full max-w-lg rounded-lg border border-border-seam bg-bg-surface shadow-xl",
+					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", {
+											className: "w-full rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary"
+										})] }), /* @__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"
+											className: "w-full rounded-md border border-border-seam 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"
+										className: "w-full rounded-md border border-border-seam 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"
+										className: "w-full rounded-md border border-border-seam 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", {
+											className: "w-full rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary",
+											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
 											})),
-											className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
+											className: "w-full rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary"
 										})] })]
 									})
 								]
 							}),
-							/* @__PURE__ */ v("div", {
+							/* @__PURE__ */ y("div", {
 								className: "flex gap-3 mt-6",
-								children: [/* @__PURE__ */ _("button", {
+								children: [/* @__PURE__ */ v("button", {
 									type: "button",
-									onClick: () => F(!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",
+									onClick: () => R(!1),
+									className: "flex-1 rounded-md border border-border-seam 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 +690,119 @@ var y = [
 					})
 				})
 			}),
-			I && R && /* @__PURE__ */ _("div", {
-				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
-				children: /* @__PURE__ */ _("div", {
-					className: "w-full max-w-lg rounded-lg border border-border-subtle bg-bg-surface shadow-xl",
-					children: /* @__PURE__ */ v("div", {
+			z && V && /* @__PURE__ */ v("div", {
+				className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-canvas/50 p-4",
+				children: /* @__PURE__ */ v("div", {
+					className: "w-full max-w-lg rounded-lg border border-border-seam bg-bg-surface shadow-xl",
+					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", {
+											className: "w-full rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary"
+										})] }), /* @__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"
+											className: "w-full rounded-md border border-border-seam 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"
+										className: "w-full rounded-md border border-border-seam 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"
+										className: "w-full rounded-md border border-border-seam 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", {
+												className: "w-full rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary",
+												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"
+												className: "w-full rounded-md border border-border-seam 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", {
+												className: "w-full rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary",
+												children: Object.entries(C).map(([e, t]) => /* @__PURE__ */ v("option", {
 													value: e,
 													children: t.label
 												}, e))
@@ -806,16 +811,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),
-									className: "flex-1 rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
+									onClick: () => B(!1),
+									className: "flex-1 rounded-md border border-border-seam 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 +833,6 @@ var y = [
 	});
 };
 //#endregion
-export { C as StaffManagementPage };
+export { E as StaffManagementPage };
 
 //# sourceMappingURL=StaffManagementPage.js.map