diff --git a/src/components/moderation/ItemReviewCard.tsx b/src/components/moderation/ItemReviewCard.tsx index a67f1729..e1b26265 100644 --- a/src/components/moderation/ItemReviewCard.tsx +++ b/src/components/moderation/ItemReviewCard.tsx @@ -6,6 +6,9 @@ import { type SubmissionItemWithDeps } from '@/lib/submissionItemsService'; import { useIsMobile } from '@/hooks/use-mobile'; import { PhotoSubmissionDisplay } from './PhotoSubmissionDisplay'; import { SubmissionChangesDisplay } from './SubmissionChangesDisplay'; +import { ValidationSummary } from './ValidationSummary'; +import { useState } from 'react'; +import { ValidationResult } from '@/lib/entityValidationSchemas'; interface ItemReviewCardProps { item: SubmissionItemWithDeps; @@ -16,6 +19,7 @@ interface ItemReviewCardProps { export function ItemReviewCard({ item, onEdit, onStatusChange, submissionId }: ItemReviewCardProps) { const isMobile = useIsMobile(); + const [validationResult, setValidationResult] = useState(null); const getItemIcon = () => { switch (item.item_type) { @@ -40,6 +44,20 @@ export function ItemReviewCard({ item, onEdit, onStatusChange, submissionId }: I } }; + const getValidationBadgeVariant = (): "default" | "secondary" | "destructive" | "outline" => { + if (!validationResult) return 'outline'; + if (validationResult.blockingErrors.length > 0) return 'destructive'; + if (validationResult.warnings.length > 0) return 'outline'; + return 'secondary'; + }; + + const getValidationBadgeLabel = () => { + if (!validationResult) return 'Validating...'; + if (validationResult.blockingErrors.length > 0) return '❌ Errors'; + if (validationResult.warnings.length > 0) return '⚠️ Warnings'; + return '✓ Valid'; + }; + const renderItemPreview = () => { // Use detailed view for review manager with photo detection return ( @@ -71,6 +89,9 @@ export function ItemReviewCard({ item, onEdit, onStatusChange, submissionId }: I {item.status} + + {getValidationBadgeLabel()} + {item.status === 'pending' && (