@campxdev/shared 1.10.72 → 1.10.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.10.72",
+  "version": "1.10.74",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",
@@ -41,6 +41,7 @@
     "moment": "^2.29.4",
     "pullstate": "^1.24.0",
     "react": "^18.2.0",
+    "react-arrows": "^1.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-flatpickr": "^3.10.13",

package/src/components/ApplicationProfile/ApplicationProfile.tsx

@@ -22,6 +22,9 @@ import SearchBar from '../FilterComponents/SearchBar'
 import { DialogButton, DrawerButton } from '../ModalButtons'
 import Table from '../Tables/BasicTable/Table'
 import DepartmentFilter from './DepartmentFilter'
+import ReactJoyRide from '../ReactJoyRide'
+// import Arrow, { DIRECTION } from 'react-arrows'
+import '../CustomJoyRideStyles.css'
 
 interface ApplicationProfileProps {
   application:
@@ -40,6 +43,7 @@ interface ApplicationProfileProps {
     delete: string
   }
 }
+
 function ApplicationProfile({
   application,
   title,
@@ -160,9 +164,33 @@ function ApplicationProfile({
     })
   }
 
+  const tourSteps = [
+    {
+      target: '.test',
+      title: 'Adding User Profile Relation',
+      content: (
+        <Typography variant="subtitle1">
+          Choose your Profile Relation from the pre-given dropdowns
+        </Typography>
+      ),
+      disableBeacon: true,
+    },
+    {
+      target: '.test2',
+      title: 'Search By Name',
+      content: (
+        <Typography variant="subtitle1">
+          You can also find the person by just typing his name away!
+        </Typography>
+      ),
+    },
+  ]
+
   if (profilesLoading) return <Spinner />
   return (
     <>
+      <ReactJoyRide steps={tourSteps} tourName="Application-Profile-Tour" />
+
       <PageHeader
         title={title}
         actions={[
@@ -177,7 +205,11 @@ function ApplicationProfile({
             <DialogButton
               title={'Add User Profile Relation'}
               anchor={({ open }) => (
-                <ActionButton onClick={open}>
+                <ActionButton
+                  onClick={open}
+                  className="test"
+                  sx={{ inset: 'auto' }}
+                >
                   Add User Profile Relation
                 </ActionButton>
               )}
@@ -193,6 +225,7 @@ function ApplicationProfile({
           </ValidateAccess>,
         ]}
       />
+
       <PageContent sx={{ marginTop: '25px' }}>
         <StyledTableContainer>
           <Box
@@ -211,6 +244,7 @@ function ApplicationProfile({
                   })
                 }
                 textFieldProps={{
+                  className: 'test2',
                   placeholder: 'Search by Name',
                   title: 'Search by Name',
                   sx: { width: '300px' },

package/src/components/CurvedArrow.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useRef } from 'react'
+import './CustomJoyRideStyles.css'
+
+class Arrow {
+  constructor(w, h) {
+    if (!w) w = 300
+    if (!h) h = 150
+
+    const pad = Math.round(w / 6)
+
+    // container
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    svg.style.width = `${w}px`
+    svg.style.height = `${h}px`
+    svg.classList.add('arrow')
+
+    // line
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    path.setAttribute(
+      'd',
+      `M 0 0 C ${pad} ${h}, ${w - pad - 10} ${h - 10}, ${w - 8} 5`,
+    )
+    svg.appendChild(path)
+
+    // arrowhead
+    const polygon = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'polygon',
+    )
+    polygon.setAttribute('points', `${w - 3} 0, ${w - 13} 3, ${w - 3} 9`)
+    svg.appendChild(polygon)
+
+    return svg
+  }
+}
+
+const CurvedArrow = () => {
+  const arrowRef = useRef(null)
+
+  useEffect(() => {
+    const arrow = new Arrow(100, 100)
+    arrowRef.current.appendChild(arrow)
+  }, [])
+
+  return <div ref={arrowRef}></div>
+}
+
+export default CurvedArrow

package/src/components/CustomJoyRideStyles.css

@@ -0,0 +1,18 @@
+  .react-joyride__tooltip {
+    background-color: 'rgb(255, 255, 255)';
+  
+  }
+  
+  div.react-joyride__tooltip > div:nth-child(1) {
+   text-align: left !important;
+  }
+
+  div.react-joyride__tooltip > div:nth-child(1) div:nth-child(2) {
+    padding: 20px 0px !important; 
+   }
+
+   div.react-joyride__tooltip > div:nth-child(2) {
+    flex-direction: row-reverse !important;
+   }
+  
+

package/src/components/ReactJoyRide.tsx

@@ -1,24 +1,55 @@
 import TourIcon from '@mui/icons-material/Tour'
 import { Box, IconButton } from '@mui/material'
-import { ReactNode, useState } from 'react'
+import { ReactNode, useEffect, useState } from 'react'
 import ReactJoyride, { Step } from 'react-joyride'
+import { useQuery } from 'react-query'
+import axios from '../config/axios'
+import './CustomJoyRideStyles.css'
 
 function ReactJoyRide({
   steps,
   children,
+  tourName,
 }: {
   steps: Step[]
-  children: ReactNode
+  children?: ReactNode
+  tourName: string
 }) {
   const [run, setRun] = useState(false)
 
-  const handleTourEnd = (data) => {
-    if (
-      data.status === 'finished' ||
-      data.status === 'skip' ||
-      data.status === 'closed'
-    )
+  const fetchTours = (params) => {
+    return axios.get(`/square/tours`).then((res) => res.data)
+  }
+
+  const { data: toursData, isLoading: toursLoading } = useQuery(
+    'tours',
+    fetchTours,
+  )
+
+  useEffect(() => {
+    if (toursData && !toursData.includes(tourName)) {
+      setRun(true)
+    }
+  }, [toursLoading])
+
+  const completeTour = async () => {
+    try {
+      await axios.post(`/square/tours/complete`, { tourName })
+    } catch (error) {
+      // console.error('Error in Completing Tour:', error)
+    }
+  }
+
+  const handleJoyRideCallback = (data) => {
+    const { action, status } = data
+
+    if (action === 'skip') {
+      completeTour()
+    }
+    if (status === 'finished' || status === 'skip' || status === 'closed') {
       setRun(false)
+      completeTour()
+    }
 
     if (data.action == 'close' || data.action == 'skip') setRun(false)
   }
@@ -27,17 +58,53 @@ function ReactJoyRide({
     <>
       <Box>
         <ReactJoyride
-          callback={handleTourEnd}
+          callback={handleJoyRideCallback}
           run={run}
           steps={steps}
+          styles={{
+            buttonNext: {
+              backgroundColor: 'black',
+              color: 'yellow',
+              height: '28px',
+              width: '100px',
+              padding: '0px',
+            },
+
+            buttonBack: {
+              backgroundColor: 'cement',
+              color: 'black',
+              borderRadius: '4px',
+              height: '30px',
+              width: '100px',
+              gap: '10px',
+              marginLeft: '5px',
+              padding: '0px',
+            },
+
+            buttonSkip: {
+              backgroundColor: 'transparent',
+              color: 'cement',
+              borderRadius: '0px',
+              border: '0px',
+              fontSize: '13px',
+              padding: '21px 15px',
+              right: '0px',
+              top: '0px',
+              position: 'absolute',
+              lineHeight: 1,
+            },
+          }}
           continuous
           showSkipButton
-          showProgress
           scrollToFirstStep
+          disableOverlay
           disableOverlayClose
           disableScrolling
+          hideCloseButton
         />
+
         {children}
+
         <IconButton
           onClick={() => setRun(true)}
           sx={{

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

@@ -0,0 +1,81 @@
+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
+  required?: boolean
+  onChange?: (value: any) => void
+  allowAll?: boolean
+  error?: boolean
+  helperText?: string
+} & SelectProps
+const MultiFeeTypeSelector = (props: MultiProgramSelectorProps) => {
+  const {
+    control,
+    onChange,
+    name,
+    required = false,
+    label,
+    multiple = false,
+    value,
+    allowAll = true,
+  } = props
+  const [options, setOptions] = useState([])
+  const [prevCourseId, setPrevCourseId] = useState(null)
+  const handleOpen = () => {
+    if (options.length === 0) {
+      axios
+        .get('/paymentx/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.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}
+        />
+      )}
+    />
+  )
+}
+export default MultiFeeTypeSelector

package/src/components/Selectors/index.tsx

@@ -5,6 +5,7 @@ import FormFeeTypeSelector from './FormSelectors/FormFeeTypeSelector'
 import FormProgramSelector from './FormSelectors/FormProgramSelector'
 import FormQuotaSelector from './FormSelectors/FormQuotaSelector'
 import FormSemseterSelector from './FormSelectors/FormSemesterSelector'
+import MultiFeeTypeSelector from './FormSelectors/MultiSelect/MultiFeeTypeSelector'
 import MultiProgramSelector from './FormSelectors/MultiSelect/MultiProgramSelector'
 import MultiQuotaSelector from './FormSelectors/MultiSelect/MultiQuotaSelector'
 import ProgramSelector from './ProgramSelector'
@@ -19,6 +20,7 @@ export {
   FormProgramSelector,
   FormQuotaSelector,
   FormSemseterSelector,
+  MultiFeeTypeSelector,
   MultiProgramSelector,
   MultiQuotaSelector,
   ProgramSelector,

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

@@ -0,0 +1,285 @@
+import {
+  IconButton,
+  ListItemIcon,
+  TableBody,
+  TableHead,
+  TableRow,
+  Theme,
+} from '@mui/material'
+import { SxProps } from '@mui/system'
+import _ from 'lodash'
+import { useEffect, useState } from 'react'
+import Spinner from '../../Spinner'
+import NoRecordsFound from '../common/NoRecordsFound'
+import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
+import TableFooter from './TableFooter'
+import {
+  StyledMuiTable,
+  StyledTableCell,
+  StyledTableContainer,
+  StyledTableRow,
+} from './styles'
+
+type Order = 'asc' | 'desc' | ''
+type Sort = {}
+type DataType = 'currency' | 'string' | 'number'
+export interface TableColumn {
+  dataIndex: string
+  key: string
+  title?: any
+  render?: (cellData: any, row: any, index: number) => any
+  textColor?: string
+  sort?: boolean
+  width?: string //pixels
+  dataType?: DataType
+}
+
+export interface ColumnHeader {
+  title: any
+  colSpan: number
+}
+
+interface TableProps {
+  columns: Array<TableColumn>
+  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
+  showTotal?: boolean
+  sx?: Record<string, SxProps<Theme>>
+  totalColumns?: number[]
+  showTotalInFirstCellOfTotalRow?: boolean
+  columnsHeader?: Array<ColumnHeader>
+}
+export default function Table({
+  columns,
+  dataSource,
+  onRowClick,
+  pagination,
+  loading,
+  columnsHeader,
+  onSort,
+  dense = false,
+  showTotal = false,
+  sx,
+  totalColumns,
+  showTotalInFirstCellOfTotalRow,
+}: TableProps) {
+  const [sort, setSort] = useState<Sort>({})
+  let totalCount = []
+  let totalCols = []
+  if (showTotalInFirstCellOfTotalRow) {
+    totalCols = totalColumns ? [...totalColumns, 1] : [1]
+  } else {
+    totalCols = totalColumns ? [...totalColumns] : []
+  }
+
+  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])
+
+  const calculateTotal = (row) => {
+    columns.forEach((col, colIndex) => {
+      const colValue = col?.render
+        ? col.render(row[col.dataIndex], row, colIndex)
+        : _.get(row, col.dataIndex)
+
+      if (!totalCount[colIndex]) {
+        totalCount[colIndex] = 0
+      }
+
+      if (showTotalInFirstCellOfTotalRow && colIndex === 0) {
+        totalCount[colIndex] = 'Total'
+        return
+      }
+
+      totalCount[colIndex] += colValue
+    })
+  }
+
+  const convertToAmount = (data) => {
+    return data.toLocaleString('en-IN', {
+      style: 'currency',
+      currency: 'INR',
+    })
+  }
+
+  return (
+    <StyledTableContainer sx={sx}>
+      <>
+        <StyledMuiTable sx={sx}>
+          <TableHead>
+            {columnsHeader && (
+              <TableRow>
+                {columnsHeader.map((col, columnIndex) => (
+                  <StyledTableCell
+                    key={columnIndex}
+                    columnsLength={columns.length}
+                    columnIndex={columnIndex + 1}
+                    rowIndex={0}
+                    col={col}
+                    sx={sx}
+                    isHeaderCell
+                    align="center"
+                    colSpan={col.colSpan}
+                  >
+                    {col.title}
+                  </StyledTableCell>
+                ))}
+              </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}
+
+                  {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 ? (
+            <>
+              {dataSource?.length ? (
+                <TableBody>
+                  {dataSource?.map((row, rowIndex) => (
+                    <StyledTableRow
+                      canRowClick={!!onRowClick}
+                      hover={!!onRowClick}
+                      key={rowIndex}
+                      onClick={() => {
+                        return onRowClick && onRowClick(row)
+                      }}
+                    >
+                      <> {showTotal && calculateTotal(row)}</>
+                      {columns.map((col, colIndex) => (
+                        <StyledTableCell
+                          key={colIndex}
+                          columnsLength={columns.length}
+                          columnIndex={colIndex + 1}
+                          rowIndex={rowIndex + 1}
+                          col={col}
+                          isBodyCell
+                          sx={sx}
+                        >
+                          {col?.dataType && col?.dataType == 'currency' ? (
+                            <>{convertToAmount(row[col.dataIndex])}</>
+                          ) : (
+                            <>
+                              {col?.render
+                                ? col.render(row[col.dataIndex], row, rowIndex)
+                                : _.get(row, col.dataIndex)}
+                            </>
+                          )}
+                        </StyledTableCell>
+                      ))}
+                    </StyledTableRow>
+                  ))}
+
+                  {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' ? (
+                                <>{convertToAmount(totalCount[colIndex])}</>
+                              ) : (
+                                <>{totalCount[colIndex]}</>
+                              )
+                            ) : (
+                              '---'
+                            )}
+                          </StyledTableCell>
+                        </>
+                      ))}
+                    </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>
+  )
+}

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

@@ -0,0 +1,86 @@
+import { Box, Typography } from '@mui/material'
+import DropDownButton from '../../DropDownButton/DropDownButton'
+import { StyledPagination, StyledTableFooter } from '../common/styles'
+import TableStats from '../common/TableStats'
+
+interface TableFooterProps {
+  totalCount: number
+  limit: number
+  handlePagination: (v: number) => void
+  page: number
+  handlePageLimit?: (v: number) => void
+}
+
+export default function TableFooter({
+  totalCount,
+  limit,
+  handlePagination,
+  page,
+  handlePageLimit,
+}: TableFooterProps) {
+  const onChange = (v: number) => {
+    handlePagination(v)
+  }
+  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"
+      />
+      {handlePageLimit ? (
+        <LimitField handlePageLimit={handlePageLimit} limit={limit} />
+      ) : (
+        <Box></Box>
+      )}
+    </StyledTableFooter>
+  )
+}
+
+const LimitField = ({ handlePageLimit, limit }) => {
+  return (
+    <Box>
+      <DropDownButton
+        button={{
+          buttonProps: {
+            variant: 'outlined',
+            color: 'secondary',
+            sx: {
+              padding: '0px 10px',
+              color: '#121212',
+              fontSize: '13px',
+              border: '1px solid #1212121A',
+            },
+          },
+          label: `${limit} / page`,
+        }}
+        menu={[
+          {
+            label: 10,
+            onClick: () => handlePageLimit(10),
+          },
+
+          {
+            label: 20,
+            onClick: () => handlePageLimit(20),
+          },
+          {
+            label: 30,
+            onClick: () => handlePageLimit(30),
+          },
+          {
+            label: 50,
+            onClick: () => handlePageLimit(50),
+          },
+          {
+            label: 100,
+            onClick: () => handlePageLimit(100),
+          },
+        ]}
+      />
+    </Box>
+  )
+}

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

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

package/src/components/Tables/2DTable/interface.ts

@@ -0,0 +1,19 @@
+import { Theme } from '@mui/material'
+import { SxProps } from '@mui/system'
+
+export interface StyledCellProps {
+  columnsLength: number
+  columnIndex: number
+  rowIndex: number
+  col: any
+  sx?: Record<string, SxProps<Theme>>
+  isBodyCell?: boolean
+  isHeaderCell?: boolean
+}
+export interface StyledTableContainerProps {
+  sx?: Record<string, SxProps<Theme>>
+}
+
+export interface StyledMuiTableProps {
+  sx?: Record<string, SxProps<Theme>>
+}

package/src/components/Tables/2DTable/styles.ts

@@ -0,0 +1,105 @@
+import styled, { CSSObject } from '@emotion/styled'
+import {
+  Table,
+  TableCell,
+  TableContainer,
+  TableRow,
+  Theme,
+  alpha,
+} from '@mui/material'
+import { SxProps } from '@mui/system'
+import _ from 'lodash'
+import {
+  StyledCellProps,
+  StyledMuiTableProps,
+  StyledTableContainerProps,
+} from './interface'
+
+export const StyledTableCell = styled(TableCell)<StyledCellProps>(
+  ({
+    theme,
+    columnsLength,
+    columnIndex,
+    rowIndex,
+    col,
+    sx,
+    isBodyCell = false,
+    isHeaderCell = false,
+  }) => {
+    const { rowkey, columnKey, cellKey, allKey } = getSxKeys(
+      rowIndex,
+      columnIndex,
+    )
+    const rowSx: SxProps<Theme> = _.get(sx, rowkey)
+    const columnSx: SxProps<Theme> = _.get(sx, columnKey)
+    const cellSx: SxProps<Theme> = _.get(sx, cellKey)
+    const allSx: SxProps<Theme> = _.get(sx, allKey)
+    return {
+      ...(col?.width && {
+        width: col?.width,
+      }),
+      ['@media(max-width: 680px)']: {
+        borderRightColor:
+          columnsLength - 1 !== columnIndex ? '#1212121A' : 'none',
+        borderRightStyle: columnsLength - 1 !== columnIndex ? 'solid' : 'none',
+      },
+
+      ...(isBodyCell && {
+        color: col.textColor,
+        padding: '15px',
+        font: 'avenir',
+        fontSize: '14px',
+      }),
+      ...(isHeaderCell && {
+        fontWeight: 600,
+        fontSize: '14px',
+      }),
+
+      ...columnSx,
+      ...rowSx,
+      ...cellSx,
+      ...allSx,
+    } as CSSObject
+  },
+)
+
+export const StyledMuiTable = styled(Table)<StyledMuiTableProps>(
+  ({ theme, sx }) => {
+    const containerSx: SxProps<Theme> = _.get(sx, 'MuiTable')
+    return {
+      ...containerSx,
+    } as CSSObject
+  },
+)
+
+export const StyledTableRow = styled(TableRow, {
+  shouldForwardProp: (prop) => prop !== 'canRowClick',
+})<{ canRowClick: boolean }>(({ canRowClick }) => ({
+  ...(canRowClick && {
+    cursor: 'pointer',
+    '&.MuiTableRow-hover:hover': {
+      backgroundColor: alpha('#f2f2f2', 0.4),
+    },
+  }),
+}))
+
+export const StyledTableContainer = styled(
+  TableContainer,
+)<StyledTableContainerProps>(({ theme, sx }) => {
+  const containerSx: SxProps<Theme> = _.get(sx, 'TableContainer')
+
+  return {
+    width: '100%',
+    overflowX: 'auto',
+    ...containerSx,
+  } as CSSObject
+})
+
+const getSxKeys = (rowIndex, columnIndex) => {
+  return {
+    rowkey: `row:${rowIndex}`,
+    columnKey: `column:${columnIndex}`,
+    cellKey: `row:${rowIndex},column:${columnIndex}`,
+    allKey: 'Tablecell',
+  }
+}

package/src/components/index.ts

@@ -60,6 +60,7 @@ export { default as ReportPageHeader } from './ReportPageHeader'
 export { default as Spinner } from './Spinner'
 export { default as PaymentStepper } from './Stepper'
 export { default as SwitchButton } from './SwitchButton'
+export { default as Table2D } from './Tables/2DTable'
 export { default as Table } from './Tables/BasicTable'
 export { default as TableFooter } from './Tables/BasicTable/TableFooter'
 export { default as ReactTable } from './Tables/ReactTable'

package/src/shared-state/PermissionsStore.ts

@@ -313,6 +313,13 @@ export enum SquarePermissions {
   CAN_SURVEYS_EDIT = 'can_surveys_edit',
   CAN_SURVEYS_ADD = 'can_surveys_add',
   CAN_SURVEYS_DELETE = 'can_surveys_delete',
+
+
+
+
+
+
+
 }
 
 export enum EnrollPermissions {
@@ -949,6 +956,24 @@ export enum Permission {
   CAN_SURVEYS_ADD = 'can_surveys_add',
   CAN_SURVEYS_DELETE = 'can_surveys_delete',
 
+  //Configuration 
+
+  CAN_CONFIGURATION_VIEW = 'can_configuration_view',
+
+  //Digital Notice Board
+  CAN_NOTICE_BOARD_VIEW = 'can_notice_board_view',
+  CAN_NOTICE_BOARD_EDIT = 'can_notice_board_edit',
+  CAN_NOTICE_BOARD_ADD = 'can_notice_board_add',
+  CAN_NOTICE_BOARD_DELETE = 'can_notice_board_delete',
+
+
+  //Research Projects
+  CAN_RESEARCH_PROJECT_VIEW = 'can_research_project_view',
+  CAN_RESEARCH_PROJECT_EDIT = 'can_research_project_edit',
+  CAN_RESEARCH_PROJECT_ADD = 'can_research_project_add',
+  CAN_RESEARCH_PROJECT_DELETE = 'can_research_project_delete',
+
+
   // Enroll X
 
   // manage exams profile_permissions