@burdenoff/microfe-crewfoundry 2026.704.6 → 2026.704.7

package/dist/crewfoundry/pages/HrLeaveManagementPagePage.js

@@ -1,15 +1,19 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { formatEnumLabel as t } from "../utils/formatEnumLabel.js";
-import { FormModal as n, useFormModal as r } from "../components/forms/FormModal.js";
-import { getNumber as i, getText as a, newClientId as o } from "../components/forms/formValues.js";
-import { useMemo as s } from "react";
-import { Calendar as c, CheckCircle as l, Clock as u, XCircle as d } from "lucide-react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { Badge as m, Button as h, Card as g, CardContent as _, CardDescription as v, CardHeader as y, CardTitle as b, GlassCard as x, GradientText as S, PagePurpose as C, Pagination as w, ResponsiveTable as T } from "@burdenoff/fe-libs/ui";
-import { usePagination as E } from "@burdenoff/fe-libs/shared/hooks";
-import { useAuth as D, useGlobalUi as O } from "@burdenoff/fe-libs/shared/providers/shell";
+import { StatCard as n } from "../components/viz/StatCard.js";
+import { AvatarStack as r } from "../components/viz/AvatarStack.js";
+import { SegmentedTabs as i } from "../components/viz/SegmentedTabs.js";
+import "../components/viz/index.js";
+import { FormModal as a, useFormModal as o } from "../components/forms/FormModal.js";
+import { getNumber as s, getText as c, newClientId as l } from "../components/forms/formValues.js";
+import { useMemo as u, useState as d } from "react";
+import { Calendar as f, CheckCircle as p, ChevronLeft as m, ChevronRight as h, Clock as g, XCircle as _ } from "lucide-react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { Badge as b, Button as x, Card as S, CardContent as C, CardDescription as w, CardHeader as T, CardTitle as E, GradientText as D, PagePurpose as O, Pagination as ee, ResponsiveTable as te } from "@burdenoff/fe-libs/ui";
+import { usePagination as k } from "@burdenoff/fe-libs/shared/hooks";
+import { useAuth as A, useGlobalUi as j } from "@burdenoff/fe-libs/shared/providers/shell";
 //#region src/crewfoundry/pages/HrLeaveManagementPagePage.tsx
-var k = [
+var ne = [
 	{
 		label: "Annual",
 		value: "annual"
@@ -34,18 +38,167 @@ var k = [
 		label: "Unpaid",
 		value: "unpaid"
 	}
-], A = (e) => e.split("_").map((e) => e[0]?.toUpperCase() + e.slice(1)).join(" ");
-function j() {
-	let { leaveRequests: j, employees: M, addLeaveRequest: N, updateLeaveRequest: P } = e(), { showToast: F } = O(), { currentUser: I } = D(), L = r(), R = I?.name || [I?.firstName, I?.lastName].filter(Boolean).join(" ") || I?.email || "Manager", z = s(() => M.map((e) => ({
+], M = (e) => e.split("_").map((e) => e[0]?.toUpperCase() + e.slice(1)).join(" "), N = {
+	annual: {
+		label: "Annual",
+		dot: "var(--color-status-success-text)",
+		cell: "bg-status-success-bg"
+	},
+	sick: {
+		label: "Sick",
+		dot: "var(--color-status-warning-text)",
+		cell: "bg-status-warning-bg"
+	},
+	personal: {
+		label: "Personal",
+		dot: "var(--color-status-info-text)",
+		cell: "bg-status-info-bg"
+	},
+	maternity: {
+		label: "Maternity",
+		dot: "var(--color-accent-purple)",
+		cell: "bg-bg-sunken"
+	},
+	paternity: {
+		label: "Paternity",
+		dot: "var(--color-accent-teal)",
+		cell: "bg-bg-sunken"
+	},
+	unpaid: {
+		label: "Unpaid",
+		dot: "var(--color-text-muted)",
+		cell: "bg-bg-sunken"
+	}
+}, P = (e) => N[e] ?? {
+	label: M(e),
+	dot: "var(--color-accent-blue)",
+	cell: "bg-bg-sunken"
+}, F = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+], I = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+], L = (e) => `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`, R = (e) => e.slice(0, 10);
+function z({ leaveRequests: e, monthCursor: t, onPrev: n, onNext: r }) {
+	let i = t.getFullYear(), a = t.getMonth(), o = L(/* @__PURE__ */ new Date()), s = u(() => e.filter((e) => e.status === "approved" || e.status === "pending"), [e]), c = new Date(i, a, 1);
+	c.setDate(1 - c.getDay());
+	let l = Array.from({ length: 42 }, (e, t) => {
+		let n = new Date(c);
+		n.setDate(c.getDate() + t);
+		let r = L(n), i = /* @__PURE__ */ new Set();
+		for (let e of s) R(e.startDate) <= r && r <= R(e.endDate) && i.add(e.type);
+		return {
+			date: n,
+			dayStr: r,
+			inMonth: n.getMonth() === a,
+			types: [...i]
+		};
+	}), d = u(() => {
+		let e = /* @__PURE__ */ new Set();
+		for (let t of l) t.inMonth && t.types.forEach((t) => e.add(t));
+		return [...e];
+	}, [l]);
+	return /* @__PURE__ */ y(S, { children: [/* @__PURE__ */ y(T, {
+		className: "flex flex-row items-center justify-between space-y-0",
+		children: [/* @__PURE__ */ y(E, {
+			className: "text-base",
+			children: [
+				F[a],
+				" ",
+				i
+			]
+		}), /* @__PURE__ */ y("div", {
+			className: "flex gap-1",
+			children: [/* @__PURE__ */ v(x, {
+				variant: "outline",
+				size: "sm",
+				className: "h-8 w-8 p-0",
+				"aria-label": "Previous month",
+				onClick: n,
+				children: /* @__PURE__ */ v(m, { className: "h-4 w-4" })
+			}), /* @__PURE__ */ v(x, {
+				variant: "outline",
+				size: "sm",
+				className: "h-8 w-8 p-0",
+				"aria-label": "Next month",
+				onClick: r,
+				children: /* @__PURE__ */ v(h, { className: "h-4 w-4" })
+			})]
+		})]
+	}), /* @__PURE__ */ y(C, {
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ v("div", {
+				className: "grid grid-cols-7 gap-1 text-center text-xs font-medium text-text-secondary",
+				children: I.map((e) => /* @__PURE__ */ v("div", { children: e }, e))
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "grid grid-cols-7 gap-1",
+				children: l.map((e) => {
+					let t = e.types[0], n = e.inMonth && t ? P(t).cell : "", r = e.dayStr === o;
+					return /* @__PURE__ */ y("div", {
+						className: `relative flex aspect-square flex-col items-center justify-center rounded-md text-xs ${n} ${e.inMonth ? "text-text-primary" : "text-text-muted"} ${r ? "ring-2 ring-action-primary-bg" : ""}`,
+						title: e.types.length > 0 ? `${e.dayStr}: ${e.types.map((e) => P(e).label).join(", ")}` : e.dayStr,
+						children: [/* @__PURE__ */ v("span", {
+							className: e.types.length > 0 ? "font-semibold" : "",
+							children: e.date.getDate()
+						}), e.types.length > 0 && /* @__PURE__ */ v("span", {
+							className: "mt-0.5 flex gap-0.5",
+							children: e.types.slice(0, 3).map((e) => /* @__PURE__ */ v("span", {
+								className: "h-1 w-1 rounded-full",
+								style: { backgroundColor: P(e).dot }
+							}, e))
+						})]
+					}, e.dayStr);
+				})
+			}),
+			d.length > 0 && /* @__PURE__ */ v("div", {
+				className: "flex flex-wrap gap-3 pt-1 text-xs text-text-secondary",
+				children: d.map((e) => /* @__PURE__ */ y("span", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ v("span", {
+						className: "h-2.5 w-2.5 rounded-full",
+						style: { backgroundColor: P(e).dot }
+					}), P(e).label]
+				}, e))
+			})
+		]
+	})] });
+}
+function B() {
+	let { leaveRequests: m, employees: h, addLeaveRequest: N, updateLeaveRequest: F } = e(), { showToast: I } = j(), { currentUser: L } = A(), B = o(), [V, H] = d("requests"), U = u(() => new Map(h.map((e) => [e.id, e])), [h]), [W, G] = d(() => {
+		let e = m.filter((e) => e.status === "approved" || e.status === "pending").map((e) => R(e.startDate)).sort(), t = e[e.length - 1];
+		if (t) {
+			let [e, n] = t.split("-").map(Number);
+			return new Date(e, (n || 1) - 1, 1);
+		}
+		return /* @__PURE__ */ new Date();
+	}), K = (e) => G((t) => new Date(t.getFullYear(), t.getMonth() + e, 1)), q = L?.name || [L?.firstName, L?.lastName].filter(Boolean).join(" ") || L?.email || "Manager", J = u(() => h.map((e) => ({
 		label: `${e.firstName} ${e.lastName}`,
 		value: e.id
-	})), [M]), B = s(() => [
+	})), [h]), Y = u(() => [
 		{
 			name: "employeeId",
 			label: "Employee",
 			type: "select",
 			required: !0,
-			options: z,
+			options: J,
 			colSpan: 2
 		},
 		{
@@ -53,7 +206,7 @@ function j() {
 			label: "Leave type",
 			type: "select",
 			required: !0,
-			options: k
+			options: ne
 		},
 		{
 			name: "days",
@@ -80,7 +233,7 @@ function j() {
 			required: !0,
 			colSpan: 2
 		}
-	], [z]), V = j.filter((e) => e.status === "pending").length, H = j.filter((e) => e.status === "approved").length, U = j.filter((e) => e.status === "approved").reduce((e, t) => e + t.days, 0), W = s(() => {
+	], [J]), X = m.filter((e) => e.status === "pending").length, re = m.filter((e) => e.status === "approved").length, ie = m.filter((e) => e.status === "approved").reduce((e, t) => e + t.days, 0), ae = u(() => {
 		let e = {
 			annual: 20,
 			sick: 12,
@@ -88,50 +241,62 @@ function j() {
 			maternity: 90,
 			paternity: 30,
 			unpaid: 15
-		}, t = j.filter((e) => e.status === "approved").reduce((e, t) => (e[t.type] = (e[t.type] || 0) + t.days, e), {});
+		}, t = m.filter((e) => e.status === "approved").reduce((e, t) => (e[t.type] = (e[t.type] || 0) + t.days, e), {});
 		return Object.entries(e).map(([e, n]) => {
 			let r = t[e] || 0;
 			return {
-				type: A(e),
+				type: M(e),
 				total: n,
 				used: r,
 				remaining: Math.max(n - r, 0)
 			};
 		});
-	}, [j]), G = s(() => {
+	}, [m]), oe = u(() => {
 		let e = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
-		return j.filter((t) => t.status === "approved" && t.startDate <= e && t.endDate >= e).length;
-	}, [j]), K = s(() => j.filter((e) => e.status === "pending"), [j]), q = s(() => [...j].sort((e, t) => t.startDate.localeCompare(e.startDate)), [j]), J = E({ initialPageSize: 5 }), Y = E({ initialPageSize: 10 }), X = K.slice(J.offset, J.offset + J.pageSize), Z = q.slice(Y.offset, Y.offset + Y.pageSize), Q = [
+		return m.filter((t) => t.status === "approved" && t.startDate <= e && t.endDate >= e).length;
+	}, [m]), Z = u(() => [...m].sort((e, t) => t.startDate.localeCompare(e.startDate)), [m]), Q = k({ initialPageSize: 10 }), se = Z.slice(Q.offset, Q.offset + Q.pageSize), ce = [
 		{
 			key: "employee",
 			header: "Employee",
 			priority: "primary",
-			cell: (e) => /* @__PURE__ */ f("span", {
-				className: "font-medium",
-				children: e.employeeName
-			})
-		},
-		{
-			key: "department",
-			header: "Department",
-			cell: (e) => /* @__PURE__ */ f("span", {
-				className: "text-text-secondary",
-				children: e.department
+			cell: (e) => /* @__PURE__ */ y("div", {
+				className: "flex items-center gap-2.5",
+				children: [/* @__PURE__ */ v(r, {
+					people: [{
+						name: e.employeeName,
+						avatarUrl: U.get(e.employeeId)?.avatar
+					}],
+					size: 32
+				}), /* @__PURE__ */ y("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ v("p", {
+						className: "truncate font-medium",
+						children: e.employeeName
+					}), /* @__PURE__ */ v("p", {
+						className: "truncate text-xs text-text-secondary",
+						children: e.department
+					})]
+				})]
 			})
 		},
 		{
 			key: "type",
 			header: "Type",
-			cell: (e) => /* @__PURE__ */ f(m, {
-				variant: "outline",
-				className: "w-fit text-[10px]",
-				children: t(e.type)
+			cell: (e) => /* @__PURE__ */ y("span", {
+				className: "flex items-center gap-1.5",
+				children: [/* @__PURE__ */ v("span", {
+					className: "h-2 w-2 rounded-full",
+					style: { backgroundColor: P(e.type).dot }
+				}), /* @__PURE__ */ v("span", {
+					className: "text-xs",
+					children: t(e.type)
+				})]
 			})
 		},
 		{
 			key: "period",
-			header: "Period",
-			cell: (e) => /* @__PURE__ */ p("span", {
+			header: "Dates",
+			cell: (e) => /* @__PURE__ */ y("span", {
 				className: "text-xs",
 				children: [
 					e.startDate,
@@ -145,261 +310,252 @@ function j() {
 			header: "Days",
 			headerClassName: "text-right",
 			cellClassName: "md:text-right",
-			cell: (e) => /* @__PURE__ */ f("span", { children: e.days })
-		},
-		{
-			key: "reason",
-			header: "Reason",
-			cell: (e) => /* @__PURE__ */ f("span", {
-				className: "block max-w-[16rem] truncate text-xs text-text-secondary",
-				children: e.reason
+			cell: (e) => /* @__PURE__ */ v("span", {
+				className: "tabular-nums",
+				children: e.days
 			})
 		},
 		{
 			key: "status",
 			header: "Status",
-			cell: (e) => /* @__PURE__ */ f(m, {
-				variant: e.status === "approved" ? "default" : e.status === "pending" ? "secondary" : "destructive",
+			cell: (e) => e.status === "pending" ? /* @__PURE__ */ y("div", {
+				className: "flex items-center gap-1.5",
+				children: [/* @__PURE__ */ v(x, {
+					size: "sm",
+					className: "h-7 text-xs",
+					onClick: () => $(e, "approved"),
+					children: "Approve"
+				}), /* @__PURE__ */ v(x, {
+					size: "sm",
+					variant: "outline",
+					className: "h-7 text-xs",
+					onClick: () => $(e, "rejected"),
+					children: "Reject"
+				})]
+			}) : /* @__PURE__ */ v(b, {
+				variant: e.status === "approved" ? "default" : "destructive",
 				className: "text-[10px]",
 				children: t(e.status)
 			})
 		}
-	], ee = async (e) => {
-		let t = a(e, "employeeId"), n = M.find((e) => e.id === t);
+	], le = async (e) => {
+		let t = c(e, "employeeId"), n = h.find((e) => e.id === t);
 		await N({
-			id: o(),
+			id: l(),
 			employeeId: t,
 			employeeName: n ? `${n.firstName} ${n.lastName}` : "",
 			department: n?.department ?? "",
-			type: a(e, "type"),
-			startDate: a(e, "startDate"),
-			endDate: a(e, "endDate"),
-			days: i(e, "days"),
+			type: c(e, "type"),
+			startDate: c(e, "startDate"),
+			endDate: c(e, "endDate"),
+			days: s(e, "days"),
 			status: "pending",
-			reason: a(e, "reason")
+			reason: c(e, "reason")
 		});
 	}, $ = async (e, t) => {
 		try {
-			await P(e.id, {
+			await F(e.id, {
 				status: t,
-				approverName: R
-			});
+				approverName: q
+			}), I(`Leave ${t} for ${e.employeeName}`, "success");
 		} catch (e) {
-			F(e instanceof Error ? e.message : "Unable to update leave request", "error");
+			I(e instanceof Error ? e.message : "Unable to update leave request", "error");
 		}
 	};
-	return /* @__PURE__ */ p("div", {
+	return /* @__PURE__ */ y("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ y("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ p("div", { children: [
-					/* @__PURE__ */ f("h1", {
+				children: [/* @__PURE__ */ y("div", { children: [
+					/* @__PURE__ */ v("h1", {
 						className: "text-2xl font-semibold",
-						children: /* @__PURE__ */ f(S, { children: "Leave Management" })
+						children: /* @__PURE__ */ v(D, { children: "Leave Management" })
 					}),
-					/* @__PURE__ */ f("p", {
+					/* @__PURE__ */ v("p", {
 						className: "text-sm text-text-secondary",
 						children: "Track and manage employee leave requests"
 					}),
-					/* @__PURE__ */ f(C, {
+					/* @__PURE__ */ v(O, {
 						className: "mt-1",
 						children: "Handle time-off in one place — review and approve leave requests and keep an eye on team availability and balances."
 					})
-				] }), /* @__PURE__ */ p(h, {
+				] }), /* @__PURE__ */ y(x, {
 					size: "sm",
-					onClick: () => L.openModal(),
-					children: [/* @__PURE__ */ f(c, { className: "mr-1 h-4 w-4" }), "Request Leave"]
+					onClick: () => B.openModal(),
+					children: [/* @__PURE__ */ v(f, { className: "mr-1 h-4 w-4" }), "Request Leave"]
 				})]
 			}),
-			/* @__PURE__ */ p("div", {
-				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4",
-				children: [
-					/* @__PURE__ */ p(x, {
-						treatment: "glass",
-						glow: !0,
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ p(y, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ f(b, {
-								className: "text-sm font-medium",
-								children: "Pending"
-							}), /* @__PURE__ */ f(u, { className: "h-4 w-4 text-status-warning-text" })]
-						}), /* @__PURE__ */ p(_, { children: [/* @__PURE__ */ f("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: V
-						}), /* @__PURE__ */ f("p", {
-							className: "text-xs text-text-secondary",
-							children: "Awaiting approval"
-						})] })]
-					}),
-					/* @__PURE__ */ p(x, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ p(y, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ f(b, {
-								className: "text-sm font-medium",
-								children: "Approved"
-							}), /* @__PURE__ */ f(l, { className: "h-4 w-4 text-status-success-text" })]
-						}), /* @__PURE__ */ p(_, { children: [/* @__PURE__ */ f("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: H
-						}), /* @__PURE__ */ f("p", {
-							className: "text-xs text-text-secondary",
-							children: "Current period"
-						})] })]
-					}),
-					/* @__PURE__ */ p(x, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ p(y, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ f(b, {
-								className: "text-sm font-medium",
-								children: "Days Used"
-							}), /* @__PURE__ */ f(c, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ p(_, { children: [/* @__PURE__ */ f("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: U
-						}), /* @__PURE__ */ f("p", {
-							className: "text-xs text-text-secondary",
-							children: "Total approved days"
-						})] })]
-					}),
-					/* @__PURE__ */ p(x, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ p(y, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ f(b, {
-								className: "text-sm font-medium",
-								children: "On Leave Today"
-							}), /* @__PURE__ */ f(d, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ p(_, { children: [/* @__PURE__ */ f("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: G
-						}), /* @__PURE__ */ f("p", {
-							className: "text-xs text-text-secondary",
-							children: "Out of office"
-						})] })]
-					})
+			/* @__PURE__ */ v(i, {
+				"aria-label": "Leave views",
+				variant: "underline",
+				value: V,
+				onChange: H,
+				tabs: [
+					{
+						id: "requests",
+						label: "Requests"
+					},
+					{
+						id: "balances",
+						label: "Balances"
+					},
+					{
+						id: "calendar",
+						label: "Calendar"
+					}
 				]
 			}),
-			/* @__PURE__ */ p("div", {
-				className: "grid gap-4 md:grid-cols-2",
-				children: [/* @__PURE__ */ p(g, { children: [/* @__PURE__ */ p(y, { children: [/* @__PURE__ */ f(b, { children: "Leave Balances" }), /* @__PURE__ */ f(v, { children: "Company-wide leave allocation (default policy) vs. approved days used" })] }), /* @__PURE__ */ f(_, {
-					className: "space-y-4",
-					children: W.map((e) => {
-						let n = Math.round(e.used / Math.max(e.total, 1) * 100);
-						return /* @__PURE__ */ p("div", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ p("div", {
-								className: "flex justify-between text-sm",
-								children: [/* @__PURE__ */ f("span", {
-									className: "font-medium",
-									children: t(e.type)
-								}), /* @__PURE__ */ p("span", { children: [
+			V === "requests" && /* @__PURE__ */ y("div", {
+				className: "space-y-6",
+				children: [/* @__PURE__ */ y("div", {
+					className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4",
+					children: [
+						/* @__PURE__ */ v(n, {
+							label: "Pending",
+							value: X,
+							icon: /* @__PURE__ */ v(g, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ v(n, {
+							label: "Approved",
+							value: re,
+							icon: /* @__PURE__ */ v(p, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ v(n, {
+							label: "Days Used",
+							value: ie,
+							icon: /* @__PURE__ */ v(f, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ v(n, {
+							label: "On Leave Today",
+							value: oe,
+							icon: /* @__PURE__ */ v(_, { className: "h-4 w-4" })
+						})
+					]
+				}), /* @__PURE__ */ y("div", {
+					className: "grid gap-6 xl:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]",
+					children: [/* @__PURE__ */ y(S, { children: [/* @__PURE__ */ y(T, { children: [/* @__PURE__ */ v(E, { children: "Leave Requests" }), /* @__PURE__ */ v(w, { children: "Approve or reject pending requests inline; full request history below." })] }), /* @__PURE__ */ y(C, {
+						className: "space-y-4",
+						children: [/* @__PURE__ */ v(te, {
+							data: se,
+							rowKey: (e) => e.id,
+							columns: ce,
+							emptyState: /* @__PURE__ */ v("p", {
+								className: "py-6 text-center text-sm text-text-secondary",
+								children: "No leave requests yet."
+							})
+						}), Z.length > Q.pageSize && /* @__PURE__ */ v(ee, {
+							page: Q.page,
+							pageSize: Q.pageSize,
+							totalItems: Z.length,
+							onPageChange: Q.setPage
+						})]
+					})] }), /* @__PURE__ */ v(z, {
+						leaveRequests: m,
+						monthCursor: W,
+						onPrev: () => K(-1),
+						onNext: () => K(1)
+					})]
+				})]
+			}),
+			V === "balances" && /* @__PURE__ */ y(S, { children: [/* @__PURE__ */ y(T, { children: [/* @__PURE__ */ v(E, { children: "Leave Balances" }), /* @__PURE__ */ v(w, { children: "Company-wide leave allocation (default policy) vs. approved days used" })] }), /* @__PURE__ */ v(C, {
+				className: "grid gap-x-8 gap-y-5 md:grid-cols-2",
+				children: ae.map((e) => {
+					let n = Math.round(e.used / Math.max(e.total, 1) * 100);
+					return /* @__PURE__ */ y("div", {
+						className: "space-y-1.5",
+						children: [/* @__PURE__ */ y("div", {
+							className: "flex justify-between text-sm",
+							children: [/* @__PURE__ */ v("span", {
+								className: "font-medium",
+								children: t(e.type)
+							}), /* @__PURE__ */ y("span", {
+								className: "text-text-secondary",
+								children: [
 									e.used,
 									"/",
 									e.total,
-									" days used"
-								] })]
-							}), /* @__PURE__ */ f("div", {
-								className: "h-2 overflow-hidden rounded bg-bg-sunken",
-								children: /* @__PURE__ */ f("div", {
-									className: `h-2 rounded ${n > 80 ? "bg-status-error-text" : n > 50 ? "bg-status-warning-text" : "bg-status-success-text"}`,
-									style: { width: `${n}%` }
-								})
+									" used · ",
+									e.remaining,
+									" left"
+								]
 							})]
-						}, e.type);
-					})
-				})] }), /* @__PURE__ */ p(g, { children: [/* @__PURE__ */ p(y, { children: [/* @__PURE__ */ f(b, { children: "Pending Approvals" }), /* @__PURE__ */ f(v, { children: "Leave requests waiting for your review" })] }), /* @__PURE__ */ p(_, {
+						}), /* @__PURE__ */ v("div", {
+							className: "h-2.5 overflow-hidden rounded-full bg-bg-sunken",
+							children: /* @__PURE__ */ v("div", {
+								className: `h-2.5 rounded-full ${n > 80 ? "bg-status-error-text" : n > 50 ? "bg-status-warning-text" : "bg-status-success-text"}`,
+								style: { width: `${n}%` }
+							})
+						})]
+					}, e.type);
+				})
+			})] }),
+			V === "calendar" && /* @__PURE__ */ y("div", {
+				className: "grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.6fr)]",
+				children: [/* @__PURE__ */ v(z, {
+					leaveRequests: m,
+					monthCursor: W,
+					onPrev: () => K(-1),
+					onNext: () => K(1)
+				}), /* @__PURE__ */ y(S, { children: [/* @__PURE__ */ y(T, { children: [/* @__PURE__ */ v(E, { children: "Scheduled & requested leave" }), /* @__PURE__ */ v(w, { children: "Everyone who is out, most recent first" })] }), /* @__PURE__ */ y(C, {
 					className: "space-y-3",
-					children: [
-						X.map((e) => /* @__PURE__ */ p("div", {
-							className: "flex items-center justify-between rounded border p-3",
-							children: [/* @__PURE__ */ p("div", { children: [
-								/* @__PURE__ */ f("p", {
-									className: "text-sm font-medium",
-									children: e.employeeName
-								}),
-								/* @__PURE__ */ p("p", {
-									className: "text-xs text-text-secondary",
-									children: [
-										t(e.type),
-										" · ",
-										e.days,
-										" days · ",
-										e.startDate,
-										" to",
-										" ",
-										e.endDate
-									]
-								}),
-								/* @__PURE__ */ f("p", {
-									className: "mt-1 text-xs text-text-secondary",
-									children: e.reason
-								})
-							] }), /* @__PURE__ */ p("div", {
-								className: "flex gap-1",
-								children: [/* @__PURE__ */ f(h, {
-									size: "sm",
-									variant: "outline",
-									className: "h-7 text-xs",
-									onClick: () => $(e, "rejected"),
-									children: "Reject"
-								}), /* @__PURE__ */ f(h, {
-									size: "sm",
-									className: "h-7 text-xs",
-									onClick: () => $(e, "approved"),
-									children: "Approve"
-								})]
+					children: [Z.filter((e) => e.status === "approved" || e.status === "pending").slice(0, 8).map((e) => /* @__PURE__ */ y("div", {
+						className: "flex items-center justify-between gap-3 rounded-lg border border-border-subtle p-3",
+						children: [/* @__PURE__ */ y("div", {
+							className: "flex items-center gap-2.5",
+							children: [/* @__PURE__ */ v(r, {
+								people: [{
+									name: e.employeeName,
+									avatarUrl: U.get(e.employeeId)?.avatar
+								}],
+								size: 32
+							}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								className: "text-sm font-medium",
+								children: e.employeeName
+							}), /* @__PURE__ */ y("p", {
+								className: "flex items-center gap-1.5 text-xs text-text-secondary",
+								children: [
+									/* @__PURE__ */ v("span", {
+										className: "h-2 w-2 rounded-full",
+										style: { backgroundColor: P(e.type).dot }
+									}),
+									t(e.type),
+									" · ",
+									e.days,
+									" days"
+								]
+							})] })]
+						}), /* @__PURE__ */ y("div", {
+							className: "text-right text-xs text-text-secondary",
+							children: [/* @__PURE__ */ y("p", { children: [
+								e.startDate,
+								" — ",
+								e.endDate
+							] }), /* @__PURE__ */ v(b, {
+								variant: e.status === "approved" ? "default" : "secondary",
+								className: "mt-1 text-[10px]",
+								children: t(e.status)
 							})]
-						}, e.id)),
-						V === 0 && /* @__PURE__ */ f("p", {
-							className: "py-6 text-center text-sm text-text-secondary",
-							children: "No leave requests are awaiting approval."
-						}),
-						K.length > J.pageSize && /* @__PURE__ */ f(w, {
-							page: J.page,
-							pageSize: J.pageSize,
-							totalItems: K.length,
-							onPageChange: J.setPage
-						})
-					]
+						})]
+					}, e.id)), Z.filter((e) => e.status === "approved" || e.status === "pending").length === 0 && /* @__PURE__ */ v("p", {
+						className: "py-6 text-center text-sm text-text-secondary",
+						children: "No scheduled or requested leave."
+					})]
 				})] })]
 			}),
-			/* @__PURE__ */ p(g, { children: [/* @__PURE__ */ p(y, { children: [/* @__PURE__ */ f(b, { children: "All Leave Requests" }), /* @__PURE__ */ f(v, { children: "Complete leave request history" })] }), /* @__PURE__ */ p(_, {
-				className: "space-y-4",
-				children: [/* @__PURE__ */ f(T, {
-					data: Z,
-					rowKey: (e) => e.id,
-					columns: Q,
-					emptyState: /* @__PURE__ */ f("p", {
-						className: "py-6 text-center text-sm text-text-secondary",
-						children: "No leave requests yet."
-					})
-				}), q.length > Y.pageSize && /* @__PURE__ */ f(w, {
-					page: Y.page,
-					pageSize: Y.pageSize,
-					totalItems: q.length,
-					onPageChange: Y.setPage
-				})]
-			})] }),
-			/* @__PURE__ */ f(n, {
-				open: L.open,
-				onOpenChange: L.onOpenChange,
+			/* @__PURE__ */ v(a, {
+				open: B.open,
+				onOpenChange: B.onOpenChange,
 				title: "Request leave",
 				description: "Submit a new time-off request for review.",
-				fields: B,
+				fields: Y,
 				submitLabel: "Submit request",
-				onSubmit: ee
+				onSubmit: le
 			})
 		]
 	});
 }
 //#endregion
-export { j as HrLeaveManagementPagePage };
+export { B as HrLeaveManagementPagePage };
 
 //# sourceMappingURL=HrLeaveManagementPagePage.js.map