robobyte-front-builder 1.0.0

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

@@ -0,0 +1,1361 @@
+import BlankLayout from 'src/@core/layouts/BlankLayout'
+import {
+  Autocomplete,
+  Box,
+  List,
+  ListItem,
+  ListItemText,
+  Paper,
+  TextField,
+  Typography,
+  CircularProgress,
+  Grid,
+  CssBaseline,
+  IconButton,
+  Breadcrumbs,
+  Link,
+  Chip,
+  Button,
+  Dialog,
+  Tooltip,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  FormControlLabel
+} from '@mui/material'
+import { useEffect, useRef, useState } from 'react'
+import { Endpoints, Services } from 'services/Endpoints'
+import {
+  AddBox,
+  ArrowForwardSharp,
+  AssessmentOutlined,
+  Expand,
+  FilterAlt,
+  PreviewOutlined,
+  SaveAsOutlined,
+  SaveOutlined,
+  Search,
+  Visibility,
+  VisibilityOff,
+  Image as ImageIcon,
+  CloudDownloadOutlined,
+  CloudUploadOutlined
+} from '@mui/icons-material'
+import dayjs from 'dayjs'
+import { BackspaceOutline, CheckCircleOutline, DeleteOutline, 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'
+import ExpressionEditor from 'views/genericTable/RegexTextEditor'
+import BuilderExpressionParams from 'views/genericTable/BuilderExpressionParams'
+import handleChange from 'services/helper/handleChange'
+import DynamicValueList from 'views/genericTable/BuilderExpressionParams'
+import SqlEditor from 'views/genericTable/QueryEditor'
+import Switch from '@mui/material/Switch'
+import { EditorState } from 'draft-js'
+import PermissionsSubjects from 'src/configs/Permissions/PermissionsSubjects.json'
+import ReportBuilderSaveForm from 'views/genericTable/ReportBuilderSaveDialog'
+import { useRouter } from 'next/router'
+import CustomFilterDialog from 'views/customFilter/CustomFilterDialog'
+
+import RoutingSettingDialog from 'views/genericTable/RoutingSettingDialog'
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
+import FixedFilterDialog from 'views/genericTable/FixedFilterDialog'
+import fetchReportData from 'services/reportData/fetchReportData'
+
+const ReportBuilder = () => {
+  const [models, setModels] = useState([])
+  const [modelFields, setModelFields] = useState([])
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedCollection, setSelectedCollection] = useState()
+  const [editingHeaderPath, setEditingHeaderPath] = useState(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const router = useRouter()
+  const { id } = router.query
+  const [builderMetadata, setBuilderMetadata] = useState({
+    id: 0,
+    name: '',
+    description: '',
+    isNew: true
+  })
+  const [builderModel, setBuilderModel] = useState({
+    reportSource: null,
+    selectedFields: [],
+    selectionParams: [],
+    isRaw: false,
+    filter: {
+      Tfilter: [],
+      LocalTfilter: []
+    },
+    searchFilter: [],
+    rawSql: '',
+    routingSettings: []
+  })
+  const [breadcrumbs, setBreadcrumbs] = useState([])
+  const [isPreview, setIsPreview] = useState(false)
+  const [openDialogs, setOpenDialogs] = useState({
+    expression: false,
+    params: false,
+    save: false,
+    filter: false,
+    searchFilter: false,
+    routing: false,
+    fixedFilter: false
+  })
+  const [selectedRow, setSelectedRow] = useState(null)
+
+  // File input ref for uploading builder model JSON
+  const fileInputRef = useRef(null)
+
+  // Download current builderModel as JSON file
+  const handleDownloadModel = () => {
+    try {
+      const replacer = (key, value) => {
+        // Convert Dayjs instances to Date so JSON.stringify uses ISO via toJSON
+        if (value && typeof value === 'object') {
+          if (dayjs.isDayjs(value)) return value.toDate()
+          if (value instanceof Date) return value // keep as Date
+        }
+        return value
+      }
+      const json = JSON.stringify(builderModel, replacer, 2)
+      const blob = new Blob([json], { type: 'application/json' })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      const ts = new Date().toISOString().replace(/[:.]/g, '-')
+      a.href = url
+      a.download = `builderModel-${ts}.json`
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(url)
+    } catch (err) {
+      console.error('Failed to download builder model:', err)
+    }
+  }
+
+  // Trigger hidden file input
+  const handleUploadClick = () => {
+    try {
+      fileInputRef.current?.click()
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  // Handle JSON file selection and load into builderModel
+  const handleFileChange = e => {
+    const file = e?.target?.files?.[0]
+    if (!file) return
+    const reader = new FileReader()
+    reader.onload = () => {
+      try {
+        const text = reader.result || ''
+        const obj = JSON.parse(text)
+        // Basic validation: ensure it's an object
+        if (obj && typeof obj === 'object') {
+          setBuilderModel(obj)
+        } else {
+          console.error('Uploaded file is not a valid builder model object')
+        }
+      } catch (err) {
+        console.error('Failed to parse uploaded JSON:', err)
+      } finally {
+        if (e?.target) e.target.value = ''
+      }
+    }
+    reader.readAsText(file)
+  }
+
+  const { control, handleSubmit, reset } = useForm({
+    defaultValues: {
+      name: '',
+      type: '',
+      expression: ''
+    }
+  })
+
+  const handleToggleDialogs = dialog => {
+    handleChange(setOpenDialogs, dialog, !openDialogs[dialog])
+  }
+
+  const isInSearchFilter = fullPath => (builderModel.searchFilter ?? []).some(f => f.fullPath === fullPath)
+
+  const toggleSearchFilterByFullPath = payload => {
+    setBuilderModel(prev => {
+      const exists = (prev.searchFilter ?? []).some(f => f.fullPath === payload.fullPath)
+      const updated = exists
+        ? prev.searchFilter.filter(f => f.fullPath !== payload.fullPath)
+        : [...(prev.searchFilter ?? []), payload]
+
+      return {
+        ...prev,
+        searchFilter: updated
+      }
+    })
+  }
+
+  const handleGetModels = async () => {
+    try {
+      setIsLoading(true)
+      const response = await Services.PostService(Endpoints.ReportBuilder.Post.GetModels, false, {})
+      if (response) {
+        setModels(response)
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleGetFields = async (modelFullName, friendlyName = null, propertyType, isPrevious) => {
+    try {
+      setIsLoading(true)
+      const response = await Services.PostService(
+        Endpoints.ReportBuilder.Post.GetModelFields,
+        false,
+        {},
+        { modelFullName }
+      )
+      if (response) {
+        setModelFields(response.data)
+        const modelObject = models.find(m => m.fullName === modelFullName)
+
+        console.log(modelObject)
+        setBreadcrumbs(prev => {
+          const exists = prev.find(b => b.fullName === modelFullName)
+          if (exists && isPrevious) {
+            const index = prev.findIndex(b => b.fullName === modelFullName)
+            return prev.slice(0, index + 1)
+          }
+          console.log(prev)
+          return [
+            ...prev,
+            {
+              fullName: modelFullName,
+              friendlyName: friendlyName ?? modelObject?.friendlyName ?? modelFullName,
+              propertyType: propertyType ?? modelObject?.propertyType ?? null
+            }
+          ]
+        })
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  // 1) Trim a full field‐path for *leaf* fields:
+  //    • always drop the root segment
+  //    • if there are any collections, drop everything up through the *last* collection
+  const getLeafTrimmedPath = (fullPath, collectionBreadcrumbs) => {
+    const parts = fullPath.split('.')
+    const afterRoot = parts.slice(1)
+    if (!collectionBreadcrumbs.length) {
+      return afterRoot.join('.')
+    }
+    const lastColl = collectionBreadcrumbs[collectionBreadcrumbs.length - 1].friendlyName
+    const idx = afterRoot.lastIndexOf(lastColl)
+    return idx >= 0 ? afterRoot.slice(idx + 1).join('.') : afterRoot.join('.')
+  }
+
+  // 2) Trim a *collection* node’s path:
+  //    • drop the root segment
+  //    • then drop *exactly* the first collection (if present), keep everything else
+  const getCollectionTrimmedPath = (fullCollectionPath, collectionBreadcrumbs) => {
+    const parts = fullCollectionPath.split('.')
+    const afterRoot = parts.slice(1)
+    if (!collectionBreadcrumbs.length) {
+      return afterRoot.join('.')
+    }
+    const firstColl = collectionBreadcrumbs[0].friendlyName
+    // if the very first segment after root is our first collection, drop it
+    if (afterRoot[0] === firstColl) {
+      const rest = afterRoot.slice(1)
+      // if that was the only segment, fall back to the collection name
+      return rest.length ? rest.join('.') : firstColl
+    }
+    return afterRoot.join('.')
+  }
+
+  const handleAddStaticField = field => {
+    console.log(builderModel.selectedFields)
+    // build fullPath & identify collection crumbs
+    const fullPathParts = [...breadcrumbs.map(b => b.friendlyName), field.friendlyName]
+    const fullPath = fullPathParts.join('.')
+    const collectionBreadcrumbs = breadcrumbs
+      .map((b, i) => ({
+        ...b,
+        fullPath: breadcrumbs
+          .slice(0, i + 1)
+          .map(x => x.friendlyName)
+          .join('.')
+      }))
+      .filter(b => b.propertyType === 'Collection')
+
+    // compute leaf path & header
+    const trimmedPath = getLeafTrimmedPath(fullPath, collectionBreadcrumbs)
+    const headerName = trimmedPath.replace(/\./g, '_')
+    console.log(field)
+    const newLeafField = {
+      fullPath: fullPath,
+      path: trimmedPath,
+      type: 'static',
+      field,
+      headerName,
+      title: headerName,
+      propertyType: field.propertyType,
+      enumName: field.enumName,
+      hidden: false,
+      image: false
+    }
+
+    setBuilderModel(prev => {
+      const clone = [...prev.selectedFields]
+
+      const insertIntoCollectionsOnly = (nodes, crumbs, depth = 0) => {
+        const crumb = crumbs[depth]
+        const collFull = crumb.fullPath
+        const collTrimmed = getCollectionTrimmedPath(collFull, crumbs)
+        const collHeader = collTrimmed.replace(/\./g, '_')
+
+        let node = nodes.find(n => n.propertyType === 'Collection' && n.path === collTrimmed)
+        if (!node) {
+          node = {
+            fullPath: fullPath,
+            path: collTrimmed,
+            headerName: collHeader,
+            propertyType: 'Collection',
+            children: []
+          }
+          nodes.push(node)
+        }
+
+        const isLast = depth === crumbs.length - 1
+        if (isLast) {
+          if (!node.children.some(f => f.path === trimmedPath)) {
+            node.children.push(newLeafField)
+          }
+        } else {
+          insertIntoCollectionsOnly(node.children, crumbs, depth + 1)
+        }
+      }
+
+      if (!collectionBreadcrumbs.length) {
+        // no collections ⇒ flat insert
+        if (!clone.some(f => f.path === trimmedPath)) {
+          return { ...prev, selectedFields: [...clone, newLeafField] }
+        }
+        return prev
+      }
+
+      // otherwise build the nested collection node(s)
+      insertIntoCollectionsOnly(clone, collectionBreadcrumbs)
+      return { ...prev, selectedFields: clone }
+    })
+  }
+
+  // (1) Helper: insert a node into the right collection, by `collectionPath`
+  function insertIntoCollection(nodes, collectionPath, newField) {
+    return nodes.map(node => {
+      if (node.propertyType === 'Collection') {
+        // match this collection?
+        if (node.path === collectionPath) {
+          return {
+            ...node,
+            children: [...(node.children || []), newField]
+          }
+        }
+        // otherwise recurse
+        return {
+          ...node,
+          children: insertIntoCollection(node.children || [], collectionPath, newField)
+        }
+      }
+      return node
+    })
+  }
+
+  // (2) Add computed field — either top‐level or inside the selectedCollection
+  const handleAddComputedField = (expression, headerName, propertyType, title) => {
+    const newField = {
+      path: headerName,
+      type: 'computed',
+      propertyType,
+      headerName,
+      expression,
+      title,
+      hidden: false,
+      image: false
+    }
+
+    setBuilderModel(prev => {
+      const { selectedFields } = prev
+      // if no collection selected, append at root
+      if (!selectedCollection) {
+        return {
+          ...prev,
+          selectedFields: [...selectedFields, newField]
+        }
+      }
+      // otherwise insert under the chosen collection
+      const updated = insertIntoCollection(selectedFields, selectedCollection.path, newField)
+      return { ...prev, selectedFields: updated }
+    })
+    setSelectedCollection(null)
+  }
+
+  // (3) Update computed field — likewise drill into the right spot
+  const handleUpdateComputedField = (oldHeaderName, expression, headerName, propertyType, title) => {
+    setBuilderModel(prev => {
+      const updateNode = node => {
+        if (node.type === 'computed' && node.headerName === oldHeaderName) {
+          return { ...node, headerName, expression, propertyType, title, path: headerName }
+        }
+        if (node.propertyType === 'Collection') {
+          return {
+            ...node,
+            children: (node.children || []).map(updateNode)
+          }
+        }
+        return node
+      }
+
+      return {
+        ...prev,
+        selectedFields: prev.selectedFields.map(updateNode)
+      }
+    })
+    setSelectedCollection(null)
+  }
+
+  function removeFieldByPath(fields, pathToRemove) {
+    return fields.reduce((acc, f) => {
+      if (f.propertyType === 'Collection') {
+        // first, recurse into its children
+        const filteredChildren = removeFieldByPath(f.children || [], pathToRemove)
+        // only keep this collection if it still has children
+        if (filteredChildren.length > 0) {
+          acc.push({ ...f, children: filteredChildren })
+        }
+      } else {
+        // leaf field: only keep it if paths don't match
+        if (f.path !== pathToRemove) {
+          acc.push(f)
+        }
+      }
+      return acc
+    }, [])
+  }
+
+  function handleFilterChange(field, value) {
+    console.log(field, value)
+    setBuilderModel(prev => ({
+      ...prev,
+      filter: {
+        ...prev.filter,
+        [field]: value // <-- computed key on the nested object
+      }
+    }))
+  }
+
+  const handleDragEnd = result => {
+    const { source, destination } = result || {}
+    if (!destination) return
+    if (source.droppableId !== destination.droppableId) return
+    const droppableId = source.droppableId
+
+    setBuilderModel(prev => {
+      const reorderLeaves = (arr, from, to) => {
+        const leaves = arr.filter(n => !n.children)
+        const collections = arr.filter(n => n.children)
+        if (from < 0 || to < 0 || from >= leaves.length || to >= leaves.length) return arr
+        const leafMap = Object.fromEntries(leaves.map(n => [n.path, n]))
+        const order = leaves.map(n => n.path)
+        const [moved] = order.splice(from, 1)
+        order.splice(to, 0, moved)
+        const orderQueue = order.slice()
+        // rebuild original array: keep collections in place, leaves in new order
+        return arr.map(node => {
+          if (node.children) return node
+          const nextPath = orderQueue.shift()
+          return leafMap[nextPath] || node
+        })
+      }
+
+      const updateCollections = nodes =>
+        nodes.map(n => {
+          if (n.propertyType === 'Collection') {
+            if (n.path === droppableId) {
+              const newChildren = reorderLeaves(n.children || [], source.index, destination.index)
+              return { ...n, children: newChildren }
+            }
+            return { ...n, children: updateCollections(n.children || []) }
+          }
+          return n
+        })
+
+      if (droppableId === 'root') {
+        return { ...prev, selectedFields: reorderLeaves(prev.selectedFields, source.index, destination.index) }
+      } else {
+        return { ...prev, selectedFields: updateCollections(prev.selectedFields) }
+      }
+    })
+  }
+
+  const renderSelectedFields = (nodes, level = 0, droppableId = 'root') => {
+    // Count leaf-only index for Draggable indices
+    let leafIndexCounter = 0
+    return (
+      <Droppable droppableId={droppableId}>
+        {provided => (
+          <List dense disablePadding sx={{ pl: level * 2 }} ref={provided.innerRef} {...provided.droppableProps}>
+            {nodes.map(item =>
+              item.children ? (
+                <Accordion key={item.headerName} disableGutters sx={{ mb: 1 }}>
+                  <AccordionSummary expandIcon={<Expand />}>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        width: '100%'
+                      }}
+                    >
+                      <Typography variant='subtitle2' fontWeight='bold'>
+                        {item.headerName ?? item.path}
+                      </Typography>
+                      <IconButton
+                        size='small'
+                        onClick={e => {
+                          e.stopPropagation()
+                          setSelectedCollection(item)
+                          setSelectedRow(null)
+                          setOpenDialogs(prev => ({ ...prev, expression: true }))
+                        }}
+                        title='Add computed field to this collection'
+                      >
+                        <AddBox fontSize='small' />
+                      </IconButton>
+                    </Box>
+                  </AccordionSummary>
+                  <AccordionDetails>{renderSelectedFields(item.children, level + 1, item.path)}</AccordionDetails>
+                </Accordion>
+              ) : (
+                <Draggable
+                  key={`${droppableId}::${item.path}`}
+                  draggableId={`${droppableId}::${item.path}`}
+                  index={leafIndexCounter++}
+                >
+                  {providedDrag => (
+                    <ListItem
+                      ref={providedDrag.innerRef}
+                      {...providedDrag.draggableProps}
+                      {...providedDrag.dragHandleProps}
+                      divider
+                    >
+                      <ListItemText
+                        primary={
+                          editingHeaderPath === item.path ? (
+                            <TextField
+                              size='small'
+                              autoFocus
+                              variant='standard'
+                              value={item.title}
+                              onChange={e => {
+                                const newHeaderName = e.target.value
+
+                                setBuilderModel(prev => {
+                                  const updateNode = node => {
+                                    if (node.path === item.path && !node.children) {
+                                      return { ...node, title: newHeaderName }
+                                    }
+                                    if (node.propertyType === 'Collection') {
+                                      return { ...node, children: (node.children || []).map(updateNode) }
+                                    }
+                                    return node
+                                  }
+
+                                  return {
+                                    ...prev,
+                                    selectedFields: prev.selectedFields.map(updateNode)
+                                  }
+                                })
+                              }}
+                              onBlur={() => setEditingHeaderPath(null)}
+                              onKeyDown={e => {
+                                if (e.key === 'Enter' || e.key === 'Escape') {
+                                  setEditingHeaderPath(null)
+                                }
+                              }}
+                              inputProps={{
+                                style: {
+                                  fontWeight: 'bold',
+                                  fontSize: '0.875rem'
+                                }
+                              }}
+                            />
+                          ) : (
+                            <Typography
+                              variant='subtitle2'
+                              fontWeight='bold'
+                              onDoubleClick={() => setEditingHeaderPath(item.path)}
+                              sx={{ cursor: 'pointer' }}
+                            >
+                              {item.title ?? item.headerName}
+                            </Typography>
+                          )
+                        }
+                        secondary={item.path}
+                      />
+                      <Box sx={{ display: 'flex', gap: 1 }}>
+                        {item.type === 'computed' && (
+                          <IconButton
+                            size='small'
+                            onClick={() => {
+                              setSelectedRow(item)
+                              setOpenDialogs(prev => ({ ...prev, expression: true }))
+                            }}
+                            title='Edit computed field'
+                          >
+                            <PencilOutline fontSize='small' />
+                          </IconButton>
+                        )}
+
+                        {(item?.field?.propertyType === 'String' ||
+                          item?.field?.propertyType === 'Int' ||
+                          item?.field?.propertyType === 'Guid') &&
+                          item?.type === 'static' && (
+                            <IconButton
+                              size='small'
+                              onClick={() => {
+                                console.log(item, level)
+                                toggleSearchFilterByFullPath({
+                                  fullPath: item.fullPath,
+                                  path: item.path || item.headerName || item.fullPath,
+                                  propertyType: item.propertyType,
+                                  isWithinCollection: level !== 0
+                                })
+                              }}
+                              title={
+                                isInSearchFilter(item.fullPath) ? 'Remove from search filter' : 'Add to search filter'
+                              }
+                              sx={{
+                                color: isInSearchFilter(item.fullPath) ? 'primary.main' : 'text.secondary',
+                                '&:hover': {
+                                  backgroundColor: 'transparent',
+                                  color: isInSearchFilter(item.fullPath) ? 'primary.main' : 'info.main'
+                                }
+                              }}
+                            >
+                              <Search fontSize='small' />
+                            </IconButton>
+                          )}
+                        <IconButton
+                          size='small'
+                          onClick={() => {
+                            setBuilderModel(prev => {
+                              const toggleHidden = node => {
+                                if (node.propertyType === 'Collection') {
+                                  return {
+                                    ...node,
+                                    children: (node.children || []).map(toggleHidden)
+                                  }
+                                }
+                                if (node.path === item.path) {
+                                  return { ...node, hidden: !node.hidden }
+                                }
+                                return node
+                              }
+                              return {
+                                ...prev,
+                                selectedFields: prev.selectedFields.map(toggleHidden)
+                              }
+                            })
+                          }}
+                          title={item.hidden ? 'Show column' : 'Hide column'}
+                          sx={{
+                            color: item.hidden ? 'warning.main' : 'text.secondary',
+                            '&:hover': {
+                              backgroundColor: 'transparent',
+                              color: item.hidden ? 'warning.main' : 'info.main'
+                            }
+                          }}
+                        >
+                          {item.hidden ? <VisibilityOff fontSize='small' /> : <Visibility fontSize='small' />}
+                        </IconButton>
+                        <IconButton
+                          size='small'
+                          onClick={() => {
+                            setBuilderModel(prev => {
+                              const toggleImage = node => {
+                                if (node.propertyType === 'Collection') {
+                                  return { ...node, children: (node.children || []).map(toggleImage) }
+                                }
+                                if (node.path === item.path) {
+                                  return { ...node, image: !node.image }
+                                }
+                                return node
+                              }
+                              return {
+                                ...prev,
+                                selectedFields: prev.selectedFields.map(toggleImage)
+                              }
+                            })
+                          }}
+                          title={item.image ? 'Unset image' : 'Render as image'}
+                          sx={{
+                            color: item.image ? 'success.main' : 'text.secondary',
+                            '&:hover': {
+                              backgroundColor: 'transparent',
+                              color: item.image ? 'success.main' : 'info.main'
+                            }
+                          }}
+                        >
+                          <ImageIcon fontSize='small' />
+                        </IconButton>
+                        <IconButton
+                          size='small'
+                          onClick={() =>
+                            setBuilderModel(prev => ({
+                              ...prev,
+                              selectedFields: removeFieldByPath(prev.selectedFields, item.path)
+                            }))
+                          }
+                          title='Remove field'
+                        >
+                          <DeleteOutline fontSize='small' />
+                        </IconButton>
+                      </Box>
+                    </ListItem>
+                  )}
+                </Draggable>
+              )
+            )}
+            {provided.placeholder}
+          </List>
+        )}
+      </Droppable>
+    )
+  }
+
+  const isFullPathSelected = (nodes, targetFullPath) => {
+    for (const node of nodes) {
+      if (node.fullPath === targetFullPath) return true
+      if (node.children && isFullPathSelected(node.children, targetFullPath)) {
+        return true
+      }
+    }
+    return false
+  }
+
+  const handleGetReport = async id => {
+    try {
+      setIsLoading(true)
+      const response = await Services.PostService(Endpoints.ReportBuilder.Post.GetReportDetails, false, {}, { id: id })
+      if (response) {
+        setBuilderModel(JSON.parse(response.data.value))
+        setBuilderMetadata({
+          id: response.data.id,
+          name: response.data.name,
+          description: response.data.description,
+          pageId: response.data.pageId,
+          type: response.data.type,
+          isNew: false
+        })
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+
+  useEffect(() => {
+    handleGetModels()
+  }, [])
+  useEffect(() => {
+    if (id != null) {
+      handleGetReport(id)
+    }
+  }, [id])
+
+  return (
+    <div dir='ltr' style={{ direction: 'ltr', textAlign: 'left', width: '100%', height: '100%' }}>
+      <style>
+        {`
+          .MuiListItemText-primary,
+          .MuiTypography-root,
+          .MuiListItemText-secondary {
+            text-align: left !important;
+            direction: ltr !important;
+          }
+        `}
+      </style>
+
+      <CssBaseline />
+      <Box sx={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>
+        <Paper
+          elevation={3}
+          sx={{
+            width: 400,
+            display: 'flex',
+            flexDirection: 'column',
+            borderRight: '1px solid #eee',
+            borderRadius: '0px',
+            p: 2,
+            bgcolor: 'white'
+          }}
+        >
+          <Box display='flex' alignItems='center' gap={1} justifyContent='space-between'>
+            <Box display='flex' alignItems='center' gap={1}>
+              <Typography variant='h6'>Report Configuration</Typography>
+              <Chip variant={'filled'} label='Beta' color='warning' size='small' />
+            </Box>
+            <Box>
+              <IconButton
+                onClick={() => {
+                  setBuilderMetadata(preValue => ({
+                    ...preValue,
+                    isNew: id == null
+                  }))
+                  handleToggleDialogs('save')
+                }}
+              >
+                <SaveAsOutlined color={'primary'} />
+              </IconButton>
+              {builderMetadata.id !== 0 && (
+                <IconButton
+                  onClick={() => {
+                    setBuilderMetadata(preValue => ({
+                      ...preValue,
+                      isNew: false
+                    }))
+                    handleToggleDialogs('save')
+                  }}
+                >
+                  <SaveOutlined color={'primary'} />
+                </IconButton>
+              )}
+
+              <IconButton
+                onClick={() => {
+                  router.push('/reportModule/reportBuilder/reports')
+                }}
+              >
+                <AssessmentOutlined color={'primary'} />
+              </IconButton>
+            </Box>
+          </Box>
+          <Autocomplete
+            size='small'
+            value={builderModel.reportSource}
+            options={models}
+            getOptionLabel={option => option.tableName || ''}
+            onChange={(e, value) => {
+              if (value) {
+                setBuilderModel(preValue => ({ ...preValue, reportSource: value }))
+                setBreadcrumbs([])
+                handleGetFields(value.fullName, value.friendlyName, value.propertyType)
+              }
+            }}
+            renderOption={(props, option) => (
+              <Box sx={{ direction: 'rtl' }} component='li' {...props}>
+                <Box>
+                  <Typography sx={{ color: 'primary.dark' }}>{option.tableName}</Typography>
+                  <Typography variant='body2' color='text.secondary'>
+                    {option.friendlyName}
+                  </Typography>
+                </Box>
+              </Box>
+            )}
+            renderInput={params => <TextField {...params} variant='outlined' label='Select Source Model' fullWidth />}
+            sx={{ mb: 2, mt: 2 }}
+          />
+
+          {breadcrumbs.length > 0 && (
+            <Breadcrumbs separator='›' sx={{ mb: 2 }} aria-label='breadcrumb'>
+              {breadcrumbs.map((crumb, i) => (
+                <Link
+                  key={crumb.fullName}
+                  underline='hover'
+                  color={i === breadcrumbs.length - 1 ? 'primary.main' : 'inherit'}
+                  onClick={() => handleGetFields(crumb.fullName, crumb.friendlyName, crumb.propertyType, true)}
+                  sx={{ cursor: 'pointer', fontSize: '0.875rem' }}
+                >
+                  {crumb.friendlyName}
+                </Link>
+              ))}
+            </Breadcrumbs>
+          )}
+
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mb: 2 }}>
+            <Typography variant='subtitle1' gutterBottom>
+              Available Fields
+            </Typography>
+            <TextField
+              variant='outlined'
+              size='small'
+              placeholder='Search fields...'
+              fullWidth
+              value={searchQuery}
+              onChange={e => setSearchQuery(e.target.value)}
+            />
+          </Box>
+
+          <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>
+            <List dense disablePadding>
+              {modelFields
+                .filter(
+                  field =>
+                    field.friendlyName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                    field.path?.toLowerCase().includes(searchQuery.toLowerCase())
+                )
+                .map((field, index) => {
+                  // Now check against your selectedFields by their stored 'path'
+                  const fullPath = [...breadcrumbs.map(b => b.friendlyName), field.friendlyName].join('.')
+
+                  // now check *that*:
+                  const isSelected = isFullPathSelected(builderModel.selectedFields, fullPath)
+                  return (
+                    <ListItem key={index} divider>
+                      <ListItemText
+                        primary={
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            {field.friendlyName}
+                            {isSelected && (
+                              <CheckCircleOutline
+                                fontSize='small'
+                                color='success'
+                                titleAccess='Field already selected'
+                              />
+                            )}
+                          </Box>
+                        }
+                        secondary={field.propertyType}
+                        primaryTypographyProps={{
+                          sx: {
+                            textAlign: 'left',
+                            direction: 'ltr',
+                            display: 'block'
+                          }
+                        }}
+                        secondaryTypographyProps={{
+                          sx: {
+                            fontSize: '10px',
+                            color: 'red',
+                            textAlign: 'left',
+                            direction: 'ltr',
+                            display: 'block'
+                          }
+                        }}
+                      />
+
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 1,
+                          ml: 1,
+                          direction: 'ltr'
+                        }}
+                      >
+                        {(field.propertyType === 'Class' || field.propertyType === 'Collection') && (
+                          <IconButton
+                            size='small'
+                            onClick={() => {
+                              handleGetFields(field.modelClassName, field.friendlyName, field.propertyType)
+                              setSearchQuery('')
+                            }}
+                            sx={{
+                              color: 'text.secondary',
+                              '&:hover': {
+                                backgroundColor: 'transparent',
+                                color: 'success.main'
+                              }
+                            }}
+                            title='Navigate into nested fields'
+                          >
+                            <ArrowForwardSharp fontSize='inherit' />
+                          </IconButton>
+                        )}
+
+                        {field.propertyType !== 'Class' && field.propertyType !== 'Collection' && (
+                          <IconButton
+                            onClick={() => {
+                              handleAddStaticField(field)
+                            }}
+                            size='small'
+                            sx={{
+                              color: 'text.secondary',
+                              '&:hover': {
+                                backgroundColor: 'transparent',
+                                color: 'primary.main'
+                              }
+                            }}
+                            title='Add field to report'
+                          >
+                            <AddBox fontSize='inherit' />
+                          </IconButton>
+                        )}
+                      </Box>
+                    </ListItem>
+                  )
+                })}
+            </List>
+          </Box>
+
+          {isLoading && (
+            <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
+              <CircularProgress size={24} />
+            </Box>
+          )}
+        </Paper>
+
+        <Box sx={{ flexGrow: 1, p: 3, overflowY: 'auto' }}>
+          <Grid container spacing={2}>
+            <Box sx={{ flexGrow: 1, p: 3, overflowY: 'auto' }}>
+              <Box sx={{ mb: 3 }}>
+                {/* Top row: Title (left) and Preview icon (right) */}
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    mb: 2
+                  }}
+                >
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                    <Typography variant='h5' sx={{ fontWeight: 600 }}>
+                      Builder
+                    </Typography>
+
+                    <FormControlLabel
+                      control={
+                        <Switch
+                          size='small'
+                          checked={builderModel.isRaw}
+                          onChange={() => setBuilderModel(prev => ({ ...prev, isRaw: !prev.isRaw }))}
+                          color='primary'
+                        />
+                      }
+                      label='Raw'
+                    />
+                  </Box>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                    <Tooltip title={'تصفية رئيسية'}>
+                      <IconButton
+                        sx={{
+                          color: isPreview ? 'primary.main' : 'text.secondary',
+                          '&:hover': {
+                            backgroundColor: 'transparent',
+                            color: 'primary.main'
+                          }
+                        }}
+                        onClick={() => handleToggleDialogs('filter')}
+                      >
+                        <FilterAlt />
+                      </IconButton>
+                    </Tooltip>
+                    <IconButton
+                      sx={{
+                        color: isPreview ? 'primary.main' : 'text.secondary',
+                        '&:hover': {
+                          backgroundColor: 'transparent',
+                          color: 'primary.main'
+                        }
+                      }}
+                      onClick={() => setIsPreview(prev => !prev)}
+                    >
+                      <PreviewOutlined />
+                    </IconButton>
+                  </Box>
+                </Box>
+
+                {/* Actions row: Just the Add Computed Field button aligned right */}
+                <Box
+                  sx={{
+                    mt: 3,
+                    p: 3,
+                    border: '1px solid',
+                    borderColor: 'divider',
+                    borderRadius: '8px',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    backgroundColor: 'background.paper'
+                  }}
+                >
+                  <Button
+                    variant='outlined'
+                    color='primary'
+                    onClick={() => {
+                      console.log(breadcrumbs)
+                      handleToggleDialogs('expression')
+                    }}
+                  >
+                    Add Computed Field
+                  </Button>
+                  <Button
+                    variant='outlined'
+                    color='primary'
+                    onClick={() => {
+                      setSelectedRow(null) // reset edit
+                      handleToggleDialogs('routing')
+                    }}
+                  >
+                    Add Routing
+                  </Button>
+                  <Button
+                    variant='outlined'
+                    color='primary'
+                    onClick={() => {
+                      console.log(breadcrumbs)
+                      handleToggleDialogs('params')
+                    }}
+                  >
+                    Global Parameters
+                  </Button>
+                  <Button variant='outlined' color='secondary' onClick={() => handleToggleDialogs('fixedFilter')}>
+                    Fixed Filter
+                  </Button>
+                  {/* Hidden input for uploading builder model */}
+                  <input
+                    type='file'
+                    accept='application/json,.json'
+                    ref={fileInputRef}
+                    style={{ display: 'none' }}
+                    onChange={handleFileChange}
+                  />
+                  <Button
+                    variant='outlined'
+                    color='secondary'
+                    startIcon={<CloudDownloadOutlined />}
+                    onClick={handleDownloadModel}
+                  >
+                    Download Model
+                  </Button>
+                  <Button
+                    variant='outlined'
+                    color='secondary'
+                    startIcon={<CloudUploadOutlined />}
+                    onClick={handleUploadClick}
+                  >
+                    Upload Model
+                  </Button>
+                </Box>
+              </Box>
+
+              {!isPreview ? (
+                builderModel.isRaw ? (
+                  <Box>
+                    <SqlEditor builderModel={builderModel} setBuilderModel={setBuilderModel} />
+                  </Box>
+                ) : (
+                  <Box>
+                    <DragDropContext onDragEnd={handleDragEnd}>
+                      {renderSelectedFields(builderModel.selectedFields)}
+                    </DragDropContext>
+                  </Box>
+                )
+              ) : (
+                <Box>
+                  <SGrid builderModel={builderModel} />
+                </Box>
+              )}
+            </Box>
+          </Grid>
+          {!isPreview && (
+            <Box
+              sx={{ mt: 4, backgroundColor: '#fff', borderRadius: '12px', p: '10px', border: '1px solid lightgrey' }}
+            >
+              <Typography variant='h6' gutterBottom>
+                Routing Settings
+              </Typography>
+
+              {builderModel.routingSettings?.length === 0 && (
+                <Typography variant='body2' color='text.secondary'>
+                  No routing settings defined yet.
+                </Typography>
+              )}
+
+              <List dense>
+                {(builderModel.routingSettings ?? []).map((route, idx) => (
+                  <ListItem key={idx} divider>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        width: '100%'
+                      }}
+                    >
+                      {/* Left side: routing info */}
+                      <Box>
+                        <Typography variant='body1'>
+                          {route.fieldName} → {route.pattern}
+                        </Typography>
+                        <Typography variant='body2' color='text.secondary'>
+                          Params: {route.params.join(', ')}
+                        </Typography>
+                      </Box>
+
+                      {/* Right side: action buttons */}
+                      <Box sx={{ display: 'flex', gap: 1 }}>
+                        <Button
+                          size='small'
+                          onClick={() => {
+                            setSelectedRow({ ...route, index: idx })
+                            handleToggleDialogs('routing')
+                          }}
+                        >
+                          Update
+                        </Button>
+                        <Button
+                          size='small'
+                          color='error'
+                          onClick={() =>
+                            setBuilderModel(prev => ({
+                              ...prev,
+                              routingSettings: prev.routingSettings.filter((_, i) => i !== idx)
+                            }))
+                          }
+                        >
+                          Delete
+                        </Button>
+                      </Box>
+                    </Box>
+                  </ListItem>
+                ))}
+              </List>
+            </Box>
+          )}
+        </Box>
+      </Box>
+
+      <Dialog
+        open={openDialogs.expression}
+        onClose={() => {
+          handleToggleDialogs('expression')
+          setSelectedRow(null)
+          setSelectedCollection(null)
+        }}
+        maxWidth='lg'
+        fullWidth
+      >
+        <ExpressionEditor
+          oldValue={selectedRow}
+          addComputedField={handleAddComputedField}
+          handleUpdateComputedField={handleUpdateComputedField}
+          selectionParams={builderModel.selectionParams}
+          setSelectionParams={params => setBuilderModel(prev => ({ ...prev, selectionParams: params }))}
+        />
+      </Dialog>
+      <Dialog
+        open={openDialogs.params}
+        onClose={() => {
+          handleToggleDialogs('params')
+          setSelectedRow(null)
+        }}
+        maxWidth='lg'
+        fullWidth
+      >
+        <DynamicValueList
+          items={builderModel.selectionParams}
+          onChange={newParams => {
+            setBuilderModel(prev => ({
+              ...prev,
+              selectionParams: newParams
+            }))
+          }}
+        />
+      </Dialog>
+      <Dialog
+        open={openDialogs.save}
+        onClose={() => {
+          handleToggleDialogs('save')
+        }}
+        maxWidth='lg'
+        fullWidth
+      >
+        <ReportBuilderSaveForm
+          builderMetadata={builderMetadata}
+          setBuilderMetadata={setBuilderMetadata}
+          dialog={'save'}
+          handleRefresh={handleGetReport}
+          handleToggleDialogs={handleToggleDialogs}
+          value={builderModel}
+        />
+      </Dialog>
+      <Dialog
+        fullWidth
+        open={openDialogs.filter && builderModel.reportSource}
+        maxWidth='xl'
+        scroll='body'
+        // onClose={() => handleToggleDialogs('CustomFilter')}
+      >
+        <CustomFilterDialog
+          handleToggleDialogs={handleToggleDialogs}
+          Filter={[...(builderModel.filter?.LocalTfilter || [])]}
+          handleFilterChange={handleFilterChange}
+          className={builderModel?.reportSource?.fullName}
+          LocalFilter={false}
+          selectTFilter={[]}
+          selectParamsMeta={builderModel.selectionParams}
+        />
+      </Dialog>
+      <Dialog
+        fullWidth
+        open={openDialogs.fixedFilter && builderModel.reportSource}
+        maxWidth='lg'
+        scroll='body'
+        onClose={() => handleToggleDialogs('fixedFilter')}
+      >
+        <FixedFilterDialog
+          className={builderModel?.reportSource?.fullName}
+          value={builderModel?.filter?.fixedTFilter || []}
+          onSave={list => {
+            setBuilderModel(prev => ({
+              ...prev,
+              filter: {
+                ...(prev.filter || {}),
+                fixedTFilter: list
+              }
+            }))
+          }}
+          onClose={() => handleToggleDialogs('fixedFilter')}
+        />
+      </Dialog>
+      <Dialog open={openDialogs.routing} onClose={() => handleToggleDialogs('routing')} maxWidth='sm' fullWidth>
+        <RoutingSettingDialog
+          value={selectedRow || { fieldName: '', pattern: '', params: [] }}
+          onChange={newValue => {
+            setBuilderModel(prev => {
+              const clone = [...(prev.routingSettings || [])]
+              if (selectedRow?.index != null) {
+                // Update existing
+                clone[selectedRow.index] = newValue
+              } else {
+                // Add new
+                clone.push(newValue)
+              }
+              return { ...prev, routingSettings: clone }
+            })
+          }}
+          onClose={() => handleToggleDialogs('routing')}
+        />
+      </Dialog>
+    </div>
+  )
+}
+
+ReportBuilder.acl = {
+  action: 'view',
+  subject: PermissionsSubjects.ReportBuilderPage
+}
+
+ReportBuilder.getLayout = page => <BlankLayout>{page}</BlankLayout>
+
+export default ReportBuilder