@hed-hog/lms 0.0.2

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

@@ -0,0 +1,1394 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { 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 {
+  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,
+  BarChart3,
+  BookOpen,
+  CheckSquare,
+  ChevronLeft,
+  ChevronRight,
+  Copy,
+  Eye,
+  FileCheck,
+  Filter,
+  GraduationCap,
+  Hash,
+  LayoutDashboard,
+  Loader2,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Search,
+  Trash2,
+  Users,
+  X,
+} from 'lucide-react';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+// ── Navigation ───────────────────────────────────────────────────────────────
+
+const NAV_ITEMS = [
+  { label: 'Dashboard', href: '/', icon: LayoutDashboard },
+  { label: 'Cursos', href: '/cursos', icon: BookOpen },
+  { label: 'Turmas', href: '/turmas', icon: Users },
+  { label: 'Exames', href: '/exames', icon: FileCheck },
+  { label: 'Formacoes', href: '/formacoes', icon: GraduationCap },
+  { label: 'Relatorios', href: '/relatorios', icon: BarChart3 },
+];
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+interface Curso {
+  id: number;
+  codigo: string;
+  nomeInterno: string;
+  tituloComercial: string;
+  descricao: string;
+  nivel: 'iniciante' | 'intermediario' | 'avancado';
+  status: 'ativo' | 'rascunho' | 'arquivado';
+  categorias: string[];
+  destaque: boolean;
+  certificado: boolean;
+  listado: boolean;
+  alunosInscritos: number;
+  criadoEm: string;
+}
+
+// ── Schema ───────────────────────────────────────────────────────────────────
+
+const cursoSchema = z.object({
+  codigo: z
+    .string()
+    .min(2, 'Codigo deve ter pelo menos 2 caracteres')
+    .max(16, 'Codigo deve ter no maximo 16 caracteres')
+    .regex(/^[A-Z0-9-]+$/i, 'Apenas letras, numeros e hifens'),
+  nomeInterno: z
+    .string()
+    .min(3, 'Nome interno deve ter pelo menos 3 caracteres'),
+  tituloComercial: z
+    .string()
+    .min(3, 'Titulo comercial deve ter pelo menos 3 caracteres'),
+  descricao: z.string().min(10, 'Descricao deve ter pelo menos 10 caracteres'),
+  nivel: z.enum(['iniciante', 'intermediario', 'avancado'], {
+    errorMap: () => ({ message: 'Selecione um nivel' }),
+  }),
+  status: z.enum(['ativo', 'rascunho', 'arquivado'], {
+    errorMap: () => ({ message: 'Selecione um status' }),
+  }),
+  categorias: z.array(z.string()).min(1, 'Selecione pelo menos uma categoria'),
+  destaque: z.boolean(),
+  certificado: z.boolean(),
+  listado: z.boolean(),
+});
+
+type CursoForm = z.infer<typeof cursoSchema>;
+
+// ── Constants ────────────────────────────────────────────────────────────────
+
+const CATEGORIAS = [
+  'Tecnologia',
+  'Design',
+  'Gestao',
+  'Marketing',
+  'Financas',
+  'Saude',
+  'Idiomas',
+  'Direito',
+];
+
+const NIVEIS = [
+  { value: 'iniciante', label: 'Iniciante' },
+  { value: 'intermediario', label: 'Intermediario' },
+  { value: 'avancado', label: 'Avancado' },
+];
+
+const STATUS_OPTIONS = [
+  { value: 'ativo', label: 'Ativo' },
+  { value: 'rascunho', label: 'Rascunho' },
+  { value: 'arquivado', label: 'Arquivado' },
+];
+
+const STATUS_MAP: Record<
+  string,
+  { label: string; variant: 'default' | 'secondary' | 'outline' }
+> = {
+  ativo: { label: 'Ativo', variant: 'default' },
+  rascunho: { label: 'Rascunho', variant: 'secondary' },
+  arquivado: { label: 'Arquivado', variant: 'outline' },
+};
+
+const NIVEL_MAP: Record<string, string> = {
+  iniciante: 'Iniciante',
+  intermediario: 'Intermediario',
+  avancado: 'Avancado',
+};
+
+// ── 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 em equipes',
+    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 basico',
+    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 de sites',
+    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 e engenharia',
+    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 empresariais',
+    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 ao deploy',
+    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 ITEMS_PER_PAGE = 8;
+
+// ── Animations ───────────────────────────────────────────────────────────────
+
+const stagger = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.06 } },
+};
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 16 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.35, ease: 'easeOut' } },
+};
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export default function CursosPage() {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  // UI states
+  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);
+
+  // 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');
+
+  // Pagination
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const form = useForm<CursoForm>({
+    resolver: zodResolver(cursoSchema),
+    defaultValues: {
+      codigo: '',
+      nomeInterno: '',
+      tituloComercial: '',
+      descricao: '',
+      nivel: 'iniciante',
+      status: 'rascunho',
+      categorias: [],
+      destaque: false,
+      certificado: true,
+      listado: false,
+    },
+  });
+
+  useEffect(() => {
+    const t = setTimeout(() => setLoading(false), 900);
+    return () => clearTimeout(t);
+  }, []);
+
+  // ── Filtering ──────────────────────────────────────────────────────────────
+
+  const filteredCursos = useMemo(() => {
+    return cursos.filter((c) => {
+      const q = busca.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 matchCategoria =
+        filtroCategoria === 'todos' || c.categorias.includes(filtroCategoria);
+      return matchSearch && matchStatus && matchNivel && matchCategoria;
+    });
+  }, [cursos, busca, filtroStatus, filtroNivel, filtroCategoria]);
+
+  const totalPages = Math.max(
+    1,
+    Math.ceil(filteredCursos.length / ITEMS_PER_PAGE)
+  );
+  const safePage = Math.min(currentPage, totalPages);
+  const paginatedCursos = filteredCursos.slice(
+    (safePage - 1) * ITEMS_PER_PAGE,
+    safePage * ITEMS_PER_PAGE
+  );
+
+  // Reset page on filter change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [busca, filtroStatus, filtroNivel, filtroCategoria]);
+
+  // ── Selection ──────────────────────────────────────────────────────────────
+
+  const allPageSelected =
+    paginatedCursos.length > 0 &&
+    paginatedCursos.every((c) => selectedIds.has(c.id));
+
+  function toggleSelectAll() {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (allPageSelected) {
+        paginatedCursos.forEach((c) => next.delete(c.id));
+      } else {
+        paginatedCursos.forEach((c) => next.add(c.id));
+      }
+      return next;
+    });
+  }
+
+  function toggleSelect(id: number) {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }
+
+  // ── CRUD ───────────────────────────────────────────────────────────────────
+
+  function openCreateSheet() {
+    setEditingCurso(null);
+    form.reset({
+      codigo: '',
+      nomeInterno: '',
+      tituloComercial: '',
+      descricao: '',
+      nivel: 'iniciante',
+      status: 'rascunho',
+      categorias: [],
+      destaque: false,
+      certificado: true,
+      listado: false,
+    });
+    setSheetOpen(true);
+  }
+
+  function openEditSheet(curso: Curso) {
+    setEditingCurso(curso);
+    form.reset({
+      codigo: curso.codigo,
+      nomeInterno: curso.nomeInterno,
+      tituloComercial: curso.tituloComercial,
+      descricao: curso.descricao,
+      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) {
+    setSaving(true);
+    // Simula um delay de API
+    await new Promise((r) => setTimeout(r, 600));
+
+    if (editingCurso) {
+      setCursos((prev) =>
+        prev.map((c) => (c.id === editingCurso.id ? { ...c, ...data } : c))
+      );
+      toast.success('Curso atualizado com sucesso!');
+      setSaving(false);
+      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]);
+      toast.success('Curso criado com sucesso! Redirecionando...');
+      setSaving(false);
+      setSheetOpen(false);
+      // Redirecionar para pagina dedicada do curso
+      setTimeout(() => {
+        router.push(`/cursos/${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(`Curso "${cursoToDelete.tituloComercial}" removido.`);
+      setCursoToDelete(null);
+      setDeleteDialogOpen(false);
+    }
+  }
+
+  function bulkDelete() {
+    if (selectedIds.size === 0) return;
+    setCursos((prev) => prev.filter((c) => !selectedIds.has(c.id)));
+    toast.success(`${selectedIds.size} curso(s) removido(s).`);
+    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
+      )
+    );
+    toast.success(`${selectedIds.size} curso(s) arquivado(s).`);
+    setSelectedIds(new Set());
+  }
+
+  // ── Count badges ───────────────────────────────────────────────────────────
+
+  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;
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+
+  return (
+    <Page>
+      <PageHeader
+        title="Cursos"
+        description="Gerencie seus cursos, categorias e niveis de forma facil e rapida."
+        breadcrumbs={[
+          {
+            label: 'Home',
+            href: '/',
+          },
+          {
+            label: 'Cursos',
+          },
+        ]}
+        actions={
+          <Button onClick={openCreateSheet} className="gap-2">
+            <Plus className="size-4" />
+            Criar Curso
+          </Button>
+        }
+      />
+
+      <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="Buscar por codigo, titulo ou nome interno..."
+                    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" />
+                    Filtros:
+                  </div>
+                  <Select value={filtroStatus} onValueChange={setFiltroStatus}>
+                    <SelectTrigger className="h-9 w-[130px] text-xs">
+                      <SelectValue placeholder="Status" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="todos">Todos Status</SelectItem>
+                      <SelectItem value="ativo">Ativo</SelectItem>
+                      <SelectItem value="rascunho">Rascunho</SelectItem>
+                      <SelectItem value="arquivado">Arquivado</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <Select value={filtroNivel} onValueChange={setFiltroNivel}>
+                    <SelectTrigger className="h-9 w-[140px] text-xs">
+                      <SelectValue placeholder="Nivel" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="todos">Todos Niveis</SelectItem>
+                      <SelectItem value="iniciante">Iniciante</SelectItem>
+                      <SelectItem value="intermediario">
+                        Intermediario
+                      </SelectItem>
+                      <SelectItem value="avancado">Avancado</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <Select
+                    value={filtroCategoria}
+                    onValueChange={setFiltroCategoria}
+                  >
+                    <SelectTrigger className="h-9 w-[140px] text-xs">
+                      <SelectValue placeholder="Categoria" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="todos">Todas Categorias</SelectItem>
+                      {CATEGORIAS.map((cat) => (
+                        <SelectItem key={cat} value={cat}>
+                          {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('');
+                      }}
+                    >
+                      <X className="mr-1 size-3" />
+                      Limpar
+                    </Button>
+                  )}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </motion.div>
+
+        {/* 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"
+            >
+              <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">
+                  {selectedIds.size} selecionado(s)
+                </span>
+                <Separator orientation="vertical" className="h-5" />
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-7 gap-1.5 text-xs"
+                  onClick={bulkArchive}
+                >
+                  <Archive className="size-3" />
+                  Arquivar
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-7 gap-1.5 text-xs text-destructive hover:text-destructive"
+                  onClick={bulkDelete}
+                >
+                  <Trash2 className="size-3" />
+                  Excluir
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="ml-auto h-7 text-xs"
+                  onClick={() => setSelectedIds(new Set())}
+                >
+                  Limpar selecao
+                </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>
+                  ))}
+                </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="Selecionar todos"
+                          />
+                        </TableHead>
+                        <TableHead className="w-[100px]">Codigo</TableHead>
+                        <TableHead>Titulo</TableHead>
+                        <TableHead className="hidden md:table-cell">
+                          Nivel
+                        </TableHead>
+                        <TableHead>Status</TableHead>
+                        <TableHead className="hidden lg:table-cell">
+                          Categorias
+                        </TableHead>
+                        <TableHead className="hidden sm:table-cell text-right">
+                          Alunos
+                        </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={`Selecionar ${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"
+                              >
+                                {NIVEL_MAP[curso.nivel]}
+                              </Badge>
+                            </TableCell>
+                            <TableCell>
+                              <Badge variant={STATUS_MAP[curso.status].variant}>
+                                {STATUS_MAP[curso.status].label}
+                              </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"
+                                  >
+                                    {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">Acoes</span>
+                                  </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent
+                                  align="end"
+                                  className="w-44"
+                                >
+                                  <DropdownMenuItem
+                                    onClick={() =>
+                                      router.push(`/cursos/${curso.id}`)
+                                    }
+                                    className="gap-2"
+                                  >
+                                    <Eye className="size-3.5" />
+                                    Ver detalhes
+                                  </DropdownMenuItem>
+                                  <DropdownMenuItem
+                                    onClick={() => openEditSheet(curso)}
+                                    className="gap-2"
+                                  >
+                                    <Pencil className="size-3.5" />
+                                    Editar
+                                  </DropdownMenuItem>
+                                  <DropdownMenuItem
+                                    onClick={() => {
+                                      navigator.clipboard.writeText(
+                                        curso.codigo
+                                      );
+                                      toast.info(
+                                        `Codigo "${curso.codigo}" copiado.`
+                                      );
+                                    }}
+                                    className="gap-2"
+                                  >
+                                    <Copy className="size-3.5" />
+                                    Copiar codigo
+                                  </DropdownMenuItem>
+                                  <DropdownMenuSeparator />
+                                  <DropdownMenuItem
+                                    onClick={() => {
+                                      setCursoToDelete(curso);
+                                      setDeleteDialogOpen(true);
+                                    }}
+                                    className="gap-2 text-destructive focus:text-destructive"
+                                  >
+                                    <Trash2 className="size-3.5" />
+                                    Excluir
+                                  </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">
+                                Nenhum curso encontrado
+                              </p>
+                              <p className="text-xs text-muted-foreground/70">
+                                Tente ajustar os filtros ou criar um novo curso.
+                              </p>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      )}
+                    </TableBody>
+                  </Table>
+                </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">
+                      Mostrando{' '}
+                      <span className="font-medium text-foreground">
+                        {(safePage - 1) * ITEMS_PER_PAGE + 1}
+                      </span>{' '}
+                      a{' '}
+                      <span className="font-medium text-foreground">
+                        {Math.min(
+                          safePage * ITEMS_PER_PAGE,
+                          filteredCursos.length
+                        )}
+                      </span>{' '}
+                      de{' '}
+                      <span className="font-medium text-foreground">
+                        {filteredCursos.length}
+                      </span>{' '}
+                      resultados
+                    </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="Pagina anterior"
+                      >
+                        <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)}
+                        >
+                          {i + 1}
+                        </Button>
+                      ))}
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="size-8"
+                        disabled={safePage === totalPages}
+                        onClick={() => setCurrentPage((p) => p + 1)}
+                        aria-label="Proxima pagina"
+                      >
+                        <ChevronRight className="size-4" />
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )}
+        </motion.div>
+      </motion.div>
+
+      {/* ── Sheet: Criar / Editar ──────────────────────────────────────────── */}
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-lg">
+          <SheetHeader>
+            <SheetTitle>
+              {editingCurso ? 'Editar Curso' : 'Criar Novo Curso'}
+            </SheetTitle>
+            <SheetDescription>
+              {editingCurso
+                ? 'Atualize as informacoes do curso abaixo.'
+                : 'Preencha os dados para criar um novo curso. Apos criar, voce sera redirecionado para a pagina do curso.'}
+            </SheetDescription>
+          </SheetHeader>
+
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="mt-6 flex flex-col gap-5 px-1"
+          >
+            {/* Codigo */}
+            <Field data-invalid={!!form.formState.errors.codigo}>
+              <FieldLabel htmlFor="codigo">
+                <Hash className="size-3.5 text-muted-foreground" />
+                Codigo do Curso
+              </FieldLabel>
+              <Input
+                id="codigo"
+                placeholder="Ex: REACT-ADV"
+                className="uppercase"
+                {...form.register('codigo')}
+              />
+              {form.formState.errors.codigo && (
+                <FieldError>{form.formState.errors.codigo.message}</FieldError>
+              )}
+              <FieldDescription>
+                Identificador unico do curso (ex: REACT-ADV)
+              </FieldDescription>
+            </Field>
+
+            {/* Nome Interno */}
+            <Field data-invalid={!!form.formState.errors.nomeInterno}>
+              <FieldLabel htmlFor="nomeInterno">Nome Interno</FieldLabel>
+              <Input
+                id="nomeInterno"
+                placeholder="Ex: react-avancado"
+                {...form.register('nomeInterno')}
+              />
+              {form.formState.errors.nomeInterno && (
+                <FieldError>
+                  {form.formState.errors.nomeInterno.message}
+                </FieldError>
+              )}
+              <FieldDescription>
+                Slug interno para uso do sistema
+              </FieldDescription>
+            </Field>
+
+            {/* Titulo Comercial */}
+            <Field data-invalid={!!form.formState.errors.tituloComercial}>
+              <FieldLabel htmlFor="tituloComercial">
+                Titulo Comercial
+              </FieldLabel>
+              <Input
+                id="tituloComercial"
+                placeholder="Ex: React Avancado"
+                {...form.register('tituloComercial')}
+              />
+              {form.formState.errors.tituloComercial && (
+                <FieldError>
+                  {form.formState.errors.tituloComercial.message}
+                </FieldError>
+              )}
+            </Field>
+
+            {/* Descricao */}
+            <Field data-invalid={!!form.formState.errors.descricao}>
+              <FieldLabel htmlFor="descricao">Descricao</FieldLabel>
+              <Textarea
+                id="descricao"
+                placeholder="Descreva o conteudo e objetivos do curso..."
+                rows={4}
+                {...form.register('descricao')}
+              />
+              {form.formState.errors.descricao && (
+                <FieldError>
+                  {form.formState.errors.descricao.message}
+                </FieldError>
+              )}
+            </Field>
+
+            {/* Nivel + Status side by side */}
+            <div className="grid grid-cols-2 gap-4">
+              <Field data-invalid={!!form.formState.errors.nivel}>
+                <FieldLabel>Nivel</FieldLabel>
+                <Controller
+                  control={form.control}
+                  name="nivel"
+                  render={({ field }) => (
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Selecione" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {NIVEIS.map((n) => (
+                          <SelectItem key={n.value} value={n.value}>
+                            {n.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+                {form.formState.errors.nivel && (
+                  <FieldError>{form.formState.errors.nivel.message}</FieldError>
+                )}
+              </Field>
+
+              <Field data-invalid={!!form.formState.errors.status}>
+                <FieldLabel>Status</FieldLabel>
+                <Controller
+                  control={form.control}
+                  name="status"
+                  render={({ field }) => (
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Selecione" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {STATUS_OPTIONS.map((s) => (
+                          <SelectItem key={s.value} value={s.value}>
+                            {s.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+                {form.formState.errors.status && (
+                  <FieldError>
+                    {form.formState.errors.status.message}
+                  </FieldError>
+                )}
+              </Field>
+            </div>
+
+            <Separator />
+
+            {/* Categorias - Multi select via checkboxes */}
+            <Field data-invalid={!!form.formState.errors.categorias}>
+              <FieldLabel>Categorias</FieldLabel>
+              <FieldDescription>
+                Selecione uma ou mais categorias
+              </FieldDescription>
+              <Controller
+                control={form.control}
+                name="categorias"
+                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)
+                                );
+                              }
+                            }}
+                          />
+                          {cat}
+                        </label>
+                      );
+                    })}
+                  </div>
+                )}
+              />
+              {form.formState.errors.categorias && (
+                <FieldError>
+                  {form.formState.errors.categorias.message}
+                </FieldError>
+              )}
+            </Field>
+
+            <Separator />
+
+            {/* Flags */}
+            <div className="flex flex-col gap-4">
+              <p className="text-sm font-medium">Flags Principais</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">Destaque</span>
+                      <span className="text-xs text-muted-foreground">
+                        Exibir como curso em destaque na vitrine
+                      </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">Certificado</span>
+                      <span className="text-xs text-muted-foreground">
+                        Emitir certificado ao concluir o curso
+                      </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">Listado</span>
+                      <span className="text-xs text-muted-foreground">
+                        Visivel no catalogo publico de cursos
+                      </span>
+                    </div>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </div>
+                )}
+              />
+            </div>
+
+            <SheetFooter className="mt-2 gap-2 pb-6">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setSheetOpen(false)}
+              >
+                Cancelar
+              </Button>
+              <Button type="submit" disabled={saving} className="gap-2">
+                {saving && <Loader2 className="size-4 animate-spin" />}
+                {editingCurso ? 'Salvar Alteracoes' : 'Criar Curso'}
+              </Button>
+            </SheetFooter>
+          </form>
+        </SheetContent>
+      </Sheet>
+
+      {/* ── Dialog: Confirmar Exclusao ─────────────────────────────────────── */}
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="size-5 text-destructive" />
+              Confirmar Exclusao
+            </DialogTitle>
+            <DialogDescription>
+              Tem certeza que deseja excluir o curso{' '}
+              <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" />
+                  Este curso possui {cursoToDelete.alunosInscritos} aluno(s)
+                  matriculado(s). A exclusao e irreversivel.
+                </span>
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2">
+            <Button
+              variant="outline"
+              onClick={() => setDeleteDialogOpen(false)}
+            >
+              Cancelar
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={confirmDelete}
+              className="gap-2"
+            >
+              <Trash2 className="size-4" />
+              Excluir Curso
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Page>
+  );
+}