@hed-hog/lms 0.0.364 → 0.0.365

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

@@ -0,0 +1,308 @@
+'use client';
+
+import { useState } from 'react';
+import { toast } from 'sonner';
+import {
+  CheckCircle2,
+  Clock,
+  Download,
+  FileArchive,
+  Loader2,
+  Trash2,
+  XCircle,
+} from 'lucide-react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { getPhotoUrl } from '@/lib/get-photo-url';
+import { useApp } from '@hed-hog/next-app-provider';
+import {
+  CourseExportRecord,
+  useDeleteCourseExportMutation,
+  useCourseExportsQuery,
+} from '../_data/use-course-exports';
+
+function formatDate(value: string | null | undefined): string {
+  if (!value) return '—';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '—';
+  return date.toLocaleString('pt-BR');
+}
+
+function formatDuration(seconds: number | null | undefined): string {
+  if (seconds == null) return '—';
+  if (seconds < 60) return `${seconds}s`;
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  if (m < 60) return s > 0 ? `${m}m ${s}s` : `${m}m`;
+  const h = Math.floor(m / 60);
+  const rm = m % 60;
+  return `${h}h ${rm}m`;
+}
+
+function StatusBadge({ status }: { status: CourseExportRecord['status'] }) {
+  switch (status) {
+    case 'completed':
+      return (
+        <Badge
+          variant="outline"
+          className="gap-1 text-emerald-600 border-emerald-200 bg-emerald-50"
+        >
+          <CheckCircle2 className="size-3" />
+          Concluído
+        </Badge>
+      );
+    case 'processing':
+      return (
+        <Badge
+          variant="outline"
+          className="gap-1 text-blue-600 border-blue-200 bg-blue-50"
+        >
+          <Loader2 className="size-3 animate-spin" />
+          Processando
+        </Badge>
+      );
+    case 'failed':
+      return (
+        <Badge
+          variant="outline"
+          className="gap-1 text-red-600 border-red-200 bg-red-50"
+        >
+          <XCircle className="size-3" />
+          Falhou
+        </Badge>
+      );
+    default:
+      return (
+        <Badge variant="outline" className="gap-1 text-muted-foreground">
+          <Clock className="size-3" />
+          Aguardando
+        </Badge>
+      );
+  }
+}
+
+function FormatBadge({ format }: { format: string }) {
+  if (format === 'scorm_1_2') {
+    return (
+      <Badge variant="secondary" className="gap-1">
+        <FileArchive className="size-3" />
+        SCORM 1.2
+      </Badge>
+    );
+  }
+  return <Badge variant="outline">{format}</Badge>;
+}
+
+interface CourseExportsTabProps {
+  courseId: string;
+}
+
+export function CourseExportsTab({ courseId }: CourseExportsTabProps) {
+  const { request } = useApp();
+  const { data: exports, isLoading } = useCourseExportsQuery(courseId);
+  const [downloadingIds, setDownloadingIds] = useState<Set<number>>(new Set());
+  const [confirmDeleteRecord, setConfirmDeleteRecord] =
+    useState<CourseExportRecord | null>(null);
+
+  const deleteMutation = useDeleteCourseExportMutation(courseId);
+
+  const handleDownload = async (exportRecord: CourseExportRecord) => {
+    if (!exportRecord.file_id) return;
+
+    setDownloadingIds((prev) => new Set(prev).add(exportRecord.id));
+    try {
+      const response = await request<{ url?: string }>({
+        url: `/file/download/${exportRecord.file_id}`,
+        method: 'PUT',
+      });
+      const url = response?.data?.url;
+      if (!url) {
+        toast.error('Não foi possível gerar o link de download.');
+        return;
+      }
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = exportRecord.file?.filename ?? `export_${exportRecord.id}.zip`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    } catch {
+      toast.error('Erro ao baixar o arquivo. Tente novamente.');
+    } finally {
+      setDownloadingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(exportRecord.id);
+        return next;
+      });
+    }
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!confirmDeleteRecord) return;
+    const id = confirmDeleteRecord.id;
+    setConfirmDeleteRecord(null);
+    try {
+      await deleteMutation.mutateAsync(id);
+      toast.success('Exportação excluída com sucesso.');
+    } catch {
+      toast.error('Erro ao excluir a exportação. Tente novamente.');
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="size-5 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (!exports || exports.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 py-12 text-center">
+        <FileArchive className="size-8 text-muted-foreground/40" />
+        <p className="text-sm text-muted-foreground">
+          Nenhuma exportação realizada ainda.
+        </p>
+        <p className="text-xs text-muted-foreground/70">
+          Use o menu de Jobs para iniciar uma exportação SCORM 1.2.
+        </p>
+      </div>
+    );
+  }
+
+  const canDelete = (exp: CourseExportRecord) =>
+    exp.status === 'completed' || exp.status === 'failed';
+
+  return (
+    <>
+      <div className="rounded-md border overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Usuário</TableHead>
+              <TableHead>Formato</TableHead>
+              <TableHead>Data</TableHead>
+              <TableHead>Duração</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="text-right">Ações</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {exports.map((exp) => (
+              <TableRow key={exp.id}>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <Avatar className="size-7">
+                      <AvatarImage src={getPhotoUrl(exp.user.photo_id)} />
+                      <AvatarFallback className="text-xs">
+                        {exp.user.name?.charAt(0)?.toUpperCase() ?? '?'}
+                      </AvatarFallback>
+                    </Avatar>
+                    <span className="text-sm truncate max-w-30">
+                      {exp.user.name}
+                    </span>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <FormatBadge format={exp.format} />
+                </TableCell>
+                <TableCell className="text-xs text-muted-foreground whitespace-nowrap">
+                  {formatDate(exp.created_at)}
+                </TableCell>
+                <TableCell className="text-xs text-muted-foreground">
+                  {formatDuration(exp.duration_seconds)}
+                </TableCell>
+                <TableCell>
+                  <StatusBadge status={exp.status} />
+                </TableCell>
+                <TableCell className="text-right">
+                  <div className="flex items-center justify-end gap-1">
+                    {exp.status === 'completed' && exp.file_id ? (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="gap-1 h-7 text-xs"
+                        disabled={downloadingIds.has(exp.id)}
+                        onClick={() => handleDownload(exp)}
+                      >
+                        {downloadingIds.has(exp.id) ? (
+                          <Loader2 className="size-3 animate-spin" />
+                        ) : (
+                          <Download className="size-3" />
+                        )}
+                        Baixar
+                      </Button>
+                    ) : null}
+                    {canDelete(exp) ? (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="gap-1 h-7 text-xs text-red-600 hover:text-red-700 hover:bg-red-50"
+                        disabled={deleteMutation.isPending}
+                        onClick={() => setConfirmDeleteRecord(exp)}
+                      >
+                        <Trash2 className="size-3" />
+                        Excluir
+                      </Button>
+                    ) : (
+                      !exp.file_id && exp.status !== 'completed' && (
+                        <span className="text-xs text-muted-foreground">—</span>
+                      )
+                    )}
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <AlertDialog
+        open={confirmDeleteRecord !== null}
+        onOpenChange={(open) => {
+          if (!open) setConfirmDeleteRecord(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Excluir exportação?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Esta ação irá excluir permanentemente o registro e o arquivo ZIP
+              gerado pela exportação. Não será possível recuperar o arquivo após
+              a exclusão.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-red-600 text-white hover:bg-red-700"
+              onClick={handleConfirmDelete}
+            >
+              Excluir
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

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

@@ -1,9 +1,5 @@
 'use client';
 
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { useQueryClient } from '@tanstack/react-query';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -14,6 +10,8 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,
@@ -28,26 +26,29 @@ import {
 } from '@/components/ui/chart';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { useQueryClient } from '@tanstack/react-query';
 import {
-  Download,
   BookOpen,
   Clapperboard,
-  Loader2,
+  Download,
+  FileArchive,
   FileText,
   Film,
   HardDrive,
   Image,
   Layers,
+  Loader2,
   Mic,
   Paperclip,
   Sparkles,
   Target,
   Trash2,
-  type LucideIcon,
   Zap,
+  type LucideIcon,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Cell, Pie, PieChart } from 'recharts';
 import { toast } from 'sonner';
 import { useCourseContentOverviewQuery } from '../_data/use-course-content-overview';
@@ -57,7 +58,6 @@ const TYPE_COLORS: Record<string, string> = {
   video: '#0ea5e9',
   questao: '#f97316',
   post: '#22c55e',
-  exercicio: '#a855f7',
 };
 
 const TYPE_GRADIENTS: Record<
@@ -79,11 +79,6 @@ const TYPE_GRADIENTS: Record<
     icon: BookOpen,
     label: 'Post',
   },
-  exercicio: {
-    from: 'from-violet-500/12 via-fuchsia-500/6',
-    icon: Target,
-    label: 'Exercício',
-  },
 };
 
 const AREA_COLORS = ['#0f766e', '#0ea5e9', '#14b8a6', '#38bdf8', '#0891b2'];
@@ -162,6 +157,13 @@ const STORAGE_CATEGORY_META: Record<
     iconClassName: 'text-muted-foreground',
     iconBackgroundClassName: 'bg-muted',
   },
+  course_export: {
+    label: 'Arquivos de exportação',
+    accentClassName: 'from-emerald-500/20 via-green-500/10 to-transparent',
+    icon: FileArchive,
+    iconClassName: 'text-emerald-600 dark:text-emerald-400',
+    iconBackgroundClassName: 'bg-emerald-500/10',
+  },
 };
 
 interface Props {
@@ -299,7 +301,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
 
   const lessonTypeData = useMemo(() => {
     if (!data) return [];
-    const types = ['video', 'questao', 'post', 'exercicio'] as const;
+    const types = ['video', 'questao', 'post'] as const;
     return types
       .map((type) => ({
         type,

package/hedhog/frontend/app/courses/[id]/structure/_components/detail-lesson.tsx.ejs

@@ -11,7 +11,6 @@ import {
   ExternalLink,
   FileText,
   HelpCircle,
-  Layers,
   Loader2,
   Mic,
   Paperclip,
@@ -25,8 +24,8 @@ import {
   useStartTranscriptionMutation,
   useTranscriptionSegmentsQuery,
 } from '../_data/use-transcription-segments';
-import { useStructureStore } from './store';
 import { LessonXpTab } from './detail-lesson-xp-tab';
+import { useStructureStore } from './store';
 import type { LessonType } from './types';
 
 const LESSON_TYPE_CONFIG: Record<
@@ -51,12 +50,6 @@ const LESSON_TYPE_CONFIG: Record<
     bg: 'bg-amber-500/10',
     label: 'Quiz',
   },
-  exercicio: {
-    icon: Layers,
-    color: 'text-rose-500',
-    bg: 'bg-rose-500/10',
-    label: 'Exercício',
-  },
 };
 
 const VIDEO_PROVIDER_LABELS: Record<string, string> = {
@@ -86,7 +79,9 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
 
   const { data: segments = [], isLoading: segmentsLoading } =
     useTranscriptionSegmentsQuery(
-      activeTab === 'transcription' || activeTab === 'xp' ? (lesson?.id ?? null) : null
+      activeTab === 'transcription' || activeTab === 'xp'
+        ? (lesson?.id ?? null)
+        : null
     );
 
   const queryClient = useQueryClient();
@@ -97,7 +92,9 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
     startTranscription({
       onSuccess: () => {
         toast.success('Transcrição iniciada!');
-        queryClient.invalidateQueries({ queryKey: ['lesson-transcription-segments', lesson?.id] });
+        queryClient.invalidateQueries({
+          queryKey: ['lesson-transcription-segments', lesson?.id],
+        });
       },
       onError: (err) => {
         toast.error(err.message || 'Erro ao iniciar a transcrição.');
@@ -243,64 +240,55 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
                 </Section>
               </>
             )}
-
-            {!lesson.publicDescription &&
-              !lesson.privateDescription &&
-              lesson.type === 'exercicio' && (
-                <div className="flex flex-col items-center gap-2 py-8 text-center">
-                  <Layers className="size-8 text-muted-foreground/40" />
-                  <p className="text-sm text-muted-foreground">
-                    Sem informações adicionais nesta aula.
-                  </p>
-                </div>
-              )}
           </div>
         </TabsContent>
 
         {/* ── Transcrição ───────────────────────────────────────────────────── */}
-        {lmsSettings.transcriptionEnabled && <TabsContent
-          value="transcription"
-          className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
-        >
-          <div className="flex justify-end mb-3">
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={handleStartTranscription}
-              disabled={isStarting}
-            >
-              {isStarting ? (
-                <Loader2 className="size-4 mr-2 animate-spin" />
-              ) : (
-                <Mic className="size-4 mr-2" />
-              )}
-              Iniciar transcrição
-            </Button>
-          </div>
-          {segmentsLoading ? (
-            <div className="p-4 text-sm text-muted-foreground">
-              Carregando transcrição...
+        {lmsSettings.transcriptionEnabled && (
+          <TabsContent
+            value="transcription"
+            className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
+          >
+            <div className="flex justify-end mb-3">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={handleStartTranscription}
+                disabled={isStarting}
+              >
+                {isStarting ? (
+                  <Loader2 className="size-4 mr-2 animate-spin" />
+                ) : (
+                  <Mic className="size-4 mr-2" />
+                )}
+                Iniciar transcrição
+              </Button>
             </div>
-          ) : segments.length ? (
-            <div className="space-y-1.5 p-3">
-              {segments.map((seg) => (
-                <div key={seg.id} className="flex gap-3 text-sm">
-                  <span className="shrink-0 font-mono text-xs text-muted-foreground w-24">
-                    [{formatSeconds(seg.startSeconds)} –{' '}
-                    {formatSeconds(seg.endSeconds)}]
-                  </span>
-                  <span className="leading-relaxed">{seg.text}</span>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <EmptyState
-              icon={<FileText className="size-8 text-muted-foreground/40" />}
-            >
-              Transcrição não disponível para esta aula.
-            </EmptyState>
-          )}
-        </TabsContent>}
+            {segmentsLoading ? (
+              <div className="p-4 text-sm text-muted-foreground">
+                Carregando transcrição...
+              </div>
+            ) : segments.length ? (
+              <div className="space-y-1.5 p-3">
+                {segments.map((seg) => (
+                  <div key={seg.id} className="flex gap-3 text-sm">
+                    <span className="shrink-0 font-mono text-xs text-muted-foreground w-24">
+                      [{formatSeconds(seg.startSeconds)} –{' '}
+                      {formatSeconds(seg.endSeconds)}]
+                    </span>
+                    <span className="leading-relaxed">{seg.text}</span>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <EmptyState
+                icon={<FileText className="size-8 text-muted-foreground/40" />}
+              >
+                Transcrição não disponível para esta aula.
+              </EmptyState>
+            )}
+          </TabsContent>
+        )}
 
         {/* ── XP da Aula ────────────────────────────────────────────────────── */}
         <TabsContent

package/hedhog/frontend/app/courses/[id]/structure/_components/detail-panel.tsx.ejs

@@ -10,7 +10,12 @@ import { EditorLesson } from './editor-lesson';
 import { EditorSession } from './editor-session';
 import { useStructureStore } from './store';
 
-export const DetailPanel = memo(function DetailPanel() {
+interface DetailPanelProps {
+  defaultTab?: string;
+  onTabChange?: (tab: string) => void;
+}
+
+export const DetailPanel = memo(function DetailPanel({ defaultTab, onTabChange }: DetailPanelProps) {
   const t = useTranslations('lms.CoursesPage.StructurePage');
   const { activeItemId, activeItemType, selectedIds } = useStructureStore();
 
@@ -47,7 +52,7 @@ export const DetailPanel = memo(function DetailPanel() {
   }
 
   if (activeItemType === 'course') {
-    return <EditorCourse />;
+    return <EditorCourse defaultTab={defaultTab} onTabChange={onTabChange} />;
   }
 
   if (activeItemType === 'session') {
@@ -55,7 +60,7 @@ export const DetailPanel = memo(function DetailPanel() {
   }
 
   if (activeItemType === 'lesson') {
-    return <EditorLesson lessonId={activeItemId} />;
+    return <EditorLesson lessonId={activeItemId} defaultTab={defaultTab} onTabChange={onTabChange} />;
   }
 
   return null;

package/hedhog/frontend/app/courses/[id]/structure/_components/detail-session.tsx.ejs

@@ -18,10 +18,24 @@ const LESSON_TYPE_CONFIG: Record<
   LessonType,
   { icon: LucideIcon; color: string; label: string; bg: string }
 > = {
-  video:     { icon: Video,      color: 'text-blue-500',    label: 'Vídeo',     bg: 'bg-blue-500/10'    },
-  post:      { icon: FileText,   color: 'text-emerald-500', label: 'Post',      bg: 'bg-emerald-500/10' },
-  questao:   { icon: HelpCircle, color: 'text-amber-500',   label: 'Quiz',      bg: 'bg-amber-500/10'   },
-  exercicio: { icon: Layers,     color: 'text-rose-500',    label: 'Exercício', bg: 'bg-rose-500/10'    },
+  video: {
+    icon: Video,
+    color: 'text-blue-500',
+    label: 'Vídeo',
+    bg: 'bg-blue-500/10',
+  },
+  post: {
+    icon: FileText,
+    color: 'text-emerald-500',
+    label: 'Post',
+    bg: 'bg-emerald-500/10',
+  },
+  questao: {
+    icon: HelpCircle,
+    color: 'text-amber-500',
+    label: 'Quiz',
+    bg: 'bg-amber-500/10',
+  },
 };
 
 interface DetailSessionProps {
@@ -29,8 +43,14 @@ interface DetailSessionProps {
 }
 
 export function DetailSession({ sessionId }: DetailSessionProps) {
-  const session = useStructureStore((s) => s.sessions.find((ss) => ss.id === sessionId));
-  const lessons = useStructureStore((s) => s.lessons.filter((l) => l.sessionId === sessionId).sort((a, b) => a.order - b.order));
+  const session = useStructureStore((s) =>
+    s.sessions.find((ss) => ss.id === sessionId)
+  );
+  const lessons = useStructureStore((s) =>
+    s.lessons
+      .filter((l) => l.sessionId === sessionId)
+      .sort((a, b) => a.order - b.order)
+  );
   const selectItem = useStructureStore((s) => s.selectItem);
 
   if (!session) return null;
@@ -157,7 +177,10 @@ function LessonListItem({
           {lesson.duration}min
         </span>
       </div>
-      <Badge variant="outline" className="text-[0.55rem] px-1 py-0 h-4 shrink-0">
+      <Badge
+        variant="outline"
+        className="text-[0.55rem] px-1 py-0 h-4 shrink-0"
+      >
         {lesson.code}
       </Badge>
     </button>
@@ -171,4 +194,4 @@ function StatCard({ label, value }: { label: string; value: string | number }) {
       <span className="text-[0.65rem] text-muted-foreground">{label}</span>
     </div>
   );
-}
+}