@asaleh37/ui-base 1.2.30 → 25.6.2-0.1

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,36 @@
-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;
+  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;

package/src/layout/SideBar.tsx

@@ -1,85 +1,85 @@
-import Divider from "@mui/material/Divider";
-import IconButton from "@mui/material/IconButton";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import Drawer from "@mui/material/Drawer";
-import { useDispatch, useSelector } from "react-redux";
-import { DrawerHeader } from "./DrawerHeader";
-import { Box, Typography, useTheme } from "@mui/material";
-import { DRAWER_WIDTH } from "../redux/features/common/AppLayoutSlice";
-import NavigationTree from "./NavigationTree";
-import { useSession } from "../hooks";
-import { toggleSideBarState } from "../redux/features/common/SideBarSlice";
-
-const SideBar: React.FC = () => {
-  const AppInfo = useSelector((state: any) => state.AppInfo.value);
-  const { UserSession } = useSession();
-  const currentOrganization = UserSession.value.currentOrganization;
-  const theme = useTheme();
-  const AppLayout = useSelector((state: any) => state.AppLayout);
-  const SideBarState = useSelector((state: any) => state.SideBar);
-  const dispatch = useDispatch();
-  const toggleSideBar = () => {
-    dispatch(toggleSideBarState());
-  };
-  return (
-    <Drawer
-      sx={{
-        width: DRAWER_WIDTH,
-        flexShrink: 0,
-        "& .MuiDrawer-paper": {
-          width: DRAWER_WIDTH,
-          boxSizing: "border-box",
-        },
-      }}
-      variant="persistent"
-      anchor={AppLayout.appDirection === "ltr" ? "left" : "right"}
-      open={SideBarState.isOpened}
-    >
-      <DrawerHeader>
-        <Box sx={{ width: "100%" }}>
-          <Typography
-            color="primary"
-            sx={{
-              width: "100%",
-              textAlign: "center",
-              fontSize: 18,
-              fontWeight: "bold",
-            }}
-          >
-            System Content
-          </Typography>
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-around",
-              marginTop: 1,
-            }}
-          >
-            <Typography sx={{ fontSize: 12 }} color="textDisabled">
-              {`${AppInfo.appName} - ${
-                AppLayout.appDirection === "ltr"
-                  ? currentOrganization?.organizationEnName
-                  : currentOrganization?.organizationArName
-              }`}
-            </Typography>
-            <Typography sx={{ fontSize: 12 }} color="textDisabled">
-              V.{AppInfo.appVersion}
-            </Typography>
-          </Box>
-        </Box>
-        <IconButton onClick={toggleSideBar}>
-          {theme.direction === "ltr" ? (
-            <FontAwesomeIcon icon="angle-left" />
-          ) : (
-            <FontAwesomeIcon icon="angle-right" />
-          )}
-        </IconButton>
-      </DrawerHeader>
-      <Divider />
-      <NavigationTree />
-    </Drawer>
-  );
-};
-
-export default SideBar;
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Drawer from "@mui/material/Drawer";
+import { useDispatch, useSelector } from "react-redux";
+import { DrawerHeader } from "./DrawerHeader";
+import { Box, Typography, useTheme } from "@mui/material";
+import { DRAWER_WIDTH } from "../redux/features/common/AppLayoutSlice";
+import NavigationTree from "./NavigationTree";
+import { useSession } from "../hooks";
+import { toggleSideBarState } from "../redux/features/common/SideBarSlice";
+
+const SideBar: React.FC = () => {
+  const AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const { UserSession } = useSession();
+  const currentOrganization = UserSession.value.currentOrganization;
+  const theme = useTheme();
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const SideBarState = useSelector((state: any) => state.SideBar);
+  const dispatch = useDispatch();
+  const toggleSideBar = () => {
+    dispatch(toggleSideBarState());
+  };
+  return (
+    <Drawer
+      sx={{
+        width: DRAWER_WIDTH,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width: DRAWER_WIDTH,
+          boxSizing: "border-box",
+        },
+      }}
+      variant="persistent"
+      anchor={AppLayout.appDirection === "ltr" ? "left" : "right"}
+      open={SideBarState.isOpened}
+    >
+      <DrawerHeader>
+        <Box sx={{ width: "100%" }}>
+          <Typography
+            color="primary"
+            sx={{
+              width: "100%",
+              textAlign: "center",
+              fontSize: 18,
+              fontWeight: "bold",
+            }}
+          >
+            System Content
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-around",
+              marginTop: 1,
+            }}
+          >
+            <Typography sx={{ fontSize: 12 }} color="textDisabled">
+              {`${AppInfo.appName} - ${
+                AppLayout.appDirection === "ltr"
+                  ? currentOrganization?.organizationEnName
+                  : currentOrganization?.organizationArName
+              }`}
+            </Typography>
+            <Typography sx={{ fontSize: 12 }} color="textDisabled">
+              V.{AppInfo.appVersion}
+            </Typography>
+          </Box>
+        </Box>
+        <IconButton onClick={toggleSideBar}>
+          {theme.direction === "ltr" ? (
+            <FontAwesomeIcon icon="angle-left" />
+          ) : (
+            <FontAwesomeIcon icon="angle-right" />
+          )}
+        </IconButton>
+      </DrawerHeader>
+      <Divider />
+      <NavigationTree />
+    </Drawer>
+  );
+};
+
+export default SideBar;