@hed-hog/lms 0.0.366 → 0.0.370

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

@@ -0,0 +1,191 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { DollarSign, Languages, Mic, Sparkles, Zap } from 'lucide-react';
+import { useCourseAiCostsQuery } from '../_data/use-course-ai-costs';
+
+interface Props {
+  courseId: string;
+}
+
+const JOB_TYPE_META: Record<
+  string,
+  { label: string; icon: typeof Mic; tone: string }
+> = {
+  transcription: {
+    label: 'Transcrição',
+    icon: Mic,
+    tone: 'bg-cyan-500/10 text-cyan-600 dark:text-cyan-400',
+  },
+  translation: {
+    label: 'Tradução',
+    icon: Languages,
+    tone: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
+  },
+  xp_calculation: {
+    label: 'Cálculo de XP',
+    icon: Zap,
+    tone: 'bg-amber-500/10 text-amber-600 dark:text-amber-400',
+  },
+};
+
+function formatUsd(value: number): string {
+  const fractionDigits = value > 0 && value < 0.01 ? 4 : 2;
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+  }).format(value);
+}
+
+export function CourseAiCostsTab({ courseId }: Props) {
+  const { data, isLoading, isError } = useCourseAiCostsQuery(courseId);
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col gap-3">
+        <Skeleton className="h-28 rounded-xl" />
+        <div className="grid gap-3 sm:grid-cols-3">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Skeleton key={i} className="h-24 rounded-xl" />
+          ))}
+        </div>
+        <Skeleton className="h-48 rounded-xl" />
+      </div>
+    );
+  }
+
+  if (isError || !data) {
+    return (
+      <Card className="border-dashed bg-muted/20">
+        <CardHeader>
+          <CardTitle className="text-sm font-semibold">
+            Não foi possível carregar os custos de IA
+          </CardTitle>
+          <CardDescription>
+            Tente novamente em instantes.
+          </CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  if (data.totalCostUsd <= 0 && data.byJobType.length === 0) {
+    return (
+      <Card className="border-dashed bg-muted/20">
+        <CardHeader>
+          <CardTitle className="text-sm font-semibold">
+            Ainda não há custos de IA registrados
+          </CardTitle>
+          <CardDescription>
+            Os custos aparecem aqui conforme as aulas passam por transcrição,
+            tradução e cálculo de XP. Apenas execuções a partir de agora são
+            contabilizadas.
+          </CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  const byTypeMap = new Map(data.byJobType.map((r) => [r.jobType, r]));
+  const orderedTypes = ['transcription', 'translation', 'xp_calculation'];
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* Total */}
+      <Card className="overflow-hidden border-border/70 bg-linear-to-br from-background via-background to-muted/30">
+        <CardContent className="flex items-center gap-4 px-4 py-4">
+          <div className="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+            <DollarSign className="size-6" />
+          </div>
+          <div className="min-w-0">
+            <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+              Custo total de IA do curso
+            </div>
+            <div className="mt-0.5 text-2xl font-semibold text-foreground">
+              {formatUsd(data.totalCostUsd)}
+            </div>
+            <div className="mt-0.5 text-xs text-muted-foreground">
+              Soma de transcrição, tradução e cálculo de XP ({data.currency}).
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Por tipo */}
+      <div className="grid gap-3 sm:grid-cols-3">
+        {orderedTypes.map((type) => {
+          const meta = JOB_TYPE_META[type];
+          const row = byTypeMap.get(type);
+          const Icon = meta?.icon ?? Sparkles;
+          return (
+            <Card key={type} className="border-border/70">
+              <CardContent className="flex items-center gap-3 px-3 py-3">
+                <div
+                  className={`flex size-9 shrink-0 items-center justify-center rounded-xl ${meta?.tone ?? 'bg-muted text-muted-foreground'}`}
+                >
+                  <Icon className="size-4" />
+                </div>
+                <div className="min-w-0">
+                  <div className="text-xs font-medium text-muted-foreground">
+                    {meta?.label ?? type}
+                  </div>
+                  <div className="text-base font-semibold text-foreground">
+                    {formatUsd(row?.costUsd ?? 0)}
+                  </div>
+                  <div className="text-[11px] text-muted-foreground">
+                    {row?.runs ?? 0} execução(ões)
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      {/* Por aula */}
+      <Card className="overflow-hidden border-border/70">
+        <CardHeader className="border-b border-border/70 py-3">
+          <CardTitle className="text-sm font-semibold">Custo por aula</CardTitle>
+          <CardDescription>
+            Quanto cada aula consumiu em IA, da mais cara para a mais barata.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="p-0">
+          {data.byLesson.length === 0 ? (
+            <div className="px-4 py-6 text-center text-sm text-muted-foreground">
+              Nenhum custo por aula registrado.
+            </div>
+          ) : (
+            <div className="divide-y divide-border/60">
+              {data.byLesson.map((row, index) => (
+                <div
+                  key={`${row.lessonId ?? 'null'}-${index}`}
+                  className="flex items-center justify-between gap-3 px-4 py-2.5"
+                >
+                  <div className="min-w-0 flex-1 truncate text-sm text-foreground">
+                    {row.lessonTitle ?? 'Aula removida'}
+                  </div>
+                  <div className="text-[11px] text-muted-foreground">
+                    {row.runs} exec.
+                  </div>
+                  <div className="w-24 text-right text-sm font-semibold text-foreground">
+                    {formatUsd(row.costUsd)}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import {
   AlignLeft,
@@ -8,6 +8,7 @@ import {
   Download,
   FileArchive,
   Info,
+  Languages,
   Loader2,
   Monitor,
   Moon,
@@ -19,6 +20,7 @@ import { cn } from '@/lib/utils';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
@@ -31,6 +33,7 @@ import {
 import {
   ScormVisualSettings,
   useCreateCourseExportMutation,
+  useCourseTranscriptionLocalesQuery,
 } from '../_data/use-course-exports';
 
 // ── Color presets ────────────────────────────────────────────
@@ -119,7 +122,23 @@ export function CourseExportSheet({
   estimatedSizeMb,
 }: CourseExportSheetProps) {
   const [visual, setVisual] = useState<Required<ScormVisualSettings>>(DEFAULT_VISUAL);
+  const [selectedLocaleIds, setSelectedLocaleIds] = useState<number[]>([]);
   const createExport = useCreateCourseExportMutation(courseId);
+  const { data: availableLocales = [] } = useCourseTranscriptionLocalesQuery(
+    open ? courseId : null,
+  );
+
+  useEffect(() => {
+    if (availableLocales.length > 0) {
+      setSelectedLocaleIds(availableLocales.map((l) => l.id));
+    }
+  }, [availableLocales]);
+
+  const toggleLocale = (id: number) => {
+    setSelectedLocaleIds((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
+    );
+  };
 
   const setV = <K extends keyof ScormVisualSettings>(
     key: K,
@@ -131,6 +150,7 @@ export function CourseExportSheet({
       await createExport.mutateAsync({
         format: 'scorm_1_2',
         visualSettings: visual,
+        subtitleLocaleIds: selectedLocaleIds.length > 0 ? selectedLocaleIds : undefined,
       });
       onOpenChange(false);
       toast.success(
@@ -198,6 +218,66 @@ export function CourseExportSheet({
             </Alert>
           )}
 
+          {/* ── Subtitles ── */}
+          <div className="rounded-lg border overflow-hidden">
+            <div className="flex items-center gap-2 px-3 py-2.5 border-b bg-muted/20">
+              <Languages className="size-4 text-muted-foreground" />
+              <span className="text-sm font-medium">Legendas</span>
+              {availableLocales.length > 0 && (
+                <span className="ml-auto text-xs text-muted-foreground">
+                  {selectedLocaleIds.length} de {availableLocales.length} selecionado(s)
+                </span>
+              )}
+            </div>
+            <div className="px-3 py-3">
+              {availableLocales.length === 0 ? (
+                <p className="text-xs text-muted-foreground">
+                  Nenhuma legenda disponível. Gere transcrições nas aulas para incluí-las na exportação.
+                </p>
+              ) : (
+                <div className="flex flex-col gap-2">
+                  {availableLocales.map((loc) => (
+                    <label
+                      key={loc.id}
+                      className="flex items-center gap-2.5 cursor-pointer group"
+                    >
+                      <Checkbox
+                        checked={selectedLocaleIds.includes(loc.id)}
+                        onCheckedChange={() => toggleLocale(loc.id)}
+                        id={`locale-${loc.id}`}
+                      />
+                      <span className="text-sm group-hover:text-foreground transition-colors">
+                        {loc.name}
+                        {loc.region && (
+                          <span className="text-xs text-muted-foreground ml-1">
+                            ({loc.code}-{loc.region})
+                          </span>
+                        )}
+                      </span>
+                    </label>
+                  ))}
+                  <div className="flex gap-2 mt-1 pt-1 border-t">
+                    <button
+                      type="button"
+                      onClick={() => setSelectedLocaleIds(availableLocales.map((l) => l.id))}
+                      className="text-xs text-primary hover:underline"
+                    >
+                      Selecionar todos
+                    </button>
+                    <span className="text-xs text-muted-foreground">·</span>
+                    <button
+                      type="button"
+                      onClick={() => setSelectedLocaleIds([])}
+                      className="text-xs text-primary hover:underline"
+                    >
+                      Desmarcar todos
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
           {/* ── Appearance ── */}
           <div className="rounded-lg border overflow-hidden">
             <div className="flex items-center gap-2 px-3 py-2.5 border-b bg-muted/20">

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

@@ -58,6 +58,14 @@ function formatDuration(seconds: number | null | undefined): string {
   return `${h}h ${rm}m`;
 }
 
+function formatFileSize(bytes: number | null | undefined): string {
+  if (bytes == null) return '—';
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+
 function StatusBadge({ status }: { status: CourseExportRecord['status'] }) {
   switch (status) {
     case 'completed':
@@ -203,6 +211,7 @@ export function CourseExportsTab({ courseId }: CourseExportsTabProps) {
               <TableHead>Formato</TableHead>
               <TableHead>Data</TableHead>
               <TableHead>Duração</TableHead>
+              <TableHead>Tamanho</TableHead>
               <TableHead>Status</TableHead>
               <TableHead className="text-right">Ações</TableHead>
             </TableRow>
@@ -232,6 +241,9 @@ export function CourseExportsTab({ courseId }: CourseExportsTabProps) {
                 <TableCell className="text-xs text-muted-foreground">
                   {formatDuration(exp.duration_seconds)}
                 </TableCell>
+                <TableCell className="text-xs text-muted-foreground">
+                  {formatFileSize(exp.file?.size)}
+                </TableCell>
                 <TableCell>
                   <StatusBadge status={exp.status} />
                 </TableCell>

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

@@ -1,19 +1,60 @@
 'use client';
 
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
-import { BookOpen, Globe, Hash, Tag } from 'lucide-react';
+import { useQueryClient } from '@tanstack/react-query';
+import { BookOpen, Globe, Hash, Loader2, Tag, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { useDeleteCourseTranscriptionsMutation } from '../_data/use-transcription-segments';
 import { useStructureStore } from './store';
 
 export function DetailCourse() {
   const course = useStructureStore((s) => s.course);
   const sessions = useStructureStore((s) => s.sessions);
   const lessons = useStructureStore((s) => s.lessons);
+  const showConfirm = useStructureStore((s) => s.showConfirm);
+  const courseId = useStructureStore((s) => s.courseId);
+  const queryClient = useQueryClient();
+
+  const { mutate: deleteCourseTranscriptions, isPending: isDeletingTranscriptions } =
+    useDeleteCourseTranscriptionsMutation(courseId);
 
   const totalMinutes = lessons.reduce((sum, l) => sum + l.duration, 0);
   const hours = Math.floor(totalMinutes / 60);
   const minutes = totalMinutes % 60;
 
+  const handleDeleteAllTranscriptions = () => {
+    showConfirm({
+      title: 'Excluir todas as transcrições e traduções',
+      description:
+        'Isso remove permanentemente todas as transcrições e traduções de todas as aulas deste curso. Esta ação não pode ser desfeita.',
+      confirmText: 'Excluir tudo',
+      destructive: true,
+      onConfirm: () => {
+        deleteCourseTranscriptions({
+          onSuccess: (result) => {
+            toast.success(
+              `Transcrições removidas (${result.deleted} segmento(s) excluído(s)).`,
+            );
+            queryClient.invalidateQueries({
+              queryKey: ['course-content-overview', courseId],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ['lesson-transcription-locales'],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ['lesson-transcription-segments'],
+            });
+          },
+          onError: (err) => {
+            toast.error(err.message || 'Erro ao excluir as transcrições.');
+          },
+        });
+      },
+    });
+  };
+
   return (
     <div className="flex flex-col overflow-y-auto h-full">
       {/* Header */}
@@ -78,6 +119,33 @@ export function DetailCourse() {
             </div>
           </>
         )}
+
+        <Separator />
+
+        {/* Zona de perigo */}
+        <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-3">
+          <p className="text-xs font-semibold text-destructive mb-1">
+            Zona de perigo
+          </p>
+          <p className="text-xs text-muted-foreground mb-3">
+            Remove permanentemente todas as transcrições e traduções de todas as
+            aulas deste curso.
+          </p>
+          <Button
+            variant="destructive"
+            size="sm"
+            className="w-full"
+            disabled={isDeletingTranscriptions}
+            onClick={handleDeleteAllTranscriptions}
+          >
+            {isDeletingTranscriptions ? (
+              <Loader2 className="size-4 mr-2 animate-spin" />
+            ) : (
+              <Trash2 className="size-4 mr-2" />
+            )}
+            Excluir todas as transcrições e traduções
+          </Button>
+        </div>
       </div>
     </div>
   );