@hed-hog/lms 0.0.331 → 0.0.347

package/hedhog/frontend/app/courses/[id]/structure/_components/editor-course.tsx.ejs

@@ -23,7 +23,6 @@ import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
-import { CreateLmsPersonSheet } from '@/app/(app)/(libraries)/lms/_components/create-lms-person-sheet';
 import { createDefaultTemplate } from '@/app/(app)/(libraries)/lms/_lib/editor/types';
 import { RichTextEditor } from '@/components/rich-text-editor';
 import { Badge } from '@/components/ui/badge';
@@ -48,10 +47,19 @@ import {
 import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
+import { InstructorFormSheet } from '../../../../instructors/_components/instructor-form-sheet';
 import type {
   CourseEditFormValues,
   PickerOption,
@@ -114,6 +122,16 @@ type ApiCourseDetail = {
 };
 
 type ApiCategory = { id: number; slug: string; name: string };
+type ApiCategoryDetail = {
+  id: number;
+  slug: string;
+  name?: string;
+  category_id?: number | null;
+  color?: string | null;
+  icon?: string | null;
+  status?: 'active' | 'inactive';
+  category_locale?: Array<{ locale_id: number; name: string }>;
+};
 type ApiCategoryList = {
   data: ApiCategory[];
   total: number;
@@ -284,7 +302,27 @@ export function EditorCourse() {
 
   // ── UI state ────────────────────────────────────────────────────────────────
   const [activeTab, setActiveTab] = useState('estrutura');
-  const [instructorSheetOpen, setInstructorSheetOpen] = useState(false);
+  const [instructorEditSheetOpen, setInstructorEditSheetOpen] = useState(false);
+  const [editingInstructorId, setEditingInstructorId] = useState<number | null>(
+    null
+  );
+  const [categoryEditSheetOpen, setCategoryEditSheetOpen] = useState(false);
+  const [editingCategoryId, setEditingCategoryId] = useState<number | null>(
+    null
+  );
+  const [editingCategoryOriginalSlug, setEditingCategoryOriginalSlug] =
+    useState('');
+  const [editingCategoryName, setEditingCategoryName] = useState('');
+  const [editingCategorySlug, setEditingCategorySlug] = useState('');
+  const [editingCategoryColor, setEditingCategoryColor] = useState('#000000');
+  const [editingCategoryIcon, setEditingCategoryIcon] = useState('');
+  const [editingCategoryParentId, setEditingCategoryParentId] = useState<
+    number | null
+  >(null);
+  const [editingCategoryStatus, setEditingCategoryStatus] = useState<
+    'active' | 'inactive'
+  >('active');
+  const [savingCategoryEdit, setSavingCategoryEdit] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [logoPreview, setLogoPreview] = useState<string | null>(null);
@@ -415,7 +453,7 @@ export function EditorCourse() {
           hasCertificate: data.certificado,
           isFeatured: data.destaque,
           isListed: data.listado,
-          certificateModel: data.modeloCertificado || undefined,
+          certificateModel: data.modeloCertificado.trim() || null,
           instructorIds: (data.instrutores ?? []).map(Number),
         },
       });
@@ -691,7 +729,7 @@ export function EditorCourse() {
 
   async function handleCreateCategory(values: Record<string, string>) {
     const name = String(values.name ?? '').trim();
-    const slug = slugify(values.slug || values.name || '');
+    const slug = slugify(values.name || values.slug || '');
     if (!name || !slug) {
       toast.error('Informe nome e slug para criar a categoria.');
       return null;
@@ -764,26 +802,112 @@ export function EditorCourse() {
     }
   }
 
-  const handleInstructorCreated = async (instructor: {
-    id: number;
-    personId: number;
-    name: string;
-    avatarId?: number | null;
-    email?: string | null;
-    phone?: string | null;
-    qualificationSlugs: string[];
-  }) => {
-    const createdId = String(instructor.id);
-    const current = form.getValues('instrutores') ?? [];
-    if (!current.includes(createdId)) {
-      form.setValue('instrutores', [...current, createdId], {
-        shouldDirty: true,
-        shouldTouch: true,
-        shouldValidate: true,
+  function handleCreateInstructor() {
+    setEditingInstructorId(null);
+    setInstructorEditSheetOpen(true);
+  }
+
+  function handleEditInstructor(instructorId: string) {
+    const parsed = Number(instructorId);
+    if (!Number.isFinite(parsed) || parsed <= 0) {
+      toast.error('Instrutor inválido para edição.');
+      return;
+    }
+    setEditingInstructorId(parsed);
+    setInstructorEditSheetOpen(true);
+  }
+
+  async function handleEditCategory(categorySlug: string) {
+    const category = (categoryListData?.data ?? []).find(
+      (item) => item.slug === categorySlug
+    );
+
+    if (!category?.id) {
+      toast.error('Categoria não encontrada para edição.');
+      return;
+    }
+
+    try {
+      const response = await request<ApiCategoryDetail>({
+        url: `/category/${category.id}`,
+        method: 'GET',
       });
+      const detail = response.data;
+      const localeName = detail.category_locale?.[0]?.name ?? detail.name ?? '';
+
+      setEditingCategoryId(detail.id);
+      setEditingCategoryOriginalSlug(detail.slug || categorySlug);
+      setEditingCategorySlug(detail.slug || categorySlug);
+      setEditingCategoryName(localeName);
+      setEditingCategoryColor(detail.color || '#000000');
+      setEditingCategoryIcon(detail.icon || '');
+      setEditingCategoryParentId(detail.category_id ?? null);
+      setEditingCategoryStatus(detail.status || 'active');
+      setCategoryEditSheetOpen(true);
+    } catch {
+      toast.error('Não foi possível carregar a categoria para edição.');
     }
-    await refetchInstructorOptions();
-  };
+  }
+
+  async function handleSaveCategoryEdit() {
+    if (!editingCategoryId) return;
+
+    const name = editingCategoryName.trim();
+    const slug = slugify(editingCategorySlug);
+
+    if (!name || !slug) {
+      toast.error('Informe nome e slug válidos para a categoria.');
+      return;
+    }
+
+    const localeCode =
+      currentLocaleCode ||
+      (locales?.[0] as Locale | undefined)?.code ||
+      'pt-BR';
+
+    setSavingCategoryEdit(true);
+    try {
+      await request({
+        url: `/category/${editingCategoryId}`,
+        method: 'PATCH',
+        data: {
+          locale: {
+            [localeCode]: {
+              name,
+            },
+          },
+          slug,
+          category_id: editingCategoryParentId,
+          color: editingCategoryColor,
+          icon: editingCategoryIcon,
+          status: editingCategoryStatus,
+        },
+      });
+
+      const selectedCategories = form.getValues('categorias') ?? [];
+      if (editingCategoryOriginalSlug && editingCategoryOriginalSlug !== slug) {
+        form.setValue(
+          'categorias',
+          selectedCategories.map((item) =>
+            item === editingCategoryOriginalSlug ? slug : item
+          ),
+          {
+            shouldDirty: true,
+            shouldTouch: true,
+            shouldValidate: true,
+          }
+        );
+      }
+
+      await refetchCategoryOptions();
+      setCategoryEditSheetOpen(false);
+      toast.success('Categoria atualizada com sucesso.');
+    } catch {
+      toast.error('Não foi possível atualizar a categoria.');
+    } finally {
+      setSavingCategoryEdit(false);
+    }
+  }
 
   async function handleDelete() {
     setDeleting(true);
@@ -1008,7 +1132,9 @@ export function EditorCourse() {
                     categoryOptions={categoryOptions}
                     instructorOptions={instructorOptions}
                     onCreateCategory={handleCreateCategory}
-                    onCreateInstructor={() => setInstructorSheetOpen(true)}
+                    onCreateInstructor={handleCreateInstructor}
+                    onEditCategory={handleEditCategory}
+                    onEditInstructor={handleEditInstructor}
                   />
                   <CourseContentCard form={form} />
                 </TabsContent>
@@ -1131,19 +1257,102 @@ export function EditorCourse() {
         </div>
       </form>
 
-      {/* ── Instructor sheet ─────────────────────────────────────────────── */}
-      <CreateLmsPersonSheet
-        open={instructorSheetOpen}
-        onOpenChange={setInstructorSheetOpen}
-        onCreated={handleInstructorCreated}
-        title="Cadastrar instrutor"
-        description="Cadastre um novo instrutor e adicione-o ao curso."
-        submitLabel="Cadastrar instrutor"
-        successMessage="Instrutor cadastrado com sucesso."
-        errorMessage="Não foi possível cadastrar o instrutor."
-        defaultQualificationSlugs={['course-lessons']}
+      <InstructorFormSheet
+        open={instructorEditSheetOpen}
+        onOpenChange={(open) => {
+          setInstructorEditSheetOpen(open);
+          if (!open) {
+            setEditingInstructorId(null);
+          }
+        }}
+        instructorId={editingInstructorId}
+        onSaved={async (instructor) => {
+          if (editingInstructorId === null && instructor?.id) {
+            const createdId = String(instructor.id);
+            const current = form.getValues('instrutores') ?? [];
+            if (!current.includes(createdId)) {
+              form.setValue('instrutores', [...current, createdId], {
+                shouldDirty: true,
+                shouldTouch: true,
+                shouldValidate: true,
+              });
+            }
+          }
+
+          await refetchInstructorOptions();
+          await refetchCourse();
+        }}
       />
 
+      <Sheet
+        open={categoryEditSheetOpen}
+        onOpenChange={(open) => {
+          setCategoryEditSheetOpen(open);
+          if (!open) {
+            setEditingCategoryId(null);
+            setEditingCategoryOriginalSlug('');
+            setEditingCategoryName('');
+            setEditingCategorySlug('');
+            setEditingCategoryColor('#000000');
+            setEditingCategoryIcon('');
+            setEditingCategoryParentId(null);
+            setEditingCategoryStatus('active');
+          }
+        }}
+      >
+        <SheetContent className="sm:max-w-lg">
+          <SheetHeader>
+            <SheetTitle>Editar categoria</SheetTitle>
+            <SheetDescription>
+              Atualize rapidamente os dados da categoria vinculada ao curso.
+            </SheetDescription>
+          </SheetHeader>
+
+          <div className="space-y-3 px-4 pb-4">
+            <div className="space-y-1.5">
+              <FormLabel>Nome</FormLabel>
+              <Input
+                value={editingCategoryName}
+                onChange={(event) => {
+                  const nextName = event.target.value;
+                  setEditingCategoryName(nextName);
+                  setEditingCategorySlug(slugify(nextName));
+                }}
+                placeholder="Nome da categoria"
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <FormLabel>Slug</FormLabel>
+              <Input
+                value={editingCategorySlug}
+                readOnly
+                placeholder="slug-da-categoria"
+              />
+            </div>
+          </div>
+
+          <SheetFooter>
+            <Button
+              variant="outline"
+              onClick={() => setCategoryEditSheetOpen(false)}
+              disabled={savingCategoryEdit}
+            >
+              Cancelar
+            </Button>
+            <Button
+              onClick={handleSaveCategoryEdit}
+              disabled={savingCategoryEdit}
+            >
+              {savingCategoryEdit ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : null}
+              Salvar
+            </Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+
       {/* ── Delete dialog ────────────────────────────────────────────────── */}
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <DialogContent>

package/hedhog/frontend/app/courses/[id]/structure/_components/mock-data.ts.ejs

@@ -0,0 +1,185 @@
+/**
+ * Mock Data — LMS Course Structure
+ *
+ * ⚠️  TEMPORARY — replace when integrating with the real API.
+ *
+ * TODO[API]: Remove this file entirely once `useCourseStructure` fetches data
+ *            from GET /lms/courses/:id/structure. The Zustand store should then
+ *            be seeded with the server response instead of these constants.
+ */
+
+import type {
+  Course,
+  Lesson,
+  LessonStatus,
+  LessonType,
+  Session,
+  VideoProvider,
+  Visibility,
+} from './types';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Mock Data — LMS Course Structure
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const MOCK_COURSE: Course = {
+  id: 'course-1',
+  code: 'REACT-ADV',
+  name: 'React Avancado',
+  title: 'React Avancado',
+  description:
+    'Domine os conceitos avancados do React: hooks, patterns, performance e gerenciamento de estado moderno.',
+  slug: 'react-avancado',
+  published: true,
+};
+
+// Session config: title + how many lessons each gets
+const SESSION_CONFIG: { title: string; lessonCount: number }[] = [
+  { title: 'Boas-vindas ao curso', lessonCount: 5 },
+  { title: 'Hooks Avancados useReducer e useContext', lessonCount: 32 },
+  { title: 'Patterns de Composicao', lessonCount: 31 },
+  { title: 'Gerenciamento de Estado com Zustand', lessonCount: 8 },
+  { title: 'Performance e Otimizacao', lessonCount: 30 },
+  { title: 'React Server Components', lessonCount: 10 },
+  { title: 'Data Fetching Moderno', lessonCount: 9 },
+  { title: 'Roteamento Avancado com Next.js', lessonCount: 7 },
+  { title: 'Formularios e Validacao com RHF', lessonCount: 11 },
+  { title: 'Autenticacao e Seguranca', lessonCount: 9 },
+  { title: 'Testing com React Testing Library', lessonCount: 12 },
+  { title: 'Acessibilidade a11y', lessonCount: 6 },
+  { title: 'Internacionalizacao i18n', lessonCount: 7 },
+  { title: 'Animacoes com Framer Motion', lessonCount: 8 },
+  { title: 'Arquitetura de Projetos Escalaveis', lessonCount: 10 },
+  { title: 'Design Systems e Storybook', lessonCount: 8 },
+  { title: 'Deploy CI/CD e DevOps', lessonCount: 7 },
+  { title: 'Monorepos e Micro-frontends', lessonCount: 6 },
+  { title: 'Debugging Avancado', lessonCount: 6 },
+  { title: 'Projeto Final App Completo', lessonCount: 5 },
+];
+
+export const MOCK_SESSIONS: Session[] = SESSION_CONFIG.map((s, i) => ({
+  id: `s${i + 1}`,
+  code: `S${String(i + 1).padStart(2, '0')}`,
+  title: s.title,
+  duration: s.lessonCount * 12,
+  order: i,
+}));
+
+// Lesson title patterns
+const TITLE_PATTERNS = [
+  'Introducao e objetivos',
+  'Conceitos fundamentais',
+  'Configuracao do ambiente',
+  'Pratica guiada passo a passo',
+  'Exercicio: implementacao',
+  'Quiz de revisao',
+  'Caso de uso real',
+  'Implementacao completa',
+  'Debugging e troubleshooting',
+  'Otimizacoes e boas praticas',
+  'Desafio pratico',
+  'Revisao do modulo',
+  'Q e A e duvidas frequentes',
+  'Proximos passos',
+];
+
+const LESSON_STATUSES: LessonStatus[] = [
+  'preparada',
+  'gravada',
+  'editada',
+  'finalizada',
+  'publicada',
+];
+
+const VISIBILITIES: Visibility[] = [
+  'publico',
+  'publico',
+  'privado',
+  'restrito',
+];
+
+const LESSON_TYPES: LessonType[] = [
+  'video',
+  'video',
+  'video',
+  'post',
+  'video',
+  'video',
+  'questao',
+  'exercicio',
+];
+const PROVIDERS: VideoProvider[] = [
+  'youtube',
+  'vimeo',
+  'bunny',
+  'youtube',
+  'youtube',
+];
+
+let _lid = 0;
+
+export const MOCK_LESSONS: Lesson[] = SESSION_CONFIG.flatMap((s, si) =>
+  Array.from({ length: s.lessonCount }, (_, li) => {
+    _lid += 1;
+    const type = LESSON_TYPES[_lid % LESSON_TYPES.length] as LessonType;
+    const isVideo = type === 'video';
+    const provider = PROVIDERS[_lid % PROVIDERS.length] as VideoProvider;
+    const baseTitle = TITLE_PATTERNS[li % TITLE_PATTERNS.length] as string;
+    const title =
+      li < TITLE_PATTERNS.length
+        ? baseTitle
+        : baseTitle +
+          ' parte ' +
+          String(Math.floor(li / TITLE_PATTERNS.length) + 1);
+
+    const hasResource = li % 4 === 0;
+
+    const status = LESSON_STATUSES[
+      _lid % LESSON_STATUSES.length
+    ] as LessonStatus;
+    const visibility = VISIBILITIES[_lid % VISIBILITIES.length] as Visibility;
+
+    const lesson: Lesson = {
+      id: `l${_lid}`,
+      code: `A${String(_lid).padStart(3, '0')}`,
+      title,
+      type,
+      status,
+      visibility,
+      duration: 8 + (_lid % 32),
+      publicDescription: `Aprenda ${s.title.toLowerCase()} de forma pratica nesta aula.`,
+      privateDescription: li % 7 === 0 ? 'Revisar antes de publicar.' : '',
+      sessionId: `s${si + 1}`,
+      order: li,
+      resources: hasResource
+        ? [
+            {
+              id: `r${_lid}`,
+              name: `material-${String(_lid).padStart(3, '0')}.pdf`,
+              size: `${1 + (_lid % 5)}.${_lid % 9} MB`,
+              type: 'application/pdf',
+              public: _lid % 2 === 0,
+              url: `https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF1.pdf`,
+            },
+          ]
+        : [],
+    };
+
+    if (isVideo) {
+      lesson.videoProvider = provider;
+      lesson.videoUrl = `https://example.com/video/${_lid}`;
+      lesson.autoDuration = _lid % 3 !== 0;
+      if (li === 0) {
+        lesson.transcription = `Transcricao completa da primeira aula de "${s.title}". Lorem ipsum dolor sit amet, consectetur adipiscing elit.`;
+      }
+    }
+    if (type === 'questao') {
+      lesson.linkedExam = `exam-${_lid}`;
+    }
+    if (type === 'post') {
+      lesson.postContent = `Conteudo detalhado sobre ${s.title.toLowerCase()}...`;
+    }
+
+    return lesson;
+  })
+);

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

@@ -60,6 +60,7 @@ import {
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { CourseAvatar } from '../_components/course-avatar';
@@ -307,7 +308,11 @@ export default function CursosPage() {
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:global:pageSize',
+    defaultValue: 12,
+    allowedValues: [6, 12, 24],
+  });
 
   // Double-click tracking
   const clickTimers = useRef<Map<number, ReturnType<typeof setTimeout>>>(

package/hedhog/frontend/app/enterprise/_components/enterprise-activity-timeline.tsx.ejs

@@ -0,0 +1,87 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { formatDate } from '@/lib/format-date';
+import { useApp } from '@hed-hog/next-app-provider';
+import {
+  BookOpen,
+  CalendarDays,
+  CircleDot,
+  ShieldCheck,
+  UserPlus,
+} from 'lucide-react';
+import type { EnterpriseOverview } from './enterprise-types';
+
+const activityIcon = {
+  assigned: UserPlus,
+  revoked: UserPlus,
+  status_changed: UserPlus,
+  course: BookOpen,
+  class: CalendarDays,
+  student: UserPlus,
+  admin: ShieldCheck,
+};
+
+export function EnterpriseActivityTimeline({
+  activities,
+}: {
+  activities: EnterpriseOverview['activities'];
+}) {
+  const { getSettingValue, currentLocaleCode } = useApp();
+
+  return (
+    <Card className="border-border/60">
+      <CardHeader className="pb-2">
+        <CardTitle className="flex items-center gap-2 text-sm font-medium">
+          <CircleDot className="h-4 w-4 text-muted-foreground" />
+          Atividades recentes
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {activities.length === 0 ? (
+          <div className="flex h-28 items-center justify-center text-xs text-muted-foreground">
+            Nenhuma atividade recente.
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {activities.map((activity, index) => {
+              const Icon =
+                activityIcon[activity.type as keyof typeof activityIcon] ??
+                CircleDot;
+              return (
+                <div
+                  key={activity.id}
+                  className="grid grid-cols-[auto_1fr] gap-3 py-2"
+                >
+                  <div className="flex flex-col items-center">
+                    <span className="flex h-7 w-7 items-center justify-center rounded-full border bg-background text-muted-foreground">
+                      <Icon className="h-3.5 w-3.5" />
+                    </span>
+                    {index < activities.length - 1 && (
+                      <span className="mt-1 h-full min-h-4 w-px bg-border" />
+                    )}
+                  </div>
+                  <div className="min-w-0 pb-2">
+                    <div className="flex flex-wrap items-center justify-between gap-2">
+                      <p className="text-sm font-medium">{activity.title}</p>
+                      <span className="text-[11px] text-muted-foreground">
+                        {formatDate(
+                          activity.createdAt,
+                          getSettingValue,
+                          currentLocaleCode
+                        )}
+                      </span>
+                    </div>
+                    <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                      {activity.description}
+                    </p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/hedhog/frontend/app/enterprise/_components/enterprise-admin-create-sheet.tsx.ejs

@@ -22,6 +22,7 @@ import {
 import {
   Sheet,
   SheetContent,
+  SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
@@ -167,6 +168,9 @@ export function EnterpriseAdminCreateSheet({
       <SheetContent side="right" className="flex flex-col gap-0 sm:max-w-md">
         <SheetHeader className="border-b px-6 py-4">
           <SheetTitle>New administrator</SheetTitle>
+          <SheetDescription>
+            Create an administrator account for this enterprise.
+          </SheetDescription>
         </SheetHeader>
 
         <Form {...form}>