Initial Commit

2025-09-17 16:09:15 -05:00
parent 0cdb9803de
commit a052040e3a
373 changed files with 437090 additions and 6773 deletions
--- a/frontend/src/core/error-boundaries/MobileErrorBoundary.tsx
+++ b/frontend/src/core/error-boundaries/MobileErrorBoundary.tsx
@@ -0,0 +1,124 @@
+/**
+ * @ai-summary Error boundary component specifically designed for mobile screens
+ */
+
+import React from 'react';
+import { GlassCard } from '../../shared-minimal/components/mobile/GlassCard';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: React.ErrorInfo | null;
+}
+
+interface MobileErrorBoundaryProps {
+  children: React.ReactNode;
+  screenName: string;
+  onRetry?: () => void;
+}
+
+export class MobileErrorBoundary extends React.Component<MobileErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: MobileErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    return { hasError: true, error };
+  }
+
+  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    this.setState({
+      error,
+      errorInfo
+    });
+
+    // Log error for debugging
+    console.error(`Mobile screen error in ${this.props.screenName}:`, error, errorInfo);
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null, errorInfo: null });
+    this.props.onRetry?.();
+  };
+
+  override render() {
+    if (this.state.hasError) {
+      return (
+        <div className="space-y-4 p-4">
+          <GlassCard>
+            <div className="text-center py-8">
+              <div className="mb-4">
+                <div className="mx-auto w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4">
+                  <svg
+                    className="w-8 h-8 text-red-600"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.082 16.5c-.77.833.192 2.5 1.732 2.5z"
+                    />
+                  </svg>
+                </div>
+                <h3 className="text-lg font-semibold text-slate-800 mb-2">
+                  Oops! Something went wrong
+                </h3>
+                <p className="text-slate-600 mb-4">
+                  There was an error loading the {this.props.screenName.toLowerCase()} screen.
+                </p>
+              </div>
+
+              <div className="space-y-3">
+                <button
+                  onClick={this.handleRetry}
+                  className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  Try Again
+                </button>
+
+                <button
+                  onClick={() => window.location.reload()}
+                  className="w-full px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
+                >
+                  Refresh App
+                </button>
+              </div>
+
+              {process.env.NODE_ENV === 'development' && this.state.error && (
+                <details className="mt-6 text-left">
+                  <summary className="text-sm text-slate-500 cursor-pointer">
+                    Error Details (Development)
+                  </summary>
+                  <div className="mt-2 p-3 bg-red-50 rounded text-xs text-red-800 overflow-auto">
+                    <div className="font-semibold mb-1">Error:</div>
+                    <div className="mb-2">{this.state.error.message}</div>
+
+                    <div className="font-semibold mb-1">Stack Trace:</div>
+                    <pre className="whitespace-pre-wrap text-xs">
+                      {this.state.error.stack}
+                    </pre>
+
+                    {this.state.errorInfo && (
+                      <>
+                        <div className="font-semibold mb-1 mt-2">Component Stack:</div>
+                        <pre className="whitespace-pre-wrap text-xs">
+                          {this.state.errorInfo.componentStack}
+                        </pre>
+                      </>
+                    )}
+                  </div>
+                </details>
+              )}
+            </div>
+          </GlassCard>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}