robobyte-front-builder 1.0.17 → 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

@@ -0,0 +1,316 @@
+// ** React Imports
+
+// ** MUI Imports
+import {yupResolver} from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  IconButton,
+  Typography
+} from '@mui/material'
+import Box from '@mui/material/Box'
+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'
+import {toast} from 'react-hot-toast'
+import {AgGridReact} from "ag-grid-react";
+import {AutocompleteEditorWrapper} from "views/genericTable/cellEditors/autocompleteEditor";
+
+const UpdateReportPermissionsDialog = props => {
+  // ** Props
+  const {handleToggleDialogs, report, dialog, setRefresh} = props
+  const [IsSubmitting, setIsSubmitting] = useState(false)
+  const [IsLoading, setIsLoading] = useState(false)
+  const [ReportPermissions, setReportPermissions] = useState([])
+  const [gridApi, setGridApi] = useState()
+
+  const colDefs = [
+    {
+      headerName: 'دور الصلاحية',
+      field: 'permissionRole',
+      valueFormatter: (value) => value.data.permissionRole?.name || '',
+      cellEditor: AutocompleteEditorWrapper,
+      cellEditorParams: (value) => {
+        return {
+          dataEndpoint: Endpoints.ViewPermissionRole.Post.GetViewPermissionRolePaged,
+          fieldName: ['name'],
+          filterFields: ['name'],
+          uniqueId: 'id',
+          value: value.data.permissionRole,
+          isSingle: true
+        }
+      },
+      editable: true,
+      onCellValueChanged: (params) => {
+        if (params.newValue && params.newValue.id) {
+          params.data.permissionRoleId = params.newValue.id
+          params.data.permissionRole = params.newValue
+          params.api.refreshCells({
+            rowNodes: [params.node],
+            force: true,
+            columns: ['permissionRole']
+          })
+        }
+      }
+    },
+    {
+      field: 'Delete',
+      width: 80,
+      headerName: 'حذف',
+      cellRenderer: (params) => {
+        return (
+          <IconButton
+            size="small"
+            onClick={() => handleItemDelete(params.node)}
+            color="error"
+          >
+            <DeleteOutlined/>
+          </IconButton>
+        )
+      }
+    },
+  ]
+
+  const schema = yup.object().shape({})
+  const {
+    register,
+    handleSubmit,
+    clearErrors,
+    formState: {errors}
+  } = useForm({
+    mode: 'onBlur',
+    reValidateMode: 'onBlur',
+    resolver: yupResolver(schema)
+  })
+
+
+  const handleItemDelete = (node) => {
+    if (gridApi == null) {
+      return
+    }
+    if (node.data.isNew) {
+      gridApi.applyTransaction({
+        remove: [node.data],
+      });
+    } else {
+      node.data['isForDelete'] = !node.data['isForDelete']
+      gridApi.applyTransaction({
+        update: [node.data],
+      });
+    }
+  }
+
+  const handleAddNew = () => {
+    if (gridApi == null) {
+      return
+    }
+    const defaultItem = {
+      id: 0,
+      reportId: report.id,
+      permissionRoleId: 0,
+      permissionRole: null,
+      isForDelete: false,
+      isNew: true,
+      isAdd: false
+    }
+    gridApi.applyTransaction({
+      add: [defaultItem],
+      addIndex: gridApi.getDisplayedRowCount(),
+    });
+  }
+
+  async function handleSave() {
+    try {
+      setIsSubmitting(true)
+      if (!gridApi) return;
+
+      let allData = []
+      gridApi.forEachNode(node => {
+        if (node.data != null && !node.data.isAdd) {
+          // Only include if permissionRoleId is set (for new items) or if it's an existing item
+          if (node.data.permissionRoleId || node.data.id) {
+            allData.push({
+              reportId: report.id,
+              permissionRoleId: node.data.permissionRoleId || node.data.permissionRole?.id || 0,
+              id: node.data?.id ?? 0,
+              isForDelete: node.data.isForDelete || false,
+            })
+          }
+        }
+      })
+
+      allData = allData.filter(item => item.permissionRoleId > 0)
+      if (allData.length === 0) {
+        toast.error("الرجاء إضافة دور صلاحية واحد على الأقل")
+        setIsSubmitting(false)
+        return
+      }
+      const response = await Services.PostService(
+        Endpoints.ViewPermissionRole.Post.ReportPermissionsUpdateRange,
+        true,
+        allData
+      )
+
+      if (response) {
+        toast.success("تم الحفظ بنجاح")
+        handleDialogClose()
+        if (setRefresh) {
+          setRefresh(prev => !prev)
+        }
+      } else {
+        toast.error("فشل الحفظ، حاول مرة أخرى")
+      }
+
+    } catch (error) {
+      console.error("Error saving report permissions:", error)
+      toast.error("فشل الحفظ، حاول مرة أخرى")
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  async function handleGetReportPermissions() {
+    try {
+      setIsLoading(true)
+      // TODO: Replace with actual endpoint for fetching report permissions
+      // For now, using a filter structure that might work
+      let filter = {
+        Tfilter: [
+          {
+            path: 'reportId',
+            method: 'Equals',
+            value: report.id
+          }
+        ]
+      }
+
+      // Using ViewPermissionRoleItems endpoint as it seems related
+      let response = await Services.PostService(
+        Endpoints.ViewPermissionRole.Post.ReportPermissionsGetAll,
+        false,
+        filter
+      )
+
+      if (response && response.data) {
+        const permissions = response.data.map((value, index) => ({
+          ...value,
+          key: index,
+          isForDelete: false,
+          permissionRoleId: value.permissionRoleId || value.permissionRole?.id,
+          permissionRole: value.permissionRole || null
+        }))
+        setReportPermissions(permissions)
+      } else {
+        setReportPermissions([])
+      }
+    } catch (error) {
+      console.error("Error fetching report permissions:", error)
+      setReportPermissions([])
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+
+  const handleDialogClose = async () => {
+    clearErrors()
+    handleToggleDialogs(dialog)
+  }
+
+  useEffect(() => {
+    if (report) {
+      handleGetReportPermissions()
+    }
+  }, [report])
+
+  return (
+    <>
+      <DialogTitle id='confirmation-dialog-title' sx={{padding: 0, marginBottom: 5}}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            backgroundColor: 'background.default',
+            p: theme => theme.spacing(3, 3.255, 3, 5.255)
+          }}
+        >
+          <Typography variant='h6'>صلاحيات التقرير</Typography>
+          <Box sx={{display: 'flex', alignItems: 'center'}}>
+            <Close fontSize='small' onClick={handleDialogClose} sx={{cursor: 'pointer'}}/>
+          </Box>
+        </Box>
+      </DialogTitle>
+
+      <DialogContent className='dialog-body'>
+        <form
+          onSubmit={handleSubmit(e => {
+            handleSave(e)
+          })}
+        >
+          <Box sx={{display: 'flex', justifyContent: 'flex-end', mb: 2}}>
+            <Button
+              variant='outlined'
+              size='small'
+              startIcon={<Plus/>}
+              onClick={handleAddNew}
+            >
+              إضافة دور صلاحية
+            </Button>
+          </Box>
+          <Grid container size={{ xs: 12 }}>
+            <div style={{width: "100%", height: "40vh", direction: 'ltr'}}>
+              <AgGridReact
+                enableRtl={true}
+                columnDefs={colDefs}
+                rowData={ReportPermissions}
+                onGridReady={(params) => setGridApi(params.api)}
+                singleClickEdit={true}
+                defaultColDef={{
+                  sortable: false,
+                  suppressHeaderMenuButton: true,
+                }}
+                pinnedBottomRowData={[{
+                  id: 'add-row',
+                  isAdd: true
+                }]}
+                getRowStyle={(row) => {
+                  if (row.data?.isAdd) {
+                    return {display: 'none'};
+                  }
+                  if (row.data?.isForDelete) {
+                    return {backgroundColor: '#FF625F'};
+                  }
+                  if (row.data?.isNew) {
+                    return {backgroundColor: '#f6fff3'};
+                  }
+                  return null;
+                }}
+              />
+            </div>
+          </Grid>
+          <DialogActions sx={{pb: {xs: 8}, justifyContent: 'center'}}>
+            <Button
+              variant='contained'
+              sx={{mr: 2}}
+              disabled={IsSubmitting || IsLoading}
+              onClick={handleSave}
+            >
+              {IsSubmitting ? 'جاري الحفظ...' : 'حفظ'}
+            </Button>
+            <Button variant='outlined' color='secondary' onClick={handleDialogClose}>
+              الغاء
+            </Button>
+          </DialogActions>
+        </form>
+      </DialogContent>
+    </>
+  )
+}
+
+export default UpdateReportPermissionsDialog

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