robobyte-front-builder 1.0.0

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

@@ -0,0 +1,269 @@
+import { useEffect, useState } from 'react'
+import fetchReportDataByPageId from 'services/reportData/fetchReportData'
+import { Endpoints, Services } from 'services/Endpoints'
+import { Controller } from 'react-hook-form'
+import { Autocomplete, Box, Button, CircularProgress, TextField } from '@mui/material'
+import IconButton from '@mui/material/IconButton'
+import { ChevronLeft, Plus } from 'mdi-material-ui'
+import Paper from '@mui/material/Paper'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+
+const normalize = s => (s || '').trim().replace(/\s+/g, ' ')
+const sameName = (a, b) => normalize(a).toLowerCase() === normalize(b).toLowerCase()
+
+export default function GroupLevelAutocomplete({ selectedViewGroup,control, errors }) {
+  const [open, setOpen] = useState(false)
+  const [groups, setGroups] = useState(false)
+  const [selectedGroup, setSelectedGroup] = useState(null)
+  const [selectedLabel, setSelectedLabel] = useState('')
+  const [breadcrumb, setBreadcrumb] = useState([])
+  const [inputValue, setInputValue] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [creating, setCreating] = useState(false)
+  const currentLevelId = breadcrumb.length ? breadcrumb[breadcrumb.length - 1].id : null
+
+  async function handleGetGroup(id) {
+    try {
+      setLoading(true)
+
+      let filter = {
+        Tfilter: [{ path: 'parentGroupId', method: 'Equals', value: true, checkForNull: true }]
+      }
+      if (id != null) {
+        filter = {
+          Tfilter: [{ path: 'parentGroupId', method: 'Equals', value: id }]
+        }
+      }
+
+      const res = await fetchReportDataByPageId({
+        pageId: '8e36a817-ceb3-499c-accf-f2a1e720be0b',
+        dataAsObject: true,
+        filter
+      })
+
+      if (res?.rows) setGroups(res.rows)
+      else setGroups([])
+    } catch (e) {
+      console.error(e)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function createGroup(name, parentGroupId) {
+    // يرجع: { id, name, parentGroupId }
+    const payload = {
+      name: normalize(name),
+      parentGroupId: parentGroupId ?? null
+    }
+
+    // ✅ عدّل endpoint حسب مشروعك
+    const res = await Services.PostService(Endpoints.UiBuilder.Post.AddUpdateGroup, true, payload)
+    return res?.data
+  }
+
+  const handleOpen = async () => {
+    setOpen(true)
+    await handleGetGroup(currentLevelId)
+  }
+
+  const handleClose = () => setOpen(false)
+
+  async function goTopLevel() {
+    setBreadcrumb([])
+    setInputValue('')
+    await handleGetGroup(null)
+  }
+
+  async function goToCrumb(index, crumb) {
+    setBreadcrumb(prev => prev.slice(0, index + 1))
+    setInputValue('')
+    await handleGetGroup(crumb?.id ?? null)
+  }
+
+  function chooseGroup(item, field) {
+    field.onChange(item.id)
+    setSelectedGroup(item)
+    setOpen(false)
+  }
+  async function goDeeper(item, field) {
+    field.onChange(item.id)
+
+    setBreadcrumb(prev => [...prev, { id: item.id, name: item.name }])
+    setInputValue('')
+    await handleGetGroup(item.id)
+  }
+
+  async function handleEnter(field) {
+    const name = normalize(inputValue)
+    if (!name) return
+
+    const existing = (groups || []).find(g => sameName(g.name, name))
+    if (existing) {
+      await goDeeper(existing, field)
+      return
+    }
+
+    try {
+      setCreating(true)
+      const created = await createGroup(name, currentLevelId)
+      if (!created?.id) return
+
+      await goDeeper(created, field)
+    } catch (e) {
+      console.error(e)
+    } finally {
+      setCreating(false)
+    }
+  }
+  async function openChildren(item, field) {
+    field.onChange(item.id)
+    setSelectedLabel(item.name)
+
+    setBreadcrumb(prev => [...prev, { id: item.id, name: item.name }])
+    setInputValue('')
+    await handleGetGroup(item.id)
+  }
+
+  useEffect(() => {
+    setSelectedGroup(selectedViewGroup)
+  },[selectedViewGroup])
+  return (
+    <Controller
+      name='groupId'
+      control={control}
+      render={({ field }) => (
+        <Autocomplete
+          fullWidth
+          sx={{
+            mt: 3
+          }}
+          size='small'
+          open={open}
+          onOpen={handleOpen}
+          onClose={handleClose}
+          options={groups || []}
+          loading={loading}
+          value={selectedGroup}
+          inputValue={inputValue}
+          onInputChange={(_, v) => setInputValue(v)}
+          isOptionEqualToValue={(option, value) => option?.id === value?.id}
+          getOptionLabel={option => option?.name || ''}
+          renderOption={(props, option) => (
+            <li {...props} key={option.id} style={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ flex: 1, pr: 1 }}>{option.name}</Box>
+              <IconButton
+                size='small'
+                onMouseDown={e => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                }}
+                onClick={e => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  chooseGroup(option, field)
+                }}
+                title='Choose'
+              >
+                <Plus fontSize='small' />
+              </IconButton>
+              <IconButton
+                size='small'
+                onMouseDown={e => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                }}
+                onClick={async e => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  await openChildren(option, field)
+                }}
+                title='Open children'
+              >
+                <ChevronLeft fontSize='small' />
+              </IconButton>
+            </li>
+          )}
+          PaperComponent={({ children, ...props }) => (
+            <Paper {...props} sx={{ maxHeight: 400, overflow: 'auto' }}>
+              {/* Breadcrumb header */}
+              {breadcrumb.length > 0 && (
+                <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
+                    <Button
+                      size='small'
+                      onMouseDown={e => {
+                        e.preventDefault()
+                        e.stopPropagation()
+                      }}
+                      onClick={async e => {
+                        e.preventDefault()
+                        e.stopPropagation()
+                        await goTopLevel()
+                      }}
+                    >
+                      الرئيسية
+                    </Button>
+
+                    {breadcrumb.map((crumb, index) => (
+                      <Box key={crumb.id} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                        <Typography variant='caption'>/</Typography>
+                        <Button
+                          size='small'
+                          onMouseDown={e => {
+                            e.preventDefault()
+                            e.stopPropagation()
+                          }}
+                          onClick={async e => {
+                            e.preventDefault()
+                            e.stopPropagation()
+                            await goToCrumb(index, crumb)
+                          }}
+                        >
+                          {crumb.name}
+                        </Button>
+                      </Box>
+                    ))}
+                  </Box>
+                </Box>
+              )}
+
+              {children}
+            </Paper>
+          )}
+          renderInput={params => (
+            <TextField
+              {...params}
+              label='Group'
+              error={Boolean(errors?.groupId)}
+              placeholder='اختر مجموعة أو اكتب اسم واضغط Enter'
+              onKeyDown={async e => {
+                if (e.key === 'Enter') {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  await handleEnter(field)
+                }
+              }}
+              InputProps={{
+                ...params.InputProps,
+                endAdornment: (
+                  <>
+                    {creating ? <CircularProgress size={18} /> : null}
+                    {params.InputProps.endAdornment}
+                  </>
+                )
+              }}
+            />
+          )}
+          renderTags={() => {
+            if (!field.value || !selectedLabel) return null
+            return (
+              <Chip label={selectedLabel} size='small' color='primary' sx={{ borderRadius: 1, fontWeight: 'medium' }} />
+            )
+          }}
+        />
+      )}
+    />
+  )
+}

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

@@ -0,0 +1,69 @@
+export const COMPONENT_SECTIONS = [
+  {
+    key: 'fields',
+    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: '🔘' },
+      { type: 'richtext', label: 'Rich text editor', icon: '🖋️' },
+      { type: 'signature', label: 'Signature', icon: '✍️' },
+      { 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: '⬆️' }
+    ]
+  },
+
+  {
+    key: 'static',
+    title: 'Static',
+    items: [
+      { type: 'button', label: 'Button', icon: '🔘' },
+      { type: 'divider', label: 'Divider', icon: '➖' },
+      { type: 'header', label: 'Header', icon: '🔠' },
+      { type: 'image', label: 'Image', icon: '🖼️' },
+      { type: 'label', label: 'Label', icon: '🏷️' },
+      { type: 'link', label: 'Link', icon: '🔗' },
+      { 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: '🎚️' },
+
+    ]
+  },
+
+  {
+    key: 'structure',
+    title: 'Structure',
+    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: '▦' }
+    ]
+  },
+  // {
+  //   key: 'widgets',
+  //   title: 'Widgets',
+  //   items: []
+  // }
+]

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

@@ -0,0 +1,205 @@
+import { Box, Popover, Typography } from '@mui/material'
+import { ChevronRight, ChevronDown, Pencil, DotsVerticalCircleOutline, Delete, ContentCopy } from 'mdi-material-ui'
+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 { 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 [expanded, setExpanded] = useState(true)
+  const [anchorEl, setAnchorEl] = useState(null)
+  const [selectedChildRow, setSelectedChildRow] = useState()
+  const hasChildren = node.children && node.children.length > 0
+  const isSelected = selectedId === node.id
+  const [saveDialogOpen, setSaveDialogOpen] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+  const handleToggle = (e) => {
+    e.stopPropagation()
+    setExpanded(!expanded)
+  }
+
+
+  const handleSelect = () => {
+    setSelectedId(node.id)
+  }
+
+  // Get node label from props or use type as fallback
+  const getNodeLabel = () => {
+    // Priority: key > label > type (key)
+    const key = node.props?.main?.key?.value || node.props?.main?.key
+    if (key && typeof key === 'string') return key
+
+    const label = node.props?.main?.label?.value || node.props?.main?.label
+    if (label && typeof label === 'string') return label
+
+    return `${node.type} (${key || node.id})`
+  }
+  const handleDelete = e => {
+    e.stopPropagation()
+    if (setSchema) {
+      setSchema(prev => ({
+        ...prev,
+        root: removeFromTree(prev.root, node.id)
+      }))
+      setSelectedId(null)
+    }
+  }
+  const handleSaveClick = () => {
+    setSaveDialogOpen(true)
+  }
+  const handleDuplicate = e => {
+    e.stopPropagation()
+    if (setSchema) {
+      setSchema(prev => ({
+        ...prev,
+        root: duplicateInTree(prev.root, node.id)
+      }))
+    }
+  }
+  const handleSave = async values => {
+    if (!node) {
+      console.error('No schema to save')
+      return
+    }
+    setIsSaving(true)
+    try {
+      const data = {
+        name: values?.title,
+        widgetCategoryId: values.category?.id,
+        value: JSON.stringify(node)
+      }
+
+      const response = await PostService(Endpoints.Widget.Post.Add, true, data)
+
+      if (response) {
+        setSaveDialogOpen(false)
+      }
+    } catch (error) {
+      console.error('Error saving view:', error)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+  return (
+    <Box>
+      <Box
+        onClick={handleSelect}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          py: 0.5,
+          px: 1,
+          pl: level * 2 + 1,
+          cursor: 'pointer',
+          bgcolor: isSelected ? 'primary.main' : 'transparent',
+          color: isSelected ? 'primary.contrastText' : 'text.primary',
+          '&:hover': {
+            bgcolor: isSelected ? 'primary.dark' : 'action.hover'
+          },
+          borderRadius: 1,
+          mb: 0.5
+        }}
+      >
+        {hasChildren ? (
+          <Box
+            onClick={handleToggle}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              mr: 0.5,
+              cursor: 'pointer'
+            }}
+          >
+            {expanded ? <ChevronDown fontSize='small' /> : <ChevronRight fontSize='small' />}
+          </Box>
+        ) : (
+          <Box sx={{ width: 24, mr: 0.5 }} />
+        )}
+
+        <Typography variant='body2' sx={{ flex: 1, fontSize: 13 }}>
+          {getNodeLabel()} <span style={{ opacity: 0.5 }}>{node.type}</span>
+        </Typography>
+
+        {/*<Typography variant="caption" sx={{ opacity: 0.7, fontSize: 11, ml: 1 }}>*/}
+        {/*  {node.type}*/}
+        {/*</Typography>*/}
+        <IconButton
+          size={'small'}
+          onClick={e => {
+            setAnchorEl(e.currentTarget)
+            setSelectedChildRow(node)
+          }}
+        >
+          <DotsVerticalCircleOutline />
+        </IconButton>
+      </Box>
+      <Popover
+        anchorEl={anchorEl}
+        open={anchorEl != null}
+        onClick={() => setAnchorEl(null)}
+        onClose={() => {
+          setAnchorEl(null)
+        }}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center'
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center'
+        }}
+      >
+        <Box
+          sx={{
+            padding: '5px'
+          }}
+        >
+          <IconButton size='small' onClick={handleDuplicate} sx={{ color: 'primary', p: 0.5 }}>
+            <ContentCopy fontSize='small' />
+          </IconButton>
+          <IconButton size='small' onClick={handleSaveClick} sx={{ color: 'primary', p: 0.5 }}>
+            <Save fontSize='small' />
+          </IconButton>
+          <IconButton size='small' onClick={handleDelete} sx={{ color: 'primary', p: 0.5 }}>
+            <Delete fontSize='small' />
+          </IconButton>
+        </Box>
+      </Popover>
+      <SaveWidgetDialog open={saveDialogOpen} onClose={() => setSaveDialogOpen(false)} onSave={handleSave} />
+      {hasChildren && expanded && (
+        <Box>
+          {node.children.map(child => (
+            <TreeNode key={child.id} node={child} level={level + 1} />
+          ))}
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+export default function TreeTab() {
+  const { schema } = useBuilder()
+
+  if (!schema?.root) {
+    return (
+      <Box p={2}>
+        <Typography variant="body2" color="text.disabled">
+          No schema available
+        </Typography>
+      </Box>
+    )
+  }
+
+  return (
+    <Box sx={{ p: 1, overflowY: 'auto', height: '100%' }}>
+      <TreeNode node={schema.root} level={0} />
+    </Box>
+  )
+}

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

@@ -0,0 +1,121 @@
+import {
+  Box, Button,
+  CircularProgress,TextField } from '@mui/material'
+import { useBuilder } from 'context/BuilderContext'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import { Endpoints, Services } from 'services/Endpoints'
+import Typography from '@mui/material/Typography'
+import GroupLevelAutocomplete from 'views/builder/sidebar/tabs/Components/GroupLevelAutocomplete'
+
+
+
+export default function ViewTab() {
+  const router = useRouter()
+  const { id} = router.query
+  const { viewMetaData,setViewMetaData,schema, setSchema } = useBuilder()
+  const [isLoading, setIsLoading] = useState(false)
+  const { control, handleSubmit, reset,errors } = useForm({
+    defaultValues: {
+      title: viewMetaData?.title || '',
+      viewId: null,
+      groupId: null
+    }
+  })
+
+  const onSubmit = async values => {
+    try {
+      setIsLoading(true)
+      let data = {
+        id : viewMetaData?.id ?? null,
+        title: values.title,
+        viewId: values.viewId,
+        groupId: values.groupId ?? null,
+        value: JSON.stringify(schema)
+      }
+
+      let response = null;
+
+      if(viewMetaData.isNew) {
+        response = await Services.PostService(Endpoints.UiBuilder.Post.AddUpdate, true, data, {
+          id: viewMetaData.isNew ? 0 : viewMetaData.id
+        })
+      }
+      else {
+        response = await Services.UpdateService(Endpoints.UiBuilder.Post.AddUpdate, true, data, {
+          id: viewMetaData.isNew ? 0 : viewMetaData.id
+        })
+      }
+
+      if (response) {
+        setViewMetaData(preValue => ({
+          ...preValue,
+          isNew: false,
+          title: values.title,
+          viewId: values.viewId,
+          groupId: values.groupId,
+          id: viewMetaData.id ?? response.data
+        }))
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+  useEffect(() => {
+    reset({
+      title: viewMetaData?.title,
+      viewId: viewMetaData?.viewId,
+      groupId: viewMetaData?.groupId,
+    })
+  }, [viewMetaData])
+
+
+  return (
+    <Box p={2}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, mt: 2 }}>
+          <Controller
+            name='title'
+            control={control}
+            render={({ field }) => {
+              return (
+                <Box>
+                  <Typography variant='body2'>Title</Typography>
+                  <TextField size={'small'} fullWidth {...field} />
+                </Box>
+              )
+            }}
+          />
+          <Controller
+            name='viewId'
+            control={control}
+            render={({ field }) => {
+              return (
+                <Box>
+                  <Typography variant='body2'>View ID</Typography>
+                  <TextField size={'small'} fullWidth {...field} />
+                </Box>
+              )
+            }}
+          />
+          <GroupLevelAutocomplete selectedViewGroup={viewMetaData?.group} control={control} errors={errors} />
+          <Button
+            sx={{
+              mt: 2
+            }}
+            type='submit'
+            size={'small'}
+            fullWidth={true}
+            variant='contained'
+            disabled={isLoading}
+          >
+            {isLoading ? <CircularProgress size={24} /> : 'Save'}
+          </Button>
+        </Box>
+      </form>
+    </Box>
+  )
+}

package/src/views/builder/viewer/Canvas.jsx

@@ -0,0 +1,7 @@
+import ComponentRenderer from './ComponentRenderer'
+import { useBuilder } from 'src/context/BuilderContext'
+
+export default function Canvas() {
+  const { schema } = useBuilder()
+  return <ComponentRenderer node={schema.root} />
+}