@campxdev/shared 0.3.15 → 0.3.16

package/src/components/Layout/Header/AppHeader.tsx

@@ -1,120 +1,119 @@
-import {Box, styled, Typography} from '@mui/material'
-import {ReactNode} from 'react'
-import {Link} from 'react-router-dom'
-import {campxLogoPrimary} from '../../../assets/images'
-import {isDevelopment} from '../../../constants/isDevelopment'
-import {applications} from './applications'
-import AppsMenu from './AppsMenu'
-import {collegex, enrollx, examx, payx, peoplex} from './assets'
-import CogWheelMenu from './CogWheelMenu'
-import FreshDeskHelpButton from './FreshDeskHelpButton'
-import Notification from './Notification'
-import {StyledHeader, StyledImageWrapper} from './styles'
-import UserBox from './UserBox'
+import { Box, styled, Typography } from "@mui/material";
+import { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { campxLogoPrimary } from "../../../assets/images";
+import { isDevelopment } from "../../../constants/isDevelopment";
+import { applications } from "./applications";
+import AppsMenu from "./AppsMenu";
+import { collegex, enrollx, examx, payx, peoplex } from "./assets";
+import CogWheelMenu from "./CogWheelMenu";
+import FreshDeskHelpButton from "./FreshDeskHelpButton";
+import Notification from "./Notification";
+import { StyledHeader, StyledImageWrapper } from "./styles";
+import UserBox from "./UserBox";
 
 const StyledLogosWrapper = styled(Box)(() => ({
-	display: 'flex',
-	alignItems: 'center',
-	gap: '10px',
-	padding: '10px',
-	transition: 'background ease 0.3s',
-	borderRadius: '5px',
-	'&:hover': {
-		background: 'rgba(0, 0, 0, 0.05)',
-	},
-}))
+  display: "flex",
+  alignItems: "center",
+  gap: "10px",
+  padding: "10px",
+  transition: "background ease 0.3s",
+  borderRadius: "5px",
+  "&:hover": {
+    background: "rgba(0, 0, 0, 0.05)",
+  },
+}));
 
 const StyledLink = styled(Link)(() => ({
-	textDecoration: 'none',
-}))
+  textDecoration: "none",
+}));
 
 const imageMap = {
-	ums: collegex,
-	enroll: enrollx,
-	exams: examx,
-	payments: payx,
-	peoplex: peoplex,
-	campx: campxLogoPrimary,
-}
+  ums: collegex,
+  enroll: enrollx,
+  exams: examx,
+  payments: payx,
+  peoplex: peoplex,
+  campx: campxLogoPrimary,
+};
 
 interface AppHeaderProps {
-	clientLogo: string
-	username: string
-	profileIcon: string
-	permissions?: any
-	userBoxActions: {
-		label: ReactNode
-		icon?: ReactNode
-		onClick: any
-	}[]
-	cogWheelMenu?: {label: string; path: string}[]
+  clientLogo: string;
+  username: string;
+  profileIcon: string;
+  permissions?: any;
+  userBoxActions: {
+    label: ReactNode;
+    icon?: ReactNode;
+    onClick: any;
+  }[];
+  cogWheelMenu?: { label: string; path: string }[];
 }
 
 export default function AppHeader({
-	clientLogo = imageMap.campx,
-	username,
-	profileIcon,
-	permissions,
-	userBoxActions = [],
-	cogWheelMenu = [],
+  clientLogo = imageMap.campx,
+  username,
+  profileIcon,
+  permissions,
+  userBoxActions = [],
+  cogWheelMenu = [],
 }: AppHeaderProps) {
-	return (
-		<StyledHeader>
-			<Box sx={{display: 'flex', alignItems: 'center', gap: '10px'}}>
-				<AppsMenu />
-				<AppLogo clientLogo={clientLogo} />
-			</Box>
-			<Box className='actions'>
-				<FreshDeskHelpButton />
-				<Notification />
-				{cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
-				<UserBox
-					username={username}
-					profileIcon={profileIcon}
-					actions={userBoxActions}
-				/>
-			</Box>
-		</StyledHeader>
-	)
+  return (
+    <StyledHeader>
+      <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
+        <AppsMenu />
+        <AppLogo clientLogo={clientLogo} />
+      </Box>
+      <Box className="actions">
+        <FreshDeskHelpButton />
+        <Notification />
+        {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
+        <UserBox
+          username={username}
+          profileIcon={profileIcon}
+          actions={userBoxActions}
+        />
+      </Box>
+    </StyledHeader>
+  );
 }
 
-const AppLogo = ({clientLogo}) => {
-	const originSubdomain = window.location.host.split('.')?.slice(-3)[0] ?? 'ums'
-	const currentApp =
-		applications.find((item) => item.key === originSubdomain)?.key ?? 'campx'
-
-	console.log('App Name', currentApp)
+const AppLogo = ({ clientLogo }) => {
+  const originSubdomain =
+    window.location.host.split(".")?.slice(-3)[0] ?? "ums";
+  const currentApp =
+    applications.find((item) => item.key === originSubdomain)?.key ?? "campx";
 
-	return (
-		<StyledLink to={'/'}>
-			<StyledLogosWrapper>
-				<StyledImageWrapper>
-					{isDevelopment ? (
-						<img src={imageMap.campx} />
-					) : (
-						<img src={imageMap[currentApp]} />
-					)}
-				</StyledImageWrapper>
-				<Box
-					sx={{
-						height: '26px',
-						width: '2px',
-						background: 'gray',
-					}}
-				></Box>
-				<StyledImageWrapper>
-					{isDevelopment ? (
-						<Typography variant='h1'>Developer</Typography>
-					) : (
-						<img
-							src={clientLogo}
-							onError={(e: any) => {
-								e.target.src = imageMap.campx
-							}}
-						/>
-					)}
-				</StyledImageWrapper>
-			</StyledLogosWrapper>
-		</StyledLink>
-	)
-}
+  return (
+    <StyledLink to={"/"}>
+      <StyledLogosWrapper>
+        <StyledImageWrapper>
+          {isDevelopment ? (
+            <img src={imageMap.campx} />
+          ) : (
+            <img src={imageMap[currentApp]} />
+          )}
+        </StyledImageWrapper>
+        <Box
+          sx={{
+            height: "26px",
+            width: "2px",
+            background: "gray",
+          }}
+        ></Box>
+        <StyledImageWrapper>
+          {isDevelopment ? (
+            <Typography variant="h1">Developer</Typography>
+          ) : (
+            <img
+              src={clientLogo}
+              onError={(e: any) => {
+                e.target.src = imageMap.campx;
+              }}
+            />
+          )}
+        </StyledImageWrapper>
+      </StyledLogosWrapper>
+    </StyledLink>
+  );
+};

package/src/components/Layout/Header/UserBox.tsx

@@ -1,42 +1,66 @@
-import {Box, Typography} from '@mui/material'
-import {ReactNode} from 'react'
-import {avatarImage} from '../../../assets/images'
-import MenuButton from '../../MenuButton'
-import {StyledUser} from './styles'
+import { Box, Typography } from "@mui/material";
+import { ReactNode, useState } from "react";
+import { avatarImage } from "../../../assets/images";
+import MenuButton from "../../MenuButton";
+import { StyledUser } from "./styles";
+import logout from "../../../utils/logout";
+import ChangePassword from "../../ChangePassword";
 
 export default function UserBox({
-	username,
-	profileIcon,
-	actions,
+  username,
+  profileIcon,
+  actions,
 }: {
-	username: string
-	profileIcon: string
-	actions: {label: ReactNode; icon?: ReactNode; onClick: any}[]
+  username: string;
+  profileIcon: string;
+  actions: { label: ReactNode; icon?: ReactNode; onClick: any }[];
 }) {
-	return (
-		<MenuButton
-			anchor={
-				<Box minWidth={'80px'} textAlign='center'>
-					<StyledUser>
-						<img
-							src={profileIcon ?? avatarImage}
-							style={{
-								height: '32px',
-								width: '32px',
-								objectFit: 'contain',
-							}}
-							onError={(e: any) => {
-								e.target.src = avatarImage
-							}}
-						/>
-						<Typography variant='h6'>{username}</Typography>
-					</StyledUser>
-				</Box>
-			}
-			menu={actions}
-			menuProps={{
-				PaperProps: {sx: {top: '64px !important'}},
-			}}
-		/>
-	)
+  const [open, setOpen] = useState(true);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = (value: string) => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <MenuButton
+        anchor={
+          <Box minWidth={"80px"} textAlign="center">
+            <StyledUser>
+              <img
+                src={profileIcon ?? avatarImage}
+                style={{
+                  height: "32px",
+                  width: "32px",
+                  objectFit: "contain",
+                }}
+                onError={(e: any) => {
+                  e.target.src = avatarImage;
+                }}
+              />
+              <Typography variant="h6">{username}</Typography>
+            </StyledUser>
+          </Box>
+        }
+        menu={[
+          ...actions,
+          {
+            label: "Logout",
+            onClick: logout,
+          },
+          {
+            label: "Change Password",
+            onClick: handleClickOpen,
+          },
+        ]}
+        menuProps={{
+          PaperProps: { sx: { top: "64px !important" } },
+        }}
+      />
+      <ChangePassword open={open} onClose={handleClose} />
+    </>
+  );
 }

package/src/components/LayoutWrapper.tsx

@@ -0,0 +1,25 @@
+import {
+  StyledLeftNavContainer,
+  StyledMainContentContainer,
+} from "../layouts/Components/styles";
+import SideNav from "./SideNav";
+interface Props {
+  children?: React.ReactNode;
+  menu: any[];
+  sideMenuHeader?: React.ReactNode;
+}
+
+export default function LayoutWrapper({
+  children,
+  menu,
+  sideMenuHeader,
+}: Props) {
+  return (
+    <>
+      <StyledLeftNavContainer>
+        <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
+      </StyledLeftNavContainer>
+      <StyledMainContentContainer>{children}</StyledMainContentContainer>
+    </>
+  );
+}

package/src/components/ListItemButton.tsx

@@ -0,0 +1,101 @@
+import { ChevronRight } from "@mui/icons-material";
+import {
+  Box,
+  ListItemButton as MuiListItemButton,
+  ListItemButtonProps,
+  ListItemIcon,
+  ListItemText,
+  styled,
+} from "@mui/material";
+import { ReactNode } from "react";
+
+interface Props extends ListItemButtonProps {
+  hasChildren?: boolean;
+  isActive?: boolean;
+  label: String;
+  icon?: any;
+}
+
+export const ListItemButton = ({
+  isActive,
+  hasChildren,
+  onClick,
+  label,
+  icon: Icon,
+}: Props) => {
+  return (
+    <MyListItemButton
+      isactive={isActive && !hasChildren ? 1 : 0}
+      onClick={onClick}
+    >
+      {Icon ? (
+        <ListItemIcon>{<Icon />}</ListItemIcon>
+      ) : (
+        <Box minWidth={16}></Box>
+      )}
+      <ListItemText primary={label} />
+      {hasChildren ? (
+        <>
+          <StyledChevronIcon open={isActive} />
+        </>
+      ) : null}
+    </MyListItemButton>
+  );
+};
+
+const StyledChevronIcon = styled(ChevronRight)<{ open: boolean }>(
+  ({ theme, open }) => ({
+    transform: open ? "rotate(90deg)" : "rotate(0deg)",
+    transition: "transform 0.2s ease-in-out",
+  })
+);
+
+const MyListItemButton = styled(MuiListItemButton)<{
+  isactive: 1 | 0;
+  children: ReactNode;
+}>(({ theme, isactive }) => ({
+  gap: "10px",
+  fontWeight: "bold",
+  backgroundColor: isactive && "#1d1d1d",
+  "&:hover": {
+    backgroundColor: isactive && "#1d1d1d",
+  },
+  "&:after": {
+    content: '""',
+    position: "absolute",
+    height: "100%",
+    left: 0,
+    top: 0,
+    width: isactive ? "5px" : 0,
+    opacity: isactive ? 1 : 0,
+    transition: theme.transitions.create(["opacity", "width"]),
+    background: theme.palette.common.yellow,
+    borderTopRightRadius: "3px",
+    borderBottomRightRadius: "3px",
+  },
+  "&.MuiButton-endIcon, &.MuiButton-startIcon": {
+    transition: theme.transitions.create(["color"]),
+
+    "&.MuiSvgIcon-root": {
+      fontSize: "inherit",
+      transition: "none",
+    },
+  },
+  "& .MuiSvgIcon-root": {
+    fontSize: theme.typography.pxToRem(20),
+    marginRight: theme.spacing(1),
+    // color: isactive
+    //   ? theme.sidebar.menuItemColorActive
+    //   : theme.sidebar.menuItemIconColor,
+  },
+  "& .MuiTypography-root": {
+    color: theme.palette.common.white,
+  },
+  "& svg": {
+    color: theme.palette.common.white,
+  },
+  "& .MuiListItemIcon-root": {
+    minWidth: 0,
+    maxWidth: "1rem",
+  },
+}));

package/src/components/PageNotFound.tsx

@@ -13,6 +13,7 @@ function PageNotFound() {
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
+          marginTop: "50px",
         }}
       >
         <img src={pagenotfound} alt="page not found" width={470} />

package/src/components/SideMenuHeader.tsx

@@ -0,0 +1,29 @@
+import { KeyboardBackspace } from "@mui/icons-material";
+import { Box, styled as styledMui, Typography } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+
+const StyledSideMenuHeader = styledMui(Box)(({ theme }) => ({
+  height: "60px",
+  display: "flex",
+  gap: "8px",
+  alignItems: "center",
+  cursor: "pointer",
+  background: "#1d1d1d",
+}));
+
+export const SideMenuHeader = ({ title, path }) => {
+  const navigate = useNavigate();
+
+  return (
+    <StyledSideMenuHeader
+      onClick={() => {
+        navigate(path);
+      }}
+    >
+      <KeyboardBackspace />
+      <Typography variant="h3" color={"white"}>
+        {title}
+      </Typography>
+    </StyledSideMenuHeader>
+  );
+};

package/src/components/SideNav.tsx

@@ -0,0 +1,99 @@
+import { ReactNode, useState } from "react";
+import { Link, useMatch, useResolvedPath, LinkProps } from "react-router-dom";
+import { Box, Collapse, List, styled } from "@mui/material";
+import { PermissionsStore } from "../permissions";
+import { ListItemButton } from "./ListItemButton";
+const accessIfNoKey = process.env.NODE_ENV === "development" ? true : true;
+
+const StyledLink = styled(Link)({
+  textDecoration: "none",
+});
+
+export default function SideNav({
+  menuItems,
+  header,
+}: {
+  menuItems: any[];
+  header?: ReactNode;
+}) {
+  return (
+    <>
+      {header ? header : null}
+      <Box>
+        {menuItems.map((item, index) => (
+          <RenderMenuItem key={index} menuItem={item} />
+        ))}
+      </Box>
+    </>
+  );
+}
+
+const RenderMenuItem = ({ menuItem }) => {
+  const { path, title, children, icon, permissionKey } = menuItem;
+
+  let resolved = useResolvedPath(path);
+  let match = useMatch({ path: resolved.pathname, end: false });
+
+  const [open, setOpen] = useState(false);
+  const permissions = PermissionsStore.useState((s) => s).permissions;
+
+  const validateDropdownAccess = () => {
+    let arr = [];
+
+    for (let i = 0; i < children.length; i++) {
+      if (permissions[children[i].permissionKey]) {
+        arr.push(true);
+      } else {
+        arr.push(accessIfNoKey);
+      }
+    }
+
+    return arr.includes(true);
+  };
+  const hasAccess = permissionKey ? permissions[permissionKey] : accessIfNoKey;
+  const dropdownAccess = children?.length
+    ? validateDropdownAccess()
+    : hasAccess;
+
+  if (!dropdownAccess) return null;
+  if (children?.length)
+    return (
+      <Box
+        sx={{
+          position: "relative",
+        }}
+      >
+        <ListItemButton
+          onClick={() => setOpen((prev) => !prev)}
+          label={title}
+          isActive={open}
+          hasChildren={true}
+          icon={icon}
+        />
+        <Collapse in={open}>
+          <List>
+            {children?.map((child) => (
+              <RenderMenuItem
+                key={child.path}
+                menuItem={{
+                  ...child,
+                  path: path + child.path,
+                }}
+              />
+            ))}
+          </List>
+        </Collapse>
+      </Box>
+    );
+
+  return (
+    <StyledLink to={path}>
+      <ListItemButton
+        hasChildren={false}
+        label={title}
+        isActive={!!match}
+        icon={icon}
+      />
+    </StyledLink>
+  );
+};