@oronts/vendure-data-hub-plugin 0.1.1 → 0.1.3

package/dist/dashboard/components/wizards/export-wizard/ExportWizard.tsx

@@ -0,0 +1,221 @@
+import * as React from 'react';
+import { Download } from 'lucide-react';
+import { toast } from 'sonner';
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+} from '@vendure/dashboard';
+import { VENDURE_ENTITY_SCHEMAS } from '../../../../shared';
+import { WIZARD_STEPS, EXPORT_STEP_ID, DEFAULT_EXPORT_OPTIONS } from './constants';
+import { QUERY_LIMITS, TRIGGER_TYPE, EXPORT_FORMAT, TOAST_WIZARD } from '../../../constants';
+import type { ExportWizardProps, ExportConfiguration, ExportField } from './types';
+import { SourceStep } from './SourceStep';
+import { FieldsStep } from './FieldsStep';
+import { FormatStep } from './FormatStep';
+import { DestinationStep } from './DestinationStep';
+import { TriggerStep } from './TriggerStep';
+import { ReviewStep } from './ReviewStep';
+import { validateExportWizardStep } from '../../../utils';
+import { WizardProgressBar, WizardFooter, ValidationErrorDisplay, SelectableCard, SelectableCardGrid } from '../../shared';
+import { useExportTemplates } from '../../../hooks/use-export-templates';
+import type { ExportTemplate } from '../../../hooks/use-export-templates';
+import { useWizardNavigation } from '../../../hooks/use-wizard-navigation';
+import { useEntityFieldSchemas } from '../../../hooks/api/use-entity-field-schemas';
+import { useDestinationSchemas, useTriggerTypeSchemas } from '../../../hooks/api/use-config-options';
+
+const QUICK_START_TEMPLATE_COUNT = 4;
+
+function getSchemaFieldDefault(schemas: Array<{ type: string; fields: Array<{ key: string; defaultValue?: unknown }> }>, type: string, key: string, fallback: string): string {
+    const schema = schemas.find(s => s.type === type);
+    const field = schema?.fields.find(f => f.key === key);
+    return typeof field?.defaultValue === 'string' ? field.defaultValue : fallback;
+}
+
+export function ExportWizard({ onComplete, onCancel, initialConfig, isSubmitting }: ExportWizardProps) {
+    const [selectedTemplate, setSelectedTemplate] = React.useState<ExportTemplate | null>(null);
+    const { templates: exportTemplates } = useExportTemplates();
+    const { getFieldNames: getBackendFieldNames } = useEntityFieldSchemas();
+    const { schemas: destinationSchemas } = useDestinationSchemas();
+    const { schemas: triggerSchemas } = useTriggerTypeSchemas();
+
+    const fileDefaults = React.useMemo(() => ({
+        directory: getSchemaFieldDefault(destinationSchemas, 'FILE', 'directory', '/exports'),
+        filename: getSchemaFieldDefault(destinationSchemas, 'FILE', 'filename', 'export.csv'),
+    }), [destinationSchemas]);
+
+    const validateStep = React.useCallback((stepId: string, cfg: Partial<ExportConfiguration>) => {
+        return validateExportWizardStep(stepId, cfg, destinationSchemas, triggerSchemas);
+    }, [destinationSchemas, triggerSchemas]);
+
+    const {
+        config,
+        setConfig,
+        currentStep,
+        setCurrentStep,
+        stepErrors,
+        setStepErrors,
+        attemptedNext,
+        setAttemptedNext,
+        updateConfig,
+        handleNext,
+        handleBack,
+        handleStepClick,
+        handleComplete,
+        canProceed,
+    } = useWizardNavigation<Partial<ExportConfiguration>>({
+        steps: WIZARD_STEPS,
+        initialConfig: initialConfig ?? {
+            name: '',
+            sourceEntity: '',
+            sourceQuery: { type: 'all', limit: QUERY_LIMITS.EXPORT_DEFAULT, orderBy: 'id', orderDirection: 'ASC' },
+            filters: [],
+            fields: [],
+            format: { type: EXPORT_FORMAT.CSV, options: { delimiter: ',', includeHeaders: true } },
+            destination: { type: 'FILE', fileConfig: { directory: fileDefaults.directory, filename: fileDefaults.filename } },
+            trigger: { type: TRIGGER_TYPE.MANUAL },
+            options: { ...DEFAULT_EXPORT_OPTIONS },
+        },
+        validateStep,
+        onComplete: onComplete as (config: Partial<ExportConfiguration>) => void,
+        nameRequiredMessage: TOAST_WIZARD.EXPORT_NAME_REQUIRED,
+        isSubmitting,
+    });
+
+    const handleUseTemplate = React.useCallback((template: ExportTemplate) => {
+        setSelectedTemplate(template);
+        const def = template.definition;
+        setConfig(prev => ({
+            ...prev,
+            name: template.name,
+            ...(def?.sourceEntity ? { sourceEntity: def.sourceEntity } : {}),
+            ...(def?.format ? {
+                format: {
+                    type: def.format as ExportConfiguration['format']['type'],
+                    options: {
+                        ...prev.format?.options,
+                        ...(def.formatOptions ?? {}),
+                    },
+                },
+            } : {}),
+            ...(def?.fields?.length ? {
+                fields: def.fields.map(f => ({
+                    sourceField: f.sourceField,
+                    outputName: f.outputName,
+                    include: true,
+                })),
+            } : {}),
+        }));
+        setCurrentStep(0);
+        toast.success(TOAST_WIZARD.TEMPLATE_SELECTED);
+    }, [setConfig, setCurrentStep]);
+
+    // Track previous sourceEntity to detect changes and avoid re-running on same value
+    const prevSourceEntityRef = React.useRef<string | undefined>(undefined);
+
+    React.useEffect(() => {
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- config.fields intentionally excluded: effect SETS fields, including it would cause infinite loop
+        // Only run when sourceEntity actually changes, not on every render
+        if (config.sourceEntity && config.sourceEntity !== prevSourceEntityRef.current) {
+            prevSourceEntityRef.current = config.sourceEntity;
+
+            // Use backend field names as primary source, fall back to static schemas during loading
+            const backendNames = getBackendFieldNames(config.sourceEntity);
+            const fieldNames = backendNames.length > 0
+                ? backendNames
+                : Object.keys(VENDURE_ENTITY_SCHEMAS[config.sourceEntity]?.fields ?? {});
+
+            if (fieldNames.length > 0) {
+                // If template fields are already set, don't override with auto-detected fields
+                if (config.fields && config.fields.length > 0 && selectedTemplate) {
+                    return;
+                }
+                const fields: ExportField[] = fieldNames.map(name => ({
+                    sourceField: name,
+                    outputName: name,
+                    include: true,
+                }));
+                // Use setConfig directly to avoid infinite loop from updateConfig in deps
+                setConfig(prev => ({ ...prev, fields }));
+                setStepErrors({});
+                setAttemptedNext(false);
+            }
+        }
+    }, [config.sourceEntity, selectedTemplate, getBackendFieldNames, setConfig, setStepErrors, setAttemptedNext]);
+
+    return (
+        <div className="flex flex-col h-full" data-testid="datahub-exportwizard-wizard">
+            <WizardProgressBar
+                steps={WIZARD_STEPS}
+                currentStep={currentStep}
+                onStepClick={handleStepClick}
+            />
+
+            {!selectedTemplate && currentStep === 0 && exportTemplates.length > 0 && (
+                <div className="px-6 pt-4">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle className="text-sm">Quick Start with a Template</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <SelectableCardGrid columns={4}>
+                                {exportTemplates.slice(0, QUICK_START_TEMPLATE_COUNT).map(template => (
+                                    <SelectableCard
+                                        key={template.id}
+                                        title={template.name}
+                                        description={template.description}
+                                        selected={false}
+                                        onClick={() => handleUseTemplate(template)}
+                                        data-testid={`datahub-export-template-${template.id}-btn`}
+                                    />
+                                ))}
+                            </SelectableCardGrid>
+                        </CardContent>
+                    </Card>
+                </div>
+            )}
+
+            <div className="flex-1 overflow-auto p-6" data-testid="datahub-exportwizard-steps">
+                <ValidationErrorDisplay errors={stepErrors} show={attemptedNext} />
+
+                {WIZARD_STEPS[currentStep].id === EXPORT_STEP_ID.SOURCE && (
+                    <SourceStep config={config} updateConfig={updateConfig} errors={attemptedNext ? stepErrors : {}} />
+                )}
+
+                {WIZARD_STEPS[currentStep].id === EXPORT_STEP_ID.FIELDS && (
+                    <FieldsStep config={config} updateConfig={updateConfig} errors={attemptedNext ? stepErrors : {}} />
+                )}
+
+                {WIZARD_STEPS[currentStep].id === EXPORT_STEP_ID.FORMAT && (
+                    <FormatStep config={config} updateConfig={updateConfig} errors={attemptedNext ? stepErrors : {}} />
+                )}
+
+                {WIZARD_STEPS[currentStep].id === EXPORT_STEP_ID.DESTINATION && (
+                    <DestinationStep config={config} updateConfig={updateConfig} errors={attemptedNext ? stepErrors : {}} />
+                )}
+
+                {WIZARD_STEPS[currentStep].id === EXPORT_STEP_ID.TRIGGER && (
+                    <TriggerStep config={config} updateConfig={updateConfig} errors={attemptedNext ? stepErrors : {}} />
+                )}
+
+                {WIZARD_STEPS[currentStep].id === EXPORT_STEP_ID.REVIEW && (
+                    <ReviewStep config={config} updateConfig={updateConfig} errors={attemptedNext ? stepErrors : {}} />
+                )}
+            </div>
+
+            <WizardFooter
+                currentStep={currentStep}
+                totalSteps={WIZARD_STEPS.length}
+                canProceed={canProceed}
+                onBack={handleBack}
+                onNext={handleNext}
+                onComplete={handleComplete}
+                onCancel={onCancel}
+                completeLabel="Create Export"
+                completeIcon={Download}
+                isSubmitting={isSubmitting}
+            />
+        </div>
+    );
+}

package/dist/dashboard/components/wizards/export-wizard/FieldsStep.tsx

@@ -0,0 +1,159 @@
+import { useCallback } from 'react';
+import {
+    Button,
+    Card,
+    CardContent,
+    Input,
+    Badge,
+    Switch,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    ScrollArea,
+} from '@vendure/dashboard';
+import { WizardStepContainer } from '../shared';
+import { STEP_CONTENT } from './constants';
+import { COMPONENT_HEIGHTS, SENTINEL_VALUES } from '../../../constants';
+import { useFieldTransformTypes } from '../../../hooks/api/use-config-options';
+import type { ConfigOptionValue } from '../../../hooks/api/use-config-options';
+import type { ExportConfiguration, ExportField } from './types';
+
+interface FieldsStepProps {
+    config: Partial<ExportConfiguration>;
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+    errors?: Record<string, string>;
+}
+
+export function FieldsStep({ config, updateConfig, errors = {} }: FieldsStepProps) {
+    const { options: transformTypes } = useFieldTransformTypes();
+    const fields = config.fields ?? [];
+
+    const toggleField = useCallback((index: number) => {
+        const currentFields = config.fields ?? [];
+        const newFields = [...currentFields];
+        newFields[index] = { ...newFields[index], include: !newFields[index].include };
+        updateConfig({ fields: newFields });
+    }, [config.fields, updateConfig]);
+
+    const updateField = useCallback((index: number, updates: Partial<ExportField>) => {
+        const currentFields = config.fields ?? [];
+        const newFields = [...currentFields];
+        newFields[index] = { ...newFields[index], ...updates };
+        updateConfig({ fields: newFields });
+    }, [config.fields, updateConfig]);
+
+    const selectAll = useCallback(() => {
+        const currentFields = config.fields ?? [];
+        updateConfig({
+            fields: currentFields.map(f => ({ ...f, include: true })),
+        });
+    }, [config.fields, updateConfig]);
+
+    const deselectAll = useCallback(() => {
+        const currentFields = config.fields ?? [];
+        updateConfig({
+            fields: currentFields.map(f => ({ ...f, include: false })),
+        });
+    }, [config.fields, updateConfig]);
+
+    const selectedCount = fields.filter(f => f.include).length;
+
+    return (
+        <WizardStepContainer
+            title={STEP_CONTENT.fields.title}
+            description={STEP_CONTENT.fields.description}
+        >
+            <div className="flex items-center justify-end gap-2">
+                <Badge variant="secondary">{selectedCount} of {fields.length} selected</Badge>
+                <Button variant="outline" size="sm" onClick={selectAll}>Select All</Button>
+                <Button variant="outline" size="sm" onClick={deselectAll}>Deselect All</Button>
+            </div>
+
+            <Card>
+                <CardContent className="p-0">
+                    <div className="grid grid-cols-12 gap-4 p-4 bg-muted font-medium text-sm">
+                        <div className="col-span-1">Include</div>
+                        <div className="col-span-4">Source Field</div>
+                        <div className="col-span-4">Output Name</div>
+                        <div className="col-span-3">Transform</div>
+                    </div>
+
+                    <ScrollArea className={COMPONENT_HEIGHTS.WIZARD_PANE_MD}>
+                        <div className="divide-y">
+                            {fields.map((field, index) => (
+                                <FieldRow
+                                    key={field.sourceField}
+                                    field={field}
+                                    index={index}
+                                    transformTypes={transformTypes}
+                                    onToggle={() => toggleField(index)}
+                                    onUpdate={(updates) => updateField(index, updates)}
+                                />
+                            ))}
+                        </div>
+                    </ScrollArea>
+                </CardContent>
+            </Card>
+        </WizardStepContainer>
+    );
+}
+
+interface FieldRowProps {
+    field: ExportField;
+    index: number;
+    transformTypes: ConfigOptionValue[];
+    onToggle: () => void;
+    onUpdate: (updates: Partial<ExportField>) => void;
+}
+
+function FieldRow({ field, index, transformTypes, onToggle, onUpdate }: FieldRowProps) {
+    return (
+        <div
+            className={`grid grid-cols-12 gap-4 p-4 items-center ${
+                !field.include ? 'opacity-50' : ''
+            }`}
+        >
+            <div className="col-span-1">
+                <Switch
+                    checked={field.include}
+                    onCheckedChange={onToggle}
+                />
+            </div>
+
+            <div className="col-span-4">
+                <code className="text-sm font-mono">{field.sourceField}</code>
+            </div>
+
+            <div className="col-span-4">
+                <Input
+                    value={field.outputName}
+                    onChange={e => onUpdate({ outputName: e.target.value })}
+                    disabled={!field.include}
+                    className="font-mono"
+                />
+            </div>
+
+            <div className="col-span-3">
+                <Select
+                    value={field.transformation ?? SENTINEL_VALUES.NONE}
+                    onValueChange={transformation => onUpdate({
+                        transformation: transformation === SENTINEL_VALUES.NONE ? undefined : transformation,
+                    })}
+                    disabled={!field.include}
+                >
+                    <SelectTrigger>
+                        <SelectValue placeholder="None" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value={SENTINEL_VALUES.NONE}>None</SelectItem>
+                        {transformTypes.map(opt => (
+                            <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </div>
+        </div>
+    );
+}

package/dist/dashboard/components/wizards/export-wizard/FormatStep.tsx

@@ -0,0 +1,246 @@
+import { useCallback, useMemo, memo } from 'react';
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+} from '@vendure/dashboard';
+import { FileText } from 'lucide-react';
+import { resolveIconName } from '../../../utils/icon-resolver';
+import { WizardStepContainer } from '../shared';
+import { SelectableCard, SelectableCardGrid } from '../../shared/selectable-card';
+import { SchemaFormRenderer } from '../../shared/schema-form';
+import { STEP_CONTENT } from './constants';
+import { useAdaptersByType } from '../../../hooks/api/use-adapters';
+import type { AdapterSchemaField } from '../../../types';
+import type { FeedTemplate } from '../../../types/wizard';
+import type { ExportConfiguration } from './types';
+import type { DataHubAdaptersApiQuery } from '../../../gql/graphql';
+
+type AdapterEntry = DataHubAdaptersApiQuery['dataHubAdapters'][number];
+
+/** Group identifier used on backend exporter schema fields that represent format options */
+const FORMAT_OPTIONS_GROUP = 'format-options';
+
+interface FormatStepProps {
+    config: Partial<ExportConfiguration>;
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+    errors?: Record<string, string>;
+}
+
+function resolveBaseFormat(adapter: { code: string; formatType?: string | null; description?: string | null }): string {
+    // Prefer backend formatType metadata
+    if (adapter.formatType) return adapter.formatType;
+    // Infer from description as last resort
+    if (adapter.description && /\bxml\b/i.test(adapter.description)) return 'XML';
+    if (adapter.description && /\bjson\b/i.test(adapter.description)) return 'JSON';
+    return 'CSV';
+}
+
+/** Derive a wizard format ID from an adapter code */
+function toFormatId(code: string): string {
+    return code.replace(/([a-z])([A-Z])/g, '$1_$2').toUpperCase();
+}
+
+export function FormatStep({ config, updateConfig, errors = {} }: FormatStepProps) {
+    const format = config.format ?? { type: 'CSV', options: {} };
+    const { data: exporters } = useAdaptersByType('EXPORTER');
+    const { data: feeds } = useAdaptersByType('FEED');
+
+    // Build format templates dynamically from backend adapter registry
+    const formatTemplates = useMemo(() => {
+        const templates: FeedTemplate[] = [];
+
+        // Add feed formats from backend (Google Shopping, Meta, Amazon, etc.)
+        if (feeds?.length) {
+            for (const feed of feeds) {
+                templates.push({
+                    id: toFormatId(feed.code),
+                    name: feed.name ?? feed.code,
+                    icon: resolveIconName(feed.icon) ?? FileText,
+                    description: feed.description ?? '',
+                    format: resolveBaseFormat(feed),
+                    requiredFields: [],
+                });
+            }
+        }
+
+        // Add standard export formats from backend (CSV, JSON, XML)
+        if (exporters?.length) {
+            for (const exp of exporters) {
+                const formatCode = exp.code.replace(/[Ee]xport/, '');
+                templates.push({
+                    id: `custom-${formatCode.toLowerCase()}`,
+                    name: exp.name ?? `Custom ${formatCode.toUpperCase()}`,
+                    icon: resolveIconName(exp.icon) ?? FileText,
+                    description: exp.description ?? '',
+                    format: formatCode.toUpperCase(),
+                    requiredFields: [],
+                });
+            }
+        }
+
+        return templates;
+    }, [exporters, feeds]);
+
+    return (
+        <WizardStepContainer
+            title={STEP_CONTENT.format.title}
+            description={STEP_CONTENT.format.description}
+        >
+            <FormatTemplateSelection format={format} updateConfig={updateConfig} templates={formatTemplates} />
+            <FormatOptionsCard format={format} updateConfig={updateConfig} templates={formatTemplates} exporters={exporters} />
+        </WizardStepContainer>
+    );
+}
+
+interface FormatTemplateSelectionProps {
+    format: ExportConfiguration['format'];
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+    templates: FeedTemplate[];
+}
+
+function FormatTemplateSelection({ format, updateConfig, templates }: FormatTemplateSelectionProps) {
+    return (
+        <SelectableCardGrid columns={3}>
+            {templates.map(template => (
+                <FormatTemplateCard
+                    key={template.id}
+                    template={template}
+                    format={format}
+                    updateConfig={updateConfig}
+                />
+            ))}
+        </SelectableCardGrid>
+    );
+}
+
+interface FormatTemplateCardProps {
+    template: FeedTemplate;
+    format: ExportConfiguration['format'];
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+}
+
+const FormatTemplateCard = memo(function FormatTemplateCard({
+    template,
+    format,
+    updateConfig,
+}: FormatTemplateCardProps) {
+    const isSelected = format.type === template.id ||
+        (template.id.startsWith('custom-') && format.type === template.format);
+
+    const handleClick = useCallback(() => {
+        const formatType = template.id.startsWith('custom-')
+            ? template.id.replace('custom-', '').toUpperCase()
+            : template.id;
+        updateConfig({
+            format: {
+                type: formatType,
+                options: {
+                    ...format.options,
+                    feedTemplate: template.id.startsWith('custom-') ? undefined : template.id,
+                },
+            },
+        });
+    }, [template.id, format.options, updateConfig]);
+
+    return (
+        <SelectableCard
+            icon={template.icon}
+            title={template.name}
+            description={template.description}
+            selected={isSelected}
+            onClick={handleClick}
+            data-testid={`datahub-export-format-${template.id}-btn`}
+        />
+    );
+});
+
+interface FormatOptionsCardProps {
+    format: ExportConfiguration['format'];
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+    templates: FeedTemplate[];
+    exporters: AdapterEntry[] | undefined;
+}
+
+function FormatOptionsCard({ format, updateConfig, templates, exporters }: FormatOptionsCardProps) {
+    const selectedTemplate = templates.find(t => t.id === format.type);
+    const baseFormat = selectedTemplate?.format ?? format.type;
+
+    // Schema-driven: find the exporter adapter matching the base format
+    // and extract its format-options fields. Strip the group so SchemaFormRenderer
+    // does not render a redundant sub-heading (the Card title already says "Format Options").
+    // Map GraphQL `defaultValue` to shared `default` so SchemaFormRenderer resolves defaults correctly.
+    const formatOptionsSchema = useMemo(() => {
+        if (!exporters?.length) return null;
+        const matchingExporter = exporters.find(e => e.formatType === baseFormat);
+        if (!matchingExporter) return null;
+        const formatFields: AdapterSchemaField[] = matchingExporter.schema.fields
+            .filter(f => f.group === FORMAT_OPTIONS_GROUP)
+            .map(f => ({
+                key: f.key,
+                label: f.label ?? undefined,
+                description: f.description ?? undefined,
+                type: f.type as AdapterSchemaField['type'],
+                required: f.required ?? undefined,
+                default: f.defaultValue ?? undefined,
+                options: f.options?.map(o => ({ value: o.value, label: o.label })) ?? undefined,
+                placeholder: f.placeholder ?? undefined,
+                validation: f.validation ? {
+                    min: f.validation.min ?? undefined,
+                    max: f.validation.max ?? undefined,
+                    minLength: f.validation.minLength ?? undefined,
+                    maxLength: f.validation.maxLength ?? undefined,
+                    pattern: f.validation.pattern ?? undefined,
+                    patternMessage: f.validation.patternMessage ?? undefined,
+                } : undefined,
+                dependsOn: f.dependsOn ? {
+                    field: f.dependsOn.field,
+                    value: f.dependsOn.value ?? undefined,
+                    operator: f.dependsOn.operator as NonNullable<AdapterSchemaField['dependsOn']>['operator'],
+                } : undefined,
+            }));
+        if (formatFields.length === 0) return null;
+        return { fields: formatFields };
+    }, [exporters, baseFormat]);
+
+    const handleSchemaChange = useCallback((values: Record<string, unknown>) => {
+        updateConfig({
+            format: { ...format, options: { ...format.options, ...values } },
+        });
+    }, [format, updateConfig]);
+
+    // Build current values from format.options for the schema fields,
+    // falling back to the schema field's defaultValue when no user value exists.
+    const schemaValues = useMemo(() => {
+        if (!formatOptionsSchema) return {};
+        const values: Record<string, unknown> = {};
+        for (const field of formatOptionsSchema.fields) {
+            const val = (format.options as Record<string, unknown>)[field.key];
+            values[field.key] = val ?? field.default;
+        }
+        return values;
+    }, [formatOptionsSchema, format.options]);
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Format Options</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                {formatOptionsSchema ? (
+                    <SchemaFormRenderer
+                        schema={formatOptionsSchema}
+                        values={schemaValues}
+                        onChange={handleSchemaChange}
+                        compact
+                    />
+                ) : (
+                    <p className="text-sm text-muted-foreground">
+                        No format-specific options available for this export type.
+                    </p>
+                )}
+            </CardContent>
+        </Card>
+    );
+}