@hed-hog/lms 0.0.361 → 0.0.365

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

@@ -8,28 +8,15 @@ import {
   SearchBar,
   ViewModeToggle,
 } from '@/components/entity-list';
+import { useNotifications } from '@/components/notification-bell';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Checkbox } from '@/components/ui/checkbox';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  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 { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Separator } from '@/components/ui/separator';
 import {
   Sheet,
@@ -38,7 +25,6 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   Table,
@@ -54,16 +40,12 @@ import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
 import {
-  AlertTriangle,
   Archive,
   Award,
   BookOpen,
-  Eye,
   Layers,
   Loader2,
-  MoreHorizontal,
   Paperclip,
-  Pencil,
   Plus,
   Star,
   Trash2,
@@ -83,6 +65,8 @@ import {
   DEFAULT_COURSE_FORM_VALUES,
   getCourseSheetSchema,
 } from '../_components/course-form-sheet';
+import { CourseDeleteDialog } from './_components/CourseDeleteDialog';
+import { CourseRowActions } from './_components/CourseRowActions';
 
 const API_COURSES_CACHE_KEY = 'lms:courses:api-cache';
 
@@ -111,6 +95,7 @@ interface Curso {
   criadoEm: string;
   logoFileId?: number | null;
   operationsProjectId?: number | null;
+  processando?: boolean;
 }
 
 type ApiCourse = {
@@ -138,6 +123,7 @@ type ApiCourse = {
   createdAt: string;
   logoFileId?: number | null;
   operationsProjectId?: number | null;
+  hasRunningJobs?: boolean;
 };
 
 type ApiCourseList = {
@@ -169,6 +155,26 @@ type ApiCategoryList = {
   pageSize: number;
 };
 
+type ApiCourseDeletionImpact = {
+  fileCount: number;
+  totalBytes: number;
+  formattedSize: string;
+  countsBySource?: Record<string, number>;
+  enrollmentCount?: number;
+};
+
+type ApiCourseDetail = ApiCourse & {
+  deletionImpact?: ApiCourseDeletionImpact;
+};
+
+type ApiQueuedDeleteResponse = {
+  success: boolean;
+  status: 'queued';
+  queueJobId: number;
+  notificationId: number;
+  deletionImpact?: ApiCourseDeletionImpact;
+};
+
 type Locale = {
   id?: number;
   code: string;
@@ -177,6 +183,8 @@ type Locale = {
 
 type ViewMode = 'cards' | 'list';
 
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
 function normalizeEnumValue(value?: string | null) {
   return String(value ?? '')
     .trim()
@@ -185,52 +193,29 @@ function normalizeEnumValue(value?: string | null) {
     .toLowerCase();
 }
 
-function toPtLevel(level?: string | null): CourseSheetFormValues['nivel'] {
-  const normalizedLevel = normalizeEnumValue(level);
-
-  if (normalizedLevel === 'iniciante' || normalizedLevel === 'beginner') {
-    return 'iniciante';
-  }
-  if (
-    normalizedLevel === 'intermediario' ||
-    normalizedLevel === 'intermediate'
-  ) {
-    return 'intermediario';
-  }
-  if (normalizedLevel === 'avancado' || normalizedLevel === 'advanced') {
-    return 'avancado';
-  }
-
+function toPtLevel(level?: string | null): Curso['nivel'] {
+  const v = normalizeEnumValue(level);
+  if (v === 'iniciante' || v === 'beginner') return 'iniciante';
+  if (v === 'intermediario' || v === 'intermediate') return 'intermediario';
+  if (v === 'avancado' || v === 'advanced') return 'avancado';
   return 'iniciante';
 }
 
+function toPtStatus(status?: string | null): Curso['status'] {
+  const v = normalizeEnumValue(status);
+  if (v === 'publicado' || v === 'published' || v === 'active' || v === 'ativo')
+    return 'publicado';
+  if (v === 'rascunho' || v === 'draft') return 'rascunho';
+  if (v === 'arquivado' || v === 'archived') return 'arquivado';
+  return 'rascunho';
+}
+
 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);
-
-  if (
-    normalizedStatus === 'publicado' ||
-    normalizedStatus === 'ativo' ||
-    normalizedStatus === 'active' ||
-    normalizedStatus === 'published'
-  ) {
-    return 'publicado';
-  }
-  if (normalizedStatus === 'rascunho' || normalizedStatus === 'draft') {
-    return 'rascunho';
-  }
-  if (normalizedStatus === 'arquivado' || normalizedStatus === 'archived') {
-    return 'arquivado';
-  }
-
-  return 'rascunho';
-}
-
 function mapApiCourse(course: ApiCourse): Curso {
   return {
     id: course.id,
@@ -255,6 +240,7 @@ function mapApiCourse(course: ApiCourse): Curso {
     criadoEm: course.createdAt ?? '',
     logoFileId: course.logoFileId ?? null,
     operationsProjectId: course.operationsProjectId ?? null,
+    processando: course.hasRunningJobs ?? false,
   };
 }
 
@@ -288,6 +274,24 @@ function getContrastColor(hex: string) {
   return luminance > 0.6 ? '#111827' : '#FFFFFF';
 }
 
+function formatBytes(bytes: number) {
+  if (!Number.isFinite(bytes) || bytes <= 0) {
+    return '0 B';
+  }
+
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  let value = bytes;
+  let unitIndex = 0;
+
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex += 1;
+  }
+
+  const digits = unitIndex === 0 ? 0 : value >= 10 ? 1 : 2;
+  return `${value.toFixed(digits)} ${units[unitIndex]}`;
+}
+
 // ── Constants ─────────────────────────────────────────────────────────────────
 
 const NIVEL_COLOR: Record<string, string> = {
@@ -340,8 +344,12 @@ export default function CursosPage() {
   // UI
   const [sheetOpen, setSheetOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [confirmationInput, setConfirmationInput] = useState('');
   const [createCategorySheetOpen, setCreateCategorySheetOpen] = useState(false);
   const [saving, setSaving] = useState(false);
+  const [archivingCourse, setArchivingCourse] = useState(false);
+  const [queuingDelete, setQueuingDelete] = useState(false);
+  const [loadingDeleteImpact, setLoadingDeleteImpact] = useState(false);
   const [creatingCategory, setCreatingCategory] = useState(false);
   const [newCategoryName, setNewCategoryName] = useState('');
   const [newCategorySlug, setNewCategorySlug] = useState('');
@@ -349,12 +357,23 @@ export default function CursosPage() {
 
   // Data
   const [cursoToDelete, setCursoToDelete] = useState<Curso | null>(null);
+  const [deleteImpact, setDeleteImpact] =
+    useState<ApiCourseDeletionImpact | null>(null);
   const [cachedCourseList, setCachedCourseList] =
     useState<ApiCourseList | null>(null);
 
   // Selection
   const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
 
+  // Job tracking
+  const [deletingCourseIds, setDeletingCourseIds] = useState<Set<number>>(
+    new Set()
+  );
+  const [notificationIdToCourseId, setNotificationIdToCourseId] = useState<
+    Map<number, number>
+  >(new Map());
+  const { notifications } = useNotifications();
+
   // Search/filter state (reactive)
   const [buscaInput, setBuscaInput] = useState('');
   const [filtroStatusInput, setFiltroStatusInput] = useState('todos');
@@ -428,6 +447,8 @@ export default function CursosPage() {
       });
       return response.data;
     },
+    refetchInterval: 30_000,
+    refetchIntervalInBackground: false,
   });
 
   useEffect(() => {
@@ -446,6 +467,23 @@ export default function CursosPage() {
     filtroCatInput,
   ]);
 
+  // Track active deletion jobs from notifications
+  useEffect(() => {
+    const activeNotifications = notifications.filter(
+      (n) => n.progress != null && n.progress < 100
+    );
+
+    const coursesInProgress = new Set<number>();
+    activeNotifications.forEach((notification) => {
+      const courseId = notificationIdToCourseId.get(notification.id);
+      if (courseId) {
+        coursesInProgress.add(courseId);
+      }
+    });
+
+    setDeletingCourseIds(coursesInProgress);
+  }, [notifications, notificationIdToCourseId]);
+
   const { data: statsData } = useQuery<ApiCourseStats>({
     queryKey: ['lms-courses-stats'],
     queryFn: async () => {
@@ -455,6 +493,8 @@ export default function CursosPage() {
       });
       return response.data;
     },
+    refetchInterval: 30_000,
+    refetchIntervalInBackground: false,
   });
 
   const { data: categoryListData, refetch: refetchCategoryOptions } =
@@ -553,15 +593,6 @@ export default function CursosPage() {
     () => cursos.filter((curso) => selectedIds.has(curso.id)),
     [cursos, selectedIds]
   );
-  const selectedArchivedIds = useMemo(
-    () =>
-      selectedCourses
-        .filter((curso) => curso.status === 'arquivado')
-        .map((curso) => curso.id),
-    [selectedCourses]
-  );
-  const hasSelectedNonArchived =
-    selectedCourses.length > selectedArchivedIds.length;
   const totalPages = Math.max(1, effectiveCourseList?.lastPage ?? 1);
   const safePage = Math.min(currentPage, totalPages);
   function clearFilters() {
@@ -591,16 +622,63 @@ export default function CursosPage() {
     );
   }
 
-  function openDeleteDialog(curso: Curso, e: React.MouseEvent) {
-    e.stopPropagation();
+  const deleteConfirmMatches =
+    confirmationInput === cursoToDelete?.tituloComercial;
+  const deleteRequiresArchive = cursoToDelete?.status !== 'arquivado';
+  const canDeleteCourse =
+    Boolean(cursoToDelete) &&
+    !deleteRequiresArchive &&
+    deleteConfirmMatches &&
+    !loadingDeleteImpact &&
+    !queuingDelete &&
+    !archivingCourse &&
+    Boolean(deleteImpact);
+
+  async function loadDeleteImpact(cursoId: number) {
+    setLoadingDeleteImpact(true);
+    setDeleteImpact(null);
 
-    if (curso.status !== 'arquivado') {
-      toast.error(t('toasts.deleteOnlyArchived'));
-      return;
+    try {
+      const response = await request<ApiCourseDetail>({
+        url: `/lms/courses/${cursoId}`,
+        method: 'GET',
+      });
+
+      const impact = response.data.deletionImpact;
+      if (impact) {
+        setDeleteImpact({
+          ...impact,
+          formattedSize:
+            impact.formattedSize || formatBytes(impact.totalBytes ?? 0),
+        });
+      }
+
+      setCursoToDelete((previous) =>
+        previous && previous.id === cursoId
+          ? {
+              ...previous,
+              status: toPtStatus(response.data.status),
+              alunosInscritos:
+                typeof impact?.enrollmentCount === 'number'
+                  ? impact.enrollmentCount
+                  : previous.alunosInscritos,
+            }
+          : previous
+      );
+    } catch {
+      toast.error(t('toasts.courseDeleteImpactLoadError'));
+    } finally {
+      setLoadingDeleteImpact(false);
     }
+  }
 
+  async function openDeleteDialog(curso: Curso, e?: React.MouseEvent) {
+    e?.stopPropagation();
+    setConfirmationInput('');
+    setDeleteImpact(null);
     setCursoToDelete(curso);
     setDeleteDialogOpen(true);
+    await loadDeleteImpact(curso.id);
   }
 
   // ── Selection ─────────────────────────────────────────────────────────────
@@ -630,6 +708,10 @@ export default function CursosPage() {
     router.push(`/lms/courses/${curso.id}`);
   }
 
+  function openCourseInNewTab(curso: Curso) {
+    window.open(`/lms/courses/${curso.id}`, '_blank', 'noopener,noreferrer');
+  }
+
   async function onSubmit(data: CourseSheetFormValues) {
     setSaving(true);
     try {
@@ -673,26 +755,101 @@ export default function CursosPage() {
 
   async function confirmDelete() {
     if (!cursoToDelete) return;
+    if (confirmationInput !== cursoToDelete.tituloComercial) {
+      toast.error(
+        t('form.validationErrors.confirmationMismatch') ||
+          'Nome do curso não corresponde.'
+      );
+      return;
+    }
+
     if (cursoToDelete.status !== 'arquivado') {
       toast.error(t('toasts.deleteOnlyArchived'));
       return;
     }
 
-    await request({
-      url: `/lms/courses/${cursoToDelete.id}`,
-      method: 'DELETE',
-    });
-    setSelectedIds((prev) => {
-      const n = new Set(prev);
-      n.delete(cursoToDelete.id);
-      return n;
-    });
-    toast.success(
-      t('toasts.courseRemoved', { title: cursoToDelete.tituloComercial })
-    );
-    setCursoToDelete(null);
-    setDeleteDialogOpen(false);
-    await refetchCourses();
+    if (!deleteImpact) {
+      toast.error(t('toasts.courseDeleteImpactLoadError'));
+      return;
+    }
+
+    setQueuingDelete(true);
+    try {
+      const response = await request<ApiQueuedDeleteResponse>({
+        url: `/lms/courses/${cursoToDelete.id}`,
+        method: 'DELETE',
+      });
+
+      // Track the deletion job with the course ID
+      const notifId = response.data?.notificationId ?? 0;
+      if (notifId > 0) {
+        setNotificationIdToCourseId((prev) => {
+          const next = new Map(prev);
+          next.set(notifId, cursoToDelete.id);
+          return next;
+        });
+        setDeletingCourseIds((prev) => {
+          const next = new Set(prev);
+          next.add(cursoToDelete.id);
+          return next;
+        });
+      }
+
+      setSelectedIds((prev) => {
+        const n = new Set(prev);
+        n.delete(cursoToDelete.id);
+        return n;
+      });
+      toast.success(
+        t('toasts.courseDeleteQueued', {
+          title: cursoToDelete.tituloComercial,
+          files:
+            response.data?.deletionImpact?.fileCount ?? deleteImpact.fileCount,
+        })
+      );
+      setCursoToDelete(null);
+      setDeleteImpact(null);
+      setDeleteDialogOpen(false);
+      setConfirmationInput('');
+      await refetchCourses();
+    } catch (error) {
+      const message =
+        error instanceof Error && error.message ? error.message : '';
+
+      if (message.includes('ONLY_ARCHIVED_COURSE_CAN_BE_DELETED')) {
+        toast.error(t('toasts.deleteOnlyArchived'));
+      } else {
+        toast.error(t('toasts.courseDeleteQueueError'));
+      }
+    } finally {
+      setQueuingDelete(false);
+    }
+  }
+
+  async function archiveCourseForDelete() {
+    if (!cursoToDelete || cursoToDelete.status === 'arquivado') return;
+
+    setArchivingCourse(true);
+    try {
+      await request({
+        url: `/lms/courses/${cursoToDelete.id}`,
+        method: 'PATCH',
+        data: { status: 'archived' },
+      });
+
+      setCursoToDelete((previous) =>
+        previous ? { ...previous, status: 'arquivado' } : previous
+      );
+      toast.success(
+        t('toasts.courseArchived', { title: cursoToDelete.tituloComercial })
+      );
+      await refetchCourses();
+      await loadDeleteImpact(cursoToDelete.id);
+    } catch {
+      toast.error(t('toasts.courseArchiveError'));
+    } finally {
+      setArchivingCourse(false);
+    }
   }
 
   // ── KPI counts ────────────────────────────────────────────────────────────
@@ -993,10 +1150,21 @@ export default function CursosPage() {
                   variant="secondary"
                   className="gap-1.5"
                   onClick={() => {
-                    toast.info(
-                      t('toasts.coursesArchived', { count: selectedIds.size })
-                    );
-                    setSelectedIds(new Set());
+                    Promise.all(
+                      Array.from(selectedIds).map((id) =>
+                        request({
+                          url: `/lms/courses/${id}`,
+                          method: 'PATCH',
+                          data: { status: 'archived' },
+                        })
+                      )
+                    ).then(async () => {
+                      toast.success(
+                        t('toasts.coursesArchived', { count: selectedIds.size })
+                      );
+                      setSelectedIds(new Set());
+                      await refetchCourses();
+                    });
                   }}
                 >
                   <Archive className="size-3.5" /> {t('bulkActions.archive')}
@@ -1006,28 +1174,7 @@ export default function CursosPage() {
                   variant="secondary"
                   className="gap-1.5 text-destructive hover:text-destructive"
                   onClick={() => {
-                    if (selectedArchivedIds.length === 0) {
-                      toast.error(t('toasts.deleteOnlyArchived'));
-                      return;
-                    }
-
-                    if (hasSelectedNonArchived) {
-                      toast.warning(t('toasts.bulkDeleteArchivedOnly'));
-                    }
-
-                    Promise.all(
-                      selectedArchivedIds.map((id) =>
-                        request({ url: `/lms/courses/${id}`, method: 'DELETE' })
-                      )
-                    ).then(async () => {
-                      toast.success(
-                        t('toasts.coursesRemoved', {
-                          count: selectedArchivedIds.length,
-                        })
-                      );
-                      setSelectedIds(new Set());
-                      await refetchCourses();
-                    });
+                    toast.info(t('toasts.bulkDeleteUseSingleFlow'));
                   }}
                 >
                   <Trash2 className="size-3.5" /> {t('bulkActions.delete')}
@@ -1082,6 +1229,12 @@ export default function CursosPage() {
                   <TableHead>{t('table.headers.level')}</TableHead>
                   <TableHead>{t('table.headers.status')}</TableHead>
                   <TableHead>{t('table.headers.categories')}</TableHead>
+                  <TableHead className="text-right">
+                    {t('table.headers.sessions')}
+                  </TableHead>
+                  <TableHead className="text-right">
+                    {t('table.headers.lessons')}
+                  </TableHead>
                   <TableHead className="text-right">
                     {t('cards.studentsLabel')}
                   </TableHead>
@@ -1109,6 +1262,12 @@ export default function CursosPage() {
                     <TableCell>
                       <Skeleton className="h-5 w-28 rounded-full" />
                     </TableCell>
+                    <TableCell className="text-right">
+                      <Skeleton className="ml-auto h-4 w-8" />
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Skeleton className="ml-auto h-4 w-8" />
+                    </TableCell>
                     <TableCell className="text-right">
                       <Skeleton className="ml-auto h-4 w-12" />
                     </TableCell>
@@ -1158,6 +1317,12 @@ export default function CursosPage() {
                       onDoubleClick={() =>
                         router.push(`/lms/courses/${curso.id}`)
                       }
+                      onMouseDown={(e) => {
+                        if (e.button === 1) {
+                          e.preventDefault();
+                          openCourseInNewTab(curso);
+                        }
+                      }}
                       title={t('cards.tooltip')}
                     >
                       <div
@@ -1186,57 +1351,29 @@ export default function CursosPage() {
                         <div className="flex items-start gap-2.5">
                           <CourseAvatar
                             fileId={curso.logoFileId}
-                            title={curso.nomeInterno}
+                            title={curso.tituloComercial}
                             className="size-10 shrink-0 rounded-lg"
                             iconSize="size-5"
                           />
                           <div className="min-w-0 flex-1">
-                            <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>
-                                <DropdownMenuTrigger asChild>
-                                  <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    className="-mr-1.5 -mt-0.5 size-7 shrink-0"
-                                    onClick={(e) => e.stopPropagation()}
-                                    aria-label={t('table.actions.label')}
-                                  >
-                                    <MoreHorizontal className="size-3.5" />
-                                  </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent
-                                  align="end"
-                                  className="w-48"
-                                >
-                                  <DropdownMenuItem
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      goToCourseDetails(curso, e);
-                                    }}
-                                  >
-                                    <Eye className="mr-2 size-4" />{' '}
-                                    {t('table.actions.viewDetails')}
-                                  </DropdownMenuItem>
-                                  <DropdownMenuItem
-                                    onClick={(e) => goToCourseDetails(curso, e)}
-                                  >
-                                    <Pencil className="mr-2 size-4" />{' '}
-                                    {t('table.actions.edit')}
-                                  </DropdownMenuItem>
-                                  <DropdownMenuSeparator />
-                                  <DropdownMenuItem
-                                    disabled={curso.status !== 'arquivado'}
-                                    className="text-destructive focus:text-destructive"
-                                    onClick={(e) => openDeleteDialog(curso, e)}
-                                  >
-                                    <Trash2 className="mr-2 size-4" />{' '}
-                                    {t('table.actions.delete')}
-                                  </DropdownMenuItem>
-                                </DropdownMenuContent>
-                              </DropdownMenu>
+                            <div
+                              className="flex items-center justify-between gap-1"
+                              onClick={(e) => e.stopPropagation()}
+                            >
+                              <p className="truncate text-sm font-semibold leading-tight text-foreground">
+                                {curso.tituloComercial}
+                              </p>
+                              <CourseRowActions
+                                className="ml-auto -mr-1"
+                                onView={() => goToCourseDetails(curso)}
+                                onEdit={() => goToCourseDetails(curso)}
+                                onDelete={(event) =>
+                                  void openDeleteDialog(curso, event)
+                                }
+                                viewLabel={t('table.actions.viewDetails')}
+                                editLabel={t('table.actions.edit')}
+                                deleteLabel={t('table.actions.delete')}
+                              />
                             </div>
 
                             <div className="mt-1.5 flex flex-wrap items-center gap-1">
@@ -1251,6 +1388,47 @@ export default function CursosPage() {
                               >
                                 {getStatusLabel(curso)}
                               </Badge>
+                              {deletingCourseIds.has(curso.id) && (
+                                <motion.div
+                                  initial={{ opacity: 0, scale: 0.8 }}
+                                  animate={{ opacity: 1, scale: 1 }}
+                                  exit={{ opacity: 0, scale: 0.8 }}
+                                  transition={{
+                                    type: 'spring',
+                                    stiffness: 300,
+                                    damping: 30,
+                                  }}
+                                >
+                                  <Badge
+                                    variant="secondary"
+                                    className="gap-1 rounded-full px-2 py-0.5 text-[10px]"
+                                  >
+                                    <Loader2 className="size-2.5 animate-spin" />
+                                    Deletando...
+                                  </Badge>
+                                </motion.div>
+                              )}
+                              {curso.processando &&
+                                !deletingCourseIds.has(curso.id) && (
+                                  <motion.div
+                                    initial={{ opacity: 0, scale: 0.8 }}
+                                    animate={{ opacity: 1, scale: 1 }}
+                                    exit={{ opacity: 0, scale: 0.8 }}
+                                    transition={{
+                                      type: 'spring',
+                                      stiffness: 300,
+                                      damping: 30,
+                                    }}
+                                  >
+                                    <Badge
+                                      variant="secondary"
+                                      className="gap-1 rounded-full px-2 py-0.5 text-[10px]"
+                                    >
+                                      <Loader2 className="size-2.5 animate-spin" />
+                                      Processando...
+                                    </Badge>
+                                  </motion.div>
+                                )}
                             </div>
                           </div>
                         </div>
@@ -1296,6 +1474,12 @@ export default function CursosPage() {
                     <TableHead>{t('table.headers.level')}</TableHead>
                     <TableHead>{t('table.headers.status')}</TableHead>
                     <TableHead>{t('table.headers.categories')}</TableHead>
+                    <TableHead className="text-right">
+                      {t('table.headers.sessions')}
+                    </TableHead>
+                    <TableHead className="text-right">
+                      {t('table.headers.lessons')}
+                    </TableHead>
                     <TableHead className="text-right">
                       {t('cards.studentsLabel')}
                     </TableHead>
@@ -1316,6 +1500,12 @@ export default function CursosPage() {
                         onDoubleClick={() =>
                           router.push(`/lms/courses/${curso.id}`)
                         }
+                        onMouseDown={(e) => {
+                          if (e.button === 1) {
+                            e.preventDefault();
+                            openCourseInNewTab(curso);
+                          }
+                        }}
                         title={t('cards.tooltip')}
                       >
                         <TableCell onClick={(e) => e.stopPropagation()}>
@@ -1368,6 +1558,47 @@ export default function CursosPage() {
                             >
                               {getStatusLabel(curso)}
                             </Badge>
+                            {deletingCourseIds.has(curso.id) && (
+                              <motion.div
+                                initial={{ opacity: 0, scale: 0.8 }}
+                                animate={{ opacity: 1, scale: 1 }}
+                                exit={{ opacity: 0, scale: 0.8 }}
+                                transition={{
+                                  type: 'spring',
+                                  stiffness: 300,
+                                  damping: 30,
+                                }}
+                              >
+                                <Badge
+                                  variant="secondary"
+                                  className="gap-1 text-[11px]"
+                                >
+                                  <Loader2 className="size-2.5 animate-spin" />
+                                  Deletando...
+                                </Badge>
+                              </motion.div>
+                            )}
+                            {curso.processando &&
+                              !deletingCourseIds.has(curso.id) && (
+                                <motion.div
+                                  initial={{ opacity: 0, scale: 0.8 }}
+                                  animate={{ opacity: 1, scale: 1 }}
+                                  exit={{ opacity: 0, scale: 0.8 }}
+                                  transition={{
+                                    type: 'spring',
+                                    stiffness: 300,
+                                    damping: 30,
+                                  }}
+                                >
+                                  <Badge
+                                    variant="secondary"
+                                    className="gap-1 text-[11px]"
+                                  >
+                                    <Loader2 className="size-2.5 animate-spin" />
+                                    Processando...
+                                  </Badge>
+                                </motion.div>
+                              )}
                             {curso.destaque && (
                               <span className="inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[11px] font-medium text-amber-700">
                                 <Star className="size-3 fill-amber-400 text-amber-400" />
@@ -1397,45 +1628,27 @@ export default function CursosPage() {
                             )}
                           </div>
                         </TableCell>
+                        <TableCell className="text-right font-medium">
+                          {curso.quantidadeSessoes}
+                        </TableCell>
+                        <TableCell className="text-right font-medium">
+                          {curso.quantidadeAulas}
+                        </TableCell>
                         <TableCell className="text-right font-medium">
                           {curso.alunosInscritos.toLocaleString('pt-BR')}
                         </TableCell>
                         <TableCell onClick={(e) => e.stopPropagation()}>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="ml-auto size-8"
-                                aria-label={t('table.actions.label')}
-                              >
-                                <MoreHorizontal className="size-4" />
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end" className="w-48">
-                              <DropdownMenuItem
-                                onClick={(e) => goToCourseDetails(curso, e)}
-                              >
-                                <Eye className="mr-2 size-4" />{' '}
-                                {t('table.actions.viewDetails')}
-                              </DropdownMenuItem>
-                              <DropdownMenuItem
-                                onClick={(e) => goToCourseDetails(curso, e)}
-                              >
-                                <Pencil className="mr-2 size-4" />{' '}
-                                {t('table.actions.edit')}
-                              </DropdownMenuItem>
-                              <DropdownMenuSeparator />
-                              <DropdownMenuItem
-                                disabled={curso.status !== 'arquivado'}
-                                className="text-destructive focus:text-destructive"
-                                onClick={(e) => openDeleteDialog(curso, e)}
-                              >
-                                <Trash2 className="mr-2 size-4" />{' '}
-                                {t('table.actions.delete')}
-                              </DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
+                          <CourseRowActions
+                            className="ml-auto"
+                            onView={() => goToCourseDetails(curso)}
+                            onEdit={() => goToCourseDetails(curso)}
+                            onDelete={(event) =>
+                              void openDeleteDialog(curso, event)
+                            }
+                            viewLabel={t('table.actions.viewDetails')}
+                            editLabel={t('table.actions.edit')}
+                            deleteLabel={t('table.actions.delete')}
+                          />
                         </TableCell>
                       </TableRow>
                     );
@@ -1559,42 +1772,44 @@ export default function CursosPage() {
       </Sheet>
 
       {/* ── Delete dialog ────────────────────���────────────────────────────── */}
-      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <DialogContent className="max-w-3xl">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <AlertTriangle className="size-5 text-destructive" />
-              {t('deleteDialog.title')}
-            </DialogTitle>
-            <DialogDescription>
-              {t('deleteDialog.description')}{' '}
-              <strong>{cursoToDelete?.tituloComercial}</strong>?
-              {(cursoToDelete?.alunosInscritos ?? 0) > 0 && (
-                <span className="mt-2 block rounded-md bg-destructive/10 p-2 text-destructive text-sm">
-                  {t('deleteDialog.warning', {
-                    count: cursoToDelete?.alunosInscritos ?? 0,
-                  })}
-                </span>
-              )}
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter className="gap-2">
-            <Button
-              variant="outline"
-              onClick={() => setDeleteDialogOpen(false)}
-            >
-              {t('deleteDialog.actions.cancel')}
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={confirmDelete}
-              className="gap-2"
-            >
-              <Trash2 className="size-4" /> {t('deleteDialog.actions.delete')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <CourseDeleteDialog
+        open={deleteDialogOpen}
+        onOpenChange={(open) => {
+          setDeleteDialogOpen(open);
+          if (!open) {
+            setConfirmationInput('');
+            setDeleteImpact(null);
+            setCursoToDelete(null);
+          }
+        }}
+        course={
+          cursoToDelete
+            ? {
+                title: cursoToDelete.tituloComercial,
+                status: cursoToDelete.status as
+                  | 'publicado'
+                  | 'rascunho'
+                  | 'arquivado',
+                enrollmentCount: cursoToDelete.alunosInscritos,
+              }
+            : null
+        }
+        impact={deleteImpact}
+        loadingImpact={loadingDeleteImpact}
+        confirmationInput={confirmationInput}
+        onConfirmationInputChange={setConfirmationInput}
+        archiving={archivingCourse}
+        queuingDelete={queuingDelete}
+        canDelete={canDeleteCourse}
+        onArchive={() => void archiveCourseForDelete()}
+        onDelete={() => void confirmDelete()}
+        t={
+          t as unknown as (
+            key: string,
+            values?: Record<string, string | number | Date>
+          ) => string
+        }
+      />
     </Page>
   );
 }