v4.1: Complete Settings page — role, team, API keys, dates, admin badge, danger zone

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>
   );