Refactor LessonDetail component to enhance student attendance display with 3D flip animation. Removed sorting to prevent reordering animation and added conditional rendering for present and not present states using Flex and Box components.

src/pages/lesson-details.tsx

@@ -11,6 +11,7 @@ import {
   Heading,
   Stack,
   useColorMode,
+  Flex,
 } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
 
@@ -202,7 +203,8 @@ const LessonDetail = () => {
       }
     }
 
-    return allStudents.sort((a, b) => (a.present ? -1 : 1))
+    // Removing the sorting to prevent reordering animation
+    return allStudents
   }, [accessCode?.body, AllStudents.data, prevPresentStudentsRef.current])
 
   // Функция для определения цвета на основе посещаемости
@@ -298,35 +300,82 @@ const LessonDetail = () => {
                   {studentsArr.map((student) => (
                     <motion.li
                       key={student.sub}
-                      layout
-                      initial={{ opacity: 0, scale: 0.8 }}
                       animate={{ 
-                        opacity: 1, 
-                        scale: 1,
-                        // Добавляем подсветку для недавно отметившихся студентов
+                        rotateY: student.present ? 0 : 180,
                         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 },
+                        rotateY: { type: "spring", stiffness: 300, damping: 20 },
                         boxShadow: {
                           repeat: student.recentlyPresent ? 3 : 0,
                           duration: 1.5
                         }
                       }}
+                      style={{ 
+                        transformStyle: "preserve-3d",
+                        perspective: "1000px"
+                      }}
                     >
-                      <UserCard
-                        wrapperAS="div"
-                        student={student}
-                        present={student.present}
-                        recentlyPresent={student.recentlyPresent}
-                        onAddUser={(user: User) => manualAdd({ lessonId, user })}
-                      />
+                      {/* Front side - visible when present */}
+                      <Box 
+                        position="relative" 
+                        width="100%" 
+                        height="100%"
+                        style={{
+                          transformStyle: "preserve-3d"
+                        }}
+                      >
+                        <Box
+                          position="absolute"
+                          top="0"
+                          left="0"
+                          width="100%"
+                          height="100%"
+                          style={{
+                            backfaceVisibility: "hidden",
+                            transform: "rotateY(0deg)",
+                            zIndex: student.present ? 1 : 0
+                          }}
+                        >
+                          <UserCard
+                            wrapperAS="div"
+                            student={student}
+                            present={student.present}
+                            recentlyPresent={student.recentlyPresent}
+                            onAddUser={(user: User) => manualAdd({ lessonId, user })}
+                          />
+                        </Box>
+                        
+                        {/* Back side - visible when not present */}
+                        <Flex
+                          position="absolute"
+                          top="0"
+                          left="0"
+                          width="100%"
+                          height="100%"
+                          bg={colorMode === "light" ? "gray.100" : "gray.600"}
+                          borderRadius="md"
+                          align="center"
+                          justify="center"
+                          p={4}
+                          style={{
+                            backfaceVisibility: "hidden",
+                            transform: "rotateY(180deg)",
+                            zIndex: student.present ? 0 : 1
+                          }}
+                        >
+                          <Box textAlign="center">
+                            <Box fontSize="sm" fontWeight="medium">
+                              {student.name || student.lastName}
+                            </Box>
+                            <Box fontSize="xs" opacity={0.8}>
+                              {t('journal.pl.lesson.notMarked')}
+                            </Box>
+                          </Box>
+                        </Flex>
+                      </Box>
                     </motion.li>
                   ))}
                 </AnimatePresence>