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">

src/hooks/useModerationQueue.ts

@@ -0,0 +1,297 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { useAuth } from './useAuth';
+import { useToast } from './use-toast';
+
+interface QueuedSubmission {
+  submission_id: string;
+  submission_type: string;
+  priority: number;
+  waiting_time: string; // PostgreSQL interval format
+}
+
+interface LockState {
+  submissionId: string;
+  expiresAt: Date;
+  autoReleaseTimer?: NodeJS.Timeout;
+}
+
+interface QueueStats {
+  pendingCount: number;
+  assignedToMe: number;
+  avgWaitHours: number;
+  highPriorityCount: number;
+}
+
+export const useModerationQueue = () => {
+  const [currentLock, setCurrentLock] = useState<LockState | null>(null);
+  const [queueStats, setQueueStats] = useState<QueueStats | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const lockTimerRef = useRef<NodeJS.Timeout>();
+  const { user } = useAuth();
+  const { toast } = useToast();
+
+  // Auto-release expired locks periodically
+  useEffect(() => {
+    if (!user) return;
+
+    // Call release_expired_locks every 2 minutes
+    const releaseInterval = setInterval(async () => {
+      try {
+        await supabase.rpc('release_expired_locks');
+      } catch (error) {
+        console.error('Error auto-releasing expired locks:', error);
+      }
+    }, 120000); // 2 minutes
+
+    return () => clearInterval(releaseInterval);
+  }, [user]);
+
+  // Fetch queue statistics
+  const fetchStats = useCallback(async () => {
+    if (!user) return;
+
+    try {
+      const { data: slaData } = await supabase
+        .from('moderation_sla_metrics')
+        .select('*');
+
+      const { count: assignedCount } = await supabase
+        .from('content_submissions')
+        .select('id', { count: 'exact', head: true })
+        .eq('assigned_to', user.id)
+        .gt('locked_until', new Date().toISOString());
+
+      if (slaData) {
+        const totals = slaData.reduce(
+          (acc, row) => ({
+            pendingCount: acc.pendingCount + (row.pending_count || 0),
+            avgWaitHours: acc.avgWaitHours + (row.avg_wait_hours || 0),
+            highPriorityCount: acc.highPriorityCount + (row.escalated_count || 0),
+          }),
+          { pendingCount: 0, avgWaitHours: 0, highPriorityCount: 0 }
+        );
+
+        setQueueStats({
+          pendingCount: totals.pendingCount,
+          assignedToMe: assignedCount || 0,
+          avgWaitHours: slaData.length > 0 ? totals.avgWaitHours / slaData.length : 0,
+          highPriorityCount: totals.highPriorityCount,
+        });
+      }
+    } catch (error) {
+      console.error('Error fetching queue stats:', error);
+    }
+  }, [user]);
+
+  // Fetch stats on mount and periodically
+  useEffect(() => {
+    fetchStats();
+    const interval = setInterval(fetchStats, 30000); // Every 30 seconds
+    return () => clearInterval(interval);
+  }, [fetchStats]);
+
+  // Start countdown timer for lock expiry
+  const startLockTimer = useCallback((expiresAt: Date) => {
+    if (lockTimerRef.current) {
+      clearInterval(lockTimerRef.current);
+    }
+
+    lockTimerRef.current = setInterval(() => {
+      const now = new Date();
+      const timeLeft = expiresAt.getTime() - now.getTime();
+
+      if (timeLeft <= 0) {
+        // Lock expired
+        setCurrentLock(null);
+        if (lockTimerRef.current) {
+          clearInterval(lockTimerRef.current);
+        }
+        toast({
+          title: 'Lock Expired',
+          description: 'Your submission lock has expired',
+          variant: 'destructive',
+        });
+      }
+    }, 1000); // Check every second
+  }, [toast]);
+
+  // Clean up timer on unmount
+  useEffect(() => {
+    return () => {
+      if (lockTimerRef.current) {
+        clearInterval(lockTimerRef.current);
+      }
+    };
+  }, []);
+
+  // Claim next submission from queue
+  const claimNext = useCallback(async (): Promise<string | null> => {
+    if (!user?.id) {
+      toast({
+        title: 'Authentication Required',
+        description: 'You must be logged in to claim submissions',
+        variant: 'destructive',
+      });
+      return null;
+    }
+
+    setIsLoading(true);
+    try {
+      const { data, error } = await supabase.rpc('claim_next_submission', {
+        moderator_id: user.id,
+        lock_duration: '15 minutes',
+      });
+
+      if (error) throw error;
+
+      if (!data || data.length === 0) {
+        toast({
+          title: 'Queue Empty',
+          description: 'No submissions available to review',
+        });
+        return null;
+      }
+
+      const claimed = data[0] as QueuedSubmission;
+      const expiresAt = new Date(Date.now() + 15 * 60 * 1000);
+
+      setCurrentLock({
+        submissionId: claimed.submission_id,
+        expiresAt,
+      });
+
+      startLockTimer(expiresAt);
+      fetchStats();
+
+      toast({
+        title: 'Submission Claimed',
+        description: `Priority ${claimed.priority} ${claimed.submission_type} (waiting ${formatInterval(claimed.waiting_time)})`,
+      });
+
+      return claimed.submission_id;
+    } catch (error: any) {
+      console.error('Error claiming submission:', error);
+      toast({
+        title: 'Error',
+        description: error.message || 'Failed to claim submission',
+        variant: 'destructive',
+      });
+      return null;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [user, toast, startLockTimer, fetchStats]);
+
+  // Extend current lock
+  const extendLock = useCallback(async (submissionId: string): Promise<boolean> => {
+    if (!user?.id) return false;
+
+    setIsLoading(true);
+    try {
+      const { data, error } = await supabase.rpc('extend_submission_lock', {
+        submission_id: submissionId,
+        moderator_id: user.id,
+        extension_duration: '15 minutes',
+      });
+
+      if (error) throw error;
+
+      if (data) {
+        const newExpiresAt = new Date(data);
+        setCurrentLock((prev) =>
+          prev?.submissionId === submissionId
+            ? { ...prev, expiresAt: newExpiresAt }
+            : prev
+        );
+        startLockTimer(newExpiresAt);
+
+        toast({
+          title: 'Lock Extended',
+          description: 'Lock extended for 15 more minutes',
+        });
+
+        return true;
+      }
+
+      return false;
+    } catch (error: any) {
+      console.error('Error extending lock:', error);
+      toast({
+        title: 'Error',
+        description: error.message || 'Failed to extend lock',
+        variant: 'destructive',
+      });
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [user, toast, startLockTimer]);
+
+  // Release lock (manual or on completion)
+  const releaseLock = useCallback(async (submissionId: string): Promise<boolean> => {
+    if (!user?.id) return false;
+
+    try {
+      const { data, error } = await supabase.rpc('release_submission_lock', {
+        submission_id: submissionId,
+        moderator_id: user.id,
+      });
+
+      if (error) throw error;
+
+      if (data) {
+        setCurrentLock((prev) =>
+          prev?.submissionId === submissionId ? null : prev
+        );
+
+        if (lockTimerRef.current) {
+          clearInterval(lockTimerRef.current);
+        }
+
+        fetchStats();
+        return true;
+      }
+
+      return false;
+    } catch (error: any) {
+      console.error('Error releasing lock:', error);
+      return false;
+    }
+  }, [user, fetchStats]);
+
+  // Get time remaining on current lock
+  const getTimeRemaining = useCallback((): number | null => {
+    if (!currentLock) return null;
+    return Math.max(0, currentLock.expiresAt.getTime() - Date.now());
+  }, [currentLock]);
+
+  return {
+    currentLock,
+    queueStats,
+    isLoading,
+    claimNext,
+    extendLock,
+    releaseLock,
+    getTimeRemaining,
+    refreshStats: fetchStats,
+  };
+};
+
+// Helper to format PostgreSQL interval
+function formatInterval(interval: string): string {
+  const match = interval.match(/(\d+):(\d+):(\d+)/);
+  if (!match) return interval;
+
+  const hours = parseInt(match[1]);
+  const minutes = parseInt(match[2]);
+
+  if (hours > 24) {
+    const days = Math.floor(hours / 24);
+    return `${days}d ${hours % 24}h`;
+  } else if (hours > 0) {
+    return `${hours}h ${minutes}m`;
+  } else {
+    return `${minutes}m`;
+  }
+}