@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -0,0 +1,772 @@
+'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,
+  Award,
+  Download,
+  GraduationCap,
+  Inbox,
+  LineChart,
+  TrendingDown,
+  UserCheck,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import {
+  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 };
+  };
+  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 UserCheck;
+};
+
+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 ReportStudentsPage() {
+  const t = useTranslations('lms.ReportsStudentsPage');
+  const { request } = useApp();
+  const [searchInput, setSearchInput] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [periodoInput, setPeriodoInput] = useState('12m');
+  const [periodo, setPeriodo] = useState('12m');
+  const [statusInput, setStatusInput] = useState('all');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [isExporting, setIsExporting] = useState(false);
+
+  const { data: reportsData, isLoading: loading } =
+    useQuery<ApiReportsResponse>({
+      queryKey: ['lms-student-reports', 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 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 rawCategoryPerformance = reportsData?.categoryPerformance;
+  const categoryPerformance = useMemo(
+    () => rawCategoryPerformance ?? [],
+    [rawCategoryPerformance]
+  );
+
+  const filteredStudentStatus = useMemo(() => {
+    return studentStatus.filter((item) => {
+      const matchesStatus =
+        statusFilter === 'all' || item.nome === statusFilter;
+      const matchesSearch =
+        normalizedSearch.length === 0 ||
+        t(`statusDistribution.${item.nome}`)
+          .toLocaleLowerCase('pt-BR')
+          .includes(normalizedSearch);
+
+      return matchesStatus && matchesSearch;
+    });
+  }, [normalizedSearch, statusFilter, studentStatus, t]);
+
+  const filteredCategoryPerformance = useMemo(() => {
+    return categoryPerformance.filter((item) => {
+      return (
+        normalizedSearch.length === 0 ||
+        item.area.toLocaleLowerCase('pt-BR').includes(normalizedSearch)
+      );
+    });
+  }, [categoryPerformance, normalizedSearch]);
+
+  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 averageStudentScore = useMemo(() => {
+    if (performanceEvolution.length === 0) return 0;
+    const total = performanceEvolution.reduce(
+      (sum, item) => sum + item.nota,
+      0
+    );
+    return total / performanceEvolution.length;
+  }, [performanceEvolution]);
+  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: UserCheck,
+          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: GraduationCap,
+          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: Award,
+          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: 'dominant-status',
+      title: t('highlights.dominantStatus.title'),
+      description: t('highlights.dominantStatus.description'),
+      value: dominantStatus
+        ? t(`statusDistribution.${dominantStatus.nome}`)
+        : t('emptyState.title'),
+      helper: dominantStatus
+        ? t('highlights.dominantStatus.helper', { total: dominantStatus.valor })
+        : t('emptyState.description'),
+      icon: UserCheck,
+    },
+    {
+      key: 'active-day',
+      title: t('highlights.activeDay.title'),
+      description: t('highlights.activeDay.description'),
+      value: mostActiveDay
+        ? t(`weekdays.${mostActiveDay.dia}`)
+        : t('emptyState.title'),
+      helper: mostActiveDay
+        ? t('highlights.activeDay.helper', {
+            total: mostActiveDay.acessos.toLocaleString('pt-BR'),
+          })
+        : t('emptyState.description'),
+      icon: Activity,
+    },
+    {
+      key: 'average-score',
+      title: t('highlights.averageScore.title'),
+      description: t('highlights.averageScore.description'),
+      value: averageStudentScore
+        ? averageStudentScore.toFixed(1)
+        : t('emptyState.shortValue'),
+      helper: t('highlights.averageScore.helper', {
+        total: performanceEvolution.length.toLocaleString('pt-BR'),
+      }),
+      icon: LineChart,
+    },
+    {
+      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: filteredCategoryPerformance.length.toLocaleString('pt-BR'),
+      }),
+      icon: GraduationCap,
+    },
+  ];
+
+  const highlightKpis: KpiCardItem[] = highlightCards.map((item, index) => {
+    const accents = [
+      {
+        accentClassName: 'from-sky-500/25 via-sky-500/10 to-transparent',
+        iconContainerClassName: 'bg-sky-500/10 text-sky-700',
+      },
+      {
+        accentClassName: 'from-teal-500/25 via-teal-500/10 to-transparent',
+        iconContainerClassName: 'bg-teal-500/10 text-teal-700',
+      },
+      {
+        accentClassName: 'from-violet-500/25 via-violet-500/10 to-transparent',
+        iconContainerClassName: 'bg-violet-500/10 text-violet-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.status'), t('table.students')]],
+        body: filteredStudentStatus.map((item) => [
+          t(`statusDistribution.${item.nome}`),
+          `${item.valor}`,
+        ]),
+        theme: 'grid',
+        styles: { fontSize: 8 },
+      });
+
+      const statusTableY = doc.lastAutoTable?.finalY ?? kpiTableY + 16;
+      autoTable(doc, {
+        startY: statusTableY + 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-student-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);
+    setStatusFilter(statusInput);
+  };
+
+  const statusOptions = useMemo(() => {
+    return [
+      { value: 'all', label: t('filters.allStatuses') },
+      ...studentStatus.map((item) => ({
+        value: item.nome,
+        label: t(`statusDistribution.${item.nome}`),
+      })),
+    ];
+  }, [studentStatus, 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.students') },
+        ]}
+        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: 'status-filter',
+              type: 'select',
+              value: statusInput,
+              onChange: setStatusInput,
+              placeholder: t('filters.status'),
+              options: statusOptions,
+            },
+          ]}
+        />
+
+        <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.weeklyActivity.title')}</CardTitle>
+                  <CardDescription>
+                    {t('charts.weeklyActivity.description')}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="pt-0">
+                  {weeklyActivity.length === 0 ? (
+                    renderEmptyState('min-h-[200px]')
+                  ) : (
+                    <ResponsiveContainer width="100%" height={240}>
+                      <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="#2563eb"
+                          radius={[6, 6, 0, 0]}
+                          name={t('charts.weeklyActivity.accesses')}
+                        />
+                        <Bar
+                          dataKey="aulas"
+                          fill="#10b981"
+                          radius={[6, 6, 0, 0]}
+                          name={t('charts.weeklyActivity.lessons')}
+                        />
+                        <Bar
+                          dataKey="exercicios"
+                          fill="#f97316"
+                          radius={[6, 6, 0, 0]}
+                          name={t('charts.weeklyActivity.exercises')}
+                        />
+                      </BarChart>
+                    </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-44" />
+                  <Skeleton className="h-[300px] w-full" />
+                </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>
+
+              <Card className="overflow-hidden border-border/70">
+                <CardHeader>
+                  <CardTitle>
+                    {t('charts.performanceEvolution.title')}
+                  </CardTitle>
+                  <CardDescription>
+                    {t('charts.performanceEvolution.description')}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="flex h-full pt-0">
+                  {performanceEvolution.length === 0 ? (
+                    renderEmptyState('min-h-[220px] w-full')
+                  ) : (
+                    <ResponsiveContainer width="100%" height={300}>
+                      <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>
+
+        <Card className="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>
+  );
+}