Fix moderation buttons and refresh

src/components/moderation/ModerationQueue.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { CheckCircle, XCircle, Eye, Calendar, User, Filter, MessageSquare, FileText, Image, X } from 'lucide-react';
+import { CheckCircle, XCircle, Eye, Calendar, User, Filter, MessageSquare, FileText, Image, X, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
@@ -8,6 +8,7 @@ import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { supabase } from '@/integrations/supabase/client';
 import { useToast } from '@/hooks/use-toast';
+import { useUserRole } from '@/hooks/useUserRole';
 import { format } from 'date-fns';
 
 interface ModerationItem {
@@ -35,6 +36,7 @@ export function ModerationQueue() {
   const [activeEntityFilter, setActiveEntityFilter] = useState<EntityFilter>('all');
   const [activeStatusFilter, setActiveStatusFilter] = useState<StatusFilter>('pending');
   const { toast } = useToast();
+  const { isAdmin, isSuperuser } = useUserRole();
 
   const fetchItems = async (entityFilter: EntityFilter = 'all', statusFilter: StatusFilter = 'pending') => {
     try {
@@ -245,6 +247,37 @@ export function ModerationQueue() {
     }
   };
 
+  const handleDeleteSubmission = async (item: ModerationItem) => {
+    if (item.type !== 'content_submission') return;
+    
+    setActionLoading(item.id);
+    try {
+      const { error } = await supabase
+        .from('content_submissions')
+        .delete()
+        .eq('id', item.id);
+
+      if (error) throw error;
+
+      toast({
+        title: "Submission deleted",
+        description: "The submission has been permanently deleted",
+      });
+
+      // Remove item from the current view
+      setItems(prev => prev.filter(i => i.id !== item.id));
+    } catch (error) {
+      console.error('Error deleting submission:', error);
+      toast({
+        title: "Error",
+        description: "Failed to delete submission",
+        variant: "destructive",
+      });
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
   const getStatusBadgeVariant = (status: string) => {
     switch (status) {
       case 'pending':
@@ -483,6 +516,7 @@ export function ModerationQueue() {
                 )}
               </div>
               
+              {/* Action buttons based on status */}
               {(item.status === 'pending' || item.status === 'flagged') && (
                 <>
                   <div className="space-y-2">
@@ -517,6 +551,21 @@ export function ModerationQueue() {
                   </div>
                 </>
               )}
+              
+              {/* Delete button for rejected submissions (admin/superadmin only) */}
+              {item.status === 'rejected' && item.type === 'content_submission' && (isAdmin() || isSuperuser()) && (
+                <div className="pt-2">
+                  <Button
+                    variant="destructive"
+                    onClick={() => handleDeleteSubmission(item)}
+                    disabled={actionLoading === item.id}
+                    className="w-full"
+                  >
+                    <Trash2 className="w-4 h-4 mr-2" />
+                    Delete Submission
+                  </Button>
+                </div>
+              )}
             </CardContent>
           </Card>
         ))}