@campxdev/shared 1.11.5 → 1.11.7

package/exports.ts

@@ -9,6 +9,10 @@ export {
   default as DialogProvider,
   useModal,
 } from './src/components/DrawerWrapper/DrawerWrapper'
+export {
+  default as ErrorModalProvider,
+  useErrorModal,
+} from './src/components/ErrorModalWrapper/ErrorModalWrapper'
 export { default as ConfirmContextProvider } from './src/components/PopupConfirm/ConfirmContextProvider'
 
 export { default as Providers } from './src/contexts/Providers'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.11.5",
+  "version": "1.11.7",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",
@@ -73,8 +73,8 @@
     "@types/react": "^18.0.25",
     "@types/react-flatpickr": "^3.8.8",
     "@types/react-helmet": "^6.1.6",
-    "@typescript-eslint/eslint-plugin": "^5.35.1",
-    "@typescript-eslint/parser": "^5.35.1",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
     "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^3.5.0",
@@ -85,6 +85,6 @@
     "prettier": "^2.5.0",
     "react-scripts": "^5.0.1",
     "storybook-addon-react-router-v6": "^0.2.1",
-    "typescript": "^4.8.4"
+    "typescript": "^5.2.2"
   }
 }

package/src/assets/images/index.ts

@@ -5,13 +5,14 @@ const internalserver = require('./500.png')
 const unauth = require('./401.png')
 const nointernet = require('./nointernet.png')
 const campxLogoPrimary = require('./campx_logo__full_primary.png')
-
+const animatedImage = require('./animation.gif')
 export {
+  animatedImage,
   avatarImage,
   campxLogoPrimary,
+  internalserver,
+  nointernet,
   pagenotfound,
   permissiondenied,
-  internalserver,
   unauth,
-  nointernet,
 }

package/src/components/DatabaseConfiguration/DatabaseConfiguration.tsx

@@ -0,0 +1,28 @@
+import { Stack } from '@mui/material'
+import { useQuery } from 'react-query'
+import PageHeader from '../PageHeader'
+import Spinner from '../Spinner'
+import { AddConnectionDrawerButton } from './components/AddConnectionDrawerButton'
+import { ConnectionCard } from './components/ConnectionCard'
+import { getPunchLogsDatabaseConfigByTenant } from './service'
+
+const DatabaseConfiguration = ({ type }) => {
+  const { data: punchLogsDatabaseConfig, isLoading } = useQuery(
+    'punch-logs-database-config',
+    getPunchLogsDatabaseConfigByTenant,
+  )
+
+  if (isLoading) return <Spinner />
+  return (
+    <Stack>
+      <PageHeader title="Punch Logs Database Configuration" />
+      {!punchLogsDatabaseConfig ? (
+        <AddConnectionDrawerButton type={type} />
+      ) : (
+        <ConnectionCard data={punchLogsDatabaseConfig} />
+      )}
+    </Stack>
+  )
+}
+
+export default DatabaseConfiguration

package/src/components/DatabaseConfiguration/DatabaseConfigurationForm.tsx

@@ -0,0 +1,87 @@
+import * as yup from 'yup'
+import { generateLabelValueOptions } from '../../constants'
+import Form from '../Form/Form'
+import { Field } from '../Form/RenderForm'
+
+const fields: Field[] = [
+  {
+    name: 'host',
+    render: 'FormTextField',
+    required: true,
+    label: 'Host',
+  },
+  {
+    name: 'username',
+    render: 'FormTextField',
+    required: true,
+    label: 'Username',
+  },
+  {
+    name: 'password',
+    render: 'FormTextField',
+    required: true,
+    label: 'Password',
+  },
+  {
+    name: 'port',
+    render: 'FormTextField',
+    required: true,
+    label: 'Port',
+  },
+  {
+    name: 'database',
+    render: 'FormTextField',
+    required: true,
+    label: 'Database',
+  },
+  {
+    name: 'timezone',
+    render: 'FormMultiSelect',
+    elementProps: {
+      multiple: false,
+    },
+    validation: yup.object().required('Select a Timezone'),
+    required: true,
+    label: 'Timezone',
+  },
+]
+
+export const DatabaseConfigurationForm = ({
+  data,
+  close,
+  successToastMessage,
+  type,
+}) => {
+  const timezones = Intl.supportedValuesOf('timeZone')
+  return (
+    <Form
+      onCancel={close}
+      endPoint="/hrms/punch-logs-database-config"
+      fields={fields}
+      cols={1}
+      refetchKey="punch-logs-database-config"
+      dropdowns={{ timezone: generateLabelValueOptions(timezones) }}
+      submitBtn={{
+        label: 'Save',
+      }}
+      onSubmit={(originalFormData) => {
+        return {
+          ...originalFormData,
+          timezone: originalFormData?.timezone?.value,
+          type,
+        }
+      }}
+      defaultValues={{
+        ...data,
+        timezone: {
+          label: data?.timezone,
+          value: data?.timezone,
+        },
+      }}
+      successToastMessage={successToastMessage}
+      onSuccess={() => {
+        close()
+      }}
+    />
+  )
+}

package/src/components/DatabaseConfiguration/components/AddConnectionDrawerButton.tsx

@@ -0,0 +1,30 @@
+import { Add } from '@mui/icons-material'
+import { Typography } from '@mui/material'
+import { DrawerButton } from '../../ModalButtons'
+import { DatabaseConfigurationForm } from '../DatabaseConfigurationForm'
+import { StyledSelectAttachmentsContainer } from '../styles'
+
+export const AddConnectionDrawerButton = ({ type }) => {
+  return (
+    <DrawerButton
+      key={'1'}
+      anchor={({ open }) => (
+        <StyledSelectAttachmentsContainer onClick={open}>
+          <Add />
+          <Typography sx={{ margin: '0px 10px', opacity: '0.6' }}>
+            Add Database Configuration
+          </Typography>
+        </StyledSelectAttachmentsContainer>
+      )}
+      content={({ close }) => (
+        <DatabaseConfigurationForm
+          type={type}
+          data={null}
+          close={close}
+          successToastMessage="Created Database Configuration"
+        />
+      )}
+      title="Add Database Configuration"
+    />
+  )
+}

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,73 @@
+import { Box, Button, Modal, 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: '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 const ErrorModalTemplate = ({ handleClose, modal, setModal }) => {
+  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?.errorMessage}
+          </Typography>
+        </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,57 @@
+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,
+  })
+
+  const handleClose = () => {
+    setModal({
+      ...modal,
+      open: false,
+    })
+  }
+
+  const showModal = (props) => {
+    const fallbackMessage = props.fallBack ?? 'Something went wrong.'
+    const errorMessage =
+      typeof props.error?.response?.data?.message !== 'string'
+        ? props.error?.response?.data?.message?.join('\n') ?? fallbackMessage
+        : props.error?.response?.data?.message
+
+    setModal({
+      ...modal,
+      open: true,
+      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/ReportHeader.tsx

@@ -118,7 +118,7 @@ export default function ReportHeader({
             src={
               reportHeaderImageUrl ||
               current?.reportHeader?.url ||
-              masterInstitution.reportHeader?.url
+              masterInstitution?.reportHeader?.url
             }
           />
         </>
@@ -142,19 +142,23 @@ export default function ReportHeader({
               sx={recognitionDetailsSx}
             >
               {recognitionDetailsText ||
-                current.recognitionDetails ||
-                masterInstitution.recognitionDetails}
+                current?.recognitionDetails ||
+                masterInstitution?.recognitionDetails ||
+                ''}
             </Typography>
           )}
           {!hideAddress && (
             <Typography variant={addressVariant} sx={addressSx}>
-              {addressText || current.address || masterInstitution.address}
+              {addressText ||
+                current?.address ||
+                masterInstitution?.address ||
+                ''}
             </Typography>
           )}
           {!hidePhone && (
             <Typography variant={phoneVariant} sx={phoneSx}>
               {'Phone: ' +
-                (phoneText || current.phone || masterInstitution.phone)}
+                (phoneText || current?.phone || masterInstitution?.phone)}
             </Typography>
           )}
         </>
@@ -168,8 +172,8 @@ export default function ReportHeader({
         />
       )}
       {typographyList &&
-        typographyList.map((s) => (
-          <Typography variant={s.variant || 'body1'} sx={s.sx}>
+        typographyList.map((s, index) => (
+          <Typography key={index} variant={s.variant || 'body1'} sx={s.sx}>
             {s.text}
           </Typography>
         ))}

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/constants/UIConstants.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from "react"
+
 export const batchOptions = Array.from({ length: 12 }, (_, i) => {
   return `${2012 + i} - ${2012 + i + 1}`
 }).reverse()
@@ -126,3 +128,50 @@ export const ProfileApplicationType = [
     value: 'hrms',
   },
 ]
+
+export interface Option {
+  label: string | ReactNode
+  value: any
+}
+
+export interface GenerateLabelValueProps {
+  labelKey?: string
+  valueKey?: string
+  useIndexAsValue?: boolean
+  startFromOne?: boolean
+  showAll?: boolean
+}
+
+export const generateLabelValueOptions = (
+  options: any[],
+  {
+    labelKey,
+    valueKey,
+    useIndexAsValue,
+    startFromOne,
+    showAll,
+  }: GenerateLabelValueProps = {
+    labelKey: null,
+    valueKey: null,
+    useIndexAsValue: false,
+    startFromOne: false,
+    showAll: false,
+  },
+): Option[] => {
+  let result
+  if (labelKey == null) {
+    result = options.map((option, index) => ({
+      label: option[0].toUpperCase() + option.slice(1),
+      value: useIndexAsValue ? (startFromOne ? index + 1 : index) : option,
+    }))
+  } else {
+    result = options.map((option) => ({
+      label: option[labelKey],
+      value: option[valueKey],
+    }))
+  }
+  if (showAll) {
+    result.unshift({ label: 'All', value: 'all' })
+  }
+  return result
+}

package/src/contexts/Providers.tsx

@@ -8,9 +8,9 @@ import { ReactNode, useEffect } from 'react'
 import { ToastContainer } from '../components'
 import DialogProvider from '../components/DrawerWrapper/DrawerWrapper'
 import GlobalNetworkLoadingIndicator from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
-import FreshChatButton from '../components/Layout/Header/HeaderActions/FreshChatButton'
-import RootModal from './RootModal'
+import ErrorModalProvider from '../components/ErrorModalWrapper/ErrorModalWrapper'
 import { isDevelopment } from '../constants'
+import RootModal from './RootModal'
 
 export const campxTenantKey = Cookies.get('campx_tenant')
 export const urlTenantKey = window.location.pathname.split('/')[1]
@@ -60,7 +60,7 @@ export default function Providers({ children }: { children: ReactNode }) {
         <MuiThemeProvider>
           <ConfirmContextProvider>
             <DialogProvider>
-              {children}
+              <ErrorModalProvider>{children}</ErrorModalProvider>
               <GlobalNetworkLoadingIndicator />
               <RootModal />
               <ToastContainer />