@hed-hog/lms 0.0.304 → 0.0.306

package/hedhog/frontend/app/_components/class-form-sheet.tsx.ejs

@@ -0,0 +1,1992 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { EntityPicker } from '@/components/ui/entity-picker';
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+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 { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { format } from 'date-fns';
+import { CalendarIcon, ChevronsUpDown, Loader2, Plus } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useRef, useState } from 'react';
+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 './course-form-sheet';
+import { CreateLmsPersonSheet } from './create-lms-person-sheet';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+type SessionRecurrenceFrequency = 'daily' | 'weekly' | 'monthly' | 'yearly';
+type SessionRecurrenceMode =
+  | 'none'
+  | 'daily'
+  | 'weekly'
+  | 'monthly'
+  | 'yearly'
+  | 'weekdays'
+  | 'custom';
+type SessionRecurrenceDay = 'MO' | 'TU' | 'WE' | 'TH' | 'FR' | 'SA' | 'SU';
+
+type SessionRecurrenceSummary = {
+  frequency?: SessionRecurrenceFrequency;
+  interval?: number;
+  until?: string;
+  daysOfWeek?: SessionRecurrenceDay[];
+  isRecurring: boolean;
+};
+
+export type ApiClass = {
+  id: number;
+  code: string;
+  title: string;
+  deliveryMode: 'presential' | 'online' | 'hybrid';
+  status: 'open' | 'ongoing' | 'completed' | 'cancelled';
+  startDate: string;
+  endDate: string | null;
+  startTime: string | null;
+  endTime: string | null;
+  capacity: number;
+  courseId: number;
+  instructorId?: number | null;
+  courseTitle: string;
+  enrolledCount: number;
+  professor?: string | null;
+  professorName?: string | null;
+  instructor?: string | null;
+  instructorName?: string | null;
+  sessionTitle?: string | null;
+  sessionRecurrenceSummary?: SessionRecurrenceSummary | null;
+};
+
+type ApiCourseList = {
+  data: Array<{ id: number; title: string }>;
+  total?: number;
+  page?: number;
+  pageSize?: number;
+  lastPage?: number;
+};
+
+type ApiCategoryList = {
+  data: ApiCategory[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+type ApiCategory = {
+  id: number;
+  slug: string;
+  name: string;
+  status?: 'active' | 'inactive';
+};
+
+type ApiCreatedCourse = {
+  id: number;
+  title: string;
+};
+
+type InstructorOption = {
+  id: number;
+  name: string;
+  personId?: number;
+  qualificationSlugs?: string[];
+};
+
+type InstructorApiRow = {
+  id?: number | string;
+  instructor_id?: number | string;
+  value?: number | string;
+  name?: string;
+  nome?: string;
+  full_name?: string;
+  label?: string;
+  personId?: number | string;
+  person_id?: number | string;
+  qualificationSlugs?: string[];
+};
+
+type 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;
+};
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function parseFormDate(value: string) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value ?? '');
+  if (!match) return null;
+  return new Date(
+    Number(match[1]),
+    Number(match[2]) - 1,
+    Number(match[3]),
+    12,
+    0,
+    0,
+    0
+  );
+}
+
+function getDayCodeFromDate(value?: string): SessionRecurrenceDay {
+  const date = parseFormDate(value ?? '') ?? new Date();
+  return ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'][
+    date.getDay()
+  ] as SessionRecurrenceDay;
+}
+
+function getDefaultSessionTitle(courseTitle?: string, code?: string) {
+  return [courseTitle?.trim(), code?.trim()].filter(Boolean).join(' - ');
+}
+
+function toApiType(tipo: string) {
+  if (tipo === 'presencial') return 'presential';
+  if (tipo === 'hibrida') return 'hybrid';
+  return 'online';
+}
+
+function toPtType(tipo: ApiClass['deliveryMode']): TurmaForm['tipo'] {
+  if (tipo === 'presential') return 'presencial';
+  if (tipo === 'hybrid') return 'hibrida';
+  return 'online';
+}
+
+function toApiStatus(status: string) {
+  if (status === 'aberta') return 'open';
+  if (status === 'em_andamento') return 'ongoing';
+  if (status === 'concluida') return 'completed';
+  return 'cancelled';
+}
+
+function toPtStatus(status: ApiClass['status']): TurmaForm['status'] {
+  if (status === 'open') return 'aberta';
+  if (status === 'ongoing') return 'em_andamento';
+  if (status === 'completed') return 'concluida';
+  return 'cancelada';
+}
+
+function getDateOnly(value?: string | null) {
+  if (!value) return '';
+  return value.slice(0, 10);
+}
+
+function formatDate(d: string) {
+  const [y, m, day] = d.split('-');
+  return `${day}/${m}/${y}`;
+}
+
+function formatDateRangeLabel(start?: string, end?: string) {
+  if (start && end) return `${formatDate(start)} - ${formatDate(end)}`;
+  if (start) return formatDate(start);
+  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 normalizeInstructorOption(
+  item: InstructorApiRow
+): InstructorOption | null {
+  const id = Number(item?.id ?? item?.instructor_id ?? item?.value ?? 0);
+  const name = String(
+    item?.name ?? item?.nome ?? item?.full_name ?? item?.label ?? ''
+  ).trim();
+  if (!id || !name) return null;
+  return {
+    id,
+    name,
+    personId: Number(item?.personId ?? item?.person_id ?? 0) || undefined,
+    qualificationSlugs: Array.isArray(item?.qualificationSlugs)
+      ? item.qualificationSlugs
+      : undefined,
+  };
+}
+
+function 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 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';
+}
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+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 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}`;
+}
+
+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.',
+        });
+      }
+
+      if (values.sessionRecurrenceMode !== 'none') {
+        if (!values.sessionRecurrenceUntil) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ['sessionRecurrenceUntil'],
+            message: t('form.validation.sessionRecurrenceUntilRequired'),
+          });
+        } else if (values.sessionRecurrenceUntil < values.dataInicio) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ['sessionRecurrenceUntil'],
+            message: t('form.validation.sessionRecurrenceUntilAfterStart'),
+          });
+        }
+      }
+
+      const requiresDays =
+        values.sessionRecurrenceMode === 'weekly' ||
+        values.sessionRecurrenceMode === 'weekdays' ||
+        (values.sessionRecurrenceMode === 'custom' &&
+          values.sessionRecurrenceCustomFrequency === 'weekly');
+
+      if (requiresDays && values.sessionRecurrenceDaysOfWeek.length === 0) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['sessionRecurrenceDaysOfWeek'],
+          message: t('form.validation.sessionRecurrenceDaysRequired'),
+        });
+      }
+    });
+}
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+export interface ClassFormSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Omit for create mode; provide for edit mode. */
+  classId?: string;
+  sheetTitle?: string;
+  sheetDescription?: string;
+  onAfterCreate?: (cls: ApiClass) => Promise<void>;
+  onSuccess?: () => void;
+  /** @deprecated Use onSuccess */
+  onSaved?: () => void;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function ClassFormSheet({
+  open,
+  onOpenChange,
+  classId,
+  sheetTitle,
+  sheetDescription,
+  onAfterCreate,
+  onSuccess,
+  onSaved,
+}: ClassFormSheetProps) {
+  const t = useTranslations('lms.ClassesPage');
+  const courseSheetT = useTranslations('lms.CoursesPage');
+  const { request } = useApp();
+
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [savingCourse, setSavingCourse] = useState(false);
+  const [dateRangeOpen, setDateRangeOpen] = useState(false);
+  const [dateRangeDraft, setDateRangeDraft] = useState<DateRange | undefined>();
+  const [professorOpen, setProfessorOpen] = useState(false);
+  const [professorSearch, setProfessorSearch] = useState('');
+  const [createProfessorDialogOpen, setCreateProfessorDialogOpen] =
+    useState(false);
+  const [courseSheetOpen, setCourseSheetOpen] = useState(false);
+  const [customRecurrenceDialogOpen, setCustomRecurrenceDialogOpen] =
+    useState(false);
+  const [previousRecurrenceMode, setPreviousRecurrenceMode] =
+    useState<SessionRecurrenceMode>('none');
+  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 courseForm = useForm<CourseSheetFormValues>({
+    resolver: zodResolver(getCourseSheetSchema(courseSheetT)),
+    defaultValues: DEFAULT_COURSE_FORM_VALUES,
+  });
+
+  const watchedFormValues = useWatch({ control: form.control });
+
+  // ── Queries ────────────────────────────────────────────────────────────────
+
+  const {
+    data: professorOptions = [],
+    isFetching: loadingProfessores,
+    refetch: refetchProfessorOptions,
+  } = useQuery<InstructorOption[]>({
+    queryKey: ['class-form-sheet-professors', professorSearch],
+    queryFn: async () => {
+      const response = await request<
+        | InstructorApiRow[]
+        | {
+            data?: InstructorApiRow[];
+            items?: InstructorApiRow[];
+            rows?: InstructorApiRow[];
+          }
+      >({
+        url: '/lms/instructors',
+        method: 'GET',
+        params: {
+          page: 1,
+          pageSize: 100,
+          qualificationSlugs: ['class-sessions'],
+          ...(professorSearch.trim() ? { search: professorSearch.trim() } : {}),
+        },
+      });
+
+      const payload = response.data;
+      const rows = Array.isArray(payload)
+        ? payload
+        : Array.isArray(payload?.data)
+          ? payload.data
+          : Array.isArray(payload?.items)
+            ? payload.items
+            : Array.isArray(payload?.rows)
+              ? payload.rows
+              : [];
+
+      const unique = new Map<number, InstructorOption>();
+      for (const row of rows) {
+        const normalized = normalizeInstructorOption(row);
+        if (!normalized) continue;
+        unique.set(normalized.id, normalized);
+      }
+
+      return Array.from(unique.values()).sort((a, b) =>
+        a.name.localeCompare(b.name)
+      );
+    },
+    initialData: [],
+  });
+
+  const { data: categoryListData, refetch: refetchCategoryOptions } =
+    useQuery<ApiCategoryList>({
+      queryKey: ['class-form-sheet-categories'],
+      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 },
+    });
+
+  // ── Load class data when opened ────────────────────────────────────────────
+
+  useEffect(() => {
+    if (!open) return;
+
+    if (classId) {
+      // Edit mode: load from API
+      setLoading(true);
+      request<ApiClass>({ url: `/lms/classes/${classId}`, method: 'GET' })
+        .then((res) => {
+          const data = res.data;
+          const recurrenceSummary = data.sessionRecurrenceSummary;
+          const recurrenceMode = inferRecurrenceMode(recurrenceSummary);
+          const dataInicio = getDateOnly(data.startDate);
+          const dataFim = getDateOnly(data.endDate);
+          const defaultDay = getDayCodeFromDate(dataInicio);
+          const professorName =
+            data.professorName ??
+            data.professor ??
+            data.instructorName ??
+            data.instructor ??
+            '';
+
+          setPreviousRecurrenceMode(recurrenceMode);
+          setDateRangeOpen(false);
+          setDateRangeDraft({
+            from: dataInicio ? new Date(`${dataInicio}T00:00:00`) : undefined,
+            to: dataFim ? new Date(`${dataFim}T00:00:00`) : undefined,
+          });
+
+          form.reset({
+            codigo: data.code,
+            curso: data.courseTitle,
+            courseId: data.courseId,
+            instructorId: data.instructorId ?? undefined,
+            tipo: toPtType(data.deliveryMode),
+            professor: professorName?.trim() || '',
+            vagas: data.capacity,
+            dataInicio,
+            dataFim: dataFim ?? '',
+            horarioInicio: data.startTime ?? '',
+            horarioFim: data.endTime ?? '',
+            sessionRecurrenceMode: recurrenceMode,
+            sessionRecurrenceCustomFrequency:
+              recurrenceSummary?.frequency ?? 'weekly',
+            sessionRecurrenceInterval: recurrenceSummary?.interval ?? 1,
+            sessionRecurrenceDaysOfWeek:
+              recurrenceSummary?.daysOfWeek ??
+              (recurrenceMode === 'weekly' ? [defaultDay] : []),
+            sessionRecurrenceUntil: recurrenceSummary?.until ?? dataFim ?? '',
+            sessionTitleMode:
+              data.sessionTitle &&
+              data.sessionTitle !==
+                getDefaultSessionTitle(data.courseTitle, data.code)
+                ? 'custom'
+                : 'default-course-code',
+            sessionTitle:
+              data.sessionTitle ??
+              getDefaultSessionTitle(data.courseTitle, data.code),
+            status: toPtStatus(data.status),
+          });
+        })
+        .catch(() => {
+          toast.error('Não foi possível carregar os dados da turma.');
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    } else {
+      // Create mode: reset with fresh defaults + generated code
+      const nextSeed = createClassCodeSeed();
+      const nextCode = buildClassCode(undefined, nextSeed);
+      setDateRangeDraft(undefined);
+      setDateRangeOpen(false);
+      setPreviousRecurrenceMode('none');
+      form.reset({
+        codigo: nextCode,
+        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: getDefaultSessionTitle(undefined, nextCode),
+        status: 'aberta',
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, classId]);
+
+  useEffect(() => {
+    if (professorOpen) void refetchProfessorOptions();
+  }, [professorOpen, refetchProfessorOptions]);
+
+  useEffect(() => {
+    if (courseSheetOpen) void refetchCategoryOptions();
+  }, [courseSheetOpen, refetchCategoryOptions]);
+
+  // ── Derived ────────────────────────────────────────────────────────────────
+
+  const selectedCourseTitle = 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.sessionRecurrenceUntil
+      ? formatDate(watchedFormValues.sessionRecurrenceUntil)
+      : '--';
+    return t(
+      `form.recurrence.summary.${watchedFormValues.sessionRecurrenceMode}`,
+      { until }
+    );
+  }, [
+    t,
+    watchedFormValues.sessionRecurrenceMode,
+    watchedFormValues.sessionRecurrenceUntil,
+  ]);
+
+  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';
+
+  // Sync sessionTitle when mode is default
+  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]);
+
+  // Sync recurrenceUntil when dataFim changes
+  useEffect(() => {
+    if (!watchedFormValues.dataFim) return;
+    form.setValue('sessionRecurrenceUntil', watchedFormValues.dataFim, {
+      shouldDirty: false,
+      shouldTouch: false,
+      shouldValidate: false,
+    });
+  }, [form, watchedFormValues.dataFim]);
+
+  // Sync days of week when mode changes
+  useEffect(() => {
+    if (!watchedFormValues.dataInicio) return;
+    const defaultDay = getDayCodeFromDate(watchedFormValues.dataInicio);
+    const recurrenceMode = watchedFormValues.sessionRecurrenceMode;
+    const recurrenceDays = watchedFormValues.sessionRecurrenceDaysOfWeek ?? [];
+
+    if (recurrenceMode === 'weekly' && recurrenceDays.length === 0) {
+      form.setValue('sessionRecurrenceDaysOfWeek', [defaultDay], {
+        shouldDirty: false,
+        shouldTouch: false,
+        shouldValidate: false,
+      });
+    }
+
+    if (recurrenceMode === 'weekdays') {
+      form.setValue(
+        'sessionRecurrenceDaysOfWeek',
+        ['MO', 'TU', 'WE', 'TH', 'FR'],
+        {
+          shouldDirty: false,
+          shouldTouch: false,
+          shouldValidate: false,
+        }
+      );
+    }
+  }, [
+    form,
+    watchedFormValues.dataInicio,
+    watchedFormValues.sessionRecurrenceDaysOfWeek,
+    watchedFormValues.sessionRecurrenceMode,
+  ]);
+
+  // Auto-suggest end time
+  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]);
+
+  // ── Handlers ───────────────────────────────────────────────────────────────
+
+  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',
+      'sessionRecurrenceUntil',
+      'sessionRecurrenceDaysOfWeek',
+      'dataInicio',
+    ]);
+    if (!valid) return;
+
+    setPreviousRecurrenceMode('custom');
+    customRecurrenceConfirmedRef.current = true;
+    form.setValue('sessionRecurrenceMode', 'custom', {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+    setCustomRecurrenceDialogOpen(false);
+  }
+
+  const handleProfessorCreated = async (instructor: {
+    id: number;
+    personId: number;
+    name: string;
+    qualificationSlugs: string[];
+  }) => {
+    form.setValue('instructorId', instructor.id, {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+    form.setValue('professor', instructor.name, {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+    await refetchProfessorOptions();
+  };
+
+  async function onSubmitCourse(data: CourseSheetFormValues) {
+    setSavingCourse(true);
+    try {
+      const payload = {
+        slug: data.nomeInterno.trim(),
+        title: data.tituloComercial,
+        description: data.descricao,
+        level: toApiCourseLevel(data.nivel),
+        status: toApiCourseStatus(data.status),
+        categorySlugs: data.categorias,
+        primaryColor: data.primaryColor,
+        primaryContrastColor: getContrastColor(data.primaryColor),
+        secondaryColor: data.secondaryColor,
+        secondaryContrastColor: getContrastColor(data.secondaryColor),
+      };
+
+      const response = await request<ApiCreatedCourse>({
+        url: '/lms/courses',
+        method: 'POST',
+        data: payload,
+      });
+
+      const createdCourse = response.data;
+      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('Não foi possível cadastrar o curso.');
+    } finally {
+      setSavingCourse(false);
+    }
+  }
+
+  async function onSubmit(data: TurmaForm) {
+    setSaving(true);
+    try {
+      const courseId = data.courseId;
+      const courseName = data.curso;
+      const instructorId = data.instructorId ?? form.getValues('instructorId');
+      const sessionTitle =
+        data.sessionTitleMode === 'custom'
+          ? data.sessionTitle?.trim() || defaultSessionTitle
+          : defaultSessionTitle;
+      const sessionTemplate = {
+        title: sessionTitle,
+        recurrence: buildSessionRecurrencePayload(data),
+      };
+
+      const payload = {
+        code: data.codigo,
+        title: `${courseName} - ${data.codigo}`,
+        courseId,
+        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,
+      };
+
+      if (classId) {
+        await request({
+          url: `/lms/classes/${classId}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        toast.success(t('toasts.turmaUpdated'));
+      } else {
+        const response = await request<ApiClass>({
+          url: '/lms/classes',
+          method: 'POST',
+          data: payload,
+        });
+        toast.success(t('toasts.turmaCreated'));
+        if (onAfterCreate && response.data) {
+          await onAfterCreate(response.data);
+        }
+      }
+
+      onOpenChange(false);
+      onSaved?.();
+      onSuccess?.();
+    } catch {
+      toast.error('Não foi possível salvar a turma.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+
+  return (
+    <>
+      <Sheet open={open} onOpenChange={onOpenChange}>
+        <SheetContent
+          side="right"
+          className="flex w-full flex-col overflow-y-auto sm:max-w-2xl"
+        >
+          <SheetHeader className="shrink-0">
+            <SheetTitle>
+              {sheetTitle ??
+                (classId ? t('form.title.edit') : t('form.title.create'))}
+            </SheetTitle>
+            <SheetDescription>
+              {sheetDescription ?? t('form.description')}
+            </SheetDescription>
+          </SheetHeader>
+
+          {loading ? (
+            <div className="flex flex-1 items-center justify-center">
+              <Loader2 className="size-6 animate-spin text-muted-foreground" />
+            </div>
+          ) : (
+            <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 ?? ''}
+                    readOnly
+                    className="uppercase"
+                  />
+                  <FieldDescription>
+                    Codigo gerado automaticamente pelo sistema.
+                  </FieldDescription>
+                  <FieldError>
+                    {form.formState.errors.codigo?.message}
+                  </FieldError>
+                </Field>
+
+                <Field>
+                  <FieldLabel>
+                    {t('form.fields.course.label')}{' '}
+                    <span className="text-destructive">*</span>
+                  </FieldLabel>
+                  <div className="flex items-end gap-2">
+                    <div className="min-w-0 flex-1">
+                      <EntityPicker<{ id: number; title: string }, TurmaForm>
+                        form={form}
+                        name="courseId"
+                        valueType="number"
+                        placeholder={t('form.fields.course.placeholder')}
+                        entityLabel={t('form.fields.course.label')}
+                        initialSelectedLabel={selectedCourseTitle}
+                        searchPlaceholder={t('form.fields.course.placeholder')}
+                        emptyStateDescription="Nenhum curso encontrado."
+                        loadingLabel="Carregando cursos..."
+                        noResultsLabel="Nenhum curso encontrado."
+                        showCreateButton={false}
+                        onChange={(value, option) => {
+                          const cId =
+                            typeof value === 'number' ? value : undefined;
+                          const cTitle =
+                            option && typeof option.title === 'string'
+                              ? option.title
+                              : '';
+                          form.setValue('courseId', cId, {
+                            shouldDirty: true,
+                            shouldTouch: true,
+                            shouldValidate: true,
+                          });
+                          form.setValue('curso', cTitle, {
+                            shouldDirty: true,
+                            shouldTouch: true,
+                            shouldValidate: false,
+                          });
+                        }}
+                        loadOptions={async ({ page, pageSize, search }) => {
+                          const response = await request<ApiCourseList>({
+                            url: '/lms/courses',
+                            method: 'GET',
+                            params: {
+                              page,
+                              pageSize,
+                              ...(search.trim()
+                                ? { search: search.trim() }
+                                : {}),
+                            },
+                          });
+                          return {
+                            items: response.data?.data ?? [],
+                            hasMore: page < (response.data?.lastPage ?? 1),
+                          };
+                        }}
+                        getOptionValue={(option) => option.id}
+                        getOptionLabel={(option) => option.title}
+                      />
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon"
+                      className="shrink-0"
+                      onClick={() => {
+                        courseForm.reset(DEFAULT_COURSE_FORM_VALUES);
+                        setCourseSheetOpen(true);
+                      }}
+                      aria-label="Cadastrar novo curso"
+                    >
+                      <Plus className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </Field>
+              </div>
+
+              <div className="rounded-lg border border-border/70 p-4">
+                <div className="grid gap-4">
+                  <Field>
+                    <FieldLabel>
+                      {t('form.fields.startDate.label')} /{' '}
+                      {t('form.fields.endDate.label')}{' '}
+                      <span className="text-destructive">*</span>
+                    </FieldLabel>
+                    <Popover
+                      open={dateRangeOpen}
+                      onOpenChange={setDateRangeOpen}
+                    >
+                      <PopoverTrigger asChild>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          className={`w-full justify-start text-left font-normal ${
+                            !watchedFormValues.dataInicio ||
+                            !watchedFormValues.dataFim
+                              ? 'text-muted-foreground'
+                              : ''
+                          }`}
+                        >
+                          <CalendarIcon className="mr-2 size-4" />
+                          {formatDateRangeLabel(
+                            watchedFormValues.dataInicio,
+                            watchedFormValues.dataFim
+                          ) || 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={field.onChange}
+                            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>
+
+                  <Field>
+                    <FieldLabel>{t('form.recurrence.label')}</FieldLabel>
+                    <Select
+                      value={watchedFormValues.sessionRecurrenceMode}
+                      onValueChange={(value) =>
+                        handleRecurrenceModeChange(
+                          value as SessionRecurrenceMode
+                        )
+                      }
+                    >
+                      <SelectTrigger className="w-full md:w-56">
+                        <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>
+                    <FieldError>
+                      {form.formState.errors.sessionRecurrenceMode?.message}
+                    </FieldError>
+                  </Field>
+
+                  {(watchedFormValues.sessionRecurrenceMode === 'weekly' ||
+                    watchedFormValues.sessionRecurrenceMode === 'weekdays' ||
+                    (watchedFormValues.sessionRecurrenceMode === 'custom' &&
+                      customRecurrenceFrequency === 'weekly')) && (
+                    <Field>
+                      <FieldLabel>
+                        {t('form.recurrence.customDialog.repeatOn')}
+                      </FieldLabel>
+                      <div className="flex flex-wrap gap-2">
+                        {recurrenceDayOptions.map((day) => {
+                          const active = (
+                            watchedFormValues.sessionRecurrenceDaysOfWeek ?? []
+                          ).includes(day.value);
+                          const isWeekdays =
+                            watchedFormValues.sessionRecurrenceMode ===
+                            'weekdays';
+                          return (
+                            <Button
+                              key={day.value}
+                              type="button"
+                              variant={active ? 'default' : 'outline'}
+                              size="icon"
+                              className="rounded-full"
+                              disabled={isWeekdays}
+                              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>
+                <Controller
+                  name="professor"
+                  control={form.control}
+                  render={({ field }) => (
+                    <div className="flex items-end gap-2">
+                      <div className="flex-1">
+                        <Popover
+                          open={professorOpen}
+                          onOpenChange={setProfessorOpen}
+                        >
+                          <PopoverTrigger asChild>
+                            <Button
+                              type="button"
+                              variant="outline"
+                              role="combobox"
+                              className="w-full justify-between"
+                            >
+                              <span className="truncate text-left">
+                                {field.value ||
+                                  t('form.fields.professor.placeholder')}
+                              </span>
+                              {loadingProfessores ? (
+                                <Loader2 className="ml-2 h-4 w-4 shrink-0 animate-spin opacity-60" />
+                              ) : (
+                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                              )}
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent className="p-0" align="start">
+                            <Command shouldFilter={false}>
+                              <CommandInput
+                                placeholder={t(
+                                  'form.fields.professor.placeholder'
+                                )}
+                                value={professorSearch}
+                                onValueChange={setProfessorSearch}
+                              />
+                              <CommandList>
+                                <CommandEmpty>
+                                  <div className="flex flex-col items-center gap-3 px-2 py-4">
+                                    <p className="text-sm text-muted-foreground">
+                                      Nenhum professor encontrado.
+                                    </p>
+                                    <Button
+                                      type="button"
+                                      variant="outline"
+                                      size="sm"
+                                      className="w-full"
+                                      onClick={() => {
+                                        setProfessorOpen(false);
+                                        setCreateProfessorDialogOpen(true);
+                                      }}
+                                    >
+                                      <Plus className="mr-2 h-4 w-4" />
+                                      Cadastrar novo professor
+                                    </Button>
+                                  </div>
+                                </CommandEmpty>
+                                <CommandGroup>
+                                  {professorOptions.map((professor) => (
+                                    <CommandItem
+                                      key={professor.id}
+                                      value={`${professor.name}-${professor.id}`}
+                                      onSelect={() => {
+                                        form.setValue(
+                                          'instructorId',
+                                          professor.id,
+                                          {
+                                            shouldDirty: true,
+                                            shouldTouch: true,
+                                            shouldValidate: true,
+                                          }
+                                        );
+                                        field.onChange(professor.name);
+                                        setProfessorOpen(false);
+                                        setProfessorSearch('');
+                                      }}
+                                    >
+                                      {professor.name}
+                                    </CommandItem>
+                                  ))}
+                                </CommandGroup>
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        className="shrink-0"
+                        onClick={() => setCreateProfessorDialogOpen(true)}
+                        aria-label="Cadastrar novo professor"
+                      >
+                        <Plus className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  )}
+                />
+                <FieldError>
+                  {form.formState.errors.professor?.message}
+                </FieldError>
+              </Field>
+
+              <SheetFooter className="mt-auto shrink-0 gap-2 px-0 pt-4">
+                <Button type="submit" disabled={saving} className="gap-2">
+                  {saving && <Loader2 className="size-4 animate-spin" />}
+                  {classId ? t('form.actions.save') : t('form.actions.create')}
+                </Button>
+              </SheetFooter>
+            </form>
+          )}
+        </SheetContent>
+      </Sheet>
+
+      {/* Custom Recurrence Dialog */}
+      <Dialog
+        open={customRecurrenceDialogOpen}
+        onOpenChange={(isOpen) => {
+          if (!isOpen) {
+            if (customRecurrenceConfirmedRef.current) {
+              customRecurrenceConfirmedRef.current = false;
+              setCustomRecurrenceDialogOpen(false);
+              return;
+            }
+            handleCustomRecurrenceCancel();
+            return;
+          }
+          setCustomRecurrenceDialogOpen(true);
+        }}
+      >
+        <DialogContent className="sm:max-w-xl">
+          <DialogHeader>
+            <DialogTitle>{t('form.recurrence.customDialog.title')}</DialogTitle>
+            <DialogDescription>
+              {t('form.recurrence.customDialog.description')}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-5 py-2">
+            <div className="grid gap-4 sm:grid-cols-[140px_minmax(0,1fr)] sm:items-end">
+              <Field>
+                <FieldLabel>
+                  {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="flex flex-wrap gap-2">
+                  {recurrenceDayOptions.map((day) => {
+                    const active = (
+                      watchedFormValues.sessionRecurrenceDaysOfWeek ?? []
+                    ).includes(day.value);
+                    return (
+                      <Button
+                        key={day.value}
+                        type="button"
+                        variant={active ? 'default' : 'outline'}
+                        size="icon"
+                        className="rounded-full"
+                        onClick={() => toggleCustomRecurrenceDay(day.value)}
+                      >
+                        {day.label}
+                      </Button>
+                    );
+                  })}
+                </div>
+                <FieldError>
+                  {form.formState.errors.sessionRecurrenceDaysOfWeek?.message}
+                </FieldError>
+              </Field>
+            )}
+
+            <Field>
+              <FieldLabel>
+                {t('form.recurrence.customDialog.endDate')}
+              </FieldLabel>
+              <Input
+                type="date"
+                min={watchedFormValues.dataInicio || undefined}
+                value={watchedFormValues.sessionRecurrenceUntil ?? ''}
+                onChange={(event) =>
+                  form.setValue('sessionRecurrenceUntil', event.target.value, {
+                    shouldDirty: true,
+                    shouldTouch: true,
+                    shouldValidate: true,
+                  })
+                }
+              />
+              <FieldError>
+                {form.formState.errors.sessionRecurrenceUntil?.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>
+
+      {/* Course create sheet */}
+      <CourseFormSheet
+        key="class-form-sheet-course-create"
+        open={courseSheetOpen}
+        onOpenChange={setCourseSheetOpen}
+        editing={false}
+        saving={savingCourse}
+        form={courseForm}
+        onSubmit={onSubmitCourse}
+        categories={categoryOptions}
+        onCreateCategory={() => {
+          if (typeof window !== 'undefined') {
+            window.open('/category?new=1', '_blank');
+          }
+        }}
+        t={courseSheetT}
+      />
+
+      {/* Professor create sheet */}
+      <CreateLmsPersonSheet
+        open={createProfessorDialogOpen}
+        onOpenChange={setCreateProfessorDialogOpen}
+        onCreated={handleProfessorCreated}
+        title="Cadastrar novo professor"
+        description="Crie um novo professor para seleciona-lo nesta turma."
+        submitLabel="Cadastrar"
+        successMessage="Professor cadastrado com sucesso."
+        errorMessage="Não foi possível cadastrar o professor."
+        defaultQualificationSlugs={['class-sessions']}
+      />
+    </>
+  );
+}