@campxdev/shared 1.10.64 → 1.10.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.10.64",
+  "version": "1.10.66",
   "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/Input/TimePicker.tsx

@@ -16,6 +16,7 @@ export interface ITimePicker {
   placeholder?: string
   inputProps?: TextFieldProps
   size?: 'medium' | 'small'
+  disabled?: boolean
 }
 
 export default function TimePicker({
@@ -28,6 +29,7 @@ export default function TimePicker({
   value,
   placeholder,
   size = 'medium',
+  disabled,
   ...rest
 }: ITimePicker) {
   return (
@@ -68,6 +70,7 @@ export default function TimePicker({
                 </InputAdornment>
               ),
             }}
+            disabled={disabled}
             {...rest.inputProps}
           />
         )

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}
+        />
+      )}
+    />
+  )
+}

package/src/components/Selectors/ProgramSelector.tsx

@@ -1,20 +1,46 @@
-import { useState } from 'react'
-import { FormSingleSelect } from '../HookForm'
-import axios from '../../config/axios'
 import { SelectProps } from '@mui/material'
+import { useEffect, useState } from 'react'
+import axios from '../../config/axios'
+import { SingleSelect } from '../Input'
 
 type ProgramSelectorProps = {
-  control: any
-  name: string
+  name?: string
   label: string
+  filters?: { courseId: number }
   required?: boolean
-  multiple?: boolean
+  onChange?: (value: any) => void
+  allowAll?: boolean
+  error?: boolean
+  helperText?: string
 } & SelectProps
-export default function ProgramSelector(props: ProgramSelectorProps) {
-  const { name, required = false, control, label, multiple = false } = props
+const ProgramSelector = (props: ProgramSelectorProps) => {
+  const {
+    name,
+    required = false,
+    label,
+    multiple = false,
+    filters,
+    allowAll = true,
+  } = props
   const [options, setOptions] = useState([])
-  const handleOpen = (e) => {
-    if (options.length === 0) {
+  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) => {
@@ -25,25 +51,35 @@ export default function ProgramSelector(props: ProgramSelectorProps) {
         })
     }
   }
+  useEffect(() => {
+    if (props?.value && props.value != 'all') {
+      handleOpen()
+    }
+  }, [props.value])
+
   const handleOptions =
     options.length > 0
       ? [
-          { value: 'all', label: 'All' },
+          ...(allowAll ? [{ value: 'all', label: 'All' }] : []),
           ...options.map((item) => ({
-            label: `${item.branchName} (${item.course.courseName})`,
-            value: `${item.id}`,
+            label: `${item.branchName}`,
+            value: `${item.branchCode}`,
           })),
         ]
-      : [{ value: 'all', label: 'All' }]
+      : allowAll
+      ? [{ value: 'all', label: 'All' }]
+      : []
+
   return (
-    <FormSingleSelect
-      control={control}
+    <SingleSelect
       name={name}
       label={label}
       required={required}
       options={handleOptions}
       onOpen={handleOpen}
+      defaultValue="all"
       {...props}
     />
   )
 }
+export default ProgramSelector

package/src/components/Selectors/QuotaSelector.tsx

@@ -0,0 +1,83 @@
+import { SelectProps } from '@mui/material'
+import { useEffect, useState } from 'react'
+import axios from '../../config/axios'
+import { SingleSelect } from '../Input'
+
+type QuotaSelectorProps = {
+  name?: string
+  label: string
+  filters?: { courseId: number }
+  required?: boolean
+  onChange?: (value: any) => void
+  allowAll?: boolean
+  error?: boolean
+  helperText?: string
+} & SelectProps
+export default function QuotaSelector(props: QuotaSelectorProps) {
+  const {
+    name,
+    required = false,
+    label,
+    multiple = false,
+    filters,
+    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 (
+    <SingleSelect
+      name={name}
+      label={label}
+      required={required}
+      options={handleOptions}
+      onOpen={handleOpen}
+      defaultValue="all"
+      {...props}
+    />
+  )
+}

package/src/components/Selectors/SemesterSelector.tsx

@@ -0,0 +1,85 @@
+import { SelectProps } from '@mui/material'
+import { useEffect, useState } from 'react'
+import axios from '../../config/axios'
+import { SingleSelect } from '../Input'
+
+type SemesterSelectorProps = {
+  name?: string
+  label: string
+  filters?: { courseId: number }
+  required?: boolean
+  onChange?: (value: any) => void
+  allowAll?: boolean
+  error?: boolean
+  helperText?: string
+} & SelectProps
+const SemesterSelector = (props: SemesterSelectorProps) => {
+  const {
+    name,
+    required = false,
+    label,
+    multiple = false,
+    filters,
+    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/semesters', {
+            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/semesters')
+        .then((response) => {
+          setOptions(response.data)
+        })
+        .catch((error) => {
+          console.error('Error fetching data from the API:', error)
+        })
+    }
+  }
+  useEffect(() => {
+    console.log(props.value)
+    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.semNo}`,
+          })),
+        ]
+      : allowAll
+      ? [{ value: 'all', label: 'All' }]
+      : []
+
+  return (
+    <SingleSelect
+      name={name}
+      label={label}
+      required={required}
+      options={handleOptions}
+      onOpen={handleOpen}
+      {...props}
+    />
+  )
+}
+export default SemesterSelector

package/src/components/Selectors/index.tsx

@@ -1,2 +1,27 @@
+import CourseSelector from './CourseSelector'
+import FeeTypeSelector from './FeeTypeSelector'
+import FormCourseSelector from './FormSelectors/FormCourseSelector'
+import FormFeeTypeSelector from './FormSelectors/FormFeeTypeSelector'
+import FormProgramSelector from './FormSelectors/FormProgramSelector'
+import FormQuotaSelector from './FormSelectors/FormQuotaSelector'
+import FormSemseterSelector from './FormSelectors/FormSemesterSelector'
+import MultiProgramSelector from './FormSelectors/MultiSelect/MultiProgramSelector'
+import MultiQuotaSelector from './FormSelectors/MultiSelect/MultiQuotaSelector'
 import ProgramSelector from './ProgramSelector'
-export { ProgramSelector }
+import QuotaSelector from './QuotaSelector'
+import SemesterSelector from './SemesterSelector'
+
+export {
+  CourseSelector,
+  FeeTypeSelector,
+  FormCourseSelector,
+  FormFeeTypeSelector,
+  FormProgramSelector,
+  FormQuotaSelector,
+  FormSemseterSelector,
+  MultiProgramSelector,
+  MultiQuotaSelector,
+  ProgramSelector,
+  QuotaSelector,
+  SemesterSelector,
+}

package/src/components/Tables/MobileTable/MobileTable.tsx

@@ -0,0 +1,218 @@
+import {
+  Box,
+  IconButton,
+  ListItemIcon,
+  Table as MuiTable,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  alpha,
+  styled,
+} from '@mui/material'
+import _ from 'lodash'
+import { useEffect, useState } from 'react'
+import Spinner from '../../Spinner'
+import TableFooter from '../BasicTable/TableFooter'
+import NoRecordsFound from '../common/NoRecordsFound'
+import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
+
+export interface ColumnProps {
+  dataIndex: string
+  key: string
+  title: any
+  render?: (cellData: any, row: any, index: number) => any
+  textColor?: string
+  sort?: boolean
+  width?: string //pixels
+}
+
+interface TableProps {
+  columns: Array<ColumnProps>
+  rowKey?: string
+  dataSource?: any[]
+  loading?: boolean
+  onRowClick?: (row: any) => void
+  pagination?: {
+    page: number
+    limit: number
+    totalCount: number
+    onChange: (v: number) => void
+    onChangeLimit?: (v: number) => void
+  }
+  onSort?: (sort: any) => void
+  dense?: boolean
+  isLastRowColorChange?: boolean
+}
+
+type Order = 'asc' | 'desc' | ''
+type Sort = {}
+
+export default function MobileTable({
+  columns,
+  dataSource,
+  onRowClick,
+  pagination,
+  loading,
+  onSort,
+  dense = false,
+  isLastRowColorChange = false,
+}: TableProps) {
+  const [sort, setSort] = useState<Sort>({})
+
+  const handleSortClick = (sortBykey) => {
+    setSort((prev) => {
+      if (prev[sortBykey]) {
+        if (prev[sortBykey] === 'desc') return { ...prev, [sortBykey]: 'asc' }
+        if (prev[sortBykey] === 'asc') {
+          delete prev[sortBykey]
+          return { ...prev }
+        }
+      } else {
+        return {
+          ...prev,
+          [sortBykey]: 'desc',
+        }
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (!onSort) return
+
+    onSort({
+      sortBy: Object.keys(sort).join(','),
+      sortOrder: Object.keys(sort)
+        .map((item) => sort[item])
+        .join(','),
+    })
+  }, [sort])
+
+  return (
+    <StyledTableContainer>
+      <>
+        <StyledMuiTable>
+          <TableHead>
+            <TableRow>
+              {columns.map((col, index) => (
+                <TableCell
+                  key={index}
+                  sx={{
+                    ...(col?.width && {
+                      width: col?.width,
+                    }),
+                    borderRightColor: '#1212121A',
+                    borderRightStyle: 'solid',
+                  }}
+                >
+                  <Box sx={{ fontWeight: 500, fontSize: '14px' }}>
+                    {col.title}
+                  </Box>
+                  {col.sort && (
+                    <IconButton onClick={() => handleSortClick(col.dataIndex)}>
+                      <ListItemIcon>
+                        {sort[col.dataIndex] === 'asc' ? (
+                          <SortAscIcon />
+                        ) : sort[col.dataIndex] === 'desc' ? (
+                          <SortDescIcon />
+                        ) : (
+                          <SortIcon />
+                        )}
+                      </ListItemIcon>
+                    </IconButton>
+                  )}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          {!loading ? (
+            <>
+              {dataSource?.length ? (
+                <TableBody>
+                  {dataSource?.map((row, index) => (
+                    <StyledTableRow
+                      canRowClick={!!onRowClick}
+                      hover={!!onRowClick}
+                      key={index}
+                      onClick={() => {
+                        return onRowClick && onRowClick(row)
+                      }}
+                      isLastRowColorChange={isLastRowColorChange}
+                    >
+                      {columns.map((col, colIndex) => (
+                        <TableCell
+                          sx={{
+                            color: col.textColor,
+                            padding: dense ? '10px' : '15px',
+                            font: 'avenir',
+                            fontSize: '14px',
+                            borderRightColor: '#1212121A',
+                            borderRightStyle: 'solid',
+                          }}
+                          key={colIndex}
+                        >
+                          <>
+                            {col?.render
+                              ? col.render(row[col.dataIndex], row, index)
+                              : _.get(row, col.dataIndex)}
+                          </>
+                        </TableCell>
+                      ))}
+                    </StyledTableRow>
+                  ))}
+                </TableBody>
+              ) : (
+                <>
+                  <NoRecordsFound colLength={columns?.length} />
+                </>
+              )}
+            </>
+          ) : (
+            <Spinner />
+          )}
+        </StyledMuiTable>
+      </>
+      <>
+        {pagination && (
+          <TableFooter
+            page={pagination.page + 1}
+            limit={pagination.limit}
+            totalCount={pagination.totalCount ?? 0}
+            handlePagination={pagination.onChange}
+            handlePageLimit={pagination.onChangeLimit}
+          />
+        )}
+      </>
+    </StyledTableContainer>
+  )
+}
+
+const StyledTableContainer = styled(TableContainer)<{}>(({ theme }) => ({
+  width: '100%',
+  overflowX: 'auto',
+  borderRadius: '10px 10px 10px 10px',
+  border: '1px solid #1212121A',
+}))
+
+const StyledMuiTable = styled(MuiTable)<{}>(({ theme }) => ({
+  border: 'none',
+}))
+
+const StyledTableRow = styled(TableRow, {
+  shouldForwardProp: (prop) => prop !== 'canRowClick',
+})<{ canRowClick: boolean; isLastRowColorChange?: boolean }>(
+  ({ canRowClick, isLastRowColorChange }) => ({
+    ...(canRowClick && {
+      cursor: 'pointer',
+      '&.MuiTableRow-hover:hover': {
+        backgroundColor: alpha('#f2f2f2', 0.4),
+      },
+    }),
+    ...(isLastRowColorChange && {
+      '&:last-child': {
+        backgroundColor: '#F2F2F2',
+      },
+    }),
+  }),
+)

package/src/components/Tables/MobileTable/index.tsx

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

package/src/components/Tabs/TabsContainer.tsx

@@ -11,17 +11,21 @@ export interface TabsContainerProps {
     highlight?: boolean
   }[]
   size?: 'small' | 'medium'
-  conatinerVariant?: 'box' | 'page'
+  containerVariant?: 'box' | 'page'
   onTabChange?: (tabKey: string) => void
   isMobile?: boolean
+  tabUnderlineColor?: string
+  tabMobileUnderlineColor?: string
 }
 
 export default function TabsContainer({
   tabs,
   size = 'small',
-  conatinerVariant = 'box',
+  containerVariant = 'box',
   isMobile = false,
   onTabChange,
+  tabUnderlineColor,
+  tabMobileUnderlineColor,
 }: TabsContainerProps) {
   const [currentTab, setCurrentTab] = useState(tabs[0].key)
 
@@ -36,7 +40,7 @@ export default function TabsContainer({
   return (
     <StyledContainer>
       <StyledTabs
-        containerVariant={conatinerVariant}
+        containerVariant={containerVariant}
         size={size}
         onChange={handleTabsChange}
         value={currentTab}
@@ -45,6 +49,8 @@ export default function TabsContainer({
         textColor="primary"
         indicatorColor="primary"
         isMobile={isMobile}
+        underlineColor={tabUnderlineColor}
+        mobileUnderlineColor={tabMobileUnderlineColor}
       >
         {tabs.map((tab) => (
           <Tab
@@ -56,7 +62,7 @@ export default function TabsContainer({
           />
         ))}
       </StyledTabs>
-      <StyledComponentWrapper containerVariant={conatinerVariant}>
+      <StyledComponentWrapper containerVariant={containerVariant}>
         <ErrorBoundary>
           {tabs.find((tab) => tab.key === currentTab)?.component}
         </ErrorBoundary>

package/src/components/Tabs/styles.tsx

@@ -1,50 +1,62 @@
 import { Box, Stack, styled, Tabs } from '@mui/material'
 
-export const StyledTabs = styled(Tabs)<{
+interface StyledTabsProps {
   size: 'small' | 'medium'
   containerVariant?: 'page' | 'box'
   isMobile?: false | true
-}>(({ theme, size, containerVariant, isMobile }) => ({
-  borderTopRightRadius: '10px',
-  borderTopLeftRadius: '10px',
-  background: theme.palette.secondary.light,
-  minHeight: isMobile ? '30px' : '60px',
-  paddingLeft: '15px',
-  '& .MuiTabs-indicator': {
-    backgroundColor: theme.palette.common.yellow,
-    [theme.breakpoints.down('sm')]: {
-      backgroundColor: theme.palette.primary.main,
+  underlineColor?: string
+  mobileUnderlineColor?: string
+}
+
+export const StyledTabs = styled(Tabs)<StyledTabsProps>(
+  ({
+    theme,
+    size,
+    containerVariant,
+    isMobile,
+    underlineColor,
+    mobileUnderlineColor,
+  }) => ({
+    borderTopRightRadius: '10px',
+    borderTopLeftRadius: '10px',
+    background: theme.palette.secondary.light,
+    minHeight: isMobile ? '30px' : '60px',
+    paddingLeft: '15px',
+    '& .MuiTabs-indicator': {
+      backgroundColor: isMobile
+        ? mobileUnderlineColor
+        : underlineColor ?? theme.palette.common.yellow,
     },
-  },
-  '& span': {
-    color: theme.palette.error.main,
-    fontSize: '20px',
-    marginTop: '-20px',
-    marginLeft: '3px  !important',
-  },
-  '& .MuiTabs-flexContainer': {
-    height: '100%',
-    alignItems: 'end',
-    justifyContent: isMobile ? 'center' : 'flex-start',
-  },
-  '& .MuiTab-root': {
-    textTransform: 'none',
-    transition: 'color 0.2s ease-in-out',
-    padding: '5px 15px',
-    paddingBottom: '8px',
-    minHeight: 0,
-    fontSize: size === 'medium' ? '16px' : '14px',
-    fontWeight: '600',
-  },
-  '& .MuiTab-root.Mui-selected': {
-    color: theme.palette.secondary.main,
-  },
-  ...(containerVariant === 'page' && {
-    background: 'none',
-    paddingLeft: 0,
-    borderBottom: theme.borders.grayLight,
+    '& span': {
+      color: theme.palette.error.main,
+      fontSize: '20px',
+      marginTop: '-20px',
+      marginLeft: '3px  !important',
+    },
+    '& .MuiTabs-flexContainer': {
+      height: '100%',
+      alignItems: 'end',
+      justifyContent: isMobile ? 'center' : 'flex-start',
+    },
+    '& .MuiTab-root': {
+      textTransform: 'none',
+      transition: 'color 0.2s ease-in-out',
+      padding: '5px 15px',
+      paddingBottom: '8px',
+      minHeight: 0,
+      fontSize: size === 'medium' ? '16px' : '14px',
+      fontWeight: isMobile ? '500' : '600',
+    },
+    '& .MuiTab-root.Mui-selected': {
+      color: theme.palette.secondary.main,
+    },
+    ...(containerVariant === 'page' && {
+      background: 'none',
+      paddingLeft: 0,
+      borderBottom: theme.borders.grayLight,
+    }),
   }),
-}))
+)
 
 export const StyledContainer = styled(Stack)(({ theme }) => ({
   borderRadius: '10px',

package/src/components/index.ts

@@ -42,7 +42,6 @@ import UploadFileDialog from './UploadFileDialog'
 export { default as ActionButton } from './ActionButton'
 export { default as AutocompleteSearch } from './AutocompleteSearch'
 export { default as Breadcrumbs } from './Breadcrumbs'
-export { default as ReportPageHeader } from './ReportPageHeader'
 export { default as Card } from './Card'
 export { default as CardsGrid } from './CardsGrid'
 export { default as DividerHeading } from './DividerHeading'
@@ -56,10 +55,12 @@ export { default as NoDataIllustration } from './NoDataIllustration'
 export { PageContent } from './PageContent'
 export { default as PageHeader } from './PageHeader'
 export { default as useConfirm } from './PopupConfirm/useConfirm'
+export { default as ReportPageHeader } from './ReportPageHeader'
 export { default as Spinner } from './Spinner'
 export { default as SwitchButton } from './SwitchButton'
 export { default as Table } from './Tables/BasicTable'
 export { default as TableFooter } from './Tables/BasicTable/TableFooter'
+export { default as MobileTable } from './Tables/MobileTable'
 export { default as ReactTable } from './Tables/ReactTable'
 export { default as Tabs } from './Tabs/Tabs'
 export { default as ToastContainer } from './ToastContainer'
@@ -111,5 +112,5 @@ export {
 export * from './HookForm'
 export * from './IconButtons'
 export * from './Input'
-export * from './UploadButton/types'
 export * from './Selectors'
+export * from './UploadButton/types'