Approve database migration

src/components/admin/ErrorAnalytics.tsx

@@ -0,0 +1,83 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
+import { AlertCircle, TrendingUp, Users, Zap } from 'lucide-react';
+
+interface ErrorAnalyticsProps {
+  errorSummary: any[] | undefined;
+}
+
+export function ErrorAnalytics({ errorSummary }: ErrorAnalyticsProps) {
+  if (!errorSummary || errorSummary.length === 0) {
+    return null;
+  }
+
+  const totalErrors = errorSummary.reduce((sum, item) => sum + item.occurrence_count, 0);
+  const totalAffectedUsers = errorSummary.reduce((sum, item) => sum + item.affected_users, 0);
+  const avgDuration = errorSummary.reduce((sum, item) => sum + (item.avg_duration_ms || 0), 0) / errorSummary.length;
+
+  const topErrors = errorSummary.slice(0, 5);
+
+  return (
+    <div className="grid gap-4 md:grid-cols-4">
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Total Errors</CardTitle>
+          <AlertCircle className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{totalErrors}</div>
+          <p className="text-xs text-muted-foreground">Last 30 days</p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Error Types</CardTitle>
+          <TrendingUp className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{errorSummary.length}</div>
+          <p className="text-xs text-muted-foreground">Unique error types</p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Affected Users</CardTitle>
+          <Users className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{totalAffectedUsers}</div>
+          <p className="text-xs text-muted-foreground">Users impacted</p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Avg Duration</CardTitle>
+          <Zap className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{Math.round(avgDuration)}ms</div>
+          <p className="text-xs text-muted-foreground">Before error occurs</p>
+        </CardContent>
+      </Card>
+
+      <Card className="col-span-full">
+        <CardHeader>
+          <CardTitle>Top 5 Errors</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={300}>
+            <BarChart data={topErrors}>
+              <XAxis dataKey="error_type" />
+              <YAxis />
+              <Tooltip />
+              <Bar dataKey="occurrence_count" fill="hsl(var(--destructive))" />
+            </BarChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/components/admin/ErrorDetailsModal.tsx

@@ -0,0 +1,173 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Copy, ExternalLink } from 'lucide-react';
+import { format } from 'date-fns';
+import { toast } from 'sonner';
+
+interface ErrorDetailsModalProps {
+  error: any;
+  onClose: () => void;
+}
+
+export function ErrorDetailsModal({ error, onClose }: ErrorDetailsModalProps) {
+  const copyErrorId = () => {
+    navigator.clipboard.writeText(error.request_id);
+    toast.success('Error ID copied to clipboard');
+  };
+
+  const copyErrorReport = () => {
+    const report = `
+Error Report
+============
+Request ID: ${error.request_id}
+Timestamp: ${format(new Date(error.created_at), 'PPpp')}
+Type: ${error.error_type}
+Endpoint: ${error.endpoint}
+Method: ${error.method}
+Status: ${error.status_code}
+Duration: ${error.duration_ms}ms
+
+Error Message:
+${error.error_message}
+
+${error.error_stack ? `Stack Trace:\n${error.error_stack}` : ''}
+`.trim();
+    
+    navigator.clipboard.writeText(report);
+    toast.success('Error report copied to clipboard');
+  };
+
+  return (
+    <Dialog open onOpenChange={onClose}>
+      <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            Error Details
+            <Badge variant="destructive">{error.error_type}</Badge>
+          </DialogTitle>
+        </DialogHeader>
+
+        <Tabs defaultValue="overview" className="w-full">
+          <TabsList>
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="stack">Stack Trace</TabsTrigger>
+            <TabsTrigger value="breadcrumbs">Breadcrumbs</TabsTrigger>
+            <TabsTrigger value="environment">Environment</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="overview" className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="text-sm font-medium">Request ID</label>
+                <div className="flex items-center gap-2">
+                  <code className="text-sm bg-muted px-2 py-1 rounded">
+                    {error.request_id}
+                  </code>
+                  <Button size="sm" variant="ghost" onClick={copyErrorId}>
+                    <Copy className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+              <div>
+                <label className="text-sm font-medium">Timestamp</label>
+                <p className="text-sm">{format(new Date(error.created_at), 'PPpp')}</p>
+              </div>
+              <div>
+                <label className="text-sm font-medium">Endpoint</label>
+                <p className="text-sm font-mono">{error.endpoint}</p>
+              </div>
+              <div>
+                <label className="text-sm font-medium">Method</label>
+                <Badge variant="outline">{error.method}</Badge>
+              </div>
+              <div>
+                <label className="text-sm font-medium">Status Code</label>
+                <p className="text-sm">{error.status_code}</p>
+              </div>
+              <div>
+                <label className="text-sm font-medium">Duration</label>
+                <p className="text-sm">{error.duration_ms}ms</p>
+              </div>
+              {error.user_id && (
+                <div>
+                  <label className="text-sm font-medium">User ID</label>
+                  <a 
+                    href={`/admin/users?search=${error.user_id}`}
+                    className="text-sm text-primary hover:underline flex items-center gap-1"
+                  >
+                    {error.user_id.slice(0, 8)}...
+                    <ExternalLink className="w-3 h-3" />
+                  </a>
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label className="text-sm font-medium">Error Message</label>
+              <div className="bg-muted p-4 rounded-lg mt-2">
+                <p className="text-sm font-mono">{error.error_message}</p>
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="stack">
+            {error.error_stack ? (
+              <pre className="bg-muted p-4 rounded-lg overflow-x-auto text-xs">
+                {error.error_stack}
+              </pre>
+            ) : (
+              <p className="text-muted-foreground">No stack trace available</p>
+            )}
+          </TabsContent>
+
+          <TabsContent value="breadcrumbs">
+            {error.breadcrumbs && error.breadcrumbs.length > 0 ? (
+              <div className="space-y-2">
+                {error.breadcrumbs.map((crumb: any, index: number) => (
+                  <div key={index} className="border-l-2 border-primary pl-4 py-2">
+                    <div className="flex items-center gap-2 mb-1">
+                      <Badge variant="outline" className="text-xs">
+                        {crumb.category}
+                      </Badge>
+                      <span className="text-xs text-muted-foreground">
+                        {format(new Date(crumb.timestamp), 'HH:mm:ss.SSS')}
+                      </span>
+                    </div>
+                    <p className="text-sm">{crumb.message}</p>
+                    {crumb.data && (
+                      <pre className="text-xs text-muted-foreground mt-1">
+                        {JSON.stringify(crumb.data, null, 2)}
+                      </pre>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-muted-foreground">No breadcrumbs recorded</p>
+            )}
+          </TabsContent>
+
+          <TabsContent value="environment">
+            {error.environment_context ? (
+              <pre className="bg-muted p-4 rounded-lg overflow-x-auto text-xs">
+                {JSON.stringify(error.environment_context, null, 2)}
+              </pre>
+            ) : (
+              <p className="text-muted-foreground">No environment context available</p>
+            )}
+          </TabsContent>
+        </Tabs>
+
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={copyErrorReport}>
+            <Copy className="w-4 h-4 mr-2" />
+            Copy Report
+          </Button>
+          <Button onClick={onClose}>Close</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/error/AdminErrorBoundary.tsx

@@ -48,15 +48,19 @@ export class AdminErrorBoundary extends Component<AdminErrorBoundaryProps, Admin
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Generate error ID for user reference
+    const errorId = crypto.randomUUID();
+    
     logger.error('Admin panel error caught by boundary', {
       section: this.props.section || 'unknown',
       error: error.message,
       stack: error.stack,
       componentStack: errorInfo.componentStack,
       severity: 'high', // Admin errors are high priority
+      errorId,
     });
 
-    this.setState({ errorInfo });
+    this.setState({ errorInfo, error: { ...error, errorId } as any });
   }
 
   handleRetry = () => {
@@ -107,6 +111,11 @@ export class AdminErrorBoundary extends Component<AdminErrorBoundaryProps, Admin
                     <p className="text-sm">
                       {this.state.error?.message || 'An unexpected error occurred in the admin panel'}
                     </p>
+                    {(this.state.error as any)?.errorId && (
+                      <p className="text-xs font-mono bg-destructive/10 px-2 py-1 rounded">
+                        Reference ID: {((this.state.error as any).errorId as string).slice(0, 8)}
+                      </p>
+                    )}
                     <p className="text-xs text-muted-foreground">
                       This error has been logged. If the problem persists, please contact support.
                     </p>

src/components/error/EntityErrorBoundary.tsx

@@ -49,15 +49,19 @@ export class EntityErrorBoundary extends Component<EntityErrorBoundaryProps, Ent
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Generate error ID for user reference
+    const errorId = crypto.randomUUID();
+    
     logger.error('Entity page error caught by boundary', {
       entityType: this.props.entityType,
       entitySlug: this.props.entitySlug,
       error: error.message,
       stack: error.stack,
       componentStack: errorInfo.componentStack,
+      errorId,
     });
 
-    this.setState({ errorInfo });
+    this.setState({ errorInfo, error: { ...error, errorId } as any });
   }
 
   handleRetry = () => {
@@ -127,6 +131,11 @@ export class EntityErrorBoundary extends Component<EntityErrorBoundaryProps, Ent
                     <p className="text-sm">
                       {this.state.error?.message || `An unexpected error occurred while loading this ${entityLabel.toLowerCase()}`}
                     </p>
+                    {(this.state.error as any)?.errorId && (
+                      <p className="text-xs font-mono bg-destructive/10 px-2 py-1 rounded">
+                        Reference ID: {((this.state.error as any).errorId as string).slice(0, 8)}
+                      </p>
+                    )}
                     <p className="text-xs text-muted-foreground">
                       This might be due to:
                     </p>

src/components/error/ErrorBoundary.tsx

@@ -49,15 +49,19 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Generate error ID for user reference
+    const errorId = crypto.randomUUID();
+    
     // Log error with context
     logger.error('Component error caught by boundary', {
       context: this.props.context || 'unknown',
       error: error.message,
       stack: error.stack,
       componentStack: errorInfo.componentStack,
+      errorId,
     });
 
-    this.setState({ errorInfo });
+    this.setState({ errorInfo, error: { ...error, errorId } as any });
     this.props.onError?.(error, errorInfo);
   }
 
@@ -101,6 +105,11 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
                   <p className="text-sm mt-2">
                     {this.state.error?.message || 'An unexpected error occurred'}
                   </p>
+                  {(this.state.error as any)?.errorId && (
+                    <p className="text-xs mt-2 font-mono bg-destructive/10 px-2 py-1 rounded">
+                      Reference ID: {((this.state.error as any).errorId as string).slice(0, 8)}
+                    </p>
+                  )}
                 </AlertDescription>
               </Alert>
 

src/components/error/RouteErrorBoundary.tsx

@@ -43,6 +43,9 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Generate error ID for user reference
+    const errorId = crypto.randomUUID();
+    
     // Critical: Route-level error - highest priority logging
     logger.error('Route-level error caught by boundary', {
       error: error.message,
@@ -50,7 +53,10 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
       componentStack: errorInfo.componentStack,
       url: window.location.href,
       severity: 'critical',
+      errorId,
     });
+
+    this.setState({ error: { ...error, errorId } as any });
   }
 
   handleReload = () => {
@@ -78,11 +84,18 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
-              {import.meta.env.DEV && this.state.error && (
-                <div className="p-3 bg-muted rounded-lg">
-                  <p className="text-xs font-mono text-muted-foreground">
-                    {this.state.error.message}
-                  </p>
+              {this.state.error && (
+                <div className="p-3 bg-muted rounded-lg space-y-2">
+                  {import.meta.env.DEV && (
+                    <p className="text-xs font-mono text-muted-foreground">
+                      {this.state.error.message}
+                    </p>
+                  )}
+                  {(this.state.error as any)?.errorId && (
+                    <p className="text-xs font-mono bg-destructive/10 px-2 py-1 rounded">
+                      Reference ID: {((this.state.error as any).errorId as string).slice(0, 8)}
+                    </p>
+                  )}
                 </div>
               )}
 

src/components/layout/AdminSidebar.tsx

@@ -1,4 +1,4 @@
-import { LayoutDashboard, FileText, Flag, Users, Settings, ArrowLeft, ScrollText, BookOpen, Inbox, Mail } from 'lucide-react';
+import { LayoutDashboard, FileText, Flag, Users, Settings, ArrowLeft, ScrollText, BookOpen, Inbox, Mail, AlertTriangle } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useSidebar } from '@/hooks/useSidebar';
@@ -48,6 +48,11 @@ export function AdminSidebar() {
       url: '/admin/system-log',
       icon: ScrollText,
     },
+    {
+      title: 'Error Monitoring',
+      url: '/admin/error-monitoring',
+      icon: AlertTriangle,
+    },
     {
       title: 'Users',
       url: '/admin/users',