feat: Implement comprehensive validation system

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<ValidationResult | null>(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
             <Badge variant={getStatusColor()} className={isMobile ? "text-xs" : ""}>
               {item.status}
             </Badge>
+            <Badge variant={getValidationBadgeVariant()} className={isMobile ? "text-xs" : ""}>
+              {getValidationBadgeLabel()}
+            </Badge>
             {item.status === 'pending' && (
               <Button
                 size={isMobile ? "default" : "sm"}
@@ -88,6 +109,19 @@ export function ItemReviewCard({ item, onEdit, onStatusChange, submissionId }: I
       <CardContent className={isMobile ? "p-4 pt-0" : ""}>
         {renderItemPreview()}
         
+        {/* Validation Summary */}
+        <div className="border-t pt-4 mt-4">
+          <ValidationSummary
+            item={{
+              item_type: item.item_type,
+              item_data: item.item_data,
+              id: item.id,
+            }}
+            onValidationChange={setValidationResult}
+            compact={false}
+          />
+        </div>
+        
         {item.depends_on && (
           <div className="mt-3 pt-3 border-t">
             <p className={`text-muted-foreground ${isMobile ? 'text-xs' : 'text-xs'}`}>