pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-23 16:51:14 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Improve validation visibility in moderation queue

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-09 20:31:47 +00:00
parent 37daceff75
commit d09e62410f
2 changed files with 120 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/components/moderation/ValidationSummary.tsx
View File

@@ -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 (
<div className="flex items-center gap-2 text-sm text-muted-foreground">
@@ -68,32 +76,104 @@ export function ValidationSummary({ item, onValidationChange, compact = false }:
// Compact view (for queue items)
if (compact) {
return (
<div className="flex items-center gap-2">
{validationResult.isValid && !hasWarnings && !hasSuggestions && (
<Badge variant="secondary" className="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-300 dark:border-green-700">
<CheckCircle className="w-3 h-3 mr-1" />
Valid
</Badge>
)}
{hasBlockingErrors && (
<Badge variant="destructive">
<AlertCircle className="w-3 h-3 mr-1" />
{validationResult.blockingErrors.length} Error{validationResult.blockingErrors.length !== 1 ? 's' : ''}
</Badge>
)}
{hasWarnings && !hasBlockingErrors && (
<Badge variant="outline" className="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700">
<AlertTriangle className="w-3 h-3 mr-1" />
{validationResult.warnings.length} Warning{validationResult.warnings.length !== 1 ? 's' : ''}
</Badge>
)}
{hasSuggestions && !hasBlockingErrors && !hasWarnings && (
<Badge variant="outline" className="bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-300 dark:border-blue-700">
<Info className="w-3 h-3 mr-1" />
{validationResult.suggestions.length} Suggestion{validationResult.suggestions.length !== 1 ? 's' : ''}
</Badge>
)}
</div>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-2 cursor-help">
{validationResult.isValid && !hasWarnings && !hasSuggestions && (
<Badge variant="secondary" className="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-300 dark:border-green-700">
<CheckCircle className="w-3 h-3 mr-1" />
Valid
</Badge>
)}
{hasBlockingErrors && (
<Badge variant="destructive">
<AlertCircle className="w-3 h-3 mr-1" />
{validationResult.blockingErrors.length} Error{validationResult.blockingErrors.length !== 1 ? 's' : ''}
</Badge>
)}
{hasWarnings && !hasBlockingErrors && (
<Badge variant="outline" className="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700">
<AlertTriangle className="w-3 h-3 mr-1" />
{validationResult.warnings.length} Warning{validationResult.warnings.length !== 1 ? 's' : ''}
</Badge>
)}
{hasSuggestions && !hasBlockingErrors && !hasWarnings && (
<Badge variant="outline" className="bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-300 dark:border-blue-700">
<Info className="w-3 h-3 mr-1" />
{validationResult.suggestions.length} Suggestion{validationResult.suggestions.length !== 1 ? 's' : ''}
</Badge>
)}
</div>
</TooltipTrigger>
{hasAnyIssues && (
<TooltipContent side="right" className="max-w-md">
<div className="space-y-2">
{hasBlockingErrors && (
<div>
<p className="font-semibold text-red-600 dark:text-red-400 text-xs mb-1">
Blocking Errors:
</p>
<ul className="text-xs space-y-1">
{validationResult.blockingErrors.slice(0, 3).map((error, i) => (
<li key={i} className="text-muted-foreground">
• <span className="font-medium">{error.field}:</span> {error.message}
</li>
))}
{validationResult.blockingErrors.length > 3 && (
<li className="text-muted-foreground italic">
... and {validationResult.blockingErrors.length - 3} more
</li>
)}
</ul>
</div>
)}
{hasWarnings && (
<div>
<p className="font-semibold text-yellow-600 dark:text-yellow-400 text-xs mb-1">
Warnings:
</p>
<ul className="text-xs space-y-1">
{validationResult.warnings.slice(0, 3).map((warning, i) => (
<li key={i} className="text-muted-foreground">
• <span className="font-medium">{warning.field}:</span> {warning.message}
</li>
))}
{validationResult.warnings.length > 3 && (
<li className="text-muted-foreground italic">
... and {validationResult.warnings.length - 3} more
</li>
)}
</ul>
</div>
)}
{hasSuggestions && !hasBlockingErrors && !hasWarnings && (
<div>
<p className="font-semibold text-blue-600 dark:text-blue-400 text-xs mb-1">
Suggestions:
</p>
<ul className="text-xs space-y-1">
{validationResult.suggestions.slice(0, 3).map((suggestion, i) => (
<li key={i} className="text-muted-foreground">
• <span className="font-medium">{suggestion.field}:</span> {suggestion.message}
</li>
))}
{validationResult.suggestions.length > 3 && (
<li className="text-muted-foreground italic">
... and {validationResult.suggestions.length - 3} more
</li>
)}
</ul>
</div>
)}
</div>
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
);
}