Implement client-side resilience UI

Create NetworkErrorBanner, SubmissionQueueIndicator, and enhanced retry progress UI components. Integrate them into the application using a ResilienceProvider to manage network status and submission queue states. Update App.tsx to include the ResilienceProvider.

src/App.tsx

@@ -20,6 +20,7 @@ import { breadcrumb } from "@/lib/errorBreadcrumbs";
 import { handleError } from "@/lib/errorHandler";
 import { RetryStatusIndicator } from "@/components/ui/retry-status-indicator";
 import { APIStatusBanner } from "@/components/ui/api-status-banner";
+import { ResilienceProvider } from "@/components/layout/ResilienceProvider";
 import { useAdminRoutePreload } from "@/hooks/useAdminRoutePreload";
 import { useVersionCheck } from "@/hooks/useVersionCheck";
 import { cn } from "@/lib/utils";
@@ -147,18 +148,19 @@ function AppContent(): React.JSX.Element {
 
   return (
     <TooltipProvider>
-      <APIStatusBanner />
-      <div className={cn(showBanner && "pt-20")}>
-        <NavigationTracker />
-        <LocationAutoDetectProvider />
-        <RetryStatusIndicator />
-        <Toaster />
-        <Sonner />
-        <div className="min-h-screen flex flex-col">
-          <div className="flex-1">
-            <Suspense fallback={<PageLoader />}>
-              <RouteErrorBoundary>
-                <Routes>
+      <ResilienceProvider>
+        <APIStatusBanner />
+        <div className={cn(showBanner && "pt-20")}>
+          <NavigationTracker />
+          <LocationAutoDetectProvider />
+          <RetryStatusIndicator />
+          <Toaster />
+          <Sonner />
+          <div className="min-h-screen flex flex-col">
+            <div className="flex-1">
+              <Suspense fallback={<PageLoader />}>
+                <RouteErrorBoundary>
+                  <Routes>
                   {/* Core routes - eager loaded */}
                   <Route path="/" element={<Index />} />
                   <Route path="/parks" element={<Parks />} />
@@ -401,6 +403,7 @@ function AppContent(): React.JSX.Element {
           <Footer />
         </div>
       </div>
+      </ResilienceProvider>
     </TooltipProvider>
   );
 }