feat: Implement frontend queue integration

src/components/moderation/ModerationQueue.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
-import { CheckCircle, XCircle, Eye, Calendar, User, Filter, MessageSquare, FileText, Image, X, Trash2, ListTree, RefreshCw, AlertCircle } from 'lucide-react';
+import { CheckCircle, XCircle, Eye, Calendar, User, Filter, MessageSquare, FileText, Image, X, Trash2, ListTree, RefreshCw, AlertCircle, Clock, Lock, Unlock } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
@@ -19,6 +19,8 @@ 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';
 
 interface ModerationItem {
   id: string;
@@ -66,9 +68,11 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
   const [selectedPhotoIndex, setSelectedPhotoIndex] = useState(0);
   const [reviewManagerOpen, setReviewManagerOpen] = useState(false);
   const [selectedSubmissionId, setSelectedSubmissionId] = useState<string | null>(null);
+  const [lockedSubmissions, setLockedSubmissions] = useState<Set<string>>(new Set());
   const { toast } = useToast();
   const { isAdmin, isSuperuser } = useUserRole();
   const { user } = useAuth();
+  const queue = useModerationQueue();
 
   // Get admin settings for polling configuration
   const { getAdminPanelRefreshMode, getAdminPanelPollInterval } = useAdminSettings();
@@ -380,6 +384,51 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
     };
   }, [user, refreshMode, pollInterval, activeEntityFilter, activeStatusFilter, isInitialLoad]);
 
+  // Real-time subscription for lock status
+  useEffect(() => {
+    if (!user) return;
+
+    const channel = supabase
+      .channel('moderation-locks')
+      .on(
+        'postgres_changes',
+        {
+          event: 'UPDATE',
+          schema: 'public',
+          table: 'content_submissions',
+        },
+        (payload) => {
+          const newData = payload.new as any;
+          
+          // Track submissions locked by others
+          if (newData.assigned_to && newData.assigned_to !== user.id && newData.locked_until) {
+            const lockExpiry = new Date(newData.locked_until);
+            if (lockExpiry > new Date()) {
+              setLockedSubmissions((prev) => new Set(prev).add(newData.id));
+            } else {
+              setLockedSubmissions((prev) => {
+                const next = new Set(prev);
+                next.delete(newData.id);
+                return next;
+              });
+            }
+          } else {
+            // Lock released
+            setLockedSubmissions((prev) => {
+              const next = new Set(prev);
+              next.delete(newData.id);
+              return next;
+            });
+          }
+        }
+      )
+      .subscribe();
+
+    return () => {
+      supabase.removeChannel(channel);
+    };
+  }, [user]);
+
   const handleResetToPending = async (item: ModerationItem) => {
     setActionLoading(item.id);
     try {
@@ -468,6 +517,11 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
     }
 
     setActionLoading(item.id);
+    
+    // Release lock if this submission is claimed by current user
+    if (queue.currentLock?.submissionId === item.id) {
+      await queue.releaseLock(item.id);
+    }
     try {
       // Handle composite ride submissions with sequential entity creation
       if (action === 'approved' && item.type === 'content_submission' && 
@@ -1067,6 +1121,18 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                       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"} />
@@ -1692,8 +1758,107 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
     }
   };
 
+  // Helper to format lock timer
+  const formatLockTimer = (ms: number): string => {
+    const minutes = Math.floor(ms / 60000);
+    const seconds = Math.floor((ms % 60000) / 1000);
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  };
+
+  // Handle claim next action
+  const handleClaimNext = async () => {
+    const claimedId = await queue.claimNext();
+    if (claimedId) {
+      // Scroll to claimed submission or fetch to show it
+      fetchItems(activeEntityFilter, activeStatusFilter);
+    }
+  };
+
   return (
     <div className="space-y-4">
+      {/* Queue Statistics & Claim Button */}
+      {queue.queueStats && (
+        <Card className="bg-gradient-to-r from-primary/5 to-primary/10 border-primary/20">
+          <CardContent className="p-4">
+            <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
+              {/* Stats Grid */}
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 flex-1">
+                <div className="text-center sm:text-left">
+                  <div className="text-2xl font-bold text-primary">{queue.queueStats.pendingCount}</div>
+                  <div className="text-xs text-muted-foreground">Pending</div>
+                </div>
+                <div className="text-center sm:text-left">
+                  <div className="text-2xl font-bold text-amber-600 dark:text-amber-400">{queue.queueStats.highPriorityCount}</div>
+                  <div className="text-xs text-muted-foreground">High Priority</div>
+                </div>
+                <div className="text-center sm:text-left">
+                  <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">{queue.queueStats.assignedToMe}</div>
+                  <div className="text-xs text-muted-foreground">Assigned to Me</div>
+                </div>
+                <div className="text-center sm:text-left">
+                  <div className="text-2xl font-bold text-green-600 dark:text-green-400">
+                    {queue.queueStats.avgWaitHours.toFixed(1)}h
+                  </div>
+                  <div className="text-xs text-muted-foreground">Avg Wait</div>
+                </div>
+              </div>
+
+              {/* Claim/Lock Status */}
+              <div className="flex flex-col gap-2 min-w-[200px]">
+                {queue.currentLock ? (
+                  <>
+                    {/* Lock Timer */}
+                    <div className="flex items-center gap-2 text-sm">
+                      <Lock className="w-4 h-4 text-amber-500" />
+                      <span className="font-medium">
+                        Lock: {formatLockTimer(queue.getTimeRemaining() || 0)}
+                      </span>
+                    </div>
+                    <Progress 
+                      value={((queue.getTimeRemaining() || 0) / (15 * 60 * 1000)) * 100} 
+                      className="h-2"
+                    />
+                    {/* Extend Lock Button (show when < 5 min left) */}
+                    {(queue.getTimeRemaining() || 0) < 5 * 60 * 1000 && (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => queue.extendLock(queue.currentLock!.submissionId)}
+                        disabled={queue.isLoading}
+                        className="w-full"
+                      >
+                        <Clock className="w-4 h-4 mr-2" />
+                        Extend Lock
+                      </Button>
+                    )}
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => queue.releaseLock(queue.currentLock!.submissionId)}
+                      disabled={queue.isLoading}
+                      className="w-full"
+                    >
+                      <Unlock className="w-4 h-4 mr-2" />
+                      Release Lock
+                    </Button>
+                  </>
+                ) : (
+                  <Button
+                    size="lg"
+                    onClick={handleClaimNext}
+                    disabled={queue.isLoading || queue.queueStats.pendingCount === 0}
+                    className="w-full"
+                  >
+                    <Lock className="w-4 h-4 mr-2" />
+                    Claim Next Submission
+                  </Button>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
       {/* Filter Bar */}
       <div className={`flex flex-col gap-4 bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4 sm:flex-row'}`}>
         <div className="flex items-center justify-between w-full mb-2 pb-2 border-b border-border">