@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -0,0 +1,215 @@
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { cn } from '@/lib/utils';
+import {
+  Eye,
+  FileImage,
+  ImagePlus,
+  Loader2,
+  UploadCloud,
+} from 'lucide-react';
+import { type ChangeEvent, useRef } from 'react';
+
+import { CourseSectionCard } from './CourseSectionCard';
+import type { TranslationFn } from './course-edit-types';
+
+type MediaFile = {
+  id: number;
+  name: string;
+};
+
+type MediaPaneProps = {
+  label: string;
+  description: string;
+  ratioClassName: string;
+  preview: string | null;
+  file?: MediaFile;
+  loading: boolean;
+  onSelect: (event: ChangeEvent<HTMLInputElement>) => void;
+  onOpenFile?: () => void;
+};
+
+function MediaPane({
+  label,
+  description,
+  ratioClassName,
+  preview,
+  file,
+  loading,
+  onSelect,
+  onOpenFile,
+}: MediaPaneProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <p className="text-sm font-medium text-foreground">{label}</p>
+        <p className="text-xs leading-5 text-muted-foreground">{description}</p>
+      </div>
+
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={onSelect}
+      />
+
+      <button
+        type="button"
+        className={cn(
+          'group relative block w-full overflow-hidden rounded-2xl border border-border/70 bg-gradient-to-br from-muted/40 to-background text-left transition-all hover:border-border hover:shadow-sm',
+          ratioClassName
+        )}
+        onClick={() => inputRef.current?.click()}
+      >
+        {preview ? (
+          <>
+            <img
+              src={preview}
+              alt={label}
+              className="h-full w-full object-cover transition-transform duration-200 group-hover:scale-[1.02]"
+            />
+            <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent p-4">
+              <div className="flex flex-wrap gap-2">
+                <span className="rounded-full bg-white/15 px-2.5 py-1 text-xs font-medium text-white backdrop-blur">
+                  Preview pronta
+                </span>
+                <span className="rounded-full bg-white/15 px-2.5 py-1 text-xs font-medium text-white backdrop-blur">
+                  Clique para substituir
+                </span>
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="flex h-full flex-col items-center justify-center gap-3 px-6 text-center">
+            <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-border/70 bg-background/80 text-muted-foreground">
+              <ImagePlus className="h-5 w-5" />
+            </div>
+            <div className="space-y-1">
+              <p className="text-sm font-medium text-foreground">
+                Enviar {label.toLowerCase()}
+              </p>
+              <p className="text-xs leading-5 text-muted-foreground">
+                Clique para selecionar uma imagem.
+              </p>
+            </div>
+          </div>
+        )}
+
+        {loading ? (
+          <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-background/85">
+            <Loader2 className="h-5 w-5 animate-spin text-foreground" />
+            <div className="w-full max-w-[180px] space-y-2">
+              <Progress value={72} className="h-2" />
+              <p className="text-xs text-muted-foreground">Enviando arquivo...</p>
+            </div>
+          </div>
+        ) : null}
+      </button>
+
+      <div className="rounded-2xl border border-border/60 bg-muted/20 p-3">
+        <div className="flex items-start gap-3">
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-border/60 bg-background text-muted-foreground">
+            <FileImage className="h-4 w-4" />
+          </div>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-foreground">
+              {file?.name || 'Nenhum arquivo vinculado'}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              {file ? 'Arquivo pronto para uso.' : 'Ainda sem mídia vinculada.'}
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-3 flex flex-wrap gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="gap-2"
+            onClick={() => inputRef.current?.click()}
+          >
+            <UploadCloud className="h-4 w-4" />
+            {preview ? 'Substituir' : 'Enviar'}
+          </Button>
+
+          {file && onOpenFile ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="gap-2"
+              onClick={onOpenFile}
+            >
+              <Eye className="h-4 w-4" />
+              Visualizar
+            </Button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type CourseMediaCardProps = {
+  logoPreview: string | null;
+  bannerPreview: string | null;
+  uploadingLogo: boolean;
+  uploadingBanner: boolean;
+  onLogoSelect: (event: ChangeEvent<HTMLInputElement>) => void;
+  onBannerSelect: (event: ChangeEvent<HTMLInputElement>) => void;
+  logoFile?: MediaFile;
+  bannerFile?: MediaFile;
+  onOpenLogoFile?: () => void;
+  onOpenBannerFile?: () => void;
+  t: TranslationFn;
+};
+
+export function CourseMediaCard({
+  logoPreview,
+  bannerPreview,
+  uploadingLogo,
+  uploadingBanner,
+  onLogoSelect,
+  onBannerSelect,
+  logoFile,
+  bannerFile,
+  onOpenLogoFile,
+  onOpenBannerFile,
+  t,
+}: CourseMediaCardProps) {
+  return (
+    <CourseSectionCard
+      title={t('form.media.title')}
+      description="Gerencie os ativos visuais do curso com preview e ações rápidas."
+      icon={FileImage}
+    >
+      <div className="space-y-5">
+        <MediaPane
+          label={t('form.fields.banner.label')}
+          description={t('form.fields.banner.description')}
+          ratioClassName="aspect-[16/9]"
+          preview={bannerPreview}
+          file={bannerFile}
+          loading={uploadingBanner}
+          onSelect={onBannerSelect}
+          onOpenFile={onOpenBannerFile}
+        />
+
+        <MediaPane
+          label={t('form.fields.logo.label')}
+          description={t('form.fields.logo.description')}
+          ratioClassName="aspect-square max-w-[220px]"
+          preview={logoPreview}
+          file={logoFile}
+          loading={uploadingLogo}
+          onSelect={onLogoSelect}
+          onOpenFile={onOpenLogoFile}
+        />
+      </div>
+    </CourseSectionCard>
+  );
+}

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

@@ -0,0 +1,236 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { EntityPicker } from '@/components/ui/entity-picker';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import { Grip, Plus, X } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+import type { PickerOption } from './course-edit-types';
+
+type CourseMultiEntityPickerProps = {
+  value: string[];
+  options: PickerOption[];
+  placeholder: string;
+  entityLabel: string;
+  searchPlaceholder?: string;
+  emptyStateDescription?: string;
+  createActionLabel?: string;
+  createTitle?: string;
+  createDescription?: string;
+  onCreate?: (values: Record<string, string>) => Promise<PickerOption | null>;
+  onCreateClick?: () => void;
+  createFields?: Array<{
+    name: string;
+    label: string;
+    placeholder?: string;
+    required?: boolean;
+  }>;
+  mapSearchToCreateValues?: (search: string) => Record<string, string>;
+  onChange: (nextValue: string[]) => void;
+  emptyHint?: string;
+  renderOptionMeta?: boolean;
+  variant?: 'default' | 'instructor';
+};
+
+function getInitials(label: string) {
+  return label
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? '')
+    .join('');
+}
+
+export function CourseMultiEntityPicker({
+  value,
+  options,
+  placeholder,
+  entityLabel,
+  searchPlaceholder,
+  emptyStateDescription,
+  createActionLabel,
+  createTitle,
+  createDescription,
+  onCreate,
+  onCreateClick,
+  createFields,
+  mapSearchToCreateValues,
+  onChange,
+  emptyHint,
+  renderOptionMeta = false,
+  variant = 'default',
+}: CourseMultiEntityPickerProps) {
+  const [pickerValue, setPickerValue] = useState('');
+
+  const optionByValue = useMemo(
+    () =>
+      options.reduce<Record<string, PickerOption>>((acc, option) => {
+        acc[option.value] = option;
+        return acc;
+      }, {}),
+    [options]
+  );
+
+  const selectedOptions = value
+    .map((item) => optionByValue[item])
+    .filter(Boolean) as PickerOption[];
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-start gap-2">
+        <EntityPicker<PickerOption>
+          value={pickerValue}
+          onChange={(nextValue) => {
+            const normalized = String(nextValue ?? '');
+
+            if (!normalized) {
+              return;
+            }
+
+            if (!value.includes(normalized)) {
+              onChange([...value, normalized]);
+            }
+
+            setPickerValue('');
+          }}
+          options={options}
+          placeholder={placeholder}
+          searchPlaceholder={searchPlaceholder ?? placeholder}
+          emptyStateDescription={emptyStateDescription}
+          entityLabel={entityLabel}
+          showCreateButton={Boolean(onCreate)}
+          onCreate={onCreate}
+          createFields={createFields}
+          createActionLabel={createActionLabel}
+          createTitle={createTitle}
+          createDescription={createDescription}
+          mapSearchToCreateValues={mapSearchToCreateValues}
+          getOptionValue={(option) => option.value}
+          getOptionLabel={(option) => option.label}
+          getOptionDescription={(option) =>
+            option.description || option.meta || undefined
+          }
+          renderOption={({ option }) => (
+            <div className="flex min-w-0 items-center gap-3 py-0.5">
+              {variant === 'instructor' ? (
+                <Avatar className="h-8 w-8 rounded-lg border border-border/60">
+                  <AvatarImage src={option.avatarUrl ?? undefined} />
+                  <AvatarFallback className="rounded-lg bg-muted text-[11px] font-semibold text-foreground">
+                    {getInitials(option.label)}
+                  </AvatarFallback>
+                </Avatar>
+              ) : (
+                <div className="flex h-8 w-8 items-center justify-center rounded-lg border border-border/60 bg-muted/30 text-muted-foreground">
+                  <Grip className="h-3.5 w-3.5" />
+                </div>
+              )}
+
+              <div className="min-w-0">
+                <div className="truncate text-sm font-medium text-foreground">
+                  {option.label}
+                </div>
+                {renderOptionMeta && option.meta ? (
+                  <div className="truncate text-xs text-muted-foreground">
+                    {option.meta}
+                  </div>
+                ) : option.description ? (
+                  <div className="truncate text-xs text-muted-foreground">
+                    {option.description}
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          )}
+          className="min-w-0 flex-1"
+        />
+
+        {onCreateClick ? (
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="h-10 w-10 shrink-0 rounded-xl"
+            onClick={onCreateClick}
+            aria-label={createActionLabel ?? `Criar ${entityLabel}`}
+          >
+            <Plus className="h-4 w-4" />
+          </Button>
+        ) : null}
+      </div>
+
+      {selectedOptions.length > 0 ? (
+        <div
+          className={cn(
+            'rounded-2xl border border-border/60 bg-muted/20 p-2.5',
+            variant === 'instructor' ? 'space-y-2' : 'flex flex-wrap gap-2'
+          )}
+        >
+          {selectedOptions.map((option) =>
+            variant === 'instructor' ? (
+              <div
+                key={option.value}
+                className="flex items-center justify-between gap-3 rounded-xl border border-border/60 bg-background px-3 py-2"
+              >
+                <div className="flex min-w-0 items-center gap-3">
+                  <Avatar className="h-9 w-9 rounded-xl border border-border/60">
+                    <AvatarImage src={option.avatarUrl ?? undefined} />
+                    <AvatarFallback className="rounded-xl bg-muted text-xs font-semibold text-foreground">
+                      {getInitials(option.label)}
+                    </AvatarFallback>
+                  </Avatar>
+
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-medium text-foreground">
+                      {option.label}
+                    </p>
+                    {option.meta ? (
+                      <p className="truncate text-xs text-muted-foreground">
+                        {option.meta}
+                      </p>
+                    ) : null}
+                  </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>
+            ) : (
+              <Badge
+                key={option.value}
+                variant="secondary"
+                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-[180px] truncate">{option.label}</span>
+                <button
+                  type="button"
+                  className="cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
+                  onClick={() =>
+                    onChange(value.filter((item) => item !== option.value))
+                  }
+                  aria-label={`Remover ${option.label}`}
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              </Badge>
+            )
+          )}
+        </div>
+      ) : (
+        <div className="rounded-2xl border border-dashed border-border/70 bg-muted/15 px-4 py-3 text-sm text-muted-foreground">
+          {emptyHint ?? `Nenhum ${entityLabel.toLowerCase()} vinculado ainda.`}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,141 @@
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Textarea } from '@/components/ui/textarea';
+import { Network } from 'lucide-react';
+import type { UseFormReturn } from 'react-hook-form';
+
+import { CourseMultiEntityPicker } from './CourseMultiEntityPicker';
+import { CourseSectionCard } from './CourseSectionCard';
+import type {
+  CourseEditFormValues,
+  PickerOption,
+  TranslationFn,
+} from './course-edit-types';
+
+type CourseRelationsCardProps = {
+  form: UseFormReturn<CourseEditFormValues>;
+  t: TranslationFn;
+  categoryOptions: PickerOption[];
+  instructorOptions: PickerOption[];
+  onCreateCategory: (values: Record<string, string>) => Promise<PickerOption | null>;
+  onCreateInstructor: () => void;
+};
+
+export function CourseRelationsCard({
+  form,
+  t,
+  categoryOptions,
+  instructorOptions,
+  onCreateCategory,
+  onCreateInstructor,
+}: CourseRelationsCardProps) {
+  return (
+    <CourseSectionCard
+      title={t('form.sections.relations')}
+      description="Agrupe os vínculos que ajudam a encontrar, operar e ensinar este curso."
+      icon={Network}
+    >
+      <div className="space-y-5">
+        <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>
+          )}
+        />
+
+        <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="preRequisitos"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('form.fields.prerequisites.label')}</FormLabel>
+              <FormControl>
+                <Textarea
+                  {...field}
+                  rows={3}
+                  placeholder={t('form.fields.prerequisites.placeholder')}
+                />
+              </FormControl>
+              <p className="text-sm text-muted-foreground">
+                {t('form.fields.prerequisites.description')}
+              </p>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+    </CourseSectionCard>
+  );
+}

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

@@ -0,0 +1,57 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+type CourseSectionCardProps = {
+  title: string;
+  description?: string;
+  icon?: LucideIcon;
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  action?: ReactNode;
+};
+
+export function CourseSectionCard({
+  title,
+  description,
+  icon: Icon,
+  children,
+  className,
+  contentClassName,
+  action,
+}: CourseSectionCardProps) {
+  return (
+    <Card className={cn('border-border/70 shadow-sm', className)}>
+      <CardHeader className="space-y-3 pb-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex min-w-0 items-start gap-3">
+            {Icon ? (
+              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-border/60 bg-muted/30 text-foreground">
+                <Icon className="h-4 w-4" />
+              </div>
+            ) : null}
+
+            <div className="min-w-0 space-y-1">
+              <CardTitle className="text-base font-semibold tracking-tight">
+                {title}
+              </CardTitle>
+              {description ? (
+                <p className="text-sm leading-5 text-muted-foreground">
+                  {description}
+                </p>
+              ) : null}
+            </div>
+          </div>
+
+          {action ? <div className="shrink-0">{action}</div> : null}
+        </div>
+      </CardHeader>
+
+      <CardContent className={cn('pt-0', contentClassName)}>
+        {children}
+      </CardContent>
+    </Card>
+  );
+}