@hed-hog/lms 0.0.314 → 0.0.316

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

@@ -0,0 +1,2339 @@
+'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 {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Field, FieldError, FieldLabel } from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { 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,
+  Clock,
+  GraduationCap,
+  GripVertical,
+  Layers,
+  Loader2,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Target,
+  Trash2,
+  Users,
+  X,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Controller, useForm, useWatch } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface Formacao {
+  id: number;
+  nome: string;
+  descricao: string;
+  area: string;
+  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 ────────────────────────────────────────────────────────────────────
+
+const formacaoSchema = z.object({
+  nome: z.string().min(3, 'Minimo 3 caracteres'),
+  descricao: z.string().min(10, 'Minimo 10 caracteres'),
+  area: z.enum(['Tecnologia', 'Design', 'Gestao', 'Marketing', 'Financas']),
+  nivel: z.enum(['Iniciante', 'Intermediario', 'Avancado']),
+  prerequisitos: z.string().optional(),
+  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>;
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const STATUS_MAP: Record<
+  string,
+  { label: string; variant: 'default' | 'secondary' | 'outline' }
+> = {
+  ativa: { label: 'Ativa', variant: 'default' },
+  rascunho: { label: 'Rascunho', variant: 'secondary' },
+  encerrada: { label: 'Encerrada', variant: 'outline' },
+};
+
+const PAGE_SIZES = [6, 12, 24];
+const API_TRAINING_CACHE_KEY = 'lms:training:api-cache';
+
+// ── Animations ────────────────────────────────────────────────────────────────
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 16 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.3 },
+  },
+};
+const stagger = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.05 } },
+};
+
+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 tCourse = useTranslations('lms.CoursesPage');
+  const tExam = useTranslations('lms.ExamsPage');
+  const router = useRouter();
+  const { request } = useApp();
+
+  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 [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 [buscaDebounced, setBuscaDebounced] = useState('');
+  const [filtroStatusInput, setFiltroStatusInput] = useState('todos');
+  const [filtroNivelInput, setFiltroNivelInput] = useState('todos');
+  const [viewMode, setViewMode] = usePersistedViewMode<ViewMode>({
+    storageKey: 'lms:training:view-mode',
+    defaultValue: 'cards',
+    allowedValues: ['cards', 'list'],
+  });
+
+  // Pagination
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+
+  // Double-click tracking
+  const clickTimers = useRef<Map<number, ReturnType<typeof setTimeout>>>(
+    new Map()
+  );
+
+  const 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: 'Tecnologia',
+      nivel: 'Iniciante',
+      prerequisitos: '',
+      status: 'rascunho',
+      primaryColor: '#1D4ED8',
+      secondaryColor: '#111827',
+    },
+  });
+
+  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 });
+
+  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 selectedCursos = useMemo(
+    () =>
+      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 selectableExams = useMemo(
+    () => [...availableExams].sort((a, b) => a.titulo.localeCompare(b.titulo)),
+    [availableExams]
+  );
+
+  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]
+  );
+
+  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('');
+    setBuscaDebounced('');
+    setFiltroStatusInput('todos');
+    setFiltroNivelInput('todos');
+    setCurrentPage(1);
+  }
+
+  const hasActiveFilters =
+    buscaInput.trim().length > 0 ||
+    filtroStatusInput !== 'todos' ||
+    filtroNivelInput !== 'todos';
+
+  function openDeleteDialog(formacao: Formacao, e: React.MouseEvent) {
+    e.stopPropagation();
+    setFormacaoToDelete(formacao);
+    setDeleteDialogOpen(true);
+  }
+
+  // ── Double-click ──────────────────────────────────────────────────────────
+
+  function handleCardClick(formacao: Formacao) {
+    const existing = clickTimers.current.get(formacao.id);
+    if (existing) {
+      clearTimeout(existing);
+      clickTimers.current.delete(formacao.id);
+      // Toast message for opening would go here if integrated
+    } else {
+      const timer = setTimeout(
+        () => clickTimers.current.delete(formacao.id),
+        300
+      );
+      clickTimers.current.set(formacao.id, timer);
+    }
+  }
+
+  // ── CRUD ──────────────────────────────────────────────────────────────────
+
+  function openCreateSheet() {
+    setEditingFormacao(null);
+    initialLearningPathRef.current = [];
+    setLearningPathItems([]);
+    form.reset({
+      nome: '',
+      descricao: '',
+      area: 'Tecnologia',
+      nivel: 'Iniciante',
+      prerequisitos: '',
+      status: 'rascunho',
+      primaryColor: '#1D4ED8',
+      secondaryColor: '#111827',
+    });
+    examForm.reset();
+    setSelectedCourseToAdd('');
+    setSelectedExamToAdd('');
+    void Promise.all([refetchCourses(), refetchExams(), refetchCategories()]);
+    setSheetOpen(true);
+  }
+
+  async function openEditSheet(formacao: Formacao, e?: React.MouseEvent) {
+    e?.stopPropagation();
+    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,
+        },
+      ]);
+    });
+  }
+
+  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) {
+    try {
+      const orderedItems = normalizeTrailOrder(
+        [...learningPathItems].sort((a, b) => a.order - b.order)
+      );
+
+      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);
+    }
+  }
+
+  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;
+
+    await request({
+      url: `/lms/training/${formacaoToDelete.id}`,
+      method: 'DELETE',
+    });
+
+    toast.success(t('toasts.formacaoRemovida'));
+    await Promise.all([refetchTraining(), refetchStats()]);
+    setFormacaoToDelete(null);
+    setDeleteDialogOpen(false);
+  }
+
+  // ── KPIs ─────────────────────────────────────────────────────���────────────
+
+  const kpis = [
+    {
+      key: 'total-training',
+      title: t('kpis.totalTraining.label'),
+      value: statsData?.totalTraining ?? 0,
+      description: t('kpis.totalTraining.sub'),
+      icon: GraduationCap,
+      layout: 'compact' as const,
+      accentClassName: 'from-orange-500/25 via-amber-500/15 to-transparent',
+      iconContainerClassName: 'bg-orange-100 text-orange-700',
+    },
+    {
+      key: 'active-training',
+      title: t('kpis.activeTraining.label'),
+      value: statsData?.activeTraining ?? 0,
+      description: t('kpis.activeTraining.sub'),
+      icon: Target,
+      layout: 'compact' as const,
+      accentClassName: 'from-sky-500/25 via-blue-500/15 to-transparent',
+      iconContainerClassName: 'bg-sky-100 text-sky-700',
+    },
+    {
+      key: 'enrolled-students',
+      title: t('kpis.enrolledStudents.label'),
+      value: (statsData?.enrolledStudents ?? 0).toLocaleString('pt-BR'),
+      description: t('kpis.enrolledStudents.sub'),
+      icon: Users,
+      layout: 'compact' as const,
+      accentClassName: 'from-emerald-500/25 via-green-500/15 to-transparent',
+      iconContainerClassName: 'bg-emerald-100 text-emerald-700',
+    },
+    {
+      key: 'covered-courses',
+      title: t('kpis.coveredCourses.label'),
+      value: statsData?.coveredCourses ?? 0,
+      description: t('kpis.coveredCourses.sub'),
+      icon: Layers,
+      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 (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          {
+            label: t('breadcrumbs.home'),
+            href: '/',
+          },
+          {
+            label: t('title'),
+          },
+        ]}
+        actions={[
+          {
+            label: t('actions.createTraining'),
+            onClick: () => handleNewTraining(),
+            variant: 'default',
+          },
+        ]}
+      />
+
+      {/* KPIs */}
+      <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>
+            ))}
+          </div>
+        ) : (
+          <KpiCardsGrid items={kpis} />
+        )}
+      </div>
+
+      {/* Search bar */}
+      <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 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}
+              >
+                {t('filters.clear')}
+              </Button>
+            )}
+            {cardsRefreshing && (
+              <Loader2 className="size-4 animate-spin text-muted-foreground" />
+            )}
+          </div>
+        </div>
+      </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="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}
+          className="py-20"
+        />
+      ) : (
+        <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';
+
+                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>
+
+                        <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" />
+
+                        <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')}
+                        </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 */}
+      {!initialLoading && totalItems > 0 && (
+        <div className="mt-6">
+          <PaginationFooter
+            currentPage={safePage}
+            pageSize={pageSize}
+            totalItems={totalItems}
+            onPageChange={setCurrentPage}
+            onPageSizeChange={(nextPageSize) => {
+              setPageSize(nextPageSize);
+              setCurrentPage(1);
+            }}
+            pageSizeOptions={PAGE_SIZES}
+          />
+        </div>
+      )}
+
+      {/* Sheet */}
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetContent
+          side="right"
+          className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+        >
+          <SheetHeader className="shrink-0">
+            <SheetTitle>
+              {editingFormacao ? t('form.title.edit') : t('form.title.create')}
+            </SheetTitle>
+            <SheetDescription>{t('form.description.create')}</SheetDescription>
+          </SheetHeader>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-1 flex-col gap-4 px-4 py-6"
+          >
+            <Field>
+              <FieldLabel htmlFor="nome">
+                {t('form.fields.nome.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
+              <Input
+                id="nome"
+                placeholder={t('form.fields.nome.placeholder')}
+                {...form.register('nome')}
+              />
+              <FieldError>{form.formState.errors.nome?.message}</FieldError>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="descricao">
+                {t('form.fields.descricao.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
+              <Textarea
+                id="descricao"
+                rows={3}
+                placeholder={t('form.fields.descricao.placeholder')}
+                {...form.register('descricao')}
+              />
+              <FieldError>
+                {form.formState.errors.descricao?.message}
+              </FieldError>
+            </Field>
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <Field>
+                <FieldLabel>
+                  {t('form.fields.nivel.label')}{' '}
+                  <span className="text-destructive">*</span>
+                </FieldLabel>
+                <Controller
+                  name="nivel"
+                  control={form.control}
+                  render={({ field }) => (
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <SelectTrigger>
+                        <SelectValue
+                          placeholder={t('form.fields.nivel.placeholder')}
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Iniciante">
+                          {t('levels.beginner')}
+                        </SelectItem>
+                        <SelectItem value="Intermediario">
+                          {t('levels.intermediate')}
+                        </SelectItem>
+                        <SelectItem value="Avancado">
+                          {t('levels.advanced')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+                <FieldError>{form.formState.errors.nivel?.message}</FieldError>
+              </Field>
+
+              <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>
+            </div>
+
+            <Field>
+              <FieldLabel htmlFor="prerequisitos">
+                {t('form.fields.prerequisitos.label')}
+              </FieldLabel>
+              <Input
+                id="prerequisitos"
+                placeholder={t('form.fields.prerequisitos.placeholder')}
+                {...form.register('prerequisitos')}
+              />
+            </Field>
+
+            <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">
+                      <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"
+                      />
+                    </div>
+                  )}
+                />
+                <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>
+
+              {(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">
+                  {learningPathItems.length} {t('coursesSummary.items')}{' '}
+                  {t('coursesSummary.dot')}{' '}
+                  {availableCursos
+                    .filter((c) => selectedCursos.includes(c.id))
+                    .reduce((a, c) => a + c.cargaHoraria, 0)}
+                  {t('coursesSummary.hours')}
+                </p>
+              )}
+            </Field>
+
+            <SheetFooter className="mt-auto shrink-0 gap-2 pt-4 px-0">
+              <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')}
+              </Button>
+            </SheetFooter>
+          </form>
+        </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 className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="size-5 text-destructive" />{' '}
+              {t('deleteDialog.title')}
+            </DialogTitle>
+            <DialogDescription>
+              {t('deleteDialog.description')}{' '}
+              <strong>{formacaoToDelete?.nome}</strong>?
+              {(formacaoToDelete?.alunos ?? 0) > 0 && (
+                <span className="mt-2 block rounded-md bg-destructive/10 p-2 text-sm text-destructive">
+                  {t('deleteDialog.warning', {
+                    count: formacaoToDelete?.alunos ?? 0,
+                  })}
+                </span>
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2">
+            <Button
+              variant="outline"
+              onClick={() => setDeleteDialogOpen(false)}
+            >
+              {t('deleteDialog.actions.cancel')}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={confirmDelete}
+              className="gap-2"
+            >
+              <Trash2 className="size-4" /> {t('deleteDialog.actions.delete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Page>
+  );
+}