robobyte-front-builder 1.0.0

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

@@ -0,0 +1,187 @@
+import React, { useEffect, useState } from 'react'
+import { Box, CircularProgress, Typography, Paper, IconButton, CardContent, Tooltip,Button } from '@mui/material'
+import { useRouter } from 'next/router'
+import SGrid from 'views/genericTable/SGrid'
+import { Endpoints, Services } from 'services/Endpoints'
+import PermissionsSubjects from 'src/configs/Permissions/PermissionsSubjects.json'
+import { SettingsOutlined } from '@mui/icons-material'
+
+// 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 router = useRouter()
+  const {
+    id,
+    filter,
+    minimized,
+    setData,
+    pageId,
+    isSingle,
+    externalTimer,
+    actions,
+    noHeader,
+    columnsConfig,
+    refresh,
+    dataAsObject,
+    sessionId
+  } = 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
+    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)
+          }
+        }
+      }
+      // Fallback: payload via query "payload" (URL-encoded JSON)
+      const qp = router.query?.payload
+      if (!sessionPayload && qp) {
+        try {
+          const payload = JSON.parse(decodeURIComponent(qp))
+          setSessionPayload(payload)
+        } catch {}
+      }
+    } catch (e) {
+      console.error('Failed to load window.name payload', e)
+    }
+    console.log(router.query?.payload)
+  }, [router.query?.payload])
+
+  const handleGetReport = async (reportId, reportPageId) => {
+    setIsLoading(true)
+    try {
+      const { data } = await Services.PostService(
+        Endpoints.ReportBuilder.Post.GetReportDetails,
+        false,
+        {},
+        { id: reportId, pageId: reportPageId }
+      )
+      const localBuilderModel = JSON.parse(data.value)
+      setBuilderModel({ ...localBuilderModel, id: data.id })
+      setBuilderMetadata({
+        id: data.id,
+        name: data.name,
+        description: data.description,
+        isNew: false
+      })
+    } catch (err) {
+      console.error(err)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  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)])
+
+  return (
+    <Box
+      sx={{
+        display: 'block',
+        width: '100%',
+        p: minimized !== true ? 2 : 0
+      }}
+    >
+      {isLoading ? (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          <CircularProgress />
+        </Box>
+      ) : !builderModel ? (
+        <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>
+                <Tooltip title={'Studio'}>
+                  <IconButton
+                    size={'small'}
+                    onClick={() => {
+                      router.push({ pathname: '/reportBuilder', query: { id: id ?? router.query?.id } })
+                    }}
+                  >
+                    <SettingsOutlined color={'primary'} />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+            )}
+            <Box display={'flex'} alignItems='center' gap={1} width={'100%'}>
+              <SGrid
+                key={`rv-${payloadVersion}`}
+                minimized={minimized}
+                builderModel={builderModel}
+                setData={setData}
+                isSingle={isSingle}
+                externalTimer={externalTimer}
+                actions={actions}
+                reportTitle={builderMetadata?.name}
+                filter={sessionPayload?.externalFilter ?? filter}
+                columnsConfig={columnsConfig ?? []}
+                refresh={refresh}
+                dataAsObject={dataAsObject}
+              />
+            </Box>
+          </Box>
+        </>
+      )}
+    </Box>
+  )
+}
+
+ReportViewer.acl = {
+  action: 'view',
+  subject: PermissionsSubjects.ReportBuilder
+}
+
+export default ReportViewer

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

@@ -0,0 +1,198 @@
+import React, {useState, useMemo, useEffect} from 'react'
+import {useRouter} from 'next/router'
+import {
+  Box,
+  Typography,
+  Paper,
+  TextField,
+  InputAdornment,
+  IconButton,
+  Button,
+  Card,
+  CardContent, MenuItem, Select, FormControl, InputLabel
+} 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 Grid from "@mui/material/Grid";
+import ReportBuilderTypeEnum from "services/enums/ReportBuilderTypeEnum";
+
+const ReportsList = () => {
+  const router = useRouter()
+  const [search, setSearch] = useState('')
+  const [reports, setReports] = useState([])
+  const [filter, setFilter] = useState({
+    type : 'Report',
+  })
+
+
+  const handleGetReports = async () => {
+    try {
+      const response = await Services.PostService(
+        Endpoints.ReportBuilder.Post.GetAllReports,
+        false,
+        {},
+        {
+          type: filter.type,
+        }
+      )
+      if (response) setReports(response.data)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  useEffect(() => {
+    handleGetReports()
+  }, [])
+
+  const filtered = useMemo(() => {
+    if (!search) return reports
+    return reports.filter(r =>
+      (r.name || '').toLowerCase().includes(search.toLowerCase())
+    )
+  }, [search, reports])
+
+
+  useEffect(() => {
+    handleGetReports()
+  },[filter])
+  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}>
+            <Typography variant="h4">All Reports</Typography>
+          </Grid>
+          <Grid item size={4}>
+            <Box sx={{display:'flex'}}>
+              <FormControl fullWidth>
+                <InputLabel id='demo-simple-select-label'>النوع</InputLabel>
+                <Select
+                  label='النوع'
+                  size='small'
+                  value={filter.type}
+                  onChange={e => {
+                    console.log(e.target.value)
+                    setFilter(preValue => (
+                      {
+                        ...preValue,
+                        type : e.target.value
+                      }
+                    ))
+                  }}
+                >
+                  {ReportBuilderTypeEnum.list.map((type,i)=> (
+                    <MenuItem key={i} value={type.value}>
+                      {type.Name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+                <Button variant="contained" sx={{ml:3}} onClick={() => router.push('/reportModule/reportBuilder')}>
+                  New
+                </Button>
+            </Box>
+          </Grid>
+        </Grid>
+      </Box>
+
+      {/* Search */}
+      <Paper elevation={2} sx={{p: 2, mb: 3}}>
+        <TextField
+          fullWidth
+          placeholder="Search reports…"
+          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>
+
+      {/* Cards with internal scroll */}
+      <Paper
+        elevation={2}
+        sx={{p: 2, height: '60vh', overflowY: 'auto'}}
+      >
+        <Box display="grid" gap={2}>
+          {filtered.length > 0 ? (
+            filtered.map(report => (
+              <Card key={report.id} variant="outlined">
+                <CardContent>
+                  <Typography variant="h6" color="primary">
+                    {report.name}
+                  </Typography>
+                  {report.description && (
+                    <Typography variant="body2" sx={{mt: 1}}>
+                      {report.description}
+                    </Typography>
+                  )}
+                  <Box display="flex" justifyContent="space-between" mt={2}>
+                    <Typography variant="caption" color="textSecondary">
+                      {report.createdBy}
+                    </Typography>
+                    <Typography variant="caption" color="textSecondary">
+                      {new Date(report.createDate).toLocaleDateString()}
+                    </Typography>
+
+                  </Box>
+                  <Box display="flex" justifyContent="space-between" mt={2}>
+                    <Typography variant="caption" color="textSecondary">
+                      {report.type}
+                    </Typography>
+
+                  </Box>
+                  <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}})
+                      }
+                      sx={{flexGrow: 1}}    // <-- takes all remaining space
+                    >
+                      Open
+                    </Button>
+                    <IconButton
+                      size="small"
+                      variant="outlined"
+                      onClick={() =>
+                        router.push({pathname: '/reportModule/reportBuilder', query: {id: report.id}})
+                      }
+                    >
+                      <EditOutlined color={'secondary'} fontSize="small"/>
+                    </IconButton>
+                  </Box>
+                </CardContent>
+              </Card>
+            ))
+          ) : (
+            <Typography>No reports found.</Typography>
+          )}
+        </Box>
+      </Paper>
+    </Box>
+  )
+}
+
+ReportsList.acl = {
+  action: 'view',
+  subject: PermissionsSubjects.ReportBuilder,
+}
+
+export default ReportsList

package/src/pages/viewBuilder/index.jsx

@@ -0,0 +1,94 @@
+import { Box } from '@mui/material'
+import BlankLayout from 'src/@core/layouts/BlankLayout'
+import Sidebar from 'views/builder/sidebar/Sidebar'
+import Viewer from 'views/builder/viewer/Viewer'
+import { BuilderProvider, useBuilder } from 'src/context/BuilderContext'
+import Inspector from 'views/builder/inspector/Inspector'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { Endpoints, Services } from 'services/Endpoints'
+
+function ViewBuilderContent() {
+  const router = useRouter()
+  const { id } = router.query
+  const { setSchema,setViewMetaData } = useBuilder()
+
+  const handleGetView = async id => {
+    try {
+      const response = await Services.GetService(Endpoints.UiBuilder.Get.GetViewDetails, false, {
+        id: id
+      })
+      if (response) {
+        setSchema(JSON.parse(response.data.value))
+        setViewMetaData({
+          id: response.data.id,
+          title: response.data.title,
+          viewId: response.data.viewId,
+          groupId: response.data.groupId,
+          group: response.data.group,
+          isNew: false,
+        })
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+    }
+  }
+
+  useEffect(() => {
+    if (id != null) handleGetView(id)
+  }, [id])
+
+  return (
+    <Box
+      sx={{
+        height: '100vh',
+        display: 'flex',
+        overflow: 'hidden',
+      }}
+    >
+      {/* LEFT SIDEBAR */}
+      <Box
+        sx={{
+          width: 300,
+          minWidth: 220,
+          borderRight: '1px solid #3a3f45'
+        }}
+      >
+        <Sidebar />
+      </Box>
+
+      {/* CENTER VIEWER */}
+      <Box
+        sx={{
+          flex: 1,
+          overflow: 'auto'
+        }}
+      >
+        <Viewer />
+      </Box>
+
+      {/* RIGHT INSPECTOR */}
+      <Box
+        sx={{
+          width: 300,
+          minWidth: 260,
+          borderLeft: '1px solid #3a3f45',
+        }}
+      >
+        <Inspector />
+      </Box>
+    </Box>
+  )
+}
+
+export default function ViewBuilder() {
+
+  return (
+    <BuilderProvider>
+      <ViewBuilderContent />
+    </BuilderProvider>
+  )
+}
+
+ViewBuilder.getLayout = page => <BlankLayout>{page}</BlankLayout>

package/src/pages/viewBuilder/viewPage/index.jsx

@@ -0,0 +1,46 @@
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { Endpoints, Services } from 'services/Endpoints'
+import ProductionViewer from 'views/builder/viewer/ProductionViewer'
+import {Grid} from '@mui/material'
+
+export default function ViewPage() {
+  const router = useRouter()
+  const { viewId } = router.query
+  const [schema, setSchema] = useState({})
+  const [viewMetaData, setViewMetaData] = useState({})
+  // const { setSchema, setViewMetaData } = useBuilder()
+
+  const handleGetView = async id => {
+    try {
+      const response = await Services.GetService(Endpoints.UiBuilder.Get.GetViewDetails, false, {
+        viewId: id
+      })
+      if (response) {
+        setSchema(JSON.parse(response.data.value))
+        setViewMetaData({
+          id: response.data.id,
+          title: response.data.title,
+          viewId: response.data.viewId,
+          groupId: response.data.groupId,
+          isNew: false
+        })
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+    }
+  }
+
+  useEffect(() => {
+    if (viewId != null) handleGetView(viewId)
+  }, [viewId])
+
+  return (
+    <Grid container>
+      <Grid item size={12}>
+        <ProductionViewer schema={schema} />
+      </Grid>
+    </Grid>
+  )
+}

package/src/pages/viewBuilder/views/index.js

@@ -0,0 +1,146 @@
+import React, { useState, useMemo, useEffect } from 'react'
+import { useRouter } from 'next/router'
+import {
+  Box,
+  Typography,
+  Paper,
+  TextField,
+  InputAdornment,
+  IconButton,
+  Button,
+  Card,
+  CardContent,
+  MenuItem,
+  Select,
+  FormControl,
+  InputLabel
+} 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 Grid from '@mui/material/Grid'
+import ReportBuilderTypeEnum from 'services/enums/ReportBuilderTypeEnum'
+
+const ViewsList = () => {
+  const router = useRouter()
+  const [search, setSearch] = useState('')
+  const [views, setViews] = useState([])
+
+  const handleGetViews = async () => {
+    try {
+      const response = await Services.GetService(Endpoints.UiBuilder.Get.GetAllViews, false, {}, {})
+      if (response) setViews(response.data)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  useEffect(() => {
+    handleGetViews()
+  }, [])
+
+  const filtered = useMemo(() => {
+    if (!search) return views
+    return views.filter(r => (r.name || '').toLowerCase().includes(search.toLowerCase()))
+  }, [search, views])
+
+  useEffect(() => {
+    handleGetViews()
+  }, [])
+  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}>
+            <Typography variant='h4'>All Views</Typography>
+          </Grid>
+          <Grid item size={4}>
+            <Box sx={{ display: 'flex',justifyContent: 'flex-end' }}>
+              <Button variant='contained' sx={{ ml: 3 }} onClick={() => router.push('/viewBuilder/')}>
+                New
+              </Button>
+            </Box>
+          </Grid>
+        </Grid>
+      </Box>
+
+      {/* Search */}
+      <Paper elevation={2} sx={{ p: 2, mb: 3 }}>
+        <TextField
+          fullWidth
+          placeholder='Search views…'
+          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>
+
+      {/* Cards with internal scroll */}
+      <Paper elevation={2} sx={{ p: 2, height: '60vh', overflowY: 'auto' }}>
+        <Box display='grid' gap={2}>
+          {filtered.length > 0 ? (
+            filtered.map(view => (
+              <Card key={view.id} variant='outlined'>
+                <CardContent>
+                  <Typography variant='h6' color='primary'>
+                    {view.title}
+                  </Typography>
+                  <Box display='flex' justifyContent='space-between' mt={2}>
+                    <Typography variant='caption' color='textSecondary'>
+                      {view.createdBy}
+                    </Typography>
+                    <Typography variant='caption' color='textSecondary'>
+                      {new Date(view.createDate).toLocaleDateString()}
+                    </Typography>
+                  </Box>
+                  <Box mt={2} display='flex' alignItems='center' gap={1}>
+                    <Button
+                      size='small'
+                      variant='outlined'
+                      onClick={() => router.push({ pathname: '/viewBuilder/viewPage', query: { viewId: view.viewId } })}
+                      sx={{ flexGrow: 1 }} // <-- takes all remaining space
+                    >
+                      Open
+                    </Button>
+                    <IconButton
+                      size='small'
+                      variant='outlined'
+                      onClick={() => router.push({ pathname: '/viewBuilder', query: { id: view.id } })}
+                    >
+                      <EditOutlined color={'secondary'} fontSize='small' />
+                    </IconButton>
+                  </Box>
+                </CardContent>
+              </Card>
+            ))
+          ) : (
+            <Typography>No views found.</Typography>
+          )}
+        </Box>
+      </Paper>
+    </Box>
+  )
+}
+
+ViewsList.acl = {
+  action: 'view',
+  subject: PermissionsSubjects.ReportBuilder
+}
+
+export default ViewsList