@hed-hog/lms 0.0.304 → 0.0.306

package/hedhog/frontend/app/courses/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';
@@ -25,72 +27,50 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {
-  Field,
-  FieldDescription,
-  FieldError,
-  FieldLabel,
-} from '@/components/ui/field';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Separator } from '@/components/ui/separator';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Switch } from '@/components/ui/switch';
-import { Textarea } from '@/components/ui/textarea';
+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 { AnimatePresence, motion } from 'framer-motion';
 import {
   AlertTriangle,
   Archive,
   Award,
-  BarChart3,
   BookOpen,
   Eye,
-  FileCheck,
-  GraduationCap,
-  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 { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
-import { z } from 'zod';
-
-// ── Navigation ────────────────────────────────────────────────────────────────
+import {
+  CourseCategoryOption,
+  CourseFormSheet,
+  CourseSheetFormValues,
+  DEFAULT_COURSE_FORM_VALUES,
+  getCourseSheetSchema,
+} from '../_components/course-form-sheet';
 
-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 },
-];
+const API_COURSES_CACHE_KEY = 'lms:courses:api-cache';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -100,6 +80,8 @@ interface Curso {
   nomeInterno: string;
   tituloComercial: string;
   descricao: string;
+  primaryColor?: string | null;
+  secondaryColor?: string | null;
   nivel: 'iniciante' | 'intermediario' | 'avancado';
   status: 'ativo' | 'rascunho' | 'arquivado';
   categorias: string[];
@@ -110,60 +92,155 @@ interface Curso {
   criadoEm: string;
 }
 
-// ── Zod Schema ────────────────────────────────────────────────────────────────
-
-function getCursoSchema(t: (key: string) => string) {
-  return z.object({
-    codigo: z
-      .string()
-      .min(2, t('form.validation.codeMinLength'))
-      .max(16, t('form.validation.codeMaxLength'))
-      .regex(/^[A-Z0-9-]+$/i, t('form.validation.codePattern')),
-    nomeInterno: z.string().min(3, t('form.validation.internalNameMinLength')),
-    tituloComercial: z
-      .string()
-      .min(3, t('form.validation.commercialTitleMinLength')),
-    descricao: z.string().min(10, t('form.validation.descriptionMinLength')),
-    nivel: z.enum(['iniciante', 'intermediario', 'avancado'], {
-      errorMap: () => ({ message: t('form.validation.levelRequired') }),
-    }),
-    status: z.enum(['ativo', 'rascunho', 'arquivado'], {
-      errorMap: () => ({ message: t('form.validation.statusRequired') }),
-    }),
-    categorias: z
-      .array(z.string())
-      .min(1, t('form.validation.categoriesRequired')),
-    destaque: z.boolean(),
-    certificado: z.boolean(),
-    listado: z.boolean(),
-  });
-}
+type ApiCourse = {
+  id: number;
+  code: string;
+  slug: string;
+  title: string;
+  description: string;
+  primaryColor?: string | null;
+  primaryContrastColor?: string | null;
+  secondaryColor?: string | null;
+  secondaryContrastColor?: string | null;
+  level: 'beginner' | 'intermediate' | 'advanced';
+  status: 'draft' | 'published' | 'archived';
+  categories: string[];
+  isFeatured: boolean;
+  hasCertificate: boolean;
+  isListed: boolean;
+  enrollmentCount: number;
+  createdAt: string;
+};
 
-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;
+type ApiCourseList = {
+  data: ApiCourse[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage: number;
 };
 
-// ── Constants ─────────────────────────────────────────────────────────────────
+type ApiCourseStats = {
+  totalCourses: number;
+  publishedCourses: number;
+  featuredCourses: number;
+  totalStudents: number;
+};
 
-const CATEGORIAS = [
-  'Tecnologia',
-  'Design',
-  'Gestao',
-  'Marketing',
-  'Financas',
-  'Saude',
-  'Idiomas',
-  'Direito',
-];
+type ApiCategory = {
+  id: number;
+  slug: string;
+  name: string;
+  status?: 'active' | 'inactive';
+};
+
+type ApiCategoryList = {
+  data: ApiCategory[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+type Locale = {
+  id?: number;
+  code: string;
+  name: string;
+};
+
+type ViewMode = 'cards' | 'list';
+
+function normalizeEnumValue(value?: string | null) {
+  return String(value ?? '')
+    .trim()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase();
+}
+
+function toPtLevel(level?: string | null): CourseSheetFormValues['nivel'] {
+  const normalizedLevel = normalizeEnumValue(level);
+
+  if (normalizedLevel === 'iniciante' || normalizedLevel === 'beginner') {
+    return 'iniciante';
+  }
+  if (
+    normalizedLevel === 'intermediario' ||
+    normalizedLevel === 'intermediate'
+  ) {
+    return 'intermediario';
+  }
+  if (normalizedLevel === 'avancado' || normalizedLevel === 'advanced') {
+    return 'avancado';
+  }
+
+  return 'iniciante';
+}
+
+function toPtStatus(status?: string | null): CourseSheetFormValues['status'] {
+  const normalizedStatus = normalizeEnumValue(status);
+
+  if (
+    normalizedStatus === 'ativo' ||
+    normalizedStatus === 'active' ||
+    normalizedStatus === 'published'
+  ) {
+    return 'ativo';
+  }
+  if (normalizedStatus === 'rascunho' || normalizedStatus === 'draft') {
+    return 'rascunho';
+  }
+  if (normalizedStatus === 'arquivado' || normalizedStatus === 'archived') {
+    return 'arquivado';
+  }
+
+  return 'rascunho';
+}
+
+function mapApiCourse(course: ApiCourse): Curso {
+  return {
+    id: course.id,
+    codigo: course.code,
+    nomeInterno: course.slug,
+    tituloComercial: course.title,
+    descricao: course.description ?? '',
+    primaryColor: course.primaryColor ?? null,
+    secondaryColor: course.secondaryColor ?? null,
+    nivel: toPtLevel(course.level),
+    status: toPtStatus(course.status),
+    categorias: course.categories ?? [],
+    destaque: course.isFeatured,
+    certificado: course.hasCertificate,
+    listado: course.isListed,
+    alunosInscritos: course.enrollmentCount ?? 0,
+    criadoEm: course.createdAt ?? '',
+  };
+}
+
+function toApiLevel(level: CourseSheetFormValues['nivel']) {
+  if (level === 'iniciante') return 'beginner';
+  if (level === 'intermediario') return 'intermediate';
+  return 'advanced';
+}
+
+function toApiStatus(status: CourseSheetFormValues['status']) {
+  if (status === 'ativo') return 'published';
+  if (status === 'rascunho') return 'draft';
+  return 'archived';
+}
+
+function getContrastColor(hex: string) {
+  const cleaned = hex.replace('#', '');
+  if (cleaned.length !== 6) return '#FFFFFF';
+
+  const r = parseInt(cleaned.slice(0, 2), 16);
+  const g = parseInt(cleaned.slice(2, 4), 16);
+  const b = parseInt(cleaned.slice(4, 6), 16);
+
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.6 ? '#111827' : '#FFFFFF';
+}
+
+// ── Constants ─────────────────────────────────────────────────────────────────
 
 const NIVEL_COLOR: Record<string, string> = {
   iniciante: 'bg-emerald-50 text-emerald-700 border-emerald-200',
@@ -179,251 +256,6 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
 
 // ── Seed Data ─────────────────────────────────────────────────────────────────
 
-const initialCursos: Curso[] = [
-  {
-    id: 1,
-    codigo: 'REACT-ADV',
-    nomeInterno: 'react-avancado',
-    tituloComercial: 'React Avancado',
-    descricao:
-      'Curso completo de React com hooks, context e patterns avancados para aplicacoes modernas.',
-    nivel: 'avancado',
-    status: 'ativo',
-    categorias: ['Tecnologia'],
-    destaque: true,
-    certificado: true,
-    listado: true,
-    alunosInscritos: 245,
-    criadoEm: '2025-01-15',
-  },
-  {
-    id: 2,
-    codigo: 'UX-FUND',
-    nomeInterno: 'ux-fundamentals',
-    tituloComercial: 'UX Design Fundamentals',
-    descricao:
-      'Fundamentos de design de experiencia do usuario com ferramentas modernas e pesquisa.',
-    nivel: 'iniciante',
-    status: 'ativo',
-    categorias: ['Design'],
-    destaque: false,
-    certificado: true,
-    listado: true,
-    alunosInscritos: 189,
-    criadoEm: '2025-02-10',
-  },
-  {
-    id: 3,
-    codigo: 'GEST-AGIL',
-    nomeInterno: 'gestao-agil',
-    tituloComercial: 'Gestao de Projetos Ageis',
-    descricao:
-      'Metodologias ageis para gestao de projetos incluindo Scrum, Kanban e SAFe.',
-    nivel: 'intermediario',
-    status: 'ativo',
-    categorias: ['Gestao'],
-    destaque: true,
-    certificado: true,
-    listado: true,
-    alunosInscritos: 312,
-    criadoEm: '2025-01-20',
-  },
-  {
-    id: 4,
-    codigo: 'MKT-DIG',
-    nomeInterno: 'marketing-digital',
-    tituloComercial: 'Marketing Digital Completo',
-    descricao:
-      'Estrategias de marketing digital para negocios modernos incluindo SEO, SEM e redes sociais.',
-    nivel: 'intermediario',
-    status: 'rascunho',
-    categorias: ['Marketing'],
-    destaque: false,
-    certificado: false,
-    listado: false,
-    alunosInscritos: 0,
-    criadoEm: '2025-03-05',
-  },
-  {
-    id: 5,
-    codigo: 'PY-DS',
-    nomeInterno: 'python-data-science',
-    tituloComercial: 'Python para Data Science',
-    descricao:
-      'Introducao a Python focado em ciencia de dados, analise estatistica e machine learning.',
-    nivel: 'intermediario',
-    status: 'ativo',
-    categorias: ['Tecnologia'],
-    destaque: false,
-    certificado: true,
-    listado: true,
-    alunosInscritos: 178,
-    criadoEm: '2025-02-28',
-  },
-  {
-    id: 6,
-    codigo: 'NODE-API',
-    nomeInterno: 'node-completo',
-    tituloComercial: 'Node.js Completo',
-    descricao:
-      'Backend com Node.js, Express e bancos de dados relacionais e NoSQL para APIs robustas.',
-    nivel: 'avancado',
-    status: 'ativo',
-    categorias: ['Tecnologia'],
-    destaque: true,
-    certificado: true,
-    listado: true,
-    alunosInscritos: 156,
-    criadoEm: '2025-01-10',
-  },
-  {
-    id: 7,
-    codigo: 'FIGMA-INI',
-    nomeInterno: 'figma-iniciantes',
-    tituloComercial: 'Figma para Iniciantes',
-    descricao:
-      'Aprenda a usar o Figma do zero para criar interfaces profissionais e prototipos interativos.',
-    nivel: 'iniciante',
-    status: 'arquivado',
-    categorias: ['Design'],
-    destaque: false,
-    certificado: true,
-    listado: false,
-    alunosInscritos: 420,
-    criadoEm: '2024-11-05',
-  },
-  {
-    id: 8,
-    codigo: 'LIDER-COM',
-    nomeInterno: 'lideranca-comunicacao',
-    tituloComercial: 'Lideranca e Comunicacao',
-    descricao:
-      'Desenvolva habilidades de lideranca e comunicacao assertiva para ambientes corporativos.',
-    nivel: 'iniciante',
-    status: 'ativo',
-    categorias: ['Gestao'],
-    destaque: false,
-    certificado: true,
-    listado: true,
-    alunosInscritos: 98,
-    criadoEm: '2025-03-12',
-  },
-  {
-    id: 9,
-    codigo: 'SEO-ADV',
-    nomeInterno: 'seo-avancado',
-    tituloComercial: 'SEO Avancado',
-    descricao:
-      'Tecnicas avancadas de otimizacao para motores de busca, conteudo web e performance.',
-    nivel: 'avancado',
-    status: 'rascunho',
-    categorias: ['Marketing', 'Tecnologia'],
-    destaque: false,
-    certificado: false,
-    listado: false,
-    alunosInscritos: 0,
-    criadoEm: '2025-04-01',
-  },
-  {
-    id: 10,
-    codigo: 'TS-PRAT',
-    nomeInterno: 'typescript-pratica',
-    tituloComercial: 'TypeScript na Pratica',
-    descricao:
-      'TypeScript aplicado em projetos reais com boas praticas, design patterns e testes.',
-    nivel: 'intermediario',
-    status: 'ativo',
-    categorias: ['Tecnologia'],
-    destaque: true,
-    certificado: true,
-    listado: true,
-    alunosInscritos: 201,
-    criadoEm: '2025-02-15',
-  },
-  {
-    id: 11,
-    codigo: 'DS-SYS',
-    nomeInterno: 'design-system',
-    tituloComercial: 'Design System Completo',
-    descricao:
-      'Como criar e manter um design system escalavel para grandes equipes de produto.',
-    nivel: 'avancado',
-    status: 'ativo',
-    categorias: ['Design', 'Tecnologia'],
-    destaque: false,
-    certificado: true,
-    listado: true,
-    alunosInscritos: 87,
-    criadoEm: '2025-03-20',
-  },
-  {
-    id: 12,
-    codigo: 'EXCEL-BIZ',
-    nomeInterno: 'excel-negocios',
-    tituloComercial: 'Excel para Negocios',
-    descricao:
-      'Domine Excel com formulas avancadas, dashboards profissionais e analise de dados.',
-    nivel: 'iniciante',
-    status: 'ativo',
-    categorias: ['Gestao', 'Financas'],
-    destaque: false,
-    certificado: true,
-    listado: true,
-    alunosInscritos: 534,
-    criadoEm: '2024-10-15',
-  },
-  {
-    id: 13,
-    codigo: 'FIN-PESSOAL',
-    nomeInterno: 'financas-pessoais',
-    tituloComercial: 'Financas Pessoais',
-    descricao:
-      'Aprenda a gerenciar suas financas, investir e planejar sua aposentadoria de forma inteligente.',
-    nivel: 'iniciante',
-    status: 'ativo',
-    categorias: ['Financas'],
-    destaque: false,
-    certificado: true,
-    listado: true,
-    alunosInscritos: 342,
-    criadoEm: '2025-01-08',
-  },
-  {
-    id: 14,
-    codigo: 'FLUTTER-MOB',
-    nomeInterno: 'flutter-mobile',
-    tituloComercial: 'Flutter para Mobile',
-    descricao:
-      'Desenvolvimento de aplicativos moveis multiplataforma com Flutter e Dart do zero.',
-    nivel: 'intermediario',
-    status: 'ativo',
-    categorias: ['Tecnologia'],
-    destaque: true,
-    certificado: true,
-    listado: true,
-    alunosInscritos: 167,
-    criadoEm: '2025-04-02',
-  },
-  {
-    id: 15,
-    codigo: 'DIR-TRAB',
-    nomeInterno: 'direito-trabalhista',
-    tituloComercial: 'Direito Trabalhista Essencial',
-    descricao:
-      'Conceitos essenciais de direito trabalhista para gestores de RH e empreendedores.',
-    nivel: 'iniciante',
-    status: 'rascunho',
-    categorias: ['Direito', 'Gestao'],
-    destaque: false,
-    certificado: false,
-    listado: false,
-    alunosInscritos: 0,
-    criadoEm: '2025-04-10',
-  },
-];
-
-const PAGE_SIZES = [6, 12, 24];
-
 // ── Animations ────────────────────────────────────────────────────────────────
 
 const fadeUp = {
@@ -440,35 +272,34 @@ const stagger = {
 
 export default function CursosPage() {
   const t = useTranslations('lms.CoursesPage');
-  const pathname = usePathname();
   const router = useRouter();
+  const { request } = useApp();
 
   // UI
-  const [loading, setLoading] = useState(true);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [sheetOpen, setSheetOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [saving, setSaving] = useState(false);
 
   // Data
-  const [cursos, setCursos] = useState<Curso[]>(initialCursos);
   const [editingCurso, setEditingCurso] = useState<Curso | null>(null);
   const [cursoToDelete, setCursoToDelete] = useState<Curso | null>(null);
+  const [cachedCourseList, setCachedCourseList] =
+    useState<ApiCourseList | null>(null);
 
   // Selection
   const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
 
-  // Search/filter state (controlled by form submit)
+  // Search/filter state (reactive)
   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');
+  const [debouncedBuscaInput, setDebouncedBuscaInput] = useState('');
+  const [viewMode, setViewMode] = usePersistedViewMode<ViewMode>({
+    storageKey: 'lms:courses:view-mode',
+    defaultValue: 'cards',
+    allowedValues: ['cards', 'list'],
+  });
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
@@ -479,86 +310,243 @@ export default function CursosPage() {
     new Map()
   );
 
-  const form = useForm<CursoForm>({
-    resolver: zodResolver(getCursoSchema(t)),
-    defaultValues: {
-      codigo: '',
-      nomeInterno: '',
-      tituloComercial: '',
-      descricao: '',
-      nivel: 'iniciante',
-      status: 'rascunho',
-      categorias: [],
-      destaque: false,
-      certificado: true,
-      listado: false,
+  const form = useForm<CourseSheetFormValues>({
+    resolver: zodResolver(getCourseSheetSchema(t)),
+    defaultValues: DEFAULT_COURSE_FORM_VALUES,
+  });
+  const watchedFormValues = useWatch({ control: form.control });
+
+  const {
+    data: courseList,
+    refetch: refetchCourses,
+    isFetching,
+    isLoading,
+  } = useQuery<ApiCourseList>({
+    queryKey: [
+      'lms-courses',
+      currentPage,
+      pageSize,
+      debouncedBuscaInput,
+      filtroStatusInput,
+      filtroNivelInput,
+      filtroCatInput,
+    ],
+    queryFn: async () => {
+      const response = await request<ApiCourseList>({
+        url: '/lms/courses',
+        method: 'GET',
+        params: {
+          page: currentPage,
+          pageSize,
+          ...(debouncedBuscaInput ? { search: debouncedBuscaInput } : {}),
+          ...(filtroStatusInput !== 'todos'
+            ? {
+                status:
+                  filtroStatusInput === 'ativo'
+                    ? 'published'
+                    : filtroStatusInput === 'rascunho'
+                      ? 'draft'
+                      : 'archived',
+              }
+            : {}),
+          ...(filtroNivelInput !== 'todos'
+            ? {
+                level:
+                  filtroNivelInput === 'iniciante'
+                    ? 'beginner'
+                    : filtroNivelInput === 'intermediario'
+                      ? 'intermediate'
+                      : 'advanced',
+              }
+            : {}),
+          ...(filtroCatInput !== 'todos' ? { category: filtroCatInput } : {}),
+        },
+      });
+      return response.data;
     },
   });
 
   useEffect(() => {
-    const t = setTimeout(() => setLoading(false), 800);
-    return () => clearTimeout(t);
-  }, []);
+    const timer = setTimeout(() => {
+      setDebouncedBuscaInput(buscaInput.trim());
+    }, 350);
+    return () => clearTimeout(timer);
+  }, [buscaInput]);
 
-  // ── Filtering (applied on search submit) ─────────────────────────────────
-
-  const filteredCursos = useMemo(() => {
-    return cursos.filter((c) => {
-      const q = buscaApplied.toLowerCase();
-      const matchSearch =
-        !q ||
-        c.codigo.toLowerCase().includes(q) ||
-        c.tituloComercial.toLowerCase().includes(q) ||
-        c.nomeInterno.toLowerCase().includes(q);
-      const matchStatus =
-        filtroStatusApplied === 'todos' || c.status === filtroStatusApplied;
-      const matchNivel =
-        filtroNivelApplied === 'todos' || c.nivel === filtroNivelApplied;
-      const matchCategoria =
-        filtroCatApplied === 'todos' || c.categorias.includes(filtroCatApplied);
-      return matchSearch && matchStatus && matchNivel && matchCategoria;
-    });
+  useEffect(() => {
+    setCurrentPage(1);
   }, [
-    cursos,
-    buscaApplied,
-    filtroStatusApplied,
-    filtroNivelApplied,
-    filtroCatApplied,
+    debouncedBuscaInput,
+    filtroStatusInput,
+    filtroNivelInput,
+    filtroCatInput,
   ]);
 
-  const totalPages = Math.max(1, Math.ceil(filteredCursos.length / pageSize));
-  const safePage = Math.min(currentPage, totalPages);
-  const paginatedCursos = filteredCursos.slice(
-    (safePage - 1) * pageSize,
-    safePage * pageSize
+  const { data: statsData } = useQuery<ApiCourseStats>({
+    queryKey: ['lms-courses-stats'],
+    queryFn: async () => {
+      const response = await request<ApiCourseStats>({
+        url: '/lms/courses/stats',
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
+
+  const { data: categoryListData, refetch: refetchCategoryOptions } =
+    useQuery<ApiCategoryList>({
+      queryKey: ['category-options'],
+      queryFn: async () => {
+        const response = await request<ApiCategoryList>({
+          url: '/category',
+          method: 'GET',
+          params: {
+            page: 1,
+            pageSize: 500,
+            status: 'all',
+          },
+        });
+
+        const payload = response.data as ApiCategoryList | ApiCategory[];
+        if (Array.isArray(payload)) {
+          return {
+            data: payload,
+            total: payload.length,
+            page: 1,
+            pageSize: payload.length,
+          };
+        }
+
+        return payload;
+      },
+      initialData: {
+        data: [],
+        total: 0,
+        page: 1,
+        pageSize: 500,
+      },
+    });
+
+  useEffect(() => {
+    if (sheetOpen) {
+      refetchCategoryOptions();
+    }
+  }, [sheetOpen, refetchCategoryOptions]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    try {
+      const raw = window.localStorage.getItem(API_COURSES_CACHE_KEY);
+      if (!raw) return;
+      const parsed = JSON.parse(raw) as ApiCourseList;
+      if (parsed && Array.isArray(parsed.data)) setCachedCourseList(parsed);
+    } catch {
+      setCachedCourseList(null);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (!courseList) return;
+    window.localStorage.setItem(
+      API_COURSES_CACHE_KEY,
+      JSON.stringify(courseList)
+    );
+    setCachedCourseList(courseList);
+  }, [courseList]);
+
+  const effectiveCourseList = courseList ?? cachedCourseList;
+  const initialLoading = isLoading && !effectiveCourseList;
+  const cardsRefreshing = isFetching && !!effectiveCourseList;
+
+  const cursos = useMemo(
+    () => (effectiveCourseList?.data ?? []).map((item) => mapApiCourse(item)),
+    [effectiveCourseList]
+  );
+  const previewCurso = useMemo(() => {
+    if (!sheetOpen || !editingCurso) return null;
+
+    return {
+      ...editingCurso,
+      nomeInterno: watchedFormValues.nomeInterno ?? editingCurso.nomeInterno,
+      tituloComercial:
+        watchedFormValues.tituloComercial ?? editingCurso.tituloComercial,
+      descricao: watchedFormValues.descricao ?? editingCurso.descricao,
+      primaryColor: watchedFormValues.primaryColor ?? editingCurso.primaryColor,
+      secondaryColor:
+        watchedFormValues.secondaryColor ?? editingCurso.secondaryColor,
+      nivel:
+        (watchedFormValues.nivel as Curso['nivel'] | undefined) ??
+        editingCurso.nivel,
+      status:
+        (watchedFormValues.status as Curso['status'] | undefined) ??
+        editingCurso.status,
+      categorias: watchedFormValues.categorias ?? editingCurso.categorias,
+    } satisfies Curso;
+  }, [editingCurso, sheetOpen, watchedFormValues]);
+
+  const categoryOptions = useMemo<CourseCategoryOption[]>(
+    () =>
+      (categoryListData?.data ?? [])
+        .filter((category) => !!category.slug)
+        .map((category) => ({
+          value: category.slug,
+          label: category.name || category.slug,
+        }))
+        .sort((a, b) => a.label.localeCompare(b.label)),
+    [categoryListData]
   );
 
-  function handleSearch(e: React.FormEvent) {
-    e.preventDefault();
-    setBuscaApplied(buscaInput);
-    setFiltroStatusApplied(filtroStatusInput);
-    setFiltroNivelApplied(filtroNivelInput);
-    setFiltroCatApplied(filtroCatInput);
-    setCurrentPage(1);
-  }
+  const categoryLabelBySlug = useMemo(
+    () =>
+      categoryOptions.reduce<Record<string, string>>((acc, item) => {
+        acc[item.value] = item.label;
+        return acc;
+      }, {}),
+    [categoryOptions]
+  );
+
+  const paginatedCursos = useMemo(() => {
+    if (!previewCurso) return cursos;
 
+    return cursos.map((curso) =>
+      curso.id === previewCurso.id ? previewCurso : curso
+    );
+  }, [cursos, previewCurso]);
+  const totalPages = Math.max(1, effectiveCourseList?.lastPage ?? 1);
+  const safePage = Math.min(currentPage, totalPages);
   function clearFilters() {
     setBuscaInput('');
     setFiltroStatusInput('todos');
     setFiltroNivelInput('todos');
     setFiltroCatInput('todos');
-    setBuscaApplied('');
-    setFiltroStatusApplied('todos');
-    setFiltroNivelApplied('todos');
-    setFiltroCatApplied('todos');
+    setDebouncedBuscaInput('');
     setCurrentPage(1);
   }
 
   const hasActiveFilters =
-    buscaApplied ||
-    filtroStatusApplied !== 'todos' ||
-    filtroNivelApplied !== 'todos' ||
-    filtroCatApplied !== 'todos';
+    buscaInput ||
+    filtroStatusInput !== 'todos' ||
+    filtroNivelInput !== 'todos' ||
+    filtroCatInput !== 'todos';
+
+  function getLevelLabel(curso: Curso) {
+    return t(
+      `levels.${curso.nivel === 'iniciante' ? 'beginner' : curso.nivel === 'intermediario' ? 'intermediate' : 'advanced'}`
+    );
+  }
+
+  function getStatusLabel(curso: Curso) {
+    return t(
+      `status.${curso.status === 'ativo' ? 'active' : curso.status === 'rascunho' ? 'draft' : 'archived'}`
+    );
+  }
+
+  function openDeleteDialog(curso: Curso, e: React.MouseEvent) {
+    e.stopPropagation();
+    setCursoToDelete(curso);
+    setDeleteDialogOpen(true);
+  }
 
   // ── Double-click to navigate ──────────────────────────────────────────────
 
@@ -582,18 +570,11 @@ export default function CursosPage() {
     e.stopPropagation();
     setSelectedIds((prev) => {
       const next = new Set(prev);
-      next.has(id) ? next.delete(id) : next.add(id);
-      return next;
-    });
-  }
-
-  function toggleSelectAll() {
-    const allSelected = paginatedCursos.every((c) => selectedIds.has(c.id));
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      allSelected
-        ? paginatedCursos.forEach((c) => next.delete(c.id))
-        : paginatedCursos.forEach((c) => next.add(c.id));
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
       return next;
     });
   }
@@ -602,18 +583,7 @@ export default function CursosPage() {
 
   function openCreateSheet() {
     setEditingCurso(null);
-    form.reset({
-      codigo: '',
-      nomeInterno: '',
-      tituloComercial: '',
-      descricao: '',
-      nivel: 'iniciante',
-      status: 'rascunho',
-      categorias: [],
-      destaque: false,
-      certificado: true,
-      listado: false,
-    });
+    form.reset(DEFAULT_COURSE_FORM_VALUES);
     setSheetOpen(true);
   }
 
@@ -621,51 +591,70 @@ export default function CursosPage() {
     e?.stopPropagation();
     setEditingCurso(curso);
     form.reset({
-      codigo: curso.codigo,
       nomeInterno: curso.nomeInterno,
       tituloComercial: curso.tituloComercial,
       descricao: curso.descricao,
+      primaryColor: curso.primaryColor || '#1D4ED8',
+      secondaryColor: curso.secondaryColor || '#111827',
       nivel: curso.nivel,
       status: curso.status,
       categorias: curso.categorias,
-      destaque: curso.destaque,
-      certificado: curso.certificado,
-      listado: curso.listado,
     });
     setSheetOpen(true);
   }
 
-  async function onSubmit(data: CursoForm) {
+  async function onSubmit(data: CourseSheetFormValues) {
     setSaving(true);
-    await new Promise((r) => setTimeout(r, 500));
-    if (editingCurso) {
-      setCursos((prev) =>
-        prev.map((c) => (c.id === editingCurso.id ? { ...c, ...data } : c))
-      );
-      toast.success(t('toasts.courseUpdated'));
-      setSaving(false);
+    try {
+      const payload = {
+        slug: data.nomeInterno.trim(),
+        title: data.tituloComercial,
+        description: data.descricao,
+        level: toApiLevel(data.nivel),
+        status: toApiStatus(data.status),
+        categorySlugs: data.categorias,
+        primaryColor: data.primaryColor,
+        primaryContrastColor: getContrastColor(data.primaryColor),
+        secondaryColor: data.secondaryColor,
+        secondaryContrastColor: getContrastColor(data.secondaryColor),
+      };
+
+      if (editingCurso) {
+        await request({
+          url: `/lms/courses/${editingCurso.id}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        toast.success(t('toasts.courseUpdated'));
+      } else {
+        const response = await request<ApiCourse>({
+          url: '/lms/courses',
+          method: 'POST',
+          data: payload,
+        });
+
+        toast.success(t('toasts.courseCreated'));
+        if (response.data?.id) {
+          setTimeout(
+            () => router.push(`/lms/courses/${response.data.id}`),
+            400
+          );
+        }
+      }
+
+      await refetchCourses();
       setSheetOpen(false);
-    } else {
-      const newId = Date.now();
-      setCursos((prev) => [
-        {
-          id: newId,
-          ...data,
-          alunosInscritos: 0,
-          criadoEm: new Date().toISOString().split('T')[0] ?? '',
-        },
-        ...prev,
-      ]);
-      toast.success(t('toasts.courseCreated'));
+    } finally {
       setSaving(false);
-      setSheetOpen(false);
-      setTimeout(() => router.push(`/lms/courses/${newId}`), 400);
     }
   }
 
-  function confirmDelete() {
+  async function confirmDelete() {
     if (!cursoToDelete) return;
-    setCursos((prev) => prev.filter((c) => c.id !== cursoToDelete.id));
+    await request({
+      url: `/lms/courses/${cursoToDelete.id}`,
+      method: 'DELETE',
+    });
     setSelectedIds((prev) => {
       const n = new Set(prev);
       n.delete(cursoToDelete.id);
@@ -676,53 +665,69 @@ export default function CursosPage() {
     );
     setCursoToDelete(null);
     setDeleteDialogOpen(false);
+    await refetchCourses();
   }
 
   // ── 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 countDestaque = cursos.filter((c) => c.destaque).length;
+  const totalAlunos = statsData?.totalStudents ?? 0;
+  const countAtivos = statsData?.publishedCourses ?? 0;
+  const countDestaque = statsData?.featuredCourses ?? 0;
 
   const kpis = [
     {
-      label: t('kpis.totalCourses.label'),
-      valor: cursos.length,
-      sub: t('kpis.totalCourses.sub'),
+      key: 'total-courses',
+      title: t('kpis.totalCourses.label'),
+      value: statsData?.totalCourses ?? effectiveCourseList?.total ?? 0,
+      description: t('kpis.totalCourses.sub'),
       icon: BookOpen,
-      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.activeCourses.label'),
-      valor: countAtivos,
-      sub: t('kpis.activeCourses.sub'),
+      key: 'active-courses',
+      title: t('kpis.activeCourses.label'),
+      value: countAtivos,
+      description: t('kpis.activeCourses.sub'),
       icon: TrendingUp,
-      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.totalStudents.label'),
-      valor: totalAlunos.toLocaleString('pt-BR'),
-      sub: t('kpis.totalStudents.sub'),
+      key: 'total-students',
+      title: t('kpis.totalStudents.label'),
+      value: totalAlunos.toLocaleString('pt-BR'),
+      description: t('kpis.totalStudents.sub'),
       icon: Users,
-      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.featured.label'),
-      valor: countDestaque,
-      sub: t('kpis.featured.sub'),
+      key: 'featured-courses',
+      title: t('form.flags.featured.label'),
+      value: countDestaque,
       icon: Star,
-      iconBg: 'bg-muted',
-      iconColor: 'text-foreground',
+      layout: 'compact' as const,
+      accentClassName: 'from-amber-500/25 via-yellow-500/15 to-transparent',
+      iconContainerClassName: 'bg-amber-100 text-amber-700',
     },
   ];
 
-  const allPageSelected =
-    paginatedCursos.length > 0 &&
-    paginatedCursos.every((c) => selectedIds.has(c.id));
+  const { locales } = useApp();
+
+  const handleNewCourse = (): void => {
+    const nextLocaleData: Record<string, { name: string }> = {};
+    locales.forEach((locale: Locale) => {
+      nextLocaleData[locale.code] = {
+        name: '',
+      };
+    });
+    void nextLocaleData;
+    openCreateSheet();
+  };
 
   // ── Render ────────────────────────────────────────────────────────────────
 
@@ -740,147 +745,133 @@ export default function CursosPage() {
             label: t('breadcrumbs.courses'),
           },
         ]}
-        actions={
-          <Button onClick={openCreateSheet} className="gap-2">
-            <Plus className="size-4" />
-            {t('actions.createCourse')}
-          </Button>
-        }
+        actions={[
+          {
+            label: t('actions.createCourse'),
+            onClick: () => handleNewCourse(),
+            variant: 'default',
+          },
+        ]}
       />
 
-      {/* ── KPI Cards ────────────────────────────────────────────────────── */}
-      <div className="mb-6 grid grid-cols-2 gap-4 lg:grid-cols-4">
-        {loading
-          ? Array.from({ length: 4 }).map((_, i) => (
-              <Card key={i}>
-                <CardContent className="p-4">
-                  <Skeleton className="mb-2 h-8 w-16" />
-                  <Skeleton className="h-4 w-28" />
-                </CardContent>
-              </Card>
-            ))
-          : kpis.map((kpi, i) => (
-              <motion.div
-                key={kpi.label}
-                initial={{ opacity: 0, y: 12 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: i * 0.07 }}
-              >
-                <Card className="overflow-hidden">
-                  <CardContent className="flex items-start justify-between p-5">
-                    <div>
-                      <p className="text-sm text-muted-foreground">
-                        {kpi.label}
-                      </p>
-                      <p className="mt-1 text-3xl font-bold tracking-tight">
-                        {kpi.valor}
-                      </p>
-                      <p className="mt-0.5 text-xs text-muted-foreground">
-                        {kpi.sub}
-                      </p>
-                    </div>
-                    <div
-                      className={`flex size-10 shrink-0 items-center justify-center rounded-lg ${kpi.iconBg}`}
-                    >
-                      <kpi.icon className={`size-5 ${kpi.iconColor}`} />
-                    </div>
+      <motion.div
+        className="space-y-4"
+        variants={stagger}
+        initial="hidden"
+        animate="show"
+      >
+        <motion.div variants={fadeUp}>
+          {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>
-              </motion.div>
-            ))}
-      </div>
-
-      {/* ── Search bar ───────────────────────────────────────────────────── */}
-      <form onSubmit={handleSearch} className="mb-6 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>
+              ))}
+            </div>
+          ) : (
+            <KpiCardsGrid items={kpis} />
+          )}
+        </motion.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>
-
-            <Select
-              value={filtroNivelInput}
-              onValueChange={setFiltroNivelInput}
-            >
-              <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>
+        <motion.div
+          variants={fadeUp}
+          className="space-y-3 md:flex flex flex-col"
+        >
+          <SearchBar
+            searchQuery={buscaInput}
+            onSearchChange={setBuscaInput}
+            onSearch={() => {
+              setDebouncedBuscaInput(buscaInput.trim());
+              setCurrentPage(1);
+            }}
+            placeholder={t('filters.searchPlaceholder')}
+            controls={[
+              {
+                id: 'status',
+                type: 'select',
+                value: filtroStatusInput,
+                onChange: (value) =>
+                  setFiltroStatusInput(
+                    value === 'todos' ? value : toPtStatus(value)
+                  ),
+                placeholder: t('table.headers.status'),
+                options: [
+                  { value: 'todos', label: t('filters.allStatuses') },
+                  { value: 'ativo', label: t('status.active') },
+                  { value: 'rascunho', label: t('status.draft') },
+                  { value: 'arquivado', label: t('status.archived') },
+                ],
+              },
+              {
+                id: 'level',
+                type: 'select',
+                value: filtroNivelInput,
+                onChange: (value) =>
+                  setFiltroNivelInput(
+                    value === 'todos' ? value : toPtLevel(value)
+                  ),
+                placeholder: t('table.headers.level'),
+                options: [
+                  { value: 'todos', label: t('filters.allLevels') },
+                  { value: 'iniciante', label: t('levels.beginner') },
+                  {
+                    value: 'intermediario',
+                    label: t('levels.intermediate'),
+                  },
+                  { value: 'avancado', label: t('levels.advanced') },
+                ],
+              },
+              {
+                id: 'category',
+                type: 'select',
+                value: filtroCatInput,
+                onChange: setFiltroCatInput,
+                placeholder: t('table.headers.categories'),
+                options: [
+                  { value: 'todos', label: t('filters.allCategories') },
+                  ...categoryOptions,
+                ],
+              },
+            ]}
+            afterSearchButton={
+              <ViewModeToggle
+                viewMode={viewMode}
+                onViewModeChange={setViewMode}
+                listLabel={t('viewMode.list')}
+                cardsLabel={t('viewMode.cards')}
+              />
+            }
+          />
+
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <p className="text-sm text-muted-foreground">
+              {effectiveCourseList?.total ?? 0}{' '}
+              {(effectiveCourseList?.total ?? 0) === 1
+                ? t('pagination.course')
+                : t('pagination.courses')}
+            </p>
+            <div className="flex items-center gap-2">
+              {hasActiveFilters && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={clearFilters}
+                >
+                  {t('filters.clear')}
+                </Button>
+              )}
+              {cardsRefreshing && (
+                <Loader2 className="size-4 animate-spin text-muted-foreground" />
+              )}
+            </div>
           </div>
-        </div>
-      </form>
+        </motion.div>
+      </motion.div>
 
       {/* ── Bulk action bar ───────────────────────────────────────────────── */}
       <AnimatePresence>
@@ -918,11 +909,17 @@ export default function CursosPage() {
                   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());
+                    Promise.all(
+                      Array.from(selectedIds).map((id) =>
+                        request({ url: `/lms/courses/${id}`, method: 'DELETE' })
+                      )
+                    ).then(async () => {
+                      toast.success(
+                        t('toasts.coursesRemoved', { count: selectedIds.size })
+                      );
+                      setSelectedIds(new Set());
+                      await refetchCourses();
+                    });
                   }}
                 >
                   <Trash2 className="size-3.5" /> {t('bulkActions.delete')}
@@ -941,93 +938,379 @@ export default function CursosPage() {
         )}
       </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>
-          ))}
-        </div>
-      ) : filteredCursos.length === 0 ? (
+      {/* ── Course 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">
+                  <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>
+            ))}
+          </div>
+        ) : (
+          <div className="overflow-hidden rounded-xl border border-border/70">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-10" />
+                  <TableHead>{t('table.headers.name')}</TableHead>
+                  <TableHead>{t('table.headers.level')}</TableHead>
+                  <TableHead>{t('table.headers.status')}</TableHead>
+                  <TableHead>{t('table.headers.categories')}</TableHead>
+                  <TableHead className="text-right">
+                    {t('cards.studentsLabel')}
+                  </TableHead>
+                  <TableHead className="w-12" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <TableRow key={i}>
+                    <TableCell>
+                      <Skeleton className="size-4 rounded-sm" />
+                    </TableCell>
+                    <TableCell>
+                      <div className="space-y-1.5">
+                        <Skeleton className="h-4 w-44" />
+                        <Skeleton className="h-3 w-28" />
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-5 w-20 rounded-full" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-5 w-20 rounded-full" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-5 w-28 rounded-full" />
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Skeleton className="ml-auto h-4 w-12" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="ml-auto size-8 rounded-md" />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )
+      ) : (effectiveCourseList?.total ?? 0) === 0 ? (
         <EmptyState
-          icon={<BookOpen className="h-12 w-12" />}
+          icon={<BookOpen className="size-12 text-muted-foreground/40" />}
           title={t('table.empty.title')}
           description={t('table.empty.description')}
           actionLabel={t('actions.createCourse')}
+          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"
-        >
-          {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}
+        <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"
+            >
+              {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}
+                    className="h-full"
                   >
-                    <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>
+                    <Card
+                      className={`group relative flex h-full cursor-pointer flex-col overflow-hidden border-border/70 shadow-sm transition-all duration-200 hover:border-border hover:shadow-md ${isSelected ? 'ring-2 ring-primary ring-offset-2' : ''}`}
+                      onClick={() => handleCardClick(curso)}
+                      title={t('cards.tooltip')}
+                    >
+                      <div
+                        className="absolute inset-x-0 top-0 h-1"
+                        style={{
+                          backgroundColor: curso.primaryColor || '#1D4ED8',
+                        }}
+                      />
 
-                  <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
+                        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>
-                      <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>
+
+                      <CardContent className="flex h-full flex-col p-4">
+                        <div className="mb-3 flex items-start gap-3">
+                          <div className="flex size-12 shrink-0 items-center justify-center rounded-xl border bg-muted/60">
+                            <BookOpen className="size-6 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')}
+                                  >
+                                    <MoreHorizontal className="size-4" />
+                                  </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent
+                                  align="end"
+                                  className="w-48"
+                                >
+                                  <DropdownMenuItem
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      router.push(`/lms/courses/${curso.id}`);
+                                    }}
+                                  >
+                                    <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) => openDeleteDialog(curso, e)}
+                                  >
+                                    <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>
+
+                        <div className="mb-3 flex flex-wrap items-center gap-1.5">
+                          <span
+                            className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-[11px] font-medium ${nivelColor}`}
+                          >
+                            {getLevelLabel(curso)}
+                          </span>
+                          <Badge
+                            variant={statusVariant}
+                            className="text-[11px]"
+                          >
+                            {getStatusLabel(curso)}
+                          </Badge>
+                          {curso.destaque && (
+                            <span className="inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-[11px] font-medium text-amber-700">
+                              <Star className="size-3 fill-amber-400 text-amber-400" />{' '}
+                              {t('form.flags.featured.label')}
+                            </span>
+                          )}
+                        </div>
+
+                        <p className="mb-4 line-clamp-2 text-sm leading-relaxed text-muted-foreground">
+                          {curso.descricao}
+                        </p>
+
+                        <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"
+                            >
+                              {categoryLabelBySlug[cat] || cat}
+                            </span>
+                          ))}
+                          {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 className="mt-auto 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>
+          ) : (
+            <div
+              className={`overflow-hidden rounded-xl border border-border/70 ${cardsRefreshing ? 'pointer-events-none' : ''}`}
+            >
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-10" />
+                    <TableHead>{t('table.headers.name')}</TableHead>
+                    <TableHead>{t('table.headers.level')}</TableHead>
+                    <TableHead>{t('table.headers.status')}</TableHead>
+                    <TableHead>{t('table.headers.categories')}</TableHead>
+                    <TableHead className="text-right">
+                      {t('cards.studentsLabel')}
+                    </TableHead>
+                    <TableHead className="w-12" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {paginatedCursos.map((curso) => {
+                    const nivelColor = NIVEL_COLOR[curso.nivel];
+                    const statusVariant = STATUS_VARIANT[curso.status];
+                    const isSelected = selectedIds.has(curso.id);
+
+                    return (
+                      <TableRow
+                        key={curso.id}
+                        className="cursor-pointer"
+                        data-state={isSelected ? 'selected' : undefined}
+                        onClick={() => handleCardClick(curso)}
+                        title={t('cards.tooltip')}
+                      >
+                        <TableCell onClick={(e) => e.stopPropagation()}>
+                          <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"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <div className="min-w-0">
+                            <p className="truncate font-semibold text-foreground">
+                              {curso.tituloComercial}
+                            </p>
+                            <p className="mt-1 truncate 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>
+                        </TableCell>
+                        <TableCell>
+                          <span
+                            className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-[11px] font-medium ${nivelColor}`}
+                          >
+                            {getLevelLabel(curso)}
+                          </span>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex flex-wrap items-center gap-1.5">
+                            <Badge
+                              variant={statusVariant}
+                              className="text-[11px]"
+                            >
+                              {getStatusLabel(curso)}
+                            </Badge>
+                            {curso.destaque && (
+                              <span className="inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[11px] font-medium text-amber-700">
+                                <Star className="size-3 fill-amber-400 text-amber-400" />
+                              </span>
+                            )}
+                            {curso.certificado && (
+                              <span className="inline-flex items-center gap-1 rounded-full border bg-muted/70 px-2 py-0.5 text-[11px] font-medium text-foreground">
+                                <Award className="size-3.5" />
+                              </span>
+                            )}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex flex-wrap gap-1">
+                            {curso.categorias.slice(0, 2).map((cat) => (
+                              <span
+                                key={cat}
+                                className="rounded-md bg-muted/80 px-2 py-0.5 text-[11px] font-medium text-muted-foreground"
+                              >
+                                {categoryLabelBySlug[cat] || cat}
+                              </span>
+                            ))}
+                            {curso.categorias.length > 2 && (
+                              <span className="rounded-md bg-muted/60 px-2 py-0.5 text-[11px] text-muted-foreground">
+                                +{curso.categorias.length - 2}
+                              </span>
+                            )}
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-right font-medium">
+                          {curso.alunosInscritos.toLocaleString('pt-BR')}
+                        </TableCell>
+                        <TableCell onClick={(e) => e.stopPropagation()}>
                           <DropdownMenu>
                             <DropdownMenuTrigger asChild>
                               <Button
                                 variant="ghost"
                                 size="icon"
-                                className="size-8 shrink-0 -mr-2 -mt-1"
-                                onClick={(e) => e.stopPropagation()}
+                                className="ml-auto size-8"
                                 aria-label={t('table.actions.label')}
                               >
                                 <MoreHorizontal className="size-4" />
@@ -1035,16 +1318,15 @@ export default function CursosPage() {
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end" className="w-48">
                               <DropdownMenuItem
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  router.push(`/lms/courses/${curso.id}`);
-                                }}
+                                onClick={() =>
+                                  router.push(`/lms/courses/${curso.id}`)
+                                }
                               >
                                 <Eye className="mr-2 size-4" />{' '}
                                 {t('table.actions.viewDetails')}
                               </DropdownMenuItem>
                               <DropdownMenuItem
-                                onClick={(e) => openEditSheet(curso, e)}
+                                onClick={() => openEditSheet(curso)}
                               >
                                 <Pencil className="mr-2 size-4" />{' '}
                                 {t('table.actions.edit')}
@@ -1052,365 +1334,59 @@ export default function CursosPage() {
                               <DropdownMenuSeparator />
                               <DropdownMenuItem
                                 className="text-destructive focus:text-destructive"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  setCursoToDelete(curso);
-                                  setDeleteDialogOpen(true);
-                                }}
+                                onClick={(e) => openDeleteDialog(curso, e)}
                               >
                                 <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>
-
-                    {/* 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'}`
-                        )}
-                      </Badge>
-                      {curso.destaque && (
-                        <span className="inline-flex items-center gap-1 rounded-full border border-amber-200/60 bg-linear-to-r from-amber-50 to-orange-50 px-2.5 py-0.5 text-[11px] font-medium text-amber-700 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>
-
-                    {/* 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"
-                        >
-                          {cat}
-                        </span>
-                      ))}
-                      {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>
-
-                    {/* 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>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </div>
       )}
 
       {/* ── Pagination footer ─────────────────────────────────────────────── */}
-      {!loading && filteredCursos.length > 0 && (
+      {!initialLoading && (effectiveCourseList?.total ?? 0) > 0 && (
         <div className="mt-6">
           <PaginationFooter
             currentPage={safePage}
             pageSize={pageSize}
-            totalItems={filteredCursos.length}
+            totalItems={effectiveCourseList?.total ?? 0}
             onPageChange={setCurrentPage}
-            onPageSizeChange={(nextSize) => {
-              setPageSize(nextSize);
+            onPageSizeChange={(nextPageSize) => {
+              setPageSize(nextPageSize);
               setCurrentPage(1);
             }}
-            pageSizeOptions={PAGE_SIZES}
+            pageSizeOptions={[6, 12, 24]}
             selectedCount={selectedIds.size}
           />
         </div>
       )}
 
       {/* ── Create / Edit Sheet ────────────────────────────────────────────── */}
-      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
-        <SheetContent
-          side="right"
-          className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
-        >
-          <SheetHeader className="shrink-0">
-            <SheetTitle>
-              {editingCurso ? t('form.title.edit') : t('form.title.create')}
-            </SheetTitle>
-            <SheetDescription>
-              {editingCurso
-                ? t('form.description.edit')
-                : t('form.description.create')}
-            </SheetDescription>
-          </SheetHeader>
-
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="flex flex-1 flex-col gap-5 py-6 px-4"
-          >
-            {/* Codigo */}
-            <Field>
-              <FieldLabel htmlFor="codigo">
-                {t('form.fields.code.label')}{' '}
-                <span className="text-destructive">*</span>
-              </FieldLabel>
-              <Input
-                id="codigo"
-                placeholder={t('form.fields.code.placeholder')}
-                className="uppercase"
-                {...form.register('codigo')}
-              />
-              <FieldError>{form.formState.errors.codigo?.message}</FieldError>
-            </Field>
-
-            {/* Nome interno */}
-            <Field>
-              <FieldLabel htmlFor="nomeInterno">
-                {t('form.fields.internalName.label')}{' '}
-                <span className="text-destructive">*</span>
-              </FieldLabel>
-              <Input
-                id="nomeInterno"
-                placeholder={t('form.fields.internalName.placeholder')}
-                {...form.register('nomeInterno')}
-              />
-              <FieldDescription>
-                {t('form.fields.internalName.description')}
-              </FieldDescription>
-              <FieldError>
-                {form.formState.errors.nomeInterno?.message}
-              </FieldError>
-            </Field>
-
-            {/* Titulo comercial */}
-            <Field>
-              <FieldLabel htmlFor="tituloComercial">
-                {t('form.fields.commercialTitle.label')}{' '}
-                <span className="text-destructive">*</span>
-              </FieldLabel>
-              <Input
-                id="tituloComercial"
-                placeholder={t('form.fields.commercialTitle.placeholder')}
-                {...form.register('tituloComercial')}
-              />
-              <FieldError>
-                {form.formState.errors.tituloComercial?.message}
-              </FieldError>
-            </Field>
-
-            {/* Descricao */}
-            <Field>
-              <FieldLabel htmlFor="descricao">
-                {t('form.fields.description.label')}{' '}
-                <span className="text-destructive">*</span>
-              </FieldLabel>
-              <Textarea
-                id="descricao"
-                rows={3}
-                placeholder={t('form.fields.description.placeholder')}
-                {...form.register('descricao')}
-              />
-              <FieldError>
-                {form.formState.errors.descricao?.message}
-              </FieldError>
-            </Field>
-
-            {/* Nivel + Status */}
-            <div className="grid grid-cols-2 gap-4">
-              <Field>
-                <FieldLabel>
-                  {t('form.fields.level.label')}{' '}
-                  <span className="text-destructive">*</span>
-                </FieldLabel>
-                <Controller
-                  name="nivel"
-                  control={form.control}
-                  render={({ field }) => (
-                    <Select onValueChange={field.onChange} value={field.value}>
-                      <SelectTrigger>
-                        <SelectValue
-                          placeholder={t('form.fields.level.placeholder')}
-                        />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="iniciante">
-                          {t('levels.beginner')}
-                        </SelectItem>
-                        <SelectItem value="intermediario">
-                          {t('levels.intermediate')}
-                        </SelectItem>
-                        <SelectItem value="avancado">
-                          {t('levels.advanced')}
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                  )}
-                />
-                <FieldError>{form.formState.errors.nivel?.message}</FieldError>
-              </Field>
-              <Field>
-                <FieldLabel>
-                  {t('form.fields.status.label')}{' '}
-                  <span className="text-destructive">*</span>
-                </FieldLabel>
-                <Controller
-                  name="status"
-                  control={form.control}
-                  render={({ field }) => (
-                    <Select onValueChange={field.onChange} value={field.value}>
-                      <SelectTrigger>
-                        <SelectValue
-                          placeholder={t('form.fields.status.placeholder')}
-                        />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="ativo">
-                          {t('status.active')}
-                        </SelectItem>
-                        <SelectItem value="rascunho">
-                          {t('status.draft')}
-                        </SelectItem>
-                        <SelectItem value="arquivado">
-                          {t('status.archived')}
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                  )}
-                />
-                <FieldError>{form.formState.errors.status?.message}</FieldError>
-              </Field>
-            </div>
-
-            {/* Categorias */}
-            <Field>
-              <FieldLabel>
-                {t('form.fields.categories.label')}{' '}
-                <span className="text-destructive">*</span>
-              </FieldLabel>
-              <Controller
-                name="categorias"
-                control={form.control}
-                render={({ field }) => (
-                  <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>
-                )}
-              />
-              <FieldError>
-                {form.formState.errors.categorias?.message}
-              </FieldError>
-            </Field>
-
-            {/* Flags */}
-            <div className="space-y-3">
-              <p className="text-sm font-medium">{t('form.flags.title')}</p>
-              {(
-                [
-                  {
-                    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-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
-                  ? t('form.actions.save')
-                  : t('form.actions.create')}
-              </Button>
-            </SheetFooter>
-          </form>
-        </SheetContent>
-      </Sheet>
+      <CourseFormSheet
+        key={editingCurso ? `edit-${editingCurso.id}` : 'new'}
+        open={sheetOpen}
+        onOpenChange={(open) => {
+          setSheetOpen(open);
+          if (!open) setEditingCurso(null);
+        }}
+        editing={!!editingCurso}
+        saving={saving}
+        form={form}
+        onSubmit={onSubmit}
+        categories={categoryOptions}
+        courseCode={editingCurso?.codigo}
+        onCreateCategory={() => router.push('/category?new=1')}
+        t={t}
+      />
 
       {/* ── Delete dialog ────────────────────���────────────────────────────── */}
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>