@hed-hog/lms 0.0.319 → 0.0.321

package/hedhog/frontend/app/classes/[id]/page.tsx.ejs

@@ -1,9 +1,15 @@
 'use client';
 
+import { PersonFormSheet } from '@/app/(app)/(libraries)/contact/person/_components/person-form-sheet';
+import type {
+  Person as ContactPerson,
+  ContactTypeOption,
+  DocumentTypeOption,
+} from '@/app/(app)/(libraries)/contact/person/_components/person-types';
 import { LmsClassCalendar } from '@/app/(app)/(libraries)/lms/_components/lms-class-calendar';
 import { CopyButton } from '@/components/copy-button';
 import { Page, PageHeader } from '@/components/entity-list';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -32,14 +38,6 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Field, FieldError, FieldLabel } from '@/components/ui/field';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
 import {
@@ -108,19 +106,31 @@ import {
   ChevronRight,
   ChevronsUpDown,
   Clock,
+  ExternalLink,
   Eye,
+  File,
+  FileAudio,
+  FileCode,
+  FileImage,
+  FileText,
+  FileVideo,
+  Link,
   Loader2,
   MapPin,
   Monitor,
   MoreHorizontal,
+  Paperclip,
   Pencil,
   Plus,
   Save,
   Search,
+  Trash2,
+  Upload,
   UserMinus,
   UserPlus,
   Users,
   Video,
+  X,
 } from 'lucide-react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useParams, useRouter } from 'next/navigation';
@@ -155,6 +165,7 @@ interface Aluno {
   nome: string;
   email: string;
   telefone: string;
+  avatarId?: number | null;
   matriculadoEm: string;
   progresso: number;
   status: string;
@@ -163,6 +174,7 @@ interface Aluno {
 interface Aula {
   id: number;
   titulo: string;
+  descricao?: string;
   data: string; // ISO date string from API
   horaInicio: string;
   horaFim: string;
@@ -172,6 +184,7 @@ interface Aula {
   status: string;
   instructorId?: number | null;
   instructorName?: string;
+  instructorAvatarId?: number | null;
   recurrence?: {
     frequency: 'daily' | 'weekly' | 'monthly' | 'yearly';
     interval: number;
@@ -184,6 +197,35 @@ interface Aula {
   isRecurring?: boolean;
   cor?: string | null;
   color?: string | null;
+  materialCount?: number;
+}
+
+interface Material {
+  id: number;
+  title: string;
+  description?: string | null;
+  material_type: 'file' | 'link';
+  file_id?: number | null;
+  url?: string | null;
+  sort_order: number;
+  file?: {
+    id: number;
+    filename: string;
+    path: string;
+    size: number;
+  } | null;
+  course_class_session?: {
+    id: number;
+    title: string;
+  } | null;
+}
+
+interface UploadItem {
+  id: string;
+  file: File;
+  progress: number;
+  status: 'uploading' | 'done' | 'error';
+  title: string;
 }
 
 type SessionRecurrenceFrequency =
@@ -199,6 +241,7 @@ interface InstructorOption {
   id: number;
   name: string;
   personId?: number;
+  avatarId?: number | null;
   qualificationSlugs?: string[];
 }
 
@@ -212,6 +255,8 @@ type InstructorApiRow = {
   label?: string;
   personId?: number | string;
   person_id?: number | string;
+  avatarId?: number | null;
+  avatar_id?: number | null;
   qualificationSlugs?: string[];
 };
 
@@ -219,6 +264,7 @@ interface Person {
   id: number;
   nome: string;
   email: string;
+  avatarId?: number | null;
   isInstructor?: boolean;
   canTeachCourses?: boolean;
   isStudentByEnrollment?: boolean;
@@ -242,6 +288,7 @@ interface StudentProfile {
   nome: string;
   email: string;
   telefone: string;
+  avatarId?: number | null;
   matriculadoEm: string;
   progresso: number;
   status: string;
@@ -271,6 +318,12 @@ function getPersonInitials(name: string) {
     .join('');
 }
 
+function getPersonAvatarUrl(avatarId?: number | null) {
+  return typeof avatarId === 'number' && avatarId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+    : undefined;
+}
+
 function getSessionStartDate(aula: Aula) {
   const date = parseSessionDate(aula.data);
   const [hour = 0, minute = 0] = aula.horaInicio.split(':').map(Number);
@@ -285,6 +338,100 @@ function getSessionEndDate(aula: Aula) {
   return setMinutes(setHours(date, hour), minute);
 }
 
+function detectMeetingPlatform(
+  url?: string | null
+): 'teams' | 'zoom' | 'meet' | 'other' {
+  if (!url) return 'other';
+  try {
+    const hostname = new URL(url).hostname.toLowerCase();
+    if (
+      hostname.includes('teams.microsoft.com') ||
+      hostname.includes('teams.live.com')
+    )
+      return 'teams';
+    if (hostname.includes('zoom.us')) return 'zoom';
+    if (hostname.includes('meet.google.com')) return 'meet';
+  } catch {
+    // Invalid URL — fall through
+  }
+  return 'other';
+}
+
+function MeetingPlatformIcon({
+  url,
+  className,
+}: {
+  url?: string | null;
+  className?: string;
+}) {
+  const platform = detectMeetingPlatform(url);
+  const cls = cn('inline-block shrink-0 rounded', className);
+
+  if (platform === 'teams') {
+    return (
+      <svg
+        className={cls}
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-label="Microsoft Teams"
+      >
+        <rect width="20" height="20" rx="3" fill="#5059C9" />
+        <circle cx="13" cy="5.5" r="2" fill="white" fillOpacity="0.9" />
+        <rect
+          x="7"
+          y="8"
+          width="8"
+          height="7"
+          rx="1.5"
+          fill="white"
+          fillOpacity="0.9"
+        />
+        <circle cx="7" cy="6.5" r="1.5" fill="white" />
+        <path
+          d="M4.5 8.5H7v5.5A3.5 3.5 0 0 1 5.5 13V10H4.5a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5z"
+          fill="white"
+        />
+      </svg>
+    );
+  }
+
+  if (platform === 'zoom') {
+    return (
+      <svg
+        className={cls}
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-label="Zoom"
+      >
+        <rect width="20" height="20" rx="3" fill="#2D8CFF" />
+        <path
+          d="M3 7.5A1 1 0 0 1 4 6.5h7a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5zm9 1.5 5-3v7l-5-3V9z"
+          fill="white"
+        />
+      </svg>
+    );
+  }
+
+  if (platform === 'meet') {
+    return (
+      <svg
+        className={cls}
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-label="Google Meet"
+      >
+        <rect width="20" height="20" rx="3" fill="#00897B" />
+        <path
+          d="M3 7.5A1 1 0 0 1 4 6.5h7a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5zm9 1.5 5-3v7l-5-3V9z"
+          fill="white"
+        />
+      </svg>
+    );
+  }
+
+  return <ExternalLink className={cn('text-muted-foreground', className)} />;
+}
+
 function DetailMetaItem({
   icon,
   label,
@@ -345,6 +492,7 @@ type ClassDetail = {
   cursoId?: number;
   courseTitle?: string;
   curso?: string;
+  logoFileId?: number | null;
   status?: string;
   capacity?: number;
   startDate?: string;
@@ -356,6 +504,7 @@ type ClassDetail = {
   horario?: string;
   deliveryMode?: 'presential' | 'online' | 'hybrid';
   tipo?: 'presencial' | 'online' | 'hibrida';
+  instructorAvatarId?: number | null;
   virtualRoomUrl?: string;
   local?: string;
   location?: string;
@@ -551,12 +700,147 @@ function normalizeInstructorOption(
     id,
     name,
     personId: Number(item?.personId ?? item?.person_id ?? 0) || undefined,
+    avatarId: item?.avatarId ?? item?.avatar_id ?? null,
     qualificationSlugs: Array.isArray(item?.qualificationSlugs)
       ? item.qualificationSlugs
       : undefined,
   };
 }
 
+// ── Material helpers ─────────────────────────────────────────────────────────
+
+type FileIconConfig = {
+  Icon: React.ElementType;
+  bg: string;
+  color: string;
+};
+
+function getFileIconConfig(filename: string): FileIconConfig {
+  const ext = (filename.split('.').pop() ?? '').toLowerCase();
+  if (ext === 'pdf')
+    return {
+      Icon: FileText,
+      bg: 'bg-red-100 dark:bg-red-950',
+      color: 'text-red-600 dark:text-red-400',
+    };
+  if (['doc', 'docx', 'odt', 'rtf'].includes(ext))
+    return {
+      Icon: FileText,
+      bg: 'bg-blue-100 dark:bg-blue-950',
+      color: 'text-blue-600 dark:text-blue-400',
+    };
+  if (['xls', 'xlsx', 'ods', 'csv'].includes(ext))
+    return {
+      Icon: FileText,
+      bg: 'bg-green-100 dark:bg-green-950',
+      color: 'text-green-600 dark:text-green-400',
+    };
+  if (['ppt', 'pptx', 'odp'].includes(ext))
+    return {
+      Icon: FileText,
+      bg: 'bg-orange-100 dark:bg-orange-950',
+      color: 'text-orange-600 dark:text-orange-400',
+    };
+  if (
+    ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'ico', 'bmp', 'avif'].includes(
+      ext
+    )
+  )
+    return {
+      Icon: FileImage,
+      bg: 'bg-purple-100 dark:bg-purple-950',
+      color: 'text-purple-600 dark:text-purple-400',
+    };
+  if (['mp4', 'mov', 'avi', 'mkv', 'webm', 'flv', 'm4v'].includes(ext))
+    return {
+      Icon: FileVideo,
+      bg: 'bg-pink-100 dark:bg-pink-950',
+      color: 'text-pink-600 dark:text-pink-400',
+    };
+  if (['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a', 'wma'].includes(ext))
+    return {
+      Icon: FileAudio,
+      bg: 'bg-yellow-100 dark:bg-yellow-950',
+      color: 'text-yellow-600 dark:text-yellow-400',
+    };
+  if (
+    [
+      'js',
+      'ts',
+      'jsx',
+      'tsx',
+      'py',
+      'java',
+      'cs',
+      'cpp',
+      'c',
+      'html',
+      'css',
+      'scss',
+      'json',
+      'xml',
+      'yaml',
+      'yml',
+      'sh',
+      'md',
+    ].includes(ext)
+  )
+    return {
+      Icon: FileCode,
+      bg: 'bg-cyan-100 dark:bg-cyan-950',
+      color: 'text-cyan-600 dark:text-cyan-400',
+    };
+  if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(ext))
+    return {
+      Icon: File,
+      bg: 'bg-amber-100 dark:bg-amber-950',
+      color: 'text-amber-600 dark:text-amber-400',
+    };
+  return { Icon: File, bg: 'bg-muted', color: 'text-muted-foreground' };
+}
+
+function MaterialIconCell({ material }: { material: Material }) {
+  const [faviconError, setFaviconError] = useState(false);
+
+  if (material.material_type === 'file') {
+    const filename = material.file?.filename ?? material.title ?? '';
+    const { Icon, bg, color } = getFileIconConfig(filename);
+    return (
+      <div
+        className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-md ${bg}`}
+      >
+        <Icon className={`size-4 ${color}`} />
+      </div>
+    );
+  }
+
+  // Link
+  let faviconUrl: string | null = null;
+  if (!faviconError && material.url) {
+    try {
+      const domain = new URL(material.url).hostname;
+      faviconUrl = `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
+    } catch {
+      faviconUrl = null;
+    }
+  }
+
+  return (
+    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted">
+      {faviconUrl ? (
+        <img
+          src={faviconUrl}
+          alt=""
+          className="size-5 rounded-sm"
+          onError={() => setFaviconError(true)}
+        />
+      ) : (
+        <Link className="size-4 text-muted-foreground" />
+      )}
+    </div>
+  );
+}
+
 // ── Schemas ───────────────────────────────────────────────────────────────────
 
 const getAulaSchema = (t: (key: string) => string) =>
@@ -614,29 +898,7 @@ const getAulaSchema = (t: (key: string) => string) =>
       }
     });
 
-const getStudentSchema = (t: (key: string) => string) =>
-  z.object({
-    name: z.string().trim().min(3, t('dialogs.studentValidation.nameMin')),
-    email: z
-      .string()
-      .trim()
-      .max(255)
-      .refine(
-        (value) => !value || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
-        t('dialogs.studentValidation.emailInvalid')
-      ),
-    phone: z
-      .string()
-      .trim()
-      .max(50)
-      .refine(
-        (value) => !value || /^[0-9+()\s-]{8,20}$/.test(value),
-        t('dialogs.studentValidation.phoneInvalid')
-      ),
-  });
-
 type AulaForm = z.infer<ReturnType<typeof getAulaSchema>>;
-type StudentForm = z.infer<ReturnType<typeof getStudentSchema>>;
 
 // (mock data removed – all data comes from the API)
 
@@ -668,7 +930,33 @@ export default function TurmaDetalhePage() {
   };
 
   // ── API ───────────────────────────────────────────────────────────────────
-  const { request } = useApp();
+  const { request, currentLocaleCode } = useApp();
+
+  const { data: contactTypes = [] } = useQuery<ContactTypeOption[]>({
+    queryKey: ['contact-person-contact-types', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<{ data: ContactTypeOption[] }>({
+        url: '/person-contact-type?pageSize=100',
+        method: 'GET',
+      });
+
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const { data: documentTypes = [] } = useQuery<DocumentTypeOption[]>({
+    queryKey: ['contact-person-document-types', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<{ data: DocumentTypeOption[] }>({
+        url: '/person-document-type?pageSize=100',
+        method: 'GET',
+      });
+
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
 
   const {
     data: turma,
@@ -718,6 +1006,35 @@ export default function TurmaDetalhePage() {
     enabled: !!id,
   });
 
+  // Load material counts whenever sessions change
+  useEffect(() => {
+    if (!id || aulasQuery.length === 0) return;
+    let cancelled = false;
+    const load = async () => {
+      try {
+        const res = await request<Material[]>({
+          url: `/lms/classes/${id}/materials`,
+          method: 'GET',
+        });
+        if (cancelled) return;
+        const counts: Record<number, number> = {};
+        for (const mat of res.data) {
+          if ((mat as any).course_class_session_id) {
+            const sid = (mat as any).course_class_session_id as number;
+            counts[sid] = (counts[sid] ?? 0) + 1;
+          }
+        }
+        setMaterialCounts(counts);
+      } catch {
+        // ignore errors silently
+      }
+    };
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [id, aulasQuery, request]);
+
   const loading = loadingTurma || loadingAlunos || loadingAulas;
 
   // ── Edit sheet state ──────────────────────────────────────────────────────
@@ -726,13 +1043,35 @@ export default function TurmaDetalhePage() {
   const [savingCourse, setSavingCourse] = useState(false);
 
   // ── Tab state ─────────────────────────────────────────────────────────────
-  const [activeTab, setActiveTab] = useState('alunos');
+  const [activeTab, setActiveTab] = useState('sessoes');
+  const studentsSectionRef = useRef<HTMLDivElement | null>(null);
   const [calendarViewMode, setCalendarViewMode] = useState<
     'single' | 'quarter' | 'year' | 'list'
   >('single');
   const [calendarViewDate, setCalendarViewDate] = useState(() => new Date());
   const calendarInitialized = useRef(false);
 
+  // ── Global materials tab state ────────────────────────────────────────────
+  const [globalMaterials, setGlobalMaterials] = useState<Material[]>([]);
+  const [loadingGlobalMaterials, setLoadingGlobalMaterials] = useState(false);
+  const [globalUploadQueue, setGlobalUploadQueue] = useState<UploadItem[]>([]);
+  const [globalIsDragOver, setGlobalIsDragOver] = useState(false);
+  const [globalAddLinkOpen, setGlobalAddLinkOpen] = useState(false);
+  const [globalLinkTitle, setGlobalLinkTitle] = useState('');
+  const [globalLinkUrl, setGlobalLinkUrl] = useState('');
+  const [globalSavingLink, setGlobalSavingLink] = useState(false);
+  const [globalFetchingLinkMeta, setGlobalFetchingLinkMeta] = useState(false);
+  const [globalLinkFavicon, setGlobalLinkFavicon] = useState<string | null>(
+    null
+  );
+  const globalLinkTitleEditedRef = useRef(false);
+  const globalLinkMetaTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
+  const globalLinkMetaAbortRef = useRef<AbortController | null>(null);
+  const globalMaterialFileInputRef = useRef<HTMLInputElement>(null);
+  const globalMaterialsLoadedRef = useRef(false);
+
   useEffect(() => {
     if (calendarInitialized.current || !turma) return;
 
@@ -762,6 +1101,174 @@ export default function TurmaDetalhePage() {
     setCalendarViewDate(startOfMonth(start));
   }, [turma]);
 
+  // Load all materials when global tab activates
+  useEffect(() => {
+    if (
+      activeTab !== 'materiais-global' ||
+      !id ||
+      globalMaterialsLoadedRef.current
+    )
+      return;
+    globalMaterialsLoadedRef.current = true;
+    setLoadingGlobalMaterials(true);
+    void request<Material[]>({
+      url: `/lms/classes/${id}/materials`,
+      method: 'GET',
+    })
+      .then((res) => setGlobalMaterials(res.data))
+      .catch(() => setGlobalMaterials([]))
+      .finally(() => setLoadingGlobalMaterials(false));
+  }, [activeTab, id, request]);
+
+  const resetGlobalLinkForm = () => {
+    setGlobalLinkTitle('');
+    setGlobalLinkUrl('');
+    setGlobalLinkFavicon(null);
+    setGlobalFetchingLinkMeta(false);
+    setGlobalAddLinkOpen(false);
+    globalLinkTitleEditedRef.current = false;
+    if (globalLinkMetaTimerRef.current)
+      clearTimeout(globalLinkMetaTimerRef.current);
+    if (globalLinkMetaAbortRef.current) {
+      globalLinkMetaAbortRef.current.abort();
+      globalLinkMetaAbortRef.current = null;
+    }
+  };
+
+  const handleGlobalLinkUrlChange = (rawUrl: string) => {
+    setGlobalLinkUrl(rawUrl);
+    setGlobalLinkFavicon(null);
+    if (globalLinkMetaTimerRef.current)
+      clearTimeout(globalLinkMetaTimerRef.current);
+    if (globalLinkMetaAbortRef.current) {
+      globalLinkMetaAbortRef.current.abort();
+      globalLinkMetaAbortRef.current = null;
+    }
+    const url = rawUrl.trim();
+    if (!url || !/^https?:\/\//.test(url)) return;
+    try {
+      const domain = new URL(url).hostname;
+      setGlobalLinkFavicon(
+        `https://www.google.com/s2/favicons?domain=${domain}&sz=32`
+      );
+    } catch {
+      /* ignore */
+    }
+    if (globalLinkTitleEditedRef.current) return;
+    setGlobalFetchingLinkMeta(true);
+    globalLinkMetaTimerRef.current = setTimeout(async () => {
+      if (globalLinkTitleEditedRef.current) return;
+      const controller = new AbortController();
+      globalLinkMetaAbortRef.current = controller;
+      try {
+        const res = await fetch(
+          `https://api.microlink.io/?url=${encodeURIComponent(url)}&meta=false`,
+          { signal: controller.signal }
+        );
+        const data = (await res.json()) as { data?: { title?: string | null } };
+        if (data?.data?.title && !globalLinkTitleEditedRef.current)
+          setGlobalLinkTitle(data.data.title);
+      } catch {
+        /* ignore */
+      } finally {
+        setGlobalFetchingLinkMeta(false);
+      }
+    }, 800);
+  };
+
+  const handleGlobalAddLink = async () => {
+    if (!globalLinkUrl.trim()) return;
+    const url = globalLinkUrl.trim();
+    const title = globalLinkTitle.trim() || url;
+    setGlobalSavingLink(true);
+    try {
+      const res = await request<Material>({
+        url: `/lms/classes/${id}/materials`,
+        method: 'POST',
+        data: { title, materialType: 'link', url },
+      });
+      setGlobalMaterials((prev) => [res.data, ...prev]);
+      resetGlobalLinkForm();
+    } catch {
+      toast.error('Não foi possível adicionar o link.');
+    } finally {
+      setGlobalSavingLink(false);
+    }
+  };
+
+  const uploadGlobalFiles = async (files: File[]) => {
+    const baseId = Date.now();
+    const newItems: UploadItem[] = files.map((file, i) => ({
+      id: `g-${baseId}-${i}`,
+      file,
+      progress: 0,
+      status: 'uploading' as const,
+      title: file.name.replace(/\.[^.]+$/, ''),
+    }));
+    setGlobalUploadQueue((prev) => [...prev, ...newItems]);
+    for (const item of newItems) {
+      try {
+        const formData = new FormData();
+        formData.append('file', item.file);
+        const { data: uploaded } = await request<{ id: number }>({
+          method: 'POST',
+          url: '/file',
+          data: formData,
+          headers: { 'Content-Type': 'multipart/form-data' },
+          onUploadProgress: (e: { loaded: number; total?: number }) => {
+            const progress = e.total
+              ? Math.round((e.loaded / e.total) * 100)
+              : 0;
+            setGlobalUploadQueue((prev) =>
+              prev.map((q) => (q.id === item.id ? { ...q, progress } : q))
+            );
+          },
+        });
+        const fileId = Number(uploaded?.id);
+        if (!fileId) throw new Error('Upload failed');
+        const res = await request<Material>({
+          url: `/lms/classes/${id}/materials`,
+          method: 'POST',
+          data: { title: item.title, materialType: 'file', fileId },
+        });
+        setGlobalMaterials((prev) => [res.data, ...prev]);
+        setGlobalUploadQueue((prev) =>
+          prev.map((q) =>
+            q.id === item.id
+              ? { ...q, status: 'done' as const, progress: 100 }
+              : q
+          )
+        );
+        setTimeout(
+          () =>
+            setGlobalUploadQueue((prev) =>
+              prev.filter((q) => q.id !== item.id)
+            ),
+          1500
+        );
+      } catch {
+        setGlobalUploadQueue((prev) =>
+          prev.map((q) =>
+            q.id === item.id ? { ...q, status: 'error' as const } : q
+          )
+        );
+        toast.error(`Falha ao enviar "${item.file.name}".`);
+      }
+    }
+  };
+
+  const handleDeleteGlobalMaterial = async (materialId: number) => {
+    try {
+      await request({
+        url: `/lms/classes/${id}/materials/${materialId}`,
+        method: 'DELETE',
+      });
+      setGlobalMaterials((prev) => prev.filter((m) => m.id !== materialId));
+    } catch {
+      toast.error('Não foi possível remover o material.');
+    }
+  };
+
   // ── Students state ────────────────────────────────────────────────────────
   const [alunoSearch, setAlunoSearch] = useState('');
   const [selectedAlunos, setSelectedAlunos] = useState<number[]>([]);
@@ -781,8 +1288,10 @@ export default function TurmaDetalhePage() {
   const [editStudentSheetOpen, setEditStudentSheetOpen] = useState(false);
   const [selectedStudentProfile, setSelectedStudentProfile] =
     useState<StudentProfile | null>(null);
+  const [selectedStudentPerson, setSelectedStudentPerson] =
+    useState<ContactPerson | null>(null);
   const [loadingStudentProfile, setLoadingStudentProfile] = useState(false);
-  const [savingStudentProfile, setSavingStudentProfile] = useState(false);
+  const [loadingStudentPerson, setLoadingStudentPerson] = useState(false);
 
   const { data: pessoasDisponiveis = [], isLoading: searchingPessoas } =
     useQuery<Person[]>({
@@ -801,9 +1310,9 @@ export default function TurmaDetalhePage() {
 
   // ── Calendar state ────────────────────────────────────────────────────────
   const [aulaSheetOpen, setAulaSheetOpen] = useState(false);
-  const [aulaSheetTab, setAulaSheetTab] = useState<'aulas' | 'chamada'>(
-    'aulas'
-  );
+  const [aulaSheetTab, setAulaSheetTab] = useState<
+    'aulas' | 'chamada' | 'materiais'
+  >('aulas');
   const [editingAula, setEditingAula] = useState<Aula | null>(null);
   const [savingAula, setSavingAula] = useState(false);
   const [instructorOpen, setInstructorOpen] = useState(false);
@@ -811,6 +1320,30 @@ export default function TurmaDetalhePage() {
   const [createInstructorDialogOpen, setCreateInstructorDialogOpen] =
     useState(false);
 
+  // ── Session delete state ──────────────────────────────────────────────────
+  const [aulaToDelete, setAulaToDelete] = useState<Aula | null>(null);
+  const [deleteAulaDialogOpen, setDeleteAulaDialogOpen] = useState(false);
+  const [deletingAula, setDeletingAula] = useState(false);
+
+  // ── Materials state ───────────────────────────────────────────────────────
+  const [materials, setMaterials] = useState<Material[]>([]);
+  const [loadingMaterials, setLoadingMaterials] = useState(false);
+  const [addLinkOpen, setAddLinkOpen] = useState(false);
+  const [newLinkTitle, setNewLinkTitle] = useState('');
+  const [newLinkUrl, setNewLinkUrl] = useState('');
+  const [savingLink, setSavingLink] = useState(false);
+  const [fetchingLinkMeta, setFetchingLinkMeta] = useState(false);
+  const [linkFavicon, setLinkFavicon] = useState<string | null>(null);
+  const linkTitleEditedRef = useRef(false);
+  const linkMetaTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const linkMetaAbortRef = useRef<AbortController | null>(null);
+  const [materialCounts, setMaterialCounts] = useState<Record<number, number>>(
+    {}
+  );
+  const [uploadQueue, setUploadQueue] = useState<UploadItem[]>([]);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const materialFileInputRef = useRef<HTMLInputElement>(null);
+
   const {
     data: instructorOptions = [],
     isFetching: loadingInstructors,
@@ -964,7 +1497,6 @@ export default function TurmaDetalhePage() {
 
   // ── Form ──────────────────────────────────────────────────────────────────
   const aulaSchema = getAulaSchema(t);
-  const studentSchema = getStudentSchema(t);
 
   const aulaForm = useForm<AulaForm>({
     resolver: zodResolver(aulaSchema),
@@ -988,15 +1520,6 @@ export default function TurmaDetalhePage() {
   const recurrenceDaysOfWeek = aulaForm.watch('recurrenceDaysOfWeek') ?? [];
   const showRecurrenceFields = !editingAula || editingAula.isRecurring;
 
-  const editStudentForm = useForm<StudentForm>({
-    resolver: zodResolver(studentSchema),
-    defaultValues: {
-      name: '',
-      email: '',
-      phone: '',
-    },
-  });
-
   const courseForm = useForm<CourseSheetFormValues>({
     resolver: zodResolver(getCourseSheetSchema(tCourses)),
     defaultValues: DEFAULT_COURSE_FORM_VALUES,
@@ -1072,6 +1595,15 @@ export default function TurmaDetalhePage() {
     return map;
   }, [aulasState]);
 
+  const isAttendanceTaken = useCallback(
+    (sessionId: number) => {
+      const session = attendanceMatrix[sessionId];
+      if (!session) return false;
+      return Object.values(session).some(Boolean);
+    },
+    [attendanceMatrix]
+  );
+
   const notifyLmsDataUpdated = () => {
     if (typeof window === 'undefined') return;
 
@@ -1271,45 +1803,57 @@ export default function TurmaDetalhePage() {
     }
   };
 
-  const openEditStudentSheet = () => {
+  const openEditStudentSheet = async () => {
     if (!selectedStudentProfile) return;
-    editStudentForm.reset({
-      name: selectedStudentProfile.nome || '',
-      email: selectedStudentProfile.email || '',
-      phone: selectedStudentProfile.telefone || '',
-    });
-    setStudentProfileDialogOpen(false);
-    setEditStudentSheetOpen(true);
+
+    setLoadingStudentPerson(true);
+    try {
+      const response = await request<ContactPerson>({
+        url: `/person/${selectedStudentProfile.id}`,
+        method: 'GET',
+      });
+
+      setSelectedStudentPerson(response.data);
+      setStudentProfileDialogOpen(false);
+      setEditStudentSheetOpen(true);
+    } catch {
+      toast.error(t('toasts.error'));
+    } finally {
+      setLoadingStudentPerson(false);
+    }
   };
 
-  const handleUpdateStudentProfile = editStudentForm.handleSubmit(
-    async (values) => {
-      if (!selectedStudentProfile) return;
+  const handleStudentPersonSaved = async (person?: ContactPerson) => {
+    await refetchAlunos();
 
-      setSavingStudentProfile(true);
+    const personId = person?.id ?? selectedStudentProfile?.id;
+    if (personId) {
       try {
         const res = await request<StudentProfile>({
-          url: `/lms/classes/${id}/students/${selectedStudentProfile.id}`,
-          method: 'PATCH',
-          data: {
-            name: values.name,
-            email: values.email,
-            phone: values.phone,
-          },
+          url: `/lms/classes/${id}/students/${personId}`,
+          method: 'GET',
         });
-
         setSelectedStudentProfile(res.data);
-        await refetchAlunos();
-        setEditStudentSheetOpen(false);
-        setStudentProfileDialogOpen(true);
-        toast.success(t('toasts.studentUpdated'));
       } catch {
-        toast.error(t('toasts.error'));
-      } finally {
-        setSavingStudentProfile(false);
+        setSelectedStudentProfile((previous) =>
+          previous && previous.id === personId
+            ? {
+                ...previous,
+                nome: person?.name ?? previous.nome,
+                avatarId:
+                  person?.avatar_id !== undefined
+                    ? person.avatar_id
+                    : previous.avatarId,
+              }
+            : previous
+        );
       }
     }
-  );
+
+    setEditStudentSheetOpen(false);
+    setSelectedStudentPerson(null);
+    setStudentProfileDialogOpen(true);
+  };
 
   const getDefaultPresencaList = useCallback(
     () =>
@@ -1347,6 +1891,20 @@ export default function TurmaDetalhePage() {
     [alunos, getDefaultPresencaList, id, request]
   );
 
+  const resetLinkForm = () => {
+    setNewLinkTitle('');
+    setNewLinkUrl('');
+    setLinkFavicon(null);
+    setFetchingLinkMeta(false);
+    setAddLinkOpen(false);
+    linkTitleEditedRef.current = false;
+    if (linkMetaTimerRef.current) clearTimeout(linkMetaTimerRef.current);
+    if (linkMetaAbortRef.current) {
+      linkMetaAbortRef.current.abort();
+      linkMetaAbortRef.current = null;
+    }
+  };
+
   const openAulaSheet = (aula?: Aula, options?: OpenAulaSheetOptions) => {
     setAulaSheetTab(options?.initialTab ?? 'aulas');
 
@@ -1367,6 +1925,19 @@ export default function TurmaDetalhePage() {
         applyScope: 'single',
       });
       void loadPresencaForAula(aula);
+      // Load materials for this session
+      setMaterials([]);
+      setUploadQueue([]);
+      resetLinkForm();
+      setLoadingMaterials(true);
+      request<Material[]>({
+        url: `/lms/classes/${id}/materials`,
+        method: 'GET',
+        params: { sessionId: aula.id },
+      })
+        .then((res) => setMaterials(res.data))
+        .catch(() => setMaterials([]))
+        .finally(() => setLoadingMaterials(false));
     } else {
       setEditingAula(null);
       aulaForm.reset({
@@ -1385,6 +1956,9 @@ export default function TurmaDetalhePage() {
         ...options?.prefill,
       });
       setPresencaList(options?.attendance ?? getDefaultPresencaList());
+      setMaterials([]);
+      setUploadQueue([]);
+      resetLinkForm();
     }
 
     setAulaSheetOpen(true);
@@ -1448,6 +2022,17 @@ export default function TurmaDetalhePage() {
           })),
       },
     });
+    // Update local attendanceMatrix so the sessions list reflects the new state immediately
+    const newSessionMatrix: Record<number, boolean> = {};
+    for (const p of presencaList) {
+      if (p.selecionado) {
+        newSessionMatrix[p.alunoId] = p.presente;
+      }
+    }
+    setAttendanceMatrix((prev) => ({
+      ...prev,
+      [sessionId]: newSessionMatrix,
+    }));
   };
 
   const handleSaveAula = aulaForm.handleSubmit(async (data) => {
@@ -1520,6 +2105,7 @@ export default function TurmaDetalhePage() {
       [sessionId]: { ...(prev[sessionId] ?? {}), [studentId]: next },
     }));
     setSavingAttendanceCells((prev) => new Set(prev).add(cellKey));
+    const savingToastId = toast.loading(t('toasts.attendanceSaving'));
 
     try {
       await request({
@@ -1527,13 +2113,14 @@ export default function TurmaDetalhePage() {
         method: 'POST',
         data: { attendance: sessionAttendance },
       });
+      toast.success(t('toasts.attendanceSaved'), { id: savingToastId });
     } catch {
       // Rollback on error
       setAttendanceMatrix((prev) => ({
         ...prev,
         [sessionId]: { ...(prev[sessionId] ?? {}), [studentId]: current },
       }));
-      toast.error(t('toasts.error'));
+      toast.error(t('toasts.error'), { id: savingToastId });
     } finally {
       setSavingAttendanceCells((prev) => {
         const updated = new Set(prev);
@@ -1608,61 +2195,254 @@ export default function TurmaDetalhePage() {
     }
   };
 
-  // ── KPIs ──────────────────────────────────────────────────────────────────
-  const now = new Date();
-  const completedSessions = aulasState.filter(
-    (aula) => getSessionEndDate(aula) < now
-  );
-  const upcomingSessions = aulasState.filter(
-    (aula) => getSessionEndDate(aula) >= now
-  );
-  const nextSession = upcomingSessions[0] ?? null;
-  const completedSessionsCount = completedSessions.length;
-  const totalSessionsCount = aulasState.length;
-  const capacity = turma?.capacity ?? 0;
-  const occupiedSeats = alunos.length;
-  const availableSeats = Math.max(capacity - occupiedSeats, 0);
-  const occupancyRate =
-    capacity > 0 ? Math.round((occupiedSeats / capacity) * 100) : 0;
-  const primaryInstructor =
-    nextSession?.instructorName?.trim() ||
-    aulasState
-      .find((aula) => aula.instructorName?.trim())
-      ?.instructorName?.trim() ||
-    'Nao definido';
-  const nextSessionStartsAt = nextSession
-    ? getSessionStartDate(nextSession)
-    : null;
-  const nextSessionSummary = nextSessionStartsAt
-    ? format(nextSessionStartsAt, "dd/MM 'as' HH:mm", { locale: dateLocale })
-    : 'Nenhuma aula futura';
-  const nextSessionSupportText = nextSession
-    ? nextSession.titulo
-    : 'Agende a proxima aula para manter a turma em movimento.';
+  const handleDeleteAula = async () => {
+    if (!aulaToDelete) return;
+    setDeletingAula(true);
+    try {
+      await request({
+        url: `/lms/classes/${id}/sessions/${aulaToDelete.id}`,
+        method: 'DELETE',
+      });
+      setAulasState((prev) => prev.filter((a) => a.id !== aulaToDelete.id));
+      void refetchAulas();
+      notifyLmsDataUpdated();
+      setDeleteAulaDialogOpen(false);
+      setAulaToDelete(null);
+      toast.success('Aula removida com sucesso.');
+    } catch {
+      toast.error(t('toasts.error'));
+    } finally {
+      setDeletingAula(false);
+    }
+  };
 
-  const kpis: KpiCardItem[] = [
-    {
-      key: 'enrolled-students',
-      title: t('kpis.enrolledStudents.label'),
-      value: occupiedSeats,
-      description: t('kpis.enrolledStudents.sub', {
-        vagas: capacity,
-      }),
-      icon: Users,
-      iconContainerClassName: 'bg-orange-500/10 text-orange-700',
-      accentClassName: 'from-orange-500/25 via-amber-500/10 to-transparent',
-      layout: 'compact',
-    },
-    {
-      key: 'occupancy-rate',
-      title: t('kpis.occupancyRate.label'),
-      value: capacity > 0 ? `${occupancyRate}%` : '—',
-      description:
-        capacity > 0 && availableSeats > 0
-          ? t('kpis.occupancyRate.subFree', {
-              count: availableSeats,
-            })
-          : capacity > 0
+  const uploadFiles = async (files: File[]) => {
+    if (!editingAula) return;
+    const baseId = Date.now();
+    const newItems: UploadItem[] = files.map((file, i) => ({
+      id: `${baseId}-${i}`,
+      file,
+      progress: 0,
+      status: 'uploading' as const,
+      title: file.name.replace(/\.[^.]+$/, ''),
+    }));
+    setUploadQueue((prev) => [...prev, ...newItems]);
+
+    for (const item of newItems) {
+      try {
+        const formData = new FormData();
+        formData.append('file', item.file);
+        const { data: uploaded } = await request<{ id: number }>({
+          method: 'POST',
+          url: '/file',
+          data: formData,
+          headers: { 'Content-Type': 'multipart/form-data' },
+          onUploadProgress: (e: { loaded: number; total?: number }) => {
+            const progress = e.total
+              ? Math.round((e.loaded / e.total) * 100)
+              : 0;
+            setUploadQueue((prev) =>
+              prev.map((q) => (q.id === item.id ? { ...q, progress } : q))
+            );
+          },
+        });
+        const fileId = Number(uploaded?.id);
+        if (!fileId) throw new Error('Upload failed');
+
+        const res = await request<Material>({
+          url: `/lms/classes/${id}/materials`,
+          method: 'POST',
+          data: {
+            title: item.title,
+            materialType: 'file',
+            fileId,
+            sessionId: editingAula.id,
+          },
+        });
+        setMaterials((prev) => [...prev, res.data]);
+        setMaterialCounts((prev) => ({
+          ...prev,
+          [editingAula.id]: (prev[editingAula.id] ?? 0) + 1,
+        }));
+        setUploadQueue((prev) =>
+          prev.map((q) =>
+            q.id === item.id
+              ? { ...q, status: 'done' as const, progress: 100 }
+              : q
+          )
+        );
+        setTimeout(
+          () => setUploadQueue((prev) => prev.filter((q) => q.id !== item.id)),
+          1500
+        );
+      } catch {
+        setUploadQueue((prev) =>
+          prev.map((q) =>
+            q.id === item.id ? { ...q, status: 'error' as const } : q
+          )
+        );
+        toast.error(`Falha ao enviar "${item.file.name}".`);
+      }
+    }
+  };
+
+  const handleLinkUrlChange = (rawUrl: string) => {
+    setNewLinkUrl(rawUrl);
+    setLinkFavicon(null);
+
+    if (linkMetaTimerRef.current) clearTimeout(linkMetaTimerRef.current);
+    if (linkMetaAbortRef.current) {
+      linkMetaAbortRef.current.abort();
+      linkMetaAbortRef.current = null;
+    }
+
+    const url = rawUrl.trim();
+    if (!url || !/^https?:\/\//.test(url)) return;
+
+    // Show favicon immediately from domain
+    try {
+      const domain = new URL(url).hostname;
+      setLinkFavicon(
+        `https://www.google.com/s2/favicons?domain=${domain}&sz=32`
+      );
+    } catch {
+      // invalid URL — ignore
+    }
+
+    // Debounce title fetch (only if user hasn't typed a title manually)
+    if (linkTitleEditedRef.current) return;
+    setFetchingLinkMeta(true);
+    linkMetaTimerRef.current = setTimeout(async () => {
+      if (linkTitleEditedRef.current) return;
+      setFetchingLinkMeta(true);
+      const controller = new AbortController();
+      linkMetaAbortRef.current = controller;
+      try {
+        const res = await fetch(
+          `https://api.microlink.io/?url=${encodeURIComponent(url)}&meta=false`,
+          { signal: controller.signal }
+        );
+        const data = (await res.json()) as {
+          data?: { title?: string | null };
+        };
+        if (data?.data?.title && !linkTitleEditedRef.current) {
+          setNewLinkTitle(data.data.title);
+        }
+      } catch {
+        // abort or network error — ignore silently
+      } finally {
+        setFetchingLinkMeta(false);
+      }
+    }, 800);
+  };
+
+  const handleAddLink = async () => {
+    if (!editingAula || !newLinkUrl.trim()) return;
+    const url = newLinkUrl.trim();
+    const title = newLinkTitle.trim() || url;
+    setSavingLink(true);
+    try {
+      const res = await request<Material>({
+        url: `/lms/classes/${id}/materials`,
+        method: 'POST',
+        data: {
+          title,
+          materialType: 'link',
+          url,
+          sessionId: editingAula.id,
+        },
+      });
+      setMaterials((prev) => [...prev, res.data]);
+      setMaterialCounts((prev) => ({
+        ...prev,
+        [editingAula.id]: (prev[editingAula.id] ?? 0) + 1,
+      }));
+      resetLinkForm();
+    } catch {
+      toast.error('Não foi possível adicionar o link.');
+    } finally {
+      setSavingLink(false);
+    }
+  };
+
+  const handleDeleteMaterial = async (materialId: number) => {
+    try {
+      await request({
+        url: `/lms/classes/${id}/materials/${materialId}`,
+        method: 'DELETE',
+      });
+      setMaterials((prev) => prev.filter((m) => m.id !== materialId));
+      if (editingAula) {
+        setMaterialCounts((prev) => ({
+          ...prev,
+          [editingAula.id]: Math.max((prev[editingAula.id] ?? 1) - 1, 0),
+        }));
+      }
+    } catch {
+      toast.error('Não foi possível remover o material.');
+    }
+  };
+
+  // ── KPIs ──────────────────────────────────────────────────────────────────
+  const now = new Date();
+  const completedSessions = aulasState.filter(
+    (aula) => getSessionEndDate(aula) < now
+  );
+  const upcomingSessions = aulasState.filter(
+    (aula) => getSessionEndDate(aula) >= now
+  );
+  const nextSession = upcomingSessions[0] ?? null;
+  const completedSessionsCount = completedSessions.length;
+  const totalSessionsCount = aulasState.length;
+  const capacity = turma?.capacity ?? 0;
+  const occupiedSeats = alunos.length;
+  const availableSeats = Math.max(capacity - occupiedSeats, 0);
+  const occupancyRate =
+    capacity > 0 ? Math.round((occupiedSeats / capacity) * 100) : 0;
+  const primaryInstructor =
+    nextSession?.instructorName?.trim() ||
+    aulasState
+      .find((aula) => aula.instructorName?.trim())
+      ?.instructorName?.trim() ||
+    'Nao definido';
+  const primaryInstructorAvatarId =
+    nextSession?.instructorAvatarId ??
+    aulasState.find((aula) => aula.instructorAvatarId)?.instructorAvatarId ??
+    turma?.instructorAvatarId ??
+    null;
+  const nextSessionStartsAt = nextSession
+    ? getSessionStartDate(nextSession)
+    : null;
+  const nextSessionSummary = nextSessionStartsAt
+    ? format(nextSessionStartsAt, "dd/MM 'as' HH:mm", { locale: dateLocale })
+    : 'Nenhuma aula futura';
+  const nextSessionSupportText = nextSession
+    ? nextSession.titulo
+    : 'Agende a proxima aula para manter a turma em movimento.';
+
+  const kpis: KpiCardItem[] = [
+    {
+      key: 'enrolled-students',
+      title: t('kpis.enrolledStudents.label'),
+      value: occupiedSeats,
+      description: t('kpis.enrolledStudents.sub', {
+        vagas: capacity,
+      }),
+      icon: Users,
+      iconContainerClassName: 'bg-orange-500/10 text-orange-700',
+      accentClassName: 'from-orange-500/25 via-amber-500/10 to-transparent',
+      layout: 'compact',
+    },
+    {
+      key: 'occupancy-rate',
+      title: t('kpis.occupancyRate.label'),
+      value: capacity > 0 ? `${occupancyRate}%` : '—',
+      description:
+        capacity > 0 && availableSeats > 0
+          ? t('kpis.occupancyRate.subFree', {
+              count: availableSeats,
+            })
+          : capacity > 0
             ? t('kpis.occupancyRate.subFull')
             : 'Capacidade nao definida',
       icon: BarChart3,
@@ -1725,6 +2505,8 @@ export default function TurmaDetalhePage() {
   const classTitle = turma?.courseTitle ?? turma?.curso ?? '';
   const classCode = turma?.code ?? turma?.codigo ?? '';
   const courseId = turma?.courseId ?? turma?.cursoId;
+  const courseLogoFileId =
+    courseDetail?.logoFileId ?? turma?.logoFileId ?? null;
   const startDate = turma?.startDate ?? turma?.dataInicio;
   const endDate = turma?.endDate ?? turma?.dataFim;
   const schedule =
@@ -1751,10 +2533,30 @@ export default function TurmaDetalhePage() {
     openAulaSheet();
   };
 
+  const handleViewStudents = (): void => {
+    setActiveTab('alunos');
+    requestAnimationFrame(() => {
+      studentsSectionRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      });
+    });
+  };
+
   return (
     <Page>
       <PageHeader
-        title={classTitle}
+        title={
+          <span className="flex min-w-0 items-center gap-3">
+            <CourseAvatar
+              fileId={courseLogoFileId}
+              title={classTitle}
+              className="size-10 rounded-lg"
+              iconSize="size-5"
+            />
+            <span className="min-w-0 truncate">{classTitle}</span>
+          </span>
+        }
         breadcrumbs={[
           {
             label: t('breadcrumbs.home'),
@@ -1877,13 +2679,22 @@ export default function TurmaDetalhePage() {
             className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_300px]"
           >
             {/* ── Left: Tabs ─────────────────────────────────────────────── */}
-            <div className="min-w-0">
+            <div ref={studentsSectionRef} className="min-w-0 scroll-mt-24">
               <Tabs
                 value={activeTab}
                 onValueChange={setActiveTab}
                 className="w-full"
               >
-                <TabsList className="mb-4 h-auto grid w-full grid-cols-3 rounded-lg bg-muted/80 p-1">
+                <TabsList className="mb-4 h-auto grid w-full grid-cols-5 rounded-lg bg-muted/80 p-1">
+                  <TabsTrigger value="sessoes" className="gap-2">
+                    <CalendarIcon className="size-4" />
+                    Sessões
+                    {!loading && totalSessionsCount > 0 && (
+                      <span className="ml-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary">
+                        {totalSessionsCount}
+                      </span>
+                    )}
+                  </TabsTrigger>
                   <TabsTrigger value="alunos" className="gap-2">
                     <Users className="size-4" />
                     {t('tabs.students')}
@@ -1911,8 +2722,342 @@ export default function TurmaDetalhePage() {
                       </span>
                     )}
                   </TabsTrigger>
+                  <TabsTrigger value="materiais-global" className="gap-2">
+                    <Paperclip className="size-4" />
+                    Materiais
+                    {globalMaterials.length > 0 && (
+                      <span className="ml-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary">
+                        {globalMaterials.length}
+                      </span>
+                    )}
+                  </TabsTrigger>
                 </TabsList>
 
+                {/* ── Tab Sessões ─────────────────────────────────────────────── */}
+                <TabsContent value="sessoes" className="mt-0">
+                  {/* Toolbar */}
+                  <div className="mb-4 flex items-center justify-between gap-3">
+                    <p className="text-sm text-muted-foreground">
+                      {loading ? (
+                        <span className="inline-block h-4 w-32 animate-pulse rounded bg-muted" />
+                      ) : (
+                        `${aulasState.length} aula${aulasState.length !== 1 ? 's' : ''} cadastrada${aulasState.length !== 1 ? 's' : ''}`
+                      )}
+                    </p>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      className="gap-2"
+                      onClick={() => openAulaSheet()}
+                    >
+                      <Plus className="size-4" />
+                      {t('actions.newLesson')}
+                    </Button>
+                  </div>
+
+                  {/* Content */}
+                  {loading ? (
+                    <div className="space-y-2">
+                      {Array.from({ length: 5 }).map((_, i) => (
+                        <div
+                          key={i}
+                          className="flex items-center gap-3 rounded-lg border border-border/70 p-3"
+                        >
+                          <div className="h-2.5 w-2.5 animate-pulse rounded-full bg-muted" />
+                          <div className="h-4 w-48 animate-pulse rounded bg-muted" />
+                          <div className="ml-auto h-4 w-24 animate-pulse rounded bg-muted" />
+                        </div>
+                      ))}
+                    </div>
+                  ) : aulasState.length === 0 ? (
+                    <div className="rounded-xl border border-dashed border-border/60 bg-muted/20 px-6 py-10 text-center">
+                      <div className="flex flex-col items-center gap-3">
+                        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted/60 text-muted-foreground">
+                          <CalendarIcon className="size-5" />
+                        </div>
+                        <div>
+                          <p className="text-sm font-semibold">
+                            {t('calendar.empty.title')}
+                          </p>
+                          <p className="mt-0.5 text-xs text-muted-foreground">
+                            {t('calendar.empty.description')}
+                          </p>
+                        </div>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          className="gap-2"
+                          onClick={() => openAulaSheet()}
+                        >
+                          <Plus className="size-3.5" />
+                          {t('actions.newLesson')}
+                        </Button>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="overflow-x-auto rounded-xl border border-border/60">
+                      <Table>
+                        <TableHeader>
+                          <TableRow className="bg-muted/40 hover:bg-muted/40">
+                            <TableHead className="w-8 text-center text-xs">
+                              #
+                            </TableHead>
+                            <TableHead>Sessão</TableHead>
+                            <TableHead className="w-[120px]">Data</TableHead>
+                            <TableHead className="w-[105px]">Horário</TableHead>
+                            <TableHead className="w-[90px]">Tipo</TableHead>
+                            <TableHead>Instrutor</TableHead>
+                            <TableHead className="w-[90px] text-center">
+                              Chamada
+                            </TableHead>
+                            <TableHead className="w-[80px] text-center">
+                              Materiais
+                            </TableHead>
+                            <TableHead className="w-[90px]">Link</TableHead>
+                            <TableHead className="w-[44px]" />
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {aulasState.map((aula, index) => {
+                            const sessionColor =
+                              aula.cor || aula.color || '#3b82f6';
+                            const isPast = getSessionEndDate(aula) < now;
+                            const attendanceTaken = isAttendanceTaken(aula.id);
+                            const rawLink = aula.meetingUrl || aula.local || '';
+                            const meetingUrl =
+                              rawLink.startsWith('http://') ||
+                              rawLink.startsWith('https://')
+                                ? rawLink
+                                : undefined;
+                            return (
+                              <TableRow
+                                key={aula.id}
+                                className="cursor-pointer hover:bg-muted/30"
+                                onClick={() => openAulaSheet(aula)}
+                              >
+                                {/* # */}
+                                <TableCell className="text-center text-xs tabular-nums text-muted-foreground">
+                                  {index + 1}
+                                </TableCell>
+
+                                {/* Sessão: cor + título + ementa */}
+                                <TableCell>
+                                  <div className="flex items-center gap-2">
+                                    <span
+                                      className="inline-block h-2.5 w-2.5 shrink-0 rounded-full"
+                                      style={{ backgroundColor: sessionColor }}
+                                    />
+                                    <div className="min-w-0">
+                                      <p
+                                        className={cn(
+                                          'truncate text-sm font-medium',
+                                          isPast && 'text-muted-foreground'
+                                        )}
+                                      >
+                                        {aula.titulo}
+                                      </p>
+                                      {aula.descricao && (
+                                        <p className="truncate text-[11px] text-muted-foreground">
+                                          {aula.descricao}
+                                        </p>
+                                      )}
+                                      {aula.isRecurring && (
+                                        <p className="text-[10px] text-muted-foreground/70">
+                                          Recorrente
+                                        </p>
+                                      )}
+                                    </div>
+                                  </div>
+                                </TableCell>
+
+                                {/* Data */}
+                                <TableCell>
+                                  <span
+                                    className={cn(
+                                      'text-sm tabular-nums',
+                                      isPast && 'text-muted-foreground'
+                                    )}
+                                  >
+                                    {format(
+                                      parseSessionDate(aula.data),
+                                      'dd/MM/yyyy',
+                                      { locale: dateLocale }
+                                    )}
+                                  </span>
+                                </TableCell>
+
+                                {/* Horário */}
+                                <TableCell className="tabular-nums text-sm text-muted-foreground">
+                                  {aula.horaInicio} – {aula.horaFim}
+                                </TableCell>
+
+                                {/* Tipo */}
+                                <TableCell>
+                                  <Badge
+                                    variant="outline"
+                                    className="gap-1 text-[11px]"
+                                  >
+                                    {aula.tipo === 'online' ? (
+                                      <Video className="size-3" />
+                                    ) : (
+                                      <MapPin className="size-3" />
+                                    )}
+                                    {tClasses(`type.${aula.tipo}`)}
+                                  </Badge>
+                                </TableCell>
+
+                                {/* Instrutor */}
+                                <TableCell>
+                                  {aula.instructorName ? (
+                                    <div className="flex min-w-0 items-center gap-2">
+                                      <Avatar className="size-7 shrink-0">
+                                        <AvatarImage
+                                          src={getPersonAvatarUrl(
+                                            aula.instructorAvatarId
+                                          )}
+                                          alt={aula.instructorName}
+                                        />
+                                        <AvatarFallback className="bg-primary/10 text-[9px] font-medium text-primary">
+                                          {getPersonInitials(
+                                            aula.instructorName
+                                          )}
+                                        </AvatarFallback>
+                                      </Avatar>
+                                      <span className="truncate text-sm">
+                                        {aula.instructorName}
+                                      </span>
+                                    </div>
+                                  ) : (
+                                    <span className="text-sm text-muted-foreground">
+                                      —
+                                    </span>
+                                  )}
+                                </TableCell>
+
+                                {/* Chamada */}
+                                <TableCell className="text-center">
+                                  <Badge
+                                    variant="outline"
+                                    className={cn(
+                                      'text-[10px]',
+                                      attendanceTaken
+                                        ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-400'
+                                        : 'text-muted-foreground'
+                                    )}
+                                  >
+                                    {attendanceTaken ? 'Feita' : 'Pendente'}
+                                  </Badge>
+                                </TableCell>
+
+                                {/* Materiais */}
+                                <TableCell className="text-center">
+                                  {(materialCounts[aula.id] ?? 0) > 0 ? (
+                                    <Badge
+                                      variant="outline"
+                                      className="gap-1 text-[10px] border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-950/30 dark:text-blue-400"
+                                    >
+                                      <Paperclip className="size-3" />
+                                      {materialCounts[aula.id]}
+                                    </Badge>
+                                  ) : (
+                                    <span className="text-xs text-muted-foreground">
+                                      —
+                                    </span>
+                                  )}
+                                </TableCell>
+
+                                {/* Link */}
+                                <TableCell>
+                                  {meetingUrl ? (
+                                    <div
+                                      className="flex items-center gap-1"
+                                      onClick={(e) => e.stopPropagation()}
+                                    >
+                                      <TooltipProvider delayDuration={200}>
+                                        <Tooltip>
+                                          <TooltipTrigger asChild>
+                                            <a
+                                              href={meetingUrl}
+                                              target="_blank"
+                                              rel="noopener noreferrer"
+                                              className="flex items-center gap-1.5 text-blue-600 hover:underline"
+                                            >
+                                              <MeetingPlatformIcon
+                                                url={meetingUrl}
+                                                className="size-4"
+                                              />
+                                              <span className="text-xs">
+                                                Entrar
+                                              </span>
+                                            </a>
+                                          </TooltipTrigger>
+                                          <TooltipContent
+                                            side="top"
+                                            className="max-w-[260px] break-all text-xs"
+                                          >
+                                            {meetingUrl}
+                                          </TooltipContent>
+                                        </Tooltip>
+                                      </TooltipProvider>
+                                      <CopyButton
+                                        value={meetingUrl}
+                                        className="size-6 shrink-0"
+                                      />
+                                    </div>
+                                  ) : (
+                                    <span className="text-muted-foreground">
+                                      —
+                                    </span>
+                                  )}
+                                </TableCell>
+
+                                {/* Ações */}
+                                <TableCell>
+                                  <DropdownMenu>
+                                    <DropdownMenuTrigger asChild>
+                                      <Button
+                                        variant="ghost"
+                                        size="icon"
+                                        className="size-7"
+                                        onClick={(e) => e.stopPropagation()}
+                                      >
+                                        <MoreHorizontal className="size-4" />
+                                      </Button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent align="end">
+                                      <DropdownMenuItem
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          openAulaSheet(aula);
+                                        }}
+                                      >
+                                        <Pencil className="mr-2 size-4" />
+                                        Editar
+                                      </DropdownMenuItem>
+                                      <DropdownMenuSeparator />
+                                      <DropdownMenuItem
+                                        className="text-destructive focus:text-destructive"
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          setAulaToDelete(aula);
+                                          setDeleteAulaDialogOpen(true);
+                                        }}
+                                      >
+                                        <Trash2 className="mr-2 size-4" />
+                                        Remover
+                                      </DropdownMenuItem>
+                                    </DropdownMenuContent>
+                                  </DropdownMenu>
+                                </TableCell>
+                              </TableRow>
+                            );
+                          })}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  )}
+                </TabsContent>
+
                 {/* ── Tab Alunos ───────────────────────────────────────────── */}
                 <TabsContent value="alunos" className="mt-0">
                   {/* Actions bar */}
@@ -2002,6 +3147,12 @@ export default function TurmaDetalhePage() {
                                       <div className="flex w-full items-center gap-3">
                                         <Checkbox checked={isSelected} />
                                         <Avatar className="size-8">
+                                          <AvatarImage
+                                            src={getPersonAvatarUrl(
+                                              pessoa.avatarId
+                                            )}
+                                            alt={pessoa.nome}
+                                          />
                                           <AvatarFallback className="text-[10px]">
                                             {pessoa.nome
                                               .split(' ')
@@ -2204,6 +3355,10 @@ export default function TurmaDetalhePage() {
                               className="shrink-0"
                             />
                             <Avatar className="size-8 shrink-0">
+                              <AvatarImage
+                                src={getPersonAvatarUrl(aluno.avatarId)}
+                                alt={aluno.nome}
+                              />
                               <AvatarFallback className="bg-gradient-to-br from-blue-100 to-blue-200 text-[11px] font-medium text-blue-700">
                                 {getPersonInitials(aluno.nome)}
                               </AvatarFallback>
@@ -2465,7 +3620,28 @@ export default function TurmaDetalhePage() {
                                     {aula.meetingUrl || aula.local || '—'}
                                   </TableCell>
                                   <TableCell className="text-sm text-muted-foreground">
-                                    {aula.instructorName || '—'}
+                                    {aula.instructorName ? (
+                                      <div className="flex min-w-0 items-center gap-2">
+                                        <Avatar className="size-7 shrink-0">
+                                          <AvatarImage
+                                            src={getPersonAvatarUrl(
+                                              aula.instructorAvatarId
+                                            )}
+                                            alt={aula.instructorName}
+                                          />
+                                          <AvatarFallback className="bg-primary/10 text-[9px] font-medium text-primary">
+                                            {getPersonInitials(
+                                              aula.instructorName
+                                            )}
+                                          </AvatarFallback>
+                                        </Avatar>
+                                        <span className="truncate">
+                                          {aula.instructorName}
+                                        </span>
+                                      </div>
+                                    ) : (
+                                      '—'
+                                    )}
                                   </TableCell>
                                   <TableCell>
                                     <Button
@@ -2681,7 +3857,7 @@ export default function TurmaDetalhePage() {
                       <Table>
                         <TableHeader>
                           <TableRow className="bg-muted/40 hover:bg-muted/40">
-                            <TableHead className="sticky left-0 z-10 min-w-[180px] bg-muted/40 font-semibold">
+                            <TableHead className="sticky left-0 z-10 min-w-[260px] bg-muted/40 font-semibold">
                               {t('tabs.students')}
                             </TableHead>
                             {aulasState.map((aula) => {
@@ -2710,8 +3886,28 @@ export default function TurmaDetalhePage() {
                               key={aluno.id}
                               className="hover:bg-muted/30"
                             >
-                              <TableCell className="sticky left-0 z-10 border-r border-border/40 bg-background text-sm font-medium">
-                                {aluno.nome}
+                              <TableCell className="sticky left-0 z-10 min-w-[260px] border-r border-border/40 bg-background">
+                                <div className="flex min-w-0 items-center gap-3">
+                                  <Avatar className="size-8 shrink-0">
+                                    <AvatarImage
+                                      src={getPersonAvatarUrl(aluno.avatarId)}
+                                      alt={aluno.nome}
+                                    />
+                                    <AvatarFallback className="bg-gradient-to-br from-blue-100 to-blue-200 text-[11px] font-medium text-blue-700">
+                                      {getPersonInitials(aluno.nome)}
+                                    </AvatarFallback>
+                                  </Avatar>
+                                  <div className="min-w-0">
+                                    <p className="truncate text-sm font-medium">
+                                      {aluno.nome}
+                                    </p>
+                                    {aluno.email ? (
+                                      <p className="truncate text-xs text-muted-foreground">
+                                        {aluno.email}
+                                      </p>
+                                    ) : null}
+                                  </div>
+                                </div>
                               </TableCell>
                               {aulasState.map((aula) => {
                                 const cellKey = `${aula.id}-${aluno.id}`;
@@ -2725,17 +3921,27 @@ export default function TurmaDetalhePage() {
                                     key={aula.id}
                                     className="text-center"
                                   >
-                                    <Checkbox
-                                      checked={present}
-                                      disabled={saving}
-                                      onCheckedChange={() =>
-                                        void toggleAttendanceCell(
-                                          aula.id,
-                                          aluno.id
-                                        )
-                                      }
-                                      aria-label={`${aluno.nome} – ${format(parseSessionDate(aula.data), 'dd/MM/yyyy')}`}
-                                    />
+                                    <div className="flex items-center justify-center">
+                                      {saving ? (
+                                        <Loader2
+                                          className="size-4 animate-spin text-muted-foreground"
+                                          aria-label={t(
+                                            'toasts.attendanceSaving'
+                                          )}
+                                        />
+                                      ) : (
+                                        <Checkbox
+                                          checked={present}
+                                          onCheckedChange={() =>
+                                            void toggleAttendanceCell(
+                                              aula.id,
+                                              aluno.id
+                                            )
+                                          }
+                                          aria-label={`${aluno.nome} – ${format(parseSessionDate(aula.data), 'dd/MM/yyyy')}`}
+                                        />
+                                      )}
+                                    </div>
                                   </TableCell>
                                 );
                               })}
@@ -2746,14 +3952,301 @@ export default function TurmaDetalhePage() {
                     </div>
                   )}
                 </TabsContent>
-              </Tabs>
-            </div>
 
-            {/* ── Right: Operational Sidebar ──────────────────────────────── */}
-            <div className="space-y-3 lg:sticky lg:top-4 lg:self-start">
-              {/* Next Session */}
-              <OperationalSidebarCard
-                title={t('sidebar.nextSession') ?? 'Próxima Aula'}
+                {/* ── Tab Materiais Global ────────────────────────────────────────────── */}
+                <TabsContent value="materiais-global" className="mt-0">
+                  {loadingGlobalMaterials ? (
+                    <div className="space-y-2">
+                      {Array.from({ length: 4 }).map((_, i) => (
+                        <div
+                          key={i}
+                          className="h-14 animate-pulse rounded-lg bg-muted"
+                        />
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="flex flex-col gap-4">
+                      {/* Materials list */}
+                      {globalMaterials.length > 0 ? (
+                        <div className="space-y-2">
+                          {globalMaterials.map((mat) => (
+                            <div
+                              key={mat.id}
+                              className="flex items-center gap-3 rounded-lg border border-border/60 p-3 hover:bg-muted/20"
+                            >
+                              <MaterialIconCell material={mat} />
+                              <div className="min-w-0 flex-1">
+                                <p className="truncate text-sm font-medium">
+                                  {mat.title}
+                                </p>
+                                {mat.url && (
+                                  <a
+                                    href={mat.url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="truncate text-xs text-blue-600 hover:underline"
+                                    onClick={(e) => e.stopPropagation()}
+                                  >
+                                    {mat.url}
+                                  </a>
+                                )}
+                                {mat.file?.filename && (
+                                  <p className="truncate text-xs text-muted-foreground">
+                                    {mat.file.filename}
+                                  </p>
+                                )}
+                                {mat.course_class_session && (
+                                  <p className="mt-0.5 flex items-center gap-1 truncate text-[11px] text-muted-foreground/70">
+                                    <CalendarIcon className="size-3 shrink-0" />
+                                    {mat.course_class_session.title}
+                                  </p>
+                                )}
+                              </div>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="size-7 shrink-0 text-destructive hover:text-destructive"
+                                onClick={() =>
+                                  handleDeleteGlobalMaterial(mat.id)
+                                }
+                              >
+                                <Trash2 className="size-4" />
+                              </Button>
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="rounded-xl border border-dashed border-border/60 bg-muted/20 px-6 py-10 text-center">
+                          <div className="flex flex-col items-center gap-2">
+                            <Paperclip className="size-8 text-muted-foreground/50" />
+                            <p className="text-sm text-muted-foreground">
+                              Nenhum material cadastrado ainda.
+                            </p>
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Upload queue */}
+                      {globalUploadQueue.length > 0 && (
+                        <div className="space-y-2">
+                          {globalUploadQueue.map((item) => (
+                            <div
+                              key={item.id}
+                              className="rounded-lg border border-border/60 bg-muted/20 p-3"
+                            >
+                              <div className="mb-1.5 flex items-center gap-2">
+                                {item.status === 'done' ? (
+                                  <CheckCircle2 className="size-4 shrink-0 text-green-500" />
+                                ) : item.status === 'error' ? (
+                                  <AlertTriangle className="size-4 shrink-0 text-destructive" />
+                                ) : (
+                                  <Loader2 className="size-4 shrink-0 animate-spin text-muted-foreground" />
+                                )}
+                                <span className="min-w-0 flex-1 truncate text-sm font-medium">
+                                  {item.file.name}
+                                </span>
+                                <span className="shrink-0 text-xs text-muted-foreground">
+                                  {item.status === 'error'
+                                    ? 'Erro'
+                                    : item.status === 'done'
+                                      ? 'Concluído'
+                                      : `${item.progress}%`}
+                                </span>
+                                {item.status === 'error' && (
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="size-6 shrink-0"
+                                    onClick={() =>
+                                      setGlobalUploadQueue((prev) =>
+                                        prev.filter((q) => q.id !== item.id)
+                                      )
+                                    }
+                                  >
+                                    <X className="size-3.5" />
+                                  </Button>
+                                )}
+                              </div>
+                              <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+                                <div
+                                  className={cn(
+                                    'h-full rounded-full transition-all duration-300',
+                                    item.status === 'error'
+                                      ? 'bg-destructive'
+                                      : item.status === 'done'
+                                        ? 'bg-green-500'
+                                        : 'bg-primary'
+                                  )}
+                                  style={{ width: `${item.progress}%` }}
+                                />
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+
+                      {/* Drop zone */}
+                      <div
+                        className={cn(
+                          'relative rounded-xl border-2 border-dashed transition-colors',
+                          globalIsDragOver
+                            ? 'border-primary bg-primary/5'
+                            : 'border-border/60 hover:border-primary/40 hover:bg-muted/20'
+                        )}
+                        onDragOver={(e) => {
+                          e.preventDefault();
+                          setGlobalIsDragOver(true);
+                        }}
+                        onDragLeave={(e) => {
+                          if (
+                            !e.currentTarget.contains(e.relatedTarget as Node)
+                          )
+                            setGlobalIsDragOver(false);
+                        }}
+                        onDrop={(e) => {
+                          e.preventDefault();
+                          setGlobalIsDragOver(false);
+                          const files = Array.from(e.dataTransfer.files);
+                          if (files.length) void uploadGlobalFiles(files);
+                        }}
+                      >
+                        <input
+                          ref={globalMaterialFileInputRef}
+                          type="file"
+                          multiple
+                          className="hidden"
+                          onChange={(e) => {
+                            const files = Array.from(e.target.files ?? []);
+                            if (files.length) void uploadGlobalFiles(files);
+                            if (globalMaterialFileInputRef.current)
+                              globalMaterialFileInputRef.current.value = '';
+                          }}
+                        />
+                        <button
+                          type="button"
+                          className="w-full p-8 text-center"
+                          onClick={() =>
+                            globalMaterialFileInputRef.current?.click()
+                          }
+                        >
+                          <div className="flex flex-col items-center gap-2">
+                            <Upload
+                              className={cn(
+                                'size-8 transition-colors',
+                                globalIsDragOver
+                                  ? 'text-primary'
+                                  : 'text-muted-foreground/50'
+                              )}
+                            />
+                            <div>
+                              <p className="text-sm font-medium">
+                                {globalIsDragOver
+                                  ? 'Solte os arquivos aqui'
+                                  : 'Arraste arquivos ou clique para selecionar'}
+                              </p>
+                              <p className="mt-0.5 text-xs text-muted-foreground">
+                                Múltiplos arquivos suportados
+                              </p>
+                            </div>
+                          </div>
+                        </button>
+                      </div>
+
+                      {/* Link form */}
+                      {globalAddLinkOpen ? (
+                        <div className="space-y-3 rounded-lg border border-border/60 bg-muted/20 p-4">
+                          <Field>
+                            <FieldLabel>URL</FieldLabel>
+                            <div className="relative flex items-center">
+                              {globalLinkFavicon && (
+                                <img
+                                  src={globalLinkFavicon}
+                                  alt=""
+                                  className="pointer-events-none absolute left-2.5 size-4 rounded-sm"
+                                  onError={() => setGlobalLinkFavicon(null)}
+                                />
+                              )}
+                              <Input
+                                value={globalLinkUrl}
+                                onChange={(e) =>
+                                  handleGlobalLinkUrlChange(e.target.value)
+                                }
+                                placeholder="https://..."
+                                autoFocus
+                                className={
+                                  globalLinkFavicon ? 'pl-8' : undefined
+                                }
+                              />
+                            </div>
+                          </Field>
+                          <Field>
+                            <FieldLabel className="flex items-center gap-1.5">
+                              Título
+                              {globalFetchingLinkMeta && (
+                                <Loader2 className="size-3 animate-spin text-muted-foreground" />
+                              )}
+                            </FieldLabel>
+                            <Input
+                              value={globalLinkTitle}
+                              onChange={(e) => {
+                                setGlobalLinkTitle(e.target.value);
+                                globalLinkTitleEditedRef.current =
+                                  e.target.value.length > 0;
+                              }}
+                              placeholder="Ex: Referência de estudo"
+                            />
+                          </Field>
+                          <div className="flex gap-2">
+                            <Button
+                              type="button"
+                              size="sm"
+                              onClick={handleGlobalAddLink}
+                              disabled={
+                                globalSavingLink || !globalLinkUrl.trim()
+                              }
+                              className="gap-1.5"
+                            >
+                              {globalSavingLink ? (
+                                <Loader2 className="size-3.5 animate-spin" />
+                              ) : (
+                                <Plus className="size-3.5" />
+                              )}
+                              Salvar
+                            </Button>
+                            <Button
+                              type="button"
+                              size="sm"
+                              variant="outline"
+                              onClick={resetGlobalLinkForm}
+                            >
+                              Cancelar
+                            </Button>
+                          </div>
+                        </div>
+                      ) : (
+                        <Button
+                          type="button"
+                          variant="outline"
+                          className="w-full gap-2"
+                          onClick={() => setGlobalAddLinkOpen(true)}
+                        >
+                          <Link className="size-4" />
+                          Adicionar link
+                        </Button>
+                      )}
+                    </div>
+                  )}
+                </TabsContent>
+              </Tabs>
+            </div>
+
+            {/* ── Right: Operational Sidebar ──────────────────────────────── */}
+            <div className="space-y-3 lg:sticky lg:top-4 lg:self-start">
+              {/* Next Session */}
+              <OperationalSidebarCard
+                title={t('sidebar.nextSession') ?? 'Próxima Aula'}
               >
                 {loading ? (
                   <div className="space-y-2">
@@ -2781,7 +4274,7 @@ export default function TurmaDetalhePage() {
                     </div>
                     {nextSession.tipo === 'online' &&
                     (nextSession.meetingUrl || nextSession.local) ? (
-                      <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                      <div className="flex items-center gap-1 text-xs text-muted-foreground">
                         <Video className="size-3.5 shrink-0" />
                         <a
                           href={nextSession.meetingUrl || nextSession.local}
@@ -2791,6 +4284,12 @@ export default function TurmaDetalhePage() {
                         >
                           {t('info.accessRoom')}
                         </a>
+                        <CopyButton
+                          value={
+                            nextSession.meetingUrl || nextSession.local || ''
+                          }
+                          className="size-5 shrink-0"
+                        />
                       </div>
                     ) : nextSession.local ? (
                       <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
@@ -2801,6 +4300,12 @@ export default function TurmaDetalhePage() {
                     {nextSession.instructorName && (
                       <div className="flex items-center gap-2 pt-1">
                         <Avatar className="size-6">
+                          <AvatarImage
+                            src={getPersonAvatarUrl(
+                              nextSession.instructorAvatarId
+                            )}
+                            alt={nextSession.instructorName}
+                          />
                           <AvatarFallback className="text-[9px]">
                             {getPersonInitials(nextSession.instructorName)}
                           </AvatarFallback>
@@ -2850,6 +4355,10 @@ export default function TurmaDetalhePage() {
                 ) : primaryInstructor !== 'Nao definido' ? (
                   <div className="flex items-center gap-2.5">
                     <Avatar className="size-9">
+                      <AvatarImage
+                        src={getPersonAvatarUrl(primaryInstructorAvatarId)}
+                        alt={primaryInstructor}
+                      />
                       <AvatarFallback className="bg-primary/10 text-xs font-medium text-primary">
                         {getPersonInitials(primaryInstructor)}
                       </AvatarFallback>
@@ -2884,7 +4393,7 @@ export default function TurmaDetalhePage() {
                   <div className="flex items-center justify-between gap-2">
                     <div className="flex min-w-0 items-center gap-2">
                       <CourseAvatar
-                        fileId={courseDetail?.logoFileId}
+                        fileId={courseLogoFileId}
                         title={classTitle}
                         className="size-8 shrink-0 rounded-lg"
                         iconSize="size-4"
@@ -2984,20 +4493,10 @@ export default function TurmaDetalhePage() {
                           >
                             {t('info.accessRoom')}
                           </a>
-                          <Button
-                            variant="ghost"
-                            size="icon"
+                          <CopyButton
+                            value={roomUrl}
                             className="size-5 shrink-0"
-                            onClick={() => {
-                              void navigator.clipboard.writeText(roomUrl);
-                              toast.success(
-                                t('sidebar.linkCopied') ?? 'Link copiado!'
-                              );
-                            }}
-                            aria-label="Copiar link"
-                          >
-                            <Save className="size-3" />
-                          </Button>
+                          />
                         </div>
                       ) : (
                         <p className="font-medium">{location}</p>
@@ -3068,7 +4567,7 @@ export default function TurmaDetalhePage() {
                       size="sm"
                       variant="outline"
                       className="mt-2 w-full gap-2 text-xs"
-                      onClick={() => setActiveTab('alunos')}
+                      onClick={handleViewStudents}
                     >
                       <Users className="size-3.5" />
                       {t('sidebar.viewStudents') ?? 'Ver alunos'}
@@ -3110,6 +4609,25 @@ export default function TurmaDetalhePage() {
             </div>
           ) : selectedStudentProfile ? (
             <div className="space-y-3">
+              <div className="flex items-center gap-3 rounded-lg border p-3">
+                <Avatar className="size-12">
+                  <AvatarImage
+                    src={getPersonAvatarUrl(selectedStudentProfile.avatarId)}
+                    alt={selectedStudentProfile.nome}
+                  />
+                  <AvatarFallback className="bg-gradient-to-br from-blue-100 to-blue-200 text-xs font-medium text-blue-700">
+                    {getPersonInitials(selectedStudentProfile.nome)}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="min-w-0">
+                  <p className="truncate font-medium">
+                    {selectedStudentProfile.nome}
+                  </p>
+                  <p className="truncate text-xs text-muted-foreground">
+                    {selectedStudentProfile.email || '—'}
+                  </p>
+                </div>
+              </div>
               <div className="rounded-lg border p-3">
                 <p className="text-xs text-muted-foreground">
                   {t('dialogs.studentProfile.fields.name')}
@@ -3167,119 +4685,38 @@ export default function TurmaDetalhePage() {
             >
               {t('common.cancel')}
             </Button>
-            <Button onClick={openEditStudentSheet} className="gap-2">
-              <Pencil className="size-4" />
+            <Button
+              onClick={() => void openEditStudentSheet()}
+              disabled={loadingStudentPerson || !selectedStudentProfile}
+              className="gap-2"
+            >
+              {loadingStudentPerson ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                <Pencil className="size-4" />
+              )}
               {t('common.edit')}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      <Sheet open={editStudentSheetOpen} onOpenChange={setEditStudentSheetOpen}>
-        <SheetContent
-          side="right"
-          className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
-        >
-          <SheetHeader>
-            <SheetTitle>{t('dialogs.editStudent.title')}</SheetTitle>
-            <SheetDescription>
-              {t('dialogs.editStudent.description')}
-            </SheetDescription>
-          </SheetHeader>
-
-          <Form {...editStudentForm}>
-            <form
-              onSubmit={handleUpdateStudentProfile}
-              className="mt-6 space-y-3 px-4"
-            >
-              <FormField
-                control={editStudentForm.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      {t('dialogs.editStudent.fields.name')}
-                    </FormLabel>
-                    <FormControl>
-                      <Input
-                        {...field}
-                        placeholder={t(
-                          'dialogs.editStudent.fields.namePlaceholder'
-                        )}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={editStudentForm.control}
-                name="email"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      {t('dialogs.editStudent.fields.email')}
-                    </FormLabel>
-                    <FormControl>
-                      <Input
-                        type="email"
-                        {...field}
-                        placeholder={t(
-                          'dialogs.editStudent.fields.emailPlaceholder'
-                        )}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={editStudentForm.control}
-                name="phone"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      {t('dialogs.editStudent.fields.phone')}
-                    </FormLabel>
-                    <FormControl>
-                      <Input
-                        {...field}
-                        placeholder={t(
-                          'dialogs.editStudent.fields.phonePlaceholder'
-                        )}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <SheetFooter className="mt-6 px-0">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => {
-                    setEditStudentSheetOpen(false);
-                    setStudentProfileDialogOpen(true);
-                  }}
-                >
-                  {t('common.cancel')}
-                </Button>
-                <Button
-                  type="submit"
-                  disabled={savingStudentProfile}
-                  className="gap-2"
-                >
-                  {savingStudentProfile && (
-                    <Loader2 className="size-4 animate-spin" />
-                  )}
-                  {t('common.save')}
-                </Button>
-              </SheetFooter>
-            </form>
-          </Form>
-        </SheetContent>
-      </Sheet>
+      <PersonFormSheet
+        open={editStudentSheetOpen}
+        person={selectedStudentPerson}
+        contactTypes={contactTypes}
+        documentTypes={documentTypes}
+        onOpenChange={(open) => {
+          setEditStudentSheetOpen(open);
+          if (!open) {
+            setSelectedStudentPerson(null);
+          }
+        }}
+        onSuccess={handleStudentPersonSaved}
+        title={t('dialogs.editStudent.title')}
+        description={t('dialogs.editStudent.description')}
+        allowedTypes={['individual']}
+      />
 
       {/* ── Dialog Remover Aluno ─────────────────────────────────────────────── */}
       <Dialog
@@ -3321,6 +4758,53 @@ export default function TurmaDetalhePage() {
         </DialogContent>
       </Dialog>
 
+      {/* ── Dialog Remover Aula ──────────────────────────────────────────────── */}
+      <Dialog
+        open={deleteAulaDialogOpen}
+        onOpenChange={setDeleteAulaDialogOpen}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="size-5 text-destructive" />
+              Remover aula
+            </DialogTitle>
+            <DialogDescription>
+              Tem certeza que deseja remover a aula{' '}
+              <strong>{aulaToDelete?.titulo}</strong>?
+              {aulaToDelete?.isRecurring && (
+                <>
+                  {' '}
+                  Esta aula faz parte de uma série recorrente. Somente esta
+                  ocorrência será removida.
+                </>
+              )}{' '}
+              Esta ação não pode ser desfeita.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setDeleteAulaDialogOpen(false);
+                setAulaToDelete(null);
+              }}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => void handleDeleteAula()}
+              disabled={deletingAula}
+              className="gap-2"
+            >
+              {deletingAula && <Loader2 className="size-4 animate-spin" />}
+              {t('common.remove')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       {/* ── Sheet Aula ───────────────────────────────────────────────────────── */}
       <Sheet open={aulaSheetOpen} onOpenChange={setAulaSheetOpen}>
         <SheetContent
@@ -3342,15 +4826,31 @@ export default function TurmaDetalhePage() {
           <Tabs
             value={aulaSheetTab}
             onValueChange={(value) =>
-              setAulaSheetTab(value as 'aulas' | 'chamada')
+              setAulaSheetTab(value as 'aulas' | 'chamada' | 'materiais')
             }
             className="mt-6 px-4"
           >
-            <TabsList className="grid w-full grid-cols-2">
+            <TabsList
+              className={cn(
+                'grid w-full',
+                editingAula ? 'grid-cols-3' : 'grid-cols-2'
+              )}
+            >
               <TabsTrigger value="aulas">{t('sheet.tabs.lessons')}</TabsTrigger>
               <TabsTrigger value="chamada">
                 {t('sheet.tabs.attendance')}
               </TabsTrigger>
+              {editingAula && (
+                <TabsTrigger value="materiais" className="gap-1.5">
+                  <Paperclip className="size-3.5" />
+                  Materiais
+                  {materials.length > 0 && (
+                    <span className="ml-0.5 rounded-full bg-primary/10 px-1 text-[10px] font-semibold text-primary">
+                      {materials.length}
+                    </span>
+                  )}
+                </TabsTrigger>
+              )}
             </TabsList>
 
             <TabsContent value="aulas" className="mt-4">
@@ -3643,16 +5143,47 @@ export default function TurmaDetalhePage() {
                                 role="combobox"
                                 className="w-full justify-between"
                               >
-                                <span className="truncate text-left">
-                                  {instructorOptions.find(
+                                {(() => {
+                                  const sel = instructorOptions.find(
                                     (instructor) =>
                                       String(instructor.id) === field.value
-                                  )?.name ||
-                                    editingAula?.instructorName ||
-                                    t(
-                                      'sheet.lessonForm.fields.instructorPlaceholder'
-                                    )}
-                                </span>
+                                  );
+                                  const name =
+                                    sel?.name || editingAula?.instructorName;
+                                  const avatarId =
+                                    sel?.avatarId ??
+                                    editingAula?.instructorAvatarId;
+                                  if (name) {
+                                    const initials = name
+                                      .split(' ')
+                                      .filter(Boolean)
+                                      .slice(0, 2)
+                                      .map((p) => p[0]?.toUpperCase() ?? '')
+                                      .join('');
+                                    return (
+                                      <div className="flex min-w-0 items-center gap-2">
+                                        <Avatar className="h-5 w-5 shrink-0 rounded">
+                                          <AvatarImage
+                                            src={getPersonAvatarUrl(avatarId)}
+                                          />
+                                          <AvatarFallback className="rounded bg-muted text-[10px] font-semibold">
+                                            {initials}
+                                          </AvatarFallback>
+                                        </Avatar>
+                                        <span className="truncate text-left">
+                                          {name}
+                                        </span>
+                                      </div>
+                                    );
+                                  }
+                                  return (
+                                    <span className="truncate text-left text-muted-foreground">
+                                      {t(
+                                        'sheet.lessonForm.fields.instructorPlaceholder'
+                                      )}
+                                    </span>
+                                  );
+                                })()}
                                 {loadingInstructors ? (
                                   <Loader2 className="ml-2 h-4 w-4 shrink-0 animate-spin opacity-60" />
                                 ) : (
@@ -3695,19 +5226,43 @@ export default function TurmaDetalhePage() {
                                     </div>
                                   </CommandEmpty>
                                   <CommandGroup>
-                                    {instructorOptions.map((instructor) => (
-                                      <CommandItem
-                                        key={instructor.id}
-                                        value={`${instructor.name}-${instructor.id}`}
-                                        onSelect={() => {
-                                          field.onChange(String(instructor.id));
-                                          setInstructorOpen(false);
-                                          setInstructorSearch('');
-                                        }}
-                                      >
-                                        {instructor.name}
-                                      </CommandItem>
-                                    ))}
+                                    {instructorOptions.map((instructor) => {
+                                      const initials = instructor.name
+                                        .split(' ')
+                                        .filter(Boolean)
+                                        .slice(0, 2)
+                                        .map((p) => p[0]?.toUpperCase() ?? '')
+                                        .join('');
+                                      return (
+                                        <CommandItem
+                                          key={instructor.id}
+                                          value={`${instructor.name}-${instructor.id}`}
+                                          onSelect={() => {
+                                            field.onChange(
+                                              String(instructor.id)
+                                            );
+                                            setInstructorOpen(false);
+                                            setInstructorSearch('');
+                                          }}
+                                        >
+                                          <div className="flex min-w-0 items-center gap-3 py-0.5">
+                                            <Avatar className="h-7 w-7 shrink-0 rounded-lg border border-border/60">
+                                              <AvatarImage
+                                                src={getPersonAvatarUrl(
+                                                  instructor.avatarId
+                                                )}
+                                              />
+                                              <AvatarFallback className="rounded-lg bg-muted text-[11px] font-semibold text-foreground">
+                                                {initials}
+                                              </AvatarFallback>
+                                            </Avatar>
+                                            <span className="truncate text-sm">
+                                              {instructor.name}
+                                            </span>
+                                          </div>
+                                        </CommandItem>
+                                      );
+                                    })}
                                   </CommandGroup>
                                 </CommandList>
                               </Command>
@@ -3776,9 +5331,11 @@ export default function TurmaDetalhePage() {
                     size="sm"
                     onClick={() =>
                       setPresencaList((prev) =>
-                        prev.map((p) =>
-                          p.selecionado ? { ...p, presente: true } : p
-                        )
+                        prev.map((p) => ({
+                          ...p,
+                          selecionado: true,
+                          presente: true,
+                        }))
                       )
                     }
                   >
@@ -3789,9 +5346,11 @@ export default function TurmaDetalhePage() {
                     size="sm"
                     onClick={() =>
                       setPresencaList((prev) =>
-                        prev.map((p) =>
-                          p.selecionado ? { ...p, presente: false } : p
-                        )
+                        prev.map((p) => ({
+                          ...p,
+                          selecionado: true,
+                          presente: false,
+                        }))
                       )
                     }
                   >
@@ -3818,6 +5377,10 @@ export default function TurmaDetalhePage() {
                           aria-label={t('sheet.attendance.participantLabel')}
                         />
                         <Avatar className="size-9">
+                          <AvatarImage
+                            src={getPersonAvatarUrl(aluno.avatarId)}
+                            alt={aluno.nome}
+                          />
                           <AvatarFallback className="text-xs">
                             {aluno.nome
                               .split(' ')
@@ -3826,7 +5389,14 @@ export default function TurmaDetalhePage() {
                               .slice(0, 2)}
                           </AvatarFallback>
                         </Avatar>
-                        <span className="font-medium">{aluno.nome}</span>
+                        <div className="min-w-0">
+                          <p className="truncate font-medium">{aluno.nome}</p>
+                          {aluno.email ? (
+                            <p className="truncate text-xs text-muted-foreground">
+                              {aluno.email}
+                            </p>
+                          ) : null}
+                        </div>
                       </div>
                       <div className="flex items-center gap-3">
                         <span
@@ -3864,6 +5434,269 @@ export default function TurmaDetalhePage() {
                 </Button>
               </SheetFooter>
             </TabsContent>
+
+            {/* ── Tab Materiais ─────────────────────────────────────────── */}
+            <TabsContent value="materiais" className="mt-4 space-y-3">
+              {loadingMaterials ? (
+                <div className="space-y-2">
+                  {Array.from({ length: 3 }).map((_, i) => (
+                    <div
+                      key={i}
+                      className="h-12 animate-pulse rounded-lg bg-muted"
+                    />
+                  ))}
+                </div>
+              ) : (
+                <div className="flex flex-col gap-3">
+                  {/* Materials list */}
+                  {materials.length > 0 && (
+                    <div className="space-y-2">
+                      {materials.map((mat) => (
+                        <div
+                          key={mat.id}
+                          className="flex items-center gap-3 rounded-lg border border-border/60 p-3"
+                        >
+                          <MaterialIconCell material={mat} />
+                          <div className="min-w-0 flex-1">
+                            <p className="truncate text-sm font-medium">
+                              {mat.title}
+                            </p>
+                            {mat.url && (
+                              <a
+                                href={mat.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="truncate text-xs text-blue-600 hover:underline"
+                                onClick={(e) => e.stopPropagation()}
+                              >
+                                {mat.url}
+                              </a>
+                            )}
+                            {mat.file?.filename && (
+                              <p className="truncate text-xs text-muted-foreground">
+                                {mat.file.filename}
+                              </p>
+                            )}
+                          </div>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="size-7 shrink-0 text-destructive hover:text-destructive"
+                            onClick={() => handleDeleteMaterial(mat.id)}
+                          >
+                            <Trash2 className="size-4" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* Upload queue */}
+                  {uploadQueue.length > 0 && (
+                    <div className="space-y-2">
+                      {uploadQueue.map((item) => (
+                        <div
+                          key={item.id}
+                          className="rounded-lg border border-border/60 bg-muted/20 p-3"
+                        >
+                          <div className="mb-1.5 flex items-center gap-2">
+                            {item.status === 'done' ? (
+                              <CheckCircle2 className="size-4 shrink-0 text-green-500" />
+                            ) : item.status === 'error' ? (
+                              <AlertTriangle className="size-4 shrink-0 text-destructive" />
+                            ) : (
+                              <Loader2 className="size-4 shrink-0 animate-spin text-muted-foreground" />
+                            )}
+                            <span className="min-w-0 flex-1 truncate text-sm font-medium">
+                              {item.file.name}
+                            </span>
+                            <span className="shrink-0 text-xs text-muted-foreground">
+                              {item.status === 'error'
+                                ? 'Erro'
+                                : item.status === 'done'
+                                  ? 'Concluído'
+                                  : `${item.progress}%`}
+                            </span>
+                            {item.status === 'error' && (
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="size-6 shrink-0"
+                                onClick={() =>
+                                  setUploadQueue((prev) =>
+                                    prev.filter((q) => q.id !== item.id)
+                                  )
+                                }
+                              >
+                                <X className="size-3.5" />
+                              </Button>
+                            )}
+                          </div>
+                          <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+                            <div
+                              className={cn(
+                                'h-full rounded-full transition-all duration-300',
+                                item.status === 'error'
+                                  ? 'bg-destructive'
+                                  : item.status === 'done'
+                                    ? 'bg-green-500'
+                                    : 'bg-primary'
+                              )}
+                              style={{ width: `${item.progress}%` }}
+                            />
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* Drop zone */}
+                  <div
+                    className={cn(
+                      'relative rounded-xl border-2 border-dashed transition-colors',
+                      isDragOver
+                        ? 'border-primary bg-primary/5'
+                        : 'border-border/60 hover:border-primary/40 hover:bg-muted/20'
+                    )}
+                    onDragOver={(e) => {
+                      e.preventDefault();
+                      setIsDragOver(true);
+                    }}
+                    onDragLeave={(e) => {
+                      if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+                        setIsDragOver(false);
+                      }
+                    }}
+                    onDrop={(e) => {
+                      e.preventDefault();
+                      setIsDragOver(false);
+                      const files = Array.from(e.dataTransfer.files);
+                      if (files.length) void uploadFiles(files);
+                    }}
+                  >
+                    <input
+                      ref={materialFileInputRef}
+                      type="file"
+                      multiple
+                      className="hidden"
+                      onChange={(e) => {
+                        const files = Array.from(e.target.files ?? []);
+                        if (files.length) void uploadFiles(files);
+                        if (materialFileInputRef.current)
+                          materialFileInputRef.current.value = '';
+                      }}
+                    />
+                    <button
+                      type="button"
+                      className="w-full p-6 text-center"
+                      onClick={() => materialFileInputRef.current?.click()}
+                    >
+                      <div className="flex flex-col items-center gap-2">
+                        <Upload
+                          className={cn(
+                            'size-8 transition-colors',
+                            isDragOver
+                              ? 'text-primary'
+                              : 'text-muted-foreground/50'
+                          )}
+                        />
+                        <div>
+                          <p className="text-sm font-medium">
+                            {isDragOver
+                              ? 'Solte os arquivos aqui'
+                              : 'Arraste arquivos ou clique para selecionar'}
+                          </p>
+                          <p className="mt-0.5 text-xs text-muted-foreground">
+                            Múltiplos arquivos suportados
+                          </p>
+                        </div>
+                      </div>
+                    </button>
+                  </div>
+
+                  {/* Link form */}
+                  {addLinkOpen ? (
+                    <div className="space-y-3 rounded-lg border border-border/60 bg-muted/20 p-4">
+                      <Field>
+                        <FieldLabel>URL</FieldLabel>
+                        <div className="relative flex items-center">
+                          {linkFavicon && (
+                            <img
+                              src={linkFavicon}
+                              alt=""
+                              className="pointer-events-none absolute left-2.5 size-4 rounded-sm"
+                              onError={() => setLinkFavicon(null)}
+                            />
+                          )}
+                          <Input
+                            value={newLinkUrl}
+                            onChange={(e) =>
+                              handleLinkUrlChange(e.target.value)
+                            }
+                            placeholder="https://..."
+                            autoFocus
+                            className={linkFavicon ? 'pl-8' : undefined}
+                          />
+                        </div>
+                      </Field>
+                      <Field>
+                        <FieldLabel className="flex items-center gap-1.5">
+                          Título
+                          {fetchingLinkMeta && (
+                            <Loader2 className="size-3 animate-spin text-muted-foreground" />
+                          )}
+                        </FieldLabel>
+                        <Input
+                          value={newLinkTitle}
+                          onChange={(e) => {
+                            setNewLinkTitle(e.target.value);
+                            linkTitleEditedRef.current =
+                              e.target.value.length > 0;
+                          }}
+                          placeholder="Ex: Slides da aula"
+                        />
+                      </Field>
+                      <div className="flex gap-2">
+                        <Button
+                          type="button"
+                          size="sm"
+                          onClick={handleAddLink}
+                          disabled={savingLink || !newLinkUrl.trim()}
+                          className="gap-1.5"
+                        >
+                          {savingLink ? (
+                            <Loader2 className="size-3.5 animate-spin" />
+                          ) : (
+                            <Plus className="size-3.5" />
+                          )}
+                          Salvar
+                        </Button>
+                        <Button
+                          type="button"
+                          size="sm"
+                          variant="outline"
+                          onClick={resetLinkForm}
+                        >
+                          Cancelar
+                        </Button>
+                      </div>
+                    </div>
+                  ) : (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      className="w-full gap-2"
+                      onClick={() => setAddLinkOpen(true)}
+                    >
+                      <Link className="size-4" />
+                      Adicionar link
+                    </Button>
+                  )}
+                </div>
+              )}
+            </TabsContent>
           </Tabs>
         </SheetContent>
       </Sheet>