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

package/src/components/DatabaseConfiguration/components/ConnectionCard.tsx

@@ -0,0 +1,79 @@
+import { Cached } from '@mui/icons-material'
+import { Box, CardActions, IconButton, Typography } from '@mui/material'
+import { toast } from 'react-toastify'
+import axios from '../../../config/axios'
+import { EditButton } from '../../IconButtons'
+import { DrawerButton } from '../../ModalButtons'
+import { DatabaseConfigurationForm } from '../DatabaseConfigurationForm'
+import { StyledCard, StyledCardContent } from '../styles'
+
+export const ConnectionCard = ({ data }) => {
+  const handleReconnect = async () => {
+    const response: string = await axios.post(
+      'hrms/punch-logs-database-config/connect',
+      {},
+    )
+    if (response) {
+      window.location.reload()
+    }
+    toast.success(response)
+  }
+  return (
+    <>
+      <StyledCard>
+        <StyledCardContent>
+          <Column label={'Host'} value={data?.host} />
+          <Column label={'Username'} value={data?.username} />
+          <Column label={'Password'} value={data?.password} />
+          <Column label={'Port'} value={data?.port} />
+          <Column label={'Database'} value={data?.database} />
+          <Column label={'Timezone'} value={data?.timezone} />
+          <Column
+            label={'Status'}
+            value={data?.connectionStatus}
+            color={data?.connectionStatus == 'Connected' ? 'green' : 'red'}
+          />
+        </StyledCardContent>
+        <CardActions>
+          <DrawerButton
+            key={'1'}
+            anchor={({ open }) => <EditButton onClick={open} />}
+            content={({ close }) => (
+              <DatabaseConfigurationForm
+                data={data}
+                close={close}
+                successToastMessage="Updated Database Configuration"
+                type={data.type}
+              />
+            )}
+            title="Add Database Configuration"
+          />
+          <IconButton onClick={handleReconnect}>
+            <Cached sx={{ '&:hover': { color: 'green' } }} />
+          </IconButton>
+        </CardActions>
+      </StyledCard>
+    </>
+  )
+}
+
+export const Column = ({
+  label,
+  value,
+  color = '#000000',
+}: {
+  label: string
+  value: string
+  color?: string
+}) => {
+  return (
+    <Box>
+      <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+        {label}
+      </Typography>
+      <Typography variant="h5" component="div" color={color}>
+        {value}
+      </Typography>
+    </Box>
+  )
+}

package/src/components/DatabaseConfiguration/index.ts

@@ -0,0 +1,5 @@
+import { lazy } from 'react'
+
+const DatabaseConfiguration = lazy(() => import('./DatabaseConfiguration'))
+
+export { DatabaseConfiguration }

package/src/components/DatabaseConfiguration/service.ts

@@ -0,0 +1,6 @@
+import axios from '../../config/axios'
+const ENDPOINT = '/hrms/punch-logs-database-config'
+
+export const getPunchLogsDatabaseConfigByTenant = async () => {
+  return axios.get(`${ENDPOINT}/tenant-config`).then((res) => res.data)
+}

package/src/components/DatabaseConfiguration/styles.ts

@@ -0,0 +1,30 @@
+import { Card, CardContent, FormLabel, styled } from '@mui/material'
+
+export const StyledSelectAttachmentsContainer = styled(FormLabel)({
+  border: '1px dashed #0000001A',
+  margin: '20px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '10px',
+  cursor: 'pointer',
+  height: '148px',
+  gap: '10px',
+  '&:hover': {
+    backgroundColor: '#EFEFEF',
+  },
+})
+
+export const StyledCard = styled(Card)({
+  display: 'flex',
+  margin: '20px',
+  justifyContent: 'center',
+  gap: '60px',
+})
+
+export const StyledCardContent = styled(CardContent)({
+  display: 'flex',
+  margin: '20px',
+  alignItems: 'center',
+  gap: '30px',
+})

package/src/components/DrawerWrapper/DialogTemplate.tsx

@@ -0,0 +1,58 @@
+import { Close } from '@mui/icons-material'
+import {
+  alpha,
+  Box,
+  Dialog,
+  DialogContent,
+  IconButton,
+  styled,
+  Typography,
+} from '@mui/material'
+
+const StyledDialogHeader = styled(Box)(({ theme }) => ({
+  height: '64px',
+  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '0.6rem 1rem',
+}))
+
+export default function DialogTemplate({
+  handleClose,
+  modal,
+  setModal,
+  ...props
+}) {
+  return (
+    <Dialog
+      sx={{
+        zIndex: 500,
+        minHeight: '70vh',
+        '& .MuiDialog-container': {
+          '& .MuiPaper-root': {
+            maxWidth: '1420px',
+          },
+        },
+      }}
+      onClose={handleClose}
+      open={modal.open}
+      {...props}
+      PaperProps={{
+        sx: {
+          borderRadius: '10px',
+        },
+      }}
+    >
+      <StyledDialogHeader>
+        <Typography fontWeight={600}>{modal.title}</Typography>
+        <IconButton onClick={() => setModal({ ...modal, open: false })}>
+          <Close />
+        </IconButton>
+      </StyledDialogHeader>
+      <DialogContent sx={{ padding: '0' }}>
+        <>{modal.content({ close: handleClose })}</>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/DrawerWrapper/DrawerWrapper.tsx

@@ -1,9 +1,11 @@
 import { createContext, useContext, useState } from 'react'
+import DialogTemplate from './DialogTemplate'
 import { DrawerTemplate } from './DrawerTemplate'
+import ErrorTemplate from './ErrorTemplate'
 
 interface IProps {
   title: string
-  modalType?: 'dialog' | 'drawer'
+  modalType?: 'dialog' | 'drawer' | 'error'
   content: ({ close }: { close: () => void }) => any
 }
 
@@ -32,7 +34,7 @@ export default function DialogProvider({ children }) {
       open: true,
       title: props.title,
       content: props.content,
-      // modalType: props.modalType ?? 'drawer',
+      modalType: props.modalType ?? 'drawer',
     })
   }
 
@@ -40,11 +42,25 @@ export default function DialogProvider({ children }) {
     <DialogContext.Provider value={showModal}>
       {children}
       <>
-        <DrawerTemplate
-          handleClose={handleClose}
-          modal={modal}
-          setModal={setModal}
-        />
+        {modal.modalType == 'drawer' ? (
+          <DrawerTemplate
+            handleClose={handleClose}
+            modal={modal}
+            setModal={setModal}
+          />
+        ) : modal.modalType == 'dialog' ? (
+          <DialogTemplate
+            handleClose={handleClose}
+            modal={modal}
+            setModal={setModal}
+          />
+        ) : (
+          <ErrorTemplate
+            handleClose={handleClose}
+            modal={modal}
+            setModal={setModal}
+          />
+        )}
       </>
     </DialogContext.Provider>
   )

package/src/components/DrawerWrapper/ErrorTemplate.tsx

@@ -0,0 +1,77 @@
+import { Box, Button, Modal, Typography, styled } from '@mui/material'
+import { animatedImage } from '../../assets/images'
+
+const style = {
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  width: '700px',
+  borderRadius: '10px',
+  display: 'flex',
+  gap: '15px',
+  flexDirection: 'column',
+  padding: '20px',
+}
+
+const StyledImage = styled(Box)(({ theme }) => ({
+  width: '154px',
+  margin: 'auto',
+  '> img': {
+    width: '100%',
+    height: '120px',
+    objectFit: 'contain',
+  },
+}))
+
+const MessageContainer = styled(Box)(({ theme }) => ({
+  maxHeight: '60vh',
+  padding: '15px',
+  overflowY: 'auto',
+  '&::-webkit-scrollbar': {
+    width: '0.5em',
+    height: '0.5em',
+  },
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(0, 0, 0, 0.15)',
+    borderRadius: '3px',
+    '&:hover': {
+      background: 'rgba(0, 0, 0, 0.2)',
+    },
+  },
+}))
+
+export default function ErrorTemplate({
+  handleClose,
+  modal,
+  setModal,
+  ...props
+}) {
+  return (
+    <Modal open={modal.open} onClose={handleClose}>
+      <Box sx={style}>
+        <StyledImage>
+          <img src={animatedImage} alt="Error Image" />
+        </StyledImage>
+
+        <MessageContainer>
+          <Typography
+            variant="h6"
+            sx={{ textAlign: 'center', lineHeight: 1.7 }}
+          >
+            {modal.content({ close: handleClose })}
+          </Typography>
+        </MessageContainer>
+        <Button
+          variant="outlined"
+          onClick={handleClose}
+          sx={{ height: '40px', margin: 'auto', width: '200px' }}
+        >
+          OK
+        </Button>
+      </Box>
+    </Modal>
+  )
+}

package/src/components/ErrorModal.tsx

@@ -0,0 +1,88 @@
+import { Box, Button, Modal, Typography, styled } from '@mui/material'
+import { useEffect, useState } from 'react'
+import { animatedImage } from '../assets/images'
+
+const style = {
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  width: '700px',
+  borderRadius: '10px',
+  display: 'flex',
+  gap: '15px',
+  flexDirection: 'column',
+  padding: '20px',
+}
+
+const StyledImage = styled(Box)(({ theme }) => ({
+  width: '154px',
+  margin: 'auto',
+  '> img': {
+    width: '100%',
+    height: '120px',
+    objectFit: 'contain',
+  },
+}))
+
+const MessageContainer = styled(Box)(({ theme }) => ({
+  maxHeight: '60vh',
+  padding: '15px',
+  overflowY: 'auto',
+  '&::-webkit-scrollbar': {
+    width: '0.5em',
+    height: '0.5em',
+  },
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(0, 0, 0, 0.15)',
+    borderRadius: '3px',
+    '&:hover': {
+      background: 'rgba(0, 0, 0, 0.2)',
+    },
+  },
+}))
+
+export default function ErrorModal({
+  errorMessage,
+  ...props
+}: {
+  errorMessage: string
+}) {
+  const [open, setOpen] = useState(false)
+
+  const handleClose = () => {
+    setOpen((prev) => !prev)
+  }
+
+  useEffect(() => {
+    setOpen(true)
+  }, [])
+
+  return (
+    <Modal open={open} onClose={handleClose}>
+      <Box sx={style}>
+        <StyledImage>
+          <img src={animatedImage} alt="Error Image" />
+        </StyledImage>
+
+        <MessageContainer>
+          <Typography
+            variant="h6"
+            sx={{ textAlign: 'center', lineHeight: 1.7 }}
+          >
+            {errorMessage}
+          </Typography>
+        </MessageContainer>
+        <Button
+          variant="outlined"
+          onClick={handleClose}
+          sx={{ height: '40px', margin: 'auto', width: '200px' }}
+        >
+          OK
+        </Button>
+      </Box>
+    </Modal>
+  )
+}

package/src/components/ErrorModalWrapper/ErrorModalTemplate.tsx

@@ -0,0 +1,118 @@
+import {
+  Alert,
+  Box,
+  Button,
+  Modal,
+  Stack,
+  styled,
+  Typography,
+} from '@mui/material'
+import { animatedImage } from '../../assets/images'
+
+const style = {
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  width: '700px',
+  borderRadius: '10px',
+  display: 'flex',
+  gap: '15px',
+  flexDirection: 'column',
+  padding: '35px',
+}
+
+const StyledImage = styled(Box)(({ theme }) => ({
+  width: '154px',
+  margin: 'auto',
+  '> img': {
+    width: '100%',
+    height: '120px',
+    objectFit: 'contain',
+  },
+}))
+
+const MessageContainer = styled(Box)(({ theme }) => ({
+  maxHeight: '40vh',
+  overflowY: 'auto',
+  '&::-webkit-scrollbar': {
+    width: '0.5em',
+    height: '0.5em',
+  },
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(0, 0, 0, 0.15)',
+    borderRadius: '3px',
+    '&:hover': {
+      background: 'rgba(0, 0, 0, 0.2)',
+    },
+  },
+}))
+
+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}>
+      <Box sx={style}>
+        <StyledImage>
+          <img src={animatedImage} alt="Error Image" />
+        </StyledImage>
+
+        {modal.type == 'String' ? (
+          <MessageContainer>
+            <Typography
+              variant="h6"
+              sx={{ textAlign: 'center', lineHeight: 1.7 }}
+              dangerouslySetInnerHTML={{ __html: modal?.errorMessage }}
+            />
+          </MessageContainer>
+        ) : (
+          <>
+            <MessageContainer>
+              <Alert severity={'error'} sx={{ padding: '10px' }}>
+                Please resolve the below mentioned errors to proceed further
+              </Alert>
+              <StyledTableContainer
+                dangerouslySetInnerHTML={{ __html: modal?.errorMessage }}
+              />
+            </MessageContainer>
+          </>
+        )}
+
+        {modal.content && modal.content({ close: handleClose })}
+        <Button
+          variant="outlined"
+          onClick={() => setModal({ ...modal, open: false })}
+          sx={{ height: '40px', margin: 'auto', width: '200px' }}
+        >
+          Close
+        </Button>
+      </Box>
+    </Modal>
+  )
+}

package/src/components/ErrorModalWrapper/ErrorModalWrapper.tsx

@@ -0,0 +1,76 @@
+import { createContext, useContext, useState } from 'react'
+import { ErrorModalTemplate } from './ErrorModalTemplate'
+
+interface IProps {
+  content?: ({ close }: { close: () => void }) => any
+  error?: any
+  fallBack?: string
+}
+
+type ContextType = (props: IProps) => void
+
+const ErrorModalContext = createContext<ContextType>(null)
+
+export default function ErrorModalProvider({ children }) {
+  const [modal, setModal] = useState({
+    open: false,
+    content: ({ close }) => null,
+    errorMessage: null,
+    type: 'String',
+  })
+
+  const handleClose = () => {
+    setModal({
+      ...modal,
+      open: false,
+    })
+  }
+
+  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'
+        ? convertMessageToTable(props.error?.response?.data?.message) ??
+          fallbackMessage
+        : props.error?.response?.data?.message
+
+    setModal({
+      ...modal,
+      open: true,
+      type: type,
+      content: props.content,
+      errorMessage: errorMessage,
+    })
+  }
+
+  return (
+    <ErrorModalContext.Provider value={showModal}>
+      {children}
+      <>
+        <ErrorModalTemplate
+          handleClose={handleClose}
+          modal={modal}
+          setModal={setModal}
+        />
+      </>
+    </ErrorModalContext.Provider>
+  )
+}
+
+export const useErrorModal = () => useContext(ErrorModalContext)

package/src/components/FilterComponents/SearchBar.tsx

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

package/src/components/Form/Form.tsx

@@ -14,6 +14,7 @@ import { useMutation, useQueryClient } from 'react-query'
 import { toast } from 'react-toastify'
 import axios, { axiosErrorToast } from '../../config/axios'
 import RenderForm, { RenderFormProps, generateYupSchema } from './RenderForm'
+import { useErrorModal } from '../ErrorModalWrapper/ErrorModalWrapper'
 
 const makePostRequest = async ({
   endpoint,
@@ -59,6 +60,7 @@ export default function Form({
   onCancel,
   successToastMessage,
 }: FormProps) {
+  const errorModal = useErrorModal()
   const queryClient = useQueryClient()
   const [error, setError] = useState<any>(null)
   const { control, watch, handleSubmit } = useForm({
@@ -74,7 +76,8 @@ export default function Form({
     },
     onError(error: any) {
       setError(error?.response?.data?.message)
-      axiosErrorToast(error)
+      // axiosErrorToast(error)
+      errorModal({ error: error })
     },
   })
 

package/src/components/HookForm/AutoCompleteSearch.tsx

@@ -30,6 +30,7 @@ export default function FormAutoCompleteSearch({
   control,
   name,
   options,
+  onOpen,
   label,
   loading, // pass this variable when options are from an async operation
   hookForm = true,
@@ -40,6 +41,7 @@ export default function FormAutoCompleteSearch({
   if (!hookForm) {
     return (
       <Autocomplete
+        onOpen={onOpen}
         multiple={multiple}
         value={props.value}
         fullWidth
@@ -69,6 +71,7 @@ export default function FormAutoCompleteSearch({
       render={({ field, fieldState: { error } }) => (
         <Box>
           <Autocomplete
+            onOpen={onOpen}
             multiple={multiple}
             loading={loading}
             value={field.value}

package/src/components/HookForm/MultiSelect.tsx

@@ -7,6 +7,7 @@ import { IOption } from '../Input/types'
 interface MultiSelectProps {
   control: any
   label: ReactNode
+  size?: string
   name: string
   options: IOption[]
   placeholder?: string