@asaleh37/ui-base 1.2.19 → 1.2.21

package/src/components/common/MyNotificationsPanel.tsx

@@ -0,0 +1,104 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Box, Button } from "@mui/material";
+import { useSelector } from "react-redux";
+import { useAxios, useSession } from "../../hooks";
+import { useState } from "react";
+import useInterval from "../../hooks/useInterval";
+import { notificationsCheckIntervalSeconds } from "../../layout/NotificationButton";
+import NotificationItem from "./NotificationItem";
+
+const MyNotificationsPanel: React.FC = () => {
+  const { UserInfo } = useSession();
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const { handleGetRequest, handlePostRequest } = useAxios();
+  const [notifications, setNotifications] = useState<Array<Notification>>([]);
+
+  const acknowledgeAllCurrentNotifications = async () => {
+    await handlePostRequest({
+      endPointURI: "api/v1/public/notification/all/notified",
+      showMask: true,
+    });
+  };
+
+  const archiveAllCurrentNotifications = async () => {
+    await handlePostRequest({
+      endPointURI: "api/v1/public/notification/all/archive",
+      showMask: true,
+    });
+  };
+
+  const loadUserNotifications = () => {
+    if (UserInfo.isAuthenticated === true) {
+      handleGetRequest({
+        endPointURI: "api/v1/public/notifications",
+        showMask: false,
+        successCallBkFn: (response: any) => {
+          setNotifications(response.data);
+          console.log(response.data);
+        },
+      });
+    }
+  };
+  useInterval(loadUserNotifications, notificationsCheckIntervalSeconds * 1000);
+  return (
+    <>
+      <Box
+        sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}
+      >
+        <Box sx={{ flex: 1 }}></Box>
+        <h3>
+          <FontAwesomeIcon
+            icon="bell"
+            style={{ marginRight: 10, marginLeft: 10 }}
+          />
+          {AppLayout.appDirection === "ltr" ? "Notifications" : "الاشعارات"}
+        </h3>
+        <Box sx={{ flex: 1 }}></Box>
+        <Button
+          sx={{ textTransform: "none" }}
+          onClick={acknowledgeAllCurrentNotifications}
+        >
+          Mark All Read
+        </Button>
+        <Button
+          color="error"
+          sx={{ textTransform: "none" }}
+          onClick={archiveAllCurrentNotifications}
+        >
+          Delete All
+        </Button>
+      </Box>
+      <Box
+        sx={{
+          flex: 1,
+          width: "100%",
+          display: "flex",
+          overflowY: "auto",
+        }}
+      >
+        <Box
+          sx={{
+            flexGrow: 1,
+            width: "fit-content",
+            display: "flex",
+            flexDirection: "column",
+            overflowY: "auto",
+            alignItems: "center",
+            justifyContent: "flex-start",
+          }}
+        >
+          {notifications.map((notification: Notification, index) => {
+            return (
+              <NotificationItem
+                {...notification}
+                showDivider={index < notifications.length - 1}
+              />
+            );
+          })}
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default MyNotificationsPanel;

package/src/components/common/NotificationItem.tsx

@@ -0,0 +1,138 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { Box, Button, Divider, keyframes, Typography } from "@mui/material";
+import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { useAxios, useSession } from "../../hooks";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { timeAgo } from "../../util";
+
+const beatFade = keyframes`
+  0% { transform: scale(1); opacity: 1; }
+  25% { transform: scale(1); opacity: 0.6; }
+  50% { transform: scale(1); opacity: 1; }
+  75% { transform: scale(1); opacity: 0.6; }
+  100% { transform: scale(1); opacity: 1; }
+`;
+
+export type Notification = {
+  id: number;
+  notificationIcon?: IconProp;
+  notificationIconColor?: string;
+  notificationEnText: string;
+  notificationArText: string;
+  notificationTextColor?: string;
+  notificationAction?: "NAVIGATION";
+  notificationActionPayload?: string;
+  isNotified?: boolean;
+  createTime: string;
+  setOpen?: (state: boolean) => void;
+  showDivider?: boolean;
+};
+const NotificationItem: React.FC<Notification> = (notification) => {
+  const navigate = useNavigate();
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const { handlePostRequest } = useAxios();
+  const acknowledgeNotification = (notificationId) => {
+    handlePostRequest({
+      endPointURI: "api/v1/public/notification/notified",
+      showMask: false,
+      parameters: { notificationQueueId: notificationId },
+    });
+  };
+  return (
+    <>
+      <Button
+        fullWidth
+        onClick={() => {
+          if (
+            notification?.notificationAction === "NAVIGATION" &&
+            notification?.notificationActionPayload
+          ) {
+            navigate(notification.notificationActionPayload);
+          }
+          if (!notification?.isNotified) {
+            acknowledgeNotification(notification.id);
+          }
+          if (notification?.setOpen) {
+            notification.setOpen(false);
+          }
+        }}
+        sx={{
+          marginBottom: 1,
+          justifyContent: "flex-start",
+          alignItems: "flex-start",
+          color: notification?.notificationTextColor,
+          display: "flex",
+          flexDirection: "column",
+          cursor: "pointer",
+        }}
+      >
+        <Box
+          sx={{
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            width: "100%",
+          }}
+        >
+          {notification?.notificationIcon ? (
+            <FontAwesomeIcon
+              icon={notification.notificationIcon}
+              style={{
+                marginRight: 10,
+                marginLeft: 10,
+                color: notification?.notificationIconColor,
+              }}
+            />
+          ) : (
+            <></>
+          )}
+          {AppLayout.appDirection === "ltr"
+            ? notification.notificationEnText
+            : notification.notificationArText}
+          <Box sx={{ flex: 1 }}></Box>
+          {!notification?.isNotified ? (
+            <Typography
+              color="warning"
+              sx={{
+                animation: `${beatFade} 2s infinite ease-in-out`,
+                textTransform: "none",
+                display: "inline-block",
+              }}
+            >
+              <FontAwesomeIcon
+                icon="bell"
+                style={{ marginRight: 5, marginLeft: 5 }}
+              />
+              {AppLayout.appDirection === "ltr" ? "New" : "جديد"}
+            </Typography>
+          ) : (
+            <></>
+          )}
+        </Box>
+        <Box
+          sx={{
+            width: "100%",
+            fontSize: 12,
+            display: "flex",
+            justifyContent: "flex-end",
+            alignItems: "center",
+            cursor: "pointer",
+          }}
+        >
+          <Box sx={{ marginRight: 1, marginLeft: 1 }}>
+            {timeAgo(notification.createTime, AppLayout.appDirection)}
+          </Box>
+          <Box sx={{ flex: 1 }}></Box>
+          <Box sx={{ marginRight: 1, marginLeft: 1 }}>
+            {notification.createTime}
+          </Box>
+        </Box>
+      </Button>
+      {notification?.showDivider ? <Divider flexItem /> : <></>}
+    </>
+  );
+};
+
+export default NotificationItem;

package/src/components/templates/workflow/WorkflowRouteComponent.tsx

@@ -0,0 +1,14 @@
+import { useParams } from "react-router-dom";
+import WorkflowDocumentPanel from "./WorkflowDocumentPanel";
+
+const WorkflowRouteComponent: React.FC = () => {
+  const { workflowDocumentCode, refDocumentId } = useParams();
+  return (
+    <WorkflowDocumentPanel
+      workFlowDocumentCode={workflowDocumentCode}
+      refDocumentId={refDocumentId}
+    />
+  );
+};
+
+export default WorkflowRouteComponent;

package/src/hooks/useAxios.tsx

@@ -1,7 +1,8 @@
 import { toast } from "react-toastify";
 import axios, { ResponseType } from "axios";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import useLoadingMask from "./useLoadingMask";
+import { UserSessionActions } from "../redux/features/common/UserSessionSlice";
 
 export interface APIRequest {
   endPointURI: string;
@@ -27,6 +28,7 @@ export interface UploadAttachmentRequest {
 
 const useAxios = () => {
   const mask = useLoadingMask();
+  const dispatch = useDispatch();
   const apiBaseUrl = useSelector(
     (state: any) => state.AppInfo.value.apiBaseUrl
   );
@@ -51,6 +53,7 @@ const useAxios = () => {
             : false
           : false
       ) {
+        dispatch(UserSessionActions.setUnAuthenticated());
         toast.error("your session is now expired, you need to login again", {
           autoClose: false,
         });

package/src/hooks/useInterval.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+
+export default function useInterval(
+  callback: () => void,
+  delay: number | null
+) {
+  const savedCallback = useRef<() => void>(callback);
+
+  // Remember the latest callback
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval
+  useEffect(() => {
+    if (delay === null) return;
+
+    const tick = () => savedCallback.current?.();
+
+    const id = setInterval(tick, delay);
+    return () => clearInterval(id);
+  }, [delay]);
+}

package/src/layout/Layout.tsx

@@ -63,9 +63,15 @@ export default function Layout() {
   const UserSession: UserSessionProps = useSelector(
     (state: any) => state.UserSession
   );
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+
   return (
     <BrowserRouter>
-      <ToastContainer draggable={true} position="bottom-center" />
+      <ToastContainer
+        rtl={AppLayout.appDirection === "rtl"}
+        draggable={true}
+        position="bottom-center"
+      />
       <LoadingMask />
       {UserSession.value.isAuthenticated === true ? (
         <Main open={SideBarState.isOpened}>

package/src/layout/NotificationButton.tsx

@@ -0,0 +1,207 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  Badge,
+  Box,
+  Button,
+  ClickAwayListener,
+  Divider,
+  Fade,
+  IconButton,
+  keyframes,
+  Paper,
+  Popper,
+  PopperPlacementType,
+  Typography,
+} from "@mui/material";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { timeAgo } from "../util";
+import useInterval from "../hooks/useInterval";
+import { useAxios, useSession } from "../hooks";
+import { toast } from "react-toastify";
+import NotificationItem, {
+  Notification,
+} from "../components/common/NotificationItem";
+
+export const notificationsCheckIntervalSeconds = 1;
+
+const NotificationButton: React.FC = () => {
+  const { UserInfo } = useSession();
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const { handleGetRequest, handlePostRequest } = useAxios();
+  const navigate = useNavigate();
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const [open, setOpen] = useState(false);
+  const [notifications, setNotifications] = useState<Array<Notification>>([]);
+  const loadUseNotifications = () => {
+    if (UserInfo.isAuthenticated === true) {
+      handleGetRequest({
+        endPointURI: "api/v1/public/notifications/new",
+        showMask: false,
+        successCallBkFn: (response: any) => {
+          if (response.data.length > notifications.length) {
+            toast.info(
+              AppLayout.appDirection === "ltr"
+                ? `You have new notifications`
+                : `لديك اشعارات جديدة`,
+              {
+                autoClose: false,
+                position:
+                  AppLayout.appDirection === "ltr"
+                    ? "bottom-right"
+                    : "bottom-left",
+                closeOnClick: true,
+              }
+            );
+          }
+          setNotifications(response.data);
+        },
+      });
+    }
+  };
+
+  useInterval(() => {
+    loadUseNotifications();
+  }, notificationsCheckIntervalSeconds * 1000);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+    setOpen(!open);
+  };
+  return (
+    <ClickAwayListener
+      onClickAway={() => {
+        setOpen(false);
+      }}
+    >
+      <div style={{ cursor: "pointer" }}>
+        <IconButton
+          color="inherit"
+          onClick={handleClick}
+          sx={{ marginRight: 1, marginLeft: 1 }}
+        >
+          <Badge
+            anchorOrigin={{
+              vertical: "top",
+              horizontal: AppLayout.appDirection === "ltr" ? "right" : "left",
+            }}
+            badgeContent={
+              notifications.filter(
+                (notificaiton) =>
+                  notificaiton.isNotified === undefined ||
+                  notificaiton.isNotified === null
+              ).length
+            }
+            color="error"
+          >
+            <FontAwesomeIcon icon="bell" />
+          </Badge>
+        </IconButton>
+
+        <Popper
+          // Note: The following zIndex style is specifically for documentation purposes and may not be necessary in your application.
+          sx={{
+            zIndex: 1200,
+            width: "fit-content",
+            minWidth: 350,
+            display: "flex",
+            flexDirection: "column",
+          }}
+          open={open}
+          anchorEl={anchorEl}
+          dir={AppLayout.appDirection}
+          placement={"bottom"}
+          transition
+        >
+          {({ TransitionProps }) => (
+            <Fade {...TransitionProps} timeout={350}>
+              <Paper
+                sx={{
+                  padding: 1,
+                  m: 1,
+                  maxHeight: 500,
+                  overflow: "hidden",
+                  display: "flex",
+                  flexDirection: "column",
+                }}
+              >
+                <Divider variant="fullWidth" flexItem>
+                  <Box
+                    sx={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      marginTop: 2,
+                      marginBottom: 1,
+                    }}
+                  >
+                    <FontAwesomeIcon
+                      icon="bell"
+                      style={{ marginRight: 10, marginLeft: 10 }}
+                    />
+                    {AppLayout.appDirection === "ltr"
+                      ? "Notifications"
+                      : "الاشعارات"}
+                  </Box>
+                </Divider>
+                {notifications.length == 0 ? (
+                  <Box
+                    sx={{
+                      display: "flex",
+                      alignItems: "center",
+                      flex: 1,
+                      justifyContent: "center",
+                    }}
+                  >
+                    <Box>
+                      {AppLayout.appDirection === "ltr"
+                        ? "You don't have any notifications"
+                        : "لا يوجد اشعارات"}
+                    </Box>
+                  </Box>
+                ) : (
+                  <></>
+                )}
+                <Box
+                  sx={{
+                    flex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    overflowY: "auto",
+                  }}
+                >
+                  {notifications.map((notification, index) => {
+                    return (
+                      <NotificationItem
+                        {...notification}
+                        setOpen={setOpen}
+                        showDivider={index < notifications.length - 1}
+                      />
+                    );
+                  })}
+                </Box>
+                <Divider variant="fullWidth" flexItem>
+                  <Button
+                    sx={{ textTransform: "none" }}
+                    onClick={() => {
+                      navigate("myNotifications");
+                    }}
+                  >
+                    {AppLayout.appDirection === "ltr"
+                      ? "Show Old Notifications"
+                      : "عرض الاشعارات القديمة"}
+                  </Button>
+                </Divider>
+              </Paper>
+            </Fade>
+          )}
+        </Popper>
+      </div>
+    </ClickAwayListener>
+  );
+};
+
+export default NotificationButton;

package/src/layout/TopBar.tsx

@@ -22,6 +22,7 @@ import { useSession, useWindow } from "../hooks";
 import ChangeOrgForm from "../components/common/ChangeOrgForm";
 import { toggleSideBarState } from "../redux/features/common/SideBarSlice";
 import AttachmentImageViewer from "../components/templates/attachment/AttachmentImageViewer";
+import NotificationButton from "./NotificationButton";
 
 interface AppBarProps extends MuiAppBarProps {
   open?: boolean;
@@ -192,6 +193,7 @@ const TopBar: React.FC = () => {
             <></>
           )}
 
+          <NotificationButton />
           <AttachmentImageViewer
             showAsAvatar={true}
             attachmentCode="PERSON_IMG"

package/src/locales/arabic/devLocalsAr.json

@@ -276,8 +276,8 @@
   "WORKFLOW_DOCUMENT_STATUS_IS_ZERO_STATE": "Is zero state",
   "WORKFLOW_DOCUMENT_STATUS_NEXT_ACTION_TAKERS_QUERY_ID": "Next action takers query id",
   "WORKFLOW_DOCUMENT_STATUS_NEXT_ACTIONS_QUERY_ID": "Next actions query id",
-  "WORKFLOW_DOCUMENT_STATUS_WORKFLOW_DOCUMENT_ID": "Workflow document id",    
-  "ATTACHMENT_ATTACHMENT_CONFIG_ID": "Attachment config id",  
+  "WORKFLOW_DOCUMENT_STATUS_WORKFLOW_DOCUMENT_ID": "Workflow document id",
+  "ATTACHMENT_ATTACHMENT_CONFIG_ID": "Attachment config id",
   "ATTACHMENT_CONFIG_SINGULAR": "Attachment Configuration",
   "ATTACHMENT_CONFIG_PLURAL": "Attachment Configuration",
   "ATTACHMENT_CONFIG_ALLOWED_FILE_TYPES": "Allowed file types",
@@ -288,5 +288,30 @@
   "ATTACHMENT_CONFIG_RELATED_DATABASE_TABLE": "Related database table",
   "ATTACHMENT_CONFIG_STORAGE_TYPE": "Storage type",
   "ATTACHMENT_CONFIG_UPLOAD_AUTHORITY_KEY": "Upload authority key",
-  "ATTACHMENT_CONFIG_UPLOAD_DIRECTORY": "Upload directory"
+  "ATTACHMENT_CONFIG_UPLOAD_DIRECTORY": "Upload directory",
+  "NOTIFICATION_SINGULAR": "notification",
+  "NOTIFICATION_PLURAL": "notifications",
+  "NOTIFICATION_IS_ACTIVE": "Is active",
+  "NOTIFICATION_NOTIFICATION_ACTION_PAYLOAD": "Notification action payload",
+  "NOTIFICATION_NOTIFICATION_CODE": "Notification code",
+  "NOTIFICATION_NOTIFICATION_ICON": "Notification icon",
+  "NOTIFICATION_NOTIFICATION_QUERY_ID": "Notification query id",
+  "NOTIFICATION_SYSTEM_APPLICATION_ID": "System application id",
+  "NOTIFICATION_USERS_TO_NOTIFY_QUERY_ID": "Users to notify query id",
+  "NOTIFICATION_AUTHORITY_TO_NOTIFY": "Authority to notify",
+  "NOTIFICATION_NOTIFICATION_ACTION": "Notification action",
+  "NOTIFICATION_NOTIFICATION_AR_TEXT": "Notification ar text",
+  "NOTIFICATION_NOTIFICATION_EN_TEXT": "Notification en text",
+  "NOTIFICATION_NOTIFICATION_ICON_COLOR": "Notification icon color",
+  "NOTIFICATION_NOTIFICATION_TEXT_COLOR": "Notification text color",
+  "NOTIFICATION_ORGANIZATION_ID_FIELD": "Organization id field",  
+  "NOTIFICATION_QUEUE_SYSTEM_APPLICATION_ID": "System application id",  
+  "NOTIFICATION_QUEUE_NOTIFICATION_ACTION": "Notification action",
+  "NOTIFICATION_QUEUE_NOTIFICATION_ACTION_PAYLOAD": "Notification action payload",
+  "NOTIFICATION_QUEUE_NOTIFICATION_AR_TEXT": "Notification ar text",
+  "NOTIFICATION_QUEUE_NOTIFICATION_EN_TEXT": "Notification en text",
+  "NOTIFICATION_QUEUE_NOTIFICATION_ICON": "Notification icon",
+  "NOTIFICATION_QUEUE_NOTIFICATION_ICON_COLOR": "Notification icon color",
+  "NOTIFICATION_QUEUE_NOTIFICATION_ID": "Notification id",
+  "NOTIFICATION_QUEUE_NOTIFICATION_TEXT_COLOR": "Notification text color"
 }

package/src/locales/english/devLocalsEn.json

@@ -289,5 +289,30 @@
   "ATTACHMENT_CONFIG_RELATED_DATABASE_TABLE": "Related database table",
   "ATTACHMENT_CONFIG_STORAGE_TYPE": "Storage type",
   "ATTACHMENT_CONFIG_UPLOAD_AUTHORITY_KEY": "Upload authority key",
-  "ATTACHMENT_CONFIG_UPLOAD_DIRECTORY": "Upload directory"
+  "ATTACHMENT_CONFIG_UPLOAD_DIRECTORY": "Upload directory",
+  "NOTIFICATION_SINGULAR": "notification",
+	"NOTIFICATION_PLURAL": "notifications",
+	"NOTIFICATION_IS_ACTIVE": "Is active",
+	"NOTIFICATION_NOTIFICATION_ACTION_PAYLOAD": "Notification action payload",
+	"NOTIFICATION_NOTIFICATION_CODE": "Notification code",
+	"NOTIFICATION_NOTIFICATION_ICON": "Notification icon",
+	"NOTIFICATION_NOTIFICATION_QUERY_ID": "Notification query id",
+	"NOTIFICATION_SYSTEM_APPLICATION_ID": "System application id",
+	"NOTIFICATION_USERS_TO_NOTIFY_QUERY_ID": "Users to notify query id",
+	"NOTIFICATION_AUTHORITY_TO_NOTIFY": "Authority to notify",
+	"NOTIFICATION_NOTIFICATION_ACTION": "Notification action",
+	"NOTIFICATION_NOTIFICATION_AR_TEXT": "Notification ar text",
+	"NOTIFICATION_NOTIFICATION_EN_TEXT": "Notification en text",
+	"NOTIFICATION_NOTIFICATION_ICON_COLOR": "Notification icon color",
+	"NOTIFICATION_NOTIFICATION_TEXT_COLOR": "Notification text color",
+	"NOTIFICATION_ORGANIZATION_ID_FIELD": "Organization id field",	
+	"NOTIFICATION_QUEUE_SYSTEM_APPLICATION_ID": "System application id",	
+	"NOTIFICATION_QUEUE_NOTIFICATION_ACTION": "Notification action",
+	"NOTIFICATION_QUEUE_NOTIFICATION_ACTION_PAYLOAD": "Notification action payload",
+	"NOTIFICATION_QUEUE_NOTIFICATION_AR_TEXT": "Notification ar text",
+	"NOTIFICATION_QUEUE_NOTIFICATION_EN_TEXT": "Notification en text",
+	"NOTIFICATION_QUEUE_NOTIFICATION_ICON": "Notification icon",
+	"NOTIFICATION_QUEUE_NOTIFICATION_ICON_COLOR": "Notification icon color",
+	"NOTIFICATION_QUEUE_NOTIFICATION_ID": "Notification id",
+	"NOTIFICATION_QUEUE_NOTIFICATION_TEXT_COLOR": "Notification text color"
 }

package/src/redux/features/administration/AdministrationStoresMetaData.ts

@@ -37,6 +37,19 @@ export const ADMINISTRATION_STORES: CommonStores = {
       { name: "LinearProgress" },
     ],
   },
+  SystemTimeIntervals: {
+    autoLoad: false,
+    url: "",
+    data: [
+      { value: "second" },
+      { value: "minute" },
+      { value: "hour" },
+      { value: "day" },
+      { value: "week" },
+      { value: "month" },
+      { value: "year" },
+    ],
+  },
   SystemMailRecipientTypes: {
     autoLoad: false,
     url: "",

package/src/routes/administration/devRoutes.tsx

@@ -19,6 +19,9 @@ import SystemApplicationAuthorityGrid from "../../components/administration/admi
 import SystemApplicationRoleGrid from "../../components/administration/admin/SystemApplicationRoleGrid";
 import SystemApplicationModuleGrid from "../../components/administration/admin/SystemApplicationModuleGrid";
 import AttachmentConfigGrid from "../../components/administration/dev/AttachmentConfigGrid";
+import NotificationGrid from "../../components/administration/dev/NotificationGrid";
+import MyNotificationsPanel from "../../components/common/MyNotificationsPanel";
+import WorkflowRouteComponent from "../../components/templates/workflow/WorkflowRouteComponent";
 
 export const devRoutes: Array<SystemRoute> = [
   {
@@ -108,6 +111,18 @@ export const devRoutes: Array<SystemRoute> = [
     path: "dev/attachmentconfigs",
     component: AttachmentConfigGrid,
   },
+  {
+    path: "dev/notifications",
+    component: NotificationGrid,
+  },
+  {
+    path: "myNotifications",
+    component: MyNotificationsPanel,
+  },
+  {
+    path: "workflow/:workflowDocumentCode/:refDocumentId",
+    component: WorkflowRouteComponent,
+  },
 ];
 
 //  import { devRoutes } from "./devRoutes";