robobyte-front-builder 1.0.19 → 1.0.23

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

@@ -1,6 +1,14 @@
 import {
-  Box, Button,
-  CircularProgress,TextField } from '@mui/material'
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField
+} from '@mui/material'
+import ContentCopyOutlinedIcon from '@mui/icons-material/ContentCopyOutlined'
 import { useBuilder } from 'context/BuilderContext'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
@@ -9,14 +17,36 @@ import { Endpoints, Services } from 'services/Endpoints'
 import Typography from '@mui/material/Typography'
 import GroupLevelAutocomplete from 'views/builder/sidebar/tabs/Components/GroupLevelAutocomplete'
 
+// ── Defaults for the "Save As New" dialog ──────────────────────────────────
+// "Copy of X" is the universal duplicate convention (Excel, Photoshop, …).
+// viewIds must be unique server-side, so we append "_copy" — the user can
+// edit before submitting if the suffix would collide with an existing view.
+function suggestCopyTitle(title) {
+  const t = (title ?? '').trim()
+  if (!t) return 'Copy'
+  if (/^copy of\b/i.test(t)) return t // don't recursively prefix "Copy of Copy of …"
+  return `Copy of ${t}`
+}
 
+function suggestCopyViewId(viewId) {
+  const v = (viewId ?? '').trim()
+  if (!v) return ''
+  if (/_copy$/i.test(v)) return `${v}_${Date.now().toString(36)}`
+  return `${v}_copy`
+}
 
 export default function ViewTab() {
   const router = useRouter()
-  const { id} = router.query
-  const { viewMetaData,setViewMetaData,schema, setSchema } = useBuilder()
+  const { viewMetaData, setViewMetaData, schema, markClean, logSchema } = useBuilder()
   const [isLoading, setIsLoading] = useState(false)
-  const { control, handleSubmit, reset,errors } = useForm({
+
+  // Save As New / Duplicate
+  const [duplicateOpen, setDuplicateOpen]   = useState(false)
+  const [isDuplicating, setIsDuplicating]   = useState(false)
+  const [duplicateTitle, setDuplicateTitle] = useState('')
+  const [duplicateViewId, setDuplicateViewId] = useState('')
+
+  const { control, handleSubmit, reset, errors } = useForm({
     defaultValues: {
       title: viewMetaData?.title || '',
       viewId: null,
@@ -28,19 +58,18 @@ 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,
         value: JSON.stringify(schema)
       }
 
-      let response = null;
+      let response = null
 
-      if(viewMetaData.isNew) {
+      if (viewMetaData.isNew) {
         response = await Services.PostService(Endpoints.UiBuilder.Post.AddUpdate, true, data)
-      }
-      else {
+      } else {
         response = await Services.UpdateService(
           Endpoints.UiBuilder.Post.AddUpdate,
           true,
@@ -58,6 +87,16 @@ export default function ViewTab() {
           groupId: values.groupId,
           id: viewMetaData.id ?? response.data
         }))
+        markClean?.()
+        try {
+          logSchema?.({
+            builder: 'ui',
+            trigger: 'save',
+            title: values.title,
+            viewMetaData: { id: viewMetaData.id ?? response.data, title: values.title, viewId: values.viewId },
+            schema
+          })
+        } catch (e) { console.warn('[sessionLog] log on save failed:', e) }
       }
     } catch (error) {
       console.error(error)
@@ -65,6 +104,71 @@ export default function ViewTab() {
       setIsLoading(false)
     }
   }
+
+  // ── Save As New ────────────────────────────────────────────────────────────
+  // Always POSTs with id: 0 so the backend creates a new row. Title + viewId
+  // come from the dialog form (pre-filled with sensible "Copy of …" defaults
+  // but editable). On success, navigate to the new view via URL so the
+  // standard load path in viewBuilder/index.jsx picks it up — no manual
+  // state sync needed.
+  const openDuplicateDialog = () => {
+    setDuplicateTitle(suggestCopyTitle(viewMetaData?.title))
+    setDuplicateViewId(suggestCopyViewId(viewMetaData?.viewId))
+    setDuplicateOpen(true)
+  }
+
+  const closeDuplicateDialog = () => {
+    if (isDuplicating) return
+    setDuplicateOpen(false)
+  }
+
+  const handleSaveAsNew = async () => {
+    if (!schema?.root) return
+    const title  = (duplicateTitle ?? '').trim()
+    const viewId = (duplicateViewId ?? '').trim()
+    if (!title)  return
+    if (!viewId) return
+
+    try {
+      setIsDuplicating(true)
+      const data = {
+        id: 0,
+        title,
+        viewId,
+        groupId: viewMetaData?.groupId ?? null,
+        value: JSON.stringify(schema)
+      }
+      const response = await Services.PostService(Endpoints.UiBuilder.Post.AddUpdate, true, data)
+      if (!response) return
+
+      const newId = response.data
+      markClean?.()
+      // Log the new view as a fresh save (becomes a labelable training example).
+      try {
+        logSchema?.({
+          builder: 'ui',
+          trigger: 'duplicate',
+          title,
+          viewMetaData: { id: newId, title, viewId, groupId: viewMetaData?.groupId ?? null },
+          schema
+        })
+      } catch (e) { console.warn('[sessionLog] log on duplicate failed:', e) }
+
+      // Hand off to the page's load path — switching `id` in the query triggers
+      // viewBuilder/index.jsx's useEffect → handleGetView → loadSchema.
+      setDuplicateOpen(false)
+      await router.push(
+        { pathname: router.pathname, query: { ...router.query, id: newId } },
+        undefined,
+        { shallow: false }
+      )
+    } catch (error) {
+      console.error('Save As New failed:', error)
+    } finally {
+      setIsDuplicating(false)
+    }
+  }
+
   useEffect(() => {
     reset({
       title: viewMetaData?.title,
@@ -73,6 +177,7 @@ export default function ViewTab() {
     })
   }, [viewMetaData])
 
+  const canDuplicate = Boolean(schema?.root)
 
   return (
     <Box p={2}>
@@ -104,9 +209,7 @@ export default function ViewTab() {
           />
           <GroupLevelAutocomplete selectedViewGroup={viewMetaData?.group} control={control} errors={errors} />
           <Button
-            sx={{
-              mt: 2
-            }}
+            sx={{ mt: 2 }}
             type='submit'
             size={'small'}
             fullWidth={true}
@@ -115,8 +218,65 @@ export default function ViewTab() {
           >
             {isLoading ? <CircularProgress size={24} /> : 'Save'}
           </Button>
+          <Button
+            size='small'
+            fullWidth
+            variant='outlined'
+            startIcon={<ContentCopyOutlinedIcon fontSize='small' />}
+            onClick={openDuplicateDialog}
+            disabled={!canDuplicate || isLoading || isDuplicating}
+            sx={{ mt: -1.5 }}
+          >
+            Save As New
+          </Button>
         </Box>
       </form>
+
+      {/* ── Save As New / Duplicate dialog ───────────────────────────────────── */}
+      <Dialog open={duplicateOpen} onClose={closeDuplicateDialog} maxWidth='xs' fullWidth>
+        <DialogTitle>Save As New View</DialogTitle>
+        <DialogContent>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 1 }}>
+            <Box>
+              <Typography variant='body2'>Title</Typography>
+              <TextField
+                autoFocus
+                size='small'
+                fullWidth
+                value={duplicateTitle}
+                onChange={e => setDuplicateTitle(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter' && duplicateTitle.trim() && duplicateViewId.trim()) handleSaveAsNew() }}
+                disabled={isDuplicating}
+              />
+            </Box>
+            <Box>
+              <Typography variant='body2'>View ID</Typography>
+              <TextField
+                size='small'
+                fullWidth
+                value={duplicateViewId}
+                onChange={e => setDuplicateViewId(e.target.value)}
+                helperText='Must be unique. Edit if "<id>_copy" already exists.'
+                disabled={isDuplicating}
+              />
+            </Box>
+            <Typography variant='caption' color='text.secondary'>
+              The current schema will be saved as a brand-new view. The original is untouched.
+              You will be navigated to the new view after save.
+            </Typography>
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={closeDuplicateDialog} disabled={isDuplicating}>Cancel</Button>
+          <Button
+            variant='contained'
+            onClick={handleSaveAsNew}
+            disabled={isDuplicating || !duplicateTitle.trim() || !duplicateViewId.trim()}
+          >
+            {isDuplicating ? <CircularProgress size={20} /> : 'Save As New'}
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Box>
   )
 }