robobyte-front-builder 1.0.17 → 1.0.21

package/src/views/builder/sidebar/tabs/Components/ComponentsTab.jsx

@@ -6,7 +6,11 @@ import PostService from 'services/PostService'
 import { Endpoints } from 'services/Endpoints'
 import fetchReportDataByPageId from 'services/reportData/fetchReportData'
 
-export default function ComponentsTab() {
+/**
+ * @param {object} [props.sections] - Optional custom section list (e.g. print catalog).
+ *   When provided, widget fetching is skipped and only these sections are shown.
+ */
+export default function ComponentsTab({ sections: sectionsProp }) {
   const [q, setQ] = useState('')
   const [widgets, setWidgets] = useState([])
 
@@ -25,46 +29,42 @@ export default function ComponentsTab() {
   }
 
   const sections = useMemo(() => {
-    // 1) Group widgets (manual groupBy — Object.groupBy requires Chrome 117+ / Node 21+)
-    const safeWidgets = Array.isArray(widgets) ? widgets : []
-    const grouped = safeWidgets.reduce((acc, x) => {
-      const key = x.widgetCategory?.name ?? 'Widgets'
-      ;(acc[key] ??= []).push(x)
-      return acc
-    }, {})
-    // 2) Convert grouped → sections
-    const newSections = Object.entries(grouped).map(([key, items]) => ({
-      key,
-      title: key,
-      items: items.map(item => ({
-        id: item.id,
-        label: item.name,
-        type: key,
-        value: item.value
+    // If a custom sections list is provided (e.g. print catalog), use it directly
+    // without merging widgets and without fetching from the API.
+    const baseComponents = sectionsProp ?? (() => {
+      const safeWidgets = Array.isArray(widgets) ? widgets : []
+      const grouped = safeWidgets.reduce((acc, x) => {
+        const key = x.widgetCategory?.name ?? 'Widgets'
+        ;(acc[key] ??= []).push(x)
+        return acc
+      }, {})
+      const widgetSections = Object.entries(grouped).map(([categoryName, items]) => ({
+        key: `widget__${categoryName}`,
+        title: categoryName,
+        items: items.map(item => ({
+          id: item.id,
+          label: item.name,
+          type: 'widget',
+          value: item.value
+        }))
       }))
-    }))
-    console.log(newSections)
+      return [...COMPONENT_SECTIONS, ...widgetSections]
+    })()
 
-    // 3) Merge with existing sections
-    const components = [...COMPONENT_SECTIONS, ...newSections]
+    if (!q) return baseComponents
 
-    // 4) If no search → return all
-    if (!q) return components
-
-    // 5) Filter
     const v = q.toLowerCase().trim()
-
-    return components
+    return baseComponents
       .map(section => ({
         ...section,
         items: section.items.filter(x => x.label.toLowerCase().includes(v) || x.type.toLowerCase().includes(v))
       }))
       .filter(section => section.items.length > 0)
-  }, [q, widgets])
+  }, [q, widgets, sectionsProp])
 
   useEffect(() => {
-    handleGetWidgets()
-  }, [])
+    if (!sectionsProp) handleGetWidgets()
+  }, [sectionsProp])
   return (
     <Box
       sx={{
@@ -85,7 +85,7 @@ export default function ComponentsTab() {
       {sections.map(section => (
         <Section key={section.key} title={section.title}>
           {section.items.map(item => (
-            <ComponentItem key={item.type} component={item} />
+            <ComponentItem key={item.id ?? item.type} component={item} />
           ))}
         </Section>
       ))}

package/src/views/builder/sidebar/tabs/Components/componentCatalog.js

@@ -4,11 +4,9 @@ export const COMPONENT_SECTIONS = [
     title: 'Fields',
     items: [
       { type: 'autocomplete', label: 'AutoComplete', icon: '📋' },
-      { type: 'calendar', label: 'Calendar', icon: '📆' },
       { type: 'checkbox', label: 'Checkbox', icon: '☑️' },
       { type: 'datepicker', label: 'DatePicker', icon: '📅' },
       { type: 'dropdown', label: 'Dropdown', icon: '⬇️' },
-      { type: 'google-map', label: 'Google Map', icon: '📍' },
       { type: 'input', label: 'Input', icon: '✏️' },
       { type: 'number', label: 'Number format', icon: '🔢' },
       { type: 'radio', label: 'Radio group', icon: '🔘' },
@@ -17,8 +15,7 @@ export const COMPONENT_SECTIONS = [
       { type: 'tag', label: 'Tag picker', icon: '🏷️' },
       { type: 'textarea', label: 'Text area', icon: '📄' },
       { type: 'time', label: 'Time picker', icon: '⏱️' },
-      { type: 'toggle', label: 'Toggle', icon: '🎚️' },
-      { type: 'upload', label: 'Uploader', icon: '⬆️' }
+      { type: 'toggle', label: 'Toggle', icon: '🎚️' }
     ]
   },
 
@@ -35,10 +32,12 @@ export const COMPONENT_SECTIONS = [
       { type: 'menu', label: 'Menu', icon: '📑' },
       { type: 'progress-circle', label: 'Progress circle', icon: '⭕' },
       { type: 'progress-line', label: 'Progress line', icon: '➖' },
-      { type: 'qrcode', label: 'QR Code', icon: '🔲' },
-      { type: 'tooltip', label: 'Tooltip', icon: '❓' },
-      { type: 'reportViewer', label: 'Report Viewer', icon: '🎚️' },
-
+      { type: 'popover', label: 'Popover', icon: '💬' },
+      { type: 'banner', label: 'Banner', icon: '🔔' },
+      { type: 'reportViewer',      label: 'Report Viewer', icon: '🎚️' },
+      { type: 'data-table-viewer', label: 'Data Table',   icon: '⊞'  },
+      { type: 'treeView',          label: 'Tree View',    icon: '🌲'  },
+      { type: 'viewRenderer',      label: 'View Renderer', icon: '🪟' },
     ]
   },
 
@@ -48,22 +47,45 @@ export const COMPONENT_SECTIONS = [
     items: [
       { type: 'breadcrumb', label: 'Breadcrumb', icon: '≫' },
       { type: 'card', label: 'Card', icon: '▭' },
-      { type: 'cell', label: 'Cell', icon: '▢' },
-      { type: 'column', label: 'Column', icon: '▮' },
-      { type: 'column-group', label: 'Column group', icon: '▦' },
       { type: 'container', label: 'Container', icon: '▢' },
-      { type: 'header-cell', label: 'Header cell', icon: '▣' },
       { type: 'repeater', label: 'Repeater', icon: '⟲' },
-      { type: 'tab', label: 'Tab', icon: '▤' },
-      { type: 'table', label: 'Table', icon: '▤' },
       { type: 'wizard', label: 'Wizard', icon: '①②' },
-      { type: 'wizard-step', label: 'Wizard step', icon: '①' },
-      { type: 'layout', label: 'Layout Grid', icon: '▦' }
+      { type: 'layout', label: 'Layout Grid', icon: '▦' },
+      { type: 'data-grid',     label: 'Data Grid',     icon: '🗃️' },
+      { type: 'excel-upload', label: 'Excel Upload',  icon: '📊' }
+    ]
+  },
+  {
+    key: 'dialogs',
+    title: 'Dialogs',
+    items: [
+      { type: 'dialog', label: 'Dialog', icon: '🪟' },
+    ]
+  },
+
+  {
+    key: 'kpi',
+    title: 'KPI & Data Viz',
+    items: [
+      { type: 'kpi-metric',       label: 'Metric',          icon: '🔢' },
+      { type: 'kpi-trend',        label: 'Trend',           icon: '📈' },
+      { type: 'kpi-badge',        label: 'Badge',           icon: '🏷️' },
+      { type: 'kpi-status-dot',   label: 'Status Dot',      icon: '🔵' },
+      { type: 'kpi-icon-box',     label: 'Icon Box',        icon: '⬛' },
+      { type: 'kpi-rating',       label: 'Rating',          icon: '⭐' },
+      { type: 'kpi-countdown',    label: 'Countdown',       icon: '⏳' },
+      { type: 'kpi-avatar-group', label: 'Avatar Group',    icon: '👥' },
+      { type: 'kpi-tag-list',     label: 'Tag List',        icon: '🏷️' },
+      { type: 'kpi-chart',        label: 'Chart',           icon: '📊' },
+      { type: 'kpi-gauge',        label: 'Gauge',           icon: '🕐' },
+      { type: 'kpi-donut',        label: 'Donut Chart',     icon: '🍩' },
+      { type: 'kpi-funnel',       label: 'Funnel',          icon: '🔽' },
+      { type: 'kpi-bullet',       label: 'Bullet Chart',    icon: '📏' },
+      { type: 'kpi-comparison',   label: 'Comparison Bars', icon: '📊' },
+      { type: 'kpi-color-scale',  label: 'Color Scale',     icon: '🌈' },
+      { type: 'kpi-heatmap',      label: 'Heatmap Grid',    icon: '🔥' },
+      { type: 'kpi-timeline',     label: 'Timeline',        icon: '📅' },
+      { type: 'kpi-step-stage',   label: 'Step / Stage',    icon: '➡️' },
     ]
   },
-  // {
-  //   key: 'widgets',
-  //   title: 'Widgets',
-  //   items: []
-  // }
 ]

package/src/views/builder/sidebar/tabs/Components/printComponentCatalog.js

@@ -0,0 +1,81 @@
+/**
+ * Component catalog for the Print Layout builder.
+ * Only display/layout components that make sense in a printed document.
+ */
+export const PRINT_COMPONENT_SECTIONS = [
+  {
+    key: 'print-layout',
+    title: 'Layout',
+    items: [
+      { type: 'layout',    label: 'Layout Grid', icon: '▦' },
+      { type: 'container', label: 'Container',   icon: '▢' },
+      { type: 'card',      label: 'Card',        icon: '▭' },
+      { type: 'divider',   label: 'Divider',     icon: '➖' },
+    ]
+  },
+  {
+    key: 'print-text',
+    title: 'Text',
+    items: [
+      { type: 'header',     label: 'Header',      icon: '🔠' },
+      { type: 'label',      label: 'Label',       icon: '🏷️' },
+      { type: 'richtext',   label: 'Rich Text',   icon: '🖋️' },
+      { type: 'link',       label: 'Link',        icon: '🔗' },
+      { type: 'banner',     label: 'Banner',      icon: '🔔' },
+      { type: 'pageNumber', label: 'Page Number', icon: '#' },
+    ]
+  },
+  {
+    key: 'print-media',
+    title: 'Media',
+    items: [
+      { type: 'image',     label: 'Image',     icon: '🖼️' },
+      { type: 'qrcode',   label: 'QR Code',   icon: '🔲' },
+      { type: 'signature', label: 'Signature', icon: '✍️' },
+    ]
+  },
+  {
+    key: 'print-form',
+    title: 'Form Fields',
+    items: [
+      { type: 'checkbox', label: 'Checkbox',    icon: '☑️' },
+      { type: 'radio',    label: 'Radio Group', icon: '🔘' },
+    ]
+  },
+  {
+    key: 'print-data',
+    title: 'Data',
+    items: [
+      { type: 'reportViewer',      label: 'Report Viewer', icon: '🎚️' },
+      { type: 'data-table-viewer', label: 'Data Table',   icon: '⊞'  },
+      { type: 'treeView',          label: 'Tree View',    icon: '🌲'  },
+      { type: 'table',             label: 'Table',        icon: '▤'  },
+      { type: 'repeater',       label: 'Repeater',         icon: '⟲'  },
+      { type: 'progress-circle', label: 'Progress Circle', icon: '⭕' },
+      { type: 'progress-line',   label: 'Progress Line',   icon: '➖' },
+    ]
+  },
+
+  {
+    key: 'print-kpi',
+    title: 'KPI & Data Viz',
+    items: [
+      { type: 'kpi-metric',      label: 'Metric',         icon: '🔢' },
+      { type: 'kpi-trend',       label: 'Trend',          icon: '📈' },
+      { type: 'kpi-badge',       label: 'Badge',          icon: '🏷️' },
+      { type: 'kpi-status-dot',  label: 'Status Dot',     icon: '🔵' },
+      { type: 'kpi-icon-box',    label: 'Icon Box',       icon: '⬛' },
+      { type: 'kpi-chart',       label: 'Chart',          icon: '📊' },
+      { type: 'kpi-gauge',       label: 'Gauge',          icon: '🕐' },
+      { type: 'kpi-donut',       label: 'Donut Chart',    icon: '🍩' },
+      { type: 'kpi-bullet',      label: 'Bullet Chart',   icon: '📏' },
+      { type: 'kpi-comparison',  label: 'Comparison Bars',icon: '📊' },
+      { type: 'kpi-color-scale', label: 'Color Scale',    icon: '🌈' },
+      { type: 'kpi-heatmap',     label: 'Heatmap Grid',   icon: '🔥' },
+      { type: 'kpi-timeline',    label: 'Timeline',       icon: '📅' },
+      { type: 'kpi-tag-list',    label: 'Tag List',       icon: '🏷️' },
+      { type: 'kpi-avatar-group',label: 'Avatar Group',   icon: '👥' },
+      { type: 'kpi-step-stage',  label: 'Step / Stage',   icon: '➡️' },
+    ]
+  },
+]

package/src/views/builder/sidebar/tabs/TimersTab.jsx

@@ -0,0 +1,338 @@
+import { useState } from 'react'
+import {
+  Box, Typography, IconButton, Button, TextField, Select, MenuItem,
+  FormControl, InputLabel, Switch, FormControlLabel, Chip, Tooltip, Divider,
+} from '@mui/material'
+import { Add, Delete, Edit, AccessTime, Replay } from '@mui/icons-material'
+import { useBuilder } from 'src/context/BuilderContext'
+import JSEditor from '../../JSEditor'
+import { HelpPopover } from '../../inspector/fields/FunctionHelpPopover'
+
+// ── Interval helpers ──────────────────────────────────────────────────────────
+
+const UNITS = [
+  { value: 'seconds', label: 's', ms: 1000 },
+  { value: 'minutes', label: 'm', ms: 60000 },
+  { value: 'hours',   label: 'h', ms: 3600000 },
+]
+
+function msToDisplay(ms) {
+  const n = Math.max(Number(ms) || 5000, 1000)
+  if (n >= 3600000 && n % 3600000 === 0) return { iVal: n / 3600000, iUnit: 'hours' }
+  if (n >= 60000   && n % 60000   === 0) return { iVal: n / 60000,   iUnit: 'minutes' }
+  return { iVal: Math.round(n / 1000), iUnit: 'seconds' }
+}
+
+function displayToMs(iVal, iUnit) {
+  const multiplier = UNITS.find(u => u.value === iUnit)?.ms ?? 1000
+  return Math.max(Number(iVal) * multiplier, 1000)
+}
+
+function formatInterval(ms) {
+  const { iVal, iUnit } = msToDisplay(ms)
+  return `${iVal} ${UNITS.find(u => u.value === iUnit)?.label}`
+}
+
+// ── Default code template ─────────────────────────────────────────────────────
+
+const DEFAULT_CODE = `async function Calculation(form, data, setData, dataRef, reportRefs, openDialog, closeDialog, urlParams, page) {
+  // Runs on every timer tick.
+  // Example: refresh data every N seconds
+  // const result = await GetService('/api/endpoint')
+  // setData(prev => ({ ...prev, items: result }))
+}
+`
+
+function makeTimer() {
+  return {
+    id: `tmr_${crypto.randomUUID().slice(0, 8)}`,
+    name: 'New Timer',
+    type: 'interval',
+    interval: 30000,
+    runOnLoad: false,
+    enabled: true,
+    code: DEFAULT_CODE,
+  }
+}
+
+// ── TimerRow — collapsed list item ────────────────────────────────────────────
+
+function TimerRow({ timer, onEdit, onDelete, onToggle }) {
+  return (
+    <Box
+      sx={{
+        display: 'flex', alignItems: 'center', gap: 1,
+        px: 1.5, py: 1,
+        borderRadius: 1,
+        border: '1px solid',
+        borderColor: 'divider',
+        bgcolor: 'background.paper',
+      }}
+    >
+      <Switch
+        size='small'
+        checked={timer.enabled}
+        onChange={e => onToggle(timer.id, e.target.checked)}
+        onClick={e => e.stopPropagation()}
+      />
+      <Box sx={{ flex: 1, minWidth: 0 }}>
+        <Typography variant='body2' sx={{ fontWeight: 500, lineHeight: 1.3 }} noWrap>
+          {timer.name || '(unnamed)'}
+        </Typography>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mt: 0.25 }}>
+          <Chip
+            size='small'
+            icon={timer.type === 'interval' ? <Replay sx={{ fontSize: 11 }} /> : <AccessTime sx={{ fontSize: 11 }} />}
+            label={timer.type === 'interval' ? 'Interval' : 'Delay'}
+            sx={{ height: 16, fontSize: 10, '.MuiChip-label': { px: 0.75 } }}
+            color={timer.type === 'interval' ? 'primary' : 'secondary'}
+            variant='outlined'
+          />
+          <Typography variant='caption' color='text.secondary'>
+            {formatInterval(timer.interval)}
+            {timer.type === 'interval' && timer.runOnLoad ? ' · fires on load' : ''}
+          </Typography>
+        </Box>
+      </Box>
+      <Tooltip title='Edit'>
+        <IconButton size='small' onClick={() => onEdit(timer)} sx={{ color: 'text.secondary' }}>
+          <Edit sx={{ fontSize: 15 }} />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title='Delete'>
+        <IconButton size='small' onClick={() => onDelete(timer.id)} sx={{ color: 'error.main' }}>
+          <Delete sx={{ fontSize: 15 }} />
+        </IconButton>
+      </Tooltip>
+    </Box>
+  )
+}
+
+// ── TimerEditor — expanded inline editor ──────────────────────────────────────
+
+const FIELD_LABEL_SX = {
+  fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
+  textTransform: 'uppercase', color: 'text.secondary', mb: 0.5,
+}
+
+function TimerEditor({ draft, onChange, onSave, onCancel }) {
+  const { iVal, iUnit } = msToDisplay(draft.interval)
+
+  const set = (key, value) => onChange({ ...draft, [key]: value })
+
+  const setInterval_ = (val, unit) =>
+    onChange({ ...draft, interval: displayToMs(val ?? iVal, unit ?? iUnit) })
+
+  return (
+    <Box
+      sx={{
+        borderRadius: 1.5,
+        border: '1px solid', borderColor: 'primary.main',
+        bgcolor: 'background.paper',
+        overflow: 'hidden',
+      }}
+    >
+      {/* ── Form body ── */}
+      <Box sx={{ p: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
+
+        {/* Name */}
+        <TextField
+          label='Name'
+          size='small'
+          fullWidth
+          value={draft.name}
+          onChange={e => set('name', e.target.value)}
+          autoFocus
+        />
+
+        {/* Type / N / Unit — three equal columns */}
+        <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 68px 1fr', gap: 1, alignItems: 'flex-start' }}>
+          <FormControl size='small' fullWidth>
+            <InputLabel>Type</InputLabel>
+            <Select label='Type' value={draft.type} onChange={e => set('type', e.target.value)}>
+              <MenuItem value='interval'>Interval</MenuItem>
+              <MenuItem value='delay'>Delay</MenuItem>
+            </Select>
+          </FormControl>
+
+          <TextField
+            size='small'
+            type='number'
+            label={draft.type === 'interval' ? 'Every' : 'After'}
+            inputProps={{ min: 1, style: { textAlign: 'center', MozAppearance: 'textfield' } }}
+            sx={{ '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': { display: 'none' } }}
+            value={String(iVal)}
+            onChange={e => setInterval_(e.target.value, iUnit)}
+          />
+
+          <FormControl size='small' fullWidth>
+            <InputLabel>Unit</InputLabel>
+            <Select label='Unit' value={iUnit} onChange={e => setInterval_(iVal, e.target.value)}>
+              {UNITS.map(u => (
+                <MenuItem key={u.value} value={u.value}>{u.value}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
+
+        {/* Toggles */}
+        <Box sx={{ display: 'flex', gap: 3 }}>
+          <FormControlLabel
+            control={<Switch size='small' checked={draft.enabled} onChange={e => set('enabled', e.target.checked)} />}
+            label={<Typography variant='body2'>Enabled</Typography>}
+            sx={{ m: 0, gap: 0.5 }}
+          />
+          {draft.type === 'interval' && (
+            <FormControlLabel
+              control={<Switch size='small' checked={draft.runOnLoad} onChange={e => set('runOnLoad', e.target.checked)} />}
+              label={<Typography variant='body2'>Fire on mount</Typography>}
+              sx={{ m: 0, gap: 0.5 }}
+            />
+          )}
+        </Box>
+
+        {/* Calculation label + help */}
+        <Box>
+          <Box sx={{ display: 'flex', alignItems: 'center', mb: 0.75 }}>
+            <Typography sx={FIELD_LABEL_SX}>Calculation</Typography>
+            <HelpPopover type='calculation' iconSx={{ ml: 0.5 }} />
+          </Box>
+          <JSEditor
+            value={draft.code}
+            expression={{ type: 'js', code: draft.code }}
+            mode='expression'
+            onChange={payload => {
+              if (payload?.expression?.code !== undefined) set('code', payload.expression.code)
+            }}
+          />
+        </Box>
+      </Box>
+
+      {/* ── Footer ── */}
+      <Box
+        sx={{
+          display: 'flex', justifyContent: 'flex-end', gap: 1,
+          px: 2, py: 1.25,
+          borderTop: '1px solid', borderColor: 'divider',
+          bgcolor: 'action.hover',
+        }}
+      >
+        <Button size='small' onClick={onCancel}>Cancel</Button>
+        <Button size='small' variant='contained' onClick={onSave}>Save</Button>
+      </Box>
+    </Box>
+  )
+}
+
+// ── Main TimersTab ────────────────────────────────────────────────────────────
+
+export default function TimersTab() {
+  const { schema, setSchema } = useBuilder()
+  const timers = schema.timers ?? []
+
+  const [editId, setEditId]   = useState(null) // id of timer being edited
+  const [draft, setDraft]     = useState(null) // editable copy of that timer
+  const [isNew, setIsNew]     = useState(false) // true when editing a just-added timer
+
+  // ── Helpers ───────────────────────────────────────────────────────────────
+
+  const startEdit = (timer, fresh = false) => {
+    setEditId(timer.id)
+    setDraft({ ...timer })
+    setIsNew(fresh)
+  }
+
+  const cancelEdit = () => {
+    if (isNew) {
+      // Remove the uncommitted timer from schema
+      setSchema(prev => ({ ...prev, timers: (prev.timers ?? []).filter(t => t.id !== editId) }))
+    }
+    setEditId(null)
+    setDraft(null)
+    setIsNew(false)
+  }
+
+  const saveEdit = () => {
+    setSchema(prev => ({
+      ...prev,
+      timers: (prev.timers ?? []).map(t => t.id === draft.id ? { ...draft } : t)
+    }))
+    setEditId(null)
+    setDraft(null)
+    setIsNew(false)
+  }
+
+  const handleAdd = () => {
+    const timer = makeTimer()
+    setSchema(prev => ({ ...prev, timers: [...(prev.timers ?? []), timer] }))
+    startEdit(timer, true)
+  }
+
+  const handleDelete = id => {
+    if (editId === id) { setEditId(null); setDraft(null) }
+    setSchema(prev => ({ ...prev, timers: (prev.timers ?? []).filter(t => t.id !== id) }))
+  }
+
+  const handleToggle = (id, enabled) => {
+    setSchema(prev => ({
+      ...prev,
+      timers: (prev.timers ?? []).map(t => t.id === id ? { ...t, enabled } : t)
+    }))
+  }
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  return (
+    <Box sx={{ p: 2, height: '100%', display: 'flex', flexDirection: 'column', gap: 2, overflowY: 'auto' }}>
+
+      {/* Header */}
+      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <Typography variant='h6' sx={{ lineHeight: 1.3 }}>Timers</Typography>
+          <Typography variant='caption' color='text.secondary' sx={{ display: 'block', lineHeight: 1.4 }}>
+            Run code on a schedule in preview / production
+          </Typography>
+        </Box>
+        <Tooltip title='Add timer'>
+          <IconButton size='small' onClick={handleAdd} color='primary' sx={{ mt: 0.25, flexShrink: 0 }}>
+            <Add />
+          </IconButton>
+        </Tooltip>
+      </Box>
+
+      {/* Empty state */}
+      {timers.length === 0 && (
+        <Box sx={{ textAlign: 'center', py: 6, color: 'text.disabled' }}>
+          <AccessTime sx={{ fontSize: 36, mb: 1, opacity: 0.4 }} />
+          <Typography variant='body2'>No timers yet</Typography>
+          <Button size='small' startIcon={<Add />} onClick={handleAdd} sx={{ mt: 1.5 }}>
+            Add Timer
+          </Button>
+        </Box>
+      )}
+
+      {/* Timer list */}
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+        {timers.map(timer =>
+          editId === timer.id ? (
+            <TimerEditor
+              key={timer.id}
+              draft={draft}
+              onChange={setDraft}
+              onSave={saveEdit}
+              onCancel={cancelEdit}
+            />
+          ) : (
+            <TimerRow
+              key={timer.id}
+              timer={timer}
+              onEdit={t => startEdit(t, false)}
+              onDelete={handleDelete}
+              onToggle={handleToggle}
+            />
+          )
+        )}
+      </Box>
+    </Box>
+  )
+}

package/src/views/builder/sidebar/tabs/TreeTab.jsx

@@ -4,15 +4,15 @@ import { useContext, useState } from 'react'
 import { BuilderProvider, useBuilder } from 'src/context/BuilderContext'
 import Button from '@mui/material/Button'
 import IconButton from '@mui/material/IconButton'
-import { duplicateInTree } from 'services/builderHelper/builderHelper'
-import {Save} from '@mui/icons-material'
+import { duplicateInTree, writeNodeToClipboard } from 'services/builderHelper/builderHelper'
+import { Save, ContentCopy as CopyIcon } from '@mui/icons-material'
 import { removeFromTree } from 'services/builderHelper'
 import SaveWidgetDialog from 'views/builder/viewer/SaveWidgetDialog'
 import PostService from 'services/PostService'
 import { Endpoints } from 'services/Endpoints'
 
 function TreeNode({ node, level = 0 }) {
-  const { selectedId, setSelectedId,setSchema,schema } = useBuilder()
+  const { selectedId, setSelectedId, setSchema, schema, setClipboard } = useBuilder()
   const [expanded, setExpanded] = useState(true)
   const [anchorEl, setAnchorEl] = useState(null)
   const [selectedChildRow, setSelectedChildRow] = useState()
@@ -54,6 +54,12 @@ function TreeNode({ node, level = 0 }) {
   const handleSaveClick = () => {
     setSaveDialogOpen(true)
   }
+  const handleCopy = e => {
+    e.stopPropagation()
+    if (setClipboard) setClipboard(node)
+    writeNodeToClipboard(node)   // also write to system clipboard (cross-tab)
+  }
+
   const handleDuplicate = e => {
     e.stopPropagation()
     if (setSchema) {
@@ -161,7 +167,10 @@ function TreeNode({ node, level = 0 }) {
             padding: '5px'
           }}
         >
-          <IconButton size='small' onClick={handleDuplicate} sx={{ color: 'primary', p: 0.5 }}>
+          <IconButton size='small' onClick={handleCopy} title='Copy' sx={{ color: 'primary', p: 0.5 }}>
+            <CopyIcon fontSize='small' />
+          </IconButton>
+          <IconButton size='small' onClick={handleDuplicate} title='Duplicate' sx={{ color: 'primary', p: 0.5 }}>
             <ContentCopy fontSize='small' />
           </IconButton>
           <IconButton size='small' onClick={handleSaveClick} sx={{ color: 'primary', p: 0.5 }}>

package/src/views/builder/sidebar/tabs/ViewTab.jsx

@@ -28,7 +28,7 @@ export default function ViewTab() {
     try {
       setIsLoading(true)
       let data = {
-        id : viewMetaData?.id ?? null,
+        id : viewMetaData?.id ?? 0,
         title: values.title,
         viewId: values.viewId,
         groupId: values.groupId ?? null,