robobyte-front-builder 1.0.17 → 1.0.21

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

@@ -4,46 +4,47 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 import { TextField } from '@mui/material'
 import dayjs from 'dayjs'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import FieldLabel from '../FieldLabel'
 import { resolveProps } from 'services/builderHelper/resolveProps'
+import { runFieldAction } from 'services/builderHelper/actionExecutor'
 
 export default function TimePickerRenderer({ node, viewerContext }) {
   const { data, form, updateFormValue, validationErrors } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const main = resolveProps(node, 'main', viewerContext)
 
-  // 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] || null
+  const error = validationErrors?.[key]
 
-  // Get validation error
-  const error = validationErrors[key]
+  const { label, labelPosition, required, helperText, ...pickerProps } = main
 
   const handleChange = (newValue) => {
-    // Store as dayjs object or ISO string depending on preference
-    updateFormValue(key, newValue ? newValue.toISOString() : null)
+    const iso = newValue ? newValue.toISOString() : null
+    updateFormValue(key, iso)
+    runFieldAction(node, viewerContext, 'onChange', iso)
   }
 
-  // Convert value to dayjs if it exists
   const dayjsValue = value ? dayjs(value) : null
 
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <TimePicker
-          {...main}
-          value={dayjsValue}
-          onChange={handleChange}
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              fullWidth
-              error={!!error}
-              helperText={error || main.helperText}
-            />
-          )}
-        />
-      </LocalizationProvider>
+      <FieldLabel label={label} required={required} labelPosition={labelPosition} error={!!error}>
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <TimePicker
+            {...pickerProps}
+            value={dayjsValue}
+            onChange={handleChange}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                fullWidth
+                error={!!error}
+                helperText={error || helperText}
+              />
+            )}
+          />
+        </LocalizationProvider>
+      </FieldLabel>
     </ViewerComponentWrapper>
   )
 }

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

@@ -0,0 +1,525 @@
+import { Box, Typography } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { evaluateThreshold, resolveMuiColor } from 'services/builderHelper/thresholdEngine'
+import { schemaColor, DEFAULT_PALETTE } from 'services/builderHelper/colorSchema'
+import { formatNumber } from 'services/builderHelper/numberFormat'
+import { runKpiAction } from 'services/builderHelper/actionExecutor'
+
+// ── Status helpers ────────────────────────────────────────────────────────────
+
+const DONE_STATUSES    = new Set(['done', 'success', 'completed', 'approved', 'closed', 'resolved'])
+const ACTIVE_STATUSES  = new Set(['active', 'current', 'in-progress', 'inprogress', 'running', 'open'])
+const WARNING_STATUSES = new Set(['warning', 'warn', 'at-risk', 'atrisk', 'delayed'])
+const ERROR_STATUSES   = new Set(['error', 'failed', 'rejected', 'cancelled', 'blocked'])
+const PENDING_STATUSES = new Set(['pending', 'todo', 'future', 'upcoming', 'planned', 'not-started'])
+
+function classifyStatus(s) {
+  const v = (s || '').toLowerCase()
+  if (DONE_STATUSES.has(v))    return 'done'
+  if (ACTIVE_STATUSES.has(v))  return 'active'
+  if (WARNING_STATUSES.has(v)) return 'warning'
+  if (ERROR_STATUSES.has(v))   return 'error'
+  if (PENDING_STATUSES.has(v)) return 'pending'
+  return 'default'
+}
+
+// Default color per status class
+const CLASS_COLORS = {
+  done:    '#4caf50',
+  active:  '#1976d2',
+  warning: '#ff9800',
+  error:   '#f44336',
+  pending: '#bdbdbd',
+  default: '#bdbdbd',
+}
+
+// Badge colors (bg / text)
+const BADGE_STYLES = {
+  done:    { bg: '#e8f5e9', color: '#2e7d32' },
+  active:  { bg: '#e3f2fd', color: '#1565c0' },
+  warning: { bg: '#fff8e1', color: '#e65100' },
+  error:   { bg: '#ffebee', color: '#c62828' },
+  pending: { bg: '#f5f5f5', color: '#757575' },
+  default: { bg: '#f5f5f5', color: '#757575' },
+}
+
+// ── Sample data ───────────────────────────────────────────────────────────────
+
+const SAMPLE_EVENTS = [
+  {
+    label:       'Project kickoff',
+    date:        'Jan 12, 2025',
+    status:      'done',
+    description: 'Stakeholders aligned. Scope and budget finalized.',
+    value:       '100%',
+  },
+  {
+    label:       'Design review',
+    date:        'Jan 28, 2025',
+    status:      'done',
+    description: 'UI/UX designs approved by product team.',
+    value:       '100%',
+  },
+  {
+    label:       'Development sprint',
+    date:        'Feb 10, 2025',
+    status:      'active',
+    description: 'Backend APIs complete. Frontend 60% done.',
+    value:        '60%',
+  },
+  {
+    label:       'QA & testing',
+    date:        'Feb 24, 2025',
+    status:      'pending',
+    description: 'Regression suite and UAT sessions planned.',
+    value:       '—',
+  },
+  {
+    label:       'Production release',
+    date:        'Mar 5, 2025',
+    status:      'pending',
+    description: '',
+    value:       '—',
+  },
+]
+
+// ── Dot component ─────────────────────────────────────────────────────────────
+
+function TimelineDot({ sz, color, statusClass, dotStyle, icon }) {
+  const isPending = statusClass === 'pending' || dotStyle === 'ring'
+  const isDone    = statusClass === 'done'
+  const isActive  = statusClass === 'active'
+  const isWarning = statusClass === 'warning'
+  const isError   = statusClass === 'error'
+  const isAuto    = !dotStyle || dotStyle === 'auto'
+
+  // Inner glyph
+  const glyph = icon
+    ? icon
+    : isAuto
+      ? (isDone ? '✓' : isError ? '✕' : isWarning ? '!' : null)
+      : null
+
+  const useRing = isAuto ? isPending : dotStyle === 'ring'
+
+  return (
+    <Box sx={{ position: 'relative', flexShrink: 0 }}>
+      {/* Pulse ring for active */}
+      {isActive && (
+        <Box sx={{
+          position: 'absolute',
+          inset: -4,
+          borderRadius: '50%',
+          border: `2px solid ${color}`,
+          opacity: 0.35,
+          animation: 'none',
+        }} />
+      )}
+      <Box sx={{
+        width:          sz,
+        height:         sz,
+        borderRadius:   '50%',
+        bgcolor:        useRing ? 'transparent' : color,
+        border:         useRing ? `2px solid ${color}` : 'none',
+        display:        'flex',
+        alignItems:     'center',
+        justifyContent: 'center',
+        flexShrink:     0,
+        boxShadow:      isActive ? `0 0 0 3px ${color}28` : 'none',
+        transition:     'all .2s',
+      }}>
+        {glyph && (
+          <Typography sx={{
+            fontSize:   Math.max(8, sz * 0.52),
+            color:      useRing ? color : '#fff',
+            fontWeight: 800,
+            lineHeight: 1,
+            userSelect: 'none',
+          }}>
+            {glyph}
+          </Typography>
+        )}
+      </Box>
+    </Box>
+  )
+}
+
+// ── Connector line ────────────────────────────────────────────────────────────
+
+function Connector({ lineColor, lineWidth, lineStyle, filled, filledColor }) {
+  return (
+    <Box sx={{
+      flex:        1,
+      width:       lineWidth,
+      minHeight:   16,
+      mx:          'auto',
+      my:          '3px',
+      borderLeft:  `${lineWidth}px ${lineStyle} ${filled ? filledColor : lineColor}`,
+      opacity:     filled ? 0.9 : 0.45,
+    }} />
+  )
+}
+
+// ── Badge pill ────────────────────────────────────────────────────────────────
+
+function StatusBadge({ text, statusClass, fontSize }) {
+  const { bg, color } = BADGE_STYLES[statusClass] ?? BADGE_STYLES.default
+  return (
+    <Box sx={{
+      display:      'inline-flex',
+      alignItems:   'center',
+      px:           0.75,
+      py:           '1px',
+      borderRadius: 10,
+      bgcolor:      bg,
+      flexShrink:   0,
+    }}>
+      <Typography sx={{ fontSize: fontSize ?? 10, fontWeight: 600, color, lineHeight: 1.6, textTransform: 'capitalize' }}>
+        {text}
+      </Typography>
+    </Box>
+  )
+}
+
+// ── Content card ──────────────────────────────────────────────────────────────
+
+function EventContent({ item, labelField, dateField, descField, statusField, valueField,
+  showDate, showBadge, showValue, density, dotColor, statusClass, format, prefix, suffix }) {
+
+  const label  = item[labelField]  ?? '—'
+  const date   = item[dateField]
+  const desc   = item[descField]
+  const status = item[statusField]
+  const value  = valueField ? item[valueField] : null
+
+  const titleSz = density === 'compact' ? 12 : 13
+  const descSz  = density === 'compact' ? 11 : 12
+  const dateSz  = density === 'compact' ? 10 : 11
+
+  const formattedValue = value != null && typeof value === 'number'
+    ? formatNumber(value, { format, prefix, suffix })
+    : value
+
+  return (
+    <Box sx={{ flex: 1, minWidth: 0 }}>
+      {/* Title row */}
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexWrap: 'wrap' }}>
+        <Typography sx={{ fontSize: titleSz, fontWeight: 600, color: 'text.primary', lineHeight: 1.35 }}>
+          {label}
+        </Typography>
+        {showBadge && status && (
+          <StatusBadge text={status} statusClass={statusClass} fontSize={dateSz - 1} />
+        )}
+        {showValue && formattedValue != null && (
+          <Box sx={{ ml: 'auto', flexShrink: 0 }}>
+            <Typography sx={{ fontSize: dateSz, fontWeight: 700, color: dotColor }}>
+              {formattedValue}
+            </Typography>
+          </Box>
+        )}
+      </Box>
+
+      {/* Date */}
+      {showDate && date && (
+        <Typography sx={{ fontSize: dateSz, color: 'text.disabled', mt: 0.15, lineHeight: 1.3 }}>
+          {date}
+        </Typography>
+      )}
+
+      {/* Description */}
+      {desc && (
+        <Typography sx={{ fontSize: descSz, color: 'text.secondary', mt: 0.35, lineHeight: 1.45 }}>
+          {desc}
+        </Typography>
+      )}
+    </Box>
+  )
+}
+
+// ── Main renderer ─────────────────────────────────────────────────────────────
+
+export default function TimelineRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const { data, isEditMode } = viewerContext ?? {}
+  const inBuilder = isEditMode !== false
+
+  const {
+    // data
+    dataKey,
+    labelField  = 'label',
+    dateField   = 'date',
+    statusField = 'status',
+    descField   = 'description',
+    valueField,
+    iconField,
+
+    // coloring
+    colorSchema,
+    thresholds  = [],
+    colorMap    = {},
+    defaultColor = '#bdbdbd',
+
+    // layout
+    layout    = 'left',     // 'left' | 'right' | 'alternate'
+    density   = 'comfortable',  // 'comfortable' | 'compact'
+    maxItems,
+
+    // dot
+    dotSize   = 10,
+    dotStyle  = 'auto',    // 'auto' | 'filled' | 'ring'
+
+    // connector line
+    lineColor  = '#e0e0e0',
+    lineWidth  = 2,
+    lineStyle  = 'solid',  // 'solid' | 'dashed'
+    filledLine = true,     // done→done transitions show colored line
+
+    // active item indicator
+    activeKey,           // data key whose value identifies the active item
+    activeField,         // field on each item to match against activeKey value
+    activeColor = '#1976d2',  // highlight color for active card
+    showActiveLine = true,   // draw left accent bar on active item
+
+    // display toggles
+    showDate   = true,
+    showBadge  = false,
+    showValue  = false,
+
+    // format (for valueField if numeric)
+    format = 'number',
+    prefix = '',
+    suffix = '',
+  } = main
+
+  // Resolve active item identifier
+  const activeMatchValue = resolveValue(activeKey, data)
+
+  const rawItems = resolveValue(dataKey, data) ?? []
+  const sourceItems = Array.isArray(rawItems)
+    ? (maxItems ? rawItems.slice(0, Number(maxItems)) : rawItems)
+    : []
+  const items = (inBuilder && sourceItems.length === 0) ? SAMPLE_EVENTS : sourceItems
+
+  if (!inBuilder && items.length === 0) return null
+
+  const sz = Math.max(6, Number(dotSize) || 10)
+  const lw = Math.max(1, Number(lineWidth) || 2)
+
+  // Determine whether an item is "active" via activeKey/activeField binding,
+  // falling back to status classification when no explicit binding is set.
+  const isItemActive = (item) => {
+    if (activeMatchValue != null && activeField) {
+      return String(item[activeField]) === String(activeMatchValue)
+    }
+    if (activeMatchValue != null) {
+      // Match against label or id field if no activeField specified
+      return String(item['id'] ?? item[labelField] ?? '') === String(activeMatchValue)
+    }
+    // Fallback: treat status 'active'/'current' items as active
+    return classifyStatus(item[statusField]) === 'active'
+  }
+
+  // Safe-parse colorMap — it may arrive as a JSON string from expression fields
+  const safeColorMap = typeof colorMap === 'string'
+    ? (() => { try { return JSON.parse(colorMap) } catch { return {} } })()
+    : (colorMap && typeof colorMap === 'object' ? colorMap : {})
+
+  const resolveColor = (item, index) => {
+    const status = item[statusField]
+
+    // 1. Explicit colorMap override (e.g. {"done":"#4caf50","pending":"warning"})
+    if (status && safeColorMap[status]) return resolveMuiColor(safeColorMap[status]).color
+
+    // 2. colorSchema takes priority when explicitly configured
+    if (colorSchema?.mode) {
+      const c = schemaColor(colorSchema, index, item['color'] || null, items.length, DEFAULT_PALETTE)
+      if (c) return c
+    }
+
+    // 3. Thresholds — only meaningful for numeric statuses (avoid Number('done') === 0 false-match)
+    const numericStatus = status !== '' && status != null && !isNaN(Number(status))
+    if (numericStatus && thresholds?.length) {
+      const rule = evaluateThreshold(Number(status), thresholds)
+      if (rule) return resolveMuiColor(rule.color).color
+    }
+
+    // 4. Built-in semantic class colors
+    const cls = classifyStatus(status)
+    if (cls !== 'default') return CLASS_COLORS[cls]
+
+    // 5. Fallback — schema (no mode set) → item color field → defaultColor
+    return schemaColor(colorSchema, index, item['color'] || null, items.length, DEFAULT_PALETTE) ?? defaultColor
+  }
+
+  // ── Click action ─────────────────────────────────────────────────────────────
+  const hasClickAction = !!node.props?.actions?.onItemClick?.code
+  const handleItemClick = (item, index) => {
+    runKpiAction(node, viewerContext, 'onItemClick', {
+      clickedItem:   item,
+      clickedIndex:  index,
+      clickedLabel:  item[labelField],
+      clickedStatus: item[statusField],
+      clickedValue:  valueField ? item[valueField] : undefined,
+    })
+  }
+
+  // ── Item row renderer (shared for left/right) ────────────────────────────
+  const itemGap = density === 'compact' ? 1 : 1.5
+  const itemPb  = density === 'compact' ? 0.75 : 1.5
+
+  const renderItem = (item, i, side = 'left') => {
+    const isLast      = i === items.length - 1
+    const dotColor    = resolveColor(item, i)
+    const statusClass = classifyStatus(item[statusField])
+    const icon        = iconField ? item[iconField] : null
+    const active      = isItemActive(item)
+
+    const nextItem     = items[i + 1]
+    const nextDone     = nextItem ? classifyStatus(nextItem[statusField]) === 'done' : false
+    const lineIsFilled = filledLine && statusClass === 'done' && nextDone
+
+    const contentProps = {
+      item, labelField, dateField, descField, statusField, valueField,
+      showDate, showBadge, showValue, density,
+      dotColor: active ? activeColor : dotColor,
+      statusClass, format, prefix, suffix,
+    }
+
+    const dotCol = (
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0, width: sz }}>
+        <TimelineDot
+          sz={sz}
+          color={active ? activeColor : dotColor}
+          statusClass={statusClass} dotStyle={dotStyle} icon={icon}
+        />
+        {!isLast && (
+          <Connector
+            lineColor={lineColor} lineWidth={lw} lineStyle={lineStyle}
+            filled={lineIsFilled} filledColor={dotColor}
+          />
+        )}
+      </Box>
+    )
+
+    // Active card: subtle highlighted background + left accent bar
+    const contentCol = (
+      <Box
+        onClick={hasClickAction ? () => handleItemClick(item, i) : undefined}
+        sx={{
+          pb:           isLast ? 0 : itemPb,
+          flex:         1,
+          minWidth:     0,
+          cursor:       hasClickAction ? 'pointer' : 'default',
+          borderRadius: 1,
+          transition:   'background .15s',
+          ...(hasClickAction && { '&:hover': { bgcolor: 'action.hover' } }),
+          ...(active && {
+            bgcolor:    `${activeColor}0d`,
+            borderLeft: showActiveLine ? `3px solid ${activeColor}` : 'none',
+            pl:         showActiveLine ? 1 : 0,
+            pr:         0.75,
+            py:         0.5,
+            mb:         isLast ? 0 : itemPb * 0.5,
+          }),
+        }}
+      >
+        <EventContent {...contentProps} />
+      </Box>
+    )
+
+    if (side === 'right') {
+      return (
+        <Box key={i} sx={{ display: 'flex', gap: itemGap, flexDirection: 'row-reverse' }}>
+          {dotCol}
+          {contentCol}
+        </Box>
+      )
+    }
+
+    return (
+      <Box key={i} sx={{ display: 'flex', gap: itemGap }}>
+        {dotCol}
+        {contentCol}
+      </Box>
+    )
+  }
+
+  // ── Alternate layout ─────────────────────────────────────────────────────
+  if (layout === 'alternate') {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Box>
+          {items.map((item, i) => {
+            const isLast      = i === items.length - 1
+            const dotColor    = resolveColor(item, i)
+            const statusClass = classifyStatus(item[statusField])
+            const icon        = iconField ? item[iconField] : null
+            const isEven      = i % 2 === 0
+            const active      = isItemActive(item)
+
+            const nextItem     = items[i + 1]
+            const nextDone     = nextItem ? classifyStatus(nextItem[statusField]) === 'done' : false
+            const lineIsFilled = filledLine && statusClass === 'done' && nextDone
+
+            const effectiveColor = active ? activeColor : dotColor
+            const contentProps = {
+              item, labelField, dateField, descField, statusField, valueField,
+              showDate, showBadge, showValue, density,
+              dotColor: effectiveColor, statusClass,
+              format, prefix, suffix,
+            }
+
+            const activeSx = active ? {
+              bgcolor: `${activeColor}0d`, borderRadius: 1, px: 0.75, py: 0.5,
+            } : {}
+            const clickSx = hasClickAction ? {
+              cursor: 'pointer', transition: 'background .15s',
+              '&:hover': { bgcolor: 'action.hover' },
+            } : {}
+
+            return (
+              <Box key={i} sx={{ display: 'flex', gap: 1.5, alignItems: 'flex-start' }}>
+                {/* Left content (even items) */}
+                <Box
+                  onClick={hasClickAction && isEven ? () => handleItemClick(item, i) : undefined}
+                  sx={{ flex: 1, pb: isLast ? 0 : itemPb, textAlign: 'right', minWidth: 0, ...activeSx, ...(isEven && clickSx) }}
+                >
+                  {isEven && <EventContent {...contentProps} />}
+                </Box>
+
+                {/* Center spine */}
+                <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0, width: sz }}>
+                  <TimelineDot sz={sz} color={effectiveColor} statusClass={statusClass} dotStyle={dotStyle} icon={icon} />
+                  {!isLast && (
+                    <Connector
+                      lineColor={lineColor} lineWidth={lw} lineStyle={lineStyle}
+                      filled={lineIsFilled} filledColor={dotColor}
+                    />
+                  )}
+                </Box>
+
+                {/* Right content (odd items) */}
+                <Box
+                  onClick={hasClickAction && !isEven ? () => handleItemClick(item, i) : undefined}
+                  sx={{ flex: 1, pb: isLast ? 0 : itemPb, minWidth: 0, ...activeSx, ...(!isEven && clickSx) }}
+                >
+                  {!isEven && <EventContent {...contentProps} />}
+                </Box>
+              </Box>
+            )
+          })}
+        </Box>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ── Left / Right layout ──────────────────────────────────────────────────
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box>
+        {items.map((item, i) => renderItem(item, i, layout === 'right' ? 'right' : 'left'))}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -1,46 +1,40 @@
 import { FormControlLabel, Switch, FormHelperText, Box } from '@mui/material'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import FieldLabel from '../FieldLabel'
 import { resolveProps } from 'services/builderHelper/resolveProps'
+import { runFieldAction } from 'services/builderHelper/actionExecutor'
 
 export default function ToggleRenderer({ node, viewerContext }) {
   const { data, form, updateFormValue, validationErrors } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const main = resolveProps(node, 'main', viewerContext)
 
-  // Get component key
   const key = node.props?.main?.key?.value || node.props?.main?.key || node.id
-
-  // Get value from form state (boolean)
   const value = form[key] || false
+  const error = validationErrors?.[key]
 
-  // Get validation error
-  const error = validationErrors[key]
+  const { label, labelPosition, required, helperText, size, color, disabled } = main
 
-  const handleChange = (e) => {
+  const handleChange = e => {
     updateFormValue(key, e.target.checked)
+    runFieldAction(node, viewerContext, 'onChange', e.target.checked)
   }
 
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <Box>
-        <FormControlLabel
-          control={
-            <Switch
-              checked={Boolean(value)}
-              onChange={handleChange}
-              disabled={main.disabled}
-              size={main.size}
-              color={main.color || 'primary'}
-            />
-          }
-          label={main.label || ''}
-          labelPlacement={main.labelPlacement || 'end'}
-        />
-        {(error || main.helperText) && (
-          <FormHelperText error={!!error}>
-            {error || main.helperText}
-          </FormHelperText>
-        )}
-      </Box>
+      <FieldLabel label={label} required={required} labelPosition={labelPosition} error={!!error}>
+        <Box>
+          <Switch
+            checked={Boolean(value)}
+            onChange={handleChange}
+            disabled={disabled}
+            size={size}
+            color={color || 'primary'}
+          />
+          {(error || helperText) && (
+            <FormHelperText error={!!error}>{error || helperText}</FormHelperText>
+          )}
+        </Box>
+      </FieldLabel>
     </ViewerComponentWrapper>
   )
 }