@burdenoff/microfe-technospam 2026.705.1 → 2026.705.2

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

@@ -1 +1 @@
-{"version":3,"file":"AnalyticsAnalyticsPagePage.js","names":[],"sources":["../../../src/technospam/pages/AnalyticsAnalyticsPagePage.tsx"],"sourcesContent":["import { useMemo, type CSSProperties, type SVGProps } from 'react';\nimport {\n  Activity,\n  Award,\n  BarChart3,\n  BookOpen,\n  Code2,\n  GraduationCap,\n  Library,\n  Percent,\n  TrendingUp,\n  Trophy,\n  Users,\n} from 'lucide-react';\nimport { GlassCard, Button } from '@burdenoff/fe-libs/ui';\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Cell,\n  Legend,\n  Pie,\n  PieChart,\n  ResponsiveContainer,\n  Tooltip as ReTooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport {\n  EmptyView,\n  ErrorView,\n  LoadingGrid,\n  LoadingRows,\n  PageLayout,\n  StatCard,\n} from '../components';\nimport { useTechnoSpam, useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport {\n  useCertificatesQuery,\n  useCoursesQuery,\n  useEnrollmentsQuery,\n  useHackathonsQuery,\n  useProblemsQuery,\n  useSessionsQuery,\n  useSubmissionsQuery,\n  type TecEnrollmentStatus,\n  type TecSubmissionVerdict,\n} from '../api/technospamApi';\nimport { humanizeEnum } from '../utils/format';\n\n/* ----------------------------------------------------------- chart config */\n\nconst ENROLL_STATUS_ORDER: TecEnrollmentStatus[] = [\n  'ENROLLED',\n  'IN_PROGRESS',\n  'COMPLETED',\n  'DROPPED',\n];\n\nconst ENROLL_STATUS_COLOR: Record<TecEnrollmentStatus, string> = {\n  ENROLLED: 'var(--color-accent-primary)',\n  IN_PROGRESS: 'var(--color-accent-teal)',\n  COMPLETED: 'var(--color-status-success)',\n  DROPPED: 'var(--color-status-warning)',\n};\n\nconst VERDICT_ORDER: TecSubmissionVerdict[] = [\n  'ACCEPTED',\n  'WRONG_ANSWER',\n  'TIME_LIMIT_EXCEEDED',\n  'RUNTIME_ERROR',\n  'COMPILE_ERROR',\n  'PENDING',\n];\n\nconst VERDICT_LABEL: Record<TecSubmissionVerdict, string> = {\n  ACCEPTED: 'Accepted',\n  WRONG_ANSWER: 'Wrong',\n  TIME_LIMIT_EXCEEDED: 'TLE',\n  RUNTIME_ERROR: 'Runtime',\n  COMPILE_ERROR: 'Compile',\n  PENDING: 'Pending',\n};\n\nconst VERDICT_COLOR: Record<TecSubmissionVerdict, string> = {\n  ACCEPTED: 'var(--color-status-success)',\n  WRONG_ANSWER: 'var(--color-status-error)',\n  TIME_LIMIT_EXCEEDED: 'var(--color-status-warning)',\n  RUNTIME_ERROR: 'var(--color-status-error)',\n  COMPILE_ERROR: 'var(--color-status-error)',\n  PENDING: 'var(--color-text-muted)',\n};\n\nconst TOOLTIP_STYLE: CSSProperties = {\n  background: 'var(--color-bg-surface)',\n  border: '1px solid var(--color-border-seam)',\n  borderRadius: 12,\n  color: 'var(--color-text-primary)',\n  fontSize: 12,\n};\nconst TOOLTIP_LABEL_STYLE: CSSProperties = { color: 'var(--color-text-secondary)' };\nconst AXIS_TICK: SVGProps<SVGTextElement> = { fill: 'var(--color-text-muted)', fontSize: 12 };\n\ninterface StatusDatum {\n  name: string;\n  value: number;\n  color: string;\n}\ninterface VerdictDatum {\n  label: string;\n  count: number;\n  color: string;\n}\ninterface ActivityDatum {\n  label: string;\n  submissions: number;\n  enrollments: number;\n}\n\n/** Normalize an ISO timestamp to the start of its (Sunday-based) week. */\nfunction weekBucket(iso: string): { key: number; label: string } {\n  const d = new Date(iso);\n  if (Number.isNaN(d.getTime())) return { key: 0, label: '—' };\n  const start = new Date(d.getFullYear(), d.getMonth(), d.getDate() - d.getDay());\n  return {\n    key: start.getTime(),\n    label: start.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }),\n  };\n}\n\n/* -------------------------------------------------------- chart wrappers */\n\nfunction ChartCard({\n  title,\n  icon: Icon,\n  isEmpty,\n  emptyLabel,\n  children,\n}: {\n  title: string;\n  icon: typeof Activity;\n  isEmpty: boolean;\n  emptyLabel: string;\n  children: React.ReactElement;\n}) {\n  return (\n    <GlassCard className=\"p-5\">\n      <h3 className=\"mb-4 flex items-center gap-2 text-sm font-semibold text-text-primary\">\n        <Icon size={16} className=\"text-accent-teal\" />\n        {title}\n      </h3>\n      {isEmpty ? (\n        <div className=\"flex h-[240px] items-center justify-center text-center text-sm text-text-muted\">\n          {emptyLabel}\n        </div>\n      ) : (\n        <ResponsiveContainer width=\"100%\" height={260}>\n          {children}\n        </ResponsiveContainer>\n      )}\n    </GlassCard>\n  );\n}\n\n/* --------------------------------------------------------------- page */\n\nexport function AnalyticsAnalyticsPagePage() {\n  const navigate = useTechnoSpamNavigate();\n  const { currentUser } = useTechnoSpam();\n  const learnerId = currentUser?.id;\n\n  const enrollmentsQ = useEnrollmentsQuery(learnerId ? { learnerId } : {});\n  const submissionsQ = useSubmissionsQuery(learnerId ? { learnerId } : {});\n  const sessionsQ = useSessionsQuery(learnerId ? { menteeId: learnerId } : {});\n  const certificatesQ = useCertificatesQuery(learnerId ? { learnerId } : {});\n  const coursesQ = useCoursesQuery({ status: 'PUBLISHED' });\n  const problemsQ = useProblemsQuery({ status: 'PUBLISHED' });\n  const hackathonsQ = useHackathonsQuery({});\n\n  const enrollments = useMemo(\n    () => enrollmentsQ.data?.tecListEnrollments.items ?? [],\n    [enrollmentsQ.data]\n  );\n  const submissions = useMemo(\n    () => submissionsQ.data?.tecListSubmissions.items ?? [],\n    [submissionsQ.data]\n  );\n  const sessions = sessionsQ.data?.tecListSessions ?? [];\n  const certificates = certificatesQ.data?.tecListCertificates ?? [];\n  const coursesTotal = coursesQ.data?.tecListCourses.items.length ?? 0;\n  const problemsTotal = problemsQ.data?.tecListProblems.items.length ?? 0;\n  const hackathonsTotal = hackathonsQ.data?.tecListHackathons.items.length ?? 0;\n\n  const metrics = useMemo(() => {\n    const coursesCompleted = enrollments.filter((e) => e.status === 'COMPLETED').length;\n    const avgProgress = enrollments.length\n      ? Math.round(enrollments.reduce((s, e) => s + e.progressPct, 0) / enrollments.length)\n      : 0;\n    const acceptedSubs = submissions.filter((s) => s.verdict === 'ACCEPTED');\n    const problemsSolved = new Set(acceptedSubs.map((s) => s.problemId)).size;\n    const acceptanceRate = submissions.length\n      ? Math.round((acceptedSubs.length / submissions.length) * 100)\n      : 0;\n    return { coursesCompleted, avgProgress, problemsSolved, acceptanceRate };\n  }, [enrollments, submissions]);\n\n  const enrollmentsByStatus = useMemo<StatusDatum[]>(\n    () =>\n      ENROLL_STATUS_ORDER.map((s) => ({\n        name: humanizeEnum(s),\n        value: enrollments.filter((e) => e.status === s).length,\n        color: ENROLL_STATUS_COLOR[s],\n      })).filter((d) => d.value > 0),\n    [enrollments]\n  );\n\n  const submissionsByVerdict = useMemo<VerdictDatum[]>(\n    () =>\n      VERDICT_ORDER.map((v) => ({\n        label: VERDICT_LABEL[v],\n        count: submissions.filter((s) => s.verdict === v).length,\n        color: VERDICT_COLOR[v],\n      })).filter((d) => d.count > 0),\n    [submissions]\n  );\n\n  const activityData = useMemo<ActivityDatum[]>(() => {\n    const buckets = new Map<number, ActivityDatum>();\n    const add = (iso: string, key: 'submissions' | 'enrollments') => {\n      const { key: bucketKey, label } = weekBucket(iso);\n      const existing = buckets.get(bucketKey) ?? { label, submissions: 0, enrollments: 0 };\n      existing[key] += 1;\n      buckets.set(bucketKey, existing);\n    };\n    submissions.forEach((s) => add(s.createdAt, 'submissions'));\n    enrollments.forEach((e) => add(e.createdAt, 'enrollments'));\n    return [...buckets.entries()]\n      .sort((a, b) => a[0] - b[0])\n      .slice(-8)\n      .map(([, v]) => v);\n  }, [submissions, enrollments]);\n\n  const hasActivity =\n    enrollments.length > 0 ||\n    submissions.length > 0 ||\n    sessions.length > 0 ||\n    certificates.length > 0;\n\n  const learnerLoading =\n    enrollmentsQ.loading || submissionsQ.loading || sessionsQ.loading || certificatesQ.loading;\n  const learnerError =\n    enrollmentsQ.error || submissionsQ.error || sessionsQ.error || certificatesQ.error;\n  const showLoading = learnerLoading && !hasActivity;\n\n  const workspaceOverview = (\n    <div>\n      <h2 className=\"mb-3 text-base font-semibold text-text-primary\">Workspace overview</h2>\n      <p className=\"mb-4 max-w-2xl text-sm text-text-secondary\">\n        Live content available across the TechnoSpam learning workspace right now.\n      </p>\n      <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-3\">\n        <StatCard label=\"Published courses\" value={coursesTotal} icon={Library} />\n        <StatCard label=\"Published problems\" value={problemsTotal} icon={Code2} />\n        <StatCard label=\"Hackathons\" value={hackathonsTotal} icon={Trophy} />\n      </div>\n    </div>\n  );\n\n  return (\n    <PageLayout\n      hero\n      title=\"Analytics\"\n      description=\"Your real learning performance across courses, problems, mentoring and certificates.\"\n      actions={\n        <Button variant=\"outline\" onClick={() => navigate('/courses/my-learning-page')}>\n          <GraduationCap size={16} /> My Learning\n        </Button>\n      }\n    >\n      {!learnerId ? (\n        <div className=\"space-y-8\">\n          <EmptyView\n            icon={<BarChart3 size={26} />}\n            title=\"Sign in to view your analytics\"\n            description=\"Your personal learning metrics appear here once you're signed in.\"\n          />\n          {workspaceOverview}\n        </div>\n      ) : showLoading ? (\n        <div className=\"space-y-6\">\n          <LoadingGrid count={4} height=\"h-24\" />\n          <LoadingRows count={2} height=\"h-72\" />\n        </div>\n      ) : learnerError && !hasActivity ? (\n        <ErrorView title=\"Couldn't load your analytics\" error={learnerError} />\n      ) : (\n        <div className=\"space-y-8\">\n          <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-4\">\n            <StatCard label=\"Courses enrolled\" value={enrollments.length} icon={BookOpen} />\n            <StatCard\n              label=\"Courses completed\"\n              value={metrics.coursesCompleted}\n              icon={GraduationCap}\n            />\n            <StatCard label=\"Avg progress\" value={`${metrics.avgProgress}%`} icon={TrendingUp} />\n            <StatCard label=\"Problems solved\" value={metrics.problemsSolved} icon={Code2} />\n            <StatCard label=\"Acceptance rate\" value={`${metrics.acceptanceRate}%`} icon={Percent} />\n            <StatCard label=\"Mentor sessions\" value={sessions.length} icon={Users} />\n            <StatCard label=\"Certificates\" value={certificates.length} icon={Award} />\n          </div>\n\n          {!hasActivity ? (\n            <EmptyView\n              icon={<Activity size={26} />}\n              title=\"No learning activity yet\"\n              description=\"Enroll in a course or solve a problem and your progress charts will build here. TechnoSpam is pre-launch — start learning to see your data.\"\n              action={\n                <Button onClick={() => navigate('/courses/courses-page')}>Browse courses</Button>\n              }\n            />\n          ) : (\n            <div className=\"space-y-4\">\n              <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n                <ChartCard\n                  title=\"Enrollments by status\"\n                  icon={BookOpen}\n                  isEmpty={enrollmentsByStatus.length === 0}\n                  emptyLabel=\"No enrollments yet\"\n                >\n                  <PieChart>\n                    <Pie\n                      data={enrollmentsByStatus}\n                      dataKey=\"value\"\n                      nameKey=\"name\"\n                      innerRadius={60}\n                      outerRadius={92}\n                      paddingAngle={2}\n                      stroke=\"var(--color-bg-surface)\"\n                      strokeWidth={2}\n                    >\n                      {enrollmentsByStatus.map((d) => (\n                        <Cell key={d.name} fill={d.color} />\n                      ))}\n                    </Pie>\n                    <ReTooltip contentStyle={TOOLTIP_STYLE} labelStyle={TOOLTIP_LABEL_STYLE} />\n                    <Legend iconType=\"circle\" wrapperStyle={{ fontSize: 12 }} />\n                  </PieChart>\n                </ChartCard>\n\n                <ChartCard\n                  title=\"Submissions by verdict\"\n                  icon={Code2}\n                  isEmpty={submissionsByVerdict.length === 0}\n                  emptyLabel=\"No submissions yet\"\n                >\n                  <BarChart\n                    data={submissionsByVerdict}\n                    margin={{ top: 8, right: 8, left: -18, bottom: 0 }}\n                  >\n                    <CartesianGrid\n                      strokeDasharray=\"3 3\"\n                      stroke=\"var(--color-border-seam)\"\n                      vertical={false}\n                    />\n                    <XAxis\n                      dataKey=\"label\"\n                      tick={AXIS_TICK}\n                      axisLine={{ stroke: 'var(--color-border-seam)' }}\n                      tickLine={false}\n                    />\n                    <YAxis\n                      allowDecimals={false}\n                      tick={AXIS_TICK}\n                      axisLine={false}\n                      tickLine={false}\n                    />\n                    <ReTooltip\n                      contentStyle={TOOLTIP_STYLE}\n                      labelStyle={TOOLTIP_LABEL_STYLE}\n                      cursor={{ fill: 'var(--color-accent-wash)' }}\n                    />\n                    <Bar dataKey=\"count\" name=\"Submissions\" radius={[6, 6, 0, 0]} maxBarSize={56}>\n                      {submissionsByVerdict.map((d) => (\n                        <Cell key={d.label} fill={d.color} />\n                      ))}\n                    </Bar>\n                  </BarChart>\n                </ChartCard>\n              </div>\n\n              <GlassCard className=\"p-5\">\n                <h3 className=\"mb-4 flex items-center gap-2 text-sm font-semibold text-text-primary\">\n                  <Activity size={16} className=\"text-accent-teal\" />\n                  Learning activity over time\n                </h3>\n                {activityData.length === 0 ? (\n                  <div className=\"flex h-[240px] items-center justify-center text-sm text-text-muted\">\n                    No dated activity yet\n                  </div>\n                ) : (\n                  <ResponsiveContainer width=\"100%\" height={280}>\n                    <AreaChart\n                      data={activityData}\n                      margin={{ top: 8, right: 12, left: -18, bottom: 0 }}\n                    >\n                      <defs>\n                        <linearGradient id=\"tec-grad-submissions\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                          <stop\n                            offset=\"0%\"\n                            stopColor=\"var(--color-accent-primary)\"\n                            stopOpacity={0.35}\n                          />\n                          <stop\n                            offset=\"100%\"\n                            stopColor=\"var(--color-accent-primary)\"\n                            stopOpacity={0}\n                          />\n                        </linearGradient>\n                        <linearGradient id=\"tec-grad-enrollments\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                          <stop\n                            offset=\"0%\"\n                            stopColor=\"var(--color-accent-teal)\"\n                            stopOpacity={0.35}\n                          />\n                          <stop\n                            offset=\"100%\"\n                            stopColor=\"var(--color-accent-teal)\"\n                            stopOpacity={0}\n                          />\n                        </linearGradient>\n                      </defs>\n                      <CartesianGrid\n                        strokeDasharray=\"3 3\"\n                        stroke=\"var(--color-border-seam)\"\n                        vertical={false}\n                      />\n                      <XAxis\n                        dataKey=\"label\"\n                        tick={AXIS_TICK}\n                        axisLine={{ stroke: 'var(--color-border-seam)' }}\n                        tickLine={false}\n                      />\n                      <YAxis\n                        allowDecimals={false}\n                        tick={AXIS_TICK}\n                        axisLine={false}\n                        tickLine={false}\n                      />\n                      <ReTooltip contentStyle={TOOLTIP_STYLE} labelStyle={TOOLTIP_LABEL_STYLE} />\n                      <Legend iconType=\"circle\" wrapperStyle={{ fontSize: 12 }} />\n                      <Area\n                        type=\"monotone\"\n                        dataKey=\"submissions\"\n                        name=\"Submissions\"\n                        stroke=\"var(--color-accent-primary)\"\n                        strokeWidth={2}\n                        fill=\"url(#tec-grad-submissions)\"\n                      />\n                      <Area\n                        type=\"monotone\"\n                        dataKey=\"enrollments\"\n                        name=\"Enrollments\"\n                        stroke=\"var(--color-accent-teal)\"\n                        strokeWidth={2}\n                        fill=\"url(#tec-grad-enrollments)\"\n                      />\n                    </AreaChart>\n                  </ResponsiveContainer>\n                )}\n              </GlassCard>\n            </div>\n          )}\n\n          {workspaceOverview}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AnalyticsAnalyticsPagePage.js","names":[],"sources":["../../../src/technospam/pages/AnalyticsAnalyticsPagePage.tsx"],"sourcesContent":["import { useMemo, type CSSProperties, type SVGProps } from 'react';\nimport {\n  Activity,\n  Award,\n  BarChart3,\n  BookOpen,\n  Code2,\n  GraduationCap,\n  Library,\n  Percent,\n  TrendingUp,\n  Trophy,\n  Users,\n  type LucideIcon,\n} from 'lucide-react';\nimport { GlassCard, Button } from '@burdenoff/fe-libs/ui';\nimport { cn } from '../utils/cn';\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Cell,\n  Legend,\n  Pie,\n  PieChart,\n  ResponsiveContainer,\n  Tooltip as ReTooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport {\n  EmptyView,\n  ErrorView,\n  LoadingGrid,\n  LoadingRows,\n  PageLayout,\n  StatCard,\n} from '../components';\nimport { useTechnoSpam, useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport {\n  useCertificatesQuery,\n  useCoursesQuery,\n  useEnrollmentsQuery,\n  useHackathonsQuery,\n  useProblemsQuery,\n  useSessionsQuery,\n  useSubmissionsQuery,\n  type TecEnrollmentStatus,\n  type TecSubmissionVerdict,\n} from '../api/technospamApi';\nimport { humanizeEnum } from '../utils/format';\n\n/* ----------------------------------------------------------- chart config */\n\nconst ENROLL_STATUS_ORDER: TecEnrollmentStatus[] = [\n  'ENROLLED',\n  'IN_PROGRESS',\n  'COMPLETED',\n  'DROPPED',\n];\n\nconst ENROLL_STATUS_COLOR: Record<TecEnrollmentStatus, string> = {\n  ENROLLED: 'var(--color-accent-primary)',\n  IN_PROGRESS: 'var(--color-accent-teal)',\n  COMPLETED: 'var(--color-status-success)',\n  DROPPED: 'var(--color-status-warning)',\n};\n\nconst VERDICT_ORDER: TecSubmissionVerdict[] = [\n  'ACCEPTED',\n  'WRONG_ANSWER',\n  'TIME_LIMIT_EXCEEDED',\n  'RUNTIME_ERROR',\n  'COMPILE_ERROR',\n  'PENDING',\n];\n\nconst VERDICT_LABEL: Record<TecSubmissionVerdict, string> = {\n  ACCEPTED: 'Accepted',\n  WRONG_ANSWER: 'Wrong',\n  TIME_LIMIT_EXCEEDED: 'TLE',\n  RUNTIME_ERROR: 'Runtime',\n  COMPILE_ERROR: 'Compile',\n  PENDING: 'Pending',\n};\n\nconst VERDICT_COLOR: Record<TecSubmissionVerdict, string> = {\n  ACCEPTED: 'var(--color-status-success)',\n  WRONG_ANSWER: 'var(--color-status-error)',\n  TIME_LIMIT_EXCEEDED: 'var(--color-status-warning)',\n  RUNTIME_ERROR: 'var(--color-status-error)',\n  COMPILE_ERROR: 'var(--color-status-error)',\n  PENDING: 'var(--color-text-muted)',\n};\n\nconst TOOLTIP_STYLE: CSSProperties = {\n  background: 'var(--color-bg-surface)',\n  border: '1px solid var(--color-border-seam)',\n  borderRadius: 12,\n  color: 'var(--color-text-primary)',\n  fontSize: 12,\n};\nconst TOOLTIP_LABEL_STYLE: CSSProperties = { color: 'var(--color-text-secondary)' };\nconst AXIS_TICK: SVGProps<SVGTextElement> = { fill: 'var(--color-text-muted)', fontSize: 12 };\n\ninterface StatusDatum {\n  name: string;\n  value: number;\n  color: string;\n}\ninterface VerdictDatum {\n  label: string;\n  count: number;\n  color: string;\n}\ninterface ActivityDatum {\n  label: string;\n  submissions: number;\n  enrollments: number;\n}\n\n/** Normalize an ISO timestamp to the start of its (Sunday-based) week. */\nfunction weekBucket(iso: string): { key: number; label: string } {\n  const d = new Date(iso);\n  if (Number.isNaN(d.getTime())) return { key: 0, label: '—' };\n  const start = new Date(d.getFullYear(), d.getMonth(), d.getDate() - d.getDay());\n  return {\n    key: start.getTime(),\n    label: start.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }),\n  };\n}\n\n/* -------------------------------------------------------- chart wrappers */\n\ntype ChipTone = 'blue' | 'teal' | 'purple' | 'indigo';\n\nconst CHIP: Record<ChipTone, string> = {\n  blue: 'bg-accent-primary/15 text-accent-primary ring-accent-primary/20',\n  teal: 'bg-accent-teal/15 text-accent-teal ring-accent-teal/20',\n  purple: 'bg-accent-purple/15 text-accent-purple ring-accent-purple/20',\n  indigo: 'bg-accent-indigo/15 text-accent-indigo ring-accent-indigo/20',\n};\n\nfunction ChartHeader({\n  icon: Icon,\n  title,\n  subtitle,\n  tone,\n}: {\n  icon: LucideIcon;\n  title: string;\n  subtitle?: string;\n  tone: ChipTone;\n}) {\n  return (\n    <div className=\"mb-4 flex items-center gap-3\">\n      <span\n        className={cn(\n          'flex h-9 w-9 shrink-0 items-center justify-center rounded-xl ring-1',\n          CHIP[tone]\n        )}\n      >\n        <Icon size={17} />\n      </span>\n      <div className=\"min-w-0\">\n        <h3 className=\"truncate text-sm font-semibold text-text-primary\">{title}</h3>\n        {subtitle ? <p className=\"truncate text-xs text-text-muted\">{subtitle}</p> : null}\n      </div>\n    </div>\n  );\n}\n\nfunction ChartCard({\n  title,\n  subtitle,\n  icon,\n  tone = 'teal',\n  isEmpty,\n  emptyLabel,\n  children,\n}: {\n  title: string;\n  subtitle?: string;\n  icon: LucideIcon;\n  tone?: ChipTone;\n  isEmpty: boolean;\n  emptyLabel: string;\n  children: React.ReactElement;\n}) {\n  return (\n    <GlassCard className=\"p-5 transition-shadow duration-200 hover:shadow-lg\">\n      <ChartHeader icon={icon} title={title} subtitle={subtitle} tone={tone} />\n      {isEmpty ? (\n        <div className=\"flex h-[240px] items-center justify-center text-center text-sm text-text-muted\">\n          {emptyLabel}\n        </div>\n      ) : (\n        <ResponsiveContainer width=\"100%\" height={260}>\n          {children}\n        </ResponsiveContainer>\n      )}\n    </GlassCard>\n  );\n}\n\n/* --------------------------------------------------------------- page */\n\nexport function AnalyticsAnalyticsPagePage() {\n  const navigate = useTechnoSpamNavigate();\n  const { currentUser } = useTechnoSpam();\n  const learnerId = currentUser?.id;\n\n  const enrollmentsQ = useEnrollmentsQuery(learnerId ? { learnerId } : {});\n  const submissionsQ = useSubmissionsQuery(learnerId ? { learnerId } : {});\n  const sessionsQ = useSessionsQuery(learnerId ? { menteeId: learnerId } : {});\n  const certificatesQ = useCertificatesQuery(learnerId ? { learnerId } : {});\n  const coursesQ = useCoursesQuery({ status: 'PUBLISHED' });\n  const problemsQ = useProblemsQuery({ status: 'PUBLISHED' });\n  const hackathonsQ = useHackathonsQuery({});\n\n  const enrollments = useMemo(\n    () => enrollmentsQ.data?.tecListEnrollments.items ?? [],\n    [enrollmentsQ.data]\n  );\n  const submissions = useMemo(\n    () => submissionsQ.data?.tecListSubmissions.items ?? [],\n    [submissionsQ.data]\n  );\n  const sessions = sessionsQ.data?.tecListSessions ?? [];\n  const certificates = certificatesQ.data?.tecListCertificates ?? [];\n  const coursesTotal = coursesQ.data?.tecListCourses.items.length ?? 0;\n  const problemsTotal = problemsQ.data?.tecListProblems.items.length ?? 0;\n  const hackathonsTotal = hackathonsQ.data?.tecListHackathons.items.length ?? 0;\n\n  const metrics = useMemo(() => {\n    const coursesCompleted = enrollments.filter((e) => e.status === 'COMPLETED').length;\n    const avgProgress = enrollments.length\n      ? Math.round(enrollments.reduce((s, e) => s + e.progressPct, 0) / enrollments.length)\n      : 0;\n    const acceptedSubs = submissions.filter((s) => s.verdict === 'ACCEPTED');\n    const problemsSolved = new Set(acceptedSubs.map((s) => s.problemId)).size;\n    const acceptanceRate = submissions.length\n      ? Math.round((acceptedSubs.length / submissions.length) * 100)\n      : 0;\n    return { coursesCompleted, avgProgress, problemsSolved, acceptanceRate };\n  }, [enrollments, submissions]);\n\n  const enrollmentsByStatus = useMemo<StatusDatum[]>(\n    () =>\n      ENROLL_STATUS_ORDER.map((s) => ({\n        name: humanizeEnum(s),\n        value: enrollments.filter((e) => e.status === s).length,\n        color: ENROLL_STATUS_COLOR[s],\n      })).filter((d) => d.value > 0),\n    [enrollments]\n  );\n\n  const submissionsByVerdict = useMemo<VerdictDatum[]>(\n    () =>\n      VERDICT_ORDER.map((v) => ({\n        label: VERDICT_LABEL[v],\n        count: submissions.filter((s) => s.verdict === v).length,\n        color: VERDICT_COLOR[v],\n      })).filter((d) => d.count > 0),\n    [submissions]\n  );\n\n  const activityData = useMemo<ActivityDatum[]>(() => {\n    const buckets = new Map<number, ActivityDatum>();\n    const add = (iso: string, key: 'submissions' | 'enrollments') => {\n      const { key: bucketKey, label } = weekBucket(iso);\n      const existing = buckets.get(bucketKey) ?? { label, submissions: 0, enrollments: 0 };\n      existing[key] += 1;\n      buckets.set(bucketKey, existing);\n    };\n    submissions.forEach((s) => add(s.createdAt, 'submissions'));\n    enrollments.forEach((e) => add(e.createdAt, 'enrollments'));\n    return [...buckets.entries()]\n      .sort((a, b) => a[0] - b[0])\n      .slice(-8)\n      .map(([, v]) => v);\n  }, [submissions, enrollments]);\n\n  const hasActivity =\n    enrollments.length > 0 ||\n    submissions.length > 0 ||\n    sessions.length > 0 ||\n    certificates.length > 0;\n\n  const learnerLoading =\n    enrollmentsQ.loading || submissionsQ.loading || sessionsQ.loading || certificatesQ.loading;\n  const learnerError =\n    enrollmentsQ.error || submissionsQ.error || sessionsQ.error || certificatesQ.error;\n  const showLoading = learnerLoading && !hasActivity;\n\n  const workspaceOverview = (\n    <div>\n      <h2 className=\"mb-3 text-base font-semibold text-text-primary\">Workspace overview</h2>\n      <p className=\"mb-4 max-w-2xl text-sm text-text-secondary\">\n        Live content available across the TechnoSpam learning workspace right now.\n      </p>\n      <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-3\">\n        <StatCard label=\"Published courses\" value={coursesTotal} icon={Library} tone=\"blue\" />\n        <StatCard label=\"Published problems\" value={problemsTotal} icon={Code2} tone=\"indigo\" />\n        <StatCard label=\"Hackathons\" value={hackathonsTotal} icon={Trophy} tone=\"purple\" />\n      </div>\n    </div>\n  );\n\n  return (\n    <PageLayout\n      hero\n      title=\"Analytics\"\n      description=\"Your real learning performance across courses, problems, mentoring and certificates.\"\n      actions={\n        <Button variant=\"outline\" onClick={() => navigate('/courses/my-learning-page')}>\n          <GraduationCap size={16} /> My Learning\n        </Button>\n      }\n    >\n      {!learnerId ? (\n        <div className=\"space-y-8\">\n          <EmptyView\n            icon={<BarChart3 size={26} />}\n            title=\"Sign in to view your analytics\"\n            description=\"Your personal learning metrics appear here once you're signed in.\"\n          />\n          {workspaceOverview}\n        </div>\n      ) : showLoading ? (\n        <div className=\"space-y-6\">\n          <LoadingGrid count={4} height=\"h-24\" />\n          <LoadingRows count={2} height=\"h-72\" />\n        </div>\n      ) : learnerError && !hasActivity ? (\n        <ErrorView title=\"Couldn't load your analytics\" error={learnerError} />\n      ) : (\n        <div className=\"space-y-8\">\n          <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-4\">\n            <StatCard\n              label=\"Courses enrolled\"\n              value={enrollments.length}\n              icon={BookOpen}\n              tone=\"blue\"\n            />\n            <StatCard\n              label=\"Courses completed\"\n              value={metrics.coursesCompleted}\n              icon={GraduationCap}\n              tone=\"green\"\n            />\n            <StatCard\n              label=\"Avg progress\"\n              value={`${metrics.avgProgress}%`}\n              icon={TrendingUp}\n              tone=\"purple\"\n            />\n            <StatCard\n              label=\"Problems solved\"\n              value={metrics.problemsSolved}\n              icon={Code2}\n              tone=\"indigo\"\n            />\n            <StatCard\n              label=\"Acceptance rate\"\n              value={`${metrics.acceptanceRate}%`}\n              icon={Percent}\n              tone=\"teal\"\n            />\n            <StatCard label=\"Mentor sessions\" value={sessions.length} icon={Users} tone=\"blue\" />\n            <StatCard label=\"Certificates\" value={certificates.length} icon={Award} tone=\"amber\" />\n          </div>\n\n          {!hasActivity ? (\n            <EmptyView\n              icon={<Activity size={26} />}\n              title=\"No learning activity yet\"\n              description=\"Enroll in a course or solve a problem and your progress charts will build here. TechnoSpam is pre-launch — start learning to see your data.\"\n              action={\n                <Button onClick={() => navigate('/courses/courses-page')}>Browse courses</Button>\n              }\n            />\n          ) : (\n            <div className=\"space-y-4\">\n              <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n                <ChartCard\n                  title=\"Enrollments by status\"\n                  subtitle=\"How your courses are progressing\"\n                  icon={BookOpen}\n                  tone=\"blue\"\n                  isEmpty={enrollmentsByStatus.length === 0}\n                  emptyLabel=\"No enrollments yet\"\n                >\n                  <PieChart>\n                    <Pie\n                      data={enrollmentsByStatus}\n                      dataKey=\"value\"\n                      nameKey=\"name\"\n                      innerRadius={60}\n                      outerRadius={92}\n                      paddingAngle={2}\n                      stroke=\"var(--color-bg-surface)\"\n                      strokeWidth={2}\n                    >\n                      {enrollmentsByStatus.map((d) => (\n                        <Cell key={d.name} fill={d.color} />\n                      ))}\n                    </Pie>\n                    <ReTooltip contentStyle={TOOLTIP_STYLE} labelStyle={TOOLTIP_LABEL_STYLE} />\n                    <Legend iconType=\"circle\" wrapperStyle={{ fontSize: 12 }} />\n                  </PieChart>\n                </ChartCard>\n\n                <ChartCard\n                  title=\"Submissions by verdict\"\n                  subtitle=\"Outcomes across your attempts\"\n                  icon={Code2}\n                  tone=\"purple\"\n                  isEmpty={submissionsByVerdict.length === 0}\n                  emptyLabel=\"No submissions yet\"\n                >\n                  <BarChart\n                    data={submissionsByVerdict}\n                    margin={{ top: 8, right: 8, left: -18, bottom: 0 }}\n                  >\n                    <CartesianGrid\n                      strokeDasharray=\"3 3\"\n                      stroke=\"var(--color-border-seam)\"\n                      vertical={false}\n                    />\n                    <XAxis\n                      dataKey=\"label\"\n                      tick={AXIS_TICK}\n                      axisLine={{ stroke: 'var(--color-border-seam)' }}\n                      tickLine={false}\n                    />\n                    <YAxis\n                      allowDecimals={false}\n                      tick={AXIS_TICK}\n                      axisLine={false}\n                      tickLine={false}\n                    />\n                    <ReTooltip\n                      contentStyle={TOOLTIP_STYLE}\n                      labelStyle={TOOLTIP_LABEL_STYLE}\n                      cursor={{ fill: 'var(--color-accent-primary)', fillOpacity: 0.08 }}\n                    />\n                    <Bar dataKey=\"count\" name=\"Submissions\" radius={[6, 6, 0, 0]} maxBarSize={56}>\n                      {submissionsByVerdict.map((d) => (\n                        <Cell key={d.label} fill={d.color} />\n                      ))}\n                    </Bar>\n                  </BarChart>\n                </ChartCard>\n              </div>\n\n              <GlassCard className=\"p-5 transition-shadow duration-200 hover:shadow-lg\">\n                <ChartHeader\n                  icon={Activity}\n                  title=\"Learning activity over time\"\n                  subtitle=\"Submissions and enrollments per week\"\n                  tone=\"teal\"\n                />\n                {activityData.length === 0 ? (\n                  <div className=\"flex h-[240px] items-center justify-center text-sm text-text-muted\">\n                    No dated activity yet\n                  </div>\n                ) : (\n                  <ResponsiveContainer width=\"100%\" height={280}>\n                    <AreaChart\n                      data={activityData}\n                      margin={{ top: 8, right: 12, left: -18, bottom: 0 }}\n                    >\n                      <defs>\n                        <linearGradient id=\"tec-grad-submissions\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                          <stop\n                            offset=\"0%\"\n                            stopColor=\"var(--color-accent-primary)\"\n                            stopOpacity={0.35}\n                          />\n                          <stop\n                            offset=\"100%\"\n                            stopColor=\"var(--color-accent-primary)\"\n                            stopOpacity={0}\n                          />\n                        </linearGradient>\n                        <linearGradient id=\"tec-grad-enrollments\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                          <stop\n                            offset=\"0%\"\n                            stopColor=\"var(--color-accent-teal)\"\n                            stopOpacity={0.35}\n                          />\n                          <stop\n                            offset=\"100%\"\n                            stopColor=\"var(--color-accent-teal)\"\n                            stopOpacity={0}\n                          />\n                        </linearGradient>\n                      </defs>\n                      <CartesianGrid\n                        strokeDasharray=\"3 3\"\n                        stroke=\"var(--color-border-seam)\"\n                        vertical={false}\n                      />\n                      <XAxis\n                        dataKey=\"label\"\n                        tick={AXIS_TICK}\n                        axisLine={{ stroke: 'var(--color-border-seam)' }}\n                        tickLine={false}\n                      />\n                      <YAxis\n                        allowDecimals={false}\n                        tick={AXIS_TICK}\n                        axisLine={false}\n                        tickLine={false}\n                      />\n                      <ReTooltip contentStyle={TOOLTIP_STYLE} labelStyle={TOOLTIP_LABEL_STYLE} />\n                      <Legend iconType=\"circle\" wrapperStyle={{ fontSize: 12 }} />\n                      <Area\n                        type=\"monotone\"\n                        dataKey=\"submissions\"\n                        name=\"Submissions\"\n                        stroke=\"var(--color-accent-primary)\"\n                        strokeWidth={2}\n                        fill=\"url(#tec-grad-submissions)\"\n                      />\n                      <Area\n                        type=\"monotone\"\n                        dataKey=\"enrollments\"\n                        name=\"Enrollments\"\n                        stroke=\"var(--color-accent-teal)\"\n                        strokeWidth={2}\n                        fill=\"url(#tec-grad-enrollments)\"\n                      />\n                    </AreaChart>\n                  </ResponsiveContainer>\n                )}\n              </GlassCard>\n            </div>\n          )}\n\n          {workspaceOverview}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/technospam/pages/ApplicationsProblemDetailsPagePage.js

@@ -1,251 +1,304 @@
 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 { formatDateTime as r, humanizeEnum as i } from "../utils/format.js";
-import { StatusBadge as a } from "../components/StatusBadge.js";
-import { EmptyView as o, ErrorView as s, LoadingRows as ee } 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 { formatDateTime as i, humanizeEnum as a } from "../utils/format.js";
+import { StatusBadge as o } from "../components/StatusBadge.js";
+import { EmptyView as s, ErrorView as c, LoadingRows as l } from "../components/StateViews.js";
 import "../components/index.js";
-import { notify as c } from "../lib/toast.js";
-import { useProblemQuery as l, useSubmissionsQuery as u, useSubmitSolution as d } from "../api/technospamApi.js";
-import { useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
-import { Clock as g, Code2 as _, FileText as v, Layers as y, Send as b, Tag as x, Trophy 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, Select as k, SelectContent as A, SelectItem as te, SelectTrigger as ne, SelectValue as re, Skeleton as j, Textarea as ie } from "@burdenoff/fe-libs/ui";
+import { notify as u } from "../lib/toast.js";
+import { useProblemQuery as d, useSubmissionsQuery as ee, useSubmitSolution as f } from "../api/technospamApi.js";
+import { useEffect as p, useMemo as m, useRef as h, useState as g } from "react";
+import { Clock as _, Code2 as v, FileText as y, Layers as b, Send as x, Tag as S, Trophy as C } from "lucide-react";
+import { useSearchParams as w } from "react-router-dom";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { Badge as D, Button as O, GlassCard as k, Select as te, SelectContent as ne, SelectItem as re, SelectTrigger as ie, SelectValue as ae, Skeleton as A, Textarea as j } from "@burdenoff/fe-libs/ui";
 //#region src/technospam/pages/ApplicationsProblemDetailsPagePage.tsx
 var M = [
 	"javascript",
 	"python",
 	"typescript"
 ];
-function N({ s: e }) {
-	return /* @__PURE__ */ T("div", {
-		className: "flex flex-wrap items-center gap-x-4 gap-y-1 border-b border-border-seam py-3 last:border-0",
+function N({ label: e, children: n, bodyClassName: r }) {
+	return /* @__PURE__ */ E("div", {
+		className: "overflow-hidden rounded-xl border border-border-strong bg-bg-sunken shadow-sm",
+		children: [/* @__PURE__ */ E("div", {
+			className: "flex items-center justify-between gap-2 border-b border-border-seam bg-bg-canvas/40 px-4 py-2",
+			children: [/* @__PURE__ */ E("div", {
+				className: "flex items-center gap-1.5",
+				children: [
+					/* @__PURE__ */ T("span", { className: "h-2.5 w-2.5 rounded-full bg-status-error-border" }),
+					/* @__PURE__ */ T("span", { className: "h-2.5 w-2.5 rounded-full bg-status-warning-border" }),
+					/* @__PURE__ */ T("span", { className: "h-2.5 w-2.5 rounded-full bg-status-success-border" })
+				]
+			}), /* @__PURE__ */ E("span", {
+				className: "inline-flex items-center gap-1.5 font-mono text-xs text-text-muted",
+				children: [
+					/* @__PURE__ */ T(v, { size: 13 }),
+					" ",
+					e
+				]
+			})]
+		}), /* @__PURE__ */ T("pre", {
+			className: t("overflow-auto p-4 font-mono text-xs leading-relaxed text-text-primary", r),
+			children: n
+		})]
+	});
+}
+function P({ s: e }) {
+	return /* @__PURE__ */ E("div", {
+		className: "flex flex-wrap items-center gap-x-4 gap-y-1 rounded-lg border border-transparent px-2 py-3 transition-colors hover:border-border-seam hover:bg-bg-sunken",
 		children: [
-			/* @__PURE__ */ w(a, { status: e.verdict }),
-			/* @__PURE__ */ T("span", {
+			/* @__PURE__ */ T(o, { status: e.verdict }),
+			/* @__PURE__ */ E("span", {
 				className: "inline-flex items-center gap-1 text-sm font-medium text-text-primary",
 				children: [
-					/* @__PURE__ */ w(_, { size: 13 }),
+					/* @__PURE__ */ T(v, { size: 13 }),
 					" ",
-					i(e.language)
+					a(e.language)
 				]
 			}),
-			/* @__PURE__ */ T("span", {
+			/* @__PURE__ */ E("span", {
 				className: "inline-flex items-center gap-1 text-xs text-text-muted",
 				children: [
-					/* @__PURE__ */ w(g, { size: 12 }),
+					/* @__PURE__ */ T(_, { size: 12 }),
 					" ",
 					e.runtimeMs,
 					" ms"
 				]
 			}),
-			/* @__PURE__ */ T("span", {
+			/* @__PURE__ */ E("span", {
 				className: "inline-flex items-center gap-1 text-xs text-text-muted",
 				children: [
-					/* @__PURE__ */ w(S, { size: 12 }),
+					/* @__PURE__ */ T(C, { size: 12 }),
 					" ",
 					e.pointsAwarded,
 					" pts"
 				]
 			}),
-			/* @__PURE__ */ w("span", {
+			/* @__PURE__ */ T("span", {
 				className: "ml-auto text-xs text-text-muted",
-				children: r(e.createdAt)
+				children: i(e.createdAt)
 			})
 		]
 	});
 }
-function P() {
-	let [r] = C(), g = r.get("id") ?? "", { currentUser: P } = e(), F = P?.id, { data: I, loading: L, error: R, refetch: z } = l(g), { data: B, loading: V, error: H, refetch: U } = u({
+function F() {
+	let [t] = w(), i = t.get("id") ?? "", { currentUser: _ } = e(), F = _?.id, { data: I, loading: L, error: R, refetch: z } = d(i), { data: B, loading: V, error: H, refetch: U } = ee({
 		...F ? { learnerId: F } : {},
-		problemId: g
-	}), [W, { loading: G }] = d(), K = I?.tecProblem ?? null, q = p(() => K?.languages?.length ? K.languages : M, [K]), [J, Y] = h(""), [X, Z] = h(""), Q = m(!1);
-	f(() => {
+		problemId: i
+	}), [W, { loading: G }] = f(), K = I?.tecProblem ?? null, q = m(() => K?.languages?.length ? K.languages : M, [K]), [J, Y] = g(""), [X, Z] = g(""), Q = h(!1);
+	p(() => {
 		K && !Q.current && (Y(K.languages[0] ?? M[0]), Z(K.starterCode ?? ""), Q.current = !0);
 	}, [K]);
-	let $ = p(() => [...B?.tecListSubmissions.items ?? []].sort((e, t) => new Date(t.createdAt).getTime() - new Date(e.createdAt).getTime()), [B]);
-	return L && !K ? /* @__PURE__ */ T(t, {
+	let $ = m(() => [...B?.tecListSubmissions.items ?? []].sort((e, t) => new Date(t.createdAt).getTime() - new Date(e.createdAt).getTime()), [B]);
+	return L && !K ? /* @__PURE__ */ E(n, {
 		title: "Problem",
 		backPath: "/applications/problems-page",
-		children: [/* @__PURE__ */ w(j, { className: "mb-4 h-28 w-full rounded-xl" }), /* @__PURE__ */ w(j, { className: "h-72 w-full rounded-xl" })]
-	}) : R || !K ? /* @__PURE__ */ w(t, {
+		children: [/* @__PURE__ */ T(A, { className: "mb-4 h-28 w-full rounded-xl" }), /* @__PURE__ */ T(A, { className: "h-72 w-full rounded-xl" })]
+	}) : R || !K ? /* @__PURE__ */ T(n, {
 		title: "Problem",
 		backPath: "/applications/problems-page",
-		children: R ? /* @__PURE__ */ w(s, {
+		children: R ? /* @__PURE__ */ T(c, {
 			title: "Couldn't load problem",
 			error: R
-		}) : /* @__PURE__ */ w(o, {
+		}) : /* @__PURE__ */ T(s, {
 			title: "Problem not found",
 			description: "This problem may have been unpublished."
 		})
-	}) : /* @__PURE__ */ T(t, {
+	}) : /* @__PURE__ */ E(n, {
 		hero: !0,
 		backPath: "/applications/problems-page",
 		title: K.title,
 		description: K.topic ?? void 0,
 		children: [
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ E("div", {
 				className: "mb-5 flex flex-wrap items-center gap-2",
 				children: [
-					/* @__PURE__ */ w(a, {
+					/* @__PURE__ */ T(o, {
 						status: K.difficulty,
 						kind: "level"
 					}),
-					/* @__PURE__ */ w(a, { status: K.status }),
-					K.topic ? /* @__PURE__ */ T(E, {
+					/* @__PURE__ */ T(o, { status: K.status }),
+					K.topic ? /* @__PURE__ */ E(D, {
 						variant: "outline",
 						className: "gap-1",
 						children: [
-							/* @__PURE__ */ w(y, { size: 12 }),
+							/* @__PURE__ */ T(b, { size: 12 }),
 							" ",
 							K.topic
 						]
 					}) : null,
-					K.tags.map((e) => /* @__PURE__ */ T(E, {
+					K.tags.map((e) => /* @__PURE__ */ E(D, {
 						variant: "secondary",
-						children: [/* @__PURE__ */ w(x, {
+						children: [/* @__PURE__ */ T(S, {
 							size: 10,
 							className: "mr-1"
 						}), e]
 					}, e))
 				]
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ E("div", {
 				className: "mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4",
 				children: [
-					/* @__PURE__ */ w(n, {
+					/* @__PURE__ */ T(r, {
 						label: "Points",
 						value: K.points,
-						icon: S
+						icon: C,
+						tone: "amber"
 					}),
-					/* @__PURE__ */ w(n, {
+					/* @__PURE__ */ T(r, {
 						label: "Languages",
 						value: q.length,
-						icon: _
+						icon: v,
+						tone: "blue"
 					}),
-					/* @__PURE__ */ w(n, {
+					/* @__PURE__ */ T(r, {
 						label: "Difficulty",
-						value: i(K.difficulty),
-						icon: y
+						value: a(K.difficulty),
+						icon: b,
+						tone: "purple"
 					}),
-					/* @__PURE__ */ w(n, {
+					/* @__PURE__ */ T(r, {
 						label: "My submissions",
 						value: $.length,
-						icon: v
+						icon: y,
+						tone: "teal"
 					})
 				]
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ E("div", {
 				className: "grid grid-cols-1 gap-5 lg:grid-cols-3",
-				children: [/* @__PURE__ */ T("div", {
+				children: [/* @__PURE__ */ E("div", {
 					className: "space-y-5 lg:col-span-2",
 					children: [
-						/* @__PURE__ */ T(O, {
+						/* @__PURE__ */ E(k, {
 							className: "p-5",
-							children: [/* @__PURE__ */ w("h2", {
+							children: [/* @__PURE__ */ T("h2", {
 								className: "mb-2 text-base font-semibold text-text-primary",
 								children: "Problem statement"
-							}), K.statement ? /* @__PURE__ */ w("p", {
+							}), K.statement ? /* @__PURE__ */ T("p", {
 								className: "whitespace-pre-wrap text-sm leading-relaxed text-text-secondary",
 								children: K.statement
-							}) : /* @__PURE__ */ w("p", {
+							}) : /* @__PURE__ */ T("p", {
 								className: "py-4 text-center text-sm text-text-muted",
 								children: "The statement for this problem is being prepared."
 							})]
 						}),
-						K.starterCode ? /* @__PURE__ */ T(O, {
+						K.starterCode ? /* @__PURE__ */ E(k, {
 							className: "p-5",
-							children: [/* @__PURE__ */ w("h2", {
-								className: "mb-2 text-base font-semibold text-text-primary",
+							children: [/* @__PURE__ */ T("h2", {
+								className: "mb-3 text-base font-semibold text-text-primary",
 								children: "Starter code"
-							}), /* @__PURE__ */ w("pre", {
-								className: "max-h-72 overflow-auto rounded-xl bg-bg-sunken p-4 font-mono text-xs leading-relaxed text-text-primary",
+							}), /* @__PURE__ */ T(N, {
+								label: a(q[0] ?? "code"),
+								bodyClassName: "max-h-72",
 								children: K.starterCode
 							})]
 						}) : null,
-						/* @__PURE__ */ T(O, {
+						/* @__PURE__ */ E(k, {
 							className: "p-5",
-							children: [/* @__PURE__ */ w("h2", {
-								className: "mb-3 text-base font-semibold text-text-primary",
-								children: "Submit a solution"
-							}), /* @__PURE__ */ T("div", {
-								className: "space-y-3",
-								children: [
-									/* @__PURE__ */ T("div", {
-										className: "flex flex-col gap-2 sm:flex-row sm:items-center",
-										children: [/* @__PURE__ */ w("span", {
-											className: "text-sm text-text-secondary sm:w-28",
+							children: [
+								/* @__PURE__ */ E("div", {
+									className: "mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between",
+									children: [/* @__PURE__ */ T("h2", {
+										className: "text-base font-semibold text-text-primary",
+										children: "Submit a solution"
+									}), /* @__PURE__ */ E("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ T("span", {
+											className: "text-sm text-text-secondary",
 											children: "Language"
-										}), /* @__PURE__ */ T(k, {
+										}), /* @__PURE__ */ E(te, {
 											value: J,
 											onValueChange: Y,
-											children: [/* @__PURE__ */ w(ne, {
-												className: "w-full sm:w-56",
-												children: /* @__PURE__ */ w(re, { placeholder: "Choose a language" })
-											}), /* @__PURE__ */ w(A, { children: q.map((e) => /* @__PURE__ */ w(te, {
+											children: [/* @__PURE__ */ T(ie, {
+												className: "w-full sm:w-48",
+												children: /* @__PURE__ */ T(ae, { placeholder: "Choose a language" })
+											}), /* @__PURE__ */ T(ne, { children: q.map((e) => /* @__PURE__ */ T(re, {
 												value: e,
-												children: i(e)
+												children: a(e)
 											}, e)) })]
 										})]
-									}),
-									/* @__PURE__ */ w(ie, {
+									})]
+								}),
+								/* @__PURE__ */ E("div", {
+									className: "overflow-hidden rounded-xl border border-border-strong bg-bg-sunken shadow-sm",
+									children: [/* @__PURE__ */ E("div", {
+										className: "flex items-center justify-between gap-2 border-b border-border-seam bg-bg-canvas/40 px-4 py-2",
+										children: [/* @__PURE__ */ E("div", {
+											className: "flex items-center gap-1.5",
+											children: [
+												/* @__PURE__ */ T("span", { className: "h-2.5 w-2.5 rounded-full bg-status-error-border" }),
+												/* @__PURE__ */ T("span", { className: "h-2.5 w-2.5 rounded-full bg-status-warning-border" }),
+												/* @__PURE__ */ T("span", { className: "h-2.5 w-2.5 rounded-full bg-status-success-border" })
+											]
+										}), /* @__PURE__ */ E("span", {
+											className: "inline-flex items-center gap-1.5 font-mono text-xs text-text-muted",
+											children: [
+												/* @__PURE__ */ T(v, { size: 13 }),
+												" ",
+												J ? a(J) : "solution"
+											]
+										})]
+									}), /* @__PURE__ */ T(j, {
 										value: X,
 										onChange: (e) => Z(e.target.value),
 										placeholder: "Write your solution…",
-										className: "min-h-[240px] font-mono text-xs leading-relaxed",
+										className: "min-h-[280px] resize-y rounded-none border-0 bg-transparent font-mono text-xs leading-relaxed focus-visible:ring-0 focus-visible:ring-offset-0",
 										spellCheck: !1
-									}),
-									/* @__PURE__ */ w("div", {
-										className: "flex justify-end",
-										children: /* @__PURE__ */ T(D, {
-											onClick: async () => {
-												if (g) {
-													if (!J) {
-														c.error("Pick a language", "Choose a language before submitting.");
-														return;
-													}
-													if (!X.trim()) {
-														c.error("Add your solution", "Write some code before submitting.");
-														return;
-													}
-													(await W({ variables: { input: {
-														problemId: g,
-														language: J,
-														code: X
-													} } })).data?.tecSubmitSolution && (c.success("Solution submitted", "Your submission was recorded."), await Promise.all([z(), U()]));
-												}
-											},
-											disabled: G || !X.trim(),
-											children: [
-												/* @__PURE__ */ w(b, { size: 16 }),
-												" ",
-												G ? "Submitting…" : "Submit solution"
-											]
-										})
-									})
-								]
-							})]
+									})]
+								}),
+								/* @__PURE__ */ E(O, {
+									className: "mt-4 w-full",
+									onClick: async () => {
+										if (i) {
+											if (!J) {
+												u.error("Pick a language", "Choose a language before submitting.");
+												return;
+											}
+											if (!X.trim()) {
+												u.error("Add your solution", "Write some code before submitting.");
+												return;
+											}
+											(await W({ variables: { input: {
+												problemId: i,
+												language: J,
+												code: X
+											} } })).data?.tecSubmitSolution && (u.success("Solution submitted", "Your submission was recorded."), await Promise.all([z(), U()]));
+										}
+									},
+									disabled: G || !X.trim(),
+									children: [
+										/* @__PURE__ */ T(x, { size: 16 }),
+										" ",
+										G ? "Submitting…" : "Submit solution"
+									]
+								})
+							]
 						})
 					]
-				}), /* @__PURE__ */ w("div", {
+				}), /* @__PURE__ */ T("div", {
 					className: "lg:col-span-1",
-					children: /* @__PURE__ */ T(O, {
+					children: /* @__PURE__ */ E(k, {
 						className: "p-5",
-						children: [/* @__PURE__ */ w("h2", {
+						children: [/* @__PURE__ */ T("h2", {
 							className: "mb-3 text-base font-semibold text-text-primary",
 							children: "My submissions"
-						}), V && !$.length ? /* @__PURE__ */ w(ee, {
+						}), V && !$.length ? /* @__PURE__ */ T(l, {
 							count: 3,
 							height: "h-12"
-						}) : H ? /* @__PURE__ */ w(s, {
+						}) : H ? /* @__PURE__ */ T(c, {
 							title: "Couldn't load submissions",
 							error: H
-						}) : $.length === 0 ? /* @__PURE__ */ w(o, {
-							icon: /* @__PURE__ */ w(v, { size: 24 }),
+						}) : $.length === 0 ? /* @__PURE__ */ T(s, {
+							icon: /* @__PURE__ */ T(y, { size: 24 }),
 							title: "No submissions yet",
 							description: "Submit a solution above to see your verdicts and points here."
-						}) : /* @__PURE__ */ w("div", { children: $.map((e) => /* @__PURE__ */ w(N, { s: e }, e.id)) })]
+						}) : /* @__PURE__ */ T("div", {
+							className: "space-y-1",
+							children: $.map((e) => /* @__PURE__ */ T(P, { s: e }, e.id))
+						})]
 					})
 				})]
 			})
@@ -253,6 +306,6 @@ function P() {
 	});
 }
 //#endregion
-export { P as ApplicationsProblemDetailsPagePage };
+export { F as ApplicationsProblemDetailsPagePage };
 
 //# sourceMappingURL=ApplicationsProblemDetailsPagePage.js.map