@hed-hog/lms 0.0.364 → 0.0.366

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

@@ -1,9 +1,5 @@
 'use client';
 
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { useQueryClient } from '@tanstack/react-query';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -14,6 +10,8 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,
@@ -28,26 +26,29 @@ import {
 } from '@/components/ui/chart';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { useQueryClient } from '@tanstack/react-query';
 import {
-  Download,
   BookOpen,
   Clapperboard,
-  Loader2,
+  Download,
+  FileArchive,
   FileText,
   Film,
   HardDrive,
   Image,
   Layers,
+  Loader2,
   Mic,
   Paperclip,
   Sparkles,
   Target,
   Trash2,
-  type LucideIcon,
   Zap,
+  type LucideIcon,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Cell, Pie, PieChart } from 'recharts';
 import { toast } from 'sonner';
 import { useCourseContentOverviewQuery } from '../_data/use-course-content-overview';
@@ -57,7 +58,6 @@ const TYPE_COLORS: Record<string, string> = {
   video: '#0ea5e9',
   questao: '#f97316',
   post: '#22c55e',
-  exercicio: '#a855f7',
 };
 
 const TYPE_GRADIENTS: Record<
@@ -79,11 +79,6 @@ const TYPE_GRADIENTS: Record<
     icon: BookOpen,
     label: 'Post',
   },
-  exercicio: {
-    from: 'from-violet-500/12 via-fuchsia-500/6',
-    icon: Target,
-    label: 'Exercício',
-  },
 };
 
 const AREA_COLORS = ['#0f766e', '#0ea5e9', '#14b8a6', '#38bdf8', '#0891b2'];
@@ -162,6 +157,13 @@ const STORAGE_CATEGORY_META: Record<
     iconClassName: 'text-muted-foreground',
     iconBackgroundClassName: 'bg-muted',
   },
+  course_export: {
+    label: 'Arquivos de exportação',
+    accentClassName: 'from-emerald-500/20 via-green-500/10 to-transparent',
+    icon: FileArchive,
+    iconClassName: 'text-emerald-600 dark:text-emerald-400',
+    iconBackgroundClassName: 'bg-emerald-500/10',
+  },
 };
 
 interface Props {
@@ -299,7 +301,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
 
   const lessonTypeData = useMemo(() => {
     if (!data) return [];
-    const types = ['video', 'questao', 'post', 'exercicio'] as const;
+    const types = ['video', 'questao', 'post'] as const;
     return types
       .map((type) => ({
         type,
@@ -412,8 +414,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
       key: 'storage',
       label: 'Armazenamento',
       value: formatBytes(data.storage.totalBytes),
-      toneClassName:
-        'border-cyan-500/15 bg-cyan-500/10 text-cyan-700 dark:text-cyan-300',
+      toneClassName: 'border-border/60 bg-muted/30 text-muted-foreground',
     },
     {
       key: 'coverage',
@@ -422,22 +423,19 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
         totalLessons > 0
           ? `${Math.round((videoCount / totalLessons) * 100)}% das aulas`
           : '0% das aulas',
-      toneClassName:
-        'border-teal-500/15 bg-teal-500/10 text-teal-700 dark:text-teal-300',
+      toneClassName: 'border-border/60 bg-muted/30 text-muted-foreground',
     },
     {
       key: 'images',
       label: 'Imagens extraídas',
       value: `${data.media.extractedImageCount}`,
-      toneClassName:
-        'border-amber-500/15 bg-amber-500/10 text-amber-700 dark:text-amber-300',
+      toneClassName: 'border-border/60 bg-muted/30 text-muted-foreground',
     },
     {
       key: 'resources',
       label: 'Arquivos de apoio',
       value: `${data.resources.fileCount}`,
-      toneClassName:
-        'border-violet-500/15 bg-violet-500/10 text-violet-700 dark:text-violet-300',
+      toneClassName: 'border-border/60 bg-muted/30 text-muted-foreground',
     },
   ];
 
@@ -567,7 +565,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
         <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">
+              <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                 Course overview
               </div>
               <div className="mt-1 text-sm font-semibold text-foreground">
@@ -607,14 +605,14 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
         </div>
 
         <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-cyan-500/12 via-sky-500/6 to-transparent pt-2.5 pb-1.5!">
+          <CardHeader className="border-b border-border/70 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-cyan-500/10 text-cyan-600 ring-1 ring-inset ring-cyan-500/15 dark:text-cyan-400">
                   <HardDrive className="size-4" />
                 </div>
                 <div className="min-w-0">
-                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-cyan-600/80 dark:text-cyan-400/80">
+                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                     Storage footprint
                   </div>
                   <CardTitle className="mt-1 text-sm font-semibold">
@@ -626,15 +624,15 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                   </CardDescription>
                 </div>
               </div>
-              <div className="rounded-full border border-cyan-500/15 bg-cyan-500/10 px-2.5 py-1 text-[10px] font-semibold text-cyan-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-cyan-500/15 hover:shadow-md dark:text-cyan-300">
+              <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
                 {formatBytes(data.storage.totalBytes)}
               </div>
             </div>
           </CardHeader>
           <CardContent className="grid gap-3 px-2.5 py-2.5 sm:px-3 xl:grid-cols-[minmax(0,240px)_minmax(0,1fr)]">
             <div className="grid gap-2">
-              <div className="rounded-2xl border border-cyan-500/15 bg-linear-to-br from-cyan-500/12 via-sky-500/6 to-transparent px-3 py-3 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
-                <div className="text-[10px] font-semibold uppercase tracking-[0.18em] text-cyan-700/80 dark:text-cyan-300/80">
+              <div className="rounded-2xl border border-border/60 bg-muted/20 px-3 py-3 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
+                <div className="text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
                   Total armazenado
                 </div>
                 <div className="mt-2 text-2xl font-semibold tracking-tight text-foreground">
@@ -673,7 +671,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                   return (
                     <div
                       key={category.key}
-                      className="overflow-hidden rounded-2xl border border-border/60 bg-card/90 transition-all duration-200 hover:-translate-y-0.5 hover:border-cyan-500/20 hover:bg-background/95 hover:shadow-md"
+                      className="overflow-hidden rounded-2xl border border-border/60 bg-card/90 transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:bg-background/95 hover:shadow-md"
                     >
                       <div
                         className={`h-1.5 w-full bg-linear-to-r ${category.accentClassName}`}
@@ -792,14 +790,14 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
 
         <div className="grid gap-3 xl:grid-cols-2">
           <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-sky-500/12 via-blue-500/6 to-transparent pt-2.5 pb-1.5!">
+            <CardHeader className="border-b border-border/70 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-sky-500/10 text-sky-600 ring-1 ring-inset ring-sky-500/15 dark:text-sky-400">
                     <Layers className="size-4" />
                   </div>
                   <div className="min-w-0">
-                    <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-sky-600/80 dark:text-sky-400/80">
+                    <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                       Lesson mix
                     </div>
                     <CardTitle className="mt-1 text-sm font-semibold">
@@ -810,7 +808,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                     </CardDescription>
                   </div>
                 </div>
-                <div className="rounded-full border border-sky-500/15 bg-sky-500/10 px-2.5 py-1 text-[10px] font-semibold text-sky-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-sky-500/15 hover:shadow-md dark:text-sky-300">
+                <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
                   {totalLessons} aulas
                 </div>
               </div>
@@ -884,7 +882,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                   return (
                     <div
                       key={item.type}
-                      className="flex items-center gap-3 rounded-xl border border-border/60 bg-muted/20 px-3 py-2.5 transition-all duration-200 hover:-translate-y-0.5 hover:border-sky-500/20 hover:bg-background/95 hover:shadow-md"
+                      className="flex items-center gap-3 rounded-xl border border-border/60 bg-muted/20 px-3 py-2.5 transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:bg-background/95 hover:shadow-md"
                     >
                       <div
                         className="flex size-8 shrink-0 items-center justify-center rounded-lg"
@@ -924,16 +922,131 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
             </CardContent>
           </Card>
 
+          {/* Video pipeline */}
+          {videoCount > 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 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">
+                      <Film className="size-4" />
+                    </div>
+                    <div className="min-w-0">
+                      <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+                        Video pipeline
+                      </div>
+                      <CardTitle className="mt-1 text-sm font-semibold">
+                        {t('videoPipeline.title')}
+                      </CardTitle>
+                      <CardDescription className="mt-0.5">
+                        {t('videoPipeline.description')}
+                      </CardDescription>
+                    </div>
+                  </div>
+                  <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
+                    {videoCount} vídeos
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="flex flex-col gap-3 px-2.5 py-2.5 sm:px-3">
+                {(
+                  [
+                    {
+                      key: 'total',
+                      label: t('videoPipeline.total'),
+                      value: videoCount,
+                      total: videoCount,
+                      color: '#8b5cf6',
+                      bgColor: 'bg-violet-500/10',
+                      textColor: 'text-violet-600 dark:text-violet-400',
+                      icon: Clapperboard,
+                    },
+                    {
+                      key: 'withVideo',
+                      label: t('videoPipeline.withVideo'),
+                      value: data.videos.withVideo,
+                      total: videoCount,
+                      color: '#a855f7',
+                      bgColor: 'bg-purple-500/10',
+                      textColor: 'text-purple-600 dark:text-purple-400',
+                      icon: Film,
+                    },
+                    {
+                      key: 'withProcessedVideo',
+                      label: t('videoPipeline.withProcessedVideo'),
+                      value: data.videos.withProcessedVideo,
+                      total: videoCount,
+                      color: '#d946ef',
+                      bgColor: 'bg-fuchsia-500/10',
+                      textColor: 'text-fuchsia-600 dark:text-fuchsia-400',
+                      icon: Sparkles,
+                    },
+                  ] as const
+                ).map((stat) => {
+                  const pct =
+                    stat.total > 0
+                      ? Math.round((stat.value / stat.total) * 100)
+                      : stat.key === 'total'
+                        ? 100
+                        : 0;
+                  const Icon = stat.icon;
+                  return (
+                    <div
+                      key={stat.key}
+                      className="flex flex-col gap-2 rounded-xl border border-transparent px-2 py-1 transition-all duration-200 hover:-translate-y-0.5 hover:border-border/60 hover:bg-background/70 hover:shadow-sm"
+                    >
+                      <div className="flex items-center gap-3">
+                        <div
+                          className={`flex size-8 shrink-0 items-center justify-center rounded-lg ${stat.bgColor}`}
+                        >
+                          <Icon className={`size-4 ${stat.textColor}`} />
+                        </div>
+                        <div className="flex flex-1 items-center justify-between">
+                          <span className="text-sm font-medium text-foreground">
+                            {stat.label}
+                          </span>
+                          <div className="flex items-center gap-2">
+                            <span className="font-mono text-xs text-muted-foreground">
+                              {stat.value}/{stat.total}
+                            </span>
+                            <span
+                              className="rounded-full px-2 py-0.5 text-[10px] font-semibold transition-all duration-200 hover:shadow-sm"
+                              style={{
+                                backgroundColor: `${stat.color}20`,
+                                color: stat.color,
+                              }}
+                            >
+                              {pct}%
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="ml-11 h-2 w-full overflow-hidden rounded-full bg-muted">
+                        <div
+                          className="h-full rounded-full transition-all duration-700 ease-out"
+                          style={{
+                            width: `${pct}%`,
+                            backgroundColor: stat.color,
+                          }}
+                        />
+                      </div>
+                    </div>
+                  );
+                })}
+              </CardContent>
+            </Card>
+          )}
+
           {/* Video coverage */}
           <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!">
+            <CardHeader className="border-b border-border/70 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">
                     <Clapperboard 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">
+                    <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                       Video coverage
                     </div>
                     <CardTitle className="mt-1 text-sm font-semibold">
@@ -944,7 +1057,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                     </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">
+                <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
                   {videoCount} vídeos
                 </div>
               </div>
@@ -1049,14 +1162,14 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
           <div className="grid gap-3 xl:grid-cols-2">
             {xpData.areas.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-teal-500/10 via-cyan-500/5 to-transparent pt-2.5 pb-1.5!">
+                <CardHeader className="border-b border-border/70 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">
                         <Sparkles 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">
+                        <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                           Macro areas
                         </div>
                         <CardTitle className="mt-1 text-sm font-semibold">
@@ -1067,7 +1180,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                         </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">
+                    <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
                       {xpData.areas.length} áreas
                     </div>
                   </div>
@@ -1076,7 +1189,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                   {xpData.areas.map((area, index) => (
                     <div
                       key={area.xpAreaId}
-                      className="flex items-center gap-3 rounded-xl border border-border/60 bg-muted/20 px-3 py-2.5 transition-all duration-200 hover:-translate-y-0.5 hover:border-teal-500/20 hover:bg-background/95 hover:shadow-md"
+                      className="flex items-center gap-3 rounded-xl border border-border/60 bg-muted/20 px-3 py-2.5 transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:bg-background/95 hover:shadow-md"
                     >
                       <div
                         className="flex size-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white"
@@ -1107,14 +1220,14 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
 
             {xpData.skills.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-orange-500/10 via-amber-500/5 to-transparent pt-2.5 pb-1.5!">
+                <CardHeader className="border-b border-border/70 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">
                         <Target 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">
+                        <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                           Skills
                         </div>
                         <CardTitle className="mt-1 text-sm font-semibold">
@@ -1125,7 +1238,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                         </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">
+                    <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
                       {xpData.skills.length} skills
                     </div>
                   </div>
@@ -1134,7 +1247,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                   {xpData.skills.map((skill, index) => (
                     <div
                       key={skill.xpSkillId}
-                      className="flex items-center gap-3 rounded-xl border border-border/60 bg-muted/20 px-3 py-2.5 transition-all duration-200 hover:-translate-y-0.5 hover:border-orange-500/20 hover:bg-background/95 hover:shadow-md"
+                      className="flex items-center gap-3 rounded-xl border border-border/60 bg-muted/20 px-3 py-2.5 transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:bg-background/95 hover:shadow-md"
                     >
                       <div
                         className="flex size-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white"

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

@@ -262,7 +262,7 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
       <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">
+            <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
               Course XP overview
             </div>
             <div className="mt-1 text-sm font-semibold text-foreground">
@@ -301,14 +301,14 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
 
       <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!">
+          <CardHeader className="border-b border-border/70 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">
+                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                     Macro areas
                   </div>
                   <CardTitle className="mt-1 text-sm font-semibold">
@@ -319,7 +319,7 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
                   </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">
+              <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
                 {data.areas.length} áreas
               </div>
             </div>
@@ -388,7 +388,7 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
               {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)]"
+                  className="rounded-2xl border border-border/60 bg-card/90 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-border/80 hover:shadow-[0_18px_34px_-22px_rgba(15,23,42,0.5)]"
                 >
                   <div className="flex items-center gap-2">
                     <span
@@ -423,14 +423,14 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
         </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!">
+          <CardHeader className="border-b border-border/70 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">
+                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                     Skill density
                   </div>
                   <CardTitle className="mt-1 text-sm font-semibold">
@@ -441,7 +441,7 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
                   </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">
+              <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
                 {data.skills.length} skills
               </div>
             </div>
@@ -518,7 +518,7 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
               {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)]"
+                  className="rounded-2xl border border-border/60 bg-card/90 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-border/80 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">
@@ -556,14 +556,14 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
 
       {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!">
+          <CardHeader className="border-b border-border/70 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">
+                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                     Learning mix
                   </div>
                   <CardTitle className="mt-1 text-sm font-semibold">
@@ -574,7 +574,7 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
                   </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">
+              <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
                 {learningTypeData.length} tipos
               </div>
             </div>
@@ -583,7 +583,7 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
             {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)]"
+                className="flex h-full flex-col justify-start gap-1.5 rounded-2xl border border-border/60 bg-card/90 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-border/80 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">