@campxdev/shared 1.10.66 → 1.10.68

package/package.json

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

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

@@ -1,23 +1,26 @@
 import {
-  alpha,
   Box,
   IconButton,
   ListItemIcon,
-  styled,
   Table as MuiTable,
   TableBody,
   TableCell,
   TableContainer,
   TableHead,
   TableRow,
+  alpha,
+  styled,
 } from '@mui/material'
 import _ from 'lodash'
 import { useEffect, useState } from 'react'
 import Spinner from '../../Spinner'
-import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
 import NoRecordsFound from '../common/NoRecordsFound'
+import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
 import TableFooter from './TableFooter'
 
+type Order = 'asc' | 'desc' | ''
+type Sort = {}
+type DataType = 'currency' | 'string' | 'number'
 export interface ColumnProps {
   dataIndex: string
   key: string
@@ -26,8 +29,8 @@ export interface ColumnProps {
   textColor?: string
   sort?: boolean
   width?: string //pixels
+  dataType?: DataType
 }
-
 interface TableProps {
   columns: Array<ColumnProps>
   rowKey?: string
@@ -43,11 +46,9 @@ interface TableProps {
   }
   onSort?: (sort: any) => void
   dense?: boolean
+  showTotal?: boolean
+  isMobile?: boolean
 }
-
-type Order = 'asc' | 'desc' | ''
-type Sort = {}
-
 export default function Table({
   columns,
   dataSource,
@@ -56,8 +57,11 @@ export default function Table({
   loading,
   onSort,
   dense = false,
+  showTotal = false,
+  isMobile = false,
 }: TableProps) {
   const [sort, setSort] = useState<Sort>({})
+  let totalCount = []
 
   const handleSortClick = (sortBykey) => {
     setSort((prev) => {
@@ -87,20 +91,45 @@ export default function Table({
     })
   }, [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 (colIndex === 0) {
+        totalCount[colIndex] = 'Total'
+        return
+      }
+
+      totalCount[colIndex] += colValue
+    })
+  }
+
+  const convertToAmount = (data) => {
+    return data.toLocaleString('en-IN', {
+      style: 'currency',
+      currency: 'INR',
+    })
+  }
+
   return (
-    <StyledTableContainer>
+    <StyledTableContainer isMobile={isMobile}>
       <>
-        <MuiTable>
+        <StyledMuiTable isMobile={isMobile}>
           <TableHead>
             <TableRow>
               {columns.map((col, index) => (
-                <TableCell
+                <StyledTableCell
                   key={index}
-                  sx={{
-                    ...(col?.width && {
-                      width: col?.width,
-                    }),
-                  }}
+                  isMobile={isMobile}
+                  columnsLength={columns.length}
+                  index={index}
+                  col={col}
                 >
                   <Box sx={{ fontWeight: 600, fontSize: '14px' }}>
                     {col.title}
@@ -118,7 +147,7 @@ export default function Table({
                       </ListItemIcon>
                     </IconButton>
                   )}
-                </TableCell>
+                </StyledTableCell>
               ))}
             </TableRow>
           </TableHead>
@@ -126,34 +155,72 @@ export default function Table({
             <>
               {dataSource?.length ? (
                 <TableBody>
-                  {dataSource?.map((row, index) => (
+                  {dataSource?.map((row, rowIndex) => (
                     <StyledTableRow
                       canRowClick={!!onRowClick}
                       hover={!!onRowClick}
-                      key={index}
+                      key={rowIndex}
                       onClick={() => {
                         return onRowClick && onRowClick(row)
                       }}
                     >
+                      <> {showTotal && calculateTotal(row)}</>
                       {columns.map((col, colIndex) => (
-                        <TableCell
+                        <StyledTableCell
+                          key={colIndex}
+                          isMobile={isMobile}
+                          columnsLength={columns.length}
+                          index={colIndex}
+                          col={col}
                           sx={{
                             color: col.textColor,
                             padding: dense ? '10px' : '15px',
                             font: 'avenir',
                             fontSize: '14px',
                           }}
-                          key={colIndex}
                         >
-                          <>
-                            {col?.render
-                              ? col.render(row[col.dataIndex], row, index)
-                              : _.get(row, col.dataIndex)}
-                          </>
-                        </TableCell>
+                          {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}
+                            isMobile={isMobile}
+                            columnsLength={columns.length}
+                            index={colIndex}
+                            col={col}
+                            sx={{
+                              color: col.textColor,
+                              padding: dense ? '10px' : '15px',
+                              font: 'avenir',
+                              fontSize: '14px',
+                              fontWeight: '600',
+                            }}
+                          >
+                            {col?.dataType && col?.dataType == 'currency' ? (
+                              <>{convertToAmount(totalCount[colIndex])}</>
+                            ) : (
+                              <>{totalCount[colIndex]}</>
+                            )}
+                          </StyledTableCell>
+                        </>
+                      ))}
+                    </StyledTableRow>
+                  )}
                 </TableBody>
               ) : (
                 <>
@@ -164,7 +231,7 @@ export default function Table({
           ) : (
             <Spinner />
           )}
-        </MuiTable>
+        </StyledMuiTable>
       </>
       <>
         {pagination && (
@@ -181,11 +248,37 @@ export default function Table({
   )
 }
 
-const StyledTableContainer = styled(TableContainer)(({ theme }) => ({
-  width: '100%',
-  overflowX: 'auto',
+const StyledTableContainer = styled(TableContainer)<{ isMobile: boolean }>(
+  ({ theme, isMobile }) => ({
+    width: '100%',
+    overflowX: 'auto',
+    borderRadius: isMobile ? '10px 10px 10px 10px' : 'none',
+    border: isMobile ? '1px solid #1212121A' : 'none',
+  }),
+)
+
+const StyledTableCell = styled(TableCell)<{
+  isMobile: boolean
+  columnsLength: number
+  index: number
+  col: any
+  sx?: any
+}>(({ theme, isMobile, columnsLength, index, col, sx }) => ({
+  ...(col?.width && {
+    width: col?.width,
+  }),
+  borderRightColor:
+    isMobile && columnsLength - 1 !== index ? '#1212121A' : 'none',
+  borderRightStyle: isMobile && columnsLength - 1 !== index ? 'solid' : 'none',
+  ...sx,
 }))
 
+const StyledMuiTable = styled(MuiTable)<{ isMobile: boolean }>(
+  ({ theme, isMobile }) => ({
+    border: isMobile ? 'none' : '1px solid #1212121A',
+  }),
+)
+
 const StyledTableRow = styled(TableRow, {
   shouldForwardProp: (prop) => prop !== 'canRowClick',
 })<{ canRowClick: boolean }>(({ canRowClick }) => ({

package/src/components/index.ts

@@ -60,7 +60,6 @@ export { default as Spinner } from './Spinner'
 export { default as SwitchButton } from './SwitchButton'
 export { default as Table } from './Tables/BasicTable'
 export { default as TableFooter } from './Tables/BasicTable/TableFooter'
-export { default as MobileTable } from './Tables/MobileTable'
 export { default as ReactTable } from './Tables/ReactTable'
 export { default as Tabs } from './Tabs/Tabs'
 export { default as ToastContainer } from './ToastContainer'

package/src/shared-state/PermissionsStore.ts

@@ -749,13 +749,17 @@ export enum Permission {
   STUDENTS_ALLOTMENT = 'can_students_allotment',
   STUDENT_INFO_VIEW = 'can_student_info_view',
 
-  //EmailReportCronJobs
-  EMAIL_REPORT_CRON_JOBS_VIEW='can_email_report_cron_jobs_view',
-  EMAIL_REPORT_CRON_JOBS_ADD='can_email_report_cron_jobs_add',
-  EMAIL_REPORT_CRON_JOBS_EDIT='can_email_report_cron_jobs_edit',
-  EMAIL_REPORT_CRON_JOBS_DELETE='can_email_report_cron_jobs_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',
 
+  //EmailReportCronJobs
+  EMAIL_REPORT_CRON_JOBS_VIEW = 'can_email_report_cron_jobs_view',
+  EMAIL_REPORT_CRON_JOBS_ADD = 'can_email_report_cron_jobs_add',
+  EMAIL_REPORT_CRON_JOBS_EDIT = 'can_email_report_cron_jobs_edit',
+  EMAIL_REPORT_CRON_JOBS_DELETE = 'can_email_report_cron_jobs_delete',
 
   // Subjects
   SUBJECTS_VIEW = 'can_subjects_view',
@@ -793,6 +797,10 @@ export enum Permission {
   CAN_CLASSROOM_SESSION_EDIT = 'can_classroom_session_edit',
   CAN_CLASSROOM_SESSION_DELETE = 'can_classroom_session_delete',
 
+  CAN_CLASSROOM_SUBJECT_ASSESSMENT_CREATE = 'can_classroom_subject_assessment_create',
+  CAN_CLASSROOM_SUBJECT_ASSESSMENT_DELETE = 'can_classroom_subject_assessment_delete',
+  CAN_CLASSROOM_SUBJECT_ASSESSMENT_LINK_EXAM = 'can_classroom_subject_assessment_link_exam',
+
   // Institution
   CAN_INSTITUTION_VIEW = 'can_institutions_view',
   CAN_INSTITUTION_EDIT = 'can_institutions_edit',

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

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

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

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