@campxdev/shared 1.10.70 → 1.10.71

package/package.json

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

package/src/components/Form/Form.tsx

@@ -1,80 +1,101 @@
 import { yupResolver } from '@hookform/resolvers/yup'
-import { Alert, Box, ButtonProps, Typography } from '@mui/material'
-import { AxiosResponse } from 'axios'
+import {
+  Alert,
+  Box,
+  Button,
+  ButtonProps,
+  CircularProgress,
+  Typography,
+} from '@mui/material'
+
 import { ReactNode, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { useMutation, useQueryClient } from 'react-query'
-import { axiosErrorToast } from '../../config/axios'
-import ActionButton from '../ActionButton'
-import RenderForm, { generateYupSchema, RenderFormProps } from './RenderForm'
+import { toast } from 'react-toastify'
+import axios, { axiosErrorToast } from '../../config/axios'
+import RenderForm, { RenderFormProps, generateYupSchema } from './RenderForm'
+
+const makePostRequest = async ({
+  endpoint,
+  postBody,
+}: {
+  endpoint: string
+  postBody: any
+}) => {
+  const method = postBody?.id ? 'PUT' : 'POST'
+  const url = postBody?.id ? `${endpoint}/${postBody?.id}` : endpoint
+  return await axios({
+    url,
+    method,
+    data: postBody,
+  })
+}
 
 interface FormProps extends Omit<RenderFormProps, 'control'> {
   buttonProps?: ButtonProps
   submitBtn?: { label?: ReactNode }
-  cancelBtn?: { label?: ReactNode; hide: boolean }
+  cancelBtn?: { label?: ReactNode }
+  onSubmit?: (formData) => any
+  onCancel?: () => void
+  endPoint?: string
   defaultValues?: any
   refetchKey?: string
-  previousData?: any
-  onCancel?: () => void
-  postFunction: (body: any) => Promise<AxiosResponse>
-  onPostSuccess?: (response: any) => void
-  onPostError?: (error: any) => void
-  onFormError?: (error: any) => void
+  onSuccess?: () => void
+  successToastMessage?: string
 }
 
 export default function Form({
   submitBtn = { label: 'Submit' },
-  cancelBtn = { label: 'Cancel', hide: false },
+  cancelBtn = { label: 'Cancel' },
   buttonProps,
+  onSubmit = () => {},
+  endPoint,
   defaultValues,
   cols,
   fields,
   dropdowns,
   refetchKey,
+  onSuccess = () => {},
   onCancel,
-  previousData,
-  postFunction,
-  onPostSuccess,
-  onPostError,
-  gap,
-  onFormError,
+  successToastMessage,
 }: FormProps) {
   const queryClient = useQueryClient()
   const [error, setError] = useState<any>(null)
   const { control, watch, handleSubmit } = useForm({
-    defaultValues: previousData ? previousData : null,
-    resolver: yupResolver(
-      generateYupSchema({
-        fieldGroups: fields as any,
-      }),
-    ),
+    defaultValues,
+    resolver: yupResolver(generateYupSchema({ fieldGroups: [fields] })),
   })
 
-  const { mutate, isLoading: posting } = useMutation(postFunction, {
+  const { data, mutate, isLoading } = useMutation(makePostRequest, {
     onSuccess(data) {
       queryClient.invalidateQueries(refetchKey)
-      onPostSuccess && onPostSuccess(data)
+      toast.success(successToastMessage ?? 'Created Successfully')
+      onSuccess && onSuccess()
     },
     onError(error: any) {
-      onPostError ? onPostError(error) : axiosErrorToast(error)
+      setError(error?.response?.data?.message)
+      axiosErrorToast(error)
     },
   })
 
   const onError = (error) => {
     const errorArray = Object.values(error)?.map((item: any) => item?.message)
     setError(errorArray)
-    onFormError && onFormError(error)
   }
 
   return (
     <form
       onSubmit={handleSubmit((originalFormData) => {
-        mutate(originalFormData)
+        const modifiedFormData = onSubmit(originalFormData) ?? originalFormData
+
+        mutate({
+          endpoint: endPoint,
+          postBody: modifiedFormData,
+        })
       }, onError)}
     >
       <RenderForm
         cols={cols}
-        gap={gap}
         fields={fields}
         control={control}
         dropdowns={dropdowns}
@@ -85,36 +106,41 @@ export default function Form({
         sx={{
           display: 'flex',
           gap: '20px',
-          marginTop: `20px`,
-          justifyContent: 'center',
+          marginTop: '3rem',
         }}
       >
-        <ActionButton
-          loading={posting}
-          disabled={posting}
+        <Button
+          fullWidth
           type="submit"
+          disabled={isLoading}
+          endIcon={
+            isLoading && <CircularProgress sx={{ color: 'white' }} size={20} />
+          }
           {...buttonProps}
         >
           {submitBtn?.label}
-        </ActionButton>
-        {!cancelBtn?.hide && (
-          <ActionButton
-            fullWidth
-            variant="outlined"
-            onClick={() => {
-              onCancel ? onCancel() : null
-            }}
-            {...buttonProps}
-          >
-            {cancelBtn?.label}
-          </ActionButton>
-        )}
+        </Button>
+        <Button
+          fullWidth
+          variant="outlined"
+          onClick={() => {
+            onCancel ? onCancel() : null
+          }}
+          disabled={isLoading}
+          {...buttonProps}
+        >
+          {cancelBtn?.label}
+        </Button>
       </Box>
     </form>
   )
 }
 
-const FormErrorDisplay = ({ message }: { message: string | string[] }) => {
+export const FormErrorDisplay = ({
+  message,
+}: {
+  message: string | string[]
+}) => {
   if (!message) return null
 
   if (typeof message === 'string')

package/src/components/Form/RenderForm.tsx

@@ -1,10 +1,12 @@
-import { Box, Typography } from '@mui/material'
+import { Box, CircularProgress, Typography, alpha, styled } from '@mui/material'
 import { ReactNode } from 'react'
+import { Control, useController } from 'react-hook-form'
 import * as yup from 'yup'
-import { Control } from 'react-hook-form'
 import {
   FormDatePicker,
+  FormMultiSelect,
   FormRadioGroup,
+  FormSingleCheckbox,
   FormSingleSelect,
   FormTextField,
 } from '../HookForm'
@@ -38,6 +40,9 @@ type FormTypes =
   | 'FormSingleSelect'
   | 'FormRadioGroup'
   | 'FormDatePicker'
+  | 'FormMultiSelect'
+  | 'Loader'
+  | 'FormSingleCheckbox'
 
 export interface Field {
   render: FormTypes
@@ -46,12 +51,17 @@ export interface Field {
   required?: boolean
   elementProps?: any
   disabled?: boolean
-  valiation?: any
+  validation?: any
+}
+
+export interface Option {
+  label: string | ReactNode
+  value: any
 }
 
 export interface RenderFormProps {
   fields: Field[]
-  dropdowns?: { [x: string]: { label: string | ReactNode; value: any }[] }
+  dropdowns?: { [x: string]: Option[] }
   control: Control<any, any>
   cols: number
   data?: any
@@ -66,7 +76,7 @@ const RenderForm = ({
   cols,
   data = null,
   fieldArrayOptions,
-  gap = '1rem',
+  gap = '20px 1rem',
 }: RenderFormProps) => {
   return (
     <>
@@ -106,6 +116,7 @@ const renderFormField = ({
     ? `${fieldArrayOptions?.name}.${fieldArrayOptions?.index}.${field?.name}`
     : field?.name
 
+  const { field: fieldData } = useController({ name: field.name, control })
   switch (field.render) {
     case 'FormTextField':
       return (
@@ -134,7 +145,6 @@ const renderFormField = ({
     case 'FormDatePicker':
       return (
         <FormDatePicker
-          size="medium"
           control={control}
           name={name}
           label={field?.label}
@@ -156,34 +166,66 @@ const renderFormField = ({
           {...elementProps}
         />
       )
+    case 'FormMultiSelect':
+      return (
+        <FormMultiSelect
+          control={control}
+          label={field?.label}
+          required={field?.required}
+          disabled={field?.disabled}
+          name={name}
+          options={dropdown}
+          {...elementProps}
+        />
+      )
+
     case 'Display':
-      return <FormDisplay label={field?.label} value={value} />
+      return (
+        <Display
+          label={field?.label}
+          value={fieldData.value}
+          disabled={field?.disabled}
+        />
+      )
 
-    case 'NestedForm':
-      return <NestedForm label={field?.label} nestedFields={[]} />
+    case 'Loader':
+      return <CircularProgress />
+
+    case 'FormSingleCheckbox':
+      return (
+        <FormSingleCheckbox
+          control={control}
+          label={field?.label}
+          required={field?.required}
+          disabled={field?.disabled}
+          name={name}
+          checked={fieldData.value ?? false}
+          {...elementProps}
+        />
+      )
 
     default:
       return <>{field?.label}</>
   }
 }
 
-const FormDisplay = ({ label, value }) => {
+const Display = ({ label, value, disabled }) => {
   return (
     <Box>
       <Typography variant="subtitle2">{label}</Typography>
-      <Typography variant="body1" marginTop={'5px'}>
+      <StyledTypography variant="body1" marginTop={'5px'} disabled={disabled}>
         {value ?? '-'}
-      </Typography>
+      </StyledTypography>
     </Box>
   )
 }
 
-const NestedForm = ({
-  nestedFields,
-  label,
-}: {
-  label: ReactNode
-  nestedFields: Field[]
-}) => {
-  return <></>
-}
+const StyledTypography = styled(Typography, {
+  shouldForwardProp(propName) {
+    return propName !== 'disabled'
+  },
+})<{ disabled: boolean }>(({ theme, disabled }) => ({
+  color: disabled
+    ? alpha(theme.palette.secondary.main, 0.4)
+    : theme.palette.secondary.main,
+}))

package/src/components/HookForm/InlineTextField.tsx

@@ -0,0 +1,74 @@
+import { Box, styled, TextField, Typography } from '@mui/material'
+import { Controller } from 'react-hook-form'
+
+const StyledInlineTextField = styled(TextField)(({ theme }) => ({
+  maxHeight: '35px',
+  '& legend': {
+    display: 'none',
+  },
+
+  '& fieldset': {
+    top: 0,
+  },
+}))
+
+const StyledInlineFlex = styled(Box)(({ theme }) => ({
+  width: '100%',
+  flexWrap: 'wrap',
+  display: 'flex',
+  gap: '10px',
+  alignItems: 'baseline',
+  '& .MuiTypography-root': {
+    flexShrink: 0,
+  },
+  '& .MuiTextField-root': {
+    maxWidth: '100px',
+  },
+}))
+
+export const FormInlineTextField = ({ control, label }) => {
+  const regex = /\{([^}]+)\}/
+  const splitArr = label.split(regex)
+
+  function getParsedArr(arr) {
+    for (let i = 1; i < arr.length; i += 2) {
+      const split = arr[i].split(':')
+      arr[i] = (
+        <Controller
+          name={split[0]}
+          control={control}
+          render={({ field: { onChange, value }, fieldState: { error } }) => (
+            <StyledInlineTextField
+              size="small"
+              key={i}
+              placeholder={split[1] ?? ''}
+              value={value}
+              onChange={onChange}
+              error={error ? true : false}
+              helperText={error ? error.message : null}
+            />
+          )}
+        />
+      )
+    }
+    return arr
+  }
+
+  return (
+    <StyledInlineFlex>
+      {getParsedArr(splitArr)?.map((item, index) => {
+        if (typeof item === 'string' && item.length) {
+          return (
+            <Typography variant="body1" key={index}>
+              {item}
+            </Typography>
+          )
+        }
+
+        return item
+      })}
+    </StyledInlineFlex>
+  )
+}
+
+export default FormInlineTextField

package/src/components/HookForm/index.ts

@@ -1,23 +1,25 @@
-import SingleSelect from './SingleSelect'
+import AutoCompleteSearch from './AutoCompleteSearch'
 import FormDatePicker from './DatePicker'
+import FormDateTimePicker from './DateTimePicker'
+import FormInlineTextField from './InLineTextField'
 import MultiCheckbox from './MultiCheckbox'
 import MultiSelect from './MultiSelect'
 import RadioGroup from './RadioGroup'
 import SingleCheckbox from './SingleCheckbox'
-import AutoCompleteSearch from './AutoCompleteSearch'
+import SingleSelect from './SingleSelect'
 import FormTextField from './TextField'
 import TimePicker from './TimePicker'
-import FormDateTimePicker from './DateTimePicker'
 
 export {
-  SingleSelect as FormSingleSelect,
+  AutoCompleteSearch as FormAutoCompleteSearch,
   FormDatePicker,
-  FormTextField,
+  FormDateTimePicker,
+  FormInlineTextField,
   MultiCheckbox as FormMultiCheckbox,
   MultiSelect as FormMultiSelect,
   RadioGroup as FormRadioGroup,
   SingleCheckbox as FormSingleCheckbox,
-  AutoCompleteSearch as FormAutoCompleteSearch,
+  SingleSelect as FormSingleSelect,
+  FormTextField,
   TimePicker as FormTimePicker,
-  FormDateTimePicker,
 }

package/src/components/ListItemButton.tsx

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

package/src/components/Selectors/CourseSelector.tsx

@@ -11,17 +11,25 @@ type CourseSelectorProps = {
   allowAll?: boolean
   error?: boolean
   helperText?: string
+  api?: string
 } & SelectProps
 export default function CourseSelector(props: CourseSelectorProps) {
-  const { name, required = false, label, onChange, allowAll = true } = props
+  const {
+    name,
+    required = false,
+    label,
+    onChange,
+    allowAll = true,
+    api = '/square/courses',
+  } = props
   const [options, setOptions] = useState([])
 
   const handleOpen = () => {
     if (options.length === 0) {
       axios
-        .get('/square/courses')
+        .get(api)
         .then((response) => {
-          setOptions(response.data.courses)
+          setOptions(response.data)
         })
         .catch((error) => {
           console.error('Error fetching data from the API:', error)

package/src/components/Selectors/FeeTypeSelector.tsx

@@ -19,7 +19,7 @@ export default function FeeTypeSelector(props: FeeTypeSelectorProps) {
   const handleOpen = () => {
     if (options.length === 0) {
       axios
-        .get('/payments/fee-types')
+        .get('/paymentx/fee-types')
         .then((response) => {
           setOptions(response.data)
         })
@@ -40,7 +40,7 @@ export default function FeeTypeSelector(props: FeeTypeSelectorProps) {
           ...(allowAll ? [{ value: 'all', label: 'All' }] : []),
           ...options.map((item) => ({
             label: `${item.name} `,
-            value: `${item.slug}`,
+            value: `${item.id}`,
           })),
         ]
       : allowAll

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

@@ -10,6 +10,7 @@ type FormCourseSelectorProps = {
   multiple?: boolean
   allowAll?: boolean
   onChange?: (value: any) => void
+  api?: string
 } & SelectProps
 export default function FormCourseSelector(props: FormCourseSelectorProps) {
   const {
@@ -21,6 +22,7 @@ export default function FormCourseSelector(props: FormCourseSelectorProps) {
     multiple = false,
     onChange,
     value,
+    api,
   } = props
 
   return (

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

@@ -10,6 +10,7 @@ type FormFeeTypeSelectorProps = {
   multiple?: boolean
   allowAll?: boolean
   onChange?: (value: any) => void
+  api?: string
 } & SelectProps
 export default function FormFeeTypeSelector(props: FormFeeTypeSelectorProps) {
   const {
@@ -21,6 +22,7 @@ export default function FormFeeTypeSelector(props: FormFeeTypeSelectorProps) {
     multiple = false,
     onChange,
     value,
+    api,
   } = props
 
   return (

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

@@ -11,6 +11,7 @@ type ProgramSelectorProps = {
   allowAll?: boolean
   filters?: { courseId: number }
   onChange?: (value: any) => void
+  api?: string
 } & SelectProps
 export default function FormProgramSelector(props: ProgramSelectorProps) {
   const {
@@ -23,6 +24,7 @@ export default function FormProgramSelector(props: ProgramSelectorProps) {
     onChange,
     value,
     filters,
+    api
   } = props
 
   return (

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

@@ -11,6 +11,7 @@ type FormQuotaSelectorProps = {
   allowAll?: boolean
   onChange?: (value: any) => void
   filters?: { courseId: number }
+  api?: string
 } & SelectProps
 export default function FormQuotaSelector(props: FormQuotaSelectorProps) {
   const {
@@ -23,6 +24,7 @@ export default function FormQuotaSelector(props: FormQuotaSelectorProps) {
     onChange,
     value,
     filters,
+    api,
   } = props
 
   return (

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

@@ -11,6 +11,7 @@ type SemesterSelectorProps = {
   allowAll?: boolean
   filters?: { courseId: number }
   onChange?: (value: any) => void
+  api?: string
 } & SelectProps
 export default function FormSemseterSelector(props: SemesterSelectorProps) {
   const {
@@ -23,6 +24,7 @@ export default function FormSemseterSelector(props: SemesterSelectorProps) {
     onChange,
     value,
     filters,
+    api,
   } = props
 
   return (

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

@@ -14,6 +14,7 @@ type MultiProgramSelectorProps = {
   allowAll?: boolean
   error?: boolean
   helperText?: string
+  api?: string
 } & SelectProps
 const MultiProgramSelector = (props: MultiProgramSelectorProps) => {
   const {
@@ -26,6 +27,7 @@ const MultiProgramSelector = (props: MultiProgramSelectorProps) => {
     filters,
     value,
     allowAll = true,
+    api = '/square/branches',
   } = props
   const [options, setOptions] = useState([])
   const [prevCourseId, setPrevCourseId] = useState(null)
@@ -34,7 +36,7 @@ const MultiProgramSelector = (props: MultiProgramSelectorProps) => {
       if (filters.courseId && filters.courseId !== prevCourseId) {
         setOptions([])
         axios
-          .get('/square/branches', {
+          .get(api, {
             params: filters,
           })
           .then((response) => {
@@ -47,7 +49,7 @@ const MultiProgramSelector = (props: MultiProgramSelectorProps) => {
       }
     } else if (options.length === 0) {
       axios
-        .get('/square/branches')
+        .get(api)
         .then((response) => {
           setOptions(response.data)
         })
@@ -68,7 +70,7 @@ const MultiProgramSelector = (props: MultiProgramSelectorProps) => {
           ...(allowAll ? [{ value: 'all', label: 'All' }] : []),
           ...options.map((item) => ({
             label: `${item.branchName}`,
-            value: `${item.branchCode}`,
+            value: `${item.id}`,
           })),
         ]
       : allowAll

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

@@ -14,6 +14,7 @@ type MultiQuotaSelectorProps = {
   allowAll?: boolean
   error?: boolean
   helperText?: string
+  api?: string
 } & SelectProps
 export default function MultiQuotaSelector(props: MultiQuotaSelectorProps) {
   const {
@@ -26,6 +27,7 @@ export default function MultiQuotaSelector(props: MultiQuotaSelectorProps) {
     filters,
     value,
     allowAll = true,
+    api = '/square/quotas',
   } = props
   const [options, setOptions] = useState([])
   const [prevCourseId, setPrevCourseId] = useState(null)
@@ -34,11 +36,13 @@ export default function MultiQuotaSelector(props: MultiQuotaSelectorProps) {
       if (filters.courseId && filters.courseId !== prevCourseId) {
         setOptions([])
         axios
-          .get('/square/quotas', {
+          .get(api, {
             params: filters,
           })
           .then((response) => {
-            setOptions(response.data)
+            setOptions(
+              api == '/square/quotas' ? response.data : response.data.quotas,
+            )
             setPrevCourseId(filters.courseId)
           })
           .catch((error) => {
@@ -47,9 +51,11 @@ export default function MultiQuotaSelector(props: MultiQuotaSelectorProps) {
       }
     } else if (options.length === 0) {
       axios
-        .get('/square/quotas')
+        .get(api)
         .then((response) => {
-          setOptions(response.data)
+          setOptions(
+            api == '/square/quotas' ? response.data : response.data.quota,
+          )
         })
         .catch((error) => {
           console.error('Error fetching data from the API:', error)

package/src/components/Selectors/ProgramSelector.tsx

@@ -12,6 +12,7 @@ type ProgramSelectorProps = {
   allowAll?: boolean
   error?: boolean
   helperText?: string
+  api?: string
 } & SelectProps
 const ProgramSelector = (props: ProgramSelectorProps) => {
   const {
@@ -21,6 +22,7 @@ const ProgramSelector = (props: ProgramSelectorProps) => {
     multiple = false,
     filters,
     allowAll = true,
+    api = '/square/branches',
   } = props
   const [options, setOptions] = useState([])
   const [prevCourseId, setPrevCourseId] = useState(null)
@@ -29,7 +31,7 @@ const ProgramSelector = (props: ProgramSelectorProps) => {
       if (filters.courseId && filters.courseId !== prevCourseId) {
         setOptions([])
         axios
-          .get('/square/branches', {
+          .get(api, {
             params: filters,
           })
           .then((response) => {
@@ -42,7 +44,7 @@ const ProgramSelector = (props: ProgramSelectorProps) => {
       }
     } else if (options.length === 0) {
       axios
-        .get('/square/branches')
+        .get(api)
         .then((response) => {
           setOptions(response.data)
         })
@@ -63,7 +65,7 @@ const ProgramSelector = (props: ProgramSelectorProps) => {
           ...(allowAll ? [{ value: 'all', label: 'All' }] : []),
           ...options.map((item) => ({
             label: `${item.branchName}`,
-            value: `${item.branchCode}`,
+            value: `${item.id}`,
           })),
         ]
       : allowAll

package/src/components/Selectors/QuotaSelector.tsx

@@ -12,6 +12,7 @@ type QuotaSelectorProps = {
   allowAll?: boolean
   error?: boolean
   helperText?: string
+  api?: string
 } & SelectProps
 export default function QuotaSelector(props: QuotaSelectorProps) {
   const {
@@ -21,6 +22,7 @@ export default function QuotaSelector(props: QuotaSelectorProps) {
     multiple = false,
     filters,
     allowAll = true,
+    api = '/square/quotas',
   } = props
   const [options, setOptions] = useState([])
   const [prevCourseId, setPrevCourseId] = useState(null)
@@ -29,11 +31,13 @@ export default function QuotaSelector(props: QuotaSelectorProps) {
       if (filters.courseId && filters.courseId !== prevCourseId) {
         setOptions([])
         axios
-          .get('/square/quotas', {
+          .get(api, {
             params: filters,
           })
           .then((response) => {
-            setOptions(response.data)
+            setOptions(
+              api == '/square/quotas' ? response.data : response.data.quotas,
+            )
             setPrevCourseId(filters.courseId)
           })
           .catch((error) => {
@@ -42,9 +46,11 @@ export default function QuotaSelector(props: QuotaSelectorProps) {
       }
     } else if (options.length === 0) {
       axios
-        .get('/square/quotas')
+        .get(api)
         .then((response) => {
-          setOptions(response.data)
+          setOptions(
+            api == '/square/quotas' ? response.data : response.data.quota,
+          )
         })
         .catch((error) => {
           console.error('Error fetching data from the API:', error)

package/src/components/Selectors/SemesterSelector.tsx

@@ -12,6 +12,7 @@ type SemesterSelectorProps = {
   allowAll?: boolean
   error?: boolean
   helperText?: string
+  api?: string
 } & SelectProps
 const SemesterSelector = (props: SemesterSelectorProps) => {
   const {
@@ -21,6 +22,7 @@ const SemesterSelector = (props: SemesterSelectorProps) => {
     multiple = false,
     filters,
     allowAll = true,
+    api = '/square/semesters',
   } = props
   const [options, setOptions] = useState([])
   const [prevCourseId, setPrevCourseId] = useState(null)
@@ -29,7 +31,7 @@ const SemesterSelector = (props: SemesterSelectorProps) => {
       if (filters.courseId && filters.courseId !== prevCourseId) {
         setOptions([])
         axios
-          .get('/square/semesters', {
+          .get(api, {
             params: filters,
           })
           .then((response) => {
@@ -42,7 +44,7 @@ const SemesterSelector = (props: SemesterSelectorProps) => {
       }
     } else if (options.length === 0) {
       axios
-        .get('/square/semesters')
+        .get(api)
         .then((response) => {
           setOptions(response.data)
         })

package/src/shared-state/PermissionsStore.ts

@@ -385,6 +385,12 @@ export enum EnrollPermissions {
   CAN_LEAD_SOURCES_ADD = 'can_lead_sources_add',
   CAN_LEAD_SOURCES_EDIT = 'can_lead_sources_edit',
   CAN_LEAD_SOURCES_DELETE = 'can_lead_sources_delete',
+
+  // Student Certificate
+  CAN_STUDENT_CERTIFICATES_VIEW = 'can_student_certificates_view',
+  CAN_STUDENT_CERTIFICATES_EDIT = 'can_student_certificates_edit',
+  CAN_STUDENT_CERTIFICATES_DELETE = 'can_student_certificates_delete',
+  CAN_STUDENT_CERTIFICATES_ADD = 'can_student_certificates_add',
 }
 
 export enum ExamsPermissions {
@@ -526,6 +532,7 @@ export enum ExamsPermissions {
   CAN_EXAM_TIME_SLOTS_EDIT = 'can_exam_time_slots_edit',
   CAN_EXAM_TIME_SLOTS_DELETE = 'can_exam_time_slots_delete',
 }
+
 export enum Permission {
   // General
   CAN_INDIVIDUAL_PAGES_VIEW = 'can_individual_pages_view',
@@ -1175,82 +1182,82 @@ export enum Permission {
   CAN_ADMIN_VIEW = 'can_admin_view',
 
   //HRMS
-
   //Profiles
   CAN_MANAGE_HRMS_PROFILE_PERMISSIONS_VIEW = 'can_manage_hrms_profile_permissions_view',
   CAN_MANAGE_HRMS_PROFILE_PERMISSIONS_ADD = 'can_manage_hrms_profile_permissions_add',
   CAN_MANAGE_HRMS_PROFILE_PERMISSIONS_EDIT = 'can_manage_hrms_profile_permissions_edit',
   CAN_MANAGE_HRMS_PROFILE_PERMISSIONS_DELETE = 'can_manage_hrms_profile_permissions_delete',
 
-  //Roles
-  CAN_MANAGE_HRMS_ROLES_VIEW = 'can_manage_hrms_roles_view',
-  CAN_MANAGE_HRMS_ROLES_ADD = 'can_manage_hrms_roles_add',
-  CAN_MANAGE_HRMS_ROLES_EDIT = 'can_manage_hrms_roles_edit',
-  CAN_MANAGE_HRMS_ROLES_DELETE = 'can_manage_hrms_roles_delete',
+  //Infomation
+  CAN_VIEW_INFORMATION = 'can_view_information',
+  CAN_EDIT_INFORMATION = 'can_edit_information',
+  CAN_EDIT_SPECIAL_INFORMATION = 'can_edit_special_information',
+
+  //Leave Tracker
+  CAN_VIEW_LEAVE_TRACKER = 'can_view_leave_tracker',
+  CAN_APPLY_LEAVE = 'can_apply_leave',
 
   //Employees
-  CAN_MANAGE_EMPLOYEES_VIEW = 'can_manage_employees_view',
-  CAN_MANAGE_EMPLOYEES_IMPORT = 'can_manage_employees_import',
-  CAN_MANAGE_EMPLOYEES_ADD = 'can_manage_employees_add',
-  CAN_MANAGE_EMPLOYEES_EDIT = 'can_manage_employees_edit',
+  CAN_VIEW_EMPLOYEES = 'can_view_employees',
+  CAN_EDIT_EMPLOYEES = 'can_edit_employees',
+  CAN_CREATE_EMPLOYEES = 'can_create_employees',
+  CAN_IMPORT_EMPLOYEES = 'can_import_employees',
 
-  //Groups
-  CAN_MANAGE_GROUPS_VIEW = 'can_manage_groups_view',
-  CAN_MANAGE_GROUPS_ADD = 'can_manage_groups_add',
-  CAN_MANAGE_GROUPS_EDIT = 'can_manage_groups_edit',
+  //PunchLogs
+  CAN_VIEW_PUNCH_LOGS = 'can_view_punch_logs',
+
+  //Time Sheet
+  CAN_VIEW_TIME_SHEET = 'can_view_time_sheet',
+  CAN_EDIT_TIME_SHEET = 'can_edit_time_sheet',
+  CAN_IMPORT_TIME_SHEET = 'can_import_time_sheet',
+  CAN_EXPORT_TIME_SHEET = 'can_export_time_sheet',
+  CAN_GENERATE_TIME_SHEET = 'can_generate_time_sheet',
+
+  //Loss Of Pay
+  CAN_VIEW_LOSS_OF_PAY = 'can_view_loss_of_pay',
+
+  //Leave Usages
+  CAN_VIEW_LEAVES_USAGES = 'can_view_leaves_usages',
+  CAN_EDIT_LEAVES_USAGES = 'can_edit_leaves_usages',
+  CAN_IMPORT_LEAVES_USAGES = 'can_import_leaves_usages',
+  CAN_EXPORT_LEAVES_USAGES = 'can_export_leaves_usages',
+
+  //Leave Requests
+  CAN_VIEW_LEAVES_REQUESTS = 'can_view_leaves_requests',
+  CAN_VIEW_PAST_LEAVES_REQUESTS = 'can_view_past_leaves_requests',
+  CAN_CREATE_LEAVES_REQUESTS = 'can_create_leaves_requests',
+  CAN_APPROVE_LEAVE_REQUESTS = 'can_approve_leave_requests',
+  CAN_REJECT_LEAVE_REQUESTS = 'can_reject_leave_requests',
+  CAN_CANCEL_LEAVE_REQUESTS = 'can_cancel_leave_requests',
 
   //Departments
-  CAN_MANAGE_DEPARTMENTS_VIEW = 'can_manage_departments_view',
-  CAN_MANAGE_DEPARTMENTS_ADD = 'can_manage_departments_add',
-  CAN_MANAGE_DEPARTMENTS_EDIT = 'can_manage_departments_edit',
+  CAN_VIEW_DEPARTMENTS = 'can_view_departments',
+  CAN_ADD_DEPARTMENTS = 'can_add_departments',
+  CAN_IMPORT_DEPARTMENTS = 'can_import_departments',
+  CAN_EXPORT_DEPARTMENTS = 'can_export_departments',
+  CAN_EDIT_DEPARTMENTS = 'can_edit_departments',
 
   //Designations
-  CAN_MANAGE_DESIGNATIONS_VIEW = 'can_manage_designations_view',
-  CAN_MANAGE_DESIGNATIONS_ADD = 'can_manage_designations_add',
-  CAN_MANAGE_DESIGNATIONS_EDIT = 'can_manage_designations_edit',
-
-  //Locations
-  CAN_MANAGE_LOCATIONS_VIEW = 'can_manage_locations_view',
-  CAN_MANAGE_LOCATIONS_ADD = 'can_manage_locations_add',
-  CAN_MANAGE_LOCATIONS_EDIT = 'can_manage_locations_edit',
+  CAN_VIEW_DESIGNATIONS = 'can_view_designations',
+  CAN_ADD_DESIGNATIONS = 'can_add_designations',
+  CAN_IMPORT_DESIGNATIONS = 'can_import_designations',
+  CAN_EXPORT_DESIGNATIONS = 'can_export_designations',
+  CAN_EDIT_DESIGNATIONS = 'can_edit_designations',
 
   //Leave Types
-  CAN_MANAGE_LEAVE_TYPES_VIEW = 'can_manage_leave_types_view',
-  CAN_MANAGE_LEAVE_TYPES_ADD = 'can_manage_leave_types_add',
-  CAN_MANAGE_LEAVE_TYPES_EDIT = 'can_manage_leave_types_edit',
-
-  //Leave Balances
-  CAN_MANAGE_LEAVE_BALANCES_VIEW = 'can_manage_leave_balances_view',
-  CAN_MANAGE_LEAVE_BALANCES_IMPORT = 'can_manage_leave_balances_import',
-  CAN_MANAGE_LEAVE_BALANCES_EDIT = 'can_manage_leave_balances_edit',
+  CAN_VIEW_LEAVE_TYPES = 'can_view_leave_types',
+  CAN_ADD_LEAVE_TYPES = 'can_add_leave_types',
+  CAN_EDIT_LEAVE_TYPES = 'can_edit_leave_types',
 
-  //Time Sheet
-  CAN_MANAGE_TIME_SHEET_VIEW = 'can_manage_time_sheet_view',
-  CAN_MANAGE_TIME_SHEET_IMPORT = 'can_manage_time_sheet_import',
-  CAN_MANAGE_TIME_SHEET_EDIT = 'can_manage_time_sheet_edit',
-
-  //Expense Types
-  CAN_MANAGE_EXPENSE_TYPES_VIEW = 'can_manage_expense_types_view',
-  CAN_MANAGE_EXPENSE_TYPES_ADD = 'can_manage_expense_types_add',
-  CAN_MANAGE_EXPENSE_TYPES_EDIT = 'can_manage_expense_types_edit',
-
-  //Overtime
-  CAN_MANAGE_OVERTIME_VIEW = 'can_manage_overtime_view',
-  CAN_MANAGE_OVERTIME_ADD = 'can_manage_overtime_add',
-  CAN_MANAGE_OVERTIME_EDIT = 'can_manage_overtime_edit',
-
-  //MyKiosk
-  CAN_MANAGE_MY_KIOSK_VIEW = 'can_manage_my_kiosk_view',
-  CAN_MANAGE_MY_KIOSK_EDIT = 'can_manage_my_kiosk_edit',
-
-  //LeaveTracker
-  CAN_MANAGE_LEAVE_TRACKER_VIEW = 'can_manage_leave_tracker_view',
-  CAN_MANAGE_LEAVE_TRACKER_EDIT = 'can_manage_leave_tracker_edit',
-
-  //LeaveRequests
-  CAN_MANAGE_LEAVE_REQUESTS_VIEW = 'can_manage_leave_requests_view',
-  CAN_MANAGE_LEAVE_REQUESTS_CREATE = 'can_manage_leave_requests_create',
-  CAN_MANAGE_LEAVE_REQUESTS_EDIT = 'can_manage_leave_requests_edit',
+  //Groups
+  CAN_VIEW_GROUPS = 'can_view_groups',
+  CAN_ADD_GROUPS = 'can_add_groups',
+  CAN_EDIT_GROUPS_TIME_CONFIG = 'can_edit_groups_time_config',
+  CAN_EDIT_GROUPS_LEAVE_CONFIG = 'can_edit_groups_leave_config',
+
+  //Database Configurations
+  CAN_VIEW_DATABASE_CONFIG = 'can_view_database_config',
+  CAN_EDIT_DATABASE_CONFIG = 'can_edit_database_config',
 }
 
 export interface IPermissions {