robobyte-front-builder 1.0.0

package/src/views/genericTable/TAGGrid.js

@@ -0,0 +1,1046 @@
+// ** React Imports
+// ** Next Import
+
+// ** MUI Imports
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+
+// ** Icons Imports
+// ** Store Imports
+// ** Custom Components Imports
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { Endpoints, Services } from 'src/services/Endpoints'
+import {
+  Autocomplete,
+  CircularProgress,
+  Dialog,
+  FormControl,
+  IconButton,
+  MenuItem,
+  Select,
+  TextField,
+  Tooltip
+} from '@mui/material'
+import { AgGridReact } from "ag-grid-react";
+import { Edit, FilterAlt, RefreshOutlined, Save, SaveAs } from "@mui/icons-material";
+import { getRandomInt, Helper } from "services/helper/helper";
+import PostService from 'services/PostService'
+import handleChange from 'services/helper/handleChange'
+import { DotsVerticalCircleOutline, FileExcelOutline } from 'mdi-material-ui'
+import AddTemplateDialog from './template/addTemplate'
+import UpdateService from 'services/UpdateService'
+import { useRouter } from 'next/router'
+import { SystemContext } from 'context/SystemContext'
+import { AuthContext } from 'context/AuthContext'
+import moment from "moment-timezone"
+import numeral from 'numeral'
+import CustomFilterDialog from "views/customFilter/CustomFilterDialog";
+import CustomStatusBar from "views/genericTable/statusBar/rowCountStatusBar";
+import StreamService from "services/StreamService";
+import { themeQuartz } from 'ag-grid-community';
+
+// ** Utils Import
+
+// ** Actions Imports
+
+// ** Custom Components Imports
+const defaultFinalRequest = {
+  groupBy: null,
+  endpoint: null,
+  filter: {},
+  params: {}
+}
+const TAGGrid = props => {
+  // ** State
+  const agTheme = themeQuartz
+    .withParams({
+      accentColor: "#00989f"
+    });
+  const {
+    groupEndPoint,
+    streamEndPoint,
+    expireReport,
+    pagedEndPoint,
+    filter: externalFilter,
+    actions,
+    refresh,
+    setClassName,
+    level,
+    height,
+    extraCols,
+    levelArray,
+    accessor,
+    setOutGridApi,
+    setEventRowSelected,
+    pageName,
+    paramsPage,
+    fixedTIncludes,
+    groupBy,
+    noPurge,
+    uniqueIdPath
+  } = props
+  const [responseType, setResponseType] = useState()
+  const [pagedAgg, setPagedAgg] = useState()
+  const [colDefs, setColDefs] = useState([])
+  const [gridApi, setGridApi] = useState(null)
+  const [includes, setIncludes] = useState([])
+  const [flatCols, setFlatCols] = useState([])
+  const [templates, setTemplates] = useState([])
+  const [timerValue, setTimerValue] = useState(0)
+  const [localRefresh, setLocalRefresh] = useState(false)
+  const [selectedTemplate, setSelectedTemplate] = useState(null)
+  const [localClasName, setLocalClasName] = useState(null)
+  const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const router = useRouter()
+  const authValues = useContext(AuthContext)
+  const [isTemplateEditing, setIsTemplateEditing] = useState(false)
+  const [isDownloading, setIsDownloading] = useState(false)
+  const [finalRequestObject, setFinalRequestObject] = useState(defaultFinalRequest)
+  const [Filter, setFilter] = useState({
+    Tfilter: [],
+    LocalTfilter: [],
+  })
+  const [openDialogs, setOpenDialogs] = useState({
+    addTemplate: false,
+    CustomFilter: false,
+  })
+  const getDefaultColDefs = () => {
+    return [
+      {
+        field: 'Actions',
+        sortable: false,
+        width: 60,
+        pinned: 'left',
+        enableRowGroup: false,
+        cellRenderer: (params) => {
+          if (params.node.group) {
+            return <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <IconButton
+                sx={{ color: 'primary.light' }}
+                onClick={() => {
+                  const groupKeys = getParentKeys(params.node.parent)
+                  groupKeys.push(params.node.key)
+                  params.api.refreshServerSide({ purge: !noPurge, route: groupKeys });
+                }}
+              >
+                <RefreshOutlined />
+              </IconButton>
+            </Box>
+          }
+          if (actions != null) return actions(params)
+        }
+      },
+    ]
+  }
+  const autoGroupColumnDef = {
+    headerName: 'My Group',
+    sortable: false,
+    minWidth: 220,
+  }
+
+  const applyValueFormatter = (formatterString) => {
+    return function (params) {
+      return new Function("params", "moment", "userTimeZone", "enumTrans", "numeral", formatterString)(
+        params,
+        moment,
+        userTimeZone,
+        Helper.enumTrans,
+        numeral,
+      );
+    };
+  };
+
+  const processColumns = (columns) => {
+    return columns.map((col) => {
+      let processedColumn = {
+        ...col,
+        valueFormatter: col.valueFormatter
+          ? applyValueFormatter(col.valueFormatter)
+          : undefined,
+      };
+
+      // If the column has children, process them recursively
+      if (col.children && Array.isArray(col.children)) {
+        processedColumn.children = processColumns(col.children);
+      }
+
+      return processedColumn;
+    });
+  };
+
+  async function handleGetFilterObject(dtoType) {
+    try {
+      let response = null
+      response = await Services.PostService(Endpoints.FilterEndpoints.Post.GetFilterObject, false, {
+        type: dtoType,
+        filterLevel: level ?? 1,
+        levelArray: levelArray,
+      }, {})
+
+      if (response) {
+        let defaultCols = getDefaultColDefs()
+        let tableCols = [...response.table]
+        tableCols = processColumns(tableCols)
+        let localColDefs = [...tableCols, ...defaultCols]
+        if (extraCols != null) {
+          localColDefs = [...extraCols, ...localColDefs]
+        }
+        let localFlatCols = flattenArray(localColDefs)
+        setFlatCols(localFlatCols)
+        setColDefs([{
+          field: 'IZ_groupCount',
+          headerName: 'Group Count',
+          sortable: true,
+          hide: true,
+          valueGetter: (params) => params.data?.groupCount
+        }, ...localColDefs])
+        const localIncludes = getMostNestedFieldsWithChildren(response.table)
+        setIncludes(localIncludes)
+      } else {
+        setColDefs([])
+      }
+    } catch (error) {
+
+    } finally {
+    }
+  }
+
+  function getParentKeys(parentNode) {
+    const keys = [];
+    let currentNode = parentNode;
+    while (currentNode?.data) {
+      keys.unshift(currentNode.key); // Prepend to keep the order of ancestors
+      currentNode = currentNode.parent;
+    }
+    return keys;
+  }
+
+  // function getValueAtPath(obj, path) {
+  //   // Split the path into parts based on the dot notation
+  //   const parts = path.split('.');
+  //   // Traverse the object according to the path
+  //   let current = obj;
+  //
+  //   for (let part of parts) {
+  //     if (current === null || current === undefined) {
+  //       return 'null';  // If any part is null/undefined, return 'null'
+  //     }
+  //     current = current[part];
+  //   }
+  //
+  //   // If the final value is null, return 'null', otherwise return the value
+  //   return current === null ? 'null' : current;
+  // }
+
+  const getRowId = (params) => {
+    try {
+      let itemRowId = getValueByPath(params.data, uniqueIdPath);
+      let rowId = itemRowId + getRandomInt(1, 999999999999).toString()
+      return noPurge ? itemRowId : rowId
+    } catch (error) {
+      console.error(error)
+    }
+
+  };
+  const handleGetSortObject = (colId, sort, isGrouping, isPivot) => {
+    if (colId == "IZ_groupCount") {
+      return {
+        columnName: 'groupCount',
+        sortDirection: sort === 'asc' ? 'Ascending' : 'Descending',
+        afterSelect: true
+      }
+    }
+    if (isPivot || colId.endsWith("groupCount")) {
+      return {
+        columnName: colId,
+        sortDirection: sort === 'asc' ? 'Ascending' : 'Descending',
+        afterSelect: true
+      }
+    }
+    const field = isGrouping ? { path: colId, afterSelect: true } : flatCols.find(f => f.field === colId);
+    return {
+      columnName: isGrouping ? field.path.replace(".", "_") : field.path,
+      sortDirection: sort === 'asc' ? 'Ascending' : 'Descending',
+      afterSelect: field.afterSelect
+    }
+  }
+
+  const sideBarConfig = useMemo(() => ({
+    toolPanels: [
+      {
+        id: 'columns',
+        labelDefault: 'Columns',
+        labelKey: 'columns',
+        iconKey: 'columns',
+        toolPanel: 'agColumnsToolPanel',
+        toolPanelParams: {
+          suppressRowGroups: groupBy != null,
+          suppressValues: groupBy != null,
+        },
+        minWidth: 225,
+      },
+
+    ],
+    position: 'left',
+    // ← optionally open this panel by default on init
+    defaultToolPanel: 'columns',
+  }), [groupBy]);  // only re-create if groupBy changes
+  const handleGetAggregationObject = (agg) => {
+    const field = flatCols.find(f => f.field === agg.field);
+    // let method = 'Sum'
+    // switch (agg.aggFunc) {
+    //   case 'sum':method = 'Sum'; break;
+    //   case 'avg':method = 'Sum'; break;
+    //   case 'min':method = 'Sum'; break;
+    //   case 'max':method = 'Sum'; break;
+    // }
+    return {
+      path: field?.path,
+      method: agg.aggFunc,
+      // afterSelect: field.afterSelect//request.rowGroupCols.find(x => x.id === sort.colId) != null
+    }
+
+
+  }
+  const handleGetPath = (colId) => {
+    const field = flatCols.find(f => f.field === colId);
+    return field.path
+  }
+
+  function convertToNestedObject(flatObject, pivotCols) {
+    const resultObject = {};
+
+    Object.keys(flatObject).forEach(path => {
+      const value = flatObject[path];
+
+      // Check if the path starts with "pivot_" and remove it if it does
+      if (path.startsWith("pivot_")) {
+        const cleanedPath = path.substring(6); // Remove "pivot_"
+        resultObject[cleanedPath] = value;
+      } else {
+        // Otherwise, split the path and nest it
+        const keys = path.split('_');
+        let current = resultObject;
+
+        keys.forEach((key, index) => {
+          if (index === keys.length - 1) {
+            current[key] = value; // Assign the value to the final key
+          } else {
+            if (!current[key]) {
+              current[key] = {}; // Create an empty object if it doesn't exist
+            }
+            current = current[key]; // Move deeper into the object
+          }
+        });
+      }
+    });
+
+    return resultObject;
+  }
+
+  const createServerSideDatasource = (getRowsFromApi) => {
+    return {
+      getRows: (params) => {
+        const isPivotMode = params.api.isPivotMode()
+        // Fetch data from API based on request
+        getRowsFromApi(params)
+          .then((response) => {
+            if (response.success) {
+              // Supply rows for requested block to grid
+              params.success({
+                rowData: response.rows,
+                rowCount: response.total,
+                pivotResultFields: isPivotMode ? response.pivotColResult : null
+              });
+            } else {
+              params.fail();
+            }
+          })
+          .catch((e) => {
+            console.log(e)
+            params.fail()
+          });
+      },
+    };
+  }
+
+  const getRowsFromApi = useCallback(
+    async params => {
+      setFinalRequestObject(defaultFinalRequest)
+      const fixedTFilter = externalFilter?.fixedTFilter ?? externalFilter?.fixedTfilter ?? []
+      let localFilter = externalFilter ? { ...externalFilter } : {}
+      localFilter = { ...localFilter, ...Filter }
+      console.log(localFilter)
+      let localTFilter = localFilter?.Tfilter ? [...localFilter?.Tfilter] : []
+      localTFilter = localFilter?.TFilter ? [...localTFilter, ...localFilter?.TFilter] : [...localTFilter]
+      localTFilter = [...localTFilter, ...fixedTFilter]
+      console.log(localTFilter)
+      delete localFilter.Tfilter
+      delete localFilter.fixedTfilter
+      delete localFilter.fixedTFilter
+      delete localFilter.LocalTfilter
+      delete localFilter.localTfilter
+      localFilter = localFilter ?? {}
+      const request = params.request
+      const pageNumber = request.endRow / (request.endRow - request.startRow) // Calculate the page number
+      const pageSize = request.endRow - request.startRow // Calculate the page size
+      let aggregators = request.valueCols.filter(x => x.id != 'groupCount').map(agg => handleGetAggregationObject(agg))
+      let updateAggregation = true
+      if (colDefs && gridApi) {
+        let resultColDef = [...colDefs]
+        if (request.rowGroupCols.length > 0) {
+        }
+        // gridApi.setGridOption('columnDefs', resultColDef)
+        // gridApi.applyColumnState({state: colState});
+      }
+      let data = {
+        ...localFilter,
+        tFilter: [...localTFilter],
+        aggregators: aggregators,
+        pivotCols: request.pivotCols.map(x => handleGetPath(x.field))
+      }
+      try {
+        if (request.rowGroupCols.length !== request.groupKeys.length) {
+          if (request.rowGroupCols.length > 1 && request.groupKeys.length > 0) {
+            updateAggregation = false
+          }
+          let tFilters = request.groupKeys.map((x, index) => ({
+            path: request.rowGroupCols[index].id,
+            value: request.groupKeys[index] === 'null' ? null : request.groupKeys[index],
+            method: 'Equals',
+            dtoClassName: '',
+            modelClassName: ''
+          }))
+          const groupByColId = handleGetPath(params.request.rowGroupCols[params.parentNode.level + 1]?.id)
+          const rowGroupColsIds = request.rowGroupCols.map(value => value.id)
+          const valueColsIds = request.valueCols.map(value => value.id)
+          const groupOrderCols = [...rowGroupColsIds, ...valueColsIds]
+          let isGroupCountOrder = true;
+          // if (rowGroupColsIds.length > 1 && params.request.sortModel.length > 1) {
+          //   isGroupCountOrder = false;
+          // }
+          console.log(request.sortModel)
+          request.sortModel = (request.sortModel ?? []).map(x => ({
+            ...x,
+            colId: x?.colId?.endsWith("_groupCount")
+              ? x.colId.replace("_groupCount", "_groupCount")
+              : x.colId
+          }));
+          console.log(request)
+          console.log(request.sortModel)
+          const aggIds = request.valueCols.map(vc => vc.id);
+
+          const groupOrderColdIds = request.sortModel.filter(x => groupOrderCols.includes(x.colId) || ((x.colId == "IZ_groupCount" || x.colId.endsWith("groupCount") || aggIds.some(id => x.colId.endsWith(id))) && isGroupCountOrder))
+          let orderBy = groupOrderColdIds.map(sort => handleGetSortObject(sort.colId, sort.sort, true, aggIds.some(id => sort.colId.endsWith(id))))
+          console.log(groupOrderColdIds)
+          console.log(orderBy)
+          data = {
+            ...data,
+            tFilter: [...tFilters, ...data.tFilter],
+            orderBy: orderBy
+          }
+
+          // if (updateAggregation !== true) {
+          //   data.aggregators = []
+          // }
+          const response = await Services.PostService(groupEndPoint, false, data, {
+            groupBy: groupByColId,
+            page: pageNumber,
+            pageSize: pageSize,
+            getType: 'GroupingPagination',
+          })
+          setFinalRequestObject({
+            groupBy: groupByColId,
+            endpoint: groupEndPoint,
+            filter: data,
+            params: {}
+          })
+          const pivotColResult = []
+          if (request.pivotCols.length > 0) {
+            if (response?.pivotCols.length > 0) {
+              pivotColResult.push('groupCount')
+              const responsePivotCol = response.pivotCols.map(x => x.field) ?? []
+              pivotColResult.push(...responsePivotCol)
+            }
+          }
+          // groupKeys.push(request.rowGroupCols[request.groupKeys.length].id)
+          // const path = request.rowGroupCols[request.groupKeys.length].id
+          response.data = response.data.map(r => {
+            // return r
+            // const valueAtPath = getValueAtPath(r.key, path);
+            return convertToNestedObject(r, pivotColResult)
+          })
+          if (response.aggregation != null && updateAggregation === true) {
+            setPagedAgg([response.aggregation])
+          }
+
+          return {
+            success: true,
+            rows: colDefs && response.data, // Adjust based on your API's response structure
+            total: response.totalCount, // Total number of rows available from the server
+            pivotColResult: pivotColResult.length > 0 ? pivotColResult : null
+          }
+        } else {
+          if (request.groupKeys.length > 0) {
+            let tFilters = request.groupKeys.map((x, index) => ({
+              path: handleGetPath(request.rowGroupCols[index].id),
+              value: request.groupKeys[index] === 'null' ? null : request.groupKeys[index],
+              method: 'Equals',
+              dtoClassName: '',
+              modelClassName: ''
+            }))
+            updateAggregation = false
+
+            data = {
+              ...data,
+              tFilter: [...tFilters, ...data.tFilter]
+            }
+          }
+          let orderBy = request.sortModel.filter(x => !x.colId.endsWith("IZ_groupCount")).map(sort => handleGetSortObject(sort.colId, sort.sort, false))
+
+          if (data.tIncludes != null)
+            data = {
+              ...data,
+              tIncludes: [...data.tIncludes, ...includes],
+              orderBy: orderBy
+            }
+          else {
+            data = {
+              ...data,
+              tIncludes: [...includes],
+              orderBy: orderBy
+            }
+            if (fixedTIncludes != null) {
+              data.tIncludes = [...data.tIncludes, ...fixedTIncludes]
+            }
+          }
+          if (updateAggregation !== true) {
+            data.aggregators = []
+          }
+          const response = await Services.PostService(pagedEndPoint, false, data, {
+            ...paramsPage,
+            page: pageNumber,
+            pageSize: pageSize,
+            getType: 'Pagination'
+          })
+          setFinalRequestObject({
+            groupBy: null,
+            endpoint: pagedEndPoint,
+            filter: data,
+            params: paramsPage ?? {}
+          })
+          if (responseType == null) setResponseType(response.className)
+          if (responseType == null) setLocalClasName(response.className)
+          if (response.aggregation != null && updateAggregation === true) {
+            setPagedAgg([response.aggregation])
+          }
+
+          return {
+            success: true,
+            rows: colDefs && response.data, // Adjust based on your API's response structure
+            total: response.totalCount,
+            rowCount: response.totalCount,
+          }
+        }
+      } catch (error) {
+        console.log(error)
+        return { success: false }
+      }
+    },
+    [externalFilter, includes, paramsPage, Filter]
+  )
+  const datasource = useMemo(() => createServerSideDatasource(getRowsFromApi), [getRowsFromApi]);
+
+
+  const onGridReady = useCallback((params) => {
+    setGridApi(params.api)
+    if (setOutGridApi != null)
+      setOutGridApi(params.api)
+    // Create datasource with a reference to the API function
+    // const datasource = createServerSideDatasource(getRowsFromApi);
+
+    // // Register the datasource with the grid
+    // params.api.setGridOption("serverSideDatasource", datasource);
+  }, []);
+
+  const onRowSelected = (event) => {
+    if (setEventRowSelected != null) {
+      setEventRowSelected(event)
+    }
+  };
+
+  const getChildCount = data => {
+    return data.groupCount;
+  };
+
+  function flattenArray(arr) {
+    let result = [];
+
+    function traverse(item) {
+      if (!item.children) {
+        // If the item does not have children or the children array is empty, add it to the result
+        result.push(item);
+      } else {
+        // If the item has children, recursively traverse each child
+        item.children.forEach(child => traverse(child));
+      }
+    }
+
+    arr.forEach(item => traverse(item));
+    return result;
+  }
+
+  function getValueByPath(object, path) {
+    try {
+      if (path == undefined)
+        return getRandomInt(1, 999999999999).toString()
+      let id = path.split('.').reduce((acc, key) => acc && acc[key], object);
+      if (id === undefined)
+        return getRandomInt(1, 999999999999).toString()
+      else
+        return id
+
+    } catch (error) {
+
+    }
+  }
+
+  function getMostNestedFieldsWithChildren(columns) {
+    let mostNestedFields = [];
+
+    function traverse(column) {
+      if (column.children && column.children.length > 0) {
+        let allChildrenHaveNoChildren = column.children.every(
+          (child) => !child.children || child.children.length === 0
+        );
+        if (allChildrenHaveNoChildren) {
+          let columnField = column.field;
+          //
+          // Check if columnField starts with the accessor
+          if (accessor != null && columnField.toLowerCase().startsWith(accessor.toLowerCase())) {
+            // Remove the accessor part from columnField
+            columnField = columnField.slice(accessor.length);
+            if (columnField.startsWith(".")) {
+              columnField = columnField.slice(1);
+            }
+          }
+          if (columnField != null && columnField.length > 0) {
+            mostNestedFields.push(columnField);
+          }
+        } else {
+          column.children.forEach((child) => traverse(child));
+        }
+      }
+    }
+
+    columns.forEach((column) => traverse(column));
+    return mostNestedFields;
+  }
+
+  function handleFilterChange(field, value) {
+    handleChange(setFilter, field, value)
+  }
+
+  async function handleGetTemplates() {
+    try {
+      let response = null
+      let data = {
+        tFilter: [
+          {
+            method: 'Equals',
+            path: 'pageName',
+            value: router.pathname
+          },
+          {
+            method: 'Equals',
+            path: 'UserId',
+            value: authValues?.user?.id,
+          },
+        ]
+      }
+      response = await PostService(Endpoints.UserTableTemplates.Post.GetAllPagedByFilter, false, data)
+
+      if (response) {
+        setTemplates(response.data)
+
+      } else {
+        setTemplates([])
+      }
+    } catch (error) {
+
+    }
+  }
+
+  const handleToggleDialogs = dialog => {
+    handleChange(setOpenDialogs, dialog, !openDialogs[dialog])
+  }
+
+
+  async function handleSaveTemplate() {
+    try {
+      let response = null;
+      {
+        let data = {
+          ...selectedTemplate,
+          value: gridApi.getColumnState(),
+          userId: authValues?.user?.id,
+          filterValue: Filter
+        }
+        response = await UpdateService(Endpoints.UserTableTemplates.Put.UpdateTemplate, true, data, {
+          id: selectedTemplate?.id
+        })
+
+        if (response)
+          handleGetTemplates();
+      }
+    } catch (error) {
+
+    }
+  }
+
+  async function handleCSVExport() {
+    try {
+      let response = null;
+      {
+        setIsDownloading(true)
+        const cols = gridApi
+          .getColumnDefs()
+        const flatCols = flattenArray(cols)
+        console.log(flatCols)
+        const visibleCols = flatCols // all column definitions
+          .filter(colDef =>
+            gridApi.getColumnState().some(
+              col => col.colId === colDef.field && col.hide !== true
+            )
+          )
+        const visibleFields = visibleCols
+          .filter(x => x?.path)
+          .map(x => x.path);
+
+        let data = {
+          ...finalRequestObject.filter,
+          isExcelExport: true,
+          visibleFields: visibleFields,
+        }
+        const isPivotOff = !gridApi.isPivotMode()
+        if (isPivotOff) {
+          data.pivotCols = []
+        }
+        response = await StreamService(streamEndPoint, true, data, {
+          ...finalRequestObject.params,
+          groupBy: finalRequestObject.groupBy,
+          getType: 'Stream'
+        }, null,
+          progress => {
+            console.log(`Downloaded: ${progress}%`)
+          })
+
+      }
+    } catch (error) {
+      console.log(error)
+    } finally {
+      setIsDownloading(false)
+    }
+  }
+
+  const restoreState = () => {
+    if (gridApi !== null && colDefs !== null && selectedTemplate != null) {
+      gridApi.applyColumnState({
+        state: selectedTemplate.value,
+        applyOrder: true,
+      });
+    }
+    if (selectedTemplate.filterValue != null && (Filter.Tfilter == null || Filter.Tfilter.length == 0)) {
+      setFilter(selectedTemplate.filterValue);
+    }
+  };
+
+  useEffect(() => {
+    if (responseType != null) {
+      setClassName(responseType)
+      handleGetFilterObject(responseType)
+    }
+  }, [responseType]);
+
+  useEffect(() => {
+
+    if (gridApi !== null) {
+      gridApi.refreshServerSide({ purge: !noPurge })
+    }
+  }, [refresh, externalFilter, localRefresh, Filter]);
+
+  useEffect(() => {
+    if (gridApi != null && colDefs != null)
+      handleGetTemplates()
+  }, [gridApi, colDefs])
+
+  useEffect(() => {
+    if (colDefs.length > 0 && selectedTemplate != null) {
+      restoreState()
+    }
+  }, [selectedTemplate])
+  useEffect(() => {
+    if (selectedTemplate == null && templates.length > 0 && colDefs.length > 0) {
+      const userDefined = templates.find(x => x.isDefault === true)
+      if (userDefined != null)
+        setSelectedTemplate(userDefined)
+      else {
+        const systemDefined = templates.find(x => x.type === "UserPredefined")
+        if (systemDefined != null)
+          setSelectedTemplate(systemDefined)
+        else {
+          const anyTemplate = templates[0]
+          setSelectedTemplate(anyTemplate)
+        }
+      }
+    }
+  }, [templates, colDefs])
+
+  useEffect(() => {
+    if (!timerValue || isNaN(timerValue) || timerValue == 0) {
+
+      return;
+    }
+    // Convert minutes to milliseconds
+    const interval = timerValue * 60 * 1000;
+
+    const timeout = setTimeout(() => {
+      setLocalRefresh(prev => !prev); // Toggle value
+    }, interval);
+
+    return () => clearTimeout(timeout); // Cleanup
+  }, [timerValue]); // re-run after each refresh or change in value
+
+  return (
+    <Grid item container size={12}>
+      <Grid container item
+        sx={{ borderTop: '1px solid #ccc', backgroundColor: '#fafafb', justifyContent: 'space-between' }} padding={2}
+        size={12}>
+        <Box sx={{ display: 'flex', minWidth: '250px' }}>
+          <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}>0</MenuItem>
+                <MenuItem key={2} value={5}>5</MenuItem>
+                <MenuItem key={3} value={15}>15</MenuItem>
+                <MenuItem key={4} value={30}>30</MenuItem>
+              </Select>
+            </Tooltip>
+          </Box>
+        </Box>
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          {streamEndPoint &&
+            <Box>
+              <Tooltip title='تصدير'>
+                <IconButton
+                  disabled={isDownloading}
+                  onClick={handleCSVExport}
+                  color='primary'
+                >
+                  {isDownloading ? <CircularProgress size={24} /> : <FileExcelOutline />}
+                </IconButton>
+              </Tooltip>
+            </Box>
+          }
+          <Box>
+            <Tooltip title='حفظ النموذج'>
+              <IconButton disabled={selectedTemplate == null} onClick={() => {
+                handleSaveTemplate()
+              }} color='primary'>
+                <Save />
+              </IconButton>
+            </Tooltip>
+          </Box>
+          <Box>
+            <Tooltip title='حفظ بأسم'>
+              <IconButton onClick={() => {
+                setIsTemplateEditing(false)
+                handleToggleDialogs('addTemplate')
+              }} color='primary'>
+                <SaveAs />
+              </IconButton>
+            </Tooltip>
+          </Box>
+
+          <Box>
+            <Tooltip title='تعديل'>
+              <IconButton disabled={selectedTemplate == null}
+                onClick={() => {
+                  setIsTemplateEditing(true)
+                  handleToggleDialogs('addTemplate')
+                }}
+                color='primary'
+              >
+                <Edit />
+              </IconButton>
+            </Tooltip>
+          </Box>
+          <Box>
+            <IconButton color={'primary'} onClick={() => handleToggleDialogs('CustomFilter')}>
+              <FilterAlt />
+            </IconButton>
+          </Box>
+          <Box>
+            <Tooltip title='اعادة تحميل'>
+              <IconButton onClick={() => setLocalRefresh(!localRefresh)}>
+                <RefreshOutlined />
+              </IconButton>
+            </Tooltip>
+          </Box>
+
+        </Box>
+      </Grid>
+      <div style={{ width: "100%", height: height ?? "70vh", direction: 'ltr' }}>
+        <AgGridReact
+          debug={false}
+          columnHoverHighlight={true}
+          theme={agTheme}
+          enableRtl={true}
+          columnDefs={colDefs}
+          stopEditingWhenCellsLoseFocus={true}
+          rowModelType={"serverSide"}
+          onGridReady={onGridReady}
+          // defaultColDef={{
+          //   enableCellChangeFlash:true
+          // }}
+          cacheBlockSize={20}
+          // // rowBuffer={0}
+          onRowSelected={onRowSelected}
+          // getChildCount={getChildCount}
+          sideBar={sideBarConfig}
+          gridOptions={{
+            enableRangeSelection: true,
+            enableCharts: true,
+          }}
+          rowSelection="multiple"
+          statusBar={{
+            statusPanels: [
+              // { statusPanel: 'agTotalRowCountComponent' },
+              {
+                statusPanel: CustomStatusBar,
+                align: 'left',
+              },
+
+              // { statusPanel: 'agFilteredRowCountComponent' },
+              // { statusPanel: 'agSelectedRowCountComponent' },
+            ],
+          }}
+          groupHeaderHeight={25}
+          onChartCreated={x => console.log(x)}
+          headerHeight={25}
+          autoGroupColumnDef={autoGroupColumnDef}
+          getRowId={getRowId}
+          serverSideDatasource={datasource}
+          blockLoadDebounceMillis={500}
+          pinnedBottomRowData={pagedAgg}
+          suppressRowClickSelection={true}
+          serverSidePivotResultFieldSeparator={"_"}
+          pivotKeySeparator={"_"}
+          getRowStyle={(row) => {
+            if (row.node.group) {
+              return { fontWeight: 'bold' };
+            }
+            if (expireReport) {
+              if (row.node?.data?.expireDate && new Date(row.node.data.expireDate) <= new Date()) {
+                return { background: '#FF625F' };
+              }
+              if (row.node?.data?.expireDate) {
+                const expireDate = new Date(row.node.data.expireDate);
+                const currentDate = new Date();
+                const diffInDays = (expireDate - currentDate) / (1000 * 60 * 60 * 24); // Convert milliseconds to days
+
+                if (diffInDays > 10) {
+                  return { background: '#8AFF8A' };
+                } else if (diffInDays > 0) {
+                  return { background: '#fcfd74' };
+                }
+              }
+            }
+          }}
+
+          components={{
+            customStatusBar: CustomStatusBar,
+            // agColumnsToolPanel: CustomColumnsToolPanel
+
+          }}
+
+
+          onSortChanged={params => {
+            const sm = params.columns;
+            if (sm.length == 1 && sm.some(s => s.colId === 'IZ_groupCount')) {
+              params.api.refreshServerSide({ purge: true })
+            }
+          }}
+        />
+      </div>
+      <Dialog
+        fullWidth
+        open={openDialogs?.addTemplate}
+        maxWidth='md'
+        scroll='body'
+        onClose={() => {
+          handleToggleDialogs('addTemplate')
+        }}
+      >
+        <AddTemplateDialog
+          filterValue={Filter}
+          handleToggleDialogs={handleToggleDialogs}
+          pageName={router.pathname}
+          item={isTemplateEditing === true ? selectedTemplate : null}
+          template={gridApi?.getColumnState()}
+          userId={authValues?.user?.id} />
+      </Dialog>
+
+      <Dialog
+        fullWidth
+        open={openDialogs.CustomFilter && localClasName}
+        maxWidth='xl'
+        scroll='body'
+      // onClose={() => handleToggleDialogs('CustomFilter')}
+      >
+        <CustomFilterDialog
+          handleToggleDialogs={handleToggleDialogs}
+          Filter={Filter.LocalTfilter}
+          handleFilterChange={handleFilterChange}
+          className={localClasName}
+          LocalFilter={false}
+        />
+      </Dialog>
+    </Grid>
+
+  )
+}
+
+
+export default TAGGrid