robobyte-front-builder 1.0.17 → 1.0.21

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

@@ -1,20 +1,31 @@
-import React, { useEffect, useState } from 'react'
-import { Box, CircularProgress, Typography, Paper, IconButton, CardContent, Tooltip,Button } from '@mui/material'
-import { useRouter } from 'next/router'
+import React, {useEffect, useState} from 'react'
+import {Box, CircularProgress, Typography, Paper, IconButton, CardContent, Tooltip} from '@mui/material'
+import {useRouter} from 'next/router'
 import SGrid from 'views/genericTable/SGrid'
-import { Endpoints, Services } from 'services/Endpoints'
+import {Endpoints, Services} from 'services/Endpoints'
 import PermissionsSubjects from 'src/configs/Permissions/PermissionsSubjects.json'
-import { SettingsOutlined } from '@mui/icons-material'
+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} from "@mui/icons-material";
+import UpdateReportPermissionDialog from "views/rolePermissions/UpdateReportPermissionDialog";
+import {getReportSession} from 'src/services/helper/reportSessionHelper'
+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:
 // import 'ag-grid-community/styles/ag-grid.css'
 // import 'ag-grid-community/styles/ag-theme-alpine.css'
 
-const ReportViewer = params => {
+const ReportViewer = (params) => {
   const router = useRouter()
   const {
     id,
     filter,
+    extraCols,
+    setOutGridApi,
     minimized,
     setData,
     pageId,
@@ -25,62 +36,118 @@ const ReportViewer = params => {
     columnsConfig,
     refresh,
     dataAsObject,
-    sessionId
+    height,
+    sessionId,
+    globalParams,
+    isRerender = false,
+    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)
   const [builderMetadata, setBuilderMetadata] = useState(null)
   const [sessionPayload, setSessionPayload] = useState(null)
   const [payloadVersion, setPayloadVersion] = useState(0)
-  console.log(filter)
+
   useEffect(() => {
-    // Prefer window.name payload (set by opener) to avoid relying on session
+    // Prefer localStorage payload via sessionId (set by SGrid)
     try {
-      if (typeof window !== 'undefined' && window.name) {
-        const nm = window.name
-        if (nm.startsWith('RB:')) {
-          const b64 = nm.substring(3)
-          try {
-            const json = decodeURIComponent(escape(typeof atob !== 'undefined' ? atob(b64) : b64))
-            const payload = JSON.parse(json)
-            setSessionPayload(payload)
-            // Clear the name to avoid reusing stale payload on internal navigations
-            window.name = ''
-          } catch (e) {
-            console.warn('Failed to parse window.name payload', e)
+      if (typeof window !== 'undefined') {
+        const sId = sessionId || router.query?.sessionId;
+        if (sId) {
+          const payload = getReportSession(sId);
+          if (payload) {
+            setSessionPayload(payload);
+            console.log('Processed localStorage payload for sessionId:', sId);
+
+            return;
+          }
+        }
+      }
+
+      // Fallback: sessionStorage payload (set by SGrid)
+      try {
+        if (typeof window !== 'undefined') {
+          const stored = sessionStorage.getItem('RB_PAYLOAD');
+          if (stored) {
+            try {
+              const payload = JSON.parse(stored);
+              setSessionPayload(payload);
+              sessionStorage.removeItem('RB_PAYLOAD');
+              console.log('Processed and cleared sessionStorage payload');
+
+              return; // Exit early if we found a payload in session
+            } catch (e) {
+              console.warn('Failed to parse sessionStorage payload', e);
+            }
           }
         }
+      } catch (e) {
+        console.error('Failed to load sessionStorage payload', e)
       }
+
       // Fallback: payload via query "payload" (URL-encoded JSON)
-      const qp = router.query?.payload
-      if (!sessionPayload && qp) {
+      const qp = router.query?.payload;
+      if (qp) {
         try {
-          const payload = JSON.parse(decodeURIComponent(qp))
-          setSessionPayload(payload)
-        } catch {}
+          const payload = JSON.parse(decodeURIComponent(qp));
+          setSessionPayload(payload);
+
+          return;
+        } catch {
+        }
+      }
+
+      // If we reach here, no payload was found in this navigation
+      // We should probably clear sessionPayload IF the current URL doesn't have it
+      // but only if it was previously set.
+      if (sessionPayload) {
+        setSessionPayload(null);
       }
     } catch (e) {
-      console.error('Failed to load window.name payload', e)
+      console.error('Failed to load report payload', e)
     }
-    console.log(router.query?.payload)
-  }, [router.query?.payload])
+  }, [router.asPath, id, pageId, router.query?.pageId, sessionId, router.query?.sessionId])
 
   const handleGetReport = async (reportId, reportPageId) => {
     setIsLoading(true)
     try {
-      const { data } = await Services.PostService(
+      const {data} = await Services.PostService(
         Endpoints.ReportBuilder.Post.GetReportDetails,
         false,
         {},
-        { id: reportId, pageId: reportPageId }
+        {id: reportId, pageId: reportPageId}
       )
       const localBuilderModel = JSON.parse(data.value)
-      setBuilderModel({ ...localBuilderModel, id: data.id })
+      if (globalParams != null && localBuilderModel?.selectionParams != null) {
+        localBuilderModel.selectionParams = localBuilderModel.selectionParams.map((param, idx) => {
+          if (globalParams.hasOwnProperty(idx)) {
+            return {...param, value: globalParams[idx]}
+          }
+          return param
+        })
+      }
+      localBuilderModel.filter = localBuilderModel.filter ?? {}
+      localBuilderModel.filter.LocalTfilter = localBuilderModel.filter?.LocalTfilter?.map(x => ({
+        ...x,
+        isMainFilter: true
+      })) ?? []
+      console.log(localBuilderModel)
+      setBuilderModel({...localBuilderModel, id: data.id})
       setBuilderMetadata({
         id: data.id,
         name: data.name,
         description: data.description,
-        isNew: false
+        isNew: false,
       })
     } catch (err) {
       console.error(err)
@@ -90,24 +157,23 @@ const ReportViewer = params => {
   }
 
   useEffect(() => {
-    console.log(sessionPayload)
-    // bump version when payload externalFilter or pageId changes to force SGrid remount
-    try {
-      const sig = JSON.stringify({ ef: sessionPayload?.externalFilter ?? null, p: sessionPayload?.pageId ?? null })
-      setPayloadVersion(v => v + 1)
-    } catch {}
     // Load report when id or pageId changes; prefer session payload pageId if available
-    let reportId = id ?? router.query?.id
-    const pId = sessionPayload?.pageId != null ? sessionPayload.pageId : pageId
-    if (reportId || pId) handleGetReport(reportId, pId)
-  }, [id, router.query?.id, pageId, sessionPayload?.pageId, JSON.stringify(sessionPayload?.externalFilter)])
+    const targetPageId = sessionPayload?.pageId || pageId || router.query?.pageId;
+    const targetId = sessionPayload?.id || id || router.query?.id;
+
+    if (targetPageId || targetId) {
+      handleGetReport(targetId, targetPageId)
+    }
+
+    // bump version when payload changes to force SGrid remount
+    setPayloadVersion(v => v + 1);
+  }, [id, router.query?.id, pageId, router.query?.pageId, sessionPayload])
 
   return (
     <Box
       sx={{
         display: 'block',
         width: '100%',
-        p: minimized !== true ? 2 : 0
       }}
     >
       {isLoading ? (
@@ -115,54 +181,43 @@ const ReportViewer = params => {
           sx={{
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'center'
+            justifyContent: 'center',
           }}
         >
-          <CircularProgress />
+          <CircularProgress/>
         </Box>
       ) : !builderModel ? (
-        <Box textAlign='center' mt={8}>
-          <Typography variant='subtitle1' color='text.secondary'>
+        <Box textAlign="center" mt={8}>
+          <Typography variant="subtitle1" color="text.secondary">
             No report selected
           </Typography>
         </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
-            }}
-          >
-            {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>
+          <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: '/reportBuilder', query: { id: id ?? router.query?.id } })
+                      router.push({pathname: '/builders/report', query: {id: id ?? router.query?.id}})
                     }}
                   >
-                    <SettingsOutlined color={'primary'} />
+                    <SettingsOutlined color={'primary'}/>
                   </IconButton>
                 </Tooltip>
-              </Box>
-            )}
-            <Box display={'flex'} alignItems='center' gap={1} width={'100%'}>
+              </Box>}
+            <Box sx={{width: '100%'}}>
               <SGrid
                 key={`rv-${payloadVersion}`}
                 minimized={minimized}
+                extraCols={extraCols}
                 builderModel={builderModel}
                 setData={setData}
                 isSingle={isSingle}
+                setOutGridApi={setOutGridApi}
                 externalTimer={externalTimer}
                 actions={actions}
                 reportTitle={builderMetadata?.name}
@@ -170,6 +225,17 @@ const ReportViewer = params => {
                 columnsConfig={columnsConfig ?? []}
                 refresh={refresh}
                 dataAsObject={dataAsObject}
+                height={height ?? '85vh'}
+                isRerender={isRerender}
+                // uniqueIdPath={'Id'}
+                // noPurge={true}
+                updateRef={updateRef}
+                nodeId={nodeId}
+                reportRefs={reportRefs}
+                data={data}
+                dataRef={dataRef}
+                openDialog={openDialog}
+                closeDialog={closeDialog}
               />
             </Box>
           </Box>
@@ -181,7 +247,7 @@ const ReportViewer = params => {
 
 ReportViewer.acl = {
   action: 'view',
-  subject: PermissionsSubjects.ReportBuilder
+  subject: PermissionsSubjects.Free,
 }
-
+ReportViewer.getLayout = page => <BlankLayout>{page}</BlankLayout>
 export default ReportViewer

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

@@ -9,24 +9,32 @@ import {
   IconButton,
   Button,
   Card,
-  CardContent, MenuItem, Select, FormControl, InputLabel
+  CardContent, MenuItem, Select, FormControl, InputLabel, Dialog
 } from '@mui/material'
 import SearchIcon from '@mui/icons-material/Search'
 import ClearIcon from '@mui/icons-material/Clear'
 import {Endpoints, Services} from 'services/Endpoints'
 import PermissionsSubjects from 'src/configs/Permissions/PermissionsSubjects.json'
-import {EditOutlined} from "@mui/icons-material";
+import {EditOutlined, SettingsOutlined} from "@mui/icons-material";
 import Grid from "@mui/material/Grid";
 import ReportBuilderTypeEnum from "services/enums/ReportBuilderTypeEnum";
+import handleChange from "services/helper/handleChange";
+import UpdateReportPermissionDialog from "views/rolePermissions/UpdateReportPermissionDialog";
+
 
 const ReportsList = () => {
   const router = useRouter()
   const [search, setSearch] = useState('')
   const [reports, setReports] = useState([])
+  const [selectedChildRow, setSelectedChildRow] = useState()
   const [filter, setFilter] = useState({
     type : 'Report',
   })
-
+  const [openDialogs, setOpenDialogs] = useState({
+    confirm: false,
+    PermissionReport: false,
+    CustomFilter: false,
+  })
 
   const handleGetReports = async () => {
     try {
@@ -48,10 +56,15 @@ const ReportsList = () => {
     handleGetReports()
   }, [])
 
+  const handleToggleDialogs = dialog => {
+    handleChange(setOpenDialogs, dialog, !openDialogs[dialog])
+  }
+
   const filtered = useMemo(() => {
     if (!search) return reports
     return reports.filter(r =>
-      (r.name || '').toLowerCase().includes(search.toLowerCase())
+      (r.name || '').toLowerCase().includes(search.toLowerCase()) ||
+      (r.pageId || '').toLowerCase().includes(search.toLowerCase())
     )
   }, [search, reports])
 
@@ -62,12 +75,12 @@ const ReportsList = () => {
   return (
     <Box p={4} maxWidth={800} mx="auto">
       {/* Header */}
-      <Box display="flex" sx={{width:'100%'}} justifyContent="space-between" alignItems="center" mb={3}>
-        <Grid container sx={{width:'100%'}} >
-          <Grid item size={8}>
+      <Box display="flex" justifyContent="space-between" alignItems="center" mb={3}>
+        <Grid container>
+          <Grid size={{ xs: 8 }}>
             <Typography variant="h4">All Reports</Typography>
           </Grid>
-          <Grid item size={4}>
+          <Grid size={{ xs: 4 }}>
             <Box sx={{display:'flex'}}>
               <FormControl fullWidth>
                 <InputLabel id='demo-simple-select-label'>النوع</InputLabel>
@@ -92,9 +105,9 @@ const ReportsList = () => {
                   ))}
                 </Select>
               </FormControl>
-                <Button variant="contained" sx={{ml:3}} onClick={() => router.push('/reportModule/reportBuilder')}>
-                  New
-                </Button>
+              <Button variant="contained" sx={{ml:3}} onClick={() => router.push('/builders/report')}>
+                New
+              </Button>
             </Box>
           </Grid>
         </Grid>
@@ -133,6 +146,18 @@ const ReportsList = () => {
           {filtered.length > 0 ? (
             filtered.map(report => (
               <Card key={report.id} variant="outlined">
+                <Box sx={{display: 'flex', justifyContent: 'end'}}>
+                  <IconButton
+                    size={'small'}
+                    onClick={() => {
+                      setSelectedChildRow(report)
+                      handleToggleDialogs('PermissionReport')
+                    }}
+                  >
+                    <SettingsOutlined color={'primary'}/>
+                  </IconButton>
+                </Box>
+
                 <CardContent>
                   <Typography variant="h6" color="primary">
                     {report.name}
@@ -157,12 +182,15 @@ const ReportsList = () => {
                     </Typography>
 
                   </Box>
+                  <Typography variant="caption">
+                    {report.pageId}
+                  </Typography>
                   <Box mt={2} display="flex" alignItems="center" gap={1}>
                     <Button
                       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
                     >
@@ -172,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"/>
@@ -186,6 +214,16 @@ const ReportsList = () => {
           )}
         </Box>
       </Paper>
+      <Dialog
+        fullWidth
+        open={openDialogs.PermissionReport}
+        maxWidth='md'
+        scroll='body'
+        onClose={() => handleToggleDialogs('PermissionReport')}
+      >
+        <UpdateReportPermissionDialog handleToggleDialogs={handleToggleDialogs} report={selectedChildRow}/>
+      </Dialog>
+
     </Box>
   )
 }

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

@@ -0,0 +1,126 @@
+// ** React Imports
+// ** Next Import
+
+// ** MUI Imports
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+import Typography from '@mui/material/Typography'
+import CardHeader from '@mui/material/CardHeader'
+// ** Icons Imports
+import {CloudUploadOutline, Delete, DeleteCircle, DotsVerticalCircleOutline, Plus} from 'mdi-material-ui'
+// ** Store Imports
+// ** Custom Components Imports
+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 "../reportViewer";
+import PermissionsSubjects from "src/configs/Permissions/PermissionsSubjects.json";
+import {AuthContext} from "context/AuthContext";
+import BlankLayout from '../../../../lib/layouts/BlankLayout';
+// ** Utils Import
+
+// ** Actions Imports
+
+// ** Custom Components Imports
+
+const pageMetaData = {
+  id: '157d6ea7-3572-4fef-9f16-7e5b7e552023'
+}
+const ReportsCard = () => {
+  // ** State
+
+  const authContext = useContext(AuthContext)
+
+  const [anchorEl, setAnchorEl] = useState(null)
+  const [selectedChildRow, setSelectedChildRow] = useState()
+  const filter = useMemo(() => {
+      return {
+        fixedTFilter: [{
+          isOrList: true,
+          method: 'Equals',
+          path: 'PermissionRoleId',
+          value: authContext?.user?.roleIds ?? []
+        }]
+      }
+    }
+    , [authContext])
+
+  const [openDialogs, setOpenDialogs] = useState({
+    image: false,
+    banner: false,
+    updatebanner: false,
+    confirm: false,
+    filter: false,
+    notification: false,
+    notify: false
+  })
+
+  // ** States
+  const actions = (params) => {
+    return <Box sx={{display: 'flex', alignItems: 'center'}}>
+      <IconButton
+        sx={{color: 'primary.light'}}
+        onClick={e => {
+          setAnchorEl(e.currentTarget)
+          setSelectedChildRow(params.data)
+        }}
+      >
+        <DotsVerticalCircleOutline/>
+      </IconButton>
+    </Box>
+  }
+
+
+  function handleFilterChange(field, value) {
+    handleChange(setFilter, field, value)
+  }
+
+  useEffect(() => {
+
+  }, [])
+
+  const handleToggleDialogs = dialog => {
+    handleChange(setOpenDialogs, dialog, !openDialogs[dialog])
+  }
+
+  return (
+    <Card>
+      <Grid container>
+        <Grid size={{ xs: 12 }}>
+          <CardHeader
+            title={
+              <Box>
+                <Typography variant='h6'>التقارير</Typography>
+
+              </Box>
+            }
+            sx={{pb: 4, '& .MuiCardHeader-title': {letterSpacing: '.15px'}}}
+            action={
+              <Grid container spacing={1} size={{ xs: 12 }}>
+
+              </Grid>
+            }
+          />
+
+          <Grid container spacing={3}>
+            <ReportViewer
+              noHeader={true}
+              pageId={pageMetaData.id}
+              filter={filter}
+              actions={actions}
+              height={'80vh'}
+            />
+
+          </Grid>
+        </Grid>
+      </Grid>
+    </Card>
+
+  )
+}
+ReportsCard.acl = {
+  action: 'view',
+  subject: PermissionsSubjects.Free
+};
+ReportsCard.getLayout = page => <BlankLayout>{page}</BlankLayout>
+export default ReportsCard