@hed-hog/lms 0.0.268 → 0.0.269

package/hedhog/frontend/app/classes/[id]/page.tsx.ejs

@@ -0,0 +1,1387 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Field, FieldError, FieldLabel } from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Switch } from '@/components/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { addDays, format, getDay, setHours, setMinutes } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
+import { motion } from 'framer-motion';
+import {
+  AlertTriangle,
+  BarChart3,
+  Calendar as CalendarIcon,
+  Check,
+  CheckCircle2,
+  Clock,
+  Eye,
+  Loader2,
+  Mail,
+  MapPin,
+  Monitor,
+  MoreHorizontal,
+  Plus,
+  Save,
+  Search,
+  UserMinus,
+  UserPlus,
+  Users,
+  Video,
+} from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Calendar, dateFnsLocalizer, View } from 'react-big-calendar';
+import 'react-big-calendar/lib/css/react-big-calendar.css';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface Aluno {
+  id: number;
+  nome: string;
+  email: string;
+  telefone: string;
+  avatar?: string;
+  matriculadoEm: string;
+  progresso: number;
+  presenca: number;
+}
+
+interface Aula {
+  id: number;
+  titulo: string;
+  data: Date;
+  horaInicio: string;
+  horaFim: string;
+  local: string;
+  tipo: 'presencial' | 'online';
+}
+
+interface PresencaItem {
+  alunoId: number;
+  presente: boolean;
+}
+
+// ── Calendar Localizer ────────────────────────────────────────────────────────
+
+const locales = { 'pt-BR': ptBR, 'en-US': enUS };
+const localizer = dateFnsLocalizer({
+  format,
+  parse: (str: string) => new Date(str),
+  startOfWeek: () => 0,
+  getDay,
+  locales,
+});
+
+// ── Schemas ───────────────────────────────────────────────────────────────────
+
+const getAulaSchema = (t: (key: string) => string) =>
+  z.object({
+    titulo: z.string().min(3, t('sheet.lessonForm.validation.titleMin')),
+    data: z.string().min(1, t('sheet.lessonForm.validation.dateRequired')),
+    horaInicio: z
+      .string()
+      .min(1, t('sheet.lessonForm.validation.startTimeRequired')),
+    horaFim: z
+      .string()
+      .min(1, t('sheet.lessonForm.validation.endTimeRequired')),
+    local: z.string().min(1, t('sheet.lessonForm.validation.locationRequired')),
+    tipo: z.string().min(1, t('sheet.lessonForm.validation.typeRequired')),
+  });
+
+type AulaForm = z.infer<ReturnType<typeof getAulaSchema>>;
+
+// ── Mock Data ─────────────────────────────────────────────────────────────────
+
+const TURMA_MOCK = {
+  id: 1,
+  codigo: 'T2024-001',
+  curso: 'React Avancado',
+  cursoId: 1,
+  tipo: 'online' as const,
+  dataInicio: '2024-02-01',
+  dataFim: '2024-06-30',
+  horario: '19:00 - 22:00',
+  status: 'em_andamento' as const,
+  vagas: 30,
+  matriculados: 28,
+  professor: 'Prof. Marcos Silva',
+  local: 'https://meet.google.com/abc-defg-hij',
+  descricao:
+    'Turma focada em conceitos avancados de React, incluindo hooks customizados, performance e arquitetura.',
+};
+
+function generateAlunos(): Aluno[] {
+  const nomes = [
+    'Ana Silva',
+    'Bruno Costa',
+    'Carla Oliveira',
+    'Daniel Santos',
+    'Elena Ferreira',
+    'Felipe Souza',
+    'Gabriela Lima',
+    'Henrique Almeida',
+    'Isabela Rocha',
+    'João Pedro',
+    'Katia Martins',
+    'Lucas Ribeiro',
+    'Maria Clara',
+    'Nicolas Pereira',
+    'Olivia Gomes',
+    'Paulo Henrique',
+    'Raquel Dias',
+    'Samuel Nunes',
+    'Tatiana Vieira',
+    'Vinicius Castro',
+    'William Araújo',
+    'Yasmin Barbosa',
+    'Zeca Mendes',
+    'Amanda Torres',
+    'Bruno Lopes',
+    'Camila Ramos',
+    'Diego Farias',
+    'Eduarda Moreira',
+  ];
+  return nomes.map((nome, i) => ({
+    id: i + 1,
+    nome,
+    email: `${nome.toLowerCase().replace(' ', '.')}@email.com`,
+    telefone: `(11) 9${Math.floor(Math.random() * 9000 + 1000)}-${Math.floor(Math.random() * 9000 + 1000)}`,
+    matriculadoEm: `2024-0${Math.floor(Math.random() * 2 + 1)}-${String(Math.floor(Math.random() * 28 + 1)).padStart(2, '0')}`,
+    progresso: Math.floor(Math.random() * 60 + 40),
+    presenca: Math.floor(Math.random() * 30 + 70),
+  }));
+}
+
+function generateAulas(): Aula[] {
+  const today = new Date();
+  const aulas: Aula[] = [];
+  const titulos = [
+    'Introducao a Hooks',
+    'useEffect Avancado',
+    'Context API',
+    'Redux vs Zustand',
+    'Performance Optimization',
+    'React Query',
+    'Testing com Jest',
+    'Storybook',
+    'Next.js Fundamentos',
+    'SSR vs SSG',
+    'API Routes',
+    'Deploy e CI/CD',
+  ];
+  for (let i = -10; i < 20; i++) {
+    const dia = addDays(today, i);
+    if (dia.getDay() === 0 || dia.getDay() === 6) continue;
+    aulas.push({
+      id: aulas.length + 1,
+      titulo: titulos[aulas.length % titulos.length],
+      data: dia,
+      horaInicio: '19:00',
+      horaFim: '22:00',
+      local: i % 3 === 0 ? 'Sala 201' : 'https://meet.google.com/abc-defg-hij',
+      tipo: i % 3 === 0 ? 'presencial' : 'online',
+    });
+  }
+  return aulas;
+}
+
+const ALUNOS_DISPONIVEIS = [
+  { id: 101, nome: 'Fernando Moura', email: 'fernando.moura@email.com' },
+  { id: 102, nome: 'Juliana Cardoso', email: 'juliana.cardoso@email.com' },
+  { id: 103, nome: 'Roberto Freitas', email: 'roberto.freitas@email.com' },
+  { id: 104, nome: 'Simone Andrade', email: 'simone.andrade@email.com' },
+  { id: 105, nome: 'Thiago Monteiro', email: 'thiago.monteiro@email.com' },
+];
+
+// ── Main Component ────────────────────────────────────────────────────────────
+
+export default function TurmaDetalhePage() {
+  const t = useTranslations('lms.ClassesPage.DetailPage');
+  const tClasses = useTranslations('lms.ClassesPage');
+  const locale = useLocale();
+  const params = useParams();
+  const router = useRouter();
+  const id = params.id as string;
+  const dateLocale = locale === 'pt' ? ptBR : enUS;
+  const calendarCulture = locale === 'pt' ? 'pt-BR' : 'en-US';
+
+  const calendarMessages = {
+    today: t('calendar.today'),
+    previous: t('calendar.previous'),
+    next: t('calendar.next'),
+    month: t('calendar.month'),
+    week: t('calendar.week'),
+    day: t('calendar.day'),
+    agenda: t('calendar.agenda'),
+    date: t('calendar.date'),
+    time: t('calendar.time'),
+    event: t('calendar.event'),
+    noEventsInRange: t('calendar.noEventsInRange'),
+    showMore: (count: number) => t('calendar.showMore', { count }),
+  };
+
+  // Data
+  const [loading, setLoading] = useState(true);
+  const [turma] = useState(TURMA_MOCK);
+  const [alunos, setAlunos] = useState<Aluno[]>([]);
+  const [aulas, setAulas] = useState<Aula[]>([]);
+
+  // Tabs
+  const [activeTab, setActiveTab] = useState('alunos');
+
+  // Alunos
+  const [alunoSearch, setAlunoSearch] = useState('');
+  const [selectedAlunos, setSelectedAlunos] = useState<number[]>([]);
+  const [addAlunoDialogOpen, setAddAlunoDialogOpen] = useState(false);
+  const [removeAlunoDialogOpen, setRemoveAlunoDialogOpen] = useState(false);
+  const [alunoToRemove, setAlunoToRemove] = useState<Aluno | null>(null);
+  const [alunosToAdd, setAlunosToAdd] = useState<number[]>([]);
+
+  // Calendario
+  const [calendarView, setCalendarView] = useState<View>('month');
+  const [calendarDate, setCalendarDate] = useState(new Date());
+  const [aulaSheetOpen, setAulaSheetOpen] = useState(false);
+  const [editingAula, setEditingAula] = useState<Aula | null>(null);
+  const [selectedAulaForPresenca, setSelectedAulaForPresenca] =
+    useState<Aula | null>(null);
+
+  // Presenca
+  const [presencaSheetOpen, setPresencaSheetOpen] = useState(false);
+  const [presencaList, setPresencaList] = useState<PresencaItem[]>([]);
+  const [savingPresenca, setSavingPresenca] = useState(false);
+
+  // Form
+  const aulaSchema = getAulaSchema(t);
+  const aulaForm = useForm<AulaForm>({
+    resolver: zodResolver(aulaSchema),
+    defaultValues: {
+      titulo: '',
+      data: '',
+      horaInicio: '19:00',
+      horaFim: '22:00',
+      local: '',
+      tipo: 'online',
+    },
+  });
+
+  // Load data
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAlunos(generateAlunos());
+      setAulas(generateAulas());
+      setLoading(false);
+    }, 800);
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Filter alunos
+  const filteredAlunos = useMemo(() => {
+    if (!alunoSearch.trim()) return alunos;
+    const q = alunoSearch.toLowerCase();
+    return alunos.filter(
+      (a) =>
+        a.nome.toLowerCase().includes(q) || a.email.toLowerCase().includes(q)
+    );
+  }, [alunos, alunoSearch]);
+
+  // Calendar events
+  const calendarEvents = useMemo(() => {
+    return aulas.map((aula) => {
+      const [hi, mi] = aula.horaInicio.split(':').map(Number);
+      const [hf, mf] = aula.horaFim.split(':').map(Number);
+      return {
+        id: aula.id,
+        title: aula.titulo,
+        start: setMinutes(setHours(aula.data, hi), mi),
+        end: setMinutes(setHours(aula.data, hf), mf),
+        resource: aula,
+      };
+    });
+  }, [aulas]);
+
+  // Event style
+  const eventStyleGetter = useCallback(
+    (event: { resource?: Aula }) => ({
+      style: {
+        backgroundColor:
+          event.resource?.tipo === 'presencial' ? '#3b82f6' : '#22c55e',
+        border: 'none',
+        borderRadius: '6px',
+        color: '#fff',
+        fontSize: '0.75rem',
+        fontWeight: 500,
+        padding: '3px 8px',
+        boxShadow: '0 1px 3px rgba(0,0,0,0.12)',
+      },
+    }),
+    []
+  );
+
+  // Handlers
+  const toggleSelectAluno = (id: number, e?: React.MouseEvent) => {
+    if (e?.shiftKey && selectedAlunos.length > 0) {
+      const lastSelected = selectedAlunos[selectedAlunos.length - 1];
+      const lastIndex = filteredAlunos.findIndex((a) => a.id === lastSelected);
+      const currentIndex = filteredAlunos.findIndex((a) => a.id === id);
+      const [start, end] = [
+        Math.min(lastIndex, currentIndex),
+        Math.max(lastIndex, currentIndex),
+      ];
+      const range = filteredAlunos.slice(start, end + 1).map((a) => a.id);
+      setSelectedAlunos((prev) => [...new Set([...prev, ...range])]);
+    } else if (e?.ctrlKey || e?.metaKey) {
+      setSelectedAlunos((prev) =>
+        prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+      );
+    } else {
+      setSelectedAlunos((prev) =>
+        prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+      );
+    }
+  };
+
+  const handleAddAlunos = () => {
+    if (alunosToAdd.length === 0) return;
+    const novosAlunos = ALUNOS_DISPONIVEIS.filter((a) =>
+      alunosToAdd.includes(a.id)
+    ).map((a) => ({
+      ...a,
+      telefone: '(11) 99999-9999',
+      matriculadoEm: format(new Date(), 'yyyy-MM-dd'),
+      progresso: 0,
+      presenca: 100,
+    }));
+    setAlunos((prev) => [...prev, ...novosAlunos]);
+    setAddAlunoDialogOpen(false);
+    setAlunosToAdd([]);
+    toast.success(t('toasts.studentsAdded', { count: novosAlunos.length }));
+  };
+
+  const handleRemoveAluno = () => {
+    if (!alunoToRemove) return;
+    setAlunos((prev) => prev.filter((a) => a.id !== alunoToRemove.id));
+    setRemoveAlunoDialogOpen(false);
+    setAlunoToRemove(null);
+    toast.success(t('toasts.studentRemoved'));
+  };
+
+  const handleRemoveSelectedAlunos = () => {
+    setAlunos((prev) => prev.filter((a) => !selectedAlunos.includes(a.id)));
+    setSelectedAlunos([]);
+    toast.success(
+      t('toasts.studentsRemoved', { count: selectedAlunos.length })
+    );
+  };
+
+  const openAulaSheet = (aula?: Aula) => {
+    if (aula) {
+      setEditingAula(aula);
+      aulaForm.reset({
+        titulo: aula.titulo,
+        data: format(aula.data, 'yyyy-MM-dd'),
+        horaInicio: aula.horaInicio,
+        horaFim: aula.horaFim,
+        local: aula.local,
+        tipo: aula.tipo,
+      });
+    } else {
+      setEditingAula(null);
+      aulaForm.reset({
+        titulo: '',
+        data: '',
+        horaInicio: '19:00',
+        horaFim: '22:00',
+        local: '',
+        tipo: 'online',
+      });
+    }
+    setAulaSheetOpen(true);
+  };
+
+  const handleSaveAula = aulaForm.handleSubmit((data) => {
+    if (editingAula) {
+      setAulas((prev) =>
+        prev.map((a) =>
+          a.id === editingAula.id
+            ? {
+                ...a,
+                titulo: data.titulo,
+                data: new Date(data.data),
+                horaInicio: data.horaInicio,
+                horaFim: data.horaFim,
+                local: data.local,
+                tipo: data.tipo as 'presencial' | 'online',
+              }
+            : a
+        )
+      );
+      toast.success(t('toasts.lessonUpdated'));
+    } else {
+      const newAula: Aula = {
+        id: Math.max(...aulas.map((a) => a.id), 0) + 1,
+        titulo: data.titulo,
+        data: new Date(data.data),
+        horaInicio: data.horaInicio,
+        horaFim: data.horaFim,
+        local: data.local,
+        tipo: data.tipo as 'presencial' | 'online',
+      };
+      setAulas((prev) => [...prev, newAula]);
+      toast.success(t('toasts.lessonCreated'));
+    }
+    setAulaSheetOpen(false);
+  });
+
+  const handleSelectEvent = useCallback((event: { resource?: Aula }) => {
+    if (event.resource) {
+      openAulaSheet(event.resource);
+    }
+  }, []);
+
+  const openPresenca = (aula: Aula) => {
+    setSelectedAulaForPresenca(aula);
+    setPresencaList(
+      alunos.map((a) => ({ alunoId: a.id, presente: Math.random() > 0.15 }))
+    );
+    setPresencaSheetOpen(true);
+  };
+
+  const togglePresenca = (alunoId: number) => {
+    setPresencaList((prev) =>
+      prev.map((p) =>
+        p.alunoId === alunoId ? { ...p, presente: !p.presente } : p
+      )
+    );
+  };
+
+  const handleSavePresenca = async () => {
+    setSavingPresenca(true);
+    await new Promise((r) => setTimeout(r, 800));
+    setSavingPresenca(false);
+    setPresencaSheetOpen(false);
+    toast.success(t('toasts.attendanceSaved'));
+  };
+
+  // KPIs
+  const kpis = [
+    {
+      label: t('kpis.enrolledStudents.label'),
+      valor: alunos.length,
+      sub: t('kpis.enrolledStudents.sub', { vagas: turma.vagas }),
+      icon: Users,
+      iconBg: 'bg-orange-100',
+      iconColor: 'text-orange-600',
+    },
+    {
+      label: t('kpis.occupancyRate.label'),
+      valor: `${Math.round((alunos.length / turma.vagas) * 100)}%`,
+      sub:
+        turma.vagas - alunos.length > 0
+          ? t('kpis.occupancyRate.subFree', {
+              count: turma.vagas - alunos.length,
+            })
+          : t('kpis.occupancyRate.subFull'),
+      icon: BarChart3,
+      iconBg: 'bg-muted',
+      iconColor: 'text-foreground',
+    },
+    {
+      label: t('kpis.avgAttendance.label'),
+      valor: `${Math.round(alunos.reduce((a, b) => a + b.presenca, 0) / Math.max(alunos.length, 1))}%`,
+      sub: t('kpis.avgAttendance.sub'),
+      icon: CheckCircle2,
+      iconBg: 'bg-muted',
+      iconColor: 'text-foreground',
+    },
+    {
+      label: t('kpis.completedLessons.label'),
+      valor: aulas.filter((a) => a.data < new Date()).length,
+      sub: t('kpis.completedLessons.sub', { total: aulas.length }),
+      icon: CalendarIcon,
+      iconBg: 'bg-muted',
+      iconColor: 'text-foreground',
+    },
+  ];
+
+  const STATUS_MAP: Record<string, { label: string; color: string }> = {
+    aberta: {
+      label: tClasses('status.aberta'),
+      color: 'bg-blue-100 text-blue-700 border-blue-200',
+    },
+    em_andamento: {
+      label: tClasses('status.em_andamento'),
+      color: 'bg-emerald-100 text-emerald-700 border-emerald-200',
+    },
+    concluida: {
+      label: tClasses('status.concluida'),
+      color: 'bg-gray-100 text-gray-700 border-gray-200',
+    },
+    cancelada: {
+      label: tClasses('status.cancelada'),
+      color: 'bg-red-100 text-red-700 border-red-200',
+    },
+  };
+
+  const fadeUp = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0 },
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title={turma.curso}
+        breadcrumbs={[
+          {
+            label: t('breadcrumbs.home'),
+            href: '/',
+          },
+          {
+            label: t('breadcrumbs.classes'),
+            href: '/lms/classes',
+          },
+          {
+            label: t('breadcrumbs.management'),
+          },
+        ]}
+        actions={
+          <div className="flex items-center gap-2">
+            <div className="flex gap-2">
+              <Button variant="outline" asChild>
+                <Link href={`/lms/courses/${turma.cursoId}`}>
+                  {t('actions.viewCourse')}
+                </Link>
+              </Button>
+            </div>
+            <Button onClick={() => openAulaSheet()} className="gap-2">
+              <Plus className="size-4" /> {t('actions.newLesson')}
+            </Button>
+          </div>
+        }
+      />
+
+      <div>
+        <motion.div
+          initial="hidden"
+          animate="visible"
+          variants={{ visible: { transition: { staggerChildren: 0.05 } } }}
+        >
+          {/* Header */}
+          <motion.div
+            variants={fadeUp}
+            className="mb-3 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+          >
+            <div>
+              <div className="flex flex-wrap items-center gap-2 mb-1">
+                <Badge className={`${STATUS_MAP[turma.status].color} border`}>
+                  {STATUS_MAP[turma.status].label}
+                </Badge>
+              </div>
+              <p className="text-muted-foreground">
+                <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
+                  {turma.codigo}
+                </code>
+                <span className="mx-2">|</span>
+                {turma.professor}
+              </p>
+            </div>
+          </motion.div>
+
+          {/* KPIs */}
+          <motion.div
+            variants={fadeUp}
+            className="mb-6 grid grid-cols-2 gap-4 lg:grid-cols-4"
+          >
+            {loading
+              ? Array.from({ length: 4 }).map((_, i) => (
+                  <Card key={i}>
+                    <CardContent className="p-4">
+                      <Skeleton className="mb-2 h-8 w-16" />
+                      <Skeleton className="h-4 w-28" />
+                    </CardContent>
+                  </Card>
+                ))
+              : kpis.map((kpi, i) => (
+                  <motion.div
+                    key={kpi.label}
+                    initial={{ opacity: 0, y: 12 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: i * 0.07 }}
+                  >
+                    <Card className="overflow-hidden">
+                      <CardContent className="flex items-start justify-between p-5">
+                        <div>
+                          <p className="text-sm text-muted-foreground">
+                            {kpi.label}
+                          </p>
+                          <p className="mt-1 text-3xl font-bold tracking-tight">
+                            {kpi.valor}
+                          </p>
+                          <p className="mt-0.5 text-xs text-muted-foreground">
+                            {kpi.sub}
+                          </p>
+                        </div>
+                        <div
+                          className={`flex size-10 shrink-0 items-center justify-center rounded-lg ${kpi.iconBg}`}
+                        >
+                          <kpi.icon className={`size-5 ${kpi.iconColor}`} />
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </motion.div>
+                ))}
+          </motion.div>
+
+          {/* Info Card */}
+          <motion.div variants={fadeUp} className="mb-6">
+            <Card>
+              <CardContent className="p-5">
+                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                  <div className="flex items-center gap-3">
+                    <div className="flex size-10 items-center justify-center rounded-lg bg-amber-100">
+                      <CalendarIcon className="size-5 text-amber-600" />
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground">
+                        {t('info.period')}
+                      </p>
+                      <p className="text-sm font-medium">
+                        {format(new Date(turma.dataInicio), 'dd/MM/yyyy')} -{' '}
+                        {format(new Date(turma.dataFim), 'dd/MM/yyyy')}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <div className="flex size-10 items-center justify-center rounded-lg bg-purple-100">
+                      <Clock className="size-5 text-purple-600" />
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground">
+                        {t('info.schedule')}
+                      </p>
+                      <p className="text-sm font-medium">{turma.horario}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <div className="flex size-10 items-center justify-center rounded-lg bg-emerald-100">
+                      {turma.tipo === 'online' ? (
+                        <Video className="size-5 text-emerald-600" />
+                      ) : (
+                        <MapPin className="size-5 text-emerald-600" />
+                      )}
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground">
+                        {turma.tipo === 'online'
+                          ? t('info.onlineLabel')
+                          : t('info.locationLabel')}
+                      </p>
+                      {turma.tipo === 'online' ? (
+                        <a
+                          href={turma.local}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-sm font-medium text-blue-600 hover:underline"
+                        >
+                          {t('info.accessRoom')}
+                        </a>
+                      ) : (
+                        <p className="text-sm font-medium">{turma.local}</p>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <div className="flex size-10 items-center justify-center rounded-lg bg-blue-100">
+                      <Monitor className="size-5 text-blue-600" />
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground">
+                        {t('info.modality')}
+                      </p>
+                      <p className="text-sm font-medium capitalize">
+                        {tClasses(`type.${turma.tipo}`)}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+
+          {/* Tabs */}
+          <motion.div variants={fadeUp}>
+            <Tabs
+              value={activeTab}
+              onValueChange={setActiveTab}
+              className="w-full"
+            >
+              <TabsList className="mb-4 w-full justify-start overflow-x-auto">
+                <TabsTrigger value="alunos" className="gap-2">
+                  <Users className="size-4" />
+                  {t('tabs.students')}
+                </TabsTrigger>
+                <TabsTrigger value="calendario" className="gap-2">
+                  <CalendarIcon className="size-4" />
+                  {t('tabs.calendar')}
+                </TabsTrigger>
+                <TabsTrigger value="presenca" className="gap-2">
+                  <CheckCircle2 className="size-4" />
+                  {t('tabs.attendance')}
+                </TabsTrigger>
+              </TabsList>
+
+              {/* ── Tab Alunos ────────────────────────────────────────────────── */}
+              <TabsContent value="alunos" className="mt-0">
+                {/* Actions bar */}
+                <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                  <div className="relative flex-1 max-w-md">
+                    <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                    <Input
+                      placeholder={t('students.searchPlaceholder')}
+                      value={alunoSearch}
+                      onChange={(e) => setAlunoSearch(e.target.value)}
+                      className="pl-9"
+                    />
+                  </div>
+                  <div className="flex gap-2">
+                    {selectedAlunos.length > 0 && (
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        className="gap-2"
+                        onClick={handleRemoveSelectedAlunos}
+                      >
+                        <UserMinus className="size-4" />
+                        {t('students.actions.removeSelected', {
+                          count: selectedAlunos.length,
+                        })}
+                      </Button>
+                    )}
+                    <Button
+                      size="sm"
+                      className="gap-2"
+                      onClick={() => setAddAlunoDialogOpen(true)}
+                    >
+                      <UserPlus className="size-4" />
+                      {t('students.actions.addStudent')}
+                    </Button>
+                  </div>
+                </div>
+
+                {/* Selection info */}
+                {selectedAlunos.length > 0 && (
+                  <div className="mb-4 flex items-center gap-3 rounded-lg border bg-muted/50 px-4 py-2 text-sm">
+                    <Checkbox
+                      checked={selectedAlunos.length === filteredAlunos.length}
+                      onCheckedChange={(checked) =>
+                        setSelectedAlunos(
+                          checked ? filteredAlunos.map((a) => a.id) : []
+                        )
+                      }
+                    />
+                    <span>
+                      {t('students.selectedCount', {
+                        count: selectedAlunos.length,
+                      })}
+                    </span>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setSelectedAlunos([])}
+                    >
+                      {t('students.actions.clearSelection')}
+                    </Button>
+                  </div>
+                )}
+
+                {/* Alunos grid */}
+                {loading ? (
+                  <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                    {Array.from({ length: 6 }).map((_, i) => (
+                      <Card key={i}>
+                        <CardContent className="p-4">
+                          <Skeleton className="mb-2 h-12 w-12 rounded-full" />
+                          <Skeleton className="h-4 w-32" />
+                          <Skeleton className="mt-1 h-3 w-24" />
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+                ) : filteredAlunos.length === 0 ? (
+                  <Card>
+                    <CardContent className="flex flex-col items-center justify-center py-12 text-center">
+                      <Users className="mb-4 size-12 text-muted-foreground/50" />
+                      <p className="text-muted-foreground">
+                        {alunoSearch
+                          ? t('students.empty.notFound')
+                          : t('students.empty.notEnrolled')}
+                      </p>
+                    </CardContent>
+                  </Card>
+                ) : (
+                  <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                    {filteredAlunos.map((aluno) => {
+                      const isSelected = selectedAlunos.includes(aluno.id);
+                      return (
+                        <Card
+                          key={aluno.id}
+                          className={`group cursor-pointer transition-all hover:shadow-md ${isSelected ? 'ring-2 ring-primary' : ''}`}
+                          onClick={(e) => toggleSelectAluno(aluno.id, e)}
+                        >
+                          <CardContent className="p-4">
+                            <div className="flex items-start gap-3">
+                              <div className="relative">
+                                <Avatar className="size-12">
+                                  <AvatarImage src={aluno.avatar} />
+                                  <AvatarFallback className="bg-gradient-to-br from-blue-100 to-blue-200 text-blue-700 font-medium">
+                                    {aluno.nome
+                                      .split(' ')
+                                      .map((n) => n[0])
+                                      .join('')
+                                      .slice(0, 2)}
+                                  </AvatarFallback>
+                                </Avatar>
+                                {isSelected && (
+                                  <div className="absolute -right-1 -top-1 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground">
+                                    <Check className="size-3" />
+                                  </div>
+                                )}
+                              </div>
+                              <div className="flex-1 min-w-0">
+                                <div className="flex items-start justify-between gap-2">
+                                  <div>
+                                    <h4 className="font-semibold truncate">
+                                      {aluno.nome}
+                                    </h4>
+                                    <p className="text-xs text-muted-foreground truncate">
+                                      {aluno.email}
+                                    </p>
+                                  </div>
+                                  <DropdownMenu>
+                                    <DropdownMenuTrigger asChild>
+                                      <Button
+                                        variant="ghost"
+                                        size="icon"
+                                        className="size-8"
+                                        onClick={(e) => e.stopPropagation()}
+                                      >
+                                        <MoreHorizontal className="size-4" />
+                                      </Button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent align="end">
+                                      <DropdownMenuItem>
+                                        <Eye className="mr-2 size-4" />
+                                        {t('students.menu.viewProfile')}
+                                      </DropdownMenuItem>
+                                      <DropdownMenuItem>
+                                        <Mail className="mr-2 size-4" />
+                                        {t('students.menu.sendEmail')}
+                                      </DropdownMenuItem>
+                                      <DropdownMenuSeparator />
+                                      <DropdownMenuItem
+                                        className="text-destructive"
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          setAlunoToRemove(aluno);
+                                          setRemoveAlunoDialogOpen(true);
+                                        }}
+                                      >
+                                        <UserMinus className="mr-2 size-4" />
+                                        {t('students.menu.removeFromClass')}
+                                      </DropdownMenuItem>
+                                    </DropdownMenuContent>
+                                  </DropdownMenu>
+                                </div>
+                              </div>
+                            </div>
+                            <div className="mt-4 grid grid-cols-2 gap-2">
+                              <div className="rounded-lg bg-muted/50 p-2 text-center">
+                                <p className="text-lg font-bold text-blue-600">
+                                  {aluno.progresso}%
+                                </p>
+                                <p className="text-[10px] text-muted-foreground">
+                                  {t('students.progress')}
+                                </p>
+                              </div>
+                              <div className="rounded-lg bg-muted/50 p-2 text-center">
+                                <p
+                                  className={`text-lg font-bold ${aluno.presenca >= 75 ? 'text-emerald-600' : aluno.presenca >= 50 ? 'text-amber-600' : 'text-red-600'}`}
+                                >
+                                  {aluno.presenca}%
+                                </p>
+                                <p className="text-[10px] text-muted-foreground">
+                                  {t('students.attendance')}
+                                </p>
+                              </div>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      );
+                    })}
+                  </div>
+                )}
+              </TabsContent>
+
+              {/* ── Tab Calendario ────────────────────────────────────────────── */}
+              <TabsContent value="calendario" className="mt-0">
+                <div className="mb-4 flex items-center justify-between">
+                  <p className="text-sm text-muted-foreground">
+                    {t('calendar.helper')}
+                  </p>
+                  <Button
+                    size="sm"
+                    className="gap-2"
+                    onClick={() => openAulaSheet()}
+                  >
+                    <Plus className="size-4" />
+                    {t('actions.newLesson')}
+                  </Button>
+                </div>
+                <Card>
+                  <CardContent className="p-4">
+                    <div className="h-[600px]">
+                      <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}
+                        onSelectEvent={handleSelectEvent}
+                        culture={calendarCulture}
+                        popup
+                        selectable
+                        style={{ height: '100%' }}
+                      />
+                    </div>
+                  </CardContent>
+                </Card>
+              </TabsContent>
+
+              {/* ── Tab Presenca ──────────────────────────────────────────────── */}
+              <TabsContent value="presenca" className="mt-0">
+                <p className="mb-4 text-sm text-muted-foreground">
+                  {t('attendance.helper')}
+                </p>
+                <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+                  {loading
+                    ? Array.from({ length: 6 }).map((_, i) => (
+                        <Card key={i}>
+                          <CardContent className="p-4">
+                            <Skeleton className="h-20" />
+                          </CardContent>
+                        </Card>
+                      ))
+                    : aulas
+                        .filter((a) => a.data <= new Date())
+                        .slice(-12)
+                        .reverse()
+                        .map((aula) => (
+                          <Card
+                            key={aula.id}
+                            className="cursor-pointer transition-all hover:shadow-md hover:-translate-y-0.5"
+                            onClick={() => openPresenca(aula)}
+                          >
+                            <CardContent className="p-4">
+                              <div className="flex items-start justify-between gap-2">
+                                <div>
+                                  <h4 className="font-semibold">
+                                    {aula.titulo}
+                                  </h4>
+                                  <p className="text-xs text-muted-foreground">
+                                    {format(aula.data, 'EEEE, dd/MM', {
+                                      locale: dateLocale,
+                                    })}
+                                  </p>
+                                </div>
+                                <Badge
+                                  variant={
+                                    aula.tipo === 'online'
+                                      ? 'secondary'
+                                      : 'outline'
+                                  }
+                                  className="text-[10px]"
+                                >
+                                  {aula.tipo === 'online' ? (
+                                    <Video className="mr-1 size-3" />
+                                  ) : (
+                                    <MapPin className="mr-1 size-3" />
+                                  )}
+                                  {tClasses(`type.${aula.tipo}`)}
+                                </Badge>
+                              </div>
+                              <div className="mt-3 flex items-center justify-between text-sm">
+                                <span className="text-muted-foreground">
+                                  {aula.horaInicio} - {aula.horaFim}
+                                </span>
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  className="h-7 gap-1 text-xs"
+                                >
+                                  <CheckCircle2 className="size-3" />
+                                  {t('attendance.register')}
+                                </Button>
+                              </div>
+                            </CardContent>
+                          </Card>
+                        ))}
+                </div>
+              </TabsContent>
+            </Tabs>
+          </motion.div>
+        </motion.div>
+      </div>
+
+      {/* ── Dialog Adicionar Alunos ──────────────────────────────────────────── */}
+      <Dialog open={addAlunoDialogOpen} onOpenChange={setAddAlunoDialogOpen}>
+        <DialogContent className=" max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>{t('dialogs.addStudents.title')}</DialogTitle>
+            <DialogDescription>
+              {t('dialogs.addStudents.description')}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-2 max-h-64 overflow-y-auto py-2">
+            {ALUNOS_DISPONIVEIS.map((aluno) => (
+              <div
+                key={aluno.id}
+                className="flex items-center gap-3 rounded-lg border p-3 hover:bg-muted/50 cursor-pointer"
+                onClick={() =>
+                  setAlunosToAdd((prev) =>
+                    prev.includes(aluno.id)
+                      ? prev.filter((x) => x !== aluno.id)
+                      : [...prev, aluno.id]
+                  )
+                }
+              >
+                <Checkbox checked={alunosToAdd.includes(aluno.id)} />
+                <Avatar className="size-9">
+                  <AvatarFallback className="text-xs">
+                    {aluno.nome
+                      .split(' ')
+                      .map((n) => n[0])
+                      .join('')
+                      .slice(0, 2)}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium truncate">{aluno.nome}</p>
+                  <p className="text-xs text-muted-foreground truncate">
+                    {aluno.email}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setAddAlunoDialogOpen(false);
+                setAlunosToAdd([]);
+              }}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button
+              onClick={handleAddAlunos}
+              disabled={alunosToAdd.length === 0}
+            >
+              {t('dialogs.addStudents.confirm')}{' '}
+              {alunosToAdd.length > 0 && `(${alunosToAdd.length})`}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── Dialog Remover Aluno ─────────────────────────────────────────────── */}
+      <Dialog
+        open={removeAlunoDialogOpen}
+        onOpenChange={setRemoveAlunoDialogOpen}
+      >
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="size-5 text-destructive" />
+              {t('dialogs.removeStudent.title')}
+            </DialogTitle>
+            <DialogDescription>
+              {t('dialogs.removeStudent.descriptionPrefix')}{' '}
+              <strong>{alunoToRemove?.nome}</strong>{' '}
+              {t('dialogs.removeStudent.descriptionSuffix')}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setRemoveAlunoDialogOpen(false);
+                setAlunoToRemove(null);
+              }}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button variant="destructive" onClick={handleRemoveAluno}>
+              {t('common.remove')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── Sheet Aula ───────────────────────────────────────────────────────── */}
+      <Sheet open={aulaSheetOpen} onOpenChange={setAulaSheetOpen}>
+        <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+          <SheetHeader>
+            <SheetTitle>
+              {editingAula
+                ? t('sheet.lessonForm.titleEdit')
+                : t('sheet.lessonForm.titleCreate')}
+            </SheetTitle>
+            <SheetDescription>
+              {editingAula
+                ? t('sheet.lessonForm.descriptionEdit')
+                : t('sheet.lessonForm.descriptionCreate')}
+            </SheetDescription>
+          </SheetHeader>
+          <form onSubmit={handleSaveAula} className="mt-6 space-y-5 px-4">
+            <Field>
+              <FieldLabel>{t('sheet.lessonForm.fields.title')}</FieldLabel>
+              <Input
+                {...aulaForm.register('titulo')}
+                placeholder={t('sheet.lessonForm.fields.titlePlaceholder')}
+              />
+              {aulaForm.formState.errors.titulo && (
+                <FieldError>
+                  {aulaForm.formState.errors.titulo.message}
+                </FieldError>
+              )}
+            </Field>
+
+            <div className="grid grid-cols-2 gap-4">
+              <Field>
+                <FieldLabel>{t('sheet.lessonForm.fields.date')}</FieldLabel>
+                <Input type="date" {...aulaForm.register('data')} />
+                {aulaForm.formState.errors.data && (
+                  <FieldError>
+                    {aulaForm.formState.errors.data.message}
+                  </FieldError>
+                )}
+              </Field>
+              <Field>
+                <FieldLabel>{t('sheet.lessonForm.fields.type')}</FieldLabel>
+                <Controller
+                  name="tipo"
+                  control={aulaForm.control}
+                  render={({ field }) => (
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <SelectTrigger>
+                        <SelectValue
+                          placeholder={t('sheet.lessonForm.fields.select')}
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="online">
+                          {tClasses('type.online')}
+                        </SelectItem>
+                        <SelectItem value="presencial">
+                          {tClasses('type.presencial')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+              </Field>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <Field>
+                <FieldLabel>
+                  {t('sheet.lessonForm.fields.startTime')}
+                </FieldLabel>
+                <Input type="time" {...aulaForm.register('horaInicio')} />
+              </Field>
+              <Field>
+                <FieldLabel>{t('sheet.lessonForm.fields.endTime')}</FieldLabel>
+                <Input type="time" {...aulaForm.register('horaFim')} />
+              </Field>
+            </div>
+
+            <Field>
+              <FieldLabel>{t('sheet.lessonForm.fields.location')}</FieldLabel>
+              <Input
+                {...aulaForm.register('local')}
+                placeholder={t('sheet.lessonForm.fields.locationPlaceholder')}
+              />
+              {aulaForm.formState.errors.local && (
+                <FieldError>
+                  {aulaForm.formState.errors.local.message}
+                </FieldError>
+              )}
+            </Field>
+
+            <SheetFooter className="mt-6 px-0">
+              <Button type="submit">
+                {editingAula
+                  ? t('sheet.lessonForm.actions.save')
+                  : t('sheet.lessonForm.actions.create')}
+              </Button>
+            </SheetFooter>
+          </form>
+        </SheetContent>
+      </Sheet>
+
+      {/* ── Sheet Presenca ───────────────────────────────────────────────────── */}
+      <Sheet open={presencaSheetOpen} onOpenChange={setPresencaSheetOpen}>
+        <SheetContent className="w-full sm:max-w-xl overflow-y-auto">
+          <SheetHeader>
+            <SheetTitle>{t('sheet.attendance.title')}</SheetTitle>
+            <SheetDescription>
+              {selectedAulaForPresenca && (
+                <>
+                  <strong>{selectedAulaForPresenca.titulo}</strong> -{' '}
+                  {format(selectedAulaForPresenca.data, 'dd/MM/yyyy')}
+                </>
+              )}
+            </SheetDescription>
+          </SheetHeader>
+
+          <div className="mt-6 space-y-2 px-4">
+            <div className="flex items-center justify-between text-sm text-muted-foreground mb-3">
+              <span>
+                {t('sheet.attendance.summary', {
+                  present: presencaList.filter((p) => p.presente).length,
+                  total: presencaList.length,
+                })}
+              </span>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() =>
+                    setPresencaList((prev) =>
+                      prev.map((p) => ({ ...p, presente: true }))
+                    )
+                  }
+                >
+                  {t('sheet.attendance.allPresent')}
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() =>
+                    setPresencaList((prev) =>
+                      prev.map((p) => ({ ...p, presente: false }))
+                    )
+                  }
+                >
+                  {t('sheet.attendance.allAbsent')}
+                </Button>
+              </div>
+            </div>
+
+            {alunos.map((aluno) => {
+              const presenca = presencaList.find((p) => p.alunoId === aluno.id);
+              if (!presenca) return null;
+              return (
+                <div
+                  key={aluno.id}
+                  className={`flex items-center justify-between rounded-lg border p-3 transition-colors ${presenca.presente ? 'bg-emerald-50/50 border-emerald-200' : 'bg-red-50/50 border-red-200'}`}
+                >
+                  <div className="flex items-center gap-3">
+                    <Avatar className="size-9">
+                      <AvatarFallback className="text-xs">
+                        {aluno.nome
+                          .split(' ')
+                          .map((n) => n[0])
+                          .join('')
+                          .slice(0, 2)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <span className="font-medium">{aluno.nome}</span>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span
+                      className={`text-sm font-medium ${presenca.presente ? 'text-emerald-600' : 'text-red-600'}`}
+                    >
+                      {presenca.presente
+                        ? t('sheet.attendance.present')
+                        : t('sheet.attendance.absent')}
+                    </span>
+                    <Switch
+                      checked={presenca.presente}
+                      onCheckedChange={() => togglePresenca(aluno.id)}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <SheetFooter className="mt-6">
+            <Button
+              onClick={handleSavePresenca}
+              disabled={savingPresenca}
+              className="gap-2"
+            >
+              {savingPresenca ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                <Save className="size-4" />
+              )}
+              {t('sheet.attendance.save')}
+            </Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    </Page>
+  );
+}