@campxdev/shared 1.11.21-alpha.0 → 1.11.21

package/.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["campxdev", "challan", "mentee", "mentees", "omrs"]
+  "cSpell.words": ["campxdev", "mentee", "mentees"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.11.21-alpha.0",
+  "version": "1.11.21",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",
@@ -38,9 +38,9 @@
     "axios": "^0.27.2",
     "date-fns": "^2.28.0",
     "date-fns-tz": "^2.0.0",
-    "device-detector-js": "^3.0.3",
     "fuse.js": "^6.6.2",
     "js-cookie": "^3.0.1",
+    "device-detector-js": "^3.0.3",
     "moment": "^2.29.4",
     "pullstate": "^1.24.0",
     "react": "^18.2.0",

package/src/assets/images/index.ts

@@ -5,7 +5,6 @@ const internalserver = require('./500.png')
 const unauth = require('./401.png')
 const nointernet = require('./nointernet.png')
 const campxLogoPrimary = require('./campx_logo__full_primary.png')
-const campxLogoSquare = require('./X.png')
 const animatedImage = require('./animation.gif')
 const activeDevices = require('./active_devices.svg')
 const changePassword = require('./change_password.svg')
@@ -23,8 +22,6 @@ export {
   animatedImage,
   avatarImage,
   campxLogoPrimary,
-  campxLogoSquare,
-  careers,
   changePassword,
   clogWheel,
   internalserver,
@@ -39,4 +36,5 @@ export {
   profile,
   unauth,
   web,
+  careers,
 }

package/src/components/ApplicationProfile/ApplicationProfile.tsx

@@ -31,7 +31,6 @@ interface ApplicationProfileProps {
     | 'hostels'
     | 'hrms'
     | 'commute_x'
-    | 'admin'
   title: string
   permissions?: {
     add: string

package/src/components/ErrorModalWrapper/ErrorModalTemplate.tsx

@@ -1,4 +1,12 @@
-import { Box, Button, Modal, styled, Typography } from '@mui/material'
+import {
+  Alert,
+  Box,
+  Button,
+  Modal,
+  Stack,
+  styled,
+  Typography,
+} from '@mui/material'
 import { animatedImage } from '../../assets/images'
 
 const style = {
@@ -13,7 +21,7 @@ const style = {
   display: 'flex',
   gap: '15px',
   flexDirection: 'column',
-  padding: '20px',
+  padding: '35px',
 }
 
 const StyledImage = styled(Box)(({ theme }) => ({
@@ -27,8 +35,7 @@ const StyledImage = styled(Box)(({ theme }) => ({
 }))
 
 const MessageContainer = styled(Box)(({ theme }) => ({
-  maxHeight: '60vh',
-  padding: '15px',
+  maxHeight: '40vh',
   overflowY: 'auto',
   '&::-webkit-scrollbar': {
     width: '0.5em',
@@ -43,6 +50,31 @@ const MessageContainer = styled(Box)(({ theme }) => ({
   },
 }))
 
+export const StyledTableContainer = styled(Box)({
+  background: 'white',
+  borderRadius: '16px',
+  marginTop: '10px',
+  '& table thead tr': {
+    backgroundColor: '#efefef',
+  },
+  '& table tr th': {
+    border: '1px solid #bebebe',
+    padding: '2px 8px',
+    textAlign: 'center',
+  },
+
+  '& table td': {
+    border: '1px solid #bebebe',
+    padding: '5px 10px',
+    fontWeight: 900,
+  },
+
+  '& table': {
+    width: ' 100%',
+    borderCollapse: 'collapse',
+  },
+})
+
 export const ErrorModalTemplate = ({ handleClose, modal, setModal }) => {
   return (
     <Modal open={modal.open} onClose={handleClose}>
@@ -50,14 +82,27 @@ export const ErrorModalTemplate = ({ handleClose, modal, setModal }) => {
         <StyledImage>
           <img src={animatedImage} alt="Error Image" />
         </StyledImage>
-        {console.log(modal.errorMessage, 'errmessage')}
+        <Alert severity={'error'} sx={{ padding: '10px' }}>
+          Please resolve the below mentioned errors to proceed further
+        </Alert>
         <MessageContainer>
-          <Typography
-            variant="h6"
-            sx={{ textAlign: 'center', lineHeight: 1.7 }}
-            dangerouslySetInnerHTML={{ __html: modal?.errorMessage }}
-          />
+          {modal.type == 'String' ? (
+            <Typography
+              variant="h6"
+              sx={{ textAlign: 'center', lineHeight: 1.7 }}
+              dangerouslySetInnerHTML={{ __html: modal?.errorMessage }}
+            />
+          ) : (
+            <>
+              <Stack gap={2}>
+                <StyledTableContainer
+                  dangerouslySetInnerHTML={{ __html: modal?.errorMessage }}
+                />
+              </Stack>
+            </>
+          )}
         </MessageContainer>
+
         {modal.content && modal.content({ close: handleClose })}
         <Button
           variant="outlined"

package/src/components/ErrorModalWrapper/ErrorModalWrapper.tsx

@@ -16,6 +16,7 @@ export default function ErrorModalProvider({ children }) {
     open: false,
     content: ({ close }) => null,
     errorMessage: null,
+    type: 'String',
   })
 
   const handleClose = () => {
@@ -25,17 +26,34 @@ export default function ErrorModalProvider({ children }) {
     })
   }
 
+  const convertMessageToTable = (message) => {
+    const tableRows = message.map((element, index) => {
+      return `<tr><td>${index + 1}</td><td>${element}</td></tr>`
+    })
+    return `<table>
+    <thead>
+    <tr><th>S No.</th><th>Message</th></tr>
+    </thead>
+    <tbody>
+    ${tableRows.join('')}</tbody></table>`
+  }
+
   const showModal = (props) => {
     const fallbackMessage = props.fallBack ?? 'Something went wrong.'
+    const type =
+      typeof props.error?.response?.data?.message !== 'string'
+        ? 'Object'
+        : 'String'
     const errorMessage =
       typeof props.error?.response?.data?.message !== 'string'
-        ? props.error?.response?.data?.message?.replace(/\n/g, '<br>') ??
+        ? convertMessageToTable(props.error?.response?.data?.message) ??
           fallbackMessage
-        : props.error?.response?.data?.message.replace(/\n/g, '<br>')
+        : props.error?.response?.data?.message
 
     setModal({
       ...modal,
       open: true,
+      type: type,
       content: props.content,
       errorMessage: errorMessage,
     })

package/src/components/FilterComponents/SearchBar.tsx

@@ -8,19 +8,17 @@ import { ITextFieldProps } from '../Input/TextField'
 interface SearchBarProps {
   onSearch: (v: string) => void
   label?: ReactNode
-  placeholder?: string
-  value?: string
   textFieldProps?: ITextFieldProps
+  placeholder?: string
 }
 
 export default function SearchBar({
   onSearch,
   label,
   placeholder = 'Search',
-  value,
   ...restProps
 }: SearchBarProps) {
-  const [, setSearch] = useState(value || '')
+  const [, setSearch] = useState('')
 
   const debouncedChangeHandler = useMemo(
     () =>
@@ -36,7 +34,6 @@ export default function SearchBar({
       label={label}
       placeholder={placeholder}
       onChange={debouncedChangeHandler}
-      defaultValue={value || ''}
       InputProps={{
         endAdornment: (
           <InputAdornment position="end">

package/src/components/Layout/Header/AppHeader.tsx

@@ -13,7 +13,6 @@ import {
   peoplex,
 } from './assets'
 
-import { campxLogoPrimary } from '../../../assets/images'
 import HeaderActions from './HeaderActions/HeaderActions'
 import {
   StyledHeader,
@@ -31,7 +30,6 @@ const imageMap = {
   campx: collegex,
   commute: commutex,
   hostel: hostelx,
-  admin: campxLogoPrimary,
 }
 
 interface AppHeaderProps {

package/src/components/Layout/Header/applications.ts

@@ -1,4 +1,3 @@
-import { campxLogoSquare } from '../../../assets/images'
 import { isDevelopment } from '../../../constants'
 import {
   campxSquareSmall,
@@ -11,10 +10,6 @@ import {
 } from './assets'
 
 const origins = {
-  admin: {
-    dev: 'https://admin.campx.dev',
-    prod: 'https://admin.campx.in',
-  },
   ums: {
     dev: 'https://ums.campx.dev',
     prod: 'https://ums.campx.in',
@@ -46,14 +41,6 @@ const origins = {
 }
 
 export const applications = [
-  {
-    title: 'Admin',
-    path: isDevelopment ? origins.admin.dev : origins.admin.prod,
-    icon: campxLogoSquare,
-    key: 'admin',
-    domainName: 'admin',
-    description: 'Manage Complete Campus Root Configuration',
-  },
   {
     title: 'CollegeX',
     path: isDevelopment ? origins.ums.dev : origins.ums.prod,

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

@@ -23,23 +23,21 @@ import {
 type Order = 'asc' | 'desc' | ''
 type Sort = {}
 type DataType = 'currency' | 'string' | 'number'
-
-export interface TableColumn<T> {
+export interface TableColumn {
   dataIndex: string
   key: string
   title: any
-  render?: (cellData: any, row: T, index: number) => any
+  render?: (cellData: any, row: any, index: number) => any
   textColor?: string
   sort?: boolean
   width?: string //pixels
   dataType?: DataType
 }
-
-interface TableProps<T> {
+interface TableProps {
   showSerialNumber?: boolean
-  columns: Array<TableColumn<T>>
+  columns: Array<TableColumn>
   rowKey?: string
-  dataSource?: T[]
+  dataSource?: any[]
   loading?: boolean
   onRowClick?: (row: any) => void
   pagination?: {
@@ -56,8 +54,7 @@ interface TableProps<T> {
   totalColumns?: number[]
   showTotalInFirstCellOfTotalRow?: boolean
 }
-
-export default function Table<T>({
+export default function Table({
   showSerialNumber = false,
   columns,
   dataSource,
@@ -70,7 +67,7 @@ export default function Table<T>({
   sx,
   totalColumns,
   showTotalInFirstCellOfTotalRow,
-}: TableProps<T>) {
+}: TableProps) {
   const [sort, setSort] = useState<Sort>({})
   let totalCount = []
   let totalCols = []
@@ -80,18 +77,18 @@ export default function Table<T>({
     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',
         }
       }
     })

package/src/constants/UIConstants.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { ReactNode } from "react"
 
 export const batchOptions = Array.from({ length: 12 }, (_, i) => {
   return `${2012 + i} - ${2012 + i + 1}`
@@ -127,10 +127,6 @@ export const ProfileApplicationType = [
     label: 'PeopleX',
     value: 'hrms',
   },
-  {
-    label: 'AdminX',
-    value: 'admin',
-  },
 ]
 
 export interface Option {