npm - @burdenoff/microfe-crewfoundry - Versions diffs - 2026.704.6 → 2026.707.1 - Mend

@burdenoff/microfe-crewfoundry 2026.704.6 → 2026.707.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (150) hide show

package/dist/crewfoundry/pages/TeamsTeamDetailPagePage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TeamsTeamDetailPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/TeamsTeamDetailPagePage.tsx"],"sourcesContent":["import {\n Badge,\n Card,\n CardContent,\n CardHeader,\n CardTitle,\n EmphasisPanel,\n GradientText,\n IllustratedEmptyState,\n NextSteps,\n PagePurpose,\n ResponsiveTable,\n Spinner,\n type ResponsiveTableColumn,\n} from '@burdenoff/fe-libs/ui';\nimport { BarChart3, Calendar, FolderKanban, Settings, Star, Users } from 'lucide-react';\nimport { useNavigate, useSearchParams } from 'react-router-dom';\nimport { useCrewFoundryStore, type Employee } from '../store/crewfoundryStore';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\n\nexport function TeamsTeamDetailPagePage() {\n const navigate = useNavigate();\n const [searchParams] = useSearchParams();\n const { teams, employees, projects, initialized } = useCrewFoundryStore();\n const teamId = searchParams.get('id');\n const team = teams.find((t) => t.id === teamId) ?? teams[0];\n if (!initialized && !team) {\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 (!team)\n return (\n <div className=\"p-6\">\n <IllustratedEmptyState\n illustration=\"empty-search\"\n title=\"Team not found\"\n description=\"This team is no longer available.\"\n />\n </div>\n );\n const teamMembers = employees.filter((e) => team.members.includes(e.id));\n const teamProjects = projects.filter((p) => p.teamId === team.id);\n\n const memberColumns: ResponsiveTableColumn<Employee>[] = [\n {\n key: 'name',\n header: 'Name',\n priority: 'primary',\n cell: (emp) => (\n <span className=\"font-medium text-text-primary\">\n {emp.firstName} {emp.lastName}\n </span>\n ),\n },\n {\n key: 'position',\n header: 'Position',\n priority: 'secondary',\n cell: (emp) => <span className=\"text-text-secondary\">{emp.position}</span>,\n },\n {\n key: 'performance',\n header: 'Performance',\n priority: 'secondary',\n cell: (emp) => (\n <span className=\"flex items-center gap-1 md:justify-center\">\n <Star className=\"h-3 w-3 text-status-warning-text\" />\n {emp.performanceScore}\n </span>\n ),\n },\n {\n key: 'status',\n header: 'Status',\n priority: 'primary',\n cell: (emp) => (\n <Badge variant={emp.status === 'active' ? 'default' : 'secondary'} className=\"text-[10px]\">\n {formatEnumLabel(emp.status)}\n </Badge>\n ),\n },\n ];\n\n return (\n <div className=\"space-y-6 p-6 max-w-4xl\">\n <div className=\"flex items-center justify-between\">\n <div>\n <h1 className=\"text-2xl font-semibold\">\n <GradientText>{team.name}</GradientText>\n </h1>\n <p className=\"text-sm text-text-secondary\">{team.description}</p>\n <PagePurpose className=\"mt-2\">\n A complete view of one team — who's on it, what they're working on, and how\n they're performing — so you can support the group and keep its projects on track.\n </PagePurpose>\n </div>\n <Badge variant={team.status === 'active' ? 'default' : 'secondary'}>\n {formatEnumLabel(team.status)}\n </Badge>\n </div>\n\n <NextSteps\n storageKey=\"crewfoundry-team-details\"\n steps={[\n {\n id: 'analytics',\n label: 'View team analytics',\n description: 'See productivity and workload trends for this team.',\n icon: <BarChart3 className=\"h-4 w-4\" />,\n onClick: () => navigate('../teams/team-analytics-page'),\n },\n {\n id: 'settings',\n label: 'Adjust team settings',\n description: 'Manage membership, permissions, and preferences.',\n icon: <Settings className=\"h-4 w-4\" />,\n onClick: () =>\n navigate(`../teams/team-settings-page?id=${encodeURIComponent(team.id)}`),\n },\n {\n id: 'directory',\n label: 'Browse all teams',\n description: 'Explore how the rest of the organization is structured.',\n icon: <Users className=\"h-4 w-4\" />,\n onClick: () => navigate('../teams/team-directory-page'),\n },\n ]}\n />\n\n <div className=\"grid gap-4 md:grid-cols-4\">\n <Card>\n <CardContent className=\"p-4 text-center\">\n <Users className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n <p className=\"text-lg font-bold\">{team.memberCount}</p>\n <p className=\"text-xs text-text-secondary\">Members</p>\n </CardContent>\n </Card>\n <Card>\n <CardContent className=\"p-4 text-center\">\n <FolderKanban className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n <p className=\"text-lg font-bold\">{team.projectCount}</p>\n <p className=\"text-xs text-text-secondary\">Projects</p>\n </CardContent>\n </Card>\n <Card>\n <CardContent className=\"p-4 text-center\">\n <Star className=\"h-5 w-5 mx-auto text-status-warning-text mb-1\" />\n <p className=\"text-lg font-bold\">{team.leadName}</p>\n <p className=\"text-xs text-text-secondary\">Lead</p>\n </CardContent>\n </Card>\n <Card>\n <CardContent className=\"p-4 text-center\">\n <Calendar className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n <p className=\"text-lg font-bold\">{team.createdAt}</p>\n <p className=\"text-xs text-text-secondary\">Created</p>\n </CardContent>\n </Card>\n </div>\n <EmphasisPanel>\n <div className=\"mb-2 text-lg font-semibold\">Team Members</div>\n {teamMembers.length === 0 ? (\n <IllustratedEmptyState\n illustration=\"empty-people\"\n title=\"No members yet\"\n description=\"Add people to this team to start collaborating.\"\n />\n ) : (\n <ResponsiveTable columns={memberColumns} data={teamMembers} rowKey={(emp) => emp.id} />\n )}\n </EmphasisPanel>\n {teamProjects.length > 0 && (\n <Card>\n <CardHeader>\n <CardTitle>Team Projects</CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-3\">\n {teamProjects.map((p) => (\n <div\n key={p.id}\n role=\"button\"\n tabIndex={0}\n aria-label={`Open ${p.name} project detail`}\n onClick={() =>\n navigate(`../projects/project-details-page?id=${encodeURIComponent(p.id)}`)\n }\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n navigate(`../projects/project-details-page?id=${encodeURIComponent(p.id)}`);\n }\n }}\n 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)]\"\n >\n <div>\n <p className=\"text-sm font-medium\">{p.name}</p>\n <p className=\"text-xs text-text-secondary\">\n {p.startDate} — {p.endDate}\n </p>\n </div>\n <div className=\"flex items-center gap-2\">\n <div className=\"w-24 h-2 bg-bg-sunken rounded overflow-hidden\">\n <div\n className=\"h-2 bg-action-primary-bg rounded\"\n style={{ width: `${p.progress}%` }}\n />\n </div>\n <span className=\"text-xs\">{p.progress}%</span>\n <Badge\n variant={p.status === 'active' ? 'default' : 'secondary'}\n className=\"text-[10px]\"\n >\n {formatEnumLabel(p.status)}\n </Badge>\n </div>\n </div>\n ))}\n </CardContent>\n </Card>\n )}\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"TeamsTeamDetailPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/TeamsTeamDetailPagePage.tsx"],"sourcesContent":["import {\n Badge,\n Card,\n CardContent,\n CardHeader,\n CardTitle,\n EmphasisPanel,\n GradientText,\n IllustratedEmptyState,\n NextSteps,\n PagePurpose,\n ResponsiveTable,\n Spinner,\n type ResponsiveTableColumn,\n} from '@burdenoff/fe-libs/ui';\nimport { BarChart3, Calendar, FolderKanban, Settings, Star, Users } from 'lucide-react';\nimport { useNavigate, useSearchParams } from 'react-router-dom';\nimport { useCrewFoundryStore, type Employee } from '../store/crewfoundryStore';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\nimport { AvatarStack, getInitials, type Person } from '../components/viz';\n\nfunction InitialsAvatar({ name, src, size = 32 }: { name: string; src?: string; size?: number }) {\n if (src) {\n return (\n <img\n src={src}\n alt={name}\n width={size}\n height={size}\n loading=\"lazy\"\n className=\"shrink-0 rounded-full object-cover\"\n style={{ width: size, height: size }}\n />\n );\n }\n return (\n <span\n aria-hidden=\"true\"\n className=\"inline-flex shrink-0 items-center justify-center rounded-full bg-bg-elevated font-medium text-text-secondary\"\n style={{ width: size, height: size, fontSize: Math.round(size * 0.36) }}\n >\n {getInitials(name)}\n </span>\n );\n}\n\nexport function TeamsTeamDetailPagePage() {\n const navigate = useNavigate();\n const [searchParams] = useSearchParams();\n const { teams, employees, projects, initialized } = useCrewFoundryStore();\n const teamId = searchParams.get('id');\n const team = teams.find((t) => t.id === teamId) ?? teams[0];\n if (!initialized && !team) {\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 (!team)\n return (\n <div className=\"p-6\">\n <IllustratedEmptyState\n illustration=\"empty-search\"\n title=\"Team not found\"\n description=\"This team is no longer available.\"\n />\n </div>\n );\n const teamMembers = employees.filter((e) => team.members.includes(e.id));\n const teamProjects = projects.filter((p) => p.teamId === team.id);\n const activeProjectCount = teamProjects.filter((p) => p.status === 'active').length;\n const lead = employees.find((e) => e.id === team.leadId);\n const memberPeople: Person[] = teamMembers.map((e) => ({\n name: `${e.firstName} ${e.lastName}`.trim(),\n avatarUrl: e.avatar,\n role: e.position,\n }));\n\n const memberColumns: ResponsiveTableColumn<Employee>[] = [\n {\n key: 'name',\n header: 'Name',\n priority: 'primary',\n cell: (emp) => (\n <span className=\"flex items-center gap-2.5\">\n <InitialsAvatar name={`${emp.firstName} ${emp.lastName}`} src={emp.avatar} size={30} />\n <span className=\"font-medium text-text-primary\">\n {emp.firstName} {emp.lastName}\n </span>\n </span>\n ),\n },\n {\n key: 'position',\n header: 'Position',\n priority: 'secondary',\n cell: (emp) => <span className=\"text-text-secondary\">{emp.position}</span>,\n },\n {\n key: 'performance',\n header: 'Performance',\n priority: 'secondary',\n cell: (emp) => (\n <span className=\"flex items-center gap-1 md:justify-center\">\n <Star className=\"h-3 w-3 text-status-warning-text\" />\n {emp.performanceScore}\n </span>\n ),\n },\n {\n key: 'status',\n header: 'Status',\n priority: 'primary',\n cell: (emp) => (\n <Badge variant={emp.status === 'active' ? 'default' : 'secondary'} className=\"text-[10px]\">\n {formatEnumLabel(emp.status)}\n </Badge>\n ),\n },\n ];\n\n return (\n <div className=\"space-y-6 p-6 max-w-4xl\">\n <div className=\"flex items-center justify-between\">\n <div>\n <h1 className=\"text-2xl font-semibold\">\n <GradientText>{team.name}</GradientText>\n </h1>\n <p className=\"text-sm text-text-secondary\">{team.description}</p>\n <PagePurpose className=\"mt-2\">\n A complete view of one team — who's on it, what they're working on, and how\n they're performing — so you can support the group and keep its projects on track.\n </PagePurpose>\n <div className=\"mt-3 flex flex-wrap items-center gap-x-4 gap-y-2\">\n <span className=\"flex items-center gap-2 text-xs text-text-secondary\">\n Led by\n <InitialsAvatar name={lead ? `${lead.firstName} ${lead.lastName}` : team.leadName} src={lead?.avatar} size={22} />\n <span className=\"font-medium text-text-primary\">\n {lead ? `${lead.firstName} ${lead.lastName}` : team.leadName \|\| '—'}\n </span>\n </span>\n {memberPeople.length > 0 ? <AvatarStack people={memberPeople} max={6} size={26} /> : null}\n </div>\n </div>\n <Badge variant={team.status === 'active' ? 'default' : 'secondary'}>\n {formatEnumLabel(team.status)}\n </Badge>\n </div>\n\n <NextSteps\n storageKey=\"crewfoundry-team-details\"\n steps={[\n {\n id: 'analytics',\n label: 'View team analytics',\n description: 'See productivity and workload trends for this team.',\n icon: <BarChart3 className=\"h-4 w-4\" />,\n onClick: () => navigate('../teams/team-analytics-page'),\n },\n {\n id: 'settings',\n label: 'Adjust team settings',\n description: 'Manage membership, permissions, and preferences.',\n icon: <Settings className=\"h-4 w-4\" />,\n onClick: () =>\n navigate(`../teams/team-settings-page?id=${encodeURIComponent(team.id)}`),\n },\n {\n id: 'directory',\n label: 'Browse all teams',\n description: 'Explore how the rest of the organization is structured.',\n icon: <Users className=\"h-4 w-4\" />,\n onClick: () => navigate('../teams/team-directory-page'),\n },\n ]}\n />\n\n <div className=\"grid gap-4 md:grid-cols-4\">\n <Card>\n <CardContent className=\"p-4 text-center\">\n <Users className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n <p className=\"text-lg font-bold\">{team.memberCount}</p>\n <p className=\"text-xs text-text-secondary\">Members</p>\n </CardContent>\n </Card>\n <Card>\n <CardContent className=\"p-4 text-center\">\n <FolderKanban className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n <p className=\"text-lg font-bold\">\n {activeProjectCount}\n <span className=\"text-sm font-normal text-text-secondary\">/{teamProjects.length}</span>\n </p>\n <p className=\"text-xs text-text-secondary\">Active Projects</p>\n </CardContent>\n </Card>\n <Card>\n <CardContent className=\"p-4 text-center\">\n <Star className=\"h-5 w-5 mx-auto text-status-warning-text mb-1\" />\n <p className=\"text-lg font-bold\">{team.leadName}</p>\n <p className=\"text-xs text-text-secondary\">Lead</p>\n </CardContent>\n </Card>\n <Card>\n <CardContent className=\"p-4 text-center\">\n <Calendar className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n <p className=\"text-lg font-bold\">{team.createdAt}</p>\n <p className=\"text-xs text-text-secondary\">Created</p>\n </CardContent>\n </Card>\n </div>\n <EmphasisPanel>\n <div className=\"mb-2 text-lg font-semibold\">Team Members</div>\n {teamMembers.length === 0 ? (\n <IllustratedEmptyState\n illustration=\"empty-people\"\n title=\"No members yet\"\n description=\"Add people to this team to start collaborating.\"\n />\n ) : (\n <ResponsiveTable columns={memberColumns} data={teamMembers} rowKey={(emp) => emp.id} />\n )}\n </EmphasisPanel>\n {teamProjects.length > 0 && (\n <Card>\n <CardHeader>\n <CardTitle>Team Projects</CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-3\">\n {teamProjects.map((p) => (\n <div\n key={p.id}\n role=\"button\"\n tabIndex={0}\n aria-label={`Open ${p.name} project detail`}\n onClick={() =>\n navigate(`../projects/project-details-page?id=${encodeURIComponent(p.id)}`)\n }\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n navigate(`../projects/project-details-page?id=${encodeURIComponent(p.id)}`);\n }\n }}\n 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)]\"\n >\n <div>\n <p className=\"text-sm font-medium\">{p.name}</p>\n <p className=\"text-xs text-text-secondary\">\n {p.startDate} — {p.endDate}\n </p>\n </div>\n <div className=\"flex items-center gap-2\">\n <div className=\"w-24 h-2 bg-bg-sunken rounded overflow-hidden\">\n <div\n className=\"h-2 bg-action-primary-bg rounded\"\n style={{ width: `${p.progress}%` }}\n />\n </div>\n <span className=\"text-xs\">{p.progress}%</span>\n <Badge\n variant={p.status === 'active' ? 'default' : 'secondary'}\n className=\"text-[10px]\"\n >\n {formatEnumLabel(p.status)}\n </Badge>\n </div>\n </div>\n ))}\n </CardContent>\n </Card>\n )}\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/crewfoundry/pages/TeamsTeamDirectoryPagePage.js CHANGED Viewed

@@ -1,53 +1,83 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { formatEnumLabel as t } from "../utils/formatEnumLabel.js";
-import { useState as n } from "react";
-import { Search as r, Users as i } from "lucide-react";
-import { useNavigate as a } from "react-router-dom";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Badge as c, CardContent as l, GlassCard as u, GradientText as d, IllustratedEmptyState as f, Input as p, PagePurpose as m, Pagination as h, ResponsiveTable as g } from "@burdenoff/fe-libs/ui";
-import { usePagination as _ } from "@burdenoff/fe-libs/shared/hooks";
+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 { useMemo as i, useState as a } from "react";
+import { Search as o, Users as s } from "lucide-react";
+import { useNavigate as c } from "react-router-dom";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Badge as d, CardContent as f, GlassCard as p, GradientText as m, IllustratedEmptyState as h, Input as g, PagePurpose as _, Pagination as v, ResponsiveTable as y } from "@burdenoff/fe-libs/ui";
+import { usePagination as b } from "@burdenoff/fe-libs/shared/hooks";
 //#region src/crewfoundry/pages/TeamsTeamDirectoryPagePage.tsx
-function v() {
-	let v = a(), { teams: y } = e(), [b, x] = n(""), { page: S, pageSize: C, setPage: w } = _({ initialPageSize: 25 }), T = y.filter((e) => `${e.name} ${e.department} ${e.leadName}`.toLowerCase().includes(b.toLowerCase())), E = T.slice((S - 1) * C, (S - 1) * C + C);
-	return /* @__PURE__ */ s("div", {
+function x({ name: e, src: t, size: r = 26 }) {
+	return t ? /* @__PURE__ */ l("img", {
+		src: t,
+		alt: e,
+		width: r,
+		height: r,
+		loading: "lazy",
+		className: "shrink-0 rounded-full object-cover",
+		style: {
+			width: r,
+			height: r
+		}
+	}) : /* @__PURE__ */ l("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 S() {
+	let n = c(), { teams: S, employees: C } = e(), [w, T] = a(""), { page: E, pageSize: D, setPage: O } = b({ initialPageSize: 25 }), k = i(() => new Map(C.map((e) => [e.id, e])), [C]), A = (e) => e.members.map((e) => k.get(e)).filter((e) => e !== void 0).map((e) => ({
+		name: `${e.firstName} ${e.lastName}`.trim(),
+		avatarUrl: e.avatar,
+		role: e.position
+	})), j = S.filter((e) => `${e.name} ${e.department} ${e.leadName}`.toLowerCase().includes(w.toLowerCase())), M = j.slice((E - 1) * D, (E - 1) * D + D);
+	return /* @__PURE__ */ u("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ s("div", { children: [
-				/* @__PURE__ */ o("h1", {
+			/* @__PURE__ */ u("div", { children: [
+				/* @__PURE__ */ l("h1", {
 					className: "text-2xl font-semibold",
-					children: /* @__PURE__ */ o(d, { children: "Team Directory" })
+					children: /* @__PURE__ */ l(m, { children: "Team Directory" })
 				}),
-				/* @__PURE__ */ o("p", {
+				/* @__PURE__ */ l("p", {
 					className: "text-sm text-text-secondary",
 					children: "Browse all teams in the organization"
 				}),
-				/* @__PURE__ */ o(m, {
+				/* @__PURE__ */ l(_, {
 					className: "mt-1",
 					children: "Browse every team in the company — find a team, see who's on it, and understand how your organization is structured."
 				})
 			] }),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ u("div", {
 				className: "relative max-w-sm",
-				children: [/* @__PURE__ */ o(r, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ o(p, {
+				children: [/* @__PURE__ */ l(o, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ l(g, {
 					placeholder: "Search teams...",
 					className: "pl-9",
-					value: b,
-					onChange: (e) => x(e.target.value)
+					value: w,
+					onChange: (e) => T(e.target.value)
 				})]
 			}),
-			/* @__PURE__ */ o(u, {
+			/* @__PURE__ */ l(p, {
 				treatment: "glass",
 				glow: !0,
 				className: "border-border-seam",
-				children: /* @__PURE__ */ s(l, {
+				children: /* @__PURE__ */ u(f, {
 					className: "p-4",
-					children: [/* @__PURE__ */ o(g, {
+					children: [/* @__PURE__ */ l(y, {
 						columns: [
 							{
 								key: "name",
 								header: "Team",
 								priority: "primary",
-								cell: (e) => /* @__PURE__ */ o("span", {
+								cell: (e) => /* @__PURE__ */ l("span", {
 									className: "font-medium text-text-primary",
 									children: e.name
 								})
@@ -56,7 +86,7 @@ function v() {
 								key: "description",
 								header: "Description",
 								priority: "secondary",
-								cell: (e) => /* @__PURE__ */ o("span", {
+								cell: (e) => /* @__PURE__ */ l("span", {
 									className: "text-text-secondary line-clamp-2 md:truncate md:block",
 									children: e.description
 								})
@@ -65,7 +95,7 @@ function v() {
 								key: "department",
 								header: "Department",
 								priority: "secondary",
-								cell: (e) => /* @__PURE__ */ o("span", {
+								cell: (e) => /* @__PURE__ */ l("span", {
 									className: "text-sm",
 									children: e.department
 								})
@@ -74,46 +104,66 @@ function v() {
 								key: "lead",
 								header: "Lead",
 								priority: "secondary",
-								cell: (e) => /* @__PURE__ */ o("span", {
-									className: "text-text-secondary",
-									children: e.leadName
-								})
+								cell: (e) => {
+									let t = e.leadId ? k.get(e.leadId) : void 0;
+									return /* @__PURE__ */ u("span", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ l(x, {
+											name: t ? `${t.firstName} ${t.lastName}` : e.leadName,
+											src: t?.avatar,
+											size: 24
+										}), /* @__PURE__ */ l("span", {
+											className: "text-text-secondary",
+											children: e.leadName
+										})]
+									});
+								}
 							},
 							{
 								key: "members",
 								header: "Members",
 								priority: "primary",
-								cell: (e) => /* @__PURE__ */ s("span", {
-									className: "flex items-center gap-1 md:justify-end",
-									children: [/* @__PURE__ */ o(i, { className: "h-3 w-3" }), e.memberCount]
-								})
+								cell: (e) => {
+									let t = A(e);
+									return /* @__PURE__ */ u("span", {
+										className: "flex items-center gap-2 md:justify-end",
+										children: [t.length > 0 ? /* @__PURE__ */ l(r, {
+											people: t,
+											max: 4,
+											size: 24
+										}) : /* @__PURE__ */ l(s, { className: "h-3 w-3" }), /* @__PURE__ */ l("span", {
+											className: "tabular-nums text-text-secondary",
+											children: e.memberCount
+										})]
+									});
+								}
 							},
 							{
 								key: "status",
 								header: "Status",
 								priority: "primary",
-								cell: (e) => /* @__PURE__ */ o(c, {
+								cell: (e) => /* @__PURE__ */ l(d, {
 									variant: e.status === "active" ? "default" : "secondary",
 									className: "text-[10px]",
 									children: t(e.status)
 								})
 							}
 						],
-						data: E,
+						data: M,
 						rowKey: (e) => e.id,
-						onRowClick: (e) => v(`../teams/team-detail-page?id=${encodeURIComponent(e.id)}`),
-						emptyState: /* @__PURE__ */ o(f, {
+						onRowClick: (e) => n(`../teams/team-detail-page?id=${encodeURIComponent(e.id)}`),
+						emptyState: /* @__PURE__ */ l(h, {
 							illustration: "empty-search",
 							title: "No teams found",
 							description: "Try a different search term to find a team."
 						})
-					}), T.length > C && /* @__PURE__ */ o("div", {
+					}), j.length > D && /* @__PURE__ */ l("div", {
 						className: "mt-4",
-						children: /* @__PURE__ */ o(h, {
-							page: S,
-							pageSize: C,
-							totalItems: T.length,
-							onPageChange: w
+						children: /* @__PURE__ */ l(v, {
+							page: E,
+							pageSize: D,
+							totalItems: j.length,
+							onPageChange: O
 						})
 					})]
 				})
@@ -122,6 +172,6 @@ function v() {
 	});
 }
 //#endregion
-export { v as TeamsTeamDirectoryPagePage };
+export { S as TeamsTeamDirectoryPagePage };
 //# sourceMappingURL=TeamsTeamDirectoryPagePage.js.map

package/dist/crewfoundry/pages/TeamsTeamDirectoryPagePage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TeamsTeamDirectoryPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/TeamsTeamDirectoryPagePage.tsx"],"sourcesContent":["import {\n Badge,\n CardContent,\n GlassCard,\n GradientText,\n IllustratedEmptyState,\n Input,\n PagePurpose,\n Pagination,\n ResponsiveTable,\n type ResponsiveTableColumn,\n} from '@burdenoff/fe-libs/ui';\nimport { usePagination } from '@burdenoff/fe-libs/shared/hooks';\nimport { Search, Users } from 'lucide-react';\nimport { useNavigate } from 'react-router-dom';\nimport { useCrewFoundryStore, type Team } from '../store/crewfoundryStore';\nimport { useState } from 'react';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\n\nexport function TeamsTeamDirectoryPagePage() {\n const navigate = useNavigate();\n const { teams } = useCrewFoundryStore();\n const [search, setSearch] = useState('');\n const { page, pageSize, setPage } = usePagination({ initialPageSize: 25 });\n const filtered = teams.filter((t) =>\n `${t.name} ${t.department} ${t.leadName}`.toLowerCase().includes(search.toLowerCase())\n );\n const pageTeams = filtered.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);\n\n const columns: ResponsiveTableColumn<Team>[] = [\n {\n key: 'name',\n header: 'Team',\n priority: 'primary',\n cell: (team) => <span className=\"font-medium text-text-primary\">{team.name}</span>,\n },\n {\n key: 'description',\n header: 'Description',\n priority: 'secondary',\n cell: (team) => (\n <span className=\"text-text-secondary line-clamp-2 md:truncate md:block\">\n {team.description}\n </span>\n ),\n },\n {\n key: 'department',\n header: 'Department',\n priority: 'secondary',\n cell: (team) => <span className=\"text-sm\">{team.department}</span>,\n },\n {\n key: 'lead',\n header: 'Lead',\n priority: 'secondary',\n cell: (team) => <span className=\"text-text-secondary\">{team.leadName}</span~~>,\~~n },\n {\n key: 'members',\n header: 'Members',\n priority: 'primary',\n cell: (team) => (\n <span className=\"flex items-center gap-1 md:justify-end\">\n <Users className=\"h-3 w-3\" />\n {team.memberCount}\n </span>\n ),\n },\n {\n key: 'status',\n header: 'Status',\n priority: 'primary',\n cell: (team) => (\n <Badge variant={team.status === 'active' ? 'default' : 'secondary'} className=\"text-[10px]\">\n {formatEnumLabel(team.status)}\n </Badge>\n ),\n },\n ];\n\n return (\n <div className=\"space-y-6 p-6\">\n <div>\n <h1 className=\"text-2xl font-semibold\">\n <GradientText>Team Directory</GradientText>\n </h1>\n <p className=\"text-sm text-text-secondary\">Browse all teams in the organization</p>\n <PagePurpose className=\"mt-1\">\n Browse every team in the company — find a team, see who's on it, and understand how\n your organization is structured.\n </PagePurpose>\n </div>\n <div className=\"relative max-w-sm\">\n <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n <Input\n placeholder=\"Search teams...\"\n className=\"pl-9\"\n value={search}\n onChange={(e) => setSearch(e.target.value)}\n />\n </div>\n <GlassCard treatment=\"glass\" glow className=\"border-border-seam\">\n <CardContent className=\"p-4\">\n <ResponsiveTable\n columns={columns}\n data={pageTeams}\n rowKey={(team) => team.id}\n onRowClick={(team) =>\n navigate(`../teams/team-detail-page?id=${encodeURIComponent(team.id)}`)\n }\n emptyState={\n <IllustratedEmptyState\n illustration=\"empty-search\"\n title=\"No teams found\"\n description=\"Try a different search term to find a team.\"\n />\n }\n />\n {filtered.length > pageSize && (\n <div className=\"mt-4\">\n <Pagination\n page={page}\n pageSize={pageSize}\n totalItems={filtered.length}\n onPageChange={setPage}\n />\n </div>\n )}\n </CardContent>\n </GlassCard>\n </div>\n );\n}\n"],"mappings":"~~;;;;;;;;;AAmBA~~,SAAgB,IAA6B;CAC3C,IAAM,IAAW,GAAa,EACxB,EAAE,~~aAAU~~,GAAqB,~~EACjC~~,CAAC,GAAQ,KAAa,EAAS,GAAG,EAClC,EAAE,SAAM,aAAU,eAAY,EAAc,EAAE,iBAAiB,IAAI,CAAC,EACpE,IAAW,EAAM,QAAQ,MAC7B,GAAG,EAAE,KAAK,GAAG,EAAE,WAAW,GAAG,EAAE,WAAW,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,CACvF,EACK,IAAY,EAAS,OAAO,IAAO,KAAK,IAAW,IAAO,KAAK,IAAW,EAAS;~~AAsDzF~~,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD,EAAA,UAAA;IACE,kBAAC,MAAD;KAAI,WAAU;eACZ,kBAAC,GAAD,EAAA,UAAc,kBAA6B,CAAA;KACxC,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eAA8B;KAAwC,CAAA;IACnF,kBAAC,GAAD;KAAa,WAAU;eAAO;KAGhB,CAAA;IACV,EAAA,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,wEAAyE,CAAA,EAC3F,kBAAC,GAAD;KACE,aAAY;KACZ,WAAU;KACV,OAAO;KACP,WAAW,MAAM,EAAU,EAAE,OAAO,MAAM;KAC1C,CAAA,CACE;;GACN,kBAAC,GAAD;IAAW,WAAU;IAAQ,MAAA;IAAK,WAAU;cAC1C,kBAAC,GAAD;KAAa,WAAU;eAAvB,CACE,kBAAC,GAAD;MACW,~~SA5E4B~~;OAC7C;QACE,KAAK;QACL,QAAQ;QACR,UAAU;QACV,OAAO,MAAS,kBAAC,QAAD;SAAM,WAAU;mBAAiC,EAAK;SAAY,CAAA;QACnF;OACD;QACE,KAAK;QACL,QAAQ;QACR,UAAU;QACV,OAAO,MACL,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAK;SACD,CAAA;QAEV;OACD;QACE,KAAK;QACL,QAAQ;QACR,UAAU;QACV,OAAO,MAAS,kBAAC,QAAD;SAAM,WAAU;mBAAW,EAAK;SAAkB,CAAA;QACnE;OACD;QACE,KAAK;QACL,QAAQ;QACR,UAAU;QACV,OAAO,MAAS,kBAAC,QAAD;~~SAAM~~,WAAU;~~mBAAuB~~,EAAK;~~SAAgB~~,CAAA;~~QAC7E~~;OACD;QACE,KAAK;QACL,QAAQ;QACR,UAAU;QACV,OAAO,~~MACL~~,kBAAC,QAAD;~~SAAM~~,WAAU;~~mBAAhB~~,~~CACE~~,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA,~~EAC5B~~,EAAK,~~YACD;;QAEV~~;OACD;QACE,KAAK;QACL,QAAQ;QACR,UAAU;QACV,OAAO,MACL,kBAAC,GAAD;SAAO,SAAS,EAAK,WAAW,WAAW,YAAY;SAAa,WAAU;mBAC3E,EAAgB,EAAK,OAAO;SACvB,CAAA;QAEX;OACF;MA2BS,MAAM;MACN,SAAS,MAAS,EAAK;MACvB,aAAa,MACX,EAAS,gCAAgC,mBAAmB,EAAK,GAAG,GAAG;MAEzE,YACE,kBAAC,GAAD;OACE,cAAa;OACb,OAAM;OACN,aAAY;OACZ,CAAA;MAEJ,CAAA,EACD,EAAS,SAAS,KACjB,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD;OACQ;OACI;OACV,YAAY,EAAS;OACrB,cAAc;OACd,CAAA;MACE,CAAA,CAEI;;IACJ,CAAA;GACR"}
1	+ {"version":3,"file":"TeamsTeamDirectoryPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/TeamsTeamDirectoryPagePage.tsx"],"sourcesContent":["import {\n Badge,\n CardContent,\n GlassCard,\n GradientText,\n IllustratedEmptyState,\n Input,\n PagePurpose,\n Pagination,\n ResponsiveTable,\n type ResponsiveTableColumn,\n} from '@burdenoff/fe-libs/ui';\nimport { usePagination } from '@burdenoff/fe-libs/shared/hooks';\nimport { Search, Users } from 'lucide-react';\nimport { useNavigate } from 'react-router-dom';\nimport { useCrewFoundryStore, type Employee, type Team } from '../store/crewfoundryStore';\nimport { useMemo, useState } from 'react';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\nimport { AvatarStack, getInitials, type Person } from '../components/viz';\n\nfunction InitialsAvatar({ name, src, size = 26 }: { name: string; src?: string; size?: number }) {\n if (src) {\n return (\n <img\n src={src}\n alt={name}\n width={size}\n height={size}\n loading=\"lazy\"\n className=\"shrink-0 rounded-full object-cover\"\n style={{ width: size, height: size }}\n />\n );\n }\n return (\n <span\n aria-hidden=\"true\"\n className=\"inline-flex shrink-0 items-center justify-center rounded-full bg-bg-elevated font-medium text-text-secondary\"\n style={{ width: size, height: size, fontSize: Math.round(size * 0.36) }}\n >\n {getInitials(name)}\n </span>\n );\n}\n\nexport function TeamsTeamDirectoryPagePage() {\n const navigate = useNavigate();\n const { teams, employees } = useCrewFoundryStore();\n const [search, setSearch] = useState('');\n const { page, pageSize, setPage } = usePagination({ initialPageSize: 25 });\n const employeeById = useMemo(\n () => new Map(employees.map((employee) => [employee.id, employee])),\n [employees]\n );\n const membersOf = (team: Team): Person[] =>\n team.members\n .map((memberId) => employeeById.get(memberId))\n .filter((employee): employee is Employee => employee !== undefined)\n .map((employee) => ({\n name: `${employee.firstName} ${employee.lastName}`.trim(),\n avatarUrl: employee.avatar,\n role: employee.position,\n }));\n const filtered = teams.filter((t) =>\n `${t.name} ${t.department} ${t.leadName}`.toLowerCase().includes(search.toLowerCase())\n );\n const pageTeams = filtered.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);\n\n const columns: ResponsiveTableColumn<Team>[] = [\n {\n key: 'name',\n header: 'Team',\n priority: 'primary',\n cell: (team) => <span className=\"font-medium text-text-primary\">{team.name}</span>,\n },\n {\n key: 'description',\n header: 'Description',\n priority: 'secondary',\n cell: (team) => (\n <span className=\"text-text-secondary line-clamp-2 md:truncate md:block\">\n {team.description}\n </span>\n ),\n },\n {\n key: 'department',\n header: 'Department',\n priority: 'secondary',\n cell: (team) => <span className=\"text-sm\">{team.department}</span>,\n },\n {\n key: 'lead',\n header: 'Lead',\n priority: 'secondary',\n cell: (team) => {\n const lead = team.leadId ? employeeById.get(team.leadId) : undefined;\n return (\n <span className=\"flex items-center gap-2\">\n <InitialsAvatar\n name={lead ? `${lead.firstName} ${lead.lastName}` : team.leadName}\n src={lead?.avatar}\n size={24}\n />\n <span className=\"text-text-secondary\">{team.leadName}</span>\n </span>\n );\n },\n },\n {\n key: 'members',\n header: 'Members',\n priority: 'primary',\n cell: (team) => {\n const people = membersOf(team);\n return (\n <span className=\"flex items-center gap-2 md:justify-end\">\n {people.length > 0 ? (\n <AvatarStack people={people} max={4} size={24} />\n ) : (\n <Users className=\"h-3 w-3\" />\n )}\n <span className=\"tabular-nums text-text-secondary\">{team.memberCount}</span>\n </span>\n );\n },\n },\n {\n key: 'status',\n header: 'Status',\n priority: 'primary',\n cell: (team) => (\n <Badge variant={team.status === 'active' ? 'default' : 'secondary'} className=\"text-[10px]\">\n {formatEnumLabel(team.status)}\n </Badge>\n ),\n },\n ];\n\n return (\n <div className=\"space-y-6 p-6\">\n <div>\n <h1 className=\"text-2xl font-semibold\">\n <GradientText>Team Directory</GradientText>\n </h1>\n <p className=\"text-sm text-text-secondary\">Browse all teams in the organization</p>\n <PagePurpose className=\"mt-1\">\n Browse every team in the company — find a team, see who's on it, and understand how\n your organization is structured.\n </PagePurpose>\n </div>\n <div className=\"relative max-w-sm\">\n <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n <Input\n placeholder=\"Search teams...\"\n className=\"pl-9\"\n value={search}\n onChange={(e) => setSearch(e.target.value)}\n />\n </div>\n <GlassCard treatment=\"glass\" glow className=\"border-border-seam\">\n <CardContent className=\"p-4\">\n <ResponsiveTable\n columns={columns}\n data={pageTeams}\n rowKey={(team) => team.id}\n onRowClick={(team) =>\n navigate(`../teams/team-detail-page?id=${encodeURIComponent(team.id)}`)\n }\n emptyState={\n <IllustratedEmptyState\n illustration=\"empty-search\"\n title=\"No teams found\"\n description=\"Try a different search term to find a team.\"\n />\n }\n />\n {filtered.length > pageSize && (\n <div className=\"mt-4\">\n <Pagination\n page={page}\n pageSize={pageSize}\n totalItems={filtered.length}\n onPageChange={setPage}\n />\n </div>\n )}\n </CardContent>\n </GlassCard>\n </div>\n );\n}\n"],"mappings":"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"}