@hed-hog/lms 0.0.330 → 0.0.338

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/[id]/structure/_components/shortcuts-help.tsx.ejs

@@ -18,36 +18,7 @@ import { Separator } from '@/components/ui/separator';
 const SHORTCUT_GROUPS: {
   heading: string;
   items: { keys: string[]; description: string }[];
-}[] = [
-  {
-    heading: 'Navegação',
-    items: [
-      { keys: ['↑', '↓'], description: 'Navegar entre itens' },
-      { keys: ['→'], description: 'Expandir sessão selecionada' },
-      { keys: ['←'], description: 'Recolher sessão / ir para pai' },
-      { keys: ['Enter'], description: 'Focar primeiro campo do editor' },
-    ],
-  },
-  {
-    heading: 'Ações',
-    items: [
-      { keys: ['Ctrl', 'S'], description: 'Salvar formulário do painel' },
-      { keys: ['Ctrl', 'N'], description: 'Criar nova sessão ou aula' },
-      { keys: ['Ctrl', 'C'], description: 'Copiar item selecionado' },
-      { keys: ['Ctrl', 'V'], description: 'Colar no contexto atual' },
-      { keys: ['Ctrl', 'D'], description: 'Duplicar item' },
-      { keys: ['Delete'], description: 'Excluir item(ns) selecionado(s)' },
-    ],
-  },
-  {
-    heading: 'Busca & Interface',
-    items: [
-      { keys: ['Ctrl', 'F'], description: 'Focar campo de busca' },
-      { keys: ['Ctrl', '/'], description: 'Abrir ajuda de atalhos' },
-      { keys: ['Esc'], description: 'Limpar busca / seleção / foco' },
-    ],
-  },
-];
+}[] = [];
 
 // ── Component ─────────────────────────────────────────────────────────────────
 
@@ -58,6 +29,75 @@ interface ShortcutsHelpProps {
 
 export function ShortcutsHelp({ open, onOpenChange }: ShortcutsHelpProps) {
   const t = useTranslations('lms.CoursesPage.StructurePage.shortcuts');
+  const shortcutGroups = [
+    {
+      heading: t('groups.navigation.heading'),
+      items: [
+        {
+          keys: ['↑', '↓'],
+          description: t('groups.navigation.items.navigate'),
+        },
+        {
+          keys: ['→'],
+          description: t('groups.navigation.items.expand'),
+        },
+        {
+          keys: ['←'],
+          description: t('groups.navigation.items.collapse'),
+        },
+        {
+          keys: ['Enter'],
+          description: t('groups.navigation.items.focusEditor'),
+        },
+      ],
+    },
+    {
+      heading: t('groups.actions.heading'),
+      items: [
+        {
+          keys: ['Ctrl', 'S'],
+          description: t('groups.actions.items.savePanel'),
+        },
+        {
+          keys: ['Ctrl', 'N'],
+          description: t('groups.actions.items.createItem'),
+        },
+        {
+          keys: ['Ctrl', 'C'],
+          description: t('groups.actions.items.copyItem'),
+        },
+        {
+          keys: ['Ctrl', 'V'],
+          description: t('groups.actions.items.pasteItem'),
+        },
+        {
+          keys: ['Ctrl', 'D'],
+          description: t('groups.actions.items.duplicateItem'),
+        },
+        {
+          keys: ['Delete'],
+          description: t('groups.actions.items.deleteItems'),
+        },
+      ],
+    },
+    {
+      heading: t('groups.search.heading'),
+      items: [
+        {
+          keys: ['Ctrl', 'F'],
+          description: t('groups.search.items.focusSearch'),
+        },
+        {
+          keys: ['Ctrl', '/'],
+          description: t('groups.search.items.openHelp'),
+        },
+        {
+          keys: ['Esc'],
+          description: t('groups.search.items.clearState'),
+        },
+      ],
+    },
+  ];
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-sm">
@@ -69,7 +109,7 @@ export function ShortcutsHelp({ open, onOpenChange }: ShortcutsHelpProps) {
         </DialogHeader>
 
         <div className="flex flex-col gap-4 mt-1">
-          {SHORTCUT_GROUPS.map((group, gi) => (
+          {shortcutGroups.map((group, gi) => (
             <div key={gi}>
               <p className="text-[0.65rem] font-semibold uppercase tracking-wider text-muted-foreground mb-2">
                 {group.heading}

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/[id]/page.tsx.ejs

@@ -20,6 +20,7 @@ import {
   UserCheck,
   Users,
 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { notFound, useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { AdministratorsTab } from '../_components/enterprise-administrators-tab';
@@ -44,13 +45,6 @@ const STATUS_VARIANT: Record<
   suspended: 'destructive',
 };
 
-const STATUS_LABEL: Record<EnterpriseStatus, string> = {
-  active: 'Active',
-  trial: 'Trial',
-  inactive: 'Inactive',
-  suspended: 'Suspended',
-};
-
 // ── CRM Tab ───────────────────────────────────────────────────────────────────
 
 function CrmTab({
@@ -62,6 +56,7 @@ function CrmTab({
   crmAccountName: string | null;
   onLinkCrm?: () => void;
 }) {
+  const t = useTranslations('lms.EnterpriseDetailPage');
   const router = useRouter();
   if (!crmAccountId || !crmAccountName) {
     return (
@@ -70,11 +65,10 @@ function CrmTab({
           <Link2 className="h-12 w-12" />
         </div>
         <p className="text-sm font-medium text-muted-foreground">
-          No CRM account linked
+          {t('crm.noLinked')}
         </p>
         <p className="mt-1 max-w-xs text-xs text-muted-foreground/60">
-          This enterprise account is not yet associated with a CRM commercial
-          account. Link one to keep both records in sync.
+          {t('crm.noLinkedDesc')}
         </p>
         <Button
           variant="outline"
@@ -83,7 +77,7 @@ function CrmTab({
           onClick={onLinkCrm}
         >
           <Link2 className="mr-2 h-4 w-4" />
-          Link CRM account
+          {t('crm.linkButton')}
         </Button>
       </div>
     );
@@ -100,7 +94,7 @@ function CrmTab({
             <div>
               <p className="text-base font-semibold">{crmAccountName}</p>
               <p className="text-xs text-muted-foreground">
-                CRM Account #{crmAccountId}
+                {t('crm.accountRef', { id: crmAccountId })}
               </p>
             </div>
           </div>
@@ -111,7 +105,7 @@ function CrmTab({
             className="shrink-0"
           >
             <ExternalLink className="mr-2 h-4 w-4" />
-            Open in CRM
+            {t('crm.openButton')}
           </Button>
         </div>
 
@@ -120,22 +114,20 @@ function CrmTab({
         <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
           <div>
             <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              Account name
+              {t('crm.accountNameLabel')}
             </dt>
             <dd className="mt-1 text-sm">{crmAccountName}</dd>
           </div>
           <div>
             <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              CRM ID
+              {t('crm.crmIdLabel')}
             </dt>
             <dd className="mt-1 font-mono text-sm">#{crmAccountId}</dd>
           </div>
         </dl>
 
         <p className="mt-5 text-xs text-muted-foreground/60">
-          Data is read from the CRM. Use{' '}
-          <span className="font-medium">Open in CRM</span> to manage the
-          commercial account directly.
+          {t('crm.readNote')}
         </p>
       </CardContent>
     </Card>
@@ -145,35 +137,36 @@ function CrmTab({
 // ── Overview Tab ──────────────────────────────────────────────────────────────
 
 function OverviewTab({ account }: { account: EnterpriseAccount }) {
+  const t = useTranslations('lms.EnterpriseDetailPage');
   const { currentLocaleCode, getSettingValue } = useApp();
 
   const kpiItems: KpiCardItem[] = [
     {
       key: 'users',
-      title: 'Users',
+      title: t('kpis.users.label'),
       value: account.usersCount,
-      description: 'Total linked users',
+      description: t('kpis.users.description'),
       icon: Users,
     },
     {
       key: 'students',
-      title: 'Students',
+      title: t('kpis.students.label'),
       value: account.studentsCount,
-      description: 'Active learners',
+      description: t('kpis.students.description'),
       icon: UserCheck,
     },
     {
       key: 'classes',
-      title: 'Classes',
+      title: t('kpis.contractedClasses.label'),
       value: account.classesCount,
-      description: 'Contracted classes',
+      description: t('kpis.contractedClasses.description'),
       icon: CalendarDays,
     },
     {
       key: 'courses',
-      title: 'Courses',
+      title: t('kpis.courses.label'),
       value: account.coursesCount,
-      description: 'Available courses',
+      description: t('kpis.courses.description'),
       icon: BookOpen,
     },
   ];
@@ -183,19 +176,19 @@ function OverviewTab({ account }: { account: EnterpriseAccount }) {
       <KpiCardsGrid items={kpiItems} />
       <div className="flex flex-wrap items-center gap-x-6 gap-y-1 border-t pt-3 text-xs text-muted-foreground">
         <span>
-          Slug:{' '}
+          {t('overview.slug')}{' '}
           <span className="font-mono text-foreground/70">{account.slug}</span>
         </span>
         <span>
-          Created:{' '}
+          {t('overview.created')}{' '}
           {formatDate(account.createdAt, getSettingValue, currentLocaleCode)}
         </span>
         <span>
-          Updated:{' '}
+          {t('overview.updated')}{' '}
           {formatDate(account.updatedAt, getSettingValue, currentLocaleCode)}
         </span>
         {account.portalEnabled && (
-          <span className="text-primary/70">Portal enabled</span>
+          <span className="text-primary/70">{t('overview.portalEnabled')}</span>
         )}
       </div>
     </div>
@@ -207,6 +200,7 @@ function OverviewTab({ account }: { account: EnterpriseAccount }) {
 export default function EnterpriseDetailPage() {
   const { id } = useParams<{ id: string }>();
   const { request } = useApp();
+  const t = useTranslations('lms.EnterpriseDetailPage');
   const [isSheetOpen, setIsSheetOpen] = useState(false);
 
   const {
@@ -233,9 +227,9 @@ export default function EnterpriseDetailPage() {
     <Page>
       <PageHeader
         breadcrumbs={[
-          { label: 'Home', href: '/' },
-          { label: 'LMS', href: '/lms' },
-          { label: 'Enterprise', href: '/lms/enterprise' },
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.lms'), href: '/lms' },
+          { label: t('breadcrumbs.enterprise'), href: '/lms/enterprise' },
           {
             label: isLoading ? '…' : (account?.name ?? ''),
           },
@@ -243,7 +237,7 @@ export default function EnterpriseDetailPage() {
         extraContent={
           account ? (
             <Badge variant={STATUS_VARIANT[account.status]}>
-              {STATUS_LABEL[account.status]}
+              {t(`status.${account.status}`)}
             </Badge>
           ) : (
             <Skeleton className="h-5 w-16 rounded-full" />
@@ -251,7 +245,7 @@ export default function EnterpriseDetailPage() {
         }
         actions={[
           {
-            label: 'Edit',
+            label: t('actions.edit'),
             onClick: () => setIsSheetOpen(true),
             icon: <Pencil className="h-4 w-4" />,
             variant: 'outline',
@@ -268,12 +262,14 @@ export default function EnterpriseDetailPage() {
       ) : (
         <Tabs defaultValue="overview">
           <TabsList>
-            <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="crm">CRM</TabsTrigger>
-            <TabsTrigger value="classes">Classes</TabsTrigger>
-            <TabsTrigger value="courses">Courses</TabsTrigger>
-            <TabsTrigger value="students">Students</TabsTrigger>
-            <TabsTrigger value="administrators">Administrators</TabsTrigger>
+            <TabsTrigger value="overview">{t('tabs.overview')}</TabsTrigger>
+            <TabsTrigger value="crm">{t('tabs.crm')}</TabsTrigger>
+            <TabsTrigger value="classes">{t('tabs.classes')}</TabsTrigger>
+            <TabsTrigger value="courses">{t('tabs.courses')}</TabsTrigger>
+            <TabsTrigger value="students">{t('tabs.students')}</TabsTrigger>
+            <TabsTrigger value="administrators">
+              {t('tabs.administrators')}
+            </TabsTrigger>
           </TabsList>
 
           <TabsContent value="overview" className="mt-6">

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}>