@campxdev/shared 1.8.49 → 1.9.0

package/package.json

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

package/src/components/ApplicationProfile/ApplicationProfile.tsx

@@ -11,6 +11,10 @@ import { useEffect, useState } from 'react'
 import { useMutation, useQuery } from 'react-query'
 import { toast } from 'react-toastify'
 import { useImmer } from 'use-immer'
+import { PageContent } from '../PageContent'
+import PageHeader from '../PageHeader'
+import useConfirm from '../PopupConfirm/useConfirm'
+import Spinner from '../Spinner'
 import UserProfileRelation from './UserProfileRelation'
 import {
   defaultFilterObj,
@@ -18,20 +22,16 @@ import {
   fetchProfiles,
   removeUserApplicationProfile,
   updateUserApplicationProfile,
-} from './Service'
-import useConfirm from '../PopupConfirm/useConfirm'
-import Spinner from '../Spinner'
-import PageHeader from '../PageHeader'
-import { PageContent } from '../PageContent'
+} from './services'
 
-import { SingleSelect } from '../Input'
-import ActionButton from '../ActionButton'
 import { axiosErrorToast } from '../../config/axios'
-import { DialogButton } from '../ModalButtons'
-import SearchBar from '../FilterComponents/SearchBar'
-import Table from '../Tables/BasicTable/Table'
 import { ValidateAccess } from '../../permissions'
 import { Permission, PermissionsStore } from '../../shared-state'
+import ActionButton from '../ActionButton'
+import SearchBar from '../FilterComponents/SearchBar'
+import { SingleSelect } from '../Input'
+import { DialogButton } from '../ModalButtons'
+import Table from '../Tables/BasicTable/Table'
 
 interface ApplicationProfileProps {
   application: 'exams' | 'square' | 'payments' | 'enroll_x' | 'hostels'
@@ -44,14 +44,14 @@ interface ApplicationProfileProps {
   }
 }
 function ApplicationProfile({
-  application = 'exams',
+  application,
   title,
   permissions,
 }: ApplicationProfileProps) {
   const { isConfirmed } = useConfirm()
   const [filters, setFilters] = useImmer(defaultFilterObj)
   const { data, isLoading, refetch } = useQuery(
-    ['application-users', ...Object.keys(filters)?.map((key) => filters[key])],
+    ['application-users', filters],
     () => fetchApplicationUsers({ application, ...filters }),
   )
 
@@ -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}
@@ -100,8 +100,8 @@ function ApplicationProfile({
     },
     {
       title: 'Actions',
-      key: '',
-      dataIndex: '',
+      key: 'actions',
+      dataIndex: 'actions',
       render: (_, row) => (
         <ValidateAccess
           accessKey={
@@ -133,16 +133,15 @@ function ApplicationProfile({
       s.offset = value * s.limit - s.limit
     })
   }
-  if (profilesLoading) {
-    return <Spinner />
-  }
+
+  if (profilesLoading) return <Spinner />
   return (
     <>
       <PageHeader
         title={title}
         actions={[
           <ValidateAccess
-            key={0}
+            key={1}
             accessKey={
               permissions
                 ? Permission[permissions.add]
@@ -150,7 +149,6 @@ function ApplicationProfile({
             }
           >
             <DialogButton
-              key={0}
               title={'Add User Profile Relation'}
               anchor={({ open }) => (
                 <ActionButton onClick={open}>
@@ -185,7 +183,7 @@ function ApplicationProfile({
           />
           <Table
             columns={columns}
-            dataSource={data?.users ?? []}
+            dataSource={data?.result ?? []}
             loading={isLoading || removingUserProfile}
             pagination={{
               limit: filters.limit,
@@ -213,17 +211,19 @@ export const RenderProfileDropDown = ({
   const CanEdit = permissions
     ? permissionState.permissions[Permission[permissions.edit]]
     : permissionState.permissions['can_dashboard_view']
+
   const [state, setState] = useState({
-    userId: data.id,
-    profileId: data.profiles[0].id,
+    userId: null,
+    profileId: null,
   })
 
   useEffect(() => {
     setState((pre) => ({
       userId: data.id,
-      profileId: data.profiles[0].id,
+      profileId: data?.profiles?.find((p) => p.application === application)?.id,
     }))
   }, [data])
+
   const { mutate, isLoading } = useMutation(updateUserApplicationProfile, {
     onSuccess: (res) => {
       refetchFn()
@@ -246,6 +246,8 @@ export const RenderProfileDropDown = ({
       application: application,
     })
   }
+
+  if (!data) return null
   return (
     <>
       <StyledDropDownContainer>

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 { Stack } 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'
+} from './services'
 interface UserProps {
   options: {
     label: any
@@ -59,7 +52,7 @@ function UserProfileRelation({ close, application, profiles }) {
     {
       onSuccess: (res) => {
         setState((s) => {
-          s.options = res.users?.map((item) => ({
+          s.options = res.result?.map((item) => ({
             label: item.fullName,
             value: item.id,
           }))
@@ -80,6 +73,7 @@ function UserProfileRelation({ close, application, profiles }) {
   }
 
   const handleInputChange = (e) => {
+    //TODO : debounce
     if (e) {
       setState((s) => {
         s.inputValue = e.target.value
@@ -134,41 +128,3 @@ function UserProfileRelation({ close, application, profiles }) {
   )
 }
 export default UserProfileRelation
-
-const StyledPopper = styled(Popper)(({ theme }) => ({
-  '& .MuiPaper-root': {
-    borderRadius: '10px',
-    borderTopRightRadius: 0,
-    borderTopLeftRadius: 0,
-    boxShadow: '0px 4px 16px #0000000F',
-    marginTop: '1px',
-    '& .MuiAutocomplete-listbox': {
-      minWidth: '240px',
-      padding: '10px',
-      '& .MuiAutocomplete-option': {
-        padding: '10px',
-        background: 'none',
-        '&.Mui-focused': {
-          background: 'none',
-        },
-      },
-      '& .MuiCheckbox-root': {
-        padding: 0,
-        marginRight: '10px',
-      },
-    },
-    '&::-webkit-scrollbar': {
-      width: '0.5em',
-      height: '0.5em',
-    },
-
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: 'rgba(0, 0, 0, 0.15)',
-      borderRadius: '3px',
-
-      '&:hover': {
-        background: 'rgba(0, 0, 0, 0.2)',
-      },
-    },
-  },
-}))

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,70 @@
+import { Box, Typography } from '@mui/material'
+import { InsititutionsStore } from '../../shared-state/InstitutionsStore'
+import Image from '../Image/Image'
+
+export default function InsititutionsDialog({ close }) {
+  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/InsititutionsNotAssignedDialog .tsx

@@ -0,0 +1,12 @@
+import { Box, Typography } from '@mui/material'
+
+export default function InsititutionsNotAssignedDialog() {
+  return (
+    <Box padding="40px 10px">
+      <Typography variant="body2" textAlign="center">
+        You have not been assigned to any institutions. Please contact your
+        administrator.
+      </Typography>
+    </Box>
+  )
+}

package/src/components/Institutions/InstitutionsDropdown.tsx

@@ -0,0 +1,33 @@
+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) => {
+    localStorage.setItem('institution_key', e.target.value)
+    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

@@ -1,8 +1,8 @@
-import { Box, Button, Typography } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import { ReactNode } from 'react'
 import { isDevelopment } from '../../../constants/isDevelopment'
-import { applications } from './applications'
 import AppsMenu from './AppsMenu'
+import { applications } from './applications'
 import {
   collegex,
   commutex,
@@ -13,17 +13,13 @@ import {
   peoplex,
 } from './assets'
 
-import { HelpOutline } from '@mui/icons-material'
-import CogWheelMenu from './HeaderActions/CogWheelMenu'
+import HeaderActions from './HeaderActions/HeaderActions'
 import {
   StyledHeader,
   StyledImageWrapper,
   StyledLogosWrapper,
   StyledRouterLink,
 } from './styles'
-import UserBox from './HeaderActions/UserBox'
-import FreshDeskHelpButton from './HeaderActions/FreshDeskHelpButton'
-import HeaderActions from './HeaderActions/HeaderActions'
 
 const imageMap = {
   ums: collegex,

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

@@ -1,19 +1,18 @@
+import AppsOutageIcon from '@mui/icons-material/AppsOutage'
 import { Box, Menu, Typography, styled } from '@mui/material'
-import Cookies from 'js-cookie'
 import { useState } from 'react'
+import { campxTenantKey, instituitionKey } from '../../../contexts/Providers'
+import { PermissionsStore } from '../../../shared-state'
 import { applications } from './applications'
 import { AppsIcon } from './icons'
 import {
   StyledDescription,
   StyledIconButton,
+  StyledImageBox,
+  StyledLink,
   StyledMenuItem,
   StyledMenuItemContainer,
-  StyledLink,
-  StyledImageBox,
 } from './styles'
-import { PermissionsStore } from '../../../shared-state'
-import AppsOutageIcon from '@mui/icons-material/AppsOutage'
-export const campxTenantKey = Cookies.get('campx_tenant')
 
 const AppsMenu = () => {
   const permissionState = PermissionsStore.useState((s) => s)
@@ -74,7 +73,7 @@ const AppsMenu = () => {
               {applicationList.map((item, index) => {
                 return (
                   <StyledLink
-                    href={item.path + `/${campxTenantKey ?? ''}`}
+                    href={item.path + `/${campxTenantKey}/${instituitionKey}`}
                     key={index}
                   >
                     <StyledMenuItemContainer

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

@@ -2,7 +2,7 @@ import { Box } from '@mui/material'
 import UserBox from './UserBox'
 import CogWheelMenu from './CogWheelMenu'
 import FreshDeskHelpButton from './FreshDeskHelpButton'
-import SchoolSwitch from '../SchoolSwitch/SchoolSwitch'
+import InstitutionsDropDown from '../../../Institutions/InstitutionsDropdown'
 
 export default function HeaderActions({
   cogWheelMenu,
@@ -11,7 +11,7 @@ export default function HeaderActions({
 }) {
   return (
     <>
-      {/* <SchoolSwitch /> */}
+      <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/components/NoDataIllustration.tsx

@@ -1,6 +1,6 @@
-import { Box, Typography } from '@mui/material'
-import Image from './Image'
+import { Box, Typography, styled } from '@mui/material'
 import { ReactNode } from 'react'
+import Image from './Image'
 
 interface Props {
   imageSrc: string
@@ -21,12 +21,15 @@ export default function NoData({
     >
       <Image alt="No Data Found" height={height} width="auto" src={imageSrc} />
       {typeof message === 'string' ? (
-        <Typography marginTop={'20px'} textAlign={'center'}>
-          {message}
-        </Typography>
+        <StyledTypography variant="h6">{message}</StyledTypography>
       ) : (
         <>{message}</>
       )}
     </Box>
   )
 }
+export const StyledTypography = styled(Typography)(({ theme }) => ({
+  opacity: '0.5',
+  marginTop: '20px',
+  textAlign: 'center',
+}))