@campxdev/shared 0.2.10 → 0.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@campxdev/shared",
-	"version": "0.2.10",
+	"version": "0.2.11",
 	"main": "./exports.ts",
 	"scripts": {
 		"start": "react-scripts start",

package/src/assets/images/index.ts

@@ -5,15 +5,17 @@ const taskAttachmentImage = require('./taskAttachment.png')
 const pdfImage = require('./pdf.png')
 const NoPart = require('./NoPart.png')
 const FileBundleImage = require('./Filebundle.png')
-
 const resultProcessingImage = require('./ResultProcess.png')
+const campxLogoPrimary = require('./campx_logo__full_primary.png')
+
 export {
-  attachmentImage,
-  avatarImage,
-  welcomeImage,
-  taskAttachmentImage,
-  pdfImage,
-  NoPart,
-  resultProcessingImage,
-  FileBundleImage,
+	attachmentImage,
+	avatarImage,
+	welcomeImage,
+	taskAttachmentImage,
+	pdfImage,
+	NoPart,
+	resultProcessingImage,
+	FileBundleImage,
+	campxLogoPrimary,
 }

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

@@ -1,169 +1,107 @@
-import {Box, IconButton, Menu, styled, Typography} from '@mui/material'
-import {useState} from 'react'
+import {Box, styled, Typography} from '@mui/material'
 import {Link} from 'react-router-dom'
+import {campxLogoPrimary} from '../../../assets/images'
 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 {AppsIcon} from './icons'
 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)',
+	},
+}))
+
+const StyledLink = styled(Link)(() => ({
+	textDecoration: 'none',
+}))
+
 const imageMap = {
 	ums: collegex,
 	enroll: enrollx,
 	exams: examx,
 	payments: payx,
 	peoplex: peoplex,
-	local: collegex,
+	campx: campxLogoPrimary,
 }
 
-const isDev = process.env.NODE_ENV === 'development'
+interface AppHeaderProps {
+	clientLogo: string
+	username: string
+	profileIcon: string
+	permissions: any
+}
 
-export default function AppHeader({title}: {title?: string}) {
-	const originSubdomain =
-		window.location.origin.split('.')?.slice(-3)[0] ?? 'ums'
-	const currentApp =
-		applications.find((item) => item.key === originSubdomain)?.key ?? 'local'
+const isDev = process.env.NODE_ENV === 'development'
 
+export default function AppHeader({
+	clientLogo = imageMap.campx,
+	username,
+	profileIcon,
+	permissions,
+}: AppHeaderProps) {
 	return (
 		<StyledHeader>
-			<Box sx={{display: 'flex', alignItems: 'center', gap: '20px'}}>
+			<Box sx={{display: 'flex', alignItems: 'center', gap: '10px'}}>
 				<AppsMenu />
-
-				<Link to={'/'}>
-					{title ? (
-						<Typography variant='h1'>{title}</Typography>
-					) : (
-						<StyledImageWrapper>
-							{isDev ? (
-								<img src={imageMap.ums} />
-							) : (
-								<img src={imageMap[currentApp]} />
-							)}
-						</StyledImageWrapper>
-					)}
-				</Link>
+				<AppLogo clientLogo={clientLogo} />
 			</Box>
 			<Box className='actions'>
 				<FreshDeskHelpButton />
 				<Notification />
 				<CogWheelMenu />
-				<UserBox />
+				<UserBox username={username} profileIcon={profileIcon} />
 			</Box>
 		</StyledHeader>
 	)
 }
 
-const AppsMenu = () => {
-	const [anchorEl, setAnchorEl] = useState<any>(null)
-	const open = Boolean(anchorEl)
-
-	const handleClick = (event) => {
-		setAnchorEl(event.currentTarget)
-	}
-
-	const handleClose = () => {
-		setAnchorEl(null)
-	}
+const AppLogo = ({clientLogo}) => {
+	const originSubdomain =
+		window.location.origin.split('.')?.slice(-3)[0] ?? 'ums'
+	const currentApp =
+		applications.find((item) => item.key === originSubdomain)?.key ?? 'local'
 
 	return (
-		<Box sx={{marginRight: '10px'}}>
-			<StyledIconButton onClick={handleClick}>
-				<AppsIcon />
-			</StyledIconButton>
-
-			<Menu
-				elevation={2}
-				id='basic-menu'
-				anchorEl={anchorEl}
-				open={open}
-				onClose={handleClose}
-				MenuListProps={{
-					sx: {
-						padding: 0,
-						margin: 0,
-					},
-				}}
-				anchorOrigin={{
-					vertical: 'bottom',
-					horizontal: 'left',
-				}}
-				transformOrigin={{
-					vertical: 'top',
-					horizontal: 'left',
-				}}
-				sx={{
-					'& .MuiPaper-root': {
-						left: '0px',
-					},
-				}}
-			>
-				<Box sx={{padding: '1rem 1.5rem'}}>
-					<Typography variant='h6'>Switch to</Typography>
-				</Box>
-				<Box>
-					{applications.map((item, index) => (
-						<StyledMenuItemContainer
-							key={index}
-							onClick={() => {
-								window.location.href = item.path
-								handleClose()
+		<StyledLink to={'/'}>
+			<StyledLogosWrapper>
+				<StyledImageWrapper>
+					{isDev ? (
+						<img src={imageMap.campx} />
+					) : (
+						<img src={imageMap[currentApp]} />
+					)}
+				</StyledImageWrapper>
+				<Box
+					sx={{
+						height: '26px',
+						width: '2px',
+						background: 'gray',
+					}}
+				></Box>
+				<StyledImageWrapper>
+					{isDev ? (
+						<Typography variant='h1'>Developer</Typography>
+					) : (
+						<img
+							src={clientLogo}
+							onError={(e: any) => {
+								e.target.src = imageMap.campx
 							}}
-						>
-							<StyledMenuItem data={item} />
-						</StyledMenuItemContainer>
-					))}
-				</Box>
-			</Menu>
-		</Box>
-	)
-}
-
-const StyledMenuItem = ({data}) => {
-	return (
-		<StyledMenuitem>
-			<Box>{data.icon}</Box>
-			<Box>
-				<Typography variant='h1'>{data?.title}</Typography>
-				<StyledDescription>{data?.description}</StyledDescription>
-			</Box>
-		</StyledMenuitem>
+						/>
+					)}
+				</StyledImageWrapper>
+			</StyledLogosWrapper>
+		</StyledLink>
 	)
 }
-
-const StyledIconButton = styled(IconButton)({
-	padding: '20px',
-	backgroundColor: 'black',
-	display: 'flex',
-	alignItems: 'center',
-	justifyContent: 'center',
-	borderRadius: '0px',
-})
-
-const StyledDescription = styled(Typography)(({theme}) => ({
-	fontSize: '15px',
-	fontWeight: 500,
-	color: theme?.palette?.secondary?.main,
-}))
-
-const StyledMenuitem = styled(Box)({
-	height: '72px',
-	width: '400px',
-	padding: '40px 20px',
-	'&:hover': {
-		background: 'rgba(0, 0, 0, 0.03)',
-	},
-	display: 'flex',
-	alignItems: 'center',
-	gap: '10px',
-})
-
-const StyledMenuItemContainer = styled(Box)(({theme}) => ({
-	cursor: 'pointer',
-	borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
-	'&:last-of-type': {
-		border: 'none',
-	},
-}))

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

@@ -0,0 +1,85 @@
+import {Box, Menu, Typography} from '@mui/material'
+import {useState} from 'react'
+import {applications} from './applications'
+import {AppsIcon} from './icons'
+import {
+	StyledDescription,
+	StyledIconButton,
+	StyledMenuItem,
+	StyledMenuItemContainer,
+} from './styles'
+
+const AppsMenu = () => {
+	const [anchorEl, setAnchorEl] = useState<any>(null)
+	const open = Boolean(anchorEl)
+
+	const handleClick = (event) => {
+		setAnchorEl(event.currentTarget)
+	}
+
+	const handleClose = () => {
+		setAnchorEl(null)
+	}
+
+	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: '65px !important',
+					},
+				}}
+			>
+				<Box sx={{padding: '0.3rem 1rem'}}>
+					<Typography variant='body2'>Switch to</Typography>
+				</Box>
+				<Box>
+					{applications.map((item, index) => (
+						<StyledMenuItemContainer
+							key={index}
+							onClick={() => {
+								window.location.href = item.path
+								handleClose()
+							}}
+						>
+							<MenuItem data={item} />
+						</StyledMenuItemContainer>
+					))}
+				</Box>
+			</Menu>
+		</>
+	)
+}
+
+export default AppsMenu
+
+const MenuItem = ({data}) => {
+	return (
+		<StyledMenuItem>
+			<Box height={'20px'}>{data.icon}</Box>
+			<Box>
+				<Typography variant='h1'>{data?.title}</Typography>
+				<StyledDescription>{data?.description}</StyledDescription>
+			</Box>
+		</StyledMenuItem>
+	)
+}

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

@@ -1,51 +1,87 @@
 import {
-  ExitToAppOutlined,
-  HttpsOutlined,
-  PermIdentityOutlined,
+	ExitToAppOutlined,
+	HttpsOutlined,
+	PermIdentityOutlined,
 } from '@mui/icons-material'
-import { Avatar, Typography } from '@mui/material'
-import { useHistory } from '../../../hooks/useRouter'
-import { avatarImage } from '../../../assets/images'
-import { UserStore } from '../../../shared-state/UserStore'
+import {Avatar, Box, CircularProgress, Typography} from '@mui/material'
+import {useHistory} from '../../../hooks/useRouter'
+import {avatarImage} from '../../../assets/images'
 import MenuButton from '../../MenuButton'
-import { StyledUser } from './styles'
+import {StyledUser} from './styles'
+import axios from 'axios'
+import {axiosErrorToast} from '../../../config/axios'
+import {isDevelopment} from '../../../constants/isDevelopment'
+import Cookies from 'js-cookie'
+import {useState} from 'react'
 
-async function logout() {
-  localStorage.removeItem('token')
-  window.location.reload()
-}
+export default function UserBox({
+	username,
+	profileIcon,
+}: {
+	username: string
+	profileIcon: string
+}) {
+	const history = useHistory()
+	const [posting, setPosting] = useState(false)
+
+	async function logout() {
+		if (isDevelopment) {
+			Cookies.remove('campx_session_key')
+			window.location.href = '/'
+			return
+		}
 
-export default function UserBox() {
-  const user = UserStore.useState((s) => s).user
-  const history = useHistory()
+		setPosting(true)
+		axios
+			.post(`${process.env.REACT_APP_API_HOST}/auth/logout`)
+			.then((res) => {
+				setPosting(false)
+				window.location.href = '/'
+			})
+			.catch((err) => {
+				setPosting(false)
+				axiosErrorToast('Unable To Logout.')
+			})
+	}
 
-  return (
-    <MenuButton
-      anchor={
-        <StyledUser>
-          <Avatar src={user?.picture?.url ?? avatarImage} />
-          <Typography variant="h6">{user?.fullName}</Typography>
-        </StyledUser>
-      }
-      menu={[
-        {
-          label: 'Profile',
-          icon: <PermIdentityOutlined />,
-          onClick: () => {
-            history.push('/profile')
-          },
-        },
-        {
-          label: 'Change Password',
-          icon: <HttpsOutlined />,
-          onClick: () => {},
-        },
-        {
-          label: 'Logout',
-          icon: <ExitToAppOutlined />,
-          onClick: logout,
-        },
-      ]}
-    />
-  )
+	return (
+		<MenuButton
+			anchor={
+				<Box minWidth={'80px'} textAlign='center'>
+					{!posting ? (
+						<StyledUser>
+							<Avatar src={profileIcon ?? avatarImage} />
+							<Typography variant='h6'>{username}</Typography>
+						</StyledUser>
+					) : (
+						<CircularProgress
+							size={16}
+							sx={{
+								color: ({palette}) => palette.primary.main,
+							}}
+						/>
+					)}
+				</Box>
+			}
+			menu={[
+				{
+					label: 'Profile',
+					icon: <PermIdentityOutlined />,
+					onClick: () => {
+						history.push('/profile')
+					},
+				},
+				{
+					label: 'Change Password',
+					icon: <HttpsOutlined />,
+					onClick: () => {},
+				},
+				{
+					label: 'Logout',
+					icon: <ExitToAppOutlined />,
+					onClick: logout,
+				},
+			]}
+		/>
+	)
 }

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

@@ -1,7 +1,15 @@
-import {AppBar, Box, ListItemText, styled} from '@mui/material'
+import {
+	AppBar,
+	Box,
+	IconButton,
+	ListItemText,
+	styled,
+	Typography,
+} from '@mui/material'
 
 export const StyledImageWrapper = styled('div')`
-	width: 140px;
+	width: auto;
+	height: 20px;
 	& img {
 		width: 100%;
 		height: 100%;
@@ -27,6 +35,7 @@ export const StyledHeader = styled(Box)(({theme}) => ({
 	alignItems: 'center',
 	justifyContent: 'space-between',
 	'& .actions': {
+		marginRight: '10px',
 		display: 'flex',
 		alignItems: 'center',
 		gap: '14px',
@@ -45,3 +54,39 @@ export const StyledUser = styled(Box)(({theme}) => ({
 		background: theme.palette.secondary.light,
 	},
 }))
+
+export const StyledIconButton = styled(IconButton)({
+	padding: '20px',
+	backgroundColor: 'black',
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	borderRadius: '0px',
+})
+
+export const StyledDescription = styled(Typography)(({theme}) => ({
+	fontSize: '15px',
+	fontWeight: 500,
+	color: theme?.palette?.secondary?.main,
+}))
+
+export const StyledMenuItem = styled(Box)({
+	height: '64px',
+	width: '360px',
+	padding: '20px',
+	transition: 'background ease 0.3s',
+	'&:hover': {
+		background: 'rgba(0, 0, 0, 0.03)',
+	},
+	display: 'flex',
+	alignItems: 'center',
+	gap: '10px',
+})
+
+export const StyledMenuItemContainer = styled(Box)(({theme}) => ({
+	cursor: 'pointer',
+	borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
+	'&:last-of-type': {
+		border: 'none',
+	},
+}))

package/src/components/ModalButtons/DialogButton.tsx

@@ -1,84 +1,85 @@
-import { Close } from '@mui/icons-material'
+import {Close} from '@mui/icons-material'
 import {
-  alpha,
-  Box,
-  ButtonProps,
-  Dialog,
-  DialogProps,
-  IconButton,
-  styled,
-  Typography,
+	alpha,
+	Box,
+	ButtonProps,
+	Dialog,
+	DialogProps,
+	IconButton,
+	styled,
+	Typography,
 } from '@mui/material'
-import { createElement, ReactNode, useState } from 'react'
+import {createElement, ReactNode, useState} from 'react'
 
-const StyledDialogHeader = styled(Box)(({ theme }) => ({
-  height: '64px',
-  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: '0.6rem 1rem',
+const StyledDialogHeader = styled(Box)(({theme}) => ({
+	height: '64px',
+	backgroundColor: alpha(theme.palette.text.secondary, 0.1),
+	display: 'flex',
+	justifyContent: 'space-between',
+	alignItems: 'center',
+	padding: '0.6rem 1rem',
 }))
 
-const StyledDialogContent = styled(Box)(({ theme }) => ({
-  width: '100%',
-  padding: '1rem',
+const StyledDialogContent = styled(Box)(({theme}) => ({
+	width: '100%',
+	padding: '1rem',
 }))
 
 type ContentProps = {
-  close: () => void
+	close: () => void
 }
 
 interface DrawerButtonProps {
-  button: any
-  content: (props: ContentProps) => ReactNode
-  title: string | ReactNode
-  btnTxt?: string | ReactNode
-  btnProps?: ButtonProps
-  dialogProps?: Omit<DialogProps, 'open'>
+	button: any
+	content: (props: ContentProps) => ReactNode
+	title: string | ReactNode
+	btnTxt?: string | ReactNode
+	btnProps?: ButtonProps
+	dialogProps?: Omit<DialogProps, 'open'>
 }
 
 export default function DialogButton({
-  button: Button,
-  content,
-  title,
-  btnTxt,
-  btnProps,
-  dialogProps,
+	button: Button,
+	content,
+	title,
+	btnTxt,
+	btnProps,
+	dialogProps,
 }: DrawerButtonProps) {
-  const [open, setOpen] = useState(false)
+	const [open, setOpen] = useState(false)
 
-  const ButtonEl = (props) => (
-    <Button {...props} {...btnProps}>
-      {btnTxt}
-    </Button>
-  )
+	const ButtonEl = (props) => (
+		<Button {...props} {...btnProps}>
+			{btnTxt}
+		</Button>
+	)
 
-  const MyButton = createElement(ButtonEl, {
-    onClick: () => setOpen(true),
-  })
+	const MyButton = createElement(ButtonEl, {
+		onClick: () => setOpen(true),
+	})
 
-  const onClose = () => {
-    setOpen(false)
-  }
-  return (
-    <>
-      {MyButton}
-      <Dialog
-        PaperProps={{ sx: { borderRadius: '10px' } }}
-        fullWidth
-        onClose={onClose}
-        open={open}
-        {...dialogProps}
-      >
-        <StyledDialogHeader>
-          <Typography fontWeight={600}>{title}</Typography>
-          <IconButton onClick={onClose}>
-            <Close />
-          </IconButton>
-        </StyledDialogHeader>
-        <StyledDialogContent>{content({ close: onClose })}</StyledDialogContent>
-      </Dialog>
-    </>
-  )
+	const onClose = () => {
+		setOpen(false)
+	}
+	return (
+		<>
+			{MyButton}
+			<Dialog
+				PaperProps={{sx: {borderRadius: '10px'}}}
+				fullWidth
+				onClose={onClose}
+				open={open}
+				transitionDuration={200}
+				{...dialogProps}
+			>
+				<StyledDialogHeader>
+					<Typography fontWeight={600}>{title}</Typography>
+					<IconButton onClick={onClose}>
+						<Close />
+					</IconButton>
+				</StyledDialogHeader>
+				<StyledDialogContent>{content({close: onClose})}</StyledDialogContent>
+			</Dialog>
+		</>
+	)
 }

package/src/components/PopupConfirm/PopupConfirm.tsx

@@ -1,33 +1,34 @@
 import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
+	Button,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogTitle,
 } from '@mui/material'
 import useConfirm from './useConfirm'
 
 const PopupConfirm = () => {
-  const { prompt = '', isOpen = false, proceed, cancel } = useConfirm()
-  return (
-    <Dialog
-      sx={{ zIndex: 1600 }}
-      keepMounted
-      maxWidth="sm"
-      fullWidth
-      open={isOpen}
-    >
-      <DialogTitle>Confirm</DialogTitle>
-      <DialogContent sx={{ minHeight: '40px' }}>{prompt}</DialogContent>
-      <DialogActions>
-        <Button variant="contained" color="primary" onClick={proceed}>
-          Ok
-        </Button>
-        <Button color="secondary" variant="outlined" onClick={cancel}>
-          Cancel
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
+	const {prompt = '', isOpen = false, proceed, cancel} = useConfirm()
+	return (
+		<Dialog
+			sx={{zIndex: 1600}}
+			keepMounted
+			maxWidth='sm'
+			fullWidth
+			open={isOpen}
+			transitionDuration={150}
+		>
+			<DialogTitle>Confirm</DialogTitle>
+			<DialogContent sx={{minHeight: '40px'}}>{prompt}</DialogContent>
+			<DialogActions>
+				<Button variant='contained' color='primary' onClick={proceed}>
+					Ok
+				</Button>
+				<Button color='secondary' variant='outlined' onClick={cancel}>
+					Cancel
+				</Button>
+			</DialogActions>
+		</Dialog>
+	)
 }
 export default PopupConfirm

package/src/constants/isDevelopment.ts

@@ -0,0 +1,3 @@
+export const isDevelopment =
+	process.env.NODE_ENV === 'development' ||
+	window.location.origin.split('.').slice(-2).join('.') === 'campx.dev'

package/src/pages/LoginPage/LoginPage.tsx

@@ -1,166 +1,167 @@
-import { Spinner } from '../../components'
-import { useFetch } from '../../hooks'
-import axios from '../../config/axios'
-import { Visibility, VisibilityOff } from '@mui/icons-material'
+import {Spinner} from '../../components'
+import {useFetch} from '../../hooks'
+import {Visibility, VisibilityOff} from '@mui/icons-material'
 import {
-  Alert,
-  Box,
-  IconButton,
-  InputAdornment,
-  Stack,
-  Typography,
+	Alert,
+	Box,
+	IconButton,
+	InputAdornment,
+	Stack,
+	Typography,
 } from '@mui/material'
-import { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { welcomeImage } from '../../assets/images'
+import {useState} from 'react'
+import {useForm} from 'react-hook-form'
+import {welcomeImage} from '../../assets/images'
 import {
-  StyledBanner,
-  StyledBannerFooter,
-  StyledBannerImage,
-  StyledButton,
-  StyledFormSection,
-  StyledLink,
-  StyledMain,
-  StyledTextField,
+	StyledBanner,
+	StyledBannerFooter,
+	StyledBannerImage,
+	StyledButton,
+	StyledFormSection,
+	StyledLink,
+	StyledMain,
+	StyledTextField,
 } from './styles'
-import { useNavigate } from 'react-router-dom'
+import {useNavigate} from 'react-router-dom'
 import Cookies from 'js-cookie'
 import axiosBase from 'axios'
 
 const LoginPage = () => {
-  const { loading, data: assets } = useFetch('/assets')
+	const {loading, data: assets} = useFetch('/assets')
 
-  if (loading) {
-    return <Spinner />
-  }
+	if (loading) {
+		return <Spinner />
+	}
 
-  return (
-    <>
-      <StyledMain>
-        <StyledBanner>
-          <StyledBannerImage>
-            <img src={welcomeImage} alt="login-banner" />
-          </StyledBannerImage>
-          <StyledBannerFooter>
-            <div className="logo">
-              <Typography variant="body1">Powered By</Typography>
-              <img
-                src={
-                  'https://campx-logos.s3.ap-south-1.amazonaws.com/CampX.png'
-                }
-                alt="login-banner"
-              />
-            </div>
-            <div className="copyright">
-              <Typography variant="subtitle1">
-                &#169; All Rights reserved to CampX Edutech Pvt. Ltd., 2022
-              </Typography>
-            </div>
-          </StyledBannerFooter>
-        </StyledBanner>
-        <StyledFormSection>
-          <Box width={'100%'}>
-            <Box
-              sx={{
-                display: 'flex',
-                justifyContent: 'center',
-                marginBottom: '54px',
-              }}
-            >
-              <img
-                src={assets?.logo}
-                style={{
-                  width: '200px',
-                }}
-              />
-            </Box>
-            <LoginForm />
-          </Box>
-        </StyledFormSection>
-      </StyledMain>
-      <StyledLink
-        style={{
-          textAlign: 'right',
-          display: 'block',
-          position: 'absolute',
-          top: '20px',
-          right: '20px',
-        }}
-        href="/results/search"
-      >
-        Student Results
-      </StyledLink>
-    </>
-  )
+	return (
+		<>
+			<StyledMain>
+				<StyledBanner>
+					<StyledBannerImage>
+						<img src={welcomeImage} alt='login-banner' />
+					</StyledBannerImage>
+					<StyledBannerFooter>
+						<div className='logo'>
+							<Typography variant='body1'>Powered By</Typography>
+							<img
+								src={
+									'https://campx-logos.s3.ap-south-1.amazonaws.com/CampX.png'
+								}
+								alt='login-banner'
+							/>
+						</div>
+						<div className='copyright'>
+							<Typography variant='subtitle1'>
+								&#169; All Rights reserved to CampX Edutech Pvt. Ltd., 2022
+							</Typography>
+						</div>
+					</StyledBannerFooter>
+				</StyledBanner>
+				<StyledFormSection>
+					<Box width={'100%'}>
+						<Box
+							sx={{
+								display: 'flex',
+								justifyContent: 'center',
+								marginBottom: '54px',
+							}}
+						>
+							<img
+								src={assets?.logo}
+								style={{
+									width: '200px',
+								}}
+							/>
+						</Box>
+						<LoginForm />
+					</Box>
+				</StyledFormSection>
+			</StyledMain>
+			<StyledLink
+				style={{
+					textAlign: 'right',
+					display: 'block',
+					position: 'absolute',
+					top: '20px',
+					right: '20px',
+				}}
+				href='/results/search'
+			>
+				Student Results
+			</StyledLink>
+		</>
+	)
 }
 
 export default LoginPage
 
 export function LoginForm() {
-  const [showPassword, setShowPassword] = useState(false)
-  const { handleSubmit, control } = useForm()
-  const [error, setError] = useState('')
+	const [showPassword, setShowPassword] = useState(false)
+	const {handleSubmit, control} = useForm()
+	const [error, setError] = useState('')
 
-  const onSubmit = async (values) => {
-    try {
-      const res = await axiosBase.post(
-        `https://auth-api.campx.in/auth/login`,
-        values,
-      )
-      Cookies.set('campx_session_key', res.data.cookie)
-      window.location.href = '/'
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.log(err)
-      setError(err.response.data.message ?? 'Server Error')
-    }
-  }
+	const onSubmit = async (values) => {
+		try {
+			const res = await axiosBase({
+				baseURL: process.env.REACT_APP_API_URL,
+				url: '/auth/login',
+				data: {
+					values,
+				},
+			})
+			Cookies.set('campx_session_key', res.data.cookie)
+			window.location.href = '/'
+		} catch (err) {
+			// eslint-disable-next-line no-console
+			console.log(err)
+			setError(err.response.data.message ?? 'Server Error')
+		}
+	}
 
-  return (
-    <Box sx={{ maxWidth: '500px' }} margin="0 auto" padding={'0 1rem'}>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Stack gap={'40px'}>
-          <Box>
-            <StyledTextField
-              size="medium"
-              control={control}
-              name="username"
-              label="User ID"
-              required
-            />
-          </Box>
-          <Box>
-            <StyledTextField
-              control={control}
-              name="password"
-              label="Password"
-              type={showPassword ? 'text' : 'password'}
-              required
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <IconButton
-                      size="small"
-                      aria-label="toggle password visibility"
-                      onClick={() => setShowPassword((prev) => !prev)}
-                      edge="end"
-                    >
-                      {showPassword ? <VisibilityOff /> : <Visibility />}
-                    </IconButton>
-                  </InputAdornment>
-                ),
-              }}
-            />
-          </Box>
-          <StyledButton type="submit">Login</StyledButton>
-        </Stack>
-      </form>
-      {error && (
-        <Alert severity="error" sx={{ marginTop: '20px' }}>
-          {error}
-        </Alert>
-      )}
-    </Box>
-  )
+	return (
+		<Box sx={{maxWidth: '500px'}} margin='0 auto' padding={'0 1rem'}>
+			<form onSubmit={handleSubmit(onSubmit)}>
+				<Stack gap={'40px'}>
+					<Box>
+						<StyledTextField
+							size='medium'
+							control={control}
+							name='username'
+							label='User ID'
+							required
+						/>
+					</Box>
+					<Box>
+						<StyledTextField
+							control={control}
+							name='password'
+							label='Password'
+							type={showPassword ? 'text' : 'password'}
+							required
+							InputProps={{
+								endAdornment: (
+									<InputAdornment position='end'>
+										<IconButton
+											size='small'
+											aria-label='toggle password visibility'
+											onClick={() => setShowPassword((prev) => !prev)}
+											edge='end'
+										>
+											{showPassword ? <VisibilityOff /> : <Visibility />}
+										</IconButton>
+									</InputAdornment>
+								),
+							}}
+						/>
+					</Box>
+					<StyledButton type='submit'>Login</StyledButton>
+				</Stack>
+			</form>
+			{error && (
+				<Alert severity='error' sx={{marginTop: '20px'}}>
+					{error}
+				</Alert>
+			)}
+		</Box>
+	)
 }
-

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

@@ -1,6 +0,0 @@
-export default function MainAppHeader() {
-  return (
-    // <div>MainAppHeader</div
-    <></>
-  )
-}