robobyte-front-builder 1.0.16 → 1.0.19

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

@@ -1,4 +1,4 @@
-import BlankLayout from 'src/@core/layouts/BlankLayout'
+import BlankLayout from "src/@core/layouts/BlankLayout";
 import {
   Autocomplete,
   Box,
@@ -16,68 +16,71 @@ import {
   Link,
   Chip,
   Button,
+  DialogActions,
+  MenuItem,
+  Select,
+  InputLabel,
+  FormControl,
+  DialogContent,
+  DialogTitle,
   Dialog,
   Tooltip,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-  FormControlLabel
-} from '@mui/material'
-import { useEffect, useRef, useState } from 'react'
-import { Endpoints, Services } from 'services/Endpoints'
+  Checkbox, Accordion, AccordionSummary, AccordionDetails, FormControlLabel,
+} from '@mui/material';
+import {useEffect, useRef, useState} from "react";
+import {Endpoints, Services} from "services/Endpoints";
 import {
   AddBox,
+  ArrowBackOutlined,
   ArrowForwardSharp,
   AssessmentOutlined,
-  Expand,
-  FilterAlt,
+  BackupOutlined,
+  Expand, FilterAlt, FilterBAndW, FilterVintageOutlined,
+  KeyboardReturnOutlined,
   PreviewOutlined,
   SaveAsOutlined,
-  SaveOutlined,
-  Search,
-  Visibility,
-  VisibilityOff,
-  Image as ImageIcon,
+  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'
+} 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 FixedFilterDialog from "views/customFilter/FixedFilterDialog";
+import RoutingSettingDialog from "views/genericTable/RoutingSettingDialog";
+import FormattingSettingsDialog from "views/genericTable/FormattingSettingsDialog";
+import ColumnConfiguratorDialog from "views/genericTable/ColumnConfiguratorDialog";
+import ReportSettingsDialog from "views/genericTable/ReportSettingsDialog";
+import {DragDropContext, Droppable, Draggable} from 'react-beautiful-dnd';
 
 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 [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 {id} = router.query
   const [builderMetadata, setBuilderMetadata] = useState({
     id: 0,
     name: '',
     description: '',
-    isNew: true
-  })
+    isNew: true,
+  });
   const [builderModel, setBuilderModel] = useState({
     reportSource: null,
     selectedFields: [],
@@ -85,14 +88,17 @@ const ReportBuilder = () => {
     isRaw: false,
     filter: {
       Tfilter: [],
-      LocalTfilter: []
+      LocalTfilter: [],
     },
     searchFilter: [],
     rawSql: '',
-    routingSettings: []
-  })
-  const [breadcrumbs, setBreadcrumbs] = useState([])
-  const [isPreview, setIsPreview] = useState(false)
+    routingSettings: [],
+    settings: {
+      rowUniqueId: []
+    }
+  });
+  const [breadcrumbs, setBreadcrumbs] = useState([]);
+  const [isPreview, setIsPreview] = useState(false);
   const [openDialogs, setOpenDialogs] = useState({
     expression: false,
     params: false,
@@ -100,12 +106,19 @@ const ReportBuilder = () => {
     filter: false,
     searchFilter: false,
     routing: false,
-    fixedFilter: false
-  })
-  const [selectedRow, setSelectedRow] = useState(null)
+    fixedFilter: false,
+    formatting: false,
+    columnConfig: false,
+    settings: false
+  });
+  const [selectedRow, setSelectedRow] = useState(null);
+  const [columnConfigResult, setColumnConfigResult] = useState(null);
 
   // File input ref for uploading builder model JSON
-  const fileInputRef = useRef(null)
+  const fileInputRef = useRef(null);
+
+  // UpdateRef for tracking field changes in the grid (array structure)
+  const updateRef = useRef([]);
 
   // Download current builderModel as JSON file
   const handleDownloadModel = () => {
@@ -113,121 +126,122 @@ const ReportBuilder = () => {
       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
+          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)
+        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)
+      console.error('Failed to download builder model:', err);
     }
-  }
+  };
 
   // Trigger hidden file input
   const handleUploadClick = () => {
     try {
-      fileInputRef.current?.click()
+      fileInputRef.current?.click();
     } catch (e) {
-      console.error(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()
+  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)
+        const text = reader.result || '';
+        const obj = JSON.parse(text);
         // Basic validation: ensure it's an object
         if (obj && typeof obj === 'object') {
-          setBuilderModel(obj)
+          setBuilderModel(obj);
         } else {
-          console.error('Uploaded file is not a valid builder model object')
+          console.error('Uploaded file is not a valid builder model object');
         }
       } catch (err) {
-        console.error('Failed to parse uploaded JSON:', err)
+        console.error('Failed to parse uploaded JSON:', err);
       } finally {
-        if (e?.target) e.target.value = ''
+        if (e?.target) e.target.value = '';
       }
-    }
-    reader.readAsText(file)
-  }
+    };
+    reader.readAsText(file);
+  };
 
-  const { control, handleSubmit, reset } = useForm({
+  const {control, handleSubmit, reset} = useForm({
     defaultValues: {
       name: '',
       type: '',
-      expression: ''
-    }
-  })
+      expression: '',
+    },
+  });
 
   const handleToggleDialogs = dialog => {
     handleChange(setOpenDialogs, dialog, !openDialogs[dialog])
   }
 
-  const isInSearchFilter = fullPath => (builderModel.searchFilter ?? []).some(f => f.fullPath === fullPath)
+  const isInSearchFilter = (fullPath) =>
+    (builderModel.searchFilter ?? []).some(f => f.fullPath === fullPath);
 
-  const toggleSearchFilterByFullPath = payload => {
+  const toggleSearchFilterByFullPath = (payload) => {
     setBuilderModel(prev => {
-      const exists = (prev.searchFilter ?? []).some(f => f.fullPath === payload.fullPath)
+      const exists = (prev.searchFilter ?? []).some(f => f.fullPath === payload.fullPath);
       const updated = exists
         ? prev.searchFilter.filter(f => f.fullPath !== payload.fullPath)
-        : [...(prev.searchFilter ?? []), payload]
+        : [...(prev.searchFilter ?? []), payload];
 
       return {
         ...prev,
         searchFilter: updated
-      }
-    })
-  }
+      };
+    });
+  };
 
   const handleGetModels = async () => {
     try {
-      setIsLoading(true)
-      const response = await Services.PostService(Endpoints.ReportBuilder.Post.GetModels, false, {})
+      setIsLoading(true);
+      const response = await Services.PostService(Endpoints.ReportBuilder.Post.GetModels, false, {});
       if (response) {
-        setModels(response)
+        setModels(response);
       }
     } catch (error) {
-      console.error(error)
+      console.error(error);
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }
+  };
 
   const handleGetFields = async (modelFullName, friendlyName = null, propertyType, isPrevious) => {
     try {
-      setIsLoading(true)
+      setIsLoading(true);
       const response = await Services.PostService(
         Endpoints.ReportBuilder.Post.GetModelFields,
         false,
         {},
-        { modelFullName }
-      )
+        {modelFullName}
+      );
       if (response) {
-        setModelFields(response.data)
-        const modelObject = models.find(m => m.fullName === modelFullName)
+        setModelFields(response.data);
+        const modelObject = models.find(m => m.fullName === modelFullName);
 
-        console.log(modelObject)
+        console.log(modelObject);
         setBreadcrumbs(prev => {
-          const exists = prev.find(b => b.fullName === modelFullName)
+          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)
+            const index = prev.findIndex(b => b.fullName === modelFullName);
+            return prev.slice(0, index + 1);
           }
           console.log(prev)
           return [
@@ -235,69 +249,73 @@ const ReportBuilder = () => {
             {
               fullName: modelFullName,
               friendlyName: friendlyName ?? modelObject?.friendlyName ?? modelFullName,
-              propertyType: propertyType ?? modelObject?.propertyType ?? null
-            }
-          ]
-        })
+              propertyType: propertyType ?? modelObject?.propertyType ?? null,
+            },
+          ];
+        });
       }
     } catch (error) {
-      console.error(error)
+      console.error(error);
     } finally {
-      setIsLoading(false)
+      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
+//    • 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)
+    const parts = fullPath.split('.');
+    const afterRoot = parts.slice(1);
     if (!collectionBreadcrumbs.length) {
-      return afterRoot.join('.')
+      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 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)
+    const parts = fullCollectionPath.split('.');
+    const afterRoot = parts.slice(1);
     if (!collectionBreadcrumbs.length) {
-      return afterRoot.join('.')
+      return afterRoot.join('.');
     }
-    const firstColl = collectionBreadcrumbs[0].friendlyName
+    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)
+      const rest = afterRoot.slice(1);
       // if that was the only segment, fall back to the collection name
-      return rest.length ? rest.join('.') : firstColl
+      return rest.length ? rest.join('.') : firstColl;
     }
-    return afterRoot.join('.')
-  }
+    return afterRoot.join('.');
+  };
 
-  const handleAddStaticField = field => {
+  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 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)
+        fullPath: breadcrumbs.slice(0, i + 1)
           .map(x => x.friendlyName)
           .join('.')
       }))
-      .filter(b => b.propertyType === 'Collection')
+      .filter(b => b.propertyType === 'Collection');
 
     // compute leaf path & header
-    const trimmedPath = getLeafTrimmedPath(fullPath, collectionBreadcrumbs)
-    const headerName = trimmedPath.replace(/\./g, '_')
+    const trimmedPath = getLeafTrimmedPath(fullPath, collectionBreadcrumbs);
+    const headerName = trimmedPath.replace(/\./g, '_');
     console.log(field)
     const newLeafField = {
       fullPath: fullPath,
@@ -309,19 +327,21 @@ const ReportBuilder = () => {
       propertyType: field.propertyType,
       enumName: field.enumName,
       hidden: false,
-      image: false
-    }
+      image: false,
+    };
 
     setBuilderModel(prev => {
-      const clone = [...prev.selectedFields]
+      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)
+        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,
@@ -329,33 +349,34 @@ const ReportBuilder = () => {
             headerName: collHeader,
             propertyType: 'Collection',
             children: []
-          }
-          nodes.push(node)
+          };
+          nodes.push(node);
         }
 
-        const isLast = depth === crumbs.length - 1
+        const isLast = depth === crumbs.length - 1;
         if (isLast) {
           if (!node.children.some(f => f.path === trimmedPath)) {
-            node.children.push(newLeafField)
+            node.children.push(newLeafField);
           }
         } else {
-          insertIntoCollectionsOnly(node.children, crumbs, depth + 1)
+          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, selectedFields: [...clone, newLeafField]};
         }
-        return prev
+        return prev;
       }
 
       // otherwise build the nested collection node(s)
-      insertIntoCollectionsOnly(clone, collectionBreadcrumbs)
-      return { ...prev, selectedFields: clone }
-    })
-  }
+      insertIntoCollectionsOnly(clone, collectionBreadcrumbs);
+      return {...prev, selectedFields: clone};
+    });
+  };
+
 
   // (1) Helper: insert a node into the right collection, by `collectionPath`
   function insertIntoCollection(nodes, collectionPath, newField) {
@@ -366,19 +387,19 @@ const ReportBuilder = () => {
           return {
             ...node,
             children: [...(node.children || []), newField]
-          }
+          };
         }
         // otherwise recurse
         return {
           ...node,
           children: insertIntoCollection(node.children || [], collectionPath, newField)
-        }
+        };
       }
-      return node
-    })
+      return node;
+    });
   }
 
-  // (2) Add computed field — either top‐level or inside the selectedCollection
+// (2) Add computed field — either top‐level or inside the selectedCollection
   const handleAddComputedField = (expression, headerName, propertyType, title) => {
     const newField = {
       path: headerName,
@@ -388,221 +409,230 @@ const ReportBuilder = () => {
       expression,
       title,
       hidden: false,
-      image: false
-    }
+      image: false,
+    };
 
     setBuilderModel(prev => {
-      const { selectedFields } = 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) => {
+      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 }
+          return {...node, headerName, expression, propertyType, title, path: headerName};
         }
         if (node.propertyType === 'Collection') {
           return {
             ...node,
             children: (node.children || []).map(updateNode)
-          }
+          };
         }
-        return node
-      }
+        return node;
+      };
 
       return {
         ...prev,
         selectedFields: prev.selectedFields.map(updateNode)
-      }
-    })
-    setSelectedCollection(null)
-  }
+      };
+    });
+    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)
+        const filteredChildren = removeFieldByPath(f.children || [], pathToRemove);
         // only keep this collection if it still has children
         if (filteredChildren.length > 0) {
-          acc.push({ ...f, children: filteredChildren })
+          acc.push({...f, children: filteredChildren});
         }
       } else {
         // leaf field: only keep it if paths don't match
         if (f.path !== pathToRemove) {
-          acc.push(f)
+          acc.push(f);
         }
       }
-      return acc
-    }, [])
+      return acc;
+    }, []);
   }
 
   function handleFilterChange(field, value) {
-    console.log(field, value)
+    console.log(field, value);
     setBuilderModel(prev => ({
       ...prev,
       filter: {
         ...prev.filter,
-        [field]: value // <-- computed key on the nested object
-      }
-    }))
+        [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
+
+  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()
+        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 || []) }
+          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
-        })
+          return {...n, children: updateCollections(n.children || [])};
+        }
+        return n;
+      });
 
       if (droppableId === 'root') {
-        return { ...prev, selectedFields: reorderLeaves(prev.selectedFields, source.index, destination.index) }
+        return {...prev, selectedFields: reorderLeaves(prev.selectedFields, source.index, destination.index)};
       } else {
-        return { ...prev, selectedFields: updateCollections(prev.selectedFields) }
+        return {...prev, selectedFields: updateCollections(prev.selectedFields)};
       }
-    })
-  }
+    });
+  };
 
   const renderSelectedFields = (nodes, level = 0, droppableId = 'root') => {
     // Count leaf-only index for Draggable indices
-    let leafIndexCounter = 0
+    let leafIndexCounter = 0;
     return (
       <Droppable droppableId={droppableId}>
-        {provided => (
-          <List dense disablePadding sx={{ pl: level * 2 }} ref={provided.innerRef} {...provided.droppableProps}>
-            {nodes.map(item =>
+        {(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 />}>
+                <Accordion key={item.headerName} disableGutters sx={{mb: 1}}>
+                  <AccordionSummary expandIcon={<Expand/>}>
                     <Box
                       sx={{
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'space-between',
-                        width: '100%'
+                        width: '100%',
                       }}
                     >
-                      <Typography variant='subtitle2' fontWeight='bold'>
+                      <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 }))
+                        size="small"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setSelectedCollection(item);
+                          setSelectedRow(null);
+                          setOpenDialogs(prev => ({...prev, expression: true}));
                         }}
-                        title='Add computed field to this collection'
+                        title="Add computed field to this collection"
                       >
-                        <AddBox fontSize='small' />
+                        <AddBox fontSize="small"/>
                       </IconButton>
                     </Box>
                   </AccordionSummary>
-                  <AccordionDetails>{renderSelectedFields(item.children, level + 1, item.path)}</AccordionDetails>
+                  <AccordionDetails>
+                    {renderSelectedFields(item.children, level + 1, item.path)}
+                  </AccordionDetails>
                 </Accordion>
               ) : (
-                <Draggable
-                  key={`${droppableId}::${item.path}`}
-                  draggableId={`${droppableId}::${item.path}`}
-                  index={leafIndexCounter++}
-                >
-                  {providedDrag => (
+                <Draggable key={`${droppableId}::${item.path}`} draggableId={`${droppableId}::${item.path}`}
+                           index={leafIndexCounter++}>
+                  {(providedDrag) => (
                     <ListItem
-                      ref={providedDrag.innerRef}
-                      {...providedDrag.draggableProps}
-                      {...providedDrag.dragHandleProps}
-                      divider
-                    >
+                      ref={providedDrag.innerRef} {...providedDrag.draggableProps} {...providedDrag.dragHandleProps}
+                      divider>
                       <ListItemText
                         primary={
                           editingHeaderPath === item.path ? (
                             <TextField
-                              size='small'
+                              size="small"
                               autoFocus
-                              variant='standard'
+                              variant="standard"
                               value={item.title}
-                              onChange={e => {
-                                const newHeaderName = e.target.value
+                              onChange={(e) => {
+                                const newHeaderName = e.target.value;
 
                                 setBuilderModel(prev => {
-                                  const updateNode = node => {
+                                  const updateNode = (node) => {
                                     if (node.path === item.path && !node.children) {
-                                      return { ...node, title: newHeaderName }
+                                      return {...node, title: newHeaderName};
                                     }
                                     if (node.propertyType === 'Collection') {
-                                      return { ...node, children: (node.children || []).map(updateNode) }
+                                      return {...node, children: (node.children || []).map(updateNode)};
                                     }
-                                    return node
-                                  }
+                                    return node;
+                                  };
 
                                   return {
                                     ...prev,
                                     selectedFields: prev.selectedFields.map(updateNode)
-                                  }
-                                })
+                                  };
+                                });
                               }}
                               onBlur={() => setEditingHeaderPath(null)}
-                              onKeyDown={e => {
+                              onKeyDown={(e) => {
                                 if (e.key === 'Enter' || e.key === 'Escape') {
-                                  setEditingHeaderPath(null)
+                                  setEditingHeaderPath(null);
                                 }
                               }}
                               inputProps={{
                                 style: {
                                   fontWeight: 'bold',
-                                  fontSize: '0.875rem'
+                                  fontSize: '0.875rem',
                                 }
                               }}
                             />
                           ) : (
                             <Typography
-                              variant='subtitle2'
-                              fontWeight='bold'
+                              variant="subtitle2"
+                              fontWeight="bold"
                               onDoubleClick={() => setEditingHeaderPath(item.path)}
-                              sx={{ cursor: 'pointer' }}
+                              sx={{cursor: 'pointer'}}
                             >
                               {item.title ?? item.headerName}
                             </Typography>
@@ -610,153 +640,175 @@ const ReportBuilder = () => {
                         }
                         secondary={item.path}
                       />
-                      <Box sx={{ display: 'flex', gap: 1 }}>
+                      <Box sx={{display: 'flex', gap: 1}}>
                         {item.type === 'computed' && (
                           <IconButton
-                            size='small'
+                            size="small"
                             onClick={() => {
-                              setSelectedRow(item)
-                              setOpenDialogs(prev => ({ ...prev, expression: true }))
+                              setSelectedRow(item);
+                              setOpenDialogs(prev => ({...prev, expression: true}));
                             }}
-                            title='Edit computed field'
+                            title="Edit computed field"
                           >
-                            <PencilOutline fontSize='small' />
+                            <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>
-                          )}
+                        {((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'
+                          size="small"
                           onClick={() => {
                             setBuilderModel(prev => {
-                              const toggleHidden = node => {
+                              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, hidden: !node.hidden};
                                 }
-                                return node
-                              }
+                                return node;
+                              };
                               return {
                                 ...prev,
                                 selectedFields: prev.selectedFields.map(toggleHidden)
-                              }
-                            })
+                              };
+                            });
                           }}
-                          title={item.hidden ? 'Show column' : 'Hide column'}
+                          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'
-                            }
+                              color: item.hidden ? 'warning.main' : 'info.main',
+                            },
                           }}
                         >
-                          {item.hidden ? <VisibilityOff fontSize='small' /> : <Visibility fontSize='small' />}
+                          {item.hidden ? <VisibilityOff fontSize="small"/> : <Visibility fontSize="small"/>}
                         </IconButton>
                         <IconButton
-                          size='small'
+                          size="small"
                           onClick={() => {
                             setBuilderModel(prev => {
-                              const toggleImage = node => {
+                              const toggleImage = (node) => {
                                 if (node.propertyType === 'Collection') {
-                                  return { ...node, children: (node.children || []).map(toggleImage) }
+                                  return {...node, children: (node.children || []).map(toggleImage)};
                                 }
                                 if (node.path === item.path) {
-                                  return { ...node, image: !node.image }
+                                  return {...node, image: !node.image};
                                 }
-                                return node
-                              }
+                                return node;
+                              };
                               return {
                                 ...prev,
                                 selectedFields: prev.selectedFields.map(toggleImage)
-                              }
-                            })
+                              };
+                            });
                           }}
-                          title={item.image ? 'Unset image' : 'Render as image'}
+                          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'
-                            }
+                              color: item.image ? 'success.main' : 'info.main',
+                            },
+                          }}
+                        >
+                          <ImageIcon fontSize="small"/>
+                        </IconButton>
+                        <IconButton
+                          size="small"
+                          onClick={() => {
+                            setSelectedRow(item);
+                            setOpenDialogs(prev => ({...prev, formatting: true}));
+                          }}
+                          title="Formatting Settings"
+                          sx={{
+                            color: item.formatting ? 'primary.main' : 'text.secondary',
+                            '&:hover': {
+                              backgroundColor: 'transparent',
+                              color: item.formatting ? 'primary.main' : 'info.main',
+                            },
                           }}
                         >
-                          <ImageIcon fontSize='small' />
+                          <FilterVintageOutlined fontSize="small"/>
                         </IconButton>
                         <IconButton
-                          size='small'
+                          size="small"
                           onClick={() =>
                             setBuilderModel(prev => ({
                               ...prev,
                               selectedFields: removeFieldByPath(prev.selectedFields, item.path)
                             }))
                           }
-                          title='Remove field'
+                          title="Remove field"
                         >
-                          <DeleteOutline fontSize='small' />
+                          <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.fullPath === targetFullPath) return true;
       if (node.children && isFullPathSelected(node.children, targetFullPath)) {
-        return true
+        return true;
       }
     }
-    return false
-  }
+    return false;
+  };
 
-  const handleGetReport = async id => {
+
+  const handleGetReport = async (id) => {
     try {
-      setIsLoading(true)
-      const response = await Services.PostService(Endpoints.ReportBuilder.Post.GetReportDetails, false, {}, { id: id })
+      setIsLoading(true);
+      const response = await Services.PostService(
+        Endpoints.ReportBuilder.Post.GetReportDetails,
+        false,
+        {},
+        {id: id}
+      )
       if (response) {
-        setBuilderModel(JSON.parse(response.data.value))
+        setBuilderModel(JSON.parse(response.data.value));
         setBuilderMetadata({
           id: response.data.id,
           name: response.data.name,
@@ -769,22 +821,24 @@ const ReportBuilder = () => {
     } catch (error) {
       console.error(error)
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
   }
 
 
   useEffect(() => {
-    handleGetModels()
-  }, [])
+    handleGetModels();
+  }, []);
   useEffect(() => {
     if (id != null) {
-      handleGetReport(id)
+
+      handleGetReport(id);
     }
-  }, [id])
+  }, [id]);
+
 
   return (
-    <div dir='ltr' style={{ direction: 'ltr', textAlign: 'left', width: '100%', height: '100%' }}>
+    <div dir="ltr" style={{direction: 'ltr', textAlign: 'left', width: '100%', height: '100%'}}>
       <style>
         {`
           .MuiListItemText-primary,
@@ -796,8 +850,8 @@ const ReportBuilder = () => {
         `}
       </style>
 
-      <CssBaseline />
-      <Box sx={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>
+      <CssBaseline/>
+      <Box sx={{display: 'flex', height: '100vh', overflow: 'hidden'}}>
         <Paper
           elevation={3}
           sx={{
@@ -807,84 +861,86 @@ const ReportBuilder = () => {
             borderRight: '1px solid #eee',
             borderRadius: '0px',
             p: 2,
-            bgcolor: 'white'
+            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 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 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'} />
+              {builderMetadata.id !== 0 && <IconButton onClick={() => {
+                setBuilderMetadata(preValue => ({
+                  ...preValue,
+                  isNew: false,
+                }))
+                handleToggleDialogs('save')
+              }}><SaveOutlined color={'primary'}/></IconButton>}
+
+              <IconButton onClick={() => {
+                router.push('reportBuilder/reports')
+              }}>
+                <AssessmentOutlined color={'primary'}/>
               </IconButton>
             </Box>
+
           </Box>
           <Autocomplete
-            size='small'
+            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)
+                setBuilderModel(preValue => ({...preValue, reportSource: value}))
+                setBreadcrumbs([]);
+                handleGetFields(value.fullName, value.friendlyName, value.propertyType);
               }
             }}
             renderOption={(props, option) => (
-              <Box sx={{ direction: 'rtl' }} component='li' {...props}>
+              <Box sx={{direction: 'rtl'}} component="li" {...props}>
                 <Box>
-                  <Typography sx={{ color: 'primary.dark' }}>{option.tableName}</Typography>
-                  <Typography variant='body2' color='text.secondary'>
+                  <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 }}
+            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 separator="›" sx={{mb: 2}} aria-label="breadcrumb">
               {breadcrumbs.map((crumb, i) => (
                 <Link
                   key={crumb.fullName}
-                  underline='hover'
+                  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' }}
+                  sx={{cursor: 'pointer', fontSize: '0.875rem'}}
                 >
                   {crumb.friendlyName}
                 </Link>
@@ -892,45 +948,51 @@ const ReportBuilder = () => {
             </Breadcrumbs>
           )}
 
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mb: 2 }}>
-            <Typography variant='subtitle1' gutterBottom>
+          <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...'
+              variant="outlined"
+              size="small"
+              placeholder="Search fields..."
               fullWidth
               value={searchQuery}
-              onChange={e => setSearchQuery(e.target.value)}
+              onChange={(e) => setSearchQuery(e.target.value)}
             />
           </Box>
 
-          <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>
+          <Box sx={{flexGrow: 1, overflowY: 'auto'}}>
             <List dense disablePadding>
               {modelFields
-                .filter(
-                  field =>
-                    field.friendlyName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                    field.path?.toLowerCase().includes(searchQuery.toLowerCase())
+                .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('.')
+                  const fullPath = [
+                    ...breadcrumbs.map(b => b.friendlyName),
+                    field.friendlyName
+                  ].join('.');
 
                   // now check *that*:
-                  const isSelected = isFullPathSelected(builderModel.selectedFields, fullPath)
+                  const isSelected = isFullPathSelected(
+                    builderModel.selectedFields,
+                    fullPath
+                  );
                   return (
                     <ListItem key={index} divider>
                       <ListItemText
                         primary={
-                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                          <Box sx={{display: 'flex', alignItems: 'center', gap: 1}}>
                             {field.friendlyName}
                             {isSelected && (
                               <CheckCircleOutline
-                                fontSize='small'
-                                color='success'
-                                titleAccess='Field already selected'
+                                fontSize="small"
+                                color="success"
+                                titleAccess="Field already selected"
                               />
                             )}
                           </Box>
@@ -940,7 +1002,7 @@ const ReportBuilder = () => {
                           sx: {
                             textAlign: 'left',
                             direction: 'ltr',
-                            display: 'block'
+                            display: 'block',
                           }
                         }}
                         secondaryTypographyProps={{
@@ -949,7 +1011,7 @@ const ReportBuilder = () => {
                             color: 'red',
                             textAlign: 'left',
                             direction: 'ltr',
-                            display: 'block'
+                            display: 'block',
                           }
                         }}
                       />
@@ -960,12 +1022,12 @@ const ReportBuilder = () => {
                           alignItems: 'center',
                           gap: 1,
                           ml: 1,
-                          direction: 'ltr'
+                          direction: 'ltr',
                         }}
                       >
                         {(field.propertyType === 'Class' || field.propertyType === 'Collection') && (
                           <IconButton
-                            size='small'
+                            size="small"
                             onClick={() => {
                               handleGetFields(field.modelClassName, field.friendlyName, field.propertyType)
                               setSearchQuery('')
@@ -974,90 +1036,98 @@ const ReportBuilder = () => {
                               color: 'text.secondary',
                               '&:hover': {
                                 backgroundColor: 'transparent',
-                                color: 'success.main'
-                              }
+                                color: 'success.main',
+                              },
                             }}
-                            title='Navigate into nested fields'
+                            title="Navigate into nested fields"
                           >
-                            <ArrowForwardSharp fontSize='inherit' />
+                            <ArrowForwardSharp fontSize="inherit"/>
                           </IconButton>
                         )}
 
+
                         {field.propertyType !== 'Class' && field.propertyType !== 'Collection' && (
                           <IconButton
                             onClick={() => {
                               handleAddStaticField(field)
                             }}
-                            size='small'
+                            size="small"
                             sx={{
                               color: 'text.secondary',
                               '&:hover': {
                                 backgroundColor: 'transparent',
-                                color: 'primary.main'
-                              }
+                                color: 'primary.main',
+                              },
                             }}
-                            title='Add field to report'
+                            title="Add field to report"
                           >
-                            <AddBox fontSize='inherit' />
+                            <AddBox fontSize="inherit"/>
                           </IconButton>
                         )}
+
                       </Box>
                     </ListItem>
-                  )
+                  );
                 })}
             </List>
+
           </Box>
 
           {isLoading && (
-            <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
-              <CircularProgress size={24} />
+            <Box sx={{display: 'flex', justifyContent: 'center', mt: 2}}>
+              <CircularProgress size={24}/>
             </Box>
           )}
         </Paper>
 
-        <Box sx={{ flexGrow: 1, p: 3, overflowY: 'auto' }}>
+        <Box sx={{flexGrow: 1, p: 3, overflowY: 'auto'}}>
+
           <Grid container spacing={2}>
-            <Box sx={{ flexGrow: 1, p: 3, overflowY: 'auto' }}>
-              <Box sx={{ mb: 3 }}>
+            <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
+                    mb: 2,
                   }}
                 >
-                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                    <Typography variant='h5' sx={{ fontWeight: 600 }}>
+                  <Box sx={{display: 'flex', alignItems: 'center', gap: 2}}>
+                    <Typography variant="h5" sx={{fontWeight: 600}}>
                       Builder
                     </Typography>
 
                     <FormControlLabel
                       control={
                         <Switch
-                          size='small'
+                          size="small"
                           checked={builderModel.isRaw}
-                          onChange={() => setBuilderModel(prev => ({ ...prev, isRaw: !prev.isRaw }))}
-                          color='primary'
+                          onChange={() =>
+                            setBuilderModel(prev => ({...prev, isRaw: !prev.isRaw}))
+                          }
+                          color="primary"
                         />
                       }
-                      label='Raw'
+                      label="Raw"
                     />
                   </Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                  <Box sx={{display: 'flex', alignItems: 'center', gap: 2}}>
                     <Tooltip title={'تصفية رئيسية'}>
+
                       <IconButton
                         sx={{
                           color: isPreview ? 'primary.main' : 'text.secondary',
                           '&:hover': {
                             backgroundColor: 'transparent',
-                            color: 'primary.main'
-                          }
+                            color: 'primary.main',
+                          },
                         }}
-                        onClick={() => handleToggleDialogs('filter')}
+                        onClick={() => handleToggleDialogs('filter')
+                        }
                       >
-                        <FilterAlt />
+                        <FilterAlt/>
                       </IconButton>
                     </Tooltip>
                     <IconButton
@@ -1065,14 +1135,15 @@ const ReportBuilder = () => {
                         color: isPreview ? 'primary.main' : 'text.secondary',
                         '&:hover': {
                           backgroundColor: 'transparent',
-                          color: 'primary.main'
-                        }
+                          color: 'primary.main',
+                        },
                       }}
                       onClick={() => setIsPreview(prev => !prev)}
                     >
-                      <PreviewOutlined />
+                      <PreviewOutlined/>
                     </IconButton>
                   </Box>
+
                 </Box>
 
                 {/* Actions row: Just the Add Computed Field button aligned right */}
@@ -1085,22 +1156,22 @@ const ReportBuilder = () => {
                     borderRadius: '8px',
                     display: 'flex',
                     justifyContent: 'space-between',
-                    backgroundColor: 'background.paper'
+                    backgroundColor: 'background.paper',
                   }}
                 >
                   <Button
-                    variant='outlined'
-                    color='primary'
+                    variant="outlined"
+                    color="primary"
                     onClick={() => {
-                      console.log(breadcrumbs)
+                      console.log(breadcrumbs);
                       handleToggleDialogs('expression')
                     }}
                   >
                     Add Computed Field
                   </Button>
                   <Button
-                    variant='outlined'
-                    color='primary'
+                    variant="outlined"
+                    color="primary"
                     onClick={() => {
                       setSelectedRow(null) // reset edit
                       handleToggleDialogs('routing')
@@ -1109,38 +1180,56 @@ const ReportBuilder = () => {
                     Add Routing
                   </Button>
                   <Button
-                    variant='outlined'
-                    color='primary'
+                    variant="outlined"
+                    color="primary"
                     onClick={() => {
-                      console.log(breadcrumbs)
+                      console.log(breadcrumbs);
                       handleToggleDialogs('params')
                     }}
                   >
                     Global Parameters
                   </Button>
-                  <Button variant='outlined' color='secondary' onClick={() => handleToggleDialogs('fixedFilter')}>
+                  <Button
+                    variant="outlined"
+                    color="secondary"
+                    onClick={() => handleToggleDialogs('fixedFilter')}
+                  >
                     Fixed Filter
                   </Button>
+                  <Button
+                    variant="outlined"
+                    color="info"
+                    onClick={() => handleToggleDialogs('columnConfig')}
+                  >
+                    Column Configurator
+                  </Button>
+                  <Button
+                    variant="outlined"
+                    color="warning"
+                    onClick={() => handleToggleDialogs('settings')}
+                  >
+                    Report Settings
+                  </Button>
                   {/* Hidden input for uploading builder model */}
                   <input
-                    type='file'
-                    accept='application/json,.json'
+                    type="file"
+                    accept="application/json,.json"
                     ref={fileInputRef}
-                    style={{ display: 'none' }}
+                    style={{display: 'none'}}
                     onChange={handleFileChange}
                   />
                   <Button
-                    variant='outlined'
-                    color='secondary'
-                    startIcon={<CloudDownloadOutlined />}
+                    variant="outlined"
+                    color="secondary"
+                    startIcon={<CloudDownloadOutlined/>}
                     onClick={handleDownloadModel}
                   >
                     Download Model
                   </Button>
                   <Button
-                    variant='outlined'
-                    color='secondary'
-                    startIcon={<CloudUploadOutlined />}
+                    variant="outlined"
+                    color="secondary"
+                    startIcon={<CloudUploadOutlined/>}
                     onClick={handleUploadClick}
                   >
                     Upload Model
@@ -1148,35 +1237,31 @@ const ReportBuilder = () => {
                 </Box>
               </Box>
 
-              {!isPreview ? (
-                builderModel.isRaw ? (
-                  <Box>
-                    <SqlEditor builderModel={builderModel} setBuilderModel={setBuilderModel} />
-                  </Box>
-                ) : (
-                  <Box>
-                    <DragDropContext onDragEnd={handleDragEnd}>
-                      {renderSelectedFields(builderModel.selectedFields)}
-                    </DragDropContext>
-                  </Box>
-                )
-              ) : (
+              {!isPreview ? builderModel.isRaw ?
+                <Box><SqlEditor builderModel={builderModel} setBuilderModel={setBuilderModel}/></Box> :
                 <Box>
-                  <SGrid builderModel={builderModel} />
-                </Box>
-              )}
+                  <DragDropContext onDragEnd={handleDragEnd}>
+                    {renderSelectedFields(builderModel.selectedFields)}
+                  </DragDropContext>
+                </Box> : <Box>
+                <SGrid
+                  builderModel={builderModel}
+                  filter={builderModel.filter}
+                  extraCols={columnConfigResult?.extraCols ?? []}
+                  columnsConfig={columnConfigResult?.columnsConfig ?? []}
+                  updateRef={updateRef}
+                />
+              </Box>}
             </Box>
           </Grid>
-          {!isPreview && (
-            <Box
-              sx={{ mt: 4, backgroundColor: '#fff', borderRadius: '12px', p: '10px', border: '1px solid lightgrey' }}
-            >
-              <Typography variant='h6' gutterBottom>
+          {!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'>
+                <Typography variant="body2" color="text.secondary">
                   No routing settings defined yet.
                 </Typography>
               )}
@@ -1189,37 +1274,37 @@ const ReportBuilder = () => {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'space-between',
-                        width: '100%'
+                        width: '100%',
                       }}
                     >
                       {/* Left side: routing info */}
                       <Box>
-                        <Typography variant='body1'>
-                          {route.fieldName} → {route.pattern}
+                        <Typography variant="body1">
+                          {route.name ? `${route.name} (${route.fieldName})` : route.fieldName} → {route.type === 'Filter' ? `Page: ${route.pageId}` : route.pattern}
                         </Typography>
-                        <Typography variant='body2' color='text.secondary'>
-                          Params: {route.params.join(', ')}
+                        <Typography variant="body2" color="text.secondary">
+                          Params: {(route.params || []).join(', ')}
                         </Typography>
                       </Box>
 
                       {/* Right side: action buttons */}
-                      <Box sx={{ display: 'flex', gap: 1 }}>
+                      <Box sx={{display: 'flex', gap: 1}}>
                         <Button
-                          size='small'
+                          size="small"
                           onClick={() => {
-                            setSelectedRow({ ...route, index: idx })
+                            setSelectedRow({...route, index: idx})
                             handleToggleDialogs('routing')
                           }}
                         >
                           Update
                         </Button>
                         <Button
-                          size='small'
-                          color='error'
+                          size="small"
+                          color="error"
                           onClick={() =>
-                            setBuilderModel(prev => ({
+                            setBuilderModel((prev) => ({
                               ...prev,
-                              routingSettings: prev.routingSettings.filter((_, i) => i !== idx)
+                              routingSettings: prev.routingSettings.filter((_, i) => i !== idx),
                             }))
                           }
                         >
@@ -1230,9 +1315,40 @@ const ReportBuilder = () => {
                   </ListItem>
                 ))}
               </List>
-            </Box>
-          )}
+
+            </Box>}
+
+          {!isPreview && columnConfigResult &&
+            <Box sx={{mt: 4, backgroundColor: '#fff', borderRadius: '12px', p: '10px', border: '1px solid lightgrey'}}>
+              <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2}}>
+                <Typography variant="h6">
+                  Column Configurator Result (Testing)
+                </Typography>
+                <Button
+                  size="small"
+                  color="error"
+                  onClick={() => setColumnConfigResult(null)}
+                >
+                  Clear
+                </Button>
+              </Box>
+              <Box
+                component="pre"
+                sx={{
+                  p: 2,
+                  bgcolor: 'grey.900',
+                  color: 'grey.100',
+                  borderRadius: 1,
+                  overflow: 'auto',
+                  maxHeight: 400,
+                  fontSize: '0.875rem'
+                }}
+              >
+                {JSON.stringify(columnConfigResult, null, 2)}
+              </Box>
+            </Box>}
         </Box>
+
       </Box>
 
       <Dialog
@@ -1240,46 +1356,35 @@ const ReportBuilder = () => {
         onClose={() => {
           handleToggleDialogs('expression')
           setSelectedRow(null)
-          setSelectedCollection(null)
-        }}
-        maxWidth='lg'
-        fullWidth
-      >
+          setSelectedCollection(null);
+        }} maxWidth="lg" fullWidth>
         <ExpressionEditor
           oldValue={selectedRow}
           addComputedField={handleAddComputedField}
           handleUpdateComputedField={handleUpdateComputedField}
           selectionParams={builderModel.selectionParams}
-          setSelectionParams={params => setBuilderModel(prev => ({ ...prev, selectionParams: params }))}
+          setSelectionParams={(params) =>
+            setBuilderModel(prev => ({...prev, selectionParams: params}))
+          }
         />
       </Dialog>
-      <Dialog
-        open={openDialogs.params}
-        onClose={() => {
-          handleToggleDialogs('params')
-          setSelectedRow(null)
-        }}
-        maxWidth='lg'
-        fullWidth
-      >
+      <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
-      >
+      <Dialog open={openDialogs.save} onClose={() => {
+        handleToggleDialogs('save')
+      }} maxWidth="lg" fullWidth>
         <ReportBuilderSaveForm
           builderMetadata={builderMetadata}
           setBuilderMetadata={setBuilderMetadata}
@@ -1296,15 +1401,18 @@ const ReportBuilder = () => {
         scroll='body'
         // onClose={() => handleToggleDialogs('CustomFilter')}
       >
-        <CustomFilterDialog
-          handleToggleDialogs={handleToggleDialogs}
-          Filter={[...(builderModel.filter?.LocalTfilter || [])]}
-          handleFilterChange={handleFilterChange}
-          className={builderModel?.reportSource?.fullName}
-          LocalFilter={false}
-          selectTFilter={[]}
-          selectParamsMeta={builderModel.selectionParams}
-        />
+        {openDialogs.filter && builderModel.reportSource && (
+          <CustomFilterDialog
+            handleToggleDialogs={handleToggleDialogs}
+            Filter={builderModel.filter?.LocalTfilter || []}
+            customFilterCode={builderModel.filter?.customFilterCode}
+            handleFilterChange={handleFilterChange}
+            className={builderModel?.reportSource?.fullName}
+            LocalFilter={false}
+            selectTFilter={[]}
+            // selectParamsMeta={builderModel.selectionParams}
+          />
+        )}
       </Dialog>
       <Dialog
         fullWidth
@@ -1316,7 +1424,7 @@ const ReportBuilder = () => {
         <FixedFilterDialog
           className={builderModel?.reportSource?.fullName}
           value={builderModel?.filter?.fixedTFilter || []}
-          onSave={list => {
+          onSave={(list) => {
             setBuilderModel(prev => ({
               ...prev,
               filter: {
@@ -1328,11 +1436,16 @@ const ReportBuilder = () => {
           onClose={() => handleToggleDialogs('fixedFilter')}
         />
       </Dialog>
-      <Dialog open={openDialogs.routing} onClose={() => handleToggleDialogs('routing')} maxWidth='sm' fullWidth>
+      <Dialog
+        open={openDialogs.routing}
+        onClose={() => handleToggleDialogs('routing')}
+        maxWidth="sm"
+        fullWidth
+      >
         <RoutingSettingDialog
-          value={selectedRow || { fieldName: '', pattern: '', params: [] }}
-          onChange={newValue => {
-            setBuilderModel(prev => {
+          value={selectedRow || {fieldName: '', pattern: '', params: []}}
+          onChange={(newValue) => {
+            setBuilderModel((prev) => {
               const clone = [...(prev.routingSettings || [])]
               if (selectedRow?.index != null) {
                 // Update existing
@@ -1341,21 +1454,66 @@ const ReportBuilder = () => {
                 // Add new
                 clone.push(newValue)
               }
-              return { ...prev, routingSettings: clone }
+              return {...prev, routingSettings: clone}
             })
           }}
           onClose={() => handleToggleDialogs('routing')}
         />
       </Dialog>
+      <FormattingSettingsDialog
+        open={openDialogs.formatting}
+        onClose={() => setOpenDialogs(prev => ({...prev, formatting: false}))}
+        field={selectedRow ? {
+          ...selectedRow,
+          parentFields: builderModel.selectedFields.filter(f => f.path !== selectedRow.path && !f.children)
+        } : null}
+        onSave={(formatting) => {
+          setBuilderModel(prev => {
+            const updateNode = (node) => {
+              if (node.propertyType === 'Collection') {
+                return {...node, children: (node.children || []).map(updateNode)};
+              }
+              if (node.path === selectedRow.path) {
+                return {...node, formatting};
+              }
+              return node;
+            };
+            return {
+              ...prev,
+              selectedFields: prev.selectedFields.map(updateNode)
+            };
+          });
+        }}
+      />
+      <ColumnConfiguratorDialog
+        open={openDialogs.columnConfig}
+        onClose={() => handleToggleDialogs('columnConfig')}
+        onResult={(result) => {
+          console.log('Column Configuration Result:', result);
+          setColumnConfigResult(result);
+          handleToggleDialogs('columnConfig');
+        }}
+      />
+      <ReportSettingsDialog
+        open={openDialogs.settings}
+        onClose={() => handleToggleDialogs('settings')}
+        settings={builderModel.settings}
+        onSave={(newSettings) => {
+          setBuilderModel(prev => ({
+            ...prev,
+            settings: newSettings
+          }));
+        }}
+      />
     </div>
   )
-}
+};
 
 ReportBuilder.acl = {
   action: 'view',
-  subject: PermissionsSubjects.ReportBuilderPage
-}
+  subject: PermissionsSubjects.ReportBuilder
+};
 
-ReportBuilder.getLayout = page => <BlankLayout>{page}</BlankLayout>
+ReportBuilder.getLayout = (page) => <BlankLayout>{page}</BlankLayout>;
 
-export default ReportBuilder
+export default ReportBuilder;