@campxdev/shared 1.11.7-0.aplha.30 → 1.11.7-1.alpha.2

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.11.7-0.aplha.30",
+  "version": "1.11.7-1.alpha.2",
   "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/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

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

package/src/config/axios.ts

@@ -1,4 +1,4 @@
-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'
@@ -10,6 +10,8 @@ const institutionId =
   Cookies.get('campx_institution') ?? window.location.pathname.split('/')[1]
 const openPaymentsKey = Cookies.get('campx_open_payments_key')
 
+const isProduction = process.env.NODE_ENV === 'production'
+
 export const formatParams = (params) => {
   return Object.fromEntries(
     Object.entries(params ?? {})?.map((i) => [
@@ -19,16 +21,20 @@ export const formatParams = (params) => {
   )
 }
 
+console.log(institutionId, sessionKey, 'test')
+
 let axios = Axios.create({
   baseURL: process.env.REACT_APP_API_HOST,
   withCredentials: true,
   headers: {
     'x-tenant-id': tenantId,
+    'x-institution-code': institutionId,
+    campx_session_key: sessionKey,
   },
 })
 
 axios.interceptors.request.use(
-  function (config: AxiosRequestConfig) {
+  function (config: InternalAxiosRequestConfig) {
     const params = formatParams(config?.params)
     NetworkStore.update((s) => {
       s.loading = true

package/src/constants/formValidations.ts

@@ -4,3 +4,11 @@ export const isNumber = (value: string) => {
 
   return isNum
 }
+
+export const isInteger = (value: string) => {
+  const regEx = /^[-+]?\d*\.?\d+$/
+
+  let isInt = regEx.test(value)
+
+  return isInt
+}

package/src/hooks/useAuth.ts

@@ -1,9 +1,10 @@
 import { AxiosError } from 'axios'
+import Cookies from 'js-cookie'
 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 +41,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 +79,6 @@ const getInstitutionKey = () => {
 }
 
 function handleInstitutions(institutions) {
-  const insititutionKey = getInstitutionKey()
   if (institutions?.length === 0) {
     openRootModal({
       key: 'institutions-not-assigned',
@@ -87,51 +87,12 @@ 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 = ({
@@ -143,12 +104,12 @@ const loginErrorHandler = ({
   setLoading?: any
   err: AxiosError
 }) => {
+  const navigate = useNavigate()
   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) {
+  if (isDevelopment || isStaging) {
     openRootModal({
       key: 'login',
       contentData: {
@@ -161,15 +122,7 @@ const loginErrorHandler = ({
     })
     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')
-    }
+    navigate('/auth/login')
   }
 }
 
@@ -183,30 +136,7 @@ function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
     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}`,
-            )
-          }
-        }
-
-        if (res.data?.institutions) {
-          handleInstitutions(res.data?.institutions)
-        }
 
         setData(res.data)
         UserStore.update((s) => {
@@ -239,6 +169,14 @@ function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
           s.isMasterInstitution = res.data?.isMasterInstitution
           s.isHomePageEnabled = res.data?.isHomePageEnabled
         })
+
+        InstitutionsStore.update((s) => {
+          s.institutions = res.data?.institutions
+          s.current = res.data?.institutions.find(
+            (item) => item.code === Cookies.get('campx_institution'),
+          )
+        })
+
         AssetsStore.update((s) => {
           s.logo = res.data?.assets.logo
           s.logo_square = res.data?.assets.logo_square

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/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};
   }