@burdenoff/microfe-crewfoundry 2026.704.5 → 2026.704.7

package/dist/crewfoundry/pages/HrDepartmentsPagePage.js

@@ -1,14 +1,18 @@
 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 { ConfirmDialog as i } from "../components/forms/ConfirmDialog.js";
-import { getNumber as a, getText as o, newClientId as s } from "../components/forms/formValues.js";
-import { useState as c } from "react";
-import { Building2 as l, DollarSign as u, MapPin as d, Pencil as f, Plus as p, Trash2 as m, Users as h } from "lucide-react";
-import { 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, Separator as O } from "@burdenoff/fe-libs/ui";
+import { StatCard as n } from "../components/viz/StatCard.js";
+import { OrgTree as r } from "../components/viz/OrgTree.js";
+import { AvatarStack as i } from "../components/viz/AvatarStack.js";
+import "../components/viz/index.js";
+import { FormModal as a, useFormModal as o } from "../components/forms/FormModal.js";
+import { ConfirmDialog as s } from "../components/forms/ConfirmDialog.js";
+import { getNumber as c, getText as l, newClientId as u } from "../components/forms/formValues.js";
+import { useCallback as d, useMemo as f, useState as p } from "react";
+import { Building2 as m, DollarSign as h, MapPin as g, Network as _, Pencil as v, Plus as y, Trash2 as b, Users as x } from "lucide-react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { Badge as w, Button as T, Card as E, CardContent as D, CardHeader as O, CardTitle as k, GlassCard as A, GradientText as j, PagePurpose as M } from "@burdenoff/fe-libs/ui";
 //#region src/crewfoundry/pages/HrDepartmentsPagePage.tsx
-var k = [
+var N = (e) => `${e.firstName} ${e.lastName}`.trim(), P = [
 	{
 		name: "name",
 		label: "Department name",
@@ -47,227 +51,261 @@ var k = [
 			value: "restructuring"
 		}]
 	}
-], A = (e) => ({
+], F = (e) => ({
 	name: e.name,
 	headName: e.headName,
 	location: e.location,
 	budget: e.budget,
 	status: e.status
 });
-function j() {
-	let { departments: j, employees: M, addDepartment: N, updateDepartment: P, removeDepartment: F } = e(), I = r(), [L, R] = c(null), z = j.reduce((e, t) => e + t.budget, 0), B = j.reduce((e, t) => e + t.employeeCount, 0), V = I.context;
-	return /* @__PURE__ */ _("div", {
+function I() {
+	let { departments: I, employees: L, teams: R, addDepartment: z, updateDepartment: B, removeDepartment: V } = e(), H = o(), [U, W] = p(null), G = I.reduce((e, t) => e + t.budget, 0), K = I.reduce((e, t) => e + t.employeeCount, 0), q = H.context, J = d((e) => L.find((t) => t.id === e.headId) || L.find((t) => N(t) === e.headName), [L]), Y = f(() => {
+		if (I.length === 0) return null;
+		let e = L.find((e) => !e.managerId && /chief|ceo|founder|president|head of company/i.test(e.position)), t = I.map((e) => {
+			let t = J(e), n = R.filter((t) => t.department === e.name), r;
+			return r = n.length > 0 ? n.slice(0, 4).map((e) => ({
+				id: e.id,
+				name: e.name,
+				role: `${e.memberCount} member${e.memberCount === 1 ? "" : "s"}`
+			})) : L.filter((n) => n.department === e.name && n.id !== t?.id).slice(0, 3).map((e) => ({
+				id: e.id,
+				name: N(e),
+				role: e.position,
+				avatarUrl: e.avatar
+			})), {
+				id: e.id,
+				name: e.name,
+				role: e.headName ? `${e.headName}, Head` : "Department",
+				avatarUrl: t?.avatar,
+				children: r
+			};
+		});
+		return {
+			id: e?.id ?? "org-root",
+			name: e ? N(e) : "Organization",
+			role: e?.position ?? "Company",
+			avatarUrl: e?.avatar,
+			children: t
+		};
+	}, [
+		I,
+		L,
+		R,
+		J
+	]);
+	return /* @__PURE__ */ C("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ C("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ _("div", { children: [
-					/* @__PURE__ */ g("h1", {
+				children: [/* @__PURE__ */ C("div", { children: [
+					/* @__PURE__ */ S("h1", {
 						className: "text-2xl font-semibold",
-						children: /* @__PURE__ */ g(E, { children: "Departments" })
+						children: /* @__PURE__ */ S(j, { children: "Departments" })
 					}),
-					/* @__PURE__ */ g("p", {
+					/* @__PURE__ */ S("p", {
 						className: "text-sm text-text-secondary",
 						children: "Organizational structure and department management"
 					}),
-					/* @__PURE__ */ g(D, {
+					/* @__PURE__ */ S(M, {
 						className: "mt-1",
 						children: "Organize your company into departments — set up structure, assign heads, and see how headcount is distributed across the org."
 					})
-				] }), /* @__PURE__ */ _(y, {
+				] }), /* @__PURE__ */ C(T, {
 					size: "sm",
-					onClick: () => I.openModal(),
-					children: [/* @__PURE__ */ g(p, { className: "h-4 w-4 mr-1" }), "Add Department"]
+					onClick: () => H.openModal(),
+					children: [/* @__PURE__ */ S(y, { className: "h-4 w-4 mr-1" }), "Add Department"]
 				})]
 			}),
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ C("div", {
 				className: "grid gap-4 md:grid-cols-3",
 				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: "Total Departments"
-							}), /* @__PURE__ */ g(l, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ g(x, { children: /* @__PURE__ */ g("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: j.length
-						}) })]
+					/* @__PURE__ */ S(n, {
+						label: "Total Departments",
+						value: I.length,
+						icon: /* @__PURE__ */ S(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: "Total Headcount"
-							}), /* @__PURE__ */ g(h, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ g(x, { children: /* @__PURE__ */ g("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: B
-						}) })]
+					/* @__PURE__ */ S(n, {
+						label: "Total Headcount",
+						value: K,
+						icon: /* @__PURE__ */ S(x, { 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: "Total Budget"
-							}), /* @__PURE__ */ g(u, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ g(x, { children: /* @__PURE__ */ _("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: [
-								"$",
-								(z / 1e6).toFixed(1),
-								"M"
-							]
-						}) })]
+					/* @__PURE__ */ S(n, {
+						label: "Total Budget",
+						value: `$${(G / 1e6).toFixed(1)}M`,
+						icon: /* @__PURE__ */ S(h, { className: "h-4 w-4" })
 					})
 				]
 			}),
-			/* @__PURE__ */ g("div", {
-				className: "grid gap-4 md:grid-cols-2",
-				children: j.map((e) => {
-					let n = M.filter((t) => t.department === e.name), r = n.length > 0 ? Math.round(n.reduce((e, t) => e + t.salary, 0) / n.length) : 0, i = n.length > 0 ? (n.reduce((e, t) => e + t.performanceScore, 0) / n.length).toFixed(1) : "0";
-					return /* @__PURE__ */ _(b, { children: [/* @__PURE__ */ _(C, { children: [/* @__PURE__ */ _("div", {
-						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ g(w, {
-							className: "text-lg",
-							children: e.name
-						}), /* @__PURE__ */ _("div", {
-							className: "flex items-center gap-1",
+			/* @__PURE__ */ S("div", {
+				className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3",
+				children: I.map((e) => {
+					let n = L.filter((t) => t.department === e.name), r = e.employeeCount || n.length, a = n.length > 0 ? Math.round(n.reduce((e, t) => e + t.salary, 0) / n.length) : 0, o = n.length > 0 ? n.reduce((e, t) => e + t.performanceScore, 0) / n.length : 0, s = Math.round(o / 5 * 100), c = J(e), l = s >= 80 ? "bg-status-success-text" : s >= 60 ? "bg-status-warning-text" : "bg-status-error-text";
+					return /* @__PURE__ */ C(A, {
+						treatment: "glass",
+						className: "border-border-seam",
+						children: [/* @__PURE__ */ S(O, { children: /* @__PURE__ */ C("div", {
+							className: "flex items-start justify-between gap-2",
+							children: [/* @__PURE__ */ C("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ S(k, {
+									className: "truncate text-lg",
+									children: e.name
+								}), /* @__PURE__ */ C("div", {
+									className: "mt-2 flex items-center gap-2",
+									children: [/* @__PURE__ */ S(i, {
+										people: [{
+											name: e.headName || "Unassigned",
+											avatarUrl: c?.avatar
+										}],
+										size: 28
+									}), /* @__PURE__ */ C("span", {
+										className: "truncate text-sm text-text-secondary",
+										children: [/* @__PURE__ */ S("span", {
+											className: "font-medium text-text-primary",
+											children: e.headName
+										}), e.headName ? ", Head" : "No head assigned"]
+									})]
+								})]
+							}), /* @__PURE__ */ C("div", {
+								className: "flex items-center gap-1",
+								children: [
+									/* @__PURE__ */ S(w, {
+										variant: e.status === "active" ? "default" : "secondary",
+										children: t(e.status)
+									}),
+									/* @__PURE__ */ S(T, {
+										variant: "ghost",
+										size: "sm",
+										className: "h-8 w-8 p-0",
+										"aria-label": `Edit ${e.name}`,
+										onClick: () => H.openModal(e),
+										children: /* @__PURE__ */ S(v, { className: "h-4 w-4" })
+									}),
+									/* @__PURE__ */ S(T, {
+										variant: "ghost",
+										size: "sm",
+										className: "h-8 w-8 p-0",
+										"aria-label": `Delete ${e.name}`,
+										onClick: () => W(e),
+										children: /* @__PURE__ */ S(b, { className: "h-4 w-4 text-status-error-text" })
+									})
+								]
+							})]
+						}) }), /* @__PURE__ */ C(D, {
+							className: "space-y-4",
 							children: [
-								/* @__PURE__ */ g(v, {
-									variant: e.status === "active" ? "default" : "secondary",
-									children: t(e.status)
+								/* @__PURE__ */ C("div", {
+									className: "flex items-end justify-between gap-3",
+									children: [/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+										className: "text-3xl font-bold leading-none tabular-nums",
+										children: r
+									}), /* @__PURE__ */ S("p", {
+										className: "mt-1 text-xs text-text-secondary",
+										children: "Employees"
+									})] }), /* @__PURE__ */ C("div", {
+										className: "text-right",
+										children: [/* @__PURE__ */ C("p", {
+											className: "text-lg font-semibold tabular-nums",
+											children: [
+												"$",
+												(e.budget / 1e6).toFixed(1),
+												"M"
+											]
+										}), /* @__PURE__ */ S("p", {
+											className: "text-xs text-text-secondary",
+											children: "Annual budget"
+										})]
+									})]
+								}),
+								/* @__PURE__ */ C("div", {
+									className: "space-y-1",
+									children: [/* @__PURE__ */ C("div", {
+										className: "flex items-center justify-between text-xs text-text-secondary",
+										children: [/* @__PURE__ */ S("span", { children: "Avg performance" }), /* @__PURE__ */ C("span", {
+											className: "font-medium text-text-primary tabular-nums",
+											children: [s, "%"]
+										})]
+									}), /* @__PURE__ */ S("div", {
+										className: "h-2 overflow-hidden rounded-full bg-bg-sunken",
+										children: /* @__PURE__ */ S("div", {
+											className: `h-2 rounded-full ${l}`,
+											style: { width: `${s}%` }
+										})
+									})]
 								}),
-								/* @__PURE__ */ g(y, {
-									variant: "ghost",
-									size: "sm",
-									className: "h-8 w-8 p-0",
-									"aria-label": `Edit ${e.name}`,
-									onClick: () => I.openModal(e),
-									children: /* @__PURE__ */ g(f, { className: "h-4 w-4" })
+								/* @__PURE__ */ C("div", {
+									className: "flex items-center justify-between text-xs text-text-secondary",
+									children: [/* @__PURE__ */ C("span", {
+										className: "flex items-center gap-1",
+										children: [/* @__PURE__ */ S(g, { className: "h-3 w-3" }), e.location]
+									}), /* @__PURE__ */ C("span", { children: [
+										"Cost/Head:",
+										" ",
+										r > 0 ? `$${Math.round(e.budget / r / 1e3)}K` : "—"
+									] })]
 								}),
-								/* @__PURE__ */ g(y, {
-									variant: "ghost",
-									size: "sm",
-									className: "h-8 w-8 p-0",
-									"aria-label": `Delete ${e.name}`,
-									onClick: () => R(e),
-									children: /* @__PURE__ */ g(m, { className: "h-4 w-4 text-status-error-text" })
+								a > 0 && /* @__PURE__ */ C("p", {
+									className: "text-xs text-text-secondary",
+									children: ["Avg salary ", /* @__PURE__ */ C("span", {
+										className: "font-medium text-text-primary",
+										children: ["$", a.toLocaleString()]
+									})]
 								})
 							]
 						})]
-					}), /* @__PURE__ */ _(S, {
-						className: "flex items-center gap-1",
-						children: [/* @__PURE__ */ g(d, { className: "h-3 w-3" }), e.location]
-					})] }), /* @__PURE__ */ _(x, { children: [
-						/* @__PURE__ */ _("div", {
-							className: "grid grid-cols-2 gap-4 mb-4",
-							children: [
-								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-									className: "text-xs text-text-secondary",
-									children: "Department Head"
-								}), /* @__PURE__ */ g("p", {
-									className: "text-sm font-medium",
-									children: e.headName
-								})] }),
-								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-									className: "text-xs text-text-secondary",
-									children: "Headcount"
-								}), /* @__PURE__ */ _("p", {
-									className: "text-sm font-medium",
-									children: [e.employeeCount, " employees"]
-								})] }),
-								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-									className: "text-xs text-text-secondary",
-									children: "Annual Budget"
-								}), /* @__PURE__ */ _("p", {
-									className: "text-sm font-medium",
-									children: [
-										"$",
-										(e.budget / 1e6).toFixed(1),
-										"M"
-									]
-								})] }),
-								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-									className: "text-xs text-text-secondary",
-									children: "Avg Salary"
-								}), /* @__PURE__ */ _("p", {
-									className: "text-sm font-medium",
-									children: ["$", r.toLocaleString()]
-								})] })
-							]
-						}),
-						/* @__PURE__ */ g(O, { className: "mb-3" }),
-						/* @__PURE__ */ _("div", {
-							className: "flex items-center justify-between text-xs",
-							children: [/* @__PURE__ */ _("span", {
-								className: "text-text-secondary",
-								children: [
-									"Avg Performance: ",
-									i,
-									"/5"
-								]
-							}), /* @__PURE__ */ _("span", {
-								className: "text-text-secondary",
-								children: [
-									"Cost/Head:",
-									" ",
-									e.employeeCount > 0 ? `$${Math.round(e.budget / e.employeeCount / 1e3)}K` : "—"
-								]
-							})]
-						})
-					] })] }, e.id);
+					}, e.id);
 				})
 			}),
-			/* @__PURE__ */ g(n, {
-				open: I.open,
-				onOpenChange: I.onOpenChange,
-				title: V ? "Edit department" : "Add department",
-				description: V ? "Update this department’s details." : "Create a new department in your organization.",
-				fields: k,
-				initialValues: V ? A(V) : void 0,
-				submitLabel: V ? "Save changes" : "Add department",
+			Y && /* @__PURE__ */ C(E, { children: [/* @__PURE__ */ S(O, { children: /* @__PURE__ */ C(k, {
+				className: "flex items-center gap-2 text-lg",
+				children: [/* @__PURE__ */ S(_, { className: "h-4 w-4 text-text-secondary" }), "Org structure"]
+			}) }), /* @__PURE__ */ S(D, { children: /* @__PURE__ */ S("div", {
+				className: "overflow-x-auto pb-2",
+				children: /* @__PURE__ */ S("div", {
+					className: "min-w-fit",
+					children: /* @__PURE__ */ S(r, { root: Y })
+				})
+			}) })] }),
+			/* @__PURE__ */ S(a, {
+				open: H.open,
+				onOpenChange: H.onOpenChange,
+				title: q ? "Edit department" : "Add department",
+				description: q ? "Update this department’s details." : "Create a new department in your organization.",
+				fields: P,
+				initialValues: q ? F(q) : void 0,
+				submitLabel: q ? "Save changes" : "Add department",
 				onSubmit: async (e) => {
 					let t = {
-						id: V?.id ?? s(),
-						name: o(e, "name"),
-						headId: V?.headId ?? "",
-						headName: o(e, "headName"),
-						employeeCount: V?.employeeCount ?? 0,
-						budget: a(e, "budget"),
-						location: o(e, "location"),
-						status: o(e, "status")
+						id: q?.id ?? u(),
+						name: l(e, "name"),
+						headId: q?.headId ?? "",
+						headName: l(e, "headName"),
+						employeeCount: q?.employeeCount ?? 0,
+						budget: c(e, "budget"),
+						location: l(e, "location"),
+						status: l(e, "status")
 					};
-					V ? await P(V.id, t) : await N(t);
+					q ? await B(q.id, t) : await z(t);
 				}
 			}),
-			/* @__PURE__ */ g(i, {
-				open: L !== null,
+			/* @__PURE__ */ S(s, {
+				open: U !== null,
 				onOpenChange: (e) => {
-					e || R(null);
+					e || W(null);
 				},
 				title: "Delete department?",
-				description: L ? `${L.name} will be removed. This cannot be undone.` : void 0,
+				description: U ? `${U.name} will be removed. This cannot be undone.` : void 0,
 				confirmLabel: "Delete",
 				destructive: !0,
 				onConfirm: async () => {
-					L && (await F(L.id), R(null));
+					U && (await V(U.id), W(null));
 				}
 			})
 		]
 	});
 }
 //#endregion
-export { j as HrDepartmentsPagePage };
+export { I as HrDepartmentsPagePage };
 
 //# sourceMappingURL=HrDepartmentsPagePage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HrDepartmentsPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/HrDepartmentsPagePage.tsx"],"sourcesContent":["import { 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 { Building2, DollarSign, MapPin, Pencil, Plus, Trash2, Users } from 'lucide-react';\nimport { useCrewFoundryStore, type Department } from '../store/crewfoundryStore';\nimport {\n  FormModal,\n  useFormModal,\n  type FieldConfig,\n  type FormValues,\n} from '../components/forms/FormModal';\nimport { ConfirmDialog } from '../components/forms/ConfirmDialog';\nimport { getNumber, getText, newClientId } from '../components/forms/formValues';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\n\nconst DEPARTMENT_FIELDS: FieldConfig[] = [\n  { name: 'name', label: 'Department name', type: 'text', required: true, colSpan: 2 },\n  { name: 'headName', label: 'Department head', type: 'text', required: true },\n  { name: 'location', label: 'Location', type: 'text', required: true },\n  { name: 'budget', label: 'Annual budget', type: 'number', required: true },\n  {\n    name: 'status',\n    label: 'Status',\n    type: 'select',\n    required: true,\n    options: [\n      { label: 'Active', value: 'active' },\n      { label: 'Restructuring', value: 'restructuring' },\n    ],\n  },\n];\n\nconst toFormValues = (department: Department): FormValues => ({\n  name: department.name,\n  headName: department.headName,\n  location: department.location,\n  budget: department.budget,\n  status: department.status,\n});\n\nexport function HrDepartmentsPagePage() {\n  const { departments, employees, addDepartment, updateDepartment, removeDepartment } =\n    useCrewFoundryStore();\n  const form = useFormModal<Department>();\n  const [deleting, setDeleting] = useState<Department | null>(null);\n\n  const totalBudget = departments.reduce((s, d) => s + d.budget, 0);\n  const totalHeadcount = departments.reduce((s, d) => s + d.employeeCount, 0);\n\n  const editing = form.context;\n\n  const handleSubmit = async (values: FormValues) => {\n    const payload: Department = {\n      id: editing?.id ?? newClientId(),\n      name: getText(values, 'name'),\n      headId: editing?.headId ?? '',\n      headName: getText(values, 'headName'),\n      employeeCount: editing?.employeeCount ?? 0,\n      budget: getNumber(values, 'budget'),\n      location: getText(values, 'location'),\n      status: getText(values, 'status') as Department['status'],\n    };\n    if (editing) {\n      await updateDepartment(editing.id, payload);\n    } else {\n      await addDepartment(payload);\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>Departments</GradientText>\n          </h1>\n          <p className=\"text-sm text-text-secondary\">\n            Organizational structure and department management\n          </p>\n          <PagePurpose className=\"mt-1\">\n            Organize your company into departments — set up structure, assign heads, and see how\n            headcount is distributed across the org.\n          </PagePurpose>\n        </div>\n        <Button size=\"sm\" onClick={() => form.openModal()}>\n          <Plus className=\"h-4 w-4 mr-1\" />\n          Add Department\n        </Button>\n      </div>\n\n      <div className=\"grid gap-4 md:grid-cols-3\">\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\">Total Departments</CardTitle>\n            <Building2 className=\"h-4 w-4 text-text-secondary\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold tabular-nums\">{departments.length}</div>\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\">Total Headcount</CardTitle>\n            <Users className=\"h-4 w-4 text-text-secondary\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold tabular-nums\">{totalHeadcount}</div>\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\">Total Budget</CardTitle>\n            <DollarSign className=\"h-4 w-4 text-text-secondary\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold tabular-nums\">\n              ${(totalBudget / 1000000).toFixed(1)}M\n            </div>\n          </CardContent>\n        </GlassCard>\n      </div>\n\n      <div className=\"grid gap-4 md:grid-cols-2\">\n        {departments.map((dept) => {\n          const deptEmps = employees.filter((e) => e.department === dept.name);\n          const avgSalary =\n            deptEmps.length > 0\n              ? Math.round(deptEmps.reduce((s, e) => s + e.salary, 0) / deptEmps.length)\n              : 0;\n          const avgPerf =\n            deptEmps.length > 0\n              ? (deptEmps.reduce((s, e) => s + e.performanceScore, 0) / deptEmps.length).toFixed(1)\n              : '0';\n\n          return (\n            <Card key={dept.id}>\n              <CardHeader>\n                <div className=\"flex items-center justify-between\">\n                  <CardTitle className=\"text-lg\">{dept.name}</CardTitle>\n                  <div className=\"flex items-center gap-1\">\n                    <Badge variant={dept.status === 'active' ? 'default' : 'secondary'}>\n                      {formatEnumLabel(dept.status)}\n                    </Badge>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-8 w-8 p-0\"\n                      aria-label={`Edit ${dept.name}`}\n                      onClick={() => form.openModal(dept)}\n                    >\n                      <Pencil className=\"h-4 w-4\" />\n                    </Button>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-8 w-8 p-0\"\n                      aria-label={`Delete ${dept.name}`}\n                      onClick={() => setDeleting(dept)}\n                    >\n                      <Trash2 className=\"h-4 w-4 text-status-error-text\" />\n                    </Button>\n                  </div>\n                </div>\n                <CardDescription className=\"flex items-center gap-1\">\n                  <MapPin className=\"h-3 w-3\" />\n                  {dept.location}\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <div className=\"grid grid-cols-2 gap-4 mb-4\">\n                  <div>\n                    <p className=\"text-xs text-text-secondary\">Department Head</p>\n                    <p className=\"text-sm font-medium\">{dept.headName}</p>\n                  </div>\n                  <div>\n                    <p className=\"text-xs text-text-secondary\">Headcount</p>\n                    <p className=\"text-sm font-medium\">{dept.employeeCount} employees</p>\n                  </div>\n                  <div>\n                    <p className=\"text-xs text-text-secondary\">Annual Budget</p>\n                    <p className=\"text-sm font-medium\">${(dept.budget / 1000000).toFixed(1)}M</p>\n                  </div>\n                  <div>\n                    <p className=\"text-xs text-text-secondary\">Avg Salary</p>\n                    <p className=\"text-sm font-medium\">${avgSalary.toLocaleString()}</p>\n                  </div>\n                </div>\n                <Separator className=\"mb-3\" />\n                <div className=\"flex items-center justify-between text-xs\">\n                  <span className=\"text-text-secondary\">Avg Performance: {avgPerf}/5</span>\n                  <span className=\"text-text-secondary\">\n                    Cost/Head:{' '}\n                    {dept.employeeCount > 0\n                      ? `$${Math.round(dept.budget / dept.employeeCount / 1000)}K`\n                      : '—'}\n                  </span>\n                </div>\n              </CardContent>\n            </Card>\n          );\n        })}\n      </div>\n\n      <FormModal\n        open={form.open}\n        onOpenChange={form.onOpenChange}\n        title={editing ? 'Edit department' : 'Add department'}\n        description={\n          editing\n            ? 'Update this department’s details.'\n            : 'Create a new department in your organization.'\n        }\n        fields={DEPARTMENT_FIELDS}\n        initialValues={editing ? toFormValues(editing) : undefined}\n        submitLabel={editing ? 'Save changes' : 'Add department'}\n        onSubmit={handleSubmit}\n      />\n\n      <ConfirmDialog\n        open={deleting !== null}\n        onOpenChange={(open) => {\n          if (!open) {\n            setDeleting(null);\n          }\n        }}\n        title=\"Delete department?\"\n        description={\n          deleting ? `${deleting.name} will be removed. This cannot be undone.` : undefined\n        }\n        confirmLabel=\"Delete\"\n        destructive\n        onConfirm={async () => {\n          if (deleting) {\n            await removeDepartment(deleting.id);\n            setDeleting(null);\n          }\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"HrDepartmentsPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/HrDepartmentsPagePage.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  GlassCard,\n  GradientText,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { Building2, DollarSign, MapPin, Network, Pencil, Plus, Trash2, Users } from 'lucide-react';\nimport {\n  useCrewFoundryStore,\n  type Department,\n  type Employee,\n} from '../store/crewfoundryStore';\nimport { AvatarStack, OrgTree, StatCard, type OrgNode } from '../components/viz';\nimport {\n  FormModal,\n  useFormModal,\n  type FieldConfig,\n  type FormValues,\n} from '../components/forms/FormModal';\nimport { ConfirmDialog } from '../components/forms/ConfirmDialog';\nimport { getNumber, getText, newClientId } from '../components/forms/formValues';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\n\nconst fullName = (employee: Employee): string => `${employee.firstName} ${employee.lastName}`.trim();\n\nconst DEPARTMENT_FIELDS: FieldConfig[] = [\n  { name: 'name', label: 'Department name', type: 'text', required: true, colSpan: 2 },\n  { name: 'headName', label: 'Department head', type: 'text', required: true },\n  { name: 'location', label: 'Location', type: 'text', required: true },\n  { name: 'budget', label: 'Annual budget', type: 'number', required: true },\n  {\n    name: 'status',\n    label: 'Status',\n    type: 'select',\n    required: true,\n    options: [\n      { label: 'Active', value: 'active' },\n      { label: 'Restructuring', value: 'restructuring' },\n    ],\n  },\n];\n\nconst toFormValues = (department: Department): FormValues => ({\n  name: department.name,\n  headName: department.headName,\n  location: department.location,\n  budget: department.budget,\n  status: department.status,\n});\n\nexport function HrDepartmentsPagePage() {\n  const { departments, employees, teams, addDepartment, updateDepartment, removeDepartment } =\n    useCrewFoundryStore();\n  const form = useFormModal<Department>();\n  const [deleting, setDeleting] = useState<Department | null>(null);\n\n  const totalBudget = departments.reduce((s, d) => s + d.budget, 0);\n  const totalHeadcount = departments.reduce((s, d) => s + d.employeeCount, 0);\n\n  const editing = form.context;\n\n  // Resolve a department's head to a real employee (by id first, then by name) so\n  // we can show a real avatar rather than a text-only name.\n  const headOf = useCallback(\n    (department: Department): Employee | undefined =>\n      employees.find((e) => e.id === department.headId) ||\n      employees.find((e) => fullName(e) === department.headName),\n    [employees]\n  );\n\n  // Org structure: a real hierarchy derived from the roster + departments + teams.\n  // Root = a top-of-org employee (CEO / founder / chief with no manager) when one\n  // exists, else a generic company node. Each department hangs off the root with\n  // its head; each department's children are its real teams (or a sample of its\n  // real employees when the department has no teams).\n  const orgRoot = useMemo<OrgNode | null>(() => {\n    if (departments.length === 0) {\n      return null;\n    }\n    const topLeader = employees.find(\n      (e) => !e.managerId && /chief|ceo|founder|president|head of company/i.test(e.position)\n    );\n\n    const deptNodes: OrgNode[] = departments.map((department) => {\n      const head = headOf(department);\n      const deptTeams = teams.filter((team) => team.department === department.name);\n      let children: OrgNode[];\n      if (deptTeams.length > 0) {\n        children = deptTeams.slice(0, 4).map((team) => ({\n          id: team.id,\n          name: team.name,\n          role: `${team.memberCount} member${team.memberCount === 1 ? '' : 's'}`,\n        }));\n      } else {\n        children = employees\n          .filter((e) => e.department === department.name && e.id !== head?.id)\n          .slice(0, 3)\n          .map((e) => ({ id: e.id, name: fullName(e), role: e.position, avatarUrl: e.avatar }));\n      }\n      return {\n        id: department.id,\n        name: department.name,\n        role: department.headName ? `${department.headName}, Head` : 'Department',\n        avatarUrl: head?.avatar,\n        children,\n      };\n    });\n\n    return {\n      id: topLeader?.id ?? 'org-root',\n      name: topLeader ? fullName(topLeader) : 'Organization',\n      role: topLeader?.position ?? 'Company',\n      avatarUrl: topLeader?.avatar,\n      children: deptNodes,\n    };\n  }, [departments, employees, teams, headOf]);\n\n  const handleSubmit = async (values: FormValues) => {\n    const payload: Department = {\n      id: editing?.id ?? newClientId(),\n      name: getText(values, 'name'),\n      headId: editing?.headId ?? '',\n      headName: getText(values, 'headName'),\n      employeeCount: editing?.employeeCount ?? 0,\n      budget: getNumber(values, 'budget'),\n      location: getText(values, 'location'),\n      status: getText(values, 'status') as Department['status'],\n    };\n    if (editing) {\n      await updateDepartment(editing.id, payload);\n    } else {\n      await addDepartment(payload);\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>Departments</GradientText>\n          </h1>\n          <p className=\"text-sm text-text-secondary\">\n            Organizational structure and department management\n          </p>\n          <PagePurpose className=\"mt-1\">\n            Organize your company into departments — set up structure, assign heads, and see how\n            headcount is distributed across the org.\n          </PagePurpose>\n        </div>\n        <Button size=\"sm\" onClick={() => form.openModal()}>\n          <Plus className=\"h-4 w-4 mr-1\" />\n          Add Department\n        </Button>\n      </div>\n\n      <div className=\"grid gap-4 md:grid-cols-3\">\n        <StatCard\n          label=\"Total Departments\"\n          value={departments.length}\n          icon={<Building2 className=\"h-4 w-4\" />}\n        />\n        <StatCard\n          label=\"Total Headcount\"\n          value={totalHeadcount}\n          icon={<Users className=\"h-4 w-4\" />}\n        />\n        <StatCard\n          label=\"Total Budget\"\n          value={`$${(totalBudget / 1000000).toFixed(1)}M`}\n          icon={<DollarSign className=\"h-4 w-4\" />}\n        />\n      </div>\n\n      <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-3\">\n        {departments.map((dept) => {\n          const deptEmps = employees.filter((e) => e.department === dept.name);\n          const headcount = dept.employeeCount || deptEmps.length;\n          const avgSalary =\n            deptEmps.length > 0\n              ? Math.round(deptEmps.reduce((s, e) => s + e.salary, 0) / deptEmps.length)\n              : 0;\n          const avgPerfValue =\n            deptEmps.length > 0\n              ? deptEmps.reduce((s, e) => s + e.performanceScore, 0) / deptEmps.length\n              : 0;\n          // Progress bar = real average performance for the department, on a 0–100\n          // scale (score out of 5). A clearly-labeled, computed metric — no fabrication.\n          const perfPct = Math.round((avgPerfValue / 5) * 100);\n          const head = headOf(dept);\n          const perfTone =\n            perfPct >= 80\n              ? 'bg-status-success-text'\n              : perfPct >= 60\n                ? 'bg-status-warning-text'\n                : 'bg-status-error-text';\n\n          return (\n            <GlassCard key={dept.id} treatment=\"glass\" className=\"border-border-seam\">\n              <CardHeader>\n                <div className=\"flex items-start justify-between gap-2\">\n                  <div className=\"min-w-0\">\n                    <CardTitle className=\"truncate text-lg\">{dept.name}</CardTitle>\n                    <div className=\"mt-2 flex items-center gap-2\">\n                      <AvatarStack\n                        people={[{ name: dept.headName || 'Unassigned', avatarUrl: head?.avatar }]}\n                        size={28}\n                      />\n                      <span className=\"truncate text-sm text-text-secondary\">\n                        <span className=\"font-medium text-text-primary\">{dept.headName}</span>\n                        {dept.headName ? ', Head' : 'No head assigned'}\n                      </span>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-1\">\n                    <Badge variant={dept.status === 'active' ? 'default' : 'secondary'}>\n                      {formatEnumLabel(dept.status)}\n                    </Badge>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-8 w-8 p-0\"\n                      aria-label={`Edit ${dept.name}`}\n                      onClick={() => form.openModal(dept)}\n                    >\n                      <Pencil className=\"h-4 w-4\" />\n                    </Button>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-8 w-8 p-0\"\n                      aria-label={`Delete ${dept.name}`}\n                      onClick={() => setDeleting(dept)}\n                    >\n                      <Trash2 className=\"h-4 w-4 text-status-error-text\" />\n                    </Button>\n                  </div>\n                </div>\n              </CardHeader>\n              <CardContent className=\"space-y-4\">\n                <div className=\"flex items-end justify-between gap-3\">\n                  <div>\n                    <p className=\"text-3xl font-bold leading-none tabular-nums\">{headcount}</p>\n                    <p className=\"mt-1 text-xs text-text-secondary\">Employees</p>\n                  </div>\n                  <div className=\"text-right\">\n                    <p className=\"text-lg font-semibold tabular-nums\">\n                      ${(dept.budget / 1000000).toFixed(1)}M\n                    </p>\n                    <p className=\"text-xs text-text-secondary\">Annual budget</p>\n                  </div>\n                </div>\n\n                <div className=\"space-y-1\">\n                  <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n                    <span>Avg performance</span>\n                    <span className=\"font-medium text-text-primary tabular-nums\">{perfPct}%</span>\n                  </div>\n                  <div className=\"h-2 overflow-hidden rounded-full bg-bg-sunken\">\n                    <div className={`h-2 rounded-full ${perfTone}`} style={{ width: `${perfPct}%` }} />\n                  </div>\n                </div>\n\n                <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n                  <span className=\"flex items-center gap-1\">\n                    <MapPin className=\"h-3 w-3\" />\n                    {dept.location}\n                  </span>\n                  <span>\n                    Cost/Head:{' '}\n                    {headcount > 0\n                      ? `$${Math.round(dept.budget / headcount / 1000)}K`\n                      : '—'}\n                  </span>\n                </div>\n                {avgSalary > 0 && (\n                  <p className=\"text-xs text-text-secondary\">\n                    Avg salary <span className=\"font-medium text-text-primary\">${avgSalary.toLocaleString()}</span>\n                  </p>\n                )}\n              </CardContent>\n            </GlassCard>\n          );\n        })}\n      </div>\n\n      {orgRoot && (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"flex items-center gap-2 text-lg\">\n              <Network className=\"h-4 w-4 text-text-secondary\" />\n              Org structure\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            <div className=\"overflow-x-auto pb-2\">\n              <div className=\"min-w-fit\">\n                <OrgTree root={orgRoot} />\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      )}\n\n      <FormModal\n        open={form.open}\n        onOpenChange={form.onOpenChange}\n        title={editing ? 'Edit department' : 'Add department'}\n        description={\n          editing\n            ? 'Update this department’s details.'\n            : 'Create a new department in your organization.'\n        }\n        fields={DEPARTMENT_FIELDS}\n        initialValues={editing ? toFormValues(editing) : undefined}\n        submitLabel={editing ? 'Save changes' : 'Add department'}\n        onSubmit={handleSubmit}\n      />\n\n      <ConfirmDialog\n        open={deleting !== null}\n        onOpenChange={(open) => {\n          if (!open) {\n            setDeleting(null);\n          }\n        }}\n        title=\"Delete department?\"\n        description={\n          deleting ? `${deleting.name} will be removed. This cannot be undone.` : undefined\n        }\n        confirmLabel=\"Delete\"\n        destructive\n        onConfirm={async () => {\n          if (deleting) {\n            await removeDepartment(deleting.id);\n            setDeleting(null);\n          }\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}