@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -1,6 +1,11 @@
 'use client';
 
-import { Page, PageHeader } from '@/components/entity-list';
+import {
+  Page,
+  PageHeader,
+  SearchBar,
+  StatsCards,
+} from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -10,13 +15,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   Table,
@@ -26,11 +24,20 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { motion } from 'framer-motion';
-import { ArrowUpRight, Download, TrendingDown, TrendingUp } from 'lucide-react';
+import type { jsPDF } from 'jspdf';
+import {
+  Activity,
+  BookOpen,
+  Download,
+  GraduationCap,
+  TrendingDown,
+  Trophy,
+  Users,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 import {
   Area,
   AreaChart,
@@ -38,15 +45,8 @@ import {
   BarChart,
   CartesianGrid,
   Cell,
-  Line,
-  LineChart,
   Pie,
   PieChart,
-  PolarAngleAxis,
-  PolarGrid,
-  PolarRadiusAxis,
-  Radar,
-  RadarChart,
   ResponsiveContainer,
   Tooltip,
   XAxis,
@@ -54,856 +54,850 @@ import {
 } from 'recharts';
 import { toast } from 'sonner';
 
-// Data for charts
-const monthlyEnrollments = [
-  { mes: 'jan', matriculas: 120, cancelamentos: 15, receita: 48000 },
-  { mes: 'feb', matriculas: 150, cancelamentos: 12, receita: 60000 },
-  { mes: 'mar', matriculas: 180, cancelamentos: 18, receita: 72000 },
-  { mes: 'apr', matriculas: 200, cancelamentos: 10, receita: 80000 },
-  { mes: 'may', matriculas: 170, cancelamentos: 22, receita: 68000 },
-  { mes: 'jun', matriculas: 220, cancelamentos: 8, receita: 88000 },
-  { mes: 'jul', matriculas: 190, cancelamentos: 14, receita: 76000 },
-  { mes: 'aug', matriculas: 240, cancelamentos: 11, receita: 96000 },
-  { mes: 'sep', matriculas: 210, cancelamentos: 16, receita: 84000 },
-  { mes: 'oct', matriculas: 260, cancelamentos: 9, receita: 104000 },
-  { mes: 'nov', matriculas: 230, cancelamentos: 13, receita: 92000 },
-  { mes: 'dec', matriculas: 280, cancelamentos: 7, receita: 112000 },
-];
-
-const categoryPerformance = [
-  { area: 'technology', media: 7.8, alunos: 1200, conclusao: 82 },
-  { area: 'design', media: 8.2, alunos: 650, conclusao: 88 },
-  { area: 'management', media: 7.5, alunos: 480, conclusao: 76 },
-  { area: 'marketing', media: 7.9, alunos: 320, conclusao: 79 },
-];
-
-const courseRanking = [
-  { nome: 'reactAdvanced', alunos: 245, conclusao: 85, nota: 8.1 },
-  { nome: 'excelBusiness', alunos: 534, conclusao: 92, nota: 7.9 },
-  { nome: 'agileProjectManagement', alunos: 312, conclusao: 78, nota: 7.5 },
-  { nome: 'pythonDataScience', alunos: 178, conclusao: 72, nota: 7.8 },
-  { nome: 'uxDesignFundamentals', alunos: 189, conclusao: 88, nota: 8.3 },
-  { nome: 'typescriptPractice', alunos: 201, conclusao: 80, nota: 7.6 },
-  { nome: 'nodeComplete', alunos: 156, conclusao: 75, nota: 7.4 },
-  { nome: 'designSystem', alunos: 87, conclusao: 90, nota: 8.5 },
-];
-
-const radarData = [
-  { subject: 'engagement', A: 85, fullMark: 100 },
-  { subject: 'completion', A: 78, fullMark: 100 },
-  { subject: 'satisfaction', A: 92, fullMark: 100 },
-  { subject: 'recommendation', A: 88, fullMark: 100 },
-  { subject: 'retention', A: 72, fullMark: 100 },
-  { subject: 'performance', A: 81, fullMark: 100 },
-];
-
-const statusDistribution = [
-  { nome: 'active', valor: 1865, cor: '#22c55e' }, // green-500
-  { nome: 'completed', valor: 742, cor: '#3b82f6' }, // blue-500
-  { nome: 'inactive', valor: 240, cor: '#f97316' }, // orange-500
-];
-
-const weeklyActivity = [
-  { dia: 'mon', acessos: 420, aulas: 180, exercicios: 95 },
-  { dia: 'tue', acessos: 380, aulas: 160, exercicios: 88 },
-  { dia: 'wed', acessos: 450, aulas: 200, exercicios: 110 },
-  { dia: 'thu', acessos: 410, aulas: 175, exercicios: 92 },
-  { dia: 'fri', acessos: 350, aulas: 140, exercicios: 75 },
-  { dia: 'sat', acessos: 280, aulas: 110, exercicios: 60 },
-  { dia: 'sun', acessos: 220, aulas: 85, exercicios: 45 },
-];
-
-export default function RelatoriosPage() {
-  const t = useTranslations('lms.ReportsPage');
-  const [loading, setLoading] = useState(true);
+type ApiReportsResponse = {
+  kpis: {
+    totalStudents: { value: number; change: number; positive: boolean };
+    enrollments: { value: number; change: number; positive: boolean };
+    completionRate: { value: number; change: number; positive: boolean };
+    churnRate: { value: number; change: number; positive: boolean };
+  };
+  monthlyData: Array<{
+    mes: string;
+    matriculas: number;
+    cancelamentos: number;
+    receita: number;
+  }>;
+  courseRanking: Array<{
+    id: number;
+    nome: string;
+    alunos: number;
+    conclusao: number;
+    nota: number;
+  }>;
+  categoryPerformance: Array<{
+    area: string;
+    alunos: number;
+    conclusao: number;
+    media: number;
+  }>;
+  studentStatus: Array<{ nome: string; valor: number; cor: string }>;
+  weeklyActivity: Array<{
+    dia: string;
+    acessos: number;
+    aulas: number;
+    exercicios: number;
+  }>;
+  performanceEvolution: Array<{ mes: string; nota: number }>;
+};
+
+type HighlightCard = {
+  title: string;
+  description: string;
+  value: string;
+  helper: string;
+  icon: typeof Trophy;
+};
+
+type JsPdfWithAutoTable = jsPDF & {
+  lastAutoTable?: {
+    finalY: number;
+  };
+};
+
+const tooltipStyle = {
+  backgroundColor: 'hsl(var(--card))',
+  border: '1px solid hsl(var(--border))',
+  borderRadius: '8px',
+  fontSize: '12px',
+};
+
+export default function ReportsDashboardPage() {
+  const t = useTranslations('lms.ReportsDashboardPage');
+  const { request } = useApp();
+  const [periodoInput, setPeriodoInput] = useState('12m');
   const [periodo, setPeriodo] = useState('12m');
-  const [activeTab, setActiveTab] = useState('geral');
-
-  useEffect(() => {
-    const timer = setTimeout(() => setLoading(false), 1000);
-    return () => clearTimeout(timer);
-  }, []);
-
-  const tooltipStyle = {
-    backgroundColor: 'hsl(var(--card))',
-    border: '1px solid hsl(var(--border))',
-    borderRadius: '8px',
-    fontSize: '12px',
+  const [searchInput, setSearchInput] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isExporting, setIsExporting] = useState(false);
+
+  const { data: reportsData, isLoading: loading } =
+    useQuery<ApiReportsResponse>({
+      queryKey: ['lms-reports-dashboard', periodo],
+      queryFn: async () => {
+        const response = await request<ApiReportsResponse>({
+          url: '/lms/reports',
+          method: 'GET',
+          params: { period: periodo },
+        });
+        return response.data;
+      },
+    });
+
+  const normalizedSearch = searchQuery.trim().toLocaleLowerCase('pt-BR');
+  const monthlyData = reportsData?.monthlyData ?? [];
+  const rawCourseRanking = reportsData?.courseRanking;
+  const courseRanking = useMemo(
+    () => [...(rawCourseRanking ?? [])].sort((a, b) => b.alunos - a.alunos),
+    [rawCourseRanking]
+  );
+  const rawCategoryPerformance = reportsData?.categoryPerformance;
+  const categoryPerformance = useMemo(
+    () => rawCategoryPerformance ?? [],
+    [rawCategoryPerformance]
+  );
+  const rawStudentStatus = reportsData?.studentStatus;
+  const studentStatus = useMemo(
+    () => rawStudentStatus ?? [],
+    [rawStudentStatus]
+  );
+  const rawWeeklyActivity = reportsData?.weeklyActivity;
+  const weeklyActivity = useMemo(
+    () => rawWeeklyActivity ?? [],
+    [rawWeeklyActivity]
+  );
+  const rawPerformanceEvolution = reportsData?.performanceEvolution;
+  const performanceEvolution = useMemo(
+    () => rawPerformanceEvolution ?? [],
+    [rawPerformanceEvolution]
+  );
+
+  const filteredCourseRanking = useMemo(() => {
+    return courseRanking.filter((item) => {
+      return (
+        normalizedSearch.length === 0 ||
+        item.nome.toLocaleLowerCase('pt-BR').includes(normalizedSearch)
+      );
+    });
+  }, [courseRanking, normalizedSearch]);
+
+  const filteredCategoryPerformance = useMemo(() => {
+    return categoryPerformance.filter((item) => {
+      return (
+        normalizedSearch.length === 0 ||
+        item.area.toLocaleLowerCase('pt-BR').includes(normalizedSearch)
+      );
+    });
+  }, [categoryPerformance, normalizedSearch]);
+
+  const filteredStudentStatus = useMemo(() => {
+    return studentStatus.filter((item) => {
+      return (
+        normalizedSearch.length === 0 ||
+        t(`statusDistribution.${item.nome}`)
+          .toLocaleLowerCase('pt-BR')
+          .includes(normalizedSearch)
+      );
+    });
+  }, [normalizedSearch, studentStatus, t]);
+
+  const topCourse = filteredCourseRanking[0];
+  const topPath = useMemo(
+    () =>
+      [...filteredCategoryPerformance].sort(
+        (a, b) => b.conclusao - a.conclusao
+      )[0],
+    [filteredCategoryPerformance]
+  );
+  const dominantStatus = useMemo(
+    () => [...filteredStudentStatus].sort((a, b) => b.valor - a.valor)[0],
+    [filteredStudentStatus]
+  );
+  const mostActiveDay = useMemo(
+    () => [...weeklyActivity].sort((a, b) => b.acessos - a.acessos)[0],
+    [weeklyActivity]
+  );
+
+  const averageScore = useMemo(() => {
+    if (performanceEvolution.length === 0) return 0;
+    const total = performanceEvolution.reduce(
+      (sum, item) => sum + item.nota,
+      0
+    );
+    return total / performanceEvolution.length;
+  }, [performanceEvolution]);
+
+  const totalActivity = useMemo(() => {
+    return weeklyActivity.reduce(
+      (sum, item) => sum + item.acessos + item.aulas + item.exercicios,
+      0
+    );
+  }, [weeklyActivity]);
+
+  const formatChange = (change: number) => {
+    const prefix = change >= 0 ? '+' : '';
+    return `${prefix}${change}%`;
+  };
+
+  const kpiItems = reportsData
+    ? [
+        {
+          title: t('kpis.totalStudents.title'),
+          value: reportsData.kpis.totalStudents.value.toLocaleString('pt-BR'),
+          change: formatChange(reportsData.kpis.totalStudents.change),
+        },
+        {
+          title: t('kpis.enrollments.title'),
+          value: reportsData.kpis.enrollments.value.toLocaleString('pt-BR'),
+          change: formatChange(reportsData.kpis.enrollments.change),
+        },
+        {
+          title: t('kpis.completionRate.title'),
+          value: `${reportsData.kpis.completionRate.value}%`,
+          change: formatChange(reportsData.kpis.completionRate.change),
+        },
+        {
+          title: t('kpis.churnRate.title'),
+          value: `${reportsData.kpis.churnRate.value}%`,
+          change: formatChange(reportsData.kpis.churnRate.change),
+        },
+      ]
+    : [];
+
+  const statsCards = kpiItems.map((item, index) => {
+    const icons = [Users, BookOpen, GraduationCap, TrendingDown];
+    const bgColors = [
+      'bg-blue-100',
+      'bg-emerald-100',
+      'bg-amber-100',
+      'bg-rose-100',
+    ];
+    const iconColors = [
+      'text-blue-600',
+      'text-emerald-600',
+      'text-amber-600',
+      'text-rose-600',
+    ];
+    const Icon = icons[index] ?? Users;
+
+    return {
+      title: `${item.title} ${item.change}`,
+      value: item.value,
+      icon: <Icon className="h-5 w-5" />,
+      iconBgColor: bgColors[index],
+      iconColor: iconColors[index],
+    };
+  });
+
+  const highlightCards: HighlightCard[] = [
+    {
+      title: t('highlights.topCourse.title'),
+      description: t('highlights.topCourse.description'),
+      value: topCourse?.nome ?? t('emptyState.title'),
+      helper: topCourse
+        ? t('highlights.topCourse.helper', {
+            total: topCourse.alunos.toLocaleString('pt-BR'),
+          })
+        : t('emptyState.description'),
+      icon: Trophy,
+    },
+    {
+      title: t('highlights.topPath.title'),
+      description: t('highlights.topPath.description'),
+      value: topPath?.area ?? t('emptyState.title'),
+      helper: topPath
+        ? t('highlights.topPath.helper', { total: topPath.conclusao })
+        : t('emptyState.description'),
+      icon: GraduationCap,
+    },
+    {
+      title: t('highlights.studentStatus.title'),
+      description: t('highlights.studentStatus.description'),
+      value: dominantStatus
+        ? t(`statusDistribution.${dominantStatus.nome}`)
+        : t('emptyState.title'),
+      helper: dominantStatus
+        ? t('highlights.studentStatus.helper', { total: dominantStatus.valor })
+        : t('emptyState.description'),
+      icon: Users,
+    },
+    {
+      title: t('highlights.activity.title'),
+      description: t('highlights.activity.description'),
+      value: mostActiveDay
+        ? t(`weekdays.${mostActiveDay.dia}`)
+        : t('emptyState.title'),
+      helper: t('highlights.activity.helper', {
+        total: totalActivity.toLocaleString('pt-BR'),
+      }),
+      icon: Activity,
+    },
+  ];
+
+  const handleSearch = () => {
+    setSearchQuery(searchInput);
+    setPeriodo(periodoInput);
+  };
+
+  const handleExportPdf = async () => {
+    if (!reportsData) {
+      toast.error(t('toasts.noDataToExport'));
+      return;
+    }
+
+    try {
+      setIsExporting(true);
+
+      const [{ default: jsPDF }, { default: autoTable }] = await Promise.all([
+        import('jspdf'),
+        import('jspdf-autotable'),
+      ]);
+
+      const doc = new jsPDF({ unit: 'pt', format: 'a4' }) as JsPdfWithAutoTable;
+      const generatedAt = new Date().toLocaleString('pt-BR');
+
+      doc.setFontSize(16);
+      doc.text(t('export.title'), 40, 40);
+      doc.setFontSize(10);
+      doc.text(`${t('export.periodLabel')}: ${t(`period.${periodo}`)}`, 40, 58);
+      doc.text(`${t('export.generatedAt')}: ${generatedAt}`, 40, 72);
+
+      autoTable(doc, {
+        startY: 90,
+        head: [[t('table.metric'), t('table.value')]],
+        body: [
+          [
+            t('kpis.totalStudents.title'),
+            `${reportsData.kpis.totalStudents.value}`,
+          ],
+          [
+            t('kpis.enrollments.title'),
+            `${reportsData.kpis.enrollments.value}`,
+          ],
+          [
+            t('kpis.completionRate.title'),
+            `${reportsData.kpis.completionRate.value}%`,
+          ],
+          [t('kpis.churnRate.title'), `${reportsData.kpis.churnRate.value}%`],
+        ],
+        theme: 'striped',
+        styles: { fontSize: 9 },
+      });
+
+      const kpiTableY = doc.lastAutoTable?.finalY ?? 90;
+      autoTable(doc, {
+        startY: kpiTableY + 16,
+        head: [[t('table.course'), t('table.students'), t('table.score')]],
+        body: filteredCourseRanking
+          .slice(0, 5)
+          .map((course) => [
+            course.nome,
+            `${course.alunos}`,
+            `${course.nota.toFixed(1)}`,
+          ]),
+        theme: 'grid',
+        styles: { fontSize: 8 },
+      });
+
+      const rankingTableY = doc.lastAutoTable?.finalY ?? kpiTableY + 16;
+      autoTable(doc, {
+        startY: rankingTableY + 16,
+        head: [[t('table.status'), t('table.students')]],
+        body: filteredStudentStatus.map((item) => [
+          t(`statusDistribution.${item.nome}`),
+          `${item.valor}`,
+        ]),
+        theme: 'grid',
+        styles: { fontSize: 8 },
+      });
+
+      doc.save(
+        `lms-reports-dashboard-${periodo}-${new Date().toISOString().slice(0, 10)}.pdf`
+      );
+      toast.success(t('toasts.exported'));
+    } catch (error) {
+      console.error('Error exporting PDF report:', error);
+      toast.error(t('toasts.exportError'));
+    } finally {
+      setIsExporting(false);
+    }
   };
 
+  const renderEmptyState = (className = 'min-h-[180px]') => (
+    <div
+      className={`flex flex-col items-center justify-center rounded-lg border border-dashed bg-muted/20 px-6 py-10 text-center ${className}`}
+    >
+      <p className="text-sm font-semibold">{t('emptyState.title')}</p>
+      <p className="mt-1 max-w-md text-sm text-muted-foreground">
+        {t('emptyState.description')}
+      </p>
+    </div>
+  );
+
   return (
     <Page>
       <PageHeader
         title={t('title')}
         description={t('description')}
         breadcrumbs={[
-          {
-            label: t('breadcrumbs.home'),
-            href: '/',
-          },
-          {
-            label: t('breadcrumbs.reports'),
-          },
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.reports') },
         ]}
         actions={
-          <div className="flex items-center gap-3">
-            <Select value={periodo} onValueChange={setPeriodo}>
-              <SelectTrigger className="w-[140px]">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="7d">{t('period.7d')}</SelectItem>
-                <SelectItem value="30d">{t('period.30d')}</SelectItem>
-                <SelectItem value="6m">{t('period.6m')}</SelectItem>
-                <SelectItem value="12m">{t('period.12m')}</SelectItem>
-              </SelectContent>
-            </Select>
-            <Button
-              variant="outline"
-              className="gap-2"
-              onClick={() => toast.success(t('toasts.exported'))}
-            >
-              <Download className="size-4" />
-              <span className="hidden sm:inline">{t('actions.export')}</span>
-            </Button>
-          </div>
+          <Button
+            variant="outline"
+            className="gap-2"
+            onClick={handleExportPdf}
+            disabled={isExporting || loading}
+          >
+            <Download className="size-4" />
+            <span className="hidden sm:inline">{t('actions.export')}</span>
+          </Button>
         }
       />
 
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.4 }}
+        transition={{ duration: 0.35 }}
+        className="space-y-4"
       >
-        {/* KPIs */}
         {loading ? (
-          <div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
             {Array.from({ length: 4 }).map((_, i) => (
               <Card key={i}>
                 <CardContent className="p-6">
-                  <Skeleton className="mb-2 h-4 w-24" />
-                  <Skeleton className="mb-1 h-8 w-20" />
-                  <Skeleton className="h-4 w-16" />
+                  <Skeleton className="mb-3 h-4 w-28" />
+                  <Skeleton className="mb-2 h-8 w-24" />
+                  <Skeleton className="h-4 w-28" />
                 </CardContent>
               </Card>
             ))}
           </div>
         ) : (
-          <div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-            {[
-              {
-                titulo: t('kpis.totalRevenue.title'),
-                valor: 'R$ 880.000',
-                variacao: '+18.2%',
-                positivo: true,
-              },
-              {
-                titulo: t('kpis.enrollments.title'),
-                valor: '2.850',
-                variacao: '+22.5%',
-                positivo: true,
-              },
-              {
-                titulo: t('kpis.completionRate.title'),
-                valor: '78.3%',
-                variacao: '+2.1%',
-                positivo: true,
-              },
-              {
-                titulo: t('kpis.churnRate.title'),
-                valor: '5.4%',
-                variacao: '-1.2%',
-                positivo: true,
-              },
-            ].map((kpi, i) => (
-              <motion.div
-                key={kpi.titulo}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: i * 0.1 }}
-              >
-                <Card className="transition-shadow hover:shadow-md">
-                  <CardContent className="p-6">
-                    <p className="text-sm font-medium text-muted-foreground">
-                      {kpi.titulo}
-                    </p>
-                    <p className="mt-2 text-2xl font-bold">{kpi.valor}</p>
-                    <div className="mt-1 flex items-center gap-1">
-                      {kpi.positivo ? (
-                        <TrendingUp className="size-3 text-emerald-600" />
-                      ) : (
-                        <TrendingDown className="size-3 text-red-500" />
-                      )}
-                      <span
-                        className={`text-xs font-medium ${kpi.positivo ? 'text-emerald-600' : 'text-red-500'}`}
-                      >
-                        {kpi.variacao}
-                      </span>
-                      <span className="text-xs text-muted-foreground">
-                        {t('kpis.vsPreviousPeriod')}
-                      </span>
-                    </div>
-                  </CardContent>
-                </Card>
-              </motion.div>
-            ))}
-          </div>
+          <StatsCards stats={statsCards} className="gap-4" />
         )}
 
-        {/* Tabs */}
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-8">
-          <TabsList className="mb-6">
-            <TabsTrigger value="geral">{t('tabs.overview')}</TabsTrigger>
-            <TabsTrigger value="cursos">{t('tabs.courses')}</TabsTrigger>
-            <TabsTrigger value="alunos">{t('tabs.students')}</TabsTrigger>
-          </TabsList>
-
-          {/* Tab: Geral */}
-          <TabsContent value="geral" className="mt-0">
-            {loading ? (
-              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <SearchBar
+          searchQuery={searchInput}
+          onSearchChange={setSearchInput}
+          onSearch={handleSearch}
+          className="mt-0"
+          placeholder={t('filters.searchPlaceholder')}
+          controls={[
+            {
+              id: 'period-filter',
+              type: 'select',
+              value: periodoInput,
+              onChange: setPeriodoInput,
+              placeholder: t('filters.period'),
+              options: [
+                { value: '7d', label: t('period.7d') },
+                { value: '30d', label: t('period.30d') },
+                { value: '6m', label: t('period.6m') },
+                { value: '12m', label: t('period.12m') },
+              ],
+            },
+          ]}
+        />
+
+        <div className="grid gap-4">
+          {loading ? (
+            <>
+              <Card>
+                <CardContent className="p-6">
+                  <Skeleton className="mb-4 h-5 w-44" />
+                  <Skeleton className="h-[240px] w-full" />
+                </CardContent>
+              </Card>
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
                 {Array.from({ length: 4 }).map((_, i) => (
                   <Card key={i}>
-                    <CardContent className="p-6">
-                      <Skeleton className="mb-4 h-5 w-40" />
-                      <Skeleton className="h-[260px] w-full" />
+                    <CardContent className="p-5">
+                      <Skeleton className="mb-3 h-4 w-24" />
+                      <Skeleton className="mb-2 h-6 w-32" />
+                      <Skeleton className="h-4 w-full" />
                     </CardContent>
                   </Card>
                 ))}
               </div>
-            ) : (
-              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-                {/* Matriculas ao longo do tempo */}
-                <motion.div
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.2 }}
-                >
-                  <Card>
-                    <CardHeader>
-                      <CardTitle className="text-base">
-                        {t('charts.monthlyEnrollments.title')}
-                      </CardTitle>
-                      <CardDescription>
-                        {t('charts.monthlyEnrollments.description')}
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                      <ResponsiveContainer width="100%" height={260}>
-                        <AreaChart data={monthlyEnrollments}>
-                          <CartesianGrid
-                            strokeDasharray="3 3"
-                            stroke="hsl(var(--border))"
-                          />
-                          <XAxis
-                            dataKey="mes"
-                            tickFormatter={(value) => t(`months.${value}`)}
-                            fontSize={12}
-                            tickLine={false}
-                            axisLine={false}
-                          />
-                          <YAxis
-                            fontSize={12}
-                            tickLine={false}
-                            axisLine={false}
-                          />
-                          <Tooltip contentStyle={tooltipStyle} />
-                          <defs>
-                            <linearGradient
-                              id="colorMatriculas"
-                              x1="0"
-                              y1="0"
-                              x2="0"
-                              y2="1"
-                            >
-                              <stop
-                                offset="5%"
-                                stopColor="#22c55e"
-                                stopOpacity={0.3}
-                              />
-                              <stop
-                                offset="95%"
-                                stopColor="#22c55e"
-                                stopOpacity={0}
-                              />
-                            </linearGradient>
-                            <linearGradient
-                              id="colorCancelamentos"
-                              x1="0"
-                              y1="0"
-                              x2="0"
-                              y2="1"
-                            >
-                              <stop
-                                offset="5%"
-                                stopColor="#ef4444"
-                                stopOpacity={0.3}
-                              />
-                              <stop
-                                offset="95%"
-                                stopColor="#ef4444"
-                                stopOpacity={0}
-                              />
-                            </linearGradient>
-                          </defs>
-                          <Area
-                            type="monotone"
-                            dataKey="matriculas"
-                            stroke="#22c55e"
-                            fill="url(#colorMatriculas)"
-                            strokeWidth={2.5}
-                            name={t('charts.monthlyEnrollments.enrollments')}
-                          />
-                          <Area
-                            type="monotone"
-                            dataKey="cancelamentos"
-                            stroke="#ef4444"
-                            fill="url(#colorCancelamentos)"
-                            strokeWidth={2}
-                            name={t('charts.monthlyEnrollments.cancellations')}
-                          />
-                        </AreaChart>
-                      </ResponsiveContainer>
-                    </CardContent>
-                  </Card>
-                </motion.div>
-
-                {/* Receita */}
-                <motion.div
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.3 }}
-                >
-                  <Card>
-                    <CardHeader>
-                      <CardTitle className="text-base">
-                        {t('charts.monthlyRevenue.title')}
-                      </CardTitle>
-                      <CardDescription>
-                        {t('charts.monthlyRevenue.description')}
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                      <ResponsiveContainer width="100%" height={260}>
-                        <BarChart data={monthlyEnrollments}>
-                          <CartesianGrid
-                            strokeDasharray="3 3"
-                            stroke="hsl(var(--border))"
-                          />
-                          <XAxis
-                            dataKey="mes"
-                            tickFormatter={(value) => t(`months.${value}`)}
-                            fontSize={12}
-                            tickLine={false}
-                            axisLine={false}
-                          />
-                          <YAxis
-                            fontSize={12}
-                            tickLine={false}
-                            axisLine={false}
-                            tickFormatter={(v) => `${(v / 1000).toFixed(0)}k`}
-                          />
-                          <Tooltip
-                            contentStyle={tooltipStyle}
-                            formatter={(value: number) => [
-                              `R$ ${value.toLocaleString('pt-BR')}`,
-                              t('charts.monthlyRevenue.revenue'),
-                            ]}
-                          />
-                          <defs>
-                            <linearGradient
-                              id="colorReceita"
-                              x1="0"
-                              y1="0"
-                              x2="0"
-                              y2="1"
-                            >
-                              <stop offset="0%" stopColor="#3b82f6" />
-                              <stop offset="100%" stopColor="#60a5fa" />
-                            </linearGradient>
-                          </defs>
-                          <Bar
-                            dataKey="receita"
-                            fill="url(#colorReceita)"
-                            radius={[6, 6, 0, 0]}
-                            name={t('charts.monthlyRevenue.revenue')}
-                          />
-                        </BarChart>
-                      </ResponsiveContainer>
-                    </CardContent>
-                  </Card>
-                </motion.div>
-
-                {/* Status dos alunos (pie) */}
-                <motion.div
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.4 }}
-                >
-                  <Card>
-                    <CardHeader>
-                      <CardTitle className="text-base">
-                        {t('charts.studentStatus.title')}
-                      </CardTitle>
-                      <CardDescription>
-                        {t('charts.studentStatus.description')}
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent className="flex flex-col items-center">
-                      <ResponsiveContainer width="100%" height={220}>
-                        <PieChart>
-                          <Pie
-                            data={statusDistribution}
-                            cx="50%"
-                            cy="50%"
-                            innerRadius={55}
-                            outerRadius={85}
-                            dataKey="valor"
-                            nameKey="nome"
-                            strokeWidth={2}
-                            stroke="hsl(var(--background))"
+            </>
+          ) : (
+            <>
+              <Card>
+                <CardHeader>
+                  <CardTitle>{t('charts.monthlyOverview.title')}</CardTitle>
+                  <CardDescription>
+                    {t('charts.monthlyOverview.description')}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="pt-0">
+                  {monthlyData.length === 0 ? (
+                    renderEmptyState('min-h-[200px]')
+                  ) : (
+                    <ResponsiveContainer width="100%" height={240}>
+                      <AreaChart data={monthlyData}>
+                        <CartesianGrid
+                          strokeDasharray="3 3"
+                          stroke="hsl(var(--border))"
+                        />
+                        <XAxis
+                          dataKey="mes"
+                          tickFormatter={(value) => t(`months.${value}`)}
+                          fontSize={12}
+                          tickLine={false}
+                          axisLine={false}
+                        />
+                        <YAxis
+                          fontSize={12}
+                          tickLine={false}
+                          axisLine={false}
+                        />
+                        <Tooltip contentStyle={tooltipStyle} />
+                        <defs>
+                          <linearGradient
+                            id="overviewEnrollments"
+                            x1="0"
+                            y1="0"
+                            x2="0"
+                            y2="1"
                           >
-                            {statusDistribution.map((entry, index) => (
-                              <Cell key={`cell-${index}`} fill={entry.cor} />
-                            ))}
-                          </Pie>
-                          <Tooltip contentStyle={tooltipStyle} />
-                        </PieChart>
-                      </ResponsiveContainer>
-                      <div className="mt-2 flex flex-wrap justify-center gap-4">
-                        {statusDistribution.map((item) => (
-                          <div
-                            key={item.nome}
-                            className="flex items-center gap-1.5 text-xs"
+                            <stop
+                              offset="5%"
+                              stopColor="#22c55e"
+                              stopOpacity={0.32}
+                            />
+                            <stop
+                              offset="95%"
+                              stopColor="#22c55e"
+                              stopOpacity={0}
+                            />
+                          </linearGradient>
+                          <linearGradient
+                            id="overviewCancellations"
+                            x1="0"
+                            y1="0"
+                            x2="0"
+                            y2="1"
                           >
-                            <span
-                              className="inline-block size-2.5 rounded-full"
-                              style={{ backgroundColor: item.cor }}
+                            <stop
+                              offset="5%"
+                              stopColor="#ef4444"
+                              stopOpacity={0.28}
                             />
-                            <span className="text-muted-foreground">
-                              {t(`statusDistribution.${item.nome}`)} (
-                              {item.valor})
-                            </span>
-                          </div>
-                        ))}
-                      </div>
-                    </CardContent>
-                  </Card>
-                </motion.div>
-
-                {/* Radar */}
-                <motion.div
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.5 }}
-                >
-                  <Card>
-                    <CardHeader>
-                      <CardTitle className="text-base">
-                        {t('charts.qualityIndicators.title')}
-                      </CardTitle>
-                      <CardDescription>
-                        {t('charts.qualityIndicators.description')}
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                      <ResponsiveContainer width="100%" height={260}>
-                        <RadarChart data={radarData}>
-                          <PolarGrid stroke="hsl(var(--border))" />
-                          <PolarAngleAxis
-                            dataKey="subject"
-                            fontSize={11}
-                            tickFormatter={(value) => t(`radar.${value}`)}
-                          />
-                          <PolarRadiusAxis
-                            angle={30}
-                            domain={[0, 100]}
-                            fontSize={10}
-                          />
-                          <Radar
-                            name={t('charts.qualityIndicators.score')}
-                            dataKey="A"
-                            stroke="#a855f7"
-                            fill="#a855f7"
-                            fillOpacity={0.25}
-                            strokeWidth={2.5}
-                          />
-                          <Tooltip contentStyle={tooltipStyle} />
-                        </RadarChart>
-                      </ResponsiveContainer>
-                    </CardContent>
-                  </Card>
-                </motion.div>
-              </div>
-            )}
-          </TabsContent>
-
-          {/* Tab: Cursos */}
-          <TabsContent value="cursos" className="mt-0">
-            {loading ? (
-              <Card>
-                <CardContent className="p-4">
-                  {Array.from({ length: 8 }).map((_, i) => (
-                    <div
-                      key={i}
-                      className="flex items-center gap-4 border-b py-3 last:border-0"
-                    >
-                      <Skeleton className="h-4 w-48" />
-                      <Skeleton className="h-4 w-16" />
-                      <Skeleton className="h-4 w-16" />
-                      <Skeleton className="h-4 w-12" />
-                    </div>
-                  ))}
+                            <stop
+                              offset="95%"
+                              stopColor="#ef4444"
+                              stopOpacity={0}
+                            />
+                          </linearGradient>
+                        </defs>
+                        <Area
+                          type="monotone"
+                          dataKey="matriculas"
+                          stroke="#22c55e"
+                          fill="url(#overviewEnrollments)"
+                          strokeWidth={2.5}
+                          name={t('charts.monthlyOverview.enrollments')}
+                        />
+                        <Area
+                          type="monotone"
+                          dataKey="cancelamentos"
+                          stroke="#ef4444"
+                          fill="url(#overviewCancellations)"
+                          strokeWidth={2.2}
+                          name={t('charts.monthlyOverview.cancellations')}
+                        />
+                      </AreaChart>
+                    </ResponsiveContainer>
+                  )}
                 </CardContent>
               </Card>
-            ) : (
-              <div className="grid grid-cols-1 gap-4 lg:grid-cols-5">
-                <motion.div
-                  className="lg:col-span-3"
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.2 }}
-                >
-                  <Card>
-                    <CardHeader>
-                      <CardTitle className="text-base">
-                        {t('charts.courseRanking.title')}
-                      </CardTitle>
-                      <CardDescription>
-                        {t('charts.courseRanking.description')}
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent className="p-0">
-                      <Table>
-                        <TableHeader>
-                          <TableRow>
-                            <TableHead className="w-[30px]">#</TableHead>
-                            <TableHead>{t('table.course')}</TableHead>
-                            <TableHead>{t('table.students')}</TableHead>
-                            <TableHead className="hidden sm:table-cell">
-                              {t('table.completion')}
-                            </TableHead>
-                            <TableHead>{t('table.score')}</TableHead>
-                          </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                          {courseRanking
-                            .sort((a, b) => b.alunos - a.alunos)
-                            .map((curso, i) => (
-                              <TableRow key={curso.nome}>
-                                <TableCell className="font-mono text-xs text-muted-foreground">
-                                  {i + 1}
-                                </TableCell>
-                                <TableCell className="font-medium">
-                                  {t(`courseRanking.${curso.nome}`)}
-                                </TableCell>
-                                <TableCell>{curso.alunos}</TableCell>
-                                <TableCell className="hidden sm:table-cell">
-                                  <Badge
-                                    variant={
-                                      curso.conclusao >= 80
-                                        ? 'default'
-                                        : 'secondary'
-                                    }
-                                  >
-                                    {curso.conclusao}%
-                                  </Badge>
-                                </TableCell>
-                                <TableCell>
-                                  <span
-                                    className={
-                                      curso.nota >= 8
-                                        ? 'font-medium text-emerald-600'
-                                        : 'text-foreground'
-                                    }
-                                  >
-                                    {curso.nota.toFixed(1)}
-                                  </span>
-                                </TableCell>
-                              </TableRow>
-                            ))}
-                        </TableBody>
-                      </Table>
-                    </CardContent>
-                  </Card>
-                </motion.div>
 
-                <motion.div
-                  className="lg:col-span-2"
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.3 }}
-                >
-                  <Card>
-                    <CardHeader>
-                      <CardTitle className="text-base">
-                        {t('charts.performanceByArea.title')}
-                      </CardTitle>
-                      <CardDescription>
-                        {t('charts.performanceByArea.description')}
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                      <ResponsiveContainer width="100%" height={300}>
-                        <BarChart data={categoryPerformance} layout="vertical">
-                          <CartesianGrid
-                            strokeDasharray="3 3"
-                            stroke="hsl(var(--border))"
-                          />
-                          <XAxis
-                            type="number"
-                            fontSize={12}
-                            tickLine={false}
-                            axisLine={false}
-                            domain={[0, 100]}
-                          />
-                          <YAxis
-                            type="category"
-                            dataKey="area"
-                            tickFormatter={(value) => t(`areas.${value}`)}
-                            fontSize={12}
-                            tickLine={false}
-                            axisLine={false}
-                            width={80}
-                          />
-                          <Tooltip contentStyle={tooltipStyle} />
-                          <defs>
-                            <linearGradient
-                              id="colorConclusao"
-                              x1="0"
-                              y1="0"
-                              x2="1"
-                              y2="0"
-                            >
-                              <stop offset="0%" stopColor="#22c55e" />
-                              <stop offset="100%" stopColor="#4ade80" />
-                            </linearGradient>
-                          </defs>
-                          <Bar
-                            dataKey="conclusao"
-                            fill="url(#colorConclusao)"
-                            radius={[0, 6, 6, 0]}
-                            name={t('charts.performanceByArea.completion')}
-                          />
-                        </BarChart>
-                      </ResponsiveContainer>
-                    </CardContent>
-                  </Card>
-                </motion.div>
-              </div>
-            )}
-          </TabsContent>
-
-          {/* Tab: Alunos */}
-          <TabsContent value="alunos" className="mt-0">
-            {loading ? (
-              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-                {Array.from({ length: 2 }).map((_, i) => (
-                  <Card key={i}>
-                    <CardContent className="p-6">
-                      <Skeleton className="mb-4 h-5 w-40" />
-                      <Skeleton className="h-[260px] w-full" />
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+                {highlightCards.map((item) => (
+                  <Card key={item.title}>
+                    <CardContent className="p-5">
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="space-y-1">
+                          <p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                            {item.title}
+                          </p>
+                          <p className="text-sm text-muted-foreground">
+                            {item.description}
+                          </p>
+                        </div>
+                        <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-muted">
+                          <item.icon className="size-4 text-foreground" />
+                        </div>
+                      </div>
+                      <p className="mt-4 line-clamp-2 text-lg font-semibold leading-tight">
+                        {item.value}
+                      </p>
+                      <p className="mt-1 text-sm text-muted-foreground">
+                        {item.helper}
+                      </p>
                     </CardContent>
                   </Card>
                 ))}
               </div>
-            ) : (
-              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-                <motion.div
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.2 }}
-                >
-                  <Card>
-                    <CardHeader>
-                      <CardTitle className="text-base">
-                        {t('charts.weeklyActivity.title')}
-                      </CardTitle>
-                      <CardDescription>
-                        {t('charts.weeklyActivity.description')}
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                      <ResponsiveContainer width="100%" height={280}>
-                        <BarChart data={weeklyActivity}>
-                          <CartesianGrid
-                            strokeDasharray="3 3"
-                            stroke="hsl(var(--border))"
-                          />
-                          <XAxis
-                            dataKey="dia"
-                            tickFormatter={(value) => t(`weekdays.${value}`)}
-                            fontSize={12}
-                            tickLine={false}
-                            axisLine={false}
-                          />
-                          <YAxis
-                            fontSize={12}
-                            tickLine={false}
-                            axisLine={false}
-                          />
-                          <Tooltip contentStyle={tooltipStyle} />
-                          <Bar
-                            dataKey="acessos"
-                            fill="#3b82f6"
-                            radius={[4, 4, 0, 0]}
-                            name={t('charts.weeklyActivity.accesses')}
-                          />
-                          <Bar
-                            dataKey="aulas"
-                            fill="#22c55e"
-                            radius={[4, 4, 0, 0]}
-                            name={t('charts.weeklyActivity.classes')}
-                          />
-                          <Bar
-                            dataKey="exercicios"
-                            fill="#f97316"
-                            radius={[4, 4, 0, 0]}
-                            name={t('charts.weeklyActivity.exercises')}
-                          />
-                        </BarChart>
-                      </ResponsiveContainer>
-                    </CardContent>
-                  </Card>
-                </motion.div>
+            </>
+          )}
+        </div>
 
-                <motion.div
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.3 }}
-                >
-                  <Card>
-                    <CardHeader>
-                      <CardTitle className="text-base">
-                        {t('charts.performanceEvolution.title')}
-                      </CardTitle>
-                      <CardDescription>
-                        {t('charts.performanceEvolution.description')}
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                      <ResponsiveContainer width="100%" height={280}>
-                        <LineChart
-                          data={monthlyEnrollments.map((m, i) => ({
-                            mes: m.mes,
-                            nota: 6.8 + Math.sin(i * 0.5) * 0.5 + i * 0.1,
-                          }))}
-                        >
-                          <CartesianGrid
-                            strokeDasharray="3 3"
-                            stroke="hsl(var(--border))"
-                          />
-                          <XAxis
-                            dataKey="mes"
-                            tickFormatter={(value) => t(`months.${value}`)}
-                            fontSize={12}
-                            tickLine={false}
-                            axisLine={false}
-                          />
-                          <YAxis
-                            fontSize={12}
-                            tickLine={false}
-                            axisLine={false}
-                            domain={[6, 10]}
-                          />
-                          <Tooltip contentStyle={tooltipStyle} />
-                          <Line
-                            type="monotone"
-                            dataKey="nota"
-                            stroke="#a855f7"
-                            strokeWidth={2.5}
-                            dot={{
-                              r: 4,
-                              fill: '#a855f7',
-                              strokeWidth: 2,
-                              stroke: '#fff',
-                            }}
-                            activeDot={{ r: 6, fill: '#a855f7' }}
-                            name={t('charts.performanceEvolution.averageScore')}
-                          />
-                        </LineChart>
-                      </ResponsiveContainer>
-                    </CardContent>
-                  </Card>
-                </motion.div>
-
-                {/* Performance por Area */}
-                <motion.div
-                  className="lg:col-span-2"
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.4 }}
-                >
-                  <Card>
-                    <CardHeader>
-                      <CardTitle className="text-base">
-                        {t('charts.metricsByArea.title')}
-                      </CardTitle>
-                      <CardDescription>
-                        {t('charts.metricsByArea.description')}
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent className="p-0">
-                      <Table>
-                        <TableHeader>
-                          <TableRow>
-                            <TableHead>{t('table.area')}</TableHead>
-                            <TableHead>{t('table.students')}</TableHead>
-                            <TableHead>{t('table.averageScore')}</TableHead>
-                            <TableHead>{t('table.completionRate')}</TableHead>
-                            <TableHead className="hidden sm:table-cell">
-                              {t('table.trend')}
-                            </TableHead>
-                          </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                          {categoryPerformance.map((area) => (
-                            <TableRow key={area.area}>
+        <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+          {loading ? (
+            <>
+              <Card>
+                <CardContent className="p-6">
+                  <Skeleton className="mb-4 h-5 w-40" />
+                  <Skeleton className="h-[300px] w-full" />
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent className="p-6">
+                  <Skeleton className="mb-4 h-5 w-40" />
+                  <Skeleton className="h-[300px] w-full" />
+                </CardContent>
+              </Card>
+            </>
+          ) : (
+            <>
+              <Card>
+                <CardHeader>
+                  <CardTitle>{t('charts.topCourses.title')}</CardTitle>
+                  <CardDescription>
+                    {t('charts.topCourses.description')}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="p-0">
+                  {filteredCourseRanking.length === 0 ? (
+                    <div className="px-6 pb-6">
+                      {renderEmptyState('min-h-[220px]')}
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead className="w-[44px]">#</TableHead>
+                          <TableHead>{t('table.course')}</TableHead>
+                          <TableHead>{t('table.students')}</TableHead>
+                          <TableHead>{t('table.score')}</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {filteredCourseRanking
+                          .slice(0, 5)
+                          .map((item, index) => (
+                            <TableRow key={item.id}>
+                              <TableCell className="font-mono text-xs text-muted-foreground">
+                                {index + 1}
+                              </TableCell>
                               <TableCell className="font-medium">
-                                {t(`areas.${area.area}`)}
+                                {item.nome}
                               </TableCell>
-                              <TableCell>{area.alunos}</TableCell>
+                              <TableCell>{item.alunos}</TableCell>
                               <TableCell>
                                 <span
                                   className={
-                                    area.media >= 8
+                                    item.nota >= 8
                                       ? 'font-medium text-emerald-600'
                                       : 'text-foreground'
                                   }
                                 >
-                                  {area.media.toFixed(1)}
+                                  {item.nota.toFixed(1)}
                                 </span>
                               </TableCell>
-                              <TableCell>
-                                <Badge
-                                  variant={
-                                    area.conclusao >= 80
-                                      ? 'default'
-                                      : 'secondary'
-                                  }
-                                >
-                                  {area.conclusao}%
-                                </Badge>
-                              </TableCell>
-                              <TableCell className="hidden sm:table-cell">
-                                <div className="flex items-center gap-1 text-emerald-600">
-                                  <ArrowUpRight className="size-3" />
-                                  <span className="text-xs font-medium">
-                                    {t('table.growing')}
-                                  </span>
-                                </div>
-                              </TableCell>
                             </TableRow>
                           ))}
-                        </TableBody>
-                      </Table>
-                    </CardContent>
-                  </Card>
-                </motion.div>
+                      </TableBody>
+                    </Table>
+                  )}
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <CardTitle>{t('charts.studentStatus.title')}</CardTitle>
+                  <CardDescription>
+                    {t('charts.studentStatus.description')}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="flex h-full pt-0">
+                  {filteredStudentStatus.length === 0 ? (
+                    renderEmptyState('min-h-[220px] w-full')
+                  ) : (
+                    <ResponsiveContainer width="100%" height={300}>
+                      <PieChart>
+                        <Pie
+                          data={filteredStudentStatus}
+                          dataKey="valor"
+                          nameKey="nome"
+                          innerRadius={60}
+                          outerRadius={95}
+                          strokeWidth={2}
+                          stroke="hsl(var(--background))"
+                        >
+                          {filteredStudentStatus.map((entry, index) => (
+                            <Cell
+                              key={`${entry.nome}-${index}`}
+                              fill={entry.cor}
+                            />
+                          ))}
+                        </Pie>
+                        <Tooltip contentStyle={tooltipStyle} />
+                      </PieChart>
+                    </ResponsiveContainer>
+                  )}
+                </CardContent>
+              </Card>
+            </>
+          )}
+        </div>
+
+        <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+          {loading ? (
+            <>
+              <Card>
+                <CardContent className="p-6">
+                  <Skeleton className="mb-4 h-5 w-44" />
+                  <Skeleton className="h-[260px] w-full" />
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent className="p-6">
+                  <Skeleton className="mb-4 h-5 w-44" />
+                  <Skeleton className="h-[260px] w-full" />
+                </CardContent>
+              </Card>
+            </>
+          ) : (
+            <>
+              <Card>
+                <CardHeader>
+                  <CardTitle>{t('charts.pathPerformance.title')}</CardTitle>
+                  <CardDescription>
+                    {t('charts.pathPerformance.description')}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="pt-0">
+                  {filteredCategoryPerformance.length === 0 ? (
+                    renderEmptyState('min-h-[220px]')
+                  ) : (
+                    <ResponsiveContainer width="100%" height={260}>
+                      <BarChart
+                        data={filteredCategoryPerformance}
+                        layout="vertical"
+                      >
+                        <CartesianGrid
+                          strokeDasharray="3 3"
+                          stroke="hsl(var(--border))"
+                        />
+                        <XAxis
+                          type="number"
+                          fontSize={12}
+                          tickLine={false}
+                          axisLine={false}
+                          domain={[0, 100]}
+                        />
+                        <YAxis
+                          type="category"
+                          dataKey="area"
+                          fontSize={12}
+                          tickLine={false}
+                          axisLine={false}
+                          width={120}
+                        />
+                        <Tooltip contentStyle={tooltipStyle} />
+                        <Bar
+                          dataKey="conclusao"
+                          fill="#10b981"
+                          radius={[0, 6, 6, 0]}
+                          name={t('charts.pathPerformance.completion')}
+                        />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  )}
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <CardTitle>
+                    {t('charts.performanceEvolution.title')}
+                  </CardTitle>
+                  <CardDescription>
+                    {t('charts.performanceEvolution.description')}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="pt-0">
+                  {performanceEvolution.length === 0 ? (
+                    renderEmptyState('min-h-[220px]')
+                  ) : (
+                    <ResponsiveContainer width="100%" height={260}>
+                      <BarChart data={performanceEvolution}>
+                        <CartesianGrid
+                          strokeDasharray="3 3"
+                          stroke="hsl(var(--border))"
+                        />
+                        <XAxis
+                          dataKey="mes"
+                          tickFormatter={(value) => t(`months.${value}`)}
+                          fontSize={12}
+                          tickLine={false}
+                          axisLine={false}
+                        />
+                        <YAxis
+                          fontSize={12}
+                          tickLine={false}
+                          axisLine={false}
+                          domain={[0, 10]}
+                        />
+                        <Tooltip contentStyle={tooltipStyle} />
+                        <Bar
+                          dataKey="nota"
+                          fill="#7c3aed"
+                          radius={[6, 6, 0, 0]}
+                          name={t('charts.performanceEvolution.averageScore')}
+                        />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  )}
+                </CardContent>
+              </Card>
+            </>
+          )}
+        </div>
+
+        {!loading && (
+          <Card>
+            <CardContent className="flex flex-wrap items-center justify-between gap-4 p-4">
+              <div className="flex items-center gap-2">
+                <Badge
+                  variant="secondary"
+                  className="gap-1.5 text-xs font-medium"
+                >
+                  <span className="inline-block size-2 rounded-full bg-emerald-500" />
+                  {t('footer.quickSummary')}
+                </Badge>
               </div>
-            )}
-          </TabsContent>
-        </Tabs>
+              <div className="flex flex-wrap gap-x-6 gap-y-1 text-xs text-muted-foreground">
+                <span>
+                  {t('footer.averageScore', {
+                    total: averageScore ? averageScore.toFixed(1) : '0.0',
+                  })}
+                </span>
+                <span>
+                  {t('footer.totalActivity', {
+                    total: totalActivity.toLocaleString('pt-BR'),
+                  })}
+                </span>
+                <span>
+                  {t('footer.tracks', {
+                    total:
+                      filteredCategoryPerformance.length.toLocaleString(
+                        'pt-BR'
+                      ),
+                  })}
+                </span>
+                <span>
+                  {t('footer.courses', {
+                    total: filteredCourseRanking.length.toLocaleString('pt-BR'),
+                  })}
+                </span>
+              </div>
+            </CardContent>
+          </Card>
+        )}
       </motion.div>
     </Page>
   );