@campxdev/shared 1.11.28 → 1.11.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.11.28",
+  "version": "1.11.30",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",
@@ -13,7 +13,7 @@
     "lint:fix": "eslint --fix \"./src/**/*.{js,jsx,ts,tsx,json}\"",
     "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,css,md,json}\" --config ./.prettierrc",
     "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public"
+    "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook"
   },
   "browserslist": {
     "production": [
@@ -91,6 +91,7 @@
     "storybook-addon-react-router-v6": "^0.2.1"
   },
   "resolutions": {
-    "react-dev-utils/fork-ts-checker-webpack-plugin": "^6.5.3"
+    "react-dev-utils/fork-ts-checker-webpack-plugin": "^6.5.3",
+    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
   }
 }

package/src/components/ActivityLog/ActivityLog.tsx

@@ -0,0 +1,209 @@
+import {
+  Timeline,
+  TimelineContent,
+  TimelineItem,
+  TimelineSeparator,
+} from '@mui/lab'
+import { Box, SxProps, Typography } from '@mui/material'
+import axios from 'axios'
+import { useCallback, useRef } from 'react'
+import { useInfiniteQuery } from 'react-query'
+import { useErrorModal } from '../ErrorModalWrapper/ErrorModalWrapper'
+import Spinner from '../Spinner'
+import Table from '../Tables/BasicTable/Table'
+import {
+  StyledAvatar,
+  StyledCircleIcon,
+  StyledSpinnerBox,
+  StyledTimeLineDot,
+} from './Styles'
+
+interface Props {
+  endPoint: string
+  tableView: boolean
+  sx?: SxProps
+}
+
+export default function ActivityLog({ endPoint, tableView, sx }: Props) {
+  const errorModal = useErrorModal()
+  const fetchActivities = async ({ pageParam = 0 }) => {
+    try {
+      const response = await axios.get(endPoint, {
+        params: {
+          limit: 4,
+          skip: pageParam,
+        },
+      })
+      return response.data.posts
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error)
+      errorModal({ error: error })
+    }
+  }
+
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
+    useInfiniteQuery('activities', fetchActivities, {
+      getNextPageParam: (lastPage) => {
+        return lastPage.length ? lastPage[lastPage.length - 1].id : null
+      },
+    })
+
+  const activitesData = data ? data.pages.flatMap((page) => page) : []
+
+  if (isLoading) return <Spinner />
+
+  return (
+    <Box>
+      <Typography
+        variant="h1"
+        sx={{ fontSize: '18px', fontWeight: 700, margin: '20px' }}
+      >
+        Activity Log
+      </Typography>
+
+      {!tableView ? (
+        <Box
+          sx={{
+            overflowY: 'scroll',
+            '&::-webkit-scrollbar': {
+              display: 'none',
+            },
+            height: '380px',
+          }}
+        >
+          <TimeLineComponent
+            activitesData={activitesData}
+            fetchNextPage={fetchNextPage}
+            isFetchingNextPage={isFetchingNextPage}
+            hasNextPage={hasNextPage}
+            sx={sx}
+          />
+        </Box>
+      ) : (
+        <Box sx={{ margin: '0 25px' }}>
+          <Table
+            columns={columns}
+            dataSource={activitesData}
+            loading={isLoading}
+          />
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+const columns = [
+  { title: 'Date', dataIndex: 'date', key: 'date' },
+  { title: 'Time', dataIndex: 'time', key: 'time' },
+  { title: 'Message', dataIndex: 'message', key: 'message' },
+  { title: 'User', dataIndex: 'userName', key: 'userName' },
+]
+
+export const TimeLineComponent = ({
+  activitesData,
+  isFetchingNextPage,
+  hasNextPage,
+  fetchNextPage,
+  sx,
+}) => {
+  const lastItemRef = useIntersectionObserver<HTMLElement>(() => {
+    if (!isFetchingNextPage && hasNextPage) fetchNextPage()
+  })
+
+  return (
+    <Timeline sx={{ padding: 0, margin: 0 }}>
+      {activitesData.map((item, index, items) => (
+        <Box
+          key={index}
+          ref={items.length - 1 === index ? lastItemRef : null}
+          sx={{ maxWidth: '550px', ...sx }}
+        >
+          <TimelineItem
+            sx={{
+              margin: 2,
+              padding: 0,
+              '&:before': { display: 'none' },
+            }}
+          >
+            <TimelineSeparator>
+              <StyledTimeLineDot>
+                <StyledCircleIcon />
+              </StyledTimeLineDot>
+              {index < activitesData.length - 1 && (
+                <Box
+                  sx={{
+                    width: '1px',
+                    height: '110px',
+                    bgcolor: '#12121233',
+                    position: 'absolute',
+                    top: '25px',
+                  }}
+                />
+              )}
+            </TimelineSeparator>
+            <TimelineContent sx={{ padding: '6px 10px' }}>
+              <Box>
+                <Typography variant="subtitle2" sx={{ fontSize: '14px' }}>
+                  {`${Math.floor(Math.random() * 30) + 1} ${
+                    Math.random() > 0.5 ? 'June' : 'July'
+                  }, 2023`}{' '}
+                  -{' '}
+                  {`${Math.floor(Math.random() * 12) + 1}:${
+                    Math.floor(Math.random() * 60) + 1
+                  } ${Math.random() > 0.5 ? 'AM' : 'PM'}`}
+                  {/* {item.date} - {item.time} */}
+                </Typography>
+                <Typography sx={{ fontSize: '16px' }} variant="body1">
+                  {item.title}
+                  {/* {item.message} */}
+                </Typography>
+                <Typography
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    marginTop: '8px',
+                  }}
+                >
+                  <StyledAvatar>
+                    {'John Doe'
+                      .split(' ')
+                      .map((n) => n[0])
+                      .join('')
+                      .toUpperCase()}
+                  </StyledAvatar>
+                  <Typography sx={{ fontSize: '13px', fontWeight: 900 }}>
+                    {`John Doe ${item.id}`}
+                    {/* {item.userName} */}
+                  </Typography>
+                </Typography>
+              </Box>
+            </TimelineContent>
+          </TimelineItem>
+          {isFetchingNextPage && index === items.length - 1 && hasNextPage && (
+            <StyledSpinnerBox>
+              <Spinner />
+            </StyledSpinnerBox>
+          )}
+        </Box>
+      ))}
+    </Timeline>
+  )
+}
+
+function useIntersectionObserver<T extends HTMLElement>(callback: () => void) {
+  const observer = useRef<IntersectionObserver | null>(null)
+
+  const handleObserver = useCallback(
+    (node: T) => {
+      if (observer.current) observer.current.disconnect()
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) callback()
+      })
+      if (node) observer.current.observe(node)
+    },
+    [callback],
+  )
+
+  return handleObserver
+}

package/src/components/ActivityLog/Styles.tsx

@@ -0,0 +1,37 @@
+import CircleRoundedIcon from '@mui/icons-material/CircleRounded'
+import { TimelineDot } from '@mui/lab'
+import { Avatar, Box, styled } from '@mui/material'
+
+export const StyledTimeLineDot = styled(TimelineDot)({
+  width: '20px',
+  height: '20px',
+  boxShadow: 'none',
+  backgroundColor: '#F5F5F5',
+  border: '1px solid #12121233',
+  borderRadius: '50%',
+  margin: '5.5px 0',
+})
+
+export const StyledCircleIcon = styled(CircleRoundedIcon)({
+  position: 'relative',
+  left: '1px',
+  top: '1px',
+  color: 'black',
+  width: '7px',
+  height: '7px',
+})
+
+export const StyledAvatar = styled(Avatar)(({ theme }) => ({
+  width: 30,
+  height: 30,
+  marginRight: '8px',
+  backgroundColor: theme.palette.primary.main,
+  fontSize: '14px',
+}))
+
+export const StyledSpinnerBox = styled(Box)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '20px',
+})

package/src/components/HookForm/SingleSelect.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { ReactNode } from 'react'
 import { Controller } from 'react-hook-form'
 import { SingleSelect } from '../Input'
@@ -9,7 +9,7 @@ type Props = {
   options: Array<{ label: ReactNode; value: any }>
   firstItemEmpty?: boolean
   onOpen?: (e: any) => void
-} & SelectProps
+} & BaseSelectProps
 
 export default function FormSingleSelect(props: Props) {
   const {

package/src/components/Input/SearchSingleSelect.tsx

@@ -87,7 +87,7 @@ export const SearchSingleSelect = ({ options, value, onChange }: Props) => {
           <TextField
             inputRef={(input) => {
               if (input && value) {
-                input.style.width = `${value.label.length * 9}px`
+                input.style.width = `${value.label?.length * 9}px`
               }
             }}
             InputProps={{

package/src/components/Input/SingleSelect.tsx

@@ -1,13 +1,13 @@
-import { ArrowDownward, KeyboardArrowDown } from '@mui/icons-material'
+import { KeyboardArrowDown } from '@mui/icons-material'
 import {
+  BaseSelectProps,
+  Box,
+  BoxProps,
   FormControl,
+  FormHelperText,
   MenuItem,
-  SelectProps,
-  styled,
   Select,
-  FormHelperText,
-  Box,
-  BoxProps,
+  styled,
 } from '@mui/material'
 import { ReactNode } from 'react'
 import FormLabel from './FormLabel'
@@ -55,7 +55,7 @@ type Props = {
   helperText?: string
   containerProps?: BoxProps
   onOpen?: (e: any) => void
-} & SelectProps
+} & BaseSelectProps
 
 export default function SingleSelect({
   name = 'select',

package/src/components/Institutions/InsititutionsDialog.tsx

@@ -46,7 +46,7 @@ const InstitutionCard = ({ institution }) => {
         alt="logo"
         height={'100px'}
         width="100%"
-        src={institution?.images?.url}
+        src={institution?.imageSquare?.url}
       />
       <Typography variant="body2">{institution?.name}</Typography>
     </StyledInstitutionCard>

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

@@ -38,6 +38,7 @@ interface AppHeaderProps {
   clientLogo: string
   fullName: string
   profileUrl?: string
+  showMenu?: boolean
   actions?: ReactNode[]
   userBoxActions: {
     label: ReactNode
@@ -45,23 +46,30 @@ interface AppHeaderProps {
     onClick: any
   }[]
   customHeaderActions?: ReactNode
+  headerSx?: any
+  imageSx?: any
+  profileSx?: any
   cogWheelMenu?: { label: string; path: string; openNewTab?: boolean }[]
 }
 
 export default function AppHeader({
   clientLogo = imageMap.campx,
+  showMenu = true,
   fullName,
   userBoxActions = [],
   cogWheelMenu = [],
   customHeaderActions,
   profileUrl,
   actions = [],
+  headerSx = {},
+  profileSx = {},
+  imageSx = {},
 }: AppHeaderProps) {
   return (
-    <StyledHeader>
+    <StyledHeader sx={headerSx}>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-        <AppsMenu />
-        <AppLogo clientLogo={clientLogo} />
+        {showMenu && <AppsMenu />}
+        <AppLogo clientLogo={clientLogo} imageSx={imageSx} />
       </Box>
       <Box className="actions">
         {customHeaderActions ? (
@@ -73,6 +81,7 @@ export default function AppHeader({
             userBoxActions={userBoxActions}
             profileUrl={profileUrl}
             actions={actions}
+            profileSx={profileSx}
           />
         )}
       </Box>
@@ -80,16 +89,16 @@ export default function AppHeader({
   )
 }
 
-const AppLogo = ({ clientLogo }) => {
+const AppLogo = ({ clientLogo, imageSx }) => {
   const originSubdomain = window.location.host.split('.')?.slice(-3)[0] ?? 'ums'
   const currentApp =
     applications.find((item) => item.domainName === originSubdomain)
-      ?.domainName ?? 'campx'
+      ?.domainName ?? 'admin'
 
   return (
     <StyledRouterLink to={'/'}>
       <StyledLogosWrapper>
-        <StyledImageWrapper>
+        <StyledImageWrapper sx={imageSx}>
           <img src={imageMap[currentApp]} />
         </StyledImageWrapper>
         <Box

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

@@ -18,12 +18,14 @@ export default function HeaderActions({
   userBoxActions,
   profileUrl = '',
   actions = [],
+  profileSx = {},
 }: {
   cogWheelMenu?: any[]
   fullName: string
   userBoxActions: IMenuItemProps[] | []
   profileUrl: string
   actions?: ReactNode[]
+  profileSx?: any
 }) {
   const navigate = useNavigate()
   return (
@@ -46,6 +48,7 @@ export default function HeaderActions({
           fullName={fullName}
           actions={userBoxActions}
           profileUrl={profileUrl}
+          profileSx={profileSx}
         />
       </Stack>
     </Stack>

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

@@ -27,17 +27,19 @@ export default function UserBox({
   actions,
   customActions = [],
   profileUrl,
+  profileSx = {},
 }: {
   fullName: string
   actions: IMenuItemProps[] | []
   customActions?: IMenuItemProps[] | []
   profileUrl?: string
+  profileSx?: any
 }) {
   const navigate = useNavigate()
   return (
     <DropDownButton
       anchor={({ open }) => (
-        <StyledAvatar src={profileUrl ?? ''} onClick={open}>
+        <StyledAvatar src={profileUrl ?? ''} onClick={open} sx={profileSx}>
           {getStartingLetters(fullName)}
         </StyledAvatar>
       )}

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,

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,

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

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

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

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

package/src/components/Selectors/FormSelectors/MultiSelect/MultiFacultySelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { Controller } from 'react-hook-form'
 import axios from '../../../../config/axios'
@@ -20,7 +20,7 @@ type MultiFacultySelectorProps = {
   error?: boolean
   helperText?: string
   api?: string
-} & SelectProps
+} & BaseSelectProps
 const MultiFacultySelector = (props: MultiFacultySelectorProps) => {
   const {
     control,

package/src/components/Selectors/FormSelectors/MultiSelect/MultiFeeTypeSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { Controller } from 'react-hook-form'
 import axios from '../../../../config/axios'
@@ -13,7 +13,7 @@ type MultiProgramSelectorProps = {
   allowAll?: boolean
   error?: boolean
   helperText?: string
-} & SelectProps
+} & BaseSelectProps
 const MultiFeeTypeSelector = (props: MultiProgramSelectorProps) => {
   const {
     control,

package/src/components/Selectors/FormSelectors/MultiSelect/MultiProgramSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { Controller } from 'react-hook-form'
 import axios from '../../../../config/axios'
@@ -15,7 +15,7 @@ type MultiProgramSelectorProps = {
   error?: boolean
   helperText?: string
   api?: string
-} & SelectProps
+} & BaseSelectProps
 const MultiProgramSelector = (props: MultiProgramSelectorProps) => {
   const {
     control,

package/src/components/Selectors/FormSelectors/MultiSelect/MultiQuotaSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { Controller } from 'react-hook-form'
 import axios from '../../../../config/axios'
@@ -15,7 +15,7 @@ type MultiQuotaSelectorProps = {
   error?: boolean
   helperText?: string
   api?: string
-} & SelectProps
+} & BaseSelectProps
 export default function MultiQuotaSelector(props: MultiQuotaSelectorProps) {
   const {
     control,

package/src/components/Selectors/ProgramSelector.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'
@@ -6,7 +6,7 @@ import { SingleSelect } from '../Input'
 type ProgramSelectorProps = {
   name?: string
   label: string
-  filters?: { courseId: number| string }
+  filters?: { courseId: number | string }
   required?: boolean
   onChange?: (value: any) => void
   allowAll?: boolean
@@ -14,7 +14,7 @@ type ProgramSelectorProps = {
   helperText?: string
   api?: string
   valueByBranchCode?: boolean
-} & SelectProps
+} & BaseSelectProps
 const ProgramSelector = (props: ProgramSelectorProps) => {
   const {
     name,

package/src/components/Selectors/QuotaSelector.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 QuotaSelectorProps = {
   error?: boolean
   helperText?: string
   api?: string
-} & SelectProps
+} & BaseSelectProps
 export default function QuotaSelector(props: QuotaSelectorProps) {
   const {
     name,

package/src/components/Selectors/SemesterSelector.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 SemesterSelectorProps = {
   error?: boolean
   helperText?: string
   api?: string
-} & SelectProps
+} & BaseSelectProps
 const SemesterSelector = (props: SemesterSelectorProps) => {
   const {
     name,