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

@@ -37,6 +37,7 @@ interface QueueItemProps {
isSuperuser: boolean;
queueIsLoading: boolean;
isInitialRender?: boolean;
transactionStatuses?: Record<string, { status: 'idle' | 'processing' | 'timeout' | 'cached' | 'completed' | 'failed'; message?: string }>;
onNoteChange: (id: string, value: string) => void;
onApprove: (item: ModerationItem, action: 'approved' | 'rejected', notes?: string) => void;
onResetToPending: (item: ModerationItem) => void;
@@ -65,6 +66,7 @@ export const QueueItem = memo(({
isSuperuser,
queueIsLoading,
isInitialRender = false,
transactionStatuses,
onNoteChange,
onApprove,
onResetToPending,
@@ -82,6 +84,11 @@ export const QueueItem = memo(({
const [isClaiming, setIsClaiming] = useState(false);
const [showRawData, setShowRawData] = useState(false);
// Get transaction status from props or default to idle
const transactionState = transactionStatuses?.[item.id] || { status: 'idle' as const };
const transactionStatus = transactionState.status;
const transactionMessage = transactionState.message;
// Fetch relational photo data for photo submissions
const { photos: photoItems, loading: photosLoading } = usePhotoSubmissionItems(
item.submission_type === 'photo' ? item.id : undefined
@@ -145,6 +152,8 @@ export const QueueItem = memo(({
isLockedByOther={isLockedByOther}
currentLockSubmissionId={currentLockSubmissionId}
validationResult={validationResult}
transactionStatus={transactionStatus}
transactionMessage={transactionMessage}
onValidationChange={handleValidationChange}
onViewRawData={() => setShowRawData(true)}
/>