robobyte-front-builder 1.0.17 → 1.0.21

package/src/views/genericTable/ColumnConfiguratorDialog.js

@@ -0,0 +1,771 @@
+import React, {useState, useRef} from 'react'
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Box,
+  Typography,
+  TextField,
+  IconButton,
+  List,
+  ListItem,
+  Paper,
+  Divider,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Alert,
+  Autocomplete,
+  Checkbox,
+  FormControlLabel
+} from '@mui/material'
+import {Add, Delete, ContentCopy, ExpandMore, Edit} from '@mui/icons-material'
+import dynamic from 'next/dynamic'
+import { HelpPopover } from 'views/builder/inspector/fields/FunctionHelpPopover'
+
+const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {ssr: false})
+
+// Common AG Grid cell renderers
+const CELL_RENDERERS = [
+  'agCheckboxCellRenderer',
+  'agGroupCellRenderer',
+  'agAnimateShowChangeCellRenderer',
+  'agAnimateSlideCellRenderer',
+  'agLoadingCellRenderer',
+  'agSkeletonCellRenderer',
+  'agSparklineCellRenderer'
+]
+
+// Common AG Grid cell editors
+const CELL_EDITORS = [
+  'agTextCellEditor',
+  'agSelectCellEditor',
+  'agRichSelectCellEditor',
+  'agLargeTextCellEditor',
+  'agNumberCellEditor',
+  'agDateCellEditor',
+  'agDateStringCellEditor',
+  'agCheckboxCellEditor',
+  'MultiSelectEditorWrapper'
+]
+
+const ColumnConfiguratorDialog = ({open, onClose, onResult}) => {
+  const [extraCols, setExtraCols] = useState([])
+  const [columnsConfig, setColumnsConfig] = useState([])
+  const [editingExtraColIndex, setEditingExtraColIndex] = useState(null)
+  const [editingColumnConfigIndex, setEditingColumnConfigIndex] = useState(null)
+  const [newExtraCol, setNewExtraCol] = useState({
+    headerName: '',
+    field: '',
+    editable: true,
+    cellRenderer: '',
+    cellEditor: '',
+    cellEditorParams: '',
+    valueSetter: '',
+    valueGetter: '',
+    additionalParams: ''
+  })
+  const [newColumnConfig, setNewColumnConfig] = useState({
+    field: '',
+    editable: false,
+    cellRenderer: '',
+    cellEditor: '',
+    cellEditorParams: '',
+    valueSetter: '',
+    valueGetter: '',
+    additionalParams: ''
+  })
+
+  const handleAddExtraCol = () => {
+    if (!newExtraCol.headerName || !newExtraCol.field) {
+      return
+    }
+
+    if (editingExtraColIndex !== null) {
+      // Update existing
+      const updated = [...extraCols]
+      updated[editingExtraColIndex] = {...newExtraCol}
+      setExtraCols(updated)
+      setEditingExtraColIndex(null)
+    } else {
+      // Add new
+      setExtraCols([...extraCols, {...newExtraCol}])
+    }
+
+    setNewExtraCol({
+      headerName: '',
+      field: '',
+      editable: true,
+      cellRenderer: '',
+      cellEditor: '',
+      cellEditorParams: '',
+      valueSetter: '',
+      valueGetter: '',
+      additionalParams: ''
+    })
+  }
+
+  const handleEditExtraCol = (index) => {
+    setNewExtraCol({...extraCols[index]})
+    setEditingExtraColIndex(index)
+  }
+
+  const handleCancelEditExtraCol = () => {
+    setNewExtraCol({
+      headerName: '',
+      field: '',
+      editable: true,
+      cellRenderer: '',
+      cellEditor: '',
+      cellEditorParams: '',
+      valueSetter: '',
+      valueGetter: '',
+      additionalParams: ''
+    })
+    setEditingExtraColIndex(null)
+  }
+
+  const handleRemoveExtraCol = (index) => {
+    setExtraCols(extraCols.filter((_, i) => i !== index))
+    if (editingExtraColIndex === index) {
+      handleCancelEditExtraCol()
+    }
+  }
+
+  const handleAddColumnConfig = () => {
+    if (!newColumnConfig.field) {
+      return
+    }
+
+    if (editingColumnConfigIndex !== null) {
+      // Update existing
+      const updated = [...columnsConfig]
+      updated[editingColumnConfigIndex] = {...newColumnConfig}
+      setColumnsConfig(updated)
+      setEditingColumnConfigIndex(null)
+    } else {
+      // Add new
+      setColumnsConfig([...columnsConfig, {...newColumnConfig}])
+    }
+
+    setNewColumnConfig({
+      field: '',
+      editable: false,
+      cellRenderer: '',
+      cellEditor: '',
+      cellEditorParams: '',
+      valueSetter: '',
+      valueGetter: '',
+      additionalParams: ''
+    })
+  }
+
+  const handleEditColumnConfig = (index) => {
+    setNewColumnConfig({...columnsConfig[index]})
+    setEditingColumnConfigIndex(index)
+  }
+
+  const handleCancelEditColumnConfig = () => {
+    setNewColumnConfig({
+      field: '',
+      editable: false,
+      cellRenderer: '',
+      cellEditor: '',
+      cellEditorParams: '',
+      valueSetter: '',
+      valueGetter: '',
+      additionalParams: ''
+    })
+    setEditingColumnConfigIndex(null)
+  }
+
+  const handleRemoveColumnConfig = (index) => {
+    setColumnsConfig(columnsConfig.filter((_, i) => i !== index))
+    if (editingColumnConfigIndex === index) {
+      handleCancelEditColumnConfig()
+    }
+  }
+
+  const buildResult = () => {
+    const processedExtraCols = extraCols.map(col => {
+      console.log('Processing extraCol:', col.field, 'additionalParams:', col.additionalParams)
+
+      const colDef = {
+        headerName: col.headerName,
+        field: col.field,
+        editable: col.editable
+      }
+      if (col.cellRenderer) colDef.cellRenderer = col.cellRenderer
+      if (col.cellEditor) colDef.cellEditor = col.cellEditor
+      if (col.cellEditorParams) colDef.cellEditorParams = col.cellEditorParams
+      if (col.valueSetter) colDef.valueSetter = col.valueSetter
+      if (col.valueGetter) colDef.valueGetter = col.valueGetter
+
+      // Parse and merge additional params
+      if (col.additionalParams && col.additionalParams.trim()) {
+        console.log('Attempting to parse:', `{${col.additionalParams}}`)
+        try {
+          const additionalObj = JSON.parse(`{${col.additionalParams}}`)
+          console.log('Parsed successfully:', additionalObj)
+          Object.assign(colDef, additionalObj)
+        } catch (e) {
+          console.error('Failed to parse additionalParams for extraCol:', col.additionalParams, e)
+        }
+      } else {
+        console.log('additionalParams is empty or whitespace')
+      }
+
+      return colDef
+    })
+
+    const processedColumnsConfig = columnsConfig.map(config => {
+      const configObj = {
+        editable: config.editable,
+        ...(config.valueSetter && {valueSetter: config.valueSetter}),
+        ...(config.valueGetter && {valueGetter: config.valueGetter})
+      }
+
+      if (config.cellRenderer) configObj.cellRenderer = config.cellRenderer
+      if (config.cellEditor) configObj.cellEditor = config.cellEditor
+      if (config.cellEditorParams) configObj.cellEditorParams = config.cellEditorParams
+
+      // Parse and merge additional params
+      if (config.additionalParams && config.additionalParams.trim()) {
+        try {
+          const additionalObj = JSON.parse(`{${config.additionalParams}}`)
+          Object.assign(configObj, additionalObj)
+        } catch (e) {
+          console.warn('Failed to parse additionalParams for columnConfig:', config.additionalParams, e)
+        }
+      }
+
+      return {
+        field: config.field,
+        config: configObj
+      }
+    })
+
+    return {
+      extraCols: processedExtraCols,
+      columnsConfig: processedColumnsConfig
+    }
+  }
+
+  const handleGenerate = () => {
+    const result = buildResult()
+    onResult(result)
+  }
+
+  const handleCopyJSON = () => {
+    const result = buildResult()
+    navigator.clipboard.writeText(JSON.stringify(result, null, 2))
+  }
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth>
+      <DialogTitle>
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Typography variant="h6">Column Configurator</Typography>
+          <IconButton onClick={handleCopyJSON} size="small" title="Copy JSON to clipboard">
+            <ContentCopy/>
+          </IconButton>
+        </Box>
+      </DialogTitle>
+      <DialogContent>
+        <Box sx={{display: 'flex', flexDirection: 'column', gap: 3}}>
+          {/* Extra Columns Section */}
+          <Accordion defaultExpanded>
+            <AccordionSummary expandIcon={<ExpandMore/>}>
+              <Typography variant="h6">Extra Columns ({extraCols.length})</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Box sx={{display: 'flex', flexDirection: 'column', gap: 2}}>
+                <Alert severity="info" sx={{mb: 2}}>
+                  Extra columns are additional columns that don't exist in the report data. They can be used for
+                  custom fields with editable values.
+                </Alert>
+
+                <Paper sx={{p: 2, bgcolor: 'background.default'}}>
+                  <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2}}>
+                    <Typography variant="subtitle2">
+                      {editingExtraColIndex !== null ? 'Edit Extra Column' : 'Add New Extra Column'}
+                    </Typography>
+                    {editingExtraColIndex !== null && (
+                      <Button size="small" onClick={handleCancelEditExtraCol}>
+                        Cancel Edit
+                      </Button>
+                    )}
+                  </Box>
+                  <Box sx={{display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'flex-start'}}>
+                    <TextField
+                      size="small"
+                      label="Header Name"
+                      value={newExtraCol.headerName}
+                      onChange={(e) => setNewExtraCol({...newExtraCol, headerName: e.target.value})}
+                      sx={{flex: 1, minWidth: 150}}
+                    />
+                    <TextField
+                      size="small"
+                      label="Field"
+                      value={newExtraCol.field}
+                      onChange={(e) => setNewExtraCol({...newExtraCol, field: e.target.value})}
+                      sx={{flex: 1, minWidth: 150}}
+                    />
+                    <FormControlLabel
+                      control={
+                        <Checkbox
+                          checked={newExtraCol.editable}
+                          onChange={(e) => setNewExtraCol({...newExtraCol, editable: e.target.checked})}
+                        />
+                      }
+                      label="Editable"
+                      sx={{minWidth: 100}}
+                    />
+                    <Autocomplete
+                      size="small"
+                      freeSolo
+                      options={CELL_RENDERERS}
+                      value={newExtraCol.cellRenderer}
+                      onChange={(e, newValue) => setNewExtraCol({...newExtraCol, cellRenderer: newValue || ''})}
+                      onInputChange={(e, newValue) => setNewExtraCol({...newExtraCol, cellRenderer: newValue || ''})}
+                      renderInput={(params) => (
+                        <TextField
+                          {...params}
+                          label="Cell Renderer"
+                          placeholder="agCheckboxCellRenderer"
+                        />
+                      )}
+                      sx={{flex: 1, minWidth: 200}}
+                    />
+                    <Autocomplete
+                      size="small"
+                      freeSolo
+                      options={CELL_EDITORS}
+                      value={newExtraCol.cellEditor}
+                      onChange={(e, newValue) => setNewExtraCol({...newExtraCol, cellEditor: newValue || ''})}
+                      onInputChange={(e, newValue) => setNewExtraCol({...newExtraCol, cellEditor: newValue || ''})}
+                      renderInput={(params) => (
+                        <TextField
+                          {...params}
+                          label="Cell Editor"
+                          placeholder="agCheckboxCellEditor"
+                        />
+                      )}
+                      sx={{flex: 1, minWidth: 200}}
+                    />
+                  </Box>
+                  {newExtraCol.cellEditor === 'MultiSelectEditorWrapper' && (
+                    <Box sx={{mt: 2}}>
+                      <Alert severity="warning" sx={{mb: 2}}>
+                        <Typography variant="caption">
+                          MultiSelectEditorWrapper requires cellEditorParams with: fieldName, filterFields, uniqueId,
+                          value, isSingle, asyncFetchOptions
+                        </Typography>
+                      </Alert>
+                      <Box sx={{display: 'flex', alignItems: 'center', gap: 0.5, mb: 1}}>
+                        <Typography variant="caption">Cell Editor Params (Function or Object)</Typography>
+                        <HelpPopover type='cellEditorParams' />
+                      </Box>
+                      <Box sx={{border: '1px solid #ddd', borderRadius: 1}}>
+                        <MonacoEditor
+                          height="200px"
+                          language="javascript"
+                          theme="vs-dark"
+                          value={newExtraCol.cellEditorParams}
+                          onChange={(value) => setNewExtraCol({...newExtraCol, cellEditorParams: value || ''})}
+                          options={{
+                            minimap: {enabled: false},
+                            fontSize: 12,
+                            lineNumbers: 'on',
+                            scrollBeyondLastLine: false,
+                            automaticLayout: true
+                          }}
+                        />
+                      </Box>
+                    </Box>
+                  )}
+                  <Box sx={{mt: 2}}>
+                    <Box sx={{display: 'flex', alignItems: 'center', gap: 0.5, mb: 1}}>
+                      <Typography variant="caption">Value Setter (optional)</Typography>
+                      <HelpPopover type='valueSetter' />
+                    </Box>
+                    <Box sx={{border: '1px solid #ddd', borderRadius: 1}}>
+                      <MonacoEditor
+                        height="120px"
+                        language="javascript"
+                        theme="vs-dark"
+                        value={newExtraCol.valueSetter}
+                        onChange={(value) => setNewExtraCol({...newExtraCol, valueSetter: value || ''})}
+                        options={{
+                          minimap: {enabled: false},
+                          fontSize: 12,
+                          lineNumbers: 'on',
+                          scrollBeyondLastLine: false,
+                          automaticLayout: true
+                        }}
+                      />
+                    </Box>
+                  </Box>
+                  <Box sx={{mt: 2}}>
+                    <Box sx={{display: 'flex', alignItems: 'center', gap: 0.5, mb: 1}}>
+                      <Typography variant="caption">Value Getter (optional)</Typography>
+                      <HelpPopover type='valueGetter' />
+                    </Box>
+                    <Box sx={{border: '1px solid #ddd', borderRadius: 1}}>
+                      <MonacoEditor
+                        height="120px"
+                        language="javascript"
+                        theme="vs-dark"
+                        value={newExtraCol.valueGetter}
+                        onChange={(value) => setNewExtraCol({...newExtraCol, valueGetter: value || ''})}
+                        options={{
+                          minimap: {enabled: false},
+                          fontSize: 12,
+                          lineNumbers: 'on',
+                          scrollBeyondLastLine: false,
+                          automaticLayout: true
+                        }}
+                      />
+                    </Box>
+                  </Box>
+                  <Box sx={{mt: 2}}>
+                    <Box sx={{display: 'flex', alignItems: 'center', gap: 0.5, mb: 1}}>
+                      <Typography variant="caption">Additional Column Parameters (valueFormatter, width, etc.)</Typography>
+                      <HelpPopover type='columnParams' />
+                    </Box>
+                    <Alert severity="info" sx={{mb: 1, fontSize: '0.75rem'}}>
+                      Add any AG Grid column properties as key-value pairs (without outer braces).
+                      Example: valueFormatter: (p) =&gt; p.value?.name, width: 200
+                    </Alert>
+                    <Box sx={{border: '1px solid #ddd', borderRadius: 1}}>
+                      <MonacoEditor
+                        height="150px"
+                        language="javascript"
+                        theme="vs-dark"
+                        value={newExtraCol.additionalParams}
+                        onChange={(value) => setNewExtraCol({...newExtraCol, additionalParams: value || ''})}
+                        options={{
+                          minimap: {enabled: false},
+                          fontSize: 12,
+                          lineNumbers: 'on',
+                          scrollBeyondLastLine: false,
+                          automaticLayout: true
+                        }}
+                      />
+                    </Box>
+                  </Box>
+                  <Box sx={{display: 'flex', justifyContent: 'flex-end', mt: 2}}>
+                    <Button
+                      variant="contained"
+                      startIcon={editingExtraColIndex !== null ? <Edit/> : <Add/>}
+                      onClick={handleAddExtraCol}
+                      disabled={!newExtraCol.headerName || !newExtraCol.field}
+                    >
+                      {editingExtraColIndex !== null ? 'Update' : 'Add'}
+                    </Button>
+                  </Box>
+                </Paper>
+
+                <List sx={{bgcolor: 'background.paper', borderRadius: 1}}>
+                  {extraCols.map((col, index) => (
+                    <ListItem
+                      key={index}
+                      secondaryAction={
+                        <Box>
+                          <IconButton onClick={() => handleEditExtraCol(index)}>
+                            <Edit/>
+                          </IconButton>
+                          <IconButton edge="end" onClick={() => handleRemoveExtraCol(index)}>
+                            <Delete/>
+                          </IconButton>
+                        </Box>
+                      }
+                    >
+                      <Box sx={{width: '100%'}}>
+                        <Typography variant="body1" fontWeight="bold">
+                          {col.headerName} ({col.field})
+                        </Typography>
+                        <Typography variant="caption" color="text.secondary" component="div">
+                          Editable: {col.editable ? 'Yes' : 'No'} | Renderer: {col.cellRenderer || 'default'} | Editor: {col.cellEditor || 'default'}
+                          {col.cellEditorParams && <> | Has cellEditorParams</>}
+                          {col.valueSetter && <> | Has valueSetter</>}
+                          {col.valueGetter && <> | Has valueGetter</>}
+                          {col.additionalParams && <> | Has additionalParams</>}
+                        </Typography>
+                      </Box>
+                    </ListItem>
+                  ))}
+                  {extraCols.length === 0 && (
+                    <ListItem>
+                      <Typography variant="body2" color="text.secondary">
+                        No extra columns defined yet
+                      </Typography>
+                    </ListItem>
+                  )}
+                </List>
+              </Box>
+            </AccordionDetails>
+          </Accordion>
+
+          {/* Column Config Section */}
+          <Accordion defaultExpanded>
+            <AccordionSummary expandIcon={<ExpandMore/>}>
+              <Typography variant="h6">Column Configurations ({columnsConfig.length})</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Box sx={{display: 'flex', flexDirection: 'column', gap: 2}}>
+                <Alert severity="info" sx={{mb: 2}}>
+                  Column configurations modify existing columns in the report. Use valueSetter and valueGetter to
+                  manage custom values.
+                </Alert>
+
+                <Paper sx={{p: 2, bgcolor: 'background.default'}}>
+                  <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2}}>
+                    <Typography variant="subtitle2">
+                      {editingColumnConfigIndex !== null ? 'Edit Column Config' : 'Add New Column Config'}
+                    </Typography>
+                    {editingColumnConfigIndex !== null && (
+                      <Button size="small" onClick={handleCancelEditColumnConfig}>
+                        Cancel Edit
+                      </Button>
+                    )}
+                  </Box>
+                  <Box sx={{display: 'flex', flexDirection: 'column', gap: 2}}>
+                    <TextField
+                      size="small"
+                      label="Field Name"
+                      value={newColumnConfig.field}
+                      onChange={(e) => setNewColumnConfig({...newColumnConfig, field: e.target.value})}
+                      fullWidth
+                    />
+                    <FormControlLabel
+                      control={
+                        <Checkbox
+                          checked={newColumnConfig.editable}
+                          onChange={(e) => setNewColumnConfig({...newColumnConfig, editable: e.target.checked})}
+                        />
+                      }
+                      label="Editable"
+                    />
+                    <Box sx={{display: 'flex', gap: 2}}>
+                      <Autocomplete
+                        size="small"
+                        freeSolo
+                        options={CELL_RENDERERS}
+                        value={newColumnConfig.cellRenderer}
+                        onChange={(e, newValue) => setNewColumnConfig({...newColumnConfig, cellRenderer: newValue || ''})}
+                        onInputChange={(e, newValue) => setNewColumnConfig({...newColumnConfig, cellRenderer: newValue || ''})}
+                        renderInput={(params) => (
+                          <TextField
+                            {...params}
+                            label="Cell Renderer"
+                            placeholder="agCheckboxCellRenderer"
+                          />
+                        )}
+                        sx={{flex: 1}}
+                      />
+                      <Autocomplete
+                        size="small"
+                        freeSolo
+                        options={CELL_EDITORS}
+                        value={newColumnConfig.cellEditor}
+                        onChange={(e, newValue) => setNewColumnConfig({...newColumnConfig, cellEditor: newValue || ''})}
+                        onInputChange={(e, newValue) => setNewColumnConfig({...newColumnConfig, cellEditor: newValue || ''})}
+                        renderInput={(params) => (
+                          <TextField
+                            {...params}
+                            label="Cell Editor"
+                            placeholder="agCheckboxCellEditor"
+                          />
+                        )}
+                        sx={{flex: 1}}
+                      />
+                    </Box>
+                    {newColumnConfig.cellEditor === 'MultiSelectEditorWrapper' && (
+                      <Box>
+                        <Alert severity="warning" sx={{mb: 1}}>
+                          <Typography variant="caption">
+                            MultiSelectEditorWrapper requires cellEditorParams with: fieldName, filterFields, uniqueId,
+                            value, isSingle, asyncFetchOptions
+                          </Typography>
+                        </Alert>
+                        <Box sx={{display: 'flex', alignItems: 'center', gap: 0.5, mb: 1}}>
+                          <Typography variant="caption">Cell Editor Params (Function or Object)</Typography>
+                          <HelpPopover type='cellEditorParams' />
+                        </Box>
+                        <Box sx={{border: '1px solid #ddd', borderRadius: 1}}>
+                          <MonacoEditor
+                            height="150px"
+                            language="javascript"
+                            theme="vs-dark"
+                            value={newColumnConfig.cellEditorParams}
+                            onChange={(value) => setNewColumnConfig({...newColumnConfig, cellEditorParams: value || ''})}
+                            options={{
+                              minimap: {enabled: false},
+                              fontSize: 12,
+                              lineNumbers: 'on',
+                              scrollBeyondLastLine: false,
+                              automaticLayout: true
+                            }}
+                          />
+                        </Box>
+                      </Box>
+                    )}
+                    <Box>
+                      <Box sx={{display: 'flex', alignItems: 'center', gap: 0.5, mb: 1}}>
+                        <Typography variant="caption">Value Setter (optional)</Typography>
+                        <HelpPopover type='valueSetter' />
+                      </Box>
+                      <Box sx={{border: '1px solid #ddd', borderRadius: 1}}>
+                        <MonacoEditor
+                          height="120px"
+                          language="javascript"
+                          theme="vs-dark"
+                          value={newColumnConfig.valueSetter}
+                          onChange={(value) => setNewColumnConfig({...newColumnConfig, valueSetter: value || ''})}
+                          options={{
+                            minimap: {enabled: false},
+                            fontSize: 12,
+                            lineNumbers: 'on',
+                            scrollBeyondLastLine: false,
+                            automaticLayout: true
+                          }}
+                        />
+                      </Box>
+                    </Box>
+                    <Box>
+                      <Box sx={{display: 'flex', alignItems: 'center', gap: 0.5, mb: 1}}>
+                        <Typography variant="caption">Value Getter (optional)</Typography>
+                        <HelpPopover type='valueGetter' />
+                      </Box>
+                      <Box sx={{border: '1px solid #ddd', borderRadius: 1}}>
+                        <MonacoEditor
+                          height="120px"
+                          language="javascript"
+                          theme="vs-dark"
+                          value={newColumnConfig.valueGetter}
+                          onChange={(value) => setNewColumnConfig({...newColumnConfig, valueGetter: value || ''})}
+                          options={{
+                            minimap: {enabled: false},
+                            fontSize: 12,
+                            lineNumbers: 'on',
+                            scrollBeyondLastLine: false,
+                            automaticLayout: true
+                          }}
+                        />
+                      </Box>
+                    </Box>
+                    <Box>
+                      <Box sx={{display: 'flex', alignItems: 'center', gap: 0.5, mb: 1}}>
+                        <Typography variant="caption">Additional Column Parameters</Typography>
+                        <HelpPopover type='columnParams' />
+                      </Box>
+                      <Alert severity="info" sx={{mb: 1, fontSize: '0.75rem'}}>
+                        Add any AG Grid column config properties as key-value pairs (without outer braces).
+                        Example: valueFormatter: (p) =&gt; p.value?.name, width: 200
+                      </Alert>
+                      <Box sx={{border: '1px solid #ddd', borderRadius: 1}}>
+                        <MonacoEditor
+                          height="120px"
+                          language="javascript"
+                          theme="vs-dark"
+                          value={newColumnConfig.additionalParams}
+                          onChange={(value) => setNewColumnConfig({...newColumnConfig, additionalParams: value || ''})}
+                          options={{
+                            minimap: {enabled: false},
+                            fontSize: 12,
+                            lineNumbers: 'on',
+                            scrollBeyondLastLine: false,
+                            automaticLayout: true
+                          }}
+                        />
+                      </Box>
+                    </Box>
+                    <Button
+                      variant="contained"
+                      startIcon={editingColumnConfigIndex !== null ? <Edit/> : <Add/>}
+                      onClick={handleAddColumnConfig}
+                      disabled={!newColumnConfig.field}
+                      sx={{alignSelf: 'flex-start'}}
+                    >
+                      {editingColumnConfigIndex !== null ? 'Update' : 'Add'}
+                    </Button>
+                  </Box>
+                </Paper>
+
+                <List sx={{bgcolor: 'background.paper', borderRadius: 1}}>
+                  {columnsConfig.map((config, index) => (
+                    <ListItem
+                      key={index}
+                      secondaryAction={
+                        <Box>
+                          <IconButton onClick={() => handleEditColumnConfig(index)}>
+                            <Edit/>
+                          </IconButton>
+                          <IconButton edge="end" onClick={() => handleRemoveColumnConfig(index)}>
+                            <Delete/>
+                          </IconButton>
+                        </Box>
+                      }
+                    >
+                      <Box sx={{width: '100%'}}>
+                        <Typography variant="body1" fontWeight="bold">
+                          {config.field}
+                        </Typography>
+                        <Typography variant="caption" color="text.secondary" component="div">
+                          Editable: {config.editable ? 'Yes' : 'No'}
+                          {config.cellRenderer && <> | Renderer: {config.cellRenderer}</>}
+                          {config.cellEditor && <> | Editor: {config.cellEditor}</>}
+                          {config.cellEditorParams && <> | Has cellEditorParams</>}
+                          {config.valueSetter && <> | Has valueSetter</>}
+                          {config.valueGetter && <> | Has valueGetter</>}
+                          {config.additionalParams && <> | Has additionalParams</>}
+                        </Typography>
+                      </Box>
+                    </ListItem>
+                  ))}
+                  {columnsConfig.length === 0 && (
+                    <ListItem>
+                      <Typography variant="body2" color="text.secondary">
+                        No column configurations defined yet
+                      </Typography>
+                    </ListItem>
+                  )}
+                </List>
+              </Box>
+            </AccordionDetails>
+          </Accordion>
+
+          {/* JSON Preview */}
+          <Paper sx={{p: 2, bgcolor: 'background.default'}}>
+            <Typography variant="subtitle2" sx={{mb: 2}}>JSON Preview</Typography>
+            <Box
+              component="pre"
+              sx={{
+                p: 2,
+                bgcolor: 'grey.900',
+                color: 'grey.100',
+                borderRadius: 1,
+                overflow: 'auto',
+                maxHeight: 300,
+                fontSize: '0.875rem'
+              }}
+            >
+              {JSON.stringify(buildResult(), null, 2)}
+            </Box>
+          </Paper>
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Close</Button>
+        <Button variant="contained" onClick={handleGenerate}>
+          Generate Result
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default ColumnConfiguratorDialog