@hed-hog/lms 0.0.268 → 0.0.270

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

@@ -45,49 +45,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 { Textarea } from '@/components/ui/textarea';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
 import {
   AlertTriangle,
   Archive,
+  Award,
   BarChart3,
   BookOpen,
-  CheckSquare,
   ChevronLeft,
   ChevronRight,
-  Copy,
+  ChevronsLeft,
+  ChevronsRight,
   Eye,
   FileCheck,
-  Filter,
   GraduationCap,
-  Hash,
   LayoutDashboard,
   Loader2,
   MoreHorizontal,
   Pencil,
   Plus,
   Search,
+  Star,
   Trash2,
+  TrendingUp,
   Users,
   X,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { usePathname, useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
-// ── Navigation ───────────────────────────────────────────────────────────────
+// ── Navigation ────────────────────────────────────────────────────────────────
 
 const NAV_ITEMS = [
   { label: 'Dashboard', href: '/', icon: LayoutDashboard },
@@ -98,7 +91,7 @@ const NAV_ITEMS = [
   { label: 'Relatorios', href: '/relatorios', icon: BarChart3 },
 ];
 
-// ── Types ────────────────────────────────────────────────────────────────────
+// ── Types ─────────────────────────────────────────────────────────────────────
 
 interface Curso {
   id: number;
@@ -116,10 +109,10 @@ interface Curso {
   criadoEm: string;
 }
 
-// ── Schema ───────────────────────────────────────────────────────────────────
+// ── Zod Schema ────────────────────────────────────────────────────────────────
 
-const createCursoSchema = (t: (key: string) => string) =>
-  z.object({
+function getCursoSchema(t: (key: string) => string) {
+  return z.object({
     codigo: z
       .string()
       .min(2, t('form.validation.codeMinLength'))
@@ -143,32 +136,47 @@ const createCursoSchema = (t: (key: string) => string) =>
     certificado: z.boolean(),
     listado: z.boolean(),
   });
+}
 
-type CursoForm = z.infer<ReturnType<typeof createCursoSchema>>;
+type CursoForm = {
+  codigo: string;
+  nomeInterno: string;
+  tituloComercial: string;
+  descricao: string;
+  nivel: 'iniciante' | 'intermediario' | 'avancado';
+  status: 'ativo' | 'rascunho' | 'arquivado';
+  categorias: string[];
+  destaque: boolean;
+  certificado: boolean;
+  listado: boolean;
+};
 
-// ── Constants ────────────────────────────────────────────────────────────────
+// ── Constants ─────────────────────────────────────────────────────────────────
 
 const CATEGORIAS = [
-  'technology',
-  'design',
-  'management',
-  'marketing',
-  'finance',
-  'health',
-  'languages',
-  'law',
-] as const;
-
-const STATUS_MAP: Record<
-  string,
-  { variant: 'default' | 'secondary' | 'outline' }
-> = {
-  ativo: { variant: 'default' },
-  rascunho: { variant: 'secondary' },
-  arquivado: { variant: 'outline' },
+  'Tecnologia',
+  'Design',
+  'Gestao',
+  'Marketing',
+  'Financas',
+  'Saude',
+  'Idiomas',
+  'Direito',
+];
+
+const NIVEL_COLOR: Record<string, string> = {
+  iniciante: 'bg-emerald-50 text-emerald-700 border-emerald-200',
+  intermediario: 'bg-amber-50 text-amber-700 border-amber-200',
+  avancado: 'bg-red-50 text-red-700 border-red-200',
+};
+
+const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
+  ativo: 'default',
+  rascunho: 'secondary',
+  arquivado: 'outline',
 };
 
-// ── Seed Data ────────────────────────────────────────────────────────────────
+// ── Seed Data ─────────────────────────────────────────────────────────────────
 
 const initialCursos: Curso[] = [
   {
@@ -177,10 +185,10 @@ const initialCursos: Curso[] = [
     nomeInterno: 'react-avancado',
     tituloComercial: 'React Avancado',
     descricao:
-      'Curso completo de React com hooks, context e patterns avancados para aplicacoes modernas',
+      'Curso completo de React com hooks, context e patterns avancados para aplicacoes modernas.',
     nivel: 'avancado',
     status: 'ativo',
-    categorias: ['technology'],
+    categorias: ['Tecnologia'],
     destaque: true,
     certificado: true,
     listado: true,
@@ -193,10 +201,10 @@ const initialCursos: Curso[] = [
     nomeInterno: 'ux-fundamentals',
     tituloComercial: 'UX Design Fundamentals',
     descricao:
-      'Fundamentos de design de experiencia do usuario com ferramentas modernas e pesquisa',
+      'Fundamentos de design de experiencia do usuario com ferramentas modernas e pesquisa.',
     nivel: 'iniciante',
     status: 'ativo',
-    categorias: ['design'],
+    categorias: ['Design'],
     destaque: false,
     certificado: true,
     listado: true,
@@ -209,10 +217,10 @@ const initialCursos: Curso[] = [
     nomeInterno: 'gestao-agil',
     tituloComercial: 'Gestao de Projetos Ageis',
     descricao:
-      'Metodologias ageis para gestao de projetos incluindo Scrum, Kanban e SAFe em equipes',
+      'Metodologias ageis para gestao de projetos incluindo Scrum, Kanban e SAFe.',
     nivel: 'intermediario',
     status: 'ativo',
-    categorias: ['management'],
+    categorias: ['Gestao'],
     destaque: true,
     certificado: true,
     listado: true,
@@ -225,10 +233,10 @@ const initialCursos: Curso[] = [
     nomeInterno: 'marketing-digital',
     tituloComercial: 'Marketing Digital Completo',
     descricao:
-      'Estrategias de marketing digital para negocios modernos incluindo SEO, SEM e redes sociais',
+      'Estrategias de marketing digital para negocios modernos incluindo SEO, SEM e redes sociais.',
     nivel: 'intermediario',
     status: 'rascunho',
-    categorias: ['marketing'],
+    categorias: ['Marketing'],
     destaque: false,
     certificado: false,
     listado: false,
@@ -241,10 +249,10 @@ const initialCursos: Curso[] = [
     nomeInterno: 'python-data-science',
     tituloComercial: 'Python para Data Science',
     descricao:
-      'Introducao a Python focado em ciencia de dados, analise estatistica e machine learning basico',
+      'Introducao a Python focado em ciencia de dados, analise estatistica e machine learning.',
     nivel: 'intermediario',
     status: 'ativo',
-    categorias: ['technology'],
+    categorias: ['Tecnologia'],
     destaque: false,
     certificado: true,
     listado: true,
@@ -257,10 +265,10 @@ const initialCursos: Curso[] = [
     nomeInterno: 'node-completo',
     tituloComercial: 'Node.js Completo',
     descricao:
-      'Backend com Node.js, Express e bancos de dados relacionais e NoSQL para APIs robustas',
+      'Backend com Node.js, Express e bancos de dados relacionais e NoSQL para APIs robustas.',
     nivel: 'avancado',
     status: 'ativo',
-    categorias: ['technology'],
+    categorias: ['Tecnologia'],
     destaque: true,
     certificado: true,
     listado: true,
@@ -273,10 +281,10 @@ const initialCursos: Curso[] = [
     nomeInterno: 'figma-iniciantes',
     tituloComercial: 'Figma para Iniciantes',
     descricao:
-      'Aprenda a usar o Figma do zero para criar interfaces profissionais e prototipos interativos',
+      'Aprenda a usar o Figma do zero para criar interfaces profissionais e prototipos interativos.',
     nivel: 'iniciante',
     status: 'arquivado',
-    categorias: ['design'],
+    categorias: ['Design'],
     destaque: false,
     certificado: true,
     listado: false,
@@ -289,10 +297,10 @@ const initialCursos: Curso[] = [
     nomeInterno: 'lideranca-comunicacao',
     tituloComercial: 'Lideranca e Comunicacao',
     descricao:
-      'Desenvolva habilidades de lideranca e comunicacao assertiva para ambientes corporativos',
+      'Desenvolva habilidades de lideranca e comunicacao assertiva para ambientes corporativos.',
     nivel: 'iniciante',
     status: 'ativo',
-    categorias: ['management'],
+    categorias: ['Gestao'],
     destaque: false,
     certificado: true,
     listado: true,
@@ -305,10 +313,10 @@ const initialCursos: Curso[] = [
     nomeInterno: 'seo-avancado',
     tituloComercial: 'SEO Avancado',
     descricao:
-      'Tecnicas avancadas de otimizacao para motores de busca, conteudo web e performance de sites',
+      'Tecnicas avancadas de otimizacao para motores de busca, conteudo web e performance.',
     nivel: 'avancado',
     status: 'rascunho',
-    categorias: ['marketing', 'technology'],
+    categorias: ['Marketing', 'Tecnologia'],
     destaque: false,
     certificado: false,
     listado: false,
@@ -321,10 +329,10 @@ const initialCursos: Curso[] = [
     nomeInterno: 'typescript-pratica',
     tituloComercial: 'TypeScript na Pratica',
     descricao:
-      'TypeScript aplicado em projetos reais com boas praticas, design patterns e testes',
+      'TypeScript aplicado em projetos reais com boas praticas, design patterns e testes.',
     nivel: 'intermediario',
     status: 'ativo',
-    categorias: ['technology'],
+    categorias: ['Tecnologia'],
     destaque: true,
     certificado: true,
     listado: true,
@@ -337,10 +345,10 @@ const initialCursos: Curso[] = [
     nomeInterno: 'design-system',
     tituloComercial: 'Design System Completo',
     descricao:
-      'Como criar e manter um design system escalavel para grandes equipes de produto e engenharia',
+      'Como criar e manter um design system escalavel para grandes equipes de produto.',
     nivel: 'avancado',
     status: 'ativo',
-    categorias: ['design', 'technology'],
+    categorias: ['Design', 'Tecnologia'],
     destaque: false,
     certificado: true,
     listado: true,
@@ -353,10 +361,10 @@ const initialCursos: Curso[] = [
     nomeInterno: 'excel-negocios',
     tituloComercial: 'Excel para Negocios',
     descricao:
-      'Domine Excel com formulas avancadas, dashboards profissionais e analise de dados empresariais',
+      'Domine Excel com formulas avancadas, dashboards profissionais e analise de dados.',
     nivel: 'iniciante',
     status: 'ativo',
-    categorias: ['management', 'finance'],
+    categorias: ['Gestao', 'Financas'],
     destaque: false,
     certificado: true,
     listado: true,
@@ -369,10 +377,10 @@ const initialCursos: Curso[] = [
     nomeInterno: 'financas-pessoais',
     tituloComercial: 'Financas Pessoais',
     descricao:
-      'Aprenda a gerenciar suas financas, investir e planejar sua aposentadoria de forma inteligente',
+      'Aprenda a gerenciar suas financas, investir e planejar sua aposentadoria de forma inteligente.',
     nivel: 'iniciante',
     status: 'ativo',
-    categorias: ['finance'],
+    categorias: ['Financas'],
     destaque: false,
     certificado: true,
     listado: true,
@@ -385,10 +393,10 @@ const initialCursos: Curso[] = [
     nomeInterno: 'flutter-mobile',
     tituloComercial: 'Flutter para Mobile',
     descricao:
-      'Desenvolvimento de aplicativos moveis multiplataforma com Flutter e Dart do zero ao deploy',
+      'Desenvolvimento de aplicativos moveis multiplataforma com Flutter e Dart do zero.',
     nivel: 'intermediario',
     status: 'ativo',
-    categorias: ['technology'],
+    categorias: ['Tecnologia'],
     destaque: true,
     certificado: true,
     listado: true,
@@ -401,10 +409,10 @@ const initialCursos: Curso[] = [
     nomeInterno: 'direito-trabalhista',
     tituloComercial: 'Direito Trabalhista Essencial',
     descricao:
-      'Conceitos essenciais de direito trabalhista para gestores de RH e empreendedores',
+      'Conceitos essenciais de direito trabalhista para gestores de RH e empreendedores.',
     nivel: 'iniciante',
     status: 'rascunho',
-    categorias: ['law', 'management'],
+    categorias: ['Direito', 'Gestao'],
     destaque: false,
     certificado: false,
     listado: false,
@@ -413,28 +421,28 @@ const initialCursos: Curso[] = [
   },
 ];
 
-const ITEMS_PER_PAGE = 8;
+const PAGE_SIZES = [6, 12, 24];
 
-// ── Animations ───────────────────────────────────────────────────────────────
+// ── Animations ────────────────────────────────────────────────────────────────
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 16 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.3 } },
+};
 
 const stagger = {
   hidden: {},
-  show: { transition: { staggerChildren: 0.06 } },
+  show: { transition: { staggerChildren: 0.05 } },
 };
 
-const fadeUp = {
-  hidden: { opacity: 0, y: 16 },
-  show: { opacity: 1, y: 0, transition: { duration: 0.35 } },
-} as const;
-
-// ── Component ────────────────────────────────────────────────────────────────
+// ── Component ─────────────────────────────────────────────────────────────────
 
 export default function CursosPage() {
   const t = useTranslations('lms.CoursesPage');
   const pathname = usePathname();
   const router = useRouter();
 
-  // UI states
+  // UI
   const [loading, setLoading] = useState(true);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [sheetOpen, setSheetOpen] = useState(false);
@@ -449,17 +457,29 @@ export default function CursosPage() {
   // Selection
   const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
 
-  // Filters
-  const [busca, setBusca] = useState('');
-  const [filtroStatus, setFiltroStatus] = useState('todos');
-  const [filtroNivel, setFiltroNivel] = useState('todos');
-  const [filtroCategoria, setFiltroCategoria] = useState('todos');
+  // Search/filter state (controlled by form submit)
+  const [buscaInput, setBuscaInput] = useState('');
+  const [filtroStatusInput, setFiltroStatusInput] = useState('todos');
+  const [filtroNivelInput, setFiltroNivelInput] = useState('todos');
+  const [filtroCatInput, setFiltroCatInput] = useState('todos');
+
+  // Applied filters (only updated on submit)
+  const [buscaApplied, setBuscaApplied] = useState('');
+  const [filtroStatusApplied, setFiltroStatusApplied] = useState('todos');
+  const [filtroNivelApplied, setFiltroNivelApplied] = useState('todos');
+  const [filtroCatApplied, setFiltroCatApplied] = 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<CursoForm>({
-    resolver: zodResolver(createCursoSchema(t)),
+    resolver: zodResolver(getCursoSchema(t)),
     defaultValues: {
       codigo: '',
       nomeInterno: '',
@@ -475,74 +495,109 @@ export default function CursosPage() {
   });
 
   useEffect(() => {
-    const t = setTimeout(() => setLoading(false), 900);
+    const t = setTimeout(() => setLoading(false), 800);
     return () => clearTimeout(t);
   }, []);
 
-  // ── Filtering ──────────────────────────────────────────────────────────────
+  // ── Filtering (applied on search submit) ─────────────────────────────────
 
   const filteredCursos = useMemo(() => {
     return cursos.filter((c) => {
-      const q = busca.toLowerCase();
+      const q = buscaApplied.toLowerCase();
       const matchSearch =
         !q ||
         c.codigo.toLowerCase().includes(q) ||
         c.tituloComercial.toLowerCase().includes(q) ||
         c.nomeInterno.toLowerCase().includes(q);
-      const matchStatus = filtroStatus === 'todos' || c.status === filtroStatus;
-      const matchNivel = filtroNivel === 'todos' || c.nivel === filtroNivel;
+      const matchStatus =
+        filtroStatusApplied === 'todos' || c.status === filtroStatusApplied;
+      const matchNivel =
+        filtroNivelApplied === 'todos' || c.nivel === filtroNivelApplied;
       const matchCategoria =
-        filtroCategoria === 'todos' || c.categorias.includes(filtroCategoria);
+        filtroCatApplied === 'todos' || c.categorias.includes(filtroCatApplied);
       return matchSearch && matchStatus && matchNivel && matchCategoria;
     });
-  }, [cursos, busca, filtroStatus, filtroNivel, filtroCategoria]);
+  }, [
+    cursos,
+    buscaApplied,
+    filtroStatusApplied,
+    filtroNivelApplied,
+    filtroCatApplied,
+  ]);
 
-  const totalPages = Math.max(
-    1,
-    Math.ceil(filteredCursos.length / ITEMS_PER_PAGE)
-  );
+  const totalPages = Math.max(1, Math.ceil(filteredCursos.length / pageSize));
   const safePage = Math.min(currentPage, totalPages);
   const paginatedCursos = filteredCursos.slice(
-    (safePage - 1) * ITEMS_PER_PAGE,
-    safePage * ITEMS_PER_PAGE
+    (safePage - 1) * pageSize,
+    safePage * pageSize
   );
 
-  // Reset page on filter change
-  useEffect(() => {
+  function handleSearch(e: React.FormEvent) {
+    e.preventDefault();
+    setBuscaApplied(buscaInput);
+    setFiltroStatusApplied(filtroStatusInput);
+    setFiltroNivelApplied(filtroNivelInput);
+    setFiltroCatApplied(filtroCatInput);
     setCurrentPage(1);
-  }, [busca, filtroStatus, filtroNivel, filtroCategoria]);
+  }
 
-  // ── Selection ──────────────────────────────────────────────────────────────
+  function clearFilters() {
+    setBuscaInput('');
+    setFiltroStatusInput('todos');
+    setFiltroNivelInput('todos');
+    setFiltroCatInput('todos');
+    setBuscaApplied('');
+    setFiltroStatusApplied('todos');
+    setFiltroNivelApplied('todos');
+    setFiltroCatApplied('todos');
+    setCurrentPage(1);
+  }
 
-  const allPageSelected =
-    paginatedCursos.length > 0 &&
-    paginatedCursos.every((c) => selectedIds.has(c.id));
+  const hasActiveFilters =
+    buscaApplied ||
+    filtroStatusApplied !== 'todos' ||
+    filtroNivelApplied !== 'todos' ||
+    filtroCatApplied !== 'todos';
 
-  function toggleSelectAll() {
+  // ── Double-click to navigate ──────────────────────────────────────────────
+
+  function handleCardClick(curso: Curso) {
+    const existing = clickTimers.current.get(curso.id);
+    if (existing) {
+      clearTimeout(existing);
+      clickTimers.current.delete(curso.id);
+      router.push(`/lms/courses/${curso.id}`);
+    } else {
+      const t = setTimeout(() => {
+        clickTimers.current.delete(curso.id);
+      }, 300);
+      clickTimers.current.set(curso.id, t);
+    }
+  }
+
+  // ── Selection ─────────────────────────────────────────────────────────────
+
+  function toggleSelect(id: number, e: React.MouseEvent) {
+    e.stopPropagation();
     setSelectedIds((prev) => {
       const next = new Set(prev);
-      if (allPageSelected) {
-        paginatedCursos.forEach((c) => next.delete(c.id));
-      } else {
-        paginatedCursos.forEach((c) => next.add(c.id));
-      }
+      next.has(id) ? next.delete(id) : next.add(id);
       return next;
     });
   }
 
-  function toggleSelect(id: number) {
+  function toggleSelectAll() {
+    const allSelected = paginatedCursos.every((c) => selectedIds.has(c.id));
     setSelectedIds((prev) => {
       const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
+      allSelected
+        ? paginatedCursos.forEach((c) => next.delete(c.id))
+        : paginatedCursos.forEach((c) => next.add(c.id));
       return next;
     });
   }
 
-  // ── CRUD ───────────────────────────────────────────────────────────────────
+  // ── CRUD ──────────────────────────────────────────────────────────────────
 
   function openCreateSheet() {
     setEditingCurso(null);
@@ -561,7 +616,8 @@ export default function CursosPage() {
     setSheetOpen(true);
   }
 
-  function openEditSheet(curso: Curso) {
+  function openEditSheet(curso: Curso, e?: React.MouseEvent) {
+    e?.stopPropagation();
     setEditingCurso(curso);
     form.reset({
       codigo: curso.codigo,
@@ -580,9 +636,7 @@ export default function CursosPage() {
 
   async function onSubmit(data: CursoForm) {
     setSaving(true);
-    // Simula um delay de API
-    await new Promise((r) => setTimeout(r, 600));
-
+    await new Promise((r) => setTimeout(r, 500));
     if (editingCurso) {
       setCursos((prev) =>
         prev.map((c) => (c.id === editingCurso.id ? { ...c, ...data } : c))
@@ -592,64 +646,84 @@ export default function CursosPage() {
       setSheetOpen(false);
     } else {
       const newId = Date.now();
-      const newCurso: Curso = {
-        id: newId,
-        ...data,
-        alunosInscritos: 0,
-        criadoEm: new Date().toISOString().split('T')[0] || '',
-      };
-      setCursos((prev) => [newCurso, ...prev]);
+      setCursos((prev) => [
+        {
+          id: newId,
+          ...data,
+          alunosInscritos: 0,
+          criadoEm: new Date().toISOString().split('T')[0] ?? '',
+        },
+        ...prev,
+      ]);
       toast.success(t('toasts.courseCreated'));
       setSaving(false);
       setSheetOpen(false);
-      // Redirecionar para pagina dedicada do curso
-      setTimeout(() => {
-        router.push(`/cursos/${newId}`);
-      }, 400);
+      setTimeout(() => router.push(`/lms/courses/${newId}`), 400);
     }
   }
 
   function confirmDelete() {
-    if (cursoToDelete) {
-      setCursos((prev) => prev.filter((c) => c.id !== cursoToDelete.id));
-      setSelectedIds((prev) => {
-        const next = new Set(prev);
-        next.delete(cursoToDelete.id);
-        return next;
-      });
-      toast.success(
-        t('toasts.courseRemoved', { title: cursoToDelete.tituloComercial })
-      );
-      setCursoToDelete(null);
-      setDeleteDialogOpen(false);
-    }
-  }
-
-  function bulkDelete() {
-    if (selectedIds.size === 0) return;
-    setCursos((prev) => prev.filter((c) => !selectedIds.has(c.id)));
-    toast.success(t('toasts.coursesRemoved', { count: selectedIds.size }));
-    setSelectedIds(new Set());
-  }
-
-  function bulkArchive() {
-    if (selectedIds.size === 0) return;
-    setCursos((prev) =>
-      prev.map((c) =>
-        selectedIds.has(c.id) ? { ...c, status: 'arquivado' as const } : c
-      )
+    if (!cursoToDelete) return;
+    setCursos((prev) => prev.filter((c) => c.id !== cursoToDelete.id));
+    setSelectedIds((prev) => {
+      const n = new Set(prev);
+      n.delete(cursoToDelete.id);
+      return n;
+    });
+    toast.success(
+      t('toasts.courseRemoved', { title: cursoToDelete.tituloComercial })
     );
-    toast.success(t('toasts.coursesArchived', { count: selectedIds.size }));
-    setSelectedIds(new Set());
+    setCursoToDelete(null);
+    setDeleteDialogOpen(false);
   }
 
-  // ── Count badges ───────────────────────────────────────────────────────────
+  // ── KPI counts ────────────────────────────────────────────────────────────
 
+  const totalAlunos = cursos.reduce((a, c) => a + c.alunosInscritos, 0);
   const countAtivos = cursos.filter((c) => c.status === 'ativo').length;
   const countRascunhos = cursos.filter((c) => c.status === 'rascunho').length;
-  const countArquivados = cursos.filter((c) => c.status === 'arquivado').length;
+  const countDestaque = cursos.filter((c) => c.destaque).length;
 
-  // ── Render ─────────────────────────────────────────────────────────────────
+  const kpis = [
+    {
+      label: t('kpis.totalCourses.label'),
+      valor: cursos.length,
+      sub: t('kpis.totalCourses.sub'),
+      icon: BookOpen,
+      iconBg: 'bg-orange-100',
+      iconColor: 'text-orange-600',
+    },
+    {
+      label: t('kpis.activeCourses.label'),
+      valor: countAtivos,
+      sub: t('kpis.activeCourses.sub'),
+      icon: TrendingUp,
+      iconBg: 'bg-muted',
+      iconColor: 'text-foreground',
+    },
+    {
+      label: t('kpis.totalStudents.label'),
+      valor: totalAlunos.toLocaleString('pt-BR'),
+      sub: t('kpis.totalStudents.sub'),
+      icon: Users,
+      iconBg: 'bg-muted',
+      iconColor: 'text-foreground',
+    },
+    {
+      label: t('kpis.featured.label'),
+      valor: countDestaque,
+      sub: t('kpis.featured.sub'),
+      icon: Star,
+      iconBg: 'bg-muted',
+      iconColor: 'text-foreground',
+    },
+  ];
+
+  const allPageSelected =
+    paginatedCursos.length > 0 &&
+    paginatedCursos.every((c) => selectedIds.has(c.id));
+
+  // ── Render ────────────────────────────────────────────────────────────────
 
   return (
     <Page>
@@ -673,436 +747,507 @@ export default function CursosPage() {
         }
       />
 
-      <motion.div initial="hidden" animate="show" variants={stagger}>
-        {/* Filters */}
-        <motion.div variants={fadeUp}>
-          <Card className="mb-6">
-            <CardContent className="p-4">
-              <div className="flex flex-col gap-3 lg:flex-row lg: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={busca}
-                    onChange={(e) => setBusca(e.target.value)}
-                    className="pl-9"
-                  />
-                </div>
-                <div className="flex flex-wrap items-center gap-2">
-                  <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                    <Filter className="size-3.5" />
-                    {t('filters.filtersLabel')}
-                  </div>
-                  <Select value={filtroStatus} onValueChange={setFiltroStatus}>
-                    <SelectTrigger className="h-9 w-[130px] text-xs">
-                      <SelectValue placeholder={t('status.active')} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="todos">
-                        {t('filters.allStatuses')}
-                      </SelectItem>
-                      <SelectItem value="ativo">
-                        {t('status.active')}
-                      </SelectItem>
-                      <SelectItem value="rascunho">
-                        {t('status.draft')}
-                      </SelectItem>
-                      <SelectItem value="arquivado">
-                        {t('status.archived')}
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                  <Select value={filtroNivel} onValueChange={setFiltroNivel}>
-                    <SelectTrigger className="h-9 w-[140px] text-xs">
-                      <SelectValue placeholder={t('levels.beginner')} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="todos">
-                        {t('filters.allLevels')}
-                      </SelectItem>
-                      <SelectItem value="iniciante">
-                        {t('levels.beginner')}
-                      </SelectItem>
-                      <SelectItem value="intermediario">
-                        {t('levels.intermediate')}
-                      </SelectItem>
-                      <SelectItem value="avancado">
-                        {t('levels.advanced')}
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                  <Select
-                    value={filtroCategoria}
-                    onValueChange={setFiltroCategoria}
-                  >
-                    <SelectTrigger className="h-9 w-[140px] text-xs">
-                      <SelectValue placeholder={t('categories.technology')} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="todos">
-                        {t('filters.allCategories')}
-                      </SelectItem>
-                      {CATEGORIAS.map((cat) => (
-                        <SelectItem key={cat} value={cat}>
-                          {t(`categories.${cat}`)}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  {(filtroStatus !== 'todos' ||
-                    filtroNivel !== 'todos' ||
-                    filtroCategoria !== 'todos' ||
-                    busca) && (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-9 text-xs text-muted-foreground"
-                      onClick={() => {
-                        setFiltroStatus('todos');
-                        setFiltroNivel('todos');
-                        setFiltroCategoria('todos');
-                        setBusca('');
-                      }}
+      {/* ── KPI Cards ────────────────────────────────────────────────────── */}
+      <div className="mb-2 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}`}
                     >
-                      <X className="mr-1 size-3" />
-                      {t('filters.clear')}
-                    </Button>
-                  )}
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </motion.div>
+                      <kpi.icon className={`size-5 ${kpi.iconColor}`} />
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+      </div>
+
+      {/* ── Search bar ───────────────────────────────────────────────────── */}
+      <form onSubmit={handleSearch} className="mb-2 mt-0">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          {/* Search input — grows to fill space */}
+          <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>
+
+          {/* Filters — inline, right of search */}
+          <div className="flex flex-wrap items-center gap-2">
+            <Select
+              value={filtroStatusInput}
+              onValueChange={setFiltroStatusInput}
+            >
+              <SelectTrigger className="h-9 w-[130px] text-sm">
+                <SelectValue placeholder={t('table.headers.status')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="todos">
+                  {t('filters.allStatuses')}
+                </SelectItem>
+                <SelectItem value="ativo">{t('status.active')}</SelectItem>
+                <SelectItem value="rascunho">{t('status.draft')}</SelectItem>
+                <SelectItem value="arquivado">
+                  {t('status.archived')}
+                </SelectItem>
+              </SelectContent>
+            </Select>
 
-        {/* Bulk actions bar */}
-        <AnimatePresence>
-          {selectedIds.size > 0 && (
-            <motion.div
-              initial={{ opacity: 0, y: -8, height: 0 }}
-              animate={{ opacity: 1, y: 0, height: 'auto' }}
-              exit={{ opacity: 0, y: -8, height: 0 }}
-              transition={{ duration: 0.2 }}
-              className="mb-4 overflow-hidden"
+            <Select
+              value={filtroNivelInput}
+              onValueChange={setFiltroNivelInput}
             >
-              <div className="flex items-center gap-3 rounded-lg border bg-muted/50 px-4 py-2.5">
-                <CheckSquare className="size-4 text-muted-foreground" />
-                <span className="text-sm font-medium">
+              <SelectTrigger className="h-9 w-[130px] text-sm">
+                <SelectValue placeholder={t('table.headers.level')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="todos">{t('filters.allLevels')}</SelectItem>
+                <SelectItem value="iniciante">
+                  {t('levels.beginner')}
+                </SelectItem>
+                <SelectItem value="intermediario">
+                  {t('levels.intermediate')}
+                </SelectItem>
+                <SelectItem value="avancado">{t('levels.advanced')}</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Select value={filtroCatInput} onValueChange={setFiltroCatInput}>
+              <SelectTrigger className="h-9 w-[130px] text-sm">
+                <SelectValue placeholder={t('table.headers.categories')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="todos">
+                  {t('filters.allCategories')}
+                </SelectItem>
+                {CATEGORIAS.map((c) => (
+                  <SelectItem key={c} value={c}>
+                    {c}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            {hasActiveFilters && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={clearFilters}
+                className="h-9 text-muted-foreground"
+              >
+                <X className="mr-1 size-3.5" />
+                {t('filters.clear')}
+              </Button>
+            )}
+
+            {/* Submit button */}
+            <Button type="submit" size="sm" className="h-9 gap-2">
+              <Search className="size-3.5" />
+              {t('filters.search')}
+            </Button>
+          </div>
+        </div>
+      </form>
+
+      {/* ── Bulk action bar ───────────────────────────────────────────────── */}
+      <AnimatePresence>
+        {selectedIds.size > 0 && (
+          <motion.div
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            className="mb-4"
+          >
+            <Card className="border-foreground/20 bg-foreground">
+              <CardContent className="flex flex-wrap items-center gap-3 p-3">
+                <span className="text-sm font-medium text-background">
                   {t('bulkActions.selected', { count: selectedIds.size })}
                 </span>
-                <Separator orientation="vertical" className="h-5" />
+                <Separator
+                  orientation="vertical"
+                  className="h-5 bg-background/20"
+                />
                 <Button
-                  variant="outline"
                   size="sm"
-                  className="h-7 gap-1.5 text-xs"
-                  onClick={bulkArchive}
+                  variant="secondary"
+                  className="gap-1.5"
+                  onClick={() => {
+                    toast.info(
+                      t('toasts.coursesArchived', { count: selectedIds.size })
+                    );
+                    setSelectedIds(new Set());
+                  }}
                 >
-                  <Archive className="size-3" />
-                  {t('bulkActions.archive')}
+                  <Archive className="size-3.5" /> {t('bulkActions.archive')}
                 </Button>
                 <Button
-                  variant="outline"
                   size="sm"
-                  className="h-7 gap-1.5 text-xs text-destructive hover:text-destructive"
-                  onClick={bulkDelete}
+                  variant="secondary"
+                  className="gap-1.5 text-destructive hover:text-destructive"
+                  onClick={() => {
+                    setCursos((p) => p.filter((c) => !selectedIds.has(c.id)));
+                    toast.success(
+                      t('toasts.coursesRemoved', { count: selectedIds.size })
+                    );
+                    setSelectedIds(new Set());
+                  }}
                 >
-                  <Trash2 className="size-3" />
-                  {t('bulkActions.delete')}
+                  <Trash2 className="size-3.5" /> {t('bulkActions.delete')}
                 </Button>
                 <Button
-                  variant="ghost"
                   size="sm"
-                  className="ml-auto h-7 text-xs"
+                  variant="ghost"
+                  className="ml-auto text-background hover:text-background/80"
                   onClick={() => setSelectedIds(new Set())}
                 >
                   {t('bulkActions.clearSelection')}
                 </Button>
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        {/* Table */}
-        <motion.div variants={fadeUp}>
-          {loading ? (
-            <Card>
-              <CardContent className="p-0">
-                <div className="p-4">
-                  {Array.from({ length: 8 }).map((_, i) => (
-                    <div
-                      key={i}
-                      className="flex items-center gap-4 border-b py-4 last:border-0"
-                    >
-                      <Skeleton className="size-4 rounded" />
-                      <Skeleton className="h-4 w-20" />
-                      <Skeleton className="h-4 w-40" />
-                      <Skeleton className="h-5 w-20 rounded-full" />
-                      <Skeleton className="h-5 w-16 rounded-full" />
-                      <Skeleton className="h-5 w-20 rounded-full" />
-                      <Skeleton className="ml-auto size-8 rounded-md" />
-                    </div>
-                  ))}
+              </CardContent>
+            </Card>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* ── 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">
+                <div className="mb-3 flex items-start justify-between">
+                  <Skeleton className="h-5 w-20 rounded-full" />
+                  <Skeleton className="size-8 rounded-md" />
+                </div>
+                <Skeleton className="mb-1.5 h-5 w-3/4" />
+                <Skeleton className="mb-4 h-4 w-full" />
+                <Skeleton className="mb-4 h-4 w-2/3" />
+                <div className="flex gap-2">
+                  <Skeleton className="h-6 w-16 rounded-full" />
+                  <Skeleton className="h-6 w-20 rounded-full" />
                 </div>
               </CardContent>
             </Card>
-          ) : (
-            <Card>
-              <CardContent className="p-0">
-                <div className="overflow-x-auto">
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead className="w-[40px]">
-                          <Checkbox
-                            checked={allPageSelected}
-                            onCheckedChange={toggleSelectAll}
-                            aria-label={t('table.selectAll')}
-                          />
-                        </TableHead>
-                        <TableHead className="w-[100px]">
-                          {t('table.headers.code')}
-                        </TableHead>
-                        <TableHead>{t('table.headers.title')}</TableHead>
-                        <TableHead className="hidden md:table-cell">
-                          {t('table.headers.level')}
-                        </TableHead>
-                        <TableHead>{t('table.headers.status')}</TableHead>
-                        <TableHead className="hidden lg:table-cell">
-                          {t('table.headers.categories')}
-                        </TableHead>
-                        <TableHead className="hidden sm:table-cell text-right">
-                          {t('table.headers.students')}
-                        </TableHead>
-                        <TableHead className="w-[50px]" />
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      <AnimatePresence mode="popLayout">
-                        {paginatedCursos.map((curso) => (
-                          <motion.tr
-                            key={curso.id}
-                            layout
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            exit={{ opacity: 0, x: -20 }}
-                            transition={{ duration: 0.2 }}
-                            className="group border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
-                            data-state={
-                              selectedIds.has(curso.id) ? 'selected' : undefined
-                            }
-                          >
-                            <TableCell>
-                              <Checkbox
-                                checked={selectedIds.has(curso.id)}
-                                onCheckedChange={() => toggleSelect(curso.id)}
-                                aria-label={t('table.selectCourse', {
-                                  title: curso.tituloComercial,
-                                })}
-                              />
-                            </TableCell>
-                            <TableCell>
-                              <code className="rounded bg-muted px-1.5 py-0.5 text-xs font-medium">
-                                {curso.codigo}
-                              </code>
-                            </TableCell>
-                            <TableCell>
-                              <div className="flex flex-col">
-                                <span className="font-medium">
-                                  {curso.tituloComercial}
-                                </span>
-                                <span className="text-xs text-muted-foreground">
-                                  {curso.nomeInterno}
-                                </span>
-                              </div>
-                            </TableCell>
-                            <TableCell className="hidden md:table-cell">
-                              <Badge
-                                variant="outline"
-                                className="text-xs font-normal"
+          ))}
+        </div>
+      ) : filteredCursos.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-20 text-center">
+          <BookOpen className="mb-4 size-12 text-muted-foreground/40" />
+          <p className="text-lg font-medium">{t('table.empty.title')}</p>
+          <p className="mt-1 text-sm text-muted-foreground">
+            {t('table.empty.description')}
+          </p>
+          <Button className="mt-6 gap-2" onClick={openCreateSheet}>
+            <Plus className="size-4" />
+            {t('actions.createCourse')}
+          </Button>
+        </div>
+      ) : (
+        <motion.div
+          className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
+          variants={stagger}
+          initial="hidden"
+          animate="show"
+        >
+          {paginatedCursos.map((curso) => {
+            const nivelColor = NIVEL_COLOR[curso.nivel];
+            const statusVariant = STATUS_VARIANT[curso.status];
+            const isSelected = selectedIds.has(curso.id);
+
+            return (
+              <motion.div key={curso.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 ${isSelected ? 'ring-2 ring-primary ring-offset-2' : ''}`}
+                  onClick={() => handleCardClick(curso)}
+                  title={t('cards.tooltip')}
+                >
+                  {/* Top accent */}
+                  <div className="h-1 w-full bg-foreground" />
+
+                  {/* Selection checkbox */}
+                  <div
+                    className="absolute left-4 top-5 z-10 opacity-0 transition-opacity group-hover:opacity-100 data-[selected=true]:opacity-100"
+                    data-selected={isSelected}
+                  >
+                    <Checkbox
+                      checked={isSelected}
+                      onCheckedChange={() => {}}
+                      onClick={(e) => toggleSelect(curso.id, e)}
+                      aria-label={t('table.selectCourse', {
+                        title: curso.tituloComercial,
+                      })}
+                      className="border-2 bg-background shadow-sm"
+                    />
+                  </div>
+
+                  <CardContent className="p-5">
+                    {/* Header with Logo + Title + Actions */}
+                    <div className="mb-4 flex items-start gap-4">
+                      {/* Logo placeholder */}
+                      <div className="flex size-14 shrink-0 items-center justify-center rounded-xl bg-muted border">
+                        <BookOpen className="size-7 text-foreground" />
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <div className="mb-1.5 flex items-start justify-between gap-2">
+                          <h3 className="line-clamp-2 font-semibold leading-snug text-foreground">
+                            {curso.tituloComercial}
+                          </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('table.actions.label')}
                               >
-                                {t(
-                                  `levels.${curso.nivel === 'iniciante' ? 'beginner' : curso.nivel === 'intermediario' ? 'intermediate' : 'advanced'}`
-                                )}
-                              </Badge>
-                            </TableCell>
-                            <TableCell>
-                              <Badge
-                                variant={
-                                  STATUS_MAP[curso.status]?.variant || 'default'
-                                }
+                                <MoreHorizontal className="size-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end" className="w-48">
+                              <DropdownMenuItem
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  router.push(`/lms/courses/${curso.id}`);
+                                }}
                               >
-                                {t(
-                                  `status.${curso.status === 'ativo' ? 'active' : curso.status === 'rascunho' ? 'draft' : 'archived'}`
-                                )}
-                              </Badge>
-                            </TableCell>
-                            <TableCell className="hidden lg:table-cell">
-                              <div className="flex flex-wrap gap-1">
-                                {curso.categorias.map((cat) => (
-                                  <Badge
-                                    key={cat}
-                                    variant="secondary"
-                                    className="text-[10px] font-normal"
-                                  >
-                                    {t(`categories.${cat}`)}
-                                  </Badge>
-                                ))}
-                              </div>
-                            </TableCell>
-                            <TableCell className="hidden sm:table-cell text-right tabular-nums text-muted-foreground">
-                              {curso.alunosInscritos.toLocaleString('pt-BR')}
-                            </TableCell>
-                            <TableCell>
-                              <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                  <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    className="size-8 opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100"
-                                  >
-                                    <MoreHorizontal className="size-4" />
-                                    <span className="sr-only">
-                                      {t('table.actions.label')}
-                                    </span>
-                                  </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent
-                                  align="end"
-                                  className="w-44"
-                                >
-                                  <DropdownMenuItem
-                                    onClick={() =>
-                                      router.push(`/cursos/${curso.id}`)
-                                    }
-                                    className="gap-2"
-                                  >
-                                    <Eye className="size-3.5" />
-                                    {t('table.actions.viewDetails')}
-                                  </DropdownMenuItem>
-                                  <DropdownMenuItem
-                                    onClick={() => openEditSheet(curso)}
-                                    className="gap-2"
-                                  >
-                                    <Pencil className="size-3.5" />
-                                    {t('table.actions.edit')}
-                                  </DropdownMenuItem>
-                                  <DropdownMenuItem
-                                    onClick={() => {
-                                      navigator.clipboard.writeText(
-                                        curso.codigo
-                                      );
-                                      toast.info(
-                                        t('toasts.codeCopied', {
-                                          code: curso.codigo,
-                                        })
-                                      );
-                                    }}
-                                    className="gap-2"
-                                  >
-                                    <Copy className="size-3.5" />
-                                    {t('table.actions.copyCode')}
-                                  </DropdownMenuItem>
-                                  <DropdownMenuSeparator />
-                                  <DropdownMenuItem
-                                    onClick={() => {
-                                      setCursoToDelete(curso);
-                                      setDeleteDialogOpen(true);
-                                    }}
-                                    className="gap-2 text-destructive focus:text-destructive"
-                                  >
-                                    <Trash2 className="size-3.5" />
-                                    {t('table.actions.delete')}
-                                  </DropdownMenuItem>
-                                </DropdownMenuContent>
-                              </DropdownMenu>
-                            </TableCell>
-                          </motion.tr>
-                        ))}
-                      </AnimatePresence>
-                      {paginatedCursos.length === 0 && (
-                        <TableRow>
-                          <TableCell colSpan={8} className="py-16 text-center">
-                            <div className="flex flex-col items-center gap-2">
-                              <BookOpen className="size-10 text-muted-foreground/40" />
-                              <p className="text-sm font-medium text-muted-foreground">
-                                {t('table.empty.title')}
-                              </p>
-                              <p className="text-xs text-muted-foreground/70">
-                                {t('table.empty.description')}
-                              </p>
-                            </div>
-                          </TableCell>
-                        </TableRow>
-                      )}
-                    </TableBody>
-                  </Table>
-                </div>
+                                <Eye className="mr-2 size-4" />{' '}
+                                {t('table.actions.viewDetails')}
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                onClick={(e) => openEditSheet(curso, e)}
+                              >
+                                <Pencil className="mr-2 size-4" />{' '}
+                                {t('table.actions.edit')}
+                              </DropdownMenuItem>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem
+                                className="text-destructive focus:text-destructive"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setCursoToDelete(curso);
+                                  setDeleteDialogOpen(true);
+                                }}
+                              >
+                                <Trash2 className="mr-2 size-4" />{' '}
+                                {t('table.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]">
+                            {curso.codigo}
+                          </code>
+                          <span className="mx-1.5 text-muted-foreground/50">
+                            |
+                          </span>
+                          <span>{curso.nomeInterno}</span>
+                        </p>
+                      </div>
+                    </div>
 
-                {/* Pagination */}
-                {filteredCursos.length > 0 && (
-                  <div className="flex flex-col items-center justify-between gap-3 border-t px-4 py-3 sm:flex-row">
-                    <p className="text-xs text-muted-foreground">
-                      {t('pagination.showing')}{' '}
-                      <span className="font-medium text-foreground">
-                        {(safePage - 1) * ITEMS_PER_PAGE + 1}
-                      </span>{' '}
-                      {t('pagination.to')}{' '}
-                      <span className="font-medium text-foreground">
-                        {Math.min(
-                          safePage * ITEMS_PER_PAGE,
-                          filteredCursos.length
+                    {/* Badges row */}
+                    <div className="mb-3 flex flex-wrap items-center gap-1.5 pl-[72px]">
+                      <span
+                        className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-[11px] font-medium ${nivelColor}`}
+                      >
+                        {t(
+                          `levels.${curso.nivel === 'iniciante' ? 'beginner' : curso.nivel === 'intermediario' ? 'intermediate' : 'advanced'}`
+                        )}
+                      </span>
+                      <Badge variant={statusVariant} className="text-[11px]">
+                        {t(
+                          `status.${curso.status === 'ativo' ? 'active' : curso.status === 'rascunho' ? 'draft' : 'archived'}`
                         )}
-                      </span>{' '}
-                      {t('pagination.of')}{' '}
-                      <span className="font-medium text-foreground">
-                        {filteredCursos.length}
-                      </span>{' '}
-                      {t('pagination.results')}
+                      </Badge>
+                      {curso.destaque && (
+                        <span className="inline-flex items-center gap-1 rounded-full bg-gradient-to-r from-amber-50 to-orange-50 px-2.5 py-0.5 text-[11px] font-medium text-amber-700 border border-amber-200/60 shadow-sm">
+                          <Star className="size-3 fill-amber-400 text-amber-400" />{' '}
+                          {t('form.flags.featured.label')}
+                        </span>
+                      )}
+                    </div>
+
+                    {/* Description */}
+                    <p className="mb-4 line-clamp-2 text-sm text-muted-foreground leading-relaxed">
+                      {curso.descricao}
                     </p>
-                    <div className="flex items-center gap-1">
-                      <Button
-                        variant="outline"
-                        size="icon"
-                        className="size-8"
-                        disabled={safePage === 1}
-                        onClick={() => setCurrentPage((p) => p - 1)}
-                        aria-label={t('pagination.previousPage')}
-                      >
-                        <ChevronLeft className="size-4" />
-                      </Button>
-                      {Array.from({ length: totalPages }).map((_, i) => (
-                        <Button
-                          key={i}
-                          variant={safePage === i + 1 ? 'default' : 'outline'}
-                          size="icon"
-                          className="size-8 text-xs"
-                          onClick={() => setCurrentPage(i + 1)}
+
+                    {/* Categories */}
+                    <div className="mb-4 flex flex-wrap gap-1.5">
+                      {curso.categorias.slice(0, 3).map((cat) => (
+                        <span
+                          key={cat}
+                          className="rounded-md bg-muted/80 px-2 py-0.5 text-[11px] font-medium text-muted-foreground"
                         >
-                          {i + 1}
-                        </Button>
+                          {cat}
+                        </span>
                       ))}
-                      <Button
-                        variant="outline"
-                        size="icon"
-                        className="size-8"
-                        disabled={safePage === totalPages}
-                        onClick={() => setCurrentPage((p) => p + 1)}
-                        aria-label={t('pagination.nextPage')}
-                      >
-                        <ChevronRight className="size-4" />
-                      </Button>
+                      {curso.categorias.length > 3 && (
+                        <span className="rounded-md bg-muted/60 px-2 py-0.5 text-[11px] text-muted-foreground">
+                          +{curso.categorias.length - 3}
+                        </span>
+                      )}
                     </div>
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-          )}
+
+                    {/* Footer stats */}
+                    <div className="flex items-center justify-between rounded-lg bg-muted/40 px-3 py-2.5">
+                      <div className="flex items-center gap-1.5">
+                        <Users className="size-4 text-muted-foreground" />
+                        <span className="text-sm font-medium">
+                          {curso.alunosInscritos.toLocaleString('pt-BR')}
+                        </span>
+                        <span className="text-xs text-muted-foreground">
+                          {t('cards.studentsLabel')}
+                        </span>
+                      </div>
+                      {curso.certificado && (
+                        <div className="flex items-center gap-1.5">
+                          <Award className="size-4 text-foreground" />
+                          <span className="text-xs font-medium">
+                            {t('form.flags.certificate.label')}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            );
+          })}
         </motion.div>
-      </motion.div>
+      )}
+
+      {/* ── Pagination footer ─────────────────────────────────────────────── */}
+      {!loading && filteredCursos.length > 0 && (
+        <div className="mt-6 flex flex-col items-center justify-between gap-4 sm:flex-row">
+          {/* Total count */}
+          <p className="text-sm text-muted-foreground">
+            {filteredCursos.length}{' '}
+            {filteredCursos.length === 1
+              ? t('pagination.course')
+              : t('pagination.courses')}{' '}
+            {filteredCursos.length === 1
+              ? t('pagination.found')
+              : t('pagination.foundPlural')}
+          </p>
 
-      {/* ── Sheet: Criar / Editar ──────────────────────────────────────────── */}
+          {/* Center: page nav */}
+          <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>
+
+          {/* Items per page */}
+          <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>
+      )}
+
+      {/* ── Create / Edit Sheet ────────────────────────────────────────────── */}
       <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
-        <SheetContent className="w-full overflow-y-auto sm:max-w-lg">
-          <SheetHeader>
+        <SheetContent
+          side="right"
+          className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+        >
+          <SheetHeader className="shrink-0">
             <SheetTitle>
               {editingCurso ? t('form.title.edit') : t('form.title.create')}
             </SheetTitle>
@@ -1115,13 +1260,13 @@ export default function CursosPage() {
 
           <form
             onSubmit={form.handleSubmit(onSubmit)}
-            className="mt-6 flex flex-col px-4 gap-5"
+            className="flex flex-1 flex-col gap-5 py-6 px-4"
           >
             {/* Codigo */}
-            <Field data-invalid={!!form.formState.errors.codigo}>
+            <Field>
               <FieldLabel htmlFor="codigo">
-                <Hash className="size-3.5 text-muted-foreground" />
-                {t('form.fields.code.label')}
+                {t('form.fields.code.label')}{' '}
+                <span className="text-destructive">*</span>
               </FieldLabel>
               <Input
                 id="codigo"
@@ -1129,78 +1274,73 @@ export default function CursosPage() {
                 className="uppercase"
                 {...form.register('codigo')}
               />
-              {form.formState.errors.codigo && (
-                <FieldError>{form.formState.errors.codigo.message}</FieldError>
-              )}
-              <FieldDescription>
-                {t('form.fields.code.description')}
-              </FieldDescription>
+              <FieldError>{form.formState.errors.codigo?.message}</FieldError>
             </Field>
 
-            {/* Nome Interno */}
-            <Field data-invalid={!!form.formState.errors.nomeInterno}>
+            {/* Nome interno */}
+            <Field>
               <FieldLabel htmlFor="nomeInterno">
-                {t('form.fields.internalName.label')}
+                {t('form.fields.internalName.label')}{' '}
+                <span className="text-destructive">*</span>
               </FieldLabel>
               <Input
                 id="nomeInterno"
                 placeholder={t('form.fields.internalName.placeholder')}
                 {...form.register('nomeInterno')}
               />
-              {form.formState.errors.nomeInterno && (
-                <FieldError>
-                  {form.formState.errors.nomeInterno.message}
-                </FieldError>
-              )}
               <FieldDescription>
                 {t('form.fields.internalName.description')}
               </FieldDescription>
+              <FieldError>
+                {form.formState.errors.nomeInterno?.message}
+              </FieldError>
             </Field>
 
-            {/* Titulo Comercial */}
-            <Field data-invalid={!!form.formState.errors.tituloComercial}>
+            {/* Titulo comercial */}
+            <Field>
               <FieldLabel htmlFor="tituloComercial">
-                {t('form.fields.commercialTitle.label')}
+                {t('form.fields.commercialTitle.label')}{' '}
+                <span className="text-destructive">*</span>
               </FieldLabel>
               <Input
                 id="tituloComercial"
                 placeholder={t('form.fields.commercialTitle.placeholder')}
                 {...form.register('tituloComercial')}
               />
-              {form.formState.errors.tituloComercial && (
-                <FieldError>
-                  {form.formState.errors.tituloComercial.message}
-                </FieldError>
-              )}
+              <FieldError>
+                {form.formState.errors.tituloComercial?.message}
+              </FieldError>
             </Field>
 
             {/* Descricao */}
-            <Field data-invalid={!!form.formState.errors.descricao}>
+            <Field>
               <FieldLabel htmlFor="descricao">
-                {t('form.fields.description.label')}
+                {t('form.fields.description.label')}{' '}
+                <span className="text-destructive">*</span>
               </FieldLabel>
               <Textarea
                 id="descricao"
+                rows={3}
                 placeholder={t('form.fields.description.placeholder')}
-                rows={4}
                 {...form.register('descricao')}
               />
-              {form.formState.errors.descricao && (
-                <FieldError>
-                  {form.formState.errors.descricao.message}
-                </FieldError>
-              )}
+              <FieldError>
+                {form.formState.errors.descricao?.message}
+              </FieldError>
             </Field>
 
-            {/* Nivel + Status side by side */}
+            {/* Nivel + Status */}
             <div className="grid grid-cols-2 gap-4">
-              <Field data-invalid={!!form.formState.errors.nivel}>
-                <FieldLabel>{t('form.fields.level.label')}</FieldLabel>
+              <Field>
+                <FieldLabel>
+                  {t('form.fields.level.label')}{' '}
+                  <span className="text-destructive">*</span>
+                </FieldLabel>
                 <Controller
-                  control={form.control}
                   name="nivel"
+                  control={form.control}
                   render={({ field }) => (
-                    <Select value={field.value} onValueChange={field.onChange}>
+                    <Select onValueChange={field.onChange} value={field.value}>
                       <SelectTrigger>
                         <SelectValue
                           placeholder={t('form.fields.level.placeholder')}
@@ -1220,18 +1360,18 @@ export default function CursosPage() {
                     </Select>
                   )}
                 />
-                {form.formState.errors.nivel && (
-                  <FieldError>{form.formState.errors.nivel.message}</FieldError>
-                )}
+                <FieldError>{form.formState.errors.nivel?.message}</FieldError>
               </Field>
-
-              <Field data-invalid={!!form.formState.errors.status}>
-                <FieldLabel>{t('form.fields.status.label')}</FieldLabel>
+              <Field>
+                <FieldLabel>
+                  {t('form.fields.status.label')}{' '}
+                  <span className="text-destructive">*</span>
+                </FieldLabel>
                 <Controller
-                  control={form.control}
                   name="status"
+                  control={form.control}
                   render={({ field }) => (
-                    <Select value={field.value} onValueChange={field.onChange}>
+                    <Select onValueChange={field.onChange} value={field.value}>
                       <SelectTrigger>
                         <SelectValue
                           placeholder={t('form.fields.status.placeholder')}
@@ -1251,128 +1391,91 @@ export default function CursosPage() {
                     </Select>
                   )}
                 />
-                {form.formState.errors.status && (
-                  <FieldError>
-                    {form.formState.errors.status.message}
-                  </FieldError>
-                )}
+                <FieldError>{form.formState.errors.status?.message}</FieldError>
               </Field>
             </div>
 
-            <Separator />
-
-            {/* Categorias - Multi select via checkboxes */}
-            <Field data-invalid={!!form.formState.errors.categorias}>
-              <FieldLabel>{t('form.fields.categories.label')}</FieldLabel>
-              <FieldDescription>
-                {t('form.fields.categories.description')}
-              </FieldDescription>
+            {/* Categorias */}
+            <Field>
+              <FieldLabel>
+                {t('form.fields.categories.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
               <Controller
-                control={form.control}
                 name="categorias"
+                control={form.control}
                 render={({ field }) => (
-                  <div className="grid grid-cols-2 gap-2.5">
-                    {CATEGORIAS.map((cat) => {
-                      const checked = field.value.includes(cat);
-                      return (
-                        <label
-                          key={cat}
-                          className="flex cursor-pointer items-center gap-2.5 rounded-md border px-3 py-2 text-sm transition-colors hover:bg-muted/50 has-[:checked]:border-foreground has-[:checked]:bg-muted/50"
-                        >
-                          <Checkbox
-                            checked={checked}
-                            onCheckedChange={(isChecked) => {
-                              if (isChecked) {
-                                field.onChange([...field.value, cat]);
-                              } else {
-                                field.onChange(
-                                  field.value.filter((v: string) => v !== cat)
-                                );
-                              }
-                            }}
-                          />
-                          {t(`categories.${cat}`)}
-                        </label>
-                      );
-                    })}
+                  <div className="grid grid-cols-2 gap-2">
+                    {CATEGORIAS.map((cat) => (
+                      <label
+                        key={cat}
+                        className="flex cursor-pointer items-center gap-2 rounded-md border p-2.5 text-sm hover:bg-muted has-[:checked]:border-foreground has-[:checked]:bg-muted"
+                      >
+                        <Checkbox
+                          checked={field.value.includes(cat)}
+                          onCheckedChange={(checked) => {
+                            const next = checked
+                              ? [...field.value, cat]
+                              : field.value.filter((v) => v !== cat);
+                            field.onChange(next);
+                          }}
+                        />
+                        {cat}
+                      </label>
+                    ))}
                   </div>
                 )}
               />
-              {form.formState.errors.categorias && (
-                <FieldError>
-                  {form.formState.errors.categorias.message}
-                </FieldError>
-              )}
+              <FieldError>
+                {form.formState.errors.categorias?.message}
+              </FieldError>
             </Field>
 
-            <Separator />
-
             {/* Flags */}
-            <div className="flex flex-col gap-4">
+            <div className="space-y-3">
               <p className="text-sm font-medium">{t('form.flags.title')}</p>
-              <Controller
-                control={form.control}
-                name="destaque"
-                render={({ field }) => (
-                  <div className="flex items-center justify-between rounded-md border px-4 py-3">
-                    <div className="flex flex-col gap-0.5">
-                      <span className="text-sm font-medium">
-                        {t('form.flags.featured.label')}
-                      </span>
-                      <span className="text-xs text-muted-foreground">
-                        {t('form.flags.featured.description')}
-                      </span>
-                    </div>
-                    <Switch
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  </div>
-                )}
-              />
-              <Controller
-                control={form.control}
-                name="certificado"
-                render={({ field }) => (
-                  <div className="flex items-center justify-between rounded-md border px-4 py-3">
-                    <div className="flex flex-col gap-0.5">
-                      <span className="text-sm font-medium">
-                        {t('form.flags.certificate.label')}
-                      </span>
-                      <span className="text-xs text-muted-foreground">
-                        {t('form.flags.certificate.description')}
-                      </span>
-                    </div>
-                    <Switch
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  </div>
-                )}
-              />
-              <Controller
-                control={form.control}
-                name="listado"
-                render={({ field }) => (
-                  <div className="flex items-center justify-between rounded-md border px-4 py-3">
-                    <div className="flex flex-col gap-0.5">
-                      <span className="text-sm font-medium">
-                        {t('form.flags.listed.label')}
-                      </span>
-                      <span className="text-xs text-muted-foreground">
-                        {t('form.flags.listed.description')}
-                      </span>
-                    </div>
-                    <Switch
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
+              {(
+                [
+                  {
+                    name: 'destaque' as const,
+                    label: t('form.flags.featured.label'),
+                    desc: t('form.flags.featured.description'),
+                  },
+                  {
+                    name: 'certificado' as const,
+                    label: t('form.flags.certificate.label'),
+                    desc: t('form.flags.certificate.description'),
+                  },
+                  {
+                    name: 'listado' as const,
+                    label: t('form.flags.listed.label'),
+                    desc: t('form.flags.listed.description'),
+                  },
+                ] as const
+              ).map((flag) => (
+                <label
+                  key={flag.name}
+                  className="flex cursor-pointer items-center justify-between rounded-lg border p-3 hover:bg-muted"
+                >
+                  <div>
+                    <p className="text-sm font-medium">{flag.label}</p>
+                    <p className="text-xs text-muted-foreground">{flag.desc}</p>
                   </div>
-                )}
-              />
+                  <Controller
+                    name={flag.name}
+                    control={form.control}
+                    render={({ field }) => (
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    )}
+                  />
+                </label>
+              ))}
             </div>
 
-            <SheetFooter className="mt-2 gap-2 pb-6">
+            <SheetFooter className="mt-auto shrink-0 gap-2 pt-4 px-0">
               <Button type="submit" disabled={saving} className="gap-2">
                 {saving && <Loader2 className="size-4 animate-spin" />}
                 {editingCurso
@@ -1384,9 +1487,9 @@ export default function CursosPage() {
         </SheetContent>
       </Sheet>
 
-      {/* ── Dialog: Confirmar Exclusao ─────────────────────────────────────── */}
+      {/* ── Delete dialog ────────────────────���────────────────────────────── */}
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <DialogContent>
+        <DialogContent className="max-w-3xl">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
               <AlertTriangle className="size-5 text-destructive" />
@@ -1394,15 +1497,11 @@ export default function CursosPage() {
             </DialogTitle>
             <DialogDescription>
               {t('deleteDialog.description')}{' '}
-              <strong className="text-foreground">
-                {cursoToDelete?.tituloComercial}
-              </strong>
-              ?
-              {cursoToDelete && cursoToDelete.alunosInscritos > 0 && (
-                <span className="mt-2 flex items-center gap-1.5 rounded-md bg-amber-50 px-3 py-2 text-xs font-medium text-amber-700">
-                  <AlertTriangle className="size-3.5" />
+              <strong>{cursoToDelete?.tituloComercial}</strong>?
+              {(cursoToDelete?.alunosInscritos ?? 0) > 0 && (
+                <span className="mt-2 block rounded-md bg-destructive/10 p-2 text-destructive text-sm">
                   {t('deleteDialog.warning', {
-                    count: cursoToDelete.alunosInscritos,
+                    count: cursoToDelete?.alunosInscritos ?? 0,
                   })}
                 </span>
               )}
@@ -1420,8 +1519,7 @@ export default function CursosPage() {
               onClick={confirmDelete}
               className="gap-2"
             >
-              <Trash2 className="size-4" />
-              {t('deleteDialog.actions.delete')}
+              <Trash2 className="size-4" /> {t('deleteDialog.actions.delete')}
             </Button>
           </DialogFooter>
         </DialogContent>