@burdenoff/microfe-crewfoundry 2026.703.1 → 2026.704.1

package/dist/crewfoundry/pages/HrPayrollPagePage.js

@@ -3,11 +3,12 @@ import { FormModal as t, useFormModal as n } from "../components/forms/FormModal
 import { getNumber as r, getText as i, newClientId as a } from "../components/forms/formValues.js";
 import { useMemo as o, useState as s } from "react";
 import { CheckCircle as c, Clock as l, DollarSign as u, Download as d, Plus as f, TrendingUp as p } from "lucide-react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { Badge as g, Button as _, Card as v, CardContent as y, CardDescription as b, CardHeader as x, CardTitle as S, GlassCard as C, GradientText as w, PagePurpose as T, Separator as E } from "@burdenoff/fe-libs/ui";
-import { useGlobalUi as D } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Badge as _, Button as v, Card as y, CardContent as b, CardDescription as x, CardHeader as S, CardTitle as C, GlassCard as w, GradientText as T, PagePurpose as E, Pagination as D, ResponsiveTable as O, Separator as k } from "@burdenoff/fe-libs/ui";
+import { usePagination as A } from "@burdenoff/fe-libs/shared/hooks";
+import { useGlobalUi as j } from "@burdenoff/fe-libs/shared/providers/shell";
 //#region src/crewfoundry/pages/HrPayrollPagePage.tsx
-var O = [
+var M = [
 	{
 		label: "Draft",
 		value: "draft"
@@ -29,17 +30,17 @@ var O = [
 		value: "failed"
 	}
 ];
-function k() {
-	let { payrollRecords: k, employees: A, addPayrollRecord: j, updatePayrollRecord: M } = e(), { showToast: N } = D(), [P, F] = s("January 2026"), I = n(), L = o(() => A.map((e) => ({
+function N() {
+	let { payrollRecords: N, employees: P, addPayrollRecord: F, updatePayrollRecord: I } = e(), { showToast: L } = j(), [R, z] = s("January 2026"), B = n(), { page: V, pageSize: H, offset: U, setPage: W } = A({ initialPageSize: 10 }), G = o(() => P.map((e) => ({
 		label: `${e.firstName} ${e.lastName}`,
 		value: e.id
-	})), [A]), R = o(() => [
+	})), [P]), K = o(() => [
 		{
 			name: "employeeId",
 			label: "Employee",
 			type: "select",
 			required: !0,
-			options: L,
+			options: G,
 			colSpan: 2
 		},
 		{
@@ -82,11 +83,84 @@ function k() {
 			name: "status",
 			label: "Status",
 			type: "select",
-			options: O
+			options: M
 		}
-	], [L]), z = k.filter((e) => e.period === P), B = z.reduce((e, t) => e + t.grossPay, 0), V = z.reduce((e, t) => e + t.netPay, 0), H = z.filter((e) => e.status === "paid").length, U = z.filter((e) => e.status === "processing").length, W = [...new Set(k.map((e) => e.period))], G = async (e) => {
-		let t = i(e, "employeeId"), n = A.find((e) => e.id === t), o = r(e, "grossPay"), s = r(e, "deductions"), c = r(e, "netPay");
-		await j({
+	], [G]), q = N.filter((e) => e.period === R), J = q.reduce((e, t) => e + t.grossPay, 0), Y = q.reduce((e, t) => e + t.netPay, 0), X = q.reduce((e, t) => e + t.deductions, 0), Z = q.filter((e) => e.status === "paid").length, Q = q.filter((e) => e.status === "processing").length, $ = q.slice(U, U + H), ee = [...new Set(N.map((e) => e.period))], te = (e) => {
+		z(e), W(1);
+	}, ne = [
+		{
+			key: "employee",
+			header: "Employee",
+			priority: "primary",
+			cell: (e) => /* @__PURE__ */ h("span", {
+				className: "font-medium",
+				children: e.employeeName
+			})
+		},
+		{
+			key: "department",
+			header: "Department",
+			cell: (e) => /* @__PURE__ */ h("span", {
+				className: "text-text-secondary",
+				children: e.department
+			})
+		},
+		{
+			key: "gross",
+			header: "Gross Pay",
+			headerClassName: "text-right",
+			cellClassName: "md:text-right",
+			cell: (e) => /* @__PURE__ */ g("span", { children: ["$", e.grossPay.toLocaleString()] })
+		},
+		{
+			key: "deductions",
+			header: "Deductions",
+			headerClassName: "text-right",
+			cellClassName: "md:text-right",
+			cell: (e) => /* @__PURE__ */ g("span", {
+				className: "text-status-error-text",
+				children: ["-$", e.deductions.toLocaleString()]
+			})
+		},
+		{
+			key: "net",
+			header: "Net Pay",
+			headerClassName: "text-right",
+			cellClassName: "md:text-right",
+			cell: (e) => /* @__PURE__ */ g("span", {
+				className: "font-medium",
+				children: ["$", e.netPay.toLocaleString()]
+			})
+		},
+		{
+			key: "method",
+			header: "Payment Method",
+			cell: (e) => /* @__PURE__ */ h("span", {
+				className: "text-text-secondary",
+				children: e.paymentMethod
+			})
+		},
+		{
+			key: "status",
+			header: "Status",
+			cell: (e) => /* @__PURE__ */ g("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ h(_, {
+					variant: e.status === "paid" ? "default" : e.status === "processing" ? "secondary" : "outline",
+					className: "text-[10px]",
+					children: e.status
+				}), e.status !== "paid" && /* @__PURE__ */ h(v, {
+					variant: "ghost",
+					size: "sm",
+					className: "h-6 px-2 text-[10px]",
+					onClick: () => ie(e),
+					children: "Mark paid"
+				})]
+			})
+		}
+	], re = async (e) => {
+		let t = i(e, "employeeId"), n = P.find((e) => e.id === t), o = r(e, "grossPay"), s = r(e, "deductions"), c = r(e, "netPay");
+		await F({
 			id: a(),
 			employeeId: t,
 			employeeName: n ? `${n.firstName} ${n.lastName}` : "",
@@ -99,245 +173,213 @@ function k() {
 			payDate: i(e, "payDate"),
 			paymentMethod: i(e, "paymentMethod")
 		});
-	}, K = async (e) => {
+	}, ie = async (e) => {
 		try {
-			await M(e.id, {
+			await I(e.id, {
 				status: "paid",
 				payDate: (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)
 			});
 		} catch (e) {
-			N(e instanceof Error ? e.message : "Unable to update payroll record", "error");
+			L(e instanceof Error ? e.message : "Unable to update payroll record", "error");
 		}
 	};
-	return /* @__PURE__ */ h("div", {
+	return /* @__PURE__ */ g("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ g("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ h("div", { children: [
-					/* @__PURE__ */ m("h1", {
+				children: [/* @__PURE__ */ g("div", { children: [
+					/* @__PURE__ */ h("h1", {
 						className: "text-2xl font-semibold",
-						children: /* @__PURE__ */ m(w, { children: "Payroll Management" })
+						children: /* @__PURE__ */ h(T, { children: "Payroll Management" })
 					}),
-					/* @__PURE__ */ m("p", {
+					/* @__PURE__ */ h("p", {
 						className: "text-sm text-text-secondary",
 						children: "Process and manage employee payroll"
 					}),
-					/* @__PURE__ */ m(T, {
+					/* @__PURE__ */ h(E, {
 						className: "mt-1",
 						children: "Run and review payroll — track salaries, deductions, and pay runs so your team gets paid accurately and on time."
 					})
-				] }), /* @__PURE__ */ h("div", {
+				] }), /* @__PURE__ */ g("div", {
 					className: "flex gap-2",
-					children: [/* @__PURE__ */ h(_, {
+					children: [/* @__PURE__ */ g(v, {
 						variant: "outline",
 						size: "sm",
 						disabled: !0,
 						"aria-label": "Export payroll (coming soon)",
 						title: "Payroll export is coming soon",
 						children: [
-							/* @__PURE__ */ m(d, { className: "h-4 w-4 mr-1" }),
+							/* @__PURE__ */ h(d, { className: "h-4 w-4 mr-1" }),
 							"Export",
-							/* @__PURE__ */ m(g, {
+							/* @__PURE__ */ h(_, {
 								variant: "secondary",
 								className: "ml-1 text-[9px]",
 								children: "Soon"
 							})
 						]
-					}), /* @__PURE__ */ h(_, {
+					}), /* @__PURE__ */ g(v, {
 						size: "sm",
-						onClick: () => I.openModal(),
-						children: [/* @__PURE__ */ m(f, { className: "h-4 w-4 mr-1" }), "Add Record"]
+						onClick: () => B.openModal(),
+						children: [/* @__PURE__ */ h(f, { className: "h-4 w-4 mr-1" }), "Add Record"]
 					})]
 				})]
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ g("div", {
 				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4",
 				children: [
-					/* @__PURE__ */ h(C, {
+					/* @__PURE__ */ g(w, {
 						treatment: "glass",
 						glow: !0,
 						className: "border-border-seam",
-						children: [/* @__PURE__ */ h(x, {
+						children: [/* @__PURE__ */ g(S, {
 							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ m(S, {
+							children: [/* @__PURE__ */ h(C, {
 								className: "text-sm font-medium",
 								children: "Gross Payroll"
-							}), /* @__PURE__ */ m(u, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ h(y, { children: [/* @__PURE__ */ h("div", {
+							}), /* @__PURE__ */ h(u, { className: "h-4 w-4 text-text-secondary" })]
+						}), /* @__PURE__ */ g(b, { children: [/* @__PURE__ */ g("div", {
 							className: "text-2xl font-bold tabular-nums",
-							children: ["$", B.toLocaleString()]
-						}), /* @__PURE__ */ m("p", {
+							children: ["$", J.toLocaleString()]
+						}), /* @__PURE__ */ h("p", {
 							className: "text-xs text-text-secondary",
-							children: P
+							children: R
 						})] })]
 					}),
-					/* @__PURE__ */ h(C, {
+					/* @__PURE__ */ g(w, {
 						treatment: "metric",
 						className: "border-border-seam",
-						children: [/* @__PURE__ */ h(x, {
+						children: [/* @__PURE__ */ g(S, {
 							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ m(S, {
+							children: [/* @__PURE__ */ h(C, {
 								className: "text-sm font-medium",
 								children: "Net Payroll"
-							}), /* @__PURE__ */ m(p, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ h(y, { children: [/* @__PURE__ */ h("div", {
+							}), /* @__PURE__ */ h(p, { className: "h-4 w-4 text-text-secondary" })]
+						}), /* @__PURE__ */ g(b, { children: [/* @__PURE__ */ g("div", {
 							className: "text-2xl font-bold tabular-nums",
-							children: ["$", V.toLocaleString()]
-						}), /* @__PURE__ */ m("p", {
+							children: ["$", Y.toLocaleString()]
+						}), /* @__PURE__ */ h("p", {
 							className: "text-xs text-text-secondary",
 							children: "After deductions"
 						})] })]
 					}),
-					/* @__PURE__ */ h(C, {
+					/* @__PURE__ */ g(w, {
 						treatment: "metric",
 						className: "border-border-seam",
-						children: [/* @__PURE__ */ h(x, {
+						children: [/* @__PURE__ */ g(S, {
 							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ m(S, {
+							children: [/* @__PURE__ */ h(C, {
 								className: "text-sm font-medium",
 								children: "Paid"
-							}), /* @__PURE__ */ m(c, { className: "h-4 w-4 text-status-success-text" })]
-						}), /* @__PURE__ */ h(y, { children: [/* @__PURE__ */ m("div", {
+							}), /* @__PURE__ */ h(c, { className: "h-4 w-4 text-status-success-text" })]
+						}), /* @__PURE__ */ g(b, { children: [/* @__PURE__ */ h("div", {
 							className: "text-2xl font-bold tabular-nums",
-							children: H
-						}), /* @__PURE__ */ m("p", {
+							children: Z
+						}), /* @__PURE__ */ h("p", {
 							className: "text-xs text-text-secondary",
 							children: "employees paid"
 						})] })]
 					}),
-					/* @__PURE__ */ h(C, {
+					/* @__PURE__ */ g(w, {
 						treatment: "metric",
 						className: "border-border-seam",
-						children: [/* @__PURE__ */ h(x, {
+						children: [/* @__PURE__ */ g(S, {
 							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ m(S, {
+							children: [/* @__PURE__ */ h(C, {
 								className: "text-sm font-medium",
 								children: "Processing"
-							}), /* @__PURE__ */ m(l, { className: "h-4 w-4 text-status-warning-text" })]
-						}), /* @__PURE__ */ h(y, { children: [/* @__PURE__ */ m("div", {
+							}), /* @__PURE__ */ h(l, { className: "h-4 w-4 text-status-warning-text" })]
+						}), /* @__PURE__ */ g(b, { children: [/* @__PURE__ */ h("div", {
 							className: "text-2xl font-bold tabular-nums",
-							children: U
-						}), /* @__PURE__ */ m("p", {
+							children: Q
+						}), /* @__PURE__ */ h("p", {
 							className: "text-xs text-text-secondary",
 							children: "in progress"
 						})] })]
 					})
 				]
 			}),
-			/* @__PURE__ */ m("div", {
-				className: "flex gap-2",
-				children: W.map((e) => /* @__PURE__ */ m(_, {
-					variant: P === e ? "default" : "outline",
+			/* @__PURE__ */ h("div", {
+				className: "flex flex-wrap gap-2",
+				children: ee.map((e) => /* @__PURE__ */ h(v, {
+					variant: R === e ? "default" : "outline",
 					size: "sm",
-					onClick: () => F(e),
+					onClick: () => te(e),
 					children: e
 				}, e))
 			}),
-			/* @__PURE__ */ h(v, { children: [/* @__PURE__ */ h(x, { children: [/* @__PURE__ */ m(S, { children: "Payroll Records" }), /* @__PURE__ */ h(b, { children: ["Individual employee payroll details for ", P] })] }), /* @__PURE__ */ h(y, { children: [
-				/* @__PURE__ */ h("div", {
-					className: "grid grid-cols-7 gap-2 text-xs font-medium text-text-secondary border-b pb-2 mb-2",
-					children: [
-						/* @__PURE__ */ m("span", { children: "Employee" }),
-						/* @__PURE__ */ m("span", { children: "Department" }),
-						/* @__PURE__ */ m("span", {
-							className: "text-right",
-							children: "Gross Pay"
-						}),
-						/* @__PURE__ */ m("span", {
-							className: "text-right",
-							children: "Deductions"
-						}),
-						/* @__PURE__ */ m("span", {
-							className: "text-right",
-							children: "Net Pay"
-						}),
-						/* @__PURE__ */ m("span", { children: "Payment Method" }),
-						/* @__PURE__ */ m("span", {
-							className: "text-center",
-							children: "Status"
-						})
-					]
-				}),
-				k.map((e) => /* @__PURE__ */ h("div", {
-					className: "grid grid-cols-7 gap-2 py-2 border-b last:border-0 text-sm",
-					children: [
-						/* @__PURE__ */ m("span", {
-							className: "font-medium",
-							children: e.employeeName
-						}),
-						/* @__PURE__ */ m("span", {
-							className: "text-text-secondary",
-							children: e.department
-						}),
-						/* @__PURE__ */ h("span", {
-							className: "text-right",
-							children: ["$", e.grossPay.toLocaleString()]
-						}),
-						/* @__PURE__ */ h("span", {
-							className: "text-right text-status-error-text",
-							children: ["-$", e.deductions.toLocaleString()]
-						}),
-						/* @__PURE__ */ h("span", {
-							className: "text-right font-medium",
-							children: ["$", e.netPay.toLocaleString()]
-						}),
-						/* @__PURE__ */ m("span", {
-							className: "text-text-secondary",
-							children: e.paymentMethod
-						}),
-						/* @__PURE__ */ h("div", {
-							className: "flex flex-col items-center gap-1",
-							children: [/* @__PURE__ */ m(g, {
-								variant: e.status === "paid" ? "default" : e.status === "processing" ? "secondary" : "outline",
-								className: "text-[10px]",
-								children: e.status
-							}), e.status !== "paid" && /* @__PURE__ */ m(_, {
-								variant: "ghost",
-								size: "sm",
-								className: "h-6 px-2 text-[10px]",
-								onClick: () => K(e),
-								children: "Mark paid"
-							})]
+			/* @__PURE__ */ g(y, { children: [/* @__PURE__ */ g(S, { children: [/* @__PURE__ */ h(C, { children: "Payroll Records" }), /* @__PURE__ */ g(x, { children: ["Individual employee payroll details for ", R] })] }), /* @__PURE__ */ g(b, {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ h(O, {
+						data: $,
+						rowKey: (e) => e.id,
+						columns: ne,
+						emptyState: /* @__PURE__ */ g("p", {
+							className: "py-6 text-center text-sm text-text-secondary",
+							children: [
+								"No payroll records for ",
+								R,
+								"."
+							]
 						})
-					]
-				}, e.id)),
-				/* @__PURE__ */ m(E, { className: "my-2" }),
-				/* @__PURE__ */ h("div", {
-					className: "grid grid-cols-7 gap-2 text-sm font-bold",
-					children: [
-						/* @__PURE__ */ m("span", { children: "Total" }),
-						/* @__PURE__ */ m("span", {}),
-						/* @__PURE__ */ h("span", {
-							className: "text-right",
-							children: ["$", k.reduce((e, t) => e + t.grossPay, 0).toLocaleString()]
-						}),
-						/* @__PURE__ */ h("span", {
-							className: "text-right text-status-error-text",
-							children: ["-$", k.reduce((e, t) => e + t.deductions, 0).toLocaleString()]
-						}),
-						/* @__PURE__ */ h("span", {
-							className: "text-right",
-							children: ["$", k.reduce((e, t) => e + t.netPay, 0).toLocaleString()]
-						}),
-						/* @__PURE__ */ m("span", {}),
-						/* @__PURE__ */ m("span", {})
-					]
-				})
-			] })] }),
-			/* @__PURE__ */ m(t, {
-				open: I.open,
-				onOpenChange: I.onOpenChange,
+					}),
+					q.length > H && /* @__PURE__ */ h(D, {
+						page: V,
+						pageSize: H,
+						totalItems: q.length,
+						onPageChange: W
+					}),
+					q.length > 0 && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(k, {}), /* @__PURE__ */ g("div", {
+						className: "flex flex-wrap items-center justify-between gap-4 text-sm font-semibold",
+						children: [/* @__PURE__ */ g("span", { children: ["Total for ", R] }), /* @__PURE__ */ g("div", {
+							className: "flex flex-wrap gap-x-6 gap-y-1",
+							children: [
+								/* @__PURE__ */ g("span", { children: [
+									/* @__PURE__ */ h("span", {
+										className: "text-text-secondary",
+										children: "Gross "
+									}),
+									"$",
+									J.toLocaleString()
+								] }),
+								/* @__PURE__ */ g("span", {
+									className: "text-status-error-text",
+									children: [
+										/* @__PURE__ */ h("span", {
+											className: "text-text-secondary",
+											children: "Deductions "
+										}),
+										"-$",
+										X.toLocaleString()
+									]
+								}),
+								/* @__PURE__ */ g("span", { children: [
+									/* @__PURE__ */ h("span", {
+										className: "text-text-secondary",
+										children: "Net "
+									}),
+									"$",
+									Y.toLocaleString()
+								] })
+							]
+						})]
+					})] })
+				]
+			})] }),
+			/* @__PURE__ */ h(t, {
+				open: B.open,
+				onOpenChange: B.onOpenChange,
 				title: "Add payroll record",
 				description: "Create a payroll entry for a team member.",
-				fields: R,
+				fields: K,
 				submitLabel: "Add record",
-				onSubmit: G
+				onSubmit: re
 			})
 		]
 	});
 }
 //#endregion
-export { k as HrPayrollPagePage };
+export { N as HrPayrollPagePage };
 
 //# sourceMappingURL=HrPayrollPagePage.js.map

package/dist/crewfoundry/pages/HrPayrollPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"HrPayrollPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/HrPayrollPagePage.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n  GlassCard,\n  GradientText,\n  PagePurpose,\n  Separator,\n} from '@burdenoff/fe-libs/ui';\nimport { useGlobalUi } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { CheckCircle, Clock, DollarSign, Download, Plus, TrendingUp } from 'lucide-react';\nimport { useCrewFoundryStore, type PayrollRecord } from '../store/crewfoundryStore';\nimport { FormModal, useFormModal, type FieldConfig, type FormValues } from '../components/forms/FormModal';\nimport { getNumber, getText, newClientId } from '../components/forms/formValues';\n\nconst STATUS_OPTIONS = [\n  { label: 'Draft', value: 'draft' },\n  { label: 'Processing', value: 'processing' },\n  { label: 'Approved', value: 'approved' },\n  { label: 'Paid', value: 'paid' },\n  { label: 'Failed', value: 'failed' },\n];\n\nexport function HrPayrollPagePage() {\n  const { payrollRecords, employees, addPayrollRecord, updatePayrollRecord } = useCrewFoundryStore();\n  const { showToast } = useGlobalUi();\n  const [selectedPeriod, setSelectedPeriod] = useState('January 2026');\n  const createForm = useFormModal<void>();\n\n  const employeeOptions = useMemo(\n    () =>\n      employees.map((employee) => ({\n        label: `${employee.firstName} ${employee.lastName}`,\n        value: employee.id,\n      })),\n    [employees]\n  );\n\n  const payrollFields = useMemo<FieldConfig[]>(\n    () => [\n      {\n        name: 'employeeId',\n        label: 'Employee',\n        type: 'select',\n        required: true,\n        options: employeeOptions,\n        colSpan: 2,\n      },\n      { name: 'period', label: 'Pay period', type: 'text', required: true, placeholder: 'e.g. February 2026' },\n      { name: 'paymentMethod', label: 'Payment method', type: 'text', required: true, placeholder: 'e.g. Bank Transfer' },\n      { name: 'grossPay', label: 'Gross pay', type: 'number', required: true },\n      { name: 'deductions', label: 'Deductions', type: 'number', required: true },\n      { name: 'netPay', label: 'Net pay (auto if blank)', type: 'number' },\n      { name: 'payDate', label: 'Pay date', type: 'date' },\n      { name: 'status', label: 'Status', type: 'select', options: STATUS_OPTIONS },\n    ],\n    [employeeOptions]\n  );\n\n  const periodRecords = payrollRecords.filter((r) => r.period === selectedPeriod);\n  const totalGross = periodRecords.reduce((s, r) => s + r.grossPay, 0);\n  const totalNet = periodRecords.reduce((s, r) => s + r.netPay, 0);\n  const paidCount = periodRecords.filter((r) => r.status === 'paid').length;\n  const processingCount = periodRecords.filter((r) => r.status === 'processing').length;\n\n  const periods = [...new Set(payrollRecords.map((r) => r.period))];\n\n  const handleCreate = async (values: FormValues) => {\n    const employeeId = getText(values, 'employeeId');\n    const employee = employees.find((item) => item.id === employeeId);\n    const grossPay = getNumber(values, 'grossPay');\n    const deductions = getNumber(values, 'deductions');\n    const netPayInput = getNumber(values, 'netPay');\n    const payload: PayrollRecord = {\n      id: newClientId(),\n      employeeId,\n      employeeName: employee ? `${employee.firstName} ${employee.lastName}` : '',\n      department: employee?.department ?? '',\n      period: getText(values, 'period'),\n      grossPay,\n      deductions,\n      netPay: netPayInput > 0 ? netPayInput : Math.max(grossPay - deductions, 0),\n      status: (getText(values, 'status') as PayrollRecord['status']) || 'draft',\n      payDate: getText(values, 'payDate'),\n      paymentMethod: getText(values, 'paymentMethod'),\n    };\n    await addPayrollRecord(payload);\n  };\n\n  const handleMarkPaid = async (record: PayrollRecord) => {\n    try {\n      await updatePayrollRecord(record.id, {\n        status: 'paid',\n        payDate: new Date().toISOString().slice(0, 10),\n      });\n    } catch (error) {\n      showToast(error instanceof Error ? error.message : 'Unable to update payroll record', 'error');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-semibold\">\n            <GradientText>Payroll Management</GradientText>\n          </h1>\n          <p className=\"text-sm text-text-secondary\">Process and manage employee payroll</p>\n          <PagePurpose className=\"mt-1\">Run and review payroll — track salaries, deductions, and pay runs so your team gets paid accurately and on time.</PagePurpose>\n        </div>\n        <div className=\"flex gap-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            disabled\n            aria-label=\"Export payroll (coming soon)\"\n            title=\"Payroll export is coming soon\"\n          >\n            <Download className=\"h-4 w-4 mr-1\" />\n            Export\n            <Badge variant=\"secondary\" className=\"ml-1 text-[9px]\">\n              Soon\n            </Badge>\n          </Button>\n          <Button size=\"sm\" onClick={() => createForm.openModal()}>\n            <Plus className=\"h-4 w-4 mr-1\" />\n            Add Record\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-4\">\n        <GlassCard treatment=\"glass\" glow className=\"border-border-seam\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Gross Payroll</CardTitle>\n            <DollarSign className=\"h-4 w-4 text-text-secondary\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold tabular-nums\">${totalGross.toLocaleString()}</div>\n            <p className=\"text-xs text-text-secondary\">{selectedPeriod}</p>\n          </CardContent>\n        </GlassCard>\n        <GlassCard treatment=\"metric\" className=\"border-border-seam\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Net Payroll</CardTitle>\n            <TrendingUp className=\"h-4 w-4 text-text-secondary\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold tabular-nums\">${totalNet.toLocaleString()}</div>\n            <p className=\"text-xs text-text-secondary\">After deductions</p>\n          </CardContent>\n        </GlassCard>\n        <GlassCard treatment=\"metric\" className=\"border-border-seam\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Paid</CardTitle>\n            <CheckCircle className=\"h-4 w-4 text-status-success-text\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold tabular-nums\">{paidCount}</div>\n            <p className=\"text-xs text-text-secondary\">employees paid</p>\n          </CardContent>\n        </GlassCard>\n        <GlassCard treatment=\"metric\" className=\"border-border-seam\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Processing</CardTitle>\n            <Clock className=\"h-4 w-4 text-status-warning-text\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold tabular-nums\">{processingCount}</div>\n            <p className=\"text-xs text-text-secondary\">in progress</p>\n          </CardContent>\n        </GlassCard>\n      </div>\n\n      <div className=\"flex gap-2\">\n        {periods.map((period) => (\n          <Button\n            key={period}\n            variant={selectedPeriod === period ? 'default' : 'outline'}\n            size=\"sm\"\n            onClick={() => setSelectedPeriod(period)}\n          >\n            {period}\n          </Button>\n        ))}\n      </div>\n\n      <Card>\n        <CardHeader>\n          <CardTitle>Payroll Records</CardTitle>\n          <CardDescription>\n            Individual employee payroll details for {selectedPeriod}\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <div className=\"grid grid-cols-7 gap-2 text-xs font-medium text-text-secondary border-b pb-2 mb-2\">\n            <span>Employee</span>\n            <span>Department</span>\n            <span className=\"text-right\">Gross Pay</span>\n            <span className=\"text-right\">Deductions</span>\n            <span className=\"text-right\">Net Pay</span>\n            <span>Payment Method</span>\n            <span className=\"text-center\">Status</span>\n          </div>\n          {payrollRecords.map((record) => (\n            <div\n              key={record.id}\n              className=\"grid grid-cols-7 gap-2 py-2 border-b last:border-0 text-sm\"\n            >\n              <span className=\"font-medium\">{record.employeeName}</span>\n              <span className=\"text-text-secondary\">{record.department}</span>\n              <span className=\"text-right\">${record.grossPay.toLocaleString()}</span>\n              <span className=\"text-right text-status-error-text\">\n                -${record.deductions.toLocaleString()}\n              </span>\n              <span className=\"text-right font-medium\">${record.netPay.toLocaleString()}</span>\n              <span className=\"text-text-secondary\">{record.paymentMethod}</span>\n              <div className=\"flex flex-col items-center gap-1\">\n                <Badge\n                  variant={\n                    record.status === 'paid'\n                      ? 'default'\n                      : record.status === 'processing'\n                        ? 'secondary'\n                        : 'outline'\n                  }\n                  className=\"text-[10px]\"\n                >\n                  {record.status}\n                </Badge>\n                {record.status !== 'paid' && (\n                  <Button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"h-6 px-2 text-[10px]\"\n                    onClick={() => handleMarkPaid(record)}\n                  >\n                    Mark paid\n                  </Button>\n                )}\n              </div>\n            </div>\n          ))}\n          <Separator className=\"my-2\" />\n          <div className=\"grid grid-cols-7 gap-2 text-sm font-bold\">\n            <span>Total</span>\n            <span />\n            <span className=\"text-right\">\n              ${payrollRecords.reduce((s, r) => s + r.grossPay, 0).toLocaleString()}\n            </span>\n            <span className=\"text-right text-status-error-text\">\n              -${payrollRecords.reduce((s, r) => s + r.deductions, 0).toLocaleString()}\n            </span>\n            <span className=\"text-right\">\n              ${payrollRecords.reduce((s, r) => s + r.netPay, 0).toLocaleString()}\n            </span>\n            <span />\n            <span />\n          </div>\n        </CardContent>\n      </Card>\n\n      <FormModal\n        open={createForm.open}\n        onOpenChange={createForm.onOpenChange}\n        title=\"Add payroll record\"\n        description=\"Create a payroll entry for a team member.\"\n        fields={payrollFields}\n        submitLabel=\"Add record\"\n        onSubmit={handleCreate}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"HrPayrollPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/HrPayrollPagePage.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n  GlassCard,\n  GradientText,\n  PagePurpose,\n  Pagination,\n  ResponsiveTable,\n  Separator,\n  type ResponsiveTableColumn,\n} from '@burdenoff/fe-libs/ui';\nimport { usePagination } from '@burdenoff/fe-libs/shared/hooks';\nimport { useGlobalUi } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { CheckCircle, Clock, DollarSign, Download, Plus, TrendingUp } from 'lucide-react';\nimport { useCrewFoundryStore, type PayrollRecord } from '../store/crewfoundryStore';\nimport { FormModal, useFormModal, type FieldConfig, type FormValues } from '../components/forms/FormModal';\nimport { getNumber, getText, newClientId } from '../components/forms/formValues';\n\nconst STATUS_OPTIONS = [\n  { label: 'Draft', value: 'draft' },\n  { label: 'Processing', value: 'processing' },\n  { label: 'Approved', value: 'approved' },\n  { label: 'Paid', value: 'paid' },\n  { label: 'Failed', value: 'failed' },\n];\n\nexport function HrPayrollPagePage() {\n  const { payrollRecords, employees, addPayrollRecord, updatePayrollRecord } = useCrewFoundryStore();\n  const { showToast } = useGlobalUi();\n  const [selectedPeriod, setSelectedPeriod] = useState('January 2026');\n  const createForm = useFormModal<void>();\n  const { page, pageSize, offset, setPage } = usePagination({ initialPageSize: 10 });\n\n  const employeeOptions = useMemo(\n    () =>\n      employees.map((employee) => ({\n        label: `${employee.firstName} ${employee.lastName}`,\n        value: employee.id,\n      })),\n    [employees]\n  );\n\n  const payrollFields = useMemo<FieldConfig[]>(\n    () => [\n      {\n        name: 'employeeId',\n        label: 'Employee',\n        type: 'select',\n        required: true,\n        options: employeeOptions,\n        colSpan: 2,\n      },\n      { name: 'period', label: 'Pay period', type: 'text', required: true, placeholder: 'e.g. February 2026' },\n      { name: 'paymentMethod', label: 'Payment method', type: 'text', required: true, placeholder: 'e.g. Bank Transfer' },\n      { name: 'grossPay', label: 'Gross pay', type: 'number', required: true },\n      { name: 'deductions', label: 'Deductions', type: 'number', required: true },\n      { name: 'netPay', label: 'Net pay (auto if blank)', type: 'number' },\n      { name: 'payDate', label: 'Pay date', type: 'date' },\n      { name: 'status', label: 'Status', type: 'select', options: STATUS_OPTIONS },\n    ],\n    [employeeOptions]\n  );\n\n  const periodRecords = payrollRecords.filter((r) => r.period === selectedPeriod);\n  const totalGross = periodRecords.reduce((s, r) => s + r.grossPay, 0);\n  const totalNet = periodRecords.reduce((s, r) => s + r.netPay, 0);\n  const totalDeductions = periodRecords.reduce((s, r) => s + r.deductions, 0);\n  const paidCount = periodRecords.filter((r) => r.status === 'paid').length;\n  const processingCount = periodRecords.filter((r) => r.status === 'processing').length;\n  const recordPageItems = periodRecords.slice(offset, offset + pageSize);\n\n  const periods = [...new Set(payrollRecords.map((r) => r.period))];\n\n  const handlePeriodChange = (period: string) => {\n    setSelectedPeriod(period);\n    setPage(1);\n  };\n\n  const recordColumns: ResponsiveTableColumn<PayrollRecord>[] = [\n    {\n      key: 'employee',\n      header: 'Employee',\n      priority: 'primary',\n      cell: (record) => <span className=\"font-medium\">{record.employeeName}</span>,\n    },\n    {\n      key: 'department',\n      header: 'Department',\n      cell: (record) => <span className=\"text-text-secondary\">{record.department}</span>,\n    },\n    {\n      key: 'gross',\n      header: 'Gross Pay',\n      headerClassName: 'text-right',\n      cellClassName: 'md:text-right',\n      cell: (record) => <span>${record.grossPay.toLocaleString()}</span>,\n    },\n    {\n      key: 'deductions',\n      header: 'Deductions',\n      headerClassName: 'text-right',\n      cellClassName: 'md:text-right',\n      cell: (record) => (\n        <span className=\"text-status-error-text\">-${record.deductions.toLocaleString()}</span>\n      ),\n    },\n    {\n      key: 'net',\n      header: 'Net Pay',\n      headerClassName: 'text-right',\n      cellClassName: 'md:text-right',\n      cell: (record) => <span className=\"font-medium\">${record.netPay.toLocaleString()}</span>,\n    },\n    {\n      key: 'method',\n      header: 'Payment Method',\n      cell: (record) => <span className=\"text-text-secondary\">{record.paymentMethod}</span>,\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      cell: (record) => (\n        <div className=\"flex items-center gap-2\">\n          <Badge\n            variant={\n              record.status === 'paid'\n                ? 'default'\n                : record.status === 'processing'\n                  ? 'secondary'\n                  : 'outline'\n            }\n            className=\"text-[10px]\"\n          >\n            {record.status}\n          </Badge>\n          {record.status !== 'paid' && (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"h-6 px-2 text-[10px]\"\n              onClick={() => handleMarkPaid(record)}\n            >\n              Mark paid\n            </Button>\n          )}\n        </div>\n      ),\n    },\n  ];\n\n  const handleCreate = async (values: FormValues) => {\n    const employeeId = getText(values, 'employeeId');\n    const employee = employees.find((item) => item.id === employeeId);\n    const grossPay = getNumber(values, 'grossPay');\n    const deductions = getNumber(values, 'deductions');\n    const netPayInput = getNumber(values, 'netPay');\n    const payload: PayrollRecord = {\n      id: newClientId(),\n      employeeId,\n      employeeName: employee ? `${employee.firstName} ${employee.lastName}` : '',\n      department: employee?.department ?? '',\n      period: getText(values, 'period'),\n      grossPay,\n      deductions,\n      netPay: netPayInput > 0 ? netPayInput : Math.max(grossPay - deductions, 0),\n      status: (getText(values, 'status') as PayrollRecord['status']) || 'draft',\n      payDate: getText(values, 'payDate'),\n      paymentMethod: getText(values, 'paymentMethod'),\n    };\n    await addPayrollRecord(payload);\n  };\n\n  const handleMarkPaid = async (record: PayrollRecord) => {\n    try {\n      await updatePayrollRecord(record.id, {\n        status: 'paid',\n        payDate: new Date().toISOString().slice(0, 10),\n      });\n    } catch (error) {\n      showToast(error instanceof Error ? error.message : 'Unable to update payroll record', 'error');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-semibold\">\n            <GradientText>Payroll Management</GradientText>\n          </h1>\n          <p className=\"text-sm text-text-secondary\">Process and manage employee payroll</p>\n          <PagePurpose className=\"mt-1\">Run and review payroll — track salaries, deductions, and pay runs so your team gets paid accurately and on time.</PagePurpose>\n        </div>\n        <div className=\"flex gap-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            disabled\n            aria-label=\"Export payroll (coming soon)\"\n            title=\"Payroll export is coming soon\"\n          >\n            <Download className=\"h-4 w-4 mr-1\" />\n            Export\n            <Badge variant=\"secondary\" className=\"ml-1 text-[9px]\">\n              Soon\n            </Badge>\n          </Button>\n          <Button size=\"sm\" onClick={() => createForm.openModal()}>\n            <Plus className=\"h-4 w-4 mr-1\" />\n            Add Record\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-4\">\n        <GlassCard treatment=\"glass\" glow className=\"border-border-seam\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Gross Payroll</CardTitle>\n            <DollarSign className=\"h-4 w-4 text-text-secondary\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold tabular-nums\">${totalGross.toLocaleString()}</div>\n            <p className=\"text-xs text-text-secondary\">{selectedPeriod}</p>\n          </CardContent>\n        </GlassCard>\n        <GlassCard treatment=\"metric\" className=\"border-border-seam\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Net Payroll</CardTitle>\n            <TrendingUp className=\"h-4 w-4 text-text-secondary\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold tabular-nums\">${totalNet.toLocaleString()}</div>\n            <p className=\"text-xs text-text-secondary\">After deductions</p>\n          </CardContent>\n        </GlassCard>\n        <GlassCard treatment=\"metric\" className=\"border-border-seam\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Paid</CardTitle>\n            <CheckCircle className=\"h-4 w-4 text-status-success-text\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold tabular-nums\">{paidCount}</div>\n            <p className=\"text-xs text-text-secondary\">employees paid</p>\n          </CardContent>\n        </GlassCard>\n        <GlassCard treatment=\"metric\" className=\"border-border-seam\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Processing</CardTitle>\n            <Clock className=\"h-4 w-4 text-status-warning-text\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold tabular-nums\">{processingCount}</div>\n            <p className=\"text-xs text-text-secondary\">in progress</p>\n          </CardContent>\n        </GlassCard>\n      </div>\n\n      <div className=\"flex flex-wrap gap-2\">\n        {periods.map((period) => (\n          <Button\n            key={period}\n            variant={selectedPeriod === period ? 'default' : 'outline'}\n            size=\"sm\"\n            onClick={() => handlePeriodChange(period)}\n          >\n            {period}\n          </Button>\n        ))}\n      </div>\n\n      <Card>\n        <CardHeader>\n          <CardTitle>Payroll Records</CardTitle>\n          <CardDescription>\n            Individual employee payroll details for {selectedPeriod}\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-4\">\n          <ResponsiveTable<PayrollRecord>\n            data={recordPageItems}\n            rowKey={(record) => record.id}\n            columns={recordColumns}\n            emptyState={\n              <p className=\"py-6 text-center text-sm text-text-secondary\">\n                No payroll records for {selectedPeriod}.\n              </p>\n            }\n          />\n          {periodRecords.length > pageSize && (\n            <Pagination\n              page={page}\n              pageSize={pageSize}\n              totalItems={periodRecords.length}\n              onPageChange={setPage}\n            />\n          )}\n          {periodRecords.length > 0 && (\n            <>\n              <Separator />\n              <div className=\"flex flex-wrap items-center justify-between gap-4 text-sm font-semibold\">\n                <span>Total for {selectedPeriod}</span>\n                <div className=\"flex flex-wrap gap-x-6 gap-y-1\">\n                  <span>\n                    <span className=\"text-text-secondary\">Gross </span>${totalGross.toLocaleString()}\n                  </span>\n                  <span className=\"text-status-error-text\">\n                    <span className=\"text-text-secondary\">Deductions </span>-$\n                    {totalDeductions.toLocaleString()}\n                  </span>\n                  <span>\n                    <span className=\"text-text-secondary\">Net </span>${totalNet.toLocaleString()}\n                  </span>\n                </div>\n              </div>\n            </>\n          )}\n        </CardContent>\n      </Card>\n\n      <FormModal\n        open={createForm.open}\n        onOpenChange={createForm.onOpenChange}\n        title=\"Add payroll record\"\n        description=\"Create a payroll entry for a team member.\"\n        fields={payrollFields}\n        submitLabel=\"Add record\"\n        onSubmit={handleCreate}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}