@hed-hog/lms 0.0.306 → 0.0.309

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

@@ -1,21 +1,27 @@
+import { EntityPicker } from '@/components/ui/entity-picker';
 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 type { UseFormReturn } from 'react-hook-form';
 
 import { CourseSectionCard } from './CourseSectionCard';
-import type { CourseEditFormValues, PickerOption, TranslationFn } from './course-edit-types';
+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>;
+  onCreateTemplate: (
+    values: Record<string, string>
+  ) => Promise<PickerOption | null>;
 };
 
 export function CourseCertificateCard({
@@ -68,9 +74,6 @@ export function CourseCertificateCard({
                 option.description || option.meta || undefined
               }
             />
-            <p className="text-sm text-muted-foreground">
-              {t('form.fields.certificateModel.description')}
-            </p>
             <FormMessage />
           </FormItem>
         )}

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

@@ -17,10 +17,7 @@ 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';
+import type { CourseEditFormValues, TranslationFn } from './course-edit-types';
 
 type SelectOption = {
   value: string;
@@ -36,24 +33,18 @@ type CourseClassificationCardProps = {
   offeringTypes: readonly SelectOption[];
 };
 
-function ColorPreview({
-  color,
-  label,
-}: {
-  color: string;
-  label: string;
-}) {
+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">
+    <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-5 w-5 rounded-full border border-black/10"
+        className="h-4 w-4 shrink-0 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">
+        <p className="text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
           {label}
         </p>
-        <p className="truncate text-sm font-medium text-foreground">{color}</p>
+        <p className="truncate text-xs font-medium text-foreground">{color}</p>
       </div>
     </div>
   );
@@ -76,7 +67,7 @@ export function CourseClassificationCard({
       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">
+      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
         <FormField
           control={form.control}
           name="nivel"
@@ -86,7 +77,9 @@ export function CourseClassificationCard({
               <Select value={field.value} onValueChange={field.onChange}>
                 <FormControl>
                   <SelectTrigger className="w-full">
-                    <SelectValue placeholder={t('form.fields.level.placeholder')} />
+                    <SelectValue
+                      placeholder={t('form.fields.level.placeholder')}
+                    />
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent>
@@ -111,7 +104,9 @@ export function CourseClassificationCard({
               <Select value={field.value} onValueChange={field.onChange}>
                 <FormControl>
                   <SelectTrigger className="w-full">
-                    <SelectValue placeholder={t('form.fields.status.placeholder')} />
+                    <SelectValue
+                      placeholder={t('form.fields.status.placeholder')}
+                    />
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent>
@@ -149,10 +144,6 @@ export function CourseClassificationCard({
                   ))}
                 </SelectContent>
               </Select>
-              <p className="text-sm text-muted-foreground">
-                {offeringTypes.find((option) => option.value === watchedOfferingType)
-                  ?.description ?? t('form.fields.offeringType.description')}
-              </p>
               <FormMessage />
             </FormItem>
           )}
@@ -165,18 +156,18 @@ export function CourseClassificationCard({
             <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">
+                <div className="flex items-center gap-2 rounded-lg border border-border/60 bg-muted/20 px-2 py-1.5">
                   <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"
+                    className="h-8 w-10 cursor-pointer rounded-md border border-border/60 bg-transparent p-0.5"
                   />
                   <Input
                     value={field.value}
                     onChange={field.onChange}
                     placeholder={t('form.fields.primaryColor.placeholder')}
-                    className="font-mono"
+                    className="h-8 font-mono"
                   />
                 </div>
               </FormControl>
@@ -192,18 +183,18 @@ export function CourseClassificationCard({
             <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">
+                <div className="flex items-center gap-2 rounded-lg border border-border/60 bg-muted/20 px-2 py-1.5">
                   <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"
+                    className="h-8 w-10 cursor-pointer rounded-md border border-border/60 bg-transparent p-0.5"
                   />
                   <Input
                     value={field.value}
                     onChange={field.onChange}
                     placeholder={t('form.fields.secondaryColor.placeholder')}
-                    className="font-mono"
+                    className="h-8 font-mono"
                   />
                 </div>
               </FormControl>
@@ -212,10 +203,10 @@ export function CourseClassificationCard({
           )}
         />
 
-        <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 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" />

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

@@ -23,7 +23,7 @@ export function CourseContentCard({ form }: CourseContentCardProps) {
       description="Concentre os textos longos que apoiam venda, orientação pedagógica e publicação."
       icon={FileText}
     >
-      <div className="grid gap-4">
+      <div className="grid gap-3">
         <FormField
           control={form.control}
           name="objetivos"
@@ -33,13 +33,10 @@ export function CourseContentCard({ form }: CourseContentCardProps) {
               <FormControl>
                 <Textarea
                   {...field}
-                  rows={4}
+                  rows={3}
                   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>
           )}
@@ -54,13 +51,10 @@ export function CourseContentCard({ form }: CourseContentCardProps) {
               <FormControl>
                 <Textarea
                   {...field}
-                  rows={4}
+                  rows={3}
                   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>
           )}

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

@@ -1,4 +1,10 @@
 import { Button } from '@/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { AlertTriangle, Trash2 } from 'lucide-react';
 
 import { CourseSectionCard } from './CourseSectionCard';
@@ -21,22 +27,26 @@ export function CourseDangerZoneCard({
       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>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="destructive"
+              size="sm"
+              className="gap-2"
+              onClick={onDelete}
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+              {t('form.actions.deleteCourse')}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="top" className="max-w-[240px] text-xs">
+            Remove o curso, turmas, matrículas e certificados vinculados
+            permanentemente.
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     </CourseSectionCard>
   );
 }

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

@@ -5,6 +5,12 @@ import {
   FormLabel,
 } from '@/components/ui/form';
 import { Switch } from '@/components/ui/switch';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { BadgeCheck } from 'lucide-react';
 import type { UseFormReturn } from 'react-hook-form';
 
@@ -28,11 +34,19 @@ function FlagRow({
   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>
+    <div className="flex items-center justify-between gap-3 rounded-lg border border-border/60 bg-muted/20 px-3 py-2">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <p className="cursor-default text-sm font-medium text-foreground">
+              {title}
+            </p>
+          </TooltipTrigger>
+          <TooltipContent side="right" className="max-w-55 text-xs">
+            {description}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
       <Switch checked={checked} onCheckedChange={onCheckedChange} />
     </div>
   );

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

@@ -1,3 +1,4 @@
+import { RichTextEditor } from '@/components/rich-text-editor';
 import {
   FormControl,
   FormField,
@@ -6,7 +7,6 @@ import {
   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';
 
@@ -18,32 +18,31 @@ type CourseMainInfoCardProps = {
   t: TranslationFn;
 };
 
-export function CourseMainInfoCard({
-  form,
-  t,
-}: CourseMainInfoCardProps) {
+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">
+      <div className="grid gap-3 md:grid-cols-2">
         <FormField
           control={form.control}
-          name="codigo"
+          name="slug"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>{t('form.fields.code.label')}</FormLabel>
+              <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 uppercase"
-                    placeholder={t('form.fields.code.placeholder')}
+                    className="pl-9 font-mono"
+                    placeholder={t('form.fields.slug.placeholder')}
                     onChange={(event) =>
-                      field.onChange(String(event.target.value || '').toUpperCase())
+                      field.onChange(
+                        String(event.target.value || '').toLowerCase()
+                      )
                     }
                   />
                 </div>
@@ -100,9 +99,6 @@ export function CourseMainInfoCard({
                   className="w-full max-w-full"
                 />
               </FormControl>
-              <p className="text-sm text-muted-foreground">
-                {t('form.fields.description.description')}
-              </p>
               <FormMessage />
             </FormItem>
           )}