@hed-hog/lms 0.0.265 → 0.0.267

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

@@ -0,0 +1,1164 @@
+'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, 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 { Textarea } from '@/components/ui/textarea';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { motion } from 'framer-motion';
+import {
+  AlertTriangle,
+  BarChart3,
+  BookOpen,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  Clock,
+  Eye,
+  FileCheck,
+  GraduationCap,
+  Layers,
+  LayoutDashboard,
+  Loader2,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Search,
+  Target,
+  Trash2,
+  Users,
+  X,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+// ── Nav ───────────────────────────────────────────────────────────────────────
+
+const NAV_ITEMS = [
+  { label: 'Dashboard', href: '/', icon: LayoutDashboard },
+  { label: 'Cursos', href: '/cursos', icon: BookOpen },
+  { label: 'Turmas', href: '/turmas', icon: Users },
+  { label: 'Exames', href: '/exames', icon: FileCheck },
+  { label: 'Formacoes', href: '/formacoes', icon: GraduationCap },
+  { label: 'Relatorios', href: '/relatorios', icon: BarChart3 },
+];
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface Formacao {
+  id: number;
+  nome: string;
+  descricao: string;
+  area: string;
+  nivel: string;
+  prerequisitos: string;
+  cursos: string[];
+  cargaTotal: number;
+  alunos: number;
+  status: 'ativa' | 'rascunho' | 'encerrada';
+  criadoEm: string;
+}
+
+// ── Schema ────────────────────────────────────────────────────────────────────
+
+const formacaoSchema = z.object({
+  nome: z.string().min(3, 'Minimo 3 caracteres'),
+  descricao: z.string().min(10, 'Minimo 10 caracteres'),
+  area: z.string().min(1, 'Selecione uma area'),
+  nivel: z.string().min(1, 'Selecione um nivel'),
+  prerequisitos: z.string().optional(),
+  status: z.string().min(1, 'Selecione um status'),
+});
+
+type FormacaoForm = z.infer<typeof formacaoSchema>;
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const STATUS_MAP: Record<
+  string,
+  { label: string; variant: 'default' | 'secondary' | 'outline' }
+> = {
+  ativa: { label: 'Ativa', variant: 'default' },
+  rascunho: { label: 'Rascunho', variant: 'secondary' },
+  encerrada: { label: 'Encerrada', variant: 'outline' },
+};
+
+const AREA_COLORS: Record<string, string> = {
+  Tecnologia: 'bg-blue-50 text-blue-700 border-blue-200',
+  Design: 'bg-purple-50 text-purple-700 border-purple-200',
+  Gestao: 'bg-amber-50 text-amber-700 border-amber-200',
+  Marketing: 'bg-orange-50 text-orange-700 border-orange-200',
+  Financas: 'bg-emerald-50 text-emerald-700 border-emerald-200',
+};
+
+const PAGE_SIZES = [6, 12, 24];
+
+const availableCursos = [
+  { id: 'react', nome: 'React Avancado', cargaHoraria: 60 },
+  { id: 'ux', nome: 'UX Design Fundamentals', cargaHoraria: 40 },
+  { id: 'python', nome: 'Python para Data Science', cargaHoraria: 80 },
+  { id: 'node', nome: 'Node.js Completo', cargaHoraria: 70 },
+  { id: 'typescript', nome: 'TypeScript na Pratica', cargaHoraria: 50 },
+  { id: 'figma', nome: 'Figma para Iniciantes', cargaHoraria: 25 },
+  { id: 'agile', nome: 'Gestao de Projetos Ageis', cargaHoraria: 30 },
+  { id: 'marketing', nome: 'Marketing Digital', cargaHoraria: 45 },
+  { id: 'design-system', nome: 'Design System', cargaHoraria: 35 },
+  { id: 'excel', nome: 'Excel para Negocios', cargaHoraria: 30 },
+  { id: 'lideranca', nome: 'Lideranca e Comunicacao', cargaHoraria: 20 },
+  { id: 'seo', nome: 'SEO Avancado', cargaHoraria: 35 },
+];
+
+// ── Seed Data ─────────────────────────────────────────────────────────────────
+
+const initialFormacoes: Formacao[] = [
+  {
+    id: 1,
+    nome: 'Full Stack Developer',
+    descricao:
+      'Formacao completa para desenvolvimento full stack com React, Node.js e TypeScript.',
+    area: 'Tecnologia',
+    nivel: 'Avancado',
+    prerequisitos: 'JavaScript basico',
+    cursos: ['React Avancado', 'Node.js Completo', 'TypeScript na Pratica'],
+    cargaTotal: 180,
+    alunos: 342,
+    status: 'ativa',
+    criadoEm: '2024-01-01',
+  },
+  {
+    id: 2,
+    nome: 'UX/UI Designer Profissional',
+    descricao:
+      'Torne-se um designer completo com habilidades em UX, UI e design systems.',
+    area: 'Design',
+    nivel: 'Intermediario',
+    prerequisitos: 'Nenhum',
+    cursos: [
+      'UX Design Fundamentals',
+      'Figma para Iniciantes',
+      'Design System',
+    ],
+    cargaTotal: 100,
+    alunos: 198,
+    status: 'ativa',
+    criadoEm: '2024-01-15',
+  },
+  {
+    id: 3,
+    nome: 'Data Science com Python',
+    descricao:
+      'Domine ciencia de dados desde fundamentos ate machine learning com Python.',
+    area: 'Tecnologia',
+    nivel: 'Intermediario',
+    prerequisitos: 'Logica de programacao',
+    cursos: ['Python para Data Science', 'Excel para Negocios'],
+    cargaTotal: 110,
+    alunos: 267,
+    status: 'ativa',
+    criadoEm: '2024-02-01',
+  },
+  {
+    id: 4,
+    nome: 'Gestao e Lideranca',
+    descricao:
+      'Formacao em gestao de projetos ageis e habilidades de lideranca para times modernos.',
+    area: 'Gestao',
+    nivel: 'Iniciante',
+    prerequisitos: 'Nenhum',
+    cursos: [
+      'Gestao de Projetos Ageis',
+      'Lideranca e Comunicacao',
+      'Excel para Negocios',
+    ],
+    cargaTotal: 80,
+    alunos: 156,
+    status: 'ativa',
+    criadoEm: '2024-02-15',
+  },
+  {
+    id: 5,
+    nome: 'Marketing Digital Completo',
+    descricao:
+      'Domine estrategias de marketing digital, SEO e conteudo para web.',
+    area: 'Marketing',
+    nivel: 'Intermediario',
+    prerequisitos: 'Nenhum',
+    cursos: ['Marketing Digital', 'SEO Avancado'],
+    cargaTotal: 80,
+    alunos: 0,
+    status: 'rascunho',
+    criadoEm: '2024-03-01',
+  },
+  {
+    id: 6,
+    nome: 'Frontend Developer',
+    descricao:
+      'Especializacao em desenvolvimento frontend com as tecnologias mais atuais do mercado.',
+    area: 'Tecnologia',
+    nivel: 'Intermediario',
+    prerequisitos: 'HTML, CSS e JS basico',
+    cursos: ['React Avancado', 'TypeScript na Pratica', 'Design System'],
+    cargaTotal: 145,
+    alunos: 89,
+    status: 'ativa',
+    criadoEm: '2024-03-15',
+  },
+  {
+    id: 7,
+    nome: 'Design Thinking e Inovacao',
+    descricao:
+      'Aprenda metodologias de design thinking e processos de inovacao para negócios.',
+    area: 'Design',
+    nivel: 'Iniciante',
+    prerequisitos: 'Nenhum',
+    cursos: ['UX Design Fundamentals', 'Gestao de Projetos Ageis'],
+    cargaTotal: 70,
+    alunos: 412,
+    status: 'encerrada',
+    criadoEm: '2023-09-01',
+  },
+  {
+    id: 8,
+    nome: 'Analista de Dados',
+    descricao:
+      'Formacao completa para analise de dados empresariais com ferramentas modernas.',
+    area: 'Tecnologia',
+    nivel: 'Iniciante',
+    prerequisitos: 'Nenhum',
+    cursos: ['Excel para Negocios', 'Python para Data Science'],
+    cargaTotal: 110,
+    alunos: 203,
+    status: 'ativa',
+    criadoEm: '2024-04-01',
+  },
+];
+
+// ── Animations ────────────────────────────────────────────────────────────────
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 16 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.3 },
+  },
+};
+const stagger = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.05 } },
+};
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+export default function TrainingPage() {
+  const t = useTranslations('lms.TrainingPage');
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const [loading, setLoading] = useState(true);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [formacoes, setFormacoes] = useState<Formacao[]>(initialFormacoes);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [editingFormacao, setEditingFormacao] = useState<Formacao | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [formacaoToDelete, setFormacaoToDelete] = useState<Formacao | null>(
+    null
+  );
+  const [selectedCursos, setSelectedCursos] = useState<string[]>([]);
+  const [saving, setSaving] = useState(false);
+
+  // Search/filter inputs
+  const [buscaInput, setBuscaInput] = useState('');
+  const [filtroAreaInput, setFiltroAreaInput] = useState('todos');
+  const [filtroNivelInput, setFiltroNivelInput] = useState('todos');
+
+  // Applied filters
+  const [buscaApplied, setBuscaApplied] = useState('');
+  const [filtroAreaApplied, setFiltroAreaApplied] = useState('todos');
+  const [filtroNivelApplied, setFiltroNivelApplied] = useState('todos');
+
+  // Pagination
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+
+  // Double-click tracking
+  const clickTimers = useRef<Map<number, ReturnType<typeof setTimeout>>>(
+    new Map()
+  );
+
+  const form = useForm<FormacaoForm>({
+    resolver: zodResolver(formacaoSchema),
+    defaultValues: {
+      nome: '',
+      descricao: '',
+      area: '',
+      nivel: '',
+      prerequisitos: '',
+      status: 'rascunho',
+    },
+  });
+
+  useEffect(() => {
+    const t = setTimeout(() => setLoading(false), 800);
+    return () => clearTimeout(t);
+  }, []);
+
+  // ── Filtering ────────────────────────────────────────────────────────────
+
+  const filteredFormacoes = useMemo(
+    () =>
+      formacoes.filter((f) => {
+        const q = buscaApplied.toLowerCase();
+        return (
+          (!q ||
+            f.nome.toLowerCase().includes(q) ||
+            f.descricao.toLowerCase().includes(q)) &&
+          (filtroAreaApplied === 'todos' || f.area === filtroAreaApplied) &&
+          (filtroNivelApplied === 'todos' || f.nivel === filtroNivelApplied)
+        );
+      }),
+    [formacoes, buscaApplied, filtroAreaApplied, filtroNivelApplied]
+  );
+
+  const totalPages = Math.max(
+    1,
+    Math.ceil(filteredFormacoes.length / pageSize)
+  );
+  const safePage = Math.min(currentPage, totalPages);
+  const paginatedFormacoes = filteredFormacoes.slice(
+    (safePage - 1) * pageSize,
+    safePage * pageSize
+  );
+
+  function handleSearch(e: React.FormEvent) {
+    e.preventDefault();
+    setBuscaApplied(buscaInput);
+    setFiltroAreaApplied(filtroAreaInput);
+    setFiltroNivelApplied(filtroNivelInput);
+    setCurrentPage(1);
+  }
+
+  function clearFilters() {
+    setBuscaInput('');
+    setFiltroAreaInput('todos');
+    setFiltroNivelInput('todos');
+    setBuscaApplied('');
+    setFiltroAreaApplied('todos');
+    setFiltroNivelApplied('todos');
+    setCurrentPage(1);
+  }
+
+  const hasActiveFilters =
+    buscaApplied ||
+    filtroAreaApplied !== 'todos' ||
+    filtroNivelApplied !== 'todos';
+
+  // ── Double-click ──────────────────────────────────────────────────────────
+
+  function handleCardClick(formacao: Formacao) {
+    const existing = clickTimers.current.get(formacao.id);
+    if (existing) {
+      clearTimeout(existing);
+      clickTimers.current.delete(formacao.id);
+      // Toast message for opening would go here if integrated
+    } else {
+      const timer = setTimeout(
+        () => clickTimers.current.delete(formacao.id),
+        300
+      );
+      clickTimers.current.set(formacao.id, timer);
+    }
+  }
+
+  // ── CRUD ──────────────────────────────────────────────────────────────────
+
+  function openCreateSheet() {
+    setEditingFormacao(null);
+    setSelectedCursos([]);
+    form.reset({
+      nome: '',
+      descricao: '',
+      area: '',
+      nivel: '',
+      prerequisitos: '',
+      status: 'rascunho',
+    });
+    setSheetOpen(true);
+  }
+
+  function openEditSheet(formacao: Formacao, e?: React.MouseEvent) {
+    e?.stopPropagation();
+    setEditingFormacao(formacao);
+    setSelectedCursos(formacao.cursos);
+    form.reset({
+      nome: formacao.nome,
+      descricao: formacao.descricao,
+      area: formacao.area,
+      nivel: formacao.nivel,
+      prerequisitos: formacao.prerequisitos,
+      status: formacao.status,
+    });
+    setSheetOpen(true);
+  }
+
+  function toggleCurso(cursoNome: string) {
+    setSelectedCursos((prev) =>
+      prev.includes(cursoNome)
+        ? prev.filter((c) => c !== cursoNome)
+        : [...prev, cursoNome]
+    );
+  }
+
+  async function onSubmit(data: FormacaoForm) {
+    setSaving(true);
+    await new Promise((r) => setTimeout(r, 500));
+    const cargaTotal = availableCursos
+      .filter((c) => selectedCursos.includes(c.nome))
+      .reduce((acc, c) => acc + c.cargaHoraria, 0);
+    if (editingFormacao) {
+      setFormacoes((prev) =>
+        prev.map((f) =>
+          f.id === editingFormacao.id
+            ? {
+                ...f,
+                ...data,
+                status: data.status as Formacao['status'],
+                cursos: selectedCursos,
+                cargaTotal,
+              }
+            : f
+        )
+      );
+      toast.success(t('toasts.formacaoUpdated'));
+    } else {
+      const newFormacao: Formacao = {
+        id: Date.now(),
+        ...data,
+        prerequisitos: data.prerequisitos || '',
+        status: data.status as Formacao['status'],
+        cursos: selectedCursos,
+        cargaTotal,
+        alunos: 0,
+        criadoEm: new Date().toISOString().substring(0, 10),
+      };
+      setFormacoes((prev) => [newFormacao, ...prev]);
+      toast.success(t('toasts.formacaoCriada'));
+    }
+    setSaving(false);
+    setSheetOpen(false);
+    setSelectedCursos([]);
+  }
+
+  function confirmDelete() {
+    if (!formacaoToDelete) return;
+    setFormacoes((prev) => prev.filter((f) => f.id !== formacaoToDelete.id));
+    toast.success(t('toasts.formacaoRemovida'));
+    setFormacaoToDelete(null);
+    setDeleteDialogOpen(false);
+  }
+
+  // ── KPIs ─────────────────────────────────────────────────────���────────────
+
+  const kpis = [
+    {
+      label: t('kpis.totalTraining.label'),
+      valor: formacoes.length,
+      sub: t('kpis.totalTraining.sub'),
+      icon: GraduationCap,
+      iconBg: 'bg-orange-100',
+      iconColor: 'text-orange-600',
+    },
+    {
+      label: t('kpis.activeTraining.label'),
+      valor: formacoes.filter((f) => f.status === 'ativa').length,
+      sub: t('kpis.activeTraining.sub'),
+      icon: Target,
+      iconBg: 'bg-muted',
+      iconColor: 'text-foreground',
+    },
+    {
+      label: t('kpis.enrolledStudents.label'),
+      valor: formacoes
+        .reduce((a, f) => a + f.alunos, 0)
+        .toLocaleString('pt-BR'),
+      sub: t('kpis.enrolledStudents.sub'),
+      icon: Users,
+      iconBg: 'bg-muted',
+      iconColor: 'text-foreground',
+    },
+    {
+      label: t('kpis.coveredCourses.label'),
+      valor: new Set(formacoes.flatMap((f) => f.cursos)).size,
+      sub: t('kpis.coveredCourses.sub'),
+      icon: Layers,
+      iconBg: 'bg-muted',
+      iconColor: 'text-foreground',
+    },
+  ];
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          {
+            label: t('breadcrumbs.home'),
+            href: '/',
+          },
+          {
+            label: t('title'),
+          },
+        ]}
+        actions={
+          <Button onClick={openCreateSheet} className="gap-2">
+            <Plus className="size-4" />
+            {t('actions.createTraining')}
+          </Button>
+        }
+      />
+
+      {/* KPIs */}
+      <div className="mb-6 grid grid-cols-2 gap-4 lg:grid-cols-4">
+        {loading
+          ? Array.from({ length: 4 }).map((_, i) => (
+              <Card key={i}>
+                <CardContent className="p-4">
+                  <Skeleton className="mb-2 h-8 w-16" />
+                  <Skeleton className="h-4 w-28" />
+                </CardContent>
+              </Card>
+            ))
+          : kpis.map((kpi, i) => (
+              <motion.div
+                key={kpi.label}
+                initial={{ opacity: 0, y: 12 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: i * 0.07 }}
+              >
+                <Card className="overflow-hidden">
+                  <CardContent className="flex items-start justify-between p-5">
+                    <div>
+                      <p className="text-sm text-muted-foreground">
+                        {kpi.label}
+                      </p>
+                      <p className="mt-1 text-3xl font-bold tracking-tight">
+                        {kpi.valor}
+                      </p>
+                      <p className="mt-0.5 text-xs text-muted-foreground">
+                        {kpi.sub}
+                      </p>
+                    </div>
+                    <div
+                      className={`flex size-10 shrink-0 items-center justify-center rounded-lg ${kpi.iconBg}`}
+                    >
+                      <kpi.icon className={`size-5 ${kpi.iconColor}`} />
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+      </div>
+
+      {/* Search bar */}
+      <form onSubmit={handleSearch} className="mb-6">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder={t('filters.searchPlaceholder')}
+              value={buscaInput}
+              onChange={(e) => setBuscaInput(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Select value={filtroAreaInput} onValueChange={setFiltroAreaInput}>
+              <SelectTrigger className="h-9 w-[130px] text-sm">
+                <SelectValue placeholder={t('filters.allAreas')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="todos">{t('filters.allAreas')}</SelectItem>
+                <SelectItem value="Tecnologia">
+                  {t('areas.technology')}
+                </SelectItem>
+                <SelectItem value="Design">{t('areas.design')}</SelectItem>
+                <SelectItem value="Gestao">{t('areas.management')}</SelectItem>
+                <SelectItem value="Marketing">
+                  {t('areas.marketing')}
+                </SelectItem>
+                <SelectItem value="Financas">{t('areas.finance')}</SelectItem>
+              </SelectContent>
+            </Select>
+            <Select
+              value={filtroNivelInput}
+              onValueChange={setFiltroNivelInput}
+            >
+              <SelectTrigger className="h-9 w-[130px] text-sm">
+                <SelectValue placeholder={t('filters.allLevels')} />
+              </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>
+            {hasActiveFilters && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={clearFilters}
+                className="h-9 text-muted-foreground"
+              >
+                <X className="mr-1 size-3.5" /> {t('filters.clear')}
+              </Button>
+            )}
+            <Button type="submit" size="sm" className="h-9 gap-2">
+              <Search className="size-3.5" /> {t('filters.search')}
+            </Button>
+          </div>
+        </div>
+      </form>
+
+      {/* Cards grid */}
+      {loading ? (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Card key={i} className="overflow-hidden">
+              <CardContent className="p-5 min-h-[210px] flex flex-col justify-between">
+                <div>
+                  <Skeleton className="mb-3 h-5 w-20 rounded-full" />
+                  <Skeleton className="mb-1.5 h-5 w-3/4" />
+                  <Skeleton className="mb-4 h-4 w-full" />
+                </div>
+                <div className="flex gap-2 mt-auto">
+                  <Skeleton className="h-6 w-16 rounded-full" />
+                  <Skeleton className="h-6 w-20 rounded-full" />
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      ) : filteredFormacoes.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-20 text-center">
+          <GraduationCap className="mb-4 size-12 text-muted-foreground/40" />
+          <p className="text-lg font-medium">{t('empty.title')}</p>
+          <p className="mt-1 text-sm text-muted-foreground">
+            {t('empty.description')}
+          </p>
+          <Button className="mt-6 gap-2" onClick={openCreateSheet}>
+            <Plus className="size-4" />
+            {t('empty.action')}
+          </Button>
+        </div>
+      ) : (
+        <motion.div
+          className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
+          variants={stagger}
+          initial="hidden"
+          animate="show"
+        >
+          {paginatedFormacoes.map((formacao) => {
+            const statusCfg = STATUS_MAP[formacao.status] ?? {
+              label: formacao.status,
+              variant: 'default' as const,
+            };
+            const areaColor =
+              AREA_COLORS[formacao.area] ??
+              'bg-muted text-foreground border-border';
+
+            return (
+              <motion.div key={formacao.id} variants={fadeUp}>
+                <Card
+                  className="group relative cursor-pointer overflow-hidden transition-all duration-200 hover:shadow-md hover:-translate-y-0.5 min-h-[240px] max-h-[270px] flex flex-col"
+                  onClick={() => handleCardClick(formacao)}
+                  title={t('cards.tooltip')}
+                >
+                  <CardContent className="p-5 flex flex-col h-full">
+                    {/* Top */}
+                    <div className="mb-3 flex items-center justify-between gap-2">
+                      <div className="flex flex-wrap items-center gap-1.5">
+                        <span
+                          className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium ${areaColor}`}
+                        >
+                          {formacao.area}
+                        </span>
+                        <Badge variant={statusCfg.variant} className="text-xs">
+                          {statusCfg.label}
+                        </Badge>
+                      </div>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="size-7 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+                            onClick={(e) => e.stopPropagation()}
+                            aria-label={t('cards.actions.label')}
+                          >
+                            <MoreHorizontal className="size-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" className="w-48">
+                          <DropdownMenuItem
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              toast.info(t('toasts.openingDetails'));
+                            }}
+                          >
+                            <Eye className="mr-2 size-4" />{' '}
+                            {t('cards.actions.viewDetails')}
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={(e) => openEditSheet(formacao, e)}
+                          >
+                            <Pencil className="mr-2 size-4" />{' '}
+                            {t('cards.actions.edit')}
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem
+                            className="text-destructive focus:text-destructive"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setFormacaoToDelete(formacao);
+                              setDeleteDialogOpen(true);
+                            }}
+                          >
+                            <Trash2 className="mr-2 size-4" />{' '}
+                            {t('cards.actions.delete')}
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+
+                    {/* Title */}
+                    <h3 className="mb-0.5 font-semibold leading-tight">
+                      {formacao.nome}
+                    </h3>
+                    <p className="mb-4 line-clamp-2 text-sm text-muted-foreground leading-relaxed">
+                      {formacao.descricao}
+                    </p>
+
+                    {/* Course tags */}
+                    <div className="mb-4 flex flex-wrap gap-1">
+                      {formacao.cursos.slice(0, 3).map((c) => (
+                        <Badge
+                          key={c}
+                          variant="outline"
+                          className="text-xs px-1.5 py-0"
+                        >
+                          {c}
+                        </Badge>
+                      ))}
+                      {formacao.cursos.length > 3 && (
+                        <Badge
+                          variant="outline"
+                          className="text-xs px-1.5 py-0"
+                        >
+                          +{formacao.cursos.length - 3}
+                        </Badge>
+                      )}
+                    </div>
+
+                    <Separator className="mb-3" />
+
+                    {/* Footer */}
+                    <div className="flex items-center justify-between text-xs text-muted-foreground">
+                      <div className="flex items-center gap-3">
+                        <span className="flex items-center gap-1">
+                          <Layers className="size-3.5" />
+                          {formacao.cursos.length} {t('cards.coursesLabel')}
+                        </span>
+                        <span className="flex items-center gap-1">
+                          <Clock className="size-3.5" />
+                          {formacao.cargaTotal}
+                          {t('cards.hoursLabel')}
+                        </span>
+                      </div>
+                      <span className="flex items-center gap-1">
+                        <Users className="size-3.5" />
+                        {formacao.alunos.toLocaleString('pt-BR')}{' '}
+                        {t('cards.studentsLabel')}
+                      </span>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+      )}
+
+      {/* Pagination footer */}
+      {!loading && filteredFormacoes.length > 0 && (
+        <div className="mt-6 flex flex-col items-center justify-between gap-4 sm:flex-row">
+          <p className="text-sm text-muted-foreground">
+            {filteredFormacoes.length}{' '}
+            {filteredFormacoes.length !== 1
+              ? t('pagination.formacoes')
+              : t('pagination.formacao')}{' '}
+            {t('pagination.found')}
+            {filteredFormacoes.length !== 1 ? t('pagination.foundPlural') : ''}
+          </p>
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => setCurrentPage(1)}
+              disabled={safePage === 1}
+              aria-label={t('pagination.firstPage')}
+            >
+              <ChevronsLeft className="size-4" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => setCurrentPage((p) => p - 1)}
+              disabled={safePage === 1}
+              aria-label={t('pagination.previousPage')}
+            >
+              <ChevronLeft className="size-4" />
+            </Button>
+            <span className="px-3 text-sm">
+              {t('pagination.page')}{' '}
+              <span className="font-semibold">{safePage}</span>{' '}
+              {t('pagination.of')}{' '}
+              <span className="font-semibold">{totalPages}</span>
+            </span>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => setCurrentPage((p) => p + 1)}
+              disabled={safePage === totalPages}
+              aria-label={t('pagination.nextPage')}
+            >
+              <ChevronRight className="size-4" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              onClick={() => setCurrentPage(totalPages)}
+              disabled={safePage === totalPages}
+              aria-label={t('pagination.lastPage')}
+            >
+              <ChevronsRight className="size-4" />
+            </Button>
+          </div>
+          <div className="flex items-center gap-2 text-sm">
+            <span className="text-muted-foreground">
+              {t('pagination.itemsPerPage')}
+            </span>
+            <Select
+              value={String(pageSize)}
+              onValueChange={(v) => {
+                setPageSize(Number(v));
+                setCurrentPage(1);
+              }}
+            >
+              <SelectTrigger className="h-8 w-16 text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {PAGE_SIZES.map((s) => (
+                  <SelectItem key={s} value={String(s)}>
+                    {s}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      )}
+
+      {/* Sheet */}
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetContent
+          side="right"
+          className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+        >
+          <SheetHeader className="shrink-0">
+            <SheetTitle>
+              {editingFormacao ? t('form.title.edit') : t('form.title.create')}
+            </SheetTitle>
+            <SheetDescription>{t('form.description.create')}</SheetDescription>
+          </SheetHeader>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-1 flex-col gap-4 px-4 py-6"
+          >
+            <Field>
+              <FieldLabel htmlFor="nome">
+                {t('form.fields.nome.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
+              <Input
+                id="nome"
+                placeholder={t('form.fields.nome.placeholder')}
+                {...form.register('nome')}
+              />
+              <FieldError>{form.formState.errors.nome?.message}</FieldError>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="descricao">
+                {t('form.fields.descricao.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
+              <Textarea
+                id="descricao"
+                rows={3}
+                placeholder={t('form.fields.descricao.placeholder')}
+                {...form.register('descricao')}
+              />
+              <FieldError>
+                {form.formState.errors.descricao?.message}
+              </FieldError>
+            </Field>
+            <div className="grid grid-cols-2 gap-4">
+              <Field>
+                <FieldLabel>
+                  {t('form.fields.area.label')}{' '}
+                  <span className="text-destructive">*</span>
+                </FieldLabel>
+                <Controller
+                  name="area"
+                  control={form.control}
+                  render={({ field }) => (
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <SelectTrigger>
+                        <SelectValue
+                          placeholder={t('form.fields.area.placeholder')}
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Tecnologia">
+                          {t('areas.technology')}
+                        </SelectItem>
+                        <SelectItem value="Design">
+                          {t('areas.design')}
+                        </SelectItem>
+                        <SelectItem value="Gestao">
+                          {t('areas.management')}
+                        </SelectItem>
+                        <SelectItem value="Marketing">
+                          {t('areas.marketing')}
+                        </SelectItem>
+                        <SelectItem value="Financas">
+                          {t('areas.finance')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+                <FieldError>{form.formState.errors.area?.message}</FieldError>
+              </Field>
+              <Field>
+                <FieldLabel>
+                  {t('form.fields.nivel.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.nivel.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>
+            </div>
+            <Field>
+              <FieldLabel>
+                {t('form.fields.status.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
+              <Controller
+                name="status"
+                control={form.control}
+                render={({ field }) => (
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="rascunho">
+                        {t('status.draft')}
+                      </SelectItem>
+                      <SelectItem value="ativa">
+                        {t('status.active')}
+                      </SelectItem>
+                      <SelectItem value="encerrada">
+                        {t('status.closed')}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+              <FieldError>{form.formState.errors.status?.message}</FieldError>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="prerequisitos">
+                {t('form.fields.prerequisitos.label')}
+              </FieldLabel>
+              <Input
+                id="prerequisitos"
+                placeholder={t('form.fields.prerequisitos.placeholder')}
+                {...form.register('prerequisitos')}
+              />
+            </Field>
+
+            {/* Cursos */}
+            <Field>
+              <FieldLabel>{t('form.fields.cursos.label')}</FieldLabel>
+              <div className="rounded-md border">
+                {availableCursos.map((c) => (
+                  <label
+                    key={c.id}
+                    className="flex cursor-pointer items-center justify-between border-b p-2.5 last:border-0 hover:bg-muted has-[:checked]:bg-muted/50"
+                  >
+                    <div className="flex items-center gap-2">
+                      <Checkbox
+                        checked={selectedCursos.includes(c.nome)}
+                        onCheckedChange={() => toggleCurso(c.nome)}
+                      />
+                      <span className="text-sm">{c.nome}</span>
+                    </div>
+                    <span className="text-xs text-muted-foreground">
+                      {c.cargaHoraria}h
+                    </span>
+                  </label>
+                ))}
+              </div>
+              {selectedCursos.length > 0 && (
+                <p className="text-xs text-muted-foreground mt-1">
+                  {selectedCursos.length} {t('coursesSummary.courses')}{' '}
+                  {t('coursesSummary.dot')}{' '}
+                  {availableCursos
+                    .filter((c) => selectedCursos.includes(c.nome))
+                    .reduce((a, c) => a + c.cargaHoraria, 0)}
+                  {t('coursesSummary.hours')}
+                </p>
+              )}
+            </Field>
+
+            <SheetFooter className="mt-auto shrink-0 gap-2 pt-4">
+              <Button type="submit" disabled={saving} className="gap-2">
+                {saving && <Loader2 className="size-4 animate-spin" />}
+                {editingFormacao
+                  ? t('form.actions.save')
+                  : t('form.actions.create')}
+              </Button>
+            </SheetFooter>
+          </form>
+        </SheetContent>
+      </Sheet>
+
+      {/* Delete Dialog */}
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="size-5 text-destructive" />{' '}
+              {t('deleteDialog.title')}
+            </DialogTitle>
+            <DialogDescription>
+              {t('deleteDialog.description')}{' '}
+              <strong>{formacaoToDelete?.nome}</strong>?
+              {(formacaoToDelete?.alunos ?? 0) > 0 && (
+                <span className="mt-2 block rounded-md bg-destructive/10 p-2 text-sm text-destructive">
+                  {t('deleteDialog.warning', {
+                    count: formacaoToDelete?.alunos ?? 0,
+                  })}
+                </span>
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2">
+            <Button
+              variant="outline"
+              onClick={() => setDeleteDialogOpen(false)}
+            >
+              {t('deleteDialog.actions.cancel')}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={confirmDelete}
+              className="gap-2"
+            >
+              <Trash2 className="size-4" /> {t('deleteDialog.actions.delete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Page>
+  );
+}