@hed-hog/lms 0.0.361 → 0.0.364

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

@@ -0,0 +1,1170 @@
+'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,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+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 {
+  Download,
+  BookOpen,
+  Clapperboard,
+  Loader2,
+  FileText,
+  Film,
+  HardDrive,
+  Image,
+  Layers,
+  Mic,
+  Paperclip,
+  Sparkles,
+  Target,
+  Trash2,
+  type LucideIcon,
+  Zap,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Cell, Pie, PieChart } from 'recharts';
+import { toast } from 'sonner';
+import { useCourseContentOverviewQuery } from '../_data/use-course-content-overview';
+import { useCourseXpOverviewQuery } from '../_data/use-course-xp-overview';
+
+const TYPE_COLORS: Record<string, string> = {
+  video: '#0ea5e9',
+  questao: '#f97316',
+  post: '#22c55e',
+  exercicio: '#a855f7',
+};
+
+const TYPE_GRADIENTS: Record<
+  string,
+  { from: string; icon: LucideIcon; label: string }
+> = {
+  video: {
+    from: 'from-sky-500/12 via-blue-500/6',
+    icon: Clapperboard,
+    label: 'Vídeo',
+  },
+  questao: {
+    from: 'from-orange-500/12 via-amber-500/6',
+    icon: FileText,
+    label: 'Questão',
+  },
+  post: {
+    from: 'from-green-500/12 via-emerald-500/6',
+    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'];
+const SKILL_COLORS = ['#ea580c', '#f97316', '#fb923c', '#fdba74', '#fed7aa'];
+
+const STORAGE_CATEGORY_META: Record<
+  string,
+  {
+    label: string;
+    accentClassName: string;
+    icon: LucideIcon;
+    iconClassName: string;
+    iconBackgroundClassName: string;
+  }
+> = {
+  video_original: {
+    label: 'Vídeos originais',
+    accentClassName: 'from-sky-500/20 via-blue-500/10 to-transparent',
+    icon: Film,
+    iconClassName: 'text-sky-600 dark:text-sky-400',
+    iconBackgroundClassName: 'bg-sky-500/10',
+  },
+  video_profile: {
+    label: 'Vídeos convertidos',
+    accentClassName: 'from-indigo-500/20 via-blue-500/10 to-transparent',
+    icon: Clapperboard,
+    iconClassName: 'text-indigo-600 dark:text-indigo-400',
+    iconBackgroundClassName: 'bg-indigo-500/10',
+  },
+  lesson_audio: {
+    label: 'Áudios',
+    accentClassName: 'from-teal-500/20 via-cyan-500/10 to-transparent',
+    icon: Mic,
+    iconClassName: 'text-teal-600 dark:text-teal-400',
+    iconBackgroundClassName: 'bg-teal-500/10',
+  },
+  extracted_image: {
+    label: 'Imagens extraídas',
+    accentClassName: 'from-amber-500/20 via-orange-500/10 to-transparent',
+    icon: Image,
+    iconClassName: 'text-amber-600 dark:text-amber-400',
+    iconBackgroundClassName: 'bg-amber-500/10',
+  },
+  student_download: {
+    label: 'Downloads do aluno',
+    accentClassName: 'from-violet-500/20 via-fuchsia-500/10 to-transparent',
+    icon: Download,
+    iconClassName: 'text-violet-600 dark:text-violet-400',
+    iconBackgroundClassName: 'bg-violet-500/10',
+  },
+  supplementary_material: {
+    label: 'Materiais de apoio',
+    accentClassName: 'from-fuchsia-500/20 via-pink-500/10 to-transparent',
+    icon: Paperclip,
+    iconClassName: 'text-fuchsia-600 dark:text-fuchsia-400',
+    iconBackgroundClassName: 'bg-fuchsia-500/10',
+  },
+  course_image: {
+    label: 'Imagens do curso',
+    accentClassName: 'from-rose-500/20 via-pink-500/10 to-transparent',
+    icon: Image,
+    iconClassName: 'text-rose-600 dark:text-rose-400',
+    iconBackgroundClassName: 'bg-rose-500/10',
+  },
+  course_file: {
+    label: 'Arquivos do curso',
+    accentClassName: 'from-slate-500/20 via-zinc-500/10 to-transparent',
+    icon: FileText,
+    iconClassName: 'text-slate-600 dark:text-slate-400',
+    iconBackgroundClassName: 'bg-slate-500/10',
+  },
+  other_lesson_file: {
+    label: 'Outros arquivos',
+    accentClassName: 'from-muted/80 via-muted/40 to-transparent',
+    icon: HardDrive,
+    iconClassName: 'text-muted-foreground',
+    iconBackgroundClassName: 'bg-muted',
+  },
+};
+
+interface Props {
+  courseId: string;
+  locale: string;
+}
+
+type CleanupDialogState = {
+  categoryKey: string;
+  categoryLabel: string;
+  fileCount: number;
+  totalBytes: number;
+};
+
+type CleanupTrackedJobState = {
+  categoryKey: string;
+  queueJobId: number;
+  status: string;
+};
+
+export function CourseOverviewTab({ courseId, locale }: Props) {
+  const { request } = useApp();
+  const queryClient = useQueryClient();
+  const t = useTranslations('lms.CursoEditPage.structureEditor.courseOverview');
+  const { data, isLoading, isError } = useCourseContentOverviewQuery(courseId);
+  const { data: xpData } = useCourseXpOverviewQuery(courseId);
+  const [cleanupCategoryKey, setCleanupCategoryKey] = useState<string | null>(
+    null
+  );
+  const [cleanupDialogState, setCleanupDialogState] =
+    useState<CleanupDialogState | null>(null);
+  const [cleanupTrackedJob, setCleanupTrackedJob] =
+    useState<CleanupTrackedJobState | null>(null);
+
+  const { data: cleanupTrackedJobDetail, isError: isCleanupTrackedJobError } =
+    useQuery<{
+      id: number;
+      status: string;
+      last_error?: string | null;
+    } | null>({
+      queryKey: [
+        'lms-course-storage-cleanup-job',
+        cleanupTrackedJob?.queueJobId,
+      ],
+      enabled: Boolean(cleanupTrackedJob?.queueJobId),
+      queryFn: async () => {
+        if (!cleanupTrackedJob?.queueJobId) return null;
+        const response = await request<{
+          id: number;
+          status: string;
+          last_error?: string | null;
+        }>({
+          url: `/queue/jobs/${cleanupTrackedJob.queueJobId}`,
+          method: 'GET',
+        });
+        return response.data;
+      },
+      refetchInterval: ({ state }) => {
+        const status = (state.data as { status?: string } | null)?.status;
+        if (!status) return 3000;
+        return ['pending', 'scheduled', 'processing', 'retrying'].includes(
+          status
+        )
+          ? 3000
+          : false;
+      },
+    });
+
+  const formatBytes = (bytes: number) => {
+    if (!Number.isFinite(bytes) || bytes <= 0) {
+      return '0 B';
+    }
+
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let value = bytes;
+    let unitIndex = 0;
+
+    while (value >= 1024 && unitIndex < units.length - 1) {
+      value /= 1024;
+      unitIndex += 1;
+    }
+
+    const digits = unitIndex === 0 ? 0 : value >= 10 ? 1 : 2;
+    return `${new Intl.NumberFormat(locale || 'pt-BR', {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: digits,
+    }).format(value)} ${units[unitIndex]}`;
+  };
+
+  const kpiItems = useMemo(() => {
+    if (!data) return [];
+    return [
+      {
+        key: 'modules',
+        title: t('kpis.modules'),
+        value: data.structure.moduleCount,
+        description: t('kpis.modulesDescription'),
+        icon: Layers,
+        accentClassName: 'from-blue-500 via-indigo-500 to-violet-500',
+        iconContainerClassName:
+          'bg-blue-500/10 text-blue-600 dark:text-blue-400',
+      },
+      {
+        key: 'lessons',
+        title: t('kpis.lessons'),
+        value: data.structure.lessonCount,
+        description: t('kpis.lessonsDescription'),
+        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: 'images',
+        title: t('kpis.extractedImages'),
+        value: data.media.extractedImageCount,
+        description: t('kpis.extractedImagesDescription'),
+        icon: Image,
+        accentClassName: 'from-amber-500 via-orange-500 to-yellow-500',
+        iconContainerClassName:
+          'bg-amber-500/10 text-amber-600 dark:text-amber-400',
+      },
+      {
+        key: 'resources',
+        title: t('kpis.resourceFiles'),
+        value: data.resources.fileCount,
+        description: t('kpis.resourceFilesDescription'),
+        icon: Paperclip,
+        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 lessonTypeData = useMemo(() => {
+    if (!data) return [];
+    const types = ['video', 'questao', 'post', 'exercicio'] as const;
+    return types
+      .map((type) => ({
+        type,
+        count: data.structure.lessonsByType[type],
+        color: TYPE_COLORS[type],
+        label: TYPE_GRADIENTS[type]!.label,
+      }))
+      .filter((item) => item.count > 0);
+  }, [data]);
+
+  const lessonTypeChartConfig = useMemo(
+    () =>
+      Object.fromEntries(
+        lessonTypeData.map((item) => [
+          item.type,
+          { label: item.label, color: item.color },
+        ])
+      ),
+    [lessonTypeData]
+  );
+
+  const storageCategories = useMemo(() => {
+    if (!data) return [];
+
+    return data.storage.categories.map((category) => {
+      const meta = (STORAGE_CATEGORY_META[category.key] ??
+        STORAGE_CATEGORY_META.other_lesson_file)!;
+      const sharePercent =
+        data.storage.totalBytes > 0
+          ? (category.totalBytes / data.storage.totalBytes) * 100
+          : 0;
+
+      return {
+        ...category,
+        ...meta,
+        sharePercent,
+      };
+    });
+  }, [data]);
+
+  useEffect(() => {
+    if (!cleanupTrackedJob || !cleanupTrackedJobDetail) return;
+
+    const status = cleanupTrackedJobDetail.status;
+
+    setCleanupTrackedJob((prev) => {
+      if (!prev) return prev;
+      if (prev.status === status) return prev;
+      return { ...prev, status };
+    });
+
+    if (status === 'completed') {
+      toast.success('Limpeza concluída com sucesso.');
+      void queryClient.invalidateQueries({
+        queryKey: ['course-content-overview', courseId],
+      });
+      setCleanupTrackedJob(null);
+      return;
+    }
+
+    if (['failed', 'dead_letter', 'canceled'].includes(status)) {
+      toast.error(
+        cleanupTrackedJobDetail.last_error ||
+          'A limpeza falhou. Você pode tentar excluir novamente.'
+      );
+      setCleanupTrackedJob(null);
+    }
+  }, [cleanupTrackedJob, cleanupTrackedJobDetail, courseId, queryClient]);
+
+  useEffect(() => {
+    if (!cleanupTrackedJob || !isCleanupTrackedJobError) return;
+
+    toast.error('Não foi possível acompanhar o status da limpeza.');
+    setCleanupTrackedJob(null);
+  }, [cleanupTrackedJob, isCleanupTrackedJobError]);
+
+  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((_, i) => (
+            <Skeleton key={i} className="h-28 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>
+      </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>
+    );
+  }
+
+  const totalLessons = data.structure.lessonCount;
+  const videoCount = data.videos.lessonCount;
+  const overviewHighlights = [
+    {
+      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',
+    },
+    {
+      key: 'coverage',
+      label: 'Cobertura de vídeo',
+      value:
+        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',
+    },
+    {
+      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',
+    },
+    {
+      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',
+    },
+  ];
+
+  const openCleanupCategoryDialog = (
+    categoryKey: string,
+    categoryLabel: string,
+    fileCount: number,
+    totalBytes: number
+  ) => {
+    if (fileCount <= 0 || cleanupCategoryKey) {
+      return;
+    }
+
+    setCleanupDialogState({
+      categoryKey,
+      categoryLabel,
+      fileCount,
+      totalBytes,
+    });
+  };
+
+  const handleCleanupCategory = async () => {
+    if (!cleanupDialogState) {
+      return;
+    }
+
+    const { categoryKey, categoryLabel } = cleanupDialogState;
+
+    setCleanupDialogState(null);
+
+    setCleanupCategoryKey(categoryKey);
+
+    try {
+      const response = await request<{
+        status?: string;
+        queueJobId?: number;
+        queueJobStatus?: string;
+        cleanupImpact?: { formattedSize?: string };
+      }>({
+        url: `/lms/courses/${courseId}/storage/cleanup`,
+        method: 'POST',
+        data: { category: categoryKey },
+      });
+
+      if (response.data?.status === 'empty') {
+        toast.info(
+          `A categoria "${categoryLabel}" não possui arquivos para limpeza.`
+        );
+      } else {
+        if (response.data?.queueJobId) {
+          setCleanupTrackedJob({
+            categoryKey,
+            queueJobId: response.data.queueJobId,
+            status: response.data.queueJobStatus || 'pending',
+          });
+        }
+        toast.success(
+          `Limpeza da categoria "${categoryLabel}" enfileirada com sucesso.`
+        );
+      }
+
+      await queryClient.invalidateQueries({
+        queryKey: ['course-content-overview', courseId],
+      });
+    } catch (error: unknown) {
+      const responseMessage =
+        typeof error === 'object' &&
+        error !== null &&
+        'response' in error &&
+        typeof (error as { response?: { data?: { message?: unknown } } })
+          .response?.data?.message === 'string'
+          ? (error as { response?: { data?: { message?: string } } }).response
+              ?.data?.message
+          : undefined;
+      const message =
+        responseMessage ||
+        (error instanceof Error ? error.message : undefined) ||
+        'Não foi possível enfileirar a limpeza da categoria.';
+      toast.error(String(message));
+    } finally {
+      setCleanupCategoryKey(null);
+    }
+  };
+
+  return (
+    <>
+      <AlertDialog
+        open={Boolean(cleanupDialogState)}
+        onOpenChange={(open) => {
+          if (!open && !cleanupCategoryKey) {
+            setCleanupDialogState(null);
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Confirmar exclusão da categoria</AlertDialogTitle>
+            <AlertDialogDescription>
+              {cleanupDialogState
+                ? `Confirma excluir todos os ${cleanupDialogState.fileCount} arquivo(s) da categoria "${cleanupDialogState.categoryLabel}" deste curso?`
+                : 'Confirme a exclusão dos arquivos desta categoria.'}
+              {cleanupDialogState
+                ? ` Espaço estimado a liberar: ${formatBytes(cleanupDialogState.totalBytes)}.`
+                : ''}{' '}
+              A remoção será processada em background via fila.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={cleanupCategoryKey !== null}>
+              Cancelar
+            </AlertDialogCancel>
+            <AlertDialogAction
+              disabled={cleanupCategoryKey !== null}
+              onClick={(event) => {
+                event.preventDefault();
+                void handleCleanupCategory();
+              }}
+              className="bg-red-600 text-white hover:bg-red-700"
+            >
+              {cleanupCategoryKey !== null ? 'Enfileirando...' : 'Excluir'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <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 overview
+              </div>
+              <div className="mt-1 text-sm font-semibold text-foreground">
+                Panorama estrutural e de mídia do curso
+              </div>
+              <div className="mt-0.5 text-xs text-muted-foreground">
+                Visão consolidada de módulos, aulas, tipos de conteúdo, vídeo e
+                apoio.
+              </div>
+            </div>
+            <div className="flex flex-wrap gap-1.5">
+              {overviewHighlights.map((item) => (
+                <div
+                  key={item.key}
+                  className={`inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-xs shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md ${item.toneClassName}`}
+                >
+                  <span className="text-[10px] font-semibold uppercase tracking-[0.14em] opacity-80">
+                    {item.label}
+                  </span>
+                  <span className="font-semibold">{item.value}</span>
+                </div>
+              ))}
+            </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>
+
+        <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!">
+            <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">
+                    Storage footprint
+                  </div>
+                  <CardTitle className="mt-1 text-sm font-semibold">
+                    Uso de armazenamento do curso
+                  </CardTitle>
+                  <CardDescription className="mt-0.5">
+                    Soma dos arquivos do conteúdo do curso, com detalhamento por
+                    categoria.
+                  </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">
+                {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">
+                  Total armazenado
+                </div>
+                <div className="mt-2 text-2xl font-semibold tracking-tight text-foreground">
+                  {formatBytes(data.storage.totalBytes)}
+                </div>
+                <div className="mt-1 text-xs text-muted-foreground">
+                  {data.storage.totalFileCount} arquivos relacionados ao curso
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-2">
+                <div className="rounded-xl border border-border/60 bg-muted/20 px-3 py-2.5 transition-all duration-200 hover:-translate-y-0.5 hover:bg-background/95 hover:shadow-sm">
+                  <div className="text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+                    Categorias
+                  </div>
+                  <div className="mt-1 text-lg font-semibold text-foreground">
+                    {storageCategories.length}
+                  </div>
+                </div>
+                <div className="rounded-xl border border-border/60 bg-muted/20 px-3 py-2.5 transition-all duration-200 hover:-translate-y-0.5 hover:bg-background/95 hover:shadow-sm">
+                  <div className="text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+                    Maior bloco
+                  </div>
+                  <div className="mt-1 truncate text-sm font-semibold text-foreground">
+                    {storageCategories[0]?.label ?? 'Nenhum'}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-2">
+              {storageCategories.length > 0 ? (
+                storageCategories.map((category) => {
+                  const Icon = category.icon;
+
+                  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"
+                    >
+                      <div
+                        className={`h-1.5 w-full bg-linear-to-r ${category.accentClassName}`}
+                      />
+                      <div className="flex flex-col gap-3 px-3 py-3">
+                        <div className="flex items-start gap-3">
+                          <div
+                            className={`flex size-9 shrink-0 items-center justify-center rounded-xl ${category.iconBackgroundClassName}`}
+                          >
+                            <Icon
+                              className={`size-4 ${category.iconClassName}`}
+                            />
+                          </div>
+                          <div className="min-w-0 flex-1">
+                            <div className="text-sm font-semibold text-foreground">
+                              {category.label}
+                            </div>
+                            <div className="mt-0.5 text-xs text-muted-foreground">
+                              {category.fileCount}{' '}
+                              {category.fileCount === 1
+                                ? 'arquivo'
+                                : 'arquivos'}
+                            </div>
+                          </div>
+                          <div className="rounded-full border border-border/60 bg-muted/30 px-2 py-0.5 text-[10px] font-semibold text-muted-foreground">
+                            {category.sharePercent.toFixed(
+                              category.sharePercent >= 10 ? 0 : 1
+                            )}
+                            %
+                          </div>
+                        </div>
+
+                        <div className="flex items-center justify-between gap-2">
+                          <span className="text-[11px] text-muted-foreground">
+                            Limpar categoria para liberar espaço
+                          </span>
+                          {cleanupTrackedJob?.categoryKey === category.key &&
+                          [
+                            'pending',
+                            'scheduled',
+                            'processing',
+                            'retrying',
+                          ].includes(cleanupTrackedJob.status) ? (
+                            <Badge
+                              variant="secondary"
+                              className="h-7 gap-1.5 rounded-lg border border-amber-500/20 bg-amber-500/10 px-2.5 text-[11px] font-semibold text-amber-700 dark:text-amber-300"
+                            >
+                              <Loader2 className="size-3 animate-spin" />
+                              Carregando...
+                            </Badge>
+                          ) : (
+                            <Button
+                              type="button"
+                              size="sm"
+                              variant="outline"
+                              className="h-7 gap-1.5 rounded-lg border-red-500/30 bg-red-500/5 px-2.5 text-[11px] font-semibold text-red-700 transition-all duration-200 hover:-translate-y-0.5 hover:bg-red-500/10 hover:text-red-800 dark:text-red-300 dark:hover:text-red-200"
+                              disabled={
+                                cleanupCategoryKey !== null ||
+                                category.fileCount <= 0
+                              }
+                              onClick={() =>
+                                openCleanupCategoryDialog(
+                                  category.key,
+                                  category.label,
+                                  category.fileCount,
+                                  category.totalBytes
+                                )
+                              }
+                            >
+                              {cleanupCategoryKey === category.key ? (
+                                <>
+                                  <Loader2 className="size-3 animate-spin" />
+                                  Enfileirando...
+                                </>
+                              ) : (
+                                <>
+                                  <Trash2 className="size-3" />
+                                  Excluir
+                                </>
+                              )}
+                            </Button>
+                          )}
+                        </div>
+
+                        <div>
+                          <div className="flex items-baseline justify-between gap-3">
+                            <span className="text-lg font-semibold tracking-tight text-foreground">
+                              {formatBytes(category.totalBytes)}
+                            </span>
+                            <span className="text-xs text-muted-foreground">
+                              de {formatBytes(data.storage.totalBytes)}
+                            </span>
+                          </div>
+                          <div className="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-muted/80">
+                            <div
+                              className="h-full rounded-full transition-all duration-700 ease-out"
+                              style={{
+                                width: `${Math.max(category.sharePercent, category.totalBytes > 0 ? 2 : 0)}%`,
+                                background: `linear-gradient(90deg, rgba(34,211,238,0.9), rgba(14,165,233,0.75))`,
+                              }}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })
+              ) : (
+                <div className="flex min-h-32 items-center justify-center rounded-2xl border border-dashed border-border/70 bg-muted/15 px-4 py-6 text-center text-sm text-muted-foreground">
+                  Nenhum arquivo relacionado ao curso foi encontrado.
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        <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!">
+              <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">
+                      Lesson mix
+                    </div>
+                    <CardTitle className="mt-1 text-sm font-semibold">
+                      {t('lessonTypes.title')}
+                    </CardTitle>
+                    <CardDescription className="mt-0.5">
+                      {t('lessonTypes.description')}
+                    </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">
+                  {totalLessons} aulas
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="grid gap-2.5 px-2.5 py-2.5 sm:px-3 md:grid-cols-[minmax(0,200px)_minmax(0,1fr)] md:items-start">
+              {lessonTypeData.length > 0 ? (
+                <ChartContainer
+                  config={lessonTypeChartConfig}
+                  className="h-48 w-full"
+                >
+                  <PieChart>
+                    <Pie
+                      data={lessonTypeData}
+                      dataKey="count"
+                      nameKey="label"
+                      innerRadius={52}
+                      outerRadius={80}
+                      paddingAngle={3}
+                      animationDuration={900}
+                      strokeWidth={3}
+                      stroke="hsl(var(--background))"
+                    >
+                      {lessonTypeData.map((entry) => (
+                        <Cell key={entry.type} fill={entry.color} />
+                      ))}
+                    </Pie>
+                    <ChartTooltip
+                      content={
+                        <ChartTooltipContent
+                          hideIndicator
+                          formatter={(value, _name, item) => {
+                            const payload = item?.payload as
+                              | { label?: string; count?: number }
+                              | undefined;
+                            const pct =
+                              totalLessons > 0
+                                ? (
+                                    ((payload?.count ?? 0) / totalLessons) *
+                                    100
+                                  ).toFixed(1)
+                                : '0';
+                            return (
+                              <div className="flex min-w-36 flex-col gap-1 text-xs">
+                                <span className="font-medium text-foreground">
+                                  {payload?.label}
+                                </span>
+                                <span className="text-muted-foreground">
+                                  {value} aulas · {pct}%
+                                </span>
+                              </div>
+                            );
+                          }}
+                        />
+                      }
+                    />
+                  </PieChart>
+                </ChartContainer>
+              ) : (
+                <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">
+                  Nenhuma aula
+                </div>
+              )}
+
+              <div className="grid gap-2">
+                {lessonTypeData.map((item) => {
+                  const Icon = TYPE_GRADIENTS[item.type]!.icon;
+                  const pct =
+                    totalLessons > 0
+                      ? ((item.count / totalLessons) * 100).toFixed(1)
+                      : '0';
+                  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"
+                    >
+                      <div
+                        className="flex size-8 shrink-0 items-center justify-center rounded-lg"
+                        style={{ backgroundColor: `${item.color}20` }}
+                      >
+                        <Icon
+                          className="size-4"
+                          style={{ color: item.color }}
+                        />
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center justify-between">
+                          <span className="text-sm font-medium text-foreground">
+                            {item.label}
+                          </span>
+                          <span className="font-mono text-xs text-muted-foreground transition-colors duration-200 group-hover:text-foreground">
+                            {pct}%
+                          </span>
+                        </div>
+                        <div className="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-muted">
+                          <div
+                            className="h-full rounded-full transition-all duration-700"
+                            style={{
+                              width: `${pct}%`,
+                              backgroundColor: item.color,
+                            }}
+                          />
+                        </div>
+                        <div className="mt-1 text-xs text-muted-foreground">
+                          {item.count} {item.count === 1 ? 'aula' : 'aulas'}
+                        </div>
+                      </div>
+                    </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!">
+              <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">
+                      Video coverage
+                    </div>
+                    <CardTitle className="mt-1 text-sm font-semibold">
+                      {t('videos.title')}
+                    </CardTitle>
+                    <CardDescription className="mt-0.5">
+                      {t('videos.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">
+                  {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('videos.total'),
+                    value: videoCount,
+                    total: videoCount,
+                    color: '#0ea5e9',
+                    bgColor: 'bg-sky-500/10',
+                    textColor: 'text-sky-600 dark:text-sky-400',
+                    icon: Clapperboard,
+                  },
+                  {
+                    key: 'transcription',
+                    label: t('videos.withTranscription'),
+                    value: data.videos.withTranscription,
+                    total: videoCount,
+                    color: '#14b8a6',
+                    bgColor: 'bg-teal-500/10',
+                    textColor: 'text-teal-600 dark:text-teal-400',
+                    icon: Mic,
+                  },
+                  {
+                    key: 'xp',
+                    label: t('videos.withXp'),
+                    value: data.videos.withXp,
+                    total: videoCount,
+                    color: '#8b5cf6',
+                    bgColor: 'bg-violet-500/10',
+                    textColor: 'text-violet-600 dark:text-violet-400',
+                    icon: Zap,
+                  },
+                ] 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>
+                );
+              })}
+
+              {videoCount === 0 && (
+                <p className="text-center text-sm text-muted-foreground">
+                  Nenhuma aula de vídeo neste curso
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Areas and Skills (conditional on XP data) */}
+        {xpData && (xpData.areas.length > 0 || xpData.skills.length > 0) && (
+          <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!">
+                  <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">
+                          Macro areas
+                        </div>
+                        <CardTitle className="mt-1 text-sm font-semibold">
+                          {t('areas.title')}
+                        </CardTitle>
+                        <CardDescription className="mt-0.5">
+                          {t('areas.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">
+                      {xpData.areas.length} áreas
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent className="flex flex-col gap-2 px-2.5 py-2.5 sm:px-3">
+                  {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"
+                    >
+                      <div
+                        className="flex size-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white"
+                        style={{
+                          backgroundColor:
+                            AREA_COLORS[index % AREA_COLORS.length],
+                        }}
+                      >
+                        {index + 1}
+                      </div>
+                      <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
+                        {area.name}
+                      </span>
+                      <span
+                        className="rounded-full px-2 py-0.5 text-[10px] font-semibold transition-all duration-200 hover:shadow-sm"
+                        style={{
+                          backgroundColor: `${AREA_COLORS[index % AREA_COLORS.length]}20`,
+                          color: AREA_COLORS[index % AREA_COLORS.length],
+                        }}
+                      >
+                        {area.sharePercent.toFixed(1)}%
+                      </span>
+                    </div>
+                  ))}
+                </CardContent>
+              </Card>
+            )}
+
+            {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!">
+                  <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">
+                          Skills
+                        </div>
+                        <CardTitle className="mt-1 text-sm font-semibold">
+                          {t('skills.title')}
+                        </CardTitle>
+                        <CardDescription className="mt-0.5">
+                          {t('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">
+                      {xpData.skills.length} skills
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent className="flex flex-col gap-2 px-2.5 py-2.5 sm:px-3">
+                  {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"
+                    >
+                      <div
+                        className="flex size-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white"
+                        style={{
+                          backgroundColor:
+                            SKILL_COLORS[index % SKILL_COLORS.length],
+                        }}
+                      >
+                        {index + 1}
+                      </div>
+                      <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
+                        {skill.name}
+                      </span>
+                      <span
+                        className="rounded-full px-2 py-0.5 text-[10px] font-semibold transition-all duration-200 hover:shadow-sm"
+                        style={{
+                          backgroundColor: `${SKILL_COLORS[index % SKILL_COLORS.length]}20`,
+                          color: SKILL_COLORS[index % SKILL_COLORS.length],
+                        }}
+                      >
+                        {skill.sharePercent.toFixed(1)}%
+                      </span>
+                    </div>
+                  ))}
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}