@hed-hog/lms 0.0.261 → 0.0.265

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

@@ -0,0 +1,1130 @@
+'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,
+  FieldDescription,
+  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 { Switch } from '@/components/ui/switch';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { motion } from 'framer-motion';
+import {
+  AlertTriangle,
+  BarChart3,
+  BookOpen,
+  CheckCircle2,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  FileCheck,
+  FileQuestion,
+  GraduationCap,
+  LayoutDashboard,
+  ListChecks,
+  Loader2,
+  MoreHorizontal,
+  Pencil,
+  Play,
+  Plus,
+  Search,
+  Shuffle,
+  Target,
+  Timer,
+  Trash2,
+  TrendingUp,
+  Users,
+  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';
+
+// ── Nav ───────────────────────────────────────────────────────────────────────
+
+const NAV_ITEMS = [
+  { label: 'Dashboard', href: '/', icon: LayoutDashboard },
+  { label: 'Cursos', href: '/cursos', icon: BookOpen },
+  { label: 'Turmas', href: '/turmas', icon: Users },
+  { label: 'Exames', href: '/exames', icon: FileCheck },
+  { label: 'Formacoes', href: '/formacoes', icon: GraduationCap },
+  { label: 'Relatorios', href: '/relatorios', icon: BarChart3 },
+];
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface Exame {
+  id: number;
+  codigo: string;
+  titulo: string;
+  notaMinima: number;
+  limiteTempo: number;
+  shuffle: boolean;
+  status: 'publicado' | 'rascunho' | 'encerrado';
+  questoes: number;
+  realizacoes: number;
+  mediaNotas: number;
+  criadoEm: string;
+}
+
+// ── Schema ────────────────────────────────────────────────────────────────────
+
+const createExameSchema = (t: (key: string) => string) =>
+  z.object({
+    codigo: z.string().min(2, t('form.validation.codeMinLength')),
+    titulo: z.string().min(3, t('form.validation.titleMinLength')),
+    notaMinima: z.coerce
+      .number()
+      .min(0, t('form.validation.minScoreMin'))
+      .max(10, t('form.validation.minScoreMax')),
+    limiteTempo: z.coerce.number().min(1, t('form.validation.timeLimitMin')),
+    shuffle: z.boolean().default(false),
+    status: z.string().min(1, t('form.validation.statusRequired')),
+  });
+
+type ExameForm = z.infer<ReturnType<typeof createExameSchema>>;
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const STATUS_MAP: Record<
+  string,
+  { label: string; variant: 'default' | 'secondary' | 'outline' }
+> = {
+  publicado: { label: 'Publicado', variant: 'default' },
+  rascunho: { label: 'Rascunho', variant: 'secondary' },
+  encerrado: { label: 'Encerrado', variant: 'outline' },
+};
+
+const PAGE_SIZES = [6, 12, 24];
+
+function formatTempo(minutos: number) {
+  if (minutos < 60) return `${minutos}min`;
+  const h = Math.floor(minutos / 60);
+  const m = minutos % 60;
+  return m > 0 ? `${h}h ${m}min` : `${h}h`;
+}
+
+// ── Seed Data ─────────────────────────────────────────────────────────────────
+
+const initialExames: Exame[] = [
+  {
+    id: 1,
+    codigo: 'EX-001',
+    titulo: 'Prova Final - React Avancado',
+    notaMinima: 7,
+    limiteTempo: 120,
+    shuffle: true,
+    status: 'publicado',
+    questoes: 40,
+    realizacoes: 218,
+    mediaNotas: 7.8,
+    criadoEm: '2024-04-01',
+  },
+  {
+    id: 2,
+    codigo: 'EX-002',
+    titulo: 'Quiz - Fundamentos de UX',
+    notaMinima: 6,
+    limiteTempo: 30,
+    shuffle: true,
+    status: 'publicado',
+    questoes: 15,
+    realizacoes: 156,
+    mediaNotas: 8.2,
+    criadoEm: '2024-04-05',
+  },
+  {
+    id: 3,
+    codigo: 'EX-003',
+    titulo: 'Simulado - Scrum Master',
+    notaMinima: 7.5,
+    limiteTempo: 90,
+    shuffle: true,
+    status: 'publicado',
+    questoes: 60,
+    realizacoes: 287,
+    mediaNotas: 6.9,
+    criadoEm: '2024-03-20',
+  },
+  {
+    id: 4,
+    codigo: 'EX-004',
+    titulo: 'Trabalho Pratico - Python',
+    notaMinima: 7,
+    limiteTempo: 480,
+    shuffle: false,
+    status: 'publicado',
+    questoes: 5,
+    realizacoes: 145,
+    mediaNotas: 7.5,
+    criadoEm: '2024-05-01',
+  },
+  {
+    id: 5,
+    codigo: 'EX-005',
+    titulo: 'Prova Intermediaria - Node.js',
+    notaMinima: 6,
+    limiteTempo: 90,
+    shuffle: true,
+    status: 'publicado',
+    questoes: 30,
+    realizacoes: 134,
+    mediaNotas: 7.1,
+    criadoEm: '2024-04-15',
+  },
+  {
+    id: 6,
+    codigo: 'EX-006',
+    titulo: 'Quiz - Marketing de Conteudo',
+    notaMinima: 5,
+    limiteTempo: 20,
+    shuffle: true,
+    status: 'rascunho',
+    questoes: 10,
+    realizacoes: 0,
+    mediaNotas: 0,
+    criadoEm: '2024-05-10',
+  },
+  {
+    id: 7,
+    codigo: 'EX-007',
+    titulo: 'Prova Final - TypeScript',
+    notaMinima: 7,
+    limiteTempo: 120,
+    shuffle: true,
+    status: 'publicado',
+    questoes: 45,
+    realizacoes: 178,
+    mediaNotas: 7.3,
+    criadoEm: '2024-06-01',
+  },
+  {
+    id: 8,
+    codigo: 'EX-008',
+    titulo: 'Trabalho - Design System',
+    notaMinima: 8,
+    limiteTempo: 960,
+    shuffle: false,
+    status: 'encerrado',
+    questoes: 3,
+    realizacoes: 82,
+    mediaNotas: 8.5,
+    criadoEm: '2024-02-15',
+  },
+  {
+    id: 9,
+    codigo: 'EX-009',
+    titulo: 'Simulado - Excel Avancado',
+    notaMinima: 6,
+    limiteTempo: 60,
+    shuffle: true,
+    status: 'encerrado',
+    questoes: 25,
+    realizacoes: 498,
+    mediaNotas: 7.7,
+    criadoEm: '2024-01-20',
+  },
+  {
+    id: 10,
+    codigo: 'EX-010',
+    titulo: 'Quiz - Lideranca Situacional',
+    notaMinima: 6,
+    limiteTempo: 25,
+    shuffle: true,
+    status: 'publicado',
+    questoes: 12,
+    realizacoes: 67,
+    mediaNotas: 8.0,
+    criadoEm: '2024-05-20',
+  },
+];
+
+// ── Animations ────────────────────────────────────────────────────────────────
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 16 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.3 } } as const,
+};
+const stagger = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.05 } },
+};
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+export default function ExamesPage() {
+  const t = useTranslations('lms.ExamsPage');
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const exameSchema = useMemo(() => createExameSchema(t), [t]);
+
+  const [loading, setLoading] = useState(true);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [exames, setExames] = useState<Exame[]>(initialExames);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [editingExame, setEditingExame] = useState<Exame | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [exameToDelete, setExameToDelete] = useState<Exame | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  // Search/filter inputs
+  const [buscaInput, setBuscaInput] = useState('');
+  const [filtroStatusInput, setFiltroStatusInput] = useState('todos');
+
+  // Applied filters
+  const [buscaApplied, setBuscaApplied] = useState('');
+  const [filtroStatusApplied, setFiltroStatusApplied] = 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<ExameForm>({
+    resolver: zodResolver(exameSchema),
+    defaultValues: {
+      codigo: '',
+      titulo: '',
+      notaMinima: 7,
+      limiteTempo: 60,
+      shuffle: true,
+      status: 'rascunho',
+    },
+  });
+
+  useEffect(() => {
+    const t = setTimeout(() => setLoading(false), 700);
+    return () => clearTimeout(t);
+  }, []);
+
+  // ── Filtering ────────────────────────────────────────────────────────────
+
+  const filteredExames = useMemo(
+    () =>
+      exames.filter((e) => {
+        const q = buscaApplied.toLowerCase();
+        return (
+          (!q ||
+            e.titulo.toLowerCase().includes(q) ||
+            e.codigo.toLowerCase().includes(q)) &&
+          (filtroStatusApplied === 'todos' || e.status === filtroStatusApplied)
+        );
+      }),
+    [exames, buscaApplied, filtroStatusApplied]
+  );
+
+  const totalPages = Math.max(1, Math.ceil(filteredExames.length / pageSize));
+  const safePage = Math.min(currentPage, totalPages);
+  const paginatedExames = filteredExames.slice(
+    (safePage - 1) * pageSize,
+    safePage * pageSize
+  );
+
+  function handleSearch(e: React.FormEvent) {
+    e.preventDefault();
+    setBuscaApplied(buscaInput);
+    setFiltroStatusApplied(filtroStatusInput);
+    setCurrentPage(1);
+  }
+
+  function clearFilters() {
+    setBuscaInput('');
+    setFiltroStatusInput('todos');
+    setBuscaApplied('');
+    setFiltroStatusApplied('todos');
+    setCurrentPage(1);
+  }
+
+  const hasActiveFilters = buscaApplied || filtroStatusApplied !== 'todos';
+
+  // ── Double-click ──────────────────────────────────────────────────────────
+
+  function handleCardClick(exame: Exame) {
+    const existing = clickTimers.current.get(exame.id);
+    if (existing) {
+      clearTimeout(existing);
+      clickTimers.current.delete(exame.id);
+      router.push(`/exames/${exame.id}/questoes`);
+    } else {
+      const t = setTimeout(() => clickTimers.current.delete(exame.id), 300);
+      clickTimers.current.set(exame.id, t);
+    }
+  }
+
+  // ── CRUD ──────────────────────────────────────────────────────────────────
+
+  function openCreateSheet() {
+    setEditingExame(null);
+    form.reset({
+      codigo: '',
+      titulo: '',
+      notaMinima: 7,
+      limiteTempo: 60,
+      shuffle: true,
+      status: 'rascunho',
+    });
+    setSheetOpen(true);
+  }
+
+  function openEditSheet(exame: Exame, e?: React.MouseEvent) {
+    e?.stopPropagation();
+    setEditingExame(exame);
+    form.reset({
+      codigo: exame.codigo,
+      titulo: exame.titulo,
+      notaMinima: exame.notaMinima,
+      limiteTempo: exame.limiteTempo,
+      shuffle: exame.shuffle,
+      status: exame.status,
+    });
+    setSheetOpen(true);
+  }
+
+  async function onSubmit(data: ExameForm) {
+    setSaving(true);
+    await new Promise((r) => setTimeout(r, 500));
+    if (editingExame) {
+      setExames((prev) =>
+        prev.map((e) =>
+          e.id === editingExame.id
+            ? { ...e, ...data, status: data.status as Exame['status'] }
+            : e
+        )
+      );
+      toast.success(t('toasts.examUpdated'));
+    } else {
+      const newExame: Exame = {
+        id: Date.now(),
+        ...data,
+        status: data.status as Exame['status'],
+        questoes: 0,
+        realizacoes: 0,
+        mediaNotas: 0,
+        criadoEm: new Date().toISOString().split('T')[0] || '',
+      };
+      setExames((prev) => [newExame, ...prev]);
+      toast.success(t('toasts.examCreated'));
+      setSaving(false);
+      setSheetOpen(false);
+      setTimeout(() => router.push(`/exames/${newExame.id}/questoes`), 400);
+      return;
+    }
+    setSaving(false);
+    setSheetOpen(false);
+  }
+
+  function confirmDelete() {
+    if (!exameToDelete) return;
+    setExames((prev) => prev.filter((e) => e.id !== exameToDelete.id));
+    toast.success(t('toasts.examRemoved'));
+    setExameToDelete(null);
+    setDeleteDialogOpen(false);
+  }
+
+  // ── KPIs ──────────────────────────────────────────────────────────────────
+
+  const STATUS_MAP: Record<
+    string,
+    { label: string; variant: 'default' | 'secondary' | 'outline' }
+  > = {
+    publicado: { label: t('status.published'), variant: 'default' },
+    rascunho: { label: t('status.draft'), variant: 'secondary' },
+    encerrado: { label: t('status.closed'), variant: 'outline' },
+  };
+
+  const totalQuestoes = exames.reduce((a, e) => a + e.questoes, 0);
+  const mediaGeral =
+    exames
+      .filter((e) => e.mediaNotas > 0)
+      .reduce((a, e) => a + e.mediaNotas, 0) /
+    Math.max(exames.filter((e) => e.mediaNotas > 0).length, 1);
+
+  const kpis = [
+    {
+      label: t('kpis.totalExams.label'),
+      valor: exames.length,
+      sub: t('kpis.totalExams.sub'),
+      icon: FileCheck,
+      iconBg: 'bg-orange-100',
+      iconColor: 'text-orange-600',
+    },
+    {
+      label: t('kpis.published.label'),
+      valor: exames.filter((e) => e.status === 'publicado').length,
+      sub: t('kpis.published.sub'),
+      icon: CheckCircle2,
+      iconBg: 'bg-muted',
+      iconColor: 'text-foreground',
+    },
+    {
+      label: t('kpis.totalQuestions.label'),
+      valor: totalQuestoes.toLocaleString('pt-BR'),
+      sub: t('kpis.totalQuestions.sub'),
+      icon: FileQuestion,
+      iconBg: 'bg-muted',
+      iconColor: 'text-foreground',
+    },
+    {
+      label: t('kpis.avgScore.label'),
+      valor: mediaGeral.toFixed(1),
+      sub: t('kpis.avgScore.sub'),
+      icon: TrendingUp,
+      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.exams'),
+          },
+        ]}
+        actions={
+          <Button onClick={openCreateSheet} className="shrink-0 gap-2">
+            <Plus className="size-4" /> {t('actions.createExam')}
+          </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="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="todos">
+                  {t('filters.allStatuses')}
+                </SelectItem>
+                <SelectItem value="publicado">
+                  {t('status.published')}
+                </SelectItem>
+                <SelectItem value="rascunho">{t('status.draft')}</SelectItem>
+                <SelectItem value="encerrado">{t('status.closed')}</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-20 rounded-full" />
+                <Skeleton className="mb-1.5 h-5 w-3/4" />
+                <Skeleton className="mb-4 h-4 w-1/2" />
+                <div className="flex gap-4">
+                  <Skeleton className="h-4 w-16" />
+                  <Skeleton className="h-4 w-16" />
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      ) : filteredExames.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-20 text-center">
+          <FileCheck 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"
+        >
+          {paginatedExames.map((exame) => {
+            const notaColor =
+              exame.mediaNotas >= exame.notaMinima
+                ? 'text-emerald-600'
+                : exame.mediaNotas > 0
+                  ? 'text-red-600'
+                  : 'text-muted-foreground';
+
+            return (
+              <motion.div key={exame.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(exame)}
+                  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">
+                      {/* Exam icon */}
+                      <div className="flex size-12 shrink-0 items-center justify-center rounded-xl bg-muted border">
+                        <FileCheck 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">
+                            {exame.titulo}
+                          </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-52">
+                              <DropdownMenuItem
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  router.push(`/exames/${exame.id}/questoes`);
+                                }}
+                              >
+                                <ListChecks className="mr-2 size-4" />{' '}
+                                {t('cards.actions.manageQuestions')}
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  router.push(`/exames/${exame.id}/tentativa`);
+                                }}
+                              >
+                                <Play className="mr-2 size-4" />{' '}
+                                {t('cards.actions.testExam')}
+                              </DropdownMenuItem>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem
+                                onClick={(e) => openEditSheet(exame, e)}
+                              >
+                                <Pencil className="mr-2 size-4" />{' '}
+                                {t('cards.actions.edit')}
+                              </DropdownMenuItem>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem
+                                className="text-destructive focus:text-destructive"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setExameToDelete(exame);
+                                  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]">
+                            {exame.codigo}
+                          </code>
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Badges */}
+                    <div className="mb-4 flex flex-wrap items-center gap-1.5">
+                      <Badge
+                        variant={STATUS_MAP[exame.status]?.variant || 'default'}
+                        className="text-[11px]"
+                      >
+                        {STATUS_MAP[exame.status]?.label}
+                      </Badge>
+                      {exame.shuffle && (
+                        <span className="inline-flex items-center gap-1 rounded-full bg-muted border px-2.5 py-0.5 text-[11px] font-medium text-foreground">
+                          <Shuffle className="size-3" />{' '}
+                          {t('cards.randomLabel')}
+                        </span>
+                      )}
+                    </div>
+
+                    {/* Stats grid */}
+                    <div className="mb-4 grid grid-cols-2 gap-2">
+                      <div className="rounded-xl border bg-muted/40 p-3 text-center">
+                        <div className="mb-1 flex items-center justify-center gap-1 text-[11px] text-muted-foreground">
+                          <FileQuestion className="size-3" />{' '}
+                          {t('cards.questionsLabel')}
+                        </div>
+                        <p className="text-2xl font-bold text-foreground">
+                          {exame.questoes}
+                        </p>
+                      </div>
+                      <div className="rounded-xl border bg-muted/40 p-3 text-center">
+                        <div className="mb-1 flex items-center justify-center gap-1 text-[11px] text-muted-foreground">
+                          <Users className="size-3" />{' '}
+                          {t('cards.completionsLabel')}
+                        </div>
+                        <p className="text-2xl font-bold text-foreground">
+                          {exame.realizacoes.toLocaleString('pt-BR')}
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Time and score info */}
+                    <div className="mb-4 grid grid-cols-2 gap-2">
+                      <div className="flex items-center gap-2 rounded-lg bg-muted/40 px-3 py-2">
+                        <Timer className="size-4 text-muted-foreground" />
+                        <div>
+                          <p className="text-[11px] text-muted-foreground">
+                            {t('cards.durationLabel')}
+                          </p>
+                          <p className="text-xs font-semibold">
+                            {formatTempo(exame.limiteTempo)}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2 rounded-lg bg-muted/40 px-3 py-2">
+                        <Target className="size-4 text-muted-foreground" />
+                        <div>
+                          <p className="text-[11px] text-muted-foreground">
+                            {t('cards.minScoreLabel')}
+                          </p>
+                          <p className="text-xs font-semibold">
+                            {exame.notaMinima}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Average score footer */}
+                    {exame.realizacoes > 0 && (
+                      <div className="flex items-center justify-between rounded-lg bg-muted/40 px-3 py-2.5 border">
+                        <span className="text-xs text-muted-foreground">
+                          {t('cards.avgScoreLabel')}
+                        </span>
+                        <span
+                          className={`text-lg font-bold ${
+                            exame.mediaNotas >= exame.notaMinima
+                              ? 'text-foreground'
+                              : 'text-muted-foreground'
+                          }`}
+                        >
+                          {exame.mediaNotas.toFixed(1)}
+                        </span>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+      )}
+
+      {/* Pagination footer */}
+      {!loading && filteredExames.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">
+            {filteredExames.length}{' '}
+            {filteredExames.length !== 1
+              ? t('pagination.examsPlural')
+              : t('pagination.exams')}{' '}
+            {filteredExames.length !== 1
+              ? t('pagination.foundPlural')
+              : t('pagination.found')}
+          </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>
+              {editingExame ? t('form.title.edit') : t('form.title.create')}
+            </SheetTitle>
+            <SheetDescription>
+              {editingExame
+                ? t('form.description.edit')
+                : t('form.description.create')}
+            </SheetDescription>
+          </SheetHeader>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-1 flex-col 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 htmlFor="titulo">
+                {t('form.fields.title.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
+              <Input
+                id="titulo"
+                placeholder={t('form.fields.title.placeholder')}
+                {...form.register('titulo')}
+              />
+              <FieldError>{form.formState.errors.titulo?.message}</FieldError>
+            </Field>
+            <div className="grid grid-cols-2 gap-4">
+              <Field>
+                <FieldLabel htmlFor="notaMinima">
+                  {t('form.fields.minScore.label')}{' '}
+                  <span className="text-destructive">*</span>
+                </FieldLabel>
+                <Input
+                  id="notaMinima"
+                  type="number"
+                  min={0}
+                  max={10}
+                  step={0.5}
+                  {...form.register('notaMinima')}
+                />
+                <FieldDescription>
+                  {t('form.fields.minScore.description')}
+                </FieldDescription>
+                <FieldError>
+                  {form.formState.errors.notaMinima?.message}
+                </FieldError>
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="limiteTempo">
+                  {t('form.fields.timeLimit.label')}{' '}
+                  <span className="text-destructive">*</span>
+                </FieldLabel>
+                <Input
+                  id="limiteTempo"
+                  type="number"
+                  min={1}
+                  {...form.register('limiteTempo')}
+                />
+                <FieldDescription>
+                  {t('form.fields.timeLimit.description')}
+                </FieldDescription>
+                <FieldError>
+                  {form.formState.errors.limiteTempo?.message}
+                </FieldError>
+              </Field>
+            </div>
+            <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="rascunho">
+                        {t('status.draft')}
+                      </SelectItem>
+                      <SelectItem value="publicado">
+                        {t('status.published')}
+                      </SelectItem>
+                      <SelectItem value="encerrado">
+                        {t('status.closed')}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+              <FieldError>{form.formState.errors.status?.message}</FieldError>
+            </Field>
+            <label className="flex cursor-pointer items-center justify-between rounded-lg border p-3 hover:bg-muted">
+              <div>
+                <p className="text-sm font-medium">
+                  {t('form.fields.shuffle.label')}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {t('form.fields.shuffle.description')}
+                </p>
+              </div>
+              <Controller
+                name="shuffle"
+                control={form.control}
+                render={({ field }) => (
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                )}
+              />
+            </label>
+            <SheetFooter className="mt-auto shrink-0 gap-2 pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setSheetOpen(false)}
+                disabled={saving}
+              >
+                {t('form.actions.cancel')}
+              </Button>
+              <Button type="submit" disabled={saving} className="gap-2">
+                {saving && <Loader2 className="size-4 animate-spin" />}
+                {editingExame
+                  ? 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>{exameToDelete?.titulo}</strong>?
+              {(exameToDelete?.realizacoes ?? 0) > 0 && (
+                <span className="mt-2 block rounded-md bg-destructive/10 p-2 text-sm text-destructive">
+                  {t('deleteDialog.warning', {
+                    count: exameToDelete?.realizacoes ?? 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>
+  );
+}