@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -0,0 +1,80 @@
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { EntityPicker } from '@/components/ui/entity-picker';
+import type { UseFormReturn } from 'react-hook-form';
+import { Award } from 'lucide-react';
+
+import { CourseSectionCard } from './CourseSectionCard';
+import type { CourseEditFormValues, PickerOption, TranslationFn } from './course-edit-types';
+
+type CourseCertificateCardProps = {
+  form: UseFormReturn<CourseEditFormValues>;
+  t: TranslationFn;
+  options: PickerOption[];
+  onCreateTemplate: (values: Record<string, string>) => Promise<PickerOption | null>;
+};
+
+export function CourseCertificateCard({
+  form,
+  t,
+  options,
+  onCreateTemplate,
+}: CourseCertificateCardProps) {
+  return (
+    <CourseSectionCard
+      title={t('form.sections.certification')}
+      description="Escolha o modelo usado na emissão e deixe o impacto desse vínculo explícito."
+      icon={Award}
+    >
+      <FormField
+        control={form.control}
+        name="modeloCertificado"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('form.fields.certificateModel.label')}</FormLabel>
+            <EntityPicker<PickerOption>
+              value={field.value}
+              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."
+              createFields={[
+                {
+                  name: 'name',
+                  label: 'Nome do modelo',
+                  placeholder: 'Ex: Certificado institucional',
+                  required: true,
+                },
+                {
+                  name: 'description',
+                  label: 'Descrição',
+                  placeholder: 'Resumo interno para identificar o template',
+                },
+              ]}
+              mapSearchToCreateValues={(search) => ({
+                name: search,
+              })}
+              onCreate={onCreateTemplate}
+              getOptionValue={(option) => option.value}
+              getOptionLabel={(option) => option.label}
+              getOptionDescription={(option) =>
+                option.description || option.meta || undefined
+              }
+            />
+            <p className="text-sm text-muted-foreground">
+              {t('form.fields.certificateModel.description')}
+            </p>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </CourseSectionCard>
+  );
+}

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

@@ -0,0 +1,226 @@
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Palette, Settings2 } from 'lucide-react';
+import type { UseFormReturn } from 'react-hook-form';
+
+import { CourseSectionCard } from './CourseSectionCard';
+import type {
+  CourseEditFormValues,
+  TranslationFn,
+} from './course-edit-types';
+
+type SelectOption = {
+  value: string;
+  label: string;
+  description?: string;
+};
+
+type CourseClassificationCardProps = {
+  form: UseFormReturn<CourseEditFormValues>;
+  t: TranslationFn;
+  levels: readonly SelectOption[];
+  statuses: readonly SelectOption[];
+  offeringTypes: readonly SelectOption[];
+};
+
+function ColorPreview({
+  color,
+  label,
+}: {
+  color: string;
+  label: string;
+}) {
+  return (
+    <div className="flex items-center gap-2 rounded-xl border border-border/60 bg-muted/20 px-3 py-2">
+      <span
+        className="h-5 w-5 rounded-full border border-black/10"
+        style={{ backgroundColor: color }}
+      />
+      <div className="min-w-0">
+        <p className="text-[11px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
+          {label}
+        </p>
+        <p className="truncate text-sm font-medium text-foreground">{color}</p>
+      </div>
+    </div>
+  );
+}
+
+export function CourseClassificationCard({
+  form,
+  t,
+  levels,
+  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"
+      description="Defina estágio, formato e identidade visual do curso."
+      icon={Settings2}
+    >
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        <FormField
+          control={form.control}
+          name="nivel"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('form.fields.level.label')}</FormLabel>
+              <Select value={field.value} onValueChange={field.onChange}>
+                <FormControl>
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder={t('form.fields.level.placeholder')} />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {levels.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="status"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('form.fields.status.label')}</FormLabel>
+              <Select value={field.value} onValueChange={field.onChange}>
+                <FormControl>
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder={t('form.fields.status.placeholder')} />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {statuses.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="tipoOferta"
+          render={({ field }) => (
+            <FormItem className="md:col-span-2 xl:col-span-1">
+              <FormLabel>{t('form.fields.offeringType.label')}</FormLabel>
+              <Select value={field.value} onValueChange={field.onChange}>
+                <FormControl>
+                  <SelectTrigger className="w-full">
+                    <SelectValue
+                      placeholder={t('form.fields.offeringType.placeholder')}
+                    />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {offeringTypes.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-sm text-muted-foreground">
+                {offeringTypes.find((option) => option.value === watchedOfferingType)
+                  ?.description ?? t('form.fields.offeringType.description')}
+              </p>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="primaryColor"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('form.fields.primaryColor.label')}</FormLabel>
+              <FormControl>
+                <div className="flex items-center gap-3 rounded-2xl border border-border/60 bg-muted/20 p-3">
+                  <Input
+                    type="color"
+                    value={field.value}
+                    onChange={field.onChange}
+                    className="h-11 w-16 cursor-pointer rounded-xl border border-border/60 bg-transparent p-1"
+                  />
+                  <Input
+                    value={field.value}
+                    onChange={field.onChange}
+                    placeholder={t('form.fields.primaryColor.placeholder')}
+                    className="font-mono"
+                  />
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="secondaryColor"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('form.fields.secondaryColor.label')}</FormLabel>
+              <FormControl>
+                <div className="flex items-center gap-3 rounded-2xl border border-border/60 bg-muted/20 p-3">
+                  <Input
+                    type="color"
+                    value={field.value}
+                    onChange={field.onChange}
+                    className="h-11 w-16 cursor-pointer rounded-xl border border-border/60 bg-transparent p-1"
+                  />
+                  <Input
+                    value={field.value}
+                    onChange={field.onChange}
+                    placeholder={t('form.fields.secondaryColor.placeholder')}
+                    className="font-mono"
+                  />
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="space-y-3 rounded-2xl border border-border/60 bg-gradient-to-br from-muted/30 to-background p-4">
+          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+            <Palette className="h-4 w-4 text-muted-foreground" />
+            Preview rápido
+          </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

@@ -0,0 +1,71 @@
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Textarea } from '@/components/ui/textarea';
+import { FileText } from 'lucide-react';
+import type { UseFormReturn } from 'react-hook-form';
+
+import { CourseSectionCard } from './CourseSectionCard';
+import type { CourseEditFormValues } from './course-edit-types';
+
+type CourseContentCardProps = {
+  form: UseFormReturn<CourseEditFormValues>;
+};
+
+export function CourseContentCard({ form }: CourseContentCardProps) {
+  return (
+    <CourseSectionCard
+      title="Conteúdo e regras"
+      description="Concentre os textos longos que apoiam venda, orientação pedagógica e publicação."
+      icon={FileText}
+    >
+      <div className="grid gap-4">
+        <FormField
+          control={form.control}
+          name="objetivos"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Objetivos do curso</FormLabel>
+              <FormControl>
+                <Textarea
+                  {...field}
+                  rows={4}
+                  placeholder="Explique o que o aluno será capaz de fazer ao concluir o curso."
+                />
+              </FormControl>
+              <p className="text-sm text-muted-foreground">
+                Use frases diretas para orientar catálogo, marketing e equipe acadêmica.
+              </p>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="publicoAlvo"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Público-alvo</FormLabel>
+              <FormControl>
+                <Textarea
+                  {...field}
+                  rows={4}
+                  placeholder="Descreva para quem este curso foi pensado."
+                />
+              </FormControl>
+              <p className="text-sm text-muted-foreground">
+                Ajuda a alinhar expectativa comercial e segmentação da oferta.
+              </p>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+    </CourseSectionCard>
+  );
+}

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

@@ -0,0 +1,42 @@
+import { Button } from '@/components/ui/button';
+import { AlertTriangle, Trash2 } from 'lucide-react';
+
+import { CourseSectionCard } from './CourseSectionCard';
+import type { TranslationFn } from './course-edit-types';
+
+type CourseDangerZoneCardProps = {
+  t: TranslationFn;
+  onDelete: () => void;
+};
+
+export function CourseDangerZoneCard({
+  t,
+  onDelete,
+}: CourseDangerZoneCardProps) {
+  return (
+    <CourseSectionCard
+      title="Zona de risco"
+      description="Ações destrutivas ficam isoladas para evitar cliques acidentais."
+      icon={AlertTriangle}
+      className="border-destructive/20"
+      contentClassName="pt-0"
+    >
+      <div className="rounded-2xl border border-destructive/20 bg-destructive/5 p-4">
+        <p className="text-sm leading-6 text-muted-foreground">
+          Excluir o curso remove este registro da operação e pode afetar turmas,
+          matrículas e certificados vinculados.
+        </p>
+
+        <Button
+          type="button"
+          variant="destructive"
+          className="mt-4 w-full gap-2"
+          onClick={onDelete}
+        >
+          <Trash2 className="h-4 w-4" />
+          {t('form.actions.deleteCourse')}
+        </Button>
+      </div>
+    </CourseSectionCard>
+  );
+}

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

@@ -0,0 +1,111 @@
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@/components/ui/form';
+import { Switch } from '@/components/ui/switch';
+import { BadgeCheck } from 'lucide-react';
+import type { UseFormReturn } from 'react-hook-form';
+
+import { CourseSectionCard } from './CourseSectionCard';
+import type { CourseEditFormValues, TranslationFn } from './course-edit-types';
+
+type CourseFlagsCardProps = {
+  form: UseFormReturn<CourseEditFormValues>;
+  t: TranslationFn;
+};
+
+function FlagRow({
+  title,
+  description,
+  checked,
+  onCheckedChange,
+}: {
+  title: string;
+  description: string;
+  checked: boolean;
+  onCheckedChange: (value: boolean) => void;
+}) {
+  return (
+    <div className="flex items-start justify-between gap-4 rounded-2xl border border-border/60 bg-muted/20 px-4 py-3">
+      <div className="space-y-1">
+        <p className="text-sm font-medium text-foreground">{title}</p>
+        <p className="text-xs leading-5 text-muted-foreground">{description}</p>
+      </div>
+      <Switch checked={checked} onCheckedChange={onCheckedChange} />
+    </div>
+  );
+}
+
+export function CourseFlagsCard({ form, t }: CourseFlagsCardProps) {
+  return (
+    <CourseSectionCard
+      title={t('form.sections.flags')}
+      description="Controles rápidos para disponibilidade e destaque do curso."
+      icon={BadgeCheck}
+    >
+      <div className="space-y-3">
+        <FormField
+          control={form.control}
+          name="certificado"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="sr-only">
+                {t('form.flags.certificate.label')}
+              </FormLabel>
+              <FormControl>
+                <FlagRow
+                  title={t('form.flags.certificate.label')}
+                  description={t('form.flags.certificate.description')}
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="destaque"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="sr-only">
+                {t('form.flags.featured.label')}
+              </FormLabel>
+              <FormControl>
+                <FlagRow
+                  title={t('form.flags.featured.label')}
+                  description={t('form.flags.featured.description')}
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="listado"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="sr-only">
+                {t('form.flags.listed.label')}
+              </FormLabel>
+              <FormControl>
+                <FlagRow
+                  title={t('form.flags.listed.label')}
+                  description={t('form.flags.listed.description')}
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </div>
+    </CourseSectionCard>
+  );
+}

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

@@ -0,0 +1,113 @@
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { RichTextEditor } from '@/components/rich-text-editor';
+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-4 md:grid-cols-2">
+        <FormField
+          control={form.control}
+          name="codigo"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('form.fields.code.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 uppercase"
+                    placeholder={t('form.fields.code.placeholder')}
+                    onChange={(event) =>
+                      field.onChange(String(event.target.value || '').toUpperCase())
+                    }
+                  />
+                </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>
+              <p className="text-sm text-muted-foreground">
+                {t('form.fields.description.description')}
+              </p>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+    </CourseSectionCard>
+  );
+}