@burdenoff/microfe-crewfoundry 2026.704.5 → 2026.704.7

package/dist/crewfoundry/pages/LearningLearningPathsPagePage.js

@@ -1,13 +1,17 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { formatEnumLabel as t } from "../utils/formatEnumLabel.js";
-import { FormModal as n, useFormModal as r } from "../components/forms/FormModal.js";
-import { BookOpen as i, GraduationCap as a, Plus 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, CardContent as f, CardDescription as p, CardHeader as m, CardTitle as h, GlassCard as g, GradientText as _, IllustratedEmptyState as v, PagePurpose as y, Pagination as b } from "@burdenoff/fe-libs/ui";
-import { usePagination as x } from "@burdenoff/fe-libs/shared/hooks";
+import { PathSteps as n } from "../components/viz/PathSteps.js";
+import { AvatarStack as r } from "../components/viz/AvatarStack.js";
+import "../components/viz/index.js";
+import { FormModal as i, useFormModal as a } from "../components/forms/FormModal.js";
+import { useMemo as o } from "react";
+import { BookOpen as s, Clock as c, Layers as l, Plus as u } from "lucide-react";
+import { useNavigate as d } from "react-router-dom";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Badge as m, Button as h, Card as g, CardContent as _, GradientText as v, IllustratedEmptyState as y, PagePurpose as b, Pagination as x } from "@burdenoff/fe-libs/ui";
+import { usePagination as S } from "@burdenoff/fe-libs/shared/hooks";
 //#region src/crewfoundry/pages/LearningLearningPathsPagePage.tsx
-var S = [
+var C = [
 	{
 		name: "title",
 		label: "Path Title",
@@ -50,115 +54,162 @@ var S = [
 		]
 	}
 ];
-function C() {
-	let { learningPaths: C, courses: w, addLearningPath: T } = e(), E = s(), D = r(), { page: O, pageSize: k, offset: A, setPage: j } = x({ initialPageSize: 9 }), M = C.slice(A, A + k), N = (e) => E(`../learning/learning-path-detail-page?id=${encodeURIComponent(e)}`);
-	return /* @__PURE__ */ l("div", {
+function w() {
+	let { learningPaths: w, courses: T, employees: E, addLearningPath: D } = e(), O = d(), k = a(), { page: A, pageSize: j, offset: M, setPage: N } = S({ initialPageSize: 6 }), P = w.slice(M, M + j), F = o(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of T) e.set(t.id, t.title);
+		return e;
+	}, [T]), I = o(() => E.slice(0, 5).map((e) => ({
+		name: `${e.firstName} ${e.lastName}`.trim(),
+		avatarUrl: e.avatar
+	})), [E]), L = (e) => O(`../learning/learning-path-detail-page?id=${encodeURIComponent(e)}`);
+	return /* @__PURE__ */ p("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ p("div", {
 				className: "flex flex-wrap items-start justify-between gap-3",
-				children: [/* @__PURE__ */ l("div", { children: [
-					/* @__PURE__ */ c("h1", {
+				children: [/* @__PURE__ */ p("div", { children: [
+					/* @__PURE__ */ f("h1", {
 						className: "text-2xl font-semibold",
-						children: /* @__PURE__ */ c(_, { children: "Learning Paths" })
+						children: /* @__PURE__ */ f(v, { children: "Learning Paths" })
 					}),
-					/* @__PURE__ */ c("p", {
+					/* @__PURE__ */ f("p", {
 						className: "text-sm text-text-secondary",
-						children: "Structured learning journeys for career growth"
+						children: "Structured skill journeys for career growth"
 					}),
-					/* @__PURE__ */ c(y, {
+					/* @__PURE__ */ f(b, {
 						className: "mt-1",
 						children: "Structured learning journeys that string courses together — follow a path to build toward a role or skill set step by step."
 					})
-				] }), /* @__PURE__ */ l(d, {
-					onClick: () => D.openModal(),
-					children: [/* @__PURE__ */ c(o, { className: "mr-1 h-4 w-4" }), "Create Path"]
+				] }), /* @__PURE__ */ p(h, {
+					onClick: () => k.openModal(),
+					children: [/* @__PURE__ */ f(u, { className: "mr-1 h-4 w-4" }), "New Path"]
 				})]
 			}),
-			/* @__PURE__ */ c("div", {
-				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-				children: C.length === 0 ? /* @__PURE__ */ c("div", {
-					className: "col-span-full",
-					children: /* @__PURE__ */ c(v, {
-						illustration: "empty-generic",
-						title: "No learning paths yet",
-						description: "Learning paths will appear here once they are created."
-					})
-				}) : M.map((e, n) => {
-					let r = w.filter((t) => e.courses.includes(t.id));
-					return /* @__PURE__ */ l(g, {
-						treatment: n === 0 ? "glass" : "plain",
-						glow: n === 0,
-						role: "button",
-						tabIndex: 0,
-						"aria-label": `View ${e.title}`,
-						onClick: () => N(e.id),
-						onKeyDown: (t) => {
-							(t.key === "Enter" || t.key === " ") && (t.preventDefault(), N(e.id));
-						},
-						className: "hover:shadow-md transition-shadow cursor-pointer focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]",
-						children: [/* @__PURE__ */ l(m, { children: [/* @__PURE__ */ c(h, {
-							className: "text-lg",
-							children: e.title
-						}), /* @__PURE__ */ c(p, { children: e.description })] }), /* @__PURE__ */ c(f, { children: /* @__PURE__ */ l("div", {
-							className: "space-y-3",
-							children: [
-								/* @__PURE__ */ l("div", {
-									className: "flex items-center justify-between text-sm text-text-secondary",
-									children: [/* @__PURE__ */ l("span", {
-										className: "flex items-center gap-1",
-										children: [
-											/* @__PURE__ */ c(i, { className: "h-3 w-3" }),
-											e.courses.length,
-											" courses"
-										]
-									}), /* @__PURE__ */ c("span", { children: e.duration })]
-								}),
-								/* @__PURE__ */ c(u, {
-									variant: "outline",
-									className: "text-[10px]",
-									children: t(e.level)
-								}),
-								/* @__PURE__ */ c("div", {
-									className: "space-y-1 mt-2",
-									children: r.map((e) => /* @__PURE__ */ l("div", {
-										className: "flex items-center gap-2 text-xs text-text-secondary",
-										children: [/* @__PURE__ */ c(a, { className: "h-3 w-3" }), e.title]
-									}, e.id))
-								}),
-								/* @__PURE__ */ l("div", {
-									className: "pt-2 border-t",
-									children: [/* @__PURE__ */ l("div", {
-										className: "flex justify-between text-xs mb-1",
-										children: [/* @__PURE__ */ l("span", { children: [e.enrolled, " enrolled"] }), /* @__PURE__ */ l("span", { children: [e.completionRate, "%"] })]
-									}), /* @__PURE__ */ c("div", {
-										className: "h-2 bg-bg-sunken rounded overflow-hidden",
-										children: /* @__PURE__ */ c("div", {
-											className: "h-2 bg-action-primary-bg rounded",
-											style: { width: `${e.completionRate}%` }
-										})
-									})]
-								})
-							]
-						}) })]
+			w.length === 0 ? /* @__PURE__ */ f(y, {
+				illustration: "empty-generic",
+				title: "No learning paths yet",
+				description: "Learning paths will appear here once they are created.",
+				action: /* @__PURE__ */ p(h, {
+					onClick: () => k.openModal(),
+					children: [/* @__PURE__ */ f(u, { className: "mr-1 h-4 w-4" }), "Create your first path"]
+				})
+			}) : /* @__PURE__ */ f("div", {
+				className: "space-y-4",
+				children: P.map((e) => {
+					let i = e.courses, a = i.length, o = Math.round(e.completionRate / 100 * a), u = i.map((e, t) => ({
+						label: F.get(e) ?? "Course",
+						state: t < o ? "done" : t === o ? "active" : "todo"
+					}));
+					return /* @__PURE__ */ f(g, {
+						className: "overflow-hidden",
+						children: /* @__PURE__ */ f(_, {
+							className: "p-5",
+							children: /* @__PURE__ */ p("div", {
+								className: "grid gap-5 lg:grid-cols-[minmax(0,18rem)_minmax(0,1fr)]",
+								children: [/* @__PURE__ */ p("div", {
+									className: "space-y-3",
+									children: [
+										/* @__PURE__ */ f("button", {
+											type: "button",
+											onClick: () => L(e.id),
+											className: "text-left text-lg font-semibold outline-none hover:text-action-primary-bg focus-visible:text-action-primary-bg",
+											children: e.title
+										}),
+										/* @__PURE__ */ f("p", {
+											className: "line-clamp-2 text-sm text-text-secondary",
+											children: e.description
+										}),
+										/* @__PURE__ */ p("div", {
+											className: "flex flex-wrap gap-2",
+											children: [
+												/* @__PURE__ */ f(m, {
+													variant: "secondary",
+													className: "text-[10px]",
+													children: t(e.level)
+												}),
+												/* @__PURE__ */ p(m, {
+													variant: "outline",
+													className: "inline-flex items-center gap-1 text-[10px]",
+													children: [/* @__PURE__ */ f(c, { className: "h-3 w-3" }), e.duration]
+												}),
+												/* @__PURE__ */ p(m, {
+													variant: "outline",
+													className: "inline-flex items-center gap-1 text-[10px]",
+													children: [
+														/* @__PURE__ */ f(s, { className: "h-3 w-3" }),
+														a,
+														" courses"
+													]
+												})
+											]
+										}),
+										I.length > 0 && e.enrolled > 0 && /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
+											className: "mb-1 text-xs text-text-secondary",
+											children: "Enrolled learners"
+										}), /* @__PURE__ */ p("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ f(r, {
+												people: I,
+												size: 28,
+												max: 5
+											}), /* @__PURE__ */ p("span", {
+												className: "text-xs text-text-secondary tabular-nums",
+												children: [e.enrolled, " enrolled"]
+											})]
+										})] })
+									]
+								}), /* @__PURE__ */ p("div", {
+									className: "space-y-4",
+									children: [
+										/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ p("div", {
+											className: "mb-1 flex items-center justify-between text-sm",
+											children: [/* @__PURE__ */ f("span", {
+												className: "text-text-secondary",
+												children: "Overall progress"
+											}), /* @__PURE__ */ p("span", {
+												className: "font-semibold tabular-nums",
+												children: [e.completionRate, "% Complete"]
+											})]
+										}), /* @__PURE__ */ f("div", {
+											className: "h-2.5 overflow-hidden rounded-full bg-bg-sunken",
+											children: /* @__PURE__ */ f("div", {
+												className: "h-full rounded-full bg-action-primary-bg transition-[width] duration-500",
+												style: { width: `${e.completionRate}%` }
+											})
+										})] }),
+										u.length > 0 ? /* @__PURE__ */ f(n, { steps: u }) : /* @__PURE__ */ p("div", {
+											className: "flex items-center gap-2 rounded-md border border-dashed border-border-default px-3 py-4 text-sm text-text-secondary",
+											children: [/* @__PURE__ */ f(l, { className: "h-4 w-4" }), "No courses in this path yet — open the path to add them."]
+										}),
+										/* @__PURE__ */ f("div", { children: /* @__PURE__ */ f(h, {
+											variant: "outline",
+											size: "sm",
+											onClick: () => L(e.id),
+											children: "View path"
+										}) })
+									]
+								})]
+							})
+						})
 					}, e.id);
 				})
 			}),
-			C.length > k && /* @__PURE__ */ c(b, {
-				page: O,
-				pageSize: k,
-				totalItems: C.length,
-				onPageChange: j
+			w.length > j && /* @__PURE__ */ f(x, {
+				page: A,
+				pageSize: j,
+				totalItems: w.length,
+				onPageChange: N
 			}),
-			/* @__PURE__ */ c(n, {
-				open: D.open,
-				onOpenChange: D.onOpenChange,
+			/* @__PURE__ */ f(i, {
+				open: k.open,
+				onOpenChange: k.onOpenChange,
 				title: "Create Learning Path",
 				description: "Group courses into a structured journey. You can add courses after creating the path.",
-				fields: S,
+				fields: C,
 				submitLabel: "Create Path",
 				onSubmit: async (e) => {
-					await T({
+					await D({
 						id: `path-${Date.now()}`,
 						title: String(e.title ?? ""),
 						description: String(e.description ?? ""),
@@ -174,6 +225,6 @@ function C() {
 	});
 }
 //#endregion
-export { C as LearningLearningPathsPagePage };
+export { w as LearningLearningPathsPagePage };
 
 //# sourceMappingURL=LearningLearningPathsPagePage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LearningLearningPathsPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/LearningLearningPathsPagePage.tsx"],"sourcesContent":["import {\n  Badge,\n  Button,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n  GlassCard,\n  GradientText,\n  IllustratedEmptyState,\n  PagePurpose,\n  Pagination,\n} from '@burdenoff/fe-libs/ui';\nimport { usePagination } from '@burdenoff/fe-libs/shared/hooks';\nimport { BookOpen, GraduationCap, Plus } from 'lucide-react';\nimport { useNavigate } from 'react-router-dom';\nimport { useCrewFoundryStore, type LearningPath } from '../store/crewfoundryStore';\nimport {\n  FormModal,\n  useFormModal,\n  type FieldConfig,\n  type FormValues,\n} from '../components/forms/FormModal';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\n\nconst PATH_FIELDS: FieldConfig[] = [\n  { name: 'title', label: 'Path Title', type: 'text', required: true, colSpan: 2 },\n  { name: 'description', label: 'Description', type: 'textarea', required: true, colSpan: 2 },\n  {\n    name: 'duration',\n    label: 'Duration',\n    type: 'text',\n    required: true,\n    placeholder: 'e.g. 3 months',\n  },\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\nexport function LearningLearningPathsPagePage() {\n  const { learningPaths, courses, addLearningPath } = useCrewFoundryStore();\n  const navigate = useNavigate();\n  const createModal = useFormModal();\n  const { page, pageSize, offset, setPage } = usePagination({ initialPageSize: 9 });\n  const pagedPaths = learningPaths.slice(offset, offset + pageSize);\n  const openPath = (id: string) =>\n    navigate(`../learning/learning-path-detail-page?id=${encodeURIComponent(id)}`);\n\n  const handleCreate = async (values: FormValues) => {\n    const path: LearningPath = {\n      id: `path-${Date.now()}`,\n      title: String(values.title ?? ''),\n      description: String(values.description ?? ''),\n      courses: [],\n      duration: String(values.duration ?? ''),\n      level: String(values.level ?? 'beginner'),\n      enrolled: 0,\n      completionRate: 0,\n    };\n    await addLearningPath(path);\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>Learning Paths</GradientText>\n          </h1>\n          <p className=\"text-sm text-text-secondary\">\n            Structured learning journeys for career growth\n          </p>\n          <PagePurpose className=\"mt-1\">\n            Structured learning journeys that string courses together — follow a path to build\n            toward a role or skill set step by step.\n          </PagePurpose>\n        </div>\n        <Button onClick={() => createModal.openModal()}>\n          <Plus className=\"mr-1 h-4 w-4\" />\n          Create Path\n        </Button>\n      </div>\n      <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n        {learningPaths.length === 0 ? (\n          <div className=\"col-span-full\">\n            <IllustratedEmptyState\n              illustration=\"empty-generic\"\n              title=\"No learning paths yet\"\n              description=\"Learning paths will appear here once they are created.\"\n            />\n          </div>\n        ) : (\n          pagedPaths.map((path, _idx) => {\n            const pathCourses = courses.filter((c) => path.courses.includes(c.id));\n            return (\n              <GlassCard\n                key={path.id}\n                treatment={_idx === 0 ? 'glass' : 'plain'}\n                glow={_idx === 0}\n                role=\"button\"\n                tabIndex={0}\n                aria-label={`View ${path.title}`}\n                onClick={() => openPath(path.id)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    openPath(path.id);\n                  }\n                }}\n                className=\"hover:shadow-md transition-shadow cursor-pointer focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]\"\n              >\n                <CardHeader>\n                  <CardTitle className=\"text-lg\">{path.title}</CardTitle>\n                  <CardDescription>{path.description}</CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"space-y-3\">\n                    <div className=\"flex items-center justify-between text-sm text-text-secondary\">\n                      <span className=\"flex items-center gap-1\">\n                        <BookOpen className=\"h-3 w-3\" />\n                        {path.courses.length} courses\n                      </span>\n                      <span>{path.duration}</span>\n                    </div>\n                    <Badge variant=\"outline\" className=\"text-[10px]\">\n                      {formatEnumLabel(path.level)}\n                    </Badge>\n                    <div className=\"space-y-1 mt-2\">\n                      {pathCourses.map((c) => (\n                        <div\n                          key={c.id}\n                          className=\"flex items-center gap-2 text-xs text-text-secondary\"\n                        >\n                          <GraduationCap className=\"h-3 w-3\" />\n                          {c.title}\n                        </div>\n                      ))}\n                    </div>\n                    <div className=\"pt-2 border-t\">\n                      <div className=\"flex justify-between text-xs mb-1\">\n                        <span>{path.enrolled} enrolled</span>\n                        <span>{path.completionRate}%</span>\n                      </div>\n                      <div className=\"h-2 bg-bg-sunken rounded overflow-hidden\">\n                        <div\n                          className=\"h-2 bg-action-primary-bg rounded\"\n                          style={{ width: `${path.completionRate}%` }}\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </CardContent>\n              </GlassCard>\n            );\n          })\n        )}\n      </div>\n\n      {learningPaths.length > pageSize && (\n        <Pagination\n          page={page}\n          pageSize={pageSize}\n          totalItems={learningPaths.length}\n          onPageChange={setPage}\n        />\n      )}\n\n      <FormModal\n        open={createModal.open}\n        onOpenChange={createModal.onOpenChange}\n        title=\"Create Learning Path\"\n        description=\"Group courses into a structured journey. You can add courses after creating the path.\"\n        fields={PATH_FIELDS}\n        submitLabel=\"Create Path\"\n        onSubmit={handleCreate}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"LearningLearningPathsPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/LearningLearningPathsPagePage.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  GradientText,\n  IllustratedEmptyState,\n  PagePurpose,\n  Pagination,\n} from '@burdenoff/fe-libs/ui';\nimport { usePagination } from '@burdenoff/fe-libs/shared/hooks';\nimport { BookOpen, Clock, Layers, Plus } from 'lucide-react';\nimport { useNavigate } from 'react-router-dom';\nimport { useCrewFoundryStore, type LearningPath } from '../store/crewfoundryStore';\nimport {\n  FormModal,\n  useFormModal,\n  type FieldConfig,\n  type FormValues,\n} from '../components/forms/FormModal';\nimport { AvatarStack, PathSteps, type PathStep, type Person } from '../components/viz';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\n\nconst PATH_FIELDS: FieldConfig[] = [\n  { name: 'title', label: 'Path Title', type: 'text', required: true, colSpan: 2 },\n  { name: 'description', label: 'Description', type: 'textarea', required: true, colSpan: 2 },\n  {\n    name: 'duration',\n    label: 'Duration',\n    type: 'text',\n    required: true,\n    placeholder: 'e.g. 3 months',\n  },\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\nexport function LearningLearningPathsPagePage() {\n  const { learningPaths, courses, employees, addLearningPath } = useCrewFoundryStore();\n  const navigate = useNavigate();\n  const createModal = useFormModal();\n  const { page, pageSize, offset, setPage } = usePagination({ initialPageSize: 6 });\n  const pagedPaths = learningPaths.slice(offset, offset + pageSize);\n\n  const courseTitleById = useMemo(() => {\n    const map = new Map<string, string>();\n    for (const c of courses) {\n      map.set(c.id, c.title);\n    }\n    return map;\n  }, [courses]);\n\n  const learnerPeople = useMemo<Person[]>(\n    () =>\n      employees.slice(0, 5).map((e) => ({\n        name: `${e.firstName} ${e.lastName}`.trim(),\n        avatarUrl: e.avatar,\n      })),\n    [employees]\n  );\n\n  const openPath = (id: string) =>\n    navigate(`../learning/learning-path-detail-page?id=${encodeURIComponent(id)}`);\n\n  const handleCreate = async (values: FormValues) => {\n    const path: LearningPath = {\n      id: `path-${Date.now()}`,\n      title: String(values.title ?? ''),\n      description: String(values.description ?? ''),\n      courses: [],\n      duration: String(values.duration ?? ''),\n      level: String(values.level ?? 'beginner'),\n      enrolled: 0,\n      completionRate: 0,\n    };\n    await addLearningPath(path);\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>Learning Paths</GradientText>\n          </h1>\n          <p className=\"text-sm text-text-secondary\">Structured skill journeys for career growth</p>\n          <PagePurpose className=\"mt-1\">\n            Structured learning journeys that string courses together — follow a path to build\n            toward a role or skill set step by step.\n          </PagePurpose>\n        </div>\n        <Button onClick={() => createModal.openModal()}>\n          <Plus className=\"mr-1 h-4 w-4\" />\n          New Path\n        </Button>\n      </div>\n\n      {learningPaths.length === 0 ? (\n        <IllustratedEmptyState\n          illustration=\"empty-generic\"\n          title=\"No learning paths yet\"\n          description=\"Learning paths will appear here once they are created.\"\n          action={\n            <Button onClick={() => createModal.openModal()}>\n              <Plus className=\"mr-1 h-4 w-4\" />\n              Create your first path\n            </Button>\n          }\n        />\n      ) : (\n        <div className=\"space-y-4\">\n          {pagedPaths.map((path) => {\n            const courseIds = path.courses;\n            const numCourses = courseIds.length;\n            const completedCount = Math.round((path.completionRate / 100) * numCourses);\n            const steps: PathStep[] = courseIds.map((id, i) => ({\n              label: courseTitleById.get(id) ?? 'Course',\n              state: i < completedCount ? 'done' : i === completedCount ? 'active' : 'todo',\n            }));\n\n            return (\n              <Card key={path.id} className=\"overflow-hidden\">\n                <CardContent className=\"p-5\">\n                  <div className=\"grid gap-5 lg:grid-cols-[minmax(0,18rem)_minmax(0,1fr)]\">\n                    {/* Left: identity */}\n                    <div className=\"space-y-3\">\n                      <button\n                        type=\"button\"\n                        onClick={() => openPath(path.id)}\n                        className=\"text-left text-lg font-semibold outline-none hover:text-action-primary-bg focus-visible:text-action-primary-bg\"\n                      >\n                        {path.title}\n                      </button>\n                      <p className=\"line-clamp-2 text-sm text-text-secondary\">{path.description}</p>\n                      <div className=\"flex flex-wrap gap-2\">\n                        <Badge variant=\"secondary\" className=\"text-[10px]\">\n                          {formatEnumLabel(path.level)}\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"inline-flex items-center gap-1 text-[10px]\">\n                          <Clock className=\"h-3 w-3\" />\n                          {path.duration}\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"inline-flex items-center gap-1 text-[10px]\">\n                          <BookOpen className=\"h-3 w-3\" />\n                          {numCourses} courses\n                        </Badge>\n                      </div>\n                      {learnerPeople.length > 0 && path.enrolled > 0 && (\n                        <div>\n                          <p className=\"mb-1 text-xs text-text-secondary\">Enrolled learners</p>\n                          <div className=\"flex items-center gap-2\">\n                            <AvatarStack people={learnerPeople} size={28} max={5} />\n                            <span className=\"text-xs text-text-secondary tabular-nums\">\n                              {path.enrolled} enrolled\n                            </span>\n                          </div>\n                        </div>\n                      )}\n                    </div>\n\n                    {/* Right: progress + timeline */}\n                    <div className=\"space-y-4\">\n                      <div>\n                        <div className=\"mb-1 flex items-center justify-between text-sm\">\n                          <span className=\"text-text-secondary\">Overall progress</span>\n                          <span className=\"font-semibold tabular-nums\">\n                            {path.completionRate}% Complete\n                          </span>\n                        </div>\n                        <div className=\"h-2.5 overflow-hidden rounded-full bg-bg-sunken\">\n                          <div\n                            className=\"h-full rounded-full bg-action-primary-bg transition-[width] duration-500\"\n                            style={{ width: `${path.completionRate}%` }}\n                          />\n                        </div>\n                      </div>\n                      {steps.length > 0 ? (\n                        <PathSteps steps={steps} />\n                      ) : (\n                        <div className=\"flex items-center gap-2 rounded-md border border-dashed border-border-default px-3 py-4 text-sm text-text-secondary\">\n                          <Layers className=\"h-4 w-4\" />\n                          No courses in this path yet — open the path to add them.\n                        </div>\n                      )}\n                      <div>\n                        <Button variant=\"outline\" size=\"sm\" onClick={() => openPath(path.id)}>\n                          View path\n                        </Button>\n                      </div>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            );\n          })}\n        </div>\n      )}\n\n      {learningPaths.length > pageSize && (\n        <Pagination\n          page={page}\n          pageSize={pageSize}\n          totalItems={learningPaths.length}\n          onPageChange={setPage}\n        />\n      )}\n\n      <FormModal\n        open={createModal.open}\n        onOpenChange={createModal.onOpenChange}\n        title=\"Create Learning Path\"\n        description=\"Group courses into a structured journey. You can add courses after creating the path.\"\n        fields={PATH_FIELDS}\n        submitLabel=\"Create Path\"\n        onSubmit={handleCreate}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}