@hed-hog/lms 0.0.350 → 0.0.353

package/hedhog/frontend/app/certificates/models/CanvasStage.tsx.ejs

@@ -694,15 +694,26 @@ function buildAPI(canvas: any, fabricMod: any): CanvasAPI {
     let fObj: any = null;
 
     if (type === 'field') {
+      const isQrCode = key === 'qrCode';
       fObj = new fabricMod.Textbox(`{{${key}}}`, {
-        left: cx - 120,
-        top: cy - 18,
-        width: 240,
-        fontSize: 28,
+        left: cx - (isQrCode ? 90 : 120),
+        top: cy - (isQrCode ? 45 : 18),
+        width: isQrCode ? 180 : 240,
+        height: isQrCode ? 90 : undefined,
+        fontSize: isQrCode ? 20 : 28,
         fontFamily: 'Inter',
         fontWeight: '400',
         fill: '#1e293b',
+        textAlign: 'center',
       });
+      if (isQrCode) {
+        fObj.set({
+          text: '[QR Code]',
+          stroke: '#94a3b8',
+          strokeWidth: 1,
+          backgroundColor: '#f8fafc',
+        });
+      }
       fObj._tplKey = key;
     } else if (type === 'staticText') {
       fObj = new fabricMod.Textbox('Texto', {
@@ -732,18 +743,28 @@ function buildAPI(canvas: any, fabricMod: any): CanvasAPI {
         strokeWidth: 2,
       });
     } else if (type === 'image') {
+      const isCourseLogo = key === 'courseLogo';
+      const isCourseBanner = key === 'courseBanner';
+      const boxWidth = isCourseBanner ? 420 : isCourseLogo ? 220 : 150;
+      const boxHeight = isCourseBanner ? 140 : isCourseLogo ? 120 : 150;
       fObj = new fabricMod.Rect({
-        left: cx - 75,
-        top: cy - 75,
-        width: 150,
-        height: 150,
+        left: cx - boxWidth / 2,
+        top: cy - boxHeight / 2,
+        width: boxWidth,
+        height: boxHeight,
         fill: '#e2e8f0',
         stroke: '#cbd5e1',
         strokeWidth: 1,
+        strokeDashArray: isCourseLogo || isCourseBanner ? [8, 4] : undefined,
         rx: 4,
         ry: 4,
       });
       fObj._tplImageSrc = '';
+      fObj._tplImageFileId = null;
+      fObj._tplImageResizeMode = 'contain';
+      if (isCourseLogo || isCourseBanner) {
+        fObj._tplImagePlaceholder = true;
+      }
     }
 
     if (!fObj) return;

package/hedhog/frontend/app/certificates/models/LeftPanel.tsx.ejs

@@ -125,6 +125,20 @@ export default function LeftPanel() {
               <p className="mt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 {t('leftPanel.sections.image')}
               </p>
+              <div className="grid grid-cols-1 gap-2">
+                <ElementCard
+                  icon={<ImageIcon className="size-4" />}
+                  label="Logo do Curso"
+                  onClick={() => add('image', { key: 'courseLogo' })}
+                  dragPayload={{ type: 'image', key: 'courseLogo' }}
+                />
+                <ElementCard
+                  icon={<ImageIcon className="size-4" />}
+                  label="Banner do Curso"
+                  onClick={() => add('image', { key: 'courseBanner' })}
+                  dragPayload={{ type: 'image', key: 'courseBanner' }}
+                />
+              </div>
               <ElementCard
                 icon={<ImageIcon className="size-4" />}
                 label={t('leftPanel.elements.image')}

package/hedhog/frontend/app/certificates/models/RightPanel.tsx.ejs

@@ -14,6 +14,7 @@ import { Slider } from '@/components/ui/slider';
 import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
+import { useApp } from '@hed-hog/next-app-provider';
 import {
   ChevronDown,
   ChevronUp,
@@ -493,16 +494,200 @@ function ImageProperties({
   obj: TemplateObject;
   setProp: (p: Record<string, unknown>) => void;
 }) {
+  const { request } = useApp();
+  const isCoursePlaceholder =
+    obj.key === 'courseLogo' || obj.key === 'courseBanner';
+  const [isUploading, setIsUploading] = useState(false);
+
+  const currentFileId =
+    typeof obj.image?.file_id === 'number' && Number.isFinite(obj.image.file_id)
+      ? obj.image.file_id
+      : null;
+  const resizeMode =
+    obj.image?.resizeMode === 'cover' ||
+    obj.image?.resizeMode === 'stretch' ||
+    obj.image?.resizeMode === 'center'
+      ? obj.image.resizeMode
+      : 'contain';
+  const previewUrl = currentFileId ? `/file/open/${currentFileId}` : null;
+
+  async function handleImageUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!String(file.type || '').startsWith('image/')) {
+      toast.error('Selecione um arquivo de imagem válido.');
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    setIsUploading(true);
+
+    try {
+      const response = await request<{
+        id: number;
+        url: string;
+      }>({
+        url: '/lms/certificates/templates/background-image',
+        method: 'POST',
+        data: formData,
+      });
+
+      const newFileId = response?.data?.id;
+      if (typeof newFileId !== 'number' || !Number.isFinite(newFileId)) {
+        throw new Error('Invalid uploaded file id');
+      }
+
+      setProp({
+        _tplImageFileId: newFileId,
+        _tplImageSrc: response.data.url ?? `/file/open/${newFileId}`,
+      });
+
+      if (
+        typeof currentFileId === 'number' &&
+        Number.isFinite(currentFileId) &&
+        currentFileId !== newFileId
+      ) {
+        await request({
+          url: '/file',
+          method: 'DELETE',
+          data: { ids: [currentFileId] },
+        });
+      }
+
+      toast.success('Imagem personalizada atualizada.');
+    } catch {
+      toast.error('Não foi possível enviar a imagem.');
+    } finally {
+      setIsUploading(false);
+      e.target.value = '';
+    }
+  }
+
+  async function handleRemoveImage() {
+    if (!currentFileId) {
+      setProp({ _tplImageFileId: null, _tplImageSrc: '' });
+      toast.success('Imagem removida do certificado.');
+      return;
+    }
+
+    try {
+      await request({
+        url: '/file',
+        method: 'DELETE',
+        data: { ids: [currentFileId] },
+      });
+      setProp({ _tplImageFileId: null, _tplImageSrc: '' });
+      toast.success('Imagem removida do certificado.');
+    } catch {
+      toast.error('Não foi possível remover a imagem.');
+    }
+  }
+
   return (
-    <div className="flex flex-col gap-1.5">
-      <Label className="text-xs">Rotacao ({Math.round(obj.rotation)}deg)</Label>
-      <Slider
-        min={0}
-        max={360}
-        step={1}
-        value={[Math.round(obj.rotation)]}
-        onValueChange={([v]) => setProp({ angle: v })}
-      />
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-1.5">
+        <Label className="text-xs">
+          Rotacao ({Math.round(obj.rotation)}deg)
+        </Label>
+        <Slider
+          min={0}
+          max={360}
+          step={1}
+          value={[Math.round(obj.rotation)]}
+          onValueChange={([v]) => setProp({ angle: v })}
+        />
+      </div>
+
+      {!isCoursePlaceholder ? (
+        <div className="flex flex-col gap-1.5">
+          <Label className="text-xs">Imagem personalizada</Label>
+          <input
+            type="file"
+            accept="image/*"
+            onChange={handleImageUpload}
+            disabled={isUploading}
+            className="block w-full cursor-pointer rounded-md border border-border bg-background px-2 py-1.5 text-xs"
+          />
+          <div className="flex items-center gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="h-7 text-xs"
+              onClick={handleRemoveImage}
+              disabled={isUploading || !currentFileId}
+            >
+              Remover imagem
+            </Button>
+            {currentFileId ? (
+              <span className="text-[11px] text-muted-foreground">
+                file_id: {currentFileId}
+              </span>
+            ) : (
+              <span className="text-[11px] text-muted-foreground">
+                Sem imagem vinculada
+              </span>
+            )}
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <Label className="text-xs">Modo de redimensionamento</Label>
+            <Select
+              value={resizeMode}
+              onValueChange={(value) => setProp({ _tplImageResizeMode: value })}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="contain">
+                  Manter proporção (Contain)
+                </SelectItem>
+                <SelectItem value="cover">
+                  Manter proporção preenchendo (Crop)
+                </SelectItem>
+                <SelectItem value="stretch">
+                  Esticar para preencher (Sem proporção)
+                </SelectItem>
+                <SelectItem value="center">
+                  Tamanho original (Center)
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {previewUrl ? (
+            <div className="mt-1 overflow-hidden rounded-md border border-border bg-muted/20">
+              <img
+                src={previewUrl}
+                alt="Preview da imagem do certificado"
+                className={`h-32 w-full ${
+                  resizeMode === 'cover'
+                    ? 'object-cover'
+                    : resizeMode === 'stretch'
+                      ? 'object-fill'
+                      : resizeMode === 'center'
+                        ? 'object-none object-center'
+                        : 'object-contain'
+                }`}
+                loading="lazy"
+              />
+            </div>
+          ) : null}
+
+          <p className="text-[11px] text-muted-foreground">
+            O template salva apenas o file_id desta imagem.
+          </p>
+        </div>
+      ) : (
+        <p className="text-[11px] text-muted-foreground">
+          Este item é um placeholder de posicionamento. O conteúdo real (logo ou
+          banner) será preenchido na emissão final do certificado.
+        </p>
+      )}
     </div>
   );
 }

package/hedhog/frontend/app/certificates/models/page.tsx.ejs

@@ -37,12 +37,12 @@ import {
 } from '@/components/ui/select';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Textarea } from '@/components/ui/textarea';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
@@ -726,7 +726,11 @@ export default function ModelsPage() {
       </div>
 
       <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
-        <SheetContent
+        <ResizableSheetContent
+          sheetId="lms-certificates-models-create-template-sheet"
+          defaultWidth={560}
+          minWidth={420}
+          maxWidth={920}
           side="right"
           className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
         >
@@ -809,7 +813,7 @@ export default function ModelsPage() {
               </Button>
             </SheetFooter>
           </form>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       <Sheet
@@ -821,7 +825,13 @@ export default function ModelsPage() {
           }
         }}
       >
-        <SheetContent className="overflow-y-auto sm:max-w-xl">
+        <ResizableSheetContent
+          sheetId="lms-certificates-models-edit-template-sheet"
+          defaultWidth={640}
+          minWidth={460}
+          maxWidth={1080}
+          className="overflow-y-auto sm:max-w-xl"
+        >
           <SheetHeader>
             <SheetTitle>{t('editSheet.title')}</SheetTitle>
             <SheetDescription>{t('editSheet.description')}</SheetDescription>
@@ -906,7 +916,7 @@ export default function ModelsPage() {
               </Button>
             </SheetFooter>
           </form>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>

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

@@ -1,11 +1,11 @@
 'use client';
 
-import { PersonFormSheet } from '@/app/(app)/(libraries)/contact/person/_components/person-form-sheet';
+import { PersonFormSheet } from '@/app/(app)/(libraries)/crm/person/_components/person-form-sheet';
 import type {
   Person as ContactPerson,
   ContactTypeOption,
   DocumentTypeOption,
-} from '@/app/(app)/(libraries)/contact/person/_components/person-types';
+} from '@/app/(app)/(libraries)/crm/person/_components/person-types';
 import { LmsClassCalendar } from '@/app/(app)/(libraries)/lms/_components/lms-class-calendar';
 import { CopyButton } from '@/components/copy-button';
 import { Page, PageHeader } from '@/components/entity-list';
@@ -54,12 +54,12 @@ import {
 } from '@/components/ui/select';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Switch } from '@/components/ui/switch';
 import {
@@ -4812,7 +4812,11 @@ export default function TurmaDetalhePage() {
 
       {/* ── Sheet Aula ───────────────────────────────────────────────────────── */}
       <Sheet open={aulaSheetOpen} onOpenChange={setAulaSheetOpen}>
-        <SheetContent
+        <ResizableSheetContent
+          sheetId="lms-classes-detail-lesson-sheet"
+          defaultWidth={560}
+          minWidth={420}
+          maxWidth={920}
           side="right"
           className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
         >
@@ -5703,7 +5707,7 @@ export default function TurmaDetalhePage() {
               )}
             </TabsContent>
           </Tabs>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       <CreateLmsPersonSheet

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

@@ -75,6 +75,7 @@ interface Turma {
   curso: string;
   cursoId: number;
   instructorId?: number | null;
+  professorAvatarId?: number | null;
   primaryColor?: string | null;
   tipo: 'presencial' | 'online' | 'hibrida';
   dataInicio: string;
@@ -115,6 +116,7 @@ type ApiClass = {
   capacity: number;
   courseId: number;
   instructorId?: number | null;
+  instructorAvatarId?: number | null;
   courseTitle: string;
   enrolledCount: number;
   professor?: string | null;
@@ -218,6 +220,7 @@ function mapApiClass(item: ApiClass): Turma {
     curso: item.courseTitle,
     cursoId: item.courseId,
     instructorId: item.instructorId ?? null,
+    professorAvatarId: item.instructorAvatarId ?? null,
     primaryColor: item.primaryColor,
     tipo: toPtType(item.deliveryMode),
     dataInicio: getDateOnly(item.startDate),
@@ -247,6 +250,26 @@ const STATUS_VARIANT: Record<
   cancelada: 'destructive',
 };
 
+const STATUS_CLASS: Record<string, string> = {
+  aberta:
+    'bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-950 dark:text-emerald-400 dark:border-emerald-800',
+  em_andamento:
+    'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-400 dark:border-blue-800',
+  concluida:
+    'bg-slate-100 text-slate-600 border-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700',
+  cancelada:
+    'bg-red-100 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-400 dark:border-red-800',
+};
+
+const TIPO_CLASS: Record<string, string> = {
+  presencial:
+    'bg-sky-100 text-sky-700 border-sky-200 dark:bg-sky-950 dark:text-sky-400 dark:border-sky-800',
+  online:
+    'bg-violet-100 text-violet-700 border-violet-200 dark:bg-violet-950 dark:text-violet-400 dark:border-violet-800',
+  hibrida:
+    'bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-950 dark:text-amber-400 dark:border-amber-800',
+};
+
 const TIPO_ICON: Record<string, LucideIcon> = {
   presencial: MapPin,
   online: Monitor,
@@ -853,7 +876,9 @@ export default function TurmasPage() {
                 <motion.div key={turma.id} variants={fadeUp}>
                   <Card
                     className="group relative cursor-pointer overflow-hidden border-border/70 shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md"
-                    onDoubleClick={() => openEditSheet(turma)}
+                    onDoubleClick={() =>
+                      router.push(`/lms/classes/${turma.id}`)
+                    }
                     title={t('cards.tooltip')}
                   >
                     <div
@@ -864,13 +889,13 @@ export default function TurmasPage() {
                           : undefined
                       }
                     />
-                    <CardContent className="p-5">
-                      <div className="mb-4 flex items-start gap-3">
+                    <CardContent className="px-3 py-2">
+                      <div className="mb-2 flex items-start gap-2">
                         <CourseAvatar
                           fileId={turma.logoFileId}
                           title={turma.curso}
-                          className="size-12 rounded-xl"
-                          iconSize="size-6"
+                          className="size-9 rounded-lg"
+                          iconSize="size-5"
                         />
                         <div className="min-w-0 flex-1">
                           <div className="mb-1 flex items-start justify-between gap-2">
@@ -916,59 +941,68 @@ export default function TurmasPage() {
                               </DropdownMenuContent>
                             </DropdownMenu>
                           </div>
-                          <p className="text-xs text-muted-foreground">
+                          <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground">
                             <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px]">
                               {turma.codigo}
                             </code>
-                            <span className="mx-1.5 text-muted-foreground/50">
-                              |
-                            </span>
+                            <span className="text-muted-foreground/50">|</span>
+                            {turma.professorAvatarId ? (
+                              <img
+                                src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${turma.professorAvatarId}`}
+                                alt={turma.professor}
+                                className="size-4 rounded-full object-cover"
+                                onError={(e) => {
+                                  (e.currentTarget as HTMLImageElement).style.display = 'none';
+                                }}
+                              />
+                            ) : (
+                              <span className="inline-flex size-4 items-center justify-center rounded-full bg-muted text-[8px] font-semibold uppercase text-muted-foreground">
+                                {turma.professor
+                                  .split(' ')
+                                  .slice(0, 2)
+                                  .map((p) => p[0])
+                                  .join('')}
+                              </span>
+                            )}
                             <span>{turma.professor}</span>
-                          </p>
+                          </div>
                         </div>
                       </div>
 
-                      <div className="mb-4 flex flex-wrap items-center gap-1.5">
+                      <div className="mb-2 flex flex-wrap items-center gap-1">
                         <Badge
-                          variant={STATUS_VARIANT[turma.status]}
-                          className="text-[11px]"
+                          variant="outline"
+                          className={`text-[11px] ${STATUS_CLASS[turma.status]}`}
                         >
                           {t(`status.${turma.status}`)}
                         </Badge>
-                        <span className="inline-flex items-center gap-1 rounded-full border bg-muted px-2.5 py-0.5 text-[11px] font-medium text-foreground">
+                        <span
+                          className={`inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-[11px] font-medium ${TIPO_CLASS[turma.tipo]}`}
+                        >
                           <TipoIcon className="size-3" />
                           {t(`type.${turma.tipo}`)}
                         </span>
                       </div>
 
-                      <div className="mb-4 rounded-lg bg-muted/40 p-3">
-                        <div className="mb-2 flex items-center justify-between text-sm">
+                      <div className="mb-2 space-y-1">
+                        <div className="flex items-center justify-between text-[11px]">
                           <span className="text-muted-foreground">
                             {t('cards.occupancy')}
                           </span>
-                          <span className="font-semibold">
-                            {turma.matriculados}/{turma.vagas}
+                          <span className="font-semibold text-foreground">
+                            {turma.matriculados}/{turma.vagas} · {ocupacao}%
                           </span>
                         </div>
-                        <div className="relative h-2 w-full overflow-hidden rounded-full bg-muted">
+                        <div className="relative h-1 w-full overflow-hidden rounded-full bg-muted">
                           <div
                             className="h-full rounded-full bg-primary transition-all duration-500"
                             style={{ width: `${Math.min(ocupacao, 100)}%` }}
                           />
                         </div>
-                        <div className="mt-1.5 flex justify-between text-[11px]">
-                          <span className="text-muted-foreground">
-                            {ocupacao}% {t('cards.occupied')}
-                          </span>
-                          <span className="font-medium text-foreground">
-                            {Math.max(turma.vagas - turma.matriculados, 0)}{' '}
-                            {t('cards.freeVacancies')}
-                          </span>
-                        </div>
                       </div>
 
-                      <div className="mb-4 grid grid-cols-2 gap-2">
-                        <div className="rounded-lg border bg-background p-2.5">
+                      <div className="grid grid-cols-2 gap-1.5">
+                        <div className="rounded-lg border bg-background p-2">
                           <div className="mb-1 flex items-center gap-1.5 text-[11px] text-muted-foreground">
                             <CalendarIcon className="size-3" />{' '}
                             {t('cards.period')}
@@ -989,25 +1023,13 @@ export default function TurmasPage() {
                             )}
                           </p>
                         </div>
-                        <div className="rounded-lg border bg-background p-2.5">
+                        <div className="rounded-lg border bg-background p-2">
                           <div className="mb-1 flex items-center gap-1.5 text-[11px] text-muted-foreground">
                             <Clock className="size-3" /> {t('cards.schedule')}
                           </div>
                           <p className="text-xs font-medium">{scheduleLabel}</p>
                         </div>
                       </div>
-
-                      <div className="flex items-center justify-between rounded-lg bg-muted/40 px-3 py-2.5">
-                        <div className="flex items-center gap-1.5">
-                          <Users className="size-4 text-muted-foreground" />
-                          <span className="text-sm font-medium">
-                            {turma.matriculados}
-                          </span>
-                          <span className="text-xs text-muted-foreground">
-                            {t('cards.enrolled')}
-                          </span>
-                        </div>
-                      </div>
                     </CardContent>
                   </Card>
                 </motion.div>
@@ -1046,7 +1068,9 @@ export default function TurmasPage() {
                     <TableRow
                       key={turma.id}
                       className="cursor-pointer"
-                      onDoubleClick={() => openEditSheet(turma)}
+                      onDoubleClick={() =>
+                        router.push(`/lms/classes/${turma.id}`)
+                      }
                       title={t('cards.tooltip')}
                     >
                       <TableCell>
@@ -1075,14 +1099,16 @@ export default function TurmasPage() {
                       </TableCell>
                       <TableCell>
                         <Badge
-                          variant={STATUS_VARIANT[turma.status]}
-                          className="text-[11px]"
+                          variant="outline"
+                          className={`text-[11px] ${STATUS_CLASS[turma.status]}`}
                         >
                           {t(`status.${turma.status}`)}
                         </Badge>
                       </TableCell>
                       <TableCell>
-                        <span className="inline-flex items-center gap-1 rounded-full border bg-muted px-2 py-0.5 text-[11px] font-medium text-foreground">
+                        <span
+                          className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium ${TIPO_CLASS[turma.tipo]}`}
+                        >
                           <TipoIcon className="size-3" />
                           {t(`type.${turma.tipo}`)}
                         </span>