added imports

src/components/accordion/Accordion.styles.ts

@@ -35,7 +35,8 @@ export const styles: AccordionSx = {
     description: {
       fontSize: { md: '14px', sm: '8px' },
       lineHeight: { md: '24px', sm: '12px' },
-      color: 'basic.white'
+      color: 'basic.white',
+      wordWrap: 'break-word'
     },
     active: {
       backgroundColor: 'primary.800',
@@ -66,7 +67,8 @@ export const styles: AccordionSx = {
       pb: '24px',
       color: 'primary.900',
       typography: 'body2',
-      fontWeight: 400
+      fontWeight: 400,
+      wordWrap: 'break-word'
     },
     active: {
       boxShadow: commonShadow,

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

@@ -0,0 +1,2 @@
+export const studentLabelsPercentage = [0, 25, 50, 75, 100]
+export const tutorLabelsPercentage = [0, 20, 40, 60, 80, 100]

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,59 @@ 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'
+  },
+  wrapperMainLabelForCoop: {
+    width: '100%'
+  }
 }

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

@@ -6,24 +6,49 @@ import useBreakpoints from '~/hooks/use-breakpoints'
 import { styles } from '~/components/app-progress-bar-line/AppProgressBarLine.styles'
 import { LinearProgress } from '@mui/material'
 import { UserRoleEnum } from '~/types'
-
+import {
+  studentLabelsPercentage,
+  tutorLabelsPercentage
+} from './AppProgressBarLine.constans'
+import { AccessTime } from '@mui/icons-material'
+import { useTranslation } from 'react-i18next'
 interface AppProgressBarLineProps {
   value: number
   userRole: UserRoleEnum | ''
+  isCooperationActivities?: boolean
 }
 
 const AppProgressBarLine: FC<AppProgressBarLineProps> = ({
   value,
-  userRole
+  userRole,
+  isCooperationActivities = false
 }) => {
   const { isMobile } = useBreakpoints()
+  const { t } = useTranslation()
   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'>
+      ? studentLabelsPercentage
+      : tutorLabelsPercentage
+  const labelsWithPercentForCooperation = (
+    <Box sx={styles.wrapperMainLabelForCoop}>
+      <Typography sx={styles.primaryLabelsCoop} variant='body2'>
+        {t('cooperationDetailsPage.progressBar.yourProgress')}
+      </Typography>
+      <Box sx={styles.wrapperTypographyProgressCoop}>
+        <Typography sx={styles.completedLabel} variant='h5'>
+          {`${value}% ${t('cooperationDetailsPage.progressBar.completed')}`}
+        </Typography>
+        <Box sx={styles.wrapperTitleWithIconCoop}>
+          <AccessTime sx={styles.accessTimeIcon} />
+          <Typography sx={styles.primaryLabelsCoop} variant='subtitle1'>
+            {`${100 - value}% ${t('cooperationDetailsPage.progressBar.needToComplete')}`}
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  )
+  const labelsWithPercentForProfile = isMobile ? (
+    <Typography color='primary.500' variant='subtitle2'>
       {`${value}%`}
     </Typography>
   ) : (
@@ -37,12 +62,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/components/app-text-field/AppTextField.styles.ts

@@ -2,7 +2,7 @@ export const styles = {
   helperText: (multiline?: boolean) => ({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
+    whiteSpace: 'pre-wrap',
     mr: multiline ? '48px' : '14px'
   })
 }

src/components/calendar/Calendar.styles.ts

@@ -3,7 +3,7 @@ import { TypographyVariantEnum } from '~/types'
 export const styles = {
   calendarContainer: {
     width: { xs: '87%', sm: '380px', md: '561px' },
-    height: { xs: '257px', sm: '290px', md: '444px' },
+    height: { xs: '277px', sm: '315px', md: '500px' },
     m: { xs: '0px auto 0px', md: '40px 0px 0px', lg: '87px 0px 0px' },
     backgroundColor: 'basic.white',
     border: '1px solid basic.lightBlue',

src/components/enhanced-table/enum-filter/EnumFilter.jsx → src/components/enhanced-table/enum-filter/EnumFilter.tsx

@@ -6,9 +6,30 @@ import ClearIcon from '@mui/icons-material/Clear'
 import useMenu from '~/hooks/use-menu'
 import FilterCheckbox from '~/components/enhanced-table/filter-checkbox/FilterCheckbox'
 
-const EnumFilter = ({ column, filter, setFilter, clearFilter }) => {
+interface FilterEnum {
+  value: string
+  label: string
+}
+
+interface EnumFilterProps {
+  column: {
+    filterEnum: FilterEnum[]
+  }
+  filter: string[]
+  setFilter: (filter: string[]) => void
+  clearFilter: () => void
+}
+
+const EnumFilter: React.FC<EnumFilterProps> = ({
+  column,
+  filter,
+  setFilter,
+  clearFilter
+}) => {
   const { renderMenu, openMenu } = useMenu()
 
+  const isFilterEmpty = filter.length === 0
+
   const menuItems = column.filterEnum.map((filterEnum) => (
     <FilterCheckbox
       data-testid='filter-checkbox'
@@ -21,7 +42,8 @@ const EnumFilter = ({ column, filter, setFilter, clearFilter }) => {
 
   const endAdornment = (
     <IconButton
-      className={filter.length ? 'visible' : 'hidden'}
+      aria-hidden={isFilterEmpty}
+      className={!isFilterEmpty ? 'visible' : 'hidden'}
       data-testid='clear-icon-in-filter'
       onClick={clearFilter}
     >

src/components/enhanced-table/filter-row/FilterRow.tsx

@@ -0,0 +1,44 @@
+import TableRow from '@mui/material/TableRow'
+import TableCell from '@mui/material/TableCell'
+
+import FilterCell from '~/components/enhanced-table/filter-row/filter-cell/FilterCell'
+import { TableColumn, TableFilter } from '~/types'
+
+interface FilterRowProps<I, F> {
+  columns: TableColumn<I>[]
+  filter?: TableFilter<F>
+  isSelection?: boolean
+}
+const FilterRow = <I, F>({
+  columns,
+  filter,
+  isSelection
+}: FilterRowProps<I, F>) => {
+  const filters = filter?.filters
+  const setFilterByKey = filter?.setFilterByKey
+  const clearFilterByKey = filter?.clearFilterByKey
+
+  const filterCells =
+    filters &&
+    columns.map((column) => (
+      <FilterCell
+        clearFilter={clearFilterByKey?.(column.field as keyof F)}
+        column={column}
+        filter={filters[column.field as keyof F]}
+        key={column.field}
+        setFilter={setFilterByKey?.(column.field as keyof F)}
+      />
+    ))
+
+  const emptyCell = isSelection && filters && <TableCell />
+
+  return (
+    <TableRow>
+      {emptyCell}
+      {filterCells}
+      {emptyCell}
+    </TableRow>
+  )
+}
+
+export default FilterRow

src/components/enhanced-table/filter-row/filter-cell/FilterCell.jsx → src/components/enhanced-table/filter-row/filter-cell/FilterCell.tsx

@@ -3,8 +3,30 @@ import TableCell from '@mui/material/TableCell'
 import SearchInput from '~/components/search-input/SearchInput'
 import DateFilter from '~/components/enhanced-table/date-filter/DateFilter'
 import EnumFilter from '~/components/enhanced-table/enum-filter/EnumFilter'
+import { TableColumn } from '~/types'
 
-const FilterCell = ({ column, filter, setFilter, clearFilter }) => {
+interface TableColumnProps<I> extends TableColumn<I> {
+  dataType: 'string'
+}
+
+interface Filter {
+  from: string | null
+  to: string | null
+}
+
+interface FilterCellProps<I, F> {
+  column: TableColumnProps<I>
+  filter?: F
+  setFilter: (filter: F) => void
+  clearFilter: () => void
+}
+
+const FilterCell = <I, F extends Filter | string>({
+  column,
+  filter,
+  setFilter,
+  clearFilter
+}: FilterCellProps<I, F>) => {
   const enums = (
     <EnumFilter
       clearFilter={clearFilter}
@@ -17,16 +39,16 @@ const FilterCell = ({ column, filter, setFilter, clearFilter }) => {
   const string = (
     <SearchInput
       data-testid='searchInput'
-      search={filter}
-      setSearch={setFilter}
+      search={filter as string}
+      setSearch={setFilter as React.Dispatch<React.SetStateAction<string>>}
     />
   )
 
   const date = (
     <DateFilter
       clearFilter={clearFilter}
-      filter={filter}
-      setFilter={setFilter}
+      filter={filter as Filter}
+      setFilter={setFilter as (filter: Filter) => void}
     />
   )
 

src/components/popular-categories/PopularCategories.tsx

@@ -23,6 +23,7 @@ import {
 } from '~/utils/helper-functions'
 import { CategoryInterface, ItemsWithCount, SortEnum } from '~/types'
 import { styles } from '~/components/popular-categories/PopularCategories.styles'
+import { titleToCamel } from '~/utils/title-to-camel-case'
 
 interface PopularCategoriesProps {
   title: string
@@ -68,7 +69,9 @@ const PopularCategories: FC<PopularCategoriesProps> = ({
           iconColor={item.appearance.color}
           key={item._id}
           link={`${authRoutes.subjects.path}?categoryId=${item._id}`}
-          title={item.name}
+          title={t(`categories.${titleToCamel(item.name)}`, {
+            defaultValue: item.name
+          })}
         />
       )),
     [response.items, oppositeRole, t]