Approve database migration

src/pages/admin/ErrorLookup.tsx

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { AdminLayout } from '@/components/layout/AdminLayout';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Search } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import { toast } from 'sonner';
+
+export default function ErrorLookup() {
+  const [errorId, setErrorId] = useState('');
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const handleSearch = async () => {
+    if (!errorId.trim()) {
+      toast.error('Please enter an error ID');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // Search by partial or full request ID
+      const { data, error } = await supabase
+        .from('request_metadata')
+        .select('*')
+        .ilike('request_id', `${errorId}%`)
+        .not('error_type', 'is', null)
+        .limit(1)
+        .single();
+
+      if (error || !data) {
+        toast.error('Error not found', {
+          description: 'No error found with this ID. Please check the ID and try again.',
+        });
+        return;
+      }
+
+      // Navigate to error monitoring with this error pre-selected
+      navigate('/admin/error-monitoring', { state: { selectedErrorId: data.request_id } });
+    } catch (err) {
+      toast.error('Search failed', {
+        description: 'An error occurred while searching. Please try again.',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <AdminLayout>
+      <div className="max-w-2xl mx-auto space-y-6">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Error Lookup</h1>
+          <p className="text-muted-foreground">
+            Search for specific errors by their reference ID
+          </p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Search by Error ID</CardTitle>
+            <CardDescription>
+              Enter the error reference ID provided to users (first 8 characters are sufficient)
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex gap-2">
+              <Input
+                placeholder="e.g., a3f7b2c1"
+                value={errorId}
+                onChange={(e) => setErrorId(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+                className="font-mono"
+              />
+              <Button onClick={handleSearch} disabled={loading}>
+                <Search className="w-4 h-4 mr-2" />
+                Search
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </AdminLayout>
+  );
+}