@burdenoff/microfe-technospam 2026.525.1 → 2026.704.2

package/dist/technospam/pages/CoursesMyLearningPagePage.js

@@ -1,187 +1,157 @@
-import { useTechnoSpamStore as e } from "../store/technospamStore.js";
-import { useMemo as t, useState as n } from "react";
-import { Award as r, BookOpen as i, Clock as a, GraduationCap as o, PlayCircle as s, RotateCcw as c } from "lucide-react";
-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 } from "@burdenoff/fe-libs/ui";
+import { useTechnoSpam as e, useTechnoSpamNavigate as t } from "../providers/TechnoSpamProvider.js";
+import { PageLayout as n } from "../components/PageLayout.js";
+import { StatCard as r } from "../components/StatCard.js";
+import { formatDate as i, relativeTime as a } from "../utils/format.js";
+import { StatusBadge as o } from "../components/StatusBadge.js";
+import { EmptyView as s, ErrorView as c, LoadingRows as l } from "../components/StateViews.js";
+import "../components/index.js";
+import { useCertificatesQuery as u, useEnrollmentsQuery as d } from "../api/technospamApi.js";
+import { Award as f, BookOpen as p, GraduationCap as m, PlayCircle as h } from "lucide-react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Button as v, GlassCard as y } from "@burdenoff/fe-libs/ui";
 //#region src/technospam/pages/CoursesMyLearningPagePage.tsx
-var _ = {
-	c1: 72,
-	c2: 45,
-	c3: 18,
-	c4: 100,
-	c5: 0,
-	c6: 90
-};
-function v() {
-	let { courses: v, userStats: y } = e(), [b, x] = n("all"), S = t(() => v.map((e) => ({
-		...e,
-		progress: _[e.id] ?? 0
-	})), [v]), C = t(() => S.filter((e) => b === "completed" ? e.progress === 100 : b === "in_progress" ? e.progress > 0 && e.progress < 100 : !0), [S, b]), w = [
-		{
-			label: "All Courses",
-			value: "all",
-			count: S.length
-		},
-		{
-			label: "In Progress",
-			value: "in_progress",
-			count: S.filter((e) => e.progress > 0 && e.progress < 100).length
-		},
-		{
-			label: "Completed",
-			value: "completed",
-			count: S.filter((e) => e.progress === 100).length
-		}
-	];
-	return /* @__PURE__ */ u("div", {
-		className: "space-y-6 p-6",
+function b({ e, onOpen: t }) {
+	return /* @__PURE__ */ _(y, {
+		className: "flex cursor-pointer items-center gap-4 p-4 transition-shadow hover:shadow-md",
+		onClick: t,
 		children: [
-			/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("h1", {
-				className: "text-2xl font-semibold text-foreground",
-				children: "My Learning"
-			}), /* @__PURE__ */ l("p", {
-				className: "text-sm text-muted-foreground",
-				children: "Track your enrolled courses and progress"
-			})] }),
-			/* @__PURE__ */ u("div", {
-				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4",
+			/* @__PURE__ */ g("span", {
+				className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-accent-wash text-accent-primary",
+				children: /* @__PURE__ */ g(p, { size: 20 })
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "min-w-0 flex-1",
 				children: [
-					/* @__PURE__ */ u(p, { children: [/* @__PURE__ */ u(h, {
-						className: "flex flex-row items-center justify-between space-y-0 pb-2",
-						children: [/* @__PURE__ */ l(g, {
-							className: "text-sm font-medium",
-							children: "Enrolled"
-						}), /* @__PURE__ */ l(i, { className: "h-4 w-4 text-muted-foreground" })]
-					}), /* @__PURE__ */ u(m, { children: [/* @__PURE__ */ l("div", {
-						className: "text-2xl font-bold",
-						children: y.coursesEnrolled
-					}), /* @__PURE__ */ l("p", {
-						className: "text-xs text-muted-foreground",
-						children: "Total courses"
-					})] })] }),
-					/* @__PURE__ */ u(p, { children: [/* @__PURE__ */ u(h, {
-						className: "flex flex-row items-center justify-between space-y-0 pb-2",
-						children: [/* @__PURE__ */ l(g, {
-							className: "text-sm font-medium",
-							children: "Completed"
-						}), /* @__PURE__ */ l(o, { className: "h-4 w-4 text-muted-foreground" })]
-					}), /* @__PURE__ */ u(m, { children: [/* @__PURE__ */ l("div", {
-						className: "text-2xl font-bold",
-						children: y.coursesCompleted
-					}), /* @__PURE__ */ l("p", {
-						className: "text-xs text-muted-foreground",
-						children: "Courses finished"
-					})] })] }),
-					/* @__PURE__ */ u(p, { children: [/* @__PURE__ */ u(h, {
-						className: "flex flex-row items-center justify-between space-y-0 pb-2",
-						children: [/* @__PURE__ */ l(g, {
-							className: "text-sm font-medium",
-							children: "Learning Hours"
-						}), /* @__PURE__ */ l(a, { className: "h-4 w-4 text-muted-foreground" })]
-					}), /* @__PURE__ */ u(m, { children: [/* @__PURE__ */ l("div", {
-						className: "text-2xl font-bold",
-						children: y.totalLearningHours
-					}), /* @__PURE__ */ l("p", {
-						className: "text-xs text-muted-foreground",
-						children: "Total hours invested"
-					})] })] }),
-					/* @__PURE__ */ u(p, { children: [/* @__PURE__ */ u(h, {
-						className: "flex flex-row items-center justify-between space-y-0 pb-2",
-						children: [/* @__PURE__ */ l(g, {
-							className: "text-sm font-medium",
-							children: "Certificates"
-						}), /* @__PURE__ */ l(r, { className: "h-4 w-4 text-muted-foreground" })]
-					}), /* @__PURE__ */ u(m, { children: [/* @__PURE__ */ l("div", {
-						className: "text-2xl font-bold",
-						children: y.certificatesEarned
-					}), /* @__PURE__ */ l("p", {
-						className: "text-xs text-muted-foreground",
-						children: "Certificates earned"
-					})] })] })
+					/* @__PURE__ */ _("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ g("span", {
+							className: "truncate text-sm font-semibold text-text-primary",
+							children: e.course?.title ?? "Course"
+						}), /* @__PURE__ */ g(o, { status: e.status })]
+					}),
+					/* @__PURE__ */ _("div", {
+						className: "mt-1 flex items-center gap-2 text-xs text-text-muted",
+						children: [
+							/* @__PURE__ */ _("span", { children: [e.lessonsCompleted, " lessons done"] }),
+							/* @__PURE__ */ g("span", { children: "·" }),
+							/* @__PURE__ */ _("span", { children: ["Active ", a(e.lastActiveAt ?? e.startedAt)] })
+						]
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "mt-2 h-1.5 w-full overflow-hidden rounded-full bg-bg-sunken",
+						children: /* @__PURE__ */ g("div", {
+							className: "h-full rounded-full bg-accent-primary",
+							style: { width: `${e.progressPct}%` }
+						})
+					})
 				]
 			}),
-			/* @__PURE__ */ l("div", {
-				className: "flex gap-2 border-b border-border pb-2",
-				children: w.map((e) => /* @__PURE__ */ u(f, {
-					variant: b === e.value ? "default" : "ghost",
+			/* @__PURE__ */ _("div", {
+				className: "shrink-0 text-right",
+				children: [/* @__PURE__ */ _("div", {
+					className: "text-lg font-semibold text-text-primary",
+					children: [e.progressPct, "%"]
+				}), /* @__PURE__ */ _(v, {
+					variant: "ghost",
 					size: "sm",
-					onClick: () => x(e.value),
-					children: [
-						e.label,
-						" (",
-						e.count,
-						")"
-					]
-				}, e.value))
+					children: [/* @__PURE__ */ g(h, { size: 15 }), " Resume"]
+				})]
+			})
+		]
+	});
+}
+function x() {
+	let a = t(), { currentUser: o } = e(), x = o?.id, { data: S, loading: C, error: w } = d(x ? { learnerId: x } : {}), { data: T } = u(x ? { learnerId: x } : {}), E = S?.tecListEnrollments.items ?? [], D = T?.tecListCertificates ?? [], O = E.filter((e) => e.status === "COMPLETED").length, k = E.filter((e) => e.status === "IN_PROGRESS" || e.status === "ENROLLED").length;
+	return /* @__PURE__ */ _(n, {
+		hero: !0,
+		title: "My Learning",
+		description: "Track your enrolled courses, progress, and earned certificates.",
+		actions: /* @__PURE__ */ _(v, {
+			variant: "outline",
+			onClick: () => a("/courses/courses-page"),
+			children: [/* @__PURE__ */ g(p, { size: 16 }), " Browse catalog"]
+		}),
+		children: [
+			/* @__PURE__ */ _("div", {
+				className: "mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4",
+				children: [
+					/* @__PURE__ */ g(r, {
+						label: "Enrolled",
+						value: E.length,
+						icon: p
+					}),
+					/* @__PURE__ */ g(r, {
+						label: "In progress",
+						value: k,
+						icon: h
+					}),
+					/* @__PURE__ */ g(r, {
+						label: "Completed",
+						value: O,
+						icon: m
+					}),
+					/* @__PURE__ */ g(r, {
+						label: "Certificates",
+						value: D.length,
+						icon: f
+					})
+				]
 			}),
-			C.length === 0 ? /* @__PURE__ */ l("div", {
-				className: "py-12 text-center text-sm text-muted-foreground",
-				children: "No courses in this category"
-			}) : /* @__PURE__ */ l("div", {
-				className: "space-y-4",
-				children: C.map((e) => /* @__PURE__ */ l(p, { children: /* @__PURE__ */ u(m, {
-					className: "flex flex-col gap-4 p-4 sm:flex-row sm:items-center",
-					children: [/* @__PURE__ */ u("div", {
-						className: "flex-1 space-y-2",
-						children: [
-							/* @__PURE__ */ u("div", {
-								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ l("h3", {
-									className: "text-sm font-medium",
-									children: e.title
-								}), /* @__PURE__ */ l(d, {
-									variant: "secondary",
-									className: "text-xs",
-									children: e.level
-								})]
-							}),
-							/* @__PURE__ */ u("p", {
-								className: "text-xs text-muted-foreground",
+			C && !E.length ? /* @__PURE__ */ g(l, {
+				count: 3,
+				height: "h-24"
+			}) : w ? /* @__PURE__ */ g(c, {
+				title: "Couldn't load your learning",
+				error: w
+			}) : E.length === 0 ? /* @__PURE__ */ g(s, {
+				icon: /* @__PURE__ */ g(p, { size: 26 }),
+				title: "You haven't enrolled yet",
+				description: "Browse the catalog and enroll in a course to start building skill by doing.",
+				action: /* @__PURE__ */ g(v, {
+					onClick: () => a("/courses/courses-page"),
+					children: "Browse courses"
+				})
+			}) : /* @__PURE__ */ g("div", {
+				className: "space-y-3",
+				children: E.map((e) => /* @__PURE__ */ g(b, {
+					e,
+					onOpen: () => a(`/courses/course-details-page?id=${e.courseId}`)
+				}, e.id))
+			}),
+			D.length > 0 ? /* @__PURE__ */ _("div", {
+				className: "mt-8",
+				children: [/* @__PURE__ */ g("h2", {
+					className: "mb-3 text-base font-semibold text-text-primary",
+					children: "Certificates"
+				}), /* @__PURE__ */ g("div", {
+					className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
+					children: D.map((e) => /* @__PURE__ */ _(y, {
+						className: "flex items-center gap-3 p-4",
+						children: [/* @__PURE__ */ g(f, {
+							className: "text-accent-teal",
+							size: 22
+						}), /* @__PURE__ */ _("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ g("div", {
+								className: "truncate text-sm font-medium text-text-primary",
+								children: e.course?.title ?? "Certificate"
+							}), /* @__PURE__ */ _("div", {
+								className: "text-xs text-text-muted",
 								children: [
-									e.instructor,
-									" · ",
-									e.duration,
-									"h · ",
-									e.category
+									"Score ",
+									e.score,
+									" · Issued ",
+									i(e.issuedAt)
 								]
-							}),
-							/* @__PURE__ */ u("div", {
-								className: "space-y-1",
-								children: [/* @__PURE__ */ u("div", {
-									className: "flex items-center justify-between text-xs",
-									children: [/* @__PURE__ */ l("span", {
-										className: "text-muted-foreground",
-										children: "Progress"
-									}), /* @__PURE__ */ u("span", {
-										className: "font-medium",
-										children: [e.progress, "%"]
-									})]
-								}), /* @__PURE__ */ l("div", {
-									className: "h-2 w-full overflow-hidden rounded-full bg-muted",
-									children: /* @__PURE__ */ l("div", {
-										className: `h-2 rounded-full ${e.progress === 100 ? "bg-green-500" : "bg-primary"}`,
-										style: { width: `${e.progress}%` }
-									})
-								})]
-							})
-						]
-					}), /* @__PURE__ */ l("div", {
-						className: "shrink-0",
-						children: e.progress === 100 ? /* @__PURE__ */ u(f, {
-							variant: "outline",
-							size: "sm",
-							children: [/* @__PURE__ */ l(c, { className: "mr-2 h-4 w-4" }), "Review"]
-						}) : /* @__PURE__ */ u(f, {
-							size: "sm",
-							children: [/* @__PURE__ */ l(s, { className: "mr-2 h-4 w-4" }), e.progress === 0 ? "Start" : "Continue"]
-						})
-					})]
-				}) }, e.id))
-			})
+							})]
+						})]
+					}, e.id))
+				})]
+			}) : null
 		]
 	});
 }
 //#endregion
-export { v as CoursesMyLearningPagePage };
+export { x as CoursesMyLearningPagePage };
 
 //# sourceMappingURL=CoursesMyLearningPagePage.js.map

package/dist/technospam/pages/CoursesMyLearningPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoursesMyLearningPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesMyLearningPagePage.tsx"],"sourcesContent":["import { useState, useMemo } from 'react';\nimport { Card, CardContent, CardHeader, CardTitle, Badge, Button } from '@burdenoff/fe-libs/ui';\nimport { BookOpen, Award, Clock, GraduationCap, PlayCircle, RotateCcw } from 'lucide-react';\nimport { useTechnoSpamStore } from '../store/technospamStore';\n\ntype TabFilter = 'all' | 'in_progress' | 'completed';\n\nconst courseProgressMap: Record<string, number> = {\n  c1: 72,\n  c2: 45,\n  c3: 18,\n  c4: 100,\n  c5: 0,\n  c6: 90,\n};\n\nexport function CoursesMyLearningPagePage() {\n  const { courses, userStats } = useTechnoSpamStore();\n  const [activeTab, setActiveTab] = useState<TabFilter>('all');\n\n  const enrolledCourses = useMemo(() => {\n    return courses.map((course) => ({\n      ...course,\n      progress: courseProgressMap[course.id] ?? 0,\n    }));\n  }, [courses]);\n\n  const filteredCourses = useMemo(() => {\n    return enrolledCourses.filter((course) => {\n      if (activeTab === 'completed') return course.progress === 100;\n      if (activeTab === 'in_progress') return course.progress > 0 && course.progress < 100;\n      return true;\n    });\n  }, [enrolledCourses, activeTab]);\n\n  const tabs: { label: string; value: TabFilter; count: number }[] = [\n    { label: 'All Courses', value: 'all', count: enrolledCourses.length },\n    {\n      label: 'In Progress',\n      value: 'in_progress',\n      count: enrolledCourses.filter((c) => c.progress > 0 && c.progress < 100).length,\n    },\n    {\n      label: 'Completed',\n      value: 'completed',\n      count: enrolledCourses.filter((c) => c.progress === 100).length,\n    },\n  ];\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div>\n        <h1 className=\"text-2xl font-semibold text-foreground\">My Learning</h1>\n        <p className=\"text-sm text-muted-foreground\">Track your enrolled courses and progress</p>\n      </div>\n\n      <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-4\">\n        <Card>\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Enrolled</CardTitle>\n            <BookOpen className=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold\">{userStats.coursesEnrolled}</div>\n            <p className=\"text-xs text-muted-foreground\">Total courses</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Completed</CardTitle>\n            <GraduationCap className=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold\">{userStats.coursesCompleted}</div>\n            <p className=\"text-xs text-muted-foreground\">Courses finished</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Learning Hours</CardTitle>\n            <Clock className=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold\">{userStats.totalLearningHours}</div>\n            <p className=\"text-xs text-muted-foreground\">Total hours invested</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-sm font-medium\">Certificates</CardTitle>\n            <Award className=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-2xl font-bold\">{userStats.certificatesEarned}</div>\n            <p className=\"text-xs text-muted-foreground\">Certificates earned</p>\n          </CardContent>\n        </Card>\n      </div>\n\n      <div className=\"flex gap-2 border-b border-border pb-2\">\n        {tabs.map((tab) => (\n          <Button\n            key={tab.value}\n            variant={activeTab === tab.value ? 'default' : 'ghost'}\n            size=\"sm\"\n            onClick={() => setActiveTab(tab.value)}\n          >\n            {tab.label} ({tab.count})\n          </Button>\n        ))}\n      </div>\n\n      {filteredCourses.length === 0 ? (\n        <div className=\"py-12 text-center text-sm text-muted-foreground\">\n          No courses in this category\n        </div>\n      ) : (\n        <div className=\"space-y-4\">\n          {filteredCourses.map((course) => (\n            <Card key={course.id}>\n              <CardContent className=\"flex flex-col gap-4 p-4 sm:flex-row sm:items-center\">\n                <div className=\"flex-1 space-y-2\">\n                  <div className=\"flex items-center gap-2\">\n                    <h3 className=\"text-sm font-medium\">{course.title}</h3>\n                    <Badge variant=\"secondary\" className=\"text-xs\">\n                      {course.level}\n                    </Badge>\n                  </div>\n                  <p className=\"text-xs text-muted-foreground\">\n                    {course.instructor} &middot; {course.duration}h &middot; {course.category}\n                  </p>\n                  <div className=\"space-y-1\">\n                    <div className=\"flex items-center justify-between text-xs\">\n                      <span className=\"text-muted-foreground\">Progress</span>\n                      <span className=\"font-medium\">{course.progress}%</span>\n                    </div>\n                    <div className=\"h-2 w-full overflow-hidden rounded-full bg-muted\">\n                      <div\n                        className={`h-2 rounded-full ${course.progress === 100 ? 'bg-green-500' : 'bg-primary'}`}\n                        style={{ width: `${course.progress}%` }}\n                      />\n                    </div>\n                  </div>\n                </div>\n                <div className=\"shrink-0\">\n                  {course.progress === 100 ? (\n                    <Button variant=\"outline\" size=\"sm\">\n                      <RotateCcw className=\"mr-2 h-4 w-4\" />\n                      Review\n                    </Button>\n                  ) : (\n                    <Button size=\"sm\">\n                      <PlayCircle className=\"mr-2 h-4 w-4\" />\n                      {course.progress === 0 ? 'Start' : 'Continue'}\n                    </Button>\n                  )}\n                </div>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CoursesMyLearningPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesMyLearningPagePage.tsx"],"sourcesContent":["import { Award, BookOpen, Clock, GraduationCap, PlayCircle } from 'lucide-react';\nimport { Button, GlassCard } from '@burdenoff/fe-libs/ui';\nimport {\n  EmptyView,\n  ErrorView,\n  LoadingRows,\n  PageLayout,\n  StatCard,\n  StatusBadge,\n} from '../components';\nimport { useTechnoSpam, useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport {\n  useEnrollmentsQuery,\n  useCertificatesQuery,\n  type TecEnrollment,\n} from '../api/technospamApi';\nimport { formatDate, relativeTime } from '../utils/format';\n\nfunction EnrollmentRow({ e, onOpen }: { e: TecEnrollment; onOpen: () => void }) {\n  return (\n    <GlassCard\n      className=\"flex cursor-pointer items-center gap-4 p-4 transition-shadow hover:shadow-md\"\n      onClick={onOpen}\n    >\n      <span className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-accent-wash text-accent-primary\">\n        <BookOpen size={20} />\n      </span>\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"truncate text-sm font-semibold text-text-primary\">\n            {e.course?.title ?? 'Course'}\n          </span>\n          <StatusBadge status={e.status} />\n        </div>\n        <div className=\"mt-1 flex items-center gap-2 text-xs text-text-muted\">\n          <span>{e.lessonsCompleted} lessons done</span>\n          <span>·</span>\n          <span>Active {relativeTime(e.lastActiveAt ?? e.startedAt)}</span>\n        </div>\n        <div className=\"mt-2 h-1.5 w-full overflow-hidden rounded-full bg-bg-sunken\">\n          <div\n            className=\"h-full rounded-full bg-accent-primary\"\n            style={{ width: `${e.progressPct}%` }}\n          />\n        </div>\n      </div>\n      <div className=\"shrink-0 text-right\">\n        <div className=\"text-lg font-semibold text-text-primary\">{e.progressPct}%</div>\n        <Button variant=\"ghost\" size=\"sm\">\n          <PlayCircle size={15} /> Resume\n        </Button>\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function CoursesMyLearningPagePage() {\n  const navigate = useTechnoSpamNavigate();\n  const { currentUser } = useTechnoSpam();\n  const learnerId = currentUser?.id;\n\n  const { data, loading, error } = useEnrollmentsQuery(learnerId ? { learnerId } : {});\n  const { data: certData } = useCertificatesQuery(learnerId ? { learnerId } : {});\n\n  const enrollments = data?.tecListEnrollments.items ?? [];\n  const certificates = certData?.tecListCertificates ?? [];\n  const completed = enrollments.filter((e) => e.status === 'COMPLETED').length;\n  const inProgress = enrollments.filter(\n    (e) => e.status === 'IN_PROGRESS' || e.status === 'ENROLLED'\n  ).length;\n\n  return (\n    <PageLayout\n      hero\n      title=\"My Learning\"\n      description=\"Track your enrolled courses, progress, and earned certificates.\"\n      actions={\n        <Button variant=\"outline\" onClick={() => navigate('/courses/courses-page')}>\n          <BookOpen size={16} /> Browse catalog\n        </Button>\n      }\n    >\n      <div className=\"mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard label=\"Enrolled\" value={enrollments.length} icon={BookOpen} />\n        <StatCard label=\"In progress\" value={inProgress} icon={PlayCircle} />\n        <StatCard label=\"Completed\" value={completed} icon={GraduationCap} />\n        <StatCard label=\"Certificates\" value={certificates.length} icon={Award} />\n      </div>\n\n      {loading && !enrollments.length ? (\n        <LoadingRows count={3} height=\"h-24\" />\n      ) : error ? (\n        <ErrorView title=\"Couldn't load your learning\" error={error} />\n      ) : enrollments.length === 0 ? (\n        <EmptyView\n          icon={<BookOpen size={26} />}\n          title=\"You haven't enrolled yet\"\n          description=\"Browse the catalog and enroll in a course to start building skill by doing.\"\n          action={<Button onClick={() => navigate('/courses/courses-page')}>Browse courses</Button>}\n        />\n      ) : (\n        <div className=\"space-y-3\">\n          {enrollments.map((e) => (\n            <EnrollmentRow\n              key={e.id}\n              e={e}\n              onOpen={() => navigate(`/courses/course-details-page?id=${e.courseId}`)}\n            />\n          ))}\n        </div>\n      )}\n\n      {certificates.length > 0 ? (\n        <div className=\"mt-8\">\n          <h2 className=\"mb-3 text-base font-semibold text-text-primary\">Certificates</h2>\n          <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3\">\n            {certificates.map((c) => (\n              <GlassCard key={c.id} className=\"flex items-center gap-3 p-4\">\n                <Award className=\"text-accent-teal\" size={22} />\n                <div className=\"min-w-0\">\n                  <div className=\"truncate text-sm font-medium text-text-primary\">\n                    {c.course?.title ?? 'Certificate'}\n                  </div>\n                  <div className=\"text-xs text-text-muted\">\n                    Score {c.score} · Issued {formatDate(c.issuedAt)}\n                  </div>\n                </div>\n              </GlassCard>\n            ))}\n          </div>\n        </div>\n      ) : null}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}