Implement Phase 6: Lock Management

src/components/moderation/LockStatusDisplay.tsx

@@ -0,0 +1,115 @@
+import { Lock, Clock, Unlock } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+
+interface LockState {
+  submissionId: string;
+  expiresAt: Date;
+}
+
+interface QueueStats {
+  pendingCount: number;
+  assignedToMe: number;
+  avgWaitHours: number;
+}
+
+interface LockStatusDisplayProps {
+  currentLock: LockState | null;
+  queueStats: QueueStats | null;
+  isLoading: boolean;
+  onClaimNext: () => Promise<void>;
+  onExtendLock: (submissionId: string) => Promise<boolean>;
+  onReleaseLock: (submissionId: string) => Promise<boolean>;
+  getTimeRemaining: () => number | null;
+  getLockProgress: () => number;
+}
+
+/**
+ * LockStatusDisplay Component
+ * 
+ * Displays lock timer, progress bar, and lock management controls.
+ * Shows "Claim Next" button when no lock is active, or lock controls when locked.
+ */
+export const LockStatusDisplay = ({
+  currentLock,
+  queueStats,
+  isLoading,
+  onClaimNext,
+  onExtendLock,
+  onReleaseLock,
+  getTimeRemaining,
+  getLockProgress,
+}: LockStatusDisplayProps) => {
+  // Format milliseconds as MM:SS
+  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')}`;
+  };
+
+  const timeRemaining = getTimeRemaining();
+  const showExtendButton = timeRemaining !== null && timeRemaining < 5 * 60 * 1000;
+
+  // No active lock - show claim button
+  if (!currentLock) {
+    return (
+      <div className="flex flex-col gap-2 min-w-[200px]">
+        <Button
+          size="lg"
+          onClick={onClaimNext}
+          disabled={isLoading || (queueStats?.pendingCount === 0)}
+          className="w-full"
+        >
+          <Lock className="w-4 h-4 mr-2" />
+          Claim Next Submission
+        </Button>
+      </div>
+    );
+  }
+
+  // Active lock - show timer and controls
+  return (
+    <div className="flex flex-col gap-2 min-w-[200px]">
+      {/* 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(timeRemaining || 0)}
+        </span>
+      </div>
+
+      {/* Progress Bar */}
+      <Progress 
+        value={getLockProgress()} 
+        className="h-2"
+      />
+
+      {/* Extend Lock Button (show when < 5 min left) */}
+      {showExtendButton && (
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => onExtendLock(currentLock.submissionId)}
+          disabled={isLoading}
+          className="w-full"
+        >
+          <Clock className="w-4 h-4 mr-2" />
+          Extend Lock
+        </Button>
+      )}
+
+      {/* Release Lock Button */}
+      <Button
+        size="sm"
+        variant="ghost"
+        onClick={() => onReleaseLock(currentLock.submissionId)}
+        disabled={isLoading}
+        className="w-full"
+      >
+        <Unlock className="w-4 h-4 mr-2" />
+        Release Lock
+      </Button>
+    </div>
+  );
+};

src/components/moderation/ModerationQueue.tsx

@@ -33,6 +33,8 @@ import { smartMergeArray } from '@/lib/smartStateUpdate';
 import { useDebounce } from '@/hooks/useDebounce';
 import { QueueItem } from './QueueItem';
 import { QueueSkeleton } from './QueueSkeleton';
+import { LockStatusDisplay } from './LockStatusDisplay';
+import { getLockStatus } from '@/lib/moderation/lockHelpers';
 import type {
   ModerationItem,
   EntityFilter,
@@ -60,7 +62,6 @@ 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 [escalationDialogOpen, setEscalationDialogOpen] = useState(false);
   const [reassignDialogOpen, setReassignDialogOpen] = useState(false);
   const [selectedItemForAction, setSelectedItemForAction] = useState<ModerationItem | null>(null);
@@ -1969,7 +1970,9 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
               item={item}
               isMobile={isMobile}
               actionLoading={actionLoading}
-              lockedSubmissions={lockedSubmissions}
+              isLockedByMe={queue.isLockedByMe(item.id)}
+              isLockedByOther={queue.isLockedByOther(item.id, item.assigned_to, item.locked_until)}
+              lockStatus={getLockStatus({ assigned_to: item.assigned_to, locked_until: item.locked_until }, user?.id || '')}
               currentLockSubmissionId={queue.currentLock?.submissionId}
               notes={notes}
               isAdmin={isAdmin()}
@@ -2008,13 +2011,6 @@ 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 () => {
     await queue.claimNext();
@@ -2047,56 +2043,16 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
               </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>
+              <LockStatusDisplay
+                currentLock={queue.currentLock}
+                queueStats={queue.queueStats}
+                isLoading={queue.isLoading}
+                onClaimNext={handleClaimNext}
+                onExtendLock={queue.extendLock}
+                onReleaseLock={queue.releaseLock}
+                getTimeRemaining={queue.getTimeRemaining}
+                getLockProgress={queue.getLockProgress}
+              />
             </div>
           </CardContent>
         </Card>

src/components/moderation/QueueItem.tsx

@@ -50,11 +50,15 @@ interface ModerationItem {
 import { ValidationSummary } from './ValidationSummary';
 import type { ValidationResult } from '@/lib/entityValidationSchemas';
 
+import type { LockStatus } from '@/lib/moderation/lockHelpers';
+
 interface QueueItemProps {
   item: ModerationItem;
   isMobile: boolean;
   actionLoading: string | null;
-  lockedSubmissions: Set<string>;
+  isLockedByMe: boolean;
+  isLockedByOther: boolean;
+  lockStatus: LockStatus;
   currentLockSubmissionId?: string;
   notes: Record<string, string>;
   isAdmin: boolean;
@@ -88,7 +92,9 @@ export const QueueItem = memo(({
   item,
   isMobile,
   actionLoading,
-  lockedSubmissions,
+  isLockedByMe,
+  isLockedByOther,
+  lockStatus,
   currentLockSubmissionId,
   notes,
   isAdmin,
@@ -162,7 +168,7 @@ export const QueueItem = memo(({
                 Needs Retry
               </Badge>
             )}
-            {lockedSubmissions.has(item.id) && item.type === 'content_submission' && (
+            {isLockedByOther && 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
@@ -427,7 +433,7 @@ export const QueueItem = memo(({
         {(item.status === 'pending' || item.status === 'flagged') && (
           <>
             {/* Claim button for unclaimed submissions */}
-            {!lockedSubmissions.has(item.id) && currentLockSubmissionId !== item.id && (
+            {!isLockedByOther && 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" />
@@ -460,7 +466,7 @@ export const QueueItem = memo(({
                 onFocus={() => onInteractionFocus(item.id)}
                 onBlur={() => onInteractionBlur(item.id)}
                 rows={2}
-                disabled={lockedSubmissions.has(item.id) || currentLockSubmissionId !== item.id}
+                disabled={isLockedByOther || currentLockSubmissionId !== item.id}
               />
             </div>
             
@@ -469,7 +475,7 @@ export const QueueItem = memo(({
               {item.type === 'content_submission' && (
                 <Button
                   onClick={() => onOpenReviewManager(item.id)}
-                  disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || currentLockSubmissionId !== item.id}
+                  disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
                   variant="outline"
                   className={`flex-1 ${isMobile ? 'h-11' : ''}`}
                   size={isMobile ? "default" : "default"}
@@ -481,7 +487,7 @@ export const QueueItem = memo(({
               
               <Button
                 onClick={() => onApprove(item, 'approved', notes[item.id])}
-                disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || currentLockSubmissionId !== item.id}
+                disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
                 className={`flex-1 ${isMobile ? 'h-11' : ''}`}
                 size={isMobile ? "default" : "default"}
               >
@@ -491,7 +497,7 @@ export const QueueItem = memo(({
               <Button
                 variant="destructive"
                 onClick={() => onApprove(item, 'rejected', notes[item.id])}
-                disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || currentLockSubmissionId !== item.id}
+                disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
                 className={`flex-1 ${isMobile ? 'h-11' : ''}`}
                 size={isMobile ? "default" : "default"}
               >
@@ -664,9 +670,8 @@ export const QueueItem = memo(({
   if (prevProps.notes[`reverse-${prevProps.item.id}`] !== nextProps.notes[`reverse-${nextProps.item.id}`]) return false;
   
   // Check lock status
-  const prevLocked = prevProps.lockedSubmissions.has(prevProps.item.id);
-  const nextLocked = nextProps.lockedSubmissions.has(nextProps.item.id);
-  if (prevLocked !== nextLocked) return false;
+  if (prevProps.isLockedByOther !== nextProps.isLockedByOther) return false;
+  if (prevProps.lockStatus !== nextProps.lockStatus) return false;
   
   // Deep comparison of critical fields (use strict equality for reference stability)
   if (prevProps.item.status !== nextProps.item.status) return false;