robobyte-front-builder 1.0.17 → 1.0.21

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.
@@ -58,25 +58,44 @@ import Grid from '@mui/material/Grid'
 // ** Icons Imports
 // ** Store Imports
 // ** Custom Components Imports
-import {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'
+import {createContext, 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,
+  Autocomplete, Button, Checkbox,
   CircularProgress,
-  Dialog,
+  Dialog, Divider,
   FormControl, FormControlLabel,
   IconButton,
   MenuItem,
   Select,
   TextField,
-  Tooltip,
+  Tooltip, Typography,
   Chip,
   Stack,
   Popper,
   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,23 @@ 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'
+import { AG_COMPONENTS } from 'views/builder/viewer/renderers/dataGridComponents'
 
 // ** Utils Import
 
@@ -113,6 +149,122 @@ const defaultFinalRequest = {
   filter: {},
   params: {}
 }
+
+// ── Templates tool panel ──────────────────────────────────────────────────────
+// Defined outside SGrid so the reference is stable (no remounts on parent renders).
+// State flows in via React Context (AG Grid v33 renders custom components in the
+// same React tree, so context is fully supported).
+const TemplateStateContext = createContext(null)
+
+function SettingsSection({ title, children }) {
+  return (
+    <Box style={{ display: 'block', width: '100%' }}>
+      <Box sx={{
+        px: 2, py: 0.75,
+        bgcolor: 'grey.100',
+        borderTop: '1px solid', borderBottom: '1px solid', borderColor: 'divider',
+      }}>
+        <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.8, color: 'text.secondary' }}>
+          {title}
+        </Typography>
+      </Box>
+      <Box sx={{ p: 2, boxSizing: 'border-box', width: '100%' }}>
+        {children}
+      </Box>
+    </Box>
+  )
+}
+
+function TemplatesToolPanel() {
+  const ctx = useContext(TemplateStateContext)
+  if (!ctx) return null
+  const {
+    templates, selectedTemplate, setSelectedTemplate,
+    handleGetTemplates, handleSaveTemplate,
+    handleToggleDialogs, setIsTemplateEditing,
+    builderData,
+  } = ctx
+
+  return (
+    <Box style={{ display: 'flex', flexDirection: 'column', height: '100%', width: 250 }}>
+      {/* Panel header */}
+      <Box sx={{
+        px: 2, py: 1.5,
+        borderBottom: '1px solid', borderColor: 'divider',
+        bgcolor: 'background.paper',
+        position: 'sticky', top: 0, zIndex: 1,
+      }}>
+        <Typography variant='subtitle2' sx={{ fontWeight: 700, color: 'text.primary' }}>
+          Settings
+        </Typography>
+      </Box>
+
+      {/* Template section */}
+      <SettingsSection title='Template'>
+        {builderData?.id == null ? (
+          <Typography variant='caption' sx={{ color: 'text.disabled' }}>No report loaded</Typography>
+        ) : (
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: '100%' }}>
+            <Autocomplete
+              size='small'
+              value={selectedTemplate}
+              options={templates}
+              onChange={(_, value) => setSelectedTemplate(value)}
+              getOptionLabel={option => option.name}
+              renderInput={params => (
+                <TextField
+                  label='Active Template'
+                  {...params}
+                  onMouseDown={handleGetTemplates}
+                />
+              )}
+            />
+
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, width: '100%' }}>
+              <Button
+                size='small'
+                variant='outlined'
+                startIcon={<Save fontSize='small' />}
+                disabled={selectedTemplate == null}
+                onClick={handleSaveTemplate}
+                fullWidth
+                sx={{ justifyContent: 'flex-start' }}
+              >
+                Save
+              </Button>
+
+              <Button
+                size='small'
+                variant='outlined'
+                startIcon={<SaveAs fontSize='small' />}
+                onClick={() => { setIsTemplateEditing(false); handleToggleDialogs('addTemplate') }}
+                fullWidth
+                sx={{ justifyContent: 'flex-start' }}
+              >
+                Save As New
+              </Button>
+
+              <Button
+                size='small'
+                variant='outlined'
+                startIcon={<Edit fontSize='small' />}
+                disabled={selectedTemplate == null}
+                onClick={() => { setIsTemplateEditing(true); handleToggleDialogs('addTemplate') }}
+                fullWidth
+                sx={{ justifyContent: 'flex-start' }}
+              >
+                Edit
+              </Button>
+            </Box>
+          </Box>
+        )}
+      </SettingsSection>
+    </Box>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
 const SGrid = props => {
   // ** State
   const appContext = useContext(SystemContext);
@@ -137,6 +289,7 @@ const SGrid = props => {
     setOutGridApi,
     setEventRowSelected,
     pageName,
+    pageId,
     paramsPage,
     fixedTIncludes,
     groupBy,
@@ -144,14 +297,26 @@ const SGrid = props => {
     reportTitle,
     uniqueIdPath,
     columnsConfig,
-    dataAsObject = false
+    dataAsObject = false,
+    isRerender = false,
+    updateRef,
+    // nodeId    — builder schema node ID for this ReportViewer (set by ReportViewerRenderer)
+    // reportRefs — shared registry { [nodeId]: updateRef } for all reports on the page
+    nodeId,
+    reportRefs,
+    // Viewer state — passed through to column string functions via convertStringFunctions ctx
+    data: viewerData,
+    dataRef: viewerDataRef,
+    openDialog,
+    closeDialog,
   } = 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 +328,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 +357,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 +524,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 +799,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 +822,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 ?? [], { reportRefs, nodeName: nodeId, data: viewerData, dataRef: viewerDataRef, setData, openDialog, closeDialog });
+          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 +839,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 +856,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 +872,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 +1085,11 @@ const SGrid = props => {
       }))
       setSelectParams(localSelectParams);
       if (extraCols != null) {
-        localColDefs = [...extraCols, ...localColDefs];
+        const processedExtraCols = processColumnDefinitions(extraCols, { reportRefs, nodeName: nodeId, data: viewerData, dataRef: viewerDataRef, setData, openDialog, closeDialog });
+        localColDefs = [...processedExtraCols, ...localColDefs];
       }
       localColDefs = [...localColDefs, ...defaultCols];
-      setColDefs([
+      colDefs.current = ([
         {
           field: 'IZ_groupCount',
           headerName: 'Group Count',
@@ -705,7 +1136,8 @@ const SGrid = props => {
         tableCols = processColumns(tableCols)
         let localColDefs = [...tableCols, ...defaultCols]
         if (extraCols != null) {
-          localColDefs = [...extraCols, ...localColDefs]
+          const processedExtraCols = processColumnDefinitions(extraCols, { reportRefs, nodeName: nodeId, data: viewerData, dataRef: viewerDataRef, setData, openDialog, closeDialog });
+          localColDefs = [...processedExtraCols, ...localColDefs]
         }
         const localSelectTFilter = response.data.map(x => ({
           friendlyName: x.fieldName,
@@ -714,9 +1146,9 @@ const SGrid = props => {
           propertyType: x.type,
         }))
         setSelectTFilter(localSelectTFilter)
-        setColDefs(localColDefs)
+        colDefs.current = localColDefs
       } else {
-        setColDefs([])
+        colDefs.current = []
       }
     } catch (error) {
 
@@ -753,92 +1185,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 {
+          const base = '/builders/report/viewer';
+          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>
+      </>
     );
   };
 
@@ -926,26 +1427,35 @@ const SGrid = props => {
     }
   }
 
-  const sideBarConfig = useMemo(() => ({
-    toolPanels: [
-      {
-        id: 'columns',
-        labelDefault: 'Columns',
-        labelKey: 'columns',
-        iconKey: 'columns',
-        toolPanel: 'agColumnsToolPanel',
-        toolPanelParams: {
-          suppressRowGroups: groupBy != null,
-          suppressValues: groupBy != null,
+  const sideBarConfig = useMemo(
+    () => ({
+      toolPanels: [
+        {
+          id: 'columns',
+          labelDefault: 'Columns',
+          labelKey: 'columns',
+          iconKey: 'columns',
+          toolPanel: 'agColumnsToolPanel',
+          toolPanelParams: {
+            suppressRowGroups: groupBy != null,
+            suppressValues: groupBy != null
+          },
+          minWidth: 225
         },
-        minWidth: 225,
-      },
-
-    ],
-    position: 'left',
-    // ← optionally open this panel by default on init
-    defaultToolPanel: 'columns',
-  }), [groupBy]);  // only re-create if groupBy changes
+        {
+          id: 'templates',
+          labelDefault: 'Templates',
+          labelKey: 'templates',
+          iconKey: 'menu',
+          toolPanel: 'templatesToolPanel',
+          minWidth: 250,
+        }
+      ],
+      position: 'right',
+      defaultToolPanel: '' // closed by default
+    }),
+    [groupBy]
+  )  // only re-create if groupBy changes
   const handleGetAggregationObject = (agg) => {
 
     const matchedCol = builderData.selectedFields.find(col => {
@@ -1059,13 +1569,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 +1626,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 +1637,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 +1646,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 +1654,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 +1737,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 +1768,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 +1803,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 +1890,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 +1950,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 +1961,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 +2009,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 +2084,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 +2204,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 +2285,6 @@ const SGrid = props => {
     };
 
     setSelectedSearchObjects(prev => [...prev, newObj]);
-    console.log(newObj)
     setSearchTerm('');
     setSearchPopoverOpen(false);
     debouncedRefresh();
@@ -1575,18 +2293,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 +2323,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 +2389,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,47 +2453,18 @@ 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'}}>
-
-              <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.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>
@@ -1912,43 +2631,6 @@ const SGrid = props => {
               </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')}>
@@ -1966,6 +2648,16 @@ const SGrid = props => {
 
         </Box>
       </Grid>
+      <TemplateStateContext.Provider value={{
+        templates,
+        selectedTemplate,
+        setSelectedTemplate,
+        handleGetTemplates,
+        handleSaveTemplate,
+        handleToggleDialogs,
+        setIsTemplateEditing,
+        builderData,
+      }}>
       <div style={{width: "100%", height: minimized === true ? "0px" : height ?? "70vh", direction: 'ltr'}}>
         <AgGridReact
 
@@ -1973,7 +2665,7 @@ const SGrid = props => {
           columnHoverHighlight={true}
           theme={agTheme}
           enableRtl={true}
-          columnDefs={colDefs}
+          columnDefs={colDefs.current}
           rowModelType={"serverSide"}
           onGridReady={onGridReady}
           maxConcurrentDatasourceRequests={0}
@@ -1981,10 +2673,107 @@ 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,
+            // Node identity — available inside all column functions as params.context.nodeId / nodeName
+            nodeId: nodeId ?? null,
+            nodeName: nodeId ?? null,   // alias for convenience
+            // Shared registry — access any report's ref: params.context.reportRefs.current['nodeId']
+            reportRefs: reportRefs ?? null,
+            // Returns the latest viewer state snapshot — used by MultiSelectEditor to commit values
+            getViewerContext: () => ({
+              data: viewerData,
+              setData: setData ?? (() => {}),
+              dataRef: viewerDataRef,
+              reportRefs: reportRefs ?? null,
+            }),
+          }}   // pass routing, builder id, updateRef, node identity and reportRefs
           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={{
@@ -2033,14 +2822,21 @@ const SGrid = props => {
           }}
 
           components={{
+            ...AG_COMPONENTS,
             routingCell: RoutingCell,
             imageCell: ImageCell,
             customStatusBar: CustomStatusBar,
-            // agColumnsToolPanel: CustomColumnsToolPanel
-
+            templatesToolPanel: TemplatesToolPanel,
           }}
 
 
+          onCellValueChanged={params => {
+            // Guard: skip undefined phantom reverts produced by MultiSelectEditor's stopEditing(true) cancel path
+            if (params.newValue === undefined && params.colDef?.cellEditor === 'MultiSelectEditor') {
+              return
+            }
+          }}
+
           onSortChanged={params => {
             const sm = params.columns;
             if (sm.length == 1 && sm.some(s => s.colId === 'IZ_groupCount')) {
@@ -2049,6 +2845,7 @@ const SGrid = props => {
           }}
         />
       </div>
+      </TemplateStateContext.Provider>
       <Dialog
         fullWidth
         open={openDialogs?.addTemplate && builderData?.id != null}
@@ -2073,29 +2870,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('report/viewer')}
+            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 +2968,15 @@ function toNestedByUnderscore(input) {
   return result;
 }
 
+// Export helper functions for use in column configurations
+export {
+  setUpdateRefValue,
+  setUpdateRefRow,
+  getUpdateRefValue,
+  hasUpdateRefValue,
+  clearUpdateRefRow,
+  clearAllUpdateRef,
+  getAllUpdates,
+  removeUpdateRefByRowId
+}
+