robobyte-front-builder 1.0.17 → 1.0.21

package/src/views/builder/inspector/fields/ExtraColsEditor.jsx

@@ -0,0 +1,618 @@
+import { useState } from 'react'
+import {
+  Box, Button, Dialog, DialogTitle, DialogContent, DialogActions,
+  Typography, IconButton, TextField, Select, MenuItem, FormControl,
+  InputLabel, Switch, FormControlLabel, Accordion, AccordionSummary,
+  AccordionDetails, Chip, Divider, Tooltip
+} from '@mui/material'
+import { Add, Close, ExpandMore, TableChart, DragIndicator } from '@mui/icons-material'
+import ValueFunctionsRefPanel from './ValueFunctionsRefPanel'
+import ColumnFunctionEditor from './ColumnFunctionEditor'
+import {
+  CUSTOM_CELL_RENDERER_OPTIONS, CUSTOM_CELL_EDITOR_OPTIONS,
+  MS_DEFAULTS, buildMultiSelectParams, parseMultiSelectParams,
+  MultiSelectParamsSection,
+} from './columnEditorShared'
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const PINNED_OPTIONS = [
+  { value: '', label: 'None' },
+  { value: 'left', label: 'Left' },
+  { value: 'right', label: 'Right' },
+]
+
+const CELL_RENDERER_OPTIONS = [
+  { value: '', label: 'Default' },
+  ...CUSTOM_CELL_RENDERER_OPTIONS,
+  { value: 'agCheckboxCellRenderer', label: 'AG: Checkbox' },
+  { value: 'agAnimateShowChangeCellRenderer', label: 'AG: Animate Change' },
+  { value: 'agAnimateSlideCellRenderer', label: 'AG: Animate Slide' },
+  { value: 'agGroupCellRenderer', label: 'AG: Group' },
+  { value: 'agSparklineCellRenderer', label: 'AG: Sparkline' },
+  { value: '__custom__', label: 'Custom…' },
+]
+
+const CELL_EDITOR_OPTIONS = [
+  { value: '', label: 'Default (text)' },
+  ...CUSTOM_CELL_EDITOR_OPTIONS,
+  { value: 'agCheckboxCellEditor', label: 'AG: Checkbox' },
+  { value: 'agTextCellEditor', label: 'AG: Text' },
+  { value: 'agLargeTextCellEditor', label: 'AG: Large Text' },
+  { value: 'agSelectCellEditor', label: 'AG: Select' },
+  { value: 'agRichSelectCellEditor', label: 'AG: Rich Select' },
+  { value: 'agNumberCellEditor', label: 'AG: Number' },
+  { value: 'agDateCellEditor', label: 'AG: Date' },
+  { value: '__custom__', label: 'Custom…' },
+]
+
+const FILTER_OPTIONS = [
+  { value: '', label: 'None' },
+  { value: 'agTextColumnFilter', label: 'Text' },
+  { value: 'agNumberColumnFilter', label: 'Number' },
+  { value: 'agDateColumnFilter', label: 'Date' },
+  { value: 'agSetColumnFilter', label: 'Set' },
+]
+
+const DEFAULT_COLUMN = () => ({
+  headerName: '',
+  field: '',
+  pinned: '',
+  width: '',
+  minWidth: '',
+  maxWidth: '',
+  flex: '',
+  editable: false,
+  suppressMovable: false,
+  lockVisible: false,
+  sortable: true,
+  resizable: true,
+  hide: false,
+  checkboxSelection: false,
+  headerCheckboxSelection: false,
+  cellRenderer: '',
+  cellRendererCustom: '',
+  cellEditor: '',
+  cellEditorCustom: '',
+  cellEditorParams: '',
+  filter: '',
+  valueSetter: '',
+  valueGetter: '',
+  valueFormatter: '',
+  cellStyle: '',
+  tooltipValueGetter: '',
+  // MultiSelectEditor structured params
+  ...MS_DEFAULTS,
+})
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+
+const CODE_FIELD_SX = {
+  '& .MuiInputBase-root': {
+    fontFamily: "Menlo, Monaco, 'Courier New', monospace",
+    fontSize: 12,
+    bgcolor: '#1e1e1e',
+    color: '#d4d4d4',
+  },
+  '& .MuiOutlinedInput-notchedOutline': { borderColor: '#444' },
+  '& .MuiInputLabel-root': { color: '#888' },
+}
+
+const SECTION_LABEL_SX = {
+  fontSize: 11,
+  fontWeight: 600,
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  color: '#888',
+  mb: 1,
+}
+
+const INPUT_SX = {
+  '& .MuiInputBase-root': { color: '#e0e0e0' },
+  '& .MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+  '& .MuiInputLabel-root': { color: '#aaa' },
+}
+
+// ── Sub-components ────────────────────────────────────────────────────────────
+
+function CodeField({ value, onChange, placeholder, rows = 3 }) {
+  return (
+    <TextField
+      value={value}
+      onChange={e => onChange(e.target.value)}
+      multiline
+      minRows={rows}
+      maxRows={8}
+      fullWidth
+      size='small'
+      placeholder={placeholder}
+      sx={CODE_FIELD_SX}
+    />
+  )
+}
+
+function NumberField({ label, value, onChange }) {
+  return (
+    <TextField
+      label={label}
+      value={value}
+      onChange={e => onChange(e.target.value)}
+      size='small'
+      type='number'
+      sx={{ width: 100, ...INPUT_SX }}
+      InputLabelProps={{ shrink: true }}
+    />
+  )
+}
+
+function CellComponentSelect({ label, options, value, customValue, onChange, onCustomChange }) {
+  const isCustom = value === '__custom__'
+  return (
+    <Box display='flex' gap={1} alignItems='flex-start'>
+      <FormControl size='small' sx={{ minWidth: 160 }}>
+        <InputLabel sx={{ color: '#aaa' }}>{label}</InputLabel>
+        <Select
+          value={value}
+          label={label}
+          onChange={e => onChange(e.target.value)}
+          sx={{ color: '#e0e0e0', '.MuiOutlinedInput-notchedOutline': { borderColor: '#555' } }}
+        >
+          {options.map(o => (
+            <MenuItem key={o.value} value={o.value}>{o.label}</MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+      {isCustom && (
+        <TextField
+          size='small'
+          value={customValue}
+          onChange={e => onCustomChange(e.target.value)}
+          placeholder='Component name'
+          sx={{ flex: 1, ...INPUT_SX }}
+        />
+      )}
+    </Box>
+  )
+}
+
+/** Inline label + Monaco button + plain textarea for a function field */
+function FuncField({ label, type, value, onChange, placeholder, rows = 3 }) {
+  return (
+    <Box>
+      <Box display='flex' alignItems='center' gap={0.5} mb={0.5}>
+        <Typography sx={{ fontSize: 11, color: '#aaa' }}>{label}</Typography>
+        <ColumnFunctionEditor label={label} type={type} value={value} onChange={onChange} />
+      </Box>
+      <CodeField value={value} onChange={onChange} placeholder={placeholder} rows={rows} />
+    </Box>
+  )
+}
+
+// ── Single column card ────────────────────────────────────────────────────────
+
+function ColumnCard({ col, index, expanded, onToggle, onChange, onRemove }) {
+  const update = (key, val) => onChange({ ...col, [key]: val })
+
+  const summary = [col.headerName, col.field].filter(Boolean).join(' / ') || `Column ${index + 1}`
+  const hasFunctions = col.valueSetter?.trim() || col.valueGetter?.trim() ||
+    col.valueFormatter?.trim() || col.cellStyle?.trim() || col.tooltipValueGetter?.trim()
+
+  return (
+    <Accordion
+      expanded={expanded}
+      onChange={onToggle}
+      disableGutters
+      sx={{
+        bgcolor: '#2a2d32',
+        color: '#e0e0e0',
+        border: '1px solid #3a3f45',
+        borderRadius: '6px !important',
+        mb: 1,
+        '&:before': { display: 'none' },
+      }}
+    >
+      <AccordionSummary
+        expandIcon={<ExpandMore sx={{ color: '#aaa' }} />}
+        sx={{ minHeight: 44, '& .MuiAccordionSummary-content': { alignItems: 'center', gap: 1 } }}
+      >
+        <DragIndicator sx={{ fontSize: 16, color: '#555', flexShrink: 0 }} />
+        <Typography variant='body2' sx={{ fontWeight: 600, flex: 1 }} noWrap>{summary}</Typography>
+        {col.pinned && (
+          <Chip label={`pin:${col.pinned}`} size='small' sx={{ fontSize: 10, height: 18, bgcolor: '#3a5070', color: '#90caf9' }} />
+        )}
+        {col.editable && (
+          <Chip label='editable' size='small' sx={{ fontSize: 10, height: 18, bgcolor: '#2e4a2e', color: '#81c784' }} />
+        )}
+        {col.hide && (
+          <Chip label='hidden' size='small' sx={{ fontSize: 10, height: 18, bgcolor: '#4a3a1a', color: '#ffcc80' }} />
+        )}
+        {hasFunctions && (
+          <Chip label='fn' size='small' sx={{ fontSize: 10, height: 18, bgcolor: '#2a3a5a', color: '#90caf9' }} />
+        )}
+        <Tooltip title='Remove column'>
+          <IconButton size='small' onClick={e => { e.stopPropagation(); onRemove() }} sx={{ color: '#f44336', ml: 0.5 }}>
+            <Close fontSize='small' />
+          </IconButton>
+        </Tooltip>
+      </AccordionSummary>
+
+      <AccordionDetails sx={{ pt: 0, pb: 2, px: 2 }}>
+        <Divider sx={{ borderColor: '#3a3f45', mb: 2 }} />
+
+        {/* ── Identity ── */}
+        <Typography sx={SECTION_LABEL_SX}>Identity</Typography>
+        <Box display='flex' gap={2} mb={2}>
+          <TextField
+            label='Header Name'
+            value={col.headerName}
+            onChange={e => update('headerName', e.target.value)}
+            size='small'
+            fullWidth
+            placeholder='e.g. Active'
+            sx={INPUT_SX}
+            InputLabelProps={{ shrink: true }}
+          />
+          <TextField
+            label='Field'
+            value={col.field}
+            onChange={e => update('field', e.target.value)}
+            size='small'
+            fullWidth
+            placeholder='e.g. isSelected'
+            sx={INPUT_SX}
+            InputLabelProps={{ shrink: true }}
+          />
+        </Box>
+
+        {/* ── Layout ── */}
+        <Typography sx={SECTION_LABEL_SX}>Layout</Typography>
+        <Box display='flex' gap={2} alignItems='center' flexWrap='wrap' mb={1}>
+          <FormControl size='small' sx={{ minWidth: 100 }}>
+            <InputLabel sx={{ color: '#aaa' }}>Pinned</InputLabel>
+            <Select
+              value={col.pinned}
+              label='Pinned'
+              onChange={e => update('pinned', e.target.value)}
+              sx={{ color: '#e0e0e0', '.MuiOutlinedInput-notchedOutline': { borderColor: '#555' } }}
+            >
+              {PINNED_OPTIONS.map(o => <MenuItem key={o.value} value={o.value}>{o.label}</MenuItem>)}
+            </Select>
+          </FormControl>
+          <NumberField label='Width (px)' value={col.width} onChange={v => update('width', v)} />
+          <NumberField label='Min Width' value={col.minWidth} onChange={v => update('minWidth', v)} />
+          <NumberField label='Max Width' value={col.maxWidth} onChange={v => update('maxWidth', v)} />
+          <NumberField label='Flex' value={col.flex} onChange={v => update('flex', v)} />
+        </Box>
+        <Box display='flex' gap={1} flexWrap='wrap' mb={2}>
+          <FormControlLabel control={<Switch size='small' checked={!!col.editable} onChange={e => update('editable', e.target.checked)} color='primary' />} label={<Typography variant='caption'>Editable</Typography>} />
+          <FormControlLabel control={<Switch size='small' checked={!!col.sortable} onChange={e => update('sortable', e.target.checked)} color='default' />} label={<Typography variant='caption'>Sortable</Typography>} />
+          <FormControlLabel control={<Switch size='small' checked={!!col.resizable} onChange={e => update('resizable', e.target.checked)} color='default' />} label={<Typography variant='caption'>Resizable</Typography>} />
+          <FormControlLabel control={<Switch size='small' checked={!!col.hide} onChange={e => update('hide', e.target.checked)} color='warning' />} label={<Typography variant='caption'>Hide</Typography>} />
+          <FormControlLabel control={<Switch size='small' checked={!!col.suppressMovable} onChange={e => update('suppressMovable', e.target.checked)} />} label={<Typography variant='caption'>Lock Move</Typography>} />
+          <FormControlLabel control={<Switch size='small' checked={!!col.lockVisible} onChange={e => update('lockVisible', e.target.checked)} />} label={<Typography variant='caption'>Lock Visible</Typography>} />
+          <FormControlLabel control={<Switch size='small' checked={!!col.checkboxSelection} onChange={e => update('checkboxSelection', e.target.checked)} color='secondary' />} label={<Typography variant='caption'>Checkbox</Typography>} />
+          <FormControlLabel control={<Switch size='small' checked={!!col.headerCheckboxSelection} onChange={e => update('headerCheckboxSelection', e.target.checked)} color='secondary' />} label={<Typography variant='caption'>Header Checkbox</Typography>} />
+        </Box>
+
+        {/* ── Cell Renderer & Editor ── */}
+        <Typography sx={SECTION_LABEL_SX}>Cell Renderer &amp; Editor</Typography>
+        <Box display='flex' flexDirection='column' gap={1.5} mb={2}>
+          <CellComponentSelect
+            label='Cell Renderer'
+            options={CELL_RENDERER_OPTIONS}
+            value={col.cellRenderer}
+            customValue={col.cellRendererCustom}
+            onChange={v => update('cellRenderer', v)}
+            onCustomChange={v => update('cellRendererCustom', v)}
+          />
+          <CellComponentSelect
+            label='Cell Editor'
+            options={CELL_EDITOR_OPTIONS}
+            value={col.cellEditor}
+            customValue={col.cellEditorCustom}
+            onChange={v => update('cellEditor', v)}
+            onCustomChange={v => update('cellEditorCustom', v)}
+          />
+          {col.cellEditor === 'MultiSelectEditor' ? (
+            <MultiSelectParamsSection col={col} update={update} />
+          ) : (
+            <TextField
+              label='Cell Editor Params (JSON)'
+              value={col.cellEditorParams}
+              onChange={e => update('cellEditorParams', e.target.value)}
+              size='small'
+              fullWidth
+              placeholder='{ "values": ["Yes", "No"] }'
+              sx={INPUT_SX}
+              InputLabelProps={{ shrink: true }}
+            />
+          )}
+          <FormControl size='small' sx={{ minWidth: 180 }}>
+            <InputLabel sx={{ color: '#aaa' }}>Column Filter</InputLabel>
+            <Select
+              value={col.filter}
+              label='Column Filter'
+              onChange={e => update('filter', e.target.value)}
+              sx={{ color: '#e0e0e0', '.MuiOutlinedInput-notchedOutline': { borderColor: '#555' } }}
+            >
+              {FILTER_OPTIONS.map(o => <MenuItem key={o.value} value={o.value}>{o.label}</MenuItem>)}
+            </Select>
+          </FormControl>
+        </Box>
+
+        {/* ── Value Functions ── */}
+        <Typography sx={SECTION_LABEL_SX}>Value Functions (string → executed by AG Grid)</Typography>
+        <Box display='flex' flexDirection='column' gap={2}>
+          <FuncField
+            label='valueSetter'
+            type='valueSetter'
+            value={col.valueSetter}
+            onChange={v => update('valueSetter', v)}
+            placeholder={'(params) => {\n  const { newValue, data } = params\n  data.myField = newValue\n  return true\n}'}
+          />
+          <FuncField
+            label='valueGetter'
+            type='valueGetter'
+            value={col.valueGetter}
+            onChange={v => update('valueGetter', v)}
+            placeholder={'(params) => {\n  return params.data.myField\n}'}
+          />
+          <FuncField
+            label='valueFormatter'
+            type='valueFormatter'
+            value={col.valueFormatter}
+            onChange={v => update('valueFormatter', v)}
+            placeholder={'(params) => params.value ? "Yes" : "No"'}
+            rows={2}
+          />
+          <FuncField
+            label='cellStyle'
+            type='cellStyle'
+            value={col.cellStyle}
+            onChange={v => update('cellStyle', v)}
+            placeholder={'(params) => params.value > 0 ? { color: "green" } : {}'}
+            rows={2}
+          />
+          <FuncField
+            label='tooltipValueGetter'
+            type='tooltipValueGetter'
+            value={col.tooltipValueGetter}
+            onChange={v => update('tooltipValueGetter', v)}
+            placeholder={'(params) => params.value'}
+            rows={2}
+          />
+        </Box>
+      </AccordionDetails>
+    </Accordion>
+  )
+}
+
+// ── Serialize to AG Grid colDef ───────────────────────────────────────────────
+
+function serializeColumn(col) {
+  const out = {}
+  if (col.headerName)              out.headerName            = col.headerName
+  if (col.field)                   out.field                 = col.field
+  if (col.pinned)                  out.pinned                = col.pinned
+  if (col.width)                   out.width                 = Number(col.width)
+  if (col.minWidth)                out.minWidth              = Number(col.minWidth)
+  if (col.maxWidth)                out.maxWidth              = Number(col.maxWidth)
+  if (col.flex)                    out.flex                  = Number(col.flex)
+  if (col.editable)                out.editable              = true
+  if (!col.sortable)               out.sortable              = false   // default true → only write when false
+  if (!col.resizable)              out.resizable             = false
+  if (col.hide)                    out.hide                  = true
+  if (col.suppressMovable)         out.suppressMovable       = true
+  if (col.lockVisible)             out.lockVisible           = true
+  if (col.checkboxSelection)       out.checkboxSelection     = true
+  if (col.headerCheckboxSelection) out.headerCheckboxSelection = true
+  if (col.filter)                  out.filter                = col.filter
+
+  const renderer = col.cellRenderer === '__custom__' ? col.cellRendererCustom : col.cellRenderer
+  if (renderer) out.cellRenderer = renderer
+
+  const editor = col.cellEditor === '__custom__' ? col.cellEditorCustom : col.cellEditor
+  if (editor) out.cellEditor = editor
+
+  // MultiSelectEditor — generate cellEditorParams from structured ms_* fields
+  if (editor === 'MultiSelectEditor') {
+    const msParams = buildMultiSelectParams(col)
+    if (msParams && msParams !== '{}') out.cellEditorParams = msParams
+    // Persist asyncFetchOptions code separately so it survives dialog close/reopen
+    if (col.ms_asyncFetchOptions?.trim()) out._msAsyncFetchOptions = col.ms_asyncFetchOptions.trim()
+  } else if (col.cellEditorParams?.trim()) {
+    out.cellEditorParams = col.cellEditorParams.trim()
+  }
+  // Skip the fallback below for MultiSelectEditor (handled above)
+  if (editor === 'MultiSelectEditor') {
+    if (col.valueSetter?.trim())         out.valueSetter         = col.valueSetter.trim()
+    if (col.valueGetter?.trim())         out.valueGetter         = col.valueGetter.trim()
+    if (col.valueFormatter?.trim())      out.valueFormatter      = col.valueFormatter.trim()
+    if (col.cellStyle?.trim())           out.cellStyle           = col.cellStyle.trim()
+    if (col.tooltipValueGetter?.trim())  out.tooltipValueGetter  = col.tooltipValueGetter.trim()
+    return out
+  }
+  if (col.valueSetter?.trim())         out.valueSetter         = col.valueSetter.trim()
+  if (col.valueGetter?.trim())         out.valueGetter         = col.valueGetter.trim()
+  if (col.valueFormatter?.trim())      out.valueFormatter      = col.valueFormatter.trim()
+  if (col.cellStyle?.trim())           out.cellStyle           = col.cellStyle.trim()
+  if (col.tooltipValueGetter?.trim())  out.tooltipValueGetter  = col.tooltipValueGetter.trim()
+
+  return out
+}
+
+// ── Deserialize from stored value ─────────────────────────────────────────────
+
+function deserializeColumn(raw) {
+  const isCustomRenderer = raw.cellRenderer && !CELL_RENDERER_OPTIONS.some(o => o.value === raw.cellRenderer)
+  const isCustomEditor   = raw.cellEditor   && !CELL_EDITOR_OPTIONS.some(o => o.value === raw.cellEditor)
+  const isMultiSelect    = raw.cellEditor === 'MultiSelectEditor'
+
+  const msFields = isMultiSelect
+    ? (() => {
+        const p = parseMultiSelectParams(raw.cellEditorParams)
+        return {
+          ms_options:           Array.isArray(p.options) ? JSON.stringify(p.options, null, 2) : '',
+          ms_isSingle:          p.isSingle          ?? false,
+          ms_fieldName:         p.fieldName         ?? 'name',
+          ms_groupByField:      p.groupByField       ?? '',
+          ms_targetValue:       p.targetValue        ?? '',
+          ms_asyncFetchOptions: raw._msAsyncFetchOptions ?? '',
+        }
+      })()
+    : MS_DEFAULTS
+
+  return {
+    headerName:              raw.headerName              ?? '',
+    field:                   raw.field                   ?? '',
+    pinned:                  raw.pinned                  ?? '',
+    width:                   raw.width                   ?? '',
+    minWidth:                raw.minWidth                ?? '',
+    maxWidth:                raw.maxWidth                ?? '',
+    flex:                    raw.flex                    ?? '',
+    editable:                raw.editable                ?? false,
+    sortable:                raw.sortable                ?? true,
+    resizable:               raw.resizable               ?? true,
+    hide:                    raw.hide                    ?? false,
+    suppressMovable:         raw.suppressMovable         ?? false,
+    lockVisible:             raw.lockVisible             ?? false,
+    checkboxSelection:       raw.checkboxSelection       ?? false,
+    headerCheckboxSelection: raw.headerCheckboxSelection ?? false,
+    filter:                  raw.filter                  ?? '',
+    cellRenderer:            isCustomRenderer ? '__custom__' : (raw.cellRenderer ?? ''),
+    cellRendererCustom:      isCustomRenderer ? raw.cellRenderer : '',
+    cellEditor:              isCustomEditor   ? '__custom__' : (raw.cellEditor   ?? ''),
+    cellEditorCustom:        isCustomEditor   ? raw.cellEditor : '',
+    cellEditorParams:        isMultiSelect ? '' : (raw.cellEditorParams ?? ''),
+    valueSetter:             raw.valueSetter             ?? '',
+    valueGetter:             raw.valueGetter             ?? '',
+    valueFormatter:          raw.valueFormatter          ?? '',
+    cellStyle:               raw.cellStyle               ?? '',
+    tooltipValueGetter:      raw.tooltipValueGetter      ?? '',
+    ...msFields,
+  }
+}
+
+// ── Main editor ───────────────────────────────────────────────────────────────
+
+export default function ExtraColsEditor({ field, onChange }) {
+  const safeField   = field ?? { valueType: 'value', value: [] }
+  const storedValue = Array.isArray(safeField.value) ? safeField.value : []
+
+  const [open, setOpen]           = useState(false)
+  const [draft, setDraft]         = useState([])
+  const [expandedIdx, setExpanded] = useState(null)
+
+  const handleOpen = () => {
+    setDraft(storedValue.length > 0 ? storedValue.map(deserializeColumn) : [DEFAULT_COLUMN()])
+    setExpanded(storedValue.length === 0 ? 0 : null)
+    setOpen(true)
+  }
+
+  const handleClose = () => setOpen(false)
+
+  const handleSave = () => {
+    const serialized = draft.map(serializeColumn).filter(c => c.headerName || c.field)
+    onChange?.({ valueType: 'value', value: serialized })
+    setOpen(false)
+  }
+
+  const handleAdd = () => {
+    const next = [...draft, DEFAULT_COLUMN()]
+    setDraft(next)
+    setExpanded(next.length - 1)
+  }
+
+  const handleRemove = idx => {
+    setDraft(prev => prev.filter((_, i) => i !== idx))
+    if (expandedIdx === idx) setExpanded(null)
+  }
+
+  const handleChange = (idx, updated) =>
+    setDraft(prev => prev.map((c, i) => i === idx ? updated : c))
+
+  return (
+    <>
+      {/* ── Trigger ── */}
+      <Box display='flex' alignItems='center' justifyContent='space-between'>
+        <Box display='flex' alignItems='center' gap={1}>
+          <TableChart sx={{ fontSize: 16, color: '#7b8ea0' }} />
+          <Typography variant='caption' sx={{ color: '#aaa' }}>
+            {storedValue.length > 0
+              ? `${storedValue.length} column${storedValue.length > 1 ? 's' : ''}`
+              : 'No extra columns'}
+          </Typography>
+        </Box>
+        <Button size='small' variant='outlined' onClick={handleOpen} sx={{ fontSize: 11, py: 0.3, borderColor: '#555', color: '#ccc' }}>
+          Configure
+        </Button>
+      </Box>
+
+      {/* ── Dialog ── */}
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        fullWidth
+        maxWidth='md'
+        PaperProps={{ sx: { bgcolor: '#1e2126', color: '#e0e0e0', border: '1px solid #3a3f45' } }}
+      >
+        <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pb: 1 }}>
+          <Box display='flex' alignItems='center' gap={1}>
+            <TableChart sx={{ color: '#7b8ea0' }} />
+            <Typography variant='h6' sx={{ fontWeight: 600 }}>Extra Columns</Typography>
+            <Chip label={`${draft.length} column${draft.length !== 1 ? 's' : ''}`} size='small' sx={{ bgcolor: '#2a3a4a', color: '#90caf9', fontSize: 11 }} />
+          </Box>
+          <IconButton onClick={handleClose} size='small' sx={{ color: '#aaa' }}>
+            <Close />
+          </IconButton>
+        </DialogTitle>
+
+        <Divider sx={{ borderColor: '#3a3f45' }} />
+
+        <DialogContent sx={{ pt: 2, pb: 1 }}>
+          <Typography variant='caption' sx={{ color: '#666', display: 'block', mb: 2 }}>
+            Extra columns are full AG Grid column definitions added as new columns to the report grid.
+            They are prepended before the report's own columns.
+          </Typography>
+
+          <ValueFunctionsRefPanel />
+
+          {draft.map((col, idx) => (
+            <ColumnCard
+              key={idx}
+              col={col}
+              index={idx}
+              expanded={expandedIdx === idx}
+              onToggle={() => setExpanded(expandedIdx === idx ? null : idx)}
+              onChange={updated => handleChange(idx, updated)}
+              onRemove={() => handleRemove(idx)}
+            />
+          ))}
+
+          <Button
+            startIcon={<Add />}
+            onClick={handleAdd}
+            size='small'
+            fullWidth
+            sx={{
+              mt: 1, borderStyle: 'dashed', border: '1px dashed #3a3f45',
+              color: '#90caf9', borderRadius: 1.5, py: 1,
+              '&:hover': { bgcolor: '#1a2a3a', borderColor: '#90caf9' }
+            }}
+          >
+            Add Extra Column
+          </Button>
+        </DialogContent>
+
+        <Divider sx={{ borderColor: '#3a3f45' }} />
+
+        <DialogActions sx={{ px: 3, py: 1.5, gap: 1 }}>
+          <Button onClick={handleClose} sx={{ color: '#aaa' }}>Cancel</Button>
+          <Button onClick={handleSave} variant='contained' color='primary'>
+            Save ({draft.filter(c => c.headerName || c.field).length} columns)
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}