@burdenoff/microfe-crewfoundry 2026.704.5 → 2026.704.7

package/dist/crewfoundry/pages/HrEmployeeProfilePagePage.js

@@ -0,0 +1,385 @@
+import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
+import { formatEnumLabel as t } from "../utils/formatEnumLabel.js";
+import { ProgressRing as n } from "../components/viz/ProgressRing.js";
+import { Timeline as r } from "../components/viz/Timeline.js";
+import { AvatarStack as i } from "../components/viz/AvatarStack.js";
+import { SegmentedTabs as a } from "../components/viz/SegmentedTabs.js";
+import "../components/viz/index.js";
+import { useState as o } from "react";
+import { ArrowLeft as s, BadgeCheck as c, CalendarDays as l, Mail as u, MapPin as d, Phone as f } from "lucide-react";
+import { useNavigate as p, useSearchParams as m } from "react-router-dom";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Badge as _, Button as v, Card as y, CardContent as b, CardHeader as x, CardTitle as S, GlassCard as C, GradientText as w, IllustratedEmptyState as T, PagePurpose as E, Spinner as D } from "@burdenoff/fe-libs/ui";
+//#region src/crewfoundry/pages/HrEmployeeProfilePagePage.tsx
+var O = [
+	{
+		id: "overview",
+		label: "Overview"
+	},
+	{
+		id: "skills",
+		label: "Skills"
+	},
+	{
+		id: "performance",
+		label: "Performance"
+	},
+	{
+		id: "activity",
+		label: "Activity"
+	}
+], k = [
+	{
+		min: 0,
+		max: 6e4
+	},
+	{
+		min: 6e4,
+		max: 9e4
+	},
+	{
+		min: 9e4,
+		max: 12e4
+	},
+	{
+		min: 12e4,
+		max: 15e4
+	},
+	{
+		min: 15e4,
+		max: 2e5
+	},
+	{
+		min: 2e5,
+		max: Infinity
+	}
+];
+function A(e) {
+	let t = k.findIndex((t) => e >= t.min && e < t.max), n = t === -1 ? k.length - 1 : t, r = k[n], i = `$${Math.round(r.min / 1e3)}k`, a = r.max === Infinity ? "+" : `–$${Math.round(r.max / 1e3)}k`;
+	return `Band ${n + 1} · ${i}${a}`;
+}
+function j(e) {
+	let t = new Date(e);
+	if (Number.isNaN(t.getTime())) return "—";
+	let n = /* @__PURE__ */ new Date(), r = (n.getFullYear() - t.getFullYear()) * 12 + (n.getMonth() - t.getMonth());
+	n.getDate() < t.getDate() && --r, r < 0 && (r = 0);
+	let i = Math.floor(r / 12), a = r % 12, o = [];
+	return i > 0 && o.push(`${i} year${i === 1 ? "" : "s"}`), o.push(`${a} month${a === 1 ? "" : "s"}`), o.join(", ");
+}
+function M(e) {
+	return e >= 4.5 ? "Excellent" : e >= 3.5 ? "Strong" : e >= 2.5 ? "Meets expectations" : "Needs improvement";
+}
+function N(e) {
+	return e === "active" ? "default" : e === "on_leave" ? "secondary" : "destructive";
+}
+function P({ icon: e, children: t }) {
+	return /* @__PURE__ */ g("span", {
+		className: "inline-flex items-center gap-1.5 rounded-full border border-border-subtle bg-bg-surface px-3 py-1 text-xs text-text-secondary",
+		children: [/* @__PURE__ */ h("span", {
+			className: "text-text-muted",
+			children: e
+		}), /* @__PURE__ */ h("span", {
+			className: "truncate",
+			children: t
+		})]
+	});
+}
+function F({ label: e, children: t }) {
+	return /* @__PURE__ */ g("div", {
+		className: "flex items-start justify-between gap-4 py-2 text-sm",
+		children: [/* @__PURE__ */ h("span", {
+			className: "text-text-secondary",
+			children: e
+		}), /* @__PURE__ */ h("span", {
+			className: "text-right font-medium text-text-primary",
+			children: t
+		})]
+	});
+}
+function I(e, n, r, i, a) {
+	let o = [], s = (e) => {
+		let t = new Date(e).getTime();
+		return Number.isNaN(t) ? 0 : t;
+	};
+	for (let n of a.filter((t) => t.managerId === e.id)) o.push({
+		ts: s(n.startDate),
+		item: {
+			id: `project-${n.id}`,
+			title: `Leads project “${n.name}”`,
+			meta: `${t(n.status)} · ${n.progress}% complete`,
+			time: n.startDate,
+			tone: "info"
+		}
+	});
+	for (let n of r.filter((t) => t.employeeId === e.id)) {
+		let e = n.status === "approved" ? "success" : n.status === "rejected" ? "danger" : n.status === "pending" ? "warning" : "muted";
+		o.push({
+			ts: s(n.startDate),
+			item: {
+				id: `leave-${n.id}`,
+				title: `${t(n.type)} leave — ${t(n.status)}`,
+				meta: `${n.startDate} → ${n.endDate} · ${n.days} day${n.days === 1 ? "" : "s"}`,
+				time: n.startDate,
+				tone: e
+			}
+		});
+	}
+	for (let n of i.filter((t) => t.employeeId === e.id)) o.push({
+		ts: s(n.payDate),
+		item: {
+			id: `payroll-${n.id}`,
+			title: `Payroll · ${n.period}`,
+			meta: `Net $${n.netPay.toLocaleString()} (${t(n.status)})`,
+			time: n.payDate,
+			tone: n.status === "paid" ? "success" : "muted"
+		}
+	});
+	for (let r of n.filter((t) => t.employeeId === e.id)) o.push({
+		ts: s(r.date),
+		item: {
+			id: `time-${r.id}`,
+			title: `Logged ${r.totalHours}h on ${r.project || "work"}`,
+			meta: t(r.status),
+			time: r.date,
+			tone: "accent"
+		}
+	});
+	return o.sort((e, t) => t.ts - e.ts).slice(0, 14).map((e) => e.item);
+}
+function L() {
+	let k = p(), [L] = m(), R = e((e) => e.employees), z = e((e) => e.timeEntries), B = e((e) => e.leaveRequests), V = e((e) => e.payrollRecords), H = e((e) => e.projects), U = e((e) => e.initialized), [W, G] = o("overview"), K = L.get("id"), q = R.find((e) => e.id === K);
+	if (!U && !q) return /* @__PURE__ */ h("div", {
+		className: "flex min-h-[60vh] items-center justify-center p-6",
+		children: /* @__PURE__ */ h(D, { size: "lg" })
+	});
+	if (!q) return /* @__PURE__ */ g("div", {
+		className: "space-y-4 p-6",
+		children: [/* @__PURE__ */ g(v, {
+			variant: "ghost",
+			size: "sm",
+			onClick: () => k("../hr/employees-page"),
+			children: [/* @__PURE__ */ h(s, { className: "mr-1 h-4 w-4" }), "Back to directory"]
+		}), /* @__PURE__ */ h(T, {
+			illustration: "empty-search",
+			title: "Employee not found",
+			description: "This profile is no longer available or the link is out of date."
+		})]
+	});
+	let J = q.managerId ? R.find((e) => e.id === q.managerId) : void 0, Y = J ? `${J.firstName} ${J.lastName}` : q.managerId ? "Assigned" : "No manager", X = `${q.firstName} ${q.lastName}`, Z = I(q, z, B, V, H);
+	return /* @__PURE__ */ g("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ g(v, {
+				variant: "ghost",
+				size: "sm",
+				onClick: () => k("../hr/employees-page"),
+				children: [/* @__PURE__ */ h(s, { className: "mr-1 h-4 w-4" }), "Back to directory"]
+			}),
+			/* @__PURE__ */ h(C, {
+				treatment: "glass",
+				glow: !0,
+				className: "border-border-seam",
+				children: /* @__PURE__ */ h(b, {
+					className: "p-6",
+					children: /* @__PURE__ */ g("div", {
+						className: "flex flex-col gap-5 sm:flex-row sm:items-start",
+						children: [/* @__PURE__ */ h(i, {
+							people: [{
+								name: X,
+								avatarUrl: q.avatar
+							}],
+							max: 1,
+							size: 72
+						}), /* @__PURE__ */ g("div", {
+							className: "flex-1 space-y-3",
+							children: [
+								/* @__PURE__ */ g("div", {
+									className: "flex flex-wrap items-center gap-3",
+									children: [/* @__PURE__ */ h("h1", {
+										className: "text-2xl font-semibold",
+										children: /* @__PURE__ */ h(w, { children: X })
+									}), /* @__PURE__ */ h(_, {
+										variant: N(q.status),
+										children: t(q.status)
+									})]
+								}),
+								/* @__PURE__ */ g("p", {
+									className: "text-sm text-text-secondary",
+									children: [
+										q.position,
+										" · ",
+										q.department
+									]
+								}),
+								/* @__PURE__ */ g("div", {
+									className: "flex flex-wrap gap-2",
+									children: [
+										/* @__PURE__ */ h(P, {
+											icon: /* @__PURE__ */ h(u, { className: "h-3.5 w-3.5" }),
+											children: q.email
+										}),
+										/* @__PURE__ */ h(P, {
+											icon: /* @__PURE__ */ h(f, { className: "h-3.5 w-3.5" }),
+											children: q.phone
+										}),
+										/* @__PURE__ */ h(P, {
+											icon: /* @__PURE__ */ h(d, { className: "h-3.5 w-3.5" }),
+											children: q.location
+										}),
+										/* @__PURE__ */ g(P, {
+											icon: /* @__PURE__ */ h(l, { className: "h-3.5 w-3.5" }),
+											children: ["Joined ", q.startDate]
+										})
+									]
+								})
+							]
+						})]
+					})
+				})
+			}),
+			/* @__PURE__ */ h(E, { children: "A single view of one team member — their role, tenure, performance, and recent activity — so managers and partners have the full context in one place." }),
+			/* @__PURE__ */ h(a, {
+				tabs: O,
+				value: W,
+				onChange: (e) => G(e),
+				"aria-label": "Employee profile sections"
+			}),
+			W === "overview" ? /* @__PURE__ */ g("div", {
+				className: "grid gap-4 lg:grid-cols-2",
+				children: [/* @__PURE__ */ g(y, { children: [/* @__PURE__ */ h(x, { children: /* @__PURE__ */ h(S, {
+					className: "text-base",
+					children: "Details"
+				}) }), /* @__PURE__ */ g(b, {
+					className: "divide-y divide-border-subtle pt-0",
+					children: [
+						/* @__PURE__ */ h(F, {
+							label: "Manager",
+							children: /* @__PURE__ */ g("span", {
+								className: "inline-flex items-center gap-2",
+								children: [J ? /* @__PURE__ */ h(i, {
+									people: [{
+										name: Y,
+										avatarUrl: J.avatar
+									}],
+									max: 1,
+									size: 24
+								}) : null, Y]
+							})
+						}),
+						/* @__PURE__ */ h(F, {
+							label: "Employment type",
+							children: t(q.type)
+						}),
+						/* @__PURE__ */ h(F, {
+							label: "Salary band",
+							children: A(q.salary)
+						}),
+						/* @__PURE__ */ h(F, {
+							label: "Tenure",
+							children: j(q.startDate)
+						}),
+						/* @__PURE__ */ h(F, {
+							label: "Employee ID",
+							children: /* @__PURE__ */ h("span", {
+								className: "break-all font-mono text-xs",
+								children: q.id
+							})
+						})
+					]
+				})] }), /* @__PURE__ */ g(y, { children: [/* @__PURE__ */ h(x, { children: /* @__PURE__ */ h(S, {
+					className: "text-base",
+					children: "Performance"
+				}) }), /* @__PURE__ */ g(b, {
+					className: "flex items-center gap-6 pt-0",
+					children: [/* @__PURE__ */ h(n, {
+						value: q.performanceScore,
+						max: 5,
+						label: q.performanceScore.toFixed(1),
+						caption: "/ 5"
+					}), /* @__PURE__ */ g("div", {
+						className: "space-y-1",
+						children: [/* @__PURE__ */ h("p", {
+							className: "text-lg font-semibold text-text-primary",
+							children: M(q.performanceScore)
+						}), /* @__PURE__ */ g("p", {
+							className: "text-sm text-text-secondary",
+							children: [
+								"Latest review score of ",
+								q.performanceScore.toFixed(1),
+								" out of 5."
+							]
+						})]
+					})]
+				})] })]
+			}) : null,
+			W === "skills" ? /* @__PURE__ */ g(y, { children: [/* @__PURE__ */ h(x, { children: /* @__PURE__ */ h(S, {
+				className: "text-base",
+				children: "Skills"
+			}) }), /* @__PURE__ */ h(b, {
+				className: "pt-0",
+				children: q.skills.length > 0 ? /* @__PURE__ */ h("div", {
+					className: "flex flex-wrap gap-2",
+					children: q.skills.map((e) => /* @__PURE__ */ h(_, {
+						variant: "secondary",
+						className: "text-xs",
+						children: e
+					}, e))
+				}) : /* @__PURE__ */ h(T, {
+					illustration: "empty-data",
+					title: "No skills recorded",
+					description: "This team member has no skills captured yet. Add skills from the employee directory to surface them here."
+				})
+			})] }) : null,
+			W === "performance" ? /* @__PURE__ */ g(y, { children: [/* @__PURE__ */ h(x, { children: /* @__PURE__ */ h(S, {
+				className: "text-base",
+				children: "Performance"
+			}) }), /* @__PURE__ */ g(b, {
+				className: "flex flex-col items-center gap-6 pt-0 sm:flex-row sm:items-center",
+				children: [/* @__PURE__ */ h(n, {
+					value: q.performanceScore,
+					max: 5,
+					size: 160,
+					label: q.performanceScore.toFixed(1),
+					caption: "/ 5"
+				}), /* @__PURE__ */ g("div", {
+					className: "flex-1 space-y-2",
+					children: [
+						/* @__PURE__ */ g(_, {
+							variant: "secondary",
+							className: "gap-1",
+							children: [/* @__PURE__ */ h(c, { className: "h-3.5 w-3.5" }), M(q.performanceScore)]
+						}),
+						/* @__PURE__ */ g("p", {
+							className: "text-sm text-text-secondary",
+							children: [
+								X,
+								" holds a review score of ",
+								q.performanceScore.toFixed(1),
+								" out of 5."
+							]
+						}),
+						/* @__PURE__ */ h("p", {
+							className: "text-xs text-text-muted",
+							children: "Goal, peer, and manager sub-scores will appear here once captured on the review record."
+						})
+					]
+				})]
+			})] }) : null,
+			W === "activity" ? /* @__PURE__ */ g(y, { children: [/* @__PURE__ */ h(x, { children: /* @__PURE__ */ h(S, {
+				className: "text-base",
+				children: "Recent activity"
+			}) }), /* @__PURE__ */ h(b, {
+				className: "pt-0",
+				children: Z.length > 0 ? /* @__PURE__ */ h(r, { items: Z }) : /* @__PURE__ */ h(T, {
+					illustration: "empty-data",
+					title: "No activity yet",
+					description: "Time logs, leave, payroll, and project assignments for this employee will show up here."
+				})
+			})] }) : null
+		]
+	});
+}
+//#endregion
+export { L as HrEmployeeProfilePagePage };
+
+//# sourceMappingURL=HrEmployeeProfilePagePage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HrEmployeeProfilePagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/HrEmployeeProfilePagePage.tsx"],"sourcesContent":["import { useState, type ReactNode } from 'react';\nimport {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  GlassCard,\n  GradientText,\n  IllustratedEmptyState,\n  PagePurpose,\n  Spinner,\n} from '@burdenoff/fe-libs/ui';\nimport { ArrowLeft, BadgeCheck, CalendarDays, Mail, MapPin, Phone } from 'lucide-react';\nimport { useNavigate, useSearchParams } from 'react-router-dom';\nimport { useCrewFoundryStore, type Employee } from '../store/crewfoundryStore';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\nimport {\n  AvatarStack,\n  ProgressRing,\n  SegmentedTabs,\n  Timeline,\n  type SegmentedTab,\n  type TimelineItem,\n  type TimelineTone,\n} from '../components/viz';\n\ntype ProfileTab = 'overview' | 'skills' | 'performance' | 'activity';\n\nconst PROFILE_TABS: SegmentedTab[] = [\n  { id: 'overview', label: 'Overview' },\n  { id: 'skills', label: 'Skills' },\n  { id: 'performance', label: 'Performance' },\n  { id: 'activity', label: 'Activity' },\n];\n\nconst SALARY_BANDS: { min: number; max: number }[] = [\n  { min: 0, max: 60_000 },\n  { min: 60_000, max: 90_000 },\n  { min: 90_000, max: 120_000 },\n  { min: 120_000, max: 150_000 },\n  { min: 150_000, max: 200_000 },\n  { min: 200_000, max: Number.POSITIVE_INFINITY },\n];\n\nfunction salaryBand(salary: number): string {\n  const index = SALARY_BANDS.findIndex((band) => salary >= band.min && salary < band.max);\n  const safeIndex = index === -1 ? SALARY_BANDS.length - 1 : index;\n  const band = SALARY_BANDS[safeIndex];\n  const low = `$${Math.round(band.min / 1000)}k`;\n  const high = band.max === Number.POSITIVE_INFINITY ? '+' : `–$${Math.round(band.max / 1000)}k`;\n  return `Band ${safeIndex + 1} · ${low}${high}`;\n}\n\nfunction tenure(startDate: string): string {\n  const start = new Date(startDate);\n  if (Number.isNaN(start.getTime())) {\n    return '—';\n  }\n  const now = new Date();\n  let months = (now.getFullYear() - start.getFullYear()) * 12 + (now.getMonth() - start.getMonth());\n  if (now.getDate() < start.getDate()) {\n    months -= 1;\n  }\n  if (months < 0) {\n    months = 0;\n  }\n  const years = Math.floor(months / 12);\n  const remMonths = months % 12;\n  const parts: string[] = [];\n  if (years > 0) {\n    parts.push(`${years} year${years === 1 ? '' : 's'}`);\n  }\n  parts.push(`${remMonths} month${remMonths === 1 ? '' : 's'}`);\n  return parts.join(', ');\n}\n\nfunction performanceLabel(score: number): string {\n  if (score >= 4.5) return 'Excellent';\n  if (score >= 3.5) return 'Strong';\n  if (score >= 2.5) return 'Meets expectations';\n  return 'Needs improvement';\n}\n\nfunction statusBadgeVariant(status: Employee['status']): 'default' | 'secondary' | 'destructive' {\n  if (status === 'active') return 'default';\n  if (status === 'on_leave') return 'secondary';\n  return 'destructive';\n}\n\nfunction ContactChip({ icon, children }: { icon: ReactNode; children: ReactNode }) {\n  return (\n    <span className=\"inline-flex items-center gap-1.5 rounded-full border border-border-subtle bg-bg-surface px-3 py-1 text-xs text-text-secondary\">\n      <span className=\"text-text-muted\">{icon}</span>\n      <span className=\"truncate\">{children}</span>\n    </span>\n  );\n}\n\nfunction DetailRow({ label, children }: { label: string; children: ReactNode }) {\n  return (\n    <div className=\"flex items-start justify-between gap-4 py-2 text-sm\">\n      <span className=\"text-text-secondary\">{label}</span>\n      <span className=\"text-right font-medium text-text-primary\">{children}</span>\n    </div>\n  );\n}\n\ninterface ActivitySignal {\n  ts: number;\n  item: TimelineItem;\n}\n\nfunction buildActivity(\n  employee: Employee,\n  timeEntries: ReturnType<typeof useCrewFoundryStore.getState>['timeEntries'],\n  leaveRequests: ReturnType<typeof useCrewFoundryStore.getState>['leaveRequests'],\n  payrollRecords: ReturnType<typeof useCrewFoundryStore.getState>['payrollRecords'],\n  projects: ReturnType<typeof useCrewFoundryStore.getState>['projects']\n): TimelineItem[] {\n  const signals: ActivitySignal[] = [];\n  const toTs = (value: string): number => {\n    const parsed = new Date(value).getTime();\n    return Number.isNaN(parsed) ? 0 : parsed;\n  };\n\n  for (const project of projects.filter((p) => p.managerId === employee.id)) {\n    signals.push({\n      ts: toTs(project.startDate),\n      item: {\n        id: `project-${project.id}`,\n        title: `Leads project “${project.name}”`,\n        meta: `${formatEnumLabel(project.status)} · ${project.progress}% complete`,\n        time: project.startDate,\n        tone: 'info',\n      },\n    });\n  }\n\n  for (const leave of leaveRequests.filter((l) => l.employeeId === employee.id)) {\n    const tone: TimelineTone =\n      leave.status === 'approved'\n        ? 'success'\n        : leave.status === 'rejected'\n          ? 'danger'\n          : leave.status === 'pending'\n            ? 'warning'\n            : 'muted';\n    signals.push({\n      ts: toTs(leave.startDate),\n      item: {\n        id: `leave-${leave.id}`,\n        title: `${formatEnumLabel(leave.type)} leave — ${formatEnumLabel(leave.status)}`,\n        meta: `${leave.startDate} → ${leave.endDate} · ${leave.days} day${leave.days === 1 ? '' : 's'}`,\n        time: leave.startDate,\n        tone,\n      },\n    });\n  }\n\n  for (const record of payrollRecords.filter((r) => r.employeeId === employee.id)) {\n    signals.push({\n      ts: toTs(record.payDate),\n      item: {\n        id: `payroll-${record.id}`,\n        title: `Payroll · ${record.period}`,\n        meta: `Net $${record.netPay.toLocaleString()} (${formatEnumLabel(record.status)})`,\n        time: record.payDate,\n        tone: record.status === 'paid' ? 'success' : 'muted',\n      },\n    });\n  }\n\n  for (const entry of timeEntries.filter((t) => t.employeeId === employee.id)) {\n    signals.push({\n      ts: toTs(entry.date),\n      item: {\n        id: `time-${entry.id}`,\n        title: `Logged ${entry.totalHours}h on ${entry.project || 'work'}`,\n        meta: formatEnumLabel(entry.status),\n        time: entry.date,\n        tone: 'accent',\n      },\n    });\n  }\n\n  return signals\n    .sort((a, b) => b.ts - a.ts)\n    .slice(0, 14)\n    .map((signal) => signal.item);\n}\n\nexport function HrEmployeeProfilePagePage() {\n  const navigate = useNavigate();\n  const [searchParams] = useSearchParams();\n  const employees = useCrewFoundryStore((state) => state.employees);\n  const timeEntries = useCrewFoundryStore((state) => state.timeEntries);\n  const leaveRequests = useCrewFoundryStore((state) => state.leaveRequests);\n  const payrollRecords = useCrewFoundryStore((state) => state.payrollRecords);\n  const projects = useCrewFoundryStore((state) => state.projects);\n  const initialized = useCrewFoundryStore((state) => state.initialized);\n  const [tab, setTab] = useState<ProfileTab>('overview');\n\n  const id = searchParams.get('id');\n  const employee = employees.find((candidate) => candidate.id === id);\n\n  if (!initialized && !employee) {\n    return (\n      <div className=\"flex min-h-[60vh] items-center justify-center p-6\">\n        <Spinner size=\"lg\" />\n      </div>\n    );\n  }\n\n  if (!employee) {\n    return (\n      <div className=\"space-y-4 p-6\">\n        <Button variant=\"ghost\" size=\"sm\" onClick={() => navigate('../hr/employees-page')}>\n          <ArrowLeft className=\"mr-1 h-4 w-4\" />\n          Back to directory\n        </Button>\n        <IllustratedEmptyState\n          illustration=\"empty-search\"\n          title=\"Employee not found\"\n          description=\"This profile is no longer available or the link is out of date.\"\n        />\n      </div>\n    );\n  }\n\n  const manager = employee.managerId\n    ? employees.find((candidate) => candidate.id === employee.managerId)\n    : undefined;\n  const managerName = manager\n    ? `${manager.firstName} ${manager.lastName}`\n    : employee.managerId\n      ? 'Assigned'\n      : 'No manager';\n  const fullName = `${employee.firstName} ${employee.lastName}`;\n  const activity = buildActivity(employee, timeEntries, leaveRequests, payrollRecords, projects);\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <Button variant=\"ghost\" size=\"sm\" onClick={() => navigate('../hr/employees-page')}>\n        <ArrowLeft className=\"mr-1 h-4 w-4\" />\n        Back to directory\n      </Button>\n\n      {/* Profile header */}\n      <GlassCard treatment=\"glass\" glow className=\"border-border-seam\">\n        <CardContent className=\"p-6\">\n          <div className=\"flex flex-col gap-5 sm:flex-row sm:items-start\">\n            <AvatarStack\n              people={[{ name: fullName, avatarUrl: employee.avatar }]}\n              max={1}\n              size={72}\n            />\n            <div className=\"flex-1 space-y-3\">\n              <div className=\"flex flex-wrap items-center gap-3\">\n                <h1 className=\"text-2xl font-semibold\">\n                  <GradientText>{fullName}</GradientText>\n                </h1>\n                <Badge variant={statusBadgeVariant(employee.status)}>\n                  {formatEnumLabel(employee.status)}\n                </Badge>\n              </div>\n              <p className=\"text-sm text-text-secondary\">\n                {employee.position} · {employee.department}\n              </p>\n              <div className=\"flex flex-wrap gap-2\">\n                <ContactChip icon={<Mail className=\"h-3.5 w-3.5\" />}>{employee.email}</ContactChip>\n                <ContactChip icon={<Phone className=\"h-3.5 w-3.5\" />}>{employee.phone}</ContactChip>\n                <ContactChip icon={<MapPin className=\"h-3.5 w-3.5\" />}>\n                  {employee.location}\n                </ContactChip>\n                <ContactChip icon={<CalendarDays className=\"h-3.5 w-3.5\" />}>\n                  Joined {employee.startDate}\n                </ContactChip>\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </GlassCard>\n\n      <PagePurpose>\n        A single view of one team member — their role, tenure, performance, and recent activity — so\n        managers and partners have the full context in one place.\n      </PagePurpose>\n\n      <SegmentedTabs\n        tabs={PROFILE_TABS}\n        value={tab}\n        onChange={(next) => setTab(next as ProfileTab)}\n        aria-label=\"Employee profile sections\"\n      />\n\n      {tab === 'overview' ? (\n        <div className=\"grid gap-4 lg:grid-cols-2\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-base\">Details</CardTitle>\n            </CardHeader>\n            <CardContent className=\"divide-y divide-border-subtle pt-0\">\n              <DetailRow label=\"Manager\">\n                <span className=\"inline-flex items-center gap-2\">\n                  {manager ? (\n                    <AvatarStack\n                      people={[{ name: managerName, avatarUrl: manager.avatar }]}\n                      max={1}\n                      size={24}\n                    />\n                  ) : null}\n                  {managerName}\n                </span>\n              </DetailRow>\n              <DetailRow label=\"Employment type\">{formatEnumLabel(employee.type)}</DetailRow>\n              <DetailRow label=\"Salary band\">{salaryBand(employee.salary)}</DetailRow>\n              <DetailRow label=\"Tenure\">{tenure(employee.startDate)}</DetailRow>\n              <DetailRow label=\"Employee ID\">\n                <span className=\"break-all font-mono text-xs\">{employee.id}</span>\n              </DetailRow>\n            </CardContent>\n          </Card>\n\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-base\">Performance</CardTitle>\n            </CardHeader>\n            <CardContent className=\"flex items-center gap-6 pt-0\">\n              <ProgressRing\n                value={employee.performanceScore}\n                max={5}\n                label={employee.performanceScore.toFixed(1)}\n                caption=\"/ 5\"\n              />\n              <div className=\"space-y-1\">\n                <p className=\"text-lg font-semibold text-text-primary\">\n                  {performanceLabel(employee.performanceScore)}\n                </p>\n                <p className=\"text-sm text-text-secondary\">\n                  Latest review score of {employee.performanceScore.toFixed(1)} out of 5.\n                </p>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      ) : null}\n\n      {tab === 'skills' ? (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-base\">Skills</CardTitle>\n          </CardHeader>\n          <CardContent className=\"pt-0\">\n            {employee.skills.length > 0 ? (\n              // Real skill tags from the employee record. Rendered as chips (not\n              // proficiency bars) because the backend stores tags, not levels —\n              // inventing a proficiency % would fabricate data.\n              <div className=\"flex flex-wrap gap-2\">\n                {employee.skills.map((skill) => (\n                  <Badge key={skill} variant=\"secondary\" className=\"text-xs\">\n                    {skill}\n                  </Badge>\n                ))}\n              </div>\n            ) : (\n              <IllustratedEmptyState\n                illustration=\"empty-data\"\n                title=\"No skills recorded\"\n                description=\"This team member has no skills captured yet. Add skills from the employee directory to surface them here.\"\n              />\n            )}\n          </CardContent>\n        </Card>\n      ) : null}\n\n      {tab === 'performance' ? (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-base\">Performance</CardTitle>\n          </CardHeader>\n          <CardContent className=\"flex flex-col items-center gap-6 pt-0 sm:flex-row sm:items-center\">\n            <ProgressRing\n              value={employee.performanceScore}\n              max={5}\n              size={160}\n              label={employee.performanceScore.toFixed(1)}\n              caption=\"/ 5\"\n            />\n            <div className=\"flex-1 space-y-2\">\n              <Badge variant=\"secondary\" className=\"gap-1\">\n                <BadgeCheck className=\"h-3.5 w-3.5\" />\n                {performanceLabel(employee.performanceScore)}\n              </Badge>\n              <p className=\"text-sm text-text-secondary\">\n                {fullName} holds a review score of {employee.performanceScore.toFixed(1)} out of 5.\n              </p>\n              {/* needs backend fields: goals-met %, peer feedback, manager feedback — only a single\n                  performanceScore is modelled today, so sub-metrics are intentionally omitted rather\n                  than invented. */}\n              <p className=\"text-xs text-text-muted\">\n                Goal, peer, and manager sub-scores will appear here once captured on the review\n                record.\n              </p>\n            </div>\n          </CardContent>\n        </Card>\n      ) : null}\n\n      {tab === 'activity' ? (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-base\">Recent activity</CardTitle>\n          </CardHeader>\n          <CardContent className=\"pt-0\">\n            {activity.length > 0 ? (\n              <Timeline items={activity} />\n            ) : (\n              <IllustratedEmptyState\n                illustration=\"empty-data\"\n                title=\"No activity yet\"\n                description=\"Time logs, leave, payroll, and project assignments for this employee will show up here.\"\n              />\n            )}\n          </CardContent>\n        </Card>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}