robobyte-front-builder 1.0.21 → 1.0.23

package/src/views/genericTable/SGrid.js

@@ -98,7 +98,9 @@ import {
   Menu
 } from '@mui/material'
 import {AgGridReact} from "ag-grid-react";
-import {Edit, FilterAlt, PrintOutlined, RefreshOutlined, Save, SaveAs, Close} from "@mui/icons-material";
+import {Edit, FilterAlt, PrintOutlined, RefreshOutlined, Save, SaveAs, Close, SearchOutlined} from "@mui/icons-material";
+// Lazy MUI icon resolver for viewer-action button icons (icon name string → component)
+import * as MuiIcons from "@mui/icons-material";
 import {getRandomInt, Helper} from "services/helper/helper";
 import PostService from 'services/PostService'
 import handleChange from 'services/helper/handleChange'
@@ -183,6 +185,14 @@ function TemplatesToolPanel() {
     handleGetTemplates, handleSaveTemplate,
     handleToggleDialogs, setIsTemplateEditing,
     builderData,
+    // Display settings (moved out of the in-grid toolbar) — see toolbar render
+    // below. These used to live next to the search field; they were moved to
+    // make the toolbar more compact and to follow the same disclosure pattern
+    // as Templates (advanced/less-used settings live in the side panel).
+    timerValue, setTimerValue,
+    isPagination, setIsPagination,
+    handleCSVExport, isDownloading,
+    isExcelExportAvailable,
   } = ctx
 
   return (
@@ -199,6 +209,57 @@ function TemplatesToolPanel() {
         </Typography>
       </Box>
 
+      {/* Display settings — auto-refresh timer, full-data toggle, Excel export */}
+      <SettingsSection title='Display Settings'>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: '100%' }}>
+          <Box>
+            <Typography variant='caption' sx={{ color: 'text.secondary', display: 'block', mb: 0.5 }}>
+              Auto-refresh
+            </Typography>
+            <Select
+              fullWidth
+              size='small'
+              value={timerValue ?? 0}
+              onChange={(e) => setTimerValue?.(e.target.value)}
+            >
+              <MenuItem value={0}>Off</MenuItem>
+              <MenuItem value={0.5}>Every 30s</MenuItem>
+              <MenuItem value={1}>Every 1m</MenuItem>
+              <MenuItem value={2}>Every 2m</MenuItem>
+              <MenuItem value={5}>Every 5m</MenuItem>
+              <MenuItem value={15}>Every 15m</MenuItem>
+              <MenuItem value={30}>Every 30m</MenuItem>
+            </Select>
+          </Box>
+
+          <FormControlLabel
+            control={
+              <Checkbox
+                size='small'
+                checked={!isPagination}
+                onChange={e => setIsPagination?.(!e.target.checked)}
+                color='primary'
+              />
+            }
+            label={<Typography variant='body2'>Load all data (no pagination)</Typography>}
+          />
+
+          {isExcelExportAvailable && (
+            <Button
+              size='small'
+              variant='outlined'
+              startIcon={isDownloading ? <CircularProgress size={16}/> : <FileExcelOutline fontSize='small'/>}
+              onClick={handleCSVExport}
+              disabled={isDownloading}
+              fullWidth
+              sx={{ justifyContent: 'flex-start' }}
+            >
+              Export to Excel
+            </Button>
+          )}
+        </Box>
+      </SettingsSection>
+
       {/* Template section */}
       <SettingsSection title='Template'>
         {builderData?.id == null ? (
@@ -283,6 +344,13 @@ const SGrid = props => {
     expireReport,
     filter: externalFilter,
     actions,
+    // Page-level toolbar buttons rendered after Filter/Refresh.
+    // Built by ReportViewerRenderer; each item already has a bound onClick.
+    viewerActions,
+    // Title / caption rendered on the left side of the toolbar, sharing the
+    // row with the search and action buttons. See attached design reference.
+    title: viewerTitle,
+    caption: viewerCaption,
     refresh,
     height,
     extraCols,
@@ -348,6 +416,17 @@ const SGrid = props => {
   const searchInputRef = useRef(null);
   const [searchPopoverOpen, setSearchPopoverOpen] = useState(false);
   const [searchPopoverAnchor, setSearchPopoverAnchor] = useState(null);
+  // Search expansion: collapsed → just an icon button; expanded → full TextField.
+  // Auto-expand if the user is typing or already has filters in chips, so the
+  // visual state always shows what's active.
+  const [isSearchExpanded, setIsSearchExpanded] = useState(false);
+  // Keyboard navigation in the search popover. Index points into
+  // searchFieldsRef.current. Reset whenever the popover opens or the term
+  // changes so the highlight always starts at the top of the list.
+  const [highlightedFieldIndex, setHighlightedFieldIndex] = useState(0);
+  // refs to ListItemButton DOM nodes so we can scrollIntoView the highlighted
+  // item when the user arrows past the visible part of the (capped 240px) list.
+  const searchOptionRefs = useRef([]);
 
   const searchTermRef = useRef('');
   const searchFieldsRef = useRef([]); // metadata only, no value
@@ -2454,397 +2533,593 @@ const SGrid = props => {
 
   return (
     <Grid container size={{ xs: 12 }}>
-      <Grid container
-            sx={{backgroundColor: '#fafafb', justifyContent: 'space-between'}} padding={2}
-       size={{ xs: 12 }}>
-        <Box sx={{display: 'flex'}}>
-          <Box sx={{ml: '5px'}}>
-            <Tooltip title='مؤقت' placement={'top'}>
-              <Select variant={'outlined'} value={timerValue} onChange={(e) => setTimerValue(e.target.value)}
-                      defaultValue={0} size={'small'}
-                      color='primary' sx={{width: '60px'}}>
-                <MenuItem key={1} value={0}>No</MenuItem>
-                {/*<MenuItem key={2} value={0.1667}>10s</MenuItem>*/}
-                <MenuItem key={2} value={0.5}>30s</MenuItem>
-                <MenuItem key={2} value={1}>1m</MenuItem>
-                <MenuItem key={2} value={2}>2m</MenuItem>
-                <MenuItem key={2} value={5}>5m</MenuItem>
-                <MenuItem key={3} value={15}>15m</MenuItem>
-                <MenuItem key={4} value={30}>30m</MenuItem>
-              </Select>
-            </Tooltip>
-          </Box>
-        </Box>
-        {((searchFieldsRef?.current?.length ?? []) > 0) &&
-          <Box sx={{flex: 1, px: 1, minWidth: minimized ? 140 : 300, display: 'flex', alignItems: 'center'}}>
-            {/*<Tooltip title={'اكتب كلمة البحث ثم اختر الحقل'}>*/}
-            <Box sx={{position: 'relative', width: '100%'}}>
-              <TextField
-                label={'بحث'}
-                fullWidth
-                size={'small'}
-                value={searchTerm}
-                inputRef={searchInputRef}
-                onFocus={(e) => {
-                  if ((e.target.value || '').length > 0) {
-                    setSearchPopoverAnchor(e.currentTarget);
-                    setSearchPopoverOpen(true);
-                  }
-                }}
-                onChange={(e) => {
-                  const v = e.target.value;
-                  setSearchTerm(v);
-                  setSearchPopoverAnchor(e.currentTarget);
-                  setSearchPopoverOpen((v || '').length > 0);
-                }}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    e.preventDefault();
-                    const term = (searchTerm || '').trim();
-                    if (!term) return;
-                    const fields = searchFieldsRef?.current ?? [];
-                    if (fields.length === 0) return;
-                    handlePickSearchField(fields[0]);
-                  } else if (e.key === 'Escape') {
-                    setSearchPopoverOpen(false);
-                  }
+      <Grid
+        container
+        sx={{ justifyContent: 'space-between', alignItems: 'center', flexWrap: 'nowrap', gap: 2 }}
+        padding={2}
+        size={{ xs: 12 }}
+      >
+        {/*
+          ── Toolbar layout ───────────────────────────────────────────────────
+          One row, split into:
+
+            LEFT  : title (h6) + caption (caption) stacked vertically.
+                    Both are optional — the block is hidden if neither is set.
+            RIGHT : collapsible search (icon → TextField on focus / when it
+                    has a value), Filter (outlined Button), Refresh (outlined
+                    Button), then any user-defined viewerActions in order.
+
+          Timer / Select-All / Excel-Export live in the Templates side panel
+          under "Display Settings" — see TemplatesToolPanel above.
+        */}
+
+        {/* ── LEFT: title + caption ─────────────────────────────────────── */}
+        {viewerTitle || viewerCaption ? (
+          <Box sx={{ display: 'flex', flexDirection: 'column', minWidth: 0, flexShrink: 1 }}>
+            {viewerTitle && (
+              <Typography
+                variant='h6'
+                sx={{
+                  fontWeight: 600,
+                  lineHeight: 1.2,
+                  color: 'text.primary',
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis'
                 }}
-                InputProps={{
-                  startAdornment: (
-                    <Box sx={{display: 'flex', gap: 0.5, flexWrap: 'wrap'}}>
-                      {(() => {
-                        const byPath = selectedSearchObjects.reduce((acc, it) => {
-                          const key = it.path;
-                          if (!acc[key]) acc[key] = {meta: it, values: []};
-                          acc[key].values.push(String(it.value));
-                          return acc;
-                        }, {});
-                        return Object.keys(byPath).map(path => {
-                          const g = byPath[path];
-                          const labelBase = g.meta.friendlyName || g.meta.path;
-                          const valueLabel = g.values.reduce((acc, val, idx) => {
-                            if (idx > 0) acc.push(<strong key={`sep-${idx}`}> أو </strong>);
-                            acc.push(val);
-                            return acc;
-                          }, []);
-                          return (
-                            <Chip
-                              key={`group-${path}`}
-                              size="small"
-                              label={
-                                <span>
-                                  <strong>{labelBase}</strong>: {valueLabel}
-                                </span>
-                              } onDelete={() => {
-                              setSelectedSearchObjects(prev => prev.filter(it => it.path !== path));
-                              debouncedRefresh();
-                            }}
-                              deleteIcon={
-                                <Box sx={{
-                                  display: 'flex',
-                                  alignItems: 'center',
-                                  px: 0.5,
-                                  bgcolor: 'error.main',
-                                  color: (theme) => theme.palette.error.contrastText,
-                                  height: '100%',
-                                  alignSelf: 'stretch',
-                                  borderTopRightRadius: '4px',
-                                  borderBottomRightRadius: '4px'
-                                }}>
-                                  <Close fontSize="small"/>
-                                </Box>
-                              }
-                              sx={{
-                                mr: 0.5,
-                                borderRadius: '8px',
-                                '& .MuiChip-deleteIcon': {
-                                  margin: 0
-                                }
-                              }}
-                            />
-                          );
-                        });
-                      })()}
-                    </Box>
-                  )
+              >
+                {viewerTitle}
+              </Typography>
+            )}
+            {viewerCaption && (
+              <Typography
+                variant='caption'
+                sx={{
+                  color: 'text.secondary',
+                  lineHeight: 1.2,
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis'
                 }}
-              />
+              >
+                {viewerCaption}
+              </Typography>
+            )}
+          </Box>
+        ) : (
+          // Empty spacer keeps the right-side controls right-aligned even when
+          // no title is set, so layout looks consistent across reports.
+          <Box />
+        )}
 
-              <ClickAwayListener onClickAway={() => setSearchPopoverOpen(false)}>
-                <Popper
-                  open={searchPopoverOpen}
-                  anchorEl={searchPopoverAnchor}
-                  placement="bottom-start"
-                  style={{zIndex: 1300, width: searchInputRef?.current?.offsetWidth || undefined}}
-                >
-                  <Paper elevation={3} sx={{mt: 0.5, maxHeight: 240, overflowY: 'auto'}}>
-                    <List dense>
-                      {(searchFieldsRef?.current ?? []).map((option, i) => (
-                        <ListItemButton key={`${option.path}-${i}`} onClick={() => handlePickSearchField(option)}>
-                          <Box sx={{display: 'flex', flexDirection: 'column'}}>
-                            <Box sx={{fontSize: 14, fontWeight: 500}}>{option.friendlyName || option.path}</Box>
-                            {/*<Box sx={{fontSize: 12, color: 'text.secondary'}}>{option.path}</Box>*/}
-                          </Box>
-                        </ListItemButton>
-                      ))}
-                      {((searchFieldsRef?.current ?? []).length === 0) && (
-                        <ListItemButton disabled>
-                          <Box sx={{px: 1, py: 0.5, color: 'text.secondary'}}>لا توجد حقول للبحث</Box>
-                        </ListItemButton>
-                      )}
-                    </List>
-                  </Paper>
-                </Popper>
-              </ClickAwayListener>
-            </Box>
-            {/*</Tooltip>*/}
-          </Box>}
-        <Box sx={{display: 'flex', justifyContent: 'center'}}>
-          {<Box>
-            <Tooltip title={'جميع البيانات'}>
-              <Checkbox
-                checked={!isPagination}
-                onChange={e => setIsPagination(!e.target.checked)}
-                color="primary"
-              />
-            </Tooltip>
-          </Box>}
-          {streamEndPoint && !builderData?.isRaw === true && minimized !== true &&
-            <Box>
-              <Tooltip title='تصدير'>
-                <IconButton
-                  disabled={isDownloading}
-                  onClick={handleCSVExport}
-                  color='primary'
-                >
-                  {isDownloading ? <CircularProgress size={24}/> : <FileExcelOutline/>}
-                </IconButton>
-              </Tooltip>
-            </Box>
-          }
-          {minimized !== true && !isPagination &&
-            <Box>
-              <Tooltip title="تصدير PDF">
-                <IconButton onClick={handlePDFExport} color="primary">
-                  <PrintOutlined/>
-                </IconButton>
-              </Tooltip>
-            </Box>
-          }
-          {<Box>
+        {/* ── RIGHT: search + filter + refresh + viewer actions ──────────── */}
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 1, flexShrink: 0 }}>
+          {(searchFieldsRef?.current?.length ?? []) > 0 &&
+            (() => {
+              const hasValue = (searchTerm || '').length > 0 || (selectedSearchObjects?.length ?? 0) > 0
+              const expanded = isSearchExpanded || hasValue
+              if (!expanded) {
+                return (
+                  <Tooltip title='بحث' placement='top'>
+                    <IconButton
+                      size='small'
+                      onClick={e => {
+                        setIsSearchExpanded(true)
+                        setTimeout(() => searchInputRef.current?.focus(), 0)
+                      }}
+                      sx={{
+                        border: '1px solid',
+                        borderColor: 'divider',
+                        borderRadius: 1,
+                        color: 'text.secondary',
+                        '&:hover': { borderColor: 'primary.main', color: 'primary.main' }
+                      }}
+                    >
+                      <SearchOutlined fontSize='small' />
+                    </IconButton>
+                  </Tooltip>
+                )
+              }
+              return (
+                <Box sx={{ px: 0, minWidth: minimized ? 200 : 320, display: 'flex', alignItems: 'center' }}>
+                  {/*<Tooltip title={'اكتب كلمة البحث ثم اختر الحقل'}>*/}
+                  <Box sx={{ position: 'relative', width: '100%' }}>
+                    <TextField
+                      placeholder={'بحث...'}
+                      fullWidth
+                      size={'small'}
+                      value={searchTerm}
+                      inputRef={searchInputRef}
+                      // ── Stylized look matching design reference ────────────────
+                      // - Rounded ~12px border on a paper background.
+                      // - Soft divider colour at rest, primary on focus/hover.
+                      // - Search icon sits at the end of the input (endAdornment).
+                      // - No floating label — just a placeholder, so the field
+                      //   doesn't shift vertically when it gains a value.
+                      sx={{
+                        '& .MuiOutlinedInput-root': {
+                          borderRadius: 3,
+                          bgcolor: 'background.paper',
+                          pr: 1.25
+                        },
+                        '& .MuiOutlinedInput-notchedOutline': {
+                          borderColor: 'divider'
+                        },
+                        '&:hover .MuiOutlinedInput-notchedOutline': {
+                          borderColor: 'text.disabled'
+                        },
+                        '& .Mui-focused .MuiOutlinedInput-notchedOutline': {
+                          borderWidth: 1
+                        }
+                      }}
+                      onFocus={e => {
+                        setIsSearchExpanded(true)
+                        if ((e.target.value || '').length > 0) {
+                          setSearchPopoverAnchor(e.currentTarget)
+                          setSearchPopoverOpen(true)
+                          // Reset to top of list whenever the popover opens.
+                          setHighlightedFieldIndex(0)
+                        }
+                      }}
+                      onBlur={() => {
+                        // Collapse back to the icon only when there's nothing to show.
+                        const hasValue = (searchTerm || '').length > 0 || (selectedSearchObjects?.length ?? 0) > 0
+                        if (!hasValue) setIsSearchExpanded(false)
+                      }}
+                      onChange={e => {
+                        const v = e.target.value
+                        setSearchTerm(v)
+                        setSearchPopoverAnchor(e.currentTarget)
+                        setSearchPopoverOpen((v || '').length > 0)
+                        // Term changed → list order semantically resets, so put
+                        // the highlight back at the top.
+                        setHighlightedFieldIndex(0)
+                      }}
+                      onKeyDown={e => {
+                        const fields = searchFieldsRef?.current ?? []
+
+                        if (e.key === 'ArrowDown') {
+                          e.preventDefault()
+                          if (!searchPopoverOpen) {
+                            // Open the popover if the user starts arrowing
+                            // before typing — common pattern in autocompletes.
+                            setSearchPopoverAnchor(searchInputRef.current)
+                            setSearchPopoverOpen(true)
+                            setHighlightedFieldIndex(0)
+                            return
+                          }
+                          if (fields.length === 0) return
+                          const next = (highlightedFieldIndex + 1) % fields.length
+                          setHighlightedFieldIndex(next)
+                          // Keep the highlighted row visible inside the 240px-capped list.
+                          searchOptionRefs.current[next]?.scrollIntoView({ block: 'nearest' })
+                          return
+                        }
 
-            <IconButton color={'primary'} onClick={() => handleToggleDialogs('CustomFilter')}>
-              <FilterAlt/>
-            </IconButton>
-          </Box>
-          }
-          <Box>
-            <Tooltip title='اعادة تحميل'>
-              <IconButton onClick={() => setLocalRefresh(!localRefresh)}>
-                <RefreshOutlined/>
+                        if (e.key === 'ArrowUp') {
+                          e.preventDefault()
+                          if (!searchPopoverOpen) return
+                          if (fields.length === 0) return
+                          const prev = (highlightedFieldIndex - 1 + fields.length) % fields.length
+                          setHighlightedFieldIndex(prev)
+                          searchOptionRefs.current[prev]?.scrollIntoView({ block: 'nearest' })
+                          return
+                        }
+
+                        if (e.key === 'Home') {
+                          if (!searchPopoverOpen || fields.length === 0) return
+                          e.preventDefault()
+                          setHighlightedFieldIndex(0)
+                          searchOptionRefs.current[0]?.scrollIntoView({ block: 'nearest' })
+                          return
+                        }
+
+                        if (e.key === 'End') {
+                          if (!searchPopoverOpen || fields.length === 0) return
+                          e.preventDefault()
+                          const last = fields.length - 1
+                          setHighlightedFieldIndex(last)
+                          searchOptionRefs.current[last]?.scrollIntoView({ block: 'nearest' })
+                          return
+                        }
+
+                        if (e.key === 'Enter') {
+                          e.preventDefault()
+                          const term = (searchTerm || '').trim()
+                          if (!term) return
+                          if (fields.length === 0) return
+                          // Pick the highlighted field — defaults to the first
+                          // (highlightedFieldIndex starts at 0), so users who
+                          // never touched the arrow keys still get the same
+                          // behaviour as before.
+                          const idx = Math.min(Math.max(highlightedFieldIndex, 0), fields.length - 1)
+                          handlePickSearchField(fields[idx])
+                          return
+                        }
+
+                        if (e.key === 'Escape') {
+                          setSearchPopoverOpen(false)
+                        }
+                      }}
+                      InputProps={{
+                        startAdornment: (
+                          <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
+                            {(() => {
+                              const byPath = selectedSearchObjects.reduce((acc, it) => {
+                                const key = it.path
+                                if (!acc[key]) acc[key] = { meta: it, values: [] }
+                                acc[key].values.push(String(it.value))
+                                return acc
+                              }, {})
+                              return Object.keys(byPath).map(path => {
+                                const g = byPath[path]
+                                const labelBase = g.meta.friendlyName || g.meta.path
+                                const valueLabel = g.values.reduce((acc, val, idx) => {
+                                  if (idx > 0) acc.push(<strong key={`sep-${idx}`}> أو </strong>)
+                                  acc.push(val)
+                                  return acc
+                                }, [])
+                                return (
+                                  <Chip
+                                    key={`group-${path}`}
+                                    size='small'
+                                    label={
+                                      <span>
+                                        <strong>{labelBase}</strong>: {valueLabel}
+                                      </span>
+                                    }
+                                    onDelete={() => {
+                                      setSelectedSearchObjects(prev => prev.filter(it => it.path !== path))
+                                      debouncedRefresh()
+                                    }}
+                                    deleteIcon={
+                                      <Box
+                                        sx={{
+                                          display: 'flex',
+                                          alignItems: 'center',
+                                          px: 0.5,
+                                          bgcolor: 'error.main',
+                                          color: theme => theme.palette.error.contrastText,
+                                          height: '100%',
+                                          alignSelf: 'stretch',
+                                          borderTopRightRadius: '4px',
+                                          borderBottomRightRadius: '4px'
+                                        }}
+                                      >
+                                        <Close fontSize='small' />
+                                      </Box>
+                                    }
+                                    sx={{
+                                      mr: 0.5,
+                                      borderRadius: '8px',
+                                      '& .MuiChip-deleteIcon': {
+                                        margin: 0
+                                      }
+                                    }}
+                                  />
+                                )
+                              })
+                            })()}
+                          </Box>
+                        ),
+                        endAdornment: <SearchOutlined sx={{ color: 'text.disabled', fontSize: 20, mr: 0.25 }} />
+                      }}
+                    />
+
+                    <ClickAwayListener onClickAway={() => setSearchPopoverOpen(false)}>
+                      <Popper
+                        open={searchPopoverOpen}
+                        anchorEl={searchPopoverAnchor}
+                        placement='bottom-start'
+                        style={{ zIndex: 1300, width: searchInputRef?.current?.offsetWidth || undefined }}
+                      >
+                        <Paper elevation={3} sx={{ mt: 0.5, maxHeight: 240, overflowY: 'auto' }}>
+                          <List dense>
+                            {(searchFieldsRef?.current ?? []).map((option, i) => (
+                              <ListItemButton
+                                key={`${option.path}-${i}`}
+                                ref={el => { searchOptionRefs.current[i] = el }}
+                                selected={i === highlightedFieldIndex}
+                                onMouseEnter={() => setHighlightedFieldIndex(i)}
+                                // Mouse-down (rather than click) so the input
+                                // doesn't lose focus before the handler runs.
+                                onMouseDown={(e) => {
+                                  e.preventDefault()
+                                  handlePickSearchField(option)
+                                }}
+                              >
+                                <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                                  <Box sx={{ fontSize: 14, fontWeight: 500 }}>{option.friendlyName || option.path}</Box>
+                                  {/*<Box sx={{fontSize: 12, color: 'text.secondary'}}>{option.path}</Box>*/}
+                                </Box>
+                              </ListItemButton>
+                            ))}
+                            {(searchFieldsRef?.current ?? []).length === 0 && (
+                              <ListItemButton disabled>
+                                <Box sx={{ px: 1, py: 0.5, color: 'text.secondary' }}>لا توجد حقول للبحث</Box>
+                              </ListItemButton>
+                            )}
+                          </List>
+                        </Paper>
+                      </Popper>
+                    </ClickAwayListener>
+                  </Box>
+                  {/*</Tooltip>*/}
+                </Box>
+              )
+            })()}
+
+          {/* PDF export — only visible when the user has chosen "Load all data"
+              (otherwise the grid is paginated and PDF would only print the
+              current page). Kept as a compact IconButton — the primary
+              actions in this toolbar are Filter / Refresh / viewerActions. */}
+          {minimized !== true && !isPagination && (
+            <Tooltip title='تصدير PDF'>
+              <IconButton onClick={handlePDFExport} color='primary' size='small'>
+                <PrintOutlined fontSize='small' />
               </IconButton>
             </Tooltip>
-          </Box>
-
+          )}
+          <Button
+            size='medium'
+            color='primary'
+            variant='outlined'
+            onClick={() => setLocalRefresh(!localRefresh)}
+            // sx={{ border: '1px solid' }}
+          >
+            <RefreshOutlined fontSize='small' />
+          </Button>
+          <Button
+            size='small'
+            variant='outlined'
+            color='primary'
+            startIcon={<FilterAlt fontSize='small' />}
+            onClick={() => handleToggleDialogs('CustomFilter')}
+          >
+            Filter
+          </Button>
+
+          {/* Viewer actions — rendered after Filter/Refresh in declared order.
+              Each item is already bound by ReportViewerRenderer:
+                { key, label, icon, color, variant, onClick, disabled, confirmation }
+              Icon is a string name resolved against @mui/icons-material. */}
+          {Array.isArray(viewerActions) &&
+            viewerActions.map(action => {
+              const IconCmp = action.icon ? MuiIcons[action.icon] : null
+              const variant = action.variant ?? 'outlined'
+              const color = action.color ?? 'primary'
+              return (
+                <Button
+                  key={action.key}
+                  size='small'
+                  variant={variant}
+                  color={color}
+                  startIcon={IconCmp ? <IconCmp fontSize='small' /> : null}
+                  onClick={action.onClick}
+                  disabled={Boolean(action.disabled)}
+                >
+                  {action.label}
+                </Button>
+              )
+            })}
         </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
-
-          debug={false}
-          columnHoverHighlight={true}
-          theme={agTheme}
-          enableRtl={true}
-          columnDefs={colDefs.current}
-          rowModelType={"serverSide"}
-          onGridReady={onGridReady}
-          maxConcurrentDatasourceRequests={0}
-          cacheBlockSize={100}
-          onRowSelected={onRowSelected}
-          // getChildCount={getChildCount}
-          sideBar={sideBarConfig}
-          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,
+      <TemplateStateContext.Provider
+        value={{
+          templates,
+          selectedTemplate,
+          setSelectedTemplate,
+          handleGetTemplates,
+          handleSaveTemplate,
+          handleToggleDialogs,
+          setIsTemplateEditing,
+          builderData,
+          // ── Display settings (rendered in the side panel) ────────────────────
+          timerValue,
+          setTimerValue,
+          isPagination,
+          setIsPagination,
+          handleCSVExport,
+          isDownloading,
+          // Hide the Excel button in the side panel for raw / minimized reports.
+          isExcelExportAvailable: Boolean(streamEndPoint && !builderData?.isRaw === true && minimized !== true)
+        }}
+      >
+        <Box
+          sx={{
+            width: '100%',
+            height: minimized === true ? '0px' : height ?? '70vh',
+            direction: 'ltr',
+            // Top corners flush with the toolbar above. AG Grid's quartz theme
+            // rounds .ag-root-wrapper by default; we force the two top corners
+            // to 0 so the grid sits seamlessly under the toolbar regardless of
+            // the toolbar's own bottom edge. Bottom corners keep their theme
+            // radius so the grid still looks like a contained surface.
+            '& .ag-root-wrapper': {
+              borderTopLeftRadius: 0,
+              borderTopRightRadius: 0
+            }
+          }}
+        >
+          <AgGridReact
+            debug={false}
+            columnHoverHighlight={true}
+            theme={agTheme}
+            enableRtl={true}
+            columnDefs={colDefs.current}
+            rowModelType={'serverSide'}
+            onGridReady={onGridReady}
+            maxConcurrentDatasourceRequests={0}
+            cacheBlockSize={100}
+            onRowSelected={onRowSelected}
+            // getChildCount={getChildCount}
+            sideBar={sideBarConfig}
+            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,
-            }),
-          }}   // 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)
+              // 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 customItems = []
+                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 })
+                    }
+                  })
+                }
 
-              if (hasUpdate) {
                 customItems.push({
-                  name: 'Remove Row from Update Ref',
-                  icon: '<span class="ag-icon ag-icon-cancel" unselectable="on" role="presentation"></span>',
+                  name: 'Clone Update Ref (Backup)',
+                  icon: '<span class="ag-icon ag-icon-copy" unselectable="on" role="presentation"></span>',
                   action: () => {
-                    removeUpdateRefByRowId(updateRef, rowData, rowUniqueId)
-                    params.api.refreshCells({force: true})
-                  }
+                    cloneUpdateRefToOriginal(updateRef, originalRefData)
+                    params.api.refreshCells({ force: true })
+                  },
+                  disabled: !updateRef.current || updateRef.current.length === 0
                 })
-              }
 
-              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: '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: '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
+                })
 
-              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]
+                }
 
-              if (customItems.length > 0) {
-                return [
-                  ...customItems,
-                  'separator',
-                  ...defaultItems
-                ]
+                return defaultItems
               }
+            }}
+            rowSelection='multiple'
+            statusBar={{
+              statusPanels: [
+                // { statusPanel: 'agTotalRowCountComponent' },
+                {
+                  statusPanel: CustomStatusBar,
+                  align: 'left'
+                }
 
-              return defaultItems
-            }
-          }}
-          rowSelection="multiple"
-          statusBar={{
-            statusPanels: [
-              // { statusPanel: 'agTotalRowCountComponent' },
-              {
-                statusPanel: CustomStatusBar,
-                align: 'left',
-              },
-
-              // { statusPanel: 'agFilteredRowCountComponent' },
-              // { statusPanel: 'agSelectedRowCountComponent' },
-            ],
-          }}
-          groupHeaderHeight={25}
-          // onChartCreated={x => console.log(x)}
-          headerHeight={25}
-          autoGroupColumnDef={autoGroupColumnDef}
-          getRowId={getRowId}
-          serverSideDatasource={datasource}
-          blockLoadDebounceMillis={200}
-          pinnedBottomRowData={pagedAgg}
-          suppressRowClickSelection={true}
-          serverSidePivotResultFieldSeparator={"_"}
-          pivotKeySeparator={"_"}
-          getRowStyle={(row) => {
-            if (row.node.group) {
-              return {fontWeight: 'bold'};
-            }
-            if (expireReport) {
-              if (row.node?.data?.expireDate && new Date(row.node.data.expireDate) <= new Date()) {
-                return {background: '#FF625F'};
+                // { statusPanel: 'agFilteredRowCountComponent' },
+                // { statusPanel: 'agSelectedRowCountComponent' },
+              ]
+            }}
+            groupHeaderHeight={25}
+            // onChartCreated={x => console.log(x)}
+            headerHeight={25}
+            autoGroupColumnDef={autoGroupColumnDef}
+            getRowId={getRowId}
+            serverSideDatasource={datasource}
+            blockLoadDebounceMillis={200}
+            pinnedBottomRowData={pagedAgg}
+            suppressRowClickSelection={true}
+            serverSidePivotResultFieldSeparator={'_'}
+            pivotKeySeparator={'_'}
+            getRowStyle={row => {
+              if (row.node.group) {
+                return { fontWeight: 'bold' }
               }
-              if (row.node?.data?.expireDate) {
-                const expireDate = new Date(row.node.data.expireDate);
-                const currentDate = new Date();
-                const diffInDays = (expireDate - currentDate) / (1000 * 60 * 60 * 24); // Convert milliseconds to days
-
-                if (diffInDays > 10) {
-                  return {background: '#8AFF8A'};
-                } else if (diffInDays > 0) {
-                  return {background: '#fcfd74'};
+              if (expireReport) {
+                if (row.node?.data?.expireDate && new Date(row.node.data.expireDate) <= new Date()) {
+                  return { background: '#FF625F' }
+                }
+                if (row.node?.data?.expireDate) {
+                  const expireDate = new Date(row.node.data.expireDate)
+                  const currentDate = new Date()
+                  const diffInDays = (expireDate - currentDate) / (1000 * 60 * 60 * 24) // Convert milliseconds to days
+
+                  if (diffInDays > 10) {
+                    return { background: '#8AFF8A' }
+                  } else if (diffInDays > 0) {
+                    return { background: '#fcfd74' }
+                  }
                 }
               }
-            }
-          }}
-
-          components={{
-            ...AG_COMPONENTS,
-            routingCell: RoutingCell,
-            imageCell: ImageCell,
-            customStatusBar: CustomStatusBar,
-            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')) {
-              params.api.refreshServerSide({purge: true})
-            }
-          }}
-        />
-      </div>
+            }}
+            components={{
+              ...AG_COMPONENTS,
+              routingCell: RoutingCell,
+              imageCell: ImageCell,
+              customStatusBar: CustomStatusBar,
+              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')) {
+                params.api.refreshServerSide({ purge: true })
+              }
+            }}
+          />
+        </Box>
       </TemplateStateContext.Provider>
       <Dialog
         fullWidth
@@ -2861,7 +3136,8 @@ const SGrid = props => {
           pageName={'Builder' + builderData?.id}
           item={isTemplateEditing === true ? selectedTemplate : null}
           template={gridApi?.getColumnState()}
-          userId={authValues?.user?.id}/>
+          userId={authValues?.user?.id}
+        />
       </Dialog>
       <Dialog
         fullWidth
@@ -2873,36 +3149,32 @@ const SGrid = props => {
         {openDialogs.CustomFilter && (
           <CustomFilterDialog
             handleToggleDialogs={handleToggleDialogs}
-            Filter={(Filter?.LocalTfilter || []).filter(f => (f.isMainFilter !== true))}
+            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) => {
+            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;
-              });
+                const arr = [...(prev || [])]
+                ;(list || []).forEach(item => {
+                  const i = item.index
+                  const type = item.type
+                  const current = arr[i] || { id: i, PropertyType: type, value: null }
+                  arr[i] = { ...current, PropertyType: current.PropertyType || type, value: item.value }
+                })
+                return arr
+              })
             }}
           />
         )}
       </Dialog>
-
-
     </Grid>
-
   )
 }