@campxdev/shared 0.5.21 → 0.5.22

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

@@ -1,113 +1,113 @@
-import {Box, styled, Typography} from '@mui/material'
-import {ReactNode} from 'react'
-import {Link} from 'react-router-dom'
-import {isDevelopment} from '../../../constants/isDevelopment'
-import {applications} from './applications'
+import { Box, styled, Typography } from '@mui/material'
+import { ReactNode } from 'react'
+import { Link } from 'react-router-dom'
+import { isDevelopment } from '../../../constants/isDevelopment'
+import { applications } from './applications'
 import AppsMenu from './AppsMenu'
-import {collegex, enrollx, examx, payx, peoplex} from './assets'
+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 { 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: collegex,
+  ums: collegex,
+  enroll: enrollx,
+  exams: examx,
+  payments: payx,
+  peoplex: peoplex,
+  campx: collegex,
 }
 
 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'
+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>
-					<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>
+          <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/AppsMenu.tsx

@@ -1,92 +1,92 @@
-import {Box, Menu, Typography} from '@mui/material'
-import {useState} from 'react'
-import {applications} from './applications'
-import {AppsIcon} from './icons'
+import { Box, Menu, Typography } from '@mui/material'
+import { useState } from 'react'
+import { applications } from './applications'
+import { AppsIcon } from './icons'
 import {
-	StyledDescription,
-	StyledIconButton,
-	StyledMenuItem,
-	StyledMenuItemContainer,
-	StyledLink,
+  StyledDescription,
+  StyledIconButton,
+  StyledMenuItem,
+  StyledMenuItemContainer,
+  StyledLink,
 } from './styles'
 
 const AppsMenu = () => {
-	const [anchorEl, setAnchorEl] = useState<any>(null)
-	const open = Boolean(anchorEl)
+  const [anchorEl, setAnchorEl] = useState<any>(null)
+  const open = Boolean(anchorEl)
 
-	const handleClick = (event) => {
-		setAnchorEl(event.currentTarget)
-	}
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
 
-	const handleClose = () => {
-		setAnchorEl(null)
-	}
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
 
-	return (
-		<>
-			<StyledIconButton onClick={handleClick}>
-				<AppsIcon />
-			</StyledIconButton>
+  return (
+    <>
+      <StyledIconButton onClick={handleClick}>
+        <AppsIcon />
+      </StyledIconButton>
 
-			<Menu
-				transitionDuration={150}
-				elevation={3}
-				id='basic-menu'
-				anchorEl={anchorEl}
-				open={open}
-				onClose={handleClose}
-				anchorOrigin={{
-					vertical: 'bottom',
-					horizontal: 'left',
-				}}
-				transformOrigin={{
-					vertical: 'top',
-					horizontal: 'left',
-				}}
-				sx={{
-					'& .MuiPaper-root': {
-						left: '0 !important',
-						top: '64px !important',
-					},
-				}}
-			>
-				<Box sx={{padding: '0.3rem 1rem'}}>
-					<Typography variant='body2'>Switch to</Typography>
-				</Box>
-				<Box>
-					{applications.map((item, index) => (
-						<StyledLink href={item.path}>
-							<StyledMenuItemContainer
-								key={index}
-								onClick={() => {
-									window.location.href = item.path
-									handleClose()
-								}}
-							>
-								<MenuItem data={item} />
-							</StyledMenuItemContainer>
-						</StyledLink>
-					))}
-				</Box>
-			</Menu>
-		</>
-	)
+      <Menu
+        transitionDuration={150}
+        elevation={3}
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        sx={{
+          '& .MuiPaper-root': {
+            left: '0 !important',
+            top: '64px !important',
+          },
+        }}
+      >
+        <Box sx={{ padding: '0.3rem 1rem' }}>
+          <Typography variant="body2">Switch to</Typography>
+        </Box>
+        <Box>
+          {applications.map((item, index) => (
+            <StyledLink href={item.path}>
+              <StyledMenuItemContainer
+                key={index}
+                onClick={() => {
+                  window.location.href = item.path
+                  handleClose()
+                }}
+              >
+                <MenuItem data={item} />
+              </StyledMenuItemContainer>
+            </StyledLink>
+          ))}
+        </Box>
+      </Menu>
+    </>
+  )
 }
 
 export default AppsMenu
 
-const MenuItem = ({data}) => {
-	return (
-		<StyledMenuItem>
-			<Box>
-				<img src={data.icon} style={{width: '32px', height: '32px'}} />
-			</Box>
-			<Box>
-				<Typography variant='h1' sx={{marginBottom: '7px'}}>
-					{data?.title}
-				</Typography>
-				<StyledDescription>{data?.description}</StyledDescription>
-			</Box>
-		</StyledMenuItem>
-	)
+const MenuItem = ({ data }) => {
+  return (
+    <StyledMenuItem>
+      <Box>
+        <img src={data.icon} style={{ width: '32px', height: '32px' }} />
+      </Box>
+      <Box>
+        <Typography variant="h1" sx={{ marginBottom: '7px' }}>
+          {data?.title}
+        </Typography>
+        <StyledDescription>{data?.description}</StyledDescription>
+      </Box>
+    </StyledMenuItem>
+  )
 }

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

@@ -1,33 +1,33 @@
-import {SettingsOutlined} from '@mui/icons-material'
-import {IconButton} from '@mui/material'
-import {useHistory} from '../../../hooks/useRouter'
+import { SettingsOutlined } from '@mui/icons-material'
+import { IconButton } from '@mui/material'
+import { useHistory } from '../../../hooks/useRouter'
 import MenuButton from '../../MenuButton'
 
-const CogWheelMenu = ({menu}) => {
-	const history = useHistory()
+const CogWheelMenu = ({ menu }) => {
+  const history = useHistory()
 
-	return (
-		<MenuButton
-			anchor={
-				<IconButton color='secondary'>
-					<SettingsOutlined />
-				</IconButton>
-			}
-			menu={menu?.map((item) => ({
-				label: item?.label,
-				onClick: () => {
-					history.push(item?.path)
-				},
-			}))}
-			menuProps={{
-				PaperProps: {sx: {top: '64px !important'}},
-				transformOrigin: {
-					horizontal: 'center',
-					vertical: 'bottom',
-				},
-			}}
-		/>
-	)
+  return (
+    <MenuButton
+      anchor={
+        <IconButton color="secondary">
+          <SettingsOutlined />
+        </IconButton>
+      }
+      menu={menu?.map((item) => ({
+        label: item?.label,
+        onClick: () => {
+          history.push(item?.path)
+        },
+      }))}
+      menuProps={{
+        PaperProps: { sx: { top: '64px !important' } },
+        transformOrigin: {
+          horizontal: 'center',
+          vertical: 'bottom',
+        },
+      }}
+    />
+  )
 }
 
 export default CogWheelMenu

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

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