Fix validation errors and display

src/components/moderation/QueueItem.tsx

@@ -158,15 +158,17 @@ export const QueueItem = memo(({
                 Claimed by You
               </Badge>
             )}
+            {item.submission_type && (
               <ValidationSummary
                 item={{
-                  item_type: item.submission_type || 'submission',
+                  item_type: item.submission_type,
                   item_data: item.content,
                   id: item.id,
                 }}
                 compact={true}
                 onValidationChange={setValidationResult}
               />
+            )}
           </div>
           <div className={`flex items-center gap-2 text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
             <Calendar className={isMobile ? "w-3 h-3" : "w-4 h-4"} />

src/components/moderation/ValidationSummary.tsx

@@ -3,7 +3,6 @@ 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 {
@@ -25,10 +24,18 @@ export function ValidationSummary({ item, onValidationChange, compact = false }:
     async function validate() {
       setIsLoading(true);
       try {
+        console.log('Validating submission:', {
+          type: item.item_type,
+          data: item.item_data,
+          id: item.id
+        });
+        
         const result = await validateEntityData(
           item.item_type as any,
           { ...item.item_data, id: item.id }
         );
+        
+        console.log('Validation result:', result);
         setValidationResult(result);
         onValidationChange?.(result);
       } catch (error) {
@@ -73,13 +80,12 @@ export function ValidationSummary({ item, onValidationChange, compact = false }:
   const hasSuggestions = validationResult.suggestions.length > 0;
   const hasAnyIssues = hasBlockingErrors || hasWarnings || hasSuggestions;
 
-  // Compact view (for queue items)
+  // Compact view (for queue items) - NO HOVER, ALWAYS VISIBLE
   if (compact) {
     return (
-      <TooltipProvider>
+      <div className="space-y-2">
-        <Tooltip>
+        {/* Status Badges */}
-          <TooltipTrigger asChild>
+        <div className="flex items-center gap-2 flex-wrap">
-            <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" />
@@ -92,88 +98,44 @@ export function ValidationSummary({ item, onValidationChange, compact = false }:
               {validationResult.blockingErrors.length} Error{validationResult.blockingErrors.length !== 1 ? 's' : ''}
             </Badge>
           )}
-              {hasWarnings && !hasBlockingErrors && (
+          {hasWarnings && (
             <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 && (
+        {/* ALWAYS SHOW ERROR DETAILS - NO HOVER NEEDED */}
-            <TooltipContent side="right" className="max-w-md">
-              <div className="space-y-2">
         {hasBlockingErrors && (
-                  <div>
+          <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-2">
-                    <p className="font-semibold text-red-600 dark:text-red-400 text-xs mb-1">
+            <p className="text-xs font-semibold text-red-800 dark:text-red-300 mb-1">Blocking Errors:</p>
-                      Blocking Errors:
+            <ul className="text-xs space-y-0.5 text-red-700 dark:text-red-400">
-                    </p>
+              {validationResult.blockingErrors.map((error, i) => (
-                    <ul className="text-xs space-y-1">
+                <li key={i}>
-                      {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 && (
+        {hasWarnings && !hasBlockingErrors && (
-                  <div>
+          <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded p-2">
-                    <p className="font-semibold text-yellow-600 dark:text-yellow-400 text-xs mb-1">
+            <p className="text-xs font-semibold text-yellow-800 dark:text-yellow-300 mb-1">Warnings:</p>
-                      Warnings:
+            <ul className="text-xs space-y-0.5 text-yellow-700 dark:text-yellow-400">
-                    </p>
-                    <ul className="text-xs space-y-1">
               {validationResult.warnings.slice(0, 3).map((warning, i) => (
-                        <li key={i} className="text-muted-foreground">
+                <li key={i}>
                   • <span className="font-medium">{warning.field}:</span> {warning.message}
                 </li>
               ))}
               {validationResult.warnings.length > 3 && (
-                        <li className="text-muted-foreground italic">
+                <li className="italic">... and {validationResult.warnings.length - 3} more</li>
-                          ... 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>
     );
   }
 

src/lib/entityValidationSchemas.ts

@@ -21,12 +21,18 @@ export const parkValidationSchema = z.object({
     return date <= new Date();
   }, 'Opening date cannot be in the future'),
   closing_date: z.string().optional(),
-  location_id: z.string().uuid().optional(),
+  location_id: z.string().uuid().optional().nullable(),
-  website_url: z.string().url('Invalid URL format').optional().or(z.literal('')),
+  website_url: z.string().optional().refine((val) => {
+    if (!val || val === '') return true;
+    return z.string().url().safeParse(val).success;
+  }, 'Invalid URL format'),
   phone: z.string().max(50, 'Phone must be less than 50 characters').optional(),
-  email: z.string().email('Invalid email format').optional().or(z.literal('')),
+  email: z.string().optional().refine((val) => {
-  operator_id: z.string().uuid().optional(),
+    if (!val || val === '') return true;
-  property_owner_id: z.string().uuid().optional(),
+    return z.string().email().safeParse(val).success;
+  }, 'Invalid email format'),
+  operator_id: z.string().uuid().optional().nullable(),
+  property_owner_id: z.string().uuid().optional().nullable(),
   banner_image_id: z.string().optional(),
   banner_image_url: z.string().optional(),
   card_image_id: z.string().optional(),
@@ -54,8 +60,8 @@ export const rideValidationSchema = z.object({
   category: z.string().min(1, 'Category is required'),
   ride_sub_type: z.string().max(100, 'Sub type must be less than 100 characters').optional(),
   status: z.string().min(1, 'Status is required'),
-  park_id: z.string().uuid().optional(),
+  park_id: z.string().uuid().optional().nullable(),
-  designer_id: z.string().uuid().optional(),
+  designer_id: z.string().uuid().optional().nullable(),
   opening_date: z.string().optional(),
   closing_date: z.string().optional(),
   height_requirement: z.number().min(0, 'Height requirement must be positive').max(300, 'Height requirement must be less than 300cm').optional(),
@@ -66,8 +72,8 @@ export const rideValidationSchema = z.object({
   max_height_meters: z.number().min(0, 'Height must be positive').max(200, 'Height must be less than 200 meters').optional(),
   length_meters: z.number().min(0, 'Length must be positive').optional(),
   inversions: z.number().min(0, 'Inversions must be positive').optional(),
-  manufacturer_id: z.string().uuid().optional(),
+  manufacturer_id: z.string().uuid().optional().nullable(),
-  ride_model_id: z.string().uuid().optional(),
+  ride_model_id: z.string().uuid().optional().nullable(),
   coaster_type: z.string().optional(),
   seating_type: z.string().optional(),
   intensity_level: z.string().optional(),
@@ -93,7 +99,10 @@ export const companyValidationSchema = z.object({
   person_type: z.enum(['company', 'individual', 'firm', 'organization']).optional(),
   founded_year: z.number().min(1800, 'Founded year must be after 1800').max(currentYear, `Founded year cannot be in the future`).optional(),
   headquarters_location: z.string().max(200, 'Location must be less than 200 characters').optional(),
-  website_url: z.string().url('Invalid URL format').optional().or(z.literal('')),
+  website_url: z.string().optional().refine((val) => {
+    if (!val || val === '') return true;
+    return z.string().url().safeParse(val).success;
+  }, 'Invalid URL format'),
   banner_image_id: z.string().optional(),
   banner_image_url: z.string().optional(),
   card_image_id: z.string().optional(),
@@ -254,6 +263,8 @@ async function checkSlugUniqueness(
   const tableName = getTableNameFromEntityType(entityType);
   
   try {
+    console.log(`Checking slug uniqueness for "${slug}" in ${tableName}, excludeId: ${excludeId}`);
+    
     const { data, error } = await supabase
       .from(tableName as any)
       .select('id')
@@ -261,19 +272,28 @@ async function checkSlugUniqueness(
       .limit(1);
 
     if (error) {
-      console.error('Error checking slug uniqueness:', error);
+      console.error(`Slug uniqueness check failed for ${entityType}:`, error);
       return true; // Assume unique on error to avoid blocking
     }
 
-    // Check if excludeId matches
+    // If no data, slug is unique
-    if (excludeId && data && data.length > 0 && data[0]) {
+    if (!data || data.length === 0) {
-      return (data[0] as any).id === excludeId;
+      console.log(`Slug "${slug}" is unique in ${tableName}`);
+      return true;
     }
 
-    return !data || data.length === 0;
+    // If excludeId provided and matches, it's the same entity (editing)
+    if (excludeId && data[0] && (data[0] as any).id === excludeId) {
+      console.log(`Slug "${slug}" matches current entity (editing mode)`);
+      return true;
+    }
+
+    // Slug is in use by a different entity
+    console.log(`Slug "${slug}" already exists in ${tableName}`);
+    return false;
   } catch (error) {
-    console.error('Error checking slug uniqueness:', error);
+    console.error(`Exception during slug uniqueness check:`, error);
-    return true; // Assume unique on error
+    return true; // Assume unique on error to avoid false positives
   }
 }