@campxdev/shared 1.10.65 → 1.10.67

package/package.json

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

package/src/components/Input/MultiSelect.tsx

@@ -87,6 +87,7 @@ interface MultiSelectProps {
   helperText?: string
   multiple?: boolean
   limitTags?: number
+  onOpen?: (e: any) => void
   noOptionsText?: string
 }
 
@@ -119,6 +120,7 @@ export default function MultiSelect({
         if (!onChange) return
         onChange(value)
       }}
+      onOpen={props.onOpen}
       onInputChange={onInputChange}
       limitTags={limitTags}
       isOptionEqualToValue={(option: any, value: any) =>

package/src/components/Layout/SideMenuHeader.tsx

@@ -9,6 +9,8 @@ const StyledSideMenuHeader = styledMui(Box)(({ theme }) => ({
   alignItems: 'center',
   cursor: 'pointer',
   background: '#1d1d1d',
+  padding: '20px',
+  marginBottom: '25px',
 }))
 
 export const SideMenuHeader = ({ title, path }) => {

package/src/components/Layout/SideNav.tsx

@@ -7,7 +7,7 @@ import {
   styled,
 } from '@mui/material'
 import { Store } from 'pullstate'
-import { memo, ReactNode } from 'react'
+import { ReactNode, memo } from 'react'
 import { Link, useMatch, useResolvedPath } from 'react-router-dom'
 import { PermissionsStore } from '../../shared-state'
 import {

package/src/components/ListItemButton.tsx

@@ -1,10 +1,9 @@
 import { ChevronRight } from '@mui/icons-material'
 import {
-  Box,
-  ListItemButton as MuiListItemButton,
   ListItemButtonProps,
   ListItemIcon,
   ListItemText,
+  ListItemButton as MuiListItemButton,
   styled,
 } from '@mui/material'
 import { ReactNode } from 'react'
@@ -25,11 +24,7 @@ export const ListItemButton = ({
 }: Props) => {
   return (
     <StyledListItemButton isActive={isActive} onClick={onClick}>
-      {Icon ? (
-        <ListItemIcon>{<Icon />}</ListItemIcon>
-      ) : (
-        <Box minWidth={16}></Box>
-      )}
+      {Icon ? <ListItemIcon>{<Icon />}</ListItemIcon> : null}
       <ListItemText primary={label} />
     </StyledListItemButton>
   )

package/src/components/Selectors/CourseSelector.tsx

@@ -0,0 +1,59 @@
+import { SelectProps } from '@mui/material'
+import { useEffect, useState } from 'react'
+import axios from '../../config/axios'
+import { SingleSelect } from '../Input'
+
+type CourseSelectorProps = {
+  name?: string
+  label: string
+  required?: boolean
+  onChange?: (value: any) => void
+  allowAll?: boolean
+  error?: boolean
+  helperText?: string
+} & SelectProps
+export default function CourseSelector(props: CourseSelectorProps) {
+  const { name, required = false, label, onChange, allowAll = true } = props
+  const [options, setOptions] = useState([])
+
+  const handleOpen = () => {
+    if (options.length === 0) {
+      axios
+        .get('/square/courses')
+        .then((response) => {
+          setOptions(response.data.courses)
+        })
+        .catch((error) => {
+          console.error('Error fetching data from the API:', error)
+        })
+    }
+  }
+  useEffect(() => {
+    if (props?.value && props.value != 'all') {
+      handleOpen()
+    }
+  }, [props.value])
+  const handleOptions =
+    options.length > 0
+      ? [
+          ...(allowAll ? [{ value: 'all', label: 'All' }] : []),
+          ...options.map((item) => ({
+            label: `${item.courseName} `,
+            value: `${item.id}`,
+          })),
+        ]
+      : allowAll
+      ? [{ value: 'all', label: 'All' }]
+      : []
+
+  return (
+    <SingleSelect
+      name={name}
+      label={label}
+      required={required}
+      options={handleOptions}
+      onOpen={handleOpen}
+      {...props}
+    />
+  )
+}

package/src/components/Selectors/FeeTypeSelector.tsx

@@ -0,0 +1,60 @@
+import { SelectProps } from '@mui/material'
+import { useEffect, useState } from 'react'
+import axios from '../../config/axios'
+import { SingleSelect } from '../Input'
+
+type FeeTypeSelectorProps = {
+  name?: string
+  label: string
+  required?: boolean
+  allowAll?: boolean
+  onChange?: (value: any) => void
+  error?: boolean
+  helperText?: string
+} & SelectProps
+export default function FeeTypeSelector(props: FeeTypeSelectorProps) {
+  const { name, required = false, label, onChange, allowAll = true } = props
+  const [options, setOptions] = useState([])
+
+  const handleOpen = () => {
+    if (options.length === 0) {
+      axios
+        .get('/payments/fee-types')
+        .then((response) => {
+          setOptions(response.data)
+        })
+        .catch((error) => {
+          console.error('Error fetching data from the API:', error)
+        })
+    }
+  }
+  useEffect(() => {
+    if (props?.value && props.value != 'all') {
+      handleOpen()
+    }
+  }, [props.value])
+
+  const handleOptions =
+    options.length > 0
+      ? [
+          ...(allowAll ? [{ value: 'all', label: 'All' }] : []),
+          ...options.map((item) => ({
+            label: `${item.name} `,
+            value: `${item.slug}`,
+          })),
+        ]
+      : allowAll
+      ? [{ value: 'all', label: 'All' }]
+      : []
+
+  return (
+    <SingleSelect
+      name={name}
+      label={label}
+      required={required}
+      options={handleOptions}
+      onOpen={handleOpen}
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1,45 @@
+import { SelectProps } from '@mui/material'
+import { Controller } from 'react-hook-form'
+import CourseSelector from '../CourseSelector'
+
+type FormCourseSelectorProps = {
+  control: any
+  name: string
+  label: string
+  required?: boolean
+  multiple?: boolean
+  allowAll?: boolean
+  onChange?: (value: any) => void
+} & SelectProps
+export default function FormCourseSelector(props: FormCourseSelectorProps) {
+  const {
+    name,
+    required = false,
+    control,
+    label,
+    allowAll = true,
+    multiple = false,
+    onChange,
+    value,
+  } = props
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <CourseSelector
+          label={label}
+          name={name}
+          onChange={onChange ?? field.onChange}
+          value={value ?? field?.value}
+          allowAll={allowAll}
+          required={required}
+          error={!!error}
+          helperText={error?.message}
+          {...props}
+        />
+      )}
+    />
+  )
+}

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

@@ -0,0 +1,44 @@
+import { SelectProps } from '@mui/material'
+import { Controller } from 'react-hook-form'
+import FeeTypeSelector from '../FeeTypeSelector'
+
+type FormFeeTypeSelectorProps = {
+  control: any
+  name: string
+  label: string
+  required?: boolean
+  multiple?: boolean
+  allowAll?: boolean
+  onChange?: (value: any) => void
+} & SelectProps
+export default function FormFeeTypeSelector(props: FormFeeTypeSelectorProps) {
+  const {
+    name,
+    required = false,
+    control,
+    label,
+    allowAll = true,
+    multiple = false,
+    onChange,
+    value,
+  } = props
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <FeeTypeSelector
+          label={label}
+          name={name}
+          onChange={onChange ?? field.onChange}
+          value={value ?? field?.value}
+          allowAll={allowAll}
+          error={!!error}
+          helperText={error?.message}
+          {...props}
+        />
+      )}
+    />
+  )
+}

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

@@ -0,0 +1,48 @@
+import { SelectProps } from '@mui/material'
+import { Controller } from 'react-hook-form'
+import ProgramSelector from '../ProgramSelector'
+
+type ProgramSelectorProps = {
+  control: any
+  name: string
+  label: string
+  required?: boolean
+  multiple?: boolean
+  allowAll?: boolean
+  filters?: { courseId: number }
+  onChange?: (value: any) => void
+} & SelectProps
+export default function FormProgramSelector(props: ProgramSelectorProps) {
+  const {
+    name,
+    required = false,
+    control,
+    label,
+    multiple = false,
+    allowAll = true,
+    onChange,
+    value,
+    filters,
+  } = props
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <ProgramSelector
+          label={label}
+          name={name}
+          onChange={onChange ?? field.onChange}
+          value={value ?? field?.value}
+          allowAll={allowAll}
+          filters={filters}
+          required={required}
+          error={!!error}
+          helperText={error?.message}
+          {...props}
+        />
+      )}
+    />
+  )
+}

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

@@ -0,0 +1,48 @@
+import { SelectProps } from '@mui/material'
+import { Controller } from 'react-hook-form'
+import QuotaSelector from '../QuotaSelector'
+
+type FormQuotaSelectorProps = {
+  control: any
+  name: string
+  label: string
+  required?: boolean
+  multiple?: boolean
+  allowAll?: boolean
+  onChange?: (value: any) => void
+  filters?: { courseId: number }
+} & SelectProps
+export default function FormQuotaSelector(props: FormQuotaSelectorProps) {
+  const {
+    name,
+    required = false,
+    control,
+    label,
+    allowAll = true,
+    multiple = false,
+    onChange,
+    value,
+    filters,
+  } = props
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <QuotaSelector
+          label={label}
+          name={name}
+          onChange={onChange ?? field.onChange}
+          value={value ?? field?.value}
+          allowAll={allowAll}
+          filters={filters}
+          required={required}
+          error={!!error}
+          helperText={error?.message}
+          {...props}
+        />
+      )}
+    />
+  )
+}

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

@@ -0,0 +1,48 @@
+import { SelectProps } from '@mui/material'
+import { Controller } from 'react-hook-form'
+import SemesterSelector from '../SemesterSelector'
+
+type SemesterSelectorProps = {
+  control: any
+  name: string
+  label: string
+  required?: boolean
+  multiple?: boolean
+  allowAll?: boolean
+  filters?: { courseId: number }
+  onChange?: (value: any) => void
+} & SelectProps
+export default function FormSemseterSelector(props: SemesterSelectorProps) {
+  const {
+    name,
+    required = false,
+    control,
+    label,
+    multiple = false,
+    allowAll = true,
+    onChange,
+    value,
+    filters,
+  } = props
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <SemesterSelector
+          label={label}
+          name={name}
+          onChange={onChange ?? field.onChange}
+          value={value ?? field?.value}
+          allowAll={allowAll}
+          filters={filters}
+          required={required}
+          error={!!error}
+          helperText={error?.message}
+          {...props}
+        />
+      )}
+    />
+  )
+}

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

@@ -0,0 +1,98 @@
+import { SelectProps } from '@mui/material'
+import { useEffect, useState } from 'react'
+import { Controller } from 'react-hook-form'
+import axios from '../../../../config/axios'
+import { MultiSelect } from '../../../Input'
+
+type MultiProgramSelectorProps = {
+  control: any
+  name?: string
+  label: string
+  filters?: { courseId: number }
+  required?: boolean
+  onChange?: (value: any) => void
+  allowAll?: boolean
+  error?: boolean
+  helperText?: string
+} & SelectProps
+const MultiProgramSelector = (props: MultiProgramSelectorProps) => {
+  const {
+    control,
+    onChange,
+    name,
+    required = false,
+    label,
+    multiple = false,
+    filters,
+    value,
+    allowAll = true,
+  } = props
+  const [options, setOptions] = useState([])
+  const [prevCourseId, setPrevCourseId] = useState(null)
+  const handleOpen = () => {
+    if (filters) {
+      if (filters.courseId && filters.courseId !== prevCourseId) {
+        setOptions([])
+        axios
+          .get('/square/branches', {
+            params: filters,
+          })
+          .then((response) => {
+            setOptions(response.data)
+            setPrevCourseId(filters.courseId)
+          })
+          .catch((error) => {
+            console.error('Error fetching data from the API:', error)
+          })
+      }
+    } else if (options.length === 0) {
+      axios
+        .get('/square/branches')
+        .then((response) => {
+          setOptions(response.data)
+        })
+        .catch((error) => {
+          console.error('Error fetching data from the API:', error)
+        })
+    }
+  }
+  useEffect(() => {
+    if (props?.value && props.value != 'all') {
+      handleOpen()
+    }
+  }, [props.value])
+
+  const handleOptions =
+    options.length > 0
+      ? [
+          ...(allowAll ? [{ value: 'all', label: 'All' }] : []),
+          ...options.map((item) => ({
+            label: `${item.branchName}`,
+            value: `${item.branchCode}`,
+          })),
+        ]
+      : allowAll
+      ? [{ value: 'all', label: 'All' }]
+      : []
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <MultiSelect
+          name={name}
+          label={label}
+          required={required}
+          options={handleOptions}
+          onOpen={handleOpen}
+          onChange={onChange ?? field.onChange}
+          value={value ?? field?.value}
+          error={!!error}
+          helperText={error?.message}
+        />
+      )}
+    />
+  )
+}
+export default MultiProgramSelector

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

@@ -0,0 +1,96 @@
+import { SelectProps } from '@mui/material'
+import { useEffect, useState } from 'react'
+import { Controller } from 'react-hook-form'
+import axios from '../../../../config/axios'
+import { MultiSelect } from '../../../Input'
+
+type MultiQuotaSelectorProps = {
+  control: any
+  name?: string
+  label: string
+  filters?: { courseId: number }
+  required?: boolean
+  onChange?: (value: any) => void
+  allowAll?: boolean
+  error?: boolean
+  helperText?: string
+} & SelectProps
+export default function MultiQuotaSelector(props: MultiQuotaSelectorProps) {
+  const {
+    control,
+    onChange,
+    name,
+    required = false,
+    label,
+    multiple = false,
+    filters,
+    value,
+    allowAll = true,
+  } = props
+  const [options, setOptions] = useState([])
+  const [prevCourseId, setPrevCourseId] = useState(null)
+  const handleOpen = () => {
+    if (filters) {
+      if (filters.courseId && filters.courseId !== prevCourseId) {
+        setOptions([])
+        axios
+          .get('/square/quotas', {
+            params: filters,
+          })
+          .then((response) => {
+            setOptions(response.data)
+            setPrevCourseId(filters.courseId)
+          })
+          .catch((error) => {
+            console.error('Error fetching data from the API:', error)
+          })
+      }
+    } else if (options.length === 0) {
+      axios
+        .get('/square/quotas')
+        .then((response) => {
+          setOptions(response.data)
+        })
+        .catch((error) => {
+          console.error('Error fetching data from the API:', error)
+        })
+    }
+  }
+  useEffect(() => {
+    if (props?.value && props.value != 'all') {
+      handleOpen()
+    }
+  }, [props.value])
+  const handleOptions =
+    options.length > 0
+      ? [
+          ...(allowAll ? [{ value: 'all', label: 'All' }] : []),
+          ...options.map((item) => ({
+            label: `${item.name}`,
+            value: `${item.id}`,
+          })),
+        ]
+      : allowAll
+      ? [{ value: 'all', label: 'All' }]
+      : []
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <MultiSelect
+          name={name}
+          label={label}
+          required={required}
+          options={handleOptions}
+          onOpen={handleOpen}
+          onChange={onChange ?? field.onChange}
+          value={value ?? field?.value}
+          error={!!error}
+          helperText={error?.message}
+        />
+      )}
+    />
+  )
+}