@hed-hog/lms 0.0.349 → 0.0.351

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

@@ -9,10 +9,8 @@ import {
   SearchBar,
   ViewModeToggle,
 } from '@/components/entity-list';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Calendar } from '@/components/ui/calendar';
 import { Card, CardContent } from '@/components/ui/card';
 import {
   Dialog,
@@ -29,35 +27,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-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,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   Table,
@@ -67,11 +37,10 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 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,
@@ -95,19 +64,8 @@ import {
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
-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';
+import { ClassFormSheet } from '../_components/class-form-sheet';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -117,6 +75,7 @@ interface Turma {
   curso: string;
   cursoId: number;
   instructorId?: number | null;
+  professorAvatarId?: number | null;
   primaryColor?: string | null;
   tipo: 'presencial' | 'online' | 'hibrida';
   dataInicio: string;
@@ -133,14 +92,6 @@ interface Turma {
 }
 
 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 = {
@@ -165,6 +116,7 @@ type ApiClass = {
   capacity: number;
   courseId: number;
   instructorId?: number | null;
+  instructorAvatarId?: number | null;
   courseTitle: string;
   enrolledCount: number;
   professor?: string | null;
@@ -203,107 +155,12 @@ type ApiCourseList = {
   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;
-  avatarId?: number | null;
-  userPhotoId?: number | null;
-  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;
-  avatarId?: number | string | null;
-  avatar_id?: number | string | null;
-  userPhotoId?: number | string | null;
-  user_photo_id?: number | string | null;
-  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;
-  }
-
-  const rawAvatarId = item?.avatarId ?? item?.avatar_id;
-  const avatarId =
-    rawAvatarId !== undefined && rawAvatarId !== null
-      ? Number(rawAvatarId) || null
-      : null;
-  const rawUserPhotoId = item?.userPhotoId ?? item?.user_photo_id;
-  const userPhotoId =
-    rawUserPhotoId !== undefined && rawUserPhotoId !== null
-      ? Number(rawUserPhotoId) || null
-      : null;
-
-  return {
-    id,
-    name,
-    personId: Number(item?.personId ?? item?.person_id ?? 0) || undefined,
-    avatarId,
-    userPhotoId,
-    qualificationSlugs: Array.isArray(item?.qualificationSlugs)
-      ? item.qualificationSlugs
-      : undefined,
-  };
-}
-
-function getInstructorAvatarUrl(option?: {
-  userPhotoId?: number | null;
-  avatarId?: number | null;
-}) {
-  if (option?.userPhotoId) {
-    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/user/avatar/${option.userPhotoId}`;
-  }
-
-  if (option?.avatarId) {
-    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${option.avatarId}`;
-  }
-
-  return undefined;
-}
-
 function getCourseIdByTitle(
   courses: Array<{ id: number; title: string }>,
   title: string
@@ -311,59 +168,6 @@ function getCourseIdByTitle(
   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';
@@ -416,6 +220,7 @@ function mapApiClass(item: ApiClass): Turma {
     curso: item.courseTitle,
     cursoId: item.courseId,
     instructorId: item.instructorId ?? null,
+    professorAvatarId: item.instructorAvatarId ?? null,
     primaryColor: item.primaryColor,
     tipo: toPtType(item.deliveryMode),
     dataInicio: getDateOnly(item.startDate),
@@ -431,130 +236,6 @@ function mapApiClass(item: ApiClass): Turma {
   };
 }
 
-// ── Schema ────────────────────────────────────────────────────────────────────
-
-function getTurmaSchema(t: (key: string) => string) {
-  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.',
-        });
-      }
-
-      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;
-  horarioInicio: string;
-  horarioFim: string;
-  sessionRecurrenceMode: SessionRecurrenceMode;
-  sessionRecurrenceCustomFrequency: SessionRecurrenceFrequency;
-  sessionRecurrenceInterval: number;
-  sessionRecurrenceDaysOfWeek: SessionRecurrenceDay[];
-  sessionRecurrenceUntil?: string;
-  sessionTitleMode: 'default-course-code' | 'custom';
-  sessionTitle?: string;
-  status: string;
-};
-
 type ViewMode = 'cards' | 'list';
 
 // ── Constants ─────────────────────────────────────────────────────────────────
@@ -569,6 +250,26 @@ const STATUS_VARIANT: Record<
   cancelada: 'destructive',
 };
 
+const STATUS_CLASS: Record<string, string> = {
+  aberta:
+    'bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-950 dark:text-emerald-400 dark:border-emerald-800',
+  em_andamento:
+    'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-400 dark:border-blue-800',
+  concluida:
+    'bg-slate-100 text-slate-600 border-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700',
+  cancelada:
+    'bg-red-100 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-400 dark:border-red-800',
+};
+
+const TIPO_CLASS: Record<string, string> = {
+  presencial:
+    'bg-sky-100 text-sky-700 border-sky-200 dark:bg-sky-950 dark:text-sky-400 dark:border-sky-800',
+  online:
+    'bg-violet-100 text-violet-700 border-violet-200 dark:bg-violet-950 dark:text-violet-400 dark:border-violet-800',
+  hibrida:
+    'bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-950 dark:text-amber-400 dark:border-amber-800',
+};
+
 const TIPO_ICON: Record<string, LucideIcon> = {
   presencial: MapPin,
   online: Monitor,
@@ -576,103 +277,6 @@ const TIPO_ICON: Record<string, LucideIcon> = {
 };
 
 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 '';
-
-  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();
-}
-
-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 ────────────────────────────────────────────────────────────────
 
@@ -690,26 +294,15 @@ const stagger = {
 
 export default function TurmasPage() {
   const t = useTranslations('lms.ClassesPage');
-  const courseSheetT = useTranslations('lms.CoursesPage');
   const router = useRouter();
   const { request, currentLocaleCode, getSettingValue, locales } = useApp();
 
-  const [sheetOpen, setSheetOpen] = useState(false);
-  const [editingTurma, setEditingTurma] = useState<Turma | null>(null);
+  const [classFormSheetOpen, setClassFormSheetOpen] = useState(false);
+  const [classFormClassId, setClassFormClassId] = useState<string | undefined>(
+    undefined
+  );
   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 [createProfessorDialogOpen, setCreateProfessorDialogOpen] =
-    useState(false);
 
   // Search inputs (uncommitted)
   const [buscaInput, setBuscaInput] = useState('');
@@ -731,99 +324,21 @@ export default function TurmasPage() {
     allowedValues: PAGE_SIZES,
   });
 
-  // Double-click tracking
-  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: '',
-      horarioInicio: '',
-      horarioFim: '',
-      sessionRecurrenceMode: 'none',
-      sessionRecurrenceCustomFrequency: 'weekly',
-      sessionRecurrenceInterval: 1,
-      sessionRecurrenceDaysOfWeek: [],
-      sessionRecurrenceUntil: '',
-      sessionTitleMode: 'default-course-code',
-      sessionTitle: '',
-      status: 'aberta',
+  const { data: coursesResponse } = 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,
+          offeringTypes: 'scheduled,blended',
+        },
+      });
+      return response.data;
     },
   });
-  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,
-            offeringTypes: 'scheduled,blended',
-          },
-        });
-        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,
-      },
-    });
-
-  useEffect(() => {
-    if (courseSheetOpen) {
-      void refetchCategoryOptions();
-    }
-  }, [courseSheetOpen, refetchCategoryOptions]);
 
   const {
     data: classesResponse,
@@ -894,28 +409,6 @@ export default function TurmasPage() {
     return () => clearTimeout(timeoutId);
   }, [buscaInput]);
 
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [buscaDebounced, filtroStatusInput, filtroTipoInput, filtroCursoInput]);
-
-  useEffect(() => {
-    if (!sheetOpen || editingTurma || !createCodeSeed) return;
-    if (form.getFieldState('codigo').isDirty) 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) => ({
@@ -930,224 +423,6 @@ export default function TurmasPage() {
     [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 ?? '';
-
-    if (!startTime) {
-      return TIME_OPTIONS;
-    }
-
-    return TIME_OPTIONS.filter((time) => time >= startTime);
-  }, [watchedFormValues.horarioInicio]);
-
-  const categoryOptions = useMemo<CourseCategoryOption[]>(
-    () =>
-      (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 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]
-  );
-
-  const recurrenceSummaryText = useMemo(() => {
-    const until = watchedFormValues.dataFim
-      ? formatDateLocalized(
-          watchedFormValues.dataFim,
-          getSettingValue,
-          currentLocaleCode
-        )
-      : '--';
-
-    return t(
-      `form.recurrence.summary.${watchedFormValues.sessionRecurrenceMode}`,
-      {
-        until,
-      }
-    );
-  }, [
-    t,
-    watchedFormValues.sessionRecurrenceMode,
-    watchedFormValues.dataFim,
-    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';
-
-  const weeklyNeedsDays = watchedFormValues.sessionRecurrenceMode === 'weekly';
-
-  useEffect(() => {
-    if (!watchedFormValues.dataFim) {
-      return;
-    }
-
-    form.setValue('sessionRecurrenceUntil', watchedFormValues.dataFim, {
-      shouldDirty: false,
-      shouldTouch: false,
-      shouldValidate: false,
-    });
-  }, [form, watchedFormValues.dataFim]);
-
-  useEffect(() => {
-    if (!watchedFormValues.dataInicio) {
-      return;
-    }
-
-    const defaultDay = getDayCodeFromDate(watchedFormValues.dataInicio);
-    const recurrenceMode = watchedFormValues.sessionRecurrenceMode;
-    const recurrenceDays = form.getValues('sessionRecurrenceDaysOfWeek') ?? [];
-
-    if (recurrenceMode === 'weekly' && recurrenceDays.length === 0) {
-      form.setValue('sessionRecurrenceDaysOfWeek', [defaultDay], {
-        shouldDirty: false,
-        shouldTouch: false,
-        shouldValidate: false,
-      });
-    }
-
-    if (recurrenceMode === 'weekdays') {
-      const weekdaySet = ['MO', 'TU', 'WE', 'TH', 'FR'];
-      const alreadySet =
-        recurrenceDays.length === weekdaySet.length &&
-        weekdaySet.every((d) =>
-          recurrenceDays.includes(d as SessionRecurrenceDay)
-        );
-      if (!alreadySet) {
-        form.setValue(
-          'sessionRecurrenceDaysOfWeek',
-          ['MO', 'TU', 'WE', 'TH', 'FR'],
-          {
-            shouldDirty: false,
-            shouldTouch: false,
-            shouldValidate: false,
-          }
-        );
-      }
-    }
-  }, [
-    form,
-    watchedFormValues.dataInicio,
-    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 turma of classesResponse?.data ?? []) {
@@ -1185,40 +460,9 @@ export default function TurmasPage() {
       }),
     [classesResponse, professorNameById, courseLogoMap]
   );
-  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 visibleTurmas = 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({
@@ -1233,12 +477,6 @@ export default function TurmasPage() {
     };
   }, [refetchClasses, refetchStats]);
 
-  useEffect(() => {
-    if (currentPage > totalPages) {
-      setCurrentPage(totalPages);
-    }
-  }, [currentPage, totalPages]);
-
   useEffect(() => {
     const refreshClassesData = () => {
       void refetchersRef.current.refetchClasses();
@@ -1299,347 +537,17 @@ export default function TurmasPage() {
     setDeleteDialogOpen(true);
   }
 
-  // ── Double-click ──────────────────────────────────────────────────────────
-
-  function handleCardClick(turma: Turma) {
-    const existing = clickTimers.current.get(turma.id);
-    if (existing) {
-      clearTimeout(existing);
-      clickTimers.current.delete(turma.id);
-      router.push(`/lms/classes/${turma.id}`);
-    } else {
-      const t = setTimeout(() => clickTimers.current.delete(turma.id), 300);
-      clickTimers.current.set(turma.id, t);
-    }
-  }
-
   // ── 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: buildClassCode(undefined, nextSeed),
-      curso: '',
-      courseId: undefined,
-      instructorId: undefined,
-      tipo: 'online',
-      professor: '',
-      vagas: 30,
-      dataInicio: '',
-      dataFim: '',
-      horarioInicio: '',
-      horarioFim: '',
-      sessionRecurrenceMode: 'none',
-      sessionRecurrenceCustomFrequency: 'weekly',
-      sessionRecurrenceInterval: 1,
-      sessionRecurrenceDaysOfWeek: [],
-      sessionRecurrenceUntil: '',
-      sessionTitleMode: 'default-course-code',
-      sessionTitle: defaultTitle,
-      status: 'aberta',
-    });
-    setSheetOpen(true);
+    setClassFormClassId(undefined);
+    setClassFormSheetOpen(true);
   }
 
-  async function openEditSheet(turma: Turma, e?: React.MouseEvent) {
+  function openEditSheet(turma: Turma, e?: React.MouseEvent) {
     e?.stopPropagation();
-    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: 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: 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);
-  }
-
-  function handleRecurrenceModeChange(value: SessionRecurrenceMode) {
-    if (value === 'custom') {
-      setPreviousRecurrenceMode(
-        watchedFormValues.sessionRecurrenceMode ?? 'none'
-      );
-      form.setValue('sessionRecurrenceMode', 'custom', {
-        shouldDirty: true,
-        shouldTouch: true,
-        shouldValidate: true,
-      });
-      setCustomRecurrenceDialogOpen(true);
-      return;
-    }
-
-    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',
-      '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 = {
-        name: data.nomeInterno.trim(),
-        slug: data.slug.trim().toLowerCase(),
-        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(t('messages.classCreateCourseError'));
-    } 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'));
-      } 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 refetchClasses();
-        await refetchStats();
-        notifyLmsDashboardUpdated();
-        setSaving(false);
-        setSheetOpen(false);
-
-        return;
-      }
-
-      await refetchClasses();
-      await refetchStats();
-      notifyLmsDashboardUpdated();
-      setSheetOpen(false);
-    } catch {
-      toast.error(t('messages.classSaveError'));
-    } finally {
-      setSaving(false);
-    }
+    setClassFormClassId(String(turma.id));
+    setClassFormSheetOpen(true);
   }
 
   async function confirmDelete() {
@@ -1661,26 +569,6 @@ export default function TurmasPage() {
     }
   }
 
-  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 refetchClasses();
-  };
-
   // ── KPIs ────────────────────────────────────────────────���─────────────────
 
   const kpis: KpiCardItem[] = [
@@ -1802,15 +690,24 @@ export default function TurmasPage() {
         <div className="space-y-1">
           <SearchBar
             searchQuery={buscaInput}
-            onSearchChange={setBuscaInput}
-            onSearch={() => setBuscaDebounced(buscaInput.trim())}
+            onSearchChange={(value) => {
+              setBuscaInput(value);
+              setCurrentPage(1);
+            }}
+            onSearch={() => {
+              setBuscaDebounced(buscaInput.trim());
+              setCurrentPage(1);
+            }}
             placeholder={t('filters.searchPlaceholder')}
             controls={[
               {
                 id: 'status-filter',
                 type: 'select',
                 value: filtroStatusInput,
-                onChange: setFiltroStatusInput,
+                onChange: (value) => {
+                  setFiltroStatusInput(value);
+                  setCurrentPage(1);
+                },
                 placeholder: t('filters.status'),
                 options: [
                   { value: 'todos', label: t('filters.allStatuses') },
@@ -1824,7 +721,10 @@ export default function TurmasPage() {
                 id: 'type-filter',
                 type: 'select',
                 value: filtroTipoInput,
-                onChange: setFiltroTipoInput,
+                onChange: (value) => {
+                  setFiltroTipoInput(value);
+                  setCurrentPage(1);
+                },
                 placeholder: t('filters.type'),
                 options: [
                   { value: 'todos', label: t('filters.allTypes') },
@@ -1837,7 +737,10 @@ export default function TurmasPage() {
                 id: 'course-filter',
                 type: 'select',
                 value: filtroCursoInput,
-                onChange: setFiltroCursoInput,
+                onChange: (value) => {
+                  setFiltroCursoInput(value);
+                  setCurrentPage(1);
+                },
                 placeholder: t('filters.course'),
                 options: [
                   { value: 'todos', label: t('filters.allCourses') },
@@ -1973,7 +876,9 @@ export default function TurmasPage() {
                 <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)}
+                    onDoubleClick={() =>
+                      router.push(`/lms/classes/${turma.id}`)
+                    }
                     title={t('cards.tooltip')}
                   >
                     <div
@@ -1984,13 +889,13 @@ export default function TurmasPage() {
                           : undefined
                       }
                     />
-                    <CardContent className="p-5">
-                      <div className="mb-4 flex items-start gap-3">
+                    <CardContent className="px-3 py-2">
+                      <div className="mb-2 flex items-start gap-2">
                         <CourseAvatar
                           fileId={turma.logoFileId}
                           title={turma.curso}
-                          className="size-12 rounded-xl"
-                          iconSize="size-6"
+                          className="size-9 rounded-lg"
+                          iconSize="size-5"
                         />
                         <div className="min-w-0 flex-1">
                           <div className="mb-1 flex items-start justify-between gap-2">
@@ -2036,59 +941,68 @@ export default function TurmasPage() {
                               </DropdownMenuContent>
                             </DropdownMenu>
                           </div>
-                          <p className="text-xs text-muted-foreground">
+                          <div className="mt-1 flex items-center gap-1.5 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 className="text-muted-foreground/50">|</span>
+                            {turma.professorAvatarId ? (
+                              <img
+                                src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${turma.professorAvatarId}`}
+                                alt={turma.professor}
+                                className="size-4 rounded-full object-cover"
+                                onError={(e) => {
+                                  (e.currentTarget as HTMLImageElement).style.display = 'none';
+                                }}
+                              />
+                            ) : (
+                              <span className="inline-flex size-4 items-center justify-center rounded-full bg-muted text-[8px] font-semibold uppercase text-muted-foreground">
+                                {turma.professor
+                                  .split(' ')
+                                  .slice(0, 2)
+                                  .map((p) => p[0])
+                                  .join('')}
+                              </span>
+                            )}
                             <span>{turma.professor}</span>
-                          </p>
+                          </div>
                         </div>
                       </div>
 
-                      <div className="mb-4 flex flex-wrap items-center gap-1.5">
+                      <div className="mb-2 flex flex-wrap items-center gap-1">
                         <Badge
-                          variant={STATUS_VARIANT[turma.status]}
-                          className="text-[11px]"
+                          variant="outline"
+                          className={`text-[11px] ${STATUS_CLASS[turma.status]}`}
                         >
                           {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">
+                        <span
+                          className={`inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-[11px] font-medium ${TIPO_CLASS[turma.tipo]}`}
+                        >
                           <TipoIcon className="size-3" />
                           {t(`type.${turma.tipo}`)}
                         </span>
                       </div>
 
-                      <div className="mb-4 rounded-lg bg-muted/40 p-3">
-                        <div className="mb-2 flex items-center justify-between text-sm">
+                      <div className="mb-2 space-y-1">
+                        <div className="flex items-center justify-between text-[11px]">
                           <span className="text-muted-foreground">
                             {t('cards.occupancy')}
                           </span>
-                          <span className="font-semibold">
-                            {turma.matriculados}/{turma.vagas}
+                          <span className="font-semibold text-foreground">
+                            {turma.matriculados}/{turma.vagas} · {ocupacao}%
                           </span>
                         </div>
-                        <div className="relative h-2 w-full overflow-hidden rounded-full bg-muted">
+                        <div className="relative h-1 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 className="mb-4 grid grid-cols-2 gap-2">
-                        <div className="rounded-lg border bg-background p-2.5">
+                      <div className="grid grid-cols-2 gap-1.5">
+                        <div className="rounded-lg border bg-background p-2">
                           <div className="mb-1 flex items-center gap-1.5 text-[11px] text-muted-foreground">
                             <CalendarIcon className="size-3" />{' '}
                             {t('cards.period')}
@@ -2109,25 +1023,13 @@ export default function TurmasPage() {
                             )}
                           </p>
                         </div>
-                        <div className="rounded-lg border bg-background p-2.5">
+                        <div className="rounded-lg border bg-background p-2">
                           <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>
                       </div>
-
-                      <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>
-                      </div>
                     </CardContent>
                   </Card>
                 </motion.div>
@@ -2166,7 +1068,9 @@ export default function TurmasPage() {
                     <TableRow
                       key={turma.id}
                       className="cursor-pointer"
-                      onClick={() => handleCardClick(turma)}
+                      onDoubleClick={() =>
+                        router.push(`/lms/classes/${turma.id}`)
+                      }
                       title={t('cards.tooltip')}
                     >
                       <TableCell>
@@ -2195,14 +1099,16 @@ export default function TurmasPage() {
                       </TableCell>
                       <TableCell>
                         <Badge
-                          variant={STATUS_VARIANT[turma.status]}
-                          className="text-[11px]"
+                          variant="outline"
+                          className={`text-[11px] ${STATUS_CLASS[turma.status]}`}
                         >
                           {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">
+                        <span
+                          className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium ${TIPO_CLASS[turma.tipo]}`}
+                        >
                           <TipoIcon className="size-3" />
                           {t(`type.${turma.tipo}`)}
                         </span>
@@ -2289,900 +1195,15 @@ export default function TurmasPage() {
         )}
       </div>
 
-      {/* Sheet */}
-      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
-        <SheetContent
-          side="right"
-          className="flex w-full flex-col overflow-y-auto sm:max-w-2xl"
-        >
-          <SheetHeader className="shrink-0">
-            <SheetTitle>
-              {editingTurma ? t('form.title.edit') : t('form.title.create')}
-            </SheetTitle>
-            <SheetDescription>{t('form.description')}</SheetDescription>
-          </SheetHeader>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="flex flex-1 flex-col gap-5 px-4 py-6"
-          >
-            <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 ?? ''}
-                  className="uppercase"
-                  onChange={(event) =>
-                    form.setValue('codigo', event.target.value.toUpperCase(), {
-                      shouldDirty: true,
-                      shouldTouch: true,
-                      shouldValidate: true,
-                    })
-                  }
-                />
-                <FieldDescription>
-                  Codigo gerado automaticamente, mas pode ser editado.
-                </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;
-                        code?: string;
-                        logoFileId?: number | null;
-                      },
-                      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={t(
-                        'components.entityPicker.courses.empty'
-                      )}
-                      loadingLabel={t(
-                        'components.entityPicker.courses.loading'
-                      )}
-                      noResultsLabel={t(
-                        'components.entityPicker.courses.empty'
-                      )}
-                      showCreateButton={false}
-                      renderOption={({ option }) => (
-                        <div className="flex items-center gap-2 py-0.5">
-                          <CourseAvatar
-                            fileId={option.logoFileId}
-                            title={option.title}
-                            className="size-8 shrink-0 rounded-lg"
-                            iconSize="size-4"
-                          />
-                          <div className="min-w-0">
-                            <p className="truncate text-sm">{option.title}</p>
-                            <p className="truncate text-xs text-muted-foreground">
-                              {option.code ?? '—'} · #{option.id}
-                            </p>
-                          </div>
-                        </div>
-                      )}
-                      renderSelectedValue={({ option }) => (
-                        <div className="flex items-center gap-2">
-                          <CourseAvatar
-                            fileId={option?.logoFileId}
-                            title={option?.title ?? ''}
-                            className="size-5 shrink-0 rounded"
-                            iconSize="size-3"
-                          />
-                          <span className="truncate">{option?.title}</span>
-                        </div>
-                      )}
-                      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,
-                            offeringTypes: 'scheduled,blended',
-                            ...(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={courseSheetT('actions.createCourse')}
-                  >
-                    <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
-                      />
-                    </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>
-                        <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>
-                </div>
-
-                {weeklyNeedsDays && (
-                  <Field>
-                    <FieldLabel>
-                      {t('form.recurrence.customDialog.repeatOn')}
-                    </FieldLabel>
-                    <div className="grid grid-cols-4 gap-2 sm:grid-cols-7">
-                      {recurrenceDayOptions.map((day) => {
-                        const active = (
-                          watchedFormValues.sessionRecurrenceDaysOfWeek ?? []
-                        ).includes(day.value);
-
-                        return (
-                          <Button
-                            key={day.value}
-                            type="button"
-                            variant={active ? 'default' : 'outline'}
-                            size="sm"
-                            className="h-9"
-                            onClick={() => toggleCustomRecurrenceDay(day.value)}
-                          >
-                            {day.label}
-                          </Button>
-                        );
-                      })}
-                    </div>
-                    <FieldError>
-                      {
-                        form.formState.errors.sessionRecurrenceDaysOfWeek
-                          ?.message
-                      }
-                    </FieldError>
-                  </Field>
-                )}
-
-                <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')}{' '}
-                  <span className="text-destructive">*</span>
-                </FieldLabel>
-                <Controller
-                  name="tipo"
-                  control={form.control}
-                  render={({ field }) => (
-                    <Select onValueChange={field.onChange} value={field.value}>
-                      <SelectTrigger>
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="online">
-                          {t('type.online')}
-                        </SelectItem>
-                        <SelectItem value="presencial">
-                          {t('type.inPerson')}
-                        </SelectItem>
-                        <SelectItem value="hibrida">
-                          {t('type.hybrid')}
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                  )}
-                />
-                <FieldError>{form.formState.errors.tipo?.message}</FieldError>
-              </Field>
-
-              <Field>
-                <FieldLabel>
-                  {t('form.fields.status.label')}{' '}
-                  <span className="text-destructive">*</span>
-                </FieldLabel>
-                <Controller
-                  name="status"
-                  control={form.control}
-                  render={({ field }) => (
-                    <Select onValueChange={field.onChange} value={field.value}>
-                      <SelectTrigger>
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <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>
-                  )}
-                />
-                <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>
-                {t('form.fields.professor.label')}{' '}
-                <span className="text-destructive">*</span>
-              </FieldLabel>
-              <div className="flex items-end gap-2">
-                <div className="flex-1">
-                  <EntityPicker<InstructorOption, TurmaForm>
-                    form={form}
-                    name="instructorId"
-                    valueType="number"
-                    placeholder={t('form.fields.professor.placeholder')}
-                    initialSelectedLabel={watchedFormValues.professor ?? ''}
-                    searchPlaceholder={t('form.fields.professor.placeholder')}
-                    emptyStateDescription={t(
-                      'form.fields.professor.emptyState'
-                    )}
-                    noResultsLabel={t('form.fields.professor.noResults')}
-                    showCreateButton={false}
-                    clearable={false}
-                    getOptionValue={(opt) => opt.id}
-                    getOptionLabel={(opt) => opt.name}
-                    onChange={(value, option) => {
-                      form.setValue(
-                        'instructorId',
-                        value as number | undefined,
-                        {
-                          shouldDirty: true,
-                          shouldTouch: true,
-                          shouldValidate: true,
-                        }
-                      );
-                      form.setValue('professor', option?.name ?? '', {
-                        shouldDirty: true,
-                        shouldTouch: true,
-                        shouldValidate: true,
-                      });
-                    }}
-                    loadOptions={async ({ page, pageSize, search }) => {
-                      const response = await request<
-                        | InstructorApiRow[]
-                        | {
-                            data?: InstructorApiRow[];
-                            items?: InstructorApiRow[];
-                            rows?: InstructorApiRow[];
-                            total?: number;
-                            lastPage?: number;
-                          }
-                      >({
-                        url: '/lms/instructors',
-                        method: 'GET',
-                        params: {
-                          page,
-                          pageSize,
-                          qualificationSlugs: ['class-sessions'],
-                          ...(search.trim() ? { search: search.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 lastPage =
-                        !Array.isArray(payload) && payload?.lastPage
-                          ? payload.lastPage
-                          : 1;
-
-                      const items = rows
-                        .map(normalizeInstructorOption)
-                        .filter((opt): opt is InstructorOption => opt !== null);
-
-                      return { items, hasMore: page < lastPage };
-                    }}
-                    renderOption={({ option }) => {
-                      const initials = option.name
-                        .split(' ')
-                        .filter(Boolean)
-                        .slice(0, 2)
-                        .map((p) => p[0]?.toUpperCase() ?? '')
-                        .join('');
-                      const avatarUrl = getInstructorAvatarUrl(option);
-                      return (
-                        <div className="flex min-w-0 items-center gap-3 py-0.5">
-                          <Avatar className="h-8 w-8 shrink-0 rounded-lg border border-border/60">
-                            <AvatarImage src={avatarUrl} />
-                            <AvatarFallback className="rounded-lg bg-muted text-[11px] font-semibold text-foreground">
-                              {initials}
-                            </AvatarFallback>
-                          </Avatar>
-                          <span className="truncate text-sm">
-                            {option.name}
-                          </span>
-                        </div>
-                      );
-                    }}
-                    renderSelectedValue={({ option, label }) => {
-                      const name = option?.name ?? label;
-                      const initials = name
-                        .split(' ')
-                        .filter(Boolean)
-                        .slice(0, 2)
-                        .map((p) => p[0]?.toUpperCase() ?? '')
-                        .join('');
-                      const avatarUrl = getInstructorAvatarUrl(option ?? undefined);
-                      return (
-                        <div className="flex items-center gap-2">
-                          <Avatar className="h-5 w-5 shrink-0 rounded">
-                            <AvatarImage src={avatarUrl} />
-                            <AvatarFallback className="rounded bg-muted text-[10px] font-semibold">
-                              {initials}
-                            </AvatarFallback>
-                          </Avatar>
-                          <span className="truncate">{name}</span>
-                        </div>
-                      );
-                    }}
-                  />
-                </div>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="icon"
-                  className="shrink-0"
-                  onClick={() => setCreateProfessorDialogOpen(true)}
-                  aria-label={t('sheet.lessonForm.createInstructor')}
-                >
-                  <Plus className="h-4 w-4" />
-                </Button>
-              </div>
-              <FieldError>
-                {form.formState.errors.professor?.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>
-
-      <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={t('sheet.lessonForm.createInstructorTitle')}
-        description={t('sheet.lessonForm.createInstructorDescription')}
-        submitLabel={t('sheet.lessonForm.createInstructorSubmit')}
-        successMessage={t('sheet.lessonForm.createInstructorSuccess')}
-        errorMessage={t('sheet.lessonForm.createInstructorError')}
-        defaultQualificationSlugs={['class-sessions']}
-      />
-
-      <Dialog
-        open={customRecurrenceDialogOpen}
-        onOpenChange={(open) => {
-          if (!open) {
-            if (customRecurrenceConfirmedRef.current) {
-              customRecurrenceConfirmedRef.current = false;
-              setCustomRecurrenceDialogOpen(false);
-              return;
-            }
-
-            handleCustomRecurrenceCancel();
-            return;
-          }
-
-          setCustomRecurrenceDialogOpen(true);
+      <ClassFormSheet
+        open={classFormSheetOpen}
+        onOpenChange={setClassFormSheetOpen}
+        classId={classFormClassId}
+        onSuccess={async () => {
+          await Promise.all([refetchClasses(), refetchStats()]);
+          notifyLmsDashboardUpdated();
         }}
-      >
-        <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>
-                  {t('form.recurrence.customDialog.repeatEvery')}
-                </FieldLabel>
-                <Input
-                  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.sessionRecurrenceInterval?.message}
-                </FieldError>
-              </Field>
-
-              <Field>
-                <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>
-                <div className="grid grid-cols-4 gap-2 sm:grid-cols-7">
-                  {recurrenceDayOptions.map((day) => {
-                    const active = (
-                      watchedFormValues.sessionRecurrenceDaysOfWeek ?? []
-                    ).includes(day.value);
-
-                    return (
-                      <Button
-                        key={day.value}
-                        type="button"
-                        variant={active ? 'default' : 'outline'}
-                        size="sm"
-                        className="h-9"
-                        onClick={() => toggleCustomRecurrenceDay(day.value)}
-                      >
-                        {day.label}
-                      </Button>
-                    );
-                  })}
-                </div>
-                <FieldError>
-                  {form.formState.errors.sessionRecurrenceDaysOfWeek?.message}
-                </FieldError>
-              </Field>
-            )}
-          </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}>