@campxdev/shared 1.11.72 → 2.0.0

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.11.72",
+  "version": "2.0.0",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",
     "dev": "react-scripts start",
     "build": "CI=false && react-scripts build",
-    "prepublish": "npm run build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint ./src/**/*.{js,jsx,ts,tsx,json}",
@@ -31,34 +30,33 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^2.9.10",
-    "@mui/icons-material": "^5.15.18",
+    "@mongodb-js/charts-embed-dom": "3.2.1",
+    "@mui/icons-material": "^5.15.20",
     "@mui/lab": "^5.0.0-alpha.146",
-    "@mui/material": "^5.15.18",
+    "@mui/material": "^5.15.20",
     "@mui/x-date-pickers": "^6.16.0",
-    "axios": "^0.27.2",
+    "axios": "^1.7.2",
     "date-fns": "^2.28.0",
     "date-fns-tz": "^2.0.0",
     "device-detector-js": "^3.0.3",
     "fuse.js": "^6.6.2",
-    "js-cookie": "^3.0.1",
+    "js-cookie": "^3.0.5",
     "moment": "^2.29.4",
     "pullstate": "^1.24.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-arrows": "^1.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-error-boundary": "^3.1.4",
     "react-flatpickr": "^3.10.13",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.40.0",
     "react-joyride": "^2.5.5",
-    "react-query": "^3.39.0",
-    "react-router-dom": "^6.4.2",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.23.1",
     "react-table": "^7.8.0",
     "react-toastify": "^9.0.1",
     "styled-components": "^5.3.5",
-    "@mongodb-js/charts-embed-dom": "3.2.1",
     "swiper": "^8.1.5",
-    "typescript": "^5.2.2",
     "use-immer": "^0.8.1",
     "yup": "^0.32.11"
   },
@@ -73,9 +71,10 @@
     "@storybook/preset-create-react-app": "^4.0.0",
     "@storybook/react": "^6.5.14",
     "@storybook/testing-library": "^0.0.13",
-    "@types/js-cookie": "^3.0.2",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^18.11.8",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-flatpickr": "^3.8.8",
     "@types/react-helmet": "^6.1.6",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
@@ -89,7 +88,8 @@
     "eslint-plugin-storybook": "^0.6.8",
     "prettier": "^2.5.0",
     "react-scripts": "^5.0.1",
-    "storybook-addon-react-router-v6": "^0.2.1"
+    "storybook-addon-react-router-v6": "^0.2.1",
+    "typescript": "^5.5.2"
   },
   "resolutions": {
     "react-dev-utils/fork-ts-checker-webpack-plugin": "^6.5.3",

package/src/components/Image/Image.tsx

@@ -1,14 +1,16 @@
 import { Box } from '@mui/material'
+import { ReactElement } from 'react'
 const brokenImage = require('./broken-image.png')
 
 interface ImageProps {
-  src: string
+  src: string | ReactElement
   alt: string
   height: string | number
   width: string | number
   fit?: 'cover' | 'contain' | 'fill'
   radius?: string | number
   defaultImage?: any
+  svg?: boolean
 }
 
 export default function Image({
@@ -19,6 +21,7 @@ export default function Image({
   fit = 'contain',
   radius = '10px',
   defaultImage = null,
+  svg = false,
 }: ImageProps) {
   return (
     <Box

package/src/components/Institutions/InstitutionsDropdown.tsx

@@ -1,4 +1,3 @@
-import Cookies from 'js-cookie'
 import { urlTenantKey } from '../../contexts/Providers'
 import { InstitutionsStore } from '../../shared-state/InstitutionsStore'
 import { SearchSingleSelect } from '../Input/SearchSingleSelect'
@@ -9,7 +8,6 @@ export default function SchoolSwitch() {
   const handleChange = (value) => {
     if (value) {
       localStorage.setItem('institution_key', value?.value)
-      Cookies.set('campx_institution', value?.value)
       window.location.replace(
         `${window.location.origin}/${urlTenantKey}/${value?.value}`,
       )

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

@@ -66,26 +66,28 @@ export default function AppHeader({
   imageSx = {},
 }: AppHeaderProps) {
   return (
-    <StyledHeader sx={headerSx}>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-        {showMenu && <AppsMenu />}
-        <AppLogo clientLogo={clientLogo} imageSx={imageSx} />
-      </Box>
-      <Box className="actions">
-        {customHeaderActions ? (
-          customHeaderActions
-        ) : (
-          <HeaderActions
-            cogWheelMenu={cogWheelMenu}
-            fullName={fullName}
-            userBoxActions={userBoxActions}
-            profileUrl={profileUrl}
-            actions={actions}
-            profileSx={profileSx}
-          />
-        )}
-      </Box>
-    </StyledHeader>
+    <>
+      <StyledHeader sx={headerSx}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+          {showMenu && <AppsMenu />}
+          <AppLogo clientLogo={clientLogo} imageSx={imageSx} />
+        </Box>
+        <Box className="actions">
+          {customHeaderActions ? (
+            customHeaderActions
+          ) : (
+            <HeaderActions
+              cogWheelMenu={cogWheelMenu}
+              fullName={fullName}
+              userBoxActions={userBoxActions}
+              profileUrl={profileUrl}
+              actions={actions}
+              profileSx={profileSx}
+            />
+          )}
+        </Box>
+      </StyledHeader>
+    </>
   )
 }
 
@@ -103,14 +105,14 @@ const AppLogo = ({ clientLogo, imageSx }) => {
         </StyledImageWrapper>
         <Box
           sx={{
-            height: '26px',
+            height: '36px',
             width: '2px',
             background: 'gray',
           }}
         ></Box>
         <StyledImageWrapper>
           {isDevelopment ? (
-            <Typography variant="h1">Developer</Typography>
+            <Typography variant="h1">Developer </Typography>
           ) : (
             <img
               src={clientLogo}

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

@@ -57,7 +57,7 @@ const AppsMenu = () => {
         sx={{
           '& .MuiPaper-root': {
             left: '0 !important',
-            top: '64px !important',
+            top: '96px !important',
             '&>:last-child': {
               paddingBottom: '0px',
             },

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

@@ -1,19 +1,19 @@
 import {
-  alpha,
   AppBar,
+  Avatar,
   Box,
   IconButton,
+  Link,
   ListItemText,
-  styled,
   Typography,
-  Link,
-  Avatar,
+  alpha,
+  styled,
 } from '@mui/material'
 import { Link as RouterLink } from 'react-router-dom'
 
 export const StyledImageWrapper = styled('div')`
   width: auto;
-  height: 24px;
+  height: 34px;
   & img {
     width: 100%;
     height: 100%;
@@ -36,6 +36,7 @@ export const StyledHeader = styled(Box)(({ theme }) => ({
   backgroundColor: 'white',
   display: 'flex',
   alignItems: 'center',
+  height: '96px',
   justifyContent: 'space-between',
   '& .actions': {
     marginRight: '20px',

package/src/components/Layout/LayoutWrapper.tsx

@@ -1,5 +1,4 @@
-import MenuIcon from '@mui/icons-material/Menu'
-import { Drawer, IconButton, styled } from '@mui/material'
+import { Drawer, Stack, styled } from '@mui/material'
 import { useState } from 'react'
 import {
   StyledLeftNavContainer,
@@ -28,60 +27,14 @@ export default function LayoutWrapper({
     setOpen(!open)
   }
   return (
-    <ErrorBoundary>
-      {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>
-          </>
-        )}
+    <Stack direction="row" width="100%" height="calc(100vh - 96px)">
+      <StyledLeftNavContainer>
+        <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
+      </StyledLeftNavContainer>
+      <StyledMainContentContainer>
         <ErrorBoundary>{children}</ErrorBoundary>
       </StyledMainContentContainer>
-    </ErrorBoundary>
+    </Stack>
   )
 }
 

package/src/components/LoginForm.tsx

@@ -61,9 +61,14 @@ export function LoginForm({
           ...deviceState.deviceInformation,
         },
       })
-      Cookies.set('campx_tenant', res?.data?.subDomain)
+      Cookies.remove('campx_session_key')
+      Cookies.remove('campx_tenant')
+      Cookies.remove('campx_institution')
       Cookies.set('campx_session_key', res.data?.token)
-      window.location.href = window.location.origin + `/${res?.data?.subDomain}`
+      Cookies.set('campx_tenant', res.data?.subDomain)
+      Cookies.set('campx_institution', res.data?.institutionCode)
+      window.location.href = `/${res.data.institutionCode}`
+      //window.location.reload()
     } catch (err) {
       // eslint-disable-next-line no-console
       console.log(err)

package/src/components/NoDataIllustration.tsx

@@ -1,17 +1,19 @@
 import { Box, Typography, styled } from '@mui/material'
-import { ReactNode } from 'react'
+import { ReactElement, ReactNode } from 'react'
 import Image from './Image'
 
 interface Props {
-  imageSrc: string
+  imageSrc: string | ReactElement
   height?: string
   message?: string | ReactNode
+  svg?: boolean
 }
 
 export default function NoData({
   imageSrc,
   height = '300px',
   message = 'No Data Found',
+  svg = false,
 }: Props) {
   return (
     <Box
@@ -19,7 +21,13 @@ export default function NoData({
         marginTop: '20px',
       }}
     >
-      <Image alt="No Data Found" height={height} width="auto" src={imageSrc} />
+      <Image
+        alt="No Data Found"
+        height={height}
+        width="auto"
+        src={imageSrc}
+        svg={svg}
+      />
       {typeof message === 'string' ? (
         <StyledTypography variant="h6">{message}</StyledTypography>
       ) : (

package/src/config/axios.ts

@@ -1,14 +1,18 @@
-import Axios, { AxiosRequestConfig } from 'axios'
+import Axios, { InternalAxiosRequestConfig } from 'axios'
 import Cookies from 'js-cookie'
 import { toast } from 'react-toastify'
 import { NetworkStore } from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
-import { isDevelopment, isSetup } from '../constants'
-import { InstitutionsStore } from '../shared-state/InstitutionsStore'
+
+const isDevelopment = process.env.NODE_ENV == 'development'
 
 const sessionKey = Cookies.get('campx_session_key')
-const clientId = window.location.pathname.split('/')[1] ?? 'campx_dev'
-const institutionId = window.location.pathname.split('/')[2] ?? 'campx_dev'
+const tenantCode = isDevelopment
+  ? Cookies.get('campx_tenant')
+  : window.location.hostname.split('.')[0]
+const institutionCode = window.location.pathname.split('/')[1]
+
 const openPaymentsKey = Cookies.get('campx_open_payments_key')
+console.log(openPaymentsKey)
 
 export const formatParams = (params) => {
   return Object.fromEntries(
@@ -23,11 +27,9 @@ let axios = Axios.create({
   baseURL: process.env.REACT_APP_API_HOST,
   withCredentials: true,
   headers: {
-    'x-tenant-id': clientId,
-    ...((isDevelopment || isSetup) && sessionKey
-      ? { campx_session_key: sessionKey }
-      : {}),
-
+    'x-tenant-id': tenantCode,
+    'x-institution-code': institutionCode,
+    campx_session_key: sessionKey,
     ...(openPaymentsKey && {
       campx_open_payments_key: openPaymentsKey,
     }),
@@ -35,14 +37,7 @@ let axios = Axios.create({
 })
 
 axios.interceptors.request.use(
-  function (config: AxiosRequestConfig) {
-    const { current } = InstitutionsStore.getRawState()
-    if (current) {
-      config.headers['x-institution-code'] = current.code
-    } else {
-      config.headers['x-institution-code'] = institutionId
-    }
-
+  function (config: InternalAxiosRequestConfig) {
     const params = formatParams(config?.params)
     NetworkStore.update((s) => {
       s.loading = true

package/src/constants/isDevelopment.ts

@@ -1,6 +1,2 @@
-const urlTenantKey = window.location.pathname.split('/')[1]
-export const isDevelopment =
-  process.env.NODE_ENV === 'development' ||
-  window.location.origin.split('campx')[1] === '.dev'
-
+export const isDevelopment = process.env.NODE_ENV === 'development'
 export const isSetup = window.location.hostname.split('.').includes('setup')

package/src/contexts/Providers.tsx

@@ -9,51 +9,50 @@ import { ToastContainer } from '../components'
 import DialogProvider from '../components/DrawerWrapper/DrawerWrapper'
 import GlobalNetworkLoadingIndicator from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
 import ErrorModalProvider from '../components/ErrorModalWrapper/ErrorModalWrapper'
-import { isDevelopment } from '../constants'
 import RootModal from './RootModal'
 
-export const campxTenantKey = Cookies.get('campx_tenant')
-export const urlTenantKey = window.location.pathname.split('/')[1]
-export const instituitionKey = window.location.pathname.split('/')[2]
+const isDevelopment = process.env.NODE_ENV == 'development'
+
+export const campxTenantKey = isDevelopment
+  ? Cookies.get('campx_tenant')
+  : window.location.hostname.split('.')[0]
+export const urlTenantKey = isDevelopment
+  ? Cookies.get('campx_tenant')
+  : window.location.hostname.split('.')[0]
+export const instituitionKey =
+  window.location.pathname.split('/')[1] != ''
+    ? window.location.pathname.split('/')[1]
+    : Cookies.get('campx_institution')
 
 export default function Providers({ children }: { children: ReactNode }) {
-  const localInstituitionKey = localStorage.getItem('institution_key')
+  var baseName = '/'
+  var tenantCode
+  var institutionCode =
+    window.location.pathname.split('/')[1] != ''
+      ? window.location.pathname.split('/')[1]
+      : Cookies.get('campx_institution')
 
-  const getInstituitionKey = () => {
-    if (instituitionKey) {
-      return instituitionKey
-    } else {
-      if (!urlTenantKey) return null
-      if (localInstituitionKey) {
-        return localInstituitionKey
-      } else {
-        return null
-      }
+  if (isDevelopment) {
+    tenantCode = Cookies.get('campx_tenant')
+    if (
+      tenantCode &&
+      institutionCode &&
+      window.location.pathname !== '/auth/login'
+    ) {
+      baseName = `/${institutionCode}`
+    }
+  } else {
+    tenantCode = window.location.hostname.split('.')[0]
+    if (institutionCode && window.location.pathname !== '/auth/login') {
+      baseName = `/${institutionCode}`
     }
   }
 
   useEffect(() => {
-    if (!urlTenantKey) {
-      if (isDevelopment) {
-        window.location.replace(window.location.origin + `/aupulse`)
-      }
-      if (campxTenantKey)
-        window.location.replace(window.location.origin + `/${campxTenantKey}`)
-    } else {
-      if (!instituitionKey) {
-        if (localInstituitionKey) {
-          window.location.replace(
-            window.location.origin + `/${urlTenantKey}/${localInstituitionKey}`,
-          )
-        }
-      }
+    if (location.pathname === '/' && institutionCode && tenantCode) {
+      window.location.replace(window.location.origin + `/${institutionCode}`)
     }
   }, [])
-
-  const baseName = getInstituitionKey()
-    ? `${urlTenantKey}/${getInstituitionKey()}`
-    : urlTenantKey
-
   return (
     <BrowserRouter basename={baseName}>
       <QueryClientProvider>

package/src/hooks/useAuth.ts

@@ -1,9 +1,8 @@
-import { AxiosError } from 'axios'
 import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import axios from '../config/axios'
 import { isDevelopment } from '../constants'
-import { urlTenantKey } from '../contexts/Providers'
 import { openRootModal } from '../contexts/RootModal'
 import { AssetsStore, PermissionsStore, UserStore } from '../shared-state'
 import { InstitutionsStore } from '../shared-state/InstitutionsStore'
@@ -40,7 +39,7 @@ const ApplicationObj = {
   people: 'hrms',
   commute: 'commute_x',
 }
-const checkIsAdmin = (user) => {
+export const checkIsAdmin = (user) => {
   let subDomain = window.location.host.split('.')?.slice(-3)[0]
   const localSubDomain = process.env.REACT_APP_SUBDOMAIN
 
@@ -78,7 +77,6 @@ const getInstitutionKey = () => {
 }
 
 function handleInstitutions(institutions) {
-  const insititutionKey = getInstitutionKey()
   if (institutions?.length === 0) {
     openRootModal({
       key: 'institutions-not-assigned',
@@ -87,173 +85,97 @@ function handleInstitutions(institutions) {
         onClose: () => {},
       },
     })
-  }
-  if (institutions?.length === 1) {
-    if (!insititutionKey) {
-      window.location.replace(
-        `${window.location.origin}/${urlTenantKey}/${institutions[0]?.code}`,
-      )
-    }
-    if (insititutionKey !== institutions[0]?.code) {
-      window.location.replace(
-        `${window.location.origin}/${urlTenantKey}/${institutions[0]?.code}`,
-      )
-    }
+  } else {
     InstitutionsStore.update((s) => {
       s.current = institutions[0]
       s.institutions = institutions
     })
   }
-  if (institutions?.length > 1) {
-    if (!insititutionKey) {
-      openRootModal({
-        key: 'institutions',
-        dialogProps: {
-          disableEscapeKeyDown: true,
-          onClose: () => {},
-          maxWidth: 'md',
-        },
-      })
-    }
-    if (
-      insititutionKey &&
-      !institutions?.find((item) => item.code === insititutionKey)
-    ) {
-      openRootModal({
-        key: 'institutions',
-        dialogProps: {
-          disableEscapeKeyDown: true,
-          onClose: () => {},
-        },
-      })
-    }
-    InstitutionsStore.update((s) => {
-      s.institutions = institutions
-      s.current = institutions.find((item) => item.code === insititutionKey)
-    })
-  }
 }
 
-const loginErrorHandler = ({
+const useAuth = ({
+  permissionsEndpoint,
   loginUrl,
-  setLoading,
-  err,
-}: {
-  loginUrl: string
-  setLoading?: any
-  err: AxiosError
-}) => {
-  setLoading && setLoading(false)
-  const origin = window.location.origin
-  const isStaging = origin.split('campx')[1] === '.dev'
-  const isSetup = window.location.hostname.split('.').includes('setup')
-
-  if (isDevelopment || isStaging || isSetup) {
-    openRootModal({
-      key: 'login',
-      contentData: {
-        loginUrl,
-      },
-      dialogProps: {
-        disableEscapeKeyDown: true,
-        onClose: () => {},
-      },
-    })
-    return
-  } else {
-    window.location.replace(`https://www.id.campx.in/?redirect_to=${url}`)
-  }
-
-  if (err.response.status !== 401) {
-    if (err.response.status > 400 && err.response.status < 500) {
-      window.location.replace(`https://www.id.campx.in/?redirect_to=${url}`)
-    } else {
-      toast.error('Server Error')
-    }
-  }
-}
-
-function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
-  const [loading, setLoading] = useState<boolean>(false)
-  const [data, setData] = useState(null)
+}: AuthParams): AuthResponse => {
+  const [loading, setLoading] = useState<boolean>(true)
+  const [data, setData] = useState<any>(null)
   const { current } = InstitutionsStore.useState()
+  const navigate = useNavigate()
 
   const appInit = async () => {
-    setLoading(true)
-    axios
-      .get(permissionsEndpoint)
-      .then((res) => {
-        const origin = window.location.origin
-        const originSubdomain =
-          window.location.host.split('.')?.slice(-3)[0] ?? 'ums'
-        const isStaging = origin.split('campx')[1] === '.dev'
-        const isAdmin = checkIsAdmin(res.data.user)
-        const isSetup =
-          window.location.hostname.split('.').includes('setup') && isAdmin
-        const isMasterSlave = res.data?.institutionType === 'MASTER_CHILD'
-
-        // eslint-disable-next-line no-console
-
-        if (isDevelopment == false && isStaging == false && !isSetup) {
-          if (
-            !res.data.applications.includes(ApplicationObj[originSubdomain])
-          ) {
-            window.location.replace(
-              `https://www.id.campx.in/apps?redirect_to=${url}`,
-            )
-          }
-        }
+    try {
+      const res = await axios.get(permissionsEndpoint)
+      const isAdmin = checkIsAdmin(res.data.user)
+      setLoading(false)
+      setData(res.data)
+
+      UserStore.update((s) => {
+        s.username = res.data?.user?.username
+        s.user = res.data?.user
+        s.roles = res.data?.roles
+        s.globalUserId = res.data?.globalUserId
+        s.fullName = res.data?.fullName
+      })
 
-        if (res.data?.institutions) {
-          handleInstitutions(res.data?.institutions)
+      PermissionsStore.update((s) => {
+        s.permissions = {
+          ...res.data?.permissions,
+          can_settings_view: 1,
+          can_dashboard_view: 1,
+          can_individual_pages_view: 1,
+          can_analatics_view: isAdmin,
+          can_admin_view: isAdmin,
+          can_my_mentees_view:
+            res.data?.user?.isMentor &&
+            res.data?.permissions.can_my_mentees_view,
         }
+        s.applications = res.data?.applications ?? []
+        s.institutionType = res.data?.institutionType
+        s.masterInstitutionUniqueId = res.data?.masterInstitutionUniqueId
+        s.masterInstitutionId = res.data?.masterInstitutionId
+        s.isMasterInstitutionUser = res.data?.institutions
+          ?.map((institution) => institution?.id)
+          ?.includes(res?.data?.masterInstitutionUniqueId)
+        s.isMasterInstitution = res.data?.isMasterInstitution
+        s.isHomePageEnabled = res.data?.isHomePageEnabled
+      })
 
-        setData(res.data)
-        UserStore.update((s) => {
-          s.username = res.data?.user?.username
-          s.user = res.data?.user
-          s.roles = res.data?.roles
-          s.globalUserId = res.data?.globalUserId
-          s.fullName = res.data?.fullName
-        })
-
-        PermissionsStore.update((s) => {
-          s.permissions = {
-            ...res.data?.permissions,
-            can_settings_view: 1,
-            can_dashboard_view: 1,
-            can_individual_pages_view: 1,
-            can_analatics_view: isAdmin,
-            can_admin_view: isAdmin,
-            can_my_mentees_view:
-              res.data?.user?.isMentor &&
-              res.data?.permissions.can_my_mentees_view,
-          } as any
-          s.applications = res.data?.applications ?? []
-          s.institutionType = res.data?.institutionType
-          s.masterInstitutionUniqueId = res.data?.masterInstitutionUniqueId
-          s.masterInstitutionId = res.data?.masterInstitutionId
-          s.isMasterInstitutionUser = res.data?.institutions
-            ?.map((institution) => institution?.id)
-            ?.includes(res?.data?.masterInstitutionUniqueId)
-          s.isMasterInstitution = res.data?.isMasterInstitution
-          s.isHomePageEnabled = res.data?.isHomePageEnabled
-        })
-        AssetsStore.update((s) => {
-          s.logo = res.data?.assets.logo
-          s.logo_square = res.data?.assets.logo_square
-        })
-
-        setLoading(false)
+      InstitutionsStore.update((s) => {
+        s.institutions = res.data?.institutions
+        s.current = res.data?.institutions[0]
       })
-      .catch((err: AxiosError) => {
-        loginErrorHandler({ loginUrl, setLoading, err })
+
+      AssetsStore.update((s) => {
+        s.logo = res.data?.assets.logo
+        s.logo_square = res.data?.assets.logo_square
       })
+    } catch (err: any) {
+      setLoading(false)
+      const origin = window.location.origin
+      const isStaging = origin.split('campx')[1] === '.dev'
+
+      if (isDevelopment || isStaging) {
+        openRootModal({
+          key: 'login',
+          contentData: {
+            loginUrl,
+          },
+          dialogProps: {
+            disableEscapeKeyDown: true,
+            onClose: () => {},
+          },
+        })
+        return
+      } else {
+        navigate('/auth/login')
+      }
+    }
   }
-
+  console.log(loading, !data?.permissions, !current, 'abc1')
   useEffect(() => {
     appInit()
   }, [])
+  console.log(loading, !data?.permissions, !current, 'abc2')
 
   return {
     loading: loading || !data?.permissions || !current,

package/src/layouts/Components/styles.tsx

@@ -1,7 +1,7 @@
 import { styled as muiStyled } from '@mui/material'
 import styled from 'styled-components'
 
-export const headerHeight = '64px'
+export const headerHeight = '96px'
 export const sideNavWidth = '220px'
 
 export const StyledLayoutContainer = styled.div`
@@ -27,17 +27,12 @@ export const StyledLeftNavContainer = muiStyled('aside')(({ theme }) => ({
   width: sideNavWidth,
   background: theme.palette.secondary.main,
   color: 'white',
-  position: 'fixed',
-  top: headerHeight,
-  left: 0,
-  height: `calc(100vh - ${headerHeight})`,
-  overflowY: 'auto',
-
+  borderRadius: '8px 0px 0px 8px',
+  overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.5em',
     height: '0.5em',
   },
-
   '&::-webkit-scrollbar-thumb': {
     backgroundColor: 'rgba(255, 255, 255, 0.3)',
     borderRadius: '3px',
@@ -46,23 +41,11 @@ export const StyledLeftNavContainer = muiStyled('aside')(({ theme }) => ({
       background: 'rgba(255, 255, 255, 0.4)',
     },
   },
-
-  zIndex: 100,
 }))
 
 export const StyledMainContentContainer = muiStyled('main')(() => ({
-  width:
-    window.innerWidth > 1024
-      ? `calc(100% - ${sideNavWidth})`
-      : '100% !important',
-  height: `calc(100vh - ${headerHeight})`,
-  position: 'fixed',
-  top: headerHeight,
-  left: window.innerWidth > 1024 ? sideNavWidth : 0,
-  right: window.innerWidth > 1024 ? 'unset' : 0,
-  bottom: window.innerWidth > 1024 ? 'unset' : 0,
-  overflowY: 'auto',
-
+  width: '100%',
+  overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em',
     height: '0.4em',
@@ -75,18 +58,4 @@ export const StyledMainContentContainer = muiStyled('main')(() => ({
       background: 'rgba(0,0,0, 0.4)',
     },
   },
-
-  // '&::-webkit-scrollbar': {
-  //   width: '0.6em',
-  //   height: '0.6em',
-  // },
-
-  // '&::-webkit-scrollbar-thumb': {
-  //   backgroundColor: 'rgba(0,0,0, 0.3)',
-  //   borderRadius: '3px',
-
-  //   '&:hover': {
-  //     background: 'rgba(0,0,0, 0.4)',
-  //   },
-  // },
 }))

package/src/shared-state/index.ts

@@ -1,4 +1,11 @@
 import { AssetsStore } from './AssetsStore'
+import { InstitutionsStore } from './InstitutionsStore'
+import { Permission, PermissionsStore } from './PermissionsStore'
 import { UserStore } from './UserStore'
-import { PermissionsStore, Permission } from './PermissionsStore'
-export { AssetsStore, UserStore, Permission, PermissionsStore }
+export {
+  AssetsStore,
+  InstitutionsStore,
+  Permission,
+  PermissionsStore,
+  UserStore,
+}

package/src/utils/logout.ts

@@ -1,6 +1,5 @@
 import Cookies from 'js-cookie'
 import axios, { axiosErrorToast } from '../config/axios'
-import { isDevelopment, isSetup } from '../constants'
 
 export default function logout() {
   axios({
@@ -9,13 +8,10 @@ export default function logout() {
     url: '/auth-server/auth/logout',
   })
     .then((res) => {
-      if (isDevelopment || isSetup) {
-        Cookies.remove('campx_tenant')
-        Cookies.remove('campx_session_key')
-        window.location.href = window.location.origin
-      } else {
-        window.location.href = 'https://id.campx.in'
-      }
+      Cookies.remove('campx_tenant')
+      Cookies.remove('campx_session_key')
+      Cookies.remove('campx_institution')
+      window.location.href = '/'
     })
     .catch((err) => {
       axiosErrorToast('Unable To Logout.')

package/styled-components.tsx

@@ -1,7 +1,7 @@
-import styled from 'styled-components'
 import { styled as muiStyled } from '@mui/material'
+import styled from 'styled-components'
 
-export const headerHeight = '64px'
+export const headerHeight = '96px'
 export const sideNavWidth = '220px'
 
 export const StyledLayoutContainer = styled.div`
@@ -12,11 +12,11 @@ export const StyledLayoutContainer = styled.div`
 export const StyledHeaderContainer = styled.header`
   z-index: 300;
   width: 100%;
-  position: fixed;
   top: 0;
   left: 0;
   min-height: ${headerHeight};
   background: #fff;
+
   & > div {
     height: ${headerHeight};
   }