Обновлены компоненты для учета только прошедших лекций в статистике посещаемости. Добавлено мобильное отображение в компонентах LessonItems и Item, улучшена логика фильтрации лекций. Реализовано отображение QR-кода с учетом темы оформления.

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

@@ -11,6 +11,11 @@ import {
   MenuItem,
   MenuList,
   useToast,
+  Flex,
+  Text,
+  useColorMode,
+  Box,
+  Image,
 } from '@chakra-ui/react'
 import { EditIcon } from '@chakra-ui/icons'
 import { useTranslation } from 'react-i18next'
@@ -32,6 +37,7 @@ type ItemProps = {
   setlessonToDelete(): void
   setEditLesson?: () => void
   students: unknown[]
+  isMobile?: boolean
 }
 
 export const Item: React.FC<ItemProps> = ({
@@ -43,6 +49,7 @@ export const Item: React.FC<ItemProps> = ({
   setlessonToDelete,
   setEditLesson,
   students,
+  isMobile = false,
 }) => {
   const [edit, setEdit] = useState(false)
   const toastRef = useRef(null)
@@ -50,6 +57,23 @@ export const Item: React.FC<ItemProps> = ({
   const [updateLesson, updateLessonRqst] = api.useUpdateLessonMutation()
   const createdLessonRef = useRef(null)
   const { t } = useTranslation()
+  const { colorMode } = useColorMode()
+
+  // QR-код с применением фильтра инверсии для тёмной темы
+  const QRCodeImage = () => (
+    <Box 
+      display="flex" 
+      justifyContent="center"
+      filter={colorMode === 'dark' ? 'invert(1)' : 'none'}
+    >
+      <img 
+        width={isMobile ? 20 : 24} 
+        src={qrCode} 
+        alt="QR код" 
+        style={{ margin: '0 auto' }}
+      />
+    </Box>
+  )
 
   const onSubmit = (lessonData) => {
     toastRef.current = toast({
@@ -104,6 +128,58 @@ export const Item: React.FC<ItemProps> = ({
     )
   }
 
+  if (isMobile) {
+    return (
+      <>
+        <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>
+        </Flex>
+        
+        <Flex justify="space-between" align="center">
+          {isTeacher && (
+            <Link
+              to={`${getNavigationValue('journal.main')}/lesson/${courseId}/${id}`}
+              style={{ display: 'flex' }}
+            >
+              <QRCodeImage />
+            </Link>
+          )}
+          
+          <Flex align="center">
+            <Text fontSize="sm" mr={2}>
+              {t('journal.pl.common.marked')}: {students.length}
+            </Text>
+            
+            {isTeacher && !edit && (
+              <Menu>
+                <MenuButton as={Button} size="sm">
+                  <EditIcon />
+                </MenuButton>
+                <MenuList>
+                  <MenuItem
+                    onClick={() => {
+                      if (setEditLesson) {
+                        setEditLesson();
+                      } else {
+                        setEdit(true);
+                      }
+                    }}
+                  >
+                    {t('journal.pl.edit')}
+                  </MenuItem>
+                  <MenuItem onClick={setlessonToDelete}>{t('journal.pl.delete')}</MenuItem>
+                </MenuList>
+              </Menu>
+            )}
+            {edit && <Button size="sm" onClick={setlessonToDelete}>{t('journal.pl.save')}</Button>}
+          </Flex>
+        </Flex>
+      </>
+    )
+  }
+
+  // Стандартное отображение
   return (
     <Tr>
       {isTeacher && (
@@ -112,7 +188,7 @@ export const Item: React.FC<ItemProps> = ({
             to={`${getNavigationValue('journal.main')}/lesson/${courseId}/${id}`}
             style={{ display: 'flex' }}
           >
-            <img width={24} src={qrCode} style={{ margin: '0 auto' }} />
+            <QRCodeImage />
           </Link>
         </Td>
       )}