@hed-hog/lms 0.0.365 → 0.0.366

package/hedhog/frontend/app/classes/page.tsx.ejs

@@ -7,8 +7,17 @@ import {
   PageHeader,
   PaginationFooter,
   SearchBar,
-  ViewModeToggle,
 } from '@/components/entity-list';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from '@/components/ui/toggle-group';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -39,10 +48,13 @@ import { motion } from 'framer-motion';
 import {
   AlertTriangle,
   BarChart3,
+  CalendarDays,
   CalendarIcon,
   Clock,
   Eye,
+  LayoutGrid,
   Laptop,
+  List,
   Loader2,
   MapPin,
   Monitor,
@@ -59,6 +71,7 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { ClassFormSheet } from '../_components/class-form-sheet';
+import { ClassesCalendarView } from './_components/classes-calendar-view';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -229,7 +242,7 @@ function mapApiClass(item: ApiClass): Turma {
   };
 }
 
-type ViewMode = 'cards' | 'list';
+type ViewMode = 'cards' | 'list' | 'calendar';
 
 // ── Constants ─────────────────────────────────────────────────────────────────
 
@@ -269,7 +282,7 @@ const TIPO_ICON: Record<string, LucideIcon> = {
   hibrida: Laptop,
 };
 
-const PAGE_SIZES = [6, 12, 24];
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 
 // ── Animations ────────────────────────────────────────────────────────────────
 
@@ -306,15 +319,49 @@ export default function TurmasPage() {
   const [viewMode, setViewMode] = usePersistedViewMode<ViewMode>({
     storageKey: 'lms:classes:view-mode',
     defaultValue: 'cards',
-    allowedValues: ['cards', 'list'],
+    allowedValues: ['cards', 'list', 'calendar'],
   });
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
+
+  const { data: generalSettings } = useQuery<{
+    data: Array<{ slug: string; value: string }>;
+  }>({
+    queryKey: ['setting-group-general'],
+    queryFn: async () => {
+      const response = await request<{
+        data: Array<{ slug: string; value: string }>;
+      }>({
+        url: '/setting/group/general',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const pageSizeOptions = useMemo(() => {
+    const setting = generalSettings?.data?.find(
+      (s) => s.slug === 'pagination-page-sizes'
+    );
+    if (!setting?.value) return DEFAULT_PAGE_SIZES;
+    try {
+      const parsed = JSON.parse(setting.value) as string[];
+      const sizes = parsed
+        .map(Number)
+        .filter((n) => !isNaN(n) && n > 0)
+        .sort((a, b) => a - b);
+      return sizes.length > 0 ? sizes : DEFAULT_PAGE_SIZES;
+    } catch {
+      return DEFAULT_PAGE_SIZES;
+    }
+  }, [generalSettings]);
+
   const [pageSize, setPageSize] = usePersistedPageSize({
     storageKey: 'pagination:global:pageSize',
     defaultValue: 12,
-    allowedValues: PAGE_SIZES,
+    allowedValues: pageSizeOptions,
   });
 
   const { data: coursesResponse } = useQuery<ApiCourseList>({
@@ -333,6 +380,9 @@ export default function TurmasPage() {
     },
   });
 
+  const effectivePage = viewMode === 'calendar' ? 1 : currentPage;
+  const effectivePageSize = viewMode === 'calendar' ? 500 : pageSize;
+
   const {
     data: classesResponse,
     refetch: refetchClasses,
@@ -341,8 +391,8 @@ export default function TurmasPage() {
   } = useQuery<ApiClassList>({
     queryKey: [
       'lms-classes-list',
-      currentPage,
-      pageSize,
+      effectivePage,
+      effectivePageSize,
       buscaDebounced,
       filtroStatusInput,
       filtroTipoInput,
@@ -359,8 +409,8 @@ export default function TurmasPage() {
         url: '/lms/classes',
         method: 'GET',
         params: {
-          page: currentPage,
-          pageSize,
+          page: effectivePage,
+          pageSize: effectivePageSize,
           ...(buscaDebounced ? { search: buscaDebounced } : {}),
           ...(filtroStatusInput !== 'todos'
             ? { status: toApiStatus(filtroStatusInput) }
@@ -742,13 +792,62 @@ export default function TurmasPage() {
                 className: 'sm:w-56',
               },
             ]}
-            afterSearchButton={
-              <ViewModeToggle
-                viewMode={viewMode}
-                onViewModeChange={setViewMode}
-                listLabel={t('viewMode.list')}
-                cardsLabel={t('viewMode.cards')}
-              />
+            actions={
+              <TooltipProvider>
+                <ToggleGroup
+                  type="single"
+                  value={viewMode}
+                  onValueChange={(value) => {
+                    if (
+                      value === 'cards' ||
+                      value === 'list' ||
+                      value === 'calendar'
+                    ) {
+                      setViewMode(value);
+                    }
+                  }}
+                  variant="outline"
+                  size="sm"
+                  className="shrink-0"
+                >
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <ToggleGroupItem
+                        value="cards"
+                        aria-label={t('viewMode.cards')}
+                        className="cursor-pointer"
+                      >
+                        <LayoutGrid className="h-4 w-4" />
+                      </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent>{t('viewMode.cards')}</TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <ToggleGroupItem
+                        value="list"
+                        aria-label={t('viewMode.list')}
+                        className="cursor-pointer"
+                      >
+                        <List className="h-4 w-4" />
+                      </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent>{t('viewMode.list')}</TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <ToggleGroupItem
+                        value="calendar"
+                        aria-label={t('viewMode.calendar')}
+                        className="cursor-pointer"
+                      >
+                        <CalendarDays className="h-4 w-4" />
+                      </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent>{t('viewMode.calendar')}</TooltipContent>
+                  </Tooltip>
+                </ToggleGroup>
+              </TooltipProvider>
             }
           />
           <div className="flex items-center justify-between gap-3">
@@ -774,7 +873,13 @@ export default function TurmasPage() {
 
         {/* Classes list */}
         {loading ? (
-          viewMode === 'cards' ? (
+          viewMode === 'calendar' ? (
+            <div className="grid grid-cols-7 gap-px">
+              {Array.from({ length: 42 }).map((_, i) => (
+                <div key={i} className="h-16 animate-pulse rounded bg-muted/30" />
+              ))}
+            </div>
+          ) : viewMode === 'cards' ? (
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
               {Array.from({ length: 6 }).map((_, i) => (
                 <Card key={i} className="overflow-hidden border-border/70">
@@ -1018,7 +1123,7 @@ export default function TurmasPage() {
               );
             })}
           </motion.div>
-        ) : (
+        ) : viewMode === 'list' ? (
           <div className="overflow-hidden rounded-xl border border-border/70">
             <Table>
               <TableHeader>
@@ -1146,10 +1251,12 @@ export default function TurmasPage() {
               </TableBody>
             </Table>
           </div>
+        ) : (
+          <ClassesCalendarView turmas={visibleTurmas} />
         )}
 
         {/* Pagination footer */}
-        {!loading && visibleTurmas.length > 0 && (
+        {!loading && visibleTurmas.length > 0 && viewMode !== 'calendar' && (
           <div className="mt-6">
             <PaginationFooter
               currentPage={currentPage}
@@ -1160,7 +1267,7 @@ export default function TurmasPage() {
                 setPageSize(value);
                 setCurrentPage(1);
               }}
-              pageSizeOptions={PAGE_SIZES}
+              pageSizeOptions={pageSizeOptions}
             />
           </div>
         )}

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

@@ -414,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',
@@ -424,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',
     },
   ];
 
@@ -569,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">
@@ -609,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">
@@ -628,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">
@@ -675,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}`}
@@ -794,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">
@@ -812,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>
@@ -886,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"
@@ -926,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">
@@ -946,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>
@@ -1051,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">
@@ -1069,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>
@@ -1078,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"
@@ -1109,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">
@@ -1127,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>
@@ -1136,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"