@asaleh37/ui-base 1.0.9 → 1.1.0

package/src/components/templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid.tsx

@@ -0,0 +1,844 @@
+import {
+  DataGridPremium,
+  GridActionsCellItem,
+  GridActionsCellItemProps,
+  GridColumnOrderChangeParams,
+  GridColumnResizeParams,
+  GridColumnVisibilityModel,
+  GridEventListener,
+  GridExpandMoreIcon,
+  GridPinnedColumnFields,
+  GridRowGroupingModel,
+  GridRowModes,
+  GridRowModesModel,
+  GridRowParams,
+  GridRowSelectionModel,
+} from "@mui/x-data-grid-premium";
+import { TemplateGridColDef, TemplateGridProps } from "../DataEntryTypes";
+import TemplateGridTopBar from "./TemplateGridTopBar";
+import { useNavigate } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { z } from "zod";
+import {
+  constructGridColumnsFromFields,
+  constructValidationSchema,
+  getAllFields,
+} from "../DataEntryUtil";
+import { toast } from "react-toastify";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Divider,
+  IconButton,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import { capitalizeFirstLetter, isNumber } from "../../../../util/AppUtils";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import TemplateGridRecordAction from "./TemplateGridRecordAction";
+import TemplateForm from "../TemplateDataForm/TemplateForm";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../redux/store";
+import { useTranslation } from "react-i18next";
+import useSession from "../../../../hooks/UseSession";
+import { useConfirmationWindow } from "../../../../hooks/UseConfirmationWindow";
+import { useWindow } from "../../../../hooks/UseWindow";
+let currentNewRecordIndex = -1;
+
+interface GridState {
+  columnVisibilityModel?: GridColumnVisibilityModel;
+  columnOrder?: string[];
+  columnWidths?: { [key: string]: number };
+  columnGroupingModel?: GridRowGroupingModel;
+  pinnedColumns?: GridPinnedColumnFields;
+}
+
+const loadGridState = (gridStateKey: string): GridState => {
+  try {
+    const saved = localStorage.getItem(gridStateKey);
+    return saved ? JSON.parse(saved) : {};
+  } catch (e) {
+    console.error("Failed to load grid state", e);
+    return {};
+  }
+};
+
+const saveGridState = (gridStateKey: string, statePart: GridState) => {
+  const current = loadGridState(gridStateKey);
+  localStorage.setItem(
+    gridStateKey,
+    JSON.stringify({ ...current, ...statePart })
+  );
+};
+
+const PIN_FIXED_COLUMNS = ["__check__", "actions"];
+
+const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
+  const { t } = useTranslation();
+  const fields = getAllFields(props.formElements);
+  const hiddenFields = [];
+  const savedState = React.useMemo<GridState>(
+    () => (props?.gridStateKey ? loadGridState(props.gridStateKey) : {}),
+    []
+  );
+  for (const field of fields) {
+    if (field?.gridProps?.hidden === true) {
+      hiddenFields.push(field.fieldName);
+    }
+  }
+  let initialVisibilityState: GridColumnVisibilityModel = {};
+  if (savedState?.columnVisibilityModel) {
+    initialVisibilityState = savedState.columnVisibilityModel;
+    const existingFields = Object.keys(initialVisibilityState);
+    for (const field of hiddenFields) {
+      if (!existingFields.includes(field)) {
+        initialVisibilityState[field] = false;
+      }
+    }
+  } else {
+    for (const field of hiddenFields) {
+      initialVisibilityState[field] = false;
+    }
+  }
+
+  const themeDirection = useSelector(
+    (state: RootState) => state.AppLayout.appDirection
+  );
+
+  const clearGridState = () => {
+    if (props?.gridStateKey) {
+      localStorage.removeItem(props.gridStateKey);
+    }
+    setColumnVisibilityModel({});
+    setColumnOrder([]);
+    setColumnWidths({});
+    setGridRowGroupingModel([]);
+    setPinnedColumns({
+      left: [...(themeDirection === "ltr" ? PIN_FIXED_COLUMNS : [])],
+      right: [...(themeDirection === "rtl" ? PIN_FIXED_COLUMNS : [])],
+    });
+  };
+  const [columnVisibilityModel, setColumnVisibilityModel] =
+    React.useState<GridColumnVisibilityModel>(initialVisibilityState);
+  const [columnOrder, setColumnOrder] = React.useState<string[]>(
+    savedState.columnOrder || []
+  );
+  const [columnWidths, setColumnWidths] = React.useState<{
+    [key: string]: number;
+  }>(savedState.columnWidths || {});
+  const [gridRowGroupingModel, setGridRowGroupingModel] =
+    useState<GridRowGroupingModel>(savedState.columnGroupingModel || []);
+  let newLeft = savedState?.pinnedColumns?.left || [];
+  newLeft = newLeft.filter(
+    (record: any) => !PIN_FIXED_COLUMNS.includes(record)
+  );
+  let newRight = savedState?.pinnedColumns?.right || [] || [];
+  newRight = newRight.filter(
+    (record: any) => !PIN_FIXED_COLUMNS.includes(record)
+  );
+
+  const [pinnedColumns, setPinnedColumns] = useState<GridPinnedColumnFields>({
+    left: [...(themeDirection === "ltr" ? PIN_FIXED_COLUMNS : []), ...newLeft],
+    right: [
+      ...(themeDirection === "rtl" ? PIN_FIXED_COLUMNS : []),
+      ...newRight,
+    ],
+  });
+
+  const session = useSession();
+  const navigate = useNavigate();
+  const [recordToDelete, setRecordToDelete] = useState<any>(null);
+  const [recordToEdit, setRecordToEdit] = useState<any>(null);
+  const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});
+
+  const [rowSelectionModel, setRowSelectionModel] =
+    useState<GridRowSelectionModel>({ ids: new Set(), type: "include" });
+  let keyColumnName: string = "id";
+  if (props?.keyColumnName) {
+    keyColumnName = props?.keyColumnName;
+  }
+  const setData = props.setData;
+  const validationSchema = z.object(constructValidationSchema(fields));
+  const generatedColumns = constructGridColumnsFromFields(
+    fields,
+    props?.editMode?.editMode === "row" || false,
+    t
+  );
+  let isEditAllowed = true;
+  if (props?.editAction?.authority) {
+    isEditAllowed = session.isUserAuthorized(props.editAction.authority);
+  }
+  let isDeleteAllowed = true;
+  if (props?.deleteAction?.authority) {
+    isDeleteAllowed = session.isUserAuthorized(props.deleteAction.authority);
+  }
+
+  const handleRowModesModelChange = (newModel: GridRowModesModel) => {
+    setRowModesModel(newModel);
+  };
+
+  const handlePinnedColumnsChange = (newModel: GridPinnedColumnFields) => {
+    let newLeft = newModel?.left || [];
+    newLeft = newLeft.filter(
+      (record: any) => !PIN_FIXED_COLUMNS.includes(record)
+    );
+    let newRight = newModel?.right || [];
+    newRight = newRight.filter(
+      (record: any) => !PIN_FIXED_COLUMNS.includes(record)
+    );
+    const newPinedColumns: GridPinnedColumnFields = {
+      left: [
+        ...(themeDirection === "ltr" ? PIN_FIXED_COLUMNS : []),
+        ...newLeft,
+      ],
+      right: [
+        ...(themeDirection === "rtl" ? PIN_FIXED_COLUMNS : []),
+        ...newRight,
+      ],
+    };
+    setPinnedColumns(newPinedColumns);
+    if (props?.gridStateKey) {
+      saveGridState(props.gridStateKey, { pinnedColumns: newPinedColumns });
+    }
+  };
+
+  const handleDeleteRecord = async () => {
+    let result = true;
+    if (!(recordToDelete && recordToDelete?.isNew === true)) {
+      result = await props.apiActions.deleteRecordById(
+        recordToDelete[keyColumnName]
+      );
+    }
+    if (result) {
+      if (props?.deleteAction?.postActionCallBack) {
+        await props.deleteAction.postActionCallBack(recordToDelete);
+      }
+
+      setData((oldData: any) => {
+        const newData = oldData.filter(
+          (record: any) =>
+            record[keyColumnName] != recordToDelete[keyColumnName]
+        );
+        return newData;
+      });
+    }
+  };
+
+  const { ConfirmationWindow, setOpen: setConfirmationWindowOpened } =
+    useConfirmationWindow({
+      title: "Confirmation",
+      body: "Are you sure you want to delete this record ?",
+      onConfirmationCallBk: handleDeleteRecord,
+    });
+
+  let formModalHeight = undefined;
+  let formModalWidth = undefined;
+  let formModalMinHeight = undefined;
+  let formModalMinWidth = undefined;
+  let formModalIcon = undefined;
+  let formModalTitle = undefined;
+
+  if (props?.editMode?.editMode === "modal") {
+    formModalHeight = props?.editMode?.specs?.modalHeight || "fit-content";
+    formModalWidth = props?.editMode?.specs?.modalWidth || "300";
+    formModalMinHeight = props?.editMode?.specs?.modalMinHeight;
+    formModalMinWidth = props?.editMode?.specs?.modalMinWidth;
+    formModalIcon = props?.editMode?.specs?.modalIcon || "window";
+    formModalTitle = props?.editMode?.specs?.modalTitle || "Record Form";
+  }
+
+  const { Window: FormWindow, setWindowState: setFormWindowState } = useWindow({
+    height: formModalHeight,
+    minHeight: formModalMinHeight,
+    minWidth: formModalMinWidth,
+    onCloseCallBack: () => {
+      props.apiActions.reloadData(props?.gridLoadParametersValues);
+    },
+    width: formModalWidth,
+    windowIcon: formModalIcon,
+    windowTitle: formModalTitle,
+  });
+
+  const handleCreateNewRecord = () => {
+    if (props?.editMode?.editMode === "form") {
+      navigate(props.editMode.specs.formRoute);
+    } else if (props?.editMode?.editMode === "modal") {
+      setFormWindowState(true);
+    } else if (props?.editMode?.editMode === "row") {
+      currentNewRecordIndex = currentNewRecordIndex - 1;
+      const newRecord: any = {};
+      newRecord[keyColumnName] = currentNewRecordIndex;
+      newRecord.isNew = true;
+      for (const gridColumn of generatedColumns) {
+        if (
+          gridColumn?.type != "actions" &&
+          gridColumn?.field != keyColumnName
+        ) {
+          if (gridColumn?.field) {
+            newRecord[gridColumn.field] = null;
+          }
+        }
+      }
+      setData((oldRows: any) => [newRecord, ...oldRows]);
+      setRowModesModel((oldModel: any) => ({
+        ...oldModel,
+        [currentNewRecordIndex]: { mode: GridRowModes.Edit },
+      }));
+    }
+  };
+
+  const handleEditRecord = async (record: any) => {
+    if (record) {
+      setRecordToEdit(record);
+      if (props.editMode.editMode === "form") {
+        navigate(props.editMode.specs.formRoute + "/" + record[keyColumnName]);
+      } else if (props.editMode.editMode === "modal") {
+        setFormWindowState(true);
+      } else if (props?.editMode?.editMode === "row") {
+        const id = record[keyColumnName];
+        setRowModesModel({
+          ...rowModesModel,
+          [id]: { mode: GridRowModes.Edit },
+        });
+      }
+    }
+  };
+
+  const validateRecord = (record: any) => {
+    try {
+      validationSchema.parse(record);
+    } catch (err) {
+      console.log("validateRecord err", err);
+      let errorMessage: any = null;
+      if (err instanceof z.ZodError) {
+        errorMessage = err.errors
+          .map(
+            (error) => "Error in field (" + error.path + ") : " + error.message
+          )
+          .join(",");
+      } else {
+        errorMessage = "invalid record data";
+      }
+      return errorMessage;
+    }
+  };
+
+  const handleSaveRowClick = (record: any) => {
+    const id = record[keyColumnName];
+    setRowModesModel({
+      ...rowModesModel,
+      [id]: { mode: GridRowModes.View },
+    });
+  };
+
+  const processRowUpdate = async (record: any) => {
+    if (props.editMode.editMode === "row") {
+      let savedRecord: any = null;
+      const errorMessage = validateRecord(record);
+      if (errorMessage) {
+        const errors = errorMessage.split(",");
+        toast.error(
+          <div style={{}}>
+            {errors.map((error: any) => (
+              <>
+                <div>{error}</div>
+                <Divider />
+              </>
+            ))}
+          </div>
+        );
+        throw new Error(errorMessage);
+      }
+      if (props?.editAction?.preActionValidation) {
+        if (!props.editAction.preActionValidation(record)) {
+          throw new Error("error on the configured presave validation");
+        }
+      }
+      const requestObject: any = { ...record };
+      if (
+        record[keyColumnName] &&
+        isNumber(record[keyColumnName]) &&
+        Number(record[keyColumnName]) < 0
+      ) {
+        requestObject[keyColumnName] = null;
+      }
+      savedRecord = await props.apiActions.saveRecord(requestObject);
+      if (savedRecord == null) {
+        throw new Error(
+          "Failed to process your request, contact your administrator"
+        );
+      }
+      if (props?.editAction?.postActionCallBack) {
+        await props.editAction.postActionCallBack(record);
+      }
+      if (record?.isNew === true) {
+        setData((oldData: any) => {
+          const newData = oldData.filter(
+            (x: any) => x[keyColumnName] !== record[keyColumnName]
+          );
+          return [savedRecord, ...newData];
+        });
+      }
+      if (
+        props?.editMode?.reloadAfterSave === true &&
+        props?.apiActions?.reloadData
+      ) {
+        props?.apiActions?.reloadData(props?.gridLoadParametersValues);
+      }
+      return savedRecord;
+    }
+  };
+
+  const handleCancelRowEditClick = (record: any) => {
+    const id = record[keyColumnName];
+    if (id && isNumber(id) && id < 0) {
+      setRowModesModel({
+        ...rowModesModel,
+        [id]: { mode: GridRowModes.View, ignoreModifications: true },
+      });
+      setData((oldData: any) => {
+        const newData = oldData.filter(
+          (record: any) => record[keyColumnName] != id
+        );
+        return newData;
+      });
+    } else {
+      setRowModesModel({
+        ...rowModesModel,
+        [id]: { mode: GridRowModes.View, ignoreModifications: true },
+      });
+    }
+  };
+
+  const getActionColumnActions = (params: GridRowParams<any>) => {
+    const record: any = params.row;
+    const actions: Array<React.ReactElement<GridActionsCellItemProps>> = [];
+    if (props?.editMode?.editMode != "none") {
+      if (
+        props?.disableDefaultAction === undefined ||
+        !props.disableDefaultAction
+      ) {
+        const isInEditMode: boolean =
+          rowModesModel[record[keyColumnName]]?.mode === GridRowModes.Edit;
+        if (props.editMode.editMode === "row" && isInEditMode) {
+          if (isEditAllowed) {
+            actions.push(
+              <GridActionsCellItem
+                icon={<FontAwesomeIcon icon="save" />}
+                label={t("SAVE_BTN_LABEL")}
+                onClick={() => {
+                  handleSaveRowClick(record);
+                }}
+              />
+            );
+            actions.push(
+              <GridActionsCellItem
+                icon={<FontAwesomeIcon icon="cancel" />}
+                label={t("CANCEL_BTN_LABEL")}
+                onClick={() => {
+                  handleCancelRowEditClick(record);
+                }}
+                color="inherit"
+              />
+            );
+          }
+        } else {
+          if (props?.editAction && props?.editAction?.isEnabled === true) {
+            let isEditActionVisibleForRecord = true;
+            if (props?.editAction?.isActionVisibleForRecord) {
+              isEditActionVisibleForRecord =
+                props?.editAction?.isActionVisibleForRecord(record);
+            }
+            let isActionEditDisabledForRecord = false;
+            if (props?.editAction?.isActionDisabledForRecord) {
+              isActionEditDisabledForRecord =
+                props?.editAction?.isActionDisabledForRecord(record);
+            }
+            if (isEditAllowed && isEditActionVisibleForRecord) {
+              actions.push(
+                <GridActionsCellItem
+                  disabled={isActionEditDisabledForRecord}
+                  icon={
+                    <Tooltip title={t("EDIT_BTN_LABEL")}>
+                      <FontAwesomeIcon
+                        icon={"edit"}
+                        style={{
+                          color: isActionEditDisabledForRecord
+                            ? "gray"
+                            : undefined,
+                        }}
+                      />
+                    </Tooltip>
+                  }
+                  showInMenu={
+                    props?.editAction?.gridActionProps?.showInMenu || false
+                  }
+                  label={t("EDIT_BTN_LABEL")}
+                  className="textPrimary"
+                  color="inherit"
+                  onClick={() => {
+                    if (isEditAllowed && !isActionEditDisabledForRecord) {
+                      handleEditRecord(record);
+                    }
+                  }}
+                />
+              );
+            }
+          }
+          if (props?.deleteAction && props?.deleteAction?.isEnabled === true) {
+            let isDeleteActionVisibleForRecord = true;
+            if (props?.deleteAction?.isActionVisibleForRecord) {
+              isDeleteActionVisibleForRecord =
+                props?.deleteAction?.isActionVisibleForRecord(record);
+            }
+            let isDeleteActionDisabledForRecord = false;
+            if (props?.deleteAction?.isActionDisabledForRecord) {
+              isDeleteActionDisabledForRecord =
+                props?.deleteAction?.isActionDisabledForRecord(record);
+            }
+            if (isDeleteAllowed && isDeleteActionVisibleForRecord) {
+              actions.push(
+                <GridActionsCellItem
+                  disabled={isDeleteActionDisabledForRecord}
+                  icon={
+                    <Tooltip title={t("DELETE_BTN_LABEL")}>
+                      <FontAwesomeIcon
+                        icon={"trash"}
+                        style={{
+                          color: isDeleteActionDisabledForRecord
+                            ? "gray"
+                            : undefined,
+                        }}
+                      />
+                    </Tooltip>
+                  }
+                  showInMenu={
+                    props?.deleteAction?.gridActionProps?.showInMenu || false
+                  }
+                  label={t("DELETE_BTN_LABEL")}
+                  className="textPrimary"
+                  color="inherit"
+                  onClick={() => {
+                    if (isDeleteAllowed && !isDeleteActionDisabledForRecord) {
+                      if (props?.deleteAction?.preActionValidation) {
+                        if (!props.deleteAction.preActionValidation(record)) {
+                          return;
+                        }
+                      }
+                      setRecordToDelete(record);
+                      setConfirmationWindowOpened(true);
+                    }
+                  }}
+                />
+              );
+            }
+          }
+        }
+      }
+    }
+    if (props?.rowActions) {
+      for (const rowAction of props.rowActions) {
+        if (
+          !(
+            rowAction?.gridActionProps?.multiRecord &&
+            rowAction?.gridActionProps?.multiRecord === true
+          )
+        ) {
+          actions.push(
+            <TemplateGridRecordAction
+              {...rowAction}
+              record={record}
+              reloadData={async () => {
+                props.apiActions.reloadData(props?.gridLoadParametersValues);
+              }}
+            />
+          );
+        }
+      }
+    }
+
+    return actions;
+  };
+
+  const actionColumn: TemplateGridColDef = {
+    type: "actions",
+    field: "actions",
+    headerName: "",
+    headerAlign: "center",
+    width:
+      (props?.rowActions ? props.rowActions.length * 30 : 0) +
+      (props?.editAction && props?.editAction?.isEnabled ? 30 : 0) +
+      (props?.deleteAction && props?.deleteAction?.isEnabled ? 30 : 0),
+    getActions: getActionColumnActions,
+  };
+
+  let structuredColumns: Array<TemplateGridColDef> = [];
+  if (
+    props?.disableDefaultAction === undefined ||
+    !props.disableDefaultAction ||
+    (props?.rowActions && props?.rowActions.length > 0)
+  ) {
+    structuredColumns.push(actionColumn);
+  }
+
+  structuredColumns = [...structuredColumns, ...generatedColumns];
+  const handleRowSelection = (gridSelectionModel: GridRowSelectionModel) => {
+    setRowSelectionModel(gridSelectionModel);
+  };
+  useEffect(() => {
+    if (props?.autoLoad === undefined || props.autoLoad === true) {
+      props.apiActions.reloadData(props?.gridLoadParametersValues);
+    }
+  }, []);
+
+  const handleColumnVisibilityChange = (model: GridColumnVisibilityModel) => {
+    setColumnVisibilityModel(model);
+    if (props?.gridStateKey) {
+      saveGridState(props.gridStateKey, { columnVisibilityModel: model });
+    }
+  };
+
+  const handleColumnOrderChange: GridEventListener<"columnOrderChange"> = (
+    params: GridColumnOrderChangeParams
+  ) => {
+    const { column, targetIndex } = params;
+    setColumnOrder((prevOrder) => {
+      const currentOrder = prevOrder.length
+        ? [...prevOrder]
+        : structuredColumns.map((col) => col.field);
+      const fromIndex = currentOrder.indexOf(column.field);
+      if (fromIndex === -1) return currentOrder;
+
+      currentOrder.splice(fromIndex, 1); // remove
+      currentOrder.splice(targetIndex, 0, column.field); // insert at new index
+
+      if (props?.gridStateKey) {
+        saveGridState(props.gridStateKey, { columnOrder: currentOrder });
+      }
+
+      return currentOrder;
+    });
+  };
+
+  const handleRowGroupChange = (model: GridRowGroupingModel) => {
+    setGridRowGroupingModel(model);
+    if (props?.gridStateKey) {
+      saveGridState(props.gridStateKey, { columnGroupingModel: model });
+    }
+  };
+
+  const handleColumnWidthChange: GridEventListener<"columnWidthChange"> = (
+    params: GridColumnResizeParams
+  ) => {
+    const updatedWidths = {
+      ...columnWidths,
+      [params.colDef.field]: params.width,
+    };
+    setColumnWidths(updatedWidths);
+    if (props?.gridStateKey) {
+      saveGridState(props.gridStateKey, { columnWidths: updatedWidths });
+    }
+  };
+
+  const adjustedColumns: Array<TemplateGridColDef> = React.useMemo(() => {
+    const baseCols = structuredColumns.map((col) => ({
+      ...col,
+      width: columnWidths[col.field] || col.width,
+    }));
+
+    // Reorder based on saved columnOrder
+    if (columnOrder.length) {
+      const fieldToCol = new Map(baseCols.map((col) => [col.field, col]));
+      return columnOrder.map((field) => fieldToCol.get(field)!).filter(Boolean);
+    }
+
+    return baseCols;
+  }, [columnOrder, columnWidths, structuredColumns]);
+  return (
+    <>
+      <ConfirmationWindow />
+      {props?.editMode?.editMode === "modal" ? (
+        <FormWindow>
+          {props?.editMode?.specs?.formComponent ? (
+            <props.editMode.specs.formComponent
+              recordIdToEdit={
+                recordToEdit ? recordToEdit[keyColumnName] : undefined
+              }
+              formCloseCallBk={() => {
+                setFormWindowState(false);
+                props.apiActions.reloadData(props?.gridLoadParametersValues);
+              }}
+            />
+          ) : (
+            <TemplateForm
+              recordIdToEdit={
+                recordToEdit ? recordToEdit[keyColumnName] : undefined
+              }
+              formCloseCallBk={() => {
+                setFormWindowState(false);
+                props.apiActions.reloadData(props?.gridLoadParametersValues);
+              }}
+              elements={props.formElements}
+              apiActions={props.apiActions}
+              editAuthorityKey={props?.editAction?.authority}
+              formSavedSuccessfullyCallBk={
+                props?.editAction?.postActionCallBack
+              }
+              preSaveValidation={props?.editAction?.preActionValidation}
+              actions={props?.rowActions}
+            />
+          )}
+        </FormWindow>
+      ) : (
+        <></>
+      )}
+      {props?.hideInfoBar === undefined && !props?.hideInfoBar ? (
+        <Box sx={{ display: "flex" }}>
+          {props?.hideBackButton === undefined && !props?.hideBackButton ? (
+            <IconButton
+              onClick={() => {
+                navigate("-1", { replace: true });
+              }}
+            >
+              <FontAwesomeIcon icon="arrow-left" />
+            </IconButton>
+          ) : (
+            <></>
+          )}
+          <Box
+            sx={{
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            {props?.girdIcon ? (
+              <FontAwesomeIcon
+                icon={props.girdIcon}
+                style={{ marginRight: 5, marginLeft: 5 }}
+              />
+            ) : (
+              <></>
+            )}
+            <Typography variant="h5">
+              {props?.gridTitle
+                ? capitalizeFirstLetter(t(props?.gridTitle))
+                : ""}
+            </Typography>
+          </Box>
+        </Box>
+      ) : (
+        <></>
+      )}
+
+      {props?.gridLoadParameters &&
+      props?.gridLoadParametersValues &&
+      props?.setGridLoadParametersValues ? (
+        <Accordion defaultExpanded>
+          <AccordionSummary expandIcon={<GridExpandMoreIcon />}>
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <FontAwesomeIcon
+                style={{ marginLeft: 5, marginRight: 5 }}
+                icon="search"
+              />
+              <Typography component="span">Filters</Typography>
+            </Box>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Box>
+              <TemplateForm
+                saveButtonSpecs={{
+                  label: t("SEARCH_BTN_LABEL"),
+                  icon: "search",
+                  actionButtonVariant: "outlined",
+                  actionButtonColor: "success",
+                }}
+                cancelButtonSpecs={{
+                  label: t("RESET_BTN_LABEL"),
+                  icon: "eraser",
+                  actionButtonVariant: "outlined",
+                  actionButtonColor: "error",
+                }}
+                apiActions={{
+                  deleteRecordById: async () => {
+                    return true;
+                  },
+                  saveRecord: async (params) => {
+                    if (params != undefined) {
+                      props.setGridLoadParametersValues(params);
+                    } else {
+                      props.setGridLoadParametersValues({});
+                    }
+                    props.apiActions.reloadData(params);
+                  },
+                  reloadData: async () => {},
+                  loadRecordById: async () => {},
+                }}
+                elements={props.gridLoadParameters}
+              />
+            </Box>
+          </AccordionDetails>
+        </Accordion>
+      ) : (
+        <></>
+      )}
+
+      <DataGridPremium
+        {...props?.muiProps}
+        slots={{ toolbar: TemplateGridTopBar }}
+        slotProps={{
+          toolbar: {
+            templateProps: {
+              ...props,
+              rowSelectionModel: rowSelectionModel,
+              data: props?.data,
+            },
+            handleCreateNewRecord,
+            clearGridState,
+          } as any,
+        }}
+        getRowId={(record: any) => {
+          return record[keyColumnName];
+        }}
+        showToolbar={true}
+        rows={props?.data}
+        columns={adjustedColumns}
+        checkboxSelection
+        editMode="row"
+        rowModesModel={
+          props.editMode.editMode == "row" ? rowModesModel : undefined
+        }
+        onRowModesModelChange={
+          props.editMode.editMode == "row"
+            ? handleRowModesModelChange
+            : undefined
+        }
+        rowGroupingColumnMode="multiple"
+        processRowUpdate={processRowUpdate}
+        rowSelectionModel={rowSelectionModel}
+        onRowSelectionModelChange={handleRowSelection}
+        columnVisibilityModel={columnVisibilityModel}
+        onColumnVisibilityModelChange={handleColumnVisibilityChange}
+        onColumnOrderChange={handleColumnOrderChange}
+        onColumnWidthChange={handleColumnWidthChange}
+        rowGroupingModel={gridRowGroupingModel}
+        onRowGroupingModelChange={(model: GridRowGroupingModel) => {
+          handleRowGroupChange(model);
+        }}
+        pinnedColumns={pinnedColumns}
+        onPinnedColumnsChange={handlePinnedColumnsChange}
+      />
+    </>
+  );
+};
+
+export default TemplateGrid;