Refactor code structure and remove redundant changes

src-old/components/moderation/LockStatusDisplay.tsx

@@ -0,0 +1,107 @@
+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;
+  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,
+  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;
+
+  // If no active lock, show simple info message
+  if (!currentLock) {
+    return (
+      <div className="flex flex-col gap-2 min-w-[200px]">
+        <div className="text-sm text-muted-foreground">
+          No submission currently claimed. Claim a submission below to start reviewing.
+        </div>
+      </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="outline"
+        onClick={() => onReleaseLock(currentLock.submissionId)}
+        disabled={isLoading}
+        className="w-full"
+      >
+        <Unlock className="w-4 h-4 mr-2" />
+        Release Lock
+      </Button>
+    </div>
+  );
+};