@asaleh37/ui-base 25.6.2-0.4 → 25.6.17-1

package/src/components/administration/dev/ReportGrid.tsx

@@ -1,506 +1,504 @@
-import { useState } from "react";
-import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
-import { useApiActions, useWindow } from "../../../hooks";
-import {
-  FormActionProps,
-  FormElementProps,
-} from "../../templates/DataEntryTemplates/DataEntryTypes";
-import { useTranslation } from "react-i18next";
-import { UseFormReturn } from "react-hook-form";
-import { useSelector } from "react-redux";
-import { toast } from "react-toastify";
-import ReportParametersForm from "./ReportParametersForm";
-import ReportParameterGrid from "./ReportParameterGrid";
-import ReportViewer from "../../templates/report/ReportViewer";
-import { storageTypes } from "./AttachmentConfigGrid";
-
-type ValidationCritria = {
-  isVisible: boolean;
-  isMandatory: boolean;
-};
-
-export type ReportType = "Jasper" | "Excel" | "Blueprint";
-
-type ReportValidationOptions = {
-  useSysDatasource: ValidationCritria;
-  datasourceConId: ValidationCritria;
-  reportBluePrintId: ValidationCritria;
-  reportExcelDataQueryId: ValidationCritria;
-  reportJasperName: ValidationCritria;
-};
-
-type validationObjectType = {
-  [key in ReportType]: ReportValidationOptions;
-};
-
-const validationObject: validationObjectType = {
-  Blueprint: {
-    useSysDatasource: { isMandatory: false, isVisible: false },
-    datasourceConId: { isMandatory: false, isVisible: false },
-    reportBluePrintId: { isMandatory: true, isVisible: true },
-    reportExcelDataQueryId: { isMandatory: false, isVisible: false },
-    reportJasperName: { isMandatory: false, isVisible: false },
-  },
-  Jasper: {
-    useSysDatasource: { isMandatory: false, isVisible: true },
-    datasourceConId: { isMandatory: false, isVisible: true },
-    reportBluePrintId: { isMandatory: false, isVisible: false },
-    reportExcelDataQueryId: { isMandatory: false, isVisible: false },
-    reportJasperName: { isMandatory: true, isVisible: true },
-  },
-  Excel: {
-    useSysDatasource: { isMandatory: false, isVisible: false },
-    datasourceConId: { isMandatory: false, isVisible: false },
-    reportBluePrintId: { isMandatory: false, isVisible: false },
-    reportExcelDataQueryId: { isMandatory: true, isVisible: true },
-    reportJasperName: { isMandatory: false, isVisible: false },
-  },
-};
-
-const adjustFormAccordingToReportType = (
-  value: any,
-  formActions: FormActionProps,
-  formManager: UseFormReturn
-) => {
-  if (value && validationObject[value]) {
-    const validationObjects: ReportValidationOptions = validationObject[value];
-    const fields = Object.keys(validationObjects);
-    for (const field of fields) {
-      const validationCritria: ValidationCritria = validationObjects[field];
-      if (validationCritria.isVisible) {
-        formActions.showField(field);
-      } else {
-        formActions.hideField(field);
-        formManager.setValue(field, null);
-      }
-    }
-  } else {
-    formActions.hideField("useSysDatasource");
-    formActions.hideField("datasourceConId");
-    formActions.hideField("reportBluePrintId");
-    formActions.hideField("reportExcelDataQueryId");
-    formActions.hideField("reportJasperName");
-    formManager.setValue("useSysDatasource", null);
-    formManager.setValue("datasourceConId", null);
-    formManager.setValue("reportBluePrintId", null);
-    formManager.setValue("reportExcelDataQueryId", null);
-    formManager.setValue("reportJasperName", null);
-  }
-};
-
-const ReportGrid: React.FC = () => {
-  const { t } = useTranslation();
-  const [selectedRecord, setSelectedRecord] = useState(null);
-  const {
-    Window: ReporTrialWindow,
-    setWindowState: setReportTrialWindowState,
-  } = useWindow({
-    windowTitle: "Report View",
-    windowIcon: "eye",
-    width: "80%",
-  });
-  const {
-    Window: ReportParameterWindow,
-    setWindowState: setReportParameterWindowState,
-  } = useWindow({
-    windowTitle: "Report Parameters",
-    windowIcon: "p",
-    width: "80%",
-  });
-  const [data, setData] = useState([]);
-  const SystemDataSources = useSelector(
-    (state: any) => state.commonStores.stores.SystemDataSources.data
-  );
-  const SystemDataQueries = useSelector(
-    (state: any) => state.commonStores.stores.SystemDataQueries.data
-  );
-  const SystemBluePrints = useSelector(
-    (state: any) => state.commonStores.stores.SystemBluePrints.data
-  );
-  const apiActions = useApiActions({
-    findAll: "api/v1/dev/report/all",
-    deleteById: "api/v1/dev/report",
-    save: "api/v1/dev/report",
-    findById: "api/v1/dev/report",
-    setData: setData,
-  });
-
-  const formElements: Array<FormElementProps> = [
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "id",
-        fieldName: "id",
-        fieldType: "number",
-        hidden: true,
-        gridProps: {
-          hidden: true,
-        },
-      },
-    },
-
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "createTime",
-        fieldName: "createTime",
-        fieldType: "datetime",
-        hidden: true,
-        gridProps: {
-          hidden: true,
-        },
-      },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "createdBy",
-        fieldName: "createdBy",
-        fieldType: "text",
-        hidden: true,
-        gridProps: {
-          hidden: true,
-        },
-      },
-    },
-
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "lastUpdateBy",
-        fieldName: "lastUpdateBy",
-        fieldType: "text",
-        hidden: true,
-        gridProps: {
-          hidden: true,
-        },
-      },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "lastUpdateTime",
-        fieldName: "lastUpdateTime",
-        fieldType: "datetime",
-        hidden: true,
-        gridProps: {
-          hidden: true,
-        },
-      },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "REPORT_REPORT_TYPE",
-        fieldName: "reportType",
-        options: [
-          { value: "Excel" },
-          { value: "Jasper" },
-          { value: "Blueprint" },
-        ],
-        optionDisplayField: "value",
-        optionValueField: "value",
-        required: true,
-        fieldType: "combobox",
-        formProps: {
-          onValueChangeCallBack(
-            value,
-            formManager,
-            formActions,
-            selectedRecord
-          ) {
-            adjustFormAccordingToReportType(value, formActions, formManager);
-          },
-        },
-      },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "REPORT_REPORT_CODE",
-        fieldName: "reportCode",
-        required: true,
-        fieldType: "text",
-      },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "REPORT_REPORT_NAME",
-        fieldName: "reportName",
-        required: true,
-        fieldType: "text",
-      },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "ATTACHMENT_CONFIG_STORAGE_TYPE",
-        fieldName: "storageType",
-        required: true,
-        fieldType: "combobox",
-        options: storageTypes,
-        optionDisplayField: "value",
-        optionValueField: "value",
-      },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "REPORT_REPORT_CATEGORY",
-        fieldName: "reportCategory",
-        required: false,
-        fieldType: "text",
-      },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "Authority Code",
-        fieldName: "reportAuthorityCode",
-        required: false,
-        fieldType: "text",
-      },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "REPORT_REPORT_EXPORT_NAME",
-        fieldName: "reportExportName",
-        required: false,
-        fieldType: "text",
-      },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "REPORT_USE_SYS_DATASOURCE",
-        fieldName: "useSysDatasource",
-        hidden: true,
-        gridProps: {
-          hidden: true,
-        },
-        formProps: {
-          onValueChangeCallBack(
-            value,
-            formManager,
-            formActions,
-            selectedRecord
-          ) {
-            if (value) {
-              formActions.hideField("datasourceConId");
-              formManager.setValue("datasourceConId", null);
-            } else {
-              formActions.showField("datasourceConId");
-            }
-          },
-        },
-        required: false,
-        fieldType: "checkbox",
-      },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "REPORT_DATASOURCE_CON_ID",
-        fieldName: "datasourceConId",
-        hidden: true,
-        gridProps: {
-          hidden: true,
-        },
-        required: false,
-        fieldType: "combobox",
-        options: SystemDataSources,
-        optionValueField: "id",
-        optionDisplayField: "connectionName",
-      },
-    },
-
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "REPORT_REPORT_BLUE_PRINT_ID",
-        fieldName: "reportBluePrintId",
-        hidden: true,
-        gridProps: {
-          hidden: true,
-        },
-        required: false,
-        fieldType: "combobox",
-        options: SystemBluePrints,
-        optionDisplayField: "bluePrintCode",
-        optionValueField: "id",
-      },
-    },
-
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "REPORT_REPORT_EXCEL_DATA_QUERY_ID",
-        fieldName: "reportExcelDataQueryId",
-        hidden: true,
-        gridProps: {
-          hidden: true,
-        },
-        required: false,
-        fieldType: "combobox",
-        options: SystemDataQueries,
-        optionValueField: "id",
-        optionDisplayField: "queryName",
-      },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "REPORT_REPORT_JASPER_NAME",
-        fieldName: "reportJasperName",
-        hidden: true,
-        gridProps: {
-          hidden: true,
-        },
-        required: false,
-        fieldType: "text",
-      },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "Include App Code in attachment path",
-        fieldName: "includeAppCodeInPath",
-        required: false,
-        fieldType: "checkbox",
-      },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "Active",
-        fieldName: "isActive",
-        fieldType: "checkbox",
-      },
-    },
-  ];
-
-  return (
-    <>
-      <ReporTrialWindow>
-        <ReportViewer
-          reportCode={selectedRecord?.reportCode}
-          resultMode="App"
-        />
-      </ReporTrialWindow>
-      <ReportParameterWindow>
-        <ReportParameterGrid selectedRecord={selectedRecord} />
-      </ReportParameterWindow>
-      <TemplateGrid
-        attachment={{ attachmentCode: "JASPER_REPORTS" }}
-        apiActions={apiActions}
-        data={data}
-        setData={setData}
-        editMode={{
-          editMode: "modal",
-          specs: {
-            modalTitle: "Report",
-            modalIcon: "file",
-            modalWidth: 300,
-          },
-        }}
-        rowActions={[
-          {
-            icon: "p",
-            label: "Report Parameters",
-            isActionVisibleForRecord: (record) => {
-              return record.reportType === "Jasper";
-            },
-            actionFn: async (data, recordIdsToProcessActionOn) => {
-              setSelectedRecord(data);
-              setReportParameterWindowState(true);
-            },
-          },
-          {
-            icon: "eye",
-            label: "View Report",
-            actionFn: async (data, recordIdsToProcessActionOn) => {
-              setSelectedRecord(data);
-              setReportTrialWindowState(true);
-            },
-          },
-        ]}
-        formLoadCallBk={(
-          formActions: FormActionProps,
-          formManager: UseFormReturn,
-          record: any
-        ) => {
-          adjustFormAccordingToReportType(
-            record.reportType,
-            formActions,
-            formManager
-          );
-          if (record?.useSysDatasource === true) {
-            formActions.hideField("datasourceConId");
-          }
-        }}
-        formElements={formElements}
-        keyColumnName={"id"}
-        gridTitle={t("REPORT_PLURAL")}
-        girdIcon="table-cells"
-        editAction={{
-          isEnabled: true,
-          authority: "REPORT_EDIT",
-          preActionValidation: (record) => {
-            if (
-              record?.reportType === "Jasper" &&
-              record?.useSysDatasource === false &&
-              !record?.datasourceConId
-            ) {
-              toast.error("You must choose the datasource");
-              return false;
-            }
-            if (record?.reportType === "Jasper" && !record?.reportJasperName) {
-              toast.error("You must enter the jasper report name");
-              return false;
-            }
-
-            if (
-              record?.reportType === "Blueprint" &&
-              !record?.reportBluePrintId
-            ) {
-              toast.error("You must choose the report blueprint");
-              return false;
-            }
-            if (
-              record?.reportType === "Excel" &&
-              !record?.reportExcelDataQueryId
-            ) {
-              toast.error("You must choose the report query");
-              return false;
-            }
-            return true;
-          },
-        }}
-        deleteAction={{ isEnabled: true, authority: "REPORT_DELETE" }}
-      />
-    </>
-  );
-};
-
-export default ReportGrid;
+import { useState } from "react";
+import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+import { useApiActions, useWindow } from "../../../hooks";
+import {
+  FormActionProps,
+  FormElementProps,
+} from "../../templates/DataEntryTemplates/DataEntryTypes";
+import { useTranslation } from "react-i18next";
+import { UseFormReturn } from "react-hook-form";
+import { useSelector } from "react-redux";
+import { toast } from "react-toastify";
+import ReportParametersForm from "./ReportParametersForm";
+import ReportParameterGrid from "./ReportParameterGrid";
+import ReportViewer from "../../templates/report/ReportViewer";
+
+type ValidationCritria = {
+  isVisible: boolean;
+  isMandatory: boolean;
+};
+
+export type ReportType = "Jasper" | "Excel" | "Blueprint";
+
+type ReportValidationOptions = {
+  useSysDatasource: ValidationCritria;
+  datasourceConId: ValidationCritria;
+  reportBluePrintId: ValidationCritria;
+  reportExcelDataQueryId: ValidationCritria;
+  reportJasperName: ValidationCritria;
+  reportJasperPath: ValidationCritria;
+};
+
+type validationObjectType = {
+  [key in ReportType]: ReportValidationOptions;
+};
+
+const validationObject: validationObjectType = {
+  Blueprint: {
+    useSysDatasource: { isMandatory: false, isVisible: false },
+    datasourceConId: { isMandatory: false, isVisible: false },
+    reportBluePrintId: { isMandatory: true, isVisible: true },
+    reportExcelDataQueryId: { isMandatory: false, isVisible: false },
+    reportJasperName: { isMandatory: false, isVisible: false },
+    reportJasperPath: { isMandatory: false, isVisible: false },
+  },
+  Jasper: {
+    useSysDatasource: { isMandatory: false, isVisible: true },
+    datasourceConId: { isMandatory: false, isVisible: true },
+    reportBluePrintId: { isMandatory: false, isVisible: false },
+    reportExcelDataQueryId: { isMandatory: false, isVisible: false },
+    reportJasperName: { isMandatory: true, isVisible: true },
+    reportJasperPath: { isMandatory: true, isVisible: true },
+  },
+  Excel: {
+    useSysDatasource: { isMandatory: false, isVisible: false },
+    datasourceConId: { isMandatory: false, isVisible: false },
+    reportBluePrintId: { isMandatory: false, isVisible: false },
+    reportExcelDataQueryId: { isMandatory: true, isVisible: true },
+    reportJasperName: { isMandatory: false, isVisible: false },
+    reportJasperPath: { isMandatory: false, isVisible: false },
+  },
+};
+
+const adjustFormAccordingToReportType = (
+  value: any,
+  formActions: FormActionProps,
+  formManager: UseFormReturn
+) => {
+  if (value && validationObject[value]) {
+    const validationObjects: ReportValidationOptions = validationObject[value];
+    const fields = Object.keys(validationObjects);
+    for (const field of fields) {
+      const validationCritria: ValidationCritria = validationObjects[field];
+      if (validationCritria.isVisible) {
+        formActions.showField(field);
+      } else {
+        formActions.hideField(field);
+        formManager.setValue(field, null);
+      }
+    }
+  } else {
+    formActions.hideField("useSysDatasource");
+    formActions.hideField("datasourceConId");
+    formActions.hideField("reportBluePrintId");
+    formActions.hideField("reportExcelDataQueryId");
+    formActions.hideField("reportJasperName");
+    formActions.hideField("reportJasperPath");
+    formManager.setValue("useSysDatasource", null);
+    formManager.setValue("datasourceConId", null);
+    formManager.setValue("reportBluePrintId", null);
+    formManager.setValue("reportExcelDataQueryId", null);
+    formManager.setValue("reportJasperName", null);
+    formManager.setValue("reportJasperPath", null);
+  }
+};
+
+const ReportGrid: React.FC = () => {
+  const { t } = useTranslation();
+  const [selectedRecord, setSelectedRecord] = useState(null);
+  const {
+    Window: ReporTrialWindow,
+    setWindowState: setReportTrialWindowState,
+  } = useWindow({
+    windowTitle: "Report View",
+    windowIcon: "eye",
+    width: "80%",
+  });
+  const {
+    Window: ReportParameterWindow,
+    setWindowState: setReportParameterWindowState,
+  } = useWindow({
+    windowTitle: "Report Parameters",
+    windowIcon: "p",
+    width: "80%",
+  });
+  const [data, setData] = useState([]);
+  const SystemDataSources = useSelector(
+    (state: any) => state.commonStores.stores.SystemDataSources.data
+  );
+  const SystemDataQueries = useSelector(
+    (state: any) => state.commonStores.stores.SystemDataQueries.data
+  );
+  const SystemBluePrints = useSelector(
+    (state: any) => state.commonStores.stores.SystemBluePrints.data
+  );
+  const apiActions = useApiActions({
+    findAll: "api/v1/dev/report/all",
+    deleteById: "api/v1/dev/report",
+    save: "api/v1/dev/report",
+    findById: "api/v1/dev/report",
+    setData: setData,
+  });
+
+  const formElements: Array<FormElementProps> = [
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "id",
+        fieldName: "id",
+        fieldType: "number",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "createTime",
+        fieldName: "createTime",
+        fieldType: "datetime",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "createdBy",
+        fieldName: "createdBy",
+        fieldType: "text",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "lastUpdateBy",
+        fieldName: "lastUpdateBy",
+        fieldType: "text",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "lastUpdateTime",
+        fieldName: "lastUpdateTime",
+        fieldType: "datetime",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_TYPE",
+        fieldName: "reportType",
+        options: [
+          { value: "Excel" },
+          { value: "Jasper" },
+          { value: "Blueprint" },
+        ],
+        optionDisplayField: "value",
+        optionValueField: "value",
+        required: true,
+        fieldType: "combobox",
+        formProps: {
+          onValueChangeCallBack(
+            value,
+            formManager,
+            formActions,
+            selectedRecord
+          ) {
+            adjustFormAccordingToReportType(value, formActions, formManager);
+          },
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_CODE",
+        fieldName: "reportCode",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_NAME",
+        fieldName: "reportName",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_CATEGORY",
+        fieldName: "reportCategory",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Authority Code",
+        fieldName: "reportAuthorityCode",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_EXPORT_NAME",
+        fieldName: "reportExportName",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_USE_SYS_DATASOURCE",
+        fieldName: "useSysDatasource",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+        formProps: {
+          onValueChangeCallBack(
+            value,
+            formManager,
+            formActions,
+            selectedRecord
+          ) {
+            if (value) {
+              formActions.hideField("datasourceConId");
+              formManager.setValue("datasourceConId", null);
+            } else {
+              formActions.showField("datasourceConId");
+            }
+          },
+        },
+        required: false,
+        fieldType: "checkbox",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_DATASOURCE_CON_ID",
+        fieldName: "datasourceConId",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+        required: false,
+        fieldType: "combobox",
+        options: SystemDataSources,
+        optionValueField: "id",
+        optionDisplayField: "connectionName",
+      },
+    },
+
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_BLUE_PRINT_ID",
+        fieldName: "reportBluePrintId",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+        required: false,
+        fieldType: "combobox",
+        options: SystemBluePrints,
+        optionDisplayField: "bluePrintCode",
+        optionValueField: "id",
+      },
+    },
+
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_EXCEL_DATA_QUERY_ID",
+        fieldName: "reportExcelDataQueryId",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+        required: false,
+        fieldType: "combobox",
+        options: SystemDataQueries,
+        optionValueField: "id",
+        optionDisplayField: "queryName",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_JASPER_NAME",
+        fieldName: "reportJasperName",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_JASPER_PATH",
+        fieldName: "reportJasperPath",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Active",
+        fieldName: "isActive",
+        fieldType: "checkbox",
+      },
+    },
+  ];
+
+  return (
+    <>
+      <ReporTrialWindow>
+        <ReportViewer
+          reportCode={selectedRecord?.reportCode}
+          resultMode="App"
+        />
+      </ReporTrialWindow>
+      <ReportParameterWindow>
+        <ReportParameterGrid selectedRecord={selectedRecord} />
+      </ReportParameterWindow>
+      <TemplateGrid
+        apiActions={apiActions}
+        data={data}
+        setData={setData}
+        editMode={{
+          editMode: "modal",
+          specs: {
+            modalTitle: "Report",
+            modalIcon: "file",
+            modalWidth: 300,
+          },
+        }}
+        rowActions={[
+          {
+            icon: "p",
+            label: "Report Parameters",
+            isActionVisibleForRecord: (record) => {
+              return record.reportType === "Jasper";
+            },
+            actionFn: async (data, recordIdsToProcessActionOn) => {
+              setSelectedRecord(data);
+              setReportParameterWindowState(true);
+            },
+          },
+          {
+            icon: "eye",
+            label: "View Report",
+            actionFn: async (data, recordIdsToProcessActionOn) => {
+              setSelectedRecord(data);
+              setReportTrialWindowState(true);
+            },
+          },
+        ]}
+        formLoadCallBk={(
+          formActions: FormActionProps,
+          formManager: UseFormReturn,
+          record: any
+        ) => {
+          adjustFormAccordingToReportType(
+            record.reportType,
+            formActions,
+            formManager
+          );
+          if (record?.useSysDatasource === true) {
+            formActions.hideField("datasourceConId");
+          }
+        }}
+        formElements={formElements}
+        keyColumnName={"id"}
+        gridTitle={t("REPORT_PLURAL")}
+        girdIcon="table-cells"
+        editAction={{
+          isEnabled: true,
+          authority: "REPORT_EDIT",
+          preActionValidation: (record) => {
+            if (
+              record?.reportType === "Jasper" &&
+              record?.useSysDatasource === false &&
+              !record?.datasourceConId
+            ) {
+              toast.error("You must choose the datasource");
+              return false;
+            }
+            if (record?.reportType === "Jasper" && !record?.reportJasperName) {
+              toast.error("You must enter the jasper report name");
+              return false;
+            }
+            if (record?.reportType === "Jasper" && !record?.reportJasperPath) {
+              toast.error("You must enter the jasper report path");
+              return false;
+            }
+            if (
+              record?.reportType === "Blueprint" &&
+              !record?.reportBluePrintId
+            ) {
+              toast.error("You must choose the report blueprint");
+              return false;
+            }
+            if (
+              record?.reportType === "Excel" &&
+              !record?.reportExcelDataQueryId
+            ) {
+              toast.error("You must choose the report query");
+              return false;
+            }
+            return true;
+          },
+        }}
+        deleteAction={{ isEnabled: true, authority: "REPORT_DELETE" }}
+      />
+    </>
+  );
+};
+
+export default ReportGrid;