Block with statistics by students in categories

src/components/students-in-categories/StudentsInCategories.constants.ts

@@ -0,0 +1,72 @@
+import palette from '~/styles/app-theme/app.pallete'
+
+export const selectedCategory = [
+  {
+    value: 'Music'
+  },
+
+  {
+    value: 'Marketing'
+  },
+
+  {
+    value: 'Biology'
+  },
+
+  {
+    value: 'IT'
+  }
+]
+
+const currentYear = new Date().getFullYear()
+export const years = [
+  {
+    value: currentYear - 3
+  },
+
+  {
+    value: currentYear - 2
+  },
+
+  {
+    value: currentYear - 1
+  },
+
+  {
+    value: currentYear
+  }
+]
+
+export const categories = [
+  { label: 'Languages', value: 75, color: palette.success[300] },
+  { label: 'Mathematics', value: 12, color: palette.warning[500] },
+  { label: 'History', value: 8, color: palette.error[400] },
+  { label: 'Other (+3)', value: 5, color: palette.basic.bismark }
+]
+
+export const data = {
+  labels: categories.map((category) => category.label),
+  datasets: [
+    {
+      data: categories.map((category) => category.value),
+      backgroundColor: categories.map((category) => category.color),
+      hoverBackgroundColor: categories.map((category) => category.color),
+      borderWidth: 1,
+      cutout: '70%',
+      rotation: 180
+    }
+  ]
+}
+
+export const options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: {
+      enabled: true
+    }
+  }
+}

src/components/students-in-categories/StudentsInCategories.styles.ts

@@ -0,0 +1,110 @@
+import { TypographyVariantEnum } from '~/types'
+
+export const styles = {
+  cardContainer: {
+    width: '100%',
+    maxWidth: '460px',
+    minHeight: '400px',
+    borderRadius: '8px',
+    border: '1px',
+    borderColor: 'basic.lightGrey',
+    backgroundColor: 'basic.white',
+    p: { xs: '20px 41px 40px', sm: '20px 41px 68px' },
+    boxSizing: 'border-box',
+    mt: '75px'
+  },
+  cardTitle: {
+    typography: TypographyVariantEnum.H5,
+    color: 'basic.darkGray',
+    mb: '5px'
+  },
+  cardSubTitle: {
+    typography: TypographyVariantEnum.Body2,
+    color: 'basic.blueGray',
+    mb: '15px'
+  },
+  select: {
+    height: '40px',
+    border: '1px solid',
+    borderColor: 'basic.gray',
+    '& .MuiSelect-select': {
+      p: '8px 10px'
+    }
+  },
+  selectedValue: {
+    display: 'flex',
+    gap: 1
+  },
+  selectAndButtonContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    mb: 'auto',
+    flexWrap: 'wrap',
+    gap: '8px'
+  },
+  clearAllButton: {
+    height: '40px',
+    ml: 'auto',
+    typography: TypographyVariantEnum.Body1,
+    color: 'basic.darkGray'
+  },
+  chartAndLegendContainer: {
+    display: 'flex',
+    flexDirection: { xs: 'column', sm: 'row' },
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    mt: '30px',
+    gap: '15px'
+  },
+  legendContainer: {
+    width: '146px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '20px'
+  },
+  legendRow: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  legendBoxIcon: (color: string) => ({
+    width: '12px',
+    height: '12px',
+    backgroundColor: color,
+    mr: 1,
+    borderRadius: '50%'
+  }),
+  percentage: {
+    ml: 'auto',
+    typography: TypographyVariantEnum.Overline,
+    color: 'basic.black'
+  },
+  totalStudents: {
+    typography: TypographyVariantEnum.H5,
+    color: 'basic.darkGray'
+  },
+  allStudents: {
+    typography: TypographyVariantEnum.Subtitle2,
+    color: 'basic.darkGray',
+    textAlign: 'center'
+  },
+  category: {
+    typography: TypographyVariantEnum.Overline,
+    color: 'basic.black',
+    textTransform: 'uppercase'
+  },
+  diagramContainer: {
+    width: '170px',
+    height: '170px',
+    position: 'relative'
+  },
+  diagramInnerText: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  }
+}

src/components/students-in-categories/StudentsInCategories.tsx

@@ -0,0 +1,66 @@
+import { Box, Button, MenuItem, Select, Typography } from '@mui/material'
+import { styles } from './StudentsInCategories.styles'
+import SchoolIcon from '@mui/icons-material/School'
+import EventIcon from '@mui/icons-material/Event'
+import StudentsInCategoriesChart from './StudentsInCategoriesChart'
+import { useTranslation } from 'react-i18next'
+import { selectedCategory, years } from './StudentsInCategories.constants'
+import { useCallback } from 'react'
+
+function StudentsInCategories() {
+  const { t } = useTranslation()
+
+  const selectOption = useCallback(
+    (options: { value: number | string }[]) =>
+      options.map((option) => (
+        <MenuItem key={option.value} value={option.value}>
+          {option.value}
+        </MenuItem>
+      )),
+    []
+  )
+  return (
+    <Box sx={styles.cardContainer}>
+      <Typography sx={styles.cardTitle}>
+        {t('tutorHomePage.studentsInCategories.title')}
+      </Typography>
+      <Typography sx={styles.cardSubTitle}>
+        {t('tutorHomePage.studentsInCategories.subTitle')}
+      </Typography>
+      <Box sx={styles.selectAndButtonContainer}>
+        <Select
+          displayEmpty
+          renderValue={(value: string) => (
+            <Box sx={styles.selectedValue}>
+              <SchoolIcon />{' '}
+              {value ?? t('tutorHomePage.studentsInCategories.select.category')}
+            </Box>
+          )}
+          sx={styles.select}
+        >
+          {selectOption(selectedCategory)}
+        </Select>
+
+        <Select
+          displayEmpty
+          renderValue={(value: string) => (
+            <Box sx={styles.selectedValue}>
+              <EventIcon />{' '}
+              {value ?? t('tutorHomePage.studentsInCategories.select.year')}
+            </Box>
+          )}
+          sx={styles.select}
+        >
+          {selectOption(years)}
+        </Select>
+
+        <Button sx={styles.clearAllButton} variant='text'>
+          {t('tutorHomePage.studentsInCategories.resetButton')}
+        </Button>
+      </Box>
+      <StudentsInCategoriesChart />
+    </Box>
+  )
+}
+
+export default StudentsInCategories

src/components/students-in-categories/StudentsInCategoriesChart.tsx

@@ -0,0 +1,37 @@
+import { Doughnut } from 'react-chartjs-2'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
+import { Box, Typography } from '@mui/material'
+import { styles } from './StudentsInCategories.styles'
+import { useTranslation } from 'react-i18next'
+import { categories, data, options } from './StudentsInCategories.constants'
+
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+const StudentsInCategoriesChart = () => {
+  const { t } = useTranslation()
+  return (
+    <Box sx={styles.chartAndLegendContainer}>
+      <Box sx={styles.diagramContainer}>
+        <Doughnut data={data} options={options} />
+        <Box sx={styles.diagramInnerText}>
+          <Typography sx={styles.totalStudents}>24</Typography>
+          <Typography sx={styles.allStudents}>
+            {t('tutorHomePage.studentsInCategories.allStudents')}
+          </Typography>
+        </Box>
+      </Box>
+
+      <Box sx={styles.legendContainer}>
+        {categories.map((category) => (
+          <Box key={category.label} sx={styles.legendRow}>
+            <Box sx={styles.legendBoxIcon(category.color)} />
+            <Typography sx={styles.category}>{category.label}</Typography>
+            <Typography sx={styles.percentage}>{category.value}%</Typography>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  )
+}
+
+export default StudentsInCategoriesChart

src/constants/translations/en/tutor-home-page.json

@@ -14,6 +14,16 @@
     "description": "Explore tutoring categories you're passionate about.",
     "viewMore": "View more"
   },
+  "studentsInCategories": {
+    "title": "Students in Your Categories",
+    "subTitle": "Statistics of your students quantity during the last time.",
+    "resetButton": "Clear all",
+    "select": {
+      "category": "Category",
+      "year": "Year"
+    },
+    "allStudents": "All students"
+  },
 
   "lessonsQuantity": {
     "title": "Your Lessons Quantity",

src/constants/translations/uk/tutor-home-page.json

@@ -24,5 +24,15 @@
       "year": "Рік"
     },
     "resetButton": "Очистити все"
+  },
+  "studentsInCategories": {
+    "title": "Студенти по Ваших категоріях",
+    "subTitle": "Статистика кількості Ваших студентів протягом останнього часу",
+    "resetButton": "Очистити",
+    "select": {
+      "category": "Категорія",
+      "year": "Рік"
+    },
+    "allStudents": "Всі студенти"
   }
 }

src/pages/tutor-home/TutorHome.tsx

@@ -16,6 +16,7 @@ import Calendar from '~/components/calendar/Calendar'
 import TutorSchedule from '~/components/tutor-schedule/TutorSchedule'
 import QuantityLessonsCard from '~/components/quantity-lessons-card/QuantityLessonsCard'
 import { Box } from '@mui/material'
+import StudentsInCategories from '~/components/students-in-categories/StudentsInCategories'
 
 const TutorHome = () => {
   const { t } = useTranslation()
@@ -40,6 +41,7 @@ const TutorHome = () => {
         <TutorSchedule />
         <Calendar />
       </Box>
+      <StudentsInCategories />
       <QuantityLessonsCard />
       <ActiveStudentsBlock />
       <PopularCategories