@hed-hog/lms 0.0.331 → 0.0.338

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

@@ -13,7 +13,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Palette, Settings2 } from 'lucide-react';
+import { Settings2 } from 'lucide-react';
 import type { UseFormReturn } from 'react-hook-form';
 
 import { CourseSectionCard } from './CourseSectionCard';
@@ -33,23 +33,6 @@ type CourseClassificationCardProps = {
   offeringTypes: readonly SelectOption[];
 };
 
-function ColorPreview({ color, label }: { color: string; label: string }) {
-  return (
-    <div className="flex items-center gap-2 rounded-lg border border-border/60 bg-muted/20 px-2.5 py-1.5">
-      <span
-        className="h-4 w-4 shrink-0 rounded-full border border-black/10"
-        style={{ backgroundColor: color }}
-      />
-      <div className="min-w-0">
-        <p className="text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
-          {label}
-        </p>
-        <p className="truncate text-xs font-medium text-foreground">{color}</p>
-      </div>
-    </div>
-  );
-}
-
 export function CourseClassificationCard({
   form,
   t,
@@ -57,10 +40,6 @@ export function CourseClassificationCard({
   statuses,
   offeringTypes,
 }: CourseClassificationCardProps) {
-  const watchedPrimary = form.watch('primaryColor');
-  const watchedSecondary = form.watch('secondaryColor');
-  const watchedOfferingType = form.watch('tipoOferta');
-
   return (
     <CourseSectionCard
       title="Classificação e configuração"
@@ -156,7 +135,7 @@ export function CourseClassificationCard({
             <FormItem>
               <FormLabel>{t('form.fields.primaryColor.label')}</FormLabel>
               <FormControl>
-                <div className="flex items-center gap-2 rounded-lg border border-border/60 bg-muted/20 px-2 py-1.5">
+                <div className="flex items-center gap-2">
                   <Input
                     type="color"
                     value={field.value}
@@ -183,7 +162,7 @@ export function CourseClassificationCard({
             <FormItem>
               <FormLabel>{t('form.fields.secondaryColor.label')}</FormLabel>
               <FormControl>
-                <div className="flex items-center gap-2 rounded-lg border border-border/60 bg-muted/20 px-2 py-1.5">
+                <div className="flex items-center gap-2">
                   <Input
                     type="color"
                     value={field.value}
@@ -202,15 +181,6 @@ export function CourseClassificationCard({
             </FormItem>
           )}
         />
-
-        <div className="space-y-2 rounded-lg border border-border/60 bg-linear-to-br from-muted/30 to-background p-3">
-          <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
-            <Palette className="h-3.5 w-3.5" />
-            Preview
-          </div>
-          <ColorPreview color={watchedPrimary} label="Primária" />
-          <ColorPreview color={watchedSecondary} label="Secundária" />
-        </div>
       </div>
     </CourseSectionCard>
   );

package/hedhog/frontend/app/courses/[id]/_components/CourseContentCard.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 { FileText } from 'lucide-react';
 import type { UseFormReturn } from 'react-hook-form';
 
@@ -31,10 +31,10 @@ export function CourseContentCard({ form }: CourseContentCardProps) {
             <FormItem>
               <FormLabel>Objetivos do curso</FormLabel>
               <FormControl>
-                <Textarea
-                  {...field}
-                  rows={3}
-                  placeholder="Explique o que o aluno será capaz de fazer ao concluir o curso."
+                <RichTextEditor
+                  value={field.value || ''}
+                  onChange={field.onChange}
+                  className="w-full max-w-full"
                 />
               </FormControl>
               <FormMessage />
@@ -49,10 +49,10 @@ export function CourseContentCard({ form }: CourseContentCardProps) {
             <FormItem>
               <FormLabel>Público-alvo</FormLabel>
               <FormControl>
-                <Textarea
-                  {...field}
-                  rows={3}
-                  placeholder="Descreva para quem este curso foi pensado."
+                <RichTextEditor
+                  value={field.value || ''}
+                  onChange={field.onChange}
+                  className="w-full max-w-full"
                 />
               </FormControl>
               <FormMessage />

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

@@ -0,0 +1,109 @@
+import { RichTextEditor } from '@/components/rich-text-editor';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Hash, NotebookPen } from 'lucide-react';
+import type { UseFormReturn } from 'react-hook-form';
+
+import { CourseSectionCard } from './CourseSectionCard';
+import type { CourseEditFormValues, TranslationFn } from './course-edit-types';
+
+type CourseMainInfoCardProps = {
+  form: UseFormReturn<CourseEditFormValues>;
+  t: TranslationFn;
+};
+
+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."
+      icon={NotebookPen}
+    >
+      <div className="grid gap-3 md:grid-cols-2">
+        <FormField
+          control={form.control}
+          name="slug"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('form.fields.slug.label')}</FormLabel>
+              <FormControl>
+                <div className="relative">
+                  <Hash className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                  <Input
+                    {...field}
+                    className="pl-9 font-mono"
+                    placeholder={t('form.fields.slug.placeholder')}
+                    onChange={(event) =>
+                      field.onChange(
+                        String(event.target.value || '').toLowerCase()
+                      )
+                    }
+                  />
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="nomeInterno"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('form.fields.internalName.label')}</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  placeholder={t('form.fields.internalName.placeholder')}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="tituloComercial"
+          render={({ field }) => (
+            <FormItem className="md:col-span-2">
+              <FormLabel>{t('form.fields.title.label')}</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  placeholder={t('form.fields.title.placeholder')}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="descricaoPublica"
+          render={({ field }) => (
+            <FormItem className="md:col-span-2">
+              <FormLabel>{t('form.fields.description.label')}</FormLabel>
+              <FormControl>
+                <RichTextEditor
+                  value={field.value}
+                  onChange={field.onChange}
+                  className="w-full max-w-full"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+    </CourseSectionCard>
+  );
+}

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

@@ -3,7 +3,7 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { EntityPicker } from '@/components/ui/entity-picker';
 import { cn } from '@/lib/utils';
-import { Grip, Plus, X } from 'lucide-react';
+import { Grip, Pencil, Plus, X } from 'lucide-react';
 import { useMemo, useState } from 'react';
 
 import type { PickerOption } from './course-edit-types';
@@ -28,6 +28,7 @@ type CourseMultiEntityPickerProps = {
   }>;
   mapSearchToCreateValues?: (search: string) => Record<string, string>;
   onChange: (nextValue: string[]) => void;
+  onEditSelected?: (option: PickerOption) => void;
   emptyHint?: string;
   renderOptionMeta?: boolean;
   variant?: 'default' | 'instructor';
@@ -57,6 +58,7 @@ export function CourseMultiEntityPicker({
   createFields,
   mapSearchToCreateValues,
   onChange,
+  onEditSelected,
   emptyHint,
   renderOptionMeta = false,
   variant = 'default',
@@ -192,18 +194,33 @@ export function CourseMultiEntityPicker({
                   </div>
                 </div>
 
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="h-8 w-8 rounded-lg text-muted-foreground hover:text-foreground"
-                  onClick={() =>
-                    onChange(value.filter((item) => item !== option.value))
-                  }
-                  aria-label={`Remover ${option.label}`}
-                >
-                  <X className="h-4 w-4" />
-                </Button>
+                <div className="flex items-center gap-1">
+                  {onEditSelected ? (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 rounded-lg text-muted-foreground hover:text-foreground"
+                      onClick={() => onEditSelected(option)}
+                      aria-label={`Editar ${option.label}`}
+                    >
+                      <Pencil className="h-4 w-4" />
+                    </Button>
+                  ) : null}
+
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 rounded-lg text-muted-foreground hover:text-foreground"
+                    onClick={() =>
+                      onChange(value.filter((item) => item !== option.value))
+                    }
+                    aria-label={`Remover ${option.label}`}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
               </div>
             ) : (
               <Badge
@@ -212,6 +229,16 @@ export function CourseMultiEntityPicker({
                 className="flex items-center gap-1.5 rounded-full border border-border/60 bg-background px-3 py-1.5 text-xs font-medium text-foreground"
               >
                 <span className="max-w-45 truncate">{option.label}</span>
+                {onEditSelected ? (
+                  <button
+                    type="button"
+                    className="cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
+                    onClick={() => onEditSelected(option)}
+                    aria-label={`Editar ${option.label}`}
+                  >
+                    <Pencil className="h-3.5 w-3.5" />
+                  </button>
+                ) : null}
                 <button
                   type="button"
                   className="cursor-pointer text-muted-foreground transition-colors hover:text-foreground"

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"
+    />
+  );
+}