robobyte-front-builder 1.0.17 → 1.0.21

package/src/pages/index.js

@@ -1,44 +1,95 @@
-// ** React Imports
-import { useEffect } from 'react'
+/**
+ * Dev landing page — quick links to every builder page.
+ * Not shipped in the npm package (only appears when running `next dev` directly).
+ */
 
-// ** Next Imports
 import { useRouter } from 'next/router'
+import { Box, Button, Typography, Stack, Divider, Chip } from '@mui/material'
 
-// ** Spinner Import
-import Spinner from 'src/@core/components/spinner'
+const PAGES = [
+  { label: 'UI Builder', path: '/viewBuilder', color: '#4a90e2' },
+  { label: 'UI Views List', path: '/viewBuilder/views', color: '#4a90e2' },
+  { label: 'Report Builder', path: '/reportModule/reportBuilder', color: '#7b68ee' },
+  { label: 'Report Viewer', path: '/reportModule/reportBuilder/reportViewer', color: '#7b68ee' },
+  { label: 'Reports List', path: '/reportModule/reportBuilder/reports', color: '#7b68ee' },
+  { label: 'Reports Permissions', path: '/reportModule/reportBuilder/reportsPermissions', color: '#7b68ee' },
+  { label: 'Navigator Builder', path: '/navigatorBuilder', color: '#50c878' },
+  { label: 'Print Layout Builder', path: '/printBuilder', color: '#f5a623' },
+]
 
-// ** Hook Imports
-import { useAuth } from 'src/hooks/useAuth'
-import jwt_decode from 'jwt-decode';
+export default function DevIndex() {
+  const router = useRouter()
 
-export const getHomeRoute = role => {
-  return '/mainHome'
-}
+  return (
+    <Box
+      sx={{
+        minHeight: '100vh',
+        bgcolor: '#0f1117',
+        color: '#e0e0e0',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        p: 4,
+      }}
+    >
+      <Box sx={{ maxWidth: 480, width: '100%' }}>
+        <Stack direction='row' alignItems='center' spacing={1} mb={1}>
+          <Typography variant='h5' fontWeight={700} color='#fff'>
+            RoboByte Front Builder
+          </Typography>
+          <Chip label='DEV' size='small' sx={{ bgcolor: '#2e7d32', color: '#fff', fontWeight: 700, fontSize: 10 }} />
+        </Stack>
 
-export const getLoginRoute = () => {
-  return '/login'
-}
-const Home = () => {
-  // ** Hooks
-  const auth = useAuth()
-  const router = useRouter()
-  useEffect(() => {
-    if (!router.isReady) {
-      return
-    }
-
-    if (auth.user) {
-        const homeRoute = getHomeRoute()
-        router.replace(homeRoute)
-      }
-     else {
-      const loginRoute = getLoginRoute()
-      router.replace(loginRoute)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  return <Spinner />
-}
+        <Typography variant='body2' color='#888' mb={3}>
+          Running standalone — pick a builder page to open.
+        </Typography>
 
-export default Home
+        <Divider sx={{ borderColor: '#2a2a2a', mb: 3 }} />
+
+        <Stack spacing={1.5}>
+          {PAGES.map(({ label, path, color }) => (
+            <Button
+              key={path}
+              fullWidth
+              variant='outlined'
+              onClick={() => router.push(path)}
+              sx={{
+                justifyContent: 'flex-start',
+                borderColor: '#2a2a2a',
+                color: '#e0e0e0',
+                textTransform: 'none',
+                py: 1.2,
+                px: 2,
+                borderRadius: 2,
+                '&:hover': { borderColor: color, color: color, bgcolor: 'transparent' },
+              }}
+            >
+              <Box
+                component='span'
+                sx={{
+                  display: 'inline-block',
+                  width: 8,
+                  height: 8,
+                  borderRadius: '50%',
+                  bgcolor: color,
+                  mr: 1.5,
+                  flexShrink: 0,
+                }}
+              />
+              {label}
+              <Typography variant='caption' color='#555' ml='auto'>
+                {path}
+              </Typography>
+            </Button>
+          ))}
+        </Stack>
+
+        <Divider sx={{ borderColor: '#2a2a2a', mt: 3, mb: 2 }} />
+
+        <Typography variant='caption' color='#444'>
+          API: {process.env.NEXT_PUBLIC_API_BASE_URL || 'http://140.82.34.191:3400/'}
+        </Typography>
+      </Box>
+    </Box>
+  )
+}

package/src/pages/printBuilder/index.jsx

@@ -0,0 +1,263 @@
+import { Box, IconButton, Tabs, Tab, Tooltip } from '@mui/material'
+import { ThemeProvider, CssBaseline } from '@mui/material'
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import { ChevronLeft, ChevronRight } from '@mui/icons-material'
+import BlankLayout from '../../lib/layouts/BlankLayout'
+import { BuilderProvider, useBuilder } from 'context/BuilderContext'
+import Inspector from 'views/builder/inspector/Inspector'
+import PrintBuilderViewer, { PrintSettingsTab } from 'views/printBuilder/PrintBuilderViewer'
+import { Endpoints, Services } from 'services/Endpoints'
+import { PRINT_COMPONENT_SECTIONS } from 'views/builder/sidebar/tabs/Components/printComponentCatalog'
+import ComponentsTab from 'views/builder/sidebar/tabs/Components/ComponentsTab'
+import TreeTab from 'views/builder/sidebar/tabs/TreeTab'
+import { createTheme } from '@mui/material/styles'
+
+// ── Builder themes (inlined to avoid cross-package path resolution issues) ────
+const _STORAGE_KEY = 'rbb:builderThemeMode'
+const BUILDER_THEMES = {
+  dark: createTheme({
+    palette: {
+      mode: 'dark',
+      primary:    { main: '#9c27b0' },
+      secondary:  { main: '#f5a623' },
+      background: { default: '#141618', paper: '#1e2227' },
+      divider:    '#3a3f45',
+      text:       { primary: '#e8eaed', secondary: '#9aa0aa' },
+    },
+  }),
+  light: createTheme({
+    palette: {
+      mode: 'light',
+      primary:   { main: '#9c27b0' },
+      secondary: { main: '#f5a623' },
+      background: { default: '#f0f2f5', paper: '#ffffff' },
+      divider:   '#dde1e7',
+    },
+  }),
+}
+function getBuilderThemeMode() {
+  try { return localStorage.getItem(_STORAGE_KEY) === 'light' ? 'light' : 'dark' } catch { return 'dark' }
+}
+function saveBuilderThemeMode(mode) {
+  try { localStorage.setItem(_STORAGE_KEY, mode) } catch {}
+}
+
+const SIDEBAR_WIDTH  = 280
+const COLLAPSED_WIDTH = 32
+
+function CollapseToggle({ collapsed, onClick, side }) {
+  const Icon = side === 'left'
+    ? (collapsed ? ChevronRight : ChevronLeft)
+    : (collapsed ? ChevronLeft  : ChevronRight)
+  return (
+    <Tooltip title={collapsed ? 'Expand' : 'Collapse'}
+      placement={side === 'left' ? 'right' : 'left'}>
+      <IconButton size='small' onClick={onClick} sx={{
+        position: 'absolute', top: '50%', transform: 'translateY(-50%)',
+        [side === 'left' ? 'right' : 'left']: -14,
+        zIndex: 10, width: 28, height: 28,
+        bgcolor: 'background.paper', border: '1px solid',
+        borderColor: 'divider',
+        borderRadius: '50%', '&:hover': { bgcolor: 'action.hover' },
+      }}>
+        <Icon sx={{ fontSize: 16 }} />
+      </IconButton>
+    </Tooltip>
+  )
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+export function createEmptyNode(id) {
+  return {
+    id,
+    type: 'container',
+    props: {
+      main: { key: { valueType: 'value', value: id } },
+      style: {},
+      advanced: {}
+    },
+    className: '',
+    children: []
+  }
+}
+
+const FIRST_PAGE_ID = 'body-page-0'
+
+// ── Default print schema ──────────────────────────────────────────────────────
+export const INITIAL_PRINT_SCHEMA = {
+  settings: {
+    pageSize:    'A4',
+    orientation: 'portrait',
+    margins:     { top: 0, right: 0, bottom: 0, left: 0 },
+    header:      { enabled: true,  height: 10, margins: { top: 0, right: 0, bottom: 0, left: 0 } },
+    footer:      { enabled: true,  height: 10, margins: { top: 0, right: 0, bottom: 0, left: 0 }, showPageNumbers: true, pageNumberAlign: 'center', pageNumberFormat: 'Page {page} of {pages}' },
+  },
+  activeZone: FIRST_PAGE_ID,
+  pageOrder:  [FIRST_PAGE_ID],
+  zones: {
+    header:          createEmptyNode('header'),
+    [FIRST_PAGE_ID]: createEmptyNode(FIRST_PAGE_ID),
+    footer:          createEmptyNode('footer'),
+  },
+  root:    createEmptyNode(FIRST_PAGE_ID), // = zones[activeZone]
+  dialogs: [],
+  actions: [],
+}
+
+// ── Left sidebar with tabs ─────────────────────────────────────────────────────
+function PrintSidebar({ collapsed }) {
+  const [tab, setTab] = useState(0)
+  return (
+    <Box sx={{
+      width: SIDEBAR_WIDTH, height: '100%',
+      display: 'flex', flexDirection: 'column',
+      opacity: collapsed ? 0 : 1,
+      transition: 'opacity 0.15s ease',
+      pointerEvents: collapsed ? 'none' : 'auto',
+    }}>
+      <Tabs value={tab} onChange={(_, v) => setTab(v)} variant='scrollable' scrollButtons='auto'
+        sx={{
+          flexShrink: 0,
+          bgcolor: 'background.paper',
+          borderBottom: '1px solid',
+          borderColor: 'divider',
+          minHeight: 40,
+          '& .MuiTab-root': {
+            color: 'text.secondary', minHeight: 40,
+            textTransform: 'none', fontSize: 12, fontWeight: 500,
+            '&.Mui-selected': { color: 'text.primary' },
+          },
+          '& .MuiTabs-indicator': { backgroundColor: 'secondary.main', height: 2 },
+        }}>
+        <Tab label='Components' />
+        <Tab label='Tree' />
+        <Tab label='Settings' />
+      </Tabs>
+      <Box sx={{ flex: 1, overflow: 'hidden' }}>
+        {tab === 0 && <ComponentsTab sections={PRINT_COMPONENT_SECTIONS} />}
+        {tab === 1 && <TreeTab />}
+        {tab === 2 && <PrintSettingsTab />}
+      </Box>
+    </Box>
+  )
+}
+
+// ── Inner content (needs BuilderProvider in scope) ────────────────────────────
+function PrintBuilderContent({ isDark, onToggleTheme }) {
+  const router = useRouter()
+  const { id } = router.query
+  const { setSchema } = useBuilder()
+
+  const [metaData, setMetaData] = useState({ id: null, title: '' })
+  const [leftCollapsed, setLeftCollapsed]   = useState(false)
+  const [rightCollapsed, setRightCollapsed] = useState(false)
+
+  // Load existing layout when id is provided
+  const handleLoad = async (layoutId) => {
+    try {
+      const response = await Services.GetService(
+        Endpoints.PrintLayout.Get.GetById, false, { id: layoutId }
+      )
+      if (response?.data) {
+        const parsed = JSON.parse(response.data.value)
+        // Merge with defaults so older saved schemas get the new fields
+        const merged = { ...INITIAL_PRINT_SCHEMA, ...parsed }
+        // Ensure root reflects activeZone
+        const activeZone = merged.activeZone ?? INITIAL_PRINT_SCHEMA.activeZone
+        merged.root = merged.zones?.[activeZone] ?? createEmptyNode(activeZone)
+        setSchema(merged)
+        setMetaData({ id: response.data.id, title: response.data.title })
+      }
+    } catch (err) {
+      console.error('Failed to load print layout:', err)
+    }
+  }
+
+  useEffect(() => {
+    if (id) {
+      handleLoad(id)
+    } else {
+      setSchema(INITIAL_PRINT_SCHEMA)
+    }
+  }, [id])
+
+  const handleSaved = (response) => {
+    if (response?.data?.id && !metaData.id) {
+      setMetaData(prev => ({ ...prev, id: response.data.id }))
+      // Update URL without full navigation
+      router.replace({ query: { id: response.data.id } }, undefined, { shallow: true })
+    }
+  }
+
+  return (
+    <Box sx={{ height: '100vh', display: 'flex', overflow: 'hidden', bgcolor: 'background.default' }}>
+
+      {/* ── Left sidebar: tabbed (Components / Tree / Settings) ── */}
+      <Box sx={{
+        position: 'relative',
+        width: leftCollapsed ? COLLAPSED_WIDTH : SIDEBAR_WIDTH,
+        minWidth: leftCollapsed ? COLLAPSED_WIDTH : SIDEBAR_WIDTH,
+        borderRight: '1px solid',
+        borderColor: 'divider',
+        transition: 'width 0.2s ease, min-width 0.2s ease',
+        overflow: 'hidden',
+        bgcolor: 'background.paper',
+      }}>
+        <PrintSidebar collapsed={leftCollapsed} />
+        <CollapseToggle collapsed={leftCollapsed}
+          onClick={() => setLeftCollapsed(v => !v)} side='left' />
+      </Box>
+
+      {/* ── Center canvas ── */}
+      <Box sx={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+        <PrintBuilderViewer metaData={metaData} onSaved={handleSaved}
+          isDark={isDark} onToggleTheme={onToggleTheme} />
+      </Box>
+
+      {/* ── Right inspector ── */}
+      <Box sx={{
+        position: 'relative',
+        width: rightCollapsed ? COLLAPSED_WIDTH : SIDEBAR_WIDTH,
+        minWidth: rightCollapsed ? COLLAPSED_WIDTH : SIDEBAR_WIDTH,
+        borderLeft: '1px solid',
+        borderColor: 'divider',
+        transition: 'width 0.2s ease, min-width 0.2s ease',
+        overflow: 'hidden',
+      }}>
+        <Box sx={{
+          width: SIDEBAR_WIDTH, height: '100%',
+          opacity: rightCollapsed ? 0 : 1,
+          transition: 'opacity 0.15s ease',
+          pointerEvents: rightCollapsed ? 'none' : 'auto',
+        }}>
+          <Inspector />
+        </Box>
+        <CollapseToggle collapsed={rightCollapsed}
+          onClick={() => setRightCollapsed(v => !v)} side='right' />
+      </Box>
+
+    </Box>
+  )
+}
+
+export default function PrintBuilder() {
+  const [themeMode, setThemeMode] = useState(() => getBuilderThemeMode())
+
+  const toggleTheme = () => {
+    const next = themeMode === 'dark' ? 'light' : 'dark'
+    setThemeMode(next)
+    saveBuilderThemeMode(next)
+  }
+
+  return (
+    <ThemeProvider theme={BUILDER_THEMES[themeMode]}>
+      <CssBaseline />
+      <BuilderProvider>
+        <PrintBuilderContent isDark={themeMode === 'dark'} onToggleTheme={toggleTheme} />
+      </BuilderProvider>
+    </ThemeProvider>
+  )
+}
+
+PrintBuilder.getLayout = page => <BlankLayout>{page}</BlankLayout>