@campxdev/shared 1.11.5 → 1.11.7-0.alpha-20

package/src/components/Layout/SideNav.tsx

@@ -9,7 +9,7 @@ import {
 import { Store } from 'pullstate'
 import { ReactNode, memo } from 'react'
 import { Link, useMatch, useResolvedPath } from 'react-router-dom'
-import { PermissionsStore } from '../../shared-state'
+import { PermissionsStore, UserStore } from '../../shared-state'
 import {
   ListItemButton,
   StyledChevronIcon,
@@ -23,14 +23,24 @@ const checkHasAccess = (
   permissionKey,
   institutionType,
   permissions,
+  checkIsMasterInstitution,
+  masterInstitutionUniqueId,
+  isMasterInstitution,
+  user,
 ) => {
   if (checkForMasterSlave) {
-    return permissions[permissionKey] && institutionType == 'MASTER_CHILD'
-      ? true
-      : false
-  } else {
-    return permissionKey ? permissions[permissionKey] : true
+    if (institutionType == 'MASTER_CHILD') {
+      if (checkIsMasterInstitution) {
+        return (
+          permissions[permissionKey] &&
+          user.institutionIds.includes(masterInstitutionUniqueId) &&
+          isMasterInstitution
+        )
+      }
+      return permissionKey ? permissions[permissionKey] : true
+    }
   }
+  return permissionKey ? permissions[permissionKey] : true
 }
 
 const sideNavStore = new Store({
@@ -73,17 +83,30 @@ const RenderMenuItem = ({ menuItem }) => {
     title,
     icon,
     permissionKey,
-    checkForMasterSlave = false,
+    checkForMasterSlave,
+    checkIsMasterInstitution,
   } = menuItem
+
   let resolved = useResolvedPath(path)
   let match = useMatch({ path: resolved.pathname, end: false })
 
-  const { permissions, institutionType } = PermissionsStore.useState((s) => s)
+  const {
+    permissions,
+    institutionType,
+    masterInstitutionUniqueId,
+    isMasterInstitution,
+  } = PermissionsStore.useState((s) => s)
+  const { user } = UserStore.useState((s) => s)
+
   const hasAccess = checkHasAccess(
     checkForMasterSlave,
     permissionKey,
     institutionType,
     permissions,
+    checkIsMasterInstitution,
+    masterInstitutionUniqueId,
+    isMasterInstitution,
+    user,
   )
 
   if (children?.length)
@@ -126,7 +149,13 @@ const RenderMenuItem = ({ menuItem }) => {
 
 const DropDownMenu = ({ path, title, icon, menuItems }) => {
   const { activeKey } = sideNavStore.useState((s) => s)
-  const { permissions, institutionType } = PermissionsStore.useState((s) => s)
+  const {
+    permissions,
+    institutionType,
+    masterInstitutionUniqueId,
+    isMasterInstitution,
+  } = PermissionsStore.useState((s) => s)
+  const { user } = UserStore.useState((s) => s)
 
   const validateDropdownAccess = () => {
     if (process.env.NODE_ENV === 'development' && !permissions) return true
@@ -138,6 +167,10 @@ const DropDownMenu = ({ path, title, icon, menuItems }) => {
             item?.permissionKey,
             institutionType,
             permissions,
+            item?.checkIsMasterInstitution,
+            masterInstitutionUniqueId,
+            isMasterInstitution,
+            user,
           )
         : accessIfNoKey,
     )

package/src/components/LoginForm.tsx

@@ -11,6 +11,7 @@ import {
   styled,
 } from '@mui/material'
 import axiosBase from 'axios'
+import DeviceDetector from 'device-detector-js'
 import Cookies from 'js-cookie'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
@@ -36,6 +37,18 @@ export function LoginForm({
   const [resetPassword, setResetPassword] = useState(false)
   const { handleSubmit, control } = useForm()
   const [error, setError] = useState('')
+  const [deviceState, setDeviceState] = useState({
+    deviceInformation: {
+      deviceType: 'browser',
+      clientName: 'unknown',
+      os: 'unknown',
+      osVersion: 'unknown',
+      latitude: null,
+      longitude: null,
+      tokenType: 'WEB',
+    },
+    isLocationAllowed: true,
+  })
 
   const onSubmit = async (values) => {
     try {
@@ -45,7 +58,7 @@ export function LoginForm({
         url: loginUrl ? loginUrl : `/auth-server/auth/login`,
         data: {
           ...values,
-          type: 'WEB',
+          ...deviceState.deviceInformation,
         },
       })
       Cookies.set('campx_tenant', res?.data?.subDomain)
@@ -83,6 +96,39 @@ export function LoginForm({
   }
 
   useEffect(() => {
+    navigator.geolocation.getCurrentPosition((position) => {
+      setDeviceState((s) => ({
+        ...s,
+        deviceInformation: {
+          ...s.deviceInformation,
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        },
+      }))
+    })
+    navigator.permissions
+      .query({ name: 'geolocation' })
+      .then((permissionStatus) => {
+        if (permissionStatus.state === 'denied') {
+          setDeviceState((s) => ({
+            ...s,
+            isLocationAllowed: false,
+          }))
+        }
+      })
+
+    const detector = new DeviceDetector()
+    const deviceInfo = detector.parse(navigator.userAgent)
+    setDeviceState((s) => ({
+      ...s,
+      deviceInformation: {
+        ...s.deviceInformation,
+        clientName: deviceInfo.client?.name || s.deviceInformation.clientName,
+        os: deviceInfo.os?.name || s.deviceInformation.os,
+        osVersion: deviceInfo.os?.version || s.deviceInformation.osVersion,
+      },
+    }))
+
     const restLink = window.location.pathname.split('/')[1]
     if (restLink == 'reset-password') {
       setResetPassword(true)
@@ -138,6 +184,11 @@ export function LoginForm({
                 ),
               }}
             />
+            {!deviceState.isLocationAllowed && (
+              <Alert severity="warning" sx={{ marginTop: '20px' }}>
+                Please Enable Location Services
+              </Alert>
+            )}
             <ActionButton type="submit">Login</ActionButton>
             <Typography
               variant="h6"

package/src/components/MongoCharts/MongoDashboard.tsx

@@ -0,0 +1,146 @@
+import ChartsEmbedSDK from '@mongodb-js/charts-embed-dom'
+import { useEffect, useRef, useState } from 'react'
+
+interface DashboardProps {
+  token: any
+  dashboardId: string
+  charts: any
+  chartFilters: any
+  sx?: any
+}
+
+const MongoDashboard: React.FC<DashboardProps> = ({
+  token,
+  dashboardId,
+  charts,
+  chartFilters,
+  sx = {},
+}) => {
+  const [rendered, setRendered] = useState<Boolean>(false)
+  const [dashboard, setDashboard] = useState<any>(null)
+  const chartDiv = useRef(null)
+
+  const sdk = new ChartsEmbedSDK({
+    baseUrl: 'https://charts.mongodb.com/charts-project-0-cnovv',
+    getUserToken: () => token,
+  })
+
+  useEffect(() => {
+    const initDashboard = async () => {
+      const dashboard = sdk.createDashboard({
+        dashboardId: dashboardId,
+        showAttribution: false,
+        background: 'transparent',
+        widthMode: 'scale',
+        heightMode: 'scale',
+      })
+
+      setDashboard(dashboard)
+      try {
+        await dashboard.render(chartDiv.current)
+
+        setRendered(true)
+      } catch (err) {
+        console.log('Error during Charts rendering:', err)
+      }
+    }
+
+    initDashboard()
+  }, [])
+
+  useEffect(() => {
+    if (dashboard && rendered) {
+      const applyFiltersToChart = async () => {
+        charts.map((chartGroup, index) => {
+          chartGroup.map(async (chartId) => {
+            const chart = await dashboard.getChart(chartId)
+            console.log(chartFilters[index], chart)
+            try {
+              await chart.setFilter(chartFilters[index])
+            } catch (err) {
+              console.log(
+                'Error while applying filters to specific chart.',
+                err,
+              )
+            }
+          })
+        })
+
+        // charts.default.map(async (chartId) => {
+        //   const chart = await dashboard.getChart(chartId)
+
+        //   try {
+        //     await chart.setFilter(filters)
+        //   } catch (err) {
+        //     console.log('Error while applying filters to specific chart.', err)
+        //   }
+        // })
+
+        // charts.lessThanAcademicYear.map(async (chartId) => {
+        //   const chart = await dashboard.getChart(chartId)
+
+        //   try {
+        //     await chart.setFilter({
+        //       ...filters,
+        //       academicYear: { $lt: filters.academicYear },
+        //     })
+        //   } catch (err) {
+        //     console.log('Error while applying filters to specific chart.', err)
+        //   }
+        // })
+
+        // charts.lessThanOrEqualAcademicYear.map(async (chartId) => {
+        //   const chart = await dashboard.getChart(chartId)
+
+        //   try {
+        //     await chart.setFilter({
+        //       ...filters,
+        //       academicYear: { $lte: filters.academicYear },
+        //     })
+        //   } catch (err) {
+        //     console.log('Error while applying filters to specific chart.', err)
+        //   }
+        // })
+
+        // charts.dateRangeByAcademicYear.map(async (chartId) => {
+        //   const chart = await dashboard.getChart(chartId)
+
+        //   try {
+        //     await chart.setFilter({
+        //       'admissionSubValue.tenantId':
+        //         filters['admissionSubValue.tenantId'],
+        //       'admissionSubValue.institutionId':
+        //         filters['admissionSubValue.institutionId'],
+        //       'feeTypeObject.feeType': filters['feeTypeObject.feeType'],
+        //       createdAt: {
+        //         $gte: startDate,
+        //         $lte: endDate,
+        //       },
+        //     })
+        //   } catch (err) {
+        //     console.log('Error while applying filters to specific chart.', err)
+        //   }
+        // })
+      }
+
+      applyFiltersToChart()
+    }
+  }, [dashboard, chartFilters, rendered])
+
+  return (
+    <div
+      className="chart"
+      ref={chartDiv}
+      style={{
+        height: '200vh',
+        margin: '25px 10px',
+        backgroundColor: '#EEEE',
+        padding: '15px 0px',
+        borderRadius: '10px',
+        ...sx,
+      }}
+    />
+  )
+}
+
+export default MongoDashboard

package/src/components/MongoCharts/index.tsx

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

package/src/components/MyProfile/MyProfile.tsx

@@ -111,7 +111,7 @@ const MyProfile = ({ close }) => {
               <Box
                 sx={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
               >
-                <StyledAvatar>
+                <StyledAvatar src={userProfile?.picture?.url}>
                   <Typography
                     sx={{
                       fontSize: '50px',

package/src/components/ReportHeader.tsx

@@ -118,7 +118,7 @@ export default function ReportHeader({
             src={
               reportHeaderImageUrl ||
               current?.reportHeader?.url ||
-              masterInstitution.reportHeader?.url
+              masterInstitution?.reportHeader?.url
             }
           />
         </>
@@ -132,8 +132,8 @@ export default function ReportHeader({
             }}
             src={
               logoImageUrl ||
-              current?.images?.url ||
-              masterInstitution?.images?.url
+              current?.image?.url ||
+              masterInstitution?.image?.url
             }
           />
           {!hideRecognitionDetails && (
@@ -142,19 +142,23 @@ export default function ReportHeader({
               sx={recognitionDetailsSx}
             >
               {recognitionDetailsText ||
-                current.recognitionDetails ||
-                masterInstitution.recognitionDetails}
+                current?.recognitionDetails ||
+                masterInstitution?.recognitionDetails ||
+                ''}
             </Typography>
           )}
           {!hideAddress && (
             <Typography variant={addressVariant} sx={addressSx}>
-              {addressText || current.address || masterInstitution.address}
+              {addressText ||
+                current?.address ||
+                masterInstitution?.address ||
+                ''}
             </Typography>
           )}
           {!hidePhone && (
             <Typography variant={phoneVariant} sx={phoneSx}>
               {'Phone: ' +
-                (phoneText || current.phone || masterInstitution.phone)}
+                (phoneText || current?.phone || masterInstitution?.phone)}
             </Typography>
           )}
         </>
@@ -168,8 +172,8 @@ export default function ReportHeader({
         />
       )}
       {typographyList &&
-        typographyList.map((s) => (
-          <Typography variant={s.variant || 'body1'} sx={s.sx}>
+        typographyList.map((s, index) => (
+          <Typography key={index} variant={s.variant || 'body1'} sx={s.sx}>
             {s.text}
           </Typography>
         ))}

package/src/components/Selectors/ClassRoomSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { useEffect, useState } from 'react'
 import axios from '../../config/axios'
 import { SingleSelect } from '../Input'
@@ -13,7 +13,7 @@ type ClassRoomSelectorProps = {
   error?: boolean
   helperText?: string
   api?: string
-} & SelectProps
+} & BaseSelectProps
 const ClassRoomSelector = (props: ClassRoomSelectorProps) => {
   const {
     name,

package/src/components/Selectors/CourseSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { useEffect, useState } from 'react'
 import axios from '../../config/axios'
 import { SingleSelect } from '../Input'
@@ -13,7 +13,7 @@ type CourseSelectorProps = {
   helperText?: string
   api?: string
   valueByUniqueId?: boolean
-} & SelectProps
+} & BaseSelectProps
 export default function CourseSelector(props: CourseSelectorProps) {
   const {
     name,

package/src/components/Selectors/DepartmentSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { useEffect, useState } from 'react'
 import axios from '../../config/axios'
 import { SingleSelect } from '../Input'
@@ -12,7 +12,7 @@ type DepartmentSelectorProps = {
   error?: boolean
   helperText?: string
   api?: string
-} & SelectProps
+} & BaseSelectProps
 export default function DepartmentSelector(props: DepartmentSelectorProps) {
   const {
     name,

package/src/components/Selectors/ExamGroupSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { useEffect, useState } from 'react'
 import axios from '../../config/axios'
 import { SingleSelect } from '../Input'
@@ -12,7 +12,7 @@ type ExamGroupSelectorProps = {
   allowAll?: boolean
   error?: boolean
   helperText?: string
-} & SelectProps
+} & BaseSelectProps
 const ExamGroupSelector = (props: ExamGroupSelectorProps) => {
   const {
     name,
@@ -26,13 +26,13 @@ const ExamGroupSelector = (props: ExamGroupSelectorProps) => {
   const [prevExamType, setPrevExamType] = useState(null)
   const [prevCourseId, setPrevCourseId] = useState(null)
   let api =
-    filters.examType !== 'internal'
+    filters?.examType !== 'internal'
       ? '/exams/exams/exam-groups'
       : '/exams/internal-exams'
   const handleOpen = () => {
     if (filters) {
       if (
-        (filters.examType && filters.examType !== prevExamType) ||
+        (filters?.examType && filters?.examType !== prevExamType) ||
         (filters?.courseId && filters?.courseId !== prevCourseId)
       ) {
         setOptions([])
@@ -46,12 +46,12 @@ const ExamGroupSelector = (props: ExamGroupSelectorProps) => {
           })
           .then((response) => {
             setOptions(
-              filters.examType !== 'internal'
+              filters?.examType !== 'internal'
                 ? response.data?.examGroups
                 : response.data?.exams,
             )
-            setPrevExamType(filters.examType)
-            setPrevCourseId(filters.courseId)
+            setPrevExamType(filters?.examType)
+            setPrevCourseId(filters?.courseId)
           })
           .catch((error) => {
             console.error('Error fetching data from the API:', error)
@@ -59,9 +59,18 @@ const ExamGroupSelector = (props: ExamGroupSelectorProps) => {
       }
     } else if (options.length === 0) {
       axios
-        .get(api)
+        .get(api, {
+          params: {
+            isArchived: 'false',
+            isExamPublished: 'true',
+          },
+        })
         .then((response) => {
-          setOptions(response.data)
+          setOptions(
+            filters?.examType !== 'internal'
+              ? response.data?.examGroups
+              : response.data?.exams,
+          )
         })
         .catch((error) => {
           console.error('Error fetching data from the API:', error)
@@ -80,7 +89,7 @@ const ExamGroupSelector = (props: ExamGroupSelectorProps) => {
           ...(allowAll ? [{ value: 'all', label: 'All' }] : []),
           ...options.map((item) => ({
             label:
-              filters.examType != 'internal'
+              filters?.examType != 'internal'
                 ? item?.groupName
                 : item?.displayName,
             value: item?.id,

package/src/components/Selectors/FacultySelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { useEffect, useState } from 'react'
 import axios from '../../config/axios'
 import { SingleSelect } from '../Input'
@@ -18,7 +18,7 @@ type FacultySelectorProps = {
   error?: boolean
   helperText?: string
   api?: string
-} & SelectProps
+} & BaseSelectProps
 const FacultySelector = (props: FacultySelectorProps) => {
   const {
     name,

package/src/components/Selectors/FeeTypeSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { useEffect, useState } from 'react'
 import axios from '../../config/axios'
 import { SingleSelect } from '../Input'
@@ -11,7 +11,7 @@ type FeeTypeSelectorProps = {
   onChange?: (value: any) => void
   error?: boolean
   helperText?: string
-} & SelectProps
+} & BaseSelectProps
 export default function FeeTypeSelector(props: FeeTypeSelectorProps) {
   const { name, required = false, label, onChange, allowAll = true } = props
   const [options, setOptions] = useState([])

package/src/components/Selectors/FormSelectors/FormClassRoomSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { Controller } from 'react-hook-form'
 import ClassRoomSelector from '../ClassRoomSelector'
 
@@ -12,7 +12,7 @@ type ClassRoomSelectorProps = {
   filters?: { programId: number; courseId: number; batch: string }
   onChange?: (value: any) => void
   api?: string
-} & SelectProps
+} & BaseSelectProps
 export default function FormClassRoomSelector(props: ClassRoomSelectorProps) {
   const {
     name,

package/src/components/Selectors/FormSelectors/FormCourseSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { Controller } from 'react-hook-form'
 import CourseSelector from '../CourseSelector'
 
@@ -12,7 +12,7 @@ type FormCourseSelectorProps = {
   onChange?: (value: any) => void
   api?: string
   valueByUniqueId?: boolean
-} & SelectProps
+} & BaseSelectProps
 export default function FormCourseSelector(props: FormCourseSelectorProps) {
   const {
     name,

package/src/components/Selectors/FormSelectors/FormDepartmentSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { Controller } from 'react-hook-form'
 import DepartmentSelector from '../DepartmentSelector'
 
@@ -11,7 +11,7 @@ type FormDepartmentSelectorProps = {
   allowAll?: boolean
   onChange?: (value: any) => void
   api?: string
-} & SelectProps
+} & BaseSelectProps
 export default function FormDepartmentSelector(
   props: FormDepartmentSelectorProps,
 ) {

package/src/components/Selectors/FormSelectors/FormExamGroupSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { Controller } from 'react-hook-form'
 import ExamGroupSelector from '../ExamGroupSelector'
 
@@ -11,7 +11,7 @@ type ExamGroupSelectorProps = {
   allowAll?: boolean
   filters?: { courseId: number; examType: string }
   onChange?: (value: any) => void
-} & SelectProps
+} & BaseSelectProps
 export default function FormExamGroupSelector(props: ExamGroupSelectorProps) {
   const {
     name,

package/src/components/Selectors/FormSelectors/FormFacultySelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { Controller } from 'react-hook-form'
 import FacultySelector from '../FacultySelector'
 
@@ -17,7 +17,7 @@ type FacultySelectorProps = {
   }
   onChange?: (value: any) => void
   api?: string
-} & SelectProps
+} & BaseSelectProps
 export default function FormFacultySelector(props: FacultySelectorProps) {
   const {
     name,

package/src/components/Selectors/FormSelectors/FormFeeTypeSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { Controller } from 'react-hook-form'
 import FeeTypeSelector from '../FeeTypeSelector'
 
@@ -11,7 +11,7 @@ type FormFeeTypeSelectorProps = {
   allowAll?: boolean
   onChange?: (value: any) => void
   api?: string
-} & SelectProps
+} & BaseSelectProps
 export default function FormFeeTypeSelector(props: FormFeeTypeSelectorProps) {
   const {
     name,

package/src/components/Selectors/FormSelectors/FormProgramSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { Controller } from 'react-hook-form'
 import ProgramSelector from '../ProgramSelector'
 
@@ -13,7 +13,7 @@ type ProgramSelectorProps = {
   onChange?: (value: any) => void
   api?: string
   valueByBranchCode?: boolean
-} & SelectProps
+} & BaseSelectProps
 export default function FormProgramSelector(props: ProgramSelectorProps) {
   const {
     name,