@campxdev/shared 1.10.10 → 1.10.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.10.10",
+  "version": "1.10.12",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/IconButtons/Icons.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export const ViewIcon = () => {
   return (
     <svg
@@ -266,3 +264,36 @@ export const DateRangeIcon = () => {
     </svg>
   )
 }
+
+export const EducationIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="15.835"
+      height="20"
+      viewBox="0 0 15.835 20"
+    >
+      <path
+        id="diploma"
+        d="M9.667,10a.833.833,0,1,1,0,1.667h-2.5a.833.833,0,1,1,0-1.667Zm5-2.5a.833.833,0,0,0-.833-.833H7.167a.833.833,0,1,0,0,1.667h6.667A.833.833,0,0,0,14.667,7.5ZM7.167,5h6.667a.833.833,0,1,0,0-1.667H7.167A.833.833,0,1,0,7.167,5Zm10,11.2V19.4a.6.6,0,0,1-1.026.425l-.641-.64-.641.64a.6.6,0,0,1-1.026-.425V16.2A3.323,3.323,0,0,1,15.5,10a3.283,3.283,0,0,1,.833.118V4.167a2.5,2.5,0,0,0-2.5-2.5H7.167a2.5,2.5,0,0,0-2.5,2.5v10a2.5,2.5,0,0,0,2.5,2.5h4.167a.833.833,0,1,1,0,1.667H7.167A4.172,4.172,0,0,1,3,14.168v-10A4.172,4.172,0,0,1,7.167,0h6.667A4.172,4.172,0,0,1,18,4.167v6.985a3.292,3.292,0,0,1-.833,5.052Zm0-2.87A1.667,1.667,0,1,0,15.5,15,1.667,1.667,0,0,0,17.168,13.334Z"
+        transform="translate(-3)"
+      />
+    </svg>
+  )
+}
+
+export const ExperienceIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+    >
+      <path
+        id="briefcase"
+        d="M14.25,3h-.825A3.757,3.757,0,0,0,9.75,0H8.25A3.757,3.757,0,0,0,4.575,3H3.75A3.754,3.754,0,0,0,0,6.75v7.5A3.755,3.755,0,0,0,3.75,18h10.5A3.755,3.755,0,0,0,18,14.25V6.75A3.755,3.755,0,0,0,14.25,3Zm-6-1.5h1.5A2.25,2.25,0,0,1,11.862,3H6.138A2.25,2.25,0,0,1,8.25,1.5Zm-4.5,3h10.5A2.25,2.25,0,0,1,16.5,6.75V9H1.5V6.75A2.25,2.25,0,0,1,3.75,4.5Zm10.5,12H3.75A2.25,2.25,0,0,1,1.5,14.25V10.5H8.25v.75a.75.75,0,1,0,1.5,0V10.5H16.5v3.75A2.25,2.25,0,0,1,14.25,16.5Z"
+      />
+    </svg>
+  )
+}

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

@@ -1,4 +1,5 @@
-import { ExitToAppOutlined, HttpsOutlined } from '@mui/icons-material'
+import { ExitToAppOutlined, HttpsOutlined, Person } from '@mui/icons-material'
+import { useNavigate } from 'react-router-dom'
 import logout from '../../../../utils/logout'
 import ChangePassword from '../../../ChangePassword'
 import DropDownButton from '../../../DropDownButton/DropDownButton'
@@ -22,6 +23,7 @@ export default function UserBox({
   actions: IMenuItemProps[] | []
   customActions?: IMenuItemProps[] | []
 }) {
+  const navigate = useNavigate()
   return (
     <DropDownButton
       anchor={({ open }) => (
@@ -34,6 +36,11 @@ export default function UserBox({
           ? customActions
           : [
               ...actions,
+              {
+                label: 'My Profile',
+                icon: <Person />,
+                onClick: () => navigate('/han'),
+              },
               {
                 label: 'Change Password',
                 actionType: 'dialog',

package/src/components/MyProfile/Education/Education.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable no-console */
+/* eslint-disable react/jsx-key */
+import { Typography } from '@mui/material'
+import ActionButton from '../../ActionButton'
+import { DrawerButton } from '../../ModalButtons'
+import NoDataSection from '../NoDataSection'
+import EducationCard from './EducationCard'
+import { EducationForm } from './EducationForm'
+import { StyledBoxCard, StyledBoxContainer } from './Styles'
+
+const Education = ({ educations }) => {
+  const isEducation = educations && educations?.length > 0
+  return isEducation ? (
+    <>
+      <StyledBoxContainer>
+        <Typography variant="h3">Education</Typography>
+        <DrawerButton
+          anchor={({ open }) => (
+            <ActionButton onClick={open} variant="text">
+              +Add Education
+            </ActionButton>
+          )}
+          content={({ close }) => (
+            <EducationForm data={null} hideDialog={close} />
+          )}
+          title="Add Education"
+        />
+      </StyledBoxContainer>
+      <StyledBoxCard>
+        {educations.map((data) => (
+          <EducationCard data={data} />
+        ))}
+      </StyledBoxCard>
+    </>
+  ) : (
+    <NoDataSection
+      title="Education"
+      subtitle="Add your Education"
+      addButtonTitle="Add Education"
+      addButtonContent={({ close }) => (
+        <EducationForm data={null} hideDialog={close} />
+      )}
+    />
+  )
+}
+
+export default Education

package/src/components/MyProfile/Education/EducationCard.tsx

@@ -0,0 +1,62 @@
+import { Box, Card, Typography } from '@mui/material'
+import moment from 'moment'
+import { EditButton } from '../../IconButtons'
+import { EducationIcon } from '../../IconButtons/Icons'
+import { DrawerButton } from '../../ModalButtons'
+import { EducationForm } from './EducationForm'
+import { AvatarStyled, StyledBox } from './Styles'
+
+const EducationCard = ({ data }) => {
+  return (
+    <div>
+      <Card
+        sx={{
+          padding: '20px ',
+        }}
+      >
+        <StyledBox>
+          <Box
+            sx={{
+              display: 'flex',
+            }}
+          >
+            <AvatarStyled>
+              <EducationIcon />
+            </AvatarStyled>
+
+            <Box sx={{ marginTop: '8px', marginRight: '5px' }}>
+              <Typography variant="body2">{data?.institution}</Typography>
+              <Typography variant="subtitle2">
+                {moment(data?.startDate).format('DD MMMM, YYYY')} -
+                {moment(data?.endDate).format('DD MMMM, YYYY')}
+              </Typography>
+            </Box>
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+            }}
+          >
+            <DrawerButton
+              title={'Edit Education'}
+              anchor={({ open }) => <EditButton onClick={open} />}
+              content={({ close }) => (
+                <EducationForm data={data} hideDialog={close} />
+              )}
+            />
+          </Box>
+        </StyledBox>
+        <Box
+          sx={{
+            paddingTop: '10px',
+          }}
+        >
+          <Typography variant="h5">{data?.name}</Typography>
+          <Typography variant="subtitle2">{data?.description}</Typography>
+        </Box>
+      </Card>
+    </div>
+  )
+}
+
+export default EducationCard

package/src/components/MyProfile/Education/EducationForm.tsx

@@ -0,0 +1,97 @@
+/* eslint-disable no-console */
+import { yupResolver } from '@hookform/resolvers/yup'
+import { Stack } from '@mui/material'
+import moment from 'moment'
+import { useForm } from 'react-hook-form'
+import { useMutation, useQueryClient } from 'react-query'
+import { toast } from 'react-toastify'
+import * as yup from 'yup'
+import { axiosErrorToast } from '../../../config/axios'
+import ActionButton from '../../ActionButton'
+import { FormDatePicker, FormTextField } from '../../HookForm'
+import { createUpdateEducation } from '../service'
+
+const schema = yup.object().shape({
+  name: yup.string().required('Name is required'),
+  institution: yup.string().required('Institution is required'),
+  startDate: yup.string().required('From Date is required'),
+  description: yup.string().required('Description is required'),
+})
+
+export const EducationForm = ({ data, hideDialog }) => {
+  const queryClient = useQueryClient()
+  const { mutate, isLoading } = useMutation(createUpdateEducation, {
+    onSuccess: () => {
+      toast.success(data ? 'Education Updated' : 'Education Added')
+      queryClient.invalidateQueries('dashboard')
+      hideDialog()
+    },
+    onError: (err) => {
+      console.log(err)
+      axiosErrorToast(err)
+    },
+  })
+  const { control, handleSubmit } = useForm({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      ...data,
+      startDate: data ? moment(data.startDate).toISOString() : '',
+      endDate: data ? moment(data.endDate).toISOString() : '',
+    },
+  })
+  const onSubmit = (formData) => {
+    const postBody = {
+      ...formData,
+      startDate: moment(formData?.startDate).format('YYYY-MM-DD'),
+      endDate: moment(formData.endDate).format('YYYY-MM-DD'),
+    }
+    mutate(postBody)
+  }
+  const onError = (error) => {
+    console.log(error)
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit, onError)}>
+      <Stack gap={2.5}>
+        <>
+          <FormTextField
+            control={control}
+            name="name"
+            label="Name of the education"
+            required
+          />
+          <FormTextField
+            control={control}
+            name="institution"
+            label="Institution"
+            required
+          />
+          <FormDatePicker
+            control={control}
+            name="startDate"
+            label="From Date"
+            required
+          />
+          <FormDatePicker control={control} name="endDate" label="To Date" />
+          <FormTextField
+            control={control}
+            multiline
+            rows={4}
+            name="description"
+            label="Description"
+            required
+          />
+        </>
+      </Stack>
+      <Stack direction="row" gap={2} mt={3}>
+        <ActionButton type="submit" fullWidth loading={isLoading}>
+          Submit
+        </ActionButton>
+        <ActionButton variant="outlined" fullWidth onClick={() => hideDialog()}>
+          Cancel
+        </ActionButton>
+      </Stack>
+    </form>
+  )
+}

package/src/components/MyProfile/Education/Styles.tsx

@@ -0,0 +1,27 @@
+import { Avatar, Box, styled } from '@mui/material'
+
+export const StyledBox = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+})
+
+export const StyledBoxContainer = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  margin: '10px 5px',
+})
+
+export const StyledBoxCard = styled(Box)({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(500px, 1fr))',
+  gap: '1rem',
+})
+
+export const AvatarStyled = styled(Avatar)({
+  height: '50px',
+  width: '50px',
+  backgroundColor: '#F4F4F4',
+  marginRight: '10px',
+})

package/src/components/MyProfile/Experience/Experience.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable react/jsx-key */
+import { Typography } from '@mui/material'
+import ActionButton from '../../ActionButton'
+import { DrawerButton } from '../../ModalButtons'
+import NoDataSection from '../NoDataSection'
+import ExperienceCard from './ExperienceCard'
+import { ExperienceForm } from './ExperienceForm'
+import { StyledBoxCard, StyledBoxContainer } from './Styles'
+
+const Experience = ({ experiences }) => {
+  const isExperience = experiences && experiences.length > 0
+
+  return isExperience ? (
+    <>
+      <StyledBoxContainer>
+        <Typography variant="h3">Experience</Typography>
+        <DrawerButton
+          anchor={({ open }) => (
+            <ActionButton onClick={open} variant="text">
+              +Add Experience
+            </ActionButton>
+          )}
+          content={({ close }) => (
+            <ExperienceForm data={null} hideDialog={close} />
+          )}
+          title="Add Experience"
+        />
+      </StyledBoxContainer>
+      <StyledBoxCard>
+        {experiences.map((data) => (
+          <ExperienceCard data={data} />
+        ))}
+      </StyledBoxCard>
+    </>
+  ) : (
+    <NoDataSection
+      title="Experience"
+      subtitle="Add Experience"
+      addButtonTitle="Add Experience"
+      addButtonContent={({ close }) => (
+        <ExperienceForm data={null} hideDialog={close} />
+      )}
+    />
+  )
+}
+
+export default Experience

package/src/components/MyProfile/Experience/ExperienceCard.tsx

@@ -0,0 +1,63 @@
+import { Box, Card, Typography } from '@mui/material'
+import moment from 'moment'
+import { EditButton } from '../../IconButtons'
+import { ExperienceIcon } from '../../IconButtons/Icons'
+import { DrawerButton } from '../../ModalButtons'
+import { ExperienceForm } from './ExperienceForm'
+import { AvatarStyled, StyledBox } from './Styles'
+
+const ExperienceCard = ({ data }) => {
+  return (
+    <div>
+      <Card
+        sx={{
+          padding: '20px ',
+        }}
+      >
+        <StyledBox>
+          <Box
+            sx={{
+              display: 'flex',
+            }}
+          >
+            <AvatarStyled>
+              <ExperienceIcon />
+            </AvatarStyled>
+
+            <Box sx={{ marginTop: '8px', marginRight: '5px' }}>
+              <Typography variant="body2">{data?.title}</Typography>
+              <Typography variant="subtitle2">
+                {moment(data?.fromDate).format('DD MMMM, YYYY')} -
+                {moment(data?.toDate).format('DD MMMM, YYYY')}
+              </Typography>
+            </Box>
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+            }}
+          >
+            <DrawerButton
+              key={data?.id}
+              title={'Edit Experience'}
+              anchor={({ open }) => <EditButton onClick={open} />}
+              content={({ close }) => (
+                <ExperienceForm data={data} hideDialog={close} />
+              )}
+            />
+          </Box>
+        </StyledBox>
+        <Box
+          sx={{
+            paddingTop: '10px',
+          }}
+        >
+          <Typography variant="h5">{data?.organizationName}</Typography>
+          <Typography variant="subtitle2">{data?.description}</Typography>
+        </Box>
+      </Card>
+    </div>
+  )
+}
+
+export default ExperienceCard

package/src/components/MyProfile/Experience/ExperienceForm.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable no-console */
+import { Stack } from '@mui/material'
+import moment from 'moment'
+import { useForm } from 'react-hook-form'
+import { useMutation, useQuery, useQueryClient } from 'react-query'
+import { toast } from 'react-toastify'
+import * as yup from 'yup'
+import axios, { axiosErrorToast } from '../../../config/axios'
+import ActionButton from '../../ActionButton'
+import { FormDatePicker, FormSingleSelect, FormTextField } from '../../HookForm'
+import { createUpdateExperience } from '../service'
+import { yupResolver } from '@hookform/resolvers/yup'
+
+const schema = yup.object().shape({
+  experienceType: yup.string().required('Experience Type is required'),
+  title: yup.string().required('Title is required'),
+  organizationName: yup.string().required('Organization Name is required'),
+})
+
+export const ExperienceForm = ({ data, hideDialog }) => {
+  const queryClient = useQueryClient()
+
+  const { data: types } = useQuery('experience-type', () =>
+    axios.get('/square/experience/types').then((res) => res.data),
+  )
+  const { mutate, isLoading } = useMutation(createUpdateExperience, {
+    onSuccess: () => {
+      toast.success(data ? 'Experience Updated' : 'Experience Added')
+      queryClient.invalidateQueries('dashboard')
+      hideDialog()
+    },
+    onError: (err) => {
+      console.log(err)
+      axiosErrorToast(err)
+    },
+  })
+  const { control, handleSubmit, watch } = useForm({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      ...data,
+      fromDate: data ? moment(data.fromDate).toISOString() : '',
+      toDate: data ? moment(data.toDate).toISOString() : '',
+    },
+  })
+  const onSubmit = (formData) => {
+    const postBody = {
+      ...formData,
+      fromDate: moment(formData?.fromDate).format('YYYY-MM-DD'),
+      toDate: moment(formData.toDate).format('YYYY-MM-DD'),
+    }
+    mutate(postBody)
+  }
+  const onError = (error) => {
+    console.log(error)
+  }
+  const selectedType = watch('experienceType')
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit, onError)}>
+      <Stack gap={2.5}>
+        <FormSingleSelect
+          name="experienceType"
+          label={'Experience Type'}
+          control={control}
+          required
+          options={types?.map((item) => ({
+            value: item,
+            label: item,
+          }))}
+        />
+        {selectedType && (
+          <>
+            <FormTextField
+              control={control}
+              name="title"
+              label="Title"
+              required
+            />
+            <FormTextField
+              control={control}
+              name="organizationName"
+              label="Organisation Name"
+              required
+            />
+            <FormDatePicker control={control} name="fromDate" label="From" />
+            <FormDatePicker control={control} name="toDate" label="To" />
+            <FormTextField
+              control={control}
+              name="description"
+              label="Description"
+              multiline
+              rows={4}
+            />
+          </>
+        )}
+      </Stack>
+      <Stack direction="row" gap={2} mt={3}>
+        <ActionButton type="submit" fullWidth loading={isLoading}>
+          {data ? 'Edit Experience' : 'Add Experience'}
+        </ActionButton>
+        <ActionButton variant="outlined" fullWidth onClick={() => hideDialog()}>
+          Cancel
+        </ActionButton>
+      </Stack>
+    </form>
+  )
+}

package/src/components/MyProfile/Experience/Styles.tsx

@@ -0,0 +1,27 @@
+import { Avatar, Box, styled } from '@mui/material'
+
+export const StyledBox = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+})
+
+export const StyledBoxContainer = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  margin: '10px 5px',
+})
+
+export const StyledBoxCard = styled(Box)({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(500px, 1fr))',
+  gap: '1rem',
+})
+
+export const AvatarStyled = styled(Avatar)({
+  height: '50px',
+  width: '50px',
+  backgroundColor: '#F4F4F4',
+  marginRight: '10px',
+})

package/src/components/MyProfile/FileUpload.tsx

@@ -0,0 +1,69 @@
+import FileUploadIcon from '@mui/icons-material/FileUpload'
+import { Box, Typography } from '@mui/material'
+import { DeleteButton } from '../IconButtons'
+import { StyledUploadContainer, StyledUploadedFileContainer } from './Styles'
+
+const FileUpload = ({ resource, handleFileInput, onDelete }) => {
+  return (
+    <Box>
+      <Typography sx={{ opacity: '0.5', margin: '10px 0px' }}>
+        Attachments
+      </Typography>
+      {resource ? (
+        <FileRender resource={resource} handleDelete={onDelete} />
+      ) : (
+        <Box></Box>
+      )}
+      <StyledUploadContainer htmlFor="file">
+        <FileUploadIcon />
+        <Typography variant="subtitle2" sx={{ margin: '0px 10px' }}>
+          Upload Files
+        </Typography>
+      </StyledUploadContainer>
+      <input id="file" type="file" hidden multiple onChange={handleFileInput} />
+    </Box>
+  )
+}
+
+export default FileUpload
+
+const FileRender = ({ resource, handleDelete }) => {
+  return (
+    <>
+      {resource.length !== 0 &&
+        resource.map((file) => {
+          let extension = file?.name?.split('.')[1]
+          return (
+            <StyledUploadedFileContainer key={file.key}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                {extension === 'pdf' ? (
+                  <span>
+                    <img src={'/images/pdf.png'} />
+                  </span>
+                ) : extension === 'pptx' ? (
+                  <span>
+                    <img src={'/images/ppt.png'} />
+                  </span>
+                ) : extension === 'txt' ? (
+                  <span>
+                    <img src={'/images/doc.png'} />
+                  </span>
+                ) : (
+                  <span>
+                    <img src={'/images/jpg.png'} />
+                  </span>
+                )}
+
+                <Typography sx={{ margin: '0px 10px' }}>
+                  {file.originalFileName}
+                </Typography>
+              </Box>
+              {handleDelete && (
+                <DeleteButton onClick={() => handleDelete(file.key)} />
+              )}
+            </StyledUploadedFileContainer>
+          )
+        })}
+    </>
+  )
+}