@hed-hog/lms 0.0.358 → 0.0.364

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

@@ -0,0 +1,1453 @@
+'use client';
+
+import { CopyButton } from '@/components/copy-button';
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import { FileTypeIcon } from '@/components/file-type-icon';
+import {
+  IntegrationProfileSheet,
+  type IntegrationProfileSheetSavedProfile,
+} from '@/components/integration-profile/integration-profile-sheet';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { EntityPicker } from '@/components/ui/entity-picker';
+import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Label } from '@/components/ui/label';
+import { Progress } from '@/components/ui/progress';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Sheet,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { getPhotoUrl } from '@/lib/get-photo-url';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  Ban,
+  CheckCircle2,
+  Clock,
+  Cog,
+  ExternalLink,
+  HardDriveUpload,
+  Inbox,
+  Loader2,
+  Pencil,
+  Plus,
+  RefreshCw,
+  Save,
+  Trash2,
+  Webhook,
+  XCircle,
+} from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+
+type UploadStatus =
+  | 'queued'
+  | 'uploading'
+  | 'cancelling'
+  | 'received'
+  | 'done'
+  | 'error'
+  | 'cancelled';
+
+type UploadItemRow = {
+  id: number;
+  sessionId: number;
+  uploadId: string;
+  fileName: string;
+  sizeBytes: number;
+  status: UploadStatus;
+  progressPercent: number;
+  errorMessage: string | null;
+  uploadedKey: string | null;
+  receivedAt: string | null;
+  updatedAt: string;
+  completedAt: string | null;
+  appName: string;
+  userId: number;
+  userPhotoId: number | null;
+  userName: string | null;
+  sessionStatus: string;
+  startedAt: string;
+  matchedCourseId: number | null;
+  matchedCourseTitle: string | null;
+  matchedCourseSlug: string | null;
+  matchedCourseLogoFileId: number | null;
+  matchedSessionId: number | null;
+  matchedSessionTitle: string | null;
+  matchedLessonId: number | null;
+  matchedLessonTitle: string | null;
+};
+
+type UploadListResponse = {
+  data: UploadItemRow[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage: number;
+};
+
+type Paginated<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage: number;
+  prev?: number | null;
+  next?: number | null;
+};
+
+type BulkUploadSettingsResponse = {
+  storageProfileId: number | null;
+  bucketName: string;
+  lambdaRoleArn: string;
+  sessionDurationSeconds: number;
+};
+
+type IntegrationProfileOption = {
+  id: number;
+  name: string;
+  slug: string;
+};
+
+type WebhookIntegrationItem = {
+  id: number;
+  slug: string;
+  name: string;
+  status: 'active' | 'inactive';
+  require_token: boolean;
+  public_url: string | null;
+  plainToken?: string | null;
+  updated_at?: string | null;
+};
+
+type BulkUploadInfrastructureResponse = {
+  outputs?: {
+    bucket_arn?: string;
+    bucket_name?: string;
+    lambda_arn?: string;
+    lambda_function_name?: string;
+  } | null;
+};
+
+type BulkUploadConfigureResponse = {
+  success: boolean;
+  storageProfileId: number;
+  bucketName: string;
+  region: string;
+  credentials: {
+    expiresAt: string | null;
+  };
+  infrastructure?: BulkUploadInfrastructureResponse;
+  webhook: WebhookIntegrationItem;
+};
+
+type BulkUploadRegenerateTokenResponse = {
+  success: boolean;
+  storageProfileId: number;
+  bucketName: string;
+  region: string;
+  infrastructure?: BulkUploadInfrastructureResponse;
+  webhook: WebhookIntegrationItem;
+};
+
+type BulkUploadCleanupStatus = 'done' | 'error' | 'cancelled';
+type BulkUploadCleanupTimeWindow =
+  | 'last_hour'
+  | 'last_day'
+  | 'last_week'
+  | 'all_time';
+
+type BulkUploadCleanupResponse = {
+  success: boolean;
+  deletedItems: number;
+  deletedSessions: number;
+  filtersApplied: {
+    statuses: BulkUploadCleanupStatus[];
+    timeWindow: BulkUploadCleanupTimeWindow;
+  };
+};
+
+const BULK_UPLOAD_STORAGE_PROFILE_SLUG = 'lms-bulk-upload-storage-profile-id';
+const BULK_UPLOAD_LAMBDA_ROLE_ARN_SLUG = 'lms-bulk-upload-lambda-role-arn';
+const BULK_UPLOAD_WEBHOOK_SLUG = 'lms-bulk-upload';
+
+const PAGE_SIZE_OPTIONS = [6, 12, 24, 48] as const;
+const CLEANUP_STATUS_OPTIONS: Array<{
+  value: BulkUploadCleanupStatus;
+  label: string;
+}> = [
+  { value: 'done', label: 'Concluidos' },
+  { value: 'error', label: 'Com falha' },
+  { value: 'cancelled', label: 'Cancelados' },
+];
+
+const CLEANUP_TIME_WINDOW_OPTIONS: Array<{
+  value: BulkUploadCleanupTimeWindow;
+  label: string;
+  description: string;
+}> = [
+  {
+    value: 'last_hour',
+    label: 'Ultima hora',
+    description: 'Remove itens atualizados na ultima hora.',
+  },
+  {
+    value: 'last_day',
+    label: 'Ultimo dia',
+    description: 'Remove itens atualizados nas ultimas 24 horas.',
+  },
+  {
+    value: 'last_week',
+    label: 'Ultima semana',
+    description: 'Remove itens atualizados nos ultimos 7 dias.',
+  },
+  {
+    value: 'all_time',
+    label: 'Todos de sempre',
+    description: 'Remove todo o historico conforme os status marcados.',
+  },
+];
+
+function formatBytes(bytes: number) {
+  if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';
+
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const exponent = Math.min(
+    Math.floor(Math.log(bytes) / Math.log(1024)),
+    units.length - 1
+  );
+  const value = bytes / 1024 ** exponent;
+
+  return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[exponent]}`;
+}
+
+function formatDate(value: string | null) {
+  if (!value) return '-';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '-';
+  return date.toLocaleString('pt-BR');
+}
+
+function getStatusMeta(status: UploadStatus) {
+  switch (status) {
+    case 'received':
+      return {
+        label: 'Arquivo recebido',
+        variant: 'default' as const,
+        icon: Inbox,
+        iconClass: 'text-green-600',
+        animated: false,
+        progressClass: 'bg-green-500',
+      };
+    case 'done':
+      return {
+        label: 'Concluido',
+        variant: 'default' as const,
+        icon: CheckCircle2,
+        iconClass: 'text-green-600',
+        animated: false,
+        progressClass: 'bg-green-500',
+      };
+    case 'uploading':
+      return {
+        label: 'Enviando',
+        variant: 'secondary' as const,
+        icon: Loader2,
+        iconClass: 'text-amber-500 animate-spin',
+        animated: true,
+        progressClass: 'bg-amber-500',
+      };
+    case 'queued':
+      return {
+        label: 'Na fila',
+        variant: 'outline' as const,
+        icon: Clock,
+        iconClass: 'text-blue-500 animate-pulse',
+        animated: true,
+        progressClass: 'bg-blue-400',
+      };
+    case 'cancelling':
+      return {
+        label: 'Cancelando',
+        variant: 'secondary' as const,
+        icon: Loader2,
+        iconClass: 'text-orange-500 animate-spin',
+        animated: true,
+        progressClass: 'bg-orange-400',
+      };
+    case 'cancelled':
+      return {
+        label: 'Cancelado',
+        variant: 'outline' as const,
+        icon: Ban,
+        iconClass: 'text-muted-foreground',
+        animated: false,
+        progressClass: 'bg-muted-foreground/40',
+      };
+    default:
+      return {
+        label: 'Erro',
+        variant: 'destructive' as const,
+        icon: XCircle,
+        iconClass: 'text-destructive animate-pulse',
+        animated: true,
+        progressClass: 'bg-destructive',
+      };
+  }
+}
+
+export default function LmsBulkUploadSessionsPage() {
+  const { request } = useApp();
+  const [page, setPage] = useState(1);
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [bucketName, setBucketName] = useState('');
+  const [lambdaRoleArn, setLambdaRoleArn] = useState('');
+  const [storageProfileId, setStorageProfileId] = useState<number | null>(null);
+  const [webhookPlainToken, setWebhookPlainToken] = useState<string | null>(
+    null
+  );
+  const [webhookPreview, setWebhookPreview] =
+    useState<WebhookIntegrationItem | null>(null);
+  const [isSavingSettings, setIsSavingSettings] = useState(false);
+  const [isRegeneratingToken, setIsRegeneratingToken] = useState(false);
+  const [lastSetupFeedback, setLastSetupFeedback] = useState<{
+    lambdaName: string;
+    configuredAt: string;
+  } | null>(null);
+  const [profileRefreshToken, setProfileRefreshToken] = useState(0);
+  const [isProfileSheetOpen, setIsProfileSheetOpen] = useState(false);
+  const [editingProfileId, setEditingProfileId] = useState<number | null>(null);
+  const [isCleanupDialogOpen, setIsCleanupDialogOpen] = useState(false);
+  const [cleanupStatuses, setCleanupStatuses] = useState<
+    Set<BulkUploadCleanupStatus>
+  >(new Set(['done']));
+  const [cleanupTimeWindow, setCleanupTimeWindow] =
+    useState<BulkUploadCleanupTimeWindow>('last_day');
+  const [isCleaningHistory, setIsCleaningHistory] = useState(false);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:global:pageSize',
+    defaultValue: PAGE_SIZE_OPTIONS[1],
+    allowedValues: PAGE_SIZE_OPTIONS,
+  });
+
+  const {
+    data: settingsResult,
+    isLoading: settingsLoading,
+    refetch: refetchSettings,
+  } = useQuery<BulkUploadSettingsResponse>({
+    queryKey: ['lms-bulk-upload-settings', settingsOpen],
+    enabled: settingsOpen,
+    queryFn: async () => {
+      const response = await request<BulkUploadSettingsResponse>({
+        url: '/lms/bulk-upload/settings',
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
+
+  const {
+    data: profilesResult,
+    isLoading: profilesLoading,
+    refetch: refetchProfiles,
+  } = useQuery<Paginated<IntegrationProfileOption>>({
+    queryKey: ['integration-storage-profiles', profileRefreshToken],
+    enabled: settingsOpen,
+    queryFn: async () => {
+      const response = await request<Paginated<IntegrationProfileOption>>({
+        url: '/integration-profile?typeSlug=storage&pageSize=100',
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
+
+  const { data: webhooksResult, refetch: refetchWebhooks } = useQuery<
+    Paginated<WebhookIntegrationItem>
+  >({
+    queryKey: ['lms-bulk-upload-webhook', settingsOpen],
+    enabled: settingsOpen,
+    queryFn: async () => {
+      const response = await request<Paginated<WebhookIntegrationItem>>({
+        url: `/webhook-integration?page=1&pageSize=100&search=${BULK_UPLOAD_WEBHOOK_SLUG}`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
+
+  const {
+    data,
+    isLoading,
+    refetch: refetchSessions,
+  } = useQuery<UploadListResponse>({
+    queryKey: [
+      'lms-bulk-upload-sessions',
+      page,
+      pageSize,
+      search,
+      statusFilter,
+    ],
+    queryFn: async () => {
+      const response = await request<UploadListResponse>({
+        url: '/lms/bulk-upload/sessions',
+        method: 'GET',
+        params: {
+          page,
+          pageSize,
+          search: search.trim() || undefined,
+          status: statusFilter === 'all' ? undefined : statusFilter,
+        },
+      });
+      return response.data;
+    },
+  });
+
+  const rows = useMemo(() => data?.data ?? [], [data?.data]);
+  const total = data?.total ?? 0;
+  const stats = useMemo(
+    () => ({
+      sending: rows.filter((row) => row.status === 'uploading').length,
+      done: rows.filter((row) => row.status === 'done').length,
+      error: rows.filter((row) => row.status === 'error').length,
+    }),
+    [rows]
+  );
+
+  const kpiItems = useMemo(
+    () => [
+      {
+        key: 'sending',
+        title: 'Enviando',
+        value: isLoading ? '-' : stats.sending,
+        icon: Loader2,
+        accentClassName: 'from-amber-500/20 via-amber-500/10 to-transparent',
+        iconContainerClassName: 'bg-amber-500/10 text-amber-700',
+        layout: 'compact' as const,
+      },
+      {
+        key: 'done',
+        title: 'Concluidos',
+        value: isLoading ? '-' : stats.done,
+        icon: CheckCircle2,
+        accentClassName: 'from-green-500/20 via-green-500/10 to-transparent',
+        iconContainerClassName: 'bg-green-500/10 text-green-700',
+        layout: 'compact' as const,
+      },
+      {
+        key: 'error',
+        title: 'Erros',
+        value: isLoading ? '-' : stats.error,
+        icon: XCircle,
+        accentClassName: 'from-red-500/20 via-red-500/10 to-transparent',
+        iconContainerClassName: 'bg-red-500/10 text-red-700',
+        layout: 'compact' as const,
+      },
+    ],
+    [isLoading, stats]
+  );
+
+  const storageProfileOptions = useMemo(
+    () => profilesResult?.data ?? [],
+    [profilesResult?.data]
+  );
+
+  const selectedStorageProfile = useMemo(
+    () =>
+      storageProfileOptions.find(
+        (profile) => profile.id === storageProfileId
+      ) ?? null,
+    [storageProfileId, storageProfileOptions]
+  );
+
+  const webhookIntegration = useMemo(
+    () =>
+      (webhooksResult?.data ?? []).find(
+        (item) =>
+          item.slug === BULK_UPLOAD_WEBHOOK_SLUG ||
+          item.slug.startsWith(`${BULK_UPLOAD_WEBHOOK_SLUG}-`)
+      ) ??
+      webhookPreview ??
+      null,
+    [webhookPreview, webhooksResult?.data]
+  );
+
+  const hasBaseConfig = Boolean(storageProfileId && lambdaRoleArn.trim());
+  const isWebhookActive = Boolean(
+    webhookIntegration?.status === 'active' && webhookIntegration?.public_url
+  );
+  const isFullyConfigured =
+    Boolean(lastSetupFeedback) || (hasBaseConfig && isWebhookActive);
+
+  const currentStatusLabel =
+    isSavingSettings || isRegeneratingToken
+      ? 'Validando e sincronizando...'
+      : isFullyConfigured
+        ? 'Configurado e funcionando'
+        : hasBaseConfig
+          ? 'Pronto para sincronizar'
+          : 'Configuração incompleta';
+
+  const currentStatusDescription =
+    isSavingSettings || isRegeneratingToken
+      ? 'Aguarde a conclusão do provisionamento da integração.'
+      : isFullyConfigured
+        ? 'Bucket, webhook e Lambda estão ativos e alinhados.'
+        : hasBaseConfig
+          ? 'Falta validar/sincronizar para concluir a operação.'
+          : 'Selecione o perfil de integração para iniciar a configuração.';
+
+  useEffect(() => {
+    setBucketName(String(settingsResult?.bucketName ?? '').trim());
+    setLambdaRoleArn(String(settingsResult?.lambdaRoleArn ?? '').trim());
+    const parsedProfileId = Number(settingsResult?.storageProfileId ?? 0);
+    setStorageProfileId(
+      Number.isFinite(parsedProfileId) && parsedProfileId > 0
+        ? parsedProfileId
+        : null
+    );
+  }, [
+    settingsResult?.bucketName,
+    settingsResult?.lambdaRoleArn,
+    settingsResult?.storageProfileId,
+  ]);
+
+  const saveBulkUploadSettings = async () => {
+    if (!storageProfileId || !lambdaRoleArn.trim()) {
+      return;
+    }
+
+    try {
+      setIsSavingSettings(true);
+      const response = await request<BulkUploadConfigureResponse>({
+        url: '/lms/bulk-upload/verify',
+        method: 'POST',
+        data: {
+          configure: true,
+          storageProfileId,
+          lambdaRoleArn: lambdaRoleArn.trim(),
+        },
+      });
+
+      setWebhookPreview(response.data.webhook ?? null);
+      setWebhookPlainToken(response.data.webhook?.plainToken ?? null);
+
+      const lambdaName =
+        response.data.infrastructure?.outputs?.lambda_function_name?.trim() ||
+        'Lambda não identificada';
+
+      const configuredAtRaw =
+        response.data.webhook?.updated_at ?? new Date().toISOString();
+      const configuredAt = formatDate(configuredAtRaw);
+
+      setLastSetupFeedback({
+        lambdaName,
+        configuredAt,
+      });
+
+      toast.success('Tudo pronto!', {
+        description: `Lambda: ${lambdaName} • Configurado em: ${configuredAt}`,
+      });
+      await Promise.all([
+        refetchSettings(),
+        refetchProfiles(),
+        refetchWebhooks(),
+      ]);
+    } catch {
+      toast.error(
+        'Falha ao validar bucket/credenciais temporárias ou salvar a configuração.'
+      );
+    } finally {
+      setIsSavingSettings(false);
+    }
+  };
+
+  const regenerateWebhookToken = async () => {
+    if (!webhookIntegration) return;
+    try {
+      setIsRegeneratingToken(true);
+      const response = await request<BulkUploadRegenerateTokenResponse>({
+        url: '/lms/bulk-upload/webhook/regenerate-token',
+        method: 'POST',
+      });
+
+      setWebhookPreview(response.data.webhook ?? null);
+      setWebhookPlainToken(response.data.webhook?.plainToken ?? null);
+
+      const lambdaName =
+        response.data.infrastructure?.outputs?.lambda_function_name?.trim() ||
+        'Lambda não identificada';
+
+      const configuredAtRaw =
+        response.data.webhook?.updated_at ?? new Date().toISOString();
+      const configuredAt = formatDate(configuredAtRaw);
+
+      setLastSetupFeedback({
+        lambdaName,
+        configuredAt,
+      });
+
+      toast.success('Token regenerado e infraestrutura sincronizada.', {
+        description: `Lambda: ${lambdaName} • Configurado em: ${configuredAt}`,
+      });
+      await refetchWebhooks();
+    } catch {
+      toast.error('Não foi possível regenerar o token e sincronizar a Lambda.');
+    } finally {
+      setIsRegeneratingToken(false);
+    }
+  };
+
+  const openCreateProfileSheet = () => {
+    setEditingProfileId(null);
+    setIsProfileSheetOpen(true);
+  };
+
+  const openEditProfileSheet = () => {
+    if (!selectedStorageProfile) {
+      return;
+    }
+
+    setEditingProfileId(selectedStorageProfile.id);
+    setIsProfileSheetOpen(true);
+  };
+
+  const handleProfileSaved = (profile: IntegrationProfileSheetSavedProfile) => {
+    setStorageProfileId(profile.id);
+    setProfileRefreshToken((current) => current + 1);
+    refetchProfiles();
+  };
+
+  const toggleCleanupStatus = (status: BulkUploadCleanupStatus) => {
+    setCleanupStatuses((current) => {
+      const next = new Set(current);
+      if (next.has(status)) {
+        next.delete(status);
+      } else {
+        next.add(status);
+      }
+      return next;
+    });
+  };
+
+  const cleanupStatusSelection = useMemo(
+    () => Array.from(cleanupStatuses),
+    [cleanupStatuses]
+  );
+
+  const runCleanupHistory = async () => {
+    if (cleanupStatusSelection.length === 0) {
+      toast.error('Selecione ao menos um status para limpar.');
+      return;
+    }
+
+    try {
+      setIsCleaningHistory(true);
+      const response = await request<BulkUploadCleanupResponse>({
+        url: '/lms/bulk-upload/sessions/cleanup',
+        method: 'POST',
+        data: {
+          statuses: cleanupStatusSelection,
+          timeWindow: cleanupTimeWindow,
+        },
+      });
+
+      const deletedItems = Number(response.data?.deletedItems ?? 0);
+      const deletedSessions = Number(response.data?.deletedSessions ?? 0);
+
+      toast.success('Historico limpo com sucesso.', {
+        description: `${deletedItems} upload(s) e ${deletedSessions} sessao(oes) removidos.`,
+      });
+
+      setIsCleanupDialogOpen(false);
+      await refetchSessions();
+    } catch {
+      toast.error('Nao foi possivel limpar o historico de uploads.');
+    } finally {
+      setIsCleaningHistory(false);
+    }
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title="Uploads Desktop"
+        description="Monitore arquivos enviados via Hedhog Desktop com status, progresso e usuario responsavel."
+        breadcrumbs={[
+          { label: 'Inicio', href: '/' },
+          { label: 'LMS', href: '/lms' },
+          { label: 'Uploads Desktop' },
+        ]}
+        actions={[
+          {
+            label: 'Limpar historico',
+            ariaLabel: 'Limpar historico',
+            iconOnly: true,
+            variant: 'outline',
+            icon: <Trash2 className="h-4 w-4" />,
+            onClick: () => setIsCleanupDialogOpen(true),
+          },
+          {
+            label: 'Configurações',
+            ariaLabel: 'Configurações',
+            iconOnly: true,
+            variant: 'outline',
+            icon: <Cog className="h-4 w-4" />,
+            onClick: () => setSettingsOpen(true),
+          },
+        ]}
+      />
+
+      <Sheet
+        open={settingsOpen}
+        onOpenChange={(open) => {
+          setSettingsOpen(open);
+          if (!open) {
+            setWebhookPlainToken(null);
+          }
+        }}
+      >
+        <ResizableSheetContent
+          sheetId="lms-bulk-upload-settings-sheet"
+          defaultWidth={640}
+          minWidth={500}
+          className="gap-0 overflow-hidden bg-[radial-gradient(circle_at_top,_hsl(var(--primary)/0.09),_transparent_38%),linear-gradient(180deg,_hsl(var(--background)),_hsl(var(--muted)/0.18))]"
+        >
+          <SheetHeader className="border-b border-border/60 bg-background/85 px-6 pb-5 pt-6 backdrop-blur">
+            <div className="flex items-start justify-between gap-4">
+              <div className="space-y-2">
+                <div className="inline-flex items-center gap-2 rounded-full border border-primary/15 bg-primary/5 px-3 py-1 text-[11px] font-medium uppercase tracking-[0.18em] text-primary/80">
+                  <Cog className="h-3.5 w-3.5" />
+                  Bulk Upload Control
+                </div>
+                <SheetTitle className="text-lg font-semibold tracking-tight">
+                  Configurações do upload em massa
+                </SheetTitle>
+                <SheetDescription className="max-w-xl text-sm text-muted-foreground">
+                  Configure bucket, credenciais temporárias e webhook para o
+                  fluxo de upload em massa com provisionamento automático da
+                  integração.
+                </SheetDescription>
+              </div>
+
+              <div className="hidden rounded-2xl border border-border/60 bg-background/80 px-4 py-3 shadow-sm md:block">
+                <p className="text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                  Estado atual
+                </p>
+                <p className="mt-1 text-sm font-semibold text-foreground">
+                  {currentStatusLabel}
+                </p>
+                <p className="mt-1 max-w-[15rem] text-xs text-muted-foreground">
+                  {currentStatusDescription}
+                </p>
+              </div>
+            </div>
+          </SheetHeader>
+
+          <ScrollArea className="flex-1 overflow-hidden px-6">
+            <div className="space-y-6 py-6">
+              <section className="overflow-hidden rounded-2xl border border-border/60 bg-background/90 shadow-sm">
+                <div className="border-b border-border/50 bg-gradient-to-r from-primary/8 via-primary/4 to-transparent px-5 py-4">
+                  <h3 className="text-sm font-semibold tracking-tight">
+                    Instruções rápidas
+                  </h3>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    A configuração abaixo valida o acesso ao bucket e prepara a
+                    integração do desktop automaticamente.
+                  </p>
+                </div>
+                <ul className="space-y-2 px-5 py-4 text-xs text-muted-foreground">
+                  <li>
+                    1. Informe abaixo a role de execução da Lambda em{' '}
+                    <span className="font-mono">
+                      {BULK_UPLOAD_LAMBDA_ROLE_ARN_SLUG}
+                    </span>{' '}
+                    no grupo LMS.
+                  </li>
+                  <li>
+                    2. Selecione um perfil de integração do tipo storage (AWS)
+                    com bucket em{' '}
+                    <span className="font-mono">config.bucket</span>.
+                  </li>
+                  <li>
+                    3. Salve a configuração para criar/atualizar Lambda,
+                    permissões do S3 e webhook automaticamente.
+                  </li>
+                  <li>
+                    4. Copie URL + token do webhook para o sistema externo.
+                  </li>
+                </ul>
+              </section>
+
+              <section className="space-y-4 rounded-2xl border border-border/60 bg-background/90 p-5 shadow-sm">
+                <div className="space-y-1">
+                  <h3 className="text-sm font-semibold tracking-tight">
+                    Fonte dos arquivos
+                  </h3>
+                  <p className="text-xs text-muted-foreground">
+                    Escolha o bucket e o perfil S3 que serão usados para
+                    autenticar uploads e sincronizar a Lambda externa.
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <div className="rounded-xl border border-amber-300/40 bg-amber-500/10 p-3">
+                    <p className="text-xs font-medium text-amber-800 dark:text-amber-300">
+                      Role de execução da Lambda
+                    </p>
+                    <p className="mt-1 text-xs text-amber-800/90 dark:text-amber-300/90">
+                      Essa role será usada para criar a Lambda automaticamente
+                      quando necessário. Informe o ARN completo da role em{' '}
+                      <span className="font-mono">
+                        {BULK_UPLOAD_LAMBDA_ROLE_ARN_SLUG}
+                      </span>{' '}
+                      antes de salvar a configuração.
+                    </p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="bulk-upload-lambda-role-arn">
+                      ARN da role da Lambda
+                    </Label>
+                    <Input
+                      id="bulk-upload-lambda-role-arn"
+                      placeholder="arn:aws:iam::123456789012:role/lms-bulk-upload-lambda-role"
+                      value={lambdaRoleArn}
+                      onChange={(event) => setLambdaRoleArn(event.target.value)}
+                      disabled={settingsLoading || isSavingSettings}
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      Setting: {BULK_UPLOAD_LAMBDA_ROLE_ARN_SLUG}
+                    </p>
+                  </div>
+
+                  <Label>Perfil de integração de storage</Label>
+                  <div className="rounded-2xl border border-border/60 bg-muted/20 p-3">
+                    <div className="flex items-center gap-2">
+                      <EntityPicker<IntegrationProfileOption>
+                        className="flex-1"
+                        buttonClassName="border-border/60 bg-background shadow-sm"
+                        placeholder="Selecione um perfil de integração"
+                        options={storageProfileOptions}
+                        value={storageProfileId}
+                        valueType="number"
+                        getOptionValue={(option) => option.id}
+                        getOptionLabel={(option) => option.name}
+                        getOptionDescription={(option) => option.slug}
+                        onChange={(value) =>
+                          setStorageProfileId(
+                            value === null ? null : Number(value)
+                          )
+                        }
+                        clearable
+                        searchable
+                        showCreateButton={false}
+                        loadingLabel={
+                          profilesLoading ? 'Carregando...' : undefined
+                        }
+                      />
+
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="icon"
+                              className="shrink-0 border-border/60 bg-background shadow-sm"
+                              onClick={openCreateProfileSheet}
+                              aria-label="Criar perfil"
+                            >
+                              <Plus className="h-4 w-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>Criar perfil</TooltipContent>
+                        </Tooltip>
+
+                        {selectedStorageProfile ? (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="icon"
+                                className="shrink-0 border-border/60 bg-background shadow-sm"
+                                onClick={openEditProfileSheet}
+                                aria-label="Editar perfil"
+                              >
+                                <Pencil className="h-4 w-4" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>Editar perfil</TooltipContent>
+                          </Tooltip>
+                        ) : null}
+                      </TooltipProvider>
+                    </div>
+
+                    <p className="mt-3 text-xs text-muted-foreground">
+                      O seletor já permite limpar a seleção atual. Use os
+                      atalhos laterais apenas para criar ou editar o perfil
+                      ativo.
+                    </p>
+                  </div>
+
+                  <p className="text-xs text-muted-foreground">
+                    Setting: {BULK_UPLOAD_STORAGE_PROFILE_SLUG}
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <Label>Bucket S3 (do perfil selecionado)</Label>
+                  <Input
+                    readOnly
+                    value={
+                      bucketName ||
+                      'Selecione e salve um perfil para carregar o bucket'
+                    }
+                    disabled={settingsLoading}
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    O bucket vem do campo{' '}
+                    <span className="font-mono">config.bucket</span> do perfil
+                    de integração.
+                  </p>
+                </div>
+
+                <div className="rounded-2xl border border-dashed border-border/70 bg-muted/15 p-4">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="space-y-1">
+                      <p className="text-sm font-medium">Sincronização final</p>
+                      <p className="text-xs text-muted-foreground">
+                        O salvamento valida o bucket, testa as credenciais
+                        temporárias e atualiza o webhook usado pela Lambda.
+                      </p>
+                    </div>
+
+                    {storageProfileId && lambdaRoleArn.trim() ? (
+                      <Button
+                        type="button"
+                        onClick={saveBulkUploadSettings}
+                        disabled={isSavingSettings}
+                        className="gap-2 shadow-sm"
+                      >
+                        {isSavingSettings ? (
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                        ) : (
+                          <Save className="h-4 w-4" />
+                        )}
+                        Salvar configuração
+                      </Button>
+                    ) : (
+                      <p className="text-xs text-muted-foreground">
+                        Informe a role ARN e selecione um perfil para habilitar
+                        o salvamento.
+                      </p>
+                    )}
+                  </div>
+
+                  {lastSetupFeedback ? (
+                    <div className="mt-3 rounded-xl border border-emerald-400/30 bg-emerald-500/10 p-3">
+                      <p className="text-sm font-medium text-emerald-700 dark:text-emerald-300">
+                        Tudo pronto
+                      </p>
+                      <p className="mt-1 text-xs text-emerald-700/90 dark:text-emerald-300/90">
+                        Função Lambda: {lastSetupFeedback.lambdaName}
+                      </p>
+                      <p className="text-xs text-emerald-700/90 dark:text-emerald-300/90">
+                        Configurado em: {lastSetupFeedback.configuredAt}
+                      </p>
+                    </div>
+                  ) : null}
+                </div>
+              </section>
+
+              <section className="space-y-4">
+                <div className="flex items-center justify-between gap-2">
+                  <h3 className="flex items-center gap-2 text-sm font-semibold">
+                    <Webhook className="h-4 w-4" />
+                    Webhook de integração
+                  </h3>
+
+                  {webhookIntegration ? (
+                    <Badge
+                      variant={
+                        webhookIntegration.status === 'active'
+                          ? 'default'
+                          : 'outline'
+                      }
+                    >
+                      {webhookIntegration.status === 'active'
+                        ? 'Ativo'
+                        : 'Inativo'}
+                    </Badge>
+                  ) : null}
+                </div>
+
+                {!webhookIntegration ? (
+                  <div className="space-y-3 rounded-lg border bg-muted/20 p-4">
+                    <p className="text-sm text-muted-foreground">
+                      O webhook será criado automaticamente após salvar uma
+                      configuração válida (bucket + perfil), com URL e segredo
+                      exibidos abaixo.
+                    </p>
+                  </div>
+                ) : (
+                  <div className="space-y-3 rounded-lg border bg-muted/20 p-4">
+                    <div className="space-y-1">
+                      <Label>URL do webhook</Label>
+                      <div className="flex items-center gap-2">
+                        <Input
+                          readOnly
+                          value={webhookIntegration.public_url ?? ''}
+                        />
+                        <CopyButton
+                          value={webhookIntegration.public_url ?? ''}
+                        />
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="icon"
+                                onClick={() =>
+                                  window.open(
+                                    '/core/integrations-webhooks',
+                                    '_blank'
+                                  )
+                                }
+                                aria-label="Abrir webhooks"
+                              >
+                                <ExternalLink className="h-4 w-4" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              Abrir tela de webhooks
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </div>
+                    </div>
+
+                    <div className="space-y-1">
+                      <Label>Token do webhook</Label>
+                      <div className="flex items-center gap-2">
+                        <Input
+                          readOnly
+                          value={
+                            webhookPlainToken ??
+                            'Token oculto. Regenerar para visualizar novo token.'
+                          }
+                        />
+                        {webhookPlainToken ? (
+                          <CopyButton value={webhookPlainToken} />
+                        ) : null}
+                        <Button
+                          type="button"
+                          variant="outline"
+                          className="gap-2"
+                          onClick={regenerateWebhookToken}
+                          disabled={isRegeneratingToken}
+                        >
+                          {isRegeneratingToken ? (
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                          ) : (
+                            <RefreshCw className="h-4 w-4" />
+                          )}
+                          Regenerar token
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </section>
+            </div>
+          </ScrollArea>
+        </ResizableSheetContent>
+      </Sheet>
+
+      <AlertDialog
+        open={isCleanupDialogOpen}
+        onOpenChange={(open) => {
+          if (!isCleaningHistory) {
+            setIsCleanupDialogOpen(open);
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Limpar historico de uploads</AlertDialogTitle>
+            <AlertDialogDescription>
+              Selecione quais status e intervalo de tempo devem ser removidos.
+              Esta acao remove apenas registros do banco e nao afeta arquivos no
+              S3.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+
+          <div className="space-y-4 py-2">
+            <div className="space-y-2">
+              <Label>Status para limpar</Label>
+              <div className="space-y-2 rounded-lg border border-border/70 bg-muted/20 p-3">
+                {CLEANUP_STATUS_OPTIONS.map((option) => (
+                  <div key={option.value} className="flex items-center gap-2">
+                    <Checkbox
+                      id={`cleanup-status-${option.value}`}
+                      checked={cleanupStatuses.has(option.value)}
+                      onCheckedChange={() => toggleCleanupStatus(option.value)}
+                      disabled={isCleaningHistory}
+                    />
+                    <Label
+                      htmlFor={`cleanup-status-${option.value}`}
+                      className="cursor-pointer text-sm font-normal"
+                    >
+                      {option.label}
+                    </Label>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Periodo da limpeza</Label>
+              <div className="grid gap-2 sm:grid-cols-2">
+                {CLEANUP_TIME_WINDOW_OPTIONS.map((option) => (
+                  <button
+                    key={option.value}
+                    type="button"
+                    onClick={() => setCleanupTimeWindow(option.value)}
+                    className={cn(
+                      'rounded-lg border p-3 text-left transition-colors',
+                      cleanupTimeWindow === option.value
+                        ? 'border-primary bg-primary/10'
+                        : 'border-border/70 bg-background hover:border-primary/40'
+                    )}
+                    disabled={isCleaningHistory}
+                  >
+                    <p className="text-sm font-medium">{option.label}</p>
+                    <p className="mt-1 text-xs text-muted-foreground">
+                      {option.description}
+                    </p>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-amber-300/50 bg-amber-500/10 p-3 text-xs text-amber-900 dark:text-amber-200">
+              Esta operacao e irreversivel e pode remover muitos registros de
+              uma vez.
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2">
+            <AlertDialogCancel disabled={isCleaningHistory}>
+              Cancelar
+            </AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-red-600 text-white hover:bg-red-700"
+              disabled={
+                isCleaningHistory || cleanupStatusSelection.length === 0
+              }
+              onClick={(event) => {
+                event.preventDefault();
+                runCleanupHistory();
+              }}
+            >
+              {isCleaningHistory ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <Trash2 className="mr-2 h-4 w-4" />
+              )}
+              Limpar historico
+            </AlertDialogAction>
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <IntegrationProfileSheet
+        open={isProfileSheetOpen}
+        onOpenChange={setIsProfileSheetOpen}
+        profileId={editingProfileId}
+        lockedTypeSlug="storage"
+        lockedProviderSlug="s3"
+        sheetId="lms-bulk-upload-storage-profile-editor"
+        defaultWidth={760}
+        onSaved={handleProfileSaved}
+      />
+
+      <KpiCardsGrid items={kpiItems} columns={3} />
+
+      <div className="flex items-center justify-between gap-3">
+        <SearchBar
+          searchQuery={searchInput}
+          onSearchChange={setSearchInput}
+          onSearch={() => {
+            setSearch(searchInput);
+            setPage(1);
+          }}
+          placeholder="Buscar por arquivo, app ou usuario"
+          controls={[
+            {
+              id: 'status-filter',
+              type: 'select',
+              value: statusFilter,
+              onChange: (value) => {
+                setStatusFilter(value);
+                setPage(1);
+              },
+              options: [
+                { value: 'all', label: 'Todos os status' },
+                { value: 'queued', label: 'Na fila' },
+                { value: 'uploading', label: 'Enviando' },
+                { value: 'cancelling', label: 'Cancelando' },
+                { value: 'received', label: 'Arquivo recebido' },
+                { value: 'done', label: 'Concluido' },
+                { value: 'cancelled', label: 'Cancelado' },
+                { value: 'error', label: 'Erro' },
+              ],
+            },
+          ]}
+        />
+      </div>
+
+      <div className="overflow-hidden rounded-xl border border-border bg-card">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Arquivo</TableHead>
+              <TableHead>Tamanho</TableHead>
+              <TableHead>Usuario</TableHead>
+              <TableHead>Aula vinculada</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="w-40">Progresso</TableHead>
+              <TableHead>Atualizado em</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              Array.from({ length: 8 }).map((_, index) => (
+                <TableRow key={`skeleton-${index}`}>
+                  <TableCell colSpan={7}>
+                    <Skeleton className="h-6 w-full" />
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : rows.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={7} className="py-8">
+                  <EmptyState
+                    icon={<HardDriveUpload className="h-5 w-5" />}
+                    title="Nenhum upload encontrado"
+                    description="Inicie uploads no Hedhog Desktop para visualizar o historico e andamento aqui."
+                  />
+                </TableCell>
+              </TableRow>
+            ) : (
+              rows.map((row) => {
+                const meta = getStatusMeta(row.status);
+                const StatusIcon = meta.icon;
+                const pct = Math.max(0, Math.min(100, row.progressPercent));
+
+                return (
+                  <TableRow key={row.id} className="cursor-pointer">
+                    <TableCell className="max-w-80">
+                      <div className="flex items-start gap-2.5">
+                        <span className="mt-0.5 shrink-0">
+                          <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>
+                          <p className="truncate text-xs text-muted-foreground">
+                            Sessao #{row.sessionId} &middot; {row.appName}
+                          </p>
+                          {row.errorMessage ? (
+                            <p className="truncate text-xs text-destructive">
+                              {row.errorMessage}
+                            </p>
+                          ) : null}
+                        </div>
+                      </div>
+                    </TableCell>
+
+                    <TableCell className="tabular-nums text-sm">
+                      {formatBytes(row.sizeBytes)}
+                    </TableCell>
+
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        <Avatar className="h-7 w-7 shrink-0">
+                          <AvatarImage
+                            src={getPhotoUrl(row.userPhotoId)}
+                            alt={row.userName ?? ''}
+                          />
+                          <AvatarFallback className="bg-muted text-[10px] font-medium">
+                            {row.userName
+                              ? row.userName
+                                  .split(' ')
+                                  .slice(0, 2)
+                                  .map((part) => part[0])
+                                  .join('')
+                                  .toUpperCase()
+                              : 'U'}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className="min-w-0">
+                          <p className="truncate text-sm">
+                            {row.userName || 'Usuario nao identificado'}
+                          </p>
+                        </div>
+                      </div>
+                    </TableCell>
+
+                    <TableCell className="max-w-[22rem]">
+                      {row.matchedCourseId && row.matchedLessonId ? (
+                        <button
+                          type="button"
+                          className="flex w-full items-center gap-2 text-left"
+                          onClick={() =>
+                            window.open(
+                              `/lms/courses/${row.matchedCourseId}`,
+                              '_blank',
+                              'noopener,noreferrer'
+                            )
+                          }
+                        >
+                          <Avatar className="h-7 w-7 shrink-0 rounded-md">
+                            <AvatarImage
+                              src={getPhotoUrl(row.matchedCourseLogoFileId)}
+                              alt={row.matchedCourseTitle ?? ''}
+                            />
+                            <AvatarFallback className="rounded-md bg-muted text-[10px] font-medium">
+                              {(row.matchedCourseTitle ?? 'Curso')
+                                .split(' ')
+                                .slice(0, 2)
+                                .map((part) => part[0])
+                                .join('')
+                                .toUpperCase()}
+                            </AvatarFallback>
+                          </Avatar>
+                          <div className="min-w-0 space-y-0.5">
+                            <p className="truncate text-sm font-medium text-primary underline-offset-4 hover:underline">
+                              {row.matchedLessonTitle ??
+                                `Aula #${row.matchedLessonId}`}
+                            </p>
+                            <p className="truncate text-xs text-muted-foreground">
+                              {row.matchedSessionTitle
+                                ? `Sessão ${row.matchedSessionTitle}`
+                                : `Sessão #${row.matchedSessionId ?? '-'}`}{' '}
+                              ·{' '}
+                              {row.matchedCourseTitle ??
+                                row.matchedCourseSlug ??
+                                'Curso não identificado'}
+                            </p>
+                          </div>
+                        </button>
+                      ) : (
+                        <span className="text-sm text-muted-foreground">-</span>
+                      )}
+                    </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>
+                    </TableCell>
+
+                    <TableCell>
+                      <div className="space-y-1">
+                        <div className="flex items-center justify-between text-xs text-muted-foreground">
+                          <span
+                            className={cn(
+                              'tabular-nums font-medium',
+                              meta.animated && 'text-foreground'
+                            )}
+                          >
+                            {pct}%
+                          </span>
+                        </div>
+                        <Progress
+                          value={pct}
+                          className={cn(
+                            'h-1.5',
+                            meta.animated &&
+                              '[&>[data-slot=progress-indicator]]:animate-pulse'
+                          )}
+                        />
+                      </div>
+                    </TableCell>
+
+                    <TableCell>
+                      <div className="space-y-0.5">
+                        <p className="text-sm">{formatDate(row.updatedAt)}</p>
+                        <p className="text-xs text-muted-foreground">
+                          Finalizado: {formatDate(row.completedAt)}
+                        </p>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={total}
+        onPageChange={setPage}
+        onPageSizeChange={(nextPageSize) => {
+          setPageSize(nextPageSize);
+          setPage(1);
+        }}
+        pageSizeOptions={PAGE_SIZE_OPTIONS}
+      />
+    </Page>
+  );
+}