@burdenoff/microfe-crewfoundry 2026.1013.1 → 2026.1029.1

package/dist/crewfoundry/pages/LearningLearningAnalyticsPagePage.js

@@ -1,184 +1,139 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
-import { BookOpen as t, GraduationCap as n, Star as r, Users as i } from "lucide-react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Badge as s, Card as c, CardContent as l, CardHeader as u, CardTitle as d, GlassCard as f, GradientText as p, IllustratedEmptyState as m, PagePurpose as h, Pagination as g, ResponsiveTable as _ } from "@burdenoff/fe-libs/ui";
-import { usePagination as v } from "@burdenoff/fe-libs/shared/hooks";
+import { DonutChart as t } from "../components/viz/DonutChart.js";
+import { StatCard as n } from "../components/viz/StatCard.js";
+import { SkillBar as r } from "../components/viz/SkillBar.js";
+import { SegmentedTabs as i } from "../components/viz/SegmentedTabs.js";
+import "../components/viz/index.js";
+import { InlineError as a } from "../components/InlineError.js";
+import { ENROLLMENT_STATUS_LABEL as o } from "../lib/learning.js";
+import { useEnsureLoaded as s } from "../lib/useEnsureLoaded.js";
+import { LEARNING_TABS as c } from "./LearningCoursesPagePage.js";
+import { useMemo as l } from "react";
+import { useNavigate as u } from "react-router";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Card as m, CardContent as h, CardDescription as g, CardHeader as _, CardTitle as v, GradientText as y, IllustratedEmptyState as b, PagePurpose as x, Spinner as S } from "@burdenoff/fe-libs/ui";
 //#region src/crewfoundry/pages/LearningLearningAnalyticsPagePage.tsx
-function y() {
-	let { courses: y } = e(), { page: b, pageSize: x, offset: S, setPage: C } = v({ initialPageSize: 10 }), w = y.reduce((e, t) => e + t.enrolled, 0), T = y.reduce((e, t) => e + t.completed, 0), E = y.filter((e) => e.status === "active").length, D = (y.reduce((e, t) => e + t.rating, 0) / Math.max(y.length, 1)).toFixed(1), O = y.reduce((e, t) => (e[t.category] = (e[t.category] || 0) + t.enrolled, e), {}), k = Object.entries(O).sort(([, e], [, t]) => t - e), A = y.slice(S, S + x);
-	return /* @__PURE__ */ o("div", {
+function C() {
+	let C = u(), { trainingCompletion: w, learningLoaded: T, fetchLearning: E } = e(), D = s(T, E), O = l(() => w.reduce((e, t) => ({
+		enrolled: e.enrolled + t.totalEnrolled,
+		notStarted: e.notStarted + t.notStartedCount,
+		inProgress: e.inProgress + t.inProgressCount,
+		completed: e.completed + t.completedCount
+	}), {
+		enrolled: 0,
+		notStarted: 0,
+		inProgress: 0,
+		completed: 0
+	}), [w]), k = O.enrolled === 0 ? 0 : Math.round(O.completed / O.enrolled * 100), A = [...w].sort((e, t) => t.totalEnrolled - e.totalEnrolled);
+	return /* @__PURE__ */ p("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ o("div", { children: [
-				/* @__PURE__ */ a("h1", {
+			/* @__PURE__ */ p("div", { children: [
+				/* @__PURE__ */ f("h1", {
 					className: "text-2xl font-semibold",
-					children: /* @__PURE__ */ a(p, { children: "Learning Analytics" })
+					children: /* @__PURE__ */ f(y, { children: "Training Completion" })
 				}),
-				/* @__PURE__ */ a("p", {
+				/* @__PURE__ */ p("p", {
 					className: "text-sm text-text-secondary",
-					children: "Training metrics and engagement insights"
+					children: [
+						"Completion across ",
+						w.length,
+						" active courses"
+					]
 				}),
-				/* @__PURE__ */ a(h, {
+				/* @__PURE__ */ f(x, {
 					className: "mt-1",
-					children: "See how learning is landing across your organization — completion rates, popular courses, and skill growth to guide your L&D strategy."
+					children: "See which required training is getting done and where people are stuck, so you can follow up before a compliance or onboarding deadline slips."
 				})
 			] }),
-			/* @__PURE__ */ o("div", {
-				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4",
+			/* @__PURE__ */ f(i, {
+				"aria-label": "Learning sections",
+				variant: "underline",
+				value: "completion",
+				onChange: (e) => {
+					let t = c.find((t) => t.id === e);
+					t && e !== "completion" && C(t.path);
+				},
+				tabs: c.map(({ id: e, label: t }) => ({
+					id: e,
+					label: t
+				}))
+			}),
+			/* @__PURE__ */ f(a, { message: D }),
+			!T && !D ? /* @__PURE__ */ f("div", {
+				className: "flex min-h-[240px] items-center justify-center",
+				children: /* @__PURE__ */ f(S, { size: "lg" })
+			}) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("div", {
+				className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-4",
 				children: [
-					/* @__PURE__ */ o(f, {
-						treatment: "glass",
-						glow: !0,
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ o(u, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ a(d, {
-								className: "text-sm font-medium",
-								children: "Total Enrollments"
-							}), /* @__PURE__ */ a(i, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ a(l, { children: /* @__PURE__ */ a("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: w
-						}) })]
+					/* @__PURE__ */ f(n, {
+						label: "Enrollments",
+						value: O.enrolled
 					}),
-					/* @__PURE__ */ o(f, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ o(u, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ a(d, {
-								className: "text-sm font-medium",
-								children: "Completions"
-							}), /* @__PURE__ */ a(n, { className: "h-4 w-4 text-status-success-text" })]
-						}), /* @__PURE__ */ o(l, { children: [/* @__PURE__ */ a("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: T
-						}), /* @__PURE__ */ o("p", {
-							className: "text-xs text-text-secondary",
-							children: [w > 0 ? Math.round(T / w * 100) : 0, "% rate"]
-						})] })]
+					/* @__PURE__ */ f(n, {
+						label: "In Progress",
+						value: O.inProgress
 					}),
-					/* @__PURE__ */ o(f, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ o(u, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ a(d, {
-								className: "text-sm font-medium",
-								children: "Avg Rating"
-							}), /* @__PURE__ */ a(r, { className: "h-4 w-4 text-status-warning-text" })]
-						}), /* @__PURE__ */ a(l, { children: /* @__PURE__ */ o("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: [D, "/5"]
-						}) })]
+					/* @__PURE__ */ f(n, {
+						label: "Completed",
+						value: O.completed
 					}),
-					/* @__PURE__ */ o(f, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ o(u, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ a(d, {
-								className: "text-sm font-medium",
-								children: "Active Courses"
-							}), /* @__PURE__ */ a(t, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ o(l, { children: [/* @__PURE__ */ a("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: E
-						}), /* @__PURE__ */ o("p", {
-							className: "text-xs text-text-secondary",
-							children: [
-								"of ",
-								y.length,
-								" total"
-							]
-						})] })]
+					/* @__PURE__ */ f(n, {
+						label: "Completion Rate",
+						value: `${k}%`
 					})
 				]
-			}),
-			/* @__PURE__ */ o("div", {
-				className: "grid gap-4 md:grid-cols-2",
-				children: [/* @__PURE__ */ o(c, { children: [/* @__PURE__ */ a(u, { children: /* @__PURE__ */ a(d, { children: "Category Distribution" }) }), /* @__PURE__ */ a(l, {
-					className: "space-y-3",
-					children: k.length === 0 ? /* @__PURE__ */ a("p", {
-						className: "text-sm text-text-secondary",
-						children: "No enrollment data yet."
-					}) : k.map(([e, t]) => /* @__PURE__ */ o("div", {
-						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ a("span", {
-							className: "text-sm",
-							children: e
-						}), /* @__PURE__ */ o("div", {
-							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ a("span", {
-								className: "text-sm font-medium",
-								children: t
-							}), /* @__PURE__ */ o(s, {
-								variant: "outline",
-								className: "text-[10px]",
-								children: [w > 0 ? Math.round(t / w * 100) : 0, "%"]
-							})]
-						})]
-					}, e))
-				})] }), /* @__PURE__ */ o(c, { children: [/* @__PURE__ */ a(u, { children: /* @__PURE__ */ a(d, { children: "Course Performance" }) }), /* @__PURE__ */ o(l, {
-					className: "space-y-3",
-					children: [/* @__PURE__ */ a(_, {
-						columns: [
-							{
-								key: "title",
-								header: "Course",
-								priority: "primary",
-								cell: (e) => /* @__PURE__ */ a("span", {
-									className: "font-medium",
-									children: e.title
-								})
-							},
-							{
-								key: "enrolled",
-								header: "Enrolled",
-								priority: "secondary",
-								headerClassName: "text-right",
-								cellClassName: "md:text-right",
-								cell: (e) => e.enrolled
-							},
-							{
-								key: "completed",
-								header: "Completed",
-								priority: "secondary",
-								headerClassName: "text-right",
-								cellClassName: "md:text-right",
-								cell: (e) => e.completed
-							},
-							{
-								key: "rating",
-								header: "Rating",
-								priority: "secondary",
-								headerClassName: "text-right",
-								cellClassName: "md:text-right",
-								cell: (e) => /* @__PURE__ */ o("span", {
-									className: "inline-flex items-center gap-1 md:justify-end",
-									children: [/* @__PURE__ */ a(r, { className: "h-3 w-3 text-status-warning-text" }), e.rating]
-								})
-							}
-						],
-						data: A,
-						rowKey: (e) => e.id,
-						emptyState: /* @__PURE__ */ a(m, {
-							illustration: "empty-generic",
-							title: "No courses yet",
-							description: "Course performance will appear here once courses are added."
-						})
-					}), y.length > x && /* @__PURE__ */ a(g, {
-						page: b,
-						pageSize: x,
-						totalItems: y.length,
-						onPageChange: C
+			}), O.enrolled === 0 ? /* @__PURE__ */ f(b, {
+				illustration: "empty-data",
+				title: "No training activity yet",
+				description: "Completion appears here once employees are enrolled in active courses."
+			}) : /* @__PURE__ */ p("div", {
+				className: "grid gap-6 lg:grid-cols-3",
+				children: [/* @__PURE__ */ p(m, { children: [/* @__PURE__ */ p(_, { children: [/* @__PURE__ */ f(v, {
+					className: "text-base",
+					children: "Status mix"
+				}), /* @__PURE__ */ f(g, { children: "Every enrollment in an active course" })] }), /* @__PURE__ */ f(h, { children: /* @__PURE__ */ f(t, {
+					segments: [
+						{
+							label: o.not_started,
+							value: O.notStarted
+						},
+						{
+							label: o.in_progress,
+							value: O.inProgress
+						},
+						{
+							label: o.completed,
+							value: O.completed
+						}
+					],
+					centerLabel: `${k}%`,
+					centerCaption: "completed",
+					showLegend: !0
+				}) })] }), /* @__PURE__ */ p(m, {
+					className: "lg:col-span-2",
+					children: [/* @__PURE__ */ p(_, { children: [/* @__PURE__ */ f(v, {
+						className: "text-base",
+						children: "By course"
+					}), /* @__PURE__ */ f(g, { children: "Share of enrolled employees who completed it" })] }), /* @__PURE__ */ f(h, {
+						className: "space-y-4",
+						children: A.map((e) => /* @__PURE__ */ f("button", {
+							type: "button",
+							className: "block w-full text-left",
+							onClick: () => C(`../learning/course-details-page?id=${encodeURIComponent(e.courseId)}`),
+							children: /* @__PURE__ */ f(r, {
+								label: e.courseTitle,
+								value: e.completionRate,
+								levelLabel: `${e.completedCount}/${e.totalEnrolled} · ${Math.round(e.completionRate)}%`
+							})
+						}, e.courseId))
 					})]
-				})] })]
-			})
+				})]
+			})] })
 		]
 	});
 }
 //#endregion
-export { y as LearningLearningAnalyticsPagePage };
+export { C as LearningLearningAnalyticsPagePage };
 
 //# sourceMappingURL=LearningLearningAnalyticsPagePage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LearningLearningAnalyticsPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/LearningLearningAnalyticsPagePage.tsx"],"sourcesContent":["import { BookOpen, GraduationCap, Star, Users } from 'lucide-react';\nimport {\n  Badge,\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  GlassCard,\n  GradientText,\n  IllustratedEmptyState,\n  PagePurpose,\n  Pagination,\n  ResponsiveTable,\n  type ResponsiveTableColumn,\n} from '@burdenoff/fe-libs/ui';\nimport { usePagination } from '@burdenoff/fe-libs/shared/hooks';\nimport { useCrewFoundryStore, type LearningCourse } from '../store/crewfoundryStore';\n\nexport function LearningLearningAnalyticsPagePage() {\n  const { courses } = useCrewFoundryStore();\n  const { page, pageSize, offset, setPage } = usePagination({ initialPageSize: 10 });\n\n  const totalEnrolled = courses.reduce((sum, course) => sum + course.enrolled, 0);\n  const totalCompleted = courses.reduce((sum, course) => sum + course.completed, 0);\n  const activeCourses = courses.filter((course) => course.status === 'active').length;\n  const avgRating = (\n    courses.reduce((sum, course) => sum + course.rating, 0) / Math.max(courses.length, 1)\n  ).toFixed(1);\n\n  const categoryDistribution = courses.reduce<Record<string, number>>((acc, course) => {\n    acc[course.category] = (acc[course.category] || 0) + course.enrolled;\n    return acc;\n  }, {});\n  const sortedCategories = Object.entries(categoryDistribution).sort(([, a], [, b]) => b - a);\n\n  const pagedCourses = courses.slice(offset, offset + pageSize);\n\n  const columns: ResponsiveTableColumn<LearningCourse>[] = [\n    {\n      key: 'title',\n      header: 'Course',\n      priority: 'primary',\n      cell: (course) => <span className=\"font-medium\">{course.title}</span>,\n    },\n    {\n      key: 'enrolled',\n      header: 'Enrolled',\n      priority: 'secondary',\n      headerClassName: 'text-right',\n      cellClassName: 'md:text-right',\n      cell: (course) => course.enrolled,\n    },\n    {\n      key: 'completed',\n      header: 'Completed',\n      priority: 'secondary',\n      headerClassName: 'text-right',\n      cellClassName: 'md:text-right',\n      cell: (course) => course.completed,\n    },\n    {\n      key: 'rating',\n      header: 'Rating',\n      priority: 'secondary',\n      headerClassName: 'text-right',\n      cellClassName: 'md:text-right',\n      cell: (course) => (\n        <span className=\"inline-flex items-center gap-1 md:justify-end\">\n          <Star className=\"h-3 w-3 text-status-warning-text\" />\n          {course.rating}\n        </span>\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>Learning Analytics</GradientText>\n        </h1>\n        <p className=\"text-sm text-text-secondary\">Training metrics and engagement insights</p>\n        <PagePurpose className=\"mt-1\">\n          See how learning is landing across your organization — completion rates, popular courses,\n          and skill growth to guide your L&amp;D strategy.\n        </PagePurpose>\n      </div>\n\n      <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-4\">\n        <GlassCard treatment=\"glass\" glow className=\"border-border-seam\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Total Enrollments</CardTitle>\n            <Users className=\"h-4 w-4 text-text-secondary\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold tabular-nums\">{totalEnrolled}</div>\n          </CardContent>\n        </GlassCard>\n        <GlassCard treatment=\"metric\" className=\"border-border-seam\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Completions</CardTitle>\n            <GraduationCap className=\"h-4 w-4 text-status-success-text\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold tabular-nums\">{totalCompleted}</div>\n            <p className=\"text-xs text-text-secondary\">\n              {totalEnrolled > 0 ? Math.round((totalCompleted / totalEnrolled) * 100) : 0}% rate\n            </p>\n          </CardContent>\n        </GlassCard>\n        <GlassCard treatment=\"metric\" className=\"border-border-seam\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Avg Rating</CardTitle>\n            <Star className=\"h-4 w-4 text-status-warning-text\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold tabular-nums\">{avgRating}/5</div>\n          </CardContent>\n        </GlassCard>\n        <GlassCard treatment=\"metric\" className=\"border-border-seam\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Active Courses</CardTitle>\n            <BookOpen className=\"h-4 w-4 text-text-secondary\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold tabular-nums\">{activeCourses}</div>\n            <p className=\"text-xs text-text-secondary\">of {courses.length} total</p>\n          </CardContent>\n        </GlassCard>\n      </div>\n\n      <div className=\"grid gap-4 md:grid-cols-2\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Category Distribution</CardTitle>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            {sortedCategories.length === 0 ? (\n              <p className=\"text-sm text-text-secondary\">No enrollment data yet.</p>\n            ) : (\n              sortedCategories.map(([category, count]) => (\n                <div key={category} className=\"flex items-center justify-between\">\n                  <span className=\"text-sm\">{category}</span>\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"text-sm font-medium\">{count}</span>\n                    <Badge variant=\"outline\" className=\"text-[10px]\">\n                      {totalEnrolled > 0 ? Math.round((count / totalEnrolled) * 100) : 0}%\n                    </Badge>\n                  </div>\n                </div>\n              ))\n            )}\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Course Performance</CardTitle>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            <ResponsiveTable\n              columns={columns}\n              data={pagedCourses}\n              rowKey={(course) => course.id}\n              emptyState={\n                <IllustratedEmptyState\n                  illustration=\"empty-generic\"\n                  title=\"No courses yet\"\n                  description=\"Course performance will appear here once courses are added.\"\n                />\n              }\n            />\n            {courses.length > pageSize && (\n              <Pagination\n                page={page}\n                pageSize={pageSize}\n                totalItems={courses.length}\n                onPageChange={setPage}\n              />\n            )}\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"LearningLearningAnalyticsPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/LearningLearningAnalyticsPagePage.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\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 { useNavigate } from 'react-router';\nimport { InlineError } from '../components/InlineError';\nimport { DonutChart, SegmentedTabs, SkillBar, StatCard } from '../components/viz';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\nimport { ENROLLMENT_STATUS_LABEL } from '../lib/learning';\nimport { useEnsureLoaded } from '../lib/useEnsureLoaded';\nimport { LEARNING_TABS } from './LearningCoursesPagePage';\n\n/**\n * Manager completion dashboard, read straight from\n * `crewTrainingCompletionDashboard` (active courses only).\n */\nexport function LearningLearningAnalyticsPagePage() {\n  const navigate = useNavigate();\n  const { trainingCompletion, learningLoaded, fetchLearning } = useCrewFoundryStore();\n  const loadError = useEnsureLoaded(learningLoaded, fetchLearning);\n\n  const totals = useMemo(\n    () =>\n      trainingCompletion.reduce(\n        (acc, row) => ({\n          enrolled: acc.enrolled + row.totalEnrolled,\n          notStarted: acc.notStarted + row.notStartedCount,\n          inProgress: acc.inProgress + row.inProgressCount,\n          completed: acc.completed + row.completedCount,\n        }),\n        { enrolled: 0, notStarted: 0, inProgress: 0, completed: 0 }\n      ),\n    [trainingCompletion]\n  );\n  const overallRate =\n    totals.enrolled === 0 ? 0 : Math.round((totals.completed / totals.enrolled) * 100);\n  const ranked = [...trainingCompletion].sort((a, b) => b.totalEnrolled - a.totalEnrolled);\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div>\n        <h1 className=\"text-2xl font-semibold\">\n          <GradientText>Training Completion</GradientText>\n        </h1>\n        <p className=\"text-sm text-text-secondary\">\n          Completion across {trainingCompletion.length} active courses\n        </p>\n        <PagePurpose className=\"mt-1\">\n          See which required training is getting done and where people are stuck, so you can follow\n          up before a compliance or onboarding deadline slips.\n        </PagePurpose>\n      </div>\n\n      <SegmentedTabs\n        aria-label=\"Learning sections\"\n        variant=\"underline\"\n        value=\"completion\"\n        onChange={(id) => {\n          const tab = LEARNING_TABS.find((item) => item.id === id);\n          if (tab && id !== 'completion') navigate(tab.path);\n        }}\n        tabs={LEARNING_TABS.map(({ id, label }) => ({ id, label }))}\n      />\n\n      <InlineError message={loadError} />\n\n      {!learningLoaded && !loadError ? (\n        <div className=\"flex min-h-[240px] items-center justify-center\">\n          <Spinner size=\"lg\" />\n        </div>\n      ) : (\n        <>\n          <div className=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-4\">\n            <StatCard label=\"Enrollments\" value={totals.enrolled} />\n            <StatCard label=\"In Progress\" value={totals.inProgress} />\n            <StatCard label=\"Completed\" value={totals.completed} />\n            <StatCard label=\"Completion Rate\" value={`${overallRate}%`} />\n          </div>\n\n          {totals.enrolled === 0 ? (\n            <IllustratedEmptyState\n              illustration=\"empty-data\"\n              title=\"No training activity yet\"\n              description=\"Completion appears here once employees are enrolled in active courses.\"\n            />\n          ) : (\n            <div className=\"grid gap-6 lg:grid-cols-3\">\n              <Card>\n                <CardHeader>\n                  <CardTitle className=\"text-base\">Status mix</CardTitle>\n                  <CardDescription>Every enrollment in an active course</CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <DonutChart\n                    segments={[\n                      { label: ENROLLMENT_STATUS_LABEL.not_started, value: totals.notStarted },\n                      { label: ENROLLMENT_STATUS_LABEL.in_progress, value: totals.inProgress },\n                      { label: ENROLLMENT_STATUS_LABEL.completed, value: totals.completed },\n                    ]}\n                    centerLabel={`${overallRate}%`}\n                    centerCaption=\"completed\"\n                    showLegend\n                  />\n                </CardContent>\n              </Card>\n              <Card className=\"lg:col-span-2\">\n                <CardHeader>\n                  <CardTitle className=\"text-base\">By course</CardTitle>\n                  <CardDescription>Share of enrolled employees who completed it</CardDescription>\n                </CardHeader>\n                <CardContent className=\"space-y-4\">\n                  {ranked.map((row) => (\n                    <button\n                      key={row.courseId}\n                      type=\"button\"\n                      className=\"block w-full text-left\"\n                      onClick={() =>\n                        navigate(\n                          `../learning/course-details-page?id=${encodeURIComponent(row.courseId)}`\n                        )\n                      }\n                    >\n                      <SkillBar\n                        label={row.courseTitle}\n                        value={row.completionRate}\n                        levelLabel={`${row.completedCount}/${row.totalEnrolled} · ${Math.round(row.completionRate)}%`}\n                      />\n                    </button>\n                  ))}\n                </CardContent>\n              </Card>\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/crewfoundry/pages/MarketplaceBookingManagementPagePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarketplaceBookingManagementPagePage.d.ts","sourceRoot":"","sources":["../../../src/crewfoundry/pages/MarketplaceBookingManagementPagePage.tsx"],"names":[],"mappings":"AAaA,wBAAgB,oCAAoC,gCA0EnD"}
+{"version":3,"file":"MarketplaceBookingManagementPagePage.d.ts","sourceRoot":"","sources":["../../../src/crewfoundry/pages/MarketplaceBookingManagementPagePage.tsx"],"names":[],"mappings":"AAwCA,wBAAgB,oCAAoC,gCA+KnD"}

package/dist/crewfoundry/pages/MarketplaceBookingManagementPagePage.js

@@ -1,90 +1,180 @@
-import { Calendar as e, CheckCircle as t, Clock as n, Plus as r } from "lucide-react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Button as o, Card as s, CardContent as c, CardHeader as l, CardTitle as u, GlassCard as d, GradientText as f, IllustratedEmptyState as p, PagePurpose as m } from "@burdenoff/fe-libs/ui";
+import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
+import { StatCard as t } from "../components/viz/StatCard.js";
+import { SegmentedTabs as n } from "../components/viz/SegmentedTabs.js";
+import "../components/viz/index.js";
+import { formatDate as r } from "../utils/dateUtils.js";
+import { InlineError as i } from "../components/InlineError.js";
+import { useEnsureLoaded as a } from "../lib/useEnsureLoaded.js";
+import { MarketplaceTabs as o } from "../components/marketplace/MarketplaceTabs.js";
+import { BOOKING_ACTION_LABEL as s, BOOKING_STATUS_LABEL as c, allowedBookingTransitions as l, formatRate as u } from "../lib/marketplace.js";
+import { useState as d } from "react";
+import { useNavigate as f } from "react-router";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Badge as h, Button as g, Card as _, CardContent as v, GradientText as y, IllustratedEmptyState as b, PagePurpose as x, ResponsiveTable as S, Spinner as C } from "@burdenoff/fe-libs/ui";
 //#region src/crewfoundry/pages/MarketplaceBookingManagementPagePage.tsx
-function h() {
-	return /* @__PURE__ */ a("div", {
+var w = {
+	requested: "outline",
+	confirmed: "default",
+	completed: "secondary",
+	cancelled: "secondary"
+};
+function T() {
+	let T = f(), { bookings: E, marketplaceLoaded: D, fetchMarketplace: O, updateBookingStatus: k, initParams: A } = e(), j = a(D, O), [M, N] = d("provider"), [P, F] = d(null), [I, L] = d(null), R = A.actorId, z = E.filter((e) => e.providerActorId === R), B = E.filter((e) => e.clientActorId === R), V = M === "provider" ? z : B, H = (e, t) => e.filter((e) => e.status === t).length, U = async (e, t) => {
+		F(null), L(e.id);
+		try {
+			await k(e.id, t);
+		} catch (e) {
+			F(e instanceof Error ? e.message : "Unable to update booking");
+		} finally {
+			L(null);
+		}
+	}, W = [
+		{
+			key: "service",
+			header: "Service",
+			priority: "primary",
+			cell: (e) => /* @__PURE__ */ p("button", {
+				type: "button",
+				className: "text-left font-medium hover:underline",
+				onClick: () => T(`../marketplace/service-details-page?id=${encodeURIComponent(e.listingId)}`),
+				children: e.listingTitle
+			})
+		},
+		{
+			key: "party",
+			header: M === "provider" ? "Booked by" : "Provider",
+			cell: (e) => /* @__PURE__ */ p("span", { children: M === "provider" ? e.clientName : e.providerName })
+		},
+		{
+			key: "when",
+			header: "Scheduled",
+			cell: (e) => /* @__PURE__ */ p("span", {
+				className: "text-text-secondary",
+				children: e.scheduledStart ? `${r(e.scheduledStart)}${e.scheduledEnd ? ` – ${r(e.scheduledEnd)}` : ""}` : "Not scheduled"
+			})
+		},
+		{
+			key: "rate",
+			header: "Agreed rate",
+			cell: (e) => /* @__PURE__ */ p("span", {
+				className: "tabular-nums",
+				children: u(e)
+			})
+		},
+		{
+			key: "status",
+			header: "Status",
+			cell: (e) => /* @__PURE__ */ p(h, {
+				variant: w[e.status],
+				className: "text-[10px]",
+				children: c[e.status]
+			})
+		},
+		{
+			key: "actions",
+			header: "",
+			cellClassName: "md:text-right",
+			cell: (e) => {
+				let t = l(e, R);
+				return t.length === 0 ? /* @__PURE__ */ p("span", {
+					className: "text-xs text-text-muted",
+					children: "—"
+				}) : /* @__PURE__ */ p("div", {
+					className: "flex flex-wrap justify-end gap-1",
+					children: t.map((t) => /* @__PURE__ */ p(g, {
+						size: "sm",
+						variant: t === "cancelled" ? "ghost" : "outline",
+						disabled: I === e.id,
+						onClick: () => void U(e, t),
+						children: s[t]
+					}, t))
+				});
+			}
+		}
+	];
+	return /* @__PURE__ */ m("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ a("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ a("div", { children: [
-					/* @__PURE__ */ i("h1", {
-						className: "text-2xl font-semibold",
-						children: /* @__PURE__ */ i(f, { children: "Booking Management" })
-					}),
-					/* @__PURE__ */ i("p", {
-						className: "text-sm text-text-secondary",
-						children: "Manage service provider appointments"
-					}),
-					/* @__PURE__ */ i(m, {
-						className: "mt-1",
-						children: "Manage your service bookings — review upcoming engagements, confirm schedules, and keep your client commitments on track."
-					})
-				] }), /* @__PURE__ */ a(o, {
-					size: "sm",
-					disabled: !0,
-					title: "Booking creation is coming soon",
-					children: [/* @__PURE__ */ i(r, { className: "mr-1 h-4 w-4" }), "New Booking · Coming soon"]
-				})]
-			}),
-			/* @__PURE__ */ a("div", {
-				className: "grid gap-4 md:grid-cols-3",
+			/* @__PURE__ */ m("div", { children: [
+				/* @__PURE__ */ p("h1", {
+					className: "text-2xl font-semibold",
+					children: /* @__PURE__ */ p(y, { children: "Bookings" })
+				}),
+				/* @__PURE__ */ m("p", {
+					className: "text-sm text-text-secondary",
+					children: [
+						z.length,
+						" for your services · ",
+						B.length,
+						" you made"
+					]
+				}),
+				/* @__PURE__ */ p(x, {
+					className: "mt-1",
+					children: "Confirm requests for your services, mark work completed, and keep track of the services you have booked from others."
+				})
+			] }),
+			/* @__PURE__ */ p(o, { value: "bookings" }),
+			/* @__PURE__ */ p(i, { message: j ?? P }),
+			/* @__PURE__ */ m("div", {
+				className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-4",
 				children: [
-					/* @__PURE__ */ a(d, {
-						treatment: "glass",
-						glow: !0,
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ a(l, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ i(u, {
-								className: "text-sm font-medium",
-								children: "Upcoming"
-							}), /* @__PURE__ */ i(e, { className: "h-4 w-4 text-status-info-text" })]
-						}), /* @__PURE__ */ i(c, { children: /* @__PURE__ */ i("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: 0
-						}) })]
+					/* @__PURE__ */ p(t, {
+						label: "Requested",
+						value: H(V, "requested")
+					}),
+					/* @__PURE__ */ p(t, {
+						label: "Confirmed",
+						value: H(V, "confirmed")
 					}),
-					/* @__PURE__ */ a(d, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ a(l, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ i(u, {
-								className: "text-sm font-medium",
-								children: "Confirmed"
-							}), /* @__PURE__ */ i(t, { className: "h-4 w-4 text-status-success-text" })]
-						}), /* @__PURE__ */ i(c, { children: /* @__PURE__ */ i("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: 0
-						}) })]
+					/* @__PURE__ */ p(t, {
+						label: "Completed",
+						value: H(V, "completed")
 					}),
-					/* @__PURE__ */ a(d, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ a(l, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ i(u, {
-								className: "text-sm font-medium",
-								children: "Pending"
-							}), /* @__PURE__ */ i(n, { className: "h-4 w-4 text-status-warning-text" })]
-						}), /* @__PURE__ */ i(c, { children: /* @__PURE__ */ i("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: 0
-						}) })]
+					/* @__PURE__ */ p(t, {
+						label: "Cancelled",
+						value: H(V, "cancelled")
 					})
 				]
 			}),
-			/* @__PURE__ */ a(s, { children: [/* @__PURE__ */ i(l, { children: /* @__PURE__ */ i(u, { children: "All Bookings" }) }), /* @__PURE__ */ i(c, { children: /* @__PURE__ */ i(p, {
-				illustration: "empty-generic",
-				title: "No bookings yet",
-				description: "Once booking creation ships, your scheduled service appointments will appear here."
-			}) })] })
+			/* @__PURE__ */ p(n, {
+				"aria-label": "Booking perspective",
+				value: M,
+				onChange: (e) => N(e),
+				tabs: [{
+					id: "provider",
+					label: "Requests for my services",
+					count: z.length
+				}, {
+					id: "client",
+					label: "My bookings",
+					count: B.length
+				}]
+			}),
+			!D && !j ? /* @__PURE__ */ p("div", {
+				className: "flex min-h-[240px] items-center justify-center",
+				children: /* @__PURE__ */ p(C, { size: "lg" })
+			}) : V.length === 0 ? /* @__PURE__ */ p(b, {
+				illustration: "empty-data",
+				title: M === "provider" ? "No booking requests yet" : "You haven't booked anything",
+				description: M === "provider" ? "Requests appear here when a colleague books one of your services." : "Browse the marketplace to book a colleague or contractor.",
+				action: /* @__PURE__ */ p(g, {
+					size: "sm",
+					onClick: () => T("../marketplace/marketplace-page"),
+					children: "Browse the marketplace"
+				})
+			}) : /* @__PURE__ */ p(_, { children: /* @__PURE__ */ p(v, {
+				className: "pt-6",
+				children: /* @__PURE__ */ p(S, {
+					data: V,
+					rowKey: (e) => e.id,
+					columns: W
+				})
+			}) })
 		]
 	});
 }
 //#endregion
-export { h as MarketplaceBookingManagementPagePage };
+export { T as MarketplaceBookingManagementPagePage };
 
 //# sourceMappingURL=MarketplaceBookingManagementPagePage.js.map