71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import React from 'react'
|
|
import { useParams } from 'react-router-dom'
|
|
import {
|
|
Box,
|
|
Heading,
|
|
Container,
|
|
useColorMode,
|
|
Flex,
|
|
Spacer,
|
|
Badge
|
|
} from '@chakra-ui/react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import { PageLoader } from '../../components/page-loader/page-loader'
|
|
import { useSetBreadcrumbs } from '../../components'
|
|
import { useAttendanceData, useAttendanceStats } from './hooks'
|
|
import { AttendanceTable, StatsCard } from './components'
|
|
|
|
export const Attendance = () => {
|
|
const { courseId } = useParams()
|
|
const { colorMode } = useColorMode()
|
|
const { t } = useTranslation()
|
|
const data = useAttendanceData(courseId)
|
|
const stats = useAttendanceStats(data)
|
|
|
|
// Устанавливаем хлебные крошки
|
|
useSetBreadcrumbs([
|
|
{
|
|
title: t('journal.pl.breadcrumbs.home'),
|
|
path: '/'
|
|
},
|
|
{
|
|
title: data.courseInfo?.name || t('journal.pl.breadcrumbs.course'),
|
|
path: `/lessons-list/${courseId}`
|
|
},
|
|
{
|
|
title: t('journal.pl.breadcrumbs.attendance'),
|
|
isCurrentPage: true
|
|
}
|
|
])
|
|
|
|
if (data.isLoading) {
|
|
return <PageLoader />
|
|
}
|
|
|
|
return (
|
|
<Container maxW="container.xl" p={1}>
|
|
<Flex alignItems="center" mb={6}>
|
|
<Box>
|
|
<Heading size="lg" mb={2}>{data.courseInfo?.name}</Heading>
|
|
<Badge colorScheme="blue">
|
|
{data.students.length} {t('journal.pl.common.students')} • {data.teachers.length} {t('journal.pl.common.teachers')}
|
|
</Badge>
|
|
</Box>
|
|
<Spacer />
|
|
</Flex>
|
|
|
|
<StatsCard stats={stats} />
|
|
|
|
<Box
|
|
bg={colorMode === 'dark' ? 'gray.800' : 'gray.50'}
|
|
p={4}
|
|
borderRadius="lg"
|
|
boxShadow="sm"
|
|
>
|
|
<AttendanceTable data={data} />
|
|
</Box>
|
|
</Container>
|
|
)
|
|
}
|