98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
import React from 'react'
|
|
import {
|
|
VStack,
|
|
HStack,
|
|
Box,
|
|
Text,
|
|
Progress,
|
|
Badge,
|
|
Avatar,
|
|
Tooltip,
|
|
Flex
|
|
} 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>
|
|
|
|
<Text fontSize="xs" color="gray.500" mb={2}>
|
|
{t('journal.pl.overview.pastLessonsStats')}
|
|
</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">
|
|
<Flex justify="space-between">
|
|
<Tooltip label={student.name}>
|
|
<Text fontSize="sm" fontWeight="medium" isTruncated maxW="150px">
|
|
{student.name}
|
|
</Text>
|
|
</Tooltip>
|
|
<Tooltip label={`${student.attended} из ${student.total} занятий`}>
|
|
<Text fontSize="xs" color="gray.500">
|
|
{student.attended}/{student.total}
|
|
</Text>
|
|
</Tooltip>
|
|
</Flex>
|
|
<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>
|
|
|
|
<Text fontSize="xs" color="gray.500" mt={2} fontStyle="italic">
|
|
{t('journal.pl.overview.attendanceHelp')}
|
|
</Text>
|
|
</Box>
|
|
)
|
|
}
|