diff --git a/src/components/moderation/QueueItem.tsx b/src/components/moderation/QueueItem.tsx index 19824db5..94ec3499 100644 --- a/src/components/moderation/QueueItem.tsx +++ b/src/components/moderation/QueueItem.tsx @@ -1,4 +1,4 @@ -import { memo } from 'react'; +import { memo, useState } from 'react'; import { CheckCircle, XCircle, Eye, Calendar, MessageSquare, FileText, Image, ListTree, RefreshCw, AlertCircle, Lock, Trash2, AlertTriangle } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; @@ -41,6 +41,7 @@ interface ModerationItem { } import { ValidationSummary } from './ValidationSummary'; +import type { ValidationResult } from '@/lib/entityValidationSchemas'; interface QueueItemProps { item: ModerationItem; @@ -96,10 +97,13 @@ export const QueueItem = memo(({ onInteractionFocus, onInteractionBlur }: QueueItemProps) => { + const [validationResult, setValidationResult] = useState(null); + return ( 0 ? 'border-l-red-600' : item.status === 'flagged' ? 'border-l-red-500' : item.status === 'approved' ? 'border-l-green-500' : item.status === 'rejected' ? 'border-l-red-400' : @@ -154,14 +158,15 @@ export const QueueItem = memo(({ Claimed by You )} - +
diff --git a/src/components/moderation/ValidationSummary.tsx b/src/components/moderation/ValidationSummary.tsx index 6785172b..361b18c4 100644 --- a/src/components/moderation/ValidationSummary.tsx +++ b/src/components/moderation/ValidationSummary.tsx @@ -3,6 +3,7 @@ import { AlertCircle, CheckCircle, Info, AlertTriangle } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; import { validateEntityData, ValidationResult } from '@/lib/entityValidationSchemas'; interface ValidationSummaryProps { @@ -47,6 +48,13 @@ export function ValidationSummary({ item, onValidationChange, compact = false }: validate(); }, [item.item_type, item.item_data, item.id, onValidationChange]); + // Auto-expand when there are blocking errors or warnings + useEffect(() => { + if (validationResult && (validationResult.blockingErrors.length > 0 || validationResult.warnings.length > 0)) { + setIsExpanded(true); + } + }, [validationResult]); + if (isLoading) { return (
@@ -68,32 +76,104 @@ export function ValidationSummary({ item, onValidationChange, compact = false }: // Compact view (for queue items) if (compact) { return ( -
- {validationResult.isValid && !hasWarnings && !hasSuggestions && ( - - - Valid - - )} - {hasBlockingErrors && ( - - - {validationResult.blockingErrors.length} Error{validationResult.blockingErrors.length !== 1 ? 's' : ''} - - )} - {hasWarnings && !hasBlockingErrors && ( - - - {validationResult.warnings.length} Warning{validationResult.warnings.length !== 1 ? 's' : ''} - - )} - {hasSuggestions && !hasBlockingErrors && !hasWarnings && ( - - - {validationResult.suggestions.length} Suggestion{validationResult.suggestions.length !== 1 ? 's' : ''} - - )} -
+ + + +
+ {validationResult.isValid && !hasWarnings && !hasSuggestions && ( + + + Valid + + )} + {hasBlockingErrors && ( + + + {validationResult.blockingErrors.length} Error{validationResult.blockingErrors.length !== 1 ? 's' : ''} + + )} + {hasWarnings && !hasBlockingErrors && ( + + + {validationResult.warnings.length} Warning{validationResult.warnings.length !== 1 ? 's' : ''} + + )} + {hasSuggestions && !hasBlockingErrors && !hasWarnings && ( + + + {validationResult.suggestions.length} Suggestion{validationResult.suggestions.length !== 1 ? 's' : ''} + + )} +
+
+ + {hasAnyIssues && ( + +
+ {hasBlockingErrors && ( +
+

+ Blocking Errors: +

+
    + {validationResult.blockingErrors.slice(0, 3).map((error, i) => ( +
  • + • {error.field}: {error.message} +
  • + ))} + {validationResult.blockingErrors.length > 3 && ( +
  • + ... and {validationResult.blockingErrors.length - 3} more +
  • + )} +
+
+ )} + + {hasWarnings && ( +
+

+ Warnings: +

+
    + {validationResult.warnings.slice(0, 3).map((warning, i) => ( +
  • + • {warning.field}: {warning.message} +
  • + ))} + {validationResult.warnings.length > 3 && ( +
  • + ... and {validationResult.warnings.length - 3} more +
  • + )} +
+
+ )} + + {hasSuggestions && !hasBlockingErrors && !hasWarnings && ( +
+

+ Suggestions: +

+
    + {validationResult.suggestions.slice(0, 3).map((suggestion, i) => ( +
  • + • {suggestion.field}: {suggestion.message} +
  • + ))} + {validationResult.suggestions.length > 3 && ( +
  • + ... and {validationResult.suggestions.length - 3} more +
  • + )} +
+
+ )} +
+
+ )} +
+
); }