Добавлены новые переводы для полноэкранного режима таблицы посещаемости в файлы локализации (en.json и ru.json). Обновлен компонент AttendanceTable: реализована возможность отображения таблицы в полноэкранном режиме с соответствующими кнопками и модальным окном.

locales/en.json

@@ -100,6 +100,9 @@
     "journal.pl.attendance.table.copy": "Copy Table",
     "journal.pl.attendance.table.show": "Show Table",
     "journal.pl.attendance.table.hide": "Hide Table",
+    "journal.pl.attendance.table.fullscreen": "Fullscreen",
+    "journal.pl.attendance.table.exitFullscreen": "Exit Fullscreen",
+    "journal.pl.attendance.table.attendanceData": "Attendance Data",
     "journal.pl.attendance.table.copySuccess": "Table copied",
     "journal.pl.attendance.table.copySuccessDescription": "Table data successfully copied to clipboard",
     "journal.pl.attendance.table.copyError": "Copy error",

locales/ru.json

@@ -95,6 +95,9 @@
   "journal.pl.attendance.table.copy": "Копировать таблицу",
   "journal.pl.attendance.table.show": "Показать таблицу",
   "journal.pl.attendance.table.hide": "Скрыть таблицу",
+  "journal.pl.attendance.table.fullscreen": "На весь экран",
+  "journal.pl.attendance.table.exitFullscreen": "Выйти из полноэкранного режима",
+  "journal.pl.attendance.table.attendanceData": "Данные о посещаемости",
   "journal.pl.attendance.table.copySuccess": "Таблица скопирована",
   "journal.pl.attendance.table.copySuccessDescription": "Данные таблицы успешно скопированы в буфер обмена",
   "journal.pl.attendance.table.copyError": "Ошибка копирования",

src/pages/attendance/components/AttendanceTable.tsx

@@ -17,10 +17,17 @@ import {
   Icon,
   Tooltip,
   Avatar,
-  AvatarBadge
+  AvatarBadge,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure
 } from '@chakra-ui/react'
 import { CopyIcon, ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'
-import { FaSmile, FaMeh, FaFrown, FaSadTear } from 'react-icons/fa'
+import { FaSmile, FaMeh, FaFrown, FaSadTear, FaExpand, FaCompress } from 'react-icons/fa'
 import dayjs from 'dayjs'
 import { useTranslation } from 'react-i18next'
 import { getGravatarURL } from '../../../utils/gravatar'
@@ -36,6 +43,7 @@ export const AttendanceTable: React.FC<AttendanceTableProps> = ({ data }) => {
   const toast = useToast()
   const { t } = useTranslation()
   const [showTable, setShowTable] = useState(false)
+  const { isOpen, onOpen, onClose } = useDisclosure()
 
   const getPresentColor = () => {
     return colorMode === 'dark' ? 'green.600' : 'green.100'
@@ -178,6 +186,76 @@ export const AttendanceTable: React.FC<AttendanceTableProps> = ({ data }) => {
     return <Box>{t('journal.pl.common.noData')}</Box>
   }
 
+  // Создаем компонент таблицы для переиспользования
+  const AttendanceTableContent = () => (
+    <Table variant="simple" size="sm">
+      <Thead>
+        <Tr>
+          {data.teachers?.map(teacher => (
+            <Th key={teacher.id}>{teacher.value}</Th>
+          ))}
+          <Th>{t('journal.pl.common.date')}</Th>
+          <Th>{t('journal.pl.common.lessonName')}</Th>
+          {data.students.map((student) => (
+            <Th key={student.sub}>
+              <HStack>
+                <Avatar 
+                  size="xs" 
+                  src={student.picture || getGravatarURL(student.email)} 
+                  name={student.name || student.value || t('journal.pl.common.name')} 
+                />
+                <Text>{student.name || student.value || t('journal.pl.common.name')}</Text>
+              </HStack>
+            </Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {data.attendance.map((lesson) => (
+          <Tr key={lesson.name}>
+            {data.teachers?.map((teacher) => {
+              const wasThere = Boolean(lesson.teachers) &&
+                lesson.teachers.findIndex((u) => u.sub === teacher.sub) !== -1
+              return (
+                <Td
+                  key={teacher.sub}
+                  textAlign="center"
+                  bg={wasThere ? getPresentColor() : getAbsentColor()}
+                >
+                  {wasThere ? (
+                    <Icon as={FaSmile} color="green.500" />
+                  ) : (
+                    <Icon as={FaFrown} color="red.500" />
+                  )}
+                </Td>
+              )
+            })}
+            <Td>{dayjs(lesson.date).format('DD.MM.YYYY')}</Td>
+            <Td><ShortText text={lesson.name} /></Td>
+
+            {data.students.map((st) => {
+              const wasThere =
+                lesson.students.findIndex((u) => u.sub === st.sub) !== -1
+              return (
+                <Td
+                  key={st.sub}
+                  textAlign="center"
+                  bg={wasThere ? getPresentColor() : getAbsentColor()}
+                >
+                  {wasThere ? (
+                    <Icon as={FaSmile} color="green.500" />
+                  ) : (
+                    <Icon as={FaFrown} color="red.500" />
+                  )}
+                </Td>
+              )
+            })}
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  )
+
   return (
     <Box 
       boxShadow="md" 
@@ -185,15 +263,27 @@ export const AttendanceTable: React.FC<AttendanceTableProps> = ({ data }) => {
       bg={colorMode === 'dark' ? 'gray.700' : 'white'}
     >
       <Flex justifyContent="space-between" p={3} alignItems="center">
-        <Button 
+        <Flex>
-          leftIcon={<CopyIcon />} 
+          <Button 
-          size="sm" 
+            leftIcon={<CopyIcon />} 
-          colorScheme="blue" 
+            size="sm" 
-          onClick={copyTableData}
+            colorScheme="blue" 
-          mr={2}
+            onClick={copyTableData}
-        >
+            mr={2}
-          {t('journal.pl.attendance.table.copy')}
+          >
-        </Button>
+            {t('journal.pl.attendance.table.copy')}
+          </Button>
+          
+          <Button
+            leftIcon={<Icon as={FaExpand} />}
+            size="sm"
+            colorScheme="teal"
+            onClick={onOpen}
+            mr={2}
+          >
+            {t('journal.pl.attendance.table.fullscreen')}
+          </Button>
+        </Flex>
         
         <Button
           rightIcon={showTable ? <ChevronUpIcon /> : <ChevronDownIcon />}
@@ -256,74 +346,27 @@ export const AttendanceTable: React.FC<AttendanceTableProps> = ({ data }) => {
           borderTop="1px" 
           borderColor={colorMode === 'dark' ? 'gray.600' : 'gray.200'}
         >
-          <Table variant="simple" size="sm">
+          <AttendanceTableContent />
-            <Thead>
-              <Tr>
-                {data.teachers?.map(teacher => (
-                  <Th key={teacher.id}>{teacher.value}</Th>
-                ))}
-                <Th>{t('journal.pl.common.date')}</Th>
-                <Th>{t('journal.pl.common.lessonName')}</Th>
-                {data.students.map((student) => (
-                  <Th key={student.sub}>
-                    <HStack>
-                      <Avatar 
-                        size="xs" 
-                        src={student.picture || getGravatarURL(student.email)} 
-                        name={student.name || student.value || t('journal.pl.common.name')} 
-                      />
-                      <Text>{student.name || student.value || t('journal.pl.common.name')}</Text>
-                    </HStack>
-                  </Th>
-                ))}
-              </Tr>
-            </Thead>
-            <Tbody>
-              {data.attendance.map((lesson) => (
-                <Tr key={lesson.name}>
-                  {data.teachers?.map((teacher) => {
-                    const wasThere = Boolean(lesson.teachers) &&
-                      lesson.teachers.findIndex((u) => u.sub === teacher.sub) !== -1
-                    return (
-                      <Td
-                        key={teacher.sub}
-                        textAlign="center"
-                        bg={wasThere ? getPresentColor() : getAbsentColor()}
-                      >
-                        {wasThere ? (
-                          <Icon as={FaSmile} color="green.500" />
-                        ) : (
-                          <Icon as={FaFrown} color="red.500" />
-                        )}
-                      </Td>
-                    )
-                  })}
-                  <Td>{dayjs(lesson.date).format('DD.MM.YYYY')}</Td>
-                  <Td><ShortText text={lesson.name} /></Td>
-
-                  {data.students.map((st) => {
-                    const wasThere =
-                      lesson.students.findIndex((u) => u.sub === st.sub) !== -1
-                    return (
-                      <Td
-                        key={st.sub}
-                        textAlign="center"
-                        bg={wasThere ? getPresentColor() : getAbsentColor()}
-                      >
-                        {wasThere ? (
-                          <Icon as={FaSmile} color="green.500" />
-                        ) : (
-                          <Icon as={FaFrown} color="red.500" />
-                        )}
-                      </Td>
-                    )
-                  })}
-                </Tr>
-              ))}
-            </Tbody>
-          </Table>
         </Box>
       </Collapse>
+
+      {/* Модальное окно для отображения таблицы на весь экран */}
+      <Modal isOpen={isOpen} onClose={onClose} size="full">
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>
+            <Flex justifyContent="space-between" alignItems="center">
+              {t('journal.pl.attendance.table.attendanceData')}
+            </Flex>
+          </ModalHeader>
+          <ModalCloseButton size="lg" top="16px" />
+          <ModalBody pb={6}>
+            <Box overflowX="auto">
+              <AttendanceTableContent />
+            </Box>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
     </Box>
   )
 }