@asaleh37/ui-base 25.6.1 → 25.6.2-0.2

package/src/layout/NotificationButton.tsx

@@ -1,207 +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: 3000,
-                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;
+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: 3000,
+                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/RouteWrapper.tsx

@@ -1,36 +1,63 @@
-import { Box } from "@mui/material";
-import { useSession } from "../hooks";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-type RouteWrapperProps = {
-  authority?: string;
-  children?: React.ReactNode;
-};
-const RouteWrapper: React.FC<RouteWrapperProps> = (props) => {
-  const { isUserAuthorized } = useSession();
-  if (props?.authority && !isUserAuthorized(props.authority)) {
-    return (
-      <Box
-        sx={{
-          flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          color: "red",
-        }}
-      >
-        <h2>
-          <FontAwesomeIcon
-            style={{ marginRight: 10, marginLeft: 10 }}
-            icon="cancel"
-          />
-          You aren't authorized to access this page
-        </h2>
-      </Box>
-    );
-  }
-  return <>{props.children}</>;
-};
-
-export default RouteWrapper;
+import { Box } from "@mui/material";
+import { useSession } from "../hooks";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type RouteWrapperProps = {
+  authority?: string;
+  applicationModule?: string;
+  children?: React.ReactNode;
+};
+const RouteWrapper: React.FC<RouteWrapperProps> = (props) => {
+  const { isUserAuthorized, isCurrentOrganizationAuthorizedToModule } =
+    useSession();
+  if (
+    props?.applicationModule &&
+    !isCurrentOrganizationAuthorizedToModule(props?.applicationModule)
+  ) {
+    return (
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "red",
+        }}
+      >
+        <h2>
+          <FontAwesomeIcon
+            style={{ marginRight: 10, marginLeft: 10 }}
+            icon="cancel"
+          />
+          Your organization didn't subscribe for this system module
+        </h2>
+      </Box>
+    );
+  }
+  if (props?.authority && !isUserAuthorized(props.authority)) {
+    return (
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "red",
+        }}
+      >
+        <h2>
+          <FontAwesomeIcon
+            style={{ marginRight: 10, marginLeft: 10 }}
+            icon="cancel"
+          />
+          You aren't authorized to access this page
+        </h2>
+      </Box>
+    );
+  }
+  return <>{props.children}</>;
+};
+
+export default RouteWrapper;