@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -0,0 +1,843 @@
+'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 {
+  BookOpen,
+  Download,
+  GraduationCap,
+  Inbox,
+  TrendingDown,
+  TrendingUp,
+  Trophy,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  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;
+  }>;
+};
+
+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 ReportCoursesPage() {
+  const t = useTranslations('lms.ReportsCoursesPage');
+  const { request } = useApp();
+  const [searchInput, setSearchInput] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [periodoInput, setPeriodoInput] = useState('12m');
+  const [periodo, setPeriodo] = useState('12m');
+  const [pathFilterInput, setPathFilterInput] = useState('all');
+  const [pathFilter, setPathFilter] = useState('all');
+  const [isExporting, setIsExporting] = useState(false);
+
+  const { data: reportsData, isLoading: loading } =
+    useQuery<ApiReportsResponse>({
+      queryKey: ['lms-course-reports', periodo],
+      queryFn: async () => {
+        const response = await request<ApiReportsResponse>({
+          url: '/lms/reports',
+          method: 'GET',
+          params: { period: periodo },
+        });
+        return response.data;
+      },
+    });
+
+  const monthlyData = reportsData?.monthlyData ?? [];
+  const rawCategoryPerformance = reportsData?.categoryPerformance;
+  const categoryPerformance = useMemo(
+    () => rawCategoryPerformance ?? [],
+    [rawCategoryPerformance]
+  );
+  const courseRanking = useMemo(
+    () =>
+      [...(reportsData?.courseRanking ?? [])].sort(
+        (a, b) => b.alunos - a.alunos
+      ),
+    [reportsData?.courseRanking]
+  );
+  const normalizedSearch = searchQuery.trim().toLocaleLowerCase('pt-BR');
+
+  const filteredCourseRanking = useMemo(() => {
+    return courseRanking.filter((course) => {
+      return (
+        normalizedSearch.length === 0 ||
+        course.nome.toLocaleLowerCase('pt-BR').includes(normalizedSearch)
+      );
+    });
+  }, [courseRanking, normalizedSearch]);
+
+  const filteredCategoryPerformance = useMemo(() => {
+    return categoryPerformance.filter((item) => {
+      const matchesPath = pathFilter === 'all' || item.area === pathFilter;
+      const matchesSearch =
+        normalizedSearch.length === 0 ||
+        item.area.toLocaleLowerCase('pt-BR').includes(normalizedSearch);
+
+      return matchesPath && matchesSearch;
+    });
+  }, [categoryPerformance, normalizedSearch, pathFilter]);
+
+  const topCourse = filteredCourseRanking[0];
+  const bestPath = useMemo(
+    () =>
+      [...filteredCategoryPerformance].sort(
+        (a, b) => b.conclusao - a.conclusao
+      )[0],
+    [filteredCategoryPerformance]
+  );
+  const averageCourseScore = useMemo(() => {
+    if (filteredCourseRanking.length === 0) return 0;
+    const total = filteredCourseRanking.reduce(
+      (sum, course) => sum + course.nota,
+      0
+    );
+    return total / filteredCourseRanking.length;
+  }, [filteredCourseRanking]);
+
+  const averagePathCompletion = useMemo(() => {
+    if (filteredCategoryPerformance.length === 0) return 0;
+    const total = filteredCategoryPerformance.reduce(
+      (sum, item) => sum + item.conclusao,
+      0
+    );
+    return total / filteredCategoryPerformance.length;
+  }, [filteredCategoryPerformance]);
+
+  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: BookOpen,
+          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: TrendingUp,
+          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', {
+            students: topCourse.alunos.toLocaleString('pt-BR'),
+          })
+        : t('emptyState.description'),
+      icon: Trophy,
+    },
+    {
+      key: 'best-path',
+      title: t('highlights.bestPath.title'),
+      description: t('highlights.bestPath.description'),
+      value: bestPath?.area ?? t('emptyState.title'),
+      helper: bestPath
+        ? t('highlights.bestPath.helper', {
+            completion: bestPath.conclusao,
+          })
+        : t('emptyState.description'),
+      icon: GraduationCap,
+    },
+    {
+      key: 'average-score',
+      title: t('highlights.averageScore.title'),
+      description: t('highlights.averageScore.description'),
+      value: averageCourseScore
+        ? averageCourseScore.toFixed(1)
+        : t('emptyState.shortValue'),
+      helper: t('highlights.averageScore.helper', {
+        total: courseRanking.length.toLocaleString('pt-BR'),
+      }),
+      icon: BookOpen,
+    },
+    {
+      key: 'path-completion',
+      title: t('highlights.pathCompletion.title'),
+      description: t('highlights.pathCompletion.description'),
+      value: averagePathCompletion
+        ? `${averagePathCompletion.toFixed(0)}%`
+        : t('emptyState.shortValue'),
+      helper: t('highlights.pathCompletion.helper', {
+        total: categoryPerformance.length.toLocaleString('pt-BR'),
+      }),
+      icon: TrendingUp,
+    },
+  ];
+
+  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 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.completion'),
+            t('table.score'),
+          ],
+        ],
+        body: filteredCourseRanking
+          .slice(0, 10)
+          .map((course, index) => [
+            `${index + 1}`,
+            course.nome,
+            `${course.alunos}`,
+            `${course.conclusao}%`,
+            `${course.nota.toFixed(1)}`,
+          ]),
+        theme: 'grid',
+        styles: { fontSize: 8 },
+      });
+
+      const rankingTableY = doc.lastAutoTable?.finalY ?? kpiTableY + 16;
+      autoTable(doc, {
+        startY: rankingTableY + 16,
+        head: [
+          [
+            t('table.path'),
+            t('table.students'),
+            t('table.averageScore'),
+            t('table.completionRate'),
+          ],
+        ],
+        body: filteredCategoryPerformance.map((item) => [
+          item.area,
+          `${item.alunos}`,
+          `${item.media.toFixed(1)}`,
+          `${item.conclusao}%`,
+        ]),
+        theme: 'grid',
+        styles: { fontSize: 8 },
+      });
+
+      doc.save(
+        `lms-course-report-${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}
+    />
+  );
+
+  const handleSearch = () => {
+    setSearchQuery(searchInput);
+    setPeriodo(periodoInput);
+    setPathFilter(pathFilterInput);
+  };
+
+  const pathOptions = useMemo(() => {
+    const uniqueAreas = Array.from(
+      new Set(categoryPerformance.map((item) => item.area))
+    );
+    return [
+      { value: 'all', label: t('filters.allPaths') },
+      ...uniqueAreas.map((area) => ({ value: area, label: area })),
+    ];
+  }, [categoryPerformance, t]);
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          {
+            label: t('breadcrumbs.home'),
+            href: '/',
+          },
+          {
+            label: t('breadcrumbs.reports'),
+            href: '/lms/reports',
+          },
+          {
+            label: t('breadcrumbs.courses'),
+          },
+        ]}
+        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') },
+              ],
+            },
+            {
+              id: 'path-filter',
+              type: 'select',
+              value: pathFilterInput,
+              onChange: setPathFilterInput,
+              placeholder: t('filters.path'),
+              options: pathOptions,
+            },
+          ]}
+        />
+
+        <div className="space-y-4">
+          {loading ? (
+            <>
+              <Card>
+                <CardContent className="p-6">
+                  <Skeleton className="mb-4 h-5 w-40" />
+                  <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.monthlyEnrollments.title')}</CardTitle>
+                  <CardDescription>
+                    {t('charts.monthlyEnrollments.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="coursesEnrollments"
+                            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(#coursesEnrollments)"
+                          strokeWidth={2.5}
+                          name={t('charts.monthlyEnrollments.enrollments')}
+                        />
+                      </AreaChart>
+                    </ResponsiveContainer>
+                  )}
+                </CardContent>
+              </Card>
+
+              <KpiCardsGrid items={highlightKpis} />
+            </>
+          )}
+        </div>
+
+        <div className="grid grid-cols-1 gap-4 xl:grid-cols-5">
+          {loading ? (
+            <>
+              <Card className="overflow-hidden border-border/70 xl:col-span-3">
+                <CardContent className="p-6">
+                  <Skeleton className="mb-4 h-5 w-40" />
+                  <Skeleton className="h-[320px] w-full" />
+                </CardContent>
+              </Card>
+              <Card className="overflow-hidden border-border/70 xl:col-span-2">
+                <CardContent className="p-6">
+                  <Skeleton className="mb-4 h-5 w-44" />
+                  <Skeleton className="h-[320px] w-full" />
+                </CardContent>
+              </Card>
+            </>
+          ) : (
+            <>
+              <Card className="xl:col-span-3">
+                <CardHeader>
+                  <CardTitle>{t('charts.courseRanking.title')}</CardTitle>
+                  <CardDescription>
+                    {t('charts.courseRanking.description')}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="flex h-full p-0">
+                  {filteredCourseRanking.length === 0 ? (
+                    <div className="flex w-full px-6 pb-6">
+                      {renderEmptyState('min-h-[220px] w-full')}
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead className="w-[44px]">#</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>
+                        {filteredCourseRanking.map((course, index) => (
+                          <TableRow
+                            key={course.id || `${course.nome}-${index}`}
+                          >
+                            <TableCell className="font-mono text-xs text-muted-foreground">
+                              {index + 1}
+                            </TableCell>
+                            <TableCell className="font-medium">
+                              {course.nome}
+                            </TableCell>
+                            <TableCell>{course.alunos}</TableCell>
+                            <TableCell className="hidden sm:table-cell">
+                              <Badge
+                                variant={
+                                  course.conclusao >= 80
+                                    ? 'default'
+                                    : 'secondary'
+                                }
+                              >
+                                {course.conclusao}%
+                              </Badge>
+                            </TableCell>
+                            <TableCell>
+                              <span
+                                className={
+                                  course.nota >= 8
+                                    ? 'font-medium text-emerald-600'
+                                    : 'text-foreground'
+                                }
+                              >
+                                {course.nota.toFixed(1)}
+                              </span>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </CardContent>
+              </Card>
+
+              <Card className="xl:col-span-2">
+                <CardHeader>
+                  <CardTitle>{t('charts.performanceByPath.title')}</CardTitle>
+                  <CardDescription>
+                    {t('charts.performanceByPath.description')}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="flex h-full pt-0">
+                  {filteredCategoryPerformance.length === 0 ? (
+                    renderEmptyState('min-h-[220px] w-full')
+                  ) : (
+                    <ResponsiveContainer width="100%" height={320}>
+                      <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} />
+                        <defs>
+                          <linearGradient
+                            id="pathCompletion"
+                            x1="0"
+                            y1="0"
+                            x2="1"
+                            y2="0"
+                          >
+                            <stop offset="0%" stopColor="#0f766e" />
+                            <stop offset="100%" stopColor="#34d399" />
+                          </linearGradient>
+                        </defs>
+                        <Bar
+                          dataKey="conclusao"
+                          fill="url(#pathCompletion)"
+                          radius={[0, 6, 6, 0]}
+                          name={t('charts.performanceByPath.completion')}
+                        />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  )}
+                </CardContent>
+              </Card>
+            </>
+          )}
+        </div>
+
+        <Card className="self-start overflow-hidden border-border/70">
+          <CardHeader>
+            <CardTitle>{t('charts.pathMetrics.title')}</CardTitle>
+            <CardDescription>
+              {t('charts.pathMetrics.description')}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="p-0">
+            {loading ? (
+              <div className="p-6">
+                <Skeleton className="mb-4 h-5 w-48" />
+                <Skeleton className="h-[180px] w-full" />
+              </div>
+            ) : filteredCategoryPerformance.length === 0 ? (
+              <div className="px-6 pb-6">
+                {renderEmptyState('min-h-[160px]')}
+              </div>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('table.path')}</TableHead>
+                    <TableHead>{t('table.students')}</TableHead>
+                    <TableHead>{t('table.averageScore')}</TableHead>
+                    <TableHead>{t('table.completionRate')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredCategoryPerformance.map((item) => (
+                    <TableRow key={item.area}>
+                      <TableCell className="font-medium">{item.area}</TableCell>
+                      <TableCell>{item.alunos}</TableCell>
+                      <TableCell>
+                        <span
+                          className={
+                            item.media >= 8
+                              ? 'font-medium text-emerald-600'
+                              : 'text-foreground'
+                          }
+                        >
+                          {item.media.toFixed(1)}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant={
+                            item.conclusao >= 80 ? 'default' : 'secondary'
+                          }
+                        >
+                          {item.conclusao}%
+                        </Badge>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            )}
+          </CardContent>
+        </Card>
+      </motion.div>
+    </Page>
+  );
+}