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>
|
||
)
|
||
}
|