robobyte-front-builder 1.0.19 → 1.0.21

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"

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

@@ -11,8 +11,8 @@ import TAGGrid from "views/genericTable/TAGGrid";
 import {SettingsOutlined} from "@mui/icons-material";
 import UpdateReportPermissionDialog from "views/rolePermissions/UpdateReportPermissionDialog";
 import {getReportSession} from 'src/services/helper/reportSessionHelper'
-import BlankLayout from "src/@core/layouts/BlankLayout";
-import ReportsCard from "src/pages/reportModule/reportBuilder/reportsPermissions";
+import BlankLayout from '../../../../lib/layouts/BlankLayout';
+import ReportsCard from "../reportsPermissions";
 
 
 // make sure you’ve globally included the Alpine theme once in _app.js or your main stylesheet:
@@ -40,7 +40,17 @@ const ReportViewer = (params) => {
     sessionId,
     globalParams,
     isRerender = false,
-    updateRef
+    updateRef,
+    // nodeId / reportRefs are injected by the UI builder's ReportViewerRenderer.
+    // nodeId    — the builder schema node ID for this ReportViewer instance
+    // reportRefs — the shared registry { [nodeId]: updateRef } for all reports on the page
+    nodeId,
+    reportRefs,
+    // Viewer state — threaded from ReportViewerRenderer for column function scope
+    data,
+    dataRef,
+    openDialog,
+    closeDialog,
   } = params ?? router.query
   const [isLoading, setIsLoading] = useState(false)
   const [builderModel, setBuilderModel] = useState(null)
@@ -162,9 +172,8 @@ const ReportViewer = (params) => {
   return (
     <Box
       sx={{
-        display: 'flex',
+        display: 'block',
         width: '100%',
-        p: minimized !== true ? 2 : 0,
       }}
     >
       {isLoading ? (
@@ -185,26 +194,22 @@ const ReportViewer = (params) => {
         </Box>
       ) : (
         <>
-          <Box display="flex" gap={1} flexDirection={'column'} sx={{
-            width: '100%',
-            backgroundColor: 'white', borderRadius: 2,
-            boxShadow: minimized !== true && '0 4px 12px rgba(0,0,0,0.08)',  // subtle custom shadow
-          }}>
+          <Box display="flex" gap={1} flexDirection={'column'} sx={{ width: '100%' }}>
             {(minimized !== true && noHeader !== true) &&
               <Box display="flex" justifyContent={'space-between'} alignItems={'center'} gap={1} sx={{p: 2}}>
                 <Typography variant="subtitle1" color="text.secondary">{builderMetadata?.name ?? ""}</Typography>
-                {/*<Tooltip title={'Studio'}>*/}
-                {/*  <IconButton*/}
-                {/*    size={'small'}*/}
-                {/*    onClick={() => {*/}
-                {/*      router.push({pathname: '/reportModule/reportBuilder', query: {id: id ?? router.query?.id}})*/}
-                {/*    }}*/}
-                {/*  >*/}
-                {/*    <SettingsOutlined color={'primary'}/>*/}
-                {/*  </IconButton>*/}
-                {/*</Tooltip>*/}
+                <Tooltip title={'Studio'}>
+                  <IconButton
+                    size={'small'}
+                    onClick={() => {
+                      router.push({pathname: '/builders/report', query: {id: id ?? router.query?.id}})
+                    }}
+                  >
+                    <SettingsOutlined color={'primary'}/>
+                  </IconButton>
+                </Tooltip>
               </Box>}
-            <Box display={'flex'} alignItems="center" gap={1} width={'100%'}>
+            <Box sx={{width: '100%'}}>
               <SGrid
                 key={`rv-${payloadVersion}`}
                 minimized={minimized}
@@ -224,7 +229,13 @@ const ReportViewer = (params) => {
                 isRerender={isRerender}
                 // uniqueIdPath={'Id'}
                 // noPurge={true}
-                updateRef ={updateRef}
+                updateRef={updateRef}
+                nodeId={nodeId}
+                reportRefs={reportRefs}
+                data={data}
+                dataRef={dataRef}
+                openDialog={openDialog}
+                closeDialog={closeDialog}
               />
             </Box>
           </Box>

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

@@ -16,10 +16,8 @@ import ClearIcon from '@mui/icons-material/Clear'
 import {Endpoints, Services} from 'services/Endpoints'
 import PermissionsSubjects from 'src/configs/Permissions/PermissionsSubjects.json'
 import {EditOutlined, SettingsOutlined} from "@mui/icons-material";
-import DriverRequestStatus from "services/enums/DriverRequestStatusEnum";
 import Grid from "@mui/material/Grid";
 import ReportBuilderTypeEnum from "services/enums/ReportBuilderTypeEnum";
-import UpdateRangeProductPriceDialog from "views/productPrice/UpdateRangeProductPriceDialog";
 import handleChange from "services/helper/handleChange";
 import UpdateReportPermissionDialog from "views/rolePermissions/UpdateReportPermissionDialog";
 
@@ -107,7 +105,7 @@ const ReportsList = () => {
                   ))}
                 </Select>
               </FormControl>
-              <Button variant="contained" sx={{ml:3}} onClick={() => router.push('/reportModule/reportBuilder')}>
+              <Button variant="contained" sx={{ml:3}} onClick={() => router.push('/builders/report')}>
                 New
               </Button>
             </Box>
@@ -192,7 +190,7 @@ const ReportsList = () => {
                       size="small"
                       variant="outlined"
                       onClick={() =>
-                        router.push({pathname: '/reportModule/reportBuilder/reportViewer', query: {id: report.id}})
+                        router.push({pathname: '/builders/report/viewer', query: {id: report.id}})
                       }
                       sx={{flexGrow: 1}}    // <-- takes all remaining space
                     >
@@ -202,7 +200,7 @@ const ReportsList = () => {
                       size="small"
                       variant="outlined"
                       onClick={() =>
-                        router.push({pathname: '/reportModule/reportBuilder', query: {id: report.id}})
+                        router.push({pathname: '/builders/report', query: {id: report.id}})
                       }
                     >
                       <EditOutlined color={'secondary'} fontSize="small"/>

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

@@ -13,11 +13,10 @@ import {CloudUploadOutline, Delete, DeleteCircle, DotsVerticalCircleOutline, Plu
 import {useEffect, useState, useContext, useMemo} from 'react'
 import handleChange from 'src/services/helper/handleChange'
 import {Avatar, Button, ButtonGroup, Card, CardContent, Checkbox, Dialog, IconButton, Popover} from '@mui/material'
-import ReportViewer from "src/pages/reportBuilder/reportViewer";
+import ReportViewer from "../reportViewer";
 import PermissionsSubjects from "src/configs/Permissions/PermissionsSubjects.json";
 import {AuthContext} from "context/AuthContext";
-import CompanyDeliveryLayout from "src/layouts/CompanyDeliveryLayout";
-import BlankLayout from "src/@core/layouts/BlankLayout";
+import BlankLayout from '../../../../lib/layouts/BlankLayout';
 // ** Utils Import
 
 // ** Actions Imports