robobyte-front-builder 1.0.19 → 1.0.21

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

@@ -1,89 +1,83 @@
-import { useRef } from 'react'
+import { useRef, useEffect } from 'react'
 import dynamic from 'next/dynamic'
 import { Box, FormHelperText } from '@mui/material'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import FieldLabel from '../FieldLabel'
 import { resolveProps } from 'services/builderHelper/resolveProps'
+import { runFieldAction } from 'services/builderHelper/actionExecutor'
 
-// SunEditor requires the DOM and loads suneditor/src/plugins at require-time,
-// which is raw ESM with bare specifiers. Node.js 22's strict ESM resolver
-// cannot resolve those extensionless imports at SSR, causing a fatal error.
-// Dynamic import with ssr:false keeps the entire module out of the server bundle.
-const SunEditor = dynamic(
-  () => {
-    // Import the CSS alongside the component so it's only loaded client-side too.
-    // Using require() inside the factory avoids a separate async CSS chunk.
-    require('suneditor/dist/css/suneditor.min.css')
-    return import('suneditor-react')
-  },
-  { ssr: false }
-)
+const SunEditor = dynamic(() => import('suneditor-react'), { ssr: false })
+
+function useSunEditorCSS() {
+  useEffect(() => {
+    const id = 'suneditor-css'
+    if (document.getElementById(id)) return
+    const link = document.createElement('link')
+    link.id = id
+    link.rel = 'stylesheet'
+    link.href = 'https://cdn.jsdelivr.net/npm/suneditor@latest/dist/css/suneditor.min.css'
+    document.head.appendChild(link)
+  }, [])
+}
+
+const defaultButtons = [
+  ['undo', 'redo'],
+  ['font', 'fontSize', 'formatBlock'],
+  ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
+  ['fontColor', 'hiliteColor'],
+  ['removeFormat'],
+  ['outdent', 'indent'],
+  ['align', 'horizontalRule', 'list', 'table'],
+  ['link', 'image', 'video'],
+  ['fullScreen', 'showBlocks', 'codeView'],
+  ['preview', 'print'],
+]
 
 export default function RichTextRenderer({ node, viewerContext }) {
   const { data, form, updateFormValue, validationErrors } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const main = resolveProps(node, 'main', viewerContext)
   const editorRef = useRef(null)
+  useSunEditorCSS()
 
-  // Get component key
   const key = node.props?.main?.key?.value || node.props?.main?.key || node.id
-
-  // Get value from form state
   const value = form[key] || ''
+  const error = validationErrors?.[key]
 
-  // Get validation error
-  const error = validationErrors[key]
+  const { label, labelPosition, required, helperText } = main
 
   const handleChange = (content) => {
     updateFormValue(key, content)
+    runFieldAction(node, viewerContext, 'onChange', content)
   }
 
-  // Default toolbar buttons
-  const defaultButtons = [
-    ['undo', 'redo'],
-    ['font', 'fontSize', 'formatBlock'],
-    ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
-    ['fontColor', 'hiliteColor'],
-    ['removeFormat'],
-    ['outdent', 'indent'],
-    ['align', 'horizontalRule', 'list', 'table'],
-    ['link', 'image', 'video'],
-    ['fullScreen', 'showBlocks', 'codeView'],
-    ['preview', 'print']
-  ]
-
-  // Get toolbar configuration from props or use default
-  const toolbar = main.toolbar || defaultButtons
-
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <Box>
-        <SunEditor
-          ref={editorRef}
-          setContents={value}
-          onChange={handleChange}
-          setOptions={{
-            buttonList: toolbar,
-            height: main.height || '300px',
-            placeholder: main.placeholder || 'Enter text here...',
-            disabled: main.disabled,
-            mode: main.mode || 'classic',
-            resizingBar: main.resizingBar !== false,
-            showPathLabel: main.showPathLabel !== false,
-            charCounter: main.charCounter !== false,
-            maxCharCount: main.maxCharCount,
-            width: '100%'
-          }}
-        />
-        {error && (
-          <FormHelperText error sx={{ mt: 0.5, mx: 1.75 }}>
-            {error}
-          </FormHelperText>
-        )}
-        {!error && main.helperText && (
-          <FormHelperText sx={{ mt: 0.5, mx: 1.75 }}>
-            {main.helperText}
-          </FormHelperText>
-        )}
-      </Box>
+      <FieldLabel label={label} required={required} labelPosition={labelPosition} error={!!error}>
+        <Box>
+          <SunEditor
+            ref={editorRef}
+            setContents={value}
+            onChange={handleChange}
+            setOptions={{
+              buttonList: main.toolbar || defaultButtons,
+              height: main.height || '300px',
+              placeholder: main.placeholder || 'Enter text here...',
+              disabled: main.disabled,
+              mode: main.mode || 'classic',
+              resizingBar: main.resizingBar !== false,
+              showPathLabel: main.showPathLabel !== false,
+              charCounter: main.charCounter !== false,
+              maxCharCount: main.maxCharCount,
+              width: '100%',
+            }}
+          />
+          {(error || helperText) && (
+            <FormHelperText error={!!error} sx={{ mt: 0.5, mx: 1.75 }}>
+              {error || helperText}
+            </FormHelperText>
+          )}
+        </Box>
+      </FieldLabel>
     </ViewerComponentWrapper>
   )
 }

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

@@ -0,0 +1,308 @@
+import { useState, useRef, useCallback } from 'react'
+import {
+  Box, Button, IconButton, Popover, Typography, Divider,
+  CircularProgress, Tooltip,
+} from '@mui/material'
+import {
+  MoreVertOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  VisibilityOutlined,
+  OpenInNewOutlined,
+  ContentCopyOutlined,
+  DownloadOutlined,
+  PrintOutlined,
+  CheckOutlined,
+  CloseOutlined,
+  SendOutlined,
+  RefreshOutlined,
+  SettingsOutlined,
+  InfoOutlined,
+  WarningOutlined,
+  ArchiveOutlined,
+  RestoreOutlined,
+  LockOutlined,
+  LockOpenOutlined,
+  StarOutlined,
+  AddOutlined,
+  RemoveOutlined,
+} from '@mui/icons-material'
+import { executeJSCode } from 'services/builderHelper/jsExecutor'
+import {
+  makeNodeAwareHelpers,
+  THIS_NODE,
+} from 'views/genericTable/convertStringFunctions'
+import {
+  setUpdateRefValue,
+  setUpdateRefRow,
+  getUpdateRefValue,
+  hasUpdateRefValue,
+  removeUpdateRefByRowId,
+  clearUpdateRefRow,
+  clearAllUpdateRef,
+  cloneUpdateRefToOriginal,
+  restoreUpdateRefFromOriginal,
+} from 'views/genericTable/updateRefHelpers'
+
+// ── Icon registry ─────────────────────────────────────────────────────────────
+// Must stay in sync with ICON_OPTIONS in ActionsConfigEditor.jsx
+
+const ICON_MAP = {
+  EditOutlined,
+  DeleteOutlined,
+  VisibilityOutlined,
+  OpenInNewOutlined,
+  ContentCopyOutlined,
+  DownloadOutlined,
+  PrintOutlined,
+  CheckOutlined,
+  CloseOutlined,
+  SendOutlined,
+  RefreshOutlined,
+  SettingsOutlined,
+  InfoOutlined,
+  WarningOutlined,
+  ArchiveOutlined,
+  RestoreOutlined,
+  LockOutlined,
+  LockOpenOutlined,
+  StarOutlined,
+  AddOutlined,
+  RemoveOutlined,
+}
+
+function ResolvedIcon({ name, sx }) {
+  const Comp = name ? ICON_MAP[name] : null
+  if (!Comp) return null
+  return <Comp sx={{ fontSize: 16, ...sx }} />
+}
+
+// ── MUI color → sx helper ─────────────────────────────────────────────────────
+
+const COLOR_SX = {
+  primary:   { color: '#1976d2' },
+  secondary: { color: '#9c27b0' },
+  success:   { color: '#2e7d32' },
+  error:     { color: '#d32f2f' },
+  warning:   { color: '#ed6c02' },
+  info:      { color: '#0288d1' },
+  inherit:   {},
+}
+
+// ── Single action button ──────────────────────────────────────────────────────
+
+function ActionButton({ action, row, viewerContext, nodeName, onDone }) {
+  const [loading, setLoading]  = useState(false)
+  const [pending, setPending]  = useState(false)   // awaiting confirmation
+
+  const { data, form, setData, dataRef, reportRefs, openDialog, closeDialog,
+          pageData, pageSetData, pageDataRef, pageReportRefs } = viewerContext
+
+  const execute = useCallback(async () => {
+    if (!action.code) return
+    setLoading(true)
+    try {
+      // Build node-aware ref helpers scoped to this table's nodeName.
+      // reportRefs is passed as the live registry so cross-table targeting works.
+      const liveReportRefs = reportRefs ?? { current: {} }
+      const nodeHelpers = makeNodeAwareHelpers(liveReportRefs, nodeName)
+
+      await executeJSCode(action.code, {
+        form:    form    ?? {},
+        data:    data    ?? {},
+        setData: setData ?? (() => {}),
+        dataRef: dataRef?.current ?? {},
+        reportRefs: reportRefs?.current ?? {},
+        openDialog:  openDialog  ?? (() => {}),
+        closeDialog: closeDialog ?? (() => {}),
+        pageData,
+        pageSetData,
+        pageDataRef,
+        pageReportRefs,
+        extraVars: {
+          // ── Row data ────────────────────────────────────────────────────────
+          // Direct access to the AG Grid row object — all server-side field values.
+          rowData: row,
+
+          // ── Node-aware ref helpers ─────────────────────────────────────────
+          // setRefValue / getRefValue etc. with optional `node` arg to target
+          // a specific table by its builder node ID, or THIS_NODE for this table.
+          setRefValue:  nodeHelpers.setRefValue,
+          setRefRow:    nodeHelpers.setRefRow,
+          getRefValue:  nodeHelpers.getRefValue,
+          hasRefValue:  nodeHelpers.hasRefValue,
+          clearRefRow:  nodeHelpers.clearRefRow,
+          clearAllRef:  nodeHelpers.clearAllRef,
+          // getNodeRef(nodeId?) → returns the updateRef for nodeId (or this table)
+          getNodeRef:   nodeHelpers.getNodeRef,
+          // Sentinel — pass as `node` arg to target THIS table by nodeName
+          THIS_NODE,
+
+          // ── Low-level helpers ──────────────────────────────────────────────
+          // For advanced use; the node-aware wrappers above are preferred.
+          setUpdateRefValue,
+          setUpdateRefRow,
+          getUpdateRefValue,
+          hasUpdateRefValue,
+          removeUpdateRefByRowId,
+          clearUpdateRefRow,
+          clearAllUpdateRef,
+          cloneUpdateRefToOriginal,
+          restoreUpdateRefFromOriginal,
+
+          // ── Context ────────────────────────────────────────────────────────
+          reportRefs:  liveReportRefs,
+          nodeName,
+        },
+      })
+    } catch (e) {
+      console.error('[RowActionsCell] action error:', e)
+    } finally {
+      setLoading(false)
+      onDone?.()
+    }
+  }, [action, row, viewerContext, nodeName, onDone])
+
+  const handleClick = () => {
+    if (action.confirmation) {
+      setPending(true)
+    } else {
+      execute()
+    }
+  }
+
+  const colorSx = COLOR_SX[action.color] ?? {}
+
+  // ── Confirmation state ─────────────────────────────────────────────────────
+  if (pending) {
+    return (
+      <Box
+        sx={{
+          border: '1px solid #e0e0e0',
+          borderRadius: 1,
+          p: 1,
+          bgcolor: '#fff8f0',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 0.5,
+        }}
+      >
+        <Typography variant='caption' sx={{ color: '#555', fontWeight: 500 }}>
+          {action.confirmation}
+        </Typography>
+        <Box display='flex' gap={0.5}>
+          <Button
+            size='small'
+            variant='contained'
+            color={action.color === 'inherit' ? 'primary' : action.color}
+            onClick={() => { setPending(false); execute() }}
+            sx={{ fontSize: 11, py: 0.2 }}
+          >
+            Confirm
+          </Button>
+          <Button size='small' onClick={() => setPending(false)} sx={{ fontSize: 11, py: 0.2 }}>
+            Cancel
+          </Button>
+        </Box>
+      </Box>
+    )
+  }
+
+  // ── Normal button ──────────────────────────────────────────────────────────
+  return (
+    <Button
+      size='small'
+      variant={action.variant || 'text'}
+      disabled={!!action.disabled || loading}
+      onClick={handleClick}
+      startIcon={
+        loading
+          ? <CircularProgress size={12} />
+          : <ResolvedIcon name={action.icon} />
+      }
+      sx={{
+        justifyContent: 'flex-start',
+        textTransform: 'none',
+        fontSize: 13,
+        width: '100%',
+        ...colorSx,
+      }}
+    >
+      {action.label}
+    </Button>
+  )
+}
+
+// ── Main cell renderer ────────────────────────────────────────────────────────
+//
+// Rendered by AG Grid inside the Actions column.
+//
+// Props injected by ReportViewerRenderer via the `actions` closure:
+//   params        — AG Grid cell renderer params (params.data = row)
+//   actionsConfig — array of { label, color, variant, icon, code, confirmation }
+//   viewerContext — { data, form, setData, dataRef, reportRefs, openDialog, closeDialog, page* }
+
+export default function RowActionsCell({ params, actionsConfig, viewerContext, nodeName }) {
+  const anchorRef = useRef(null)
+  const [open, setOpen] = useState(false)
+
+  // Don't render in group rows
+  if (params?.node?.group) return null
+  if (!actionsConfig?.length) return null
+
+  const row = params?.data ?? {}
+
+  const visibleActions = actionsConfig.filter(a => a.label?.trim())
+
+  if (visibleActions.length === 0) return null
+
+  // If there is only one action and it has no label ambiguity, we could render
+  // it directly — but a consistent popover pattern is simpler and more scalable.
+
+  return (
+    <>
+      <Tooltip title='Actions'>
+        <IconButton
+          ref={anchorRef}
+          size='small'
+          onClick={() => setOpen(true)}
+          sx={{ color: 'text.secondary' }}
+        >
+          <MoreVertOutlined fontSize='small' />
+        </IconButton>
+      </Tooltip>
+
+      <Popover
+        open={open}
+        anchorEl={anchorRef.current}
+        onClose={() => setOpen(false)}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        PaperProps={{
+          sx: {
+            minWidth: 180,
+            maxWidth: 280,
+            p: 0.5,
+            boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
+            border: '1px solid #e0e0e0',
+          },
+        }}
+      >
+        {visibleActions.map((action, idx) => (
+          <Box key={idx}>
+            {idx > 0 && action.variant === 'contained' && (
+              <Divider sx={{ my: 0.5 }} />
+            )}
+            <ActionButton
+              action={action}
+              row={row}
+              viewerContext={viewerContext}
+              nodeName={nodeName}
+              onDone={() => setOpen(false)}
+            />
+          </Box>
+        ))}
+      </Popover>
+    </>
+  )
+}

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

@@ -2,88 +2,59 @@ import { useRef } from 'react'
 import SignatureCanvas from 'react-signature-canvas'
 import { Box, Button, FormHelperText } from '@mui/material'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import FieldLabel from '../FieldLabel'
 import { resolveProps } from 'services/builderHelper/resolveProps'
 
 export default function SignatureRenderer({ node, viewerContext }) {
   const { data, form, updateFormValue, validationErrors } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const main = resolveProps(node, 'main', viewerContext)
   const sigCanvas = useRef(null)
 
-  // Get component key
   const key = node.props?.main?.key?.value || node.props?.main?.key || node.id
+  const error = validationErrors?.[key]
 
-  // Get value from form state
-  const value = form[key] || ''
-
-  // Get validation error
-  const error = validationErrors[key]
+  const { label, labelPosition, required, helperText } = main
 
   const handleEnd = () => {
-    if (sigCanvas.current) {
-      const dataURL = sigCanvas.current.toDataURL('image/png')
-      updateFormValue(key, dataURL)
-    }
+    if (sigCanvas.current) updateFormValue(key, sigCanvas.current.toDataURL('image/png'))
   }
-
   const handleClear = () => {
-    if (sigCanvas.current) {
-      sigCanvas.current.clear()
-      updateFormValue(key, '')
-    }
+    if (sigCanvas.current) { sigCanvas.current.clear(); updateFormValue(key, '') }
   }
 
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <Box>
-        {main.label && (
-          <Box sx={{ mb: 1, fontSize: '0.875rem', color: 'text.secondary' }}>
-            {main.label}
-          </Box>
-        )}
-        <Box
-          sx={{
+      <FieldLabel label={label} required={required} labelPosition={labelPosition} error={!!error}>
+        <Box>
+          <Box sx={{
             border: error ? '1px solid #d32f2f' : '1px solid #ccc',
             borderRadius: 1,
             overflow: 'hidden',
-            backgroundColor: main.disabled ? '#f5f5f5' : '#fff'
-          }}
-        >
-          <SignatureCanvas
-            ref={sigCanvas}
-            canvasProps={{
-              width: main.width || 500,
-              height: main.height || 200,
-              className: 'signature-canvas'
-            }}
-            backgroundColor={main.backgroundColor || '#ffffff'}
-            penColor={main.penColor || '#000000'}
-            minWidth={main.minWidth || 0.5}
-            maxWidth={main.maxWidth || 2.5}
-            onEnd={handleEnd}
-            disabled={main.disabled}
-          />
-        </Box>
-        <Box sx={{ mt: 1, display: 'flex', gap: 1 }}>
-          <Button
-            size="small"
-            variant="outlined"
-            onClick={handleClear}
-            disabled={main.disabled}
-          >
-            Clear
-          </Button>
+            backgroundColor: main.disabled ? '#f5f5f5' : '#fff',
+          }}>
+            <SignatureCanvas
+              ref={sigCanvas}
+              canvasProps={{ width: main.width || 500, height: main.height || 200, className: 'signature-canvas' }}
+              backgroundColor={main.backgroundColor || '#ffffff'}
+              penColor={main.penColor || '#000000'}
+              minWidth={main.minWidth || 0.5}
+              maxWidth={main.maxWidth || 2.5}
+              onEnd={handleEnd}
+              disabled={main.disabled}
+            />
+          </Box>
+          <Box sx={{ mt: 1, display: 'flex', gap: 1 }}>
+            <Button size="small" variant="outlined" onClick={handleClear} disabled={main.disabled}>
+              Clear
+            </Button>
+          </Box>
+          {(error || helperText) && (
+            <FormHelperText error={!!error} sx={{ mt: 0.5, mx: 1.75 }}>
+              {error || helperText}
+            </FormHelperText>
+          )}
         </Box>
-        {error && (
-          <FormHelperText error sx={{ mt: 0.5, mx: 1.75 }}>
-            {error}
-          </FormHelperText>
-        )}
-        {!error && main.helperText && (
-          <FormHelperText sx={{ mt: 0.5, mx: 1.75 }}>
-            {main.helperText}
-          </FormHelperText>
-        )}
-      </Box>
+      </FieldLabel>
     </ViewerComponentWrapper>
   )
 }

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

@@ -0,0 +1,75 @@
+import { Box, Typography } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { evaluateThreshold, resolveMuiColor } from 'services/builderHelper/thresholdEngine'
+
+export default function StatusDotRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const { data } = viewerContext ?? {}
+
+  const {
+    valueKey,
+    label,
+    thresholds  = [],
+    pulse       = false,
+    size        = 10,
+    showLabel   = true,
+    labelPosition = 'right',   // 'right' | 'left' | 'above' | 'below'
+    align       = 'left',
+  } = main
+
+  const rawValue = resolveValue(valueKey, data)
+  const rule     = evaluateThreshold(rawValue ?? 0, thresholds)
+  const palette  = resolveMuiColor(rule?.color ?? 'default')
+  const dotColor = palette.color === 'inherit' ? '#9e9e9e' : palette.color
+  const finalLabel = rule?.label || label || (rawValue != null ? String(rawValue) : null)
+  const dotSz = Number(size) || 10
+
+  const dotEl = (
+    <Box sx={{ position: 'relative', width: dotSz, height: dotSz, flexShrink: 0 }}>
+      {pulse && (
+        <Box sx={{
+          position: 'absolute', inset: -dotSz * 0.4,
+          borderRadius: '50%', bgcolor: dotColor, opacity: 0.2,
+          animation: 'rbbPulse 2s ease-out infinite',
+          '@keyframes rbbPulse': {
+            '0%':   { transform: 'scale(1)',   opacity: 0.3 },
+            '70%':  { transform: 'scale(1.8)', opacity: 0 },
+            '100%': { transform: 'scale(1.8)', opacity: 0 },
+          },
+        }} />
+      )}
+      <Box sx={{
+        width: dotSz, height: dotSz, borderRadius: '50%', bgcolor: dotColor,
+        boxShadow: `0 0 0 ${dotSz * 0.3}px ${dotColor}22`,
+      }} />
+    </Box>
+  )
+
+  const labelEl = showLabel && finalLabel && (
+    <Typography sx={{ fontSize: 13, fontWeight: 500, color: dotColor, lineHeight: 1 }}>
+      {finalLabel}
+    </Typography>
+  )
+
+  const isHorizontal = labelPosition === 'right' || labelPosition === 'left'
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ textAlign: align }}>
+        <Box
+          display='inline-flex'
+          flexDirection={isHorizontal ? 'row' : 'column'}
+          alignItems='center'
+          gap={1}
+        >
+          {labelPosition === 'left'  && labelEl}
+          {labelPosition === 'above' && labelEl}
+          {dotEl}
+          {labelPosition === 'right' && labelEl}
+          {labelPosition === 'below' && labelEl}
+        </Box>
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}