Добавлены новые компоненты для отображения статистики курсов, включая статистику посещаемости, активности студентов и уроков. Обновлены локализации для поддержки новых данных и улучшено взаимодействие с API для получения информации о курсах и уроках.

2025-03-23 18:24:51 +03:00
parent b37c96f640
commit 5f952ece7a
12 changed files with 900 additions and 5 deletions
@@ -0,0 +1,82 @@
+import React from 'react'
+import {
+  VStack,
+  HStack,
+  Box,
+  Text,
+  Progress,
+  Badge,
+  Avatar,
+  Tooltip
+} from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+import { StarIcon } from '@chakra-ui/icons'
+
+import { StudentAttendance } from './useStats'
+
+interface StudentAttendanceListProps {
+  students: StudentAttendance[]
+  title: string
+}
+
+export const StudentAttendanceList: React.FC<StudentAttendanceListProps> = ({
+  students,
+  title
+}) => {
+  const { t } = useTranslation()
+  
+  // Определяем цвет для прогресса в зависимости от значения
+  const getProgressColor = (value: number) => {
+    if (value > 80) return 'green'
+    if (value > 50) return 'blue'
+    if (value > 30) return 'yellow'
+    return 'red'
+  }
+  
+  if (!students?.length) {
+    return (
+      <Text color="gray.500" fontSize="sm" textAlign="center">
+        {t('journal.pl.overview.noAttendanceData')}
+      </Text>
+    )
+  }
+  
+  return (
+    <Box>
+      <Text fontWeight="medium" fontSize="sm" mb={2} display="flex" alignItems="center">
+        <StarIcon color="yellow.400" mr={2} />
+        {title}
+      </Text>
+      
+      <VStack align="stretch" spacing={3}>
+        {students.map((student, index) => (
+          <HStack key={student.id} spacing={3}>
+            <Avatar 
+              size="sm" 
+              name={student.name} 
+              src={student.avatarUrl} 
+              bg={index < 3 ? ['yellow.400', 'gray.400', 'orange.300'][index] : 'blue.300'}
+            />
+            <Box flex="1">
+              <Tooltip label={student.name}>
+                <Text fontSize="sm" fontWeight="medium" isTruncated maxW="150px">
+                  {student.name}
+                </Text>
+              </Tooltip>
+              <Progress 
+                value={student.percent} 
+                size="xs" 
+                colorScheme={getProgressColor(student.percent)}
+                borderRadius="full"
+                mt={1}
+              />
+            </Box>
+            <Badge colorScheme={getProgressColor(student.percent)}>
+              {Math.round(student.percent)}%
+            </Badge>
+          </HStack>
+        ))}
+      </VStack>
+    </Box>
+  )
+}