@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -5,10 +5,21 @@ import {
   Page,
   PageHeader,
   PaginationFooter,
+  SearchBar,
+  ViewModeToggle,
 } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
 import { Card, CardContent } from '@/components/ui/card';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
 import {
   Dialog,
   DialogContent,
@@ -24,8 +35,20 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { Field, FieldError, FieldLabel } from '@/components/ui/field';
+import { EntityPicker } from '@/components/ui/entity-picker';
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from '@/components/ui/field';
 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,
@@ -42,12 +65,25 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { usePersistedViewMode } from '@/hooks/use-persisted-view-mode';
+import { formatDate as formatDateLocalized } from '@/lib/format-date';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { format } from 'date-fns';
 import { motion } from 'framer-motion';
 import {
   AlertTriangle,
   BarChart3,
-  Calendar,
+  CalendarIcon,
+  ChevronsUpDown,
   Clock,
   Eye,
   Laptop,
@@ -57,18 +93,27 @@ import {
   MoreHorizontal,
   Pencil,
   Plus,
-  Search,
   Trash2,
   Users,
   Users2,
   X,
+  type LucideIcon,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { usePathname, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
+import type { DateRange } from 'react-day-picker';
+import { Controller, useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
+import {
+  CourseFormSheet,
+  DEFAULT_COURSE_FORM_VALUES,
+  getCourseSheetSchema,
+  type CourseCategoryOption,
+  type CourseSheetFormValues,
+} from '../_components/course-form-sheet';
+import { CreateLmsPersonSheet } from '../_components/create-lms-person-sheet';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -77,58 +122,424 @@ interface Turma {
   codigo: string;
   curso: string;
   cursoId: number;
+  instructorId?: number | null;
+  primaryColor?: string | null;
   tipo: 'presencial' | 'online' | 'hibrida';
   dataInicio: string;
   dataFim: string;
-  horario: string;
+  horarioInicio: string;
+  horarioFim: string;
   status: 'aberta' | 'em_andamento' | 'concluida' | 'cancelada';
   vagas: number;
   matriculados: number;
   professor: string;
+  sessionTitle?: string | null;
+  sessionRecurrenceSummary?: SessionRecurrenceSummary | null;
+}
+
+type SessionRecurrenceFrequency = 'daily' | 'weekly' | 'monthly' | 'yearly';
+type SessionRecurrenceMode =
+  | 'none'
+  | 'daily'
+  | 'weekly'
+  | 'monthly'
+  | 'yearly'
+  | 'weekdays'
+  | 'custom';
+type SessionRecurrenceDay = 'MO' | 'TU' | 'WE' | 'TH' | 'FR' | 'SA' | 'SU';
+
+type SessionRecurrenceSummary = {
+  frequency?: SessionRecurrenceFrequency;
+  interval?: number;
+  until?: string;
+  daysOfWeek?: SessionRecurrenceDay[];
+  isRecurring: boolean;
+};
+
+type ApiClass = {
+  id: number;
+  code: string;
+  title: string;
+  primaryColor?: string | null;
+  deliveryMode: 'presential' | 'online' | 'hybrid';
+  status: 'open' | 'ongoing' | 'completed' | 'cancelled';
+  startDate: string;
+  endDate: string | null;
+  startTime: string | null;
+  endTime: string | null;
+  capacity: number;
+  courseId: number;
+  instructorId?: number | null;
+  courseTitle: string;
+  enrolledCount: number;
+  professor?: string | null;
+  professorName?: string | null;
+  instructor?: string | null;
+  instructorName?: string | null;
+  sessionTitle?: string | null;
+  sessionRecurrenceSummary?: SessionRecurrenceSummary | null;
+};
+
+type ApiClassList = {
+  data: ApiClass[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage: number;
+};
+
+type ApiClassStats = {
+  totalClasses: number;
+  ongoingClasses: number;
+  openVacancies: number;
+  occupancyRate: number;
+};
+
+type ApiCourseList = {
+  data: Array<{ id: number; title: string }>;
+  total?: number;
+  page?: number;
+  pageSize?: number;
+  lastPage?: number;
+};
+
+type ApiCategory = {
+  id: number;
+  slug: string;
+  name: string;
+  status?: 'active' | 'inactive';
+};
+
+type ApiCategoryList = {
+  data: ApiCategory[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+type ApiCreatedCourse = {
+  id: number;
+  title: string;
+};
+
+type 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[];
+};
+
+type Locale = {
+  id?: number;
+  code: string;
+  name: string;
+};
+
+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,
+  };
+}
+
+function getCourseIdByTitle(
+  courses: Array<{ id: number; title: string }>,
+  title: string
+) {
+  return courses.find((course) => course.title === title)?.id;
+}
+
+function toApiCourseLevel(level: CourseSheetFormValues['nivel']) {
+  if (level === 'iniciante') return 'beginner';
+  if (level === 'intermediario') return 'intermediate';
+  return 'advanced';
+}
+
+function toApiCourseStatus(status: CourseSheetFormValues['status']) {
+  if (status === 'ativo') return 'published';
+  if (status === 'rascunho') return 'draft';
+  return 'archived';
+}
+
+function getContrastColor(hex: string) {
+  const cleaned = hex.replace('#', '');
+  if (cleaned.length !== 6) return '#FFFFFF';
+
+  const r = parseInt(cleaned.slice(0, 2), 16);
+  const g = parseInt(cleaned.slice(2, 4), 16);
+  const b = parseInt(cleaned.slice(4, 6), 16);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+  return luminance > 0.6 ? '#111827' : '#FFFFFF';
+}
+
+function parseFormDate(value: string) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value ?? '');
+
+  if (!match) {
+    return null;
+  }
+
+  return new Date(
+    Number(match[1]),
+    Number(match[2]) - 1,
+    Number(match[3]),
+    12,
+    0,
+    0,
+    0
+  );
+}
+
+function getDayCodeFromDate(value?: string): SessionRecurrenceDay {
+  const date = parseFormDate(value ?? '') ?? new Date();
+  return ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'][
+    date.getDay()
+  ] as SessionRecurrenceDay;
+}
+
+function getDefaultSessionTitle(courseTitle?: string, code?: string) {
+  return [courseTitle?.trim(), code?.trim()].filter(Boolean).join(' - ');
+}
+
+function toApiType(tipo: string) {
+  if (tipo === 'presencial') return 'presential';
+  if (tipo === 'hibrida') return 'hybrid';
+  return 'online';
+}
+
+function toApiStatus(status: string) {
+  if (status === 'aberta') return 'open';
+  if (status === 'em_andamento') return 'ongoing';
+  if (status === 'concluida') return 'completed';
+  return 'cancelled';
+}
+
+function toPtType(tipo: ApiClass['deliveryMode']): Turma['tipo'] {
+  if (tipo === 'presential') return 'presencial';
+  if (tipo === 'hybrid') return 'hibrida';
+  return 'online';
+}
+
+function toPtStatus(status: ApiClass['status']): Turma['status'] {
+  if (status === 'open') return 'aberta';
+  if (status === 'ongoing') return 'em_andamento';
+  if (status === 'completed') return 'concluida';
+  return 'cancelada';
+}
+
+function getDateOnly(value?: string | null) {
+  if (!value) return '';
+  return value.slice(0, 10);
+}
+
+function formatSchedule(startTime?: string | null, endTime?: string | null) {
+  if (!startTime && !endTime) return '';
+  if (!startTime) return endTime ?? '';
+  if (!endTime) return startTime;
+
+  return `${startTime} - ${endTime}`;
+}
+
+function mapApiClass(item: ApiClass): Turma {
+  const professorName =
+    item.professorName ??
+    item.professor ??
+    item.instructorName ??
+    item.instructor;
+
+  return {
+    id: item.id,
+    codigo: item.code,
+    curso: item.courseTitle,
+    cursoId: item.courseId,
+    instructorId: item.instructorId ?? null,
+    primaryColor: item.primaryColor,
+    tipo: toPtType(item.deliveryMode),
+    dataInicio: getDateOnly(item.startDate),
+    dataFim: getDateOnly(item.endDate),
+    horarioInicio: item.startTime ?? '',
+    horarioFim: item.endTime ?? '',
+    status: toPtStatus(item.status),
+    vagas: item.capacity,
+    matriculados: item.enrolledCount,
+    professor: professorName?.trim() || '-',
+    sessionTitle: item.sessionTitle ?? null,
+    sessionRecurrenceSummary: item.sessionRecurrenceSummary ?? null,
+  };
 }
 
 // ── Schema ────────────────────────────────────────────────────────────────────
 
 function getTurmaSchema(t: (key: string) => string) {
-  return z.object({
-    codigo: z.string().min(3, t('form.validation.codigoMinLength')),
-    curso: z.string().min(1, t('form.validation.cursoRequired')),
-    tipo: z.string().min(1, t('form.validation.tipoRequired')),
-    professor: z.string().min(3, t('form.validation.professorMinLength')),
-    vagas: z.coerce.number().min(1, t('form.validation.vagasMin')),
-    dataInicio: z.string().min(1, t('form.validation.dataInicioRequired')),
-    dataFim: z.string().min(1, t('form.validation.dataFimRequired')),
-    horario: z.string().min(1, t('form.validation.horarioRequired')),
-    status: z.string().min(1, t('form.validation.statusRequired')),
-  });
+  return z
+    .object({
+      codigo: z.string().min(3, t('form.validation.codigoMinLength')),
+      curso: z.string().optional(),
+      courseId: z.coerce
+        .number({
+          invalid_type_error: t('form.validation.cursoRequired'),
+        })
+        .int()
+        .positive(t('form.validation.cursoRequired')),
+      tipo: z.string().min(1, t('form.validation.tipoRequired')),
+      professor: z.string().min(3, t('form.validation.professorMinLength')),
+      vagas: z.coerce.number().min(1, t('form.validation.vagasMin')),
+      dataInicio: z.string().min(1, t('form.validation.dataInicioRequired')),
+      dataFim: z.string().min(1, t('form.validation.dataFimRequired')),
+      horarioInicio: z
+        .string()
+        .min(1, t('form.validation.horarioInicioRequired'))
+        .regex(
+          /^([01]\d|2[0-3]):([0-5]\d)$/,
+          t('form.validation.horarioFormato')
+        ),
+      horarioFim: z
+        .string()
+        .min(1, t('form.validation.horarioFimRequired'))
+        .regex(
+          /^([01]\d|2[0-3]):([0-5]\d)$/,
+          t('form.validation.horarioFormato')
+        ),
+      sessionRecurrenceMode: z
+        .enum([
+          'none',
+          'daily',
+          'weekly',
+          'monthly',
+          'yearly',
+          'weekdays',
+          'custom',
+        ] as const)
+        .default('none'),
+      sessionRecurrenceCustomFrequency: z
+        .enum(['daily', 'weekly', 'monthly', 'yearly'] as const)
+        .default('weekly'),
+      sessionRecurrenceInterval: z.coerce
+        .number()
+        .min(1, t('form.validation.sessionRecurrenceIntervalMin'))
+        .default(1),
+      sessionRecurrenceDaysOfWeek: z
+        .array(z.enum(['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'] as const))
+        .default([]),
+      sessionRecurrenceUntil: z.string().optional(),
+      sessionTitleMode: z
+        .enum(['default-course-code', 'custom'] as const)
+        .default('default-course-code'),
+      sessionTitle: z.string().optional(),
+      status: z.string().min(1, t('form.validation.statusRequired')),
+      instructorId: z.number().int().positive().optional(),
+    })
+    .superRefine((values, ctx) => {
+      if (
+        values.dataInicio &&
+        values.dataFim &&
+        values.dataFim < values.dataInicio
+      ) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['dataFim'],
+          message: 'A data final nao pode ser anterior a data inicial.',
+        });
+      }
+
+      if (
+        values.horarioInicio &&
+        values.horarioFim &&
+        values.horarioFim < values.horarioInicio
+      ) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['horarioFim'],
+          message: 'O horario final nao pode ser anterior ao horario inicial.',
+        });
+      }
+
+      if (values.sessionRecurrenceMode !== 'none') {
+        if (!values.sessionRecurrenceUntil) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ['sessionRecurrenceUntil'],
+            message: t('form.validation.sessionRecurrenceUntilRequired'),
+          });
+        } else if (values.sessionRecurrenceUntil < values.dataInicio) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ['sessionRecurrenceUntil'],
+            message: t('form.validation.sessionRecurrenceUntilAfterStart'),
+          });
+        }
+      }
+
+      const requiresDays =
+        values.sessionRecurrenceMode === 'weekly' ||
+        values.sessionRecurrenceMode === 'weekdays' ||
+        (values.sessionRecurrenceMode === 'custom' &&
+          values.sessionRecurrenceCustomFrequency === 'weekly');
+
+      if (requiresDays && values.sessionRecurrenceDaysOfWeek.length === 0) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['sessionRecurrenceDaysOfWeek'],
+          message: t('form.validation.sessionRecurrenceDaysRequired'),
+        });
+      }
+    });
 }
 
 type TurmaForm = {
   codigo: string;
   curso: string;
+  courseId?: number;
+  instructorId?: number;
   tipo: string;
   professor: string;
   vagas: number;
   dataInicio: string;
   dataFim: string;
-  horario: string;
+  horarioInicio: string;
+  horarioFim: string;
+  sessionRecurrenceMode: SessionRecurrenceMode;
+  sessionRecurrenceCustomFrequency: SessionRecurrenceFrequency;
+  sessionRecurrenceInterval: number;
+  sessionRecurrenceDaysOfWeek: SessionRecurrenceDay[];
+  sessionRecurrenceUntil?: string;
+  sessionTitleMode: 'default-course-code' | 'custom';
+  sessionTitle?: string;
   status: string;
 };
 
-// ── Constants ─────────────────────────────────────────────────────────────────
+type ViewMode = 'cards' | 'list';
 
-const CURSOS = [
-  'React Avancado',
-  'UX Design Fundamentals',
-  'Python para Data Science',
-  'Gestao de Projetos Ageis',
-  'Node.js Completo',
-  'Marketing Digital',
-  'TypeScript na Pratica',
-  'Design System',
-  'Excel para Negocios',
-  'Lideranca e Comunicacao',
-];
+// ── Constants ─────────────────────────────────────────────────────────────────
 
 const STATUS_VARIANT: Record<
   string,
@@ -140,191 +551,110 @@ const STATUS_VARIANT: Record<
   cancelada: 'destructive',
 };
 
-const TIPO_ICON: Record<string, React.FC<{ className?: string }>> = {
+const TIPO_ICON: Record<string, LucideIcon> = {
   presencial: MapPin,
   online: Monitor,
   hibrida: Laptop,
 };
 
 const PAGE_SIZES = [6, 12, 24];
+const TIME_OPTIONS = Array.from({ length: 32 }, (_, index) => {
+  const hour = 6 + Math.floor(index / 2);
+  const minute = index % 2 === 0 ? '00' : '30';
+
+  return `${String(hour).padStart(2, '0')}:${minute}`;
+});
+
+function formatDateRangeLabel(
+  start: string | undefined,
+  end: string | undefined,
+  getSettingValue: (k: string) => any,
+  locale: string
+) {
+  if (start && end)
+    return `${formatDateLocalized(start, getSettingValue, locale)} – ${formatDateLocalized(end, getSettingValue, locale)}`;
+  if (start) return formatDateLocalized(start, getSettingValue, locale);
+  return '';
+}
+
+function buildSessionRecurrencePayload(values: TurmaForm) {
+  if (values.sessionRecurrenceMode === 'none') {
+    return undefined;
+  }
+
+  const frequency =
+    values.sessionRecurrenceMode === 'custom'
+      ? values.sessionRecurrenceCustomFrequency
+      : values.sessionRecurrenceMode === 'weekdays'
+        ? 'weekly'
+        : values.sessionRecurrenceMode;
+
+  const daysOfWeek =
+    values.sessionRecurrenceMode === 'weekdays'
+      ? (['MO', 'TU', 'WE', 'TH', 'FR'] as SessionRecurrenceDay[])
+      : frequency === 'weekly'
+        ? values.sessionRecurrenceDaysOfWeek
+        : undefined;
+
+  return {
+    frequency,
+    interval: values.sessionRecurrenceInterval,
+    until: values.sessionRecurrenceUntil!,
+    ...(daysOfWeek?.length ? { daysOfWeek } : {}),
+  };
+}
+
+function inferRecurrenceMode(
+  summary?: SessionRecurrenceSummary | null
+): SessionRecurrenceMode {
+  if (!summary?.isRecurring || !summary.frequency) {
+    return 'none';
+  }
+
+  if (
+    summary.frequency === 'weekly' &&
+    Array.isArray(summary.daysOfWeek) &&
+    summary.daysOfWeek.join(',') === 'MO,TU,WE,TH,FR' &&
+    (summary.interval ?? 1) === 1
+  ) {
+    return 'weekdays';
+  }
+
+  if ((summary.interval ?? 1) !== 1) {
+    return 'custom';
+  }
+
+  return summary.frequency;
+}
+
+function getSuggestedEndTime(startTime?: string) {
+  if (!startTime) return '';
 
-function formatDate(d: string) {
-  const [y, m, day] = d.split('-');
-  return `${day}/${m}/${y}`;
+  const startIndex = TIME_OPTIONS.indexOf(startTime);
+  if (startIndex === -1) return '';
+
+  return TIME_OPTIONS[Math.min(startIndex + 1, TIME_OPTIONS.length - 1)] ?? '';
+}
+
+function createClassCodeSeed() {
+  return `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`
+    .replace(/[^a-z0-9]/gi, '')
+    .toUpperCase();
 }
 
-// ── Seed Data ─────────────────────────────────────────────────────────────────
-
-const initialTurmas: Turma[] = [
-  {
-    id: 1,
-    codigo: 'T-2024-001',
-    curso: 'React Avancado',
-    cursoId: 1,
-    tipo: 'online',
-    dataInicio: '2024-02-01',
-    dataFim: '2024-04-30',
-    horario: '19:00 - 22:00',
-    status: 'em_andamento',
-    vagas: 30,
-    matriculados: 28,
-    professor: 'Carlos Silva',
-  },
-  {
-    id: 2,
-    codigo: 'T-2024-002',
-    curso: 'UX Design Fundamentals',
-    cursoId: 2,
-    tipo: 'presencial',
-    dataInicio: '2024-03-01',
-    dataFim: '2024-05-15',
-    horario: '14:00 - 17:00',
-    status: 'em_andamento',
-    vagas: 25,
-    matriculados: 25,
-    professor: 'Ana Oliveira',
-  },
-  {
-    id: 3,
-    codigo: 'T-2024-003',
-    curso: 'Python para Data Science',
-    cursoId: 3,
-    tipo: 'online',
-    dataInicio: '2024-04-01',
-    dataFim: '2024-07-30',
-    horario: '19:00 - 21:00',
-    status: 'aberta',
-    vagas: 35,
-    matriculados: 20,
-    professor: 'Roberto Santos',
-  },
-  {
-    id: 4,
-    codigo: 'T-2024-004',
-    curso: 'Gestao de Projetos Ageis',
-    cursoId: 4,
-    tipo: 'hibrida',
-    dataInicio: '2024-01-15',
-    dataFim: '2024-03-15',
-    horario: '08:00 - 11:00',
-    status: 'concluida',
-    vagas: 20,
-    matriculados: 18,
-    professor: 'Maria Costa',
-  },
-  {
-    id: 5,
-    codigo: 'T-2024-005',
-    curso: 'Node.js Completo',
-    cursoId: 5,
-    tipo: 'online',
-    dataInicio: '2024-05-01',
-    dataFim: '2024-08-30',
-    horario: '19:00 - 22:00',
-    status: 'aberta',
-    vagas: 30,
-    matriculados: 12,
-    professor: 'Pedro Almeida',
-  },
-  {
-    id: 6,
-    codigo: 'T-2024-006',
-    curso: 'Marketing Digital',
-    cursoId: 6,
-    tipo: 'presencial',
-    dataInicio: '2024-06-01',
-    dataFim: '2024-08-30',
-    horario: '10:00 - 12:00',
-    status: 'cancelada',
-    vagas: 40,
-    matriculados: 0,
-    professor: 'Julia Ferreira',
-  },
-  {
-    id: 7,
-    codigo: 'T-2024-007',
-    curso: 'TypeScript na Pratica',
-    cursoId: 7,
-    tipo: 'online',
-    dataInicio: '2024-03-15',
-    dataFim: '2024-06-15',
-    horario: '19:00 - 21:30',
-    status: 'em_andamento',
-    vagas: 25,
-    matriculados: 22,
-    professor: 'Carlos Silva',
-  },
-  {
-    id: 8,
-    codigo: 'T-2024-008',
-    curso: 'Design System',
-    cursoId: 8,
-    tipo: 'hibrida',
-    dataInicio: '2024-04-15',
-    dataFim: '2024-06-30',
-    horario: '14:00 - 16:00',
-    status: 'aberta',
-    vagas: 20,
-    matriculados: 15,
-    professor: 'Ana Oliveira',
-  },
-  {
-    id: 9,
-    codigo: 'T-2024-009',
-    curso: 'Excel para Negocios',
-    cursoId: 9,
-    tipo: 'presencial',
-    dataInicio: '2024-01-10',
-    dataFim: '2024-02-28',
-    horario: '08:00 - 10:00',
-    status: 'concluida',
-    vagas: 50,
-    matriculados: 48,
-    professor: 'Maria Costa',
-  },
-  {
-    id: 10,
-    codigo: 'T-2024-010',
-    curso: 'Lideranca e Comunicacao',
-    cursoId: 10,
-    tipo: 'presencial',
-    dataInicio: '2024-05-15',
-    dataFim: '2024-07-15',
-    horario: '18:00 - 20:00',
-    status: 'aberta',
-    vagas: 30,
-    matriculados: 8,
-    professor: 'Roberto Santos',
-  },
-  {
-    id: 11,
-    codigo: 'T-2024-011',
-    curso: 'React Avancado',
-    cursoId: 1,
-    tipo: 'hibrida',
-    dataInicio: '2024-06-01',
-    dataFim: '2024-09-30',
-    horario: '19:00 - 21:00',
-    status: 'aberta',
-    vagas: 25,
-    matriculados: 5,
-    professor: 'Carlos Silva',
-  },
-  {
-    id: 12,
-    codigo: 'T-2024-012',
-    curso: 'Python para Data Science',
-    cursoId: 3,
-    tipo: 'presencial',
-    dataInicio: '2024-01-05',
-    dataFim: '2024-03-28',
-    horario: '14:00 - 17:00',
-    status: 'concluida',
-    vagas: 30,
-    matriculados: 29,
-    professor: 'Roberto Santos',
-  },
-];
+function buildClassCode(courseTitle?: string, seed?: string) {
+  const normalizedPrefix = (courseTitle ?? '')
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9]/gi, '')
+    .toUpperCase()
+    .slice(0, 4);
+
+  const prefix = normalizedPrefix || 'TURM';
+  const codeSeed = seed || createClassCodeSeed();
+
+  return `${prefix}-${codeSeed}`;
+}
 
 // ── Animations ────────────────────────────────────────────────────────────────
 
@@ -342,29 +672,40 @@ const stagger = {
 
 export default function TurmasPage() {
   const t = useTranslations('lms.ClassesPage');
-  const pathname = usePathname();
+  const courseSheetT = useTranslations('lms.CoursesPage');
   const router = useRouter();
+  const { request, currentLocaleCode, getSettingValue, locales } = useApp();
 
-  const [loading, setLoading] = useState(true);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const [turmas, setTurmas] = useState<Turma[]>(initialTurmas);
   const [sheetOpen, setSheetOpen] = useState(false);
   const [editingTurma, setEditingTurma] = useState<Turma | null>(null);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [turmaToDelete, setTurmaToDelete] = useState<Turma | null>(null);
   const [saving, setSaving] = useState(false);
+  const [savingCourse, setSavingCourse] = useState(false);
+  const [dateRangeOpen, setDateRangeOpen] = useState(false);
+  const [dateRangeDraft, setDateRangeDraft] = useState<DateRange | undefined>();
+  const [createCodeSeed, setCreateCodeSeed] = useState('');
+  const [courseSheetOpen, setCourseSheetOpen] = useState(false);
+  const [customRecurrenceDialogOpen, setCustomRecurrenceDialogOpen] =
+    useState(false);
+  const [previousRecurrenceMode, setPreviousRecurrenceMode] =
+    useState<SessionRecurrenceMode>('none');
+  const [professorOpen, setProfessorOpen] = useState(false);
+  const [professorSearch, setProfessorSearch] = useState('');
+  const [createProfessorDialogOpen, setCreateProfessorDialogOpen] =
+    useState(false);
 
   // Search inputs (uncommitted)
   const [buscaInput, setBuscaInput] = useState('');
+  const [buscaDebounced, setBuscaDebounced] = useState('');
   const [filtroStatusInput, setFiltroStatusInput] = useState('todos');
   const [filtroTipoInput, setFiltroTipoInput] = useState('todos');
   const [filtroCursoInput, setFiltroCursoInput] = useState('todos');
-
-  // Applied filters
-  const [buscaApplied, setBuscaApplied] = useState('');
-  const [filtroStatusApplied, setFiltroStatusApplied] = useState('todos');
-  const [filtroTipoApplied, setFiltroTipoApplied] = useState('todos');
-  const [filtroCursoApplied, setFiltroCursoApplied] = useState('todos');
+  const [viewMode, setViewMode] = usePersistedViewMode<ViewMode>({
+    storageKey: 'lms:classes:view-mode',
+    defaultValue: 'cards',
+    allowedValues: ['cards', 'list'],
+  });
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
@@ -374,74 +715,588 @@ export default function TurmasPage() {
   const clickTimers = useRef<Map<number, ReturnType<typeof setTimeout>>>(
     new Map()
   );
+  const customRecurrenceConfirmedRef = useRef(false);
 
   const form = useForm<TurmaForm>({
     resolver: zodResolver(getTurmaSchema(t)),
     defaultValues: {
       codigo: '',
       curso: '',
+      courseId: undefined,
+      instructorId: undefined,
       tipo: 'online',
       professor: '',
       vagas: 30,
       dataInicio: '',
       dataFim: '',
-      horario: '',
+      horarioInicio: '',
+      horarioFim: '',
+      sessionRecurrenceMode: 'none',
+      sessionRecurrenceCustomFrequency: 'weekly',
+      sessionRecurrenceInterval: 1,
+      sessionRecurrenceDaysOfWeek: [],
+      sessionRecurrenceUntil: '',
+      sessionTitleMode: 'default-course-code',
+      sessionTitle: '',
       status: 'aberta',
     },
   });
+  const courseForm = useForm<CourseSheetFormValues>({
+    resolver: zodResolver(getCourseSheetSchema(courseSheetT)),
+    defaultValues: DEFAULT_COURSE_FORM_VALUES,
+  });
+
+  const watchedFormValues = useWatch({ control: form.control });
+
+  const { data: coursesResponse, refetch: refetchCourseOptions } =
+    useQuery<ApiCourseList>({
+      queryKey: ['lms-courses-for-class-form'],
+      queryFn: async () => {
+        const response = await request<ApiCourseList>({
+          url: '/lms/courses',
+          method: 'GET',
+          params: {
+            page: 1,
+            pageSize: 500,
+          },
+        });
+        return response.data;
+      },
+    });
+
+  const { data: categoryListData, refetch: refetchCategoryOptions } =
+    useQuery<ApiCategoryList>({
+      queryKey: ['category-options'],
+      queryFn: async () => {
+        const response = await request<ApiCategoryList>({
+          url: '/category',
+          method: 'GET',
+          params: {
+            page: 1,
+            pageSize: 500,
+            status: 'all',
+          },
+        });
+
+        const payload = response.data as ApiCategoryList | ApiCategory[];
+        if (Array.isArray(payload)) {
+          return {
+            data: payload,
+            total: payload.length,
+            page: 1,
+            pageSize: payload.length,
+          };
+        }
+
+        return payload;
+      },
+      initialData: {
+        data: [],
+        total: 0,
+        page: 1,
+        pageSize: 500,
+      },
+    });
+
+  const {
+    data: professorOptions = [],
+    isFetching: loadingProfessores,
+    refetch: refetchProfessorOptions,
+  } = useQuery<InstructorOption[]>({
+    queryKey: ['lms-classes-professors', professorSearch],
+    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'],
+          ...(professorSearch.trim() ? { search: professorSearch.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);
+      }
+
+      return Array.from(unique.values()).sort((a, b) =>
+        a.name.localeCompare(b.name)
+      );
+    },
+    initialData: [],
+  });
 
   useEffect(() => {
-    const t = setTimeout(() => setLoading(false), 700);
-    return () => clearTimeout(t);
-  }, []);
+    if (professorOpen) {
+      void refetchProfessorOptions();
+    }
+  }, [professorOpen, refetchProfessorOptions]);
+
+  useEffect(() => {
+    if (courseSheetOpen) {
+      void refetchCategoryOptions();
+    }
+  }, [courseSheetOpen, refetchCategoryOptions]);
+
+  const {
+    data: classesResponse,
+    refetch: refetchClasses,
+    isLoading: isClassesLoading,
+    isFetching: isClassesFetching,
+  } = useQuery<ApiClassList>({
+    queryKey: [
+      'lms-classes-list',
+      currentPage,
+      pageSize,
+      buscaDebounced,
+      filtroStatusInput,
+      filtroTipoInput,
+      filtroCursoInput,
+      coursesResponse?.data?.length ?? 0,
+    ],
+    queryFn: async () => {
+      const selectedCourseId =
+        filtroCursoInput !== 'todos'
+          ? getCourseIdByTitle(coursesResponse?.data ?? [], filtroCursoInput)
+          : undefined;
+
+      const response = await request<ApiClassList>({
+        url: '/lms/classes',
+        method: 'GET',
+        params: {
+          page: currentPage,
+          pageSize,
+          ...(buscaDebounced ? { search: buscaDebounced } : {}),
+          ...(filtroStatusInput !== 'todos'
+            ? { status: toApiStatus(filtroStatusInput) }
+            : {}),
+          ...(filtroTipoInput !== 'todos'
+            ? { deliveryMode: toApiType(filtroTipoInput) }
+            : {}),
+          ...(selectedCourseId ? { courseId: selectedCourseId } : {}),
+        },
+      });
+
+      return response.data;
+    },
+    placeholderData: (old) => old,
+    staleTime: 0,
+    refetchOnMount: 'always',
+    refetchOnWindowFocus: true,
+  });
+
+  const { data: classStats, refetch: refetchStats } = useQuery<ApiClassStats>({
+    queryKey: ['lms-classes-stats'],
+    queryFn: async () => {
+      const response = await request<ApiClassStats>({
+        url: '/lms/classes/stats',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    staleTime: 0,
+    refetchOnMount: 'always',
+    refetchOnWindowFocus: true,
+  });
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setBuscaDebounced(buscaInput.trim());
+    }, 350);
+
+    return () => clearTimeout(timeoutId);
+  }, [buscaInput]);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [buscaDebounced, filtroStatusInput, filtroTipoInput, filtroCursoInput]);
+
+  useEffect(() => {
+    if (!sheetOpen || editingTurma || !createCodeSeed) return;
+
+    const nextCode = buildClassCode(
+      watchedFormValues.curso || undefined,
+      createCodeSeed
+    );
+
+    if (form.getValues('codigo') === nextCode) return;
+
+    form.setValue('codigo', nextCode, {
+      shouldDirty: false,
+      shouldTouch: false,
+      shouldValidate: true,
+    });
+  }, [createCodeSeed, editingTurma, form, sheetOpen, watchedFormValues.curso]);
+
+  const courseOptions = useMemo(
+    () =>
+      (coursesResponse?.data ?? []).map((item) => ({
+        id: item.id,
+        title: item.title,
+      })),
+    [coursesResponse]
+  );
 
   const uniqueCursos = useMemo(
-    () => [...new Set(turmas.map((t) => t.curso))].sort(),
-    [turmas]
+    () => [...new Set(courseOptions.map((course) => course.title))].sort(),
+    [courseOptions]
+  );
+
+  const selectedCourse = useMemo(
+    () =>
+      courseOptions.find((item) => item.id === watchedFormValues.courseId) ??
+      null,
+    [courseOptions, watchedFormValues.courseId]
+  );
+
+  const selectedCourseTitle = selectedCourse?.title ?? watchedFormValues.curso;
+  const defaultSessionTitle = useMemo(
+    () => getDefaultSessionTitle(selectedCourseTitle, watchedFormValues.codigo),
+    [selectedCourseTitle, watchedFormValues.codigo]
   );
+  const filteredEndTimeOptions = useMemo(() => {
+    const startTime = watchedFormValues.horarioInicio ?? '';
 
-  // ── Filtering ────────────────────────────────────────────────────────────
+    if (!startTime) {
+      return TIME_OPTIONS;
+    }
+
+    return TIME_OPTIONS.filter((time) => time >= startTime);
+  }, [watchedFormValues.horarioInicio]);
 
-  const filteredTurmas = useMemo(
+  const categoryOptions = useMemo<CourseCategoryOption[]>(
     () =>
-      turmas.filter((t) => {
-        const q = buscaApplied.toLowerCase();
-        const matchBusca =
-          !q ||
-          t.codigo.toLowerCase().includes(q) ||
-          t.curso.toLowerCase().includes(q) ||
-          t.professor.toLowerCase().includes(q);
-        const matchStatus =
-          filtroStatusApplied === 'todos' || t.status === filtroStatusApplied;
-        const matchTipo =
-          filtroTipoApplied === 'todos' || t.tipo === filtroTipoApplied;
-        const matchCurso =
-          filtroCursoApplied === 'todos' || t.curso === filtroCursoApplied;
-        return matchBusca && matchStatus && matchTipo && matchCurso;
-      }),
-    [
-      turmas,
-      buscaApplied,
-      filtroStatusApplied,
-      filtroTipoApplied,
-      filtroCursoApplied,
-    ]
+      (categoryListData?.data ?? [])
+        .filter((category) => !!category.slug)
+        .map((category) => ({
+          value: category.slug,
+          label: category.name || category.slug,
+        }))
+        .sort((a, b) => a.label.localeCompare(b.label)),
+    [categoryListData]
   );
 
-  const totalPages = Math.max(1, Math.ceil(filteredTurmas.length / pageSize));
-  const safePage = Math.min(currentPage, totalPages);
-  const paginatedTurmas = filteredTurmas.slice(
-    (safePage - 1) * pageSize,
-    safePage * pageSize
+  const recurrenceDayOptions = useMemo(
+    () =>
+      (
+        [
+          ['MO', t('form.recurrence.customDialog.days.MO')],
+          ['TU', t('form.recurrence.customDialog.days.TU')],
+          ['WE', t('form.recurrence.customDialog.days.WE')],
+          ['TH', t('form.recurrence.customDialog.days.TH')],
+          ['FR', t('form.recurrence.customDialog.days.FR')],
+          ['SA', t('form.recurrence.customDialog.days.SA')],
+          ['SU', t('form.recurrence.customDialog.days.SU')],
+        ] as const
+      ).map(([value, label]) => ({
+        value: value as SessionRecurrenceDay,
+        label,
+      })),
+    [t]
   );
 
-  function handleSearch(e: React.FormEvent) {
-    e.preventDefault();
-    setBuscaApplied(buscaInput);
-    setFiltroStatusApplied(filtroStatusInput);
-    setFiltroTipoApplied(filtroTipoInput);
-    setFiltroCursoApplied(filtroCursoInput);
-    setCurrentPage(1);
+  const recurrenceSummaryText = useMemo(() => {
+    const until = watchedFormValues.sessionRecurrenceUntil
+      ? formatDateLocalized(
+          watchedFormValues.sessionRecurrenceUntil,
+          getSettingValue,
+          currentLocaleCode
+        )
+      : '--';
+
+    return t(
+      `form.recurrence.summary.${watchedFormValues.sessionRecurrenceMode}`,
+      {
+        until,
+      }
+    );
+  }, [
+    t,
+    watchedFormValues.sessionRecurrenceMode,
+    watchedFormValues.sessionRecurrenceUntil,
+    getSettingValue,
+    currentLocaleCode,
+  ]);
+
+  useEffect(() => {
+    if (
+      !selectedCourseTitle ||
+      form.getValues('curso') === selectedCourseTitle
+    ) {
+      return;
+    }
+
+    form.setValue('curso', selectedCourseTitle, {
+      shouldDirty: false,
+      shouldTouch: false,
+      shouldValidate: false,
+    });
+  }, [form, selectedCourseTitle]);
+
+  useEffect(() => {
+    if (!dateRangeOpen) return;
+
+    setDateRangeDraft({
+      from: watchedFormValues.dataInicio
+        ? new Date(`${watchedFormValues.dataInicio}T00:00:00`)
+        : undefined,
+      to: watchedFormValues.dataFim
+        ? new Date(`${watchedFormValues.dataFim}T00:00:00`)
+        : undefined,
+    });
+  }, [dateRangeOpen, watchedFormValues.dataFim, watchedFormValues.dataInicio]);
+
+  useEffect(() => {
+    if (
+      watchedFormValues.sessionTitleMode !== 'default-course-code' ||
+      form.getValues('sessionTitle') === defaultSessionTitle
+    ) {
+      return;
+    }
+
+    form.setValue('sessionTitle', defaultSessionTitle, {
+      shouldDirty: false,
+      shouldTouch: false,
+      shouldValidate: false,
+    });
+  }, [defaultSessionTitle, form, watchedFormValues.sessionTitleMode]);
+
+  const customRecurrenceFrequency =
+    watchedFormValues.sessionRecurrenceMode === 'custom'
+      ? watchedFormValues.sessionRecurrenceCustomFrequency
+      : watchedFormValues.sessionRecurrenceMode === 'weekdays'
+        ? 'weekly'
+        : watchedFormValues.sessionRecurrenceMode === 'none'
+          ? watchedFormValues.sessionRecurrenceCustomFrequency
+          : watchedFormValues.sessionRecurrenceMode;
+
+  const customRecurrenceNeedsWeekdays =
+    watchedFormValues.sessionRecurrenceMode === 'custom' &&
+    customRecurrenceFrequency === 'weekly';
+
+  useEffect(() => {
+    if (!watchedFormValues.dataFim) {
+      return;
+    }
+
+    if (!watchedFormValues.sessionRecurrenceUntil) {
+      form.setValue('sessionRecurrenceUntil', watchedFormValues.dataFim, {
+        shouldDirty: false,
+        shouldTouch: false,
+        shouldValidate: false,
+      });
+    }
+  }, [
+    form,
+    watchedFormValues.dataFim,
+    watchedFormValues.sessionRecurrenceUntil,
+  ]);
+
+  useEffect(() => {
+    if (!watchedFormValues.dataInicio) {
+      return;
+    }
+
+    const defaultDay = getDayCodeFromDate(watchedFormValues.dataInicio);
+    const recurrenceMode = watchedFormValues.sessionRecurrenceMode;
+    const recurrenceDays = watchedFormValues.sessionRecurrenceDaysOfWeek ?? [];
+
+    if (recurrenceMode === 'weekly' && recurrenceDays.length === 0) {
+      form.setValue('sessionRecurrenceDaysOfWeek', [defaultDay], {
+        shouldDirty: false,
+        shouldTouch: false,
+        shouldValidate: false,
+      });
+    }
+
+    if (recurrenceMode === 'weekdays') {
+      form.setValue(
+        'sessionRecurrenceDaysOfWeek',
+        ['MO', 'TU', 'WE', 'TH', 'FR'],
+        {
+          shouldDirty: false,
+          shouldTouch: false,
+          shouldValidate: false,
+        }
+      );
+    }
+  }, [
+    form,
+    watchedFormValues.dataInicio,
+    watchedFormValues.sessionRecurrenceDaysOfWeek,
+    watchedFormValues.sessionRecurrenceMode,
+  ]);
+
+  useEffect(() => {
+    const startTime = watchedFormValues.horarioInicio;
+    const endTime = watchedFormValues.horarioFim;
+
+    if (!startTime) {
+      return;
+    }
+
+    if (!endTime) {
+      const suggestedEndTime = getSuggestedEndTime(startTime);
+      if (suggestedEndTime) {
+        form.setValue('horarioFim', suggestedEndTime, {
+          shouldDirty: true,
+          shouldTouch: false,
+          shouldValidate: true,
+        });
+      }
+      return;
+    }
+
+    if (endTime < startTime) {
+      const suggestedEndTime = getSuggestedEndTime(startTime);
+      form.setValue('horarioFim', suggestedEndTime || startTime, {
+        shouldDirty: true,
+        shouldTouch: true,
+        shouldValidate: true,
+      });
+    }
+  }, [form, watchedFormValues.horarioFim, watchedFormValues.horarioInicio]);
+
+  const professorNameById = useMemo<Map<number, string>>(() => {
+    const map = new Map<number, string>();
+    for (const p of professorOptions) {
+      map.set(p.id, p.name);
+    }
+    return map;
+  }, [professorOptions]);
+
+  const turmas = useMemo<Turma[]>(
+    () =>
+      (classesResponse?.data ?? []).map((item) => {
+        const mapped = mapApiClass(item);
+        if (
+          (mapped.professor === '-' || !mapped.professor) &&
+          mapped.instructorId
+        ) {
+          const fallback = professorNameById.get(mapped.instructorId);
+          if (fallback) {
+            return { ...mapped, professor: fallback };
+          }
+        }
+        return mapped;
+      }),
+    [classesResponse, professorNameById]
+  );
+  const previewTurma = useMemo<Turma | null>(() => {
+    if (!sheetOpen || !editingTurma) return null;
+
+    return {
+      ...editingTurma,
+      codigo: watchedFormValues.codigo ?? editingTurma.codigo,
+      curso: selectedCourseTitle || editingTurma.curso,
+      cursoId: watchedFormValues.courseId ?? editingTurma.cursoId,
+      primaryColor: editingTurma.primaryColor ?? null,
+      tipo:
+        (watchedFormValues.tipo as Turma['tipo'] | undefined) ??
+        editingTurma.tipo,
+      professor: watchedFormValues.professor ?? editingTurma.professor,
+      vagas: watchedFormValues.vagas ?? editingTurma.vagas,
+      dataInicio: watchedFormValues.dataInicio ?? editingTurma.dataInicio,
+      dataFim: watchedFormValues.dataFim ?? editingTurma.dataFim,
+      horarioInicio:
+        watchedFormValues.horarioInicio ?? editingTurma.horarioInicio,
+      horarioFim: watchedFormValues.horarioFim ?? editingTurma.horarioFim,
+      status:
+        (watchedFormValues.status as Turma['status'] | undefined) ??
+        editingTurma.status,
+    };
+  }, [editingTurma, selectedCourseTitle, sheetOpen, watchedFormValues]);
+  const visibleTurmas = useMemo<Turma[]>(() => {
+    if (!previewTurma) return turmas;
+
+    return turmas.map((turma) =>
+      turma.id === previewTurma.id ? previewTurma : turma
+    );
+  }, [previewTurma, turmas]);
+
+  const totalItems = classesResponse?.total ?? 0;
+  const totalPages = Math.max(classesResponse?.lastPage ?? 1, 1);
+  const loading = isClassesLoading && !classesResponse;
+  const isRefreshing = isClassesFetching && !isClassesLoading;
+  const refetchersRef = useRef({
+    refetchClasses,
+    refetchStats,
+  });
+
+  useEffect(() => {
+    refetchersRef.current = {
+      refetchClasses,
+      refetchStats,
+    };
+  }, [refetchClasses, refetchStats]);
+
+  useEffect(() => {
+    if (currentPage > totalPages) {
+      setCurrentPage(totalPages);
+    }
+  }, [currentPage, totalPages]);
+
+  useEffect(() => {
+    const refreshClassesData = () => {
+      void refetchersRef.current.refetchClasses();
+      void refetchersRef.current.refetchStats();
+    };
+
+    const hasPendingRefresh =
+      typeof window !== 'undefined' &&
+      window.sessionStorage.getItem('lms:classes-needs-refresh') === '1';
+
+    if (hasPendingRefresh) {
+      refreshClassesData();
+      window.sessionStorage.removeItem('lms:classes-needs-refresh');
+    }
+
+    const handleClassesUpdated = () => {
+      refreshClassesData();
+      if (typeof window !== 'undefined') {
+        window.sessionStorage.removeItem('lms:classes-needs-refresh');
+      }
+    };
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('lms:classes-updated', handleClassesUpdated);
+    }
+
+    return () => {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('lms:classes-updated', handleClassesUpdated);
+      }
+    };
+  }, []);
+
+  function notifyLmsDashboardUpdated() {
+    if (typeof window === 'undefined') return;
+
+    window.sessionStorage.setItem('lms:dashboard-needs-refresh', '1');
+    window.dispatchEvent(new CustomEvent('lms:dashboard-updated'));
   }
 
   function clearFilters() {
@@ -449,18 +1304,20 @@ export default function TurmasPage() {
     setFiltroStatusInput('todos');
     setFiltroTipoInput('todos');
     setFiltroCursoInput('todos');
-    setBuscaApplied('');
-    setFiltroStatusApplied('todos');
-    setFiltroTipoApplied('todos');
-    setFiltroCursoApplied('todos');
     setCurrentPage(1);
   }
 
   const hasActiveFilters =
-    buscaApplied ||
-    filtroStatusApplied !== 'todos' ||
-    filtroTipoApplied !== 'todos' ||
-    filtroCursoApplied !== 'todos';
+    buscaInput.trim().length > 0 ||
+    filtroStatusInput !== 'todos' ||
+    filtroTipoInput !== 'todos' ||
+    filtroCursoInput !== 'todos';
+
+  function openDeleteDialog(turma: Turma, e: React.MouseEvent) {
+    e.stopPropagation();
+    setTurmaToDelete(turma);
+    setDeleteDialogOpen(true);
+  }
 
   // ── Double-click ──────────────────────────────────────────────────────────
 
@@ -469,7 +1326,7 @@ export default function TurmasPage() {
     if (existing) {
       clearTimeout(existing);
       clickTimers.current.delete(turma.id);
-      router.push(`/turmas/${turma.id}`);
+      router.push(`/lms/classes/${turma.id}`);
     } else {
       const t = setTimeout(() => clickTimers.current.delete(turma.id), 300);
       clickTimers.current.set(turma.id, t);
@@ -479,122 +1336,446 @@ export default function TurmasPage() {
   // ── CRUD ──────────────────────────────────────────────────────────────────
 
   function openCreateSheet() {
+    const nextSeed = createClassCodeSeed();
+    const defaultTitle = getDefaultSessionTitle(
+      undefined,
+      buildClassCode(undefined, nextSeed)
+    );
+
+    setCreateCodeSeed(nextSeed);
     setEditingTurma(null);
+    setPreviousRecurrenceMode('none');
+    setDateRangeOpen(false);
+    setDateRangeDraft(undefined);
     form.reset({
-      codigo: '',
+      codigo: buildClassCode(undefined, nextSeed),
       curso: '',
+      courseId: undefined,
+      instructorId: undefined,
       tipo: 'online',
       professor: '',
       vagas: 30,
       dataInicio: '',
       dataFim: '',
-      horario: '',
+      horarioInicio: '',
+      horarioFim: '',
+      sessionRecurrenceMode: 'none',
+      sessionRecurrenceCustomFrequency: 'weekly',
+      sessionRecurrenceInterval: 1,
+      sessionRecurrenceDaysOfWeek: [],
+      sessionRecurrenceUntil: '',
+      sessionTitleMode: 'default-course-code',
+      sessionTitle: defaultTitle,
       status: 'aberta',
     });
     setSheetOpen(true);
   }
 
-  function openEditSheet(turma: Turma, e?: React.MouseEvent) {
+  async function openEditSheet(turma: Turma, e?: React.MouseEvent) {
     e?.stopPropagation();
-    setEditingTurma(turma);
+    setCreateCodeSeed('');
+    const response = await request<ApiClass>({
+      url: `/lms/classes/${turma.id}`,
+      method: 'GET',
+    });
+    const detailedTurma = mapApiClass(response.data);
+    const recurrenceSummary = response.data.sessionRecurrenceSummary;
+    const recurrenceMode = inferRecurrenceMode(recurrenceSummary);
+    const defaultDay = getDayCodeFromDate(detailedTurma.dataInicio);
+
+    setEditingTurma(detailedTurma);
+    setPreviousRecurrenceMode(recurrenceMode);
+    setDateRangeOpen(false);
+    setDateRangeDraft({
+      from: detailedTurma.dataInicio
+        ? new Date(`${detailedTurma.dataInicio}T00:00:00`)
+        : undefined,
+      to: detailedTurma.dataFim
+        ? new Date(`${detailedTurma.dataFim}T00:00:00`)
+        : undefined,
+    });
     form.reset({
-      codigo: turma.codigo,
-      curso: turma.curso,
-      tipo: turma.tipo,
-      professor: turma.professor,
-      vagas: turma.vagas,
-      dataInicio: turma.dataInicio,
-      dataFim: turma.dataFim,
-      horario: turma.horario,
-      status: turma.status,
+      codigo: detailedTurma.codigo,
+      curso: detailedTurma.curso,
+      courseId: detailedTurma.cursoId,
+      instructorId: detailedTurma.instructorId ?? undefined,
+      tipo: detailedTurma.tipo,
+      professor: detailedTurma.professor,
+      vagas: detailedTurma.vagas,
+      dataInicio: detailedTurma.dataInicio,
+      dataFim: detailedTurma.dataFim,
+      horarioInicio: detailedTurma.horarioInicio,
+      horarioFim: detailedTurma.horarioFim,
+      sessionRecurrenceMode: recurrenceMode,
+      sessionRecurrenceCustomFrequency:
+        recurrenceSummary?.frequency ?? 'weekly',
+      sessionRecurrenceInterval: recurrenceSummary?.interval ?? 1,
+      sessionRecurrenceDaysOfWeek:
+        recurrenceSummary?.daysOfWeek ??
+        (recurrenceMode === 'weekly' ? [defaultDay] : []),
+      sessionRecurrenceUntil: recurrenceSummary?.until ?? detailedTurma.dataFim,
+      sessionTitleMode:
+        response.data.sessionTitle &&
+        response.data.sessionTitle !==
+          getDefaultSessionTitle(detailedTurma.curso, detailedTurma.codigo)
+          ? 'custom'
+          : 'default-course-code',
+      sessionTitle:
+        response.data.sessionTitle ??
+        getDefaultSessionTitle(detailedTurma.curso, detailedTurma.codigo),
+      status: detailedTurma.status,
     });
     setSheetOpen(true);
   }
 
-  async function onSubmit(data: TurmaForm) {
-    setSaving(true);
-    await new Promise((r) => setTimeout(r, 500));
-    if (editingTurma) {
-      setTurmas((prev) =>
-        prev.map((t) =>
-          t.id === editingTurma.id
-            ? {
-                ...t,
-                ...data,
-                tipo: data.tipo as Turma['tipo'],
-                status: data.status as Turma['status'],
-              }
-            : t
-        )
+  function handleRecurrenceModeChange(value: SessionRecurrenceMode) {
+    if (value === 'custom') {
+      setPreviousRecurrenceMode(
+        watchedFormValues.sessionRecurrenceMode ?? 'none'
       );
-      toast.success(t('toasts.turmaUpdated'));
-    } else {
-      const newTurma: Turma = {
-        id: Date.now(),
-        ...data,
-        cursoId: CURSOS.indexOf(data.curso) + 1,
-        tipo: data.tipo as Turma['tipo'],
-        status: data.status as Turma['status'],
-        matriculados: 0,
-      };
-      setTurmas((prev) => [newTurma, ...prev]);
-      toast.success(t('toasts.turmaCreated'));
-      setSaving(false);
-      setSheetOpen(false);
-      setTimeout(() => router.push(`/turmas/${newTurma.id}`), 400);
+      form.setValue('sessionRecurrenceMode', 'custom', {
+        shouldDirty: true,
+        shouldTouch: true,
+        shouldValidate: true,
+      });
+      setCustomRecurrenceDialogOpen(true);
       return;
     }
-    setSaving(false);
-    setSheetOpen(false);
-  }
 
-  function confirmDelete() {
-    if (!turmaToDelete) return;
-    setTurmas((prev) => prev.filter((t) => t.id !== turmaToDelete.id));
-    toast.success(t('toasts.turmaRemoved'));
-    setTurmaToDelete(null);
-    setDeleteDialogOpen(false);
+    form.setValue('sessionRecurrenceMode', value, {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+
+    if (value === 'weekdays') {
+      form.setValue('sessionRecurrenceCustomFrequency', 'weekly', {
+        shouldDirty: true,
+        shouldTouch: false,
+        shouldValidate: false,
+      });
+      form.setValue('sessionRecurrenceInterval', 1, {
+        shouldDirty: true,
+        shouldTouch: false,
+        shouldValidate: false,
+      });
+      form.setValue(
+        'sessionRecurrenceDaysOfWeek',
+        ['MO', 'TU', 'WE', 'TH', 'FR'],
+        {
+          shouldDirty: true,
+          shouldTouch: false,
+          shouldValidate: true,
+        }
+      );
+    }
+
+    if (value === 'weekly' && watchedFormValues.dataInicio) {
+      form.setValue(
+        'sessionRecurrenceDaysOfWeek',
+        [getDayCodeFromDate(watchedFormValues.dataInicio)],
+        {
+          shouldDirty: true,
+          shouldTouch: false,
+          shouldValidate: true,
+        }
+      );
+    }
+
+    setPreviousRecurrenceMode(value);
+  }
+
+  function toggleCustomRecurrenceDay(day: SessionRecurrenceDay) {
+    const currentDays = watchedFormValues.sessionRecurrenceDaysOfWeek ?? [];
+    const nextDays = currentDays.includes(day)
+      ? currentDays.filter((item) => item !== day)
+      : [...currentDays, day];
+
+    form.setValue('sessionRecurrenceDaysOfWeek', nextDays, {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+  }
+
+  function handleCustomRecurrenceCancel() {
+    form.setValue('sessionRecurrenceMode', previousRecurrenceMode, {
+      shouldDirty: true,
+      shouldTouch: false,
+      shouldValidate: true,
+    });
+    setCustomRecurrenceDialogOpen(false);
+  }
+
+  async function handleCustomRecurrenceConfirm() {
+    const valid = await form.trigger([
+      'sessionRecurrenceInterval',
+      'sessionRecurrenceUntil',
+      'sessionRecurrenceDaysOfWeek',
+      'dataInicio',
+    ]);
+
+    if (!valid) {
+      return;
+    }
+
+    setPreviousRecurrenceMode('custom');
+    customRecurrenceConfirmedRef.current = true;
+    form.setValue('sessionRecurrenceMode', 'custom', {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+    setCustomRecurrenceDialogOpen(false);
+  }
+
+  function openCourseCreateSheet() {
+    courseForm.reset(DEFAULT_COURSE_FORM_VALUES);
+    setCourseSheetOpen(true);
+  }
+
+  async function onSubmitCourse(data: CourseSheetFormValues) {
+    setSavingCourse(true);
+
+    try {
+      const payload = {
+        slug: data.nomeInterno.trim(),
+        title: data.tituloComercial,
+        description: data.descricao,
+        level: toApiCourseLevel(data.nivel),
+        status: toApiCourseStatus(data.status),
+        categorySlugs: data.categorias,
+        primaryColor: data.primaryColor,
+        primaryContrastColor: getContrastColor(data.primaryColor),
+        secondaryColor: data.secondaryColor,
+        secondaryContrastColor: getContrastColor(data.secondaryColor),
+      };
+
+      const response = await request<ApiCreatedCourse>({
+        url: '/lms/courses',
+        method: 'POST',
+        data: payload,
+      });
+
+      const createdCourse = response.data;
+      await refetchCourseOptions();
+      form.setValue('courseId', createdCourse.id, {
+        shouldDirty: true,
+        shouldTouch: true,
+        shouldValidate: true,
+      });
+      form.setValue('curso', createdCourse.title, {
+        shouldDirty: true,
+        shouldTouch: true,
+        shouldValidate: false,
+      });
+      setCourseSheetOpen(false);
+      toast.success(courseSheetT('toasts.courseCreated'));
+    } catch {
+      toast.error('Nao foi possivel cadastrar o curso.');
+    } finally {
+      setSavingCourse(false);
+    }
+  }
+
+  async function onSubmit(data: TurmaForm) {
+    setSaving(true);
+    const selectedCourse = courseOptions.find(
+      (item) => item.id === data.courseId
+    );
+    const instructorId = data.instructorId ?? form.getValues('instructorId');
+    const sessionTitle =
+      data.sessionTitleMode === 'custom'
+        ? data.sessionTitle?.trim() || defaultSessionTitle
+        : defaultSessionTitle;
+    const sessionTemplate = {
+      title: sessionTitle,
+      recurrence: buildSessionRecurrencePayload(data),
+    };
+
+    if (!selectedCourse) {
+      toast.error(t('form.validation.cursoRequired'));
+      setSaving(false);
+      return;
+    }
+
+    try {
+      if (editingTurma) {
+        await request({
+          url: `/lms/classes/${editingTurma.id}`,
+          method: 'PATCH',
+          data: {
+            code: data.codigo,
+            title: `${selectedCourse.title} - ${data.codigo}`,
+            courseId: selectedCourse.id,
+            instructorId: instructorId,
+            deliveryMode: toApiType(data.tipo),
+            status: toApiStatus(data.status),
+            startDate: data.dataInicio,
+            endDate: data.dataFim || null,
+            startTime: data.horarioInicio,
+            endTime: data.horarioFim,
+            capacity: data.vagas,
+            sessionTemplate,
+          },
+        });
+
+        toast.success(t('toasts.turmaUpdated'));
+        await refetchProfessorOptions();
+      } else {
+        const response = await request<ApiClass>({
+          url: '/lms/classes',
+          method: 'POST',
+          data: {
+            code: data.codigo,
+            title: `${selectedCourse.title} - ${data.codigo}`,
+            courseId: selectedCourse.id,
+            instructorId: instructorId,
+            deliveryMode: toApiType(data.tipo),
+            status: toApiStatus(data.status),
+            startDate: data.dataInicio,
+            endDate: data.dataFim || null,
+            startTime: data.horarioInicio,
+            endTime: data.horarioFim,
+            capacity: data.vagas,
+            sessionTemplate,
+          },
+        });
+
+        toast.success(t('toasts.turmaCreated'));
+        await refetchProfessorOptions();
+        await refetchClasses();
+        await refetchStats();
+        notifyLmsDashboardUpdated();
+        setSaving(false);
+        setSheetOpen(false);
+
+        return;
+      }
+
+      await refetchClasses();
+      await refetchStats();
+      notifyLmsDashboardUpdated();
+      setSheetOpen(false);
+    } catch {
+      toast.error('Nao foi possivel salvar a turma.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function confirmDelete() {
+    if (!turmaToDelete) return;
+
+    try {
+      await request({
+        url: `/lms/classes/${turmaToDelete.id}`,
+        method: 'DELETE',
+      });
+      toast.success(t('toasts.turmaRemoved'));
+      await refetchClasses();
+      await refetchStats();
+      notifyLmsDashboardUpdated();
+      setTurmaToDelete(null);
+      setDeleteDialogOpen(false);
+    } catch {
+      toast.error('Nao foi possivel excluir a turma.');
+    }
   }
 
+  const handleProfessorCreated = async (instructor: {
+    id: number;
+    personId: number;
+    name: string;
+    qualificationSlugs: string[];
+  }) => {
+    form.setValue('instructorId', instructor.id, {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+    form.setValue('professor', instructor.name, {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+
+    await refetchProfessorOptions();
+    await refetchClasses();
+  };
+
   // ── KPIs ────────────────────────────────────────────────���─────────────────
 
-  const kpis = [
+  const kpis: KpiCardItem[] = [
     {
-      label: t('kpis.totalClasses.label'),
-      valor: turmas.length,
-      sub: t('kpis.totalClasses.sub'),
+      key: 'total-classes',
+      title: t('kpis.totalClasses.label'),
+      value: classStats?.totalClasses ?? totalItems,
+      description: t('kpis.totalClasses.sub'),
       icon: Users2,
-      iconBg: 'bg-orange-100',
-      iconColor: 'text-orange-600',
+      iconContainerClassName: 'bg-orange-500/10 text-orange-700',
+      accentClassName: 'from-orange-500/25 via-amber-500/10 to-transparent',
+      layout: 'compact',
     },
     {
-      label: t('kpis.inProgress.label'),
-      valor: turmas.filter((t) => t.status === 'em_andamento').length,
-      sub: t('kpis.inProgress.sub'),
+      key: 'in-progress',
+      title: t('kpis.inProgress.label'),
+      value:
+        classStats?.ongoingClasses ??
+        turmas.filter((t) => t.status === 'em_andamento').length,
+      description: t('kpis.inProgress.sub'),
       icon: Clock,
-      iconBg: 'bg-muted',
-      iconColor: 'text-foreground',
+      iconContainerClassName: 'bg-sky-500/10 text-sky-700',
+      accentClassName: 'from-sky-500/25 via-blue-500/10 to-transparent',
+      layout: 'compact',
     },
     {
-      label: t('kpis.openVacancies.label'),
-      valor: turmas
-        .filter((t) => t.status === 'aberta')
-        .reduce((a, t) => a + (t.vagas - t.matriculados), 0),
-      sub: t('kpis.openVacancies.sub'),
+      key: 'open-vacancies',
+      title: t('kpis.openVacancies.label'),
+      value:
+        classStats?.openVacancies ??
+        turmas
+          .filter((t) => t.status === 'aberta')
+          .reduce((a, t) => a + (t.vagas - t.matriculados), 0),
+      description: t('kpis.openVacancies.sub'),
       icon: Users,
-      iconBg: 'bg-muted',
-      iconColor: 'text-foreground',
+      iconContainerClassName: 'bg-emerald-500/10 text-emerald-700',
+      accentClassName: 'from-emerald-500/25 via-emerald-500/10 to-transparent',
+      layout: 'compact',
     },
     {
-      label: t('kpis.occupancyRate.label'),
-      valor: `${Math.round((turmas.reduce((a, t) => a + t.matriculados / Math.max(t.vagas, 1), 0) / Math.max(turmas.length, 1)) * 100)}%`,
-      sub: t('kpis.occupancyRate.sub'),
+      key: 'occupancy-rate',
+      title: t('kpis.occupancyRate.label'),
+      value: `${
+        classStats?.occupancyRate ??
+        Math.round(
+          (turmas.reduce(
+            (a, t) => a + t.matriculados / Math.max(t.vagas, 1),
+            0
+          ) /
+            Math.max(turmas.length, 1)) *
+            100
+        )
+      }%`,
+      description: t('kpis.occupancyRate.sub'),
       icon: BarChart3,
-      iconBg: 'bg-muted',
-      iconColor: 'text-foreground',
+      iconContainerClassName: 'bg-pink-500/10 text-pink-700',
+      accentClassName: 'from-pink-500/25 via-pink-500/10 to-transparent',
+      layout: 'compact',
     },
   ];
 
+  const handleNewClass = (): void => {
+    const nextLocaleData: Record<string, { name: string }> = {};
+    locales.forEach((locale: Locale) => {
+      nextLocaleData[locale.code] = {
+        name: '',
+      };
+    });
+    void nextLocaleData;
+    openCreateSheet();
+  };
+
   // ── Render ────────────────────────────────────────────────────────────────
 
   return (
@@ -611,359 +1792,518 @@ export default function TurmasPage() {
             label: t('breadcrumbs.classes'),
           },
         ]}
-        actions={
-          <Button onClick={openCreateSheet} className="gap-2">
-            <Plus className="size-4" />
-            {t('actions.createClass')}
-          </Button>
-        }
+        actions={[
+          {
+            label: t('actions.createClass'),
+            onClick: () => handleNewClass(),
+            variant: 'default',
+          },
+        ]}
       />
 
-      {/* KPIs */}
-      <div className="mb-6 grid grid-cols-2 gap-4 lg:grid-cols-4">
-        {loading
-          ? Array.from({ length: 4 }).map((_, i) => (
-              <Card key={i}>
-                <CardContent className="p-4">
-                  <Skeleton className="mb-2 h-8 w-16" />
-                  <Skeleton className="h-4 w-28" />
-                </CardContent>
-              </Card>
-            ))
-          : kpis.map((kpi, i) => (
-              <motion.div
-                key={kpi.label}
-                initial={{ opacity: 0, y: 12 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: i * 0.07 }}
-              >
-                <Card className="overflow-hidden">
-                  <CardContent className="flex items-start justify-between p-5">
-                    <div>
-                      <p className="text-sm text-muted-foreground">
-                        {kpi.label}
-                      </p>
-                      <p className="mt-1 text-3xl font-bold tracking-tight">
-                        {kpi.valor}
-                      </p>
-                      <p className="mt-0.5 text-xs text-muted-foreground">
-                        {kpi.sub}
-                      </p>
-                    </div>
-                    <div
-                      className={`flex size-10 shrink-0 items-center justify-center rounded-lg ${kpi.iconBg}`}
-                    >
-                      <kpi.icon className={`size-5 ${kpi.iconColor}`} />
-                    </div>
+      <div className="space-y-4">
+        {/* KPIs */}
+        <div>
+          {loading ? (
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <Card key={i} className="overflow-hidden border-border/70 py-0">
+                  <div className="h-1 w-full bg-linear-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>
-              </motion.div>
-            ))}
-      </div>
+              ))}
+            </div>
+          ) : (
+            <KpiCardsGrid items={kpis} columns={4} />
+          )}
+        </div>
 
-      {/* Search bar */}
-      <form onSubmit={handleSearch} className="mb-6 mt-0">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-          <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('filters.searchPlaceholder')}
-              value={buscaInput}
-              onChange={(e) => setBuscaInput(e.target.value)}
-              className="pl-9"
-            />
-          </div>
-          <div className="flex flex-wrap items-center gap-2">
-            <Select
-              value={filtroStatusInput}
-              onValueChange={setFiltroStatusInput}
-            >
-              <SelectTrigger className="h-9 w-[140px] text-sm">
-                <SelectValue placeholder={t('filters.status')} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="todos">
-                  {t('filters.allStatuses')}
-                </SelectItem>
-                <SelectItem value="aberta">{t('status.open')}</SelectItem>
-                <SelectItem value="em_andamento">
-                  {t('status.inProgress')}
-                </SelectItem>
-                <SelectItem value="concluida">
-                  {t('status.completed')}
-                </SelectItem>
-                <SelectItem value="cancelada">
-                  {t('status.cancelled')}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-            <Select value={filtroTipoInput} onValueChange={setFiltroTipoInput}>
-              <SelectTrigger className="h-9 w-[120px] text-sm">
-                <SelectValue placeholder={t('filters.type')} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="todos">{t('filters.allTypes')}</SelectItem>
-                <SelectItem value="presencial">{t('type.inPerson')}</SelectItem>
-                <SelectItem value="online">{t('type.online')}</SelectItem>
-                <SelectItem value="hibrida">{t('type.hybrid')}</SelectItem>
-              </SelectContent>
-            </Select>
-            <Select
-              value={filtroCursoInput}
-              onValueChange={setFiltroCursoInput}
-            >
-              <SelectTrigger className="h-9 w-40 text-sm">
-                <SelectValue placeholder={t('filters.course')} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="todos">{t('filters.allCourses')}</SelectItem>
-                {uniqueCursos.map((c) => (
-                  <SelectItem key={c} value={c}>
-                    {c}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            {hasActiveFilters && (
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={clearFilters}
-                className="h-9 text-muted-foreground"
-              >
-                <X className="mr-1 size-3.5" /> {t('filters.clear')}
-              </Button>
-            )}
-            <Button type="submit" size="sm" className="h-9 gap-2">
-              <Search className="size-3.5" /> {t('filters.search')}
-            </Button>
+        {/* Search bar */}
+        <div className="space-y-1">
+          <SearchBar
+            searchQuery={buscaInput}
+            onSearchChange={setBuscaInput}
+            onSearch={() => setBuscaDebounced(buscaInput.trim())}
+            placeholder={t('filters.searchPlaceholder')}
+            controls={[
+              {
+                id: 'status-filter',
+                type: 'select',
+                value: filtroStatusInput,
+                onChange: setFiltroStatusInput,
+                placeholder: t('filters.status'),
+                options: [
+                  { value: 'todos', label: t('filters.allStatuses') },
+                  { value: 'aberta', label: t('status.open') },
+                  { value: 'em_andamento', label: t('status.inProgress') },
+                  { value: 'concluida', label: t('status.completed') },
+                  { value: 'cancelada', label: t('status.cancelled') },
+                ],
+              },
+              {
+                id: 'type-filter',
+                type: 'select',
+                value: filtroTipoInput,
+                onChange: setFiltroTipoInput,
+                placeholder: t('filters.type'),
+                options: [
+                  { value: 'todos', label: t('filters.allTypes') },
+                  { value: 'presencial', label: t('type.inPerson') },
+                  { value: 'online', label: t('type.online') },
+                  { value: 'hibrida', label: t('type.hybrid') },
+                ],
+              },
+              {
+                id: 'course-filter',
+                type: 'select',
+                value: filtroCursoInput,
+                onChange: setFiltroCursoInput,
+                placeholder: t('filters.course'),
+                options: [
+                  { value: 'todos', label: t('filters.allCourses') },
+                  ...uniqueCursos.map((c) => ({ value: c, label: c })),
+                ],
+                className: 'sm:w-56',
+              },
+            ]}
+            afterSearchButton={
+              <ViewModeToggle
+                viewMode={viewMode}
+                onViewModeChange={setViewMode}
+                listLabel={t('viewMode.list')}
+                cardsLabel={t('viewMode.cards')}
+              />
+            }
+          />
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              {hasActiveFilters ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={clearFilters}
+                  className="h-8 px-2 text-muted-foreground"
+                >
+                  <X className="mr-1 size-3.5" />
+                  {t('filters.clear')}
+                </Button>
+              ) : null}
+            </div>
+            {isRefreshing ? (
+              <Loader2 className="size-4 animate-spin text-muted-foreground" />
+            ) : null}
           </div>
         </div>
-      </form>
-
-      {/* Cards grid */}
-      {loading ? (
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {Array.from({ length: 6 }).map((_, i) => (
-            <Card key={i} className="overflow-hidden">
-              <CardContent className="p-5">
-                <Skeleton className="mb-3 h-5 w-3/4" />
-                <Skeleton className="mb-2 h-4 w-1/2" />
-                <Skeleton className="mb-4 h-2 w-full rounded-full" />
-                <div className="flex gap-2">
-                  <Skeleton className="h-6 w-20 rounded-full" />
-                  <Skeleton className="h-6 w-16 rounded-full" />
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      ) : filteredTurmas.length === 0 ? (
-        <EmptyState
-          icon={<Users className="h-12 w-12" />}
-          title={t('empty.title')}
-          description={t('empty.description')}
-          actionLabel={t('empty.action')}
-          onAction={openCreateSheet}
-          actionIcon={<Plus className="mr-2 h-4 w-4" />}
-        />
-      ) : (
-        <motion.div
-          className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
-          variants={stagger}
-          initial="hidden"
-          animate="show"
-        >
-          {paginatedTurmas.map((turma) => {
-            const ocupacao = Math.round(
-              (turma.matriculados / Math.max(turma.vagas, 1)) * 100
-            );
-            const TipoIcon = (TIPO_ICON[turma.tipo] || Monitor) as React.FC<{
-              className?: string;
-            }>;
-
-            return (
-              <motion.div key={turma.id} variants={fadeUp}>
-                <Card
-                  className="group relative cursor-pointer overflow-hidden border-0 shadow-sm transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
-                  onClick={() => handleCardClick(turma)}
-                  title={t('cards.tooltip')}
-                >
-                  {/* Top accent */}
-                  <div className="h-1 w-full bg-foreground" />
 
+        {/* Classes list */}
+        {loading ? (
+          viewMode === 'cards' ? (
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <Card key={i} className="overflow-hidden border-border/70">
                   <CardContent className="p-5">
-                    {/* Header with Icon + Title + Actions */}
-                    <div className="mb-4 flex items-start gap-3">
-                      {/* Type icon */}
-                      <div className="flex size-12 shrink-0 items-center justify-center rounded-xl bg-muted border">
-                        <TipoIcon className="size-6 text-foreground" />
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <div className="mb-1 flex items-start justify-between gap-2">
-                          <h3 className="line-clamp-2 font-semibold leading-snug text-foreground">
-                            {turma.curso}
-                          </h3>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="size-8 shrink-0 -mr-2 -mt-1"
-                                onClick={(e) => e.stopPropagation()}
-                                aria-label={t('cards.actions.label')}
-                              >
-                                <MoreHorizontal className="size-4" />
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end" className="w-48">
-                              <DropdownMenuItem
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  router.push(`/lms/classes/${turma.id}`);
-                                }}
-                              >
-                                <Eye className="mr-2 size-4" />{' '}
-                                {t('cards.actions.viewDetails')}
-                              </DropdownMenuItem>
-                              <DropdownMenuItem
-                                onClick={(e) => openEditSheet(turma, e)}
-                              >
-                                <Pencil className="mr-2 size-4" />{' '}
-                                {t('cards.actions.edit')}
-                              </DropdownMenuItem>
-                              <DropdownMenuSeparator />
-                              <DropdownMenuItem
-                                className="text-destructive focus:text-destructive"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  setTurmaToDelete(turma);
-                                  setDeleteDialogOpen(true);
-                                }}
-                              >
-                                <Trash2 className="mr-2 size-4" />{' '}
-                                {t('cards.actions.delete')}
-                              </DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </div>
-                        <p className="text-xs text-muted-foreground">
-                          <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px]">
-                            {turma.codigo}
-                          </code>
-                          <span className="mx-1.5 text-muted-foreground/50">
-                            |
-                          </span>
-                          <span>{turma.professor}</span>
-                        </p>
-                      </div>
+                    <Skeleton className="mb-3 h-5 w-3/4" />
+                    <Skeleton className="mb-2 h-4 w-1/2" />
+                    <Skeleton className="mb-4 h-2 w-full rounded-full" />
+                    <div className="flex gap-2">
+                      <Skeleton className="h-6 w-20 rounded-full" />
+                      <Skeleton className="h-6 w-16 rounded-full" />
                     </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          ) : (
+            <div className="overflow-hidden rounded-xl border border-border/70">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('table.headers.course')}</TableHead>
+                    <TableHead>{t('table.headers.status')}</TableHead>
+                    <TableHead>{t('table.headers.type')}</TableHead>
+                    <TableHead>{t('table.headers.period')}</TableHead>
+                    <TableHead>{t('table.headers.schedule')}</TableHead>
+                    <TableHead className="text-right">
+                      {t('cards.enrolled')}
+                    </TableHead>
+                    <TableHead className="w-12" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {Array.from({ length: 6 }).map((_, i) => (
+                    <TableRow key={i}>
+                      <TableCell>
+                        <div className="space-y-1.5">
+                          <Skeleton className="h-4 w-44" />
+                          <Skeleton className="h-3 w-28" />
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Skeleton className="h-5 w-20 rounded-full" />
+                      </TableCell>
+                      <TableCell>
+                        <Skeleton className="h-5 w-20 rounded-full" />
+                      </TableCell>
+                      <TableCell>
+                        <Skeleton className="h-4 w-20" />
+                      </TableCell>
+                      <TableCell>
+                        <Skeleton className="h-4 w-20" />
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Skeleton className="ml-auto h-4 w-10" />
+                      </TableCell>
+                      <TableCell>
+                        <Skeleton className="ml-auto size-8 rounded-md" />
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )
+        ) : visibleTurmas.length === 0 ? (
+          <EmptyState
+            icon={<Users className="h-12 w-12" />}
+            title={t('empty.title')}
+            description={t('empty.description')}
+            actionLabel={t('empty.action')}
+            onAction={openCreateSheet}
+            actionIcon={<Plus className="mr-2 size-4" />}
+          />
+        ) : viewMode === 'cards' ? (
+          <motion.div
+            className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
+            variants={stagger}
+            initial="hidden"
+            animate="show"
+          >
+            {visibleTurmas.map((turma) => {
+              const ocupacao = Math.round(
+                (turma.matriculados / Math.max(turma.vagas, 1)) * 100
+              );
+              const TipoIcon = TIPO_ICON[turma.tipo] || Monitor;
+              const scheduleLabel = formatSchedule(
+                turma.horarioInicio,
+                turma.horarioFim
+              );
 
-                    {/* Badges */}
-                    <div className="mb-4 flex flex-wrap items-center gap-1.5">
-                      <Badge
-                        variant={STATUS_VARIANT[turma.status]}
-                        className="text-[11px]"
-                      >
-                        {t(`status.${turma.status}`)}
-                      </Badge>
-                      <span className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-medium border bg-muted text-foreground">
-                        <TipoIcon className="size-3" />
-                        {t(`type.${turma.tipo}`)}
-                      </span>
-                    </div>
+              return (
+                <motion.div key={turma.id} variants={fadeUp}>
+                  <Card
+                    className="group relative cursor-pointer overflow-hidden border-border/70 shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md"
+                    onClick={() => handleCardClick(turma)}
+                    title={t('cards.tooltip')}
+                  >
+                    <div
+                      className="absolute inset-x-0 top-0 h-1"
+                      style={{
+                        backgroundColor: turma.primaryColor || '#1D4ED8',
+                      }}
+                    />
+                    <CardContent className="p-5">
+                      <div className="mb-4 flex items-start gap-3">
+                        <div className="flex size-12 shrink-0 items-center justify-center rounded-xl border bg-muted">
+                          <TipoIcon className="size-6 text-foreground" />
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <div className="mb-1 flex items-start justify-between gap-2">
+                            <h3 className="line-clamp-2 font-semibold leading-snug text-foreground">
+                              {turma.curso}
+                            </h3>
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="size-8 shrink-0 -mr-2 -mt-1"
+                                  onClick={(e) => e.stopPropagation()}
+                                  aria-label={t('cards.actions.label')}
+                                >
+                                  <MoreHorizontal className="size-4" />
+                                </Button>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent align="end" className="w-48">
+                                <DropdownMenuItem
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    router.push(`/lms/classes/${turma.id}`);
+                                  }}
+                                >
+                                  <Eye className="mr-2 size-4" />{' '}
+                                  {t('cards.actions.viewDetails')}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem
+                                  onClick={(e) => openEditSheet(turma, e)}
+                                >
+                                  <Pencil className="mr-2 size-4" />{' '}
+                                  {t('cards.actions.edit')}
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem
+                                  className="text-destructive focus:text-destructive"
+                                  onClick={(e) => openDeleteDialog(turma, e)}
+                                >
+                                  <Trash2 className="mr-2 size-4" />{' '}
+                                  {t('cards.actions.delete')}
+                                </DropdownMenuItem>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </div>
+                          <p className="text-xs text-muted-foreground">
+                            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px]">
+                              {turma.codigo}
+                            </code>
+                            <span className="mx-1.5 text-muted-foreground/50">
+                              |
+                            </span>
+                            <span>{turma.professor}</span>
+                          </p>
+                        </div>
+                      </div>
 
-                    {/* Occupancy progress */}
-                    <div className="mb-4 rounded-lg bg-muted/40 p-3">
-                      <div className="mb-2 flex items-center justify-between text-sm">
-                        <span className="text-muted-foreground">
-                          {t('cards.occupancy')}
+                      <div className="mb-4 flex flex-wrap items-center gap-1.5">
+                        <Badge
+                          variant={STATUS_VARIANT[turma.status]}
+                          className="text-[11px]"
+                        >
+                          {t(`status.${turma.status}`)}
+                        </Badge>
+                        <span className="inline-flex items-center gap-1 rounded-full border bg-muted px-2.5 py-0.5 text-[11px] font-medium text-foreground">
+                          <TipoIcon className="size-3" />
+                          {t(`type.${turma.tipo}`)}
                         </span>
-                        <span className="font-semibold">
-                          {turma.matriculados}/{turma.vagas}
-                        </span>
-                      </div>
-                      <div className="relative h-2 w-full overflow-hidden rounded-full bg-muted">
-                        <div
-                          className="h-full rounded-full transition-all duration-500 bg-foreground"
-                          style={{ width: `${Math.min(ocupacao, 100)}%` }}
-                        />
                       </div>
-                      <div className="mt-1.5 flex justify-between text-[11px]">
-                        <span className="text-muted-foreground">
-                          {ocupacao}% {t('cards.occupied')}
-                        </span>
-                        <span className="font-medium text-foreground">
-                          {Math.max(turma.vagas - turma.matriculados, 0)}{' '}
-                          {t('cards.freeVacancies')}
-                        </span>
+
+                      <div className="mb-4 rounded-lg bg-muted/40 p-3">
+                        <div className="mb-2 flex items-center justify-between text-sm">
+                          <span className="text-muted-foreground">
+                            {t('cards.occupancy')}
+                          </span>
+                          <span className="font-semibold">
+                            {turma.matriculados}/{turma.vagas}
+                          </span>
+                        </div>
+                        <div className="relative h-2 w-full overflow-hidden rounded-full bg-muted">
+                          <div
+                            className="h-full rounded-full bg-primary transition-all duration-500"
+                            style={{ width: `${Math.min(ocupacao, 100)}%` }}
+                          />
+                        </div>
+                        <div className="mt-1.5 flex justify-between text-[11px]">
+                          <span className="text-muted-foreground">
+                            {ocupacao}% {t('cards.occupied')}
+                          </span>
+                          <span className="font-medium text-foreground">
+                            {Math.max(turma.vagas - turma.matriculados, 0)}{' '}
+                            {t('cards.freeVacancies')}
+                          </span>
+                        </div>
                       </div>
-                    </div>
 
-                    {/* Date & time cards */}
-                    <div className="mb-4 grid grid-cols-2 gap-2">
-                      <div className="rounded-lg border bg-background p-2.5">
-                        <div className="mb-1 flex items-center gap-1.5 text-[11px] text-muted-foreground">
-                          <Calendar className="size-3" /> {t('cards.period')}
+                      <div className="mb-4 grid grid-cols-2 gap-2">
+                        <div className="rounded-lg border bg-background p-2.5">
+                          <div className="mb-1 flex items-center gap-1.5 text-[11px] text-muted-foreground">
+                            <CalendarIcon className="size-3" />{' '}
+                            {t('cards.period')}
+                          </div>
+                          <p className="text-xs font-medium">
+                            {formatDateLocalized(
+                              turma.dataInicio,
+                              getSettingValue,
+                              currentLocaleCode
+                            )}
+                          </p>
+                          <p className="text-[11px] text-muted-foreground">
+                            {t('cards.until')}{' '}
+                            {formatDateLocalized(
+                              turma.dataFim,
+                              getSettingValue,
+                              currentLocaleCode
+                            )}
+                          </p>
+                        </div>
+                        <div className="rounded-lg border bg-background p-2.5">
+                          <div className="mb-1 flex items-center gap-1.5 text-[11px] text-muted-foreground">
+                            <Clock className="size-3" /> {t('cards.schedule')}
+                          </div>
+                          <p className="text-xs font-medium">{scheduleLabel}</p>
                         </div>
-                        <p className="text-xs font-medium">
-                          {formatDate(turma.dataInicio)}
-                        </p>
-                        <p className="text-[11px] text-muted-foreground">
-                          {t('cards.until')} {formatDate(turma.dataFim)}
-                        </p>
                       </div>
-                      <div className="rounded-lg border bg-background p-2.5">
-                        <div className="mb-1 flex items-center gap-1.5 text-[11px] text-muted-foreground">
-                          <Clock className="size-3" /> {t('cards.schedule')}
+
+                      <div className="flex items-center justify-between rounded-lg bg-muted/40 px-3 py-2.5">
+                        <div className="flex items-center gap-1.5">
+                          <Users className="size-4 text-muted-foreground" />
+                          <span className="text-sm font-medium">
+                            {turma.matriculados}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            {t('cards.enrolled')}
+                          </span>
                         </div>
-                        <p className="text-xs font-medium">{turma.horario}</p>
                       </div>
-                    </div>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              );
+            })}
+          </motion.div>
+        ) : (
+          <div className="overflow-hidden rounded-xl border border-border/70">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('table.headers.course')}</TableHead>
+                  <TableHead>{t('table.headers.status')}</TableHead>
+                  <TableHead>{t('table.headers.type')}</TableHead>
+                  <TableHead>{t('table.headers.period')}</TableHead>
+                  <TableHead>{t('table.headers.schedule')}</TableHead>
+                  <TableHead>{t('cards.occupancy')}</TableHead>
+                  <TableHead className="text-right">
+                    {t('cards.enrolled')}
+                  </TableHead>
+                  <TableHead className="w-12" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {visibleTurmas.map((turma) => {
+                  const ocupacao = Math.round(
+                    (turma.matriculados / Math.max(turma.vagas, 1)) * 100
+                  );
+                  const TipoIcon = TIPO_ICON[turma.tipo] || Monitor;
+                  const scheduleLabel = formatSchedule(
+                    turma.horarioInicio,
+                    turma.horarioFim
+                  );
 
-                    {/* Footer stats */}
-                    <div className="flex items-center justify-between rounded-lg bg-muted/40 px-3 py-2.5">
-                      <div className="flex items-center gap-1.5">
-                        <Users className="size-4 text-muted-foreground" />
-                        <span className="text-sm font-medium">
-                          {turma.matriculados}
-                        </span>
-                        <span className="text-xs text-muted-foreground">
-                          {t('cards.enrolled')}
+                  return (
+                    <TableRow
+                      key={turma.id}
+                      className="cursor-pointer"
+                      onClick={() => handleCardClick(turma)}
+                      title={t('cards.tooltip')}
+                    >
+                      <TableCell>
+                        <div className="min-w-0">
+                          <p className="truncate font-semibold text-foreground">
+                            {turma.curso}
+                          </p>
+                          <p className="mt-1 text-xs text-muted-foreground">
+                            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px]">
+                              {turma.codigo}
+                            </code>
+                            <span className="mx-1.5 text-muted-foreground/50">
+                              |
+                            </span>
+                            <span>{turma.professor}</span>
+                          </p>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant={STATUS_VARIANT[turma.status]}
+                          className="text-[11px]"
+                        >
+                          {t(`status.${turma.status}`)}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <span className="inline-flex items-center gap-1 rounded-full border bg-muted px-2 py-0.5 text-[11px] font-medium text-foreground">
+                          <TipoIcon className="size-3" />
+                          {t(`type.${turma.tipo}`)}
                         </span>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </motion.div>
-            );
-          })}
-        </motion.div>
-      )}
-
-      {/* Pagination footer */}
-      {!loading && filteredTurmas.length > 0 && (
-        <div className="mt-6">
-          <PaginationFooter
-            currentPage={safePage}
-            pageSize={pageSize}
-            totalItems={filteredTurmas.length}
-            onPageChange={setCurrentPage}
-            onPageSizeChange={(nextSize) => {
-              setPageSize(nextSize);
-              setCurrentPage(1);
-            }}
-            pageSizeOptions={PAGE_SIZES}
-          />
-        </div>
-      )}
+                      </TableCell>
+                      <TableCell>
+                        {formatDateLocalized(
+                          turma.dataInicio,
+                          getSettingValue,
+                          currentLocaleCode
+                        )}{' '}
+                        {t('cards.until')}{' '}
+                        {formatDateLocalized(
+                          turma.dataFim,
+                          getSettingValue,
+                          currentLocaleCode
+                        )}
+                      </TableCell>
+                      <TableCell>{scheduleLabel}</TableCell>
+                      <TableCell>{ocupacao}%</TableCell>
+                      <TableCell className="text-right font-medium">
+                        {turma.matriculados}
+                      </TableCell>
+                      <TableCell onClick={(e) => e.stopPropagation()}>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="ml-auto size-8"
+                              aria-label={t('cards.actions.label')}
+                            >
+                              <MoreHorizontal className="size-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end" className="w-48">
+                            <DropdownMenuItem
+                              onClick={() =>
+                                router.push(`/lms/classes/${turma.id}`)
+                              }
+                            >
+                              <Eye className="mr-2 size-4" />{' '}
+                              {t('cards.actions.viewDetails')}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              onClick={() => openEditSheet(turma)}
+                            >
+                              <Pencil className="mr-2 size-4" />{' '}
+                              {t('cards.actions.edit')}
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem
+                              className="text-destructive focus:text-destructive"
+                              onClick={(e) => openDeleteDialog(turma, e)}
+                            >
+                              <Trash2 className="mr-2 size-4" />{' '}
+                              {t('cards.actions.delete')}
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+
+        {/* Pagination footer */}
+        {!loading && visibleTurmas.length > 0 && (
+          <div className="mt-6">
+            <PaginationFooter
+              currentPage={currentPage}
+              pageSize={pageSize}
+              totalItems={totalItems}
+              onPageChange={setCurrentPage}
+              onPageSizeChange={(value) => {
+                setPageSize(value);
+                setCurrentPage(1);
+              }}
+              pageSizeOptions={PAGE_SIZES}
+            />
+          </div>
+        )}
+      </div>
 
       {/* Sheet */}
       <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
         <SheetContent
           side="right"
-          className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+          className="flex w-full flex-col overflow-y-auto sm:max-w-2xl"
         >
           <SheetHeader className="shrink-0">
             <SheetTitle>
@@ -973,48 +2313,422 @@ export default function TurmasPage() {
           </SheetHeader>
           <form
             onSubmit={form.handleSubmit(onSubmit)}
-            className="flex flex-1 flex-col px-4 gap-4 py-6"
+            className="flex flex-1 flex-col gap-5 px-4 py-6"
           >
-            <Field>
-              <FieldLabel htmlFor="codigo">
-                {t('form.fields.code.label')}{' '}
-                <span className="text-destructive">*</span>
-              </FieldLabel>
-              <Input
-                id="codigo"
-                placeholder={t('form.fields.code.placeholder')}
-                {...form.register('codigo')}
-              />
-              <FieldError>{form.formState.errors.codigo?.message}</FieldError>
-            </Field>
-            <Field>
-              <FieldLabel>
-                {t('form.fields.course.label')}{' '}
-                <span className="text-destructive">*</span>
-              </FieldLabel>
-              <Controller
-                name="curso"
-                control={form.control}
-                render={({ field }) => (
-                  <Select onValueChange={field.onChange} value={field.value}>
-                    <SelectTrigger>
-                      <SelectValue
-                        placeholder={t('form.fields.course.placeholder')}
+            <div className="grid gap-4 md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
+              <Field>
+                <FieldLabel htmlFor="codigo">
+                  {t('form.fields.code.label')}
+                </FieldLabel>
+                <Input
+                  id="codigo"
+                  value={watchedFormValues.codigo ?? ''}
+                  readOnly
+                  className="uppercase"
+                />
+                <FieldDescription>
+                  Codigo gerado automaticamente pelo sistema.
+                </FieldDescription>
+                <FieldError>{form.formState.errors.codigo?.message}</FieldError>
+              </Field>
+
+              <Field>
+                <FieldLabel>
+                  {t('form.fields.course.label')}{' '}
+                  <span className="text-destructive">*</span>
+                </FieldLabel>
+                <div className="flex items-end gap-2">
+                  <div className="min-w-0 flex-1">
+                    <EntityPicker<{ id: number; title: string }, TurmaForm>
+                      form={form}
+                      name="courseId"
+                      valueType="number"
+                      placeholder={t('form.fields.course.placeholder')}
+                      entityLabel={t('form.fields.course.label')}
+                      initialSelectedLabel={selectedCourseTitle}
+                      searchPlaceholder={t('form.fields.course.placeholder')}
+                      emptyStateDescription="Nenhum curso encontrado."
+                      loadingLabel="Carregando cursos..."
+                      noResultsLabel="Nenhum curso encontrado."
+                      showCreateButton={false}
+                      onChange={(value, option) => {
+                        const courseId =
+                          typeof value === 'number' ? value : undefined;
+                        const courseTitle =
+                          option && typeof option.title === 'string'
+                            ? option.title
+                            : '';
+
+                        form.setValue('courseId', courseId, {
+                          shouldDirty: true,
+                          shouldTouch: true,
+                          shouldValidate: true,
+                        });
+                        form.setValue('curso', courseTitle, {
+                          shouldDirty: true,
+                          shouldTouch: true,
+                          shouldValidate: false,
+                        });
+                      }}
+                      loadOptions={async ({ page, pageSize, search }) => {
+                        const response = await request<ApiCourseList>({
+                          url: '/lms/courses',
+                          method: 'GET',
+                          params: {
+                            page,
+                            pageSize,
+                            ...(search.trim() ? { search: search.trim() } : {}),
+                          },
+                        });
+
+                        return {
+                          items: response.data?.data ?? [],
+                          hasMore: page < (response.data?.lastPage ?? 1),
+                        };
+                      }}
+                      getOptionValue={(option) => option.id}
+                      getOptionLabel={(option) => option.title}
+                    />
+                  </div>
+
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="icon"
+                    className="shrink-0"
+                    onClick={openCourseCreateSheet}
+                    aria-label="Cadastrar novo curso"
+                  >
+                    <Plus className="h-4 w-4" />
+                  </Button>
+                </div>
+              </Field>
+            </div>
+
+            <div className="rounded-lg border border-border/70 p-4">
+              <div className="grid gap-4">
+                <Field>
+                  <FieldLabel>
+                    {t('form.fields.startDate.label')} /{' '}
+                    {t('form.fields.endDate.label')}{' '}
+                    <span className="text-destructive">*</span>
+                  </FieldLabel>
+                  <Popover open={dateRangeOpen} onOpenChange={setDateRangeOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        className={`w-full justify-start text-left font-normal ${
+                          !watchedFormValues.dataInicio ||
+                          !watchedFormValues.dataFim
+                            ? 'text-muted-foreground'
+                            : ''
+                        }`}
+                      >
+                        <CalendarIcon className="mr-2 size-4" />
+                        {formatDateRangeLabel(
+                          watchedFormValues.dataInicio,
+                          watchedFormValues.dataFim,
+                          getSettingValue,
+                          currentLocaleCode
+                        ) || t('form.fields.startDate.placeholder')}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar
+                        mode="range"
+                        numberOfMonths={2}
+                        selected={dateRangeDraft}
+                        onSelect={(range) => {
+                          setDateRangeDraft(range);
+
+                          if (!range?.from || !range?.to) {
+                            form.setValue('dataInicio', '', {
+                              shouldDirty: true,
+                              shouldTouch: true,
+                              shouldValidate: true,
+                            });
+                            form.setValue('dataFim', '', {
+                              shouldDirty: true,
+                              shouldTouch: true,
+                              shouldValidate: true,
+                            });
+                            return;
+                          }
+
+                          form.setValue(
+                            'dataInicio',
+                            format(range.from, 'yyyy-MM-dd'),
+                            {
+                              shouldDirty: true,
+                              shouldTouch: true,
+                              shouldValidate: true,
+                            }
+                          );
+                          form.setValue(
+                            'dataFim',
+                            format(range.to, 'yyyy-MM-dd'),
+                            {
+                              shouldDirty: true,
+                              shouldTouch: true,
+                              shouldValidate: true,
+                            }
+                          );
+                        }}
+                        initialFocus
                       />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {CURSOS.map((c) => (
-                        <SelectItem key={c} value={c}>
-                          {c}
+                    </PopoverContent>
+                  </Popover>
+                  <FieldError>
+                    {form.formState.errors.dataInicio?.message ||
+                      form.formState.errors.dataFim?.message}
+                  </FieldError>
+                </Field>
+
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Field>
+                    <FieldLabel htmlFor="horarioInicio">
+                      {t('form.fields.startTime.label')}{' '}
+                      <span className="text-destructive">*</span>
+                    </FieldLabel>
+                    <Controller
+                      name="horarioInicio"
+                      control={form.control}
+                      render={({ field }) => (
+                        <Select
+                          onValueChange={(value) => {
+                            field.onChange(value);
+                          }}
+                          value={field.value}
+                        >
+                          <SelectTrigger id="horarioInicio">
+                            <SelectValue
+                              placeholder={t(
+                                'form.fields.startTime.placeholder'
+                              )}
+                            />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {TIME_OPTIONS.map((time) => (
+                              <SelectItem key={time} value={time}>
+                                {time}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      )}
+                    />
+                    <FieldDescription>
+                      Escolha o horario de inicio na lista para preencher mais
+                      rapido.
+                    </FieldDescription>
+                    <FieldError>
+                      {form.formState.errors.horarioInicio?.message}
+                    </FieldError>
+                  </Field>
+
+                  <Field>
+                    <FieldLabel htmlFor="horarioFim">
+                      {t('form.fields.endTime.label')}{' '}
+                      <span className="text-destructive">*</span>
+                    </FieldLabel>
+                    <Controller
+                      name="horarioFim"
+                      control={form.control}
+                      render={({ field }) => (
+                        <Select
+                          onValueChange={field.onChange}
+                          value={field.value}
+                        >
+                          <SelectTrigger id="horarioFim">
+                            <SelectValue
+                              placeholder={t('form.fields.endTime.placeholder')}
+                            />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {filteredEndTimeOptions.map((time) => (
+                              <SelectItem key={time} value={time}>
+                                {time}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      )}
+                    />
+                    <FieldDescription>
+                      O termino mostra apenas horarios iguais ou depois do
+                      inicio.
+                    </FieldDescription>
+                    <FieldError>
+                      {form.formState.errors.horarioFim?.message}
+                    </FieldError>
+                  </Field>
+                </div>
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-border/70 p-4">
+              <div className="space-y-4">
+                <div className="space-y-1">
+                  <h3 className="text-sm font-semibold">
+                    {t('form.recurrence.sectionTitle')}
+                  </h3>
+                  <p className="text-sm text-muted-foreground">
+                    {t('form.recurrence.sectionDescription')}
+                  </p>
+                </div>
+
+                <div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+                  <Field>
+                    <FieldLabel>{t('form.recurrence.label')}</FieldLabel>
+                    <Select
+                      value={watchedFormValues.sessionRecurrenceMode}
+                      onValueChange={(value) =>
+                        handleRecurrenceModeChange(
+                          value as SessionRecurrenceMode
+                        )
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">
+                          {t('form.recurrence.options.none')}
                         </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                )}
-              />
-              <FieldError>{form.formState.errors.curso?.message}</FieldError>
-            </Field>
-            <div className="grid grid-cols-2 gap-4">
+                        <SelectItem value="daily">
+                          {t('form.recurrence.options.daily')}
+                        </SelectItem>
+                        <SelectItem value="weekly">
+                          {t('form.recurrence.options.weekly')}
+                        </SelectItem>
+                        <SelectItem value="monthly">
+                          {t('form.recurrence.options.monthly')}
+                        </SelectItem>
+                        <SelectItem value="yearly">
+                          {t('form.recurrence.options.yearly')}
+                        </SelectItem>
+                        <SelectItem value="weekdays">
+                          {t('form.recurrence.options.weekdays')}
+                        </SelectItem>
+                        <SelectItem value="custom">
+                          {t('form.recurrence.options.custom')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FieldDescription>{recurrenceSummaryText}</FieldDescription>
+                    <FieldError>
+                      {form.formState.errors.sessionRecurrenceMode?.message}
+                    </FieldError>
+                  </Field>
+
+                  <Field>
+                    <FieldLabel>{t('form.recurrence.until')}</FieldLabel>
+                    <Input
+                      type="date"
+                      value={watchedFormValues.sessionRecurrenceUntil ?? ''}
+                      min={watchedFormValues.dataInicio || undefined}
+                      onChange={(event) =>
+                        form.setValue(
+                          'sessionRecurrenceUntil',
+                          event.target.value,
+                          {
+                            shouldDirty: true,
+                            shouldTouch: true,
+                            shouldValidate: true,
+                          }
+                        )
+                      }
+                    />
+                    <FieldError>
+                      {form.formState.errors.sessionRecurrenceUntil?.message}
+                    </FieldError>
+                  </Field>
+                </div>
+
+                <div className="grid gap-4 md:grid-cols-[minmax(0,0.55fr)_minmax(0,1fr)]">
+                  <Field>
+                    <FieldLabel>
+                      {t('form.recurrence.titleMode.label')}
+                    </FieldLabel>
+                    <Controller
+                      name="sessionTitleMode"
+                      control={form.control}
+                      render={({ field }) => (
+                        <Select
+                          value={field.value}
+                          onValueChange={(value) => {
+                            field.onChange(value);
+                            if (value === 'default-course-code') {
+                              form.setValue(
+                                'sessionTitle',
+                                defaultSessionTitle,
+                                {
+                                  shouldDirty: true,
+                                  shouldTouch: false,
+                                  shouldValidate: false,
+                                }
+                              );
+                            }
+                          }}
+                        >
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="default-course-code">
+                              {t('form.recurrence.titleMode.default')}
+                            </SelectItem>
+                            <SelectItem value="custom">
+                              {t('form.recurrence.titleMode.custom')}
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                      )}
+                    />
+                  </Field>
+
+                  <Field>
+                    <FieldLabel htmlFor="sessionTitle">
+                      {t('form.fields.sessionTitle.label')}
+                    </FieldLabel>
+                    <Input
+                      id="sessionTitle"
+                      value={
+                        watchedFormValues.sessionTitleMode ===
+                        'default-course-code'
+                          ? defaultSessionTitle
+                          : (watchedFormValues.sessionTitle ?? '')
+                      }
+                      placeholder={t('form.fields.sessionTitle.placeholder')}
+                      disabled={
+                        watchedFormValues.sessionTitleMode ===
+                        'default-course-code'
+                      }
+                      onChange={(event) =>
+                        form.setValue('sessionTitle', event.target.value, {
+                          shouldDirty: true,
+                          shouldTouch: true,
+                          shouldValidate: false,
+                        })
+                      }
+                    />
+                    <FieldDescription>
+                      {watchedFormValues.sessionTitleMode ===
+                      'default-course-code'
+                        ? defaultSessionTitle ||
+                          t('form.fields.sessionTitle.placeholder')
+                        : recurrenceSummaryText}
+                    </FieldDescription>
+                    <FieldError>
+                      {form.formState.errors.sessionTitle?.message}
+                    </FieldError>
+                  </Field>
+                </div>
+              </div>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-3">
               <Field>
                 <FieldLabel>
                   {t('form.fields.type.label')}{' '}
@@ -1044,6 +2758,7 @@ export default function TurmasPage() {
                 />
                 <FieldError>{form.formState.errors.tipo?.message}</FieldError>
               </Field>
+
               <Field>
                 <FieldLabel>
                   {t('form.fields.status.label')}{' '}
@@ -1076,87 +2791,344 @@ export default function TurmasPage() {
                 />
                 <FieldError>{form.formState.errors.status?.message}</FieldError>
               </Field>
+
+              <Field>
+                <FieldLabel htmlFor="vagas">
+                  {t('form.fields.vacancies.label')}{' '}
+                  <span className="text-destructive">*</span>
+                </FieldLabel>
+                <Input
+                  id="vagas"
+                  type="number"
+                  min={1}
+                  {...form.register('vagas')}
+                />
+                <FieldError>{form.formState.errors.vagas?.message}</FieldError>
+              </Field>
             </div>
+
             <Field>
-              <FieldLabel htmlFor="professor">
+              <FieldLabel>
                 {t('form.fields.professor.label')}{' '}
                 <span className="text-destructive">*</span>
               </FieldLabel>
-              <Input
-                id="professor"
-                placeholder={t('form.fields.professor.placeholder')}
-                {...form.register('professor')}
+              <Controller
+                name="professor"
+                control={form.control}
+                render={({ field }) => (
+                  <div className="flex items-end gap-2">
+                    <div className="flex-1">
+                      <Popover
+                        open={professorOpen}
+                        onOpenChange={setProfessorOpen}
+                      >
+                        <PopoverTrigger asChild>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            role="combobox"
+                            className="w-full justify-between"
+                          >
+                            <span className="truncate text-left">
+                              {field.value ||
+                                t('form.fields.professor.placeholder')}
+                            </span>
+                            {loadingProfessores ? (
+                              <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(
+                                'form.fields.professor.placeholder'
+                              )}
+                              value={professorSearch}
+                              onValueChange={setProfessorSearch}
+                            />
+                            <CommandList>
+                              <CommandEmpty>
+                                <div className="flex flex-col items-center gap-3 py-4 px-2">
+                                  <p className="text-sm text-muted-foreground">
+                                    Nenhum professor encontrado.
+                                  </p>
+                                  <Button
+                                    type="button"
+                                    variant="outline"
+                                    size="sm"
+                                    className="w-full"
+                                    onClick={() => {
+                                      setProfessorOpen(false);
+                                      setCreateProfessorDialogOpen(true);
+                                    }}
+                                  >
+                                    <Plus className="mr-2 h-4 w-4" />
+                                    Cadastrar novo professor
+                                  </Button>
+                                </div>
+                              </CommandEmpty>
+                              <CommandGroup>
+                                {professorOptions.map((professor) => (
+                                  <CommandItem
+                                    key={professor.id}
+                                    value={`${professor.name}-${professor.id}`}
+                                    onSelect={() => {
+                                      form.setValue(
+                                        'instructorId',
+                                        professor.id,
+                                        {
+                                          shouldDirty: true,
+                                          shouldTouch: true,
+                                          shouldValidate: true,
+                                        }
+                                      );
+                                      field.onChange(professor.name);
+                                      setProfessorOpen(false);
+                                      setProfessorSearch('');
+                                    }}
+                                  >
+                                    {professor.name}
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon"
+                      className="shrink-0"
+                      onClick={() => setCreateProfessorDialogOpen(true)}
+                      aria-label="Cadastrar novo professor"
+                    >
+                      <Plus className="h-4 w-4" />
+                    </Button>
+                  </div>
+                )}
               />
               <FieldError>
                 {form.formState.errors.professor?.message}
               </FieldError>
             </Field>
-            <Field>
-              <FieldLabel htmlFor="vagas">
-                {t('form.fields.vacancies.label')}{' '}
-                <span className="text-destructive">*</span>
-              </FieldLabel>
-              <Input
-                id="vagas"
-                type="number"
-                min={1}
-                {...form.register('vagas')}
-              />
-              <FieldError>{form.formState.errors.vagas?.message}</FieldError>
-            </Field>
-            <div className="grid grid-cols-2 gap-4">
+
+            <SheetFooter className="mt-auto shrink-0 gap-2 pt-4 px-0">
+              <Button type="submit" disabled={saving} className="gap-2">
+                {saving && <Loader2 className="size-4 animate-spin" />}
+                {editingTurma
+                  ? t('form.actions.save')
+                  : t('form.actions.create')}
+              </Button>
+            </SheetFooter>
+          </form>
+        </SheetContent>
+      </Sheet>
+
+      <CourseFormSheet
+        key="inline-course-create"
+        open={courseSheetOpen}
+        onOpenChange={setCourseSheetOpen}
+        editing={false}
+        saving={savingCourse}
+        form={courseForm}
+        onSubmit={onSubmitCourse}
+        categories={categoryOptions}
+        onCreateCategory={() => router.push('/category?new=1')}
+        t={courseSheetT}
+      />
+
+      <CreateLmsPersonSheet
+        open={createProfessorDialogOpen}
+        onOpenChange={setCreateProfessorDialogOpen}
+        onCreated={handleProfessorCreated}
+        title="Cadastrar novo professor"
+        description="Crie um novo professor para seleciona-lo nesta turma."
+        submitLabel="Cadastrar"
+        successMessage="Professor cadastrado com sucesso."
+        errorMessage="Nao foi possivel cadastrar o professor."
+        defaultQualificationSlugs={['class-sessions']}
+      />
+
+      <Dialog
+        open={customRecurrenceDialogOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            if (customRecurrenceConfirmedRef.current) {
+              customRecurrenceConfirmedRef.current = false;
+              setCustomRecurrenceDialogOpen(false);
+              return;
+            }
+
+            handleCustomRecurrenceCancel();
+            return;
+          }
+
+          setCustomRecurrenceDialogOpen(true);
+        }}
+      >
+        <DialogContent className="sm:max-w-xl">
+          <DialogHeader>
+            <DialogTitle>{t('form.recurrence.customDialog.title')}</DialogTitle>
+            <DialogDescription>
+              {t('form.recurrence.customDialog.description')}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-5 py-2">
+            <div className="grid gap-4 sm:grid-cols-[140px_minmax(0,1fr)] sm:items-end">
               <Field>
-                <FieldLabel htmlFor="dataInicio">
-                  {t('form.fields.startDate.label')}{' '}
-                  <span className="text-destructive">*</span>
+                <FieldLabel>
+                  {t('form.recurrence.customDialog.repeatEvery')}
                 </FieldLabel>
                 <Input
-                  id="dataInicio"
-                  type="date"
-                  {...form.register('dataInicio')}
+                  type="number"
+                  min={1}
+                  value={watchedFormValues.sessionRecurrenceInterval ?? 1}
+                  onChange={(event) =>
+                    form.setValue(
+                      'sessionRecurrenceInterval',
+                      Number(event.target.value) || 1,
+                      {
+                        shouldDirty: true,
+                        shouldTouch: true,
+                        shouldValidate: true,
+                      }
+                    )
+                  }
                 />
                 <FieldError>
-                  {form.formState.errors.dataInicio?.message}
+                  {form.formState.errors.sessionRecurrenceInterval?.message}
                 </FieldError>
               </Field>
+
               <Field>
-                <FieldLabel htmlFor="dataFim">
-                  {t('form.fields.endDate.label')}{' '}
-                  <span className="text-destructive">*</span>
+                <FieldLabel>&nbsp;</FieldLabel>
+                <Controller
+                  name="sessionRecurrenceCustomFrequency"
+                  control={form.control}
+                  render={({ field }) => (
+                    <Select
+                      value={field.value}
+                      onValueChange={(value) => {
+                        field.onChange(value);
+                        if (
+                          value === 'weekly' &&
+                          (watchedFormValues.sessionRecurrenceDaysOfWeek ?? [])
+                            .length === 0 &&
+                          watchedFormValues.dataInicio
+                        ) {
+                          form.setValue(
+                            'sessionRecurrenceDaysOfWeek',
+                            [getDayCodeFromDate(watchedFormValues.dataInicio)],
+                            {
+                              shouldDirty: true,
+                              shouldTouch: false,
+                              shouldValidate: true,
+                            }
+                          );
+                        }
+                      }}
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="daily">
+                          {t('form.recurrence.customDialog.frequency.daily')}
+                        </SelectItem>
+                        <SelectItem value="weekly">
+                          {t('form.recurrence.customDialog.frequency.weekly')}
+                        </SelectItem>
+                        <SelectItem value="monthly">
+                          {t('form.recurrence.customDialog.frequency.monthly')}
+                        </SelectItem>
+                        <SelectItem value="yearly">
+                          {t('form.recurrence.customDialog.frequency.yearly')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+              </Field>
+            </div>
+
+            {customRecurrenceNeedsWeekdays && (
+              <Field>
+                <FieldLabel>
+                  {t('form.recurrence.customDialog.repeatOn')}
                 </FieldLabel>
-                <Input id="dataFim" type="date" {...form.register('dataFim')} />
+                <div className="flex flex-wrap gap-2">
+                  {recurrenceDayOptions.map((day) => {
+                    const active = (
+                      watchedFormValues.sessionRecurrenceDaysOfWeek ?? []
+                    ).includes(day.value);
+
+                    return (
+                      <Button
+                        key={day.value}
+                        type="button"
+                        variant={active ? 'default' : 'outline'}
+                        size="icon"
+                        className="rounded-full"
+                        onClick={() => toggleCustomRecurrenceDay(day.value)}
+                      >
+                        {day.label}
+                      </Button>
+                    );
+                  })}
+                </div>
                 <FieldError>
-                  {form.formState.errors.dataFim?.message}
+                  {form.formState.errors.sessionRecurrenceDaysOfWeek?.message}
                 </FieldError>
               </Field>
-            </div>
+            )}
+
             <Field>
-              <FieldLabel htmlFor="horario">
-                {t('form.fields.schedule.label')}{' '}
-                <span className="text-destructive">*</span>
+              <FieldLabel>
+                {t('form.recurrence.customDialog.endDate')}
               </FieldLabel>
               <Input
-                id="horario"
-                placeholder={t('form.fields.schedule.placeholder')}
-                {...form.register('horario')}
+                type="date"
+                min={watchedFormValues.dataInicio || undefined}
+                value={watchedFormValues.sessionRecurrenceUntil ?? ''}
+                onChange={(event) =>
+                  form.setValue('sessionRecurrenceUntil', event.target.value, {
+                    shouldDirty: true,
+                    shouldTouch: true,
+                    shouldValidate: true,
+                  })
+                }
               />
-              <FieldError>{form.formState.errors.horario?.message}</FieldError>
+              <FieldError>
+                {form.formState.errors.sessionRecurrenceUntil?.message}
+              </FieldError>
             </Field>
-            <SheetFooter className="mt-auto shrink-0 gap-2 pt-4 px-0">
-              <Button type="submit" disabled={saving} className="gap-2">
-                {saving && <Loader2 className="size-4 animate-spin" />}
-                {editingTurma
-                  ? t('form.actions.save')
-                  : t('form.actions.create')}
-              </Button>
-            </SheetFooter>
-          </form>
-        </SheetContent>
-      </Sheet>
+          </div>
+
+          <DialogFooter className="gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleCustomRecurrenceCancel}
+            >
+              {t('form.recurrence.customDialog.cancel')}
+            </Button>
+            <Button type="button" onClick={handleCustomRecurrenceConfirm}>
+              {t('form.recurrence.customDialog.confirm')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* Delete Dialog */}
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <DialogContent>
+        <DialogContent className="mx-auto max-w-3xl">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
               <AlertTriangle className="size-5 text-destructive" />{' '}