@burdenoff/microfe-crewfoundry 2026.703.2 → 2026.704.2

package/dist/crewfoundry/pages/LearningLearningAnalyticsPagePage.js

@@ -1,194 +1,184 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
-import { useMemo as t } from "react";
-import { Clock as n, GraduationCap as r, Star as i, Users as a } from "lucide-react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Badge as c, Card as l, CardContent as u, CardDescription as d, CardHeader as f, CardTitle as p, GlassCard as m, GradientText as h, PagePurpose as g } from "@burdenoff/fe-libs/ui";
+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";
 //#region src/crewfoundry/pages/LearningLearningAnalyticsPagePage.tsx
-var _ = (/* @__PURE__ */ new Date("2026-03-01T00:00:00Z")).getTime();
-function v() {
-	let { courses: v } = e(), y = v.reduce((e, t) => e + t.enrolled, 0), b = v.reduce((e, t) => e + t.completed, 0), x = (v.reduce((e, t) => e + t.rating, 0) / Math.max(v.length, 1)).toFixed(1), S = t(() => v.slice(0, 6).map((e, t) => ({
-		month: (/* @__PURE__ */ new Date(_ - (5 - t) * 864e5 * 30)).toLocaleString("en-US", { month: "short" }),
-		hours: Math.round((e.completed + Math.max(e.modules, 1)) * 2.2),
-		completions: e.completed,
-		enrollments: e.enrolled
-	})), [v]), C = Math.max(1, ...S.map((e) => e.hours)), w = S.reduce((e, t) => e + t.hours, 0), T = v.reduce((e, t) => (e[t.category] = (e[t.category] || 0) + t.enrolled, e), {});
-	return /* @__PURE__ */ s("div", {
+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", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ s("div", { children: [
-				/* @__PURE__ */ o("h1", {
+			/* @__PURE__ */ o("div", { children: [
+				/* @__PURE__ */ a("h1", {
 					className: "text-2xl font-semibold",
-					children: /* @__PURE__ */ o(h, { children: "Learning Analytics" })
+					children: /* @__PURE__ */ a(p, { children: "Learning Analytics" })
 				}),
-				/* @__PURE__ */ o("p", {
+				/* @__PURE__ */ a("p", {
 					className: "text-sm text-text-secondary",
 					children: "Training metrics and engagement insights"
 				}),
-				/* @__PURE__ */ o(g, {
+				/* @__PURE__ */ a(h, {
 					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."
 				})
 			] }),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ o("div", {
 				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4",
 				children: [
-					/* @__PURE__ */ s(m, {
+					/* @__PURE__ */ o(f, {
 						treatment: "glass",
 						glow: !0,
 						className: "border-border-seam",
-						children: [/* @__PURE__ */ s(f, {
+						children: [/* @__PURE__ */ o(u, {
 							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ o(p, {
+							children: [/* @__PURE__ */ a(d, {
 								className: "text-sm font-medium",
 								children: "Total Enrollments"
-							}), /* @__PURE__ */ o(a, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o("div", {
+							}), /* @__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: y
+							children: w
 						}) })]
 					}),
-					/* @__PURE__ */ s(m, {
+					/* @__PURE__ */ o(f, {
 						treatment: "metric",
 						className: "border-border-seam",
-						children: [/* @__PURE__ */ s(f, {
+						children: [/* @__PURE__ */ o(u, {
 							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ o(p, {
+							children: [/* @__PURE__ */ a(d, {
 								className: "text-sm font-medium",
 								children: "Completions"
-							}), /* @__PURE__ */ o(r, { className: "h-4 w-4 text-status-success-text" })]
-						}), /* @__PURE__ */ s(u, { children: [/* @__PURE__ */ o("div", {
+							}), /* @__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: b
-						}), /* @__PURE__ */ s("p", {
+							children: T
+						}), /* @__PURE__ */ o("p", {
 							className: "text-xs text-text-secondary",
-							children: [Math.round(b / Math.max(y, 1) * 100), "% rate"]
+							children: [w > 0 ? Math.round(T / w * 100) : 0, "% rate"]
 						})] })]
 					}),
-					/* @__PURE__ */ s(m, {
+					/* @__PURE__ */ o(f, {
 						treatment: "metric",
 						className: "border-border-seam",
-						children: [/* @__PURE__ */ s(f, {
+						children: [/* @__PURE__ */ o(u, {
 							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ o(p, {
+							children: [/* @__PURE__ */ a(d, {
 								className: "text-sm font-medium",
 								children: "Avg Rating"
-							}), /* @__PURE__ */ o(i, { className: "h-4 w-4 text-status-warning-text" })]
-						}), /* @__PURE__ */ o(u, { children: /* @__PURE__ */ s("div", {
+							}), /* @__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: [x, "/5"]
+							children: [D, "/5"]
 						}) })]
 					}),
-					/* @__PURE__ */ s(m, {
+					/* @__PURE__ */ o(f, {
 						treatment: "metric",
 						className: "border-border-seam",
-						children: [/* @__PURE__ */ s(f, {
+						children: [/* @__PURE__ */ o(u, {
 							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ o(p, {
+							children: [/* @__PURE__ */ a(d, {
 								className: "text-sm font-medium",
-								children: "Training Hours"
-							}), /* @__PURE__ */ o(n, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ s(u, { children: [/* @__PURE__ */ o("div", {
+								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: w.toLocaleString()
+							children: E
 						}), /* @__PURE__ */ o("p", {
 							className: "text-xs text-text-secondary",
-							children: "Recent 6-month trend"
+							children: [
+								"of ",
+								y.length,
+								" total"
+							]
 						})] })]
 					})
 				]
 			}),
-			/* @__PURE__ */ s(l, { children: [/* @__PURE__ */ s(f, { children: [/* @__PURE__ */ o(p, { children: "Monthly Training Activity" }), /* @__PURE__ */ o(d, { children: "Hours and completions over time" })] }), /* @__PURE__ */ o(u, {
-				className: "space-y-3",
-				children: S.map((e) => /* @__PURE__ */ s("div", {
-					className: "flex items-center gap-3",
-					children: [
-						/* @__PURE__ */ o("span", {
-							className: "w-10 text-sm text-text-secondary",
-							children: e.month
-						}),
-						/* @__PURE__ */ o("div", {
-							className: "h-4 flex-1 overflow-hidden rounded bg-bg-sunken",
-							children: /* @__PURE__ */ o("div", {
-								className: "h-4 rounded bg-action-primary-bg",
-								style: { width: `${Math.round(e.hours / C * 100)}%` }
-							})
-						}),
-						/* @__PURE__ */ s("span", {
-							className: "w-16 text-right text-sm font-medium",
-							children: [e.hours, "h"]
-						}),
-						/* @__PURE__ */ s(c, {
-							variant: "default",
-							className: "text-[10px]",
-							children: [e.completions, " done"]
-						})
-					]
-				}, `${e.month}-${e.hours}`))
-			})] }),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ o("div", {
 				className: "grid gap-4 md:grid-cols-2",
-				children: [/* @__PURE__ */ s(l, { children: [/* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(p, { children: "Category Distribution" }) }), /* @__PURE__ */ o(u, {
+				children: [/* @__PURE__ */ o(c, { children: [/* @__PURE__ */ a(u, { children: /* @__PURE__ */ a(d, { children: "Category Distribution" }) }), /* @__PURE__ */ a(l, {
 					className: "space-y-3",
-					children: Object.entries(T).sort(([, e], [, t]) => t - e).map(([e, t]) => /* @__PURE__ */ s("div", {
+					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__ */ o("span", {
+						children: [/* @__PURE__ */ a("span", {
 							className: "text-sm",
 							children: e
-						}), /* @__PURE__ */ s("div", {
+						}), /* @__PURE__ */ o("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ o("span", {
+							children: [/* @__PURE__ */ a("span", {
 								className: "text-sm font-medium",
 								children: t
-							}), /* @__PURE__ */ s(c, {
+							}), /* @__PURE__ */ o(s, {
 								variant: "outline",
 								className: "text-[10px]",
-								children: [Math.round(t / Math.max(y, 1) * 100), "%"]
+								children: [w > 0 ? Math.round(t / w * 100) : 0, "%"]
 							})]
 						})]
 					}, e))
-				})] }), /* @__PURE__ */ s(l, { children: [/* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(p, { children: "Course Performance" }) }), /* @__PURE__ */ s(u, { children: [/* @__PURE__ */ s("div", {
-					className: "mb-2 grid grid-cols-4 gap-2 border-b pb-2 text-xs font-medium text-text-secondary",
-					children: [
-						/* @__PURE__ */ o("span", { children: "Course" }),
-						/* @__PURE__ */ o("span", {
-							className: "text-right",
-							children: "Enrolled"
-						}),
-						/* @__PURE__ */ o("span", {
-							className: "text-right",
-							children: "Completed"
-						}),
-						/* @__PURE__ */ o("span", {
-							className: "text-right",
-							children: "Rating"
-						})
-					]
-				}), v.map((e) => /* @__PURE__ */ s("div", {
-					className: "grid grid-cols-4 gap-2 border-b py-2 text-sm last:border-0",
-					children: [
-						/* @__PURE__ */ o("span", {
-							className: "truncate font-medium",
-							children: e.title
-						}),
-						/* @__PURE__ */ o("span", {
-							className: "text-right",
-							children: e.enrolled
-						}),
-						/* @__PURE__ */ o("span", {
-							className: "text-right",
-							children: e.completed
-						}),
-						/* @__PURE__ */ s("div", {
-							className: "flex items-center justify-end gap-1",
-							children: [/* @__PURE__ */ o(i, { className: "h-3 w-3 text-status-warning-text" }), e.rating]
+				})] }), /* @__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."
 						})
-					]
-				}, e.id))] })] })]
+					}), y.length > x && /* @__PURE__ */ a(g, {
+						page: b,
+						pageSize: x,
+						totalItems: y.length,
+						onPageChange: C
+					})]
+				})] })]
 			})
 		]
 	});
 }
 //#endregion
-export { v as LearningLearningAnalyticsPagePage };
+export { y 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 { useMemo } from 'react';\nimport { Clock, GraduationCap, Star, Users } from 'lucide-react';\nimport {\n  Badge,\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n  GlassCard,\n  GradientText,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\n\ntype MonthlyLearning = {\n  month: string;\n  hours: number;\n  completions: number;\n  enrollments: number;\n};\n\nconst BASE_TS = new Date('2026-03-01T00:00:00Z').getTime();\n\nexport function LearningLearningAnalyticsPagePage() {\n  const { courses } = useCrewFoundryStore();\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 avgRating = (\n    courses.reduce((sum, course) => sum + course.rating, 0) / Math.max(courses.length, 1)\n  ).toFixed(1);\n\n  const monthlyLearning = useMemo<MonthlyLearning[]>(() => {\n    return courses.slice(0, 6).map((course, index) => {\n      const month = new Date(BASE_TS - (5 - index) * 86400000 * 30).toLocaleString('en-US', {\n        month: 'short',\n      });\n      return {\n        month,\n        hours: Math.round((course.completed + Math.max(course.modules, 1)) * 2.2),\n        completions: course.completed,\n        enrollments: course.enrolled,\n      };\n    });\n  }, [courses]);\n\n  const maxHours = Math.max(1, ...monthlyLearning.map((item) => item.hours));\n  const totalHours = monthlyLearning.reduce((sum, item) => sum + item.hours, 0);\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\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\">See how learning is landing across your organization — completion rates, popular courses, and skill growth to guide your L&D strategy.</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              {Math.round((totalCompleted / Math.max(totalEnrolled, 1)) * 100)}% 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\">Training Hours</CardTitle>\n            <Clock className=\"h-4 w-4 text-text-secondary\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold tabular-nums\">{totalHours.toLocaleString()}</div>\n            <p className=\"text-xs text-text-secondary\">Recent 6-month trend</p>\n          </CardContent>\n        </GlassCard>\n      </div>\n\n      <Card>\n        <CardHeader>\n          <CardTitle>Monthly Training Activity</CardTitle>\n          <CardDescription>Hours and completions over time</CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-3\">\n          {monthlyLearning.map((item) => (\n            <div key={`${item.month}-${item.hours}`} className=\"flex items-center gap-3\">\n              <span className=\"w-10 text-sm text-text-secondary\">{item.month}</span>\n              <div className=\"h-4 flex-1 overflow-hidden rounded bg-bg-sunken\">\n                <div\n                  className=\"h-4 rounded bg-action-primary-bg\"\n                  style={{ width: `${Math.round((item.hours / maxHours) * 100)}%` }}\n                />\n              </div>\n              <span className=\"w-16 text-right text-sm font-medium\">{item.hours}h</span>\n              <Badge variant=\"default\" className=\"text-[10px]\">\n                {item.completions} done\n              </Badge>\n            </div>\n          ))}\n        </CardContent>\n      </Card>\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            {Object.entries(categoryDistribution)\n              .sort(([, a], [, b]) => b - a)\n              .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                      {Math.round((count / Math.max(totalEnrolled, 1)) * 100)}%\n                    </Badge>\n                  </div>\n                </div>\n              ))}\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Course Performance</CardTitle>\n          </CardHeader>\n          <CardContent>\n            <div className=\"mb-2 grid grid-cols-4 gap-2 border-b pb-2 text-xs font-medium text-text-secondary\">\n              <span>Course</span>\n              <span className=\"text-right\">Enrolled</span>\n              <span className=\"text-right\">Completed</span>\n              <span className=\"text-right\">Rating</span>\n            </div>\n            {courses.map((course) => (\n              <div\n                key={course.id}\n                className=\"grid grid-cols-4 gap-2 border-b py-2 text-sm last:border-0\"\n              >\n                <span className=\"truncate font-medium\">{course.title}</span>\n                <span className=\"text-right\">{course.enrolled}</span>\n                <span className=\"text-right\">{course.completed}</span>\n                <div className=\"flex items-center justify-end gap-1\">\n                  <Star className=\"h-3 w-3 text-status-warning-text\" />\n                  {course.rating}\n                </div>\n              </div>\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 { 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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"}