@hed-hog/lms 0.0.330 → 0.0.338

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

@@ -1,3 +1,4 @@
+import { RichTextEditor } from '@/components/rich-text-editor';
 import {
   FormControl,
   FormField,
@@ -5,7 +6,6 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
-import { Textarea } from '@/components/ui/textarea';
 import { Network } from 'lucide-react';
 import type { UseFormReturn } from 'react-hook-form';
 
@@ -26,6 +26,8 @@ type CourseRelationsCardProps = {
     values: Record<string, string>
   ) => Promise<PickerOption | null>;
   onCreateInstructor: () => void;
+  onEditCategory: (categorySlug: string) => void;
+  onEditInstructor: (instructorId: string) => void;
 };
 
 export function CourseRelationsCard({
@@ -35,6 +37,8 @@ export function CourseRelationsCard({
   instructorOptions,
   onCreateCategory,
   onCreateInstructor,
+  onEditCategory,
+  onEditInstructor,
 }: CourseRelationsCardProps) {
   return (
     <CourseSectionCard
@@ -43,83 +47,74 @@ export function CourseRelationsCard({
       icon={Network}
     >
       <div className="space-y-3">
-        <FormField
-          control={form.control}
-          name="categorias"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('form.fields.categories.label')}</FormLabel>
-              <CourseMultiEntityPicker
-                value={field.value}
-                onChange={field.onChange}
-                options={categoryOptions}
-                placeholder={t('form.fields.categories.selectPlaceholder')}
-                searchPlaceholder={t(
-                  'form.fields.categories.searchPlaceholder'
-                )}
-                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."
-                createFields={[
-                  {
-                    name: 'name',
-                    label: 'Nome da categoria',
-                    placeholder: 'Ex: Desenvolvimento Web',
-                    required: true,
-                  },
-                  {
-                    name: 'slug',
-                    label: 'Slug',
-                    placeholder: 'desenvolvimento-web',
-                    required: true,
-                  },
-                ]}
-                mapSearchToCreateValues={(search) => ({
-                  name: search,
-                  slug: search
-                    .trim()
-                    .toLowerCase()
-                    .normalize('NFD')
-                    .replace(/[\u0300-\u036f]/g, '')
-                    .replace(/[^a-z0-9]+/g, '-')
-                    .replace(/^-+|-+$/g, ''),
-                })}
-                onCreate={onCreateCategory}
-              />
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        <div className="grid items-start gap-3 lg:grid-cols-2">
+          <FormField
+            control={form.control}
+            name="categorias"
+            render={({ field }) => (
+              <FormItem className="self-start">
+                <FormLabel>{t('form.fields.categories.label')}</FormLabel>
+                <CourseMultiEntityPicker
+                  value={field.value}
+                  onChange={field.onChange}
+                  onEditSelected={(option) => onEditCategory(option.value)}
+                  options={categoryOptions}
+                  placeholder={t('form.fields.categories.selectPlaceholder')}
+                  searchPlaceholder={t(
+                    'form.fields.categories.searchPlaceholder'
+                  )}
+                  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."
+                  createFields={[
+                    {
+                      name: 'name',
+                      label: 'Nome da categoria',
+                      placeholder: 'Ex: Desenvolvimento Web',
+                      required: true,
+                    },
+                  ]}
+                  mapSearchToCreateValues={(search) => ({
+                    name: search,
+                  })}
+                  onCreate={onCreateCategory}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-        <FormField
-          control={form.control}
-          name="instrutores"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('form.fields.instructors.label')}</FormLabel>
-              <CourseMultiEntityPicker
-                value={field.value}
-                onChange={field.onChange}
-                options={instructorOptions}
-                placeholder={t('form.fields.instructors.selectPlaceholder')}
-                searchPlaceholder={t(
-                  'form.fields.instructors.searchPlaceholder'
-                )}
-                entityLabel="instrutor"
-                emptyStateDescription={t('form.fields.instructors.noResults')}
-                emptyHint="Nenhum instrutor vinculado ainda."
-                createActionLabel="Cadastrar instrutor"
-                onCreateClick={onCreateInstructor}
-                variant="instructor"
-                renderOptionMeta
-              />
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+          <FormField
+            control={form.control}
+            name="instrutores"
+            render={({ field }) => (
+              <FormItem className="self-start">
+                <FormLabel>{t('form.fields.instructors.label')}</FormLabel>
+                <CourseMultiEntityPicker
+                  value={field.value}
+                  onChange={field.onChange}
+                  onEditSelected={(option) => onEditInstructor(option.value)}
+                  options={instructorOptions}
+                  placeholder={t('form.fields.instructors.selectPlaceholder')}
+                  searchPlaceholder={t(
+                    'form.fields.instructors.searchPlaceholder'
+                  )}
+                  entityLabel="instrutor"
+                  emptyStateDescription={t('form.fields.instructors.noResults')}
+                  emptyHint="Nenhum instrutor vinculado ainda."
+                  createActionLabel="Cadastrar instrutor"
+                  onCreateClick={onCreateInstructor}
+                  variant="instructor"
+                  renderOptionMeta
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
 
         <FormField
           control={form.control}
@@ -128,10 +123,10 @@ export function CourseRelationsCard({
             <FormItem>
               <FormLabel>{t('form.fields.prerequisites.label')}</FormLabel>
               <FormControl>
-                <Textarea
-                  {...field}
-                  rows={3}
-                  placeholder={t('form.fields.prerequisites.placeholder')}
+                <RichTextEditor
+                  value={field.value || ''}
+                  onChange={field.onChange}
+                  className="w-full max-w-full"
                 />
               </FormControl>
               <FormMessage />

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

@@ -0,0 +1,60 @@
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { CalendarDays, Percent, Users, Video } from 'lucide-react';
+
+interface CourseSummaryCardProps {
+  course: {
+    totalAlunos?: number;
+    conclusaoMedia?: number;
+    totalAulas?: number;
+    totalSessoes?: number;
+  } | null;
+}
+
+export function CourseSummaryCard({ course }: CourseSummaryCardProps) {
+  return (
+    <KpiCardsGrid
+      items={[
+        {
+          key: 'students',
+          title: 'Total Alunos',
+          value: (course?.totalAlunos ?? 0).toLocaleString('pt-BR'),
+          icon: Users,
+          layout: 'compact',
+          accentClassName: 'from-slate-900/20 via-slate-700/10 to-transparent',
+          iconContainerClassName: 'bg-slate-900 text-white',
+        },
+        {
+          key: 'completion',
+          title: 'Conclusao Media',
+          value: `${course?.conclusaoMedia ?? 0}%`,
+          icon: Percent,
+          layout: 'compact',
+          accentClassName:
+            'from-emerald-500/25 via-green-500/15 to-transparent',
+          iconContainerClassName: 'bg-emerald-100 text-emerald-700',
+        },
+        {
+          key: 'lessons',
+          title: 'Total de Aulas',
+          value: String(course?.totalAulas ?? 0),
+          icon: Video,
+          layout: 'compact',
+          accentClassName: 'from-sky-500/25 via-blue-500/15 to-transparent',
+          iconContainerClassName: 'bg-sky-100 text-sky-700',
+        },
+        {
+          key: 'sessions',
+          title: 'Sessoes',
+          value: String(course?.totalSessoes ?? 0),
+          icon: CalendarDays,
+          layout: 'compact',
+          accentClassName:
+            'from-violet-500/25 via-indigo-500/15 to-transparent',
+          iconContainerClassName: 'bg-violet-100 text-violet-700',
+        },
+      ]}
+      columns={4}
+      className="mb-3"
+    />
+  );
+}

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

@@ -30,6 +30,7 @@ import {
 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';
@@ -43,7 +44,6 @@ import {
 import { useStructureStore } from './structure/_components/store';
 import { TreeDisplaySettingsPopover } from './structure/_components/tree-display-settings-popover';
 import { useCourseStructureShortcuts } from './structure/_components/use-course-structure-shortcuts';
-import { CourseAvatar } from '../../_components/course-avatar';
 import {
   useDuplicateLessonMutation,
   useDuplicateSessionMutation,
@@ -261,8 +261,8 @@ export default function CourseStructurePage({ params }: Props) {
     <Page>
       <PageHeader
         breadcrumbs={[
-          { label: 'LMS', href: '/lms' },
-          { label: 'Cursos', href: '/lms/courses' },
+          { label: t('breadcrumbs.lms'), href: '/lms' },
+          { label: t('breadcrumbs.courses'), href: '/lms/courses' },
           { label: course.name },
         ]}
         title={