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.
This commit is contained in:
@@ -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 ? (
|
||||
|
||||
Reference in New Issue
Block a user