Merge branch 'master' of ssh://85.143.175.152:222/bro-js/journal.pl

bro.config.js

@@ -34,6 +34,16 @@ module.exports = {
         value: '',
         key: 'group.by.date',
       },
+      'course.statistics': {
+        on: true,
+        value: '',
+        key: 'course.statistics',
+      },
+      'courses.statistics': {
+        on: true,
+        value: '',
+        key: 'courses.statistics',
+      },
     },
   },
   config: {

locales/en.json

@@ -7,6 +7,12 @@
     "journal.pl.close": "Close",
     "journal.pl.title": "Attendance Journal",
     
+    "journal.pl.breadcrumbs.home": "Home",
+    "journal.pl.breadcrumbs.course": "Course",
+    "journal.pl.breadcrumbs.lesson": "Lesson",
+    "journal.pl.breadcrumbs.user": "User",
+    "journal.pl.breadcrumbs.attendance": "Attendance",
+    
     "journal.pl.common.add": "Add",
     "journal.pl.common.edit": "Edit",
     "journal.pl.common.delete": "Delete",
@@ -54,6 +60,7 @@
     "journal.pl.course.progress": "Course progress",
     "journal.pl.course.completedLessons": "Completed lessons",
     "journal.pl.course.upcomingLessons": "Upcoming lessons",
+    "journal.pl.course.noCourses": "No courses available",
     
     "journal.pl.lesson.created": "Lesson created",
     "journal.pl.lesson.successMessage": "Lesson {{name}} successfully created",
@@ -143,5 +150,55 @@
     "journal.pl.lesson.form.date": "Date",
     "journal.pl.lesson.form.dateTime": "Specify date and time of the lesson",
     "journal.pl.lesson.form.datePlaceholder": "Specify lesson date",
-    "journal.pl.lesson.form.namePlaceholder": "Lesson name"
+    "journal.pl.lesson.form.namePlaceholder": "Lesson name",
+    
+    "journal.pl.statistics.title": "Course Statistics",
+    "journal.pl.statistics.totalLessons": "Total Lessons",
+    "journal.pl.statistics.completed": "completed",
+    "journal.pl.statistics.attendanceRate": "Attendance Rate",
+    "journal.pl.statistics.totalStudents": "Total Students",
+    "journal.pl.statistics.perLesson": "per lesson",
+    "journal.pl.statistics.nextLesson": "Next Lesson",
+    "journal.pl.statistics.noUpcoming": "Not scheduled",
+    "journal.pl.statistics.in": "in",
+    "journal.pl.statistics.days": "days",
+    "journal.pl.statistics.courseProgress": "Course Progress",
+    
+    "journal.pl.days.sunday": "Sunday",
+    "journal.pl.days.monday": "Monday",
+    "journal.pl.days.tuesday": "Tuesday",
+    "journal.pl.days.wednesday": "Wednesday",
+    "journal.pl.days.thursday": "Thursday",
+    "journal.pl.days.friday": "Friday",
+    "journal.pl.days.saturday": "Saturday",
+    
+    "journal.pl.overview.title": "Courses Overview",
+    "journal.pl.overview.totalCourses": "Total Courses",
+    "journal.pl.overview.active": "active",
+    "journal.pl.overview.completed": "completed",
+    "journal.pl.overview.totalLessons": "Total Lessons",
+    "journal.pl.overview.upcoming": "upcoming",
+    "journal.pl.overview.totalStudents": "Total Students",
+    "journal.pl.overview.totalTeachers": "Total Teachers",
+    "journal.pl.overview.perCourse": "per course",
+    "journal.pl.overview.attendance": "attendance",
+    "journal.pl.overview.noAttendanceData": "no attendance data",
+    "journal.pl.overview.noActiveData": "no active courses",
+    "journal.pl.overview.courseTrends": "Course Trends",
+    "journal.pl.overview.newCourses": "New Courses",
+    "journal.pl.overview.olderCourses": "Older Courses",
+    "journal.pl.overview.last3Months": "in last 3 months",
+    "journal.pl.overview.beyondLast3Months": "created earlier than 3 months",
+    "journal.pl.overview.mostActiveDay": "Most Active Day",
+    "journal.pl.overview.activityStats": "Activity Statistics",
+    "journal.pl.overview.courseCompletion": "Course Completion",
+    "journal.pl.overview.studentAttendance": "Student Attendance",
+    "journal.pl.overview.averageRate": "Average Rate",
+    "journal.pl.overview.lessons": "lessons",
+    "journal.pl.overview.topStudents": "Top Students by Attendance",
+    "journal.pl.overview.topAttendanceCourses": "Courses with Best Attendance",
+    "journal.pl.overview.new": "new",
+    "journal.pl.overview.pastLessonsStats": "Statistics of past lessons",
+    "journal.pl.overview.dayOfWeekHelp": "Only statistics for completed lessons are shown",
+    "journal.pl.overview.attendanceHelp": "Attendance is calculated based on past lessons only"
 }

locales/ru.json

@@ -7,6 +7,12 @@
   "journal.pl.close": "Закрыть",
   "journal.pl.title": "Журнал посещаемости",
   
+  "journal.pl.breadcrumbs.home": "Главная",
+  "journal.pl.breadcrumbs.course": "Курс",
+  "journal.pl.breadcrumbs.lesson": "Лекция",
+  "journal.pl.breadcrumbs.user": "Пользователь",
+  "journal.pl.breadcrumbs.attendance": "Посещаемость",
+  
   "journal.pl.common.students": "студентов",
   "journal.pl.common.teachers": "преподавателей",
   "journal.pl.common.noData": "Нет данных",
@@ -51,6 +57,7 @@
   "journal.pl.course.progress": "Прогресс курса",
   "journal.pl.course.completedLessons": "Завершено занятий",
   "journal.pl.course.upcomingLessons": "Предстоящие занятия",
+  "journal.pl.course.noCourses": "Нет доступных курсов",
   
   "journal.pl.lesson.created": "Лекция создана",
   "journal.pl.lesson.successMessage": "Лекция {{name}} успешно создана",
@@ -140,5 +147,55 @@
   "journal.pl.lesson.form.date": "Дата",
   "journal.pl.lesson.form.dateTime": "Укажите дату и время лекции",
   "journal.pl.lesson.form.datePlaceholder": "Укажите дату лекции",
-  "journal.pl.lesson.form.namePlaceholder": "Название лекции"
+  "journal.pl.lesson.form.namePlaceholder": "Название лекции",
+  
+  "journal.pl.statistics.title": "Статистика курса",
+  "journal.pl.statistics.totalLessons": "Всего занятий",
+  "journal.pl.statistics.completed": "завершено",
+  "journal.pl.statistics.attendanceRate": "Посещаемость",
+  "journal.pl.statistics.totalStudents": "Всего студентов",
+  "journal.pl.statistics.perLesson": "на занятие",
+  "journal.pl.statistics.nextLesson": "Следующее занятие",
+  "journal.pl.statistics.noUpcoming": "Не запланировано",
+  "journal.pl.statistics.in": "через",
+  "journal.pl.statistics.days": "дн.",
+  "journal.pl.statistics.courseProgress": "Прогресс курса",
+  
+  "journal.pl.days.sunday": "Воскресенье",
+  "journal.pl.days.monday": "Понедельник",
+  "journal.pl.days.tuesday": "Вторник",
+  "journal.pl.days.wednesday": "Среда",
+  "journal.pl.days.thursday": "Четверг",
+  "journal.pl.days.friday": "Пятница",
+  "journal.pl.days.saturday": "Суббота",
+  
+  "journal.pl.overview.title": "Обзор всех курсов",
+  "journal.pl.overview.totalCourses": "Всего курсов",
+  "journal.pl.overview.active": "активных",
+  "journal.pl.overview.completed": "завершенных",
+  "journal.pl.overview.totalLessons": "Всего занятий",
+  "journal.pl.overview.upcoming": "предстоящих",
+  "journal.pl.overview.totalStudents": "Всего студентов",
+  "journal.pl.overview.totalTeachers": "Всего преподавателей",
+  "journal.pl.overview.perCourse": "на курс",
+  "journal.pl.overview.attendance": "посещаемость",
+  "journal.pl.overview.noAttendanceData": "нет данных о посещаемости",
+  "journal.pl.overview.noActiveData": "нет активных курсов",
+  "journal.pl.overview.courseTrends": "Тренды курсов",
+  "journal.pl.overview.newCourses": "Новые курсы",
+  "journal.pl.overview.olderCourses": "Старые курсы",
+  "journal.pl.overview.last3Months": "за последние 3 месяца",
+  "journal.pl.overview.beyondLast3Months": "созданы ранее 3 месяцев",
+  "journal.pl.overview.mostActiveDay": "Самый активный день недели",
+  "journal.pl.overview.activityStats": "Статистика активности",
+  "journal.pl.overview.courseCompletion": "Завершенность курсов",
+  "journal.pl.overview.studentAttendance": "Посещаемость студентов",
+  "journal.pl.overview.averageRate": "Средний показатель",
+  "journal.pl.overview.lessons": "занятий",
+  "journal.pl.overview.topStudents": "Лучшие студенты по посещаемости",
+  "journal.pl.overview.topAttendanceCourses": "Курсы с лучшей посещаемостью",
+  "journal.pl.overview.new": "новых",
+  "journal.pl.overview.pastLessonsStats": "Статистика проведённых занятий",
+  "journal.pl.overview.dayOfWeekHelp": "Показана статистика только состоявшихся занятий",
+  "journal.pl.overview.attendanceHelp": "Посещаемость рассчитана только по прошедшим занятиям"
 }

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "journal.pl",
-    "version": "3.11.2",
+    "version": "3.14.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "journal.pl",
-            "version": "3.11.2",
+            "version": "3.14.1",
             "license": "MIT",
             "dependencies": {
                 "@brojs/cli": "^1.8.4",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "journal.pl",
-    "version": "3.11.2",
+    "version": "3.14.1",
     "description": "bro-js platform journal ui repo",
     "main": "./src/index.tsx",
     "scripts": {

src/app.tsx

@@ -2,16 +2,13 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Global } from '@emotion/react'
 import { BrowserRouter } from 'react-router-dom';
-import ruLocale from 'dayjs/locale/ru';
+import dayjs from './utils/dayjs-config';
-import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { ChakraProvider, ColorModeScript, extendTheme } from '@chakra-ui/react'
 
 import { Dashboard } from './dashboard';
 import { globalStyles } from './global.styles';
 
-dayjs.locale('ru', ruLocale);
-
 // Расширяем тему Chakra UI
 const theme = extendTheme({
   config: {

src/components/app-header/app-header.tsx

@@ -1,22 +1,74 @@
 import React from 'react';
 import {
-    Box,
+  Box,
   Flex,
   IconButton,
   useColorMode,
   Button,
-  HStack
+  HStack,
+  VStack,
+  Container,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Heading,
+  useBreakpointValue,
+  Text,
+  Tooltip,
+  useMediaQuery,
 } from '@chakra-ui/react';
-import { MoonIcon, SunIcon } from '@chakra-ui/icons';
+import { MoonIcon, SunIcon, ChevronRightIcon, InfoIcon, ChevronDownIcon } from '@chakra-ui/icons';
 import { useTranslation } from 'react-i18next';
+import { Link, useLocation } from 'react-router-dom';
+import { getNavigationValue } from '@brojs/cli';
 
 interface AppHeaderProps {
   serviceMenuContainerRef?: React.RefObject<HTMLDivElement>;
+  breadcrumbs?: Array<{
+    title: string;
+    path?: string;
+    isCurrentPage?: boolean;
+  }>;
 }
 
-export const AppHeader = ({ serviceMenuContainerRef }: AppHeaderProps) => {
+export const AppHeader = ({ serviceMenuContainerRef, breadcrumbs }: AppHeaderProps) => {
   const { colorMode, toggleColorMode } = useColorMode();
   const { t, i18n } = useTranslation();
+  const location = useLocation();
+  
+  // Получаем путь к главной странице
+  const mainPagePath = getNavigationValue('journal.main');
+  
+  // Функция для формирования правильного пути с учетом mainPagePath
+  const getFullPath = (path?: string): string => {
+    if (!path) return '#';
+    if (path === '/') return mainPagePath;
+    
+    // Если путь уже начинается с mainPagePath, оставляем как есть
+    if (path.startsWith(mainPagePath)) return path;
+    
+    // Если путь начинается со слеша, добавляем mainPagePath
+    if (path.startsWith('/')) return `${mainPagePath}${path}`;
+    
+    // Иначе просто объединяем пути
+    return `${mainPagePath}/${path}`;
+  };
+  
+  // Определяем размеры для разных устройств
+  const fontSize = useBreakpointValue({ base: 'xs', sm: 'xs', md: 'sm' });
+  
+  // Проверяем, на каком устройстве находимся
+  const [isLargerThan768] = useMediaQuery("(min-width: 768px)");
+  const [isLargerThan480] = useMediaQuery("(min-width: 480px)");
+  
+  // Вертикальное отображение на мобильных устройствах
+  const isMobile = !isLargerThan480;
+  
+  // Горизонтальный сепаратор для десктопов
+  const horizontalSeparator = useBreakpointValue({ 
+    sm: <ChevronRightIcon color="gray.400" fontSize="xs" />, 
+    md: <ChevronRightIcon color="gray.400" /> 
+  });
 
   const toggleLanguage = () => {
     const newLang = i18n.language === 'ru' ? 'en' : 'ru';
@@ -24,47 +76,200 @@ export const AppHeader = ({ serviceMenuContainerRef }: AppHeaderProps) => {
   };
 
   return (
-    <Flex 
+    <Box 
       as="header" 
       width="100%" 
-      py={4} 
+      py={{ base: 2, md: 3 }}
-      px={8} 
+      bg={colorMode === 'light' ? 'white' : 'gray.800'}
-      justifyContent="space-between" 
+      boxShadow="sm"
-      alignItems="center"
       position="sticky"
       top={0}
       zIndex={10}
-      bg={colorMode === 'light' ? 'white' : 'gray.800'}
-      boxShadow="sm"
     >
-      {serviceMenuContainerRef && <div id="dots" ref={serviceMenuContainerRef}></div>}
+      {/* Рендеринг dots контейнера вне условной логики, всегда присутствует в DOM */}
-      <Box>
+      {serviceMenuContainerRef && (
-        
+        <Box
-      </Box>
+          id="dots"
-      <HStack spacing={4}>
+          ref={serviceMenuContainerRef}
-        <Button 
+          position="absolute"
-          onClick={toggleLanguage} 
+          top="3"
-          size="sm" 
+          left="0"
-          variant="ghost"
+          height="0"
-          aria-label={i18n.language === 'ru' 
+          width="0"
-            ? t('journal.pl.lang.switchToEn') 
+          overflow="visible"
-            : t('journal.pl.lang.switchToRu')
-          }
-        >
-          {i18n.language === 'ru' ? 'EN' : 'RU'}
-        </Button>
-        
-        <IconButton
-          aria-label={colorMode === 'light' 
-            ? t('journal.pl.theme.switchDark') 
-            : t('journal.pl.theme.switchLight')
-          }
-          icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
-          onClick={toggleColorMode}
-          variant="ghost"
-          size="md"
         />
-      </HStack>
+      )}
-    </Flex>
+      
+      <Container maxW="container.xl" px={{ base: 2, sm: 4 }}>
+        {isMobile ? (
+          <>
+            {/* Мобильная версия: верхняя строка с кнопками */}
+            <Flex justifyContent="space-between" alignItems="center" h={{ base: "40px" }}>
+              <Box>
+                {/* Пустой контейнер для поддержания расположения */}
+              </Box>
+              
+              <HStack spacing={{ base: 1 }} flexShrink={0}>
+                <Button 
+                  onClick={toggleLanguage} 
+                  size="sm" 
+                  variant="ghost"
+                  aria-label={i18n.language === 'ru' 
+                    ? t('journal.pl.lang.switchToEn') 
+                    : t('journal.pl.lang.switchToRu')
+                  }
+                  fontSize={fontSize}
+                  px={{ base: 1 }}
+                  minW={{ base: "30px" }}
+                  h={{ base: "30px" }}
+                >
+                  {i18n.language === 'ru' ? 'EN' : 'RU'}
+                </Button>
+                
+                <IconButton
+                  aria-label={colorMode === 'light' 
+                    ? t('journal.pl.theme.switchDark') 
+                    : t('journal.pl.theme.switchLight')
+                  }
+                  icon={colorMode === 'light' ? <MoonIcon boxSize={{ base: "14px" }} /> : <SunIcon boxSize={{ base: "14px" }} />}
+                  onClick={toggleColorMode}
+                  variant="ghost"
+                  size={{ base: "sm" }}
+                  minW={{ base: "30px" }}
+                  h={{ base: "30px" }}
+                />
+              </HStack>
+            </Flex>
+            
+            {/* Вертикальные хлебные крошки */}
+            {breadcrumbs && breadcrumbs.length > 0 && (
+              <VStack 
+                align="flex-start" 
+                spacing={0}
+                mt={1}
+              >
+                {breadcrumbs.map((crumb, index) => (
+                  <Flex 
+                    key={index} 
+                    align="center" 
+                    w="100%"
+                    pl={index > 0 ? 3 : 1}
+                    py={1}
+                    borderRadius="md"
+                    _hover={!crumb.isCurrentPage && crumb.path ? {
+                      bg: colorMode === 'light' ? 'gray.50' : 'gray.700',
+                    } : {}}
+                  >
+                    {index > 0 && (
+                      <ChevronDownIcon 
+                        color="gray.400" 
+                        fontSize="10px" 
+                        mr={2} 
+                        transform="translateY(-2px)"
+                      />
+                    )}
+                    
+                    {crumb.path && !crumb.isCurrentPage ? (
+                      <Link to={getFullPath(crumb.path)}>
+                        <Text
+                          fontWeight="medium"
+                          color={undefined}
+                          fontSize={fontSize}
+                          noOfLines={1}
+                          title={crumb.title}
+                        >
+                          {crumb.title}
+                        </Text>
+                      </Link>
+                    ) : (
+                      <Text
+                        fontWeight={crumb.isCurrentPage ? "bold" : "medium"}
+                        color={crumb.isCurrentPage ? (colorMode === 'light' ? 'cyan.600' : 'cyan.300') : undefined}
+                        fontSize={fontSize}
+                        noOfLines={1}
+                        title={crumb.title}
+                      >
+                        {crumb.title}
+                      </Text>
+                    )}
+                  </Flex>
+                ))}
+              </VStack>
+            )}
+          </>
+        ) : (
+          /* Десктопная версия: всё в одну строку */
+          <Flex justifyContent="space-between" alignItems="center" h="40px">
+            <Flex align="center" overflow="hidden" flex={1} minW={0}>
+              {/* Контейнер для разметки */}
+              <Box w="24px" mr={{ sm: 3, md: 4 }} flexShrink={0} />
+              
+              {breadcrumbs && breadcrumbs.length > 0 && (
+                <Breadcrumb 
+                  fontWeight="medium" 
+                  fontSize={fontSize}
+                  separator={horizontalSeparator}
+                  spacing={{ sm: "1" }}
+                  overflow="hidden"
+                  whiteSpace="nowrap"
+                  textOverflow="ellipsis"
+                  minW={0}
+                >
+                  {breadcrumbs.map((crumb, index) => (
+                    <BreadcrumbItem key={index} isCurrentPage={crumb.isCurrentPage}>
+                      <BreadcrumbLink 
+                        as={crumb.path ? Link : undefined} 
+                        to={getFullPath(crumb.path)} 
+                        href={!crumb.path ? "#" : undefined}
+                        maxWidth={{ sm: "120px", md: "200px", lg: "300px" }}
+                        overflow="hidden"
+                        textOverflow="ellipsis"
+                        display="inline-block"
+                        fontWeight={crumb.isCurrentPage ? "bold" : "medium"}
+                        color={crumb.isCurrentPage ? (colorMode === 'light' ? 'cyan.600' : 'cyan.300') : undefined}
+                        title={crumb.title}
+                      >
+                        {crumb.title}
+                      </BreadcrumbLink>
+                    </BreadcrumbItem>
+                  ))}
+                </Breadcrumb>
+              )}
+            </Flex>
+            
+            <HStack spacing={{ sm: 2, md: 4 }} flexShrink={0} ml={{ sm: 2, md: 3 }}>
+              <Button 
+                onClick={toggleLanguage} 
+                size="sm" 
+                variant="ghost"
+                aria-label={i18n.language === 'ru' 
+                  ? t('journal.pl.lang.switchToEn') 
+                  : t('journal.pl.lang.switchToRu')
+                }
+                fontSize={fontSize}
+                px={{ sm: 2, md: 3 }}
+                minW={{ sm: "40px" }}
+                h={{ sm: "34px" }}
+              >
+                {i18n.language === 'ru' ? 'EN' : 'RU'}
+              </Button>
+              
+              <IconButton
+                aria-label={colorMode === 'light' 
+                  ? t('journal.pl.theme.switchDark') 
+                  : t('journal.pl.theme.switchLight')
+                }
+                icon={colorMode === 'light' ? <MoonIcon boxSize={{ sm: "14px", md: "16px" }} /> : <SunIcon boxSize={{ sm: "14px", md: "16px" }} />}
+                onClick={toggleColorMode}
+                variant="ghost"
+                size={{ sm: "sm", md: "md" }}
+                minW={{ sm: "34px" }}
+                h={{ sm: "34px" }}
+              />
+            </HStack>
+          </Flex>
+        )}
+      </Container>
+    </Box>
   );
 }; 

src/components/breadcrumbs/breadcrumbs-context.tsx

@@ -0,0 +1,45 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+export type Breadcrumb = {
+  title: string;
+  path?: string;
+  isCurrentPage?: boolean;
+};
+
+type BreadcrumbsContextType = {
+  breadcrumbs: Breadcrumb[];
+  setBreadcrumbs: (breadcrumbs: Breadcrumb[]) => void;
+};
+
+const BreadcrumbsContext = createContext<BreadcrumbsContextType | undefined>(undefined);
+
+export const BreadcrumbsProvider: React.FC<{children: ReactNode}> = ({ children }) => {
+  const [breadcrumbs, setBreadcrumbs] = useState<Breadcrumb[]>([]);
+
+  return (
+    <BreadcrumbsContext.Provider value={{ breadcrumbs, setBreadcrumbs }}>
+      {children}
+    </BreadcrumbsContext.Provider>
+  );
+};
+
+export const useBreadcrumbs = () => {
+  const context = useContext(BreadcrumbsContext);
+  if (context === undefined) {
+    throw new Error('useBreadcrumbs must be used within a BreadcrumbsProvider');
+  }
+  return context;
+};
+
+export const useSetBreadcrumbs = (newBreadcrumbs: Breadcrumb[]) => {
+  const { setBreadcrumbs } = useBreadcrumbs();
+  
+  React.useEffect(() => {
+    setBreadcrumbs(newBreadcrumbs);
+    
+    return () => {
+      // При размонтировании компонента очищаем хлебные крошки
+      setBreadcrumbs([]);
+    };
+  }, [setBreadcrumbs, JSON.stringify(newBreadcrumbs)]);
+}; 

src/components/breadcrumbs/index.ts

@@ -0,0 +1 @@
+export * from './breadcrumbs-context'; 

src/components/index.ts

@@ -1,4 +1,5 @@
 export { PageLoader } from './page-loader/page-loader';
 export { XlSpinner } from './xl-spinner/xl-spinner';
 export { ErrorBoundary } from './error-boundary';
-export { AppHeader } from './app-header'; 
+export { AppHeader } from './app-header';
+export { BreadcrumbsProvider, useBreadcrumbs, useSetBreadcrumbs } from './breadcrumbs'; 

src/components/user-card/style.ts

@@ -1,26 +1,96 @@
 import styled from '@emotion/styled'
 import { css, keyframes } from '@emotion/react'
 
-export const Avatar = styled.img`
+// Правильное определение анимации с помощью keyframes
-  width: 96px;
+const fadeIn = keyframes`
-  height: 96px;
+  from {
-  margin: 0 auto;
+    opacity: 0;
-  border-radius: 6px;
+  }
+  to {
+    opacity: 1;
+  }
 `
 
+const pulse = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(72, 187, 120, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(72, 187, 120, 0);
+  }
+`
+
+export const Avatar = styled.img`
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+`
+
+export const NameOverlay = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 8px;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  color: white;
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+  opacity: 0.9;
+  transition: opacity 0.3s ease;
+  
+  .chakra-ui-dark & {
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+  }
+`
+
+// Стили без интерполяций компонентов
 export const Wrapper = styled.div<{ warn?: boolean; width?: string | number }>`
   list-style: none;
-  background-color: var(--chakra-colors-white);
-  padding: 16px;
-  border-radius: 12px;
-  box-shadow: 2px 2px 6px var(--chakra-colors-blackAlpha-400);
-  transition: all 0.5;
   position: relative;
-  width: 180px;
+  border-radius: 12px;
-  min-height: 190px;
+  width: 100%;
-  max-height: 200px;
+  aspect-ratio: 1;
-  margin-right: 12px;
+  overflow: hidden;
-  padding-bottom: 22px;
+  cursor: pointer;
+  animation: ${fadeIn} 0.5s ease;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+  }
+  
+  &:hover img {
+    transform: scale(1.05);
+  }
+  
+  &:hover > div:last-of-type:not(button) {
+    opacity: 1;
+  }
+  
+  &.recent {
+    animation: ${pulse} 1.5s infinite;
+    border: 2px solid var(--chakra-colors-green-400);
+  }
+  
+  .chakra-ui-dark & {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    
+    &.recent {
+      border: 2px solid var(--chakra-colors-green-300);
+    }
+  }
+  
   ${({ width }) =>
     width
       ? css`
@@ -31,35 +101,36 @@ export const Wrapper = styled.div<{ warn?: boolean; width?: string | number }>`
   ${(props) =>
     props.warn
       ? css`
-          background-color: var(--chakra-colors-blackAlpha-800);
           opacity: 0.7;
-          color: var(--chakra-colors-gray-200);
+          filter: grayscale(0.8);
         `
       : ''}
-
-  .chakra-ui-dark & {
-    background-color: var(--chakra-colors-gray-700);
-    color: var(--chakra-colors-white);
-    box-shadow: 2px 2px 6px var(--chakra-colors-blackAlpha-600);
-  }
-  
-  .chakra-ui-dark &.warn {
-    background-color: var(--chakra-colors-blackAlpha-900);
-    color: var(--chakra-colors-gray-300);
-  }
 `
 
 export const AddMissedButton = styled.button`
   position: absolute;
   bottom: 8px;
-  right: 12px;
+  right: 8px;
   border: none;
-  background-color: transparent;
+  background-color: var(--chakra-colors-blue-500);
-  opacity: 0.2;
+  color: white;
-  color: inherit;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  opacity: 0.8;
+  transition: opacity 0.3s ease, transform 0.3s ease;
 
-  :hover {
+  &:hover {
     cursor: pointer;
     opacity: 1;
+    transform: scale(1.1);
+  }
+  
+  .chakra-ui-dark & {
+    background-color: var(--chakra-colors-blue-400);
   }
 `

src/components/user-card/user-card.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { sha256 } from 'js-sha256'
-import { useColorMode } from '@chakra-ui/react'
 import { useState } from 'react'
+import { Box, useColorMode } from '@chakra-ui/react'
+import { CheckCircleIcon, AddIcon } from '@chakra-ui/icons'
 
 import { User } from '../../__data__/model'
 
-import { AddMissedButton, Avatar, Wrapper } from './style'
+import { AddMissedButton, Avatar, Wrapper, NameOverlay } from './style'
 
 export function getGravatarURL(email, user) {
   if (!email) return void 0
@@ -18,15 +19,17 @@ export function getGravatarURL(email, user) {
 export const UserCard = ({
   student,
   present,
-  onAddUser,
+  onAddUser = undefined,
-  wrapperAS,
+  wrapperAS = 'div',
-  width
+  width,
+  recentlyPresent = false
 }: {
   student: User
   present: boolean
   width?: string | number
   onAddUser?: (user: User) => void
   wrapperAS?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+  recentlyPresent?: boolean
 }) => {
   const { colorMode } = useColorMode();
   const [imageError, setImageError] = useState(false);
@@ -36,7 +39,7 @@ export const UserCard = ({
       warn={!present} 
       as={wrapperAS} 
       width={width}
-      className={!present ? 'warn' : ''}
+      className={!present ? 'warn' : recentlyPresent ? 'recent' : ''}
     >
       <Avatar 
         src={imageError ? getGravatarURL(student.email, null) : (student.picture || getGravatarURL(student.email, null))} 
@@ -46,22 +49,19 @@ export const UserCard = ({
           }
         }} 
       />
-      <p style={{ 
+      <NameOverlay>
-        marginTop: 6,
+        {student.name || student.preferred_username}
-        color: colorMode === 'light' ? 'inherit' : 'var(--chakra-colors-gray-100)'
+        {present && (
-      }}>
+          <Box as="span" ml={2} display="inline-block" color={recentlyPresent ? "green.100" : "green.300"}>
-        {student.name || student.preferred_username}{' '}
+            <CheckCircleIcon boxSize={3} />
-      </p>
+          </Box>
+        )}
+      </NameOverlay>
       {onAddUser && !present && (
-        <AddMissedButton onClick={() => onAddUser(student)}>
+        <AddMissedButton onClick={() => onAddUser(student)} aria-label="Отметить присутствие">
-          add
+          <AddIcon boxSize={3} />
         </AddMissedButton>
       )}
     </Wrapper>
   )
 }
-
-UserCard.defaultProps = {
-  wrapperAS: 'div',
-  onAddUser: void 0,
-}

src/dashboard.tsx

@@ -12,7 +12,7 @@ import {
   UserPage,
   AttendancePage,
 } from './pages'
-import { ErrorBoundary, AppHeader } from './components'
+import { ErrorBoundary, AppHeader, BreadcrumbsProvider, useBreadcrumbs } from './components'
 import { keycloak } from './__data__/kc'
 
 const MENU_SCRIPT_URL = 'https://admin.bro-js.ru/remote-assets/lib/serviceMenu/serviceMenu.js'
@@ -62,6 +62,12 @@ const Wrapper = ({ children }: { children: React.ReactElement }) => (
   </Suspense>
 )
 
+// Компонент, который соединяет хлебные крошки с AppHeader
+const HeaderWithBreadcrumbs = ({ serviceMenuContainerRef }: { serviceMenuContainerRef: React.RefObject<HTMLDivElement> }) => {
+  const { breadcrumbs } = useBreadcrumbs();
+  return <AppHeader serviceMenuContainerRef={serviceMenuContainerRef} breadcrumbs={breadcrumbs} />;
+};
+
 interface DashboardProps {
   store: any; // Используем any, поскольку точный тип store не указан
 }
@@ -111,49 +117,51 @@ export const Dashboard = ({ store }: DashboardProps) => {
   
   return (
     <Provider store={store}>
-      <AppHeader serviceMenuContainerRef={serviceMenuContainerRef} />
+      <BreadcrumbsProvider>
-      <Routes>
+        <HeaderWithBreadcrumbs serviceMenuContainerRef={serviceMenuContainerRef} />
-        <Route
+        <Routes>
-          path={getNavigationValue('journal.main')}
+          <Route
-          element={
+            path={getNavigationValue('journal.main')}
-            <Wrapper>
+            element={
-              <CourseListPage />
+              <Wrapper>
-            </Wrapper>
+                <CourseListPage />
-          }
+              </Wrapper>
-        />
+            }
-        <Route
+          />
-          path={`${getNavigationValue('journal.main')}/lessons-list/:courseId`}
+          <Route
-          element={
+            path={`${getNavigationValue('journal.main')}/lessons-list/:courseId`}
-            <Wrapper>
+            element={
-              <LessonListPage />
+              <Wrapper>
-            </Wrapper>
+                <LessonListPage />
-          }
+              </Wrapper>
-        />
+            }
-        <Route
+          />
-          path={`${getNavigationValue('journal.main')}/u/:lessonId/:accessId`}
+          <Route
-          element={
+            path={`${getNavigationValue('journal.main')}/u/:lessonId/:accessId`}
-            <Wrapper>
+            element={
-              <UserPage />
+              <Wrapper>
-            </Wrapper>
+                <UserPage />
-          }
+              </Wrapper>
-        />
+            }
-        <Route
+          />
-          path={`${getNavigationValue('journal.main')}/lesson/:courseId/:lessonId`}
+          <Route
-          element={
+            path={`${getNavigationValue('journal.main')}/lesson/:courseId/:lessonId`}
-            <Wrapper>
+            element={
-              <LessonDetailsPage />
+              <Wrapper>
-            </Wrapper>
+                <LessonDetailsPage />
-          }
+              </Wrapper>
-        />
+            }
-        <Route
+          />
-          path={`${getNavigationValue('journal.main')}${getNavigationValue('link.journal.attendance')}`}
+          <Route
-          element={
+            path={`${getNavigationValue('journal.main')}${getNavigationValue('link.journal.attendance')}`}
-            <Wrapper>
+            element={
-              <AttendancePage />
+              <Wrapper>
-            </Wrapper>
+                <AttendancePage />
-          }
+              </Wrapper>
-        />
+            }
-      </Routes>
+          />
+        </Routes>
+      </BreadcrumbsProvider>
     </Provider>
   )
 }

src/pages/attendance/attendance.tsx

@@ -12,6 +12,7 @@ import {
 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'
 
@@ -21,6 +22,22 @@ export const Attendance = () => {
   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 />

src/pages/attendance/components/AddDataDialog.tsx

@@ -21,7 +21,8 @@ import {
   useColorMode,
 } from "@chakra-ui/react";
 import { useTranslation } from 'react-i18next';
-import dayjs from 'dayjs';
+import dayjs from "../../../utils/dayjs-config";
+import { formatDate } from "../../../utils/dayjs-config";
 import UserSelect from "../../../components/user-select";
 
 interface AttendanceEntry {
@@ -41,7 +42,7 @@ const AddDataDialog = ({ isOpen, onClose, onAddData }: AddDataDialogProps) => {
   const { colorMode } = useColorMode();
   const { t } = useTranslation();
   const [name, setName] = useState("");
-  const [date, setDate] = useState(dayjs().format('YYYY-MM-DD'));
+  const [date, setDate] = useState(formatDate(dayjs().toDate(), 'YYYY-MM-DD'));
   const [selectedStudents, setSelectedStudents] = useState<any[]>([]);
   const [selectedTeachers, setSelectedTeachers] = useState<any[]>([]);
 
@@ -60,7 +61,7 @@ const AddDataDialog = ({ isOpen, onClose, onAddData }: AddDataDialogProps) => {
 
   const resetForm = () => {
     setName("");
-    setDate(dayjs().format('YYYY-MM-DD'));
+    setDate(formatDate(dayjs().toDate(), 'YYYY-MM-DD'));
     setSelectedStudents([]);
     setSelectedTeachers([]);
   };

src/pages/attendance/components/AttendanceTable.tsx

@@ -33,6 +33,7 @@ import { useTranslation } from 'react-i18next'
 import { getGravatarURL } from '../../../utils/gravatar'
 import { ShortText } from './ShortText'
 import { AttendanceData } from '../hooks'
+import { formatDate } from '../../../utils/dayjs-config'
 
 interface AttendanceTableProps {
   data: AttendanceData
@@ -120,7 +121,7 @@ export const AttendanceTable: React.FC<AttendanceTableProps> = ({ data }) => {
       })
       
       // Добавляем дату
-      row.push(dayjs(lesson.date).format('DD.MM.YYYY'))
+      row.push(formatDate(lesson.date, 'DD.MM.YYYY'))
       
       // Добавляем полное название занятия (без сокращений)
       row.push(lesson.name)
@@ -230,7 +231,7 @@ export const AttendanceTable: React.FC<AttendanceTableProps> = ({ data }) => {
                 </Td>
               )
             })}
-            <Td>{dayjs(lesson.date).format('DD.MM.YYYY')}</Td>
+            <Td>{formatDate(lesson.date, 'DD.MM.YYYY')}</Td>
             <Td><ShortText text={lesson.name} /></Td>
 
             {data.students.map((st) => {

src/pages/course-list/components/CoursesOverview.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import {
+  Box,
+  Heading,
+  SimpleGrid,
+  useColorModeValue,
+  Card
+} from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+
+import { Course, Lesson } from '../../../__data__/model'
+import {
+  useStats,
+  StatCards,
+  StudentAttendanceList,
+  CourseAttendanceList,
+  ActivityStats
+} from './statistics'
+
+interface CoursesOverviewProps {
+  courses: Course[]
+  isLoading: boolean
+  // Детализированные данные с уроками (если есть)
+  lessonsByCourse?: Record<string, Lesson[]>
+}
+
+export const CoursesOverview: React.FC<CoursesOverviewProps> = ({ 
+  courses = [], 
+  isLoading = false,
+  lessonsByCourse = {} 
+}) => {
+  const { t } = useTranslation()
+  const bgColor = useColorModeValue('white', 'gray.700')
+  
+  // Используем хук для расчета статистики
+  const stats = useStats(courses, lessonsByCourse)
+  
+  // Если загрузка или нет данных, возвращаем null
+  if (isLoading || !courses.length) {
+    return null
+  }
+  
+  return (
+    <Box mb={6} py={3}>
+      <Heading size="md" mb={4}>
+        {t('journal.pl.overview.title')}
+      </Heading>
+      
+      {/* Основные показатели */}
+      <StatCards stats={stats} bgColor={bgColor} />
+      
+      {/* Дополнительная статистика */}
+      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={5} mb={5}>
+        {/* Статистика посещаемости и топ-студенты */}
+        <Card bg={bgColor} p={4} borderRadius="lg" boxShadow="sm">
+          <StudentAttendanceList 
+            students={stats.topStudents} 
+            title={t('journal.pl.overview.topStudents')} 
+          />
+          
+          {stats.topCoursesByAttendance.length > 0 && (
+            <>
+              <Box h={3} />
+              <CourseAttendanceList courses={stats.topCoursesByAttendance} />
+            </>
+          )}
+        </Card>
+        
+        {/* Статистика деятельности и активности */}
+        <Card bg={bgColor} p={4} borderRadius="lg" boxShadow="sm">
+          <ActivityStats stats={stats} />
+        </Card>
+      </SimpleGrid>
+    </Box>
+  )
+} 

src/pages/course-list/components/index.ts

@@ -1,2 +1,3 @@
+export * from './CreateCourseForm'
 export * from './YearGroup'
-export * from './CreateCourseForm' 
+export * from './CoursesOverview' 

src/pages/course-list/components/statistics/ActivityStats.tsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import {
+  Box,
+  Text,
+  Progress,
+  Flex,
+  Divider,
+  Tooltip
+} from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+import { InfoOutlineIcon } from '@chakra-ui/icons'
+
+import { CourseStats } from './useStats'
+import { WeekdayActivityChart } from './WeekdayActivityChart'
+
+interface ActivityStatsProps {
+  stats: CourseStats
+}
+
+export const ActivityStats: React.FC<ActivityStatsProps> = ({ stats }) => {
+  const { t } = useTranslation()
+  
+  // Определяем цвет для прогресса в зависимости от значения
+  const getProgressColor = (value: number) => {
+    if (value > 80) return 'green'
+    if (value > 50) return 'blue'
+    if (value > 30) return 'yellow'
+    return 'red'
+  }
+  
+  // Вычисляем процент завершенности курсов
+  const completionPercentage = 
+    stats.totalLessons > 0 
+      ? (stats.completedLessons / stats.totalLessons) * 100 
+      : 0
+  
+  return (
+    <Box>
+      <Flex align="center" mb={3}>
+        <Text fontWeight="medium" fontSize="md" mr={2}>
+          {t('journal.pl.overview.activityStats')}
+        </Text>
+        <Tooltip label={t('journal.pl.overview.pastLessonsStats')}>
+          <InfoOutlineIcon color="gray.400" boxSize={3} />
+        </Tooltip>
+      </Flex>
+      
+      <Box mb={3}>
+        <Flex align="center" mb={1}>
+          <Text fontSize="sm" fontWeight="medium" mr={1}>
+            {t('journal.pl.overview.courseCompletion')}:
+          </Text>
+          <Tooltip label={`${stats.completedLessons} / ${stats.totalLessons}`}>
+            <InfoOutlineIcon color="gray.400" boxSize={3} />
+          </Tooltip>
+        </Flex>
+        <Progress 
+          value={completionPercentage} 
+          size="md" 
+          borderRadius="md"
+          colorScheme={getProgressColor(completionPercentage)}
+          mb={1}
+          hasStripe
+        />
+        <Flex justify="space-between" fontSize="sm">
+          <Text>
+            {stats.completedLessons} / {stats.totalLessons} {t('journal.pl.overview.lessons')}
+          </Text>
+          <Text fontWeight="medium">
+            {Math.round(completionPercentage)}%
+          </Text>
+        </Flex>
+      </Box>
+      
+      <Box mb={3}>
+        <Flex align="center" mb={1}>
+          <Text fontSize="sm" fontWeight="medium" mr={1}>
+            {t('journal.pl.overview.studentAttendance')}:
+          </Text>
+          <Tooltip label={t('journal.pl.overview.attendanceHelp')}>
+            <InfoOutlineIcon color="gray.400" boxSize={3} />
+          </Tooltip>
+        </Flex>
+        <Progress 
+          value={stats.averageAttendance} 
+          size="md" 
+          borderRadius="md"
+          colorScheme={getProgressColor(stats.averageAttendance)}
+          mb={1}
+          hasStripe
+        />
+        <Flex justify="space-between" fontSize="sm">
+          <Text>
+            {t('journal.pl.overview.averageRate')}
+          </Text>
+          <Text fontWeight="medium">
+            {Math.round(stats.averageAttendance)}%
+          </Text>
+        </Flex>
+      </Box>
+      
+      <Divider my={3} />
+      
+      <WeekdayActivityChart 
+        weekdayActivity={stats.weekdayActivity}
+        mostActiveDayIndex={stats.mostActiveDayIndex}
+      />
+    </Box>
+  )
+} 

src/pages/course-list/components/statistics/CourseAttendanceList.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import {
+  VStack,
+  HStack,
+  Box,
+  Text,
+  Badge,
+  Tooltip
+} from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+import { CheckCircleIcon } from '@chakra-ui/icons'
+
+interface CourseAttendanceProps {
+  courses: Array<{id: string, name: string, attendanceRate: number}>
+}
+
+export const CourseAttendanceList: React.FC<CourseAttendanceProps> = ({ courses }) => {
+  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 (!courses?.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">
+        <CheckCircleIcon color="green.400" mr={2} />
+        {t('journal.pl.overview.topAttendanceCourses')}
+      </Text>
+      
+      <VStack align="stretch" spacing={2}>
+        {courses.map((course, index) => (
+          <HStack key={course.id} spacing={2}>
+            <Badge 
+              colorScheme={['green', 'blue', 'yellow'][index]} 
+              borderRadius="full" 
+              minW="22px" 
+              textAlign="center"
+            >
+              #{index + 1}
+            </Badge>
+            <Tooltip label={course.name}>
+              <Text fontSize="sm" fontWeight="medium" isTruncated flex="1">
+                {course.name}
+              </Text>
+            </Tooltip>
+            <Badge 
+              colorScheme={getProgressColor(course.attendanceRate)}
+              variant="solid"
+              px={2}
+            >
+              {Math.round(course.attendanceRate)}%
+            </Badge>
+          </HStack>
+        ))}
+      </VStack>
+      
+      <Text fontSize="xs" color="gray.500" mt={2} fontStyle="italic">
+        {t('journal.pl.overview.attendanceHelp')}
+      </Text>
+    </Box>
+  )
+} 

src/pages/course-list/components/statistics/StatCards.tsx

@@ -0,0 +1,135 @@
+import React from 'react'
+import {
+  SimpleGrid,
+  Stat,
+  StatLabel,
+  StatNumber,
+  StatHelpText,
+  Flex,
+  HStack,
+  Text,
+  Icon,
+  Badge
+} from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+import { 
+  FaGraduationCap, 
+  FaChalkboardTeacher, 
+  FaCalendarAlt, 
+  FaUsers 
+} from 'react-icons/fa'
+
+import { CourseStats } from './useStats'
+
+interface StatCardsProps {
+  stats: CourseStats
+  bgColor: string
+}
+
+export const StatCards: React.FC<StatCardsProps> = ({ stats, bgColor }) => {
+  const { t } = useTranslation()
+
+  return (
+    <SimpleGrid columns={{ base: 1, sm: 2, md: 4 }} spacing={5} mb={5}>
+      {/* Статистика по курсам */}
+      <Stat 
+        bg={bgColor} 
+        p={3} 
+        borderRadius="lg" 
+        boxShadow="sm"
+        borderLeft="4px solid" 
+        borderLeftColor="blue.400"
+      >
+        <Flex align="center" mb={2}>
+          <Icon as={FaGraduationCap} color="blue.400" mr={2} />
+          <StatLabel>{t('journal.pl.overview.totalCourses')}</StatLabel>
+        </Flex>
+        <StatNumber fontSize="2xl">{stats.totalCourses}</StatNumber>
+        <StatHelpText mb={0}>
+          <HStack spacing={3} flexWrap="wrap">
+            <Badge colorScheme="green">
+              {stats.activeCourses} {t('journal.pl.overview.active')}
+            </Badge>
+            {stats.recentCoursesCount > 0 && (
+              <Badge colorScheme="purple">
+                +{stats.recentCoursesCount} {t('journal.pl.overview.new')}
+              </Badge>
+            )}
+          </HStack>
+        </StatHelpText>
+      </Stat>
+      
+      {/* Статистика по урокам */}
+      <Stat 
+        bg={bgColor} 
+        p={3} 
+        borderRadius="lg" 
+        boxShadow="sm"
+        borderLeft="4px solid" 
+        borderLeftColor="green.400"
+      >
+        <Flex align="center" mb={2}>
+          <Icon as={FaCalendarAlt} color="green.400" mr={2} />
+          <StatLabel>{t('journal.pl.overview.totalLessons')}</StatLabel>
+        </Flex>
+        <StatNumber fontSize="2xl">{stats.totalLessons}</StatNumber>
+        <StatHelpText mb={0}>
+          <HStack spacing={3} flexWrap="wrap">
+            <Badge colorScheme="blue">
+              {stats.completedLessons} {t('journal.pl.overview.completed')}
+            </Badge>
+            <Badge colorScheme="orange">
+              {stats.upcomingLessons} {t('journal.pl.overview.upcoming')}
+            </Badge>
+          </HStack>
+        </StatHelpText>
+      </Stat>
+      
+      {/* Статистика по студентам */}
+      <Stat 
+        bg={bgColor} 
+        p={3} 
+        borderRadius="lg" 
+        boxShadow="sm"
+        borderLeft="4px solid" 
+        borderLeftColor="purple.400"
+      >
+        <Flex align="center" mb={2}>
+          <Icon as={FaUsers} color="purple.400" mr={2} />
+          <StatLabel>{t('journal.pl.overview.totalStudents')}</StatLabel>
+        </Flex>
+        <StatNumber fontSize="2xl">{stats.totalStudents.size}</StatNumber>
+        <StatHelpText mb={0}>
+          <Text>
+            {stats.averageAttendance > 0 ? 
+              `~${Math.round(stats.averageAttendance)}% ${t('journal.pl.overview.attendance')}` : 
+              t('journal.pl.overview.noAttendanceData')}
+          </Text>
+        </StatHelpText>
+      </Stat>
+      
+      {/* Статистика по преподавателям */}
+      <Stat 
+        bg={bgColor} 
+        p={3} 
+        borderRadius="lg" 
+        boxShadow="sm"
+        borderLeft="4px solid" 
+        borderLeftColor="orange.400"
+      >
+        <Flex align="center" mb={2}>
+          <Icon as={FaChalkboardTeacher} color="orange.400" mr={2} />
+          <StatLabel>{t('journal.pl.overview.totalTeachers')}</StatLabel>
+        </Flex>
+        <StatNumber fontSize="2xl">{stats.totalTeachers.size}</StatNumber>
+        <StatHelpText mb={0}>
+          <Text>
+            {stats.activeCourses > 0 ? 
+              `~${(stats.totalTeachers.size / Math.max(1, stats.activeCourses)).toFixed(1)} ${t('journal.pl.overview.perCourse')}` : 
+              t('journal.pl.overview.noActiveData')}
+          </Text>
+        </StatHelpText>
+      </Stat>
+    </SimpleGrid>
+  )
+} 

src/pages/course-list/components/statistics/StudentAttendanceList.tsx

@@ -0,0 +1,98 @@
+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>
+  )
+} 

src/pages/course-list/components/statistics/WeekdayActivityChart.tsx

@@ -0,0 +1,146 @@
+import React from 'react'
+import {
+  Box,
+  HStack,
+  Text,
+  Badge,
+  Tooltip,
+  VStack,
+  Flex
+} from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+
+interface WeekdayActivityChartProps {
+  weekdayActivity: number[]
+  mostActiveDayIndex: number
+}
+
+export const WeekdayActivityChart: React.FC<WeekdayActivityChartProps> = ({
+  weekdayActivity,
+  mostActiveDayIndex
+}) => {
+  const { t } = useTranslation()
+
+  // Переводим день недели в читаемый формат
+  const getDayOfWeekName = (dayIndex: number) => {
+    const days = [
+      'journal.pl.days.sunday',
+      'journal.pl.days.monday',
+      'journal.pl.days.tuesday',
+      'journal.pl.days.wednesday',
+      'journal.pl.days.thursday',
+      'journal.pl.days.friday',
+      'journal.pl.days.saturday'
+    ]
+    return t(days[dayIndex])
+  }
+  
+  // Получаем короткое название дня недели (первая буква)
+  const getShortDayName = (dayIndex: number) => {
+    return t(`journal.pl.days.${['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'][dayIndex]}`).charAt(0)
+  }
+  
+  // Формируем подсказку для дня недели
+  const getDayTooltip = (dayIndex: number, count: number) => {
+    return `${t(`journal.pl.days.${['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'][dayIndex]}`)}:
+${count} ${t('journal.pl.overview.lessons').toLowerCase()}`
+  }
+  
+  // Если нет данных по активности, показываем сообщение
+  if (!weekdayActivity.some(count => count > 0)) {
+    return (
+      <Box textAlign="center" color="gray.500" fontSize="sm">
+        {t('journal.pl.overview.noAttendanceData')}
+      </Box>
+    )
+  }
+  
+  // Находим максимальное и суммарное значение для расчета процентов
+  const maxValue = Math.max(...weekdayActivity)
+  const totalLessons = weekdayActivity.reduce((sum, count) => sum + count, 0)
+  
+  return (
+    <VStack align="start" width="100%">
+      <Flex justify="space-between" width="100%" align="center">
+        <Text fontSize="sm" fontWeight="medium">
+          {t('journal.pl.overview.mostActiveDay')}:
+        </Text>
+        <Badge colorScheme="blue" fontSize="md" px={2} py={1}>
+          {getDayOfWeekName(mostActiveDayIndex)}
+        </Badge>
+      </Flex>
+      
+      <Text fontSize="xs" color="gray.500" mb={2}>
+        {t('journal.pl.overview.pastLessonsStats')}
+      </Text>
+      
+      {/* Визуализация активности по дням недели */}
+      <Box w="100%" mt={2}>
+        <HStack spacing={1} w="100%" justify="space-between" alignItems="flex-end">
+          {weekdayActivity.map((count, index) => (
+            <Tooltip 
+              key={index} 
+              label={getDayTooltip(index, count)}
+            >
+              <Box width="24px" display="flex" flexDirection="column" alignItems="center">
+                {/* Область для числа */}
+                <Box height="15px" mb={1}>
+                  {count > 0 && (
+                    <Text 
+                      fontSize="10px" 
+                      fontWeight="bold"
+                      color={index === mostActiveDayIndex ? 'blue.500' : 'gray.500'}
+                      lineHeight="15px"
+                      textAlign="center"
+                    >
+                      {count}
+                    </Text>
+                  )}
+                </Box>
+                
+                {/* Столбец графика */}
+                <Box 
+                  h={`${Math.max((count / Math.max(maxValue, 1)) * 50, 3)}px`} 
+                  w="12px" 
+                  bg={index === mostActiveDayIndex ? 'blue.400' : 'gray.300'}
+                  minH="3px"
+                  borderRadius="sm"
+                />
+                
+                {/* Буква дня недели */}
+                <Box height="15px" mt={1}>
+                  <Text 
+                    fontSize="xs"
+                    fontWeight={index === mostActiveDayIndex ? "bold" : "normal"}
+                    lineHeight="15px"
+                    textAlign="center"
+                  >
+                    {getShortDayName(index)}
+                  </Text>
+                </Box>
+                
+                {/* Процент */}
+                <Box height="15px">
+                  {count > 0 && totalLessons > 0 && (
+                    <Text 
+                      fontSize="9px" 
+                      color="gray.500"
+                      lineHeight="15px"
+                      textAlign="center"
+                    >
+                      {Math.round((count / totalLessons) * 100)}%
+                    </Text>
+                  )}
+                </Box>
+              </Box>
+            </Tooltip>
+          ))}
+        </HStack>
+      </Box>
+      
+      <Text fontSize="xs" color="gray.500" mt={2} fontStyle="italic">
+        {t('journal.pl.overview.dayOfWeekHelp')}
+      </Text>
+    </VStack>
+  )
+}

src/pages/course-list/components/statistics/index.ts

@@ -0,0 +1,6 @@
+export * from './useStats'
+export * from './StatCards'
+export * from './StudentAttendanceList'
+export * from './CourseAttendanceList'
+export * from './ActivityStats'
+export * from './WeekdayActivityChart' 

src/pages/course-list/components/statistics/useStats.ts

@@ -0,0 +1,239 @@
+import { useMemo } from 'react'
+import dayjs from 'dayjs'
+import { Course, Lesson } from '../../../../__data__/model'
+
+export interface StudentAttendance {
+  id: string
+  name: string
+  attended: number
+  total: number
+  percent: number
+  avatarUrl?: string
+  email?: string
+}
+
+export interface CourseStats {
+  totalCourses: number
+  activeCourses: number
+  totalLessons: number
+  completedLessons: number
+  upcomingLessons: number
+  averageAttendance: number
+  totalStudents: Set<string>
+  totalTeachers: Set<string>
+  recentCoursesCount: number
+  oldCoursesCount: number
+  weekdayActivity: number[]
+  mostActiveDayIndex: number
+  topStudents: StudentAttendance[]
+  topCoursesByAttendance: Array<{id: string, name: string, attendanceRate: number}>
+}
+
+export const useStats = (
+  courses: Course[], 
+  lessonsByCourse: Record<string, Lesson[]> = {}
+): CourseStats => {
+  
+  return useMemo(() => {
+    if (!courses?.length) {
+      return {
+        totalCourses: 0,
+        activeCourses: 0,
+        totalLessons: 0,
+        completedLessons: 0,
+        upcomingLessons: 0,
+        averageAttendance: 0,
+        totalStudents: new Set<string>(),
+        totalTeachers: new Set<string>(),
+        recentCoursesCount: 0,
+        oldCoursesCount: 0,
+        weekdayActivity: Array(7).fill(0),
+        mostActiveDayIndex: 0,
+        topStudents: [] as StudentAttendance[],
+        topCoursesByAttendance: [] as {id: string, name: string, attendanceRate: number}[]
+      }
+    }
+    
+    const now = dayjs()
+    const threeMonthsAgo = now.subtract(3, 'month')
+    const weekdayActivity = Array(7).fill(0)
+    
+    // Множества для уникальных студентов и учителей
+    const uniqueStudents = new Set<string>()
+    const uniqueTeachers = new Set<string>()
+    
+    // Количество курсов, созданных за последние 3 месяца
+    const recentCourses = courses.filter(course => 
+      dayjs(course.created).isAfter(threeMonthsAgo)
+    )
+    
+    // Количество активных курсов
+    const activeCourses = []
+    
+    let totalLessonsCount = 0
+    let completedLessonsCount = 0
+    let upcomingLessonsCount = 0
+    let totalAttendances = 0
+    let totalPossibleAttendances = 0
+    
+    // Для отслеживания посещаемости студентов по всем курсам
+    const globalStudentsMap = new Map<string, StudentAttendance>()
+    
+    // Статистика посещаемости по курсам
+    const courseAttendanceStats: {id: string, name: string, attendanceRate: number}[] = []
+    
+    // Для каждого курса считаем статистику на основе данных об уроках
+    courses.forEach(course => {
+      // Добавляем учителей в множество
+      course.teachers.forEach(teacher => {
+        uniqueTeachers.add(teacher.sub)
+      })
+      
+      // Добавляем студентов в множество
+      const courseUniqueStudents = new Set<string>()
+      
+      // Получаем детализированные данные об уроках курса (если доступны)
+      const courseLessons = lessonsByCourse[course._id] || []
+      
+      // Если у нас есть детализированные данные по урокам
+      if (courseLessons.length > 0) {
+        // Добавляем количество уроков к общему счетчику
+        totalLessonsCount += courseLessons.length
+        
+        // Считаем завершенные и предстоящие уроки
+        const completed = courseLessons.filter(lesson => dayjs(lesson.date).isBefore(now))
+        const upcoming = courseLessons.filter(lesson => dayjs(lesson.date).isAfter(now))
+        
+        completedLessonsCount += completed.length
+        upcomingLessonsCount += upcoming.length
+        
+        // Если у курса есть будущие занятия, считаем его активным
+        if (upcoming.length > 0) {
+          activeCourses.push(course)
+        }
+        
+        // Собираем всех уникальных студентов курса для более точной статистики
+        courseLessons.forEach(lesson => {
+          lesson.students?.forEach(student => {
+            courseUniqueStudents.add(student.sub)
+            uniqueStudents.add(student.sub)
+          })
+        })
+        
+        // Для статистики посещаемости по курсу
+        let courseAttendances = 0
+        let coursePossibleAttendances = 0
+        
+        // Считаем посещаемость ТОЛЬКО по прошедшим занятиям
+        completed.forEach(lesson => {
+          // Добавляем статистику по дням недели
+          // В dayjs 0 = воскресенье, 1 = понедельник, ... 6 = суббота
+          // Нужно проверить формат даты урока, что это валидная дата
+          if (lesson.date && dayjs(lesson.date).isValid()) {
+            const lessonDay = dayjs(lesson.date).day()
+            weekdayActivity[lessonDay]++
+          }
+          
+          // Добавляем студентов в глобальное множество
+          const lessonStudentsCount = lesson.students?.length || 0
+          
+          // Добавляем в статистику посещаемости
+          courseAttendances += lessonStudentsCount
+          
+          // Обновляем счетчики общей посещаемости
+          totalAttendances += lessonStudentsCount
+          
+          // Собираем статистику по каждому студенту
+          lesson.students?.forEach(student => {
+            // Добавляем или обновляем данные студента в глобальной карте
+            const studentId = student.sub
+            const currentGlobal = globalStudentsMap.get(studentId) || {
+              id: studentId,
+              name: (student.family_name && student.given_name
+                ? `${student.family_name} ${student.given_name}`
+                : student.name || student.email || student.preferred_username || student.family_name || student.given_name),
+              attended: 0,
+              total: 0,
+              percent: 0,
+              avatarUrl: student.picture,
+              email: student.email
+            }
+            
+            currentGlobal.attended += 1
+            globalStudentsMap.set(studentId, currentGlobal)
+          })
+        })
+        
+        // Потенциальные посещения для этого курса рассчитываем только по прошедшим занятиям
+        // и только для студентов, которые есть хотя бы на одном занятии
+        // Кол-во прошедших занятий * кол-во уникальных студентов на курсе
+        coursePossibleAttendances = completed.length * (courseUniqueStudents.size || 1)
+        totalPossibleAttendances += coursePossibleAttendances
+        
+        // Добавляем статистику курса, если есть прошедшие занятия
+        if (completed.length > 0 && coursePossibleAttendances > 0) {
+          courseAttendanceStats.push({
+            id: course._id,
+            name: course.name,
+            attendanceRate: (courseAttendances / coursePossibleAttendances) * 100
+          })
+        }
+      } else {
+        // Если у нас нет детализированных данных, считаем на основе общих данных курса
+        totalLessonsCount += course.lessons.length
+        
+        // Предполагаем, что курс активен
+        activeCourses.push(course)
+      }
+    })
+    
+    // Отладочная информация по активности по дням недели
+    console.log('Weekday activity:', weekdayActivity)
+    
+    // Обрабатываем глобальную статистику посещаемости студентов
+    // Устанавливаем общее число занятий для каждого студента
+    globalStudentsMap.forEach(student => {
+      // Устанавливаем максимально возможное кол-во занятий как общее число прошедших занятий
+      // (это завышенная оценка, т.к. студент может быть не на всех курсах)
+      student.total = completedLessonsCount
+      student.percent = completedLessonsCount > 0 ? (student.attended / student.total) * 100 : 0
+    })
+    
+    // Находим самый активный день недели
+    const maxValue = Math.max(...weekdayActivity)
+    // Если максимальное значение = 0, то устанавливаем понедельник как самый активный день по умолчанию
+    const mostActiveDayIndex = maxValue > 0 ? weekdayActivity.indexOf(maxValue) : 1
+    
+    // Вычисляем среднюю посещаемость
+    const averageAttendance = totalPossibleAttendances > 0
+      ? (totalAttendances / totalPossibleAttendances) * 100
+      : 0
+      
+    // Топ студенты по посещаемости (по всем курсам)
+    const topStudents = Array.from(globalStudentsMap.values())
+      .sort((a, b) => (b.percent - a.percent) || (b.attended - a.attended))
+      .slice(0, 5)
+      
+    // Сортируем курсы по посещаемости
+    const topCoursesByAttendance = courseAttendanceStats
+      .sort((a, b) => b.attendanceRate - a.attendanceRate)
+      .slice(0, 3)
+    
+    return {
+      totalCourses: courses.length,
+      activeCourses: activeCourses.length,
+      totalLessons: totalLessonsCount,
+      completedLessons: completedLessonsCount,
+      upcomingLessons: upcomingLessonsCount,
+      averageAttendance,
+      totalStudents: uniqueStudents,
+      totalTeachers: uniqueTeachers,
+      recentCoursesCount: recentCourses.length,
+      oldCoursesCount: courses.length - recentCourses.length,
+      weekdayActivity,
+      mostActiveDayIndex,
+      topStudents,
+      topCoursesByAttendance
+    }
+  }, [courses, lessonsByCourse])
+} 

src/pages/course-list/course-card.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState, useMemo } from 'react'
+import { formatDate } from '../../utils/dayjs-config'
 import dayjs from 'dayjs'
 import { Link as ConnectedLink, generatePath } from 'react-router-dom'
 import { getNavigationValue } from '@brojs/cli'
@@ -231,7 +232,7 @@ export const CourseCard = ({ course }: { course: Course }) => {
               <Badge colorScheme="blue">
                 <HStack spacing={1}>
                   <CalendarIcon boxSize="3" />
-                  <Text>{dayjs(course.startDt).format('DD.MM.YYYY')}</Text>
+                  <Text>{formatDate(course.startDt, 'DD.MM.YYYY')}</Text>
                 </HStack>
               </Badge>
               <Badge colorScheme="purple">
@@ -243,7 +244,7 @@ export const CourseCard = ({ course }: { course: Course }) => {
               <Badge colorScheme="blue">
                 <HStack spacing={1}>
                   <CalendarIcon boxSize="3" />
-                  <Text>{dayjs(course.startDt).format('DD.MM.YYYY')}</Text>
+                  <Text>{formatDate(course.startDt, 'DD.MM.YYYY')}</Text>
                 </HStack>
               </Badge>
               <Badge colorScheme="purple">
@@ -311,10 +312,12 @@ export const CourseCard = ({ course }: { course: Course }) => {
                   {populatedCourse.data?.lessons
                     .filter(lesson => dayjs(lesson.date).isAfter(dayjs()))
                     .sort((a, b) => dayjs(a.date).valueOf() - dayjs(b.date).valueOf())[0]?.date
-                    ? dayjs(populatedCourse.data?.lessons
+                    ? formatDate(
-                      .filter(lesson => dayjs(lesson.date).isAfter(dayjs()))
+                        populatedCourse.data?.lessons
-                      .sort((a, b) => dayjs(a.date).valueOf() - dayjs(b.date).valueOf())[0]?.date)
+                          .filter(lesson => dayjs(lesson.date).isAfter(dayjs()))
-                      .format('DD.MM.YYYY')
+                          .sort((a, b) => dayjs(a.date).valueOf() - dayjs(b.date).valueOf())[0]?.date,
+                        'DD.MM.YYYY'
+                      )
                     : t('journal.pl.common.noData')
                   }
                 </Text>
@@ -455,7 +458,7 @@ export const CourseCard = ({ course }: { course: Course }) => {
                             <HStack spacing={2} mt={1} flexWrap="wrap">
                               <Tag size="sm" colorScheme={isPast ? "green" : "blue"} borderRadius="full">
                                 <TagLeftIcon as={CalendarIcon} boxSize='10px' />
-                                <TagLabel>{dayjs(lesson.date).format('DD.MM.YYYY')}</TagLabel>
+                                <TagLabel>{formatDate(lesson.date, 'DD.MM.YYYY')}</TagLabel>
                               </Tag>
                               {isPast && lessonAttendance && (
                                 <Tag 

src/pages/course-list/course-list.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useMemo, useEffect } from 'react'
 import {
   Box,
   Button,
@@ -9,13 +9,16 @@ import {
 } from '@chakra-ui/react'
 import { AddIcon } from '@chakra-ui/icons'
 import { useTranslation } from 'react-i18next'
+import { getFeatures } from '@brojs/cli'
 
 import { useAppSelector } from '../../__data__/store'
 import { api } from '../../__data__/api/api'
 import { isTeacher } from '../../utils/user'
 import { PageLoader } from '../../components/page-loader/page-loader'
+import { useSetBreadcrumbs } from '../../components'
 import { useGroupedCourses } from './hooks'
-import { CreateCourseForm, YearGroup } from './components'
+import { CreateCourseForm, YearGroup, CoursesOverview } from './components'
+import { Lesson } from '../../__data__/model'
 
 /**
  * Основной компонент списка курсов
@@ -27,11 +30,61 @@ export const CoursesList = () => {
   const { t } = useTranslation()
   const { colorMode } = useColorMode()
   
+  // Устанавливаем хлебные крошки для главной страницы
+  useSetBreadcrumbs([
+    {
+      title: t('journal.pl.breadcrumbs.home'),
+      path: '/',
+      isCurrentPage: true
+    }
+  ])
+  
+  // Получаем значения фичей
+  const features = getFeatures('journal')
+  const coursesStatistics = features?.['courses.statistics']
+  
+  // Создаем API запросы для получения уроков
+  const [getLessons] = api.useLazyLessonListQuery()
+  
   const buttonSize = useBreakpointValue({ base: 'md', md: 'lg' })
   const containerPadding = useBreakpointValue({ base: '2', md: '4' })
 
   // Используем хук для группировки курсов по годам
   const groupedCourses = useGroupedCourses(data?.body)
+  
+  // Создаем объект с детализированными данными для всех курсов
+  const [lessonsByCourse, setLessonsByCourse] = useState<Record<string, Lesson[]>>({})
+  
+  // Используем useMemo для проверки наличия данных
+  const courses = useMemo(() => data?.body || [], [data])
+  
+  // Загружаем данные для каждого курса параллельно
+  useEffect(() => {
+    if (courses.length > 0 && !showForm) {
+      // Создаем запросы для получения данных о занятиях каждого курса
+      const fetchLessonsForCourses = async () => {
+        const lessonsData: Record<string, Lesson[]> = {}
+        
+        // Получаем данные курсов параллельно (по 3 курса за раз, чтобы не перегружать сервер)
+        for (let i = 0; i < courses.length; i += 3) {
+          const batch = courses.slice(i, i + 3)
+          const batchPromises = batch.map(async course => {
+            // Используем существующий API метод с Lazy Query
+            const response = await getLessons(course.id)
+            if (response.data?.body) {
+              lessonsData[course._id] = response.data.body
+            }
+          })
+          
+          await Promise.all(batchPromises)
+        }
+        
+        setLessonsByCourse(lessonsData)
+      }
+      
+      fetchLessonsForCourses()
+    }
+  }, [courses, showForm, getLessons])
 
   if (isLoading) {
     return <PageLoader />
@@ -61,6 +114,14 @@ export const CoursesList = () => {
         </Box>
       )}
       
+      {!showForm && coursesStatistics && (
+        <CoursesOverview 
+          courses={courses} 
+          isLoading={isLoading}
+          lessonsByCourse={lessonsByCourse}
+        />
+      )}
+      
       {Object.keys(groupedCourses).length > 0 ? (
         Object.entries(groupedCourses)
           .sort(([yearA], [yearB]) => Number(yearB) - Number(yearA)) // Сортируем годы по убыванию

src/pages/course-list/hooks/useCreateCourse.ts

@@ -1,8 +1,9 @@
 import { useRef, useEffect } from 'react'
-import dayjs from 'dayjs'
+import dayjs from '../../../utils/dayjs-config'
 import { useForm } from 'react-hook-form'
 import { useToast } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
+import { formatDate } from '../../../utils/dayjs-config'
 
 import { api } from '../../../__data__/api/api'
 
@@ -30,7 +31,7 @@ export const useCreateCourse = (onSuccess: () => void) => {
     getValues,
   } = useForm<NewCourseForm>({
     defaultValues: {
-      startDt: dayjs().format('YYYY-MM-DD'),
+      startDt: formatDate(dayjs().toDate(), 'YYYY-MM-DD'),
       name: t('journal.pl.course.defaultName'),
     },
   })

src/pages/course-list/hooks/useGroupedCourses.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import dayjs from 'dayjs'
+import dayjs, { formatDate } from '../../../utils/dayjs-config'
 import { Course } from '../../../__data__/model'
 
 /**
@@ -20,7 +20,7 @@ export const useGroupedCourses = (courses?: Course[]) => {
     
     // Группируем по годам
     sortedCourses.forEach(course => {
-      const year = dayjs(course.startDt).format('YYYY')
+      const year = formatDate(course.startDt, 'YYYY')
       if (!grouped[year]) {
         grouped[year] = []
       }

src/pages/lesson-details.tsx

@@ -1,29 +1,28 @@
-import React, { useEffect, useRef, useMemo } from 'react'
+import React, { useEffect, useRef, useMemo, useState } from 'react'
 import { useParams, Link } from 'react-router-dom'
-import dayjs from 'dayjs'
 import QRCode from 'qrcode'
 import { sha256 } from 'js-sha256'
 import { getConfigValue, getNavigationValue } from '@brojs/cli'
+import { motion, AnimatePresence } from 'framer-motion'
 import {
   Box,
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
   Container,
   VStack,
   Heading,
   Stack,
+  useColorMode,
 } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
 
 import { api } from '../__data__/api/api'
 import { User } from '../__data__/model'
 import { UserCard } from '../components/user-card'
+import { formatDate } from '../utils/dayjs-config'
+import { useSetBreadcrumbs } from '../components'
 
 import {
   QRCanvas,
   StudentList,
-  BreadcrumbsWrapper,
 } from './style'
 import { useAppSelector } from '../__data__/store'
 import { isTeacher } from '../utils/user'
@@ -42,6 +41,35 @@ const LessonDetail = () => {
   const canvRef = useRef(null)
   const user = useAppSelector((s) => s.user)
   const { t } = useTranslation()
+  const { colorMode } = useColorMode()
+  
+  // Получаем данные о курсе и уроке
+  const { data: courseData } = api.useGetCourseByIdQuery(courseId)
+  const { data: lessonData } = api.useLessonByIdQuery(lessonId)
+  
+  // Устанавливаем хлебные крошки
+  useSetBreadcrumbs([
+    {
+      title: t('journal.pl.breadcrumbs.home'),
+      path: '/'
+    },
+    {
+      title: courseData?.name || t('journal.pl.breadcrumbs.course'),
+      path: `${getNavigationValue('journal.main')}/lessons-list/${courseId}`
+    },
+    {
+      title: lessonData?.body?.name || t('journal.pl.breadcrumbs.lesson'),
+      isCurrentPage: true
+    }
+  ])
+  
+  // Создаем ref для отслеживания ранее присутствовавших студентов
+  const prevPresentStudentsRef = useRef(new Set<string>())
+  
+  // Добавляем состояние для отслеживания пульсации
+  const [isPulsing, setIsPulsing] = useState(false)
+  // Отслеживаем предыдущее количество студентов
+  const prevStudentCountRef = useRef(0)
   
   const {
     isFetching,
@@ -64,6 +92,34 @@ const LessonDetail = () => {
     [accessCode, lessonId],
   )
 
+  // Эффект для обнаружения и обновления новых присутствующих студентов
+  useEffect(() => {
+    if (accessCode?.body) {
+      const currentPresent = new Set(accessCode.body.lesson.students.map(s => s.sub))
+      
+      // Проверяем, изменилось ли количество студентов
+      const currentCount = accessCode.body.lesson.students.length;
+      if (prevStudentCountRef.current !== currentCount && prevStudentCountRef.current > 0) {
+        // Запускаем эффект пульсации
+        setIsPulsing(true);
+        // Сбрасываем эффект через 1.5 секунды
+        setTimeout(() => {
+          setIsPulsing(false);
+        }, 1500);
+      }
+      
+      // Обновляем предыдущее количество
+      prevStudentCountRef.current = currentCount;
+      
+      // Очищаем флаги предыдущего состояния после задержки
+      const timeoutId = setTimeout(() => {
+        prevPresentStudentsRef.current = currentPresent
+      }, 3000)
+      
+      return () => clearTimeout(timeoutId)
+    }
+  }, [accessCode])
+
   useEffect(() => {
     if (manualAddRqst.isSuccess) {
       refetch()
@@ -118,13 +174,17 @@ const LessonDetail = () => {
   }, [isFetching, isSuccess, userUrl])
 
   const studentsArr = useMemo(() => {
-    let allStudents: (User & { present?: boolean })[] = [
+    let allStudents: (User & { present?: boolean; recentlyPresent?: boolean })[] = [
       ...(AllStudents.data?.body || []),
-    ].map((st) => ({ ...st, present: false }))
+    ].map((st) => ({ ...st, present: false, recentlyPresent: false }))
     let presentStudents: (User & { present?: boolean })[] = [
       ...(accessCode?.body.lesson.students || []),
     ]
 
+    // Находим новых студентов по сравнению с предыдущим состоянием
+    const currentPresent = new Set(presentStudents.map(s => s.sub))
+    const newlyPresent = [...currentPresent].filter(id => !prevPresentStudentsRef.current.has(id))
+
     while (presentStudents.length) {
       const student = presentStudents.pop()
 
@@ -132,70 +192,147 @@ const LessonDetail = () => {
 
       if (present) {
         present.present = true
+        present.recentlyPresent = newlyPresent.includes(student.sub)
       } else {
-        allStudents.push({ ...student, present: true })
+        allStudents.push({ 
+          ...student, 
+          present: true, 
+          recentlyPresent: newlyPresent.includes(student.sub) 
+        })
       }
     }
 
     return allStudents.sort((a, b) => (a.present ? -1 : 1))
-  }, [accessCode?.body, AllStudents.data])
+  }, [accessCode?.body, AllStudents.data, prevPresentStudentsRef.current])
+
+  // Функция для определения цвета на основе посещаемости
+  const getAttendanceColor = (attendance: number, total: number) => {
+    const percentage = total > 0 ? (attendance / total) * 100 : 0
+    
+    if (percentage > 80) return { bg: 'green.100', color: 'green.800', dark: { bg: 'green.800', color: 'green.100' } }
+    if (percentage > 60) return { bg: 'teal.100', color: 'teal.800', dark: { bg: 'teal.800', color: 'teal.100' } }
+    if (percentage > 40) return { bg: 'yellow.100', color: 'yellow.800', dark: { bg: 'yellow.800', color: 'yellow.100' } }
+    if (percentage > 20) return { bg: 'orange.100', color: 'orange.800', dark: { bg: 'orange.800', color: 'orange.100' } }
+    return { bg: 'red.100', color: 'red.800', dark: { bg: 'red.800', color: 'red.100' } }
+  }
 
   return (
     <>
-      <BreadcrumbsWrapper>
-        <Breadcrumb>
-          <BreadcrumbItem>
-            <BreadcrumbLink as={Link} to={getNavigationValue('journal.main')}>
-              {t('journal.pl.common.journal')}
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-
-          <BreadcrumbItem>
-            <BreadcrumbLink
-              as={Link}
-              to={`${getNavigationValue('journal.main')}/lessons-list/${courseId}`}
-            >
-              {t('journal.pl.common.course')}
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-
-          <BreadcrumbItem isCurrentPage>
-            <BreadcrumbLink href="#">{t('journal.pl.common.lesson')}</BreadcrumbLink>
-          </BreadcrumbItem>
-        </Breadcrumb>
-      </BreadcrumbsWrapper>
       <Container maxW="2280px">
         <VStack align="left">
           <Heading as="h3" mt="4" mb="3">
             {t('journal.pl.lesson.topicTitle')}
           </Heading>
           <Box as="span">{accessCode?.body?.lesson?.name}</Box>
-          <Box as="span">
+          
-            {dayjs(accessCode?.body?.lesson?.date).format(t('journal.pl.lesson.dateFormat'))}{' '}
-            {t('journal.pl.common.marked')} - {accessCode?.body?.lesson?.students?.length}{' '}
-            {AllStudents.isSuccess
-              ? `/ ${AllStudents?.data?.body?.length}`
-              : ''}{' '}
-            {t('journal.pl.common.people')}
-          </Box>
         </VStack>
-        <Stack spacing="8" direction={{ base: "column", md: "row" }}>
+        <Stack spacing="8" direction={{ base: "column", md: "row" }} mt={6}>
-          <Box flexShrink={0} alignSelf="center">
+          <Box 
+            flexShrink={0} 
+            alignSelf="flex-start" 
+            p={4} 
+            borderRadius="xl" 
+            bg={colorMode === "light" ? "gray.50" : "gray.700"}
+            boxShadow="md"
+          ><Box pb={3}>
+          {formatDate(accessCode?.body?.lesson?.date, t('journal.pl.lesson.dateFormat'))}{' '}
+          {t('journal.pl.common.marked')} - 
+          {AllStudents.isSuccess && (
+            <Box 
+              as="span" 
+              px={2} 
+              py={1} 
+              ml={2}
+              borderRadius="md"
+              fontWeight="bold"
+              bg={getAttendanceColor(
+                accessCode?.body?.lesson?.students?.length || 0, 
+                AllStudents?.data?.body?.length || 1
+              ).bg}
+              color={getAttendanceColor(
+                accessCode?.body?.lesson?.students?.length || 0, 
+                AllStudents?.data?.body?.length || 1
+              ).color}
+              _dark={{ 
+                bg: getAttendanceColor(
+                  accessCode?.body?.lesson?.students?.length || 0, 
+                  AllStudents?.data?.body?.length || 1
+                ).dark.bg, 
+                color: getAttendanceColor(
+                  accessCode?.body?.lesson?.students?.length || 0, 
+                  AllStudents?.data?.body?.length || 1
+                ).dark.color 
+              }}
+              position="relative"
+              animation={isPulsing ? "pulse 1.5s ease-in-out" : "none"}
+              sx={{
+                '@keyframes pulse': {
+                  '0%': { transform: 'scale(1)' },
+                  '50%': { transform: 'scale(1.15)', boxShadow: '0 0 10px rgba(66, 153, 225, 0.7)' },
+                  '100%': { transform: 'scale(1)' }
+                }
+              }}
+            >
+              {accessCode?.body?.lesson?.students?.length} / {AllStudents?.data?.body?.length}
+            </Box>
+          )}
+          {!AllStudents.isSuccess && (
+            <span> {accessCode?.body?.lesson?.students?.length}</span>
+          )}{' '}
+          {t('journal.pl.common.people')}
+        </Box>
             <a href={userUrl}>
               <QRCanvas ref={canvRef} />
             </a>
           </Box>
-          <StudentList>
+          <Box 
-            {isTeacher(user) && studentsArr.map((student) => (
+            flex={1} 
-              <UserCard
+            p={4} 
-                wrapperAS="li"
+            borderRadius="xl" 
-                key={student.sub}
+            bg={colorMode === "light" ? "gray.50" : "gray.700"}
-                student={student}
+            boxShadow="md"
-                present={student.present}
+          >
-                onAddUser={(user: User) => manualAdd({ lessonId, user })}
+            <StudentList>
-              />
+              {isTeacher(user) && (
-            ))}
+                <AnimatePresence initial={false}>
-          </StudentList>
+                  {studentsArr.map((student) => (
+                    <motion.li
+                      key={student.sub}
+                      layout
+                      initial={{ opacity: 0, scale: 0.8 }}
+                      animate={{ 
+                        opacity: 1, 
+                        scale: 1,
+                        // Добавляем подсветку для недавно отметившихся студентов
+                        boxShadow: student.recentlyPresent 
+                          ? ['0 0 0 0 rgba(66, 153, 225, 0)', '0 0 20px 5px rgba(66, 153, 225, 0.7)', '0 0 0 0 rgba(66, 153, 225, 0)'] 
+                          : '0 0 0 0 rgba(0, 0, 0, 0)'
+                      }}
+                      exit={{ opacity: 0, scale: 0.8 }}
+                      transition={{ 
+                        type: "spring", 
+                        stiffness: 300, 
+                        damping: 30,
+                        layout: { duration: 0.4 },
+                        boxShadow: {
+                          repeat: student.recentlyPresent ? 3 : 0,
+                          duration: 1.5
+                        }
+                      }}
+                    >
+                      <UserCard
+                        wrapperAS="div"
+                        student={student}
+                        present={student.present}
+                        recentlyPresent={student.recentlyPresent}
+                        onAddUser={(user: User) => manualAdd({ lessonId, user })}
+                      />
+                    </motion.li>
+                  ))}
+                </AnimatePresence>
+              )}
+            </StudentList>
+          </Box>
         </Stack>
       </Container>
     </>

src/pages/lesson-list/components/bar.tsx

@@ -1,9 +1,14 @@
 import React from 'react'
 import { type BarDatum, ResponsiveBar } from '@nivo/bar'
 import { useTranslation } from 'react-i18next'
+import { useColorMode } from '@chakra-ui/react'
 
 export const Bar = ({ data }: { data: BarDatum[] }) => {
     const { t } = useTranslation()
+    const { colorMode } = useColorMode()
+    
+    // Находим максимальное значение для нормализации цветов
+    const maxValue = Math.max(...data.map(item => (item.count as number)))
     
     return (
         <ResponsiveBar
@@ -11,18 +16,46 @@ export const Bar = ({ data }: { data: BarDatum[] }) => {
             keys={['count']}
             indexBy="lessonIndex"
             margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
-            padding={0.3}
+            padding={0.4}
             valueScale={{ type: 'linear' }}
             indexScale={{ type: 'band', round: true }}
-            colors={{ scheme: 'set3' }}
+            colors={(bar) => {
+                // Нормализованное значение от 0 до 1
+                const normalized = (bar.data.count as number) / maxValue
+                // Красный при низких значениях, зеленый при высоких
+                const r = Math.round(255 * (1 - normalized))
+                const g = Math.round(255 * normalized)
+                const b = 100 // Немного синего, чтобы цвета не были слишком резкими
+                return `rgb(${r}, ${g}, ${b})`
+            }}
+            theme={{
+                tooltip: {
+                    container: {
+                        background: colorMode === 'dark' ? '#2D3748' : '#ffffff',
+                        color: colorMode === 'dark' ? '#ffffff' : '#333333',
+                        fontSize: 14,
+                        borderRadius: 8,
+                        boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
+                    },
+                },
+                grid: {
+                    line: {
+                        stroke: colorMode === 'dark' ? '#4A5568' : '#e0e0e0',
+                        strokeWidth: 1,
+                    },
+                },
+            }}
+            borderRadius={4}
+            borderWidth={1}
+            borderColor={{ from: 'color', modifiers: [['darker', 0.3]] }}
             axisTop={null}
             axisRight={null}
             labelSkipWidth={12}
             labelSkipHeight={12}
-            labelTextColor={{
+            labelTextColor={colorMode === 'dark' ? '#ffffff' : '#333333'}
-                from: 'color',
+            animate={true}
-                modifiers: [['brighter', 1.4]],
+            motionConfig="gentle"
-            }}
+            enableGridY={false}
             role="application"
             ariaLabel={t('journal.pl.lesson.attendanceChart')}
             barAriaLabel={(e) =>

src/pages/lesson-list/components/item.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
-import dayjs from 'dayjs'
+import { formatDate } from '../../../utils/dayjs-config'
 import { Link } from 'react-router-dom'
 import { getNavigationValue, getFeatures } from '@brojs/cli'
 import {
@@ -133,7 +133,7 @@ export const Item: React.FC<ItemProps> = ({
       <>
         <Flex justify="space-between" align="center" mb={2}>
           <Text fontWeight="medium">{name}</Text>
-          <Text fontSize="sm">{dayjs(date).format(groupByDate ? 'HH:mm' : 'HH:mm DD.MM.YY')}</Text>
+          <Text fontSize="sm">{formatDate(date, groupByDate ? 'HH:mm' : 'HH:mm DD.MM.YY')}</Text>
         </Flex>
         
         <Flex justify="space-between" align="center">
@@ -193,7 +193,7 @@ export const Item: React.FC<ItemProps> = ({
         </Td>
       )}
       <Td textAlign="center">
-        {dayjs(date).format(groupByDate ? 'HH:mm' : 'HH:mm DD.MM.YY')}
+        {formatDate(date, groupByDate ? 'HH:mm' : 'HH:mm DD.MM.YY')}
       </Td>
       <Td>{name}</Td>
       {isTeacher && (

src/pages/lesson-list/components/lesson-items.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import dayjs from 'dayjs'
+import { formatDate } from '../../../utils/dayjs-config'
 import {
   Tr,
   Td,
@@ -45,7 +45,7 @@ export const LessonItems: React.FC<LessonItemProps> = ({
             borderRadius="md"
             _dark={{ bg: "gray.700" }}
           >
-            <Text fontWeight="bold">{dayjs(date).format('DD MMMM YYYY')}</Text>
+            <Text fontWeight="bold">{formatDate(date, 'DD MMMM YYYY')}</Text>
           </Box>
         )}
         {lessons.map((lesson) => (
@@ -78,7 +78,7 @@ export const LessonItems: React.FC<LessonItemProps> = ({
       {date && (
         <Tr>
           <Td colSpan={isTeacher ? 5 : 3}>
-            {dayjs(date).format('DD MMMM YYYY')}
+            {formatDate(date, 'DD MMMM YYYY')}
           </Td>
         </Tr>
       )}

src/pages/lesson-list/components/lessons-form.tsx

@@ -30,6 +30,7 @@ import { AddIcon, CheckIcon, WarningIcon, RepeatIcon } from '@chakra-ui/icons'
 import { useTranslation } from 'react-i18next'
 import { FaRobot } from 'react-icons/fa'
 import dayjs from 'dayjs'
+import { formatDate } from '../../../utils/dayjs-config'
 
 import { dateToCalendarFormat } from '../../../utils/time'
 import { Lesson } from '../../../__data__/model'
@@ -294,7 +295,7 @@ export const LessonForm = ({
                           {isSelected && <CheckIcon color="green.400" />}
                         </Flex>
                         <Text fontSize="sm" color={textSecondaryColor}>
-                          {dayjs(suggestion.date).format('DD.MM.YYYY HH:mm')}
+                          {formatDate(suggestion.date, 'DD.MM.YYYY HH:mm')}
                         </Text>
                       </Box>
                     );

src/pages/lesson-list/components/statistics.tsx

@@ -0,0 +1,309 @@
+import React, { useMemo } from 'react'
+import dayjs from 'dayjs'
+import { formatDate } from '../../../utils/dayjs-config'
+import {
+  Box,
+  Heading,
+  Text,
+  SimpleGrid,
+  Stat,
+  StatLabel,
+  StatNumber,
+  StatHelpText,
+  StatArrow,
+  StatGroup,
+  Flex,
+  Icon,
+  Progress,
+  Divider,
+  Badge,
+  VStack,
+  HStack,
+  useColorModeValue
+} from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+import { 
+  FaChalkboardTeacher, 
+  FaUserGraduate, 
+  FaClock, 
+  FaCalendarCheck, 
+  FaCalendarAlt,
+  FaPercentage 
+} from 'react-icons/fa'
+import { CalendarIcon, StarIcon, TimeIcon } from '@chakra-ui/icons'
+
+import { Lesson } from '../../../__data__/model'
+
+interface CourseStatisticsProps {
+  lessons: Lesson[]
+  isLoading: boolean
+}
+
+export const CourseStatistics: React.FC<CourseStatisticsProps> = ({ lessons = [], isLoading }) => {
+  const { t } = useTranslation()
+  const statBgColor = useColorModeValue('white', 'gray.700')
+  const borderColor = useColorModeValue('gray.200', 'gray.600')
+  
+  // Вычисляем статистику курса
+  const stats = useMemo(() => {
+    if (!lessons || lessons.length === 0) {
+      return {
+        totalLessons: 0,
+        completedLessons: 0,
+        upcomingLessons: 0,
+        attendanceRate: 0,
+        averageStudentsPerLesson: 0,
+        nextLessonDate: null,
+        mostAttendedLesson: null,
+        attendanceTrend: 0,
+        totalStudents: 0,
+        daysUntilNextLesson: 0,
+        percentageCompleted: 0
+      }
+    }
+    
+    const now = dayjs()
+    const completed = lessons.filter(lesson => dayjs(lesson.date).isBefore(now))
+    const upcoming = lessons.filter(lesson => dayjs(lesson.date).isAfter(now))
+    
+    // Сортируем предстоящие занятия по дате (ближайшие вперед)
+    const sortedUpcoming = [...upcoming].sort((a, b) => 
+      dayjs(a.date).valueOf() - dayjs(b.date).valueOf()
+    )
+    
+    // Находим ближайшее занятие
+    const nextLesson = sortedUpcoming.length > 0 ? sortedUpcoming[0] : null
+    
+    // Вычисляем среднее количество студентов на занятии
+    const totalStudentsCount = completed.reduce(
+      (sum, lesson) => sum + (lesson.students?.length || 0), 
+      0
+    )
+    
+    const averageStudents = completed.length 
+      ? totalStudentsCount / completed.length 
+      : 0
+    
+    // Находим занятие с наибольшей посещаемостью
+    let mostAttended = null
+    let maxAttendance = 0
+    
+    completed.forEach(lesson => {
+      const attendance = lesson.students?.length || 0
+      if (attendance > maxAttendance) {
+        maxAttendance = attendance
+        mostAttended = lesson
+      }
+    })
+    
+    // Вычисляем тренд посещаемости (положительный или отрицательный)
+    let attendanceTrend = 0
+    
+    if (completed.length >= 2) {
+      // Берем последние 5 занятий или меньше, если их меньше 5
+      const recentLessons = [...completed]
+        .sort((a, b) => dayjs(b.date).valueOf() - dayjs(a.date).valueOf())
+        .slice(0, 5)
+      
+      if (recentLessons.length >= 2) {
+        const lastLesson = recentLessons[0]
+        const previousLessons = recentLessons.slice(1)
+        
+        const lastAttendance = lastLesson.students?.length || 0
+        const avgPreviousAttendance = previousLessons.reduce(
+          (sum, lesson) => sum + (lesson.students?.length || 0), 
+          0
+        ) / previousLessons.length
+        
+        // Вычисляем процентное изменение
+        attendanceTrend = avgPreviousAttendance 
+          ? ((lastAttendance - avgPreviousAttendance) / avgPreviousAttendance) * 100
+          : 0
+      }
+    }
+    
+    // Вычисляем количество дней до следующего занятия
+    const daysUntilNext = nextLesson 
+      ? dayjs(nextLesson.date).diff(now, 'day')
+      : 0
+    
+    // Собираем все уникальные ID студентов
+    const uniqueStudents = new Set()
+    lessons.forEach(lesson => {
+      lesson.students?.forEach(student => {
+        uniqueStudents.add(student.sub)
+      })
+    })
+    
+    // Вычисляем процент завершенного курса
+    const percentComplete = lessons.length 
+      ? (completed.length / lessons.length) * 100
+      : 0
+    
+    return {
+      totalLessons: lessons.length,
+      completedLessons: completed.length,
+      upcomingLessons: upcoming.length,
+      attendanceRate: completed.length ? (totalStudentsCount / (completed.length * uniqueStudents.size || 1)) * 100 : 0,
+      averageStudentsPerLesson: Math.round(averageStudents * 10) / 10,
+      nextLessonDate: nextLesson?.date || null,
+      mostAttendedLesson: mostAttended,
+      attendanceTrend,
+      totalStudents: uniqueStudents.size,
+      daysUntilNextLesson: daysUntilNext,
+      percentageCompleted: percentComplete
+    }
+  }, [lessons])
+  
+  // Определяем цвет для показателей статистики
+  const getProgressColor = (value) => {
+    if (value > 80) return 'green'
+    if (value > 50) return 'blue'
+    if (value > 30) return 'yellow'
+    return 'red'
+  }
+  
+  if (isLoading || !lessons.length) {
+    return null
+  }
+  
+  return (
+    <Box mb={6} py={3}>
+      <Heading size="md" mb={4}>
+        {t('journal.pl.statistics.title')}
+      </Heading>
+      
+      <SimpleGrid columns={{ base: 1, sm: 2, md: 4 }} spacing={5} mb={5}>
+        {/* Статистика по занятиям */}
+        <Stat 
+          bg={statBgColor} 
+          p={3} 
+          borderRadius="lg" 
+          boxShadow="sm"
+          borderLeft="4px solid" 
+          borderLeftColor="blue.400"
+        >
+          <Flex align="center" mb={2}>
+            <Icon as={FaCalendarAlt} color="blue.400" mr={2} />
+            <StatLabel>{t('journal.pl.statistics.totalLessons')}</StatLabel>
+          </Flex>
+          <StatNumber fontSize="2xl">{stats.totalLessons}</StatNumber>
+          <StatHelpText mb={0}>
+            <HStack>
+              <Icon as={FaCalendarCheck} color="green.400" boxSize="0.9em" />
+              <Text>{stats.completedLessons} {t('journal.pl.statistics.completed')}</Text>
+            </HStack>
+          </StatHelpText>
+        </Stat>
+        
+        {/* Статистика по посещаемости */}
+        <Stat 
+          bg={statBgColor} 
+          p={3} 
+          borderRadius="lg" 
+          boxShadow="sm"
+          borderLeft="4px solid" 
+          borderLeftColor="green.400"
+        >
+          <Flex align="center" mb={2}>
+            <Icon as={FaPercentage} color="green.400" mr={2} />
+            <StatLabel>{t('journal.pl.statistics.attendanceRate')}</StatLabel>
+          </Flex>
+          <StatNumber fontSize="2xl">
+            {Math.round(stats.attendanceRate)}%
+          </StatNumber>
+          <StatHelpText>
+            {stats.attendanceTrend !== 0 && (
+              <Flex align="center">
+                <StatArrow 
+                  type={Number(stats.attendanceTrend) > 0 ? 'increase' : 'decrease'} 
+                />
+                <Text>
+                  {Math.abs(Math.round(Number(stats.attendanceTrend)))}%
+                </Text>
+              </Flex>
+            )}
+          </StatHelpText>
+        </Stat>
+        
+        {/* Статистика по студентам */}
+        <Stat 
+          bg={statBgColor} 
+          p={3} 
+          borderRadius="lg" 
+          boxShadow="sm"
+          borderLeft="4px solid" 
+          borderLeftColor="purple.400"
+        >
+          <Flex align="center" mb={2}>
+            <Icon as={FaUserGraduate} color="purple.400" mr={2} />
+            <StatLabel>{t('journal.pl.statistics.totalStudents')}</StatLabel>
+          </Flex>
+          <StatNumber fontSize="2xl">{stats.totalStudents}</StatNumber>
+          <StatHelpText mb={0}>
+            <Text>
+              ~ {stats.averageStudentsPerLesson} {t('journal.pl.statistics.perLesson')}
+            </Text>
+          </StatHelpText>
+        </Stat>
+        
+        {/* Следующее занятие */}
+        <Stat 
+          bg={statBgColor} 
+          p={3} 
+          borderRadius="lg" 
+          boxShadow="sm"
+          borderLeft="4px solid" 
+          borderLeftColor="orange.400"
+        >
+          <Flex align="center" mb={2}>
+            <Icon as={FaClock} color="orange.400" mr={2} />
+            <StatLabel>{t('journal.pl.statistics.nextLesson')}</StatLabel>
+          </Flex>
+          <StatNumber fontSize="xl">
+            {stats.nextLessonDate 
+              ? formatDate(stats.nextLessonDate, 'DD.MM.YYYY')
+              : t('journal.pl.statistics.noUpcoming')
+            }
+          </StatNumber>
+          <StatHelpText mb={0}>
+            {stats.nextLessonDate && (
+              <Text>
+                {t('journal.pl.statistics.in')} {stats.daysUntilNextLesson} {t('journal.pl.statistics.days')}
+              </Text>
+            )}
+          </StatHelpText>
+        </Stat>
+      </SimpleGrid>
+      
+      <Box
+        bg={statBgColor}
+        p={4}
+        borderRadius="lg"
+        boxShadow="sm"
+        borderTop="1px solid"
+        borderColor={borderColor}
+      >
+        <Text fontWeight="bold" mb={2}>
+          {t('journal.pl.statistics.courseProgress')}
+        </Text>
+        <Progress 
+          value={stats.percentageCompleted} 
+          size="lg" 
+          borderRadius="md"
+          colorScheme={getProgressColor(stats.percentageCompleted)}
+          mb={1}
+          hasStripe
+        />
+        <Flex justify="space-between" fontSize="sm">
+          <Text>
+            {t('journal.pl.statistics.completed')}: {stats.completedLessons} / {stats.totalLessons}
+          </Text>
+          <Text fontWeight="medium">
+            {Math.round(stats.percentageCompleted)}%
+          </Text>
+        </Flex>
+      </Box>
+    </Box>
+  )
+} 

src/pages/lesson-list/lesson-list.tsx

@@ -1,11 +1,8 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
-import dayjs from 'dayjs'
+import dayjs, { formatDate } from '../../utils/dayjs-config'
 import { generatePath, Link, useParams } from 'react-router-dom'
 import { getNavigationValue, getFeatures } from '@brojs/cli'
 import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
   Container,
   Box,
   Button,
@@ -26,36 +23,46 @@ import {
   AlertDialogHeader,
   AlertDialogOverlay,
   useBreakpointValue,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  useColorMode,
 } from '@chakra-ui/react'
-import { AddIcon } from '@chakra-ui/icons'
+import { AddIcon, EditIcon } from '@chakra-ui/icons'
 import { useTranslation } from 'react-i18next'
 
 import { useAppSelector } from '../../__data__/store'
 import { api } from '../../__data__/api/api'
 import { isTeacher } from '../../utils/user'
 import { Lesson } from '../../__data__/model'
-import { XlSpinner } from '../../components/xl-spinner'
+import { XlSpinner, useSetBreadcrumbs } from '../../components'
+import { qrCode } from '../../assets'
 
 import { LessonForm } from './components/lessons-form'
 import { Bar } from './components/bar'
 import { LessonItems } from './components/lesson-items'
-import { BreadcrumbsWrapper } from './style'
+import { CourseStatistics } from './components/statistics'
 
 const features = getFeatures('journal')
 
 const barFeature = features?.['lesson.bar']
 const groupByDate = features?.['group.by.date']
+const courseStatistics = features?.['course.statistics']
 
 const LessonList = () => {
   const { courseId } = useParams()
   const user = useAppSelector((s) => s.user)
   const { data, isLoading, error, isSuccess } = api.useLessonListQuery(courseId)
+  const { data: courseData } = api.useGetCourseByIdQuery(courseId)
   const [generateLessonsMutation, {
     data: generateLessons, 
     isLoading: isLoadingGenerateLessons,
     error: errorGenerateLessons,
     isSuccess: isSuccessGenerateLessons
   }, ] = api.useGenerateLessonsMutation()
+  const { colorMode } = useColorMode()
 
   const [createLesson, crLQuery] = api.useCreateLessonMutation()
   const [deleteLesson, deletingRqst] = api.useDeleteLessonMutation()
@@ -69,11 +76,41 @@ const LessonList = () => {
   const [editLesson, setEditLesson] = useState<Lesson>(null)
   const [suggestedLessonToCreate, setSuggestedLessonToCreate] = useState(null)
   const { t } = useTranslation()
+  
+  // Устанавливаем хлебные крошки для страницы списка уроков
+  useSetBreadcrumbs([
+    {
+      title: t('journal.pl.breadcrumbs.home'),
+      path: '/'
+    },
+    {
+      title: courseData?.name || t('journal.pl.breadcrumbs.course'),
+      isCurrentPage: true
+    }
+  ])
+  
   const sorted = useMemo(
     () => [...(data?.body || [])]?.sort((a, b) => (a.date > b.date ? 1 : -1)),
     [data, data?.body],
   )
 
+  // Найдем максимальное количество студентов среди всех уроков
+  const maxStudents = useMemo(() => {
+    if (!sorted || sorted.length === 0) return 1
+    const max = Math.max(...sorted.map(lesson => lesson.students?.length || 0))
+    return max > 0 ? max : 1 // Избегаем деления на ноль
+  }, [sorted])
+
+  // Функция для определения цвета на основе посещаемости
+  const getAttendanceColor = (attendance: number) => {
+    const percentage = (attendance / maxStudents) * 100
+    if (percentage > 80) return { bg: 'green.100', color: 'green.800', dark: { bg: 'green.800', color: 'green.100' } }
+    if (percentage > 60) return { bg: 'teal.100', color: 'teal.800', dark: { bg: 'teal.800', color: 'teal.100' } }
+    if (percentage > 40) return { bg: 'yellow.100', color: 'yellow.800', dark: { bg: 'yellow.800', color: 'yellow.100' } }
+    if (percentage > 20) return { bg: 'orange.100', color: 'orange.800', dark: { bg: 'orange.800', color: 'orange.100' } }
+    return { bg: 'red.100', color: 'red.800', dark: { bg: 'red.800', color: 'red.100' } }
+  }
+
   const lessonCalc = useMemo(() => {
     if (!isSuccess) {
       return []
@@ -275,7 +312,7 @@ const LessonList = () => {
         <AlertDialogOverlay>
           <AlertDialogContent>
             <AlertDialogHeader fontSize="lg" fontWeight="bold">
-              {t('journal.pl.lesson.deleteConfirm', { date: dayjs(lessonToDelete?.date).format('DD.MM.YY') })}
+              {t('journal.pl.lesson.deleteConfirm', { date: formatDate(lessonToDelete?.date, 'DD.MM.YY') })}
             </AlertDialogHeader>
 
             <AlertDialogBody>
@@ -303,19 +340,6 @@ const LessonList = () => {
           </AlertDialogContent>
         </AlertDialogOverlay>
       </AlertDialog>
-      <BreadcrumbsWrapper>
-        <Breadcrumb>
-          <BreadcrumbItem>
-            <BreadcrumbLink as={Link} to={getNavigationValue('journal.main')}>
-              {t('journal.pl.common.journal')}
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-
-          <BreadcrumbItem isCurrentPage>
-            <BreadcrumbLink href="#">{t('journal.pl.common.course')}</BreadcrumbLink>
-          </BreadcrumbItem>
-        </Breadcrumb>
-      </BreadcrumbsWrapper>
       <Container maxW="container.xl" position="relative">
         {isTeacher(user) && (
           <Box mt="15" mb="15">
@@ -346,6 +370,12 @@ const LessonList = () => {
             )}
           </Box>
         )}
+        
+        {/* Статистика курса */}
+        {!showForm && courseStatistics && (
+          <CourseStatistics lessons={sorted} isLoading={isLoading} />
+        )}
+        
         {barFeature && sorted?.length > 1 && (
           <Box height="300">
             <Bar
@@ -371,38 +401,157 @@ const LessonList = () => {
             ))}
           </Box>
         ) : (
-          <TableContainer whiteSpace="wrap" pb={13}>
+          <Box pb={13}>
-            <Table variant="striped" colorScheme="cyan">
+            {lessonCalc?.map(({ data: lessons, date }) => (
-              <Thead>
+              <Box key={date} mb={6}>
-                <Tr>
+                {date && (
-                  {isTeacher(user) && (
+                  <Box 
-                    <Th align="center" width={1}>
+                    p={3} 
-                      {t('journal.pl.lesson.link')}
+                    mb={4} 
-                    </Th>
+                    bg="cyan.50" 
-                  )}
+                    borderRadius="md"
-                  <Th textAlign="center" width={1}>
+                    _dark={{ bg: "cyan.900" }}
-                    {groupByDate ? t('journal.pl.lesson.time') : t('journal.pl.common.date')}
+                    boxShadow="sm"
-                  </Th>
+                  >
-                  <Th width="100%">{t('journal.pl.common.name')}</Th>
+                    <Text fontWeight="bold" fontSize="lg">
-                  {isTeacher(user) && <Th>{t('journal.pl.lesson.action')}</Th>}
+                      {formatDate(date, 'DD MMMM YYYY')}
-                  <Th isNumeric>{t('journal.pl.common.marked')}</Th>
+                    </Text>
-                </Tr>
+                  </Box>
-              </Thead>
+                )}
-              <Tbody>
+                <Box>
-                {lessonCalc?.map(({ data: lessons, date }) => (
+                  {lessons.map((lesson, index) => (
-                  <LessonItems
+                    <Box 
-                    courseId={courseId}
+                      key={lesson.id} 
-                    date={date}
+                      borderRadius="lg" 
-                    isTeacher={isTeacher(user)}
+                      boxShadow="md"
-                    lessons={lessons}
+                      bg="white"
-                    setlessonToDelete={setlessonToDelete}
+                      _dark={{ bg: "gray.700" }}
-                    setEditLesson={handleEditLesson}
+                      transition="all 0.3s"
-                    key={date}
+                      _hover={{ 
-                  />
+                        transform: "translateX(5px)", 
-                ))}
+                        boxShadow: "lg" 
-              </Tbody>
+                      }}
-            </Table>
+                      overflow="hidden"
-          </TableContainer>
+                      position="relative"
+                      mb={4}
+                      animation={`slideIn 0.6s ease-out ${index * 0.15}s both`}
+                      sx={{
+                        '@keyframes slideIn': {
+                          '0%': {
+                            opacity: 0,
+                            transform: 'translateX(-30px)'
+                          },
+                          '100%': {
+                            opacity: 1,
+                            transform: 'translateX(0)'
+                          }
+                        }
+                      }}
+                    >
+                      <Flex direction={{ base: "column", sm: "row" }}>
+                        {/* QR код и ссылка - левая часть карточки */}
+                        {isTeacher(user) && (
+                          <Link
+                            to={`${getNavigationValue('journal.main')}/lesson/${courseId}/${lesson.id}`}
+                          >
+                            <Box 
+                              p={4}
+                              bg="cyan.500" 
+                              _dark={{ bg: "cyan.600" }} 
+                              color="white"
+                              display="flex"
+                              alignItems="center"
+                              justifyContent="center"
+                              transition="all 0.2s"
+                              _hover={{ bg: "cyan.600", _dark: { bg: "cyan.700" } }}
+                              height="100%"
+                              minW="150px"
+                            >
+                              <Box 
+                                mr={0}
+                                bg="white" 
+                                borderRadius="md" 
+                                p={2}
+                                display="flex"
+                              >
+                                <img width={32} src={qrCode} alt="QR код" />
+                              </Box>
+                            </Box>
+                          </Link>
+                        )}
+                        
+                        {/* Содержимое карточки */}
+                        <Box p={5} w="100%" display="flex" flexDirection="column" justifyContent="space-between">
+                          <Flex mb={3} justify="space-between" align="center">
+                            {/* Название урока */}
+                            <Text fontWeight="bold" fontSize="xl" lineHeight="1.4" flex="1">
+                              {lesson.name}
+                            </Text>
+                            
+                            <Text fontSize="sm" color="gray.500" _dark={{ color: "gray.300" }} ml={3} whiteSpace="nowrap">
+                              {formatDate(lesson.date, groupByDate ? 'HH:mm' : 'HH:mm DD.MM.YY')}
+                            </Text>
+                          </Flex>
+                          
+                          {/* Нижняя часть с метками и действиями */}
+                          <Flex justifyContent="space-between" alignItems="center" mt={1}>
+                            <Flex align="center">
+                              <Text fontSize="sm" mr={2}>
+                                {t('journal.pl.common.marked')}:
+                              </Text>
+                              <Text 
+                                px={2} 
+                                py={1} 
+                                bg={getAttendanceColor(lesson.students.length).bg}
+                                color={getAttendanceColor(lesson.students.length).color}
+                                _dark={{ 
+                                  bg: getAttendanceColor(lesson.students.length).dark.bg, 
+                                  color: getAttendanceColor(lesson.students.length).dark.color 
+                                }}
+                                borderRadius="md"
+                                fontWeight="bold"
+                                fontSize="sm"
+                              >
+                                {lesson.students.length}
+                              </Text>
+                            </Flex>
+                            
+                            {isTeacher(user) && (
+                              <Menu>
+                                <MenuButton 
+                                  as={Button} 
+                                  size="sm" 
+                                  colorScheme="cyan" 
+                                  variant="ghost"
+                                  rightIcon={<EditIcon />}
+                                >
+                                  {t('journal.pl.edit')}
+                                </MenuButton>
+                                <MenuList>
+                                  <MenuItem
+                                    onClick={() => handleEditLesson(lesson)}
+                                    icon={<EditIcon />}
+                                  >
+                                    {t('journal.pl.edit')}
+                                  </MenuItem>
+                                  <MenuItem 
+                                    onClick={() => setlessonToDelete(lesson)}
+                                    color="red.500"
+                                  >
+                                    {t('journal.pl.delete')}
+                                  </MenuItem>
+                                </MenuList>
+                              </Menu>
+                            )}
+                          </Flex>
+                        </Box>
+                      </Flex>
+                    </Box>
+                  ))}
+                </Box>
+              </Box>
+            ))}
+          </Box>
         )}
       </Container>
     </>

src/pages/style.ts

@@ -16,19 +16,96 @@ const reveal = keyframes`
 `
 
 export const StudentList = styled.ul`
-  padding-left: 0px;
+  padding: 0;
-  height: 600px;
+  list-style: none;
-  justify-content: space-evenly;
+  display: grid;
-  padding-right: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  display: flex;
+  gap: 16px;
-  flex-direction: row;
+  width: 100%;
-  flex-wrap: wrap;
+  max-height: 600px;
-  gap: 8px;
+  overflow-y: auto;
   
   @media (max-width: 768px) {
-    height: auto;
+    gap: 12px;
-    max-height: 600px;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    padding-right: 0;
+  }
+
+  /* Стили для motion.li элементов */
+  li {
+    list-style: none;
+    height: 100%;
+  }
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+  }
+
+  .chakra-ui-dark &::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .chakra-ui-dark &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+  }
+`
+
+export const StudentListView = styled.ul`
+  padding: 0;
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 16px;
+  width: 100%;
+  
+  /* Адаптивные отступы на разных экранах */
+  @media (max-width: 768px) {
+    gap: 12px;
+    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  }
+  
+  /* Стили для контейнеров карточек */
+  li {
+    list-style: none;
+    height: 100%;
+    transform-origin: center bottom;
+  }
+  
+  /* Добавляем плавные переходы между состояниями */
+  li:hover {
+    z-index: 10;
+  }
+  
+  /* Стилизация скроллбара */
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.03);
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+  }
+
+  .chakra-ui-dark &::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .chakra-ui-dark &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
   }
 `
 

src/pages/user-page.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
+import { motion, AnimatePresence } from 'framer-motion'
 
 import { api } from '../__data__/api/api'
-import dayjs from 'dayjs'
+import { formatDate } from '../utils/dayjs-config'
 import {
   Alert,
   AlertIcon,
@@ -12,18 +13,77 @@ import {
   Container,
   Spinner,
   Text,
+  Heading,
+  Badge,
+  Flex,
+  useColorMode,
 } from '@chakra-ui/react'
 import { UserCard } from '../components/user-card'
+import { StudentListView } from './style'
+import { useSetBreadcrumbs } from '../components'
 
 const UserPage = () => {
   const { lessonId, accessId } = useParams()
   const { t } = useTranslation()
+  const { colorMode } = useColorMode()
   const acc = api.useGetAccessQuery({ accessCode: accessId })
+  const [animatedStudents, setAnimatedStudents] = useState([])
 
   const ls = api.useLessonByIdQuery(lessonId, {
     pollingInterval: 1000,
     skipPollingIfUnfocused: true,
   })
+  
+  // Устанавливаем хлебные крошки
+  useSetBreadcrumbs([
+    {
+      title: t('journal.pl.breadcrumbs.home'),
+      path: '/'
+    },
+    {
+      title: t('journal.pl.breadcrumbs.user'),
+      isCurrentPage: true
+    }
+  ])
+  
+  // Эффект для поэтапного появления карточек студентов
+  useEffect(() => {
+    if (ls.data?.body?.students?.length) {
+      // Сначала очищаем список
+      setAnimatedStudents([])
+      
+      // Затем постепенно добавляем студентов для красивой анимации
+      const students = [...ls.data.body.students]
+      const addStudentWithDelay = (index) => {
+        if (index < students.length) {
+          setAnimatedStudents(prev => [...prev, {...students[index], isNew: true}])
+          
+          // Для следующего студента
+          setTimeout(() => {
+            addStudentWithDelay(index + 1)
+          }, 100) // Уменьшенная задержка для более плавной анимации
+        }
+      }
+      
+      // Запускаем процесс добавления с небольшой задержкой для лучшего UX
+      setTimeout(() => {
+        addStudentWithDelay(0)
+      }, 300)
+    }
+  }, [ls.data?.body?.students])
+  
+  // Эффект для сброса флага "новизны" студентов
+  useEffect(() => {
+    if (animatedStudents.length > 0) {
+      const timeoutId = setTimeout(() => {
+        setAnimatedStudents(students => 
+          students.map(student => ({...student, isNew: false}))
+        )
+      }, 2000)
+      
+      return () => clearTimeout(timeoutId)
+    }
+  }, [animatedStudents])
 
   if (acc.isLoading) {
     return (
@@ -42,13 +102,30 @@ const UserPage = () => {
   }
 
   return (
-    <Container>
+    <Container maxW="container.lg" pt={4}>
-      {acc.isLoading && <h1>{t('journal.pl.common.sending')}</h1>}
+      {acc.isLoading && (
-      {acc.isSuccess && <h1>{t('journal.pl.common.success')}</h1>}
+        <Center py={4}>
+          <Spinner mr={2} />
+          <Text>{t('journal.pl.common.sending')}</Text>
+        </Center>
+      )}
+      
+      {acc.isSuccess && (
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3 }}
+        >
+          <Alert status="success" mb={4} borderRadius="lg">
+            <AlertIcon />
+            {t('journal.pl.common.success')}
+          </Alert>
+        </motion.div>
+      )}
 
       {acc.error && (
         <Box mb="6" mt="2">
-          <Alert status="warning">
+          <Alert status="warning" borderRadius="lg">
             <AlertIcon />
             {(acc as any).error?.data?.body?.errorMessage ===
             'Code is expired' ? (
@@ -60,31 +137,106 @@ const UserPage = () => {
         </Box>
       )}
 
-      <Box mb={6}>
+      <motion.div
-        <Text fontSize={18} fontWeight={600} as="h1" mt="4" mb="3">
+        initial={{ opacity: 0 }}
-          {t('journal.pl.lesson.topicTitle')} {ls.data?.body?.name}
+        animate={{ opacity: 1 }}
-        </Text>
+        transition={{ duration: 0.4 }}
-
-        <span>{dayjs(ls.data?.body?.date).format(t('journal.pl.lesson.dateFormat'))}</span>
-      </Box>
-
-      <Box
-        as="ul"
-        display="flex"
-        flexWrap="wrap"
-        justifyContent="center"
-        gap={3}
       >
-        {ls.data?.body?.students?.map((student) => (
+        <Box 
-          <UserCard
+          mb={6} 
-            width="40%"
+          p={5} 
-            wrapperAS="li"
+          borderRadius="xl" 
-            key={student.sub}
+          bg={colorMode === "light" ? "gray.50" : "gray.700"}
-            student={student}
+          boxShadow="md"
-            present
+        >
-          />
+          <Heading fontSize="xl" fontWeight={600} mb={2}>
-        ))}
+            {t('journal.pl.lesson.topicTitle')} 
-      </Box>
+            <Box as="span" ml={2} color={colorMode === "light" ? "blue.500" : "blue.300"}>
+              {ls.data?.body?.name}
+            </Box>
+          </Heading>
+
+          <Flex align="center" justify="space-between" mt={3}>
+            <Text color={colorMode === "light" ? "gray.600" : "gray.300"}>
+              {formatDate(ls.data?.body?.date, t('journal.pl.lesson.dateFormat'))}
+            </Text>
+            
+            <Badge colorScheme="green" fontSize="md" borderRadius="full" px={3} py={1}>
+              {t('journal.pl.common.people')}: {animatedStudents.length}
+            </Badge>
+          </Flex>
+        </Box>
+      </motion.div>
+
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.4, delay: 0.2 }}
+      >
+        {animatedStudents.length > 0 ? (
+          <StudentListView>
+            <AnimatePresence initial={true}>
+              {animatedStudents.map((student) => (
+                <motion.li
+                  key={student.sub}
+                  layout
+                  initial={{ opacity: 0, scale: 0.6, y: 20 }}
+                  animate={{ 
+                    opacity: 1, 
+                    scale: 1,
+                    y: 0,
+                    boxShadow: student.isNew 
+                      ? ['0 0 0 0 rgba(66, 153, 225, 0)', '0 0 20px 5px rgba(66, 153, 225, 0.7)', '0 0 0 0 rgba(66, 153, 225, 0)'] 
+                      : '0 0 0 0 rgba(0, 0, 0, 0)'
+                  }}
+                  exit={{ opacity: 0, scale: 0.6, y: 20 }}
+                  transition={{ 
+                    type: "spring", 
+                    stiffness: 300, 
+                    damping: 25,
+                    delay: 0.03 * animatedStudents.indexOf(student), // Уменьшенная задержка для более плавного появления
+                    boxShadow: {
+                      repeat: student.isNew ? 3 : 0,
+                      duration: 1.5
+                    }
+                  }}
+                >
+                  <UserCard
+                    width="100%"
+                    wrapperAS="div"
+                    student={student}
+                    present={true}
+                    recentlyPresent={student.isNew}
+                  />
+                </motion.li>
+              ))}
+            </AnimatePresence>
+          </StudentListView>
+        ) : (
+          ls.data && (
+            <Center py={10} px={5}>
+              <Box 
+                textAlign="center" 
+                p={6} 
+                borderRadius="xl" 
+                bg={colorMode === "light" ? "gray.50" : "gray.700"}
+                boxShadow="md"
+                width="100%"
+                maxWidth="500px"
+              >
+                <motion.div
+                  initial={{ scale: 0.9, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  transition={{ duration: 0.5, delay: 0.3 }}
+                >
+                  <Heading size="md" mb={4}>{t('journal.pl.lesson.noStudents')}</Heading>
+                  <Text>{t('journal.pl.lesson.waitForStudents')}</Text>
+                </motion.div>
+              </Box>
+            </Center>
+          )
+        )}
+      </motion.div>
     </Container>
   )
 }

src/utils/dayjs-config.ts

@@ -0,0 +1,30 @@
+import dayjs from 'dayjs';
+import 'dayjs/locale/ru';
+import 'dayjs/locale/en';
+import i18next from 'i18next';
+
+// Функция для обновления локали dayjs при изменении языка в i18next
+export const updateDayjsLocale = () => {
+  const currentLocale = i18next.language;
+  
+  // Убедимся, что локаль поддерживается, иначе используем 'en'
+  const locale = ['ru', 'en'].includes(currentLocale) ? currentLocale : 'en';
+  
+  // Установим локаль для dayjs
+  dayjs.locale(locale);
+};
+
+// Слушаем изменения языка и обновляем локаль dayjs
+i18next.on('languageChanged', () => {
+  updateDayjsLocale();
+});
+
+// Вызываем функцию инициализации при импорте
+updateDayjsLocale();
+
+// Хелпер для форматирования даты с учетом текущей локали
+export const formatDate = (date: string | Date | number, format = 'DD.MM.YYYY') => {
+  return dayjs(date).format(format);
+};
+
+export default dayjs; 

src/utils/time.ts

@@ -1,3 +1,3 @@
-import dayjs from "dayjs";
+import dayjs, { formatDate } from "./dayjs-config";
 
-export const dateToCalendarFormat = (date?: string) => dayjs(date).format('YYYY-MM-DDTHH:mm')
+export const dateToCalendarFormat = (date?: string) => formatDate(date, 'YYYY-MM-DDTHH:mm')

stubs/mocks/lessons/access-code/create/success.json

@@ -7,19 +7,25 @@
           "name": "ВВОДНАЯ ПО JS.ПРИМЕНЕНИЕ И СПОСОБЫ ПОДКЛЮЧЕНИЯ НА СТРАНИЦЕ. LET, CONST. БАЗОВЫЕ ТИПЫ ДАННЫХ, ПРИВЕДЕНИЕ ТИПОВ. ПЕРЕМЕННЫЕ, ОБЛАСТЬ ВИДИМОСТИ ПЕРЕМЕННЫХ",
           "students": [
               {
-                  "sub": "f62905b1-e223-40ca-910f-c8d84c6137c1",
+                "sub": "fcde3f22-d9ba-412a-a572-c59e515a290f",
-                  "email_verified": true,
+                "email_verified": true,
-                  "gravatar": "true",
+                "name": "Мария Капитанова",
-                  "name": "Александр Примаков",
+                "preferred_username": "maryaKapitan@gmail.com",
-                  "groups": [
+                "given_name": "Мария",
-                      "/inno-staff",
+                "family_name": "Капитанова",
-                      "/microfrontend-admin-user"
+                "email": "maryaKapitan@gmail.com",
-                  ],
+                "picture": "https://lh3.googleusercontent.com/a/ACg8ocJgIjjOFD2YUSyRF5kH4jaysE6X5p-kq0Cg0CFncfMi=s96-c"
-                  "preferred_username": "primakov",
+            },
-                  "given_name": "Александр",
+            {
-                  "family_name": "Примаков",
+                "sub": "8555885b-715c-4dee-a7c5-9563a6a05211",
-                  "email": "primakovpro@gmail.com"
+                "email_verified": true,
-              }
+                "name": "Евгения Жужова",
+                "preferred_username": "zhuzhova@gmail.com",
+                "given_name": "Евгения",
+                "family_name": "Жужова",
+                "email": "zhuzhova@gmail.com",
+                "picture": "https://lh3.googleusercontent.com/a/ACg8ocJUtJBAVBm642AxoGpMDDMV8CPu3MEoLjU3hmO7oisG=s96-c"
+            }
           ],
           "date": "2024-02-28T20:37:00.057Z",
           "created": "2024-02-28T20:37:00.057Z",