Update frontend/src/Layout.jsx

frontend/src/Layout.jsx

@@ -8,8 +8,11 @@ import {
   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
@@ -18,6 +21,7 @@ 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" },
@@ -110,6 +114,38 @@ export default function Layout({ children, currentPageName }) {
           </button>
         )}
 
+        {/* 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>
+        )}
+
         {/* Pro Badge */}
         {!collapsed && (
           <div className="p-3">
@@ -119,7 +155,7 @@ export default function Layout({ children, currentPageName }) {
                 <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
+              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