robobyte-front-builder 1.0.19 → 1.0.21

package/src/views/printBuilder/PrintPreviewCanvas.jsx

@@ -0,0 +1,157 @@
+import { Box } from '@mui/material'
+import ComponentRenderer from 'views/builder/viewer/ComponentRenderer'
+
+const PAGE_SIZES = {
+  A4:     { portrait: { w: 794,  h: 1123 }, landscape: { w: 1123, h: 794  } },
+  Letter: { portrait: { w: 816,  h: 1056 }, landscape: { w: 1056, h: 816  } },
+  Legal:  { portrait: { w: 816,  h: 1344 }, landscape: { w: 1344, h: 816  } },
+}
+const mmToPx = (mm) => Math.round((mm ?? 0) * 3.7795)
+
+/**
+ * Shared print preview canvas.
+ *
+ * Used by:
+ *  • PrintBuilderViewer — preview mode (live builder, makeViewerCtx varies per zone)
+ *  • PrintDialog        — screen preview  (makeViewerCtx returns the same printCtx for all zones)
+ *
+ * Props:
+ *  schema        — the full print schema (settings, zones, pageOrder, activeZone)
+ *  makeViewerCtx — (zoneKey: string) => viewerContext
+ */
+export default function PrintPreviewCanvas({ schema, makeViewerCtx }) {
+  if (!schema) return null
+
+  const settings  = schema.settings ?? {}
+  const pageOrder = schema.pageOrder ?? []
+  const zones     = schema.zones ?? {}
+  const m         = settings.margins ?? { top: 0, right: 0, bottom: 0, left: 0 }
+  const hEnabled  = settings.header?.enabled
+  const fEnabled  = settings.footer?.enabled
+
+  const orient    = settings.orientation ?? 'portrait'
+  const sizeConf  = (PAGE_SIZES[settings.pageSize] ?? PAGE_SIZES.A4)[orient] ?? PAGE_SIZES.A4.portrait
+  const pageW     = sizeConf.w
+  const pageH     = sizeConf.h
+
+  // Zone heights = exact configured values (margins are internal padding, not added).
+  // Always allocated even when disabled so preview spacing matches print output.
+  // Use the exact configured height for layout calculations (body offset, etc.)
+  // but clamp to a minimum of 60px in the canvas so zones stay visible and
+  // clickable even when height is set to 0.
+  const headerAreaH    = hEnabled ? mmToPx(settings.header?.height ?? 10) : 0
+  const footerAreaH    = fEnabled ? mmToPx(settings.footer?.height ?? 10) : 0
+  const headerDisplayH = hEnabled ? Math.max(headerAreaH, 60) : 0
+  const footerDisplayH = fEnabled ? Math.max(footerAreaH, 60) : 0
+  const bodyH          = pageH - headerDisplayH - footerDisplayH
+
+  // Watermark
+  const wm = settings.watermark ?? {}
+
+  // Resolve zone root: prefer zones[zoneKey] except when zoneKey === activeZone
+  // where schema.root is always the live version.
+  const activeZone = schema.activeZone
+  const getNode = (zoneKey) =>
+    zoneKey === activeZone
+      ? (schema.root ?? zones[zoneKey])
+      : (zones[zoneKey])
+
+  const headerNode = getNode('header')
+  const footerNode = getNode('footer')
+
+  // Shared watermark overlay rendered on each body page
+  const WatermarkOverlay = wm.enabled && wm.text ? (
+    <Box sx={{
+      position: 'absolute',
+      top: '50%', left: '50%',
+      transform: `translate(-50%, -50%) rotate(${wm.angle ?? -45}deg)`,
+      fontSize: wm.fontSize ?? 60,
+      color: wm.color ?? '#000000',
+      opacity: wm.opacity ?? 0.1,
+      pointerEvents: 'none',
+      whiteSpace: 'nowrap',
+      userSelect: 'none',
+      zIndex: 10,
+      fontWeight: 700,
+    }}>
+      {wm.text}
+    </Box>
+  ) : null
+
+  return (
+    <Box sx={{ width: pageW, mx: 'auto' }}>
+
+      {/* ── Header zone ──────────────────────────────────────────────────────
+          Exact configured height. Page margins live as internal padding so
+          they are applied to whatever the user places inside the zone.       */}
+      {hEnabled && headerNode && (
+        <Box sx={{
+          height: `${headerDisplayH}px`,
+          overflow: 'hidden',
+          bgcolor: 'white',
+          borderBottom: '1px solid #e0e0e0',
+          boxSizing: 'border-box',
+          pt: `${mmToPx(m.top)}px`,
+          pl: `${mmToPx(m.left)}px`,
+          pr: `${mmToPx(m.right)}px`,
+        }}>
+          <ComponentRenderer
+            node={headerNode}
+            viewerContext={{ ...makeViewerCtx('header'), __rbbPrint: { index: null, total: pageOrder.length } }}
+          />
+        </Box>
+      )}
+
+      {/* ── Body pages ───────────────────────────────────────────────────────
+          Side padding = page left/right margins (expressed as body padding).
+          No top/bottom padding — zones above/below own that space.           */}
+      {pageOrder.map((pageId, idx) => {
+        const pageNode = getNode(pageId) ?? zones[pageId]
+        if (!pageNode) return null
+        // Inject page-number info under a private namespaced key so it
+        // never collides with the user's own data or context fields.
+        const pageCtx = {
+          ...makeViewerCtx(pageId),
+          __rbbPrint: { index: idx, total: pageOrder.length },
+        }
+        return (
+          <Box key={pageId} sx={{
+            bgcolor: 'white',
+            minHeight: Math.max(bodyH, 120),
+            pl: `${mmToPx(m.left)}px`,
+            pr: `${mmToPx(m.right)}px`,
+            boxSizing: 'border-box',
+            position: 'relative',
+            borderBottom: idx < pageOrder.length - 1 ? '3px dashed #bbb' : 'none',
+            mb:           idx < pageOrder.length - 1 ? 2 : 0,
+          }}>
+            {WatermarkOverlay}
+            <ComponentRenderer node={pageNode} viewerContext={pageCtx} />
+          </Box>
+        )
+      })}
+
+      {/* ── Footer zone ──────────────────────────────────────────────────────
+          Exact configured height. Page bottom margin as internal padding.    */}
+      {fEnabled && footerNode && (
+        <Box sx={{
+          height: `${footerDisplayH}px`,
+          overflow: 'hidden',
+          bgcolor: 'white',
+          borderTop: '1px solid #e0e0e0',
+          boxSizing: 'border-box',
+          position: 'relative',
+          pb: `${mmToPx(m.bottom)}px`,
+          pl: `${mmToPx(m.left)}px`,
+          pr: `${mmToPx(m.right)}px`,
+        }}>
+          <ComponentRenderer
+            node={footerNode}
+            viewerContext={{ ...makeViewerCtx('footer'), __rbbPrint: { index: null, total: pageOrder.length } }}
+          />
+        </Box>
+      )}
+
+    </Box>
+  )
+}

package/src/views/rolePermissions/UpdateReportPermissionDialog.js

@@ -13,7 +13,8 @@ import {
   Typography
 } from '@mui/material'
 import Box from '@mui/material/Box'
-import {Close, DeleteOutline, Plus} from 'mdi-material-ui'
+import {Close, Plus} from 'mdi-material-ui'
+import {DeleteOutlined} from '@mui/icons-material'
 import {useEffect, useState} from 'react'
 import {useForm} from 'react-hook-form'
 import {Endpoints, Services} from 'src/services/Endpoints'
@@ -69,7 +70,7 @@ const UpdateReportPermissionsDialog = props => {
             onClick={() => handleItemDelete(params.node)}
             color="error"
           >
-            <DeleteOutline/>
+            <DeleteOutlined/>
           </IconButton>
         )
       }

package/src/@core/components/auth/AclGuard.js

@@ -1,55 +0,0 @@
-// ** React Imports
-import { useState } from 'react'
-
-// ** Next Imports
-import { useRouter } from 'next/router'
-
-// ** Context Imports
-import { AbilityContext } from 'src/layouts/components/acl/Can'
-
-// ** Config Import
-import { buildAbilityFor } from 'src/configs/acl'
-
-// ** Component Import
-import NotAuthorized from 'src/pages/401'
-import BlankLayout from 'src/@core/layouts/BlankLayout'
-
-// ** Hooks
-import { useAuth } from 'src/hooks/useAuth'
-
-const AclGuard = props => {
-  // ** Props
-  const { aclAbilities, children, guestGuard } = props
-  const [ability, setAbility] = useState(undefined)
-
-  // ** Hooks
-  const auth = useAuth()
-  const router = useRouter()
-  console.log(auth)
-  // If guestGuard is true and user is not logged in or its an error page, render the page without checking access
-  if (guestGuard || router.route === '/404' || router.route === '/500' || router.route === '/') {
-    return <>{children}</>
-  }
-
-  // User is logged in, build ability for the user based on his role
-  if (auth.user && auth.user.permissions && !ability) {
-    console.log(auth.user.permissions)
-    setAbility(buildAbilityFor(auth.user.permissions, auth.user.userType))
-  }
-  console.log(ability)
-  // Check the access of current user and render pages
-  if (ability && ability.can(aclAbilities.action, aclAbilities.subject)) {
-    console.log('Auth')
-
-    return <AbilityContext.Provider value={ability}>{children}</AbilityContext.Provider>
-  }
-  console.log('UnAuth')
-  // Render Not Authorized component if the current user has limited access
-  return (
-    <BlankLayout>
-      <NotAuthorized />
-    </BlankLayout>
-  )
-}
-
-export default AclGuard

package/src/@core/components/auth/AuthGuard.js

@@ -1,40 +0,0 @@
-// ** React Imports
-import { useEffect } from 'react'
-
-// ** Next Imports
-import { useRouter } from 'next/router'
-
-// ** Hooks Import
-import { useAuth } from 'src/hooks/useAuth'
-
-const AuthGuard = props => {
-  const { children, fallback } = props
-  const auth = useAuth()
-  const router = useRouter()
-  useEffect(
-    () => {
-      if (!router.isReady) {
-        return
-      }
-      if (auth.user === null && !window.localStorage.getItem('userData')) {
-        if (router.asPath !== '/') {
-          router.replace({
-            pathname: '/login',
-            query: { returnUrl: router.asPath }
-          })
-        } else {
-          router.replace('/login')
-        }
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [router.route]
-  )
-  if (auth.loading || auth.user === null || auth.user.permissions == null) {
-    return fallback
-  }
-
-  return <>{children}</>
-}
-
-export default AuthGuard

package/src/@core/components/auth/GuestGuard.js

@@ -1,30 +0,0 @@
-// ** React Imports
-import { useEffect } from 'react'
-
-// ** Next Imports
-import { useRouter } from 'next/router'
-
-// ** Hooks Import
-import { useAuth } from 'src/hooks/useAuth'
-
-const GuestGuard = props => {
-  const { children, fallback } = props
-  const auth = useAuth()
-  const router = useRouter()
-  useEffect(() => {
-    if (!router.isReady) {
-      return
-    }
-    if (window.localStorage.getItem('userData') != null) {
-      router.replace('/')
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [router.route])
-  if (auth.loading || (!auth.loading && auth.user !== null && auth.user.permissions !== null)) {
-    return fallback
-  }
-
-  return <>{children}</>
-}
-
-export default GuestGuard

package/src/@core/components/custom-inputs/Horizontal.jsx

@@ -1,143 +0,0 @@
-// MUI Imports
-import Grid from '@mui/material/Grid2'
-import Radio from '@mui/material/Radio'
-import Checkbox from '@mui/material/Checkbox'
-import Typography from '@mui/material/Typography'
-import { styled } from '@mui/material/styles'
-
-// Third-party Imports
-import classnames from 'classnames'
-
-const Root = styled('div', {
-  name: 'MuiCustomInputHorizontal',
-  slot: 'root'
-})(({ theme }) => ({
-  blockSize: '100%',
-  display: 'flex',
-  gap: theme.spacing(1),
-  borderRadius: 'var(--mui-shape-borderRadius)',
-  cursor: 'pointer',
-  position: 'relative',
-  alignItems: 'flex-start',
-  border: '1px solid var(--mui-palette-customColors-inputBorder)',
-  padding: theme.spacing(4),
-  color: 'var(--mui-palette-text-primary)',
-  transition: theme.transitions.create(['border-color'], {
-    duration: theme.transitions.duration.shorter
-  }),
-  '&:hover': {
-    borderColor: 'var(--mui-palette-action-active)'
-  },
-  '&.active': {
-    borderColor: 'var(--mui-palette-primary-main)',
-    '& i, & svg': {
-      color: 'var(--mui-palette-primary-main) !important'
-    }
-  }
-}))
-
-const Title = styled(Typography, {
-  name: 'MuiCustomInputHorizontal',
-  slot: 'title'
-})(({ theme }) => ({
-  fontWeight: theme.typography.fontWeightMedium,
-  color: 'var(--mui-palette-text-primary) !important'
-}))
-
-const Meta = styled(Typography, {
-  name: 'MuiCustomInputHorizontal',
-  slot: 'meta'
-})(({ theme }) => ({
-  ...theme.typography.body2,
-  color: 'var(--mui-palette-text-disabled) !important'
-}))
-
-const Content = styled(Typography, {
-  name: 'MuiCustomInputHorizontal',
-  slot: 'content'
-})(({ theme }) => ({
-  ...theme.typography.body2
-}))
-
-const RadioInput = styled(Radio, {
-  name: 'MuiCustomInputHorizontal',
-  slot: 'input'
-})(({ theme }) => ({
-  marginBlockStart: theme.spacing(-0.25),
-  marginInlineStart: theme.spacing(-0.25)
-}))
-
-const CheckboxInput = styled(Checkbox, {
-  name: 'MuiCustomInputHorizontal',
-  slot: 'input'
-})(({ theme }) => ({
-  marginBlockStart: theme.spacing(-0.25),
-  marginInlineStart: theme.spacing(-0.25)
-}))
-
-const CustomInputHorizontal = props => {
-  // Props
-  const { type, data, name, selected, gridProps, handleChange, color = 'primary' } = props
-
-  // Vars
-  const { meta, title, value, content } = data
-
-  const renderData = () => {
-    if (meta && title && content) {
-      return (
-        <div className='flex flex-col bs-full is-full gap-1.5'>
-          <div className='flex items-start justify-between is-full mbs-1.5 gap-1.5'>
-            {typeof title === 'string' ? <Title>{title}</Title> : title}
-            {typeof meta === 'string' ? <Meta>{meta}</Meta> : meta}
-          </div>
-          {typeof content === 'string' ? <Content>{content}</Content> : content}
-        </div>
-      )
-    } else if (meta && title && !content) {
-      return (
-        <div className='flex items-start justify-between is-full mbs-1.5 gap-1.5'>
-          {typeof title === 'string' ? <Title>{title}</Title> : title}
-          {typeof meta === 'string' ? <Meta>{meta}</Meta> : meta}
-        </div>
-      )
-    } else if (!meta && title && content) {
-      return (
-        <div className='flex flex-col bs-full gap-1.5 mbs-1.5'>
-          {typeof title === 'string' ? <Title>{title}</Title> : title}
-          {typeof content === 'string' ? <Content>{content}</Content> : content}
-        </div>
-      )
-    } else if (!meta && !title && content) {
-      return typeof content === 'string' ? <Content className='mbs-1.5'>{content}</Content> : content
-    } else if (!meta && title && !content) {
-      return typeof title === 'string' ? <Title className='mbs-1.5'>{title}</Title> : title
-    } else {
-      return null
-    }
-  }
-
-  return data ? (
-    <Grid {...gridProps}>
-      <Root
-        onClick={() => handleChange(value)}
-        className={classnames({
-          active: type === 'radio' ? selected === value : selected.includes(value)
-        })}
-      >
-        {type === 'radio' ? (
-          <RadioInput name={name} color={color} value={value} onChange={handleChange} checked={selected === value} />
-        ) : (
-          <CheckboxInput
-            color={color}
-            name={`${name}-${value}`}
-            checked={selected.includes(value)}
-            onChange={() => handleChange(value)}
-          />
-        )}
-        {renderData()}
-      </Root>
-    </Grid>
-  ) : null
-}
-
-export default CustomInputHorizontal

package/src/@core/components/custom-inputs/Image.jsx

@@ -1,78 +0,0 @@
-// MUI Imports
-import Grid from '@mui/material/Grid2'
-import Checkbox from '@mui/material/Checkbox'
-import { styled } from '@mui/material/styles'
-
-// Third-party Imports
-import classnames from 'classnames'
-
-const Root = styled('div', {
-  name: 'MuiCustomImage',
-  slot: 'Root'
-})({
-  blockSize: '100%',
-  display: 'flex',
-  borderRadius: 'var(--mui-shape-borderRadius)',
-  cursor: 'pointer',
-  overflow: 'hidden',
-  position: 'relative',
-  alignItems: 'center',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  border: '1px solid var(--mui-palette-customColors-inputBorder)',
-  '&:hover': {
-    borderColor: 'var(--mui-palette-action-active)'
-  },
-  '&.active': {
-    borderColor: 'var(--mui-palette-primary-main)'
-  },
-  '&:not(.active):not(:hover) .MuiCheckbox-root': {
-    display: 'none'
-  }
-})
-
-const CheckboxInput = styled(Checkbox, {
-  name: 'MuiCustomImage',
-  slot: 'Input'
-})({
-  top: 8,
-  right: 8,
-  position: 'absolute'
-})
-
-const Image = styled('img', {
-  name: 'MuiCustomImage',
-  slot: 'Image'
-})({
-  maxInlineSize: '100%'
-})
-
-const CustomCheckboxImg = props => {
-  // Props
-  const { type, data, name, selected, gridProps, handleChange, color = 'primary' } = props
-
-  // Vars
-  const { alt, img, value } = data
-
-  const renderComponent = () => {
-    return (
-      <Grid {...gridProps}>
-        <Root className={classnames({ active: selected.includes(value) })} onClick={() => handleChange(value)}>
-          {typeof img === 'string' ? <Image src={img} alt={alt ?? `checkbox-image-${value}`} /> : img}
-          {type === 'radio' ? null : (
-            <CheckboxInput
-              color={color}
-              name={`${name}-${value}`}
-              checked={selected.includes(value)}
-              onChange={() => handleChange(value)}
-            />
-          )}
-        </Root>
-      </Grid>
-    )
-  }
-
-  return data ? renderComponent() : null
-}
-
-export default CustomCheckboxImg

package/src/@core/components/custom-inputs/Vertical.jsx

@@ -1,113 +0,0 @@
-// MUI Imports
-import Grid from '@mui/material/Grid2'
-import Radio from '@mui/material/Radio'
-import Checkbox from '@mui/material/Checkbox'
-import Typography from '@mui/material/Typography'
-import { styled } from '@mui/material/styles'
-
-// Third-party Imports
-import classnames from 'classnames'
-
-const Root = styled('div', {
-  name: 'MuiCustomInputVertical',
-  slot: 'root'
-})(({ theme }) => ({
-  display: 'flex',
-  blockSize: '100%',
-  cursor: 'pointer',
-  position: 'relative',
-  alignItems: 'center',
-  gap: theme.spacing(2),
-  flexDirection: 'column',
-  padding: theme.spacing(4),
-  borderRadius: 'var(--mui-shape-borderRadius)',
-  border: '1px solid var(--mui-palette-customColors-inputBorder)',
-  color: 'var(--mui-palette-text-primary)',
-  transition: theme.transitions.create(['border-color'], { duration: theme.transitions.duration.shorter }),
-  '&:hover': {
-    borderColor: 'var(--mui-palette-action-active)'
-  },
-  '&.active': {
-    borderColor: 'var(--mui-palette-primary-main)',
-    '& > svg, & > i': {
-      color: 'var(--mui-palette-primary-main) !important'
-    }
-  },
-  '&.radio-only .MuiRadio-root': {
-    marginBlockStart: theme.spacing(-2)
-  },
-  '&.checkbox-only .MuiCheckbox-root': {
-    marginBlockStart: theme.spacing(-2)
-  }
-}))
-
-const Title = styled(Typography, {
-  name: 'MuiCustomInputVertical',
-  slot: 'title'
-})(({ theme }) => ({
-  fontWeight: theme.typography.fontWeightMedium,
-  color: 'var(--mui-palette-text-primary) !important'
-}))
-
-const Content = styled(Typography, {
-  name: 'MuiCustomInputVertical',
-  slot: 'content'
-})(({ theme }) => ({
-  ...theme.typography.body2,
-  textAlign: 'center'
-}))
-
-const RadioInput = styled(Radio, {
-  name: 'MuiCustomInputVertical',
-  slot: 'input'
-})(({ theme }) => ({
-  marginBlockEnd: theme.spacing(-2)
-}))
-
-const CheckboxInput = styled(Checkbox, {
-  name: 'MuiCustomInputVertical',
-  slot: 'input'
-})(({ theme }) => ({
-  marginBlockEnd: theme.spacing(-2)
-}))
-
-const CustomInputVertical = props => {
-  // Props
-  const { type, data, name, selected, gridProps, handleChange, color = 'primary' } = props
-
-  // Vars
-  const { title, value, content, asset } = data
-
-  const renderComponent = () => {
-    return (
-      <Grid {...gridProps}>
-        <Root
-          onClick={() => handleChange(value)}
-          className={classnames({
-            'radio-only': type === 'radio' && !asset && !title && !content,
-            'checkbox-only': type === 'checkbox' && !asset && !title && !content,
-            active: type === 'radio' ? selected === value : selected.includes(value)
-          })}
-        >
-          {asset || null}
-          {title ? typeof title === 'string' ? <Title>{title}</Title> : title : null}
-          {content ? typeof content === 'string' ? <Content>{content}</Content> : content : null}
-          {type === 'radio' ? (
-            <RadioInput name={name} color={color} value={value} onChange={handleChange} checked={selected === value} />
-          ) : (
-            <CheckboxInput
-              color={color}
-              name={`${name}-${value}`}
-              checked={selected.includes(value)}
-              onChange={() => handleChange(value)}
-            />
-          )}
-        </Root>
-      </Grid>
-    )
-  }
-
-  return data ? renderComponent() : null
-}
-
-export default CustomInputVertical