@hed-hog/lms 0.0.331 → 0.0.347

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

@@ -854,9 +854,7 @@ const getAulaSchema = (t: (key: string) => string) =>
       horaFim: z
         .string()
         .min(1, t('sheet.lessonForm.validation.endTimeRequired')),
-      local: z
-        .string()
-        .min(1, t('sheet.lessonForm.validation.locationRequired')),
+      local: z.string().optional(),
       tipo: z.string().min(1, t('sheet.lessonForm.validation.typeRequired')),
       instrutorId: z.string().optional(),
       recurrenceFrequency: z

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

@@ -95,6 +95,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 type { DateRange } from 'react-day-picker';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
@@ -226,6 +227,7 @@ type InstructorOption = {
   name: string;
   personId?: number;
   avatarId?: number | null;
+  userPhotoId?: number | null;
   qualificationSlugs?: string[];
 };
 
@@ -241,6 +243,8 @@ type InstructorApiRow = {
   person_id?: number | string;
   avatarId?: number | string | null;
   avatar_id?: number | string | null;
+  userPhotoId?: number | string | null;
+  user_photo_id?: number | string | null;
   qualificationSlugs?: string[];
 };
 
@@ -267,18 +271,39 @@ function normalizeInstructorOption(
     rawAvatarId !== undefined && rawAvatarId !== null
       ? Number(rawAvatarId) || null
       : null;
+  const rawUserPhotoId = item?.userPhotoId ?? item?.user_photo_id;
+  const userPhotoId =
+    rawUserPhotoId !== undefined && rawUserPhotoId !== null
+      ? Number(rawUserPhotoId) || null
+      : null;
 
   return {
     id,
     name,
     personId: Number(item?.personId ?? item?.person_id ?? 0) || undefined,
     avatarId,
+    userPhotoId,
     qualificationSlugs: Array.isArray(item?.qualificationSlugs)
       ? item.qualificationSlugs
       : undefined,
   };
 }
 
+function getInstructorAvatarUrl(option?: {
+  userPhotoId?: number | null;
+  avatarId?: number | null;
+}) {
+  if (option?.userPhotoId) {
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/user/avatar/${option.userPhotoId}`;
+  }
+
+  if (option?.avatarId) {
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${option.avatarId}`;
+  }
+
+  return undefined;
+}
+
 function getCourseIdByTitle(
   courses: Array<{ id: number; title: string }>,
   title: string
@@ -700,7 +725,11 @@ export default function TurmasPage() {
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:global:pageSize',
+    defaultValue: 12,
+    allowedValues: PAGE_SIZES,
+  });
 
   // Double-click tracking
   const clickTimers = useRef<Map<number, ReturnType<typeof setTimeout>>>(
@@ -749,6 +778,7 @@ export default function TurmasPage() {
           params: {
             page: 1,
             pageSize: 500,
+            offeringTypes: 'scheduled,blended',
           },
         });
         return response.data;
@@ -2384,6 +2414,7 @@ export default function TurmasPage() {
                           params: {
                             page,
                             pageSize,
+                            offeringTypes: 'scheduled,blended',
                             ...(search.trim() ? { search: search.trim() } : {}),
                           },
                         });
@@ -2912,9 +2943,7 @@ export default function TurmasPage() {
                         .slice(0, 2)
                         .map((p) => p[0]?.toUpperCase() ?? '')
                         .join('');
-                      const avatarUrl = option.avatarId
-                        ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${option.avatarId}`
-                        : undefined;
+                      const avatarUrl = getInstructorAvatarUrl(option);
                       return (
                         <div className="flex min-w-0 items-center gap-3 py-0.5">
                           <Avatar className="h-8 w-8 shrink-0 rounded-lg border border-border/60">
@@ -2937,9 +2966,7 @@ export default function TurmasPage() {
                         .slice(0, 2)
                         .map((p) => p[0]?.toUpperCase() ?? '')
                         .join('');
-                      const avatarUrl = option?.avatarId
-                        ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${option.avatarId}`
-                        : undefined;
+                      const avatarUrl = getInstructorAvatarUrl(option ?? undefined);
                       return (
                         <div className="flex items-center gap-2">
                           <Avatar className="h-5 w-5 shrink-0 rounded">

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