@etus/ui 0.1.1 → 0.1.2

package/src/components/workflow/ReportGenerator/ReportGenerator.tsx

@@ -1,889 +0,0 @@
-import type {
-  ColumnDefinition,
-  ExportFormat,
-  ReportConfig,
-  ReportGeneratorProps,
-  ReportGeneratorState,
-  ReportTemplate,
-  ScheduleConfig,
-} from "./ReportGenerator.types"
-import type { KeyboardEvent } from "react"
-
-import {
-  AlertCircle,
-  ArrowLeft,
-  ArrowRight,
-  Calendar,
-  Check,
-  Clock,
-  Download,
-  Eye,
-  FileJson,
-  FileSpreadsheet,
-  FileText,
-  Filter as FilterIcon,
-  Loader2,
-  Printer,
-  Settings2,
-  Table2,
-} from "lucide-react"
-import { useCallback, useId, useMemo, useState } from "react"
-
-import { cn } from "../../../lib/utils"
-import { Checkbox } from "../../forms/Checkbox"
-import { Button } from "../../primitives/Button"
-import { Label } from "../../primitives/Label"
-import {
-  configSectionVariants,
-  errorStateVariants,
-  exportButtonGroupVariants,
-  formActionsVariants,
-  loadingStateVariants,
-  previewContainerVariants,
-  previewContentVariants,
-  previewHeaderVariants,
-  reportGeneratorVariants,
-  stepBadgeVariants,
-  stepIndicatorVariants,
-  stepItemVariants,
-  templateCardVariants,
-  templateGridVariants,
-} from "./ReportGenerator.variants"
-
-/**
- * Step definitions
- */
-const STEPS = [
-  { label: "Selecionar Template", description: "Escolha o tipo de relatório" },
-  { label: "Configurar", description: "Defina filtros e colunas" },
-  { label: "Visualizar", description: "Prévia do relatório" },
-  { label: "Exportar", description: "Baixe o relatório" },
-] as const
-
-/**
- * Export format labels and icons
- */
-const EXPORT_FORMAT_INFO: Record<
-  ExportFormat,
-  { icon: React.ComponentType<{ className?: string }>; label: string; }
-> = {
-  pdf: { label: "PDF", icon: FileText },
-  xlsx: { label: "Excel", icon: FileSpreadsheet },
-  csv: { label: "CSV", icon: Table2 },
-  json: { label: "JSON", icon: FileJson },
-  print: { label: "Imprimir", icon: Printer },
-}
-
-/**
- * StepIndicator displays the current progress through the wizard
- */
-function StepIndicator({
-  currentStep,
-  completedSteps,
-  onStepClick,
-}: {
-  completedSteps: number[]
-  currentStep: number
-  onStepClick?: (step: number) => void
-}) {
-  return (
-    <div
-      aria-label="Etapas do gerador de relatórios"
-      className={stepIndicatorVariants()}
-      role="navigation"
-    >
-      {STEPS.map((step, index) => {
-        const isComplete = completedSteps.includes(index)
-        const isActive = index === currentStep
-        const isClickable = onStepClick && (isComplete || index < currentStep)
-
-        const handleClick = () => {
-          if (isClickable) {
-            onStepClick(index)
-          }
-        }
-
-        const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-          if (isClickable && (e.key === "Enter" || e.key === " ")) {
-            e.preventDefault()
-            onStepClick(index)
-          }
-        }
-
-        return (
-          <div
-            key={step.label}
-            className={cn(
-              stepItemVariants({
-                state: isComplete ? "complete" : isActive ? "active" : "pending",
-                clickable: isClickable,
-              }),
-              index > 0 && "flex-1"
-            )}
-            aria-current={isActive ? "step" : undefined}
-            role={isClickable ? "button" : undefined}
-            tabIndex={isClickable ? 0 : undefined}
-            onClick={handleClick}
-            onKeyDown={handleKeyDown}
-          >
-            {index > 0 && (
-              <div
-                className={cn(
-                  "h-px flex-1 mr-2",
-                  isComplete || isActive ? "bg-primary" : "bg-border"
-                )}
-              />
-            )}
-            <div
-              className={stepBadgeVariants({
-                state: isComplete ? "complete" : isActive ? "active" : "pending",
-              })}
-            >
-              {isComplete ? <Check className="h-4 w-4" /> : index + 1}
-            </div>
-            <div className="hidden sm:block">
-              <div className="text-sm font-medium">{step.label}</div>
-              <div className="text-xs text-muted-foreground">
-                {step.description}
-              </div>
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-/**
- * TemplateSelector displays available templates for selection
- */
-function TemplateSelector({
-  templates,
-  selectedTemplate,
-  onSelect,
-}: {
-  onSelect: (templateId: string) => void
-  selectedTemplate?: string
-  templates: ReportTemplate[]
-}) {
-  const groupedTemplates = useMemo(() => {
-    const groups: Record<string, ReportTemplate[]> = {}
-    for (const template of templates) {
-      const category = template.category
-      groups[category] ??= []
-      groups[category].push(template)
-    }
-    return groups
-  }, [templates])
-
-  const handleTemplateClick = (templateId: string) => {
-    onSelect(templateId)
-  }
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>, templateId: string) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault()
-      onSelect(templateId)
-    }
-  }
-
-  return (
-    <div aria-label="Templates disponíveis" className="space-y-6" role="listbox">
-      {Object.entries(groupedTemplates).map(([category, categoryTemplates]) => (
-        <div key={category} className="space-y-3">
-          <h3 className="text-sm font-medium text-muted-foreground">
-            {category}
-          </h3>
-          <div className={templateGridVariants()}>
-            {categoryTemplates.map((template) => {
-              const isSelected = selectedTemplate === template.id
-              return (
-                <div
-                  key={template.id}
-                  className={templateCardVariants({
-                    state: isSelected ? "selected" : "default",
-                  })}
-                  aria-selected={isSelected}
-                  role="option"
-                  tabIndex={0}
-                  onClick={() => { handleTemplateClick(template.id); }}
-                  onKeyDown={(e) => { handleKeyDown(e, template.id); }}
-                >
-                  <div className="flex items-start gap-3">
-                    {template.icon && (
-                      <div className="shrink-0 text-primary">{template.icon}</div>
-                    )}
-                    <div className="flex-1 min-w-0">
-                      <div className="font-medium">{template.name}</div>
-                      <div className="text-sm text-muted-foreground line-clamp-2">
-                        {template.description}
-                      </div>
-                      <div className="mt-2 text-xs text-muted-foreground">
-                        {template.columns.length} colunas
-                      </div>
-                    </div>
-                    {isSelected && (
-                      <Check className="h-5 w-5 text-primary shrink-0" />
-                    )}
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-/**
- * ConfigurationForm allows configuring the report
- */
-function ConfigurationForm({
-  template,
-  config,
-  onChange,
-  showSchedule,
-}: {
-  config: Partial<ReportConfig>
-  onChange: (config: Partial<ReportConfig>) => void
-  showSchedule?: boolean
-  template: ReportTemplate
-}) {
-  const formId = useId()
-
-  const handleColumnToggle = (columnId: string, checked: boolean) => {
-    const currentColumns = config.columns ?? template.columns.map((c) => c.id)
-    const newColumns = checked
-      ? [...currentColumns, columnId]
-      : currentColumns.filter((id) => id !== columnId)
-    onChange({ ...config, columns: newColumns })
-  }
-
-  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onChange({ ...config, title: e.target.value })
-  }
-
-  const handleIncludeChartsChange = (checked: boolean) => {
-    onChange({ ...config, includeCharts: checked })
-  }
-
-  const handleIncludeSummaryChange = (checked: boolean) => {
-    onChange({ ...config, includeSummary: checked })
-  }
-
-  const selectedColumns = config.columns ?? template.columns.map((c) => c.id)
-
-  return (
-    <div aria-describedby={`${formId}-desc`} className="space-y-6" role="form">
-      <p className="sr-only" id={`${formId}-desc`}>
-        Configure o relatório selecionando colunas e opções
-      </p>
-
-      {/* Report Title */}
-      <div className={configSectionVariants()}>
-        <div className="flex items-center gap-2 mb-3">
-          <Settings2 className="h-4 w-4 text-muted-foreground" />
-          <h3 className="text-sm font-medium">Configurações Gerais</h3>
-        </div>
-        <div className="space-y-4">
-          <div>
-            <Label htmlFor={`${formId}-title`}>Título do Relatório</Label>
-            <input
-              className="mt-1.5 w-full px-3 py-2 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
-              id={`${formId}-title`}
-              placeholder={template.name}
-              type="text"
-              value={config.title ?? ""}
-              onChange={handleTitleChange}
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Column Selection */}
-      <div className={configSectionVariants()}>
-        <div className="flex items-center gap-2 mb-3">
-          <Table2 className="h-4 w-4 text-muted-foreground" />
-          <h3 className="text-sm font-medium">Colunas</h3>
-        </div>
-        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
-          {template.columns.map((column) => (
-            <div key={column.id} className="flex items-center gap-2">
-              <Checkbox
-                checked={selectedColumns.includes(column.id)}
-                id={`${formId}-col-${column.id}`}
-                onCheckedChange={(checked) =>
-                  { handleColumnToggle(column.id, checked === true); }
-                }
-              />
-              <Label
-                className="text-sm font-normal cursor-pointer"
-                htmlFor={`${formId}-col-${column.id}`}
-              >
-                {column.label}
-              </Label>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Filters Section */}
-      <div className={configSectionVariants()}>
-        <div className="flex items-center gap-2 mb-3">
-          <FilterIcon className="h-4 w-4 text-muted-foreground" />
-          <h3 className="text-sm font-medium">Filtros</h3>
-        </div>
-        <p className="text-sm text-muted-foreground">
-          {template.defaultFilters && template.defaultFilters.length > 0
-            ? `${String(template.defaultFilters.length)} filtro(s) configurado(s)`
-            : "Nenhum filtro configurado"}
-        </p>
-      </div>
-
-      {/* Options */}
-      <div className={configSectionVariants()}>
-        <div className="flex items-center gap-2 mb-3">
-          <Eye className="h-4 w-4 text-muted-foreground" />
-          <h3 className="text-sm font-medium">Opções</h3>
-        </div>
-        <div className="space-y-3">
-          {template.charts && template.charts.length > 0 && (
-            <div className="flex items-center gap-2">
-              <Checkbox
-                checked={config.includeCharts ?? true}
-                id={`${formId}-charts`}
-                onCheckedChange={handleIncludeChartsChange}
-              />
-              <Label
-                className="text-sm font-normal cursor-pointer"
-                htmlFor={`${formId}-charts`}
-              >
-                Incluir gráficos
-              </Label>
-            </div>
-          )}
-          <div className="flex items-center gap-2">
-            <Checkbox
-              checked={config.includeSummary ?? true}
-              id={`${formId}-summary`}
-              onCheckedChange={handleIncludeSummaryChange}
-            />
-            <Label
-              className="text-sm font-normal cursor-pointer"
-              htmlFor={`${formId}-summary`}
-            >
-              Incluir resumo estatístico
-            </Label>
-          </div>
-        </div>
-      </div>
-
-      {/* Schedule Option */}
-      {showSchedule && (
-        <div className={configSectionVariants()}>
-          <div className="flex items-center gap-2 mb-3">
-            <Clock className="h-4 w-4 text-muted-foreground" />
-            <h3 className="text-sm font-medium">Agendamento</h3>
-          </div>
-          <p className="text-sm text-muted-foreground">
-            Configure o agendamento após gerar o relatório
-          </p>
-        </div>
-      )}
-    </div>
-  )
-}
-
-/**
- * PreviewPanel displays the report preview
- */
-function PreviewPanel({
-  data,
-  columns,
-  config,
-  branding,
-}: {
-  branding?: ReportGeneratorProps["branding"]
-  columns: ColumnDefinition[]
-  config: ReportConfig
-  data: unknown[]
-}) {
-  const selectedColumns = columns.filter((c) => config.columns.includes(c.id))
-
-  const formatValue = (value: unknown, column: ColumnDefinition): string => {
-    if (value === null || value === undefined) return "-"
-
-    switch (column.type) {
-      case "currency":
-        return new Intl.NumberFormat("pt-BR", {
-          style: "currency",
-          currency: "BRL",
-        }).format(Number(value))
-      case "date":
-        return new Intl.DateTimeFormat("pt-BR").format(
-          new Date(typeof value === "string" || typeof value === "number" ? value : 0)
-        )
-      case "number":
-        return new Intl.NumberFormat("pt-BR").format(Number(value))
-      case "boolean":
-        return value === true ? "Sim" : "Não"
-      default:
-        return typeof value === "object" ? JSON.stringify(value) : String(value as boolean | number | string)
-    }
-  }
-
-  return (
-    <div className={previewContainerVariants()}>
-      <div className={previewHeaderVariants()}>
-        <div className="flex items-center gap-3">
-          {branding?.logo && (
-            <img
-              alt={branding.companyName ?? "Logo"}
-              className="h-8 w-auto"
-              src={branding.logo}
-            />
-          )}
-          <div>
-            <div className="font-semibold">{config.title || "Relatório"}</div>
-            {config.description && (
-              <div className="text-xs text-muted-foreground">
-                {config.description}
-              </div>
-            )}
-          </div>
-        </div>
-        <div className="text-xs text-muted-foreground">
-          {data.length} registro(s)
-        </div>
-      </div>
-      <div className={previewContentVariants()}>
-        <table className="w-full text-sm">
-          <thead>
-            <tr className="border-b border-border">
-              {selectedColumns.map((column) => (
-                <th
-                  key={column.id}
-                  className="px-3 py-2 text-left font-medium text-muted-foreground"
-                >
-                  {column.label}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {data.slice(0, 10).map((row, rowIndex) => {
-              // Generate stable key from row data since preview data has no IDs
-              const rowKey = `row-${String(rowIndex)}-${JSON.stringify(Object.values(row as Record<string, unknown>).slice(0, 2))}`
-              return (
-                <tr key={rowKey} className="border-b border-border/50">
-                {selectedColumns.map((column) => (
-                  <td key={column.id} className="px-3 py-2">
-                    {formatValue(
-                      (row as Record<string, unknown>)[column.field],
-                      column
-                    )}
-                  </td>
-                ))}
-              </tr>
-              )
-            })}
-          </tbody>
-        </table>
-        {data.length > 10 && (
-          <div className="mt-4 text-center text-sm text-muted-foreground">
-            Mostrando 10 de {data.length} registros
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-/**
- * ExportPanel displays export options
- */
-function ExportPanel({
-  exportFormats,
-  onExport,
-  isExporting,
-  showSchedule,
-  onSchedule,
-}: {
-  exportFormats: ExportFormat[]
-  isExporting: boolean
-  onExport: (format: ExportFormat) => void
-  onSchedule?: () => void
-  showSchedule?: boolean
-}) {
-  return (
-    <div className="space-y-6">
-      <div className={configSectionVariants()}>
-        <div className="flex items-center gap-2 mb-3">
-          <Download className="h-4 w-4 text-muted-foreground" />
-          <h3 className="text-sm font-medium">Formato de Exportação</h3>
-        </div>
-        <div className={exportButtonGroupVariants({ align: "start" })}>
-          {exportFormats.map((format) => {
-            const info = EXPORT_FORMAT_INFO[format]
-            const Icon = info.icon
-            return (
-              <Button
-                key={format}
-                disabled={isExporting}
-                size="lg"
-                variant="outline"
-                onClick={() => { onExport(format); }}
-              >
-                <Icon className="h-4 w-4 mr-2" />
-                {info.label}
-              </Button>
-            )
-          })}
-        </div>
-      </div>
-
-      {showSchedule && onSchedule && (
-        <div className={configSectionVariants()}>
-          <div className="flex items-center gap-2 mb-3">
-            <Calendar className="h-4 w-4 text-muted-foreground" />
-            <h3 className="text-sm font-medium">Agendar Relatório</h3>
-          </div>
-          <Button variant="outline" onClick={onSchedule}>
-            <Clock className="h-4 w-4 mr-2" />
-            Configurar Agendamento
-          </Button>
-        </div>
-      )}
-    </div>
-  )
-}
-
-/**
- * ReportGenerator is a wizard-style component for creating and exporting reports
- */
-function ReportGenerator({
-  templates,
-  dataSource,
-  defaultTemplate,
-  exportFormats = ["pdf", "xlsx", "csv"],
-  showPreview = true,
-  showSchedule = false,
-  maxRows = 10000,
-  branding,
-  className,
-  onGenerate,
-  onReportExport,
-  onSchedule,
-  onReportError,
-  onConfigChange,
-  size,
-  layout,
-}: ReportGeneratorProps) {
-  const componentId = useId()
-
-  // State
-  const [currentStep, setCurrentStep] = useState(0)
-  const [completedSteps, setCompletedSteps] = useState<number[]>([])
-  const [generatorState, setGeneratorState] =
-    useState<ReportGeneratorState>("idle")
-  const [selectedTemplateId, setSelectedTemplateId] = useState<string | undefined>(
-    defaultTemplate
-  )
-  const [config, setConfig] = useState<Partial<ReportConfig>>({})
-  const [previewData, setPreviewData] = useState<unknown[]>([])
-  const [error, setError] = useState<Error | null>(null)
-
-  // Computed values
-  const selectedTemplate = useMemo(
-    () => templates.find((t) => t.id === selectedTemplateId),
-    [templates, selectedTemplateId]
-  )
-
-  const effectiveSteps = useMemo(() => {
-    if (!showPreview) {
-      return STEPS.filter((_, index) => index !== 2)
-    }
-    return STEPS
-  }, [showPreview])
-
-  const isGenerating = generatorState === "generating"
-  const isExporting = generatorState === "exporting"
-
-  // Handlers
-  const handleTemplateSelect = useCallback(
-    (templateId: string) => {
-      setSelectedTemplateId(templateId)
-      const template = templates.find((t) => t.id === templateId)
-      if (template) {
-        const initialConfig: Partial<ReportConfig> = {
-          templateId,
-          title: template.name,
-          columns: template.columns.map((c) => c.id),
-          filters: template.defaultFilters ?? [],
-          includeCharts: true,
-          includeSummary: true,
-        }
-        setConfig(initialConfig)
-        onConfigChange?.({ config: initialConfig as ReportConfig })
-      }
-    },
-    [templates, onConfigChange]
-  )
-
-  const handleConfigChange = useCallback(
-    (newConfig: Partial<ReportConfig>) => {
-      setConfig(newConfig)
-      onConfigChange?.({ config: newConfig as ReportConfig })
-    },
-    [onConfigChange]
-  )
-
-  const handleNext = useCallback(() => {
-    // Mark current step as complete
-    if (!completedSteps.includes(currentStep)) {
-      setCompletedSteps((prev) => [...prev, currentStep])
-    }
-
-    // Moving from template selection to configuration
-    if (currentStep === 0 && !selectedTemplateId) {
-      return
-    }
-
-    // Moving to preview step - generate report
-    if (currentStep === 1 && showPreview) {
-      setGeneratorState("generating")
-      try {
-        onGenerate?.({ config: config as ReportConfig })
-
-        // Simulate data fetching based on data source
-        let data: unknown[] = []
-        if (dataSource.type === "static" && dataSource.data) {
-          data = dataSource.data.slice(0, maxRows)
-        } else {
-          // For API/query, we'd fetch data here
-          // For now, use empty array as placeholder
-          data = []
-        }
-
-        setPreviewData(data)
-        setGeneratorState("preview")
-      } catch (err) {
-        const errorObj = err instanceof Error ? err : new Error(String(err))
-        setError(errorObj)
-        setGeneratorState("error")
-        onReportError?.({ error: errorObj })
-        return
-      }
-    }
-
-    setCurrentStep((prev) => Math.min(prev + 1, effectiveSteps.length - 1))
-  }, [
-    currentStep,
-    completedSteps,
-    selectedTemplateId,
-    showPreview,
-    config,
-    dataSource,
-    maxRows,
-    effectiveSteps.length,
-    onGenerate,
-    onReportError,
-  ])
-
-  const handleBack = useCallback(() => {
-    setCurrentStep((prev) => Math.max(prev - 1, 0))
-    if (generatorState === "error") {
-      setGeneratorState("idle")
-      setError(null)
-    }
-  }, [generatorState])
-
-  const handleStepClick = useCallback(
-    (step: number) => {
-      if (step < currentStep || completedSteps.includes(step)) {
-        setCurrentStep(step)
-      }
-    },
-    [currentStep, completedSteps]
-  )
-
-  const handleExport = useCallback(
-    (format: ExportFormat) => {
-      setGeneratorState("exporting")
-      try {
-        // Create export blob based on format
-        const content = JSON.stringify({
-          config,
-          data: previewData,
-          format,
-          generatedAt: new Date().toISOString(),
-        })
-        const blob = new Blob([content], { type: "application/json" })
-
-        onReportExport?.({ format, data: blob })
-        setGeneratorState("idle")
-      } catch (err) {
-        const errorObj = err instanceof Error ? err : new Error(String(err))
-        setError(errorObj)
-        setGeneratorState("error")
-        onReportError?.({ error: errorObj })
-      }
-    },
-    [config, previewData, onReportExport, onReportError]
-  )
-
-  const handleSchedule = useCallback(() => {
-    const schedule: ScheduleConfig = {
-      frequency: "weekly",
-      time: "09:00",
-      recipients: [],
-      format: "pdf",
-    }
-    onSchedule?.({ schedule })
-  }, [onSchedule])
-
-  // Determine if we can proceed to next step
-  const canProceed = useMemo(() => {
-    switch (currentStep) {
-      case 0:
-        return !!selectedTemplateId
-      case 1:
-        return (
-          config.columns && config.columns.length > 0 && !!config.title?.trim()
-        )
-      default:
-        return true
-    }
-  }, [currentStep, selectedTemplateId, config])
-
-  // Render loading state for generation only
-  if (isGenerating) {
-    return (
-      <div
-        aria-busy="true"
-        aria-describedby={`${componentId}-loading`}
-        className={cn(reportGeneratorVariants({ size, layout }), className)}
-        role="status"
-      >
-        <div className={loadingStateVariants()}>
-          <Loader2 className="h-8 w-8 animate-spin text-primary" />
-          <div id={`${componentId}-loading`}>
-            <p className="font-medium">Gerando relatório...</p>
-            <p className="text-sm text-muted-foreground">
-              Por favor, aguarde
-            </p>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  // Render error state
-  if (generatorState === "error" && error) {
-    return (
-      <div
-        aria-describedby={`${componentId}-error`}
-        className={cn(reportGeneratorVariants({ size, layout }), className)}
-        role="alert"
-      >
-        <div className={errorStateVariants()}>
-          <AlertCircle className="h-8 w-8" />
-          <div id={`${componentId}-error`}>
-            <p className="font-medium">Erro ao gerar relatório</p>
-            <p className="text-sm">{error.message}</p>
-          </div>
-          <Button variant="outline" onClick={handleBack}>
-            <ArrowLeft className="h-4 w-4 mr-2" />
-            Voltar
-          </Button>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div
-      aria-describedby={`${componentId}-desc`}
-      aria-label="Gerador de Relatórios"
-      className={cn(reportGeneratorVariants({ size, layout }), className)}
-      data-slot="report-generator"
-      role="form"
-    >
-      <p className="sr-only" id={`${componentId}-desc`}>
-        Use este assistente para criar e exportar relatórios personalizados
-      </p>
-
-      {/* Step Indicator */}
-      <StepIndicator
-        completedSteps={completedSteps}
-        currentStep={currentStep}
-        onStepClick={handleStepClick}
-      />
-
-      {/* Step Content */}
-      <div aria-live="polite" className="min-h-[300px]">
-        {/* Step 0: Template Selection */}
-        {currentStep === 0 && (
-          <TemplateSelector
-            selectedTemplate={selectedTemplateId}
-            templates={templates}
-            onSelect={handleTemplateSelect}
-          />
-        )}
-
-        {/* Step 1: Configuration */}
-        {currentStep === 1 && selectedTemplate && (
-          <ConfigurationForm
-            config={config}
-            showSchedule={showSchedule}
-            template={selectedTemplate}
-            onChange={handleConfigChange}
-          />
-        )}
-
-        {/* Step 2: Preview (if enabled) */}
-        {currentStep === 2 && showPreview && selectedTemplate && (
-          <PreviewPanel
-            branding={branding}
-            columns={selectedTemplate.columns}
-            config={config as ReportConfig}
-            data={previewData}
-          />
-        )}
-
-        {/* Step 3/2: Export */}
-        {((currentStep === 3 && showPreview) ||
-          (currentStep === 2 && !showPreview)) && (
-          <ExportPanel
-            exportFormats={exportFormats}
-            isExporting={isExporting}
-            showSchedule={showSchedule}
-            onExport={handleExport}
-            onSchedule={showSchedule ? handleSchedule : undefined}
-          />
-        )}
-      </div>
-
-      {/* Navigation Actions */}
-      <div className={formActionsVariants()}>
-        <Button
-          disabled={currentStep === 0}
-          variant="outline"
-          onClick={handleBack}
-        >
-          <ArrowLeft className="h-4 w-4 mr-2" />
-          Voltar
-        </Button>
-        {currentStep < effectiveSteps.length - 1 ? (
-          <Button disabled={!canProceed} onClick={handleNext}>
-            Próximo
-            <ArrowRight className="h-4 w-4 ml-2" />
-          </Button>
-        ) : null}
-      </div>
-    </div>
-  )
-}
-
-export { ReportGenerator }