@hed-hog/lms 0.0.365 → 0.0.370

package/hedhog/frontend/app/courses/[id]/_components/CourseIssuedCertificatesCard.tsx.ejs

@@ -0,0 +1,168 @@
+'use client';
+
+import { PaginationFooter } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Award, BadgeCheck } from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+
+import { CourseSectionCard } from './CourseSectionCard';
+
+type IssuedCertificate = {
+  id: number;
+  studentId: number;
+  studentName: string;
+  courseName: string;
+  templateId: number;
+  templateName: string;
+  templateStatus: string | null;
+  certificateType: 'course' | 'exam' | 'course_class_group' | 'learning_path';
+  workloadHours: number;
+  issuedAt: string;
+  completedAt: string;
+  finalScore: number | null;
+  verificationCode: string;
+  verificationUrl: string | null;
+  publicAccess: boolean;
+  pdfUrl: string | null;
+  sourceTitle: string;
+  primaryColor: string | null;
+};
+
+type ApiIssuedCertificatesResponse = {
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage: number;
+  data: IssuedCertificate[];
+};
+
+const PAGE_SIZES = [6, 12, 24] as const;
+
+type CourseIssuedCertificatesCardProps = {
+  courseId: string;
+  compact?: boolean;
+};
+
+export function CourseIssuedCertificatesCard({
+  courseId,
+  compact = false,
+}: CourseIssuedCertificatesCardProps) {
+  const { request } = useApp();
+  const t = useTranslations('lms.CursoEditPage.structureEditor.issuedCertificates');
+  const locale = useLocale();
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState<number>(6);
+
+  const { data, isLoading } = useQuery<ApiIssuedCertificatesResponse>({
+    queryKey: ['lms-course-issued-certificates', courseId, page, pageSize],
+    enabled: Boolean(courseId),
+    queryFn: async () => {
+      const response = await request<ApiIssuedCertificatesResponse>({
+        url: '/lms/certificates/issued',
+        method: 'GET',
+        params: { courseId, page, pageSize },
+      });
+      return response.data;
+    },
+    placeholderData: (old) => old,
+  });
+
+  const certificates = data?.data ?? [];
+  const totalItems = data?.total ?? 0;
+  const totalPages = Math.max(data?.lastPage ?? 1, 1);
+  const loading = isLoading && !data;
+
+  useEffect(() => {
+    if (page > totalPages) setPage(totalPages);
+  }, [page, totalPages]);
+
+  const dateFormatter = useMemo(
+    () =>
+      new Intl.DateTimeFormat(locale.startsWith('pt') ? 'pt-BR' : 'en-US', {
+        dateStyle: 'medium',
+      }),
+    [locale],
+  );
+
+  function formatDate(value: string) {
+    const parsed = new Date(value);
+    if (Number.isNaN(parsed.getTime())) return '-';
+    return dateFormatter.format(parsed);
+  }
+
+  return (
+    <CourseSectionCard
+      title={t('title')}
+      description={t('description')}
+      icon={Award}
+      compact={compact}
+    >
+      {loading ? (
+        <div className="flex flex-col gap-2">
+          {Array.from({ length: 3 }).map((_, index) => (
+            <Skeleton key={index} className="h-14 w-full rounded-md" />
+          ))}
+        </div>
+      ) : totalItems === 0 ? (
+        <p className="py-3 text-center text-xs text-muted-foreground">
+          {t('empty')}
+        </p>
+      ) : (
+        <div className="flex flex-col gap-2">
+          {certificates.map((certificate) => (
+            <div
+              key={certificate.id}
+              className="flex items-center gap-3 rounded-md border bg-background/80 px-2.5 py-2"
+            >
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-xs font-medium">
+                  {certificate.studentName}
+                </p>
+                <div className="mt-0.5 flex flex-wrap items-center gap-1.5 text-[0.65rem] text-muted-foreground">
+                  <span>
+                    {t('issuedAt')}: {formatDate(certificate.issuedAt)}
+                  </span>
+                  <span aria-hidden>·</span>
+                  <span className="font-mono">
+                    {certificate.verificationCode}
+                  </span>
+                </div>
+              </div>
+              {certificate.pdfUrl ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-7 shrink-0 text-muted-foreground hover:text-foreground"
+                  aria-label={t('openPdf')}
+                  onClick={() => window.open(certificate.pdfUrl ?? '', '_blank')}
+                >
+                  <BadgeCheck className="size-4" />
+                </Button>
+              ) : null}
+            </div>
+          ))}
+
+          <div className="pt-1">
+            <PaginationFooter
+              currentPage={page}
+              pageSize={pageSize}
+              totalItems={totalItems}
+              onPageChange={setPage}
+              onPageSizeChange={(value) => {
+                setPageSize(value);
+                setPage(1);
+              }}
+              pageSizeOptions={PAGE_SIZES}
+            />
+          </div>
+        </div>
+      )}
+    </CourseSectionCard>
+  );
+}

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>