From e4a1fe4b23c622826f84bf0fbd0e260b7cdbfc6a Mon Sep 17 00:00:00 2001
From: Primakov Alexandr <primakovpro@gmail.com>
Date: Wed, 10 Dec 2025 00:01:24 +0300
Subject: [PATCH] Refactor submissions page to improve participant progress
 display; replace table with grid layout for better responsiveness and user
 interaction. Update data processing for participant overview and overall
 progress calculation.

---
 src/pages/submissions/SubmissionsPage.tsx | 164 +++++++++-------------
 1 file changed, 70 insertions(+), 94 deletions(-)

diff --git a/src/pages/submissions/SubmissionsPage.tsx b/src/pages/submissions/SubmissionsPage.tsx
index 58149fd..8e316e6 100644
--- a/src/pages/submissions/SubmissionsPage.tsx
+++ b/src/pages/submissions/SubmissionsPage.tsx
@@ -18,6 +18,7 @@ import {
   DialogFooter,
   DialogActionTrigger,
   Progress,
+  Grid,
   createListCollection,
 } from '@chakra-ui/react'
 import ReactMarkdown from 'react-markdown'
@@ -32,7 +33,6 @@ import type {
   SubmissionStatus,
   ChallengeTask,
   ChallengeUser,
-  ParticipantProgress,
 } from '../../types/challenge'
 
 export const SubmissionsPage: React.FC = () => {
@@ -139,27 +139,29 @@ export const SubmissionsPage: React.FC = () => {
   const hasParticipants = participants.length > 0
   const hasSelectedUser = !!selectedUserId
 
-  const participantProgressRows = stats.chainsDetailed
-    .reduce(
-      (acc, chain) => {
-        const rows = chain.participantProgress.map((participant) => ({
-          ...participant,
-          chainId: chain.chainId,
-          chainName: chain.name,
-          totalTasks: chain.totalTasks,
-        }))
+  const participantOverviewRows = participants
+    .map((participant) => {
+      const chains = participant.chainProgress || []
 
-        return acc.concat(rows)
-      },
-      [] as Array<
-        ParticipantProgress & {
-          chainId: string
-          chainName: string
-          totalTasks: number
-        }
-      >
-    )
-    .sort((a, b) => a.progressPercent - b.progressPercent)
+      const totalTasks = chains.reduce((sum, chain) => sum + (chain.totalTasks ?? 0), 0)
+      const completedTasks = chains.reduce(
+        (sum, chain) => sum + (chain.completedTasks ?? 0),
+        0
+      )
+
+      const overallPercent =
+        totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0
+
+      return {
+        userId: participant.userId,
+        nickname: participant.nickname,
+        totalSubmissions: participant.totalSubmissions,
+        completedTasks,
+        totalTasks,
+        overallPercent,
+      }
+    })
+    .sort((a, b) => a.overallPercent - b.overallPercent)
 
   return (
     <Box>
@@ -246,86 +248,60 @@ export const SubmissionsPage: React.FC = () => {
             {t('challenge.admin.submissions.overview.description')}
           </Text>
 
-          {participantProgressRows.length === 0 ? (
+          {participantOverviewRows.length === 0 ? (
             <EmptyState
               title={t('challenge.admin.detailed.stats.participants.empty')}
               description={t('challenge.admin.detailed.stats.chains.empty')}
             />
           ) : (
-            <Box
-              bg="white"
-              borderRadius="lg"
-              boxShadow="sm"
-              borderWidth="1px"
-              borderColor="gray.200"
-              overflowX="auto"
+            <Grid
+              templateColumns={{
+                base: 'repeat(1, minmax(0, 1fr))',
+                md: 'repeat(2, minmax(0, 1fr))',
+                lg: 'repeat(3, minmax(0, 1fr))',
+                xl: 'repeat(4, minmax(0, 1fr))',
+              }}
+              gap={2}
             >
-              <Table.Root size="sm">
-                <Table.Header>
-                  <Table.Row>
-                    <Table.ColumnHeader>
-                      {t('challenge.admin.submissions.overview.table.user')}
-                    </Table.ColumnHeader>
-                    <Table.ColumnHeader>
-                      {t('challenge.admin.submissions.overview.table.chain')}
-                    </Table.ColumnHeader>
-                    <Table.ColumnHeader>
-                      {t('challenge.admin.submissions.overview.table.progress')}
-                    </Table.ColumnHeader>
-                  </Table.Row>
-                </Table.Header>
-                <Table.Body>
-                  {participantProgressRows.map((row) => {
-                    const colorPalette =
-                      row.progressPercent >= 70
-                        ? 'green'
-                        : row.progressPercent >= 40
-                          ? 'orange'
-                          : 'red'
+              {participantOverviewRows.map((row) => {
+                const colorPalette =
+                  row.overallPercent >= 70
+                    ? 'green'
+                    : row.overallPercent >= 40
+                      ? 'orange'
+                      : 'red'
 
-                    return (
-                      <Table.Row
-                        key={`${row.userId}-${row.chainId}`}
-                        cursor="pointer"
-                        _hover={{ bg: 'gray.50' }}
-                        onClick={() => setSelectedUserId(row.userId)}
-                      >
-                        <Table.Cell fontWeight="medium" w="220px" maxW="220px">
-                          <Text truncate>{row.nickname}</Text>
-                        </Table.Cell>
-                        <Table.Cell w="260px" maxW="260px">
-                          <Text fontSize="sm" color="gray.700" truncate>
-                            {row.chainName}
-                          </Text>
-                          <Text fontSize="xs" color="gray.500" truncate>
-                            {t('challenge.admin.detailed.stats.chains.total.tasks')}{' '}
-                            {row.completedCount} / {row.totalTasks}
-                          </Text>
-                        </Table.Cell>
-                        <Table.Cell w="100%" minW="200px">
-                          <VStack align="stretch" gap={1}>
-                            <HStack justify="space-between">
-                              <Text fontSize="sm" color="gray.700">
-                                {row.progressPercent}%
-                              </Text>
-                            </HStack>
-                            <Progress.Root
-                              value={row.progressPercent}
-                              size="sm"
-                              colorPalette={colorPalette}
-                            >
-                              <Progress.Track>
-                                <Progress.Range />
-                              </Progress.Track>
-                            </Progress.Root>
-                          </VStack>
-                        </Table.Cell>
-                      </Table.Row>
-                    )
-                  })}
-                </Table.Body>
-              </Table.Root>
-            </Box>
+                return (
+                  <Box
+                    key={row.userId}
+                    p={2}
+                    borderWidth="1px"
+                    borderRadius="md"
+                    borderColor="gray.200"
+                    _hover={{ bg: 'gray.50' }}
+                    cursor="pointer"
+                    onClick={() => setSelectedUserId(row.userId)}
+                  >
+                    <HStack justify="space-between" mb={1} gap={2}>
+                      <Text fontSize="xs" fontWeight="medium" truncate maxW="150px">
+                        {row.nickname}
+                      </Text>
+                      <Text fontSize="xs" color="gray.500">
+                        {row.overallPercent}%
+                      </Text>
+                    </HStack>
+                    <Progress.Root value={row.overallPercent} size="xs" colorPalette={colorPalette}>
+                      <Progress.Track>
+                        <Progress.Range />
+                      </Progress.Track>
+                    </Progress.Root>
+                    <Text fontSize="xs" color="gray.500" mt={1}>
+                      {row.completedTasks} / {row.totalTasks}
+                    </Text>
+                  </Box>
+                )
+              })}
+            </Grid>
           )}
         </Box>
       ) : filteredSubmissions.length === 0 ? (