@burdenoff/microfe-crewfoundry 2026.626.1 → 2026.703.1

package/dist/crewfoundry/pages/LearningCourseDetailsPagePage.js

@@ -1,131 +1,146 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
-import { BookOpen as t, Clock as n, GraduationCap as r, Play as i, Star as a, Users as o } from "lucide-react";
-import { useNavigate as s } from "react-router-dom";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Badge as u, Button as d, Card as f, CardContent as p, CardHeader as m, CardTitle as h, EmphasisPanel as g, GradientText as _, IllustratedEmptyState as v, NextSteps as y, PagePurpose as b } from "@burdenoff/fe-libs/ui";
+import { useState as t } from "react";
+import { BookOpen as n, Clock as r, GraduationCap as i, Play as a, Star as o, Users as s } from "lucide-react";
+import { useNavigate as c } from "react-router-dom";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Badge as d, Button as f, Card as p, CardContent as m, CardHeader as h, CardTitle as g, EmphasisPanel as _, GradientText as v, IllustratedEmptyState as y, NextSteps as b, PagePurpose as x } from "@burdenoff/fe-libs/ui";
+import { useGlobalUi as S } from "@burdenoff/fe-libs/shared/providers/shell";
 //#region src/crewfoundry/pages/LearningCourseDetailsPagePage.tsx
-function x() {
-	let x = s(), { courses: S } = e(), C = S[0];
-	if (!C) return /* @__PURE__ */ c("div", {
+function C() {
+	let C = c(), { courses: w, enrollCourse: T } = e(), { showToast: E } = S(), [D, O] = t(!1), k = w[0];
+	if (!k) return /* @__PURE__ */ l("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ c(v, {
+		children: /* @__PURE__ */ l(y, {
 			illustration: "empty-search",
 			title: "Course not found",
 			description: "This course is no longer available."
 		})
 	});
-	let w = Math.round(C.completed / C.enrolled * 100);
-	return /* @__PURE__ */ l("div", {
+	let A = Math.round(k.completed / k.enrolled * 100);
+	return /* @__PURE__ */ u("div", {
 		className: "space-y-6 p-6 max-w-4xl",
 		children: [
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ u("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ l("div", { children: [
-					/* @__PURE__ */ l("div", {
+				children: [/* @__PURE__ */ u("div", { children: [
+					/* @__PURE__ */ u("div", {
 						className: "flex items-center gap-2 mb-1",
-						children: [/* @__PURE__ */ c("h1", {
+						children: [/* @__PURE__ */ l("h1", {
 							className: "text-2xl font-semibold",
-							children: /* @__PURE__ */ c(_, { children: C.title })
-						}), /* @__PURE__ */ c(u, {
-							variant: C.level === "beginner" ? "secondary" : C.level === "intermediate" ? "default" : "destructive",
-							children: C.level
+							children: /* @__PURE__ */ l(v, { children: k.title })
+						}), /* @__PURE__ */ l(d, {
+							variant: k.level === "beginner" ? "secondary" : k.level === "intermediate" ? "default" : "destructive",
+							children: k.level
 						})]
 					}),
-					/* @__PURE__ */ l("p", {
+					/* @__PURE__ */ u("p", {
 						className: "text-sm text-text-secondary",
 						children: [
 							"by ",
-							C.instructor,
+							k.instructor,
 							" · ",
-							C.category
+							k.category
 						]
 					}),
-					/* @__PURE__ */ c(b, {
+					/* @__PURE__ */ l(x, {
 						className: "mt-2",
 						children: "Everything you need to decide on and start this course — what it covers, who it's for, and how others have done — so you can enroll with confidence and build the right skills."
 					})
-				] }), /* @__PURE__ */ l(d, { children: [/* @__PURE__ */ c(i, { className: "h-4 w-4 mr-1" }), "Start Course"] })]
+				] }), /* @__PURE__ */ u(f, {
+					onClick: async () => {
+						O(!0);
+						try {
+							await T(k.id), E("Enrolled — your course is ready", "success");
+						} catch (e) {
+							E(e instanceof Error ? e.message : "Unable to enroll in course", "error");
+						} finally {
+							O(!1);
+						}
+					},
+					disabled: D,
+					children: [/* @__PURE__ */ l(a, { className: "h-4 w-4 mr-1" }), D ? "Enrolling…" : "Start Course"]
+				})]
 			}),
-			/* @__PURE__ */ c(y, {
+			/* @__PURE__ */ l(b, {
 				storageKey: "crewfoundry-course-details",
 				steps: [
 					{
 						id: "start",
 						label: "Start the first module",
 						description: "Begin learning and track your progress as you go.",
-						icon: /* @__PURE__ */ c(i, { className: "h-4 w-4" }),
-						onClick: () => x("../../learning/course-learning-page")
+						icon: /* @__PURE__ */ l(a, { className: "h-4 w-4" }),
+						onClick: () => C("../../learning/course-learning-page")
 					},
 					{
 						id: "my-learning",
 						label: "See all your learning",
 						description: "Review everything you are currently enrolled in.",
-						icon: /* @__PURE__ */ c(r, { className: "h-4 w-4" }),
-						onClick: () => x("../../learning/my-learning-page")
+						icon: /* @__PURE__ */ l(i, { className: "h-4 w-4" }),
+						onClick: () => C("../../learning/my-learning-page")
 					},
 					{
 						id: "browse",
 						label: "Browse more courses",
 						description: "Find related training to round out your skills.",
-						icon: /* @__PURE__ */ c(t, { className: "h-4 w-4" }),
-						onClick: () => x("../../learning/courses-page")
+						icon: /* @__PURE__ */ l(n, { className: "h-4 w-4" }),
+						onClick: () => C("../../learning/courses-page")
 					}
 				]
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ u("div", {
 				className: "grid gap-4 md:grid-cols-4",
 				children: [
-					/* @__PURE__ */ c(f, { children: /* @__PURE__ */ l(p, {
+					/* @__PURE__ */ l(p, { children: /* @__PURE__ */ u(m, {
 						className: "p-4 text-center",
 						children: [
-							/* @__PURE__ */ c(n, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
-							/* @__PURE__ */ c("p", {
+							/* @__PURE__ */ l(r, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
+							/* @__PURE__ */ l("p", {
 								className: "text-lg font-bold",
-								children: C.duration
+								children: k.duration
 							}),
-							/* @__PURE__ */ c("p", {
+							/* @__PURE__ */ l("p", {
 								className: "text-xs text-text-secondary",
 								children: "Duration"
 							})
 						]
 					}) }),
-					/* @__PURE__ */ c(f, { children: /* @__PURE__ */ l(p, {
+					/* @__PURE__ */ l(p, { children: /* @__PURE__ */ u(m, {
 						className: "p-4 text-center",
 						children: [
-							/* @__PURE__ */ c(t, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
-							/* @__PURE__ */ c("p", {
+							/* @__PURE__ */ l(n, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
+							/* @__PURE__ */ l("p", {
 								className: "text-lg font-bold",
-								children: C.modules
+								children: k.modules
 							}),
-							/* @__PURE__ */ c("p", {
+							/* @__PURE__ */ l("p", {
 								className: "text-xs text-text-secondary",
 								children: "Modules"
 							})
 						]
 					}) }),
-					/* @__PURE__ */ c(f, { children: /* @__PURE__ */ l(p, {
+					/* @__PURE__ */ l(p, { children: /* @__PURE__ */ u(m, {
 						className: "p-4 text-center",
 						children: [
-							/* @__PURE__ */ c(o, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
-							/* @__PURE__ */ c("p", {
+							/* @__PURE__ */ l(s, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
+							/* @__PURE__ */ l("p", {
 								className: "text-lg font-bold",
-								children: C.enrolled
+								children: k.enrolled
 							}),
-							/* @__PURE__ */ c("p", {
+							/* @__PURE__ */ l("p", {
 								className: "text-xs text-text-secondary",
 								children: "Enrolled"
 							})
 						]
 					}) }),
-					/* @__PURE__ */ c(f, { children: /* @__PURE__ */ l(p, {
+					/* @__PURE__ */ l(p, { children: /* @__PURE__ */ u(m, {
 						className: "p-4 text-center",
 						children: [
-							/* @__PURE__ */ c(a, { className: "h-5 w-5 mx-auto text-status-warning-text mb-1" }),
-							/* @__PURE__ */ l("p", {
+							/* @__PURE__ */ l(o, { className: "h-5 w-5 mx-auto text-status-warning-text mb-1" }),
+							/* @__PURE__ */ u("p", {
 								className: "text-lg font-bold",
-								children: [C.rating, "/5"]
+								children: [k.rating, "/5"]
 							}),
-							/* @__PURE__ */ c("p", {
+							/* @__PURE__ */ l("p", {
 								className: "text-xs text-text-secondary",
 								children: "Rating"
 							})
@@ -133,41 +148,41 @@ function x() {
 					}) })
 				]
 			}),
-			/* @__PURE__ */ l(g, { children: [
-				/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ u(_, { children: [
+				/* @__PURE__ */ l("div", {
 					className: "mb-2 text-lg font-semibold",
 					children: "About this Course"
 				}),
-				/* @__PURE__ */ c("p", {
+				/* @__PURE__ */ l("p", {
 					className: "text-sm text-text-secondary",
-					children: C.description
+					children: k.description
 				}),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ l("div", {
 					className: "flex flex-wrap gap-1 mt-3",
-					children: C.skills.map((e) => /* @__PURE__ */ c(u, {
+					children: k.skills.map((e) => /* @__PURE__ */ l(d, {
 						variant: "outline",
 						children: e
 					}, e))
 				})
 			] }),
-			/* @__PURE__ */ l(f, { children: [/* @__PURE__ */ c(m, { children: /* @__PURE__ */ c(h, { children: "Completion Statistics" }) }), /* @__PURE__ */ c(p, { children: /* @__PURE__ */ l("div", {
+			/* @__PURE__ */ u(p, { children: [/* @__PURE__ */ l(h, { children: /* @__PURE__ */ l(g, { children: "Completion Statistics" }) }), /* @__PURE__ */ l(m, { children: /* @__PURE__ */ u("div", {
 				className: "space-y-2",
-				children: [/* @__PURE__ */ l("div", {
+				children: [/* @__PURE__ */ u("div", {
 					className: "flex justify-between text-sm",
-					children: [/* @__PURE__ */ l("span", { children: [
-						C.completed,
+					children: [/* @__PURE__ */ u("span", { children: [
+						k.completed,
 						" of ",
-						C.enrolled,
+						k.enrolled,
 						" students completed"
-					] }), /* @__PURE__ */ l("span", {
+					] }), /* @__PURE__ */ u("span", {
 						className: "font-medium",
-						children: [w, "%"]
+						children: [A, "%"]
 					})]
-				}), /* @__PURE__ */ c("div", {
+				}), /* @__PURE__ */ l("div", {
 					className: "h-3 bg-bg-sunken rounded overflow-hidden",
-					children: /* @__PURE__ */ c("div", {
+					children: /* @__PURE__ */ l("div", {
 						className: "h-3 bg-status-success-text rounded",
-						style: { width: `${w}%` }
+						style: { width: `${A}%` }
 					})
 				})]
 			}) })] })
@@ -175,6 +190,6 @@ function x() {
 	});
 }
 //#endregion
-export { x as LearningCourseDetailsPagePage };
+export { C as LearningCourseDetailsPagePage };
 
 //# sourceMappingURL=LearningCourseDetailsPagePage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LearningCourseDetailsPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/LearningCourseDetailsPagePage.tsx"],"sourcesContent":["import {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  EmphasisPanel,\n  GradientText,\n  IllustratedEmptyState,\n  NextSteps,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { BookOpen, Clock, GraduationCap, Play, Star, Users } from 'lucide-react';\nimport { useNavigate } from 'react-router-dom';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\n\nexport function LearningCourseDetailsPagePage() {\n  const navigate = useNavigate();\n  const { courses } = useCrewFoundryStore();\n  const course = courses[0];\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        />\n      </div>\n    );\n  const completionRate = Math.round((course.completed / course.enrolled) * 100);\n\n  return (\n    <div className=\"space-y-6 p-6 max-w-4xl\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <div className=\"flex items-center gap-2 mb-1\">\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-2\">\n            Everything you need to decide on and start this course — what it covers, who it&apos;s\n            for, and how others have done — so you can enroll with confidence and build the right\n            skills.\n          </PagePurpose>\n        </div>\n        <Button>\n          <Play className=\"h-4 w-4 mr-1\" />\n          Start Course\n        </Button>\n      </div>\n\n      <NextSteps\n        storageKey=\"crewfoundry-course-details\"\n        steps={[\n          {\n            id: 'start',\n            label: 'Start the first module',\n            description: 'Begin learning and track your progress as you go.',\n            icon: <Play className=\"h-4 w-4\" />,\n            onClick: () => navigate('../../learning/course-learning-page'),\n          },\n          {\n            id: 'my-learning',\n            label: 'See all your learning',\n            description: 'Review everything you are currently enrolled in.',\n            icon: <GraduationCap className=\"h-4 w-4\" />,\n            onClick: () => navigate('../../learning/my-learning-page'),\n          },\n          {\n            id: 'browse',\n            label: 'Browse more courses',\n            description: 'Find related training to round out your skills.',\n            icon: <BookOpen className=\"h-4 w-4\" />,\n            onClick: () => navigate('../../learning/courses-page'),\n          },\n        ]}\n      />\n\n      <div className=\"grid gap-4 md:grid-cols-4\">\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Clock className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\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            <BookOpen className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\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            <Users className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\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        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Star className=\"h-5 w-5 mx-auto text-status-warning-text mb-1\" />\n            <p className=\"text-lg font-bold\">{course.rating}/5</p>\n            <p className=\"text-xs text-text-secondary\">Rating</p>\n          </CardContent>\n        </Card>\n      </div>\n      <EmphasisPanel>\n        <div className=\"mb-2 text-lg font-semibold\">About this Course</div>\n        <p className=\"text-sm text-text-secondary\">{course.description}</p>\n        <div className=\"flex flex-wrap gap-1 mt-3\">\n          {course.skills.map((s) => (\n            <Badge key={s} variant=\"outline\">\n              {s}\n            </Badge>\n          ))}\n        </div>\n      </EmphasisPanel>\n      <Card>\n        <CardHeader>\n          <CardTitle>Completion Statistics</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"space-y-2\">\n            <div className=\"flex justify-between text-sm\">\n              <span>\n                {course.completed} of {course.enrolled} students completed\n              </span>\n              <span className=\"font-medium\">{completionRate}%</span>\n            </div>\n            <div className=\"h-3 bg-bg-sunken rounded overflow-hidden\">\n              <div\n                className=\"h-3 bg-status-success-text rounded\"\n                style={{ width: `${completionRate}%` }}\n              />\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"LearningCourseDetailsPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/LearningCourseDetailsPagePage.tsx"],"sourcesContent":["import {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  EmphasisPanel,\n  GradientText,\n  IllustratedEmptyState,\n  NextSteps,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { BookOpen, Clock, GraduationCap, Play, Star, Users } from 'lucide-react';\nimport { useNavigate } from 'react-router-dom';\nimport { useState } from 'react';\nimport { useGlobalUi } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\n\nexport function LearningCourseDetailsPagePage() {\n  const navigate = useNavigate();\n  const { courses, enrollCourse } = useCrewFoundryStore();\n  const { showToast } = useGlobalUi();\n  const [enrolling, setEnrolling] = useState(false);\n  const course = courses[0];\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        />\n      </div>\n    );\n  const completionRate = Math.round((course.completed / course.enrolled) * 100);\n\n  const handleStart = async () => {\n    setEnrolling(true);\n    try {\n      await enrollCourse(course.id);\n      showToast('Enrolled — your course is ready', 'success');\n    } catch (error) {\n      showToast(error instanceof Error ? error.message : 'Unable to enroll in course', 'error');\n    } finally {\n      setEnrolling(false);\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6 max-w-4xl\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <div className=\"flex items-center gap-2 mb-1\">\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-2\">\n            Everything you need to decide on and start this course — what it covers, who it&apos;s\n            for, and how others have done — so you can enroll with confidence and build the right\n            skills.\n          </PagePurpose>\n        </div>\n        <Button onClick={handleStart} disabled={enrolling}>\n          <Play className=\"h-4 w-4 mr-1\" />\n          {enrolling ? 'Enrolling…' : 'Start Course'}\n        </Button>\n      </div>\n\n      <NextSteps\n        storageKey=\"crewfoundry-course-details\"\n        steps={[\n          {\n            id: 'start',\n            label: 'Start the first module',\n            description: 'Begin learning and track your progress as you go.',\n            icon: <Play className=\"h-4 w-4\" />,\n            onClick: () => navigate('../../learning/course-learning-page'),\n          },\n          {\n            id: 'my-learning',\n            label: 'See all your learning',\n            description: 'Review everything you are currently enrolled in.',\n            icon: <GraduationCap className=\"h-4 w-4\" />,\n            onClick: () => navigate('../../learning/my-learning-page'),\n          },\n          {\n            id: 'browse',\n            label: 'Browse more courses',\n            description: 'Find related training to round out your skills.',\n            icon: <BookOpen className=\"h-4 w-4\" />,\n            onClick: () => navigate('../../learning/courses-page'),\n          },\n        ]}\n      />\n\n      <div className=\"grid gap-4 md:grid-cols-4\">\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Clock className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\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            <BookOpen className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\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            <Users className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\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        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Star className=\"h-5 w-5 mx-auto text-status-warning-text mb-1\" />\n            <p className=\"text-lg font-bold\">{course.rating}/5</p>\n            <p className=\"text-xs text-text-secondary\">Rating</p>\n          </CardContent>\n        </Card>\n      </div>\n      <EmphasisPanel>\n        <div className=\"mb-2 text-lg font-semibold\">About this Course</div>\n        <p className=\"text-sm text-text-secondary\">{course.description}</p>\n        <div className=\"flex flex-wrap gap-1 mt-3\">\n          {course.skills.map((s) => (\n            <Badge key={s} variant=\"outline\">\n              {s}\n            </Badge>\n          ))}\n        </div>\n      </EmphasisPanel>\n      <Card>\n        <CardHeader>\n          <CardTitle>Completion Statistics</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"space-y-2\">\n            <div className=\"flex justify-between text-sm\">\n              <span>\n                {course.completed} of {course.enrolled} students completed\n              </span>\n              <span className=\"font-medium\">{completionRate}%</span>\n            </div>\n            <div className=\"h-3 bg-bg-sunken rounded overflow-hidden\">\n              <div\n                className=\"h-3 bg-status-success-text rounded\"\n                style={{ width: `${completionRate}%` }}\n              />\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/crewfoundry/pages/LearningCoursesPagePage.js

@@ -1,68 +1,164 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
-import { useState as t } from "react";
-import { Search 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, CardContent as c, CardDescription as l, CardHeader as u, CardTitle as d, GlassCard as f, GradientText as p, IllustratedEmptyState as m, Input as h, PagePurpose as g } from "@burdenoff/fe-libs/ui";
+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";
 //#region src/crewfoundry/pages/LearningCoursesPagePage.tsx
-function _() {
-	let { courses: _ } = e(), [v, y] = t(""), b = _.filter((e) => `${e.title} ${e.category} ${e.instructor}`.toLowerCase().includes(v.toLowerCase()));
-	return /* @__PURE__ */ o("div", {
+var x = [
+	{
+		name: "title",
+		label: "Course Title",
+		type: "text",
+		required: !0,
+		colSpan: 2
+	},
+	{
+		name: "category",
+		label: "Category",
+		type: "text",
+		required: !0
+	},
+	{
+		name: "instructor",
+		label: "Instructor",
+		type: "text",
+		required: !0
+	},
+	{
+		name: "duration",
+		label: "Duration",
+		type: "text",
+		required: !0,
+		placeholder: "e.g. 6 weeks"
+	},
+	{
+		name: "modules",
+		label: "Modules",
+		type: "number",
+		required: !0,
+		placeholder: "e.g. 8"
+	},
+	{
+		name: "level",
+		label: "Level",
+		type: "select",
+		required: !0,
+		options: [
+			{
+				label: "Beginner",
+				value: "beginner"
+			},
+			{
+				label: "Intermediate",
+				value: "intermediate"
+			},
+			{
+				label: "Advanced",
+				value: "advanced"
+			}
+		]
+	},
+	{
+		name: "status",
+		label: "Status",
+		type: "select",
+		required: !0,
+		options: [
+			{
+				label: "Active",
+				value: "active"
+			},
+			{
+				label: "Draft",
+				value: "draft"
+			},
+			{
+				label: "Archived",
+				value: "archived"
+			}
+		]
+	},
+	{
+		name: "description",
+		label: "Description",
+		type: "textarea",
+		required: !0,
+		colSpan: 2
+	},
+	{
+		name: "skills",
+		label: "Skills",
+		type: "tags",
+		placeholder: "Add a skill and press Enter",
+		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", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ o("div", { children: [
-				/* @__PURE__ */ a("h1", {
-					className: "text-2xl font-semibold",
-					children: /* @__PURE__ */ a(p, { children: "Course Catalog" })
-				}),
-				/* @__PURE__ */ o("p", {
-					className: "text-sm text-text-secondary",
-					children: [_.length, " courses available"]
-				}),
-				/* @__PURE__ */ a(g, {
-					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__ */ o("div", {
+			/* @__PURE__ */ l("div", {
+				className: "flex flex-wrap items-start justify-between gap-3",
+				children: [/* @__PURE__ */ l("div", { children: [
+					/* @__PURE__ */ c("h1", {
+						className: "text-2xl font-semibold",
+						children: /* @__PURE__ */ c(_, { children: "Course Catalog" })
+					}),
+					/* @__PURE__ */ l("p", {
+						className: "text-sm text-text-secondary",
+						children: [S.length, " courses available"]
+					}),
+					/* @__PURE__ */ c(b, {
+						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__ */ l("div", {
 				className: "relative max-w-sm",
-				children: [/* @__PURE__ */ a(n, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ a(h, {
+				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, {
 					placeholder: "Search courses...",
 					className: "pl-9",
-					value: v,
-					onChange: (e) => y(e.target.value)
+					value: w,
+					onChange: (e) => T(e.target.value)
 				})]
 			}),
-			/* @__PURE__ */ a("div", {
+			/* @__PURE__ */ c("div", {
 				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-				children: b.length === 0 ? /* @__PURE__ */ a("div", {
+				children: D.length === 0 ? /* @__PURE__ */ c("div", {
 					className: "col-span-full",
-					children: /* @__PURE__ */ a(m, {
+					children: /* @__PURE__ */ c(v, {
 						illustration: "empty-search",
 						title: "No courses found",
 						description: "Try a different search term to find training."
 					})
-				}) : b.map((e, t) => /* @__PURE__ */ o(f, {
+				}) : D.map((e, t) => /* @__PURE__ */ l(g, {
 					treatment: t === 0 ? "glass" : "plain",
 					glow: t === 0,
 					className: "hover:shadow-md transition-shadow cursor-pointer",
-					children: [/* @__PURE__ */ o(u, { children: [
-						/* @__PURE__ */ o("div", {
+					children: [/* @__PURE__ */ l(m, { children: [
+						/* @__PURE__ */ l("div", {
 							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ a(s, {
+							children: [/* @__PURE__ */ c(u, {
 								variant: "outline",
 								className: "text-[10px]",
 								children: e.category
-							}), /* @__PURE__ */ a(s, {
+							}), /* @__PURE__ */ c(u, {
 								variant: e.level === "beginner" ? "secondary" : e.level === "intermediate" ? "default" : "destructive",
 								className: "text-[10px]",
 								children: e.level
 							})]
 						}),
-						/* @__PURE__ */ a(d, {
+						/* @__PURE__ */ c(h, {
 							className: "text-base mt-2",
 							children: e.title
 						}),
-						/* @__PURE__ */ o(l, { children: [
+						/* @__PURE__ */ l(p, { children: [
 							e.instructor,
 							" · ",
 							e.duration,
@@ -70,44 +166,69 @@ function _() {
 							e.modules,
 							" modules"
 						] })
-					] }), /* @__PURE__ */ o(c, { children: [
-						/* @__PURE__ */ a("p", {
+					] }), /* @__PURE__ */ l(f, { children: [
+						/* @__PURE__ */ c("p", {
 							className: "text-sm text-text-secondary mb-3",
 							children: e.description
 						}),
-						/* @__PURE__ */ a("div", {
+						/* @__PURE__ */ c("div", {
 							className: "flex flex-wrap gap-1 mb-3",
-							children: e.skills.map((e) => /* @__PURE__ */ a(s, {
+							children: e.skills.map((e) => /* @__PURE__ */ c(u, {
 								variant: "outline",
 								className: "text-[9px]",
 								children: e
 							}, e))
 						}),
-						/* @__PURE__ */ o("div", {
+						/* @__PURE__ */ l("div", {
 							className: "flex items-center justify-between text-xs text-text-secondary",
 							children: [
-								/* @__PURE__ */ o("span", {
+								/* @__PURE__ */ l("span", {
 									className: "flex items-center gap-1",
-									children: [/* @__PURE__ */ a(r, { className: "h-3 w-3 text-status-warning-text" }), e.rating]
+									children: [/* @__PURE__ */ c(o, { className: "h-3 w-3 text-status-warning-text" }), e.rating]
 								}),
-								/* @__PURE__ */ o("span", {
+								/* @__PURE__ */ l("span", {
 									className: "flex items-center gap-1",
 									children: [
-										/* @__PURE__ */ a(i, { className: "h-3 w-3" }),
+										/* @__PURE__ */ c(s, { className: "h-3 w-3" }),
 										e.enrolled,
 										" enrolled"
 									]
 								}),
-								/* @__PURE__ */ o("span", { children: [Math.round(e.completed / e.enrolled * 100), "% completion"] })
+								/* @__PURE__ */ l("span", { children: [Math.round(e.completed / e.enrolled * 100), "% completion"] })
 							]
 						})
 					] })]
 				}, e.id))
+			}),
+			/* @__PURE__ */ c(t, {
+				open: E.open,
+				onOpenChange: E.onOpenChange,
+				title: "Create Course",
+				description: "Add a new course to the catalog.",
+				fields: x,
+				submitLabel: "Create Course",
+				onSubmit: async (e) => {
+					await C({
+						id: `course-${Date.now()}`,
+						title: String(e.title ?? ""),
+						category: String(e.category ?? ""),
+						instructor: String(e.instructor ?? ""),
+						duration: String(e.duration ?? ""),
+						level: String(e.level ?? "beginner"),
+						enrolled: 0,
+						completed: 0,
+						rating: 0,
+						status: String(e.status ?? "draft"),
+						description: String(e.description ?? ""),
+						modules: typeof e.modules == "number" ? e.modules : Number(e.modules) || 0,
+						skills: Array.isArray(e.skills) ? e.skills : []
+					});
+				}
 			})
 		]
 	});
 }
 //#endregion
-export { _ as LearningCoursesPagePage };
+export { S 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  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n  GlassCard,\n  GradientText,\n  IllustratedEmptyState,\n  Input,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { BookOpen, Search, Star, Users } from 'lucide-react';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\n\nexport function LearningCoursesPagePage() {\n  const { courses } = useCrewFoundryStore();\n  const [search, setSearch] = useState('');\n  const filtered = courses.filter((c) =>\n    `${c.title} ${c.category} ${c.instructor}`.toLowerCase().includes(search.toLowerCase())\n  );\n\n  return (\n    <div className=\"space-y-6 p-6\">\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      <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    </div>\n  );\n}\n"],"mappings":";;;;;;AAgBA,SAAgB,IAA0B;CACxC,IAAM,EAAE,eAAY,GAAqB,EACnC,CAAC,GAAQ,KAAa,EAAS,GAAG,EAClC,IAAW,EAAQ,QAAQ,MAC/B,GAAG,EAAE,MAAM,GAAG,EAAE,SAAS,GAAG,EAAE,aAAa,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,CACxF;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD,EAAA,UAAA;IACE,kBAAC,MAAD;KAAI,WAAU;eACZ,kBAAC,GAAD,EAAA,UAAc,kBAA6B,CAAA;KACxC,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eAAb,CAA4C,EAAQ,QAAO,qBAAsB;;IACjF,kBAAC,GAAD;KAAa,WAAU;eAAO;KAAuI,CAAA;IACjK,EAAA,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,wEAAyE,CAAA,EAC3F,kBAAC,GAAD;KACE,aAAY;KACZ,WAAU;KACV,OAAO;KACP,WAAW,MAAM,EAAU,EAAE,OAAO,MAAM;KAC1C,CAAA,CACE;;GACN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAS,WAAW,IACnB,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MAAuB,cAAa;MAAe,OAAM;MAAmB,aAAY;MAAkD,CAAA;KACtI,CAAA,GAEN,EAAS,KAAK,GAAQ,MACtB,kBAAC,GAAD;KAA2B,WAAW,MAAS,IAAI,UAAU;KAAS,MAAM,MAAS;KAAG,WAAU;eAAlG,CACE,kBAAC,GAAD,EAAA,UAAA;MACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD;QAAO,SAAQ;QAAU,WAAU;kBAChC,EAAO;QACF,CAAA,EACR,kBAAC,GAAD;QACE,SACE,EAAO,UAAU,aACb,cACA,EAAO,UAAU,iBACf,YACA;QAER,WAAU;kBAET,EAAO;QACF,CAAA,CACJ;;MACN,kBAAC,GAAD;OAAW,WAAU;iBAAkB,EAAO;OAAkB,CAAA;MAChE,kBAAC,GAAD,EAAA,UAAA;OACG,EAAO;OAAW;OAAI,EAAO;OAAS;OAAI,EAAO;OAAQ;OAC1C,EAAA,CAAA;MACP,EAAA,CAAA,EACb,kBAAC,GAAD,EAAA,UAAA;MACE,kBAAC,KAAD;OAAG,WAAU;iBAAoC,EAAO;OAAgB,CAAA;MACxE,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAO,OAAO,KAAK,MAClB,kBAAC,GAAD;QAAe,SAAQ;QAAU,WAAU;kBACxC;QACK,EAFI,EAEJ,CACR;OACE,CAAA;MACN,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,QAAD;SAAM,WAAU;mBAAhB,CACE,kBAAC,GAAD,EAAM,WAAU,oCAAqC,CAAA,EACpD,EAAO,OACH;;QACP,kBAAC,QAAD;SAAM,WAAU;mBAAhB;UACE,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;UAC5B,EAAO;UAAS;UACZ;;QACP,kBAAC,QAAD,EAAA,UAAA,CAAO,KAAK,MAAO,EAAO,YAAY,EAAO,WAAY,IAAI,EAAC,eAAmB,EAAA,CAAA;QAC7E;;MACM,EAAA,CAAA,CACJ;OA7CI,EAAO,GA6CX,CACZ;IACE,CAAA;GACF"}
+{"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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"}