@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -5,6 +5,8 @@ import {
   Page,
   PageHeader,
   PaginationFooter,
+  SearchBar,
+  ViewModeToggle,
 } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -31,6 +33,7 @@ import {
   FieldLabel,
 } from '@/components/ui/field';
 import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import {
   Select,
   SelectContent,
@@ -48,50 +51,42 @@ import {
 } from '@/components/ui/sheet';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { usePersistedViewMode } from '@/hooks/use-persisted-view-mode';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { motion } from 'framer-motion';
 import {
   AlertTriangle,
-  BarChart3,
-  BookOpen,
   CheckCircle2,
   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 { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
+import { Controller, useForm, useWatch } 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 {
@@ -106,13 +101,56 @@ interface Exame {
   realizacoes: number;
   mediaNotas: number;
   criadoEm: string;
+  primaryColor?: string | null;
+  secondaryColor?: string | null;
 }
 
+type ApiExame = {
+  id: number;
+  code: string;
+  title: string;
+  minScore: number;
+  timeLimit: number;
+  shuffle: boolean;
+  status: 'published' | 'draft' | 'closed' | 'archived';
+  questions: number;
+  attempts: number;
+  averageScore: number;
+  primaryColor?: string | null;
+  primaryContrastColor?: string | null;
+  secondaryColor?: string | null;
+  secondaryContrastColor?: string | null;
+  createdAt: string;
+};
+
+type ApiExameList = {
+  data: ApiExame[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage: number;
+};
+
+type ApiExameStats = {
+  totalExams: number;
+  publishedExams: number;
+  totalQuestions: number;
+  overallAverage: number;
+};
+type ViewMode = 'cards' | 'list';
+
+type Locale = {
+  id?: number;
+  code: string;
+  name: string;
+};
+
+const API_EXAMS_CACHE_KEY = 'lms:exams:api-cache';
+
 // ── 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()
@@ -121,20 +159,57 @@ const createExameSchema = (t: (key: string) => string) =>
     limiteTempo: z.coerce.number().min(1, t('form.validation.timeLimitMin')),
     shuffle: z.boolean().default(false),
     status: z.string().min(1, t('form.validation.statusRequired')),
+    primaryColor: z
+      .string()
+      .regex(/^#([0-9A-Fa-f]{6})$/, 'Cor primaria invalida')
+      .default('#1D4ED8'),
+    secondaryColor: z
+      .string()
+      .regex(/^#([0-9A-Fa-f]{6})$/, 'Cor secundaria invalida')
+      .default('#111827'),
   });
 
 type ExameForm = z.infer<ReturnType<typeof createExameSchema>>;
 
-// ── Constants ─────────────────────────────────────────────────────────────────
+function toApiStatus(status: string) {
+  if (status === 'publicado') return 'published';
+  if (status === 'rascunho') return 'draft';
+  if (status === 'encerrado') return 'closed';
+  return status;
+}
 
-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' },
-};
+function toPtStatus(status: ApiExame['status']): Exame['status'] {
+  if (status === 'published') return 'publicado';
+  if (status === 'draft') return 'rascunho';
+  return 'encerrado';
+}
+
+function mapApiExame(exame: ApiExame): Exame {
+  return {
+    id: exame.id,
+    codigo: exame.code,
+    titulo: exame.title,
+    notaMinima: exame.minScore,
+    limiteTempo: exame.timeLimit,
+    shuffle: exame.shuffle,
+    status: toPtStatus(exame.status),
+    questoes: exame.questions,
+    realizacoes: exame.attempts,
+    mediaNotas: exame.averageScore,
+    criadoEm: exame.createdAt,
+    primaryColor: exame.primaryColor ?? null,
+    secondaryColor: exame.secondaryColor ?? null,
+  };
+}
+
+function toNumberOrFallback(value: unknown, fallback: number) {
+  if (typeof value === 'string' && value.trim() === '') return fallback;
+
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+// ── Constants ─────────────────────────────────────────────────────────────────
 
 const PAGE_SIZES = [6, 12, 24];
 
@@ -145,141 +220,6 @@ function formatTempo(minutos: number) {
   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 = {
@@ -295,27 +235,29 @@ const stagger = {
 
 export default function ExamesPage() {
   const t = useTranslations('lms.ExamsPage');
-  const pathname = usePathname();
   const router = useRouter();
+  const { request } = useApp();
 
   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);
+  const [cachedExameList, setCachedExameList] = useState<ApiExameList | null>(
+    null
+  );
 
   // Search/filter inputs
   const [buscaInput, setBuscaInput] = useState('');
   const [filtroStatusInput, setFiltroStatusInput] = useState('todos');
-
-  // Applied filters
-  const [buscaApplied, setBuscaApplied] = useState('');
-  const [filtroStatusApplied, setFiltroStatusApplied] = useState('todos');
+  const [debouncedBuscaInput, setDebouncedBuscaInput] = useState('');
+  const [viewMode, setViewMode] = usePersistedViewMode<ViewMode>({
+    storageKey: 'lms:exams:view-mode',
+    defaultValue: 'cards',
+    allowedValues: ['cards', 'list'],
+  });
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
@@ -329,59 +271,150 @@ export default function ExamesPage() {
   const form = useForm<ExameForm>({
     resolver: zodResolver(exameSchema),
     defaultValues: {
-      codigo: '',
       titulo: '',
       notaMinima: 7,
       limiteTempo: 60,
       shuffle: true,
       status: 'rascunho',
+      primaryColor: '#1D4ED8',
+      secondaryColor: '#111827',
+    },
+  });
+  const watchedFormValues = useWatch({ control: form.control });
+
+  const {
+    data: exameList,
+    isLoading,
+    isFetching,
+    refetch: refetchExams,
+  } = useQuery<ApiExameList>({
+    queryKey: [
+      'lms-exams',
+      currentPage,
+      pageSize,
+      debouncedBuscaInput,
+      filtroStatusInput,
+    ],
+    queryFn: async () => {
+      const response = await request<ApiExameList>({
+        url: '/lms/exams',
+        method: 'GET',
+        params: {
+          page: currentPage,
+          pageSize,
+          ...(debouncedBuscaInput ? { search: debouncedBuscaInput } : {}),
+          ...(filtroStatusInput !== 'todos'
+            ? { status: toApiStatus(filtroStatusInput) }
+            : {}),
+        },
+      });
+      return response.data;
+    },
+  });
+
+  const { data: statsData, refetch: refetchStats } = useQuery<ApiExameStats>({
+    queryKey: ['lms-exams-stats'],
+    queryFn: async () => {
+      const response = await request<ApiExameStats>({
+        url: '/lms/exams/stats',
+        method: 'GET',
+      });
+      return response.data;
     },
   });
 
   useEffect(() => {
-    const t = setTimeout(() => setLoading(false), 700);
-    return () => clearTimeout(t);
+    if (typeof window === 'undefined') return;
+    try {
+      const raw = window.localStorage.getItem(API_EXAMS_CACHE_KEY);
+      if (!raw) return;
+      const parsed = JSON.parse(raw) as ApiExameList;
+      if (parsed && Array.isArray(parsed.data)) setCachedExameList(parsed);
+    } catch {
+      setCachedExameList(null);
+    }
   }, []);
 
-  // ── 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]
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (!exameList) return;
+    window.localStorage.setItem(API_EXAMS_CACHE_KEY, JSON.stringify(exameList));
+    setCachedExameList(exameList);
+  }, [exameList]);
+
+  const effectiveExameList = exameList ?? cachedExameList;
+  const initialLoading = isLoading && !effectiveExameList;
+  const cardsRefreshing = isFetching && !!effectiveExameList;
+
+  const exames = useMemo(
+    () => (effectiveExameList?.data ?? []).map((item) => mapApiExame(item)),
+    [effectiveExameList]
   );
+  const previewExame = useMemo(() => {
+    if (!sheetOpen || !editingExame) return null;
 
-  const totalPages = Math.max(1, Math.ceil(filteredExames.length / pageSize));
+    return {
+      ...editingExame,
+      titulo: watchedFormValues.titulo ?? editingExame.titulo,
+      notaMinima: toNumberOrFallback(
+        watchedFormValues.notaMinima,
+        editingExame.notaMinima
+      ),
+      limiteTempo: toNumberOrFallback(
+        watchedFormValues.limiteTempo,
+        editingExame.limiteTempo
+      ),
+      shuffle: watchedFormValues.shuffle ?? editingExame.shuffle,
+      status:
+        (watchedFormValues.status as Exame['status'] | undefined) ??
+        editingExame.status,
+      primaryColor: watchedFormValues.primaryColor ?? editingExame.primaryColor,
+      secondaryColor:
+        watchedFormValues.secondaryColor ?? editingExame.secondaryColor,
+    } satisfies Exame;
+  }, [editingExame, sheetOpen, watchedFormValues]);
+  const totalPages = Math.max(1, effectiveExameList?.lastPage ?? 1);
   const safePage = Math.min(currentPage, totalPages);
-  const paginatedExames = filteredExames.slice(
-    (safePage - 1) * pageSize,
-    safePage * pageSize
-  );
+  const paginatedExames = useMemo(() => {
+    if (!previewExame) return exames;
+
+    return exames.map((exame) =>
+      exame.id === previewExame.id ? previewExame : exame
+    );
+  }, [exames, previewExame]);
+
+  useEffect(() => {
+    if (currentPage > totalPages) {
+      setCurrentPage(totalPages);
+    }
+  }, [currentPage, totalPages]);
 
-  function handleSearch(e: React.FormEvent) {
-    e.preventDefault();
-    setBuscaApplied(buscaInput);
-    setFiltroStatusApplied(filtroStatusInput);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedBuscaInput(buscaInput.trim());
+    }, 350);
+
+    return () => clearTimeout(timer);
+  }, [buscaInput]);
+
+  useEffect(() => {
     setCurrentPage(1);
-  }
+  }, [debouncedBuscaInput, filtroStatusInput]);
 
   function clearFilters() {
     setBuscaInput('');
     setFiltroStatusInput('todos');
-    setBuscaApplied('');
-    setFiltroStatusApplied('todos');
+    setDebouncedBuscaInput('');
     setCurrentPage(1);
   }
 
-  const hasActiveFilters = buscaApplied || filtroStatusApplied !== 'todos';
+  const hasActiveFilters = buscaInput || filtroStatusInput !== 'todos';
+
+  function openDeleteDialog(exame: Exame, e: React.MouseEvent) {
+    e.stopPropagation();
+    setExameToDelete(exame);
+    setDeleteDialogOpen(true);
+  }
 
   // ── Double-click ──────────────────────────────────────────────────────────
 
@@ -402,12 +435,13 @@ export default function ExamesPage() {
   function openCreateSheet() {
     setEditingExame(null);
     form.reset({
-      codigo: '',
       titulo: '',
       notaMinima: 7,
       limiteTempo: 60,
       shuffle: true,
       status: 'rascunho',
+      primaryColor: '#1D4ED8',
+      secondaryColor: '#111827',
     });
     setSheetOpen(true);
   }
@@ -416,55 +450,71 @@ export default function ExamesPage() {
     e?.stopPropagation();
     setEditingExame(exame);
     form.reset({
-      codigo: exame.codigo,
       titulo: exame.titulo,
       notaMinima: exame.notaMinima,
       limiteTempo: exame.limiteTempo,
       shuffle: exame.shuffle,
       status: exame.status,
+      primaryColor: exame.primaryColor ?? '#1D4ED8',
+      secondaryColor: exame.secondaryColor ?? '#111827',
     });
     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] || '',
+    try {
+      const payload = {
+        title: data.titulo,
+        minScore: data.notaMinima,
+        timeLimit: data.limiteTempo,
+        shuffle: data.shuffle,
+        status: toApiStatus(data.status),
+        primaryColor: data.primaryColor,
+        secondaryColor: data.secondaryColor,
       };
-      setExames((prev) => [newExame, ...prev]);
-      toast.success(t('toasts.examCreated'));
-      setSaving(false);
+
+      if (editingExame) {
+        await request({
+          url: `/lms/exams/${editingExame.id}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        toast.success(t('toasts.examUpdated'));
+      } else {
+        const response = await request<ApiExame>({
+          url: '/lms/exams',
+          method: 'POST',
+          data: payload,
+        });
+        toast.success(t('toasts.examCreated'));
+        if (response.data?.id) {
+          setTimeout(
+            () => router.push(`/lms/exams/${response.data.id}/questions`),
+            400
+          );
+        }
+      }
+
+      await Promise.all([refetchExams(), refetchStats()]);
       setSheetOpen(false);
-      setTimeout(() => router.push(`/lms/exams/${newExame.id}/questions`), 400);
-      return;
+    } finally {
+      setSaving(false);
     }
-    setSaving(false);
-    setSheetOpen(false);
   }
 
-  function confirmDelete() {
+  async function confirmDelete() {
     if (!exameToDelete) return;
-    setExames((prev) => prev.filter((e) => e.id !== exameToDelete.id));
+
+    await request({
+      url: `/lms/exams/${exameToDelete.id}`,
+      method: 'DELETE',
+    });
+
     toast.success(t('toasts.examRemoved'));
     setExameToDelete(null);
     setDeleteDialogOpen(false);
+    await Promise.all([refetchExams(), refetchStats()]);
   }
 
   // ── KPIs ──────────────────────────────────────────────────────────────────
@@ -478,48 +528,62 @@ export default function ExamesPage() {
     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'),
+      key: 'total-exams',
+      title: t('kpis.totalExams.label'),
+      value: statsData?.totalExams ?? effectiveExameList?.total ?? 0,
+      description: t('kpis.totalExams.sub'),
       icon: FileCheck,
-      iconBg: 'bg-orange-100',
-      iconColor: 'text-orange-600',
+      layout: 'compact' as const,
+      accentClassName: 'from-orange-500/25 via-amber-500/15 to-transparent',
+      iconContainerClassName: 'bg-orange-100 text-orange-700',
     },
     {
-      label: t('kpis.published.label'),
-      valor: exames.filter((e) => e.status === 'publicado').length,
-      sub: t('kpis.published.sub'),
+      key: 'published-exams',
+      title: t('kpis.published.label'),
+      value: statsData?.publishedExams ?? 0,
+      description: t('kpis.published.sub'),
       icon: CheckCircle2,
-      iconBg: 'bg-muted',
-      iconColor: 'text-foreground',
+      layout: 'compact' as const,
+      accentClassName: 'from-sky-500/25 via-blue-500/15 to-transparent',
+      iconContainerClassName: 'bg-sky-100 text-sky-700',
     },
     {
-      label: t('kpis.totalQuestions.label'),
-      valor: totalQuestoes.toLocaleString('pt-BR'),
-      sub: t('kpis.totalQuestions.sub'),
+      key: 'total-questions',
+      title: t('kpis.totalQuestions.label'),
+      value: (statsData?.totalQuestions ?? 0).toLocaleString('pt-BR'),
+      description: t('kpis.totalQuestions.sub'),
       icon: FileQuestion,
-      iconBg: 'bg-muted',
-      iconColor: 'text-foreground',
+      layout: 'compact' as const,
+      accentClassName: 'from-emerald-500/25 via-green-500/15 to-transparent',
+      iconContainerClassName: 'bg-emerald-100 text-emerald-700',
     },
     {
-      label: t('kpis.avgScore.label'),
-      valor: mediaGeral.toFixed(1),
-      sub: t('kpis.avgScore.sub'),
+      key: 'avg-score',
+      title: t('kpis.avgScore.label'),
+      value: Number(statsData?.overallAverage ?? 0).toFixed(1),
+      description: t('kpis.avgScore.sub'),
       icon: TrendingUp,
-      iconBg: 'bg-muted',
-      iconColor: 'text-foreground',
+      layout: 'compact' as const,
+      accentClassName: 'from-pink-500/25 via-rose-500/15 to-transparent',
+      iconContainerClassName: 'bg-pink-100 text-pink-700',
     },
   ];
 
+  const { locales } = useApp();
+
+  const handleNewExam = (): void => {
+    const nextLocaleData: Record<string, { name: string }> = {};
+    locales.forEach((locale: Locale) => {
+      nextLocaleData[locale.code] = {
+        name: '',
+      };
+    });
+    void nextLocaleData;
+    openCreateSheet();
+  };
+
   // ── Render ────────────────────────────────────────────────────────────────
 
   return (
@@ -536,329 +600,464 @@ export default function ExamesPage() {
             label: t('breadcrumbs.exams'),
           },
         ]}
-        actions={
-          <Button onClick={openCreateSheet} className="shrink-0 gap-2">
-            <Plus className="size-4" /> {t('actions.createExam')}
-          </Button>
-        }
+        actions={[
+          {
+            label: t('actions.createExam'),
+            onClick: () => handleNewExam(),
+            variant: 'default',
+          },
+        ]}
       />
 
       {/* KPIs */}
-      <div className="mb-6 grid grid-cols-2 gap-4 lg:grid-cols-4">
-        {loading
-          ? Array.from({ length: 4 }).map((_, i) => (
+      <div className="mb-1">
+        {initialLoading && !statsData ? (
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+            {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>
+        ) : (
+          <KpiCardsGrid items={kpis} />
+        )}
       </div>
 
       {/* Search bar */}
-      <form onSubmit={handleSearch} className="mb-6 mt-0">
-        <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 className="mb-1 space-y-3">
+        <SearchBar
+          searchQuery={buscaInput}
+          onSearchChange={setBuscaInput}
+          onSearch={() => {
+            setDebouncedBuscaInput(buscaInput.trim());
+            setCurrentPage(1);
+          }}
+          placeholder={t('filters.searchPlaceholder')}
+          controls={[
+            {
+              id: 'status',
+              type: 'select',
+              value: filtroStatusInput,
+              onChange: setFiltroStatusInput,
+              placeholder: 'Status',
+              options: [
+                { value: 'todos', label: t('filters.allStatuses') },
+                { value: 'publicado', label: t('status.published') },
+                { value: 'rascunho', label: t('status.draft') },
+                { value: 'encerrado', label: t('status.closed') },
+              ],
+            },
+          ]}
+          afterSearchButton={
+            <ViewModeToggle
+              viewMode={viewMode}
+              onViewModeChange={setViewMode}
+              listLabel={t('viewMode.list')}
+              cardsLabel={t('viewMode.cards')}
             />
-          </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>
+          }
+        />
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <p className="text-sm text-muted-foreground">
+            {effectiveExameList?.total ?? 0}{' '}
+            {(effectiveExameList?.total ?? 0) !== 1
+              ? t('pagination.examsPlural')
+              : t('pagination.exams')}
+          </p>
+          <div className="flex items-center gap-2">
             {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')}
+                {t('filters.clear')}
               </Button>
             )}
-            <Button type="submit" size="sm" className="h-9 gap-2">
-              <Search className="size-3.5" /> {t('filters.search')}
-            </Button>
+            {cardsRefreshing && (
+              <Loader2 className="size-4 animate-spin text-muted-foreground" />
+            )}
           </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>
+
+      {/* Exam list */}
+      {initialLoading ? (
+        viewMode === 'cards' ? (
+          <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>
+        ) : (
+          <div className="overflow-hidden rounded-xl border border-border/70">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('form.fields.title.label')}</TableHead>
+                  <TableHead>{t('form.fields.status.label')}</TableHead>
+                  <TableHead>{t('cards.questionsLabel')}</TableHead>
+                  <TableHead>{t('cards.completionsLabel')}</TableHead>
+                  <TableHead>{t('cards.durationLabel')}</TableHead>
+                  <TableHead>{t('cards.minScoreLabel')}</TableHead>
+                  <TableHead className="w-12" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <TableRow key={i}>
+                    <TableCell>
+                      <div className="space-y-1.5">
+                        <Skeleton className="h-4 w-44" />
+                        <Skeleton className="h-3 w-20" />
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-5 w-20 rounded-full" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-12" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-16" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-14" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-10" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="ml-auto size-8 rounded-md" />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )
+      ) : (effectiveExameList?.total ?? 0) === 0 ? (
         <EmptyState
-          icon={<FileCheck className="h-12 w-12" />}
+          icon={<FileCheck className="size-12 text-muted-foreground/40" />}
           title={t('empty.title')}
           description={t('empty.description')}
           actionLabel={t('empty.action')}
+          actionIcon={<Plus className="mr-2 size-4" />}
           onAction={openCreateSheet}
-          actionIcon={<Plus className="mr-2 h-4 w-4" />}
+          className="py-20"
         />
       ) : (
-        <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 -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(
-                                    `/lms/exams/${exame.id}/questions`
-                                  );
-                                }}
-                              >
-                                <ListChecks className="mr-2 size-4" />{' '}
-                                {t('cards.actions.manageQuestions')}
-                              </DropdownMenuItem>
-                              <DropdownMenuItem
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  router.push(`/lms/exams/${exame.id}/attempt`);
-                                }}
-                              >
-                                <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 className="relative">
+          {cardsRefreshing && (
+            <div className="absolute inset-0 z-10 rounded-2xl bg-background/55 backdrop-blur-[1px]" />
+          )}
+          {viewMode === 'cards' ? (
+            <motion.div
+              className={`${'grid gap-4 sm:grid-cols-2 lg:grid-cols-3'} ${cardsRefreshing ? 'pointer-events-none' : ''}`}
+              variants={stagger}
+              initial="hidden"
+              animate="show"
+            >
+              {paginatedExames.map((exame) => {
+                return (
+                  <motion.div key={exame.id} variants={fadeUp}>
+                    <Card
+                      className="group relative h-95 cursor-pointer overflow-hidden border-border/70 shadow-sm transition-all duration-200 hover:border-border hover:shadow-md"
+                      onClick={() => handleCardClick(exame)}
+                      title={t('cards.tooltip')}
+                    >
+                      <div
+                        className="absolute inset-x-0 top-0 h-1 w-full"
+                        style={{
+                          backgroundColor: exame.primaryColor || '#1D4ED8',
+                        }}
+                      />
+                      <CardContent className="p-4">
+                        <div className="mb-3 flex items-start gap-3">
+                          <div className="flex size-11 shrink-0 items-center justify-center rounded-xl border bg-muted/60">
+                            <FileCheck className="size-5 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 -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(
+                                        `/lms/exams/${exame.id}/questions`
+                                      );
+                                    }}
+                                  >
+                                    <ListChecks className="mr-2 size-4" />{' '}
+                                    {t('cards.actions.manageQuestions')}
+                                  </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) => openDeleteDialog(exame, e)}
+                                  >
+                                    <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>
-                        <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>
+                        <div className="mb-3 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 border bg-muted 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 className="mb-3 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-emerald-50 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>
-                        <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 className="mb-3 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>
-                        <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')}
+                        {exame.realizacoes > 0 && (
+                          <div className="mt-auto flex items-center justify-between rounded-lg border bg-muted/40 px-3 py-2.5">
+                            <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>
+          ) : (
+            <div
+              className={`overflow-hidden rounded-xl border border-border/70 ${cardsRefreshing ? 'pointer-events-none' : ''}`}
+            >
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('form.fields.title.label')}</TableHead>
+                    <TableHead>{t('form.fields.status.label')}</TableHead>
+                    <TableHead>{t('cards.questionsLabel')}</TableHead>
+                    <TableHead>{t('cards.completionsLabel')}</TableHead>
+                    <TableHead>{t('cards.durationLabel')}</TableHead>
+                    <TableHead>{t('cards.minScoreLabel')}</TableHead>
+                    <TableHead>{t('cards.avgScoreLabel')}</TableHead>
+                    <TableHead className="w-12" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {paginatedExames.map((exame) => (
+                    <TableRow
+                      key={exame.id}
+                      className="cursor-pointer"
+                      onClick={() => handleCardClick(exame)}
+                      title={t('cards.tooltip')}
+                    >
+                      <TableCell>
+                        <div className="min-w-0">
+                          <p className="truncate font-semibold text-foreground">
+                            {exame.titulo}
                           </p>
-                          <p className="text-xs font-semibold">
-                            {formatTempo(exame.limiteTempo)}
+                          <p className="mt-1 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>
-                      <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>
+                      </TableCell>
+                      <TableCell>
+                        <div className="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 border bg-muted px-2 py-0.5 text-[11px] font-medium text-foreground">
+                              <Shuffle className="size-3" />
+                            </span>
+                          )}
                         </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>
+                      </TableCell>
+                      <TableCell>{exame.questoes}</TableCell>
+                      <TableCell>
+                        {exame.realizacoes.toLocaleString('pt-BR')}
+                      </TableCell>
+                      <TableCell>{formatTempo(exame.limiteTempo)}</TableCell>
+                      <TableCell>{exame.notaMinima}</TableCell>
+                      <TableCell>
+                        {exame.realizacoes > 0
+                          ? exame.mediaNotas.toFixed(1)
+                          : '-'}
+                      </TableCell>
+                      <TableCell onClick={(e) => e.stopPropagation()}>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="ml-auto size-8"
+                              aria-label={t('cards.actions.label')}
+                            >
+                              <MoreHorizontal className="size-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end" className="w-52">
+                            <DropdownMenuItem
+                              onClick={() =>
+                                router.push(`/lms/exams/${exame.id}/questions`)
+                              }
+                            >
+                              <ListChecks className="mr-2 size-4" />{' '}
+                              {t('cards.actions.manageQuestions')}
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem
+                              onClick={() => openEditSheet(exame)}
+                            >
+                              <Pencil className="mr-2 size-4" />{' '}
+                              {t('cards.actions.edit')}
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem
+                              className="text-destructive focus:text-destructive"
+                              onClick={(e) => openDeleteDialog(exame, e)}
+                            >
+                              <Trash2 className="mr-2 size-4" />{' '}
+                              {t('cards.actions.delete')}
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </div>
       )}
 
       {/* Pagination footer */}
-      {!loading && filteredExames.length > 0 && (
+      {!initialLoading && (effectiveExameList?.total ?? 0) > 0 && (
         <div className="mt-6">
           <PaginationFooter
             currentPage={safePage}
             pageSize={pageSize}
-            totalItems={filteredExames.length}
+            totalItems={effectiveExameList?.total ?? 0}
             onPageChange={setCurrentPage}
-            onPageSizeChange={(nextSize) => {
-              setPageSize(nextSize);
+            onPageSizeChange={(nextPageSize) => {
+              setPageSize(nextPageSize);
               setCurrentPage(1);
             }}
             pageSizeOptions={PAGE_SIZES}
@@ -886,18 +1085,17 @@ export default function ExamesPage() {
             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>
+            {editingExame && (
+              <Field>
+                <FieldLabel htmlFor="codigo">
+                  {t('form.fields.code.label')}
+                </FieldLabel>
+                <Input id="codigo" value={editingExame.codigo} readOnly />
+                <FieldDescription>
+                  Codigo gerado automaticamente pelo sistema.
+                </FieldDescription>
+              </Field>
+            )}
             <Field>
               <FieldLabel htmlFor="titulo">
                 {t('form.fields.title.label')}{' '}
@@ -979,6 +1177,61 @@ export default function ExamesPage() {
               />
               <FieldError>{form.formState.errors.status?.message}</FieldError>
             </Field>
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <Field>
+                <FieldLabel htmlFor="primaryColor">Cor Primaria</FieldLabel>
+                <Controller
+                  name="primaryColor"
+                  control={form.control}
+                  render={({ field }) => (
+                    <div className="flex items-center gap-2">
+                      <Input
+                        id="primaryColor"
+                        type="color"
+                        className="h-10 w-16 p-1"
+                        value={field.value}
+                        onChange={field.onChange}
+                      />
+                      <Input
+                        value={field.value}
+                        onChange={field.onChange}
+                        placeholder="#1D4ED8"
+                      />
+                    </div>
+                  )}
+                />
+                <FieldError>
+                  {form.formState.errors.primaryColor?.message}
+                </FieldError>
+              </Field>
+
+              <Field>
+                <FieldLabel htmlFor="secondaryColor">Cor Secundaria</FieldLabel>
+                <Controller
+                  name="secondaryColor"
+                  control={form.control}
+                  render={({ field }) => (
+                    <div className="flex items-center gap-2">
+                      <Input
+                        id="secondaryColor"
+                        type="color"
+                        className="h-10 w-16 p-1"
+                        value={field.value}
+                        onChange={field.onChange}
+                      />
+                      <Input
+                        value={field.value}
+                        onChange={field.onChange}
+                        placeholder="#111827"
+                      />
+                    </div>
+                  )}
+                />
+                <FieldError>
+                  {form.formState.errors.secondaryColor?.message}
+                </FieldError>
+              </Field>
+            </div>
             <label className="flex cursor-pointer items-center justify-between rounded-lg border p-3 hover:bg-muted">
               <div>
                 <p className="text-sm font-medium">
@@ -1013,7 +1266,7 @@ export default function ExamesPage() {
 
       {/* Delete Dialog */}
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <DialogContent>
+        <DialogContent className="mx-auto max-w-3xl">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
               <AlertTriangle className="size-5 text-destructive" />{' '}