@hed-hog/lms 0.0.331 → 0.0.338

package/hedhog/frontend/app/enterprise/_components/enterprise-administrators-tab.tsx.ejs

@@ -1,6 +1,6 @@
 'use client';
 
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import type { EntityPickerValue } from '@/components/ui/entity-picker';
@@ -19,11 +19,14 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { getPhotoUrl } from '@/lib/get-photo-url';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { Trash2 } from 'lucide-react';
+import { Pencil, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
+import { UserSheet } from '../../../core/users/user-sheet';
 import { EnterpriseAdminCreateSheet } from './enterprise-admin-create-sheet';
 import {
   USER_ROLE_LABEL,
@@ -44,8 +47,6 @@ const ADMIN_ROLES: EnterpriseUserRole[] = [
   'viewer',
 ];
 
-const ADMINS_PAGE_SIZE_DEFAULT = 10;
-
 export function AdministratorsTab({
   enterpriseId,
   onMutate,
@@ -57,13 +58,18 @@ export function AdministratorsTab({
   const { request } = useApp();
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(ADMINS_PAGE_SIZE_DEFAULT);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:global:pageSize',
+    defaultValue: 6,
+    allowedValues: [6, 12, 24, 48],
+  });
   const [pickerValue, setPickerValue] = useState<EntityPickerValue>(null);
   const [selectedUser, setSelectedUser] =
     useState<SystemUserPickerOption | null>(null);
   const [roleForLink, setRoleForLink] =
     useState<EnterpriseUserRole>('enterprise_admin');
   const [createSheetOpen, setCreateSheetOpen] = useState(false);
+  const [editingUserId, setEditingUserId] = useState<number | null>(null);
   const [savingRoleUserId, setSavingRoleUserId] = useState<number | null>(null);
   const [removingUserId, setRemovingUserId] = useState<number | null>(null);
 
@@ -257,6 +263,7 @@ export function AdministratorsTab({
                       <Avatar
                         className={`size-7 shrink-0 rounded-full ${getAvatarColor(u.name).bg}`}
                       >
+                        <AvatarImage src={getPhotoUrl(u.photoId)} />
                         <AvatarFallback
                           className={`text-xs font-semibold ${getAvatarColor(u.name).bg} ${getAvatarColor(u.name).text}`}
                         >
@@ -295,6 +302,14 @@ export function AdministratorsTab({
                     </Badge>
                   </TableCell>
                   <TableCell className="text-right">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7"
+                      onClick={() => setEditingUserId(u.userId)}
+                    >
+                      <Pencil className="size-4" />
+                    </Button>
                     <Button
                       variant="ghost"
                       size="icon"
@@ -329,6 +344,17 @@ export function AdministratorsTab({
           onMutate?.();
         }}
       />
+      <UserSheet
+        open={editingUserId !== null}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) setEditingUserId(null);
+        }}
+        userId={editingUserId}
+        onSuccess={() => {
+          void refetch();
+          onMutate?.();
+        }}
+      />
     </>
   );
 }

package/hedhog/frontend/app/enterprise/_components/enterprise-classes-tab.tsx.ejs

@@ -1,6 +1,7 @@
 'use client';
 
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { CourseAvatar } from '@/app/(app)/(libraries)/lms/_components/course-avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -18,13 +19,20 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { formatDate } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { CalendarDays, SquareArrowOutUpRight, Trash2 } from 'lucide-react';
-import { useRouter } from 'next/navigation';
+import {
+  CalendarDays,
+  Pencil,
+  SquareArrowOutUpRight,
+  Trash2,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
 import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
+import { ClassFormSheet } from '../../_components/class-form-sheet';
 import { EnterpriseClassCreateSheet } from './enterprise-class-create-sheet';
 import {
   CLASS_STATUS_LABEL,
@@ -37,7 +45,13 @@ import type {
   EnterpriseClassStatus,
 } from './enterprise-types';
 
-const CLASSES_PAGE_SIZE_DEFAULT = 6;
+type EnterpriseClassListResponse = {
+  data: EnterpriseClass[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage: number;
+};
 
 async function loadClassGroupOptions(
   request: ReturnType<typeof useApp>['request'],
@@ -101,10 +115,15 @@ export function ClassesTab({
     'all' | EnterpriseClassStatus
   >('all');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(CLASSES_PAGE_SIZE_DEFAULT);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:global:pageSize',
+    defaultValue: 6,
+    allowedValues: [6, 12, 24, 48],
+  });
   const [pickerValue, setPickerValue] = useState<string | number | null>(null);
   const [pickerClass, setPickerClass] = useState<EnterpriseClass | null>(null);
   const [createSheetOpen, setCreateSheetOpen] = useState(false);
+  const [editingClassId, setEditingClassId] = useState<string | null>(null);
 
   const loadPickerOptions = useCallback(
     (args: { page: number; pageSize: number; search: string }) =>
@@ -129,11 +148,11 @@ export function ClassesTab({
       statusFilter,
     ],
     queryFn: async () => {
-      const res = await request<any>({
+      const res = await request<EnterpriseClassListResponse>({
         url: `/lms/enterprise/${enterpriseId}/classes?${queryParams}`,
         method: 'GET',
       });
-      return (res as any).data ?? res;
+      return res.data;
     },
   });
 
@@ -267,9 +286,12 @@ export function ClassesTab({
               <TableHeader>
                 <TableRow>
                   <TableHead>{t('table.class')}</TableHead>
+                  <TableHead>{t('table.instructor')}</TableHead>
                   <TableHead>{t('table.status')}</TableHead>
                   <TableHead>{t('table.period')}</TableHead>
-                  <TableHead className="text-center">{t('table.capacity')}</TableHead>
+                  <TableHead className="text-center">
+                    {t('table.capacity')}
+                  </TableHead>
                   <TableHead className="w-10" />
                 </TableRow>
               </TableHeader>
@@ -286,15 +308,12 @@ export function ClassesTab({
                   >
                     <TableCell>
                       <div className="flex items-center gap-3">
-                        <Avatar
-                          className={`size-8 rounded-lg ${getAvatarColor(cls.courseTitle ?? '').bg}`}
-                        >
-                          <AvatarFallback
-                            className={`rounded-lg text-xs font-semibold ${getAvatarColor(cls.courseTitle ?? '').bg} ${getAvatarColor(cls.courseTitle ?? '').text}`}
-                          >
-                            {getInitials(cls.courseTitle ?? cls.code ?? '')}
-                          </AvatarFallback>
-                        </Avatar>
+                        <CourseAvatar
+                          fileId={cls.logoFileId}
+                          title={cls.courseTitle ?? cls.code ?? 'Curso'}
+                          className="size-8 rounded-lg"
+                          iconSize="size-4"
+                        />
                         <div className="min-w-0">
                           <p className="font-mono text-sm">
                             {cls.code ?? cls.title ?? '—'}
@@ -305,6 +324,24 @@ export function ClassesTab({
                         </div>
                       </div>
                     </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-2 min-w-0">
+                        <Avatar className="h-7 w-7 shrink-0 border">
+                          {cls.instructorAvatarId ? (
+                            <AvatarImage
+                              src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${cls.instructorAvatarId}`}
+                              alt={cls.instructorName ?? 'Instructor'}
+                            />
+                          ) : null}
+                          <AvatarFallback className="text-[10px]">
+                            {getInitials(cls.instructorName ?? '') || '—'}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span className="truncate text-sm">
+                          {cls.instructorName ?? '—'}
+                        </span>
+                      </div>
+                    </TableCell>
                     <TableCell>
                       <Badge
                         variant={
@@ -336,14 +373,24 @@ export function ClassesTab({
                         : '—'}
                     </TableCell>
                     <TableCell className="text-center text-sm">
-                      {cls.capacity ?? (
-                        <span className="text-muted-foreground">—</span>
-                      )}
+                      {cls.enrolledCount} / {cls.capacity ?? '—'}
                     </TableCell>
                     <TableCell
                       className="flex items-center gap-1"
                       onClick={(e) => e.stopPropagation()}
                     >
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8"
+                        onClick={() =>
+                          setEditingClassId(
+                            String(cls.courseClassGroupId ?? cls.id)
+                          )
+                        }
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
                       <Button
                         variant="ghost"
                         size="icon"
@@ -387,6 +434,18 @@ export function ClassesTab({
           onMutate?.();
         }}
       />
+      <ClassFormSheet
+        open={editingClassId !== null}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) setEditingClassId(null);
+        }}
+        classId={editingClassId ?? undefined}
+        sheetTitle={t('actions.edit')}
+        onSuccess={() => {
+          void refetch();
+          onMutate?.();
+        }}
+      />
     </>
   );
 }

package/hedhog/frontend/app/enterprise/_components/enterprise-company-identity-card.tsx.ejs

@@ -1,6 +1,6 @@
 'use client';
 
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent } from '@/components/ui/card';
 import { formatDate } from '@/lib/format-date';
@@ -22,16 +22,25 @@ export function CompanyIdentityCard({
   const { currentLocaleCode, getSettingValue } = useApp();
   const t = useTranslations('lms.EnterpriseDetailPage');
 
+  function getPersonAvatarUrl(avatarId?: number | null) {
+    return typeof avatarId === 'number' && avatarId > 0
+      ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+      : undefined;
+  }
+
   return (
     <Card
       className="cursor-pointer border-border/60 transition-all hover:border-primary/40 hover:shadow-md"
       onClick={onEditClick}
       title={t('identityCard.editTooltip')}
     >
-      <CardContent className="p-5">
+      <CardContent className="px-5">
         <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
           {/* Avatar */}
           <Avatar className={`size-16 shrink-0 rounded-2xl ${bg}`}>
+            <AvatarImage
+              src={getPersonAvatarUrl(account.crmAccount?.avatarId ?? null)}
+            />
             <AvatarFallback
               className={`rounded-2xl text-xl font-bold ${bg} ${text}`}
             >

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

@@ -0,0 +1,201 @@
+'use client';
+
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import {
+  CourseFormSheet,
+  DEFAULT_COURSE_FORM_VALUES,
+  getCourseSheetSchema,
+  type CourseCategoryOption,
+  type CourseSheetFormValues,
+} from '../../_components/course-form-sheet';
+
+type ApiCategory = {
+  id: number;
+  slug: string;
+  name: string;
+};
+
+type ApiCategoryList = {
+  data: ApiCategory[];
+};
+
+type ApiCourse = {
+  id: number;
+  name: string;
+  slug: string;
+  title: string;
+  description?: string | null;
+  level?: string | null;
+  status?: string | null;
+  categories?: string[];
+  primaryColor?: string | null;
+  secondaryColor?: string | null;
+  logoFileId?: number | null;
+};
+
+export interface EnterpriseCourseEditSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  courseId: number | null;
+  onSaved?: () => void;
+}
+
+function toPtLevel(level?: string | null): CourseSheetFormValues['nivel'] {
+  if (level === 'beginner') return 'iniciante';
+  if (level === 'intermediate') return 'intermediario';
+  if (level === 'advanced') return 'avancado';
+  return 'iniciante';
+}
+
+function toPtStatus(status?: string | null): CourseSheetFormValues['status'] {
+  if (status === 'published' || status === 'active') return 'ativo';
+  if (status === 'draft') return 'rascunho';
+  if (status === 'archived') return 'arquivado';
+  return 'rascunho';
+}
+
+function toApiLevel(level: CourseSheetFormValues['nivel']) {
+  if (level === 'iniciante') return 'beginner';
+  if (level === 'intermediario') return 'intermediate';
+  return 'advanced';
+}
+
+function toApiStatus(status: CourseSheetFormValues['status']) {
+  if (status === 'ativo') return 'published';
+  if (status === 'rascunho') return 'draft';
+  return 'archived';
+}
+
+function getContrastColor(hex: string) {
+  const cleaned = hex.replace('#', '');
+  if (cleaned.length !== 6) return '#FFFFFF';
+
+  const r = parseInt(cleaned.slice(0, 2), 16);
+  const g = parseInt(cleaned.slice(2, 4), 16);
+  const b = parseInt(cleaned.slice(4, 6), 16);
+
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.6 ? '#111827' : '#FFFFFF';
+}
+
+export function EnterpriseCourseEditSheet({
+  open,
+  onOpenChange,
+  courseId,
+  onSaved,
+}: EnterpriseCourseEditSheetProps) {
+  const t = useTranslations('lms.CoursesPage');
+  const { request } = useApp();
+  const [saving, setSaving] = useState(false);
+
+  const form = useForm<CourseSheetFormValues>({
+    resolver: zodResolver(getCourseSheetSchema(t)),
+    defaultValues: DEFAULT_COURSE_FORM_VALUES,
+  });
+
+  const { data: categoriesData } = useQuery<ApiCategoryList>({
+    queryKey: ['enterprise-course-edit-categories'],
+    queryFn: async () => {
+      const response = await request<ApiCategoryList>({
+        url: '/category?page=1&pageSize=500&status=all',
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) => previous,
+  });
+
+  useEffect(() => {
+    if (!open || typeof courseId !== 'number') return;
+
+    request<ApiCourse>({
+      url: `/lms/courses/${courseId}`,
+      method: 'GET',
+    })
+      .then((response) => {
+        const course = response.data;
+        form.reset({
+          nomeInterno: course.name ?? '',
+          slug: course.slug ?? '',
+          tituloComercial: course.title ?? '',
+          descricao: course.description ?? '',
+          nivel: toPtLevel(course.level),
+          status: toPtStatus(course.status),
+          categorias: course.categories ?? [],
+          primaryColor: course.primaryColor ?? '#1D4ED8',
+          secondaryColor: course.secondaryColor ?? '#111827',
+          logoFileId: course.logoFileId ?? null,
+        });
+      })
+      .catch(() => {
+        toast.error(t('toasts.courseUpdateError'));
+        onOpenChange(false);
+      });
+  }, [courseId, form, onOpenChange, open, request, t]);
+
+  const categoryOptions = useMemo<CourseCategoryOption[]>(
+    () =>
+      (categoriesData?.data ?? [])
+        .filter((category) => !!category.slug)
+        .map((category) => ({
+          value: category.slug,
+          label: category.name || category.slug,
+        }))
+        .sort((a, b) => a.label.localeCompare(b.label)),
+    [categoriesData]
+  );
+
+  async function onSubmit(values: CourseSheetFormValues) {
+    if (typeof courseId !== 'number') return;
+
+    setSaving(true);
+    try {
+      await request({
+        url: `/lms/courses/${courseId}`,
+        method: 'PATCH',
+        data: {
+          name: values.nomeInterno.trim(),
+          slug: values.slug.trim().toLowerCase(),
+          title: values.tituloComercial,
+          description: values.descricao,
+          level: toApiLevel(values.nivel),
+          status: toApiStatus(values.status),
+          categorySlugs: values.categorias,
+          primaryColor: values.primaryColor,
+          primaryContrastColor: getContrastColor(values.primaryColor),
+          secondaryColor: values.secondaryColor,
+          secondaryContrastColor: getContrastColor(values.secondaryColor),
+          logoFileId: values.logoFileId ?? null,
+        },
+      });
+
+      toast.success(t('toasts.courseUpdated'));
+      onSaved?.();
+      onOpenChange(false);
+    } catch {
+      toast.error(t('toasts.courseUpdateError'));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <CourseFormSheet
+      open={open}
+      onOpenChange={onOpenChange}
+      editing={true}
+      saving={saving}
+      form={form}
+      onSubmit={onSubmit}
+      categories={categoryOptions}
+      initialLogoFileId={form.watch('logoFileId') ?? null}
+      t={t}
+    />
+  );
+}

package/hedhog/frontend/app/enterprise/_components/enterprise-courses-tab.tsx.ejs

@@ -1,5 +1,6 @@
 'use client';
 
+import { CourseAvatar } from '@/app/(app)/(libraries)/lms/_components/course-avatar';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -18,14 +19,16 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { formatDate } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { BookOpen, SquareArrowOutUpRight, Trash2 } from 'lucide-react';
-import { useRouter } from 'next/navigation';
+import { BookOpen, Pencil, SquareArrowOutUpRight, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
 import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
 import { EnterpriseCourseCreateSheet } from './enterprise-course-create-sheet';
+import { EnterpriseCourseEditSheet } from './enterprise-course-edit-sheet';
 import {
   COURSE_STATUS_LABEL,
   COURSE_STATUS_VARIANT,
@@ -37,7 +40,13 @@ import type {
   EnterpriseCourseStatus,
 } from './enterprise-types';
 
-const COURSES_PAGE_SIZE_DEFAULT = 6;
+type EnterpriseCourseListResponse = {
+  data: EnterpriseCourse[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage: number;
+};
 
 async function loadCourseOptions(
   request: ReturnType<typeof useApp>['request'],
@@ -53,6 +62,7 @@ async function loadCourseOptions(
       id: number;
       title: string;
       slug: string | null;
+      logoFileId?: number | null;
       status: string;
       level: string | null;
       offering_type: string | null;
@@ -70,6 +80,7 @@ async function loadCourseOptions(
       courseId: c.id,
       title: c.title ?? '',
       slug: c.slug ?? null,
+      logoFileId: c.logoFileId ?? null,
       status: c.status ?? 'draft',
       level: c.level ?? null,
       modality: c.offering_type ?? null,
@@ -97,12 +108,17 @@ export function CoursesTab({
     'all' | EnterpriseCourseStatus
   >('all');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(COURSES_PAGE_SIZE_DEFAULT);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:global:pageSize',
+    defaultValue: 6,
+    allowedValues: [6, 12, 24, 48],
+  });
   const [pickerValue, setPickerValue] = useState<string | number | null>(null);
   const [pickerCourse, setPickerCourse] = useState<EnterpriseCourse | null>(
     null
   );
   const [createSheetOpen, setCreateSheetOpen] = useState(false);
+  const [editingCourseId, setEditingCourseId] = useState<number | null>(null);
 
   const loadPickerOptions = useCallback(
     (args: { page: number; pageSize: number; search: string }) =>
@@ -127,11 +143,11 @@ export function CoursesTab({
       statusFilter,
     ],
     queryFn: async () => {
-      const res = await request<any>({
+      const res = await request<EnterpriseCourseListResponse>({
         url: `/lms/enterprise/${enterpriseId}/courses?${queryParams}`,
         method: 'GET',
       });
-      return (res as any).data ?? res;
+      return res.data;
     },
   });
 
@@ -210,15 +226,12 @@ export function CoursesTab({
         getPickerOptionDescription={(c) => c.modality ?? undefined}
         renderPickerOption={({ option: c }) => (
           <div className="flex items-center gap-2 min-w-0">
-            <Avatar
-              className={`size-7 shrink-0 rounded-lg ${getAvatarColor(c.title).bg}`}
-            >
-              <AvatarFallback
-                className={`rounded-lg text-xs font-semibold ${getAvatarColor(c.title).bg} ${getAvatarColor(c.title).text}`}
-              >
-                {getInitials(c.title)}
-              </AvatarFallback>
-            </Avatar>
+            <CourseAvatar
+              fileId={c.logoFileId}
+              title={c.title}
+              className="size-7 shrink-0 rounded-lg"
+              iconSize="size-3.5"
+            />
             <div className="min-w-0">
               <div className="truncate font-medium">{c.title}</div>
               {c.modality && (
@@ -278,15 +291,12 @@ export function CoursesTab({
                   >
                     <TableCell>
                       <div className="flex items-center gap-3">
-                        <Avatar
-                          className={`size-8 rounded-lg ${getAvatarColor(course.title).bg}`}
-                        >
-                          <AvatarFallback
-                            className={`rounded-lg text-xs font-semibold ${getAvatarColor(course.title).bg} ${getAvatarColor(course.title).text}`}
-                          >
-                            {getInitials(course.title)}
-                          </AvatarFallback>
-                        </Avatar>
+                        <CourseAvatar
+                          fileId={course.logoFileId}
+                          title={course.title}
+                          className="size-8 rounded-lg"
+                          iconSize="size-4"
+                        />
                         <p className="font-medium">{course.title}</p>
                       </div>
                     </TableCell>
@@ -319,6 +329,16 @@ export function CoursesTab({
                       className="flex items-center gap-1"
                       onClick={(e) => e.stopPropagation()}
                     >
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8"
+                        onClick={() =>
+                          setEditingCourseId(course.courseId ?? course.id)
+                        }
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
                       <Button
                         variant="ghost"
                         size="icon"
@@ -360,6 +380,17 @@ export function CoursesTab({
           onMutate?.();
         }}
       />
+      <EnterpriseCourseEditSheet
+        open={editingCourseId !== null}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) setEditingCourseId(null);
+        }}
+        courseId={editingCourseId}
+        onSaved={() => {
+          void refetch();
+          onMutate?.();
+        }}
+      />
     </>
   );
 }