Implement success/failure states

src/components/ui/retry-status-indicator.tsx

@@ -1,56 +1,168 @@
 import { useEffect, useState } from 'react';
-import { Loader2 } from 'lucide-react';
+import { Loader2, CheckCircle2, XCircle } from 'lucide-react';
 import { Card } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
+import { Button } from '@/components/ui/button';
 
 interface RetryStatus {
+  id: string;
   attempt: number;
   maxAttempts: number;
   delay: number;
   type: string;
+  state: 'retrying' | 'success' | 'failed';
+  errorId?: string;
 }
 
 /**
  * Global retry status indicator
  * Shows visual feedback when submissions are being retried due to transient failures
+ * Supports success/failure states and multiple concurrent retries
  */
 export function RetryStatusIndicator() {
-  const [retryStatus, setRetryStatus] = useState<RetryStatus | null>(null);
-  const [countdown, setCountdown] = useState(0);
+  const [retries, setRetries] = useState<Map<string, RetryStatus & { countdown: number }>>(new Map());
 
   useEffect(() => {
     const handleRetry = (event: Event) => {
-      const customEvent = event as CustomEvent<RetryStatus>;
-      const { attempt, maxAttempts, delay, type } = customEvent.detail;
-      setRetryStatus({ attempt, maxAttempts, delay, type });
-      setCountdown(delay);
+      const customEvent = event as CustomEvent<Omit<RetryStatus, 'state'>>;
+      const { id, attempt, maxAttempts, delay, type } = customEvent.detail;
+      
+      setRetries(prev => {
+        const next = new Map(prev);
+        next.set(id, { id, attempt, maxAttempts, delay, type, state: 'retrying', countdown: delay });
+        return next;
+      });
+    };
+
+    const handleSuccess = (event: Event) => {
+      const customEvent = event as CustomEvent<{ id: string }>;
+      const { id } = customEvent.detail;
+      
+      setRetries(prev => {
+        const retry = prev.get(id);
+        if (!retry) return prev;
+        
+        const next = new Map(prev);
+        next.set(id, { ...retry, state: 'success', countdown: 0 });
+        return next;
+      });
+      
+      // Remove after 2 seconds
+      setTimeout(() => {
+        setRetries(prev => {
+          const next = new Map(prev);
+          next.delete(id);
+          return next;
+        });
+      }, 2000);
+    };
+
+    const handleFailure = (event: Event) => {
+      const customEvent = event as CustomEvent<{ id: string; errorId: string }>;
+      const { id, errorId } = customEvent.detail;
+      
+      setRetries(prev => {
+        const retry = prev.get(id);
+        if (!retry) return prev;
+        
+        const next = new Map(prev);
+        next.set(id, { ...retry, state: 'failed', errorId, countdown: 0 });
+        return next;
+      });
     };
 
     window.addEventListener('submission-retry', handleRetry);
-    return () => window.removeEventListener('submission-retry', handleRetry);
+    window.addEventListener('submission-retry-success', handleSuccess);
+    window.addEventListener('submission-retry-failed', handleFailure);
+    
+    return () => {
+      window.removeEventListener('submission-retry', handleRetry);
+      window.removeEventListener('submission-retry-success', handleSuccess);
+      window.removeEventListener('submission-retry-failed', handleFailure);
+    };
   }, []);
 
+  // Countdown timer for retrying state
   useEffect(() => {
-    if (countdown > 0) {
     const timer = setInterval(() => {
-        setCountdown((prev) => {
-          if (prev <= 100) {
-            setRetryStatus(null);
-            return 0;
+      setRetries(prev => {
+        let hasChanges = false;
+        const next = new Map(prev);
+        
+        next.forEach((retry, id) => {
+          if (retry.state === 'retrying' && retry.countdown > 0) {
+            const newCountdown = retry.countdown - 100;
+            next.set(id, { ...retry, countdown: Math.max(0, newCountdown) });
+            hasChanges = true;
           }
-          return prev - 100;
+        });
+        
+        return hasChanges ? next : prev;
       });
     }, 100);
+    
     return () => clearInterval(timer);
-    }
-  }, [countdown]);
+  }, []);
 
-  if (!retryStatus) return null;
-
-  const progress = ((retryStatus.delay - countdown) / retryStatus.delay) * 100;
+  if (retries.size === 0) return null;
 
   return (
-    <Card className="fixed bottom-4 right-4 z-50 p-4 shadow-lg border-amber-500 bg-amber-50 dark:bg-amber-950 w-80 animate-in slide-in-from-bottom-4">
+    <div className="fixed bottom-4 right-4 z-50 space-y-2">
+      {Array.from(retries.values()).map((retry) => (
+        <RetryCard key={retry.id} retry={retry} />
+      ))}
+    </div>
+  );
+}
+
+function RetryCard({ retry }: { retry: RetryStatus & { countdown: number } }) {
+  if (retry.state === 'success') {
+    return (
+      <Card className="p-4 shadow-lg border-success bg-success/10 w-80 animate-in slide-in-from-bottom-4">
+        <div className="flex items-center gap-3">
+          <CheckCircle2 className="w-5 h-5 text-success flex-shrink-0" />
+          <p className="text-sm font-medium text-foreground">
+            {retry.type} submitted successfully!
+          </p>
+        </div>
+      </Card>
+    );
+  }
+  
+  if (retry.state === 'failed') {
+    return (
+      <Card className="p-4 shadow-lg border-destructive bg-destructive/10 w-80 animate-in slide-in-from-bottom-4">
+        <div className="flex items-start gap-3">
+          <XCircle className="w-5 h-5 text-destructive mt-0.5 flex-shrink-0" />
+          <div className="flex-1 space-y-2">
+            <p className="text-sm font-medium text-foreground">
+              Submission failed
+            </p>
+            {retry.errorId && (
+              <>
+                <p className="text-xs text-muted-foreground">
+                  Error ID: {retry.errorId}
+                </p>
+                <Button 
+                  size="sm" 
+                  variant="outline" 
+                  onClick={() => window.location.href = `/admin/error-lookup?id=${retry.errorId}`}
+                >
+                  View Details
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+      </Card>
+    );
+  }
+  
+  // Retrying state
+  const progress = retry.delay > 0 ? ((retry.delay - retry.countdown) / retry.delay) * 100 : 0;
+  
+  return (
+    <Card className="p-4 shadow-lg border-amber-500 bg-amber-50 dark:bg-amber-950 w-80 animate-in slide-in-from-bottom-4">
       <div className="flex items-start gap-3">
         <Loader2 className="w-5 h-5 animate-spin text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0" />
         <div className="flex-1 space-y-2">
@@ -59,12 +171,12 @@ export function RetryStatusIndicator() {
               Retrying submission...
             </p>
             <span className="text-xs font-mono text-amber-700 dark:text-amber-300">
-              {retryStatus.attempt}/{retryStatus.maxAttempts}
+              {retry.attempt}/{retry.maxAttempts}
             </span>
           </div>
           
           <p className="text-xs text-amber-700 dark:text-amber-300">
-            Network issue detected. Retrying {retryStatus.type} submission in {Math.ceil(countdown / 1000)}s
+            Network issue detected. Retrying {retry.type} submission in {Math.ceil(retry.countdown / 1000)}s
           </p>
           
           <Progress value={progress} className="h-1" />

src/lib/companyHelpers.ts

@@ -49,6 +49,8 @@ export async function submitCompanyCreation(
   }
 
   // Create submission with retry logic
+  const retryId = crypto.randomUUID();
+  
   const result = await withRetry(
     async () => {
       // Create the main submission record
@@ -99,7 +101,7 @@ export async function submitCompanyCreation(
         
         // Emit event for UI indicator
         window.dispatchEvent(new CustomEvent('submission-retry', {
-          detail: { attempt, maxAttempts: 3, delay, type: companyType }
+          detail: { id: retryId, attempt, maxAttempts: 3, delay, type: companyType }
         }));
       },
       shouldRetry: (error) => {
@@ -116,11 +118,23 @@ export async function submitCompanyCreation(
         return isRetryableError(error);
       }
     }
-  ).catch((error) => {
-    handleError(error, {
+  ).then((data) => {
+    // Emit success event
+    window.dispatchEvent(new CustomEvent('submission-retry-success', {
+      detail: { id: retryId }
+    }));
+    return data;
+  }).catch((error) => {
+    const errorId = handleError(error, {
       action: `${companyType} submission`,
       metadata: { retriesExhausted: true },
     });
+    
+    // Emit failure event
+    window.dispatchEvent(new CustomEvent('submission-retry-failed', {
+      detail: { id: retryId, errorId }
+    }));
+    
     throw error;
   });
 
@@ -178,6 +192,8 @@ export async function submitCompanyUpdate(
   }
 
   // Create submission with retry logic
+  const retryId = crypto.randomUUID();
+  
   const result = await withRetry(
     async () => {
       // Create the main submission record
@@ -230,7 +246,7 @@ export async function submitCompanyUpdate(
         
         // Emit event for UI indicator
         window.dispatchEvent(new CustomEvent('submission-retry', {
-          detail: { attempt, maxAttempts: 3, delay, type: `${existingCompany.company_type} update` }
+          detail: { id: retryId, attempt, maxAttempts: 3, delay, type: `${existingCompany.company_type} update` }
         }));
       },
       shouldRetry: (error) => {
@@ -247,11 +263,23 @@ export async function submitCompanyUpdate(
         return isRetryableError(error);
       }
     }
-  ).catch((error) => {
-    handleError(error, {
+  ).then((data) => {
+    // Emit success event
+    window.dispatchEvent(new CustomEvent('submission-retry-success', {
+      detail: { id: retryId }
+    }));
+    return data;
+  }).catch((error) => {
+    const errorId = handleError(error, {
       action: `${existingCompany.company_type} update`,
       metadata: { retriesExhausted: true, companyId },
     });
+    
+    // Emit failure event
+    window.dispatchEvent(new CustomEvent('submission-retry-failed', {
+      detail: { id: retryId, errorId }
+    }));
+    
     throw error;
   });
 

src/lib/entitySubmissionHelpers.ts

@@ -698,18 +698,28 @@ export async function submitParkUpdate(
   data: ParkFormData,
   userId: string
 ): Promise<{ submitted: boolean; submissionId: string }> {
-  // Check if user is banned
+  const { withRetry, isRetryableError } = await import('./retryHelpers');
+
+  // Check if user is banned - with retry for transient failures
+  const profile = await withRetry(
+    async () => {
       const { data: profile } = await supabase
         .from('profiles')
         .select('banned')
         .eq('user_id', userId)
         .single();
+      return profile;
+    },
+    { maxAttempts: 2 }
+  );
 
   if (profile?.banned) {
     throw new Error('Account suspended. Contact support for assistance.');
   }
 
-  // Fetch existing park data first
+  // Fetch existing park data first - with retry for transient failures
+  const existingPark = await withRetry(
+    async () => {
       const { data: existingPark, error: fetchError } = await supabase
         .from('parks')
         .select('id, name, slug, description, park_type, status, opening_date, opening_date_precision, closing_date, closing_date_precision, website_url, phone, email, location_id, operator_id, property_owner_id, banner_image_url, banner_image_id, card_image_url, card_image_id')
@@ -719,6 +729,11 @@ export async function submitParkUpdate(
       if (fetchError) throw new Error(`Failed to fetch park: ${fetchError.message}`);
       if (!existingPark) throw new Error('Park not found');
       
+      return existingPark;
+    },
+    { maxAttempts: 2 }
+  );
+
   // CRITICAL: Block new photo uploads on edits
   // Photos can only be submitted during creation or via the photo gallery
   if (data.images?.uploaded && data.images.uploaded.some(img => img.isLocal)) {
@@ -728,6 +743,11 @@ export async function submitParkUpdate(
   // Only allow banner/card reassignments from existing photos
   let processedImages = data.images;
 
+  // Main submission logic with retry and error handling
+  const retryId = crypto.randomUUID();
+  
+  const result = await withRetry(
+    async () => {
       // Create the main submission record
       const { data: submissionData, error: submissionError } = await supabase
         .from('content_submissions')
@@ -765,6 +785,59 @@ export async function submitParkUpdate(
       if (itemError) throw itemError;
 
       return { submitted: true, submissionId: submissionData.id };
+    },
+    {
+      maxAttempts: 3,
+      onRetry: (attempt, error, delay) => {
+        logger.warn('Retrying park update submission', { 
+          attempt, 
+          delay, 
+          parkId,
+          error: error instanceof Error ? error.message : String(error)
+        });
+        
+        // Emit event for UI retry indicator
+        window.dispatchEvent(new CustomEvent('submission-retry', {
+          detail: { id: retryId, attempt, maxAttempts: 3, delay, type: 'park update' }
+        }));
+      },
+      shouldRetry: (error) => {
+        // Don't retry validation/business logic errors
+        if (error instanceof Error) {
+          const message = error.message.toLowerCase();
+          if (message.includes('required')) return false;
+          if (message.includes('banned')) return false;
+          if (message.includes('slug')) return false;
+          if (message.includes('permission')) return false;
+          if (message.includes('not found')) return false;
+          if (message.includes('not allowed')) return false;
+        }
+        
+        return isRetryableError(error);
+      }
+    }
+  ).then((data) => {
+    // Emit success event
+    window.dispatchEvent(new CustomEvent('submission-retry-success', {
+      detail: { id: retryId }
+    }));
+    return data;
+  }).catch((error) => {
+    const errorId = handleError(error, {
+      action: 'Park update submission',
+      userId,
+      metadata: { retriesExhausted: true, parkId },
+    });
+    
+    // Emit failure event
+    window.dispatchEvent(new CustomEvent('submission-retry-failed', {
+      detail: { id: retryId, errorId }
+    }));
+    
+    throw error;
+  });
+
+  return result;
 }
 
 /**
@@ -930,6 +1003,8 @@ export async function submitRideCreation(
   }
 
   // Create submission with retry logic
+  const retryId = crypto.randomUUID();
+  
   const result = await withRetry(
     async () => {
       // Create the main submission record
@@ -1020,7 +1095,7 @@ export async function submitRideCreation(
         
         // Emit event for UI indicator
         window.dispatchEvent(new CustomEvent('submission-retry', {
-          detail: { attempt, maxAttempts: 3, delay, type: 'ride' }
+          detail: { id: retryId, attempt, maxAttempts: 3, delay, type: 'ride' }
         }));
       },
       shouldRetry: (error) => {
@@ -1037,11 +1112,23 @@ export async function submitRideCreation(
         return isRetryableError(error);
       }
     }
-  ).catch((error) => {
-    handleError(error, {
+  ).then((data) => {
+    // Emit success event
+    window.dispatchEvent(new CustomEvent('submission-retry-success', {
+      detail: { id: retryId }
+    }));
+    return data;
+  }).catch((error) => {
+    const errorId = handleError(error, {
       action: 'Ride submission',
       metadata: { retriesExhausted: true },
     });
+    
+    // Emit failure event
+    window.dispatchEvent(new CustomEvent('submission-retry-failed', {
+      detail: { id: retryId, errorId }
+    }));
+    
     throw error;
   });
 
@@ -1073,18 +1160,28 @@ export async function submitRideUpdate(
   data: RideFormData,
   userId: string
 ): Promise<{ submitted: boolean; submissionId: string }> {
-  // Check if user is banned
+  const { withRetry, isRetryableError } = await import('./retryHelpers');
+
+  // Check if user is banned - with retry for transient failures
+  const profile = await withRetry(
+    async () => {
       const { data: profile } = await supabase
         .from('profiles')
         .select('banned')
         .eq('user_id', userId)
         .single();
+      return profile;
+    },
+    { maxAttempts: 2 }
+  );
 
   if (profile?.banned) {
     throw new Error('Account suspended. Contact support for assistance.');
   }
 
-  // Fetch existing ride data first
+  // Fetch existing ride data first - with retry for transient failures
+  const existingRide = await withRetry(
+    async () => {
       const { data: existingRide, error: fetchError } = await supabase
         .from('rides')
         .select('*')
@@ -1094,6 +1191,11 @@ export async function submitRideUpdate(
       if (fetchError) throw new Error(`Failed to fetch ride: ${fetchError.message}`);
       if (!existingRide) throw new Error('Ride not found');
       
+      return existingRide;
+    },
+    { maxAttempts: 2 }
+  );
+
   // CRITICAL: Block new photo uploads on edits
   // Photos can only be submitted during creation or via the photo gallery
   if (data.images?.uploaded && data.images.uploaded.some(img => img.isLocal)) {
@@ -1103,6 +1205,11 @@ export async function submitRideUpdate(
   // Only allow banner/card reassignments from existing photos
   let processedImages = data.images;
 
+  // Main submission logic with retry and error handling
+  const retryId = crypto.randomUUID();
+  
+  const result = await withRetry(
+    async () => {
       // Create the main submission record
       const { data: submissionData, error: submissionError } = await supabase
         .from('content_submissions')
@@ -1140,6 +1247,59 @@ export async function submitRideUpdate(
       if (itemError) throw itemError;
 
       return { submitted: true, submissionId: submissionData.id };
+    },
+    {
+      maxAttempts: 3,
+      onRetry: (attempt, error, delay) => {
+        logger.warn('Retrying ride update submission', { 
+          attempt, 
+          delay, 
+          rideId,
+          error: error instanceof Error ? error.message : String(error)
+        });
+        
+        // Emit event for UI retry indicator
+        window.dispatchEvent(new CustomEvent('submission-retry', {
+          detail: { id: retryId, attempt, maxAttempts: 3, delay, type: 'ride update' }
+        }));
+      },
+      shouldRetry: (error) => {
+        // Don't retry validation/business logic errors
+        if (error instanceof Error) {
+          const message = error.message.toLowerCase();
+          if (message.includes('required')) return false;
+          if (message.includes('banned')) return false;
+          if (message.includes('slug')) return false;
+          if (message.includes('permission')) return false;
+          if (message.includes('not found')) return false;
+          if (message.includes('not allowed')) return false;
+        }
+        
+        return isRetryableError(error);
+      }
+    }
+  ).then((data) => {
+    // Emit success event
+    window.dispatchEvent(new CustomEvent('submission-retry-success', {
+      detail: { id: retryId }
+    }));
+    return data;
+  }).catch((error) => {
+    const errorId = handleError(error, {
+      action: 'Ride update submission',
+      userId,
+      metadata: { retriesExhausted: true, rideId },
+    });
+    
+    // Emit failure event
+    window.dispatchEvent(new CustomEvent('submission-retry-failed', {
+      detail: { id: retryId, errorId }
+    }));
+    
+    throw error;
+  });
+
+  return result;
 }
 
 /**