@campxdev/shared 1.11.6 → 1.11.7-0.alpha-22

package/src/components/HookForm/SingleSelect.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { ReactNode } from 'react'
 import { Controller } from 'react-hook-form'
 import { SingleSelect } from '../Input'
@@ -9,7 +9,7 @@ type Props = {
   options: Array<{ label: ReactNode; value: any }>
   firstItemEmpty?: boolean
   onOpen?: (e: any) => void
-} & SelectProps
+} & BaseSelectProps
 
 export default function FormSingleSelect(props: Props) {
   const {

package/src/components/ImageUpload.tsx

@@ -2,6 +2,7 @@ import { InsertPhotoOutlined } from '@mui/icons-material'
 import { styled, Typography } from '@mui/material'
 import { ReactNode, useRef, useState } from 'react'
 import axios, { axiosErrorToast } from '../config/axios'
+import { useErrorModal } from './ErrorModalWrapper/ErrorModalWrapper'
 
 interface ImageUploadProps {
   onFileUploaded: (v) => void
@@ -17,6 +18,7 @@ export default function ImageUpload({
   loadingState,
   postBody = {},
 }: ImageUploadProps) {
+  const errorModal = useErrorModal()
   const [loading, setLoading] = useState(false)
   const ref = useRef<HTMLInputElement>(null)
 
@@ -47,7 +49,8 @@ export default function ImageUpload({
         .catch((err) => {
           setLoading(false)
           loadingState && setLoading(false)
-          axiosErrorToast(err)
+          // axiosErrorToast(err)
+          errorModal({ error: err })
         })
     }
   }

package/src/components/Input/MultiSelect.tsx

@@ -90,6 +90,7 @@ interface MultiSelectProps {
   limitTags?: number
   onOpen?: (e: any) => void
   noOptionsText?: string
+  size?: any
 }
 export default function MultiSelect({
   name,

package/src/components/Input/SearchSingleSelect.tsx

@@ -87,7 +87,7 @@ export const SearchSingleSelect = ({ options, value, onChange }: Props) => {
           <TextField
             inputRef={(input) => {
               if (input && value) {
-                input.style.width = `${value.label.length * 9}px`
+                input.style.width = `${value.label?.length * 9}px`
               }
             }}
             InputProps={{

package/src/components/Input/SingleSelect.tsx

@@ -1,13 +1,13 @@
-import { ArrowDownward, KeyboardArrowDown } from '@mui/icons-material'
+import { KeyboardArrowDown } from '@mui/icons-material'
 import {
+  BaseSelectProps,
+  Box,
+  BoxProps,
   FormControl,
+  FormHelperText,
   MenuItem,
-  SelectProps,
-  styled,
   Select,
-  FormHelperText,
-  Box,
-  BoxProps,
+  styled,
 } from '@mui/material'
 import { ReactNode } from 'react'
 import FormLabel from './FormLabel'
@@ -55,7 +55,7 @@ type Props = {
   helperText?: string
   containerProps?: BoxProps
   onOpen?: (e: any) => void
-} & SelectProps
+} & BaseSelectProps
 
 export default function SingleSelect({
   name = 'select',

package/src/components/Institutions/InsititutionsDialog.tsx

@@ -12,7 +12,7 @@ export default function InstitutionsDialog({ close }) {
 
   return (
     <Box sx={{ padding: '20px' }}>
-      <Typography variant="h3" textAlign={'center'}>
+      <Typography variant="h6" textAlign={'center'}>
         Select an Institution
       </Typography>
       <TextField
@@ -46,7 +46,7 @@ const InstitutionCard = ({ institution }) => {
         alt="logo"
         height={'100px'}
         width="100%"
-        src={institution?.images?.url}
+        src={institution?.imageSquare?.url}
       />
       <Typography variant="body2">{institution?.name}</Typography>
     </StyledInstitutionCard>

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

@@ -13,6 +13,7 @@ import {
   peoplex,
 } from './assets'
 
+import { campxLogoPrimary } from '../../../assets/images'
 import HeaderActions from './HeaderActions/HeaderActions'
 import {
   StyledHeader,
@@ -30,32 +31,45 @@ const imageMap = {
   campx: collegex,
   commute: commutex,
   hostel: hostelx,
+  admin: campxLogoPrimary,
 }
 
 interface AppHeaderProps {
   clientLogo: string
   fullName: string
+  profileUrl?: string
+  showMenu?: boolean
+  actions?: ReactNode[]
   userBoxActions: {
     label: ReactNode
     icon?: ReactNode
     onClick: any
   }[]
   customHeaderActions?: ReactNode
+  headerSx?: any
+  imageSx?: any
+  profileSx?: any
   cogWheelMenu?: { label: string; path: string; openNewTab?: boolean }[]
 }
 
 export default function AppHeader({
   clientLogo = imageMap.campx,
+  showMenu = true,
   fullName,
   userBoxActions = [],
   cogWheelMenu = [],
   customHeaderActions,
+  profileUrl,
+  actions = [],
+  headerSx = {},
+  profileSx = {},
+  imageSx = {},
 }: AppHeaderProps) {
   return (
-    <StyledHeader>
+    <StyledHeader sx={headerSx}>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-        <AppsMenu />
-        <AppLogo clientLogo={clientLogo} />
+        {showMenu && <AppsMenu />}
+        <AppLogo clientLogo={clientLogo} imageSx={imageSx} />
       </Box>
       <Box className="actions">
         {customHeaderActions ? (
@@ -65,6 +79,9 @@ export default function AppHeader({
             cogWheelMenu={cogWheelMenu}
             fullName={fullName}
             userBoxActions={userBoxActions}
+            profileUrl={profileUrl}
+            actions={actions}
+            profileSx={profileSx}
           />
         )}
       </Box>
@@ -72,16 +89,16 @@ export default function AppHeader({
   )
 }
 
-const AppLogo = ({ clientLogo }) => {
+const AppLogo = ({ clientLogo, imageSx }) => {
   const originSubdomain = window.location.host.split('.')?.slice(-3)[0] ?? 'ums'
   const currentApp =
     applications.find((item) => item.domainName === originSubdomain)
-      ?.domainName ?? 'campx'
+      ?.domainName ?? 'admin'
 
   return (
     <StyledRouterLink to={'/'}>
       <StyledLogosWrapper>
-        <StyledImageWrapper>
+        <StyledImageWrapper sx={imageSx}>
           <img src={imageMap[currentApp]} />
         </StyledImageWrapper>
         <Box

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

@@ -1,6 +1,6 @@
-import { SettingsOutlined } from '@mui/icons-material'
 import { IconButton } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
+import { clogWheel } from '../../../../assets/images'
 import DropDownButton from '../../../DropDownButton/DropDownButton'
 
 const CogWheelMenu = ({ menu }) => {
@@ -10,7 +10,7 @@ const CogWheelMenu = ({ menu }) => {
     <DropDownButton
       anchor={({ open }) => (
         <IconButton color="secondary" onClick={open}>
-          <SettingsOutlined />
+          <img src={clogWheel.default} alt="Settings" />
         </IconButton>
       )}
       menu={menu?.map((item) => ({

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

@@ -1,31 +1,56 @@
-import { Box, IconButton, styled } from '@mui/material'
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
+import { IconButton, Stack } from '@mui/material'
+import { ReactNode } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { IMenuItemProps } from '../../../DropDownButton/DropdownMenuItem'
 import InstitutionsDropDown from '../../../Institutions/InstitutionsDropdown'
 import CogWheelMenu from './CogWheelMenu'
 import UserBox from './UserBox'
-const StyledBeamedBox = styled(Box)(() => ({
-  width: '60px',
-}))
+
+const profileMenu = [
+  { label: 'Student Results', path: '/results' },
+  { label: 'Careers', path: '/careers' },
+]
 
 export default function HeaderActions({
   cogWheelMenu,
   fullName,
   userBoxActions,
+  profileUrl = '',
+  actions = [],
+  profileSx = {},
+}: {
+  cogWheelMenu?: any[]
+  fullName: string
+  userBoxActions: IMenuItemProps[] | []
+  profileUrl: string
+  actions?: ReactNode[]
+  profileSx?: any
 }) {
+  const navigate = useNavigate()
   return (
-    <>
+    <Stack direction="row" gap={6}>
       <InstitutionsDropDown />
       {/* <SearchButton /> */}
       {/* <FreshDeskHelpButton /> */}
-      <StyledBeamedBox></StyledBeamedBox>
-      <IconButton
-        href={'https://campx.atlassian.net/servicedesk/customer/portal/2'}
-        target="_blank"
-        sx={{ color: 'black', padding: '0px' }}
-      >
-        Help ?
-      </IconButton>
-      {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
-      <UserBox fullName={fullName} actions={userBoxActions} />
-    </>
+      <Stack direction="row" gap={2}>
+        <IconButton
+          href={'https://campx.atlassian.net/servicedesk/customer/portal/2'}
+          target="_blank"
+          sx={{ color: 'black', padding: '0px' }}
+        >
+          <HelpOutlineIcon />
+        </IconButton>
+
+        {actions.map((action, index) => action)}
+        {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
+        <UserBox
+          fullName={fullName}
+          actions={userBoxActions}
+          profileUrl={profileUrl}
+          profileSx={profileSx}
+        />
+      </Stack>
+    </Stack>
   )
 }

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

@@ -1,6 +1,13 @@
-import { ExitToAppOutlined, HttpsOutlined, Person } from '@mui/icons-material'
 import { useNavigate } from 'react-router-dom'
+import {
+  activeDevices,
+  changePassword,
+  logoutIcon,
+  profile,
+} from '../../../../assets/images'
+
 import logout from '../../../../utils/logout'
+import ActiveDevices from '../../../ActiveDevices'
 import ChangePassword from '../../../ChangePassword'
 import DropDownButton from '../../../DropDownButton/DropDownButton'
 import { IMenuItemProps } from '../../../DropDownButton/DropdownMenuItem'
@@ -19,16 +26,20 @@ export default function UserBox({
   fullName,
   actions,
   customActions = [],
+  profileUrl,
+  profileSx = {},
 }: {
   fullName: string
   actions: IMenuItemProps[] | []
   customActions?: IMenuItemProps[] | []
+  profileUrl?: string
+  profileSx?: any
 }) {
   const navigate = useNavigate()
   return (
     <DropDownButton
       anchor={({ open }) => (
-        <StyledAvatar onClick={open}>
+        <StyledAvatar src={profileUrl ?? ''} onClick={open} sx={profileSx}>
           {getStartingLetters(fullName)}
         </StyledAvatar>
       )}
@@ -40,7 +51,9 @@ export default function UserBox({
               {
                 label: 'My Profile',
                 actionType: 'dialog',
-                icon: <Person />,
+                icon: (
+                  <img style={{ marginRight: '10px' }} src={profile.default} />
+                ),
                 content: ({ close }) => <MyProfile close={close} />,
                 dialogProps: {
                   maxWidth: 'xl',
@@ -51,17 +64,46 @@ export default function UserBox({
                   },
                 },
               },
-
+              {
+                label: 'Active Devices',
+                actionType: 'dialog',
+                icon: (
+                  <img
+                    style={{ marginRight: '10px' }}
+                    src={activeDevices.default}
+                  />
+                ),
+                content: ({ close }) => <ActiveDevices close={close} />,
+                contentTitle: 'Active Devices',
+                dialogProps: {
+                  maxWidth: 'lg',
+                  PaperProps: {
+                    sx: {
+                      padding: 0,
+                    },
+                  },
+                },
+              },
               {
                 label: 'Change Password',
                 actionType: 'dialog',
-                icon: <HttpsOutlined />,
+                icon: (
+                  <img
+                    style={{ marginRight: '10px' }}
+                    src={changePassword.default}
+                  />
+                ),
                 content: ({ close }) => <ChangePassword close={close} />,
                 contentTitle: 'Change Password',
               },
               {
                 label: 'Logout',
-                icon: <ExitToAppOutlined />,
+                icon: (
+                  <img
+                    style={{ marginRight: '10px' }}
+                    src={logoutIcon.default}
+                  />
+                ),
                 onClick: logout,
               },
             ]

package/src/components/Layout/Header/applications.ts

@@ -1,3 +1,4 @@
+import { campxLogoSquare } from '../../../assets/images'
 import { isDevelopment } from '../../../constants'
 import {
   campxSquareSmall,
@@ -10,14 +11,22 @@ import {
 } from './assets'
 
 const origins = {
-  ums: {
-    dev: 'https://ums.campx.dev',
-    prod: 'https://ums.campx.in',
+  admin: {
+    dev: 'https://admin.campx.dev',
+    prod: 'https://admin.campx.in',
+  },
+  enroll: {
+    dev: 'https://enroll.campx.dev',
+    prod: 'https://enroll.campx.in',
   },
   payments: {
     dev: 'https://payments.campx.dev',
     prod: 'https://payments.campx.in',
   },
+  ums: {
+    dev: 'https://ums.campx.dev',
+    prod: 'https://ums.campx.in',
+  },
   exams: {
     dev: 'https://exams.campx.dev',
     prod: 'https://exams.campx.in',
@@ -34,13 +43,34 @@ const origins = {
     dev: 'https://commute.campx.dev',
     prod: 'https://commute.campx.in',
   },
-  enroll: {
-    dev: 'https://enroll.campx.dev',
-    prod: 'https://enroll.campx.in',
-  },
 }
 
 export const applications = [
+  {
+    title: 'Admin',
+    path: isDevelopment ? origins.admin.dev : origins.admin.prod,
+    icon: campxLogoSquare,
+    key: 'admin',
+    domainName: 'admin',
+    description: 'Manage Complete Campus Root Configuration',
+  },
+
+  {
+    title: 'EnrollX',
+    key: 'enroll_x',
+    domainName: 'enroll',
+    path: isDevelopment ? origins.enroll.dev : origins.enroll.prod,
+    icon: enrollSmall,
+    description: 'Manage Admissions in the Campus',
+  },
+  {
+    title: 'PayX',
+    key: 'payments',
+    domainName: 'payments',
+    path: isDevelopment ? origins.payments.dev : origins.payments.prod,
+    icon: paySmall,
+    description: 'Manage Payments in the Campus',
+  },
   {
     title: 'CollegeX',
     path: isDevelopment ? origins.ums.dev : origins.ums.prod,
@@ -58,20 +88,12 @@ export const applications = [
     description: 'Manage all Examinations in the Campus',
   },
   {
-    title: 'PayX',
-    key: 'payments',
-    domainName: 'payments',
-    path: isDevelopment ? origins.payments.dev : origins.payments.prod,
-    icon: paySmall,
-    description: 'Manage Payments in the Campus',
-  },
-  {
-    title: 'EnrollX',
-    key: 'enroll_x',
-    domainName: 'enroll',
-    path: isDevelopment ? origins.enroll.dev : origins.enroll.prod,
-    icon: enrollSmall,
-    description: 'Manage Admissions in the Campus',
+    title: 'PeopleX',
+    key: 'hrms',
+    domainName: 'people',
+    path: isDevelopment ? origins.people.dev : origins.people.prod,
+    icon: peopleSmall,
+    description: 'Manage People in the Campus',
   },
   {
     title: 'HostelX',
@@ -89,13 +111,4 @@ export const applications = [
     icon: commuteSmall,
     description: 'Manage Commute in the Campus',
   },
-
-  {
-    title: 'PeopleX',
-    key: 'hrms',
-    domainName: 'people',
-    path: isDevelopment ? origins.people.dev : origins.people.prod,
-    icon: peopleSmall,
-    description: 'Manage People in the Campus',
-  },
 ]

package/src/components/Layout/LayoutWrapper.tsx

@@ -1,7 +1,11 @@
+import MenuIcon from '@mui/icons-material/Menu'
+import { Drawer, IconButton, styled } from '@mui/material'
+import { useState } from 'react'
 import {
   StyledLeftNavContainer,
   StyledMainContentContainer,
 } from '../../layouts/Components/styles'
+import { PermissionsStore } from '../../shared-state'
 import ErrorBoundary from '../ErrorBoundary'
 import SideNav from './SideNav'
 interface Props {
@@ -15,14 +19,88 @@ export default function LayoutWrapper({
   menu,
   sideMenuHeader,
 }: Props) {
+  const permissions = PermissionsStore.useState()
+
+  const [open, setOpen] = useState<boolean>(false)
+
+  const handleDrawer = () => {
+    console.log('hi')
+    setOpen(!open)
+  }
   return (
     <ErrorBoundary>
-      <StyledLeftNavContainer>
-        <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
-      </StyledLeftNavContainer>
-      <StyledMainContentContainer>
+      {window.innerWidth > 1024 && !permissions.isHomePageEnabled && (
+        <StyledLeftNavContainer>
+          <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
+        </StyledLeftNavContainer>
+      )}
+
+      <StyledMainContentContainer
+        style={{
+          width: permissions.isHomePageEnabled
+            ? 'inherit'
+            : 'calc(100% - 220px)',
+          position: permissions.isHomePageEnabled ? 'unset' : 'fixed',
+          marginTop: permissions.isHomePageEnabled ? '10px' : '0px',
+          borderRadius: permissions.isHomePageEnabled ? '10px' : '0px',
+          border: permissions.isHomePageEnabled ? '1px solid #1212' : 'none',
+          height: permissions.isHomePageEnabled
+            ? 'calc(100vh - 74px)'
+            : 'calc(100vh - 64px)',
+        }}
+      >
+        {window.innerWidth < 1024 && (
+          <>
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              onClick={handleDrawer}
+              edge="start"
+              sx={{ mr: 0.5 }}
+            >
+              <MenuIcon />
+            </IconButton>
+            {/* <Button
+            onClick={() => {
+              console.log('hi')
+            }}
+            // edge="start"
+            // sx={{ mr: 0.5 }}
+          >
+            <MenuIcon />
+          </Button> */}
+            <StyledDrawer
+              variant={'temporary'}
+              anchor="left"
+              open={open}
+              onClose={handleDrawer}
+            >
+              <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
+            </StyledDrawer>
+          </>
+        )}
         <ErrorBoundary>{children}</ErrorBoundary>
       </StyledMainContentContainer>
     </ErrorBoundary>
   )
 }
+
+const drawerWidth: number = 240
+
+export const StyledDrawer = styled(Drawer)(() => ({
+  width: drawerWidth,
+  flexShrink: 0,
+  '& .MuiDrawer-paper': {
+    width: drawerWidth,
+    boxSizing: 'border-box',
+    position: 'unset',
+    transition: 'none !important',
+    borderRight: 'none !important',
+    borderRadius: '5px',
+  },
+  ['@media (max-width: 1024px)']: {
+    '& .MuiDrawer-paper': {
+      borderRadius: '0px',
+    },
+  },
+}))