robobyte-front-builder 1.0.19 → 1.0.23

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

@@ -0,0 +1,247 @@
+import { useState } from 'react'
+import {
+  Box, Button, Dialog, DialogTitle, DialogContent, DialogActions,
+  Typography, IconButton, Select, MenuItem, FormControl, TextField,
+  Divider, Tooltip, Chip,
+} from '@mui/material'
+import { Add, Close, DragIndicator, FilterAltOutlined } from '@mui/icons-material'
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const OPERATORS = [
+  { value: '<',       label: '< less than'       },
+  { value: '<=',      label: '≤ at most'          },
+  { value: '>',       label: '> greater than'     },
+  { value: '>=',      label: '≥ at least'         },
+  { value: '==',      label: '= equals'           },
+  { value: '!=',      label: '≠ not equals'       },
+  { value: 'between', label: '↔ between'          },
+]
+
+const COLORS = [
+  { value: 'success',   label: 'Success',   dot: '#2e7d32' },
+  { value: 'warning',   label: 'Warning',   dot: '#e65100' },
+  { value: 'error',     label: 'Error',     dot: '#d32f2f' },
+  { value: 'info',      label: 'Info',      dot: '#0277bd' },
+  { value: 'primary',   label: 'Primary',   dot: '#1565c0' },
+  { value: 'secondary', label: 'Secondary', dot: '#6a1b9a' },
+  { value: 'purple',    label: 'Purple',    dot: '#7b1fa2' },
+  { value: 'pink',      label: 'Pink',      dot: '#c2185b' },
+  { value: 'teal',      label: 'Teal',      dot: '#00695c' },
+  { value: 'orange',    label: 'Orange',    dot: '#e64a19' },
+  { value: 'cyan',      label: 'Cyan',      dot: '#00838f' },
+  { value: 'indigo',    label: 'Indigo',    dot: '#283593' },
+]
+
+const DOT = Object.fromEntries(COLORS.map(c => [c.value, c.dot]))
+
+const DEFAULT_RULE = () => ({ operator: '<', value: '', value2: '', color: 'error', label: '' })
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+
+const SX = {
+  input: {
+    '& .MuiInputBase-root': { color: '#e0e0e0', fontSize: 12 },
+    '& .MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+    '& .MuiInputLabel-root': { color: '#aaa', fontSize: 12 },
+    '& input': { py: '6px', px: 1 },
+  },
+  select: {
+    color: '#e0e0e0', fontSize: 12,
+    '.MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+    '.MuiSelect-select': { py: '6px', pl: 1 },
+  },
+}
+
+// ── Single rule row ───────────────────────────────────────────────────────────
+
+function RuleRow({ rule, index, onChange, onRemove }) {
+  const upd = (k, v) => onChange({ ...rule, [k]: v })
+  const isBetween = rule.operator === 'between'
+
+  return (
+    <Box
+      sx={{
+        display: 'flex', alignItems: 'center', gap: 1,
+        bgcolor: '#2a2d32', border: '1px solid #3a3f45',
+        borderRadius: 1.5, px: 1.25, py: 0.75, mb: 0.75,
+      }}
+    >
+      <DragIndicator sx={{ fontSize: 14, color: '#444', flexShrink: 0 }} />
+
+      {/* Color dot */}
+      <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: DOT[rule.color] ?? rule.color, flexShrink: 0 }} />
+
+      {/* Operator */}
+      <FormControl size='small' sx={{ minWidth: 120, flexShrink: 0 }}>
+        <Select value={rule.operator} onChange={e => upd('operator', e.target.value)} sx={SX.select}>
+          {OPERATORS.map(o => <MenuItem key={o.value} value={o.value} sx={{ fontSize: 12 }}>{o.label}</MenuItem>)}
+        </Select>
+      </FormControl>
+
+      {/* Value */}
+      <TextField
+        size='small' type='number' placeholder='value'
+        value={rule.value}
+        onChange={e => upd('value', e.target.value)}
+        sx={{ ...SX.input, width: 80, flexShrink: 0 }}
+      />
+
+      {/* value2 for between */}
+      {isBetween && (
+        <>
+          <Typography sx={{ fontSize: 11, color: '#666' }}>and</Typography>
+          <TextField
+            size='small' type='number' placeholder='value'
+            value={rule.value2}
+            onChange={e => upd('value2', e.target.value)}
+            sx={{ ...SX.input, width: 80, flexShrink: 0 }}
+          />
+        </>
+      )}
+
+      {/* Color */}
+      <FormControl size='small' sx={{ minWidth: 110, flexShrink: 0 }}>
+        <Select value={rule.color} onChange={e => upd('color', e.target.value)} sx={SX.select}>
+          {COLORS.map(c => (
+            <MenuItem key={c.value} value={c.value} sx={{ fontSize: 12 }}>
+              <Box display='flex' alignItems='center' gap={0.75}>
+                <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: c.dot }} />
+                {c.label}
+              </Box>
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+
+      {/* Optional label override */}
+      <TextField
+        size='small' placeholder='label (opt.)'
+        value={rule.label ?? ''}
+        onChange={e => upd('label', e.target.value)}
+        sx={{ ...SX.input, flex: 1, minWidth: 80 }}
+      />
+
+      <Tooltip title='Remove rule'>
+        <IconButton size='small' onClick={onRemove} sx={{ color: '#f44336', p: 0.3 }}>
+          <Close sx={{ fontSize: 14 }} />
+        </IconButton>
+      </Tooltip>
+    </Box>
+  )
+}
+
+// ── Main editor ───────────────────────────────────────────────────────────────
+
+export default function ThresholdsEditor({ field, onChange }) {
+  const safeField   = field ?? { valueType: 'value', value: [] }
+  const stored      = Array.isArray(safeField.value) ? safeField.value : []
+
+  const [open, setOpen]   = useState(false)
+  const [draft, setDraft] = useState([])
+
+  const handleOpen = () => {
+    setDraft(stored.length ? stored.map(r => ({ ...DEFAULT_RULE(), ...r })) : [])
+    setOpen(true)
+  }
+  const handleClose = () => setOpen(false)
+  const handleSave  = () => {
+    const valid = draft.filter(r => r.value !== '' || r.operator === '==')
+    onChange?.({ valueType: 'value', value: valid })
+    setOpen(false)
+  }
+
+  const add    = () => setDraft(prev => [...prev, DEFAULT_RULE()])
+  const remove = i => setDraft(prev => prev.filter((_, idx) => idx !== i))
+  const update = (i, rule) => setDraft(prev => prev.map((r, idx) => idx === i ? rule : r))
+
+  return (
+    <>
+      {/* Trigger */}
+      <Box display='flex' alignItems='center' justifyContent='space-between'>
+        <Box display='flex' alignItems='center' gap={0.75}>
+          <FilterAltOutlined sx={{ fontSize: 15, color: '#7b8ea0' }} />
+          <Typography variant='caption' sx={{ color: '#aaa' }}>
+            {stored.length > 0
+              ? stored.map(r => (
+                  <Chip
+                    key={r.color}
+                    size='small'
+                    sx={{ height: 16, fontSize: 10, mr: 0.4, bgcolor: DOT[r.color] + '33', color: DOT[r.color] }}
+                    label={`${r.operator} ${r.value}${r.operator === 'between' ? '…' + r.value2 : ''}`}
+                  />
+                ))
+              : 'No thresholds'}
+          </Typography>
+        </Box>
+        <Button size='small' variant='outlined' onClick={handleOpen}
+          sx={{ fontSize: 11, py: 0.3, borderColor: '#555', color: '#ccc' }}>
+          Configure
+        </Button>
+      </Box>
+
+      {/* Dialog */}
+      <Dialog open={open} onClose={handleClose} fullWidth maxWidth='md'
+        PaperProps={{ sx: { bgcolor: '#1e2126', color: '#e0e0e0', border: '1px solid #3a3f45' } }}>
+        <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pb: 1 }}>
+          <Box display='flex' alignItems='center' gap={1}>
+            <FilterAltOutlined sx={{ color: '#7b8ea0' }} />
+            <Typography variant='h6' sx={{ fontWeight: 600 }}>Threshold Rules</Typography>
+            <Chip label={`${draft.length} rule${draft.length !== 1 ? 's' : ''}`} size='small'
+              sx={{ bgcolor: '#2a3a4a', color: '#90caf9', fontSize: 11 }} />
+          </Box>
+          <IconButton onClick={handleClose} size='small' sx={{ color: '#aaa' }}><Close /></IconButton>
+        </DialogTitle>
+
+        <Divider sx={{ borderColor: '#3a3f45' }} />
+
+        <DialogContent sx={{ pt: 2, pb: 1 }}>
+          <Typography variant='caption' sx={{ color: '#666', display: 'block', mb: 2, lineHeight: 1.6 }}>
+            Rules are evaluated <strong>top-to-bottom</strong>. The first matching rule sets the color.
+            Applied to the component's main value at render time.
+          </Typography>
+
+          {/* Column headers */}
+          {draft.length > 0 && (
+            <Box sx={{ display: 'flex', gap: 1, px: 1.25, mb: 0.5 }}>
+              <Box sx={{ width: 14 }} />
+              <Box sx={{ width: 10 }} />
+              <Typography sx={{ minWidth: 120, fontSize: 10, color: '#555', textTransform: 'uppercase', letterSpacing: '.06em' }}>Operator</Typography>
+              <Typography sx={{ width: 80, fontSize: 10, color: '#555', textTransform: 'uppercase', letterSpacing: '.06em' }}>Value</Typography>
+              <Typography sx={{ minWidth: 110, fontSize: 10, color: '#555', textTransform: 'uppercase', letterSpacing: '.06em' }}>Color</Typography>
+              <Typography sx={{ flex: 1, fontSize: 10, color: '#555', textTransform: 'uppercase', letterSpacing: '.06em' }}>Label override</Typography>
+            </Box>
+          )}
+
+          {draft.length === 0 && (
+            <Box sx={{ textAlign: 'center', py: 4, color: '#555' }}>
+              <FilterAltOutlined sx={{ fontSize: 36, mb: 1 }} />
+              <Typography variant='body2'>No rules yet — click Add to create one.</Typography>
+            </Box>
+          )}
+
+          {draft.map((rule, i) => (
+            <RuleRow key={i} rule={rule} index={i}
+              onChange={r => update(i, r)}
+              onRemove={() => remove(i)} />
+          ))}
+
+          <Button startIcon={<Add />} onClick={add} size='small' fullWidth
+            sx={{ mt: 1, borderStyle: 'dashed', border: '1px dashed #3a3f45', color: '#90caf9', borderRadius: 1.5, py: 1,
+              '&:hover': { bgcolor: '#1a2a3a', borderColor: '#90caf9' } }}>
+            Add Rule
+          </Button>
+        </DialogContent>
+
+        <Divider sx={{ borderColor: '#3a3f45' }} />
+
+        <DialogActions sx={{ px: 3, py: 1.5, gap: 1 }}>
+          <Button onClick={handleClose} sx={{ color: '#aaa' }}>Cancel</Button>
+          <Button onClick={handleSave} variant='contained' color='primary'>
+            Save ({draft.filter(r => r.value !== '').length} rules)
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}

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

@@ -0,0 +1,217 @@
+import { useState, useCallback } from 'react'
+import { Box, Typography, IconButton, Tooltip, Collapse } from '@mui/material'
+import { ContentCopy, Check, KeyboardArrowDown, KeyboardArrowUp, AutoStoriesOutlined } from '@mui/icons-material'
+
+// ── Inline code renderer ───────────────────────────────────────────────────────
+
+const CODE = (s, color = '#90caf9') => (
+  <code style={{ color, fontFamily: "Menlo, Monaco, 'Courier New', monospace", fontSize: 10.5 }}>{s}</code>
+)
+
+// ── Shared scope destructure used in all examples ─────────────────────────────
+
+const SCOPE = `{ data, setData, dataRef, setRefValue, getRefValue, getNodeRef }`
+
+// ── Copy-able examples ─────────────────────────────────────────────────────────
+
+const EXAMPLES = [
+  {
+    label: 'valueSetter — track change on this table',
+    code: `(params, ${SCOPE}) => {
+  const { newValue, data: rowData, context } = params
+  rowData.IsPublic = newValue
+  setRefValue(context.updateRef, rowData, 'Id', 'IsPublic', newValue)
+  return true
+}`,
+  },
+  {
+    label: "valueSetter — write to a different table's ref",
+    code: `(params, ${SCOPE}) => {
+  const { newValue, data: rowData, context } = params
+  rowData.Status = newValue
+  setRefValue(context.updateRef, rowData, 'Id', 'Status', newValue, 'other-node-id')
+  return true
+}`,
+  },
+  {
+    label: 'valueSetter — also update page state',
+    code: `(params, ${SCOPE}) => {
+  const { newValue, data: rowData, context } = params
+  rowData.Amount = newValue
+  setRefValue(context.updateRef, rowData, 'Id', 'Amount', newValue)
+  setData(prev => ({ ...prev, lastEditedId: rowData.Id }))
+  return true
+}`,
+  },
+  {
+    label: 'valueGetter — read tracked value, fall back to raw',
+    code: `(params, ${SCOPE}) => {
+  return getRefValue(params.context.updateRef, params.data, 'Id', 'MyField')
+    ?? params.data?.MyField
+}`,
+  },
+  {
+    label: 'valueFormatter — display boolean as text',
+    code: `(params, ${SCOPE}) => params.value ? 'Yes' : 'No'`,
+  },
+  {
+    label: 'cellStyle — colour negative values red',
+    code: `(params, ${SCOPE}) => {
+  if (params.value < 0) return { color: '#f44336', fontWeight: 'bold' }
+  if (params.value > 0) return { color: '#66bb6a' }
+  return {}
+}`,
+  },
+]
+
+// ── Copy button ────────────────────────────────────────────────────────────────
+
+function CopyButton({ text }) {
+  const [copied, setCopied] = useState(false)
+  const handle = useCallback(() => {
+    navigator.clipboard.writeText(text).catch(() => {})
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }, [text])
+  return (
+    <Tooltip title={copied ? 'Copied!' : 'Copy code'}>
+      <IconButton size='small' onClick={handle} sx={{ color: copied ? '#aed581' : '#555', p: 0.4 }}>
+        {copied ? <Check sx={{ fontSize: 12 }} /> : <ContentCopy sx={{ fontSize: 12 }} />}
+      </IconButton>
+    </Tooltip>
+  )
+}
+
+// ── Reference table row ────────────────────────────────────────────────────────
+
+function RefRow({ name, desc, border }) {
+  return (
+    <Box display='flex' alignItems='flex-start' gap={1.5} px={1.2} py={0.7}
+      sx={{ borderTop: border ? '1px solid #252b38' : 'none' }}>
+      <Box sx={{ minWidth: 130, flexShrink: 0, pt: 0.1 }}>{name}</Box>
+      <Typography sx={{ fontSize: 11, color: '#666', lineHeight: 1.5 }}>{desc}</Typography>
+    </Box>
+  )
+}
+
+// ── Main panel ─────────────────────────────────────────────────────────────────
+
+export default function ValueFunctionsRefPanel() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Box mb={2} sx={{ border: '1px solid #2a3a4a', borderRadius: 1.5, overflow: 'hidden' }}>
+
+      {/* Header */}
+      <Box
+        display='flex' alignItems='center' justifyContent='space-between'
+        px={1.5} py={0.9}
+        onClick={() => setOpen(p => !p)}
+        sx={{ bgcolor: '#1a2535', cursor: 'pointer', userSelect: 'none', '&:hover': { bgcolor: '#1e2d40' } }}
+      >
+        <Box display='flex' alignItems='center' gap={1}>
+          <AutoStoriesOutlined sx={{ fontSize: 14, color: '#7b8ea0' }} />
+          <Typography sx={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: '#90caf9' }}>
+            Available helpers &amp; how to use
+          </Typography>
+        </Box>
+        {open
+          ? <KeyboardArrowUp sx={{ fontSize: 16, color: '#555' }} />
+          : <KeyboardArrowDown sx={{ fontSize: 16, color: '#555' }} />}
+      </Box>
+
+      <Collapse in={open}>
+        <Box px={1.5} py={1.5} sx={{ bgcolor: '#141820' }} display='flex' flexDirection='column' gap={2}>
+
+          {/* ── Function signature pattern ── */}
+          <Box>
+            <Typography sx={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#7b8ea0', mb: 0.8 }}>
+              Function signature
+            </Typography>
+            <Box sx={{ bgcolor: '#1a1d24', border: '1px solid #252b38', borderRadius: 1, p: 1.2 }}>
+              <Box component='pre' sx={{ m: 0, fontFamily: "Menlo, Monaco, 'Courier New', monospace", fontSize: 10.5, color: '#d4d4d4', lineHeight: 1.7, whiteSpace: 'pre' }}>
+                {`(params, { data, setData, dataRef, fetchReportData,\n          setRefValue, getRefValue, getNodeRef, ... }) => {\n  // params.data  → the AG Grid row object  (alias as rowData!)\n  // data         → the reactive page state\n}`}
+              </Box>
+            </Box>
+            <Typography sx={{ fontSize: 10.5, color: '#555', mt: 0.8, lineHeight: 1.6 }}>
+              AG Grid passes only {CODE('params')}. The second argument is the scope object — destructure only what you need.
+              Always alias {CODE('params.data')} immediately ({CODE('data: rowData')}) to avoid shadowing the page {CODE('data')}.
+            </Typography>
+          </Box>
+
+          {/* ── params contents ── */}
+          <Box>
+            <Typography sx={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#7b8ea0', mb: 0.8 }}>
+              params (from AG Grid)
+            </Typography>
+            <Box sx={{ bgcolor: '#1a1d24', border: '1px solid #252b38', borderRadius: 1, overflow: 'hidden' }}>
+              <RefRow name={CODE('params.data')}     desc="The AG Grid row object — alias as rowData to avoid shadowing page data" border={false} />
+              <RefRow name={CODE('params.newValue')} desc="New cell value (valueSetter only)" border />
+              <RefRow name={CODE('params.value')}    desc="Current cell value (valueGetter / valueFormatter / cellStyle)" border />
+              <RefRow name={CODE('params.context')}  desc={<>Grid context — contains {CODE('updateRef', '#ffcc80')}, {CODE('nodeId', '#ffcc80')}, {CODE('reportRefs', '#ffcc80')}</>} border />
+            </Box>
+          </Box>
+
+          {/* ── Scope (second arg) ── */}
+          <Box>
+            <Typography sx={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#7b8ea0', mb: 0.8 }}>
+              scope — second argument
+            </Typography>
+            <Box sx={{ bgcolor: '#1a1d24', border: '1px solid #252b38', borderRadius: 1, overflow: 'hidden' }}>
+              <RefRow name={CODE('data')}               desc="Reactive page data state (read)" border={false} />
+              <RefRow name={CODE('setData')}            desc="Write to page state — triggers re-render" border />
+              <RefRow name={CODE('dataRef')}            desc="Mutable non-reactive store — read/write without re-render" border />
+              <RefRow name={CODE('fetchReportData(opts)')} desc="fetchReportDataByPageId({ pageId, filter?, isSingle?, ... })" border />
+              <RefRow name={CODE('nodeName')}           desc="Builder node ID of this table" border />
+              <RefRow name={CODE('reportRefs')}         desc={<>Registry of all tables — {CODE('reportRefs.current["nodeId"]', '#ffcc80')}</>} border />
+              <RefRow name={CODE('THIS_NODE')}          desc="Constant — pass as node arg to target this table's ref" border />
+            </Box>
+          </Box>
+
+          {/* ── Ref helpers ── */}
+          <Box>
+            <Typography sx={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#7b8ea0', mb: 0.8 }}>
+              Ref helpers — in scope (rowData = the AG Grid row, uid = the row ID field)
+            </Typography>
+            <Box sx={{ bgcolor: '#1a1d24', border: '1px solid #252b38', borderRadius: 1, overflow: 'hidden' }}>
+              <RefRow name={CODE('getNodeRef(nodeId?)', '#a5d6a7')}                                   desc="Resolve a table's updateRef — omit nodeId for this table" border={false} />
+              <RefRow name={CODE('setRefValue(ref, rowData, uid, field, val, node?)', '#ffcc80')}     desc="Track a field change — optional node routes to another table's ref" border />
+              <RefRow name={CODE('setRefRow(ref, rowData, uid, updates, node?)', '#ffcc80')}           desc="Track multiple fields at once" border />
+              <RefRow name={CODE('getRefValue(ref, rowData, uid, field, node?)', '#ffcc80')}           desc="Read a tracked value for a row" border />
+              <RefRow name={CODE('hasRefValue(ref, rowData, uid, field, node?)', '#ffcc80')}           desc="Check if a field has a tracked change" border />
+              <RefRow name={CODE('clearRefRow(ref, rowData, uid, node?)', '#ffcc80')}                  desc="Remove all tracked changes for a row" border />
+              <RefRow name={CODE('clearAllRef(ref, node?)', '#ffcc80')}                               desc="Clear entire ref for a node" border />
+            </Box>
+          </Box>
+
+          {/* ── Examples ── */}
+          <Box>
+            <Typography sx={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#7b8ea0', mb: 0.8 }}>
+              Examples
+            </Typography>
+            <Box display='flex' flexDirection='column' gap={1}>
+              {EXAMPLES.map(ex => (
+                <Box key={ex.label} sx={{ bgcolor: '#1a1d24', border: '1px solid #252b38', borderRadius: 1, overflow: 'hidden' }}>
+                  <Box display='flex' alignItems='center' justifyContent='space-between' px={1.2} py={0.5}
+                    sx={{ borderBottom: '1px solid #252b38' }}>
+                    <Typography sx={{ fontSize: 10.5, color: '#7b8ea0', fontWeight: 500 }}>{ex.label}</Typography>
+                    <CopyButton text={ex.code} />
+                  </Box>
+                  <Box component='pre' sx={{
+                    m: 0, px: 1.2, py: 0.8,
+                    fontFamily: "Menlo, Monaco, 'Courier New', monospace",
+                    fontSize: 10.5, color: '#d4d4d4',
+                    overflowX: 'auto', lineHeight: 1.6, whiteSpace: 'pre',
+                  }}>
+                    {ex.code}
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+          </Box>
+
+        </Box>
+      </Collapse>
+    </Box>
+  )
+}