robobyte-front-builder 1.0.19 → 1.0.23

package/src/services/builderHelper/numberFormat.js

@@ -0,0 +1,123 @@
+/**
+ * Shared number formatting utility.
+ *
+ * format options:
+ *   'number'   — 1,234.56
+ *   'currency' — $1,234.56  (currencyCode defaults to USD)
+ *   'percent'  — 12.4%      (expects 0-100 range; pass asRatio:true for 0-1)
+ *   'compact'  — 84.2k / 1.2M
+ *   'duration' — value treated as total seconds → "2h 14m 05s"
+ *   'bytes'    — 1.2 MB / 4.3 GB
+ *   'custom'   — returns raw value (caller formats via expression)
+ */
+
+/** Sanitise a decimals value from an expression field.
+ *  Accepts string/number, clamps to [0, 20], falls back to `fallback`. */
+function clampDec(val, fallback = 0) {
+  if (val == null) return fallback
+  const n = Math.round(Number(val))
+  if (!isFinite(n) || n < 0) return fallback
+  return Math.min(20, n)
+}
+
+/** Sanitise prefix/suffix — ensure they are plain strings. */
+function safeStr(val) {
+  if (val == null) return ''
+  return typeof val === 'string' ? val : String(val)
+}
+
+export function formatNumber(value, {
+  format     = 'number',
+  decimals,
+  prefix     = '',
+  suffix     = '',
+  locale     = 'en-US',
+  currency   = 'USD',
+  asRatio    = false,   // for percent: true means value is 0-1
+} = {}) {
+  if (value == null || value === '') return '—'
+  const num = Number(value)
+  if (isNaN(num)) return String(value)
+
+  // Sanitise caller-supplied strings from expression fields
+  const pfx = safeStr(prefix)
+  const sfx = safeStr(suffix)
+
+  let core
+
+  switch (format) {
+    case 'currency': {
+      const dec = clampDec(decimals, 2)
+      core = new Intl.NumberFormat(locale, {
+        style: 'currency', currency: safeStr(currency) || 'USD',
+        minimumFractionDigits: dec, maximumFractionDigits: dec,
+      }).format(num)
+      break
+    }
+
+    case 'percent': {
+      const pct = asRatio ? num * 100 : num
+      const dec = clampDec(decimals, 1)
+      core = pct.toFixed(dec) + '%'
+      break
+    }
+
+    case 'compact': {
+      core = new Intl.NumberFormat(locale, {
+        notation: 'compact',
+        maximumFractionDigits: clampDec(decimals, 1),
+      }).format(num)
+      break
+    }
+
+    case 'duration': {
+      // value = total seconds
+      const totalSec = Math.abs(Math.round(num))
+      const h = Math.floor(totalSec / 3600)
+      const m = Math.floor((totalSec % 3600) / 60)
+      const s = totalSec % 60
+      const parts = []
+      if (h) parts.push(`${h}h`)
+      if (m || h) parts.push(`${m}m`)
+      parts.push(`${String(s).padStart(2, '0')}s`)
+      core = (num < 0 ? '-' : '') + parts.join(' ')
+      break
+    }
+
+    case 'bytes': {
+      const abs = Math.abs(num)
+      const sign = num < 0 ? '-' : ''
+      const dec = clampDec(decimals, 1)
+      if (abs >= 1e12) core = sign + (abs / 1e12).toFixed(dec) + ' TB'
+      else if (abs >= 1e9)  core = sign + (abs / 1e9).toFixed(dec) + ' GB'
+      else if (abs >= 1e6)  core = sign + (abs / 1e6).toFixed(dec) + ' MB'
+      else if (abs >= 1e3)  core = sign + (abs / 1e3).toFixed(dec) + ' KB'
+      else core = sign + abs + ' B'
+      break
+    }
+
+    default: { // 'number'
+      const dec = clampDec(decimals, 0)
+      core = new Intl.NumberFormat(locale, {
+        minimumFractionDigits: dec,
+        maximumFractionDigits: dec,
+      }).format(num)
+      break
+    }
+  }
+
+  return `${pfx}${core}${sfx}`
+}
+
+/** Format a trend delta. Returns { text, positive, zero } */
+export function formatTrend(value, { isPercent = true, decimals = 1, invertColors = false } = {}) {
+  if (value == null || value === '') return { text: '—', positive: null, zero: true }
+  const num = Number(value)
+  if (isNaN(num)) return { text: String(value), positive: null, zero: false }
+  const zero     = num === 0
+  const positive = invertColors ? num < 0 : num > 0
+  const abs      = Math.abs(num)
+  const text     = (num > 0 ? '+' : num < 0 ? '−' : '') +
+                   (isPercent ? abs.toFixed(decimals) + '%' : abs.toFixed(decimals))
+  return { text, positive, zero }
+}

package/src/services/builderHelper/resolveProps.js

@@ -1,21 +1,68 @@
-import { getJSCalculationFunction } from './jsExecutor'
+import { getJSCalculationFunction, getUrlParams } from './jsExecutor'
 
+/**
+ * Resolve a node's props tab (main / style / advanced) into plain values.
+ *
+ * Accepts either:
+ *   - a plain context object: { form, data, setData, dataRef, reportRefs, … }
+ *   - a full viewerContext (has dataRef as a React ref with .current)
+ *
+ * Backward-compatible: callers that pass only { form, data } still work.
+ * Callers that pass the full viewerContext get dataItem / itemIndex / all
+ * page stores automatically, without any per-renderer boilerplate.
+ */
 export function resolveProps(node, tab, context = {}) {
   const props = node.props?.[tab] ?? {}
   const resolved = {}
 
+  const form    = context.form   ?? {}
+  const data    = context.data   ?? {}
+  const setData = context.setData ?? (() => {})
+
+  // dataRef may be a React ref ({ current: obj }) when viewerContext is passed
+  // directly, or a plain object when a custom resolveCtx is constructed.
+  const rawDataRef    = context.dataRef
+  const dataRef       = rawDataRef?.current !== undefined ? rawDataRef.current : (rawDataRef ?? {})
+
+  const rawReportRefs = context.reportRefs
+  const reportRefs    = rawReportRefs?.current !== undefined ? rawReportRefs.current : (rawReportRefs ?? {})
+
+  const openDialog  = context.openDialog  ?? (() => {})
+  const closeDialog = context.closeDialog ?? (() => {})
+  const urlParams   = getUrlParams()
+
+  // `page` — parent/main-page stores forwarded from the viewerContext.
+  // In isolated dialogs/embedded views these differ from the component's own data.
+  const page = context.page ?? {
+    data:       context.pageData       ?? data,
+    setData:    context.pageSetData    ?? setData,
+    dataRef:    context.pageDataRef    ?? dataRef,
+    reportRefs: context.pageReportRefs ?? reportRefs,
+  }
+
+  const execContext = {
+    form, data, setData, dataRef, reportRefs, openDialog, closeDialog, page,
+    // Repeater item context — present when inside a Repeater, null elsewhere
+    dataItem:  context.dataItem  ?? null,
+    itemIndex: context.itemIndex ?? null,
+  }
+
   for (const [key, field] of Object.entries(props)) {
     if (!field) continue
 
     if ((field.valueType || field.type) === 'value') {
-      resolved[key] = field.value
+      // Skip empty strings so the renderer's destructuring default kicks in.
+      // An explicitly cleared field should behave identically to "never set".
+      if (field.value !== '') resolved[key] = field.value
       continue
     }
 
     if ((field.valueType || field.type) === 'expression' && field.expression?.code) {
       try {
-        const calc = getJSCalculationFunction(field.expression.code, context)
-        const value = calc(context.form, context.data)
+        const calc = getJSCalculationFunction(field.expression.code, execContext)
+
+        // Call Calculation with all args — old functions that only declare (form, data) ignore extras
+        const value = calc(form, data, setData, dataRef, reportRefs, openDialog, closeDialog, urlParams, page)
 
         // Viewer prop resolution is synchronous. Skip unresolved promises.
         if (value && typeof value.then === 'function') {
@@ -32,3 +79,25 @@ export function resolveProps(node, tab, context = {}) {
 
   return resolved
 }
+
+/**
+ * Resolve a scalar value from a KPI component's "value key" field.
+ *
+ * The field type is `expression`, so resolveProps already evaluates it.
+ * The result can be either:
+ *   • a string  → treat as a data key and look up data[key]
+ *   • anything else (number, boolean, null …) → use the value directly
+ *
+ * This lets users write either:
+ *   valueKey: "revenue"            → data["revenue"]
+ *   valueKey: data.price * data.qty  → computed value used as-is
+ *   valueKey: 42                   → literal 42
+ *
+ * @param {*}      key   The resolved value from resolveProps (already evaluated)
+ * @param {object} data  The current page data object
+ * @param {*}      fallback  Returned when key is null/undefined (default: undefined)
+ */
+export function resolveValue(key, data, fallback = undefined) {
+  if (key == null) return fallback
+  return typeof key === 'string' ? (data?.[key] ?? fallback) : key
+}

package/src/services/builderHelper/thresholdEngine.js

@@ -0,0 +1,77 @@
+/**
+ * Shared threshold evaluation engine.
+ *
+ * A threshold rule:
+ *   { operator: '<' | '<=' | '>' | '>=' | '==' | '!=' | 'between',
+ *     value: number,
+ *     value2: number,   // only used for 'between'
+ *     color: string,    // MUI palette key or CSS color
+ *     label: string,    // optional override label
+ *     bg: string,       // optional background override
+ *   }
+ *
+ * evaluateThreshold returns the first matching rule (or null).
+ * resolveColor maps a MUI palette key to a CSS color.
+ */
+
+const MUI_COLOR_MAP = {
+  // semantic
+  error:    { color: '#d32f2f', bg: '#ffebee' },
+  warning:  { color: '#e65100', bg: '#fff3e0' },
+  success:  { color: '#2e7d32', bg: '#e8f5e9' },
+  info:     { color: '#0277bd', bg: '#e1f5fe' },
+  primary:  { color: '#1565c0', bg: '#e3f2fd' },
+  secondary:{ color: '#6a1b9a', bg: '#f3e5f5' },
+  // extras
+  purple:   { color: '#7b1fa2', bg: '#f3e5f5' },
+  pink:     { color: '#c2185b', bg: '#fce4ec' },
+  teal:     { color: '#00695c', bg: '#e0f2f1' },
+  cyan:     { color: '#00838f', bg: '#e0f7fa' },
+  orange:   { color: '#e64a19', bg: '#fbe9e7' },
+  indigo:   { color: '#283593', bg: '#e8eaf6' },
+  default:  { color: 'inherit', bg: 'transparent' },
+}
+
+/** Resolve a color string: MUI key → { color, bg } or pass-through. */
+export function resolveMuiColor(key) {
+  return MUI_COLOR_MAP[key] ?? { color: key ?? 'inherit', bg: 'transparent' }
+}
+
+/** Evaluate a value against a threshold list. Returns the first matching rule or null. */
+export function evaluateThreshold(value, thresholds) {
+  if (!Array.isArray(thresholds) || !thresholds.length) return null
+  const v = Number(value)
+  for (const rule of thresholds) {
+    if (matches(v, rule)) return rule
+  }
+  return null
+}
+
+function matches(v, rule) {
+  const a = Number(rule.value)
+  const b = Number(rule.value2)
+  switch (rule.operator) {
+    case '<':       return v < a
+    case '<=':      return v <= a
+    case '>':       return v > a
+    case '>=':      return v >= a
+    case '==':      return v === a
+    case '!=':      return v !== a
+    case 'between': return v >= a && v <= b
+    default:        return false
+  }
+}
+
+/**
+ * Convenience: returns { color, bg } for a value+thresholds pair.
+ * Falls back to { color: 'inherit', bg: 'transparent' }.
+ */
+export function thresholdColors(value, thresholds) {
+  const rule = evaluateThreshold(value, thresholds)
+  if (!rule) return { color: 'inherit', bg: 'transparent' }
+  const base = resolveMuiColor(rule.color)
+  return {
+    color: rule.colorOverride ?? base.color,
+    bg:    rule.bg            ?? base.bg,
+  }
+}

package/src/services/builderHelper/tree.js

@@ -10,6 +10,37 @@ export function findNode(node, targetId) {
   return null
 }
 
+/**
+ * Find a node anywhere in the schema — searches both root tree and dialogs array.
+ * Returns { node, location: 'root' | 'dialog', dialogId? }
+ */
+export function findNodeAnywhere(schema, targetId) {
+  const inRoot = findNode(schema.root, targetId)
+  if (inRoot) return { node: inRoot, location: 'root' }
+
+  for (const dialog of schema.dialogs ?? []) {
+    const inDialog = findNode(dialog, targetId)
+    if (inDialog) return { node: inDialog, location: 'dialog', dialogId: dialog.id }
+  }
+
+  return { node: null, location: null }
+}
+
+/**
+ * Update a node anywhere in the schema — patches root tree or the matching dialog.
+ */
+export function updateNodeAnywhere(schema, nodeId, patch, location, dialogId) {
+  if (location === 'dialog') {
+    return {
+      ...schema,
+      dialogs: (schema.dialogs ?? []).map(d =>
+        d.id === dialogId ? updateNodeInTree(d, nodeId, patch) : d
+      ),
+    }
+  }
+  return { ...schema, root: updateNodeInTree(schema.root, nodeId, patch) }
+}
+
 export function removeFromTree(node, targetId) {
   if (!node.children) return node
 

package/src/services/components/agGridAutoComplete.js

@@ -9,10 +9,10 @@ import React, {
 import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
 import Chip from '@mui/material/Chip';
-import {SettingsConsumer} from 'src/@core/contexts/settingsContext';
-import ThemeComponent from 'src/@core/theme/ThemeComponent';
+import { ThemeProvider, createTheme, lighten, styled } from '@mui/material/styles';
 import moment from 'moment';
-import {lighten, styled} from '@mui/material/styles';
+
+const defaultTheme = createTheme();
 import izColors from 'src/configs/izColors.json';
 
 // Utility for nested value access
@@ -112,9 +112,7 @@ const AutocompleteEditor = (props, ref) => {
   };
 
   return (
-    <SettingsConsumer>
-      {({settings}) => (
-        <ThemeComponent settings={settings}>
+    <ThemeProvider theme={defaultTheme}>
           <Autocomplete
             multiple={!isSingle}
             size="small"
@@ -163,9 +161,7 @@ const AutocompleteEditor = (props, ref) => {
               ))
             }
           />
-        </ThemeComponent>
-      )}
-    </SettingsConsumer>
+    </ThemeProvider>
   );
 };
 

package/src/services/config.js

@@ -39,9 +39,17 @@ const _config = {
 
   // Default token reader — reads the key Mazajk (and most host apps) use.
   // Override via configureRoboByte({ getAccessToken }) or via the provider prop.
+  //
+  // Resolution order:
+  //   1. localStorage 'accessToken'  (normal auth flow — takes priority)
+  //   2. NEXT_PUBLIC_DEV_ACCESS_TOKEN env var  (dev convenience, .env.local only)
   getAccessToken: () => {
     if (typeof window === 'undefined') return null
-    return localStorage.getItem('accessToken') ?? null
+    return (
+      localStorage.getItem('accessToken') ??
+      (process.env.NODE_ENV === 'development' ? process.env.NEXT_PUBLIC_DEV_ACCESS_TOKEN : null) ??
+      null
+    )
   },
 
   // Default user reader — parses the JSON object Mazajk stores in localStorage.

package/src/services/globalStore.js

@@ -0,0 +1,80 @@
+/**
+ * globalStore — cross-route reactive data store.
+ *
+ * Lives at module scope so it survives Next.js client-side navigations.
+ * Any page, dialog, renderer, or Calculation function can read and write it.
+ *
+ * ── In action code (Calculation functions) ───────────────────────────────────
+ *
+ *   // Read current global state
+ *   console.log(globalData.selectedUser)
+ *
+ *   // Write (like setData but global — persists across route changes)
+ *   setGlobalData(prev => ({ ...prev, selectedUser: clickedItem }))
+ *   setGlobalData({ theme: 'dark', locale: 'en' })   // full replace also works
+ *
+ *   // Then navigate — globalData.selectedUser is still there on the next page
+ *   router.push('/user-detail')
+ *
+ * ── In React components ───────────────────────────────────────────────────────
+ *
+ *   import { useGlobalStore } from 'src/hooks/useGlobalStore'
+ *
+ *   function MyRenderer() {
+ *     const { globalData, setGlobalData } = useGlobalStore()
+ *     return <div>{globalData.selectedUser?.name}</div>
+ *   }
+ */
+
+// ── Internal state ────────────────────────────────────────────────────────────
+
+let _state = {}
+const _listeners = new Set()
+
+// ── Public API ────────────────────────────────────────────────────────────────
+
+/**
+ * Returns a snapshot of the current global state.
+ * This is synchronous and safe to call from anywhere, including jsExecutor.
+ * @returns {object}
+ */
+export function getGlobalData() {
+  return _state
+}
+
+/**
+ * Updates the global state.
+ * Accepts either a plain object (shallow-merged) or an updater function
+ * that receives the previous state and returns the next state.
+ *
+ * All subscribed React components are notified synchronously so they
+ * re-render with the new values.
+ *
+ * @param {object | ((prev: object) => object)} updater
+ */
+export function setGlobalData(updater) {
+  const next = typeof updater === 'function' ? updater(_state) : updater
+  _state = next && typeof next === 'object' ? { ..._state, ...next } : _state
+  _listeners.forEach(fn => fn(_state))
+}
+
+/**
+ * Subscribe to global state changes.
+ * Returns an unsubscribe function — call it in useEffect cleanup.
+ *
+ * @param {(state: object) => void} listener
+ * @returns {() => void} unsubscribe
+ */
+export function subscribeGlobal(listener) {
+  _listeners.add(listener)
+  return () => _listeners.delete(listener)
+}
+
+/**
+ * Resets the global store to an empty object.
+ * Useful for logout / session reset.
+ */
+export function resetGlobalData() {
+  _state = {}
+  _listeners.forEach(fn => fn(_state))
+}

package/src/services/helper/multiSelectEditor.js

@@ -3,12 +3,12 @@ import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
 import Chip from '@mui/material/Chip';
 import { createRoot } from 'react-dom/client';
-import ThemeComponent from 'src/@core/theme/ThemeComponent';
+import { ThemeProvider, createTheme, darken, lighten, styled } from "@mui/material/styles";
 import moment from 'moment';
 import Typography from "@mui/material/Typography";
-import { darken, lighten, styled } from "@mui/material/styles";
 import izColors from "src/configs/izColors.json"
-import { SettingsConsumer } from "src/@core/contexts/settingsContext";
+
+const defaultTheme = createTheme();
 const AutocompleteEditor = React.memo(
   forwardRef((props, ref) => {
     // Initialize as an array for multi-selection.
@@ -122,9 +122,7 @@ const AutocompleteEditor = React.memo(
     });
 
     return (
-      <SettingsConsumer>
-        {({ settings }) => (
-          <ThemeComponent settings={settings}>
+      <ThemeProvider theme={defaultTheme}>
             <Autocomplete
               multiple={!props.isSingle === true}
               size="small"
@@ -179,9 +177,7 @@ const AutocompleteEditor = React.memo(
                 ))
               }
             />
-          </ThemeComponent>
-        )}
-      </SettingsConsumer>
+      </ThemeProvider>
     );
   })
 );

package/src/services/helper/multiSelectEditorByBuilder.js

@@ -3,13 +3,13 @@ import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
 import Chip from '@mui/material/Chip';
 import {createRoot} from 'react-dom/client';
-import {SettingsConsumer} from 'src/@core/context/settingsContext';
-import ThemeComponent from 'src/@core/theme/ThemeComponent';
+import { ThemeProvider, createTheme, darken, lighten, styled } from "@mui/material/styles";
 import moment from 'moment';
 import Typography from "@mui/material/Typography";
-import {darken, lighten, styled} from "@mui/material/styles";
 import izColors from "src/configs/izColors.json"
 
+const defaultTheme = createTheme();
+
 const AutocompleteEditor = React.memo(
   forwardRef((props, ref) => {
     // Initialize as an array for multi-selection.
@@ -128,9 +128,7 @@ const AutocompleteEditor = React.memo(
     });
 
     return (
-      <SettingsConsumer>
-        {({settings}) => (
-          <ThemeComponent settings={settings}>
+      <ThemeProvider theme={defaultTheme}>
             <Autocomplete
               multiple={!props.isSingle === true}
               size="small"
@@ -198,9 +196,7 @@ const AutocompleteEditor = React.memo(
                 ))
               }
             />
-          </ThemeComponent>
-        )}
-      </SettingsConsumer>
+      </ThemeProvider>
     );
   })
 );