@burdenoff/microfe-buildmyiq 2026.705.13 → 2026.706.10

package/dist/buildmyiq/pages/learning/MyLearningPage.js

@@ -1,250 +1,388 @@
 import { useBuildmyiq as e } from "../../context/BuildmyiqContext.js";
-import { PageLayout as t } from "../../components/PageLayout.js";
-import { formatDate as n, formatRelativeTime as r } from "../../utils/formatters.js";
-import { StatusBadge as i } from "../../components/StatusBadge.js";
-import { EmptyState as a } from "../../components/EmptyState.js";
-import { ErrorView as o, LoadingView as s, Section as c } from "../../components/StateViews.js";
-import { Tabs as l } from "../../components/Tabs.js";
-import { MiniBar as u } from "../../components/MiniBar.js";
+import { cn as t } from "../../utils/cn.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { formatDate as r, formatDateTime as i, formatRelativeTime as a } from "../../utils/formatters.js";
+import { StatusBadge as o } from "../../components/StatusBadge.js";
+import { EmptyState as s } from "../../components/EmptyState.js";
+import { ErrorView as c, LoadingView as l, Section as u } from "../../components/StateViews.js";
+import { DataTable as d } from "../../components/DataTable.js";
+import { Tabs as f } from "../../components/Tabs.js";
+import { MiniBar as p } from "../../components/MiniBar.js";
+import { ProgressRing as m, Sparkline as h } from "../../components/Viz.js";
 import "../../context/index.js";
-import { useBuiCertificates as d, useBuiCourses as f, useBuiEnrollments as p, useBuiSubmissions as m } from "../../hooks/useBuildmyiqApi.js";
+import { useBuiCertificates as g, useBuiCourses as ee, useBuiEnrollments as te, useBuiSubmissions as ne } from "../../hooks/useBuildmyiqApi.js";
 import "../../hooks/index.js";
-import { FileLink as h } from "../../components/FileLink.js";
+import { FileLink as _ } from "../../components/FileLink.js";
 import "../../components/index.js";
-import { useMemo as g, useState as _ } from "react";
-import { ArrowRight as v, Award as y, ClipboardCheck as b, GraduationCap as x, PlayCircle as S } from "lucide-react";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
-import { Button as T, GlassCard as E } from "@burdenoff/fe-libs/ui";
+import { useMemo as v, useState as y } from "react";
+import { ArrowRight as b, Award as x, Calendar as re, CheckCircle2 as S, ClipboardCheck as C, GraduationCap as ie, PlayCircle as ae, TrendingUp as w, Users as T, XCircle as E } from "lucide-react";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { Button as k, GlassCard as A } from "@burdenoff/fe-libs/ui";
 //#region src/buildmyiq/pages/learning/MyLearningPage.tsx
-var D = new Set(["ENROLLED", "IN_PROGRESS"]), O = () => {
-	let { currentUser: O, navigateTo: k } = e(), A = O?.id, [j, M] = _("in_progress"), N = p({
-		learnerId: A,
+var oe = new Set(["ENROLLED", "IN_PROGRESS"]), se = (e) => e.passed == null ? "text-text-primary" : e.passed ? "text-status-success-text" : "text-status-error-text", j = () => {
+	let { currentUser: j, navigateTo: M } = e(), N = j?.id, [P, F] = y("in_progress"), I = te({
+		learnerId: N,
 		limit: 100,
-		enabled: !!A
-	}), P = f({ limit: 100 }), F = d(void 0, A), I = m({
-		learnerId: A,
+		enabled: !!N
+	}), L = ee({ limit: 100 }), R = g(void 0, N), z = ne({
+		learnerId: N,
 		limit: 50,
-		enabled: !!A
-	}), L = g(() => [...I.data?.items ?? []].sort((e, t) => (t.submittedAt ?? t.createdAt).localeCompare(e.submittedAt ?? e.createdAt)), [I.data]), R = g(() => N.data?.items ?? [], [N.data]), z = g(() => P.data?.items ?? [], [P.data]), B = g(() => F.data ?? [], [F.data]), V = g(() => {
+		enabled: !!N
+	}), B = v(() => [...z.data?.items ?? []].sort((e, t) => (t.submittedAt ?? t.createdAt).localeCompare(e.submittedAt ?? e.createdAt)), [z.data]), V = v(() => I.data?.items ?? [], [I.data]), H = v(() => L.data?.items ?? [], [L.data]), U = v(() => R.data ?? [], [R.data]), W = v(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of z) e.set(t.id, t.title);
+		for (let t of H) e.set(t.id, t);
 		return e;
-	}, [z]), H = (e) => V.get(e) ?? "Course", U = g(() => R.filter((e) => D.has(e.status)), [R]), W = g(() => R.filter((e) => e.status === "COMPLETED"), [R]), G = g(() => [...j === "in_progress" ? U : j === "completed" ? W : R].sort((e, t) => (t.lastActiveAt ?? t.enrolledAt).localeCompare(e.lastActiveAt ?? e.enrolledAt)), [
-		j,
-		U,
-		W,
-		R
-	]), K = g(() => [...B].sort((e, t) => t.issuedAt.localeCompare(e.issuedAt)), [B]), q = [
+	}, [H]), G = v(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of V) e.set(t.id, t);
+		return e;
+	}, [V]), K = (e) => W.get(e)?.title ?? "Course", ce = (e) => {
+		let t = e.enrollmentId ? G.get(e.enrollmentId) : void 0;
+		return t ? K(t.courseId) : "Assessment";
+	}, q = v(() => V.filter((e) => oe.has(e.status)), [V]), J = v(() => V.filter((e) => e.status === "COMPLETED"), [V]), Y = v(() => [...P === "in_progress" ? q : P === "completed" ? J : V].sort((e, t) => (t.lastActiveAt ?? t.enrolledAt).localeCompare(e.lastActiveAt ?? e.enrolledAt)), [
+		P,
+		q,
+		J,
+		V
+	]), X = v(() => [...U].sort((e, t) => t.issuedAt.localeCompare(e.issuedAt)), [U]), Z = v(() => B.filter((e) => e.score != null), [B]), Q = v(() => [...Z].reverse().map((e) => e.score), [Z]), $ = Z.length > 0 ? Math.round(Z.reduce((e, t) => e + (t.score ?? 0), 0) / Z.length) : null, le = v(() => B.filter((e) => e.passed === !0).length, [B]), ue = [
 		{
 			value: "in_progress",
 			label: "In progress",
-			count: U.length
+			count: q.length
 		},
 		{
 			value: "completed",
 			label: "Completed",
-			count: W.length
+			count: J.length
 		},
 		{
 			value: "all",
 			label: "All",
-			count: R.length
+			count: V.length
 		}
-	], J = !!A && (N.isLoading || P.isLoading);
-	return /* @__PURE__ */ C(t, {
+	], de = !!N && (I.isLoading || L.isLoading);
+	return /* @__PURE__ */ D(n, {
 		title: "My Learning",
 		description: "Your enrollments, progress and the credentials you've earned.",
 		titleGradient: !0,
 		aurora: !0,
-		children: /* @__PURE__ */ w("div", {
+		children: /* @__PURE__ */ O("div", {
 			className: "flex flex-col gap-6",
 			children: [
-				/* @__PURE__ */ w(c, {
+				/* @__PURE__ */ O(u, {
 					title: "Courses",
 					description: "Everything you're enrolled in.",
-					children: [A && R.length > 0 && /* @__PURE__ */ C("div", {
+					children: [N && V.length > 0 && /* @__PURE__ */ D("div", {
 						className: "mb-4",
-						children: /* @__PURE__ */ C(l, {
-							items: q,
-							value: j,
-							onChange: M
+						children: /* @__PURE__ */ D(f, {
+							items: ue,
+							value: P,
+							onChange: F
 						})
-					}), A ? J ? /* @__PURE__ */ C(s, { label: "Loading your enrollments…" }) : N.isError ? /* @__PURE__ */ C(o, {
+					}), N ? de ? /* @__PURE__ */ D(l, { label: "Loading your enrollments…" }) : I.isError ? /* @__PURE__ */ D(c, {
 						title: "Couldn't load your learning",
-						message: N.error instanceof Error ? N.error.message : void 0,
-						onRetry: () => N.refetch()
-					}) : R.length === 0 ? /* @__PURE__ */ C(a, {
+						message: I.error instanceof Error ? I.error.message : void 0,
+						onRetry: () => I.refetch()
+					}) : V.length === 0 ? /* @__PURE__ */ D(s, {
 						illustration: "onboarding",
 						title: "You're not enrolled in anything yet",
 						description: "Browse the catalog and enrol in a course to start learning.",
-						action: /* @__PURE__ */ C(T, {
-							onClick: () => k("catalog"),
+						action: /* @__PURE__ */ D(k, {
+							onClick: () => M("catalog"),
 							children: "Explore the catalog"
 						})
-					}) : G.length === 0 ? /* @__PURE__ */ C(a, {
+					}) : Y.length === 0 ? /* @__PURE__ */ D(s, {
 						illustration: "empty-data",
-						title: j === "in_progress" ? "No courses in progress" : j === "completed" ? "No completed courses yet" : "No courses",
-						description: j === "completed" ? "Finish a course to see it here — and earn a certificate." : "Switch tabs or enrol in a new course to keep learning."
-					}) : /* @__PURE__ */ C("div", {
-						className: "flex flex-col gap-3",
-						children: G.map((e) => /* @__PURE__ */ w(E, {
-							treatment: "plain",
-							className: "flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:gap-4",
-							children: [
-								/* @__PURE__ */ C("div", {
-									className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[var(--color-accent-soft)]",
-									children: /* @__PURE__ */ C(S, { className: "h-5 w-5 text-text-primary" })
-								}),
-								/* @__PURE__ */ w("div", {
-									className: "min-w-0 flex-1",
+						title: P === "in_progress" ? "No courses in progress" : P === "completed" ? "No completed courses yet" : "No courses",
+						description: P === "completed" ? "Finish a course to see it here — and earn a certificate." : "Switch tabs or enrol in a new course to keep learning."
+					}) : /* @__PURE__ */ D("div", {
+						className: "grid grid-cols-1 gap-4 xl:grid-cols-2",
+						children: Y.map((e) => {
+							let t = W.get(e.courseId), n = t?.cover?.downloadUrl ?? null, r = e.status === "COMPLETED", i = Math.round(e.progressPct ?? 0);
+							return /* @__PURE__ */ O(A, {
+								treatment: "plain",
+								className: "group flex flex-col overflow-hidden transition-shadow hover:shadow-lg sm:flex-row",
+								children: [/* @__PURE__ */ O("div", {
+									className: "relative aspect-video w-full shrink-0 overflow-hidden bg-[var(--color-accent-soft)] sm:aspect-auto sm:w-44",
 									children: [
-										/* @__PURE__ */ w("div", {
-											className: "flex flex-wrap items-center gap-2",
-											children: [/* @__PURE__ */ C("p", {
-												className: "truncate font-medium text-text-primary",
-												children: H(e.courseId)
-											}), /* @__PURE__ */ C(i, { status: e.status })]
+										n ? /* @__PURE__ */ D("img", {
+											src: n,
+											alt: "",
+											className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+										}) : null,
+										/* @__PURE__ */ D("div", {
+											className: "absolute inset-0 flex items-center justify-center",
+											children: /* @__PURE__ */ D("span", {
+												className: "flex h-11 w-11 items-center justify-center rounded-full bg-bg-surface/85 text-text-primary shadow-sm backdrop-blur transition-transform group-hover:scale-110",
+												children: /* @__PURE__ */ D(ae, { className: "h-6 w-6" })
+											})
+										}),
+										/* @__PURE__ */ D("div", {
+											className: "absolute bottom-2 left-2 rounded-full bg-bg-surface/85 p-0.5 shadow-sm backdrop-blur",
+											children: /* @__PURE__ */ D(m, {
+												value: i,
+												size: 38,
+												stroke: 5,
+												color: r ? "var(--color-status-success-text)" : "var(--color-accent-teal)"
+											})
+										})
+									]
+								}), /* @__PURE__ */ O("div", {
+									className: "flex min-w-0 flex-1 flex-col gap-2 p-4",
+									children: [
+										/* @__PURE__ */ O("div", {
+											className: "flex flex-wrap items-start gap-2",
+											children: [/* @__PURE__ */ D("p", {
+												className: "min-w-0 flex-1 truncate font-semibold text-text-primary",
+												children: K(e.courseId)
+											}), /* @__PURE__ */ D(o, { status: e.status })]
+										}),
+										(t?.level || t?.skill?.name || e.cohort?.name) && /* @__PURE__ */ O("div", {
+											className: "flex flex-wrap items-center gap-2 text-xs text-text-secondary",
+											children: [
+												t?.level && /* @__PURE__ */ D(o, { status: t.level }),
+												t?.skill?.name && /* @__PURE__ */ D("span", {
+													className: "rounded-full bg-bg-sunken px-2 py-0.5",
+													children: t.skill.name
+												}),
+												e.cohort?.name && /* @__PURE__ */ O("span", {
+													className: "inline-flex items-center gap-1",
+													children: [
+														/* @__PURE__ */ D(T, { className: "h-3.5 w-3.5" }),
+														" ",
+														e.cohort.name
+													]
+												})
+											]
 										}),
-										/* @__PURE__ */ w("div", {
-											className: "mt-2 flex items-center gap-2",
-											children: [/* @__PURE__ */ C(u, {
+										/* @__PURE__ */ O("div", {
+											className: "mt-1 flex items-center gap-2",
+											children: [/* @__PURE__ */ D(p, {
 												value: e.progressPct,
-												className: "max-w-sm flex-1"
-											}), /* @__PURE__ */ w("span", {
-												className: "shrink-0 text-xs tabular-nums text-text-secondary",
-												children: [Math.round(e.progressPct ?? 0), "%"]
+												barClassName: r ? "bg-[var(--color-status-success-text)]" : "bg-[var(--color-accent-primary)]",
+												className: "flex-1"
+											}), /* @__PURE__ */ O("span", {
+												className: "shrink-0 text-xs font-semibold tabular-nums text-text-secondary",
+												children: [i, "%"]
 											})]
 										}),
-										/* @__PURE__ */ C("p", {
-											className: "mt-1 text-xs text-text-secondary",
-											children: e.status === "COMPLETED" && e.completedAt ? `Completed ${r(e.completedAt)}` : `Active ${r(e.lastActiveAt ?? e.enrolledAt)}`
+										/* @__PURE__ */ D("p", {
+											className: "text-xs text-text-secondary",
+											children: r && e.completedAt ? `Completed ${a(e.completedAt)}` : `Active ${a(e.lastActiveAt ?? e.enrolledAt)}`
+										}),
+										/* @__PURE__ */ O("div", {
+											className: "mt-auto flex flex-wrap gap-2 pt-2",
+											children: [/* @__PURE__ */ O(k, {
+												size: "sm",
+												className: "max-sm:flex-1",
+												onClick: () => M(`learning/${e.id}`),
+												children: [r ? "Review" : "Continue", /* @__PURE__ */ D(b, { className: "ml-1 h-4 w-4" })]
+											}), /* @__PURE__ */ D(k, {
+												variant: "secondary",
+												size: "sm",
+												className: "max-sm:flex-1",
+												onClick: () => M(`catalog/${e.courseId}`),
+												children: "Overview"
+											})]
 										})
 									]
-								}),
-								/* @__PURE__ */ w(T, {
-									variant: "secondary",
-									size: "sm",
-									className: "shrink-0 max-sm:w-full",
-									onClick: () => k(`learning/${e.id}`),
-									children: [e.status === "COMPLETED" ? "Review" : "Continue", /* @__PURE__ */ C(v, { className: "ml-1 h-4 w-4" })]
-								})
-							]
-						}, e.id))
-					}) : /* @__PURE__ */ C(a, {
+								})]
+							}, e.id);
+						})
+					}) : /* @__PURE__ */ D(s, {
 						illustration: "empty-people",
 						title: "Sign in to see your learning",
 						description: "Your enrollments and progress appear here once you are signed in to the workspace."
 					})]
 				}),
-				/* @__PURE__ */ C(c, {
+				/* @__PURE__ */ D(u, {
 					title: "Assessment results",
 					description: "Your submitted assessments, scores and educator feedback.",
-					children: A ? I.isLoading ? /* @__PURE__ */ C(s, { label: "Loading your results…" }) : I.isError ? /* @__PURE__ */ C(o, {
+					children: N ? z.isLoading ? /* @__PURE__ */ D(l, { label: "Loading your results…" }) : z.isError ? /* @__PURE__ */ D(c, {
 						title: "Couldn't load your results",
-						message: I.error instanceof Error ? I.error.message : void 0,
-						onRetry: () => I.refetch()
-					}) : L.length === 0 ? /* @__PURE__ */ C(a, {
+						message: z.error instanceof Error ? z.error.message : void 0,
+						onRetry: () => z.refetch()
+					}) : B.length === 0 ? /* @__PURE__ */ D(s, {
 						illustration: "empty-data",
 						title: "No assessment results yet",
 						description: "Take a course assessment and your score and feedback will appear here."
-					}) : /* @__PURE__ */ C("div", {
+					}) : /* @__PURE__ */ O("div", {
 						className: "flex flex-col gap-3",
-						children: L.map((e) => /* @__PURE__ */ w(E, {
-							treatment: "plain",
-							className: "flex flex-wrap items-center gap-3 p-4",
-							children: [
-								/* @__PURE__ */ C("div", {
-									className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--color-accent-soft)]",
-									children: /* @__PURE__ */ C(b, { className: "h-5 w-5 text-text-primary" })
-								}),
-								/* @__PURE__ */ w("div", {
-									className: "min-w-0 flex-1",
+						children: [$ != null && /* @__PURE__ */ O(A, {
+							treatment: "metric",
+							className: "flex flex-wrap items-center justify-between gap-4 p-4",
+							children: [/* @__PURE__ */ O("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ D(m, {
+									value: $,
+									size: 54
+								}), /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
+									className: "text-sm font-semibold text-text-primary",
+									children: "Average score"
+								}), /* @__PURE__ */ O("p", {
+									className: "text-xs text-text-secondary",
 									children: [
-										/* @__PURE__ */ w("div", {
-											className: "flex flex-wrap items-center gap-2",
-											children: [
-												/* @__PURE__ */ w("p", {
-													className: "font-medium text-text-primary",
-													children: ["Attempt ", e.attempt]
-												}),
-												/* @__PURE__ */ C(i, { status: e.status }),
-												e.passed != null && /* @__PURE__ */ C("span", {
-													className: `text-xs font-medium ${e.passed ? "text-status-success-text" : "text-status-error-text"}`,
-													children: e.passed ? "Passed" : "Not passed"
-												})
-											]
-										}),
-										e.feedback && /* @__PURE__ */ C("p", {
-											className: "mt-1 text-sm text-text-secondary",
-											children: e.feedback
-										}),
-										/* @__PURE__ */ w("p", {
-											className: "mt-1 text-xs text-text-secondary",
-											children: [
-												"Submitted ",
-												n(e.submittedAt ?? e.createdAt),
-												e.gradedAt ? ` · graded ${n(e.gradedAt)}` : ""
-											]
-										})
+										le,
+										" of ",
+										Z.length,
+										" passed · ",
+										Z.length,
+										" graded"
 									]
-								}),
-								/* @__PURE__ */ w("div", {
-									className: "shrink-0 text-right",
-									children: [/* @__PURE__ */ C("p", {
-										className: "text-lg font-semibold tabular-nums text-text-primary",
+								})] })]
+							}), Q.length >= 2 && /* @__PURE__ */ O("div", {
+								className: "flex items-center gap-2 text-xs text-text-secondary",
+								children: [
+									/* @__PURE__ */ D(w, { className: "h-4 w-4 text-status-success-text" }),
+									/* @__PURE__ */ D(h, {
+										data: Q,
+										width: 128,
+										height: 36
+									}),
+									/* @__PURE__ */ D("span", { children: "score trend" })
+								]
+							})]
+						}), /* @__PURE__ */ D(d, {
+							columns: [
+								{
+									key: "assessment",
+									header: "Assessment",
+									render: (e) => /* @__PURE__ */ O("div", {
+										className: "flex min-w-0 items-center gap-3",
+										children: [/* @__PURE__ */ D("span", {
+											className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)]",
+											children: /* @__PURE__ */ D(C, { className: "h-4 w-4 text-text-primary" })
+										}), /* @__PURE__ */ O("div", {
+											className: "min-w-0",
+											children: [/* @__PURE__ */ D("p", {
+												className: "truncate font-medium text-text-primary",
+												children: ce(e)
+											}), /* @__PURE__ */ O("p", {
+												className: "text-xs text-text-secondary",
+												children: ["Attempt ", e.attempt]
+											})]
+										})]
+									})
+								},
+								{
+									key: "status",
+									header: "Status",
+									render: (e) => /* @__PURE__ */ D(o, { status: e.status })
+								},
+								{
+									key: "result",
+									header: "Result",
+									render: (e) => e.passed == null ? /* @__PURE__ */ D("span", {
+										className: "text-text-tertiary",
+										children: "—"
+									}) : /* @__PURE__ */ O("span", {
+										className: t("inline-flex items-center gap-1.5 text-sm font-medium", e.passed ? "text-status-success-text" : "text-status-error-text"),
+										children: [e.passed ? /* @__PURE__ */ D(S, { className: "h-4 w-4" }) : /* @__PURE__ */ D(E, { className: "h-4 w-4" }), e.passed ? "Passed" : "Not passed"]
+									})
+								},
+								{
+									key: "feedback",
+									header: "Feedback",
+									hideOnMobile: !0,
+									render: (e) => e.feedback ? /* @__PURE__ */ D("p", {
+										className: "line-clamp-2 max-w-[18rem] text-sm text-text-secondary",
+										children: e.feedback
+									}) : /* @__PURE__ */ D("span", {
+										className: "text-text-tertiary",
+										children: "—"
+									})
+								},
+								{
+									key: "submitted",
+									header: "Submitted",
+									hideOnMobile: !0,
+									sortValue: (e) => e.submittedAt ?? e.createdAt,
+									render: (e) => /* @__PURE__ */ D("span", {
+										className: "whitespace-nowrap text-sm text-text-secondary",
+										children: i(e.submittedAt ?? e.createdAt)
+									})
+								},
+								{
+									key: "score",
+									header: "Score",
+									align: "right",
+									sortValue: (e) => e.score ?? -1,
+									render: (e) => /* @__PURE__ */ D("span", {
+										className: t("text-lg font-bold tabular-nums", se(e)),
 										children: e.score == null ? "—" : `${e.score}%`
-									}), /* @__PURE__ */ C("p", {
-										className: "text-xs text-text-secondary",
-										children: "score"
-									})]
-								})
-							]
-						}, e.id))
+									})
+								}
+							],
+							rows: B,
+							rowKey: (e) => e.id,
+							defaultSort: {
+								key: "submitted",
+								dir: "desc"
+							}
+						})]
 					}) : null
 				}),
-				/* @__PURE__ */ C(c, {
+				/* @__PURE__ */ D(u, {
 					title: "Certificates",
 					description: "Verifiable credentials issued for the courses you've completed.",
-					action: /* @__PURE__ */ w(T, {
+					action: /* @__PURE__ */ O(k, {
 						variant: "ghost",
 						size: "sm",
-						onClick: () => k("certificates"),
-						children: [/* @__PURE__ */ C(x, { className: "mr-1 h-4 w-4" }), " All certificates"]
+						onClick: () => M("certificates"),
+						children: [/* @__PURE__ */ D(ie, { className: "mr-1 h-4 w-4" }), " All certificates"]
 					}),
-					children: A ? F.isLoading ? /* @__PURE__ */ C(s, { label: "Loading your certificates…" }) : F.isError ? /* @__PURE__ */ C(o, {
+					children: N ? R.isLoading ? /* @__PURE__ */ D(l, { label: "Loading your certificates…" }) : R.isError ? /* @__PURE__ */ D(c, {
 						title: "Couldn't load your certificates",
-						message: F.error instanceof Error ? F.error.message : void 0,
-						onRetry: () => F.refetch()
-					}) : K.length === 0 ? /* @__PURE__ */ C(a, {
+						message: R.error instanceof Error ? R.error.message : void 0,
+						onRetry: () => R.refetch()
+					}) : X.length === 0 ? /* @__PURE__ */ D(s, {
 						illustration: "empty-data",
 						title: "No certificates yet",
 						description: "Complete a credentialed course to earn a verifiable certificate."
-					}) : /* @__PURE__ */ C("div", {
+					}) : /* @__PURE__ */ D("div", {
 						className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3",
-						children: K.map((e) => /* @__PURE__ */ w(E, {
+						children: X.map((e) => /* @__PURE__ */ O(A, {
 							treatment: "plain",
-							className: "flex flex-col gap-3 p-4",
+							className: "flex flex-col gap-3 p-4 transition-shadow hover:shadow-lg",
 							children: [
-								/* @__PURE__ */ w("div", {
+								/* @__PURE__ */ O("div", {
 									className: "flex items-start justify-between gap-3",
-									children: [/* @__PURE__ */ C("div", {
-										className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--color-accent-soft)]",
-										children: /* @__PURE__ */ C(y, { className: "h-5 w-5 text-text-primary" })
-									}), /* @__PURE__ */ C(i, { status: e.status })]
+									children: [/* @__PURE__ */ D("div", {
+										className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-[color-mix(in_srgb,var(--color-status-warning-text)_16%,transparent)]",
+										children: /* @__PURE__ */ D(x, { className: "h-6 w-6 text-status-warning-text" })
+									}), /* @__PURE__ */ D(o, { status: e.status })]
 								}),
-								/* @__PURE__ */ w("div", {
+								/* @__PURE__ */ O("div", {
 									className: "min-w-0",
-									children: [/* @__PURE__ */ C("p", {
-										className: "truncate font-medium text-text-primary",
-										children: H(e.courseId)
-									}), /* @__PURE__ */ C("p", {
-										className: "mt-0.5 font-mono text-xs text-text-secondary",
-										children: e.serial
+									children: [/* @__PURE__ */ D("p", {
+										className: "truncate font-semibold text-text-primary",
+										children: K(e.courseId)
+									}), /* @__PURE__ */ O("div", {
+										className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-text-secondary",
+										children: [/* @__PURE__ */ D("span", {
+											className: "font-mono",
+											children: e.serial
+										}), e.finalScore != null && /* @__PURE__ */ O("span", {
+											className: "inline-flex items-center gap-1 text-status-success-text",
+											children: [
+												/* @__PURE__ */ D(S, { className: "h-3.5 w-3.5" }),
+												" ",
+												e.finalScore,
+												"%"
+											]
+										})]
 									})]
 								}),
-								/* @__PURE__ */ w("div", {
-									className: "mt-auto flex flex-wrap items-center justify-between gap-2 pt-1 text-xs text-text-secondary",
-									children: [/* @__PURE__ */ w("span", { children: ["Issued ", n(e.issuedAt)] }), e.file ? /* @__PURE__ */ C(h, { fileId: e.file.id }) : null]
+								/* @__PURE__ */ O("div", {
+									className: "mt-auto flex flex-wrap items-center justify-between gap-2 border-t border-border-seam/60 pt-3 text-xs text-text-secondary",
+									children: [/* @__PURE__ */ O("span", {
+										className: "inline-flex items-center gap-1.5",
+										children: [
+											/* @__PURE__ */ D(re, { className: "h-3.5 w-3.5" }),
+											" Issued ",
+											r(e.issuedAt)
+										]
+									}), e.file ? /* @__PURE__ */ D(_, { fileId: e.file.id }) : null]
 								})
 							]
 						}, e.id))
@@ -255,6 +393,6 @@ var D = new Set(["ENROLLED", "IN_PROGRESS"]), O = () => {
 	});
 };
 //#endregion
-export { O as MyLearningPage };
+export { j as MyLearningPage };
 
 //# sourceMappingURL=MyLearningPage.js.map