@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -1,11 +1,21 @@
 'use client';
 
-import { EmptyState, Page, PageHeader } from '@/components/entity-list';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { LmsClassCalendar } from '@/app/(app)/(libraries)/lms/_components/lms-class-calendar';
+import { CopyButton } from '@/components/copy-button';
+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 } from '@/components/ui/card';
 import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
 import {
   Dialog,
   DialogContent,
@@ -22,7 +32,21 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Field, FieldError, FieldLabel } from '@/components/ui/field';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
 import {
   Select,
   SelectContent,
@@ -40,9 +64,31 @@ import {
 } from '@/components/ui/sheet';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { addDays, format, getDay, setHours, setMinutes } from 'date-fns';
+import {
+  addMonths,
+  eachDayOfInterval,
+  endOfMonth,
+  endOfWeek,
+  format,
+  isSameDay,
+  isSameMonth,
+  setHours,
+  setMinutes,
+  startOfMonth,
+  startOfWeek,
+} from 'date-fns';
 import { enUS, ptBR } from 'date-fns/locale';
 import { motion } from 'framer-motion';
 import {
@@ -51,13 +97,16 @@ import {
   Calendar as CalendarIcon,
   Check,
   CheckCircle2,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
   Clock,
   Eye,
   Loader2,
-  Mail,
   MapPin,
   Monitor,
   MoreHorizontal,
+  Pencil,
   Plus,
   Save,
   Search,
@@ -67,175 +116,464 @@ import {
   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 {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
+import { ClassFormSheet } from '../../_components/class-form-sheet';
+import { CreateLmsPersonSheet } from '../../_components/create-lms-person-sheet';
+import { CreateLmsStudentPersonSheet } from '../../_components/create-lms-student-person-sheet';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
 interface Aluno {
   id: number;
+  enrollmentId: number;
   nome: string;
   email: string;
   telefone: string;
-  avatar?: string;
   matriculadoEm: string;
   progresso: number;
-  presenca: number;
+  status: string;
 }
 
 interface Aula {
   id: number;
   titulo: string;
-  data: Date;
+  data: string; // ISO date string from API
   horaInicio: string;
   horaFim: string;
   local: string;
+  meetingUrl: string;
   tipo: 'presencial' | 'online';
+  status: string;
+  instructorId?: number | null;
+  instructorName?: string;
+  recurrence?: {
+    frequency: 'daily' | 'weekly' | 'monthly' | 'yearly';
+    interval: number;
+    until: string;
+    daysOfWeek?: Array<'MO' | 'TU' | 'WE' | 'TH' | 'FR' | 'SA' | 'SU'>;
+  } | null;
+  recurrenceId?: string | null;
+  occurrenceIndex?: number | null;
+  isException?: boolean;
+  isRecurring?: boolean;
+  cor?: string | null;
+  color?: string | null;
+}
+
+type SessionRecurrenceFrequency =
+  | 'none'
+  | 'daily'
+  | 'weekly'
+  | 'monthly'
+  | 'yearly';
+
+type SessionRecurrenceDay = 'MO' | 'TU' | 'WE' | 'TH' | 'FR' | 'SA' | 'SU';
+
+interface InstructorOption {
+  id: number;
+  name: string;
+  personId?: number;
+  qualificationSlugs?: string[];
+}
+
+type InstructorApiRow = {
+  id?: number | string;
+  instructor_id?: number | string;
+  value?: number | string;
+  name?: string;
+  nome?: string;
+  full_name?: string;
+  label?: string;
+  personId?: number | string;
+  person_id?: number | string;
+  qualificationSlugs?: string[];
+};
+
+interface Person {
+  id: number;
+  nome: string;
+  email: string;
+  isInstructor?: boolean;
+  canTeachCourses?: boolean;
+  isStudentByEnrollment?: boolean;
 }
 
 interface PresencaItem {
   alunoId: number;
+  selecionado: boolean;
   presente: boolean;
 }
 
-// ── Calendar Localizer ────────────────────────────────────────────────────────
+interface OpenAulaSheetOptions {
+  initialTab?: 'aulas' | 'chamada';
+  prefill?: Partial<AulaForm>;
+  attendance?: PresencaItem[];
+}
 
-const locales = { 'pt-BR': ptBR, 'en-US': enUS };
-const localizer = dateFnsLocalizer({
-  format,
-  parse: (str: string) => new Date(str),
-  startOfWeek: () => 0,
-  getDay,
-  locales,
-});
+interface StudentProfile {
+  id: number;
+  enrollmentId: number;
+  nome: string;
+  email: string;
+  telefone: string;
+  matriculadoEm: string;
+  progresso: number;
+  status: string;
+}
+
+function getErrorMessage(error: unknown) {
+  if (error instanceof Error && error.message) {
+    return error.message;
+  }
+
+  if (typeof error === 'object' && error && 'message' in error) {
+    const message = (error as { message?: unknown }).message;
+    if (typeof message === 'string' && message.trim()) {
+      return message;
+    }
+  }
+
+  return null;
+}
+
+function getPersonInitials(name: string) {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .map((part) => part[0]?.toUpperCase() ?? '')
+    .slice(0, 2)
+    .join('');
+}
+
+function getSessionStartDate(aula: Aula) {
+  const date = parseSessionDate(aula.data);
+  const [hour = 0, minute = 0] = aula.horaInicio.split(':').map(Number);
+
+  return setMinutes(setHours(date, hour), minute);
+}
+
+function getSessionEndDate(aula: Aula) {
+  const date = parseSessionDate(aula.data);
+  const [hour = 0, minute = 0] = aula.horaFim.split(':').map(Number);
+
+  return setMinutes(setHours(date, hour), minute);
+}
+
+function DetailMetaItem({
+  icon,
+  label,
+  value,
+  action,
+}: {
+  icon: ReactNode;
+  label: string;
+  value: ReactNode;
+  action?: ReactNode;
+}) {
+  return (
+    <div className="rounded-xl border border-border/70 bg-background/70 px-3 py-2.5">
+      <div className="mb-1.5 flex items-center gap-2">
+        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-muted/50 text-muted-foreground">
+          {icon}
+        </div>
+        <span className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+          {label}
+        </span>
+      </div>
+      <div className="flex items-center justify-between gap-3">
+        <div className="min-w-0 text-sm font-medium text-foreground">
+          {value}
+        </div>
+        {action}
+      </div>
+    </div>
+  );
+}
+
+function OperationalSidebarCard({
+  title,
+  children,
+  className,
+}: {
+  title: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <Card className={cn('overflow-hidden border-border/70 py-0', className)}>
+      <CardContent className="space-y-3 p-4">
+        <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+          {title}
+        </div>
+        {children}
+      </CardContent>
+    </Card>
+  );
+}
+
+type ClassDetail = {
+  id: number;
+  code?: string;
+  codigo?: string;
+  courseId?: number;
+  cursoId?: number;
+  courseTitle?: string;
+  curso?: string;
+  status?: string;
+  capacity?: number;
+  startDate?: string;
+  dataInicio?: string;
+  endDate?: string;
+  dataFim?: string;
+  startTime?: string;
+  endTime?: string;
+  horario?: string;
+  deliveryMode?: 'presential' | 'online' | 'hybrid';
+  tipo?: 'presencial' | 'online' | 'hibrida';
+  virtualRoomUrl?: string;
+  local?: string;
+  location?: string;
+};
+
+type AttendanceRecord = {
+  student_id: number;
+  present: boolean;
+};
+
+type Locale = {
+  id?: number;
+  code: string;
+  name: string;
+};
+
+const EMPTY_AULAS: Aula[] = [];
+
+const SESSION_RECURRENCE_FREQUENCIES = [
+  'none',
+  'daily',
+  'weekly',
+  'monthly',
+  'yearly',
+] as const;
+
+const SESSION_RECURRENCE_DAYS = [
+  'MO',
+  'TU',
+  'WE',
+  'TH',
+  'FR',
+  'SA',
+  'SU',
+] as const;
+
+const SESSION_COLOR_PALETTE = [
+  '#3b82f6',
+  '#22c55e',
+  '#f59e0b',
+  '#ef4444',
+  '#8b5cf6',
+  '#06b6d4',
+  '#f97316',
+  '#64748b',
+] as const;
+
+const SESSION_DEFAULT_COLOR = SESSION_COLOR_PALETTE[0];
+
+const getAulaDisplayColor = (aula?: {
+  cor?: string | null;
+  color?: string | null;
+  tipo?: 'presencial' | 'online';
+}) => {
+  if (aula?.cor) return aula.cor;
+  if (aula?.color) return aula.color;
+
+  return aula?.tipo === 'presencial' ? '#3b82f6' : '#22c55e';
+};
+
+const RECURRENCE_DAY_LABELS: Array<{
+  value: SessionRecurrenceDay;
+  labelKey: string;
+}> = [
+  { value: 'MO', labelKey: 'sheet.lessonForm.recurrence.days.monday' },
+  { value: 'TU', labelKey: 'sheet.lessonForm.recurrence.days.tuesday' },
+  { value: 'WE', labelKey: 'sheet.lessonForm.recurrence.days.wednesday' },
+  { value: 'TH', labelKey: 'sheet.lessonForm.recurrence.days.thursday' },
+  { value: 'FR', labelKey: 'sheet.lessonForm.recurrence.days.friday' },
+  { value: 'SA', labelKey: 'sheet.lessonForm.recurrence.days.saturday' },
+  { value: 'SU', labelKey: 'sheet.lessonForm.recurrence.days.sunday' },
+];
+
+const parseSessionDate = (value: string) => {
+  const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(value ?? '');
+
+  if (match) {
+    const year = Number(match[1]);
+    const month = Number(match[2]);
+    const day = Number(match[3]);
+
+    if (
+      Number.isFinite(year) &&
+      Number.isFinite(month) &&
+      Number.isFinite(day)
+    ) {
+      return new Date(year, month - 1, day, 12, 0, 0, 0);
+    }
+  }
+
+  return new Date(value);
+};
+
+const toSessionInputDate = (value: string) => {
+  const date = parseSessionDate(value);
+  return format(date, 'yyyy-MM-dd');
+};
+
+const getDayCodeFromDate = (value: string): SessionRecurrenceDay => {
+  const day = parseSessionDate(value).getDay();
+  return ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'][
+    day
+  ] as SessionRecurrenceDay;
+};
+
+const buildSessionRecurrence = (data: {
+  data: string;
+  recurrenceFrequency: SessionRecurrenceFrequency;
+  recurrenceUntil?: string;
+  recurrenceDaysOfWeek?: SessionRecurrenceDay[];
+}) => {
+  if (data.recurrenceFrequency === 'none') {
+    return undefined;
+  }
+
+  return {
+    frequency: data.recurrenceFrequency,
+    interval: 1,
+    until: data.recurrenceUntil,
+    ...(data.recurrenceFrequency === 'weekly'
+      ? {
+          daysOfWeek:
+            data.recurrenceDaysOfWeek && data.recurrenceDaysOfWeek.length > 0
+              ? data.recurrenceDaysOfWeek
+              : [getDayCodeFromDate(data.data)],
+        }
+      : {}),
+  };
+};
+
+function normalizeInstructorOption(
+  item: InstructorApiRow
+): InstructorOption | null {
+  const id = Number(item?.id ?? item?.instructor_id ?? item?.value ?? 0);
+  const name = String(
+    item?.name ?? item?.nome ?? item?.full_name ?? item?.label ?? ''
+  ).trim();
+
+  if (!id || !name) {
+    return null;
+  }
+
+  return {
+    id,
+    name,
+    personId: Number(item?.personId ?? item?.person_id ?? 0) || undefined,
+    qualificationSlugs: Array.isArray(item?.qualificationSlugs)
+      ? item.qualificationSlugs
+      : undefined,
+  };
+}
 
 // ── 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')),
+      instrutorId: z.string().optional(),
+      recurrenceFrequency: z
+        .enum(SESSION_RECURRENCE_FREQUENCIES)
+        .default('none'),
+      recurrenceUntil: z.string().optional(),
+      recurrenceDaysOfWeek: z
+        .array(z.enum(SESSION_RECURRENCE_DAYS))
+        .default([]),
+      cor: z
+        .string()
+        .regex(
+          /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/,
+          t('sheet.lessonForm.validation.colorInvalid')
+        )
+        .default(SESSION_DEFAULT_COLOR),
+      applyScope: z.enum(['single', 'series']).default('single'),
+    })
+    .superRefine((values, context) => {
+      if (values.recurrenceFrequency === 'none') {
+        return;
+      }
+
+      if (!values.recurrenceUntil) {
+        context.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: t('sheet.lessonForm.validation.recurrenceUntilRequired'),
+          path: ['recurrenceUntil'],
+        });
+        return;
+      }
+
+      if (values.recurrenceUntil < values.data) {
+        context.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: t('sheet.lessonForm.validation.recurrenceUntilAfterStart'),
+          path: ['recurrenceUntil'],
+        });
+      }
+    });
+
+const getStudentSchema = (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
+    name: z.string().trim().min(3, t('dialogs.studentValidation.nameMin')),
+    email: z
       .string()
-      .min(1, t('sheet.lessonForm.validation.startTimeRequired')),
-    horaFim: z
+      .trim()
+      .max(255)
+      .refine(
+        (value) => !value || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
+        t('dialogs.studentValidation.emailInvalid')
+      ),
+    phone: 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')),
+      .trim()
+      .max(50)
+      .refine(
+        (value) => !value || /^[0-9+()\s-]{8,20}$/.test(value),
+        t('dialogs.studentValidation.phoneInvalid')
+      ),
   });
 
 type AulaForm = z.infer<ReturnType<typeof getAulaSchema>>;
+type StudentForm = z.infer<ReturnType<typeof getStudentSchema>>;
 
-// ── 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;
-    const titulo = titulos[aulas.length % titulos.length]!;
-    aulas.push({
-      id: aulas.length + 1,
-      titulo,
-      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' },
-];
+// (mock data removed – all data comes from the API)
 
 // ── Main Component ────────────────────────────────────────────────────────────
 
@@ -247,7 +585,6 @@ export default function TurmaDetalhePage() {
   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'),
@@ -264,38 +601,196 @@ export default function TurmaDetalhePage() {
     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[]>([]);
+  // ── API ───────────────────────────────────────────────────────────────────
+  const { request } = useApp();
+
+  const {
+    data: turma,
+    isLoading: loadingTurma,
+    refetch: refetchTurma,
+  } = useQuery<ClassDetail>({
+    queryKey: ['lms-class', id],
+    queryFn: async () => {
+      const res = await request<ClassDetail>({
+        url: `/lms/classes/${id}`,
+        method: 'GET',
+      });
+      return res.data;
+    },
+    enabled: !!id,
+  });
+
+  const {
+    data: alunos = [],
+    isLoading: loadingAlunos,
+    refetch: refetchAlunos,
+  } = useQuery<Aluno[]>({
+    queryKey: ['lms-class-students', id],
+    queryFn: async () => {
+      const res = await request<Aluno[]>({
+        url: `/lms/classes/${id}/students`,
+        method: 'GET',
+      });
+      return res.data;
+    },
+    enabled: !!id,
+  });
+
+  const {
+    data: aulasQuery = EMPTY_AULAS,
+    isLoading: loadingAulas,
+    refetch: refetchAulas,
+  } = useQuery<Aula[]>({
+    queryKey: ['lms-class-sessions', id],
+    queryFn: async () => {
+      const res = await request<Aula[]>({
+        url: `/lms/classes/${id}/sessions`,
+        method: 'GET',
+      });
+      return res.data;
+    },
+    enabled: !!id,
+  });
+
+  const loading = loadingTurma || loadingAlunos || loadingAulas;
 
-  // Tabs
+  // ── Edit sheet state ──────────────────────────────────────────────────────
+  const [editSheetOpen, setEditSheetOpen] = useState(false);
+
+  // ── Tab state ─────────────────────────────────────────────────────────────
   const [activeTab, setActiveTab] = useState('alunos');
+  const [calendarViewMode, setCalendarViewMode] = useState<
+    'single' | 'quarter' | 'year' | 'list'
+  >('single');
+  const [calendarViewDate, setCalendarViewDate] = useState(() => new Date());
 
-  // Alunos
+  // ── Students state ────────────────────────────────────────────────────────
   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[]>([]);
+  const [pessoaSearch, setPessoaSearch] = useState('');
+  const [studentPickerOpen, setStudentPickerOpen] = useState(false);
+  const [studentPickerResults, setStudentPickerResults] = useState<Person[]>(
+    []
+  );
+  const [selectedPessoas, setSelectedPessoas] = useState<number[]>([]);
+  const [savingStudents, setSavingStudents] = useState(false);
+  const [removingStudent, setRemovingStudent] = useState(false);
+  const [createStudentDialogOpen, setCreateStudentDialogOpen] = useState(false);
+  const [studentProfileDialogOpen, setStudentProfileDialogOpen] =
+    useState(false);
+  const [editStudentSheetOpen, setEditStudentSheetOpen] = useState(false);
+  const [selectedStudentProfile, setSelectedStudentProfile] =
+    useState<StudentProfile | null>(null);
+  const [loadingStudentProfile, setLoadingStudentProfile] = useState(false);
+  const [savingStudentProfile, setSavingStudentProfile] = useState(false);
+
+  const { data: pessoasDisponiveis = [], isLoading: searchingPessoas } =
+    useQuery<Person[]>({
+      queryKey: ['lms-people-search', id, pessoaSearch],
+      queryFn: async () => {
+        const res = await request<Person[]>({
+          url: `/lms/classes/${id}/people/search`,
+          method: 'GET',
+          params: { q: pessoaSearch },
+        });
+        return res.data;
+      },
+      enabled: studentPickerOpen,
+      placeholderData: (previous) => previous ?? [],
+    });
 
-  // Calendario
-  const [calendarView, setCalendarView] = useState<View>('month');
-  const [calendarDate, setCalendarDate] = useState(new Date());
+  // ── Calendar state ────────────────────────────────────────────────────────
   const [aulaSheetOpen, setAulaSheetOpen] = useState(false);
+  const [aulaSheetTab, setAulaSheetTab] = useState<'aulas' | 'chamada'>(
+    'aulas'
+  );
   const [editingAula, setEditingAula] = useState<Aula | null>(null);
-  const [selectedAulaForPresenca, setSelectedAulaForPresenca] =
-    useState<Aula | null>(null);
+  const [savingAula, setSavingAula] = useState(false);
+  const [instructorOpen, setInstructorOpen] = useState(false);
+  const [instructorSearch, setInstructorSearch] = useState('');
+  const [createInstructorDialogOpen, setCreateInstructorDialogOpen] =
+    useState(false);
+
+  const {
+    data: instructorOptions = [],
+    isFetching: loadingInstructors,
+    refetch: refetchInstructorOptions,
+  } = useQuery<InstructorOption[]>({
+    queryKey: ['lms-class-session-instructors', id, instructorSearch],
+    queryFn: async () => {
+      const response = await request<
+        | InstructorApiRow[]
+        | {
+            data?: InstructorApiRow[];
+            items?: InstructorApiRow[];
+            rows?: InstructorApiRow[];
+          }
+      >({
+        url: '/lms/instructors',
+        method: 'GET',
+        params: {
+          page: 1,
+          pageSize: 100,
+          qualificationSlugs: ['class-sessions'],
+          ...(instructorSearch.trim()
+            ? { search: instructorSearch.trim() }
+            : {}),
+        },
+      });
+
+      const payload = response.data;
+      const rows = Array.isArray(payload)
+        ? payload
+        : Array.isArray(payload?.data)
+          ? payload.data
+          : Array.isArray(payload?.items)
+            ? payload.items
+            : Array.isArray(payload?.rows)
+              ? payload.rows
+              : [];
+
+      const unique = new Map<number, InstructorOption>();
+
+      for (const row of rows) {
+        const normalized = normalizeInstructorOption(row);
+        if (!normalized) continue;
+        unique.set(normalized.id, normalized);
+      }
 
-  // Presenca
-  const [presencaSheetOpen, setPresencaSheetOpen] = useState(false);
+      return Array.from(unique.values()).sort((a, b) =>
+        a.name.localeCompare(b.name)
+      );
+    },
+    initialData: [],
+  });
+
+  useEffect(() => {
+    if (aulaSheetOpen || instructorOpen) {
+      void refetchInstructorOptions();
+    }
+  }, [aulaSheetOpen, instructorOpen, refetchInstructorOptions]);
+
+  // ── Attendance state ──────────────────────────────────────────────────────
   const [presencaList, setPresencaList] = useState<PresencaItem[]>([]);
   const [savingPresenca, setSavingPresenca] = useState(false);
+  const [aulasState, setAulasState] = useState<Aula[]>([]);
+
+  useEffect(() => {
+    setAulasState(
+      [...aulasQuery].sort(
+        (a, b) =>
+          parseSessionDate(a.data).getTime() -
+          parseSessionDate(b.data).getTime()
+      )
+    );
+  }, [aulasQuery]);
 
-  // Form
+  // ── Form ──────────────────────────────────────────────────────────────────
   const aulaSchema = getAulaSchema(t);
+  const studentSchema = getStudentSchema(t);
+
   const aulaForm = useForm<AulaForm>({
     resolver: zodResolver(aulaSchema),
     defaultValues: {
@@ -305,20 +800,29 @@ export default function TurmaDetalhePage() {
       horaFim: '22:00',
       local: '',
       tipo: 'online',
+      instrutorId: '',
+      recurrenceFrequency: 'none',
+      recurrenceUntil: '',
+      recurrenceDaysOfWeek: [],
+      cor: SESSION_DEFAULT_COLOR,
+      applyScope: 'single',
     },
   });
 
-  // Load data
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setAlunos(generateAlunos());
-      setAulas(generateAulas());
-      setLoading(false);
-    }, 800);
-    return () => clearTimeout(timer);
-  }, []);
-
-  // Filter alunos
+  const recurrenceFrequency = aulaForm.watch('recurrenceFrequency');
+  const recurrenceDaysOfWeek = aulaForm.watch('recurrenceDaysOfWeek') ?? [];
+  const showRecurrenceFields = !editingAula || editingAula.isRecurring;
+
+  const editStudentForm = useForm<StudentForm>({
+    resolver: zodResolver(studentSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+      phone: '',
+    },
+  });
+
+  // ── Derived ───────────────────────────────────────────────────────────────
   const filteredAlunos = useMemo(() => {
     if (!alunoSearch.trim()) return alunos;
     const q = alunoSearch.toLowerCase();
@@ -328,257 +832,649 @@ export default function TurmaDetalhePage() {
     );
   }, [alunos, alunoSearch]);
 
-  // Calendar events
-  const calendarEvents = useMemo(() => {
-    return aulas.map((aula) => {
-      const [startHour = 0, startMinute = 0] = aula.horaInicio
-        .split(':')
-        .map(Number);
-      const [endHour = 0, endMinute = 0] = aula.horaFim.split(':').map(Number);
-      return {
-        id: aula.id,
-        title: aula.titulo,
-        start: setMinutes(setHours(aula.data, startHour), startMinute),
-        end: setMinutes(setHours(aula.data, endHour), endMinute),
-        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)',
-      },
-    }),
-    []
+  const pessoasElegiveisParaMatricula = useMemo(
+    () =>
+      pessoasDisponiveis.filter((person) => {
+        const isInstructor = Boolean(person.isInstructor);
+        const canTeachCourses = Boolean(person.canTeachCourses);
+        const isStudentByEnrollment = Boolean(person.isStudentByEnrollment);
+
+        // Teacher-only profiles stay out of the student enrollment picker.
+        return !(isInstructor && canTeachCourses && !isStudentByEnrollment);
+      }),
+    [pessoasDisponiveis]
+  );
+  const studentPickerResultsById = useMemo(
+    () => new Map(studentPickerResults.map((person) => [person.id, person])),
+    [studentPickerResults]
   );
 
-  // Handlers
-  const toggleSelectAluno = (id: number, e?: React.MouseEvent) => {
+  useEffect(() => {
+    if (pessoasElegiveisParaMatricula.length === 0) return;
+
+    setStudentPickerResults((previous) => {
+      const merged = new Map(previous.map((person) => [person.id, person]));
+
+      for (const person of pessoasElegiveisParaMatricula) {
+        merged.set(person.id, person);
+      }
+
+      return Array.from(merged.values());
+    });
+  }, [pessoasElegiveisParaMatricula]);
+
+  const calendarEvents = useMemo(() => {
+    return aulasState.map((aula) => ({
+      id: aula.id,
+      title: aula.titulo,
+      start: getSessionStartDate(aula),
+      end: getSessionEndDate(aula),
+      resource: aula,
+    }));
+  }, [aulasState]);
+
+  const sessionsByDay = useMemo(() => {
+    const map = new Map<string, Aula[]>();
+    for (const aula of aulasState) {
+      const key = format(parseSessionDate(aula.data), 'yyyy-MM-dd');
+      if (!map.has(key)) map.set(key, []);
+      map.get(key)!.push(aula);
+    }
+    return map;
+  }, [aulasState]);
+
+  const notifyLmsDataUpdated = () => {
+    if (typeof window === 'undefined') return;
+
+    window.sessionStorage.setItem('lms:classes-needs-refresh', '1');
+    window.dispatchEvent(new CustomEvent('lms:classes-updated'));
+    window.sessionStorage.setItem('lms:dashboard-needs-refresh', '1');
+    window.dispatchEvent(new CustomEvent('lms:dashboard-updated'));
+  };
+
+  // ── Handlers ─────────────────────────────────────────────────────────────
+  const toggleSelectAluno = (studentId: 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 currentIndex = filteredAlunos.findIndex((a) => a.id === studentId);
       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]
+        prev.includes(studentId)
+          ? prev.filter((x) => x !== studentId)
+          : [...prev, studentId]
       );
     }
   };
 
-  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 handleAddAlunos = async () => {
+    if (selectedPessoas.length === 0) return;
+
+    const selectedEligiblePeople = selectedPessoas.filter((personId) =>
+      studentPickerResultsById.has(personId)
+    );
+
+    if (selectedEligiblePeople.length === 0) {
+      toast.error('Nenhuma pessoa elegivel foi encontrada para matricula.');
+      return;
+    }
+
+    setSavingStudents(true);
+    try {
+      await Promise.all(
+        selectedEligiblePeople.map((personId) =>
+          request({
+            url: `/lms/classes/${id}/students`,
+            method: 'POST',
+            data: { personId },
+          })
+        )
+      );
+      await refetchAlunos();
+      notifyLmsDataUpdated();
+      setStudentPickerOpen(false);
+      setStudentPickerResults([]);
+      setSelectedPessoas([]);
+      setPessoaSearch('');
+      toast.success(
+        t('toasts.studentsAdded', { count: selectedEligiblePeople.length })
+      );
+    } catch (error: unknown) {
+      const message = getErrorMessage(error);
+
+      if (message?.toLowerCase().includes('already enrolled')) {
+        toast.error('Esta pessoa ja esta matriculada na turma.');
+      } else {
+        toast.error(message || t('toasts.error'));
+      }
+    } finally {
+      setSavingStudents(false);
+    }
+  };
+
+  const handleStudentEnrolled = async () => {
+    await refetchAlunos();
+    notifyLmsDataUpdated();
+    setCreateStudentDialogOpen(false);
+    setStudentPickerOpen(false);
+    setStudentPickerResults([]);
+    setSelectedPessoas([]);
+    setPessoaSearch('');
+    toast.success(t('toasts.studentCreated'));
+  };
+
+  const openCreateStudentDialog = () => {
+    setStudentPickerOpen(false);
+    setPessoaSearch('');
+    setCreateStudentDialogOpen(true);
   };
 
-  const handleRemoveAluno = () => {
+  const handleRemoveAluno = async () => {
     if (!alunoToRemove) return;
-    setAlunos((prev) => prev.filter((a) => a.id !== alunoToRemove.id));
-    setRemoveAlunoDialogOpen(false);
-    setAlunoToRemove(null);
-    toast.success(t('toasts.studentRemoved'));
+    setRemovingStudent(true);
+    try {
+      await request({
+        url: `/lms/classes/${id}/students/${alunoToRemove.id}`,
+        method: 'DELETE',
+      });
+      await refetchAlunos();
+      notifyLmsDataUpdated();
+      setRemoveAlunoDialogOpen(false);
+      setAlunoToRemove(null);
+      toast.success(t('toasts.studentRemoved'));
+    } catch {
+      toast.error(t('toasts.error'));
+    } finally {
+      setRemovingStudent(false);
+    }
   };
 
-  const handleRemoveSelectedAlunos = () => {
-    setAlunos((prev) => prev.filter((a) => !selectedAlunos.includes(a.id)));
-    setSelectedAlunos([]);
-    toast.success(
-      t('toasts.studentsRemoved', { count: selectedAlunos.length })
-    );
+  const handleRemoveSelectedAlunos = async () => {
+    if (selectedAlunos.length === 0) return;
+    try {
+      await Promise.all(
+        selectedAlunos.map((personId) =>
+          request({
+            url: `/lms/classes/${id}/students/${personId}`,
+            method: 'DELETE',
+          })
+        )
+      );
+      await refetchAlunos();
+      notifyLmsDataUpdated();
+      setSelectedAlunos([]);
+      toast.success(
+        t('toasts.studentsRemoved', { count: selectedAlunos.length })
+      );
+    } catch {
+      toast.error(t('toasts.error'));
+    }
+  };
+
+  const openStudentProfile = async (personId: number) => {
+    setLoadingStudentProfile(true);
+    try {
+      const res = await request<StudentProfile>({
+        url: `/lms/classes/${id}/students/${personId}`,
+        method: 'GET',
+      });
+      const profile = res.data;
+      setSelectedStudentProfile(profile);
+      setStudentProfileDialogOpen(true);
+    } catch {
+      toast.error(t('toasts.error'));
+    } finally {
+      setLoadingStudentProfile(false);
+    }
+  };
+
+  const openEditStudentSheet = () => {
+    if (!selectedStudentProfile) return;
+    editStudentForm.reset({
+      name: selectedStudentProfile.nome || '',
+      email: selectedStudentProfile.email || '',
+      phone: selectedStudentProfile.telefone || '',
+    });
+    setStudentProfileDialogOpen(false);
+    setEditStudentSheetOpen(true);
   };
 
-  const openAulaSheet = (aula?: Aula) => {
+  const handleUpdateStudentProfile = editStudentForm.handleSubmit(
+    async (values) => {
+      if (!selectedStudentProfile) return;
+
+      setSavingStudentProfile(true);
+      try {
+        const res = await request<StudentProfile>({
+          url: `/lms/classes/${id}/students/${selectedStudentProfile.id}`,
+          method: 'PATCH',
+          data: {
+            name: values.name,
+            email: values.email,
+            phone: values.phone,
+          },
+        });
+
+        setSelectedStudentProfile(res.data);
+        await refetchAlunos();
+        setEditStudentSheetOpen(false);
+        setStudentProfileDialogOpen(true);
+        toast.success(t('toasts.studentUpdated'));
+      } catch {
+        toast.error(t('toasts.error'));
+      } finally {
+        setSavingStudentProfile(false);
+      }
+    }
+  );
+
+  const getDefaultPresencaList = useCallback(
+    () =>
+      alunos.map((a) => ({
+        alunoId: a.id,
+        selecionado: false,
+        presente: false,
+      })),
+    [alunos]
+  );
+
+  const loadPresencaForAula = useCallback(
+    async (aula: Aula) => {
+      setPresencaList(getDefaultPresencaList());
+      try {
+        const res = await request<AttendanceRecord[]>({
+          url: `/lms/classes/${id}/sessions/${aula.id}/attendance`,
+          method: 'GET',
+        });
+        const attendanceData = res.data;
+        setPresencaList(
+          alunos.map((a) => {
+            const found = attendanceData.find((att) => att.student_id === a.id);
+            return {
+              alunoId: a.id,
+              selecionado: Boolean(found),
+              presente: found?.present ?? false,
+            };
+          })
+        );
+      } catch {
+        // Keep default values if attendance cannot be loaded.
+      }
+    },
+    [alunos, getDefaultPresencaList, id, request]
+  );
+
+  const openAulaSheet = (aula?: Aula, options?: OpenAulaSheetOptions) => {
+    setAulaSheetTab(options?.initialTab ?? 'aulas');
+
     if (aula) {
       setEditingAula(aula);
       aulaForm.reset({
         titulo: aula.titulo,
-        data: format(aula.data, 'yyyy-MM-dd'),
+        data: toSessionInputDate(aula.data),
         horaInicio: aula.horaInicio,
         horaFim: aula.horaFim,
-        local: aula.local,
+        local: aula.local || aula.meetingUrl || '',
         tipo: aula.tipo,
+        instrutorId: aula.instructorId ? String(aula.instructorId) : '',
+        recurrenceFrequency: aula.recurrence?.frequency ?? 'none',
+        recurrenceUntil: aula.recurrence?.until ?? '',
+        recurrenceDaysOfWeek: aula.recurrence?.daysOfWeek ?? [],
+        cor: getAulaDisplayColor(aula),
+        applyScope: 'single',
       });
+      void loadPresencaForAula(aula);
     } else {
       setEditingAula(null);
       aulaForm.reset({
         titulo: '',
         data: '',
-        horaInicio: '19:00',
-        horaFim: '22:00',
+        horaInicio: turma?.startTime ?? '19:00',
+        horaFim: turma?.endTime ?? '22:00',
         local: '',
-        tipo: 'online',
+        tipo: turma?.deliveryMode === 'presential' ? 'presencial' : 'online',
+        instrutorId: '',
+        recurrenceFrequency: 'none',
+        recurrenceUntil: '',
+        recurrenceDaysOfWeek: [],
+        cor: SESSION_DEFAULT_COLOR,
+        applyScope: 'single',
+        ...options?.prefill,
       });
+      setPresencaList(options?.attendance ?? getDefaultPresencaList());
     }
+
     setAulaSheetOpen(true);
   };
 
-  const handleSaveAula = aulaForm.handleSubmit((data) => {
+  const upsertAula = async (data: AulaForm) => {
+    const isOnline = data.tipo === 'online';
+    const payload = {
+      title: data.titulo,
+      sessionDate: data.data,
+      startTime: data.horaInicio,
+      endTime: data.horaFim,
+      location: isOnline ? undefined : data.local,
+      meetingUrl: isOnline ? data.local : undefined,
+      instructorId: data.instrutorId ? Number(data.instrutorId) : undefined,
+      color: data.cor,
+      recurrence: showRecurrenceFields
+        ? buildSessionRecurrence(data)
+        : undefined,
+      applyScope: editingAula?.isRecurring ? data.applyScope : undefined,
+    };
+
     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
-        )
+      const res = await request<Aula>({
+        url: `/lms/classes/${id}/sessions/${editingAula.id}`,
+        method: 'PATCH',
+        data: payload,
+      });
+      setAulasState((prev) =>
+        prev.map((item) => (item.id === editingAula.id ? res.data : item))
       );
-      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'));
+      return { aula: res.data, mode: 'updated' as const };
     }
-    setAulaSheetOpen(false);
-  });
 
-  const handleSelectEvent = useCallback((event: { resource?: Aula }) => {
-    if (event.resource) {
-      openAulaSheet(event.resource);
+    const res = await request<Aula>({
+      url: `/lms/classes/${id}/sessions`,
+      method: 'POST',
+      data: payload,
+    });
+    setAulasState((prev) =>
+      [...prev, res.data].sort(
+        (a, b) =>
+          parseSessionDate(a.data).getTime() -
+          parseSessionDate(b.data).getTime()
+      )
+    );
+
+    return { aula: res.data, mode: 'created' as const };
+  };
+
+  const savePresencaForAula = async (sessionId: number) => {
+    await request({
+      url: `/lms/classes/${id}/sessions/${sessionId}/attendance`,
+      method: 'POST',
+      data: {
+        attendance: presencaList
+          .filter((p) => p.selecionado)
+          .map((p) => ({
+            studentId: p.alunoId,
+            present: p.presente,
+          })),
+      },
+    });
+  };
+
+  const handleSaveAula = aulaForm.handleSubmit(async (data) => {
+    setSavingAula(true);
+    try {
+      const { mode } = await upsertAula(data);
+      toast.success(
+        mode === 'updated'
+          ? t('toasts.lessonUpdated')
+          : t('toasts.lessonCreated')
+      );
+      void refetchAulas();
+      notifyLmsDataUpdated();
+      setAulaSheetOpen(false);
+    } catch {
+      toast.error(t('toasts.error'));
+    } finally {
+      setSavingAula(false);
     }
-  }, []);
+  });
 
-  const openPresenca = (aula: Aula) => {
-    setSelectedAulaForPresenca(aula);
-    setPresencaList(
-      alunos.map((a) => ({ alunoId: a.id, presente: Math.random() > 0.15 }))
+  const handleQuickCreateSaved = (aula: Aula) => {
+    setAulasState((prev) =>
+      [...prev, aula].sort(
+        (a, b) =>
+          parseSessionDate(a.data).getTime() -
+          parseSessionDate(b.data).getTime()
+      )
     );
-    setPresencaSheetOpen(true);
+    void refetchAulas();
+    notifyLmsDataUpdated();
+  };
+
+  const handleInstructorCreated = async (instructor: {
+    id: number;
+    personId: number;
+    name: string;
+    qualificationSlugs: string[];
+  }) => {
+    aulaForm.setValue('instrutorId', String(instructor.id), {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+
+    await refetchInstructorOptions();
+  };
+
+  const openPresenca = (aula: Aula) => {
+    openAulaSheet(aula, { initialTab: 'chamada' });
   };
 
   const togglePresenca = (alunoId: number) => {
     setPresencaList((prev) =>
       prev.map((p) =>
-        p.alunoId === alunoId ? { ...p, presente: !p.presente } : p
+        p.alunoId === alunoId
+          ? { ...p, selecionado: true, 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'));
+  const toggleParticipante = (alunoId: number) => {
+    setPresencaList((prev) =>
+      prev.map((p) =>
+        p.alunoId === alunoId
+          ? {
+              ...p,
+              selecionado: !p.selecionado,
+              presente: p.selecionado ? false : p.presente,
+            }
+          : p
+      )
+    );
   };
 
-  // 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',
+  const handleSaveAulaAndPresenca = aulaForm.handleSubmit(async (data) => {
+    setSavingPresenca(true);
+    setSavingAula(true);
+    try {
+      const { aula } = await upsertAula(data);
+      if (!aula?.id) {
+        throw new Error('Invalid session id');
+      }
+      await savePresencaForAula(aula.id);
+      void refetchAulas();
+      notifyLmsDataUpdated();
+      setAulaSheetOpen(false);
+      toast.success(t('toasts.attendanceSaved'));
+    } catch {
+      toast.error(t('toasts.error'));
+    } finally {
+      setSavingPresenca(false);
+      setSavingAula(false);
+    }
+  });
+
+  const handleSaveAttendanceOnly = async () => {
+    if (!editingAula) {
+      await handleSaveAulaAndPresenca();
+      return;
+    }
+
+    setSavingPresenca(true);
+    try {
+      await savePresencaForAula(editingAula.id);
+      void refetchAulas();
+      notifyLmsDataUpdated();
+      setAulaSheetOpen(false);
+      toast.success(t('toasts.attendanceSaved'));
+    } catch {
+      toast.error(t('toasts.error'));
+    } finally {
+      setSavingPresenca(false);
+    }
+  };
+
+  // ── KPIs ──────────────────────────────────────────────────────────────────
+  const now = new Date();
+  const completedSessions = aulasState.filter(
+    (aula) => getSessionEndDate(aula) < now
+  );
+  const upcomingSessions = aulasState.filter(
+    (aula) => getSessionEndDate(aula) >= now
+  );
+  const nextSession = upcomingSessions[0] ?? null;
+  const completedSessionsCount = completedSessions.length;
+  const totalSessionsCount = aulasState.length;
+  const capacity = turma?.capacity ?? 0;
+  const occupiedSeats = alunos.length;
+  const availableSeats = Math.max(capacity - occupiedSeats, 0);
+  const occupancyRate =
+    capacity > 0 ? Math.round((occupiedSeats / capacity) * 100) : 0;
+  const primaryInstructor =
+    nextSession?.instructorName?.trim() ||
+    aulasState
+      .find((aula) => aula.instructorName?.trim())
+      ?.instructorName?.trim() ||
+    'Nao definido';
+  const nextSessionStartsAt = nextSession
+    ? getSessionStartDate(nextSession)
+    : null;
+  const nextSessionSummary = nextSessionStartsAt
+    ? format(nextSessionStartsAt, "dd/MM 'as' HH:mm", { locale: dateLocale })
+    : 'Nenhuma aula futura';
+  const nextSessionSupportText = nextSession
+    ? nextSession.titulo
+    : 'Agende a proxima aula para manter a turma em movimento.';
+
+  const kpis: KpiCardItem[] = [
+    {
+      key: 'enrolled-students',
+      title: t('kpis.enrolledStudents.label'),
+      value: occupiedSeats,
+      description: t('kpis.enrolledStudents.sub', {
+        vagas: capacity,
+      }),
+      icon: Users,
+      iconContainerClassName: 'bg-orange-500/10 text-orange-700',
+      accentClassName: 'from-orange-500/25 via-amber-500/10 to-transparent',
+      layout: 'compact',
+    },
+    {
+      key: 'occupancy-rate',
+      title: t('kpis.occupancyRate.label'),
+      value: capacity > 0 ? `${occupancyRate}%` : '—',
+      description:
+        capacity > 0 && availableSeats > 0
+          ? t('kpis.occupancyRate.subFree', {
+              count: availableSeats,
+            })
+          : capacity > 0
+            ? t('kpis.occupancyRate.subFull')
+            : 'Capacidade nao definida',
+      icon: BarChart3,
+      iconContainerClassName: 'bg-sky-500/10 text-sky-700',
+      accentClassName: 'from-sky-500/25 via-blue-500/10 to-transparent',
+      layout: 'compact',
     },
     {
-      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',
+      key: 'next-session',
+      title: 'Proxima aula',
+      value: nextSession
+        ? format(nextSessionStartsAt!, 'dd/MM', { locale: dateLocale })
+        : 'Sem aula',
+      description: nextSession
+        ? `${nextSession.horaInicio} - ${nextSession.horaFim}`
+        : 'Crie a proxima sessao',
+      icon: Clock,
+      iconContainerClassName: 'bg-emerald-500/10 text-emerald-700',
+      accentClassName: 'from-emerald-500/25 via-green-500/10 to-transparent',
+      layout: 'compact',
     },
     {
-      label: t('kpis.completedLessons.label'),
-      valor: aulas.filter((a) => a.data < new Date()).length,
-      sub: t('kpis.completedLessons.sub', { total: aulas.length }),
+      key: 'calendar',
+      title: 'Calendario',
+      value: totalSessionsCount,
+      description: `${completedSessionsCount} concluidas`,
       icon: CalendarIcon,
-      iconBg: 'bg-muted',
-      iconColor: 'text-foreground',
+      iconContainerClassName: 'bg-violet-500/10 text-violet-700',
+      accentClassName: 'from-violet-500/25 via-violet-500/10 to-transparent',
+      layout: 'compact',
     },
   ];
 
-  const STATUS_MAP = {
-    aberta: {
+  const STATUS_MAP: Record<string, { label: string; color: string }> = {
+    open: {
       label: tClasses('status.aberta'),
       color: 'bg-blue-100 text-blue-700 border-blue-200',
     },
-    em_andamento: {
+    ongoing: {
       label: tClasses('status.em_andamento'),
       color: 'bg-emerald-100 text-emerald-700 border-emerald-200',
     },
-    concluida: {
+    completed: {
       label: tClasses('status.concluida'),
       color: 'bg-gray-100 text-gray-700 border-gray-200',
     },
-    cancelada: {
+    cancelled: {
       label: tClasses('status.cancelada'),
       color: 'bg-red-100 text-red-700 border-red-200',
     },
   } as const;
-  const turmaStatus =
-    STATUS_MAP[turma.status as keyof typeof STATUS_MAP] ?? STATUS_MAP.aberta;
+  const turmaStatus = turma?.status ?? 'open';
+  const statusInfo = STATUS_MAP[turmaStatus] ?? { label: '', color: '' };
 
   const fadeUp = {
     hidden: { opacity: 0, y: 20 },
     visible: { opacity: 1, y: 0 },
   };
 
+  const classTitle = turma?.courseTitle ?? turma?.curso ?? '';
+  const classCode = turma?.code ?? turma?.codigo ?? '';
+  const courseId = turma?.courseId ?? turma?.cursoId;
+  const startDate = turma?.startDate ?? turma?.dataInicio;
+  const endDate = turma?.endDate ?? turma?.dataFim;
+  const schedule =
+    turma?.startTime && turma?.endTime
+      ? `${turma.startTime} - ${turma.endTime}`
+      : (turma?.horario ?? '—');
+  const deliveryMode = turma?.deliveryMode ?? turma?.tipo ?? 'online';
+  const deliveryTypeKey =
+    deliveryMode === 'presential' ? 'presencial' : deliveryMode;
+  const isOnline = deliveryMode === 'online' || deliveryMode === 'hybrid';
+  const roomUrl = turma?.virtualRoomUrl ?? turma?.local ?? '';
+  const location = turma?.location ?? turma?.local ?? '—';
+
+  const handleViewCourse = (): void => {
+    if (!courseId) {
+      toast.error('Nao foi possivel localizar o curso desta turma.');
+      return;
+    }
+
+    router.push(`/lms/courses/${courseId}`);
+  };
+
+  const handleNewLesson = (): void => {
+    openAulaSheet();
+  };
+
   return (
     <Page>
       <PageHeader
-        title={turma.curso}
+        title={classTitle}
         breadcrumbs={[
           {
             label: t('breadcrumbs.home'),
@@ -589,21 +1485,79 @@ export default function TurmaDetalhePage() {
             href: '/lms/classes',
           },
           {
-            label: t('breadcrumbs.management'),
+            label: t('breadcrumbs.managementMobile'),
           },
         ]}
-        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>
+        actions={[
+          {
+            label: t('actions.viewCourse'),
+            onClick: () => handleViewCourse(),
+            variant: 'outline',
+          },
+          {
+            label: t('actions.newLesson'),
+            onClick: () => handleNewLesson(),
+            variant: 'outline',
+          },
+          {
+            label: 'Editar turma',
+            onClick: () => setEditSheetOpen(true),
+            variant: 'default',
+          },
+        ]}
+        extraContent={
+          <div className="mt-2 flex flex-wrap gap-1.5">
+            <Badge className={cn('border text-[11px] font-medium')}>
+              {classCode}
+              <CopyButton value={classCode} className="ml-1 h-4 w-4" />
+            </Badge>
+            <Badge
+              className={cn(statusInfo.color, 'border text-[11px] font-medium')}
+            >
+              {statusInfo.label}
+              <CopyButton value={statusInfo.label} className="ml-1 h-4 w-4" />
+            </Badge>
+            <Badge variant="outline" className="gap-1 text-[11px]">
+              {isOnline ? (
+                <Video className="h-3 w-3" />
+              ) : (
+                <MapPin className="h-3 w-3" />
+              )}
+              {tClasses(`type.${deliveryTypeKey}`)}
+              <CopyButton
+                value={tClasses(`type.${deliveryTypeKey}`)}
+                className="ml-1 h-4 w-4"
+              />
+            </Badge>
+            {schedule !== '—' && (
+              <Badge variant="outline" className="gap-1 text-[11px]">
+                <Clock className="h-3 w-3" />
+                {schedule}
+                <CopyButton value={schedule} className="ml-1 h-4 w-4" />
+              </Badge>
+            )}
+            {startDate && endDate && (
+              <Badge variant="outline" className="gap-1 text-[11px]">
+                <CalendarIcon className="h-3 w-3" />
+                {format(new Date(startDate), 'dd/MM/yy')}
+                {' – '}
+                {format(new Date(endDate), 'dd/MM/yy')}
+                <CopyButton
+                  value={`${format(new Date(startDate), 'dd/MM/yy')} – ${format(new Date(endDate), 'dd/MM/yy')}`}
+                  className="ml-1 h-4 w-4"
+                />
+              </Badge>
+            )}
+            {primaryInstructor !== 'Nao definido' && (
+              <Badge variant="outline" className="gap-1 text-[11px]">
+                <Users className="h-3 w-3" />
+                {primaryInstructor}
+                <CopyButton
+                  value={primaryInstructor}
+                  className="ml-1 h-4 w-4"
+                />
+              </Badge>
+            )}
           </div>
         }
       />
@@ -613,557 +1567,1373 @@ export default function TurmaDetalhePage() {
           initial="hidden"
           animate="visible"
           variants={{ visible: { transition: { staggerChildren: 0.05 } } }}
+          className="space-y-4"
         >
-          {/* 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={`${turmaStatus.color} border`}>
-                  {turmaStatus.label}
-                </Badge>
+          {/* ── KPIs ───────────────────────────────────────────────────────── */}
+          <motion.div variants={fadeUp}>
+            {loading ? (
+              <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-4">
+                {Array.from({ length: 4 }).map((_, i) => (
+                  <Card
+                    key={i}
+                    className="overflow-hidden border-border/70 py-0"
+                  >
+                    <div className="h-1 w-full bg-gradient-to-r from-slate-300/70 via-slate-200 to-transparent" />
+                    <CardContent className="p-4">
+                      <Skeleton className="mb-2 h-8 w-16" />
+                      <Skeleton className="h-4 w-28" />
+                    </CardContent>
+                  </Card>
+                ))}
               </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>
+            ) : (
+              <KpiCardsGrid items={kpis} columns={4} />
+            )}
           </motion.div>
 
-          {/* KPIs */}
+          {/* ── Main layout: tabs (left) + sidebar (right) ─────────────────── */}
           <motion.div
             variants={fadeUp}
-            className="mb-6 grid grid-cols-2 gap-4 lg:grid-cols-4"
+            className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_300px]"
           >
-            {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">
+            {/* ── Left: Tabs ─────────────────────────────────────────────── */}
+            <div className="min-w-0">
+              <Tabs
+                value={activeTab}
+                onValueChange={setActiveTab}
+                className="w-full"
+              >
+                <TabsList className="mb-4 h-auto grid w-full grid-cols-3 rounded-lg bg-muted/80 p-1">
+                  <TabsTrigger value="alunos" className="gap-2">
+                    <Users className="size-4" />
+                    {t('tabs.students')}
+                    {!loading && alunos.length > 0 && (
+                      <span className="ml-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary">
+                        {alunos.length}
+                      </span>
+                    )}
+                  </TabsTrigger>
+                  <TabsTrigger value="calendario" className="gap-2">
+                    <CalendarIcon className="size-4" />
+                    {t('tabs.calendar')}
+                    {!loading && totalSessionsCount > 0 && (
+                      <span className="ml-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary">
+                        {totalSessionsCount}
+                      </span>
+                    )}
+                  </TabsTrigger>
+                  <TabsTrigger value="presenca" className="gap-2">
+                    <CheckCircle2 className="size-4" />
+                    {t('tabs.attendance')}
+                    {!loading && completedSessionsCount > 0 && (
+                      <span className="ml-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary">
+                        {completedSessionsCount}
+                      </span>
+                    )}
+                  </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">
+                      <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 items-center gap-2">
+                      <Popover
+                        open={studentPickerOpen}
+                        onOpenChange={(open) => {
+                          setStudentPickerOpen(open);
+                          if (!open) setPessoaSearch('');
+                        }}
+                      >
+                        <PopoverTrigger asChild>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            className="gap-2"
+                          >
+                            <UserPlus className="size-4" />
+                            {t('students.actions.addStudent')}
+                            {searchingPessoas && (
+                              <Loader2 className="size-4 animate-spin" />
+                            )}
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-80 p-0" align="end">
+                          <Command shouldFilter={false}>
+                            <CommandInput
+                              placeholder={t(
+                                'dialogs.addStudents.searchPlaceholder'
+                              )}
+                              value={pessoaSearch}
+                              onValueChange={setPessoaSearch}
+                            />
+                            <CommandList>
+                              <CommandEmpty>
+                                <div className="px-3 py-4 text-sm text-muted-foreground">
+                                  {t('dialogs.addStudents.notFound')}
+                                </div>
+                              </CommandEmpty>
+                              <CommandGroup>
+                                {(pessoaSearch
+                                  ? pessoasElegiveisParaMatricula
+                                  : studentPickerResults.filter((person) => {
+                                      const isInstructor = Boolean(
+                                        person.isInstructor
+                                      );
+                                      const canTeachCourses = Boolean(
+                                        person.canTeachCourses
+                                      );
+                                      const isStudentByEnrollment = Boolean(
+                                        person.isStudentByEnrollment
+                                      );
+                                      return !(
+                                        isInstructor &&
+                                        canTeachCourses &&
+                                        !isStudentByEnrollment
+                                      );
+                                    })
+                                ).map((pessoa) => {
+                                  const isSelected = selectedPessoas.includes(
+                                    pessoa.id
+                                  );
+                                  return (
+                                    <CommandItem
+                                      key={pessoa.id}
+                                      value={`${pessoa.nome}-${pessoa.id}`}
+                                      onSelect={() => {
+                                        setSelectedPessoas((prev) =>
+                                          prev.includes(pessoa.id)
+                                            ? prev.filter(
+                                                (pid) => pid !== pessoa.id
+                                              )
+                                            : [...prev, pessoa.id]
+                                        );
+                                      }}
+                                    >
+                                      <div className="flex w-full items-center gap-3">
+                                        <Checkbox checked={isSelected} />
+                                        <Avatar className="size-8">
+                                          <AvatarFallback className="text-[10px]">
+                                            {pessoa.nome
+                                              .split(' ')
+                                              .map((n: string) => n[0])
+                                              .join('')
+                                              .slice(0, 2)}
+                                          </AvatarFallback>
+                                        </Avatar>
+                                        <div className="min-w-0 flex-1">
+                                          <p className="truncate text-sm font-medium">
+                                            {pessoa.nome}
+                                          </p>
+                                          <p className="truncate text-xs text-muted-foreground">
+                                            {pessoa.email}
+                                          </p>
+                                        </div>
+                                        {isSelected && (
+                                          <Check className="size-4 shrink-0 text-primary" />
+                                        )}
+                                      </div>
+                                    </CommandItem>
+                                  );
+                                })}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        className="h-9 w-9 shrink-0 cursor-pointer"
+                        onClick={openCreateStudentDialog}
+                        aria-label={t('dialogs.addStudents.createNew')}
+                      >
+                        <Plus className="size-4" />
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* Pending enrollment banner */}
+                  {selectedPessoas.length > 0 && (
+                    <div className="mb-4 flex flex-wrap items-center gap-3 rounded-lg border border-primary/20 bg-primary/5 px-4 py-2.5 text-sm">
+                      <span className="font-medium">
+                        {t('dialogs.addStudents.confirm')} (
+                        {selectedPessoas.length})
+                      </span>
+                      <Button
+                        size="sm"
+                        className="gap-2"
+                        onClick={handleAddAlunos}
+                        disabled={savingStudents}
+                      >
+                        {savingStudents && (
+                          <Loader2 className="size-4 animate-spin" />
+                        )}
+                        <UserPlus className="size-4" />
+                        {t('students.actions.addStudent')}
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => {
+                          setSelectedPessoas([]);
+                          setPessoaSearch('');
+                          setStudentPickerOpen(false);
+                          setStudentPickerResults([]);
+                        }}
+                      >
+                        {t('students.actions.clearSelection')}
+                      </Button>
+                    </div>
+                  )}
+
+                  {/* Bulk selection banner */}
+                  {selectedAlunos.length > 0 && (
+                    <div className="mb-4 flex flex-wrap items-center gap-3 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5 text-sm dark:border-amber-800 dark:bg-amber-950/30">
+                      <Checkbox
+                        checked={
+                          selectedAlunos.length === filteredAlunos.length
+                        }
+                        onCheckedChange={(checked) =>
+                          setSelectedAlunos(
+                            checked ? filteredAlunos.map((a) => a.id) : []
+                          )
+                        }
+                      />
+                      <span className="font-medium">
+                        {t('students.selectedCount', {
+                          count: selectedAlunos.length,
+                        })}
+                      </span>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        className="ml-auto gap-2"
+                        onClick={handleRemoveSelectedAlunos}
+                      >
+                        <UserMinus className="size-4" />
+                        {t('students.actions.removeSelected', {
+                          count: selectedAlunos.length,
+                        })}
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setSelectedAlunos([])}
+                      >
+                        {t('students.actions.clearSelection')}
+                      </Button>
+                    </div>
+                  )}
+
+                  {/* Student list */}
+                  {loading ? (
+                    <div className="space-y-2">
+                      {Array.from({ length: 5 }).map((_, i) => (
+                        <div
+                          key={i}
+                          className="flex items-center gap-3 rounded-lg border border-border/70 p-3"
+                        >
+                          <Skeleton className="h-9 w-9 rounded-full" />
+                          <div className="flex-1 space-y-1">
+                            <Skeleton className="h-4 w-36" />
+                            <Skeleton className="h-3 w-48" />
+                          </div>
+                          <Skeleton className="h-4 w-12" />
+                        </div>
+                      ))}
+                    </div>
+                  ) : filteredAlunos.length === 0 ? (
+                    <div className="rounded-xl border border-dashed border-border/60 bg-muted/20 px-6 py-10 text-center">
+                      <div className="flex flex-col items-center gap-3">
+                        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted/60 text-muted-foreground">
+                          <Users className="size-5" />
+                        </div>
                         <div>
-                          <p className="text-sm text-muted-foreground">
-                            {kpi.label}
-                          </p>
-                          <p className="mt-1 text-3xl font-bold tracking-tight">
-                            {kpi.valor}
+                          <p className="font-semibold text-sm">
+                            {alunoSearch
+                              ? t('students.empty.notFound')
+                              : t('students.empty.notEnrolled')}
                           </p>
                           <p className="mt-0.5 text-xs text-muted-foreground">
-                            {kpi.sub}
+                            {alunoSearch
+                              ? t('students.empty.notFoundDescription')
+                              : t('students.empty.notEnrolledDescription')}
                           </p>
                         </div>
-                        <div
-                          className={`flex size-10 shrink-0 items-center justify-center rounded-lg ${kpi.iconBg}`}
-                        >
-                          <kpi.icon className={`size-5 ${kpi.iconColor}`} />
+                        {alunoSearch ? (
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => setAlunoSearch('')}
+                          >
+                            {t('students.empty.clearSearch')}
+                          </Button>
+                        ) : (
+                          <div className="flex flex-wrap justify-center gap-2">
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              className="gap-2"
+                              onClick={() => setStudentPickerOpen(true)}
+                            >
+                              <Search className="size-3.5" />
+                              {t('students.actions.addStudent')}
+                            </Button>
+                            <Button
+                              size="sm"
+                              className="gap-2"
+                              onClick={openCreateStudentDialog}
+                            >
+                              <Plus className="size-3.5" />
+                              {t('dialogs.addStudents.createNew')}
+                            </Button>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="space-y-1.5">
+                      {filteredAlunos.map((aluno) => {
+                        const isSelected = selectedAlunos.includes(aluno.id);
+                        return (
+                          <div
+                            key={aluno.id}
+                            className={cn(
+                              'group flex cursor-pointer items-center gap-3 rounded-lg border border-border/70 px-3 py-2.5 transition-colors hover:bg-muted/50',
+                              isSelected && 'border-primary/40 bg-primary/5'
+                            )}
+                            onClick={(e) => toggleSelectAluno(aluno.id, e)}
+                          >
+                            <Checkbox
+                              checked={isSelected}
+                              onClick={(e) => e.stopPropagation()}
+                              onCheckedChange={() =>
+                                toggleSelectAluno(aluno.id)
+                              }
+                              className="shrink-0"
+                            />
+                            <Avatar className="size-8 shrink-0">
+                              <AvatarFallback className="bg-gradient-to-br from-blue-100 to-blue-200 text-[11px] font-medium text-blue-700">
+                                {getPersonInitials(aluno.nome)}
+                              </AvatarFallback>
+                            </Avatar>
+                            <div className="min-w-0 flex-1">
+                              <p className="truncate text-sm font-medium">
+                                {aluno.nome}
+                              </p>
+                              <p className="truncate text-xs text-muted-foreground">
+                                {aluno.email}
+                              </p>
+                            </div>
+                            <div className="hidden shrink-0 items-center gap-3 sm:flex">
+                              <div className="w-16 text-right">
+                                <p className="text-[10px] text-muted-foreground">
+                                  {aluno.progresso}%
+                                </p>
+                                <div className="mt-0.5 h-1 w-full overflow-hidden rounded-full bg-muted">
+                                  <div
+                                    className="h-full rounded-full bg-emerald-500"
+                                    style={{ width: `${aluno.progresso}%` }}
+                                  />
+                                </div>
+                              </div>
+                              <Badge variant="outline" className="text-[10px]">
+                                {aluno.status}
+                              </Badge>
+                            </div>
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="size-8 shrink-0 opacity-0 group-hover:opacity-100"
+                                  onClick={(e) => e.stopPropagation()}
+                                >
+                                  <MoreHorizontal className="size-4" />
+                                </Button>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent align="end">
+                                <DropdownMenuItem
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    void openStudentProfile(aluno.id);
+                                  }}
+                                >
+                                  <Eye className="mr-2 size-4" />
+                                  {t('students.menu.viewProfile')}
+                                </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>
+                  )}
+                </TabsContent>
+
+                {/* ── Tab Calendario ──────────────────────────────────────────── */}
+                <TabsContent value="calendario" className="mt-0">
+                  {/* ── View mode toolbar ─────────────────────────────────────── */}
+                  <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+                    <div className="flex items-center rounded-lg border border-border/60 bg-muted/40 p-0.5">
+                      {(['single', 'quarter', 'year', 'list'] as const).map(
+                        (mode) => (
+                          <button
+                            key={mode}
+                            type="button"
+                            onClick={() => setCalendarViewMode(mode)}
+                            className={cn(
+                              'rounded-md px-3 py-1 text-xs font-medium transition-colors',
+                              calendarViewMode === mode
+                                ? 'bg-background text-foreground shadow-sm'
+                                : 'text-muted-foreground hover:text-foreground'
+                            )}
+                          >
+                            {mode === 'single'
+                              ? t('calendar.viewSingle')
+                              : mode === 'quarter'
+                                ? t('calendar.viewQuarter')
+                                : mode === 'year'
+                                  ? t('calendar.viewYear')
+                                  : 'Lista'}
+                          </button>
+                        )
+                      )}
+                    </div>
+                    {calendarViewMode !== 'single' &&
+                      calendarViewMode !== 'list' && (
+                        <div className="flex items-center gap-1">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="size-7"
+                            onClick={() =>
+                              setCalendarViewDate((d) =>
+                                addMonths(
+                                  d,
+                                  calendarViewMode === 'year' ? -12 : -3
+                                )
+                              )
+                            }
+                          >
+                            <ChevronLeft className="size-3.5" />
+                          </Button>
+                          <span className="min-w-[130px] text-center text-sm font-medium">
+                            {calendarViewMode === 'year'
+                              ? format(calendarViewDate, 'yyyy')
+                              : `${format(calendarViewDate, 'MMM', { locale: dateLocale })} – ${format(addMonths(calendarViewDate, 2), 'MMM yyyy', { locale: dateLocale })}`}
+                          </span>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="size-7"
+                            onClick={() =>
+                              setCalendarViewDate((d) =>
+                                addMonths(
+                                  d,
+                                  calendarViewMode === 'year' ? 12 : 3
+                                )
+                              )
+                            }
+                          >
+                            <ChevronRight className="size-3.5" />
+                          </Button>
                         </div>
-                      </CardContent>
-                    </Card>
-                  </motion.div>
-                ))}
-          </motion.div>
+                      )}
+                  </div>
+
+                  {calendarViewMode === 'single' ? (
+                    <LmsClassCalendar
+                      events={calendarEvents}
+                      classId={id}
+                      alunos={alunos}
+                      locale={locale}
+                      defaultStartTime={turma?.startTime}
+                      defaultEndTime={turma?.endTime}
+                      helperText={t('calendar.helper')}
+                      newLessonLabel={t('actions.newLesson')}
+                      calendarMessages={calendarMessages}
+                      mobileCalendarLabels={{
+                        previousLabel: t('calendar.messages.previous'),
+                        nextLabel: t('calendar.messages.next'),
+                        noEventsLabel: t('calendar.messages.noEventsInRange'),
+                      }}
+                      onNewLesson={() => openAulaSheet()}
+                      onOpenAulaSheet={openAulaSheet}
+                      onSessionSaved={handleQuickCreateSaved}
+                    />
+                  ) : calendarViewMode === 'list' ? (
+                    aulasState.length === 0 ? (
+                      <div className="rounded-xl border border-dashed border-border/60 bg-muted/20 px-6 py-10 text-center">
+                        <div className="flex flex-col items-center gap-3">
+                          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted/60 text-muted-foreground">
+                            <CalendarIcon className="size-5" />
+                          </div>
+                          <div>
+                            <p className="text-sm font-semibold">
+                              {t('calendar.empty.title')}
+                            </p>
+                            <p className="mt-0.5 text-xs text-muted-foreground">
+                              {t('calendar.empty.description')}
+                            </p>
+                          </div>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            className="gap-2"
+                            onClick={() => openAulaSheet()}
+                          >
+                            <Plus className="size-3.5" />
+                            {t('actions.newLesson')}
+                          </Button>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="rounded-xl border border-border/60 overflow-hidden">
+                        <Table>
+                          <TableHeader>
+                            <TableRow className="bg-muted/40 hover:bg-muted/40">
+                              <TableHead className="w-[110px]">Data</TableHead>
+                              <TableHead className="w-[110px]">
+                                Horário
+                              </TableHead>
+                              <TableHead>Título</TableHead>
+                              <TableHead className="w-[100px]">Tipo</TableHead>
+                              <TableHead>Local / Link</TableHead>
+                              <TableHead>Instrutor</TableHead>
+                              <TableHead className="w-[60px]" />
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {aulasState.map((aula) => {
+                              const sessionColor =
+                                aula.cor || aula.color || '#3b82f6';
+                              const isPast = getSessionEndDate(aula) < now;
+                              return (
+                                <TableRow
+                                  key={aula.id}
+                                  className="cursor-pointer hover:bg-muted/30"
+                                  onClick={() => openAulaSheet(aula)}
+                                >
+                                  <TableCell>
+                                    <div className="flex items-center gap-2">
+                                      <span
+                                        className="inline-block h-2 w-2 shrink-0 rounded-full"
+                                        style={{
+                                          backgroundColor: sessionColor,
+                                        }}
+                                      />
+                                      <span
+                                        className={cn(
+                                          'text-sm tabular-nums',
+                                          isPast && 'text-muted-foreground'
+                                        )}
+                                      >
+                                        {format(
+                                          parseSessionDate(aula.data),
+                                          'dd/MM/yyyy',
+                                          { locale: dateLocale }
+                                        )}
+                                      </span>
+                                    </div>
+                                  </TableCell>
+                                  <TableCell className="tabular-nums text-sm text-muted-foreground">
+                                    {aula.horaInicio} – {aula.horaFim}
+                                  </TableCell>
+                                  <TableCell>
+                                    <span className="text-sm font-medium">
+                                      {aula.titulo}
+                                    </span>
+                                  </TableCell>
+                                  <TableCell>
+                                    <Badge
+                                      variant="outline"
+                                      className="gap-1 text-[11px]"
+                                    >
+                                      {aula.tipo === 'online' ? (
+                                        <Video className="size-3" />
+                                      ) : (
+                                        <MapPin className="size-3" />
+                                      )}
+                                      {tClasses(`type.${aula.tipo}`)}
+                                    </Badge>
+                                  </TableCell>
+                                  <TableCell className="max-w-[180px] truncate text-sm text-muted-foreground">
+                                    {aula.meetingUrl || aula.local || '—'}
+                                  </TableCell>
+                                  <TableCell className="text-sm text-muted-foreground">
+                                    {aula.instructorName || '—'}
+                                  </TableCell>
+                                  <TableCell>
+                                    <Button
+                                      variant="ghost"
+                                      size="icon"
+                                      className="size-7"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        openAulaSheet(aula);
+                                      }}
+                                    >
+                                      <Pencil className="size-3.5" />
+                                    </Button>
+                                  </TableCell>
+                                </TableRow>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )
+                  ) : (
+                    <div
+                      className={cn(
+                        'grid gap-3',
+                        calendarViewMode === 'year'
+                          ? 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
+                          : 'grid-cols-1 sm:grid-cols-3'
+                      )}
+                    >
+                      {Array.from(
+                        { length: calendarViewMode === 'year' ? 12 : 3 },
+                        (_, monthIdx) => {
+                          const monthBase =
+                            calendarViewMode === 'year'
+                              ? new Date(calendarViewDate.getFullYear(), 0, 1)
+                              : startOfMonth(calendarViewDate);
+                          const month = addMonths(monthBase, monthIdx);
+                          const mStart = startOfMonth(month);
+                          const mEnd = endOfMonth(month);
+                          const calStart = startOfWeek(mStart, {
+                            weekStartsOn: 1,
+                          });
+                          const calEnd = endOfWeek(mEnd, { weekStartsOn: 1 });
+                          const days = eachDayOfInterval({
+                            start: calStart,
+                            end: calEnd,
+                          });
+                          const today = new Date();
+                          // Jan 1 2024 was a Monday — use as stable reference for weekday single letters
+                          const weekLetters = Array.from(
+                            { length: 7 },
+                            (_, wi) => {
+                              const ref = new Date(2024, 0, 1 + wi);
+                              return format(ref, 'EEEEE', {
+                                locale: dateLocale,
+                              });
+                            }
+                          );
 
-          {/* 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" />
+                          return (
+                            <div
+                              key={format(month, 'yyyy-MM')}
+                              className="rounded-xl border border-border/60 bg-muted/20 p-3"
+                            >
+                              <p className="mb-2 text-center text-[11px] font-semibold capitalize text-foreground">
+                                {format(month, 'MMMM yyyy', {
+                                  locale: dateLocale,
+                                })}
+                              </p>
+                              <div className="grid grid-cols-7 gap-0.5">
+                                {weekLetters.map((d, di) => (
+                                  <div
+                                    key={di}
+                                    className="pb-1 text-center text-[9px] font-medium uppercase text-muted-foreground"
+                                  >
+                                    {d}
+                                  </div>
+                                ))}
+                                {days.map((day) => {
+                                  const dayKey = format(day, 'yyyy-MM-dd');
+                                  const daySessions =
+                                    sessionsByDay.get(dayKey) ?? [];
+                                  const isCurrentMonth = isSameMonth(
+                                    day,
+                                    month
+                                  );
+                                  const isToday = isSameDay(day, today);
+                                  const hasSessions =
+                                    daySessions.length > 0 && isCurrentMonth;
+
+                                  return (
+                                    <button
+                                      key={dayKey}
+                                      type="button"
+                                      className={cn(
+                                        'flex flex-col items-center rounded-md py-0.5 transition-colors',
+                                        isCurrentMonth
+                                          ? 'text-foreground'
+                                          : 'text-muted-foreground/20',
+                                        hasSessions
+                                          ? 'cursor-pointer hover:bg-muted/60'
+                                          : 'cursor-default'
+                                      )}
+                                      onClick={() => {
+                                        if (!hasSessions) return;
+                                        if (daySessions.length === 1) {
+                                          openAulaSheet(daySessions[0]);
+                                        } else {
+                                          setCalendarViewMode('single');
+                                        }
+                                      }}
+                                      title={
+                                        hasSessions
+                                          ? daySessions
+                                              .map((a) => a.titulo)
+                                              .join(', ')
+                                          : undefined
+                                      }
+                                    >
+                                      <span
+                                        className={cn(
+                                          'flex h-5 w-5 items-center justify-center rounded-full text-[10px]',
+                                          isToday &&
+                                            'bg-primary font-bold text-primary-foreground'
+                                        )}
+                                      >
+                                        {format(day, 'd')}
+                                      </span>
+                                      <div className="flex h-1.5 items-center justify-center gap-0.5">
+                                        {hasSessions &&
+                                          daySessions
+                                            .slice(0, 3)
+                                            .map((aula, ai) => (
+                                              <span
+                                                key={ai}
+                                                className="h-1 w-1 rounded-full"
+                                                style={{
+                                                  backgroundColor:
+                                                    aula.cor ||
+                                                    aula.color ||
+                                                    '#3b82f6',
+                                                }}
+                                              />
+                                            ))}
+                                      </div>
+                                    </button>
+                                  );
+                                })}
+                              </div>
+                            </div>
+                          );
+                        }
+                      )}
                     </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>
+                  )}
+                </TabsContent>
+
+                {/* ── Tab Presenca ────────────────────────────────────────────── */}
+                <TabsContent value="presenca" className="mt-0">
+                  <p className="mb-4 text-sm text-muted-foreground">
+                    {t('attendance.helper')}
+                  </p>
+                  {loading ? (
+                    <div className="grid gap-3 sm:grid-cols-2">
+                      {Array.from({ length: 4 }).map((_, i) => (
+                        <Card
+                          key={i}
+                          className="overflow-hidden border-border/70"
+                        >
+                          <CardContent className="p-4">
+                            <Skeleton className="h-20" />
+                          </CardContent>
+                        </Card>
+                      ))}
                     </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" />
+                  ) : aulasState.length === 0 ? (
+                    <div className="rounded-xl border border-dashed border-border/60 bg-muted/20 px-6 py-10 text-center">
+                      <div className="flex flex-col items-center gap-3">
+                        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted/60 text-muted-foreground">
+                          <CheckCircle2 className="size-5" />
+                        </div>
+                        <div>
+                          <p className="font-semibold text-sm">
+                            {t('attendance.empty.title')}
+                          </p>
+                          <p className="mt-0.5 text-xs text-muted-foreground">
+                            {t('attendance.empty.description')}
+                          </p>
+                        </div>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          className="gap-2"
+                          onClick={() => {
+                            openAulaSheet();
+                            setActiveTab('calendario');
+                          }}
+                        >
+                          <Plus className="size-3.5" />
+                          {t('actions.newLesson')}
+                        </Button>
+                      </div>
                     </div>
-                    <div>
-                      <p className="text-xs text-muted-foreground">
-                        {t('info.schedule')}
-                      </p>
-                      <p className="text-sm font-medium">{turma.horario}</p>
+                  ) : (
+                    <div className="grid gap-3 sm:grid-cols-2">
+                      {aulasState
+                        .slice(-12)
+                        .reverse()
+                        .map((aula) => {
+                          const sessionColor =
+                            aula.cor || aula.color || '#3b82f6';
+                          const isPast = getSessionEndDate(aula) < now;
+                          return (
+                            <Card
+                              key={aula.id}
+                              className="cursor-pointer overflow-hidden border-border/60 transition-all hover:-translate-y-0.5 hover:shadow-md"
+                              onClick={() => openPresenca(aula)}
+                            >
+                              <div className="flex">
+                                <div
+                                  className="w-1 shrink-0"
+                                  style={{ backgroundColor: sessionColor }}
+                                />
+                                <CardContent className="flex-1 p-3.5">
+                                  <div className="flex items-start justify-between gap-2">
+                                    <div className="min-w-0">
+                                      <h4 className="truncate text-sm font-semibold">
+                                        {aula.titulo}
+                                      </h4>
+                                      <p className="text-xs capitalize text-muted-foreground">
+                                        {format(
+                                          parseSessionDate(aula.data),
+                                          'EEE, dd/MM',
+                                          { locale: dateLocale }
+                                        )}
+                                        {' · '}
+                                        {aula.horaInicio} – {aula.horaFim}
+                                      </p>
+                                    </div>
+                                    <Badge
+                                      variant="outline"
+                                      className={cn(
+                                        'shrink-0 text-[10px]',
+                                        isPast
+                                          ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
+                                          : ''
+                                      )}
+                                    >
+                                      {isPast ? (
+                                        <CheckCircle2 className="mr-1 size-3" />
+                                      ) : aula.tipo === 'online' ? (
+                                        <Video className="mr-1 size-3" />
+                                      ) : (
+                                        <MapPin className="mr-1 size-3" />
+                                      )}
+                                      {isPast
+                                        ? t('attendance.register')
+                                        : tClasses(`type.${aula.tipo}`)}
+                                    </Badge>
+                                  </div>
+                                </CardContent>
+                              </div>
+                            </Card>
+                          );
+                        })}
                     </div>
+                  )}
+                </TabsContent>
+              </Tabs>
+            </div>
+
+            {/* ── Right: Operational Sidebar ──────────────────────────────── */}
+            <div className="space-y-3 lg:sticky lg:top-4 lg:self-start">
+              {/* Next Session */}
+              <OperationalSidebarCard
+                title={t('sidebar.nextSession') ?? 'Próxima Aula'}
+              >
+                {loading ? (
+                  <div className="space-y-2">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-4 w-24" />
                   </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>
+                ) : nextSession ? (
+                  <div className="space-y-2">
                     <div>
+                      <p className="text-sm font-semibold">
+                        {nextSession.titulo}
+                      </p>
                       <p className="text-xs text-muted-foreground">
-                        {turma.tipo === 'online'
-                          ? t('info.onlineLabel')
-                          : t('info.locationLabel')}
+                        {nextSessionStartsAt &&
+                          format(nextSessionStartsAt, "EEEE, dd 'de' MMM", {
+                            locale: dateLocale,
+                          })}
                       </p>
-                      {turma.tipo === 'online' ? (
+                    </div>
+                    <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                      <Clock className="size-3.5 shrink-0" />
+                      <span>
+                        {nextSession.horaInicio} – {nextSession.horaFim}
+                      </span>
+                    </div>
+                    {nextSession.tipo === 'online' &&
+                    (nextSession.meetingUrl || nextSession.local) ? (
+                      <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                        <Video className="size-3.5 shrink-0" />
                         <a
-                          href={turma.local}
+                          href={nextSession.meetingUrl || nextSession.local}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="text-sm font-medium text-blue-600 hover:underline"
+                          className="truncate 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>
+                      </div>
+                    ) : nextSession.local ? (
+                      <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                        <MapPin className="size-3.5 shrink-0" />
+                        <span className="truncate">{nextSession.local}</span>
+                      </div>
+                    ) : null}
+                    {nextSession.instructorName && (
+                      <div className="flex items-center gap-2 pt-1">
+                        <Avatar className="size-6">
+                          <AvatarFallback className="text-[9px]">
+                            {getPersonInitials(nextSession.instructorName)}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span className="truncate text-xs text-muted-foreground">
+                          {nextSession.instructorName}
+                        </span>
+                      </div>
                     )}
                     <Button
                       size="sm"
-                      className="gap-2"
-                      onClick={() => setAddAlunoDialogOpen(true)}
+                      className="mt-1 w-full gap-2 text-xs"
+                      onClick={() => openAulaSheet(nextSession)}
                     >
-                      <UserPlus className="size-4" />
-                      {t('students.actions.addStudent')}
+                      <CalendarIcon className="size-3.5" />
+                      {t('sidebar.openSession') ?? 'Abrir sessão'}
                     </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>
+                ) : (
+                  <div className="space-y-2">
+                    <p className="text-sm text-muted-foreground">
+                      {t('sidebar.noNextSession') ??
+                        'Nenhuma aula futura agendada.'}
+                    </p>
                     <Button
-                      variant="ghost"
                       size="sm"
-                      onClick={() => setSelectedAlunos([])}
+                      variant="outline"
+                      className="w-full gap-2 text-xs"
+                      onClick={() => openAulaSheet()}
                     >
-                      {t('students.actions.clearSelection')}
+                      <Plus className="size-3.5" />
+                      {t('actions.newLesson')}
                     </Button>
                   </div>
                 )}
+              </OperationalSidebarCard>
 
-                {/* Alunos grid */}
+              {/* Instructor */}
+              <OperationalSidebarCard
+                title={t('sidebar.instructor') ?? 'Instrutor'}
+              >
                 {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 className="flex items-center gap-2">
+                    <Skeleton className="size-8 rounded-full" />
+                    <Skeleton className="h-4 w-24" />
+                  </div>
+                ) : primaryInstructor !== 'Nao definido' ? (
+                  <div className="flex items-center gap-2.5">
+                    <Avatar className="size-9">
+                      <AvatarFallback className="bg-primary/10 text-xs font-medium text-primary">
+                        {getPersonInitials(primaryInstructor)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-sm font-semibold">
+                        {primaryInstructor}
+                      </p>
+                      <p className="text-[11px] text-muted-foreground">
+                        {t('sidebar.instructorLabel') ?? 'Instrutor principal'}
+                      </p>
+                    </div>
                   </div>
-                ) : filteredAlunos.length === 0 ? (
-                  <EmptyState
-                    icon={<Users className="h-12 w-12" />}
-                    title={
-                      alunoSearch
-                        ? t('students.empty.notFound')
-                        : t('students.empty.notEnrolled')
-                    }
-                    description={
-                      alunoSearch
-                        ? t('students.empty.notFoundDescription')
-                        : t('students.empty.notEnrolledDescription')
-                    }
-                    actionLabel={
-                      alunoSearch
-                        ? t('students.empty.clearSearch')
-                        : t('students.actions.addStudent')
-                    }
-                    onAction={() => {
-                      if (alunoSearch) {
-                        setAlunoSearch('');
-                        return;
-                      }
-
-                      setAddAlunoDialogOpen(true);
-                    }}
-                  />
                 ) : (
-                  <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-linear-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 className="flex items-center gap-2 text-muted-foreground">
+                    <div className="flex h-9 w-9 items-center justify-center rounded-full border border-dashed border-border/60 bg-muted/40">
+                      <Users className="size-4" />
+                    </div>
+                    <p className="text-xs">
+                      {t('sidebar.noInstructor') ?? 'Não definido'}
+                    </p>
                   </div>
                 )}
-              </TabsContent>
+              </OperationalSidebarCard>
 
-              {/* ── 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%' }}
-                      />
+              {/* Class Info */}
+              <OperationalSidebarCard
+                title={t('sidebar.classInfo') ?? 'Informações da Turma'}
+              >
+                <div className="space-y-2.5">
+                  {startDate && endDate && (
+                    <div className="flex items-start gap-2 text-xs">
+                      <CalendarIcon className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
+                      <div className="min-w-0">
+                        <p className="font-medium text-[10px] uppercase tracking-wide text-muted-foreground">
+                          {t('info.period')}
+                        </p>
+                        <p className="font-medium">
+                          {format(new Date(startDate), 'dd/MM/yy')}
+                          {' – '}
+                          {format(new Date(endDate), 'dd/MM/yy')}
+                        </p>
+                      </div>
                     </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)}
+                  )}
+                  {schedule !== '—' && (
+                    <div className="flex items-start gap-2 text-xs">
+                      <Clock className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
+                      <div className="min-w-0">
+                        <p className="font-medium text-[10px] uppercase tracking-wide text-muted-foreground">
+                          {t('info.schedule')}
+                        </p>
+                        <p className="font-medium">{schedule}</p>
+                      </div>
+                    </div>
+                  )}
+                  <div className="flex items-start gap-2 text-xs">
+                    {isOnline ? (
+                      <Video className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
+                    ) : (
+                      <MapPin className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
+                    )}
+                    <div className="min-w-0 flex-1">
+                      <p className="font-medium text-[10px] uppercase tracking-wide text-muted-foreground">
+                        {isOnline
+                          ? t('info.onlineLabel')
+                          : t('info.locationLabel')}
+                      </p>
+                      {isOnline && roomUrl ? (
+                        <div className="flex items-center gap-1">
+                          <a
+                            href={roomUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="truncate font-medium text-blue-600 hover:underline"
                           >
-                            <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>
-                        ))}
+                            {t('info.accessRoom')}
+                          </a>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="size-5 shrink-0"
+                            onClick={() => {
+                              void navigator.clipboard.writeText(roomUrl);
+                              toast.success(
+                                t('sidebar.linkCopied') ?? 'Link copiado!'
+                              );
+                            }}
+                            aria-label="Copiar link"
+                          >
+                            <Save className="size-3" />
+                          </Button>
+                        </div>
+                      ) : (
+                        <p className="font-medium">{location}</p>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex items-start gap-2 text-xs">
+                    <Monitor className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
+                    <div className="min-w-0">
+                      <p className="font-medium text-[10px] uppercase tracking-wide text-muted-foreground">
+                        {t('info.modality')}
+                      </p>
+                      <p className="font-medium capitalize">
+                        {tClasses(`type.${deliveryTypeKey}`)}
+                      </p>
+                    </div>
+                  </div>
                 </div>
-              </TabsContent>
-            </Tabs>
+              </OperationalSidebarCard>
+
+              {/* Occupancy */}
+              {capacity > 0 && (
+                <OperationalSidebarCard
+                  title={t('sidebar.occupancy') ?? 'Ocupação'}
+                >
+                  <div>
+                    <div className="mb-2 flex items-baseline justify-between">
+                      <div className="flex items-baseline gap-1">
+                        <span className="text-2xl font-bold tabular-nums">
+                          {occupiedSeats}
+                        </span>
+                        <span className="text-sm text-muted-foreground">
+                          / {capacity}
+                        </span>
+                      </div>
+                      <span
+                        className={cn(
+                          'text-sm font-semibold tabular-nums',
+                          occupancyRate >= 90
+                            ? 'text-red-600'
+                            : occupancyRate >= 70
+                              ? 'text-amber-600'
+                              : 'text-emerald-600'
+                        )}
+                      >
+                        {occupancyRate}%
+                      </span>
+                    </div>
+                    <div className="mb-2 h-1.5 w-full overflow-hidden rounded-full bg-muted">
+                      <div
+                        className={cn(
+                          'h-full rounded-full transition-all',
+                          occupancyRate >= 90
+                            ? 'bg-red-500'
+                            : occupancyRate >= 70
+                              ? 'bg-amber-500'
+                              : 'bg-emerald-500'
+                        )}
+                        style={{ width: `${occupancyRate}%` }}
+                      />
+                    </div>
+                    <p className="text-xs text-muted-foreground">
+                      {availableSeats > 0
+                        ? `${availableSeats} ${t('sidebar.seatsAvailable') ?? 'vagas disponíveis'}`
+                        : (t('sidebar.classFull') ?? 'Turma lotada')}
+                    </p>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="mt-2 w-full gap-2 text-xs"
+                      onClick={() => setActiveTab('alunos')}
+                    >
+                      <Users className="size-3.5" />
+                      {t('sidebar.viewStudents') ?? 'Ver alunos'}
+                    </Button>
+                  </div>
+                </OperationalSidebarCard>
+              )}
+            </div>
           </motion.div>
         </motion.div>
       </div>
 
-      {/* ── Dialog Adicionar Alunos ──────────────────────────────────────────── */}
-      <Dialog open={addAlunoDialogOpen} onOpenChange={setAddAlunoDialogOpen}>
-        <DialogContent className=" max-w-3xl">
+      <CreateLmsStudentPersonSheet
+        open={createStudentDialogOpen}
+        onOpenChange={setCreateStudentDialogOpen}
+        classGroupId={id}
+        onEnrolled={handleStudentEnrolled}
+        title={t('dialogs.createStudent.title')}
+        description={t('dialogs.createStudent.description')}
+        errorMessage={t('toasts.error')}
+        alreadyEnrolledMessage="Esta pessoa ja esta matriculada na turma."
+      />
+
+      <Dialog
+        open={studentProfileDialogOpen}
+        onOpenChange={setStudentProfileDialogOpen}
+      >
+        <DialogContent className="max-w-lg">
           <DialogHeader>
-            <DialogTitle>{t('dialogs.addStudents.title')}</DialogTitle>
+            <DialogTitle>{t('dialogs.studentProfile.title')}</DialogTitle>
             <DialogDescription>
-              {t('dialogs.addStudents.description')}
+              {t('dialogs.studentProfile.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}
+
+          {loadingStudentProfile ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="size-5 animate-spin" />
+            </div>
+          ) : selectedStudentProfile ? (
+            <div className="space-y-3">
+              <div className="rounded-lg border p-3">
+                <p className="text-xs text-muted-foreground">
+                  {t('dialogs.studentProfile.fields.name')}
+                </p>
+                <p className="font-medium">{selectedStudentProfile.nome}</p>
+              </div>
+              <div className="rounded-lg border p-3">
+                <p className="text-xs text-muted-foreground">
+                  {t('dialogs.studentProfile.fields.email')}
+                </p>
+                <p className="font-medium">
+                  {selectedStudentProfile.email || '—'}
+                </p>
+              </div>
+              <div className="rounded-lg border p-3">
+                <p className="text-xs text-muted-foreground">
+                  {t('dialogs.studentProfile.fields.phone')}
+                </p>
+                <p className="font-medium">
+                  {selectedStudentProfile.telefone || '—'}
+                </p>
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="rounded-lg border p-3">
+                  <p className="text-xs text-muted-foreground">
+                    {t('dialogs.studentProfile.fields.progress')}
+                  </p>
+                  <p className="font-medium">
+                    {selectedStudentProfile.progresso}%
+                  </p>
+                </div>
+                <div className="rounded-lg border p-3">
+                  <p className="text-xs text-muted-foreground">
+                    {t('dialogs.studentProfile.fields.enrolledAt')}
+                  </p>
+                  <p className="font-medium">
+                    {selectedStudentProfile.matriculadoEm
+                      ? format(
+                          parseSessionDate(
+                            selectedStudentProfile.matriculadoEm
+                          ),
+                          'dd/MM/yyyy'
+                        )
+                      : '—'}
                   </p>
                 </div>
               </div>
-            ))}
-          </div>
+            </div>
+          ) : null}
+
           <DialogFooter>
             <Button
               variant="outline"
-              onClick={() => {
-                setAddAlunoDialogOpen(false);
-                setAlunosToAdd([]);
-              }}
+              onClick={() => setStudentProfileDialogOpen(false)}
             >
               {t('common.cancel')}
             </Button>
-            <Button
-              onClick={handleAddAlunos}
-              disabled={alunosToAdd.length === 0}
-            >
-              {t('dialogs.addStudents.confirm')}{' '}
-              {alunosToAdd.length > 0 && `(${alunosToAdd.length})`}
+            <Button onClick={openEditStudentSheet} className="gap-2">
+              <Pencil className="size-4" />
+              {t('common.edit')}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
+      <Sheet open={editStudentSheetOpen} onOpenChange={setEditStudentSheetOpen}>
+        <SheetContent
+          side="right"
+          className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+        >
+          <SheetHeader>
+            <SheetTitle>{t('dialogs.editStudent.title')}</SheetTitle>
+            <SheetDescription>
+              {t('dialogs.editStudent.description')}
+            </SheetDescription>
+          </SheetHeader>
+
+          <Form {...editStudentForm}>
+            <form
+              onSubmit={handleUpdateStudentProfile}
+              className="mt-6 space-y-3 px-4"
+            >
+              <FormField
+                control={editStudentForm.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      {t('dialogs.editStudent.fields.name')}
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder={t(
+                          'dialogs.editStudent.fields.namePlaceholder'
+                        )}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={editStudentForm.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      {t('dialogs.editStudent.fields.email')}
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        type="email"
+                        {...field}
+                        placeholder={t(
+                          'dialogs.editStudent.fields.emailPlaceholder'
+                        )}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={editStudentForm.control}
+                name="phone"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      {t('dialogs.editStudent.fields.phone')}
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder={t(
+                          'dialogs.editStudent.fields.phonePlaceholder'
+                        )}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <SheetFooter className="mt-6 px-0">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => {
+                    setEditStudentSheetOpen(false);
+                    setStudentProfileDialogOpen(true);
+                  }}
+                >
+                  {t('common.cancel')}
+                </Button>
+                <Button
+                  type="submit"
+                  disabled={savingStudentProfile}
+                  className="gap-2"
+                >
+                  {savingStudentProfile && (
+                    <Loader2 className="size-4 animate-spin" />
+                  )}
+                  {t('common.save')}
+                </Button>
+              </SheetFooter>
+            </form>
+          </Form>
+        </SheetContent>
+      </Sheet>
+
       {/* ── Dialog Remover Aluno ─────────────────────────────────────────────── */}
       <Dialog
         open={removeAlunoDialogOpen}
@@ -1191,7 +2961,13 @@ export default function TurmaDetalhePage() {
             >
               {t('common.cancel')}
             </Button>
-            <Button variant="destructive" onClick={handleRemoveAluno}>
+            <Button
+              variant="destructive"
+              onClick={handleRemoveAluno}
+              disabled={removingStudent}
+              className="gap-2"
+            >
+              {removingStudent && <Loader2 className="size-4 animate-spin" />}
               {t('common.remove')}
             </Button>
           </DialogFooter>
@@ -1200,7 +2976,10 @@ export default function TurmaDetalhePage() {
 
       {/* ── Sheet Aula ───────────────────────────────────────────────────────── */}
       <Sheet open={aulaSheetOpen} onOpenChange={setAulaSheetOpen}>
-        <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+        <SheetContent
+          side="right"
+          className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+        >
           <SheetHeader>
             <SheetTitle>
               {editingAula
@@ -1213,196 +2992,554 @@ export default function TurmaDetalhePage() {
                 : 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>
+          <Tabs
+            value={aulaSheetTab}
+            onValueChange={(value) =>
+              setAulaSheetTab(value as 'aulas' | 'chamada')
+            }
+            className="mt-6 px-4"
+          >
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="aulas">{t('sheet.tabs.lessons')}</TabsTrigger>
+              <TabsTrigger value="chamada">
+                {t('sheet.tabs.attendance')}
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="aulas" className="mt-4">
+              <form onSubmit={handleSaveAula} className="space-y-5">
+                <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>
+                </Field>
 
-            <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>
+                <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>
 
-            <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>
+                <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>
 
-      {/* ── 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>
+                <Field>
+                  <FieldLabel>{t('sheet.lessonForm.fields.color')}</FieldLabel>
+                  <Controller
+                    name="cor"
+                    control={aulaForm.control}
+                    render={({ field }) => (
+                      <>
+                        <div className="flex flex-wrap gap-2">
+                          {SESSION_COLOR_PALETTE.map((colorOption) => {
+                            const selected = field.value === colorOption;
 
-          <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>
+                            return (
+                              <button
+                                key={colorOption}
+                                type="button"
+                                aria-label={colorOption}
+                                title={colorOption}
+                                className={`h-8 w-8 cursor-pointer rounded-full border-2 transition ${selected ? 'border-foreground scale-110' : 'border-transparent hover:scale-105'}`}
+                                style={{ backgroundColor: colorOption }}
+                                onClick={() => field.onChange(colorOption)}
+                              />
+                            );
+                          })}
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                          {t('sheet.lessonForm.fields.colorHint')}
+                        </p>
+                      </>
+                    )}
+                  />
+                  {aulaForm.formState.errors.cor && (
+                    <FieldError>
+                      {aulaForm.formState.errors.cor.message}
+                    </FieldError>
+                  )}
+                </Field>
 
-            {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)}
-                    />
+                {showRecurrenceFields ? (
+                  <div className="space-y-4 rounded-lg border border-border/60 bg-muted/20 p-4">
+                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                      <Field>
+                        <FieldLabel>
+                          {t('sheet.lessonForm.recurrence.label')}
+                        </FieldLabel>
+                        <Controller
+                          name="recurrenceFrequency"
+                          control={aulaForm.control}
+                          render={({ field }) => (
+                            <Select
+                              value={field.value}
+                              onValueChange={(value) =>
+                                field.onChange(
+                                  value as SessionRecurrenceFrequency
+                                )
+                              }
+                            >
+                              <SelectTrigger>
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {!editingAula?.isRecurring ? (
+                                  <SelectItem value="none">
+                                    {t(
+                                      'sheet.lessonForm.recurrence.options.none'
+                                    )}
+                                  </SelectItem>
+                                ) : null}
+                                <SelectItem value="daily">
+                                  {t(
+                                    'sheet.lessonForm.recurrence.options.daily'
+                                  )}
+                                </SelectItem>
+                                <SelectItem value="weekly">
+                                  {t(
+                                    'sheet.lessonForm.recurrence.options.weekly'
+                                  )}
+                                </SelectItem>
+                                <SelectItem value="monthly">
+                                  {t(
+                                    'sheet.lessonForm.recurrence.options.monthly'
+                                  )}
+                                </SelectItem>
+                                <SelectItem value="yearly">
+                                  {t(
+                                    'sheet.lessonForm.recurrence.options.yearly'
+                                  )}
+                                </SelectItem>
+                              </SelectContent>
+                            </Select>
+                          )}
+                        />
+                      </Field>
+
+                      {recurrenceFrequency !== 'none' ? (
+                        <Field>
+                          <FieldLabel>
+                            {t('sheet.lessonForm.recurrence.until')}
+                          </FieldLabel>
+                          <Input
+                            type="date"
+                            {...aulaForm.register('recurrenceUntil')}
+                          />
+                          {aulaForm.formState.errors.recurrenceUntil && (
+                            <FieldError>
+                              {
+                                aulaForm.formState.errors.recurrenceUntil
+                                  .message
+                              }
+                            </FieldError>
+                          )}
+                        </Field>
+                      ) : null}
+                    </div>
+
+                    {recurrenceFrequency === 'weekly' ? (
+                      <Field>
+                        <FieldLabel>
+                          {t('sheet.lessonForm.recurrence.daysLabel')}
+                        </FieldLabel>
+                        <div className="grid grid-cols-4 gap-2 sm:grid-cols-7">
+                          {RECURRENCE_DAY_LABELS.map((day) => {
+                            const selected = recurrenceDaysOfWeek.includes(
+                              day.value
+                            );
+
+                            return (
+                              <Button
+                                key={day.value}
+                                type="button"
+                                variant={selected ? 'default' : 'outline'}
+                                size="sm"
+                                className="h-9"
+                                onClick={() => {
+                                  const nextValue = selected
+                                    ? recurrenceDaysOfWeek.filter(
+                                        (value) => value !== day.value
+                                      )
+                                    : [...recurrenceDaysOfWeek, day.value];
+
+                                  aulaForm.setValue(
+                                    'recurrenceDaysOfWeek',
+                                    nextValue,
+                                    {
+                                      shouldDirty: true,
+                                      shouldTouch: true,
+                                      shouldValidate: true,
+                                    }
+                                  );
+                                }}
+                              >
+                                {t(day.labelKey)}
+                              </Button>
+                            );
+                          })}
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                          {t('sheet.lessonForm.recurrence.weeklyHint')}
+                        </p>
+                      </Field>
+                    ) : null}
+
+                    {editingAula?.isRecurring ? (
+                      <Field>
+                        <FieldLabel>
+                          {t('sheet.lessonForm.recurrence.applyScope')}
+                        </FieldLabel>
+                        <Controller
+                          name="applyScope"
+                          control={aulaForm.control}
+                          render={({ field }) => (
+                            <Select
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            >
+                              <SelectTrigger>
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="single">
+                                  {t(
+                                    'sheet.lessonForm.recurrence.applyScopeSingle'
+                                  )}
+                                </SelectItem>
+                                <SelectItem value="series">
+                                  {t(
+                                    'sheet.lessonForm.recurrence.applyScopeSeries'
+                                  )}
+                                </SelectItem>
+                              </SelectContent>
+                            </Select>
+                          )}
+                        />
+                        <p className="text-xs text-muted-foreground">
+                          {t('sheet.lessonForm.recurrence.applyScopeHint')}
+                        </p>
+                      </Field>
+                    ) : null}
                   </div>
+                ) : null}
+
+                <Field>
+                  <FieldLabel>
+                    {t('sheet.lessonForm.fields.instructor')}
+                  </FieldLabel>
+                  <Controller
+                    name="instrutorId"
+                    control={aulaForm.control}
+                    render={({ field }) => (
+                      <div className="flex items-end gap-2">
+                        <div className="flex-1">
+                          <Popover
+                            open={instructorOpen}
+                            onOpenChange={setInstructorOpen}
+                          >
+                            <PopoverTrigger asChild>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                role="combobox"
+                                className="w-full justify-between"
+                              >
+                                <span className="truncate text-left">
+                                  {instructorOptions.find(
+                                    (instructor) =>
+                                      String(instructor.id) === field.value
+                                  )?.name ||
+                                    editingAula?.instructorName ||
+                                    t(
+                                      'sheet.lessonForm.fields.instructorPlaceholder'
+                                    )}
+                                </span>
+                                {loadingInstructors ? (
+                                  <Loader2 className="ml-2 h-4 w-4 shrink-0 animate-spin opacity-60" />
+                                ) : (
+                                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                )}
+                              </Button>
+                            </PopoverTrigger>
+                            <PopoverContent className="p-0" align="start">
+                              <Command shouldFilter={false}>
+                                <CommandInput
+                                  placeholder={t(
+                                    'sheet.lessonForm.fields.instructorPlaceholder'
+                                  )}
+                                  value={instructorSearch}
+                                  onValueChange={setInstructorSearch}
+                                />
+                                <CommandList>
+                                  <CommandEmpty>
+                                    <div className="flex flex-col items-center gap-3 px-2 py-4">
+                                      <p className="text-sm text-muted-foreground">
+                                        {t(
+                                          'sheet.lessonForm.fields.instructorNotFound'
+                                        )}
+                                      </p>
+                                      <Button
+                                        type="button"
+                                        variant="outline"
+                                        size="sm"
+                                        className="w-full"
+                                        onClick={() => {
+                                          setInstructorOpen(false);
+                                          setCreateInstructorDialogOpen(true);
+                                        }}
+                                      >
+                                        <Plus className="mr-2 h-4 w-4" />
+                                        {t(
+                                          'sheet.lessonForm.fields.createInstructor'
+                                        )}
+                                      </Button>
+                                    </div>
+                                  </CommandEmpty>
+                                  <CommandGroup>
+                                    {instructorOptions.map((instructor) => (
+                                      <CommandItem
+                                        key={instructor.id}
+                                        value={`${instructor.name}-${instructor.id}`}
+                                        onSelect={() => {
+                                          field.onChange(String(instructor.id));
+                                          setInstructorOpen(false);
+                                          setInstructorSearch('');
+                                        }}
+                                      >
+                                        {instructor.name}
+                                      </CommandItem>
+                                    ))}
+                                  </CommandGroup>
+                                </CommandList>
+                              </Command>
+                            </PopoverContent>
+                          </Popover>
+                        </div>
+
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="icon"
+                          className="shrink-0"
+                          onClick={() => setCreateInstructorDialogOpen(true)}
+                          aria-label={t(
+                            'sheet.lessonForm.fields.createInstructor'
+                          )}
+                        >
+                          <Plus className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    )}
+                  />
+                </Field>
+
+                <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" disabled={savingAula} className="gap-2">
+                    {savingAula && <Loader2 className="size-4 animate-spin" />}
+                    {editingAula
+                      ? t('sheet.lessonForm.actions.save')
+                      : t('sheet.lessonForm.actions.create')}
+                  </Button>
+                </SheetFooter>
+              </form>
+            </TabsContent>
+
+            <TabsContent value="chamada" className="mt-4 space-y-4">
+              <div className="flex items-center justify-between text-sm text-muted-foreground">
+                <span>
+                  {t('sheet.attendance.summary', {
+                    present: presencaList.filter(
+                      (p) => p.selecionado && p.presente
+                    ).length,
+                    total: presencaList.filter((p) => p.selecionado).length,
+                  })}
+                </span>
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      setPresencaList((prev) =>
+                        prev.map((p) =>
+                          p.selecionado ? { ...p, presente: true } : p
+                        )
+                      )
+                    }
+                  >
+                    {t('sheet.attendance.allPresent')}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      setPresencaList((prev) =>
+                        prev.map((p) =>
+                          p.selecionado ? { ...p, presente: false } : p
+                        )
+                      )
+                    }
+                  >
+                    {t('sheet.attendance.allAbsent')}
+                  </Button>
                 </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>
+              <div className="space-y-2">
+                {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.selecionado ? (presenca.presente ? 'bg-emerald-50/50 border-emerald-200' : 'bg-red-50/50 border-red-200') : 'bg-muted/30 border-border/60'}`}
+                    >
+                      <div className="flex items-center gap-3">
+                        <Checkbox
+                          checked={presenca.selecionado}
+                          onCheckedChange={() => toggleParticipante(aluno.id)}
+                          aria-label={t('sheet.attendance.participantLabel')}
+                        />
+                        <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.selecionado ? (presenca.presente ? 'text-emerald-600' : 'text-red-600') : 'text-muted-foreground'}`}
+                        >
+                          {presenca.selecionado
+                            ? presenca.presente
+                              ? t('sheet.attendance.present')
+                              : t('sheet.attendance.absent')
+                            : t('sheet.attendance.notParticipant')}
+                        </span>
+                        <Switch
+                          checked={presenca.presente}
+                          disabled={!presenca.selecionado}
+                          onCheckedChange={() => togglePresenca(aluno.id)}
+                        />
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+
+              <SheetFooter className="mt-6 px-0">
+                <Button
+                  onClick={handleSaveAttendanceOnly}
+                  disabled={savingAula || savingPresenca}
+                  className="gap-2"
+                >
+                  {savingAula || savingPresenca ? (
+                    <Loader2 className="size-4 animate-spin" />
+                  ) : (
+                    <Save className="size-4" />
+                  )}
+                  {t('sheet.attendance.save')}
+                </Button>
+              </SheetFooter>
+            </TabsContent>
+          </Tabs>
         </SheetContent>
       </Sheet>
+
+      <CreateLmsPersonSheet
+        open={createInstructorDialogOpen}
+        onOpenChange={setCreateInstructorDialogOpen}
+        onCreated={handleInstructorCreated}
+        title={t('sheet.lessonForm.createInstructorTitle')}
+        description={t('sheet.lessonForm.createInstructorDescription')}
+        errorMessage={t('sheet.lessonForm.createInstructorError')}
+        defaultQualificationSlugs={['class-sessions']}
+      />
+
+      <ClassFormSheet
+        open={editSheetOpen}
+        onOpenChange={setEditSheetOpen}
+        classId={id}
+        onSaved={async () => {
+          await Promise.all([refetchTurma(), refetchAulas(), refetchAlunos()]);
+          notifyLmsDataUpdated();
+        }}
+      />
     </Page>
   );
 }