Fix flashing and bouncing on admin page

src/components/moderation/ModerationQueue.tsx

@@ -1,24 +1,17 @@
 import { useState, useEffect, useImperativeHandle, forwardRef, useCallback, useRef } from 'react';
-import { CheckCircle, XCircle, Eye, Calendar, User, Filter, MessageSquare, FileText, Image, X, Trash2, ListTree, RefreshCw, AlertCircle, Clock, Lock, Unlock, AlertTriangle, UserCog, Zap } from 'lucide-react';
+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, CardHeader } from '@/components/ui/card';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Textarea } from '@/components/ui/textarea';
-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';
 import { useToast } from '@/hooks/use-toast';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAuth } from '@/hooks/useAuth';
-import { format, formatDistance } from 'date-fns';
+import { formatDistance } from 'date-fns';
 import { PhotoModal } from './PhotoModal';
 import { SubmissionReviewManager } from './SubmissionReviewManager';
 import { useIsMobile } from '@/hooks/use-mobile';
-import { SubmissionChangesDisplay } from './SubmissionChangesDisplay';
-import { SubmissionItemsList } from './SubmissionItemsList';
-import { MeasurementDisplay } from '@/components/ui/measurement-display';
 import { useAdminSettings } from '@/hooks/useAdminSettings';
 import { useModerationQueue } from '@/hooks/useModerationQueue';
 import { Progress } from '@/components/ui/progress';
@@ -27,6 +20,7 @@ import { EscalationDialog } from './EscalationDialog';
 import { ReassignDialog } from './ReassignDialog';
 import { smartMergeArray } from '@/lib/smartStateUpdate';
 import { useDebounce } from '@/hooks/useDebounce';
+import { QueueItem } from './QueueItem';
 
 interface ModerationItem {
   id: string;
@@ -816,10 +810,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
         description: `Processed ${failedItems.length} failed item(s)`,
       });
 
-      // Silent cleanup after delay
-      setTimeout(() => {
-        fetchItems(activeEntityFilter, activeStatusFilter, true);
-      }, 2000);
+      // No refresh needed - item already updated optimistically
     } catch (error: any) {
       console.error('Error retrying failed items:', error);
       toast({
@@ -1404,6 +1395,34 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
     }
   };
 
+  // Memoized callbacks
+  const handleNoteChange = useCallback((id: string, value: string) => {
+    setNotes(prev => ({ ...prev, [id]: value }));
+  }, []);
+
+  const handleOpenPhotos = useCallback((photos: any[], index: number) => {
+    setSelectedPhotos(photos);
+    setSelectedPhotoIndex(index);
+    setPhotoModalOpen(true);
+  }, []);
+
+  const handleOpenReviewManager = useCallback((id: string) => {
+    setSelectedSubmissionId(id);
+    setReviewManagerOpen(true);
+  }, []);
+
+  const handleInteractionFocus = useCallback((id: string) => {
+    setInteractingWith(prev => new Set(prev).add(id));
+  }, []);
+
+  const handleInteractionBlur = useCallback((id: string) => {
+    setInteractingWith(prev => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+
   const QueueContent = () => {
     if (isInitialLoad && loading) {
       return (
@@ -1428,7 +1447,32 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
     return (
       <div className="space-y-6">
         {items.map((item) => (
-          <Card 
+          <QueueItem
+            key={item.id}
+            item={item}
+            isMobile={isMobile}
+            actionLoading={actionLoading}
+            lockedSubmissions={lockedSubmissions}
+            currentLockSubmissionId={queue.currentLock?.submissionId}
+            notes={notes}
+            isAdmin={isAdmin()}
+            isSuperuser={isSuperuser()}
+            queueIsLoading={queue.isLoading}
+            onNoteChange={handleNoteChange}
+            onApprove={handleModerationAction}
+            onResetToPending={handleResetToPending}
+            onRetryFailed={handleRetryFailedItems}
+            onOpenPhotos={handleOpenPhotos}
+            onOpenReviewManager={handleOpenReviewManager}
+            onClaimSubmission={(id) => queue.claimSubmission(id)}
+            onDeleteSubmission={handleDeleteSubmission}
+            onInteractionFocus={handleInteractionFocus}
+            onInteractionBlur={handleInteractionBlur}
+          />
+        ))}
+      </div>
+    );
+  };
             key={item.id} 
             className={`border-l-4 transition-opacity duration-200 ${
               item.status === 'flagged' ? 'border-l-red-500' :
@@ -2424,10 +2468,8 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
           open={reviewManagerOpen}
           onOpenChange={setReviewManagerOpen}
           onComplete={() => {
-            // Silent cleanup after delay
-            setTimeout(() => {
-              fetchItems(activeEntityFilter, activeStatusFilter, true);
-            }, 2000);
+            // No refresh needed - item was removed optimistically
+            setReviewManagerOpen(false);
           }}
         />
       )}

src/components/moderation/QueueItem.tsx

@@ -0,0 +1,637 @@
+import { memo } from 'react';
+import { CheckCircle, XCircle, Eye, Calendar, MessageSquare, FileText, Image, ListTree, RefreshCw, AlertCircle, Lock, Trash2, AlertTriangle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { format } from 'date-fns';
+import { SubmissionItemsList } from './SubmissionItemsList';
+import { MeasurementDisplay } from '@/components/ui/measurement-display';
+
+interface ModerationItem {
+  id: string;
+  type: 'review' | 'content_submission';
+  content: any;
+  created_at: string;
+  updated_at?: string;
+  user_id: string;
+  status: string;
+  submission_type?: string;
+  user_profile?: {
+    username: string;
+    display_name?: string;
+    avatar_url?: string;
+  };
+  entity_name?: string;
+  park_name?: string;
+  reviewed_at?: string;
+  reviewed_by?: string;
+  reviewer_notes?: string;
+  reviewer_profile?: {
+    username: string;
+    display_name?: string;
+    avatar_url?: string;
+  };
+  escalated?: boolean;
+  assigned_to?: string;
+  locked_until?: string;
+}
+
+interface QueueItemProps {
+  item: ModerationItem;
+  isMobile: boolean;
+  actionLoading: string | null;
+  lockedSubmissions: Set<string>;
+  currentLockSubmissionId?: string;
+  notes: Record<string, string>;
+  isAdmin: boolean;
+  isSuperuser: boolean;
+  queueIsLoading: boolean;
+  onNoteChange: (id: string, value: string) => void;
+  onApprove: (item: ModerationItem, action: 'approved' | 'rejected', notes?: string) => void;
+  onResetToPending: (item: ModerationItem) => void;
+  onRetryFailed: (item: ModerationItem) => void;
+  onOpenPhotos: (photos: any[], index: number) => void;
+  onOpenReviewManager: (submissionId: string) => void;
+  onClaimSubmission: (submissionId: string) => void;
+  onDeleteSubmission: (item: ModerationItem) => void;
+  onInteractionFocus: (id: string) => void;
+  onInteractionBlur: (id: string) => void;
+}
+
+const getStatusBadgeVariant = (status: string): "default" | "secondary" | "destructive" | "outline" => {
+  switch (status) {
+    case 'pending': return 'default';
+    case 'approved': return 'secondary';
+    case 'rejected': return 'destructive';
+    case 'flagged': return 'destructive';
+    case 'partially_approved': return 'outline';
+    default: return 'outline';
+  }
+};
+
+export const QueueItem = memo(({
+  item,
+  isMobile,
+  actionLoading,
+  lockedSubmissions,
+  currentLockSubmissionId,
+  notes,
+  isAdmin,
+  isSuperuser,
+  queueIsLoading,
+  onNoteChange,
+  onApprove,
+  onResetToPending,
+  onRetryFailed,
+  onOpenPhotos,
+  onOpenReviewManager,
+  onClaimSubmission,
+  onDeleteSubmission,
+  onInteractionFocus,
+  onInteractionBlur
+}: QueueItemProps) => {
+  return (
+    <Card 
+      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>
+            )}
+            {currentLockSubmissionId === 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={() => {
+                        onOpenPhotos(item.content.photos.map((p: any, i: number) => ({
+                          id: `${item.id}-${i}`,
+                          url: p.url,
+                          filename: `Review photo ${i + 1}`,
+                          caption: p.caption
+                        })), index);
+                      }}>
+                        <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={() => {
+                        onOpenPhotos(item.content.content.photos.map((p: any, i: number) => ({
+                          id: `${item.id}-${i}`,
+                          url: p.url,
+                          filename: p.filename,
+                          caption: p.caption
+                        })), index);
+                      }}>
+                        <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 or Standard Submissions */}
+              <SubmissionItemsList 
+                submissionId={item.id}
+                view="detailed"
+                showImages={true}
+              />
+            </div>
+          )}
+        </div>
+        
+        {/* Action buttons based on status */}
+        {(item.status === 'pending' || item.status === 'flagged') && (
+          <>
+            {/* Claim button for unclaimed submissions */}
+            {!lockedSubmissions.has(item.id) && currentLockSubmissionId !== 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={() => onClaimSubmission(item.id)}
+                        disabled={queueIsLoading}
+                        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) => onNoteChange(item.id, e.target.value)}
+                onFocus={() => onInteractionFocus(item.id)}
+                onBlur={() => onInteractionBlur(item.id)}
+                rows={2}
+                disabled={lockedSubmissions.has(item.id) || currentLockSubmissionId !== 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={() => onOpenReviewManager(item.id)}
+                  disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || currentLockSubmissionId !== 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={() => onApprove(item, 'approved', notes[item.id])}
+                disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || currentLockSubmissionId !== 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={() => onApprove(item, 'rejected', notes[item.id])}
+                disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || currentLockSubmissionId !== 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={() => onResetToPending(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={() => onOpenReviewManager(item.id)}
+                disabled={actionLoading === item.id}
+                variant="outline"
+                className="flex-1"
+              >
+                <ListTree className="w-4 h-4 mr-2" />
+                Review Items
+              </Button>
+              <Button
+                onClick={() => onResetToPending(item)}
+                disabled={actionLoading === item.id}
+                variant="outline"
+                className="flex-1"
+              >
+                <RefreshCw className="w-4 h-4 mr-2" />
+                Reset All
+              </Button>
+              <Button
+                onClick={() => onRetryFailed(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) => onNoteChange(`reverse-${item.id}`, e.target.value)}
+                onFocus={() => onInteractionFocus(item.id)}
+                onBlur={() => onInteractionBlur(item.id)}
+                rows={2}
+              />
+              <div className={`flex gap-2 ${isMobile ? 'flex-col' : ''}`}>
+                {item.status === 'approved' && (
+                  <Button
+                    variant="destructive"
+                    onClick={() => onApprove(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={() => onApprove(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={() => onDeleteSubmission(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>
+  );
+}, (prevProps, nextProps) => {
+  // Custom comparison to prevent re-renders
+  return (
+    prevProps.item.id === nextProps.item.id &&
+    prevProps.item.status === nextProps.item.status &&
+    prevProps.actionLoading === nextProps.actionLoading &&
+    prevProps.lockedSubmissions.has(prevProps.item.id) === nextProps.lockedSubmissions.has(nextProps.item.id) &&
+    prevProps.currentLockSubmissionId === nextProps.currentLockSubmissionId &&
+    prevProps.notes[prevProps.item.id] === nextProps.notes[nextProps.item.id] &&
+    prevProps.notes[`reverse-${prevProps.item.id}`] === nextProps.notes[`reverse-${nextProps.item.id}`]
+  );
+});
+
+QueueItem.displayName = 'QueueItem';