@hed-hog/lms 0.0.349 → 0.0.351

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

@@ -27,8 +27,18 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
+import {
+  Sheet,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   Table,
@@ -38,6 +48,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { usePersistedViewMode } from '@/hooks/use-persisted-view-mode';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -48,8 +59,10 @@ import {
   Award,
   BookOpen,
   Eye,
+  Layers,
   Loader2,
   MoreHorizontal,
+  Paperclip,
   Pencil,
   Plus,
   Star,
@@ -59,8 +72,7 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { useEffect, useMemo, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { CourseAvatar } from '../_components/course-avatar';
@@ -79,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;
@@ -86,19 +99,25 @@ 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;
 }
 
 type ApiCourse = {
   id: number;
   name: string;
   slug: string;
+  code?: string | null;
   title: string;
   description: string;
   primaryColor?: string | null;
@@ -107,13 +126,18 @@ 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;
 };
 
 type ApiCourseList = {
@@ -180,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);
 
@@ -204,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 ?? '',
@@ -211,13 +242,18 @@ 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,
   };
 }
 
@@ -233,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';
@@ -259,6 +301,20 @@ 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 ─────────────────────────────────────────────────────────────────
 
 // ── Animations ────────────────────────────────────────────────────────────────
@@ -283,7 +339,12 @@ export default function CursosPage() {
   // UI
   const [sheetOpen, setSheetOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [createCategorySheetOpen, setCreateCategorySheetOpen] = useState(false);
   const [saving, setSaving] = useState(false);
+  const [creatingCategory, setCreatingCategory] = useState(false);
+  const [newCategoryName, setNewCategoryName] = useState('');
+  const [newCategorySlug, setNewCategorySlug] = useState('');
+  const [newCategorySlugTouched, setNewCategorySlugTouched] = useState(false);
 
   // Data
   const [editingCurso, setEditingCurso] = useState<Curso | null>(null);
@@ -311,14 +372,9 @@ export default function CursosPage() {
   const [pageSize, setPageSize] = usePersistedPageSize({
     storageKey: 'pagination:global:pageSize',
     defaultValue: 12,
-    allowedValues: [6, 12, 24],
+    allowedValues: PAGE_SIZES,
   });
 
-  // Double-click tracking
-  const clickTimers = useRef<Map<number, ReturnType<typeof setTimeout>>>(
-    new Map()
-  );
-
   const form = useForm<CourseSheetFormValues>({
     resolver: zodResolver(getCourseSheetSchema(t)),
     defaultValues: DEFAULT_COURSE_FORM_VALUES,
@@ -490,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]);
@@ -557,22 +614,6 @@ export default function CursosPage() {
     setDeleteDialogOpen(true);
   }
 
-  // ── Double-click to navigate ──────────────────────────────────────────────
-
-  function handleCardClick(curso: Curso) {
-    const existing = clickTimers.current.get(curso.id);
-    if (existing) {
-      clearTimeout(existing);
-      clickTimers.current.delete(curso.id);
-      router.push(`/lms/courses/${curso.id}`);
-    } else {
-      const t = setTimeout(() => {
-        clickTimers.current.delete(curso.id);
-      }, 300);
-      clickTimers.current.set(curso.id, t);
-    }
-  }
-
   // ── Selection ─────────────────────────────────────────────────────────────
 
   function toggleSelect(id: number, e: React.MouseEvent) {
@@ -602,13 +643,18 @@ 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)
+        : '',
       logoFileId: curso.logoFileId ?? null,
     });
     setSheetOpen(true);
@@ -620,15 +666,20 @@ 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),
         secondaryColor: data.secondaryColor,
         secondaryContrastColor: getContrastColor(data.secondaryColor),
+        operationsProjectId: data.operationsProjectId
+          ? Number(data.operationsProjectId)
+          : null,
         logoFileId: data.logoFileId ?? null,
       };
 
@@ -729,7 +780,7 @@ export default function CursosPage() {
     },
   ];
 
-  const { locales } = useApp();
+  const { locales, currentLocaleCode } = useApp();
 
   const handleNewCourse = (): void => {
     const nextLocaleData: Record<string, { name: string }> = {};
@@ -742,6 +793,76 @@ export default function CursosPage() {
     openCreateSheet();
   };
 
+  useEffect(() => {
+    if (newCategorySlugTouched) return;
+
+    const generatedSlug = newCategoryName
+      .trim()
+      .toLowerCase()
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '');
+
+    setNewCategorySlug(generatedSlug);
+  }, [newCategoryName, newCategorySlugTouched]);
+
+  function openCreateCategorySheet() {
+    setNewCategoryName('');
+    setNewCategorySlug('');
+    setNewCategorySlugTouched(false);
+    setCreateCategorySheetOpen(true);
+  }
+
+  async function handleCreateCategory() {
+    const trimmedName = newCategoryName.trim();
+    const trimmedSlug = newCategorySlug.trim().toLowerCase();
+
+    if (!trimmedName || !trimmedSlug) {
+      toast.error('Informe nome e slug da categoria.');
+      return;
+    }
+
+    const localeCode = currentLocaleCode || locales[0]?.code || 'pt-BR';
+
+    setCreatingCategory(true);
+    try {
+      const response = await request<{ slug?: string }>({
+        url: '/category',
+        method: 'POST',
+        data: {
+          locale: {
+            [localeCode]: {
+              name: trimmedName,
+            },
+          },
+          slug: trimmedSlug,
+          category_id: null,
+          color: '#000000',
+          icon: '',
+          status: 'active',
+        },
+      });
+
+      const createdSlug = response.data?.slug || trimmedSlug;
+      const existingCategories = form.getValues('categorias') ?? [];
+      if (!existingCategories.includes(createdSlug)) {
+        form.setValue('categorias', [...existingCategories, createdSlug], {
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+      }
+
+      await refetchCategoryOptions();
+      setCreateCategorySheetOpen(false);
+      toast.success('Categoria criada com sucesso.');
+    } catch {
+      toast.error('Nao foi possivel criar a categoria.');
+    } finally {
+      setCreatingCategory(false);
+    }
+  }
+
   // ── Render ────────────────────────────────────────────────────────────────
 
   return (
@@ -957,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>
@@ -1045,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);
 
@@ -1057,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' : ''}`}
-                      onClick={() => handleCardClick(curso)}
+                      onDoubleClick={() =>
+                        router.push(`/lms/courses/${curso.id}`)
+                      }
                       title={t('cards.tooltip')}
                     >
                       <div
@@ -1082,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>
@@ -1100,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
@@ -1137,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>
@@ -1243,7 +1332,9 @@ export default function CursosPage() {
                         key={curso.id}
                         className="cursor-pointer"
                         data-state={isSelected ? 'selected' : undefined}
-                        onClick={() => handleCardClick(curso)}
+                        onDoubleClick={() =>
+                          router.push(`/lms/courses/${curso.id}`)
+                        }
                         title={t('cards.tooltip')}
                       >
                         <TableCell onClick={(e) => e.stopPropagation()}>
@@ -1388,7 +1479,7 @@ export default function CursosPage() {
               setPageSize(nextPageSize);
               setCurrentPage(1);
             }}
-            pageSizeOptions={[6, 12, 24]}
+            pageSizeOptions={PAGE_SIZES}
             selectedCount={selectedIds.size}
           />
         </div>
@@ -1407,11 +1498,89 @@ export default function CursosPage() {
         form={form}
         onSubmit={onSubmit}
         categories={categoryOptions}
-        onCreateCategory={() => router.push('/category?new=1')}
+        onCreateCategory={openCreateCategorySheet}
         initialLogoFileId={editingCurso?.logoFileId ?? null}
         t={t}
       />
 
+      <Sheet
+        open={createCategorySheetOpen}
+        onOpenChange={(open) => {
+          setCreateCategorySheetOpen(open);
+          if (!open) {
+            setNewCategoryName('');
+            setNewCategorySlug('');
+            setNewCategorySlugTouched(false);
+          }
+        }}
+      >
+        <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>
+              Crie uma categoria sem sair do cadastro de curso.
+            </SheetDescription>
+          </SheetHeader>
+
+          <div className="space-y-4 px-4">
+            <div className="space-y-2">
+              <Label htmlFor="new-category-name">Nome</Label>
+              <Input
+                id="new-category-name"
+                value={newCategoryName}
+                onChange={(event) => setNewCategoryName(event.target.value)}
+                placeholder="Ex.: Desenvolvimento Web"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="new-category-slug">Slug</Label>
+              <Input
+                id="new-category-slug"
+                value={newCategorySlug}
+                onChange={(event) => {
+                  setNewCategorySlugTouched(true);
+                  setNewCategorySlug(event.target.value);
+                }}
+                placeholder="desenvolvimento-web"
+              />
+            </div>
+          </div>
+
+          <SheetFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setCreateCategorySheetOpen(false)}
+              disabled={creatingCategory}
+            >
+              {t('deleteDialog.actions.cancel')}
+            </Button>
+            <Button
+              type="button"
+              onClick={handleCreateCategory}
+              disabled={creatingCategory}
+            >
+              {creatingCategory ? (
+                <>
+                  <Loader2 className="mr-2 size-4 animate-spin" />
+                  Criando...
+                </>
+              ) : (
+                t('form.fields.categories.createAction')
+              )}
+            </Button>
+          </SheetFooter>
+        </ResizableSheetContent>
+      </Sheet>
+
       {/* ── Delete dialog ────────────────────���────────────────────────────── */}
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <DialogContent className="max-w-3xl">

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" />