Refactor: Use consolidated escalateSubmission action

src/components/moderation/EscalationDialog.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { AlertTriangle } from 'lucide-react';
+import { AlertTriangle, AlertCircle } from 'lucide-react';
 import {
   Dialog,
   DialogContent,
@@ -18,12 +18,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 
 interface EscalationDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onEscalate: (reason: string) => Promise<void>;
   submissionType: string;
+  error?: { message: string; errorId?: string } | null;
 }
 
 const escalationReasons = [
@@ -40,6 +42,7 @@ export function EscalationDialog({
   onOpenChange,
   onEscalate,
   submissionType,
+  error,
 }: EscalationDialogProps) {
   const [selectedReason, setSelectedReason] = useState('');
   const [additionalNotes, setAdditionalNotes] = useState('');
@@ -76,6 +79,23 @@ export function EscalationDialog({
           </DialogDescription>
         </DialogHeader>
 
+        {error && (
+          <Alert variant="destructive" className="mt-4">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>Escalation Failed</AlertTitle>
+            <AlertDescription>
+              <div className="space-y-2">
+                <p className="text-sm">{error.message}</p>
+                {error.errorId && (
+                  <p className="text-xs font-mono bg-destructive/10 px-2 py-1 rounded">
+                    Reference: {error.errorId.slice(0, 8)}
+                  </p>
+                )}
+              </div>
+            </AlertDescription>
+          </Alert>
+        )}
+
         <div className="space-y-4 py-4">
           <div className="space-y-2">
             <Label>Escalation Reason</Label>