@campxdev/shared 1.11.6 → 1.11.7-0.alpha-22

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

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { Controller } from 'react-hook-form'
 import axios from '../../../../config/axios'
@@ -13,7 +13,7 @@ type MultiProgramSelectorProps = {
   allowAll?: boolean
   error?: boolean
   helperText?: string
-} & SelectProps
+} & BaseSelectProps
 const MultiFeeTypeSelector = (props: MultiProgramSelectorProps) => {
   const {
     control,

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

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { Controller } from 'react-hook-form'
 import axios from '../../../../config/axios'
@@ -15,7 +15,7 @@ type MultiProgramSelectorProps = {
   error?: boolean
   helperText?: string
   api?: string
-} & SelectProps
+} & BaseSelectProps
 const MultiProgramSelector = (props: MultiProgramSelectorProps) => {
   const {
     control,

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

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { Controller } from 'react-hook-form'
 import axios from '../../../../config/axios'
@@ -15,7 +15,7 @@ type MultiQuotaSelectorProps = {
   error?: boolean
   helperText?: string
   api?: string
-} & SelectProps
+} & BaseSelectProps
 export default function MultiQuotaSelector(props: MultiQuotaSelectorProps) {
   const {
     control,

package/src/components/Selectors/ProgramSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { useEffect, useState } from 'react'
 import axios from '../../config/axios'
 import { SingleSelect } from '../Input'
@@ -6,7 +6,7 @@ import { SingleSelect } from '../Input'
 type ProgramSelectorProps = {
   name?: string
   label: string
-  filters?: { courseId: number }
+  filters?: { courseId: number | string }
   required?: boolean
   onChange?: (value: any) => void
   allowAll?: boolean
@@ -14,7 +14,7 @@ type ProgramSelectorProps = {
   helperText?: string
   api?: string
   valueByBranchCode?: boolean
-} & SelectProps
+} & BaseSelectProps
 const ProgramSelector = (props: ProgramSelectorProps) => {
   const {
     name,

package/src/components/Selectors/QuotaSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { useEffect, useState } from 'react'
 import axios from '../../config/axios'
 import { SingleSelect } from '../Input'
@@ -6,14 +6,14 @@ import { SingleSelect } from '../Input'
 type QuotaSelectorProps = {
   name?: string
   label: string
-  filters?: { courseId: number }
+  filters?: { courseId: number | string }
   required?: boolean
   onChange?: (value: any) => void
   allowAll?: boolean
   error?: boolean
   helperText?: string
   api?: string
-} & SelectProps
+} & BaseSelectProps
 export default function QuotaSelector(props: QuotaSelectorProps) {
   const {
     name,

package/src/components/Selectors/SemesterSelector.tsx

@@ -1,4 +1,4 @@
-import { SelectProps } from '@mui/material'
+import { BaseSelectProps } from '@mui/material'
 import { useEffect, useState } from 'react'
 import axios from '../../config/axios'
 import { SingleSelect } from '../Input'
@@ -13,7 +13,7 @@ type SemesterSelectorProps = {
   error?: boolean
   helperText?: string
   api?: string
-} & SelectProps
+} & BaseSelectProps
 const SemesterSelector = (props: SemesterSelectorProps) => {
   const {
     name,

package/src/components/SignatureFooter.tsx

@@ -0,0 +1,35 @@
+import { Box, SxProps, Typography } from '@mui/material'
+import { Variant } from '@mui/material/styles/createTypography'
+
+interface ItemProps {
+  text: string
+  sx?: SxProps
+  variant?: Variant
+}
+
+interface SignatureFooterProps {
+  containerSx?: SxProps
+  list: ItemProps[]
+}
+
+export default function SignatureFooter({
+  containerSx,
+  list,
+}: SignatureFooterProps) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-around',
+        margin: '100px 0px 50px  0px',
+        ...containerSx,
+      }}
+    >
+      {list?.map((item, index) => (
+        <Typography key={index} sx={item?.sx} variant={item?.variant || 'h1'}>
+          {item?.text}
+        </Typography>
+      ))}
+    </Box>
+  )
+}

package/src/components/SwitchButton.tsx

@@ -6,6 +6,7 @@ interface SwicthButtonProps {
   checked: boolean
   onChange: (v: any) => void
   subtitle?: ReactNode
+  disabled?: boolean
 }
 
 export default function SwitchButton({
@@ -13,13 +14,17 @@ export default function SwitchButton({
   checked,
   onChange,
   subtitle,
+  disabled,
 }: SwicthButtonProps) {
   return (
     <StyledBox>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-        <Typography variant="body1">{label}</Typography>
+        <Typography variant="body1" color={disabled ? 'grey' : 'black'}>
+          {label}
+        </Typography>
         <Switch
           checked={checked}
+          disabled={disabled}
           onChange={(e, checked) => onChange(checked)}
         />
       </Box>

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

@@ -127,13 +127,12 @@ export default function Table({
         totalCount[colIndex] = 'Total'
         return
       }
-
-      totalCount[colIndex] += colValue
+      totalCount[colIndex] += colValue ? colValue : 0
     })
   }
 
   const convertToAmount = (data) => {
-    return data.toLocaleString('en-IN', {
+    return data?.toLocaleString('en-IN', {
       style: 'currency',
       currency: 'INR',
     })
@@ -240,29 +239,27 @@ export default function Table({
 
                   {showTotal && (
                     <StyledTableRow canRowClick={false}>
-                      {columns.map((col, colIndex) => (
-                        <>
-                          <StyledTableCell
-                            key={colIndex}
-                            columnsLength={columns.length}
-                            columnIndex={colIndex + 1}
-                            rowIndex={dataSource.length + 1}
-                            col={col}
-                            isBodyCell
-                            sx={sx}
-                          >
-                            {totalCols.includes(colIndex + 1) ? (
-                              col?.dataType && col?.dataType == 'currency' ? (
+                      {columns.map((col, colIndex) => {
+                        return (
+                          <>
+                            <StyledTableCell
+                              key={colIndex}
+                              columnsLength={columns.length}
+                              columnIndex={colIndex + 1}
+                              rowIndex={dataSource.length + 1}
+                              col={col}
+                              isBodyCell
+                              sx={sx}
+                            >
+                              {col?.dataType && col?.dataType == 'currency' ? (
                                 <>{convertToAmount(totalCount[colIndex])}</>
                               ) : (
                                 <>{totalCount[colIndex]}</>
-                              )
-                            ) : (
-                              '---'
-                            )}
-                          </StyledTableCell>
-                        </>
-                      ))}
+                              )}
+                            </StyledTableCell>
+                          </>
+                        )
+                      })}
                     </StyledTableRow>
                   )}
                 </TableBody>

package/src/components/Tables/BasicTable/Table.tsx

@@ -23,7 +23,8 @@ import {
 type Order = 'asc' | 'desc' | ''
 type Sort = {}
 type DataType = 'currency' | 'string' | 'number'
-export interface TableColumn {
+
+export interface TableColumn<T> {
   dataIndex: string
   key: string
   title: any
@@ -33,11 +34,12 @@ export interface TableColumn {
   width?: string //pixels
   dataType?: DataType
 }
-interface TableProps {
+
+interface TableProps<T> {
   showSerialNumber?: boolean
-  columns: Array<TableColumn>
+  columns: Array<TableColumn<T>>
   rowKey?: string
-  dataSource?: any[]
+  dataSource?: T[]
   loading?: boolean
   onRowClick?: (row: any) => void
   pagination?: {
@@ -46,15 +48,18 @@ interface TableProps {
     totalCount: number
     onChange: (v: number) => void
     onChangeLimit?: (v: number) => void
+    handlePageInput?: (v: number) => void
   }
   onSort?: (sort: any) => void
   dense?: boolean
   showTotal?: boolean
+  showNoDataIllustration?: boolean
   sx?: Record<string, SxProps<Theme>>
   totalColumns?: number[]
   showTotalInFirstCellOfTotalRow?: boolean
 }
-export default function Table({
+
+export default function Table<T>({
   showSerialNumber = false,
   columns,
   dataSource,
@@ -64,10 +69,11 @@ export default function Table({
   onSort,
   dense = false,
   showTotal = false,
+  showNoDataIllustration = true,
   sx,
   totalColumns,
   showTotalInFirstCellOfTotalRow,
-}: TableProps) {
+}: TableProps<T>) {
   const [sort, setSort] = useState<Sort>({})
   let totalCount = []
   let totalCols = []
@@ -77,18 +83,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',
         }
       }
     })
@@ -254,7 +260,9 @@ export default function Table({
                 </TableBody>
               ) : (
                 <>
-                  <NoRecordsFound colLength={columns?.length} />
+                  {showNoDataIllustration ? (
+                    <NoRecordsFound colLength={columns?.length} />
+                  ) : null}
                 </>
               )}
             </>
@@ -271,6 +279,7 @@ export default function Table({
             totalCount={pagination.totalCount ?? 0}
             handlePagination={pagination.onChange}
             handlePageLimit={pagination.onChangeLimit}
+            handlePageInput={pagination.handlePageInput}
           />
         )}
       </>

package/src/components/Tables/BasicTable/TableFooter.tsx

@@ -1,7 +1,8 @@
-import { Box, Typography } from '@mui/material'
+import { Box, Stack } from '@mui/material'
 import DropDownButton from '../../DropDownButton/DropDownButton'
-import { StyledPagination, StyledTableFooter } from '../common/styles'
+import { TextField } from '../../Input'
 import TableStats from '../common/TableStats'
+import { StyledPagination, StyledTableFooter } from '../common/styles'
 
 interface TableFooterProps {
   totalCount: number
@@ -9,6 +10,7 @@ interface TableFooterProps {
   handlePagination: (v: number) => void
   page: number
   handlePageLimit?: (v: number) => void
+  handlePageInput?: (v: number) => void
 }
 
 export default function TableFooter({
@@ -17,6 +19,7 @@ export default function TableFooter({
   handlePagination,
   page,
   handlePageLimit,
+  handlePageInput,
 }: TableFooterProps) {
   const onChange = (v: number) => {
     handlePagination(v)
@@ -24,13 +27,36 @@ export default function TableFooter({
   return (
     <StyledTableFooter>
       <TableStats limit={limit} totalCount={totalCount} page={page} />
-      <StyledPagination
-        page={page}
-        count={Math.ceil(totalCount / limit)}
-        onChange={(e, v) => onChange(v)}
-        variant="outlined"
-        shape="rounded"
-      />
+      <Stack direction={'row'} gap={2} alignItems={'center'}>
+        <StyledPagination
+          page={page}
+          count={Math.ceil(totalCount / limit)}
+          onChange={(e, v) => onChange(v)}
+          variant="outlined"
+          shape="rounded"
+        />
+
+        {handlePageInput && (
+          <Box
+            sx={{
+              '& .MuiBox-root': {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '5px',
+              },
+            }}
+          >
+            <TextField
+              variant="outlined"
+              label={'Page :'}
+              size="small"
+              value={page}
+              onChange={(e) => handlePageInput(Number(e.target.value))}
+              sx={{ width: '80px' }}
+            />
+          </Box>
+        )}
+      </Stack>
       {handlePageLimit ? (
         <LimitField handlePageLimit={handlePageLimit} limit={limit} />
       ) : (

package/src/components/Tables/BasicTable/styles.ts

@@ -100,6 +100,6 @@ const getSxKeys = (rowIndex, columnIndex) => {
     rowkey: `row:${rowIndex}`,
     columnKey: `column:${columnIndex}`,
     cellKey: `row:${rowIndex},column:${columnIndex}`,
-    allKey: 'Tablecell',
+    allKey: 'TableCell',
   }
 }

package/src/components/Tables/ReactTable/ReactTable.tsx

@@ -5,14 +5,17 @@ import {
   IconButton,
   ListItemIcon,
   MenuItem,
+  Stack,
   Table,
   TableCell,
   TableHead,
   TableRow,
+  TextField,
   Typography,
 } from '@mui/material'
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { usePagination, useRowSelect, useTable } from 'react-table'
+import { debounce } from '../../../utils/debounce'
 import TableStats from '../common/TableStats'
 import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
 import {
@@ -140,6 +143,12 @@ export default function ReactTable({
       hooks.visibleColumns.push((columns) => [selectColumn, ...columns])
     },
   )
+  const [pageInput, setPageInput] = useState<string>(String(pageIndex + 1))
+
+  const debouncedHandlePagination = useCallback(
+    debounce((e, value) => handlePagination(e, value), 500),
+    [],
+  )
 
   const handleSortClick = (sortBykey) => {
     setSort((prev) => {
@@ -237,13 +246,38 @@ export default function ReactTable({
             page={pageIndex + 1}
             totalCount={pageCount}
           />
-          <StyledPagination
-            variant="outlined"
-            shape="rounded"
-            onChange={handlePagination}
-            count={Math.ceil(pageCount / pageSize)}
-            page={pageIndex + 1}
-          />
+          <Stack direction={'row'} gap={2} alignItems={'center'}>
+            <StyledPagination
+              variant="outlined"
+              shape="rounded"
+              onChange={handlePagination}
+              count={Math.ceil(pageCount / pageSize)}
+              page={pageIndex + 1}
+            />
+            {pagination.handlePageInput && (
+              <Box
+                sx={{
+                  '& .MuiBox-root': {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '5px',
+                  },
+                }}
+              >
+                <TextField
+                  variant="outlined"
+                  label={'Page :'}
+                  size="small"
+                  value={pageInput}
+                  onChange={(e) => {
+                    setPageInput(e.target.value)
+                    debouncedHandlePagination(e, Number(e.target.value))
+                  }}
+                  sx={{ width: '80px' }}
+                />
+              </Box>
+            )}
+          </Stack>
           <Limit pageSize={pageSize} setPageSize={setPageSize} />
         </StyledTableFooter>
       )}

package/src/components/Tables/common/types.ts

@@ -25,6 +25,7 @@ export interface TableProps {
     totalCount: number
     onChange: (offset: number) => void
     onChangeLimit?: (v: number) => void
+    handlePageInput?: boolean
   }
   select?: {
     enable: boolean

package/src/components/Tabs/TabsContainer.tsx

@@ -27,14 +27,14 @@ export default function TabsContainer({
   tabMobileUnderlineColor,
   currentTabIndex = 0,
 }: TabsContainerProps) {
-  const [currentTab, setCurrentTab] = useState(tabs[currentTabIndex].key)
+  const [currentTab, setCurrentTab] = useState(tabs[currentTabIndex]?.key)
 
   const handleTabsChange = (_event: ChangeEvent<{}>, value: string): void => {
     setCurrentTab(value)
     onTabChange && onTabChange(value)
   }
   useEffect(() => {
-    setCurrentTab(tabs[currentTabIndex].key)
+    setCurrentTab(tabs[currentTabIndex]?.key)
   }, [])
 
   return (
@@ -53,9 +53,9 @@ export default function TabsContainer({
       >
         {tabs.map((tab) => (
           <Tab
-            key={tab.key}
+            key={tab?.key}
             label={tab.label}
-            value={tab.key}
+            value={tab?.key}
             icon={tab.highlight ? <span>{'.'}</span> : null}
             iconPosition="end"
           />
@@ -63,7 +63,7 @@ export default function TabsContainer({
       </StyledTabs>
       <StyledComponentWrapper containerVariant={containerVariant}>
         <ErrorBoundary>
-          {tabs.find((tab) => tab.key === currentTab)?.component}
+          {tabs.find((tab) => tab?.key === currentTab)?.component}
         </ErrorBoundary>
       </StyledComponentWrapper>
     </StyledContainer>

package/src/components/Tabs/styles.tsx

@@ -21,6 +21,7 @@ export const StyledTabs = styled(Tabs)<StyledTabsProps>(
     minHeight: '60px',
     ['@media(max-width: 680px)']: {
       minHeight: '30px',
+      paddingTop: '15px',
     },
     paddingLeft: '15px',
     '& .MuiTabs-indicator': {

package/src/components/ToastContainer/ToastContainer.tsx

@@ -1,8 +1,7 @@
-import { Done, Close, WarningAmberRounded } from '@mui/icons-material'
+import { Close, Done, WarningAmberRounded } from '@mui/icons-material'
 import { Box } from '@mui/material'
-import { Slide, ToastContainer as ReactToastContainer } from 'react-toastify'
+import { ToastContainer as ReactToastContainer, Slide } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
-import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded'
 
 export default function ToastContainer() {
   return (

package/src/components/UploadButton/UploadButton.tsx

@@ -4,7 +4,7 @@ import { toast } from 'react-toastify'
 import axios from '../../config/axios'
 import { UploadButtonProps } from './types'
 
-const getAccept = (type: UploadButtonProps['type']) => {
+export const getAccept = (type: UploadButtonProps['type']) => {
   switch (type) {
     case 'file':
       return '.xlsx,.xls,.doc, .docx,.ppt, .pptx,.txt,.pdf'
@@ -14,6 +14,8 @@ const getAccept = (type: UploadButtonProps['type']) => {
       return 'video/*'
     case 'audio':
       return 'audio/*'
+    case 'excel':
+      return '.xlsx,.xls,.csv'
   }
 }
 

package/src/components/UploadButton/types.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react'
 
 interface Media {
-  type: 'image' | 'video' | 'audio' | 'file'
+  type: 'image' | 'video' | 'audio' | 'file' | 'excel'
   url: string
   key: string
   fileName?: string
@@ -9,7 +9,7 @@ interface Media {
   mediaObject?: any
 }
 interface UploadButtonProps {
-  type: 'file' | 'image' | 'video' | 'audio'
+  type: 'file' | 'image' | 'video' | 'audio' | 'excel'
   onChange: (res: Media) => void
   uploadUrl: string
   onSuccess?: () => void

package/src/components/UploadDocument.tsx

@@ -11,6 +11,7 @@ export default function UploadDocument({
   postBody,
   styleProps,
   onSuccess,
+  onError,
   width,
   height,
 }: {
@@ -19,6 +20,7 @@ export default function UploadDocument({
   postUrl: string
   postBody?: object
   onSuccess?: (res: any) => void
+  onError?: (res: any) => void
   styleProps?: any
   width?: string
   height?: string
@@ -44,6 +46,7 @@ export default function UploadDocument({
           onSuccess(res?.data)
         })
         .catch((err) => {
+          onError && onError(err)
           setLoading(false)
           toast.error('Server Error While Uploading File')
         })