@campxdev/shared 1.0.4 → 1.1.0

package/src/components/Layout/ChangePassword.tsx

@@ -1,49 +1,49 @@
-import { Button, Stack } from '@mui/material'
-import { useForm } from 'react-hook-form'
-import { toast } from 'react-toastify'
-import { FormTextField } from '..'
-import axios, { axiosErrorToast } from '../../config/axios'
-
-export default function ChangePassword({ close }) {
-  const { handleSubmit, control } = useForm()
-
-  const onSubmit = async (formData) => {
-    try {
-      await axios.post('/auth/change-password', formData)
-      toast.success('Password Changed Successfully')
-    } catch (error) {
-      axiosErrorToast(error)
-    }
-  }
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Stack gap={2}>
-        <FormTextField
-          label="Old Password"
-          control={control}
-          name="oldPassword"
-          required
-        />
-        <FormTextField
-          label="New Password"
-          control={control}
-          name="newPassword"
-          required
-        />
-        <FormTextField
-          label="Confirm Password"
-          control={control}
-          name="password"
-          required
-        />
-        <Stack>
-          <Button variant="outlined" onClick={close}>
-            Cancel
-          </Button>
-          <Button type="submit">Submit</Button>
-        </Stack>
-      </Stack>
-    </form>
-  )
-}
+import { Button, Stack } from '@mui/material'
+import { useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { FormTextField } from '..'
+import axios, { axiosErrorToast } from '../../config/axios'
+
+export default function ChangePassword({ close }) {
+  const { handleSubmit, control } = useForm()
+
+  const onSubmit = async (formData) => {
+    try {
+      await axios.post('/auth/change-password', formData)
+      toast.success('Password Changed Successfully')
+    } catch (error) {
+      axiosErrorToast(error)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Stack gap={2}>
+        <FormTextField
+          label="Old Password"
+          control={control}
+          name="oldPassword"
+          required
+        />
+        <FormTextField
+          label="New Password"
+          control={control}
+          name="newPassword"
+          required
+        />
+        <FormTextField
+          label="Confirm Password"
+          control={control}
+          name="password"
+          required
+        />
+        <Stack>
+          <Button variant="outlined" onClick={close}>
+            Cancel
+          </Button>
+          <Button type="submit">Submit</Button>
+        </Stack>
+      </Stack>
+    </form>
+  )
+}

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

@@ -1,124 +1,124 @@
-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,
-  commutex,
-  enrollx,
-  examx,
-  hostelx,
-  payx,
-  peoplex,
-} from './assets'
-
-import CogWheelMenu from './CogWheelMenu'
-import HelpWidget from './HelpWidget/HelpWidget'
-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,
-  people: peoplex,
-  campx: collegex,
-  commute: commutex,
-  hostel: hostelx,
-}
-
-interface AppHeaderProps {
-  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 = [],
-}: AppHeaderProps) {
-  return (
-    <StyledHeader>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-        <AppsMenu />
-        <AppLogo clientLogo={clientLogo} />
-      </Box>
-      <Box className="actions">
-        <HelpWidget />
-        {/* <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'
-
-  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>
-  )
-}
+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,
+  commutex,
+  enrollx,
+  examx,
+  hostelx,
+  payx,
+  peoplex,
+} from './assets'
+
+import CogWheelMenu from './CogWheelMenu'
+import HelpWidget from './HelpWidget/HelpWidget'
+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,
+  people: peoplex,
+  campx: collegex,
+  commute: commutex,
+  hostel: hostelx,
+}
+
+interface AppHeaderProps {
+  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 = [],
+}: AppHeaderProps) {
+  return (
+    <StyledHeader>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+        <AppsMenu />
+        <AppLogo clientLogo={clientLogo} />
+      </Box>
+      <Box className="actions">
+        <HelpWidget />
+        {/* <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'
+
+  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 {
-  StyledDescription,
-  StyledIconButton,
-  StyledMenuItem,
-  StyledMenuItemContainer,
-  StyledLink,
-} 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: '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>
-  )
-}
+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,
+} 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: '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>
+  )
+}

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 MenuButton from '../../MenuButton'
-
-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',
-        },
-      }}
-    />
-  )
-}
-
-export default CogWheelMenu
+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()
+
+  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