update

frontend/src/App.jsx

@@ -1,111 +1,3 @@
-<<<<<<< HEAD
-// frontend/src/App.jsx
-
-import React, { useEffect } from "react";
-import { Routes, Route, useNavigate, useSearchParams } from "react-router-dom";
-import { AuthProvider, useAuth } from "./contexts/AuthContext";
-import Layout from "./Layout";
-import Dashboard from "./pages/Dashboard";
-import History from "./pages/History";
-import ShareHandler from "./pages/ShareHandler";
-import LoginForm from "./components/auth/LoginForm";
-
-// Auth callback handler component
-function AuthCallback() {
-  const [searchParams] = useSearchParams();
-  const { handleAuthCallback } = useAuth();
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    const token = searchParams.get("token");
-    if (token) {
-      handleAuthCallback(token);
-      navigate("/");
-    } else {
-      navigate("/");
-    }
-  }, [searchParams, handleAuthCallback, navigate]);
-
-  return (
-    <div className="min-h-screen flex items-center justify-center">
-      <div className="text-center">
-        <p className="text-slate-600">Completing authentication...</p>
-      </div>
-    </div>
-  );
-}
-
-// Protected route wrapper
-function ProtectedRoute({ children }) {
-  const { isAuthenticated, loading } = useAuth();
-
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <div className="h-16 w-16 mx-auto rounded-2xl bg-indigo-100 flex items-center justify-center mb-4 animate-pulse">
-            <div className="h-8 w-8 rounded-lg bg-indigo-600"></div>
-          </div>
-          <p className="text-slate-600">Loading...</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (!isAuthenticated) {
-    return <LoginForm />;
-  }
-
-  return children;
-}
-
-function AppRoutes() {
-  return (
-    <Routes>
-      <Route
-        path="/auth/callback"
-        element={<AuthCallback />}
-      />
-      <Route
-        path="/share/:token"
-        element={
-          <ProtectedRoute>
-            <ShareHandler />
-          </ProtectedRoute>
-        }
-      />
-      <Route
-        path="/"
-        element={
-          <ProtectedRoute>
-            <Layout currentPageName="Dashboard">
-              <Dashboard />
-            </Layout>
-          </ProtectedRoute>
-        }
-      />
-      <Route
-        path="/history"
-        element={
-          <ProtectedRoute>
-            <Layout currentPageName="History">
-              <History />
-            </Layout>
-          </ProtectedRoute>
-        }
-      />
-    </Routes>
-  );
-}
-
-export default function App() {
-  return (
-    <AuthProvider>
-      <AppRoutes />
-    </AuthProvider>
-  );
-}
-=======
 // frontend/src/App.jsx
 
 import React, { useEffect } from "react";
@@ -114,6 +6,7 @@ import { AuthProvider, useAuth } from "./contexts/AuthContext";
 import Layout from "./Layout";
 import Dashboard from "./pages/Dashboard";
 import History from "./pages/History";
+import APIKeys from "./pages/APIKeys";
 import ShareHandler from "./pages/ShareHandler";
 import LoginForm from "./components/auth/LoginForm";
 
@@ -201,6 +94,16 @@ function AppRoutes() {
           </ProtectedRoute>
         }
       />
+      <Route
+        path="/api-keys"
+        element={
+          <ProtectedRoute>
+            <Layout currentPageName="API Keys">
+              <APIKeys />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
     </Routes>
   );
 }
@@ -212,4 +115,3 @@ export default function App() {
     </AuthProvider>
   );
 }
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d

frontend/src/Layout.jsx

@@ -1,184 +1,3 @@
-<<<<<<< HEAD
-// frontend/src/Layout.jsx
-
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import { createPageUrl } from "./utils";
-import {
-  LayoutDashboard,
-  History as HistoryIcon,
-  ChevronLeft,
-  Sparkles,
-  LogOut,
-  User,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-import { useAuth } from "./contexts/AuthContext";
-
-// Import logo - Vite will process this and handle the path correctly
-// For production, the logo should be in frontend/public/logo.png
-// Vite will copy it to dist/logo.png during build
-const logoPath = "/logo.png";
-
-export default function Layout({ children, currentPageName }) {
-  const [collapsed, setCollapsed] = useState(false);
-  const { user, logout } = useAuth();
-
-  const navItems = [
-    { name: "Dashboard", icon: LayoutDashboard, page: "Dashboard" },
-    { name: "History", icon: HistoryIcon, page: "History" },
-  ];
-
-  return (
-    <div className="min-h-screen bg-[#FAFAFA] flex">
-      {/* Sidebar */}
-      <aside
-        className={cn(
-          "fixed left-0 top-0 h-screen bg-white border-r border-slate-200/80 z-50 transition-all duration-300 ease-out flex flex-col",
-          collapsed ? "w-[72px]" : "w-[260px]"
-        )}
-      >
-        {/* Logo */}
-        <div
-          className={cn(
-            "h-16 flex items-center border-b border-slate-100 px-4",
-            collapsed ? "justify-center" : "justify-between"
-          )}
-        >
-          <Link to={createPageUrl("Dashboard")} className="flex items-center gap-3">
-            <div className="h-9 w-9 flex items-center justify-center flex-shrink-0">
-              <img 
-                src={logoPath}
-                alt="EZOFIS AI Logo" 
-                className="h-full w-full object-contain"
-                onError={(e) => {
-                  // Fallback: hide image and show placeholder if logo not found
-                  e.target.style.display = 'none';
-                }}
-              />
-            </div>
-            {!collapsed && (
-              <div className="flex flex-col">
-                <span className="font-semibold text-slate-900 tracking-tight">EZOFIS AI</span>
-                <span className="text-[10px] text-slate-400 font-medium tracking-wide uppercase">
-                  VRP Intelligence
-                </span>
-              </div>
-            )}
-          </Link>
-          {!collapsed && (
-            <button
-              onClick={() => setCollapsed(true)}
-              className="h-7 w-7 rounded-lg hover:bg-slate-100 flex items-center justify-center text-slate-400 hover:text-slate-600 transition-colors"
-            >
-              <ChevronLeft className="h-4 w-4" />
-            </button>
-          )}
-        </div>
-
-        {/* Navigation */}
-        <nav className="flex-1 p-3 space-y-1">
-          {navItems.map((item) => {
-            const isActive = currentPageName === item.page;
-            return (
-              <Link
-                key={item.name}
-                to={createPageUrl(item.page)}
-                className={cn(
-                  "flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 group",
-                  isActive
-                    ? "bg-gradient-to-r from-indigo-50 to-violet-50 text-indigo-600"
-                    : "text-slate-500 hover:bg-slate-50 hover:text-slate-700"
-                )}
-              >
-                <item.icon
-                  className={cn(
-                    "h-5 w-5 flex-shrink-0",
-                    isActive ? "text-indigo-600" : "text-slate-400 group-hover:text-slate-600"
-                  )}
-                />
-                {!collapsed && (
-                  <span className="font-medium text-sm">{item.name}</span>
-                )}
-              </Link>
-            );
-          })}
-        </nav>
-
-        {/* Collapse Toggle (when collapsed) */}
-        {collapsed && (
-          <button
-            onClick={() => setCollapsed(false)}
-            className="m-3 h-10 rounded-xl bg-slate-50 hover:bg-slate-100 flex items-center justify-center text-slate-400 hover:text-slate-600 transition-colors"
-          >
-            <ChevronLeft className="h-4 w-4 rotate-180" />
-          </button>
-        )}
-
-        {/* Pro Badge */}
-        {!collapsed && (
-          <div className="p-3">
-            <div className="p-4 rounded-2xl bg-gradient-to-br from-slate-900 to-slate-800 text-white">
-              <div className="flex items-center gap-2 mb-2">
-                <Sparkles className="h-4 w-4 text-amber-400" />
-                <span className="text-xs font-semibold tracking-wide">DEPLOY CUSTOM AGENT</span>
-              </div>
-              <p className="text-xs text-slate-400 mb-3">
-              Batch extractions, custom model, field mapping, complex lineitems, tables, workflows,  &amp; API access
-              </p>
-              <button className="w-full py-2 px-3 rounded-lg bg-white text-slate-900 text-sm font-semibold hover:bg-slate-100 transition-colors">
-                Book a Custom Demo
-              </button>
-            </div>
-          </div>
-        )}
-
-        {/* User Profile */}
-        {!collapsed && user && (
-          <div className="p-3 border-t border-slate-200">
-            <div className="flex items-center gap-3 p-3 rounded-xl bg-slate-50 hover:bg-slate-100 transition-colors">
-              {user.picture ? (
-                <img
-                  src={user.picture}
-                  alt={user.name || user.email}
-                  className="h-10 w-10 rounded-lg object-cover"
-                />
-              ) : (
-                <div className="h-10 w-10 rounded-lg bg-indigo-100 flex items-center justify-center">
-                  <User className="h-5 w-5 text-indigo-600" />
-                </div>
-              )}
-              <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-slate-900 truncate">
-                  {user.name || "User"}
-                </p>
-                <p className="text-xs text-slate-500 truncate">{user.email}</p>
-              </div>
-            </div>
-            <button
-              onClick={logout}
-              className="mt-2 w-full flex items-center gap-2 px-3 py-2 rounded-xl text-sm text-slate-600 hover:bg-red-50 hover:text-red-600 transition-colors"
-            >
-              <LogOut className="h-4 w-4" />
-              <span>Sign Out</span>
-            </button>
-          </div>
-        )}
-      </aside>
-
-      {/* Main Content */}
-      <main
-        className={cn(
-          "flex-1 transition-all duration-300",
-          collapsed ? "ml-[72px]" : "ml-[260px]"
-        )}
-      >
-        {children}
-      </main>
-    </div>
-  );
-}
-=======
 // frontend/src/Layout.jsx
 
 import React, { useState } from "react";
@@ -187,6 +6,7 @@ import { createPageUrl } from "./utils";
 import {
   LayoutDashboard,
   History as HistoryIcon,
+  Key,
   ChevronLeft,
   Sparkles,
   LogOut,
@@ -207,6 +27,7 @@ export default function Layout({ children, currentPageName }) {
   const navItems = [
     { name: "Dashboard", icon: LayoutDashboard, page: "Dashboard" },
     { name: "History", icon: HistoryIcon, page: "History" },
+    { name: "API Keys", icon: Key, page: "API Keys" },
   ];
 
   return (
@@ -358,4 +179,3 @@ export default function Layout({ children, currentPageName }) {
     </div>
   );
 }
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d

frontend/src/pages/APIKeys.jsx

@@ -0,0 +1,592 @@
+import React, { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  Key,
+  Plus,
+  Trash2,
+  Copy,
+  Check,
+  Eye,
+  EyeOff,
+  Code,
+  FileText,
+  AlertCircle,
+  Clock,
+  Sparkles,
+  ExternalLink,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import { createAPIKey, listAPIKeys, deleteAPIKey } from "@/services/api";
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || "https://seth0330-ezofisocr.hf.space";
+
+export default function APIKeys() {
+  const [apiKeys, setApiKeys] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [newKeyName, setNewKeyName] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const [newlyCreatedKey, setNewlyCreatedKey] = useState(null);
+  const [copiedKeyId, setCopiedKeyId] = useState(null);
+  const [visibleKeys, setVisibleKeys] = useState(new Set());
+
+  // Fetch API keys on mount
+  useEffect(() => {
+    fetchAPIKeys();
+  }, []);
+
+  const fetchAPIKeys = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await listAPIKeys();
+      setApiKeys(response.api_keys || []);
+    } catch (err) {
+      setError(err.message || "Failed to load API keys");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCreateKey = async () => {
+    if (!newKeyName.trim()) {
+      setError("Please enter a name for your API key");
+      return;
+    }
+
+    setIsCreating(true);
+    setError(null);
+    try {
+      const response = await createAPIKey(newKeyName.trim());
+      setNewlyCreatedKey(response.api_key);
+      setNewKeyName("");
+      setShowCreateModal(false);
+      await fetchAPIKeys();
+    } catch (err) {
+      setError(err.message || "Failed to create API key");
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const handleDeleteKey = async (keyId) => {
+    if (!confirm("Are you sure you want to deactivate this API key? This action cannot be undone.")) {
+      return;
+    }
+
+    try {
+      await deleteAPIKey(keyId);
+      await fetchAPIKeys();
+    } catch (err) {
+      setError(err.message || "Failed to delete API key");
+    }
+  };
+
+  const copyToClipboard = (text, keyId = null) => {
+    navigator.clipboard.writeText(text);
+    if (keyId) {
+      setCopiedKeyId(keyId);
+      setTimeout(() => setCopiedKeyId(null), 2000);
+    }
+  };
+
+  const toggleKeyVisibility = (keyId) => {
+    const newVisible = new Set(visibleKeys);
+    if (newVisible.has(keyId)) {
+      newVisible.delete(keyId);
+    } else {
+      newVisible.add(keyId);
+    }
+    setVisibleKeys(newVisible);
+  };
+
+  const formatDate = (dateString) => {
+    if (!dateString) return "Never";
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  return (
+    <div className="min-h-screen bg-[#FAFAFA]">
+      {/* Header */}
+      <header className="bg-white border-b border-slate-200/80 sticky top-0 z-40 h-16">
+        <div className="px-8 h-full flex items-center justify-between">
+          <div>
+            <h1 className="text-xl font-bold text-slate-900 tracking-tight leading-tight">
+              API Keys
+            </h1>
+            <p className="text-sm text-slate-500 leading-tight">
+              Manage API keys for external application access
+            </p>
+          </div>
+          <Button
+            onClick={() => setShowCreateModal(true)}
+            className="h-10 px-6 rounded-xl font-semibold bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700 shadow-lg shadow-indigo-500/25 hover:shadow-xl hover:shadow-indigo-500/30 transition-all duration-300"
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            Create API Key
+          </Button>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <div className="p-8">
+        {/* Error Message */}
+        {error && (
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="max-w-4xl mx-auto mb-6"
+          >
+            <div className="bg-red-50 border border-red-200 rounded-2xl p-4 flex items-start gap-3">
+              <AlertCircle className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <h3 className="font-semibold text-red-900 mb-1">Error</h3>
+                <p className="text-sm text-red-700">{error}</p>
+              </div>
+              <button
+                onClick={() => setError(null)}
+                className="text-red-400 hover:text-red-600 transition-colors"
+              >
+                ×
+              </button>
+            </div>
+          </motion.div>
+        )}
+
+        {/* Success Message for New Key */}
+        {newlyCreatedKey && (
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="max-w-4xl mx-auto mb-6"
+          >
+            <div className="bg-emerald-50 border border-emerald-200 rounded-2xl p-6">
+              <div className="flex items-start gap-3 mb-4">
+                <div className="h-10 w-10 rounded-xl bg-emerald-100 flex items-center justify-center flex-shrink-0">
+                  <Check className="h-5 w-5 text-emerald-600" />
+                </div>
+                <div className="flex-1">
+                  <h3 className="font-semibold text-emerald-900 mb-1">
+                    API Key Created Successfully!
+                  </h3>
+                  <p className="text-sm text-emerald-700 mb-4">
+                    ⚠️ Store this key securely - it will not be shown again.
+                  </p>
+                  <div className="bg-white rounded-xl p-4 border border-emerald-200">
+                    <div className="flex items-center gap-2 mb-2">
+                      <Key className="h-4 w-4 text-slate-500" />
+                      <span className="text-xs font-medium text-slate-500 uppercase tracking-wide">
+                        Your API Key
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <code className="flex-1 font-mono text-sm text-slate-900 break-all">
+                        {newlyCreatedKey}
+                      </code>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => copyToClipboard(newlyCreatedKey)}
+                        className="flex-shrink-0"
+                      >
+                        {copiedKeyId === "new" ? (
+                          <Check className="h-4 w-4 text-emerald-600" />
+                        ) : (
+                          <Copy className="h-4 w-4" />
+                        )}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <Button
+                onClick={() => setNewlyCreatedKey(null)}
+                className="w-full bg-emerald-600 hover:bg-emerald-700 text-white"
+              >
+                I've Saved My Key
+              </Button>
+            </div>
+          </motion.div>
+        )}
+
+        {/* API Keys List */}
+        <div className="max-w-4xl mx-auto">
+          {isLoading ? (
+            <div className="bg-white rounded-2xl border border-slate-200 p-12 text-center">
+              <div className="h-12 w-12 mx-auto rounded-2xl bg-indigo-100 flex items-center justify-center mb-4 animate-pulse">
+                <Key className="h-6 w-6 text-indigo-600" />
+              </div>
+              <p className="text-slate-600">Loading API keys...</p>
+            </div>
+          ) : apiKeys.length === 0 ? (
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="bg-white rounded-2xl border border-slate-200 p-12 text-center"
+            >
+              <div className="h-16 w-16 mx-auto rounded-2xl bg-slate-100 flex items-center justify-center mb-4">
+                <Key className="h-8 w-8 text-slate-400" />
+              </div>
+              <h3 className="text-lg font-semibold text-slate-900 mb-2">
+                No API Keys Yet
+              </h3>
+              <p className="text-slate-500 mb-6">
+                Create your first API key to start using the API from external applications
+              </p>
+              <Button
+                onClick={() => setShowCreateModal(true)}
+                className="h-11 px-6 rounded-xl font-semibold bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700"
+              >
+                <Plus className="h-4 w-4 mr-2" />
+                Create Your First API Key
+              </Button>
+            </motion.div>
+          ) : (
+            <div className="space-y-4">
+              {apiKeys.map((key) => (
+                <motion.div
+                  key={key.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="bg-white rounded-2xl border border-slate-200 p-6 hover:shadow-lg transition-shadow"
+                >
+                  <div className="flex items-start justify-between mb-4">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3 mb-2">
+                        <Key className="h-5 w-5 text-indigo-600" />
+                        <h3 className="font-semibold text-slate-900">{key.name}</h3>
+                        {key.is_active ? (
+                          <Badge className="bg-emerald-50 text-emerald-700 border-emerald-200">
+                            Active
+                          </Badge>
+                        ) : (
+                          <Badge className="bg-slate-100 text-slate-600 border-slate-200">
+                            Inactive
+                          </Badge>
+                        )}
+                      </div>
+                      <div className="ml-8 space-y-2">
+                        <div className="flex items-center gap-2 text-sm text-slate-500">
+                          <span className="font-mono">{key.key_prefix}</span>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => toggleKeyVisibility(key.id)}
+                            className="h-6 px-2"
+                          >
+                            {visibleKeys.has(key.id) ? (
+                              <EyeOff className="h-3 w-3" />
+                            ) : (
+                              <Eye className="h-3 w-3" />
+                            )}
+                          </Button>
+                        </div>
+                        <div className="flex items-center gap-4 text-xs text-slate-400">
+                          <div className="flex items-center gap-1">
+                            <Clock className="h-3 w-3" />
+                            <span>Created: {formatDate(key.created_at)}</span>
+                          </div>
+                          {key.last_used_at && (
+                            <div className="flex items-center gap-1">
+                              <Sparkles className="h-3 w-3" />
+                              <span>Last used: {formatDate(key.last_used_at)}</span>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => handleDeleteKey(key.id)}
+                      className="text-red-600 hover:text-red-700 hover:bg-red-50"
+                      disabled={!key.is_active}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* API Usage Guide */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+          className="max-w-4xl mx-auto mt-12"
+        >
+          <div className="bg-white rounded-2xl border border-slate-200 p-8">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="h-12 w-12 rounded-xl bg-indigo-50 flex items-center justify-center">
+                <Code className="h-6 w-6 text-indigo-600" />
+              </div>
+              <div>
+                <h2 className="text-xl font-bold text-slate-900">How to Use API Keys</h2>
+                <p className="text-sm text-slate-500">
+                  Integrate document parsing into your external applications
+                </p>
+              </div>
+            </div>
+
+            <div className="space-y-6">
+              {/* Python Example */}
+              <div className="bg-slate-50 rounded-xl p-6 border border-slate-200">
+                <div className="flex items-center gap-2 mb-4">
+                  <FileText className="h-5 w-5 text-slate-600" />
+                  <h3 className="font-semibold text-slate-900">Python Example</h3>
+                </div>
+                <pre className="bg-slate-900 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm">
+                  <code>{`import requests
+
+API_URL = "${API_BASE_URL}"
+API_KEY = "sk_live_YOUR_API_KEY_HERE"
+
+def extract_document(file_path, key_fields=None):
+    with open(file_path, 'rb') as f:
+        files = {'file': f}
+        data = {}
+        if key_fields:
+            data['key_fields'] = key_fields
+        
+        response = requests.post(
+            f"{API_URL}/api/extract",
+            headers={"X-API-Key": API_KEY},
+            files=files,
+            data=data
+        )
+        return response.json()
+
+# Usage
+result = extract_document("invoice.pdf", 
+    key_fields="Invoice Number,Invoice Date")
+print(result)`}</code>
+                </pre>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => copyToClipboard(`import requests
+
+API_URL = "${API_BASE_URL}"
+API_KEY = "sk_live_YOUR_API_KEY_HERE"
+
+def extract_document(file_path, key_fields=None):
+    with open(file_path, 'rb') as f:
+        files = {'file': f}
+        data = {}
+        if key_fields:
+            data['key_fields'] = key_fields
+        
+        response = requests.post(
+            f"{API_URL}/api/extract",
+            headers={"X-API-Key": API_KEY},
+            files=files,
+            data=data
+        )
+        return response.json()
+
+# Usage
+result = extract_document("invoice.pdf", 
+    key_fields="Invoice Number,Invoice Date")
+print(result)`)}
+                  className="mt-3"
+                >
+                  <Copy className="h-3 w-3 mr-2" />
+                  Copy Code
+                </Button>
+              </div>
+
+              {/* cURL Example */}
+              <div className="bg-slate-50 rounded-xl p-6 border border-slate-200">
+                <div className="flex items-center gap-2 mb-4">
+                  <FileText className="h-5 w-5 text-slate-600" />
+                  <h3 className="font-semibold text-slate-900">cURL Example</h3>
+                </div>
+                <pre className="bg-slate-900 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm">
+                  <code>{`curl -X POST ${API_BASE_URL}/api/extract \\
+  -H "X-API-Key: sk_live_YOUR_API_KEY_HERE" \\
+  -F "file=@document.pdf" \\
+  -F "key_fields=Invoice Number,Invoice Date,Total Amount"`}</code>
+                </pre>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => copyToClipboard(`curl -X POST ${API_BASE_URL}/api/extract \\
+  -H "X-API-Key: sk_live_YOUR_API_KEY_HERE" \\
+  -F "file=@document.pdf" \\
+  -F "key_fields=Invoice Number,Invoice Date,Total Amount"`)}
+                  className="mt-3"
+                >
+                  <Copy className="h-3 w-3 mr-2" />
+                  Copy Code
+                </Button>
+              </div>
+
+              {/* JavaScript Example */}
+              <div className="bg-slate-50 rounded-xl p-6 border border-slate-200">
+                <div className="flex items-center gap-2 mb-4">
+                  <FileText className="h-5 w-5 text-slate-600" />
+                  <h3 className="font-semibold text-slate-900">JavaScript/Node.js Example</h3>
+                </div>
+                <pre className="bg-slate-900 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm">
+                  <code>{`const FormData = require('form-data');
+const fs = require('fs');
+const axios = require('axios');
+
+const API_URL = '${API_BASE_URL}';
+const API_KEY = 'sk_live_YOUR_API_KEY_HERE';
+
+async function extractDocument(filePath, keyFields = null) {
+  const form = new FormData();
+  form.append('file', fs.createReadStream(filePath));
+  if (keyFields) {
+    form.append('key_fields', keyFields);
+  }
+
+  const response = await axios.post(
+    \`\${API_URL}/api/extract\`,
+    form,
+    {
+      headers: {
+        'X-API-Key': API_KEY,
+        ...form.getHeaders()
+      }
+    }
+  );
+  return response.data;
+}
+
+// Usage
+extractDocument('invoice.pdf', 'Invoice Number,Invoice Date')
+  .then(result => console.log(result));`}</code>
+                </pre>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => copyToClipboard(`const FormData = require('form-data');
+const fs = require('fs');
+const axios = require('axios');
+
+const API_URL = '${API_BASE_URL}';
+const API_KEY = 'sk_live_YOUR_API_KEY_HERE';
+
+async function extractDocument(filePath, keyFields = null) {
+  const form = new FormData();
+  form.append('file', fs.createReadStream(filePath));
+  if (keyFields) {
+    form.append('key_fields', keyFields);
+  }
+
+  const response = await axios.post(
+    \`\${API_URL}/api/extract\`,
+    form,
+    {
+      headers: {
+        'X-API-Key': API_KEY,
+        ...form.getHeaders()
+      }
+    }
+  );
+  return response.data;
+}
+
+// Usage
+extractDocument('invoice.pdf', 'Invoice Number,Invoice Date')
+  .then(result => console.log(result));`)}
+                  className="mt-3"
+                >
+                  <Copy className="h-3 w-3 mr-2" />
+                  Copy Code
+                </Button>
+              </div>
+            </div>
+
+            <div className="mt-6 p-4 bg-indigo-50 rounded-xl border border-indigo-200">
+              <div className="flex items-start gap-3">
+                <AlertCircle className="h-5 w-5 text-indigo-600 flex-shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <h4 className="font-semibold text-indigo-900 mb-1">API Endpoint</h4>
+                  <p className="text-sm text-indigo-700 mb-2">
+                    <code className="bg-white px-2 py-1 rounded text-indigo-900">
+                      POST {API_BASE_URL}/api/extract
+                    </code>
+                  </p>
+                  <p className="text-xs text-indigo-600">
+                    • Max file size: 4 MB • Supported formats: PDF, PNG, JPEG, TIFF
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+
+      {/* Create API Key Modal */}
+      <AnimatePresence>
+        {showCreateModal && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
+            onClick={() => !isCreating && setShowCreateModal(false)}
+          >
+            <motion.div
+              initial={{ scale: 0.95, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.95, opacity: 0 }}
+              onClick={(e) => e.stopPropagation()}
+              className="bg-white rounded-2xl p-6 max-w-md w-full shadow-2xl"
+            >
+              <h2 className="text-xl font-bold text-slate-900 mb-2">Create New API Key</h2>
+              <p className="text-sm text-slate-500 mb-6">
+                Give your API key a descriptive name to identify it later
+              </p>
+              <Input
+                placeholder="e.g., Production API, Test Environment"
+                value={newKeyName}
+                onChange={(e) => setNewKeyName(e.target.value)}
+                className="mb-6"
+                onKeyPress={(e) => e.key === "Enter" && handleCreateKey()}
+              />
+              <div className="flex gap-3">
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    setShowCreateModal(false);
+                    setNewKeyName("");
+                  }}
+                  disabled={isCreating}
+                  className="flex-1"
+                >
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handleCreateKey}
+                  disabled={isCreating || !newKeyName.trim()}
+                  className="flex-1 bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700"
+                >
+                  {isCreating ? "Creating..." : "Create Key"}
+                </Button>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+

frontend/src/services/api.js

@@ -1,178 +1,3 @@
-<<<<<<< HEAD
-/**
- * API service for communicating with the FastAPI backend
- */
-
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || "";
-
-/**
- * Get authorization headers with token
- */
-function getAuthHeaders() {
-  const token = localStorage.getItem("auth_token");
-  return token ? { Authorization: `Bearer ${token}` } : {};
-}
-
-/**
- * Extract data from a document
- * @param {File} file - The file to extract data from
- * @param {string} keyFields - Optional comma-separated list of fields to extract
- * @returns {Promise<Object>} Extraction result with fields, confidence, etc.
- */
-export async function extractDocument(file, keyFields = "") {
-  const formData = new FormData();
-  formData.append("file", file);
-  if (keyFields && keyFields.trim()) {
-    formData.append("key_fields", keyFields.trim());
-  }
-
-  const response = await fetch(`${API_BASE_URL}/api/extract`, {
-    method: "POST",
-    headers: getAuthHeaders(),
-    body: formData,
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({
-      error: `HTTP ${response.status}: ${response.statusText}`,
-    }));
-    throw new Error(errorData.error || errorData.detail || "Extraction failed");
-  }
-
-  return await response.json();
-}
-
-/**
- * Get extraction history
- * @returns {Promise<Array>} Array of extraction records
- */
-export async function getHistory() {
-  const response = await fetch(`${API_BASE_URL}/api/history`, {
-    headers: getAuthHeaders(),
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({
-      error: `HTTP ${response.status}: ${response.statusText}`,
-    }));
-    throw new Error(errorData.error || errorData.detail || "Failed to fetch history");
-  }
-
-  return await response.json();
-}
-
-/**
- * Get a specific extraction by ID with full fields data
- * @param {number} extractionId - The extraction ID
- * @returns {Promise<Object>} Extraction result with fields
- */
-export async function getExtractionById(extractionId) {
-  const response = await fetch(`${API_BASE_URL}/api/extraction/${extractionId}`, {
-    headers: getAuthHeaders(),
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({
-      error: `HTTP ${response.status}: ${response.statusText}`,
-    }));
-    throw new Error(errorData.error || errorData.detail || "Failed to fetch extraction");
-  }
-
-  return await response.json();
-}
-
-/**
- * Create a shareable link for an extraction
- * @param {number} extractionId - The extraction ID to share
- * @returns {Promise<Object>} Share link result with share_link
- */
-export async function createShareLink(extractionId) {
-  const response = await fetch(`${API_BASE_URL}/api/share/link`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      ...getAuthHeaders(),
-    },
-    body: JSON.stringify({
-      extraction_id: extractionId,
-    }),
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({
-      error: `HTTP ${response.status}: ${response.statusText}`,
-    }));
-    throw new Error(errorData.error || errorData.detail || "Failed to create share link");
-  }
-
-  return await response.json();
-}
-
-/**
- * Share an extraction with another user(s)
- * @param {number} extractionId - The extraction ID to share
- * @param {string|string[]} recipientEmails - Recipient email address(es) - can be a single email or array of emails
- * @returns {Promise<Object>} Share result
- */
-export async function shareExtraction(extractionId, recipientEmails) {
-  // Ensure recipient_emails is always an array
-  const emailsArray = Array.isArray(recipientEmails) ? recipientEmails : [recipientEmails];
-  
-  const response = await fetch(`${API_BASE_URL}/api/share`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      ...getAuthHeaders(),
-    },
-    body: JSON.stringify({
-      extraction_id: extractionId,
-      recipient_emails: emailsArray,
-    }),
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({
-      error: `HTTP ${response.status}: ${response.statusText}`,
-    }));
-    throw new Error(errorData.error || errorData.detail || "Failed to share extraction");
-  }
-
-  return await response.json();
-}
-
-/**
- * Access a shared extraction by token
- * @param {string} token - Share token
- * @returns {Promise<Object>} Share access result with extraction_id
- */
-export async function accessSharedExtraction(token) {
-  const response = await fetch(`${API_BASE_URL}/api/share/${token}`, {
-    headers: getAuthHeaders(),
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({
-      error: `HTTP ${response.status}: ${response.statusText}`,
-    }));
-    throw new Error(errorData.error || errorData.detail || "Failed to access shared extraction");
-  }
-
-  return await response.json();
-}
-
-/**
- * Health check endpoint
- * @returns {Promise<Object>} Status object
- */
-export async function ping() {
-  const response = await fetch(`${API_BASE_URL}/ping`);
-  if (!response.ok) {
-    throw new Error("Backend is not available");
-  }
-  return await response.json();
-}
-
-=======
 /**
  * API service for communicating with the FastAPI backend
  */
@@ -346,4 +171,67 @@ export async function ping() {
   return await response.json();
 }
 
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d
+/**
+ * Create a new API key
+ * @param {string} name - User-friendly name for the API key
+ * @returns {Promise<Object>} API key creation result with api_key
+ */
+export async function createAPIKey(name) {
+  const response = await fetch(`${API_BASE_URL}/api/auth/api-key/create`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      ...getAuthHeaders(),
+    },
+    body: JSON.stringify({ name }),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({
+      error: `HTTP ${response.status}: ${response.statusText}`,
+    }));
+    throw new Error(errorData.error || errorData.detail || "Failed to create API key");
+  }
+
+  return await response.json();
+}
+
+/**
+ * List all API keys for the current user
+ * @returns {Promise<Object>} API keys list with api_keys array
+ */
+export async function listAPIKeys() {
+  const response = await fetch(`${API_BASE_URL}/api/auth/api-keys`, {
+    headers: getAuthHeaders(),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({
+      error: `HTTP ${response.status}: ${response.statusText}`,
+    }));
+    throw new Error(errorData.error || errorData.detail || "Failed to fetch API keys");
+  }
+
+  return await response.json();
+}
+
+/**
+ * Delete (deactivate) an API key
+ * @param {number} keyId - The API key ID to delete
+ * @returns {Promise<Object>} Deletion result
+ */
+export async function deleteAPIKey(keyId) {
+  const response = await fetch(`${API_BASE_URL}/api/auth/api-key/${keyId}`, {
+    method: "DELETE",
+    headers: getAuthHeaders(),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({
+      error: `HTTP ${response.status}: ${response.statusText}`,
+    }));
+    throw new Error(errorData.error || errorData.detail || "Failed to delete API key");
+  }
+
+  return await response.json();
+}

frontend/src/utils.js

@@ -4,5 +4,6 @@ export function createPageUrl(pageName) {
   if (!pageName) return "/";
   const lower = pageName.toLowerCase();
   if (lower === "dashboard") return "/";
-  return `/${lower}`;
+  if (lower === "api keys") return "/api-keys";
+  return `/${lower.replace(/\s+/g, "-")}`;
 }