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

package/src/assets/images/notifications.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.125" height="20" viewBox="0 0 18.125 20">
+  <path id="bell_10_" data-name="bell (10)" d="M18.958,11.384l-1.583-5.7a7.767,7.767,0,0,0-15.064.395L1.085,11.595a4.166,4.166,0,0,0,4.067,5.07H6.08a4.166,4.166,0,0,0,8.166,0h.7a4.166,4.166,0,0,0,4.015-5.281Zm-8.795,6.948a2.5,2.5,0,0,1-2.346-1.666H12.51A2.5,2.5,0,0,1,10.163,18.332Zm6.771-4.32A2.481,2.481,0,0,1,14.944,15H5.152a2.5,2.5,0,0,1-2.44-3.042L3.937,6.444a6.1,6.1,0,0,1,11.832-.31l1.583,5.7a2.481,2.481,0,0,1-.418,2.181Z" transform="translate(-0.986 -0.002)" fill="#121212"/>
+</svg>

package/src/assets/images/profile.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17.049" height="22.632" viewBox="0 0 17.049 22.632">
+  <g id="user" transform="translate(-2.85 0.15)">
+    <path id="Path_38566" data-name="Path 38566" d="M11.583,11.166A5.583,5.583,0,1,0,6,5.583a5.583,5.583,0,0,0,5.583,5.583Zm0-9.305A3.722,3.722,0,1,1,7.861,5.583,3.722,3.722,0,0,1,11.583,1.861Z" transform="translate(-0.208 0)" stroke="#fff" stroke-width="0.3"/>
+    <path id="Path_38567" data-name="Path 38567" d="M11.375,14A8.384,8.384,0,0,0,3,22.375a.931.931,0,1,0,1.861,0,6.514,6.514,0,1,1,13.027,0,.931.931,0,0,0,1.861,0A8.384,8.384,0,0,0,11.375,14Z" transform="translate(0 -0.973)" stroke="#fff" stroke-width="0.3"/>
+  </g>
+</svg>

package/src/assets/images/web.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="Group_5289" data-name="Group 5289" transform="translate(-5577 -13602)">
+    <g id="Group_5288" data-name="Group 5288">
+      <g id="Group_5287" data-name="Group 5287">
+        <path id="Vector" d="M4.44,0H15.55C19.11,0,20,.89,20,4.44v6.33c0,3.56-.89,4.44-4.44,4.44H4.44C.89,15.22,0,14.33,0,10.78V4.44C0,.89.89,0,4.44,0Z" transform="translate(5579 13604)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-2" data-name="Vector" d="M0,0V4.78" transform="translate(5589 13619.22)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-3" data-name="Vector" d="M0,0H20" transform="translate(5579 13615)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-4" data-name="Vector" d="M0,0H9" transform="translate(5584.5 13624)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-5" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(5577 13602)" fill="none" opacity="0"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/components/ActiveDevices/ActiveDevices.tsx

@@ -0,0 +1,60 @@
+import { Button, Stack } from '@mui/material'
+
+import { useMutation, useQuery } from 'react-query'
+import { NoDataIllustration } from '..'
+import { noDevices } from '../../assets/images'
+import axios from '../../config/axios'
+import useConfirm from '../PopupConfirm/useConfirm'
+import Spinner from '../Spinner'
+import { DeviceInformationCard } from './DeviceInformationCard'
+
+const ActiveDevices = ({ close }) => {
+  const { isConfirmed } = useConfirm()
+  const {
+    data: activeSessions,
+    isLoading,
+    isRefetching,
+    refetch,
+  } = useQuery('activeDevices', () =>
+    axios.get('/auth-server/auth/active-sessions').then((res) => res?.data),
+  )
+
+  const { mutate: logoutAllOtherDevices } = useMutation(
+    () => axios.post('/auth-server/auth/logout-active-sessions'),
+    {
+      onSuccess: () => {
+        close()
+      },
+    },
+  )
+
+  const handleLogoutAllOtherDevices = async () => {
+    const confirm = await isConfirmed(
+      'Are you sure you want to logout from all other devices?',
+    )
+    if (confirm) {
+      logoutAllOtherDevices()
+    }
+  }
+  if (isLoading || isRefetching) return <Spinner />
+  if (activeSessions?.length == 0)
+    return (
+      <NoDataIllustration
+        height="60vh"
+        message="No active devices found"
+        imageSrc={noDevices.default}
+      />
+    )
+  return (
+    <Stack height="60vh" padding="10px 50px" gap={3} alignItems="flex-end">
+      <Button onClick={handleLogoutAllOtherDevices} sx={{ width: '300px' }}>
+        Logout from All Other Devices
+      </Button>
+      {activeSessions?.map((sessionData) => (
+        <DeviceInformationCard sessionData={sessionData} refetch={refetch} />
+      ))}
+    </Stack>
+  )
+}
+
+export default ActiveDevices

package/src/components/ActiveDevices/DeviceInformationCard.tsx

@@ -0,0 +1,97 @@
+import { Box, Button, Stack, Typography, styled } from '@mui/material'
+import { format } from 'date-fns-tz'
+import { useMutation } from 'react-query'
+import { toast } from 'react-toastify'
+import { location, mobile, web } from '../../assets/images'
+import axios from '../../config/axios'
+import useConfirm from '../PopupConfirm/useConfirm'
+
+const StyledIconContainer = styled(Box)(({ theme }) => ({
+  backgroundColor: '#ED90350F',
+  borderRadius: '10px',
+  border: '1px solid #ED903580',
+  width: '60px',
+  height: '60px',
+  padding: '17px 0px 0px 17px',
+}))
+
+const StyledTrustedContainer = styled(Box)(({ theme }) => ({
+  backgroundColor: '#F4A101',
+  borderRadius: '15px',
+  padding: '3px 15px',
+}))
+
+export const DeviceInformationCard = ({ sessionData, refetch }) => {
+  const { isConfirmed } = useConfirm()
+
+  const { mutate: logout } = useMutation(
+    () =>
+      axios.post('/auth-server/auth/logout-active-sessions', {
+        deviceInformationId: sessionData?.deviceInformation?._id,
+      }),
+    {
+      onSuccess: () => {
+        refetch()
+      },
+      onError: (error: any) => {
+        toast.error(error?.response?.data?.message)
+      },
+    },
+  )
+  const handleLogout = async () => {
+    const confirmed = await isConfirmed(
+      'Are you sure you want to logout from this device?',
+    )
+    if (confirmed) logout()
+  }
+  return (
+    <Box
+      width="100%"
+      border="1px solid #1212121A"
+      borderRadius="10px"
+      padding="20px 0px 20px 0px"
+    >
+      <Stack
+        direction="row"
+        gap={2}
+        alignItems="center"
+        justifyContent="space-around"
+      >
+        <Stack direction="row" alignItems="center" gap={2}>
+          <StyledIconContainer>
+            <img
+              src={(sessionData.type = 'WEB' ? web.default : mobile.default)}
+            />
+          </StyledIconContainer>
+          <Stack>
+            <Stack direction="row" alignItems="center" gap={1}>
+              <Typography variant="h1" fontSize="15px">
+                {`${sessionData?.deviceInformation?.clientName} (${sessionData?.deviceInformation?.os})`}
+              </Typography>
+              {sessionData?.deviceInformation?.trusted && (
+                <StyledTrustedContainer>
+                  <Typography variant="subtitle1" color="white" fontSize="12px">
+                    Trusted
+                  </Typography>
+                </StyledTrustedContainer>
+              )}
+            </Stack>
+            <Typography variant="caption">{`Last Active on ${format(
+              new Date(sessionData?.lastAccessedAt),
+              'dd MMM, yyyy hh:mm a',
+            )}`}</Typography>
+          </Stack>
+        </Stack>
+        <Stack direction="row" alignItems="center" gap={1}>
+          <img src={location.default} />
+          <Typography variant="caption">
+            {sessionData?.deviceInformation?.locationName}
+          </Typography>
+        </Stack>
+        <Button onClick={handleLogout} variant="outlined">
+          Logout
+        </Button>
+      </Stack>
+    </Box>
+  )
+}

package/src/components/ActiveDevices/index.ts

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

package/src/components/ActivityLog/ActivityLog.tsx

@@ -0,0 +1,268 @@
+import {
+  Timeline,
+  TimelineContent,
+  TimelineItem,
+  TimelineSeparator,
+} from '@mui/lab'
+import { Box, SxProps, Typography } from '@mui/material'
+import moment from 'moment'
+import { useCallback, useRef } from 'react'
+import { useInfiniteQuery } from 'react-query'
+import { NoDataIllustration } from '..'
+import axios from '../../config/axios'
+import { useErrorModal } from '../ErrorModalWrapper/ErrorModalWrapper'
+import Spinner from '../Spinner'
+import Table from '../Tables/BasicTable/Table'
+import {
+  StyledAvatar,
+  StyledCircleIcon,
+  StyledSpinnerBox,
+  StyledTimeLineDot,
+} from './Styles'
+
+interface Props {
+  endPoint: string
+  tableView: boolean
+  enableTitle?: boolean
+  params: any
+  sx?: SxProps
+}
+
+export default function ActivityLog({
+  endPoint,
+  tableView,
+  enableTitle,
+  params,
+  sx,
+}: Props) {
+  const errorModal = useErrorModal()
+  const fetchActivities = async ({ pageParam = 0 }) => {
+    try {
+      const response = await axios.get(endPoint, { params: { ...params } })
+      return response?.data
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error)
+      errorModal({ error: error })
+    }
+  }
+
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
+    useInfiniteQuery('activities', fetchActivities, {
+      getNextPageParam: (lastPage) => {
+        return lastPage?.length ? lastPage[lastPage?.length - 1].id : null
+      },
+    })
+
+  const activitesData = data ? data?.pages?.flatMap((page) => page) : []
+
+  if (isLoading) return <Spinner />
+
+  if (data?.pages?.length === 0 || !activitesData?.length) {
+    return (
+      <NoDataIllustration
+        imageSrc=""
+        message={
+          <Typography
+            variant="h6"
+            style={{ textAlign: 'center', marginTop: '20px' }}
+          >
+            {'No data found'}
+          </Typography>
+        }
+      />
+    )
+  }
+
+  return (
+    <Box>
+      {enableTitle && (
+        <Typography
+          variant="h1"
+          sx={{ fontSize: '18px', fontWeight: 700, margin: '20px' }}
+        >
+          Activity Log
+        </Typography>
+      )}
+
+      {!tableView ? (
+        <Box
+          sx={{
+            overflowY: 'scroll',
+            '&::-webkit-scrollbar': {
+              display: 'none',
+            },
+            height: '380px',
+          }}
+        >
+          <TimeLineComponent
+            activitesData={activitesData}
+            fetchNextPage={fetchNextPage}
+            isFetchingNextPage={isFetchingNextPage}
+            hasNextPage={hasNextPage}
+            sx={sx}
+          />
+        </Box>
+      ) : (
+        <Box sx={{ margin: '0 25px' }}>
+          <Table
+            columns={columns}
+            dataSource={activitesData}
+            loading={isLoading}
+          />
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+const columns = [
+  {
+    title: 'Date',
+    dataIndex: 'timestamp',
+    key: 'timestamp',
+    render: (timestamp) =>
+      moment.utc(timestamp)?.local().format('DD MMM YYYY - hh:mm A'),
+  },
+  {
+    title: 'Action',
+    dataIndex: 'action',
+    key: 'action',
+  },
+  {
+    title: 'User Name',
+    dataIndex: 'userName',
+    key: 'userName',
+  },
+  {
+    title: 'Message',
+    dataIndex: 'message',
+    key: 'message',
+    render: (message) => (
+      <Typography sx={{ fontSize: '16px' }} variant="subtitle1">
+        {message?.split("'")?.map((text: string, index: number) =>
+          index % 2 === 0 ? (
+            <span key={index}>{text}</span>
+          ) : (
+            <Typography key={index} sx={{ display: 'inline', fontWeight: 900 }}>
+              {text}
+            </Typography>
+          ),
+        )}
+      </Typography>
+    ),
+  },
+]
+
+export const TimeLineComponent = ({
+  activitesData,
+  isFetchingNextPage,
+  hasNextPage,
+  fetchNextPage,
+  sx,
+}) => {
+  const lastItemRef = useIntersectionObserver<HTMLDivElement>(() => {
+    if (!isFetchingNextPage && hasNextPage) fetchNextPage()
+  })
+
+  return (
+    <Timeline sx={{ padding: 0, margin: 0 }}>
+      {activitesData?.map((item, index, items) => (
+        <Box
+          key={index}
+          ref={items.length - 1 === index ? lastItemRef : null}
+          sx={{ maxWidth: '550px', ...sx }}
+        >
+          <TimelineItem
+            sx={{
+              margin: 2,
+              padding: 0,
+              '&:before': { display: 'none' },
+            }}
+          >
+            <TimelineSeparator>
+              <StyledTimeLineDot>
+                <StyledCircleIcon />
+              </StyledTimeLineDot>
+              {index < activitesData?.length - 1 && (
+                <Box
+                  sx={{
+                    width: '1px',
+                    height: '115%',
+                    bgcolor: '#12121233',
+                    position: 'absolute',
+                    top: '25px',
+                  }}
+                />
+              )}
+            </TimelineSeparator>
+            <TimelineContent sx={{ padding: '6px 8px' }}>
+              <Box>
+                <Typography variant="subtitle2" sx={{ fontSize: '14px' }}>
+                  {moment
+                    .utc(item?.timestamp)
+                    .local()
+                    .format('DD MMM YYYY - hh:mm A')}
+                </Typography>
+                <Typography sx={{ fontSize: '16px' }} variant="subtitle1">
+                  {item?.message
+                    ?.split("'")
+                    ?.map((text: string, index: number) =>
+                      index % 2 === 0 ? (
+                        <span key={index}>{text}</span>
+                      ) : (
+                        <Typography
+                          key={index}
+                          sx={{ display: 'inline', fontWeight: 900 }}
+                        >
+                          {text}
+                        </Typography>
+                      ),
+                    )}
+                </Typography>
+                <Typography
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    marginTop: '8px',
+                  }}
+                >
+                  <StyledAvatar>
+                    {item?.userName?.charAt(0)?.toUpperCase()}
+                  </StyledAvatar>
+                  <Typography sx={{ fontSize: '13px', fontWeight: 900 }}>
+                    {item?.userName}
+                  </Typography>
+                </Typography>
+              </Box>
+            </TimelineContent>
+          </TimelineItem>
+          {isFetchingNextPage && index === items?.length - 1 && hasNextPage && (
+            <StyledSpinnerBox>
+              <Spinner />
+            </StyledSpinnerBox>
+          )}
+        </Box>
+      ))}
+    </Timeline>
+  )
+}
+
+function useIntersectionObserver<T extends HTMLDivElement>(
+  callback: () => void,
+) {
+  const observer = useRef<IntersectionObserver | null>(null)
+
+  const handleObserver = useCallback(
+    (node: T) => {
+      if (observer?.current) observer?.current?.disconnect()
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries[0]?.isIntersecting) callback()
+      })
+      if (node) observer?.current?.observe(node)
+    },
+    [callback],
+  )
+
+  return handleObserver
+}

package/src/components/ActivityLog/Styles.tsx

@@ -0,0 +1,35 @@
+import CircleRoundedIcon from '@mui/icons-material/CircleRounded'
+import { TimelineDot } from '@mui/lab'
+import { Avatar, Box, styled } from '@mui/material'
+
+export const StyledTimeLineDot = styled(TimelineDot)({
+  width: '20px',
+  height: '20px',
+  boxShadow: 'none',
+  backgroundColor: '#F5F5F5',
+  border: '1px solid #12121233',
+  borderRadius: '50%',
+  margin: '5.5px 0',
+})
+
+export const StyledCircleIcon = styled(CircleRoundedIcon)({
+  position: 'relative',
+  left: '1px',
+  top: '1px',
+  color: 'black',
+  width: '7px',
+  height: '7px',
+})
+
+export const StyledAvatar = styled(Avatar)(({ theme }) => ({
+  width: 30,
+  height: 30,
+  marginRight: '8px',
+  fontSize: '14px',
+}))
+
+export const StyledSpinnerBox = styled(Box)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+})

package/src/components/ActivityLog/index.ts

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

package/src/components/ApplicationProfile/ApplicationProfile.tsx

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

package/src/components/ApplicationProfile/UserProfileRelation.tsx

@@ -15,6 +15,7 @@ import {
   updateCreateUserApplicationProfile,
   userProfileSchema,
 } from './services'
+import { useErrorModal } from '../ErrorModalWrapper/ErrorModalWrapper'
 interface UserProps {
   options: {
     label: any
@@ -26,6 +27,7 @@ const getDepartments = () => {
   return axios.get('/hrms/departments').then((res) => res?.data?.data)
 }
 function UserProfileRelation({ close, application, profiles, data }) {
+  const errorModal = useErrorModal()
   const [state, setState] = useImmer<UserProps>({
     options: [],
     inputValue: '',
@@ -58,7 +60,8 @@ function UserProfileRelation({ close, application, profiles, data }) {
       onError: (err) => {
         // eslint-disable-next-line no-console
         console.log(err)
-        axiosErrorToast(err)
+        // axiosErrorToast(err)
+        errorModal({ error: err })
       },
     },
   )

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"
+    />
+  )
+}