@burdenoff/microfe-crewfoundry 2026.704.6 → 2026.704.7

package/dist/crewfoundry/pages/HrPayrollPagePage.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, useState as c } from "react";
-import { CheckCircle as l, Clock as u, DollarSign as d, Download as f, Plus as p, TrendingUp as m } from "lucide-react";
+import { StatCard as n } from "../components/viz/StatCard.js";
+import { AvatarStack as r } from "../components/viz/AvatarStack.js";
+import "../components/viz/index.js";
+import { FormModal as i, useFormModal as a } from "../components/forms/FormModal.js";
+import { ConfirmDialog as o } from "../components/forms/ConfirmDialog.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 { CalendarClock as ee, CheckCircle as f, DollarSign as te, Download as ne, Play as re, Plus as p, Users as m } from "lucide-react";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { Badge as v, Button as y, Card as b, CardContent as x, CardDescription as S, CardHeader as C, CardTitle as w, GlassCard as T, GradientText as E, PagePurpose as D, Pagination as O, ResponsiveTable as k, Separator as A } from "@burdenoff/fe-libs/ui";
-import { usePagination as j } from "@burdenoff/fe-libs/shared/hooks";
-import { useGlobalUi as M } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Badge as v, Button as y, Card as b, CardContent as x, CardDescription as ie, CardHeader as S, CardTitle as C, GlassCard as w, GradientText as ae, PagePurpose as oe, Pagination as T, ResponsiveTable as E, Separator as se } from "@burdenoff/fe-libs/ui";
+import { usePagination as ce } from "@burdenoff/fe-libs/shared/hooks";
+import { useGlobalUi as le } from "@burdenoff/fe-libs/shared/providers/shell";
 //#region src/crewfoundry/pages/HrPayrollPagePage.tsx
-var N = [
+var ue = [
 	{
 		label: "Draft",
 		value: "draft"
@@ -30,18 +34,49 @@ var N = [
 		label: "Failed",
 		value: "failed"
 	}
-];
-function P() {
-	let { payrollRecords: P, employees: F, addPayrollRecord: I, updatePayrollRecord: L } = e(), { showToast: R } = M(), [z, B] = c("January 2026"), V = r(), { page: H, pageSize: U, offset: W, setPage: G } = j({ initialPageSize: 10 }), K = s(() => F.map((e) => ({
+], D = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+], O = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+], de = (e) => {
+	let [t, n] = e.split(" "), r = D.findIndex((e) => e.toLowerCase() === t?.toLowerCase()), i = Number(n);
+	if (r === -1 || Number.isNaN(i)) return "—";
+	let a = (r + 1) % 12, o = r === 11 ? i + 1 : i;
+	return `${O[a]} 1, ${o}`;
+};
+function k() {
+	let { payrollRecords: D, employees: O, addPayrollRecord: k, updatePayrollRecord: A } = e(), { showToast: j } = le(), M = u(() => [...new Set(D.map((e) => e.period))], [D]), [N, P] = d(""), F = a(), [I, L] = d(!1), [R, z] = d(!1), { page: B, pageSize: V, offset: H, setPage: U } = ce({ initialPageSize: 10 }), W = N || M[0] || "", fe = u(() => new Map(O.map((e) => [e.id, e])), [O]), G = u(() => O.map((e) => ({
 		label: `${e.firstName} ${e.lastName}`,
 		value: e.id
-	})), [F]), q = s(() => [
+	})), [O]), pe = u(() => [
 		{
 			name: "employeeId",
 			label: "Employee",
 			type: "select",
 			required: !0,
-			options: K,
+			options: G,
 			colSpan: 2
 		},
 		{
@@ -84,18 +119,65 @@ function P() {
 			name: "status",
 			label: "Status",
 			type: "select",
-			options: N
+			options: ue
 		}
-	], [K]), J = P.filter((e) => e.period === z), Y = J.reduce((e, t) => e + t.grossPay, 0), X = J.reduce((e, t) => e + t.netPay, 0), Z = J.reduce((e, t) => e + t.deductions, 0), Q = J.filter((e) => e.status === "paid").length, $ = J.filter((e) => e.status === "processing").length, ee = J.slice(W, W + U), te = [...new Set(P.map((e) => e.period))], ne = (e) => {
-		B(e), G(1);
-	}, re = [
+	], [G]), K = D.filter((e) => e.period === W), q = K.reduce((e, t) => e + t.grossPay, 0), J = K.reduce((e, t) => e + t.netPay, 0), Y = K.reduce((e, t) => e + t.deductions, 0), X = K.filter((e) => e.status === "paid").length, Z = K.length - X, Q = K.length > 0 ? Math.round(X / K.length * 100) : 0, $ = K.length > 0 && Z === 0, me = K.slice(H, H + V), he = (e) => {
+		P(e), U(1);
+	}, ge = async () => {
+		let e = K.filter((e) => e.status !== "paid");
+		z(!0);
+		let t = 0;
+		try {
+			for (let n of e) await A(n.id, {
+				status: "paid",
+				payDate: (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)
+			}), t += 1;
+			j(`Pay run complete — ${t} record${t === 1 ? "" : "s"} paid`, "success");
+		} catch (e) {
+			j(e instanceof Error ? e.message : "Payroll run failed partway through", "error");
+		} finally {
+			z(!1), L(!1);
+		}
+	}, _e = () => {
+		if (K.length === 0) {
+			j("No records to export for this period", "info");
+			return;
+		}
+		let e = [
+			"Employee",
+			"Department",
+			"Period",
+			"Gross",
+			"Deductions",
+			"Net",
+			"Status"
+		], t = (e) => `"${e.replace(/"/g, "\"\"")}"`, n = K.map((e) => [
+			e.employeeName,
+			e.department,
+			e.period,
+			String(e.grossPay),
+			String(e.deductions),
+			String(e.netPay),
+			e.status
+		].map(t).join(",")), r = [e.map(t).join(","), ...n].join("\n"), i = new Blob([r], { type: "text/csv;charset=utf-8;" }), a = URL.createObjectURL(i), o = document.createElement("a");
+		o.href = a, o.download = `payroll-${W.replace(/\s+/g, "-").toLowerCase()}.csv`, document.body.appendChild(o), o.click(), document.body.removeChild(o), URL.revokeObjectURL(a), j("Payroll CSV exported", "success");
+	}, ve = [
 		{
 			key: "employee",
 			header: "Employee",
 			priority: "primary",
-			cell: (e) => /* @__PURE__ */ g("span", {
-				className: "font-medium",
-				children: e.employeeName
+			cell: (e) => /* @__PURE__ */ _("div", {
+				className: "flex items-center gap-2.5",
+				children: [/* @__PURE__ */ g(r, {
+					people: [{
+						name: e.employeeName,
+						avatarUrl: fe.get(e.employeeId)?.avatar
+					}],
+					size: 32
+				}), /* @__PURE__ */ g("span", {
+					className: "font-medium",
+					children: e.employeeName
+				})]
 			})
 		},
 		{
@@ -154,34 +236,34 @@ function P() {
 					variant: "ghost",
 					size: "sm",
 					className: "h-6 px-2 text-[10px]",
-					onClick: () => ae(e),
+					onClick: () => be(e),
 					children: "Mark paid"
 				})]
 			})
 		}
-	], ie = async (e) => {
-		let t = a(e, "employeeId"), n = F.find((e) => e.id === t), r = i(e, "grossPay"), s = i(e, "deductions"), c = i(e, "netPay");
-		await I({
-			id: o(),
+	], ye = async (e) => {
+		let t = c(e, "employeeId"), n = O.find((e) => e.id === t), r = s(e, "grossPay"), i = s(e, "deductions"), a = s(e, "netPay");
+		await k({
+			id: l(),
 			employeeId: t,
 			employeeName: n ? `${n.firstName} ${n.lastName}` : "",
 			department: n?.department ?? "",
-			period: a(e, "period"),
+			period: c(e, "period"),
 			grossPay: r,
-			deductions: s,
-			netPay: c > 0 ? c : Math.max(r - s, 0),
-			status: a(e, "status") || "draft",
-			payDate: a(e, "payDate"),
-			paymentMethod: a(e, "paymentMethod")
+			deductions: i,
+			netPay: a > 0 ? a : Math.max(r - i, 0),
+			status: c(e, "status") || "draft",
+			payDate: c(e, "payDate"),
+			paymentMethod: c(e, "paymentMethod")
 		});
-	}, ae = async (e) => {
+	}, be = async (e) => {
 		try {
-			await L(e.id, {
+			await A(e.id, {
 				status: "paid",
 				payDate: (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)
 			});
 		} catch (e) {
-			R(e instanceof Error ? e.message : "Unable to update payroll record", "error");
+			j(e instanceof Error ? e.message : "Unable to update payroll record", "error");
 		}
 	};
 	return /* @__PURE__ */ _("div", {
@@ -192,148 +274,171 @@ function P() {
 				children: [/* @__PURE__ */ _("div", { children: [
 					/* @__PURE__ */ g("h1", {
 						className: "text-2xl font-semibold",
-						children: /* @__PURE__ */ g(E, { children: "Payroll Management" })
+						children: /* @__PURE__ */ g(ae, { children: "Payroll" })
 					}),
 					/* @__PURE__ */ g("p", {
 						className: "text-sm text-text-secondary",
-						children: "Process and manage employee payroll"
+						children: W ? `${W} pay run` : "Process and manage employee payroll"
 					}),
-					/* @__PURE__ */ g(D, {
+					/* @__PURE__ */ g(oe, {
 						className: "mt-1",
 						children: "Run and review payroll — track salaries, deductions, and pay runs so your team gets paid accurately and on time."
 					})
 				] }), /* @__PURE__ */ _("div", {
 					className: "flex gap-2",
-					children: [/* @__PURE__ */ _(y, {
-						variant: "outline",
-						size: "sm",
-						disabled: !0,
-						"aria-label": "Export payroll (coming soon)",
-						title: "Payroll export is coming soon",
-						children: [
-							/* @__PURE__ */ g(f, { className: "h-4 w-4 mr-1" }),
-							"Export",
-							/* @__PURE__ */ g(v, {
-								variant: "secondary",
-								className: "ml-1 text-[9px]",
-								children: "Soon"
-							})
-						]
-					}), /* @__PURE__ */ _(y, {
-						size: "sm",
-						onClick: () => V.openModal(),
-						children: [/* @__PURE__ */ g(p, { className: "h-4 w-4 mr-1" }), "Add Record"]
-					})]
+					children: [
+						/* @__PURE__ */ _(y, {
+							variant: "outline",
+							size: "sm",
+							onClick: _e,
+							children: [/* @__PURE__ */ g(ne, { className: "h-4 w-4 mr-1" }), "Export"]
+						}),
+						/* @__PURE__ */ _(y, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => F.openModal(),
+							children: [/* @__PURE__ */ g(p, { className: "h-4 w-4 mr-1" }), "Add Record"]
+						}),
+						/* @__PURE__ */ _(y, {
+							size: "sm",
+							onClick: () => L(!0),
+							disabled: $ || K.length === 0,
+							title: $ ? "All records in this period are paid" : "Advance this period to paid",
+							children: [/* @__PURE__ */ g(re, { className: "h-4 w-4 mr-1" }), "Run Payroll"]
+						})
+					]
 				})]
 			}),
 			/* @__PURE__ */ _("div", {
 				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4",
 				children: [
-					/* @__PURE__ */ _(T, {
-						treatment: "glass",
-						glow: !0,
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ _(C, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ g(w, {
-								className: "text-sm font-medium",
-								children: "Gross Payroll"
-							}), /* @__PURE__ */ g(d, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ _(x, { children: [/* @__PURE__ */ _("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: ["$", Y.toLocaleString()]
-						}), /* @__PURE__ */ g("p", {
-							className: "text-xs text-text-secondary",
-							children: z
-						})] })]
+					/* @__PURE__ */ g(n, {
+						label: "Total Payroll",
+						value: `$${q.toLocaleString()}`,
+						icon: /* @__PURE__ */ g(te, { className: "h-4 w-4" })
 					}),
-					/* @__PURE__ */ _(T, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ _(C, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ g(w, {
-								className: "text-sm font-medium",
-								children: "Net Payroll"
-							}), /* @__PURE__ */ g(m, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ _(x, { children: [/* @__PURE__ */ _("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: ["$", X.toLocaleString()]
-						}), /* @__PURE__ */ g("p", {
-							className: "text-xs text-text-secondary",
-							children: "After deductions"
-						})] })]
+					/* @__PURE__ */ g(n, {
+						label: "Employees Paid",
+						value: X,
+						icon: /* @__PURE__ */ g(f, { className: "h-4 w-4" })
 					}),
-					/* @__PURE__ */ _(T, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ _(C, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ g(w, {
-								className: "text-sm font-medium",
-								children: "Paid"
-							}), /* @__PURE__ */ g(l, { className: "h-4 w-4 text-status-success-text" })]
-						}), /* @__PURE__ */ _(x, { children: [/* @__PURE__ */ g("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: Q
-						}), /* @__PURE__ */ g("p", {
-							className: "text-xs text-text-secondary",
-							children: "employees paid"
-						})] })]
+					/* @__PURE__ */ g(n, {
+						label: "Pending",
+						value: Z,
+						icon: /* @__PURE__ */ g(m, { className: "h-4 w-4" })
 					}),
-					/* @__PURE__ */ _(T, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ _(C, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ g(w, {
-								className: "text-sm font-medium",
-								children: "Processing"
-							}), /* @__PURE__ */ g(u, { className: "h-4 w-4 text-status-warning-text" })]
-						}), /* @__PURE__ */ _(x, { children: [/* @__PURE__ */ g("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: $
-						}), /* @__PURE__ */ g("p", {
-							className: "text-xs text-text-secondary",
-							children: "in progress"
-						})] })]
+					/* @__PURE__ */ g(n, {
+						label: "Next Run",
+						value: W ? de(W) : "—",
+						icon: /* @__PURE__ */ g(ee, { className: "h-4 w-4" })
 					})
 				]
 			}),
-			/* @__PURE__ */ g("div", {
+			K.length > 0 && /* @__PURE__ */ _(w, {
+				treatment: "glass",
+				glow: !0,
+				className: "border-border-seam",
+				children: [/* @__PURE__ */ _(S, {
+					className: "flex flex-row items-center justify-between space-y-0",
+					children: [/* @__PURE__ */ g(C, {
+						className: "text-base",
+						children: "Current pay run"
+					}), /* @__PURE__ */ _(v, {
+						variant: $ ? "default" : "secondary",
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ g(f, { className: "h-3 w-3" }), $ ? "Completed" : "Processing"]
+					})]
+				}), /* @__PURE__ */ _(x, {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ _("div", {
+						className: "grid gap-4 sm:grid-cols-4",
+						children: [
+							/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+								className: "text-xs text-text-secondary",
+								children: "Period"
+							}), /* @__PURE__ */ g("p", {
+								className: "text-sm font-semibold",
+								children: W
+							})] }),
+							/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+								className: "text-xs text-text-secondary",
+								children: "Gross Total"
+							}), /* @__PURE__ */ _("p", {
+								className: "text-sm font-semibold tabular-nums",
+								children: ["$", q.toLocaleString()]
+							})] }),
+							/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+								className: "text-xs text-text-secondary",
+								children: "Deductions"
+							}), /* @__PURE__ */ _("p", {
+								className: "text-sm font-semibold tabular-nums text-status-error-text",
+								children: ["-$", Y.toLocaleString()]
+							})] }),
+							/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+								className: "text-xs text-text-secondary",
+								children: "Net Total"
+							}), /* @__PURE__ */ _("p", {
+								className: "text-sm font-semibold tabular-nums",
+								children: ["$", J.toLocaleString()]
+							})] })
+						]
+					}), /* @__PURE__ */ _("div", {
+						className: "space-y-1",
+						children: [/* @__PURE__ */ _("div", {
+							className: "flex items-center justify-between text-xs text-text-secondary",
+							children: [/* @__PURE__ */ _("span", { children: [
+								X,
+								" of ",
+								K.length,
+								" paid"
+							] }), /* @__PURE__ */ _("span", {
+								className: "font-medium text-text-primary tabular-nums",
+								children: [Q, "%"]
+							})]
+						}), /* @__PURE__ */ g("div", {
+							className: "h-2 overflow-hidden rounded-full bg-bg-sunken",
+							children: /* @__PURE__ */ g("div", {
+								className: "h-2 rounded-full bg-status-success-text transition-all duration-500",
+								style: { width: `${Q}%` }
+							})
+						})]
+					})]
+				})]
+			}),
+			M.length > 1 && /* @__PURE__ */ g("div", {
 				className: "flex flex-wrap gap-2",
-				children: te.map((e) => /* @__PURE__ */ g(y, {
-					variant: z === e ? "default" : "outline",
+				children: M.map((e) => /* @__PURE__ */ g(y, {
+					variant: W === e ? "default" : "outline",
 					size: "sm",
-					onClick: () => ne(e),
+					onClick: () => he(e),
 					children: e
 				}, e))
 			}),
-			/* @__PURE__ */ _(b, { children: [/* @__PURE__ */ _(C, { children: [/* @__PURE__ */ g(w, { children: "Payroll Records" }), /* @__PURE__ */ _(S, { children: ["Individual employee payroll details for ", z] })] }), /* @__PURE__ */ _(x, {
+			/* @__PURE__ */ _(b, { children: [/* @__PURE__ */ _(S, { children: [/* @__PURE__ */ g(C, { children: "Payroll Records" }), /* @__PURE__ */ _(ie, { children: ["Individual employee payroll details for ", W] })] }), /* @__PURE__ */ _(x, {
 				className: "space-y-4",
 				children: [
-					/* @__PURE__ */ g(k, {
-						data: ee,
+					/* @__PURE__ */ g(E, {
+						data: me,
 						rowKey: (e) => e.id,
-						columns: re,
+						columns: ve,
 						emptyState: /* @__PURE__ */ _("p", {
 							className: "py-6 text-center text-sm text-text-secondary",
 							children: [
 								"No payroll records for ",
-								z,
+								W || "this period",
 								"."
 							]
 						})
 					}),
-					J.length > U && /* @__PURE__ */ g(O, {
-						page: H,
-						pageSize: U,
-						totalItems: J.length,
-						onPageChange: G
+					K.length > V && /* @__PURE__ */ g(T, {
+						page: B,
+						pageSize: V,
+						totalItems: K.length,
+						onPageChange: U
 					}),
-					J.length > 0 && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(A, {}), /* @__PURE__ */ _("div", {
+					K.length > 0 && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(se, {}), /* @__PURE__ */ _("div", {
 						className: "flex flex-wrap items-center justify-between gap-4 text-sm font-semibold",
-						children: [/* @__PURE__ */ _("span", { children: ["Total for ", z] }), /* @__PURE__ */ _("div", {
+						children: [/* @__PURE__ */ _("span", { children: ["Total for ", W] }), /* @__PURE__ */ _("div", {
 							className: "flex flex-wrap gap-x-6 gap-y-1",
 							children: [
 								/* @__PURE__ */ _("span", { children: [
@@ -342,7 +447,7 @@ function P() {
 										children: "Gross "
 									}),
 									"$",
-									Y.toLocaleString()
+									q.toLocaleString()
 								] }),
 								/* @__PURE__ */ _("span", {
 									className: "text-status-error-text",
@@ -352,7 +457,7 @@ function P() {
 											children: "Deductions "
 										}),
 										"-$",
-										Z.toLocaleString()
+										Y.toLocaleString()
 									]
 								}),
 								/* @__PURE__ */ _("span", { children: [
@@ -361,26 +466,36 @@ function P() {
 										children: "Net "
 									}),
 									"$",
-									X.toLocaleString()
+									J.toLocaleString()
 								] })
 							]
 						})]
 					})] })
 				]
 			})] }),
-			/* @__PURE__ */ g(n, {
-				open: V.open,
-				onOpenChange: V.onOpenChange,
+			/* @__PURE__ */ g(i, {
+				open: F.open,
+				onOpenChange: F.onOpenChange,
 				title: "Add payroll record",
 				description: "Create a payroll entry for a team member.",
-				fields: q,
+				fields: pe,
 				submitLabel: "Add record",
-				onSubmit: ie
+				onSubmit: ye
+			}),
+			/* @__PURE__ */ g(o, {
+				open: I,
+				onOpenChange: (e) => {
+					!e && !R && L(!1);
+				},
+				title: `Run payroll for ${W}?`,
+				description: `This marks the ${Z} remaining record${Z === 1 ? "" : "s"} in ${W} as paid. This cannot be undone.`,
+				confirmLabel: R ? "Processing…" : "Run payroll",
+				onConfirm: ge
 			})
 		]
 	});
 }
 //#endregion
-export { P as HrPayrollPagePage };
+export { k as HrPayrollPagePage };
 
 //# sourceMappingURL=HrPayrollPagePage.js.map