diff --git a/src/components/moderation/ModerationQueue.tsx b/src/components/moderation/ModerationQueue.tsx
index 6e57c936..3fdaec8e 100644
--- a/src/components/moderation/ModerationQueue.tsx
+++ b/src/components/moderation/ModerationQueue.tsx
@@ -2,6 +2,8 @@ import { useState, useEffect, useImperativeHandle, forwardRef, useCallback, useR
 import { CheckCircle, XCircle, Filter, MessageSquare, FileText, Image, X, RefreshCw, AlertCircle, Clock, Lock, Unlock, AlertTriangle, UserCog, Zap } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { supabase } from '@/integrations/supabase/client';
@@ -1473,731 +1475,6 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
       </div>
     );
   };
-            key={item.id} 
-            className={`border-l-4 transition-opacity duration-200 ${
-              item.status === 'flagged' ? 'border-l-red-500' :
-              item.status === 'approved' ? 'border-l-green-500' :
-            item.status === 'rejected' ? 'border-l-red-400' :
-            item.status === 'partially_approved' ? 'border-l-yellow-500' :
-            'border-l-amber-500'
-          }`}
-            style={{ 
-              opacity: actionLoading === item.id ? 0.5 : 1,
-              pointerEvents: actionLoading === item.id ? 'none' : 'auto'
-            }}
-          >
-            <CardHeader className={isMobile ? "pb-3 p-4" : "pb-4"}>
-              <div className={`flex gap-3 ${isMobile ? 'flex-col' : 'items-center justify-between'}`}>
-                <div className="flex items-center gap-2 flex-wrap">
-                  <Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
-                    {item.type === 'review' ? (
-                      <>
-                        <MessageSquare className="w-3 h-3 mr-1" />
-                        Review
-                      </>
-                    ) : item.submission_type === 'photo' ? (
-                      <>
-                        <Image className="w-3 h-3 mr-1" />
-                        Photo
-                      </>
-                    ) : (
-                      <>
-                        <FileText className="w-3 h-3 mr-1" />
-                        Submission
-                      </>
-                    )}
-                  </Badge>
-                  <Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
-                    {item.status === 'partially_approved' ? 'Partially Approved' : 
-                     item.status.charAt(0).toUpperCase() + item.status.slice(1)}
-                  </Badge>
-                  {item.status === 'partially_approved' && (
-                    <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">
-                      <AlertCircle className="w-3 h-3 mr-1" />
-                      Needs Retry
-                    </Badge>
-                  )}
-                  {lockedSubmissions.has(item.id) && item.type === 'content_submission' && (
-                    <Badge variant="outline" className="bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 border-orange-300 dark:border-orange-700">
-                      <Lock className="w-3 h-3 mr-1" />
-                      Locked by Another Moderator
-                    </Badge>
-                  )}
-                  {queue.currentLock?.submissionId === item.id && item.type === 'content_submission' && (
-                    <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">
-                      <Lock className="w-3 h-3 mr-1" />
-                      Claimed by You
-                    </Badge>
-                  )}
-                </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"} />
-                  {format(new Date(item.created_at), isMobile ? 'MMM d, yyyy' : 'MMM d, yyyy HH:mm')}
-                </div>
-              </div>
-              
-              {item.user_profile && (
-                <div className={`flex items-center gap-3 ${isMobile ? 'text-xs' : 'text-sm'}`}>
-                  <Avatar className={isMobile ? "h-7 w-7" : "h-8 w-8"}>
-                    <AvatarImage src={item.user_profile.avatar_url} />
-                    <AvatarFallback className={isMobile ? "text-xs" : ""}>
-                      {(item.user_profile.display_name || item.user_profile.username)?.slice(0, 2).toUpperCase()}
-                    </AvatarFallback>
-                  </Avatar>
-                  <div>
-                    <span className="font-medium">
-                      {item.user_profile.display_name || item.user_profile.username}
-                    </span>
-                    {item.user_profile.display_name && (
-                      <span className={`text-muted-foreground block ${isMobile ? 'text-xs' : 'text-xs'}`}>
-                        @{item.user_profile.username}
-                      </span>
-                    )}
-                  </div>
-                </div>
-              )}
-            </CardHeader>
-            
-            <CardContent className={`space-y-4 ${isMobile ? 'p-4 pt-0' : ''}`}>
-              <div className={`bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4'}`}>
-                {item.type === 'review' ? (
-                  <div>
-                    {item.content.title && (
-                      <h4 className="font-semibold mb-2">{item.content.title}</h4>
-                    )}
-                    {item.content.content && (
-                      <p className="text-sm mb-2">{item.content.content}</p>
-                    )}
-                    <div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
-                      <span>Rating: {item.content.rating}/5</span>
-                    </div>
-                    
-                    {/* Entity Names for Reviews */}
-                    {(item.entity_name || item.park_name) && (
-                      <div className="space-y-1 mb-2">
-                        {item.entity_name && (
-                          <div className="text-sm text-muted-foreground">
-                            <span className="text-xs">{item.park_name ? 'Ride:' : 'Park:'} </span>
-                            <span className="text-base font-medium text-foreground">{item.entity_name}</span>
-                          </div>
-                        )}
-                        {item.park_name && (
-                          <div className="text-sm text-muted-foreground">
-                            <span className="text-xs">Park: </span>
-                            <span className="text-base font-medium text-foreground">{item.park_name}</span>
-                          </div>
-                        )}
-                      </div>
-                    )}
-                     {item.content.photos && item.content.photos.length > 0 && (
-                      <div className="mt-3">
-                        <div className="text-sm font-medium mb-2">Attached Photos:</div>
-                        <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
-                          {item.content.photos.map((photo: any, index: number) => (
-                            <div key={index} className="relative cursor-pointer" onClick={() => {
-                              setSelectedPhotos(item.content.photos.map((p: any, i: number) => ({
-                                id: `${item.id}-${i}`,
-                                url: p.url,
-                                filename: `Review photo ${i + 1}`,
-                                caption: p.caption
-                              })));
-                              setSelectedPhotoIndex(index);
-                              setPhotoModalOpen(true);
-                            }}>
-                              <img
-                                src={photo.url}
-                                alt={`Review photo ${index + 1}`}
-                                className="w-full h-20 object-cover rounded border bg-muted/30 hover:opacity-80 transition-opacity"
-                                onError={(e) => {
-                                  console.error('Failed to load review photo:', photo.url);
-                                  (e.target as HTMLImageElement).style.display = 'none';
-                                }}
-                              />
-                              <div className="absolute inset-0 flex items-center justify-center bg-black/50 text-white text-xs opacity-0 hover:opacity-100 transition-opacity rounded">
-                                <Eye className="w-4 h-4" />
-                              </div>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                ) : item.submission_type === 'photo' ? (
-                  <div>
-                    <div className="text-sm text-muted-foreground mb-3">
-                      Photo Submission
-                    </div>
-                    
-                    {/* Submission Title */}
-                    {item.content.title && (
-                      <div className="mb-3">
-                        <div className="text-sm font-medium mb-1">Title:</div>
-                        <p className="text-sm">{item.content.title}</p>
-                      </div>
-                    )}
-                    
-                    {/* Submission Caption */}
-                    {item.content.content?.caption && (
-                      <div className="mb-3">
-                        <div className="text-sm font-medium mb-1">Caption:</div>
-                        <p className="text-sm">{item.content.content.caption}</p>
-                      </div>
-                    )}
-                    
-                     {/* Photos */}
-                    {item.content.content?.photos && item.content.content.photos.length > 0 ? (
-                      <div className="space-y-4">
-                        <div className="text-sm font-medium">Photos ({item.content.content.photos.length}):</div>
-                        {item.content.content.photos.map((photo: any, index: number) => (
-                          <div key={index} className="border rounded-lg p-3 space-y-2">
-                            <div className="relative min-h-[100px] bg-muted/30 rounded border overflow-hidden cursor-pointer" onClick={() => {
-                              setSelectedPhotos(item.content.content.photos.map((p: any, i: number) => ({
-                                id: `${item.id}-${i}`,
-                                url: p.url,
-                                filename: p.filename,
-                                caption: p.caption
-                              })));
-                              setSelectedPhotoIndex(index);
-                              setPhotoModalOpen(true);
-                            }}>
-                              <img
-                                src={photo.url}
-                                alt={`Photo ${index + 1}: ${photo.filename}`}
-                                className="w-full max-h-64 object-contain rounded hover:opacity-80 transition-opacity"
-                onError={(e) => {
-                  console.error('Failed to load photo submission:', photo);
-                  const target = e.target as HTMLImageElement;
-                  target.style.display = 'none';
-                  const parent = target.parentElement;
-                  if (parent) {
-                    // Create elements safely using DOM API to prevent XSS
-                    const errorContainer = document.createElement('div');
-                    errorContainer.className = 'absolute inset-0 flex flex-col items-center justify-center text-destructive text-xs';
-                    
-                    const errorIcon = document.createElement('div');
-                    errorIcon.textContent = '⚠️ Image failed to load';
-                    
-                    const urlDisplay = document.createElement('div');
-                    urlDisplay.className = 'mt-1 font-mono text-xs break-all px-2';
-                    // Use textContent to prevent XSS - it escapes HTML automatically
-                    urlDisplay.textContent = photo.url;
-                    
-                    errorContainer.appendChild(errorIcon);
-                    errorContainer.appendChild(urlDisplay);
-                    parent.appendChild(errorContainer);
-                  }
-                }}
-                              />
-                              <div className="absolute inset-0 flex items-center justify-center bg-black/50 text-white opacity-0 hover:opacity-100 transition-opacity rounded">
-                                <Eye className="w-5 h-5" />
-                              </div>
-                            </div>
-                            <div className="space-y-1 text-xs text-muted-foreground">
-                              <div className="flex justify-between">
-                                <span className="font-medium">URL:</span>
-                                <span className="font-mono text-xs break-all">{photo.url}</span>
-                              </div>
-                              <div className="flex justify-between">
-                                <span className="font-medium">Filename:</span>
-                                <span>{photo.filename || 'Unknown'}</span>
-                              </div>
-                              <div className="flex justify-between">
-                                <span className="font-medium">Size:</span>
-                                <span>{photo.size ? `${Math.round(photo.size / 1024)} KB` : 'Unknown'}</span>
-                              </div>
-                              <div className="flex justify-between">
-                                <span className="font-medium">Type:</span>
-                                <span>{photo.type || 'Unknown'}</span>
-                              </div>
-                              {photo.caption && (
-                                <div className="pt-1">
-                                  <div className="font-medium">Caption:</div>
-                                  <div className="text-sm text-foreground mt-1">{photo.caption}</div>
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    ) : (
-                      <div className="text-sm text-muted-foreground">
-                        No photos found in submission
-                      </div>
-                    )}
-                    
-                    {/* Context Information */}
-                    {item.content.content?.context && (
-                      <div className="mt-3 pt-3 border-t text-xs text-muted-foreground">
-                        <div className="flex justify-between">
-                          <span className="font-medium">Context:</span>
-                          <span className="capitalize">
-                            {typeof item.content.content.context === 'object' 
-                              ? (item.content.content.context.ride_id ? 'ride' : 
-                                 item.content.content.context.park_id ? 'park' : 'unknown')
-                              : item.content.content.context}
-                          </span>
-                        </div>
-                        {item.entity_name && (
-                          <div className="flex justify-between">
-                            <span className="font-medium text-xs">
-                              {(typeof item.content.content.context === 'object' 
-                                ? (item.content.content.context.ride_id ? 'ride' : 'park')
-                                : item.content.content.context) === 'ride' ? 'Ride:' : 'Park:'}
-                            </span>
-                            <span className="font-medium text-foreground text-base">{item.entity_name}</span>
-                          </div>
-                        )}
-                        {item.park_name && 
-                         (typeof item.content.content.context === 'object' 
-                           ? !!item.content.content.context.ride_id 
-                           : item.content.content.context === 'ride') && (
-                          <div className="flex justify-between">
-                            <span className="font-medium text-xs">Park:</span>
-                            <span className="font-medium text-foreground text-base">{item.park_name}</span>
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                ) : (
-                  <div>
-                    {/* Composite Submissions (Ride with Manufacturer/Model) */}
-                    {(item.submission_type === 'ride_with_manufacturer' || 
-                      item.submission_type === 'ride_with_model' || 
-                      item.submission_type === 'ride_with_manufacturer_and_model') ? (
-                      <div className="space-y-4">
-                        {/* New Manufacturer Card */}
-                        {item.content.new_manufacturer && (
-                          <Card className="border-blue-300 dark:border-blue-700">
-                            <CardHeader className="pb-3">
-                              <div className="flex items-center gap-2">
-                                <Badge variant="secondary" className="bg-blue-100 dark:bg-blue-900">
-                                  New Manufacturer
-                                </Badge>
-                                <span className="font-semibold">{item.content.new_manufacturer.name}</span>
-                              </div>
-                            </CardHeader>
-                            <CardContent className="space-y-2 text-sm">
-                              {item.content.new_manufacturer.description && (
-                                <div>
-                                  <span className="font-medium">Description: </span>
-                                  <span className="text-muted-foreground">{item.content.new_manufacturer.description}</span>
-                                </div>
-                              )}
-                              <div className="grid grid-cols-2 gap-2">
-                                {item.content.new_manufacturer.person_type && (
-                                  <div>
-                                    <span className="font-medium">Type: </span>
-                                    <span className="text-muted-foreground capitalize">{item.content.new_manufacturer.person_type}</span>
-                                  </div>
-                                )}
-                                {item.content.new_manufacturer.founded_year && (
-                                  <div>
-                                    <span className="font-medium">Founded: </span>
-                                    <span className="text-muted-foreground">{item.content.new_manufacturer.founded_year}</span>
-                                  </div>
-                                )}
-                                {item.content.new_manufacturer.headquarters_location && (
-                                  <div>
-                                    <span className="font-medium">HQ: </span>
-                                    <span className="text-muted-foreground">{item.content.new_manufacturer.headquarters_location}</span>
-                                  </div>
-                                )}
-                                {item.content.new_manufacturer.website_url && (
-                                  <div>
-                                    <span className="font-medium">Website: </span>
-                                    <a href={item.content.new_manufacturer.website_url} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline text-xs">
-                                      {item.content.new_manufacturer.website_url}
-                                    </a>
-                                  </div>
-                                )}
-                              </div>
-                            </CardContent>
-                          </Card>
-                        )}
-                        
-                        {/* New Ride Model Card */}
-                        {item.content.new_ride_model && (
-                          <Card className="border-purple-300 dark:border-purple-700">
-                            <CardHeader className="pb-3">
-                              <div className="flex items-center gap-2">
-                                <Badge variant="secondary" className="bg-purple-100 dark:bg-purple-900">
-                                  New Ride Model
-                                </Badge>
-                                <span className="font-semibold">{item.content.new_ride_model.name}</span>
-                              </div>
-                            </CardHeader>
-                            <CardContent className="space-y-2 text-sm">
-                              <div>
-                                <span className="font-medium">Manufacturer: </span>
-                                <span className="text-muted-foreground">
-                                  {item.content.new_manufacturer 
-                                    ? item.content.new_manufacturer.name 
-                                    : 'Existing manufacturer'}
-                                </span>
-                              </div>
-                              <div className="grid grid-cols-2 gap-2">
-                                <div>
-                                  <span className="font-medium">Category: </span>
-                                  <span className="text-muted-foreground capitalize">{item.content.new_ride_model.category?.replace('_', ' ')}</span>
-                                </div>
-                                <div>
-                                  <span className="font-medium">Type: </span>
-                                  <span className="text-muted-foreground">{item.content.new_ride_model.ride_type}</span>
-                                </div>
-                              </div>
-                              {item.content.new_ride_model.description && (
-                                <div>
-                                  <span className="font-medium">Description: </span>
-                                  <span className="text-muted-foreground">{item.content.new_ride_model.description}</span>
-                                </div>
-                              )}
-                            </CardContent>
-                          </Card>
-                        )}
-                        
-                        {/* Ride Details Card */}
-                        <Card className="border-green-300 dark:border-green-700">
-                          <CardHeader className="pb-3">
-                            <div className="flex items-center gap-2">
-                              <Badge variant="secondary" className="bg-green-100 dark:bg-green-900">
-                                Ride
-                              </Badge>
-                              <span className="font-semibold">{item.content.ride?.name}</span>
-                            </div>
-                          </CardHeader>
-                          <CardContent className="space-y-2 text-sm">
-                            {item.content.ride?.description && (
-                              <p className="text-muted-foreground">{item.content.ride.description}</p>
-                            )}
-                            <div className="grid grid-cols-2 gap-2">
-                              {item.content.ride?.category && (
-                                <div>
-                                  <span className="font-medium">Category: </span>
-                                  <span className="text-muted-foreground capitalize">{item.content.ride.category.replace('_', ' ')}</span>
-                                </div>
-                              )}
-                              {item.content.ride?.status && (
-                                <div>
-                                  <span className="font-medium">Status: </span>
-                                  <span className="text-muted-foreground">{item.content.ride.status}</span>
-                                </div>
-                              )}
-                              {item.content.ride?.max_speed_kmh && (
-                                <div>
-                                  <span className="font-medium">Max Speed: </span>
-                                  <span className="text-muted-foreground">
-                                    <MeasurementDisplay value={item.content.ride.max_speed_kmh} type="speed" className="inline" />
-                                  </span>
-                                </div>
-                              )}
-                              {item.content.ride?.max_height_meters && (
-                                <div>
-                                  <span className="font-medium">Max Height: </span>
-                                  <span className="text-muted-foreground">
-                                    <MeasurementDisplay value={item.content.ride.max_height_meters} type="height" className="inline" />
-                                  </span>
-                                </div>
-                              )}
-                            </div>
-                          </CardContent>
-                        </Card>
-                      </div>
-                    ) : (item.submission_type === 'manufacturer' || 
-                           item.submission_type === 'designer' || 
-                           item.submission_type === 'operator' || 
-                           item.submission_type === 'property_owner' ||
-                           item.submission_type === 'park' ||
-                           item.submission_type === 'ride' ||
-                           item.submission_type === 'ride_model' ||
-                           item.submission_type === 'photo_delete' ||
-                           item.submission_type === 'photo_edit') ? (
-                      <SubmissionItemsList 
-                        submissionId={item.id}
-                        view="detailed"
-                        showImages={true}
-                      />
-                    ) : (
-                      <div className="rounded-md border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950 p-4">
-                        <div className="flex items-center gap-2 mb-2">
-                          <AlertTriangle className="h-4 w-4 text-amber-600" />
-                          <span className="font-medium text-amber-900 dark:text-amber-100">
-                            Unknown Submission Type
-                          </span>
-                        </div>
-                        <div className="text-sm text-amber-800 dark:text-amber-200 mb-2">
-                          Type: <code className="bg-amber-100 dark:bg-amber-900 px-1 py-0.5 rounded">{item.submission_type}</code>
-                        </div>
-                        {item.content?.action && (
-                          <div className="text-sm text-amber-800 dark:text-amber-200 mb-2">
-                            Action: <span className="font-medium capitalize">{item.content.action}</span>
-                          </div>
-                        )}
-                        <details className="text-sm">
-                          <summary className="cursor-pointer text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100">
-                            View raw data (for developers)
-                          </summary>
-                          <pre className="mt-2 text-xs whitespace-pre-wrap bg-amber-100 dark:bg-amber-900 p-2 rounded overflow-x-auto">
-                            {JSON.stringify(item.content, null, 2)}
-                          </pre>
-                        </details>
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-              
-              {/* Action buttons based on status */}
-              {(item.status === 'pending' || item.status === 'flagged') && (
-                <>
-                  {/* Claim button for unclaimed submissions */}
-                  {!lockedSubmissions.has(item.id) && queue.currentLock?.submissionId !== item.id && (
-                    <div className="mb-4">
-                      <Alert className="border-blue-200 bg-blue-50 dark:bg-blue-950/20">
-                        <AlertCircle className="h-4 w-4 text-blue-600" />
-                        <AlertTitle className="text-blue-900 dark:text-blue-100">Unclaimed Submission</AlertTitle>
-                        <AlertDescription className="text-blue-800 dark:text-blue-200">
-                          <div className="flex items-center justify-between mt-2">
-                            <span className="text-sm">Claim this submission to lock it for 15 minutes while you review</span>
-                            <Button
-                              onClick={async () => {
-                                await queue.claimSubmission(item.id);
-                                // No refresh needed - realtime handles it
-                              }}
-                              disabled={queue.isLoading}
-                              size="sm"
-                              className="ml-4"
-                            >
-                              <Lock className="w-4 h-4 mr-2" />
-                              Claim Submission
-                            </Button>
-                          </div>
-                        </AlertDescription>
-                      </Alert>
-                    </div>
-                  )}
-                  
-                  <div className="space-y-2">
-                    <Label htmlFor={`notes-${item.id}`}>Moderation Notes (optional)</Label>
-                    <Textarea
-                      id={`notes-${item.id}`}
-                      placeholder="Add notes about your moderation decision..."
-                      value={notes[item.id] || ''}
-                      onChange={(e) => setNotes(prev => ({ ...prev, [item.id]: e.target.value }))}
-                      onFocus={() => setInteractingWith(prev => new Set(prev).add(item.id))}
-                      onBlur={() => setInteractingWith(prev => {
-                        const next = new Set(prev);
-                        next.delete(item.id);
-                        return next;
-                      })}
-                      rows={2}
-                      disabled={lockedSubmissions.has(item.id) || queue.currentLock?.submissionId !== item.id}
-                    />
-                  </div>
-                  
-                  <div className={`flex gap-2 pt-2 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}>
-                    {/* Show Review Items button for content submissions */}
-                    {item.type === 'content_submission' && (
-                      <Button
-                        onClick={() => {
-                          setSelectedSubmissionId(item.id);
-                          setReviewManagerOpen(true);
-                        }}
-                        disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || queue.currentLock?.submissionId !== item.id}
-                        variant="outline"
-                        className={`flex-1 ${isMobile ? 'h-11' : ''}`}
-                        size={isMobile ? "default" : "default"}
-                      >
-                        <ListTree className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
-                        Review Items
-                      </Button>
-                    )}
-                    
-                    <Button
-                      onClick={() => handleModerationAction(item, 'approved', notes[item.id])}
-                      disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || queue.currentLock?.submissionId !== item.id}
-                      className={`flex-1 ${isMobile ? 'h-11' : ''}`}
-                      size={isMobile ? "default" : "default"}
-                    >
-                      <CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
-                      Approve
-                    </Button>
-                    <Button
-                      variant="destructive"
-                      onClick={() => handleModerationAction(item, 'rejected', notes[item.id])}
-                      disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || queue.currentLock?.submissionId !== item.id}
-                      className={`flex-1 ${isMobile ? 'h-11' : ''}`}
-                      size={isMobile ? "default" : "default"}
-                    >
-                      <XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
-                      Reject
-                    </Button>
-                  </div>
-                </>
-              )}
-
-              {/* Reset button for rejected items */}
-              {item.status === 'rejected' && item.type === 'content_submission' && (
-                <div className="space-y-3 pt-4 border-t bg-red-50 dark:bg-red-950/20 -mx-4 px-4 py-3 rounded-b-lg">
-                  <div className="flex items-start gap-2 text-sm text-red-800 dark:text-red-300">
-                    <AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
-                    <div>
-                      <p className="font-medium">This submission was rejected</p>
-                      <p className="text-xs mt-1">You can reset it to pending to re-review and approve it.</p>
-                    </div>
-                  </div>
-                  <Button
-                    onClick={() => handleResetToPending(item)}
-                    disabled={actionLoading === item.id}
-                    variant="outline"
-                    className="w-full"
-                  >
-                    <RefreshCw className="w-4 h-4 mr-2" />
-                    Reset to Pending
-                  </Button>
-                </div>
-              )}
-
-              {/* Retry/Reset buttons for partially approved items */}
-              {item.status === 'partially_approved' && item.type === 'content_submission' && (
-                <div className="space-y-3 pt-4 border-t bg-yellow-50 dark:bg-yellow-950/20 -mx-4 px-4 py-3 rounded-b-lg">
-                  <div className="flex items-start gap-2 text-sm text-yellow-800 dark:text-yellow-300">
-                    <AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
-                    <div>
-                      <p className="font-medium">This submission was partially approved</p>
-                      <p className="text-xs mt-1">Some items failed. You can retry them or reset everything to pending.</p>
-                    </div>
-                  </div>
-                  <div className="flex gap-2">
-                    <Button
-                      onClick={() => {
-                        setSelectedSubmissionId(item.id);
-                        setReviewManagerOpen(true);
-                      }}
-                      disabled={actionLoading === item.id}
-                      variant="outline"
-                      className="flex-1"
-                    >
-                      <ListTree className="w-4 h-4 mr-2" />
-                      Review Items
-                    </Button>
-                    <Button
-                      onClick={() => handleResetToPending(item)}
-                      disabled={actionLoading === item.id}
-                      variant="outline"
-                      className="flex-1"
-                    >
-                      <RefreshCw className="w-4 h-4 mr-2" />
-                      Reset All
-                    </Button>
-                    <Button
-                      onClick={() => handleRetryFailedItems(item)}
-                      disabled={actionLoading === item.id}
-                      className="flex-1 bg-yellow-600 hover:bg-yellow-700"
-                    >
-                      <RefreshCw className="w-4 h-4 mr-2" />
-                      Retry Failed
-                    </Button>
-                  </div>
-                </div>
-              )}
-              
-              {/* Reviewer Information for approved/rejected items */}
-              {(item.status === 'approved' || item.status === 'rejected') && (item.reviewed_at || item.reviewer_notes) && (
-                <div className="space-y-3 pt-4 border-t">
-                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                    <Calendar className="w-4 h-4" />
-                    <span>Reviewed {item.reviewed_at ? format(new Date(item.reviewed_at), 'MMM d, yyyy HH:mm') : 'recently'}</span>
-                    {item.reviewer_profile && (
-                      <>
-                        <span>by</span>
-                        <div className="flex items-center gap-2">
-                          <Avatar className="h-6 w-6">
-                            <AvatarImage src={item.reviewer_profile.avatar_url} />
-                            <AvatarFallback className="text-xs">
-                              {(item.reviewer_profile.display_name || item.reviewer_profile.username)?.slice(0, 2).toUpperCase()}
-                            </AvatarFallback>
-                          </Avatar>
-                          <span className="font-medium">
-                            {item.reviewer_profile.display_name || item.reviewer_profile.username}
-                          </span>
-                        </div>
-                      </>
-                    )}
-                  </div>
-                  
-                  {item.reviewer_notes && (
-                    <div className="bg-muted/30 p-3 rounded-lg">
-                      <p className="text-sm font-medium mb-1">Reviewer Notes:</p>
-                      <p className="text-sm text-muted-foreground">{item.reviewer_notes}</p>
-                    </div>
-                  )}
-                  
-                  {/* Reverse Decision Buttons */}
-                  <div className="space-y-2">
-                    <Label className="text-sm">Reverse Decision</Label>
-                    <Textarea
-                      placeholder="Add notes about reversing this decision..."
-                      value={notes[`reverse-${item.id}`] || ''}
-                      onChange={(e) => setNotes(prev => ({ ...prev, [`reverse-${item.id}`]: e.target.value }))}
-                      onFocus={() => setInteractingWith(prev => new Set(prev).add(item.id))}
-                      onBlur={() => setInteractingWith(prev => {
-                        const next = new Set(prev);
-                        next.delete(item.id);
-                        return next;
-                      })}
-                      rows={2}
-                    />
-                    <div className={`flex gap-2 ${isMobile ? 'flex-col' : ''}`}>
-                      {item.status === 'approved' && (
-                        <Button
-                          variant="destructive"
-                          onClick={() => handleModerationAction(item, 'rejected', notes[`reverse-${item.id}`])}
-                          disabled={actionLoading === item.id}
-                          className={`flex-1 ${isMobile ? 'h-11' : ''}`}
-                          size={isMobile ? "default" : "default"}
-                        >
-                          <XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
-                          Change to Rejected
-                        </Button>
-                      )}
-                      {item.status === 'rejected' && (
-                        <Button
-                          onClick={() => handleModerationAction(item, 'approved', notes[`reverse-${item.id}`])}
-                          disabled={actionLoading === item.id}
-                          className={`flex-1 ${isMobile ? 'h-11' : ''}`}
-                          size={isMobile ? "default" : "default"}
-                        >
-                          <CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
-                          Change to Approved
-                        </Button>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              )}
-              
-              {/* Delete button for rejected submissions (admin/superadmin only) */}
-              {item.status === 'rejected' && item.type === 'content_submission' && (isAdmin() || isSuperuser()) && (
-                <div className="pt-2">
-                  <Button
-                    variant="destructive"
-                    onClick={() => handleDeleteSubmission(item)}
-                    disabled={actionLoading === item.id}
-                    className={`w-full ${isMobile ? 'h-11' : ''}`}
-                    size={isMobile ? "default" : "default"}
-                  >
-                    <Trash2 className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
-                    Delete Submission
-                  </Button>
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-    );
-  };
 
   const clearFilters = () => {
     setActiveEntityFilter('all');