robobyte-front-builder 1.0.0

package/src/navigation/vertical/index.js

@@ -0,0 +1,253 @@
+// ** Icon imports
+import { HomeOutline, Account } from 'mdi-material-ui'
+import { useRouter } from 'next/router'
+import { useContext } from 'react'
+import * as Icons from 'mdi-material-ui'
+import { SystemContext } from 'context/SystemContext'
+import { useNavigationExtensionContext } from 'src/lib/navigation/NavigationExtensionContext'
+import mergeNavExtensions from 'src/lib/navigation/mergeNavExtensions'
+
+/**
+ * Get path for a navigation item (uses registry for dynamic items)
+ */
+const getItemPath = (item, registry = {}) => {
+  // Explicit path takes priority
+  if (item.path) return item.path
+
+  // For dynamic items, check registry for slug or path
+  if (item.viewId && registry[item.viewId]) {
+    const view = registry[item.viewId]
+
+    // Use slug for friendly route if available
+    if (view.slug) return `/${view.slug}`
+
+    // Use custom path if available
+    if (view.path) return view.path
+  }
+
+  // Fallback to viewer route
+  if (item.viewId) return `/viewer/${item.viewId}`
+
+  return null
+}
+
+/**
+ * Find module node that matches current path (like static startsWith logic)
+ * This replaces: if (currentPath.startsWith('/userManagement/')) return UserManagementNavItem
+ *
+ * Strategy:
+ * 1. Find node where path matches exactly OR currentPath.startsWith(node.path + '/')
+ * 2. Uses registry to resolve viewIds to paths (slugs)
+ * 3. If current node is a leaf, return its parent (to show siblings)
+ * 4. If current node has children, return current node (to show its children)
+ */
+const findModuleForPath = (items, path, registry = {}) => {
+  if (!items || !Array.isArray(items)) return null
+
+  // Helper to find node with parent context
+  const findNodeWithParent = (items, matcher, parent = null) => {
+    for (const item of items) {
+      // Check if this node matches
+      if (matcher(item)) {
+        return { node: item, parent }
+      }
+
+      // Recursively check children
+      if (item.children && Array.isArray(item.children)) {
+        const found = findNodeWithParent(item.children, matcher, item)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  // Matcher function: path matches exactly OR currentPath starts with node.path + '/'
+  // Also checks registry for slug-based paths
+  const pathMatcher = item => {
+    const itemPath = getItemPath(item, registry)
+    if (!itemPath) return false
+
+    // Exact match
+    if (itemPath === path) return true
+
+    // Starts with match (like static: currentPath.startsWith('/userManagement/'))
+    if (path.startsWith(itemPath + '/')) return true
+
+    return false
+  }
+
+  // First, try to find by path (including registry-resolved paths)
+  let result = findNodeWithParent(items, pathMatcher)
+
+  // If no path match, try by viewId (for /viewer/[id] routes)
+  if (!result && path.startsWith('/viewer/')) {
+    const viewIdMatch = path.match(/\/viewer\/(\d+)/)
+    if (viewIdMatch) {
+      const viewId = Number(viewIdMatch[1])
+      result = findNodeWithParent(items, item => item.viewId === viewId)
+    }
+  }
+
+  // Also try matching by slug from registry
+  if (!result) {
+    // Check if current path matches any slug in registry
+    const matchingView = Object.values(registry).find(view => {
+      if (view.slug && path === `/${view.slug}`) return true
+      if (view.path && (path === view.path || path.startsWith(view.path + '/'))) return true
+      return false
+    })
+
+    if (matchingView) {
+      result = findNodeWithParent(items, item => item.viewId === matchingView.id)
+    }
+  }
+
+  if (!result) return null
+
+  const { node, parent } = result
+
+  // Decision: What to show?
+  // - If current node has children → show its children
+  // - If current node is a leaf → show parent's children (siblings)
+  if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+    return node // Show this node's children
+  } else if (parent && parent.children && Array.isArray(parent.children)) {
+    return parent // Show parent's children (siblings)
+  }
+
+  return node
+}
+
+/**
+ * Convert icon string to component
+ */
+const getIconComponent = iconName => {
+  if (!iconName) return HomeOutline
+  if (Icons[iconName]) {
+    return Icons[iconName]
+  }
+  return HomeOutline // Default fallback
+}
+
+/**
+ * Convert navigation items to format expected by menu system
+ * Handles icon conversion and structure normalization
+ * This matches the static navigation format exactly
+ */
+const normalizeNavItems = (items, registry = {}) => {
+  if (!items || !Array.isArray(items)) return []
+
+  return items.map(item => {
+    const navItem = {
+      title: item.title || '',
+      icon: item.icon ? getIconComponent(item.icon) : HomeOutline
+    }
+
+    // Determine path: explicit path takes priority, then registry, then viewer route
+    if (item.path) {
+      // Explicit path provided - use it (works for both static and dynamic with explicit paths)
+      navItem.path = item.path
+    } else {
+      // No explicit path - resolve from registry or use viewer route
+      const itemPath = getItemPath(item, registry)
+      if (itemPath) {
+        navItem.path = itemPath
+      }
+    }
+
+    // Include viewId if it exists (for dynamic items)
+    if (item.viewId) {
+      navItem.viewId = item.viewId
+    }
+
+    // Include type if it exists
+    if (item.type) {
+      navItem.type = item.type
+    }
+
+    // Handle external URLs
+    if (item.externalUrl) {
+      navItem.path = item.externalUrl
+      navItem.openInNewTab = item.openInNewTab || true
+    }
+
+    // Add action/subject if they exist (for permissions)
+    if (item.action) {
+      navItem.action = item.action
+    }
+    if (item.subject) {
+      navItem.subject = item.subject
+    }
+
+    // Add children if they exist (preserve structure, don't flatten)
+    if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+      navItem.children = normalizeNavItems(item.children, registry)
+    }
+
+    return navItem
+  })
+}
+
+const Navigation = () => {
+  const router = useRouter()
+  const currentPath = router.pathname
+  const systemContext = useContext(SystemContext)
+
+  // Extension items injected by the host application
+  const { extensionItems } = useNavigationExtensionContext()
+
+  // Use registry from system context
+  const effectiveRegistry = systemContext.nav?.registry || {}
+
+  // Get navigation data from system context
+  const navigationConfig = systemContext.nav?.config || null
+
+  // Extract items from config (handle mainHome root)
+  let navigationData = navigationConfig?.items || []
+
+  // Unwrap mainHome root if it exists
+  // Navigation structure: { items: [{ title: "mainHome", children: [...actual nav items...] }] }
+  // We need to extract the children from mainHome root
+  if (navigationData.length > 0 && navigationData[0].title === 'mainHome' && navigationData[0].children) {
+    navigationData = navigationData[0].children
+  }
+
+  // Merge in any items registered by the host application via NavigationExtensionProvider
+  if (extensionItems && extensionItems.length > 0) {
+    navigationData = mergeNavExtensions(navigationData, extensionItems)
+  }
+
+  // If no navigation data, return empty array
+  if (!navigationData || navigationData.length === 0) {
+    return []
+  }
+
+  // Special case: mainHome page should not render navigation
+  if (currentPath === '/mainHome' || currentPath === '/mainHome/') {
+    return []
+  }
+
+  // Get actual path (router.pathname is '/viewer/[id]' for dynamic routes)
+  // Use router.asPath to get the actual URL path
+  let actualPath = router.asPath?.split('?')[0] || currentPath
+
+  // Remove trailing slash for consistent matching (except for root '/')
+  if (actualPath !== '/' && actualPath.endsWith('/')) {
+    actualPath = actualPath.slice(0, -1)
+  }
+
+  // Find the module node (like static: if (currentPath.startsWith('/userManagement/')) return UserManagementNavItem)
+  const moduleNode = findModuleForPath(navigationData, actualPath, effectiveRegistry)
+
+  if (!moduleNode || !moduleNode.children || !Array.isArray(moduleNode.children) || moduleNode.children.length === 0) {
+    // No matching module or no children to show
+    return []
+  }
+
+  // Normalize children for menu (like static version - direct children only, no flattening)
+  const navItems = normalizeNavItems(moduleNode.children, effectiveRegistry)
+
+  return navItems
+}
+
+export default Navigation

package/src/pages/401.js

@@ -0,0 +1,70 @@
+// ** Next Import
+import Link from 'next/link'
+
+// ** MUI Components
+import Button from '@mui/material/Button'
+import { styled } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+
+// ** Layout Import
+import BlankLayout from 'src/@core/layouts/BlankLayout'
+
+// ** Demo Imports
+import FooterIllustrations from 'src/views/pages/misc/FooterIllustrations'
+import Router from 'next/router'
+// ** Styled Components
+const BoxWrapper = styled(Box)(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    width: '90vw'
+  }
+}))
+
+const BackToHome = () => {
+  Router.push('/mainHome')
+
+}
+
+
+
+
+const Img = styled('img')(({ theme }) => ({
+  marginTop: theme.spacing(15),
+  marginBottom: theme.spacing(15),
+  [theme.breakpoints.down('lg')]: {
+    height: 450,
+    marginTop: theme.spacing(10),
+    marginBottom: theme.spacing(10)
+  },
+  [theme.breakpoints.down('md')]: {
+    height: 400
+  }
+}))
+
+const Error401 = () => {
+  return (
+    <Box className='content-center'>
+      <Box sx={{ p: 5, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
+        <BoxWrapper>
+          <Typography variant='h1' sx={{ mb: 2.5 }}>
+            401
+          </Typography>
+          <Typography variant='h5' sx={{ mb: 2.5, fontSize: '1.5rem !important' }}>
+            You are not authorized! 🔐
+          </Typography>
+          <Typography variant='body2'>You don&prime;t have permission to access this page. Go Home!</Typography>
+        </BoxWrapper>
+        <Img alt='error-illustration' src='/images/pages/401.png' />
+        <Link passHref href='/'>
+          <Button onClick={BackToHome} component='a' variant='contained' sx={{ px: 5.5 }}>
+            Back to Home
+          </Button>
+        </Link>
+      </Box>
+      <FooterIllustrations image='/images/pages/misc-401-object.png' />
+    </Box>
+  )
+}
+Error401.getLayout = page => <BlankLayout>{page}</BlankLayout>
+
+export default Error401

package/src/pages/404.js

@@ -0,0 +1,67 @@
+// ** Next Import
+import Link from 'next/link'
+
+// ** MUI Components
+import Button from '@mui/material/Button'
+import { styled } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+
+// ** Layout Import
+import BlankLayout from 'src/@core/layouts/BlankLayout'
+
+// ** Demo Imports
+import FooterIllustrations from 'src/views/pages/misc/FooterIllustrations'
+import Router from 'next/router'
+// ** Styled Components
+const BoxWrapper = styled(Box)(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    width: '90vw'
+  }
+}))
+
+const BackToHome = () => {
+  Router.push('/mainHome')
+
+}
+
+const Img = styled('img')(({ theme }) => ({
+  marginTop: theme.spacing(15),
+  marginBottom: theme.spacing(15),
+  [theme.breakpoints.down('lg')]: {
+    height: 450,
+    marginTop: theme.spacing(10),
+    marginBottom: theme.spacing(10)
+  },
+  [theme.breakpoints.down('md')]: {
+    height: 400
+  }
+}))
+
+const Error404 = () => {
+  return (
+    <Box className='content-center'>
+      <Box sx={{ p: 5, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
+        <BoxWrapper>
+          <Typography variant='h1' sx={{ mb: 2.5 }}>
+            404
+          </Typography>
+          <Typography variant='h5' sx={{ mb: 2.5, letterSpacing: '0.18px', fontSize: '1.5rem !important' }}>
+            Page Not Found ⚠️
+          </Typography>
+          <Typography variant='body2'>We couldn&prime;t find the page you are looking for.</Typography>
+        </BoxWrapper>
+        <Img alt='error-illustration' src='/images/pages/404.png' />
+        <Link passHref href='/mainHome'>
+          <Button onClick={BackToHome} component='a' variant='contained' sx={{ px: 5.5 }}>
+            Back to Home
+          </Button>
+        </Link>
+      </Box>
+      <FooterIllustrations image='/images/pages/misc-404-object.png' />
+    </Box>
+  )
+}
+Error404.getLayout = page => <BlankLayout>{page}</BlankLayout>
+
+export default Error404

package/src/pages/500.js

@@ -0,0 +1,68 @@
+// ** Next Import
+import Link from 'next/link'
+
+// ** MUI Components
+import Button from '@mui/material/Button'
+import { styled } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+
+// ** Layout Import
+import BlankLayout from 'src/@core/layouts/BlankLayout'
+
+// ** Demo Imports
+import FooterIllustrations from 'src/views/pages/misc/FooterIllustrations'
+import Router from 'next/router'
+// ** Styled Components
+const BoxWrapper = styled(Box)(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    width: '90vw'
+  }
+}))
+
+const BacktoHome = () => {
+  Router.push('/mainHome')
+}
+
+const Img = styled('img')(({ theme }) => ({
+  marginTop: theme.spacing(15),
+  marginBottom: theme.spacing(15),
+  [theme.breakpoints.down('lg')]: {
+    height: 450,
+    marginTop: theme.spacing(10),
+    marginBottom: theme.spacing(10)
+  },
+  [theme.breakpoints.down('md')]: {
+    height: 400
+  }
+}))
+
+const Error500 = () => {
+  return (
+    <Box className='content-center'>
+      <Box sx={{ p: 5, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
+        <BoxWrapper>
+          <Typography variant='h1' sx={{ mb: 2.5 }}>
+            500
+          </Typography>
+          <Typography variant='h5' sx={{ mb: 2.5, fontSize: '1.5rem !important' }}>
+            Internal server error 👨🏻‍💻
+          </Typography>
+          <Typography variant='body2'>Oops, something went wrong!</Typography>
+        </BoxWrapper>
+        <Img alt='error-illustration' src='/images/pages/500.png' />
+        <Link passHref href='/'>
+          <Button
+            onClick={BacktoHome}
+            component='a' variant='contained' sx={{ px: 5.5 }}>
+            Back to Home
+          </Button>
+        </Link>
+      </Box>
+      <FooterIllustrations image='/images/pages/misc-500-object.png' />
+    </Box>
+  )
+}
+Error500.getLayout = page => <BlankLayout>{page}</BlankLayout>
+
+export default Error500

package/src/pages/[slug].js

@@ -0,0 +1,115 @@
+import { useRouter } from 'next/router'
+import { useEffect, useState, useMemo, useContext } from 'react'
+import { Box, Typography, CircularProgress, Grid } from '@mui/material'
+import { SystemContext } from 'context/SystemContext'
+import { Endpoints, Services } from 'services/Endpoints'
+import ProductionViewer from 'views/builder/viewer/ProductionViewer'
+
+export default function SlugResolver() {
+  const router = useRouter()
+  const { slug } = router.query
+  const systemContext = useContext(SystemContext)
+  const viewRegistry = systemContext.nav?.registry || {}
+
+  const [schema, setSchema] = useState({})
+  const [viewMetaData, setViewMetaData] = useState({})
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  // Find view by slug
+  const view = useMemo(() => {
+    if (!slug) return null
+    return Object.values(viewRegistry).find(
+      v => v.slug === slug
+    )
+  }, [slug, viewRegistry])
+
+  const handleGetView = async (viewId) => {
+    try {
+      setLoading(true)
+      setError(null)
+
+      const response = await Services.GetService(Endpoints.UiBuilder.Get.GetViewDetails, false, {
+        viewId: viewId
+      })
+
+      if (response && response.data) {
+        setSchema(JSON.parse(response.data.value))
+        setViewMetaData({
+          id: response.data.id,
+          title: response.data.title,
+          viewId: response.data.viewId,
+          groupId: response.data.groupId,
+          isNew: false
+        })
+      } else {
+        setError('View not found')
+      }
+    } catch (error) {
+      console.error('Error loading view:', error)
+      setError('Failed to load view')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (view && view.id) {
+      handleGetView(view.id)
+    } else if (slug && !view) {
+      setLoading(false)
+      setError('Page not found')
+    }
+  }, [view, slug])
+
+  // No slug yet
+  if (!slug) {
+    return null
+  }
+
+  // Loading state
+  if (loading) {
+    return (
+      <Box sx={{ p: 6, textAlign: 'center', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '400px' }}>
+        <CircularProgress />
+      </Box>
+    )
+  }
+
+  // View not found in registry
+  if (!view) {
+    return (
+      <Box sx={{ p: 6, textAlign: 'center' }}>
+        <Typography variant="h4">Page not found</Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
+          Unknown page: /{slug}
+        </Typography>
+      </Box>
+    )
+  }
+
+  // Error loading view data
+  if (error) {
+    return (
+      <Box sx={{ p: 6, textAlign: 'center' }}>
+        <Typography variant="h4">Coming soon 🚧</Typography>
+        <Typography variant="body2" sx={{ mt: 2 }}>
+          {view.name} has not been created yet.
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+          Friendly URL: /{slug}
+        </Typography>
+      </Box>
+    )
+  }
+
+  // Success - render the viewer
+  // This keeps the friendly URL (/{slug}) in the browser
+  return (
+    <Grid container>
+      <Grid item size={12}>
+        <ProductionViewer schema={schema} />
+      </Grid>
+    </Grid>
+  )
+}