@hed-hog/lms 0.0.365 → 0.0.370

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

@@ -435,7 +435,7 @@ export function LessonXpTab({
             icon={<Cpu className="size-4 text-sky-600" />}
             total={xpMap.totalXp}
             items={areaDistribution}
-            toneClassName="bg-linear-to-r from-sky-500/10 via-sky-500/5 to-transparent"
+            toneClassName=""
           />
           <DistributionCard
             title="Skills"
@@ -443,7 +443,7 @@ export function LessonXpTab({
             icon={<Zap className="size-4 text-emerald-600" />}
             total={xpMap.totalXp}
             items={skillDistribution}
-            toneClassName="bg-linear-to-r from-emerald-500/10 via-emerald-500/5 to-transparent"
+            toneClassName=""
           />
           <TimelineCard
             segmentViews={segmentViews}
@@ -670,7 +670,7 @@ function TimelineCard({
 
   return (
     <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)] xl:col-span-2">
-      <CardHeader className="border-b border-border/60 bg-linear-to-r from-slate-500/10 via-slate-500/5 to-transparent pt-3 pb-1.5!">
+      <CardHeader className="border-b border-border/60 pt-3 pb-1.5!">
         <div className="flex items-center justify-between gap-3">
           <div>
             <CardTitle className="text-sm font-semibold">
@@ -761,7 +761,7 @@ function LearningTypesCard({ items }: { items: DistributionItem[] }) {
 
   return (
     <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)] xl:col-span-2">
-      <CardHeader className="border-b border-border/60 bg-linear-to-r from-violet-500/10 via-violet-500/5 to-transparent pt-3 pb-1.5!">
+      <CardHeader className="border-b border-border/60 pt-3 pb-1.5!">
         <div className="flex items-center justify-between gap-3">
           <CardTitle className="text-sm font-semibold">
             Tipos de aprendizado
@@ -775,7 +775,7 @@ function LearningTypesCard({ items }: { items: DistributionItem[] }) {
         {items.map((item) => (
           <div
             key={item.id}
-            className="flex h-full flex-col justify-start gap-1.5 rounded-xl border border-border/60 bg-muted/20 px-2.5 py-2 text-xs shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-violet-500/20 hover:bg-background/95 hover:shadow-md"
+            className="flex h-full flex-col justify-start gap-1.5 rounded-xl border border-border/60 bg-muted/20 px-2.5 py-2 text-xs shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:bg-background/95 hover:shadow-md"
           >
             <div className="flex flex-wrap items-center justify-between gap-2">
               <span className="min-w-0 flex-1 font-medium">{item.label}</span>
@@ -813,7 +813,7 @@ function SegmentsSection({
 }) {
   return (
     <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)]">
-      <CardHeader className="border-b border-border/60 bg-linear-to-r from-cyan-500/10 via-cyan-500/5 to-transparent pt-3 pb-1.5!">
+      <CardHeader className="border-b border-border/60 pt-3 pb-1.5!">
         <div className="flex items-center justify-between gap-3">
           <CardTitle className="text-sm font-semibold">
             Segmentos ({segments.length})
@@ -829,14 +829,14 @@ function SegmentsSection({
             <div
               key={segment.id}
               className={cn(
-                'flex flex-col gap-2 rounded-2xl border border-border/60 bg-linear-to-br from-background via-background to-muted/25 px-3 py-2.5 text-xs shadow-[0_16px_30px_-24px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:border-cyan-500/15 hover:to-muted/35 hover:shadow-[0_20px_36px_-24px_rgba(15,23,42,0.52)]',
+                'flex flex-col gap-2 rounded-2xl border border-border/60 bg-card/90 px-3 py-2.5 text-xs shadow-[0_16px_30px_-24px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:shadow-[0_20px_36px_-24px_rgba(15,23,42,0.52)]',
                 !segment.shouldGrantXp && 'opacity-50'
               )}
             >
               <div className="flex flex-wrap items-start justify-between gap-2">
                 <div className="flex min-w-0 flex-col gap-1">
                   <div className="flex flex-wrap items-center gap-1.5">
-                    <span className="rounded-full border border-cyan-500/15 bg-cyan-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-cyan-700 transition-all duration-200 hover:bg-cyan-500/15 hover:shadow-sm dark:text-cyan-300">
+                    <span className="rounded-full border border-border/60 bg-muted/30 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
                       {segment.label}
                     </span>
                     <span className="rounded-full border border-border/60 bg-background/90 px-2 py-0.5 font-mono text-[10px] text-muted-foreground shadow-sm transition-all duration-200 hover:border-border hover:bg-background hover:text-foreground hover:shadow-md">
@@ -856,7 +856,7 @@ function SegmentsSection({
                 </div>
 
                 <div className="flex flex-wrap items-center justify-end gap-1.5">
-                  <span className="rounded-full border border-amber-500/15 bg-amber-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-amber-700 dark:text-amber-300">
+                  <span className="rounded-full border border-border/60 bg-muted/30 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
                     {segment.xpValue} XP
                   </span>
                   <DifficultyBadge difficulty={segment.difficulty} />
@@ -1031,14 +1031,7 @@ function MetricPill({
   value: string;
   tone?: 'default' | 'sky' | 'emerald' | 'violet';
 }) {
-  const toneClassName =
-    tone === 'sky'
-      ? 'border-sky-500/15 bg-sky-500/10 text-sky-700 dark:text-sky-300'
-      : tone === 'emerald'
-        ? 'border-emerald-500/15 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'
-        : tone === 'violet'
-          ? 'border-violet-500/15 bg-violet-500/10 text-violet-700 dark:text-violet-300'
-          : 'border-border/60 bg-muted/40 text-foreground';
+  const toneClassName = 'border-border/60 bg-muted/40 text-foreground';
 
   return (
     <div
@@ -1069,12 +1062,7 @@ function SegmentBreakdownGroup({
     color: string;
   }>;
 }) {
-  const toneClassName =
-    tone === 'sky'
-      ? 'border-sky-500/15 bg-sky-500/8'
-      : tone === 'emerald'
-        ? 'border-emerald-500/15 bg-emerald-500/8'
-        : 'border-violet-500/15 bg-violet-500/8';
+  const toneClassName = 'border-border/60 bg-muted/20';
 
   if (!items.length) {
     return null;

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

@@ -2,28 +2,40 @@
 
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Separator } from '@/components/ui/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useQueryClient } from '@tanstack/react-query';
 import {
   Clock,
   ExternalLink,
   FileText,
   HelpCircle,
+  Languages,
   Loader2,
   Mic,
   Paperclip,
+  Plus,
+  Trash2,
   Video,
+  X,
   type LucideIcon,
 } from 'lucide-react';
+import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import { useLmsSettingsQuery } from '../_data/use-lms-settings-query';
 import {
+  useDeleteTranscriptionLocaleMutation,
   useStartTranscriptionMutation,
+  useTranscriptionLocalesQuery,
   useTranscriptionSegmentsQuery,
+  useTranslateTranscriptionMutation,
+  type TranscriptionLocale,
 } from '../_data/use-transcription-segments';
+import { LessonVideoPreview } from './lesson-video-preview';
 import { LessonXpTab } from './detail-lesson-xp-tab';
 import { useStructureStore } from './store';
 import type { LessonType } from './types';
@@ -69,7 +81,15 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
     s.lessons.find((l) => l.id === lessonId)
   );
   const [activeTab, setActiveTab] = useState('dados');
+  const [selectedLocaleId, setSelectedLocaleId] = useState<number | null | undefined>(undefined);
+  const [translateOpen, setTranslateOpen] = useState(false);
+  const [targetLocaleId, setTargetLocaleId] = useState<number | null>(null);
+  const [activeTranslationJob, setActiveTranslationJob] = useState<{
+    queueJobId: number;
+    targetLocaleName: string;
+  } | null>(null);
   const lmsSettings = useLmsSettingsQuery();
+  const { request } = useApp();
 
   useEffect(() => {
     if (!lmsSettings.transcriptionEnabled && activeTab === 'transcription') {
@@ -77,16 +97,77 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
     }
   }, [lmsSettings.transcriptionEnabled, activeTab]);
 
+  const isTranscriptionActive = activeTab === 'transcription' || activeTab === 'xp';
+  const activeLessonId = isTranscriptionActive ? (lesson?.id ?? null) : null;
+
+  const { data: transcriptionLocales = [], refetch: refetchLocales } =
+    useTranscriptionLocalesQuery(activeLessonId);
+
+  useEffect(() => {
+    if (transcriptionLocales.length > 0 && selectedLocaleId === undefined) {
+      setSelectedLocaleId(transcriptionLocales[0]?.id ?? null);
+    }
+    if (transcriptionLocales.length === 0 && selectedLocaleId !== undefined) {
+      setSelectedLocaleId(undefined);
+    }
+  }, [transcriptionLocales, selectedLocaleId]);
+
   const { data: segments = [], isLoading: segmentsLoading } =
-    useTranscriptionSegmentsQuery(
-      activeTab === 'transcription' || activeTab === 'xp'
-        ? (lesson?.id ?? null)
-        : null
-    );
+    useTranscriptionSegmentsQuery(activeLessonId, selectedLocaleId);
+
+  const { data: allLocales = [] } = useQuery<TranscriptionLocale[]>({
+    queryKey: ['all-locales'],
+    queryFn: async () => {
+      const res = await request<{ data: TranscriptionLocale[] }>({
+        url: '/core/locales?limit=200',
+        method: 'GET',
+      });
+      return (res.data?.data ?? []) as TranscriptionLocale[];
+    },
+    enabled: translateOpen,
+    initialData: [],
+  });
+
+  const availableTargetLocales = allLocales.filter(
+    (l) => l.id !== null && !transcriptionLocales.some((tl) => tl.id === l.id),
+  );
 
   const queryClient = useQueryClient();
+  const showConfirm = useStructureStore((s) => s.showConfirm);
   const { mutate: startTranscription, isPending: isStarting } =
     useStartTranscriptionMutation(lesson?.id ?? null);
+  const { mutate: translateTranscription, isPending: isTranslating } =
+    useTranslateTranscriptionMutation(lesson?.id ?? null);
+  const { mutate: deleteTranscriptionLocale } =
+    useDeleteTranscriptionLocaleMutation(lesson?.id ?? null);
+
+  const handleDeleteLocale = (loc: TranscriptionLocale) => {
+    const name = loc.name ?? loc.code ?? 'este idioma';
+    showConfirm({
+      title: 'Excluir transcrição',
+      description: `Excluir a transcrição/tradução em "${name}" desta aula? Esta ação não pode ser desfeita.`,
+      confirmText: 'Excluir',
+      destructive: true,
+      onConfirm: () => {
+        deleteTranscriptionLocale(loc.id, {
+          onSuccess: () => {
+            toast.success('Transcrição excluída.');
+            if (selectedLocaleId === loc.id) setSelectedLocaleId(undefined);
+            refetchLocales();
+            queryClient.invalidateQueries({
+              queryKey: ['lesson-transcription-locales', lesson?.id],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ['lesson-transcription-segments', lesson?.id],
+            });
+          },
+          onError: (err) => {
+            toast.error(err.message || 'Erro ao excluir a transcrição.');
+          },
+        });
+      },
+    });
+  };
 
   const handleStartTranscription = () => {
     startTranscription({
@@ -95,6 +176,9 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
         queryClient.invalidateQueries({
           queryKey: ['lesson-transcription-segments', lesson?.id],
         });
+        queryClient.invalidateQueries({
+          queryKey: ['lesson-transcription-locales', lesson?.id],
+        });
       },
       onError: (err) => {
         toast.error(err.message || 'Erro ao iniciar a transcrição.');
@@ -102,6 +186,32 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
     });
   };
 
+  const handleTranslate = () => {
+    if (!targetLocaleId) return;
+    const targetName =
+      availableTargetLocales.find((l) => l.id === targetLocaleId)?.name ?? String(targetLocaleId);
+    translateTranscription(targetLocaleId, selectedLocaleId ?? null, {
+      onSuccess: (result) => {
+        toast.success('Tradução iniciada! Acompanhe o progresso na fila.');
+        setTranslateOpen(false);
+        setTargetLocaleId(null);
+        setActiveTranslationJob({ queueJobId: result.queueJobId, targetLocaleName: targetName });
+        setTimeout(() => {
+          refetchLocales();
+          queryClient.invalidateQueries({
+            queryKey: ['lesson-transcription-segments', lesson?.id],
+          });
+          queryClient.invalidateQueries({
+            queryKey: ['lesson-transcription-locales', lesson?.id],
+          });
+        }, 2000);
+      },
+      onError: (err) => {
+        toast.error(err.message || 'Erro ao iniciar a tradução.');
+      },
+    });
+  };
+
   if (!lesson) return null;
 
   const cfg = LESSON_TYPE_CONFIG[lesson.type];
@@ -142,6 +252,9 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
       >
         <TabsList className="mx-4 mt-3 w-auto justify-start shrink-0">
           <TabsTrigger value="dados">Dados</TabsTrigger>
+          {lesson.type === 'video' && (
+            <TabsTrigger value="conteudo">Conteúdo</TabsTrigger>
+          )}
           {lmsSettings.transcriptionEnabled && (
             <TabsTrigger value="transcription">Transcrição</TabsTrigger>
           )}
@@ -243,27 +356,160 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
           </div>
         </TabsContent>
 
+        {/* ── Conteúdo (player de vídeo) ───────────────────────────────────── */}
+        {lesson.type === 'video' && (
+          <TabsContent
+            value="conteudo"
+            className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
+          >
+            {activeTab === 'conteudo' && (
+              <LessonVideoPreview lessonId={lesson.id} />
+            )}
+          </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" />
+            {/* Banner de job de tradução ativo */}
+            {activeTranslationJob && (
+              <div className="flex items-center justify-between gap-2 mb-3 rounded-md border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/30 px-3 py-2 text-sm">
+                <div className="flex items-center gap-2 min-w-0">
+                  <Loader2 className="size-4 shrink-0 animate-spin text-amber-600 dark:text-amber-400" />
+                  <span className="text-amber-900 dark:text-amber-200 truncate">
+                    Tradução para{' '}
+                    <strong>{activeTranslationJob.targetLocaleName}</strong> em andamento
+                    {' '}· Job #{activeTranslationJob.queueJobId}
+                  </span>
+                </div>
+                <div className="flex items-center gap-2 shrink-0">
+                  <Link
+                    href="/queue/jobs"
+                    className="text-xs text-amber-700 dark:text-amber-300 underline underline-offset-2 hover:text-amber-900 dark:hover:text-amber-100"
+                  >
+                    Ver na fila →
+                  </Link>
+                  <button
+                    onClick={() => setActiveTranslationJob(null)}
+                    className="text-amber-600 dark:text-amber-400 hover:text-amber-900 dark:hover:text-amber-100"
+                  >
+                    <X className="size-3.5" />
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* Toolbar */}
+            <div className="flex items-center justify-between gap-2 mb-3 flex-wrap">
+              {/* Locale pills */}
+              <div className="flex items-center gap-1.5 flex-wrap">
+                {transcriptionLocales.map((loc) => (
+                  <div
+                    key={loc.id ?? 'null'}
+                    className={cn(
+                      'flex items-center gap-1 rounded-full pl-2.5 pr-1 py-0.5 text-xs font-medium border transition-colors',
+                      selectedLocaleId === loc.id
+                        ? 'bg-primary text-primary-foreground border-primary'
+                        : 'bg-muted text-muted-foreground border-border hover:border-primary/50',
+                    )}
+                  >
+                    <button
+                      onClick={() => setSelectedLocaleId(loc.id)}
+                      className="flex items-center gap-1"
+                    >
+                      <Languages className="size-3" />
+                      {loc.name ?? loc.code ?? 'Desconhecido'}
+                    </button>
+                    <button
+                      onClick={() => handleDeleteLocale(loc)}
+                      title="Excluir transcrição deste idioma"
+                      className={cn(
+                        'rounded-full p-0.5 transition-colors',
+                        selectedLocaleId === loc.id
+                          ? 'hover:bg-primary-foreground/20'
+                          : 'hover:bg-foreground/10',
+                      )}
+                    >
+                      <Trash2 className="size-3" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+
+              {/* Action buttons */}
+              <div className="flex items-center gap-2 shrink-0">
+                {transcriptionLocales.length > 0 && (
+                  <Popover open={translateOpen} onOpenChange={setTranslateOpen}>
+                    <PopoverTrigger asChild>
+                      <Button size="sm" variant="outline" disabled={isTranslating}>
+                        {isTranslating ? (
+                          <Loader2 className="size-4 mr-2 animate-spin" />
+                        ) : (
+                          <Plus className="size-4 mr-2" />
+                        )}
+                        Traduzir
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-64 p-3" align="end">
+                      <p className="text-xs font-medium mb-2 text-muted-foreground">
+                        Traduzir para:
+                      </p>
+                      {availableTargetLocales.length === 0 ? (
+                        <p className="text-xs text-muted-foreground">
+                          Todos os idiomas disponíveis já foram traduzidos.
+                        </p>
+                      ) : (
+                        <div className="flex flex-col gap-1">
+                          {availableTargetLocales.map((loc) => (
+                            <button
+                              key={loc.id}
+                              onClick={() => setTargetLocaleId(loc.id)}
+                              className={cn(
+                                'flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-left transition-colors',
+                                targetLocaleId === loc.id
+                                  ? 'bg-primary text-primary-foreground'
+                                  : 'hover:bg-muted',
+                              )}
+                            >
+                              {loc.name ?? loc.code}
+                            </button>
+                          ))}
+                          <Button
+                            size="sm"
+                            className="mt-2 w-full"
+                            disabled={!targetLocaleId || isTranslating}
+                            onClick={handleTranslate}
+                          >
+                            {isTranslating && (
+                              <Loader2 className="size-4 mr-2 animate-spin" />
+                            )}
+                            Confirmar tradução
+                          </Button>
+                        </div>
+                      )}
+                    </PopoverContent>
+                  </Popover>
                 )}
-                Iniciar transcrição
-              </Button>
+                <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>
             </div>
+
+            {/* Segment list */}
             {segmentsLoading ? (
               <div className="p-4 text-sm text-muted-foreground">
                 Carregando transcrição...
@@ -284,7 +530,9 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
               <EmptyState
                 icon={<FileText className="size-8 text-muted-foreground/40" />}
               >
-                Transcrição não disponível para esta aula.
+                {transcriptionLocales.length === 0
+                  ? 'Transcrição não disponível para esta aula.'
+                  : 'Nenhum segmento encontrado para este idioma.'}
               </EmptyState>
             )}
           </TabsContent>