robobyte-front-builder 1.0.16 → 1.0.19

package/src/views/genericTable/SGrid.js

@@ -26,7 +26,7 @@
  *    - 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.
+ * 4) Grid updates, status bar shows counts/aggregations, and export functions can read current view 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.
@@ -59,6 +59,24 @@ import Grid from '@mui/material/Grid'
 // ** Store Imports
 // ** Custom Components Imports
 import {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'
+
+// Global styles for flashing effect
+if (typeof document !== 'undefined') {
+  const styleId = 'ag-grid-flashing-effect';
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.innerHTML = `
+      @keyframes flashing-bg {
+        0% { opacity: 1; }
+        50% { opacity: 0.5; }
+        100% { opacity: 1; }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+
 import {Endpoints, Services} from 'src/services/Endpoints'
 import {
   Autocomplete, Checkbox,
@@ -76,7 +94,8 @@ import {
   Paper,
   List,
   ListItemButton,
-  ClickAwayListener
+  ClickAwayListener,
+  Menu
 } from '@mui/material'
 import {AgGridReact} from "ag-grid-react";
 import {Edit, FilterAlt, PrintOutlined, RefreshOutlined, Save, SaveAs, Close} from "@mui/icons-material";
@@ -101,6 +120,22 @@ import jsPDF from "jspdf";
 import "jspdf-autotable";
 import arabicFontBase64 from "../../../public/fonts/font";
 import {FilterFormat} from "services/helper/FilterFormat";
+import {saveReportSession} from 'src/services/helper/reportSessionHelper'
+import {
+  setUpdateRefValue,
+  setUpdateRefRow,
+  getUpdateRefValue,
+  hasUpdateRefValue,
+  clearUpdateRefRow,
+  clearAllUpdateRef,
+  getAllUpdates,
+  removeUpdateRefByRowId,
+  getRowId as getRowIdFromSettings,
+  normalizeUpdateRef,
+  cloneUpdateRefToOriginal,
+  restoreUpdateRefFromOriginal
+} from './updateRefHelpers'
+import {processColumnDefinitions, processColumnsConfig} from './convertStringFunctions'
 
 // ** Utils Import
 
@@ -137,6 +172,7 @@ const SGrid = props => {
     setOutGridApi,
     setEventRowSelected,
     pageName,
+    pageId,
     paramsPage,
     fixedTIncludes,
     groupBy,
@@ -144,14 +180,17 @@ const SGrid = props => {
     reportTitle,
     uniqueIdPath,
     columnsConfig,
-    dataAsObject = false
+    dataAsObject = false,
+    isRerender = false,
+    updateRef
   } = 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 colDefs = useRef([])
+  const originalRefData = useRef([])
   const [gridApi, setGridApi] = useState(null)
   const [includes, setIncludes] = useState([])
   const [isPagination, setIsPagination] = useState(true)
@@ -163,6 +202,7 @@ const SGrid = props => {
   const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
   const router = useRouter()
   const authValues = useContext(AuthContext)
+  const contextValues = useContext(SystemContext)
   const [isTemplateEditing, setIsTemplateEditing] = useState(false)
   const [isDownloading, setIsDownloading] = useState(false)
   const [finalRequestObject, setFinalRequestObject] = useState(defaultFinalRequest)
@@ -191,6 +231,87 @@ const SGrid = props => {
     Tfilter: [],
     LocalTfilter: [],
   })
+
+  // Persistence Key helper
+  const getSessionKey = useCallback(() => {
+    const reportId = builderData?.id || builderModel?.id;
+    const pId = pageId || router.query?.pageId;
+    if (pId) return `RB_SESSION_FILTERS_PAGE_${pId}`;
+    if (reportId) return `RB_SESSION_FILTERS_REP_${reportId}`;
+    return null;
+  }, [builderData?.id, builderModel?.id, pageId, router.query?.pageId]);
+
+  // Clone updateRef to originalRefData when it first gets data
+  useEffect(() => {
+    if (updateRef && updateRef.current && Array.isArray(updateRef.current) && updateRef.current.length > 0) {
+      // Only clone if originalRefData is empty (first time updateRef has data)
+      if (!originalRefData.current || originalRefData.current.length === 0) {
+        cloneUpdateRefToOriginal(updateRef, originalRefData);
+      }
+    }
+  }, [updateRef?.current?.length]); // Watch for when updateRef gets data
+
+  // Load filters from sessionStorage on mount
+  useEffect(() => {
+    const key = getSessionKey();
+    if (!key) return;
+
+    try {
+      // Check if it's a refresh
+      let isRefresh = false;
+      try {
+        const navEntries = performance.getEntriesByType('navigation');
+        isRefresh = navEntries.length > 0 && navEntries[0].type === 'reload';
+      } catch (e) {
+        console.warn('SGrid: performance.getEntriesByType not supported', e);
+      }
+
+      if (isRefresh) {
+        sessionStorage.removeItem(key);
+        return;
+      }
+
+      const stored = sessionStorage.getItem(key);
+      if (stored) {
+        // If externalFilter is provided via props (routing payload), it should probably take precedence
+        // but let's see if it's actually passed. In ReportViewer, it's passed as 'filter' prop.
+        if (externalFilter) {
+          return;
+        }
+
+        const parsed = JSON.parse(stored);
+
+        if (parsed.Filter) setFilter(parsed.Filter);
+        if (parsed.selectedSearchObjects) setSelectedSearchObjects(parsed.selectedSearchObjects);
+        if (parsed.selectParams) setSelectParams(parsed.selectParams);
+      }
+    } catch (e) {
+      console.error('SGrid: Failed to restore session filters', e);
+    }
+  }, [getSessionKey, externalFilter]);
+
+  // Save filters to sessionStorage whenever they change
+  useEffect(() => {
+    const key = getSessionKey();
+    if (!key) return;
+
+    const timeout = setTimeout(() => {
+      try {
+        const toStore = {
+          Filter,
+          selectedSearchObjects,
+          selectParams
+        };
+        // Always store current state. If user cleared all filters, we want to remember it's empty in this session.
+        // We only avoid storing if the state is exactly the default/initial state and we haven't modified it yet.
+        sessionStorage.setItem(key, JSON.stringify(toStore));
+      } catch (e) {
+        console.error('SGrid: Failed to save session filters', e);
+      }
+    }, 1000); // debounce saving
+
+    return () => clearTimeout(timeout);
+  }, [Filter, selectedSearchObjects, selectParams, getSessionKey]);
   const [openDialogs, setOpenDialogs] = useState({
     addTemplate: false,
     CustomFilter: false,
@@ -277,7 +398,7 @@ const SGrid = props => {
         if (c.colId === "IZ_groupCount") {
           return {field: "IZ_groupCount", headerName: "Group Count"};
         }
-        return colDefs.find(cd => cd.field === c.colId);
+        return colDefs.current.find(cd => cd.field === c.colId);
       })
       .filter(Boolean);
 
@@ -552,7 +673,15 @@ const SGrid = props => {
   async function handleResetColsToStudio() {
     try {
       setBuilderTFilter(builderData?.filter?.Tfilter ?? [])
-      console.log(builderModel)
+      setFilter(pre => ({
+        ...pre,
+        LocalTfilter: [
+          ...(builderData?.filter?.fixedTFilter || []).map(f => ({...f})),
+          ...(builderData?.filter?.LocalTfilter || []).map(f => ({...f}))
+        ],
+        Tfilter: builderData?.filter?.Tfilter || [],
+        customFilterCode: builderData?.filter?.customFilterCode || ''
+      }))
       const allowedAggFuncs = ["sum", "avg", "min", "max"];
       const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
       let defaultCols = getDefaultColDefs()
@@ -567,7 +696,8 @@ const SGrid = props => {
           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 processedColumnsConfig = processColumnsConfig(columnsConfig ?? []);
+          const externalColConfig = processedColumnsConfig.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;
@@ -583,8 +713,15 @@ const SGrid = props => {
           }
 
           if (propertyType === 'Double') {
+            const decimals = col.formatting?.decimals ?? 0;
+            valueFormatter =
+              `return params?.value != null ? numeral(params.value.toFixed(${decimals})).format('0,0.${'0'.repeat(decimals)}') : ''`;
+          }
+
+          if (propertyType === 'Int' && col.formatting?.decimals > 0) {
+            const decimals = col.formatting.decimals;
             valueFormatter =
-              `return params?.value != null ? numeral(params.value.toFixed(2)).format('0,0') : ''`;
+              `return params?.value != null ? numeral(params.value.toFixed(${decimals})).format('0,0.${'0'.repeat(decimals)}') : ''`;
           }
 
           if (propertyType === 'Enum') {
@@ -593,7 +730,8 @@ const SGrid = props => {
               `return params?.value != null ? enumTrans('${enumName}', params.value) : ''`;
           }
 
-          const isNumericAgg = (propertyType === 'Int' || propertyType === 'Double') &&
+          const isNumeric = propertyType === 'Int' || propertyType === 'Double';
+          const isNumericAgg = isNumeric &&
             !col.field?.path?.toLowerCase().endsWith('id');
 
           const isImage = col.image === true;
@@ -608,7 +746,173 @@ const SGrid = props => {
               ? "agCheckboxCellRenderer"
               : null)),
             width: isImage ? 90 : undefined,
-            cellStyle: isImage ? {display: 'flex', alignItems: 'center', justifyContent: 'center'} : undefined,
+            cellStyle: (params) => {
+              let style = isImage ? {display: 'flex', alignItems: 'center', justifyContent: 'center'} : {};
+              const formatting = col.formatting;
+              if (formatting) {
+                if (formatting.fixedStyle) {
+                  style = {...style, ...formatting.fixedStyle};
+                  if (formatting.fixedStyle.flashing) {
+                    style.animation = 'flashing-bg 1s infinite';
+                  }
+                }
+                if (formatting.conditions && formatting.conditions.length > 0) {
+                  const val = params.value;
+                  for (const cond of formatting.conditions) {
+                    let match = false;
+                    const baseField = cond.baseField || 'self';
+                    let currentVal;
+                    if (baseField === 'self') {
+                      currentVal = val;
+                    } else {
+                      // Resolve field path from data
+                      // First try as is
+                      currentVal = params.node.data[baseField];
+
+                      // If not found and contains dots, try nested path
+                      if ((currentVal === undefined || currentVal === null) && baseField.includes('.')) {
+                        currentVal = baseField.split('.').reduce((obj, key) => (obj && obj[key] !== undefined) ? obj[key] : undefined, params.node.data);
+                      }
+                    }
+
+                    const isNumericValue = typeof currentVal === 'number' || (!isNaN(parseFloat(currentVal)) && isFinite(currentVal));
+                    let condVal;
+                    if (cond.valueType === 'field' && cond.compareField) {
+                      const compareField = cond.compareField;
+                      // Resolve field path from data
+                      // First try as is
+                      condVal = params.node.data[compareField];
+
+                      // If not found and contains dots, try nested path
+                      if ((condVal === undefined || condVal === null) && compareField.includes('.')) {
+                        condVal = compareField.split('.').reduce((obj, key) => (obj && obj[key] !== undefined) ? obj[key] : undefined, params.node.data);
+                      }
+                    } else if (cond.valueType === 'expression' && cond.expression) {
+                      try {
+                        // Math Expression evaluation
+                        // Replace "FieldPath" with actual values from row data
+                        let expr = cond.expression;
+                        const fieldRegex = /"([^"]+)"/g;
+                        let match;
+                        let hasMissingValue = false;
+                        const fieldValues = {};
+
+                        // Find all fields in quotes
+                        while ((match = fieldRegex.exec(cond.expression)) !== null) {
+                          const fullMatch = match[0];
+                          const path = match[1];
+                          let val;
+                          let fieldFound = false;
+
+                          if (path === 'self') {
+                            val = params.value;
+                            fieldFound = true;
+                          } else {
+                            // Resolve field path from data
+                            // First try as is (handles fieldName with underscores)
+                            val = params.node.data[path];
+
+                            if (val !== undefined) {
+                              fieldFound = true;
+                            } else if (path.includes('.')) {
+                              // If not found and contains dots, try nested path
+                              val = path.split('.').reduce((obj, key) => (obj && obj[key] !== undefined) ? obj[key] : undefined, params.node.data);
+                              if (val !== undefined) {
+                                fieldFound = true;
+                              }
+                            }
+                          }
+
+                          if (fieldFound) {
+                            // If it's a string that is not a number, wrap it in single quotes to make it a string literal in the expression
+                            // unless it's already a number
+                            if (typeof val === 'string' && isNaN(parseFloat(val))) {
+                              fieldValues[fullMatch] = `'${val.replace(/'/g, "\\'")}'`;
+                            } else if (typeof val === 'number') {
+                              fieldValues[fullMatch] = val;
+                            } else if (!isNaN(parseFloat(val)) && isFinite(val)) {
+                              fieldValues[fullMatch] = parseFloat(val);
+                            } else if (val === null) {
+                              fieldValues[fullMatch] = 'null';
+                            } else if (typeof val === 'boolean') {
+                              fieldValues[fullMatch] = val;
+                            } else {
+                              // Default to string if we can't be sure
+                              fieldValues[fullMatch] = `'${String(val).replace(/'/g, "\\'")}'`;
+                            }
+                          }
+                        }
+
+                        // Replace fields with their values
+                        // Sort keys by length descending to avoid partial replacements (e.g., "Field" before "FieldLonger")
+                        const sortedKeys = Object.keys(fieldValues).sort((a, b) => b.length - a.length);
+                        sortedKeys.forEach(key => {
+                          // Escape special characters in key for RegExp
+                          const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                          expr = expr.replace(new RegExp(escapedKey, 'g'), fieldValues[key]);
+                        });
+
+                        // Use Function constructor for evaluation
+                        // Strip potentially dangerous characters while allowing math, comparison, ternary, and basic logical operators
+                        // We allow: numbers, operators (+-*/), comparison (><=!|&), ternary (?:), parens, dots, spaces, commas, and some math words
+                        // Updated to allow keywords for if and switch statements
+                        // Also added ' for string literals
+                        const safeExpr = expr.replace(/[^0-9+\-*/().\s><=!|&?:,;{}'a-zA-Z\\]/g, '');
+                        // Check if it already contains 'return', otherwise wrap it if it looks like a simple expression
+                        const finalCode = safeExpr.trim().startsWith('if') || safeExpr.trim().startsWith('switch') || safeExpr.includes('return')
+                          ? safeExpr
+                          : `return ${safeExpr}`;
+                        condVal = new Function(finalCode)();
+                      } catch (e) {
+                        console.error("Math expression evaluation failed:", e);
+                        condVal = undefined;
+                      }
+                    } else {
+                      condVal = cond.value;
+                    }
+
+                    const isCondNumeric = typeof condVal === 'number' || (!isNaN(parseFloat(condVal)) && isFinite(condVal));
+                    const finalCondVal = isCondNumeric ? parseFloat(condVal) : condVal;
+                    const compareVal = isNumericValue ? parseFloat(currentVal) : currentVal;
+
+                    if (cond.valueType === 'expression') {
+                      match = !!condVal;
+                    } else {
+                      switch (cond.operator) {
+                        case '==':
+                          match = compareVal == finalCondVal;
+                          break;
+                        case '!=':
+                          match = compareVal != finalCondVal;
+                          break;
+                        case '>':
+                          match = compareVal > finalCondVal;
+                          break;
+                        case '<':
+                          match = compareVal < finalCondVal;
+                          break;
+                        case '>=':
+                          match = compareVal >= finalCondVal;
+                          break;
+                        case '<=':
+                          match = compareVal <= finalCondVal;
+                          break;
+                        case 'contains':
+                          match = String(compareVal).toLowerCase().includes(String(finalCondVal).toLowerCase());
+                          break;
+                      }
+                    }
+                    if (match) {
+                      style = {...style, ...cond.style};
+                      if (cond.style.flashing) {
+                        style.animation = 'flashing-bg 1s infinite';
+                      }
+                    }
+                  }
+                }
+              }
+              return style;
+            },
             allowedAggFuncs: isNumericAgg ? allowedAggFuncs : [],
             valueFormatter: valueFormatter
               ? applyValueFormatter(valueFormatter)
@@ -655,10 +959,11 @@ const SGrid = props => {
       }))
       setSelectParams(localSelectParams);
       if (extraCols != null) {
-        localColDefs = [...extraCols, ...localColDefs];
+        const processedExtraCols = processColumnDefinitions(extraCols);
+        localColDefs = [...processedExtraCols, ...localColDefs];
       }
       localColDefs = [...localColDefs, ...defaultCols];
-      setColDefs([
+      colDefs.current = ([
         {
           field: 'IZ_groupCount',
           headerName: 'Group Count',
@@ -705,7 +1010,8 @@ const SGrid = props => {
         tableCols = processColumns(tableCols)
         let localColDefs = [...tableCols, ...defaultCols]
         if (extraCols != null) {
-          localColDefs = [...extraCols, ...localColDefs]
+          const processedExtraCols = processColumnDefinitions(extraCols);
+          localColDefs = [...processedExtraCols, ...localColDefs]
         }
         const localSelectTFilter = response.data.map(x => ({
           friendlyName: x.fieldName,
@@ -714,9 +1020,9 @@ const SGrid = props => {
           propertyType: x.type,
         }))
         setSelectTFilter(localSelectTFilter)
-        setColDefs(localColDefs)
+        colDefs.current = localColDefs
       } else {
-        setColDefs([])
+        colDefs.current = []
       }
     } catch (error) {
 
@@ -753,92 +1059,161 @@ const SGrid = 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>;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
 
-    // Determine behavior based on routing.type
-    const type = routing.type || 'Route';
+    const routes = tRouting?.filter(r => r.fieldName === fieldName || r.headerName === fieldName) || [];
+    if (routes.length === 0) return <span>{value}</span>;
 
-    // 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 handleRouteClick = (routing) => {
+      setAnchorEl(null);
+      // Determine behavior based on routing.type
+      const type = routing.type || 'Route';
 
-    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);
+
+          if (routing.customFilterCode) {
+            try {
+              // Create function with access to authContext (if needed) and row data
+              const executeCode = new Function('context', 'authContext', 'row', `
+                let customFilter = [];
+                try {
+                  ${routing.customFilterCode}
+                } catch (e) {
+                  console.error('Inner error in routing customFilterCode:', e);
+                }
+                return customFilter;
+              `);
+              const customFilterResult = executeCode(contextValues, authValues, data);
+
+              if (customFilterResult && Array.isArray(customFilterResult)) {
+                externalFilter = {Tfilter: FilterFormat(customFilterResult)};
+              } else if (customFilterResult && typeof customFilterResult === 'object') {
+                // If it returned { Tfilter: [...] } directly
+                externalFilter = customFilterResult;
+              }
+            } catch (error) {
+              console.error('Error executing routing custom filter code:', error);
+            }
+          }
+
+          if (!externalFilter) {
+            const raw = routing.externalFilterJson || '';
+            const replaced = raw.replace(/\{\{(.*?)\}\}/g, (_, key) => {
+              const v = data?.[key];
+              return v != null ? String(v) : '';
+            });
+            try {
+              externalFilter = replaced ? JSON.parse(replaced) : null;
+            } catch (e) {
+              console.error('Invalid externalFilterJson after replacement', e);
+            }
+          }
+
+          if (externalFilter && routing.customFilterCode) {
+            externalFilter.customFilterCode = routing.customFilterCode;
           }
 
           const builderId = context?.builderId;
+          const targetPageId = routing.pageId;
           const payload = {
-            pageId: routing.pageId ?? null,
+            pageId: targetPageId ?? null,
             externalFilter,
-            id: builderId ?? null
+            id: targetPageId ? null : (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 {
+          let url = base;
+          if (targetPageId) {
+            url += `?pageId=${encodeURIComponent(targetPageId)}`;
+          } else if (builderId) {
+            url += `?id=${encodeURIComponent(builderId)}`;
+          }
+
+          try {
+            const sessionId = saveReportSession(payload);
+            if (sessionId) {
+              url += (url.includes('?') ? '&' : '?') + `sessionId=${sessionId}`;
+            } else {
+              // fallback to session storage if localStorage fails
               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 {}
+              sessionStorage.setItem('RB_PAYLOAD', json);
             }
+          } catch (e) {
+            console.error('Failed to set session payload', e);
           }
+          router.push(url).then(() => {
+          });
         } catch (e) {
           console.error('Filter routing error', e);
         }
       } else {
+        // Build finalRoute for Route type
+        let finalRoute = null;
+        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}`;
+          });
+        }
+
         if (finalRoute && finalRoute !== '#') {
-          window.open(finalRoute, "_blank", "noopener,noreferrer");
+          const target = routing.target || '_self';
+
+          if (target === '_blank' || target === '_parent' || target === '_top') {
+            // Open in new tab/window or specific frame
+            window.open(finalRoute, target);
+          } else {
+            // Default: navigate in same tab using Next.js router
+            router.push(finalRoute);
+          }
         }
       }
     };
 
+    const handleClick = (event) => {
+      if (routes.length > 1) {
+        setAnchorEl(event.currentTarget);
+      } else {
+        handleRouteClick(routes[0]);
+      }
+    };
+
     return (
-      <span
-        style={{
-          color: '#1976d2',
-          fontWeight: 600,
-          cursor: 'pointer',
-        }}
-        onClick={handleClick}
-      >
-      {value}
-    </span>
+      <>
+        <span
+          style={{
+            color: '#1976d2',
+            fontWeight: 600,
+            cursor: 'pointer',
+          }}
+          onClick={handleClick}
+        >
+          {value}
+        </span>
+        <Menu
+          anchorEl={anchorEl}
+          open={open}
+          onClose={() => setAnchorEl(null)}
+        >
+          {routes.map((r, idx) => (
+            <MenuItem key={idx} onClick={() => handleRouteClick(r)}>
+              {r.name || `Route ${idx + 1}`}
+            </MenuItem>
+          ))}
+        </Menu>
+      </>
     );
   };
 
@@ -1059,13 +1434,30 @@ const SGrid = props => {
       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]
+      let localFilter = externalFilter && !Array.isArray(externalFilter) ? {...externalFilter} : {}
+      // Merge with Filter but be careful not to overwrite Tfilter/TFilter with empty ones
+      const {Tfilter: _tf, TFilter: _tF, customFilterCode: _cfc, ...otherInternalFilter} = Filter || {}
+      localFilter = {...localFilter, ...otherInternalFilter}
+
+      let localTFilter = []
+      if (externalFilter?.Tfilter) localTFilter.push(...externalFilter.Tfilter)
+      if (externalFilter?.TFilter) localTFilter.push(...externalFilter.TFilter)
+      if (Filter?.Tfilter) localTFilter.push(...Filter.Tfilter)
+      if (Filter?.TFilter) localTFilter.push(...Filter.TFilter)
+
+      // Also support LocalTfilter (this is where CustomFilterDialog often stores its filters)
+      if (Filter?.LocalTfilter) localTFilter.push(...Filter.LocalTfilter)
+      if (externalFilter?.LocalTfilter) localTFilter.push(...externalFilter.LocalTfilter)
+
+      // Support for routing-passed externalFilter that might be directly inside externalFilter (not under Tfilter)
+      if (Array.isArray(externalFilter) && localTFilter.length === 0) {
+        localTFilter = [...externalFilter];
+      }
       localTFilter = [...localTFilter, ...fixedTFilter, ...localFixedTFilter, ...builderTFilter]
 
+      // Extract customFilterCode from externalFilter if present (e.g. from routing)
+      let currentCustomFilterCode = Filter?.customFilterCode || externalFilter?.customFilterCode || "";
+
       // Apply explicit user-selected search filters (selectedSearchObjects), grouped by path
       if ((selectedSearchObjects?.length ?? 0) > 0) {
         const byPath = selectedSearchObjects.reduce((acc, item) => {
@@ -1099,8 +1491,6 @@ const SGrid = props => {
         localTFilter = [...localTFilter, ...grouped];
       }
 
-      localTFilter = localTFilter.filter(x => x.value !== null && x.value !== undefined && x.value !== '')
-
       delete localFilter.Tfilter
       delete localFilter.fixedTfilter
       delete localFilter.fixedTFilter
@@ -1112,8 +1502,8 @@ const SGrid = props => {
       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 (colDefs.current && gridApi) {
+        let resultColDef = [...colDefs.current]
         if (request.rowGroupCols.length > 0) {
         }
         // gridApi.setGridOption('columnDefs', resultColDef)
@@ -1121,7 +1511,7 @@ const SGrid = props => {
       }
       // 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)) : []
+      let nonFixedLocal = Array.isArray(localTFilter) ? localTFilter.filter(it => it != null && !(it.fixed === true && it.value === null)) : []
 
       // 2) Choose ONE fixed source by priority: component state -> external -> builder
       const extFixed = Array.isArray(externalFilter?.fixedTFilter)
@@ -1129,12 +1519,80 @@ const SGrid = props => {
         : (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 : []))
+        : (extFixed.length > 0 ? extFixed : (Array.isArray(builderTFilter) && builderTFilter.length > 0 ? builderTFilter : []))
 
       // 3) Merge and format once
-      const mergedForFormat = [...nonFixedLocal]
-      console.log("Merged for format:", mergedForFormat)
-      let formattedT = FilterFormat(mergedForFormat)
+      const mergedForFormat = [...nonFixedLocal, ...fixedSource]
+      let formattedT = FilterFormat(mergedForFormat).filter(x => !x?.isCustom)
+
+      // Dynamic placeholder replacement for authValues
+      if (formattedT && Array.isArray(formattedT)) {
+        formattedT = formattedT.map(f => {
+          if (typeof f.value === 'string' && f.value.includes('{{auth.')) {
+            const replaced = String(f.value).replace(/\{\{auth\.(.*?)\}\}/g, (_, path) => {
+              return path.split('.').reduce((acc, key) => acc && acc[key], authValues) ?? '';
+            });
+            return {...f, value: replaced};
+          }
+          return f;
+        });
+      }
+
+      // Dynamic placeholder replacement for authValues
+      if (formattedT && Array.isArray(formattedT)) {
+        formattedT = formattedT.map(f => {
+          if (typeof f.value === 'string' && f.value.includes('{{context.')) {
+            const replaced = String(f.value).replace(/\{\{context\.(.*?)\}\}/g, (_, path) => {
+              return path.split('.').reduce((acc, key) => acc && acc[key], contextValues) ?? '';
+            });
+            return {...f, value: replaced};
+          }
+          return f;
+        });
+      }
+
+      // 4) Execute custom filter code if present
+      let customFilterResult = null
+      if (currentCustomFilterCode && currentCustomFilterCode.trim()) {
+        try {
+          // Wrap code in a function that provides contextValues
+          const executeCode = new Function('context', 'authContext', 'filters', 'localFilter', `
+            let customFilter = [];
+            try {
+              ${currentCustomFilterCode}
+            } catch (e) {
+              console.error('Inner error in customFilterCode:', e);
+            }
+            return customFilter;
+          `);
+          customFilterResult = executeCode(contextValues, authValues, formattedT, localFilter)
+
+          // Validate that result is an array
+          if (customFilterResult && !Array.isArray(customFilterResult)) {
+            console.error('Custom filter must return an array, got:', typeof customFilterResult)
+            customFilterResult = null
+          }
+        } catch (error) {
+          console.error('Error executing custom filter code in SGrid:', error)
+          customFilterResult = null
+        }
+      }
+
+      // Merge custom filter array with formattedT if present
+      if (customFilterResult && Array.isArray(customFilterResult)) {
+        formattedT = [...formattedT, ...customFilterResult]
+      }
+
+      // Final Deduplication after all merges and custom code execution
+      if (Array.isArray(formattedT)) {
+        formattedT = formattedT.filter((f, idx, self) =>
+            idx === self.findIndex(t => (
+              t.path === f.path &&
+              t.method === f.method &&
+              JSON.stringify(t.value) === JSON.stringify(f.value)
+            ))
+        );
+      }
 
       let data = {
         ...localFilter,
@@ -1144,7 +1602,7 @@ const SGrid = props => {
       }
       // 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);
+        data.tFilter = data.tFilter.filter(f => f == null ? false : (f.value !== null && !f.isCustom));
       }
       try {
         if (request.rowGroupCols.length !== request.groupKeys.length) {
@@ -1175,6 +1633,33 @@ const SGrid = props => {
           }));
           const aggIds = request.valueCols.map(vc => vc.id);
 
+          // Dynamic placeholder replacement for authValues in selectParams
+          let dynamicSelectParams = selectParams;
+          if (Array.isArray(dynamicSelectParams)) {
+            dynamicSelectParams = dynamicSelectParams.map(p => {
+              if (typeof p.value === 'string' && p.value.includes('{{auth.')) {
+                const replaced = p.value.replace(/\{\{auth\.(.*?)\}\}/g, (_, path) => {
+                  return path.split('.').reduce((acc, key) => acc && acc[key], authValues) ?? '';
+                });
+                return {...p, value: replaced};
+              }
+              return p;
+            });
+          }
+
+          // Dynamic placeholder replacement for contextValues in selectParams
+          if (Array.isArray(dynamicSelectParams)) {
+            dynamicSelectParams = dynamicSelectParams.map(p => {
+              if (typeof p.value === 'string' && p.value.includes('{{context.')) {
+                const replaced = p.value.replace(/\{\{context\.(.*?)\}\}/g, (_, path) => {
+                  return path.split('.').reduce((acc, key) => acc && acc[key], contextValues) ?? '';
+                });
+                return {...p, value: replaced};
+              }
+              return p;
+            });
+          }
+
           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 = {
@@ -1183,11 +1668,22 @@ const SGrid = props => {
             orderBy: orderBy
           }
 
+          // Final deduplication for group keys vs base filters
+          if (Array.isArray(data.tFilter)) {
+            data.tFilter = data.tFilter.filter((f, idx, self) =>
+                idx === self.findIndex(t => (
+                  t.path === f.path &&
+                  t.method === f.method &&
+                  JSON.stringify(t.value) === JSON.stringify(f.value)
+                ))
+            );
+          }
+
           // if (updateAggregation !== true) {
           //   data.aggregators = []
           // }
           data.selectFields = selectedFields
-          data.selectParams = selectParams
+          data.selectParams = dynamicSelectParams
           data.rawSql = builderData.rawSql
 
           const response = await Services.PostService(groupEndPoint, false, data, {
@@ -1259,8 +1755,46 @@ const SGrid = props => {
               ...data,
               tFilter: [...tFilters, ...data.tFilter]
             }
+
+            // Final deduplication for group keys vs base filters
+            if (Array.isArray(data.tFilter)) {
+              data.tFilter = data.tFilter.filter((f, idx, self) =>
+                  idx === self.findIndex(t => (
+                    t.path === f.path &&
+                    t.method === f.method &&
+                    JSON.stringify(t.value) === JSON.stringify(f.value)
+                  ))
+              );
+            }
           }
           let orderBy = request.sortModel.filter(x => !x.colId.endsWith("IZ_groupCount")).map(sort => handleGetSortObject(sort.colId, sort.sort, false))
+
+          // Dynamic placeholder replacement for authValues in selectParams
+          let dynamicSelectParams = selectParams;
+          if (Array.isArray(dynamicSelectParams)) {
+            dynamicSelectParams = dynamicSelectParams.map(p => {
+              if (typeof p.value === 'string' && p.value.includes('{{auth.')) {
+                const replaced = p.value.replace(/\{\{auth\.(.*?)\}\}/g, (_, path) => {
+                  return path.split('.').reduce((acc, key) => acc && acc[key], authValues) ?? '';
+                });
+                return {...p, value: replaced};
+              }
+              return p;
+            });
+          }
+
+          if (Array.isArray(dynamicSelectParams)) {
+            dynamicSelectParams = dynamicSelectParams.map(p => {
+              if (typeof p.value === 'string' && p.value.includes('{{context.')) {
+                const replaced = p.value.replace(/\{\{context\.(.*?)\}\}/g, (_, path) => {
+                  return path.split('.').reduce((acc, key) => acc && acc[key], contextValues) ?? '';
+                });
+                return {...p, value: replaced};
+              }
+              return p;
+            });
+          }
+
           if (data.tIncludes != null)
             data = {
               ...data,
@@ -1281,7 +1815,7 @@ const SGrid = props => {
             data.aggregators = []
           }
           data.selectFields = selectedFields
-          data.selectParams = selectParams
+          data.selectParams = dynamicSelectParams
           data.lastRowParams = lastRowRef.current[pageNumber];
 
           data.isPaginationByFilter = builderData?.isRaw === false
@@ -1292,7 +1826,6 @@ const SGrid = props => {
               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,
@@ -1341,7 +1874,7 @@ const SGrid = props => {
         return {success: false}
       }
     },
-    [externalFilter, includes, paramsPage, Filter, selectedFields, isPagination, selectedSearchObjects, builderData]
+    [externalFilter, includes, paramsPage, Filter, selectedFields, isPagination, selectedSearchObjects, builderData, authValues, contextValues]
   )
   const datasource = useMemo(() => createServerSideDatasource(getRowsFromApi), [getRowsFromApi]);
 
@@ -1416,7 +1949,19 @@ const SGrid = props => {
   }
 
   function handleFilterChange(field, value) {
-    handleChange(setFilter, field, value)
+    if (field === 'LocalTfilter') {
+      // When updating LocalTfilter, preserve main filters from builderModel
+      setFilter(preValue => {
+        const mainFilters = (preValue.LocalTfilter || []).filter(f => f.isMainFilter === true)
+        const newFilters = Array.isArray(value) ? value : []
+        return {
+          ...preValue,
+          LocalTfilter: [...mainFilters, ...newFilters]
+        }
+      })
+    } else {
+      handleChange(setFilter, field, value)
+    }
   }
 
   async function handleGetTemplates() {
@@ -1524,14 +2069,53 @@ const SGrid = props => {
   }
 
   const restoreState = () => {
-    if (gridApi !== null && colDefs !== null && selectedTemplate != null) {
+    let builderMainFilter = builderModel?.filter?.LocalTfilter ?? []
+
+    if (gridApi !== null && colDefs.current !== null && selectedTemplate != null) {
+      console.log(selectedTemplate)
       gridApi.applyColumnState({
         state: selectedTemplate.value,
         applyOrder: true,
       });
-    }
-    if (selectedTemplate.filterValue != null && (Filter.Tfilter == null || Filter.Tfilter.length == 0)) {
-      setFilter(selectedTemplate.filterValue);
+      if (selectedTemplate.filterValue != null) {
+        let fixedLocalFilters = builderModel?.filter?.fixedTFilter ?? []
+        fixedLocalFilters = fixedLocalFilters.filter(x => x.fixed === true)
+        fixedLocalFilters = fixedLocalFilters.map(x => ({
+          ...x,
+          isMainFilter: x.fixed === true ? false : x.isMainFilter
+        }))
+        let templateFilter = selectedTemplate?.filterValue?.LocalTfilter ?? []
+        let nonExistsFilter = fixedLocalFilters.filter(x => !templateFilter.some(y => y.path === x.path && y.method === x.method && y.isOrList === x.isOrList))
+        let finalLocalFilter = [...templateFilter, ...nonExistsFilter]
+
+        // Handle Tfilter from template
+        const templateTfilter = selectedTemplate?.filterValue?.Tfilter ?? []
+        const templateCustomFilterCode = selectedTemplate?.filterValue?.customFilterCode ?? ''
+
+        setFilter(preValue => ({
+          ...preValue,
+          LocalTfilter: [...finalLocalFilter, ...builderMainFilter],
+          Tfilter: templateTfilter,
+          customFilterCode: templateCustomFilterCode
+        }));
+      }
+    } else {
+      let fixedLocalFilters = builderModel?.filter?.fixedTFilter ?? []
+      fixedLocalFilters = fixedLocalFilters.filter(x => x.fixed === true)
+
+      let finalLocalFilter = [...fixedLocalFilters]
+
+      // When no template, use builderModel filters
+      const builderTfilter = builderModel?.filter?.Tfilter ?? []
+      const builderCustomFilterCode = builderModel?.filter?.customFilterCode ?? ''
+
+      setFilter(preValue => ({
+        ...preValue,
+        LocalTfilter: [...finalLocalFilter, ...builderMainFilter],
+        Tfilter: builderTfilter,
+        customFilterCode: builderCustomFilterCode
+      }));
+
     }
   };
 
@@ -1566,7 +2150,6 @@ const SGrid = props => {
     };
 
     setSelectedSearchObjects(prev => [...prev, newObj]);
-    console.log(newObj)
     setSearchTerm('');
     setSearchPopoverOpen(false);
     debouncedRefresh();
@@ -1575,18 +2158,16 @@ const SGrid = props => {
 
   useEffect(() => {
     if (builderData) {
-
       if (builderData.isRaw) {
         handleGetRawColumns(builderData.rawSql)
       } else {
         handleResetColsToStudio()
       }
     }
-  }, [builderData]);
+  }, [builderData, isRerender]);
 
   useEffect(() => {
     if (builderModel != null) {
-      console.log(builderModel)
       let rawSql = builderModel.rawSql;
       if (builderModel.isRaw === true) {
         const localSelectParams = builderModel.selectionParams.map((x, index) => ({
@@ -1607,11 +2188,44 @@ const SGrid = props => {
           return param.value;
         });
       }
-      setBuilderData({...builderModel, rawSql: rawSql})
-      setFilter(preValue => ({
-        ...preValue,
-        LocalTfilter: [...(builderModel?.filter?.fixedTFilter || [])]
-      }))
+
+      setBuilderData(prev => {
+        // Only update if builderModel data changed or rawSql changed
+        const isSameModel = prev && JSON.stringify(prev) === JSON.stringify({...builderModel, rawSql});
+        if (isSameModel) return prev;
+        return {...builderModel, rawSql: rawSql};
+      });
+
+      // We explicitly skip updating setFilter if builderModel triggered it but we just restored from session.
+      // We rely on the fact that if a session restore happened, Filter.LocalTfilter will likely be populated.
+
+      setFilter(preValue => {
+        const fixedTFilter = builderModel?.filter?.fixedTFilter || [];
+        const localTFilter = builderModel?.filter?.LocalTfilter || [];
+        const tFilter = builderModel?.filter?.Tfilter || [];
+        const customFilterCode = builderModel?.filter?.customFilterCode || '';
+
+        // If we already have filters (possibly restored from session), don't overwrite with just fixed filters
+        // unless it's a completely fresh state or fixed filters changed.
+        const isSameFilter = JSON.stringify(preValue.LocalTfilter) === JSON.stringify([...fixedTFilter, ...localTFilter]);
+        const isSameCode = preValue.customFilterCode === customFilterCode;
+
+        if (preValue.LocalTfilter.length > (fixedTFilter.length + localTFilter.length) && isSameCode) {
+          return preValue;
+        }
+
+        if (isSameFilter && isSameCode) return preValue;
+
+        return {
+          ...preValue,
+          Tfilter: tFilter,
+          LocalTfilter: [
+            ...fixedTFilter.map(f => ({...f})),
+            ...localTFilter.map(f => ({...f}))
+          ],
+          customFilterCode: customFilterCode
+        };
+      })
     }
   }, [builderModel]);
 
@@ -1640,39 +2254,38 @@ const SGrid = props => {
   }, [selectParams, builderModel?.isRaw]);
 
   useEffect(() => {
-
     if (gridApi !== null) {
       gridApi.refreshServerSide({purge: !noPurge})
       lastRowRef.current = {}
     }
-  }, [refresh, externalFilter, localRefresh, Filter]);
+  }, [refresh, externalFilter, localRefresh, Filter.Tfilter, Filter.LocalTfilter, Filter.customFilterCode, externalFilter?.customFilterCode]);
 
   useEffect(() => {
-    if (gridApi != null && colDefs != null)
+    if (gridApi != null && colDefs.current != null)
       handleGetTemplates()
-  }, [gridApi, colDefs])
+  }, [gridApi, colDefs.current])
 
   useEffect(() => {
-    if (colDefs.length > 0 && selectedTemplate != null) {
+    if (colDefs.current.length > 0) {
       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 (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)
+  //       }
+  //     }
+  //   }
+  // }, [])
 
   useEffect(() => {
     if (!timerValue || isNaN(timerValue) || timerValue == 0) {
@@ -1705,11 +2318,10 @@ const SGrid = props => {
   }, [externalTimer]); // re// n after each refresh or change in value
 
   return (
-    <Grid item container size={12}>
-      <Grid container item
+    <Grid container size={{ xs: 12 }}>
+      <Grid container
             sx={{backgroundColor: '#fafafb', justifyContent: 'space-between'}} padding={2}
-            size={12}
-      >
+       size={{ xs: 12 }}>
         <Box sx={{display: 'flex'}}>
           {(builderData?.id != null && minimized !== true) &&
             <Box sx={{minWidth: '250px'}}>
@@ -1719,12 +2331,11 @@ const SGrid = props => {
                   size={'small'}
                   value={selectedTemplate}
                   fullWidth
-                  disableClearable
                   options={templates}
                   onChange={(e, value) => {
                     setSelectedTemplate(value)
-                  }
-                  }
+                  }}
+
                   getOptionLabel={option => option.name}
                   renderInput={params => (
                     <TextField
@@ -1745,7 +2356,7 @@ const SGrid = props => {
                       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.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>
@@ -1973,7 +2584,7 @@ const SGrid = props => {
           columnHoverHighlight={true}
           theme={agTheme}
           enableRtl={true}
-          columnDefs={colDefs}
+          columnDefs={colDefs.current}
           rowModelType={"serverSide"}
           onGridReady={onGridReady}
           maxConcurrentDatasourceRequests={0}
@@ -1981,10 +2592,95 @@ const SGrid = props => {
           onRowSelected={onRowSelected}
           // getChildCount={getChildCount}
           sideBar={sideBarConfig}
-          context={{tRouting, builderId: builderData?.id}}   // pass routing and builder id
+          context={{
+            tRouting,
+            builderId: builderData?.id,
+            updateRef: updateRef,
+            settings: builderModel?.settings
+          }}   // pass routing, builder id, updateRef and settings
           gridOptions={{
             enableRangeSelection: true,
             enableCharts: true,
+            getContextMenuItems: (params) => {
+              const rowUniqueId = builderModel?.settings?.rowUniqueId
+              const rowData = params.node?.data
+              const defaultItems = params.defaultItems || []
+
+              if (!updateRef || !rowUniqueId || !rowData) {
+                return defaultItems
+              }
+
+              const rowIdValue = getRowIdFromSettings(rowData, rowUniqueId)
+              const hasUpdate = updateRef.current && Array.isArray(updateRef.current) &&
+                updateRef.current.some(item => item.rowId === rowIdValue)
+
+              const customItems = []
+
+              if (hasUpdate) {
+                customItems.push({
+                  name: 'Remove Row from Update Ref',
+                  icon: '<span class="ag-icon ag-icon-cancel" unselectable="on" role="presentation"></span>',
+                  action: () => {
+                    removeUpdateRefByRowId(updateRef, rowData, rowUniqueId)
+                    params.api.refreshCells({force: true})
+                  }
+                })
+              }
+
+              customItems.push({
+                name: 'Clone Update Ref (Backup)',
+                icon: '<span class="ag-icon ag-icon-copy" unselectable="on" role="presentation"></span>',
+                action: () => {
+                  cloneUpdateRefToOriginal(updateRef, originalRefData)
+                  params.api.refreshCells({force: true})
+                },
+                disabled: !updateRef.current || updateRef.current.length === 0
+              })
+
+              customItems.push({
+                name: 'Restore Update Ref (from Backup)',
+                icon: '<span class="ag-icon ag-icon-undo" unselectable="on" role="presentation"></span>',
+                action: () => {
+                  restoreUpdateRefFromOriginal(updateRef, originalRefData)
+                  params.api.refreshCells({force: true})
+                },
+                disabled: !originalRefData.current || originalRefData.current.length === 0
+              })
+
+              customItems.push({
+                name: 'Normalize Update Ref (Merge Duplicates)',
+                icon: '<span class="ag-icon ag-icon-columns" unselectable="on" role="presentation"></span>',
+                action: () => {
+                  normalizeUpdateRef(updateRef)
+                  params.api.refreshCells({force: true})
+                },
+                disabled: !updateRef.current || updateRef.current.length === 0
+              })
+
+              customItems.push({
+                name: 'Clear All Update Ref',
+                icon: '<span class="ag-icon ag-icon-cancel" unselectable="on" role="presentation"></span>',
+                action: () => {
+                  if (updateRef.current && Array.isArray(updateRef.current)) {
+                    const count = updateRef.current.length
+                    clearAllUpdateRef(updateRef)
+                    params.api.refreshCells({force: true})
+                    console.log(`Cleared ${count} rows from updateRef`)
+                  }
+                },
+                disabled: !updateRef.current || updateRef.current.length === 0
+              })
+
+              if (customItems.length > 0) {
+                return [
+                  ...customItems,
+                  'separator',
+                  ...defaultItems
+                ]
+              }
+
+              return defaultItems
+            }
           }}
           rowSelection="multiple"
           statusBar={{
@@ -2073,29 +2769,34 @@ const SGrid = props => {
         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};
+        {openDialogs.CustomFilter && (
+          <CustomFilterDialog
+            handleToggleDialogs={handleToggleDialogs}
+            Filter={(Filter?.LocalTfilter || []).filter(f => (f.isMainFilter !== true))}
+            customFilterCode={Filter?.customFilterCode}
+            handleFilterChange={handleFilterChange}
+            className={builderData?.reportSource?.fullName}
+            LocalFilter={false}
+
+            isViewer={router.pathname.includes('reportViewer')}
+            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;
               });
-              return arr;
-            });
-          }}
-        />
+            }}
+          />
+        )}
       </Dialog>
 
 
@@ -2166,3 +2867,15 @@ function toNestedByUnderscore(input) {
   return result;
 }
 
+// Export helper functions for use in column configurations
+export {
+  setUpdateRefValue,
+  setUpdateRefRow,
+  getUpdateRefValue,
+  hasUpdateRefValue,
+  clearUpdateRefRow,
+  clearAllUpdateRef,
+  getAllUpdates,
+  removeUpdateRefByRowId
+}
+