Block with statistics by students in categories

package.json

@@ -12,18 +12,20 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.16",
     "@mui/material": "^5.14.16",
-    "@reduxjs/toolkit": "^2.2.7",
     "@mui/x-date-pickers": "^5.0.20",
+    "@reduxjs/toolkit": "^2.2.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",
     "i18next": "^23.12.2",
     "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/students-in-categories/StudentsInCategories.styles.ts

@@ -0,0 +1,126 @@
+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,98 @@
+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 StudentsInCatgoriesChart from './StudentsInCategoriesChart'
+import { useTranslation } from 'react-i18next'
+
+const currencies = [
+  {
+    value: 'USD',
+    label: '$'
+  },
+  {
+    value: 'EUR',
+    label: '€'
+  },
+  {
+    value: 'BTC',
+    label: '฿'
+  },
+  {
+    value: 'JPY',
+    label: '¥'
+  }
+]
+
+const years = [
+  {
+    value: '2021'
+  },
+
+  {
+    value: '2022'
+  },
+
+  {
+    value: '2023'
+  },
+
+  {
+    value: '2024'
+  }
+]
+
+function StudentsInCatgories() {
+  const { t } = useTranslation()
+  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}
+        >
+          {currencies.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.studentsInCategories.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.studentsInCategories.resetButton')}
+        </Button>
+      </Box>
+      <StudentsInCatgoriesChart />
+    </Box>
+  )
+}
+
+export default StudentsInCatgories

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

@@ -0,0 +1,70 @@
+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'
+
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+const categories = [
+  { label: 'Languages', value: 75, color: '#79B260' },
+  { label: 'Mathematics', value: 12, color: '#FFD166' },
+  { label: 'History', value: 8, color: '#EF476F' },
+  { label: 'Other (+3)', value: 5, color: '#6C757D' }
+]
+
+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
+    }
+  ]
+}
+
+const options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: {
+      enabled: true
+    }
+  }
+}
+
+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, index) => (
+          <Box key={index} 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

@@ -13,5 +13,15 @@
     "title": "Popular Categories",
     "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"
   }
 }