@hed-hog/lms 0.0.350 → 0.0.353

package/hedhog/frontend/app/_components/course-form-sheet.tsx.ejs

@@ -31,12 +31,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 { Textarea } from '@/components/ui/textarea';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
@@ -227,10 +227,16 @@ export function getCourseSheetSchema(t: (key: string) => string) {
     slug: z
       .string()
       .regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/, t('form.validation.slugPattern')),
+    code: z
+      .string()
+      .regex(/^[A-Z0-9]{2,}$/, t('form.validation.editionCodePattern'))
+      .or(z.literal(''))
+      .optional(),
     tituloComercial: z.string().optional(),
     descricao: z.string().optional(),
     nivel: z.enum(['iniciante', 'intermediario', 'avancado']).optional(),
     status: z.enum(['ativo', 'rascunho', 'arquivado']).optional(),
+    offeringType: z.enum(['on_demand', 'agendado', 'hibrido']).optional(),
     categorias: z.array(z.string()).optional(),
     operationsProjectId: z.string().optional(),
     primaryColor: z.string().optional(),
@@ -242,10 +248,12 @@ export function getCourseSheetSchema(t: (key: string) => string) {
 export type CourseSheetFormValues = {
   nomeInterno: string;
   slug: string;
+  code: string;
   tituloComercial: string;
   descricao: string;
   nivel: 'iniciante' | 'intermediario' | 'avancado';
   status: 'ativo' | 'rascunho' | 'arquivado';
+  offeringType: 'on_demand' | 'agendado' | 'hibrido';
   categorias: string[];
   operationsProjectId: string;
   primaryColor: string;
@@ -256,10 +264,12 @@ export type CourseSheetFormValues = {
 export const DEFAULT_COURSE_FORM_VALUES: CourseSheetFormValues = {
   nomeInterno: '',
   slug: '',
+  code: '',
   tituloComercial: '',
   descricao: '',
   nivel: 'iniciante',
   status: 'rascunho',
+  offeringType: 'on_demand',
   categorias: [],
   operationsProjectId: '',
   primaryColor: '#1D4ED8',
@@ -439,7 +449,11 @@ export function CourseFormSheet({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent
+      <ResizableSheetContent
+        sheetId="lms-course-form-sheet"
+        defaultWidth={560}
+        minWidth={420}
+        maxWidth={920}
         side="right"
         className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
       >
@@ -456,61 +470,80 @@ export function CourseFormSheet({
 
         <form
           onSubmit={form.handleSubmit(onSubmit)}
-          className="flex flex-1 flex-col gap-5 py-6 px-4"
+          className="flex flex-1 flex-col gap-4 py-4 px-4"
         >
-          <Field>
-            <FieldLabel htmlFor="nomeInterno">
-              {t('form.fields.internalName.label')}{' '}
-              <span className="text-destructive">*</span>
-            </FieldLabel>
-            <Input
-              id="nomeInterno"
-              placeholder={t('form.fields.internalName.placeholder')}
-              {...form.register('nomeInterno')}
-            />
-            <FieldDescription>
-              {t('form.fields.internalName.description')}
-            </FieldDescription>
-            <FieldError>
-              {form.formState.errors.nomeInterno?.message}
-            </FieldError>
-          </Field>
+          {/* Internal name + Slug */}
+          <div className="grid grid-cols-2 gap-3">
+            <Field>
+              <FieldLabel htmlFor="nomeInterno">
+                {t('form.fields.internalName.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
+              <Input
+                id="nomeInterno"
+                placeholder={t('form.fields.internalName.placeholder')}
+                {...form.register('nomeInterno')}
+              />
+              <FieldError>
+                {form.formState.errors.nomeInterno?.message}
+              </FieldError>
+            </Field>
+
+            <Field>
+              <FieldLabel htmlFor="slug">
+                {t('form.fields.slug.label')}{' '}
+                <span className="text-destructive">*</span>
+              </FieldLabel>
+              <Input
+                id="slug"
+                placeholder={t('form.fields.slug.placeholder')}
+                {...form.register('slug', {
+                  onChange: () => {
+                    slugTouchedRef.current = true;
+                  },
+                })}
+              />
+              <FieldError>{form.formState.errors.slug?.message}</FieldError>
+            </Field>
+          </div>
 
+          {/* Edition code */}
           <Field>
-            <FieldLabel htmlFor="slug">
-              {t('form.fields.slug.label')}{' '}
-              <span className="text-destructive">*</span>
+            <FieldLabel htmlFor="code">
+              {t('form.fields.code.label')}
             </FieldLabel>
             <Input
-              id="slug"
-              placeholder={t('form.fields.slug.placeholder')}
-              {...form.register('slug', {
-                onChange: () => {
-                  slugTouchedRef.current = true;
+              id="code"
+              placeholder={t('form.fields.code.placeholder')}
+              className="font-mono"
+              {...form.register('code', {
+                onChange: (e) => {
+                  const cleaned = e.target.value
+                    .toUpperCase()
+                    .replace(/[^A-Z0-9]/g, '');
+                  form.setValue('code', cleaned, { shouldValidate: true });
                 },
               })}
             />
-            <FieldDescription>
-              {t('form.fields.slug.description')}
-            </FieldDescription>
-            <FieldError>{form.formState.errors.slug?.message}</FieldError>
+            <FieldError>{form.formState.errors.code?.message}</FieldError>
           </Field>
 
+          {/* Logo */}
           <Field>
             <FieldLabel>{t('form.fields.logo.label')}</FieldLabel>
-            <div className="flex items-start gap-4">
+            <div className="flex items-center gap-3">
               {logoPreviewUrl ? (
                 <img
                   src={logoPreviewUrl}
                   alt={t('form.fields.logo.alt')}
-                  className="size-16 shrink-0 rounded-lg border object-cover"
+                  className="size-12 shrink-0 rounded-lg border object-cover"
                 />
               ) : (
-                <div className="flex size-16 shrink-0 items-center justify-center rounded-lg border border-dashed bg-muted/40">
-                  <ImageIcon className="size-6 text-muted-foreground/50" />
+                <div className="flex size-12 shrink-0 items-center justify-center rounded-lg border border-dashed bg-muted/40">
+                  <ImageIcon className="size-5 text-muted-foreground/50" />
                 </div>
               )}
-              <div className="flex flex-col gap-2">
+              <div className="flex items-center gap-2">
                 <input
                   ref={logoInputRef}
                   type="file"
@@ -547,40 +580,69 @@ export function CourseFormSheet({
                     {t('form.fields.logo.remove')}
                   </Button>
                 )}
+                {colorExtracting && (
+                  <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                    <Loader2 className="size-3 animate-spin" />
+                    Detectando cores...
+                  </span>
+                )}
               </div>
             </div>
-            <FieldDescription>
-              {t('form.fields.logo.description')}
-            </FieldDescription>
           </Field>
 
-          <Field>
-            <FieldLabel htmlFor="tituloComercial">
-              {t('form.fields.commercialTitle.label')}
-            </FieldLabel>
-            <Input
-              id="tituloComercial"
-              placeholder={t('form.fields.commercialTitle.placeholder')}
-              {...form.register('tituloComercial')}
-            />
-            <FieldError>
-              {form.formState.errors.tituloComercial?.message}
-            </FieldError>
-          </Field>
+          {/* Commercial title + Offering type */}
+          <div className="grid grid-cols-2 gap-3">
+            <Field>
+              <FieldLabel htmlFor="tituloComercial">
+                {t('form.fields.commercialTitle.label')}
+              </FieldLabel>
+              <Input
+                id="tituloComercial"
+                placeholder={t('form.fields.commercialTitle.placeholder')}
+                {...form.register('tituloComercial')}
+              />
+              <FieldError>
+                {form.formState.errors.tituloComercial?.message}
+              </FieldError>
+            </Field>
 
+            <Field>
+              <FieldLabel>Tipo do curso</FieldLabel>
+              <Controller
+                name="offeringType"
+                control={form.control}
+                render={({ field }) => (
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Selecione o tipo" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="on_demand">On Demand</SelectItem>
+                      <SelectItem value="agendado">Agendado</SelectItem>
+                      <SelectItem value="hibrido">Híbrido</SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+              <FieldError>{form.formState.errors.offeringType?.message}</FieldError>
+            </Field>
+          </div>
+
+          {/* Description */}
           <Field>
             <FieldLabel htmlFor="descricao">
               {t('form.fields.description.label')}
             </FieldLabel>
             <Textarea
               id="descricao"
-              rows={3}
+              rows={2}
               placeholder={t('form.fields.description.placeholder')}
               {...form.register('descricao')}
             />
             <FieldError>{form.formState.errors.descricao?.message}</FieldError>
           </Field>
 
+          {/* Operations project */}
           <Field>
             <FieldLabel>Projeto vinculado</FieldLabel>
             <Controller
@@ -608,16 +670,13 @@ export function CourseFormSheet({
                 />
               )}
             />
-            <FieldDescription>
-              Quando o curso estiver vinculado a um projeto, cada nova aula gera
-              uma tarefa automaticamente.
-            </FieldDescription>
             <FieldError>
               {form.formState.errors.operationsProjectId?.message}
             </FieldError>
           </Field>
 
-          <div className="grid grid-cols-2 gap-4">
+          {/* Level + Status */}
+          <div className="grid grid-cols-2 gap-3">
             <Field>
               <FieldLabel>{t('form.fields.level.label')}</FieldLabel>
               <Controller
@@ -677,6 +736,7 @@ export function CourseFormSheet({
             </Field>
           </div>
 
+          {/* Categories */}
           <Field>
             <FieldLabel>{t('form.fields.categories.label')}</FieldLabel>
             <Controller
@@ -831,14 +891,8 @@ export function CourseFormSheet({
             <FieldError>{form.formState.errors.categorias?.message}</FieldError>
           </Field>
 
-          {colorExtracting && (
-            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-              <Loader2 className="size-3 animate-spin" />
-              Detectando cores...
-            </div>
-          )}
-
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {/* Primary + Secondary colors */}
+          <div className="grid grid-cols-2 gap-3">
             <Field>
               <FieldLabel htmlFor="primaryColor">
                 {t('form.fields.primaryColor.label')}
@@ -851,7 +905,7 @@ export function CourseFormSheet({
                     <Input
                       id="primaryColor"
                       type="color"
-                      className="h-10 w-16 p-1"
+                      className="h-9 w-12 p-1"
                       value={field.value}
                       onChange={field.onChange}
                     />
@@ -880,7 +934,7 @@ export function CourseFormSheet({
                     <Input
                       id="secondaryColor"
                       type="color"
-                      className="h-10 w-16 p-1"
+                      className="h-9 w-12 p-1"
                       value={field.value}
                       onChange={field.onChange}
                     />
@@ -905,7 +959,7 @@ export function CourseFormSheet({
             </Button>
           </SheetFooter>
         </form>
-      </SheetContent>
+        </ResizableSheetContent>
     </Sheet>
   );
 }

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/achievements/page.tsx.ejs

@@ -44,10 +44,10 @@ import {
 } from '@/components/ui/select';
 import {
   Sheet,
-  SheetContent,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   Table,
@@ -370,7 +370,13 @@ function AchievementFormSheet({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
+      <ResizableSheetContent
+        sheetId="lms-achievements-form-sheet"
+        defaultWidth={672}
+        minWidth={420}
+        maxWidth={960}
+        className="w-full overflow-y-auto"
+      >
         <SheetHeader>
           <SheetTitle>
             {achievementToEdit ? t('sheet.editTitle') : t('sheet.createTitle')}
@@ -532,7 +538,7 @@ function AchievementFormSheet({
             </div>
           </form>
         </Form>
-      </SheetContent>
+      </ResizableSheetContent>
     </Sheet>
   );
 }

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

@@ -45,11 +45,11 @@ import {
 } from '@/components/ui/select';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   Table,
@@ -364,7 +364,13 @@ function WalletFormSheet({
   return (
     <>
       <Sheet open={open} onOpenChange={onOpenChange}>
-        <SheetContent className="w-full overflow-y-auto sm:max-w-4xl">
+        <ResizableSheetContent
+          sheetId="lms-bitcodes-wallet-sheet"
+          defaultWidth={896}
+          minWidth={560}
+          maxWidth={1200}
+          className="w-full overflow-y-auto"
+        >
           <SheetHeader>
             <SheetTitle>
               {walletToEdit ? t('sheet.editTitle') : t('sheet.createTitle')}
@@ -680,7 +686,7 @@ function WalletFormSheet({
               ) : null
             ) : null}
           </div>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
     </>
   );

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

@@ -21,12 +21,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 { Textarea } from '@/components/ui/textarea';
@@ -616,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"
         >
@@ -695,7 +699,7 @@ export default function IssuedCertificatesPage() {
               {t('sheet.submit')}
             </Button>
           </SheetFooter>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
     </Page>
   );