@hed-hog/lms 0.0.365 → 0.0.370

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

@@ -6,17 +6,19 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import {
   AlertTriangle,
   BookOpen,
-  Briefcase,
   CheckCircle2,
   CircleDot,
   Clock,
   Download,
+  Languages,
   Layers,
   Loader2,
   Mic,
+  MoreVertical,
   Pencil,
   Plus,
   Save,
+  Trash2,
   Undo2,
   UploadCloud,
   Video,
@@ -28,6 +30,7 @@ import { useRouter } from 'next/navigation';
 import { type ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
+import { useDeleteCourseTranscriptionsMutation } from '../_data/use-transcription-segments';
 import { z } from 'zod';
 
 import { createDefaultTemplate } from '@/app/(app)/(libraries)/lms/_lib/editor/types';
@@ -105,6 +108,7 @@ import { CourseClassificationCard } from '../../_components/CourseClassification
 import { CourseContentCard } from '../../_components/CourseContentCard';
 import { CourseDangerZoneCard } from '../../_components/CourseDangerZoneCard';
 import { CourseFlagsCard } from '../../_components/CourseFlagsCard';
+import { CourseIssuedCertificatesCard } from '../../_components/CourseIssuedCertificatesCard';
 import { CourseMediaCard } from '../../_components/CourseMediaCard';
 import { CourseRelationsCard } from '../../_components/CourseRelationsCard';
 import {
@@ -120,6 +124,7 @@ import { CourseExportSheet } from './course-export-sheet';
 import { CourseExportsTab } from './course-exports-tab';
 import { CourseOperationsTab } from './course-operations-tab';
 import { CourseOverviewTab } from './course-overview-tab';
+import { CourseAiCostsTab } from './course-ai-costs-tab';
 import { CourseXpOverviewTab } from './course-xp-overview-tab';
 import { CourseInstructorsSummaryCard } from './CourseInstructorsSummaryCard';
 import { IconActionTooltip } from './icon-action-tooltip';
@@ -511,6 +516,7 @@ const COURSE_TABS = [
   'publicacao',
   'extra',
   'exportacoes',
+  'custos-ia',
 ] as const;
 type CourseTab = (typeof COURSE_TABS)[number];
 
@@ -521,6 +527,7 @@ interface EditorCourseProps {
 
 export function EditorCourse({ defaultTab, onTabChange }: EditorCourseProps) {
   const courseId = useStructureStore((s) => s.courseId);
+  const showConfirm = useStructureStore((s) => s.showConfirm);
   const course = useStructureStore((s) => s.course);
   const sessions = useStructureStore((s) => s.sessions);
   const lessons = useStructureStore((s) => s.lessons);
@@ -535,6 +542,39 @@ export function EditorCourse({ defaultTab, onTabChange }: EditorCourseProps) {
   const router = useRouter();
   const isMobile = useIsMobile();
   const queryClient = useQueryClient();
+  const { mutate: deleteCourseTranscriptions, isPending: isDeletingTranscriptions } =
+    useDeleteCourseTranscriptionsMutation(courseId);
+
+  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.');
+          },
+        });
+      },
+    });
+  };
   const createSessionMutation = useCreateSessionMutation();
   const lmsSettings = useLmsSettingsQuery();
 
@@ -547,6 +587,9 @@ export function EditorCourse({ defaultTab, onTabChange }: EditorCourseProps) {
   const [exportSheetOpen, setExportSheetOpen] = useState(false);
   const [pendingBulkJob, setPendingBulkJob] = useState<'transcription' | 'xp_recalculation' | 'video_processing' | null>(null);
   const [isBulkJobPending, setIsBulkJobPending] = useState(false);
+  const [translateTranscriptionSheetOpen, setTranslateTranscriptionSheetOpen] = useState(false);
+  const [bulkTranslateLocaleId, setBulkTranslateLocaleId] = useState<number | null>(null);
+  const [isBulkTranslating, setIsBulkTranslating] = useState(false);
   const [videoProcessingStats, setVideoProcessingStats] = useState<{
     withOriginal: number;
     withoutOriginal: number;
@@ -951,6 +994,12 @@ export function EditorCourse({ defaultTab, onTabChange }: EditorCourseProps) {
         String(formValues.modeloCertificado ?? '').trim().length > 0,
       required: formValues.certificado,
     },
+    {
+      id: 'listed',
+      label: t('structureEditor.publishChecklist.items.listed'),
+      done: formValues.listado,
+      required: false,
+    },
   ];
   const requiredChecklist = checklistItems.filter((item) => item.required);
   const completedRequired = requiredChecklist.filter(
@@ -1589,6 +1638,26 @@ export function EditorCourse({ defaultTab, onTabChange }: EditorCourseProps) {
   }
 
   // ── Bulk jobs ─────────────────────────────────────────────────────────────────
+  const handleBulkTranslateTranscription = async () => {
+    if (!bulkTranslateLocaleId) return;
+    setIsBulkTranslating(true);
+    try {
+      const res = await request<{ queued: number; skipped: number }>({
+        url: `/lms/courses/${courseId}/structure/bulk-jobs`,
+        method: 'POST',
+        data: { jobType: 'translate_transcription', targetLocaleId: bulkTranslateLocaleId },
+      });
+      const { queued = 0, skipped = 0 } = res.data ?? {};
+      toast.success(`${queued} job(s) de tradução enfileirado(s). ${skipped} aula(s) ignoradas.`);
+      setTranslateTranscriptionSheetOpen(false);
+      setBulkTranslateLocaleId(null);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Erro ao enfileirar traduções em massa.');
+    } finally {
+      setIsBulkTranslating(false);
+    }
+  };
+
   const handleBulkJob = async (
     jobType: 'transcription' | 'xp_recalculation' | 'video_processing',
     opts?: { reprocessAlreadyProcessed?: boolean },
@@ -1771,7 +1840,7 @@ export function EditorCourse({ defaultTab, onTabChange }: EditorCourseProps) {
                   {isBulkJobPending || isFetchingVideoStats ? (
                     <Loader2 className="size-3.5 animate-spin" />
                   ) : (
-                    <Briefcase className="size-3.5" />
+                    <MoreVertical className="size-3.5" />
                   )}
                 </Button>
               </DropdownMenuTrigger>
@@ -1779,37 +1848,90 @@ export function EditorCourse({ defaultTab, onTabChange }: EditorCourseProps) {
                 <DropdownMenuLabel className="text-xs">Jobs em massa</DropdownMenuLabel>
                 <DropdownMenuSeparator />
                 {lmsSettings.transcriptionEnabled && (
+                  <IconActionTooltip
+                    side="right"
+                    label="Reprocessa a transcrição de áudio de todas as aulas do curso"
+                  >
+                    <DropdownMenuItem
+                      onSelect={() => setPendingBulkJob('transcription')}
+                      className="gap-2"
+                    >
+                      <Mic className="size-4 text-muted-foreground" />
+                      Refazer transcrições
+                    </DropdownMenuItem>
+                  </IconActionTooltip>
+                )}
+                {lmsSettings.transcriptionEnabled && (
+                  <IconActionTooltip
+                    side="right"
+                    label="Gera traduções das transcrições das aulas para outro idioma"
+                  >
+                    <DropdownMenuItem
+                      onSelect={() => setTranslateTranscriptionSheetOpen(true)}
+                      className="gap-2"
+                    >
+                      <Languages className="size-4 text-muted-foreground" />
+                      Traduzir transcrições
+                    </DropdownMenuItem>
+                  </IconActionTooltip>
+                )}
+                <IconActionTooltip
+                  side="right"
+                  label="Recalcula a pontuação de XP de todas as aulas do curso"
+                >
                   <DropdownMenuItem
-                    onSelect={() => setPendingBulkJob('transcription')}
+                    onSelect={() => setPendingBulkJob('xp_recalculation')}
                     className="gap-2"
                   >
-                    <Mic className="size-4 text-muted-foreground" />
-                    Refazer transcrição de todas as aulas
+                    <Zap className="size-4 text-muted-foreground" />
+                    Recalcular XP
                   </DropdownMenuItem>
-                )}
-                <DropdownMenuItem
-                  onSelect={() => setPendingBulkJob('xp_recalculation')}
-                  className="gap-2"
+                </IconActionTooltip>
+                <IconActionTooltip
+                  side="right"
+                  label="Inicia o processamento de todos os vídeos do curso"
                 >
-                  <Zap className="size-4 text-muted-foreground" />
-                  Recalcular XP de todas as aulas
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onSelect={handleOpenVideoProcessingDialog}
-                  className="gap-2"
-                >
-                  <Video className="size-4 text-muted-foreground" />
-                  Processar todos os vídeos
-                </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onSelect={handleOpenVideoProcessingDialog}
+                    className="gap-2"
+                  >
+                    <Video className="size-4 text-muted-foreground" />
+                    Processar vídeos
+                  </DropdownMenuItem>
+                </IconActionTooltip>
                 <DropdownMenuSeparator />
                 <DropdownMenuLabel className="text-xs">Exportar</DropdownMenuLabel>
-                <DropdownMenuItem
-                  onSelect={() => setExportSheetOpen(true)}
-                  className="gap-2"
+                <IconActionTooltip
+                  side="right"
+                  label="Exporta o curso no formato SCORM 1.2"
                 >
-                  <Download className="size-4 text-muted-foreground" />
-                  SCORM 1.2
-                </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onSelect={() => setExportSheetOpen(true)}
+                    className="gap-2"
+                  >
+                    <Download className="size-4 text-muted-foreground" />
+                    SCORM 1.2
+                  </DropdownMenuItem>
+                </IconActionTooltip>
+                {lmsSettings.transcriptionEnabled && (
+                  <>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuLabel className="text-xs">Exclusão</DropdownMenuLabel>
+                    <IconActionTooltip
+                      side="right"
+                      label="Remove todas as transcrições e traduções de todas as aulas do curso"
+                    >
+                      <DropdownMenuItem
+                        onSelect={handleDeleteAllTranscriptions}
+                        disabled={isDeletingTranscriptions}
+                        className="gap-2 text-destructive focus:text-destructive"
+                      >
+                        <Trash2 className="size-4" />
+                        Excluir transcrições
+                      </DropdownMenuItem>
+                    </IconActionTooltip>
+                  </>
+                )}
               </DropdownMenuContent>
             </DropdownMenu>
 
@@ -1897,6 +2019,71 @@ export function EditorCourse({ defaultTab, onTabChange }: EditorCourseProps) {
                 </DialogFooter>
               </DialogContent>
             </Dialog>
+
+            {/* ── Sheet: Traduzir transcrições em massa ──────────────────── */}
+            <Sheet
+              open={translateTranscriptionSheetOpen}
+              onOpenChange={(open) => {
+                setTranslateTranscriptionSheetOpen(open);
+                if (!open) setBulkTranslateLocaleId(null);
+              }}
+            >
+              <ResizableSheetContent sheetId="bulk-translate-transcription" side="right">
+                <SheetHeader className="px-4 pt-4">
+                  <SheetTitle>Traduzir transcrições — todas as aulas</SheetTitle>
+                  <SheetDescription>
+                    Selecione o idioma-alvo. Um job de tradução será criado para cada
+                    aula que já tiver transcrição neste curso. Aulas sem transcrição
+                    serão ignoradas.
+                  </SheetDescription>
+                </SheetHeader>
+                <div className="flex flex-col gap-4 px-4 pt-4">
+                  <EntityPicker
+                    placeholder="Selecione o idioma"
+                    value={bulkTranslateLocaleId ?? undefined}
+                    onChange={(val) => setBulkTranslateLocaleId(val ? Number(val) : null)}
+                    showCreateButton
+                    loadOptions={async ({ page, search }) => {
+                      const res = await request<{
+                        data: Array<{ id: number; name: string; code: string; region?: string }>;
+                      }>({
+                        url: `/core/locales?page=${page}&search=${encodeURIComponent(search)}`,
+                        method: 'GET',
+                      });
+                      return res.data?.data ?? [];
+                    }}
+                    getOptionValue={(l) => l.id}
+                    getOptionLabel={(l) => l.name}
+                    createTitle="Adicionar idioma"
+                    createFields={[
+                      { name: 'name', label: 'Nome', placeholder: 'Ex: Français (France)' },
+                      { name: 'code', label: 'Código', placeholder: 'fr' },
+                      { name: 'region', label: 'Região', placeholder: 'FR' },
+                    ]}
+                    onCreate={async (values) => {
+                      const res = await request<{
+                        id: number;
+                        name: string;
+                        code: string;
+                        region?: string;
+                      }>({
+                        url: '/core/locales',
+                        method: 'POST',
+                        data: { ...values, enabled: false },
+                      });
+                      return res.data ?? null;
+                    }}
+                  />
+                  <Button
+                    onClick={handleBulkTranslateTranscription}
+                    disabled={!bulkTranslateLocaleId || isBulkTranslating}
+                  >
+                    {isBulkTranslating && <Loader2 className="size-4 mr-2 animate-spin" />}
+                    Enfileirar traduções
+                  </Button>
+                </div>
+              </ResizableSheetContent>
+            </Sheet>
           </div>
         </div>
 
@@ -1930,6 +2117,7 @@ export function EditorCourse({ defaultTab, onTabChange }: EditorCourseProps) {
                 'publicacao',
                 'extra',
                 'exportacoes',
+                'custos-ia',
               ] as const
             ).map((tab) => (
               <TabsTrigger
@@ -1958,7 +2146,9 @@ export function EditorCourse({ defaultTab, onTabChange }: EditorCourseProps) {
                                 ? 'Operações'
                                 : tab === 'exportacoes'
                                     ? 'Exportações'
-                                    : t('structureEditor.tabs.publish')}
+                                    : tab === 'custos-ia'
+                                        ? 'Custos de IA'
+                                        : t('structureEditor.tabs.publish')}
               </TabsTrigger>
             ))}
           </TabsList>
@@ -2111,7 +2301,7 @@ export function EditorCourse({ defaultTab, onTabChange }: EditorCourseProps) {
                                         region?: string;
                                       }>
                                   >({
-                                    url: `/core/locales?page=${page}&search=${encodeURIComponent(search ?? '')}`,
+                                    url: `/core/locales?page=${page}&search=${encodeURIComponent(search ?? '')}&enabled=true`,
                                     method: 'GET',
                                   });
 
@@ -2209,6 +2399,11 @@ export function EditorCourse({ defaultTab, onTabChange }: EditorCourseProps) {
                   compact
                 />
                 <CourseContentCard form={form} compact />
+                <CourseDangerZoneCard
+                  t={t}
+                  onDelete={openDeleteDialog}
+                  compact
+                />
               </TabsContent>
 
               <TabsContent value="xp" className="mt-0 min-w-0">
@@ -2218,6 +2413,11 @@ export function EditorCourse({ defaultTab, onTabChange }: EditorCourseProps) {
                 />
               </TabsContent>
 
+              {/* ── Tab: Custos de IA ───────────────────────────────────── */}
+              <TabsContent value="custos-ia" className="mt-0 min-w-0">
+                <CourseAiCostsTab courseId={courseId} />
+              </TabsContent>
+
               {/* ── Tab: Mídia ──────────────────────────────────────────── */}
               <TabsContent value="midia" className="mt-0 min-w-0">
                 <CourseMediaCard
@@ -2469,7 +2669,7 @@ export function EditorCourse({ defaultTab, onTabChange }: EditorCourseProps) {
                 </Card>
               </TabsContent>
 
-              {/* ── Tab: Extra ──────────────────────────────────────────── */}
+              {/* ── Tab: Certificado ────────────────────────────────────── */}
               <TabsContent
                 value="extra"
                 className="mt-0 flex min-w-0 flex-col gap-3"
@@ -2481,12 +2681,13 @@ export function EditorCourse({ defaultTab, onTabChange }: EditorCourseProps) {
                   onCreateTemplate={handleCreateCertificateTemplate}
                   compact
                 />
-                <CourseFlagsCard form={form} t={t} compact />
-                <CourseDangerZoneCard
+                <CourseFlagsCard
+                  form={form}
                   t={t}
-                  onDelete={openDeleteDialog}
+                  flags={['certificado']}
                   compact
                 />
+                <CourseIssuedCertificatesCard courseId={courseId} compact />
               </TabsContent>
 
               {/* ── Tab: Operações ──────────────────────────────────────── */}
@@ -2578,6 +2779,13 @@ export function EditorCourse({ defaultTab, onTabChange }: EditorCourseProps) {
                     </Button>
                   </CardContent>
                 </Card>
+
+                <CourseFlagsCard
+                  form={form}
+                  t={t}
+                  flags={['destaque', 'listado']}
+                  compact
+                />
               </TabsContent>
 
               {/* ── Tab: Exportações ────────────────────────────────────────── */}