@hed-hog/lms 0.0.365 → 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/certificates/models/page.tsx.ejs

@@ -7,6 +7,7 @@ import {
   PageHeader,
   PaginationFooter,
   SearchBar,
+  ViewModeToggle,
 } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -38,8 +39,17 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { usePersistedViewMode } from '@/hooks/use-persisted-view-mode';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
@@ -96,7 +106,8 @@ type UpdateCertificateTemplatePayload = {
   status: TemplateStatus;
 };
 
-const PAGE_SIZES = [6, 12, 24];
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+type ViewMode = 'cards' | 'list';
 
 const createTemplateSchema = (t: (key: string) => string) =>
   z.object({
@@ -140,10 +151,49 @@ export default function ModelsPage() {
   const [searchQuery, setSearchQuery] = useState('');
   const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
   const [currentPage, setCurrentPage] = useState(1);
+  const [viewMode, setViewMode] = usePersistedViewMode<ViewMode>({
+    storageKey: 'lms:certificate-models:view-mode',
+    defaultValue: 'cards',
+    allowedValues: ['cards', 'list'],
+  });
+
+  const { data: generalSettings } = useQuery<{
+    data: Array<{ slug: string; value: string }>;
+  }>({
+    queryKey: ['setting-group-general'],
+    queryFn: async () => {
+      const response = await request<{
+        data: Array<{ slug: string; value: string }>;
+      }>({
+        url: '/setting/group/general',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const pageSizeOptions = useMemo(() => {
+    const setting = generalSettings?.data?.find(
+      (s) => s.slug === 'pagination-page-sizes'
+    );
+    if (!setting?.value) return DEFAULT_PAGE_SIZES;
+    try {
+      const parsed = JSON.parse(setting.value) as string[];
+      const sizes = parsed
+        .map(Number)
+        .filter((n) => !isNaN(n) && n > 0)
+        .sort((a, b) => a - b);
+      return sizes.length > 0 ? sizes : DEFAULT_PAGE_SIZES;
+    } catch {
+      return DEFAULT_PAGE_SIZES;
+    }
+  }, [generalSettings]);
+
   const [pageSize, setPageSize] = usePersistedPageSize({
     storageKey: 'pagination:global:pageSize',
     defaultValue: 12,
-    allowedValues: PAGE_SIZES,
+    allowedValues: pageSizeOptions,
   });
   const [isSheetOpen, setIsSheetOpen] = useState(false);
   const [isEditSheetOpen, setIsEditSheetOpen] = useState(false);
@@ -540,6 +590,14 @@ export default function ModelsPage() {
                 ],
               },
             ]}
+            actions={
+              <ViewModeToggle
+                viewMode={viewMode}
+                onViewModeChange={setViewMode}
+                listLabel={t('viewMode.list')}
+                cardsLabel={t('viewMode.cards')}
+              />
+            }
           />
 
           <div className="flex items-center justify-between gap-3">
@@ -567,31 +625,67 @@ export default function ModelsPage() {
         </div>
 
         {loading ? (
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            {Array.from({ length: 6 }).map((_, index) => (
-              <Card
-                key={index}
-                className="overflow-hidden border-border/70 py-0"
-              >
-                <div className="h-1 w-full bg-linear-to-r from-slate-300/70 via-slate-200 to-transparent" />
-                <CardContent className="space-y-4 p-5">
-                  <div className="flex items-center gap-2">
-                    <Skeleton className="h-6 w-24 rounded-full" />
-                    <Skeleton className="h-6 w-20 rounded-full" />
-                  </div>
-                  <div>
-                    <Skeleton className="mb-2 h-5 w-3/4" />
-                    <Skeleton className="h-4 w-1/2" />
-                  </div>
-                  <div className="grid grid-cols-2 gap-3">
-                    <Skeleton className="h-14 w-full rounded-xl" />
-                    <Skeleton className="h-14 w-full rounded-xl" />
-                  </div>
-                  <Skeleton className="h-9 w-36 rounded-md" />
-                </CardContent>
-              </Card>
-            ))}
-          </div>
+          viewMode === 'cards' ? (
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {Array.from({ length: 6 }).map((_, index) => (
+                <Card
+                  key={index}
+                  className="overflow-hidden border-border/70 py-0"
+                >
+                  <div className="h-1 w-full bg-linear-to-r from-slate-300/70 via-slate-200 to-transparent" />
+                  <CardContent className="space-y-4 p-5">
+                    <div className="flex items-center gap-2">
+                      <Skeleton className="h-6 w-24 rounded-full" />
+                      <Skeleton className="h-6 w-20 rounded-full" />
+                    </div>
+                    <div>
+                      <Skeleton className="mb-2 h-5 w-3/4" />
+                      <Skeleton className="h-4 w-1/2" />
+                    </div>
+                    <div className="grid grid-cols-2 gap-3">
+                      <Skeleton className="h-14 w-full rounded-xl" />
+                      <Skeleton className="h-14 w-full rounded-xl" />
+                    </div>
+                    <Skeleton className="h-9 w-36 rounded-md" />
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          ) : (
+            <div className="overflow-hidden rounded-xl border border-border/70">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('table.name')}</TableHead>
+                    <TableHead>{t('table.status')}</TableHead>
+                    <TableHead>{t('table.updatedAt')}</TableHead>
+                    <TableHead className="w-12" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {Array.from({ length: 6 }).map((_, i) => (
+                    <TableRow key={i}>
+                      <TableCell>
+                        <div className="space-y-1.5">
+                          <Skeleton className="h-4 w-48" />
+                          <Skeleton className="h-3 w-32" />
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Skeleton className="h-5 w-20 rounded-full" />
+                      </TableCell>
+                      <TableCell>
+                        <Skeleton className="h-4 w-24" />
+                      </TableCell>
+                      <TableCell>
+                        <Skeleton className="ml-auto size-8 rounded-md" />
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )
         ) : totalItems === 0 ? (
           <EmptyState
             icon={<Files className="size-12 text-muted-foreground/40" />}
@@ -602,7 +696,7 @@ export default function ModelsPage() {
             onAction={openCreateSheet}
             className="py-20"
           />
-        ) : (
+        ) : viewMode === 'cards' ? (
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
             {templates.map((template) => (
               <Card
@@ -684,6 +778,65 @@ export default function ModelsPage() {
               </Card>
             ))}
           </div>
+        ) : (
+          <div className="overflow-hidden rounded-xl border border-border/70">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('table.name')}</TableHead>
+                  <TableHead>{t('table.status')}</TableHead>
+                  <TableHead>{t('table.updatedAt')}</TableHead>
+                  <TableHead className="w-12" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {templates.map((template) => (
+                  <TableRow
+                    key={template.id}
+                    className="cursor-pointer"
+                    onClick={() => handleCardClick(template)}
+                  >
+                    <TableCell>
+                      <p className="font-semibold text-foreground">
+                        {template.name}
+                      </p>
+                      <p className="font-mono text-xs text-muted-foreground">
+                        {template.slug}
+                      </p>
+                    </TableCell>
+                    <TableCell>{renderStatusBadge(template.status)}</TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {formatDate(resolveUpdatedAt(template))}
+                    </TableCell>
+                    <TableCell onClick={(e) => e.stopPropagation()}>
+                      <IconActionGroup
+                        className="ml-auto"
+                        actions={[
+                          {
+                            key: 'editor',
+                            label: t('cards.actions.editTemplate'),
+                            icon: <FileEdit className="size-4" />,
+                            onClick: () =>
+                              router.push(
+                                `/lms/certificates/models/editor?templateId=${template.id}`
+                              ),
+                          },
+                          {
+                            key: 'delete',
+                            label: t('cards.actions.deleteTemplate'),
+                            icon: <Trash2 className="size-4" />,
+                            onClick: () => onDeleteTemplate(template),
+                            destructive: true,
+                            disabled: deletingTemplateId === template.id,
+                          },
+                        ]}
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
         )}
 
         {!loading && totalItems > 0 ? (
@@ -696,7 +849,7 @@ export default function ModelsPage() {
               setPageSize(value);
               setCurrentPage(1);
             }}
-            pageSizeOptions={PAGE_SIZES}
+            pageSizeOptions={pageSizeOptions}
           />
         ) : null}
       </div>