robobyte-front-builder 1.0.0

package/src/views/genericTable/SGrid.js

@@ -0,0 +1,2168 @@
+/**
+ * SGrid: Server-side data grid wrapper around AG Grid for Mazajak
+ *
+ * What this component does
+ * - Renders an AG Grid in server-side row model mode with optional grouping, pivoting, and aggregation.
+ * - Fetches data from ReportBuilderEndpoints.Post.GenericGet for grouped, streamed, and paged requests.
+ * - Applies a unified filtering system (Tfilter) coming from multiple sources: external props, builder model, and local UI state.
+ * - Supports a global quick search term that behaves smartly for numeric vs. text fields.
+ * - Manages templates (save/load) for column layout, filters, and settings.
+ * - Exports data to PDF/Excel with current columns, order, and applied filters.
+ * - Integrates with dashboard/report builder contexts and honors time zone and formatting.
+ *
+ * Key props of interest
+ * - builderData: Provides selected fields, initial filters, and meta used to construct column definitions and filters.
+ * - filter: External filter object merged with local filters (Filter.LocalTfilter) and builder filters.
+ * - groupBy: Initial grouping configuration for server-side grouping.
+ * - actions: Optional cell renderer for Actions column.
+ * - refresh / externalTimer: Triggers to refresh the grid’s data.
+ * - fixedTIncludes: Extra includes to send with requests (controls data shape/joins on server).
+ * - reportTitle, pageName, uniqueIdPath, columnsConfig: Presentation/behavior options.
+ *
+ * Data flow overview
+ * 1) Column definitions are derived from builderData.selectedFields (+ extraCols) and user templates.
+ * 2) AG Grid is initialized with server-side datasource; getRowsFromApi constructs the request payload:
+ *    - Merges filters in this order: LocalTfilter (component state) + builder filters + fixed filters from props.
+ *    - Adds search term filters based on searchTermRef and searchFieldsRef metadata.
+ *    - Translates group/pivot/value columns, sort model, and pagination into the expected backend format.
+ * 3) Data is requested via ReportBuilderEndpoints.Post.GenericGet. Responses may contain rows and aggregations.
+ * 4) Grid updates, status bar shows counts/aggregations, and export functions can read current viewer state.
+ *
+ * Quick search behavior (important)
+ * - searchTermRef holds the current string. If it parses to a finite number, we search numeric (Int) fields with a numeric value.
+ * - Otherwise, we search only non-Int fields using the raw string. This prevents type errors on the backend and improves matches.
+ * - searchFieldsRef is metadata describing which fields are searchable and their propertyType.
+ *
+ * Filters (Tfilter)
+ * - Filter object has LocalTfilter for user-added filters. Builder filters and fixed filters are merged with it.
+ * - Each filter item typically has: { path, friendlyName, value, method, dtoClassName, modelClassName, afterSelect }.
+ * - Grouping adds implicit Equals filters for the currently expanded group keys when requesting child levels.
+ *
+ * Exports
+ * - PDF export uses current visible columns (in order) and transformed cell values, includes a summary of active filters.
+ * - Excel export is supported (see FileExcelOutline usage) to dump the current dataset.
+ *
+ * Implementation notes
+ * - Uses themeQuartz from ag-grid-community with a custom accent color.
+ * - Maintains gridApi refs to read column state, sorting, and to trigger refreshServerSide.
+ * - Be cautious when modifying getRowsFromApi: it is responsible for composing the exact backend payload.
+ * - When adjusting quick search logic, keep numeric vs. text handling aligned with backend expectations.
+ */
+// ** React Imports
+// ** Next Import
+
+// ** MUI Imports
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+
+// ** Icons Imports
+// ** Store Imports
+// ** Custom Components Imports
+import {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'
+import {Endpoints, Services} from 'src/services/Endpoints'
+import {
+  Autocomplete, Checkbox,
+  CircularProgress,
+  Dialog,
+  FormControl, FormControlLabel,
+  IconButton,
+  MenuItem,
+  Select,
+  TextField,
+  Tooltip,
+  Chip,
+  Stack,
+  Popper,
+  Paper,
+  List,
+  ListItemButton,
+  ClickAwayListener
+} from '@mui/material'
+import {AgGridReact} from "ag-grid-react";
+import {Edit, FilterAlt, PrintOutlined, RefreshOutlined, Save, SaveAs, Close} from "@mui/icons-material";
+import {getRandomInt, Helper} from "services/helper/helper";
+import PostService from 'services/PostService'
+import handleChange from 'services/helper/handleChange'
+import {DotsVerticalCircleOutline, FileExcelOutline} from 'mdi-material-ui'
+import AddTemplateDialog from './template/addTemplate'
+import UpdateService from 'services/UpdateService'
+import {useRouter} from 'next/router'
+import {SystemContext} from 'context/SystemContext'
+import {AuthContext} from 'context/AuthContext'
+import moment from "moment-timezone"
+import numeral from 'numeral'
+import CustomFilterDialog from "views/customFilter/CustomFilterDialog";
+import CustomStatusBar from "views/genericTable/statusBar/rowCountStatusBar";
+import StreamService from "services/StreamService";
+import {themeQuartz} from 'ag-grid-community';
+import {ReportBuilderEndpoints} from "services/Endpoints/ReportBuilderEndpoints";
+import {debounce} from "lodash";
+import jsPDF from "jspdf";
+import "jspdf-autotable";
+import arabicFontBase64 from "../../../public/fonts/font";
+import {FilterFormat} from "services/helper/FilterFormat";
+
+// ** Utils Import
+
+// ** Actions Imports
+
+// ** Custom Components Imports
+const defaultFinalRequest = {
+  groupBy: null,
+  endpoint: null,
+  filter: {},
+  params: {}
+}
+const SGrid = props => {
+  // ** State
+  const appContext = useContext(SystemContext);
+  const imageBaseUrl = appContext?.settings?.imagesStorageServer;
+  const agTheme = themeQuartz
+    .withParams({
+      accentColor: "#FF1185"
+    });
+
+  const {
+    externalTimer,
+    isSingle,
+    minimized,
+    setData,
+    builderModel,
+    expireReport,
+    filter: externalFilter,
+    actions,
+    refresh,
+    height,
+    extraCols,
+    setOutGridApi,
+    setEventRowSelected,
+    pageName,
+    paramsPage,
+    fixedTIncludes,
+    groupBy,
+    noPurge,
+    reportTitle,
+    uniqueIdPath,
+    columnsConfig,
+    dataAsObject = false
+  } = props
+  const groupEndPoint = ReportBuilderEndpoints.Post.GenericGet;
+  const streamEndPoint = ReportBuilderEndpoints.Post.GenericGet;
+  const pagedEndPoint = ReportBuilderEndpoints.Post.GenericGet;
+  const [responseType, setResponseType] = useState()
+  const [pagedAgg, setPagedAgg] = useState()
+  const [colDefs, setColDefs] = useState([])
+  const [gridApi, setGridApi] = useState(null)
+  const [includes, setIncludes] = useState([])
+  const [isPagination, setIsPagination] = useState(true)
+  const [templates, setTemplates] = useState([])
+  const [timerValue, setTimerValue] = useState(0)
+  const [localRefresh, setLocalRefresh] = useState(false)
+  const [selectedTemplate, setSelectedTemplate] = useState(null)
+  const [localClasName, setLocalClasName] = useState(null)
+  const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const router = useRouter()
+  const authValues = useContext(AuthContext)
+  const [isTemplateEditing, setIsTemplateEditing] = useState(false)
+  const [isDownloading, setIsDownloading] = useState(false)
+  const [finalRequestObject, setFinalRequestObject] = useState(defaultFinalRequest)
+  const [selectedFields, setSelectedFields] = useState([])
+  const [selectParams, setSelectParams] = useState([])
+  const [selectTFilter, setSelectTFilter] = useState([])
+  const [builderTFilter, setBuilderTFilter] = useState([])
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedSearchObjects, setSelectedSearchObjects] = useState([]);
+  const [tRouting, setTRouting] = useState([]);
+  const [builderData, setBuilderData] = useState(null);
+
+  // Search grouping name for OR groups
+  const SEARCH_GROUP_NAME = 'searchGroup';
+
+  // UI refs/states for search popover
+  const searchInputRef = useRef(null);
+  const [searchPopoverOpen, setSearchPopoverOpen] = useState(false);
+  const [searchPopoverAnchor, setSearchPopoverAnchor] = useState(null);
+
+  const searchTermRef = useRef('');
+  const searchFieldsRef = useRef([]); // metadata only, no value
+  const lastRowRef = useRef({});
+
+  const [Filter, setFilter] = useState({
+    Tfilter: [],
+    LocalTfilter: [],
+  })
+  const [openDialogs, setOpenDialogs] = useState({
+    addTemplate: false,
+    CustomFilter: false,
+  })
+  const getDefaultColDefs = () => {
+    return [
+      {
+        field: 'Actions',
+        sortable: false,
+        width: 60,
+        pinned: 'left',
+        enableRowGroup: false,
+        cellRenderer: (params) => {
+          if (params.node.group) {
+            return <Box sx={{display: 'flex', alignItems: 'center'}}>
+              <IconButton
+                sx={{color: 'primary.light'}}
+                onClick={() => {
+                  const groupKeys = getParentKeys(params.node.parent)
+                  groupKeys.push(params.node.key)
+                  params.api.refreshServerSide({purge: !noPurge, route: groupKeys});
+                }}
+              >
+                <RefreshOutlined/>
+              </IconButton>
+            </Box>
+          }
+          if (actions != null) return actions(params)
+        }
+      },
+    ]
+  }
+  const autoGroupColumnDef = {
+    headerName: 'My Group',
+    sortable: false,
+    minWidth: 220,
+  }
+
+  const applyValueFormatter = (formatterString) => {
+    return function (params) {
+      return new Function("params", "moment", "userTimeZone", "enumTrans", "numeral", formatterString)(
+        params,
+        moment,
+        userTimeZone,
+        Helper.enumTrans,
+        numeral,
+      );
+    };
+  };
+
+  const handlePDFExport = async () => {
+    if (!gridApi) return;
+
+    // Build filter summary from current filters
+    const activeTFilters = Filter?.LocalTfilter ?? [];
+    const activeFixedTFilter = builderData?.filter?.LocalTfilter ?? []
+    const activeFilters = [...activeFixedTFilter, ...activeTFilters]
+    const filterSummary = activeFilters.map(f => {
+      const field = f.friendlyName.replace('>', '.') || f.path;
+      const method = f.method || "=";
+      let value = f.value;
+
+      // Handle special types
+      if (Array.isArray(value)) {
+        value = value.map(v => (v?.name ?? v)).join(", ");
+      } else if (typeof value === "object" && value?.name) {
+        value = value.name;
+      } else if (value == null || value === "") {
+        value = "—";
+      }
+
+      return `${field} ${method} ${value}`;
+    }).join(" | ");
+
+    // 1. Get visible columns in current AG Grid order
+    const colState = gridApi.getColumnState();
+    let orderedVisibleCols = colState
+      .filter(c => !c.hide)
+      .map(c => {
+        if (c.colId === "ag-Grid-AutoColumn") {
+          return {...autoGroupColumnDef, field: "__autoGroup"};
+        }
+        // ✅ handle groupCount separately
+        if (c.colId === "IZ_groupCount") {
+          return {field: "IZ_groupCount", headerName: "Group Count"};
+        }
+        return colDefs.find(cd => cd.field === c.colId);
+      })
+      .filter(Boolean);
+
+// ✅ 2. Handle pivot mode
+    if (gridApi.isPivotMode()) {
+      const pivotResultCols = gridApi.getPivotResultColumns();
+      if (pivotResultCols && pivotResultCols.length > 0) {
+        pivotResultCols.forEach(pivotCol => {
+          orderedVisibleCols.push({
+            field: pivotCol.getColId(),
+            headerName: pivotCol.getColDef().headerName,
+            isPivot: true,
+          });
+        });
+      }
+    }
+
+// reverse for RTL
+    orderedVisibleCols = orderedVisibleCols.reverse();
+
+    // 2. Get rows
+    const rows = gridApi.getDisplayedRowCount()
+      ? Array.from({length: gridApi.getDisplayedRowCount()})
+        .map((_, i) => gridApi.getDisplayedRowAtIndex(i)?.data)
+      : [];
+
+    // 3. Setup jsPDF
+    const doc = new jsPDF("landscape");
+    doc.addFileToVFS("NotoSansArabic-Regular.ttf", arabicFontBase64);
+    doc.addFont("NotoSansArabic-Regular.ttf", "NotoSansArabic", "normal");
+    doc.setFont("NotoSansArabic");
+
+    doc.setFontSize(14);
+    if (reportTitle) {
+      doc.text(String(reportTitle), doc.internal.pageSize.getWidth() - 14, 15, {
+        align: "right",
+      });
+    }
+    // ✅ Add filters summary if exists
+    if (filterSummary) {
+      doc.setFontSize(9);
+      doc.setTextColor(100); // gray
+      const lines = doc.splitTextToSize(filterSummary, doc.internal.pageSize.getWidth() - 30);
+      doc.text(lines, doc.internal.pageSize.getWidth() - 14, 25, {align: "right"});
+    }
+    // 4. Build header
+    const head = [
+      orderedVisibleCols.map(c =>
+        /image|logo|url/i.test(c.field) ? "" : (c.headerName)
+      )
+    ];
+
+    // 5. Build body
+    const body = await Promise.all(
+      rows.map(async row =>
+        Promise.all(
+          orderedVisibleCols.map(async c => {
+            if (c.field === "__autoGroup") {
+              return row?.[gridApi.getRowGroupColumns()[0]?.getColId()] ?? "";
+            }
+            if (c.field === "IZ_groupCount") {
+              const val = row?.groupCount ?? row?.IZ_groupCount ?? "";
+              return val ? numeral(Number(val)).format("0,0") : "";
+            }
+
+            // ✅ Pivot values
+            if (c.isPivot) {
+              const val = row?.[c.field];
+              return val == null ? "" : numeral(Number(val).toFixed(2)).format("0,0.00");
+            }
+
+            // normal values
+            const val = row?.[c.field] ?? "";
+            const isImageField = /image|logo|url/i.test(c.field);
+            if (isImageField && val) {
+              const img = await loadImage(val);
+              if (img) return {isImage: true, image: img};
+              return "";
+            }
+            return String(val);
+          })
+        )
+      )
+    );
+
+    // 6. Render table
+    doc.autoTable({
+      head,
+      body,
+      startY: filterSummary ? 35 : 25,  // push table down if filters exist
+      styles: {
+        font: "NotoSansArabic",
+        fontSize: 10,
+        halign: "right",
+        valign: "middle"
+      },
+      headStyles: {
+        fillColor: [63, 81, 181],
+        textColor: [255, 255, 255],
+        halign: "right",
+        valign: "middle"
+      },
+      bodyStyles: {
+        halign: "right",
+        valign: "middle"
+      },
+      alternateRowStyles: {fillColor: [245, 245, 245]},
+
+      didParseCell: (data) => {
+        // ✅ Handle images
+        if (data.cell.raw?.isImage) {
+          data.cell.styles.minCellHeight = 18;
+          data.cell.text = [];
+          return;
+        }
+
+        const val = data.cell.raw ?? data.cell.text?.[0];
+
+        // ⛔ Ignore falsy / empty
+        if (val == null || val === "") return;
+
+        // ✅ PURE number check (no letters or spaces)
+        const isPureNumber =
+          typeof val === "number" ||
+          (typeof val === "string" && /^[+-]?\d+(\.\d+)?$/.test(val.trim()));
+
+        if (isPureNumber) {
+          const num = parseFloat(val);
+          if (!isNaN(num)) {
+            data.cell.text = [numeral(num.toFixed(2)).format("0,0.00")];
+          }
+          return;
+        }
+
+        // ✅ STRICT date check (ISO, yyyy-mm-dd, or recognizable formats)
+        const isIsoDate =
+          typeof val === "string" &&
+          /^\d{4}-\d{2}-\d{2}(T.*)?$/.test(val.trim());
+
+        const isLikelyDate =
+          isIsoDate ||
+          moment(val, [
+            "YYYY-MM-DD",
+            "DD/MM/YYYY",
+            "MM/DD/YYYY",
+            "YYYY/MM/DD",
+            "DD-MM-YYYY",
+            "MM-DD-YYYY",
+          ], true).isValid();
+
+        if (isLikelyDate) {
+          const m = moment.utc(val).tz(userTimeZone);
+          data.cell.text = [m.format("DD/MM/YYYY - A hh:mm")];
+          return;
+        }
+
+        // ✅ Otherwise: leave text as is
+      },
+
+      didDrawCell: (data) => {
+        // ✅ Draw images
+        if (data.cell.raw?.isImage) {
+          const {base64, mimeType} = data.cell.raw.image;
+          if (base64) {
+            const format = mimeType.includes("jpeg") ? "JPEG" : "PNG";
+            const size = 12;
+            const x = data.cell.x + (data.cell.width - size) / 2;
+            const y = data.cell.y + (data.cell.height - size) / 2;
+            doc.addImage(base64, format, x, y, size, size);
+          }
+        }
+      },
+    });
+
+
+// 7. Print Aggregations if available
+    if (pagedAgg && pagedAgg.length > 0) {
+      const aggRow = pagedAgg[0];
+
+      const aggHead = [
+        orderedVisibleCols.map(c => /image|logo|url/i.test(c.field) ? "" : (c.headerName || ""))
+      ];
+      const aggBody = [
+        orderedVisibleCols.map(c => {
+          if (c.field === "__autoGroup") return "";
+          if (c.field === "IZ_groupCount") {
+            const val = aggRow["groupCount"] ?? aggRow["IZ_groupCount"];
+            return val ? numeral(Number(val)).format("0,0") : "";
+          }
+          const val = aggRow[c.field];
+          if (val == null) return "";
+          if (typeof val === "number" && !isNaN(val)) {
+            return numeral(val.toFixed(2)).format("0,0.00");
+          }
+          return String(val);
+        })
+      ];
+
+      doc.autoTable({
+        head: aggHead,
+        body: aggBody,
+        startY: doc.lastAutoTable.finalY + 10,
+        styles: {
+          font: "NotoSansArabic",
+          fontSize: 10,
+          halign: "right",
+          valign: "middle",
+        },
+        headStyles: {
+          fillColor: [33, 150, 243],
+          textColor: [255, 255, 255],
+          halign: "right",
+        },
+        bodyStyles: {
+          halign: "right",
+        },
+      });
+    }
+
+
+    // 7. Footer
+    const date = new Date().toLocaleString("ar-IQ");
+    doc.setFontSize(8);
+    doc.text(
+      `تاريخ الإنشاء: ${date}`,
+      doc.internal.pageSize.getWidth() - 14,
+      doc.internal.pageSize.height - 10,
+      {align: "right"}
+    );
+
+    doc.save("report.pdf");
+  };
+
+// Utility to fetch + encode image
+  async function loadImage(val) {
+    try {
+      const imageUrl = `${imageBaseUrl}/${val}`;
+      const resp = await fetch(imageUrl);
+      const blob = await resp.blob();
+      const mimeType = blob.type || "image/png";
+
+      return await new Promise(resolve => {
+        const reader = new FileReader();
+        reader.onload = () => resolve({base64: reader.result, mimeType});
+        reader.readAsDataURL(blob);
+      });
+    } catch (e) {
+      console.warn("Image load failed:", val, e);
+      return null;
+    }
+  }
+
+
+  const processColumns = (columns) => {
+    return columns.map((col) => {
+      let processedColumn = {
+        ...col,
+        valueFormatter: col.valueFormatter
+          ? applyValueFormatter(col.valueFormatter)
+          : undefined,
+      };
+
+      // If the column has children, process them recursively
+      if (col.children && Array.isArray(col.children)) {
+        processedColumn.children = processColumns(col.children);
+      }
+
+      return processedColumn;
+    });
+  };
+
+  async function handleResetColsToStudio() {
+    try {
+      setBuilderTFilter(builderData?.filter?.Tfilter ?? [])
+      console.log(builderModel)
+      const allowedAggFuncs = ["sum", "avg", "min", "max"];
+      const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      let defaultCols = getDefaultColDefs()
+      const routingSettings = builderData?.routingSettings || [];
+
+      setTRouting(routingSettings)
+      // Build visible colDefs: exclude collection containers and any leaf field marked as hidden
+      let localColDefs = builderData.selectedFields
+        .filter(x => x.propertyType != 'Collection' && x.hidden !== true)
+        .map(col => {
+
+          const propertyType = col.propertyType ?? col.field?.propertyType;
+          const propPath = col.headerName ?? col.path;
+          const fieldName = col.headerName ?? col.path.replace(/\./g, '_');
+          const externalColConfig = (columnsConfig ?? []).find(x => x.field === fieldName)?.config ?? {}
+          const headerName = col.title ?? col.headerName ?? col.path;
+          const hasRouting = routingSettings.some(r => r.fieldName === fieldName);
+          let valueFormatter = null;
+          // Handle valueFormatter as string
+          if (propertyType === 'DateTime') {
+            if (propPath.toLowerCase().endsWith('time')) {
+              valueFormatter =
+                `return params?.value != null ? moment.utc(params.value).tz('${userTimeZone}').format('LT') : ''`;
+            } else {
+              valueFormatter =
+                `return params?.value != null ? moment.utc(params.value).tz('${userTimeZone}').format('DD/MM/yyyy hh:mm A') : ''`;
+            }
+          }
+
+          if (propertyType === 'Double') {
+            valueFormatter =
+              `return params?.value != null ? numeral(params.value.toFixed(2)).format('0,0') : ''`;
+          }
+
+          if (propertyType === 'Enum') {
+            const enumName = col.field?.enumName || col.field?.propertyName || 'Enum';
+            valueFormatter =
+              `return params?.value != null ? enumTrans('${enumName}', params.value) : ''`;
+          }
+
+          const isNumericAgg = (propertyType === 'Int' || propertyType === 'Double') &&
+            !col.field?.path?.toLowerCase().endsWith('id');
+
+          const isImage = col.image === true;
+          return {
+            field: fieldName,
+            headerName: headerName,
+            enableRowGroup: true,
+            sortable: true,
+            enablePivot: true,
+            enableValue: isNumericAgg,
+            cellRenderer: isImage ? 'imageCell' : (hasRouting ? 'routingCell' : (propertyType === 'Bool'
+              ? "agCheckboxCellRenderer"
+              : null)),
+            width: isImage ? 90 : undefined,
+            cellStyle: isImage ? {display: 'flex', alignItems: 'center', justifyContent: 'center'} : undefined,
+            allowedAggFuncs: isNumericAgg ? allowedAggFuncs : [],
+            valueFormatter: valueFormatter
+              ? applyValueFormatter(valueFormatter)
+              : undefined,
+            ...externalColConfig
+          };
+        });
+
+
+      const localSelectedFields = trimSelectedFields(builderData.selectedFields);
+
+
+      setSelectedFields(localSelectedFields);
+
+      const localSelectTFilter = builderData.selectedFields.filter(x => x.type === 'computed').map(x => ({
+        friendlyName: x.title,
+        path: x.path,
+        afterSelect: true,
+        propertyType: x.propertyType,
+        enumName: x.enumName
+
+      }))
+      setSelectTFilter(localSelectTFilter)
+      const searchGroupName = 'searchGroup';
+      const localSearchFilterFields = builderData?.searchFilter ?? [];
+
+      const localSearchFilter = localSearchFilterFields.map(f => ({
+        path: f.path,
+        value: '',
+        isWithinCollection: f.isWithinCollection ?? false,
+        collectionMethod: f.isWithinCollection ? 'Any' : null,
+        method: f.propertyType === 'String' ? 'Contains' : 'Equals',
+        collectionPath: getCollectionPath(f.fullPath, f.path, f.isWithinCollection),
+        // isWithinOrGroup: true,
+        // orGroupName: searchGroupName,
+        propertyType: f.propertyType,
+        friendlyName: builderData.selectedFields.find(x => x.path === f.path)?.title ?? f.path,
+      }))
+      searchFieldsRef.current = localSearchFilter;
+      const localSelectParams = builderData.selectionParams.map((x, index) => ({
+        id: index,
+        PropertyType: x.propertyType,
+        value: x.value
+      }))
+      setSelectParams(localSelectParams);
+      if (extraCols != null) {
+        localColDefs = [...extraCols, ...localColDefs];
+      }
+      localColDefs = [...localColDefs, ...defaultCols];
+      setColDefs([
+        {
+          field: 'IZ_groupCount',
+          headerName: 'Group Count',
+          sortable: true,
+          hide: true,
+          valueGetter: (params) => params.data?.groupCount
+        },
+        ...localColDefs
+      ]);
+    } catch (error) {
+      console.error('Error in handleResetColsToStudio:', error);
+    }
+  }
+
+  function getCollectionPath(fullPath, path, isWithinCollection) {
+    if (!isWithinCollection) return null;
+    if (typeof fullPath !== 'string' || typeof path !== 'string') return null;
+
+    // 1) remove the first segment (e.g., "Orders." from "Orders.Items.Product.Name")
+    let mid = fullPath.replace(/^[^.]+\.?/, "");
+
+    // 2) remove trailing `path` (with optional preceding dot)
+    const esc = s => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const tail = new RegExp(`(?:\\.)?${esc(path)}$`);
+    mid = mid.replace(tail, "");
+
+    // clean up stray leading/trailing dots
+    mid = mid.replace(/^\.|\.$/g, "");
+
+    return mid || null;
+  }
+
+  async function handleGetRawColumns(rawSql) {
+    try {
+      let response = null
+
+      response = await Services.PostService(Endpoints.ReportBuilder.Post.GetRawColumns, false, {
+        rawSql: rawSql
+      }, {})
+
+      if (response) {
+        let defaultCols = getDefaultColDefs()
+        let tableCols = [...response.data]
+        tableCols = processColumns(tableCols)
+        let localColDefs = [...tableCols, ...defaultCols]
+        if (extraCols != null) {
+          localColDefs = [...extraCols, ...localColDefs]
+        }
+        const localSelectTFilter = response.data.map(x => ({
+          friendlyName: x.fieldName,
+          path: x.path,
+          afterSelect: true,
+          propertyType: x.type,
+        }))
+        setSelectTFilter(localSelectTFilter)
+        setColDefs(localColDefs)
+      } else {
+        setColDefs([])
+      }
+    } catch (error) {
+
+    } finally {
+    }
+  }
+
+  const ImageCell = (props) => {
+    const {value} = props;
+    if (!value) return <span/>;
+    let src = String(value);
+    try {
+      if (imageBaseUrl && !/^https?:\/\//i.test(src)) {
+        src = `${imageBaseUrl}/${src}`;
+      }
+    } catch {
+    }
+    const size = 50;
+    return (
+      <img
+        src={src}
+        alt=""
+        style={{width: size, height: size, objectFit: 'contain', borderRadius: 4}}
+        onDoubleClick={() => window.open(src, "_blank", "noopener,noreferrer")}
+        onError={(e) => {
+          e.currentTarget.style.visibility = 'hidden';
+        }}
+      />
+    );
+  };
+
+  const RoutingCell = (props) => {
+    const {value, colDef, context, data} = props;
+    const {tRouting} = context;
+    const fieldName = colDef.field;
+
+    const routing = tRouting?.find(r => r.fieldName === fieldName || r.headerName === fieldName);
+    if (!routing) return <span>{value}</span>;
+
+    // Determine behavior based on routing.type
+    const type = routing.type || 'Route';
+
+    // Build finalRoute for Route type
+    let finalRoute = null;
+    if (type === 'Route') {
+      if (routing.script) {
+        try {
+          const fn = new Function("row", routing.script);
+          finalRoute = fn(data);
+        } catch (err) {
+          console.error("Routing script error:", err);
+          finalRoute = "#";
+        }
+      } else if (routing.pattern) {
+        finalRoute = routing.pattern.replace(/\{\{(.*?)\}\}/g, (_, key) => {
+          const val = data?.[key];
+          return val != null ? val : `:${key}`;
+        });
+      }
+    }
+
+    const handleClick = () => {
+      if (type === 'Filter') {
+        try {
+          // Prepare payload to pass via window.name (works across new tabs without session)
+          const raw = routing.externalFilterJson || '';
+          const replaced = raw.replace(/\{\{(.*?)\}\}/g, (_, key) => {
+            const v = data?.[key];
+            return v != null ? String(v) : '';
+          });
+          let externalFilter = null;
+          try {
+            externalFilter = replaced ? JSON.parse(replaced) : null;
+          } catch (e) {
+            console.error('Invalid externalFilterJson after replacement', e);
+          }
+
+          const builderId = context?.builderId;
+          const payload = {
+            pageId: routing.pageId ?? null,
+            externalFilter,
+            id: builderId ?? null
+          };
+
+          const base = '/reportBuilder/reportViewer';
+          const url = builderId ? `${base}?id=${encodeURIComponent(builderId)}&useWindowName=1` : `${base}?useWindowName=1`;
+          // Open the new tab and set its window.name with a prefixed base64 JSON payload
+          const child = window.open(url, "_blank"); // do not use noopener because we need to set name
+          if (child) {
+            try {
+              const json = JSON.stringify(payload);
+              const b64 = typeof btoa !== 'undefined' ? btoa(unescape(encodeURIComponent(json))) : json;
+              child.name = `RB:${b64}`;
+            } catch (e) {
+              // as a fallback, put minimal info in URL (may be long for large filters)
+              try {
+                const fallback = encodeURIComponent(JSON.stringify(payload));
+                child.location.href = builderId ? `${base}?id=${encodeURIComponent(builderId)}&payload=${fallback}` : `${base}?payload=${fallback}`;
+              } catch {}
+            }
+          }
+        } catch (e) {
+          console.error('Filter routing error', e);
+        }
+      } else {
+        if (finalRoute && finalRoute !== '#') {
+          window.open(finalRoute, "_blank", "noopener,noreferrer");
+        }
+      }
+    };
+
+    return (
+      <span
+        style={{
+          color: '#1976d2',
+          fontWeight: 600,
+          cursor: 'pointer',
+        }}
+        onClick={handleClick}
+      >
+      {value}
+    </span>
+    );
+  };
+
+
+  function trimSelectedFields(fields, level = 1) {
+    return fields.map(col => {
+      const trimmed = {
+        ...col,
+        path: col.path,
+        headerName: col.headerName ?? col.path.replace(/\./g, '_')
+      };
+
+      if (col.children && col.children.length > 0) {
+        trimmed.children = trimSelectedFields(col.children, level + 1);
+      }
+
+      return trimmed;
+    });
+  }
+
+  function getParentKeys(parentNode) {
+    const keys = [];
+    let currentNode = parentNode;
+    while (currentNode?.data) {
+      keys.unshift(currentNode.key); // Prepend to keep the order of ancestors
+      currentNode = currentNode.parent;
+    }
+    return keys;
+  }
+
+// function getValueAtPath(obj, path) {
+//   // Split the path into parts based on the dot notation
+//   const parts = path.split('.');
+//   // Traverse the object according to the path
+//   let current = obj;
+//
+//   for (let part of parts) {
+//     if (current === null || current === undefined) {
+//       return 'null';  // If any part is null/undefined, return 'null'
+//     }
+//     current = current[part];
+//   }
+//
+//   // If the final value is null, return 'null', otherwise return the value
+//   return current === null ? 'null' : current;
+// }
+
+  const getRowId = (params) => {
+    try {
+      let itemRowId = getValueByPath(params.data, uniqueIdPath);
+      let rowId = itemRowId + getRandomInt(1, 999999999999).toString()
+      return noPurge ? itemRowId : rowId
+    } catch (error) {
+      console.error(error)
+    }
+
+  };
+  const handleGetSortObject = (colId, sort, isGrouping, isPivot) => {
+    const computedField = builderData.selectedFields.find(x => x.headerName === colId)
+    const isComputedField = builderData.selectedFields.some(x => x.headerName === colId && x.type === 'computed')
+    if (colId == "IZ_groupCount") {
+      return {
+        columnName: 'groupCount',
+        sortDirection: sort === 'asc' ? 'Ascending' : 'Descending',
+        afterGroupBy: isGrouping === true && !isComputedField,
+        afterSelect: isComputedField
+
+      }
+    }
+    if (isPivot || colId.endsWith("groupCount")) {
+      return {
+        columnName: colId,
+        sortDirection: sort === 'asc' ? 'Ascending' : 'Descending',
+        afterGroupBy: isGrouping === true && !isComputedField,
+        afterSelect: isComputedField
+
+      }
+    }
+    const field = {path: colId, afterSelect: true}
+    return {
+      columnName: computedField ? computedField.path : colId,
+      sortDirection: sort === 'asc' ? 'Ascending' : 'Descending',
+      afterGroupBy: isGrouping === true,
+      afterSelect: isComputedField
+    }
+  }
+
+  const sideBarConfig = useMemo(() => ({
+    toolPanels: [
+      {
+        id: 'columns',
+        labelDefault: 'Columns',
+        labelKey: 'columns',
+        iconKey: 'columns',
+        toolPanel: 'agColumnsToolPanel',
+        toolPanelParams: {
+          suppressRowGroups: groupBy != null,
+          suppressValues: groupBy != null,
+        },
+        minWidth: 225,
+      },
+
+    ],
+    position: 'left',
+    // ← optionally open this panel by default on init
+    defaultToolPanel: 'columns',
+  }), [groupBy]);  // only re-create if groupBy changes
+  const handleGetAggregationObject = (agg) => {
+
+    const matchedCol = builderData.selectedFields.find(col => {
+      const cleanedColPath = col.headerName || col.path.replace(/\./g, '_');
+      return cleanedColPath?.toLowerCase() === agg.field?.toLowerCase();
+    });
+
+    if (matchedCol) {
+
+    } else {
+      console.warn(`No match found for aggregation field "${agg.field}"`);
+    }
+    return {
+      path: matchedCol.headerName || matchedCol?.path,
+      method: agg.aggFunc,
+      afterSelect: matchedCol.type === 'computed'
+      // afterSelect: matchedCol?.afterSelect // Uncomment if needed
+    };
+  };
+  const handleGetPath = (colId) => {
+    return colId.replace(/_/g, '.')
+  }
+
+  function getMatchedColByPath(path) {
+    if (!path) return undefined;
+
+    const matchedCol = builderData.selectedFields.find(col => {
+      const cleanedColPath = col.headerName || col.path.replace(/\./g, '_');
+      return cleanedColPath?.toLowerCase() === path.replace(/\./g, '_').toLowerCase();
+    });
+
+    if (matchedCol) {
+      const cleanedColPath = matchedCol.path.replace(/\./g, '_');
+      return cleanedColPath;
+    }
+
+    console.warn(`No match found for: ${path}`);
+    return path.replace(/\./g, '_'); // fallback to flattened path
+  }
+
+  function convertToNestedObject(flatObject) {
+    const resultObject = {};
+
+    Object.keys(flatObject).forEach(path => {
+      const value = flatObject[path];
+
+      // Case-insensitive match with transformed col.path
+      const matchedCol = builderData.selectedFields.find(col => {
+        const cleanedColPath = col.headerName ?? col.path.replace(/\./g, '_');
+        return cleanedColPath.toLowerCase() === path.toLowerCase();
+      });
+
+      if (path.startsWith("pivot_")) {
+        const cleanedPath = path.substring(6); // Remove "pivot_"
+        resultObject[cleanedPath] = value;
+      } else {
+        const newPath = matchedCol?.headerName ?? matchedCol?.path?.replace(/\./g, '_') ?? path;
+        resultObject[newPath] = value;
+      }
+    });
+
+    return resultObject;
+  }
+
+
+  function returnAdditionalPivotCols(flatCols) {
+    const resultFields = new Set();
+    flatCols.forEach(row => {
+      Object.keys(row).forEach(key => {
+        if (!key.startsWith("pivot_") && key !== "groupCount" && !builderData.selectedFields.some(
+          col => col.headerName === key
+        )) {
+          resultFields.add(key);
+        }
+      });
+    });
+
+    const distinctFields = Array.from(resultFields);
+    return distinctFields;
+  }
+
+  const createServerSideDatasource = (getRowsFromApi) => {
+    return {
+      getRows: (params) => {
+        const isPivotMode = params.api.isPivotMode()
+        // Fetch data from API based on request
+        getRowsFromApi(params)
+          .then((response) => {
+            if (response.success) {
+              // Supply rows for requested block to grid
+              params.success({
+                rowData: response.rows,
+                rowCount: response.total,
+                pivotResultFields: isPivotMode ? response.pivotColResult : null
+              });
+            } else {
+              params.fail();
+            }
+          })
+          .catch((e) => {
+
+            console.log(e)
+            params.fail()
+          });
+      },
+    };
+  }
+
+  const getRowsFromApi = useCallback(
+    async params => {
+      setFinalRequestObject(defaultFinalRequest)
+      const fixedTFilter = externalFilter?.fixedTFilter ?? externalFilter?.fixedTfilter ?? []
+      const localFixedTFilter = Filter?.fixedTFilter ?? []
+      let localFilter = externalFilter ? {...externalFilter} : {}
+      localFilter = {...localFilter, ...Filter}
+
+      let localTFilter = localFilter?.Tfilter ? [...localFilter?.Tfilter] : []
+      localTFilter = localFilter?.TFilter ? [...localTFilter, ...localFilter?.TFilter] : [...localTFilter]
+      localTFilter = [...localTFilter, ...fixedTFilter, ...localFixedTFilter, ...builderTFilter]
+
+      // Apply explicit user-selected search filters (selectedSearchObjects), grouped by path
+      if ((selectedSearchObjects?.length ?? 0) > 0) {
+        const byPath = selectedSearchObjects.reduce((acc, item) => {
+          const key = item.path;
+          if (!acc[key]) acc[key] = [];
+          acc[key].push(item);
+          return acc;
+        }, {});
+
+        const grouped = [];
+        Object.keys(byPath).forEach(path => {
+          const items = byPath[path];
+          if (items.length <= 1) {
+            // Single value: push without OR grouping flags
+            const single = {...items[0]};
+            delete single.isWithinOrGroup;
+            delete single.orGroupName;
+            grouped.push(single);
+          } else {
+            // Multiple values for same path: mark each as OR group member
+            items.forEach(it => {
+              grouped.push({
+                ...it,
+                isWithinOrGroup: true,
+                orGroupName: path
+              });
+            });
+          }
+        });
+
+        localTFilter = [...localTFilter, ...grouped];
+      }
+
+      localTFilter = localTFilter.filter(x => x.value !== null && x.value !== undefined && x.value !== '')
+
+      delete localFilter.Tfilter
+      delete localFilter.fixedTfilter
+      delete localFilter.fixedTFilter
+      delete localFilter.LocalTfilter
+      delete localFilter.localTfilter
+      localFilter = localFilter ?? {}
+      const request = params.request
+      const pageNumber = request.endRow / (request.endRow - request.startRow) // Calculate the page number
+      const pageSize = request.endRow - request.startRow // Calculate the page size
+      let aggregators = request.valueCols.filter(x => x.id != 'groupCount').map(agg => handleGetAggregationObject(agg))
+      let updateAggregation = true
+      if (colDefs && gridApi) {
+        let resultColDef = [...colDefs]
+        if (request.rowGroupCols.length > 0) {
+        }
+        // gridApi.setGridOption('columnDefs', resultColDef)
+        // gridApi.applyColumnState({state: colState});
+      }
+      // Build tFilter safely: remove fixed from preformatted lists and merge a single fixed source
+      // 1) Strip fixed items from local Tfilter/TFilter (they may already be formatted by CustomFilterDialog)
+      let nonFixedLocal = Array.isArray(localTFilter) ? localTFilter.filter(it => !(it && it.fixed === true && it.value === null)) : []
+
+      // 2) Choose ONE fixed source by priority: component state -> external -> builder
+      const extFixed = Array.isArray(externalFilter?.fixedTFilter)
+        ? externalFilter.fixedTFilter
+        : (Array.isArray(externalFilter?.fixedTfilter) ? externalFilter.fixedTfilter : [])
+      const fixedSource = (Array.isArray(Filter?.fixedTFilter) && Filter.fixedTFilter.length > 0)
+        ? Filter.fixedTFilter
+        : (extFixed.length > 0 ? extFixed : (Array.isArray(builderTFilter) ? builderTFilter : []))
+
+      // 3) Merge and format once
+      const mergedForFormat = [...nonFixedLocal]
+      console.log("Merged for format:", mergedForFormat)
+      let formattedT = FilterFormat(mergedForFormat)
+
+      let data = {
+        ...localFilter,
+        tFilter: formattedT,
+        aggregators: aggregators,
+        pivotCols: request.pivotCols.map(x => handleGetPath(x.field))
+      }
+      // Exclude any tFilter entries with null value before sending the request (per requirement)
+      if (Array.isArray(data.tFilter)) {
+        data.tFilter = data.tFilter.filter(f => f == null ? false : f.value !== null);
+      }
+      try {
+        if (request.rowGroupCols.length !== request.groupKeys.length) {
+          if (request.rowGroupCols.length > 1 && request.groupKeys.length > 0) {
+            updateAggregation = false
+          }
+          let tFilters = request.groupKeys.map((x, index) => ({
+            path: request.rowGroupCols[index].id.replace(/_/g, '.'),
+            value: request.groupKeys[index] === 'null' ? null : request.groupKeys[index],
+            method: 'Equals',
+            dtoClassName: '',
+            modelClassName: '',
+            afterSelect: builderData.selectedFields.some(col => col.headerName === request.rowGroupCols[index].id && col.type === 'computed')
+          }))
+          const groupByColId = handleGetPath(params.request.rowGroupCols[params.parentNode.level + 1]?.id)
+          const rowGroupColsIds = request.rowGroupCols.map(value => value.id)
+          const valueColsIds = request.valueCols.map(value => value.id)
+          const groupOrderCols = [...rowGroupColsIds, ...valueColsIds]
+          let isGroupCountOrder = true;
+          // if (rowGroupColsIds.length > 1 && params.request.sortModel.length > 1) {
+          //   isGroupCountOrder = false;
+          // }
+          request.sortModel = (request.sortModel ?? []).map(x => ({
+            ...x,
+            colId: x?.colId?.endsWith("_groupCount")
+              ? x.colId.replace("_groupCount", "_groupCount")
+              : x.colId
+          }));
+          const aggIds = request.valueCols.map(vc => vc.id);
+
+          const groupOrderColdIds = request.sortModel.filter(x => groupOrderCols.includes(x.colId) || ((x.colId == "IZ_groupCount" || x.colId.endsWith("groupCount") || aggIds.some(id => x.colId.toLowerCase().endsWith(id.toLowerCase()))) && isGroupCountOrder))
+          let orderBy = groupOrderColdIds.map(sort => handleGetSortObject(sort.colId, sort.sort, true, aggIds.some(id => sort.colId.toLowerCase().endsWith(id.toLowerCase()))))
+          data = {
+            ...data,
+            tFilter: [...tFilters, ...data.tFilter],
+            orderBy: orderBy
+          }
+
+          // if (updateAggregation !== true) {
+          //   data.aggregators = []
+          // }
+          data.selectFields = selectedFields
+          data.selectParams = selectParams
+          data.rawSql = builderData.rawSql
+
+          const response = await Services.PostService(groupEndPoint, false, data, {
+            groupBy: groupByColId,
+            page: isSingle ? 1 : pageNumber,
+            pageSize: isSingle ? 1 : pageSize,
+            getType: isPagination ? 'GroupingPagination' : 'GroupingNoPagination',
+            sourceModel: builderData.reportSource.fullName,
+
+          })
+
+          if (setData != null) {
+            if (isSingle) {
+              const rowObj = response.data[0]
+              setData(dataAsObject ? toNestedByUnderscore(rowObj) : rowObj)
+            } else {
+              const resp = dataAsObject
+                ? {...response, data: (response.data || []).map(toNestedByUnderscore)}
+                : response
+              setData(resp)
+            }
+          }
+          setFinalRequestObject({
+            groupBy: groupByColId,
+            endpoint: groupEndPoint,
+            filter: data,
+            params: {}
+          })
+          const pivotColResult = []
+          if (request.pivotCols.length > 0) {
+            if (response?.pivotCols.length > 0) {
+              pivotColResult.push('groupCount')
+              const responsePivotCol = response.pivotCols.map(x => x.field) ?? []
+              pivotColResult.push(...responsePivotCol)
+              const additionalPivotCols = returnAdditionalPivotCols(response.data)
+              pivotColResult.push(...additionalPivotCols)
+
+            }
+          }
+
+          response.data = response.data.map(r => {
+            return convertToNestedObject(r)
+          })
+          if (response.aggregation != null && updateAggregation === true) {
+            const flatAggs = flattenObject(response.aggregation)
+            setPagedAgg([flatAggs])
+          }
+
+          return {
+            success: true,
+            rows: Array.isArray(response.data) ? response.data : [], // Always return an array to AG Grid
+            total: response.totalCount, // Total number of rows available from the server
+            pivotColResult: pivotColResult.length > 0 ? pivotColResult : null
+          }
+        } else {
+          if (request.groupKeys.length > 0) {
+            let tFilters = request.groupKeys.map((x, index) => ({
+              path: handleGetPath(request.rowGroupCols[index].id),
+              value: request.groupKeys[index] === 'null' ? null : request.groupKeys[index],
+              method: 'Equals',
+              dtoClassName: '',
+              modelClassName: '',
+              afterSelect: builderData.selectedFields.some(col => col.headerName === request.rowGroupCols[index].id && col.type === 'computed')
+
+            }))
+            updateAggregation = false
+
+            data = {
+              ...data,
+              tFilter: [...tFilters, ...data.tFilter]
+            }
+          }
+          let orderBy = request.sortModel.filter(x => !x.colId.endsWith("IZ_groupCount")).map(sort => handleGetSortObject(sort.colId, sort.sort, false))
+          if (data.tIncludes != null)
+            data = {
+              ...data,
+              tIncludes: [...data.tIncludes, ...includes],
+              orderBy: orderBy
+            }
+          else {
+            data = {
+              ...data,
+              tIncludes: [...includes],
+              orderBy: orderBy
+            }
+            if (fixedTIncludes != null) {
+              data.tIncludes = [...data.tIncludes, ...fixedTIncludes]
+            }
+          }
+          if (updateAggregation !== true) {
+            data.aggregators = []
+          }
+          data.selectFields = selectedFields
+          data.selectParams = selectParams
+          data.lastRowParams = lastRowRef.current[pageNumber];
+
+          data.isPaginationByFilter = builderData?.isRaw === false
+          if (data.lastRowParams == null && pageNumber > 1 && data.isPaginationByFilter)
+            return {
+              success: true,
+              rows: [],
+              rowCount: undefined // <== This keeps the grid in "loading" state
+            }
+          data.rawSql = builderData?.rawSql
+          console.log(builderData)
+          const response = await Services.PostService(pagedEndPoint, false, data, {
+            ...paramsPage,
+            page: isSingle ? 1 : pageNumber,
+            pageSize: isSingle ? 1 : pageSize,
+            getType: isPagination ? (builderData?.isRaw ? 'SqlPagination' : 'Pagination') : (builderData?.isRaw ? 'SqlNoPagination' : 'NoPagination'),
+            sourceModel: builderData?.reportSource?.fullName,
+
+          })
+
+          if (setData != null) {
+            if (isSingle) {
+              const rowObj = response.data[0]
+              setData(dataAsObject ? toNestedByUnderscore(rowObj) : rowObj)
+            } else {
+              const resp = dataAsObject
+                ? {...response, data: (response.data || []).map(toNestedByUnderscore)}
+                : response
+              setData(resp)
+            }
+          }
+          lastRowRef.current = {...lastRowRef.current, [pageNumber + 1]: response.lastRowParams};
+          setFinalRequestObject({
+            groupBy: null,
+            endpoint: pagedEndPoint,
+            getType: 'Pagination',
+            filter: data,
+            sourceModel: builderData?.reportSource?.fullName,
+            params: paramsPage ?? {}
+          })
+          if (responseType == null) setResponseType(response.className)
+          if (responseType == null) setLocalClasName(response.className)
+          if (response.aggregation != null && updateAggregation === true) {
+            const flatAggs = flattenObject(response.aggregation)
+            setPagedAgg([flatAggs])
+          }
+
+          return {
+            success: true,
+            rows: Array.isArray(response.data) ? response.data : [], // Always return an array to AG Grid
+            total: response.totalCount,
+            rowCount: response.totalCount,
+          }
+        }
+      } catch (error) {
+        console.log(error)
+        return {success: false}
+      }
+    },
+    [externalFilter, includes, paramsPage, Filter, selectedFields, isPagination, selectedSearchObjects, builderData]
+  )
+  const datasource = useMemo(() => createServerSideDatasource(getRowsFromApi), [getRowsFromApi]);
+
+
+  const onGridReady = useCallback((params) => {
+    setGridApi(params.api)
+    if (setOutGridApi != null)
+      setOutGridApi(params.api)
+    // Create datasource with a reference to the API function
+    // const datasource = createServerSideDatasource(getRowsFromApi);
+
+    // // Register the datasource with the grid
+    // params.api.setGridOption("serverSideDatasource", datasource);
+  }, []);
+
+  const onRowSelected = (event) => {
+    if (setEventRowSelected != null) {
+      setEventRowSelected(event)
+    }
+  };
+
+  function flattenObject(obj, prefix = '', result = {}) {
+    for (const key in obj) {
+      if (!Object.hasOwn(obj, key)) continue;
+
+      const value = obj[key];
+      const fullKey = prefix ? `${prefix}.${key}` : key;
+
+      if (value && typeof value === 'object' && !Array.isArray(value)) {
+        flattenObject(value, fullKey, result);
+      } else {
+        const matchedPath = getMatchedColByPath(fullKey);
+        const finalKey = matchedPath ?? fullKey; // fallback to original if no match
+
+
+        result[finalKey] = value;
+      }
+    }
+    return result;
+  }
+
+  function flattenArray(arr) {
+    let result = [];
+
+    function traverse(item) {
+      if (!item.children) {
+        // If the item does not have children or the children array is empty, add it to the result
+        result.push(item);
+      } else {
+        // If the item has children, recursively traverse each child
+        item.children.forEach(child => traverse(child));
+      }
+    }
+
+    arr.forEach(item => traverse(item));
+    return result;
+  }
+
+  function getValueByPath(object, path) {
+    try {
+      if (path == undefined)
+        return getRandomInt(1, 999999999999).toString()
+      let id = path.split('.').reduce((acc, key) => acc && acc[key], object);
+      if (id === undefined)
+        return getRandomInt(1, 999999999999).toString()
+      else
+        return id
+
+    } catch (error) {
+
+    }
+  }
+
+  function handleFilterChange(field, value) {
+    handleChange(setFilter, field, value)
+  }
+
+  async function handleGetTemplates() {
+    try {
+      let response = null
+      let data = {
+        tFilter: [
+          {
+            method: 'Equals',
+            path: 'pageName',
+            value: 'Builder' + builderData?.id
+          },
+          {
+            method: 'Equals',
+            path: 'UserId',
+            value: authValues?.user?.id,
+          },
+        ]
+      }
+      response = await PostService(Endpoints.UserTableTemplates.Post.GetAllPagedByFilter, false, data)
+
+      if (response) {
+        setTemplates(response.data)
+
+      } else {
+        setTemplates([])
+      }
+    } catch (error) {
+
+    }
+  }
+
+  const handleToggleDialogs = dialog => {
+    handleChange(setOpenDialogs, dialog, !openDialogs[dialog])
+  }
+
+
+  async function handleSaveTemplate() {
+    try {
+      let response = null;
+      {
+        let data = {
+          ...selectedTemplate,
+          value: gridApi.getColumnState(),
+          userId: authValues?.user?.id,
+          filterValue: Filter,
+          pageName: 'Builder' + builderData?.id
+        }
+        response = await UpdateService(Endpoints.UserTableTemplates.Put.UpdateTemplate, true, data, {
+          id: selectedTemplate?.id
+        })
+
+        if (response)
+          handleGetTemplates();
+      }
+    } catch (error) {
+
+    }
+  }
+
+  async function handleCSVExport() {
+    try {
+      let response = null;
+      {
+        setIsDownloading(true)
+        const cols = gridApi
+          .getColumnDefs()
+        const flatCols = flattenArray(cols)
+        const visibleCols = flatCols // all column definitions
+          .filter(colDef =>
+            gridApi.getColumnState().some(
+              col => col.colId === colDef.field && col.hide !== true
+            )
+          )
+        const visibleFields = visibleCols
+          .filter(x => x?.path)
+          .map(x => x.path);
+
+        let data = {
+          ...finalRequestObject.filter,
+          isExcelExport: true,
+          visibleFields: visibleFields,
+        }
+        const isPivotOff = !gridApi.isPivotMode()
+        if (isPivotOff) {
+          data.pivotCols = []
+        }
+        response = await StreamService(streamEndPoint, true, data, {
+            ...finalRequestObject.params,
+            groupBy: finalRequestObject.groupBy,
+            getType: 'Stream',
+            sourceModel: builderData.reportSource.fullName
+
+          }, null,
+          progress => {
+            console.log(`Downloaded: ${progress}%`)
+          })
+
+      }
+    } catch (error) {
+      console.log(error)
+    } finally {
+      setIsDownloading(false)
+    }
+  }
+
+  const restoreState = () => {
+    if (gridApi !== null && colDefs !== null && selectedTemplate != null) {
+      gridApi.applyColumnState({
+        state: selectedTemplate.value,
+        applyOrder: true,
+      });
+    }
+    if (selectedTemplate.filterValue != null && (Filter.Tfilter == null || Filter.Tfilter.length == 0)) {
+      setFilter(selectedTemplate.filterValue);
+    }
+  };
+
+  const debouncedRefresh = useMemo(
+    () => debounce(() => {
+      if (gridApi) gridApi.refreshServerSide({purge: true});
+    }, 400),
+    [gridApi]
+  );
+
+  // cleanup debounce on unmount
+  useEffect(() => () => debouncedRefresh.cancel(), [debouncedRefresh]);
+
+  const handlePickSearchField = (selectedField) => {
+    if (!selectedField) return;
+    const term = (searchTerm || '').trim();
+    if (!term) return;
+
+    const propType = (selectedField.propertyType || '').toLowerCase();
+    let valueToUse = term;
+    if (propType === 'int') {
+      const n = Number(term);
+      if (!Number.isFinite(n)) {
+        return; // ignore invalid numeric term for Int fields
+      }
+      valueToUse = Math.trunc(n);
+    }
+
+    const newObj = {
+      ...selectedField,
+      value: valueToUse
+    };
+
+    setSelectedSearchObjects(prev => [...prev, newObj]);
+    console.log(newObj)
+    setSearchTerm('');
+    setSearchPopoverOpen(false);
+    debouncedRefresh();
+  };
+
+
+  useEffect(() => {
+    if (builderData) {
+
+      if (builderData.isRaw) {
+        handleGetRawColumns(builderData.rawSql)
+      } else {
+        handleResetColsToStudio()
+      }
+    }
+  }, [builderData]);
+
+  useEffect(() => {
+    if (builderModel != null) {
+      console.log(builderModel)
+      let rawSql = builderModel.rawSql;
+      if (builderModel.isRaw === true) {
+        const localSelectParams = builderModel.selectionParams.map((x, index) => ({
+          id: index,
+          PropertyType: x.propertyType,
+          value: x.value
+        }));
+
+        rawSql = rawSql.replace(/@(\d+)/g, (_, index) => {
+          const param = localSelectParams[parseInt(index)];
+          if (!param) return _;
+
+          // Add quotes for strings and dates
+          if (typeof param.value === 'string') {
+            return `'${param.value}'`;
+          }
+
+          return param.value;
+        });
+      }
+      setBuilderData({...builderModel, rawSql: rawSql})
+      setFilter(preValue => ({
+        ...preValue,
+        LocalTfilter: [...(builderModel?.filter?.fixedTFilter || [])]
+      }))
+    }
+  }, [builderModel]);
+
+  useEffect(() => {
+    // In non-raw mode, changing selection params should not alter builderData to avoid unnecessary rerenders/fetches
+    if (builderModel?.isRaw !== true) return;
+
+    if (selectParams.length > 0) {
+      let rawSql = builderModel.rawSql;
+      const localSelectParams = {...selectParams};
+      rawSql = rawSql.replace(/@(\d+)/g, (_, index) => {
+        const param = localSelectParams[parseInt(index)];
+        if (!param) return _;
+        // Add quotes for strings and dates
+        if (typeof param.value === 'string') {
+          return `'${param.value}'`;
+        }
+        return param.value;
+      });
+      // Only update if rawSql actually changed to prevent redundant state updates
+      setBuilderData(prev => {
+        if (prev?.rawSql === rawSql) return prev;
+        return {...builderModel, rawSql};
+      });
+    }
+  }, [selectParams, builderModel?.isRaw]);
+
+  useEffect(() => {
+
+    if (gridApi !== null) {
+      gridApi.refreshServerSide({purge: !noPurge})
+      lastRowRef.current = {}
+    }
+  }, [refresh, externalFilter, localRefresh, Filter]);
+
+  useEffect(() => {
+    if (gridApi != null && colDefs != null)
+      handleGetTemplates()
+  }, [gridApi, colDefs])
+
+  useEffect(() => {
+    if (colDefs.length > 0 && selectedTemplate != null) {
+      restoreState()
+    }
+  }, [selectedTemplate])
+  useEffect(() => {
+    if (selectedTemplate == null && templates.length > 0 && colDefs.length > 0) {
+      const userDefined = templates.find(x => x.isDefault === true)
+      if (userDefined != null)
+        setSelectedTemplate(userDefined)
+      else {
+        const systemDefined = templates.find(x => x.type === "UserPredefined")
+        if (systemDefined != null)
+          setSelectedTemplate(systemDefined)
+        else {
+          const anyTemplate = templates[0]
+          setSelectedTemplate(anyTemplate)
+        }
+      }
+    }
+  }, [templates, colDefs])
+
+  useEffect(() => {
+    if (!timerValue || isNaN(timerValue) || timerValue == 0) {
+
+      return;
+    }
+    // Convert minutes to milliseconds
+    const interval = (timerValue) * 60 * 1000;
+
+    const timeout = setInterval(() => {
+      setLocalRefresh(prev => !prev); // Toggle value
+    }, interval);
+
+    return () => clearTimeout(timeout); // Cleanup
+  }, [timerValue]); // re-ru
+
+  useEffect(() => {
+    if (!externalTimer || isNaN(externalTimer) || externalTimer == 0) {
+
+      return;
+    }
+    // Convert minutes to milliseconds
+    const interval = (externalTimer) * 60 * 1000;
+
+    const timeout = setInterval(() => {
+      setLocalRefresh(prev => !prev); // Toggle value
+    }, interval);
+
+    return () => clearTimeout(timeout); // Cleanup
+  }, [externalTimer]); // re// n after each refresh or change in value
+
+  return (
+    <Grid item container size={12}>
+      <Grid container item
+            sx={{backgroundColor: '#fafafb', justifyContent: 'space-between'}} padding={2}
+            size={12}
+      >
+        <Box sx={{display: 'flex'}}>
+          {(builderData?.id != null && minimized !== true) &&
+            <Box sx={{minWidth: '250px'}}>
+
+              <FormControl fullWidth>
+                <Autocomplete
+                  size={'small'}
+                  value={selectedTemplate}
+                  fullWidth
+                  disableClearable
+                  options={templates}
+                  onChange={(e, value) => {
+                    setSelectedTemplate(value)
+                  }
+                  }
+                  getOptionLabel={option => option.name}
+                  renderInput={params => (
+                    <TextField
+                      label='شكل النموذج'
+                      {...params}
+                      onMouseDown={() => {
+                        handleGetTemplates()
+                      }}
+                    />
+                  )}
+                />
+              </FormControl>
+            </Box>
+          }
+          <Box sx={{ml: '5px'}}>
+            <Tooltip title='مؤقت' placement={'top'}>
+              <Select variant={'outlined'} value={timerValue} onChange={(e) => setTimerValue(e.target.value)}
+                      defaultValue={0} size={'small'}
+                      color='primary' sx={{width: '60px'}}>
+                <MenuItem key={1} value={0}>No</MenuItem>
+                <MenuItem key={2} value={0.1667}>10s</MenuItem>
+                <MenuItem key={2} value={0.5}>30s</MenuItem>
+                <MenuItem key={2} value={1}>1m</MenuItem>
+                <MenuItem key={2} value={2}>2m</MenuItem>
+                <MenuItem key={2} value={5}>5m</MenuItem>
+                <MenuItem key={3} value={15}>15m</MenuItem>
+                <MenuItem key={4} value={30}>30m</MenuItem>
+              </Select>
+            </Tooltip>
+          </Box>
+        </Box>
+        {((searchFieldsRef?.current?.length ?? []) > 0) &&
+          <Box sx={{flex: 1, px: 1, minWidth: minimized ? 140 : 300, display: 'flex', alignItems: 'center'}}>
+            {/*<Tooltip title={'اكتب كلمة البحث ثم اختر الحقل'}>*/}
+            <Box sx={{position: 'relative', width: '100%'}}>
+              <TextField
+                label={'بحث'}
+                fullWidth
+                size={'small'}
+                value={searchTerm}
+                inputRef={searchInputRef}
+                onFocus={(e) => {
+                  if ((e.target.value || '').length > 0) {
+                    setSearchPopoverAnchor(e.currentTarget);
+                    setSearchPopoverOpen(true);
+                  }
+                }}
+                onChange={(e) => {
+                  const v = e.target.value;
+                  setSearchTerm(v);
+                  setSearchPopoverAnchor(e.currentTarget);
+                  setSearchPopoverOpen((v || '').length > 0);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    const term = (searchTerm || '').trim();
+                    if (!term) return;
+                    const fields = searchFieldsRef?.current ?? [];
+                    if (fields.length === 0) return;
+                    handlePickSearchField(fields[0]);
+                  } else if (e.key === 'Escape') {
+                    setSearchPopoverOpen(false);
+                  }
+                }}
+                InputProps={{
+                  startAdornment: (
+                    <Box sx={{display: 'flex', gap: 0.5, flexWrap: 'wrap'}}>
+                      {(() => {
+                        const byPath = selectedSearchObjects.reduce((acc, it) => {
+                          const key = it.path;
+                          if (!acc[key]) acc[key] = {meta: it, values: []};
+                          acc[key].values.push(String(it.value));
+                          return acc;
+                        }, {});
+                        return Object.keys(byPath).map(path => {
+                          const g = byPath[path];
+                          const labelBase = g.meta.friendlyName || g.meta.path;
+                          const valueLabel = g.values.reduce((acc, val, idx) => {
+                            if (idx > 0) acc.push(<strong key={`sep-${idx}`}> أو </strong>);
+                            acc.push(val);
+                            return acc;
+                          }, []);
+                          return (
+                            <Chip
+                              key={`group-${path}`}
+                              size="small"
+                              label={
+                                <span>
+                                  <strong>{labelBase}</strong>: {valueLabel}
+                                </span>
+                              } onDelete={() => {
+                              setSelectedSearchObjects(prev => prev.filter(it => it.path !== path));
+                              debouncedRefresh();
+                            }}
+                              deleteIcon={
+                                <Box sx={{
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  px: 0.5,
+                                  bgcolor: 'error.main',
+                                  color: (theme) => theme.palette.error.contrastText,
+                                  height: '100%',
+                                  alignSelf: 'stretch',
+                                  borderTopRightRadius: '4px',
+                                  borderBottomRightRadius: '4px'
+                                }}>
+                                  <Close fontSize="small"/>
+                                </Box>
+                              }
+                              sx={{
+                                mr: 0.5,
+                                borderRadius: '8px',
+                                '& .MuiChip-deleteIcon': {
+                                  margin: 0
+                                }
+                              }}
+                            />
+                          );
+                        });
+                      })()}
+                    </Box>
+                  )
+                }}
+              />
+
+              <ClickAwayListener onClickAway={() => setSearchPopoverOpen(false)}>
+                <Popper
+                  open={searchPopoverOpen}
+                  anchorEl={searchPopoverAnchor}
+                  placement="bottom-start"
+                  style={{zIndex: 1300, width: searchInputRef?.current?.offsetWidth || undefined}}
+                >
+                  <Paper elevation={3} sx={{mt: 0.5, maxHeight: 240, overflowY: 'auto'}}>
+                    <List dense>
+                      {(searchFieldsRef?.current ?? []).map((option, i) => (
+                        <ListItemButton key={`${option.path}-${i}`} onClick={() => handlePickSearchField(option)}>
+                          <Box sx={{display: 'flex', flexDirection: 'column'}}>
+                            <Box sx={{fontSize: 14, fontWeight: 500}}>{option.friendlyName || option.path}</Box>
+                            {/*<Box sx={{fontSize: 12, color: 'text.secondary'}}>{option.path}</Box>*/}
+                          </Box>
+                        </ListItemButton>
+                      ))}
+                      {((searchFieldsRef?.current ?? []).length === 0) && (
+                        <ListItemButton disabled>
+                          <Box sx={{px: 1, py: 0.5, color: 'text.secondary'}}>لا توجد حقول للبحث</Box>
+                        </ListItemButton>
+                      )}
+                    </List>
+                  </Paper>
+                </Popper>
+              </ClickAwayListener>
+            </Box>
+            {/*</Tooltip>*/}
+          </Box>}
+        <Box sx={{display: 'flex', justifyContent: 'center'}}>
+          {<Box>
+            <Tooltip title={'جميع البيانات'}>
+              <Checkbox
+                checked={!isPagination}
+                onChange={e => setIsPagination(!e.target.checked)}
+                color="primary"
+              />
+            </Tooltip>
+          </Box>}
+          {streamEndPoint && !builderData?.isRaw === true && minimized !== true &&
+            <Box>
+              <Tooltip title='تصدير'>
+                <IconButton
+                  disabled={isDownloading}
+                  onClick={handleCSVExport}
+                  color='primary'
+                >
+                  {isDownloading ? <CircularProgress size={24}/> : <FileExcelOutline/>}
+                </IconButton>
+              </Tooltip>
+            </Box>
+          }
+          {minimized !== true && !isPagination &&
+            <Box>
+              <Tooltip title="تصدير PDF">
+                <IconButton onClick={handlePDFExport} color="primary">
+                  <PrintOutlined/>
+                </IconButton>
+              </Tooltip>
+            </Box>
+          }
+          {
+            builderData?.id != null && minimized !== true && <>
+              <Box>
+                <Tooltip title='حفظ النموذج'>
+                  <IconButton disabled={selectedTemplate == null} onClick={() => {
+                    handleSaveTemplate()
+                  }} color='primary'>
+                    <Save/>
+                  </IconButton>
+                </Tooltip>
+              </Box>
+              <Box>
+                <Tooltip title='حفظ بأسم'>
+                  <IconButton onClick={() => {
+                    setIsTemplateEditing(false)
+                    handleToggleDialogs('addTemplate')
+                  }} color='primary'>
+                    <SaveAs/>
+                  </IconButton>
+                </Tooltip>
+              </Box>
+
+              <Box>
+                <Tooltip title='تعديل'>
+                  <IconButton disabled={selectedTemplate == null}
+                              onClick={() => {
+                                setIsTemplateEditing(true)
+                                handleToggleDialogs('addTemplate')
+                              }}
+                              color='primary'
+                  >
+                    <Edit/>
+                  </IconButton>
+                </Tooltip>
+              </Box>
+            </>
+          }
+          {<Box>
+
+            <IconButton color={'primary'} onClick={() => handleToggleDialogs('CustomFilter')}>
+              <FilterAlt/>
+            </IconButton>
+          </Box>
+          }
+          <Box>
+            <Tooltip title='اعادة تحميل'>
+              <IconButton onClick={() => setLocalRefresh(!localRefresh)}>
+                <RefreshOutlined/>
+              </IconButton>
+            </Tooltip>
+          </Box>
+
+        </Box>
+      </Grid>
+      <div style={{width: "100%", height: minimized === true ? "0px" : height ?? "70vh", direction: 'ltr'}}>
+        <AgGridReact
+
+          debug={false}
+          columnHoverHighlight={true}
+          theme={agTheme}
+          enableRtl={true}
+          columnDefs={colDefs}
+          rowModelType={"serverSide"}
+          onGridReady={onGridReady}
+          maxConcurrentDatasourceRequests={0}
+          cacheBlockSize={100}
+          onRowSelected={onRowSelected}
+          // getChildCount={getChildCount}
+          sideBar={sideBarConfig}
+          context={{tRouting, builderId: builderData?.id}}   // pass routing and builder id
+          gridOptions={{
+            enableRangeSelection: true,
+            enableCharts: true,
+          }}
+          rowSelection="multiple"
+          statusBar={{
+            statusPanels: [
+              // { statusPanel: 'agTotalRowCountComponent' },
+              {
+                statusPanel: CustomStatusBar,
+                align: 'left',
+              },
+
+              // { statusPanel: 'agFilteredRowCountComponent' },
+              // { statusPanel: 'agSelectedRowCountComponent' },
+            ],
+          }}
+          groupHeaderHeight={25}
+          // onChartCreated={x => console.log(x)}
+          headerHeight={25}
+          autoGroupColumnDef={autoGroupColumnDef}
+          getRowId={getRowId}
+          serverSideDatasource={datasource}
+          blockLoadDebounceMillis={200}
+          pinnedBottomRowData={pagedAgg}
+          suppressRowClickSelection={true}
+          serverSidePivotResultFieldSeparator={"_"}
+          pivotKeySeparator={"_"}
+          getRowStyle={(row) => {
+            if (row.node.group) {
+              return {fontWeight: 'bold'};
+            }
+            if (expireReport) {
+              if (row.node?.data?.expireDate && new Date(row.node.data.expireDate) <= new Date()) {
+                return {background: '#FF625F'};
+              }
+              if (row.node?.data?.expireDate) {
+                const expireDate = new Date(row.node.data.expireDate);
+                const currentDate = new Date();
+                const diffInDays = (expireDate - currentDate) / (1000 * 60 * 60 * 24); // Convert milliseconds to days
+
+                if (diffInDays > 10) {
+                  return {background: '#8AFF8A'};
+                } else if (diffInDays > 0) {
+                  return {background: '#fcfd74'};
+                }
+              }
+            }
+          }}
+
+          components={{
+            routingCell: RoutingCell,
+            imageCell: ImageCell,
+            customStatusBar: CustomStatusBar,
+            // agColumnsToolPanel: CustomColumnsToolPanel
+
+          }}
+
+
+          onSortChanged={params => {
+            const sm = params.columns;
+            if (sm.length == 1 && sm.some(s => s.colId === 'IZ_groupCount')) {
+              params.api.refreshServerSide({purge: true})
+            }
+          }}
+        />
+      </div>
+      <Dialog
+        fullWidth
+        open={openDialogs?.addTemplate && builderData?.id != null}
+        maxWidth='md'
+        scroll='body'
+        onClose={() => {
+          handleToggleDialogs('addTemplate')
+        }}
+      >
+        <AddTemplateDialog
+          filterValue={Filter}
+          handleToggleDialogs={handleToggleDialogs}
+          pageName={'Builder' + builderData?.id}
+          item={isTemplateEditing === true ? selectedTemplate : null}
+          template={gridApi?.getColumnState()}
+          userId={authValues?.user?.id}/>
+      </Dialog>
+      <Dialog
+        fullWidth
+        open={openDialogs.CustomFilter}
+        maxWidth='xl'
+        scroll='body'
+        // onClose={() => handleToggleDialogs('CustomFilter')}
+      >
+        <CustomFilterDialog
+          handleToggleDialogs={handleToggleDialogs}
+          Filter={[...(Filter?.LocalTfilter || [])]}
+          handleFilterChange={handleFilterChange}
+          className={builderData?.reportSource?.fullName}
+          LocalFilter={false}
+          selectTFilter={selectTFilter}
+          selectParamsMeta={builderData?.selectionParams || []}
+          selectParamsValues={selectParams}
+          onSelectParamsSave={(list) => {
+            // list is array of { index, value, type }
+            setSelectParams(prev => {
+              const arr = [...(prev || [])];
+              (list || []).forEach(item => {
+                const i = item.index;
+                const type = item.type;
+                const current = arr[i] || {id: i, PropertyType: type, value: null};
+                arr[i] = {...current, PropertyType: current.PropertyType || type, value: item.value};
+              });
+              return arr;
+            });
+          }}
+        />
+      </Dialog>
+
+
+    </Grid>
+
+  )
+}
+
+
+export default SGrid
+
+
+// Helper: convert a flat object with underscore-delimited keys into a nested object
+function toNestedByUnderscore(input) {
+  if (input == null) return input;
+
+  if (Array.isArray(input)) {
+    return input.map(v => (v && typeof v === 'object') ? toNestedByUnderscore(v) : v);
+  }
+
+  if (typeof input !== 'object') return input;
+
+  const result = {};
+
+  const setNested = (target, parts, value) => {
+    let ref = target;
+    for (let i = 0; i < parts.length - 1; i++) {
+      const key = Helper.toCamelCaseDotNet(parts[i]);
+      if (!ref[key] || typeof ref[key] !== 'object' || Array.isArray(ref[key])) {
+        ref[key] = {};
+      }
+      ref = ref[key];
+    }
+
+    const last = Helper.toCamelCaseDotNet(parts[parts.length - 1]);
+    const existing = ref[last];
+    if (
+      existing && typeof existing === 'object' && !Array.isArray(existing) &&
+      value && typeof value === 'object' && !Array.isArray(value)
+    ) {
+      ref[last] = {...existing, ...value};
+    } else {
+      ref[last] = value;
+    }
+  };
+
+  for (const [key, val] of Object.entries(input)) {
+    const nestedVal = (val && typeof val === 'object') ? toNestedByUnderscore(val) : val;
+    const parts = String(key).split('_').filter(Boolean);
+    if (parts.length === 0) continue;
+
+    if (parts.length === 1) {
+      const k = Helper.toCamelCaseDotNet(parts[0]);
+      const existing = result[k];
+      if (
+        existing && typeof existing === 'object' &&
+        nestedVal && typeof nestedVal === 'object'
+      ) {
+        result[k] = {...existing, ...nestedVal};
+      } else {
+        result[k] = nestedVal;
+      }
+    } else {
+      setNested(result, parts, nestedVal);
+    }
+  }
+
+  return result;
+}
+