@asaleh37/ui-base 1.2.2 → 1.2.4

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

@@ -40,11 +40,13 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import TemplateGridRecordAction from "./TemplateGridRecordAction";
 import TemplateForm from "../TemplateDataForm/TemplateForm";
 import { useSelector } from "react-redux";
-import { RootState } from "../../../../redux/store";
 import { useTranslation } from "react-i18next";
 import useSession from "../../../../hooks/UseSession";
 import { useConfirmationWindow } from "../../../../hooks/UseConfirmationWindow";
 import { useWindow } from "../../../../hooks/UseWindow";
+import { useAxios } from "../../../../hooks";
+import useLookupGridColumn from "../../../../hooks/useLookupGridColumn";
+import { ContinuousColorLegend } from "@mui/x-charts";
 let currentNewRecordIndex = -1;
 
 interface GridState {
@@ -76,6 +78,11 @@ const saveGridState = (gridStateKey: string, statePart: GridState) => {
 const PIN_FIXED_COLUMNS = ["__check__", "actions"];
 
 const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const { getLookupOptions } = useLookupGridColumn();
+  const [generatedColumns, setGeneratedColumns] = useState<
+    Array<TemplateGridColDef>
+  >([]);
   const { t } = useTranslation();
   const fields = getAllFields(props.formElements);
   const hiddenFields = [];
@@ -104,7 +111,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
   }
 
   const themeDirection = useSelector(
-    (state: RootState) => state.AppLayout.appDirection
+    (state: any) => state.AppLayout.appDirection
   );
 
   const clearGridState = () => {
@@ -152,7 +159,24 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
   const [recordToDelete, setRecordToDelete] = useState<any>(null);
   const [recordToEdit, setRecordToEdit] = useState<any>(null);
   const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});
-
+  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";
+      }
+    }    
+    setGeneratedColumns(gridColumns);
+  };
   const [rowSelectionModel, setRowSelectionModel] =
     useState<GridRowSelectionModel>({ ids: new Set(), type: "include" });
   let keyColumnName: string = "id";
@@ -161,11 +185,6 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
   }
   const setData = props.setData;
   const validationSchema = z.object(constructValidationSchema(fields));
-  const generatedColumns = constructGridColumnsFromFields(
-    fields,
-    props?.editMode?.editMode === "row" || false,
-    t
-  );
   let isEditAllowed = true;
   if (props?.editAction?.authority) {
     isEditAllowed = session.isUserAuthorized(props.editAction.authority);
@@ -265,6 +284,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
     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;
@@ -591,8 +611,13 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
     if (props?.autoLoad === undefined || props.autoLoad === true) {
       props.apiActions.reloadData(props?.gridLoadParametersValues);
     }
+    adjustGridColumns();
   }, []);
 
+  useEffect(() => {
+    adjustGridColumns();
+  }, [themeDirection, props.formElements]);
+
   const handleColumnVisibilityChange = (model: GridColumnVisibilityModel) => {
     setColumnVisibilityModel(model);
     if (props?.gridStateKey) {
@@ -673,6 +698,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
             />
           ) : (
             <TemplateForm
+              formLoadCallBk={props.formLoadCallBk}
               recordIdToEdit={
                 recordToEdit ? recordToEdit[keyColumnName] : undefined
               }
@@ -699,7 +725,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
           {props?.hideBackButton === undefined && !props?.hideBackButton ? (
             <IconButton
               onClick={() => {
-                navigate("-1", { replace: true });
+                navigate(-1, { replace: true });
               }}
             >
               <FontAwesomeIcon icon="arrow-left" />
@@ -735,9 +761,10 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
       )}
 
       {props?.gridLoadParameters &&
+      props?.gridLoadParameters.length > 0 &&
       props?.gridLoadParametersValues &&
       props?.setGridLoadParametersValues ? (
-        <Accordion defaultExpanded>
+        <Accordion defaultExpanded sx={{ width: "100%" }}>
           <AccordionSummary expandIcon={<GridExpandMoreIcon />}>
             <Box
               sx={{
@@ -836,6 +863,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
         }}
         pinnedColumns={pinnedColumns}
         onPinnedColumnsChange={handlePinnedColumnsChange}
+        sx={{ width: "100%" }}
       />
     </>
   );

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

@@ -77,7 +77,10 @@ const TemplateGridRecordAction: React.FC<RecordAction> = (
                 setOpen(true);
               } else {
                 await rowAction.actionFn(rowAction.record);
-                if (rowAction?.reloadData) {
+                if (
+                  rowAction?.gridActionProps?.reloadGridAfterAction === true &&
+                  rowAction?.reloadData
+                ) {
                   rowAction.reloadData();
                 }
               }

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

@@ -94,10 +94,11 @@ const TemplateGridTopBar: React.FC<TemplateGridTopBarProps> = (
         <></>
       )}
       {props?.templateProps?.rowActions ? (
-        props.templateProps.rowActions.map((rowAction) =>
+        props.templateProps.rowActions.map((rowAction, index) =>
           rowAction?.gridActionProps?.multiRecord === true ? (
             <TemplateGridMultiRecordAction
               {...rowAction}
+              key={index}
               reloadData={async () => {
                 props.templateProps.apiActions.reloadData(
                   props?.templateProps?.gridLoadParametersValues
@@ -106,9 +107,7 @@ const TemplateGridTopBar: React.FC<TemplateGridTopBarProps> = (
               recordIdsToProcessActionOn={gridSelection.selectedRecordIds}
               recordsToProcessActionOn={gridSelection.selectedRecords}
             />
-          ) : (
-            <></>
-          )
+          ) : null
         )
       ) : (
         <></>

package/src/components/templates/TransferList.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import List from "@mui/material/List";
 import Card from "@mui/material/Card";
 import CardHeader from "@mui/material/CardHeader";
-import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import Checkbox from "@mui/material/Checkbox";
@@ -39,15 +38,25 @@ const TransferList: React.FC<TransferListProps> = ({
   setSelection,
 }) => {
   const [checked, setChecked] = React.useState([]);
-  const [left, setLeft] = React.useState(options);
-  const [right, setRight] = React.useState(selectedOptions);
-
+  const [left, setLeft] = React.useState<Array<any>>([]);
+  const [right, setRight] = React.useState<Array<any>>([]);
   const [leftFilterValue, setLeftFilterValue] = React.useState<string>("");
   const [rightFilterValue, setRightFilterValue] = React.useState<string>("");
 
   const leftChecked = intersection(checked, left);
   const rightChecked = intersection(checked, right);
 
+  React.useEffect(() => {
+    if (options) {
+      setLeft([...options]);
+    }
+  }, [options]);
+  React.useEffect(() => {
+    if (selectedOptions) {
+    setRight([...selectedOptions]);
+    }
+  }, [selectedOptions]);
+
   const handleToggle = (value) => () => {
     const currentIndex = checked.indexOf(value);
     const newChecked = [...checked];
@@ -95,8 +104,9 @@ const TransferList: React.FC<TransferListProps> = ({
     title: string,
     unfilteredItems: Array<any>,
     side: "left" | "right"
-  ) => {
+  ) => {    
     const items = unfilteredItems.filter((option: any) => {
+      
       if (option[displayField]) {
         const value: string = option[displayField];
         if (
@@ -176,7 +186,7 @@ const TransferList: React.FC<TransferListProps> = ({
                 key={value[valueField]}
                 role="listitem"
                 onClick={handleToggle(value)}
-                sx={{ cursor: "pointer" }}                
+                sx={{ cursor: "pointer" }}
               >
                 <ListItemIcon>
                   <Checkbox

package/src/components/templates/index.ts

@@ -1,5 +1,4 @@
 export { default as TransferList } from "./TransferList";
-export { default as TemplateDashboard } from "./visuals/TemplateDashboard";
 export { default as TemplateBarChart } from "./visuals/charts/TemplateBarChart";
 export { default as TemplateDataCard } from "./visuals/charts/TemplateDataCard";
 export { default as TemplateGauge } from "./visuals/charts/TemplateGauge";
@@ -15,5 +14,4 @@ export { default as TemplateForm } from "./DataEntryTemplates/TemplateDataForm/T
 export { default as TemplateGrid } from "./DataEntryTemplates/TemplateDataGrid/TemplateGrid";
 
 export type * from "./DataEntryTemplates/DataEntryTypes";
-export type { DashboardProps } from "./visuals/TemplateDashboard";
 export type { TransferListProps } from "./TransferList";

package/src/components/templates/report/ExcelReportViewer.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import TemplateGrid from "../DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+import { FormElementProps } from "../DataEntryTemplates/DataEntryTypes";
+
+type ExcelReportViewerProps = {
+  reportData: Array<any>;
+  setReportData: (data) => void;
+  reloadReport: () => void;
+  gridLoadParameters?: Array<FormElementProps>;
+  gridLoadParametersValues?: { [key: string]: any };
+  setGridLoadParametersValues?: any;
+};
+
+const getGridColumnsFromRecord = (data: Array<any>) => {
+  if (data.length === 0) {
+    return [];
+  }
+  const formElements: Array<FormElementProps> = [];
+  for (const key of Object.keys(data[0])) {
+    const formElement: FormElementProps = {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: key,
+        fieldName: key,
+        fieldType: "text",
+      },
+    };
+    formElements.push(formElement);
+  }
+  console.log("formElements", formElements);
+  return formElements;
+};
+
+const ExcelReportViewer: React.FC<ExcelReportViewerProps> = (props) => {
+  console.log("reportdata", props.reportData);
+  return (
+    <TemplateGrid
+      data={props.reportData}
+      disableDefaultAction={true}
+      setData={props.setReportData}
+      formElements={getGridColumnsFromRecord(props.reportData)}
+      gridLoadParameters={props.gridLoadParameters}
+      gridLoadParametersValues={props.gridLoadParametersValues}
+      setGridLoadParametersValues={props.setGridLoadParametersValues}
+      editMode={{ editMode: "none" }}
+      girdIcon={"file-excel"}
+      gridTitle="Report"
+      autoLoad={true}
+      hideInfoBar={true}
+      apiActions={{
+        deleteRecordById: async () => {
+          return true;
+        },
+        loadRecordById: async () => {},
+        reloadData: async () => {
+          props.reloadReport();
+        },
+        saveRecord: async () => {},
+      }}
+    />
+  );
+};
+
+export default ExcelReportViewer;

package/src/components/templates/report/ReportViewer.tsx

@@ -0,0 +1,382 @@
+import { useEffect, useState } from "react";
+import { useAxios, useWindow } from "../../../hooks";
+import TemplateForm from "../DataEntryTemplates/TemplateDataForm/TemplateForm";
+import { useTranslation } from "react-i18next";
+import { FormElementProps } from "../DataEntryTemplates/DataEntryTypes";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Icon,
+  IconButton,
+  Typography,
+} from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import ExcelReportViewer from "./ExcelReportViewer";
+import { GridExpandMoreIcon } from "@mui/x-data-grid-premium";
+
+type ReportViewerState =
+  | "ERROR"
+  | "WAITING_REPORT_CODE"
+  | "LOADING_METADATA"
+  | "WAITING_PARAMETER_INPUT"
+  | "WAITING_RESULT"
+  | "SHOWING_RESULT";
+
+type ReportViewerProps = {
+  reportCode: string;
+  resultMode: "Request" | "App";
+  reportParametersValues?: { [key: string]: any };
+  byPassParameterEntry?: boolean;
+  jasperOutPutFileType?: "pdf" | "word" | "excel";
+};
+
+type ReportParameter = {
+  parameterCode: string;
+  parameterLabel: string;
+  parameterValueFormat?: string;
+  parameterValueField?: string;
+  parameterDisplayField?: string;
+  parameterDataset?: Array<any>;
+  parameterDataQueryId?: number;
+  hidden?: boolean;
+  mandatory?: boolean;
+  defaultValue?: any;
+  parameterType:
+    | "text"
+    | "number"
+    | "date"
+    | "datetime"
+    | "combobox"
+    | "checkbox"
+    | "html"
+    | "lookup";
+};
+
+const ReportViewer: React.FC<ReportViewerProps> = (props) => {
+  const [blobUrl, setBlobUrl] = useState(null);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [excelReportData, setExcelReportData] = useState<Array<any>>([]);
+  const [reportViewerState, setReportViewerState] = useState<ReportViewerState>(
+    "WAITING_REPORT_CODE"
+  );
+  const { handleGetRequest, handlePostRequest, HandleDownloadHTTPPostPDF } =
+    useAxios();
+  const [reportInfo, setReportInfo] = useState<any>(null);
+  const [reportParametersValues, setReportParametersValues] = useState<any>({
+    ...props?.reportParametersValues,
+  });
+  const [reportParametersElements, setReportParametersElements] = useState<
+    Array<FormElementProps>
+  >([]);
+  const { t } = useTranslation();
+
+  const getFormElementsFromReportParameters = (
+    reportParameters: Array<ReportParameter>
+  ) => {
+    const formElements: Array<FormElementProps> = [];
+    for (const reportParameter of reportParameters) {
+      const formElement: FormElementProps = {
+        type: "field",
+        mode: "props",
+        props: {
+          fieldLabel: reportParameter?.parameterLabel,
+          fieldName: reportParameter?.parameterCode,
+          fieldType: reportParameter?.parameterType,
+          hidden: reportParameter?.hidden,
+          formProps: { fieldSize: { lg: 4, md: 6, sm: 12 } },
+          required: reportParameter?.mandatory,
+          defaultValue:
+            reportParametersValues[reportParameter?.parameterCode] ||
+            reportParameter?.defaultValue,
+        },
+      };
+      formElements.push(formElement);
+    }
+    return formElements;
+  };
+  const loadReportData = async () => {
+    setReportViewerState("LOADING_METADATA");
+    await handleGetRequest({
+      endPointURI: "api/v1/dev/report/metadata",
+      showMask: true,
+      parameters: { reportCode: props.reportCode },
+      successCallBkFn: (response: any) => {
+        setReportInfo(response.data);
+        setReportParametersElements(
+          getFormElementsFromReportParameters(response.data.reportParameters)
+        );
+        if (
+          props?.byPassParameterEntry === true ||
+          response.data.reportParameters.length == 0
+        ) {
+          runReport(response.data, reportParametersValues);
+          setReportViewerState("WAITING_RESULT");
+        } else {
+          setReportViewerState("WAITING_PARAMETER_INPUT");
+        }
+      },
+      failureCallBkFn: (response) => {
+        setErrorMessage(
+          "Failed loading report metadata ... contact your administrator"
+        );
+        setReportViewerState("ERROR");
+      },
+    });
+  };
+
+  const runReport = async (reportInfoProp, params) => {
+    setReportViewerState("WAITING_RESULT");
+    if (reportInfoProp?.reportType === "Excel") {
+      await handlePostRequest({
+        endPointURI: "api/v1/dev/report/run",
+        showMask: true,
+        data: {
+          reportCode: props.reportCode,
+          parameters: params,
+          resultMode: props.resultMode,
+          jasperOutPutFileType: props.jasperOutPutFileType,
+        },
+        successCallBkFn: (response: any) => {
+          setReportViewerState("SHOWING_RESULT");
+          setExcelReportData(response.data);
+        },
+      });
+    } else if (reportInfoProp?.reportType) {
+      await HandleDownloadHTTPPostPDF({
+        endPointURI: "api/v1/dev/report/run",
+        showMask: true,
+        data: {
+          reportCode: props.reportCode,
+          parameters: params,
+          resultMode: props.resultMode,
+          jasperOutPutFileType: props.jasperOutPutFileType,
+        },
+        successCallBkFn: (response: any) => {
+          setReportViewerState("SHOWING_RESULT");
+          const contentDisposition = response.headers["content-disposition"];
+          let filename = "downloaded_file";
+          if (
+            contentDisposition &&
+            contentDisposition.indexOf("filename=") !== -1
+          ) {
+            const match = contentDisposition.match(/filename="?([^"]+)"?/);
+            if (match && match[1]) filename = match[1];
+          }
+          if (filename.includes("pdf")) {
+            const file = new Blob([response.data], { type: "application/pdf" });
+            const url = URL.createObjectURL(file);
+            setBlobUrl(url);
+          } else {
+            const blob = new Blob([response.data], {
+              type: response.headers["content-type"],
+            });
+            // Create a temporary anchor element
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement("a");
+            link.href = url;
+            // Optional: Try to get filename from response headers
+
+            link.download = filename;
+            document.body.appendChild(link);
+            link.click();
+
+            // Clean up
+            document.body.removeChild(link);
+            window.URL.revokeObjectURL(url);
+          }
+          console.log(response);
+        },
+        failureCallBkFn: (response) => {
+          setErrorMessage(
+            "Failed To run report ... contact your administrator"
+          );
+          setReportViewerState("ERROR");
+        },
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (props?.reportCode) {
+      loadReportData();
+    }
+  }, [
+    props.reportCode,
+    props.byPassParameterEntry,
+    props.reportParametersValues,
+    props.jasperOutPutFileType,
+    props.resultMode,
+  ]);
+
+  return (
+    <>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+        }}
+      >
+        <Box sx={{ flex: 1, textAlign: "center", marginBottom: 1 }}>
+          <FontAwesomeIcon
+            icon={
+              reportInfo?.reportType === "Excel" ? "file-excel" : "file-pdf"
+            }
+            color={reportInfo?.reportType === "Excel" ? "darkgreen" : "darkred"}
+            style={{ marginRight: 10, marginLeft: 10 }}
+          />
+          {reportInfo?.reportName}
+        </Box>
+        {reportInfo?.reportType != "Excel" ? (
+          reportViewerState === "SHOWING_RESULT" ? (
+            <>
+              {props?.byPassParameterEntry === true ? (
+                <></>
+              ) : reportParametersElements.length > 0 ? (
+                <IconButton
+                  onClick={() => {
+                    setReportParametersElements(
+                      getFormElementsFromReportParameters(
+                        reportInfo.reportParameters
+                      )
+                    );
+                    setReportViewerState("WAITING_PARAMETER_INPUT");
+                  }}
+                >
+                  <FontAwesomeIcon icon="filter" />
+                </IconButton>
+              ) : (
+                <></>
+              )}
+              <IconButton>
+                <FontAwesomeIcon
+                  icon="refresh"
+                  onClick={() => {
+                    runReport(reportInfo, reportParametersValues);
+                  }}
+                />
+              </IconButton>
+            </>
+          ) : (
+            <></>
+          )
+        ) : (
+          <></>
+        )}
+      </Box>
+      <Box
+        sx={{
+          flexGrow: 1,
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "flex-start",
+        }}
+      >
+        {reportViewerState === "WAITING_PARAMETER_INPUT" &&
+        reportInfo?.reportType != "Excel" ? (
+          <Accordion defaultExpanded sx={{ width: "100%" }} expanded={true}>
+            <AccordionSummary>
+              <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("SHOW_REPORT_BTN_LABEL"),
+                    icon: "search",
+                    actionButtonVariant: "outlined",
+                    actionButtonColor: "success",
+                    hidden: true,
+                  }}
+                  cancelButtonSpecs={{
+                    label: t("RESET_BTN_LABEL"),
+                    icon: "eraser",
+                    actionButtonVariant: "outlined",
+                    actionButtonColor: "error",
+                  }}
+                  apiActions={{
+                    deleteRecordById: async () => {
+                      return true;
+                    },
+                    saveRecord: async (params) => {
+                      if (params != undefined) {
+                        setReportParametersValues(params);
+                      } else {
+                        setReportParametersValues({});
+                      }
+                      runReport(reportInfo, params);
+                    },
+                    reloadData: async () => {},
+                    loadRecordById: async () => {},
+                  }}
+                  elements={reportParametersElements}
+                />
+              </Box>
+            </AccordionDetails>
+          </Accordion>
+        ) : reportViewerState === "SHOWING_RESULT" ||
+          ((reportViewerState === "WAITING_PARAMETER_INPUT" ||
+            reportViewerState === "WAITING_RESULT") &&
+            reportInfo?.reportType === "Excel") ? (
+          reportInfo?.reportType === "Excel" ? (
+            <ExcelReportViewer
+              reportData={excelReportData}
+              setReportData={setExcelReportData}
+              reloadReport={async () => {
+                runReport(reportInfo, reportParametersValues);
+              }}
+              gridLoadParameters={reportParametersElements}
+              gridLoadParametersValues={reportParametersValues}
+              setGridLoadParametersValues={setReportParametersValues}
+            />
+          ) : (
+            <iframe
+              src={blobUrl}
+              width="100%"
+              height="100%"
+              title="PDF Preview"
+              style={{ border: "1px solid #ccc", marginTop: "20px" }}
+            ></iframe>
+          )
+        ) : reportViewerState === "ERROR" ? (
+          <Box
+            sx={{
+              display: "flex",
+              flex: 1,
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <FontAwesomeIcon
+              icon="circle-exclamation"
+              color="darkred"
+              style={{ marginRight: 10, marginLeft: 10 }}
+            />
+            {errorMessage}
+          </Box>
+        ) : (
+          <></>
+        )}
+      </Box>
+    </>
+  );
+};
+
+export default ReportViewer;

package/src/components/templates/visuals/DashboardRouteView.tsx

@@ -0,0 +1,9 @@
+import { useParams } from "react-router-dom";
+import DashboardViewer from "./DashboardViewer";
+
+const DashboardRouteView: React.FC = () => {
+  const { dashboardCode } = useParams();
+  return <DashboardViewer dashboardCode={dashboardCode} />;
+};
+
+export default DashboardRouteView;