@burdenoff/microfe-crewfoundry 2026.704.5 → 2026.704.7

package/dist/crewfoundry/pages/ProjectsResourcingPagePage.js

@@ -0,0 +1,187 @@
+import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
+import { StatCard as t } from "../components/viz/StatCard.js";
+import { Heatmap as n } from "../components/viz/Heatmap.js";
+import { AllocationBar as r } from "../components/viz/AllocationBar.js";
+import "../components/viz/index.js";
+import { allocationByPerson as i, benchAndOverallocated as a, skillMatch as o, utilizationByPersonWeek as s } from "../lib/analytics.js";
+import { useMemo as c } from "react";
+import { AlertTriangle as l, ArrowLeft as u, TrendingUp as d, Users as f } from "lucide-react";
+import { useNavigate as p } from "react-router-dom";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Badge as _, Button as v, Card as y, CardContent as b, CardDescription as x, CardHeader as S, CardTitle as C, GradientText as w, IllustratedEmptyState as T, PagePurpose as E, Spinner as D } from "@burdenoff/fe-libs/ui";
+//#region src/crewfoundry/pages/ProjectsResourcingPagePage.tsx
+var O = 8, k = 12;
+function A() {
+	let A = p(), j = e((e) => e.timeEntries), M = e((e) => e.employees), N = e((e) => e.jobPostings), P = e((e) => e.candidates), F = e((e) => e.initialized), I = c(() => s(j, M, O), [j, M]), L = c(() => a(I, M), [I, M]), R = c(() => i(j, M).slice(0, k), [j, M]), z = c(() => N.find((e) => e.status === "active"), [N]), B = c(() => z ? o(z, M, P) : null, [
+		z,
+		M,
+		P
+	]);
+	if (!F) return /* @__PURE__ */ h("div", {
+		className: "flex min-h-[60vh] items-center justify-center p-6",
+		children: /* @__PURE__ */ h(D, { size: "lg" })
+	});
+	let V = I.hasData && I.weekRanges.length > 0 ? `${I.weekRanges[0]} → ${I.weekRanges[I.weekRanges.length - 1]}` : null;
+	return /* @__PURE__ */ g("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ g(v, {
+				variant: "ghost",
+				size: "sm",
+				onClick: () => A("../projects/projects-page"),
+				children: [/* @__PURE__ */ h(u, { className: "mr-1 h-4 w-4" }), "Back to projects"]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between",
+				children: [/* @__PURE__ */ g("div", { children: [
+					/* @__PURE__ */ h("p", {
+						className: "text-sm text-text-secondary",
+						children: "Skills-based staffing & utilization"
+					}),
+					/* @__PURE__ */ h("h1", {
+						className: "text-2xl font-semibold",
+						children: /* @__PURE__ */ h(w, { children: "Resourcing & Utilization" })
+					}),
+					/* @__PURE__ */ h(E, {
+						className: "mt-1",
+						children: "See who is over- or under-utilized week by week, how people are allocated across projects, and which candidates best match an open role — all from real logged time."
+					})
+				] }), /* @__PURE__ */ g("div", {
+					className: "grid grid-cols-1 gap-3 sm:grid-cols-3 lg:w-auto",
+					children: [
+						/* @__PURE__ */ h(t, {
+							label: "Avg utilization",
+							value: `${L.avgUtilization}%`,
+							icon: /* @__PURE__ */ h(d, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ h(t, {
+							label: "Bench",
+							value: L.bench,
+							icon: /* @__PURE__ */ h(f, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ h(t, {
+							label: "Over-allocated",
+							value: L.overAllocated,
+							icon: /* @__PURE__ */ h(l, { className: "h-4 w-4" })
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "grid gap-4 lg:grid-cols-3",
+				children: [/* @__PURE__ */ g(y, {
+					className: "lg:col-span-2",
+					children: [/* @__PURE__ */ g(S, { children: [/* @__PURE__ */ h(C, {
+						className: "text-base",
+						children: "Utilization heatmap"
+					}), /* @__PURE__ */ h(x, { children: V ? `Weekly utilization (Σ logged hours ÷ 40h capacity) · ${V}` : "Weekly utilization from logged time" })] }), /* @__PURE__ */ h(b, { children: I.hasData ? /* @__PURE__ */ g("div", {
+						className: "space-y-3",
+						children: [/* @__PURE__ */ h(n, {
+							rows: I.rows,
+							colLabels: I.weekLabels,
+							showValues: !0,
+							valueFormatter: (e) => `${e}%`,
+							title: "Per-person weekly utilization"
+						}), /* @__PURE__ */ h("ul", {
+							className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-text-muted",
+							children: I.weekLabels.map((e, t) => /* @__PURE__ */ g("li", { children: [
+								/* @__PURE__ */ h("span", {
+									className: "font-medium text-text-secondary",
+									children: e
+								}),
+								" ",
+								I.weekRanges[t]
+							] }, e))
+						})]
+					}) : /* @__PURE__ */ h(T, {
+						illustration: "empty-data",
+						title: "No time entries yet",
+						description: "Once your team logs time, per-person weekly utilization will appear here. Nothing is shown for weeks without real entries."
+					}) })]
+				}), /* @__PURE__ */ g(y, { children: [/* @__PURE__ */ g(S, { children: [/* @__PURE__ */ h(C, {
+					className: "text-base",
+					children: "Skills match for open role"
+				}), B ? /* @__PURE__ */ g(x, { children: [
+					B.roleTitle,
+					" ·",
+					" ",
+					B.source === "employee" ? "internal team" : "candidate pool"
+				] }) : null] }), /* @__PURE__ */ h(b, {
+					className: "space-y-4",
+					children: z ? B && B.requiredSkills.length > 0 ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("div", {
+						className: "flex flex-wrap gap-1.5",
+						children: B.requiredSkills.map((e) => /* @__PURE__ */ h(_, {
+							variant: "outline",
+							className: "text-[11px]",
+							children: e
+						}, e))
+					}), B.matches.length > 0 ? /* @__PURE__ */ h("ol", {
+						className: "space-y-3",
+						children: B.matches.map((e, t) => /* @__PURE__ */ g("li", {
+							className: "rounded-[var(--radius-card)] border border-border-subtle bg-bg-surface p-3",
+							children: [
+								/* @__PURE__ */ g("div", {
+									className: "flex items-baseline justify-between gap-2",
+									children: [/* @__PURE__ */ g("span", {
+										className: "text-sm font-medium text-text-primary",
+										children: [
+											t + 1,
+											". ",
+											e.name
+										]
+									}), /* @__PURE__ */ g("span", {
+										className: "text-sm font-semibold tabular-nums text-status-success-text",
+										children: [e.matchPercent, "% match"]
+									})]
+								}),
+								/* @__PURE__ */ h("div", {
+									className: "mt-2 flex flex-wrap gap-1",
+									children: e.matchedSkills.map((e) => /* @__PURE__ */ h(_, {
+										variant: "secondary",
+										className: "text-[10px]",
+										children: e
+									}, e))
+								}),
+								e.detail ? /* @__PURE__ */ h("p", {
+									className: "mt-2 text-xs text-text-muted",
+									children: e.detail
+								}) : null
+							]
+						}, e.id))
+					}) : /* @__PURE__ */ h(T, {
+						illustration: "empty-people",
+						title: "No people match yet",
+						description: "No recorded skills overlap this role’s required skills."
+					})] }) : /* @__PURE__ */ h(T, {
+						illustration: "empty-data",
+						title: "No skill tags on this role",
+						description: "Add recognised skill keywords to this role’s requirements to rank candidate matches."
+					}) : /* @__PURE__ */ h(T, {
+						illustration: "empty-search",
+						title: "No active roles",
+						description: "Publish a job posting to match candidates against its required skills."
+					})
+				})] })]
+			}),
+			/* @__PURE__ */ g(y, { children: [/* @__PURE__ */ g(S, { children: [/* @__PURE__ */ h(C, {
+				className: "text-base",
+				children: "People allocation"
+			}), /* @__PURE__ */ h(x, { children: R.length > 0 ? `Project split for the latest week with logged time (${R[0].weekLabel})` : "Per-person project allocation from logged time" })] }), /* @__PURE__ */ h(b, {
+				className: "space-y-5",
+				children: R.length > 0 ? R.map((e) => /* @__PURE__ */ h(r, {
+					segments: e.segments,
+					label: e.name,
+					rightLabel: `${e.utilization}% utilized`
+				}, e.employeeId)) : /* @__PURE__ */ h(T, {
+					illustration: "empty-data",
+					title: "No allocation to show",
+					description: "No time entries have been logged yet, so there is nothing to allocate across projects."
+				})
+			})] })
+		]
+	});
+}
+//#endregion
+export { A as ProjectsResourcingPagePage };
+
+//# sourceMappingURL=ProjectsResourcingPagePage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectsResourcingPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/ProjectsResourcingPagePage.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n  GradientText,\n  IllustratedEmptyState,\n  PagePurpose,\n  Spinner,\n} from '@burdenoff/fe-libs/ui';\nimport { AlertTriangle, ArrowLeft, TrendingUp, Users } from 'lucide-react';\nimport { useNavigate } from 'react-router-dom';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\nimport {\n  AllocationBar,\n  Heatmap,\n  StatCard,\n} from '../components/viz';\nimport {\n  allocationByPerson,\n  benchAndOverallocated,\n  skillMatch,\n  utilizationByPersonWeek,\n} from '../lib/analytics';\n\nconst UTILIZATION_WEEKS = 8;\nconst MAX_ALLOCATION_ROWS = 12;\n\nexport function ProjectsResourcingPagePage() {\n  const navigate = useNavigate();\n  const timeEntries = useCrewFoundryStore((state) => state.timeEntries);\n  const employees = useCrewFoundryStore((state) => state.employees);\n  const jobPostings = useCrewFoundryStore((state) => state.jobPostings);\n  const candidates = useCrewFoundryStore((state) => state.candidates);\n  const initialized = useCrewFoundryStore((state) => state.initialized);\n\n  const matrix = useMemo(\n    () => utilizationByPersonWeek(timeEntries, employees, UTILIZATION_WEEKS),\n    [timeEntries, employees]\n  );\n  const kpis = useMemo(() => benchAndOverallocated(matrix, employees), [matrix, employees]);\n  const allocation = useMemo(\n    () => allocationByPerson(timeEntries, employees).slice(0, MAX_ALLOCATION_ROWS),\n    [timeEntries, employees]\n  );\n  const openJob = useMemo(\n    () => jobPostings.find((job) => job.status === 'active'),\n    [jobPostings]\n  );\n  // Prefer real employee skills; skillMatch falls back to the candidate pool\n  // when no employee has skills recorded.\n  const skills = useMemo(\n    () => (openJob ? skillMatch(openJob, employees, candidates) : null),\n    [openJob, employees, candidates]\n  );\n\n  if (!initialized) {\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  const weekRangeCaption =\n    matrix.hasData && matrix.weekRanges.length > 0\n      ? `${matrix.weekRanges[0]} → ${matrix.weekRanges[matrix.weekRanges.length - 1]}`\n      : null;\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <Button variant=\"ghost\" size=\"sm\" onClick={() => navigate('../projects/projects-page')}>\n        <ArrowLeft className=\"mr-1 h-4 w-4\" />\n        Back to projects\n      </Button>\n\n      <div className=\"flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between\">\n        <div>\n          <p className=\"text-sm text-text-secondary\">Skills-based staffing &amp; utilization</p>\n          <h1 className=\"text-2xl font-semibold\">\n            <GradientText>Resourcing &amp; Utilization</GradientText>\n          </h1>\n          <PagePurpose className=\"mt-1\">\n            See who is over- or under-utilized week by week, how people are allocated across\n            projects, and which candidates best match an open role — all from real logged time.\n          </PagePurpose>\n        </div>\n        <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-3 lg:w-auto\">\n          <StatCard\n            label=\"Avg utilization\"\n            value={`${kpis.avgUtilization}%`}\n            icon={<TrendingUp className=\"h-4 w-4\" />}\n          />\n          <StatCard label=\"Bench\" value={kpis.bench} icon={<Users className=\"h-4 w-4\" />} />\n          <StatCard\n            label=\"Over-allocated\"\n            value={kpis.overAllocated}\n            icon={<AlertTriangle className=\"h-4 w-4\" />}\n          />\n        </div>\n      </div>\n\n      <div className=\"grid gap-4 lg:grid-cols-3\">\n        {/* Utilization heatmap */}\n        <Card className=\"lg:col-span-2\">\n          <CardHeader>\n            <CardTitle className=\"text-base\">Utilization heatmap</CardTitle>\n            <CardDescription>\n              {weekRangeCaption\n                ? `Weekly utilization (Σ logged hours ÷ 40h capacity) · ${weekRangeCaption}`\n                : 'Weekly utilization from logged time'}\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            {matrix.hasData ? (\n              <div className=\"space-y-3\">\n                <Heatmap\n                  rows={matrix.rows}\n                  colLabels={matrix.weekLabels}\n                  showValues\n                  valueFormatter={(value) => `${value}%`}\n                  title=\"Per-person weekly utilization\"\n                />\n                <ul className=\"flex flex-wrap gap-x-3 gap-y-1 text-xs text-text-muted\">\n                  {matrix.weekLabels.map((label, index) => (\n                    <li key={label}>\n                      <span className=\"font-medium text-text-secondary\">{label}</span>{' '}\n                      {matrix.weekRanges[index]}\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ) : (\n              <IllustratedEmptyState\n                illustration=\"empty-data\"\n                title=\"No time entries yet\"\n                description=\"Once your team logs time, per-person weekly utilization will appear here. Nothing is shown for weeks without real entries.\"\n              />\n            )}\n          </CardContent>\n        </Card>\n\n        {/* Skills match for open role */}\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-base\">Skills match for open role</CardTitle>\n            {skills ? (\n              <CardDescription>\n                {skills.roleTitle} ·{' '}\n                {skills.source === 'employee' ? 'internal team' : 'candidate pool'}\n              </CardDescription>\n            ) : null}\n          </CardHeader>\n          <CardContent className=\"space-y-4\">\n            {!openJob ? (\n              <IllustratedEmptyState\n                illustration=\"empty-search\"\n                title=\"No active roles\"\n                description=\"Publish a job posting to match candidates against its required skills.\"\n              />\n            ) : skills && skills.requiredSkills.length > 0 ? (\n              <>\n                <div className=\"flex flex-wrap gap-1.5\">\n                  {skills.requiredSkills.map((skill) => (\n                    <Badge key={skill} variant=\"outline\" className=\"text-[11px]\">\n                      {skill}\n                    </Badge>\n                  ))}\n                </div>\n                {skills.matches.length > 0 ? (\n                  <ol className=\"space-y-3\">\n                    {skills.matches.map((match, index) => (\n                      <li\n                        key={match.id}\n                        className=\"rounded-[var(--radius-card)] border border-border-subtle bg-bg-surface p-3\"\n                      >\n                        <div className=\"flex items-baseline justify-between gap-2\">\n                          <span className=\"text-sm font-medium text-text-primary\">\n                            {index + 1}. {match.name}\n                          </span>\n                          <span className=\"text-sm font-semibold tabular-nums text-status-success-text\">\n                            {match.matchPercent}% match\n                          </span>\n                        </div>\n                        <div className=\"mt-2 flex flex-wrap gap-1\">\n                          {match.matchedSkills.map((skill) => (\n                            <Badge key={skill} variant=\"secondary\" className=\"text-[10px]\">\n                              {skill}\n                            </Badge>\n                          ))}\n                        </div>\n                        {match.detail ? (\n                          <p className=\"mt-2 text-xs text-text-muted\">{match.detail}</p>\n                        ) : null}\n                      </li>\n                    ))}\n                  </ol>\n                ) : (\n                  <IllustratedEmptyState\n                    illustration=\"empty-people\"\n                    title=\"No people match yet\"\n                    description=\"No recorded skills overlap this role’s required skills.\"\n                  />\n                )}\n              </>\n            ) : (\n              <IllustratedEmptyState\n                illustration=\"empty-data\"\n                title=\"No skill tags on this role\"\n                description=\"Add recognised skill keywords to this role’s requirements to rank candidate matches.\"\n              />\n            )}\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* People allocation this week */}\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-base\">People allocation</CardTitle>\n          <CardDescription>\n            {allocation.length > 0\n              ? `Project split for the latest week with logged time (${allocation[0].weekLabel})`\n              : 'Per-person project allocation from logged time'}\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-5\">\n          {allocation.length > 0 ? (\n            allocation.map((row) => (\n              <AllocationBar\n                key={row.employeeId}\n                segments={row.segments}\n                label={row.name}\n                rightLabel={`${row.utilization}% utilized`}\n              />\n            ))\n          ) : (\n            <IllustratedEmptyState\n              illustration=\"empty-data\"\n              title=\"No allocation to show\"\n              description=\"No time entries have been logged yet, so there is nothing to allocate across projects.\"\n            />\n          )}\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/crewfoundry/pages/TeamsTeamDetailPagePage.js

@@ -1,124 +1,183 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { formatEnumLabel as t } from "../utils/formatEnumLabel.js";
-import { BarChart3 as n, Calendar as r, FolderKanban as i, Settings as a, Star as o, Users as s } from "lucide-react";
-import { useNavigate as c, useSearchParams as l } from "react-router-dom";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Badge as f, Card as p, CardContent as m, CardHeader as h, CardTitle as g, EmphasisPanel as _, GradientText as v, IllustratedEmptyState as y, NextSteps as b, PagePurpose as x, ResponsiveTable as S } from "@burdenoff/fe-libs/ui";
+import { getInitials as n } from "../components/viz/lib/format.js";
+import { AvatarStack as r } from "../components/viz/AvatarStack.js";
+import "../components/viz/index.js";
+import { BarChart3 as i, Calendar as a, FolderKanban as o, Settings as s, Star as c, Users as l } from "lucide-react";
+import { useNavigate as u, useSearchParams as d } from "react-router-dom";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Badge as m, Card as h, CardContent as g, CardHeader as _, CardTitle as v, EmphasisPanel as y, GradientText as b, IllustratedEmptyState as x, NextSteps as S, PagePurpose as C, ResponsiveTable as w, Spinner as T } from "@burdenoff/fe-libs/ui";
 //#region src/crewfoundry/pages/TeamsTeamDetailPagePage.tsx
-function C() {
-	let C = c(), [w] = l(), { teams: T, employees: E, projects: D } = e(), O = w.get("id"), k = T.find((e) => e.id === O) ?? T[0];
-	if (!k) return /* @__PURE__ */ u("div", {
+function E({ name: e, src: t, size: r = 32 }) {
+	return t ? /* @__PURE__ */ f("img", {
+		src: t,
+		alt: e,
+		width: r,
+		height: r,
+		loading: "lazy",
+		className: "shrink-0 rounded-full object-cover",
+		style: {
+			width: r,
+			height: r
+		}
+	}) : /* @__PURE__ */ f("span", {
+		"aria-hidden": "true",
+		className: "inline-flex shrink-0 items-center justify-center rounded-full bg-bg-elevated font-medium text-text-secondary",
+		style: {
+			width: r,
+			height: r,
+			fontSize: Math.round(r * .36)
+		},
+		children: n(e)
+	});
+}
+function D() {
+	let n = u(), [D] = d(), { teams: O, employees: k, projects: A, initialized: j } = e(), M = D.get("id"), N = O.find((e) => e.id === M) ?? O[0];
+	if (!j && !N) return /* @__PURE__ */ f("div", {
+		className: "flex min-h-[60vh] items-center justify-center p-6",
+		children: /* @__PURE__ */ f(T, { size: "lg" })
+	});
+	if (!N) return /* @__PURE__ */ f("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ u(y, {
+		children: /* @__PURE__ */ f(x, {
 			illustration: "empty-search",
 			title: "Team not found",
 			description: "This team is no longer available."
 		})
 	});
-	let A = E.filter((e) => k.members.includes(e.id)), j = D.filter((e) => e.teamId === k.id);
-	return /* @__PURE__ */ d("div", {
+	let P = k.filter((e) => N.members.includes(e.id)), F = A.filter((e) => e.teamId === N.id), I = F.filter((e) => e.status === "active").length, L = k.find((e) => e.id === N.leadId), R = P.map((e) => ({
+		name: `${e.firstName} ${e.lastName}`.trim(),
+		avatarUrl: e.avatar,
+		role: e.position
+	}));
+	return /* @__PURE__ */ p("div", {
 		className: "space-y-6 p-6 max-w-4xl",
 		children: [
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ p("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ d("div", { children: [
-					/* @__PURE__ */ u("h1", {
+				children: [/* @__PURE__ */ p("div", { children: [
+					/* @__PURE__ */ f("h1", {
 						className: "text-2xl font-semibold",
-						children: /* @__PURE__ */ u(v, { children: k.name })
+						children: /* @__PURE__ */ f(b, { children: N.name })
 					}),
-					/* @__PURE__ */ u("p", {
+					/* @__PURE__ */ f("p", {
 						className: "text-sm text-text-secondary",
-						children: k.description
+						children: N.description
 					}),
-					/* @__PURE__ */ u(x, {
+					/* @__PURE__ */ f(C, {
 						className: "mt-2",
 						children: "A complete view of one team — who's on it, what they're working on, and how they're performing — so you can support the group and keep its projects on track."
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "mt-3 flex flex-wrap items-center gap-x-4 gap-y-2",
+						children: [/* @__PURE__ */ p("span", {
+							className: "flex items-center gap-2 text-xs text-text-secondary",
+							children: [
+								"Led by",
+								/* @__PURE__ */ f(E, {
+									name: L ? `${L.firstName} ${L.lastName}` : N.leadName,
+									src: L?.avatar,
+									size: 22
+								}),
+								/* @__PURE__ */ f("span", {
+									className: "font-medium text-text-primary",
+									children: L ? `${L.firstName} ${L.lastName}` : N.leadName || "—"
+								})
+							]
+						}), R.length > 0 ? /* @__PURE__ */ f(r, {
+							people: R,
+							max: 6,
+							size: 26
+						}) : null]
 					})
-				] }), /* @__PURE__ */ u(f, {
-					variant: k.status === "active" ? "default" : "secondary",
-					children: t(k.status)
+				] }), /* @__PURE__ */ f(m, {
+					variant: N.status === "active" ? "default" : "secondary",
+					children: t(N.status)
 				})]
 			}),
-			/* @__PURE__ */ u(b, {
+			/* @__PURE__ */ f(S, {
 				storageKey: "crewfoundry-team-details",
 				steps: [
 					{
 						id: "analytics",
 						label: "View team analytics",
 						description: "See productivity and workload trends for this team.",
-						icon: /* @__PURE__ */ u(n, { className: "h-4 w-4" }),
-						onClick: () => C("../teams/team-analytics-page")
+						icon: /* @__PURE__ */ f(i, { className: "h-4 w-4" }),
+						onClick: () => n("../teams/team-analytics-page")
 					},
 					{
 						id: "settings",
 						label: "Adjust team settings",
 						description: "Manage membership, permissions, and preferences.",
-						icon: /* @__PURE__ */ u(a, { className: "h-4 w-4" }),
-						onClick: () => C(`../teams/team-settings-page?id=${encodeURIComponent(k.id)}`)
+						icon: /* @__PURE__ */ f(s, { className: "h-4 w-4" }),
+						onClick: () => n(`../teams/team-settings-page?id=${encodeURIComponent(N.id)}`)
 					},
 					{
 						id: "directory",
 						label: "Browse all teams",
 						description: "Explore how the rest of the organization is structured.",
-						icon: /* @__PURE__ */ u(s, { className: "h-4 w-4" }),
-						onClick: () => C("../teams/team-directory-page")
+						icon: /* @__PURE__ */ f(l, { className: "h-4 w-4" }),
+						onClick: () => n("../teams/team-directory-page")
 					}
 				]
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ p("div", {
 				className: "grid gap-4 md:grid-cols-4",
 				children: [
-					/* @__PURE__ */ u(p, { children: /* @__PURE__ */ d(m, {
+					/* @__PURE__ */ f(h, { children: /* @__PURE__ */ p(g, {
 						className: "p-4 text-center",
 						children: [
-							/* @__PURE__ */ u(s, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
-							/* @__PURE__ */ u("p", {
+							/* @__PURE__ */ f(l, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
+							/* @__PURE__ */ f("p", {
 								className: "text-lg font-bold",
-								children: k.memberCount
+								children: N.memberCount
 							}),
-							/* @__PURE__ */ u("p", {
+							/* @__PURE__ */ f("p", {
 								className: "text-xs text-text-secondary",
 								children: "Members"
 							})
 						]
 					}) }),
-					/* @__PURE__ */ u(p, { children: /* @__PURE__ */ d(m, {
+					/* @__PURE__ */ f(h, { children: /* @__PURE__ */ p(g, {
 						className: "p-4 text-center",
 						children: [
-							/* @__PURE__ */ u(i, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
-							/* @__PURE__ */ u("p", {
+							/* @__PURE__ */ f(o, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
+							/* @__PURE__ */ p("p", {
 								className: "text-lg font-bold",
-								children: k.projectCount
+								children: [I, /* @__PURE__ */ p("span", {
+									className: "text-sm font-normal text-text-secondary",
+									children: ["/", F.length]
+								})]
 							}),
-							/* @__PURE__ */ u("p", {
+							/* @__PURE__ */ f("p", {
 								className: "text-xs text-text-secondary",
-								children: "Projects"
+								children: "Active Projects"
 							})
 						]
 					}) }),
-					/* @__PURE__ */ u(p, { children: /* @__PURE__ */ d(m, {
+					/* @__PURE__ */ f(h, { children: /* @__PURE__ */ p(g, {
 						className: "p-4 text-center",
 						children: [
-							/* @__PURE__ */ u(o, { className: "h-5 w-5 mx-auto text-status-warning-text mb-1" }),
-							/* @__PURE__ */ u("p", {
+							/* @__PURE__ */ f(c, { className: "h-5 w-5 mx-auto text-status-warning-text mb-1" }),
+							/* @__PURE__ */ f("p", {
 								className: "text-lg font-bold",
-								children: k.leadName
+								children: N.leadName
 							}),
-							/* @__PURE__ */ u("p", {
+							/* @__PURE__ */ f("p", {
 								className: "text-xs text-text-secondary",
 								children: "Lead"
 							})
 						]
 					}) }),
-					/* @__PURE__ */ u(p, { children: /* @__PURE__ */ d(m, {
+					/* @__PURE__ */ f(h, { children: /* @__PURE__ */ p(g, {
 						className: "p-4 text-center",
 						children: [
-							/* @__PURE__ */ u(r, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
-							/* @__PURE__ */ u("p", {
+							/* @__PURE__ */ f(a, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
+							/* @__PURE__ */ f("p", {
 								className: "text-lg font-bold",
-								children: k.createdAt
+								children: N.createdAt
 							}),
-							/* @__PURE__ */ u("p", {
+							/* @__PURE__ */ f("p", {
 								className: "text-xs text-text-secondary",
 								children: "Created"
 							})
@@ -126,33 +185,40 @@ function C() {
 					}) })
 				]
 			}),
-			/* @__PURE__ */ d(_, { children: [/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ p(y, { children: [/* @__PURE__ */ f("div", {
 				className: "mb-2 text-lg font-semibold",
 				children: "Team Members"
-			}), A.length === 0 ? /* @__PURE__ */ u(y, {
+			}), P.length === 0 ? /* @__PURE__ */ f(x, {
 				illustration: "empty-people",
 				title: "No members yet",
 				description: "Add people to this team to start collaborating."
-			}) : /* @__PURE__ */ u(S, {
+			}) : /* @__PURE__ */ f(w, {
 				columns: [
 					{
 						key: "name",
 						header: "Name",
 						priority: "primary",
-						cell: (e) => /* @__PURE__ */ d("span", {
-							className: "font-medium text-text-primary",
-							children: [
-								e.firstName,
-								" ",
-								e.lastName
-							]
+						cell: (e) => /* @__PURE__ */ p("span", {
+							className: "flex items-center gap-2.5",
+							children: [/* @__PURE__ */ f(E, {
+								name: `${e.firstName} ${e.lastName}`,
+								src: e.avatar,
+								size: 30
+							}), /* @__PURE__ */ p("span", {
+								className: "font-medium text-text-primary",
+								children: [
+									e.firstName,
+									" ",
+									e.lastName
+								]
+							})]
 						})
 					},
 					{
 						key: "position",
 						header: "Position",
 						priority: "secondary",
-						cell: (e) => /* @__PURE__ */ u("span", {
+						cell: (e) => /* @__PURE__ */ f("span", {
 							className: "text-text-secondary",
 							children: e.position
 						})
@@ -161,61 +227,61 @@ function C() {
 						key: "performance",
 						header: "Performance",
 						priority: "secondary",
-						cell: (e) => /* @__PURE__ */ d("span", {
+						cell: (e) => /* @__PURE__ */ p("span", {
 							className: "flex items-center gap-1 md:justify-center",
-							children: [/* @__PURE__ */ u(o, { className: "h-3 w-3 text-status-warning-text" }), e.performanceScore]
+							children: [/* @__PURE__ */ f(c, { className: "h-3 w-3 text-status-warning-text" }), e.performanceScore]
 						})
 					},
 					{
 						key: "status",
 						header: "Status",
 						priority: "primary",
-						cell: (e) => /* @__PURE__ */ u(f, {
+						cell: (e) => /* @__PURE__ */ f(m, {
 							variant: e.status === "active" ? "default" : "secondary",
 							className: "text-[10px]",
 							children: t(e.status)
 						})
 					}
 				],
-				data: A,
+				data: P,
 				rowKey: (e) => e.id
 			})] }),
-			j.length > 0 && /* @__PURE__ */ d(p, { children: [/* @__PURE__ */ u(h, { children: /* @__PURE__ */ u(g, { children: "Team Projects" }) }), /* @__PURE__ */ u(m, {
+			F.length > 0 && /* @__PURE__ */ p(h, { children: [/* @__PURE__ */ f(_, { children: /* @__PURE__ */ f(v, { children: "Team Projects" }) }), /* @__PURE__ */ f(g, {
 				className: "space-y-3",
-				children: j.map((e) => /* @__PURE__ */ d("div", {
+				children: F.map((e) => /* @__PURE__ */ p("div", {
 					role: "button",
 					tabIndex: 0,
 					"aria-label": `Open ${e.name} project detail`,
-					onClick: () => C(`../projects/project-details-page?id=${encodeURIComponent(e.id)}`),
+					onClick: () => n(`../projects/project-details-page?id=${encodeURIComponent(e.id)}`),
 					onKeyDown: (t) => {
-						(t.key === "Enter" || t.key === " ") && (t.preventDefault(), C(`../projects/project-details-page?id=${encodeURIComponent(e.id)}`));
+						(t.key === "Enter" || t.key === " ") && (t.preventDefault(), n(`../projects/project-details-page?id=${encodeURIComponent(e.id)}`));
 					},
 					className: "flex items-center justify-between rounded border p-3 cursor-pointer hover:bg-bg-sunken/50 focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]",
-					children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+					children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
 						className: "text-sm font-medium",
 						children: e.name
-					}), /* @__PURE__ */ d("p", {
+					}), /* @__PURE__ */ p("p", {
 						className: "text-xs text-text-secondary",
 						children: [
 							e.startDate,
 							" — ",
 							e.endDate
 						]
-					})] }), /* @__PURE__ */ d("div", {
+					})] }), /* @__PURE__ */ p("div", {
 						className: "flex items-center gap-2",
 						children: [
-							/* @__PURE__ */ u("div", {
+							/* @__PURE__ */ f("div", {
 								className: "w-24 h-2 bg-bg-sunken rounded overflow-hidden",
-								children: /* @__PURE__ */ u("div", {
+								children: /* @__PURE__ */ f("div", {
 									className: "h-2 bg-action-primary-bg rounded",
 									style: { width: `${e.progress}%` }
 								})
 							}),
-							/* @__PURE__ */ d("span", {
+							/* @__PURE__ */ p("span", {
 								className: "text-xs",
 								children: [e.progress, "%"]
 							}),
-							/* @__PURE__ */ u(f, {
+							/* @__PURE__ */ f(m, {
 								variant: e.status === "active" ? "default" : "secondary",
 								className: "text-[10px]",
 								children: t(e.status)
@@ -228,6 +294,6 @@ function C() {
 	});
 }
 //#endregion
-export { C as TeamsTeamDetailPagePage };
+export { D as TeamsTeamDetailPagePage };
 
 //# sourceMappingURL=TeamsTeamDetailPagePage.js.map