Block with statistics by lessons quantity

package.json

@@ -17,6 +17,7 @@
     "@tinymce/tinymce-react": "^5.1.1",
     "allotment": "^1.19.3",
     "axios": "^1.6.0",
+    "chart.js": "^4.4.4",
     "date-fns": "^2.30.0",
     "dompurify": "^3.1.1",
     "emoji-mart": "^5.5.2",
@@ -25,6 +26,7 @@
     "normalize.css": "^8.0.1",
     "nuka-carousel": "^8.0.1",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^15.0.0",
     "react-player": "^2.16.0",

src/components/quantity-lessons-card/QuantityLessonChart/QuantityLessonsChart.constants.ts

@@ -0,0 +1,62 @@
+import palette from '~/styles/app-theme/app.pallete'
+
+export const data = {
+  labels: [
+    'JAN',
+    'FEB',
+    'MAR',
+    'APR',
+    'MAY',
+    'JUN',
+    'JUL',
+    'AUG',
+    'SEP',
+    'OCT',
+    'NOV',
+    'DEC'
+  ],
+  datasets: [
+    {
+      label: 'Lessons',
+      data: [5, 5, 10, 10, 12, 15, 14, 14, 10, 10, 12, 12],
+      backgroundColor: palette.success[300],
+      borderColor: palette.success[300],
+      borderWidth: 1,
+      barThickness: 28
+    }
+  ]
+}
+
+export const options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false
+    }
+  },
+  scales: {
+    x: {
+      grid: {
+        display: false
+      },
+      ticks: {
+        color: palette.basic.darkGray,
+        weight: 'normal'
+      },
+      border: {
+        display: false
+      }
+    },
+    y: {
+      beginAtZero: true,
+      max: 15,
+      ticks: {
+        stepSize: 5
+      },
+      border: {
+        display: false
+      }
+    }
+  }
+}

src/components/quantity-lessons-card/QuantityLessonChart/QuantityLessonsChart.tsx

@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react'
+import { Bar } from 'react-chartjs-2'
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js'
+import { Box } from '@mui/material'
+import useBreakpoints from '~/hooks/use-breakpoints'
+import { data, options } from './QuantityLessonsChart.constants'
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
+
+const QuantityLessonsChart = () => {
+  const { isMobile } = useBreakpoints()
+
+  const dataResponsive = useMemo(() => {
+    const obj = data
+    obj.datasets[0].barThickness = isMobile ? 20 : 28
+
+    return obj
+  }, [isMobile])
+
+  return (
+    <Box height='181px' key={+isMobile}>
+      <Bar data={dataResponsive} options={options} />
+    </Box>
+  )
+}
+
+export default QuantityLessonsChart

src/components/quantity-lessons-card/QuantityLessons.constants.ts

@@ -0,0 +1,54 @@
+export const categories = [
+  {
+    value: 'Music'
+  },
+
+  {
+    value: 'Marketing'
+  },
+
+  {
+    value: 'Bology'
+  },
+
+  {
+    value: 'IT'
+  }
+]
+
+export const subjects = [
+  {
+    value: 'Algebra'
+  },
+
+  {
+    value: 'Geometry'
+  },
+
+  {
+    value: 'English'
+  },
+
+  {
+    value: 'French'
+  }
+]
+
+const currentYear = new Date().getFullYear()
+export const years = [
+  {
+    value: currentYear - 3
+  },
+
+  {
+    value: currentYear - 2
+  },
+
+  {
+    value: currentYear - 1
+  },
+
+  {
+    value: currentYear
+  }
+]

src/components/quantity-lessons-card/QuantityLessonsCard.styles.ts

@@ -0,0 +1,52 @@
+import { TypographyVariantEnum } from '~/types'
+
+export const styles = {
+  cardContainer: {
+    width: '100%',
+    maxWidth: '640px',
+    height: { xs: '450px', sm: '400px' },
+    borderRadius: '8px',
+    backgroundColor: 'basic.white',
+    mt: '75px',
+    p: '25px 20px 32px',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  cardContainerTitle: {
+    typography: TypographyVariantEnum.H5,
+    color: 'basic.darkGray',
+    mb: '5px'
+  },
+  cardContainerCaption: {
+    typography: TypographyVariantEnum.Body2,
+    color: 'basic.blueGray',
+    mb: '15px'
+  },
+  select: {
+    height: '40px',
+    border: '1px solid',
+    borderColor: 'basic.gray',
+    '& .MuiSelect-select': {
+      p: '8px 10px'
+    }
+  },
+  selectAndButtonContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    mb: 'auto',
+    flexWrap: 'wrap',
+    gap: '8px'
+  },
+  clearAllButton: {
+    height: '40px',
+    ml: 'auto',
+    typography: TypographyVariantEnum.Body1,
+    color: 'basic.darkGray'
+  },
+  selectedValue: {
+    display: 'flex',
+    gap: 1
+  }
+}

src/components/quantity-lessons-card/QuantityLessonsCard.tsx

@@ -0,0 +1,80 @@
+import { Box, Button, MenuItem, Select, Typography } from '@mui/material'
+import { styles } from './QuantityLessonsCard.styles'
+import SchoolIcon from '@mui/icons-material/School'
+import EventIcon from '@mui/icons-material/Event'
+import QuantityLessonsChart from './QuantityLessonChart/QuantityLessonsChart'
+import { useTranslation } from 'react-i18next'
+import { categories, subjects, years } from './QuantityLessons.constants'
+
+function QuantityLessonsCard() {
+  const { t } = useTranslation()
+  return (
+    <Box sx={styles.cardContainer}>
+      <Typography sx={styles.cardContainerTitle}>
+        {t('tutorHomePage.lessonsQuantity.title')}
+      </Typography>
+      <Typography sx={styles.cardContainerCaption}>
+        {t('tutorHomePage.lessonsQuantity.subTitle')}
+      </Typography>
+      <Box sx={styles.selectAndButtonContainer}>
+        <Select
+          displayEmpty
+          renderValue={(value: string) => (
+            <Box sx={styles.selectedValue}>
+              <SchoolIcon />{' '}
+              {value ?? t('tutorHomePage.lessonsQuantity.select.category')}
+            </Box>
+          )}
+          sx={styles.select}
+        >
+          {categories.map((option) => (
+            <MenuItem key={option.value} value={option.value}>
+              {option.value}
+            </MenuItem>
+          ))}
+        </Select>
+
+        <Select
+          displayEmpty
+          renderValue={(value: string) => (
+            <Box sx={styles.selectedValue}>
+              <SchoolIcon />{' '}
+              {value ?? t('tutorHomePage.lessonsQuantity.select.subject')}
+            </Box>
+          )}
+          sx={styles.select}
+        >
+          {subjects.map((option) => (
+            <MenuItem key={option.value} value={option.value}>
+              {option.value}
+            </MenuItem>
+          ))}
+        </Select>
+
+        <Select
+          displayEmpty
+          renderValue={(value: string) => (
+            <Box sx={styles.selectedValue}>
+              <EventIcon />{' '}
+              {value ?? t('tutorHomePage.lessonsQuantity.select.year')}
+            </Box>
+          )}
+          sx={styles.select}
+        >
+          {years.map((option) => (
+            <MenuItem key={option.value} value={option.value}>
+              {option.value}
+            </MenuItem>
+          ))}
+        </Select>
+
+        <Button sx={styles.clearAllButton} variant='text'>
+          {t('tutorHomePage.lessonsQuantity.resetButton')}
+        </Button>
+      </Box>
+      <QuantityLessonsChart />
+    </Box>
+  )
+}
+
+export default QuantityLessonsCard

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

@@ -13,5 +13,16 @@
     "title": "Popular Categories",
     "description": "Explore tutoring categories you're passionate about.",
     "viewMore": "View more"
+  },
+
+  "lessonsQuantity": {
+    "title": "Your Lessons Quantity",
+    "subTitle": "Statistics of your lessons with students during the last time.",
+    "select": {
+      "category": "Category",
+      "subject": "Subject",
+      "year": "Year"
+    },
+    "resetButton": "Clear all"
   }
 }

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

@@ -13,5 +13,16 @@
     "title": "Популярні категорії",
     "description": "Досліджуйте категорії репетиторства, які вас цікавлять.",
     "viewMore": "Дивитися більше"
+  },
+
+  "lessonsQuantity": {
+    "title": "Ваша кількість уроків",
+    "subTitle": "Статистика Ваших уроків зі студентами протягом останнього часу",
+    "select": {
+      "category": "Категорія",
+      "subject": "Предмет",
+      "year": "Рік"
+    },
+    "resetButton": "Очистити все"
   }
 }