@hed-hog/lms 0.0.358 → 0.0.364

package/hedhog/frontend/app/courses/[id]/structure/_components/course-tree-dnd.tsx.ejs

@@ -27,6 +27,7 @@ import {
   useReorderLessonsMutation,
   useReorderSessionsMutation,
 } from '../_data/use-course-structure-mutations';
+import { useCourseXpOverviewQuery } from '../_data/use-course-xp-overview';
 import { TreeDragOverlay } from './drag-overlay';
 import { SortableTreeRow } from './sortable-tree-row';
 import { useStructureStore } from './store';
@@ -88,6 +89,20 @@ export function CourseTreeDnd() {
     [sessions]
   );
 
+  const { data: courseXpOverview } = useCourseXpOverviewQuery(
+    course?.id ?? null
+  );
+
+  const lessonsWithXpMap = useMemo(
+    () =>
+      new Set(
+        (courseXpOverview?.lessons ?? [])
+          .filter((lesson) => lesson.hasMap)
+          .map((lesson) => String(lesson.courseLessonId))
+      ),
+    [courseXpOverview]
+  );
+
   const isSearchActive = filterQuery.trim().length > 0;
   const dragDisabled = isSearchActive;
 
@@ -375,6 +390,7 @@ export function CourseTreeDnd() {
                             sessionIndicatorMap={sessionIndicatorMap}
                             visibleItems={items}
                             dragDisabled={dragDisabled}
+                            lessonsWithXpMap={lessonsWithXpMap}
                           />
                         </div>
                       ))}

package/hedhog/frontend/app/courses/[id]/structure/_components/course-tree.tsx.ejs

@@ -44,6 +44,7 @@ export function CourseTree() {
     () => buildSessionIndicatorMap(lessons),
     [lessons]
   );
+  const lessonsWithXpMap = useMemo(() => new Set<string>(), []);
 
   const estimateSize = useCallback(
     (index: number) => ROW_HEIGHT[items[index]?.type ?? 'lesson'] ?? 32,
@@ -131,6 +132,7 @@ export function CourseTree() {
                     lessonCountMap={lessonCountMap}
                     sessionIndicatorMap={sessionIndicatorMap}
                     visibleItems={items}
+                    lessonsWithXpMap={lessonsWithXpMap}
                   />
                 </div>
               );

package/hedhog/frontend/app/courses/[id]/structure/_components/course-xp-overview-tab.tsx.ejs

@@ -0,0 +1,623 @@
+'use client';
+
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  BarChart3,
+  BookOpen,
+  ChartPie,
+  Layers3,
+  Sparkles,
+  Target,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo } from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Pie,
+  PieChart,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { useCourseXpOverviewQuery } from '../_data/use-course-xp-overview';
+import {
+  resolveXpAreaColor,
+  resolveXpLearningTypeColor,
+  resolveXpSkillColor,
+} from '../_utils/xp-color-config';
+import { XpHighlightPill, XpMetaPill } from './xp-premium-pills';
+
+type XpAreaOption = {
+  id: number;
+  name: string;
+  color: string | null;
+};
+
+function formatCompactNumber(value: number, locale: string) {
+  return new Intl.NumberFormat(locale, {
+    notation: 'compact',
+    maximumFractionDigits: value >= 100 ? 0 : 1,
+  }).format(value);
+}
+
+function formatPercentage(value: number, locale: string) {
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 1,
+  }).format(value);
+}
+
+function getTopItems<T>(items: T[], maxItems = 5) {
+  return items.slice(0, maxItems);
+}
+
+interface Props {
+  courseId: string;
+  locale: string;
+}
+
+export function CourseXpOverviewTab({ courseId, locale }: Props) {
+  const t = useTranslations('lms.CursoEditPage.structureEditor.xpOverview');
+  const { request } = useApp();
+  const { data, isLoading, isError } = useCourseXpOverviewQuery(courseId);
+  const { data: areaOptions = [] } = useQuery<XpAreaOption[]>({
+    queryKey: ['lms-xp-areas-all'],
+    enabled: Boolean(courseId),
+    queryFn: async () => {
+      const response = await request<XpAreaOption[]>({
+        url: '/lms/xp/areas/all',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    placeholderData: [],
+  });
+
+  const areaColorLookup = useMemo(
+    () => new Map(areaOptions.map((area) => [area.id, area.color])),
+    [areaOptions]
+  );
+
+  const kpiItems = useMemo(() => {
+    if (!data) return [];
+
+    return [
+      {
+        key: 'totalXp',
+        title: t('kpis.totalXp'),
+        value: data.summary.totalXp,
+        description: t('kpis.totalXpDescription'),
+        icon: Sparkles,
+        accentClassName: 'from-cyan-500 via-sky-500 to-blue-500',
+        iconContainerClassName:
+          'bg-cyan-500/10 text-cyan-600 dark:text-cyan-400',
+      },
+      {
+        key: 'mappedLessons',
+        title: t('kpis.mappedLessons'),
+        value: `${data.summary.mappedLessons}/${data.summary.totalLessons}`,
+        description: t('kpis.mappedLessonsDescription'),
+        icon: BookOpen,
+        accentClassName: 'from-emerald-500 via-teal-500 to-green-500',
+        iconContainerClassName:
+          'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
+      },
+      {
+        key: 'areas',
+        title: 'Áreas macro',
+        value: data.areas.length,
+        description: 'Principais áreas mapeadas no curso',
+        icon: Layers3,
+        accentClassName: 'from-amber-500 via-orange-500 to-rose-500',
+        iconContainerClassName:
+          'bg-amber-500/10 text-amber-600 dark:text-amber-400',
+      },
+      {
+        key: 'skills',
+        title: 'Skills únicas',
+        value: data.skills.length,
+        description: 'Quantidade total de skills do curso',
+        icon: Target,
+        accentClassName: 'from-violet-500 via-fuchsia-500 to-purple-500',
+        iconContainerClassName:
+          'bg-violet-500/10 text-violet-600 dark:text-violet-400',
+      },
+    ];
+  }, [data, t]);
+
+  const areaData = getTopItems(data?.areas ?? [], 6);
+  const skillData = getTopItems(data?.skills ?? [], 6);
+  const learningTypeData = getTopItems(data?.learningTypes ?? [], 4);
+
+  const areaChartConfig = useMemo(
+    () =>
+      Object.fromEntries(
+        areaData.map((item, index) => [
+          item.slug,
+          {
+            label: item.name,
+            color: resolveXpAreaColor({
+              areaId: item.xpAreaId,
+              areaSlug: item.slug,
+              index,
+              persistedColor: areaColorLookup.get(item.xpAreaId),
+            }),
+          },
+        ])
+      ),
+    [areaColorLookup, areaData]
+  );
+
+  const skillChartConfig = useMemo(
+    () =>
+      Object.fromEntries(
+        skillData.map((item, index) => [
+          item.slug,
+          {
+            label: item.name,
+            color: resolveXpSkillColor({
+              skillId: item.xpSkillId,
+              skillSlug: item.slug,
+              index,
+            }),
+          },
+        ])
+      ),
+    [skillData]
+  );
+
+  const overviewHighlights = useMemo(() => {
+    if (!data) return [];
+
+    const topArea = data.areas[0];
+    const topSkill = data.skills[0];
+
+    return [
+      topArea
+        ? {
+            key: 'top-area',
+            label: 'Área líder',
+            value: `${topArea.name} ${formatPercentage(topArea.sharePercent, locale)}%`,
+            tone: 'sky' as const,
+          }
+        : null,
+      topSkill
+        ? {
+            key: 'top-skill',
+            label: 'Skill líder',
+            value: `${topSkill.name} ${formatPercentage(topSkill.sharePercent, locale)}%`,
+            tone: 'amber' as const,
+          }
+        : null,
+      {
+        key: 'coverage',
+        label: 'Cobertura',
+        value: `${data.summary.mappedLessons}/${data.summary.totalLessons} aulas`,
+        tone: 'emerald' as const,
+      },
+    ].filter(Boolean);
+  }, [data, locale]);
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col gap-3">
+        <div className="grid grid-cols-2 gap-3 xl:grid-cols-4">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <Skeleton key={index} className="h-24 rounded-xl" />
+          ))}
+        </div>
+        <div className="grid gap-3 xl:grid-cols-2">
+          <Skeleton className="h-72 rounded-xl" />
+          <Skeleton className="h-72 rounded-xl" />
+        </div>
+        <Skeleton className="h-36 rounded-xl" />
+      </div>
+    );
+  }
+
+  if (isError || !data) {
+    return (
+      <Card className="border-dashed bg-muted/20">
+        <CardHeader>
+          <CardTitle className="text-sm font-semibold">
+            {t('errorTitle')}
+          </CardTitle>
+          <CardDescription>{t('errorDescription')}</CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  if (data.summary.mappedLessons === 0) {
+    return (
+      <Card className="border-dashed bg-muted/20">
+        <CardHeader>
+          <CardTitle className="text-sm font-semibold">
+            {t('emptyTitle')}
+          </CardTitle>
+          <CardDescription>{t('emptyDescription')}</CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2.5">
+      <div className="rounded-2xl border border-border/70 bg-linear-to-br from-background via-background to-muted/30 px-2.5 py-2 shadow-[0_14px_34px_-28px_rgba(15,23,42,0.45)] backdrop-blur-sm sm:px-3 sm:py-2.5">
+        <div className="flex flex-wrap items-start justify-between gap-3 border-b border-border/50 pb-2">
+          <div className="min-w-0">
+            <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-cyan-700/80 dark:text-cyan-300/80">
+              Course XP overview
+            </div>
+            <div className="mt-1 text-sm font-semibold text-foreground">
+              Panorama do mapeamento do curso
+            </div>
+            <div className="mt-0.5 text-xs text-muted-foreground">
+              Leitura consolidada de áreas macro, skills e tipos de aprendizado.
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-1.5">
+            {overviewHighlights.map((item) =>
+              item ? (
+                <XpHighlightPill
+                  key={item.key}
+                  label={item.label}
+                  value={item.value}
+                  tone={item.tone}
+                />
+              ) : null
+            )}
+          </div>
+        </div>
+
+        <div className="mt-2">
+          <KpiCardsGrid
+            items={kpiItems.map((item) => ({
+              ...item,
+              layout: 'compact' as const,
+            }))}
+            columns={4}
+            className="gap-2.5"
+            cardClassName="shadow-[0_12px_24px_-22px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_18px_34px_-22px_rgba(15,23,42,0.5)]"
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-3 xl:grid-cols-[minmax(0,1.06fr)_minmax(0,0.94fr)]">
+        <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)]">
+          <CardHeader className="border-b border-border/70 bg-linear-to-r from-teal-500/12 via-cyan-500/6 to-transparent pt-2.5 pb-1.5!">
+            <div className="flex flex-wrap items-start justify-between gap-3">
+              <div className="flex min-w-0 items-start gap-3">
+                <div className="flex size-9 shrink-0 items-center justify-center rounded-2xl bg-teal-500/10 text-teal-600 ring-1 ring-inset ring-teal-500/15 dark:text-teal-400">
+                  <ChartPie className="size-4" />
+                </div>
+                <div className="min-w-0">
+                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-teal-600/80 dark:text-teal-400/80">
+                    Macro areas
+                  </div>
+                  <CardTitle className="mt-1 text-sm font-semibold">
+                    {t('charts.macroAreas.title')}
+                  </CardTitle>
+                  <CardDescription className="mt-0.5">
+                    {t('charts.macroAreas.description')}
+                  </CardDescription>
+                </div>
+              </div>
+              <div className="rounded-full border border-teal-500/15 bg-teal-500/10 px-2.5 py-1 text-[10px] font-semibold text-teal-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-teal-500/15 hover:shadow-md dark:text-teal-300">
+                {data.areas.length} áreas
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="grid gap-2.5 px-2.5 py-2.5 sm:px-3 md:grid-cols-[minmax(0,188px)_minmax(0,1fr)] md:items-start">
+            <ChartContainer config={areaChartConfig} className="h-48 w-full">
+              <PieChart>
+                <Pie
+                  data={areaData}
+                  dataKey="xp"
+                  nameKey="name"
+                  innerRadius={48}
+                  outerRadius={72}
+                  paddingAngle={2.5}
+                  animationDuration={900}
+                  strokeWidth={3}
+                  stroke="hsl(var(--background))"
+                >
+                  {areaData.map((entry, index) => (
+                    <Cell
+                      key={entry.xpAreaId}
+                      fill={resolveXpAreaColor({
+                        areaId: entry.xpAreaId,
+                        areaSlug: entry.slug,
+                        index,
+                        persistedColor: areaColorLookup.get(entry.xpAreaId),
+                      })}
+                    />
+                  ))}
+                </Pie>
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      hideIndicator
+                      formatter={(value, _name, item) => {
+                        const payload = item?.payload as
+                          | {
+                              name?: string;
+                              lessonCount?: number;
+                              segmentCount?: number;
+                            }
+                          | undefined;
+                        return (
+                          <div className="flex min-w-48 flex-col gap-1 text-xs">
+                            <span className="font-medium text-foreground">
+                              {payload?.name}
+                            </span>
+                            <span className="text-muted-foreground">
+                              {formatCompactNumber(Number(value ?? 0), locale)}{' '}
+                              XP
+                            </span>
+                            <span className="text-muted-foreground">
+                              {payload?.lessonCount ?? 0} aulas ·{' '}
+                              {payload?.segmentCount ?? 0} segmentos
+                            </span>
+                          </div>
+                        );
+                      }}
+                    />
+                  }
+                />
+              </PieChart>
+            </ChartContainer>
+
+            <div className="grid gap-1.5">
+              {areaData.map((item, index) => (
+                <div
+                  key={item.xpAreaId}
+                  className="rounded-2xl border border-border/60 bg-linear-to-br from-background via-background to-sky-500/5 px-3 py-2 shadow-[0_14px_28px_-24px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:border-sky-500/20 hover:to-sky-500/10 hover:shadow-[0_18px_34px_-22px_rgba(15,23,42,0.5)]"
+                >
+                  <div className="flex items-center gap-2">
+                    <span
+                      className="size-2.5 rounded-full"
+                      style={{
+                        backgroundColor: resolveXpAreaColor({
+                          areaId: item.xpAreaId,
+                          areaSlug: item.slug,
+                          index,
+                          persistedColor: areaColorLookup.get(item.xpAreaId),
+                        }),
+                      }}
+                    />
+                    <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
+                      {item.name}
+                    </span>
+                    <span className="rounded-full border border-border/50 bg-background/90 px-2 py-0.5 text-[10px] font-semibold text-muted-foreground shadow-sm transition-all duration-200 hover:border-border hover:bg-background hover:text-foreground hover:shadow-md">
+                      {formatPercentage(item.sharePercent, locale)}%
+                    </span>
+                  </div>
+                  <div className="mt-1.5 flex flex-wrap gap-1">
+                    <XpMetaPill
+                      value={`${formatCompactNumber(item.xp, locale)} XP`}
+                    />
+                    <XpMetaPill value={`${item.lessonCount} aulas`} />
+                    <XpMetaPill value={`${item.segmentCount} seg.`} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)]">
+          <CardHeader className="border-b border-border/70 bg-linear-to-r from-orange-500/12 via-amber-500/6 to-transparent pt-2.5 pb-1.5!">
+            <div className="flex flex-wrap items-start justify-between gap-3">
+              <div className="flex min-w-0 items-start gap-3">
+                <div className="flex size-9 shrink-0 items-center justify-center rounded-2xl bg-orange-500/10 text-orange-600 ring-1 ring-inset ring-orange-500/15 dark:text-orange-400">
+                  <BarChart3 className="size-4" />
+                </div>
+                <div className="min-w-0">
+                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-orange-600/80 dark:text-orange-400/80">
+                    Skill density
+                  </div>
+                  <CardTitle className="mt-1 text-sm font-semibold">
+                    {t('charts.skills.title')}
+                  </CardTitle>
+                  <CardDescription className="mt-0.5">
+                    {t('charts.skills.description')}
+                  </CardDescription>
+                </div>
+              </div>
+              <div className="rounded-full border border-orange-500/15 bg-orange-500/10 px-2.5 py-1 text-[10px] font-semibold text-orange-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-orange-500/15 hover:shadow-md dark:text-orange-300">
+                {data.skills.length} skills
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-2.5 px-2.5 py-2.5 sm:px-3">
+            <ChartContainer config={skillChartConfig} className="h-48 w-full">
+              <BarChart
+                data={skillData}
+                layout="vertical"
+                margin={{ left: 10, right: 10 }}
+                barCategoryGap={10}
+              >
+                <CartesianGrid horizontal={false} strokeDasharray="3 3" />
+                <XAxis type="number" tickLine={false} axisLine={false} />
+                <YAxis
+                  dataKey="name"
+                  type="category"
+                  width={120}
+                  tickLine={false}
+                  axisLine={false}
+                />
+                <ChartTooltip
+                  cursor={false}
+                  content={
+                    <ChartTooltipContent
+                      hideLabel
+                      formatter={(value, _name, item) => {
+                        const payload = item?.payload as
+                          | {
+                              name?: string;
+                              lessonCount?: number;
+                              segmentCount?: number;
+                            }
+                          | undefined;
+                        return (
+                          <div className="flex min-w-48 flex-col gap-1 text-xs">
+                            <span className="font-medium text-foreground">
+                              {payload?.name}
+                            </span>
+                            <span className="text-muted-foreground">
+                              {formatCompactNumber(Number(value ?? 0), locale)}{' '}
+                              XP
+                            </span>
+                            <span className="text-muted-foreground">
+                              {payload?.lessonCount ?? 0} aulas ·{' '}
+                              {payload?.segmentCount ?? 0} segmentos
+                            </span>
+                          </div>
+                        );
+                      }}
+                    />
+                  }
+                />
+                <Bar
+                  dataKey="xp"
+                  radius={[0, 10, 10, 0]}
+                  animationDuration={950}
+                >
+                  {skillData.map((entry, index) => (
+                    <Cell
+                      key={entry.xpSkillId}
+                      fill={resolveXpSkillColor({
+                        skillId: entry.xpSkillId,
+                        skillSlug: entry.slug,
+                        index,
+                      })}
+                    />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ChartContainer>
+
+            <div className="grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-1.5">
+              {skillData.map((item, index) => (
+                <div
+                  key={item.xpSkillId}
+                  className="rounded-2xl border border-border/60 bg-linear-to-br from-background via-background to-orange-500/5 px-3 py-2 shadow-[0_14px_28px_-24px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:border-orange-500/20 hover:to-orange-500/10 hover:shadow-[0_18px_34px_-22px_rgba(15,23,42,0.5)]"
+                >
+                  <div className="flex flex-wrap items-center justify-between gap-2">
+                    <div className="flex min-w-0 items-center gap-2">
+                      <span
+                        className="size-2 rounded-full"
+                        style={{
+                          backgroundColor: resolveXpSkillColor({
+                            skillId: item.xpSkillId,
+                            skillSlug: item.slug,
+                            index,
+                          }),
+                        }}
+                      />
+                      <span className="truncate text-sm font-medium text-foreground">
+                        {item.name}
+                      </span>
+                    </div>
+                    <span className="rounded-full border border-border/50 bg-background/90 px-2 py-0.5 text-[10px] font-semibold text-muted-foreground shadow-sm transition-all duration-200 hover:border-border hover:bg-background hover:text-foreground hover:shadow-md">
+                      {formatPercentage(item.sharePercent, locale)}%
+                    </span>
+                  </div>
+                  <div className="mt-1.5 flex flex-wrap gap-1">
+                    <XpMetaPill
+                      value={`${formatCompactNumber(item.xp, locale)} XP`}
+                    />
+                    <XpMetaPill value={`${item.lessonCount} aulas`} />
+                    <XpMetaPill value={`${item.segmentCount} seg.`} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {learningTypeData.length > 0 && (
+        <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)]">
+          <CardHeader className="border-b border-border/70 bg-linear-to-r from-violet-500/10 via-fuchsia-500/5 to-transparent pt-2.5 pb-1.5!">
+            <div className="flex flex-wrap items-start justify-between gap-3">
+              <div className="flex min-w-0 items-start gap-3">
+                <div className="flex size-9 shrink-0 items-center justify-center rounded-2xl bg-violet-500/10 text-violet-600 ring-1 ring-inset ring-violet-500/15 dark:text-violet-400">
+                  <Sparkles className="size-4" />
+                </div>
+                <div className="min-w-0">
+                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-violet-600/80 dark:text-violet-400/80">
+                    Learning mix
+                  </div>
+                  <CardTitle className="mt-1 text-sm font-semibold">
+                    {t('charts.learningTypes.title')}
+                  </CardTitle>
+                  <CardDescription className="mt-0.5">
+                    {t('charts.learningTypes.description')}
+                  </CardDescription>
+                </div>
+              </div>
+              <div className="rounded-full border border-violet-500/15 bg-violet-500/10 px-2.5 py-1 text-[10px] font-semibold text-violet-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-violet-500/15 hover:shadow-md dark:text-violet-300">
+                {learningTypeData.length} tipos
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] content-start gap-2 px-2.5 py-2.5 sm:px-3">
+            {learningTypeData.map((item, index) => (
+              <div
+                key={item.xpLearningTypeId}
+                className="flex h-full flex-col justify-start gap-1.5 rounded-2xl border border-border/60 bg-linear-to-br from-background via-background to-violet-500/5 px-3 py-2 shadow-[0_14px_28px_-24px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:border-violet-500/20 hover:to-violet-500/10 hover:shadow-[0_18px_34px_-22px_rgba(15,23,42,0.5)]"
+              >
+                <div className="flex flex-wrap items-center gap-2">
+                  <div className="flex min-w-0 flex-1 items-center gap-2">
+                    <span
+                      className="size-2.5 rounded-full"
+                      style={{
+                        backgroundColor: resolveXpLearningTypeColor({
+                          learningTypeId: item.xpLearningTypeId,
+                          learningTypeSlug: item.slug,
+                          index,
+                        }),
+                      }}
+                    />
+                    <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
+                      {item.name}
+                    </span>
+                  </div>
+                  <span className="rounded-full border border-border/50 bg-background/90 px-2 py-0.5 text-[10px] font-semibold text-muted-foreground shadow-sm transition-all duration-200 hover:border-border hover:bg-background hover:text-foreground hover:shadow-md">
+                    x{formatPercentage(item.multiplier, locale)}
+                  </span>
+                </div>
+                <div className="flex flex-wrap gap-1">
+                  <XpMetaPill
+                    value={`${formatCompactNumber(item.xp, locale)} XP`}
+                  />
+                  <XpMetaPill
+                    value={`${formatPercentage(item.sharePercent, locale)}% share`}
+                  />
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}