@asaleh37/ui-base 26.2.16 → 27.5.26

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

@@ -1,1044 +1,1044 @@
-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 { useTranslation } from "react-i18next";
-import useSession from "../../../../hooks/UseSession";
-import { useConfirmationWindow } from "../../../../hooks/UseConfirmationWindow";
-import { useWindow } from "../../../../hooks/UseWindow";
-import { useAxios } from "../../../../hooks";
-import useLookupGridColumn from "../../../../hooks/useLookupGridColumn";
-import { ContinuousColorLegend } from "@mui/x-charts";
-import AttachmentPanel from "../../attachment/AttachmentPanel";
-import WorkflowDocumentPanel from "../../workflow/WorkflowDocumentPanel";
-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 { handleGetRequest } = useAxios();
-  const stores = useSelector((state: any) => state.commonStores.stores);
-  const AppLayout = useSelector((state: any) => state.AppLayout);
-  const [selectedRecord, setSelectedRecord] = useState<any>({});
-  const [attachmentPanelEnabledForRecord, setAttachmentPanelEnabledForRecord] =
-    useState<boolean>(true);
-  const { getLookupOptions } = useLookupGridColumn();
-  const { Window: AttachmentWindow, setWindowState: setAttachmentWindowState } =
-    useWindow({
-      windowTitle: t(props.gridTitle) + " Attachments",
-      windowIcon: "paperclip",
-      width: "fit-content",
-      height: "fit-content",
-      minHeight: 500,
-      minWidth: "50%",
-      onCloseCallBack: () => {
-        props?.apiActions?.reloadData(props.gridLoadParametersValues);
-      },
-    });
-  const { Window: WorkFlowWindow, setWindowState: setWorkFlowWindowState } =
-    useWindow({
-      windowTitle: t(props.gridTitle) + " Approvals",
-      windowIcon: "stamp",
-      height: "fit-content",
-      minHeight: 500,
-      width: "fit-content",
-      // width:1100,
-      onCloseCallBack: () => {
-        props?.apiActions?.reloadData(props.gridLoadParametersValues);
-      },
-    });
-  const [generatedColumns, setGeneratedColumns] = useState<
-    Array<TemplateGridColDef>
-  >([]);
-  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: any) => 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 loadComboboxData: (
-    storeUrl: any,
-    storeLoadParam: any,
-    dataQueryId: any
-  ) => Promise<Array<any>> = async (storeUrl, storeLoadParam, dataQueryId) => {
-    let comboboxData: Array<any> = [];
-    if (storeUrl) {
-      await handleGetRequest({
-        endPointURI: storeUrl,
-        showMask: false,
-        parameters: storeLoadParam,
-        successCallBkFn: (response) => {
-          comboboxData = response.data;
-        },
-      });
-    } else if (dataQueryId) {
-      await handleGetRequest({
-        endPointURI: "api/v1/dev/query/result",
-        showMask: false,
-        parameters: { queryId: dataQueryId, ...storeLoadParam },
-        successCallBkFn: (response) => {
-          comboboxData = response.data;
-        },
-      });
-    }
-    return comboboxData;
-  };
-  const adjustGridColumns = async () => {
-    let gridColumns = constructGridColumnsFromFields(
-      fields,
-      props?.editMode?.editMode === "row" || false,
-      t
-    );
-    for (let gridColumn of gridColumns) {
-      if (gridColumn?.lookupType) {
-        gridColumn.displayField =
-          AppLayout.appDirection === "ltr"
-            ? "lookupEnDisplay"
-            : "lookupArDisplay";
-        gridColumn.options = await getLookupOptions(gridColumn.lookupType);
-        gridColumn.valueField = "lookupValue";
-      }
-      if (gridColumn.type === "custom") {
-        if (gridColumn?.options) {
-          continue;
-        } else if (gridColumn?.commonStoreKey) {
-          gridColumn.options = stores[gridColumn.commonStoreKey]?.data || [];
-        } else {
-          gridColumn.options = await loadComboboxData(
-            gridColumn?.storeUrl,
-            gridColumn?.storeLoadParam,
-            gridColumn?.dataQueryId
-          );
-        }
-      }
-    }
-    setGeneratedColumns(gridColumns);
-  };
-  const [rowSelectionModel, setRowSelectionModel] =
-    useState<GridRowSelectionModel>({ ids: new Set(), type: "include" });
-  let keyColumnName: string = "id";
-  if (props?.keyColumnName) {
-    keyColumnName = props?.keyColumnName;
-  }
-  const setData = props.setData;
-  let validationSchema = null;
-  if (props?.validationSchema) {
-    validationSchema = props.validationSchema;
-  } else {
-    validationSchema = z.object(constructValidationSchema(fields));
-  }
-
-  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") {
-      setRecordToEdit(null);
-      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 (
-      (record[props?.keyColumnName] || (record["id"] && record["id"] > 0)) &&
-      props?.attachment
-    ) {
-      actions?.push(
-        <GridActionsCellItem
-          icon={
-            <Tooltip title={"Attachments"}>
-              <FontAwesomeIcon icon={"paperclip"} />
-            </Tooltip>
-          }
-          label={"Attachments"}
-          className="textPrimary"
-          color="inherit"
-          onClick={() => {
-            setSelectedRecord(record);
-            if (props?.attachment?.enableAttachFn) {
-              setAttachmentPanelEnabledForRecord(
-                props.attachment.enableAttachFn(record)
-              );
-            } else {
-              setAttachmentPanelEnabledForRecord(true);
-            }
-            setAttachmentWindowState(true);
-          }}
-        />
-      );
-    }
-    if (
-      (record[props?.keyColumnName] || (record["id"] && record["id"] > 0)) &&
-      props?.workFlowDocumentCode
-    ) {
-      actions?.push(
-        <GridActionsCellItem
-          icon={
-            <Tooltip title={"Approvals"}>
-              <FontAwesomeIcon icon={"stamp"} />
-            </Tooltip>
-          }
-          label={"Approvals"}
-          className="textPrimary"
-          color="inherit"
-          onClick={() => {
-            setSelectedRecord(record);
-            setWorkFlowWindowState(true);
-          }}
-        />
-      );
-    }
-    if (
-      record[props?.keyColumnName || "id"] &&
-      record[props?.keyColumnName || "id"] > 0 &&
-      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) +
-      (props?.attachment ? 30 : 0) +
-      (props?.workFlowDocumentCode ? 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);
-    }
-    adjustGridColumns();
-  }, []);
-
-  useEffect(() => {
-    props.apiActions.reloadData(props?.gridLoadParametersValues);
-  }, [session.UserInfo?.currentOrganization]);
-
-  useEffect(() => {
-    adjustGridColumns();
-  }, [themeDirection, props.formElements]);
-
-  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,
-    }));
-
-    // 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
-              keyColumnName={props.keyColumnName}
-              attachment={props.attachment}
-              formValuesChangeCallBk={props?.formProps?.formValuesChangeCallBk}
-              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={themeDirection === "ltr" ? "arrow-left" : "arrow-right"}
-              />
-            </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?.gridLoadParameters.length > 0 &&
-      props?.gridLoadParametersValues &&
-      props?.setGridLoadParametersValues ? (
-        <Accordion defaultExpanded sx={{ width: "100%" }}>
-          <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>
-      ) : (
-        <></>
-      )}
-      {props?.attachment ? (
-        <AttachmentWindow>
-          <AttachmentPanel
-            attachmentCode={props.attachment.attachmentCode}
-            refKey={selectedRecord[props?.keyColumnName || "id"]}
-            enableAttachment={attachmentPanelEnabledForRecord}
-          />
-        </AttachmentWindow>
-      ) : (
-        <></>
-      )}
-      {props?.workFlowDocumentCode ? (
-        <WorkFlowWindow>
-          <WorkflowDocumentPanel
-            workFlowDocumentCode={props.workFlowDocumentCode}
-            refDocumentId={selectedRecord[props?.keyColumnName || "id"]}
-            postActionCallBk={() => {
-              setWorkFlowWindowState(false);
-              props.apiActions.reloadData(props.gridLoadParametersValues);
-            }}
-            cancelActionCallBk={() => {
-              setWorkFlowWindowState(false);
-              props.apiActions.reloadData(props.gridLoadParametersValues);
-            }}
-          />
-        </WorkFlowWindow>
-      ) : (
-        <></>
-      )}
-      <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"
-        onRowEditStop={(params, event) => {
-          if (params.reason === "rowFocusOut") {
-            event.defaultMuiPrevented = true;
-          }
-        }}
-        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}
-        sx={{ width: "100%" }}
-      />
-    </>
-  );
-};
-
-export default TemplateGrid;
+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 { useTranslation } from "react-i18next";
+import useSession from "../../../../hooks/UseSession";
+import { useConfirmationWindow } from "../../../../hooks/UseConfirmationWindow";
+import { useWindow } from "../../../../hooks/UseWindow";
+import { useAxios } from "../../../../hooks";
+import useLookupGridColumn from "../../../../hooks/useLookupGridColumn";
+import { ContinuousColorLegend } from "@mui/x-charts";
+import AttachmentPanel from "../../attachment/AttachmentPanel";
+import WorkflowDocumentPanel from "../../workflow/WorkflowDocumentPanel";
+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 { handleGetRequest } = useAxios();
+  const stores = useSelector((state: any) => state.commonStores.stores);
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const [selectedRecord, setSelectedRecord] = useState<any>({});
+  const [attachmentPanelEnabledForRecord, setAttachmentPanelEnabledForRecord] =
+    useState<boolean>(true);
+  const { getLookupOptions } = useLookupGridColumn();
+  const { Window: AttachmentWindow, setWindowState: setAttachmentWindowState } =
+    useWindow({
+      windowTitle: t(props.gridTitle) + " Attachments",
+      windowIcon: "paperclip",
+      width: "fit-content",
+      height: "fit-content",
+      minHeight: 500,
+      minWidth: "50%",
+      onCloseCallBack: () => {
+        props?.apiActions?.reloadData(props.gridLoadParametersValues);
+      },
+    });
+  const { Window: WorkFlowWindow, setWindowState: setWorkFlowWindowState } =
+    useWindow({
+      windowTitle: t(props.gridTitle) + " Approvals",
+      windowIcon: "stamp",
+      height: "fit-content",
+      minHeight: 500,
+      width: "fit-content",
+      // width:1100,
+      onCloseCallBack: () => {
+        props?.apiActions?.reloadData(props.gridLoadParametersValues);
+      },
+    });
+  const [generatedColumns, setGeneratedColumns] = useState<
+    Array<TemplateGridColDef>
+  >([]);
+  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: any) => 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 loadComboboxData: (
+    storeUrl: any,
+    storeLoadParam: any,
+    dataQueryId: any
+  ) => Promise<Array<any>> = async (storeUrl, storeLoadParam, dataQueryId) => {
+    let comboboxData: Array<any> = [];
+    if (storeUrl) {
+      await handleGetRequest({
+        endPointURI: storeUrl,
+        showMask: false,
+        parameters: storeLoadParam,
+        successCallBkFn: (response) => {
+          comboboxData = response.data;
+        },
+      });
+    } else if (dataQueryId) {
+      await handleGetRequest({
+        endPointURI: "api/v1/dev/query/result",
+        showMask: false,
+        parameters: { queryId: dataQueryId, ...storeLoadParam },
+        successCallBkFn: (response) => {
+          comboboxData = response.data;
+        },
+      });
+    }
+    return comboboxData;
+  };
+  const adjustGridColumns = async () => {
+    let gridColumns = constructGridColumnsFromFields(
+      fields,
+      props?.editMode?.editMode === "row" || false,
+      t
+    );
+    for (let gridColumn of gridColumns) {
+      if (gridColumn?.lookupType) {
+        gridColumn.displayField =
+          AppLayout.appDirection === "ltr"
+            ? "lookupEnDisplay"
+            : "lookupArDisplay";
+        gridColumn.options = await getLookupOptions(gridColumn.lookupType);
+        gridColumn.valueField = "lookupValue";
+      }
+      if (gridColumn.type === "custom") {
+        if (gridColumn?.options) {
+          continue;
+        } else if (gridColumn?.commonStoreKey) {
+          gridColumn.options = stores[gridColumn.commonStoreKey]?.data || [];
+        } else {
+          gridColumn.options = await loadComboboxData(
+            gridColumn?.storeUrl,
+            gridColumn?.storeLoadParam,
+            gridColumn?.dataQueryId
+          );
+        }
+      }
+    }
+    setGeneratedColumns(gridColumns);
+  };
+  const [rowSelectionModel, setRowSelectionModel] =
+    useState<GridRowSelectionModel>({ ids: new Set(), type: "include" });
+  let keyColumnName: string = "id";
+  if (props?.keyColumnName) {
+    keyColumnName = props?.keyColumnName;
+  }
+  const setData = props.setData;
+  let validationSchema = null;
+  if (props?.validationSchema) {
+    validationSchema = props.validationSchema;
+  } else {
+    validationSchema = z.object(constructValidationSchema(fields));
+  }
+
+  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") {
+      setRecordToEdit(null);
+      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 (
+      (record[props?.keyColumnName] || (record["id"] && record["id"] > 0)) &&
+      props?.attachment
+    ) {
+      actions?.push(
+        <GridActionsCellItem
+          icon={
+            <Tooltip title={"Attachments"}>
+              <FontAwesomeIcon icon={"paperclip"} />
+            </Tooltip>
+          }
+          label={"Attachments"}
+          className="textPrimary"
+          color="inherit"
+          onClick={() => {
+            setSelectedRecord(record);
+            if (props?.attachment?.enableAttachFn) {
+              setAttachmentPanelEnabledForRecord(
+                props.attachment.enableAttachFn(record)
+              );
+            } else {
+              setAttachmentPanelEnabledForRecord(true);
+            }
+            setAttachmentWindowState(true);
+          }}
+        />
+      );
+    }
+    if (
+      (record[props?.keyColumnName] || (record["id"] && record["id"] > 0)) &&
+      props?.workFlowDocumentCode
+    ) {
+      actions?.push(
+        <GridActionsCellItem
+          icon={
+            <Tooltip title={"Approvals"}>
+              <FontAwesomeIcon icon={"stamp"} />
+            </Tooltip>
+          }
+          label={"Approvals"}
+          className="textPrimary"
+          color="inherit"
+          onClick={() => {
+            setSelectedRecord(record);
+            setWorkFlowWindowState(true);
+          }}
+        />
+      );
+    }
+    if (
+      record[props?.keyColumnName || "id"] &&
+      record[props?.keyColumnName || "id"] > 0 &&
+      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) +
+      (props?.attachment ? 30 : 0) +
+      (props?.workFlowDocumentCode ? 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);
+    }
+    adjustGridColumns();
+  }, []);
+
+  useEffect(() => {
+    props.apiActions.reloadData(props?.gridLoadParametersValues);
+  }, [session.UserInfo?.currentOrganization]);
+
+  useEffect(() => {
+    adjustGridColumns();
+  }, [themeDirection, props.formElements]);
+
+  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,
+    }));
+
+    // 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
+              keyColumnName={props.keyColumnName}
+              attachment={props.attachment}
+              formValuesChangeCallBk={props?.formProps?.formValuesChangeCallBk}
+              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={themeDirection === "ltr" ? "arrow-left" : "arrow-right"}
+              />
+            </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?.gridLoadParameters.length > 0 &&
+      props?.gridLoadParametersValues &&
+      props?.setGridLoadParametersValues ? (
+        <Accordion defaultExpanded sx={{ width: "100%" }}>
+          <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>
+      ) : (
+        <></>
+      )}
+      {props?.attachment ? (
+        <AttachmentWindow>
+          <AttachmentPanel
+            attachmentCode={props.attachment.attachmentCode}
+            refKey={selectedRecord[props?.keyColumnName || "id"]}
+            enableAttachment={attachmentPanelEnabledForRecord}
+          />
+        </AttachmentWindow>
+      ) : (
+        <></>
+      )}
+      {props?.workFlowDocumentCode ? (
+        <WorkFlowWindow>
+          <WorkflowDocumentPanel
+            workFlowDocumentCode={props.workFlowDocumentCode}
+            refDocumentId={selectedRecord[props?.keyColumnName || "id"]}
+            postActionCallBk={() => {
+              setWorkFlowWindowState(false);
+              props.apiActions.reloadData(props.gridLoadParametersValues);
+            }}
+            cancelActionCallBk={() => {
+              setWorkFlowWindowState(false);
+              props.apiActions.reloadData(props.gridLoadParametersValues);
+            }}
+          />
+        </WorkFlowWindow>
+      ) : (
+        <></>
+      )}
+      <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"
+        onRowEditStop={(params, event) => {
+          if (params.reason === "rowFocusOut") {
+            event.defaultMuiPrevented = true;
+          }
+        }}
+        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}
+        sx={{ width: "100%" }}
+      />
+    </>
+  );
+};
+
+export default TemplateGrid;