feat: Implement comprehensive validation system

src/components/moderation/ValidationBlockerDialog.tsx

@@ -0,0 +1,67 @@
+import { AlertCircle } from 'lucide-react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { ValidationError } from '@/lib/entityValidationSchemas';
+
+interface ValidationBlockerDialogProps {
+  open: boolean;
+  onClose: () => void;
+  blockingErrors: ValidationError[];
+  itemNames: string[];
+}
+
+export function ValidationBlockerDialog({
+  open,
+  onClose,
+  blockingErrors,
+  itemNames,
+}: ValidationBlockerDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onClose}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="w-5 h-5" />
+            Cannot Approve: Validation Errors
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            The following items have blocking validation errors that must be fixed before approval:
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <div className="space-y-3 my-4">
+          {itemNames.map((name, index) => (
+            <div key={index} className="space-y-2">
+              <div className="font-medium text-sm">{name}</div>
+              <Alert variant="destructive">
+                <AlertDescription className="space-y-1">
+                  {blockingErrors
+                    .filter((_, i) => i === index || itemNames.length === 1)
+                    .map((error, errIndex) => (
+                      <div key={errIndex} className="text-sm">
+                        • <span className="font-medium">{error.field}:</span> {error.message}
+                      </div>
+                    ))}
+                </AlertDescription>
+              </Alert>
+            </div>
+          ))}
+        </div>
+
+        <AlertDialogFooter>
+          <AlertDialogAction onClick={onClose}>
+            Close
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}