@campxdev/shared 0.6.18 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "0.6.18",
+  "version": "1.0.0",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",
@@ -30,6 +30,7 @@
     "@emotion/styled": "^11.8.1",
     "@hookform/resolvers": "^2.9.10",
     "@mui/icons-material": "^5.6.2",
+    "@mui/lab": "^5.0.0-alpha.112",
     "@mui/material": "^5.7.0",
     "@mui/x-date-pickers": "^5.0.0-alpha.3",
     "axios": "^0.27.2",

package/src/components/DrawerWrapper/DialogWrapper.tsx

@@ -35,10 +35,14 @@ export default function DialogWrapper({
   return (
     <Dialog
       fullWidth
-      maxWidth="md"
       sx={{
         zIndex: 500,
         minHeight: '70vh',
+        '& .MuiDialog-container': {
+          '& .MuiPaper-root': {
+            maxWidth: '1420px',
+          },
+        },
       }}
       onClose={onClose}
       open={open}
@@ -55,7 +59,7 @@ export default function DialogWrapper({
           <Close />
         </IconButton>
       </StyledDialogHeader>
-      <DialogContent sx={{ padding: '20px' }}>
+      <DialogContent sx={{ padding: '0' }}>
         <>{children}</>
       </DialogContent>
     </Dialog>

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

@@ -15,7 +15,7 @@ import {
 } from './assets'
 
 import CogWheelMenu from './CogWheelMenu'
-import FreshDeskHelpButton from './FreshDeskHelpButton'
+import HelpWidget from './HelpWidget/HelpWidget'
 import Notification from './Notification'
 import { StyledHeader, StyledImageWrapper } from './styles'
 import UserBox from './UserBox'
@@ -75,7 +75,7 @@ export default function AppHeader({
         <AppLogo clientLogo={clientLogo} />
       </Box>
       <Box className="actions">
-        <FreshDeskHelpButton />
+        <HelpWidget />
         {/* <Notification /> */}
         {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
         <UserBox

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

@@ -0,0 +1,298 @@
+import { yupResolver } from '@hookform/resolvers/yup'
+import {
+  ArrowBackIosNew,
+  ArrowForwardIos,
+  Close,
+  HelpOutline,
+  NotesSharp,
+} from '@mui/icons-material'
+import {
+  Box,
+  Button,
+  Card,
+  DialogContent,
+  IconButton,
+  Stack,
+  Typography,
+} from '@mui/material'
+import { AxiosRequestConfig } from 'axios'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { useQuery } from 'react-query'
+import { toast } from 'react-toastify'
+import axios, { axiosErrorToast } from '../../../../config/axios'
+import { queryClient } from '../../../../contexts/QueryClientProvider'
+import { FormSingleSelect, FormTextField } from '../../../HookForm'
+import ImageUpload from '../../../ImageUpload'
+import MediaRow from '../../../MediaRow'
+import * as yup from 'yup'
+import Spinner from '../../../Spinner'
+import { Media } from '../../../UploadButton/types'
+import {
+  StyledCard,
+  StyledContactBoxHeader,
+  StyledContactHeader,
+  StyledDialog,
+  StyledDialogCard,
+  StyledDialogHeader,
+} from './styles'
+const schema = yup.object().shape({
+  name: yup.string().required('Name is required'),
+  subject: yup.string().required('Subject is required'),
+  description: yup.string().required('Description is required'),
+  categoryId: yup.string().required('Category is required'),
+  serviceId: yup.string().required('Service is required'),
+})
+const HelpWidget = () => {
+  const [open, setOpen] = useState(false)
+  const { control, handleSubmit, watch, reset } = useForm({
+    resolver: yupResolver(schema),
+  })
+  const [state, setState] = useState(0)
+  const { data: ticketCategories, isLoading } = useQuery(
+    'ticketCategories',
+    () => axios.get(`/service-tickets/categories`).then((res) => res.data),
+  )
+  // console.log(ticketCategories)
+  const [uploadMedia, setUploadMedia] = useState<Media[]>([])
+
+  const handleClickOpen = () => {
+    setOpen(true)
+    setState(0)
+  }
+  const handleClose = () => {
+    setOpen(false)
+    reset()
+  }
+  const handleUploadImageChange = (v) => {
+    setUploadMedia([
+      ...uploadMedia,
+      { type: 'image', url: v.url, key: v.key, id: v.id },
+    ])
+  }
+
+  const handleUploadDeleteImage = (key) => {
+    setUploadMedia((prev) => prev.filter((m) => m.key !== key))
+  }
+
+  const onSubmit = async (formData) => {
+    const config: AxiosRequestConfig = {
+      method: 'POST',
+      url: '/service-tickets',
+      data: {
+        issueFiles: [uploadMedia[0]?.key],
+        ...formData,
+      },
+    }
+
+    try {
+      await axios(config)
+      queryClient.invalidateQueries('ticketCategories')
+      toast.success('Ticket Created Successfully')
+      handleClose()
+      reset()
+      setUploadMedia([])
+    } catch (error) {
+      axiosErrorToast(error)
+    }
+  }
+  if (isLoading) return <Spinner />
+
+  return (
+    <div>
+      <StyledDialog
+        fullWidth
+        onClose={handleClose}
+        open={open}
+        PaperProps={{
+          sx: {
+            borderRadius: '10px',
+          },
+        }}
+      >
+        {state == 0 ? (
+          <>
+            <StyledDialogHeader>
+              <IconButton onClick={handleClose}>
+                <Close sx={{ position: 'absolute', color: 'white', top: 5 }} />
+              </IconButton>
+            </StyledDialogHeader>
+            <DialogContent sx={{ padding: '0' }}>
+              <Box>
+                <StyledCard>
+                  <Box
+                    sx={{ display: 'flex', gap: '10px', alignItems: 'center' }}
+                  >
+                    <NotesSharp />
+                    <Typography variant="h5" sx={{ fontSize: '14px' }}>
+                      Knowledge Base
+                    </Typography>
+                  </Box>
+                  <ArrowForwardIos sx={{ width: '15px', color: 'blue' }} />
+                </StyledCard>
+              </Box>
+              <Box
+                sx={{
+                  padding: '15px 20px 20px 20px',
+                }}
+              >
+                <Card
+                  sx={{
+                    boxShadow: '0px 3px 15px #0000001A',
+                    padding: '20px 15px',
+                    marginTop: '30px',
+                  }}
+                >
+                  <Stack gap={1}>
+                    <Typography variant="h3">Want to get in touch?</Typography>
+                    <Typography variant="subtitle2" sx={{ maxWidth: '290px' }}>
+                      We’re standing by to answer all of your questions right
+                      now.
+                    </Typography>
+                  </Stack>
+                  <Button
+                    fullWidth
+                    sx={{
+                      borderRadius: '8px',
+                      marginTop: '15px',
+                      height: '50px',
+                    }}
+                    onClick={() => setState(1)}
+                  >
+                    Contact Us
+                  </Button>
+                </Card>
+              </Box>
+            </DialogContent>
+          </>
+        ) : (
+          <>
+            <Box>
+              <StyledContactHeader>
+                <StyledContactBoxHeader onClick={() => setState(0)}>
+                  <ArrowBackIosNew sx={{ fontSize: 'small', color: 'white' }} />
+                  <Typography sx={{ color: 'white' }} variant="h3">
+                    Contact Us
+                  </Typography>
+                </StyledContactBoxHeader>
+                <IconButton onClick={handleClose}>
+                  <Close
+                    sx={{
+                      position: 'absolute',
+                      color: 'white',
+                      top: 5,
+                      right: 2,
+                    }}
+                  />
+                </IconButton>
+              </StyledContactHeader>
+              <DialogContent sx={{ height: '500px' }}>
+                <StyledDialogCard>
+                  <form onSubmit={handleSubmit(onSubmit)}>
+                    <Stack gap={'20px'}>
+                      <FormTextField
+                        label={'Your Name'}
+                        name={'name'}
+                        control={control}
+                      />
+                      <FormTextField
+                        label={'Subject'}
+                        name={'subject'}
+                        control={control}
+                      />
+                      <FormTextField
+                        label={'Description'}
+                        name={'description'}
+                        control={control}
+                        multiline
+                        rows={5}
+                        required
+                      />
+                      <FormSingleSelect
+                        label={'Category'}
+                        name={'categoryId'}
+                        control={control}
+                        options={ticketCategories?.map((item) => {
+                          return { label: item.name, value: item._id }
+                        })}
+                        // onChange={(value) => {
+                        //   mutate({ id: value })
+                        // }}
+                        required
+                      />
+                      <FormSingleSelect
+                        label={'Service'}
+                        name={'serviceId'}
+                        control={control}
+                        options={
+                          ticketCategories
+                            ?.find((item) => item?._id === watch('categoryId'))
+                            ?.services?.map((item) => ({
+                              label: item.name,
+                              value: item._id,
+                            })) ?? []
+                        }
+                        required
+                      />
+
+                      {/* <StyledContactCard>
+                          <Screenshot />
+                          <Typography sx={{ fontSize: '12px' }} variant="h5">
+                            Take screenshot
+                          </Typography>
+                        </StyledContactCard> */}
+                      {/* <StyledContactCard
+                          sx={{
+                            minHeight: '120px',
+                            flexDirection: 'column',
+                            border: '2px dashed #0000001A',
+                          }}
+                        > */}
+                      {/* <Upload />
+                          <Typography sx={{ fontSize: '12px' }} variant="h5">
+                            Upload files (max 5)
+                          </Typography>
+                          <Typography variant="h4" sx={{ fontSize: '10px' }}>
+                            Click to add or drag & drop files
+                          </Typography> */}
+                      {/* category id , service id and priority is required */}
+                      {!uploadMedia?.length ? (
+                        <ImageUpload
+                          onFileUploaded={handleUploadImageChange}
+                          postUrl="/tickets/upload-issue-file"
+                          // postUrl="/"
+                        />
+                      ) : (
+                        <MediaRow
+                          list={uploadMedia}
+                          onDelete={handleUploadDeleteImage}
+                        />
+                      )}
+                      {/* </StyledContactCard> */}
+                      <Button
+                        type="submit"
+                        fullWidth
+                        sx={{
+                          height: '60px',
+                          borderRadius: '10px',
+                          fontSize: '18px',
+                        }}
+                      >
+                        Send
+                      </Button>
+                    </Stack>
+                  </form>
+                </StyledDialogCard>
+              </DialogContent>
+            </Box>
+          </>
+        )}
+      </StyledDialog>
+
+      <IconButton color="secondary">
+        <HelpOutline onClick={handleClickOpen} />
+      </IconButton>
+    </div>
+  )
+}
+export default HelpWidget

package/src/components/Layout/Header/HelpWidget/styles.tsx

@@ -0,0 +1,92 @@
+import { alpha, Box, Card, Dialog, styled } from '@mui/material'
+import { background, contactBg } from '../assets'
+// import background from '../../Header/assets/background.png'
+export const StyledDialogHeader = styled(Box)(({ theme }) => ({
+  height: '180px',
+  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
+  backgroundImage: `url(${background})`,
+  backgroundSize: 'cover',
+  display: 'flex',
+  alignItems: 'start',
+  justifyContent: 'flex-end',
+  padding: '0.6rem 1rem',
+}))
+export const StyledDialog = styled(Dialog)(() => ({
+  zIndex: 500,
+  transition: 'max-height 0.3s ease-in-out',
+  '& .MuiDialog-container': {
+    justifyContent: 'flex-end',
+    alignItems: 'end',
+
+    '& .MuiPaper-root': {
+      maxWidth: '380px',
+    },
+  },
+}))
+export const StyledCard = styled(Card)(() => ({
+  display: 'flex',
+  position: 'absolute',
+  width: '340px',
+  justifyContent: 'space-between',
+  margin: '-30px 20px 0 20px',
+  padding: '20px 15px',
+  cursor: 'pointer',
+  boxShadow: '0px 3px 15px #0000001A',
+}))
+
+export const StyledContactHeader = styled(Box)(({ theme }) => ({
+  height: '170px',
+  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
+  backgroundImage: `url(${contactBg})`,
+  backgroundSize: 'cover',
+  display: 'flex',
+  alignItems: 'start',
+  justifyContent: 'space-between',
+  padding: '0.6rem 1rem',
+}))
+
+// export const StyledContact = styled(Dialog)(() => ({
+//   zIndex: 500,
+//   height: '950px',
+//   '& .MuiDialog-container': {
+//     bottom: 0,
+//     justifyContent: 'flex-end',
+//     alignItems: 'end',
+//     '& .MuiPaper-root': {
+//       maxWidth: '380px',
+//     },
+//   },
+// }))
+
+export const StyledContactCard = styled(Card)(() => ({
+  minHeight: '50px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '10px',
+  cursor: 'pointer',
+  border: '1px solid #0000001A',
+  backgroundColor: '#cfbdbd1a',
+}))
+
+export const StyledDialogCard = styled(Card)(() => ({
+  padding: '20px',
+  boxShadow: '0px 5px 10px #0000001A',
+  maxHeight: '550px',
+  overflowY: 'auto',
+  '&::-webkit-scrollbar': {
+    width: '0px',
+    height: '0px',
+  },
+  marginTop: '-90px',
+  marginLeft: '-4px',
+  position: 'absolute',
+}))
+
+export const StyledContactBoxHeader = styled(Box)(() => ({
+  marginTop: '40px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '5px',
+  cursor: 'pointer',
+}))

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

@@ -6,7 +6,9 @@ import { StyledUser } from './styles'
 import logout from '../../../utils/logout'
 import ChangePassword from '../../ChangePassword'
 import { ExitToAppOutlined, HttpsOutlined } from '@mui/icons-material'
-
+import ConfirmationNumberOutlinedIcon from '@mui/icons-material/ConfirmationNumberOutlined'
+import DialogWrapper from '../../DrawerWrapper/DialogWrapper'
+import MyTickets from '../Tickets/MyTickets'
 export default function UserBox({
   username,
   profileIcon,
@@ -17,14 +19,19 @@ export default function UserBox({
   actions: { label: ReactNode; icon?: ReactNode; onClick: any }[]
 }) {
   const [open, setOpen] = useState(false)
-
+  const [openTicket, setOpenTicket] = useState(false)
   const handleClickOpen = () => {
     setOpen(true)
   }
   const handleClose = (value: string) => {
     setOpen(false)
   }
-
+  const handleTicketOpen = () => {
+    setOpenTicket(true)
+  }
+  const handleTicketClose = () => {
+    setOpenTicket(false)
+  }
   return (
     <>
       <MenuButton
@@ -48,6 +55,11 @@ export default function UserBox({
         }
         menu={[
           ...actions,
+          {
+            label: 'My Tickets',
+            icon: <ConfirmationNumberOutlinedIcon />,
+            onClick: handleTicketOpen,
+          },
 
           {
             label: 'Change Password',
@@ -64,6 +76,14 @@ export default function UserBox({
           PaperProps: { sx: { top: '64px !important' } },
         }}
       />
+      <DialogWrapper
+        open={openTicket}
+        title={'All Tickets'}
+        children={<MyTickets />}
+        onClose={() => {
+          handleTicketClose()
+        }}
+      />
       <ChangePassword open={open} onClose={handleClose} />
     </>
   )

package/src/components/Layout/Header/assets/index.ts

@@ -1,17 +1,18 @@
-import collegex from './newAssets/campx.png'
-import enrollx from './newAssets/entrollx.png'
-import examx from './newAssets/examx.png'
-import payx from './newAssets/payx.png'
-import peoplex from './newAssets/pepolex.png'
-import campxSquareSmall from './newAssets/campx_square_small.svg'
-import examsSmall from './newAssets/exams_small.svg'
-import paySmall from './newAssets/pay_small.svg'
-import peopleSmall from './newAssets/people_small.svg'
-import hostelSmall from './newAssets/hostel_small.svg'
-import commuteSmall from './newAssets/commutexSmall.svg'
-import commutex from './newAssets/commuteX.png'
-import hostelx from './newAssets/hostelx.png'
-
+import collegex from './campx.png'
+import enrollx from './entrollx.png'
+import examx from './examx.png'
+import payx from './payx.png'
+import peoplex from './pepolex.png'
+import campxSquareSmall from './campx_square_small.svg'
+import examsSmall from './exams_small.svg'
+import paySmall from './pay_small.svg'
+import peopleSmall from './people_small.svg'
+import hostelSmall from './hostel_small.svg'
+import background from './background.png'
+import contactBg from './contactBg.png'
+import commuteSmall from './commutexSmall.svg'
+import commutex from './commutex.png'
+import hostelx from './hostelx.png'
 
 export {
   collegex,
@@ -25,8 +26,8 @@ export {
   paySmall,
   peopleSmall,
   hostelSmall,
+  background,
+  contactBg,
   commutex,
- 
-  commuteSmall
-  
+  commuteSmall,
 }

package/src/components/Layout/Tickets/MyTickets.tsx

@@ -0,0 +1,74 @@
+import { Box, Typography } from '@mui/material'
+import moment from 'moment'
+import { useState } from 'react'
+import { useQuery } from 'react-query'
+import axios from '../../../config/axios'
+import Spinner from '../../Spinner'
+// import { getImage } from './Services'
+import { StyledCardData, StyledLeftContainer, StyledListItem } from './styles'
+import TicketDetails from './TicketDetails'
+
+function MyTickets() {
+  const [currentTicket, setCurrentTicket] = useState(null)
+  const { data, isLoading } = useQuery<any>('tickets', () =>
+    axios.get('/service-tickets/my-tickets').then((res) => res.data.result),
+  )
+  // const { data: imageData } = useQuery('imageData', () => getImage(data))
+  if (isLoading) return <Spinner />
+  return (
+    <Box sx={{ display: 'flex', gap: '20px' }}>
+      <Box sx={{ margin: '10px', borderRadius: '10px' }}>
+        <StyledLeftContainer>
+          {data?.map((item) => (
+            <TicketListItem
+              key={item}
+              data={item}
+              setCurrentTicket={setCurrentTicket}
+              currentTicket={currentTicket}
+            />
+          ))}
+        </StyledLeftContainer>
+      </Box>
+      {currentTicket?._id ? (
+        <TicketDetails data={currentTicket} id={currentTicket._id} />
+      ) : (
+        ''
+      )}
+    </Box>
+  )
+}
+
+export default MyTickets
+
+const TicketListItem = ({ data, setCurrentTicket, currentTicket }) => {
+  return (
+    <StyledListItem
+      isActive={currentTicket?._id === data?._id ? true : false}
+      onClick={() => {
+        // set selected ticket data
+        setCurrentTicket(data)
+      }}
+    >
+      <Box
+        sx={{
+          width: '400px',
+          display: 'flex',
+        }}
+      >
+        <Box className="left">
+          <Typography variant="body2">{data?.name}</Typography>
+          <Typography variant="subtitle2">
+            {moment(data?.createdAt).format('DD MMMM, YYYY  hh:mm: a')}
+          </Typography>
+        </Box>
+        <Box className="right">
+          <StyledCardData>
+            <Typography variant="h5" sx={{ fontSize: '9px' }}>
+              {data?.status.replace('_', ' ')}
+            </Typography>
+          </StyledCardData>
+        </Box>
+      </Box>
+    </StyledListItem>
+  )
+}

package/src/components/Layout/Tickets/Services.tsx

@@ -0,0 +1,6 @@
+import axios from '../../../config/axios'
+
+export const getImage = async (id: string) => {
+  let imageData = await axios.get(`/service-tickets/${id}`)
+  return imageData?.data
+}

package/src/components/Layout/Tickets/TicketDetails.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable react/jsx-key */
+import { Box, Card, Stack, Typography } from '@mui/material'
+import axios from 'axios'
+import moment from 'moment'
+import { useQuery } from 'react-query'
+import { getImage } from './Services'
+import { StyledBoxDetails, StyledCardData } from './styles'
+import StyledTimeLine from './TimeLine'
+// export const getImage = async (id: string) => {
+//   let imgData = await axios.get(`/service-tickets/${id}`)
+//   return imgData?.data
+// }
+function TicketDetails({ data, id }) {
+  const { data: imageData } = useQuery(['imageData', id], () => getImage(id))
+  console.log(imageData, 'imagedata')
+  return (
+    <Box>
+      {data ? (
+        <Card
+          sx={{
+            marginTop: '20px',
+          }}
+        >
+          <StyledBoxDetails>
+            <Box>
+              <Typography variant="h5">{data?.name}</Typography>
+              <Typography variant="subtitle2" sx={{ marginTop: '5px' }}>
+                {moment(data?.createdAt).format('DD MMMM, YYYY  hh:mm: a') ??
+                  ' '}
+              </Typography>
+              <Typography
+                sx={{ marginTop: '20px', maxWidth: '500px', fontSize: '14px' }}
+              >
+                {data?.description}
+              </Typography>
+              <Stack direction={'column'} gap="20px" sx={{ marginTop: '10px' }}>
+                {imageData?.issueFiles?.map((item) => (
+                  <img src={item?.url} height={'100px'} width={'200px'} />
+                ))}
+              </Stack>
+            </Box>
+            <StyledCardData
+              sx={{
+                marginRight: '10px',
+              }}
+            >
+              <Typography variant="h5" sx={{ fontSize: '10px' }}>
+                {data.status.replace('_', ' ')}
+              </Typography>
+            </StyledCardData>
+          </StyledBoxDetails>
+        </Card>
+      ) : (
+        ''
+      )}
+      <Box sx={{ marginTop: '30px', marginBottom: '30px' }}>
+        <Typography variant="h1" sx={{ marginBottom: '10px' }}>
+          {data?.timelineLogs ? 'Ticket Timeline' : ''}
+        </Typography>
+        <StyledTimeLine data={data?.timelineLogs} />
+      </Box>
+    </Box>
+  )
+}
+
+export default TicketDetails

package/src/components/Layout/Tickets/TimeLine.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable react/jsx-key */
+import moment from 'moment'
+import { Typography } from '@mui/material'
+import {
+  TimelineSeparator,
+  TimelineConnector,
+  TimelineDot,
+  TimelineContent,
+} from '@mui/lab'
+import { StyledTimelineBox, StyledTimeLineItem } from './styles'
+
+interface TimelineComponentProps {
+  data: any
+}
+
+function StyledTimeLine({ data }: TimelineComponentProps) {
+  return data?.map((item, index) => (
+    <StyledTimeLineItem key={index}>
+      <TimelineSeparator>
+        <TimelineDot
+          variant="outlined"
+          sx={{ width: '20px', height: '20px' }}
+        />
+        {!(index === data.length - 1) ? <TimelineConnector /> : ''}
+      </TimelineSeparator>
+      <TimelineContent>
+        <Typography variant="h6">{item?.message}</Typography>
+        <Typography sx={{ marginTop: '10px' }}>
+          {moment(item?.createdAt).format(' h:mmA Do MMMM YYYY,  ')}
+        </Typography>
+        <RenderContent timeLog={item} />
+      </TimelineContent>
+    </StyledTimeLineItem>
+  ))
+}
+export default StyledTimeLine
+
+const RenderContent = ({ timeLog }) => {
+  if (timeLog?.files) {
+    return (
+      <StyledTimelineBox>
+        <Typography sx={{ marginBottom: '3px' }}>{timeLog?.notes}</Typography>
+        {/* {timeLog?.files?.map((item) => (
+          <img src={item?.url} height={'100px'} width={'200px'} />
+        ))} */}
+      </StyledTimelineBox>
+    )
+  }
+
+  if (timeLog?.notes) {
+    return (
+      <StyledTimelineBox
+        sx={{
+          maxWidth: '400px',
+        }}
+      >
+        <Typography sx={{ wordWrap: 'break-word' }}>
+          {timeLog?.notes}
+        </Typography>
+      </StyledTimelineBox>
+    )
+  }
+  return <></>
+}

package/src/components/Layout/Tickets/index.tsx

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

package/src/components/Layout/Tickets/styles.tsx

@@ -0,0 +1,136 @@
+import { TimelineItem } from '@mui/lab'
+import { alpha, Box, Card, styled, Typography } from '@mui/material'
+
+export const StyledListItem = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'isActive',
+})<{ isActive: boolean }>(({ theme, isActive }) => ({
+  maxWidth: '400px',
+  height: '85px',
+  display: 'flex',
+  border: theme.borders.grayLight,
+
+  alignItems: 'center',
+  cursor: 'pointer',
+  transition: 'all 0.2s ease',
+  ':first-child': {
+    borderTopRightRadius: '10px',
+    borderTopLeftRadius: '10px',
+  },
+  '&:hover': {
+    background: alpha(theme.palette.secondary.main, 0.02),
+  },
+
+  '& .left': {
+    paddingLeft: '10px',
+    marginRight: 'auto',
+    '& .MuiTypography-root': {
+      marginTop: '4px',
+      '& > span': {
+        color: theme.palette.secondary.main,
+      },
+    },
+  },
+  '& .right': {
+    paddingRight: '15px',
+    display: 'flex',
+  },
+  '&:before': {
+    transition: 'all 0.2s ease',
+    content: "''",
+    height: '95%',
+    width: '4px',
+    borderRadius: '2px',
+    background: 'transparent',
+    ...(isActive && {
+      background: theme.palette.common.yellow,
+    }),
+  },
+
+  ...(isActive && {
+    background: alpha(theme.palette.secondary.main, 0.035),
+  }),
+}))
+
+export const StyledRemarksContainer = styled(Box)({
+  height: '170px',
+  borderRadius: '10px',
+  border: '1px solid #1212121A',
+  marginBottom: '20px ',
+})
+export const StyledLetterBackGround = styled(Box)({
+  width: '60px',
+  height: '60px',
+  display: 'flex',
+  backgroundColor: 'black',
+  justifyContent: 'center',
+  alignItems: 'center',
+})
+export const StyledNamecontainer = styled(Box)({
+  display: 'flex',
+  gap: '20px',
+  alignItems: 'center',
+  margin: '25px',
+})
+
+export const StyledLetter = ({ letter }) => {
+  //letter?.split(' ')[0][0]}${letter?.split(' ')[1][0]
+  const value = `${letter?.split(' ')[0][0]}`
+
+  return (
+    <StyledLetterBackGround>
+      <Typography variant="h1" sx={{ color: 'white' }}>
+        {value.toLocaleUpperCase()}
+      </Typography>
+    </StyledLetterBackGround>
+  )
+}
+export const StyledBox = styled(Box)({
+  width: '900px',
+  height: 'calc(80vh - 100px)',
+  overflowY: 'auto',
+  '&::-webkit-scrollbar': {
+    width: '0px',
+    height: '0px',
+  },
+})
+
+export const StyledTimelineBox = styled(Box)({
+  borderRadius: '10px',
+  border: '1px solid #1212121A',
+  margin: '20px 0',
+  padding: '20px',
+  maxWidth: '600px',
+})
+
+export const StyledTimeLineItem = styled(TimelineItem)(({ theme }) => ({
+  '& .MuiTimelineDot-root': {
+    backgroundColor: theme.palette.secondary,
+  },
+  '&:before': {
+    content: 'none',
+  },
+}))
+
+export const StyledLeftContainer = styled(Box)({
+  maxHeight: 'calc(80vh - 50px)',
+  //  maxHeight: 'calc(80vh - 130px)', 1st default value
+  overflowY: 'auto',
+  '&::-webkit-scrollbar': {
+    width: '0px',
+    height: '0px',
+  },
+})
+
+export const StyledCardData = styled(Card)({
+  borderRadius: '4px',
+  width: 'auto',
+  backgroundColor: '#1E19F51A',
+  padding: '6px 10px',
+})
+
+export const StyledBoxDetails = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '950px',
+  padding: '20px',
+})

package/src/components/ListItemButton.tsx

@@ -49,6 +49,7 @@ export const StyledListItemButton = styled(MuiListItemButton)<{
 }>(({ theme, isActive, dropDown = false }) => ({
   gap: '10px',
   fontWeight: 'bold',
+  padding: '8px 20px',
   backgroundColor: isActive && '#1d1d1d',
   '&:hover': {
     backgroundColor: isActive && '#1d1d1d',
@@ -59,7 +60,7 @@ export const StyledListItemButton = styled(MuiListItemButton)<{
     height: '100%',
     left: 0,
     top: 0,
-    width: isActive ? '5px' : 0,
+    width: isActive ? '6px' : 0,
     opacity: isActive ? (dropDown ? 0 : 1) : 0,
     transition: theme.transitions.create(['opacity', 'width']),
     background: theme.palette.common.yellow,

package/src/components/ModalButtons/DialogButton.tsx

@@ -51,7 +51,7 @@ export default function DialogButton({
   const [open, setOpen] = useState(false)
 
   const ButtonEl = (props) => (
-    <Button {...props} {...btnProps}>
+    <Button {...props} {...btnProps} sx={{ fontSize: '14px', fontWeight: 600 }}>
       {btnTxt}
     </Button>
   )

package/src/components/SideNav.tsx

@@ -40,7 +40,7 @@ const SideNav = ({
       }}
     >
       {header ? header : null}
-      <Box>
+      <Box sx={{ ':first-child': { marginTop: '25px' } }}>
         {menuItems.map((item, index) => (
           <RenderMenuItem key={index} menuItem={item} />
         ))}

package/src/hooks/useAuth.ts

@@ -30,6 +30,7 @@ function useAuth(): {
 
     axios
       .get('/auth/my-permissions')
+      
       .then((res) => {
         console.log(res.data)
         setLoading(false)

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

@@ -1,19 +0,0 @@
-import { HelpOutline } from '@mui/icons-material'
-import { Button, IconButton } from '@mui/material'
-
-export default function FreshDeskHelpButton() {
-  const handleOpenFreshDeskWidget = () => {
-    try {
-      ;(window as any)?.openFreshDeskWidget()
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error('Error launching Freshdesk')
-    }
-  }
-
-  return (
-    <IconButton color="secondary" onClick={handleOpenFreshDeskWidget}>
-      <HelpOutline />
-    </IconButton>
-  )
-}

package/src/components/Layout/Header/assets/campx.svg

@@ -1,29 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="231" height="35" viewBox="0 0 231 35">
-  <defs>
-    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
-      <stop offset="0" stop-color="#596e79"/>
-      <stop offset="1" stop-color="#7c909b"/>
-    </linearGradient>
-  </defs>
-  <g id="Group_4457" data-name="Group 4457" transform="translate(-110 -27.5)">
-    <text id="CAMPX_SQUARE" data-name="CAMPX SQUARE" transform="translate(157 53)" font-size="22" font-family="Nexa-XBold, Nexa" font-weight="700"><tspan x="0" y="0">CAMPX SQUARE</tspan></text>
-    <g id="Group_4467" data-name="Group 4467">
-      <g id="Rectangle_8974" data-name="Rectangle 8974" transform="translate(115 27.5)" fill="#fff" stroke="#fff" stroke-width="1">
-        <rect width="25" height="2" stroke="none"/>
-        <rect x="0.5" y="0.5" width="24" height="1" fill="none"/>
-      </g>
-      <g id="Rectangle_8975" data-name="Rectangle 8975" transform="translate(115 60.5)" fill="#fff" stroke="#fff" stroke-width="1">
-        <rect width="25" height="2" stroke="none"/>
-        <rect x="0.5" y="0.5" width="24" height="1" fill="none"/>
-      </g>
-    </g>
-    <g id="Group_4468" data-name="Group 4468" transform="translate(-215 -207.49)">
-      <g id="Group_4487" data-name="Group 4487" transform="translate(325 234.99)">
-        <g id="Group_4480" data-name="Group 4480">
-          <path id="Subtraction_36" data-name="Subtraction 36" d="M35,35H30V34h4V1H30V0H5V1H1V34H5v1H0V0H35V35Z" fill="#121212"/>
-        </g>
-      </g>
-      <path id="Subtraction_37" data-name="Subtraction 37" d="M20,20H0V0H20V20ZM4,4V16H16V4Z" transform="translate(332.5 242.491)" fill="url(#linear-gradient)"/>
-    </g>
-  </g>
-</svg>

package/src/components/Layout/Header/assets/payxHeader.svg

@@ -1,21 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40">
-  <defs>
-    <linearGradient id="linear-gradient" x1="0.222" y1="1" x2="0.787" gradientUnits="objectBoundingBox">
-      <stop offset="0" stop-color="#88b053"/>
-      <stop offset="1" stop-color="#50840b"/>
-    </linearGradient>
-  </defs>
-  <g id="Group_4498" data-name="Group 4498" transform="translate(-325 -234.99)">
-    <g id="Group_4464" data-name="Group 4464" transform="translate(336.956 243.562)">
-      <g id="Group_4461" data-name="Group 4461" transform="translate(0)">
-        <g id="Group_4460" data-name="Group 4460" transform="translate(0 0)">
-          <path id="Subtraction_8" data-name="Subtraction 8" d="M5.723,11.749,14.229.041,14.172,0H8.564L2.875,7.829v0L.026,11.747v0h5.7Z" transform="translate(1.858 11.108)" fill="url(#linear-gradient)"/>
-          <path id="Subtraction_8-2" data-name="Subtraction 8" d="M8.532,0,.026,11.707l.057.041H5.692L11.38,3.92v0L14.229,0V0h-5.7Z" transform="translate(-0.026 0)" fill="url(#linear-gradient)"/>
-        </g>
-      </g>
-    </g>
-    <g id="Group_4480" data-name="Group 4480" transform="translate(325 234.99)">
-      <path id="Subtraction_36" data-name="Subtraction 36" d="M40,40H34.286V38.857h4.571V1.143H34.286V0H5.714V1.143H1.143V38.857H5.714V40H0V0H40V40Z" fill="#121212"/>
-    </g>
-  </g>
-</svg>

package/src/components/Layout/Header/assets/peoplexHeader.svg

@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40">
-  <defs>
-    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
-      <stop offset="0" stop-color="#d0002b"/>
-      <stop offset="1" stop-color="#ea4a6b"/>
-    </linearGradient>
-  </defs>
-  <g id="Group_4500" data-name="Group 4500" transform="translate(-325 -234.99)">
-    <path id="Union_5" data-name="Union 5" d="M23.169,22.857,19.574,17.91l-.669.921L21.792,22.8l-.073.053H8.659v0l2.926-4.027-.667-.919L7.322,22.857H0l0,0,3.66-5.038,0,0,7.232-9.955.036.049.022-.03,4.293,5.909,4.307-5.928.036.049.022-.03L30.45,22.8l-.074.053ZM12.2,7.761v0h.183l-.093.128ZM3.63,7.887l-.091-.126,0,0h.183l-.093.128Zm23.243-.024-.076-.1h.04l.074.053-.037.05h0Zm-8.657,0-.076-.1h.04l.073.053-.037.05h0ZM16.574,2.881a2.881,2.881,0,1,1,2.881,2.881A2.881,2.881,0,0,1,16.574,2.881Zm-8.564,0a2.881,2.881,0,1,1,2.881,2.881A2.881,2.881,0,0,1,8.01,2.881Z" transform="translate(329.775 243.534)" fill="url(#linear-gradient)"/>
-    <g id="Group_4480" data-name="Group 4480" transform="translate(325 234.99)">
-      <path id="Subtraction_36" data-name="Subtraction 36" d="M40,40H34.286V38.857h4.571V1.143H34.286V0H5.714V1.143H1.143V38.857H5.714V40H0V0H40V40Z" fill="#121212"/>
-    </g>
-  </g>
-</svg>