fix: add useRouter import to login and signup pages for navigation handling

web/app/auth/login/page.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, Suspense } from "react";
 import { createClient } from "@/lib/supabase/client";
 import { getBaseUrl } from "@/lib/auth-url";
 import Link from "next/link";
-import { useSearchParams } from "next/navigation";
+import { useSearchParams, useRouter } from "next/navigation";
 import { ArrowLeft, Mail, Loader2 } from "lucide-react";
 
 function LoginForm() {
@@ -16,6 +16,7 @@ function LoginForm() {
   const [magicSent, setMagicSent] = useState(false);
   const supabase = createClient();
   const searchParams = useSearchParams();
+  const router = useRouter();
   const next = searchParams.get("next") || "/dashboard-pages/dashboard";
 
   // Check if already logged in — redirect immediately

web/app/auth/signup/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import { createClient } from "@/lib/supabase/client";
 import { getBaseUrl } from "@/lib/auth-url";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { ArrowLeft, Loader2 } from "lucide-react";
 
 export default function SignupPage() {
@@ -14,6 +15,7 @@ export default function SignupPage() {
   const [checking, setChecking] = useState(true);
   const [done, setDone] = useState(false);
   const supabase = createClient();
+  const router = useRouter();
 
   // Redirect if already logged in
   useEffect(() => {

web/components/nav.tsx

@@ -5,7 +5,8 @@ import { usePathname } from "next/navigation";
 import type { LucideIcon } from "lucide-react";
 import {
   ShieldCheck, Menu, X, Crown, GitCompare, LayoutDashboard,
-  ScanText, Settings, LogIn, Zap, Sparkles, CreditCard
+  ScanText, Settings, LogIn, Zap, Sparkles, CreditCard, UserCircle,
+  LogOut, Users
 } from "lucide-react";
 import { useState, useEffect } from "react";
 import { createClient } from "@/lib/supabase/client";
@@ -20,10 +21,12 @@ export function Nav() {
   const [open, setOpen] = useState(false);
   const [userEmail, setUserEmail] = useState<string | null>(null);
   const [userRole, setUserRole] = useState<string | null>(null);
+  const [userTeam, setUserTeam] = useState<string | null>(null);
   const [loaded, setLoaded] = useState(false);
   const pathname = usePathname();
   const isLoggedIn = !!userEmail;
   const isAdmin = userRole === "admin";
+  const hasTeam = !!userTeam;
 
   useEffect(() => {
     const supabase = createClient();
@@ -33,16 +36,26 @@ export function Nav() {
       if (user) {
         const { data: profile } = await supabase
           .from("profiles")
-          .select("role")
+          .select("role, team_id")
           .eq("id", user.id)
           .single();
         setUserRole(profile?.role || "user");
+        setUserTeam(profile?.team_id || null);
       }
       setLoaded(true);
     });
   }, []);
 
-  // All links — always visible
+  async function handleSignOut() {
+    const supabase = createClient();
+    await supabase.auth.signOut();
+    setUserEmail(null);
+    setUserRole(null);
+    setUserTeam(null);
+    window.location.href = "/";
+  }
+
+  // Public links - always visible
   const mainLinks: NavLink[] = [
     { href: "/#features", label: "Features", icon: Sparkles },
     { href: "/#pricing", label: "Pricing", icon: CreditCard },
@@ -50,11 +63,6 @@ export function Nav() {
     { href: "/dashboard-pages/compare", label: "Compare", icon: GitCompare },
   ];
 
-  // Extra links only for logged-in users
-  const authLinks: NavLink[] = [
-    { href: "/dashboard-pages/dashboard", label: "Dashboard", icon: LayoutDashboard },
-  ];
-
   return (
     <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-zinc-100">
       <div className="max-w-6xl mx-auto px-4 sm:px-5 h-14 flex items-center justify-between">
@@ -67,9 +75,8 @@ export function Nav() {
 
         {/* Desktop Nav */}
         <div className="hidden md:flex items-center gap-0.5">
-          {/* Main links — always visible */}
+          {/* Public links - always visible */}
           {mainLinks.map((l) => {
-            const Icon = l.icon ?? null;
             const isActive = pathname === l.href;
             return (
               <Link key={l.href} href={l.href}
@@ -81,69 +88,132 @@ export function Nav() {
             );
           })}
 
-          {/* Dashboard — only when logged in */}
-          {isLoggedIn && authLinks.map((l) => {
-            const Icon = l.icon ?? null;
-            const isActive = pathname === l.href;
-            return (
-              <Link key={l.href} href={l.href}
+          {/* Loading skeleton while auth state resolves */}
+          {!loaded && (
+            <>
+              <div className="w-px h-4 bg-zinc-200 mx-1.5" />
+              <div className="flex items-center gap-2">
+                <div className="w-14 h-7 bg-zinc-100 rounded-md animate-pulse" />
+                <div className="w-20 h-7 bg-zinc-900/10 rounded-md animate-pulse" />
+              </div>
+            </>
+          )}
+
+          {/* Logged-in links */}
+          {loaded && isLoggedIn && (
+            <>
+              {/* Dashboard */}
+              <Link href="/dashboard-pages/dashboard"
                 className={`flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] rounded-md transition-colors ${
-                  isActive ? "text-zinc-900 bg-zinc-100 font-medium" : "text-zinc-500 hover:text-zinc-900 hover:bg-zinc-50"
+                  pathname === "/dashboard-pages/dashboard"
+                    ? "text-zinc-900 bg-zinc-100 font-medium"
+                    : "text-zinc-500 hover:text-zinc-900 hover:bg-zinc-50"
                 }`}>
-                {Icon && <Icon className="w-3.5 h-3.5" />}
-                {l.label}
+                <LayoutDashboard className="w-3.5 h-3.5" />
+                Dashboard
               </Link>
-            );
-          })}
 
-          {/* Admin — always visible for admins */}
-          {isAdmin && (
-            <Link href="/admin"
-              className={`flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] rounded-md transition-colors ${
-                pathname === "/admin"
-                  ? "text-amber-700 bg-amber-50 font-medium"
-                  : "text-amber-600 hover:text-amber-700 hover:bg-amber-50"
-              }`}>
-              <Crown className="w-3.5 h-3.5" /> Admin
-            </Link>
-          )}
+              {/* Team - only when user belongs to a team */}
+              {hasTeam && (
+                <Link href="/dashboard-pages/team"
+                  className={`flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] rounded-md transition-colors ${
+                    pathname === "/dashboard-pages/team"
+                      ? "text-zinc-900 bg-zinc-100 font-medium"
+                      : "text-zinc-500 hover:text-zinc-900 hover:bg-zinc-50"
+                  }`}>
+                  <Users className="w-3.5 h-3.5" />
+                  Team
+                </Link>
+              )}
 
-          <div className="w-px h-4 bg-zinc-200 mx-1.5" />
+              {/* Admin - only for admin role */}
+              {isAdmin && (
+                <Link href="/admin"
+                  className={`flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] rounded-md transition-colors ${
+                    pathname === "/admin"
+                      ? "text-amber-700 bg-amber-50 font-medium"
+                      : "text-amber-600 hover:text-amber-700 hover:bg-amber-50"
+                  }`}>
+                  <Crown className="w-3.5 h-3.5" />
+                  Admin
+                </Link>
+              )}
 
-          {/* Right side — auth actions */}
-          {isLoggedIn ? (
-            <>
+              <div className="w-px h-4 bg-zinc-200 mx-1.5" />
+
+              {/* Settings */}
               <Link href="/dashboard-pages/settings"
                 className={`flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] rounded-md transition-colors ${
-                  pathname?.includes("settings") ? "text-zinc-900 bg-zinc-100" : "text-zinc-500 hover:text-zinc-900 hover:bg-zinc-50"
+                  pathname?.includes("settings")
+                    ? "text-zinc-900 bg-zinc-100 font-medium"
+                    : "text-zinc-500 hover:text-zinc-900 hover:bg-zinc-50"
                 }`}>
-                <Settings className="w-3.5 h-3.5" /> Settings
+                <Settings className="w-3.5 h-3.5" />
+                Settings
               </Link>
-              <button onClick={async () => {
-                const supabase = createClient();
-                await supabase.auth.signOut();
-                setUserEmail(null);
-                setUserRole(null);
-                window.location.href = "/";
-              }} className="flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] text-zinc-500 hover:text-zinc-900 rounded-md hover:bg-zinc-50 transition-colors">
-                Log out
-              </button>
+              {/* User indicator with hover dropdown */}
+              <div className="relative group ml-1">
+                <button className="flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] text-zinc-500 hover:text-zinc-900 rounded-md hover:bg-zinc-50 transition-colors">
+                  <UserCircle className="w-3.5 h-3.5" />
+                  <span className="max-w-[100px] truncate">{userEmail?.split("@")[0]}</span>
+                </button>
+                {/* Dropdown on hover */}
+                <div className="absolute right-0 top-full mt-1 w-52 bg-white border border-zinc-200 rounded-xl shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-150 z-50">
+                  <div className="px-3 py-2.5 border-b border-zinc-100">
+                    <p className="text-xs text-zinc-400">Signed in as</p>
+                    <p className="text-sm text-zinc-700 font-medium truncate">{userEmail}</p>
+                    {isAdmin && (
+                      <span className="inline-flex items-center gap-1 mt-1 text-[10px] bg-amber-50 text-amber-700 border border-amber-200 px-1.5 py-0.5 rounded">
+                        <Crown className="w-2.5 h-2.5" /> Admin
+                      </span>
+                    )}
+                  </div>
+                  <div className="py-1">
+                    <Link href="/dashboard-pages/settings"
+                      className="flex items-center gap-2 px-3 py-2 text-sm text-zinc-600 hover:bg-zinc-50">
+                      <Settings className="w-3.5 h-3.5 text-zinc-400" /> Settings
+                    </Link>
+                    {isAdmin && (
+                      <Link href="/admin"
+                        className="flex items-center gap-2 px-3 py-2 text-sm text-amber-600 hover:bg-amber-50">
+                        <Crown className="w-3.5 h-3.5" /> Admin Panel
+                      </Link>
+                    )}
+                  </div>
+                  <div className="border-t border-zinc-100 py-1">
+                    <button onClick={handleSignOut}
+                      className="flex items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50 w-full text-left">
+                      <LogOut className="w-3.5 h-3.5" /> Sign out
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              {/* New scan CTA */}
               <Link href="/dashboard-pages/analyze"
                 className="ml-1 px-3 py-1.5 text-[13px] font-medium text-white bg-zinc-900 rounded-md hover:bg-zinc-800 transition-colors flex items-center gap-1.5">
                 <Zap className="w-3.5 h-3.5" /> New scan
               </Link>
             </>
-          ) : (
+          )}
+
+          {/* Logged-out links */}
+          {loaded && !isLoggedIn && (
             <>
-              {loaded && (
-                <Link href="/auth/login"
-                  className="flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] text-zinc-500 hover:text-zinc-900 rounded-md hover:bg-zinc-50 transition-colors">
-                  <LogIn className="w-3.5 h-3.5" /> Log in
-                </Link>
-              )}
+              <div className="w-px h-4 bg-zinc-200 mx-1.5" />
+
+              <Link href="/auth/login"
+                className={`flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] rounded-md transition-colors ${
+                  pathname === "/auth/login"
+                    ? "text-zinc-900 bg-zinc-100 font-medium"
+                    : "text-zinc-500 hover:text-zinc-900 hover:bg-zinc-50"
+                }`}>
+                <LogIn className="w-3.5 h-3.5" /> Log in
+              </Link>
+
               <Link href="/auth/signup"
                 className="ml-1 px-3 py-1.5 text-[13px] font-medium text-white bg-zinc-900 rounded-md hover:bg-zinc-800 transition-colors">
-                Get started
+                Sign up
               </Link>
             </>
           )}
@@ -158,72 +228,118 @@ export function Nav() {
       {/* Mobile Menu */}
       {open && (
         <div className="md:hidden border-t border-zinc-100 bg-white px-5 py-3 space-y-0.5">
-          {/* Main links */}
+          {/* Public links */}
           {mainLinks.map((l) => {
             const Icon = l.icon ?? null;
+            const isActive = pathname === l.href;
             return (
               <Link key={l.href} href={l.href} onClick={() => setOpen(false)}
-                className="flex items-center gap-2.5 px-3 py-2.5 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">
+                className={`flex items-center gap-2.5 px-3 py-2.5 text-sm rounded-md ${
+                  isActive ? "text-zinc-900 bg-zinc-100 font-medium" : "text-zinc-600 hover:bg-zinc-50"
+                }`}>
                 {Icon && <Icon className="w-4 h-4 text-zinc-400" />}
                 {l.label}
               </Link>
             );
           })}
 
-          {/* Auth links */}
-          {isLoggedIn && (
+          {/* Mobile loading skeleton */}
+          {!loaded && (
+            <>
+              <div className="h-px bg-zinc-100 my-1.5" />
+              <div className="flex flex-col gap-2 px-3">
+                <div className="w-full h-10 bg-zinc-100 rounded-lg animate-pulse" />
+                <div className="w-full h-10 bg-zinc-900/10 rounded-lg animate-pulse" />
+              </div>
+            </>
+          )}
+
+          {/* Mobile: Logged-in links */}
+          {loaded && isLoggedIn && (
             <>
               <div className="h-px bg-zinc-100 my-1.5" />
+
+              {/* User info banner */}
+              <div className="px-3 py-2">
+                <p className="text-xs text-zinc-400">Signed in as</p>
+                <p className="text-sm text-zinc-700 font-medium truncate">{userEmail}</p>
+              </div>
+
               <Link href="/dashboard-pages/dashboard" onClick={() => setOpen(false)}
-                className="flex items-center gap-2.5 px-3 py-2.5 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">
+                className={`flex items-center gap-2.5 px-3 py-2.5 text-sm rounded-md ${
+                  pathname === "/dashboard-pages/dashboard"
+                    ? "text-zinc-900 bg-zinc-100 font-medium"
+                    : "text-zinc-600 hover:bg-zinc-50"
+                }`}>
                 <LayoutDashboard className="w-4 h-4 text-zinc-400" /> Dashboard
               </Link>
+
               <Link href="/dashboard-pages/settings" onClick={() => setOpen(false)}
-                className="flex items-center gap-2.5 px-3 py-2.5 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">
+                className={`flex items-center gap-2.5 px-3 py-2.5 text-sm rounded-md ${
+                  pathname?.includes("settings")
+                    ? "text-zinc-900 bg-zinc-100 font-medium"
+                    : "text-zinc-600 hover:bg-zinc-50"
+                }`}>
                 <Settings className="w-4 h-4 text-zinc-400" /> Settings
               </Link>
-            </>
-          )}
 
-          {/* Admin */}
-          {isAdmin && (
-            <Link href="/admin" onClick={() => setOpen(false)}
-              className="flex items-center gap-2.5 px-3 py-2.5 text-sm text-amber-600 rounded-md hover:bg-amber-50">
-              <Crown className="w-4 h-4" /> Admin Panel
-            </Link>
-          )}
+              {/* Team link */}
+              {hasTeam && (
+                <Link href="/dashboard-pages/team" onClick={() => setOpen(false)}
+                  className={`flex items-center gap-2.5 px-3 py-2.5 text-sm rounded-md ${
+                    pathname === "/dashboard-pages/team"
+                      ? "text-zinc-900 bg-zinc-100 font-medium"
+                      : "text-zinc-600 hover:bg-zinc-50"
+                  }`}>
+                  <Users className="w-4 h-4 text-zinc-400" /> Team
+                </Link>
+              )}
 
-          <div className="h-px bg-zinc-100 my-1.5" />
+              {/* Admin link */}
+              {isAdmin && (
+                <Link href="/admin" onClick={() => setOpen(false)}
+                  className={`flex items-center gap-2.5 px-3 py-2.5 text-sm rounded-md ${
+                    pathname === "/admin"
+                      ? "text-amber-700 bg-amber-50 font-medium"
+                      : "text-amber-600 hover:bg-amber-50"
+                  }`}>
+                  <Crown className="w-4 h-4" /> Admin Panel
+                </Link>
+              )}
 
-          {/* Auth actions */}
-          {isLoggedIn ? (
-            <>
+              <div className="h-px bg-zinc-100 my-1.5" />
+
+              {/* New Scan CTA */}
               <Link href="/dashboard-pages/analyze" onClick={() => setOpen(false)}
-                className="block px-3 py-2.5 text-sm font-medium text-white bg-zinc-900 rounded-lg text-center hover:bg-zinc-800 mb-1">
-                New Scan
+                className="flex items-center justify-center gap-2 px-3 py-2.5 text-sm font-medium text-white bg-zinc-900 rounded-lg hover:bg-zinc-800">
+                <Zap className="w-4 h-4" /> New Scan
               </Link>
-              <button 
-                onClick={async () => {
-                  setOpen(false);
-                  const supabase = createClient();
-                  await supabase.auth.signOut();
-                  setUserEmail(null);
-                  setUserRole(null);
-                  window.location.href = "/";
-                }} 
-                className="w-full text-left flex items-center gap-2.5 px-3 py-2.5 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">
-                Log out
+
+              {/* Sign out */}
+              <button onClick={() => { handleSignOut(); setOpen(false); }}
+                className="flex items-center gap-2.5 px-3 py-2.5 text-sm text-red-600 rounded-md hover:bg-red-50 w-full">
+                <LogOut className="w-4 h-4" /> Sign out
               </button>
             </>
-          ) : (
+          )}
+
+          {/* Mobile: Logged-out links */}
+          {loaded && !isLoggedIn && (
             <>
+              <div className="h-px bg-zinc-100 my-1.5" />
+
               <Link href="/auth/login" onClick={() => setOpen(false)}
-                className="flex items-center gap-2.5 px-3 py-2.5 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">
+                className={`flex items-center gap-2.5 px-3 py-2.5 text-sm rounded-md ${
+                  pathname === "/auth/login"
+                    ? "text-zinc-900 bg-zinc-100 font-medium"
+                    : "text-zinc-600 hover:bg-zinc-50"
+                }`}>
                 <LogIn className="w-4 h-4 text-zinc-400" /> Log in
               </Link>
+
               <Link href="/auth/signup" onClick={() => setOpen(false)}
-                className="block px-3 py-2.5 text-sm font-medium text-white bg-zinc-900 rounded-lg text-center hover:bg-zinc-800">
-                Get started
+                className="flex items-center justify-center gap-2 px-3 py-2.5 text-sm font-medium text-white bg-zinc-900 rounded-lg hover:bg-zinc-800">
+                Sign up
               </Link>
             </>
           )}