@hed-hog/lms 0.0.349 → 0.0.351

package/hedhog/frontend/app/_components/create-lms-instructor-sheet.tsx.ejs

@@ -12,12 +12,12 @@ import { Input } from '@/components/ui/input';
 import { Progress } from '@/components/ui/progress';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Switch } from '@/components/ui/switch';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -402,7 +402,11 @@ export function CreateLmsInstructorSheet({
 
   return (
     <Sheet open={open} onOpenChange={handleSheetOpenChange}>
-      <SheetContent
+      <ResizableSheetContent
+        sheetId="lms-create-instructor-sheet"
+        defaultWidth={560}
+        minWidth={420}
+        maxWidth={920}
         side="right"
         className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
       >
@@ -413,7 +417,6 @@ export function CreateLmsInstructorSheet({
 
         {isEditing && loadingInstructorDetails ? (
           <div className="flex items-center gap-2 px-4 py-10 text-sm text-muted-foreground">
-            <Loader2 className="size-4 animate-spin" />
             Carregando dados do instrutor...
           </div>
         ) : (
@@ -585,7 +588,7 @@ export function CreateLmsInstructorSheet({
             </SheetFooter>
           </form>
         )}
-      </SheetContent>
+      </ResizableSheetContent>
     </Sheet>
   );
 }

package/hedhog/frontend/app/_components/create-lms-person-sheet.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 {
   ContactTypeOption,
   DocumentTypeOption,
   Person,
-} from '@/app/(app)/(libraries)/contact/person/_components/person-types';
+} from '@/app/(app)/(libraries)/crm/person/_components/person-types';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useTranslations } from 'next-intl';
 import { useMemo } from 'react';

package/hedhog/frontend/app/_components/create-lms-student-person-sheet.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 {
   ContactTypeOption,
   DocumentTypeOption,
   Person,
-} from '@/app/(app)/(libraries)/contact/person/_components/person-types';
+} from '@/app/(app)/(libraries)/crm/person/_components/person-types';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useTranslations } from 'next-intl';
 

package/hedhog/frontend/app/_lib/editor/templateSerializer.ts.ejs

@@ -105,7 +105,20 @@ export function fabricObjToFull(fObj: any): TemplateObject {
 
   /* image */
   if (type === 'image') {
-    obj.image = { src: fObj._tplImageSrc ?? '' };
+    const rawFileId = fObj._tplImageFileId;
+    const rawResizeMode = fObj._tplImageResizeMode;
+    const resizeMode =
+      rawResizeMode === 'contain' ||
+      rawResizeMode === 'cover' ||
+      rawResizeMode === 'stretch' ||
+      rawResizeMode === 'center'
+        ? rawResizeMode
+        : 'contain';
+    const fileId =
+      typeof rawFileId === 'number' && Number.isFinite(rawFileId)
+        ? rawFileId
+        : null;
+    obj.image = { file_id: fileId, resizeMode };
   }
 
   return obj;
@@ -219,17 +232,34 @@ export function createFabricFromTemplate(
         : 2,
     });
   } else if (tObj.type === 'image') {
+    const isCoursePlaceholder =
+      tObj.key === 'courseLogo' || tObj.key === 'courseBanner';
     fObj = new fabric.Rect({
       ...common,
-      width: w || 150,
-      height: h || 150,
+      width: w || (tObj.key === 'courseBanner' ? 420 : 150),
+      height: h || (tObj.key === 'courseBanner' ? 140 : 150),
       fill: '#e2e8f0',
       stroke: '#cbd5e1',
       strokeWidth: 1,
+      strokeDashArray: isCoursePlaceholder ? [8, 4] : undefined,
       rx: 4,
       ry: 4,
     });
-    fObj._tplImageSrc = tObj.image?.src ?? '';
+    fObj._tplImageFileId =
+      typeof tObj.image?.file_id === 'number' ? tObj.image.file_id : null;
+    fObj._tplImageResizeMode =
+      tObj.image?.resizeMode === 'cover' ||
+      tObj.image?.resizeMode === 'stretch' ||
+      tObj.image?.resizeMode === 'center'
+        ? tObj.image.resizeMode
+        : 'contain';
+    fObj._tplImageSrc =
+      typeof tObj.image?.file_id === 'number' && tObj.image.file_id > 0
+        ? `/file/open/${tObj.image.file_id}`
+        : '';
+    if (isCoursePlaceholder) {
+      fObj._tplImagePlaceholder = true;
+    }
   }
 
   if (fObj) {

package/hedhog/frontend/app/_lib/editor/types.ts.ejs

@@ -30,9 +30,11 @@ export interface TemplateObject {
     stroke?: { color: string; widthPct: number };
     shadow?: { xPct: number; yPct: number; blurPct: number; color: string };
   };
-  image?: { src: string };
+  image?: { file_id: number | null; resizeMode?: ImageResizeMode };
 }
 
+export type ImageResizeMode = 'contain' | 'cover' | 'stretch' | 'center';
+
 export interface Template {
   version: 1;
   name: string;
@@ -53,6 +55,10 @@ export const FIELD_KEYS = [
   'endDate',
   'workloadHours',
   'certificateId',
+  'enrollmentDate',
+  'issueDate',
+  'instructorName',
+  'qrCode',
 ] as const;
 
 export type FieldKey = (typeof FIELD_KEYS)[number];
@@ -64,6 +70,10 @@ export const FIELD_LABELS: Record<FieldKey, string> = {
   endDate: 'Data Fim',
   workloadHours: 'Carga Horária',
   certificateId: 'ID Certificado',
+  enrollmentDate: 'Data de Matrícula',
+  issueDate: 'Data de Emissão',
+  instructorName: 'Nome do Instrutor',
+  qrCode: 'QR Code',
 };
 
 export const FONT_FAMILIES = ['Inter', 'Montserrat', 'Roboto'] as const;
@@ -79,15 +89,30 @@ export function createDefaultTemplate(): Template {
 }
 
 export function getObjectLabel(obj: TemplateObject): string {
+  const fieldLabelMap: Record<string, string> = {
+    studentName: 'Nome do Aluno',
+    courseName: 'Nome do Curso',
+    startDate: 'Data Início',
+    endDate: 'Data Fim',
+    workloadHours: 'Carga Horária',
+    certificateId: 'ID Certificado',
+    enrollmentDate: 'Data de Matrícula',
+    issueDate: 'Data de Emissão',
+    instructorName: 'Nome do Instrutor',
+    qrCode: 'QR Code',
+    courseLogo: 'Logo do Curso',
+    courseBanner: 'Banner do Curso',
+  };
+
   switch (obj.type) {
     case 'field':
-      return `Field: ${obj.key ?? '?'}`;
+      return `Field: ${fieldLabelMap[obj.key ?? ''] ?? obj.key ?? '?'}`;
     case 'staticText':
       return `Text: ${(obj.text ?? 'Texto').slice(0, 20)}`;
     case 'shape':
       return obj.shape === 'line' ? 'Line' : 'Rect';
     case 'image':
-      return 'Image';
+      return obj.key ? `Image: ${fieldLabelMap[obj.key] ?? obj.key}` : 'Image';
     default:
       return 'Object';
   }

package/hedhog/frontend/app/_lib/hooks/use-lms-realtime-refresh.ts.ejs

@@ -0,0 +1,58 @@
+import { useQuery } from '@hed-hog/next-app-provider';
+import { useEffect, useRef } from 'react';
+
+export type RequestFn = (input: {
+  url: string;
+  method: string;
+  data?: unknown;
+}) => Promise<{ data: unknown }>;
+
+type LmsRealtimeCursorResponse = {
+  cursor: number;
+  updatedAt: string | null;
+};
+
+async function fetchLms<T>(request: RequestFn, url: string): Promise<T> {
+  const response = await request({ url, method: 'GET' });
+  return response.data as T;
+}
+
+export function useLmsRealtimeRefresh({
+  request,
+  enabled = true,
+  pollIntervalMs = 5000,
+  onRefresh,
+}: {
+  request: RequestFn;
+  enabled?: boolean;
+  pollIntervalMs?: number;
+  onRefresh: () => void | Promise<void>;
+}) {
+  const lastCursorRef = useRef<number | null>(null);
+
+  const { data } = useQuery<LmsRealtimeCursorResponse>({
+    queryKey: ['lms-realtime-cursor'],
+    queryFn: () => fetchLms<LmsRealtimeCursorResponse>(request, '/lms/realtime/cursor'),
+    enabled,
+    refetchInterval: enabled ? pollIntervalMs : false,
+    refetchIntervalInBackground: true,
+    placeholderData: (previous) => previous,
+  });
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const cursor = data?.cursor;
+    if (typeof cursor !== 'number') return;
+
+    if (lastCursorRef.current === null) {
+      lastCursorRef.current = cursor;
+      return;
+    }
+
+    if (cursor !== lastCursorRef.current) {
+      lastCursorRef.current = cursor;
+      void onRefresh();
+    }
+  }, [data?.cursor, enabled, onRefresh]);
+}