@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -0,0 +1,890 @@
+'use client';
+
+import { Page, PageHeader, SearchBar } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { EmptyState } from '@/components/ui/empty-state';
+import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { motion } from 'framer-motion';
+import type { jsPDF } from 'jspdf';
+import {
+  Activity,
+  BookOpen,
+  Download,
+  GraduationCap,
+  Inbox,
+  TrendingDown,
+  Trophy,
+  Users,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { toast } from 'sonner';
+
+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 = {
+  key: string;
+  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 [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 summaryKpis: KpiCardItem[] = reportsData
+    ? [
+        {
+          key: 'total-students',
+          title: t('kpis.totalStudents.title'),
+          value: reportsData.kpis.totalStudents.value.toLocaleString('pt-BR'),
+          description: formatChange(reportsData.kpis.totalStudents.change),
+          icon: Users,
+          accentClassName: 'from-blue-500/25 via-sky-500/10 to-transparent',
+          iconContainerClassName: 'bg-blue-500/10 text-blue-700',
+          layout: 'compact',
+        },
+        {
+          key: 'enrollments',
+          title: t('kpis.enrollments.title'),
+          value: reportsData.kpis.enrollments.value.toLocaleString('pt-BR'),
+          description: formatChange(reportsData.kpis.enrollments.change),
+          icon: BookOpen,
+          accentClassName:
+            'from-emerald-500/25 via-emerald-500/10 to-transparent',
+          iconContainerClassName: 'bg-emerald-500/10 text-emerald-700',
+          layout: 'compact',
+        },
+        {
+          key: 'completion-rate',
+          title: t('kpis.completionRate.title'),
+          value: `${reportsData.kpis.completionRate.value}%`,
+          description: formatChange(reportsData.kpis.completionRate.change),
+          icon: GraduationCap,
+          accentClassName: 'from-amber-500/25 via-amber-500/10 to-transparent',
+          iconContainerClassName: 'bg-amber-500/10 text-amber-700',
+          layout: 'compact',
+        },
+        {
+          key: 'churn-rate',
+          title: t('kpis.churnRate.title'),
+          value: reportsData.kpis.churnRate.value.toLocaleString('pt-BR'),
+          icon: TrendingDown,
+          accentClassName: 'from-rose-500/25 via-rose-500/10 to-transparent',
+          iconContainerClassName: 'bg-rose-500/10 text-rose-700',
+          layout: 'compact',
+        },
+      ]
+    : [];
+
+  const highlightCards: HighlightCard[] = [
+    {
+      key: 'top-course',
+      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,
+    },
+    {
+      key: 'top-path',
+      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,
+    },
+    {
+      key: 'student-status',
+      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,
+    },
+    {
+      key: 'activity',
+      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 highlightKpis: KpiCardItem[] = highlightCards.map((item, index) => {
+    const accents = [
+      {
+        accentClassName:
+          'from-fuchsia-500/25 via-fuchsia-500/10 to-transparent',
+        iconContainerClassName: 'bg-fuchsia-500/10 text-fuchsia-700',
+      },
+      {
+        accentClassName:
+          'from-emerald-500/25 via-emerald-500/10 to-transparent',
+        iconContainerClassName: 'bg-emerald-500/10 text-emerald-700',
+      },
+      {
+        accentClassName: 'from-sky-500/25 via-sky-500/10 to-transparent',
+        iconContainerClassName: 'bg-sky-500/10 text-sky-700',
+      },
+      {
+        accentClassName: 'from-orange-500/25 via-orange-500/10 to-transparent',
+        iconContainerClassName: 'bg-orange-500/10 text-orange-700',
+      },
+    ];
+
+    return {
+      key: item.key,
+      title: item.title,
+      value: item.value,
+      description: (
+        <span>
+          <span className="block text-xs uppercase tracking-[0.14em] text-muted-foreground/80">
+            {item.description}
+          </span>
+          <span className="mt-1 block text-sm text-muted-foreground">
+            {item.helper}
+          </span>
+        </span>
+      ),
+      icon: item.icon,
+      layout: 'compact',
+      ...accents[index],
+    };
+  });
+
+  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]') => (
+    <EmptyState
+      icon={Inbox}
+      title={t('emptyState.title')}
+      description={t('emptyState.description')}
+      className={className}
+    />
+  );
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.reports') },
+        ]}
+        actions={
+          <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.35 }}
+        className="space-y-4"
+      >
+        {loading ? (
+          <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} className="overflow-hidden border-border/70 py-0">
+                <div className="h-1 w-full bg-gradient-to-r from-slate-300/70 via-slate-200 to-transparent" />
+                <CardContent className="p-6">
+                  <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>
+        ) : (
+          <KpiCardsGrid items={summaryKpis} />
+        )}
+
+        <SearchBar
+          searchQuery={searchInput}
+          onSearchChange={setSearchInput}
+          onSearch={handleSearch}
+          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="space-y-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-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>
+            </>
+          ) : (
+            <>
+              <Card className="overflow-hidden border-border/70">
+                <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"
+                          >
+                            <stop
+                              offset="5%"
+                              stopColor="#22c55e"
+                              stopOpacity={0.32}
+                            />
+                            <stop
+                              offset="95%"
+                              stopColor="#22c55e"
+                              stopOpacity={0}
+                            />
+                          </linearGradient>
+                        </defs>
+                        <Area
+                          type="monotone"
+                          dataKey="matriculas"
+                          stroke="#22c55e"
+                          fill="url(#overviewEnrollments)"
+                          strokeWidth={2.5}
+                          name={t('charts.monthlyOverview.enrollments')}
+                        />
+                      </AreaChart>
+                    </ResponsiveContainer>
+                  )}
+                </CardContent>
+              </Card>
+
+              <KpiCardsGrid items={highlightKpis} />
+            </>
+          )}
+        </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-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 className="overflow-hidden border-border/70">
+                <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">
+                                {item.nome}
+                              </TableCell>
+                              <TableCell>{item.alunos}</TableCell>
+                              <TableCell>
+                                <span
+                                  className={
+                                    item.nota >= 8
+                                      ? 'font-medium text-emerald-600'
+                                      : 'text-foreground'
+                                  }
+                                >
+                                  {item.nota.toFixed(1)}
+                                </span>
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </CardContent>
+              </Card>
+
+              <Card className="overflow-hidden border-border/70">
+                <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 className="overflow-hidden border-border/70">
+                <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 className="overflow-hidden border-border/70">
+                <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 className="overflow-hidden border-border/70">
+            <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>
+              <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>
+  );
+}