Show PRO badge on Admin nav link for free tier users

Instead of hiding the Admin link entirely, show it with a small
blue "PRO" badge so free users know the feature exists but requires
an upgrade. Clicking it still shows the full upgrade prompt.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Sbussiso

frontend/src/components/Layout.jsx

@@ -1,12 +1,33 @@
 import { Outlet, Link, useLocation } from "react-router-dom"
-import { SignedIn, SignedOut, UserButton, OrganizationSwitcher, useOrganization } from "@clerk/clerk-react"
+import { SignedIn, SignedOut, UserButton, OrganizationSwitcher, useOrganization, useAuth } from "@clerk/clerk-react"
+import { useState, useEffect } from "react"
+import { getPlanInfo } from "../services/api"
 import ToastContainer from "./ToastContainer.jsx"
 
 function Layout() {
   const { organization, isLoaded: orgLoaded, membership } = useOrganization()
+  const { getToken } = useAuth()
   const location = useLocation()
+  const [planFeatures, setPlanFeatures] = useState([])
 
   const isAdmin = orgLoaded && membership?.role === "org:admin"
+  const hasAdminFeature = planFeatures.includes("admin")
+
+  useEffect(() => {
+    if (organization && isAdmin) {
+      loadPlanFeatures()
+    }
+  }, [organization])
+
+  const loadPlanFeatures = async () => {
+    try {
+      const token = await getToken()
+      const data = await getPlanInfo(() => Promise.resolve(token))
+      setPlanFeatures(data.features || [])
+    } catch (err) {
+      // Silently fail — nav still works, just hides admin link
+    }
+  }
 
   const isActive = (path) => location.pathname === path ? "nav-link active" : "nav-link"
 
@@ -42,9 +63,16 @@ function Layout() {
                         <Link to="/settings" className={isActive("/settings")}>
                           Settings
                         </Link>
-                        <Link to="/admin" className={isActive("/admin")}>
-                          Admin
-                        </Link>
+                        {hasAdminFeature ? (
+                          <Link to="/admin" className={isActive("/admin")}>
+                            Admin
+                          </Link>
+                        ) : (
+                          <Link to="/admin" className={`${isActive("/admin")} nav-link-locked`}>
+                            Admin
+                            <span className="nav-pro-badge">PRO</span>
+                          </Link>
+                        )}
                       </>
                     )}
                     <Link to="/pricing" className={isActive("/pricing")}>

frontend/src/index.css

@@ -1140,6 +1140,22 @@ body {
     color: var(--accent-green);
 }
 
+.nav-link-locked {
+    opacity: 0.7;
+    gap: 4px;
+}
+
+.nav-pro-badge {
+    font-size: 0.55rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    padding: 1px 4px;
+    border-radius: 3px;
+    background: rgba(59, 130, 246, 0.2);
+    color: #60a5fa;
+    line-height: 1;
+}
+
 /* Dev Mode Badge */
 .dev-mode-badge {
     display: flex;