@campxdev/shared 1.10.76 → 1.10.78

package/src/components/Selectors/FacultySelector.tsx

@@ -0,0 +1,92 @@
+import { SelectProps } from '@mui/material'
+import { useEffect, useState } from 'react'
+import axios from '../../config/axios'
+import { SingleSelect } from '../Input'
+
+type FacultySelectorProps = {
+  name?: string
+  label: string
+  filters?: {
+    departmentId: number | string
+    isSearch: boolean
+    isActive: boolean
+    type: string
+  }
+  required?: boolean
+  onChange?: (value: any) => void
+  allowAll?: boolean
+  error?: boolean
+  helperText?: string
+  api?: string
+} & SelectProps
+const FacultySelector = (props: FacultySelectorProps) => {
+  const {
+    name,
+    required = false,
+    label,
+    multiple = false,
+    filters,
+    allowAll = true,
+    api = '/hrms/employees',
+  } = props
+  const [options, setOptions] = useState([])
+  const [prevDepartmentId, setPrevDepartmentId] = useState(null)
+  const handleOpen = () => {
+    if (filters) {
+      if (filters.departmentId && filters.departmentId !== prevDepartmentId) {
+        setOptions([])
+        axios
+          .get(api, {
+            params: filters,
+          })
+          .then((response) => {
+            setOptions(response.data.data)
+            setPrevDepartmentId(filters.departmentId)
+          })
+          .catch((error) => {
+            console.error('Error fetching data from the API:', error)
+          })
+      }
+    } else if (options.length === 0) {
+      axios
+        .get(api)
+        .then((response) => {
+          setOptions(response.data.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.fullName}`,
+            value: `${item.userId}`,
+          })),
+        ]
+      : allowAll
+      ? [{ value: 'all', label: 'All' }]
+      : []
+
+  return (
+    <SingleSelect
+      name={name}
+      label={label}
+      required={required}
+      options={handleOptions}
+      onOpen={handleOpen}
+      defaultValue="all"
+      {...props}
+    />
+  )
+}
+export default FacultySelector

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

@@ -0,0 +1,50 @@
+import { SelectProps } from '@mui/material'
+import { Controller } from 'react-hook-form'
+import ClassRoomSelector from '../ClassRoomSelector'
+
+type ClassRoomSelectorProps = {
+  control: any
+  name: string
+  label: string
+  required?: boolean
+  multiple?: boolean
+  allowAll?: boolean
+  filters?: { programId: number; courseId: number; batch: string }
+  onChange?: (value: any) => void
+  api?: string
+} & SelectProps
+export default function FormClassRoomSelector(props: ClassRoomSelectorProps) {
+  const {
+    name,
+    required = false,
+    control,
+    label,
+    multiple = false,
+    allowAll = true,
+    onChange,
+    value,
+    filters,
+    api,
+  } = props
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <ClassRoomSelector
+          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/FormCourseSelector.tsx

@@ -11,6 +11,7 @@ type FormCourseSelectorProps = {
   allowAll?: boolean
   onChange?: (value: any) => void
   api?: string
+  valueByUniqueId?: boolean
 } & SelectProps
 export default function FormCourseSelector(props: FormCourseSelectorProps) {
   const {
@@ -23,6 +24,7 @@ export default function FormCourseSelector(props: FormCourseSelectorProps) {
     onChange,
     value,
     api,
+    valueByUniqueId = false,
   } = props
 
   return (
@@ -39,6 +41,7 @@ export default function FormCourseSelector(props: FormCourseSelectorProps) {
           required={required}
           error={!!error}
           helperText={error?.message}
+          valueByUniqueId={valueByUniqueId}
           {...props}
         />
       )}

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

@@ -0,0 +1,49 @@
+import { SelectProps } from '@mui/material'
+import { Controller } from 'react-hook-form'
+import DepartmentSelector from '../DepartmentSelector'
+
+type FormDepartmentSelectorProps = {
+  control: any
+  name: string
+  label: string
+  required?: boolean
+  multiple?: boolean
+  allowAll?: boolean
+  onChange?: (value: any) => void
+  api?: string
+} & SelectProps
+export default function FormDepartmentSelector(
+  props: FormDepartmentSelectorProps,
+) {
+  const {
+    name,
+    required = false,
+    control,
+    label,
+    allowAll = true,
+    multiple = false,
+    onChange,
+    value,
+    api,
+  } = props
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <DepartmentSelector
+          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/FormFacultySelector.tsx

@@ -0,0 +1,55 @@
+import { SelectProps } from '@mui/material'
+import { Controller } from 'react-hook-form'
+import FacultySelector from '../FacultySelector'
+
+type FacultySelectorProps = {
+  control: any
+  name: string
+  label: string
+  required?: boolean
+  multiple?: boolean
+  allowAll?: boolean
+  filters?: {
+    departmentId: number | string
+    isSearch: boolean
+    isActive: boolean
+    type: string
+  }
+  onChange?: (value: any) => void
+  api?: string
+} & SelectProps
+export default function FormFacultySelector(props: FacultySelectorProps) {
+  const {
+    name,
+    required = false,
+    control,
+    label,
+    multiple = false,
+    allowAll = true,
+    onChange,
+    value,
+    filters,
+    api,
+  } = props
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <FacultySelector
+          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/FormProgramSelector.tsx

@@ -12,6 +12,7 @@ type ProgramSelectorProps = {
   filters?: { courseId: number }
   onChange?: (value: any) => void
   api?: string
+  valueByBranchCode?: boolean
 } & SelectProps
 export default function FormProgramSelector(props: ProgramSelectorProps) {
   const {
@@ -24,7 +25,8 @@ export default function FormProgramSelector(props: ProgramSelectorProps) {
     onChange,
     value,
     filters,
-    api
+    api,
+    valueByBranchCode = false,
   } = props
 
   return (
@@ -42,6 +44,7 @@ export default function FormProgramSelector(props: ProgramSelectorProps) {
           required={required}
           error={!!error}
           helperText={error?.message}
+          valueByBranchCode={valueByBranchCode}
           {...props}
         />
       )}

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

@@ -0,0 +1,106 @@
+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 MultiFacultySelectorProps = {
+  control: any
+  name?: string
+  label: string
+  filters?: {
+    departmentId: string
+    isSearch: boolean
+    isActive: boolean
+    type: string
+  }
+  required?: boolean
+  onChange?: (value: any) => void
+  allowAll?: boolean
+  error?: boolean
+  helperText?: string
+  api?: string
+} & SelectProps
+const MultiFacultySelector = (props: MultiFacultySelectorProps) => {
+  const {
+    control,
+    onChange,
+    name,
+    required = false,
+    label,
+    multiple = true,
+    filters,
+    value,
+    allowAll = true,
+    api = '/hrms/employees',
+  } = props
+  const [options, setOptions] = useState([])
+  const [prevDepartmentId, setPrevDepartmentId] = useState(null)
+  const handleOpen = () => {
+    if (filters) {
+      if (filters.departmentId && filters.departmentId !== prevDepartmentId) {
+        setOptions([])
+        axios
+          .get(api, {
+            params: filters,
+          })
+          .then((response) => {
+            setOptions(response.data.data)
+            setPrevDepartmentId(filters.departmentId)
+          })
+          .catch((error) => {
+            console.error('Error fetching data from the API:', error)
+          })
+      }
+    } else if (options.length === 0) {
+      axios
+        .get(api)
+        .then((response) => {
+          setOptions(response.data.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.fullName}`,
+            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}
+          multiple={multiple}
+        />
+      )}
+    />
+  )
+}
+export default MultiFacultySelector

package/src/components/Selectors/ProgramSelector.tsx

@@ -13,6 +13,7 @@ type ProgramSelectorProps = {
   error?: boolean
   helperText?: string
   api?: string
+  valueByBranchCode?: boolean
 } & SelectProps
 const ProgramSelector = (props: ProgramSelectorProps) => {
   const {
@@ -22,7 +23,8 @@ const ProgramSelector = (props: ProgramSelectorProps) => {
     multiple = false,
     filters,
     allowAll = true,
-    api = '/square/branches',
+    valueByBranchCode = false,
+    api = '/paymentx/domain/programs',
   } = props
   const [options, setOptions] = useState([])
   const [prevCourseId, setPrevCourseId] = useState(null)
@@ -65,7 +67,7 @@ const ProgramSelector = (props: ProgramSelectorProps) => {
           ...(allowAll ? [{ value: 'all', label: 'All' }] : []),
           ...options.map((item) => ({
             label: `${item.branchName}`,
-            value: `${item.id}`,
+            value: !valueByBranchCode ? `${item.id}` : `${item.branchCode}`,
           })),
         ]
       : allowAll

package/src/components/Selectors/index.tsx

@@ -1,10 +1,17 @@
+import ClassRoomSelector from './ClassRoomSelector'
 import CourseSelector from './CourseSelector'
+import DepartmentSelector from './DepartmentSelector'
+import FacultySelector from './FacultySelector'
 import FeeTypeSelector from './FeeTypeSelector'
+import FormClassRoomSelector from './FormSelectors/FormClassRoomSelector'
 import FormCourseSelector from './FormSelectors/FormCourseSelector'
+import FormDepartmentSelector from './FormSelectors/FormDepartmentSelector'
+import FormFacultySelector from './FormSelectors/FormFacultySelector'
 import FormFeeTypeSelector from './FormSelectors/FormFeeTypeSelector'
 import FormProgramSelector from './FormSelectors/FormProgramSelector'
 import FormQuotaSelector from './FormSelectors/FormQuotaSelector'
 import FormSemseterSelector from './FormSelectors/FormSemesterSelector'
+import MultiFacultySelector from './FormSelectors/MultiSelect/MultiFacultySelector'
 import MultiFeeTypeSelector from './FormSelectors/MultiSelect/MultiFeeTypeSelector'
 import MultiProgramSelector from './FormSelectors/MultiSelect/MultiProgramSelector'
 import MultiQuotaSelector from './FormSelectors/MultiSelect/MultiQuotaSelector'
@@ -13,13 +20,20 @@ import QuotaSelector from './QuotaSelector'
 import SemesterSelector from './SemesterSelector'
 
 export {
+  ClassRoomSelector,
   CourseSelector,
+  DepartmentSelector,
+  FacultySelector,
   FeeTypeSelector,
+  FormClassRoomSelector,
   FormCourseSelector,
+  FormDepartmentSelector,
+  FormFacultySelector,
   FormFeeTypeSelector,
   FormProgramSelector,
   FormQuotaSelector,
   FormSemseterSelector,
+  MultiFacultySelector,
   MultiFeeTypeSelector,
   MultiProgramSelector,
   MultiQuotaSelector,

package/src/components/Tables/2DTable/Table.tsx

@@ -27,6 +27,7 @@ export interface TableColumn {
   dataIndex: string
   key: string
   title?: any
+  showTitle: boolean
   render?: (cellData: any, row: any, index: number) => any
   textColor?: string
   sort?: boolean
@@ -36,7 +37,8 @@ export interface TableColumn {
 
 export interface ColumnHeader {
   title: any
-  colSpan: number
+  colSpan?: number
+  rowSpan?: number
 }
 
 interface TableProps {
@@ -83,18 +85,18 @@ export default function Table({
     totalCols = totalColumns ? [...totalColumns] : []
   }
 
-  const handleSortClick = (sortBykey) => {
+  const handleSortClick = (sortByKey) => {
     setSort((prev) => {
-      if (prev[sortBykey]) {
-        if (prev[sortBykey] === 'desc') return { ...prev, [sortBykey]: 'asc' }
-        if (prev[sortBykey] === 'asc') {
-          delete prev[sortBykey]
+      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',
+          [sortByKey]: 'desc',
         }
       }
     })
@@ -155,6 +157,7 @@ export default function Table({
                     isHeaderCell
                     align="center"
                     colSpan={col.colSpan}
+                    rowSpan={col.rowSpan}
                   >
                     {col.title}
                   </StyledTableCell>
@@ -162,34 +165,39 @@ export default function Table({
               </TableRow>
             )}
             <TableRow>
-              {columns.map((col, columnIndex) => (
-                <StyledTableCell
-                  key={columnIndex}
-                  columnsLength={columns.length}
-                  columnIndex={columnIndex + 1}
-                  rowIndex={0}
-                  col={col}
-                  sx={sx}
-                  align="center"
-                  isHeaderCell
-                >
-                  {col.title}
+              {columns.map(
+                (col, columnIndex) =>
+                  col.showTitle && (
+                    <StyledTableCell
+                      key={columnIndex}
+                      columnsLength={columns.length}
+                      columnIndex={columnIndex + 1}
+                      rowIndex={0}
+                      col={col}
+                      sx={sx}
+                      align="center"
+                      isHeaderCell
+                    >
+                      {col.title}
 
-                  {col.sort && (
-                    <IconButton onClick={() => handleSortClick(col.dataIndex)}>
-                      <ListItemIcon>
-                        {sort[col.dataIndex] === 'asc' ? (
-                          <SortAscIcon />
-                        ) : sort[col.dataIndex] === 'desc' ? (
-                          <SortDescIcon />
-                        ) : (
-                          <SortIcon />
-                        )}
-                      </ListItemIcon>
-                    </IconButton>
-                  )}
-                </StyledTableCell>
-              ))}
+                      {col.sort && (
+                        <IconButton
+                          onClick={() => handleSortClick(col.dataIndex)}
+                        >
+                          <ListItemIcon>
+                            {sort[col.dataIndex] === 'asc' ? (
+                              <SortAscIcon />
+                            ) : sort[col.dataIndex] === 'desc' ? (
+                              <SortDescIcon />
+                            ) : (
+                              <SortIcon />
+                            )}
+                          </ListItemIcon>
+                        </IconButton>
+                      )}
+                    </StyledTableCell>
+                  ),
+              )}
             </TableRow>
           </TableHead>
           {!loading ? (