@hed-hog/lms 0.0.306 → 0.0.309

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { CourseAvatar } from '@/app/(app)/(libraries)/lms/_components/course-avatar';
 import {
   EmptyState,
   Page,
@@ -8,18 +9,11 @@ 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 {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
 import {
   Dialog,
   DialogContent,
@@ -83,7 +77,6 @@ import {
   AlertTriangle,
   BarChart3,
   CalendarIcon,
-  ChevronsUpDown,
   Clock,
   Eye,
   Laptop,
@@ -135,6 +128,7 @@ interface Turma {
   professor: string;
   sessionTitle?: string | null;
   sessionRecurrenceSummary?: SessionRecurrenceSummary | null;
+  logoFileId?: number | null;
 }
 
 type SessionRecurrenceFrequency = 'daily' | 'weekly' | 'monthly' | 'yearly';
@@ -196,7 +190,12 @@ type ApiClassStats = {
 };
 
 type ApiCourseList = {
-  data: Array<{ id: number; title: string }>;
+  data: Array<{
+    id: number;
+    title: string;
+    code?: string;
+    logoFileId?: number | null;
+  }>;
   total?: number;
   page?: number;
   pageSize?: number;
@@ -226,6 +225,7 @@ type InstructorOption = {
   id: number;
   name: string;
   personId?: number;
+  avatarId?: number | null;
   qualificationSlugs?: string[];
 };
 
@@ -239,6 +239,8 @@ type InstructorApiRow = {
   label?: string;
   personId?: number | string;
   person_id?: number | string;
+  avatarId?: number | string | null;
+  avatar_id?: number | string | null;
   qualificationSlugs?: string[];
 };
 
@@ -260,10 +262,17 @@ function normalizeInstructorOption(
     return null;
   }
 
+  const rawAvatarId = item?.avatarId ?? item?.avatar_id;
+  const avatarId =
+    rawAvatarId !== undefined && rawAvatarId !== null
+      ? Number(rawAvatarId) || null
+      : null;
+
   return {
     id,
     name,
     personId: Number(item?.personId ?? item?.person_id ?? 0) || undefined,
+    avatarId,
     qualificationSlugs: Array.isArray(item?.qualificationSlugs)
       ? item.qualificationSlugs
       : undefined,
@@ -483,22 +492,6 @@ function getTurmaSchema(t: (key: string) => string) {
         });
       }
 
-      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' ||
@@ -690,8 +683,6 @@ export default function TurmasPage() {
     useState(false);
   const [previousRecurrenceMode, setPreviousRecurrenceMode] =
     useState<SessionRecurrenceMode>('none');
-  const [professorOpen, setProfessorOpen] = useState(false);
-  const [professorSearch, setProfessorSearch] = useState('');
   const [createProfessorDialogOpen, setCreateProfessorDialogOpen] =
     useState(false);
 
@@ -798,63 +789,6 @@ export default function TurmasPage() {
       },
     });
 
-  const {
-    data: professorOptions = [],
-    isFetching: loadingProfessores,
-    refetch: refetchProfessorOptions,
-  } = useQuery<InstructorOption[]>({
-    queryKey: ['lms-classes-professors', professorSearch],
-    queryFn: async () => {
-      const response = await request<
-        | InstructorApiRow[]
-        | {
-            data?: InstructorApiRow[];
-            items?: InstructorApiRow[];
-            rows?: InstructorApiRow[];
-          }
-      >({
-        url: '/lms/instructors',
-        method: 'GET',
-        params: {
-          page: 1,
-          pageSize: 100,
-          qualificationSlugs: ['class-sessions'],
-          ...(professorSearch.trim() ? { search: professorSearch.trim() } : {}),
-        },
-      });
-
-      const payload = response.data;
-      const rows = Array.isArray(payload)
-        ? payload
-        : Array.isArray(payload?.data)
-          ? payload.data
-          : Array.isArray(payload?.items)
-            ? payload.items
-            : Array.isArray(payload?.rows)
-              ? payload.rows
-              : [];
-
-      const unique = new Map<number, InstructorOption>();
-
-      for (const row of rows) {
-        const normalized = normalizeInstructorOption(row);
-        if (!normalized) continue;
-        unique.set(normalized.id, normalized);
-      }
-
-      return Array.from(unique.values()).sort((a, b) =>
-        a.name.localeCompare(b.name)
-      );
-    },
-    initialData: [],
-  });
-
-  useEffect(() => {
-    if (professorOpen) {
-      void refetchProfessorOptions();
-    }
-  }, [professorOpen, refetchProfessorOptions]);
-
   useEffect(() => {
     if (courseSheetOpen) {
       void refetchCategoryOptions();
@@ -936,6 +870,7 @@ export default function TurmasPage() {
 
   useEffect(() => {
     if (!sheetOpen || editingTurma || !createCodeSeed) return;
+    if (form.getFieldState('codigo').isDirty) return;
 
     const nextCode = buildClassCode(
       watchedFormValues.curso || undefined,
@@ -1019,9 +954,9 @@ export default function TurmasPage() {
   );
 
   const recurrenceSummaryText = useMemo(() => {
-    const until = watchedFormValues.sessionRecurrenceUntil
+    const until = watchedFormValues.dataFim
       ? formatDateLocalized(
-          watchedFormValues.sessionRecurrenceUntil,
+          watchedFormValues.dataFim,
           getSettingValue,
           currentLocaleCode
         )
@@ -1036,7 +971,7 @@ export default function TurmasPage() {
   }, [
     t,
     watchedFormValues.sessionRecurrenceMode,
-    watchedFormValues.sessionRecurrenceUntil,
+    watchedFormValues.dataFim,
     getSettingValue,
     currentLocaleCode,
   ]);
@@ -1097,23 +1032,19 @@ export default function TurmasPage() {
     watchedFormValues.sessionRecurrenceMode === 'custom' &&
     customRecurrenceFrequency === 'weekly';
 
+  const weeklyNeedsDays = watchedFormValues.sessionRecurrenceMode === 'weekly';
+
   useEffect(() => {
     if (!watchedFormValues.dataFim) {
       return;
     }
 
-    if (!watchedFormValues.sessionRecurrenceUntil) {
-      form.setValue('sessionRecurrenceUntil', watchedFormValues.dataFim, {
-        shouldDirty: false,
-        shouldTouch: false,
-        shouldValidate: false,
-      });
-    }
-  }, [
-    form,
-    watchedFormValues.dataFim,
-    watchedFormValues.sessionRecurrenceUntil,
-  ]);
+    form.setValue('sessionRecurrenceUntil', watchedFormValues.dataFim, {
+      shouldDirty: false,
+      shouldTouch: false,
+      shouldValidate: false,
+    });
+  }, [form, watchedFormValues.dataFim]);
 
   useEffect(() => {
     if (!watchedFormValues.dataInicio) {
@@ -1122,7 +1053,7 @@ export default function TurmasPage() {
 
     const defaultDay = getDayCodeFromDate(watchedFormValues.dataInicio);
     const recurrenceMode = watchedFormValues.sessionRecurrenceMode;
-    const recurrenceDays = watchedFormValues.sessionRecurrenceDaysOfWeek ?? [];
+    const recurrenceDays = form.getValues('sessionRecurrenceDaysOfWeek') ?? [];
 
     if (recurrenceMode === 'weekly' && recurrenceDays.length === 0) {
       form.setValue('sessionRecurrenceDaysOfWeek', [defaultDay], {
@@ -1133,20 +1064,27 @@ export default function TurmasPage() {
     }
 
     if (recurrenceMode === 'weekdays') {
-      form.setValue(
-        'sessionRecurrenceDaysOfWeek',
-        ['MO', 'TU', 'WE', 'TH', 'FR'],
-        {
-          shouldDirty: false,
-          shouldTouch: false,
-          shouldValidate: false,
-        }
-      );
+      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.sessionRecurrenceDaysOfWeek,
     watchedFormValues.sessionRecurrenceMode,
   ]);
 
@@ -1182,28 +1120,40 @@ export default function TurmasPage() {
 
   const professorNameById = useMemo<Map<number, string>>(() => {
     const map = new Map<number, string>();
-    for (const p of professorOptions) {
-      map.set(p.id, p.name);
+    for (const turma of classesResponse?.data ?? []) {
+      if (turma.instructorId && turma.instructorName) {
+        map.set(turma.instructorId, turma.instructorName);
+      }
+    }
+    return map;
+  }, [classesResponse]);
+
+  const courseLogoMap = useMemo<Map<number, number | null>>(() => {
+    const map = new Map<number, number | null>();
+    for (const course of coursesResponse?.data ?? []) {
+      map.set(course.id, course.logoFileId ?? null);
     }
     return map;
-  }, [professorOptions]);
+  }, [coursesResponse]);
 
   const turmas = useMemo<Turma[]>(
     () =>
       (classesResponse?.data ?? []).map((item) => {
         const mapped = mapApiClass(item);
+        const logoFileId = courseLogoMap.get(mapped.cursoId) ?? null;
+        const withLogo = { ...mapped, logoFileId };
         if (
-          (mapped.professor === '-' || !mapped.professor) &&
-          mapped.instructorId
+          (withLogo.professor === '-' || !withLogo.professor) &&
+          withLogo.instructorId
         ) {
-          const fallback = professorNameById.get(mapped.instructorId);
+          const fallback = professorNameById.get(withLogo.instructorId);
           if (fallback) {
-            return { ...mapped, professor: fallback };
+            return { ...withLogo, professor: fallback };
           }
         }
-        return mapped;
+        return withLogo;
       }),
-    [classesResponse, professorNameById]
+    [classesResponse, professorNameById, courseLogoMap]
   );
   const previewTurma = useMemo<Turma | null>(() => {
     if (!sheetOpen || !editingTurma) return null;
@@ -1413,7 +1363,7 @@ export default function TurmasPage() {
       sessionRecurrenceDaysOfWeek:
         recurrenceSummary?.daysOfWeek ??
         (recurrenceMode === 'weekly' ? [defaultDay] : []),
-      sessionRecurrenceUntil: recurrenceSummary?.until ?? detailedTurma.dataFim,
+      sessionRecurrenceUntil: detailedTurma.dataFim,
       sessionTitleMode:
         response.data.sessionTitle &&
         response.data.sessionTitle !==
@@ -1510,7 +1460,6 @@ export default function TurmasPage() {
   async function handleCustomRecurrenceConfirm() {
     const valid = await form.trigger([
       'sessionRecurrenceInterval',
-      'sessionRecurrenceUntil',
       'sessionRecurrenceDaysOfWeek',
       'dataInicio',
     ]);
@@ -1621,7 +1570,6 @@ export default function TurmasPage() {
         });
 
         toast.success(t('toasts.turmaUpdated'));
-        await refetchProfessorOptions();
       } else {
         const response = await request<ApiClass>({
           url: '/lms/classes',
@@ -1643,7 +1591,6 @@ export default function TurmasPage() {
         });
 
         toast.success(t('toasts.turmaCreated'));
-        await refetchProfessorOptions();
         await refetchClasses();
         await refetchStats();
         notifyLmsDashboardUpdated();
@@ -1700,7 +1647,6 @@ export default function TurmasPage() {
       shouldValidate: true,
     });
 
-    await refetchProfessorOptions();
     await refetchClasses();
   };
 
@@ -2000,16 +1946,21 @@ export default function TurmasPage() {
                     title={t('cards.tooltip')}
                   >
                     <div
-                      className="absolute inset-x-0 top-0 h-1"
-                      style={{
-                        backgroundColor: turma.primaryColor || '#1D4ED8',
-                      }}
+                      className="absolute inset-x-0 top-0 h-1 bg-primary"
+                      style={
+                        turma.primaryColor
+                          ? { backgroundColor: turma.primaryColor }
+                          : undefined
+                      }
                     />
                     <CardContent className="p-5">
                       <div className="mb-4 flex items-start gap-3">
-                        <div className="flex size-12 shrink-0 items-center justify-center rounded-xl border bg-muted">
-                          <TipoIcon className="size-6 text-foreground" />
-                        </div>
+                        <CourseAvatar
+                          fileId={turma.logoFileId}
+                          title={turma.curso}
+                          className="size-12 rounded-xl"
+                          iconSize="size-6"
+                        />
                         <div className="min-w-0 flex-1">
                           <div className="mb-1 flex items-start justify-between gap-2">
                             <h3 className="line-clamp-2 font-semibold leading-snug text-foreground">
@@ -2188,19 +2139,27 @@ export default function TurmasPage() {
                       title={t('cards.tooltip')}
                     >
                       <TableCell>
-                        <div className="min-w-0">
-                          <p className="truncate font-semibold text-foreground">
-                            {turma.curso}
-                          </p>
-                          <p className="mt-1 text-xs text-muted-foreground">
-                            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px]">
-                              {turma.codigo}
-                            </code>
-                            <span className="mx-1.5 text-muted-foreground/50">
-                              |
-                            </span>
-                            <span>{turma.professor}</span>
-                          </p>
+                        <div className="flex min-w-0 items-center gap-3">
+                          <CourseAvatar
+                            fileId={turma.logoFileId}
+                            title={turma.curso}
+                            className="size-8 shrink-0 rounded-lg"
+                            iconSize="size-4"
+                          />
+                          <div className="min-w-0">
+                            <p className="truncate font-semibold text-foreground">
+                              {turma.curso}
+                            </p>
+                            <p className="mt-1 text-xs text-muted-foreground">
+                              <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px]">
+                                {turma.codigo}
+                              </code>
+                              <span className="mx-1.5 text-muted-foreground/50">
+                                |
+                              </span>
+                              <span>{turma.professor}</span>
+                            </p>
+                          </div>
                         </div>
                       </TableCell>
                       <TableCell>
@@ -2323,11 +2282,17 @@ export default function TurmasPage() {
                 <Input
                   id="codigo"
                   value={watchedFormValues.codigo ?? ''}
-                  readOnly
                   className="uppercase"
+                  onChange={(event) =>
+                    form.setValue('codigo', event.target.value.toUpperCase(), {
+                      shouldDirty: true,
+                      shouldTouch: true,
+                      shouldValidate: true,
+                    })
+                  }
                 />
                 <FieldDescription>
-                  Codigo gerado automaticamente pelo sistema.
+                  Codigo gerado automaticamente, mas pode ser editado.
                 </FieldDescription>
                 <FieldError>{form.formState.errors.codigo?.message}</FieldError>
               </Field>
@@ -2339,7 +2304,15 @@ export default function TurmasPage() {
                 </FieldLabel>
                 <div className="flex items-end gap-2">
                   <div className="min-w-0 flex-1">
-                    <EntityPicker<{ id: number; title: string }, TurmaForm>
+                    <EntityPicker<
+                      {
+                        id: number;
+                        title: string;
+                        code?: string;
+                        logoFileId?: number | null;
+                      },
+                      TurmaForm
+                    >
                       form={form}
                       name="courseId"
                       valueType="number"
@@ -2351,6 +2324,33 @@ export default function TurmasPage() {
                       loadingLabel="Carregando cursos..."
                       noResultsLabel="Nenhum curso encontrado."
                       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;
@@ -2621,30 +2621,41 @@ export default function TurmasPage() {
                       {form.formState.errors.sessionRecurrenceMode?.message}
                     </FieldError>
                   </Field>
+                </div>
 
+                {weeklyNeedsDays && (
                   <Field>
-                    <FieldLabel>{t('form.recurrence.until')}</FieldLabel>
-                    <Input
-                      type="date"
-                      value={watchedFormValues.sessionRecurrenceUntil ?? ''}
-                      min={watchedFormValues.dataInicio || undefined}
-                      onChange={(event) =>
-                        form.setValue(
-                          'sessionRecurrenceUntil',
-                          event.target.value,
-                          {
-                            shouldDirty: true,
-                            shouldTouch: true,
-                            shouldValidate: true,
-                          }
-                        )
-                      }
-                    />
+                    <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.sessionRecurrenceUntil?.message}
+                      {
+                        form.formState.errors.sessionRecurrenceDaysOfWeek
+                          ?.message
+                      }
                     </FieldError>
                   </Field>
-                </div>
+                )}
 
                 <div className="grid gap-4 md:grid-cols-[minmax(0,0.55fr)_minmax(0,1fr)]">
                   <Field>
@@ -2812,107 +2823,139 @@ export default function TurmasPage() {
                 {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 py-4 px-2">
-                                  <p className="text-sm text-muted-foreground">
-                                    Nenhum professor encontrado.
-                                  </p>
-                                  <Button
-                                    type="button"
-                                    variant="outline"
-                                    size="sm"
-                                    className="w-full"
-                                    onClick={() => {
-                                      setProfessorOpen(false);
-                                      setCreateProfessorDialogOpen(true);
-                                    }}
-                                  >
-                                    <Plus className="mr-2 h-4 w-4" />
-                                    Cadastrar novo professor
-                                  </Button>
-                                </div>
-                              </CommandEmpty>
-                              <CommandGroup>
-                                {professorOptions.map((professor) => (
-                                  <CommandItem
-                                    key={professor.id}
-                                    value={`${professor.name}-${professor.id}`}
-                                    onSelect={() => {
-                                      form.setValue(
-                                        'instructorId',
-                                        professor.id,
-                                        {
-                                          shouldDirty: true,
-                                          shouldTouch: true,
-                                          shouldValidate: true,
-                                        }
-                                      );
-                                      field.onChange(professor.name);
-                                      setProfessorOpen(false);
-                                      setProfessorSearch('');
-                                    }}
-                                  >
-                                    {professor.name}
-                                  </CommandItem>
-                                ))}
-                              </CommandGroup>
-                            </CommandList>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="icon"
-                      className="shrink-0"
-                      onClick={() => setCreateProfessorDialogOpen(true)}
-                      aria-label="Cadastrar novo professor"
-                    >
-                      <Plus className="h-4 w-4" />
-                    </Button>
-                  </div>
-                )}
-              />
+              <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="Nenhum professor encontrado."
+                    noResultsLabel="Nenhum professor encontrado."
+                    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 = option.avatarId
+                        ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${option.avatarId}`
+                        : undefined;
+                      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 = option?.avatarId
+                        ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${option.avatarId}`
+                        : 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="Cadastrar novo professor"
+                >
+                  <Plus className="h-4 w-4" />
+                </Button>
+              </div>
               <FieldError>
                 {form.formState.errors.professor?.message}
               </FieldError>
@@ -3088,27 +3131,6 @@ export default function TurmasPage() {
                 </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">