@hed-hog/lms 0.0.266 → 0.0.268

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

@@ -0,0 +1,1267 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Field, FieldError, FieldLabel } from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { motion } from 'framer-motion';
+import {
+  AlertTriangle,
+  BarChart3,
+  Calendar,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  Clock,
+  Eye,
+  Laptop,
+  Loader2,
+  MapPin,
+  Monitor,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Search,
+  Trash2,
+  Users,
+  Users2,
+  X,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface Turma {
+  id: number;
+  codigo: string;
+  curso: string;
+  cursoId: number;
+  tipo: 'presencial' | 'online' | 'hibrida';
+  dataInicio: string;
+  dataFim: string;
+  horario: string;
+  status: 'aberta' | 'em_andamento' | 'concluida' | 'cancelada';
+  vagas: number;
+  matriculados: number;
+  professor: string;
+}
+
+// ── Schema ────────────────────────────────────────────────────────────────────
+
+function getTurmaSchema(t: (key: string) => string) {
+  return z.object({
+    codigo: z.string().min(3, t('form.validation.codigoMinLength')),
+    curso: z.string().min(1, t('form.validation.cursoRequired')),
+    tipo: z.string().min(1, t('form.validation.tipoRequired')),
+    professor: z.string().min(3, t('form.validation.professorMinLength')),
+    vagas: z.coerce.number().min(1, t('form.validation.vagasMin')),
+    dataInicio: z.string().min(1, t('form.validation.dataInicioRequired')),
+    dataFim: z.string().min(1, t('form.validation.dataFimRequired')),
+    horario: z.string().min(1, t('form.validation.horarioRequired')),
+    status: z.string().min(1, t('form.validation.statusRequired')),
+  });
+}
+
+type TurmaForm = {
+  codigo: string;
+  curso: string;
+  tipo: string;
+  professor: string;
+  vagas: number;
+  dataInicio: string;
+  dataFim: string;
+  horario: string;
+  status: string;
+};
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const CURSOS = [
+  'React Avancado',
+  'UX Design Fundamentals',
+  'Python para Data Science',
+  'Gestao de Projetos Ageis',
+  'Node.js Completo',
+  'Marketing Digital',
+  'TypeScript na Pratica',
+  'Design System',
+  'Excel para Negocios',
+  'Lideranca e Comunicacao',
+];
+
+const STATUS_VARIANT: Record<
+  string,
+  'default' | 'secondary' | 'outline' | 'destructive'
+> = {
+  aberta: 'secondary',
+  em_andamento: 'default',
+  concluida: 'outline',
+  cancelada: 'destructive',
+};
+
+const TIPO_ICON: Record<string, React.FC<{ className?: string }>> = {
+  presencial: MapPin,
+  online: Monitor,
+  hibrida: Laptop,
+};
+
+const PAGE_SIZES = [6, 12, 24];
+
+function formatDate(d: string) {
+  const [y, m, day] = d.split('-');
+  return `${day}/${m}/${y}`;
+}
+
+// ── Seed Data ─────────────────────────────────────────────────────────────────
+
+const initialTurmas: Turma[] = [
+  {
+    id: 1,
+    codigo: 'T-2024-001',
+    curso: 'React Avancado',
+    cursoId: 1,
+    tipo: 'online',
+    dataInicio: '2024-02-01',
+    dataFim: '2024-04-30',
+    horario: '19:00 - 22:00',
+    status: 'em_andamento',
+    vagas: 30,
+    matriculados: 28,
+    professor: 'Carlos Silva',
+  },
+  {
+    id: 2,
+    codigo: 'T-2024-002',
+    curso: 'UX Design Fundamentals',
+    cursoId: 2,
+    tipo: 'presencial',
+    dataInicio: '2024-03-01',
+    dataFim: '2024-05-15',
+    horario: '14:00 - 17:00',
+    status: 'em_andamento',
+    vagas: 25,
+    matriculados: 25,
+    professor: 'Ana Oliveira',
+  },
+  {
+    id: 3,
+    codigo: 'T-2024-003',
+    curso: 'Python para Data Science',
+    cursoId: 3,
+    tipo: 'online',
+    dataInicio: '2024-04-01',
+    dataFim: '2024-07-30',
+    horario: '19:00 - 21:00',
+    status: 'aberta',
+    vagas: 35,
+    matriculados: 20,
+    professor: 'Roberto Santos',
+  },
+  {
+    id: 4,
+    codigo: 'T-2024-004',
+    curso: 'Gestao de Projetos Ageis',
+    cursoId: 4,
+    tipo: 'hibrida',
+    dataInicio: '2024-01-15',
+    dataFim: '2024-03-15',
+    horario: '08:00 - 11:00',
+    status: 'concluida',
+    vagas: 20,
+    matriculados: 18,
+    professor: 'Maria Costa',
+  },
+  {
+    id: 5,
+    codigo: 'T-2024-005',
+    curso: 'Node.js Completo',
+    cursoId: 5,
+    tipo: 'online',
+    dataInicio: '2024-05-01',
+    dataFim: '2024-08-30',
+    horario: '19:00 - 22:00',
+    status: 'aberta',
+    vagas: 30,
+    matriculados: 12,
+    professor: 'Pedro Almeida',
+  },
+  {
+    id: 6,
+    codigo: 'T-2024-006',
+    curso: 'Marketing Digital',
+    cursoId: 6,
+    tipo: 'presencial',
+    dataInicio: '2024-06-01',
+    dataFim: '2024-08-30',
+    horario: '10:00 - 12:00',
+    status: 'cancelada',
+    vagas: 40,
+    matriculados: 0,
+    professor: 'Julia Ferreira',
+  },
+  {
+    id: 7,
+    codigo: 'T-2024-007',
+    curso: 'TypeScript na Pratica',
+    cursoId: 7,
+    tipo: 'online',
+    dataInicio: '2024-03-15',
+    dataFim: '2024-06-15',
+    horario: '19:00 - 21:30',
+    status: 'em_andamento',
+    vagas: 25,
+    matriculados: 22,
+    professor: 'Carlos Silva',
+  },
+  {
+    id: 8,
+    codigo: 'T-2024-008',
+    curso: 'Design System',
+    cursoId: 8,
+    tipo: 'hibrida',
+    dataInicio: '2024-04-15',
+    dataFim: '2024-06-30',
+    horario: '14:00 - 16:00',
+    status: 'aberta',
+    vagas: 20,
+    matriculados: 15,
+    professor: 'Ana Oliveira',
+  },
+  {
+    id: 9,
+    codigo: 'T-2024-009',
+    curso: 'Excel para Negocios',
+    cursoId: 9,
+    tipo: 'presencial',
+    dataInicio: '2024-01-10',
+    dataFim: '2024-02-28',
+    horario: '08:00 - 10:00',
+    status: 'concluida',
+    vagas: 50,
+    matriculados: 48,
+    professor: 'Maria Costa',
+  },
+  {
+    id: 10,
+    codigo: 'T-2024-010',
+    curso: 'Lideranca e Comunicacao',
+    cursoId: 10,
+    tipo: 'presencial',
+    dataInicio: '2024-05-15',
+    dataFim: '2024-07-15',
+    horario: '18:00 - 20:00',
+    status: 'aberta',
+    vagas: 30,
+    matriculados: 8,
+    professor: 'Roberto Santos',
+  },
+  {
+    id: 11,
+    codigo: 'T-2024-011',
+    curso: 'React Avancado',
+    cursoId: 1,
+    tipo: 'hibrida',
+    dataInicio: '2024-06-01',
+    dataFim: '2024-09-30',
+    horario: '19:00 - 21:00',
+    status: 'aberta',
+    vagas: 25,
+    matriculados: 5,
+    professor: 'Carlos Silva',
+  },
+  {
+    id: 12,
+    codigo: 'T-2024-012',
+    curso: 'Python para Data Science',
+    cursoId: 3,
+    tipo: 'presencial',
+    dataInicio: '2024-01-05',
+    dataFim: '2024-03-28',
+    horario: '14:00 - 17:00',
+    status: 'concluida',
+    vagas: 30,
+    matriculados: 29,
+    professor: 'Roberto Santos',
+  },
+];
+
+// ── Animations ────────────────────────────────────────────────────────────────
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 16 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.3 } },
+};
+
+const stagger = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.05 } },
+};
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+export default function TurmasPage() {
+  const t = useTranslations('lms.ClassesPage');
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const [loading, setLoading] = useState(true);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [turmas, setTurmas] = useState<Turma[]>(initialTurmas);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [editingTurma, setEditingTurma] = useState<Turma | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [turmaToDelete, setTurmaToDelete] = useState<Turma | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  // Search inputs (uncommitted)
+  const [buscaInput, setBuscaInput] = useState('');
+  const [filtroStatusInput, setFiltroStatusInput] = useState('todos');
+  const [filtroTipoInput, setFiltroTipoInput] = useState('todos');
+  const [filtroCursoInput, setFiltroCursoInput] = useState('todos');
+
+  // Applied filters
+  const [buscaApplied, setBuscaApplied] = useState('');
+  const [filtroStatusApplied, setFiltroStatusApplied] = useState('todos');
+  const [filtroTipoApplied, setFiltroTipoApplied] = useState('todos');
+  const [filtroCursoApplied, setFiltroCursoApplied] = useState('todos');
+
+  // Pagination
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+
+  // Double-click tracking
+  const clickTimers = useRef<Map<number, ReturnType<typeof setTimeout>>>(
+    new Map()
+  );
+
+  const form = useForm<TurmaForm>({
+    resolver: zodResolver(getTurmaSchema(t)),
+    defaultValues: {
+      codigo: '',
+      curso: '',
+      tipo: 'online',
+      professor: '',
+      vagas: 30,
+      dataInicio: '',
+      dataFim: '',
+      horario: '',
+      status: 'aberta',
+    },
+  });
+
+  useEffect(() => {
+    const t = setTimeout(() => setLoading(false), 700);
+    return () => clearTimeout(t);
+  }, []);
+
+  const uniqueCursos = useMemo(
+    () => [...new Set(turmas.map((t) => t.curso))].sort(),
+    [turmas]
+  );
+
+  // ── Filtering ────────────────────────────────────────────────────────────
+
+  const filteredTurmas = useMemo(
+    () =>
+      turmas.filter((t) => {
+        const q = buscaApplied.toLowerCase();
+        const matchBusca =
+          !q ||
+          t.codigo.toLowerCase().includes(q) ||
+          t.curso.toLowerCase().includes(q) ||
+          t.professor.toLowerCase().includes(q);
+        const matchStatus =
+          filtroStatusApplied === 'todos' || t.status === filtroStatusApplied;
+        const matchTipo =
+          filtroTipoApplied === 'todos' || t.tipo === filtroTipoApplied;
+        const matchCurso =
+          filtroCursoApplied === 'todos' || t.curso === filtroCursoApplied;
+        return matchBusca && matchStatus && matchTipo && matchCurso;
+      }),
+    [
+      turmas,
+      buscaApplied,
+      filtroStatusApplied,
+      filtroTipoApplied,
+      filtroCursoApplied,
+    ]
+  );
+
+  const totalPages = Math.max(1, Math.ceil(filteredTurmas.length / pageSize));
+  const safePage = Math.min(currentPage, totalPages);
+  const paginatedTurmas = filteredTurmas.slice(
+    (safePage - 1) * pageSize,
+    safePage * pageSize
+  );
+
+  function handleSearch(e: React.FormEvent) {
+    e.preventDefault();
+    setBuscaApplied(buscaInput);
+    setFiltroStatusApplied(filtroStatusInput);
+    setFiltroTipoApplied(filtroTipoInput);
+    setFiltroCursoApplied(filtroCursoInput);
+    setCurrentPage(1);
+  }
+
+  function clearFilters() {
+    setBuscaInput('');
+    setFiltroStatusInput('todos');
+    setFiltroTipoInput('todos');
+    setFiltroCursoInput('todos');
+    setBuscaApplied('');
+    setFiltroStatusApplied('todos');
+    setFiltroTipoApplied('todos');
+    setFiltroCursoApplied('todos');
+    setCurrentPage(1);
+  }
+
+  const hasActiveFilters =
+    buscaApplied ||
+    filtroStatusApplied !== 'todos' ||
+    filtroTipoApplied !== 'todos' ||
+    filtroCursoApplied !== 'todos';
+
+  // ── Double-click ──────────────────────────────────────────────────────────
+
+  function handleCardClick(turma: Turma) {
+    const existing = clickTimers.current.get(turma.id);
+    if (existing) {
+      clearTimeout(existing);
+      clickTimers.current.delete(turma.id);
+      router.push(`/turmas/${turma.id}`);
+    } else {
+      const t = setTimeout(() => clickTimers.current.delete(turma.id), 300);
+      clickTimers.current.set(turma.id, t);
+    }
+  }
+
+  // ── CRUD ──────────────────────────────────────────────────────────────────
+
+  function openCreateSheet() {
+    setEditingTurma(null);
+    form.reset({
+      codigo: '',
+      curso: '',
+      tipo: 'online',
+      professor: '',
+      vagas: 30,
+      dataInicio: '',
+      dataFim: '',
+      horario: '',
+      status: 'aberta',
+    });
+    setSheetOpen(true);
+  }
+
+  function openEditSheet(turma: Turma, e?: React.MouseEvent) {
+    e?.stopPropagation();
+    setEditingTurma(turma);
+    form.reset({
+      codigo: turma.codigo,
+      curso: turma.curso,
+      tipo: turma.tipo,
+      professor: turma.professor,
+      vagas: turma.vagas,
+      dataInicio: turma.dataInicio,
+      dataFim: turma.dataFim,
+      horario: turma.horario,
+      status: turma.status,
+    });
+    setSheetOpen(true);
+  }
+
+  async function onSubmit(data: TurmaForm) {
+    setSaving(true);
+    await new Promise((r) => setTimeout(r, 500));
+    if (editingTurma) {
+      setTurmas((prev) =>
+        prev.map((t) =>
+          t.id === editingTurma.id
+            ? {
+                ...t,
+                ...data,
+                tipo: data.tipo as Turma['tipo'],
+                status: data.status as Turma['status'],
+              }
+            : t
+        )
+      );
+      toast.success(t('toasts.turmaUpdated'));
+    } else {
+      const newTurma: Turma = {
+        id: Date.now(),
+        ...data,
+        cursoId: CURSOS.indexOf(data.curso) + 1,
+        tipo: data.tipo as Turma['tipo'],
+        status: data.status as Turma['status'],
+        matriculados: 0,
+      };
+      setTurmas((prev) => [newTurma, ...prev]);
+      toast.success(t('toasts.turmaCreated'));
+      setSaving(false);
+      setSheetOpen(false);
+      setTimeout(() => router.push(`/turmas/${newTurma.id}`), 400);
+      return;
+    }
+    setSaving(false);
+    setSheetOpen(false);
+  }
+
+  function confirmDelete() {
+    if (!turmaToDelete) return;
+    setTurmas((prev) => prev.filter((t) => t.id !== turmaToDelete.id));
+    toast.success(t('toasts.turmaRemoved'));
+    setTurmaToDelete(null);
+    setDeleteDialogOpen(false);
+  }
+
+  // ── KPIs ────────────────────────────────────────────────���─────────────────
+
+  const kpis = [
+    {
+      label: t('kpis.totalClasses.label'),
+      valor: turmas.length,
+      sub: t('kpis.totalClasses.sub'),
+      icon: Users2,
+      iconBg: 'bg-orange-100',
+      iconColor: 'text-orange-600',
+    },
+    {
+      label: t('kpis.inProgress.label'),
+      valor: turmas.filter((t) => t.status === 'em_andamento').length,
+      sub: t('kpis.inProgress.sub'),
+      icon: Clock,
+      iconBg: 'bg-muted',
+      iconColor: 'text-foreground',
+    },
+    {
+      label: t('kpis.openVacancies.label'),
+      valor: turmas
+        .filter((t) => t.status === 'aberta')
+        .reduce((a, t) => a + (t.vagas - t.matriculados), 0),
+      sub: t('kpis.openVacancies.sub'),
+      icon: Users,
+      iconBg: 'bg-muted',
+      iconColor: 'text-foreground',
+    },
+    {
+      label: t('kpis.occupancyRate.label'),
+      valor: `${Math.round((turmas.reduce((a, t) => a + t.matriculados / Math.max(t.vagas, 1), 0) / Math.max(turmas.length, 1)) * 100)}%`,
+      sub: t('kpis.occupancyRate.sub'),
+      icon: BarChart3,
+      iconBg: 'bg-muted',
+      iconColor: 'text-foreground',
+    },
+  ];
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          {
+            label: t('breadcrumbs.home'),
+            href: '/',
+          },
+          {
+            label: t('breadcrumbs.classes'),
+          },
+        ]}
+        actions={
+          <Button onClick={openCreateSheet} className="gap-2">
+            <Plus className="size-4" />
+            {t('actions.createClass')}
+          </Button>
+        }
+      />
+
+      {/* KPIs */}
+      <div className="mb-6 grid grid-cols-2 gap-4 lg:grid-cols-4">
+        {loading
+          ? Array.from({ length: 4 }).map((_, i) => (
+              <Card key={i}>
+                <CardContent className="p-4">
+                  <Skeleton className="mb-2 h-8 w-16" />
+                  <Skeleton className="h-4 w-28" />
+                </CardContent>
+              </Card>
+            ))
+          : kpis.map((kpi, i) => (
+              <motion.div
+                key={kpi.label}
+                initial={{ opacity: 0, y: 12 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: i * 0.07 }}
+              >
+                <Card className="overflow-hidden">
+                  <CardContent className="flex items-start justify-between p-5">
+                    <div>
+                      <p className="text-sm text-muted-foreground">
+                        {kpi.label}
+                      </p>
+                      <p className="mt-1 text-3xl font-bold tracking-tight">
+                        {kpi.valor}
+                      </p>
+                      <p className="mt-0.5 text-xs text-muted-foreground">
+                        {kpi.sub}
+                      </p>
+                    </div>
+                    <div
+                      className={`flex size-10 shrink-0 items-center justify-center rounded-lg ${kpi.iconBg}`}
+                    >
+                      <kpi.icon className={`size-5 ${kpi.iconColor}`} />
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+      </div>
+
+      {/* Search bar */}
+      <form onSubmit={handleSearch} className="mb-6">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder={t('filters.searchPlaceholder')}
+              value={buscaInput}
+              onChange={(e) => setBuscaInput(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Select
+              value={filtroStatusInput}
+              onValueChange={setFiltroStatusInput}
+            >
+              <SelectTrigger className="h-9 w-[140px] text-sm">
+                <SelectValue placeholder={t('filters.status')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="todos">
+                  {t('filters.allStatuses')}
+                </SelectItem>
+                <SelectItem value="aberta">{t('status.open')}</SelectItem>
+                <SelectItem value="em_andamento">
+                  {t('status.inProgress')}
+                </SelectItem>
+                <SelectItem value="concluida">
+                  {t('status.completed')}
+                </SelectItem>
+                <SelectItem value="cancelada">
+                  {t('status.cancelled')}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <Select value={filtroTipoInput} onValueChange={setFiltroTipoInput}>
+              <SelectTrigger className="h-9 w-[120px] text-sm">
+                <SelectValue placeholder={t('filters.type')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="todos">{t('filters.allTypes')}</SelectItem>
+                <SelectItem value="presencial">{t('type.inPerson')}</SelectItem>
+                <SelectItem value="online">{t('type.online')}</SelectItem>
+                <SelectItem value="hibrida">{t('type.hybrid')}</SelectItem>
+              </SelectContent>
+            </Select>
+            <Select
+              value={filtroCursoInput}
+              onValueChange={setFiltroCursoInput}
+            >
+              <SelectTrigger className="h-9 w-[160px] text-sm">
+                <SelectValue placeholder={t('filters.course')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="todos">{t('filters.allCourses')}</SelectItem>
+                {uniqueCursos.map((c) => (
+                  <SelectItem key={c} value={c}>
+                    {c}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {hasActiveFilters && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={clearFilters}
+                className="h-9 text-muted-foreground"
+              >
+                <X className="mr-1 size-3.5" /> {t('filters.clear')}
+              </Button>
+            )}
+            <Button type="submit" size="sm" className="h-9 gap-2">
+              <Search className="size-3.5" /> {t('filters.search')}
+            </Button>
+          </div>
+        </div>
+      </form>
+
+      {/* Cards grid */}
+      {loading ? (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Card key={i} className="overflow-hidden">
+              <CardContent className="p-5">
+                <Skeleton className="mb-3 h-5 w-3/4" />
+                <Skeleton className="mb-2 h-4 w-1/2" />
+                <Skeleton className="mb-4 h-2 w-full rounded-full" />
+                <div className="flex gap-2">
+                  <Skeleton className="h-6 w-20 rounded-full" />
+                  <Skeleton className="h-6 w-16 rounded-full" />
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      ) : filteredTurmas.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-20 text-center">
+          <Users className="mb-4 size-12 text-muted-foreground/40" />
+          <p className="text-lg font-medium">{t('empty.title')}</p>
+          <p className="mt-1 text-sm text-muted-foreground">
+            {t('empty.description')}
+          </p>
+          <Button className="mt-6 gap-2" onClick={openCreateSheet}>
+            <Plus className="size-4" />
+            {t('empty.action')}
+          </Button>
+        </div>
+      ) : (
+        <motion.div
+          className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
+          variants={stagger}
+          initial="hidden"
+          animate="show"
+        >
+          {paginatedTurmas.map((turma) => {
+            const ocupacao = Math.round(
+              (turma.matriculados / Math.max(turma.vagas, 1)) * 100
+            );
+            const TipoIcon = (TIPO_ICON[turma.tipo] || Monitor) as React.FC<{
+              className?: string;
+            }>;
+
+            return (
+              <motion.div key={turma.id} variants={fadeUp}>
+                <Card
+                  className="group relative cursor-pointer overflow-hidden border-0 shadow-sm transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
+                  onClick={() => handleCardClick(turma)}
+                  title={t('cards.tooltip')}
+                >
+                  {/* Top accent */}
+                  <div className="h-1 w-full bg-foreground" />
+
+                  <CardContent className="p-5">
+                    {/* Header with Icon + Title + Actions */}
+                    <div className="mb-4 flex items-start gap-3">
+                      {/* Type icon */}
+                      <div className="flex size-12 shrink-0 items-center justify-center rounded-xl bg-muted border">
+                        <TipoIcon className="size-6 text-foreground" />
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <div className="mb-1 flex items-start justify-between gap-2">
+                          <h3 className="line-clamp-2 font-semibold leading-snug text-foreground">
+                            {turma.curso}
+                          </h3>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="size-8 shrink-0 opacity-0 transition-opacity group-hover:opacity-100 -mr-2 -mt-1"
+                                onClick={(e) => e.stopPropagation()}
+                                aria-label={t('cards.actions.label')}
+                              >
+                                <MoreHorizontal className="size-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end" className="w-48">
+                              <DropdownMenuItem
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  router.push(`/turmas/${turma.id}`);
+                                }}
+                              >
+                                <Eye className="mr-2 size-4" />{' '}
+                                {t('cards.actions.viewDetails')}
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                onClick={(e) => openEditSheet(turma, e)}
+                              >
+                                <Pencil className="mr-2 size-4" />{' '}
+                                {t('cards.actions.edit')}
+                              </DropdownMenuItem>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem
+                                className="text-destructive focus:text-destructive"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setTurmaToDelete(turma);
+                                  setDeleteDialogOpen(true);
+                                }}
+                              >
+                                <Trash2 className="mr-2 size-4" />{' '}
+                                {t('cards.actions.delete')}
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                          <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px]">
+                            {turma.codigo}
+                          </code>
+                          <span className="mx-1.5 text-muted-foreground/50">
+                            |
+                          </span>
+                          <span>{turma.professor}</span>
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Badges */}
+                    <div className="mb-4 flex flex-wrap items-center gap-1.5">
+                      <Badge
+                        variant={STATUS_VARIANT[turma.status]}
+                        className="text-[11px]"
+                      >
+                        {t(`status.${turma.status}`)}
+                      </Badge>
+                      <span className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-medium border bg-muted text-foreground">
+                        <TipoIcon className="size-3" />
+                        {t(`type.${turma.tipo}`)}
+                      </span>
+                    </div>
+
+                    {/* Occupancy progress */}
+                    <div className="mb-4 rounded-lg bg-muted/40 p-3">
+                      <div className="mb-2 flex items-center justify-between text-sm">
+                        <span className="text-muted-foreground">
+                          {t('cards.occupancy')}
+                        </span>
+                        <span className="font-semibold">
+                          {turma.matriculados}/{turma.vagas}
+                        </span>
+                      </div>
+                      <div className="relative h-2 w-full overflow-hidden rounded-full bg-muted">
+                        <div
+                          className="h-full rounded-full transition-all duration-500 bg-foreground"
+                          style={{ width: `${Math.min(ocupacao, 100)}%` }}
+                        />
+                      </div>
+                      <div className="mt-1.5 flex justify-between text-[11px]">
+                        <span className="text-muted-foreground">
+                          {ocupacao}% {t('cards.occupied')}
+                        </span>
+                        <span className="font-medium text-foreground">
+                          {Math.max(turma.vagas - turma.matriculados, 0)}{' '}
+                          {t('cards.freeVacancies')}
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Date & time cards */}
+                    <div className="mb-4 grid grid-cols-2 gap-2">
+                      <div className="rounded-lg border bg-background p-2.5">
+                        <div className="mb-1 flex items-center gap-1.5 text-[11px] text-muted-foreground">
+                          <Calendar className="size-3" /> {t('cards.period')}
+                        </div>
+                        <p className="text-xs font-medium">
+                          {formatDate(turma.dataInicio)}
+                        </p>
+                        <p className="text-[11px] text-muted-foreground">
+                          {t('cards.until')} {formatDate(turma.dataFim)}
+                        </p>
+                      </div>
+                      <div className="rounded-lg border bg-background p-2.5">
+                        <div className="mb-1 flex items-center gap-1.5 text-[11px] text-muted-foreground">
+                          <Clock className="size-3" /> {t('cards.schedule')}
+                        </div>
+                        <p className="text-xs font-medium">{turma.horario}</p>
+                      </div>
+                    </div>
+
+                    {/* Footer stats */}
+                    <div className="flex items-center justify-between rounded-lg bg-muted/40 px-3 py-2.5">
+                      <div className="flex items-center gap-1.5">
+                        <Users className="size-4 text-muted-foreground" />
+                        <span className="text-sm font-medium">
+                          {turma.matriculados}
+                        </span>
+                        <span className="text-xs text-muted-foreground">
+                          {t('cards.enrolled')}
+                        </span>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+      )}
+
+      {/* Pagination footer */}
+      {!loading && filteredTurmas.length > 0 && (
+        <div className="mt-6 flex flex-col items-center justify-between gap-4 sm:flex-row">
+          <p className="text-sm text-muted-foreground">
+            {filteredTurmas.length}{' '}
+            {filteredTurmas.length === 1
+              ? t('pagination.class')
+              : t('pagination.classes')}{' '}
+            {filteredTurmas.length === 1
+              ? t('pagination.found')
+              : t('pagination.foundPlural')}
+          </p>
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => setCurrentPage(1)}
+              disabled={safePage === 1}
+              aria-label={t('pagination.firstPage')}
+            >
+              <ChevronsLeft className="size-4" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => setCurrentPage((p) => p - 1)}
+              disabled={safePage === 1}
+              aria-label={t('pagination.previousPage')}
+            >
+              <ChevronLeft className="size-4" />
+            </Button>
+            <span className="px-3 text-sm">
+              {t('pagination.page')}{' '}
+              <span className="font-semibold">{safePage}</span>{' '}
+              {t('pagination.of')}{' '}
+              <span className="font-semibold">{totalPages}</span>
+            </span>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => setCurrentPage((p) => p + 1)}
+              disabled={safePage === totalPages}
+              aria-label={t('pagination.nextPage')}
+            >
+              <ChevronRight className="size-4" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => setCurrentPage(totalPages)}
+              disabled={safePage === totalPages}
+              aria-label={t('pagination.lastPage')}
+            >
+              <ChevronsRight className="size-4" />
+            </Button>
+          </div>
+          <div className="flex items-center gap-2 text-sm">
+            <span className="text-muted-foreground">
+              {t('pagination.itemsPerPage')}
+            </span>
+            <Select
+              value={String(pageSize)}
+              onValueChange={(v) => {
+                setPageSize(Number(v));
+                setCurrentPage(1);
+              }}
+            >
+              <SelectTrigger className="h-8 w-16 text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {PAGE_SIZES.map((s) => (
+                  <SelectItem key={s} value={String(s)}>
+                    {s}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      )}
+
+      {/* Sheet */}
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetContent
+          side="right"
+          className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+        >
+          <SheetHeader className="shrink-0">
+            <SheetTitle>
+              {editingTurma ? t('form.title.edit') : t('form.title.create')}
+            </SheetTitle>
+            <SheetDescription>{t('form.description')}</SheetDescription>
+          </SheetHeader>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-1 flex-col px-4 gap-4 py-6"
+          >
+            <Field>
+              <FieldLabel htmlFor="codigo">
+                {t('form.fields.code.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
+              <Input
+                id="codigo"
+                placeholder={t('form.fields.code.placeholder')}
+                {...form.register('codigo')}
+              />
+              <FieldError>{form.formState.errors.codigo?.message}</FieldError>
+            </Field>
+            <Field>
+              <FieldLabel>
+                {t('form.fields.course.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
+              <Controller
+                name="curso"
+                control={form.control}
+                render={({ field }) => (
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <SelectTrigger>
+                      <SelectValue
+                        placeholder={t('form.fields.course.placeholder')}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {CURSOS.map((c) => (
+                        <SelectItem key={c} value={c}>
+                          {c}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+              <FieldError>{form.formState.errors.curso?.message}</FieldError>
+            </Field>
+            <div className="grid grid-cols-2 gap-4">
+              <Field>
+                <FieldLabel>
+                  {t('form.fields.type.label')}{' '}
+                  <span className="text-destructive">*</span>
+                </FieldLabel>
+                <Controller
+                  name="tipo"
+                  control={form.control}
+                  render={({ field }) => (
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="online">
+                          {t('type.online')}
+                        </SelectItem>
+                        <SelectItem value="presencial">
+                          {t('type.inPerson')}
+                        </SelectItem>
+                        <SelectItem value="hibrida">
+                          {t('type.hybrid')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+                <FieldError>{form.formState.errors.tipo?.message}</FieldError>
+              </Field>
+              <Field>
+                <FieldLabel>
+                  {t('form.fields.status.label')}{' '}
+                  <span className="text-destructive">*</span>
+                </FieldLabel>
+                <Controller
+                  name="status"
+                  control={form.control}
+                  render={({ field }) => (
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="aberta">
+                          {t('status.open')}
+                        </SelectItem>
+                        <SelectItem value="em_andamento">
+                          {t('status.inProgress')}
+                        </SelectItem>
+                        <SelectItem value="concluida">
+                          {t('status.completed')}
+                        </SelectItem>
+                        <SelectItem value="cancelada">
+                          {t('status.cancelled')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+                <FieldError>{form.formState.errors.status?.message}</FieldError>
+              </Field>
+            </div>
+            <Field>
+              <FieldLabel htmlFor="professor">
+                {t('form.fields.professor.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
+              <Input
+                id="professor"
+                placeholder={t('form.fields.professor.placeholder')}
+                {...form.register('professor')}
+              />
+              <FieldError>
+                {form.formState.errors.professor?.message}
+              </FieldError>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="vagas">
+                {t('form.fields.vacancies.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
+              <Input
+                id="vagas"
+                type="number"
+                min={1}
+                {...form.register('vagas')}
+              />
+              <FieldError>{form.formState.errors.vagas?.message}</FieldError>
+            </Field>
+            <div className="grid grid-cols-2 gap-4">
+              <Field>
+                <FieldLabel htmlFor="dataInicio">
+                  {t('form.fields.startDate.label')}{' '}
+                  <span className="text-destructive">*</span>
+                </FieldLabel>
+                <Input
+                  id="dataInicio"
+                  type="date"
+                  {...form.register('dataInicio')}
+                />
+                <FieldError>
+                  {form.formState.errors.dataInicio?.message}
+                </FieldError>
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="dataFim">
+                  {t('form.fields.endDate.label')}{' '}
+                  <span className="text-destructive">*</span>
+                </FieldLabel>
+                <Input id="dataFim" type="date" {...form.register('dataFim')} />
+                <FieldError>
+                  {form.formState.errors.dataFim?.message}
+                </FieldError>
+              </Field>
+            </div>
+            <Field>
+              <FieldLabel htmlFor="horario">
+                {t('form.fields.schedule.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
+              <Input
+                id="horario"
+                placeholder={t('form.fields.schedule.placeholder')}
+                {...form.register('horario')}
+              />
+              <FieldError>{form.formState.errors.horario?.message}</FieldError>
+            </Field>
+            <SheetFooter className="mt-auto shrink-0 gap-2 pt-4">
+              <Button type="submit" disabled={saving} className="gap-2">
+                {saving && <Loader2 className="size-4 animate-spin" />}
+                {editingTurma
+                  ? t('form.actions.save')
+                  : t('form.actions.create')}
+              </Button>
+            </SheetFooter>
+          </form>
+        </SheetContent>
+      </Sheet>
+
+      {/* Delete Dialog */}
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="size-5 text-destructive" />{' '}
+              {t('deleteDialog.title')}
+            </DialogTitle>
+            <DialogDescription>
+              {t('deleteDialog.description')}{' '}
+              <strong>{turmaToDelete?.codigo}</strong> — {turmaToDelete?.curso}?
+              {(turmaToDelete?.matriculados ?? 0) > 0 && (
+                <span className="mt-2 block rounded-md bg-destructive/10 p-2 text-sm text-destructive">
+                  {t('deleteDialog.warning', {
+                    count: turmaToDelete?.matriculados ?? 0,
+                  })}
+                </span>
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2">
+            <Button
+              variant="outline"
+              onClick={() => setDeleteDialogOpen(false)}
+            >
+              {t('deleteDialog.actions.cancel')}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={confirmDelete}
+              className="gap-2"
+            >
+              <Trash2 className="size-4" /> {t('deleteDialog.actions.delete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Page>
+  );
+}