@hed-hog/lms 0.0.2

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

@@ -0,0 +1,1222 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  addDays,
+  format,
+  getDay,
+  parse,
+  setHours,
+  setMinutes,
+  startOfWeek,
+} from 'date-fns';
+import { ptBR } from 'date-fns/locale/pt-BR';
+import { motion } from 'framer-motion';
+import {
+  Award,
+  BarChart3,
+  BookOpen,
+  CalendarDays,
+  CheckCircle2,
+  ChevronLeft,
+  ChevronRight,
+  FileCheck,
+  GraduationCap,
+  LayoutDashboard,
+  Percent,
+  TrendingDown,
+  TrendingUp,
+  Users,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { usePathname } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Calendar, dateFnsLocalizer, type View } from 'react-big-calendar';
+import 'react-big-calendar/lib/css/react-big-calendar.css';
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+// ── Navigation ─────────────────────────────────────────────────────────────────
+
+const NAV_ITEMS = [
+  { label: 'Dashboard', href: '/', icon: LayoutDashboard },
+  { label: 'Cursos', href: '/cursos', icon: BookOpen },
+  { label: 'Turmas', href: '/turmas', icon: Users },
+  { label: 'Exames', href: '/exames', icon: FileCheck },
+  { label: 'Formacoes', href: '/formacoes', icon: GraduationCap },
+  { label: 'Relatorios', href: '/relatorios', icon: BarChart3 },
+];
+
+// ── Big Calendar localizer ─────────────────────────────────────────────────────
+
+const locales = { 'pt-BR': ptBR };
+
+const localizer = dateFnsLocalizer({
+  format,
+  parse,
+  startOfWeek: () => startOfWeek(new Date(), { weekStartsOn: 1 }),
+  getDay,
+  locales,
+});
+
+// ── Mock Data ──────────────────────────────────────────────────────────────────
+
+const growthData = [
+  { mes: 'Jul', alunos: 1820 },
+  { mes: 'Ago', alunos: 1950 },
+  { mes: 'Set', alunos: 2100 },
+  { mes: 'Out', alunos: 2280 },
+  { mes: 'Nov', alunos: 2540 },
+  { mes: 'Dez', alunos: 2690 },
+  { mes: 'Jan', alunos: 2847 },
+];
+
+const engagementData = [
+  { semana: 'S1', acessos: 820, videoAssistidos: 340, exercicios: 150 },
+  { semana: 'S2', acessos: 950, videoAssistidos: 420, exercicios: 200 },
+  { semana: 'S3', acessos: 870, videoAssistidos: 380, exercicios: 180 },
+  { semana: 'S4', acessos: 1100, videoAssistidos: 510, exercicios: 260 },
+  { semana: 'S5', acessos: 1250, videoAssistidos: 580, exercicios: 310 },
+  { semana: 'S6', acessos: 1180, videoAssistidos: 540, exercicios: 290 },
+  { semana: 'S7', acessos: 1350, videoAssistidos: 620, exercicios: 350 },
+  { semana: 'S8', acessos: 1420, videoAssistidos: 680, exercicios: 380 },
+];
+
+const topCoursesData = [
+  { curso: 'React Avancado', acessos: 847 },
+  { curso: 'Python IA', acessos: 723 },
+  { curso: 'UX Design', acessos: 651 },
+  { curso: 'Node.js API', acessos: 582 },
+  { curso: 'Data Science', acessos: 498 },
+  { curso: 'Flutter', acessos: 412 },
+];
+
+const categoryDistribution = [
+  { nome: 'Tecnologia', valor: 38 },
+  { nome: 'Design', valor: 22 },
+  { nome: 'Gestao', valor: 18 },
+  { nome: 'Marketing', valor: 14 },
+  { nome: 'Outros', valor: 8 },
+];
+
+const PIE_COLORS = [
+  'oklch(0.205 0 0)',
+  'oklch(0.45 0 0)',
+  'oklch(0.60 0 0)',
+  'oklch(0.75 0 0)',
+  'oklch(0.87 0 0)',
+];
+
+const today = new Date();
+
+function genCalendarEvents() {
+  const turmas = [
+    { nome: 'React Avancado - T01', cor: 'oklch(0.205 0 0)' },
+    { nome: 'Python IA - T02', cor: 'oklch(0.45 0 0)' },
+    { nome: 'UX Design - T01', cor: 'oklch(0.60 0 0)' },
+    { nome: 'Node.js API - T03', cor: 'oklch(0.35 0 0)' },
+    { nome: 'Data Science - T01', cor: 'oklch(0.50 0 0)' },
+  ];
+  const events: {
+    title: string;
+    start: Date;
+    end: Date;
+    resource: { cor: string };
+  }[] = [];
+  for (let d = -14; d <= 30; d++) {
+    const dia = addDays(today, d);
+    const dayOfWeek = dia.getDay();
+    if (dayOfWeek === 0 || dayOfWeek === 6) continue;
+    const numAulas = dayOfWeek % 2 === 0 ? 3 : 2;
+    for (let a = 0; a < numAulas; a++) {
+      const turma = turmas[(d + 14 + a) % turmas.length];
+      const horaInicio = 8 + a * 3;
+      events.push({
+        title: turma.nome,
+        start: setMinutes(setHours(dia, horaInicio), 0),
+        end: setMinutes(setHours(dia, horaInicio + 2), 0),
+        resource: { cor: turma.cor },
+      });
+    }
+  }
+  return events;
+}
+
+const enrollments = [
+  {
+    id: 1,
+    aluno: 'Ana Costa',
+    email: 'ana.costa@email.com',
+    curso: 'React Avancado',
+    data: '01/03/2026',
+    status: 'Confirmada',
+  },
+  {
+    id: 2,
+    aluno: 'Bruno Silva',
+    email: 'bruno.s@email.com',
+    curso: 'Python IA',
+    data: '28/02/2026',
+    status: 'Confirmada',
+  },
+  {
+    id: 3,
+    aluno: 'Carla Santos',
+    email: 'carla.s@email.com',
+    curso: 'UX Design',
+    data: '28/02/2026',
+    status: 'Pendente',
+  },
+  {
+    id: 4,
+    aluno: 'Daniel Rocha',
+    email: 'daniel.r@email.com',
+    curso: 'Node.js API',
+    data: '27/02/2026',
+    status: 'Confirmada',
+  },
+  {
+    id: 5,
+    aluno: 'Elena Martins',
+    email: 'elena.m@email.com',
+    curso: 'Data Science',
+    data: '27/02/2026',
+    status: 'Confirmada',
+  },
+  {
+    id: 6,
+    aluno: 'Fabio Lima',
+    email: 'fabio.l@email.com',
+    curso: 'Flutter',
+    data: '26/02/2026',
+    status: 'Pendente',
+  },
+  {
+    id: 7,
+    aluno: 'Gisele Alves',
+    email: 'gisele.a@email.com',
+    curso: 'React Avancado',
+    data: '26/02/2026',
+    status: 'Confirmada',
+  },
+  {
+    id: 8,
+    aluno: 'Hugo Pereira',
+    email: 'hugo.p@email.com',
+    curso: 'Python IA',
+    data: '25/02/2026',
+    status: 'Confirmada',
+  },
+  {
+    id: 9,
+    aluno: 'Isabela Nunes',
+    email: 'isabela.n@email.com',
+    curso: 'UX Design',
+    data: '25/02/2026',
+    status: 'Cancelada',
+  },
+  {
+    id: 10,
+    aluno: 'Joao Mendes',
+    email: 'joao.m@email.com',
+    curso: 'Data Science',
+    data: '24/02/2026',
+    status: 'Confirmada',
+  },
+  {
+    id: 11,
+    aluno: 'Karen Oliveira',
+    email: 'karen.o@email.com',
+    curso: 'Node.js API',
+    data: '24/02/2026',
+    status: 'Confirmada',
+  },
+  {
+    id: 12,
+    aluno: 'Lucas Ferreira',
+    email: 'lucas.f@email.com',
+    curso: 'Flutter',
+    data: '23/02/2026',
+    status: 'Pendente',
+  },
+];
+
+const nextClasses = [
+  {
+    id: 1,
+    turma: 'React Avancado - T01',
+    disciplina: 'Hooks Avancados',
+    professor: 'Prof. Marcos',
+    data: '02/03/2026',
+    horario: '08:00 - 10:00',
+  },
+  {
+    id: 2,
+    turma: 'Python IA - T02',
+    disciplina: 'Redes Neurais',
+    professor: 'Prof. Lucia',
+    data: '02/03/2026',
+    horario: '10:30 - 12:30',
+  },
+  {
+    id: 3,
+    turma: 'UX Design - T01',
+    disciplina: 'Prototipagem',
+    professor: 'Prof. Renata',
+    data: '02/03/2026',
+    horario: '14:00 - 16:00',
+  },
+  {
+    id: 4,
+    turma: 'Node.js API - T03',
+    disciplina: 'Auth & JWT',
+    professor: 'Prof. Andre',
+    data: '03/03/2026',
+    horario: '08:00 - 10:00',
+  },
+  {
+    id: 5,
+    turma: 'Data Science - T01',
+    disciplina: 'Visualizacao',
+    professor: 'Prof. Paulo',
+    data: '03/03/2026',
+    horario: '10:30 - 12:30',
+  },
+  {
+    id: 6,
+    turma: 'React Avancado - T01',
+    disciplina: 'Context API',
+    professor: 'Prof. Marcos',
+    data: '04/03/2026',
+    horario: '08:00 - 10:00',
+  },
+  {
+    id: 7,
+    turma: 'Python IA - T02',
+    disciplina: 'CNN',
+    professor: 'Prof. Lucia',
+    data: '04/03/2026',
+    horario: '10:30 - 12:30',
+  },
+  {
+    id: 8,
+    turma: 'Flutter - T01',
+    disciplina: 'Widgets',
+    professor: 'Prof. Thiago',
+    data: '05/03/2026',
+    horario: '14:00 - 16:00',
+  },
+  {
+    id: 9,
+    turma: 'UX Design - T01',
+    disciplina: 'Testes A/B',
+    professor: 'Prof. Renata',
+    data: '05/03/2026',
+    horario: '08:00 - 10:00',
+  },
+  {
+    id: 10,
+    turma: 'Node.js API - T03',
+    disciplina: 'WebSockets',
+    professor: 'Prof. Andre',
+    data: '06/03/2026',
+    horario: '08:00 - 10:00',
+  },
+];
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+
+const ITEMS_PER_PAGE = 5;
+
+function getInitials(name: string) {
+  return name
+    .split(' ')
+    .map((n) => n[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2);
+}
+
+function statusColor(status: string) {
+  if (status === 'Confirmada') return 'bg-emerald-100 text-emerald-700';
+  if (status === 'Pendente') return 'bg-amber-100 text-amber-700';
+  return 'bg-red-100 text-red-700';
+}
+
+// ── Chart Tooltip Style ────────────────────────────────────────────────────────
+
+const chartTooltipStyle = {
+  backgroundColor: 'hsl(var(--card))',
+  border: '1px solid hsl(var(--border))',
+  borderRadius: '8px',
+  fontSize: '12px',
+  boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)',
+};
+
+// ── Container Animations ───────────────────────────────────────────────────────
+
+const stagger = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.08 } },
+};
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 16 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.35, ease: 'easeOut' } },
+};
+
+// ── Component ──────────────────────────────────────────────────────────────────
+
+export default function DashboardPage() {
+  const t = useTranslations('lms.DashboardPage');
+
+  const pathname = usePathname();
+  const [loading, setLoading] = useState(true);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  // Calendar
+  const [calendarView, setCalendarView] = useState<View>('month');
+  const [calendarDate, setCalendarDate] = useState(today);
+  const calendarEvents = useMemo(() => genCalendarEvents(), []);
+
+  // Table pagination
+  const [enrollPage, setEnrollPage] = useState(1);
+  const [classesPage, setClassesPage] = useState(1);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setLoading(false), 1000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const enrollTotalPages = Math.ceil(enrollments.length / ITEMS_PER_PAGE);
+  const pagedEnrollments = enrollments.slice(
+    (enrollPage - 1) * ITEMS_PER_PAGE,
+    enrollPage * ITEMS_PER_PAGE
+  );
+
+  const classesTotalPages = Math.ceil(nextClasses.length / ITEMS_PER_PAGE);
+  const pagedClasses = nextClasses.slice(
+    (classesPage - 1) * ITEMS_PER_PAGE,
+    classesPage * ITEMS_PER_PAGE
+  );
+
+  const eventStyleGetter = useCallback(
+    (event: { resource?: { cor?: string } }) => ({
+      style: {
+        backgroundColor: event.resource?.cor ?? 'oklch(0.205 0 0)',
+        border: 'none',
+        borderRadius: '4px',
+        color: '#fff',
+        fontSize: '0.75rem',
+        padding: '2px 6px',
+      },
+    }),
+    []
+  );
+
+  const calendarMessages = useMemo(
+    () => ({
+      today: 'Hoje',
+      previous: 'Anterior',
+      next: 'Proximo',
+      month: 'Mes',
+      week: 'Semana',
+      day: 'Dia',
+      agenda: 'Agenda',
+      date: 'Data',
+      time: 'Hora',
+      event: 'Evento',
+      noEventsInRange: 'Sem aulas neste periodo.',
+      showMore: (count: number) => `+${count} mais`,
+    }),
+    []
+  );
+
+  const kpis = [
+    {
+      titulo: 'Total de Alunos',
+      valor: '2.847',
+      variacao: '+12.5%',
+      positivo: true,
+      icone: Users,
+      descricao: 'vs. mes anterior',
+    },
+    {
+      titulo: 'Cursos Ativos',
+      valor: '48',
+      variacao: '+3',
+      positivo: true,
+      icone: BookOpen,
+      descricao: 'novos este mes',
+    },
+    {
+      titulo: 'Turmas Ativas',
+      valor: '24',
+      variacao: '+5',
+      positivo: true,
+      icone: CalendarDays,
+      descricao: 'em andamento',
+    },
+    {
+      titulo: 'Certificados Emitidos',
+      valor: '1.203',
+      variacao: '+87',
+      positivo: true,
+      icone: Award,
+      descricao: 'este mes',
+    },
+    {
+      titulo: 'Taxa de Conclusao',
+      valor: '78.3%',
+      variacao: '+2.1%',
+      positivo: true,
+      icone: CheckCircle2,
+      descricao: 'media geral',
+    },
+    {
+      titulo: 'Taxa de Aprovacao',
+      valor: '84.7%',
+      variacao: '-0.8%',
+      positivo: false,
+      icone: Percent,
+      descricao: 'nos exames',
+    },
+  ];
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          {
+            label: t('breadcrumbs.home'),
+            href: '/',
+          },
+          {
+            label: t('breadcrumbs.lms'),
+          },
+        ]}
+      />
+
+      {/* ── Main Content ──────────────────────────────────────────────────── */}
+
+      <motion.div initial="hidden" animate="show" variants={stagger}>
+        {/* ── KPIs ────────────────────────────────────────────────────────── */}
+        <div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
+          {kpis.map((kpi, i) => (
+            <motion.div key={kpi.titulo} variants={fadeUp}>
+              {loading ? (
+                <Card>
+                  <CardContent className="p-5">
+                    <Skeleton className="mb-3 h-4 w-24" />
+                    <Skeleton className="mb-2 h-8 w-20" />
+                    <Skeleton className="h-3 w-32" />
+                  </CardContent>
+                </Card>
+              ) : (
+                <motion.div
+                  whileHover={{ y: -2 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <Card className="transition-shadow hover:shadow-md">
+                    <CardContent className="p-5">
+                      <div className="flex items-center justify-between">
+                        <p className="text-xs font-medium text-muted-foreground">
+                          {kpi.titulo}
+                        </p>
+                        <div className="flex size-8 items-center justify-center rounded-lg bg-muted">
+                          <kpi.icone className="size-4 text-muted-foreground" />
+                        </div>
+                      </div>
+                      <p className="mt-2 text-2xl font-bold tracking-tight">
+                        {kpi.valor}
+                      </p>
+                      <div className="mt-1.5 flex items-center gap-1.5">
+                        {kpi.positivo ? (
+                          <span className="flex items-center gap-0.5 rounded-full bg-emerald-50 px-1.5 py-0.5 text-[11px] font-semibold text-emerald-700">
+                            <TrendingUp className="size-3" />
+                            {kpi.variacao}
+                          </span>
+                        ) : (
+                          <span className="flex items-center gap-0.5 rounded-full bg-red-50 px-1.5 py-0.5 text-[11px] font-semibold text-red-600">
+                            <TrendingDown className="size-3" />
+                            {kpi.variacao}
+                          </span>
+                        )}
+                        <span className="text-[11px] text-muted-foreground">
+                          {kpi.descricao}
+                        </span>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              )}
+            </motion.div>
+          ))}
+        </div>
+
+        {/* ── Charts Row 1 ────────────────────────────────────────────────── */}
+        <div className="mb-8 grid grid-cols-1 gap-4 lg:grid-cols-7">
+          {/* Line chart - Crescimento de alunos */}
+          <motion.div className="lg:col-span-4" variants={fadeUp}>
+            {loading ? (
+              <Card>
+                <CardContent className="p-6">
+                  <Skeleton className="mb-4 h-5 w-48" />
+                  <Skeleton className="h-[300px] w-full" />
+                </CardContent>
+              </Card>
+            ) : (
+              <Card>
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm font-semibold">
+                    Crescimento de Alunos
+                  </CardTitle>
+                  <CardDescription>
+                    Evolucao mensal do total de matriculas
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <ResponsiveContainer width="100%" height={300}>
+                    <LineChart data={growthData}>
+                      <CartesianGrid
+                        strokeDasharray="3 3"
+                        stroke="hsl(var(--border))"
+                      />
+                      <XAxis
+                        dataKey="mes"
+                        fontSize={12}
+                        tickLine={false}
+                        axisLine={false}
+                      />
+                      <YAxis fontSize={12} tickLine={false} axisLine={false} />
+                      <Tooltip contentStyle={chartTooltipStyle} />
+                      <Line
+                        type="monotone"
+                        dataKey="alunos"
+                        stroke="oklch(0.205 0 0)"
+                        strokeWidth={2.5}
+                        dot={{
+                          r: 4,
+                          fill: 'oklch(0.205 0 0)',
+                          strokeWidth: 2,
+                          stroke: '#fff',
+                        }}
+                        activeDot={{ r: 6 }}
+                        name="Alunos"
+                      />
+                    </LineChart>
+                  </ResponsiveContainer>
+                </CardContent>
+              </Card>
+            )}
+          </motion.div>
+
+          {/* Area chart - Engajamento */}
+          <motion.div className="lg:col-span-3" variants={fadeUp}>
+            {loading ? (
+              <Card>
+                <CardContent className="p-6">
+                  <Skeleton className="mb-4 h-5 w-40" />
+                  <Skeleton className="h-[300px] w-full" />
+                </CardContent>
+              </Card>
+            ) : (
+              <Card>
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm font-semibold">
+                    Engajamento
+                  </CardTitle>
+                  <CardDescription>
+                    Acessos, videos e exercicios por semana
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <ResponsiveContainer width="100%" height={300}>
+                    <AreaChart data={engagementData}>
+                      <defs>
+                        <linearGradient
+                          id="colorAcessos"
+                          x1="0"
+                          y1="0"
+                          x2="0"
+                          y2="1"
+                        >
+                          <stop
+                            offset="5%"
+                            stopColor="oklch(0.205 0 0)"
+                            stopOpacity={0.15}
+                          />
+                          <stop
+                            offset="95%"
+                            stopColor="oklch(0.205 0 0)"
+                            stopOpacity={0}
+                          />
+                        </linearGradient>
+                        <linearGradient
+                          id="colorVideos"
+                          x1="0"
+                          y1="0"
+                          x2="0"
+                          y2="1"
+                        >
+                          <stop
+                            offset="5%"
+                            stopColor="oklch(0.55 0 0)"
+                            stopOpacity={0.15}
+                          />
+                          <stop
+                            offset="95%"
+                            stopColor="oklch(0.55 0 0)"
+                            stopOpacity={0}
+                          />
+                        </linearGradient>
+                      </defs>
+                      <CartesianGrid
+                        strokeDasharray="3 3"
+                        stroke="hsl(var(--border))"
+                      />
+                      <XAxis
+                        dataKey="semana"
+                        fontSize={12}
+                        tickLine={false}
+                        axisLine={false}
+                      />
+                      <YAxis fontSize={12} tickLine={false} axisLine={false} />
+                      <Tooltip contentStyle={chartTooltipStyle} />
+                      <Area
+                        type="monotone"
+                        dataKey="acessos"
+                        stroke="oklch(0.205 0 0)"
+                        strokeWidth={2}
+                        fill="url(#colorAcessos)"
+                        name="Acessos"
+                      />
+                      <Area
+                        type="monotone"
+                        dataKey="videoAssistidos"
+                        stroke="oklch(0.55 0 0)"
+                        strokeWidth={2}
+                        fill="url(#colorVideos)"
+                        name="Videos"
+                      />
+                      <Area
+                        type="monotone"
+                        dataKey="exercicios"
+                        stroke="oklch(0.75 0 0)"
+                        strokeWidth={1.5}
+                        fill="none"
+                        name="Exercicios"
+                      />
+                    </AreaChart>
+                  </ResponsiveContainer>
+                </CardContent>
+              </Card>
+            )}
+          </motion.div>
+        </div>
+
+        {/* ── Charts Row 2 ────────────────────────────────────────────────── */}
+        <div className="mb-8 grid grid-cols-1 gap-4 lg:grid-cols-7">
+          {/* Bar chart - Cursos mais acessados */}
+          <motion.div className="lg:col-span-4" variants={fadeUp}>
+            {loading ? (
+              <Card>
+                <CardContent className="p-6">
+                  <Skeleton className="mb-4 h-5 w-48" />
+                  <Skeleton className="h-[300px] w-full" />
+                </CardContent>
+              </Card>
+            ) : (
+              <Card>
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm font-semibold">
+                    Cursos Mais Acessados
+                  </CardTitle>
+                  <CardDescription>
+                    Ranking por numero de acessos este mes
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <ResponsiveContainer width="100%" height={300}>
+                    <BarChart data={topCoursesData} layout="vertical">
+                      <CartesianGrid
+                        strokeDasharray="3 3"
+                        stroke="hsl(var(--border))"
+                        horizontal={false}
+                      />
+                      <XAxis
+                        type="number"
+                        fontSize={12}
+                        tickLine={false}
+                        axisLine={false}
+                      />
+                      <YAxis
+                        type="category"
+                        dataKey="curso"
+                        fontSize={12}
+                        tickLine={false}
+                        axisLine={false}
+                        width={110}
+                      />
+                      <Tooltip contentStyle={chartTooltipStyle} />
+                      <Bar
+                        dataKey="acessos"
+                        fill="oklch(0.205 0 0)"
+                        radius={[0, 4, 4, 0]}
+                        name="Acessos"
+                        barSize={24}
+                      />
+                    </BarChart>
+                  </ResponsiveContainer>
+                </CardContent>
+              </Card>
+            )}
+          </motion.div>
+
+          {/* Pie chart - Distribuicao por categoria */}
+          <motion.div className="lg:col-span-3" variants={fadeUp}>
+            {loading ? (
+              <Card>
+                <CardContent className="p-6">
+                  <Skeleton className="mb-4 h-5 w-48" />
+                  <Skeleton className="mx-auto h-[220px] w-[220px] rounded-full" />
+                </CardContent>
+              </Card>
+            ) : (
+              <Card>
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm font-semibold">
+                    Distribuicao por Categoria
+                  </CardTitle>
+                  <CardDescription>
+                    Percentual de cursos ativos por area
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="flex flex-col items-center">
+                  <ResponsiveContainer width="100%" height={220}>
+                    <PieChart>
+                      <Pie
+                        data={categoryDistribution}
+                        cx="50%"
+                        cy="50%"
+                        innerRadius={55}
+                        outerRadius={85}
+                        dataKey="valor"
+                        nameKey="nome"
+                        strokeWidth={3}
+                        stroke="hsl(var(--background))"
+                      >
+                        {categoryDistribution.map((_, index) => (
+                          <Cell
+                            key={`cell-${index}`}
+                            fill={PIE_COLORS[index]}
+                          />
+                        ))}
+                      </Pie>
+                      <Tooltip
+                        contentStyle={chartTooltipStyle}
+                        formatter={(value: number) => [
+                          `${value}%`,
+                          'Percentual',
+                        ]}
+                      />
+                    </PieChart>
+                  </ResponsiveContainer>
+                  <div className="mt-3 flex flex-wrap justify-center gap-x-4 gap-y-2">
+                    {categoryDistribution.map((item, i) => (
+                      <div
+                        key={item.nome}
+                        className="flex items-center gap-1.5 text-xs"
+                      >
+                        <span
+                          className="inline-block size-2.5 rounded-full"
+                          style={{ backgroundColor: PIE_COLORS[i] }}
+                        />
+                        <span className="text-muted-foreground">
+                          {item.nome} ({item.valor}%)
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </motion.div>
+        </div>
+
+        {/* ── Calendar ────────────────────────────────────────────────────── */}
+        <motion.div className="mb-8" variants={fadeUp}>
+          {loading ? (
+            <Card>
+              <CardContent className="p-6">
+                <Skeleton className="mb-4 h-5 w-40" />
+                <Skeleton className="h-[500px] w-full rounded-lg" />
+              </CardContent>
+            </Card>
+          ) : (
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm font-semibold">
+                  Calendario Global de Aulas
+                </CardTitle>
+                <CardDescription>
+                  Todas as aulas de todas as turmas
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="h-[520px] lg:h-[580px]">
+                  <Calendar
+                    localizer={localizer}
+                    events={calendarEvents}
+                    startAccessor="start"
+                    endAccessor="end"
+                    view={calendarView}
+                    onView={(v) => setCalendarView(v)}
+                    date={calendarDate}
+                    onNavigate={(d) => setCalendarDate(d)}
+                    views={['month', 'week']}
+                    messages={calendarMessages}
+                    eventPropGetter={eventStyleGetter}
+                    culture="pt-BR"
+                    popup
+                    style={{ height: '100%' }}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </motion.div>
+
+        {/* ── Tables ──────────────────────────────────────────────────────── */}
+        <motion.div className="mb-8" variants={fadeUp}>
+          <Tabs defaultValue="matriculas">
+            <TabsList className="mb-4">
+              <TabsTrigger value="matriculas">Ultimas Matriculas</TabsTrigger>
+              <TabsTrigger value="aulas">Proximas Aulas</TabsTrigger>
+            </TabsList>
+
+            {/* ─ Tab: Matriculas ─ */}
+            <TabsContent value="matriculas">
+              {loading ? (
+                <Card>
+                  <CardContent className="p-6">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                      <div key={i} className="mb-4 flex items-center gap-4">
+                        <Skeleton className="size-10 rounded-full" />
+                        <div className="flex-1">
+                          <Skeleton className="mb-2 h-4 w-40" />
+                          <Skeleton className="h-3 w-24" />
+                        </div>
+                        <Skeleton className="h-6 w-20" />
+                      </div>
+                    ))}
+                  </CardContent>
+                </Card>
+              ) : (
+                <Card>
+                  <CardHeader className="pb-2">
+                    <CardTitle className="text-sm font-semibold">
+                      Ultimas Matriculas
+                    </CardTitle>
+                    <CardDescription>
+                      {enrollments.length} matriculas recentes
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="overflow-x-auto">
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>Aluno</TableHead>
+                            <TableHead className="hidden sm:table-cell">
+                              Email
+                            </TableHead>
+                            <TableHead>Curso</TableHead>
+                            <TableHead className="hidden md:table-cell">
+                              Data
+                            </TableHead>
+                            <TableHead>Status</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {pagedEnrollments.map((m) => (
+                            <TableRow key={m.id}>
+                              <TableCell>
+                                <div className="flex items-center gap-2.5">
+                                  <Avatar className="size-8">
+                                    <AvatarFallback className="bg-foreground text-[10px] font-medium text-background">
+                                      {getInitials(m.aluno)}
+                                    </AvatarFallback>
+                                  </Avatar>
+                                  <span className="font-medium">{m.aluno}</span>
+                                </div>
+                              </TableCell>
+                              <TableCell className="hidden text-muted-foreground sm:table-cell">
+                                {m.email}
+                              </TableCell>
+                              <TableCell>{m.curso}</TableCell>
+                              <TableCell className="hidden text-muted-foreground md:table-cell">
+                                {m.data}
+                              </TableCell>
+                              <TableCell>
+                                <span
+                                  className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold ${statusColor(m.status)}`}
+                                >
+                                  {m.status}
+                                </span>
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+
+                    {/* Pagination */}
+                    <div className="mt-4 flex items-center justify-between border-t pt-4">
+                      <p className="text-xs text-muted-foreground">
+                        Mostrando {(enrollPage - 1) * ITEMS_PER_PAGE + 1} -{' '}
+                        {Math.min(
+                          enrollPage * ITEMS_PER_PAGE,
+                          enrollments.length
+                        )}{' '}
+                        de {enrollments.length}
+                      </p>
+                      <div className="flex items-center gap-1">
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          className="size-8"
+                          disabled={enrollPage === 1}
+                          onClick={() => setEnrollPage((p) => p - 1)}
+                          aria-label="Pagina anterior"
+                        >
+                          <ChevronLeft className="size-4" />
+                        </Button>
+                        {Array.from({ length: enrollTotalPages }).map(
+                          (_, i) => (
+                            <Button
+                              key={i}
+                              variant={
+                                enrollPage === i + 1 ? 'default' : 'outline'
+                              }
+                              size="icon"
+                              className="size-8 text-xs"
+                              onClick={() => setEnrollPage(i + 1)}
+                            >
+                              {i + 1}
+                            </Button>
+                          )
+                        )}
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          className="size-8"
+                          disabled={enrollPage === enrollTotalPages}
+                          onClick={() => setEnrollPage((p) => p + 1)}
+                          aria-label="Proxima pagina"
+                        >
+                          <ChevronRight className="size-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </TabsContent>
+
+            {/* ─ Tab: Proximas Aulas ─ */}
+            <TabsContent value="aulas">
+              {loading ? (
+                <Card>
+                  <CardContent className="p-6">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                      <div key={i} className="mb-4 flex items-center gap-4">
+                        <Skeleton className="size-8 rounded-lg" />
+                        <div className="flex-1">
+                          <Skeleton className="mb-2 h-4 w-48" />
+                          <Skeleton className="h-3 w-32" />
+                        </div>
+                        <Skeleton className="h-6 w-28" />
+                      </div>
+                    ))}
+                  </CardContent>
+                </Card>
+              ) : (
+                <Card>
+                  <CardHeader className="pb-2">
+                    <CardTitle className="text-sm font-semibold">
+                      Proximas Aulas
+                    </CardTitle>
+                    <CardDescription>
+                      Agenda das proximas aulas programadas
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="overflow-x-auto">
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>Turma</TableHead>
+                            <TableHead>Disciplina</TableHead>
+                            <TableHead className="hidden sm:table-cell">
+                              Professor
+                            </TableHead>
+                            <TableHead>Data</TableHead>
+                            <TableHead className="hidden md:table-cell">
+                              Horario
+                            </TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {pagedClasses.map((aula) => (
+                            <TableRow key={aula.id}>
+                              <TableCell>
+                                <div className="flex items-center gap-2">
+                                  <div className="flex size-8 items-center justify-center rounded-lg bg-muted">
+                                    <BookOpen className="size-3.5 text-muted-foreground" />
+                                  </div>
+                                  <span className="font-medium">
+                                    {aula.turma}
+                                  </span>
+                                </div>
+                              </TableCell>
+                              <TableCell>{aula.disciplina}</TableCell>
+                              <TableCell className="hidden text-muted-foreground sm:table-cell">
+                                {aula.professor}
+                              </TableCell>
+                              <TableCell>
+                                <Badge
+                                  variant="outline"
+                                  className="text-xs font-normal"
+                                >
+                                  {aula.data}
+                                </Badge>
+                              </TableCell>
+                              <TableCell className="hidden text-muted-foreground md:table-cell">
+                                {aula.horario}
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+
+                    {/* Pagination */}
+                    <div className="mt-4 flex items-center justify-between border-t pt-4">
+                      <p className="text-xs text-muted-foreground">
+                        Mostrando {(classesPage - 1) * ITEMS_PER_PAGE + 1} -{' '}
+                        {Math.min(
+                          classesPage * ITEMS_PER_PAGE,
+                          nextClasses.length
+                        )}{' '}
+                        de {nextClasses.length}
+                      </p>
+                      <div className="flex items-center gap-1">
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          className="size-8"
+                          disabled={classesPage === 1}
+                          onClick={() => setClassesPage((p) => p - 1)}
+                          aria-label="Pagina anterior"
+                        >
+                          <ChevronLeft className="size-4" />
+                        </Button>
+                        {Array.from({ length: classesTotalPages }).map(
+                          (_, i) => (
+                            <Button
+                              key={i}
+                              variant={
+                                classesPage === i + 1 ? 'default' : 'outline'
+                              }
+                              size="icon"
+                              className="size-8 text-xs"
+                              onClick={() => setClassesPage(i + 1)}
+                            >
+                              {i + 1}
+                            </Button>
+                          )
+                        )}
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          className="size-8"
+                          disabled={classesPage === classesTotalPages}
+                          onClick={() => setClassesPage((p) => p + 1)}
+                          aria-label="Proxima pagina"
+                        >
+                          <ChevronRight className="size-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </TabsContent>
+          </Tabs>
+        </motion.div>
+
+        {/* ── Footer status ──────────────────────────────────────────────── */}
+        {!loading && (
+          <motion.div variants={fadeUp}>
+            <Card>
+              <CardContent className="flex flex-wrap items-center justify-between gap-4 p-4">
+                <div className="flex items-center gap-2.5">
+                  <Badge
+                    variant="secondary"
+                    className="gap-1.5 text-xs font-medium"
+                  >
+                    <span className="inline-block size-2 rounded-full bg-emerald-500" />
+                    Sistema Operacional
+                  </Badge>
+                </div>
+                <div className="flex flex-wrap gap-x-6 gap-y-1 text-xs text-muted-foreground">
+                  <span>24 turmas ativas</span>
+                  <span>48 cursos publicados</span>
+                  <span>2.847 alunos matriculados</span>
+                  <span>1.203 certificados</span>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        )}
+      </motion.div>
+    </Page>
+  );
+}