robobyte-front-builder 1.0.23 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "robobyte-front-builder",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "RoboByte low-code UI builder, Report builder, and navigation extension system",
   "main": "src/lib/index.js",
   "files": [

package/src/lib/index.js

@@ -98,3 +98,11 @@ export { SystemContext, SystemProvider } from '../context/SystemContext'
 // RoboByteFrontBuilderProvider's user / accessToken props.
 // There is no AuthProvider in this package; use your own host auth provider.
 export { AuthContext } from '../context/AuthContext'
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+// fetchReportDataByPageId: pure data fetcher by report `pageId`, no AG Grid
+// dependency. Host code can either import from this package surface (the
+// recommended path) or via the bare alias 'services/reportData/fetchReportData'
+// — both resolve to the same module thanks to the NormalModuleReplacementPlugin
+// in next.config.js, so the in-memory builderModelCache is shared.
+export { default as fetchReportDataByPageId } from '../services/reportData/fetchReportData'

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

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react'
-import {Box, CircularProgress, Typography, Paper, IconButton, CardContent, Tooltip} from '@mui/material'
+import {Box, CircularProgress, Typography, Paper, IconButton, CardContent, Tooltip, Popover, Chip} from '@mui/material'
 import {useRouter} from 'next/router'
 import SGrid from 'views/genericTable/SGrid'
 import {Endpoints, Services} from 'services/Endpoints'
@@ -8,7 +8,7 @@ import CardHeader from "@mui/material/CardHeader";
 import Grid from "@mui/material/Grid";
 import {Plus} from "mdi-material-ui";
 import TAGGrid from "views/genericTable/TAGGrid";
-import {SettingsOutlined, AssessmentOutlined} from "@mui/icons-material";
+import {SettingsOutlined, AssessmentOutlined, BugReportOutlined, ContentCopyOutlined} from "@mui/icons-material";
 import UpdateReportPermissionDialog from "views/rolePermissions/UpdateReportPermissionDialog";
 import {getReportSession} from 'src/services/helper/reportSessionHelper'
 import BlankLayout from '../../../../lib/layouts/BlankLayout';
@@ -48,6 +48,12 @@ const ReportViewer = (params) => {
     // Page-level toolbar buttons rendered after Filter / Refresh.
     // Built by ReportViewerRenderer with bound onClick handlers.
     viewerActions,
+    // Debug — when truthy, renders a small floating BugReport icon at the
+    // top-right corner of the report area. Clicking it opens a popover
+    // showing the resolved ids (pageId, id, builderMetadata.id) and other
+    // useful runtime info. Hidden entirely when `debug` is falsy, so
+    // production builds incur zero cost.
+    debug,
     // 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
@@ -64,6 +70,8 @@ const ReportViewer = (params) => {
   const [builderMetadata, setBuilderMetadata] = useState(null)
   const [sessionPayload, setSessionPayload] = useState(null)
   const [payloadVersion, setPayloadVersion] = useState(0)
+  // Debug popover anchor — only used when `debug` prop is truthy.
+  const [debugAnchor, setDebugAnchor] = useState(null)
 
   useEffect(() => {
     // Prefer localStorage payload via sessionId (set by SGrid)
@@ -176,13 +184,137 @@ const ReportViewer = (params) => {
     setPayloadVersion(v => v + 1);
   }, [id, router.query?.id, pageId, router.query?.pageId, sessionPayload])
 
+  // ── Debug snapshot — gathered fresh on every render so the popover always
+  //    reflects the current resolved state. Cheap to build (just reads
+  //    existing state / props) so no memo needed.
+  const resolvedPageId = pageId ?? sessionPayload?.pageId ?? router.query?.pageId
+  const resolvedId     = id     ?? sessionPayload?.id     ?? router.query?.id
+  const debugFields = debug ? [
+    { label: 'pageId',           value: resolvedPageId },
+    { label: 'id (prop)',        value: resolvedId },
+    { label: 'builder model id', value: builderModel?.id },
+    { label: 'report name',      value: builderMetadata?.name },
+    { label: 'nodeId',           value: nodeId },
+    { label: 'sessionId',        value: sessionId },
+    { label: 'payload version',  value: payloadVersion },
+    { label: 'session payload',  value: sessionPayload ? '✓ loaded' : '—' },
+    { label: 'isSingle',         value: String(Boolean(isSingle)) },
+    { label: 'dataAsObject',     value: String(Boolean(dataAsObject)) },
+    { label: 'isRerender',       value: String(Boolean(isRerender)) },
+    { label: 'externalTimer',    value: externalTimer ?? '—' },
+    { label: 'height',           value: height ?? '85vh' },
+    { label: 'globalParams',     value: globalParams ? JSON.stringify(globalParams) : '—' },
+  ] : []
+
+  const copyToClipboard = (value) => {
+    if (value == null) return
+    try { navigator.clipboard?.writeText(String(value)) } catch (_) {}
+  }
+
   return (
     <Box
       sx={{
         display: 'block',
         width: '100%',
+        position: 'relative',
       }}
     >
+      {/* ── Debug floater ────────────────────────────────────────────────────
+          Renders only when the `debug` prop is truthy. A small icon button at
+          the top-right corner that opens a key/value popover. Useful when a
+          report appears broken — confirm pageId/id resolved correctly, the
+          builder model loaded, the right sessionPayload was picked, etc. */}
+      {debug && (
+        <>
+          <Tooltip title='Report debug info' placement='left'>
+            <IconButton
+              size='small'
+              onClick={(e) => setDebugAnchor(e.currentTarget)}
+              sx={{
+                position: 'absolute',
+                top: 4,
+                insetInlineEnd: 4,
+                zIndex: 10,
+                bgcolor: 'warning.light',
+                color: 'warning.contrastText',
+                opacity: 0.9,
+                '&:hover': { bgcolor: 'warning.main', opacity: 1 },
+                boxShadow: 1,
+              }}
+            >
+              <BugReportOutlined fontSize='small' />
+            </IconButton>
+          </Tooltip>
+
+          <Popover
+            open={Boolean(debugAnchor)}
+            anchorEl={debugAnchor}
+            onClose={() => setDebugAnchor(null)}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+            transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+            PaperProps={{ sx: { p: 0, minWidth: 320, maxWidth: 480 } }}
+          >
+            <Box sx={{ px: 2, py: 1, bgcolor: 'warning.light', display: 'flex', alignItems: 'center', gap: 1 }}>
+              <BugReportOutlined fontSize='small' sx={{ color: 'warning.contrastText' }} />
+              <Typography variant='subtitle2' sx={{ color: 'warning.contrastText', fontWeight: 700, flex: 1 }}>
+                Report Debug
+              </Typography>
+              <Chip
+                size='small'
+                label={isLoading ? 'loading' : builderModel ? 'ready' : 'idle'}
+                color={isLoading ? 'info' : builderModel ? 'success' : 'default'}
+                sx={{ height: 18, fontSize: 10 }}
+              />
+            </Box>
+            <Box sx={{ p: 1.5, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+              {debugFields.map(({ label, value }) => (
+                <Box
+                  key={label}
+                  sx={{
+                    display: 'grid',
+                    gridTemplateColumns: '130px 1fr auto',
+                    alignItems: 'center',
+                    gap: 1,
+                    px: 1,
+                    py: 0.5,
+                    borderRadius: 0.5,
+                    '&:hover': { bgcolor: 'action.hover' },
+                  }}
+                >
+                  <Typography variant='caption' sx={{ color: 'text.secondary', fontFamily: 'monospace' }}>
+                    {label}
+                  </Typography>
+                  <Typography
+                    variant='body2'
+                    sx={{
+                      fontFamily: 'monospace',
+                      fontSize: 12,
+                      color: value == null || value === '—' ? 'text.disabled' : 'text.primary',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}
+                    title={String(value ?? '')}
+                  >
+                    {value ?? '—'}
+                  </Typography>
+                  <Tooltip title='Copy' placement='left'>
+                    <IconButton
+                      size='small'
+                      onClick={() => copyToClipboard(value)}
+                      disabled={value == null || value === '—'}
+                      sx={{ p: 0.25 }}
+                    >
+                      <ContentCopyOutlined sx={{ fontSize: 13 }} />
+                    </IconButton>
+                  </Tooltip>
+                </Box>
+              ))}
+            </Box>
+          </Popover>
+        </>
+      )}
+
       {isLoading ? (
         <Box
           sx={{

package/src/views/builder/inspector/definitions/reportViewer/main.js

@@ -9,6 +9,11 @@ export const REPORT_VIEWER_MAIN_FIELDS = [
   { name: 'title',   label: 'Title',   type: 'expression' },
   { name: 'caption', label: 'Caption', type: 'expression' },
 
+  // Debug — when true, a small BugReport icon appears at the report's
+  // top-right corner; clicking it opens a popover listing the resolved
+  // pageId / id / builder model id / sessionId / and other runtime info.
+  // Hidden entirely when false / unset — zero cost in production schemas.
+  { name: 'debug', label: 'Debug', type: 'boolean' },
   { name: 'minimized', label: 'Minimized', type: 'boolean' },
   { name: 'isRerender', label: 'Is Rerender', type: 'boolean' },
   { name: 'height', label: 'Height', type: 'expression' },