Fix: Address HMR failures and Fast Refresh incompatibility

src/components/moderation/SubmissionReviewManager.tsx

@@ -3,6 +3,7 @@ import { useToast } from '@/hooks/use-toast';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAuth } from '@/hooks/useAuth';
 import { handleError } from '@/lib/errorHandler';
+import { invokeWithTracking } from '@/lib/edgeFunctionTracking';
 import { 
   fetchSubmissionItems, 
   buildDependencyTree, 
@@ -213,12 +214,14 @@ export function SubmissionReviewManager({
       const { supabase } = await import('@/integrations/supabase/client');
       
       // Call the edge function for backend processing
-      const { data, error } = await supabase.functions.invoke('process-selective-approval', {
-        body: {
+      const { data, error, requestId } = await invokeWithTracking(
+        'process-selective-approval',
+        {
           itemIds: Array.from(selectedItemIds),
           submissionId
-        }
-      });
+        },
+        user?.id
+      );
 
       if (error) {
         throw new Error(error.message || 'Failed to process approval');
@@ -228,6 +231,11 @@ export function SubmissionReviewManager({
         throw new Error(data?.error || 'Approval processing failed');
       }
 
+      toast({
+        title: 'Items Approved',
+        description: `Successfully approved ${selectedItemIds.size} item(s)${requestId ? ` (Request: ${requestId.substring(0, 8)})` : ''}`,
+      });
+
       const successCount = data.results.filter((r: any) => r.success).length;
       const failCount = data.results.filter((r: any) => !r.success).length;
 
@@ -343,13 +351,15 @@ export function SubmissionReviewManager({
       const { supabase } = await import('@/integrations/supabase/client');
 
       // Call the escalation notification edge function
-      const { data, error } = await supabase.functions.invoke('send-escalation-notification', {
-        body: {
+      const { data, error, requestId } = await invokeWithTracking(
+        'send-escalation-notification',
+        {
           submissionId,
           escalationReason: reason,
           escalatedBy: user.id
-        }
-      });
+        },
+        user.id
+      );
 
       if (error) {
         console.error('Edge function error:', error);
@@ -409,12 +419,14 @@ export function SubmissionReviewManager({
     try {
       if (status === 'approved') {
         const { supabase } = await import('@/integrations/supabase/client');
-        const { data, error } = await supabase.functions.invoke('process-selective-approval', {
-          body: {
+        const { data, error, requestId } = await invokeWithTracking(
+          'process-selective-approval',
+          {
             itemIds: [itemId],
             submissionId
-          }
-        });
+          },
+          user?.id
+        );
 
         if (error || !data?.success) {
           throw new Error(error?.message || data?.error || 'Failed to approve item');
@@ -422,7 +434,7 @@ export function SubmissionReviewManager({
 
         toast({
           title: 'Item Approved',
-          description: 'Successfully approved the item',
+          description: `Successfully approved the item${requestId ? ` (Request: ${requestId.substring(0, 8)})` : ''}`,
         });
       } else {
         const item = items.find(i => i.id === itemId);

src/hooks/moderation/useModerationActions.ts

@@ -4,6 +4,7 @@ import { useToast } from '@/hooks/use-toast';
 import { logger } from '@/lib/logger';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { validateMultipleItems } from '@/lib/entityValidationSchemas';
+import { invokeWithTracking } from '@/lib/edgeFunctionTracking';
 import type { User } from '@supabase/supabase-js';
 import type { ModerationItem } from '@/types/moderation';
 
@@ -182,16 +183,20 @@ export function useModerationActions(config: ModerationActionsConfig): Moderatio
               }
             }
 
-            await supabase.functions.invoke('process-selective-approval', {
-              body: {
+            const { data, error, requestId } = await invokeWithTracking(
+              'process-selective-approval',
+              {
                 itemIds: submissionItems.map((i) => i.id),
                 submissionId: item.id,
               },
-            });
+              config.user?.id
+            );
+
+            if (error) throw error;
 
             toast({
               title: 'Submission Approved',
-              description: `Successfully processed ${submissionItems.length} item(s)`,
+              description: `Successfully processed ${submissionItems.length} item(s)${requestId ? ` (Request: ${requestId.substring(0, 8)})` : ''}`,
             });
             return;
           } else if (action === 'rejected') {
@@ -339,18 +344,20 @@ export function useModerationActions(config: ModerationActionsConfig): Moderatio
           return;
         }
 
-        const { error } = await supabase.functions.invoke('process-selective-approval', {
-          body: {
+        const { data, error, requestId } = await invokeWithTracking(
+          'process-selective-approval',
+          {
             itemIds: failedItems.map((i) => i.id),
             submissionId: item.id,
           },
-        });
+          config.user?.id
+        );
 
         if (error) throw error;
 
         toast({
           title: 'Items Retried',
-          description: `Successfully retried ${failedItems.length} failed item(s)`,
+          description: `Successfully retried ${failedItems.length} failed item(s)${requestId ? ` (Request: ${requestId.substring(0, 8)})` : ''}`,
         });
 
         logger.log(`✅ Retried ${failedItems.length} failed items for ${item.id}`);

src/hooks/moderation/useModerationQueueManager.ts

@@ -4,6 +4,7 @@ import { useToast } from "@/hooks/use-toast";
 import { useAuth } from "@/hooks/useAuth";
 import { logger } from "@/lib/logger";
 import { getErrorMessage } from "@/lib/errorHandler";
+import { invokeWithTracking } from "@/lib/edgeFunctionTracking";
 import { MODERATION_CONSTANTS } from "@/lib/moderation/constants";
 import { useQueryClient } from '@tanstack/react-query';
 import type { User } from "@supabase/supabase-js";
@@ -420,16 +421,20 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig):
           return;
         }
 
-        await supabase.functions.invoke("process-selective-approval", {
-          body: {
+        const { data, error, requestId } = await invokeWithTracking(
+          "process-selective-approval",
+          {
             itemIds: failedItems.map((i) => i.id),
             submissionId: item.id,
           },
-        });
+          user?.id
+        );
+
+        if (error) throw error;
 
         toast({
           title: "Retry Complete",
-          description: `Processed ${failedItems.length} failed item(s)`,
+          description: `Processed ${failedItems.length} failed item(s)${requestId ? ` (Request: ${requestId.substring(0, 8)})` : ""}`,
         });
         
         // Refresh stats to update counts