@campxdev/shared 1.11.28 → 1.11.29

package/package.json

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

package/src/components/ActivityLog/ActivityLog.tsx

@@ -0,0 +1,145 @@
+import {
+  Timeline,
+  TimelineConnector,
+  TimelineContent,
+  TimelineItem,
+  TimelineSeparator,
+} from '@mui/lab'
+import { Box, SxProps, Typography } from '@mui/material'
+import { useQuery } from 'react-query'
+import axios from '../../config/axios'
+import { useErrorModal } from '../ErrorModalWrapper/ErrorModalWrapper'
+import { PageContent } from '../PageContent'
+import PageHeader from '../PageHeader'
+import Spinner from '../Spinner'
+import Table from '../Tables/BasicTable/Table'
+import { StyledAvatar, StyledCircleIcon, StyledTimeLineDot } from './Styles'
+
+export const getData = async (url: string) => {
+  return await axios.get(url).then((res) => res.data)
+}
+
+export interface Activity {
+  id: number
+  date: string
+  time: string
+  message: string
+  userName: string
+}
+
+const ActivityLog = ({
+  activities,
+  endPoint,
+  tableView,
+  title,
+  sx,
+}: {
+  activities: Activity[]
+  sx?: SxProps
+  endPoint?: string
+  title?: string
+  tableView: boolean
+}) => {
+  const errorModal = useErrorModal()
+  const { data, isLoading } = useQuery('activity', () => getData(endPoint), {
+    onError: (error) => {
+      // eslint-disable-next-line no-console
+      console.log(error)
+      errorModal({ error: error })
+    },
+  })
+
+  if (isLoading) {
+    return <Spinner />
+  }
+
+  return (
+    <>
+      <PageHeader title={title ?? 'Activity Log'} />
+      <PageContent>
+        {!tableView ? (
+          <Box
+            sx={{
+              padding: '20px',
+              maxWidth: '550px',
+              ...sx,
+            }}
+          >
+            <Timeline>
+              {activities.map((item, index) => (
+                <TimelineItem
+                  key={index}
+                  sx={{
+                    margin: 0,
+                    padding: 0,
+                    '&:before': { flex: 'none' },
+                  }}
+                >
+                  <TimelineSeparator>
+                    <StyledTimeLineDot>
+                      <StyledCircleIcon />
+                    </StyledTimeLineDot>
+                    {index < activities.length - 1 && (
+                      <TimelineConnector
+                        sx={{ bgcolor: '#12121233', width: '1px' }}
+                      />
+                    )}
+                  </TimelineSeparator>
+                  <TimelineContent sx={{ padding: '6px 16px' }}>
+                    <Box>
+                      <Typography variant="subtitle2" sx={{ fontSize: '14px' }}>
+                        {item.date} - {item.time}
+                      </Typography>
+                      <Typography sx={{ fontSize: '16px' }} variant="body1">
+                        {item.message}
+                      </Typography>
+                      <Typography
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          marginTop: '5px',
+                        }}
+                      >
+                        <StyledAvatar />
+                        <Typography sx={{ fontSize: '13px', fontWeight: 900 }}>
+                          {item.userName}
+                        </Typography>
+                      </Typography>
+                    </Box>
+                  </TimelineContent>
+                </TimelineItem>
+              ))}
+            </Timeline>
+          </Box>
+        ) : (
+          <Table columns={columns} dataSource={activities ?? []} />
+        )}
+      </PageContent>
+    </>
+  )
+}
+
+export default ActivityLog
+
+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',
+  },
+]

package/src/components/ActivityLog/Styles.tsx

@@ -0,0 +1,28 @@
+import CircleRoundedIcon from '@mui/icons-material/CircleRounded'
+import { TimelineDot } from '@mui/lab'
+import { Avatar, 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)({
+  width: 30,
+  height: 30,
+  marginRight: '8px',
+})

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/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/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,