@hed-hog/lms 0.0.361 → 0.0.364

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

@@ -1,23 +1,32 @@
 'use client';
 
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { cn } from '@/lib/utils';
+import { useQueryClient } from '@tanstack/react-query';
 import {
   Clock,
   ExternalLink,
   FileText,
   HelpCircle,
   Layers,
+  Loader2,
+  Mic,
   Paperclip,
   Video,
   type LucideIcon,
 } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
 import { useLmsSettingsQuery } from '../_data/use-lms-settings-query';
-import { useTranscriptionSegmentsQuery } from '../_data/use-transcription-segments';
+import {
+  useStartTranscriptionMutation,
+  useTranscriptionSegmentsQuery,
+} from '../_data/use-transcription-segments';
 import { useStructureStore } from './store';
+import { LessonXpTab } from './detail-lesson-xp-tab';
 import type { LessonType } from './types';
 
 const LESSON_TYPE_CONFIG: Record<
@@ -77,9 +86,25 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
 
   const { data: segments = [], isLoading: segmentsLoading } =
     useTranscriptionSegmentsQuery(
-      activeTab === 'transcription' ? (lesson?.id ?? null) : null
+      activeTab === 'transcription' || activeTab === 'xp' ? (lesson?.id ?? null) : null
     );
 
+  const queryClient = useQueryClient();
+  const { mutate: startTranscription, isPending: isStarting } =
+    useStartTranscriptionMutation(lesson?.id ?? null);
+
+  const handleStartTranscription = () => {
+    startTranscription({
+      onSuccess: () => {
+        toast.success('Transcrição iniciada!');
+        queryClient.invalidateQueries({ queryKey: ['lesson-transcription-segments', lesson?.id] });
+      },
+      onError: (err) => {
+        toast.error(err.message || 'Erro ao iniciar a transcrição.');
+      },
+    });
+  };
+
   if (!lesson) return null;
 
   const cfg = LESSON_TYPE_CONFIG[lesson.type];
@@ -124,6 +149,7 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
             <TabsTrigger value="transcription">Transcrição</TabsTrigger>
           )}
           <TabsTrigger value="resources">Recursos</TabsTrigger>
+          <TabsTrigger value="xp">XP</TabsTrigger>
         </TabsList>
 
         {/* ── Dados ─────────────────────────────────────────────────────────── */}
@@ -236,6 +262,21 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
           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...
@@ -261,6 +302,18 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
           )}
         </TabsContent>}
 
+        {/* ── XP da Aula ────────────────────────────────────────────────────── */}
+        <TabsContent
+          value="xp"
+          className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
+        >
+          <LessonXpTab
+            lessonId={lesson.id}
+            activeTab={activeTab}
+            hasTranscription={segments.length > 0}
+          />
+        </TabsContent>
+
         {/* ── Recursos ──────────────────────────────────────────────────────── */}
         <TabsContent
           value="resources"