@hed-hog/lms 0.0.350 → 0.0.353

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

@@ -33,12 +33,12 @@ import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
 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 {
   Table,
@@ -59,8 +59,10 @@ import {
   Award,
   BookOpen,
   Eye,
+  Layers,
   Loader2,
   MoreHorizontal,
+  Paperclip,
   Pencil,
   Plus,
   Star,
@@ -89,6 +91,7 @@ const API_COURSES_CACHE_KEY = 'lms:courses:api-cache';
 interface Curso {
   id: number;
   slug: string;
+  code?: string | null;
   nomeInterno: string;
   tituloComercial: string;
   descricao: string;
@@ -96,11 +99,15 @@ interface Curso {
   secondaryColor?: string | null;
   nivel: 'iniciante' | 'intermediario' | 'avancado';
   status: 'ativo' | 'rascunho' | 'arquivado';
+  tipoCurso: 'on_demand' | 'agendado' | 'hibrido';
   categorias: string[];
   destaque: boolean;
   certificado: boolean;
   listado: boolean;
   alunosInscritos: number;
+  quantidadeSessoes: number;
+  quantidadeAulas: number;
+  quantidadeRecursos: number;
   criadoEm: string;
   logoFileId?: number | null;
   operationsProjectId?: number | null;
@@ -110,6 +117,7 @@ type ApiCourse = {
   id: number;
   name: string;
   slug: string;
+  code?: string | null;
   title: string;
   description: string;
   primaryColor?: string | null;
@@ -118,11 +126,15 @@ type ApiCourse = {
   secondaryContrastColor?: string | null;
   level: 'beginner' | 'intermediate' | 'advanced';
   status: 'draft' | 'published' | 'archived';
+  offeringType?: 'on_demand' | 'scheduled' | 'blended' | null;
   categories: string[];
   isFeatured: boolean;
   hasCertificate: boolean;
   isListed: boolean;
   enrollmentCount: number;
+  moduleCount: number;
+  lessonCount: number;
+  resourceCount: number;
   createdAt: string;
   logoFileId?: number | null;
   operationsProjectId?: number | null;
@@ -192,6 +204,12 @@ function toPtLevel(level?: string | null): CourseSheetFormValues['nivel'] {
   return 'iniciante';
 }
 
+function toPtOfferingType(type?: string | null): Curso['tipoCurso'] {
+  if (type === 'scheduled') return 'agendado';
+  if (type === 'blended') return 'hibrido';
+  return 'on_demand';
+}
+
 function toPtStatus(status?: string | null): CourseSheetFormValues['status'] {
   const normalizedStatus = normalizeEnumValue(status);
 
@@ -216,6 +234,7 @@ function mapApiCourse(course: ApiCourse): Curso {
   return {
     id: course.id,
     slug: course.slug,
+    code: course.code ?? null,
     nomeInterno: course.name ?? '',
     tituloComercial: course.title,
     descricao: course.description ?? '',
@@ -223,11 +242,15 @@ function mapApiCourse(course: ApiCourse): Curso {
     secondaryColor: course.secondaryColor ?? null,
     nivel: toPtLevel(course.level),
     status: toPtStatus(course.status),
+    tipoCurso: toPtOfferingType(course.offeringType),
     categorias: course.categories ?? [],
     destaque: course.isFeatured,
     certificado: course.hasCertificate,
     listado: course.isListed,
     alunosInscritos: course.enrollmentCount ?? 0,
+    quantidadeSessoes: course.moduleCount ?? 0,
+    quantidadeAulas: course.lessonCount ?? 0,
+    quantidadeRecursos: course.resourceCount ?? 0,
     criadoEm: course.createdAt ?? '',
     logoFileId: course.logoFileId ?? null,
     operationsProjectId: course.operationsProjectId ?? null,
@@ -246,6 +269,12 @@ function toApiStatus(status: CourseSheetFormValues['status']) {
   return 'archived';
 }
 
+function toApiOfferingType(type: CourseSheetFormValues['offeringType']) {
+  if (type === 'agendado') return 'scheduled';
+  if (type === 'hibrido') return 'blended';
+  return 'on_demand';
+}
+
 function getContrastColor(hex: string) {
   const cleaned = hex.replace('#', '');
   if (cleaned.length !== 6) return '#FFFFFF';
@@ -272,6 +301,18 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
   arquivado: 'outline',
 };
 
+const OFFERING_TYPE_LABEL: Record<string, string> = {
+  on_demand: 'On Demand',
+  agendado: 'Agendado',
+  hibrido: 'Híbrido',
+};
+
+const OFFERING_TYPE_COLOR: Record<string, string> = {
+  on_demand: 'bg-violet-50 text-violet-700 border-violet-200',
+  agendado: 'bg-blue-50 text-blue-700 border-blue-200',
+  hibrido: 'bg-teal-50 text-teal-700 border-teal-200',
+};
+
 const PAGE_SIZES = [6, 12, 24] as const;
 
 // ── Seed Data ─────────────────────────────────────────────────────────────────
@@ -505,6 +546,7 @@ export default function CursosPage() {
       status:
         (watchedFormValues.status as Curso['status'] | undefined) ??
         editingCurso.status,
+      tipoCurso: watchedFormValues.offeringType ?? editingCurso.tipoCurso,
       categorias: watchedFormValues.categorias ?? editingCurso.categorias,
     } satisfies Curso;
   }, [editingCurso, sheetOpen, watchedFormValues]);
@@ -601,12 +643,14 @@ export default function CursosPage() {
     form.reset({
       nomeInterno: curso.nomeInterno,
       slug: curso.slug,
+      code: curso.code || '',
       tituloComercial: curso.tituloComercial,
       descricao: curso.descricao,
       primaryColor: curso.primaryColor || '#1D4ED8',
       secondaryColor: curso.secondaryColor || '#111827',
       nivel: curso.nivel,
       status: curso.status,
+      offeringType: curso.tipoCurso,
       categorias: curso.categorias,
       operationsProjectId: curso.operationsProjectId
         ? String(curso.operationsProjectId)
@@ -622,10 +666,12 @@ export default function CursosPage() {
       const payload = {
         name: data.nomeInterno.trim(),
         slug: data.slug.trim().toLowerCase(),
+        code: data.code?.trim() || undefined,
         title: data.tituloComercial,
         description: data.descricao,
         level: toApiLevel(data.nivel),
         status: toApiStatus(data.status),
+        offeringType: toApiOfferingType(data.offeringType),
         categorySlugs: data.categorias,
         primaryColor: data.primaryColor,
         primaryContrastColor: getContrastColor(data.primaryColor),
@@ -1032,17 +1078,21 @@ export default function CursosPage() {
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
             {Array.from({ length: 6 }).map((_, i) => (
               <Card key={i} className="overflow-hidden">
-                <CardContent className="p-5">
-                  <div className="mb-3 flex items-start justify-between">
-                    <Skeleton className="h-5 w-20 rounded-full" />
-                    <Skeleton className="size-8 rounded-md" />
+                <CardContent className="p-3">
+                  <div className="flex items-start gap-2.5">
+                    <Skeleton className="size-10 shrink-0 rounded-lg" />
+                    <div className="flex-1 space-y-2">
+                      <Skeleton className="h-4 w-3/4" />
+                      <div className="flex gap-1.5">
+                        <Skeleton className="h-4 w-16 rounded-full" />
+                        <Skeleton className="h-4 w-14 rounded-full" />
+                      </div>
+                    </div>
                   </div>
-                  <Skeleton className="mb-1.5 h-5 w-3/4" />
-                  <Skeleton className="mb-4 h-4 w-full" />
-                  <Skeleton className="mb-4 h-4 w-2/3" />
-                  <div className="flex gap-2">
-                    <Skeleton className="h-6 w-16 rounded-full" />
-                    <Skeleton className="h-6 w-20 rounded-full" />
+                  <div className="mt-3 flex gap-4 border-t border-border/50 pt-2.5">
+                    <Skeleton className="h-3.5 w-12" />
+                    <Skeleton className="h-3.5 w-14" />
+                    <Skeleton className="h-3.5 w-10" />
                   </div>
                 </CardContent>
               </Card>
@@ -1120,7 +1170,6 @@ export default function CursosPage() {
               animate="show"
             >
               {paginatedCursos.map((curso) => {
-                const nivelColor = NIVEL_COLOR[curso.nivel];
                 const statusVariant = STATUS_VARIANT[curso.status];
                 const isSelected = selectedIds.has(curso.id);
 
@@ -1132,7 +1181,9 @@ export default function CursosPage() {
                   >
                     <Card
                       className={`group relative flex h-full cursor-pointer flex-col overflow-hidden border-border/70 shadow-sm transition-all duration-200 hover:border-border hover:shadow-md ${isSelected ? 'ring-2 ring-primary ring-offset-2' : ''}`}
-                      onDoubleClick={() => openEditSheet(curso)}
+                      onDoubleClick={() =>
+                        router.push(`/lms/courses/${curso.id}`)
+                      }
                       title={t('cards.tooltip')}
                     >
                       <div
@@ -1157,17 +1208,17 @@ export default function CursosPage() {
                         />
                       </div>
 
-                      <CardContent className="flex h-full flex-col p-4">
-                        <div className="mb-3 flex items-start gap-3">
+                      <CardContent className="flex flex-col p-3">
+                        <div className="flex items-start gap-2.5">
                           <CourseAvatar
                             fileId={curso.logoFileId}
                             title={curso.nomeInterno}
-                            className="size-12 rounded-xl"
-                            iconSize="size-6"
+                            className="size-10 shrink-0 rounded-lg"
+                            iconSize="size-5"
                           />
                           <div className="min-w-0 flex-1">
-                            <div className="mb-1.5 flex items-start justify-between gap-2">
-                              <h3 className="line-clamp-2 font-semibold leading-snug text-foreground">
+                            <div className="flex items-start justify-between gap-1">
+                              <h3 className="line-clamp-1 text-sm font-semibold leading-snug text-foreground">
                                 {curso.nomeInterno}
                               </h3>
                               <DropdownMenu>
@@ -1175,11 +1226,11 @@ export default function CursosPage() {
                                   <Button
                                     variant="ghost"
                                     size="icon"
-                                    className="size-8 shrink-0 -mr-2 -mt-1"
+                                    className="-mr-1.5 -mt-0.5 size-7 shrink-0"
                                     onClick={(e) => e.stopPropagation()}
                                     aria-label={t('table.actions.label')}
                                   >
-                                    <MoreHorizontal className="size-4" />
+                                    <MoreHorizontal className="size-3.5" />
                                   </Button>
                                 </DropdownMenuTrigger>
                                 <DropdownMenuContent
@@ -1212,76 +1263,39 @@ export default function CursosPage() {
                                 </DropdownMenuContent>
                               </DropdownMenu>
                             </div>
-                            <p className="text-xs text-muted-foreground">
-                              <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px]">
-                                {curso.slug}
-                              </code>
-                              <span className="mx-1.5 text-muted-foreground/50">
-                                |
+
+                            <div className="mt-1.5 flex flex-wrap items-center gap-1">
+                              <span
+                                className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-medium ${OFFERING_TYPE_COLOR[curso.tipoCurso]}`}
+                              >
+                                {OFFERING_TYPE_LABEL[curso.tipoCurso]}
                               </span>
-                              <span>{curso.tituloComercial}</span>
-                            </p>
+                              <Badge
+                                variant={statusVariant}
+                                className="rounded-full px-2 py-0.5 text-[10px]"
+                              >
+                                {getStatusLabel(curso)}
+                              </Badge>
+                            </div>
                           </div>
                         </div>
 
-                        <div className="mb-3 flex flex-wrap items-center gap-1.5">
-                          <span
-                            className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-[11px] font-medium ${nivelColor}`}
-                          >
-                            {getLevelLabel(curso)}
+                        <div className="mt-3 flex items-center gap-3 border-t border-border/50 pt-2.5 text-xs text-muted-foreground">
+                          <span className="flex items-center gap-1">
+                            <Layers className="size-3.5 shrink-0" />
+                            <span className="font-medium text-foreground">{curso.quantidadeSessoes}</span>
+                            {' '}sess.
+                          </span>
+                          <span className="flex items-center gap-1">
+                            <BookOpen className="size-3.5 shrink-0" />
+                            <span className="font-medium text-foreground">{curso.quantidadeAulas}</span>
+                            {' '}aulas
+                          </span>
+                          <span className="flex items-center gap-1">
+                            <Paperclip className="size-3.5 shrink-0" />
+                            <span className="font-medium text-foreground">{curso.quantidadeRecursos}</span>
+                            {' '}rec.
                           </span>
-                          <Badge
-                            variant={statusVariant}
-                            className="text-[11px]"
-                          >
-                            {getStatusLabel(curso)}
-                          </Badge>
-                          {curso.destaque && (
-                            <span className="inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-[11px] font-medium text-amber-700">
-                              <Star className="size-3 fill-amber-400 text-amber-400" />{' '}
-                              {t('form.flags.featured.label')}
-                            </span>
-                          )}
-                        </div>
-
-                        <p className="mb-4 line-clamp-2 text-sm leading-relaxed text-muted-foreground">
-                          {curso.descricao}
-                        </p>
-
-                        <div className="mb-4 flex flex-wrap gap-1.5">
-                          {curso.categorias.slice(0, 3).map((cat) => (
-                            <span
-                              key={cat}
-                              className="rounded-md bg-muted/80 px-2 py-0.5 text-[11px] font-medium text-muted-foreground"
-                            >
-                              {categoryLabelBySlug[cat] || cat}
-                            </span>
-                          ))}
-                          {curso.categorias.length > 3 && (
-                            <span className="rounded-md bg-muted/60 px-2 py-0.5 text-[11px] text-muted-foreground">
-                              +{curso.categorias.length - 3}
-                            </span>
-                          )}
-                        </div>
-
-                        <div className="mt-auto 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">
-                              {curso.alunosInscritos.toLocaleString('pt-BR')}
-                            </span>
-                            <span className="text-xs text-muted-foreground">
-                              {t('cards.studentsLabel')}
-                            </span>
-                          </div>
-                          {curso.certificado && (
-                            <div className="flex items-center gap-1.5">
-                              <Award className="size-4 text-foreground" />
-                              <span className="text-xs font-medium">
-                                {t('form.flags.certificate.label')}
-                              </span>
-                            </div>
-                          )}
                         </div>
                       </CardContent>
                     </Card>
@@ -1318,7 +1332,9 @@ export default function CursosPage() {
                         key={curso.id}
                         className="cursor-pointer"
                         data-state={isSelected ? 'selected' : undefined}
-                        onDoubleClick={() => openEditSheet(curso)}
+                        onDoubleClick={() =>
+                          router.push(`/lms/courses/${curso.id}`)
+                        }
                         title={t('cards.tooltip')}
                       >
                         <TableCell onClick={(e) => e.stopPropagation()}>
@@ -1498,7 +1514,14 @@ export default function CursosPage() {
           }
         }}
       >
-        <SheetContent side="right" className="w-full sm:max-w-md">
+        <ResizableSheetContent
+          sheetId="lms-courses-create-category-sheet"
+          defaultWidth={520}
+          minWidth={400}
+          maxWidth={860}
+          side="right"
+          className="w-full sm:max-w-md"
+        >
           <SheetHeader>
             <SheetTitle>{t('form.fields.categories.createAction')}</SheetTitle>
             <SheetDescription>
@@ -1555,7 +1578,7 @@ export default function CursosPage() {
               )}
             </Button>
           </SheetFooter>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       {/* ── Delete dialog ────────────────────���────────────────────────────── */}

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

@@ -101,7 +101,7 @@ function CrmTab({
           <Button
             variant="outline"
             size="sm"
-            onClick={() => router.push('/contact/accounts')}
+            onClick={() => router.push('/crm/accounts')}
             className="shrink-0"
           >
             <ExternalLink className="mr-2 h-4 w-4" />

package/hedhog/frontend/app/enterprise/_components/enterprise-admin-create-sheet.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 { useApp } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Eye, EyeOff, Loader2, RefreshCw } from 'lucide-react';
@@ -165,7 +165,14 @@ export function EnterpriseAdminCreateSheet({
 
   return (
     <Sheet open={open} onOpenChange={handleOpenChange}>
-      <SheetContent side="right" className="flex flex-col gap-0 sm:max-w-md">
+      <ResizableSheetContent
+        sheetId="lms-enterprise-admin-create-sheet"
+        defaultWidth={520}
+        minWidth={400}
+        maxWidth={860}
+        side="right"
+        className="flex flex-col gap-0 sm:max-w-md"
+      >
         <SheetHeader className="border-b px-6 py-4">
           <SheetTitle>New administrator</SheetTitle>
           <SheetDescription>
@@ -318,7 +325,7 @@ export function EnterpriseAdminCreateSheet({
             </SheetFooter>
           </form>
         </Form>
-      </SheetContent>
+      </ResizableSheetContent>
     </Sheet>
   );
 }

package/hedhog/frontend/app/enterprise/_components/enterprise-detail-sheet.tsx.ejs

@@ -17,11 +17,11 @@ import { Input } from '@/components/ui/input';
 import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useApp } from '@hed-hog/next-app-provider';
 import {
@@ -274,9 +274,13 @@ export function EnterpriseDetailSheet({
   return (
     <>
       <Sheet open={open} onOpenChange={onOpenChange}>
-        <SheetContent
+        <ResizableSheetContent
+          sheetId="lms-enterprise-detail-sheet"
+          defaultWidth={1120}
+          minWidth={700}
+          maxWidth={1440}
           side="right"
-          className="flex w-full flex-col gap-0 overflow-y-auto p-0 sm:max-w-[95vw] lg:max-w-6xl"
+          className="flex w-full flex-col gap-0 overflow-y-auto p-0"
         >
           {currentAccount && (
             <>
@@ -612,7 +616,7 @@ export function EnterpriseDetailSheet({
               </div>
             </>
           )}
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       {/* ── Delete Confirmation Dialog ── */}

package/hedhog/frontend/app/enterprise/_components/enterprise-person-edit-sheet.tsx.ejs

@@ -2,12 +2,12 @@
 
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useMemo } from 'react';
-import { PersonFormSheet } from '../../../contact/person/_components/person-form-sheet';
+import { PersonFormSheet } from '../../../crm/person/_components/person-form-sheet';
 import type {
   ContactTypeOption,
   DocumentTypeOption,
   Person,
-} from '../../../contact/person/_components/person-types';
+} from '../../../crm/person/_components/person-types';
 
 export interface EnterprisePersonEditSheetProps {
   open: boolean;

package/hedhog/frontend/app/enterprise/_components/enterprise-sheet.tsx.ejs

@@ -20,11 +20,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 { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import { useApp } from '@hed-hog/next-app-provider';
@@ -34,7 +34,7 @@ import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
-import { PersonPicker } from '../../../contact/_components/person-picker';
+import { PersonPicker } from '../../../crm/_components/person-picker';
 import { EnterprisePersonEditSheet } from './enterprise-person-edit-sheet';
 import type { EnterpriseAccount } from './enterprise-types';
 
@@ -187,7 +187,13 @@ export function EnterpriseSheet({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full overflow-y-auto sm:max-w-lg">
+      <ResizableSheetContent
+        sheetId="lms-enterprise-account-sheet"
+        defaultWidth={560}
+        minWidth={420}
+        maxWidth={920}
+        className="w-full overflow-y-auto sm:max-w-lg"
+      >
         <SheetHeader>
           <SheetTitle>
             {isEditing ? t('editTitle') : t('createTitle')}
@@ -414,7 +420,7 @@ export function EnterpriseSheet({
             setSelectedCompanyLabel(person.name ?? '');
           }}
         />
-      </SheetContent>
+      </ResizableSheetContent>
     </Sheet>
   );
 }

package/hedhog/frontend/app/enterprise/_components/enterprise-student-create-sheet.tsx.ejs

@@ -13,12 +13,12 @@ import {
 import { Input } from '@/components/ui/input';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { useApp } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader2 } from 'lucide-react';
@@ -101,7 +101,14 @@ export function EnterpriseStudentCreateSheet({
 
   return (
     <Sheet open={open} onOpenChange={handleOpenChange}>
-      <SheetContent side="right" className="flex flex-col gap-0 sm:max-w-md">
+      <ResizableSheetContent
+        sheetId="lms-enterprise-student-create-sheet"
+        defaultWidth={520}
+        minWidth={400}
+        maxWidth={860}
+        side="right"
+        className="flex flex-col gap-0 sm:max-w-md"
+      >
         <SheetHeader className="border-b px-6 py-4">
           <SheetTitle>New student (person)</SheetTitle>
           <SheetDescription>
@@ -167,7 +174,7 @@ export function EnterpriseStudentCreateSheet({
             </SheetFooter>
           </form>
         </Form>
-      </SheetContent>
+      </ResizableSheetContent>
     </Sheet>
   );
 }

package/hedhog/frontend/app/enterprise/_components/enterprise-user-create-sheet.tsx.ejs

@@ -20,12 +20,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 { zodResolver } from '@hookform/resolvers/zod';
 import { Loader2 } from 'lucide-react';
 import { useEffect } from 'react';
@@ -104,7 +104,14 @@ export function EnterpriseUserCreateSheet({
 
   return (
     <Sheet open={open} onOpenChange={handleOpenChange}>
-      <SheetContent side="right" className="flex flex-col gap-0 sm:max-w-md">
+      <ResizableSheetContent
+        sheetId="lms-enterprise-user-create-sheet"
+        defaultWidth={520}
+        minWidth={400}
+        maxWidth={860}
+        side="right"
+        className="flex flex-col gap-0 sm:max-w-md"
+      >
         <SheetHeader className="border-b px-6 py-4">
           <SheetTitle>New user</SheetTitle>
           <SheetDescription>
@@ -205,7 +212,7 @@ export function EnterpriseUserCreateSheet({
             </SheetFooter>
           </form>
         </Form>
-      </SheetContent>
+      </ResizableSheetContent>
     </Sheet>
   );
 }

package/hedhog/frontend/app/evaluations/_components/evaluation-topic-form-sheet.tsx.ejs

@@ -12,11 +12,11 @@ import {
 } from '@/components/ui/select';
 import {
   Sheet,
-  SheetContent,
   SheetFooter,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import { useApp } from '@hed-hog/next-app-provider';
@@ -106,7 +106,14 @@ export function EvaluationTopicFormSheet({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side="right" className="w-full overflow-y-auto sm:max-w-md">
+      <ResizableSheetContent
+        sheetId="lms-evaluation-topic-form-sheet"
+        defaultWidth={520}
+        minWidth={400}
+        maxWidth={860}
+        side="right"
+        className="w-full overflow-y-auto sm:max-w-md"
+      >
         <SheetHeader>
           <SheetTitle>
             {editingItem ? t('form.editTitle') : t('form.createTitle')}
@@ -195,7 +202,7 @@ export function EvaluationTopicFormSheet({
             </Button>
           </SheetFooter>
         </form>
-      </SheetContent>
+      </ResizableSheetContent>
     </Sheet>
   );
 }