feat(portal): M10.2 — restyle Products + Org + Team + Billing + Audit + SSO

Six existing customer-area shells under [slug]/* rebuilt against the
handoff design (sections §2/§4/§5/§6/§7/§8). Every screen reuses the
new Panel / Monogram / Sev primitives and the ledger-table token system
so the visual contract stays single-source-of-truth in globals.css.

* `[slug]/settings` (Organization, IT_ADMIN) — legal entity dl, primary
  contact card, plan & seats meter, products subscribed kv-list
  (ENTITLED green dot / TRIALING amber dot).
* `[slug]/settings/users` (Team, IT_ADMIN) — bracketed member ledger
  with role chips, last-active mono dim, active/invited dot status.
  Invite affordance present, modal wiring deferred.
* `[slug]/billing` (Billing, CXO + FINANCE + IT_ADMIN) — current plan
  card with monthly net + 19% VAT, seats + evidence-storage meters,
  payment method block that swaps to "Payment failed → Re-activate"
  when tenant.status is frozen, full invoices ledger with paid/due dot.
* `[slug]/audit` (Audit log, LEGAL + IT_ADMIN) — filter bar (search +
  event-type chip toggles + product select), ledger table with denied
  red dot, footer count + retention note.
* `[slug]/settings/integrations` (SSO, IT_ADMIN) — read-only OIDC
  summary pulling from KEYCLOAK_ISSUER / KEYCLOAK_CLIENT_ID, IdP-group→
  role mapping table.
* `[slug]/products` (Products index, USER+) — 2x2 product grid with
  live cards (entitled + trialing chips) and "Coming soon" dashed
  placeholders, plus a cross-product findings table with filter chips.

Plus a new `NotAllowed` 403 surface in the same ledger language that
replaces the inline "NotAuthorized" message used by the old shells, so
forbidden routes still look like the rest of the portal.

Every page goes through `getPortalSession()` so `BP_DEV_FIXTURE` still
swaps between admin / user / trial / frozen / archived without
Keycloak. Every screen returns 200 against
`BP_DEV_FIXTURE=admin-acme pnpm dev`.

Still to come on this branch:
* Workflows editor (palette + canvas + inspector + drag-wiring)
* ⌘K command palette + toasts
* Product launch detail (per-product page)
* Login redesign (mock SSO picker + violet gradient panel)

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

src/app/[slug]/settings/users/page.tsx

@@ -1,17 +1,79 @@
-import { auth } from "@/auth";
-import { NotAuthorized, ShellEmpty } from "@/components/ShellEmpty";
-import type { SessionWithExtras } from "@/lib/session";
 import { canSee } from "@/lib/session";
+import { getPortalSession } from "@/lib/get-session";
+import { loadTenantForShell } from "@/lib/portal-data";
+import { Panel } from "@/components/portal/Panel";
+import { NotAllowed } from "@/components/portal/NotAllowed";
+
+export default async function TeamPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const session = await getPortalSession();
+  if (!canSee(session, "users")) return <NotAllowed need="IT_ADMIN" />;
+  const t = await loadTenantForShell(slug);
+  if (!t) return null;
+  const team = t.team;
 
-export default async function Page() {
-  const session = (await auth()) as SessionWithExtras | null;
-  if (!canSee(session, "users")) return <NotAuthorized />;
   return (
-    <ShellEmpty
-      title="Users"
-      description="Invite teammates as IT_ADMIN, CXO, FINANCE, LEGAL, or USER."
-      milestone="M10.1 follow-up"
-      details="User management calls Keycloak's Organizations Admin API. The adapter exists (internal/keycloak in tenant-registry); this UI just needs the list + invite handlers wired."
-    />
+    <div className="content-inner">
+      <div className="page-head">
+        <div>
+          <div className="page-title">Team</div>
+          <div className="page-sub">
+            {team.length} members ·{" "}
+            <span className="mono">{t.seats.used}/{t.seats.total}</span> seats used
+          </div>
+        </div>
+        <div className="ph-actions">
+          <button type="button" className="btn">Export</button>
+          <button type="button" className="btn btn-accent">Invite member</button>
+        </div>
+      </div>
+
+      <Panel bracket pad={false}>
+        <table className="ltable">
+          <thead>
+            <tr>
+              <th>Member</th>
+              <th>Email</th>
+              <th>Roles</th>
+              <th>Last active</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {team.map((m, i) => (
+              <tr key={i}>
+                <td>
+                  <span className="row" style={{ gap: 9 }}>
+                    <span className="avatar" style={{ width: 24, height: 24, fontSize: 9 }}>
+                      {m.name.split(" ").map((s) => s[0]).join("")}
+                    </span>
+                    <span style={{ fontWeight: 500, whiteSpace: "nowrap" }}>{m.name}</span>
+                  </span>
+                </td>
+                <td className="mono t-dim" style={{ fontSize: 11.5 }}>{m.email}</td>
+                <td>
+                  <span className="row wrap" style={{ gap: 4 }}>
+                    {m.roles.map((r) => (
+                      <span key={r} className="role-chip">{r}</span>
+                    ))}
+                  </span>
+                </td>
+                <td className="mono t-dim">{m.last}</td>
+                <td>
+                  <span className="row" style={{ gap: 6, fontSize: 12 }}>
+                    <span className={`dot ${m.status === "invited" ? "warn" : "ok"}`} />
+                    {m.status === "invited" ? "Invited" : "Active"}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Panel>
+    </div>
   );
 }