@hed-hog/lms 0.0.349 → 0.0.351

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

@@ -21,14 +21,16 @@ 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 { Textarea } from '@/components/ui/textarea';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   Award,
@@ -36,6 +38,7 @@ import {
   ExternalLink,
   FileEdit,
   FilePlus2,
+  Globe,
   Loader2,
   Shapes,
   UserRound,
@@ -43,7 +46,6 @@ import {
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
-import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { toast } from 'sonner';
 
 type IssuedCertificate = {
@@ -61,6 +63,7 @@ type IssuedCertificate = {
   finalScore: number | null;
   verificationCode: string;
   verificationUrl: string | null;
+  publicAccess: boolean;
   pdfUrl: string | null;
   sourceTitle: string;
   primaryColor: string | null;
@@ -111,6 +114,9 @@ export default function IssuedCertificatesPage() {
   });
   const [isTemplateSheetOpen, setIsTemplateSheetOpen] = useState(false);
   const [isCreatingTemplate, setIsCreatingTemplate] = useState(false);
+  const [isUpdatingPublicAccess, setIsUpdatingPublicAccess] = useState<
+    Record<number, boolean>
+  >({});
   const [templateName, setTemplateName] = useState('');
   const [templateDescription, setTemplateDescription] = useState('');
   const [templateStatus, setTemplateStatus] =
@@ -120,6 +126,7 @@ export default function IssuedCertificatesPage() {
     data: certificatesResponse,
     isLoading,
     isFetching,
+    refetch,
   } = useQuery<ApiIssuedCertificatesResponse>({
     queryKey: [
       'lms-issued-certificates',
@@ -255,6 +262,32 @@ export default function IssuedCertificatesPage() {
     }
   }
 
+  async function togglePublicAccess(certificate: IssuedCertificate) {
+    setIsUpdatingPublicAccess((prev) => ({ ...prev, [certificate.id]: true }));
+
+    try {
+      await request({
+        url: `/lms/certificates/issued/${certificate.id}/public-access`,
+        method: 'PATCH',
+        data: { publicAccess: !certificate.publicAccess },
+      });
+
+      toast.success(
+        !certificate.publicAccess
+          ? t('messages.publicAccessEnabled')
+          : t('messages.publicAccessDisabled')
+      );
+      await refetch();
+    } catch {
+      toast.error(t('messages.publicAccessError'));
+    } finally {
+      setIsUpdatingPublicAccess((prev) => ({
+        ...prev,
+        [certificate.id]: false,
+      }));
+    }
+  }
+
   function formatDate(value: string) {
     const parsed = new Date(value);
 
@@ -432,6 +465,14 @@ export default function IssuedCertificatesPage() {
                     {formatTypeLabel(certificate.certificateType)}
                   </Badge>
                   <Badge variant="secondary">#{certificate.id}</Badge>
+                  <Badge
+                    variant={certificate.publicAccess ? 'default' : 'outline'}
+                  >
+                    <Globe className="mr-1 size-3.5" />
+                    {certificate.publicAccess
+                      ? t('cards.publicAccess.enabled')
+                      : t('cards.publicAccess.disabled')}
+                  </Badge>
                 </div>
 
                 <div className="space-y-1">
@@ -452,6 +493,24 @@ export default function IssuedCertificatesPage() {
                   </p>
                 </div>
 
+                <div className="flex items-center justify-between rounded-xl border bg-background p-3">
+                  <div>
+                    <p className="text-xs text-muted-foreground">
+                      {t('cards.publicAccess.label')}
+                    </p>
+                    <p className="text-sm font-medium text-foreground">
+                      {certificate.publicAccess
+                        ? t('cards.publicAccess.enabled')
+                        : t('cards.publicAccess.disabled')}
+                    </p>
+                  </div>
+                  <Switch
+                    checked={certificate.publicAccess}
+                    disabled={Boolean(isUpdatingPublicAccess[certificate.id])}
+                    onCheckedChange={() => togglePublicAccess(certificate)}
+                  />
+                </div>
+
                 <div className="grid grid-cols-2 gap-3">
                   <div className="rounded-xl border bg-background p-3">
                     <p className="mb-1 text-xs text-muted-foreground">
@@ -521,7 +580,7 @@ export default function IssuedCertificatesPage() {
                     </Button>
                   ) : null}
 
-                  {certificate.verificationUrl ? (
+                  {certificate.verificationUrl && certificate.publicAccess ? (
                     <Button
                       type="button"
                       variant="ghost"
@@ -557,7 +616,11 @@ export default function IssuedCertificatesPage() {
       ) : null}
 
       <Sheet open={isTemplateSheetOpen} onOpenChange={setIsTemplateSheetOpen}>
-        <SheetContent
+        <ResizableSheetContent
+          sheetId="lms-certificates-issued-create-template-sheet"
+          defaultWidth={560}
+          minWidth={420}
+          maxWidth={920}
           side="right"
           className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
         >
@@ -636,7 +699,7 @@ export default function IssuedCertificatesPage() {
               {t('sheet.submit')}
             </Button>
           </SheetFooter>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
     </Page>
   );

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 {
@@ -522,6 +522,7 @@ type ApiCourseDetail = {
   primaryColor?: string | null;
   secondaryColor?: string | null;
   logoFileId?: number | null;
+  operationsProjectId?: number | null;
 };
 
 type ApiCourseCategoryList = {
@@ -1620,6 +1621,9 @@ export default function TurmaDetalhePage() {
       nivel: toCourseFormLevel(courseDetail.level),
       status: toCourseFormStatus(courseDetail.status),
       categorias: courseDetail.categories ?? [],
+      operationsProjectId: courseDetail.operationsProjectId
+        ? String(courseDetail.operationsProjectId)
+        : '',
       primaryColor: courseDetail.primaryColor ?? '#1D4ED8',
       secondaryColor: courseDetail.secondaryColor ?? '#111827',
       logoFileId: courseDetail.logoFileId ?? null,
@@ -1646,6 +1650,9 @@ export default function TurmaDetalhePage() {
           primaryContrastColor: getContrastColorCourse(data.primaryColor),
           secondaryColor: data.secondaryColor,
           secondaryContrastColor: getContrastColorCourse(data.secondaryColor),
+          operationsProjectId: data.operationsProjectId
+            ? Number(data.operationsProjectId)
+            : null,
           logoFileId: data.logoFileId ?? null,
         },
       });
@@ -4805,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"
         >
@@ -5696,7 +5707,7 @@ export default function TurmaDetalhePage() {
               )}
             </TabsContent>
           </Tabs>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       <CreateLmsPersonSheet