@burdenoff/microfe-crewfoundry 2026.704.5 → 2026.704.7

package/dist/crewfoundry/pages/AnalyticsAnalyticsPagePage.js

@@ -1,312 +1,255 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
-import { useMemo as t } from "react";
-import { Activity as n, BarChart3 as r, Calendar as i, PieChart as a, TrendingUp as o, Users as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Badge as u, Card as d, CardContent as f, CardDescription as p, CardHeader as m, CardTitle as h, GlassCard as g, GradientText as _, PagePurpose as v, ResponsiveTable as y, Tabs as b, TabsContent as x, TabsList as S, TabsTrigger as C } from "@burdenoff/fe-libs/ui";
+import { AreaChart as t } from "../components/viz/AreaChart.js";
+import { LineChart as n } from "../components/viz/LineChart.js";
+import { BarChart as r } from "../components/viz/BarChart.js";
+import { HBarFunnel as i } from "../components/viz/HBarFunnel.js";
+import { DonutChart as a } from "../components/viz/DonutChart.js";
+import { StatCard as o } from "../components/viz/StatCard.js";
+import { SegmentedTabs as s } from "../components/viz/SegmentedTabs.js";
+import "../components/viz/index.js";
+import { attritionTrend as c, benchAndOverallocated as l, deptHeadcount as u, headcountByMonth as d, momDelta as f, performanceDistribution as p, timeToHire as m, utilizationByPersonWeek as h } from "../lib/analytics.js";
+import { useMemo as g, useState as _ } from "react";
+import { Activity as v, BarChart3 as y, Download as b, PieChart as x, Users as S } from "lucide-react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import { Button as T, Card as E, CardContent as D, CardHeader as O, CardTitle as k, GradientText as A, IllustratedEmptyState as j, PagePurpose as M } from "@burdenoff/fe-libs/ui";
 //#region src/crewfoundry/pages/AnalyticsAnalyticsPagePage.tsx
-function w() {
-	let { employees: w, departments: T, jobPostings: E, candidates: D, projects: O } = e(), k = t(() => {
-		if (w.length === 0) return [];
-		let e = (e) => {
-			let t = new Date(e);
-			return `${t.getFullYear()}-${String(t.getMonth()).padStart(2, "0")}`;
-		};
-		return Array.from(new Set(w.map((t) => e(t.startDate)))).sort().slice(-6).map((t) => {
-			let [n, r] = t.split("-").map(Number), i = new Date(n, r + 1, 0).getTime();
-			return {
-				month: new Date(n, r, 1).toLocaleString("en-US", {
-					month: "short",
-					year: "2-digit"
-				}),
-				headcount: w.filter((e) => new Date(e.startDate).getTime() <= i && e.status !== "terminated").length,
-				hires: w.filter((n) => e(n.startDate) === t).length,
-				exits: w.filter((n) => n.status === "terminated" && e(n.startDate) === t).length
-			};
+var N = [
+	"new",
+	"screening",
+	"interview",
+	"assessment",
+	"offer",
+	"hired"
+], P = [
+	"Needs",
+	"Meets",
+	"Exceeds",
+	"Outstanding"
+];
+function F(e) {
+	return `"${String(e).replace(/"/g, "\"\"")}"`;
+}
+function I() {
+	let { employees: I, departments: L, candidates: R, projects: z, timeEntries: B } = e(), [V, H] = _("12"), U = g(() => d(I), [I]), W = f(U).deltaPercent, G = z.filter((e) => e.status === "active").length, K = g(() => u(L).slice(0, 8), [L]), q = g(() => {
+		if (R.length === 0) return R;
+		let e = R.map((e) => new Date(e.appliedDate).getTime()).filter((e) => !Number.isNaN(e));
+		if (e.length === 0) return R;
+		let t = Math.max(...e) - Number(V) * 30 * 24 * 60 * 60 * 1e3, n = R.filter((e) => {
+			let n = new Date(e.appliedDate).getTime();
+			return Number.isNaN(n) || n >= t;
 		});
-	}, [w]), A = T.map((e) => ({
-		name: e.name,
-		count: e.employeeCount,
-		budget: e.budget
-	})), j = Math.max(1, ...A.map((e) => e.count)), M = Math.max(1, ...k.map((e) => e.headcount)), N = [...A].sort((e, t) => t.count - e.count), P = [
-		{
-			key: "name",
-			header: "Department",
-			priority: "primary",
-			cell: (e) => /* @__PURE__ */ c("span", {
-				className: "font-medium",
-				children: e.name
-			})
-		},
-		{
-			key: "count",
-			header: "Headcount",
-			priority: "secondary",
-			cell: (e) => /* @__PURE__ */ c("span", {
-				className: "md:block md:text-right",
-				children: e.count
-			})
-		},
-		{
-			key: "budget",
-			header: "Budget",
-			priority: "secondary",
-			cell: (e) => /* @__PURE__ */ l("span", {
-				className: "md:block md:text-right",
-				children: [
-					"$",
-					(e.budget / 1e6).toFixed(1),
-					"M"
-				]
-			})
-		},
-		{
-			key: "distribution",
-			header: "Distribution",
-			priority: "primary",
-			cell: (e) => /* @__PURE__ */ c("div", {
-				className: "h-3 w-full min-w-24 overflow-hidden rounded bg-bg-sunken",
-				children: /* @__PURE__ */ c("div", {
-					className: "h-3 rounded bg-action-primary-bg/70",
-					style: { width: `${Math.round(e.count / j * 100)}%` }
-				})
-			})
-		}
-	], F = t(() => [
-		{
-			stage: "Applications",
-			count: E.reduce((e, t) => e + t.applicants, 0),
-			color: "bg-status-info-text"
-		},
-		{
-			stage: "Screening",
-			count: D.filter((e) => e.status === "screening").length,
-			color: "bg-status-info-text"
-		},
-		{
-			stage: "Interview",
-			count: D.filter((e) => e.status === "interview").length,
-			color: "bg-action-primary-bg"
-		},
-		{
-			stage: "Assessment",
-			count: D.filter((e) => e.status === "assessment").length,
-			color: "bg-action-primary-bg"
-		},
-		{
-			stage: "Offer",
-			count: D.filter((e) => e.status === "offer").length,
-			color: "bg-status-warning-text"
-		},
-		{
-			stage: "Hired",
-			count: D.filter((e) => e.status === "hired").length,
-			color: "bg-status-success-text"
-		}
-	], [D, E]), I = Math.max(1, ...F.map((e) => e.count));
-	return /* @__PURE__ */ l("div", {
+		return n.length > 0 ? n : R;
+	}, [R, V]), J = g(() => {
+		let e = (e) => N.indexOf(e), t = (t) => q.filter((n) => e(n.status) >= t).length;
+		return [
+			{
+				label: "Applied",
+				value: q.length
+			},
+			{
+				label: "Screened",
+				value: t(1)
+			},
+			{
+				label: "Interviewed",
+				value: t(2)
+			},
+			{
+				label: "Offer",
+				value: t(4)
+			},
+			{
+				label: "Hired",
+				value: t(5)
+			}
+		];
+	}, [q]), Y = g(() => p(I).map((e, t) => ({
+		label: P[t],
+		value: e.value
+	})), [I]), X = g(() => c(I), [I]), Z = g(() => {
+		let e = h(B, I);
+		if (!e.hasData) return null;
+		let t = l(e, I), n = Math.min(Math.max(t.avgUtilization, 0), 100);
+		return {
+			utilized: n,
+			available: Math.max(0, 100 - n)
+		};
+	}, [B, I]), Q = Z ? [{
+		label: "Utilized",
+		value: Z.utilized
+	}, {
+		label: "Available",
+		value: Z.available,
+		color: "var(--color-chart-grid)"
+	}] : null, $ = g(() => m(R), [R]);
+	return /* @__PURE__ */ w("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ l("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ l("div", { children: [
-					/* @__PURE__ */ c("h1", {
+			/* @__PURE__ */ w("div", {
+				className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between",
+				children: [/* @__PURE__ */ w("div", { children: [
+					/* @__PURE__ */ C("h1", {
 						className: "text-2xl font-semibold",
-						children: /* @__PURE__ */ c(_, { children: "Workforce Analytics" })
+						children: /* @__PURE__ */ C(A, { children: "Workforce Analytics" })
 					}),
-					/* @__PURE__ */ c("p", {
+					/* @__PURE__ */ C("p", {
 						className: "text-sm text-text-secondary",
 						children: "Comprehensive analytics across all HR domains"
 					}),
-					/* @__PURE__ */ c(v, {
+					/* @__PURE__ */ C(M, {
 						className: "mt-1",
-						children: "Your workforce analytics hub — track headcount, performance, and engagement trends here to spot what's working and where your teams need attention."
+						children: "Your workforce analytics hub — track headcount, hiring conversion, performance, and utilization here to spot what's working and where your teams need attention."
 					})
-				] }), /* @__PURE__ */ l(u, {
-					variant: "outline",
-					className: "flex items-center gap-1 self-start",
-					children: [/* @__PURE__ */ c(i, { className: "h-3.5 w-3.5" }), "Rolling 6 months"]
+				] }), /* @__PURE__ */ w("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [/* @__PURE__ */ C(s, {
+						"aria-label": "Reporting period",
+						tabs: [{
+							id: "6",
+							label: "Last 6 months"
+						}, {
+							id: "12",
+							label: "Last 12 months"
+						}],
+						value: V,
+						onChange: (e) => H(e === "6" ? "6" : "12")
+					}), /* @__PURE__ */ w(T, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => {
+							let e = ["Section,Label,Value"];
+							for (let t of K) e.push(`Headcount by department,${F(t.label)},${t.value}`);
+							for (let t of J) e.push(`Hiring funnel,${F(t.label)},${t.value}`);
+							for (let t of Y) e.push(`Performance distribution,${F(t.label)},${t.value}`);
+							Z && (e.push(`Utilization,Utilized %,${Z.utilized}`), e.push(`Utilization,Available %,${Z.available}`));
+							let t = new Blob([e.join("\n")], { type: "text/csv;charset=utf-8;" }), n = URL.createObjectURL(t), r = document.createElement("a");
+							r.href = n, r.download = "workforce-analytics.csv", r.click(), URL.revokeObjectURL(n);
+						},
+						children: [/* @__PURE__ */ C(b, { className: "mr-1 h-4 w-4" }), "Export"]
+					})]
 				})]
 			}),
-			/* @__PURE__ */ l("div", {
-				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4",
+			/* @__PURE__ */ w("div", {
+				className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
 				children: [
-					/* @__PURE__ */ l(g, {
-						treatment: "glass",
-						glow: !0,
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ l(m, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ c(h, {
-								className: "text-sm font-medium",
-								children: "Total Workforce"
-							}), /* @__PURE__ */ c(s, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ l(f, { children: [/* @__PURE__ */ c("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: w.length
-						}), /* @__PURE__ */ l("div", {
-							className: "flex items-center text-xs text-status-success-text",
-							children: [/* @__PURE__ */ c(o, { className: "mr-1 h-3 w-3" }), "Live headcount data"]
-						})] })]
+					/* @__PURE__ */ C(o, {
+						label: "Total Workforce",
+						value: I.length,
+						delta: W || void 0,
+						deltaLabel: "from last month",
+						icon: /* @__PURE__ */ C(S, { className: "h-4 w-4" }),
+						sparkline: U.map((e) => e.value),
+						sparklineVariant: "area"
 					}),
-					/* @__PURE__ */ l(g, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ l(m, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ c(h, {
-								className: "text-sm font-medium",
-								children: "Active Departments"
-							}), /* @__PURE__ */ c(a, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ l(f, { children: [/* @__PURE__ */ c("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: T.length
-						}), /* @__PURE__ */ c("p", {
-							className: "text-xs text-text-secondary",
-							children: "All departments tracked"
-						})] })]
+					/* @__PURE__ */ C(o, {
+						label: "Active Departments",
+						value: L.length,
+						icon: /* @__PURE__ */ C(x, { className: "h-4 w-4" })
 					}),
-					/* @__PURE__ */ l(g, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ l(m, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ c(h, {
-								className: "text-sm font-medium",
-								children: "Active Projects"
-							}), /* @__PURE__ */ c(n, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ l(f, { children: [/* @__PURE__ */ c("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: O.filter((e) => e.status === "active").length
-						}), /* @__PURE__ */ l("p", {
-							className: "text-xs text-text-secondary",
-							children: [O.filter((e) => e.status === "completed").length, " completed"]
-						})] })]
+					/* @__PURE__ */ C(o, {
+						label: "Active Projects",
+						value: G,
+						icon: /* @__PURE__ */ C(v, { className: "h-4 w-4" })
 					}),
-					/* @__PURE__ */ l(g, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ l(m, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ c(h, {
-								className: "text-sm font-medium",
-								children: "Hiring Pipeline"
-							}), /* @__PURE__ */ c(r, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ l(f, { children: [/* @__PURE__ */ c("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: D.length
-						}), /* @__PURE__ */ c("p", {
-							className: "text-xs text-text-secondary",
-							children: "candidates in pipeline"
-						})] })]
+					/* @__PURE__ */ C(o, {
+						label: "Hiring Pipeline",
+						value: R.length,
+						icon: /* @__PURE__ */ C(y, { className: "h-4 w-4" })
 					})
 				]
 			}),
-			/* @__PURE__ */ l(b, {
-				defaultValue: "overview",
+			/* @__PURE__ */ w("div", {
+				className: "grid gap-4 lg:grid-cols-3",
 				children: [
-					/* @__PURE__ */ l(S, { children: [
-						/* @__PURE__ */ c(C, {
-							value: "overview",
-							children: "Overview"
-						}),
-						/* @__PURE__ */ c(C, {
-							value: "hiring",
-							children: "Hiring Funnel"
-						}),
-						/* @__PURE__ */ c(C, {
-							value: "departments",
-							children: "Departments"
-						})
-					] }),
-					/* @__PURE__ */ c(x, {
-						value: "overview",
-						className: "space-y-4",
-						children: /* @__PURE__ */ l(d, { children: [/* @__PURE__ */ l(m, { children: [/* @__PURE__ */ c(h, { children: "Workforce Growth Trend" }), /* @__PURE__ */ c(p, { children: "Monthly headcount and hiring activity" })] }), /* @__PURE__ */ c(f, {
-							className: "space-y-3",
-							children: k.map((e) => /* @__PURE__ */ l("div", {
-								className: "flex items-center gap-3",
-								children: [
-									/* @__PURE__ */ c("span", {
-										className: "w-10 text-sm text-text-secondary",
-										children: e.month
-									}),
-									/* @__PURE__ */ c("div", {
-										className: "h-5 flex-1 overflow-hidden rounded bg-bg-sunken",
-										children: /* @__PURE__ */ c("div", {
-											className: "h-5 rounded bg-action-primary-bg",
-											style: { width: `${Math.round(e.headcount / M * 100)}%` }
-										})
-									}),
-									/* @__PURE__ */ c("span", {
-										className: "w-10 text-right text-sm font-medium",
-										children: e.headcount
-									}),
-									/* @__PURE__ */ l("div", {
-										className: "flex w-32 justify-end gap-1",
-										children: [/* @__PURE__ */ l(u, {
-											variant: "default",
-											className: "text-[10px]",
-											children: [
-												"+",
-												e.hires,
-												" hired"
-											]
-										}), e.exits > 0 && /* @__PURE__ */ l(u, {
-											variant: "destructive",
-											className: "text-[10px]",
-											children: [
-												"-",
-												e.exits,
-												" exits"
-											]
-										})]
-									})
-								]
-							}, `${e.month}-${e.headcount}`))
-						})] })
-					}),
-					/* @__PURE__ */ c(x, {
-						value: "hiring",
-						className: "space-y-4",
-						children: /* @__PURE__ */ l(d, { children: [/* @__PURE__ */ l(m, { children: [/* @__PURE__ */ c(h, { children: "Hiring Funnel" }), /* @__PURE__ */ c(p, { children: "Candidate pipeline stages" })] }), /* @__PURE__ */ c(f, {
-							className: "space-y-4",
-							children: F.map((e) => /* @__PURE__ */ l("div", {
-								className: "flex items-center gap-3",
-								children: [
-									/* @__PURE__ */ c("span", {
-										className: "w-28 text-sm font-medium",
-										children: e.stage
-									}),
-									/* @__PURE__ */ c("div", {
-										className: "h-6 flex-1 overflow-hidden rounded bg-bg-sunken",
-										children: /* @__PURE__ */ c("div", {
-											className: `h-6 rounded ${e.color}`,
-											style: { width: `${Math.max(Math.round(e.count / I * 100), 5)}%` }
-										})
-									}),
-									/* @__PURE__ */ c("span", {
-										className: "w-10 text-right text-sm font-bold",
-										children: e.count
-									})
-								]
-							}, e.stage))
-						})] })
-					}),
-					/* @__PURE__ */ c(x, {
-						value: "departments",
-						className: "space-y-4",
-						children: /* @__PURE__ */ l(d, { children: [/* @__PURE__ */ l(m, { children: [/* @__PURE__ */ c(h, { children: "Department Breakdown" }), /* @__PURE__ */ c(p, { children: "Headcount and budget by department" })] }), /* @__PURE__ */ c(f, { children: /* @__PURE__ */ c(y, {
-							columns: P,
-							data: N,
-							rowKey: (e) => e.name
-						}) })] })
-					})
+					/* @__PURE__ */ w(E, { children: [/* @__PURE__ */ C(O, { children: /* @__PURE__ */ C(k, {
+						className: "text-base",
+						children: "Headcount by department"
+					}) }), /* @__PURE__ */ C(D, { children: K.length > 0 ? /* @__PURE__ */ C(r, {
+						series: K,
+						colorful: !0,
+						height: 230,
+						title: "Headcount by department"
+					}) : /* @__PURE__ */ C(j, {
+						illustration: "empty-data",
+						title: "No departments yet",
+						description: "Department headcount appears once departments exist."
+					}) })] }),
+					/* @__PURE__ */ w(E, { children: [/* @__PURE__ */ C(O, { children: /* @__PURE__ */ C(k, {
+						className: "text-base",
+						children: "Hiring funnel conversion"
+					}) }), /* @__PURE__ */ C(D, { children: q.length > 0 ? /* @__PURE__ */ C(i, {
+						stages: J,
+						valueFormatter: (e) => `${e}`,
+						showConversion: !0
+					}) : /* @__PURE__ */ C(j, {
+						illustration: "empty-data",
+						title: "No candidates yet",
+						description: "The hiring funnel and stage-to-stage conversion appear once candidates apply."
+					}) })] }),
+					/* @__PURE__ */ w(E, { children: [/* @__PURE__ */ C(O, { children: /* @__PURE__ */ C(k, {
+						className: "text-base",
+						children: "Performance distribution"
+					}) }), /* @__PURE__ */ C(D, { children: I.length > 0 ? /* @__PURE__ */ C(r, {
+						series: Y,
+						height: 230,
+						title: "Performance score distribution"
+					}) : /* @__PURE__ */ C(j, {
+						illustration: "empty-data",
+						title: "No employees yet",
+						description: "Performance bands appear once employees have scores."
+					}) })] }),
+					/* @__PURE__ */ w(E, { children: [/* @__PURE__ */ C(O, { children: /* @__PURE__ */ C(k, {
+						className: "text-base",
+						children: "Attrition trend"
+					}) }), /* @__PURE__ */ C(D, { children: X.length > 0 ? /* @__PURE__ */ C(n, {
+						series: X,
+						height: 230,
+						valueFormatter: (e) => `${e}`,
+						title: "Employee exits by month"
+					}) : /* @__PURE__ */ C(j, {
+						illustration: "empty-data",
+						title: "No exits recorded",
+						description: "Monthly attrition appears once employees have termination dates. Nothing is shown while no exits are on record — estimated exits are never charted."
+					}) })] }),
+					/* @__PURE__ */ w(E, { children: [/* @__PURE__ */ C(O, { children: /* @__PURE__ */ C(k, {
+						className: "text-base",
+						children: "Utilization"
+					}) }), /* @__PURE__ */ C(D, { children: Q ? /* @__PURE__ */ C(a, {
+						segments: Q,
+						centerLabel: `${Z?.utilized ?? 0}%`,
+						centerCaption: "Utilized",
+						valueFormatter: (e) => `${e}%`
+					}) : /* @__PURE__ */ C(j, {
+						illustration: "empty-data",
+						title: "No logged time yet",
+						description: "Utilization is computed from real logged hours against a 40h weekly capacity."
+					}) })] }),
+					/* @__PURE__ */ w(E, { children: [/* @__PURE__ */ C(O, { children: /* @__PURE__ */ C(k, {
+						className: "text-base",
+						children: "Time-to-hire"
+					}) }), /* @__PURE__ */ C(D, { children: $ ? /* @__PURE__ */ C(o, {
+						label: "Average time-to-hire",
+						value: `${$.averageDays} days`,
+						deltaLabel: `from ${$.sampleSize} hires`
+					}) : /* @__PURE__ */ C(j, {
+						illustration: "empty-data",
+						title: "No hires recorded yet",
+						description: "Average time-to-hire appears once candidates carry a hired date. The elapsed applied-to-hired time is measured, never estimated."
+					}) })] })
 				]
-			})
+			}),
+			U.length > 1 && /* @__PURE__ */ w(E, { children: [/* @__PURE__ */ C(O, { children: /* @__PURE__ */ C(k, {
+				className: "text-base",
+				children: "Headcount growth"
+			}) }), /* @__PURE__ */ C(D, { children: /* @__PURE__ */ C(t, {
+				series: U,
+				height: 220,
+				title: "Cumulative headcount by month"
+			}) })] })
 		]
 	});
 }
 //#endregion
-export { w as AnalyticsAnalyticsPagePage };
+export { I as AnalyticsAnalyticsPagePage };
 
 //# sourceMappingURL=AnalyticsAnalyticsPagePage.js.map