612 lines
23 KiB
TypeScript
612 lines
23 KiB
TypeScript
import React, { useState, useMemo } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useNavigate, useParams, Link } from 'react-router-dom'
|
|
import {
|
|
Box,
|
|
Heading,
|
|
Table,
|
|
Input,
|
|
Text,
|
|
Button,
|
|
HStack,
|
|
VStack,
|
|
Badge,
|
|
Progress,
|
|
Grid,
|
|
SimpleGrid,
|
|
Select,
|
|
createListCollection,
|
|
} from '@chakra-ui/react'
|
|
import { getFeatureValue } from '@brojs/cli'
|
|
import {
|
|
useGetChainsQuery,
|
|
useGetChainSubmissionsQuery,
|
|
useGetSystemStatsV2Query,
|
|
useGetUserSubmissionsQuery,
|
|
} from '../../__data__/api/api'
|
|
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
|
import { ErrorAlert } from '../../components/ErrorAlert'
|
|
import { EmptyState } from '../../components/EmptyState'
|
|
import { StatusBadge } from '../../components/StatusBadge'
|
|
import { URLs } from '../../__data__/urls'
|
|
import type {
|
|
ChallengeSubmission,
|
|
SubmissionStatus,
|
|
ChallengeTask,
|
|
ChallengeUser,
|
|
} from '../../types/challenge'
|
|
|
|
export const SubmissionsPage: React.FC = () => {
|
|
const { t } = useTranslation()
|
|
const navigate = useNavigate()
|
|
const { chainId } = useParams<{ chainId?: string }>()
|
|
|
|
// Проверяем feature flags
|
|
const featureValue = getFeatureValue('challenge-admin', 'use-chain-submissions-api')
|
|
const useNewApi = featureValue?.value === 'true'
|
|
const pollingIntervalFeatureValue = getFeatureValue(
|
|
'challenge-admin',
|
|
'submissions-polling-interval-ms'
|
|
)
|
|
const pollingIntervalMs = (() => {
|
|
const rawValue = pollingIntervalFeatureValue?.value ?? ''
|
|
const parsed = Number.parseInt(rawValue, 10)
|
|
return Number.isFinite(parsed) && parsed > 0 ? parsed : 1200
|
|
})()
|
|
|
|
// Состояние для выбранного пользователя и фильтров
|
|
const [selectedUserId, setSelectedUserId] = useState<string | null>(null)
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
const [statusFilter, setStatusFilter] = useState<SubmissionStatus | 'all'>('all')
|
|
|
|
// Получаем список цепочек
|
|
const {
|
|
data: chains,
|
|
isLoading: isChainsLoading,
|
|
error: chainsError,
|
|
refetch: refetchChains,
|
|
} = useGetChainsQuery()
|
|
|
|
// Новый API: получаем данные по цепочке через новый эндпоинт
|
|
const {
|
|
data: chainData,
|
|
isLoading: isChainDataLoading,
|
|
error: chainDataError,
|
|
refetch: refetchChainData,
|
|
} = useGetChainSubmissionsQuery(
|
|
{
|
|
chainId: chainId!,
|
|
userId: selectedUserId || undefined,
|
|
status: statusFilter !== 'all' ? statusFilter : undefined,
|
|
},
|
|
{
|
|
skip: !chainId || !useNewApi,
|
|
pollingInterval: pollingIntervalMs,
|
|
}
|
|
)
|
|
|
|
// Старый API: получаем общую статистику и submissions отдельно
|
|
const {
|
|
data: stats,
|
|
isLoading: isStatsLoading,
|
|
error: statsError,
|
|
refetch: refetchStats,
|
|
} = useGetSystemStatsV2Query(undefined, {
|
|
skip: !chainId || useNewApi,
|
|
})
|
|
|
|
const {
|
|
data: submissions,
|
|
isLoading: isSubmissionsLoading,
|
|
error: submissionsError,
|
|
refetch: refetchSubmissions,
|
|
} = useGetUserSubmissionsQuery(
|
|
{ userId: selectedUserId!, taskId: undefined },
|
|
{ skip: !selectedUserId || useNewApi }
|
|
)
|
|
|
|
const isLoading =
|
|
isChainsLoading ||
|
|
(chainId && useNewApi && isChainDataLoading) ||
|
|
(chainId && !useNewApi && isStatsLoading) ||
|
|
(selectedUserId && !useNewApi && isSubmissionsLoading)
|
|
|
|
const error = chainsError || (useNewApi ? chainDataError : statsError || submissionsError)
|
|
|
|
const handleRetry = () => {
|
|
refetchChains()
|
|
if (chainId) {
|
|
if (useNewApi) {
|
|
refetchChainData()
|
|
} else {
|
|
refetchStats()
|
|
if (selectedUserId) {
|
|
refetchSubmissions()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Получаем данные выбранной цепочки из списка chains (для старого API)
|
|
const selectedChain = useMemo(() => {
|
|
if (!chainId || !chains) return null
|
|
return chains.find((c) => c.id === chainId) || null
|
|
}, [chainId, chains])
|
|
|
|
// Получаем taskIds из текущей цепочки (для старого API)
|
|
const chainTaskIds = useMemo(() => {
|
|
if (!selectedChain) return new Set<string>()
|
|
return new Set(selectedChain.tasks.map((t) => t.id))
|
|
}, [selectedChain])
|
|
|
|
// Старый API: фильтруем участников - только те, кто имеет прогресс в этой цепочке
|
|
const chainParticipantsOld = useMemo(() => {
|
|
if (!stats?.activeParticipants || !chainId || useNewApi) return []
|
|
|
|
return stats.activeParticipants
|
|
.map((participant) => {
|
|
const chainProgress = participant.chainProgress?.find((cp) => cp.chainId === chainId)
|
|
return {
|
|
...participant,
|
|
progressPercent: chainProgress?.progressPercent ?? 0,
|
|
completedTasks: chainProgress?.completedTasks ?? 0,
|
|
totalTasks: selectedChain?.tasks.length ?? 0,
|
|
}
|
|
})
|
|
.sort((a, b) => a.progressPercent - b.progressPercent)
|
|
}, [stats?.activeParticipants, chainId, selectedChain, useNewApi])
|
|
|
|
// Старый API: фильтруем submissions только по заданиям из текущей цепочки
|
|
const filteredSubmissionsOld = useMemo(() => {
|
|
if (!submissions || chainTaskIds.size === 0 || useNewApi) return []
|
|
|
|
const normalizedSearchQuery = (searchQuery ?? '').toLowerCase()
|
|
|
|
return submissions.filter((submission) => {
|
|
const rawTask = submission.task as ChallengeTask | string | undefined
|
|
const taskId =
|
|
rawTask && typeof rawTask === 'object' && 'id' in rawTask
|
|
? rawTask.id
|
|
: typeof rawTask === 'string'
|
|
? rawTask
|
|
: ''
|
|
|
|
if (!chainTaskIds.has(taskId)) return false
|
|
|
|
const rawUser = submission.user as ChallengeUser | string | undefined
|
|
const nickname =
|
|
rawUser && typeof rawUser === 'object' && 'nickname' in rawUser
|
|
? (rawUser.nickname ?? '')
|
|
: ''
|
|
|
|
const title =
|
|
rawTask && typeof rawTask === 'object' && 'title' in rawTask
|
|
? (rawTask.title ?? '')
|
|
: ''
|
|
|
|
const matchesSearch =
|
|
nickname.toLowerCase().includes(normalizedSearchQuery) ||
|
|
title.toLowerCase().includes(normalizedSearchQuery)
|
|
|
|
const matchesStatus = statusFilter === 'all' || submission.status === statusFilter
|
|
|
|
return matchesSearch && matchesStatus
|
|
})
|
|
}, [submissions, chainTaskIds, searchQuery, statusFilter, useNewApi])
|
|
|
|
// Новый API: фильтруем submissions по поисковому запросу (статус уже отфильтрован на сервере)
|
|
const filteredSubmissionsNew = useMemo(() => {
|
|
if (!chainData?.submissions || !useNewApi) return []
|
|
|
|
const normalizedSearchQuery = (searchQuery ?? '').toLowerCase()
|
|
if (!normalizedSearchQuery) return chainData.submissions
|
|
|
|
return chainData.submissions.filter((submission) => {
|
|
const rawUser = submission.user as ChallengeUser | string | undefined
|
|
const rawTask = submission.task as ChallengeTask | string | undefined
|
|
|
|
const nickname =
|
|
rawUser && typeof rawUser === 'object' && 'nickname' in rawUser
|
|
? (rawUser.nickname ?? '')
|
|
: typeof rawUser === 'string'
|
|
? rawUser
|
|
: ''
|
|
|
|
const title =
|
|
rawTask && typeof rawTask === 'object' && 'title' in rawTask
|
|
? (rawTask.title ?? '')
|
|
: typeof rawTask === 'string'
|
|
? rawTask
|
|
: ''
|
|
|
|
return (
|
|
nickname.toLowerCase().includes(normalizedSearchQuery) ||
|
|
title.toLowerCase().includes(normalizedSearchQuery)
|
|
)
|
|
})
|
|
}, [chainData?.submissions, searchQuery, useNewApi])
|
|
|
|
// Выбираем данные в зависимости от фичи
|
|
const filteredSubmissions = useNewApi ? filteredSubmissionsNew : filteredSubmissionsOld
|
|
|
|
// Сортируем участников по прогрессу
|
|
const sortedParticipants = useMemo(() => {
|
|
if (useNewApi) {
|
|
if (!chainData?.participants) return []
|
|
return [...chainData.participants].sort((a, b) => a.progressPercent - b.progressPercent)
|
|
} else {
|
|
return chainParticipantsOld
|
|
}
|
|
}, [chainData?.participants, chainParticipantsOld, useNewApi])
|
|
|
|
const formatDate = (dateStr: string) => {
|
|
return new Date(dateStr).toLocaleString('ru-RU', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
})
|
|
}
|
|
|
|
const getCheckTime = (submission: ChallengeSubmission) => {
|
|
if (!submission.checkedAt) return '—'
|
|
const submitted = new Date(submission.submittedAt).getTime()
|
|
const checked = new Date(submission.checkedAt).getTime()
|
|
const diff = Math.round((checked - submitted) / 1000)
|
|
return t('challenge.admin.submissions.check.time', { time: diff })
|
|
}
|
|
|
|
const statusOptions = createListCollection({
|
|
items: [
|
|
{ label: t('challenge.admin.submissions.status.all'), value: 'all' },
|
|
{ label: t('challenge.admin.submissions.status.accepted'), value: 'accepted' },
|
|
{ label: t('challenge.admin.submissions.status.needs.revision'), value: 'needs_revision' },
|
|
{ label: t('challenge.admin.submissions.status.in.progress'), value: 'in_progress' },
|
|
{ label: t('challenge.admin.submissions.status.pending'), value: 'pending' },
|
|
],
|
|
})
|
|
|
|
if (isLoading) {
|
|
return <LoadingSpinner message={t('challenge.admin.submissions.loading')} />
|
|
}
|
|
|
|
if (error) {
|
|
return <ErrorAlert message={t('challenge.admin.submissions.load.error')} onRetry={handleRetry} />
|
|
}
|
|
|
|
// Если chainId не указан - показываем выбор цепочки
|
|
if (!chainId) {
|
|
return (
|
|
<Box>
|
|
<Box mb={6}>
|
|
<Heading mb={2}>{t('challenge.admin.submissions.title')}</Heading>
|
|
<Text color="gray.600" fontSize="sm">
|
|
{t('challenge.admin.submissions.select.chain')}
|
|
</Text>
|
|
</Box>
|
|
|
|
{chains && chains.length > 0 ? (
|
|
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={6}>
|
|
{chains.map((chain) => (
|
|
<Link key={chain.id} to={URLs.submissionsChain(chain.id)} style={{ textDecoration: 'none' }}>
|
|
<Box
|
|
p={6}
|
|
bg="white"
|
|
borderRadius="lg"
|
|
boxShadow="sm"
|
|
borderWidth="1px"
|
|
borderColor="gray.200"
|
|
_hover={{
|
|
boxShadow: 'md',
|
|
borderColor: 'teal.400',
|
|
transform: 'translateY(-2px)',
|
|
}}
|
|
transition="all 0.2s"
|
|
cursor="pointer"
|
|
height="100%"
|
|
>
|
|
<VStack align="start" gap={3}>
|
|
<Heading size="md" color="teal.600">
|
|
{chain.name}
|
|
</Heading>
|
|
<HStack>
|
|
<Badge colorPalette="teal" size="lg">
|
|
{chain.tasks.length} {t('challenge.admin.submissions.chain.tasks')}
|
|
</Badge>
|
|
{!chain.isActive && (
|
|
<Badge colorPalette="gray" size="lg">
|
|
{t('challenge.admin.chains.list.status.inactive')}
|
|
</Badge>
|
|
)}
|
|
</HStack>
|
|
<Text fontSize="sm" color="gray.600" mt={2}>
|
|
{t('challenge.admin.submissions.chain.click')}
|
|
</Text>
|
|
</VStack>
|
|
</Box>
|
|
</Link>
|
|
))}
|
|
</SimpleGrid>
|
|
) : (
|
|
<EmptyState
|
|
title={t('challenge.admin.submissions.no.chains.title')}
|
|
description={t('challenge.admin.submissions.no.chains.description')}
|
|
/>
|
|
)}
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
// Если цепочка выбрана но данных нет
|
|
if (useNewApi && !chainData) {
|
|
return (
|
|
<Box>
|
|
<Link to={URLs.submissions} style={{ textDecoration: 'none', color: '#319795' }}>
|
|
<Text fontSize="sm" _hover={{ textDecoration: 'underline' }} mb={4}>
|
|
← {t('challenge.admin.submissions.back.to.chains')}
|
|
</Text>
|
|
</Link>
|
|
<ErrorAlert message={t('challenge.admin.common.not.found')} onRetry={handleRetry} />
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
if (!useNewApi && !selectedChain) {
|
|
return (
|
|
<Box>
|
|
<Link to={URLs.submissions} style={{ textDecoration: 'none', color: '#319795' }}>
|
|
<Text fontSize="sm" _hover={{ textDecoration: 'underline' }} mb={4}>
|
|
← {t('challenge.admin.submissions.back.to.chains')}
|
|
</Text>
|
|
</Link>
|
|
<ErrorAlert message={t('challenge.admin.common.not.found')} onRetry={handleRetry} />
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
const chainName = useNewApi ? chainData?.chain.name : selectedChain?.name
|
|
const chainTasksCount = useNewApi ? chainData?.chain.tasks.length : selectedChain?.tasks.length
|
|
|
|
return (
|
|
<Box>
|
|
{/* Header с навигацией */}
|
|
<Box mb={6}>
|
|
<HStack gap={2} mb={2}>
|
|
<Link to={URLs.submissions} style={{ textDecoration: 'none', color: '#319795' }}>
|
|
<Text fontSize="sm" _hover={{ textDecoration: 'underline' }}>
|
|
← {t('challenge.admin.submissions.back.to.chains')}
|
|
</Text>
|
|
</Link>
|
|
</HStack>
|
|
<Heading mb={2}>{chainName}</Heading>
|
|
<Text color="gray.600" fontSize="sm">
|
|
{t('challenge.admin.submissions.chain.description', { count: chainTasksCount ?? 0 })}
|
|
</Text>
|
|
</Box>
|
|
|
|
{/* Выбор участника и фильтры */}
|
|
{sortedParticipants.length > 0 && (
|
|
<VStack mb={4} gap={3} align="stretch">
|
|
<HStack gap={4} align="center" wrap="wrap">
|
|
{selectedUserId && (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
colorPalette="teal"
|
|
onClick={() => {
|
|
setSelectedUserId(null)
|
|
setSearchQuery('')
|
|
setStatusFilter('all')
|
|
}}
|
|
>
|
|
{t('challenge.admin.submissions.filter.user.clear')}
|
|
</Button>
|
|
)}
|
|
|
|
{selectedUserId && filteredSubmissions.length > 0 && (
|
|
<>
|
|
<Input
|
|
placeholder={t('challenge.admin.submissions.search.placeholder')}
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
maxW="300px"
|
|
/>
|
|
<Select.Root
|
|
collection={statusOptions}
|
|
value={[statusFilter]}
|
|
onValueChange={(e) => setStatusFilter(e.value[0] as SubmissionStatus | 'all')}
|
|
maxW="200px"
|
|
>
|
|
<Select.Trigger>
|
|
<Select.ValueText placeholder={t('challenge.admin.submissions.filter.status')} />
|
|
</Select.Trigger>
|
|
<Select.Content>
|
|
{statusOptions.items.map((option) => (
|
|
<Select.Item key={option.value} item={option}>
|
|
{option.label}
|
|
</Select.Item>
|
|
))}
|
|
</Select.Content>
|
|
</Select.Root>
|
|
</>
|
|
)}
|
|
</HStack>
|
|
</VStack>
|
|
)}
|
|
|
|
{/* Если не выбран пользователь - показываем обзор участников */}
|
|
{!selectedUserId ? (
|
|
<Box>
|
|
<Heading size="md" mb={4}>
|
|
{t('challenge.admin.submissions.participants.title')}
|
|
</Heading>
|
|
<Text mb={4} color="gray.600">
|
|
{t('challenge.admin.submissions.participants.description')}
|
|
</Text>
|
|
|
|
{sortedParticipants.length === 0 ? (
|
|
<EmptyState
|
|
title={t('challenge.admin.submissions.participants.empty.title')}
|
|
description={t('challenge.admin.submissions.participants.empty.description')}
|
|
/>
|
|
) : (
|
|
<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={3}
|
|
>
|
|
{sortedParticipants.map((participant) => {
|
|
const colorPalette =
|
|
participant.progressPercent >= 70
|
|
? 'green'
|
|
: participant.progressPercent >= 40
|
|
? 'orange'
|
|
: 'red'
|
|
|
|
return (
|
|
<Box
|
|
key={participant.userId}
|
|
p={3}
|
|
borderWidth="1px"
|
|
borderRadius="md"
|
|
borderColor="gray.200"
|
|
bg="white"
|
|
_hover={{ bg: 'gray.50', borderColor: 'teal.300' }}
|
|
cursor="pointer"
|
|
onClick={() => setSelectedUserId(participant.userId)}
|
|
transition="all 0.2s"
|
|
>
|
|
<HStack justify="space-between" mb={2} gap={2}>
|
|
<VStack align="start" gap={0}>
|
|
{participant.workplaceNumber && (
|
|
<Text fontSize="xs" color="gray.500">
|
|
{participant.workplaceNumber}
|
|
</Text>
|
|
)}
|
|
<Text fontSize="sm" fontWeight="medium" truncate maxW="180px">
|
|
{participant.nickname}
|
|
</Text>
|
|
</VStack>
|
|
<Badge colorPalette={colorPalette} size="sm">
|
|
{participant.progressPercent}%
|
|
</Badge>
|
|
</HStack>
|
|
<Progress.Root value={participant.progressPercent} size="sm" colorPalette={colorPalette}>
|
|
<Progress.Track>
|
|
<Progress.Range />
|
|
</Progress.Track>
|
|
</Progress.Root>
|
|
<HStack justify="space-between" mt={2}>
|
|
<Text fontSize="xs" color="gray.500">
|
|
{participant.completedTasks} / {participant.totalTasks}
|
|
</Text>
|
|
<Text fontSize="xs" color="gray.400">
|
|
{t('challenge.admin.submissions.participants.click.to.view')}
|
|
</Text>
|
|
</HStack>
|
|
</Box>
|
|
)
|
|
})}
|
|
</Grid>
|
|
)}
|
|
</Box>
|
|
) : filteredSubmissions.length === 0 ? (
|
|
<EmptyState
|
|
title={t('challenge.admin.submissions.search.empty.title')}
|
|
description={t('challenge.admin.submissions.search.empty.description')}
|
|
/>
|
|
) : (
|
|
/* Таблица попыток выбранного пользователя */
|
|
<Box bg="white" borderRadius="lg" boxShadow="sm" borderWidth="1px" borderColor="gray.200" overflowX="auto">
|
|
<Table.Root size="sm">
|
|
<Table.Header>
|
|
<Table.Row>
|
|
<Table.ColumnHeader>{t('challenge.admin.submissions.table.user')}</Table.ColumnHeader>
|
|
<Table.ColumnHeader>{t('challenge.admin.submissions.table.workplace')}</Table.ColumnHeader>
|
|
<Table.ColumnHeader>{t('challenge.admin.submissions.table.task')}</Table.ColumnHeader>
|
|
<Table.ColumnHeader>{t('challenge.admin.submissions.table.status')}</Table.ColumnHeader>
|
|
<Table.ColumnHeader>{t('challenge.admin.submissions.table.attempt')}</Table.ColumnHeader>
|
|
<Table.ColumnHeader>{t('challenge.admin.submissions.table.submitted')}</Table.ColumnHeader>
|
|
<Table.ColumnHeader>{t('challenge.admin.submissions.table.check.time')}</Table.ColumnHeader>
|
|
<Table.ColumnHeader textAlign="right">
|
|
{t('challenge.admin.submissions.table.actions')}
|
|
</Table.ColumnHeader>
|
|
</Table.Row>
|
|
</Table.Header>
|
|
<Table.Body>
|
|
{filteredSubmissions.map((submission) => {
|
|
const rawUser = submission.user as ChallengeUser | string | undefined
|
|
const rawTask = submission.task as ChallengeTask | string | undefined
|
|
|
|
const nickname =
|
|
rawUser && typeof rawUser === 'object' && 'nickname' in rawUser
|
|
? (rawUser.nickname ?? '')
|
|
: typeof rawUser === 'string'
|
|
? rawUser
|
|
: ''
|
|
|
|
const workplaceNumber =
|
|
rawUser && typeof rawUser === 'object' && 'workplaceNumber' in rawUser
|
|
? rawUser.workplaceNumber ?? ''
|
|
: ''
|
|
|
|
const title =
|
|
rawTask && typeof rawTask === 'object' && 'title' in rawTask
|
|
? (rawTask.title ?? '')
|
|
: typeof rawTask === 'string'
|
|
? rawTask
|
|
: ''
|
|
|
|
return (
|
|
<Table.Row key={submission.id}>
|
|
<Table.Cell fontWeight="medium">{nickname}</Table.Cell>
|
|
<Table.Cell>
|
|
<Text fontSize="sm" color="gray.600">
|
|
{workplaceNumber || '—'}
|
|
</Text>
|
|
</Table.Cell>
|
|
<Table.Cell>{title}</Table.Cell>
|
|
<Table.Cell>
|
|
<StatusBadge status={submission.status} />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Text fontSize="sm" color="gray.600">
|
|
#{submission.attemptNumber}
|
|
</Text>
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Text fontSize="sm" color="gray.600">
|
|
{formatDate(submission.submittedAt)}
|
|
</Text>
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Text fontSize="sm" color="gray.600">
|
|
{getCheckTime(submission)}
|
|
</Text>
|
|
</Table.Cell>
|
|
<Table.Cell textAlign="right">
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
colorPalette="teal"
|
|
onClick={() => navigate(URLs.submissionDetails(chainId!, selectedUserId, submission.id))}
|
|
>
|
|
{t('challenge.admin.submissions.button.details')}
|
|
</Button>
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
)
|
|
})}
|
|
</Table.Body>
|
|
</Table.Root>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
)
|
|
}
|