Merge branch 'main' of https://huggingface.co/spaces/gaurv007/ClauseGuard

web/app/api/me/route.ts

@@ -5,7 +5,7 @@ import { createClient } from "@/lib/supabase/server";
  * GET /api/me
  * Returns the current user's profile from DB.
  * Used by client components (analyze page, etc.) to determine plan, role, usage.
- * No hardcoded emails — everything comes from the database.
+ * Admin gets FULL access to everything — no limits, no restrictions.
  */
 export async function GET(req: NextRequest) {
   try {
@@ -19,17 +19,27 @@ export async function GET(req: NextRequest) {
         role: "user",
         isAdmin: false,
         analyses_this_month: 0,
+        scan_limit: 10,
+        can_upload: false,
+        can_compare: false,
+        can_export_pdf: false,
+        can_chat: false,
+        can_redline_llm: false,
       });
     }
 
     const { data: profile } = await supabase
       .from("profiles")
-      .select("plan, role, is_banned, analyses_this_month, full_name, email")
+      .select("plan, role, is_banned, analyses_this_month, full_name, email, team_id, created_at")
       .eq("id", user.id)
       .single();
 
     const plan = profile?.plan || "free";
     const role = profile?.role || "user";
+    const isAdmin = role === "admin";
+
+    // Admin gets EVERYTHING — no limits, no restrictions, period.
+    const hasFullAccess = isAdmin || plan !== "free";
 
     return NextResponse.json({
       authenticated: true,
@@ -38,14 +48,20 @@ export async function GET(req: NextRequest) {
       full_name: profile?.full_name || "",
       plan,
       role,
-      isAdmin: role === "admin",
+      isAdmin,
       is_banned: profile?.is_banned || false,
       analyses_this_month: profile?.analyses_this_month || 0,
-      // Admins get unlimited everything
-      scan_limit: role === "admin" ? Infinity : plan === "free" ? 10 : Infinity,
-      can_upload: role === "admin" || plan !== "free",
-      can_compare: role === "admin" || plan !== "free",
-      can_export_pdf: role === "admin" || plan !== "free",
+      team_id: profile?.team_id || null,
+      created_at: profile?.created_at || null,
+      // Use 999999 instead of Infinity (not valid JSON)
+      scan_limit: isAdmin ? 999999 : plan === "free" ? 10 : 999999,
+      can_upload: hasFullAccess,
+      can_compare: hasFullAccess,
+      can_export_pdf: hasFullAccess,
+      can_chat: hasFullAccess,
+      can_redline_llm: hasFullAccess,
+      can_api_keys: hasFullAccess,
+      can_team: isAdmin || plan === "team",
     });
   } catch (error) {
     return NextResponse.json({
@@ -54,6 +70,12 @@ export async function GET(req: NextRequest) {
       role: "user",
       isAdmin: false,
       analyses_this_month: 0,
+      scan_limit: 10,
+      can_upload: false,
+      can_compare: false,
+      can_export_pdf: false,
+      can_chat: false,
+      can_redline_llm: false,
     });
   }
 }

web/app/dashboard-pages/analyze/page.tsx

@@ -196,7 +196,7 @@ export default function AnalyzePage() {
         setUserPlan(data.plan || "free");
         setUserRole(data.role || "user");
         setScanCount(data.analyses_this_month || 0);
-        setScanLimit(data.scan_limit === Infinity || data.scan_limit > 9999 ? Infinity : (data.scan_limit || 10));
+        setScanLimit(data.scan_limit >= 9999 ? Infinity : (data.scan_limit || 10));
         setCanUpload(data.can_upload || false);
       })
       .catch(() => {});
@@ -221,7 +221,7 @@ export default function AnalyzePage() {
   async function handleFileUpload(e: React.ChangeEvent<HTMLInputElement>) {
     const file = e.target.files?.[0];
     if (!file) return;
-    if (!canUpload) { setShowUpgrade(true); return; }
+    if (!canUpload && !isAdmin) { setShowUpgrade(true); return; }
     setLoading(true); setError("");
     try {
       const formData = new FormData(); formData.append("file", file);
@@ -340,7 +340,7 @@ export default function AnalyzePage() {
             </h1>
             <p className="mt-1 text-xs sm:text-sm text-zinc-500 max-w-xl">Paste text or upload a file. Get 41-category clause detection, risk scoring, ML NER, NLI contradictions, compliance checks, and obligation tracking.</p>
           </div>
-          {userPlan === "free" && !isAdmin && (
+          {userPlan === "free" && !isAdmin && scanLimit !== Infinity && (
             <span className="self-start text-xs text-zinc-400 border border-zinc-200 px-2.5 py-1 rounded-md whitespace-nowrap">{scanCount}/{scanLimit === Infinity ? "\u221E" : scanLimit} scans</span>
           )}
         </div>

web/app/dashboard-pages/dashboard/page.tsx

@@ -2,7 +2,8 @@ import { createClient } from "@/lib/supabase/server";
 import Link from "next/link";
 import {
   ScanText, ShieldCheck, Tag, AlertTriangle, ClipboardList,
-  GitCompare, Cpu, Layers, Clock
+  GitCompare, Cpu, Layers, Clock, Crown, PenTool, MessageSquare,
+  ScanLine, Settings
 } from "lucide-react";
 
 export default async function DashboardPage() {
@@ -17,8 +18,10 @@ export default async function DashboardPage() {
     .order("created_at", { ascending: false }).limit(10);
 
   const plan = profile?.plan || "free";
+  const role = profile?.role || "user";
+  const isAdmin = role === "admin";
   const usedThisMonth = profile?.analyses_this_month || 0;
-  const limit = plan === "free" ? 10 : "Unlimited";
+  const limit = isAdmin ? "∞" : plan === "free" ? 10 : "∞";
 
   const avgRisk = analyses && analyses.length > 0
     ? Math.round(analyses.reduce((s: number, a: any) => s + a.risk_score, 0) / analyses.length)
@@ -36,22 +39,35 @@ export default async function DashboardPage() {
             <h1 className="text-xl sm:text-2xl font-bold text-gray-900 flex items-center gap-2">
               <ShieldCheck className="w-5 h-5 sm:w-6 sm:h-6 text-indigo-500" />
               Dashboard
+              {isAdmin && (
+                <span className="text-xs bg-amber-50 text-amber-700 border border-amber-200 px-2 py-0.5 rounded-full flex items-center gap-1">
+                  <Crown className="w-3 h-3" /> Admin
+                </span>
+              )}
             </h1>
             <p className="text-gray-500 text-sm mt-1">Welcome back, {profile?.full_name || user?.email}</p>
           </div>
-          <Link href="/dashboard-pages/analyze"
-            className="bg-indigo-600 text-white px-5 sm:px-6 py-2.5 sm:py-3 rounded-xl font-semibold hover:bg-indigo-700 transition text-sm whitespace-nowrap">
-            + New Scan
-          </Link>
+          <div className="flex gap-2">
+            {isAdmin && (
+              <Link href="/admin"
+                className="bg-amber-50 text-amber-700 border border-amber-200 px-4 py-2.5 rounded-xl font-semibold hover:bg-amber-100 transition text-sm whitespace-nowrap flex items-center gap-2">
+                <Crown className="w-4 h-4" /> Admin Panel
+              </Link>
+            )}
+            <Link href="/dashboard-pages/analyze"
+              className="bg-indigo-600 text-white px-5 sm:px-6 py-2.5 rounded-xl font-semibold hover:bg-indigo-700 transition text-sm whitespace-nowrap">
+              + New Scan
+            </Link>
+          </div>
         </div>
 
         {/* Primary Stats */}
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6 mb-8 sm:mb-10">
           {[
-            { label: "Plan", value: plan, capitalize: true },
+            { label: "Plan", value: isAdmin ? "Admin" : plan, capitalize: true },
             { label: "Scans This Month", value: `${usedThisMonth} / ${limit}` },
             { label: "Total Scans", value: String(count || 0) },
-            { label: "Avg Risk Score", value: avgRisk !== null ? String(avgRisk) : "\u2014" },
+            { label: "Avg Risk Score", value: avgRisk !== null ? String(avgRisk) : "—" },
           ].map((s) => (
             <div key={s.label} className="bg-white rounded-xl p-4 sm:p-6 border border-gray-200">
               <p className="text-xs sm:text-sm text-gray-500">{s.label}</p>
@@ -81,24 +97,33 @@ export default async function DashboardPage() {
         </div>
 
         {/* Quick Actions */}
-        <div className="grid sm:grid-cols-2 gap-3 sm:gap-6 mb-8 sm:mb-10">
-          <Link href="/dashboard-pages/analyze" className="bg-white rounded-xl p-5 sm:p-6 border border-gray-200 hover:border-indigo-200 hover:shadow-sm transition-all group">
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 mb-8 sm:mb-10">
+          <Link href="/dashboard-pages/analyze" className="bg-white rounded-xl p-5 border border-gray-200 hover:border-indigo-200 hover:shadow-sm transition-all group">
             <div className="flex items-center gap-3 mb-2">
-              <div className="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center group-hover:bg-indigo-100 transition-colors">
-                <ScanText className="w-5 h-5 text-indigo-600" />
+              <div className="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center group-hover:bg-indigo-100 transition-colors">
+                <ScanText className="w-4.5 h-4.5 text-indigo-600" />
               </div>
-              <h3 className="font-semibold text-gray-900">Analyze Contract</h3>
+              <h3 className="font-semibold text-gray-900 text-sm">Analyze Contract</h3>
             </div>
-            <p className="text-sm text-gray-500">Scan with 3 ML models: clause classifier, Legal NER, and NLI contradiction detection.</p>
+            <p className="text-xs text-gray-500">6 ML models: classifier, NER, NLI, embeddings, OCR, LLM.</p>
           </Link>
-          <Link href="/dashboard-pages/compare" className="bg-white rounded-xl p-5 sm:p-6 border border-gray-200 hover:border-indigo-200 hover:shadow-sm transition-all group">
+          <Link href="/dashboard-pages/compare" className="bg-white rounded-xl p-5 border border-gray-200 hover:border-indigo-200 hover:shadow-sm transition-all group">
             <div className="flex items-center gap-3 mb-2">
-              <div className="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center group-hover:bg-indigo-100 transition-colors">
-                <GitCompare className="w-5 h-5 text-indigo-600" />
+              <div className="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center group-hover:bg-indigo-100 transition-colors">
+                <GitCompare className="w-4.5 h-4.5 text-indigo-600" />
               </div>
-              <h3 className="font-semibold text-gray-900">Compare Contracts</h3>
+              <h3 className="font-semibold text-gray-900 text-sm">Compare Contracts</h3>
             </div>
-            <p className="text-sm text-gray-500">Side-by-side diff with semantic similarity scoring and risk delta.</p>
+            <p className="text-xs text-gray-500">Side-by-side diff with semantic similarity and risk delta.</p>
+          </Link>
+          <Link href="/dashboard-pages/settings" className="bg-white rounded-xl p-5 border border-gray-200 hover:border-indigo-200 hover:shadow-sm transition-all group">
+            <div className="flex items-center gap-3 mb-2">
+              <div className="w-9 h-9 rounded-lg bg-zinc-100 flex items-center justify-center group-hover:bg-zinc-200 transition-colors">
+                <Settings className="w-4.5 h-4.5 text-zinc-600" />
+              </div>
+              <h3 className="font-semibold text-gray-900 text-sm">Settings</h3>
+            </div>
+            <p className="text-xs text-gray-500">Account, subscription, API keys, team management.</p>
           </Link>
         </div>
 
@@ -132,11 +157,6 @@ export default async function DashboardPage() {
                           <ClipboardList className="w-2.5 h-2.5" />{a.obligations.length}
                         </span>
                       )}
-                      {a.model && a.model !== "regex" && (
-                        <span className="inline-flex items-center gap-1 text-[10px] bg-indigo-50 text-indigo-600 px-1.5 py-0.5 rounded border border-indigo-100">
-                          <Cpu className="w-2.5 h-2.5" />ML
-                        </span>
-                      )}
                     </div>
                   </div>
                   <span className={`self-start sm:self-auto text-sm font-bold px-3 py-1 rounded-full whitespace-nowrap ${
@@ -158,12 +178,12 @@ export default async function DashboardPage() {
           )}
         </div>
 
-        {/* Upgrade CTA */}
-        {plan === "free" && (
+        {/* Upgrade CTA — only for non-admin free users */}
+        {plan === "free" && !isAdmin && (
           <div className="mt-8 bg-indigo-50 border border-indigo-200 rounded-xl p-5 sm:p-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
             <div>
               <p className="font-semibold text-indigo-900">Upgrade to Pro</p>
-              <p className="text-sm text-indigo-700 mt-1">Unlimited scans, contract comparison, PDF exports, obligation tracking, and team features.</p>
+              <p className="text-sm text-indigo-700 mt-1">Unlimited scans, file uploads, contract comparison, PDF exports, Q&A chatbot, and LLM-powered redlining.</p>
             </div>
             <Link href="/#pricing" className="bg-indigo-600 text-white px-6 py-2.5 rounded-lg font-semibold text-sm hover:bg-indigo-700 transition whitespace-nowrap">
               View Plans

web/app/dashboard-pages/settings/page.tsx

@@ -1,7 +1,10 @@
 import { createClient } from "@/lib/supabase/server";
 import { redirect } from "next/navigation";
 import Link from "next/link";
-import { ArrowLeft, User, CreditCard, LogOut, CircleAlert } from "lucide-react";
+import {
+  ArrowLeft, User, CreditCard, LogOut, CircleAlert, Key, Users,
+  Shield, Crown, Calendar, Hash, Mail, Globe, Trash2, AlertTriangle
+} from "lucide-react";
 
 async function handleCancel() {
   "use server";
@@ -27,6 +30,21 @@ async function handleSignOut() {
   redirect("/");
 }
 
+async function handleDeleteAccount() {
+  "use server";
+  const supabase = await createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) redirect("/auth/login");
+
+  // Delete user data (analyses, api keys)
+  await supabase.from("analyses").delete().eq("user_id", user.id);
+  await supabase.from("api_keys").delete().eq("user_id", user.id);
+  await supabase.from("profiles").delete().eq("id", user.id);
+
+  await supabase.auth.signOut();
+  redirect("/?deleted=true");
+}
+
 export default async function SettingsPage() {
   const supabase = await createClient();
   const { data: { user } } = await supabase.auth.getUser();
@@ -38,10 +56,29 @@ export default async function SettingsPage() {
     .single();
 
   const plan = profile?.plan || "free";
+  const role = profile?.role || "user";
+  const isAdmin = role === "admin";
   const used = profile?.analyses_this_month || 0;
-  const limit = plan === "free" ? "10" : "Unlimited";
+  const limit = isAdmin ? "Unlimited" : plan === "free" ? "10" : "Unlimited";
   const hasSub = !!profile?.razorpay_subscription_id;
 
+  // Fetch API keys
+  const { data: apiKeys } = await supabase
+    .from("api_keys")
+    .select("id, name, key_prefix, calls_this_month, calls_limit, is_active, created_at")
+    .eq("user_id", user?.id)
+    .order("created_at", { ascending: false });
+
+  // Fetch team info
+  let team = null;
+  let teamMembers = 0;
+  if (profile?.team_id) {
+    const { data: t } = await supabase.from("teams").select("name, max_seats").eq("id", profile.team_id).single();
+    team = t;
+    const { count } = await supabase.from("profiles").select("id", { count: "exact", head: true }).eq("team_id", profile.team_id);
+    teamMembers = count || 0;
+  }
+
   return (
     <div className="min-h-screen bg-white">
       <div className="max-w-2xl mx-auto px-5 py-12">
@@ -61,13 +98,52 @@ export default async function SettingsPage() {
           <div className="border border-zinc-200 rounded-xl divide-y divide-zinc-100">
             <div className="px-5 py-4 flex justify-between items-center">
               <div><p className="text-sm font-medium">Email</p><p className="text-sm text-zinc-500">{user?.email}</p></div>
+              <Mail className="w-4 h-4 text-zinc-300" />
             </div>
             <div className="px-5 py-4 flex justify-between items-center">
               <div><p className="text-sm font-medium">Name</p><p className="text-sm text-zinc-500">{profile?.full_name || "Not set"}</p></div>
             </div>
+            <div className="px-5 py-4 flex justify-between items-center">
+              <div><p className="text-sm font-medium">Role</p><p className="text-sm text-zinc-500 capitalize flex items-center gap-1.5">
+                {isAdmin && <Crown className="w-3.5 h-3.5 text-amber-500" />}
+                {role}
+                {isAdmin && <span className="text-[10px] bg-amber-50 text-amber-700 border border-amber-200 px-1.5 py-0.5 rounded">Full access</span>}
+              </p></div>
+              <Shield className="w-4 h-4 text-zinc-300" />
+            </div>
+            <div className="px-5 py-4 flex justify-between items-center">
+              <div><p className="text-sm font-medium">Account ID</p><p className="text-xs text-zinc-400 font-mono">{user?.id}</p></div>
+              <Hash className="w-4 h-4 text-zinc-300" />
+            </div>
+            <div className="px-5 py-4 flex justify-between items-center">
+              <div><p className="text-sm font-medium">Joined</p><p className="text-sm text-zinc-500">{profile?.created_at ? new Date(profile.created_at).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" }) : "—"}</p></div>
+              <Calendar className="w-4 h-4 text-zinc-300" />
+            </div>
+            <div className="px-5 py-4 flex justify-between items-center">
+              <div><p className="text-sm font-medium">Last Updated</p><p className="text-sm text-zinc-500">{profile?.updated_at ? new Date(profile.updated_at).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" }) : "—"}</p></div>
+            </div>
           </div>
         </section>
 
+        {/* Admin Quick Access */}
+        {isAdmin && (
+          <section className="mb-8">
+            <div className="flex items-center gap-2 mb-3">
+              <Crown className="w-4 h-4 text-amber-500" />
+              <h2 className="text-sm font-medium text-amber-600 uppercase tracking-wider">Admin</h2>
+            </div>
+            <Link href="/admin" className="flex items-center gap-3 border border-amber-200 bg-amber-50/50 rounded-xl px-5 py-4 hover:bg-amber-50 transition-colors">
+              <div className="w-10 h-10 rounded-lg bg-amber-100 flex items-center justify-center">
+                <Crown className="w-5 h-5 text-amber-600" />
+              </div>
+              <div>
+                <p className="text-sm font-semibold text-amber-900">Open Admin Panel</p>
+                <p className="text-xs text-amber-600">Manage users, view all scans, teams, API keys, activity logs</p>
+              </div>
+            </Link>
+          </section>
+        )}
+
         {/* Subscription */}
         <section className="mb-8">
           <div className="flex items-center gap-2 mb-3">
@@ -76,15 +152,40 @@ export default async function SettingsPage() {
           </div>
           <div className="border border-zinc-200 rounded-xl divide-y divide-zinc-100">
             <div className="px-5 py-4 flex justify-between items-center">
-              <div><p className="text-sm font-medium">Plan</p><p className="text-sm text-zinc-500 capitalize">{plan}</p></div>
-              {plan === "free" ? (
+              <div>
+                <p className="text-sm font-medium">Plan</p>
+                <p className="text-sm text-zinc-500 capitalize flex items-center gap-1.5">
+                  {plan}
+                  {isAdmin && <span className="text-[10px] bg-indigo-50 text-indigo-700 border border-indigo-200 px-1.5 py-0.5 rounded">Admin override</span>}
+                </p>
+              </div>
+              {!isAdmin && plan === "free" ? (
                 <Link href="/#pricing" className="text-sm font-medium border border-zinc-200 px-3 py-1.5 rounded-lg hover:bg-zinc-50 transition-colors">Upgrade</Link>
               ) : null}
             </div>
             <div className="px-5 py-4 flex justify-between items-center">
-              <div><p className="text-sm font-medium">Usage this month</p><p className="text-sm text-zinc-500">{used} / {limit} scans</p></div>
+              <div>
+                <p className="text-sm font-medium">Usage this month</p>
+                <p className="text-sm text-zinc-500">{used} / {limit} scans</p>
+              </div>
+            </div>
+            <div className="px-5 py-4 flex justify-between items-center">
+              <div>
+                <p className="text-sm font-medium">Features</p>
+                <div className="mt-1 flex flex-wrap gap-1.5">
+                  {(isAdmin || plan !== "free") && <span className="text-[10px] bg-emerald-50 text-emerald-700 border border-emerald-200 px-1.5 py-0.5 rounded">Unlimited scans</span>}
+                  {(isAdmin || plan !== "free") && <span className="text-[10px] bg-blue-50 text-blue-700 border border-blue-200 px-1.5 py-0.5 rounded">File upload</span>}
+                  {(isAdmin || plan !== "free") && <span className="text-[10px] bg-purple-50 text-purple-700 border border-purple-200 px-1.5 py-0.5 rounded">PDF export</span>}
+                  {(isAdmin || plan !== "free") && <span className="text-[10px] bg-indigo-50 text-indigo-700 border border-indigo-200 px-1.5 py-0.5 rounded">Comparison</span>}
+                  <span className="text-[10px] bg-zinc-50 text-zinc-600 border border-zinc-200 px-1.5 py-0.5 rounded">41 clause types</span>
+                  <span className="text-[10px] bg-zinc-50 text-zinc-600 border border-zinc-200 px-1.5 py-0.5 rounded">ML NER</span>
+                  <span className="text-[10px] bg-zinc-50 text-zinc-600 border border-zinc-200 px-1.5 py-0.5 rounded">NLI</span>
+                  <span className="text-[10px] bg-zinc-50 text-zinc-600 border border-zinc-200 px-1.5 py-0.5 rounded">Redlining</span>
+                  <span className="text-[10px] bg-zinc-50 text-zinc-600 border border-zinc-200 px-1.5 py-0.5 rounded">OCR</span>
+                </div>
+              </div>
             </div>
-            {hasSub && plan !== "free" && (
+            {hasSub && plan !== "free" && !isAdmin && (
               <div className="px-5 py-4">
                 <form action={handleCancel}>
                   <button type="submit" className="flex items-center gap-2 text-sm text-red-600 font-medium border border-red-200 px-3 py-1.5 rounded-lg hover:bg-red-50 transition-colors">
@@ -98,15 +199,83 @@ export default async function SettingsPage() {
           </div>
         </section>
 
+        {/* Team Info */}
+        {team && (
+          <section className="mb-8">
+            <div className="flex items-center gap-2 mb-3">
+              <Users className="w-4 h-4 text-zinc-400" />
+              <h2 className="text-sm font-medium text-zinc-500 uppercase tracking-wider">Team</h2>
+            </div>
+            <div className="border border-zinc-200 rounded-xl divide-y divide-zinc-100">
+              <div className="px-5 py-4 flex justify-between items-center">
+                <div><p className="text-sm font-medium">Team Name</p><p className="text-sm text-zinc-500">{team.name}</p></div>
+                <Link href="/dashboard-pages/team" className="text-sm font-medium text-indigo-600 hover:text-indigo-700">Manage →</Link>
+              </div>
+              <div className="px-5 py-4 flex justify-between items-center">
+                <div><p className="text-sm font-medium">Members</p><p className="text-sm text-zinc-500">{teamMembers} / {team.max_seats}</p></div>
+              </div>
+            </div>
+          </section>
+        )}
+
+        {/* API Keys */}
+        {(isAdmin || plan !== "free") && (
+          <section className="mb-8">
+            <div className="flex items-center gap-2 mb-3">
+              <Key className="w-4 h-4 text-zinc-400" />
+              <h2 className="text-sm font-medium text-zinc-500 uppercase tracking-wider">API Keys</h2>
+            </div>
+            <div className="border border-zinc-200 rounded-xl divide-y divide-zinc-100">
+              {apiKeys && apiKeys.length > 0 ? apiKeys.map((k: any) => (
+                <div key={k.id} className="px-5 py-3.5 flex justify-between items-center">
+                  <div>
+                    <p className="text-sm font-medium flex items-center gap-2">
+                      {k.name}
+                      <span className={`text-[10px] px-1.5 py-0.5 rounded ${k.is_active ? "bg-emerald-50 text-emerald-700 border border-emerald-200" : "bg-red-50 text-red-700 border border-red-200"}`}>
+                        {k.is_active ? "Active" : "Revoked"}
+                      </span>
+                    </p>
+                    <p className="text-xs text-zinc-400 font-mono mt-0.5">{k.key_prefix} · {k.calls_this_month}/{k.calls_limit} calls</p>
+                  </div>
+                </div>
+              )) : (
+                <div className="px-5 py-6 text-center text-sm text-zinc-400">
+                  No API keys yet.
+                </div>
+              )}
+            </div>
+          </section>
+        )}
+
         {/* Sign out */}
-        <section>
+        <section className="mb-8">
           <form action={handleSignOut}>
-            <button type="submit" className="flex items-center gap-2 text-sm text-zinc-500 font-medium border border-zinc-200 px-4 py-2 rounded-lg hover:bg-zinc-50 transition-colors">
+            <button type="submit" className="flex items-center gap-2 text-sm text-zinc-500 font-medium border border-zinc-200 px-4 py-2.5 rounded-lg hover:bg-zinc-50 transition-colors w-full justify-center">
               <LogOut className="w-4 h-4" />
               Sign out
             </button>
           </form>
         </section>
+
+        {/* Danger Zone */}
+        {!isAdmin && (
+          <section>
+            <div className="flex items-center gap-2 mb-3">
+              <AlertTriangle className="w-4 h-4 text-red-400" />
+              <h2 className="text-sm font-medium text-red-400 uppercase tracking-wider">Danger Zone</h2>
+            </div>
+            <div className="border border-red-200 rounded-xl p-5 bg-red-50/30">
+              <p className="text-sm text-zinc-700 font-medium">Delete account</p>
+              <p className="text-xs text-zinc-500 mt-1 mb-3">Permanently delete your account, all analyses, and API keys. This cannot be undone.</p>
+              <form action={handleDeleteAccount}>
+                <button type="submit" className="flex items-center gap-2 text-sm text-red-600 font-medium border border-red-300 bg-white px-3 py-1.5 rounded-lg hover:bg-red-50 transition-colors">
+                  <Trash2 className="w-3.5 h-3.5" />
+                  Delete my account
+                </button>
+              </form>
+            </div>
+          </section>
+        )}
       </div>
     </div>
   );

web/components/nav.tsx

@@ -2,23 +2,20 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { ShieldCheck, Menu, X, Crown, GitCompare, MessageSquare } from "lucide-react";
+import {
+  ShieldCheck, Menu, X, Crown, GitCompare, LayoutDashboard,
+  ScanText, Settings, LogIn, Zap
+} from "lucide-react";
 import { useState, useEffect } from "react";
 import { createClient } from "@/lib/supabase/client";
 
-const links = [
-  { href: "/#features", label: "Features" },
-  { href: "/#pricing", label: "Pricing" },
-  { href: "/dashboard-pages/analyze", label: "Scanner" },
-  { href: "/dashboard-pages/compare", label: "Compare", icon: GitCompare },
-];
-
 export function Nav() {
   const [open, setOpen] = useState(false);
   const [userEmail, setUserEmail] = useState<string | null>(null);
   const [userRole, setUserRole] = useState<string | null>(null);
+  const [loaded, setLoaded] = useState(false);
   const pathname = usePathname();
-  const isDashboard = pathname?.startsWith("/dashboard");
+  const isLoggedIn = !!userEmail;
   const isAdmin = userRole === "admin";
 
   useEffect(() => {
@@ -34,69 +31,128 @@ export function Nav() {
           .single();
         setUserRole(profile?.role || "user");
       }
+      setLoaded(true);
     });
   }, []);
 
+  // Build links dynamically based on auth state
+  const publicLinks = [
+    { href: "/#features", label: "Features" },
+    { href: "/#pricing", label: "Pricing" },
+  ];
+
+  const appLinks = [
+    { href: "/dashboard-pages/dashboard", label: "Dashboard", icon: LayoutDashboard },
+    { href: "/dashboard-pages/analyze", label: "Scanner", icon: ScanText },
+    { href: "/dashboard-pages/compare", label: "Compare", icon: GitCompare },
+  ];
+
+  const links = isLoggedIn ? appLinks : publicLinks;
+
   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">
+        {/* Logo */}
         <Link href="/" className="flex items-center gap-2">
           <ShieldCheck className="w-5 h-5 text-zinc-900" strokeWidth={2.2} />
           <span className="font-semibold text-[15px] tracking-tight text-zinc-900">ClauseGuard</span>
           <span className="hidden sm:inline text-[10px] font-medium text-zinc-400 ml-1 border border-zinc-200 px-1.5 py-0.5 rounded">v4.0</span>
         </Link>
 
+        {/* Desktop Nav */}
         <div className="hidden md:flex items-center gap-1">
-          {links.map((l) => (
-            <a key={l.href} href={l.href}
-              className="px-3 py-1.5 text-[13px] text-zinc-500 hover:text-zinc-900 rounded-md hover:bg-zinc-50 transition-colors">
-              {l.label}
-            </a>
-          ))}
+          {links.map((l) => {
+            const Icon = "icon" in l ? l.icon : null;
+            const isActive = pathname === l.href;
+            return (
+              <Link key={l.href} href={l.href}
+                className={`flex items-center gap-1.5 px-3 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"
+                }`}>
+                {Icon && <Icon className="w-3.5 h-3.5" />}
+                {l.label}
+              </Link>
+            );
+          })}
 
+          {/* Admin link — always visible for admins */}
           {isAdmin && (
             <Link href="/admin"
-              className="px-3 py-1.5 text-[13px] text-amber-600 hover:text-amber-700 rounded-md hover:bg-amber-50 transition-colors flex items-center gap-1">
+              className={`flex items-center gap-1.5 px-3 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>
           )}
 
           <div className="w-px h-4 bg-zinc-200 mx-2" />
 
-          {isDashboard || userEmail ? (
-            <Link href="/dashboard-pages/settings"
-              className="px-3 py-1.5 text-[13px] text-zinc-500 hover:text-zinc-900 rounded-md hover:bg-zinc-50">
-              Settings
-            </Link>
+          {isLoggedIn ? (
+            <>
+              <Link href="/dashboard-pages/settings"
+                className={`flex items-center gap-1.5 px-3 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"
+                }`}>
+                <Settings className="w-3.5 h-3.5" /> Settings
+              </Link>
+              <Link href="/dashboard-pages/analyze"
+                className="ml-1 px-3.5 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>
+            </>
           ) : (
-            <Link href="/auth/login"
-              className="px-3 py-1.5 text-[13px] text-zinc-500 hover:text-zinc-900 rounded-md hover:bg-zinc-50">
-              Log in
-            </Link>
+            <>
+              {!isLoggedIn && loaded && (
+                <Link href="/auth/login"
+                  className="flex items-center gap-1.5 px-3 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>
+              )}
+              <Link href="/auth/signup"
+                className="ml-1 px-3.5 py-1.5 text-[13px] font-medium text-white bg-zinc-900 rounded-md hover:bg-zinc-800 transition-colors">
+                Get started
+              </Link>
+            </>
           )}
-          <Link href={isDashboard || userEmail ? "/dashboard-pages/analyze" : "/auth/signup"}
-            className="ml-1 px-3.5 py-1.5 text-[13px] font-medium text-white bg-zinc-900 rounded-md hover:bg-zinc-800 transition-colors">
-            {isDashboard || userEmail ? "New scan" : "Get started"}
-          </Link>
         </div>
 
+        {/* Mobile hamburger */}
         <button className="md:hidden p-1.5 rounded-md hover:bg-zinc-100" onClick={() => setOpen(!open)}>
           {open ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
         </button>
       </div>
 
+      {/* Mobile Menu */}
       {open && (
         <div className="md:hidden border-t border-zinc-100 bg-white px-5 py-3 space-y-1">
           {links.map((l) => (
-            <a key={l.href} href={l.href} onClick={() => setOpen(false)}
-              className="block px-3 py-2 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">{l.label}</a>
+            <Link key={l.href} href={l.href} onClick={() => setOpen(false)}
+              className="block px-3 py-2.5 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">{l.label}</Link>
           ))}
           {isAdmin && (
             <Link href="/admin" onClick={() => setOpen(false)}
-              className="block px-3 py-2 text-sm text-amber-600 rounded-md hover:bg-amber-50">Admin</Link>
+              className="block px-3 py-2.5 text-sm text-amber-600 rounded-md hover:bg-amber-50 flex items-center gap-2">
+              <Crown className="w-4 h-4" /> Admin Panel
+            </Link>
+          )}
+          <div className="h-px bg-zinc-100 my-2" />
+          {isLoggedIn ? (
+            <>
+              <Link href="/dashboard-pages/settings" onClick={() => setOpen(false)}
+                className="block px-3 py-2.5 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">Settings</Link>
+              <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">New Scan</Link>
+            </>
+          ) : (
+            <>
+              <Link href="/auth/login" onClick={() => setOpen(false)}
+                className="block px-3 py-2.5 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">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</Link>
+            </>
           )}
-          <Link href="/auth/login" onClick={() => setOpen(false)}
-            className="block px-3 py-2 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">Log in</Link>
         </div>
       )}
     </nav>