@hed-hog/lms 0.0.365 → 0.0.370

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

@@ -85,12 +85,14 @@ import {
   Clock,
   GraduationCap,
   GripVertical,
+  ImageIcon,
   Layers,
   Loader2,
   Pencil,
   Plus,
   Target,
   Trash2,
+  Upload,
   Users,
   X,
 } from 'lucide-react';
@@ -122,6 +124,21 @@ interface Formacao {
   criadoEm: string;
   primaryColor?: string;
   secondaryColor?: string;
+  bannerFileId?: number | null;
+  certificateTemplate?: { id: number; name: string } | null;
+  modules?: Array<{
+    id: number;
+    title: string;
+    description: string | null;
+    order: number;
+    items: LearningPathItem[];
+  }>;
+}
+
+interface CertificateTemplateOption {
+  id: number;
+  name: string;
+  status: string;
 }
 
 type TrainingColorPayload = {
@@ -159,6 +176,13 @@ interface LearningPathItem {
   isRequired?: boolean;
 }
 
+interface ModuleState {
+  uid: string;
+  title: string;
+  description: string;
+  items: LearningPathItem[];
+}
+
 interface TrailRenderableItem {
   uid: string;
   type: 'course' | 'exam';
@@ -447,6 +471,8 @@ const formacaoSchema = z.object({
     .string()
     .regex(/^#([0-9A-Fa-f]{6})$/, 'Cor secundária inválida')
     .default('#111827'),
+  bannerFileId: z.number().nullable().optional(),
+  certificateTemplateId: z.number().nullable().optional(),
 });
 
 type FormacaoForm = z.infer<typeof formacaoSchema>;
@@ -462,7 +488,7 @@ const STATUS_MAP: Record<
   encerrada: { label: 'Encerrada', variant: 'outline' },
 };
 
-const PAGE_SIZES = [6, 12, 24];
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 const API_TRAINING_CACHE_KEY = 'lms:training:api-cache';
 
 // ── Animations ────────────────────────────────────────────────────────────────
@@ -535,6 +561,227 @@ function SortableTrailItem(props: {
   );
 }
 
+function SortableModule(props: {
+  module: ModuleState;
+  availableCursos: CursoOption[];
+  availableExams: ExameOption[];
+  sensors: ReturnType<typeof useSensors>;
+  onUpdateTitle: (uid: string, title: string) => void;
+  onUpdateDescription: (uid: string, description: string) => void;
+  onRemoveModule: (uid: string) => void;
+  onAddItem: (moduleUid: string, type: 'course' | 'exam', itemId: number) => void;
+  onRemoveItem: (moduleUid: string, itemUid: string) => void;
+  onDragEndItems: (moduleUid: string, event: DragEndEvent) => void;
+  onOpenCreateCourseSheet: (moduleUid: string) => void;
+  onOpenCreateExamSheet: (moduleUid: string) => void;
+  availableCursosForModule: CursoOption[];
+  availableExamsForModule: ExameOption[];
+}) {
+  const { module, sensors } = props;
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: module.uid });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const [selectedCourse, setSelectedCourse] = useState('');
+  const [selectedExam, setSelectedExam] = useState('');
+
+  const renderableItems = useMemo<TrailRenderableItem[]>(() => {
+    return [...module.items]
+      .sort((a, b) => a.order - b.order)
+      .map((item, index) => {
+        if (item.type === 'course') {
+          const course = props.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 = props.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[];
+  }, [module.items, props.availableCursos, props.availableExams]);
+
+  function handleCourseSelect(value: string) {
+    setSelectedCourse(value);
+    const parsed = Number(value);
+    if (Number.isFinite(parsed) && parsed > 0) {
+      props.onAddItem(module.uid, 'course', parsed);
+      setSelectedCourse('');
+    }
+  }
+
+  function handleExamSelect(value: string) {
+    setSelectedExam(value);
+    const parsed = Number(value);
+    if (Number.isFinite(parsed) && parsed > 0) {
+      props.onAddItem(module.uid, 'exam', parsed);
+      setSelectedExam('');
+    }
+  }
+
+  return (
+    <div ref={setNodeRef} style={style} className="rounded-md border bg-background">
+      {/* Module header */}
+      <div className="flex items-start gap-2 border-b p-3">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="mt-1 size-7 shrink-0 cursor-grab text-muted-foreground"
+          aria-label="Arrastar módulo"
+          {...attributes}
+          {...listeners}
+        >
+          <GripVertical className="size-4" />
+        </Button>
+        <div className="flex flex-1 flex-col gap-1">
+          <Input
+            placeholder="Título do módulo"
+            value={module.title}
+            onChange={(e) => props.onUpdateTitle(module.uid, e.target.value)}
+            className="h-8 text-sm font-medium"
+          />
+          <Input
+            placeholder="Descrição (opcional)"
+            value={module.description}
+            onChange={(e) => props.onUpdateDescription(module.uid, e.target.value)}
+            className="h-7 text-xs text-muted-foreground"
+          />
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="mt-1 size-7 shrink-0 text-muted-foreground hover:text-destructive"
+          onClick={() => props.onRemoveModule(module.uid)}
+        >
+          <X className="size-4" />
+        </Button>
+      </div>
+
+      {/* Item selectors */}
+      <div className="space-y-2 bg-muted/20 p-3">
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_auto]">
+          <Select
+            value={selectedCourse}
+            onValueChange={handleCourseSelect}
+            disabled={props.availableCursosForModule.length === 0}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Adicionar curso..." />
+            </SelectTrigger>
+            <SelectContent>
+              {props.availableCursosForModule.map((course) => (
+                <SelectItem key={course.id} value={String(course.id)}>
+                  <div className="flex items-center gap-2">
+                    <CourseAvatar
+                      fileId={course.logoFileId}
+                      title={course.nome}
+                      className="size-5 shrink-0 rounded"
+                      iconSize="size-3"
+                    />
+                    <div className="min-w-0">
+                      <span className="truncate">{course.nome}</span>
+                      <span className="ml-1.5 text-xs text-muted-foreground">
+                        {course.name ?? '—'} · #{course.id}
+                      </span>
+                    </div>
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="shrink-0"
+            onClick={() => props.onOpenCreateCourseSheet(module.uid)}
+          >
+            <Plus className="size-4" />
+          </Button>
+        </div>
+
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_auto]">
+          <Select
+            value={selectedExam}
+            onValueChange={handleExamSelect}
+            disabled={props.availableExamsForModule.length === 0}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Adicionar exame..." />
+            </SelectTrigger>
+            <SelectContent>
+              {props.availableExamsForModule.map((exam) => (
+                <SelectItem key={exam.id} value={String(exam.id)}>
+                  {exam.titulo} ({exam.limiteTempo}min)
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="shrink-0"
+            onClick={() => props.onOpenCreateExamSheet(module.uid)}
+          >
+            <Plus className="size-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Items list */}
+      {renderableItems.length > 0 ? (
+        <div className="bg-background">
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={(event) => props.onDragEndItems(module.uid, event)}
+          >
+            <SortableContext
+              items={renderableItems.map((item) => item.uid)}
+              strategy={verticalListSortingStrategy}
+            >
+              {renderableItems.map((item) => (
+                <SortableTrailItem
+                  key={item.uid}
+                  item={item}
+                  onRemove={(uid) => props.onRemoveItem(module.uid, uid)}
+                />
+              ))}
+            </SortableContext>
+          </DndContext>
+        </div>
+      ) : (
+        <div className="p-3">
+          <p className="text-xs text-muted-foreground">
+            Adicione cursos e/ou exames a este módulo.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
 // ── Page ──────────────────────────────────────────────────────────────────────
 
 export default function TrainingPage() {
@@ -553,6 +800,8 @@ export default function TrainingPage() {
   const [learningPathItems, setLearningPathItems] = useState<
     LearningPathItem[]
   >([]);
+  const [modules, setModules] = useState<ModuleState[]>([]);
+  const activeModuleUidRef = useRef<string | null>(null);
   const [selectedCourseToAdd, setSelectedCourseToAdd] = useState('');
   const [selectedExamToAdd, setSelectedExamToAdd] = useState('');
   const [saving, setSaving] = useState(false);
@@ -564,6 +813,9 @@ export default function TrainingPage() {
   const [cachedListData, setCachedListData] =
     useState<ApiTrainingListResponse | null>(null);
   const initialLearningPathRef = useRef<LearningPathItem[]>([]);
+  const [bannerPreviewUrl, setBannerPreviewUrl] = useState<string | null>(null);
+  const [bannerUploading, setBannerUploading] = useState(false);
+  const bannerInputRef = useRef<HTMLInputElement>(null);
 
   // Search/filter inputs
   const [buscaInput, setBuscaInput] = useState('');
@@ -578,10 +830,44 @@ export default function TrainingPage() {
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
+
+  const { data: generalSettings } = useQuery<{
+    data: Array<{ slug: string; value: string }>;
+  }>({
+    queryKey: ['setting-group-general'],
+    queryFn: async () => {
+      const response = await request<{
+        data: Array<{ slug: string; value: string }>;
+      }>({
+        url: '/setting/group/general',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const pageSizeOptions = useMemo(() => {
+    const setting = generalSettings?.data?.find(
+      (s) => s.slug === 'pagination-page-sizes'
+    );
+    if (!setting?.value) return DEFAULT_PAGE_SIZES;
+    try {
+      const parsed = JSON.parse(setting.value) as string[];
+      const sizes = parsed
+        .map(Number)
+        .filter((n) => !isNaN(n) && n > 0)
+        .sort((a, b) => a - b);
+      return sizes.length > 0 ? sizes : DEFAULT_PAGE_SIZES;
+    } catch {
+      return DEFAULT_PAGE_SIZES;
+    }
+  }, [generalSettings]);
+
   const [pageSize, setPageSize] = usePersistedPageSize({
     storageKey: 'pagination:global:pageSize',
     defaultValue: 12,
-    allowedValues: PAGE_SIZES,
+    allowedValues: pageSizeOptions,
   });
 
   const sensors = useSensors(
@@ -712,6 +998,23 @@ export default function TrainingPage() {
       },
     });
 
+  const { data: certificateTemplatesData } = useQuery<{
+    data: CertificateTemplateOption[];
+  }>({
+    queryKey: ['lms-certificate-templates-options'],
+    queryFn: async () => {
+      const response = await request<{ data: CertificateTemplateOption[] }>({
+        url: '/lms/certificates/templates',
+        method: 'GET',
+        params: { page: 1, pageSize: 200, status: 'active' },
+      });
+      return response.data;
+    },
+    initialData: { data: [] },
+  });
+
+  const availableCertificateTemplates = certificateTemplatesData?.data ?? [];
+
   useEffect(() => {
     if (courseSheetOpen) {
       void refetchCategories();
@@ -955,6 +1258,9 @@ export default function TrainingPage() {
     setEditingFormacao(null);
     initialLearningPathRef.current = [];
     setLearningPathItems([]);
+    setModules([{ uid: `module-new-${Date.now()}`, title: '', description: '', items: [] }]);
+    activeModuleUidRef.current = null;
+    setBannerPreviewUrl(null);
     form.reset({
       nome: '',
       descricao: '',
@@ -965,6 +1271,7 @@ export default function TrainingPage() {
       status: 'rascunho',
       primaryColor: '#1D4ED8',
       secondaryColor: '#111827',
+      certificateTemplateId: null,
     });
     examForm.reset();
     setSelectedCourseToAdd('');
@@ -1011,6 +1318,38 @@ export default function TrainingPage() {
       setLearningPathItems(normalizedItems);
       setSelectedCourseToAdd('');
       setSelectedExamToAdd('');
+
+      if (fullFormacao.modules && fullFormacao.modules.length > 0) {
+        setModules(
+          fullFormacao.modules.map((mod) => ({
+            uid: `module-${mod.id}`,
+            title: mod.title,
+            description: mod.description ?? '',
+            items: mod.items.map((item, i) => ({
+              id: item.id,
+              type: item.type,
+              itemId: item.itemId,
+              order: item.order ?? i,
+              isRequired: item.isRequired !== false,
+            })),
+          }))
+        );
+      } else {
+        setModules([{ uid: `module-new-${Date.now()}`, title: '', description: '', items: normalizedItems }]);
+      }
+
+      setBannerPreviewUrl(null);
+      if (fullFormacao.bannerFileId) {
+        request<{ url?: string }>({
+          url: `/file/open/${fullFormacao.bannerFileId}`,
+          method: 'PUT',
+        })
+          .then((res) => {
+            if (res?.data?.url) setBannerPreviewUrl(res.data.url);
+          })
+          .catch(() => null);
+      }
+
       form.reset({
         nome: fullFormacao.nome,
         descricao: fullFormacao.descricao,
@@ -1023,6 +1362,8 @@ export default function TrainingPage() {
         status: normalizeStatusValue(fullFormacao.status),
         primaryColor: fullFormacao.primaryColor ?? '#1D4ED8',
         secondaryColor: fullFormacao.secondaryColor ?? '#111827',
+        bannerFileId: fullFormacao.bannerFileId ?? null,
+        certificateTemplateId: fullFormacao.certificateTemplate?.id ?? null,
       });
       setSheetOpen(true);
     } finally {
@@ -1104,12 +1445,96 @@ export default function TrainingPage() {
     });
   }
 
-  function openCreateCourseSheet() {
+  function addModule() {
+    setModules((prev) => [
+      ...prev,
+      { uid: `module-new-${Date.now()}`, title: '', description: '', items: [] },
+    ]);
+  }
+
+  function removeModule(uid: string) {
+    setModules((prev) => prev.filter((m) => m.uid !== uid));
+  }
+
+  function updateModuleTitle(uid: string, title: string) {
+    setModules((prev) => prev.map((m) => (m.uid === uid ? { ...m, title } : m)));
+  }
+
+  function updateModuleDescription(uid: string, description: string) {
+    setModules((prev) => prev.map((m) => (m.uid === uid ? { ...m, description } : m)));
+  }
+
+  function addItemToModule(moduleUid: string, type: 'course' | 'exam', itemId: number) {
+    setModules((prev) =>
+      prev.map((m) => {
+        if (m.uid !== moduleUid) return m;
+        if (m.items.some((i) => i.type === type && i.itemId === itemId)) return m;
+        return {
+          ...m,
+          items: normalizeTrailOrder([
+            ...m.items,
+            { type, itemId, order: m.items.length, isRequired: true },
+          ]),
+        };
+      })
+    );
+  }
+
+  function removeItemFromModule(moduleUid: string, itemUid: string) {
+    const [type, idText] = itemUid.split('-');
+    const itemId = Number(idText);
+    if (!itemId || (type !== 'course' && type !== 'exam')) return;
+    setModules((prev) =>
+      prev.map((m) => {
+        if (m.uid !== moduleUid) return m;
+        return {
+          ...m,
+          items: normalizeTrailOrder(
+            m.items.filter((i) => !(i.type === type && i.itemId === itemId))
+          ),
+        };
+      })
+    );
+  }
+
+  function handleModuleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setModules((prev) => {
+      const oldIndex = prev.findIndex((m) => m.uid === String(active.id));
+      const newIndex = prev.findIndex((m) => m.uid === String(over.id));
+      if (oldIndex < 0 || newIndex < 0) return prev;
+      return arrayMove(prev, oldIndex, newIndex);
+    });
+  }
+
+  function handleModuleItemDragEnd(moduleUid: string, event: DragEndEvent) {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setModules((prev) =>
+      prev.map((m) => {
+        if (m.uid !== moduleUid) return m;
+        const sorted = [...m.items].sort((a, b) => a.order - b.order);
+        const oldIndex = sorted.findIndex(
+          (i) => `${i.type}-${i.itemId}` === String(active.id)
+        );
+        const newIndex = sorted.findIndex(
+          (i) => `${i.type}-${i.itemId}` === String(over.id)
+        );
+        if (oldIndex < 0 || newIndex < 0) return m;
+        return { ...m, items: normalizeTrailOrder(arrayMove(sorted, oldIndex, newIndex)) };
+      })
+    );
+  }
+
+  function openCreateCourseSheet(moduleUid?: string) {
+    if (moduleUid) activeModuleUidRef.current = moduleUid;
     courseForm.reset(DEFAULT_COURSE_FORM_VALUES);
     setCourseSheetOpen(true);
   }
 
-  function openCreateExamSheet() {
+  function openCreateExamSheet(moduleUid?: string) {
+    if (moduleUid) activeModuleUidRef.current = moduleUid;
     examForm.reset({
       titulo: '',
       notaMinima: 7,
@@ -1165,28 +1590,71 @@ export default function TrainingPage() {
     });
   }
 
+  async function handleBannerUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setBannerUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      const uploadRes = await request<{ id?: number }>({
+        url: '/file',
+        method: 'POST',
+        data: formData,
+        headers: { 'Content-Type': 'multipart/form-data' },
+      });
+      const fileId = uploadRes?.data?.id;
+      if (!fileId) return;
+
+      const openRes = await request<{ url?: string }>({
+        url: `/file/open/${fileId}`,
+        method: 'PUT',
+      });
+      if (openRes?.data?.url) setBannerPreviewUrl(openRes.data.url);
+      form.setValue('bannerFileId', fileId, { shouldDirty: true });
+    } finally {
+      setBannerUploading(false);
+      if (bannerInputRef.current) bannerInputRef.current.value = '';
+    }
+  }
+
+  function handleRemoveBanner() {
+    setBannerPreviewUrl(null);
+    form.setValue('bannerFileId', null, { shouldDirty: true });
+    if (bannerInputRef.current) bannerInputRef.current.value = '';
+  }
+
   async function onSubmit(data: FormacaoForm) {
     const toApiProgressMode = (value: FormacaoForm['progressionMode']) =>
       value === 'livre' ? 'free' : 'sequential';
 
-    try {
-      const orderedItems = normalizeTrailOrder(
-        [...learningPathItems].sort((a, b) => a.order - b.order)
-      );
+    if (modules.some((m) => !m.title.trim())) {
+      toast.error('Todos os módulos precisam de um título.');
+      return;
+    }
+    if (modules.length === 0) {
+      toast.error(t('toasts.selectAtLeastOneItem'));
+      return;
+    }
 
-      if (orderedItems.length === 0) {
-        toast.error(t('toasts.selectAtLeastOneItem'));
-        return;
-      }
+    const modulesPayload = modules.map((mod, i) => ({
+      title: mod.title.trim(),
+      description: mod.description.trim() || undefined,
+      order: i,
+      items: mod.items.map((item, j) => ({
+        type: item.type,
+        itemId: item.itemId,
+        order: j,
+        isRequired: item.isRequired !== false,
+      })),
+    }));
 
+    try {
       setSaving(true);
 
       if (editingFormacao) {
         const dirty = form.formState.dirtyFields;
-        const itemsChanged = !pathsAreEqual(
-          initialLearningPathRef.current,
-          orderedItems
-        );
 
         const payload: {
           title?: string;
@@ -1197,12 +1665,9 @@ export default function TrainingPage() {
           progressMode?: 'sequential' | 'free';
           primaryColor?: string;
           secondaryColor?: string;
-          items?: Array<{
-            type: 'course' | 'exam';
-            itemId: number;
-            order: number;
-            isRequired: boolean;
-          }>;
+          bannerFileId?: number | null;
+          certificateTemplateId?: number | null;
+          modules?: typeof modulesPayload;
         } = {};
 
         if (dirty.nome) payload.title = data.nome;
@@ -1217,19 +1682,9 @@ export default function TrainingPage() {
         payload.progressMode = toApiProgressMode(data.progressionMode);
         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;
-        }
+        if (dirty.bannerFileId) payload.bannerFileId = data.bannerFileId ?? null;
+        if (dirty.certificateTemplateId) payload.certificateTemplateId = data.certificateTemplateId ?? null;
+        payload.modules = modulesPayload;
 
         await request({
           url: `/lms/paths/${editingFormacao.id}`,
@@ -1247,12 +1702,9 @@ export default function TrainingPage() {
           progressMode: toApiProgressMode(data.progressionMode),
           primaryColor: data.primaryColor,
           secondaryColor: data.secondaryColor,
-          items: orderedItems.map((item, index) => ({
-            type: item.type,
-            itemId: item.itemId,
-            order: index,
-            isRequired: item.isRequired !== false,
-          })),
+          bannerFileId: data.bannerFileId ?? null,
+          certificateTemplateId: data.certificateTemplateId ?? null,
+          modules: modulesPayload,
         };
 
         await request({
@@ -1266,6 +1718,7 @@ export default function TrainingPage() {
       await Promise.all([refetchTraining(), refetchStats()]);
       setSheetOpen(false);
       setLearningPathItems([]);
+      setModules([]);
       initialLearningPathRef.current = [];
     } finally {
       setSaving(false);
@@ -1305,7 +1758,12 @@ export default function TrainingPage() {
 
       await refetchCourses();
       if (Number.isFinite(createdCourseId) && createdCourseId > 0) {
-        addTrailItem('course', createdCourseId);
+        const targetUid = activeModuleUidRef.current ?? modules[modules.length - 1]?.uid;
+        if (targetUid) {
+          addItemToModule(targetUid, 'course', createdCourseId);
+        } else {
+          addTrailItem('course', createdCourseId);
+        }
         setSelectedCourseToAdd('');
       }
 
@@ -1336,7 +1794,12 @@ export default function TrainingPage() {
 
       await refetchExams();
       if (Number.isFinite(createdExamId) && createdExamId > 0) {
-        addTrailItem('exam', createdExamId);
+        const targetUid = activeModuleUidRef.current ?? modules[modules.length - 1]?.uid;
+        if (targetUid) {
+          addItemToModule(targetUid, 'exam', createdExamId);
+        } else {
+          addTrailItem('exam', createdExamId);
+        }
         setSelectedExamToAdd('');
       }
 
@@ -1500,7 +1963,7 @@ export default function TrainingPage() {
               ],
             },
           ]}
-          afterSearchButton={
+          actions={
             <ViewModeToggle
               viewMode={viewMode}
               onViewModeChange={setViewMode}
@@ -1848,7 +2311,7 @@ export default function TrainingPage() {
               setPageSize(nextPageSize);
               setCurrentPage(1);
             }}
-            pageSizeOptions={PAGE_SIZES}
+            pageSizeOptions={pageSizeOptions}
           />
         </div>
       )}
@@ -1896,6 +2359,60 @@ export default function TrainingPage() {
                 {...form.register('descricao')}
               />
             </Field>
+            {/* Banner da trilha */}
+            <Field>
+              <FieldLabel>Banner da trilha</FieldLabel>
+              <div className="flex items-center gap-3">
+                {bannerPreviewUrl ? (
+                  <img
+                    src={bannerPreviewUrl}
+                    alt="Banner da trilha"
+                    className="h-12 w-32 shrink-0 rounded-lg border object-cover"
+                  />
+                ) : (
+                  <div className="flex h-12 w-32 shrink-0 items-center justify-center rounded-lg border border-dashed bg-muted/40">
+                    <ImageIcon className="size-5 text-muted-foreground/50" />
+                  </div>
+                )}
+                <div className="flex items-center gap-2">
+                  <input
+                    ref={bannerInputRef}
+                    type="file"
+                    accept="image/*"
+                    className="hidden"
+                    onChange={handleBannerUpload}
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    disabled={bannerUploading}
+                    onClick={() => bannerInputRef.current?.click()}
+                    className="gap-2"
+                  >
+                    {bannerUploading ? (
+                      <Loader2 className="size-3.5 animate-spin" />
+                    ) : (
+                      <Upload className="size-3.5" />
+                    )}
+                    {bannerPreviewUrl ? 'Substituir' : 'Fazer upload'}
+                  </Button>
+                  {bannerPreviewUrl && (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={handleRemoveBanner}
+                      className="gap-2 text-destructive hover:text-destructive"
+                    >
+                      <X className="size-3.5" />
+                      Remover
+                    </Button>
+                  )}
+                </div>
+              </div>
+            </Field>
+
             <Field>
               <FieldLabel>
                 {t('form.fields.progressionMode.label')}{' '}
@@ -2008,6 +2525,39 @@ export default function TrainingPage() {
               />
             </Field>
 
+            <Field>
+              <FieldLabel>Template de certificado</FieldLabel>
+              <Controller
+                name="certificateTemplateId"
+                control={form.control}
+                render={({ field }) => (
+                  <Select
+                    value={field.value != null ? String(field.value) : '__none__'}
+                    onValueChange={(v) =>
+                      field.onChange(v === '__none__' ? null : Number(v))
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Selecione um template..." />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="__none__">
+                        Sem template vinculado
+                      </SelectItem>
+                      {availableCertificateTemplates.map((tpl) => (
+                        <SelectItem key={tpl.id} value={String(tpl.id)}>
+                          {tpl.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+              <p className="text-xs text-muted-foreground">
+                O template escolhido será exibido como preview do certificado na área do aluno.
+              </p>
+            </Field>
+
             <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
               <Field>
                 <FieldLabel htmlFor="primaryColor">
@@ -2068,120 +2618,63 @@ export default function TrainingPage() {
               </Field>
             </div>
 
-            {/* Trilha */}
+            {/* Módulos da trilha */}
             <Field>
-              <FieldLabel>{t('form.fields.trilha.label')}</FieldLabel>
+              <FieldLabel>Módulos da trilha</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)}
-                            >
-                              <div className="flex items-center gap-2">
-                                <CourseAvatar
-                                  fileId={course.logoFileId}
-                                  title={course.nome}
-                                  className="size-5 shrink-0 rounded"
-                                  iconSize="size-3"
-                                />
-                                <div className="min-w-0">
-                                  <span className="truncate">
-                                    {course.nome}
-                                  </span>
-                                  <span className="ml-1.5 text-xs text-muted-foreground">
-                                    {course.name ?? '—'} · #{course.id}
-                                  </span>
-                                </div>
-                              </div>
-                            </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>
-                )}
+                <DndContext
+                  sensors={sensors}
+                  collisionDetection={closestCenter}
+                  onDragEnd={handleModuleDragEnd}
+                >
+                  <SortableContext
+                    items={modules.map((m) => m.uid)}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    {modules.map((mod) => {
+                      const usedCourseIds = mod.items
+                        .filter((i) => i.type === 'course')
+                        .map((i) => i.itemId);
+                      const usedExamIds = mod.items
+                        .filter((i) => i.type === 'exam')
+                        .map((i) => i.itemId);
+                      return (
+                        <SortableModule
+                          key={mod.uid}
+                          module={mod}
+                          availableCursos={selectableCursos}
+                          availableExams={selectableExams}
+                          availableCursosForModule={selectableCursos.filter(
+                            (c) => !usedCourseIds.includes(c.id)
+                          )}
+                          availableExamsForModule={selectableExams.filter(
+                            (e) => !usedExamIds.includes(e.id)
+                          )}
+                          sensors={sensors}
+                          onUpdateTitle={updateModuleTitle}
+                          onUpdateDescription={updateModuleDescription}
+                          onRemoveModule={removeModule}
+                          onAddItem={addItemToModule}
+                          onRemoveItem={removeItemFromModule}
+                          onDragEndItems={handleModuleItemDragEnd}
+                          onOpenCreateCourseSheet={openCreateCourseSheet}
+                          onOpenCreateExamSheet={openCreateExamSheet}
+                        />
+                      );
+                    })}
+                  </SortableContext>
+                </DndContext>
+
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="mt-1 w-full gap-2"
+                  onClick={addModule}
+                >
+                  <Plus className="size-4" />
+                  Adicionar módulo
+                </Button>
               </div>
 
               {(isFetchingCourses || isFetchingExams) && (
@@ -2189,17 +2682,6 @@ export default function TrainingPage() {
                   {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">