@hed-hog/lms 0.0.331 → 0.0.347

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

@@ -10,7 +10,9 @@ import type {
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import { Field, FieldError, FieldLabel } from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
 import { InputMoney } from '@/components/ui/input-money';
 import {
   Select,
@@ -31,35 +33,52 @@ import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useTranslations } from 'next-intl';
 import { useQueryClient } from '@tanstack/react-query';
-import { BookOpen, Loader2, Pencil, Star, X } from 'lucide-react';
-import { EntityPicker } from '@/components/ui/entity-picker';
+import {
+  ArrowUpRight,
+  BookOpen,
+  ChevronLeft,
+  ChevronRight,
+  Loader2,
+  Pencil,
+  Search,
+  Star,
+  X,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
+import { ClassFormSheet } from '../../_components/class-form-sheet';
+import { CourseAvatar } from '../../_components/course-avatar';
 import type { InstructorRow, InstructorSkill } from './instructor-types';
 
 type ClassGroupItem = {
   id: number;
   name: string;
   code: string;
+  courseLogoUrl: string | null;
+  courseLogoFileId?: number | null;
   courseName: string | null;
   startDate: string | null;
   endDate: string | null;
   status: string;
   slots: number;
+  totalSlots: number | null;
 };
 
 function toKebabCase(str: string) {
-  return str
-    .toLowerCase()
-    .normalize('NFD')
-    // biome-ignore lint: unicode diacritic strip
-    .replace(/[̀-ͯ]/g, '')
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-|-$/g, '');
+  return (
+    str
+      .toLowerCase()
+      .normalize('NFD')
+      // biome-ignore lint: unicode diacritic strip
+      .replace(/[̀-ͯ]/g, '')
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-|-$/g, '')
+  );
 }
 
 function getSkillDisplayName(s: InstructorSkill): string {
@@ -91,17 +110,23 @@ export function InstructorFormSheet({
 }: InstructorFormSheetProps) {
   const { request, currentLocaleCode } = useApp();
   const t = useTranslations('lms.InstructorsPage');
+  const router = useRouter();
   const queryClient = useQueryClient();
   const [saving, setSaving] = useState(false);
   const [selectedPersonName, setSelectedPersonName] = useState('');
-  const [trainingAccess, setTrainingAccess] = useState<boolean | null>(null);
-  const [togglingAccess, setTogglingAccess] = useState(false);
   const [editPersonOpen, setEditPersonOpen] = useState(false);
   const [personToEdit, setPersonToEdit] = useState<Person | null>(null);
   const [activeTab, setActiveTab] = useState('detalhes');
   const [tabSkillSlugs, setTabSkillSlugs] = useState<string[]>([]);
   const [savingSkills, setSavingSkills] = useState(false);
   const [pickerResetKey, setPickerResetKey] = useState(0);
+  const [turmasPage, setTurmasPage] = useState(1);
+  const [turmasSearchInput, setTurmasSearchInput] = useState('');
+  const [debouncedTurmasSearch, setDebouncedTurmasSearch] = useState('');
+  const [turmasStatusFilter, setTurmasStatusFilter] = useState('all');
+  const [classSheetOpen, setClassSheetOpen] = useState(false);
+  const [editingClassId, setEditingClassId] = useState<number | null>(null);
+  const TURMAS_PAGE_SIZE = 6;
   const isEditing = typeof instructorId === 'number' && instructorId > 0;
   const qualificationOptions = [
     {
@@ -118,6 +143,8 @@ export function InstructorFormSheet({
   const statusLabel: Record<string, string> = {
     active: t('form.fields.active'),
     inactive: t('form.fields.inactive'),
+    open: t('form.classStatuses.upcoming'),
+    ongoing: t('form.classStatuses.inProgress'),
     in_progress: t('form.classStatuses.inProgress'),
     upcoming: t('form.classStatuses.upcoming'),
     completed: t('form.classStatuses.completed'),
@@ -141,6 +168,7 @@ export function InstructorFormSheet({
     control,
     handleSubmit,
     reset,
+    setValue,
     watch,
     formState: { errors },
   } = useForm<InstructorFormValues>({
@@ -153,7 +181,38 @@ export function InstructorFormSheet({
     },
   });
 
-  const watchedPersonId = watch('personId');
+  const applyCanTeachCourses = (
+    currentSlugs: string[],
+    canTeachCourses: boolean
+  ) => {
+    const uniqueSlugs = [...new Set(currentSlugs)];
+
+    if (canTeachCourses) {
+      return uniqueSlugs.includes('course-lessons')
+        ? uniqueSlugs
+        : [...uniqueSlugs, 'course-lessons'];
+    }
+
+    const filtered = uniqueSlugs.filter((slug) => slug !== 'course-lessons');
+    return filtered.length > 0 ? filtered : ['class-sessions'];
+  };
+
+  const applyQualificationToggle = (
+    currentSlugs: string[],
+    slug: string,
+    enabled: boolean
+  ) => {
+    const uniqueSlugs = [...new Set(currentSlugs)];
+    const nextSlugs = enabled
+      ? uniqueSlugs.includes(slug)
+        ? uniqueSlugs
+        : [...uniqueSlugs, slug]
+      : uniqueSlugs.filter((value) => value !== slug);
+
+    return nextSlugs.length > 0
+      ? nextSlugs
+      : [slug === 'course-lessons' ? 'class-sessions' : 'course-lessons'];
+  };
 
   const { data: contactTypes = [] } = useQuery<ContactTypeOption[]>({
     queryKey: ['contact-person-contact-types', currentLocaleCode],
@@ -181,16 +240,20 @@ export function InstructorFormSheet({
     placeholderData: (previous) => previous ?? [],
   });
 
-  const handleOpenPersonEdit = async () => {
-    if (!watchedPersonId) return;
+  const handleEditSelection = async (personId: number) => {
     const response = await request<Person>({
-      url: `/person/${watchedPersonId}`,
+      url: `/person/${personId}`,
       method: 'GET',
     });
     setPersonToEdit(response.data);
     setEditPersonOpen(true);
   };
 
+  const handleCreatePerson = () => {
+    setPersonToEdit(null);
+    setEditPersonOpen(true);
+  };
+
   const { data: existingInstructor } = useQuery<InstructorRow | null>({
     queryKey: ['lms-instructor-detail', instructorId],
     queryFn: async () => {
@@ -216,26 +279,73 @@ export function InstructorFormSheet({
     },
   });
 
-  // Turmas — enterprise/training/admin endpoint supports instructorId filter
-  const { data: turmasData = [], isLoading: loadingTurmas } = useQuery<
-    ClassGroupItem[]
-  >({
-    queryKey: ['lms-instructor-turmas', instructorId],
+  // Turmas — paginated list filtered by instructorId
+  const {
+    data: turmasResult,
+    isLoading: loadingTurmas,
+    refetch: refetchTurmas,
+  } = useQuery<{
+    data: ClassGroupItem[];
+    total: number;
+    lastPage: number;
+  }>({
+    queryKey: [
+      'lms-instructor-turmas',
+      instructorId,
+      turmasPage,
+      debouncedTurmasSearch,
+      turmasStatusFilter,
+    ],
     queryFn: async () => {
-      const response = await request<
-        { data?: ClassGroupItem[] } | ClassGroupItem[]
-      >({
-        url: `/lms/enterprise/training/admin/class-groups?instructorId=${instructorId}`,
+      if (!instructorId) {
+        return { data: [], total: 0, lastPage: 1 };
+      }
+
+      const params = new URLSearchParams({
+        page: String(turmasPage),
+        pageSize: String(TURMAS_PAGE_SIZE),
+      });
+
+      if (debouncedTurmasSearch) {
+        params.set('search', debouncedTurmasSearch);
+      }
+      if (turmasStatusFilter !== 'all') {
+        params.set('status', turmasStatusFilter);
+      }
+
+      const response = await request<{
+        data: ClassGroupItem[];
+        total: number;
+        lastPage: number;
+      }>({
+        url: `/lms/instructors/${instructorId}/class-groups?${params.toString()}`,
         method: 'GET',
       });
-      const raw = response.data;
-      if (Array.isArray(raw)) return raw;
-      if (raw && 'data' in raw && Array.isArray(raw.data)) return raw.data;
-      return [];
+      return response.data;
     },
     enabled: isEditing && open && activeTab === 'turmas',
-    placeholderData: [],
+    placeholderData: (prev) => prev,
   });
+  const turmasData = turmasResult?.data ?? [];
+  const turmasLastPage = turmasResult?.lastPage ?? 1;
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedTurmasSearch(turmasSearchInput.trim());
+      setTurmasPage(1);
+    }, 300);
+    return () => clearTimeout(timeout);
+  }, [turmasSearchInput]);
+
+  useEffect(() => {
+    setTurmasPage(1);
+  }, [turmasStatusFilter]);
+
+  useEffect(() => {
+    if (turmasPage > turmasLastPage) {
+      setTurmasPage(turmasLastPage);
+    }
+  }, [turmasLastPage, turmasPage]);
 
   useEffect(() => {
     if (isEditing && existingInstructor) {
@@ -246,12 +356,12 @@ export function InstructorFormSheet({
             ? existingInstructor.qualificationSlugs
             : ['course-lessons'],
         status: existingInstructor.status,
-        can_teach_courses: true,
+        can_teach_courses:
+          existingInstructor.qualificationSlugs.includes('course-lessons'),
         hourlyRate: existingInstructor.hourlyRate ?? null,
         skillSlugs: (existingInstructor.skills ?? []).map((s) => s.slug),
       });
       setSelectedPersonName(existingInstructor.name);
-      setTrainingAccess(existingInstructor.hasTrainingAccess ?? false);
       setTabSkillSlugs((existingInstructor.skills ?? []).map((s) => s.slug));
     } else if (!isEditing && open) {
       reset({
@@ -263,16 +373,27 @@ export function InstructorFormSheet({
         skillSlugs: [],
       });
       setSelectedPersonName('');
-      setTrainingAccess(null);
       setTabSkillSlugs([]);
     }
   }, [isEditing, existingInstructor, open, reset]);
 
-  // Reset to first tab when sheet closes
+  // Reset to first tab and turmas page when sheet closes
   useEffect(() => {
-    if (!open) setActiveTab('detalhes');
+    if (!open) {
+      setActiveTab('detalhes');
+      setTurmasPage(1);
+      setTurmasSearchInput('');
+      setDebouncedTurmasSearch('');
+      setTurmasStatusFilter('all');
+      setClassSheetOpen(false);
+      setEditingClassId(null);
+    }
   }, [open]);
 
+  useEffect(() => {
+    setTurmasPage(1);
+  }, [activeTab]);
+
   const handleSheetClose = (nextOpen: boolean) => {
     if (!nextOpen) {
       reset();
@@ -301,6 +422,22 @@ export function InstructorFormSheet({
     }
   };
 
+  const handleEditClassQuick = (classId: number) => {
+    setEditingClassId(classId);
+    setClassSheetOpen(true);
+  };
+
+  const handleOpenClassPage = (classId: number) => {
+    router.push(`/lms/classes/${classId}`);
+  };
+
+  const handleClassSaved = async () => {
+    await Promise.all([
+      refetchTurmas(),
+      queryClient.invalidateQueries({ queryKey: ['lms-classes'] }),
+    ]);
+  };
+
   const onSubmit = async (values: InstructorFormValues) => {
     try {
       setSaving(true);
@@ -342,9 +479,7 @@ export function InstructorFormSheet({
       handleSheetClose(false);
     } catch {
       toast.error(
-        isEditing
-          ? t('form.toasts.updateError')
-          : t('form.toasts.createError')
+        isEditing ? t('form.toasts.updateError') : t('form.toasts.createError')
       );
     } finally {
       setSaving(false);
@@ -360,49 +495,55 @@ export function InstructorFormSheet({
         >
           {/* ── Instructor header (edit mode) ── */}
           {isEditing && existingInstructor ? (
-            <div className="flex shrink-0 items-center gap-4 border-b px-6 py-4">
-              <Avatar className="h-14 w-14">
-                <AvatarImage
-                  src={
-                    existingInstructor.avatarId
-                      ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${existingInstructor.avatarId}`
-                      : undefined
-                  }
-                  alt={existingInstructor.name}
-                />
-                <AvatarFallback>
-                  {existingInstructor.name.slice(0, 2).toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-              <div className="min-w-0 flex-1">
-                <h2 className="truncate text-lg font-semibold">
-                  {existingInstructor.name}
-                </h2>
-                <div className="mt-1 flex flex-wrap items-center gap-2">
-                  <Badge
-                    variant={
-                      existingInstructor.status === 'active'
-                        ? 'default'
-                        : 'secondary'
+            <>
+              <SheetHeader className="sr-only">
+                <SheetTitle>{t('form.title')}</SheetTitle>
+                <SheetDescription>{t('form.description')}</SheetDescription>
+              </SheetHeader>
+              <div className="flex shrink-0 items-center gap-4 border-b px-6 py-4">
+                <Avatar className="h-14 w-14">
+                  <AvatarImage
+                    src={
+                      existingInstructor.avatarId
+                        ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${existingInstructor.avatarId}`
+                        : undefined
                     }
-                  >
-                    {existingInstructor.status === 'active'
-                      ? t('form.fields.active')
-                      : t('form.fields.inactive')}
-                  </Badge>
-                  {existingInstructor.email && (
-                    <span className="truncate text-xs text-muted-foreground">
-                      {existingInstructor.email}
-                    </span>
-                  )}
-                  {existingInstructor.phone && (
-                    <span className="text-xs text-muted-foreground">
-                      {existingInstructor.phone}
-                    </span>
-                  )}
+                    alt={existingInstructor.name}
+                  />
+                  <AvatarFallback>
+                    {existingInstructor.name.slice(0, 2).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="min-w-0 flex-1">
+                  <h2 className="truncate text-lg font-semibold">
+                    {existingInstructor.name}
+                  </h2>
+                  <div className="mt-1 flex flex-wrap items-center gap-2">
+                    <Badge
+                      variant={
+                        existingInstructor.status === 'active'
+                          ? 'default'
+                          : 'secondary'
+                      }
+                    >
+                      {existingInstructor.status === 'active'
+                        ? t('form.fields.active')
+                        : t('form.fields.inactive')}
+                    </Badge>
+                    {existingInstructor.email && (
+                      <span className="truncate text-xs text-muted-foreground">
+                        {existingInstructor.email}
+                      </span>
+                    )}
+                    {existingInstructor.phone && (
+                      <span className="text-xs text-muted-foreground">
+                        {existingInstructor.phone}
+                      </span>
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
+            </>
           ) : (
             <SheetHeader className="shrink-0 border-b px-6 py-4">
               <SheetTitle>{t('form.title')}</SheetTitle>
@@ -421,8 +562,12 @@ export function InstructorFormSheet({
                 <TabsTrigger value="detalhes">
                   {t('form.tabs.details')}
                 </TabsTrigger>
-                <TabsTrigger value="skills">{t('form.tabs.skills')}</TabsTrigger>
-                <TabsTrigger value="turmas">{t('form.tabs.classes')}</TabsTrigger>
+                <TabsTrigger value="skills">
+                  {t('form.tabs.skills')}
+                </TabsTrigger>
+                <TabsTrigger value="turmas">
+                  {t('form.tabs.classes')}
+                </TabsTrigger>
                 <TabsTrigger value="avaliacoes">
                   {t('form.tabs.evaluations')}
                 </TabsTrigger>
@@ -445,94 +590,83 @@ export function InstructorFormSheet({
                           {t('form.fields.person')}{' '}
                           <span className="text-destructive">*</span>
                         </FieldLabel>
-                        <div className="flex items-center gap-2">
-                          <div className="min-w-0 flex-1">
-                            <Controller
-                              control={control}
-                              name="personId"
-                              render={({ field }) => (
-                                <PersonPicker
-                                  label=""
-                                  entityLabel={t('form.fields.person')}
-                                  value={field.value ?? null}
-                                  initialSelectedLabel={selectedPersonName}
-                                  onChange={(personId, personName) => {
-                                    field.onChange(personId ?? undefined);
-                                    setSelectedPersonName(personName);
-                                  }}
-                                  selectPlaceholder={t(
-                                    'form.fields.searchPerson'
-                                  )}
-                                  personTypeFilter="individual"
-                                  createType="individual"
-                                  lockCreateType
-                                />
-                              )}
-                            />
-                          </div>
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="icon"
-                            className="shrink-0"
-                            disabled={!watchedPersonId}
-                            onClick={handleOpenPersonEdit}
-                            aria-label={t('form.fields.editPerson')}
-                            title={t('form.fields.editPerson')}
-                          >
-                            <Pencil className="h-4 w-4" />
-                          </Button>
-                        </div>
-                        {errors.personId && (
-                          <FieldError>{errors.personId.message}</FieldError>
-                        )}
-                      </Field>
-
-                      {/* Status */}
-                      <Field>
-                        <FieldLabel>{t('form.fields.status')}</FieldLabel>
-                        <Controller
-                          control={control}
-                          name="status"
-                          render={({ field }) => (
-                            <Select
-                              value={field.value}
-                              onValueChange={field.onChange}
-                            >
-                              <SelectTrigger className="w-full">
-                                <SelectValue
-                                  placeholder={t('filters.statusPlaceholder')}
-                                />
-                              </SelectTrigger>
-                              <SelectContent>
-                                <SelectItem value="active">
-                                  {t('form.fields.active')}
-                                </SelectItem>
-                                <SelectItem value="inactive">
-                                  {t('form.fields.inactive')}
-                                </SelectItem>
-                              </SelectContent>
-                            </Select>
-                          )}
-                        />
-                      </Field>
-
-                      {/* Valor/hora */}
-                      <Field>
-                        <FieldLabel>{t('form.fields.hourlyRate')}</FieldLabel>
                         <Controller
                           control={control}
-                          name="hourlyRate"
+                          name="personId"
                           render={({ field }) => (
-                            <InputMoney
-                              placeholder={t('form.fields.hourlyRatePlaceholder')}
-                              value={field.value ?? ''}
-                              onValueChange={(value) => field.onChange(value)}
+                            <PersonPicker
+                              label=""
+                              entityLabel={t('form.fields.person')}
+                              value={field.value ?? null}
+                              initialSelectedLabel={selectedPersonName}
+                              onChange={(personId, personName) => {
+                                field.onChange(personId ?? undefined);
+                                setSelectedPersonName(personName);
+                              }}
+                              selectPlaceholder={t('form.fields.searchPerson')}
+                              personTypeFilter="individual"
+                              createType="individual"
+                              lockCreateType
+                              onCreateNew={handleCreatePerson}
+                              showEditButton
+                              onEditSelection={handleEditSelection}
+                              editAriaLabel={t('form.fields.editPerson')}
                             />
                           )}
                         />
+                        {errors.personId && (
+                          <FieldError>{errors.personId.message}</FieldError>
+                        )}
                       </Field>
 
+                      {/* Status + Valor/hora */}
+                      <div className="grid grid-cols-2 gap-4">
+                        <Field>
+                          <FieldLabel>{t('form.fields.status')}</FieldLabel>
+                          <Controller
+                            control={control}
+                            name="status"
+                            render={({ field }) => (
+                              <Select
+                                value={field.value}
+                                onValueChange={field.onChange}
+                              >
+                                <SelectTrigger className="w-full">
+                                  <SelectValue
+                                    placeholder={t('filters.statusPlaceholder')}
+                                  />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="active">
+                                    {t('form.fields.active')}
+                                  </SelectItem>
+                                  <SelectItem value="inactive">
+                                    {t('form.fields.inactive')}
+                                  </SelectItem>
+                                </SelectContent>
+                              </Select>
+                            )}
+                          />
+                        </Field>
+
+                        <Field>
+                          <FieldLabel>{t('form.fields.hourlyRate')}</FieldLabel>
+                          <Controller
+                            control={control}
+                            name="hourlyRate"
+                            render={({ field }) => (
+                              <InputMoney
+                                placeholder={t(
+                                  'form.fields.hourlyRatePlaceholder'
+                                )}
+                                value={field.value ?? ''}
+                                onValueChange={(value) => field.onChange(value)}
+                              />
+                            )}
+                          />
+                        </Field>
+                      </div>
+
                       {/* can_teach_courses */}
                       <div className="flex items-center justify-between rounded-lg border p-4">
                         <div className="space-y-0.5">
@@ -549,52 +683,23 @@ export function InstructorFormSheet({
                           render={({ field }) => (
                             <Switch
                               checked={field.value}
-                              onCheckedChange={field.onChange}
+                              onCheckedChange={(next) => {
+                                field.onChange(next);
+                                const nextSlugs = applyCanTeachCourses(
+                                  watch('qualificationSlugs') ?? [],
+                                  next
+                                );
+                                setValue('qualificationSlugs', nextSlugs, {
+                                  shouldDirty: true,
+                                  shouldTouch: true,
+                                  shouldValidate: true,
+                                });
+                              }}
                             />
                           )}
                         />
                       </div>
 
-                      {/* Acesso ao Training */}
-                      <div className="flex items-center justify-between rounded-lg border p-4">
-                        <div className="space-y-0.5">
-                          <p className="text-sm font-medium">
-                            {t('form.fields.trainingAccess')}
-                          </p>
-                          <p className="text-xs text-muted-foreground">
-                            {existingInstructor?.userId
-                              ? t('form.fields.trainingAccessHint')
-                              : t('form.fields.noUserLinked')}
-                          </p>
-                        </div>
-                        <Switch
-                          checked={trainingAccess ?? false}
-                          disabled={
-                            !existingInstructor?.userId || togglingAccess
-                          }
-                          onCheckedChange={async (next) => {
-                            setTogglingAccess(true);
-                            try {
-                              await request({
-                                url: `/lms/instructors/${instructorId}/training-access`,
-                                method: 'PATCH',
-                                data: { enabled: next },
-                              });
-                              setTrainingAccess(next);
-                              toast.success(
-                                next
-                                  ? t('form.toasts.accessEnabled')
-                                  : t('form.toasts.accessDisabled')
-                              );
-                            } catch {
-                              toast.error(t('form.toasts.accessError'));
-                            } finally {
-                              setTogglingAccess(false);
-                            }
-                          }}
-                        />
-                      </div>
-
                       {/* Qualificações */}
                       <Field>
                         <FieldLabel>
@@ -624,17 +729,19 @@ export function InstructorFormSheet({
                                     <Switch
                                       checked={checked}
                                       onCheckedChange={(next) => {
-                                        if (next) {
-                                          field.onChange([
-                                            ...field.value,
+                                        const nextSlugs =
+                                          applyQualificationToggle(
+                                            field.value,
                                             option.slug,
-                                          ]);
-                                        } else {
-                                          field.onChange(
-                                            field.value.filter(
-                                              (s) => s !== option.slug
-                                            )
+                                            next
                                           );
+                                        field.onChange(nextSlugs);
+                                        if (option.slug === 'course-lessons') {
+                                          setValue('can_teach_courses', next, {
+                                            shouldDirty: true,
+                                            shouldTouch: true,
+                                            shouldValidate: false,
+                                          });
                                         }
                                       }}
                                     />
@@ -753,12 +860,16 @@ export function InstructorFormSheet({
                           name: 'namePt',
                           label: t('form.skills.createFields.name'),
                           required: true,
-                          placeholder: t('form.skills.createFields.namePlaceholder'),
+                          placeholder: t(
+                            'form.skills.createFields.namePlaceholder'
+                          ),
                         },
                         {
                           name: 'slug',
                           label: t('form.skills.createFields.slug'),
-                          placeholder: t('form.skills.createFields.slugPlaceholder'),
+                          placeholder: t(
+                            'form.skills.createFields.slugPlaceholder'
+                          ),
                         },
                       ]}
                       mapSearchToCreateValues={(search) => ({
@@ -788,7 +899,9 @@ export function InstructorFormSheet({
                             name: namePt,
                           } as any;
                         } catch {
-                          toast.error(t('InstructorSkillsPage.messages.createError'));
+                          toast.error(
+                            t('InstructorSkillsPage.messages.createError')
+                          );
                           return null;
                         }
                       }}
@@ -825,70 +938,194 @@ export function InstructorFormSheet({
                 value="turmas"
                 className="flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden"
               >
-                <div className="flex-1 overflow-y-auto px-6 py-4">
-                  {loadingTurmas ? (
-                    <div className="flex items-center justify-center py-12">
-                      <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-                    </div>
-                  ) : turmasData.length === 0 ? (
-                    <div className="flex flex-col items-center justify-center py-12 text-center">
-                      <BookOpen className="mb-3 h-10 w-10 text-muted-foreground/40" />
-                      <p className="text-sm font-medium text-muted-foreground">
-                        {t('form.classes.emptyTitle')}
-                      </p>
-                      <p className="mt-1 text-xs text-muted-foreground">
-                        {t('form.classes.emptyDescription')}
-                      </p>
+                <div className="flex min-h-0 flex-1 flex-col">
+                  <div className="grid shrink-0 grid-cols-1 gap-2 border-b px-6 py-3 sm:grid-cols-[minmax(0,1fr)_200px]">
+                    <div className="relative">
+                      <Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                      <Input
+                        value={turmasSearchInput}
+                        onChange={(event) =>
+                          setTurmasSearchInput(event.target.value)
+                        }
+                        placeholder={t('form.classes.searchPlaceholder')}
+                        className="pl-8"
+                      />
                     </div>
-                  ) : (
-                    <div className="space-y-2">
-                      {turmasData.map((turma) => (
-                        <div key={turma.id} className="rounded-lg border p-3">
-                          <div className="flex items-start justify-between gap-2">
-                            <div className="min-w-0 flex-1">
-                              <p className="truncate text-sm font-medium">
-                                {turma.name}
-                              </p>
-                              {turma.courseName && (
-                                <p className="truncate text-xs text-muted-foreground">
-                                  {turma.courseName}
-                                </p>
-                              )}
+
+                    <Select
+                      value={turmasStatusFilter}
+                      onValueChange={setTurmasStatusFilter}
+                    >
+                      <SelectTrigger>
+                        <SelectValue
+                          placeholder={t(
+                            'form.classes.statusFilterPlaceholder'
+                          )}
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="all">
+                          {t('form.classes.allStatuses')}
+                        </SelectItem>
+                        <SelectItem value="open">
+                          {t('form.classStatuses.upcoming')}
+                        </SelectItem>
+                        <SelectItem value="ongoing">
+                          {t('form.classStatuses.inProgress')}
+                        </SelectItem>
+                        <SelectItem value="completed">
+                          {t('form.classStatuses.completed')}
+                        </SelectItem>
+                        <SelectItem value="cancelled">
+                          {t('form.classStatuses.cancelled')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="flex-1 overflow-y-auto px-6 py-4">
+                    {loadingTurmas ? (
+                      <div className="flex items-center justify-center py-12">
+                        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : turmasData.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-12 text-center">
+                        <BookOpen className="mb-3 h-10 w-10 text-muted-foreground/40" />
+                        <p className="text-sm font-medium text-muted-foreground">
+                          {t('form.classes.emptyTitle')}
+                        </p>
+                        <p className="mt-1 text-xs text-muted-foreground">
+                          {t('form.classes.emptyDescription')}
+                        </p>
+                      </div>
+                    ) : (
+                      <div className="space-y-2">
+                        {turmasData.map((turma) => (
+                          <div key={turma.id} className="rounded-lg border p-3">
+                            <div className="flex items-start gap-3">
+                              <div className="shrink-0">
+                                <CourseAvatar
+                                  fileId={turma.courseLogoFileId}
+                                  title={turma.courseName ?? turma.name}
+                                  className="h-10 w-10 rounded"
+                                  iconSize="h-5 w-5"
+                                />
+                              </div>
+                              <div className="min-w-0 flex-1">
+                                <div className="flex items-start justify-between gap-2">
+                                  <div className="min-w-0">
+                                    <p className="truncate text-sm font-medium">
+                                      {turma.name}
+                                    </p>
+                                    {turma.courseName && (
+                                      <p className="truncate text-xs text-muted-foreground">
+                                        {turma.courseName}
+                                      </p>
+                                    )}
+                                  </div>
+                                  <div className="flex shrink-0 items-center gap-1">
+                                    <Button
+                                      type="button"
+                                      variant="ghost"
+                                      size="icon"
+                                      className="h-7 w-7"
+                                      onClick={() =>
+                                        handleEditClassQuick(turma.id)
+                                      }
+                                      aria-label={t(
+                                        'form.classes.actions.editAriaLabel'
+                                      )}
+                                      title={t(
+                                        'form.classes.actions.editAriaLabel'
+                                      )}
+                                    >
+                                      <Pencil className="h-3.5 w-3.5" />
+                                    </Button>
+                                    <Button
+                                      type="button"
+                                      variant="ghost"
+                                      size="icon"
+                                      className="h-7 w-7"
+                                      onClick={() =>
+                                        handleOpenClassPage(turma.id)
+                                      }
+                                      aria-label={t(
+                                        'form.classes.actions.openAriaLabel'
+                                      )}
+                                      title={t(
+                                        'form.classes.actions.openAriaLabel'
+                                      )}
+                                    >
+                                      <ArrowUpRight className="h-3.5 w-3.5" />
+                                    </Button>
+                                    <Badge
+                                      variant="outline"
+                                      className="shrink-0 text-xs"
+                                    >
+                                      {statusLabel[turma.status] ??
+                                        turma.status}
+                                    </Badge>
+                                  </div>
+                                </div>
+                                <div className="mt-1.5 flex flex-wrap gap-x-4 gap-y-0.5 text-xs text-muted-foreground">
+                                  {turma.startDate && (
+                                    <span>
+                                      {t('form.classes.start')}{' '}
+                                      {new Date(
+                                        turma.startDate
+                                      ).toLocaleDateString('pt-BR')}
+                                    </span>
+                                  )}
+                                  {turma.endDate && (
+                                    <span>
+                                      {t('form.classes.end')}{' '}
+                                      {new Date(
+                                        turma.endDate
+                                      ).toLocaleDateString('pt-BR')}
+                                    </span>
+                                  )}
+                                  <span>
+                                    {turma.totalSlots != null
+                                      ? t('form.classes.studentsOfCapacity', {
+                                          count: turma.slots,
+                                          total: turma.totalSlots,
+                                        })
+                                      : t('form.classes.students', {
+                                          count: turma.slots,
+                                        })}
+                                  </span>
+                                </div>
+                              </div>
                             </div>
-                            <Badge
-                              variant="outline"
-                              className="shrink-0 text-xs"
-                            >
-                              {statusLabel[turma.status] ?? turma.status}
-                            </Badge>
-                          </div>
-                          <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
-                            {turma.startDate && (
-                              <span>
-                                {t('form.classes.start')}{' '}
-                                {new Date(turma.startDate).toLocaleDateString(
-                                  'pt-BR'
-                                )}
-                              </span>
-                            )}
-                            {turma.endDate && (
-                              <span>
-                                {t('form.classes.end')}{' '}
-                                {new Date(turma.endDate).toLocaleDateString(
-                                  'pt-BR'
-                                )}
-                              </span>
-                            )}
-                            {turma.slots > 0 && (
-                              <span>
-                                {t('form.classes.students', {
-                                  count: turma.slots,
-                                })}
-                              </span>
-                            )}
                           </div>
-                        </div>
-                      ))}
+                        ))}
+                      </div>
+                    )}
+                  </div>
+
+                  {turmasLastPage > 1 && (
+                    <div className="flex shrink-0 items-center justify-center gap-2 border-t px-6 py-3">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        disabled={turmasPage <= 1}
+                        onClick={() => setTurmasPage((p) => p - 1)}
+                      >
+                        <ChevronLeft className="h-4 w-4" />
+                      </Button>
+                      <span className="text-xs text-muted-foreground">
+                        {turmasPage} / {turmasLastPage}
+                      </span>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        disabled={turmasPage >= turmasLastPage}
+                        onClick={() => setTurmasPage((p) => p + 1)}
+                      >
+                        <ChevronRight className="h-4 w-4" />
+                      </Button>
                     </div>
                   )}
                 </div>
@@ -925,92 +1162,81 @@ export function InstructorFormSheet({
                       {t('form.fields.person')}{' '}
                       <span className="text-destructive">*</span>
                     </FieldLabel>
-                    <div className="flex items-center gap-2">
-                      <div className="min-w-0 flex-1">
-                        <Controller
-                          control={control}
-                          name="personId"
-                          render={({ field }) => (
-                            <PersonPicker
-                              label=""
-                              entityLabel={t('form.fields.person')}
-                              value={field.value ?? null}
-                              initialSelectedLabel={selectedPersonName}
-                              onChange={(personId, personName) => {
-                                field.onChange(personId ?? undefined);
-                                setSelectedPersonName(personName);
-                              }}
-                              selectPlaceholder={t('form.fields.searchPerson')}
-                              personTypeFilter="individual"
-                              createType="individual"
-                              lockCreateType
-                            />
-                          )}
-                        />
-                      </div>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="icon"
-                        className="shrink-0"
-                        disabled={!watchedPersonId}
-                        onClick={handleOpenPersonEdit}
-                        aria-label={t('form.fields.editPerson')}
-                        title={t('form.fields.editPerson')}
-                      >
-                        <Pencil className="h-4 w-4" />
-                      </Button>
-                    </div>
-                    {errors.personId && (
-                      <FieldError>{errors.personId.message}</FieldError>
-                    )}
-                  </Field>
-
-                  {/* Status */}
-                  <Field>
-                    <FieldLabel>{t('form.fields.status')}</FieldLabel>
-                    <Controller
-                      control={control}
-                      name="status"
-                      render={({ field }) => (
-                        <Select
-                          value={field.value}
-                          onValueChange={field.onChange}
-                        >
-                          <SelectTrigger className="w-full">
-                            <SelectValue
-                              placeholder={t('filters.statusPlaceholder')}
-                            />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="active">
-                              {t('form.fields.active')}
-                            </SelectItem>
-                            <SelectItem value="inactive">
-                              {t('form.fields.inactive')}
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
-                      )}
-                    />
-                  </Field>
-
-                  {/* Valor/hora */}
-                  <Field>
-                    <FieldLabel>{t('form.fields.hourlyRate')}</FieldLabel>
                     <Controller
                       control={control}
-                      name="hourlyRate"
+                      name="personId"
                       render={({ field }) => (
-                        <InputMoney
-                          placeholder={t('form.fields.hourlyRatePlaceholder')}
-                          value={field.value ?? ''}
-                          onValueChange={(value) => field.onChange(value)}
+                        <PersonPicker
+                          label=""
+                          entityLabel={t('form.fields.person')}
+                          value={field.value ?? null}
+                          initialSelectedLabel={selectedPersonName}
+                          onChange={(personId, personName) => {
+                            field.onChange(personId ?? undefined);
+                            setSelectedPersonName(personName);
+                          }}
+                          selectPlaceholder={t('form.fields.searchPerson')}
+                          personTypeFilter="individual"
+                          createType="individual"
+                          lockCreateType
+                          onCreateNew={handleCreatePerson}
+                          showEditButton
+                          onEditSelection={handleEditSelection}
+                          editAriaLabel={t('form.fields.editPerson')}
                         />
                       )}
                     />
+                    {errors.personId && (
+                      <FieldError>{errors.personId.message}</FieldError>
+                    )}
                   </Field>
 
+                  {/* Status + Valor/hora */}
+                  <div className="grid grid-cols-2 gap-4">
+                    <Field>
+                      <FieldLabel>{t('form.fields.status')}</FieldLabel>
+                      <Controller
+                        control={control}
+                        name="status"
+                        render={({ field }) => (
+                          <Select
+                            value={field.value}
+                            onValueChange={field.onChange}
+                          >
+                            <SelectTrigger className="w-full">
+                              <SelectValue
+                                placeholder={t('filters.statusPlaceholder')}
+                              />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="active">
+                                {t('form.fields.active')}
+                              </SelectItem>
+                              <SelectItem value="inactive">
+                                {t('form.fields.inactive')}
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        )}
+                      />
+                    </Field>
+
+                    <Field>
+                      <FieldLabel>{t('form.fields.hourlyRate')}</FieldLabel>
+                      <Controller
+                        control={control}
+                        name="hourlyRate"
+                        render={({ field }) => (
+                          <InputMoney
+                            placeholder={t('form.fields.hourlyRatePlaceholder')}
+                            value={field.value ?? ''}
+                            onValueChange={(value) => field.onChange(value)}
+                          />
+                        )}
+                      />
+                    </Field>
+                  </div>
+
                   {/* can_teach_courses */}
                   <div className="flex items-center justify-between rounded-lg border p-4">
                     <div className="space-y-0.5">
@@ -1027,7 +1253,18 @@ export function InstructorFormSheet({
                       render={({ field }) => (
                         <Switch
                           checked={field.value}
-                          onCheckedChange={field.onChange}
+                          onCheckedChange={(next) => {
+                            field.onChange(next);
+                            const nextSlugs = applyCanTeachCourses(
+                              watch('qualificationSlugs') ?? [],
+                              next
+                            );
+                            setValue('qualificationSlugs', nextSlugs, {
+                              shouldDirty: true,
+                              shouldTouch: true,
+                              shouldValidate: true,
+                            });
+                          }}
                         />
                       )}
                     />
@@ -1060,17 +1297,18 @@ export function InstructorFormSheet({
                                 <Switch
                                   checked={checked}
                                   onCheckedChange={(next) => {
-                                    if (next) {
-                                      field.onChange([
-                                        ...field.value,
-                                        option.slug,
-                                      ]);
-                                    } else {
-                                      field.onChange(
-                                        field.value.filter(
-                                          (s) => s !== option.slug
-                                        )
-                                      );
+                                    const nextSlugs = applyQualificationToggle(
+                                      field.value,
+                                      option.slug,
+                                      next
+                                    );
+                                    field.onChange(nextSlugs);
+                                    if (option.slug === 'course-lessons') {
+                                      setValue('can_teach_courses', next, {
+                                        shouldDirty: true,
+                                        shouldTouch: true,
+                                        shouldValidate: false,
+                                      });
                                     }
                                   }}
                                 />
@@ -1108,18 +1346,39 @@ export function InstructorFormSheet({
         </SheetContent>
       </Sheet>
 
-      {editPersonOpen && personToEdit && (
+      <ClassFormSheet
+        open={classSheetOpen}
+        onOpenChange={(nextOpen) => {
+          setClassSheetOpen(nextOpen);
+          if (!nextOpen) {
+            setEditingClassId(null);
+          }
+        }}
+        classId={editingClassId != null ? String(editingClassId) : undefined}
+        enableInstructorSheet={false}
+        onSuccess={handleClassSaved}
+      />
+
+      {editPersonOpen && (
         <PersonFormSheet
           open={editPersonOpen}
           person={personToEdit}
           contactTypes={contactTypes}
           documentTypes={documentTypes}
+          allowedTypes={['individual']}
           onOpenChange={(v) => {
             setEditPersonOpen(v);
             if (!v) setPersonToEdit(null);
           }}
           onSuccess={(updated) => {
-            if (updated) setSelectedPersonName(updated.name);
+            if (updated) {
+              setSelectedPersonName(updated.name);
+              setValue('personId', updated.id, {
+                shouldDirty: true,
+                shouldTouch: true,
+                shouldValidate: true,
+              });
+            }
             void queryClient.invalidateQueries({
               queryKey: ['person-picker-autocomplete'],
             });