@hed-hog/lms 0.0.351 → 0.0.354

package/hedhog/frontend/app/courses/[id]/structure/_components/editor-course.tsx.ejs

@@ -10,9 +10,6 @@ import {
   CircleDot,
   Clock,
   Download,
-  File as FileIcon,
-  FileImage,
-  FileText,
   Layers,
   Loader2,
   Pencil,
@@ -32,6 +29,7 @@ import { z } from 'zod';
 
 import { createDefaultTemplate } from '@/app/(app)/(libraries)/lms/_lib/editor/types';
 import { FfmpegParamsEditor } from '@/components/ffmpeg-params-editor';
+import { FileTypeIcon } from '@/components/file-type-icon';
 import { RichTextEditor } from '@/components/rich-text-editor';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -54,6 +52,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Separator } from '@/components/ui/separator';
 import {
   Sheet,
@@ -62,7 +61,6 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import {
@@ -76,7 +74,6 @@ import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import { InstructorFormSheet } from '../../../../instructors/_components/instructor-form-sheet';
 import type {
   CourseEditFormValues,
   PickerOption,
@@ -86,6 +83,7 @@ import { CourseClassificationCard } from '../../_components/CourseClassification
 import { CourseContentCard } from '../../_components/CourseContentCard';
 import { CourseDangerZoneCard } from '../../_components/CourseDangerZoneCard';
 import { CourseFlagsCard } from '../../_components/CourseFlagsCard';
+import { CourseInstructorsSummaryCard } from './CourseInstructorsSummaryCard';
 import { CourseMediaCard } from '../../_components/CourseMediaCard';
 import { CourseRelationsCard } from '../../_components/CourseRelationsCard';
 import {
@@ -96,6 +94,7 @@ import {
 } from '../_data/services/course-structure.service';
 import { useCreateSessionMutation } from '../_data/use-course-structure-mutations';
 import { courseStructureQueryKey } from '../_data/use-course-structure-query';
+import { IconActionTooltip } from './icon-action-tooltip';
 import { useStructureStore } from './store';
 import { Resource } from './types';
 
@@ -108,6 +107,7 @@ type ApiCourseDetail = {
   code?: string | null;
   title: string;
   description: string;
+  locale_id?: number | null;
   primaryColor?: string | null;
   secondaryColor?: string | null;
   level: 'beginner' | 'intermediate' | 'advanced';
@@ -125,7 +125,6 @@ type ApiCourseDetail = {
   sessionCount: number;
   averageCompletion: number;
   certificatesIssued: number;
-  instructorIds?: number[];
   instructors?: Array<{ id: number; name: string; avatarId: number | null }>;
   logoFileId?: number | null;
   logoFilename?: string | null;
@@ -173,19 +172,6 @@ type ApiCategoryList = {
   page: number;
   pageSize: number;
 };
-type ApiInstructor = {
-  id: number;
-  personId: number;
-  name: string;
-  avatarId?: number | null;
-  qualificationSlugs: string[];
-};
-type ApiInstructorList = {
-  data: ApiInstructor[];
-  total: number;
-  page: number;
-  pageSize: number;
-};
 type ApiCertificateTemplate = {
   id: number;
   name: string;
@@ -213,14 +199,21 @@ type CourseResourceApi = {
   id: number;
   nome: string;
   fileId?: number | null;
-  tipo?: string | null;
-  publico?: boolean;
+  type?: string | null;
+  is_public?: boolean;
 };
 
 type CourseResourceItem = Resource & {
   fileId?: number | null;
 };
 
+const COURSE_RESOURCE_ALLOWED_TYPES = new Set([
+  'lesson_audio',
+  'student_download',
+  'supplementary_material',
+  'video_original',
+]);
+
 type Locale = { id?: number; code: string; name: string };
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
@@ -309,24 +302,6 @@ function slugify(value: string) {
     .replace(/^-+|-+$/g, '');
 }
 
-function getInstructorAvatarUrl(avatarId?: number | null) {
-  return typeof avatarId === 'number' && avatarId > 0
-    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
-    : null;
-}
-
-function getResourceIcon(type: string): typeof FileIcon {
-  if (type === 'application/pdf' || type.endsWith('pdf')) return FileText;
-  if (type.startsWith('image/')) return FileImage;
-  return FileIcon;
-}
-
-function getResourceIconColor(type: string): string {
-  if (type === 'application/pdf' || type.endsWith('pdf')) return 'text-red-500';
-  if (type.startsWith('image/')) return 'text-blue-500';
-  return 'text-muted-foreground';
-}
-
 function formatFileSize(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -341,11 +316,19 @@ function mapApiCourseResourceToLocal(
     fileId: item.fileId ?? undefined,
     name: item.nome,
     size: '',
-    type: item.tipo ?? 'file',
-    public: item.publico ?? true,
+    type: item.type ?? 'student_download',
+    public: item.is_public ?? true,
   };
 }
 
+function normalizeCourseResourceType(type?: string | null) {
+  const value = String(type ?? '').trim();
+  if (!value) return undefined;
+  if (COURSE_RESOURCE_ALLOWED_TYPES.has(value)) return value;
+  if (/^video_profile:\d+$/.test(value)) return value;
+  return 'student_download';
+}
+
 // ── Schema ────────────────────────────────────────────────────────────────────
 
 function buildSchema(t: (key: string) => string) {
@@ -369,6 +352,7 @@ function buildSchema(t: (key: string) => string) {
     nivel: z.enum(['iniciante', 'intermediario', 'avancado']),
     status: z.enum(['ativo', 'rascunho', 'arquivado']),
     tipoOferta: z.enum(['agendado', 'sob_demanda', 'hibrido']),
+    localeId: z.string().optional().default(''),
     categorias: z.array(z.string()).optional().default([]),
     operationsProjectId: z.string().optional(),
     primaryColor: z
@@ -397,6 +381,9 @@ export function EditorCourse() {
 
   const { request, currentLocaleCode, locales } = useApp();
   const t = useTranslations('lms.CursoEditPage');
+  const courseLocaleLabel = currentLocaleCode?.startsWith('en')
+    ? 'Course Language'
+    : 'Idioma do Curso';
   const router = useRouter();
   const isMobile = useIsMobile();
   const queryClient = useQueryClient();
@@ -404,10 +391,6 @@ export function EditorCourse() {
 
   // ── UI state ────────────────────────────────────────────────────────────────
   const [activeTab, setActiveTab] = useState('estrutura');
-  const [instructorEditSheetOpen, setInstructorEditSheetOpen] = useState(false);
-  const [editingInstructorId, setEditingInstructorId] = useState<number | null>(
-    null
-  );
   const [categoryEditSheetOpen, setCategoryEditSheetOpen] = useState(false);
   const [editingCategoryId, setEditingCategoryId] = useState<number | null>(
     null
@@ -442,6 +425,8 @@ export function EditorCourse() {
   const [courseResources, setCourseResources] = useState<CourseResourceItem[]>(
     []
   );
+  const [downloadingCourseResourceKeys, setDownloadingCourseResourceKeys] =
+    useState<Set<string>>(() => new Set<string>());
   const [resourcesDragOver, setResourcesDragOver] = useState(false);
   const [isUploadingResources, setIsUploadingResources] = useState(false);
   const [isSavingResources, setIsSavingResources] = useState(false);
@@ -496,32 +481,6 @@ export function EditorCourse() {
       initialData: { data: [], total: 0, page: 1, pageSize: 500 },
     });
 
-  const { data: instructorListData, refetch: refetchInstructorOptions } =
-    useQuery<ApiInstructorList>({
-      queryKey: ['lms-course-edit-instructors'],
-      queryFn: async () => {
-        const response = await request<ApiInstructorList | ApiInstructor[]>({
-          url: '/lms/instructors',
-          method: 'GET',
-          params: {
-            page: 1,
-            pageSize: 500,
-            qualificationSlugs: ['course-lessons'],
-          },
-        });
-        const payload = response.data;
-        if (Array.isArray(payload))
-          return {
-            data: payload,
-            total: payload.length,
-            page: 1,
-            pageSize: payload.length,
-          };
-        return payload;
-      },
-      initialData: { data: [], total: 0, page: 1, pageSize: 500 },
-    });
-
   const {
     data: certificateTemplateData,
     refetch: refetchCertificateTemplates,
@@ -597,6 +556,7 @@ export function EditorCourse() {
           code: data.code?.trim() || undefined,
           title: data.tituloComercial.trim(),
           description: data.descricaoPublica.trim(),
+          locale_id: data.localeId ? Number(data.localeId) : null,
           requirements: data.preRequisitos?.trim() || undefined,
           objectives: data.objetivos?.trim() || undefined,
           targetAudience: data.publicoAlvo?.trim() || undefined,
@@ -612,7 +572,6 @@ export function EditorCourse() {
           isFeatured: data.destaque,
           isListed: data.listado,
           certificateModel: data.modeloCertificado.trim() || null,
-          instructorIds: (data.instrutores ?? []).map(Number),
           operationsProjectId: data.operationsProjectId
             ? Number(data.operationsProjectId)
             : null,
@@ -632,6 +591,7 @@ export function EditorCourse() {
       }
       setPersistedCertificateModel(data.modeloCertificado || '');
       updateCourseInStore({
+        code: data.code,
         title: data.tituloComercial,
         slug: data.slug,
         name: data.nomeInterno,
@@ -641,6 +601,9 @@ export function EditorCourse() {
       void queryClient.invalidateQueries({
         queryKey: courseStructureQueryKey(courseId),
       });
+      void queryClient.invalidateQueries({
+        queryKey: ['lms-course-detail', courseId],
+      });
       form.reset(data);
       toast.success(t('toasts.courseUpdated'));
     },
@@ -665,11 +628,11 @@ export function EditorCourse() {
       nivel: 'iniciante',
       status: 'rascunho',
       tipoOferta: 'sob_demanda',
+      localeId: '',
       categorias: [],
       operationsProjectId: '',
       primaryColor: '#1D4ED8',
       secondaryColor: '#111827',
-      instrutores: [],
       preRequisitos: '',
       modeloCertificado: '',
       certificado: false,
@@ -757,24 +720,6 @@ export function EditorCourse() {
     );
   }, [apiCourse, operationsProjectOptionsData]);
 
-  const instructorOptions = useMemo(() => {
-    const fromCourse = (apiCourse?.instructors ?? []).map((item) => ({
-      value: String(item.id),
-      label: item.name,
-      avatarUrl: getInstructorAvatarUrl(item.avatarId),
-      meta: `ID ${item.id}`,
-    }));
-    const fromDirectory = (instructorListData?.data ?? []).map((item) => ({
-      value: String(item.id),
-      label: item.name,
-      avatarUrl: getInstructorAvatarUrl(item.avatarId),
-      meta: item.qualificationSlugs?.join(' • ') || `ID ${item.id}`,
-    }));
-    return [...fromCourse, ...fromDirectory].filter(
-      (item, i, arr) => arr.findIndex((c) => c.value === item.value) === i
-    );
-  }, [apiCourse?.instructors, instructorListData]);
-
   const certificateOptions = useMemo(() => {
     const serverOptions = (certificateTemplateData?.data ?? []).map((item) => ({
       value: item.slug || String(item.id),
@@ -881,13 +826,13 @@ export function EditorCourse() {
       nivel: toPtLevel(apiCourse.level),
       status: toPtStatus(apiCourse.status),
       tipoOferta: toPtOfferingType(apiCourse.offeringType),
+      localeId: apiCourse.locale_id ? String(apiCourse.locale_id) : '',
       categorias: apiCourse.categories ?? [],
       operationsProjectId: apiCourse.operationsProjectId
         ? String(apiCourse.operationsProjectId)
         : '',
       primaryColor: apiCourse.primaryColor || '#1D4ED8',
       secondaryColor: apiCourse.secondaryColor || '#111827',
-      instrutores: (apiCourse.instructorIds ?? []).map(String),
       preRequisitos: apiCourse.requirements ?? '',
       modeloCertificado: nextCertificateModel,
       certificado: apiCourse.hasCertificate ?? false,
@@ -969,14 +914,18 @@ export function EditorCourse() {
     setIsSavingResources(true);
     try {
       const saved = await updateCourseResources(request, courseId, {
-        recursos: nextResources.map((item) => ({
-          nome: item.name,
-          ...(typeof item.fileId === 'number' && item.fileId > 0
-            ? { fileId: item.fileId }
-            : {}),
-          ...(item.type ? { tipo: item.type } : {}),
-          publico: item.public,
-        })),
+        recursos: nextResources.map((item) => {
+          const normalizedType = normalizeCourseResourceType(item.type);
+
+          return {
+            nome: item.name,
+            ...(typeof item.fileId === 'number' && item.fileId > 0
+              ? { fileId: item.fileId }
+              : {}),
+            ...(normalizedType ? { type: normalizedType } : {}),
+            is_public: item.public,
+          };
+        }),
       });
 
       setCourseResources(saved.map(mapApiCourseResourceToLocal));
@@ -1006,7 +955,7 @@ export function EditorCourse() {
               fileId: uploaded.id,
               name: file.name,
               size: formatFileSize(file.size),
-              type: file.type || file.name.split('.').pop() || 'file',
+              type: 'student_download',
               public: true,
             })
           )
@@ -1060,9 +1009,16 @@ export function EditorCourse() {
       return;
     }
 
+    const downloadKey = String(item.fileId ?? item.id);
+    setDownloadingCourseResourceKeys((current) => {
+      const next = new Set(current);
+      next.add(downloadKey);
+      return next;
+    });
+
     try {
       const response = await request<{ url?: string }>({
-        url: `/file/open/${item.fileId}`,
+        url: `/file/download/${item.fileId}`,
         method: 'PUT',
       });
       const url = response?.data?.url;
@@ -1070,9 +1026,39 @@ export function EditorCourse() {
         toast.error('Nao foi possivel gerar o link de download.');
         return;
       }
-      window.open(url, '_blank', 'noopener,noreferrer');
+
+      try {
+        const downloadResponse = await fetch(url);
+        if (!downloadResponse.ok) {
+          throw new Error('download request failed');
+        }
+
+        const blob = await downloadResponse.blob();
+        const objectUrl = window.URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = objectUrl;
+        anchor.download = item.name || `arquivo-${item.fileId}`;
+        anchor.rel = 'noopener noreferrer';
+        document.body.appendChild(anchor);
+        anchor.click();
+        anchor.remove();
+        window.URL.revokeObjectURL(objectUrl);
+      } catch {
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.rel = 'noopener noreferrer';
+        document.body.appendChild(anchor);
+        anchor.click();
+        anchor.remove();
+      }
     } catch {
       toast.error('Nao foi possivel baixar o recurso.');
+    } finally {
+      setDownloadingCourseResourceKeys((current) => {
+        const next = new Set(current);
+        next.delete(downloadKey);
+        return next;
+      });
     }
   }
 
@@ -1112,7 +1098,11 @@ export function EditorCourse() {
     }
     const objectUrl = URL.createObjectURL(file);
     setter(objectUrl);
-    type === 'logo' ? setUploadingLogo(true) : setUploadingBanner(true);
+    if (type === 'logo') {
+      setUploadingLogo(true);
+    } else {
+      setUploadingBanner(true);
+    }
     try {
       const formData = new FormData();
       formData.append('file', file);
@@ -1136,7 +1126,11 @@ export function EditorCourse() {
     } catch {
       toast.error(t('toasts.fileUploadError'));
     } finally {
-      type === 'logo' ? setUploadingLogo(false) : setUploadingBanner(false);
+      if (type === 'logo') {
+        setUploadingLogo(false);
+      } else {
+        setUploadingBanner(false);
+      }
     }
   }
 
@@ -1235,21 +1229,6 @@ export function EditorCourse() {
     }
   }
 
-  function handleCreateInstructor() {
-    setEditingInstructorId(null);
-    setInstructorEditSheetOpen(true);
-  }
-
-  function handleEditInstructor(instructorId: string) {
-    const parsed = Number(instructorId);
-    if (!Number.isFinite(parsed) || parsed <= 0) {
-      toast.error('Instrutor inválido para edição.');
-      return;
-    }
-    setEditingInstructorId(parsed);
-    setInstructorEditSheetOpen(true);
-  }
-
   function handleEditVideoProfile(profileId: number) {
     const profile = allVideoProfiles.find((p) => p.id === profileId);
     if (!profile) return;
@@ -1390,7 +1369,10 @@ export function EditorCourse() {
     if (data.status === 'ativo') {
       const requiredProfileIds = new Set(linkedProfileIds);
       const invalidLesson = lessons.find((lesson) => {
-        if (lesson.type !== 'video' || lesson.videoProvider !== 'file_storage') {
+        if (
+          lesson.type !== 'video' ||
+          lesson.videoProvider !== 'file_storage'
+        ) {
           return false;
         }
 
@@ -1674,6 +1656,120 @@ export function EditorCourse() {
                         )}
                       />
                     </div>
+
+                    <FormField
+                      control={form.control}
+                      name="localeId"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="text-xs">
+                            {courseLocaleLabel}
+                          </FormLabel>
+                          <FormControl>
+                            <EntityPicker
+                              value={field.value ? Number(field.value) : null}
+                              onChange={(value) => {
+                                form.setValue(
+                                  'localeId',
+                                  value ? String(value) : '',
+                                  {
+                                    shouldDirty: true,
+                                    shouldTouch: true,
+                                    shouldValidate: true,
+                                  }
+                                );
+                              }}
+                              valueType="number"
+                              placeholder="Selecionar idioma..."
+                              searchable
+                              showCreateButton
+                              createTitle="Novo Idioma"
+                              createFields={[
+                                {
+                                  name: 'name',
+                                  label: 'Nome',
+                                  type: 'text',
+                                  required: true,
+                                },
+                                {
+                                  name: 'code',
+                                  label: 'Código (2 letras)',
+                                  type: 'text',
+                                  required: true,
+                                },
+                                {
+                                  name: 'region',
+                                  label: 'Região (2 letras)',
+                                  type: 'text',
+                                  required: false,
+                                },
+                              ]}
+                              loadOptions={async ({ page, search }) => {
+                                try {
+                                  const res = await request<
+                                    | {
+                                        data?: Array<{
+                                          id: number;
+                                          name: string;
+                                          code: string;
+                                          region?: string;
+                                        }>;
+                                      }
+                                    | Array<{
+                                        id: number;
+                                        name: string;
+                                        code: string;
+                                        region?: string;
+                                      }>
+                                  >({
+                                    url: `/core/locales?page=${page}&search=${encodeURIComponent(search ?? '')}`,
+                                    method: 'GET',
+                                  });
+
+                                  const payload = Array.isArray(res.data)
+                                    ? res.data
+                                    : (res.data?.data ?? []);
+
+                                  return {
+                                    items: payload,
+                                    hasMore: false,
+                                  };
+                                } catch {
+                                  return {
+                                    items: [],
+                                    hasMore: false,
+                                  };
+                                }
+                              }}
+                              getOptionValue={(option) => option.id}
+                              getOptionLabel={(option) =>
+                                `${option.name} (${option.code})`
+                              }
+                              onCreate={async (data) => {
+                                const res = await request<{
+                                  id: number;
+                                  name: string;
+                                  code: string;
+                                  region?: string;
+                                }>({
+                                  url: '/core/locales',
+                                  method: 'POST',
+                                  data,
+                                });
+
+                                return {
+                                  id: res.data.id,
+                                  name: res.data.name,
+                                  code: res.data.code,
+                                  region: res.data.region,
+                                };
+                              }}
+                            />
+                          </FormControl>
+                          <FormMessage className="text-xs" />
+                        </FormItem>
+                      )}
+                    />
                   </CardContent>
                 </Card>
 
@@ -1715,19 +1811,22 @@ export function EditorCourse() {
                   levels={NIVEIS}
                   statuses={STATUS_OPTIONS}
                   offeringTypes={OFFERING_TYPE_OPTIONS}
+                  compact
                 />
                 <CourseRelationsCard
                   form={form}
                   t={t}
                   categoryOptions={categoryOptions}
                   projectOptions={projectOptions}
-                  instructorOptions={instructorOptions}
                   onCreateCategory={handleCreateCategory}
-                  onCreateInstructor={handleCreateInstructor}
                   onEditCategory={handleEditCategory}
-                  onEditInstructor={handleEditInstructor}
+                  compact
+                />
+                <CourseInstructorsSummaryCard
+                  instructors={apiCourse?.instructors ?? []}
+                  compact
                 />
-                <CourseContentCard form={form} />
+                <CourseContentCard form={form} compact />
               </TabsContent>
 
               {/* ── Tab: Mídia ──────────────────────────────────────────── */}
@@ -1780,6 +1879,7 @@ export function EditorCourse() {
                   logoImageType={apiCourse?.logoImageType}
                   bannerImageType={apiCourse?.bannerImageType}
                   t={t}
+                  compact
                 />
               </TabsContent>
 
@@ -1893,17 +1993,20 @@ export function EditorCourse() {
                     ) : (
                       <div className="flex flex-col gap-1">
                         {courseResources.map((item) => {
-                          const ItemIcon = getResourceIcon(item.type);
+                          const isDownloadingResource =
+                            downloadingCourseResourceKeys.has(
+                              String(item.fileId ?? item.id)
+                            );
+
                           return (
                             <div
                               key={item.id}
                               className="flex items-center gap-2 rounded-md border bg-muted/20 px-2.5 py-2"
                             >
-                              <ItemIcon
-                                className={cn(
-                                  'size-3.5 shrink-0',
-                                  getResourceIconColor(item.type)
-                                )}
+                              <FileTypeIcon
+                                filename={item.name}
+                                mimeType={item.type}
+                                size={14}
                               />
                               <div className="flex-1 min-w-0">
                                 <p className="text-xs truncate font-medium">
@@ -1914,36 +2017,56 @@ export function EditorCourse() {
                                     t('structureEditor.resources.attachedFile')}
                                 </p>
                               </div>
-                              <Button
-                                type="button"
-                                variant="ghost"
-                                size="icon"
-                                className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
-                                onClick={() =>
-                                  void handleDownloadCourseResource(item)
-                                }
-                                aria-label={t(
+                              <IconActionTooltip
+                                label={t(
                                   'structureEditor.resources.downloadAria',
                                   { name: item.name }
                                 )}
+                                asWrapper={isDownloadingResource}
                               >
-                                <Download className="size-3" />
-                              </Button>
-                              <Button
-                                type="button"
-                                variant="ghost"
-                                size="icon"
-                                className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
-                                onClick={() =>
-                                  void handleRemoveCourseResource(item)
-                                }
-                                aria-label={t(
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
+                                  disabled={isDownloadingResource}
+                                  onClick={() =>
+                                    void handleDownloadCourseResource(item)
+                                  }
+                                  aria-label={t(
+                                    'structureEditor.resources.downloadAria',
+                                    { name: item.name }
+                                  )}
+                                >
+                                  {isDownloadingResource ? (
+                                    <Loader2 className="size-3 animate-spin" />
+                                  ) : (
+                                    <Download className="size-3" />
+                                  )}
+                                </Button>
+                              </IconActionTooltip>
+                              <IconActionTooltip
+                                label={t(
                                   'structureEditor.resources.removeAria',
                                   { name: item.name }
                                 )}
                               >
-                                <X className="size-3" />
-                              </Button>
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
+                                  onClick={() =>
+                                    void handleRemoveCourseResource(item)
+                                  }
+                                  aria-label={t(
+                                    'structureEditor.resources.removeAria',
+                                    { name: item.name }
+                                  )}
+                                >
+                                  <X className="size-3" />
+                                </Button>
+                              </IconActionTooltip>
                             </div>
                           );
                         })}
@@ -1963,11 +2086,13 @@ export function EditorCourse() {
                   t={t}
                   options={certificateOptions}
                   onCreateTemplate={handleCreateCertificateTemplate}
+                  compact
                 />
-                <CourseFlagsCard form={form} t={t} />
+                <CourseFlagsCard form={form} t={t} compact />
                 <CourseDangerZoneCard
                   t={t}
                   onDelete={() => setDeleteDialogOpen(true)}
+                  compact
                 />
               </TabsContent>
 
@@ -2087,36 +2212,48 @@ export function EditorCourse() {
                                         )}
                                   </p>
                                 </div>
-                                <Button
-                                  type="button"
-                                  variant="ghost"
-                                  size="icon"
-                                  className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
-                                  onClick={() =>
-                                    handleEditVideoProfile(profileId)
-                                  }
-                                  aria-label={t(
+                                <IconActionTooltip
+                                  label={t(
                                     'structureEditor.videoProfiles.editAria'
                                   )}
                                 >
-                                  <Pencil className="size-3" />
-                                </Button>
-                                <Button
-                                  type="button"
-                                  variant="ghost"
-                                  size="icon"
-                                  className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
-                                  onClick={() =>
-                                    setLinkedProfileIds((prev) =>
-                                      prev.filter((id) => id !== profileId)
-                                    )
-                                  }
-                                  aria-label={t(
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
+                                    onClick={() =>
+                                      handleEditVideoProfile(profileId)
+                                    }
+                                    aria-label={t(
+                                      'structureEditor.videoProfiles.editAria'
+                                    )}
+                                  >
+                                    <Pencil className="size-3" />
+                                  </Button>
+                                </IconActionTooltip>
+                                <IconActionTooltip
+                                  label={t(
                                     'structureEditor.videoProfiles.removeAria'
                                   )}
                                 >
-                                  <X className="size-3" />
-                                </Button>
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
+                                    onClick={() =>
+                                      setLinkedProfileIds((prev) =>
+                                        prev.filter((id) => id !== profileId)
+                                      )
+                                    }
+                                    aria-label={t(
+                                      'structureEditor.videoProfiles.removeAria'
+                                    )}
+                                  >
+                                    <X className="size-3" />
+                                  </Button>
+                                </IconActionTooltip>
                               </div>
                             );
                           })}
@@ -2245,33 +2382,6 @@ export function EditorCourse() {
         </div>
       </form>
 
-      <InstructorFormSheet
-        open={instructorEditSheetOpen}
-        onOpenChange={(open) => {
-          setInstructorEditSheetOpen(open);
-          if (!open) {
-            setEditingInstructorId(null);
-          }
-        }}
-        instructorId={editingInstructorId}
-        onSaved={async (instructor) => {
-          if (editingInstructorId === null && instructor?.id) {
-            const createdId = String(instructor.id);
-            const current = form.getValues('instrutores') ?? [];
-            if (!current.includes(createdId)) {
-              form.setValue('instrutores', [...current, createdId], {
-                shouldDirty: true,
-                shouldTouch: true,
-                shouldValidate: true,
-              });
-            }
-          }
-
-          await refetchInstructorOptions();
-          await refetchCourse();
-        }}
-      />
-
       <Sheet
         open={videoProfileEditSheetOpen}
         onOpenChange={(open) => {
@@ -2459,27 +2569,3 @@ export function EditorCourse() {
     </Form>
   );
 }
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-function StatChip({
-  icon,
-  label,
-  value,
-}: {
-  icon: React.ReactNode;
-  label: string;
-  value: string | number;
-}) {
-  return (
-    <div className="flex items-center gap-2 rounded-md border bg-background px-2.5 py-2">
-      <span className="text-muted-foreground shrink-0">{icon}</span>
-      <div className="min-w-0">
-        <p className="text-[0.65rem] text-muted-foreground truncate">{label}</p>
-        <p className="text-sm font-semibold tabular-nums leading-none">
-          {value}
-        </p>
-      </div>
-    </div>
-  );
-}