@burdenoff/microfe-crewfoundry 2026.703.2 → 2026.704.1

package/dist/crewfoundry/pages/LearningCourseLearningPagePage.js

@@ -1,123 +1,127 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
-import { useMemo as t } from "react";
-import { CheckCircle as n, Clock as r, Play as i } from "lucide-react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Badge as s, Button as c, Card as l, CardContent as u, CardHeader as d, CardTitle as f, GlassCard as p, GradientText as m, PagePurpose as h } from "@burdenoff/fe-libs/ui";
+import { BookOpen as t, Clock as n, GraduationCap as r, Users as i } from "lucide-react";
+import { useNavigate as a, useSearchParams as o } from "react-router-dom";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Badge as l, Button as u, Card as d, CardContent as f, GlassCard as p, GradientText as m, IllustratedEmptyState as h, PagePurpose as g } from "@burdenoff/fe-libs/ui";
 //#region src/crewfoundry/pages/LearningCourseLearningPagePage.tsx
-function g() {
-	let { courses: g } = e(), _ = g[0], v = t(() => {
-		let e = Math.max(_?.modules || 0, 6);
-		return Array.from({ length: e }, (e, t) => {
-			let n = t < 2 ? "completed" : t === 2 ? "in_progress" : "locked";
-			return {
-				id: `module-${t + 1}`,
-				title: `${_?.title || "Learning"} Module ${t + 1}`,
-				duration: `${25 + t % 4 * 10} min`,
-				status: n
-			};
-		});
-	}, [_]), y = v.filter((e) => e.status === "completed").length, b = Math.round(y / Math.max(v.length, 1) * 100);
-	return /* @__PURE__ */ o("div", {
+function _() {
+	let _ = a(), [v] = o(), { courses: y } = e(), b = v.get("id"), x = b ? y.find((e) => e.id === b) : y[0];
+	return x ? /* @__PURE__ */ c("div", {
 		className: "max-w-3xl space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ o("div", { children: [
-				/* @__PURE__ */ a("h1", {
-					className: "text-2xl font-semibold",
-					children: /* @__PURE__ */ a(m, { children: _?.title || "Leadership Fundamentals for Tech Managers" })
+			/* @__PURE__ */ c("div", { children: [
+				/* @__PURE__ */ c("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ s("h1", {
+						className: "text-2xl font-semibold",
+						children: /* @__PURE__ */ s(m, { children: x.title })
+					}), /* @__PURE__ */ s(l, {
+						variant: x.level === "beginner" ? "secondary" : x.level === "intermediate" ? "default" : "destructive",
+						children: x.level
+					})]
 				}),
-				/* @__PURE__ */ o("p", {
+				/* @__PURE__ */ c("p", {
 					className: "text-sm text-text-secondary",
 					children: [
 						"by ",
-						_?.instructor || "CrewFoundry Academy",
-						" · Module ",
-						y + 1,
-						" of",
-						" ",
-						v.length
+						x.instructor,
+						" · ",
+						x.category
 					]
 				}),
-				/* @__PURE__ */ a(h, {
+				/* @__PURE__ */ s(g, {
 					className: "mt-1",
 					children: "Work through a course lesson-by-lesson — track your progress and complete modules to build the skill at hand."
 				})
 			] }),
-			/* @__PURE__ */ a(p, {
+			/* @__PURE__ */ c("div", {
+				className: "grid gap-4 sm:grid-cols-3",
+				children: [
+					/* @__PURE__ */ s(d, { children: /* @__PURE__ */ c(f, {
+						className: "p-4 text-center",
+						children: [
+							/* @__PURE__ */ s(t, { className: "mx-auto mb-1 h-5 w-5 text-text-secondary" }),
+							/* @__PURE__ */ s("p", {
+								className: "text-lg font-bold",
+								children: x.modules
+							}),
+							/* @__PURE__ */ s("p", {
+								className: "text-xs text-text-secondary",
+								children: "Modules"
+							})
+						]
+					}) }),
+					/* @__PURE__ */ s(d, { children: /* @__PURE__ */ c(f, {
+						className: "p-4 text-center",
+						children: [
+							/* @__PURE__ */ s(n, { className: "mx-auto mb-1 h-5 w-5 text-text-secondary" }),
+							/* @__PURE__ */ s("p", {
+								className: "text-lg font-bold",
+								children: x.duration
+							}),
+							/* @__PURE__ */ s("p", {
+								className: "text-xs text-text-secondary",
+								children: "Duration"
+							})
+						]
+					}) }),
+					/* @__PURE__ */ s(d, { children: /* @__PURE__ */ c(f, {
+						className: "p-4 text-center",
+						children: [
+							/* @__PURE__ */ s(i, { className: "mx-auto mb-1 h-5 w-5 text-text-secondary" }),
+							/* @__PURE__ */ s("p", {
+								className: "text-lg font-bold",
+								children: x.enrolled
+							}),
+							/* @__PURE__ */ s("p", {
+								className: "text-xs text-text-secondary",
+								children: "Enrolled"
+							})
+						]
+					}) })
+				]
+			}),
+			/* @__PURE__ */ s(p, {
 				treatment: "glass",
 				glow: !0,
 				className: "border-border-seam",
-				children: /* @__PURE__ */ o(u, {
-					className: "p-4",
-					children: [
-						/* @__PURE__ */ o("div", {
-							className: "mb-2 flex items-center justify-between",
-							children: [/* @__PURE__ */ a("span", {
-								className: "text-sm font-medium",
-								children: "Progress"
-							}), /* @__PURE__ */ o("span", {
-								className: "text-sm",
-								children: [b, "%"]
+				children: /* @__PURE__ */ s(f, {
+					className: "p-6",
+					children: /* @__PURE__ */ s(h, {
+						illustration: "empty-generic",
+						title: "Interactive lessons are coming soon",
+						description: "The lesson player and per-module progress tracking are being built. In the meantime you can enroll from the course page and review what this course covers.",
+						action: /* @__PURE__ */ c("div", {
+							className: "flex flex-wrap justify-center gap-2",
+							children: [/* @__PURE__ */ c(u, {
+								variant: "outline",
+								onClick: () => _(`../../learning/course-details-page?id=${encodeURIComponent(x.id)}`),
+								children: [/* @__PURE__ */ s(r, { className: "mr-1 h-4 w-4" }), "Course details"]
+							}), /* @__PURE__ */ s(u, {
+								variant: "outline",
+								onClick: () => _("../../learning/my-learning-page"),
+								children: "My learning"
 							})]
-						}),
-						/* @__PURE__ */ a("div", {
-							className: "h-3 overflow-hidden rounded bg-bg-sunken",
-							children: /* @__PURE__ */ a("div", {
-								className: "h-3 rounded bg-action-primary-bg",
-								style: { width: `${b}%` }
-							})
-						}),
-						/* @__PURE__ */ o("p", {
-							className: "mt-1 text-xs text-text-secondary",
-							children: [
-								y,
-								" of ",
-								v.length,
-								" modules completed"
-							]
 						})
-					]
+					})
 				})
-			}),
-			/* @__PURE__ */ o(l, { children: [/* @__PURE__ */ a(d, { children: /* @__PURE__ */ a(f, { children: "Course Modules" }) }), /* @__PURE__ */ a(u, {
-				className: "space-y-2",
-				children: v.map((e, t) => /* @__PURE__ */ o("div", {
-					className: `flex items-center gap-3 rounded border p-3 ${e.status === "locked" ? "opacity-50" : ""}`,
-					children: [
-						/* @__PURE__ */ a("div", {
-							className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-bg-sunken text-xs font-bold",
-							children: e.status === "completed" ? /* @__PURE__ */ a(n, { className: "h-5 w-5 text-status-success-text" }) : t + 1
-						}),
-						/* @__PURE__ */ o("div", {
-							className: "flex-1",
-							children: [/* @__PURE__ */ a("p", {
-								className: `text-sm ${e.status === "completed" ? "text-text-secondary line-through" : "font-medium"}`,
-								children: e.title
-							}), /* @__PURE__ */ o("p", {
-								className: "flex items-center gap-1 text-xs text-text-secondary",
-								children: [/* @__PURE__ */ a(r, { className: "h-3 w-3" }), e.duration]
-							})]
-						}),
-						e.status === "in_progress" ? /* @__PURE__ */ o(c, {
-							size: "sm",
-							children: [/* @__PURE__ */ a(i, { className: "mr-1 h-3 w-3" }), "Continue"]
-						}) : null,
-						e.status === "completed" ? /* @__PURE__ */ a(s, {
-							variant: "default",
-							className: "text-[10px]",
-							children: "Completed"
-						}) : null,
-						e.status === "locked" ? /* @__PURE__ */ a(s, {
-							variant: "secondary",
-							className: "text-[10px]",
-							children: "Locked"
-						}) : null
-					]
-				}, e.id))
-			})] })
+			})
 		]
+	}) : /* @__PURE__ */ s("div", {
+		className: "p-6",
+		children: /* @__PURE__ */ s(h, {
+			illustration: "empty-search",
+			title: "Course not found",
+			description: "This course is no longer available.",
+			action: /* @__PURE__ */ s(u, {
+				variant: "outline",
+				onClick: () => _("../../learning/courses-page"),
+				children: "Browse courses"
+			})
+		})
 	});
 }
 //#endregion
-export { g as LearningCourseLearningPagePage };
+export { _ as LearningCourseLearningPagePage };
 
 //# sourceMappingURL=LearningCourseLearningPagePage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LearningCourseLearningPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/LearningCourseLearningPagePage.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  GlassCard,\n  GradientText,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { CheckCircle, Clock, Play } from 'lucide-react';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\n\ntype CourseModule = {\n  id: string;\n  title: string;\n  duration: string;\n  status: 'completed' | 'in_progress' | 'locked';\n};\n\nexport function LearningCourseLearningPagePage() {\n  const { courses } = useCrewFoundryStore();\n\n  const currentCourse = courses[0];\n\n  const courseModules = useMemo<CourseModule[]>(() => {\n    const moduleCount = Math.max(currentCourse?.modules || 0, 6);\n    return Array.from({ length: moduleCount }, (_, index) => {\n      const status: CourseModule['status'] =\n        index < 2 ? 'completed' : index === 2 ? 'in_progress' : 'locked';\n      return {\n        id: `module-${index + 1}`,\n        title: `${currentCourse?.title || 'Learning'} Module ${index + 1}`,\n        duration: `${25 + (index % 4) * 10} min`,\n        status,\n      };\n    });\n  }, [currentCourse]);\n\n  const completedCount = courseModules.filter((module) => module.status === 'completed').length;\n  const progress = Math.round((completedCount / Math.max(courseModules.length, 1)) * 100);\n\n  return (\n    <div className=\"max-w-3xl space-y-6 p-6\">\n      <div>\n        <h1 className=\"text-2xl font-semibold\">\n          <GradientText>\n            {currentCourse?.title || 'Leadership Fundamentals for Tech Managers'}\n          </GradientText>\n        </h1>\n        <p className=\"text-sm text-text-secondary\">\n          by {currentCourse?.instructor || 'CrewFoundry Academy'} · Module {completedCount + 1} of{' '}\n          {courseModules.length}\n        </p>\n        <PagePurpose className=\"mt-1\">Work through a course lesson-by-lesson — track your progress and complete modules to build the skill at hand.</PagePurpose>\n      </div>\n\n      <GlassCard treatment=\"glass\" glow className=\"border-border-seam\">\n        <CardContent className=\"p-4\">\n          <div className=\"mb-2 flex items-center justify-between\">\n            <span className=\"text-sm font-medium\">Progress</span>\n            <span className=\"text-sm\">{progress}%</span>\n          </div>\n          <div className=\"h-3 overflow-hidden rounded bg-bg-sunken\">\n            <div className=\"h-3 rounded bg-action-primary-bg\" style={{ width: `${progress}%` }} />\n          </div>\n          <p className=\"mt-1 text-xs text-text-secondary\">\n            {completedCount} of {courseModules.length} modules completed\n          </p>\n        </CardContent>\n      </GlassCard>\n\n      <Card>\n        <CardHeader>\n          <CardTitle>Course Modules</CardTitle>\n        </CardHeader>\n        <CardContent className=\"space-y-2\">\n          {courseModules.map((module, index) => (\n            <div\n              key={module.id}\n              className={`flex items-center gap-3 rounded border p-3 ${module.status === 'locked' ? 'opacity-50' : ''}`}\n            >\n              <div className=\"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-bg-sunken text-xs font-bold\">\n                {module.status === 'completed' ? (\n                  <CheckCircle className=\"h-5 w-5 text-status-success-text\" />\n                ) : (\n                  index + 1\n                )}\n              </div>\n              <div className=\"flex-1\">\n                <p\n                  className={`text-sm ${module.status === 'completed' ? 'text-text-secondary line-through' : 'font-medium'}`}\n                >\n                  {module.title}\n                </p>\n                <p className=\"flex items-center gap-1 text-xs text-text-secondary\">\n                  <Clock className=\"h-3 w-3\" />\n                  {module.duration}\n                </p>\n              </div>\n              {module.status === 'in_progress' ? (\n                <Button size=\"sm\">\n                  <Play className=\"mr-1 h-3 w-3\" />\n                  Continue\n                </Button>\n              ) : null}\n              {module.status === 'completed' ? (\n                <Badge variant=\"default\" className=\"text-[10px]\">\n                  Completed\n                </Badge>\n              ) : null}\n              {module.status === 'locked' ? (\n                <Badge variant=\"secondary\" className=\"text-[10px]\">\n                  Locked\n                </Badge>\n              ) : null}\n            </div>\n          ))}\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAsBA,SAAgB,IAAiC;CAC/C,IAAM,EAAE,eAAY,GAAqB,EAEnC,IAAgB,EAAQ,IAExB,IAAgB,QAA8B;EAClD,IAAM,IAAc,KAAK,IAAI,GAAe,WAAW,GAAG,EAAE;AAC5D,SAAO,MAAM,KAAK,EAAE,QAAQ,GAAa,GAAG,GAAG,MAAU;GACvD,IAAM,IACJ,IAAQ,IAAI,cAAc,MAAU,IAAI,gBAAgB;AAC1D,UAAO;IACL,IAAI,UAAU,IAAQ;IACtB,OAAO,GAAG,GAAe,SAAS,WAAW,UAAU,IAAQ;IAC/D,UAAU,GAAG,KAAM,IAAQ,IAAK,GAAG;IACnC;IACD;IACD;IACD,CAAC,EAAc,CAAC,EAEb,IAAiB,EAAc,QAAQ,MAAW,EAAO,WAAW,YAAY,CAAC,QACjF,IAAW,KAAK,MAAO,IAAiB,KAAK,IAAI,EAAc,QAAQ,EAAE,GAAI,IAAI;AAEvF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD,EAAA,UAAA;IACE,kBAAC,MAAD;KAAI,WAAU;eACZ,kBAAC,GAAD,EAAA,UACG,GAAe,SAAS,6CACZ,CAAA;KACZ,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eAAb;MAA2C;MACrC,GAAe,cAAc;MAAsB;MAAW,IAAiB;MAAE;MAAI;MACxF,EAAc;MACb;;IACJ,kBAAC,GAAD;KAAa,WAAU;eAAO;KAA2H,CAAA;IACrJ,EAAA,CAAA;GAEN,kBAAC,GAAD;IAAW,WAAU;IAAQ,MAAA;IAAK,WAAU;cAC1C,kBAAC,GAAD;KAAa,WAAU;eAAvB;MACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QAAM,WAAU;kBAAsB;QAAe,CAAA,EACrD,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CAA2B,GAAS,IAAQ;UACxC;;MACN,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,OAAD;QAAK,WAAU;QAAmC,OAAO,EAAE,OAAO,GAAG,EAAS,IAAI;QAAI,CAAA;OAClF,CAAA;MACN,kBAAC,KAAD;OAAG,WAAU;iBAAb;QACG;QAAe;QAAK,EAAc;QAAO;QACxC;;MACQ;;IACJ,CAAA;GAEZ,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAW,kBAA0B,CAAA,EAC1B,CAAA,EACb,kBAAC,GAAD;IAAa,WAAU;cACpB,EAAc,KAAK,GAAQ,MAC1B,kBAAC,OAAD;KAEE,WAAW,8CAA8C,EAAO,WAAW,WAAW,eAAe;eAFvG;MAIE,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAO,WAAW,cACjB,kBAAC,GAAD,EAAa,WAAU,oCAAqC,CAAA,GAE5D,IAAQ;OAEN,CAAA;MACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QACE,WAAW,WAAW,EAAO,WAAW,cAAc,qCAAqC;kBAE1F,EAAO;QACN,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAAb,CACE,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA,EAC5B,EAAO,SACN;UACA;;MACL,EAAO,WAAW,gBACjB,kBAAC,GAAD;OAAQ,MAAK;iBAAb,CACE,kBAAC,GAAD,EAAM,WAAU,gBAAiB,CAAA,EAAA,WAE1B;WACP;MACH,EAAO,WAAW,cACjB,kBAAC,GAAD;OAAO,SAAQ;OAAU,WAAU;iBAAc;OAEzC,CAAA,GACN;MACH,EAAO,WAAW,WACjB,kBAAC,GAAD;OAAO,SAAQ;OAAY,WAAU;iBAAc;OAE3C,CAAA,GACN;MACA;OArCC,EAAO,GAqCR,CACN;IACU,CAAA,CACT,EAAA,CAAA;GACH"}
+{"version":3,"file":"LearningCourseLearningPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/LearningCourseLearningPagePage.tsx"],"sourcesContent":["import {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  GlassCard,\n  GradientText,\n  IllustratedEmptyState,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { BookOpen, Clock, GraduationCap, Users } from 'lucide-react';\nimport { useNavigate, useSearchParams } from 'react-router-dom';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\n\nexport function LearningCourseLearningPagePage() {\n  const navigate = useNavigate();\n  const [searchParams] = useSearchParams();\n  const { courses } = useCrewFoundryStore();\n\n  const courseId = searchParams.get('id');\n  const course = courseId ? courses.find((c) => c.id === courseId) : courses[0];\n\n  if (!course) {\n    return (\n      <div className=\"p-6\">\n        <IllustratedEmptyState\n          illustration=\"empty-search\"\n          title=\"Course not found\"\n          description=\"This course is no longer available.\"\n          action={\n            <Button variant=\"outline\" onClick={() => navigate('../../learning/courses-page')}>\n              Browse courses\n            </Button>\n          }\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"max-w-3xl space-y-6 p-6\">\n      <div>\n        <div className=\"flex items-center gap-2\">\n          <h1 className=\"text-2xl font-semibold\">\n            <GradientText>{course.title}</GradientText>\n          </h1>\n          <Badge\n            variant={\n              course.level === 'beginner'\n                ? 'secondary'\n                : course.level === 'intermediate'\n                  ? 'default'\n                  : 'destructive'\n            }\n          >\n            {course.level}\n          </Badge>\n        </div>\n        <p className=\"text-sm text-text-secondary\">\n          by {course.instructor} · {course.category}\n        </p>\n        <PagePurpose className=\"mt-1\">\n          Work through a course lesson-by-lesson — track your progress and complete modules to build\n          the skill at hand.\n        </PagePurpose>\n      </div>\n\n      <div className=\"grid gap-4 sm:grid-cols-3\">\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <BookOpen className=\"mx-auto mb-1 h-5 w-5 text-text-secondary\" />\n            <p className=\"text-lg font-bold\">{course.modules}</p>\n            <p className=\"text-xs text-text-secondary\">Modules</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Clock className=\"mx-auto mb-1 h-5 w-5 text-text-secondary\" />\n            <p className=\"text-lg font-bold\">{course.duration}</p>\n            <p className=\"text-xs text-text-secondary\">Duration</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Users className=\"mx-auto mb-1 h-5 w-5 text-text-secondary\" />\n            <p className=\"text-lg font-bold\">{course.enrolled}</p>\n            <p className=\"text-xs text-text-secondary\">Enrolled</p>\n          </CardContent>\n        </Card>\n      </div>\n\n      <GlassCard treatment=\"glass\" glow className=\"border-border-seam\">\n        <CardContent className=\"p-6\">\n          <IllustratedEmptyState\n            illustration=\"empty-generic\"\n            title=\"Interactive lessons are coming soon\"\n            description=\"The lesson player and per-module progress tracking are being built. In the meantime you can enroll from the course page and review what this course covers.\"\n            action={\n              <div className=\"flex flex-wrap justify-center gap-2\">\n                <Button\n                  variant=\"outline\"\n                  onClick={() =>\n                    navigate(\n                      `../../learning/course-details-page?id=${encodeURIComponent(course.id)}`\n                    )\n                  }\n                >\n                  <GraduationCap className=\"mr-1 h-4 w-4\" />\n                  Course details\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  onClick={() => navigate('../../learning/my-learning-page')}\n                >\n                  My learning\n                </Button>\n              </div>\n            }\n          />\n        </CardContent>\n      </GlassCard>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAcA,SAAgB,IAAiC;CAC/C,IAAM,IAAW,GAAa,EACxB,CAAC,KAAgB,GAAiB,EAClC,EAAE,eAAY,GAAqB,EAEnC,IAAW,EAAa,IAAI,KAAK,EACjC,IAAS,IAAW,EAAQ,MAAM,MAAM,EAAE,OAAO,EAAS,GAAG,EAAQ;AAmB3E,QAjBK,IAkBH,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD,EAAA,UAAA;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBACZ,kBAAC,GAAD,EAAA,UAAe,EAAO,OAAqB,CAAA;MACxC,CAAA,EACL,kBAAC,GAAD;MACE,SACE,EAAO,UAAU,aACb,cACA,EAAO,UAAU,iBACf,YACA;gBAGP,EAAO;MACF,CAAA,CACJ;;IACN,kBAAC,KAAD;KAAG,WAAU;eAAb;MAA2C;MACrC,EAAO;MAAW;MAAI,EAAO;MAC/B;;IACJ,kBAAC,GAAD;KAAa,WAAU;eAAO;KAGhB,CAAA;IACV,EAAA,CAAA;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;MAAa,WAAU;gBAAvB;OACE,kBAAC,GAAD,EAAU,WAAU,4CAA6C,CAAA;OACjE,kBAAC,KAAD;QAAG,WAAU;kBAAqB,EAAO;QAAY,CAAA;OACrD,kBAAC,KAAD;QAAG,WAAU;kBAA8B;QAAW,CAAA;OAC1C;SACT,CAAA;KACP,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;MAAa,WAAU;gBAAvB;OACE,kBAAC,GAAD,EAAO,WAAU,4CAA6C,CAAA;OAC9D,kBAAC,KAAD;QAAG,WAAU;kBAAqB,EAAO;QAAa,CAAA;OACtD,kBAAC,KAAD;QAAG,WAAU;kBAA8B;QAAY,CAAA;OAC3C;SACT,CAAA;KACP,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;MAAa,WAAU;gBAAvB;OACE,kBAAC,GAAD,EAAO,WAAU,4CAA6C,CAAA;OAC9D,kBAAC,KAAD;QAAG,WAAU;kBAAqB,EAAO;QAAa,CAAA;OACtD,kBAAC,KAAD;QAAG,WAAU;kBAA8B;QAAY,CAAA;OAC3C;SACT,CAAA;KACH;;GAEN,kBAAC,GAAD;IAAW,WAAU;IAAQ,MAAA;IAAK,WAAU;cAC1C,kBAAC,GAAD;KAAa,WAAU;eACrB,kBAAC,GAAD;MACE,cAAa;MACb,OAAM;MACN,aAAY;MACZ,QACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD;QACE,SAAQ;QACR,eACE,EACE,yCAAyC,mBAAmB,EAAO,GAAG,GACvE;kBALL,CAQE,kBAAC,GAAD,EAAe,WAAU,gBAAiB,CAAA,EAAA,iBAEnC;WACT,kBAAC,GAAD;QACE,SAAQ;QACR,eAAe,EAAS,kCAAkC;kBAC3D;QAEQ,CAAA,CACL;;MAER,CAAA;KACU,CAAA;IACJ,CAAA;GACR;MAjGJ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,cAAa;GACb,OAAM;GACN,aAAY;GACZ,QACE,kBAAC,GAAD;IAAQ,SAAQ;IAAU,eAAe,EAAS,8BAA8B;cAAE;IAEzE,CAAA;GAEX,CAAA;EACE,CAAA"}

package/dist/crewfoundry/pages/LearningCoursesPagePage.js

@@ -2,10 +2,12 @@ import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { FormModal as t, useFormModal as n } from "../components/forms/FormModal.js";
 import { useState as r } from "react";
 import { Plus as i, Search as a, Star as o, Users as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Badge as u, Button as d, CardContent as f, CardDescription as p, CardHeader as m, CardTitle as h, GlassCard as g, GradientText as _, IllustratedEmptyState as v, Input as y, PagePurpose as b } from "@burdenoff/fe-libs/ui";
+import { useNavigate as c } from "react-router-dom";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Badge as d, Button as f, CardContent as p, CardDescription as m, CardHeader as h, CardTitle as g, GlassCard as _, GradientText as v, IllustratedEmptyState as y, Input as b, PagePurpose as x, Pagination as S } from "@burdenoff/fe-libs/ui";
+import { usePagination as C } from "@burdenoff/fe-libs/shared/hooks";
 //#region src/crewfoundry/pages/LearningCoursesPagePage.tsx
-var x = [
+var w = [
 	{
 		name: "title",
 		label: "Course Title",
@@ -94,71 +96,80 @@ var x = [
 		colSpan: 2
 	}
 ];
-function S() {
-	let { courses: S, addCourse: C } = e(), [w, T] = r(""), E = n(), D = S.filter((e) => `${e.title} ${e.category} ${e.instructor}`.toLowerCase().includes(w.toLowerCase()));
-	return /* @__PURE__ */ l("div", {
+function T() {
+	let { courses: T, addCourse: E } = e(), D = c(), [O, k] = r(""), A = n(), { page: j, pageSize: M, offset: N, setPage: P } = C({ initialPageSize: 12 }), F = T.filter((e) => `${e.title} ${e.category} ${e.instructor}`.toLowerCase().includes(O.toLowerCase())), I = F.slice(N, N + M), L = (e) => D(`../course-details-page?id=${encodeURIComponent(e)}`);
+	return /* @__PURE__ */ u("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ u("div", {
 				className: "flex flex-wrap items-start justify-between gap-3",
-				children: [/* @__PURE__ */ l("div", { children: [
-					/* @__PURE__ */ c("h1", {
+				children: [/* @__PURE__ */ u("div", { children: [
+					/* @__PURE__ */ l("h1", {
 						className: "text-2xl font-semibold",
-						children: /* @__PURE__ */ c(_, { children: "Course Catalog" })
+						children: /* @__PURE__ */ l(v, { children: "Course Catalog" })
 					}),
-					/* @__PURE__ */ l("p", {
+					/* @__PURE__ */ u("p", {
 						className: "text-sm text-text-secondary",
-						children: [S.length, " courses available"]
+						children: [T.length, " courses available"]
 					}),
-					/* @__PURE__ */ c(b, {
+					/* @__PURE__ */ l(x, {
 						className: "mt-1",
 						children: "Browse the course catalog — find training to grow your team's skills and enroll in the programs that fit your goals."
 					})
-				] }), /* @__PURE__ */ l(d, {
-					onClick: () => E.openModal(),
-					children: [/* @__PURE__ */ c(i, { className: "mr-1 h-4 w-4" }), "Create Course"]
+				] }), /* @__PURE__ */ u(f, {
+					onClick: () => A.openModal(),
+					children: [/* @__PURE__ */ l(i, { className: "mr-1 h-4 w-4" }), "Create Course"]
 				})]
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ u("div", {
 				className: "relative max-w-sm",
-				children: [/* @__PURE__ */ c(a, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ c(y, {
+				children: [/* @__PURE__ */ l(a, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ l(b, {
 					placeholder: "Search courses...",
 					className: "pl-9",
-					value: w,
-					onChange: (e) => T(e.target.value)
+					value: O,
+					onChange: (e) => {
+						k(e.target.value), P(1);
+					}
 				})]
 			}),
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ l("div", {
 				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-				children: D.length === 0 ? /* @__PURE__ */ c("div", {
+				children: F.length === 0 ? /* @__PURE__ */ l("div", {
 					className: "col-span-full",
-					children: /* @__PURE__ */ c(v, {
+					children: /* @__PURE__ */ l(y, {
 						illustration: "empty-search",
 						title: "No courses found",
 						description: "Try a different search term to find training."
 					})
-				}) : D.map((e, t) => /* @__PURE__ */ l(g, {
+				}) : I.map((e, t) => /* @__PURE__ */ u(_, {
 					treatment: t === 0 ? "glass" : "plain",
 					glow: t === 0,
-					className: "hover:shadow-md transition-shadow cursor-pointer",
-					children: [/* @__PURE__ */ l(m, { children: [
-						/* @__PURE__ */ l("div", {
+					role: "button",
+					tabIndex: 0,
+					"aria-label": `View ${e.title}`,
+					onClick: () => L(e.id),
+					onKeyDown: (t) => {
+						(t.key === "Enter" || t.key === " ") && (t.preventDefault(), L(e.id));
+					},
+					className: "hover:shadow-md transition-shadow cursor-pointer focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]",
+					children: [/* @__PURE__ */ u(h, { children: [
+						/* @__PURE__ */ u("div", {
 							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ c(u, {
+							children: [/* @__PURE__ */ l(d, {
 								variant: "outline",
 								className: "text-[10px]",
 								children: e.category
-							}), /* @__PURE__ */ c(u, {
+							}), /* @__PURE__ */ l(d, {
 								variant: e.level === "beginner" ? "secondary" : e.level === "intermediate" ? "default" : "destructive",
 								className: "text-[10px]",
 								children: e.level
 							})]
 						}),
-						/* @__PURE__ */ c(h, {
+						/* @__PURE__ */ l(g, {
 							className: "text-base mt-2",
 							children: e.title
 						}),
-						/* @__PURE__ */ l(p, { children: [
+						/* @__PURE__ */ u(m, { children: [
 							e.instructor,
 							" · ",
 							e.duration,
@@ -166,49 +177,55 @@ function S() {
 							e.modules,
 							" modules"
 						] })
-					] }), /* @__PURE__ */ l(f, { children: [
-						/* @__PURE__ */ c("p", {
+					] }), /* @__PURE__ */ u(p, { children: [
+						/* @__PURE__ */ l("p", {
 							className: "text-sm text-text-secondary mb-3",
 							children: e.description
 						}),
-						/* @__PURE__ */ c("div", {
+						/* @__PURE__ */ l("div", {
 							className: "flex flex-wrap gap-1 mb-3",
-							children: e.skills.map((e) => /* @__PURE__ */ c(u, {
+							children: e.skills.map((e) => /* @__PURE__ */ l(d, {
 								variant: "outline",
 								className: "text-[9px]",
 								children: e
 							}, e))
 						}),
-						/* @__PURE__ */ l("div", {
+						/* @__PURE__ */ u("div", {
 							className: "flex items-center justify-between text-xs text-text-secondary",
 							children: [
-								/* @__PURE__ */ l("span", {
+								/* @__PURE__ */ u("span", {
 									className: "flex items-center gap-1",
-									children: [/* @__PURE__ */ c(o, { className: "h-3 w-3 text-status-warning-text" }), e.rating]
+									children: [/* @__PURE__ */ l(o, { className: "h-3 w-3 text-status-warning-text" }), e.rating]
 								}),
-								/* @__PURE__ */ l("span", {
+								/* @__PURE__ */ u("span", {
 									className: "flex items-center gap-1",
 									children: [
-										/* @__PURE__ */ c(s, { className: "h-3 w-3" }),
+										/* @__PURE__ */ l(s, { className: "h-3 w-3" }),
 										e.enrolled,
 										" enrolled"
 									]
 								}),
-								/* @__PURE__ */ l("span", { children: [Math.round(e.completed / e.enrolled * 100), "% completion"] })
+								/* @__PURE__ */ u("span", { children: [e.enrolled > 0 ? Math.round(e.completed / e.enrolled * 100) : 0, "% completion"] })
 							]
 						})
 					] })]
 				}, e.id))
 			}),
-			/* @__PURE__ */ c(t, {
-				open: E.open,
-				onOpenChange: E.onOpenChange,
+			F.length > M && /* @__PURE__ */ l(S, {
+				page: j,
+				pageSize: M,
+				totalItems: F.length,
+				onPageChange: P
+			}),
+			/* @__PURE__ */ l(t, {
+				open: A.open,
+				onOpenChange: A.onOpenChange,
 				title: "Create Course",
 				description: "Add a new course to the catalog.",
-				fields: x,
+				fields: w,
 				submitLabel: "Create Course",
 				onSubmit: async (e) => {
-					await C({
+					await E({
 						id: `course-${Date.now()}`,
 						title: String(e.title ?? ""),
 						category: String(e.category ?? ""),
@@ -229,6 +246,6 @@ function S() {
 	});
 }
 //#endregion
-export { S as LearningCoursesPagePage };
+export { T as LearningCoursesPagePage };
 
 //# sourceMappingURL=LearningCoursesPagePage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LearningCoursesPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/LearningCoursesPagePage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Badge,\n  Button,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n  GlassCard,\n  GradientText,\n  IllustratedEmptyState,\n  Input,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { Plus, Search, Star, Users } from 'lucide-react';\nimport { useCrewFoundryStore, type LearningCourse } from '../store/crewfoundryStore';\nimport { FormModal, useFormModal, type FieldConfig, type FormValues } from '../components/forms/FormModal';\n\nconst COURSE_FIELDS: FieldConfig[] = [\n  { name: 'title', label: 'Course Title', type: 'text', required: true, colSpan: 2 },\n  { name: 'category', label: 'Category', type: 'text', required: true },\n  { name: 'instructor', label: 'Instructor', type: 'text', required: true },\n  { name: 'duration', label: 'Duration', type: 'text', required: true, placeholder: 'e.g. 6 weeks' },\n  { name: 'modules', label: 'Modules', type: 'number', required: true, placeholder: 'e.g. 8' },\n  {\n    name: 'level',\n    label: 'Level',\n    type: 'select',\n    required: true,\n    options: [\n      { label: 'Beginner', value: 'beginner' },\n      { label: 'Intermediate', value: 'intermediate' },\n      { label: 'Advanced', value: 'advanced' },\n    ],\n  },\n  {\n    name: 'status',\n    label: 'Status',\n    type: 'select',\n    required: true,\n    options: [\n      { label: 'Active', value: 'active' },\n      { label: 'Draft', value: 'draft' },\n      { label: 'Archived', value: 'archived' },\n    ],\n  },\n  { name: 'description', label: 'Description', type: 'textarea', required: true, colSpan: 2 },\n  { name: 'skills', label: 'Skills', type: 'tags', placeholder: 'Add a skill and press Enter', colSpan: 2 },\n];\n\nexport function LearningCoursesPagePage() {\n  const { courses, addCourse } = useCrewFoundryStore();\n  const [search, setSearch] = useState('');\n  const createModal = useFormModal();\n  const filtered = courses.filter((c) =>\n    `${c.title} ${c.category} ${c.instructor}`.toLowerCase().includes(search.toLowerCase())\n  );\n\n  const handleCreate = async (values: FormValues) => {\n    await addCourse({\n      id: `course-${Date.now()}`,\n      title: String(values.title ?? ''),\n      category: String(values.category ?? ''),\n      instructor: String(values.instructor ?? ''),\n      duration: String(values.duration ?? ''),\n      level: String(values.level ?? 'beginner') as LearningCourse['level'],\n      enrolled: 0,\n      completed: 0,\n      rating: 0,\n      status: String(values.status ?? 'draft') as LearningCourse['status'],\n      description: String(values.description ?? ''),\n      modules: typeof values.modules === 'number' ? values.modules : Number(values.modules) || 0,\n      skills: Array.isArray(values.skills) ? values.skills : [],\n    });\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div className=\"flex flex-wrap items-start justify-between gap-3\">\n        <div>\n          <h1 className=\"text-2xl font-semibold\">\n            <GradientText>Course Catalog</GradientText>\n          </h1>\n          <p className=\"text-sm text-text-secondary\">{courses.length} courses available</p>\n          <PagePurpose className=\"mt-1\">Browse the course catalog — find training to grow your team&apos;s skills and enroll in the programs that fit your goals.</PagePurpose>\n        </div>\n        <Button onClick={() => createModal.openModal()}>\n          <Plus className=\"mr-1 h-4 w-4\" />\n          Create Course\n        </Button>\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 courses...\"\n          className=\"pl-9\"\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n        />\n      </div>\n      <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n        {filtered.length === 0 ? (\n          <div className=\"col-span-full\">\n            <IllustratedEmptyState illustration=\"empty-search\" title=\"No courses found\" description=\"Try a different search term to find training.\" />\n          </div>\n        ) : (\n          filtered.map((course, _idx) => (\n          <GlassCard key={course.id} treatment={_idx === 0 ? 'glass' : 'plain'} glow={_idx === 0} className=\"hover:shadow-md transition-shadow cursor-pointer\">\n            <CardHeader>\n              <div className=\"flex items-center justify-between\">\n                <Badge variant=\"outline\" className=\"text-[10px]\">\n                  {course.category}\n                </Badge>\n                <Badge\n                  variant={\n                    course.level === 'beginner'\n                      ? 'secondary'\n                      : course.level === 'intermediate'\n                        ? 'default'\n                        : 'destructive'\n                  }\n                  className=\"text-[10px]\"\n                >\n                  {course.level}\n                </Badge>\n              </div>\n              <CardTitle className=\"text-base mt-2\">{course.title}</CardTitle>\n              <CardDescription>\n                {course.instructor} · {course.duration} · {course.modules} modules\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <p className=\"text-sm text-text-secondary mb-3\">{course.description}</p>\n              <div className=\"flex flex-wrap gap-1 mb-3\">\n                {course.skills.map((s) => (\n                  <Badge key={s} variant=\"outline\" className=\"text-[9px]\">\n                    {s}\n                  </Badge>\n                ))}\n              </div>\n              <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n                <span className=\"flex items-center gap-1\">\n                  <Star className=\"h-3 w-3 text-status-warning-text\" />\n                  {course.rating}\n                </span>\n                <span className=\"flex items-center gap-1\">\n                  <Users className=\"h-3 w-3\" />\n                  {course.enrolled} enrolled\n                </span>\n                <span>{Math.round((course.completed / course.enrolled) * 100)}% completion</span>\n              </div>\n            </CardContent>\n          </GlassCard>\n        )))}\n      </div>\n\n      <FormModal\n        open={createModal.open}\n        onOpenChange={createModal.onOpenChange}\n        title=\"Create Course\"\n        description=\"Add a new course to the catalog.\"\n        fields={COURSE_FIELDS}\n        submitLabel=\"Create Course\"\n        onSubmit={handleCreate}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"LearningCoursesPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/LearningCoursesPagePage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Badge,\n  Button,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n  GlassCard,\n  GradientText,\n  IllustratedEmptyState,\n  Input,\n  PagePurpose,\n  Pagination,\n} from '@burdenoff/fe-libs/ui';\nimport { usePagination } from '@burdenoff/fe-libs/shared/hooks';\nimport { Plus, Search, Star, Users } from 'lucide-react';\nimport { useNavigate } from 'react-router-dom';\nimport { useCrewFoundryStore, type LearningCourse } from '../store/crewfoundryStore';\nimport { FormModal, useFormModal, type FieldConfig, type FormValues } from '../components/forms/FormModal';\n\nconst COURSE_FIELDS: FieldConfig[] = [\n  { name: 'title', label: 'Course Title', type: 'text', required: true, colSpan: 2 },\n  { name: 'category', label: 'Category', type: 'text', required: true },\n  { name: 'instructor', label: 'Instructor', type: 'text', required: true },\n  { name: 'duration', label: 'Duration', type: 'text', required: true, placeholder: 'e.g. 6 weeks' },\n  { name: 'modules', label: 'Modules', type: 'number', required: true, placeholder: 'e.g. 8' },\n  {\n    name: 'level',\n    label: 'Level',\n    type: 'select',\n    required: true,\n    options: [\n      { label: 'Beginner', value: 'beginner' },\n      { label: 'Intermediate', value: 'intermediate' },\n      { label: 'Advanced', value: 'advanced' },\n    ],\n  },\n  {\n    name: 'status',\n    label: 'Status',\n    type: 'select',\n    required: true,\n    options: [\n      { label: 'Active', value: 'active' },\n      { label: 'Draft', value: 'draft' },\n      { label: 'Archived', value: 'archived' },\n    ],\n  },\n  { name: 'description', label: 'Description', type: 'textarea', required: true, colSpan: 2 },\n  { name: 'skills', label: 'Skills', type: 'tags', placeholder: 'Add a skill and press Enter', colSpan: 2 },\n];\n\nexport function LearningCoursesPagePage() {\n  const { courses, addCourse } = useCrewFoundryStore();\n  const navigate = useNavigate();\n  const [search, setSearch] = useState('');\n  const createModal = useFormModal();\n  const { page, pageSize, offset, setPage } = usePagination({ initialPageSize: 12 });\n  const filtered = courses.filter((c) =>\n    `${c.title} ${c.category} ${c.instructor}`.toLowerCase().includes(search.toLowerCase())\n  );\n  const paged = filtered.slice(offset, offset + pageSize);\n  const openCourse = (id: string) =>\n    navigate(`../course-details-page?id=${encodeURIComponent(id)}`);\n\n  const handleCreate = async (values: FormValues) => {\n    await addCourse({\n      id: `course-${Date.now()}`,\n      title: String(values.title ?? ''),\n      category: String(values.category ?? ''),\n      instructor: String(values.instructor ?? ''),\n      duration: String(values.duration ?? ''),\n      level: String(values.level ?? 'beginner') as LearningCourse['level'],\n      enrolled: 0,\n      completed: 0,\n      rating: 0,\n      status: String(values.status ?? 'draft') as LearningCourse['status'],\n      description: String(values.description ?? ''),\n      modules: typeof values.modules === 'number' ? values.modules : Number(values.modules) || 0,\n      skills: Array.isArray(values.skills) ? values.skills : [],\n    });\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div className=\"flex flex-wrap items-start justify-between gap-3\">\n        <div>\n          <h1 className=\"text-2xl font-semibold\">\n            <GradientText>Course Catalog</GradientText>\n          </h1>\n          <p className=\"text-sm text-text-secondary\">{courses.length} courses available</p>\n          <PagePurpose className=\"mt-1\">Browse the course catalog — find training to grow your team&apos;s skills and enroll in the programs that fit your goals.</PagePurpose>\n        </div>\n        <Button onClick={() => createModal.openModal()}>\n          <Plus className=\"mr-1 h-4 w-4\" />\n          Create Course\n        </Button>\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 courses...\"\n          className=\"pl-9\"\n          value={search}\n          onChange={(e) => {\n            setSearch(e.target.value);\n            setPage(1);\n          }}\n        />\n      </div>\n      <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n        {filtered.length === 0 ? (\n          <div className=\"col-span-full\">\n            <IllustratedEmptyState illustration=\"empty-search\" title=\"No courses found\" description=\"Try a different search term to find training.\" />\n          </div>\n        ) : (\n          paged.map((course, _idx) => (\n          <GlassCard\n            key={course.id}\n            treatment={_idx === 0 ? 'glass' : 'plain'}\n            glow={_idx === 0}\n            role=\"button\"\n            tabIndex={0}\n            aria-label={`View ${course.title}`}\n            onClick={() => openCourse(course.id)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                openCourse(course.id);\n              }\n            }}\n            className=\"hover:shadow-md transition-shadow cursor-pointer focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]\"\n          >\n            <CardHeader>\n              <div className=\"flex items-center justify-between\">\n                <Badge variant=\"outline\" className=\"text-[10px]\">\n                  {course.category}\n                </Badge>\n                <Badge\n                  variant={\n                    course.level === 'beginner'\n                      ? 'secondary'\n                      : course.level === 'intermediate'\n                        ? 'default'\n                        : 'destructive'\n                  }\n                  className=\"text-[10px]\"\n                >\n                  {course.level}\n                </Badge>\n              </div>\n              <CardTitle className=\"text-base mt-2\">{course.title}</CardTitle>\n              <CardDescription>\n                {course.instructor} · {course.duration} · {course.modules} modules\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <p className=\"text-sm text-text-secondary mb-3\">{course.description}</p>\n              <div className=\"flex flex-wrap gap-1 mb-3\">\n                {course.skills.map((s) => (\n                  <Badge key={s} variant=\"outline\" className=\"text-[9px]\">\n                    {s}\n                  </Badge>\n                ))}\n              </div>\n              <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n                <span className=\"flex items-center gap-1\">\n                  <Star className=\"h-3 w-3 text-status-warning-text\" />\n                  {course.rating}\n                </span>\n                <span className=\"flex items-center gap-1\">\n                  <Users className=\"h-3 w-3\" />\n                  {course.enrolled} enrolled\n                </span>\n                <span>\n                  {course.enrolled > 0\n                    ? Math.round((course.completed / course.enrolled) * 100)\n                    : 0}\n                  % completion\n                </span>\n              </div>\n            </CardContent>\n          </GlassCard>\n        )))}\n      </div>\n\n      {filtered.length > pageSize && (\n        <Pagination\n          page={page}\n          pageSize={pageSize}\n          totalItems={filtered.length}\n          onPageChange={setPage}\n        />\n      )}\n\n      <FormModal\n        open={createModal.open}\n        onOpenChange={createModal.onOpenChange}\n        title=\"Create Course\"\n        description=\"Add a new course to the catalog.\"\n        fields={COURSE_FIELDS}\n        submitLabel=\"Create Course\"\n        onSubmit={handleCreate}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}