@etus/ui 0.1.0

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

@@ -0,0 +1,889 @@
+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 }