robobyte-front-builder 1.0.19 → 1.0.23

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 { loadSchema } = 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)
+        loadSchema(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 {
+      loadSchema(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>

package/src/pages/printBuilder/layouts/index.jsx

@@ -0,0 +1,298 @@
+import { useState, useEffect, useMemo, useRef } from 'react'
+import { useRouter } from 'next/router'
+import {
+  Box, Typography, Paper, TextField, InputAdornment,
+  IconButton, Button, Card, CardContent, Chip,
+  Dialog, DialogTitle, DialogContent, DialogActions,
+  CircularProgress, Tooltip, Divider,
+} from '@mui/material'
+import SearchIcon from '@mui/icons-material/Search'
+import ClearIcon from '@mui/icons-material/Clear'
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined'
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
+import PrintOutlinedIcon from '@mui/icons-material/PrintOutlined'
+import AddIcon from '@mui/icons-material/Add'
+import { Endpoints, Services } from 'services/Endpoints'
+import PrintPreviewCanvas from 'views/printBuilder/PrintPreviewCanvas'
+import { INITIAL_PRINT_SCHEMA, createEmptyNode } from 'pages/printBuilder/index'
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function formatDate(str) {
+  if (!str) return '—'
+  try { return new Date(str).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) }
+  catch { return str }
+}
+
+function parseSchema(raw) {
+  try {
+    const parsed = JSON.parse(raw)
+    const merged = { ...INITIAL_PRINT_SCHEMA, ...parsed }
+    const activeZone = merged.activeZone ?? 'body-page-0'
+    merged.root = merged.zones?.[activeZone] ?? createEmptyNode(activeZone)
+    return merged
+  } catch {
+    return INITIAL_PRINT_SCHEMA
+  }
+}
+
+function zoneCount(schema) {
+  return schema?.pageOrder?.length ?? 0
+}
+
+// ── Minimal read-only viewer context for the preview ─────────────────────────
+const PREVIEW_VIEWER_CTX = {
+  data:           {},
+  setData:        () => {},
+  form:           {},
+  setForm:        () => {},
+  mode:           'preview',
+  isEditMode:     false,
+  isPreviewMode:  true,
+  isPrintContext: true,
+  isPrintBuilder: false,
+  builderContext: null,
+}
+
+// ── Preview Dialog ────────────────────────────────────────────────────────────
+
+function PreviewDialog({ layout, open, onClose, onEdit }) {
+  const schema = useMemo(() => layout ? parseSchema(layout.value) : null, [layout])
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth='lg' fullWidth
+      PaperProps={{ sx: { height: '90vh', display: 'flex', flexDirection: 'column' } }}>
+      <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pb: 1 }}>
+        <Typography variant='h6' noWrap sx={{ flex: 1 }}>
+          {layout?.title || 'Preview'}
+        </Typography>
+        <Box display='flex' gap={1}>
+          <Button size='small' variant='outlined' startIcon={<EditOutlinedIcon />}
+            onClick={() => { onClose(); onEdit(layout) }}>
+            Edit
+          </Button>
+          <Button size='small' onClick={onClose}>Close</Button>
+        </Box>
+      </DialogTitle>
+      <Divider />
+      <DialogContent sx={{ flex: 1, overflow: 'auto', p: 2, bgcolor: 'background.default' }}>
+        {schema && (
+          <Box sx={{ transform: 'scale(0.75)', transformOrigin: 'top center', width: '133%', ml: '-16.5%' }}>
+            <PrintPreviewCanvas schema={schema} makeViewerCtx={() => PREVIEW_VIEWER_CTX} />
+          </Box>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+// ── Delete confirm ────────────────────────────────────────────────────────────
+
+function DeleteDialog({ layout, open, onClose, onDeleted }) {
+  const [loading, setLoading] = useState(false)
+
+  const handleDelete = async () => {
+    setLoading(true)
+    try {
+      await Services.DeleteService(Endpoints.PrintLayout.Delete.Delete, { id: layout.id })
+      onDeleted(layout.id)
+      onClose()
+    } catch (err) {
+      console.error('[PrintLayoutsList] delete failed:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth='xs' fullWidth>
+      <DialogTitle>Delete layout?</DialogTitle>
+      <DialogContent>
+        <Typography>
+          "<strong>{layout?.title}</strong>" will be permanently deleted and cannot be recovered.
+        </Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} disabled={loading}>Cancel</Button>
+        <Button color='error' variant='contained' onClick={handleDelete} disabled={loading}
+          startIcon={loading ? <CircularProgress size={14} /> : null}>
+          Delete
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+// ── Layout card ───────────────────────────────────────────────────────────────
+
+function LayoutCard({ layout, onPreview, onEdit, onDeleteRequest }) {
+  const schema = useMemo(() => parseSchema(layout.value), [layout.value])
+  const pages  = zoneCount(schema)
+  const size   = schema?.settings?.pageSize   ?? 'A4'
+  const orient = schema?.settings?.orientation ?? 'portrait'
+
+  return (
+    <Card variant='outlined' sx={{ display: 'flex', flexDirection: 'column' }}>
+      <CardContent sx={{ flex: 1, pb: 1 }}>
+        <Typography variant='subtitle1' fontWeight={600} noWrap gutterBottom>
+          {layout.title || `Layout ${layout.id}`}
+        </Typography>
+
+        <Box display='flex' gap={0.75} flexWrap='wrap' mb={1.5}>
+          <Chip label={size} size='small' variant='outlined' />
+          <Chip label={orient} size='small' variant='outlined' />
+          <Chip label={`${pages} page${pages !== 1 ? 's' : ''}`} size='small' variant='outlined' />
+        </Box>
+
+        <Typography variant='caption' color='text.secondary' display='block'>
+          {layout.createdBy ? `By ${layout.createdBy}` : ''}
+          {layout.createdBy && layout.createDate ? ' · ' : ''}
+          {formatDate(layout.createDate)}
+        </Typography>
+
+        {layout.id && (
+          <Typography variant='caption' color='text.disabled' display='block' sx={{ mt: 0.25 }}>
+            ID: {layout.id}
+          </Typography>
+        )}
+      </CardContent>
+
+      <Divider />
+
+      <Box display='flex' alignItems='center' gap={0.5} px={1.5} py={1}>
+        <Button size='small' variant='outlined' startIcon={<PrintOutlinedIcon />}
+          onClick={() => onPreview(layout)} sx={{ flex: 1 }}>
+          Preview
+        </Button>
+        <Tooltip title='Edit'>
+          <IconButton size='small' onClick={() => onEdit(layout)}>
+            <EditOutlinedIcon fontSize='small' color='secondary' />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title='Delete'>
+          <IconButton size='small' onClick={() => onDeleteRequest(layout)}>
+            <DeleteOutlineIcon fontSize='small' color='error' />
+          </IconButton>
+        </Tooltip>
+      </Box>
+    </Card>
+  )
+}
+
+// ── Main page ─────────────────────────────────────────────────────────────────
+
+export default function PrintLayoutsList() {
+  const router = useRouter()
+  const [layouts,  setLayouts]  = useState([])
+  const [loading,  setLoading]  = useState(true)
+  const [search,   setSearch]   = useState('')
+  const [preview,  setPreview]  = useState(null)   // layout object being previewed
+  const [toDelete, setToDelete] = useState(null)   // layout object pending delete
+
+  // ── Fetch all ──────────────────────────────────────────────────────────────
+  useEffect(() => {
+    let cancelled = false
+    const fetch = async () => {
+      setLoading(true)
+      try {
+        const res = await Services.GetService(Endpoints.PrintLayout.Get.GetAll, false, {})
+        if (!cancelled && res?.data) setLayouts(res.data)
+      } catch (err) {
+        console.error('[PrintLayoutsList] fetch failed:', err)
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+    fetch()
+    return () => { cancelled = true }
+  }, [])
+
+  // ── Filter ─────────────────────────────────────────────────────────────────
+  const filtered = useMemo(() => {
+    if (!search) return layouts
+    const q = search.toLowerCase()
+    return layouts.filter(l => (l.title || '').toLowerCase().includes(q) || String(l.id).includes(q))
+  }, [layouts, search])
+
+  // ── Handlers ───────────────────────────────────────────────────────────────
+  const handleEdit    = (layout) => router.push({ pathname: '/printBuilder', query: { id: layout.id } })
+  const handleDeleted = (id)     => setLayouts(prev => prev.filter(l => l.id !== id))
+
+  return (
+    <Box p={4} maxWidth={1100} mx='auto'>
+
+      {/* Header */}
+      <Box display='flex' justifyContent='space-between' alignItems='center' mb={3}>
+        <Typography variant='h4'>Print Layouts</Typography>
+        <Button variant='contained' startIcon={<AddIcon />}
+          onClick={() => router.push('/printBuilder')}>
+          New Layout
+        </Button>
+      </Box>
+
+      {/* Search */}
+      <Paper elevation={2} sx={{ p: 2, mb: 3 }}>
+        <TextField
+          fullWidth
+          placeholder='Search layouts…'
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position='start'><SearchIcon /></InputAdornment>
+            ),
+            endAdornment: search && (
+              <InputAdornment position='end'>
+                <IconButton onClick={() => setSearch('')}><ClearIcon /></IconButton>
+              </InputAdornment>
+            ),
+          }}
+        />
+      </Paper>
+
+      {/* Grid */}
+      {loading ? (
+        <Box display='flex' justifyContent='center' py={8}>
+          <CircularProgress />
+        </Box>
+      ) : filtered.length === 0 ? (
+        <Paper elevation={1} sx={{ p: 6, textAlign: 'center' }}>
+          <PrintOutlinedIcon sx={{ fontSize: 48, color: 'text.disabled', mb: 1 }} />
+          <Typography color='text.secondary'>
+            {search ? 'No layouts match your search.' : 'No print layouts yet. Click "New Layout" to create one.'}
+          </Typography>
+        </Paper>
+      ) : (
+        <Box display='grid' gridTemplateColumns='repeat(auto-fill, minmax(280px, 1fr))' gap={2}>
+          {filtered.map(layout => (
+            <LayoutCard
+              key={layout.id}
+              layout={layout}
+              onPreview={setPreview}
+              onEdit={handleEdit}
+              onDeleteRequest={setToDelete}
+            />
+          ))}
+        </Box>
+      )}
+
+      {/* Preview dialog */}
+      <PreviewDialog
+        layout={preview}
+        open={!!preview}
+        onClose={() => setPreview(null)}
+        onEdit={handleEdit}
+      />
+
+      {/* Delete confirm dialog */}
+      {toDelete && (
+        <DeleteDialog
+          layout={toDelete}
+          open={!!toDelete}
+          onClose={() => setToDelete(null)}
+          onDeleted={handleDeleted}
+        />
+      )}
+    </Box>
+  )
+}

package/src/pages/reportModule/reportBuilder/index.js

@@ -1,4 +1,4 @@
-import BlankLayout from "src/@core/layouts/BlankLayout";
+import BlankLayout from "../../../lib/layouts/BlankLayout";
 import {
   Autocomplete,
   Box,
@@ -41,10 +41,12 @@ import {
   SaveAsOutlined,
   SaveOutlined, Search, Visibility, VisibilityOff, Image as ImageIcon,
   CloudDownloadOutlined,
-  CloudUploadOutlined
+  CloudUploadOutlined,
+  CheckCircleOutlined,
+  DeleteOutlined
 } from "@mui/icons-material";
 import dayjs from 'dayjs';
-import {BackspaceOutline, CheckCircleOutline, DeleteOutline, Filter, PencilOutline} from "mdi-material-ui";
+import {BackspaceOutline, Filter, PencilOutline} from "mdi-material-ui";
 import SGrid from "views/genericTable/SGrid";
 import {Controller, useForm} from "react-hook-form";
 import ComputedTextEditor from "views/genericTable/RegexTextEditor";
@@ -772,7 +774,7 @@ const ReportBuilder = () => {
                           }
                           title="Remove field"
                         >
-                          <DeleteOutline fontSize="small"/>
+                          <DeleteOutlined fontSize="small"/>
                         </IconButton>
                       </Box>
                     </ListItem>
@@ -890,7 +892,7 @@ const ReportBuilder = () => {
               }}><SaveOutlined color={'primary'}/></IconButton>}
 
               <IconButton onClick={() => {
-                router.push('reportBuilder/reports')
+                router.push('/builders/report/list')
               }}>
                 <AssessmentOutlined color={'primary'}/>
               </IconButton>
@@ -989,7 +991,7 @@ const ReportBuilder = () => {
                           <Box sx={{display: 'flex', alignItems: 'center', gap: 1}}>
                             {field.friendlyName}
                             {isSelected && (
-                              <CheckCircleOutline
+                              <CheckCircleOutlined
                                 fontSize="small"
                                 color="success"
                                 titleAccess="Field already selected"