Added Progress Bar for Cooperation Activities

src/components/app-progress-bar-line/AppProgressBarLine.styles.ts

@@ -6,14 +6,14 @@ export const styles = {
     display: 'flex',
     flexDirection: { xs: 'row-reverse', sm: 'column' },
     alignItems: { xs: 'center' },
-    marginTop: { xs: '8px', sm: '40px' }
+    mt: { xs: '8px', sm: '40px' }
   },
   labels: {
     width: { xs: 'auto', sm: '100%' },
     display: 'flex',
     justifyContent: 'space-between',
-    marginBottom: { xs: '0', sm: '10px' },
-    marginLeft: { xs: '20px', sm: '0' }
+    mb: { xs: '0', sm: '10px' },
+    ml: { xs: '20px', sm: '0' }
   },
   progress: (progress: number) => ({
     display: 'flex',
@@ -31,5 +31,56 @@ export const styles = {
       ${palette.basic.yellowGreen} ${175 - progress}%,
       ${palette.basic.fruitSalad} ${200 - progress}%)`
     }
-  })
+  }),
+  progressCoop: {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    height: '12px',
+    backgroundColor: `${palette.basic.turquoise100}`,
+    borderRadius: '5px',
+    '& .MuiLinearProgress-bar': {
+      borderRadius: '5px',
+      background: `${palette.basic.turquoise500}`
+    }
+  },
+  wrapperProgressCoop: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: { xs: 'row-reverse', sm: 'column' },
+    alignItems: 'center',
+    mb: { xs: '2px', sm: '24px' }
+  },
+  labelsCoop: {
+    width: { xs: 'auto', sm: '100%' },
+    display: 'flex',
+    justifyContent: 'space-between',
+    mb: '0',
+    ml: { xs: '20px', sm: '0' }
+  },
+  wrapperTypographyProgressCoop: {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end'
+  },
+  accessTimeIcon: {
+    color: 'primary.500',
+    mr: '8px',
+    fontSize: '1rem',
+    display: 'flex',
+    alignItems: 'flex-end'
+  },
+  primaryLabelsCoop: {
+    color: 'primary.500',
+    fontSize: '12px'
+  },
+  completedLabel: {
+    color: `${palette.basic.turquoise700}`,
+    fontSize: '20px'
+  },
+  wrapperTitleWithIconCoop: {
+    display: 'flex',
+    alignItems: 'center'
+  }
 }

src/components/app-progress-bar-line/AppProgressBarLine.tsx

@@ -7,23 +7,43 @@ import { styles } from '~/components/app-progress-bar-line/AppProgressBarLine.st
 import { LinearProgress } from '@mui/material'
 import { UserRoleEnum } from '~/types'
 
+import { AccessTime } from '@mui/icons-material'
 interface AppProgressBarLineProps {
   value: number
   userRole: UserRoleEnum | ''
+  isCooperationActivities?: boolean
 }
 
 const AppProgressBarLine: FC<AppProgressBarLineProps> = ({
   value,
-  userRole
+  userRole,
+  isCooperationActivities = false
 }) => {
   const { isMobile } = useBreakpoints()
   const labelsValue =
     userRole === UserRoleEnum.Student
       ? [0, 25, 50, 75, 100]
       : [0, 20, 40, 60, 80, 100]
-
-  const labelsWithPercent = isMobile ? (
-    <Typography color={'primary.500'} variant='subtitle2'>
+  const labelsWithPercentForCooperation = (
+    <Box width={'100%'}>
+      <Typography sx={styles.primaryLabelsCoop} variant='body2'>
+        Your progress
+      </Typography>
+      <Box sx={styles.wrapperTypographyProgressCoop}>
+        <Typography sx={styles.completedLabel} variant='h5'>
+          {`${value}% completed`}
+        </Typography>
+        <Box sx={styles.wrapperTitleWithIconCoop}>
+          <AccessTime sx={styles.accessTimeIcon} />
+          <Typography sx={styles.primaryLabelsCoop} variant='subtitle1'>
+            {`${100 - value}% to complete`}
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  )
+  const labelsWithPercentForProfile = isMobile ? (
+    <Typography color='primary.500' variant='subtitle2'>
       {`${value}%`}
     </Typography>
   ) : (
@@ -37,12 +57,25 @@ const AppProgressBarLine: FC<AppProgressBarLineProps> = ({
       </Typography>
     ))
   )
+  const labelsWithPercent = isCooperationActivities
+    ? labelsWithPercentForCooperation
+    : labelsWithPercentForProfile
 
   return (
-    <Box sx={styles.wrapperProgress}>
-      <Box sx={styles.labels}>{labelsWithPercent}</Box>
+    <Box
+      sx={
+        isCooperationActivities
+          ? styles.wrapperProgressCoop
+          : styles.wrapperProgress
+      }
+    >
+      <Box sx={isCooperationActivities ? styles.labelsCoop : styles.labels}>
+        {labelsWithPercent}
+      </Box>
       <LinearProgress
-        sx={styles.progress(value)}
+        sx={
+          isCooperationActivities ? styles.progressCoop : styles.progress(value)
+        }
         value={value}
         variant='determinate'
       />

src/containers/cooperation-details/cooperation-activities-view/CooperationActivitiesView.tsx

@@ -11,6 +11,7 @@ import { cooperationsSelector } from '~/redux/features/cooperationsSlice'
 
 import { UserRoleEnum } from '~/types'
 import { useAppSelector } from '~/hooks/use-redux'
+import AppProgressBarLine from '~/components/app-progress-bar-line/AppProgressBarLine'
 
 interface CooperationActivitiesViewProps {
   setEditMode: Dispatch<SetStateAction<boolean>>
@@ -22,13 +23,20 @@ const CooperationActivitiesView: FC<CooperationActivitiesViewProps> = ({
   const { sections } = useAppSelector(cooperationsSelector)
   const { userRole } = useAppSelector((state) => state.appMain)
   const isTutor = userRole === UserRoleEnum.Tutor
-
+  const percentValue = 23
   const onEdit = () => {
     setEditMode(true)
   }
 
   return (
     <Box sx={styles.root}>
+      <Box>
+        <AppProgressBarLine
+          isCooperationActivities
+          userRole=''
+          value={percentValue}
+        />
+      </Box>
       {sections.map((item) => (
         <CooperationSectionView item={item} key={item.id} />
       ))}

src/containers/cooperation-details/cooperation-activities/CooperationActivities.tsx

@@ -24,7 +24,6 @@ import {
   cooperationsSelector,
   setResourcesAvailability
 } from '~/redux/features/cooperationsSlice'
-
 import { snackbarVariants } from '~/constants'
 import {
   ResourcesAvailabilityEnum,
@@ -55,7 +54,6 @@ const CooperationActivities: FC<CooperationActivitiesProps> = ({
   const dispatch = useAppDispatch()
   const { sections, resourcesAvailability } =
     useAppSelector(cooperationsSelector)
-
   const handleResourcesAvailabilityChange = (
     status: ResourcesAvailabilityEnum
   ) => {

src/styles/app-theme/app.pallete.ts

@@ -24,6 +24,8 @@ const palette = {
     turquoiseChat: '#A0F0F2',
     turquoiseLight: '#F5FFFF',
     turquoise50: '#F2FAFA',
+    turquoise100: '#DAF1F1',
+    turquoise500: '#47B8B8',
     turquoise700: '#2B6E6E',
     blueGray: '#607D8B',
     bismark: '#546E7A',