feat: Add detailed logging to PhotoSubmissionDisplay

src/components/moderation/PhotoSubmissionDisplay.tsx

@@ -11,41 +11,80 @@ export function PhotoSubmissionDisplay({ submissionId }: PhotoSubmissionDisplayP
   const isMobile = useIsMobile();
   const [photos, setPhotos] = useState<PhotoSubmissionItem[]>([]);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     fetchPhotos();
   }, [submissionId]);
 
   const fetchPhotos = async () => {
+    console.log('🖼️ PhotoSubmissionDisplay: Starting fetch for submission:', submissionId);
+    
     try {
+      // Check user auth and roles
+      const { data: session } = await supabase.auth.getSession();
+      const userId = session?.session?.user?.id;
+      console.log('👤 Current user ID:', userId);
+      
+      if (userId) {
+        const { data: roles } = await supabase
+          .from('user_roles')
+          .select('role')
+          .eq('user_id', userId);
+        console.log('👤 Current user roles:', roles);
+      }
+
       // Step 1: Get photo_submission_id from submission_id
+      console.log('📸 Step 1: Querying photo_submissions table...');
       const { data: photoSubmission, error: photoSubmissionError } = await supabase
         .from('photo_submissions')
-        .select('id')
+        .select('id, entity_type, title')
         .eq('submission_id', submissionId)
         .maybeSingle();
 
-      if (photoSubmissionError) throw photoSubmissionError;
+      console.log('📸 Photo submission query result:', { 
+        photoSubmission, 
+        error: photoSubmissionError 
+      });
+
+      if (photoSubmissionError) {
+        console.error('❌ Error fetching photo_submission:', photoSubmissionError);
+        throw photoSubmissionError;
+      }
       
       if (!photoSubmission) {
+        console.log('⚠️ No photo_submission found for submission_id:', submissionId);
         setPhotos([]);
         setLoading(false);
         return;
       }
 
+      console.log('✅ Found photo_submission ID:', photoSubmission.id);
+
       // Step 2: Get photo items using photo_submission_id
+      console.log('🖼️ Step 2: Querying photo_submission_items table...');
       const { data, error } = await supabase
         .from('photo_submission_items')
         .select('*')
         .eq('photo_submission_id', photoSubmission.id)
         .order('order_index');
 
-      if (error) throw error;
+      console.log('🖼️ Photo items query result:', { 
+        itemCount: data?.length, 
+        error 
+      });
+
+      if (error) {
+        console.error('❌ Error fetching photo_submission_items:', error);
+        throw error;
+      }
       
       setPhotos(data || []);
-    } catch (error) {
+      console.log(`✅ Successfully loaded ${data?.length || 0} photos`);
-      console.error('Error fetching photo submission items:', error);
+    } catch (error: any) {
+      console.error('❌ PhotoSubmissionDisplay error:', error);
       setPhotos([]);
+      setError(error.message || 'Failed to load photos');
     } finally {
       setLoading(false);
     }
@@ -55,8 +94,24 @@ export function PhotoSubmissionDisplay({ submissionId }: PhotoSubmissionDisplayP
     return <div className="text-sm text-muted-foreground">Loading photos...</div>;
   }
 
+  if (error) {
+    return (
+      <div className="text-sm text-destructive">
+        Error loading photos: {error}
+        <br />
+        <span className="text-xs">Submission ID: {submissionId}</span>
+      </div>
+    );
+  }
+
   if (photos.length === 0) {
-    return <div className="text-sm text-muted-foreground">No photos found</div>;
+    return (
+      <div className="text-sm text-muted-foreground">
+        No photos found for this submission
+        <br />
+        <span className="text-xs text-muted-foreground/60">ID: {submissionId}</span>
+      </div>
+    );
   }
 
   return (