Refactor: Complete error handling overhaul

src/components/moderation/ModerationQueue.tsx

@@ -1,6 +1,8 @@
-import { useState, useImperativeHandle, forwardRef, useMemo, useCallback, useRef } from 'react';
+import { useState, useImperativeHandle, forwardRef, useMemo, useCallback, useRef, useEffect } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { AlertCircle } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { useToast } from '@/hooks/use-toast';
 import { useUserRole } from '@/hooks/useUserRole';
@@ -95,6 +97,33 @@ export const ModerationQueue = forwardRef<ModerationQueueRef, ModerationQueuePro
   // Keyboard shortcuts help dialog
   const [showShortcutsHelp, setShowShortcutsHelp] = useState(false);
   
+  // Offline detection state
+  const [isOffline, setIsOffline] = useState(!navigator.onLine);
+  
+  // Offline detection effect
+  useEffect(() => {
+    const handleOnline = () => {
+      setIsOffline(false);
+      toast({
+        title: 'Connection Restored',
+        description: 'You are back online. Refreshing queue...',
+      });
+      queueManager.refresh();
+    };
+    
+    const handleOffline = () => {
+      setIsOffline(true);
+    };
+    
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+    
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, [queueManager, toast]);
+  
   // Virtual scrolling setup
   const parentRef = useRef<HTMLDivElement>(null);
   const virtualizer = useVirtualizer({
@@ -200,6 +229,17 @@ export const ModerationQueue = forwardRef<ModerationQueueRef, ModerationQueuePro
   
   return (
     <div className="space-y-4">
+      {/* Offline Banner */}
+      {isOffline && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>No Internet Connection</AlertTitle>
+          <AlertDescription>
+            You're offline. The moderation queue will automatically sync when your connection is restored.
+          </AlertDescription>
+        </Alert>
+      )}
+      
       {/* Queue Statistics & Lock Status */}
       {queueManager.queue.queueStats && (
         <Card className="bg-gradient-to-r from-primary/5 to-primary/10 border-primary/20">

src/components/moderation/renderers/QueueItemActions.tsx

@@ -1,4 +1,5 @@
 import { memo, useCallback } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
 import { 
   CheckCircle, XCircle, RefreshCw, AlertCircle, Lock, Trash2, 
   Edit, Info, ExternalLink, ChevronDown, ListTree, Calendar 
@@ -66,13 +67,31 @@ export const QueueItemActions = memo(({
     onNoteChange(item.id, e.target.value);
   }, [onNoteChange, item.id]);
 
-  const handleApprove = useCallback(() => {
-    onApprove(item, 'approved', notes[item.id]);
-  }, [onApprove, item, notes]);
+  // Debounced handlers to prevent duplicate submissions
+  const handleApprove = useDebouncedCallback(
+    () => {
+      // Extra guard against race conditions
+      if (actionLoading === item.id) {
+        console.warn('⚠️ Action already in progress, ignoring duplicate request');
+        return;
+      }
+      onApprove(item, 'approved', notes[item.id]);
+    },
+    300, // 300ms debounce
+    { leading: true, trailing: false } // Only fire on first click
+  );
 
-  const handleReject = useCallback(() => {
-    onApprove(item, 'rejected', notes[item.id]);
-  }, [onApprove, item, notes]);
+  const handleReject = useDebouncedCallback(
+    () => {
+      if (actionLoading === item.id) {
+        console.warn('⚠️ Action already in progress, ignoring duplicate request');
+        return;
+      }
+      onApprove(item, 'rejected', notes[item.id]);
+    },
+    300,
+    { leading: true, trailing: false }
+  );
 
   const handleResetToPending = useCallback(() => {
     onResetToPending(item);
@@ -106,13 +125,29 @@ export const QueueItemActions = memo(({
     onNoteChange(`reverse-${item.id}`, e.target.value);
   }, [onNoteChange, item.id]);
 
-  const handleReverseApprove = useCallback(() => {
-    onApprove(item, 'approved', notes[`reverse-${item.id}`]);
-  }, [onApprove, item, notes]);
+  const handleReverseApprove = useDebouncedCallback(
+    () => {
+      if (actionLoading === item.id) {
+        console.warn('⚠️ Action already in progress, ignoring duplicate request');
+        return;
+      }
+      onApprove(item, 'approved', notes[`reverse-${item.id}`]);
+    },
+    300,
+    { leading: true, trailing: false }
+  );
 
-  const handleReverseReject = useCallback(() => {
-    onApprove(item, 'rejected', notes[`reverse-${item.id}`]);
-  }, [onApprove, item, notes]);
+  const handleReverseReject = useDebouncedCallback(
+    () => {
+      if (actionLoading === item.id) {
+        console.warn('⚠️ Action already in progress, ignoring duplicate request');
+        return;
+      }
+      onApprove(item, 'rejected', notes[`reverse-${item.id}`]);
+    },
+    300,
+    { leading: true, trailing: false }
+  );
 
   return (
     <>
@@ -249,8 +284,20 @@ export const QueueItemActions = memo(({
                 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
+                {actionLoading === item.id ? (
+                  <>
+                    <RefreshCw className={`${isMobile ? "w-5 h-5" : "w-4 h-4"} mr-2 animate-spin`} />
+                    {item.submission_items && item.submission_items.length > 5
+                      ? `Processing ${item.submission_items.length} items...`
+                      : 'Processing...'
+                    }
+                  </>
+                ) : (
+                  <>
+                    <CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
+                    Approve
+                  </>
+                )}
               </Button>
               <Button
                 variant="destructive"
@@ -259,8 +306,17 @@ export const QueueItemActions = memo(({
                 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
+                {actionLoading === item.id ? (
+                  <>
+                    <RefreshCw className={`${isMobile ? "w-5 h-5" : "w-4 h-4"} mr-2 animate-spin`} />
+                    Processing...
+                  </>
+                ) : (
+                  <>
+                    <XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
+                    Reject
+                  </>
+                )}
               </Button>
             </div>
           </div>