robobyte-front-builder 1.0.19 → 1.0.21

package/src/views/builder/viewer/renderers/ExcelUploadRenderer.jsx

@@ -0,0 +1,639 @@
+import { useState, useRef, useMemo, useEffect, useCallback } from 'react'
+import {
+  Box, Button, Dialog, DialogTitle, DialogContent, DialogActions,
+  Typography, TextField, IconButton,
+  Table, TableHead, TableBody, TableRow, TableCell,
+  Alert, CircularProgress, Tooltip,
+} from '@mui/material'
+import { UploadFileOutlined, CheckCircleOutlined, EastOutlined, CloseOutlined, FileUploadOutlined } from '@mui/icons-material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+import { runFieldAction } from 'services/builderHelper/actionExecutor'
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Edit-mode placeholder — mirrors the production shape per variant
+// ─────────────────────────────────────────────────────────────────────────────
+
+function EditPlaceholder({ storageKey, variant = 'dropzone', label = 'Upload Excel' }) {
+  // Icon variant — just a ghost icon button
+  if (variant === 'icon') {
+    return (
+      <Tooltip title={`Excel Upload${storageKey ? ` · ${storageKey}` : ''}`}>
+        <Box
+          sx={{
+            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+            width: 40, height: 40, borderRadius: '50%',
+            border: '1px dashed', borderColor: 'primary.light',
+            bgcolor: 'action.hover', color: 'text.disabled',
+            pointerEvents: 'none',
+          }}
+        >
+          <FileUploadOutlined sx={{ fontSize: 20 }} />
+        </Box>
+      </Tooltip>
+    )
+  }
+
+  // Button variant — ghost outlined button
+  if (variant === 'button') {
+    return (
+      <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 1, pointerEvents: 'none' }}>
+        <Box
+          sx={{
+            display: 'inline-flex', alignItems: 'center', gap: 0.75,
+            px: 2, py: 0.6,
+            border: '1px dashed', borderColor: 'primary.light', borderRadius: 1,
+            bgcolor: 'action.hover', color: 'text.secondary',
+          }}
+        >
+          <FileUploadOutlined sx={{ fontSize: 16, color: 'text.disabled' }} />
+          <Typography sx={{ fontSize: 13, color: 'text.secondary' }}>{label}</Typography>
+        </Box>
+        {storageKey && (
+          <Typography sx={{ fontSize: 10, color: 'text.disabled', textTransform: 'uppercase', letterSpacing: 0.5 }}>
+            · {storageKey}
+          </Typography>
+        )}
+      </Box>
+    )
+  }
+
+  // Default: dropzone variant
+  return (
+    <Box
+      sx={{
+        border: '2px dashed', borderColor: 'primary.light', borderRadius: 2,
+        p: 3, bgcolor: 'action.hover',
+        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.75,
+        pointerEvents: 'none',
+      }}
+    >
+      <UploadFileOutlined sx={{ fontSize: 32, color: 'text.disabled' }} />
+      <Typography sx={{ fontSize: 13, fontWeight: 500, color: 'text.secondary' }}>{label}</Typography>
+      <Typography sx={{ fontSize: 10, color: 'text.disabled', textTransform: 'uppercase', letterSpacing: 0.5 }}>
+        Excel Upload{storageKey ? ` · ${storageKey}` : ''}
+      </Typography>
+    </Box>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Mapping dialog — simple list: Excel column → field name
+// ─────────────────────────────────────────────────────────────────────────────
+
+function MappingDialog({ open, onClose, onConfirm, headers, rawRows, fileName, presetMapping = [] }) {
+  // mapping: { [colIndex]: fieldName }  (empty string = skip this column)
+  const [mapping, setMapping] = useState({})
+
+  // Initialise: pre-fill from presetMapping where column names match, otherwise use header name
+  useEffect(() => {
+    if (!open) return
+    const presetByColumn = Object.fromEntries(presetMapping.map(({ column, field }) => [column, field]))
+    const init = {}
+    headers.forEach((h, i) => { init[i] = presetByColumn[h] ?? h })
+    setMapping(init)
+  }, [open, headers, presetMapping])
+
+  const setField = (colIdx, value) =>
+    setMapping(prev => ({ ...prev, [colIdx]: value }))
+
+  // Sample values for a column (first 2 non-empty cells)
+  const sample = (colIdx) =>
+    rawRows
+      .slice(0, 5)
+      .map(r => r[colIdx])
+      .filter(v => v != null && v !== '')
+      .slice(0, 2)
+      .join(' · ')
+
+  // validRows = [{ from: colIndex, to: fieldName }] for non-empty mappings
+  const validRows = headers
+    .map((_, i) => ({ from: i, to: (mapping[i] ?? '').trim() }))
+    .filter(r => r.to !== '')
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth='sm' fullWidth scroll='paper'>
+      <DialogTitle sx={{ pb: 0.5 }}>
+        <Typography variant='h6'>Map Columns to Fields</Typography>
+        <Typography variant='caption' color='text.secondary'>
+          {fileName} · {headers.length} columns · {rawRows.length} rows
+        </Typography>
+      </DialogTitle>
+
+      <DialogContent dividers sx={{ p: 0 }}>
+        {/* Header row */}
+        <Box
+          sx={{
+            display: 'grid', gridTemplateColumns: '1fr 32px 1fr',
+            alignItems: 'center', gap: 1,
+            px: 2.5, py: 1,
+            bgcolor: 'action.hover',
+            borderBottom: '1px solid', borderColor: 'divider',
+          }}
+        >
+          <Typography variant='caption' fontWeight={600} color='text.secondary' sx={{ textTransform: 'uppercase', letterSpacing: 0.5 }}>
+            Excel Column
+          </Typography>
+          <span />
+          <Typography variant='caption' fontWeight={600} color='text.secondary' sx={{ textTransform: 'uppercase', letterSpacing: 0.5 }}>
+            Field Name
+          </Typography>
+        </Box>
+
+        {/* One row per column */}
+        {headers.map((header, colIdx) => {
+          const fieldVal = mapping[colIdx] ?? ''
+          const sampleText = sample(colIdx)
+          return (
+            <Box
+              key={colIdx}
+              sx={{
+                display: 'grid', gridTemplateColumns: '1fr 32px 1fr',
+                alignItems: 'center', gap: 1,
+                px: 2.5, py: 1.25,
+                borderBottom: '1px solid', borderColor: 'divider',
+                '&:last-child': { borderBottom: 'none' },
+                opacity: fieldVal.trim() === '' ? 0.45 : 1,
+                transition: 'opacity 0.15s',
+              }}
+            >
+              {/* Left: Excel column name + sample */}
+              <Box>
+                <Typography variant='body2' fontWeight={500}>{header}</Typography>
+                {sampleText && (
+                  <Typography variant='caption' color='text.disabled' noWrap sx={{ display: 'block' }}>
+                    e.g. {sampleText}
+                  </Typography>
+                )}
+              </Box>
+
+              {/* Arrow */}
+              <EastOutlined sx={{ fontSize: 16, color: 'text.disabled', justifySelf: 'center' }} />
+
+              {/* Right: editable field name */}
+              <TextField
+                size='small'
+                fullWidth
+                placeholder='field name (leave blank to skip)'
+                value={fieldVal}
+                onChange={e => setField(colIdx, e.target.value)}
+                InputProps={{
+                  endAdornment: fieldVal !== '' && (
+                    <Tooltip title='Clear'>
+                      <IconButton size='small' edge='end' onClick={() => setField(colIdx, '')} tabIndex={-1}>
+                        <CloseOutlined sx={{ fontSize: 14 }} />
+                      </IconButton>
+                    </Tooltip>
+                  ),
+                }}
+              />
+            </Box>
+          )
+        })}
+
+        {validRows.length === 0 && (
+          <Alert severity='warning' sx={{ m: 2 }}>
+            Fill in at least one field name to import.
+          </Alert>
+        )}
+      </DialogContent>
+
+      <DialogActions sx={{ justifyContent: 'space-between', px: 2.5 }}>
+        <Typography variant='caption' color='text.secondary'>
+          {validRows.length} of {headers.length} columns will be imported
+        </Typography>
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <Button onClick={onClose}>Cancel</Button>
+          <Button
+            variant='contained'
+            disabled={validRows.length === 0}
+            onClick={() => onConfirm(validRows)}
+          >
+            Import {rawRows.length} row{rawRows.length !== 1 ? 's' : ''}
+          </Button>
+        </Box>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main renderer
+// ─────────────────────────────────────────────────────────────────────────────
+
+export default function ExcelUploadRenderer({ node, viewerContext }) {
+  const { data, setData, reportRefs, isEditMode } = viewerContext
+  const main       = resolveProps(node, 'main',  viewerContext)
+  const styleProps = resolveProps(node, 'style', viewerContext)
+
+  const {
+    key:            nodeKey,
+    dataKey,
+    defaultMapping,
+    variant         = 'dropzone',
+    sheetIndex                  = 0,
+    label:          uploadLabel  = 'Upload Excel',
+    showPreview                 = true,
+    maxPreviewRows              = 5,
+  } = main
+
+  const {
+    color:         styleColor,
+    buttonVariant: styleButtonVariant,
+    size:          styleSize,
+    borderRadius,
+    fontSize,
+    fontWeight,
+    width,
+    height,
+    margin,
+    padding,
+  } = styleProps ?? {}
+
+  // Normalise defaultMapping: [{ column, field }] → only valid pairs
+  const presetMapping = useMemo(() => {
+    const arr = Array.isArray(defaultMapping) ? defaultMapping : []
+    return arr.filter(r => r?.column?.trim() && r?.field?.trim())
+  }, [defaultMapping])
+
+  const nodeName   = nodeKey  || node.id
+  const storageKey = dataKey  || `__eu_${node.id}`
+
+  // ── Stored rows ───────────────────────────────────────────────────────────
+  const storedRows = useMemo(() => {
+    const arr = data?.[storageKey]
+    return Array.isArray(arr) ? arr : []
+  }, [data, storageKey])
+
+  // ── Stable refs for reportRefs entry ─────────────────────────────────────
+  const setDataRef     = useRef(setData)
+  const storageKeyRef  = useRef(storageKey)
+  const storedRowsRef  = useRef(storedRows)
+  setDataRef.current    = setData
+  storageKeyRef.current = storageKey
+  storedRowsRef.current = storedRows
+
+  useEffect(() => {
+    if (!reportRefs?.current) return
+    reportRefs.current[nodeName] = {
+      get rows()       { return storedRowsRef.current },
+      get storageKey() { return storageKeyRef.current },
+      setRows(arr) {
+        setDataRef.current(prev => ({ ...prev, [storageKeyRef.current]: Array.isArray(arr) ? arr : [] }))
+      },
+      clear() {
+        setDataRef.current(prev => ({ ...prev, [storageKeyRef.current]: [] }))
+      },
+    }
+    return () => { if (reportRefs?.current) delete reportRefs.current[nodeName] }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodeName, reportRefs])
+
+  // ── Local state ───────────────────────────────────────────────────────────
+  const [fileName,   setFileName]   = useState('')
+  const [headers,    setHeaders]    = useState([])
+  const [rawRows,    setRawRows]    = useState([])
+  const [mappingCols, setMappingCols] = useState([]) // [{from, to}] of last confirmed mapping
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [loading,    setLoading]    = useState(false)
+  const [error,      setError]      = useState(null)
+  const [isDragging, setIsDragging] = useState(false)
+  const fileInputRef = useRef(null)
+
+  // ── Apply mapping directly (preset or confirmed from dialog) ─────────────
+  const applyMapping = useCallback(async (validRows, rows) => {
+    const mappedRows = rows.map(row => {
+      const obj = {}
+      validRows.forEach(({ from, to }) => { obj[to.trim()] = row[from] ?? '' })
+      return obj
+    })
+    // Fire onMapped first — if the action returns an array, use that as the final data
+    const actionResult = await runFieldAction(node, viewerContext, 'onMapped', mappedRows)
+    const finalRows = Array.isArray(actionResult) ? actionResult : mappedRows
+    setData(prev => ({ ...prev, [storageKey]: finalRows }))
+    setMappingCols(validRows)
+  }, [storageKey, setData, node, viewerContext])
+
+  // ── Parse file ────────────────────────────────────────────────────────────
+  const parseFile = useCallback(async (file) => {
+    if (!file) return
+    setLoading(true)
+    setError(null)
+    try {
+      const xlsxMod = await import('xlsx')
+      const XLSX = xlsxMod.default ?? xlsxMod
+      const buffer = await file.arrayBuffer()
+      const workbook = XLSX.read(buffer, { type: 'array' })
+      const idx = sheetIndex ?? 0
+      const sheetName = workbook.SheetNames[idx]
+      if (!sheetName) throw new Error(`Sheet index ${idx} not found (file has ${workbook.SheetNames.length} sheet(s))`)
+      const sheet = workbook.Sheets[sheetName]
+      const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1, defval: '' })
+      if (!jsonData.length) throw new Error('Sheet is empty')
+      const hdrs = (jsonData[0] ?? []).map(String)
+      const rows = jsonData.slice(1).filter(row => row.some(cell => cell !== ''))
+      setFileName(file.name)
+      setHeaders(hdrs)
+      setRawRows(rows)
+      runFieldAction(node, viewerContext, 'onUpload', { fileName: file.name, headers: hdrs, rowCount: rows.length })
+
+      // Always open the dialog — preset mapping pre-fills the field names
+      setDialogOpen(true)
+    } catch (e) {
+      setError(e.message || 'Failed to parse file')
+    } finally {
+      setLoading(false)
+    }
+  }, [node, viewerContext, sheetIndex, presetMapping, applyMapping])
+
+  // ── Mapping confirmed from dialog ─────────────────────────────────────────
+  const handleMappingConfirm = useCallback((validRows) => {
+    applyMapping(validRows, rawRows)
+    setDialogOpen(false)
+  }, [rawRows, applyMapping])
+
+  // ── Clear ─────────────────────────────────────────────────────────────────
+  const handleClear = useCallback(() => {
+    setData(prev => ({ ...prev, [storageKey]: [] }))
+    setFileName('')
+    setHeaders([])
+    setRawRows([])
+    setMappingCols([])
+    runFieldAction(node, viewerContext, 'onClear', [])
+  }, [storageKey, setData, node, viewerContext])
+
+  // ── Drag & drop ───────────────────────────────────────────────────────────
+  const handleDrop = useCallback(e => {
+    e.preventDefault()
+    setIsDragging(false)
+    const file = e.dataTransfer.files?.[0]
+    if (file) parseFile(file)
+  }, [parseFile])
+
+  // ── Edit mode ─────────────────────────────────────────────────────────────
+  if (isEditMode) {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <EditPlaceholder storageKey={storageKey} variant={variant} label={uploadLabel} />
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ── Shared derived values ─────────────────────────────────────────────────
+  const hasData     = storedRows.length > 0
+  const previewRows = storedRows.slice(0, maxPreviewRows ?? 5)
+  const previewCols = mappingCols.length > 0
+    ? mappingCols.map(m => m.to.trim())
+    : Object.keys(storedRows[0] ?? {})
+
+  // ── Hidden file input (shared by all variants) ────────────────────────────
+  const fileInput = (
+    <input
+      ref={fileInputRef}
+      type='file'
+      accept='.xlsx,.xls,.csv'
+      style={{ display: 'none' }}
+      onChange={e => { const f = e.target.files?.[0]; if (f) parseFile(f); e.target.value = '' }}
+    />
+  )
+
+  // ── Preview table (shared) ────────────────────────────────────────────────
+  const previewTable = showPreview !== false && hasData && previewCols.length > 0 && (
+    <Box sx={{ mt: 2, overflowX: 'auto' }}>
+      <Typography variant='caption' color='text.secondary' sx={{ mb: 0.5, display: 'block' }}>
+        Preview — {previewRows.length} of {storedRows.length} row{storedRows.length !== 1 ? 's' : ''}
+      </Typography>
+      <Table size='small' sx={{ minWidth: 300 }}>
+        <TableHead>
+          <TableRow>
+            {previewCols.map(col => (
+              <TableCell key={col} sx={{ fontWeight: 600, fontSize: 11, whiteSpace: 'nowrap', fontFamily: 'monospace' }}>
+                {col}
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {previewRows.map((row, i) => (
+            <TableRow key={i}>
+              {previewCols.map(col => (
+                <TableCell key={col} sx={{ fontSize: 12 }}>
+                  {String(row[col] ?? '')}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      {storedRows.length > (maxPreviewRows ?? 5) && (
+        <Typography variant='caption' color='text.secondary' sx={{ mt: 0.5, display: 'block' }}>
+          +{storedRows.length - (maxPreviewRows ?? 5)} more rows
+        </Typography>
+      )}
+    </Box>
+  )
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Icon button variant
+  // ─────────────────────────────────────────────────────────────────────────
+  if (variant === 'icon') {
+    const iconTooltip = loading
+      ? 'Reading file…'
+      : hasData
+        ? `${storedRows.length} row${storedRows.length !== 1 ? 's' : ''} imported · click to re-upload`
+        : uploadLabel
+
+    const iconSizePx = styleSize === 'small' ? 16 : styleSize === 'large' ? 24 : 20
+    const activeColor = styleColor && styleColor !== 'default' ? `${styleColor}.main` : (hasData ? 'success.main' : 'text.secondary')
+    const activeBorderColor = styleColor && styleColor !== 'default' ? `${styleColor}.light` : (hasData ? 'success.light' : 'divider')
+
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        {fileInput}
+        <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5, margin, width, height }}>
+          <Tooltip title={iconTooltip} arrow>
+            <span>
+              <IconButton
+                onClick={() => !loading && fileInputRef.current?.click()}
+                disabled={loading}
+                sx={{
+                  color: activeColor,
+                  border: '1px solid',
+                  borderColor: activeBorderColor,
+                  borderRadius: borderRadius ?? 1.5,
+                  p: styleSize === 'small' ? 0.5 : styleSize === 'large' ? 1 : 0.75,
+                  transition: 'all 0.2s',
+                  '&:hover': { borderColor: 'primary.main', color: 'primary.main', bgcolor: 'action.hover' },
+                }}
+              >
+                {loading
+                  ? <CircularProgress size={iconSizePx - 2} color='inherit' />
+                  : hasData
+                    ? <CheckCircleOutlined sx={{ fontSize: iconSizePx }} />
+                    : <FileUploadOutlined sx={{ fontSize: iconSizePx }} />
+                }
+              </IconButton>
+            </span>
+          </Tooltip>
+          {hasData && (
+            <Tooltip title='Clear' arrow>
+              <IconButton size='small' onClick={handleClear} sx={{ color: 'text.disabled', '&:hover': { color: 'error.main' } }}>
+                <CloseOutlined sx={{ fontSize: 14 }} />
+              </IconButton>
+            </Tooltip>
+          )}
+        </Box>
+        {error && <Alert severity='error' sx={{ mt: 1 }} onClose={() => setError(null)}>{error}</Alert>}
+        {previewTable}
+        <MappingDialog open={dialogOpen} onClose={() => setDialogOpen(false)} onConfirm={handleMappingConfirm} headers={headers} rawRows={rawRows} fileName={fileName} presetMapping={presetMapping} />
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Button variant
+  // ─────────────────────────────────────────────────────────────────────────
+  if (variant === 'button') {
+    const btnVariant   = styleButtonVariant ?? 'outlined'
+    const btnSize      = styleSize ?? 'medium'
+    const btnColor     = styleColor && styleColor !== 'default' ? styleColor : (hasData ? 'success' : undefined)
+    const isContained  = btnVariant === 'contained'
+    const iconSizePx   = btnSize === 'small' ? 15 : btnSize === 'large' ? 20 : 18
+
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        {fileInput}
+        <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 1, margin, width, height }}>
+          <Button
+            variant={btnVariant}
+            size={btnSize}
+            color={btnColor}
+            startIcon={
+              loading
+                ? <CircularProgress size={iconSizePx - 3} color='inherit' />
+                : hasData
+                  ? <CheckCircleOutlined sx={{ fontSize: iconSizePx }} />
+                  : <FileUploadOutlined sx={{ fontSize: iconSizePx }} />
+            }
+            onClick={() => !loading && fileInputRef.current?.click()}
+            disabled={loading}
+            sx={{
+              borderStyle: !isContained && !hasData ? 'dashed' : 'solid',
+              textTransform: 'none',
+              fontWeight: fontWeight ?? (hasData ? 600 : 400),
+              fontSize,
+              borderRadius,
+              padding,
+              transition: 'all 0.2s',
+              ...(!btnColor && !hasData && {
+                color: 'text.secondary',
+                borderColor: 'divider',
+                '&:hover': { borderStyle: 'solid', borderColor: 'primary.main', color: 'primary.main', bgcolor: 'action.hover' },
+              }),
+            }}
+          >
+            {loading
+              ? 'Reading…'
+              : hasData
+                ? `${storedRows.length} row${storedRows.length !== 1 ? 's' : ''} imported`
+                : uploadLabel
+            }
+          </Button>
+          {hasData && (
+            <Tooltip title='Clear' arrow>
+              <IconButton size='small' onClick={handleClear} sx={{ color: 'text.disabled', '&:hover': { color: 'error.main' } }}>
+                <CloseOutlined sx={{ fontSize: 14 }} />
+              </IconButton>
+            </Tooltip>
+          )}
+        </Box>
+        {error && <Alert severity='error' sx={{ mt: 1 }} onClose={() => setError(null)}>{error}</Alert>}
+        {previewTable}
+        <MappingDialog open={dialogOpen} onClose={() => setDialogOpen(false)} onConfirm={handleMappingConfirm} headers={headers} rawRows={rawRows} fileName={fileName} presetMapping={presetMapping} />
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Default: drop zone variant
+  // ─────────────────────────────────────────────────────────────────────────
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+
+      {/* ── Upload zone ── */}
+      <Box
+        onDragOver={e => { e.preventDefault(); setIsDragging(true) }}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={handleDrop}
+        onClick={() => !loading && fileInputRef.current?.click()}
+        sx={{
+          border: '2px dashed',
+          borderColor: isDragging ? 'primary.main' : hasData ? 'success.light' : 'divider',
+          borderRadius: 2,
+          p: 3,
+          textAlign: 'center',
+          bgcolor: 'background.paper',
+          transition: 'border-color 0.2s, background-color 0.2s',
+          cursor: loading ? 'default' : 'pointer',
+          '&:hover': { borderColor: 'primary.main', bgcolor: 'action.hover' },
+        }}
+      >
+        {fileInput}
+
+        {loading ? (
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
+            <CircularProgress size={28} />
+            <Typography variant='body2' color='text.secondary'>Reading file…</Typography>
+          </Box>
+
+        ) : hasData ? (
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.5 }}>
+            <CheckCircleOutlined sx={{ fontSize: 32, color: 'success.main' }} />
+            <Typography variant='body2' fontWeight={600} color='success.main'>
+              {storedRows.length} row{storedRows.length !== 1 ? 's' : ''} imported
+            </Typography>
+            {fileName && (
+              <Typography variant='caption' color='text.secondary'>{fileName}</Typography>
+            )}
+            <Box sx={{ display: 'flex', gap: 1, mt: 1 }} onClick={e => e.stopPropagation()}>
+              <Button size='small' variant='outlined' onClick={() => fileInputRef.current?.click()}>
+                Re-upload
+              </Button>
+              <Button size='small' color='error' variant='outlined' onClick={handleClear}>
+                Clear
+              </Button>
+            </Box>
+          </Box>
+
+        ) : (
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
+            <UploadFileOutlined sx={{ fontSize: 40, color: 'text.disabled' }} />
+            <Typography variant='body2' fontWeight={500}>{uploadLabel}</Typography>
+            <Typography variant='caption' color='text.secondary'>
+              Drag & drop or click · .xlsx · .xls · .csv
+            </Typography>
+          </Box>
+        )}
+      </Box>
+
+      {/* ── Error ── */}
+      {error && (
+        <Alert severity='error' sx={{ mt: 1 }} onClose={() => setError(null)}>
+          {error}
+        </Alert>
+      )}
+
+      {previewTable}
+
+      <MappingDialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        onConfirm={handleMappingConfirm}
+        headers={headers}
+        rawRows={rawRows}
+        fileName={fileName}
+        presetMapping={presetMapping}
+      />
+    </ViewerComponentWrapper>
+  )
+}