robobyte-front-builder 1.0.8 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "robobyte-front-builder",
-  "version": "1.0.8",
+  "version": "1.0.11",
   "description": "RoboByte low-code UI builder, Report builder, and navigation extension system",
   "main": "src/lib/index.js",
   "files": [

package/src/lib/index.js

@@ -73,6 +73,9 @@ export { default as RoboByteFrontBuilderProvider } from './providers/RoboByteFro
 export { default as UIBuilderPage } from '../pages/viewBuilder/index'
 export { default as ReportBuilderPage } from '../pages/reportModule/reportBuilder/index'
 export { default as NavigatorBuilderPage } from '../pages/navigatorBuilder/index'
+// ViewerPage renders a saved UI Builder view (read-only production mode).
+// Create a host page at e.g. pages/viewer/[id].jsx and re-export this component.
+export { default as ViewerPage } from '../pages/viewer/[id]/index'
 
 // ── Core Contexts & Hooks (advanced use) ─────────────────────────────────────
 // Useful when you need to read or drive builder state from the host app.

package/src/pages/navigatorBuilder/index.jsx

@@ -1851,7 +1851,7 @@ const NavigatorBuilder = () => {
 
       const jsonString = JSON.stringify(saveData)
 
-      // Use 'navigatorSetting' key as requested in previous sessions for DataTypes.Params
+      // C# endpoint: [FromBody] NavigatorSettingForm form  →  expects { "value": "..." }
       const result = await PostService(Endpoints.Navigator.Post.NavigatorSetting, true, {
         value: jsonString
       })

package/src/pages/viewer/[id]/index.js

@@ -1,21 +1,43 @@
 import { useRouter } from 'next/router'
-import { useEffect, useState, useContext } from 'react'
-import { Box, Typography, CircularProgress, Grid } from '@mui/material'
+import { useEffect, useState, useContext, useMemo } from 'react'
+import { Box, Typography, CircularProgress, Grid, Tab, Tabs } from '@mui/material'
 import { SystemContext } from 'context/SystemContext'
 import { Endpoints, Services } from 'services/Endpoints'
 import ProductionViewer from 'views/builder/viewer/ProductionViewer'
 
+/**
+ * Finds the parent group of a viewId in the navigator config items tree.
+ * Returns the array of siblings (all dynamic children of that parent).
+ *
+ * nav.config.items shape:
+ *   [ { title, children: [ { title, type, viewId }, ... ] }, ... ]
+ */
+function findSiblings(navConfig, viewId) {
+  if (!navConfig?.items || viewId == null) return []
+  for (const group of navConfig.items) {
+    const children = group.children || []
+    const dynamicChildren = children.filter(c => c.type === 'dynamic' && c.viewId != null)
+    const found = dynamicChildren.find(c => Number(c.viewId) === Number(viewId))
+    if (found) return dynamicChildren
+  }
+  return []
+}
+
 export default function ViewPage() {
   const router = useRouter()
   const { id } = router.query
   const systemContext = useContext(SystemContext)
   const viewRegistry = systemContext.nav?.registry || {}
+  const navConfig = systemContext.nav?.config
 
   const [schema, setSchema] = useState({})
   const [viewMetaData, setViewMetaData] = useState({})
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
 
+  // Sibling pages under the same root section — used for horizontal sub-nav tabs
+  const siblings = useMemo(() => findSiblings(navConfig, id), [navConfig, id])
+
   const handleGetView = async (viewId) => {
     try {
       setLoading(true)
@@ -51,7 +73,6 @@ export default function ViewPage() {
     }
   }, [id])
 
-  // Loading state
   if (!id) return null
 
   if (loading) {
@@ -68,21 +89,73 @@ export default function ViewPage() {
     const view = viewRegistry[viewId]
 
     return (
-      <Box sx={{ p: 6, textAlign: 'center' }}>
-        <Typography variant="h4">Coming soon 🚧</Typography>
-        <Typography variant="body2" sx={{ mt: 2 }}>
-          View #{viewId} {view ? `(${view.name})` : ''} has not been created yet.
-        </Typography>
-      </Box>
+      <>
+        {siblings.length > 1 && (
+          <HorizontalSubNav siblings={siblings} currentId={viewId} router={router} />
+        )}
+        <Box sx={{ p: 6, textAlign: 'center' }}>
+          <Typography variant="h4">Coming soon 🚧</Typography>
+          <Typography variant="body2" sx={{ mt: 2 }}>
+            View #{viewId} {view ? `(${view.name})` : ''} has not been created yet.
+          </Typography>
+        </Box>
+      </>
     )
   }
 
-  // Success state - render the view
+  // Success state
   return (
-    <Grid container>
-      <Grid item size={12}>
-        <ProductionViewer schema={schema} />
+    <Box>
+      {siblings.length > 1 && (
+        <HorizontalSubNav siblings={siblings} currentId={Number(id)} router={router} />
+      )}
+      <Grid container>
+        <Grid item size={12}>
+          <ProductionViewer schema={schema} />
+        </Grid>
       </Grid>
-    </Grid>
+    </Box>
+  )
+}
+
+/**
+ * Horizontal sub-navigation tabs shown at the top of the viewer page
+ * when the current view has sibling pages under the same root section.
+ */
+function HorizontalSubNav({ siblings, currentId, router }) {
+  const currentIndex = siblings.findIndex(s => Number(s.viewId) === Number(currentId))
+  const activeTab = currentIndex >= 0 ? currentIndex : 0
+
+  const handleChange = (_, newIndex) => {
+    const target = siblings[newIndex]
+    if (target?.viewId != null) {
+      router.push(`/viewer/${target.viewId}`)
+    }
+  }
+
+  return (
+    <Box
+      sx={{
+        borderBottom: 1,
+        borderColor: 'divider',
+        mb: 2,
+        backgroundColor: 'background.paper',
+        px: 2,
+      }}
+    >
+      <Tabs
+        value={activeTab}
+        onChange={handleChange}
+        variant="scrollable"
+        scrollButtons="auto"
+      >
+        {siblings.map((sibling) => (
+          <Tab
+            key={sibling.viewId}
+            label={sibling.title}
+          />
+        ))}
+      </Tabs>
+    </Box>
   )
 }