@burdenoff/microfe-technospam 2026.705.1 → 2026.709.1

package/dist/technospam/pages/CoursesCourseDetailsPagePage.js

@@ -1,253 +1,385 @@
 import { useTechnoSpam as e } from "../providers/TechnoSpamProvider.js";
-import { PageLayout as t } from "../components/PageLayout.js";
-import { StatCard as n } from "../components/StatCard.js";
-import { formatDuration as r, humanizeEnum as i } from "../utils/format.js";
-import { StatusBadge as a } from "../components/StatusBadge.js";
-import { EmptyView as o, ErrorView as s } from "../components/StateViews.js";
+import { cn as t } from "../utils/cn.js";
+import { PageLayout as n } from "../components/PageLayout.js";
+import { StatCard as r } from "../components/StatCard.js";
+import { MediaCover as i, topicIcon as a } from "../components/MediaCover.js";
+import { formatDuration as o, humanizeEnum as s } from "../utils/format.js";
+import { EmptyView as ee, ErrorView as c } from "../components/StateViews.js";
 import "../components/index.js";
-import { notify as c } from "../lib/toast.js";
-import { useCertificatesQuery as l, useCourseQuery as u, useEnroll as d, useIssueCertificate as f, useUpdateProgress as p } from "../api/technospamApi.js";
-import { Award as m, BookOpen as h, CheckCircle2 as g, Clock as _, FileText as v, Layers as y, Lock as b, PlayCircle as x, Sparkles as S } from "lucide-react";
-import { useSearchParams as C } from "react-router-dom";
-import { jsx as w, jsxs as T } from "react/jsx-runtime";
-import { Badge as E, Button as D, GlassCard as O, Skeleton as k } from "@burdenoff/fe-libs/ui";
+import { notify as l } from "../lib/toast.js";
+import { useCertificatesQuery as u, useCourseQuery as d, useEnroll as f, useIssueCertificate as p, useUpdateProgress as te } from "../api/technospamApi.js";
+import { useTechnoSpamAnalytics as ne } from "../hooks/useTechnoSpamAnalytics.js";
+import { useEffect as re } from "react";
+import { Award as m, BookOpen as h, CheckCircle2 as g, Clock as _, Eye as v, FileText as y, Layers as b, Lock as x, PlayCircle as S, ShieldCheck as C, Sparkles as w, TrendingUp as T, Trophy as ie, Users as E } from "lucide-react";
+import { useSearchParams as D } from "react-router-dom";
+import { jsx as O, jsxs as k } from "react/jsx-runtime";
+import { Badge as A, Button as j, GlassCard as M, Skeleton as N } from "@burdenoff/fe-libs/ui";
 //#region src/technospam/pages/CoursesCourseDetailsPagePage.tsx
-var A = {
-	VIDEO: x,
-	ARTICLE: v,
-	INTERACTIVE: S,
-	QUIZ: g,
-	PROJECT: y
+var P = {
+	VIDEO: {
+		icon: S,
+		chip: "bg-accent-primary/15 text-accent-primary",
+		badge: "border-accent-primary/25 bg-accent-primary/10 text-accent-primary"
+	},
+	ARTICLE: {
+		icon: y,
+		chip: "bg-accent-indigo/15 text-accent-indigo",
+		badge: "border-accent-indigo/25 bg-accent-indigo/10 text-accent-indigo"
+	},
+	INTERACTIVE: {
+		icon: w,
+		chip: "bg-accent-teal/15 text-accent-teal",
+		badge: "border-accent-teal/25 bg-accent-teal/10 text-accent-teal"
+	},
+	QUIZ: {
+		icon: g,
+		chip: "bg-accent-purple/15 text-accent-purple",
+		badge: "border-accent-purple/25 bg-accent-purple/10 text-accent-purple"
+	},
+	PROJECT: {
+		icon: b,
+		chip: "bg-status-warning-bg-subtle text-status-warning-text",
+		badge: "border-status-warning-border bg-status-warning-bg-subtle text-status-warning-text"
+	}
 };
-function j({ lesson: e, done: t }) {
-	let n = A[e.kind] ?? v;
-	return /* @__PURE__ */ T("div", {
-		className: "flex items-center gap-3 border-b border-border-seam py-3 last:border-0",
+function F({ icon: e, children: t }) {
+	return /* @__PURE__ */ k("span", {
+		className: "inline-flex items-center gap-1 rounded-full bg-white/15 px-2.5 py-1 text-xs font-medium text-white ring-1 ring-white/25 backdrop-blur-sm",
+		children: [e ? /* @__PURE__ */ O(e, { size: 12 }) : null, t]
+	});
+}
+function I({ lesson: e, index: n, done: r }) {
+	let i = P[e.kind] ?? P.ARTICLE, a = i.icon;
+	return /* @__PURE__ */ k("div", {
+		className: "group flex items-center gap-3 rounded-xl px-2 py-3 transition-colors hover:bg-bg-sunken/60",
 		children: [
-			/* @__PURE__ */ w("span", {
-				className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${t ? "bg-status-success-bg-subtle text-status-success-text" : "bg-bg-sunken text-text-secondary"}`,
-				children: w(t ? g : n, { size: 16 })
+			/* @__PURE__ */ O("span", {
+				className: "hidden w-6 shrink-0 text-center text-sm font-medium tabular-nums text-text-muted sm:block",
+				children: n + 1
+			}),
+			/* @__PURE__ */ O("span", {
+				className: t("flex h-9 w-9 shrink-0 items-center justify-center rounded-lg", r ? "bg-status-success-bg-subtle text-status-success-text" : i.chip),
+				children: O(r ? g : a, { size: 17 })
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ k("div", {
 				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ T("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ w("span", {
-						className: "truncate text-sm font-medium text-text-primary",
-						children: e.title
-					}), e.isPreview ? /* @__PURE__ */ w(E, {
-						variant: "secondary",
-						className: "text-[11px]",
-						children: "Preview"
-					}) : null]
-				}), /* @__PURE__ */ T("div", {
-					className: "text-xs text-text-muted",
-					children: [
-						i(e.kind),
-						" · ",
-						r(e.estimatedMinutes)
-					]
+				children: [/* @__PURE__ */ O("span", {
+					className: "block truncate text-sm font-medium text-text-primary",
+					children: e.title
+				}), /* @__PURE__ */ k("div", {
+					className: "mt-1 flex flex-wrap items-center gap-2",
+					children: [/* @__PURE__ */ O("span", {
+						className: t("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium", i.badge),
+						children: s(e.kind)
+					}), /* @__PURE__ */ k("span", {
+						className: "inline-flex items-center gap-1 text-xs text-text-muted",
+						children: [
+							/* @__PURE__ */ O(_, { size: 12 }),
+							" ",
+							o(e.estimatedMinutes)
+						]
+					})]
 				})]
 			}),
-			!e.isPreview && !t ? /* @__PURE__ */ w(b, {
-				size: 14,
-				className: "text-text-muted"
-			}) : null
+			/* @__PURE__ */ O("div", {
+				className: "shrink-0",
+				children: r ? /* @__PURE__ */ O(g, {
+					size: 18,
+					className: "text-status-success-text"
+				}) : e.isPreview ? /* @__PURE__ */ k("span", {
+					className: "inline-flex items-center gap-1 rounded-full border border-accent-primary/30 bg-accent-primary/10 px-2 py-0.5 text-[11px] font-medium text-accent-primary",
+					children: [/* @__PURE__ */ O(v, { size: 12 }), " Preview"]
+				}) : /* @__PURE__ */ O(x, {
+					size: 15,
+					className: "text-text-muted"
+				})
+			})
 		]
 	});
 }
-function M() {
-	let [i] = C(), b = i.get("id") ?? "", { currentUser: x } = e(), { data: S, loading: A, error: M, refetch: N } = u(b), [P, { loading: F }] = d(), [I, { loading: L }] = p(), { data: R, refetch: z } = l(x?.id && b ? {
+function L() {
+	let [t] = D(), v = t.get("id") ?? "", { currentUser: x, workspaceId: S } = e(), { emit: w } = ne(), { data: P, loading: L, error: R, refetch: z } = d(v);
+	re(() => {
+		v && w("technospam.course.viewed", {
+			workspaceId: S,
+			entityId: v,
+			entityType: "TEC_COURSE"
+		});
+	}, [
+		v,
+		S,
+		w
+	]);
+	let [B, { loading: V }] = f(), [H, { loading: U }] = te(), { data: W, refetch: G } = u(x?.id && v ? {
 		learnerId: x.id,
-		courseId: b
-	} : {}), [B, { loading: V }] = f(), H = S?.tecCourse ?? null, U = [...H?.lessons ?? []].sort((e, t) => e.position - t.position), W = (H?.enrollments ?? []).find((e) => e.learnerId === x?.id), G = (R?.tecListCertificates ?? []).find((e) => e.status === "ISSUED"), K = !!W && W.progressPct >= 100, q = async () => {
-		!b || !x?.id || (await B({ variables: {
-			courseId: b,
+		courseId: v
+	} : {}), [K, { loading: q }] = p(), J = P?.tecCourse ?? null, Y = [...J?.lessons ?? []].sort((e, t) => e.position - t.position), X = (J?.enrollments ?? []).find((e) => e.learnerId === x?.id), Z = (W?.tecListCertificates ?? []).find((e) => e.status === "ISSUED"), ae = !!X && X.progressPct >= 100, oe = async () => {
+		!v || !x?.id || (w("technospam.course.certificate_claimed", {
+			workspaceId: S,
+			entityId: v,
+			entityType: "TEC_COURSE"
+		}), (await K({ variables: {
+			courseId: v,
 			learnerId: x.id,
 			score: 100
-		} })).data?.tecIssueCertificate && (c.success("Certificate issued", "Your verifiable certificate is ready in My Learning."), await z());
-	}, J = async () => {
-		b && (await P({ variables: { input: { courseId: b } } })).data?.tecEnroll && (c.success("Enrolled", `You're enrolled in "${H?.title}".`), await N());
-	}, Y = async () => {
-		if (!W) return;
-		let e = Math.min(U.length, W.lessonsCompleted + 1), t = U.length ? Math.round(e / U.length * 100) : 100;
-		(await I({ variables: { input: {
-			enrollmentId: W.id,
+		} })).data?.tecIssueCertificate && (l.success("Certificate issued", "Your verifiable certificate is ready in My Learning."), await G()));
+	}, se = async () => {
+		v && (w("technospam.course.enroll_clicked", {
+			workspaceId: S,
+			entityId: v,
+			entityType: "TEC_COURSE"
+		}), (await B({ variables: { input: { courseId: v } } })).data?.tecEnroll && (w("technospam.course.enrolled", {
+			workspaceId: S,
+			entityId: v,
+			entityType: "TEC_COURSE"
+		}), l.success("Enrolled", `You're enrolled in "${J?.title}".`), await z()));
+	}, ce = async () => {
+		if (!X) return;
+		let e = Math.min(Y.length, X.lessonsCompleted + 1), t = Y.length ? Math.round(e / Y.length * 100) : 100;
+		(await H({ variables: { input: {
+			enrollmentId: X.id,
 			lessonsCompleted: e,
 			progressPct: t
-		} } })).data?.tecUpdateProgress && (c.success("Progress saved", `${t}% complete`), await N());
+		} } })).data?.tecUpdateProgress && (w("technospam.course.progress_updated", {
+			workspaceId: S,
+			entityId: X.id,
+			entityType: "TEC_ENROLLMENT",
+			progressPct: t
+		}), l.success("Progress saved", `${t}% complete`), await z());
 	};
-	if (A && !H) return /* @__PURE__ */ T(t, {
+	if (L && !J) return /* @__PURE__ */ k(n, {
 		title: "Course",
 		backPath: "/courses/courses-page",
-		children: [/* @__PURE__ */ w(k, { className: "mb-4 h-40 w-full rounded-xl" }), /* @__PURE__ */ w(k, { className: "h-64 w-full rounded-xl" })]
+		children: [/* @__PURE__ */ O(N, { className: "mb-4 h-40 w-full rounded-2xl" }), /* @__PURE__ */ O(N, { className: "h-64 w-full rounded-xl" })]
 	});
-	if (M || !H) return /* @__PURE__ */ w(t, {
+	if (R || !J) return /* @__PURE__ */ O(n, {
 		title: "Course",
 		backPath: "/courses/courses-page",
-		children: M ? /* @__PURE__ */ w(s, {
+		children: R ? /* @__PURE__ */ O(c, {
 			title: "Couldn't load course",
-			error: M
-		}) : /* @__PURE__ */ w(o, {
+			error: R
+		}) : /* @__PURE__ */ O(ee, {
 			title: "Course not found",
 			description: "This course may have been unpublished."
 		})
 	});
-	let X = W?.lessonsCompleted ?? 0;
-	return /* @__PURE__ */ T(t, {
-		hero: !0,
+	let Q = X?.lessonsCompleted ?? 0, $ = Math.max(0, Y.length - Q), le = X && X.progressPct >= 100 ? "Course complete — claim your certificate below." : $ === 1 ? "1 lesson to go — almost there!" : `${$} lessons to go — keep it up!`, ue = `${J.topic ?? ""} ${J.title}`;
+	return /* @__PURE__ */ k(n, {
 		backPath: "/courses/courses-page",
-		title: H.title,
-		description: H.summary ?? void 0,
-		actions: W ? /* @__PURE__ */ T(D, {
-			onClick: Y,
-			disabled: L || X >= U.length,
-			children: [/* @__PURE__ */ w(g, { size: 16 }), X >= U.length ? "Completed" : "Complete next lesson"]
-		}) : /* @__PURE__ */ T(D, {
-			onClick: J,
-			disabled: F,
+		title: J.title,
+		description: J.summary ?? void 0,
+		actions: X ? /* @__PURE__ */ k(j, {
+			onClick: ce,
+			disabled: U || Q >= Y.length,
+			children: [/* @__PURE__ */ O(g, { size: 16 }), Q >= Y.length ? "Completed" : "Complete next lesson"]
+		}) : /* @__PURE__ */ k(j, {
+			onClick: se,
+			disabled: V,
 			children: [
-				/* @__PURE__ */ w(h, { size: 16 }),
+				/* @__PURE__ */ O(h, { size: 16 }),
 				" ",
-				F ? "Enrolling…" : "Enroll"
+				V ? "Enrolling…" : "Enroll"
 			]
 		}),
 		children: [
-			/* @__PURE__ */ T("div", {
-				className: "mb-5 flex flex-wrap items-center gap-2",
-				children: [
-					/* @__PURE__ */ w(a, {
-						status: H.level,
-						kind: "level"
-					}),
-					/* @__PURE__ */ w(a, { status: H.status }),
-					H.topic ? /* @__PURE__ */ T(E, {
-						variant: "outline",
-						className: "gap-1",
-						children: [
-							/* @__PURE__ */ w(y, { size: 12 }),
-							" ",
-							H.topic
-						]
-					}) : null,
-					H.tags.map((e) => /* @__PURE__ */ w(E, {
-						variant: "secondary",
-						children: e
-					}, e))
-				]
+			/* @__PURE__ */ O(i, {
+				height: "h-40",
+				seed: ue,
+				icon: a(J.topic ?? J.title),
+				className: "mb-5 rounded-2xl",
+				children: /* @__PURE__ */ k("div", {
+					className: "flex w-full flex-col gap-2",
+					children: [
+						/* @__PURE__ */ O("span", {
+							className: "text-xs font-medium uppercase tracking-wide text-white/80",
+							children: J.topic ?? "Course"
+						}),
+						/* @__PURE__ */ O("h2", {
+							className: "text-2xl font-bold leading-tight text-white drop-shadow-sm sm:text-3xl",
+							children: J.title
+						}),
+						/* @__PURE__ */ k("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [
+								/* @__PURE__ */ O(F, {
+									icon: T,
+									children: s(J.level)
+								}),
+								/* @__PURE__ */ O(F, {
+									icon: g,
+									children: s(J.status)
+								}),
+								J.topic ? /* @__PURE__ */ O(F, {
+									icon: b,
+									children: J.topic
+								}) : null
+							]
+						})
+					]
+				})
 			}),
-			/* @__PURE__ */ T("div", {
+			J.tags.length ? /* @__PURE__ */ O("div", {
+				className: "mb-5 flex flex-wrap items-center gap-2",
+				children: J.tags.map((e) => /* @__PURE__ */ O(A, {
+					variant: "secondary",
+					children: e
+				}, e))
+			}) : null,
+			/* @__PURE__ */ k("div", {
 				className: "mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4",
 				children: [
-					/* @__PURE__ */ w(n, {
+					/* @__PURE__ */ O(r, {
 						label: "Lessons",
-						value: U.length,
-						icon: v
+						value: Y.length,
+						icon: y,
+						tone: "blue"
 					}),
-					/* @__PURE__ */ w(n, {
+					/* @__PURE__ */ O(r, {
 						label: "Duration",
-						value: r(H.estimatedMinutes),
-						icon: _
+						value: o(J.estimatedMinutes),
+						icon: _,
+						tone: "teal"
 					}),
-					/* @__PURE__ */ w(n, {
+					/* @__PURE__ */ O(r, {
 						label: "Enrolled",
-						value: H.enrollments?.length ?? 0,
-						icon: h
+						value: J.enrollments?.length ?? 0,
+						icon: E,
+						tone: "indigo"
 					}),
-					/* @__PURE__ */ w(n, {
+					/* @__PURE__ */ O(r, {
 						label: "Your progress",
-						value: W ? `${W.progressPct}%` : "Not started",
-						icon: g
+						value: X ? `${X.progressPct}%` : "Not started",
+						icon: T,
+						tone: "purple"
 					})
 				]
 			}),
-			W ? /* @__PURE__ */ T(O, {
-				className: "mb-6 p-4",
-				children: [/* @__PURE__ */ T("div", {
-					className: "mb-2 flex items-center justify-between text-sm",
-					children: [/* @__PURE__ */ w("span", {
-						className: "font-medium text-text-primary",
-						children: "Your progress"
-					}), /* @__PURE__ */ T("span", {
-						className: "text-text-secondary",
+			X ? /* @__PURE__ */ k(M, {
+				className: "mb-6 p-5",
+				children: [
+					/* @__PURE__ */ k("div", {
+						className: "mb-3 flex items-center gap-2",
 						children: [
-							X,
-							"/",
-							U.length,
-							" lessons · ",
-							W.progressPct,
-							"%"
+							/* @__PURE__ */ O("span", {
+								className: "flex h-8 w-8 items-center justify-center rounded-lg bg-accent-primary/15 text-accent-primary",
+								children: /* @__PURE__ */ O(T, { size: 16 })
+							}),
+							/* @__PURE__ */ O("span", {
+								className: "text-sm font-semibold text-text-primary",
+								children: "Your progress"
+							}),
+							/* @__PURE__ */ k("span", {
+								className: "ml-auto text-sm text-text-secondary",
+								children: [
+									Q,
+									"/",
+									Y.length,
+									" lessons · ",
+									X.progressPct,
+									"%"
+								]
+							})
 						]
-					})]
-				}), /* @__PURE__ */ w("div", {
-					className: "h-2 w-full overflow-hidden rounded-full bg-bg-sunken",
-					children: /* @__PURE__ */ w("div", {
-						className: "h-full rounded-full bg-accent-primary transition-all",
-						style: { width: `${W.progressPct}%` }
+					}),
+					/* @__PURE__ */ O("div", {
+						className: "h-2.5 w-full overflow-hidden rounded-full bg-bg-sunken",
+						children: /* @__PURE__ */ O("div", {
+							className: "h-full rounded-full bg-gradient-to-r from-accent-primary via-accent-indigo to-accent-purple transition-all duration-500",
+							style: { width: `${X.progressPct}%` }
+						})
+					}),
+					/* @__PURE__ */ O("p", {
+						className: "mt-2 text-xs text-text-muted",
+						children: le
 					})
-				})]
+				]
 			}) : null,
-			G ? /* @__PURE__ */ T(O, {
-				className: "mb-6 flex flex-wrap items-center gap-3 border-status-success-border p-4",
-				children: [/* @__PURE__ */ w(m, {
-					className: "text-accent-teal",
-					size: 22
-				}), /* @__PURE__ */ T("div", {
-					className: "min-w-0",
-					children: [/* @__PURE__ */ w("div", {
-						className: "text-sm font-semibold text-text-primary",
-						children: "Certificate earned"
-					}), /* @__PURE__ */ T("div", {
-						className: "text-xs text-text-muted",
-						children: [
-							"Serial ",
-							G.serial,
-							" · Score ",
-							G.score
-						]
-					})]
-				})]
-			}) : K ? /* @__PURE__ */ T(O, {
-				className: "mb-6 flex flex-wrap items-center justify-between gap-3 p-4",
-				children: [/* @__PURE__ */ T("div", {
-					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ w(m, {
-						className: "text-accent-teal",
-						size: 22
-					}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("div", {
-						className: "text-sm font-semibold text-text-primary",
+			Z ? /* @__PURE__ */ k(M, {
+				className: "mb-6 flex flex-wrap items-center gap-3 border border-status-success-border/60 bg-status-success-bg-subtle/30 p-4",
+				children: [
+					/* @__PURE__ */ O("span", {
+						className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-status-warning-bg-subtle text-status-warning-text ring-1 ring-status-warning-border/30",
+						children: /* @__PURE__ */ O(m, { size: 22 })
+					}),
+					/* @__PURE__ */ k("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ O("div", {
+							className: "text-sm font-semibold text-text-primary",
+							children: "Certificate earned"
+						}), /* @__PURE__ */ k("div", {
+							className: "text-xs text-text-muted",
+							children: [
+								"Serial ",
+								Z.serial,
+								" · Score ",
+								Z.score
+							]
+						})]
+					}),
+					/* @__PURE__ */ k("span", {
+						className: "inline-flex items-center gap-1 rounded-full border border-status-success-border bg-status-success-bg-subtle px-2.5 py-1 text-xs font-medium text-status-success-text",
+						children: [/* @__PURE__ */ O(C, { size: 13 }), " Verified"]
+					})
+				]
+			}) : ae ? /* @__PURE__ */ k(M, {
+				className: "mb-6 flex flex-col items-start gap-4 border border-status-success-border/60 bg-status-success-bg-subtle/40 p-5 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ k("div", {
+					className: "flex items-center gap-4",
+					children: [/* @__PURE__ */ O("span", {
+						className: "flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-status-warning-bg-subtle text-status-warning-text ring-1 ring-status-warning-border/40",
+						children: /* @__PURE__ */ O(ie, { size: 26 })
+					}), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("div", {
+						className: "text-base font-semibold text-text-primary",
 						children: "You finished this course"
-					}), /* @__PURE__ */ w("div", {
-						className: "text-xs text-text-muted",
+					}), /* @__PURE__ */ O("div", {
+						className: "text-sm text-text-muted",
 						children: "Claim your verifiable certificate of completion."
 					})] })]
-				}), /* @__PURE__ */ T(D, {
-					onClick: q,
-					disabled: V,
+				}), /* @__PURE__ */ k(j, {
+					onClick: oe,
+					disabled: q,
 					children: [
-						/* @__PURE__ */ w(m, { size: 16 }),
+						/* @__PURE__ */ O(m, { size: 16 }),
 						" ",
-						V ? "Issuing…" : "Claim certificate"
+						q ? "Issuing…" : "Claim certificate"
 					]
 				})]
 			}) : null,
-			/* @__PURE__ */ T(O, {
+			/* @__PURE__ */ k(M, {
 				className: "p-5",
-				children: [/* @__PURE__ */ w("h2", {
-					className: "mb-2 text-base font-semibold text-text-primary",
-					children: "Curriculum"
-				}), U.length === 0 ? /* @__PURE__ */ w("p", {
+				children: [/* @__PURE__ */ k("div", {
+					className: "mb-3 flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ k("h2", {
+						className: "flex items-center gap-2 text-base font-semibold text-text-primary",
+						children: [/* @__PURE__ */ O(h, {
+							size: 18,
+							className: "text-accent-primary"
+						}), " Curriculum"]
+					}), Y.length ? /* @__PURE__ */ k("span", {
+						className: "rounded-full bg-status-success-bg-subtle px-2.5 py-1 text-xs font-medium text-status-success-text",
+						children: [
+							Q,
+							"/",
+							Y.length,
+							" completed"
+						]
+					}) : null]
+				}), Y.length === 0 ? /* @__PURE__ */ O("p", {
 					className: "py-6 text-center text-sm text-text-muted",
 					children: "Lessons for this course are being prepared."
-				}) : /* @__PURE__ */ w("div", { children: U.map((e, t) => /* @__PURE__ */ w(j, {
-					lesson: e,
-					done: t < X
-				}, e.id)) })]
+				}) : /* @__PURE__ */ O("div", {
+					className: "flex flex-col",
+					children: Y.map((e, t) => /* @__PURE__ */ O(I, {
+						lesson: e,
+						index: t,
+						done: t < Q
+					}, e.id))
+				})]
 			})
 		]
 	});
 }
 //#endregion
-export { M as CoursesCourseDetailsPagePage };
+export { L as CoursesCourseDetailsPagePage };
 
 //# sourceMappingURL=CoursesCourseDetailsPagePage.js.map