@burdenoff/microfe-technospam 2026.705.1 → 2026.705.2

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

@@ -1 +1 @@
-{"version":3,"file":"CoursesCourseDetailsPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesCourseDetailsPagePage.tsx"],"sourcesContent":["import { useSearchParams } from 'react-router-dom';\nimport {\n  Award,\n  BookOpen,\n  CheckCircle2,\n  Clock,\n  FileText,\n  Lock,\n  PlayCircle,\n  Layers,\n  Sparkles,\n} from 'lucide-react';\nimport { Badge, Button, GlassCard, Skeleton } from '@burdenoff/fe-libs/ui';\nimport { EmptyView, ErrorView, PageLayout, StatCard, StatusBadge } from '../components';\nimport { useTechnoSpam } from '../providers/TechnoSpamProvider';\nimport {\n  useCertificatesQuery,\n  useCourseQuery,\n  useEnroll,\n  useIssueCertificate,\n  useUpdateProgress,\n  type TecLesson,\n  type TecEnrollment,\n} from '../api/technospamApi';\nimport { formatDuration, humanizeEnum } from '../utils/format';\nimport { notify } from '../lib/toast';\n\nconst LESSON_ICON: Record<string, typeof PlayCircle> = {\n  VIDEO: PlayCircle,\n  ARTICLE: FileText,\n  INTERACTIVE: Sparkles,\n  QUIZ: CheckCircle2,\n  PROJECT: Layers,\n};\n\nfunction LessonRow({ lesson, done }: { lesson: TecLesson; done: boolean }) {\n  const Icon = LESSON_ICON[lesson.kind] ?? FileText;\n  return (\n    <div className=\"flex items-center gap-3 border-b border-border-seam py-3 last:border-0\">\n      <span\n        className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${\n          done\n            ? 'bg-status-success-bg-subtle text-status-success-text'\n            : 'bg-bg-sunken text-text-secondary'\n        }`}\n      >\n        {done ? <CheckCircle2 size={16} /> : <Icon size={16} />}\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-medium text-text-primary\">{lesson.title}</span>\n          {lesson.isPreview ? (\n            <Badge variant=\"secondary\" className=\"text-[11px]\">\n              Preview\n            </Badge>\n          ) : null}\n        </div>\n        <div className=\"text-xs text-text-muted\">\n          {humanizeEnum(lesson.kind)} · {formatDuration(lesson.estimatedMinutes)}\n        </div>\n      </div>\n      {!lesson.isPreview && !done ? <Lock size={14} className=\"text-text-muted\" /> : null}\n    </div>\n  );\n}\n\nexport function CoursesCourseDetailsPagePage() {\n  const [params] = useSearchParams();\n  const id = params.get('id') ?? '';\n  const { currentUser } = useTechnoSpam();\n  const { data, loading, error, refetch } = useCourseQuery(id);\n  const [enroll, { loading: enrolling }] = useEnroll();\n  const [updateProgress, { loading: savingProgress }] = useUpdateProgress();\n  const { data: certData, refetch: refetchCerts } = useCertificatesQuery(\n    currentUser?.id && id ? { learnerId: currentUser.id, courseId: id } : {}\n  );\n  const [issueCertificate, { loading: claiming }] = useIssueCertificate();\n\n  const course = data?.tecCourse ?? null;\n  const lessons = [...(course?.lessons ?? [])].sort((a, b) => a.position - b.position);\n  const myEnrollment: TecEnrollment | undefined = (course?.enrollments ?? []).find(\n    (e) => e.learnerId === currentUser?.id\n  );\n  const myCertificate = (certData?.tecListCertificates ?? []).find((c) => c.status === 'ISSUED');\n  const isComplete = !!myEnrollment && myEnrollment.progressPct >= 100;\n\n  const handleClaimCertificate = async () => {\n    if (!id || !currentUser?.id) return;\n    const res = await issueCertificate({\n      variables: { courseId: id, learnerId: currentUser.id, score: 100 },\n    });\n    if (res.data?.tecIssueCertificate) {\n      notify.success('Certificate issued', 'Your verifiable certificate is ready in My Learning.');\n      await refetchCerts();\n    }\n  };\n\n  const handleEnroll = async () => {\n    if (!id) return;\n    const res = await enroll({ variables: { input: { courseId: id } } });\n    if (res.data?.tecEnroll) {\n      notify.success('Enrolled', `You're enrolled in \"${course?.title}\".`);\n      await refetch();\n    }\n  };\n\n  const handleProgress = async () => {\n    if (!myEnrollment) return;\n    const nextCompleted = Math.min(lessons.length, myEnrollment.lessonsCompleted + 1);\n    const pct = lessons.length ? Math.round((nextCompleted / lessons.length) * 100) : 100;\n    const res = await updateProgress({\n      variables: {\n        input: { enrollmentId: myEnrollment.id, lessonsCompleted: nextCompleted, progressPct: pct },\n      },\n    });\n    if (res.data?.tecUpdateProgress) {\n      notify.success('Progress saved', `${pct}% complete`);\n      await refetch();\n    }\n  };\n\n  if (loading && !course) {\n    return (\n      <PageLayout title=\"Course\" backPath=\"/courses/courses-page\">\n        <Skeleton className=\"mb-4 h-40 w-full rounded-xl\" />\n        <Skeleton className=\"h-64 w-full rounded-xl\" />\n      </PageLayout>\n    );\n  }\n\n  if (error || !course) {\n    return (\n      <PageLayout title=\"Course\" backPath=\"/courses/courses-page\">\n        {error ? (\n          <ErrorView title=\"Couldn't load course\" error={error} />\n        ) : (\n          <EmptyView\n            title=\"Course not found\"\n            description=\"This course may have been unpublished.\"\n          />\n        )}\n      </PageLayout>\n    );\n  }\n\n  const completedLessons = myEnrollment?.lessonsCompleted ?? 0;\n\n  return (\n    <PageLayout\n      hero\n      backPath=\"/courses/courses-page\"\n      title={course.title}\n      description={course.summary ?? undefined}\n      actions={\n        myEnrollment ? (\n          <Button\n            onClick={handleProgress}\n            disabled={savingProgress || completedLessons >= lessons.length}\n          >\n            <CheckCircle2 size={16} />\n            {completedLessons >= lessons.length ? 'Completed' : 'Complete next lesson'}\n          </Button>\n        ) : (\n          <Button onClick={handleEnroll} disabled={enrolling}>\n            <BookOpen size={16} /> {enrolling ? 'Enrolling…' : 'Enroll'}\n          </Button>\n        )\n      }\n    >\n      <div className=\"mb-5 flex flex-wrap items-center gap-2\">\n        <StatusBadge status={course.level} kind=\"level\" />\n        <StatusBadge status={course.status} />\n        {course.topic ? (\n          <Badge variant=\"outline\" className=\"gap-1\">\n            <Layers size={12} /> {course.topic}\n          </Badge>\n        ) : null}\n        {course.tags.map((t) => (\n          <Badge key={t} variant=\"secondary\">\n            {t}\n          </Badge>\n        ))}\n      </div>\n\n      <div className=\"mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard label=\"Lessons\" value={lessons.length} icon={FileText} />\n        <StatCard label=\"Duration\" value={formatDuration(course.estimatedMinutes)} icon={Clock} />\n        <StatCard label=\"Enrolled\" value={course.enrollments?.length ?? 0} icon={BookOpen} />\n        <StatCard\n          label=\"Your progress\"\n          value={myEnrollment ? `${myEnrollment.progressPct}%` : 'Not started'}\n          icon={CheckCircle2}\n        />\n      </div>\n\n      {myEnrollment ? (\n        <GlassCard className=\"mb-6 p-4\">\n          <div className=\"mb-2 flex items-center justify-between text-sm\">\n            <span className=\"font-medium text-text-primary\">Your progress</span>\n            <span className=\"text-text-secondary\">\n              {completedLessons}/{lessons.length} lessons · {myEnrollment.progressPct}%\n            </span>\n          </div>\n          <div className=\"h-2 w-full overflow-hidden rounded-full bg-bg-sunken\">\n            <div\n              className=\"h-full rounded-full bg-accent-primary transition-all\"\n              style={{ width: `${myEnrollment.progressPct}%` }}\n            />\n          </div>\n        </GlassCard>\n      ) : null}\n\n      {myCertificate ? (\n        <GlassCard className=\"mb-6 flex flex-wrap items-center gap-3 border-status-success-border p-4\">\n          <Award className=\"text-accent-teal\" size={22} />\n          <div className=\"min-w-0\">\n            <div className=\"text-sm font-semibold text-text-primary\">Certificate earned</div>\n            <div className=\"text-xs text-text-muted\">\n              Serial {myCertificate.serial} · Score {myCertificate.score}\n            </div>\n          </div>\n        </GlassCard>\n      ) : isComplete ? (\n        <GlassCard className=\"mb-6 flex flex-wrap items-center justify-between gap-3 p-4\">\n          <div className=\"flex items-center gap-3\">\n            <Award className=\"text-accent-teal\" size={22} />\n            <div>\n              <div className=\"text-sm font-semibold text-text-primary\">\n                You finished this course\n              </div>\n              <div className=\"text-xs text-text-muted\">\n                Claim your verifiable certificate of completion.\n              </div>\n            </div>\n          </div>\n          <Button onClick={handleClaimCertificate} disabled={claiming}>\n            <Award size={16} /> {claiming ? 'Issuing…' : 'Claim certificate'}\n          </Button>\n        </GlassCard>\n      ) : null}\n\n      <GlassCard className=\"p-5\">\n        <h2 className=\"mb-2 text-base font-semibold text-text-primary\">Curriculum</h2>\n        {lessons.length === 0 ? (\n          <p className=\"py-6 text-center text-sm text-text-muted\">\n            Lessons for this course are being prepared.\n          </p>\n        ) : (\n          <div>\n            {lessons.map((lesson, i) => (\n              <LessonRow key={lesson.id} lesson={lesson} done={i < completedLessons} />\n            ))}\n          </div>\n        )}\n      </GlassCard>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CoursesCourseDetailsPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesCourseDetailsPagePage.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport {\n  Award,\n  BookOpen,\n  CheckCircle2,\n  Clock,\n  Eye,\n  FileText,\n  Lock,\n  PlayCircle,\n  Layers,\n  ShieldCheck,\n  Sparkles,\n  Trophy,\n  TrendingUp,\n  Users,\n  type LucideIcon,\n} from 'lucide-react';\nimport { Badge, Button, GlassCard, Skeleton } from '@burdenoff/fe-libs/ui';\nimport {\n  EmptyView,\n  ErrorView,\n  MediaCover,\n  PageLayout,\n  StatCard,\n  StatusBadge,\n  topicIcon,\n} from '../components';\nimport { useTechnoSpam } from '../providers/TechnoSpamProvider';\nimport {\n  useCertificatesQuery,\n  useCourseQuery,\n  useEnroll,\n  useIssueCertificate,\n  useUpdateProgress,\n  type TecLesson,\n  type TecEnrollment,\n} from '../api/technospamApi';\nimport { formatDuration, humanizeEnum } from '../utils/format';\nimport { notify } from '../lib/toast';\nimport { cn } from '../utils/cn';\n\n/** Per-lesson-kind icon + on-theme tint (chip) and pill (badge) classes. */\nconst KIND_META: Record<string, { icon: LucideIcon; chip: string; badge: string }> = {\n  VIDEO: {\n    icon: PlayCircle,\n    chip: 'bg-accent-primary/15 text-accent-primary',\n    badge: 'border-accent-primary/25 bg-accent-primary/10 text-accent-primary',\n  },\n  ARTICLE: {\n    icon: FileText,\n    chip: 'bg-accent-indigo/15 text-accent-indigo',\n    badge: 'border-accent-indigo/25 bg-accent-indigo/10 text-accent-indigo',\n  },\n  INTERACTIVE: {\n    icon: Sparkles,\n    chip: 'bg-accent-teal/15 text-accent-teal',\n    badge: 'border-accent-teal/25 bg-accent-teal/10 text-accent-teal',\n  },\n  QUIZ: {\n    icon: CheckCircle2,\n    chip: 'bg-accent-purple/15 text-accent-purple',\n    badge: 'border-accent-purple/25 bg-accent-purple/10 text-accent-purple',\n  },\n  PROJECT: {\n    icon: Layers,\n    chip: 'bg-status-warning-bg-subtle text-status-warning-text',\n    badge: 'border-status-warning-border bg-status-warning-bg-subtle text-status-warning-text',\n  },\n};\n\nfunction HeroBadge({ icon: Icon, children }: { icon?: LucideIcon; children: ReactNode }) {\n  return (\n    <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\">\n      {Icon ? <Icon size={12} /> : null}\n      {children}\n    </span>\n  );\n}\n\nfunction LessonRow({ lesson, index, done }: { lesson: TecLesson; index: number; done: boolean }) {\n  const meta = KIND_META[lesson.kind] ?? KIND_META.ARTICLE!;\n  const Icon = meta.icon;\n  return (\n    <div className=\"group flex items-center gap-3 rounded-xl px-2 py-3 transition-colors hover:bg-bg-sunken/60\">\n      <span className=\"hidden w-6 shrink-0 text-center text-sm font-medium tabular-nums text-text-muted sm:block\">\n        {index + 1}\n      </span>\n      <span\n        className={cn(\n          'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg',\n          done ? 'bg-status-success-bg-subtle text-status-success-text' : meta.chip\n        )}\n      >\n        {done ? <CheckCircle2 size={17} /> : <Icon size={17} />}\n      </span>\n      <div className=\"min-w-0 flex-1\">\n        <span className=\"block truncate text-sm font-medium text-text-primary\">{lesson.title}</span>\n        <div className=\"mt-1 flex flex-wrap items-center gap-2\">\n          <span\n            className={cn(\n              'inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium',\n              meta.badge\n            )}\n          >\n            {humanizeEnum(lesson.kind)}\n          </span>\n          <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n            <Clock size={12} /> {formatDuration(lesson.estimatedMinutes)}\n          </span>\n        </div>\n      </div>\n      <div className=\"shrink-0\">\n        {done ? (\n          <CheckCircle2 size={18} className=\"text-status-success-text\" />\n        ) : lesson.isPreview ? (\n          <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\">\n            <Eye size={12} /> Preview\n          </span>\n        ) : (\n          <Lock size={15} className=\"text-text-muted\" />\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function CoursesCourseDetailsPagePage() {\n  const [params] = useSearchParams();\n  const id = params.get('id') ?? '';\n  const { currentUser } = useTechnoSpam();\n  const { data, loading, error, refetch } = useCourseQuery(id);\n  const [enroll, { loading: enrolling }] = useEnroll();\n  const [updateProgress, { loading: savingProgress }] = useUpdateProgress();\n  const { data: certData, refetch: refetchCerts } = useCertificatesQuery(\n    currentUser?.id && id ? { learnerId: currentUser.id, courseId: id } : {}\n  );\n  const [issueCertificate, { loading: claiming }] = useIssueCertificate();\n\n  const course = data?.tecCourse ?? null;\n  const lessons = [...(course?.lessons ?? [])].sort((a, b) => a.position - b.position);\n  const myEnrollment: TecEnrollment | undefined = (course?.enrollments ?? []).find(\n    (e) => e.learnerId === currentUser?.id\n  );\n  const myCertificate = (certData?.tecListCertificates ?? []).find((c) => c.status === 'ISSUED');\n  const isComplete = !!myEnrollment && myEnrollment.progressPct >= 100;\n\n  const handleClaimCertificate = async () => {\n    if (!id || !currentUser?.id) return;\n    const res = await issueCertificate({\n      variables: { courseId: id, learnerId: currentUser.id, score: 100 },\n    });\n    if (res.data?.tecIssueCertificate) {\n      notify.success('Certificate issued', 'Your verifiable certificate is ready in My Learning.');\n      await refetchCerts();\n    }\n  };\n\n  const handleEnroll = async () => {\n    if (!id) return;\n    const res = await enroll({ variables: { input: { courseId: id } } });\n    if (res.data?.tecEnroll) {\n      notify.success('Enrolled', `You're enrolled in \"${course?.title}\".`);\n      await refetch();\n    }\n  };\n\n  const handleProgress = async () => {\n    if (!myEnrollment) return;\n    const nextCompleted = Math.min(lessons.length, myEnrollment.lessonsCompleted + 1);\n    const pct = lessons.length ? Math.round((nextCompleted / lessons.length) * 100) : 100;\n    const res = await updateProgress({\n      variables: {\n        input: { enrollmentId: myEnrollment.id, lessonsCompleted: nextCompleted, progressPct: pct },\n      },\n    });\n    if (res.data?.tecUpdateProgress) {\n      notify.success('Progress saved', `${pct}% complete`);\n      await refetch();\n    }\n  };\n\n  if (loading && !course) {\n    return (\n      <PageLayout title=\"Course\" backPath=\"/courses/courses-page\">\n        <Skeleton className=\"mb-4 h-40 w-full rounded-2xl\" />\n        <Skeleton className=\"h-64 w-full rounded-xl\" />\n      </PageLayout>\n    );\n  }\n\n  if (error || !course) {\n    return (\n      <PageLayout title=\"Course\" backPath=\"/courses/courses-page\">\n        {error ? (\n          <ErrorView title=\"Couldn't load course\" error={error} />\n        ) : (\n          <EmptyView\n            title=\"Course not found\"\n            description=\"This course may have been unpublished.\"\n          />\n        )}\n      </PageLayout>\n    );\n  }\n\n  const completedLessons = myEnrollment?.lessonsCompleted ?? 0;\n  const remaining = Math.max(0, lessons.length - completedLessons);\n  const milestone =\n    myEnrollment && myEnrollment.progressPct >= 100\n      ? 'Course complete — claim your certificate below.'\n      : remaining === 1\n        ? '1 lesson to go — almost there!'\n        : `${remaining} lessons to go — keep it up!`;\n  const heroSeed = `${course.topic ?? ''} ${course.title}`;\n\n  return (\n    <PageLayout\n      backPath=\"/courses/courses-page\"\n      title={course.title}\n      description={course.summary ?? undefined}\n      actions={\n        myEnrollment ? (\n          <Button\n            onClick={handleProgress}\n            disabled={savingProgress || completedLessons >= lessons.length}\n          >\n            <CheckCircle2 size={16} />\n            {completedLessons >= lessons.length ? 'Completed' : 'Complete next lesson'}\n          </Button>\n        ) : (\n          <Button onClick={handleEnroll} disabled={enrolling}>\n            <BookOpen size={16} /> {enrolling ? 'Enrolling…' : 'Enroll'}\n          </Button>\n        )\n      }\n    >\n      {/* Bold hero banner */}\n      <MediaCover\n        height=\"h-40\"\n        seed={heroSeed}\n        icon={topicIcon(course.topic ?? course.title)}\n        className=\"mb-5 rounded-2xl\"\n      >\n        <div className=\"flex w-full flex-col gap-2\">\n          <span className=\"text-xs font-medium uppercase tracking-wide text-white/80\">\n            {course.topic ?? 'Course'}\n          </span>\n          <h2 className=\"text-2xl font-bold leading-tight text-white drop-shadow-sm sm:text-3xl\">\n            {course.title}\n          </h2>\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <HeroBadge icon={TrendingUp}>{humanizeEnum(course.level)}</HeroBadge>\n            <HeroBadge icon={CheckCircle2}>{humanizeEnum(course.status)}</HeroBadge>\n            {course.topic ? <HeroBadge icon={Layers}>{course.topic}</HeroBadge> : null}\n          </div>\n        </div>\n      </MediaCover>\n\n      {course.tags.length ? (\n        <div className=\"mb-5 flex flex-wrap items-center gap-2\">\n          {course.tags.map((t) => (\n            <Badge key={t} variant=\"secondary\">\n              {t}\n            </Badge>\n          ))}\n        </div>\n      ) : null}\n\n      <div className=\"mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard label=\"Lessons\" value={lessons.length} icon={FileText} tone=\"blue\" />\n        <StatCard\n          label=\"Duration\"\n          value={formatDuration(course.estimatedMinutes)}\n          icon={Clock}\n          tone=\"teal\"\n        />\n        <StatCard\n          label=\"Enrolled\"\n          value={course.enrollments?.length ?? 0}\n          icon={Users}\n          tone=\"indigo\"\n        />\n        <StatCard\n          label=\"Your progress\"\n          value={myEnrollment ? `${myEnrollment.progressPct}%` : 'Not started'}\n          icon={TrendingUp}\n          tone=\"purple\"\n        />\n      </div>\n\n      {myEnrollment ? (\n        <GlassCard className=\"mb-6 p-5\">\n          <div className=\"mb-3 flex items-center gap-2\">\n            <span className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-accent-primary/15 text-accent-primary\">\n              <TrendingUp size={16} />\n            </span>\n            <span className=\"text-sm font-semibold text-text-primary\">Your progress</span>\n            <span className=\"ml-auto text-sm text-text-secondary\">\n              {completedLessons}/{lessons.length} lessons · {myEnrollment.progressPct}%\n            </span>\n          </div>\n          <div className=\"h-2.5 w-full overflow-hidden rounded-full bg-bg-sunken\">\n            <div\n              className=\"h-full rounded-full bg-gradient-to-r from-accent-primary via-accent-indigo to-accent-purple transition-all duration-500\"\n              style={{ width: `${myEnrollment.progressPct}%` }}\n            />\n          </div>\n          <p className=\"mt-2 text-xs text-text-muted\">{milestone}</p>\n        </GlassCard>\n      ) : null}\n\n      {myCertificate ? (\n        <GlassCard className=\"mb-6 flex flex-wrap items-center gap-3 border border-status-success-border/60 bg-status-success-bg-subtle/30 p-4\">\n          <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\">\n            <Award size={22} />\n          </span>\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"text-sm font-semibold text-text-primary\">Certificate earned</div>\n            <div className=\"text-xs text-text-muted\">\n              Serial {myCertificate.serial} · Score {myCertificate.score}\n            </div>\n          </div>\n          <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\">\n            <ShieldCheck size={13} /> Verified\n          </span>\n        </GlassCard>\n      ) : isComplete ? (\n        <GlassCard 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\">\n          <div className=\"flex items-center gap-4\">\n            <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\">\n              <Trophy size={26} />\n            </span>\n            <div>\n              <div className=\"text-base font-semibold text-text-primary\">\n                You finished this course\n              </div>\n              <div className=\"text-sm text-text-muted\">\n                Claim your verifiable certificate of completion.\n              </div>\n            </div>\n          </div>\n          <Button onClick={handleClaimCertificate} disabled={claiming}>\n            <Award size={16} /> {claiming ? 'Issuing…' : 'Claim certificate'}\n          </Button>\n        </GlassCard>\n      ) : null}\n\n      <GlassCard className=\"p-5\">\n        <div className=\"mb-3 flex items-center justify-between gap-2\">\n          <h2 className=\"flex items-center gap-2 text-base font-semibold text-text-primary\">\n            <BookOpen size={18} className=\"text-accent-primary\" /> Curriculum\n          </h2>\n          {lessons.length ? (\n            <span className=\"rounded-full bg-status-success-bg-subtle px-2.5 py-1 text-xs font-medium text-status-success-text\">\n              {completedLessons}/{lessons.length} completed\n            </span>\n          ) : null}\n        </div>\n        {lessons.length === 0 ? (\n          <p className=\"py-6 text-center text-sm text-text-muted\">\n            Lessons for this course are being prepared.\n          </p>\n        ) : (\n          <div className=\"flex flex-col\">\n            {lessons.map((lesson, i) => (\n              <LessonRow key={lesson.id} lesson={lesson} index={i} done={i < completedLessons} />\n            ))}\n          </div>\n        )}\n      </GlassCard>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/technospam/pages/CoursesCoursesPagePage.js

@@ -1,18 +1,19 @@
 import { useTechnoSpamNavigate 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 } from "../utils/format.js";
-import { StatusBadge as i } from "../components/StatusBadge.js";
-import { LoadMore as a } from "../components/LoadMore.js";
-import { EmptyView as o, ErrorView as s, LoadingGrid as c } from "../components/StateViews.js";
+import { MediaCover as r, topicIcon as i } from "../components/MediaCover.js";
+import { formatDuration as a } from "../utils/format.js";
+import { StatusBadge as o } from "../components/StatusBadge.js";
+import { LoadMore as s } from "../components/LoadMore.js";
+import { EmptyView as c, ErrorView as l, LoadingGrid as u } from "../components/StateViews.js";
 import "../components/index.js";
-import { pageArg as l, useCoursesQuery as u, usePageLimit as d } from "../api/technospamApi.js";
-import { useMemo as f, useState as p } from "react";
-import { BookOpen as m, Clock as h, GraduationCap as g, Layers as _, Search as v, Sparkles as y } from "lucide-react";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
-import { Badge as S, Button as C, GlassCard as w, Input as T, Tabs as E, TabsList as D, TabsTrigger as O } from "@burdenoff/fe-libs/ui";
+import { pageArg as d, useCoursesQuery as f, usePageLimit as p } from "../api/technospamApi.js";
+import { useMemo as m, useState as h } from "react";
+import { BookOpen as g, Clock as _, GraduationCap as v, Layers as y, Search as b, Sparkles as x } from "lucide-react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { Badge as w, Button as T, GlassCard as E, Input as D, Tabs as O, TabsList as k, TabsTrigger as A } from "@burdenoff/fe-libs/ui";
 //#region src/technospam/pages/CoursesCoursesPagePage.tsx
-var k = [
+var j = [
 	{
 		value: "ALL",
 		label: "All levels"
@@ -34,63 +35,51 @@ var k = [
 		label: "Expert"
 	}
 ];
-function A(e) {
-	let t = [
-		"from-accent-primary/25 to-accent-teal/20",
-		"from-accent-teal/25 to-accent-primary/15",
-		"from-status-success-bg-subtle to-accent-wash",
-		"from-accent-wash to-bg-sunken"
-	], n = 0;
-	for (let t = 0; t < e.length; t += 1) n = n * 31 + e.charCodeAt(t) >>> 0;
-	return t[n % t.length];
-}
-function j({ course: e, onOpen: t }) {
-	return /* @__PURE__ */ x(w, {
-		className: "group flex cursor-pointer flex-col overflow-hidden transition-shadow hover:shadow-md",
+function M({ course: e, onOpen: t }) {
+	return /* @__PURE__ */ C(E, {
+		className: "group flex cursor-pointer flex-col overflow-hidden transition-all duration-200 hover:-translate-y-1 hover:shadow-lg",
 		onClick: t,
-		children: [/* @__PURE__ */ x("div", {
-			className: `relative flex h-28 items-end bg-gradient-to-br ${A(e.topic ?? e.level)} p-4`,
-			children: [/* @__PURE__ */ b(m, {
-				className: "absolute right-3 top-3 text-text-muted/60",
-				size: 20
-			}), /* @__PURE__ */ b(i, {
+		children: [/* @__PURE__ */ S(r, {
+			seed: `${e.topic ?? ""} ${e.title}`,
+			icon: i(e.topic ?? e.title),
+			children: /* @__PURE__ */ S(o, {
 				status: e.level,
 				kind: "level"
-			})]
-		}), /* @__PURE__ */ x("div", {
+			})
+		}), /* @__PURE__ */ C("div", {
 			className: "flex flex-1 flex-col gap-3 p-4",
 			children: [
-				/* @__PURE__ */ x("div", {
+				/* @__PURE__ */ C("div", {
 					className: "min-w-0",
-					children: [/* @__PURE__ */ b("h3", {
+					children: [/* @__PURE__ */ S("h3", {
 						className: "truncate text-base font-semibold text-text-primary group-hover:text-accent-primary",
 						children: e.title
-					}), e.summary ? /* @__PURE__ */ b("p", {
+					}), e.summary ? /* @__PURE__ */ S("p", {
 						className: "mt-1 line-clamp-2 text-sm text-text-secondary",
 						children: e.summary
 					}) : null]
 				}),
-				/* @__PURE__ */ x("div", {
+				/* @__PURE__ */ C("div", {
 					className: "mt-auto flex flex-wrap items-center gap-3 text-xs text-text-muted",
-					children: [e.topic ? /* @__PURE__ */ x("span", {
+					children: [e.topic ? /* @__PURE__ */ C("span", {
 						className: "inline-flex items-center gap-1",
 						children: [
-							/* @__PURE__ */ b(_, { size: 13 }),
+							/* @__PURE__ */ S(y, { size: 13 }),
 							" ",
 							e.topic
 						]
-					}) : null, /* @__PURE__ */ x("span", {
+					}) : null, /* @__PURE__ */ C("span", {
 						className: "inline-flex items-center gap-1",
 						children: [
-							/* @__PURE__ */ b(h, { size: 13 }),
+							/* @__PURE__ */ S(_, { size: 13 }),
 							" ",
-							r(e.estimatedMinutes)
+							a(e.estimatedMinutes)
 						]
 					})]
 				}),
-				e.tags.length ? /* @__PURE__ */ b("div", {
+				e.tags.length ? /* @__PURE__ */ S("div", {
 					className: "flex flex-wrap gap-1.5",
-					children: e.tags.slice(0, 3).map((e) => /* @__PURE__ */ b(S, {
+					children: e.tags.slice(0, 3).map((e) => /* @__PURE__ */ S(w, {
 						variant: "secondary",
 						className: "text-[11px]",
 						children: e
@@ -100,87 +89,91 @@ function j({ course: e, onOpen: t }) {
 		})]
 	});
 }
-function M() {
-	let i = e(), [_, S] = p("ALL"), [w, A] = p(""), { limit: M, more: N } = d(), { data: P, loading: F, error: I } = u({
+function N() {
+	let r = e(), [i, o] = h("ALL"), [y, w] = h(""), { limit: E, more: N } = p(), { data: P, loading: F, error: I } = f({
 		status: "PUBLISHED",
-		pagination: l(M),
-		..._ === "ALL" ? {} : { level: _ }
-	}), L = P?.tecListCourses.items ?? [], R = P?.tecListCourses.pageInfo.hasMore ?? !1, z = f(() => {
-		let e = w.trim().toLowerCase();
+		pagination: d(E),
+		...i === "ALL" ? {} : { level: i }
+	}), L = P?.tecListCourses.items ?? [], R = P?.tecListCourses.pageInfo.hasMore ?? !1, z = m(() => {
+		let e = y.trim().toLowerCase();
 		return e ? L.filter((t) => t.title.toLowerCase().includes(e) || (t.topic ?? "").toLowerCase().includes(e) || t.tags.some((t) => t.toLowerCase().includes(e))) : L;
-	}, [L, w]);
-	return /* @__PURE__ */ x(t, {
+	}, [L, y]);
+	return /* @__PURE__ */ C(t, {
 		hero: !0,
 		title: "Course Catalog",
 		description: "Learn technology by doing — practical, project-based courses across the stack.",
-		actions: /* @__PURE__ */ x(C, {
+		actions: /* @__PURE__ */ C(T, {
 			variant: "outline",
-			onClick: () => i("/courses/my-learning-page"),
-			children: [/* @__PURE__ */ b(g, { size: 16 }), " My Learning"]
+			onClick: () => r("/courses/my-learning-page"),
+			children: [/* @__PURE__ */ S(v, { size: 16 }), " My Learning"]
 		}),
 		children: [
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ C("div", {
 				className: "mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4",
 				children: [
-					/* @__PURE__ */ b(n, {
+					/* @__PURE__ */ S(n, {
 						label: "Courses",
 						value: L.length,
-						icon: m
+						icon: g,
+						tone: "blue"
 					}),
-					/* @__PURE__ */ b(n, {
+					/* @__PURE__ */ S(n, {
 						label: "Beginner-friendly",
 						value: L.filter((e) => e.level === "BEGINNER").length,
-						icon: y
+						icon: x,
+						tone: "green"
 					}),
-					/* @__PURE__ */ b(n, {
+					/* @__PURE__ */ S(n, {
 						label: "Advanced+",
 						value: L.filter((e) => e.level === "ADVANCED" || e.level === "EXPERT").length,
-						icon: g
+						icon: v,
+						tone: "purple"
 					}),
-					/* @__PURE__ */ b(n, {
+					/* @__PURE__ */ S(n, {
 						label: "Total content",
-						value: r(L.reduce((e, t) => e + t.estimatedMinutes, 0)),
-						icon: h
+						value: a(L.reduce((e, t) => e + t.estimatedMinutes, 0)),
+						icon: _,
+						tone: "teal"
 					})
 				]
 			}),
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ C("div", {
 				className: "mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ b(E, {
-					value: _,
-					onValueChange: (e) => S(e),
-					children: /* @__PURE__ */ b(D, { children: k.map((e) => /* @__PURE__ */ b(O, {
+				children: [/* @__PURE__ */ S(O, {
+					value: i,
+					onValueChange: (e) => o(e),
+					children: /* @__PURE__ */ S(k, { children: j.map((e) => /* @__PURE__ */ S(A, {
 						value: e.value,
 						children: e.label
 					}, e.value)) })
-				}), /* @__PURE__ */ x("div", {
+				}), /* @__PURE__ */ C("div", {
 					className: "relative w-full sm:w-72",
-					children: [/* @__PURE__ */ b(v, {
+					children: [/* @__PURE__ */ S(b, {
 						className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-muted",
 						size: 16
-					}), /* @__PURE__ */ b(T, {
+					}), /* @__PURE__ */ S(D, {
 						className: "pl-9",
 						placeholder: "Search courses…",
-						value: w,
-						onChange: (e) => A(e.target.value)
+						value: y,
+						onChange: (e) => w(e.target.value)
 					})]
 				})]
 			}),
-			F && !L.length ? /* @__PURE__ */ b(c, {}) : I ? /* @__PURE__ */ b(s, {
+			F && !L.length ? /* @__PURE__ */ S(u, {}) : I ? /* @__PURE__ */ S(l, {
 				title: "Couldn't load courses",
 				error: I
-			}) : z.length === 0 ? /* @__PURE__ */ b(o, {
-				icon: /* @__PURE__ */ b(m, { size: 26 }),
-				title: w || _ !== "ALL" ? "No matching courses" : "No courses published yet",
-				description: w || _ !== "ALL" ? "Try a different search or level filter." : "Published courses will appear here. Check back soon — TechnoSpam is pre-launch."
-			}) : /* @__PURE__ */ b("div", {
+			}) : z.length === 0 ? /* @__PURE__ */ S(c, {
+				icon: /* @__PURE__ */ S(g, { size: 26 }),
+				title: y || i !== "ALL" ? "No matching courses" : "No courses published yet",
+				description: y || i !== "ALL" ? "Try a different search or level filter." : "Published courses will appear here. Check back soon — TechnoSpam is pre-launch."
+			}) : /* @__PURE__ */ S("div", {
 				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-				children: z.map((e) => /* @__PURE__ */ b(j, {
+				children: z.map((e) => /* @__PURE__ */ S(M, {
 					course: e,
-					onOpen: () => i(`/courses/course-details-page?id=${e.id}`)
+					onOpen: () => r(`/courses/course-details-page?id=${e.id}`)
 				}, e.id))
 			}),
-			/* @__PURE__ */ b(a, {
+			/* @__PURE__ */ S(s, {
 				hasMore: R,
 				loading: F,
 				onClick: N
@@ -189,6 +182,6 @@ function M() {
 	});
 }
 //#endregion
-export { M as CoursesCoursesPagePage };
+export { N as CoursesCoursesPagePage };
 
 //# sourceMappingURL=CoursesCoursesPagePage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CoursesCoursesPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesCoursesPagePage.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { BookOpen, Clock, GraduationCap, Layers, Search, Sparkles } from 'lucide-react';\nimport {\n  Badge,\n  Button,\n  GlassCard,\n  Input,\n  Tabs,\n  TabsList,\n  TabsTrigger,\n} from '@burdenoff/fe-libs/ui';\nimport {\n  EmptyView,\n  ErrorView,\n  LoadMore,\n  LoadingGrid,\n  PageLayout,\n  StatCard,\n  StatusBadge,\n} from '../components';\nimport { useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport {\n  pageArg,\n  useCoursesQuery,\n  usePageLimit,\n  type TecCourse,\n  type TecCourseLevel,\n} from '../api/technospamApi';\nimport { formatDuration } from '../utils/format';\n\nconst LEVELS: Array<{ value: 'ALL' | TecCourseLevel; label: string }> = [\n  { value: 'ALL', label: 'All levels' },\n  { value: 'BEGINNER', label: 'Beginner' },\n  { value: 'INTERMEDIATE', label: 'Intermediate' },\n  { value: 'ADVANCED', label: 'Advanced' },\n  { value: 'EXPERT', label: 'Expert' },\n];\n\n/** Deterministic token-based cover gradient keyed off the course topic/level. */\nfunction coverGradient(seed: string): string {\n  const gradients = [\n    'from-accent-primary/25 to-accent-teal/20',\n    'from-accent-teal/25 to-accent-primary/15',\n    'from-status-success-bg-subtle to-accent-wash',\n    'from-accent-wash to-bg-sunken',\n  ];\n  let hash = 0;\n  for (let i = 0; i < seed.length; i += 1) hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;\n  return gradients[hash % gradients.length]!;\n}\n\nfunction CourseCard({ course, onOpen }: { course: TecCourse; onOpen: () => void }) {\n  return (\n    <GlassCard\n      className=\"group flex cursor-pointer flex-col overflow-hidden transition-shadow hover:shadow-md\"\n      onClick={onOpen}\n    >\n      <div\n        className={`relative flex h-28 items-end bg-gradient-to-br ${coverGradient(\n          course.topic ?? course.level\n        )} p-4`}\n      >\n        <BookOpen className=\"absolute right-3 top-3 text-text-muted/60\" size={20} />\n        <StatusBadge status={course.level} kind=\"level\" />\n      </div>\n      <div className=\"flex flex-1 flex-col gap-3 p-4\">\n        <div className=\"min-w-0\">\n          <h3 className=\"truncate text-base font-semibold text-text-primary group-hover:text-accent-primary\">\n            {course.title}\n          </h3>\n          {course.summary ? (\n            <p className=\"mt-1 line-clamp-2 text-sm text-text-secondary\">{course.summary}</p>\n          ) : null}\n        </div>\n        <div className=\"mt-auto flex flex-wrap items-center gap-3 text-xs text-text-muted\">\n          {course.topic ? (\n            <span className=\"inline-flex items-center gap-1\">\n              <Layers size={13} /> {course.topic}\n            </span>\n          ) : null}\n          <span className=\"inline-flex items-center gap-1\">\n            <Clock size={13} /> {formatDuration(course.estimatedMinutes)}\n          </span>\n        </div>\n        {course.tags.length ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {course.tags.slice(0, 3).map((t) => (\n              <Badge key={t} variant=\"secondary\" className=\"text-[11px]\">\n                {t}\n              </Badge>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function CoursesCoursesPagePage() {\n  const navigate = useTechnoSpamNavigate();\n  const [level, setLevel] = useState<'ALL' | TecCourseLevel>('ALL');\n  const [search, setSearch] = useState('');\n\n  const { limit, more } = usePageLimit();\n  const { data, loading, error } = useCoursesQuery({\n    status: 'PUBLISHED',\n    pagination: pageArg(limit),\n    ...(level !== 'ALL' ? { level } : {}),\n  });\n\n  const courses = data?.tecListCourses.items ?? [];\n  const hasMore = data?.tecListCourses.pageInfo.hasMore ?? false;\n  const filtered = useMemo(() => {\n    const q = search.trim().toLowerCase();\n    if (!q) return courses;\n    return courses.filter(\n      (c) =>\n        c.title.toLowerCase().includes(q) ||\n        (c.topic ?? '').toLowerCase().includes(q) ||\n        c.tags.some((t) => t.toLowerCase().includes(q))\n    );\n  }, [courses, search]);\n\n  return (\n    <PageLayout\n      hero\n      title=\"Course Catalog\"\n      description=\"Learn technology by doing — practical, project-based courses across the stack.\"\n      actions={\n        <Button variant=\"outline\" onClick={() => navigate('/courses/my-learning-page')}>\n          <GraduationCap size={16} /> My Learning\n        </Button>\n      }\n    >\n      <div className=\"mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard label=\"Courses\" value={courses.length} icon={BookOpen} />\n        <StatCard\n          label=\"Beginner-friendly\"\n          value={courses.filter((c) => c.level === 'BEGINNER').length}\n          icon={Sparkles}\n        />\n        <StatCard\n          label=\"Advanced+\"\n          value={courses.filter((c) => c.level === 'ADVANCED' || c.level === 'EXPERT').length}\n          icon={GraduationCap}\n        />\n        <StatCard\n          label=\"Total content\"\n          value={formatDuration(courses.reduce((s, c) => s + c.estimatedMinutes, 0))}\n          icon={Clock}\n        />\n      </div>\n\n      <div className=\"mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <Tabs value={level} onValueChange={(v) => setLevel(v as 'ALL' | TecCourseLevel)}>\n          <TabsList>\n            {LEVELS.map((l) => (\n              <TabsTrigger key={l.value} value={l.value}>\n                {l.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n        </Tabs>\n        <div className=\"relative w-full sm:w-72\">\n          <Search\n            className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-muted\"\n            size={16}\n          />\n          <Input\n            className=\"pl-9\"\n            placeholder=\"Search courses…\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n          />\n        </div>\n      </div>\n\n      {loading && !courses.length ? (\n        <LoadingGrid />\n      ) : error ? (\n        <ErrorView title=\"Couldn't load courses\" error={error} />\n      ) : filtered.length === 0 ? (\n        <EmptyView\n          icon={<BookOpen size={26} />}\n          title={search || level !== 'ALL' ? 'No matching courses' : 'No courses published yet'}\n          description={\n            search || level !== 'ALL'\n              ? 'Try a different search or level filter.'\n              : 'Published courses will appear here. Check back soon — TechnoSpam is pre-launch.'\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {filtered.map((course) => (\n            <CourseCard\n              key={course.id}\n              course={course}\n              onOpen={() => navigate(`/courses/course-details-page?id=${course.id}`)}\n            />\n          ))}\n        </div>\n      )}\n      <LoadMore hasMore={hasMore} loading={loading} onClick={more} />\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CoursesCoursesPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesCoursesPagePage.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { BookOpen, Clock, GraduationCap, Layers, Search, Sparkles } from 'lucide-react';\nimport {\n  Badge,\n  Button,\n  GlassCard,\n  Input,\n  Tabs,\n  TabsList,\n  TabsTrigger,\n} from '@burdenoff/fe-libs/ui';\nimport {\n  EmptyView,\n  ErrorView,\n  LoadMore,\n  LoadingGrid,\n  MediaCover,\n  PageLayout,\n  StatCard,\n  StatusBadge,\n  topicIcon,\n} from '../components';\nimport { useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport {\n  pageArg,\n  useCoursesQuery,\n  usePageLimit,\n  type TecCourse,\n  type TecCourseLevel,\n} from '../api/technospamApi';\nimport { formatDuration } from '../utils/format';\n\nconst LEVELS: Array<{ value: 'ALL' | TecCourseLevel; label: string }> = [\n  { value: 'ALL', label: 'All levels' },\n  { value: 'BEGINNER', label: 'Beginner' },\n  { value: 'INTERMEDIATE', label: 'Intermediate' },\n  { value: 'ADVANCED', label: 'Advanced' },\n  { value: 'EXPERT', label: 'Expert' },\n];\n\nfunction CourseCard({ course, onOpen }: { course: TecCourse; onOpen: () => void }) {\n  return (\n    <GlassCard\n      className=\"group flex cursor-pointer flex-col overflow-hidden transition-all duration-200 hover:-translate-y-1 hover:shadow-lg\"\n      onClick={onOpen}\n    >\n      <MediaCover\n        seed={`${course.topic ?? ''} ${course.title}`}\n        icon={topicIcon(course.topic ?? course.title)}\n      >\n        <StatusBadge status={course.level} kind=\"level\" />\n      </MediaCover>\n      <div className=\"flex flex-1 flex-col gap-3 p-4\">\n        <div className=\"min-w-0\">\n          <h3 className=\"truncate text-base font-semibold text-text-primary group-hover:text-accent-primary\">\n            {course.title}\n          </h3>\n          {course.summary ? (\n            <p className=\"mt-1 line-clamp-2 text-sm text-text-secondary\">{course.summary}</p>\n          ) : null}\n        </div>\n        <div className=\"mt-auto flex flex-wrap items-center gap-3 text-xs text-text-muted\">\n          {course.topic ? (\n            <span className=\"inline-flex items-center gap-1\">\n              <Layers size={13} /> {course.topic}\n            </span>\n          ) : null}\n          <span className=\"inline-flex items-center gap-1\">\n            <Clock size={13} /> {formatDuration(course.estimatedMinutes)}\n          </span>\n        </div>\n        {course.tags.length ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {course.tags.slice(0, 3).map((t) => (\n              <Badge key={t} variant=\"secondary\" className=\"text-[11px]\">\n                {t}\n              </Badge>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function CoursesCoursesPagePage() {\n  const navigate = useTechnoSpamNavigate();\n  const [level, setLevel] = useState<'ALL' | TecCourseLevel>('ALL');\n  const [search, setSearch] = useState('');\n\n  const { limit, more } = usePageLimit();\n  const { data, loading, error } = useCoursesQuery({\n    status: 'PUBLISHED',\n    pagination: pageArg(limit),\n    ...(level !== 'ALL' ? { level } : {}),\n  });\n\n  const courses = data?.tecListCourses.items ?? [];\n  const hasMore = data?.tecListCourses.pageInfo.hasMore ?? false;\n  const filtered = useMemo(() => {\n    const q = search.trim().toLowerCase();\n    if (!q) return courses;\n    return courses.filter(\n      (c) =>\n        c.title.toLowerCase().includes(q) ||\n        (c.topic ?? '').toLowerCase().includes(q) ||\n        c.tags.some((t) => t.toLowerCase().includes(q))\n    );\n  }, [courses, search]);\n\n  return (\n    <PageLayout\n      hero\n      title=\"Course Catalog\"\n      description=\"Learn technology by doing — practical, project-based courses across the stack.\"\n      actions={\n        <Button variant=\"outline\" onClick={() => navigate('/courses/my-learning-page')}>\n          <GraduationCap size={16} /> My Learning\n        </Button>\n      }\n    >\n      <div className=\"mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard label=\"Courses\" value={courses.length} icon={BookOpen} tone=\"blue\" />\n        <StatCard\n          label=\"Beginner-friendly\"\n          value={courses.filter((c) => c.level === 'BEGINNER').length}\n          icon={Sparkles}\n          tone=\"green\"\n        />\n        <StatCard\n          label=\"Advanced+\"\n          value={courses.filter((c) => c.level === 'ADVANCED' || c.level === 'EXPERT').length}\n          icon={GraduationCap}\n          tone=\"purple\"\n        />\n        <StatCard\n          label=\"Total content\"\n          value={formatDuration(courses.reduce((s, c) => s + c.estimatedMinutes, 0))}\n          icon={Clock}\n          tone=\"teal\"\n        />\n      </div>\n\n      <div className=\"mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <Tabs value={level} onValueChange={(v) => setLevel(v as 'ALL' | TecCourseLevel)}>\n          <TabsList>\n            {LEVELS.map((l) => (\n              <TabsTrigger key={l.value} value={l.value}>\n                {l.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n        </Tabs>\n        <div className=\"relative w-full sm:w-72\">\n          <Search\n            className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-muted\"\n            size={16}\n          />\n          <Input\n            className=\"pl-9\"\n            placeholder=\"Search courses…\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n          />\n        </div>\n      </div>\n\n      {loading && !courses.length ? (\n        <LoadingGrid />\n      ) : error ? (\n        <ErrorView title=\"Couldn't load courses\" error={error} />\n      ) : filtered.length === 0 ? (\n        <EmptyView\n          icon={<BookOpen size={26} />}\n          title={search || level !== 'ALL' ? 'No matching courses' : 'No courses published yet'}\n          description={\n            search || level !== 'ALL'\n              ? 'Try a different search or level filter.'\n              : 'Published courses will appear here. Check back soon — TechnoSpam is pre-launch.'\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {filtered.map((course) => (\n            <CourseCard\n              key={course.id}\n              course={course}\n              onOpen={() => navigate(`/courses/course-details-page?id=${course.id}`)}\n            />\n          ))}\n        </div>\n      )}\n      <LoadMore hasMore={hasMore} loading={loading} onClick={more} />\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}