@hed-hog/lms 0.0.303 → 0.0.305

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

@@ -1,15 +1,23 @@
 'use client';
 
+import {
+  CourseCategoryOption,
+  CourseFormSheet,
+  CourseSheetFormValues,
+  DEFAULT_COURSE_FORM_VALUES,
+  getCourseSheetSchema,
+} from '@/app/(app)/(libraries)/lms/_components/course-form-sheet';
 import {
   EmptyState,
   Page,
   PageHeader,
   PaginationFooter,
+  SearchBar,
+  ViewModeToggle,
 } 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,
@@ -27,6 +35,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Field, FieldError, FieldLabel } from '@/components/ui/field';
 import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import {
   Select,
   SelectContent,
@@ -44,47 +53,59 @@ import {
   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 { usePersistedViewMode } from '@/hooks/use-persisted-view-mode';
+import {
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { motion } from 'framer-motion';
 import {
   AlertTriangle,
-  BarChart3,
-  BookOpen,
   Clock,
-  Eye,
-  FileCheck,
   GraduationCap,
+  GripVertical,
   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 { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
+import { Controller, useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
-// ── Nav ───────────────────────────────────────────────────────────────────────
-
-const NAV_ITEMS = [
-  { label: 'Dashboard', href: '/', icon: LayoutDashboard },
-  { label: 'Cursos', href: '/cursos', icon: BookOpen },
-  { label: 'Turmas', href: '/turmas', icon: Users },
-  { label: 'Exames', href: '/exames', icon: FileCheck },
-  { label: 'Formacoes', href: '/formacoes', icon: GraduationCap },
-  { label: 'Relatorios', href: '/relatorios', icon: BarChart3 },
-];
-
 // ── Types ─────────────────────────────────────────────────────────────────────
 
 interface Formacao {
@@ -95,10 +116,300 @@ interface Formacao {
   nivel: string;
   prerequisitos: string;
   cursos: string[];
+  exams?: string[];
+  courseIds: number[];
+  examIds?: number[];
+  items?: LearningPathItem[];
   cargaTotal: number;
   alunos: number;
   status: 'ativa' | 'rascunho' | 'encerrada';
   criadoEm: string;
+  primaryColor?: string;
+  secondaryColor?: string;
+}
+
+type TrainingColorPayload = {
+  primaryColor?: string | null;
+  secondaryColor?: string | null;
+  primary_color?: string | null;
+  secondary_color?: string | null;
+};
+
+interface CursoOption {
+  id: number;
+  nome: string;
+  cargaHoraria: number;
+  categories: string[];
+  area: string;
+}
+
+interface ExameOption {
+  id: number;
+  titulo: string;
+  limiteTempo: number;
+  status: 'publicado' | 'rascunho' | 'encerrado';
+}
+
+interface LearningPathItem {
+  id?: number;
+  type: 'course' | 'exam';
+  itemId: number;
+  order: number;
+  isRequired?: boolean;
+}
+
+interface TrailRenderableItem {
+  uid: string;
+  type: 'course' | 'exam';
+  itemId: number;
+  title: string;
+  subtitle: string;
+  order: number;
+}
+
+type ApiTrainingListResponse = {
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage: number;
+  data: Formacao[];
+};
+
+type ApiTrainingStatsResponse = {
+  totalTraining: number;
+  activeTraining: number;
+  enrolledStudents: number;
+  coveredCourses: number;
+};
+
+type ApiCourseListResponse = {
+  data: Array<{
+    id: number;
+    title: string;
+    durationHours: number;
+    categories?: string[];
+  }>;
+};
+
+type ApiExamListResponse = {
+  data: Array<{
+    id: number;
+    title: string;
+    timeLimit: number;
+    status: 'published' | 'draft' | 'closed' | 'archived';
+  }>;
+};
+
+type ApiCategory = {
+  id: number;
+  slug: string;
+  name: string;
+  status?: 'active' | 'inactive';
+};
+
+type ApiCategoryList = {
+  data: ApiCategory[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+type ViewMode = 'cards' | 'list';
+
+type Locale = {
+  id?: number;
+  code: string;
+  name: string;
+};
+
+const createExamQuickSchema = z.object({
+  titulo: z.string().min(3, 'Minimo 3 caracteres'),
+  notaMinima: z.coerce.number().min(0).max(10),
+  limiteTempo: z.coerce.number().min(1),
+  shuffle: z.boolean().default(false),
+  status: z.enum(['rascunho', 'publicado', 'encerrado']),
+});
+
+type ExamQuickForm = z.infer<typeof createExamQuickSchema>;
+
+function normalizeText(value: string) {
+  return value
+    .trim()
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '');
+}
+
+function categorySlugToArea(slugs: string[] = []) {
+  const normalized = slugs.map((slug) => normalizeText(slug));
+
+  if (
+    normalized.some(
+      (slug) =>
+        slug === 'design' ||
+        slug.includes('design') ||
+        slug.includes('ux') ||
+        slug.includes('ui')
+    )
+  ) {
+    return 'Design';
+  }
+  if (
+    normalized.some(
+      (slug) =>
+        slug === 'gestao' ||
+        slug === 'management' ||
+        slug.includes('gestao') ||
+        slug.includes('management')
+    )
+  ) {
+    return 'Gestao';
+  }
+  if (
+    normalized.some(
+      (slug) => slug === 'marketing' || slug.includes('marketing')
+    )
+  ) {
+    return 'Marketing';
+  }
+  if (
+    normalized.some(
+      (slug) =>
+        slug === 'financas' ||
+        slug === 'finance' ||
+        slug.includes('financ') ||
+        slug.includes('accounting')
+    )
+  ) {
+    return 'Financas';
+  }
+
+  return 'Tecnologia';
+}
+
+function normalizeAreaValue(value: string) {
+  const normalized = normalizeText(value);
+
+  if (
+    normalized === 'tecnologia' ||
+    normalized === 'technology' ||
+    normalized.includes('tecnolog') ||
+    normalized.includes('technology')
+  ) {
+    return 'Tecnologia';
+  }
+  if (normalized === 'design' || normalized.includes('design')) return 'Design';
+  if (
+    normalized === 'gestao' ||
+    normalized === 'management' ||
+    normalized.includes('gestao') ||
+    normalized.includes('management')
+  ) {
+    return 'Gestao';
+  }
+  if (normalized === 'marketing' || normalized.includes('marketing')) {
+    return 'Marketing';
+  }
+  if (
+    normalized === 'financas' ||
+    normalized === 'finance' ||
+    normalized.includes('financ') ||
+    normalized.includes('accounting')
+  ) {
+    return 'Financas';
+  }
+
+  return 'Tecnologia';
+}
+
+function normalizeLevelValue(value: string) {
+  const normalized = normalizeText(value);
+
+  if (['iniciante', 'beginner'].includes(normalized)) return 'Iniciante';
+  if (['intermediario', 'intermediate'].includes(normalized)) {
+    return 'Intermediario';
+  }
+  if (['avancado', 'advanced'].includes(normalized)) return 'Avancado';
+
+  return 'Iniciante';
+}
+
+function normalizeStatusValue(value: string) {
+  const normalized = normalizeText(value);
+
+  if (['ativa', 'active'].includes(normalized)) return 'ativa';
+  if (['encerrada', 'archived'].includes(normalized)) return 'encerrada';
+
+  return 'rascunho';
+}
+
+function slugifyText(value: string) {
+  return normalizeText(value)
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+    .slice(0, 64);
+}
+
+function normalizeHexColor(value?: string | null) {
+  if (!value) return null;
+
+  const raw = value.trim();
+  if (!raw) return null;
+
+  const prefixed = raw.startsWith('#') ? raw : `#${raw}`;
+
+  if (/^#([0-9A-Fa-f]{6})$/.test(prefixed)) return prefixed;
+  if (/^#([0-9A-Fa-f]{3})$/.test(prefixed)) {
+    const hex = prefixed.slice(1);
+
+    return `#${hex
+      .split('')
+      .map((char) => `${char}${char}`)
+      .join('')}`;
+  }
+
+  return null;
+}
+
+function normalizeTrainingColorPayload<T extends TrainingColorPayload>(
+  payload: T
+) {
+  const primaryColor = normalizeHexColor(
+    payload.primaryColor ?? payload.primary_color
+  );
+  const secondaryColor = normalizeHexColor(
+    payload.secondaryColor ?? payload.secondary_color
+  );
+
+  return {
+    ...payload,
+    primaryColor: primaryColor ?? undefined,
+    secondaryColor: secondaryColor ?? undefined,
+  };
+}
+
+function normalizeTrainingListPayload(
+  payload: ApiTrainingListResponse
+): ApiTrainingListResponse {
+  return {
+    ...payload,
+    data: (payload.data ?? []).map((item) =>
+      normalizeTrainingColorPayload(item as Formacao & TrainingColorPayload)
+    ),
+  };
+}
+
+function buildCourseCodeFromTitle(title: string) {
+  const base = slugifyText(title)
+    .toUpperCase()
+    .replace(/[^A-Z0-9]/g, '-');
+  const compact = base.replace(/-+/g, '-').replace(/^-|-$/g, '');
+
+  if (compact.length >= 2) return compact.slice(0, 32);
+
+  return `COURSE-${Date.now().toString().slice(-6)}`;
 }
 
 // ── Schema ────────────────────────────────────────────────────────────────────
@@ -106,10 +417,18 @@ interface Formacao {
 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'),
+  area: z.enum(['Tecnologia', 'Design', 'Gestao', 'Marketing', 'Financas']),
+  nivel: z.enum(['Iniciante', 'Intermediario', 'Avancado']),
   prerequisitos: z.string().optional(),
-  status: z.string().min(1, 'Selecione um status'),
+  status: z.enum(['rascunho', 'ativa', 'encerrada']),
+  primaryColor: z
+    .string()
+    .regex(/^#([0-9A-Fa-f]{6})$/, 'Cor primária inválida')
+    .default('#1D4ED8'),
+  secondaryColor: z
+    .string()
+    .regex(/^#([0-9A-Fa-f]{6})$/, 'Cor secundária inválida')
+    .default('#111827'),
 });
 
 type FormacaoForm = z.infer<typeof formacaoSchema>;
@@ -125,155 +444,8 @@ const STATUS_MAP: Record<
   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',
-  },
-];
+const API_TRAINING_CACHE_KEY = 'lms:training:api-cache';
 
 // ── Animations ────────────────────────────────────────────────────────────────
 
@@ -290,34 +462,101 @@ const stagger = {
   show: { transition: { staggerChildren: 0.05 } },
 };
 
+function SortableTrailItem(props: {
+  item: TrailRenderableItem;
+  onRemove: (uid: string) => void;
+}) {
+  const { item, onRemove } = props;
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: item.uid });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="flex items-center gap-2 border-b p-2.5 last:border-0"
+    >
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="size-7 text-muted-foreground"
+        aria-label="Arrastar item"
+        {...attributes}
+        {...listeners}
+      >
+        <GripVertical className="size-4" />
+      </Button>
+
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm font-medium">{item.title}</p>
+        <p className="truncate text-xs text-muted-foreground">
+          {item.subtitle}
+        </p>
+      </div>
+
+      <Badge variant="outline" className="text-[10px] uppercase tracking-wide">
+        {item.type === 'course' ? 'Curso' : 'Exame'}
+      </Badge>
+
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={() => onRemove(item.uid)}
+        className="h-7 px-2 text-muted-foreground"
+      >
+        <X className="size-3.5" />
+      </Button>
+    </div>
+  );
+}
+
 // ── Page ──────────────────────────────────────────────────────────────────────
 
 export default function TrainingPage() {
   const t = useTranslations('lms.TrainingPage');
-  const pathname = usePathname();
+  const tCourse = useTranslations('lms.CoursesPage');
+  const tExam = useTranslations('lms.ExamsPage');
   const router = useRouter();
+  const { request } = useApp();
 
-  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 [learningPathItems, setLearningPathItems] = useState<
+    LearningPathItem[]
+  >([]);
+  const [selectedCourseToAdd, setSelectedCourseToAdd] = useState('');
+  const [selectedExamToAdd, setSelectedExamToAdd] = useState('');
   const [saving, setSaving] = useState(false);
+  const [loadingEditSheet, setLoadingEditSheet] = useState(false);
+  const [courseSheetOpen, setCourseSheetOpen] = useState(false);
+  const [examSheetOpen, setExamSheetOpen] = useState(false);
+  const [creatingCourse, setCreatingCourse] = useState(false);
+  const [creatingExam, setCreatingExam] = useState(false);
+  const [cachedListData, setCachedListData] =
+    useState<ApiTrainingListResponse | null>(null);
+  const initialLearningPathRef = useRef<LearningPathItem[]>([]);
 
   // Search/filter inputs
   const [buscaInput, setBuscaInput] = useState('');
-  const [filtroAreaInput, setFiltroAreaInput] = useState('todos');
+  const [buscaDebounced, setBuscaDebounced] = useState('');
+  const [filtroStatusInput, setFiltroStatusInput] = useState('todos');
   const [filtroNivelInput, setFiltroNivelInput] = useState('todos');
-
-  // Applied filters
-  const [buscaApplied, setBuscaApplied] = useState('');
-  const [filtroAreaApplied, setFiltroAreaApplied] = useState('todos');
-  const [filtroNivelApplied, setFiltroNivelApplied] = useState('todos');
+  const [viewMode, setViewMode] = usePersistedViewMode<ViewMode>({
+    storageKey: 'lms:training:view-mode',
+    defaultValue: 'cards',
+    allowedValues: ['cards', 'list'],
+  });
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
@@ -328,72 +567,367 @@ export default function TrainingPage() {
     new Map()
   );
 
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const {
+    data: listData,
+    isLoading: isLoadingList,
+    isFetching: isFetchingList,
+    refetch: refetchTraining,
+  } = useQuery<ApiTrainingListResponse>({
+    queryKey: [
+      'lms-training-list',
+      currentPage,
+      pageSize,
+      buscaDebounced,
+      filtroStatusInput,
+      filtroNivelInput,
+    ],
+    queryFn: async () => {
+      const response = await request<ApiTrainingListResponse>({
+        url: '/lms/training',
+        method: 'GET',
+        params: {
+          page: currentPage,
+          pageSize,
+          search: buscaDebounced || undefined,
+          status:
+            filtroStatusInput !== 'todos'
+              ? ptStatusToApi(filtroStatusInput as Formacao['status'])
+              : undefined,
+          level: filtroNivelInput !== 'todos' ? filtroNivelInput : undefined,
+        },
+      });
+
+      return normalizeTrainingListPayload(response.data);
+    },
+  });
+
+  const { data: statsData, refetch: refetchStats } =
+    useQuery<ApiTrainingStatsResponse>({
+      queryKey: ['lms-training-stats'],
+      queryFn: async () => {
+        const response = await request<ApiTrainingStatsResponse>({
+          url: '/lms/training/stats',
+          method: 'GET',
+        });
+
+        return response.data;
+      },
+    });
+
+  const {
+    data: coursesData,
+    refetch: refetchCourses,
+    isFetching: isFetchingCourses,
+  } = useQuery<ApiCourseListResponse>({
+    queryKey: ['lms-training-course-options'],
+    queryFn: async () => {
+      const response = await request<ApiCourseListResponse>({
+        url: '/lms/courses',
+        method: 'GET',
+        params: {
+          page: 1,
+          pageSize: 1000,
+        },
+      });
+
+      return response.data;
+    },
+  });
+
+  const {
+    data: examsData,
+    refetch: refetchExams,
+    isFetching: isFetchingExams,
+  } = useQuery<ApiExamListResponse>({
+    queryKey: ['lms-training-exam-options'],
+    queryFn: async () => {
+      const response = await request<ApiExamListResponse>({
+        url: '/lms/exams',
+        method: 'GET',
+        params: {
+          page: 1,
+          pageSize: 1000,
+        },
+      });
+
+      return response.data;
+    },
+  });
+
+  const { data: categoryListData, refetch: refetchCategories } =
+    useQuery<ApiCategoryList>({
+      queryKey: ['lms-training-category-options'],
+      queryFn: async () => {
+        const response = await request<ApiCategoryList>({
+          url: '/category',
+          method: 'GET',
+          params: {
+            page: 1,
+            pageSize: 500,
+            status: 'all',
+          },
+        });
+
+        const payload = response.data as ApiCategoryList | ApiCategory[];
+        if (Array.isArray(payload)) {
+          return {
+            data: payload,
+            total: payload.length,
+            page: 1,
+            pageSize: payload.length,
+          };
+        }
+
+        return payload;
+      },
+      initialData: {
+        data: [],
+        total: 0,
+        page: 1,
+        pageSize: 500,
+      },
+    });
+
+  useEffect(() => {
+    if (courseSheetOpen) {
+      void refetchCategories();
+    }
+  }, [courseSheetOpen, refetchCategories]);
+
+  const availableCursos: CursoOption[] = (coursesData?.data ?? []).map(
+    (course) => ({
+      id: course.id,
+      nome: course.title,
+      cargaHoraria: course.durationHours ?? 0,
+      categories: course.categories ?? [],
+      area: categorySlugToArea(course.categories ?? []),
+    })
+  );
+
   const form = useForm<FormacaoForm>({
     resolver: zodResolver(formacaoSchema),
     defaultValues: {
       nome: '',
       descricao: '',
-      area: '',
-      nivel: '',
+      area: 'Tecnologia',
+      nivel: 'Iniciante',
       prerequisitos: '',
       status: 'rascunho',
+      primaryColor: '#1D4ED8',
+      secondaryColor: '#111827',
     },
   });
 
-  useEffect(() => {
-    const t = setTimeout(() => setLoading(false), 800);
-    return () => clearTimeout(t);
-  }, []);
+  const courseForm = useForm<CourseSheetFormValues>({
+    resolver: zodResolver(getCourseSheetSchema(tCourse)),
+    defaultValues: DEFAULT_COURSE_FORM_VALUES,
+  });
+  const examForm = useForm<ExamQuickForm>({
+    resolver: zodResolver(createExamQuickSchema),
+    defaultValues: {
+      titulo: '',
+      notaMinima: 7,
+      limiteTempo: 60,
+      shuffle: false,
+      status: 'rascunho',
+    },
+  });
+  const watchedFormValues = useWatch({ control: form.control });
 
-  // ── Filtering ────────────────────────────────────────────────────────────
+  const availableExams: ExameOption[] = (examsData?.data ?? []).map((exam) => ({
+    id: exam.id,
+    titulo: exam.title,
+    limiteTempo: exam.timeLimit ?? 0,
+    status:
+      exam.status === 'published'
+        ? 'publicado'
+        : exam.status === 'draft'
+          ? 'rascunho'
+          : 'encerrado',
+  }));
 
-  const filteredFormacoes = useMemo(
+  const selectedCursos = 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]
+      learningPathItems
+        .filter((item) => item.type === 'course')
+        .map((item) => item.itemId),
+    [learningPathItems]
+  );
+
+  const trailItems = useMemo<TrailRenderableItem[]>(() => {
+    const sorted = [...learningPathItems].sort((a, b) => a.order - b.order);
+
+    return sorted
+      .map((item, index) => {
+        if (item.type === 'course') {
+          const course = availableCursos.find((c) => c.id === item.itemId);
+          if (!course) return null;
+
+          return {
+            uid: `course-${course.id}`,
+            type: 'course' as const,
+            itemId: course.id,
+            title: course.nome,
+            subtitle: `${course.cargaHoraria}h`,
+            order: item.order ?? index,
+          };
+        }
+
+        const exam = availableExams.find((e) => e.id === item.itemId);
+        if (!exam) return null;
+
+        return {
+          uid: `exam-${exam.id}`,
+          type: 'exam' as const,
+          itemId: exam.id,
+          title: exam.titulo,
+          subtitle: `${exam.limiteTempo}min`,
+          order: item.order ?? index,
+        };
+      })
+      .filter(Boolean) as TrailRenderableItem[];
+  }, [availableCursos, availableExams, learningPathItems]);
+
+  const selectableCursos = useMemo(
+    () => [...availableCursos].sort((a, b) => a.nome.localeCompare(b.nome)),
+    [availableCursos]
   );
 
-  const totalPages = Math.max(
-    1,
-    Math.ceil(filteredFormacoes.length / pageSize)
+  const selectableExams = useMemo(
+    () => [...availableExams].sort((a, b) => a.titulo.localeCompare(b.titulo)),
+    [availableExams]
   );
-  const safePage = Math.min(currentPage, totalPages);
-  const paginatedFormacoes = filteredFormacoes.slice(
-    (safePage - 1) * pageSize,
-    safePage * pageSize
+
+  const categoryOptions = useMemo<CourseCategoryOption[]>(
+    () =>
+      (categoryListData?.data ?? [])
+        .filter((category) => !!category.slug)
+        .map((category) => ({
+          value: category.slug,
+          label: category.name || category.slug,
+        }))
+        .sort((a, b) => a.label.localeCompare(b.label)),
+    [categoryListData]
   );
 
-  function handleSearch(e: React.FormEvent) {
-    e.preventDefault();
-    setBuscaApplied(buscaInput);
-    setFiltroAreaApplied(filtroAreaInput);
-    setFiltroNivelApplied(filtroNivelInput);
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    try {
+      const raw = window.localStorage.getItem(API_TRAINING_CACHE_KEY);
+      if (!raw) return;
+      const parsed = JSON.parse(raw) as ApiTrainingListResponse;
+      if (parsed && Array.isArray(parsed.data)) {
+        setCachedListData(normalizeTrainingListPayload(parsed));
+      }
+    } catch {
+      setCachedListData(null);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (!listData) return;
+    window.localStorage.setItem(
+      API_TRAINING_CACHE_KEY,
+      JSON.stringify(listData)
+    );
+    setCachedListData(listData);
+  }, [listData]);
+
+  const effectiveListData = listData ?? cachedListData;
+  const initialLoading = isLoadingList && !effectiveListData;
+  const cardsRefreshing = isFetchingList && !!effectiveListData;
+
+  const formacoesToRender = useMemo(() => {
+    const formacoes = effectiveListData?.data ?? [];
+
+    if (!sheetOpen || !editingFormacao) return formacoes;
+
+    const selectedCourses = availableCursos.filter((course) =>
+      selectedCursos.includes(course.id)
+    );
+
+    const selectedCourseNames = selectedCourses.map((course) => course.nome);
+    const selectedCourseHours = selectedCourses.reduce(
+      (sum, course) => sum + course.cargaHoraria,
+      0
+    );
+
+    return formacoes.map((formacao) => {
+      if (formacao.id !== editingFormacao.id) return formacao;
+
+      return {
+        ...formacao,
+        nome: watchedFormValues.nome ?? formacao.nome,
+        descricao: watchedFormValues.descricao ?? formacao.descricao,
+        nivel: watchedFormValues.nivel ?? formacao.nivel,
+        status: watchedFormValues.status ?? formacao.status,
+        prerequisitos:
+          watchedFormValues.prerequisitos ?? formacao.prerequisitos,
+        primaryColor: watchedFormValues.primaryColor ?? formacao.primaryColor,
+        secondaryColor:
+          watchedFormValues.secondaryColor ?? formacao.secondaryColor,
+        cursos: selectedCourseNames,
+        courseIds: selectedCursos,
+        cargaTotal: selectedCourseHours,
+      };
+    });
+  }, [
+    availableCursos,
+    editingFormacao,
+    effectiveListData,
+    selectedCursos,
+    sheetOpen,
+    watchedFormValues,
+  ]);
+
+  const totalItems = effectiveListData?.total ?? 0;
+  const totalPages = Math.max(effectiveListData?.lastPage ?? 1, 1);
+  const safePage = Math.min(currentPage, totalPages);
+
+  useEffect(() => {
+    if (currentPage > totalPages) {
+      setCurrentPage(totalPages);
+    }
+  }, [currentPage, totalPages]);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setBuscaDebounced(buscaInput.trim());
+    }, 350);
+
+    return () => clearTimeout(timeout);
+  }, [buscaInput]);
+
+  useEffect(() => {
     setCurrentPage(1);
-  }
+  }, [buscaDebounced, filtroStatusInput, filtroNivelInput]);
 
   function clearFilters() {
     setBuscaInput('');
-    setFiltroAreaInput('todos');
+    setBuscaDebounced('');
+    setFiltroStatusInput('todos');
     setFiltroNivelInput('todos');
-    setBuscaApplied('');
-    setFiltroAreaApplied('todos');
-    setFiltroNivelApplied('todos');
     setCurrentPage(1);
   }
 
   const hasActiveFilters =
-    buscaApplied ||
-    filtroAreaApplied !== 'todos' ||
-    filtroNivelApplied !== 'todos';
+    buscaInput.trim().length > 0 ||
+    filtroStatusInput !== 'todos' ||
+    filtroNivelInput !== 'todos';
+
+  function openDeleteDialog(formacao: Formacao, e: React.MouseEvent) {
+    e.stopPropagation();
+    setFormacaoToDelete(formacao);
+    setDeleteDialogOpen(true);
+  }
 
   // ── Double-click ──────────────────────────────────────────────────────────
 
@@ -416,85 +950,396 @@ export default function TrainingPage() {
 
   function openCreateSheet() {
     setEditingFormacao(null);
-    setSelectedCursos([]);
+    initialLearningPathRef.current = [];
+    setLearningPathItems([]);
     form.reset({
       nome: '',
       descricao: '',
-      area: '',
-      nivel: '',
+      area: 'Tecnologia',
+      nivel: 'Iniciante',
       prerequisitos: '',
       status: 'rascunho',
+      primaryColor: '#1D4ED8',
+      secondaryColor: '#111827',
     });
+    examForm.reset();
+    setSelectedCourseToAdd('');
+    setSelectedExamToAdd('');
+    void Promise.all([refetchCourses(), refetchExams(), refetchCategories()]);
     setSheetOpen(true);
   }
 
-  function openEditSheet(formacao: Formacao, e?: React.MouseEvent) {
+  async 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,
+    setLoadingEditSheet(true);
+    try {
+      const [response] = await Promise.all([
+        request<Formacao>({
+          url: `/lms/training/${formacao.id}`,
+          method: 'GET',
+        }),
+        refetchCourses(),
+        refetchExams(),
+        refetchCategories(),
+      ]);
+
+      const fullFormacao = normalizeTrainingColorPayload(
+        (response?.data ?? formacao) as Formacao & TrainingColorPayload
+      ) as Formacao;
+      const normalizedItems: LearningPathItem[] =
+        fullFormacao.items && fullFormacao.items.length > 0
+          ? fullFormacao.items.map((item, index) => ({
+              id: item.id,
+              type: item.type,
+              itemId: item.itemId,
+              order: item.order ?? index,
+              isRequired: item.isRequired !== false,
+            }))
+          : (fullFormacao.courseIds ?? []).map((courseId, index) => ({
+              type: 'course',
+              itemId: courseId,
+              order: index,
+              isRequired: true,
+            }));
+
+      setEditingFormacao(fullFormacao);
+      initialLearningPathRef.current = [...normalizedItems];
+      setLearningPathItems(normalizedItems);
+      setSelectedCourseToAdd('');
+      setSelectedExamToAdd('');
+      form.reset({
+        nome: fullFormacao.nome,
+        descricao: fullFormacao.descricao,
+        area: normalizeAreaValue(fullFormacao.area),
+        nivel: normalizeLevelValue(fullFormacao.nivel),
+        prerequisitos: fullFormacao.prerequisitos,
+        status: normalizeStatusValue(fullFormacao.status),
+        primaryColor: fullFormacao.primaryColor ?? '#1D4ED8',
+        secondaryColor: fullFormacao.secondaryColor ?? '#111827',
+      });
+      setSheetOpen(true);
+    } finally {
+      setLoadingEditSheet(false);
+    }
+  }
+
+  function normalizeTrailOrder(items: LearningPathItem[]) {
+    return items.map((item, index) => ({ ...item, order: index }));
+  }
+
+  function addTrailItem(type: 'course' | 'exam', itemId: number) {
+    setLearningPathItems((prev) => {
+      if (prev.some((item) => item.type === type && item.itemId === itemId)) {
+        return prev;
+      }
+
+      return normalizeTrailOrder([
+        ...prev,
+        {
+          type,
+          itemId,
+          order: prev.length,
+          isRequired: true,
+        },
+      ]);
     });
-    setSheetOpen(true);
   }
 
-  function toggleCurso(cursoNome: string) {
-    setSelectedCursos((prev) =>
-      prev.includes(cursoNome)
-        ? prev.filter((c) => c !== cursoNome)
-        : [...prev, cursoNome]
+  function handleCourseSelection(value: string) {
+    setSelectedCourseToAdd(value);
+    const parsed = Number(value);
+
+    if (Number.isFinite(parsed) && parsed > 0) {
+      addTrailItem('course', parsed);
+      setSelectedCourseToAdd('');
+    }
+  }
+
+  function handleExamSelection(value: string) {
+    setSelectedExamToAdd(value);
+    const parsed = Number(value);
+
+    if (Number.isFinite(parsed) && parsed > 0) {
+      addTrailItem('exam', parsed);
+      setSelectedExamToAdd('');
+    }
+  }
+
+  function removeTrailItem(uid: string) {
+    const [type, idText] = uid.split('-');
+    const itemId = Number(idText);
+
+    if (!itemId || (type !== 'course' && type !== 'exam')) return;
+
+    setLearningPathItems((prev) =>
+      normalizeTrailOrder(
+        prev.filter((item) => !(item.type === type && item.itemId === itemId))
+      )
     );
   }
 
+  function handleTrailDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    setLearningPathItems((prev) => {
+      const sorted = [...prev].sort((a, b) => a.order - b.order);
+      const oldIndex = sorted.findIndex(
+        (item) => `${item.type}-${item.itemId}` === String(active.id)
+      );
+      const newIndex = sorted.findIndex(
+        (item) => `${item.type}-${item.itemId}` === String(over.id)
+      );
+
+      if (oldIndex < 0 || newIndex < 0) return prev;
+
+      return normalizeTrailOrder(arrayMove(sorted, oldIndex, newIndex));
+    });
+  }
+
+  function openCreateCourseSheet() {
+    courseForm.reset(DEFAULT_COURSE_FORM_VALUES);
+    setCourseSheetOpen(true);
+  }
+
+  function openCreateExamSheet() {
+    examForm.reset({
+      titulo: '',
+      notaMinima: 7,
+      limiteTempo: 60,
+      shuffle: false,
+      status: 'rascunho',
+    });
+    setExamSheetOpen(true);
+  }
+
+  function ptStatusToApi(value: Formacao['status']) {
+    if (value === 'ativa') return 'active';
+    if (value === 'encerrada') return 'archived';
+    return 'draft';
+  }
+
+  function ptLevelToApi(value: string) {
+    const normalized = normalizeText(value);
+
+    if (['iniciante', 'beginner'].includes(normalized)) return 'beginner';
+    if (['intermediario', 'intermediate'].includes(normalized)) {
+      return 'intermediate';
+    }
+    if (['avancado', 'advanced'].includes(normalized)) return 'advanced';
+
+    return 'beginner';
+  }
+
+  function courseStatusToApi(value: CourseSheetFormValues['status']) {
+    if (value === 'ativo') return 'published';
+    if (value === 'arquivado') return 'archived';
+    return 'draft';
+  }
+
+  function examStatusToApi(value: ExamQuickForm['status']) {
+    if (value === 'publicado') return 'published';
+    if (value === 'encerrado') return 'closed';
+    return 'draft';
+  }
+
+  function pathsAreEqual(a: LearningPathItem[], b: LearningPathItem[]) {
+    if (a.length !== b.length) return false;
+
+    return a.every((item, index) => {
+      const other = b[index];
+      if (!other) return false;
+
+      return (
+        item.type === other.type &&
+        item.itemId === other.itemId &&
+        item.order === other.order
+      );
+    });
+  }
+
   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
-        )
+    try {
+      const orderedItems = normalizeTrailOrder(
+        [...learningPathItems].sort((a, b) => a.order - b.order)
       );
-      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'));
+
+      if (orderedItems.length === 0) {
+        toast.error(t('toasts.selectAtLeastOneItem'));
+        return;
+      }
+
+      setSaving(true);
+
+      if (editingFormacao) {
+        const dirty = form.formState.dirtyFields;
+        const itemsChanged = !pathsAreEqual(
+          initialLearningPathRef.current,
+          orderedItems
+        );
+
+        const payload: {
+          title?: string;
+          description?: string;
+          shortDescription?: string;
+          level?: 'beginner' | 'intermediate' | 'advanced';
+          status?: 'draft' | 'active' | 'archived';
+          primaryColor?: string;
+          secondaryColor?: string;
+          items?: Array<{
+            type: 'course' | 'exam';
+            itemId: number;
+            order: number;
+            isRequired: boolean;
+          }>;
+        } = {};
+
+        if (dirty.nome) payload.title = data.nome;
+        if (dirty.descricao) payload.description = data.descricao;
+        if (dirty.prerequisitos) {
+          payload.shortDescription = data.prerequisitos?.trim() || undefined;
+        }
+        if (dirty.nivel) payload.level = ptLevelToApi(data.nivel);
+        if (dirty.status) {
+          payload.status = ptStatusToApi(data.status as Formacao['status']);
+        }
+        if (dirty.primaryColor) payload.primaryColor = data.primaryColor;
+        if (dirty.secondaryColor) payload.secondaryColor = data.secondaryColor;
+        if (itemsChanged) {
+          payload.items = orderedItems.map((item, index) => ({
+            type: item.type,
+            itemId: item.itemId,
+            order: index,
+            isRequired: item.isRequired !== false,
+          }));
+        }
+
+        if (Object.keys(payload).length === 0) {
+          setSheetOpen(false);
+          return;
+        }
+
+        await request({
+          url: `/lms/training/${editingFormacao.id}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        toast.success(t('toasts.formacaoUpdated'));
+      } else {
+        const payload = {
+          title: data.nome,
+          description: data.descricao,
+          shortDescription: data.prerequisitos?.trim() || undefined,
+          level: ptLevelToApi(data.nivel),
+          status: ptStatusToApi(data.status as Formacao['status']),
+          primaryColor: data.primaryColor,
+          secondaryColor: data.secondaryColor,
+          items: orderedItems.map((item, index) => ({
+            type: item.type,
+            itemId: item.itemId,
+            order: index,
+            isRequired: item.isRequired !== false,
+          })),
+        };
+
+        await request({
+          url: '/lms/training',
+          method: 'POST',
+          data: payload,
+        });
+        toast.success(t('toasts.formacaoCriada'));
+      }
+
+      await Promise.all([refetchTraining(), refetchStats()]);
+      setSheetOpen(false);
+      setLearningPathItems([]);
+      initialLearningPathRef.current = [];
+    } finally {
+      setSaving(false);
     }
-    setSaving(false);
-    setSheetOpen(false);
-    setSelectedCursos([]);
   }
 
-  function confirmDelete() {
+  async function onSubmitCourse(data: CourseSheetFormValues) {
+    try {
+      setCreatingCourse(true);
+
+      const slug = slugifyText(data.nomeInterno || data.tituloComercial);
+      const categorySlugs = data.categorias.map(slugifyText).filter(Boolean);
+
+      const response = await request<{
+        id?: number;
+      }>({
+        url: '/lms/courses',
+        method: 'POST',
+        data: {
+          code: buildCourseCodeFromTitle(
+            data.tituloComercial || data.nomeInterno
+          ),
+          slug,
+          title: data.tituloComercial,
+          description: data.descricao,
+          level: ptLevelToApi(data.nivel),
+          status: courseStatusToApi(data.status),
+          categorySlugs,
+        },
+      });
+
+      const createdCourseId = Number(response?.data?.id);
+
+      await refetchCourses();
+      if (Number.isFinite(createdCourseId) && createdCourseId > 0) {
+        addTrailItem('course', createdCourseId);
+        setSelectedCourseToAdd('');
+      }
+
+      setCourseSheetOpen(false);
+      toast.success(t('toasts.courseCreated'));
+    } finally {
+      setCreatingCourse(false);
+    }
+  }
+
+  async function onSubmitExam(data: ExamQuickForm) {
+    try {
+      setCreatingExam(true);
+
+      const response = await request<{ id?: number }>({
+        url: '/lms/exams',
+        method: 'POST',
+        data: {
+          title: data.titulo,
+          minScore: data.notaMinima,
+          timeLimit: data.limiteTempo,
+          shuffle: data.shuffle,
+          status: examStatusToApi(data.status),
+        },
+      });
+
+      const createdExamId = Number(response?.data?.id);
+
+      await refetchExams();
+      if (Number.isFinite(createdExamId) && createdExamId > 0) {
+        addTrailItem('exam', createdExamId);
+        setSelectedExamToAdd('');
+      }
+
+      setExamSheetOpen(false);
+      toast.success(t('toasts.examCreated'));
+    } finally {
+      setCreatingExam(false);
+    }
+  }
+
+  async function confirmDelete() {
     if (!formacaoToDelete) return;
-    setFormacoes((prev) => prev.filter((f) => f.id !== formacaoToDelete.id));
+
+    await request({
+      url: `/lms/training/${formacaoToDelete.id}`,
+      method: 'DELETE',
+    });
+
     toast.success(t('toasts.formacaoRemovida'));
+    await Promise.all([refetchTraining(), refetchStats()]);
     setFormacaoToDelete(null);
     setDeleteDialogOpen(false);
   }
@@ -503,41 +1348,60 @@ export default function TrainingPage() {
 
   const kpis = [
     {
-      label: t('kpis.totalTraining.label'),
-      valor: formacoes.length,
-      sub: t('kpis.totalTraining.sub'),
+      key: 'total-training',
+      title: t('kpis.totalTraining.label'),
+      value: statsData?.totalTraining ?? 0,
+      description: t('kpis.totalTraining.sub'),
       icon: GraduationCap,
-      iconBg: 'bg-orange-100',
-      iconColor: 'text-orange-600',
+      layout: 'compact' as const,
+      accentClassName: 'from-orange-500/25 via-amber-500/15 to-transparent',
+      iconContainerClassName: 'bg-orange-100 text-orange-700',
     },
     {
-      label: t('kpis.activeTraining.label'),
-      valor: formacoes.filter((f) => f.status === 'ativa').length,
-      sub: t('kpis.activeTraining.sub'),
+      key: 'active-training',
+      title: t('kpis.activeTraining.label'),
+      value: statsData?.activeTraining ?? 0,
+      description: t('kpis.activeTraining.sub'),
       icon: Target,
-      iconBg: 'bg-muted',
-      iconColor: 'text-foreground',
+      layout: 'compact' as const,
+      accentClassName: 'from-sky-500/25 via-blue-500/15 to-transparent',
+      iconContainerClassName: 'bg-sky-100 text-sky-700',
     },
     {
-      label: t('kpis.enrolledStudents.label'),
-      valor: formacoes
-        .reduce((a, f) => a + f.alunos, 0)
-        .toLocaleString('pt-BR'),
-      sub: t('kpis.enrolledStudents.sub'),
+      key: 'enrolled-students',
+      title: t('kpis.enrolledStudents.label'),
+      value: (statsData?.enrolledStudents ?? 0).toLocaleString('pt-BR'),
+      description: t('kpis.enrolledStudents.sub'),
       icon: Users,
-      iconBg: 'bg-muted',
-      iconColor: 'text-foreground',
+      layout: 'compact' as const,
+      accentClassName: 'from-emerald-500/25 via-green-500/15 to-transparent',
+      iconContainerClassName: 'bg-emerald-100 text-emerald-700',
     },
     {
-      label: t('kpis.coveredCourses.label'),
-      valor: new Set(formacoes.flatMap((f) => f.cursos)).size,
-      sub: t('kpis.coveredCourses.sub'),
+      key: 'covered-courses',
+      title: t('kpis.coveredCourses.label'),
+      value: statsData?.coveredCourses ?? 0,
+      description: t('kpis.coveredCourses.sub'),
       icon: Layers,
-      iconBg: 'bg-muted',
-      iconColor: 'text-foreground',
+      layout: 'compact' as const,
+      accentClassName: 'from-pink-500/25 via-rose-500/15 to-transparent',
+      iconContainerClassName: 'bg-pink-100 text-pink-700',
     },
   ];
 
+  const { locales } = useApp();
+
+  const handleNewTraining = (): void => {
+    const nextLocaleData: Record<string, { name: string }> = {};
+    locales.forEach((locale: Locale) => {
+      nextLocaleData[locale.code] = {
+        name: '',
+      };
+    });
+    void nextLocaleData;
+    openCreateSheet();
+  };
+
   // ── Render ────────────────────────────────────────────────────────────────
 
   return (
@@ -554,298 +1418,438 @@ export default function TrainingPage() {
             label: t('title'),
           },
         ]}
-        actions={
-          <Button onClick={openCreateSheet} className="gap-2">
-            <Plus className="size-4" />
-            {t('actions.createTraining')}
-          </Button>
-        }
+        actions={[
+          {
+            label: t('actions.createTraining'),
+            onClick: () => handleNewTraining(),
+            variant: 'default',
+          },
+        ]}
       />
 
       {/* KPIs */}
-      <div className="mb-6 grid grid-cols-2 gap-4 lg:grid-cols-4">
-        {loading
-          ? Array.from({ length: 4 }).map((_, i) => (
+      <div className="mb-1">
+        {initialLoading && !statsData ? (
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+            {Array.from({ length: 4 }).map((_, i) => (
               <Card key={i}>
                 <CardContent className="p-4">
                   <Skeleton className="mb-2 h-8 w-16" />
                   <Skeleton className="h-4 w-28" />
                 </CardContent>
               </Card>
-            ))
-          : kpis.map((kpi, i) => (
-              <motion.div
-                key={kpi.label}
-                initial={{ opacity: 0, y: 12 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: i * 0.07 }}
-              >
-                <Card className="overflow-hidden">
-                  <CardContent className="flex items-start justify-between p-5">
-                    <div>
-                      <p className="text-sm text-muted-foreground">
-                        {kpi.label}
-                      </p>
-                      <p className="mt-1 text-3xl font-bold tracking-tight">
-                        {kpi.valor}
-                      </p>
-                      <p className="mt-0.5 text-xs text-muted-foreground">
-                        {kpi.sub}
-                      </p>
-                    </div>
-                    <div
-                      className={`flex size-10 shrink-0 items-center justify-center rounded-lg ${kpi.iconBg}`}
-                    >
-                      <kpi.icon className={`size-5 ${kpi.iconColor}`} />
-                    </div>
-                  </CardContent>
-                </Card>
-              </motion.div>
             ))}
+          </div>
+        ) : (
+          <KpiCardsGrid items={kpis} />
+        )}
       </div>
 
       {/* Search bar */}
-      <form onSubmit={handleSearch} className="mb-6 mt-0">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-          <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              placeholder={t('filters.searchPlaceholder')}
-              value={buscaInput}
-              onChange={(e) => setBuscaInput(e.target.value)}
-              className="pl-9"
+      <div className="mb-1 space-y-3">
+        <SearchBar
+          searchQuery={buscaInput}
+          onSearchChange={setBuscaInput}
+          onSearch={() => {
+            setBuscaDebounced(buscaInput.trim());
+            setCurrentPage(1);
+          }}
+          placeholder={t('filters.searchPlaceholder')}
+          controls={[
+            {
+              id: 'status',
+              type: 'select',
+              value: filtroStatusInput,
+              onChange: setFiltroStatusInput,
+              placeholder: t('filters.allStatuses'),
+              options: [
+                { value: 'todos', label: t('filters.allStatuses') },
+                { value: 'ativa', label: t('status.active') },
+                { value: 'rascunho', label: t('status.draft') },
+                { value: 'encerrada', label: t('status.closed') },
+              ],
+            },
+            {
+              id: 'level',
+              type: 'select',
+              value: filtroNivelInput,
+              onChange: setFiltroNivelInput,
+              placeholder: t('filters.allLevels'),
+              options: [
+                { value: 'todos', label: t('filters.allLevels') },
+                { value: 'Iniciante', label: t('levels.beginner') },
+                { value: 'Intermediario', label: t('levels.intermediate') },
+                { value: 'Avancado', label: t('levels.advanced') },
+              ],
+            },
+          ]}
+          afterSearchButton={
+            <ViewModeToggle
+              viewMode={viewMode}
+              onViewModeChange={setViewMode}
+              listLabel={t('viewMode.list')}
+              cardsLabel={t('viewMode.cards')}
             />
-          </div>
-          <div className="flex flex-wrap items-center gap-2">
-            <Select value={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>
+          }
+        />
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <p className="text-sm text-muted-foreground">
+            {totalItems}{' '}
+            {totalItems !== 1
+              ? t('pagination.formacoes')
+              : t('pagination.formacao')}
+          </p>
+          <div className="flex items-center gap-2">
             {hasActiveFilters && (
               <Button
                 type="button"
                 variant="ghost"
                 size="sm"
                 onClick={clearFilters}
-                className="h-9 text-muted-foreground"
               >
-                <X className="mr-1 size-3.5" /> {t('filters.clear')}
+                {t('filters.clear')}
               </Button>
             )}
-            <Button type="submit" size="sm" className="h-9 gap-2">
-              <Search className="size-3.5" /> {t('filters.search')}
-            </Button>
+            {cardsRefreshing && (
+              <Loader2 className="size-4 animate-spin text-muted-foreground" />
+            )}
           </div>
         </div>
-      </form>
-
-      {/* Cards grid */}
-      {loading ? (
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {Array.from({ length: 6 }).map((_, i) => (
-            <Card key={i} className="overflow-hidden">
-              <CardContent className="p-5 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>
+
+      {/* Training list */}
+      {initialLoading ? (
+        viewMode === 'cards' ? (
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <Card key={i} className="overflow-hidden">
+                <CardContent className="p-5">
+                  <div className="flex min-h-52.5 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="mt-auto flex gap-2">
+                      <Skeleton className="h-6 w-16 rounded-full" />
+                      <Skeleton className="h-6 w-20 rounded-full" />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="overflow-hidden rounded-xl border border-border/70">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('form.fields.nome.label')}</TableHead>
+                  <TableHead>{t('form.fields.level.label')}</TableHead>
+                  <TableHead>{t('form.fields.status.label')}</TableHead>
+                  <TableHead>{t('cards.coursesLabel')}</TableHead>
+                  <TableHead>{t('cards.hoursLabel')}</TableHead>
+                  <TableHead className="text-right">
+                    {t('cards.studentsLabel')}
+                  </TableHead>
+                  <TableHead className="w-12" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <TableRow key={i}>
+                    <TableCell>
+                      <div className="space-y-1.5">
+                        <Skeleton className="h-4 w-44" />
+                        <Skeleton className="h-3 w-56" />
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-5 w-20 rounded-full" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-5 w-20 rounded-full" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-12" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-10" />
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Skeleton className="ml-auto h-4 w-12" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="ml-auto size-8 rounded-md" />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )
+      ) : totalItems === 0 ? (
         <EmptyState
-          icon={<GraduationCap className="h-12 w-12" />}
+          icon={<GraduationCap className="size-12 text-muted-foreground/40" />}
           title={t('empty.title')}
           description={t('empty.description')}
           actionLabel={t('empty.action')}
+          actionIcon={<Plus className="mr-2 size-4" />}
           onAction={openCreateSheet}
-          actionIcon={<Plus className="mr-2 h-4 w-4" />}
+          className="py-20"
         />
       ) : (
-        <motion.div
-          className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
-          variants={stagger}
-          initial="hidden"
-          animate="show"
-        >
-          {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 flex min-h-60 max-h-[270px] cursor-pointer flex-col overflow-hidden transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
-                  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-8 shrink-0 -mr-2 -mt-1"
-                            onClick={(e) => e.stopPropagation()}
-                            aria-label={t('cards.actions.label')}
-                          >
-                            <MoreHorizontal className="size-4" />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end" className="w-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>
+        <div className="relative">
+          {cardsRefreshing && (
+            <div className="absolute inset-0 z-10 rounded-2xl bg-background/55 backdrop-blur-[1px]" />
+          )}
+          {viewMode === 'cards' ? (
+            <motion.div
+              className={`${'grid gap-4 sm:grid-cols-2 lg:grid-cols-3'} ${cardsRefreshing ? 'pointer-events-none' : ''}`}
+              variants={stagger}
+              initial="hidden"
+              animate="show"
+            >
+              {formacoesToRender.map((formacao) => {
+                const statusCfg = STATUS_MAP[formacao.status] ?? {
+                  label: formacao.status,
+                  variant: 'default' as const,
+                };
+                const cardTopColor =
+                  normalizeHexColor(formacao.primaryColor) ?? '#1D4ED8';
 
-                    {/* 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>
+                return (
+                  <motion.div key={formacao.id} variants={fadeUp}>
+                    <Card
+                      className="group relative flex min-h-60 max-h-67.5 cursor-pointer flex-col overflow-hidden border-border/70 py-0 shadow-sm transition-all duration-200 hover:border-border hover:shadow-md"
+                      onClick={() => handleCardClick(formacao)}
+                      title={t('cards.tooltip')}
+                    >
+                      <div
+                        className="absolute inset-x-0 top-0 h-1"
+                        style={{
+                          backgroundColor: cardTopColor,
+                        }}
+                      />
+                      <CardContent className="flex h-full flex-col p-4 pt-5">
+                        <div className="mb-3 flex items-center justify-between gap-2">
+                          <div className="flex flex-wrap items-center gap-1.5">
+                            <Badge variant="outline" className="text-xs">
+                              {normalizeLevelValue(formacao.nivel)}
+                            </Badge>
+                            <Badge
+                              variant={statusCfg.variant}
+                              className="text-xs"
+                            >
+                              {statusCfg.label}
+                            </Badge>
+                          </div>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="size-8 shrink-0 -mr-2 -mt-1"
+                                onClick={(e) => e.stopPropagation()}
+                                aria-label={t('cards.actions.label')}
+                              >
+                                <MoreHorizontal className="size-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end" className="w-48">
+                              <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) => openDeleteDialog(formacao, e)}
+                              >
+                                <Trash2 className="mr-2 size-4" />{' '}
+                                {t('cards.actions.delete')}
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
 
-                    {/* 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>
+                        <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>
+
+                        <p className="mb-3 line-clamp-1 text-xs text-muted-foreground">
+                          {t('cards.prerequisiteLabel')}{' '}
+                          {formacao.prerequisitos?.trim()
+                            ? formacao.prerequisitos
+                            : t('cards.noPrerequisite')}
+                        </p>
+
+                        <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" />
+                        <Separator className="mb-3" />
+
+                        <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>
+          ) : (
+            <div
+              className={`overflow-hidden rounded-xl border border-border/70 ${cardsRefreshing ? 'pointer-events-none' : ''}`}
+            >
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('form.fields.nome.label')}</TableHead>
+                    <TableHead>{t('form.fields.level.label')}</TableHead>
+                    <TableHead>{t('form.fields.status.label')}</TableHead>
+                    <TableHead>{t('cards.coursesLabel')}</TableHead>
+                    <TableHead>{t('cards.hoursLabel')}</TableHead>
+                    <TableHead className="text-right">
+                      {t('cards.studentsLabel')}
+                    </TableHead>
+                    <TableHead className="w-12" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {formacoesToRender.map((formacao) => {
+                    const statusCfg = STATUS_MAP[formacao.status] ?? {
+                      label: formacao.status,
+                      variant: 'default' as const,
+                    };
+
+                    return (
+                      <TableRow
+                        key={formacao.id}
+                        className="cursor-pointer"
+                        onClick={() => handleCardClick(formacao)}
+                        title={t('cards.tooltip')}
+                      >
+                        <TableCell>
+                          <div className="min-w-0">
+                            <p className="truncate font-semibold text-foreground">
+                              {formacao.nome}
+                            </p>
+                            <p className="mt-1 line-clamp-1 text-xs text-muted-foreground">
+                              {formacao.prerequisitos?.trim()
+                                ? formacao.prerequisitos
+                                : t('cards.noPrerequisite')}
+                            </p>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <Badge variant="outline" className="text-xs">
+                            {normalizeLevelValue(formacao.nivel)}
+                          </Badge>
+                        </TableCell>
+                        <TableCell>
+                          <Badge
+                            variant={statusCfg.variant}
+                            className="text-xs"
+                          >
+                            {statusCfg.label}
+                          </Badge>
+                        </TableCell>
+                        <TableCell>{formacao.cursos.length}</TableCell>
+                        <TableCell>
                           {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>
+                        </TableCell>
+                        <TableCell className="text-right font-medium">
+                          {formacao.alunos.toLocaleString('pt-BR')}
+                        </TableCell>
+                        <TableCell onClick={(e) => e.stopPropagation()}>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="ml-auto size-8"
+                                aria-label={t('cards.actions.label')}
+                              >
+                                <MoreHorizontal className="size-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end" className="w-48">
+                              <DropdownMenuItem
+                                onClick={() => openEditSheet(formacao)}
+                              >
+                                <Pencil className="mr-2 size-4" />{' '}
+                                {t('cards.actions.edit')}
+                              </DropdownMenuItem>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem
+                                className="text-destructive focus:text-destructive"
+                                onClick={(e) => openDeleteDialog(formacao, e)}
+                              >
+                                <Trash2 className="mr-2 size-4" />{' '}
+                                {t('cards.actions.delete')}
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </div>
       )}
 
       {/* Pagination footer */}
-      {!loading && filteredFormacoes.length > 0 && (
+      {!initialLoading && totalItems > 0 && (
         <div className="mt-6">
           <PaginationFooter
             currentPage={safePage}
             pageSize={pageSize}
-            totalItems={filteredFormacoes.length}
+            totalItems={totalItems}
             onPageChange={setCurrentPage}
-            onPageSizeChange={(nextSize) => {
-              setPageSize(nextSize);
+            onPageSizeChange={(nextPageSize) => {
+              setPageSize(nextPageSize);
               setCurrentPage(1);
             }}
             pageSizeOptions={PAGE_SIZES}
@@ -896,105 +1900,70 @@ export default function TrainingPage() {
                 {form.formState.errors.descricao?.message}
               </FieldError>
             </Field>
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
               <Field>
                 <FieldLabel>
-                  {t('form.fields.area.label')}{' '}
+                  {t('form.fields.nivel.label')}{' '}
                   <span className="text-destructive">*</span>
                 </FieldLabel>
                 <Controller
-                  name="area"
+                  name="nivel"
                   control={form.control}
                   render={({ field }) => (
                     <Select onValueChange={field.onChange} value={field.value}>
                       <SelectTrigger>
                         <SelectValue
-                          placeholder={t('form.fields.area.placeholder')}
+                          placeholder={t('form.fields.nivel.placeholder')}
                         />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="Tecnologia">
-                          {t('areas.technology')}
-                        </SelectItem>
-                        <SelectItem value="Design">
-                          {t('areas.design')}
-                        </SelectItem>
-                        <SelectItem value="Gestao">
-                          {t('areas.management')}
+                        <SelectItem value="Iniciante">
+                          {t('levels.beginner')}
                         </SelectItem>
-                        <SelectItem value="Marketing">
-                          {t('areas.marketing')}
+                        <SelectItem value="Intermediario">
+                          {t('levels.intermediate')}
                         </SelectItem>
-                        <SelectItem value="Financas">
-                          {t('areas.finance')}
+                        <SelectItem value="Avancado">
+                          {t('levels.advanced')}
                         </SelectItem>
                       </SelectContent>
                     </Select>
                   )}
                 />
-                <FieldError>{form.formState.errors.area?.message}</FieldError>
+                <FieldError>{form.formState.errors.nivel?.message}</FieldError>
               </Field>
+
               <Field>
                 <FieldLabel>
-                  {t('form.fields.nivel.label')}{' '}
+                  {t('form.fields.status.label')}{' '}
                   <span className="text-destructive">*</span>
                 </FieldLabel>
                 <Controller
-                  name="nivel"
+                  name="status"
                   control={form.control}
                   render={({ field }) => (
                     <Select onValueChange={field.onChange} value={field.value}>
                       <SelectTrigger>
-                        <SelectValue
-                          placeholder={t('form.fields.nivel.placeholder')}
-                        />
+                        <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="Iniciante">
-                          {t('levels.beginner')}
+                        <SelectItem value="rascunho">
+                          {t('status.draft')}
                         </SelectItem>
-                        <SelectItem value="Intermediario">
-                          {t('levels.intermediate')}
+                        <SelectItem value="ativa">
+                          {t('status.active')}
                         </SelectItem>
-                        <SelectItem value="Avancado">
-                          {t('levels.advanced')}
+                        <SelectItem value="encerrada">
+                          {t('status.closed')}
                         </SelectItem>
                       </SelectContent>
                     </Select>
                   )}
                 />
-                <FieldError>{form.formState.errors.nivel?.message}</FieldError>
+                <FieldError>{form.formState.errors.status?.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')}
@@ -1006,34 +1975,175 @@ export default function TrainingPage() {
               />
             </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="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <Field>
+                <FieldLabel htmlFor="primaryColor">Cor Primária</FieldLabel>
+                <Controller
+                  name="primaryColor"
+                  control={form.control}
+                  render={({ field }) => (
                     <div className="flex items-center gap-2">
-                      <Checkbox
-                        checked={selectedCursos.includes(c.nome)}
-                        onCheckedChange={() => toggleCurso(c.nome)}
+                      <Input
+                        id="primaryColor"
+                        type="color"
+                        className="h-10 w-16 p-1"
+                        value={field.value}
+                        onChange={field.onChange}
+                      />
+                      <Input
+                        value={field.value}
+                        onChange={field.onChange}
+                        placeholder="#1D4ED8"
                       />
-                      <span className="text-sm">{c.nome}</span>
                     </div>
-                    <span className="text-xs text-muted-foreground">
-                      {c.cargaHoraria}h
-                    </span>
-                  </label>
-                ))}
+                  )}
+                />
+                <FieldError>
+                  {form.formState.errors.primaryColor?.message}
+                </FieldError>
+              </Field>
+
+              <Field>
+                <FieldLabel htmlFor="secondaryColor">Cor Secundária</FieldLabel>
+                <Controller
+                  name="secondaryColor"
+                  control={form.control}
+                  render={({ field }) => (
+                    <div className="flex items-center gap-2">
+                      <Input
+                        id="secondaryColor"
+                        type="color"
+                        className="h-10 w-16 p-1"
+                        value={field.value}
+                        onChange={field.onChange}
+                      />
+                      <Input
+                        value={field.value}
+                        onChange={field.onChange}
+                        placeholder="#111827"
+                      />
+                    </div>
+                  )}
+                />
+                <FieldError>
+                  {form.formState.errors.secondaryColor?.message}
+                </FieldError>
+              </Field>
+            </div>
+
+            {/* Trilha */}
+            <Field>
+              <FieldLabel>{t('form.fields.trilha.label')}</FieldLabel>
+              <div className="space-y-2">
+                <div className="rounded-md border bg-muted/20 p-3">
+                  <div className="space-y-2">
+                    <div className="grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_auto]">
+                      <Select
+                        value={selectedCourseToAdd}
+                        onValueChange={handleCourseSelection}
+                        disabled={selectableCursos.length === 0}
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue
+                            placeholder={t('form.fields.cursos.placeholder')}
+                          />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {selectableCursos.map((course) => (
+                            <SelectItem
+                              key={course.id}
+                              value={String(course.id)}
+                            >
+                              {course.nome} ({course.cargaHoraria}h)
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        className="w-full shrink-0 whitespace-nowrap sm:w-auto"
+                        onClick={openCreateCourseSheet}
+                      >
+                        <Plus className="size-4" />
+                      </Button>
+                    </div>
+
+                    <div className="grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_auto]">
+                      <Select
+                        value={selectedExamToAdd}
+                        onValueChange={handleExamSelection}
+                        disabled={selectableExams.length === 0}
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue
+                            placeholder={t('form.fields.exames.placeholder')}
+                          />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {selectableExams.map((exam) => (
+                            <SelectItem key={exam.id} value={String(exam.id)}>
+                              {exam.titulo} ({exam.limiteTempo}min)
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        className="w-full shrink-0 whitespace-nowrap sm:w-auto"
+                        onClick={openCreateExamSheet}
+                      >
+                        <Plus className="size-4" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+
+                {trailItems.length > 0 ? (
+                  <>
+                    <div className="rounded-md border bg-background">
+                      <DndContext
+                        sensors={sensors}
+                        collisionDetection={closestCenter}
+                        onDragEnd={handleTrailDragEnd}
+                      >
+                        <SortableContext
+                          items={trailItems.map((item) => item.uid)}
+                          strategy={verticalListSortingStrategy}
+                        >
+                          {trailItems.map((item) => (
+                            <SortableTrailItem
+                              key={item.uid}
+                              item={item}
+                              onRemove={removeTrailItem}
+                            />
+                          ))}
+                        </SortableContext>
+                      </DndContext>
+                    </div>
+                  </>
+                ) : (
+                  <div className="rounded-md border p-3">
+                    <p className="text-sm text-muted-foreground">
+                      {t('form.fields.trilha.empty')}
+                    </p>
+                  </div>
+                )}
               </div>
-              {selectedCursos.length > 0 && (
+
+              {(isFetchingCourses || isFetchingExams) && (
+                <p className="text-xs text-muted-foreground">
+                  {t('form.fields.trilha.loading')}
+                </p>
+              )}
+
+              {learningPathItems.length > 0 && (
                 <p className="text-xs text-muted-foreground mt-1">
-                  {selectedCursos.length} {t('coursesSummary.courses')}{' '}
+                  {learningPathItems.length} {t('coursesSummary.items')}{' '}
                   {t('coursesSummary.dot')}{' '}
                   {availableCursos
-                    .filter((c) => selectedCursos.includes(c.nome))
+                    .filter((c) => selectedCursos.includes(c.id))
                     .reduce((a, c) => a + c.cargaHoraria, 0)}
                   {t('coursesSummary.hours')}
                 </p>
@@ -1041,8 +2151,14 @@ export default function TrainingPage() {
             </Field>
 
             <SheetFooter className="mt-auto shrink-0 gap-2 pt-4 px-0">
-              <Button type="submit" disabled={saving} className="gap-2">
-                {saving && <Loader2 className="size-4 animate-spin" />}
+              <Button
+                type="submit"
+                disabled={saving || loadingEditSheet}
+                className="gap-2"
+              >
+                {(saving || loadingEditSheet) && (
+                  <Loader2 className="size-4 animate-spin" />
+                )}
                 {editingFormacao
                   ? t('form.actions.save')
                   : t('form.actions.create')}
@@ -1052,9 +2168,138 @@ export default function TrainingPage() {
         </SheetContent>
       </Sheet>
 
+      <CourseFormSheet
+        open={courseSheetOpen}
+        onOpenChange={setCourseSheetOpen}
+        editing={false}
+        saving={creatingCourse}
+        form={courseForm}
+        onSubmit={onSubmitCourse}
+        categories={categoryOptions}
+        onCreateCategory={() => router.push('/category?new=1')}
+        t={tCourse}
+      />
+
+      <Sheet open={examSheetOpen} onOpenChange={setExamSheetOpen}>
+        <SheetContent
+          side="right"
+          className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+        >
+          <SheetHeader>
+            <SheetTitle>{t('examForm.title')}</SheetTitle>
+            <SheetDescription>{t('examForm.description')}</SheetDescription>
+          </SheetHeader>
+
+          <form
+            onSubmit={examForm.handleSubmit(onSubmitExam)}
+            className="flex flex-1 flex-col gap-4 px-4 py-6"
+          >
+            <Field>
+              <FieldLabel htmlFor="exam-titulo">
+                {tExam('form.fields.title.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
+              <Input
+                id="exam-titulo"
+                placeholder={tExam('form.fields.title.placeholder')}
+                {...examForm.register('titulo')}
+              />
+              <FieldError>
+                {examForm.formState.errors.titulo?.message}
+              </FieldError>
+            </Field>
+
+            <div className="grid grid-cols-2 gap-4">
+              <Field>
+                <FieldLabel htmlFor="exam-min-score">
+                  {tExam('form.fields.minScore.label')}{' '}
+                  <span className="text-destructive">*</span>
+                </FieldLabel>
+                <Input
+                  id="exam-min-score"
+                  type="number"
+                  step="0.5"
+                  {...examForm.register('notaMinima')}
+                />
+              </Field>
+
+              <Field>
+                <FieldLabel htmlFor="exam-time-limit">
+                  {tExam('form.fields.timeLimit.label')}{' '}
+                  <span className="text-destructive">*</span>
+                </FieldLabel>
+                <Input
+                  id="exam-time-limit"
+                  type="number"
+                  {...examForm.register('limiteTempo')}
+                />
+              </Field>
+            </div>
+
+            <Field>
+              <FieldLabel>{tExam('form.fields.status.label')}</FieldLabel>
+              <Controller
+                name="status"
+                control={examForm.control}
+                render={({ field }) => (
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <SelectTrigger>
+                      <SelectValue
+                        placeholder={tExam('form.fields.status.placeholder')}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="rascunho">
+                        {tExam('status.draft')}
+                      </SelectItem>
+                      <SelectItem value="publicado">
+                        {tExam('status.published')}
+                      </SelectItem>
+                      <SelectItem value="encerrado">
+                        {tExam('status.closed')}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+            </Field>
+
+            <Field>
+              <div className="flex items-center justify-between rounded-lg border p-3">
+                <div>
+                  <p className="text-sm font-medium">
+                    {tExam('form.fields.shuffle.label')}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {tExam('form.fields.shuffle.description')}
+                  </p>
+                </div>
+                <Controller
+                  name="shuffle"
+                  control={examForm.control}
+                  render={({ field }) => (
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  )}
+                />
+              </div>
+            </Field>
+
+            <SheetFooter className="mt-auto px-0">
+              <Button type="submit" disabled={creatingExam} className="gap-2">
+                {creatingExam && <Loader2 className="size-4 animate-spin" />}
+                {t('examForm.actions.create')}
+              </Button>
+            </SheetFooter>
+          </form>
+        </SheetContent>
+      </Sheet>
+
       {/* Delete Dialog */}
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <DialogContent>
+        <DialogContent className="max-w-3xl">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
               <AlertTriangle className="size-5 text-destructive" />{' '}