@hed-hog/lms 0.0.366 → 0.0.370

package/hedhog/frontend/app/bulk-upload-sessions/page.tsx.ejs

@@ -83,6 +83,7 @@ type UploadStatus =
   | 'queued'
   | 'uploading'
   | 'cancelling'
+  | 'processing'
   | 'received'
   | 'done'
   | 'error'
@@ -116,6 +117,9 @@ type UploadItemRow = {
   matchedSessionTitle: string | null;
   matchedLessonId: number | null;
   matchedLessonTitle: string | null;
+  jobStatus: string | null;
+  jobAttempts: number | null;
+  jobMaxAttempts: number | null;
 };
 
 type UploadListResponse = {
@@ -271,6 +275,15 @@ function formatDate(value: string | null) {
 
 function getStatusMeta(status: UploadStatus) {
   switch (status) {
+    case 'processing':
+      return {
+        label: 'Aula vinculada',
+        variant: 'secondary' as const,
+        icon: Loader2,
+        iconClass: 'text-violet-500 animate-spin',
+        animated: true,
+        progressClass: 'bg-violet-500',
+      };
     case 'received':
       return {
         label: 'Concluido',
@@ -394,6 +407,7 @@ export default function LmsBulkUploadSessionsPage() {
   } | null>(null);
   const [manualLinkStructureLoading, setManualLinkStructureLoading] = useState(false);
   const [isLinkingLesson, setIsLinkingLesson] = useState(false);
+  const [manualLinkIsReassign, setManualLinkIsReassign] = useState(false);
   const [pageSize, setPageSize] = usePersistedPageSize({
     storageKey: 'pagination:global:pageSize',
     defaultValue: PAGE_SIZE_OPTIONS[1],
@@ -446,7 +460,7 @@ export default function LmsBulkUploadSessionsPage() {
     },
   });
 
-  const ACTIVE_STATUSES: UploadStatus[] = ['queued', 'uploading', 'cancelling', 'done'];
+  const ACTIVE_STATUSES: UploadStatus[] = ['queued', 'uploading', 'cancelling', 'processing', 'done'];
 
   const {
     data,
@@ -485,7 +499,7 @@ export default function LmsBulkUploadSessionsPage() {
     enabled: manualLinkOpen,
     queryFn: async () => {
       const response = await request<{ data: Array<{ id: number; title: string; code: string | null }> }>({
-        url: '/course?pageSize=500',
+        url: '/lms/courses?pageSize=500',
         method: 'GET',
       });
       return response.data;
@@ -498,6 +512,7 @@ export default function LmsBulkUploadSessionsPage() {
     () => ({
       sending: rows.filter((row) => row.status === 'uploading').length,
       done: rows.filter((row) => row.status === 'received').length,
+      pending: rows.filter((row) => row.status === 'done').length,
       error: rows.filter((row) => row.status === 'error').length,
     }),
     [rows]
@@ -523,6 +538,15 @@ export default function LmsBulkUploadSessionsPage() {
         iconContainerClassName: 'bg-green-500/10 text-green-700',
         layout: 'compact' as const,
       },
+      {
+        key: 'pending',
+        title: 'Pendentes',
+        value: isLoading ? '-' : stats.pending,
+        icon: Clock,
+        accentClassName: 'from-blue-500/20 via-blue-500/10 to-transparent',
+        iconContainerClassName: 'bg-blue-500/10 text-blue-700',
+        layout: 'compact' as const,
+      },
       {
         key: 'error',
         title: 'Erros',
@@ -666,15 +690,29 @@ export default function LmsBulkUploadSessionsPage() {
     }
   };
 
-  const openManualLink = async (itemId: number) => {
+  const openManualLink = async (
+    itemId: number,
+    prefill?: {
+      courseId: number | null;
+      sessionId: number | null;
+      lessonId: number | null;
+    }
+  ) => {
     setManualLinkItemId(itemId);
-    setManualLinkCourseId(null);
-    setManualLinkSessionId(null);
-    setManualLinkLessonId(null);
+    setManualLinkCourseId(prefill?.courseId ?? null);
+    setManualLinkSessionId(prefill?.sessionId ?? null);
+    setManualLinkLessonId(prefill?.lessonId ?? null);
     setManualLinkStructure(null);
     setManualLinkVideoUrl(null);
+    setManualLinkIsReassign(Boolean(prefill?.courseId && prefill?.lessonId));
     setManualLinkOpen(true);
     setManualLinkVideoLoading(true);
+    if (prefill?.courseId) {
+      void loadCourseStructure(prefill.courseId, {
+        sessionId: prefill.sessionId,
+        lessonId: prefill.lessonId,
+      });
+    }
     try {
       const res = await request<{ url: string }>({
         url: `/lms/bulk-upload/item/${itemId}/video-url`,
@@ -688,16 +726,35 @@ export default function LmsBulkUploadSessionsPage() {
     }
   };
 
-  const loadCourseStructure = async (courseId: number) => {
+  const loadCourseStructure = async (
+    courseId: number,
+    keep?: { sessionId: number | null; lessonId: number | null }
+  ) => {
     setManualLinkStructureLoading(true);
-    setManualLinkSessionId(null);
-    setManualLinkLessonId(null);
+    if (!keep) {
+      setManualLinkSessionId(null);
+      setManualLinkLessonId(null);
+    }
     try {
-      const res = await request<{ sessions: Array<{ id: number; title: string; lessons: Array<{ id: number; title: string }> }> }>({
-        url: `/course/${courseId}/structure`,
+      const res = await request<{
+        sessoes: Array<{ id: string; titulo: string }>;
+        aulas: Array<{ id: string; titulo: string; sessaoId: string }>;
+      }>({
+        url: `/lms/courses/${courseId}/structure`,
         method: 'GET',
       });
-      setManualLinkStructure({ sessions: res.data.sessions ?? [] });
+      const sessions = (res.data.sessoes ?? []).map((sessao) => ({
+        id: Number(sessao.id),
+        title: sessao.titulo,
+        lessons: (res.data.aulas ?? [])
+          .filter((aula) => aula.sessaoId === sessao.id)
+          .map((aula) => ({ id: Number(aula.id), title: aula.titulo })),
+      }));
+      setManualLinkStructure({ sessions });
+      if (keep) {
+        setManualLinkSessionId(keep.sessionId);
+        setManualLinkLessonId(keep.lessonId);
+      }
     } catch {
       setManualLinkStructure(null);
     } finally {
@@ -1384,7 +1441,7 @@ export default function LmsBulkUploadSessionsPage() {
         onSaved={handleProfileSaved}
       />
 
-      <KpiCardsGrid items={kpiItems} columns={3} />
+      <KpiCardsGrid items={kpiItems} columns={4} />
 
       <div className="flex items-center justify-between gap-3">
         <SearchBar
@@ -1465,9 +1522,21 @@ export default function LmsBulkUploadSessionsPage() {
                           <FileTypeIcon filename={row.fileName} size={20} />
                         </span>
                         <div className="min-w-0 space-y-0.5">
-                          <p className="truncate text-sm font-medium">
-                            {row.fileName}
-                          </p>
+                          <TooltipProvider>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <p className="truncate text-sm font-medium cursor-default">
+                                  {row.fileName}
+                                </p>
+                              </TooltipTrigger>
+                              <TooltipContent
+                                side="top"
+                                className="max-w-md break-all"
+                              >
+                                {row.fileName}
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
                           <p className="truncate text-xs text-muted-foreground">
                             Sessao #{row.sessionId} &middot; {row.appName}
                           </p>
@@ -1512,12 +1581,13 @@ export default function LmsBulkUploadSessionsPage() {
 
                     <TableCell className="max-w-[22rem]">
                       {row.matchedCourseId && row.matchedLessonId ? (
+                        <div className="flex items-center gap-1">
                         <button
                           type="button"
-                          className="flex w-full items-center gap-2 text-left"
+                          className="flex min-w-0 flex-1 items-center gap-2 text-left"
                           onClick={() =>
                             window.open(
-                              `/lms/courses/${row.matchedCourseId}`,
+                              `/lms/courses/${row.matchedCourseId}?sel=${row.matchedLessonId}&type=lesson&tab=videos`,
                               '_blank',
                               'noopener,noreferrer'
                             )
@@ -1553,7 +1623,33 @@ export default function LmsBulkUploadSessionsPage() {
                             </p>
                           </div>
                         </button>
-                      ) : row.status === 'lesson_not_found' ? (
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-7 w-7 shrink-0 text-muted-foreground"
+                                onClick={(event) => {
+                                  event.stopPropagation();
+                                  openManualLink(row.id, {
+                                    courseId: row.matchedCourseId,
+                                    sessionId: row.matchedSessionId,
+                                    lessonId: row.matchedLessonId,
+                                  });
+                                }}
+                                aria-label="Alterar aula vinculada"
+                              >
+                                <Pencil className="h-3.5 w-3.5" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              Alterar aula vinculada
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                        </div>
+                      ) : (row.status === 'lesson_not_found' || row.status === 'done') ? (
                         <Button
                           variant="outline"
                           size="sm"
@@ -1569,11 +1665,21 @@ export default function LmsBulkUploadSessionsPage() {
                     </TableCell>
 
                     <TableCell>
-                      <div className="flex items-center gap-1.5">
-                        <StatusIcon
-                          className={cn('h-3.5 w-3.5 shrink-0', meta.iconClass)}
-                        />
-                        <Badge variant={meta.variant}>{meta.label}</Badge>
+                      <div className="flex flex-col gap-1">
+                        <div className="flex items-center gap-1.5">
+                          <StatusIcon
+                            className={cn('h-3.5 w-3.5 shrink-0', meta.iconClass)}
+                          />
+                          <Badge variant={meta.variant}>{meta.label}</Badge>
+                        </div>
+                        {row.status === 'processing' && row.jobStatus ? (
+                          <p className="text-[11px] text-muted-foreground">
+                            Job: {row.jobStatus}
+                            {row.jobAttempts != null && row.jobMaxAttempts != null
+                              ? ` (${row.jobAttempts}/${row.jobMaxAttempts})`
+                              : ''}
+                          </p>
+                        ) : null}
                       </div>
                     </TableCell>
 
@@ -1638,10 +1744,14 @@ export default function LmsBulkUploadSessionsPage() {
           <SheetHeader className="border-b px-6 py-4">
             <SheetTitle className="flex items-center gap-2">
               <Link2 className="h-4 w-4" />
-              Vincular aula manualmente
+              {manualLinkIsReassign
+                ? 'Alterar aula vinculada'
+                : 'Vincular aula manualmente'}
             </SheetTitle>
             <SheetDescription>
-              Selecione o curso, módulo e aula para associar este vídeo e iniciar o processamento.
+              {manualLinkIsReassign
+                ? 'Selecione o novo curso, módulo e aula para revincular este vídeo e reiniciar o processamento.'
+                : 'Selecione o curso, módulo e aula para associar este vídeo e iniciar o processamento.'}
             </SheetDescription>
           </SheetHeader>
 
@@ -1739,7 +1849,9 @@ export default function LmsBulkUploadSessionsPage() {
               ) : (
                 <Link2 className="h-4 w-4" />
               )}
-              Confirmar vínculo e iniciar processamento
+              {manualLinkIsReassign
+                ? 'Confirmar novo vínculo e reprocessar'
+                : 'Confirmar vínculo e iniciar processamento'}
             </Button>
           </div>
         </ResizableSheetContent>

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

@@ -17,10 +17,13 @@ import type { UseFormReturn } from 'react-hook-form';
 import { CourseSectionCard } from './CourseSectionCard';
 import type { CourseEditFormValues, TranslationFn } from './course-edit-types';
 
+type CourseFlag = 'certificado' | 'destaque' | 'listado';
+
 type CourseFlagsCardProps = {
   form: UseFormReturn<CourseEditFormValues>;
   t: TranslationFn;
   compact?: boolean;
+  flags?: CourseFlag[];
 };
 
 function FlagRow({
@@ -53,10 +56,13 @@ function FlagRow({
   );
 }
 
+const DEFAULT_FLAGS: CourseFlag[] = ['certificado', 'destaque', 'listado'];
+
 export function CourseFlagsCard({
   form,
   t,
   compact = false,
+  flags = DEFAULT_FLAGS,
 }: CourseFlagsCardProps) {
   return (
     <CourseSectionCard
@@ -66,65 +72,71 @@ export function CourseFlagsCard({
       compact={compact}
     >
       <div className="space-y-3">
-        <FormField
-          control={form.control}
-          name="certificado"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel className="sr-only">
-                {t('form.flags.certificate.label')}
-              </FormLabel>
-              <FormControl>
-                <FlagRow
-                  title={t('form.flags.certificate.label')}
-                  description={t('form.flags.certificate.description')}
-                  checked={field.value}
-                  onCheckedChange={field.onChange}
-                />
-              </FormControl>
-            </FormItem>
-          )}
-        />
+        {flags.includes('certificado') && (
+          <FormField
+            control={form.control}
+            name="certificado"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="sr-only">
+                  {t('form.flags.certificate.label')}
+                </FormLabel>
+                <FormControl>
+                  <FlagRow
+                    title={t('form.flags.certificate.label')}
+                    description={t('form.flags.certificate.description')}
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        )}
 
-        <FormField
-          control={form.control}
-          name="destaque"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel className="sr-only">
-                {t('form.flags.featured.label')}
-              </FormLabel>
-              <FormControl>
-                <FlagRow
-                  title={t('form.flags.featured.label')}
-                  description={t('form.flags.featured.description')}
-                  checked={field.value}
-                  onCheckedChange={field.onChange}
-                />
-              </FormControl>
-            </FormItem>
-          )}
-        />
+        {flags.includes('destaque') && (
+          <FormField
+            control={form.control}
+            name="destaque"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="sr-only">
+                  {t('form.flags.featured.label')}
+                </FormLabel>
+                <FormControl>
+                  <FlagRow
+                    title={t('form.flags.featured.label')}
+                    description={t('form.flags.featured.description')}
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        )}
 
-        <FormField
-          control={form.control}
-          name="listado"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel className="sr-only">
-                {t('form.flags.listed.label')}
-              </FormLabel>
-              <FormControl>
-                <FlagRow
-                  title={t('form.flags.listed.label')}
-                  description={t('form.flags.listed.description')}
-                  checked={field.value}
-                  onCheckedChange={field.onChange}
-                />
-              </FormControl>
-            </FormItem>
-          )}
-        />
+        {flags.includes('listado') && (
+          <FormField
+            control={form.control}
+            name="listado"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="sr-only">
+                  {t('form.flags.listed.label')}
+                </FormLabel>
+                <FormControl>
+                  <FlagRow
+                    title={t('form.flags.listed.label')}
+                    description={t('form.flags.listed.description')}
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        )}
       </div>
     </CourseSectionCard>
   );

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>
+  );
+}