@hed-hog/lms 0.0.349 → 0.0.351

package/hedhog/frontend/app/courses/[id]/_components/CourseCertificateCard.tsx.ejs

@@ -33,7 +33,7 @@ export function CourseCertificateCard({
   return (
     <CourseSectionCard
       title={t('form.sections.certification')}
-      description="Escolha o modelo usado na emissão e deixe o impacto desse vínculo explícito."
+      description={t('form.sectionDescriptions.certification')}
       icon={Award}
     >
       <FormField
@@ -47,21 +47,31 @@ export function CourseCertificateCard({
               onChange={(value) => field.onChange(String(value ?? ''))}
               options={options}
               placeholder={t('form.fields.certificateModel.placeholder')}
-              entityLabel="modelo de certificado"
-              createActionLabel="Criar modelo"
-              createTitle="Criar modelo de certificado"
-              createDescription="Crie um modelo base e já o vincule ao curso sem sair desta página."
+              entityLabel={t('form.fields.certificateModel.entityLabel')}
+              createActionLabel={t('form.fields.certificateModel.createAction')}
+              createTitle={t('form.fields.certificateModel.createTitle')}
+              createDescription={t(
+                'form.fields.certificateModel.createDescription'
+              )}
               createFields={[
                 {
                   name: 'name',
-                  label: 'Nome do modelo',
-                  placeholder: 'Ex: Certificado institucional',
+                  label: t(
+                    'form.fields.certificateModel.createFields.name.label'
+                  ),
+                  placeholder: t(
+                    'form.fields.certificateModel.createFields.name.placeholder'
+                  ),
                   required: true,
                 },
                 {
                   name: 'description',
-                  label: 'Descrição',
-                  placeholder: 'Resumo interno para identificar o template',
+                  label: t(
+                    'form.fields.certificateModel.createFields.description.label'
+                  ),
+                  placeholder: t(
+                    'form.fields.certificateModel.createFields.description.placeholder'
+                  ),
                 },
               ]}
               mapSearchToCreateValues={(search) => ({

package/hedhog/frontend/app/courses/[id]/_components/CourseClassificationCard.tsx.ejs

@@ -46,7 +46,7 @@ export function CourseClassificationCard({
       description="Defina estágio, formato e identidade visual do curso."
       icon={Settings2}
     >
-      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+      <div className="grid gap-2 sm:gap-3 md:grid-cols-2 xl:grid-cols-3">
         <FormField
           control={form.control}
           name="nivel"
@@ -181,6 +181,29 @@ export function CourseClassificationCard({
             </FormItem>
           )}
         />
+
+        <FormField
+          control={form.control}
+          name="code"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('form.fields.code.label')}</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  placeholder={t('form.fields.code.placeholder')}
+                  className="h-8 font-mono"
+                  onChange={(e) =>
+                    field.onChange(
+                      e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '')
+                    )
+                  }
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
       </div>
     </CourseSectionCard>
   );

package/hedhog/frontend/app/courses/[id]/_components/CourseContentCard.tsx.ejs

@@ -23,7 +23,7 @@ export function CourseContentCard({ form }: CourseContentCardProps) {
       description="Concentre os textos longos que apoiam venda, orientação pedagógica e publicação."
       icon={FileText}
     >
-      <div className="grid gap-3">
+      <div className="grid gap-2 sm:gap-3">
         <FormField
           control={form.control}
           name="objetivos"

package/hedhog/frontend/app/courses/[id]/_components/CourseMainInfoCard.tsx.ejs

@@ -22,7 +22,7 @@ export function CourseMainInfoCard({ form, t }: CourseMainInfoCardProps) {
   return (
     <CourseSectionCard
       title={t('form.sections.basicInfo')}
-      description="Os identificadores e a comunicação principal do curso ficam aqui."
+      description={t('form.sectionDescriptions.basicInfo')}
       icon={NotebookPen}
     >
       <div className="grid gap-3 md:grid-cols-2">

package/hedhog/frontend/app/courses/[id]/_components/CourseRelationsCard.tsx.ejs

@@ -1,4 +1,5 @@
 import { RichTextEditor } from '@/components/rich-text-editor';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import {
   FormControl,
   FormField,
@@ -21,6 +22,7 @@ type CourseRelationsCardProps = {
   form: UseFormReturn<CourseEditFormValues>;
   t: TranslationFn;
   categoryOptions: PickerOption[];
+  projectOptions: PickerOption[];
   instructorOptions: PickerOption[];
   onCreateCategory: (
     values: Record<string, string>
@@ -34,6 +36,7 @@ export function CourseRelationsCard({
   form,
   t,
   categoryOptions,
+  projectOptions,
   instructorOptions,
   onCreateCategory,
   onCreateInstructor,
@@ -43,11 +46,42 @@ export function CourseRelationsCard({
   return (
     <CourseSectionCard
       title={t('form.sections.relations')}
-      description="Agrupe os vínculos que ajudam a encontrar, operar e ensinar este curso."
+      description={t('form.sectionDescriptions.relations')}
       icon={Network}
     >
-      <div className="space-y-3">
-        <div className="grid items-start gap-3 lg:grid-cols-2">
+      <div className="space-y-2 sm:space-y-3">
+        <div className="grid items-start gap-2 sm:gap-3 lg:grid-cols-2">
+          <FormField
+            control={form.control}
+            name="operationsProjectId"
+            render={({ field }) => (
+              <FormItem className="self-start">
+                <FormLabel>
+                  {t('form.fields.operationsProject.label')}
+                </FormLabel>
+                <EntityPicker<PickerOption>
+                  value={field.value}
+                  onChange={(value) => field.onChange(String(value ?? ''))}
+                  options={projectOptions}
+                  placeholder={t('form.fields.operationsProject.placeholder')}
+                  searchPlaceholder={t(
+                    'form.fields.operationsProject.searchPlaceholder'
+                  )}
+                  entityLabel={t('form.fields.operationsProject.entityLabel')}
+                  emptyStateDescription={t(
+                    'form.fields.operationsProject.noResults'
+                  )}
+                  getOptionValue={(option) => option.value}
+                  getOptionLabel={(option) => option.label}
+                  getOptionDescription={(option) =>
+                    option.description || option.meta || undefined
+                  }
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           <FormField
             control={form.control}
             name="categorias"
@@ -65,15 +99,21 @@ export function CourseRelationsCard({
                   )}
                   entityLabel="categoria"
                   emptyStateDescription={t('form.fields.categories.noResults')}
-                  emptyHint="Nenhuma categoria vinculada ainda."
-                  createActionLabel="Criar categoria"
-                  createTitle="Criar categoria"
-                  createDescription="Cadastre uma categoria rapidamente sem sair da edição do curso."
+                  emptyHint={t('form.fields.categories.emptyHint')}
+                  createActionLabel={t('form.fields.categories.createAction')}
+                  createTitle={t('form.fields.categories.createTitle')}
+                  createDescription={t(
+                    'form.fields.categories.createDescription'
+                  )}
                   createFields={[
                     {
                       name: 'name',
-                      label: 'Nome da categoria',
-                      placeholder: 'Ex: Desenvolvimento Web',
+                      label: t(
+                        'form.fields.categories.createFields.name.label'
+                      ),
+                      placeholder: t(
+                        'form.fields.categories.createFields.name.placeholder'
+                      ),
                       required: true,
                     },
                   ]}
@@ -104,8 +144,8 @@ export function CourseRelationsCard({
                   )}
                   entityLabel="instrutor"
                   emptyStateDescription={t('form.fields.instructors.noResults')}
-                  emptyHint="Nenhum instrutor vinculado ainda."
-                  createActionLabel="Cadastrar instrutor"
+                  emptyHint={t('form.fields.instructors.emptyHint')}
+                  createActionLabel={t('form.fields.instructors.createAction')}
                   onCreateClick={onCreateInstructor}
                   variant="instructor"
                   renderOptionMeta

package/hedhog/frontend/app/courses/[id]/_components/CourseSectionCard.tsx.ejs

@@ -29,14 +29,19 @@ export function CourseSectionCard({
   action,
 }: CourseSectionCardProps) {
   const iconEl = Icon ? (
-    <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border border-border/60 bg-muted/30 text-foreground">
-      <Icon className="h-3.5 w-3.5" />
+    <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-border/60 bg-muted/30 text-foreground sm:h-7 sm:w-7 sm:rounded-lg">
+      <Icon className="h-3 w-3 sm:h-3.5 sm:w-3.5" />
     </div>
   ) : null;
 
   return (
-    <Card className={cn('border-border/70 shadow-sm', className)}>
-      <CardHeader className="space-y-1.5 pb-3">
+    <Card
+      className={cn(
+        'border-border/70 gap-3 py-3 shadow-sm sm:gap-6 sm:py-6',
+        className
+      )}
+    >
+      <CardHeader className="space-y-1 pb-2 px-3 sm:space-y-1.5 sm:pb-3 sm:px-6">
         <div className="flex items-center justify-between gap-3">
           <div className="flex min-w-0 items-center gap-2">
             {Icon && description ? (
@@ -59,7 +64,7 @@ export function CourseSectionCard({
             ) : (
               iconEl
             )}
-            <CardTitle className="text-sm font-semibold tracking-tight">
+            <CardTitle className="text-xs font-semibold tracking-tight sm:text-sm">
               {title}
             </CardTitle>
           </div>
@@ -68,7 +73,7 @@ export function CourseSectionCard({
         </div>
       </CardHeader>
 
-      <CardContent className={cn('pt-0', contentClassName)}>
+      <CardContent className={cn('px-3 pt-0 sm:px-6', contentClassName)}>
         {children}
       </CardContent>
     </Card>

package/hedhog/frontend/app/courses/[id]/_components/CourseSummaryCard.tsx.ejs

@@ -1,5 +1,6 @@
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { CalendarDays, Percent, Users, Video } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 interface CourseSummaryCardProps {
   course: {
@@ -11,12 +12,14 @@ interface CourseSummaryCardProps {
 }
 
 export function CourseSummaryCard({ course }: CourseSummaryCardProps) {
+  const t = useTranslations('lms.CursoEditPage');
+
   return (
     <KpiCardsGrid
       items={[
         {
           key: 'students',
-          title: 'Total Alunos',
+          title: t('kpis.totalStudents'),
           value: (course?.totalAlunos ?? 0).toLocaleString('pt-BR'),
           icon: Users,
           layout: 'compact',
@@ -25,7 +28,7 @@ export function CourseSummaryCard({ course }: CourseSummaryCardProps) {
         },
         {
           key: 'completion',
-          title: 'Conclusao Media',
+          title: t('kpis.avgCompletion'),
           value: `${course?.conclusaoMedia ?? 0}%`,
           icon: Percent,
           layout: 'compact',
@@ -35,7 +38,7 @@ export function CourseSummaryCard({ course }: CourseSummaryCardProps) {
         },
         {
           key: 'lessons',
-          title: 'Total de Aulas',
+          title: t('kpis.totalLessons'),
           value: String(course?.totalAulas ?? 0),
           icon: Video,
           layout: 'compact',
@@ -44,7 +47,7 @@ export function CourseSummaryCard({ course }: CourseSummaryCardProps) {
         },
         {
           key: 'sessions',
-          title: 'Sessoes',
+          title: t('kpis.sessions'),
           value: String(course?.totalSessoes ?? 0),
           icon: CalendarDays,
           layout: 'compact',

package/hedhog/frontend/app/courses/[id]/_components/course-edit-types.ts.ejs

@@ -1,5 +1,6 @@
 export type CourseEditFormValues = {
   slug: string;
+  code: string;
   nomeInterno: string;
   tituloComercial: string;
   descricaoPublica: string;
@@ -9,6 +10,7 @@ export type CourseEditFormValues = {
   status: 'ativo' | 'rascunho' | 'arquivado';
   tipoOferta: 'agendado' | 'sob_demanda' | 'hibrido';
   categorias: string[];
+  operationsProjectId: string;
   primaryColor: string;
   secondaryColor: string;
   instrutores: string[];

package/hedhog/frontend/app/courses/[id]/page.tsx.ejs

@@ -1,9 +1,8 @@
 'use client';
 
-import { use, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { use, useCallback, useEffect, useRef, useState } from 'react';
 
-import { Page, PageHeader } from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
+import { PageHeader } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
 import {
   ResizableHandle,
@@ -12,25 +11,16 @@ import {
 } from '@/components/ui/resizable';
 import {
   Sheet,
-  SheetContent,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useIsMutating } from '@tanstack/react-query';
-import {
-  AlertCircle,
-  BookOpen,
-  Layers,
-  Menu,
-  RefreshCw,
-  Video,
-} from 'lucide-react';
+import { AlertCircle, Menu, RefreshCw } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
 
-import { CourseAvatar } from '../../_components/course-avatar';
 import { ConfirmDialog } from './structure/_components/confirm-dialog';
 import { CourseTreePanel } from './structure/_components/course-tree-panel';
 import { CourseTreeSkeleton } from './structure/_components/course-tree-skeleton';
@@ -70,7 +60,6 @@ export default function CourseStructurePage({ params }: Props) {
   const t = useTranslations('lms.CoursesPage.StructurePage');
   const { id } = use(params);
   const isMobile = useIsMobile();
-  const router = useRouter();
   const { request } = useApp();
 
   const { data: courseSummary } = useQuery<ApiCourseSummary>({
@@ -131,8 +120,6 @@ export default function CourseStructurePage({ params }: Props) {
   ]);
 
   const course = useStructureStore((s) => s.course);
-  const sessions = useStructureStore((s) => s.sessions);
-  const lessons = useStructureStore((s) => s.lessons);
 
   const mobileSheetOpen = useStructureStore((s) => s.mobileSheetOpen);
   const setMobileSheetOpen = useStructureStore((s) => s.setMobileSheetOpen);
@@ -206,86 +193,16 @@ export default function CourseStructurePage({ params }: Props) {
     ]),
   });
 
-  const totalMinutes = useMemo(
-    () => lessons.reduce((sum, l) => sum + l.duration, 0),
-    [lessons]
-  );
-  const hours = Math.floor(totalMinutes / 60);
-  const mins = totalMinutes % 60;
-  const durationLabel = hours > 0 ? `${hours}h ${mins}m` : `${mins}m`;
-
-  const publishedLessons = useMemo(
-    () =>
-      lessons.filter(
-        (l) => l.status === 'publicada' || l.visibility === 'publico'
-      ).length,
-    [lessons]
-  );
-
-  const metricsBadges = useMemo(
-    () => (
-      <div className="flex items-center gap-1.5 flex-wrap">
-        <Badge
-          variant="outline"
-          className="gap-1 text-[0.65rem] h-5 px-1.5 font-normal"
-        >
-          <Layers className="size-3" />
-          {sessions.length} {sessions.length === 1 ? 'sessão' : 'sessões'}
-        </Badge>
-        <Badge
-          variant="outline"
-          className="gap-1 text-[0.65rem] h-5 px-1.5 font-normal"
-        >
-          <Video className="size-3" />
-          {lessons.length} {lessons.length === 1 ? 'aula' : 'aulas'}
-        </Badge>
-        <Badge
-          variant="outline"
-          className="gap-1 text-[0.65rem] h-5 px-1.5 font-normal"
-        >
-          <BookOpen className="size-3" />
-          {durationLabel}
-        </Badge>
-        {publishedLessons > 0 && (
-          <Badge className="gap-1 text-[0.65rem] h-5 px-1.5 font-normal bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-0 hover:bg-emerald-500/20">
-            <span className="size-1.5 rounded-full bg-emerald-500 inline-block" />
-            {publishedLessons} publicadas
-          </Badge>
-        )}
-      </div>
-    ),
-    [sessions.length, lessons.length, durationLabel, publishedLessons]
-  );
-
   return (
-    <Page>
+    <div className="flex h-dvh max-h-dvh min-h-0 flex-1 flex-col gap-2 overflow-hidden overscroll-none px-2 pb-2 sm:gap-4 sm:px-4 sm:pb-0 md:h-[calc(100dvh-1rem)] md:max-h-[calc(100dvh-1rem)]">
       <PageHeader
         breadcrumbs={[
           { label: t('breadcrumbs.lms'), href: '/lms' },
           { label: t('breadcrumbs.courses'), href: '/lms/courses' },
           { label: course.name },
         ]}
-        title={
-          <span className="flex min-w-0 items-center gap-3">
-            <CourseAvatar
-              fileId={courseSummary?.logoFileId}
-              title={courseSummary?.title ?? course.name}
-              className="size-10 rounded-lg"
-              iconSize="size-5"
-            />
-            <span className="min-w-0 truncate">{course.name}</span>
-          </span>
-        }
-        extraContent={metricsBadges}
         actions={
           <>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => router.push(`/lms/classes?courseId=${id}`)}
-            >
-              Gerenciar Turmas
-            </Button>
             <TreeDisplaySettingsPopover />
             <ShortcutsHelpTrigger onOpen={() => setShortcutsOpen(true)} />
           </>
@@ -298,13 +215,13 @@ export default function CourseStructurePage({ params }: Props) {
 
       {/* ── Desktop / Tablet ─────────────────────────────────────────────── */}
       {!isMobile && (
-        <div className="flex-1 min-h-0 rounded-lg border overflow-hidden h-[calc(100dvh-10rem)]">
+        <div className="flex-1 min-h-0 max-h-full rounded-lg border overflow-hidden">
           <ResizablePanelGroup direction="horizontal" className="h-full">
             <ResizablePanel
               defaultSize={28}
               minSize={18}
               maxSize={45}
-              className="flex flex-col"
+              className="flex flex-col min-h-0 overflow-hidden"
             >
               {isLoading ? (
                 <CourseTreeSkeleton />
@@ -331,12 +248,17 @@ export default function CourseStructurePage({ params }: Props) {
 
             <ResizableHandle withHandle />
 
-            <ResizablePanel defaultSize={72} className="flex flex-col min-h-0">
+            <ResizablePanel
+              defaultSize={72}
+              className="flex flex-col min-h-0 overflow-hidden"
+            >
               <div
                 ref={detailPanelRef}
                 className="flex flex-col h-full min-h-0"
               >
-                <DetailPanel />
+                <div className="h-full min-h-0">
+                  <DetailPanel />
+                </div>
               </div>
             </ResizablePanel>
           </ResizablePanelGroup>
@@ -362,11 +284,17 @@ export default function CourseStructurePage({ params }: Props) {
             ref={detailPanelRef}
             className="flex-1 min-h-0 border rounded-lg overflow-hidden"
           >
-            <DetailPanel />
+            <div className="h-full min-h-0">
+              <DetailPanel />
+            </div>
           </div>
 
           <Sheet open={mobileSheetOpen} onOpenChange={setMobileSheetOpen}>
-            <SheetContent side="left" className="w-[320px] p-0 flex flex-col">
+            <ResizableSheetContent
+              sheetId="lms-course-structure-mobile-sheet"
+              side="left"
+              className="p-0 flex flex-col"
+            >
               <SheetHeader className="px-4 py-3 border-b shrink-0">
                 <SheetTitle className="text-sm">
                   {t('mobile.sheetTitle', { title: course.title })}
@@ -395,10 +323,10 @@ export default function CourseStructurePage({ params }: Props) {
                   <CourseTreePanel />
                 )}
               </div>
-            </SheetContent>
+            </ResizableSheetContent>
           </Sheet>
         </>
       )}
-    </Page>
+    </div>
   );
 }