robobyte-front-builder 1.0.19 → 1.0.21

package/src/views/builder/JSEditor.js

@@ -1,11 +1,10 @@
-import { useEffect, useRef, useState } from 'react'
-import { Box, Tabs, Tab, Button, IconButton, Typography, TextField } from '@mui/material'
+import { useEffect, useRef, useState, useCallback } from 'react'
+import { Box, Tabs, Tab, Button, IconButton, Tooltip, Typography, TextField } from '@mui/material'
 import { CodeBraces } from 'mdi-material-ui'
+import { FullscreenOutlined, FullscreenExitOutlined } from '@mui/icons-material'
 import Editor from '@monaco-editor/react'
+import { HelpPopover } from 'views/builder/inspector/fields/FunctionHelpPopover'
 
-/**
- * Monaco editor options
- */
 const editorOptions = {
   minimap: { enabled: false },
   fontFamily: "Menlo, Monaco, 'Courier New', monospace",
@@ -13,112 +12,78 @@ const editorOptions = {
   lineNumbers: 'on',
   wordWrap: 'on',
   renderWhitespace: 'selection',
-  theme: 'vs-dark',
   scrollBeyondLastLine: false,
   automaticLayout: true
-  // formatOnPaste: true,
-  // formatOnType: true,
 }
 
-/**
- * Fixed function shell
- */
-const HEADER_LINES = 4
-
-const CALCULATION_TEMPLATE = `/**
- * @param {IFormData} form
- * @param {object} data
- * @return {Promise<boolean>}
- */
-async function Calculation (form, data) {
+const CALCULATION_TEMPLATE = `async function Calculation(form, data, setData, dataRef, reportRefs, openDialog, closeDialog, urlParams, page) {
 
 }
 `
 
 export default function JSEditor({ value, expression, mode, onChange }) {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen]               = useState(false)
+  const [fullscreen, setFullscreen]   = useState(false)
   const [currentMode, setCurrentMode] = useState(mode || (expression ? 'expression' : 'value'))
-  const [code, setCode] = useState(expression?.code || CALCULATION_TEMPLATE)
+  const [code, setCode]               = useState(expression?.code || CALCULATION_TEMPLATE)
   const [simpleValue, setSimpleValue] = useState(value ?? '')
 
   const editorRef = useRef(null)
 
+  // ── Open / close ────────────────────────────────────────────────────────────
+
   const handleOpen = () => {
-    setCurrentMode(mode || (expression ? 'expression' : 'value'))
+    const initialMode = mode || (expression ? 'expression' : 'value')
+    setCurrentMode(initialMode)
     setCode(expression?.code || CALCULATION_TEMPLATE)
-    setSimpleValue(value ?? '')
+    // Only use the value prop for simpleValue when actually in value mode —
+    // prevents expression code from leaking into the Simple value tab.
+    setSimpleValue(initialMode === 'value' ? (value ?? '') : '')
     setOpen(true)
   }
 
+  const handleClose = () => {
+    setOpen(false)
+    setFullscreen(false)
+  }
+
   useEffect(() => {
-    if (!open) {
-      setSimpleValue(value ?? '')
-    }
+    if (!open) setSimpleValue(value ?? '')
   }, [value, open])
 
-  /**
-   * Lock everything except function body
-   */
-  const handleEditorMount = (editor, monaco) => {
-    editorRef.current = editor
+  // ── Escape key closes fullscreen first, then the panel ──────────────────────
 
-    const model = editor.getModel()
-    if (!model) return
-
-    const totalLines = model.getLineCount()
-    const readOnlyRanges = [
-      // Header
-      new monaco.Range(1, 1, HEADER_LINES + 1, 1),
-      // Closing brace
-      new monaco.Range(totalLines, 1, totalLines, model.getLineLength(totalLines) + 1)
-    ]
-
-    editor.createDecorationsCollection(
-      readOnlyRanges.map(range => ({
-        range,
-        options: { isWholeLine: true, className: 'readonly' }
-      }))
-    )
-
-    editor.onDidChangeCursorPosition(e => {
-      const currentTotalLines = model.getLineCount()
-      const currentMaxEditableLine = Math.max(HEADER_LINES + 2, currentTotalLines - 1)
-
-      if (e.position.lineNumber <= HEADER_LINES + 1) {
-        editor.setPosition({ lineNumber: HEADER_LINES + 2, column: 3 })
-        return
-      }
-      if (e.position.lineNumber >= currentTotalLines) {
-        editor.setPosition({ lineNumber: currentMaxEditableLine, column: 3 })
+  useEffect(() => {
+    if (!open) return
+    const onKey = (e) => {
+      if (e.key !== 'Escape') return
+      if (fullscreen) {
+        setFullscreen(false)
+      } else {
+        handleClose()
       }
-    })
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [open, fullscreen])
 
+  // ── Editor mount ─────────────────────────────────────────────────────────────
+
+  const handleEditorMount = (editor) => {
+    editorRef.current = editor
     editor.focus()
-    editor.setPosition({ lineNumber: HEADER_LINES + 2, column: 3 })
   }
 
-  /**
-   * Only allow edits inside function body
-   */
-  const handleCodeChange = newCode => {
-    if (!newCode) return
+  // ── Code change ───────────────────────────────────────────────────────────────
 
-    const lines = newCode.split('\n')
-
-    if (!newCode.includes('function Calculation')) {
-      setCode(CALCULATION_TEMPLATE)
-      return
-    }
-
-    setCode(newCode)
+  const handleCodeChange = newCode => {
+    setCode(newCode ?? '')
   }
 
-  /**
-   * Save logic
-   */
+  // ── Save ─────────────────────────────────────────────────────────────────────
+
   const handleSave = () => {
     if (currentMode === 'expression') {
-      console.log(code)
       onChange?.({
         valueType: 'expression',
         type: 'expression',
@@ -129,17 +94,36 @@ export default function JSEditor({ value, expression, mode, onChange }) {
       onChange?.({
         valueType: 'value',
         type: 'value',
-        value: simpleValue
+        value: simpleValue,
+        expression: undefined,
       })
     }
-    setOpen(false)
+    handleClose()
   }
 
   const modeForIcon = mode || (expression ? 'expression' : 'value')
 
+  // ── Panel dimensions ──────────────────────────────────────────────────────────
+
+  const panelSx = fullscreen
+    ? {
+        position: 'fixed',
+        inset: 0,
+        height: '100vh',
+        borderTop: 'none',
+      }
+    : {
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: '40vh',
+        borderTop: '1px solid #333',
+      }
+
   return (
     <>
-      {/* Open editor */}
+      {/* Trigger button */}
       <IconButton size='small' color={modeForIcon === 'expression' ? 'success' : 'default'} onClick={handleOpen}>
         <CodeBraces />
       </IconButton>
@@ -147,30 +131,52 @@ export default function JSEditor({ value, expression, mode, onChange }) {
       {open && (
         <Box
           sx={{
-            position: 'fixed',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            height: '40vh',
+            ...panelSx,
             bgcolor: '#1e1e1e',
             zIndex: 1300,
-            borderTop: '1px solid #333',
             display: 'flex',
-            flexDirection: 'column'
+            flexDirection: 'column',
+            transition: 'height 0.18s ease, inset 0.18s ease',
           }}
         >
-          {/* Tabs */}
-          <Tabs value={currentMode === 'expression' ? 0 : 1} sx={{ bgcolor: '#252526', color: '#fff' }}>
-            <Tab label='Calculable value' onClick={() => setCurrentMode('expression')} />
-            <Tab label='Simple value' onClick={() => setCurrentMode('value')} />
-          </Tabs>
+          {/* ── Header bar: tabs + fullscreen toggle ── */}
+          <Box sx={{ display: 'flex', alignItems: 'center', bgcolor: '#252526', borderBottom: '1px solid #1a1a1a' }}>
+            <Tabs
+              value={currentMode === 'expression' ? 0 : 1}
+              sx={{
+                flex: 1,
+                minHeight: 38,
+                '.MuiTab-root': { minHeight: 38, py: 0, px: 1.5, fontSize: 12, fontFamily: 'monospace', color: '#666', textTransform: 'none' },
+                '.Mui-selected': { color: '#fff !important', fontWeight: 600 },
+                '.MuiTabs-indicator': { bgcolor: '#4ec9b0', height: 2 },
+              }}
+            >
+              <Tab label='Calculable value' onClick={() => setCurrentMode('expression')} />
+              <Tab label='Simple value'     onClick={() => setCurrentMode('value')} />
+            </Tabs>
+
+            {currentMode === 'expression' && <HelpPopover type='calculation' iconSx={{ color: '#5a7a9a', mr: 0.5 }} />}
+
+            <Tooltip title={fullscreen ? 'Exit fullscreen  (Esc)' : 'Fullscreen'} placement='left'>
+              <IconButton
+                size='small'
+                onClick={() => setFullscreen(f => !f)}
+                sx={{ color: '#aaa', mr: 0.5, '&:hover': { color: '#fff' } }}
+              >
+                {fullscreen
+                  ? <FullscreenExitOutlined fontSize='small' />
+                  : <FullscreenOutlined    fontSize='small' />}
+              </IconButton>
+            </Tooltip>
+          </Box>
 
-          {/* Content */}
+          {/* ── Content ── */}
           {currentMode === 'expression' ? (
             <Box sx={{ flex: 1, minHeight: 0 }}>
               <Editor
                 height='100%'
                 defaultLanguage='javascript'
+                theme='vs-dark'
                 value={code}
                 options={editorOptions}
                 onMount={handleEditorMount}
@@ -178,12 +184,12 @@ export default function JSEditor({ value, expression, mode, onChange }) {
               />
             </Box>
           ) : (
-            <Box sx={{ p: 2, color: '#fff' }}>
+            <Box sx={{ p: 2, color: '#fff', overflowY: 'auto', flex: 1 }}>
               <Typography variant='body2'>Simple Value Mode</Typography>
               <TextField
                 fullWidth
                 multiline
-                minRows={5}
+                minRows={fullscreen ? 20 : 5}
                 size='small'
                 value={simpleValue}
                 onChange={e => setSimpleValue(e.target.value)}
@@ -202,17 +208,9 @@ export default function JSEditor({ value, expression, mode, onChange }) {
             </Box>
           )}
 
-          {/* Footer */}
-          <Box
-            sx={{
-              p: 1,
-              display: 'flex',
-              gap: 1,
-              justifyContent: 'flex-end',
-              bgcolor: '#252526'
-            }}
-          >
-            <Button size='small' onClick={() => setOpen(false)}>
+          {/* ── Footer ── */}
+          <Box sx={{ p: 1, display: 'flex', gap: 1, justifyContent: 'flex-end', bgcolor: '#252526' }}>
+            <Button size='small' onClick={handleClose}>
               Close
             </Button>
             <Button size='small' variant='contained' onClick={handleSave}>

package/src/views/builder/inspector/Inspector.jsx

@@ -28,22 +28,19 @@ export default function Inspector() {
         variant="scrollable"
         scrollButtons="auto"
         sx={{
-          bgcolor: '#3a3f45',
+          bgcolor: 'background.paper',
+          borderBottom: '1px solid',
+          borderColor: 'divider',
           minHeight: 48,
           '& .MuiTab-root': {
-            color: 'rgba(255, 255, 255, 0.7)',
+            color: 'text.secondary',
             minHeight: 48,
             textTransform: 'none',
             fontSize: '0.875rem',
             fontWeight: 500,
-            '&.Mui-selected': {
-              color: '#fff'
-            }
+            '&.Mui-selected': { color: 'text.primary' },
           },
-          '& .MuiTabs-indicator': {
-            backgroundColor: '#9c27b0',
-            height: 3
-          }
+          '& .MuiTabs-indicator': { backgroundColor: 'primary.main', height: 3 },
         }}
       >
         <Tab label="Main" />

package/src/views/builder/inspector/Tabs/ComponentActionsTab.jsx

@@ -2,7 +2,7 @@ import { Box, Typography, TextField, MenuItem } from '@mui/material'
 import { useBuilder } from 'src/context/BuilderContext'
 import FieldWrapper from '../fields/FieldWrapper'
 import { getActionsFields } from '../definitions'
-import { findNode, updateNodeInTree } from 'services/builderHelper'
+import { findNodeAnywhere, updateNodeAnywhere } from 'services/builderHelper'
 import JSEditor from '../../JSEditor'
 
 /**
@@ -19,7 +19,7 @@ function normalizeActionField(field) {
 
 export default function ComponentActionsTab() {
   const { schema, selectedId, setSchema } = useBuilder()
-  const node = findNode(schema.root, selectedId)
+  const { node, location, dialogId } = findNodeAnywhere(schema, selectedId)
   if (!node) return null
 
   const actionFields = getActionsFields(node.type)
@@ -40,17 +40,11 @@ export default function ComponentActionsTab() {
   )
 
   const updateAction = (name, actionData) => {
-    setSchema(prev => ({
-      ...prev,
-      root: updateNodeInTree(prev.root, node.id, {
-        props: {
-          actions: {
-            ...actions,
-            [name]: actionData
-          }
-        }
-      })
-    }))
+    setSchema(prev =>
+      updateNodeAnywhere(prev, node.id, {
+        props: { actions: { ...actions, [name]: actionData } }
+      }, location, dialogId)
+    )
   }
 
   return (

package/src/views/builder/inspector/Tabs/MainTab.jsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import { useBuilder } from 'src/context/BuilderContext'
 import FieldWrapper from '../fields/FieldWrapper'
 import ExpressionEditor from '../fields/ExpressionEditor'
@@ -8,47 +8,98 @@ import TextEditor from '../fields/TextEditor'
 import OptionsEditor from '../fields/OptionsEditor'
 import TabsEditor from '../fields/TabsEditor'
 import ItemsEditor from '../fields/ItemsEditor'
+import ExtraColsEditor from '../fields/ExtraColsEditor'
+import ColumnsConfigEditor from '../fields/ColumnsConfigEditor'
+import ActionsConfigEditor from '../fields/ActionsConfigEditor'
+import ThresholdsEditor from '../fields/ThresholdsEditor'
+import SeriesEditorField from '../fields/SeriesEditorField'
+import DonutRingsEditorField from '../fields/DonutRingsEditorField'
+import ColorSchemaField from '../fields/ColorSchemaField'
+import ColumnFunctionEditor from '../fields/ColumnFunctionEditor'
+import IconEditor from '../fields/IconEditor'
+import ColumnMappingEditor from '../fields/ColumnMappingEditor'
+import TableColumnsEditor from '../fields/TableColumnsEditor'
+import MarkersEditorField from '../fields/MarkersEditorField'
+import KpiActionField from '../fields/KpiActionField'
 import { getMainFields } from '../definitions'
-import { findNode, updateNodeInTree } from 'services/builderHelper'
+import { findNodeAnywhere, updateNodeAnywhere } from 'services/builderHelper'
 
-/**
- * Ensure every field is an object:
- * { type: 'value' | 'expression', value?, expression? }
- */
 function normalizeField(field) {
   if (field && typeof field === 'object' && field.valueType) return field
-
-  return {
-    valueType: 'value',
-    value: field
-  }
+  return { valueType: 'value', value: field }
 }
 
 export default function MainTab() {
   const { schema, selectedId, setSchema } = useBuilder()
-  const node = findNode(schema.root, selectedId)
+
+  const { node, location, dialogId } = findNodeAnywhere(schema, selectedId)
   if (!node) return null
 
   const fields = getMainFields(node.type)
 
-  // 🔑 Normalize ALL main props
-  const main = Object.fromEntries(Object.entries(node.props?.main ?? {}).map(([k, v]) => [k, normalizeField(v)]))
+  const main = Object.fromEntries(
+    Object.entries(node.props?.main ?? {}).map(([k, v]) => [k, normalizeField(v)])
+  )
+
+  const actions = node.props?.actions ?? {}
+
   const updateField = (name, fieldState) => {
-    setSchema(prev => ({
-      ...prev,
-      root: updateNodeInTree(prev.root, node.id, {
-        props: {
-          main: {
-            ...main,
-            [name]: fieldState
-          }
-        }
-      })
-    }))
+    setSchema(prev =>
+      updateNodeAnywhere(prev, node.id, { props: { main: { ...main, [name]: fieldState } } }, location, dialogId)
+    )
+  }
+
+  // KPI action fields write to node.props.actions, not node.props.main
+  const updateAction = (name, actionValue) => {
+    const nextActions = { ...actions }
+    if (actionValue == null) {
+      delete nextActions[name]
+    } else {
+      nextActions[name] = actionValue
+    }
+    setSchema(prev =>
+      updateNodeAnywhere(prev, node.id, { props: { actions: nextActions } }, location, dialogId)
+    )
   }
   return (
     <Box p={2}>
       {fields.map(field => {
+        // ── Note / info block — no input, no FieldWrapper ─────────────────
+        if (field.type === 'note') {
+          return (
+            <Box key={field.name} sx={{
+              mb: 1.5, px: 1.25, py: 0.75,
+              bgcolor: 'action.hover',
+              borderLeft: '3px solid',
+              borderColor: 'info.main',
+              borderRadius: '0 4px 4px 0',
+            }}>
+              {field.label && (
+                <Typography variant='caption' sx={{ display: 'block', fontWeight: 600, mb: 0.25, color: 'info.main' }}>
+                  {field.label}
+                </Typography>
+              )}
+              <Typography variant='caption' sx={{ display: 'block', color: 'text.secondary', whiteSpace: 'pre-line' }}>
+                {field.text}
+              </Typography>
+            </Box>
+          )
+        }
+
+        // KPI action fields read from node.props.actions, not main
+        if (field.type === 'kpi-action') {
+          return (
+            <FieldWrapper key={field.name} label={field.label}>
+              <KpiActionField
+                label={field.label}
+                contextVars={field.context ?? []}
+                value={actions[field.name]}
+                onChange={payload => updateAction(field.name, payload)}
+              />
+            </FieldWrapper>
+          )
+        }
+
         const fieldValue = main[field.name] ?? { valueType: 'value', value: undefined }
         return (
           <FieldWrapper key={field.name} label={field.label}>
@@ -87,6 +138,73 @@ export default function MainTab() {
             {field.type === 'items-editor' && (
               <ItemsEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
             )}
+
+            {field.type === 'extra-cols-editor' && (
+              <ExtraColsEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'columns-config-editor' && (
+              <ColumnsConfigEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'thresholds-editor' && (
+              <ThresholdsEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'series-editor' && (
+              <SeriesEditorField field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'rings-editor' && (
+              <DonutRingsEditorField field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'markers-editor' && (
+              <MarkersEditorField field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'color-schema' && (
+              <ColorSchemaField field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'actions-config-editor' && (
+              <ActionsConfigEditor field={fieldValue} context={field.context} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'icon' && (
+              <IconEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'column-mapping-editor' && (
+              <ColumnMappingEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'table-columns-editor' && (
+              <TableColumnsEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'code' && (
+              <Box display='flex' alignItems='center' gap={1}>
+                <Typography
+                  noWrap
+                  sx={{
+                    flex: 1, fontSize: 11, fontFamily: 'monospace',
+                    color: fieldValue.value?.trim() ? '#aed581' : '#555',
+                    overflow: 'hidden', textOverflow: 'ellipsis',
+                  }}
+                >
+                  {fieldValue.value?.trim()
+                    ? fieldValue.value.trim().split('\n').find(l => l.trim() && !l.trim().startsWith('//') && !l.trim().startsWith('/*')) ?? '(code set)'
+                    : '(no code)'}
+                </Typography>
+                <ColumnFunctionEditor
+                  label={field.label}
+                  type={field.codeType || 'calculation'}
+                  value={fieldValue.value || ''}
+                  onChange={v => updateField(field.name, { valueType: 'value', value: v })}
+                />
+              </Box>
+            )}
           </FieldWrapper>
         )
       })}

package/src/views/builder/inspector/Tabs/RulesTab.jsx

@@ -6,43 +6,28 @@ import BooleanEditor from '../fields/BooleanEditor'
 import SelectEditor from '../fields/SelectEditor'
 import TextEditor from '../fields/TextEditor'
 import { getRulesFields } from '../definitions'
-import { findNode, updateNodeInTree } from 'services/builderHelper'
+import { findNodeAnywhere, updateNodeAnywhere } from 'services/builderHelper'
 
-/**
- * Ensure every field is an object:
- * { valueType: 'value' | 'expression', value?, expression? }
- */
 function normalizeField(field) {
   if (field && typeof field === 'object' && field.valueType) return field
-
-  return {
-    valueType: 'value',
-    value: field
-  }
+  return { valueType: 'value', value: field }
 }
 
 export default function RulesTab() {
   const { schema, selectedId, setSchema } = useBuilder()
-  const node = findNode(schema.root, selectedId)
+  const { node, location, dialogId } = findNodeAnywhere(schema, selectedId)
   if (!node) return null
 
   const fields = getRulesFields(node.type)
 
-  // 🔑 Normalize ALL rules props
-  const rules = Object.fromEntries(Object.entries(node.props?.rules ?? {}).map(([k, v]) => [k, normalizeField(v)]))
+  const rules = Object.fromEntries(
+    Object.entries(node.props?.rules ?? {}).map(([k, v]) => [k, normalizeField(v)])
+  )
 
   const updateField = (name, fieldState) => {
-    setSchema(prev => ({
-      ...prev,
-      root: updateNodeInTree(prev.root, node.id, {
-        props: {
-          rules: {
-            ...rules,
-            [name]: fieldState
-          }
-        }
-      })
-    }))
+    setSchema(prev =>
+      updateNodeAnywhere(prev, node.id, { props: { rules: { ...rules, [name]: fieldState } } }, location, dialogId)
+    )
   }
 
   return (