Add transaction status indicators to moderation UI

Implement visual indicators in the moderation queue and review manager to display the status of ongoing transactions. This includes states for processing, timeout, and cached results, providing users with clearer feedback on the system's activity.
This commit is contained in:
gpt-engineer-app[bot]
2025-11-07 16:07:48 +00:00
parent b917232220
commit e4bcad9680
5 changed files with 238 additions and 4 deletions

View File

@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button';
import { UserAvatar } from '@/components/ui/user-avatar';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { ValidationSummary } from '../ValidationSummary';
import { TransactionStatusIndicator, type TransactionStatus } from '../TransactionStatusIndicator';
import { format } from 'date-fns';
import type { ModerationItem } from '@/types/moderation';
import type { ValidationResult } from '@/lib/entityValidationSchemas';
@@ -16,6 +17,8 @@ interface QueueItemHeaderProps {
isLockedByOther: boolean;
currentLockSubmissionId?: string;
validationResult: ValidationResult | null;
transactionStatus?: TransactionStatus;
transactionMessage?: string;
onValidationChange: (result: ValidationResult) => void;
onViewRawData?: () => void;
}
@@ -38,6 +41,8 @@ export const QueueItemHeader = memo(({
isLockedByOther,
currentLockSubmissionId,
validationResult,
transactionStatus = 'idle',
transactionMessage,
onValidationChange,
onViewRawData
}: QueueItemHeaderProps) => {
@@ -105,6 +110,11 @@ export const QueueItemHeader = memo(({
Claimed by You
</Badge>
)}
<TransactionStatusIndicator
status={transactionStatus}
message={transactionMessage}
showLabel={!isMobile}
/>
{item.submission_items && item.submission_items.length > 0 && item.submission_items[0].item_data && (
<ValidationSummary
item={{