@campxdev/shared 1.8.48 → 1.8.49-alpha.1

package/package.json

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

package/src/components/ApplicationProfile/ApplicationProfile.tsx

@@ -7,7 +7,7 @@ import {
   Typography,
   styled,
 } from '@mui/material'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useMutation, useQuery } from 'react-query'
 import { toast } from 'react-toastify'
 import { useImmer } from 'use-immer'
@@ -80,14 +80,14 @@ function ApplicationProfile({
   const columns = [
     {
       title: 'User',
-      key: '',
-      dataIndex: '',
+      key: 'user',
+      dataIndex: 'user',
       render: (_, row) => <UserComponent userData={row} />,
     },
     {
       title: 'Profile',
-      key: '',
-      dataIndex: '',
+      key: 'profile',
+      dataIndex: 'profile',
       render: (_, row) => (
         <RenderProfileDropDown
           profiles={profiles?.profiles}
@@ -218,6 +218,12 @@ export const RenderProfileDropDown = ({
     profileId: data.profiles[0].id,
   })
 
+  useEffect(() => {
+    setState((pre) => ({
+      userId: data.id,
+      profileId: data.profiles[0].id,
+    }))
+  }, [data])
   const { mutate, isLoading } = useMutation(updateUserApplicationProfile, {
     onSuccess: (res) => {
       refetchFn()

package/src/components/ApplicationProfile/UserProfileRelation.tsx

@@ -1,24 +1,17 @@
 import { yupResolver } from '@hookform/resolvers/yup'
-import {
-  Autocomplete,
-  CircularProgress,
-  Popper,
-  Stack,
-  styled,
-} from '@mui/material'
-import { useState } from 'react'
-import { Controller, useForm } from 'react-hook-form'
+import { Popper, Stack, styled } from '@mui/material'
+import { useForm } from 'react-hook-form'
 import { useMutation, useQueryClient } from 'react-query'
 import { toast } from 'react-toastify'
+import { useImmer } from 'use-immer'
+import { axiosErrorToast } from '../../config/axios'
+import ActionButton from '../ActionButton'
+import { FormMultiSelect, FormSingleSelect } from '../HookForm'
 import {
   createApplicationUserProfile,
   fetchUsers,
   userProfileSchema,
 } from './Service'
-import { useImmer } from 'use-immer'
-import { axiosErrorToast } from '../../config/axios'
-import { FormMultiSelect, FormSingleSelect } from '../HookForm'
-import ActionButton from '../ActionButton'
 interface UserProps {
   options: {
     label: any
@@ -80,6 +73,7 @@ function UserProfileRelation({ close, application, profiles }) {
   }
 
   const handleInputChange = (e) => {
+    //TODO : debounce
     if (e) {
       setState((s) => {
         s.inputValue = e.target.value

package/src/components/ErrorBoundary/ErrorFallback.tsx

@@ -12,6 +12,7 @@ import LoginForm from '../LoginForm'
 import { useModal } from '../DrawerWrapper/DrawerWrapper'
 import { PermissionsStore } from '../../shared-state'
 import axios from '../../config/axios'
+import { openRootModal } from '../../contexts/RootModal'
 
 const StyledAlert = styled(Alert)(({ theme }) => ({
   height: '60px',
@@ -187,18 +188,16 @@ export function UnAuth({ resetBoundary }) {
         setLoading(false)
       })
       .catch((e) => {
-        modal({
-          title: 'Login',
-          content: () => <LoginForm />,
+        openRootModal({
+          key: 'login',
         })
       })
   }
   function LoginPage() {
     if (isLocalHost) {
       if (!sessionCookie) {
-        modal({
-          title: 'Login',
-          content: () => <LoginForm />,
+        openRootModal({
+          key: 'login',
         })
       } else {
         appinit()

package/src/components/Institutions/InsititutionsDialog.tsx

@@ -0,0 +1,80 @@
+import { Box, Typography } from '@mui/material'
+import Image from '../Image/Image'
+import axios from '../../config/axios'
+import { useQuery } from 'react-query'
+import Spinner from '../Spinner'
+import { institutions } from './services'
+import { InsititutionsStore } from '../../shared-state/InstitutionsStore'
+
+export default function InsititutionsDialog({ close }) {
+  // const { data, isLoading } = useQuery(
+  //   'institutions',
+  //   institutions.fetchInsititutions,
+  // )
+
+  // if (isLoading) return <Spinner />
+  const { institutions } = InsititutionsStore.useState((s) => s)
+
+  return (
+    <Box
+      sx={{
+        padding: '20px',
+      }}
+    >
+      <Typography variant="h3" textAlign={'center'}>
+        Select an Instituition
+      </Typography>
+      <Box>
+        <Box
+          sx={{
+            marginTop: '30px',
+            display: 'flex',
+            gap: '30px',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          {institutions?.map((item, index) => (
+            <InstitutionCard institution={item} key={index} />
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+const InstitutionCard = ({ institution }) => {
+  const urlTenantKey = window.location.pathname.split('/')[1]
+  const handleClick = () => {
+    localStorage.setItem('institution_key', institution?.code)
+    window.location.replace(
+      `${window.location.origin}/${urlTenantKey}/${institution?.code}`,
+    )
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '20px',
+        padding: '14px',
+        border: '1px solid black',
+        borderRadius: '10px',
+        cursor: 'pointer',
+        width: '200px',
+        flexShrink: 0,
+      }}
+      onClick={handleClick}
+    >
+      <Image
+        alt="logo"
+        height={100}
+        width="auto"
+        src={institution?.images?.url}
+      />
+      <Typography variant="body2">{institution?.name}</Typography>
+    </Box>
+  )
+}

package/src/components/Institutions/InstitutionsDropdown.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import { FormSingleSelect } from '../HookForm'
+import { SingleSelect } from '../Input'
+import { InsititutionsStore } from '../../shared-state/InstitutionsStore'
+import { urlTenantKey } from '../../contexts/Providers'
+
+export default function SchoolSwitch() {
+  const { current, institutions } = InsititutionsStore.useState((s) => s)
+
+  const handleChange = (e) => {
+    window.location.replace(
+      `${window.location.origin}/${urlTenantKey}/${e.target.value}`,
+    )
+  }
+
+  return (
+    <SingleSelect
+      containerProps={{
+        sx: {
+          minWidth: '200px',
+        },
+      }}
+      size="small"
+      options={institutions?.map((item) => ({
+        label: item.name,
+        value: item.code,
+      }))}
+      value={current?.code}
+      onChange={handleChange}
+    />
+  )
+}

package/src/components/Institutions/index.tsx

@@ -0,0 +1 @@
+export { default } from './InsititutionsDialog'

package/src/components/Institutions/services.ts

@@ -0,0 +1,12 @@
+import axios from '../../config/axios'
+
+export const institutions = {
+  async fetchInsititutions() {
+    const res = await axios.get('/square/institutions')
+    return res.data
+  },
+  async fetchInsititutionByCode(code: string) {
+    const res = await axios.get(`/square/institutions/code/${code}`)
+    return res.data
+  },
+}

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

@@ -46,6 +46,7 @@ interface AppHeaderProps {
   }[]
   customHeaderActions?: ReactNode
   cogWheelMenu?: { label: string; path: string }[]
+  institutions: any[]
 }
 
 export default function AppHeader({
@@ -54,6 +55,7 @@ export default function AppHeader({
   userBoxActions = [],
   cogWheelMenu = [],
   customHeaderActions,
+  institutions,
 }: AppHeaderProps) {
   return (
     <StyledHeader>

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

@@ -2,6 +2,7 @@ import { Box } from '@mui/material'
 import UserBox from './UserBox'
 import CogWheelMenu from './CogWheelMenu'
 import FreshDeskHelpButton from './FreshDeskHelpButton'
+import InstitutionsDropDown from '../../../Institutions/InstitutionsDropdown'
 
 export default function HeaderActions({
   cogWheelMenu,
@@ -10,6 +11,7 @@ export default function HeaderActions({
 }) {
   return (
     <>
+      <InstitutionsDropDown />
       <FreshDeskHelpButton />
       {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
       <UserBox fullName={fullName} actions={userBoxActions} />

package/src/components/LoginForm.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { Visibility, VisibilityOff } from '@mui/icons-material'
 import {
   Alert,
@@ -13,20 +14,21 @@ import axiosBase from 'axios'
 import Cookies from 'js-cookie'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
+import { Link } from 'react-router-dom'
+import axios from '../config/axios'
+import adminAxios from '../utils/adminAxios'
 import ActionButton from './ActionButton'
 import { FormTextField } from './HookForm'
-import axios from '../config/axios'
 import ResetPassword from './ResetPassword'
-import { Link } from 'react-router-dom'
-import { DialogButton } from './ModalButtons'
-import adminAxios from '../utils/adminAxios'
+import Image from './Image/Image'
+import { campxLogoPrimary } from '../assets/images'
 
 export function LoginForm({
   loginUrl,
-  showSuperAdminForm,
+  close,
 }: {
   loginUrl?: string
-  showSuperAdminForm?: boolean
+  close: any
 }) {
   const [showPassword, setShowPassword] = useState(false)
   const [forgotMail, setForgotMail] = useState(null)
@@ -86,6 +88,19 @@ export function LoginForm({
 
   return (
     <Box sx={{ position: 'relative', height: '100%' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          margin: '30px 0',
+          flexDirection: 'column',
+          gap: '10px',
+          alignItems: 'center',
+        }}
+      >
+        <Image alt="" height="auto" width={'200px'} src={campxLogoPrimary} />
+        <Typography variant="body2">Developer Login</Typography>
+      </Box>
       {resetPassword ? (
         <>
           <ResetPassword />
@@ -168,26 +183,6 @@ export function LoginForm({
           {error}
         </Alert>
       )}
-
-      {showSuperAdminForm && (
-        <Box
-          sx={{
-            position: 'absolute',
-            bottom: '20px',
-            right: '20px',
-          }}
-        >
-          <DialogButton
-            title="Super Admin Login"
-            anchor={({ open }) => (
-              <Button onClick={open} size="small" variant="text">
-                Super Admin Login
-              </Button>
-            )}
-            content={({ close }) => <SuperAdminLoginForm close={close} />}
-          />
-        </Box>
-      )}
     </Box>
   )
 }

package/src/components/ModalButtons/DialogButton.tsx

@@ -83,7 +83,7 @@ export default function DialogButton({
 
 interface CustomDialogProps {
   content: (props: { close: () => void }) => ReactNode
-  title: string
+  title?: string
   onClose: () => void
   open: boolean
   dialogProps?: Omit<DialogProps, 'open'>
@@ -96,30 +96,34 @@ export const CustomDialog = ({
   content,
   open,
 }: CustomDialogProps) => {
+  const props = {
+    PaperProps: {
+      ...dialogProps?.PaperProps,
+      elevation: 2,
+      sx: { borderRadius: '10px' },
+    },
+    fullWidth: true,
+    onClose: onClose,
+    open: open,
+    transitionDuration: 140,
+    TransitionComponent: Transition,
+    sx: {
+      ...dialogProps?.sx,
+      '& .MuiBackdrop-root': { backgroundColor: 'rgba(0, 0, 0, 0.4)' },
+    },
+    ...dialogProps,
+  }
+
   return (
-    <Dialog
-      PaperProps={{
-        ...dialogProps?.PaperProps,
-        elevation: 2,
-        sx: { borderRadius: '10px' },
-      }}
-      fullWidth
-      onClose={onClose}
-      open={open}
-      transitionDuration={140}
-      TransitionComponent={Transition}
-      sx={{
-        ...dialogProps?.sx,
-        '& .MuiBackdrop-root': { backgroundColor: 'rgba(0, 0, 0, 0.4)' },
-      }}
-      {...dialogProps}
-    >
-      <StyledDialogHeader>
-        <DialogTitle>{title}</DialogTitle>
-        <IconButton onClick={onClose} sx={{ color: 'black' }}>
-          <Close />
-        </IconButton>
-      </StyledDialogHeader>
+    <Dialog {...props}>
+      {title && (
+        <StyledDialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <IconButton onClick={onClose} sx={{ color: 'black' }}>
+            <Close />
+          </IconButton>
+        </StyledDialogHeader>
+      )}
       <StyledDialogContent>{content({ close: onClose })}</StyledDialogContent>
     </Dialog>
   )

package/src/config/axios.ts

@@ -1,9 +1,11 @@
-import Axios from 'axios'
+import Axios, { AxiosRequestConfig } from 'axios'
 import _ from 'lodash'
 import { toast } from 'react-toastify'
 import Cookies from 'js-cookie'
 import { NetworkStore } from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
 import { isDevelopment } from '../constants'
+import { UserStore } from '../shared-state'
+import { InsititutionsStore } from '../shared-state/InstitutionsStore'
 
 const sessionKey = Cookies.get('campx_session_key')
 const clientId = window.location.pathname.split('/')[1] ?? 'campx_dev'
@@ -30,7 +32,12 @@ let axios = Axios.create({
 })
 
 axios.interceptors.request.use(
-  function (config) {
+  function (config: AxiosRequestConfig) {
+    const { current } = InsititutionsStore.getRawState()
+    if (current) {
+      config.headers['x-institution-code'] = current.code
+    }
+
     const params = formatParams(config?.params)
     NetworkStore.update((s) => {
       s.loading = true

package/src/contexts/LoginFormProvider.tsx

@@ -1,6 +1,7 @@
 import { createContext, useContext } from 'react'
 import { LoginForm } from '../components'
 import { useModal } from '../components/DrawerWrapper/DrawerWrapper'
+import { openRootModal } from './RootModal'
 
 const LoginContext = createContext<{
   openLoginForm: (loginUrl: string) => void
@@ -12,11 +13,8 @@ export default function LoginFormProvider({ children }) {
   const modal = useModal()
 
   const onLogin = (loginUrl: string) => {
-    modal({
-      title: 'Developer Login',
-      content({ close }) {
-        return <LoginForm loginUrl={loginUrl} />
-      },
+    openRootModal({
+      key: 'login',
     })
   }
 

package/src/contexts/Providers.tsx

@@ -8,40 +8,49 @@ import { ReactNode, useEffect } from 'react'
 import { ToastContainer } from '../components'
 import DialogProvider from '../components/DrawerWrapper/DrawerWrapper'
 import GlobalNetworkLoadingIndicator from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
-import LoginFormProvider from './LoginFormProvider'
 import FreshChatButton from '../components/Layout/Header/HeaderActions/FreshChatButton'
+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]
+
+export default function Providers({ children }: { children: ReactNode }) {
+  const localInstituitionKey = localStorage.getItem('institution_key')
+
+  const insititutionCode = instituitionKey
+    ? instituitionKey
+    : localInstituitionKey
+    ? localInstituitionKey
+    : null
 
-export default function Providers({
-  children,
-  showSuperAdminLoginForm = false,
-}: {
-  children: ReactNode
-  showSuperAdminLoginForm?: boolean
-}) {
   useEffect(() => {
     if (!urlTenantKey) {
-      if (campxTenantKey) {
-        return window.location.replace(
-          window.location.origin + `/${campxTenantKey}`,
-        )
+      if (campxTenantKey)
+        window.location.replace(window.location.origin + `/${campxTenantKey}`)
+    } else {
+      if (!instituitionKey) {
+        if (localInstituitionKey) {
+          window.location.replace(
+            window.location.origin + `/${urlTenantKey}/${localInstituitionKey}`,
+          )
+        }
       }
     }
   }, [])
 
+  const baseName = `${urlTenantKey}/${insititutionCode}`
+
   return (
-    <BrowserRouter basename={urlTenantKey}>
+    <BrowserRouter basename={baseName}>
       <QueryClientProvider>
         <MuiThemeProvider>
           <ConfirmContextProvider>
             <DialogProvider>
-              <LoginFormProvider>
-                {children}
-                <GlobalNetworkLoadingIndicator />
-                <FreshChatButton />
-              </LoginFormProvider>
+              {children}
+              <GlobalNetworkLoadingIndicator />
+              <FreshChatButton />
+              <RootModal />
               <ToastContainer />
             </DialogProvider>
           </ConfirmContextProvider>

package/src/contexts/RootModal.tsx

@@ -0,0 +1,73 @@
+import { Store } from 'pullstate'
+import { CustomDialog, LoginForm } from '../components'
+import InsititutionsDialog from '../components/Institutions'
+import { DialogProps } from '@mui/material'
+
+const getRootDialogContent = (
+  key: string,
+): (({ close, data }) => JSX.Element) => {
+  switch (key) {
+    case 'login':
+      return ({ close, data }) => (
+        <LoginForm loginUrl={data?.loginUrl} close={close} />
+      )
+    case 'institutions':
+      return ({ close }) => <InsititutionsDialog close={close} />
+    default:
+      return () => <></>
+  }
+}
+
+const initState = {
+  isOpen: false,
+  key: '',
+  content: ({ close, data }) => <></>,
+  contentData: null,
+  dialogProps: null,
+}
+
+const rootModalStore = new Store(initState)
+
+export default function RootModal() {
+  const {
+    isOpen,
+    content: Content,
+    contentData,
+    dialogProps,
+  } = rootModalStore.useState()
+
+  const onClose = () => {
+    rootModalStore.update((s) => {
+      s.isOpen = false
+      s.key = ''
+      s.content = ({ close }) => <></>
+    })
+  }
+
+  const dialogContent = () => (
+    <Content close={dialogProps?.onClose ?? onClose} data={contentData} />
+  )
+
+  return (
+    <CustomDialog
+      content={dialogContent}
+      onClose={dialogProps?.onClose ?? onClose}
+      open={isOpen}
+      dialogProps={dialogProps}
+    />
+  )
+}
+
+export const openRootModal = (props: {
+  key: string
+  contentData?: any
+  dialogProps?: Omit<DialogProps, 'open'>
+}) => {
+  rootModalStore.update((s) => {
+    s.isOpen = true
+    s.key = props.key
+    s.content = getRootDialogContent(props.key)
+    s.contentData = props.contentData
+    s.dialogProps = props.dialogProps
+  })
+}

package/src/hooks/useAuth.ts

@@ -1,10 +1,14 @@
 import { AxiosError } from 'axios'
 import { useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
+import { institutions } from '../components/Institutions/services'
 import axios from '../config/axios'
 import { isDevelopment } from '../constants'
-import { useLoginForm } from '../contexts/LoginFormProvider'
-import { PermissionsStore, AssetsStore, UserStore } from '../shared-state'
+import { urlTenantKey } from '../contexts/Providers'
+import { openRootModal } from '../contexts/RootModal'
+import { AssetsStore, PermissionsStore, UserStore } from '../shared-state'
+import { InsititutionsStore } from '../shared-state/InstitutionsStore'
+import useInstitution from './useInstitution'
 
 const url = window.location.origin
 
@@ -32,8 +36,8 @@ const ApplicationObj = {
   ums: 'square',
   payments: 'payments',
   exams: 'exams',
+  hostel: 'hostels',
 }
-
 const checkIsAdmin = (user) => {
   let subDomain = window.location.host.split('.')?.slice(-3)[0]
   const localSubDomain = process.env.REACT_APP_SUBDOMAIN
@@ -62,10 +66,50 @@ const checkIsAdmin = (user) => {
   return profile ? (profile.isAdmin == true ? 1 : 0) : 0
 }
 
+const loginErrorHandler = ({
+  loginUrl,
+  setLoading,
+  err,
+}: {
+  loginUrl: string
+  setLoading?: any
+  err: AxiosError
+}) => {
+  // setLoading && 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 {
+    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 { openLoginForm } = useLoginForm()
   const [loading, setLoading] = useState<boolean>(false)
   const [data, setData] = useState(null)
+  const { current } = InsititutionsStore.useState((s) => s)
+
+  const { loading: loadingInstituition } = useInstitution()
 
   const appInit = async () => {
     setLoading(true)
@@ -116,26 +160,7 @@ function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
         })
       })
       .catch((err: AxiosError) => {
-        setLoading(false)
-        const origin = window.location.origin
-        const isStaging = origin.split('campx')[1] === '.dev'
-
-        if (isDevelopment || isStaging) {
-          openLoginForm(loginUrl)
-          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')
-          }
-        }
+        loginErrorHandler({ loginUrl, setLoading, err })
       })
   }
 
@@ -144,7 +169,7 @@ function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
   }, [])
 
   return {
-    loading: loading || !data?.permissions,
+    loading: loading || !data?.permissions || !current || loadingInstituition,
     data,
   }
 }

package/src/hooks/useInstitution.ts

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react'
+import { institutions } from '../components/Institutions/services'
+import { urlTenantKey } from '../contexts/Providers'
+import { openRootModal } from '../contexts/RootModal'
+import { InsititutionsStore } from '../shared-state/InstitutionsStore'
+
+const getInstitutionKey = () => {
+  const instituitionKey = window.location.pathname.split('/')[2]
+  // if (!instituitionKey) {
+  //   const localInstituitionKey = localStorage.getItem('institution_key')
+  //   if (localInstituitionKey) {
+  //     return localInstituitionKey
+  //   } else {
+  //     return null
+  //   }
+  // } else {
+  //   return instituitionKey
+  // }
+  return instituitionKey
+}
+
+const getInstitutions = async (startLoading, stopLoading) => {
+  const insititutionKey = getInstitutionKey()
+  try {
+    startLoading()
+    const data = await institutions.fetchInsititutions()
+    InsititutionsStore.update((s) => {
+      s.institutions = data?.institutions
+    })
+    if (data?.institutions?.length === 1 && !insititutionKey) {
+      window.location.replace(
+        `${window.location.origin}/${urlTenantKey}/${data?.institutions[0]?.code}`,
+      )
+    }
+    if (data?.institutions?.length > 1 && !insititutionKey) {
+      openRootModal({
+        key: 'institutions',
+        dialogProps: {
+          disableEscapeKeyDown: true,
+          onClose: () => {},
+        },
+      })
+    }
+    stopLoading()
+  } catch (error) {
+    stopLoading()
+  }
+}
+
+const getInstitutionsByCode = async (code, startLoading, stopLoading) => {
+  try {
+    startLoading()
+    const data = await institutions.fetchInsititutionByCode(code)
+    InsititutionsStore.update((s) => {
+      s.current = data
+    })
+    stopLoading()
+  } catch (error) {
+    stopLoading()
+    openRootModal({
+      key: 'institutions',
+      dialogProps: {
+        disableEscapeKeyDown: true,
+        onClose: () => {},
+      },
+    })
+  }
+}
+
+export default function useInstitution() {
+  const insititutionKey = getInstitutionKey()
+  const [loading, setLoading] = useState(false)
+
+  const startLoading = () => {
+    setLoading(true)
+  }
+  const stopLoading = () => {
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    getInstitutions(startLoading, stopLoading)
+  }, [insititutionKey])
+
+  useEffect(() => {
+    if (insititutionKey) {
+      getInstitutionsByCode(insititutionKey, startLoading, stopLoading)
+    }
+  }, [insititutionKey])
+
+  return {
+    loading: loading,
+  }
+}

package/src/shared-state/InstitutionsStore.ts

@@ -0,0 +1,8 @@
+import { Store } from 'pullstate'
+
+export const InsititutionsStore = new Store({
+  institutions: [],
+  loading: false,
+  error: null,
+  current: null,
+})

package/src/shared-state/PermissionsStore.ts

@@ -593,7 +593,7 @@ export enum Permission {
   //Hostels
 
   // manage hostels profile_permissions
-  CAN_MANAGE_HOSTELS_PROFILE_PERMISSIONS_VIEW = 'manage_hostels_profile_permissions_view',
+  CAN_MANAGE_HOSTELS_PROFILE_PERMISSIONS_VIEW = 'can_manage_hostels_profile_permissions_view',
   CAN_MANAGE_HOSTELS_PROFILE_PERMISSIONS_ADD = 'can_manage_hostels_profile_permissions_add',
   CAN_MANAGE_HOSTELS_PROFILE_PERMISSIONS_EDIT = 'can_manage_hostels_profile_permissions_edit',
   CAN_MANAGE_HOSTELS_PROFILE_PERMISSIONS_DELETE = 'can_manage_hostels_profile_permissions_delete',